Interior Tab Nav Item Figma: btn-flight finder interior nav Naming: pending D-number

Updated: 2026-06-26

Audited: 2026-06-26

Horizontal scrolling interior tab — single item with default / active states

Figma node: 4457:12515 (btn-flight finder interior nav) · Section: Components (4020:3422) · file key: psH738AqHDxuMyFm897f9r

Naming decision required. The Figma master is named btn-flight finder interior nav and was entered in figma-component-specs.json as "Flight Finder Nav Button" (June 2026 re-sync). However, this component appears on FTDT screens as well as Flight Finder — the "Flight Finder" qualifier is too narrow. A new D-number is needed to assign a cross-feature name before implementation. Candidate: InteriorTabItem. This page uses Interior Tab Nav Item as a working name.

Primitive tier — scrollable tab strip item. Each tab in the interior nav strip is a single instance of this component. The container (the row of tabs) is assembled by the screen template, not by a separate container component. Seen on: FTDT Cumulative Limitations, Duty Periods, Archived Logs; Flight Finder search/results screens. Two states: default (Afacad SemiBold, no decoration) and active (Futura PT Demi, underline).

Design tokens sourced from Figma file key psH738AqHDxuMyFm897f9r · Component: btn-flight finder interior nav (4457:12515) in Components section (4020:3422) · captured 2026-06-26

Live CSS Preview

Property 1 = default

Cumulative Limitations

Property 1 = active

Duty Periods

Contextual — 3-tab row (FTDT)

Cumulative Limitations

Duty Periods

Archived Logs

Contextual — 2-tab row (Flight Finder)

Flight Finder

Returns

Design Tokens

Dimensions (per item)

Figma master size

151×120 px (contains both state variants)

Padding horizontal

8 px (--tiny)

Padding vertical

4 px (--xtiny)

Tab row gap

10 px between items

Tab row overflow

overflow-x: clip (scrollable)

Colors

Label — both states

text/primary #05273e

Active underline

text/primary #05273e (CSS text-decoration)

Background

transparent (inherits screen bg)

Typography — Default state

Font family

Afacad SemiBold

Font weight

600

Font size

18 px (--font-size/body/m)

Line height

1.2

Text decoration

none

Typography — Active state

Font family

Futura PT Demi (font-family/body)

Font weight

500 (Demi)

Font size

18 px (--font-size/body/m)

Line height

1.2

Text decoration

underline (decoration-solid, from-font)

Figma Variants

Variant	Figma node	Font	Decoration
`Property 1=default`	4457:12516	Afacad SemiBold 18px	none
`Property 1=active`	4457:12514	Futura PT Demi 18px	underline

Layer Tree

└── btn-flight finder interior nav · 151×120 · FRAME (both variants)
    ├── Property 1=default · SYMBOL · 103×30
    │    └── [label] · TEXT · Afacad SemiBold 18px · no decoration
    └── Property 1=active · SYMBOL · 111×30
        └── [label] · TEXT · Futura PT Demi 18px · underline

── Row container (screen-level, not a separate component) ──
└── title slot · FRAME · flex row · gap 10px · overflow clip
    ├── btn-flight finder interior nav [active]
    ├── btn-flight finder interior nav [default]
    └── btn-flight finder interior nav [default]

ViewModel — Pending Naming Decision

The VM name below uses the working name InteriorTabItemViewModel pending a D-number decision. Do not reference this name in any C# code until the decision is recorded.

└── InteriorTabItemViewModel : ComponentViewModel ⚠ name pending D-number
    ├── Label : string — tab display text (e.g. "Duty Periods")
    ├── IsActive : bool — true = active state (Futura Demi + underline)
    └── TapCommand : ICommand — navigate to this tab's content

Usage Context

Screen	Node	Tabs
FTDT — Cumulative Limitations	4535:14038	Cumulative Limitations (active) · Duty Periods · Archived Logs
FTDT — Duty Periods	4544:5877	Cumulative Limitations · Duty Periods (active) · Archived Logs
FTDT — Archived Logs	4575:9452	Cumulative Limitations · Duty Periods · Archived Logs (active)
Flight Finder (from Figma node name reference)	4713:25117	TBD — pending screen audit

Developer Notes

Distinct from Segmented Control (D9): tab group (4361:8479, 345×31) is the in-screen segment for single-choice filtering (NONSTOP / ONE STOP / MULTILEG). This component is the top-of-screen interior navigation strip. Different Figma masters, different roles.
Row container is screen-level: The tab strip row (title slot frame) lives in the screen template, not in a separate container component. At implementation, consider whether a InteriorTabNavViewModel container holding ObservableCollection<InteriorTabItemViewModel> is warranted.
Active state drives font family change: Default uses Afacad SemiBold; Active uses Futura PT Demi. This is a font-family switch, not just a weight change — the CSS rule must swap font-family.
Overflow: The row is overflow-x: clip on the outer container. On very narrow screens or with many tabs, the strip should scroll; the Figma master shows overflow: clip for the artboard frame.
Implementation gated: No Razor/C# work until Epic AB#2087 (Presentation Extraction).

Blazor Component API

Target home: ALPAMobile.HybridUi. Component file: InteriorTabItem.razor (name subject to D-number resolution — see naming note above). The tab row container is an inline <div class="alpa-interior-tab-nav"> assembled by the screen template, not a separate component.

Parameter	Type	Required	Description
`Label`	`string`	Yes	Tab display text (e.g. "Duty Periods").
`IsActive`	`bool`	Yes	True → active state: Futura PT Demi font + underline decoration.
`OnClick`	`EventCallback`	Yes	Navigate to this tab's content view.

Razor Usage (target)

@* Row container assembled in screen template (e.g. FTDTLanding.razor) *@
<div class="alpa-interior-tab-nav">
    <AlpaInteriorTabItem Label="Cumulative Limitations"
                         IsActive="@(ActiveTab == Tab.Cumulative)"
                         OnClick="@(() => SelectTab(Tab.Cumulative))" />
    <AlpaInteriorTabItem Label="Duty Periods"
                         IsActive="@(ActiveTab == Tab.DutyPeriods)"
                         OnClick="@(() => SelectTab(Tab.DutyPeriods))" />
    <AlpaInteriorTabItem Label="Archived Logs"
                         IsActive="@(ActiveTab == Tab.ArchivedLogs)"
                         OnClick="@(() => SelectTab(Tab.ArchivedLogs))" />
</div>

CSS Class Reference (target)

Classes will live in ALPAMobile.HybridUi/wwwroot/css/alpa-components.css under the alpa-interior-tab BEM block. Name subject to D-number resolution.

Class	Scope	Key rules
`.alpa-interior-tab-nav`	Row container (screen template)	`display:flex; gap:10px; align-items:center; overflow-x:clip; padding:4px 0`
`.alpa-interior-tab`	Single tab item root	`display:inline-flex; align-items:center; padding:4px 8px; font-family:var(--font-family/alt); font-weight:600; font-size:18px; color:var(--text-primary); white-space:nowrap; cursor:pointer`
`.alpa-interior-tab--active`	Active state modifier	`font-family:var(--font-family/body); font-weight:500; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px`