Used to add urgency around time-limited offers — flash sales, voucher expiry, limited-time deals on the Discover and Voucher surfaces. The Pill variant docks inside cards as a small "ends in" badge; the Full Container is the standalone promo bar; One / Per Container sit inline above CTAs.

• Four different layouts bundled as one component. Full Container is a promo card (header + countdown + CTA + close), One/Per Container are bare countdown bars, and Pill is a compact badge. These have different consumers, different paddings, different content contracts — they should be a primitive (the time-unit display) plus a composition recipe (the promo card). C1 · Layer Structure & Naming
• State axis mixes state + layout. State = Default | Expiring | Pill. "Expiring" is a true state (an urgency cue near the deadline). "Pill" is a layout treatment. They should be separate properties: style = full | one | per | pill and state = default | expiring. C2 · Variant & Property Naming
• Mode = Light | Dark baked as a variant instead of theme. The Mode axis renders different bg / text colors per theme — exactly what design tokens + a single theme mode are for. Baking Mode as a structural variant duplicates the variant matrix and forces consumers to manually switch component instances on theme change. C3 · Token Coverage
• no Days / Mins and Secs variants encode visible-unit subset. These two Per Container sub-variants only differ in which time units are visible (h:m:s vs m:s). That's a data concern (units: [.hours, .minutes, .seconds]), not a variant axis. Encoded as variants, every future "Y:H:M:S" or "M:S only" need produces yet another variant. C2 · Variant & Property Naming
• "White" / "Blue" Style values are color treatments, not layouts. Style = White | Blue on the Pill is a theme/color choice. It overlaps with Mode = Light | Dark — there's no defined matrix for "White-style Dark-mode". Color treatments belong in tokens; style should describe layout only. C2 · Variant & Property Naming
• Full Container hard-codes header text + CTA + close. The #title text "Hurry up! Sale ends in:" and the CTA button labeled "Show now!" are literal strings inside the component. Consumers using this for an offer without a CTA, or with a different message, have to detach. C4 · Native Mappability
• Close icon, CTA, and time-unit labels are not slots. Close icon is an instance with no opt-out, the CTA is a baked Button - XSmall instance, and the "days / hrs / mins / secs" labels are literal text — none of which is a Figma Slot. Native devs can't map these to @ViewBuilder / @Composable slots without a Figma restructure. C4 · Native Mappability
• No "expired" terminal state. Components like this need a defined behaviour when the timer hits 0:00:00:00 — either swap to an "Expired" label, fire a callback, or hide. None of those are spec'd in any variant. C5 · Interaction State Coverage
• No pressed / disabled / dismissed states. The promo CTA and the close icon are tappable but lack pressed / disabled spec. Pill should also have a disabled (greyed) state for promo-ended cases. None are modelled. C5 · Interaction State Coverage
• Pill embeds a feature-specific icon. The leading Task Delayed Small icon is baked into every Pill variant. Other countdown contexts may want a clock, hourglass, calendar, or no icon at all. Should be an optional leading-icon slot, not a baked instance. C6 · Asset & Icon Quality
• Code Connect mappings not registered. Blocked on the restructure decision — once Style / State / Theme are split correctly, native mappings collapse from ~24 variants × props down to ~6 props with a single composable. C7 · Code Connect Linkability

• Split Full Container out of the component into a recipe. Publish EBCountdownPromo as a documented composition (header + EBCountdown + Button + close icon) on the Countdown page. Keep EBCountdown the primitive for just the time-unit display. Removes a whole instance-swap dependency on Button + Close and decouples promo-copy decisions from the timer. Family
• Collapse Style + State + Mode + Variant into a small prop set. Target API: style: .one | .per | .pill, state: .default | .expiring | .expired, units: [.days, .hours, .mins, .secs], theme inherited. That is 3 + 3 + N + theme → an order of magnitude fewer variants in Figma and 1:1 mapping to a native component. Property
• Drive units by data, not by variants. Remove the no Days and Mins and Secs sub-variants. Replace with a units array on the primitive that controls which unit cells render. Same Figma component supports any subset without producing new variants. Property
• Move "Expiring" colors to state tokens. Today the Default vs Expiring palette is hardcoded per variant. Define countdown/color/{default|expiring}/{bg|border|label|number} token roles and bind both states' colors. State becomes a single prop that drives token swaps instead of a variant axis. Token
• Replace baked CTA and close instance with slots. In the Full Container recipe, surface a trailing slot (close icon / icon-button / empty) and a footer slot (CTA composition). Removes the hard dependency on Button - XSmall and lets consumers compose the promo to their need. Slot
• Add an optional leading-icon slot on Pill. Replace the baked Task Delayed icon with an icon?: Icon slot. Default to no icon. Pill becomes generic enough for any time-limited surface (offer expiry, scheduled job, queue position). Slot
• Define the timer behaviour contract. Document on the component: 1s tick cadence; monotonic clock (no drift on backgrounding); polite live-region announce on minute boundary; an onExpire callback; and the Expiring threshold (recommend last 24h with a token-driven hour count). Without this, every native implementation reinvents these details. Docs
• Document the A11y model. For ticking timers: VoiceOver / TalkBack should not announce every second. Use a polite live region that announces once per minute (or when crossing Expiring threshold). Provide an accessibilityLabel contract like "Sale ends in 5 days 9 hours". Mark the close button as a separate accessibility element. A11y