stimeo-ui 0.14.0 → 0.16.0

package/dist/controllers/count_up_controller.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/authored_integer.ts","../../src/utils/reduced_motion.ts","../../src/controllers/count_up_controller.ts"],"names":[],"mappings":";;;;;AACA,IAAM,UAAA,GAAa,wBAAA;AAEnB,IAAM,WAAA,GAAc,QAAA;AAwBb,SAAS,gBAAgB,IAAA,EAA6B;AAC3D,EAAA,MAAM,UAAA,GAAa,IAAA,CAAK,IAAA,CAAK,IAAI,CAAA;AACjC,EAAA,IAAI,UAAA,KAAe,MAAM,OAAO,IAAA;AAEhC,EAAA,MAAM,KAAK,UAAA,CAAW,KAAA;AACtB,EAAA,MAAM,MAAA,GACJ,EAAA,GAAK,CAAA,IAAK,IAAA,CAAK,KAAK,CAAC,CAAA,KAAM,GAAA,KAAQ,EAAA,KAAO,KAAK,WAAA,CAAY,IAAA,CAAK,IAAA,CAAK,EAAA,GAAK,CAAC,CAAW,CAAA,CAAA;AAExF,EAAA,MAAM,OAAO,UAAA,CAAW,IAAA,CAAK,IAAA,CAAK,KAAA,CAAM,EAAE,CAAC,CAAA;AAC3C,EAAA,MAAM,IAAA,GAAO,IAAA,CAAK,CAAC,CAAA,CAAE,MAAM,KAAK,CAAA;AAChC,EAAA,MAAM,aAAa,IAAA,CAAK,CAAC,EAAE,KAAA,CAAM,MAAM,KAAK,EAAC;AAI7C,EAAA,MAAM,IAAA,GAAO,KAAK,CAAC,CAAA;AACnB,EAAA,MAAM,QAAQ,IAAA,CAAK,MAAA,IAAU,KAAK,CAAC,IAAA,CAAK,WAAW,GAAG,CAAA;AACtD,EAAA,IAAI,MAAA,GAAS,IAAA;AACb,EAAA,KAAA,IAAS,IAAI,CAAA,EAAG,KAAA,IAAS,IAAI,IAAA,CAAK,MAAA,EAAQ,KAAK,CAAA,EAAG;AAChD,IAAA,IAAI,UAAA,CAAW,CAAA,GAAI,CAAC,CAAA,EAAG,MAAA,KAAW,KAAK,IAAA,CAAK,CAAC,CAAA,EAAG,MAAA,KAAW,CAAA,EAAG;AAC9D,IAAA,MAAA,IAAU,KAAK,CAAC,CAAA;AAAA,EAClB;AAEA,EAAA,MAAM,SAAA,GAAY,MAAA,CAAO,QAAA,CAAS,MAAA,EAAQ,EAAE,CAAA;AAC5C,EAAA,OAAO,MAAA,GAAS,CAAC,SAAA,IAAa,CAAA,GAAI,SAAA;AACpC;;;ACjCO,SAAS,oBAAA,GAAgC;AAC9C,EAAA,OACE,OAAO,MAAA,CAAO,UAAA,KAAe,cAC7B,MAAA,CAAO,UAAA,CAAW,kCAAkC,CAAA,CAAE,OAAA;AAE1D;;;AClBA,IAAM,gBAAA,GAAmB,IAAA;AAqClB,IAAM,iBAAA,GAAN,cAAgC,UAAA,CAAwB;AAAA,EAC7D,OAAgB,MAAA,GAAS;AAAA,IACvB,QAAA,EAAU,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,gBAAA,EAAiB;AAAA,IACpD,IAAA,EAAM,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,CAAA,EAAE;AAAA,IACjC,IAAA,EAAM,EAAE,IAAA,EAAM,OAAA,EAAS,SAAS,IAAA;AAAK,GACvC;AAAA,EACA,OAAO,OAAA,GAAU,CAAC,OAAO,CAAA;AAAA,EACzB,OAAO,MAAA,GAAS,CAAC,KAAK,CAAA;AAAA,EAMtB,MAAA,GAAwB,IAAA;AAAA;AAAA,EAGxB,IAAI,SAAA,GAAoB;AACtB,IAAA,OAAO,MAAA,CAAO,SAAS,IAAA,CAAK,aAAa,KAAK,IAAA,CAAK,aAAA,GAAgB,CAAA,GAC/D,IAAA,CAAK,aAAA,GACL,gBAAA;AAAA,EACN;AAAA;AAAA,EAGA,IAAI,KAAA,GAAgB;AAClB,IAAA,OAAO,OAAO,QAAA,CAAS,IAAA,CAAK,SAAS,CAAA,GAAI,KAAK,SAAA,GAAY,CAAA;AAAA,EAC5D;AAAA,EAES,OAAA,GAAgB;AAKvB,IAAA,MAAM,MAAA,GAAS,KAAK,YAAA,EAAa;AACjC,IAAA,IAAI,WAAW,IAAA,EAAM;AACrB,IAAA,MAAM,QAAA,GAAW,MAAA,CAAO,YAAA,CAAa,YAAY,CAAA;AACjD,IAAA,IAAA,CAAK,OAAA,CAAQ,QAAQ,QAAQ,CAAA;AAC7B,IAAA,IAAI,aAAa,IAAA,EAAM,IAAA,CAAK,OAAA,CAAQ,YAAA,CAAa,sBAAsB,MAAM,CAAA;AAAA,EAC/E;AAAA,EAES,UAAA,GAAmB;AAG1B,IAAA,IAAI,IAAA,CAAK,MAAA,KAAW,IAAA,EAAM,IAAA,CAAK,OAAA,EAAQ;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,KAAA,GAAc;AACZ,IAAA,IAAI,IAAA,CAAK,WAAW,IAAA,EAAM;AAC1B,IAAA,IAAI,KAAK,SAAA,IAAa,IAAA,CAAK,OAAA,CAAQ,YAAA,CAAa,oBAAoB,CAAA,EAAG;AAEvE,IAAA,MAAM,IAAA,GAAO,KAAK,YAAA,EAAa;AAC/B,IAAA,IAAI,SAAS,IAAA,EAAM;AACnB,IAAA,MAAM,WAAW,IAAA,CAAK,IAAA;AACtB,IAAA,MAAM,MAAA,GAAS,gBAAgB,QAAQ,CAAA;AAGvC,IAAA,IAAI,sBAAqB,EAAG;AAC1B,MAAA,IAAA,CAAK,OAAA,CAAQ,YAAA,CAAa,oBAAA,EAAsB,MAAM,CAAA;AACtD,MAAA,IAAA,CAAK,QAAA,CAAS,OAAO,EAAE,MAAA,EAAQ,EAAE,KAAA,EAAO,MAAA,IAAU,CAAA;AAClD,MAAA;AAAA,IACF;AAMA,IAAA,MAAM,MAAA,GAAS,IAAA,CAAK,KAAA,CAAM,IAAA,EAAM,QAAQ,CAAA;AACxC,IAAA,MAAM,OAAO,IAAA,CAAK,KAAA;AAClB,IAAA,MAAM,OAAA,GAAU,YAAY,GAAA,EAAI;AAChC,IAAA,MAAM,IAAA,GAAO,CAAC,GAAA,KAAsB;AAClC,MAAA,MAAM,IAAI,IAAA,CAAK,GAAA,CAAA,CAAK,MAAM,OAAA,IAAW,IAAA,CAAK,WAAW,CAAC,CAAA;AACtD,MAAA,MAAM,KAAA,GAAQ,CAAA,GAAA,CAAK,CAAA,GAAI,CAAA,KAAM,CAAA;AAC7B,MAAA,MAAA,CAAO,WAAA,GAAc,OAAO,IAAA,CAAK,KAAA,CAAM,QAAQ,MAAA,GAAS,IAAA,IAAQ,KAAK,CAAC,CAAA;AACtE,MAAA,IAAI,IAAI,CAAA,EAAG;AACT,QAAA,IAAA,CAAK,MAAA,GAAS,sBAAsB,IAAI,CAAA;AAAA,MAC1C,CAAA,MAAO;AACL,QAAA,IAAA,CAAK,OAAA,EAAQ;AACb,QAAA,IAAA,CAAK,QAAA,CAAS,OAAO,EAAE,MAAA,EAAQ,EAAE,KAAA,EAAO,MAAA,IAAU,CAAA;AAAA,MACpD;AAAA,IACF,CAAA;AACA,IAAA,IAAA,CAAK,MAAA,GAAS,sBAAsB,IAAI,CAAA;AAAA,EAC1C;AAAA;AAAA,EAGA,YAAA,GAA4B;AAC1B,IAAA,MAAM,SAAS,QAAA,CAAS,gBAAA,CAAiB,IAAA,CAAK,OAAA,EAAS,WAAW,SAAS,CAAA;AAC3E,IAAA,IAAI,IAAA,GAAO,OAAO,QAAA,EAAS;AAC3B,IAAA,OAAO,SAAS,IAAA,IAAQ,eAAA,CAAgB,IAAA,CAAK,IAAI,MAAM,IAAA,EAAM;AAC3D,MAAA,IAAA,GAAO,OAAO,QAAA,EAAS;AAAA,IACzB;AACA,IAAA,OAAO,IAAA;AAAA,EACT;AAAA;AAAA,EAGA,YAAA,GAAmC;AACjC,IAAA,OAAO,IAAA,CAAK,OAAA,CAAQ,aAAA,CAA2B,uBAAuB,CAAA;AAAA,EACxE;AAAA;AAAA,EAGA,KAAA,CAAM,MAAY,QAAA,EAA+B;AAC/C,IAAA,MAAM,MAAA,GAAS,QAAA,CAAS,aAAA,CAAc,MAAM,CAAA;AAC5C,IAAA,MAAA,CAAO,YAAA,CAAa,uBAAuB,MAAM,CAAA;AACjD,IAAA,MAAA,CAAO,YAAA,CAAa,QAAQ,KAAK,CAAA;AACjC,IAAA,MAAA,CAAO,YAAA,CAAa,cAAc,QAAQ,CAAA;AAC1C,IAAA,IAAA,CAAK,YAAY,MAAM,CAAA;AACvB,IAAA,MAAA,CAAO,OAAO,IAAI,CAAA;AAClB,IAAA,OAAO,MAAA;AAAA,EACT;AAAA;AAAA,EAGA,OAAA,CAAQ,QAAqB,IAAA,EAA2B;AACtD,IAAA,MAAA,CAAO,YAAY,QAAA,CAAS,cAAA,CAAe,QAAQ,MAAA,CAAO,WAAA,IAAe,EAAE,CAAC,CAAA;AAAA,EAC9E;AAAA;AAAA,EAGA,OAAA,GAAgB;AACd,IAAA,IAAI,IAAA,CAAK,MAAA,KAAW,IAAA,EAAM,oBAAA,CAAqB,KAAK,MAAM,CAAA;AAC1D,IAAA,IAAA,CAAK,MAAA,GAAS,IAAA;AACd,IAAA,MAAM,MAAA,GAAS,KAAK,YAAA,EAAa;AACjC,IAAA,IAAI,MAAA,KAAW,MAAM,IAAA,CAAK,OAAA,CAAQ,QAAQ,MAAA,CAAO,YAAA,CAAa,YAAY,CAAC,CAAA;AAC3E,IAAA,IAAA,CAAK,OAAA,CAAQ,YAAA,CAAa,oBAAA,EAAsB,MAAM,CAAA;AAAA,EACxD;AACF","file":"count_up_controller.js","sourcesContent":["/** Digits plus the characters that may separate them inside one number. */\nconst TOKEN_BODY = /\\d[\\d.,'’’    _]*\\d|\\d/;\n/** A `-` opens a token only against one of these on its left. */\nconst SIGN_OPENER = /[\\s([]/;\n\n/**\n * Reads the integer that a human-formatted string displays.\n *\n * Takes the first numeric token, drops group separators, and truncates any\n * fractional part toward zero — so `\"1,200 users\"`, `\"$1,299.99\"` and\n * `\"1.299,99\"` read 1200, 1299 and 1299 without asking the platform which\n * locale is in play. A separator counts as grouping only where the digits that\n * follow it form a run of exactly three and the leading run could head a\n * grouped number; anything else is the decimal point, and the digits after it\n * are the fraction.\n *\n * `-` counts as a sign only where it opens the token — at the start of the\n * string, or after whitespace or an opening bracket — so a hyphen inside a\n * label (`\"Sign-ups: 1,200\"`, `\"Top-10 users\"`) never becomes one.\n *\n * `\"1.200\"` is genuinely ambiguous (1200 grouped, 1.2 with a decimal point) and\n * reads as 1200: display numbers group far more often than they carry a\n * fraction in exactly three digits.\n *\n * Returns `null` when the string holds no digits at all. What that means is the\n * caller's to decide — starting nothing, or falling back to a base value.\n */\nexport function authoredInteger(text: string): number | null {\n  const firstDigit = /\\d/.exec(text);\n  if (firstDigit === null) return null;\n\n  const at = firstDigit.index;\n  const signed =\n    at > 0 && text[at - 1] === \"-\" && (at === 1 || SIGN_OPENER.test(text[at - 2] as string));\n\n  const body = TOKEN_BODY.exec(text.slice(at)) as RegExpExecArray;\n  const runs = body[0].split(/\\D+/);\n  const separators = body[0].match(/\\D+/g) ?? [];\n\n  // The leading run heads a grouped number only when it is short enough to be a\n  // group itself and carries no leading zero; \"0.500\" and \"012,3\" are decimals.\n  const lead = runs[0] as string;\n  const heads = lead.length <= 3 && !lead.startsWith(\"0\");\n  let digits = lead;\n  for (let i = 1; heads && i < runs.length; i += 1) {\n    if (separators[i - 1]?.length !== 1 || runs[i]?.length !== 3) break;\n    digits += runs[i];\n  }\n\n  const magnitude = Number.parseInt(digits, 10);\n  return signed ? -magnitude || 0 : magnitude;\n}\n","/**\n * Shared `prefers-reduced-motion` lookup for the motion-aware controllers\n *.\n *\n * This one-liner keeps the media query string and the environment guard\n * single-sourced across them. The preference is intentionally re-read on every\n * call — the controllers check it at each animation/scroll start (WCAG 2.2\n * **2.3.3**), so flipping the OS setting takes effect immediately without any\n * listener or cache bookkeeping here.\n */\n\n/**\n * Whether the user currently requests reduced motion.\n *\n * @returns `true` when `(prefers-reduced-motion: reduce)` matches; `false`\n * otherwise, including environments without `window.matchMedia` (treated as\n * \"no preference\").\n */\nexport function prefersReducedMotion(): boolean {\n  return (\n    typeof window.matchMedia === \"function\" &&\n    window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n  );\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { authoredInteger } from \"../utils/authored_integer\";\nimport { prefersReducedMotion } from \"../utils/reduced_motion\";\n\n/** The animation length used when `duration` falls outside its domain. */\nconst DEFAULT_DURATION = 1200;\n\n/**\n * Headless **count-up**: animates a number from `from` up to the value already\n * in the DOM — typically started the moment the element scrolls into view by\n * composing with the `stimeo--intersection` primitive (the classic \"animate\n * when visible\"). Distinct from `stimeo--countdown` (time-based). Core\n * (zero dependencies).\n *\n * Markup contract (identifier: `stimeo--count-up`):\n *   <span data-controller=\"stimeo--intersection stimeo--count-up\"\n *         data-stimeo--intersection-once-value=\"true\"\n *         data-action=\"stimeo--intersection:enter->stimeo--count-up#start\">1200</span>\n *\n * The **final number stays authored in the markup** (SEO / no-JS / SR read the\n * real value); `start` animates the displayed text from `from` to it over\n * `duration` ms with an ease-out curve, then restores the exact authored text.\n * With `once` (default) later starts are ignored (`data-count-up-done` records\n * a finished run across Turbo cache restores).\n *\n * Only the text node holding the number is animated, so sibling markup — a unit\n * in a `<small>`, a label in a `<b>` — is left where the author put it.\n *\n * `end` dispatches `{ value }`.\n *\n * @remarks\n * Behavior only — no formatting is imposed: the authored text is read for the\n * integer it displays and restored verbatim at the end; intermediate frames\n * render plain integers. Accessibility: when the user prefers reduced motion the\n * animation is skipped entirely (the value just stays final — WCAG 2.3.3).\n * During a run the ticking number is wrapped in a `role=\"img\"` element named\n * with the authored text, which is where a name is allowed to live — the host\n * keeps whatever semantics it had, so a `<dd>` stays a definition. That wrapper\n * doubles as the interrupted-run record `connect()` restores from after a Turbo\n * cache snapshot taken mid-animation. The animation frame is canceled on\n * `disconnect()` (Turbo navigation included) and the authored text restored.\n */\nexport class CountUpController extends Controller<HTMLElement> {\n  static override values = {\n    duration: { type: Number, default: DEFAULT_DURATION },\n    from: { type: Number, default: 0 },\n    once: { type: Boolean, default: true },\n  };\n  static actions = [\"start\"] as const;\n  static events = [\"end\"] as const;\n\n  declare durationValue: number;\n  declare fromValue: number;\n  declare onceValue: boolean;\n\n  #frame: number | null = null;\n\n  /** The animation length, with a declaration outside its domain read as the default. */\n  get #duration(): number {\n    return Number.isFinite(this.durationValue) && this.durationValue > 0\n      ? this.durationValue\n      : DEFAULT_DURATION;\n  }\n\n  /** The starting value, with a declaration that is not a finite number read as zero. */\n  get #from(): number {\n    return Number.isFinite(this.fromValue) ? this.fromValue : 0;\n  }\n\n  override connect(): void {\n    // Turbo snapshots the page BEFORE the body swap, so a cached page can hold\n    // a mid-animation frame (disconnect()'s settle runs too late for it). The\n    // wrapper this controller owns flags the interrupted run and carries the\n    // authored text in the name it published.\n    const ticker = this.#ownedTicker();\n    if (ticker === null) return;\n    const authored = ticker.getAttribute(\"aria-label\");\n    this.#unwrap(ticker, authored);\n    if (authored !== null) this.element.setAttribute(\"data-count-up-done\", \"true\");\n  }\n\n  override disconnect(): void {\n    // A run cannot survive the element: settle instantly so the cached\n    // snapshot holds the real value, never a mid-animation frame.\n    if (this.#frame !== null) this.#settle();\n  }\n\n  /**\n   * Starts the animation (typically from `stimeo--intersection:enter` via\n   * `data-action`). No-ops while running, and after a finished run when `once`.\n   */\n  start(): void {\n    if (this.#frame !== null) return;\n    if (this.onceValue && this.element.hasAttribute(\"data-count-up-done\")) return;\n\n    const node = this.#numericNode();\n    if (node === null) return;\n    const authored = node.data;\n    const target = authoredInteger(authored) as number;\n\n    // Reduced motion: no ticking, just the final value (WCAG 2.3.3).\n    if (prefersReducedMotion()) {\n      this.element.setAttribute(\"data-count-up-done\", \"true\");\n      this.dispatch(\"end\", { detail: { value: target } });\n      return;\n    }\n\n    // A name may not live on every host — a `<span>` prohibits one, and a role\n    // that permits naming would cost a `<dd>` its own semantics — so the ticking\n    // number gets a wrapper that permits naming, and the name carries the\n    // authored text AT should hear instead of the ticks.\n    const ticker = this.#wrap(node, authored);\n    const from = this.#from;\n    const started = performance.now();\n    const step = (now: number): void => {\n      const t = Math.min((now - started) / this.#duration, 1);\n      const eased = 1 - (1 - t) ** 3; // ease-out cubic\n      ticker.textContent = String(Math.round(from + (target - from) * eased));\n      if (t < 1) {\n        this.#frame = requestAnimationFrame(step);\n      } else {\n        this.#settle();\n        this.dispatch(\"end\", { detail: { value: target } });\n      }\n    };\n    this.#frame = requestAnimationFrame(step);\n  }\n\n  /** The first text node that displays a number, or null when the host has none. */\n  #numericNode(): Text | null {\n    const walker = document.createTreeWalker(this.element, NodeFilter.SHOW_TEXT);\n    let node = walker.nextNode() as Text | null;\n    while (node !== null && authoredInteger(node.data) === null) {\n      node = walker.nextNode() as Text | null;\n    }\n    return node;\n  }\n\n  /** The wrapper this controller published, if one outlived its run. */\n  #ownedTicker(): HTMLElement | null {\n    return this.element.querySelector<HTMLElement>(\"[data-count-up-label]\");\n  }\n\n  /** Publishes the ticking number inside a named wrapper, replacing `node`. */\n  #wrap(node: Text, authored: string): HTMLElement {\n    const ticker = document.createElement(\"span\");\n    ticker.setAttribute(\"data-count-up-label\", \"true\");\n    ticker.setAttribute(\"role\", \"img\");\n    ticker.setAttribute(\"aria-label\", authored);\n    node.replaceWith(ticker);\n    ticker.append(node);\n    return ticker;\n  }\n\n  /** Puts `text` back where the wrapper stood, leaving the rest of the host alone. */\n  #unwrap(ticker: HTMLElement, text: string | null): void {\n    ticker.replaceWith(document.createTextNode(text ?? ticker.textContent ?? \"\"));\n  }\n\n  /** Ends the run: cancels the frame and restores the authored presentation. */\n  #settle(): void {\n    if (this.#frame !== null) cancelAnimationFrame(this.#frame);\n    this.#frame = null;\n    const ticker = this.#ownedTicker();\n    if (ticker !== null) this.#unwrap(ticker, ticker.getAttribute(\"aria-label\"));\n    this.element.setAttribute(\"data-count-up-done\", \"true\");\n  }\n}\n"]}
+{"version":3,"sources":["../../src/utils/authored_integer.ts","../../src/utils/reduced_motion.ts","../../src/controllers/count_up_controller.ts"],"names":[],"mappings":"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","file":"count_up_controller.js","sourcesContent":["/** Digits plus the characters that may separate them inside one number. */\nconst TOKEN_BODY = /\\d[\\d.,'’’    _]*\\d|\\d/;\n/** A `-` opens a token only against one of these on its left. */\nconst SIGN_OPENER = /[\\s([]/;\n\n/**\n * Reads the integer that a human-formatted string displays.\n *\n * Takes the first numeric token, drops group separators, and truncates any\n * fractional part toward zero — so `\"1,200 users\"`, `\"$1,299.99\"` and\n * `\"1.299,99\"` read 1200, 1299 and 1299 without asking the platform which\n * locale is in play. A separator counts as grouping only where the digits that\n * follow it form a run of exactly three and the leading run could head a\n * grouped number; anything else is the decimal point, and the digits after it\n * are the fraction.\n *\n * `-` counts as a sign only where it opens the token — at the start of the\n * string, or after whitespace or an opening bracket — so a hyphen inside a\n * label (`\"Sign-ups: 1,200\"`, `\"Top-10 users\"`) never becomes one.\n *\n * `\"1.200\"` is genuinely ambiguous (1200 grouped, 1.2 with a decimal point) and\n * reads as 1200: display numbers group far more often than they carry a\n * fraction in exactly three digits.\n *\n * Returns `null` when the string holds no digits at all. What that means is the\n * caller's to decide — starting nothing, or falling back to a base value.\n */\nexport function authoredInteger(text: string): number | null {\n  const firstDigit = /\\d/.exec(text);\n  if (firstDigit === null) return null;\n\n  const at = firstDigit.index;\n  const signed =\n    at > 0 && text[at - 1] === \"-\" && (at === 1 || SIGN_OPENER.test(text[at - 2] as string));\n\n  const body = TOKEN_BODY.exec(text.slice(at)) as RegExpExecArray;\n  const runs = body[0].split(/\\D+/);\n  const separators = body[0].match(/\\D+/g) ?? [];\n\n  // The leading run heads a grouped number only when it is short enough to be a\n  // group itself and carries no leading zero; \"0.500\" and \"012,3\" are decimals.\n  const lead = runs[0] as string;\n  const heads = lead.length <= 3 && !lead.startsWith(\"0\");\n  let digits = lead;\n  for (let i = 1; heads && i < runs.length; i += 1) {\n    if (separators[i - 1]?.length !== 1 || runs[i]?.length !== 3) break;\n    digits += runs[i];\n  }\n\n  const magnitude = Number.parseInt(digits, 10);\n  return signed ? -magnitude || 0 : magnitude;\n}\n","/**\n * Shared `prefers-reduced-motion` lookup for the motion-aware controllers.\n *\n * This one-liner keeps the media query string and the environment guard\n * single-sourced across them. The preference is intentionally re-read on every\n * call — the controllers check it at each animation/scroll start (WCAG 2.2\n * **2.3.3**), so flipping the OS setting takes effect immediately without any\n * listener or cache bookkeeping here.\n */\n\n/**\n * Whether the user currently requests reduced motion.\n *\n * @returns `true` when `(prefers-reduced-motion: reduce)` matches; `false`\n * otherwise, including environments without `window.matchMedia` (treated as\n * \"no preference\").\n */\nexport function prefersReducedMotion(): boolean {\n  return (\n    typeof window.matchMedia === \"function\" &&\n    window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n  );\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { authoredInteger } from \"../utils/authored_integer\";\nimport { prefersReducedMotion } from \"../utils/reduced_motion\";\n\n/** The animation length used when `duration` falls outside its domain. */\nconst DEFAULT_DURATION = 1200;\n\n/**\n * Headless **count-up**: animates a number from `from` up to the value already\n * in the DOM — typically started the moment the element scrolls into view by\n * composing with the `stimeo--intersection` primitive (the classic \"animate\n * when visible\"). Distinct from `stimeo--countdown` (time-based). Core\n * (zero dependencies).\n *\n * Markup contract (identifier: `stimeo--count-up`):\n *   <span data-controller=\"stimeo--intersection stimeo--count-up\"\n *         data-stimeo--intersection-once-value=\"true\"\n *         data-action=\"stimeo--intersection:enter->stimeo--count-up#start\">1200</span>\n *\n * The **final number stays authored in the markup** (SEO / no-JS / SR read the\n * real value); `start` animates the displayed text from `from` to it over\n * `duration` ms with an ease-out curve, then restores the exact authored text.\n * With `once` (default) later starts are ignored (`data-count-up-done` records\n * a finished run across Turbo cache restores).\n *\n * Only the text node holding the number is animated, so sibling markup — a unit\n * in a `<small>`, a label in a `<b>` — is left where the author put it.\n *\n * `end` dispatches `{ value }`.\n *\n * @remarks\n * Behavior only — no formatting is imposed: the authored text is read for the\n * integer it displays and restored verbatim at the end; intermediate frames\n * render plain integers. Accessibility: when the user prefers reduced motion the\n * animation is skipped entirely (the value just stays final — WCAG 2.3.3).\n * During a run the ticking number is wrapped in a `role=\"img\"` element named\n * with the authored text, which is where a name is allowed to live — the host\n * keeps whatever semantics it had, so a `<dd>` stays a definition. That wrapper\n * doubles as the interrupted-run record `connect()` restores from after a Turbo\n * cache snapshot taken mid-animation. The animation frame is canceled on\n * `disconnect()` (Turbo navigation included) and the authored text restored.\n */\nexport class CountUpController extends Controller<HTMLElement> {\n  static override values = {\n    duration: { type: Number, default: DEFAULT_DURATION },\n    from: { type: Number, default: 0 },\n    once: { type: Boolean, default: true },\n  };\n  static actions = [\"start\"] as const;\n  static events = [\"end\"] as const;\n\n  declare durationValue: number;\n  declare fromValue: number;\n  declare onceValue: boolean;\n\n  #frame: number | null = null;\n\n  /** The animation length, with a declaration outside its domain read as the default. */\n  get #duration(): number {\n    return Number.isFinite(this.durationValue) && this.durationValue > 0\n      ? this.durationValue\n      : DEFAULT_DURATION;\n  }\n\n  /** The starting value, with a declaration that is not a finite number read as zero. */\n  get #from(): number {\n    return Number.isFinite(this.fromValue) ? this.fromValue : 0;\n  }\n\n  override connect(): void {\n    // Turbo snapshots the page BEFORE the body swap, so a cached page can hold\n    // a mid-animation frame (disconnect()'s settle runs too late for it). The\n    // wrapper this controller owns flags the interrupted run and carries the\n    // authored text in the name it published.\n    const ticker = this.#ownedTicker();\n    if (ticker === null) return;\n    const authored = ticker.getAttribute(\"aria-label\");\n    this.#unwrap(ticker, authored);\n    if (authored !== null) this.element.setAttribute(\"data-count-up-done\", \"true\");\n  }\n\n  override disconnect(): void {\n    // A run cannot survive the element: settle instantly so the cached\n    // snapshot holds the real value, never a mid-animation frame.\n    if (this.#frame !== null) this.#settle();\n  }\n\n  /**\n   * Starts the animation (typically from `stimeo--intersection:enter` via\n   * `data-action`). No-ops while running, and after a finished run when `once`.\n   */\n  start(): void {\n    if (this.#frame !== null) return;\n    if (this.onceValue && this.element.hasAttribute(\"data-count-up-done\")) return;\n\n    const node = this.#numericNode();\n    if (node === null) return;\n    const authored = node.data;\n    const target = authoredInteger(authored) as number;\n\n    // Reduced motion: no ticking, just the final value (WCAG 2.3.3).\n    if (prefersReducedMotion()) {\n      this.element.setAttribute(\"data-count-up-done\", \"true\");\n      this.dispatch(\"end\", { detail: { value: target } });\n      return;\n    }\n\n    // A name may not live on every host — a `<span>` prohibits one, and a role\n    // that permits naming would cost a `<dd>` its own semantics — so the ticking\n    // number gets a wrapper that permits naming, and the name carries the\n    // authored text AT should hear instead of the ticks.\n    const ticker = this.#wrap(node, authored);\n    const from = this.#from;\n    const started = performance.now();\n    const step = (now: number): void => {\n      const t = Math.min((now - started) / this.#duration, 1);\n      const eased = 1 - (1 - t) ** 3; // ease-out cubic\n      ticker.textContent = String(Math.round(from + (target - from) * eased));\n      if (t < 1) {\n        this.#frame = requestAnimationFrame(step);\n      } else {\n        this.#settle();\n        this.dispatch(\"end\", { detail: { value: target } });\n      }\n    };\n    this.#frame = requestAnimationFrame(step);\n  }\n\n  /** The first text node that displays a number, or null when the host has none. */\n  #numericNode(): Text | null {\n    const walker = document.createTreeWalker(this.element, NodeFilter.SHOW_TEXT);\n    let node = walker.nextNode() as Text | null;\n    while (node !== null && authoredInteger(node.data) === null) {\n      node = walker.nextNode() as Text | null;\n    }\n    return node;\n  }\n\n  /** The wrapper this controller published, if one outlived its run. */\n  #ownedTicker(): HTMLElement | null {\n    return this.element.querySelector<HTMLElement>(\"[data-count-up-label]\");\n  }\n\n  /** Publishes the ticking number inside a named wrapper, replacing `node`. */\n  #wrap(node: Text, authored: string): HTMLElement {\n    const ticker = document.createElement(\"span\");\n    ticker.setAttribute(\"data-count-up-label\", \"true\");\n    ticker.setAttribute(\"role\", \"img\");\n    ticker.setAttribute(\"aria-label\", authored);\n    node.replaceWith(ticker);\n    ticker.append(node);\n    return ticker;\n  }\n\n  /** Puts `text` back where the wrapper stood, leaving the rest of the host alone. */\n  #unwrap(ticker: HTMLElement, text: string | null): void {\n    ticker.replaceWith(document.createTextNode(text ?? ticker.textContent ?? \"\"));\n  }\n\n  /** Ends the run: cancels the frame and restores the authored presentation. */\n  #settle(): void {\n    if (this.#frame !== null) cancelAnimationFrame(this.#frame);\n    this.#frame = null;\n    const ticker = this.#ownedTicker();\n    if (ticker !== null) this.#unwrap(ticker, ticker.getAttribute(\"aria-label\"));\n    this.element.setAttribute(\"data-count-up-done\", \"true\");\n  }\n}\n"]}

package/dist/controllers/countdown_controller.d.ts

@@ -24,6 +24,22 @@ import { Controller } from '@hotwired/stimulus';
  * slot free of live-region semantics: with `announceText` set it would say the
  * same thing twice.
  *
+ * The slot is shared with the consumer. Completion writes the label in force and
+ * marks it with `data-<identifier>-owns-status`, whose value is that text; while
+ * the slot still shows that text and nothing else, the controller keeps it on the
+ * current `completeLabel` and takes it back once the timer leaves the complete
+ * state — `reset`, `start()` counting on from it, or a completion the new reading
+ * does not settle (a deadline moved forward or a count turned `up`, in place or
+ * before a restore). All but `start()` leave it `paused`, so `resume()` counts
+ * again.
+ * An empty label puts no text there, so it never displaces what the slot already
+ * holds; completing with one claims an empty slot — no text and no element — with
+ * an empty marker, which owns the slot whenever it is empty. Text the consumer put
+ * there stays theirs while it is there, and so does a slot they put an element in,
+ * whatever its text: the label is neither followed into it nor taken back out of
+ * it, and its marker stays, until the element is gone. Only a completion with a
+ * label writes over either.
+ *
  * `complete` dispatches `{}`; `tick` dispatches
  * `{ remaining: number, direction: "down" | "up" }`, where `remaining` is in
  * milliseconds.
@@ -92,7 +108,20 @@ declare class CountdownController extends Controller<HTMLElement> {
     deadlineValueChanged(): void;
     /** Re-derives the display when a morph flips the counting direction in place. */
     directionValueChanged(): void;
-    /** Starts (or restarts after pause) ticking toward the deadline. */
+    /**
+     * Follows a completion label swapped in place by a morph.
+     *
+     * Render only: `complete` is neither dispatched nor announced again. The status
+     * changes only after the countdown has completed, and only while it still shows
+     * the text this controller wrote there and nothing else, so text or an element
+     * the consumer put in the slot stays. A change delivered ahead of `connect()` is
+     * left to `connect()`.
+     */
+    completeLabelValueChanged(): void;
+    /**
+     * Starts (or restarts after pause) ticking toward the deadline. Counting on from a
+     * completion takes this controller's completion text back out of the status.
+     */
     start(): void;
     /** Pauses ticking, preserving the currently displayed amount. */
     pause(): void;

package/dist/controllers/countdown_controller.js

@@ -99,7 +99,12 @@ var SafeInterval = class extends TimerRegistry {
 
 // src/controllers/countdown_controller.ts
 var SECOND_MS = 1e3;
+var OWNED_STATUS = "owns-status";
 var CountdownController = class extends Controller {
+  /** The status marker, in the namespace this controller is registered under. */
+  get #ownedStatus() {
+    return `data-${this.identifier}-${OWNED_STATUS}`;
+  }
   static targets = ["days", "hours", "minutes", "seconds", "status"];
   static values = {
     deadline: { type: String, default: "" },
@@ -115,6 +120,12 @@ var CountdownController = class extends Controller {
   #intervalId = null;
   /** Collapses a morph that swaps several render inputs at once into one re-derive. */
   #resync = new MicrotaskCoalescer(() => this.#resyncToValues());
+  /**
+   * Whether `connect()` has run for this connection. Stimulus delivers Value
+   * callbacks ahead of it, while the run state is still the markup's own and not
+   * yet settled; `connect()` brings the status up to date once it is.
+   */
+  #connected = false;
   /** Epoch-ms anchor: the deadline (down) or the count-up origin (up). */
   #reference = 0;
   /** Amount (ms) captured at pause, so resume can restore the same display. */
@@ -127,28 +138,25 @@ var CountdownController = class extends Controller {
    */
   #renderedAmount = 0;
   connect() {
+    this.#connected = true;
     this.#resync.activate();
     this.#initReference();
     const amount = this.#currentAmount();
     this.#render(amount);
     this.#pausedAmount = this.#renderedAmount;
     const authored = this.element.getAttribute("data-state");
+    const settled = authored === "complete" && this.#isSettled(amount);
     if (authored === null) {
-      if (this.autostartValue && this.#isValidDeadline) {
-        this.start();
-        return;
-      }
+      if (this.autostartValue && this.#isValidDeadline) this.start();
+      else this.element.setAttribute("data-state", "paused");
+    } else if (!settled) {
       this.element.setAttribute("data-state", "paused");
-      return;
+      if (authored === "running") this.start();
     }
-    if (authored === "complete" && this.#isDown && amount <= 0) {
-      return;
-    }
-    const wasRunning = authored === "running";
-    this.element.setAttribute("data-state", "paused");
-    if (wasRunning) this.start();
+    this.#syncStatus();
   }
   disconnect() {
+    this.#connected = false;
     this.#resync.cancel();
     this.#intervals.clearAll();
     this.#intervalId = null;
@@ -161,6 +169,31 @@ var CountdownController = class extends Controller {
   directionValueChanged() {
     this.#resync.schedule();
   }
+  /**
+   * Follows a completion label swapped in place by a morph.
+   *
+   * Render only: `complete` is neither dispatched nor announced again. The status
+   * changes only after the countdown has completed, and only while it still shows
+   * the text this controller wrote there and nothing else, so text or an element
+   * the consumer put in the slot stays. A change delivered ahead of `connect()` is
+   * left to `connect()`.
+   */
+  completeLabelValueChanged() {
+    if (this.#connected) this.#syncStatus();
+  }
+  /**
+   * Keeps a status that still shows this controller's text, and nothing else, on
+   * what the run state calls for: the label in force while complete; otherwise the
+   * text is taken back, marker and all. A status holding anything else is the
+   * consumer's and is left alone, marker included.
+   *
+   * @stimeoRenderRoot
+   */
+  #syncStatus() {
+    if (!this.hasStatusTarget || !this.#ownsStatus(this.statusTarget)) return;
+    if (this.#state === "complete") this.#writeStatus(this.statusTarget, this.completeLabelValue);
+    else this.#releaseStatus(this.statusTarget);
+  }
   /**
    * Points the anchor at the current `deadline` / `direction` and repaints.
    *
@@ -168,13 +201,27 @@ var CountdownController = class extends Controller {
    * paused timer run or replay a milestone. A running one needs no restart either —
    * every tick reads the anchor, so moving it is enough. While paused the stored
    * amount follows the new reading, or resume would continue from the old deadline.
+   * A completion the new reading no longer settles (a deadline moved forward, or a
+   * count turned `up`) is handed back paused, as `connect()` hands back a restored
+   * one, so `resume()` counts again; the completion text this controller wrote goes
+   * with it, from a status slot that still shows it and nothing else.
+   *
+   * @stimeoRenderRoot
    */
   #resyncToValues() {
     this.#initReference();
-    this.#render(this.#currentAmount());
+    const amount = this.#currentAmount();
+    this.#render(amount);
+    if (this.#state === "complete" && !this.#isSettled(amount)) {
+      this.element.setAttribute("data-state", "paused");
+      this.#syncStatus();
+    }
     if (this.#state !== "running") this.#pausedAmount = this.#renderedAmount;
   }
-  /** Starts (or restarts after pause) ticking toward the deadline. */
+  /**
+   * Starts (or restarts after pause) ticking toward the deadline. Counting on from a
+   * completion takes this controller's completion text back out of the status.
+   */
   start() {
     if (this.#state === "running" || !this.#isValidDeadline) return;
     if (this.#isDown && this.#currentAmount() <= 0) {
@@ -212,10 +259,8 @@ var CountdownController = class extends Controller {
     this.#initReference();
     const amount = this.#currentAmount();
     this.#render(amount);
-    if (this.hasStatusTarget && this.statusTarget.textContent === this.completeLabelValue) {
-      this.statusTarget.textContent = "";
-    }
     this.element.setAttribute("data-state", "paused");
+    this.#syncStatus();
     if (wasRunning && this.#isValidDeadline) {
       this.#pausedAmount = 0;
       this.start();
@@ -223,9 +268,19 @@ var CountdownController = class extends Controller {
       this.#pausedAmount = this.#renderedAmount;
     }
   }
-  /** Schedules the repeating tick and marks the timer running. */
+  /**
+   * Schedules the repeating tick and marks the timer running. This is the one way
+   * into `running`, and a running timer keeps none of this controller's completion
+   * text in the status, so the status is settled here as on every other way out of
+   * `complete`: `start()` leaves a completion directly when `direction` flips to
+   * `up` and `start()` runs in the same task, ahead of the direction callback.
+   *
+   * @stimeoRuntimeOnly `interval` is the period of the one timer this call arms; the running state
+   *   it writes does not depend on a Value.
+   */
   #runInterval() {
     this.element.setAttribute("data-state", "running");
+    this.#syncStatus();
     this.#intervalId = this.#intervals.set(() => this.#tick(), this.intervalValue);
   }
   /** Cancels the repeating tick, if any. */
@@ -246,21 +301,73 @@ var CountdownController = class extends Controller {
       this.#complete();
     }
   }
-  /** Stops at zero, marks completion, announces it, and emits `complete`. */
+  /**
+   * Stops at zero, marks completion, writes the completion label, emits `complete`,
+   * and announces it.
+   *
+   * @stimeoRenderRoot
+   */
   #complete() {
     this.#teardownInterval();
     this.#render(0);
     this.element.setAttribute("data-state", "complete");
-    if (this.hasStatusTarget && this.completeLabelValue.length > 0) {
-      this.statusTarget.textContent = this.completeLabelValue;
-    }
+    this.#claimStatus();
     this.dispatch("complete", { detail: {} });
+    this.#announceCompletion();
+  }
+  /**
+   * Writes the label in force into the status slot as this controller's text. An
+   * empty label puts no text there: it claims a slot that is already empty — no
+   * text and no element — empties one that is still this controller's, and leaves
+   * any other slot, the consumer's, alone.
+   */
+  #claimStatus() {
+    if (!this.hasStatusTarget) return;
+    const status = this.statusTarget;
+    const label = this.completeLabelValue;
+    if (label === "" && !this.#isEmpty(status) && !this.#ownsStatus(status)) return;
+    this.#writeStatus(status, label);
+  }
+  /**
+   * Whether the status slot shows the text this controller wrote there and nothing
+   * else: the text matches the marker, and the slot holds no element. Writing the
+   * slot's text replaces every child node, so an element the consumer puts in the
+   * slot makes it theirs even while the text still matches. An empty marker
+   * matches the slot whenever it is empty.
+   */
+  #ownsStatus(status) {
+    return status.getAttribute(this.#ownedStatus) === status.textContent && status.firstElementChild === null;
+  }
+  /** Whether the status slot holds nothing at all: no text and no element. */
+  #isEmpty(status) {
+    return status.textContent === "" && status.firstElementChild === null;
+  }
+  /** Puts `text` into the status slot and records it as this controller's. */
+  #writeStatus(status, text) {
+    if (status.textContent !== text) status.textContent = text;
+    status.setAttribute(this.#ownedStatus, text);
+  }
+  /** Takes this controller's text out of the status slot, marker and all. */
+  #releaseStatus(status) {
+    status.textContent = "";
+    status.removeAttribute(this.#ownedStatus);
+  }
+  /**
+   * Reads the completion out through the shared announcer.
+   *
+   * @stimeoRuntimeOnly `announceText` words the one announcement a completion makes.
+   */
+  #announceCompletion() {
     announce(fillTemplate(this.announceTextValue, {}));
   }
   /** Sets the time anchor from the `deadline` value. */
   #initReference() {
     this.#reference = Date.parse(this.deadlineValue);
   }
+  /** Whether a reading of `amount` leaves nothing to count: only a countdown at zero. */
+  #isSettled(amount) {
+    return this.#isDown && amount <= 0;
+  }
   /** Remaining (down) or elapsed (up) ms, never negative. */
   #currentAmount() {
     if (!this.#isValidDeadline) return 0;
@@ -268,11 +375,7 @@ var CountdownController = class extends Controller {
     const raw = this.#isDown ? this.#reference - now : now - this.#reference;
     return Math.max(0, raw);
   }
-  /**
-   * Writes the amount into the day/hour/minute/second slots.
-   *
-   * @stimeoRenderRoot
-   */
+  /** Writes the amount into the day/hour/minute/second slots. */
   #render(amount) {
     const totalSeconds = Math.floor(amount / SECOND_MS);
     this.#renderedAmount = totalSeconds * SECOND_MS;

package/dist/controllers/countdown_controller.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/announce.ts","../../src/utils/microtask_coalescer.ts","../../src/utils/safe_timeout.ts","../../src/controllers/countdown_controller.ts"],"names":[],"mappings":"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","file":"countdown_controller.js","sourcesContent":["/**\n * Sends one message to the page's shared `stimeo--announcer`.\n *\n * A component that has to reach assistive tech does not carry a live region of its\n * own: a region only announces what changes *after* assistive tech already knows\n * about it, which a region that appears (or is un-hidden) with its message cannot\n * satisfy. The one region that can is the announcer sitting in the page from the\n * start, so state changes are handed to it as an event and it does the reading.\n *\n * The event goes to `window` because the announcer is usually a sibling high in the\n * document rather than an ancestor of the component dispatching it.\n *\n * Wording comes from the consumer — the library ships no English strings — so an\n * empty message is silently dropped and nothing is announced.\n *\n * @example\n * ```ts\n * announce(this.announceTextValue, { assertive: false });\n * ```\n */\nexport function announce(message: string, options: { assertive?: boolean } = {}): void {\n  const text = message.trim();\n  if (text.length === 0) return;\n  window.dispatchEvent(\n    new CustomEvent(\"stimeo--announcer:announce\", {\n      detail: { message: text, assertive: options.assertive === true },\n    }),\n  );\n}\n\n/**\n * Fills `{name}` placeholders in an announcement template from `values`.\n *\n * The same substitution the value-text templates use, so a consumer writes\n * `\"{percent}% complete\"` in one attribute and gets the same rules everywhere. A\n * placeholder with no matching entry is left as authored rather than blanked, which\n * keeps a typo visible instead of silently swallowing the word.\n */\nexport function fillTemplate(template: string, values: Record<string, string | number>): string {\n  return template.replace(/\\{([a-zA-Z][a-zA-Z0-9]*)\\}/g, (match, name: string) => {\n    const replacement = values[name];\n    return replacement === undefined ? match : String(replacement);\n  });\n}\n","/**\n * Collapses many Stimulus lifecycle callbacks from one DOM mutation into a\n * single pass.\n *\n * Stimulus fires `<name>TargetConnected` / `Disconnected` once per element and\n * `<name>ValueChanged` once per changed attribute. Replacing a list of N options\n * or morphing several render Values therefore delivers N callbacks — but the\n * useful unit of work is \"reconcile against the resulting declarative input\",\n * once, after the batch has settled. Every controller with reconcilable targets\n * or render Values needs the same shape: a `queued` flag plus `queueMicrotask`.\n *\n * **A microtask is the right horizon, and the reason is specific.** Stimulus\n * drives these callbacks from a `MutationObserver`, whose own callback already\n * runs as a microtask with the whole batch in hand; scheduling one more lands\n * after the last sibling callback of that batch and still before paint or any\n * event handler. A timer would be later than it needs to be, and reconciling\n * synchronously would run once per element against a half-applied DOM.\n *\n * **The two guards are not the same guard.** Scheduling is refused before the\n * controller connects, and running is refused after it disconnects:\n *\n * - **Before `connect()`** — Stimulus delivers initial target and Value callbacks\n *   ahead of `connect()`. Reconciling there would compute output against a\n *   controller whose own state has not been initialised, and `connect()` is\n *   about to do a full pass anyway.\n * - **After `disconnect()`** — Stimulus fires a callback for **every** target\n *   during teardown, and a microtask queued just before it would otherwise run\n *   against a detached tree. {@link MicrotaskCoalescer.cancel} exists for the\n *   teardown path to drop the pending pass outright.\n *\n * Both guards are part of one contract here rather than something each consumer\n * has to remember separately.\n *\n * Scope is the scheduling only. *What* to reconcile — keep the surviving active\n * option, fall back to the next / previous / first visible one, rebuild derived\n * chips or hidden fields — stays in the controller, because no two consumers\n * answer it the same way.\n *\n * This file's own doc block is dropped from `dist`, but every member comment is\n * inlined into each consumer entry (`tsup` builds with `splitting: false`), so\n * rationale belongs here and only the contract belongs on the members.\n *\n * @example\n * ```ts\n * readonly #reconcile = new MicrotaskCoalescer(() => this.#reconcileOptions());\n *\n * connect()    { this.#reconcile.activate(); }\n * disconnect() { this.#reconcile.cancel(); }\n *\n * optionTargetConnected()    { this.#reconcile.schedule(); }\n * optionTargetDisconnected() { this.#reconcile.schedule(); }\n * ```\n */\nexport class MicrotaskCoalescer {\n  readonly #run: () => void;\n  #queued = false;\n  #active = false;\n  #generation = 0;\n\n  /** @param run - the single reconciliation pass, invoked at most once per batch. */\n  constructor(run: () => void) {\n    this.#run = run;\n  }\n\n  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */\n  activate(): void {\n    this.#active = true;\n  }\n\n  /** Closes the window and drops any pending pass; call from `disconnect()`. */\n  cancel(): void {\n    this.#active = false;\n    this.#queued = false;\n    this.#generation += 1;\n  }\n\n  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */\n  schedule(): void {\n    if (!this.#active || this.#queued) return;\n    this.#queued = true;\n    const generation = this.#generation;\n    queueMicrotask(() => {\n      // A cancelled callback must not consume a pass queued after reconnect.\n      if (generation !== this.#generation || !this.#queued || !this.#active) return;\n      this.#queued = false;\n      this.#run();\n    });\n  }\n}\n","/**\n * Self-cleaning timer registries shared by Stimeo controllers.\n *\n * Stimulus controllers frequently schedule `setTimeout` / `setInterval` work\n * (auto-dismiss, debouncing, polling). When the element leaves the DOM — a\n * Turbo Drive navigation, a Turbo Stream replacement, or any `disconnect()` —\n * orphaned timers keep firing against a detached controller, leaking memory and\n * mutating stale state. {@link SafeTimeout} and {@link SafeInterval} track every\n * timer they create so a single {@link TimerRegistry.clearAll | clearAll()} call\n * in `disconnect()` tears them all down.\n *\n * These are intentionally low-level primitives: they own *registration and\n * cleanup only*. Higher-level policy (pause/resume, remaining-time accounting)\n * stays in the individual controllers so per-widget semantics are not flattened\n * into a lowest-common-denominator helper.\n */\n\n/**\n * Largest delay a timer can hold: the platform stores it in a 32-bit signed\n * integer, and anything larger overflows to `1`, so a delay meant to be far in\n * the future fires almost immediately. A declared delay above this bound names\n * no delay at all, and a controller reading one falls back to its default.\n */\nexport const MAX_TIMER_DELAY_MS = 2_147_483_647;\n\n/**\n * Shared registry bookkeeping for the timeout/interval variants.\n *\n * Subclasses provide the scheduling primitive ({@link schedule}) and its matching\n * canceller ({@link cancel}); this base owns the set of live ids plus the\n * per-id and bulk teardown shared by both.\n */\nabstract class TimerRegistry {\n  /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */\n  protected readonly ids = new Set<number>();\n\n  /** Schedules the underlying platform timer and returns its id. */\n  protected abstract schedule(callback: () => void, delay: number): number;\n\n  /** Cancels the underlying platform timer for `id`. */\n  protected abstract cancel(id: number): void;\n\n  /**\n   * Cancels a single tracked timer.\n   *\n   * No-ops if the id is unknown (already cleared, fired, or never owned by this\n   * registry), so callers can clear defensively without guarding.\n   */\n  clear(id: number): void {\n    if (this.ids.delete(id)) {\n      this.cancel(id);\n    }\n  }\n\n  /**\n   * Cancels every tracked timer. Call this from a controller's `disconnect()`\n   * to guarantee no timer outlives the element.\n   */\n  clearAll(): void {\n    for (const id of this.ids) {\n      this.cancel(id);\n    }\n    this.ids.clear();\n  }\n\n  /** Number of timers currently tracked (pending). */\n  get size(): number {\n    return this.ids.size;\n  }\n}\n\n/**\n * `setTimeout` wrapper that auto-forgets each timer once it fires and supports\n * bulk teardown on disconnect.\n *\n * @example\n * ```ts\n * #timers = new SafeTimeout();\n *\n * connect() {\n *   this.#timers.set(() => this.dismiss(), 5000);\n * }\n *\n * disconnect() {\n *   this.#timers.clearAll();\n * }\n * ```\n */\nexport class SafeTimeout extends TimerRegistry {\n  /**\n   * Schedules `callback` after `delay` ms and returns the timer id.\n   *\n   * The id is removed from the registry automatically when the timeout fires,\n   * so {@link TimerRegistry.size | size} reflects only still-pending timers.\n   */\n  set(callback: () => void, delay: number): number {\n    const id = this.schedule(() => {\n      this.ids.delete(id);\n      callback();\n    }, delay);\n    this.ids.add(id);\n    return id;\n  }\n\n  protected schedule(callback: () => void, delay: number): number {\n    return window.setTimeout(callback, delay);\n  }\n\n  protected cancel(id: number): void {\n    window.clearTimeout(id);\n  }\n}\n\n/**\n * `setInterval` wrapper that tracks every interval for bulk teardown on\n * disconnect. Unlike {@link SafeTimeout}, intervals are retained until they are\n * explicitly cleared because they fire repeatedly.\n *\n * @example\n * ```ts\n * #intervals = new SafeInterval();\n *\n * connect() {\n *   this.#intervals.set(() => this.tick(), 1000);\n * }\n *\n * disconnect() {\n *   this.#intervals.clearAll();\n * }\n * ```\n */\nexport class SafeInterval extends TimerRegistry {\n  /** Schedules a repeating `callback` every `delay` ms and returns the timer id. */\n  set(callback: () => void, delay: number): number {\n    const id = this.schedule(callback, delay);\n    this.ids.add(id);\n    return id;\n  }\n\n  protected schedule(callback: () => void, delay: number): number {\n    return window.setInterval(callback, delay);\n  }\n\n  protected cancel(id: number): void {\n    window.clearInterval(id);\n  }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { announce, fillTemplate } from \"../utils/announce\";\nimport { MicrotaskCoalescer } from \"../utils/microtask_coalescer\";\nimport { SafeInterval } from \"../utils/safe_timeout\";\n\n/** Display granularity: the slots render whole seconds, so amounts snap to these. */\nconst SECOND_MS = 1000;\n\n/**\n * Headless countdown/timer behavior built on the live-region `role=\"timer\"`\n * practice (no dedicated APG pattern).\n *\n * Markup contract (identifier: `stimeo--countdown`):\n *   <div data-controller=\"stimeo--countdown\" role=\"timer\" aria-live=\"off\"\n *        data-stimeo--countdown-deadline-value=\"2026-12-31T23:59:59+09:00\"\n *        data-action=\"countdown:pause->stimeo--countdown#pause\n *                     countdown:resume->stimeo--countdown#resume\">\n *     <span data-stimeo--countdown-target=\"days\">0</span>\n *     <span data-stimeo--countdown-target=\"hours\">00</span>\n *     <span data-stimeo--countdown-target=\"minutes\">00</span>\n *     <span data-stimeo--countdown-target=\"seconds\">00</span>\n *   </div>\n *\n * Computes the time remaining to `deadline` (or elapsed since it, in\n * `direction=\"up\"`), formats it into the day/hour/minute/second slots, and ticks\n * on `interval`. `aria-live=\"off\"` is recommended so the timer is not announced\n * every second; only the milestone (completion) is surfaced — read out through\n * `announceText`, shown in the optional `status` slot when a `completeLabel` is\n * provided, and handed to the consumer as the `complete` event. Keep the `status`\n * slot free of live-region semantics: with `announceText` set it would say the\n * same thing twice.\n *\n * `complete` dispatches `{}`; `tick` dispatches\n * `{ remaining: number, direction: \"down\" | \"up\" }`, where `remaining` is in\n * milliseconds.\n *\n * @remarks\n * Behavior only — slot text is updated, not styled. Pause/resume shifts an\n * internal time anchor so the displayed amount is preserved across a pause, down\n * to the second actually on screen: resuming continues from that reading rather\n * than from the fraction behind it, so the first tick after a resume steps by one\n * unit like every other. The run state lives in `data-state` and the markup is its\n * source of truth — `autostart` only decides the state of a timer whose markup does\n * not carry one. The interval is owned by `SafeInterval` and torn down on\n * `disconnect()` (Turbo navigation included); nothing else needs carrying across,\n * because every reading is re-derived from `deadline` and the wall clock.\n */\nexport class CountdownController extends Controller<HTMLElement> {\n  static override targets = [\"days\", \"hours\", \"minutes\", \"seconds\", \"status\"];\n  static override values = {\n    deadline: { type: String, default: \"\" },\n    interval: { type: Number, default: 1000 },\n    direction: { type: String, default: \"down\" },\n    autostart: { type: Boolean, default: true },\n    completeLabel: { type: String, default: \"\" },\n    announceText: { type: String, default: \"\" },\n  };\n  static actions = [\"pause\", \"reset\", \"resume\", \"start\"] as const;\n  static events = [\"complete\", \"tick\"] as const;\n\n  declare readonly daysTarget: HTMLElement;\n  declare readonly hoursTarget: HTMLElement;\n  declare readonly minutesTarget: HTMLElement;\n  declare readonly secondsTarget: HTMLElement;\n  declare readonly statusTarget: HTMLElement;\n  declare readonly hasDaysTarget: boolean;\n  declare readonly hasHoursTarget: boolean;\n  declare readonly hasMinutesTarget: boolean;\n  declare readonly hasSecondsTarget: boolean;\n  declare readonly hasStatusTarget: boolean;\n\n  declare deadlineValue: string;\n  declare intervalValue: number;\n  declare directionValue: string;\n  declare autostartValue: boolean;\n  declare completeLabelValue: string;\n  declare announceTextValue: string;\n\n  readonly #intervals = new SafeInterval();\n  #intervalId: number | null = null;\n  /** Collapses a morph that swaps several render inputs at once into one re-derive. */\n  readonly #resync = new MicrotaskCoalescer(() => this.#resyncToValues());\n\n  /** Epoch-ms anchor: the deadline (down) or the count-up origin (up). */\n  #reference = 0;\n  /** Amount (ms) captured at pause, so resume can restore the same display. */\n  #pausedAmount = 0;\n  /**\n   * The amount the slots are currently showing, floored to the second they render.\n   * It lags {@link #currentAmount} by up to one tick, and it — not the live reading —\n   * is what a pause has to preserve: storing the fraction behind the display instead\n   * makes the first tick after a resume step by two units.\n   */\n  #renderedAmount = 0;\n\n  override connect(): void {\n    this.#resync.activate();\n    this.#initReference();\n    const amount = this.#currentAmount();\n    this.#render(amount);\n    // Remember what is on screen so resume() continues from it instead of snapping\n    // the anchor to now (which would settle a countdown at once).\n    this.#pausedAmount = this.#renderedAmount;\n\n    const authored = this.element.getAttribute(\"data-state\");\n    if (authored === null) {\n      // Nothing to honor: this is the declarative first render, which is the only\n      // thing `autostart` governs.\n      if (this.autostartValue && this.#isValidDeadline) {\n        this.start();\n        return;\n      }\n      this.element.setAttribute(\"data-state\", \"paused\");\n      return;\n    }\n    if (authored === \"complete\" && this.#isDown && amount <= 0) {\n      // Still settled, so the milestone stands. Dropping it to the resting state\n      // would let a later resume() cross zero a second time and announce the same\n      // completion again; only a deadline moved forward re-arms it.\n      return;\n    }\n    // A pause the user made survives the round trip, but nothing carries a live timer\n    // across it — a restored \"running\" has to be re-armed here or it renders once and\n    // freezes, because start() is a no-op while the attribute still says \"running\".\n    const wasRunning = authored === \"running\";\n    this.element.setAttribute(\"data-state\", \"paused\");\n    if (wasRunning) this.start();\n  }\n\n  override disconnect(): void {\n    this.#resync.cancel();\n    this.#intervals.clearAll();\n    this.#intervalId = null;\n  }\n\n  /** Re-derives the display when a morph swaps the deadline in place. */\n  deadlineValueChanged(): void {\n    this.#resync.schedule();\n  }\n\n  /** Re-derives the display when a morph flips the counting direction in place. */\n  directionValueChanged(): void {\n    this.#resync.schedule();\n  }\n\n  /**\n   * Points the anchor at the current `deadline` / `direction` and repaints.\n   *\n   * Render only: it starts no interval and emits no event, so a morph cannot make a\n   * paused timer run or replay a milestone. A running one needs no restart either —\n   * every tick reads the anchor, so moving it is enough. While paused the stored\n   * amount follows the new reading, or resume would continue from the old deadline.\n   */\n  #resyncToValues(): void {\n    this.#initReference();\n    this.#render(this.#currentAmount());\n    if (this.#state !== \"running\") this.#pausedAmount = this.#renderedAmount;\n  }\n\n  /** Starts (or restarts after pause) ticking toward the deadline. */\n  start(): void {\n    if (this.#state === \"running\" || !this.#isValidDeadline) return;\n    if (this.#isDown && this.#currentAmount() <= 0) {\n      // Already settled — a restored snapshot keeps data-state=\"complete\". The\n      // milestone was announced in the visit that reached zero, so completing again\n      // here would re-emit `complete` on every reconnect.\n      if (this.#state !== \"complete\") this.#complete();\n      return;\n    }\n    this.#runInterval();\n  }\n\n  /** Pauses ticking, preserving the currently displayed amount. */\n  pause(): void {\n    if (this.#state !== \"running\") return;\n    this.#pausedAmount = this.#renderedAmount;\n    this.#teardownInterval();\n    this.element.setAttribute(\"data-state\", \"paused\");\n  }\n\n  /** Resumes from a pause, continuing from the preserved amount. */\n  resume(): void {\n    if (this.#state !== \"paused\" || !this.#isValidDeadline) return;\n    const now = Date.now();\n    this.#reference = this.#isDown ? now + this.#pausedAmount : now - this.#pausedAmount;\n    this.start();\n  }\n\n  /**\n   * Re-syncs to the deadline and clears any pause offset, **preserving the current\n   * run state**: a running timer keeps counting down from the reset amount, while a\n   * paused (or completed) one resets the displayed amount but stays paused until the\n   * user resumes — it never silently restarts. The run state is read from the DOM,\n   * not re-derived from the declarative `autostart` Value (which governs only markup\n   * that states no run state at all); re-deriving it would override a user's pause —\n   * the DOM, not a re-run of declarative config, is the source of truth.\n   */\n  reset(): void {\n    const wasRunning = this.#state === \"running\";\n    this.#teardownInterval();\n    this.#initReference();\n    const amount = this.#currentAmount();\n    this.#render(amount);\n    // A prior complete() may have written a completion message into the status\n    // slot; clear it so a reset timer does not keep showing the stale \"finished\"\n    // text. Only that message is ours to take back — `complete()` declines to write\n    // when `completeLabel` is empty, so anything else in there belongs to the\n    // consumer.\n    if (this.hasStatusTarget && this.statusTarget.textContent === this.completeLabelValue) {\n      this.statusTarget.textContent = \"\";\n    }\n    // teardownInterval() leaves data-state untouched; drop any lingering \"running\" to a\n    // resting \"paused\" so start() (a no-op while \"running\") can re-arm when we resume.\n    this.element.setAttribute(\"data-state\", \"paused\");\n    if (wasRunning && this.#isValidDeadline) {\n      // Was counting down: re-arm and keep running from the reset amount.\n      this.#pausedAmount = 0;\n      this.start();\n    } else {\n      // Was paused/complete: hold at the reset amount and wait for the user to resume.\n      // Remember what is on screen so resume() restores it instead of snapping the\n      // anchor to 0.\n      this.#pausedAmount = this.#renderedAmount;\n    }\n  }\n\n  /** Schedules the repeating tick and marks the timer running. */\n  #runInterval(): void {\n    this.element.setAttribute(\"data-state\", \"running\");\n    this.#intervalId = this.#intervals.set(() => this.#tick(), this.intervalValue);\n  }\n\n  /** Cancels the repeating tick, if any. */\n  #teardownInterval(): void {\n    if (this.#intervalId !== null) {\n      this.#intervals.clear(this.#intervalId);\n      this.#intervalId = null;\n    }\n  }\n\n  /** Recomputes, renders, emits `tick`, and completes when a countdown hits 0. */\n  #tick(): void {\n    const amount = this.#currentAmount();\n    this.#render(amount);\n    // `remaining` is the displayed amount (time left when counting down, elapsed\n    // when counting up); `direction` lets consumers disambiguate the two.\n    this.dispatch(\"tick\", {\n      detail: { remaining: amount, direction: this.#isDown ? \"down\" : \"up\" },\n    });\n    if (this.#isDown && this.#reference - Date.now() <= 0) {\n      this.#complete();\n    }\n  }\n\n  /** Stops at zero, marks completion, announces it, and emits `complete`. */\n  #complete(): void {\n    this.#teardownInterval();\n    this.#render(0);\n    this.element.setAttribute(\"data-state\", \"complete\");\n    if (this.hasStatusTarget && this.completeLabelValue.length > 0) {\n      this.statusTarget.textContent = this.completeLabelValue;\n    }\n    this.dispatch(\"complete\", { detail: {} });\n    // Reaching zero is the transition; the ticking numbers in between are state\n    // the consumer can see, and reading each one would be unusable.\n    announce(fillTemplate(this.announceTextValue, {}));\n  }\n\n  /** Sets the time anchor from the `deadline` value. */\n  #initReference(): void {\n    this.#reference = Date.parse(this.deadlineValue);\n  }\n\n  /** Remaining (down) or elapsed (up) ms, never negative. */\n  #currentAmount(): number {\n    if (!this.#isValidDeadline) return 0;\n    const now = Date.now();\n    const raw = this.#isDown ? this.#reference - now : now - this.#reference;\n    return Math.max(0, raw);\n  }\n\n  /**\n   * Writes the amount into the day/hour/minute/second slots.\n   *\n   * @stimeoRenderRoot\n   */\n  #render(amount: number): void {\n    const totalSeconds = Math.floor(amount / SECOND_MS);\n    this.#renderedAmount = totalSeconds * SECOND_MS;\n    const days = Math.floor(totalSeconds / 86400);\n    const hours = Math.floor((totalSeconds % 86400) / 3600);\n    const minutes = Math.floor((totalSeconds % 3600) / 60);\n    const seconds = totalSeconds % 60;\n\n    if (this.hasDaysTarget) this.daysTarget.textContent = String(days);\n    if (this.hasHoursTarget) this.hoursTarget.textContent = this.#pad(hours);\n    if (this.hasMinutesTarget) this.minutesTarget.textContent = this.#pad(minutes);\n    if (this.hasSecondsTarget) this.secondsTarget.textContent = this.#pad(seconds);\n  }\n\n  /** Zero-pads a unit to two digits. */\n  #pad(unit: number): string {\n    return String(unit).padStart(2, \"0\");\n  }\n\n  get #isDown(): boolean {\n    return this.directionValue !== \"up\";\n  }\n\n  get #isValidDeadline(): boolean {\n    return !Number.isNaN(this.#reference);\n  }\n\n  /** Current lifecycle phase as reflected on `data-state`. */\n  get #state(): string {\n    return this.element.getAttribute(\"data-state\") ?? \"paused\";\n  }\n}\n"]}
+{"version":3,"sources":["../../src/utils/announce.ts","../../src/utils/microtask_coalescer.ts","../../src/utils/safe_timeout.ts","../../src/controllers/countdown_controller.ts"],"names":[],"mappings":"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","file":"countdown_controller.js","sourcesContent":["/**\n * Sends one message to the page's shared `stimeo--announcer`.\n *\n * A component that has to reach assistive tech does not carry a live region of its\n * own: a region only announces what changes *after* assistive tech already knows\n * about it, which a region that appears (or is un-hidden) with its message cannot\n * satisfy. The one region that can is the announcer sitting in the page from the\n * start, so state changes are handed to it as an event and it does the reading.\n *\n * The event goes to `window` because the announcer is usually a sibling high in the\n * document rather than an ancestor of the component dispatching it.\n *\n * Wording comes from the consumer — the library ships no English strings — so an\n * empty message is silently dropped and nothing is announced.\n *\n * @example\n * ```ts\n * announce(this.announceTextValue, { assertive: false });\n * ```\n */\nexport function announce(message: string, options: { assertive?: boolean } = {}): void {\n  const text = message.trim();\n  if (text.length === 0) return;\n  window.dispatchEvent(\n    new CustomEvent(\"stimeo--announcer:announce\", {\n      detail: { message: text, assertive: options.assertive === true },\n    }),\n  );\n}\n\n/**\n * Fills `{name}` placeholders in an announcement template from `values`.\n *\n * The same substitution the value-text templates use, so a consumer writes\n * `\"{percent}% complete\"` in one attribute and gets the same rules everywhere. A\n * placeholder with no matching entry is left as authored rather than blanked, which\n * keeps a typo visible instead of silently swallowing the word.\n */\nexport function fillTemplate(template: string, values: Record<string, string | number>): string {\n  return template.replace(/\\{([a-zA-Z][a-zA-Z0-9]*)\\}/g, (match, name: string) => {\n    const replacement = values[name];\n    return replacement === undefined ? match : String(replacement);\n  });\n}\n","/**\n * Collapses many Stimulus lifecycle callbacks from one DOM mutation into a\n * single pass.\n *\n * Stimulus fires `<name>TargetConnected` / `Disconnected` once per element and\n * `<name>ValueChanged` once per changed attribute. Replacing a list of N options\n * or morphing several render Values therefore delivers N callbacks — but the\n * useful unit of work is \"reconcile against the resulting declarative input\",\n * once, after the batch has settled. Every controller with reconcilable targets\n * or render Values needs the same shape: a `queued` flag plus `queueMicrotask`.\n *\n * **A microtask is the right horizon, and the reason is specific.** Stimulus\n * drives these callbacks from a `MutationObserver`, whose own callback already\n * runs as a microtask with the whole batch in hand; scheduling one more lands\n * after the last sibling callback of that batch and still before paint or any\n * event handler. A timer would be later than it needs to be, and reconciling\n * synchronously would run once per element against a half-applied DOM.\n *\n * **The two guards are not the same guard.** Scheduling is refused before the\n * controller connects, and running is refused after it disconnects:\n *\n * - **Before `connect()`** — Stimulus delivers initial target and Value callbacks\n *   ahead of `connect()`. Reconciling there would compute output against a\n *   controller whose own state has not been initialised, and `connect()` is\n *   about to do a full pass anyway.\n * - **After `disconnect()`** — Stimulus fires a callback for **every** target\n *   during teardown, and a microtask queued just before it would otherwise run\n *   against a detached tree. {@link MicrotaskCoalescer.cancel} exists for the\n *   teardown path to drop the pending pass outright.\n *\n * Both guards are part of one contract here rather than something each consumer\n * has to remember separately.\n *\n * Scope is the scheduling only. *What* to reconcile — keep the surviving active\n * option, fall back to the next / previous / first visible one, rebuild derived\n * chips or hidden fields — stays in the controller, because no two consumers\n * answer it the same way.\n *\n * This file's own doc block is dropped from `dist`, but every member comment is\n * inlined into each consumer entry (`tsup` builds with `splitting: false`), so\n * rationale belongs here and only the contract belongs on the members.\n *\n * @example\n * ```ts\n * readonly #reconcile = new MicrotaskCoalescer(() => this.#reconcileOptions());\n *\n * connect()    { this.#reconcile.activate(); }\n * disconnect() { this.#reconcile.cancel(); }\n *\n * optionTargetConnected()    { this.#reconcile.schedule(); }\n * optionTargetDisconnected() { this.#reconcile.schedule(); }\n * ```\n */\nexport class MicrotaskCoalescer {\n  readonly #run: () => void;\n  #queued = false;\n  #active = false;\n  #generation = 0;\n\n  /** @param run - the single reconciliation pass, invoked at most once per batch. */\n  constructor(run: () => void) {\n    this.#run = run;\n  }\n\n  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */\n  activate(): void {\n    this.#active = true;\n  }\n\n  /** Closes the window and drops any pending pass; call from `disconnect()`. */\n  cancel(): void {\n    this.#active = false;\n    this.#queued = false;\n    this.#generation += 1;\n  }\n\n  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */\n  schedule(): void {\n    if (!this.#active || this.#queued) return;\n    this.#queued = true;\n    const generation = this.#generation;\n    queueMicrotask(() => {\n      // A cancelled callback must not consume a pass queued after reconnect.\n      if (generation !== this.#generation || !this.#queued || !this.#active) return;\n      this.#queued = false;\n      this.#run();\n    });\n  }\n}\n","/**\n * Self-cleaning timer registries shared by Stimeo controllers.\n *\n * Stimulus controllers frequently schedule `setTimeout` / `setInterval` work\n * (auto-dismiss, debouncing, polling). When the element leaves the DOM — a\n * Turbo Drive navigation, a Turbo Stream replacement, or any `disconnect()` —\n * orphaned timers keep firing against a detached controller, leaking memory and\n * mutating stale state. {@link SafeTimeout} and {@link SafeInterval} track every\n * timer they create so a single {@link TimerRegistry.clearAll | clearAll()} call\n * in `disconnect()` tears them all down.\n *\n * These are intentionally low-level primitives: they own *registration and\n * cleanup only*. Higher-level policy (pause/resume, remaining-time accounting)\n * stays in the individual controllers so per-widget semantics are not flattened\n * into a lowest-common-denominator helper.\n */\n\n/**\n * Largest delay a timer can hold: the platform stores it in a 32-bit signed\n * integer, and anything larger overflows to `1`, so a delay meant to be far in\n * the future fires almost immediately. A declared delay above this bound names\n * no delay at all, and a controller reading one falls back to its default.\n */\nexport const MAX_TIMER_DELAY_MS = 2_147_483_647;\n\n/**\n * Shared registry bookkeeping for the timeout/interval variants.\n *\n * Subclasses provide the scheduling primitive ({@link schedule}) and its matching\n * canceller ({@link cancel}); this base owns the set of live ids plus the\n * per-id and bulk teardown shared by both.\n */\nabstract class TimerRegistry {\n  /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */\n  protected readonly ids = new Set<number>();\n\n  /** Schedules the underlying platform timer and returns its id. */\n  protected abstract schedule(callback: () => void, delay: number): number;\n\n  /** Cancels the underlying platform timer for `id`. */\n  protected abstract cancel(id: number): void;\n\n  /**\n   * Cancels a single tracked timer.\n   *\n   * No-ops if the id is unknown (already cleared, fired, or never owned by this\n   * registry), so callers can clear defensively without guarding.\n   */\n  clear(id: number): void {\n    if (this.ids.delete(id)) {\n      this.cancel(id);\n    }\n  }\n\n  /**\n   * Cancels every tracked timer. Call this from a controller's `disconnect()`\n   * to guarantee no timer outlives the element.\n   */\n  clearAll(): void {\n    for (const id of this.ids) {\n      this.cancel(id);\n    }\n    this.ids.clear();\n  }\n\n  /** Number of timers currently tracked (pending). */\n  get size(): number {\n    return this.ids.size;\n  }\n}\n\n/**\n * `setTimeout` wrapper that auto-forgets each timer once it fires and supports\n * bulk teardown on disconnect.\n *\n * @example\n * ```ts\n * #timers = new SafeTimeout();\n *\n * connect() {\n *   this.#timers.set(() => this.dismiss(), 5000);\n * }\n *\n * disconnect() {\n *   this.#timers.clearAll();\n * }\n * ```\n */\nexport class SafeTimeout extends TimerRegistry {\n  /**\n   * Schedules `callback` after `delay` ms and returns the timer id.\n   *\n   * The id is removed from the registry automatically when the timeout fires,\n   * so {@link TimerRegistry.size | size} reflects only still-pending timers.\n   */\n  set(callback: () => void, delay: number): number {\n    const id = this.schedule(() => {\n      this.ids.delete(id);\n      callback();\n    }, delay);\n    this.ids.add(id);\n    return id;\n  }\n\n  protected schedule(callback: () => void, delay: number): number {\n    return window.setTimeout(callback, delay);\n  }\n\n  protected cancel(id: number): void {\n    window.clearTimeout(id);\n  }\n}\n\n/**\n * `setInterval` wrapper that tracks every interval for bulk teardown on\n * disconnect. Unlike {@link SafeTimeout}, intervals are retained until they are\n * explicitly cleared because they fire repeatedly.\n *\n * @example\n * ```ts\n * #intervals = new SafeInterval();\n *\n * connect() {\n *   this.#intervals.set(() => this.tick(), 1000);\n * }\n *\n * disconnect() {\n *   this.#intervals.clearAll();\n * }\n * ```\n */\nexport class SafeInterval extends TimerRegistry {\n  /** Schedules a repeating `callback` every `delay` ms and returns the timer id. */\n  set(callback: () => void, delay: number): number {\n    const id = this.schedule(callback, delay);\n    this.ids.add(id);\n    return id;\n  }\n\n  protected schedule(callback: () => void, delay: number): number {\n    return window.setInterval(callback, delay);\n  }\n\n  protected cancel(id: number): void {\n    window.clearInterval(id);\n  }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { announce, fillTemplate } from \"../utils/announce\";\nimport { MicrotaskCoalescer } from \"../utils/microtask_coalescer\";\nimport { SafeInterval } from \"../utils/safe_timeout\";\n\n/** Display granularity: the slots render whole seconds, so amounts snap to these. */\nconst SECOND_MS = 1000;\n\n/**\n * Suffix of the marker on the text this controller wrote into the `status` slot;\n * the marker holds that text as its value. The slot is this controller's only while\n * it shows that text and nothing else: the two still agree, and the slot holds no\n * element. While the marker holds text, a slot the consumer rewrites or empties\n * afterwards is theirs; a marker with an empty value owns the empty slot, including\n * one the consumer empties again after writing into it. An element the consumer\n * puts in the slot makes it theirs either way, for as long as it is there. A\n * restored page carries the claim along with the text.\n */\nconst OWNED_STATUS = \"owns-status\";\n\n/**\n * Headless countdown/timer behavior built on the live-region `role=\"timer\"`\n * practice (no dedicated APG pattern).\n *\n * Markup contract (identifier: `stimeo--countdown`):\n *   <div data-controller=\"stimeo--countdown\" role=\"timer\" aria-live=\"off\"\n *        data-stimeo--countdown-deadline-value=\"2026-12-31T23:59:59+09:00\"\n *        data-action=\"countdown:pause->stimeo--countdown#pause\n *                     countdown:resume->stimeo--countdown#resume\">\n *     <span data-stimeo--countdown-target=\"days\">0</span>\n *     <span data-stimeo--countdown-target=\"hours\">00</span>\n *     <span data-stimeo--countdown-target=\"minutes\">00</span>\n *     <span data-stimeo--countdown-target=\"seconds\">00</span>\n *   </div>\n *\n * Computes the time remaining to `deadline` (or elapsed since it, in\n * `direction=\"up\"`), formats it into the day/hour/minute/second slots, and ticks\n * on `interval`. `aria-live=\"off\"` is recommended so the timer is not announced\n * every second; only the milestone (completion) is surfaced — read out through\n * `announceText`, shown in the optional `status` slot when a `completeLabel` is\n * provided, and handed to the consumer as the `complete` event. Keep the `status`\n * slot free of live-region semantics: with `announceText` set it would say the\n * same thing twice.\n *\n * The slot is shared with the consumer. Completion writes the label in force and\n * marks it with `data-<identifier>-owns-status`, whose value is that text; while\n * the slot still shows that text and nothing else, the controller keeps it on the\n * current `completeLabel` and takes it back once the timer leaves the complete\n * state — `reset`, `start()` counting on from it, or a completion the new reading\n * does not settle (a deadline moved forward or a count turned `up`, in place or\n * before a restore). All but `start()` leave it `paused`, so `resume()` counts\n * again.\n * An empty label puts no text there, so it never displaces what the slot already\n * holds; completing with one claims an empty slot — no text and no element — with\n * an empty marker, which owns the slot whenever it is empty. Text the consumer put\n * there stays theirs while it is there, and so does a slot they put an element in,\n * whatever its text: the label is neither followed into it nor taken back out of\n * it, and its marker stays, until the element is gone. Only a completion with a\n * label writes over either.\n *\n * `complete` dispatches `{}`; `tick` dispatches\n * `{ remaining: number, direction: \"down\" | \"up\" }`, where `remaining` is in\n * milliseconds.\n *\n * @remarks\n * Behavior only — slot text is updated, not styled. Pause/resume shifts an\n * internal time anchor so the displayed amount is preserved across a pause, down\n * to the second actually on screen: resuming continues from that reading rather\n * than from the fraction behind it, so the first tick after a resume steps by one\n * unit like every other. The run state lives in `data-state` and the markup is its\n * source of truth — `autostart` only decides the state of a timer whose markup does\n * not carry one. The interval is owned by `SafeInterval` and torn down on\n * `disconnect()` (Turbo navigation included); nothing else needs carrying across,\n * because every reading is re-derived from `deadline` and the wall clock.\n */\nexport class CountdownController extends Controller<HTMLElement> {\n  /** The status marker, in the namespace this controller is registered under. */\n  get #ownedStatus(): string {\n    return `data-${this.identifier}-${OWNED_STATUS}`;\n  }\n\n  static override targets = [\"days\", \"hours\", \"minutes\", \"seconds\", \"status\"];\n  static override values = {\n    deadline: { type: String, default: \"\" },\n    interval: { type: Number, default: 1000 },\n    direction: { type: String, default: \"down\" },\n    autostart: { type: Boolean, default: true },\n    completeLabel: { type: String, default: \"\" },\n    announceText: { type: String, default: \"\" },\n  };\n  static actions = [\"pause\", \"reset\", \"resume\", \"start\"] as const;\n  static events = [\"complete\", \"tick\"] as const;\n\n  declare readonly daysTarget: HTMLElement;\n  declare readonly hoursTarget: HTMLElement;\n  declare readonly minutesTarget: HTMLElement;\n  declare readonly secondsTarget: HTMLElement;\n  declare readonly statusTarget: HTMLElement;\n  declare readonly hasDaysTarget: boolean;\n  declare readonly hasHoursTarget: boolean;\n  declare readonly hasMinutesTarget: boolean;\n  declare readonly hasSecondsTarget: boolean;\n  declare readonly hasStatusTarget: boolean;\n\n  declare deadlineValue: string;\n  declare intervalValue: number;\n  declare directionValue: string;\n  declare autostartValue: boolean;\n  declare completeLabelValue: string;\n  declare announceTextValue: string;\n\n  readonly #intervals = new SafeInterval();\n  #intervalId: number | null = null;\n  /** Collapses a morph that swaps several render inputs at once into one re-derive. */\n  readonly #resync = new MicrotaskCoalescer(() => this.#resyncToValues());\n  /**\n   * Whether `connect()` has run for this connection. Stimulus delivers Value\n   * callbacks ahead of it, while the run state is still the markup's own and not\n   * yet settled; `connect()` brings the status up to date once it is.\n   */\n  #connected = false;\n\n  /** Epoch-ms anchor: the deadline (down) or the count-up origin (up). */\n  #reference = 0;\n  /** Amount (ms) captured at pause, so resume can restore the same display. */\n  #pausedAmount = 0;\n  /**\n   * The amount the slots are currently showing, floored to the second they render.\n   * It lags {@link #currentAmount} by up to one tick, and it — not the live reading —\n   * is what a pause has to preserve: storing the fraction behind the display instead\n   * makes the first tick after a resume step by two units.\n   */\n  #renderedAmount = 0;\n\n  override connect(): void {\n    this.#connected = true;\n    this.#resync.activate();\n    this.#initReference();\n    const amount = this.#currentAmount();\n    this.#render(amount);\n    // Remember what is on screen so resume() continues from it instead of snapping\n    // the anchor to now (which would settle a countdown at once).\n    this.#pausedAmount = this.#renderedAmount;\n\n    const authored = this.element.getAttribute(\"data-state\");\n    // A completion that is still settled stands. Dropping it to the resting state\n    // would let a later resume() cross zero a second time and announce the same\n    // completion again; only a reading that no longer settles it — a deadline\n    // moved forward, or a count turned `up` — re-arms it.\n    const settled = authored === \"complete\" && this.#isSettled(amount);\n    if (authored === null) {\n      // Nothing to honor: this is the declarative first render, which is the only\n      // thing `autostart` governs.\n      if (this.autostartValue && this.#isValidDeadline) this.start();\n      else this.element.setAttribute(\"data-state\", \"paused\");\n    } else if (!settled) {\n      // A pause the user made survives the round trip, but nothing carries a live\n      // timer across it — a restored \"running\" has to be re-armed here or it renders\n      // once and freezes, because start() is a no-op while the attribute still says\n      // \"running\".\n      this.element.setAttribute(\"data-state\", \"paused\");\n      if (authored === \"running\") this.start();\n    }\n    // Value callbacks ran ahead of this, before the run state above was settled, so a\n    // status still holding this controller's text is brought up to date here.\n    this.#syncStatus();\n  }\n\n  override disconnect(): void {\n    this.#connected = false;\n    this.#resync.cancel();\n    this.#intervals.clearAll();\n    this.#intervalId = null;\n  }\n\n  /** Re-derives the display when a morph swaps the deadline in place. */\n  deadlineValueChanged(): void {\n    this.#resync.schedule();\n  }\n\n  /** Re-derives the display when a morph flips the counting direction in place. */\n  directionValueChanged(): void {\n    this.#resync.schedule();\n  }\n\n  /**\n   * Follows a completion label swapped in place by a morph.\n   *\n   * Render only: `complete` is neither dispatched nor announced again. The status\n   * changes only after the countdown has completed, and only while it still shows\n   * the text this controller wrote there and nothing else, so text or an element\n   * the consumer put in the slot stays. A change delivered ahead of `connect()` is\n   * left to `connect()`.\n   */\n  completeLabelValueChanged(): void {\n    if (this.#connected) this.#syncStatus();\n  }\n\n  /**\n   * Keeps a status that still shows this controller's text, and nothing else, on\n   * what the run state calls for: the label in force while complete; otherwise the\n   * text is taken back, marker and all. A status holding anything else is the\n   * consumer's and is left alone, marker included.\n   *\n   * @stimeoRenderRoot\n   */\n  #syncStatus(): void {\n    if (!this.hasStatusTarget || !this.#ownsStatus(this.statusTarget)) return;\n    if (this.#state === \"complete\") this.#writeStatus(this.statusTarget, this.completeLabelValue);\n    else this.#releaseStatus(this.statusTarget);\n  }\n\n  /**\n   * Points the anchor at the current `deadline` / `direction` and repaints.\n   *\n   * Render only: it starts no interval and emits no event, so a morph cannot make a\n   * paused timer run or replay a milestone. A running one needs no restart either —\n   * every tick reads the anchor, so moving it is enough. While paused the stored\n   * amount follows the new reading, or resume would continue from the old deadline.\n   * A completion the new reading no longer settles (a deadline moved forward, or a\n   * count turned `up`) is handed back paused, as `connect()` hands back a restored\n   * one, so `resume()` counts again; the completion text this controller wrote goes\n   * with it, from a status slot that still shows it and nothing else.\n   *\n   * @stimeoRenderRoot\n   */\n  #resyncToValues(): void {\n    this.#initReference();\n    const amount = this.#currentAmount();\n    this.#render(amount);\n    if (this.#state === \"complete\" && !this.#isSettled(amount)) {\n      this.element.setAttribute(\"data-state\", \"paused\");\n      this.#syncStatus();\n    }\n    if (this.#state !== \"running\") this.#pausedAmount = this.#renderedAmount;\n  }\n\n  /**\n   * Starts (or restarts after pause) ticking toward the deadline. Counting on from a\n   * completion takes this controller's completion text back out of the status.\n   */\n  start(): void {\n    if (this.#state === \"running\" || !this.#isValidDeadline) return;\n    if (this.#isDown && this.#currentAmount() <= 0) {\n      // Already settled — a restored snapshot keeps data-state=\"complete\". The\n      // milestone was announced in the visit that reached zero, so completing again\n      // here would re-emit `complete` on every reconnect.\n      if (this.#state !== \"complete\") this.#complete();\n      return;\n    }\n    this.#runInterval();\n  }\n\n  /** Pauses ticking, preserving the currently displayed amount. */\n  pause(): void {\n    if (this.#state !== \"running\") return;\n    this.#pausedAmount = this.#renderedAmount;\n    this.#teardownInterval();\n    this.element.setAttribute(\"data-state\", \"paused\");\n  }\n\n  /** Resumes from a pause, continuing from the preserved amount. */\n  resume(): void {\n    if (this.#state !== \"paused\" || !this.#isValidDeadline) return;\n    const now = Date.now();\n    this.#reference = this.#isDown ? now + this.#pausedAmount : now - this.#pausedAmount;\n    this.start();\n  }\n\n  /**\n   * Re-syncs to the deadline and clears any pause offset, **preserving the current\n   * run state**: a running timer keeps counting down from the reset amount, while a\n   * paused (or completed) one resets the displayed amount but stays paused until the\n   * user resumes — it never silently restarts. The run state is read from the DOM,\n   * not re-derived from the declarative `autostart` Value (which governs only markup\n   * that states no run state at all); re-deriving it would override a user's pause —\n   * the DOM, not a re-run of declarative config, is the source of truth.\n   */\n  reset(): void {\n    const wasRunning = this.#state === \"running\";\n    this.#teardownInterval();\n    this.#initReference();\n    const amount = this.#currentAmount();\n    this.#render(amount);\n    // teardownInterval() leaves data-state untouched; drop any lingering \"running\" to a\n    // resting \"paused\" so start() (a no-op while \"running\") can re-arm when we resume.\n    this.element.setAttribute(\"data-state\", \"paused\");\n    // A reset timer has left the complete state, so the completion text this\n    // controller wrote leaves the status slot with it; a slot the consumer rewrote or\n    // put an element in stays as it is.\n    this.#syncStatus();\n    if (wasRunning && this.#isValidDeadline) {\n      // Was counting down: re-arm and keep running from the reset amount.\n      this.#pausedAmount = 0;\n      this.start();\n    } else {\n      // Was paused/complete: hold at the reset amount and wait for the user to resume.\n      // Remember what is on screen so resume() restores it instead of snapping the\n      // anchor to 0.\n      this.#pausedAmount = this.#renderedAmount;\n    }\n  }\n\n  /**\n   * Schedules the repeating tick and marks the timer running. This is the one way\n   * into `running`, and a running timer keeps none of this controller's completion\n   * text in the status, so the status is settled here as on every other way out of\n   * `complete`: `start()` leaves a completion directly when `direction` flips to\n   * `up` and `start()` runs in the same task, ahead of the direction callback.\n   *\n   * @stimeoRuntimeOnly `interval` is the period of the one timer this call arms; the running state\n   *   it writes does not depend on a Value.\n   */\n  #runInterval(): void {\n    this.element.setAttribute(\"data-state\", \"running\");\n    this.#syncStatus();\n    this.#intervalId = this.#intervals.set(() => this.#tick(), this.intervalValue);\n  }\n\n  /** Cancels the repeating tick, if any. */\n  #teardownInterval(): void {\n    if (this.#intervalId !== null) {\n      this.#intervals.clear(this.#intervalId);\n      this.#intervalId = null;\n    }\n  }\n\n  /** Recomputes, renders, emits `tick`, and completes when a countdown hits 0. */\n  #tick(): void {\n    const amount = this.#currentAmount();\n    this.#render(amount);\n    // `remaining` is the displayed amount (time left when counting down, elapsed\n    // when counting up); `direction` lets consumers disambiguate the two.\n    this.dispatch(\"tick\", {\n      detail: { remaining: amount, direction: this.#isDown ? \"down\" : \"up\" },\n    });\n    if (this.#isDown && this.#reference - Date.now() <= 0) {\n      this.#complete();\n    }\n  }\n\n  /**\n   * Stops at zero, marks completion, writes the completion label, emits `complete`,\n   * and announces it.\n   *\n   * @stimeoRenderRoot\n   */\n  #complete(): void {\n    this.#teardownInterval();\n    this.#render(0);\n    this.element.setAttribute(\"data-state\", \"complete\");\n    this.#claimStatus();\n    this.dispatch(\"complete\", { detail: {} });\n    this.#announceCompletion();\n  }\n\n  /**\n   * Writes the label in force into the status slot as this controller's text. An\n   * empty label puts no text there: it claims a slot that is already empty — no\n   * text and no element — empties one that is still this controller's, and leaves\n   * any other slot, the consumer's, alone.\n   */\n  #claimStatus(): void {\n    if (!this.hasStatusTarget) return;\n    const status = this.statusTarget;\n    const label = this.completeLabelValue;\n    if (label === \"\" && !this.#isEmpty(status) && !this.#ownsStatus(status)) return;\n    this.#writeStatus(status, label);\n  }\n\n  /**\n   * Whether the status slot shows the text this controller wrote there and nothing\n   * else: the text matches the marker, and the slot holds no element. Writing the\n   * slot's text replaces every child node, so an element the consumer puts in the\n   * slot makes it theirs even while the text still matches. An empty marker\n   * matches the slot whenever it is empty.\n   */\n  #ownsStatus(status: HTMLElement): boolean {\n    return (\n      status.getAttribute(this.#ownedStatus) === status.textContent &&\n      status.firstElementChild === null\n    );\n  }\n\n  /** Whether the status slot holds nothing at all: no text and no element. */\n  #isEmpty(status: HTMLElement): boolean {\n    return status.textContent === \"\" && status.firstElementChild === null;\n  }\n\n  /** Puts `text` into the status slot and records it as this controller's. */\n  #writeStatus(status: HTMLElement, text: string): void {\n    if (status.textContent !== text) status.textContent = text;\n    status.setAttribute(this.#ownedStatus, text);\n  }\n\n  /** Takes this controller's text out of the status slot, marker and all. */\n  #releaseStatus(status: HTMLElement): void {\n    status.textContent = \"\";\n    status.removeAttribute(this.#ownedStatus);\n  }\n\n  /**\n   * Reads the completion out through the shared announcer.\n   *\n   * @stimeoRuntimeOnly `announceText` words the one announcement a completion makes.\n   */\n  #announceCompletion(): void {\n    // Reaching zero is the transition; the ticking numbers in between are state\n    // the consumer can see, and reading each one would be unusable.\n    announce(fillTemplate(this.announceTextValue, {}));\n  }\n\n  /** Sets the time anchor from the `deadline` value. */\n  #initReference(): void {\n    this.#reference = Date.parse(this.deadlineValue);\n  }\n\n  /** Whether a reading of `amount` leaves nothing to count: only a countdown at zero. */\n  #isSettled(amount: number): boolean {\n    return this.#isDown && amount <= 0;\n  }\n\n  /** Remaining (down) or elapsed (up) ms, never negative. */\n  #currentAmount(): number {\n    if (!this.#isValidDeadline) return 0;\n    const now = Date.now();\n    const raw = this.#isDown ? this.#reference - now : now - this.#reference;\n    return Math.max(0, raw);\n  }\n\n  /** Writes the amount into the day/hour/minute/second slots. */\n  #render(amount: number): void {\n    const totalSeconds = Math.floor(amount / SECOND_MS);\n    this.#renderedAmount = totalSeconds * SECOND_MS;\n    const days = Math.floor(totalSeconds / 86400);\n    const hours = Math.floor((totalSeconds % 86400) / 3600);\n    const minutes = Math.floor((totalSeconds % 3600) / 60);\n    const seconds = totalSeconds % 60;\n\n    if (this.hasDaysTarget) this.daysTarget.textContent = String(days);\n    if (this.hasHoursTarget) this.hoursTarget.textContent = this.#pad(hours);\n    if (this.hasMinutesTarget) this.minutesTarget.textContent = this.#pad(minutes);\n    if (this.hasSecondsTarget) this.secondsTarget.textContent = this.#pad(seconds);\n  }\n\n  /** Zero-pads a unit to two digits. */\n  #pad(unit: number): string {\n    return String(unit).padStart(2, \"0\");\n  }\n\n  get #isDown(): boolean {\n    return this.directionValue !== \"up\";\n  }\n\n  get #isValidDeadline(): boolean {\n    return !Number.isNaN(this.#reference);\n  }\n\n  /** Current lifecycle phase as reflected on `data-state`. */\n  get #state(): string {\n    return this.element.getAttribute(\"data-state\") ?? \"paused\";\n  }\n}\n"]}