← Documentation Index

Component Specifications

ALPA Mobile UI Refresh — Reference Index
Updated: 2026-08-12 13:59 ET · Audited: 2026-07-09 21:15 ET · Work Items: AB#1821 · AB#2095 · 11 page specs + 2 MEC specs · 36 component spec pages

Reference index for the ALPA Mobile component specification suite — architecture, design tokens, API contracts, and requirements for the UI Refresh (Epic AB#1821). Component scaffold implementation is gated on Presentation Extraction (AB#2087). Specs are the ready baseline for that build.

Page Specs — Figma Screenshots by App Area

One file per app area. Each page shows all Figma screenshots for that area alongside screen name, node ID, template variant badge, and implementation notes. Open one of these when building a screen — no need to open Figma. 11 areas · 37 screens total.

MEC custom pages covered separately — see MEC Page Compositions and MEC Screen Mapping. Tablet tier deferred (D12). Overlays are included in their parent area file and correctly flagged as modal sheets, not routes.

Login NEW 2 screens · Standard member login + non-member variant No ViewModel — auth flow Home NEW 2 screens · Dynamic server-driven feed (DRAFT — UAL MEC prototype, layout tentative) WelcomeBannerViewModel · CarouselViewModel · CardSmallViewModel Notifications NEW 4 screens · Flight Status tab + Comms tab + Settings + Filter overlay NotificationFlightStatusViewModel · CardNotificationViewModel KCM NEW 5 screens · Home · Airlines · Airports · Policies search · Filter overlay KCMAirlineItem · KCMAirportItem · FormFieldViewModel Internal Comms NEW 2 screens · Article list + ALP Magazine sub-section CardSmallViewModel · DocumentItem Member Resources NEW 2 screens · Resource nav + PDR form (PDR is web-scoped — exclude from mobile) CardSmallViewModel · MenuItem Advocacy NEW 1 screen · PAC donation CTA + advocacy card-notification list ButtonViewModel · CardNotificationViewModel · PACMember Favorites NEW 2 screens · Rich card view + condensed list (blocked on Favorites API) CardHeroViewModel · CardSmallViewModel · ButtonViewModel FTDT — Flight Time & Duty Time NEW 8 screens · Dashboard · Duty Periods · Archived · Add segment / rest / note DutyPeriodViewModel · ProgressBarViewModel · FormFieldViewModel Flight Finder (Jumpseat) NEW 9 screens · Search · Results · Recent · Saved · Airline Policies · Filter overlay FlightCardViewModel · FormFieldViewModel · PolicyViewModel Global Search NEW 1 screen · App-wide typeahead — client-side over loaded data FormFieldViewModel (search + result-row variants)
Page Compositions (slot tables) → Screen Mapping (node registry) → MEC Page Compositions → MEC Screen Mapping →

Individual Component Specs

Per-component pages — live CSS preview, design tokens, ViewModel, Blazor Component API, and CSS class reference. Tier order: atom → primitive → container → composite → nav-chrome → domain-control. NEW = added in the 2026-06-26 Figma audit (all 11 app sections).

Atoms

Status Badge Shared atom — small typed status pill. Kind enum → colour (Kcm · Cass · Active · Monitor · Virtual · Info). Implemented 2026-07-14 (D52) for 6 light-surface consumers; dark-surface fdetail-badge flagged, not merged. StatusBadgeViewModel · StatusBadgeKind enum Toggle Switch NEW Bare on/off switch atom — Off/On states. Composed by the toggle-settings primitive (label + this atom); gap-audited 2026-07-06 (D47). ToggleSwitchViewModel Empty State Shared atom — centered icon (optional) + title + subtitle + optional CTA slot for empty lists. Implemented 2026-07-14 (D51), dedupes Favorites/Saved Searches/Saved Flights/Documents List. EmptyStateViewModel Action Column Shared atom — trailing action-button row, generic Items collection (not a fixed heart/bell/X trio). Implemented 2026-07-14 (D53); prerequisite for the Saved Search Card domain control (WI-2256). ActionColumnViewModel · ActionColumnItemViewModel · ActionColumnItemVariant enum

Primitives

Off the Radar NEW Shared fallback — item-unavailable/not-found landing page (radar illustration + blank-fill copy). Shipped with Favorites (WI 2182); reusable by any dead-link scenario. ItemUnavailablePage.razor · route /item-unavailable Progress Bar Value bar with label, min/max rows, and 16-segment BEM structure ProgressBarViewModel Form Field NEW 4 variants: search input, autocomplete row, nav row (Airline Policies), labeled (Flight Finder) FormFieldViewModel · FormFieldVariant enum Button Pill NEW Segmented pill control — default/selected single-choice group (Notifications Comms/Flight Finder, Flight Finder Nonstop/One Stop/Multileg) ButtonPillViewModel · TabGroup Blazor API Expander NEW Pill-bordered toggle button — collapsed (default) / expanded. Reveals hidden form fields. Advanced Search in Flight Finder. ExpanderViewModel (IsExpanded · Label · ChildContent)

Buttons

Primary Action Button Full-width pointed-endcap CTA — the signature ALPA button shape ActionButtonViewModel Button (Text / Icon Tile) Generic button — text-only or icon-tile (IsTile) variants; emergency treatment ButtonViewModel Secondary (Outline) Button NEW 3 shape variants: rect (Advocacy), full-pill/2px (MEC), partial-pill 38px (Flight Finder, Duty Period) ButtonViewModel + ButtonShape enum Button Card Card with embedded CTA button — D14 card-button scaffold ButtonCardViewModel Button Group Horizontal row of buttons (3-up tile pattern) ButtonGroupViewModel

Cards

Card Large (card-lg) NEW CMS editorial card — 200px image, 2px bottom accent border, eyebrow + title (± description) DocumentCardViewModel · CardHeroViewModel Card Small (card-sm) 80px image + title list row — universal section drill-down (KCM, Comms, Member Resources) CardSmallViewModel Card Text / Medium (card-md) Label + title + description card; red new-count badge; MEC no-image variant (250px) CardTextViewModel Card Notification NEW Text-only disclosure row with navy border-bottom — Advocacy section CardNotificationViewModel Card (generic) — legacy Superseded by card-large, card-small, card-text canonical specs above CardViewModel (base)

Containers

Carousel Horizontally scrolling card feed — title, "View All" link, mixed item types CarouselViewModel Grid Container Fixed-column grid of mixed items (3-col ButtonCard rows) GridContainerViewModel List Vertical stack content list — timestamp, headline, subtitle, favorite ListViewModel

Navigation Chrome & Page Template

Page Template NEW Full scaffold: top nav (120px clearance), content area (bg #f5f7fa, px 24px, gap 10px), bottom nav (top:770px, bg #05273e), 96px scroll buffer, interior nav-controls bar (38px, back + title + right icon) AlpaPageLayout · AlpaNavControls · spacing token reference Interior Tab Nav Section-level tab bar — active (Futura PT Demi) vs inactive (Afacad SemiBold) tabs (nav chrome — no ViewModel) Sort / Filter Bar NEW Results-header strip — summary line + Sort/Filter outline buttons (active/inactive). Flight Finder Results. SortFilterBarViewModel

Domain Controls

Duty Period FTDT duty period card — flight segments, status badges, "MANAGE" button DutyPeriodViewModel Flight Segment Card Default · swipe · expanded states. ⚠️ Variant4/Variant5 generically named in Figma — map by appearance. FlightCardView : ContentView (Track B · D17) Notification — Flight Status NEW Notification card — 3 variants: collapsed (default) · expanded · comms (category + headline instead of route + date) NotificationFlightStatusViewModel (spec-only) Card Hero Featured content hero — large editorial display card. Hydrated from a DocumentItem via DocumentHeroFactory (D58). CardHeroViewModel Saved Search Card Standalone control for a saved query — origin→dest IATA, trip-type, date + composed Action Column (per-page action items). Composes optional Status Badge atom. Implemented 2026-07-14 (D54); backs Recent Searches and Saved Searches. SavedSearchCardViewModel · composes ActionColumnViewModel Saved Flight Card Standalone Blazor implementation for Saved Flights — documented deviation from D40's literal "reuse Flight Segment Card" text, since that control is native XAML (Track B) with no Blazor port. Implemented 2026-07-14 (D54). SavedFlightCardViewModel · composes ActionColumnViewModel

Browse by Area

Component Library & Architecture Catalog · ViewModel hierarchy · domain controls · decisions record (4 docs) Design System & Foundations Tokens · typography · text scaling · assets · foundation audits (9 docs) API & Backend Contracts Dynamic feed · theme endpoint · content & routing contracts · backend mapping (5 docs) Screens, FTDT & Integration Screen mapping · gap inventories · Blazor alignment · MEC customizations · FTDT migration (7 docs) Requirements, Design Gaps & Open Questions Source requirements · open design questions · decision records (6 docs) Design Gaps — Review HubNEW Every undesigned or diverged screen by app area · side-by-side XAML-vs-Blazor comparison pages for design review