Interstitial Nav — Bordered Drill-Down Rows

A composed pattern for linking to deeper pages/sub-screens from a settings or detail view: a bordered, rounded panel of full-row-clickable items, each drilling into a more detailed screen (an edit form, an address book, a connected-account's OAuth flow, …). Built from the tip-nav-list / tip-nav-list-item components.

This directly follows Shopify's "Interstitial nav" guideline and its "Store contact details" settings-card example — a deliberate reference, not an accidental convergence. Consult it before deviating from the shape below.

Shape

<tip-card [padding]="'0'">
  <div class="stg-card-head stg-card-head--inset">
    <div>
      <h2 class="stg-card-title">Contact details</h2>
      <p class="stg-card-subtitle">Where TrackItPilot sends billing and account notices.</p>
    </div>
  </div>

  <tip-nav-list class="stg-nav-list">
    <tip-nav-list-item icon="store" title="Acme Corp" subtitle="mandeep1985ster@gmail.com" (select)="openContact()" />
    <tip-nav-list-item icon="map-pin" title="Business address" subtitle="United States" (select)="openAddress()" />
  </tip-nav-list>
</tip-card>

• A card heading + subtitle sit above the list (via stg-card-head--inset, since the hosting tip-card carries [padding]="'0'" so the nav-list can run full-bleed to the card's own border).
• Each row: an optional leading icon (muted tone), a title (heading weight) over a subtitle (muted), and a trailing chevron-right — the default, unless the row needs a different trailing affordance (a badge, a toggle preview, etc. via [trailing]).
• Rows are separated by hairline dividers and fill var(--surface-hover) across the entire row on hover — not just under the text — signaling the whole row is clickable, not just the label.
• Rows navigate to a deeper screen or open a sub-form; they are not for triggering in-place mutations (use a tip-button + tip-modal for destructive actions instead — see General's "Tools" card).

Where it's used

• Settings → General: Business details (single row: legal entity + country) and Contact details (store contact + business address rows) — app/frontend/src/app/features/settings/pages/general.html.

When to reach for this vs. a plain stg-row

Use tip-nav-list when the row's purpose is drilling into a deeper page/sub-form (Shopify's interstitial-nav use case). Keep using the hand-rolled .stg-row pattern (settings-shared.css) for rows that host an inline control (a tip-button, a toggle) rather than navigate — e.g. General's "Tools" card (Reset/Export). Don't mix the two inside the same list; pick one per card based on what the rows actually do.