Organisms

83 feature-level sections across 10 chapters — shells, tables, charts, seat maps, checkout flows — composed from molecules and atoms.

Complex, feature-complete UI regions: page shells and navigation, admin tables, analytics charts, ticketing and seating, cart and checkout. Each organism owns one product domain and its data seam.

81 implemented•0 planned•10 chapters

Why it matters

Why organisms

Organisms are the feature-level workhorses of the ePassLive design system — headers, data tables, charts, seat maps, carts, checkout flows. Each organism composes molecules and atoms around one product domain and owns its data-fetching seam: everything above it (templates, pages) stays layout-only, everything below it (molecules, atoms) stays stateless and presentational. Reach for an organism when a UI region has a job you can name in product language — “the cart”, “the seat map”, “the admin data table”. Organisms are themed by the same token set in light and dark mode and ship WCAG 2.2 AA-clean. If a composition repeats across three or more pages, promote it to a template — never fork the organism.

Layouts & Shells

Page scaffolding: storefront and admin shells, account shells, list panels and dashboard grids.

StorefrontShell

Public storefront page shell — header, footer, skip-link, main landmark. Real organism; the templates stories twin was removed per ADR-035.

Adminlayout

Admin application frame with a skip link, sidebar and header slots, and a focusable, scrollable main content region.

AccountShell

Full-page account shell composing TopNav, an account-section Tabs bar, a main content slot, and the Footer organism — one organism, the whole logged-in account page.

DetailPageLayout

Generic detail-page host organism (W3 organisms plan). Slot-host for the shared view-one-record chrome — back-trail (Breadcrumbs or TextLink), header (eyebrow / H1 + StatusBadge / meta / actions), section navigation (declarative sections mapped to the Tabs molecule via split rendering — nav-only strip + organism-rendered tabpanel — or a freeform navigation override e.g. Stepper), body with optional sticky 20rem aside (content-first DOM + CSS mobile order flip, EventTabs tickets-first parity), footer divider, overlays — plus four page states (ready/loading/error/notFound) as full swaps with whole-node fallback overrides. Zero i18n keys (English-literal defaults, ListPanel precedent). Adopted by client-portal tickets/[id] and storefront dashboard EventDetail (W3).

ListPanel

Slot-based list host for the recurring header + toolbar + table + pagination pattern. Renders a token-driven header (title + actions slot), a renderTable slot for table ecosystem choice (ADR-033-compliant storefront DataTable OR DS AdminDataTable), optional toolbar/filter slot, density: default|compact for POSRegister-shaped layouts (cashier/scanner), inline loading skeleton and empty states, native button pagination. Used in storefront CRUD pages, dashboard tables, and POS register pattern (recipe cited in docs/components/organisms/listpanel.recipes.md).

SideCard

Storefront marketing aside — optional header image, eyebrow (defaults to « À découvrir » / « Discover »), title, body, bullet list and a text CTA with arrow, on a rounded-ep-md bg-ep-surface-card surface with border-ep-border. Complements main content columns (event detail sidebars, help panels). Exported from the barrel (src/index.ts) with SideCardProps.

AdminDashboardGrid

Responsive grid of admin stat cards (title, value, optional hint) in 2, 3, or 4 columns, with an aria-live empty state.

Data & Analytics

Charts, KPI grids, stat tables and activity feeds for revenue and operations dashboards.

Chart

Dependency-free line/bar/donut/sparkline chart — hand-rolled token-driven SVG with a visually-hidden data table (WCAG 1.1.1). No chart library; for recharts-based organisms see StackedBarChart / TimeSeriesAreaChart.

ChartCard

Card with a header (title + range-pill radiogroup selector) and a line-chart body (unfilled polyline rendered by the Chart organism). Used for Revenue Overview.

StackedBarChart

Multi-series stacked bar chart (recharts integration). Used for channel breakdowns (merch/ticket/package/pass/free per day).

TimeSeriesAreaChart

Time-series area chart with gradient fill (recharts integration). Used for revenue-over-time with currency-formatted axes.

StatGrid

Responsive KPI grid composing StatCard molecules — 16px gap, equal columns, stacks to 1 column on mobile. Renders up to 4 cards by default; showAll lifts the cap, columns pins the layout.

StatTable

Multi-section stats table with totals, subtotals per product type. Thuwan-mandated format: Total Available â†’ Ticket Counts â†’ Sales â†’ ePassLive Fees â†’ Transfer to Bank Account. DS-STAT-01 multi-column contract (one <th scope='col'> per declared column) when `columns` is supplied; legacy 2-column (Metric + Amount) when omitted. i18n: `locale` drives Intl.NumberFormat only (en-CA / fr-CA); chrome strings are overridable per prop.

StatisticsDateFilter

Controlled date-range filter with preset pills (Today/Yesterday/This week/Last week/This month/Year to date/ALL), From/To date inputs, and a Clear reset, labeled via a string map for i18n.

ActivityList

Activity feed section — labelled card with heading, optional caption and rows rendered by the ActivityItem molecule (kind → semantic tone + label). Empty state is visible muted text; no aria-live is set by the component.

EventComparisonTable

Event comparison table — side-by-side comparison of multiple events showing title, date, venue, from-price, star rating and a sold-capacity meter, plus an sr-only remove column for shortlist curation. Used for festival multi-event booking. Wave-3 L8c domain wrapper: composes the canonical DataTable organism with a locale-aware EventComparisonRow column config. Exported from the barrel since the ADR-035 barrel-orphans Wave 1 promotion (commit 9d4e6ec4) along with EventComparisonTableProps and EventComparisonRow. Dormant (0 app consumers — ADR-035 disposition pending) but part of the public API.

Tables & Admin Records

The canonical DataTable organism and its admin compositions — filterable, sortable, paginated and bulk-action variants.

DataTable

Canonical table organism for the entire design system — generic over its row type. Column config (key/header/format/sortable/numeric/hideBelow/sortValue/sortLabel/headerSrOnly), three-state sort cycle (null→asc→desc→null with aria-sort on <th>), accessible empty state (role=status / aria-live=polite), optional row selection (leading checkbox column with aria-selected + highlight), whole-row anchor navigation (rowHref stretches the first cell's <a>::after over the row — keyboard focus, accessible name, middle-click and open-in-new-tab all come from the anchor), interactive rows (onRowClick — focusable <tr>, Enter/Space activation, the <tr> KEEPS its row role so cell semantics survive), and grouped mode (rowGroups — full-width <th scope='rowgroup'> per group, sorting bypassed). Wave-3 L5-M3: the five Admin*Table organisms compose it instead of re-implementing table chrome; Wave-3 L8c: the five domain tables (BookingsTable, TierTable, UserTable, PromoTable, EventComparisonTable) compose it for the storefront. Exported from the barrel along with DataTableProps, DataTableColumn, DataTableRowGroup, DataTableSelection and SortDirection.

AdminDataTable

Plain admin data table with optional row navigation — Wave-3 L5-M3 thin composition over the canonical DataTable organism. The historical Admin column API is preserved (id / cell / width / align — no sorting, no selection); DataTable owns the table chrome (header rhythm, row hover, responsive overflow, accessible empty state). Its distinctive feature is row navigation: rowHref(row) makes the FIRST cell a real <a> whose ::after stretches over the whole row, so the entire row is clickable while the accessible name, keyboard focus, middle-click and open-in-new-tab all come from a genuine link rather than a click handler on <tr>; onRowActivate(row, event) is the SPA hook for unmodified primary clicks. Exported from the barrel along with AdminDataTableProps and AdminDataTableColumn.

AdminFilterableTable

Search-filtered admin data table — Wave-3 L5-M3 composition of the canonical DataTable organism with the TableToolbar molecule (search input + clear affordance). The wrapper owns the filtering semantics: filterPredicate(row, query) narrows rows client-side, a live region in the toolbar announces 'N / total matching', aria-controls wires the search input to the table wrapper, and emptyMessage (no data) vs noMatchMessage (filter miss) distinguish the two empty states. Filter chips (filters prop, forwarded to TableToolbar) are independent from the search predicate — chips handle categorical facets, the predicate handles the free-text query. Exported from the barrel along with AdminFilterableTableProps and AdminFilterableTableColumn.

AdminPaginatedTable

Controlled-pagination admin data table — Wave-3 L5-M3 composition of the canonical DataTable organism with the Pagination molecule (first / prev / pages / next / last + page-size readout, hidden on a single page). Pagination is FULLY CONTROLLED: currentPage + onPageChange are required, the wrapper never owns page state, the page is clamped into [1, totalPages] and sliced out of the full rows array. The Pagination molecule hides itself on a single page so short tables don't show dead chrome. Exported from the barrel along with AdminPaginatedTableProps and AdminPaginatedTableColumn.

AdminSortableTable

Sortable admin data table — Wave-3 L5-M3 thin composition over the canonical DataTable organism that keeps the historical Admin column API (accessor / cell, sortable-by-default columns, numeric data anchors, hideBelow responsive pruning). DataTable owns the three-state sort cycle (none → asc → desc → none), aria-sort semantics, keyboard-accessible header buttons (Tab / Enter / Space), row hover and the accessible empty state (role=status / aria-live=polite). Columns are sortable BY DEFAULT (sortable: false opts out — the inverse of DataTable's opt-in convention). Re-exports SortDirection for legacy barrel consumers. Exported from the barrel along with AdminSortableTableProps and AdminSortableTableColumn.

AdminBulkActionTable

Controlled bulk-selection admin data table — Wave-3 L5-M3 composition over the canonical DataTable organism. The leading checkbox column, per-row aria-selected + highlight and the accessible empty state come from DataTable's selection prop; this wrapper is FULLY CONTROLLED — the parent owns the selection Set<string> and receives toggle callbacks via onSelectionChange, the wrapper holds zero internal state. The bulk-action toolbar renders an 'N selected' live-region count plus one button per action (destructive variant for irreversible actions), all disabled until at least one row is picked. Exported from the barrel along with AdminBulkActionTableProps, AdminBulkActionTableColumn and AdminBulkAction.

Responsivetable

Generic data table that switches between table, stacked, and card layouts by viewport width, with priority-sorted columns and an EmptyState fallback.

BookingsTable

Producer bookings list — 7 columns (buyer+email stacked, event, venue, date, tickets, total, status pill). Composes the DataTable organism with a BookingRow column config (Wave-3 L8c). Five semantic-tint status pills (confirmed / pending / cancelled / refunded / checked-in). Bilingual via the `locale` prop (default `"fr"`). Caption is screen-reader-only by default. i18n: organism owns zero message-catalog keys — inline bilingual literals (Wave-3 W4 / VenueAccessMap / ActivityList precedent); caller-localize `rows`.

PromoTable

Promo-code table for commerce promo CRUD lists — code, discount, scope, validity window, usage meter, active/inactive status pill. Composes the DataTable organism with a PromoRow column config (usage meter + status pill live in the column formatters — Wave-3 L8c). Every user-visible string defaults to English and is overridable via the `labels` prop (headers, status labels, usage aria-label template) — FR-CA recipe in the source JSDoc. Exported from the barrel.

TierTable

Season-pass comparison table — category, per-event price, events included, effective total, perks list, and a Select CTA column. Composes the DataTable organism + the Button atom with a locale-aware TierRow column config (highlight rows tint via rowClassName — Wave-3 L8c). Bilingual chrome via `locale` (default `"fr"` — season-pass page language); the CTA is decorative (no onClick wiring). Exported from the barrel.

UserTable

Team management table — member (name + email stacked), role, status pill, venue count, last sign-in. FR/EN via the `labels` prop (the source module also exports a `USER_TABLE_LABELS_FR` bundle — note: NOT re-exported from the barrel yet). Composes the DataTable organism with a UserRow column config (two-line member cell + role/status formatters — Wave-3 L8c); rows are not interactive — role editing lives in the consumer. Exported from the barrel.

Content & Marketing

Public marketing surfaces: heroes, event cards and grids, carousels, FAQs, social proof and footers.

Hero

Full-bleed marketing hero — background image/video + gradient overlay + headline + subtitle + HeroSearch + featured badges. Used on /, /landing/* pages.

EventHero

Full-bleed event-page hero — background image under a bg-ep-gradient-scrim readability scrim, teal uppercase eyebrow, h1 title, subtitle, a Date/Venue metadata <dl> and one optional inline CTA. FR/EN definition-term labels via locale (default fr). Content-driven height (no viewport preset). Mounts in the EventDetailPublic template's hero slot. No share/save actions, no tabbed info.

EventCard

EPASS card organism — a square image or branded no-image placeholder (title monogram + optional localized category caption), with date and price chips, sold-out scrim, and a solid-background text block. The whole card is one link; no CTA button. PRICE CONTRACT (ADR-067 §2): `priceLabel` is used verbatim; without it, `priceFrom === 0` means unknown and is not announced as free. Category is visible only in the image-less placeholder and included in the card's accessible name.

EventGrid

Responsive event grid — 1/2/3/4 columns at sm/md/lg/xl, capped at 48 events per grid. Same shape across all event listing pages. Loading branch renders an accessible skeleton grid (role='list' + aria-busy); empty branch composes the EmptyState molecule instead of hand-rolled markup. Composes the EventCard organism per item (single layout, no variant switch — Wave-3 L8c audit). Locale-aware via the `locale` prop (EN default, FR opt-in); 'fr' also merges the canonical EVENTCARD_LABELS_FR bag under each card's own `labels` (card-level keys win per key).

EventsRow

EventsRow — horizontally scrollable rail of compact hand-rolled event cards (« Événements à la une » region, locale-aware). Fixed-width w-56 (224px) cards with gap-3 (12px), image (or IMG placeholder block), two-line clamped title, venue · date, teal from-price and a Voir/View link sized at --ep-tap-min. The rail overflow-scrolls with proximity snap. Does NOT compose the EventCard organism (self-contained markup).

EventList

Vertical divided list of events — compact 1-per-row rows (thumbnail, title + badge chip, date · venue, city, fromPrice, per-row 'Acheter des billets' button), not EventCard tiles. For the list view toggle. Renders its own row markup — does NOT compose the EventCard organism (but DOES compose the EmptyState molecule on empty input). All three authored strings localize via locale (FR default). Rows stack below sm; buy links carry per-event names and the 44px tap floor.

FeaturedEvents

Section wrapper for an EventGrid (or any children) — locale-ready heading (h1–h6 via headingAs, default h2, useId-derived id unless headingId given), optional 'View all' link (rendered only when both viewAllLabel and viewAllHref are set, sized at --ep-tap-min), tone light/dark background, responsive max-w-7xl padding, locale-aware empty-state message (locale 'en' default / 'fr' opt-in; emptyMessage override). NOT a carousel — no events prop, no auto-advance; children-less render shows a dashed role='status' 'No content available.' fallback. Server-renderable (no 'use client').

Carousel

Single-slide featured-events hero carousel. State-based slide switching (React state, not native scroll) with prev/next buttons and a WAI-ARIA tablist dot pagination — roving tabindex, ArrowLeft/ArrowRight (wrapping), Home/End, polite aria-live announcements. EN-default authored strings, FR via locale='fr'. No storefront consumer since the 2026-10-27 homepage rebuild (the lane shipped its own HeroShowcase instead) — kept as a DS organism.

AccentCard

Theme-aware accent CTA card — light bg-ep-surface-card surface with a decorative left strip in one of the four ADR-031 brand hues (teal/indigo/amber/pink), optional eyebrow/body/CTA (Phosphor arrow, SideCard family norm), and optional promotion to a keyboard-activated button via onClick. Dormant organism (ADR-035) — zero consumers.

FAQ

FAQ section organism — thin composition wrapper over the Accordion molecule (R1 composition fix, 2026-08-27): question maps to the accordion header (button + aria-expanded/aria-controls), answer to the region panel. Panels stay independently openable (multiple is always on); roving ArrowUp/ArrowDown/Home/End keyboard navigation is owned by the molecule. Ships in a card <section aria-label> with an <h2> heading — FR default, EN via locale, or a full heading override. Requires JavaScript.

SocialProof

Testimonial grid — one figure per quote (Phosphor Star rating row, blockquote, figcaption author + context) in a responsive 1/2/3-column ul. Localized section heading (« Ce qu'ils en disent » default). Static display organism: no carousel, no avatar, no logo wall (those were a never-shipped v0 spec).

Footer

Public site footer — multi-column: Brand + tagline, navigation columns (FooterColumn molecules), social icon buttons, optional newsletter column, legal strip. Responsive CSS grid (grid-cols-1 → sm:grid-cols-2 → lg:custom with --footer-cols custom property).

AdminFooter

Slim admin chrome footer: copyright line on the left, inline link row on the right. Uses text-ep-xs + text-ep-text-muted for legal text, border-ep-border-subtle top border, gap-4 spacing. All colors via DS tokens (no raw hex).

Ticketing & Seating

Ticket cards, wallets and selectors, interactive seat maps, venue maps and transfer flows.

TicketCard

Single ticket card — barcode (Barcode atom), event title, date, venue, seat/tier, status. Real organism; the molecules placeholder twin was de-cataloged.

TicketWallet

The buyer's ticket wallet: one row per ticket with a Code-128 barcode (Barcode atom, decorative) or an empty slot, event title, venue · date, door/section/seat detail, a status pill across four wallet statuses (active / used / transferred / expired) and a transfer button enabled only on active tickets.

TicketTierList

Single-selection radiogroup of ticket tier cards — name, description, price, perks, availability and fees per tier. Sold-out tiers disable their radio and dim the card; the highlight flag tints a recommended tier. Locale-aware labels (fr/en).

TicketSelector

Two modes, one component. Default (`mode` absent) — the inline ticket-quantity stepper (− / number / +) for ticket, pass and merchandise lines, with a translated ariaLabel, polite aria-live output and a 44×44 tap target in every size preset. `mode='card'` — the commerce card the buyer event page renders per ticket / pass / package: bordered rounded surface, name + kind pill, muted caption, clamped description beside price+fees, stepper beside the action button. `mode='row'` (2026-11-02, Ticketpro price-list reference) — one divided row per ticket / pass / package: name + kind pill + badges, caption and a 2-line clamped description on the left, the price (teal) with its fees note, then the stepper on the right; NO action button — the stepper IS the action and starts at 0 (the caller binds `value` to the buyer's selection); a non-buyable row prints `statusMessage` where the stepper would be. Replaces the deprecated `TicketTier` molecule for per-tier quantity input, and replaces the consumer-layer ticket row markup that used to live in storefront/EventTicketList (R8).

SeatMap

Venue seating chart as a CSS-grid of seat buttons: sections → rows → seats, five seat statuses (available / held / sold / blocked / inaccessible) driving color PLUS non-color cues (dashed border = held, dotted = blocked, strikethrough = sold/inaccessible). Edit mode toggles a controlled selection through selectedSeats + onSeatSelect; view mode renders read-only. Pair with SeatMapLegend (tier legend) and SeatPicker (capped, checkout-oriented picker) — SeatPicker reuses this component's seat types.

SeatMapLegend

Tier legend for the seat map. One toggle button per price tier with a color swatch, name, formatted price, and (optionally) availability. Sibling organism to SeatMap (the chart surface) and SeatPicker (the capped checkout variant). Real organism; the molecules placeholder twin was de-cataloged. Implements the seat-map family i18n convention (see also SeatMap, SeatPicker) via the SeatMapLegendLocale type.

SeatPicker

Checkout-oriented seat picker: sections → rows → seats grid reusing the SeatMap seat types and the same color + non-color status cues (WCAG 1.4.1 — dashed = held, dotted = blocked, strikethrough = sold/inaccessible). Adds a maxSeats cap (default 8, clamped 1–20) that disables unselected seats at the cap while deselection stays possible, a localized counter line, and a read-only confirmation mode. Pair with SeatMap (full chart) and SeatMapLegend (tier price legend).

AccessibilitySeatSelector

Accessibility-need seat selector — filters + seat map integration for reserved seating. Real organism implementation; the molecules placeholder twin was de-cataloged per ADR-035.

TicketDragDrop

Two-pane ticket picker with HTML5 drag-and-drop — available left, included right. Rows are draggable buttons; keyboard path is Tab/Enter/Space on the same buttons (WCAG 2.1.1); moves announced via aria-live (WCAG 4.1.3); tap targets >= --ep-tap-min (WCAG 2.5.5). Controlled contract matches TicketPicker (selectedIds in / onChange out). ADR-026.

TicketTransferModal

Ticket transfer dialog — enter recipient email, select the ticket to transfer, add an optional message, and confirm. Composes the Modal molecule for dialog chrome (portal, scrim, footer slot). Preserves legacy transfer flow.

VenueMap

Venue-level sold-inventory floor plan — a static figure/grid of section tiles colored by sold percentage, with a stage block and a four-tier legend. Not a geographic map: distinct from the storefront dashboard's same-named Google-Maps VenueMap wrapper (lat/lng/apiKey). Venue-level overview companion to SeatMap (seat-level statuses). Built-in labels are FR-CA by default (Scène, % vendu, Devant la scène) with a full EN set via the locale prop (Stage, % sold, Front of stage).

VenueAccessMap

Accessibility wayfinding figure: gridded 16:10 plan with positioned, colour-coded markers for five access kinds (wheelchair, hearing-loop, guide-dog, ramp, elevator), each announced via role=img labels, plus a legend list with details. Bilingual FR/EN inline literals via `locale` (FR default). Static presentational organism — no interactivity.

Commerce & Checkout

Cart drawers and summaries, checkout panels, order confirmation, merch and package cards.

CartDrawer

Slide-in cart drawer from right, composing the Drawer molecule for dialog chrome (portal, scrim, Escape-to-close). Cart line list + totals footer + checkout CTA. Localized fr/en labels; appears instantly (no animation).

CartSummary

Static cart/order recap aside for the checkout page — line items (label + optional detail) in a divided list, then a definition list of pre-formatted subtotal / fees / taxes (TPS+TVQ) / total rows and a full-width primary CTA (Button atom). Built-in labels are FR-CA by default (Recapitulatif, Sous-total, Frais, TPS+TVQ, Total, Confirmer et payer) with a full EN set via the locale prop (Order summary, Subtotal, Fees, Tax, Total, Confirm and pay). Not a timer: the legacy reservation-bar pattern (items/total/reservationMinutes/onCheckout) was never implemented. `variant='selection'` (2026-11-02) is the event page's live panel: a heading ('2 tickets') with the total and its note, the lines with a price and a trash IconButton each, an optional notice, and ONE primary CTA with onCta — a side panel that sticks below the site header from lg, and a bottom bar stuck to the viewport below lg that collapses to heading + total + chevron and expands to the lines.

CheckoutSummary

Checkout summary panel — buyer identity, selected payment method (brand + last4, Nuvei processing note), itemized line items, 4-row totals (subtotal / fees / TPS + TVQ / total), and an overridable FR-CA refund-policy footnote. Static review panel — no interactive controls.

OrderConfirmation

Post-purchase confirmation — success state with role="status" + aria-live="polite". Displays order ID, buyer identity (name + email), event card (title / venue / date / issued tickets), total paid, and ticket actions (download + add to Apple/Google Wallet). Uncontrolled organism; FR + EN via locale prop (default fr).

MerchCard

Artist-merchandise product card — square product image, h3 title, optional artist line, pre-formatted price and an add-to-cart CTA pinned to the card bottom. Static display organism (Family 7 Commerce, sibling of PackageCard/SideCard): price is a pre-formatted string and the button copy switches FR/EN via locale.

PackageCard

Season/bundle package offer card on a teal-tinted surface — event-count eyebrow, title, short description, big total price with per-event breakdown line, inclusion list, and a choose CTA pinned to the card bottom. Static display organism (Family 7 Commerce, sibling of MerchCard): price strings are pre-formatted by the caller and every built-in string switches FR/EN via locale.

GroupBookingForm

Group booking attendee-roster builder — one card per participant (full name required, optional email + accessibility note), fully controlled through attendees/onAttendeesChange. « Add attendee » disables at maxAttendees; per-row « Remove » hides at minAttendees; parent passes a pre-formatted totalLabel preview. FR/EN copy via locale prop (inline i18n, SeatMapLegend precedent).

Forms & Auth

Form scaffolds and dialogs: authentication, file upload, payment methods, admin settings.

AuthForm

Self-contained auth card form for the three auth modes (sign-in / sign-up / forgot). Field set switches per mode — fullName only on sign-up, password hidden on forgot; labels and copy switch per locale (FR default, EN via locale prop, SeatMapLegend inline-i18n precedent). onSubmit receives { email, password?, fullName? } after native validation; secondaryAction renders the footer link. Password-manager autoComplete hints on every field.

FileUpload

Drag-and-drop file field — dashed drop zone with click AND keyboard paths (Enter/Space), controlled (value) or uncontrolled file list showing name + size + Remove, and accept/maxSize/maxFiles client-side validation surfaced via onError. The organism owns zero network calls — onChange hands the raw File[] to the caller. Built-in zone copy is EN/FR via locale (default en). Dormant organism (no consumer yet).

FormLayout

Multi-step wizard layout — vertical step rail (240 px, left) + step content panel (right) + optional footer CTA slot. Owns no <form>, no fields, no validation, no data: the route fills each step via children and drives navigation via steps/currentStepId/onStepChange. Bilingual rail heading via locale (default fr); step labels stay caller-localized. Dormant organism (no consumer yet).

FormModal

Form-in-a-dialog pattern — thin composition over the Modal molecule that owns the <form> wrapper and the cancel/submit footer pair. The submit button binds to the form via the HTML form attribute, so Enter-in-field and native validation keep working while actions render in the footer (outside the form DOM the Modal portals past). Body-only usage covers content dialogs sharing the same chrome (W2).

PaymentMethodForm

Add-payment-method form with client-side validation for card number, MM/YY expiry, CVC, and name on card.

AdminSettingsPanel

Card panel for admin settings sections with a titled header, a body slot, and an optional right-aligned footer action bar.

Feedback & Overlays

Banners, stacked alert groups and confirmation dialogs.

Banner

Full-width announcement bar — 5 variants (info/success/warning/error/solid). Dismissible, with optional CTA. role='region' aria-labelledby={titleId}. The `solid` variant is brand-aligned (bg-ep-btn-primary + white text + animated icon + CTA button) for high-visibility system states (admin impersonation, maintenance mode). Composes the Alert molecule's ALERT_VARIANT_STYLES contract for the tinted variants (Alert is the single source of truth; Wave 3 Tier-1 L4-M3) and auto-adapts in dark mode.

AlertGroup

Stacked alert list composing the Alert molecule per alert. Stateless render loop over the specs — dismissal is per-alert; no queue, auto-dismiss, or max-visible logic.

ConfirmModal

Destructive-confirmation dialog — thin composition over the Modal molecule that owns the cancel/confirm action pair (danger variant by default, primary for archive/apply/clear) while the body (message, warnings, type-to-confirm input) stays consumer-owned. Extracted from 15 dashboard confirm sites (W2).

Check-in Operations

Door operations: live QR scanning and real-time check-in feeds.

QRScanner

Live camera-based QR scanner for ticket check-in. Uses BarcodeDetector API with manual entry fallback. Audio + haptic feedback on scan.

CheckinList

Door-operations check-in queue — one row per attendee (name, ticket tier, door, optional pre-formatted scan time) with a live state dot and a semantic state pill (En attente / En cours / Admis / Refusé). Rows in the scanning state expose inline Admettre/Refuser buttons (visual only — no callbacks). Fully presentational static list: the caller owns scan wiring; no fetching, no Medusa subscription.

Organisms — Design System — ePassLive