Every interactive control that surfaced while hand-building the AB#1821 Blazor scaffold (28 pages across Auth, Home, Notifications, JSFF, KCM, FTDT, My MEC, Other Screens), mapped to its existing component spec — plus the short list of controls the library still lacks. Documentation only; no presentation work.
alpa-* CSS so layouts could be validated live before the
real build. In doing so it re-implemented 14 controls that already have component specs —
including the new Page Template, which alone
covers the page shell and the bottom tab bar that is copy-pasted into all 28 pages. The
reconciliation below is the consume-don't-rebuild list for the real implementation
(Presentation Extraction AB#2087 resolved 2026-07-01 — no longer gated, but still needs
scoping/prioritization via Azure Boards before work starts): each scaffold page should be rebuilt on the
specced component, not on its throwaway CSS. Only 4 genuinely new controls surfaced that
the library does not yet describe.
Each row is a hand-rolled alpa-* pattern in the scaffold that maps cleanly onto an existing
spec. The right column is what the #2087 build should consume instead.
| Scaffold pattern (hand-rolled) | Pages | Existing spec | ViewModel / API |
|---|---|---|---|
alpa-screen + alpa-statusbar + alpa-screen-nav + alpa-screen-content |
All 28 pages | SPEC Page Template | AlpaPageLayout · AlpaNavControls |
alpa-bottom-nav (~30 lines of inline SVG, duplicated per page) |
All 28 pages | SPEC Page Template (bottom-nav region) | AlpaPageLayout (ActiveTab param) |
alpa-pill-group / alpa-pill--active (Nonstop·OneStop·Multileg; Search filters) |
Flight Finder Search, Search | SPEC Button Pill | ButtonPillViewModel · TabGroup API |
alpa-tab-group / alpa-tab--active (COMMS·Flight Finder; JSFF sub-nav) |
Notifications, Flight Finder | SPEC Interior Tab Nav | (nav chrome — no VM) |
alpa-jsff-input / alpa-jsff-field (search, labeled, select) |
JSFF, KCM, MEC Hotels, Search, Airline Policies | SPEC Form Field | FormFieldViewModel · FormFieldVariant |
details.alpa-jsff-advanced (Advanced Search disclosure) |
Flight Finder Search | SPEC Expander | ExpanderViewModel (IsExpanded · Label · ChildContent) |
alpa-action-btn + endcap/chevron SVG (pointed CTA) |
Login, Non-Member Login, JSFF Search, FTDT forms | SPEC Primary Action Button | ActionButtonViewModel |
alpa-login-outline-btn, alpa-jsff-control-btn, alpa-fdetail-save-btn |
Login, Results (Sort/Filter), Details (Save) | SPEC Secondary (Outline) Button | ButtonViewModel + ButtonShape |
alpa-policy-row / alpa-kcm-airport-row / alpa-mec-*-row (drill-down) |
KCM, MEC, Member Resources, Search, Airline Policies | SPEC Card Small | CardSmallViewModel |
alpa-policy-row (text-only, navy border-bottom) |
Advocacy | SPEC Card Notification | CardNotificationViewModel |
alpa-fsnc-* shared shell, comms variant (Notifications Comms tab — alpa-notif-card removed 2026-08-12) / alpa-notif-row (Communications inbox, unchanged) |
Notifications (Comms), Communications | SPEC Notification — Flight Status (comms variant) | NotificationFlightStatusViewModel |
alpa-flight-card (results), alpa-fsnc-* (flight-status notification card) |
Flight Finder Results, Notifications (Flight Finder) | SPEC Flight Segment Card | FlightCardView (Track B · D17) |
alpa-kcm-hero / alpa-mec-hero / alpa-ftdt-hero / alpa-adv-hero |
KCM, My MEC, FTDT, Advocacy | SPEC Card Large / Card Hero | CardHeroViewModel |
alpa-ftdt-entry-row + type badge (FLT·RST·NOTE) |
FTDT Dashboard | SPEC Duty Period / Flight Segment Card | DutyPeriodViewModel |
These surfaced during the scaffold and have no current component spec. Each is a candidate for a new spec page before (or as part of) the #2087 build.
| Proposed component | Scaffold pattern | Pages | Proposed API · note |
|---|---|---|---|
| NEW Status Badge (atom) | alpa-policy-badge--kcm/--cass/--active/--monitor/--virtual, alpa-fdetail-badge |
KCM, JSFF Results/Details, Advocacy, MEC Events/Hotels | StatusBadge — Kind enum (Kcm · Cass · Active · Monitor · Virtual · Info) + Text.
Why now: the scaffold abused the --kcm/--cass color tokens as
generic green/blue on non-KCM screens; a typed Kind enum makes the semantic mapping explicit
and prevents that drift. Tracked as WI-2255. |
| NEW Empty State (primitive) | alpa-fav-empty (icon + title + subtitle, centered) |
Favorites, Saved Searches, Saved Flights | EmptyState — Icon · Title · Subtitle · optional CTA slot.
Hand-copied across 3 pages during the interaction pass — clear dedupe candidate. Tracked as WI-2255. |
| RESOLVED Saved Search Card + reuse | alpa-saved-card / alpa-saved-flight-card + trailing action column (♡ / 🔔 / ✕) |
Recent Searches, Saved Searches, Saved Flights | Resolved by D40: no shared "Saved Item Card" base. Saved Searches/Recent → a new standalone Saved Search Card (a saved query). Saved Flights → reuse Flight Segment Card by composition where the Figma frame matches (else standalone). Both compose the shared action-column atom + Status Badge / Empty State atoms. Tracked as WI-2256. |
| MINOR Sort / Filter Bar | alpa-jsff-results-header + alpa-jsff-control-btn |
Flight Finder Results | Results summary line + Sort/Filter control buttons. Low priority — likely composes Secondary Button in a header strip rather than warranting its own spec. Not resolved by D41's Flight Finder Filter Sort modal (2026-07-13 reconciliation check) — that's the full filter/sort configuration overlay; this row is the inline results-header trigger strip that would open it. Complementary, still unbuilt. |
alpa-* classes validated layout;
they are not the delivery surface. Per the CLAUDE.md Blazor/CSS rules, the delivery surface is the
specced component set.