New Components Catalog — 2026-06-10 Re-sync

Updated: 2026-07-31 12:31 ET · Audited: 2026-06-26 · Source: Figma re-sync 2026-06-10

Per-component pages for the components added in the 2026-06-10 Figma re-sync. Each entry covers details, variations, and developer notes. Data-source / API mappings are TBD at implementation (gated on Presentation Extraction AB#2087); structure, provenance, variants, and developer notes are captured now.

Authoritative decisions: naming-decisions-record.html (D1–D14).

Tiers: atoms → primitives → containers → nav chrome → page templates → domain controls. Screens are out of the library (D14).

Nav Chrome

Segmented Control nav chrome

Figma: tab group (4361:8479, 345×31) · VM: SegmentedControlViewModel : ComponentViewModel

In-screen single-select segment (e.g. NONSTOP · ONE STOP · MULTILEG; Notifications: Flight Finder ↔ Comms).

Variants/state: default / selected per segment; single-choice.
Dev note (§6): "Segmented pill control — single-choice. Drives in-screen tab switching." Distinct from Bottom Navigation (app tabs). D9 amended to allow the name Segmented Control.

Figma: navBar-bottom (4038:1037, 393×88) · VM: BottomNavigationViewModel : ComponentViewModel

Global bottom nav — main-section switcher (HOME · JUMPSEAT · KCM · FTDT · MY MEC). Composes NavItem (Primary).

Dev note (§6): "global nav, persistent across all primary screens; active tab reflects current section."
Tablet: navBar-bottom-tablet = responsive variant (deferred).

Figma: topNav (5419:34168) · VM: TopNavigationViewModel : ComponentViewModel

Top utility bar — profile · heart · bell · search + hamburger (≡). Composes NavItem (Top) + icon atoms + Logo.

Dev note (§6): "global, persistent across all screens; each opens its screen/overlay."

Nav Controls nav chrome

Figma: nav controls (4084:2871, 193×38) · VM: NavControlsViewModel : ComponentViewModel

In-screen header row: back / home · title · contextual action (e.g. filter). Used inside interior screens & the drawer.

Figma: hamburger menu (4084:2712, 300×570) · VM: NavigationDrawerViewModel : ComponentViewModel

Slide-out drawer: back/home + nav rows (Internal Comms · Member Resources · PDR · Advocacy · United SOAR · Settings). Composes Nav Controls + NavItem (Drawer). The full-screen overlay (menu-hamburger) is a Screen, not this component.

Atoms

NavItem atom

Figma: NavItem-primary (4020:3429, 50×80) · NavItem-top (4038:3300, 38×54) · navItem hamburger (4057:7542, 280×48)

One atom, variants: Primary / Top / Drawer (D12). Icon + label; the layout differs per variant (vertical tile vs horizontal row).

Build-phase flag: split into separate components only if the layouts diverge too far to share.

Badge atom

Figma: status (4325:6332, 75×17) · VM: BadgeViewModel : ComponentViewModel

Shared presentational atom: Label + State/Severity variant → CSS token styling. Composed by domain controls (flight status, duty-period status) via their factories (D11). Same Badge, different data.

Seen: "Delayed 34m" (flight detail).

Info Block atom

Figma: profile info block (4128:7690, 280×51) · VM: InfoBlockViewModel : ComponentViewModel

Generic label + value pair ("MEMBER NUMBER" / value), no surface chrome. Domain-neutral; the Profile screen composes a list of these from member data (D11). Distinct from CardText (which is on a surface).

Endpoint atom

Figma: endpoint (4322:5706, 41×44)

Flight endpoint atom (airport code + time, e.g. DEN 12:00). Composed into Flight Card / Flight Segment by their factories (D11).

Logo atom

Figma: alpa logo (4023:780, 60×60)

ALPA brand mark — a brand-asset atom (image), not a logic component.

Back atom

Figma: back (4431:4432, 69×22)

Back affordance (caret + label). Used by Nav Controls.

Check Indicator atom

Figma: check (4562:8918, 22×22) · No VM — presentational only

Circle outline with check mark; indicates KCM-access eligibility. State is data-driven (bool), not interactive — rendered by the KCM Airlines domain control. Two instances per row: Pilots column · Flight Attendants column.

GAP-A — the atom has no unchecked state. It is described here as data-driven by a bool, but the design only ever draws true: 4562:8918 is a single symbol with no variant set, and the page mock 4562:7754 shows every row fully ticked. Live data has false constantly — 125 eligible / 27 not at the time of writing.

This matters because it is the reason the columns exist. KCM-3's argument for replacing the pills is that pill-absence is ambiguous between "not eligible" and "unknown"; rendering false as an empty cell reproduces that ambiguity in a new layout.

Implemented as the same 22×22 circle with the tick omitted and the stroke muted, carrying an explicit aria-label of "not eligible" so assistive tech states the value rather than inferring it from a missing element. Our reading, not design intent — an explicit ×, or a distinct third "unknown" state, are equally reasonable. Please confirm or supply a variant on 4562:8918. Decision recorded on AB#2390.

Primitives

Form Field primitive

Figma: Master Form Field (92 instances) · VM: FormFieldViewModel : ComponentViewModel

Unified field. Variants/booleans select the form: text input · select dropdown · expanding textarea · ±leading/trailing icons · states (default / focused / entered / disabled).

Dev note (§6): "By toggling variations and booleans, an instance can be set up as a regular input field, a select dropdown, or an expanding textarea, with or without icons, in any state." ("Master" = a Figma main-component artifact, dropped — see D-table.)

Progress Bar primitive

Figma: progress bar & labels (4537:14830) · VM: ProgressBarViewModel : ComponentViewModel

Value bar + value/min-max labels. VM holds data (value/min/max + label text), not the fill look.

Dev note (§6): "gradient style for all progress bar fills" → a CSS gradient token, MEC-themeable (D12/D13).

Section Title primitive

Figma: section title (4596:11818, 313×38) · VM: SectionTitleViewModel : ComponentViewModel

Section header: title text + optional "View All ›" link. Used by Carousel and screens.

Card — new layout variant: card-notification is not a new component — it folds into Card as a layout variant (image placement/proportion = visual). comms vs flight-status = styling variant; collapsed/expanded = state. Axes orthogonal: Size ⟂ Layout ⟂ state. Dev note (§6): "one card component serves both notification tabs (comms variant)."

card-md in MEC carousels — the 250px text-only document cards in MEC "Latest Documents" (Contract · Did You Know? · Roster · Policy Manual) and "LEC" (Documents · Update · LEC Events · Reps) map to the existing CardTextViewModel (Image = null → text-only layout variant). Red new-count badges (e.g. "11" / "2") are covered by the existing NewCount property. Display width 250px is a CSS carousel-slot concern, not a VM property.

Toggle Switch primitive

Figma: toggle switch (4128:7738, 64×28) · VM: ToggleSwitchViewModel : ComponentViewModel

On/Off boolean toggle (HIG-compliant). Seen in FTDT "Add Unaugmented Duty Period" for the Acclimated flag. Label text ("Acclimated") is a separate adjacent text element — not part of the component; set by the consumer. Ref: HIG toggles.

States: On — blue fill (#007bc2) + white knob; Off — grey fill + white knob.
VM: bool IsOn { get; set; }. Consumer is responsible for the adjacent label text.

Page Templates

Page Template page template

Figma: template (4436:5299, 393×852)

Base screen scaffold (status bar · nav · content slot via RenderFragment).

Interior Template page template

Figma: main view-interior (4245:5027)

Interior screen scaffold (Nav Controls + title + content slot). Seen in Flight Finder.

Feed Template page template

Figma: main-feed slot (4038:891, 393×852)

Home/feed scaffold with a content slot.

Concrete screens (profile, menu-hamburger, *— TABLET) compose templates + library components and live app-side, not in the library (D14).

Domain Controls

Domain controls compose scaffolds + atoms via factories (D11).

Flight Card domain control

Figma: flight card (4348:4002, 5 variant states)

Composes base Card + Endpoint ×2 + leg/layover collection (DL 302 · AA 1753 · AA 1186) + icons.

Variants/states: Default · swipe · expanded · Variant4 · Variant5 (states, not components — D12).
Dev notes (§6): ⭐ carries a hidden detail expanded layer ("every flight card carries one"); the swipe-left look is a static depiction, not real layout — "same convention on Recent/Saved/notifications."

Flight Segment domain control

Figma: flight segment card (4555:7483, 353×111)

Composes Endpoint (DEN ✈ MIA) + date/time + carrier/equipment (DL 302 · 757). FTDT add-segment.

Flight Detail domain control

Figma: flight detail flight info (4325:6399, 298×154)

Composes Badge ("Delayed 34m") + Info Block (Gate H14) + Buttons (KCM › · Jumpseat Policy ›). Departure/Arrival.

Duty Period domain control

Figma: card-duty period-alt (4617:13876, 3 variant states)

Composes Progress Bar (Max Duty 14:00) + Info Block (Ends/Duty) + Button (Manage Flights & Details). Variants: Default · Variant2 · delete-demo.

Welcome Banner domain control

Figma: Welcome thing (5419:35702 / 4185:10447, full width) · VM: WelcomeBannerViewModel : ComponentViewModel

Full-width member-greeting banner pinned at the top of the Home and MEC feeds. Shows a personalized heading ("Welcome Captain Johnson") + an optional CTA link ("View Contract"). Ends with the pointed chevron endcap — same SVG geometry as Action Button. MEC-themeable via token swap (D12/D13).

Home variant: Background blue/100 (#dfedf9), dark text.
United MEC variant: Background united-brand/blue-800 (#002243), white heading, teal link (#94ebfe).
VM slots: GreetingText : string · LinkText : string? · LinkUrl : string? · BackgroundToken : string?. Link row hidden when both null/empty.
Dev note: "Restyle, don't rebuild" (D12/D13) — same component, MEC token swap, no duplicate Razor.

KCM Airlines Table domain control

Figma: KCM-Airlines (4562:7754) · ~~same pattern for KCM-Airports~~ — Airlines only, see below

Data-table domain control for KCM airline access data. Composes: Nav Controls (back · title "Airlines" · filter · search) + a CSS-sticky column-label row ("Airline" / "Pilots" / "Flight Attendants") + a scrollable body of rows (name text + two Check Indicator atoms).

Correction — this pattern does not extend to KCM-Airports. The original "same pattern for KCM-Airports" note was wrong on two counts, and the data settles it rather than preference:

KCMAirportItem carries airportName, airportCode, checkinNotes, mapUrl and no crew-role booleans. KCMAirlineItem is the only model with pilots / attendants, so a check-column table on Airports would have nothing to check.
The Airports page mock 4562:8249 is a plain drill-in list of airport codes with a chevron — no columns, no check indicators.

KCM-Airports (KCM-6) is therefore built as a drill-in list, not a data table. Recorded as GAP-B on AB#2390.

Dev note (§6): Sticky header = position: sticky; top: 0 CSS on the header row — not a standalone component.
Filter overlay: Modal sheet (overlay-), not a route — consistent with §6 "Overlays are modal sheets."
VM: KcmTableViewModel (domain-side, not in library) holds IReadOnlyList<KcmAccessEntry>. Each entry: Name : string · AllowsPilots : bool · AllowsFlightAttendants : bool. Airports table: same VM shape, different API source.

Cross-cutting Developer Notes (§6)

Overlays are modal sheets, not routes — overlay- frames (filter/sort/notification-filter) layer over a base screen.
MEC theming = "restyle, don't rebuild" — same components re-skinned per MEC (color/radius/accent) → CSS variables (D12/D13).
Favorite heart (D7) — not rendered on components; IsFavorite stays as state.
Swipe-to-reveal gestures — left-swipe on Flight Cards / Recent Searches / Saved Searches / Saved Flights / notification rows reveals contextual action buttons (e.g. Save in blue, Delete in red). Figma depicts these as static offset layers showing the swiped state — not real layout. Implementation: gesture-driven translation offset, not absolute positioning. The hidden expanded layer on Flight Card is a separate concern (see Flight Card dev note).
Notifications — two-tab segmentation — the Notifications screen uses a Segmented Control (Comms · Flight Finder) to switch feed source. One screen / two filtered views — not separate routes. Annotation (node 5060:14989): "Switching changes the list source; the same card serves both tabs."
Dynamic title text (Flight Finder results nav) — the Nav Controls title in search results (e.g. "DEN to MIA•Multileg•Mon Apr 20") is data-driven; text size may need to be dynamic on extreme edge-case lengths (annotation on node 4713:25180).
Toggle Switch label is external — the label text adjacent to a Toggle Switch (e.g. "Acclimated") is rendered by the consumer screen, not embedded in the component. ToggleSwitchViewModel carries only IsOn : bool.

Each entry above becomes a full per-folder page (<component>/<component>-component.html + -property-mapping.md) with data-source analysis when the component is implemented under AB#2087.