stimeo-ui 0.1.0-alpha.1

package/dist/controllers/switch_controller.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/controllers/switch_controller.ts"],"names":[],"mappings":";;;AAyBO,IAAM,gBAAA,GAAN,cAA+B,UAAA,CAAwB;AAAA,EAC5D,OAAO,OAAA,GAAU,CAAC,WAAA,EAAa,QAAQ,CAAA;AAAA,EACvC,OAAO,MAAA,GAAS,CAAC,SAAS,CAAA;AAAA;AAAA,EAGjB,OAAA,GAAgB;AACvB,IAAA,IAAI,CAAC,IAAA,CAAK,OAAA,CAAQ,YAAA,CAAa,MAAM,CAAA,EAAG;AACtC,MAAA,IAAA,CAAK,OAAA,CAAQ,YAAA,CAAa,MAAA,EAAQ,QAAQ,CAAA;AAAA,IAC5C;AACA,IAAA,IAAI,CAAC,IAAA,CAAK,OAAA,CAAQ,YAAA,CAAa,cAAc,CAAA,EAAG;AAC9C,MAAA,IAAA,CAAK,OAAA,CAAQ,YAAA,CAAa,cAAA,EAAgB,OAAO,CAAA;AAAA,IACnD;AAIA,IAAA,IAAI,EAAE,KAAK,OAAA,YAAmB,iBAAA,CAAA,IAAsB,CAAC,IAAA,CAAK,OAAA,CAAQ,YAAA,CAAa,UAAU,CAAA,EAAG;AAC1F,MAAA,IAAA,CAAK,OAAA,CAAQ,YAAA,CAAa,UAAA,EAAY,GAAG,CAAA;AAAA,IAC3C;AAAA,EACF;AAAA;AAAA,EAGA,MAAA,GAAe;AACb,IAAA,IAAA,CAAK,QAAA,GAAW,CAAC,IAAA,CAAK,QAAA;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,UAAU,KAAA,EAA4B;AACpC,IAAA,IAAI,IAAA,CAAK,mBAAmB,iBAAA,EAAmB;AAC/C,IAAA,IAAI,MAAM,MAAA,EAAQ;AAClB,IAAA,IAAI,KAAA,CAAM,GAAA,KAAQ,GAAA,IAAO,KAAA,CAAM,QAAQ,OAAA,EAAS;AAC9C,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,IAAA,CAAK,MAAA,EAAO;AAAA,IACd;AAAA,EACF;AAAA;AAAA,EAGA,IAAI,QAAA,GAAoB;AACtB,IAAA,OAAO,IAAA,CAAK,OAAA,CAAQ,YAAA,CAAa,cAAc,CAAA,KAAM,MAAA;AAAA,EACvD;AAAA;AAAA,EAGA,IAAI,SAAS,KAAA,EAAgB;AAC3B,IAAA,IAAA,CAAK,OAAA,CAAQ,YAAA,CAAa,cAAA,EAAgB,KAAA,GAAQ,SAAS,OAAO,CAAA;AAClE,IAAA,IAAA,CAAK,QAAA,CAAS,WAAW,EAAE,MAAA,EAAQ,EAAE,OAAA,EAAS,KAAA,IAAS,CAAA;AAAA,EACzD;AACF","file":"switch_controller.js","sourcesContent":["import { Controller } from \"@hotwired/stimulus\";\n\n/**\n * Headless, accessible switch (toggle) behavior.\n *\n * Markup contract (identifier: `stimeo--switch`):\n *   <button data-controller=\"stimeo--switch\"\n *           data-action=\"stimeo--switch#toggle keydown->stimeo--switch#onKeydown\"\n *           role=\"switch\" aria-checked=\"false\">…</button>\n *\n * Implements the WAI-ARIA APG **Switch** pattern. The controller element is the\n * switch itself; its on/off state is reflected solely through `aria-checked`.\n *\n * @remarks\n * Behavior only — the consumer owns all styling (typically keyed off the\n * `[aria-checked=\"true\"]` attribute). On a native `<button>` host, the browser\n * already synthesizes a click for Space/Enter, so {@link onKeydown} deliberately\n * does nothing there (to avoid a double toggle) and only drives non-button hosts\n * such as `<div role=\"switch\" tabindex=\"0\">`.\n *\n * Behavior provided:\n * - Click (or Space/Enter) toggles `aria-checked` between `\"true\"` and `\"false\"`.\n * - A `stimeo--switch:changed` event is dispatched on every toggle so the\n *   consumer can react (its `detail.checked` carries the new boolean state).\n */\nexport class SwitchController extends Controller<HTMLElement> {\n  static actions = [\"onKeydown\", \"toggle\"] as const;\n  static events = [\"changed\"] as const;\n\n  /** Ensures the switch exposes a role and is keyboard-reachable. */\n  override connect(): void {\n    if (!this.element.hasAttribute(\"role\")) {\n      this.element.setAttribute(\"role\", \"switch\");\n    }\n    if (!this.element.hasAttribute(\"aria-checked\")) {\n      this.element.setAttribute(\"aria-checked\", \"false\");\n    }\n    // Native <button> hosts are focusable already; a non-button host (e.g.\n    // <div role=\"switch\">) needs an explicit tabindex to be keyboard-reachable,\n    // otherwise the keyboard support below would be unreachable.\n    if (!(this.element instanceof HTMLButtonElement) && !this.element.hasAttribute(\"tabindex\")) {\n      this.element.setAttribute(\"tabindex\", \"0\");\n    }\n  }\n\n  /** Toggles the checked state. Bound via `data-action` (click). */\n  toggle(): void {\n    this.#checked = !this.#checked;\n  }\n\n  /**\n   * Activates the switch on Space/Enter for non-native hosts and prevents the\n   * default Space scroll. Bound via `data-action` (keydown). Native `<button>`\n   * hosts are skipped because the browser already turns Space/Enter into a click,\n   * which would otherwise toggle the switch twice.\n   */\n  onKeydown(event: KeyboardEvent): void {\n    if (this.element instanceof HTMLButtonElement) return;\n    if (event.repeat) return;\n    if (event.key === \" \" || event.key === \"Enter\") {\n      event.preventDefault();\n      this.toggle();\n    }\n  }\n\n  /** Whether the switch is currently on. */\n  get #checked(): boolean {\n    return this.element.getAttribute(\"aria-checked\") === \"true\";\n  }\n\n  /** Reflects the new state on `aria-checked` and notifies listeners. */\n  set #checked(value: boolean) {\n    this.element.setAttribute(\"aria-checked\", value ? \"true\" : \"false\");\n    this.dispatch(\"changed\", { detail: { checked: value } });\n  }\n}\n"]}

package/dist/controllers/tabs_controller.d.ts

@@ -0,0 +1,48 @@
+import { Controller } from '@hotwired/stimulus';
+
+/**
+ * Headless, accessible tabs behavior.
+ *
+ * Markup contract (identifier: `stimeo--tabs`):
+ *   <div data-controller="stimeo--tabs">
+ *     <div role="tablist" aria-label="…">
+ *       <button role="tab" id="tab-1" aria-controls="panel-1"
+ *               data-stimeo--tabs-target="tab"
+ *               data-action="stimeo--tabs#select
+ *                            keydown->stimeo--tabs#onKeydown">Tab 1</button>
+ *       <!-- more tabs -->
+ *     </div>
+ *     <div role="tabpanel" id="panel-1" aria-labelledby="tab-1"
+ *          data-stimeo--tabs-target="panel">…</div>
+ *     <!-- more panels -->
+ *   </div>
+ *
+ * Implements the WAI-ARIA APG **Tabs** pattern with **automatic activation**:
+ * moving focus with the arrow keys immediately selects the focused tab. Tabs are
+ * paired to panels by index (the Nth tab controls the Nth panel).
+ *
+ * @remarks
+ * Behavior only. State is exposed through `aria-selected`, roving `tabindex`
+ * (`0` for the active tab, `-1` for the rest), and the panel `hidden` attribute;
+ * the consumer owns all styling.
+ *
+ * Behavior provided:
+ * - Click a tab to select it.
+ * - `ArrowRight`/`ArrowLeft` move to and select the next/previous tab (wrapping);
+ *   `Home`/`End` select the first/last tab.
+ */
+declare class TabsController extends Controller<HTMLElement> {
+    #private;
+    static targets: string[];
+    static actions: readonly ["onKeydown", "select"];
+    readonly tabTargets: HTMLButtonElement[];
+    readonly panelTargets: HTMLElement[];
+    /** Selects the initially active tab (the pre-selected one, else the first). */
+    connect(): void;
+    /** Selects the clicked tab. Bound via `data-action` (click). */
+    select(event: Event): void;
+    /** Implements arrow/Home/End navigation with automatic activation. */
+    onKeydown(event: KeyboardEvent): void;
+}
+
+export { TabsController };

package/dist/controllers/tabs_controller.js

@@ -0,0 +1,63 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/tabs_controller.ts
+var TabsController = class extends Controller {
+  static targets = ["tab", "panel"];
+  static actions = ["onKeydown", "select"];
+  /** Selects the initially active tab (the pre-selected one, else the first). */
+  connect() {
+    const preselected = this.tabTargets.findIndex(
+      (tab) => tab.getAttribute("aria-selected") === "true"
+    );
+    this.#selectIndex(preselected === -1 ? 0 : preselected, { focus: false });
+  }
+  /** Selects the clicked tab. Bound via `data-action` (click). */
+  select(event) {
+    const index = this.tabTargets.indexOf(event.currentTarget);
+    if (index !== -1) this.#selectIndex(index, { focus: false });
+  }
+  /** Implements arrow/Home/End navigation with automatic activation. */
+  onKeydown(event) {
+    const tabs = this.tabTargets;
+    const currentIndex = tabs.indexOf(event.currentTarget);
+    if (currentIndex === -1) return;
+    let nextIndex = null;
+    switch (event.key) {
+      case "ArrowRight":
+        nextIndex = (currentIndex + 1) % tabs.length;
+        break;
+      case "ArrowLeft":
+        nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+        break;
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = tabs.length - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    this.#selectIndex(nextIndex, { focus: true });
+  }
+  /**
+   * Activates the tab/panel pair at `index`: updates `aria-selected`, the roving
+   * `tabindex`, and panel visibility. Optionally moves focus to the new tab.
+   */
+  #selectIndex(index, { focus }) {
+    this.tabTargets.forEach((tab, i) => {
+      const selected = i === index;
+      tab.setAttribute("aria-selected", selected ? "true" : "false");
+      tab.tabIndex = selected ? 0 : -1;
+    });
+    this.panelTargets.forEach((panel, i) => {
+      panel.hidden = i !== index;
+    });
+    if (focus) this.tabTargets[index]?.focus();
+  }
+};
+
+export { TabsController };
+//# sourceMappingURL=tabs_controller.js.map
+//# sourceMappingURL=tabs_controller.js.map

package/dist/controllers/tabs_controller.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/controllers/tabs_controller.ts"],"names":[],"mappings":";;;AAiCO,IAAM,cAAA,GAAN,cAA6B,UAAA,CAAwB;AAAA,EAC1D,OAAgB,OAAA,GAAU,CAAC,KAAA,EAAO,OAAO,CAAA;AAAA,EACzC,OAAO,OAAA,GAAU,CAAC,WAAA,EAAa,QAAQ,CAAA;AAAA;AAAA,EAM9B,OAAA,GAAgB;AACvB,IAAA,MAAM,WAAA,GAAc,KAAK,UAAA,CAAW,SAAA;AAAA,MAClC,CAAC,GAAA,KAAQ,GAAA,CAAI,YAAA,CAAa,eAAe,CAAA,KAAM;AAAA,KACjD;AACA,IAAA,IAAA,CAAK,YAAA,CAAa,gBAAgB,EAAA,GAAK,CAAA,GAAI,aAAa,EAAE,KAAA,EAAO,OAAO,CAAA;AAAA,EAC1E;AAAA;AAAA,EAGA,OAAO,KAAA,EAAoB;AACzB,IAAA,MAAM,KAAA,GAAQ,IAAA,CAAK,UAAA,CAAW,OAAA,CAAQ,MAAM,aAAkC,CAAA;AAC9E,IAAA,IAAI,KAAA,KAAU,IAAI,IAAA,CAAK,YAAA,CAAa,OAAO,EAAE,KAAA,EAAO,OAAO,CAAA;AAAA,EAC7D;AAAA;AAAA,EAGA,UAAU,KAAA,EAA4B;AACpC,IAAA,MAAM,OAAO,IAAA,CAAK,UAAA;AAClB,IAAA,MAAM,YAAA,GAAe,IAAA,CAAK,OAAA,CAAQ,KAAA,CAAM,aAAkC,CAAA;AAC1E,IAAA,IAAI,iBAAiB,EAAA,EAAI;AAEzB,IAAA,IAAI,SAAA,GAA2B,IAAA;AAC/B,IAAA,QAAQ,MAAM,GAAA;AAAK,MACjB,KAAK,YAAA;AACH,QAAA,SAAA,GAAA,CAAa,YAAA,GAAe,KAAK,IAAA,CAAK,MAAA;AACtC,QAAA;AAAA,MACF,KAAK,WAAA;AACH,QAAA,SAAA,GAAA,CAAa,YAAA,GAAe,CAAA,GAAI,IAAA,CAAK,MAAA,IAAU,IAAA,CAAK,MAAA;AACpD,QAAA;AAAA,MACF,KAAK,MAAA;AACH,QAAA,SAAA,GAAY,CAAA;AACZ,QAAA;AAAA,MACF,KAAK,KAAA;AACH,QAAA,SAAA,GAAY,KAAK,MAAA,GAAS,CAAA;AAC1B,QAAA;AAAA,MACF;AACE,QAAA;AAAA;AAGJ,IAAA,KAAA,CAAM,cAAA,EAAe;AACrB,IAAA,IAAA,CAAK,YAAA,CAAa,SAAA,EAAW,EAAE,KAAA,EAAO,MAAM,CAAA;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAAA,CAAa,KAAA,EAAe,EAAE,KAAA,EAAM,EAA6B;AAC/D,IAAA,IAAA,CAAK,UAAA,CAAW,OAAA,CAAQ,CAAC,GAAA,EAAK,CAAA,KAAM;AAClC,MAAA,MAAM,WAAW,CAAA,KAAM,KAAA;AACvB,MAAA,GAAA,CAAI,YAAA,CAAa,eAAA,EAAiB,QAAA,GAAW,MAAA,GAAS,OAAO,CAAA;AAC7D,MAAA,GAAA,CAAI,QAAA,GAAW,WAAW,CAAA,GAAI,EAAA;AAAA,IAChC,CAAC,CAAA;AACD,IAAA,IAAA,CAAK,YAAA,CAAa,OAAA,CAAQ,CAAC,KAAA,EAAO,CAAA,KAAM;AACtC,MAAA,KAAA,CAAM,SAAS,CAAA,KAAM,KAAA;AAAA,IACvB,CAAC,CAAA;AACD,IAAA,IAAI,KAAA,EAAO,IAAA,CAAK,UAAA,CAAW,KAAK,GAAG,KAAA,EAAM;AAAA,EAC3C;AACF","file":"tabs_controller.js","sourcesContent":["import { Controller } from \"@hotwired/stimulus\";\n\n/**\n * Headless, accessible tabs behavior.\n *\n * Markup contract (identifier: `stimeo--tabs`):\n *   <div data-controller=\"stimeo--tabs\">\n *     <div role=\"tablist\" aria-label=\"…\">\n *       <button role=\"tab\" id=\"tab-1\" aria-controls=\"panel-1\"\n *               data-stimeo--tabs-target=\"tab\"\n *               data-action=\"stimeo--tabs#select\n *                            keydown->stimeo--tabs#onKeydown\">Tab 1</button>\n *       <!-- more tabs -->\n *     </div>\n *     <div role=\"tabpanel\" id=\"panel-1\" aria-labelledby=\"tab-1\"\n *          data-stimeo--tabs-target=\"panel\">…</div>\n *     <!-- more panels -->\n *   </div>\n *\n * Implements the WAI-ARIA APG **Tabs** pattern with **automatic activation**:\n * moving focus with the arrow keys immediately selects the focused tab. Tabs are\n * paired to panels by index (the Nth tab controls the Nth panel).\n *\n * @remarks\n * Behavior only. State is exposed through `aria-selected`, roving `tabindex`\n * (`0` for the active tab, `-1` for the rest), and the panel `hidden` attribute;\n * the consumer owns all styling.\n *\n * Behavior provided:\n * - Click a tab to select it.\n * - `ArrowRight`/`ArrowLeft` move to and select the next/previous tab (wrapping);\n *   `Home`/`End` select the first/last tab.\n */\nexport class TabsController extends Controller<HTMLElement> {\n  static override targets = [\"tab\", \"panel\"];\n  static actions = [\"onKeydown\", \"select\"] as const;\n\n  declare readonly tabTargets: HTMLButtonElement[];\n  declare readonly panelTargets: HTMLElement[];\n\n  /** Selects the initially active tab (the pre-selected one, else the first). */\n  override connect(): void {\n    const preselected = this.tabTargets.findIndex(\n      (tab) => tab.getAttribute(\"aria-selected\") === \"true\",\n    );\n    this.#selectIndex(preselected === -1 ? 0 : preselected, { focus: false });\n  }\n\n  /** Selects the clicked tab. Bound via `data-action` (click). */\n  select(event: Event): void {\n    const index = this.tabTargets.indexOf(event.currentTarget as HTMLButtonElement);\n    if (index !== -1) this.#selectIndex(index, { focus: false });\n  }\n\n  /** Implements arrow/Home/End navigation with automatic activation. */\n  onKeydown(event: KeyboardEvent): void {\n    const tabs = this.tabTargets;\n    const currentIndex = tabs.indexOf(event.currentTarget as HTMLButtonElement);\n    if (currentIndex === -1) return;\n\n    let nextIndex: number | null = null;\n    switch (event.key) {\n      case \"ArrowRight\":\n        nextIndex = (currentIndex + 1) % tabs.length;\n        break;\n      case \"ArrowLeft\":\n        nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n        break;\n      case \"Home\":\n        nextIndex = 0;\n        break;\n      case \"End\":\n        nextIndex = tabs.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    event.preventDefault();\n    this.#selectIndex(nextIndex, { focus: true });\n  }\n\n  /**\n   * Activates the tab/panel pair at `index`: updates `aria-selected`, the roving\n   * `tabindex`, and panel visibility. Optionally moves focus to the new tab.\n   */\n  #selectIndex(index: number, { focus }: { focus: boolean }): void {\n    this.tabTargets.forEach((tab, i) => {\n      const selected = i === index;\n      tab.setAttribute(\"aria-selected\", selected ? \"true\" : \"false\");\n      tab.tabIndex = selected ? 0 : -1;\n    });\n    this.panelTargets.forEach((panel, i) => {\n      panel.hidden = i !== index;\n    });\n    if (focus) this.tabTargets[index]?.focus();\n  }\n}\n"]}

package/dist/controllers/textarea_autosize_controller.d.ts

@@ -0,0 +1,47 @@
+import { Controller } from '@hotwired/stimulus';
+
+/**
+ * Headless autosize behavior for a `<textarea>`: grows the element to fit its
+ * content (and clamps to `minRows` / `maxRows`, scrolling past the max). No APG
+ * pattern; supports WCAG 1.4.4 by following the text as it grows.
+ *
+ * Markup contract (identifier: `stimeo--textarea-autosize`):
+ *   <textarea
+ *     data-controller="stimeo--textarea-autosize"
+ *     data-stimeo--textarea-autosize-max-rows-value="10"></textarea>
+ *
+ * On connect and on every input it collapses the element (`height:auto`), reads
+ * `scrollHeight`, and sets an explicit pixel height clamped between `minRows` and
+ * `maxRows` (in line-height units), toggling internal scrolling and the
+ * `data-at-max-rows` hook at the cap. Height-only changes preserve focus and caret.
+ *
+ * @remarks
+ * Behavior only — the height is written to the element's own inline style, never a
+ * CSS class. State lives on the element (no module-scope state), so `connect()`
+ * re-measures after a Turbo navigation / morph. The input listener is removed on
+ * `disconnect()` (Turbo navigation included). Measurement is synchronous, so there
+ * is no pending animation frame to tear down.
+ */
+declare class TextareaAutosizeController extends Controller<HTMLTextAreaElement> {
+    #private;
+    static values: {
+        minRows: {
+            type: NumberConstructor;
+            default: number;
+        };
+        maxRows: {
+            type: NumberConstructor;
+            default: number;
+        };
+    };
+    static actions: readonly ["resize"];
+    static events: readonly ["resize"];
+    minRowsValue: number;
+    maxRowsValue: number;
+    connect(): void;
+    disconnect(): void;
+    /** Re-measures the content and applies the clamped height. */
+    resize(): void;
+}
+
+export { TextareaAutosizeController };

package/dist/controllers/textarea_autosize_controller.js

@@ -0,0 +1,72 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/textarea_autosize_controller.ts
+function px(value) {
+  const n = Number.parseFloat(value);
+  return Number.isNaN(n) ? 0 : n;
+}
+var TextareaAutosizeController = class extends Controller {
+  static values = {
+    minRows: { type: Number, default: 1 },
+    maxRows: { type: Number, default: 0 }
+  };
+  static actions = ["resize"];
+  static events = ["resize"];
+  #lastHeight = -1;
+  #onInput = () => {
+    this.resize();
+  };
+  connect() {
+    this.element.addEventListener("input", this.#onInput);
+    this.resize();
+  }
+  disconnect() {
+    this.element.removeEventListener("input", this.#onInput);
+  }
+  /** Re-measures the content and applies the clamped height. */
+  resize() {
+    const el = this.element;
+    const style = window.getComputedStyle(el);
+    const lineHeight = this.#lineHeight(style);
+    const paddingV = px(style.paddingTop) + px(style.paddingBottom);
+    const borderV = px(style.borderTopWidth) + px(style.borderBottomWidth);
+    const borderBox = style.boxSizing === "border-box";
+    el.style.height = "auto";
+    const contentHeight = Math.max(0, el.scrollHeight - paddingV);
+    const rows = Math.max(1, Math.round(contentHeight / lineHeight));
+    let targetContent = Math.max(contentHeight, this.minRowsValue * lineHeight);
+    let atMax = false;
+    if (this.maxRowsValue > 0) {
+      const maxContent = this.maxRowsValue * lineHeight;
+      if (targetContent > maxContent) {
+        targetContent = maxContent;
+        atMax = true;
+      }
+    }
+    const boxExtra = borderBox ? paddingV + borderV : 0;
+    const height = Math.round(targetContent + boxExtra);
+    el.style.height = `${height}px`;
+    el.style.overflowY = atMax ? "auto" : "hidden";
+    if (atMax) {
+      el.setAttribute("data-at-max-rows", "true");
+    } else {
+      el.removeAttribute("data-at-max-rows");
+    }
+    el.style.setProperty("--stimeo-textarea-rows", String(rows));
+    if (height !== this.#lastHeight) {
+      this.#lastHeight = height;
+      this.dispatch("resize", { detail: { height, rows } });
+    }
+  }
+  /** Resolved line height, falling back to ~1.2× font-size when `normal`. */
+  #lineHeight(style) {
+    const lh = px(style.lineHeight);
+    if (lh > 0) return lh;
+    const fontSize = px(style.fontSize);
+    return fontSize > 0 ? fontSize * 1.2 : 16;
+  }
+};
+
+export { TextareaAutosizeController };
+//# sourceMappingURL=textarea_autosize_controller.js.map
+//# sourceMappingURL=textarea_autosize_controller.js.map

package/dist/controllers/textarea_autosize_controller.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/controllers/textarea_autosize_controller.ts"],"names":[],"mappings":";;;AAGA,SAAS,GAAG,KAAA,EAAuB;AACjC,EAAA,MAAM,CAAA,GAAI,MAAA,CAAO,UAAA,CAAW,KAAK,CAAA;AACjC,EAAA,OAAO,MAAA,CAAO,KAAA,CAAM,CAAC,CAAA,GAAI,CAAA,GAAI,CAAA;AAC/B;AAwBO,IAAM,0BAAA,GAAN,cAAyC,UAAA,CAAgC;AAAA,EAC9E,OAAgB,MAAA,GAAS;AAAA,IACvB,OAAA,EAAS,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,CAAA,EAAE;AAAA,IACpC,OAAA,EAAS,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,CAAA;AAAE,GACtC;AAAA,EACA,OAAO,OAAA,GAAU,CAAC,QAAQ,CAAA;AAAA,EAC1B,OAAO,MAAA,GAAS,CAAC,QAAQ,CAAA;AAAA,EAKzB,WAAA,GAAc,EAAA;AAAA,EAEL,WAAW,MAAY;AAC9B,IAAA,IAAA,CAAK,MAAA,EAAO;AAAA,EACd,CAAA;AAAA,EAES,OAAA,GAAgB;AACvB,IAAA,IAAA,CAAK,OAAA,CAAQ,gBAAA,CAAiB,OAAA,EAAS,IAAA,CAAK,QAAQ,CAAA;AACpD,IAAA,IAAA,CAAK,MAAA,EAAO;AAAA,EACd;AAAA,EAES,UAAA,GAAmB;AAC1B,IAAA,IAAA,CAAK,OAAA,CAAQ,mBAAA,CAAoB,OAAA,EAAS,IAAA,CAAK,QAAQ,CAAA;AAAA,EACzD;AAAA;AAAA,EAGA,MAAA,GAAe;AACb,IAAA,MAAM,KAAK,IAAA,CAAK,OAAA;AAChB,IAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,gBAAA,CAAiB,EAAE,CAAA;AACxC,IAAA,MAAM,UAAA,GAAa,IAAA,CAAK,WAAA,CAAY,KAAK,CAAA;AACzC,IAAA,MAAM,WAAW,EAAA,CAAG,KAAA,CAAM,UAAU,CAAA,GAAI,EAAA,CAAG,MAAM,aAAa,CAAA;AAC9D,IAAA,MAAM,UAAU,EAAA,CAAG,KAAA,CAAM,cAAc,CAAA,GAAI,EAAA,CAAG,MAAM,iBAAiB,CAAA;AACrE,IAAA,MAAM,SAAA,GAAY,MAAM,SAAA,KAAc,YAAA;AAGtC,IAAA,EAAA,CAAG,MAAM,MAAA,GAAS,MAAA;AAClB,IAAA,MAAM,gBAAgB,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,EAAA,CAAG,eAAe,QAAQ,CAAA;AAC5D,IAAA,MAAM,IAAA,GAAO,KAAK,GAAA,CAAI,CAAA,EAAG,KAAK,KAAA,CAAM,aAAA,GAAgB,UAAU,CAAC,CAAA;AAE/D,IAAA,IAAI,gBAAgB,IAAA,CAAK,GAAA,CAAI,aAAA,EAAe,IAAA,CAAK,eAAe,UAAU,CAAA;AAC1E,IAAA,IAAI,KAAA,GAAQ,KAAA;AACZ,IAAA,IAAI,IAAA,CAAK,eAAe,CAAA,EAAG;AACzB,MAAA,MAAM,UAAA,GAAa,KAAK,YAAA,GAAe,UAAA;AACvC,MAAA,IAAI,gBAAgB,UAAA,EAAY;AAC9B,QAAA,aAAA,GAAgB,UAAA;AAChB,QAAA,KAAA,GAAQ,IAAA;AAAA,MACV;AAAA,IACF;AAEA,IAAA,MAAM,QAAA,GAAW,SAAA,GAAY,QAAA,GAAW,OAAA,GAAU,CAAA;AAClD,IAAA,MAAM,MAAA,GAAS,IAAA,CAAK,KAAA,CAAM,aAAA,GAAgB,QAAQ,CAAA;AAClD,IAAA,EAAA,CAAG,KAAA,CAAM,MAAA,GAAS,CAAA,EAAG,MAAM,CAAA,EAAA,CAAA;AAC3B,IAAA,EAAA,CAAG,KAAA,CAAM,SAAA,GAAY,KAAA,GAAQ,MAAA,GAAS,QAAA;AAEtC,IAAA,IAAI,KAAA,EAAO;AACT,MAAA,EAAA,CAAG,YAAA,CAAa,oBAAoB,MAAM,CAAA;AAAA,IAC5C,CAAA,MAAO;AACL,MAAA,EAAA,CAAG,gBAAgB,kBAAkB,CAAA;AAAA,IACvC;AACA,IAAA,EAAA,CAAG,KAAA,CAAM,WAAA,CAAY,wBAAA,EAA0B,MAAA,CAAO,IAAI,CAAC,CAAA;AAE3D,IAAA,IAAI,MAAA,KAAW,KAAK,WAAA,EAAa;AAC/B,MAAA,IAAA,CAAK,WAAA,GAAc,MAAA;AACnB,MAAA,IAAA,CAAK,QAAA,CAAS,UAAU,EAAE,MAAA,EAAQ,EAAE,MAAA,EAAQ,IAAA,IAAQ,CAAA;AAAA,IACtD;AAAA,EACF;AAAA;AAAA,EAGA,YAAY,KAAA,EAAoC;AAC9C,IAAA,MAAM,EAAA,GAAK,EAAA,CAAG,KAAA,CAAM,UAAU,CAAA;AAC9B,IAAA,IAAI,EAAA,GAAK,GAAG,OAAO,EAAA;AACnB,IAAA,MAAM,QAAA,GAAW,EAAA,CAAG,KAAA,CAAM,QAAQ,CAAA;AAClC,IAAA,OAAO,QAAA,GAAW,CAAA,GAAI,QAAA,GAAW,GAAA,GAAM,EAAA;AAAA,EACzC;AACF","file":"textarea_autosize_controller.js","sourcesContent":["import { Controller } from \"@hotwired/stimulus\";\n\n/** Parses a CSS pixel length, defaulting to 0 for `auto` / empty / `normal`. */\nfunction px(value: string): number {\n  const n = Number.parseFloat(value);\n  return Number.isNaN(n) ? 0 : n;\n}\n\n/**\n * Headless autosize behavior for a `<textarea>`: grows the element to fit its\n * content (and clamps to `minRows` / `maxRows`, scrolling past the max). No APG\n * pattern; supports WCAG 1.4.4 by following the text as it grows.\n *\n * Markup contract (identifier: `stimeo--textarea-autosize`):\n *   <textarea\n *     data-controller=\"stimeo--textarea-autosize\"\n *     data-stimeo--textarea-autosize-max-rows-value=\"10\"></textarea>\n *\n * On connect and on every input it collapses the element (`height:auto`), reads\n * `scrollHeight`, and sets an explicit pixel height clamped between `minRows` and\n * `maxRows` (in line-height units), toggling internal scrolling and the\n * `data-at-max-rows` hook at the cap. Height-only changes preserve focus and caret.\n *\n * @remarks\n * Behavior only — the height is written to the element's own inline style, never a\n * CSS class. State lives on the element (no module-scope state), so `connect()`\n * re-measures after a Turbo navigation / morph. The input listener is removed on\n * `disconnect()` (Turbo navigation included). Measurement is synchronous, so there\n * is no pending animation frame to tear down.\n */\nexport class TextareaAutosizeController extends Controller<HTMLTextAreaElement> {\n  static override values = {\n    minRows: { type: Number, default: 1 },\n    maxRows: { type: Number, default: 0 },\n  };\n  static actions = [\"resize\"] as const;\n  static events = [\"resize\"] as const;\n\n  declare minRowsValue: number;\n  declare maxRowsValue: number;\n\n  #lastHeight = -1;\n\n  readonly #onInput = (): void => {\n    this.resize();\n  };\n\n  override connect(): void {\n    this.element.addEventListener(\"input\", this.#onInput);\n    this.resize();\n  }\n\n  override disconnect(): void {\n    this.element.removeEventListener(\"input\", this.#onInput);\n  }\n\n  /** Re-measures the content and applies the clamped height. */\n  resize(): void {\n    const el = this.element;\n    const style = window.getComputedStyle(el);\n    const lineHeight = this.#lineHeight(style);\n    const paddingV = px(style.paddingTop) + px(style.paddingBottom);\n    const borderV = px(style.borderTopWidth) + px(style.borderBottomWidth);\n    const borderBox = style.boxSizing === \"border-box\";\n\n    // Collapse first so scrollHeight reflects the content, not the prior height.\n    el.style.height = \"auto\";\n    const contentHeight = Math.max(0, el.scrollHeight - paddingV);\n    const rows = Math.max(1, Math.round(contentHeight / lineHeight));\n\n    let targetContent = Math.max(contentHeight, this.minRowsValue * lineHeight);\n    let atMax = false;\n    if (this.maxRowsValue > 0) {\n      const maxContent = this.maxRowsValue * lineHeight;\n      if (targetContent > maxContent) {\n        targetContent = maxContent;\n        atMax = true;\n      }\n    }\n\n    const boxExtra = borderBox ? paddingV + borderV : 0;\n    const height = Math.round(targetContent + boxExtra);\n    el.style.height = `${height}px`;\n    el.style.overflowY = atMax ? \"auto\" : \"hidden\";\n\n    if (atMax) {\n      el.setAttribute(\"data-at-max-rows\", \"true\");\n    } else {\n      el.removeAttribute(\"data-at-max-rows\");\n    }\n    el.style.setProperty(\"--stimeo-textarea-rows\", String(rows));\n\n    if (height !== this.#lastHeight) {\n      this.#lastHeight = height;\n      this.dispatch(\"resize\", { detail: { height, rows } });\n    }\n  }\n\n  /** Resolved line height, falling back to ~1.2× font-size when `normal`. */\n  #lineHeight(style: CSSStyleDeclaration): number {\n    const lh = px(style.lineHeight);\n    if (lh > 0) return lh;\n    const fontSize = px(style.fontSize);\n    return fontSize > 0 ? fontSize * 1.2 : 16;\n  }\n}\n"]}

package/dist/controllers/theme_controller.d.ts

@@ -0,0 +1,70 @@
+import { Controller } from '@hotwired/stimulus';
+
+/**
+ * Headless **theme / color-scheme toggle** — persists a light/dark/system choice to
+ * `localStorage`, follows the OS setting while in `system`, and reflects the
+ * effective theme onto the root for the consumer's CSS. Ships no colors; only state
+ * hooks.
+ *
+ * Two markup contracts (identifier: `stimeo--theme`):
+ *
+ * Canonical 3-value radiogroup (use this when `system` is offered):
+ *   <div data-controller="stimeo--theme" data-stimeo--theme-mode-value="system"
+ *        role="radiogroup" aria-label="Theme">
+ *     <button data-stimeo--theme-target="option" role="radio"
+ *             data-action="click->stimeo--theme#set"
+ *             data-stimeo--theme-mode-param="light">Light</button>
+ *     <button data-stimeo--theme-target="option" role="radio"
+ *             data-action="click->stimeo--theme#set"
+ *             data-stimeo--theme-mode-param="dark">Dark</button>
+ *     <button data-stimeo--theme-target="option" role="radio"
+ *             data-action="click->stimeo--theme#set"
+ *             data-stimeo--theme-mode-param="system">System</button>
+ *   </div>
+ *
+ * Auxiliary 2-value toggle (light↔dark only — `system` is not representable):
+ *   <button data-controller="stimeo--theme" data-action="click->stimeo--theme#toggle"
+ *           aria-pressed="false">Dark mode</button>
+ *
+ * @remarks
+ * Behavior only — the actual palette is the consumer's CSS keyed off `data-theme`
+ * on the root. It applies `data-theme` (the *resolved* light/dark) and a matching
+ * `color-scheme` to the `target` element (`<html>` by default), keeps the radiogroup
+ * `aria-checked` + roving tabindex (APG radio) or the single button's `aria-pressed`
+ * in sync, and never moves focus. The `prefers-color-scheme` listener is attached on
+ * `connect()` and removed on `disconnect()` (Turbo included). FOUC avoidance for the
+ * very first paint is an inline `<head>` snippet (documented), not this controller.
+ */
+declare class ThemeController extends Controller<HTMLElement> {
+    #private;
+    static targets: string[];
+    static values: {
+        mode: {
+            type: StringConstructor;
+            default: string;
+        };
+        storageKey: {
+            type: StringConstructor;
+            default: string;
+        };
+        target: {
+            type: StringConstructor;
+            default: string;
+        };
+    };
+    static actions: readonly ["set", "toggle"];
+    static events: readonly ["change"];
+    readonly optionTargets: HTMLElement[];
+    readonly hasOptionTarget: boolean;
+    modeValue: string;
+    storageKeyValue: string;
+    targetValue: string;
+    connect(): void;
+    disconnect(): void;
+    /** Selects an explicit mode from the `mode` action param (radiogroup option). */
+    set(event: Event): void;
+    /** Toggles light↔dark for the 2-value single-button contract. */
+    toggle(): void;
+}
+
+export { ThemeController };

package/dist/controllers/theme_controller.js

@@ -0,0 +1,154 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/theme_controller.ts
+var MODES = ["light", "dark", "system"];
+var isMode = (value) => typeof value === "string" && MODES.includes(value);
+var ThemeController = class extends Controller {
+  static targets = ["option"];
+  static values = {
+    mode: { type: String, default: "system" },
+    storageKey: { type: String, default: "stimeo-theme" },
+    target: { type: String, default: "html" }
+  };
+  static actions = ["set", "toggle"];
+  static events = ["change"];
+  /** The OS dark-mode query, watched so `system` tracks live changes. */
+  #media = null;
+  /** Re-resolves while in `system` mode when the OS preference flips. */
+  #onMediaChange = () => {
+    if (this.modeValue === "system") {
+      this.#applyTheme();
+      this.#syncControls();
+      this.#dispatchChange();
+    }
+  };
+  /** Arrow/Home/End navigation for the radiogroup (APG radio pattern). */
+  #onKeydown = (event) => {
+    const options = this.optionTargets;
+    if (options.length === 0) return;
+    const target = event.target;
+    const current = options.indexOf(target);
+    if (current === -1) return;
+    const last = options.length - 1;
+    let next = current;
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowRight":
+        next = current === last ? 0 : current + 1;
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        next = current === 0 ? last : current - 1;
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = last;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    const option = options[next];
+    if (!option) return;
+    option.focus();
+    this.#setMode(this.#optionMode(option));
+  };
+  connect() {
+    const stored = this.#readStored();
+    if (stored) this.modeValue = stored;
+    this.#media = window.matchMedia?.("(prefers-color-scheme: dark)") ?? null;
+    this.#media?.addEventListener("change", this.#onMediaChange);
+    if (this.hasOptionTarget) this.element.addEventListener("keydown", this.#onKeydown);
+    this.#applyTheme();
+    this.#syncControls();
+  }
+  disconnect() {
+    this.#media?.removeEventListener("change", this.#onMediaChange);
+    this.element.removeEventListener("keydown", this.#onKeydown);
+  }
+  /** Selects an explicit mode from the `mode` action param (radiogroup option). */
+  set(event) {
+    const mode = event.params?.mode;
+    if (isMode(mode)) this.#setMode(mode);
+  }
+  /** Toggles light↔dark for the 2-value single-button contract. */
+  toggle() {
+    this.#setMode(this.#resolved() === "dark" ? "light" : "dark");
+  }
+  /** Central mode change: persist, apply to the root, resync controls, announce. */
+  #setMode(mode) {
+    this.modeValue = mode;
+    this.#writeStored(mode);
+    this.#applyTheme();
+    this.#syncControls();
+    this.#dispatchChange();
+  }
+  /** Writes `data-theme` + `color-scheme` (the resolved theme) onto the target. */
+  #applyTheme() {
+    const root = this.#targetElement();
+    if (!root) return;
+    const resolved = this.#resolved();
+    root.setAttribute("data-theme", resolved);
+    root.style.setProperty("color-scheme", resolved);
+  }
+  /** Keeps the radiogroup (aria-checked + roving tabindex) or toggle (aria-pressed) in sync. */
+  #syncControls() {
+    const options = this.optionTargets;
+    if (options.length > 0) {
+      let hasTabbable = false;
+      for (const option of options) {
+        const selected = this.#optionMode(option) === this.modeValue;
+        option.setAttribute("aria-checked", String(selected));
+        option.tabIndex = selected ? 0 : -1;
+        hasTabbable ||= selected;
+      }
+      const first = options[0];
+      if (!hasTabbable && first) first.tabIndex = 0;
+      return;
+    }
+    this.element.setAttribute("aria-pressed", String(this.#resolved() === "dark"));
+  }
+  /** Emits `change` with the selected mode and the resolved theme. */
+  #dispatchChange() {
+    this.dispatch("change", { detail: { mode: this.modeValue, resolved: this.#resolved() } });
+  }
+  /** The effective theme: the OS preference when `system`, else the mode itself. */
+  #resolved() {
+    if (this.modeValue === "dark") return "dark";
+    if (this.modeValue === "light") return "light";
+    return this.#media?.matches ? "dark" : "light";
+  }
+  /** Reads an option's mode from its action param attribute. */
+  #optionMode(option) {
+    const mode = option.getAttribute("data-stimeo--theme-mode-param");
+    return isMode(mode) ? mode : "system";
+  }
+  /** Resolves the state-hook target (`<html>` by default). */
+  #targetElement() {
+    if (this.targetValue === "html" || this.targetValue === ":root")
+      return document.documentElement;
+    return document.querySelector(this.targetValue);
+  }
+  /** Reads a persisted, validated mode from `localStorage` (null when absent/blocked). */
+  #readStored() {
+    try {
+      const value = window.localStorage.getItem(this.storageKeyValue);
+      return isMode(value) ? value : null;
+    } catch {
+      return null;
+    }
+  }
+  /** Persists the mode, swallowing storage errors (private mode / quota). */
+  #writeStored(mode) {
+    try {
+      window.localStorage.setItem(this.storageKeyValue, mode);
+    } catch {
+    }
+  }
+};
+
+export { ThemeController };
+//# sourceMappingURL=theme_controller.js.map
+//# sourceMappingURL=theme_controller.js.map

package/dist/controllers/theme_controller.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/controllers/theme_controller.ts"],"names":[],"mappings":"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","file":"theme_controller.js","sourcesContent":["import { Controller } from \"@hotwired/stimulus\";\n\n/** The three selectable modes; `system` follows the OS `prefers-color-scheme`. */\ntype ThemeMode = \"light\" | \"dark\" | \"system\";\n/** The two effective (resolved) themes applied to the root. */\ntype ResolvedTheme = \"light\" | \"dark\";\n\nconst MODES: readonly ThemeMode[] = [\"light\", \"dark\", \"system\"];\nconst isMode = (value: unknown): value is ThemeMode =>\n  typeof value === \"string\" && (MODES as readonly string[]).includes(value);\n\n/**\n * Headless **theme / color-scheme toggle** — persists a light/dark/system choice to\n * `localStorage`, follows the OS setting while in `system`, and reflects the\n * effective theme onto the root for the consumer's CSS. Ships no colors; only state\n * hooks.\n *\n * Two markup contracts (identifier: `stimeo--theme`):\n *\n * Canonical 3-value radiogroup (use this when `system` is offered):\n *   <div data-controller=\"stimeo--theme\" data-stimeo--theme-mode-value=\"system\"\n *        role=\"radiogroup\" aria-label=\"Theme\">\n *     <button data-stimeo--theme-target=\"option\" role=\"radio\"\n *             data-action=\"click->stimeo--theme#set\"\n *             data-stimeo--theme-mode-param=\"light\">Light</button>\n *     <button data-stimeo--theme-target=\"option\" role=\"radio\"\n *             data-action=\"click->stimeo--theme#set\"\n *             data-stimeo--theme-mode-param=\"dark\">Dark</button>\n *     <button data-stimeo--theme-target=\"option\" role=\"radio\"\n *             data-action=\"click->stimeo--theme#set\"\n *             data-stimeo--theme-mode-param=\"system\">System</button>\n *   </div>\n *\n * Auxiliary 2-value toggle (light↔dark only — `system` is not representable):\n *   <button data-controller=\"stimeo--theme\" data-action=\"click->stimeo--theme#toggle\"\n *           aria-pressed=\"false\">Dark mode</button>\n *\n * @remarks\n * Behavior only — the actual palette is the consumer's CSS keyed off `data-theme`\n * on the root. It applies `data-theme` (the *resolved* light/dark) and a matching\n * `color-scheme` to the `target` element (`<html>` by default), keeps the radiogroup\n * `aria-checked` + roving tabindex (APG radio) or the single button's `aria-pressed`\n * in sync, and never moves focus. The `prefers-color-scheme` listener is attached on\n * `connect()` and removed on `disconnect()` (Turbo included). FOUC avoidance for the\n * very first paint is an inline `<head>` snippet (documented), not this controller.\n */\nexport class ThemeController extends Controller<HTMLElement> {\n  static override targets = [\"option\"];\n  static override values = {\n    mode: { type: String, default: \"system\" },\n    storageKey: { type: String, default: \"stimeo-theme\" },\n    target: { type: String, default: \"html\" },\n  };\n  static actions = [\"set\", \"toggle\"] as const;\n  static events = [\"change\"] as const;\n\n  declare readonly optionTargets: HTMLElement[];\n  declare readonly hasOptionTarget: boolean;\n\n  declare modeValue: string;\n  declare storageKeyValue: string;\n  declare targetValue: string;\n\n  /** The OS dark-mode query, watched so `system` tracks live changes. */\n  #media: MediaQueryList | null = null;\n\n  /** Re-resolves while in `system` mode when the OS preference flips. */\n  readonly #onMediaChange = (): void => {\n    if (this.modeValue === \"system\") {\n      this.#applyTheme();\n      // Re-sync controls too: a 2-value toggle's `aria-pressed` reflects the\n      // *resolved* theme, so it must follow the OS flip — not only `data-theme`.\n      this.#syncControls();\n      this.#dispatchChange();\n    }\n  };\n\n  /** Arrow/Home/End navigation for the radiogroup (APG radio pattern). */\n  readonly #onKeydown = (event: KeyboardEvent): void => {\n    // Resolved once per keydown: every `optionTargets` access re-queries the scope.\n    const options = this.optionTargets;\n    if (options.length === 0) return;\n    const target = event.target as HTMLElement | null;\n    const current = options.indexOf(target as HTMLElement);\n    if (current === -1) return;\n\n    const last = options.length - 1;\n    let next = current;\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        next = current === last ? 0 : current + 1;\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        next = current === 0 ? last : current - 1;\n        break;\n      case \"Home\":\n        next = 0;\n        break;\n      case \"End\":\n        next = last;\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    const option = options[next];\n    if (!option) return;\n    option.focus();\n    this.#setMode(this.#optionMode(option));\n  };\n\n  override connect(): void {\n    const stored = this.#readStored();\n    if (stored) this.modeValue = stored;\n\n    this.#media = window.matchMedia?.(\"(prefers-color-scheme: dark)\") ?? null;\n    this.#media?.addEventListener(\"change\", this.#onMediaChange);\n    if (this.hasOptionTarget) this.element.addEventListener(\"keydown\", this.#onKeydown);\n\n    this.#applyTheme();\n    this.#syncControls();\n  }\n\n  override disconnect(): void {\n    this.#media?.removeEventListener(\"change\", this.#onMediaChange);\n    this.element.removeEventListener(\"keydown\", this.#onKeydown);\n  }\n\n  /** Selects an explicit mode from the `mode` action param (radiogroup option). */\n  set(event: Event): void {\n    const mode = (event as { params?: Record<string, unknown> }).params?.mode;\n    if (isMode(mode)) this.#setMode(mode);\n  }\n\n  /** Toggles light↔dark for the 2-value single-button contract. */\n  toggle(): void {\n    this.#setMode(this.#resolved() === \"dark\" ? \"light\" : \"dark\");\n  }\n\n  /** Central mode change: persist, apply to the root, resync controls, announce. */\n  #setMode(mode: ThemeMode): void {\n    this.modeValue = mode;\n    this.#writeStored(mode);\n    this.#applyTheme();\n    this.#syncControls();\n    this.#dispatchChange();\n  }\n\n  /** Writes `data-theme` + `color-scheme` (the resolved theme) onto the target. */\n  #applyTheme(): void {\n    const root = this.#targetElement();\n    if (!root) return;\n    const resolved = this.#resolved();\n    root.setAttribute(\"data-theme\", resolved);\n    root.style.setProperty(\"color-scheme\", resolved);\n  }\n\n  /** Keeps the radiogroup (aria-checked + roving tabindex) or toggle (aria-pressed) in sync. */\n  #syncControls(): void {\n    const options = this.optionTargets;\n    if (options.length > 0) {\n      let hasTabbable = false;\n      for (const option of options) {\n        const selected = this.#optionMode(option) === this.modeValue;\n        option.setAttribute(\"aria-checked\", String(selected));\n        option.tabIndex = selected ? 0 : -1;\n        hasTabbable ||= selected;\n      }\n      // APG: a radiogroup with no selection keeps its first radio tabbable.\n      const first = options[0];\n      if (!hasTabbable && first) first.tabIndex = 0;\n      return;\n    }\n    this.element.setAttribute(\"aria-pressed\", String(this.#resolved() === \"dark\"));\n  }\n\n  /** Emits `change` with the selected mode and the resolved theme. */\n  #dispatchChange(): void {\n    this.dispatch(\"change\", { detail: { mode: this.modeValue, resolved: this.#resolved() } });\n  }\n\n  /** The effective theme: the OS preference when `system`, else the mode itself. */\n  #resolved(): ResolvedTheme {\n    if (this.modeValue === \"dark\") return \"dark\";\n    if (this.modeValue === \"light\") return \"light\";\n    return this.#media?.matches ? \"dark\" : \"light\";\n  }\n\n  /** Reads an option's mode from its action param attribute. */\n  #optionMode(option: HTMLElement): ThemeMode {\n    const mode = option.getAttribute(\"data-stimeo--theme-mode-param\");\n    return isMode(mode) ? mode : \"system\";\n  }\n\n  /** Resolves the state-hook target (`<html>` by default). */\n  #targetElement(): HTMLElement | null {\n    if (this.targetValue === \"html\" || this.targetValue === \":root\")\n      return document.documentElement;\n    return document.querySelector<HTMLElement>(this.targetValue);\n  }\n\n  /** Reads a persisted, validated mode from `localStorage` (null when absent/blocked). */\n  #readStored(): ThemeMode | null {\n    try {\n      const value = window.localStorage.getItem(this.storageKeyValue);\n      return isMode(value) ? value : null;\n    } catch {\n      return null;\n    }\n  }\n\n  /** Persists the mode, swallowing storage errors (private mode / quota). */\n  #writeStored(mode: ThemeMode): void {\n    try {\n      window.localStorage.setItem(this.storageKeyValue, mode);\n    } catch {\n      /* storage unavailable — the in-DOM state hooks still apply this session */\n    }\n  }\n}\n"]}

package/dist/controllers/toast_controller.d.ts

@@ -0,0 +1,123 @@
+import { Controller } from '@hotwired/stimulus';
+
+/**
+ * Headless, highly accessible toast notification behavior.
+ *
+ * Markup contract (identifier: `stimeo--toast`):
+ *   <div data-controller="stimeo--toast"
+ *        data-stimeo--toast-duration-value="5000"
+ *        data-stimeo--toast-max-value="3">
+ *     <!-- Attribute-only trigger: no hand-written JS required. -->
+ *     <button data-action="click->stimeo--toast#show"
+ *             data-stimeo--toast-body-param="Saved"
+ *             data-stimeo--toast-type-param="status">Show</button>
+ *     <!-- The live region is a descendant; the controller element only needs
+ *          to enclose both the trigger(s) and the list/template targets. -->
+ *     <div role="region" aria-label="Notifications">
+ *       <ol data-stimeo--toast-target="list"></ol>
+ *       <template data-stimeo--toast-target="template">
+ *         <li role="status" data-stimeo--toast-target="item"
+ *             data-action="mouseenter->stimeo--toast#pause
+ *                          mouseleave->stimeo--toast#resume
+ *                          focusin->stimeo--toast#pause
+ *                          focusout->stimeo--toast#resume
+ *                          keydown->stimeo--toast#onKeydown"
+ *             tabindex="0">
+ *           <span data-toast-slot="body"></span>
+ *           <button type="button" data-action="stimeo--toast#dismiss">Dismiss</button>
+ *         </li>
+ *       </template>
+ *     </div>
+ *   </div>
+ *
+ * Implements WAI-ARIA live region status/alert announcements, limits simultaneous
+ * elements, and pauses dismiss timeouts on hover or focus to comply with WCAG 2.2.1.
+ *
+ * @remarks
+ * Behavior only. The controller handles state updates via `data-state` and lifecycle events
+ * while leaving visual styling completely to the client's CSS transitions.
+ */
+declare class ToastController extends Controller<HTMLElement> {
+    #private;
+    static targets: string[];
+    static values: {
+        duration: {
+            type: NumberConstructor;
+            default: number;
+        };
+        max: {
+            type: NumberConstructor;
+            default: number;
+        };
+    };
+    static actions: readonly ["dismiss", "onKeydown", "pause", "resume", "show"];
+    static events: readonly ["dismiss", "show"];
+    readonly listTarget: HTMLElement;
+    readonly templateTarget: HTMLTemplateElement;
+    readonly itemTargets: HTMLElement[];
+    readonly hasListTarget: boolean;
+    readonly hasTemplateTarget: boolean;
+    durationValue: number;
+    maxValue: number;
+    connect(): void;
+    disconnect(): void;
+    durationValueChanged(): void;
+    maxValueChanged(): void;
+    /**
+     * Stimulus lifecycle callback triggered automatically when a new item target
+     * enters the DOM. Perfectly handles dynamic client-side injections and server-side
+     * Turbo Stream appends alike.
+     */
+    itemTargetConnected(element: HTMLElement): void;
+    /** Clears any active timer when a toast is removed from the DOM. */
+    itemTargetDisconnected(element: HTMLElement): void;
+    /**
+     * Shows a new toast. Accepts its content from either a Stimulus action param
+     * (attribute-only trigger) or a programmatic `show` CustomEvent `detail`
+     * (remote / Turbo trigger); the action param wins when both are present.
+     *
+     *   <button data-action="click->stimeo--toast#show"
+     *           data-stimeo--toast-body-param="Saved"
+     *           data-stimeo--toast-type-param="status">Show</button>
+     *
+     *   element.dispatchEvent(new CustomEvent("show", { detail: { body, type } }))
+     *
+     * Clones the template slot, interpolates the body text, and appends to the list.
+     */
+    show(event: Event): void;
+    /** Dismisses the toast that contained the trigger. */
+    dismiss(event: Event): void;
+    /** Dismisses the focused toast when Escape is pressed. */
+    onKeydown(event: KeyboardEvent): void;
+    /**
+     * Pauses the auto-dismiss timer on mouse entry or keyboard focus.
+     *
+     * Hover and focus are tracked as independent reasons: the timer is only
+     * snapshotted on the first active reason, and only resumed once *every*
+     * reason has been released (see {@link resume}). This keeps a toast paused
+     * while it is still hovered *or* focused, per WCAG 2.2.1.
+     */
+    pause(event: Event): void;
+    /** Resumes the auto-dismiss timer once both hover and focus have been released. */
+    resume(event: Event): void;
+    /**
+     * Removes the oldest toasts when the list exceeds `maxValue`.
+     *
+     * Public (not `#private`) as a deterministic test seam: enforcement normally
+     * runs from `itemTargetConnected`, a Stimulus callback that fires via a
+     * MutationObserver — which happy-dom does not reliably deliver — so the unit
+     * tests invoke it directly. It is therefore listed in the contract guard's
+     * NON_ACTION_ALLOWLIST (it is not a user-wired action).
+     */
+    enforceMaxLimit(): void;
+}
+/**
+ * Converts the first value of a CSS `transition-duration` string to milliseconds.
+ * Browsers normalize computed `<time>` values to seconds (e.g. `0.2s`), but parse
+ * `ms` defensively so a consumer's `ms` transition is not delayed 1000x.
+ *
+ * Pure (no `this`); exported so it can be unit-tested directly.
+ */
+declare function cssTimeToMs(value: string): number;
+
+export { ToastController, cssTimeToMs };