Component roadmap

Single cart line — event thumbnail, title, tier, date, quantity stepper, line total, remove button. Hover-only remove on desktop. Superseded by cartdrawer.

Horizontal scrollable row of category chips — Music, Sports, Comedy, Theater, Festivals, Family. Multi-select for filtering event grids. Superseded by filterchipgroup.

Menu attached to a trigger. Renders items with role='menuitem'. Closes on Escape, click outside, item select. Keyboard arrow navigation. Prefer the Menu molecule for new popover menus; Dropdown's legacy native-select API (options/value/onChange) is DEPRECATED (Wave 3 Tier-1, L6-M3) — use Menu for action menus or the Select atom for form selects. Superseded by menu.

Public event card — 320px wide. Top: 200px image with hover scale. Body: date (large) + title + venue + price-from + Buy button. Larger and more visual than admin EventCard. Superseded by eventcard.

Gift ticket preview card — recipient name, message preview, event details, and gift wrap indicator. Used in checkout and order confirmation. Critical UX pattern: gift ticket. Superseded by ticketcard.

Compact label + value row — 12px label on left, 14px/700 value on right, with 1px bottom border. Used in Ticket Sales Breakdown side card. Superseded by StatCard (atom — covers the compact-metric use case with full token coverage).

Grouped nav items with an uppercase 10px label above (e.g. 'Main', 'Sales', 'Operations'). Bounded to ≤4 items per group (NASA Rule 2). Superseded by sidebar.

Sidebar navigation item — 20px icon + label + optional badge. Active state shows 4px teal accent on left edge, white background, and teal-700 text. Superseded by sidebar.

Compact order summary — line items + total only. Used in cart drawer and confirmation. Superseded by checkoutsummary.

Payment method row — radio + icon + label + description + extra info. Used in CheckoutSummary payment selector. Superseded by paymentmethodcard.

DEPRECATED — ghost with no source file; never shipped and not exported. Use PromoCodeValidator (its applied-code-pill UX is hand-rolled in CheckoutForm pending a step-6 API decision).

307×40 search input with leading magnifier icon. 30px border-radius (pill shape). Border darkens to teal + 4px glow on focus. Used in admin header as the global search. Superseded by herosearch + searchoverlay.

Status indicator pill — 11px/600, 20px radius. Variants: confirmed (green), pending (amber), cancelled (red). 6px dot prefix in current color. Superseded by StatusBadge (atom — broader status palette + accessibility annotations).

Single ticket tier — name, description, price, availability indicator, quantity stepper. Disabled when sold out. Superseded by tickettierlist.

Controlled floating panel anchored to a trigger child. 4 placements, outside-click and Escape dismissal, role='dialog' with aria-label. Superseded by tooltip (controlled/interactive mode).

Header user profile — 40px avatar + name (13px/600) + role (11px muted) + chevron dropdown indicator. Renders as <button> with aria-haspopup='menu' and aria-expanded. Superseded by header.

Public-facing event detail card — hero image, title, date/venue meta, optional tag chips, plain-text description, sticky CTA panel (Buy / Share). Two-column grid that collapses to a single stack under md.

Deprecated two-column event detail layout (hero, content slots, sticky ticket aside); superseded by DetailPageLayout - do not use for new work.