stimeo-ui 0.2.0 → 0.2.1

package/dist/controllers/sticky_observer_controller.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/intersection_watcher.ts","../../src/controllers/sticky_observer_controller.ts"],"names":[],"mappings":"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","file":"sticky_observer_controller.js","sourcesContent":["/**\n * Shared `IntersectionObserver` plumbing for Stimeo's scroll-triggered\n * controllers (`intersection`, `scrollspy`, `sticky-observer`, `lazy-frame`).\n *\n * It centralizes the `IntersectionObserver` support guard, root resolution from\n * a selector, observer creation/teardown, the **active guard** (the browser may\n * flush a final queued callback batch right after `disconnect()`, and a\n * detached controller must not mutate possibly-cached DOM), and the\n * unobserve→observe **re-arm** that re-delivers the current state even when the\n * target never leaves the viewport.\n *\n * Like {@link RovingTabindex} and `FocusTrap`, this is a policy-free internal\n * util: what an intersection *means* (a spied link, a stuck header, a lazy\n * load) stays in each controller. The public `stimeo--intersection` controller\n * is its thin declarative face.\n */\nexport interface IntersectionWatchOptions {\n  /**\n   * The observation root. Pass an element (or `null` for the viewport) when\n   * the caller already resolved it; omit to resolve from `rootSelector`.\n   */\n  root?: Element | null;\n  /** Selector for the observation root; empty/omitted = viewport. */\n  rootSelector?: string;\n  rootMargin?: string;\n  threshold?: number | number[];\n}\n\nexport class IntersectionWatcher {\n  readonly #onEntries: (entries: IntersectionObserverEntry[]) => void;\n  #observer: IntersectionObserver | null = null;\n  #active = false;\n\n  constructor(onEntries: (entries: IntersectionObserverEntry[]) => void) {\n    this.#onEntries = onEntries;\n  }\n\n  /** Whether an observer is live (started, `IntersectionObserver` supported). */\n  get active(): boolean {\n    return this.#active;\n  }\n\n  /**\n   * (Re)creates the observer and observes `targets`. Returns `false` — leaving\n   * the watcher inert — without `IntersectionObserver` support (very old\n   * browsers; the caller's no-JS fallback stays in charge) or with no targets.\n   */\n  start(targets: Element | readonly Element[], options: IntersectionWatchOptions = {}): boolean {\n    this.stop();\n    if (typeof IntersectionObserver === \"undefined\") return false;\n    const list = Array.isArray(targets) ? (targets as readonly Element[]) : [targets as Element];\n    if (list.length === 0) return false;\n\n    const root =\n      \"root\" in options\n        ? (options.root ?? null)\n        : options.rootSelector\n          ? document.querySelector(options.rootSelector)\n          : null;\n\n    this.#active = true;\n    this.#observer = new IntersectionObserver(\n      (entries) => {\n        if (this.#active) this.#onEntries(entries);\n      },\n      { root, rootMargin: options.rootMargin, threshold: options.threshold },\n    );\n    for (const target of list) this.#observer.observe(target);\n    return true;\n  }\n\n  /**\n   * Re-delivers `target`'s CURRENT intersection state: `IntersectionObserver`\n   * only reports *changes*, but `observe()` always reports the present state,\n   * so unobserve→observe turns \"still intersecting\" into a fresh callback.\n   */\n  rearm(target: Element): void {\n    if (!this.#observer) return;\n    this.#observer.unobserve(target);\n    this.#observer.observe(target);\n  }\n\n  /** Severs the observer; late queued callbacks become no-ops via the guard. */\n  stop(): void {\n    this.#active = false;\n    this.#observer?.disconnect();\n    this.#observer = null;\n  }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { IntersectionWatcher } from \"../utils/intersection_watcher\";\n\n/**\n * Headless **Sticky State Observer**: detects whether a `position: sticky`\n * element is currently stuck and publishes it as `data-stuck`. No APG widget — a\n * pure state-detection utility. Detection uses an {@link IntersectionObserver}\n * and a sentinel placed just before the sticky element, avoiding per-frame scroll\n * math.\n *\n * Markup contract (identifier: `stimeo--sticky-observer`):\n *   <div data-controller=\"stimeo--sticky-observer\">\n *     <div data-stimeo--sticky-observer-target=\"sentinel\"\n *          aria-hidden=\"true\" style=\"height: 1px;\"></div>\n *     <header data-stimeo--sticky-observer-target=\"element\"\n *             style=\"position: sticky; top: 0;\">Site heading</header>\n *     <main>…</main>\n *   </div>\n *\n * When the sentinel scrolls out past the top of the viewport (or `rootSelector`\n * container), the sticky element is considered stuck and `data-stuck=\"true\"` is\n * set; otherwise `false`. The `change` event fires on each transition.\n *\n * @remarks\n * Behavior only — `position: sticky`, shadows, and shrink effects are the\n * consumer's CSS (`[data-stuck=\"true\"] { … }`). `data-stuck` is a visual hook\n * only: it carries no ARIA role/state. `offset` feeds a negative top `rootMargin`\n * and must match the sticky element's CSS `top`. The observer is disconnected on\n * `disconnect()` (Turbo navigation included).\n */\nexport class StickyObserverController extends Controller<HTMLElement> {\n  static override targets = [\"sentinel\", \"element\"];\n  static override values = {\n    rootSelector: { type: String, default: \"\" },\n    offset: { type: Number, default: 0 },\n  };\n  static events = [\"change\"] as const;\n\n  declare readonly sentinelTarget: HTMLElement;\n  declare readonly elementTarget: HTMLElement;\n  declare readonly hasSentinelTarget: boolean;\n  declare readonly hasElementTarget: boolean;\n\n  declare rootSelectorValue: string;\n  declare offsetValue: number;\n\n  /** Shared IO plumbing (support guard, root resolution, active guard). */\n  readonly #watcher = new IntersectionWatcher((entries) => this.#onIntersect(entries));\n  /** Last reported stuck state, so `change` fires only on transitions. */\n  #stuck: boolean | null = null;\n\n  #onIntersect(entries: IntersectionObserverEntry[]): void {\n    const entry = entries[entries.length - 1];\n    if (!entry) return;\n    // The sentinel sits above the sticky element; once it is no longer\n    // intersecting the (top-inset) root, the sticky element has stuck.\n    this.#setStuck(!entry.isIntersecting);\n  }\n\n  override connect(): void {\n    if (!this.hasSentinelTarget) return;\n    this.#watcher.start(this.sentinelTarget, {\n      rootSelector: this.rootSelectorValue,\n      rootMargin: `-${this.offsetValue}px 0px 0px 0px`,\n      threshold: [0],\n    });\n  }\n\n  override disconnect(): void {\n    this.#watcher.stop();\n    this.#stuck = null;\n  }\n\n  /** Reflects the stuck state onto the sticky element and emits `change`. */\n  #setStuck(next: boolean): void {\n    if (next === this.#stuck) return;\n    this.#stuck = next;\n    if (this.hasElementTarget) {\n      this.elementTarget.setAttribute(\"data-stuck\", next ? \"true\" : \"false\");\n    }\n    this.dispatch(\"change\", { detail: { stuck: next } });\n  }\n}\n"]}
+{"version":3,"sources":["../../src/utils/intersection_watcher.ts","../../src/controllers/sticky_observer_controller.ts"],"names":[],"mappings":"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","file":"sticky_observer_controller.js","sourcesContent":["/**\n * Shared `IntersectionObserver` plumbing for Stimeo's scroll-triggered\n * controllers (`intersection`, `scrollspy`, `sticky-observer`, `lazy-frame`).\n *\n * It centralizes the `IntersectionObserver` support guard, root resolution from\n * a selector, observer creation/teardown, the **active guard** (the browser may\n * flush a final queued callback batch right after `disconnect()`, and a\n * detached controller must not mutate possibly-cached DOM), and the\n * unobserve→observe **re-arm** that re-delivers the current state even when the\n * target never leaves the viewport.\n *\n * Like {@link RovingTabindex} and `FocusTrap`, this is a policy-free internal\n * util: what an intersection *means* (a spied link, a stuck header, a lazy\n * load) stays in each controller. The public `stimeo--intersection` controller\n * is its thin declarative face.\n */\n/**\n * Whether `entry`'s target sits entirely before the root's **start (top)** edge —\n * the \"scrolled past the top\" half of a non-intersecting entry, as opposed to\n * \"not reached yet\" below the root.\n *\n * A target with no layout box (`display: none`, a `hidden` ancestor, a collapsed\n * `<details>`) is reported with an **empty rect**, whose `bottom` of `0` would\n * otherwise satisfy `bottom <= rootTop` for a viewport root and read as \"passed\"\n * even though the target was never scrolled anywhere. An empty rect carries no\n * position at all, so it is deliberately never \"before the edge\"; what a caller\n * publishes for that case is its own policy (both consumers treat it as the\n * neutral \"not passed\"/\"not stuck\", and the real rect that arrives once the\n * target is laid out re-establishes the true state).\n */\nexport function isBeforeRootStart(entry: IntersectionObserverEntry): boolean {\n  const rect = entry.boundingClientRect;\n  if (rect.width === 0 && rect.height === 0) return false;\n  // rootBounds is null for a cross-origin/removed root; fall back to the\n  // viewport origin.\n  const rootTop = entry.rootBounds?.top ?? 0;\n  return rect.bottom <= rootTop;\n}\n\nexport interface IntersectionWatchOptions {\n  /**\n   * The observation root. Pass an element (or `null` for the viewport) when\n   * the caller already resolved it; omit to resolve from `rootSelector`.\n   */\n  root?: Element | null;\n  /** Selector for the observation root; empty/omitted = viewport. */\n  rootSelector?: string;\n  rootMargin?: string;\n  threshold?: number | number[];\n}\n\nexport class IntersectionWatcher {\n  readonly #onEntries: (entries: IntersectionObserverEntry[]) => void;\n  #observer: IntersectionObserver | null = null;\n  #active = false;\n\n  constructor(onEntries: (entries: IntersectionObserverEntry[]) => void) {\n    this.#onEntries = onEntries;\n  }\n\n  /** Whether an observer is live (started, `IntersectionObserver` supported). */\n  get active(): boolean {\n    return this.#active;\n  }\n\n  /**\n   * (Re)creates the observer and observes `targets`. Returns `false` — leaving\n   * the watcher inert — without `IntersectionObserver` support (very old\n   * browsers; the caller's no-JS fallback stays in charge) or with no targets.\n   *\n   * @throws Whatever the platform throws for an invalid `rootMargin`/`threshold`\n   *   or a failing `observe()`. The exception is passed through unchanged, but\n   *   the watcher rolls back first: every target observed so far is released and\n   *   `active` stays `false`, so a caller that retries starts from a clean slate.\n   */\n  start(targets: Element | readonly Element[], options: IntersectionWatchOptions = {}): boolean {\n    this.stop();\n    if (typeof IntersectionObserver === \"undefined\") return false;\n    const list = Array.isArray(targets) ? (targets as readonly Element[]) : [targets as Element];\n    if (list.length === 0) return false;\n\n    const root =\n      \"root\" in options\n        ? (options.root ?? null)\n        : options.rootSelector\n          ? document.querySelector(options.rootSelector)\n          : null;\n\n    let observer: IntersectionObserver | null = null;\n    try {\n      observer = new IntersectionObserver(\n        (entries) => {\n          // Identity matters across an immediate restart: the old observer can\n          // flush a queued batch after the new observer has made `active` true.\n          if (this.#active && this.#observer === observer) this.#onEntries(entries);\n        },\n        { root, rootMargin: options.rootMargin, threshold: options.threshold },\n      );\n      for (const target of list) observer.observe(target);\n      this.#observer = observer;\n      this.#active = true;\n      return true;\n    } catch (error) {\n      // A constructor or partial observe failure must not leave earlier targets\n      // observed or report an active watcher. Preserve the platform exception.\n      observer?.disconnect();\n      this.#observer = null;\n      this.#active = false;\n      throw error;\n    }\n  }\n\n  /**\n   * Re-delivers `target`'s CURRENT intersection state: `IntersectionObserver`\n   * only reports *changes*, but `observe()` always reports the present state,\n   * so unobserve→observe turns \"still intersecting\" into a fresh callback.\n   *\n   * @throws Whatever `unobserve()`/`observe()` throws. The watcher is stopped\n   *   first, so it never stays live with a half-rearmed target.\n   */\n  rearm(target: Element): void {\n    if (!this.#observer) return;\n    try {\n      this.#observer.unobserve(target);\n      this.#observer.observe(target);\n    } catch (error) {\n      this.stop();\n      throw error;\n    }\n  }\n\n  /** Severs the observer; late queued callbacks become no-ops via the guard. */\n  stop(): void {\n    this.#active = false;\n    this.#observer?.disconnect();\n    this.#observer = null;\n  }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { IntersectionWatcher, isBeforeRootStart } from \"../utils/intersection_watcher\";\n\n/**\n * Headless **Sticky State Observer**: detects whether a `position: sticky`\n * element is currently stuck and publishes it as `data-stuck`. No APG widget — a\n * pure state-detection utility. Detection uses an {@link IntersectionObserver}\n * and a sentinel placed just before the sticky element, avoiding per-frame scroll\n * math.\n *\n * Markup contract (identifier: `stimeo--sticky-observer`):\n *   <div data-controller=\"stimeo--sticky-observer\">\n *     <div data-stimeo--sticky-observer-target=\"sentinel\"\n *          aria-hidden=\"true\" style=\"height: 1px;\"></div>\n *     <header data-stimeo--sticky-observer-target=\"element\"\n *             style=\"position: sticky; top: 0;\">Site heading</header>\n *     <main>…</main>\n *   </div>\n *\n * When the sentinel scrolls out past the top of the viewport (or `rootSelector`\n * container), the sticky element is considered stuck and `data-stuck=\"true\"` is\n * set; otherwise `false`. The observer's initial snapshot dispatches `change`\n * once with the current state, including after a Turbo reconnect; subsequent\n * notifications dispatch only when that state changes.\n *\n * @remarks\n * Behavior only — `position: sticky`, shadows, and shrink effects are the\n * consumer's CSS (`[data-stuck=\"true\"] { … }`). `data-stuck` is a visual hook\n * only: it carries no ARIA role/state. `offset` is negated numerically for the\n * top `rootMargin` (so negative offsets remain valid) and must match the sticky\n * element's CSS `top`. The observer follows dynamic sentinel targets and value\n * changes, and is disconnected on `disconnect()` (Turbo navigation included).\n */\nexport class StickyObserverController extends Controller<HTMLElement> {\n  static override targets = [\"sentinel\", \"element\"];\n  static override values = {\n    rootSelector: { type: String, default: \"\" },\n    offset: { type: Number, default: 0 },\n  };\n  static events = [\"change\"] as const;\n\n  declare readonly sentinelTarget: HTMLElement;\n  declare readonly elementTarget: HTMLElement;\n  declare readonly hasSentinelTarget: boolean;\n  declare readonly hasElementTarget: boolean;\n\n  declare rootSelectorValue: string;\n  declare offsetValue: number;\n\n  /** Shared IO plumbing (support guard, root resolution, active guard). */\n  readonly #watcher = new IntersectionWatcher((entries) => this.#onIntersect(entries));\n  /** Last reported stuck state, so `change` fires only on transitions. */\n  #stuck: boolean | null = null;\n  /** Target currently owned by the watcher, used to avoid duplicate restarts. */\n  #observedSentinel: HTMLElement | null = null;\n  #connected = false;\n\n  #onIntersect(entries: IntersectionObserverEntry[]): void {\n    // Delivery can batch multiple transitions after a fast scroll. Process\n    // every snapshot in order so an above→visible pair is not collapsed.\n    for (const entry of entries) {\n      if (!this.#connected || !this.#watcher.active) return;\n      // A sentinel with no layout box (hidden tab panel, collapsed section, an\n      // undisplayed Turbo Frame) reports an empty rect that the shared edge test\n      // deliberately refuses, so an unrendered sticky element is never published\n      // as stuck; the state stays put until the sentinel is actually laid out.\n      this.#setStuck(!entry.isIntersecting && isBeforeRootStart(entry));\n    }\n  }\n\n  override connect(): void {\n    this.#connected = true;\n    this.#stuck = null;\n    this.#syncObserver();\n  }\n\n  override disconnect(): void {\n    this.#connected = false;\n    this.#watcher.stop();\n    this.#observedSentinel = null;\n    this.#stuck = null;\n  }\n\n  /** Starts observation when a sentinel is inserted after connection. */\n  sentinelTargetConnected(): void {\n    if (this.#connected) this.#syncObserver();\n  }\n\n  /** Stops or transfers observation when the current sentinel is removed. */\n  sentinelTargetDisconnected(): void {\n    if (this.#connected) this.#syncObserver();\n  }\n\n  /** Reflects the last snapshot onto an element inserted after that snapshot. */\n  elementTargetConnected(element: HTMLElement): void {\n    if (this.#stuck !== null) {\n      element.setAttribute(\"data-stuck\", this.#stuck ? \"true\" : \"false\");\n    }\n  }\n\n  /** Rebuilds the observer when Turbo morphs the configured root. */\n  rootSelectorValueChanged(): void {\n    if (this.#connected) this.#syncObserver(true);\n  }\n\n  /** Rebuilds the observer when Turbo morphs the configured top offset. */\n  offsetValueChanged(): void {\n    if (this.#connected) this.#syncObserver(true);\n  }\n\n  #syncObserver(force = false): void {\n    const sentinel = this.hasSentinelTarget ? this.sentinelTarget : null;\n    if (!force && sentinel === this.#observedSentinel && this.#watcher.active) return;\n\n    this.#watcher.stop();\n    this.#observedSentinel = null;\n    if (!sentinel) return;\n\n    const configuredOffset = this.offsetValue;\n    const offset = Number.isFinite(configuredOffset) ? configuredOffset : 0;\n    const started = this.#watcher.start(sentinel, {\n      rootSelector: this.rootSelectorValue,\n      rootMargin: `${-offset}px 0px 0px 0px`,\n      threshold: [0],\n    });\n    if (started) this.#observedSentinel = sentinel;\n  }\n\n  /** Reflects the stuck state onto the sticky element and emits `change`. */\n  #setStuck(next: boolean): void {\n    if (next === this.#stuck) return;\n    this.#stuck = next;\n    if (this.hasElementTarget) {\n      this.elementTarget.setAttribute(\"data-stuck\", next ? \"true\" : \"false\");\n    }\n    this.dispatch(\"change\", { detail: { stuck: next } });\n  }\n}\n"]}

package/dist/controllers/tabs_controller.d.ts

@@ -24,9 +24,9 @@ import { Controller } from '@hotwired/stimulus';
  * @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. The optional `list` target marks the tablist
+ * the consumer owns all styling. The required `list` target marks the tablist
  * container as part of the semantic contract — the Inspector requires its
- * `role="tablist"`; the controller performs no runtime work on it.
+ * role and accessible name; the controller performs no runtime work on it.
  *
  * Behavior provided:
  * - Click a tab to select it.
@@ -37,6 +37,7 @@ declare class TabsController extends Controller<HTMLElement> {
     #private;
     static targets: string[];
     static actions: readonly ["onKeydown", "select"];
+    readonly listTarget: HTMLElement;
     readonly tabTargets: HTMLButtonElement[];
     readonly panelTargets: HTMLElement[];
     /** Selects the initially active tab (the pre-selected one, else the first). */

package/dist/controllers/tabs_controller.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/controllers/tabs_controller.ts"],"names":[],"mappings":";;;AAmCO,IAAM,cAAA,GAAN,cAA6B,UAAA,CAAwB;AAAA,EAC1D,OAAgB,OAAA,GAAU,CAAC,KAAA,EAAO,SAAS,MAAM,CAAA;AAAA,EACjD,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=\"…\" data-stimeo--tabs-target=\"list\">\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. The optional `list` target marks the tablist\n * container as part of the semantic contract — the Inspector requires its\n * `role=\"tablist\"`; the controller performs no runtime work on it.\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\", \"list\"];\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"]}
+{"version":3,"sources":["../../src/controllers/tabs_controller.ts"],"names":[],"mappings":";;;AAmCO,IAAM,cAAA,GAAN,cAA6B,UAAA,CAAwB;AAAA,EAC1D,OAAgB,OAAA,GAAU,CAAC,KAAA,EAAO,SAAS,MAAM,CAAA;AAAA,EACjD,OAAO,OAAA,GAAU,CAAC,WAAA,EAAa,QAAQ,CAAA;AAAA;AAAA,EAO9B,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=\"…\" data-stimeo--tabs-target=\"list\">\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. The required `list` target marks the tablist\n * container as part of the semantic contract — the Inspector requires its\n * role and accessible name; the controller performs no runtime work on it.\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\", \"list\"];\n  static actions = [\"onKeydown\", \"select\"] as const;\n\n  declare readonly listTarget: HTMLElement;\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/tags_input_controller.d.ts

@@ -0,0 +1,91 @@
+import { Controller } from '@hotwired/stimulus';
+
+/**
+ * Headless, accessible free-input tags / chips field.
+ *
+ * Markup contract (identifier: `stimeo--tags-input`):
+ *   <div data-controller="stimeo--tags-input"
+ *        data-stimeo--tags-input-delimiter-value=",">
+ *     <ul role="list" aria-label="Tags" data-stimeo--tags-input-target="tags"></ul>
+ *     <input type="text" aria-label="Add tag" aria-describedby="tags-help"
+ *            data-stimeo--tags-input-target="input"
+ *            data-action="keydown->stimeo--tags-input#onKeydown" />
+ *     <span role="status" aria-live="polite" class="visually-hidden"
+ *           data-stimeo--tags-input-target="status"></span>
+ *     <div data-stimeo--tags-input-target="fields"></div>
+ *     <template data-stimeo--tags-input-target="tagTemplate">
+ *       <li role="listitem" data-stimeo--tags-input-target="tag">
+ *         <span data-tags-input-slot="label"></span>
+ *         <!-- Removal is delegated on the tags container; no per-chip action needed. -->
+ *         <button type="button" tabindex="-1">×</button>
+ *       </li>
+ *     </template>
+ *   </div>
+ *
+ * There is no single established APG pattern; this composes a labeled text input
+ * with a roving-tabindex list of removable chips, mapping to WCAG 2.1.1, 2.4.7,
+ * 4.1.2, 4.1.3, and 1.3.1. Unlike {@link MultiSelectController} (pick from a
+ * candidate list) the user types arbitrary strings.
+ *
+ * Behavior provided:
+ * - `Enter` or the configured delimiter commits the trimmed input as a tag.
+ * - Empty / duplicate / over-limit additions are rejected with
+ *   `stimeo--tags-input:reject`; duplicates are allowed when `allowDuplicates`.
+ * - Tags render from the `tagTemplate`, each with a `Remove {label}` button; the
+ *   `fields` container mirrors the tag set as `name`d hidden inputs for form
+ *   submission, and every change dispatches `stimeo--tags-input:change`.
+ * - The remove buttons form one roving Tab stop: `ArrowLeft`/`ArrowRight` move
+ *   between them (right past the end returns to the input), `Delete`/`Backspace`
+ *   delete the focused tag, and `Backspace` on an empty input deletes the last.
+ * - Removing a tag moves focus to the neighboring tag, else back to the input.
+ */
+declare class TagsInputController extends Controller<HTMLElement> {
+    #private;
+    static targets: string[];
+    static values: {
+        delimiter: {
+            type: StringConstructor;
+            default: string;
+        };
+        max: {
+            type: NumberConstructor;
+            default: number;
+        };
+        allowDuplicates: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        name: {
+            type: StringConstructor;
+            default: string;
+        };
+    };
+    static actions: readonly ["onKeydown"];
+    static events: readonly ["change", "reject"];
+    readonly inputTarget: HTMLInputElement;
+    readonly tagsTarget: HTMLElement;
+    readonly tagTargets: HTMLElement[];
+    readonly tagTemplateTarget: HTMLTemplateElement;
+    readonly statusTarget: HTMLElement;
+    readonly fieldsTarget: HTMLElement;
+    readonly hasStatusTarget: boolean;
+    readonly hasFieldsTarget: boolean;
+    readonly hasTagTemplateTarget: boolean;
+    readonly hasInputTarget: boolean;
+    delimiterValue: string;
+    maxValue: number;
+    allowDuplicatesValue: boolean;
+    nameValue: string;
+    /** Wires tag-list keyboard navigation and removal, and seeds the single Tab stop. */
+    connect(): void;
+    /** Releases the delegated listeners so no handler outlives the element. */
+    disconnect(): void;
+    /** Tracks an input added initially or after connect. */
+    inputTargetConnected(input: HTMLInputElement): void;
+    /** Removes composition listeners when the active input is replaced or removed. */
+    inputTargetDisconnected(input: HTMLInputElement): void;
+    /** Commits on `Enter`/delimiter and deletes the last tag on empty `Backspace`. */
+    onKeydown(event: KeyboardEvent): void;
+}
+
+export { TagsInputController };

package/dist/controllers/tags_input_controller.js

@@ -0,0 +1,275 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/tags_input_controller.ts
+
+// src/utils/composition_tracker.ts
+var CompositionTracker = class {
+  #observedTargets = /* @__PURE__ */ new Set();
+  #activeTargets = /* @__PURE__ */ new Set();
+  #onStart;
+  #onEnd;
+  constructor(options = {}) {
+    this.#onStart = options.onStart;
+    this.#onEnd = options.onEnd;
+  }
+  /** Starts lifecycle tracking for `target`; repeated calls are idempotent. */
+  observe(target) {
+    if (this.#observedTargets.has(target)) return;
+    target.addEventListener("compositionstart", this.#handleStart);
+    target.addEventListener("compositionend", this.#handleEnd);
+    this.#observedTargets.add(target);
+  }
+  /** Stops tracking one target and clears any active composition it owned. */
+  unobserve(target) {
+    if (!this.#observedTargets.delete(target)) return;
+    target.removeEventListener("compositionstart", this.#handleStart);
+    target.removeEventListener("compositionend", this.#handleEnd);
+    this.#activeTargets.delete(target);
+  }
+  /** Releases every listener and clears state so reconnect starts cleanly. */
+  disconnect() {
+    for (const target of this.#observedTargets) {
+      target.removeEventListener("compositionstart", this.#handleStart);
+      target.removeEventListener("compositionend", this.#handleEnd);
+    }
+    this.#observedTargets.clear();
+    this.#activeTargets.clear();
+  }
+  /** True when lifecycle tracking or the current event reports composition. */
+  isComposing(event) {
+    return this.#activeTargets.size > 0 || event?.isComposing === true;
+  }
+  #handleStart = (event) => {
+    if (event.currentTarget) this.#activeTargets.add(event.currentTarget);
+    this.#onStart?.(event);
+  };
+  #handleEnd = (event) => {
+    if (event.currentTarget) this.#activeTargets.delete(event.currentTarget);
+    this.#onEnd?.(event);
+  };
+};
+
+// src/utils/roving_tabindex.ts
+var RovingTabindex = class {
+  /** Returns the current ordered item elements; called on every operation. */
+  #getItems;
+  /**
+   * @param getItems - Returns the current ordered item elements. Called on every
+   *   operation so the live target list is always used.
+   */
+  constructor(getItems) {
+    this.#getItems = getItems;
+  }
+  /** Index of the currently tabbable item (`tabindex="0"`), or `-1` if none. */
+  get activeIndex() {
+    return this.#getItems().findIndex((item) => item.tabIndex === 0);
+  }
+  /**
+   * Makes exactly the item at `index` tabbable (`tabindex="0"`) and removes every
+   * other item from the Tab sequence (`tabindex="-1"`). An out-of-range `index`
+   * (e.g. `-1`) leaves all items at `-1`, which a controller can use to express
+   * "nothing is currently tabbable".
+   *
+   * @param index - Position of the item to make tabbable.
+   * @param options - Pass `{ focus: true }` to also move DOM focus to that item.
+   */
+  setActive(index, { focus = false } = {}) {
+    const items = this.#getItems();
+    items.forEach((item, i) => {
+      item.tabIndex = i === index ? 0 : -1;
+    });
+    if (focus) items[index]?.focus();
+  }
+};
+
+// src/controllers/tags_input_controller.ts
+var TagsInputController = class extends Controller {
+  static targets = ["input", "tags", "tag", "tagTemplate", "status", "fields"];
+  static values = {
+    delimiter: { type: String, default: "," },
+    max: { type: Number, default: 0 },
+    allowDuplicates: { type: Boolean, default: false },
+    name: { type: String, default: "tags[]" }
+  };
+  static actions = ["onKeydown"];
+  static events = ["change", "reject"];
+  #roving = new RovingTabindex(() => this.#removeButtons);
+  /** Owns IME lifecycle state for commit-key guarding. */
+  #composition = new CompositionTracker();
+  /** Wires tag-list keyboard navigation and removal, and seeds the single Tab stop. */
+  connect() {
+    if (this.hasInputTarget) this.#composition.observe(this.inputTarget);
+    this.tagsTarget.addEventListener("keydown", this.#onTagKeydown);
+    this.tagsTarget.addEventListener("click", this.#onTagClick);
+    this.#syncState();
+  }
+  /** Releases the delegated listeners so no handler outlives the element. */
+  disconnect() {
+    this.#composition.disconnect();
+    this.tagsTarget.removeEventListener("keydown", this.#onTagKeydown);
+    this.tagsTarget.removeEventListener("click", this.#onTagClick);
+  }
+  /** Tracks an input added initially or after connect. */
+  inputTargetConnected(input) {
+    this.#composition.observe(input);
+  }
+  /** Removes composition listeners when the active input is replaced or removed. */
+  inputTargetDisconnected(input) {
+    this.#composition.unobserve(input);
+  }
+  /** Commits on `Enter`/delimiter and deletes the last tag on empty `Backspace`. */
+  onKeydown(event) {
+    if (this.#composition.isComposing(event)) return;
+    if (event.key === "Enter" || event.key === this.delimiterValue) {
+      event.preventDefault();
+      this.#commitInput();
+      return;
+    }
+    if (event.key === "Backspace" && this.inputTarget.value === "") {
+      const buttons = this.#removeButtons;
+      if (buttons.length > 0) {
+        event.preventDefault();
+        this.#removeAt(buttons.length - 1);
+      }
+      return;
+    }
+    if (event.key === "ArrowLeft" && this.inputTarget.value === "") {
+      const buttons = this.#removeButtons;
+      if (buttons.length > 0) {
+        event.preventDefault();
+        this.#roving.setActive(buttons.length - 1, { focus: true });
+      }
+    }
+  }
+  /**
+   * Deletes the tag whose remove button was clicked. Delegated on the tags
+   * container (like `#onTagKeydown`) rather than bound per chip via
+   * `data-action`, so it works the instant a chip is appended without waiting on
+   * Stimulus to wire a freshly created element.
+   */
+  #onTagClick = (event) => {
+    const button = event.target.closest("button");
+    if (!button || !this.tagsTarget.contains(button)) return;
+    const index = this.#removeButtons.indexOf(button);
+    if (index !== -1) this.#removeAt(index);
+  };
+  /** Validates and adds the current input value as a tag, then clears the input. */
+  #commitInput() {
+    const value = this.inputTarget.value.trim();
+    if (value === "") {
+      this.#reject(value, "empty");
+      return;
+    }
+    if (this.maxValue > 0 && this.tagTargets.length >= this.maxValue) {
+      this.#reject(value, "max");
+      return;
+    }
+    if (!this.allowDuplicatesValue && this.#values.includes(value)) {
+      this.#reject(value, "duplicate");
+      return;
+    }
+    this.#appendTag(value);
+    this.inputTarget.value = "";
+    this.#announce(value);
+    this.#syncState();
+    this.dispatch("change", { detail: { tags: this.#values } });
+  }
+  /** Builds one chip from the template and appends it to the tag list. */
+  #appendTag(value) {
+    if (!this.hasTagTemplateTarget) return;
+    const fragment = this.tagTemplateTarget.content.cloneNode(true);
+    const tag = fragment.querySelector('[data-stimeo--tags-input-target="tag"]');
+    const label = fragment.querySelector('[data-tags-input-slot="label"]');
+    const button = fragment.querySelector("button");
+    if (!tag || !button) return;
+    tag.dataset.value = value;
+    if (label) label.textContent = value;
+    button.setAttribute("aria-label", `Remove ${value}`);
+    button.tabIndex = -1;
+    this.tagsTarget.appendChild(fragment);
+  }
+  /** Removes the tag at `index`, then moves focus to a neighbor or the input. */
+  #removeAt(index) {
+    const tag = this.tagTargets[index];
+    if (!tag) return;
+    const value = tag.dataset.value ?? "";
+    tag.remove();
+    this.#announce(value);
+    this.#syncState();
+    this.dispatch("change", { detail: { tags: this.#values } });
+    const remaining = this.#removeButtons;
+    if (remaining.length === 0) {
+      this.inputTarget.focus();
+    } else {
+      this.#roving.setActive(Math.min(index, remaining.length - 1), { focus: true });
+    }
+  }
+  /** Handles arrow navigation and deletion within the chip list (delegated). */
+  #onTagKeydown = (event) => {
+    const button = event.target.closest("button");
+    if (!button) return;
+    const buttons = this.#removeButtons;
+    const index = buttons.indexOf(button);
+    if (index === -1) return;
+    switch (event.key) {
+      case "ArrowLeft":
+        if (index > 0) {
+          event.preventDefault();
+          this.#roving.setActive(index - 1, { focus: true });
+        }
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        if (index < buttons.length - 1) {
+          this.#roving.setActive(index + 1, { focus: true });
+        } else {
+          this.inputTarget.focus();
+        }
+        break;
+      case "Delete":
+      case "Backspace":
+        event.preventDefault();
+        this.#removeAt(index);
+        break;
+    }
+  };
+  /** Rebuilds the hidden form fields, the `full` flag, and the roving Tab stop. */
+  #syncState() {
+    if (this.hasFieldsTarget) {
+      this.fieldsTarget.replaceChildren(
+        ...this.#values.map((value) => {
+          const input = document.createElement("input");
+          input.type = "hidden";
+          input.name = this.nameValue;
+          input.value = value;
+          return input;
+        })
+      );
+    }
+    const full = this.maxValue > 0 && this.tagTargets.length >= this.maxValue;
+    this.element.toggleAttribute("data-stimeo--tags-input-full", full);
+    if (this.#removeButtons.length > 0 && this.#roving.activeIndex === -1) {
+      this.#roving.setActive(0);
+    }
+  }
+  /** Mirrors the changed tag into the live region for assistive tech. */
+  #announce(value) {
+    if (this.hasStatusTarget) this.statusTarget.textContent = value;
+  }
+  /** Reports a rejected addition via `stimeo--tags-input:reject`. */
+  #reject(value, reason) {
+    this.dispatch("reject", { detail: { value, reason } });
+  }
+  /** The remove buttons in document order (the roving navigation set). */
+  get #removeButtons() {
+    return Array.from(this.tagsTarget.querySelectorAll("button"));
+  }
+  /** Current tag values in order. */
+  get #values() {
+    return this.tagTargets.map((tag) => tag.dataset.value ?? "");
+  }
+};
+
+export { TagsInputController };
+//# sourceMappingURL=tags_input_controller.js.map
+//# sourceMappingURL=tags_input_controller.js.map

package/dist/controllers/tags_input_controller.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/composition_tracker.ts","../../src/utils/roving_tabindex.ts","../../src/controllers/tags_input_controller.ts"],"names":[],"mappings":"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","file":"tags_input_controller.js","sourcesContent":["/** Minimal event shape carrying the platform's per-event composition signal. */\nexport interface CompositionSignal {\n  readonly isComposing?: boolean;\n}\n\n/** Hooks that keep component-specific work outside {@link CompositionTracker}. */\nexport interface CompositionTrackerOptions {\n  /** Runs after lifecycle state is set for a `compositionstart` event. */\n  readonly onStart?: (event: Event) => void;\n  /** Runs after lifecycle state is cleared for a `compositionend` event. */\n  readonly onEnd?: (event: Event) => void;\n}\n\n/**\n * Owns IME composition listeners and transient state for one or more event targets.\n *\n * Some browsers omit `KeyboardEvent.isComposing` on the keydown that confirms a\n * conversion. Tracking `compositionstart` through `compositionend` supplies the\n * missing lifecycle signal without relying on deprecated numeric key codes.\n * Component policy stays with the consumer: filtering, validation, and submission\n * belong in the optional {@link CompositionTrackerOptions.onEnd} callback.\n *\n * @example\n * ```ts\n * #composition = new CompositionTracker({ onEnd: () => this.filter() });\n *\n * connect(): void {\n *   this.#composition.observe(this.inputTarget);\n * }\n *\n * disconnect(): void {\n *   this.#composition.disconnect();\n * }\n *\n * onKeydown(event: KeyboardEvent): void {\n *   if (this.#composition.isComposing(event)) return;\n * }\n * ```\n */\nexport class CompositionTracker {\n  readonly #observedTargets = new Set<EventTarget>();\n  readonly #activeTargets = new Set<EventTarget>();\n  readonly #onStart: ((event: Event) => void) | undefined;\n  readonly #onEnd: ((event: Event) => void) | undefined;\n\n  constructor(options: CompositionTrackerOptions = {}) {\n    this.#onStart = options.onStart;\n    this.#onEnd = options.onEnd;\n  }\n\n  /** Starts lifecycle tracking for `target`; repeated calls are idempotent. */\n  observe(target: EventTarget): void {\n    if (this.#observedTargets.has(target)) return;\n    target.addEventListener(\"compositionstart\", this.#handleStart);\n    target.addEventListener(\"compositionend\", this.#handleEnd);\n    this.#observedTargets.add(target);\n  }\n\n  /** Stops tracking one target and clears any active composition it owned. */\n  unobserve(target: EventTarget): void {\n    if (!this.#observedTargets.delete(target)) return;\n    target.removeEventListener(\"compositionstart\", this.#handleStart);\n    target.removeEventListener(\"compositionend\", this.#handleEnd);\n    this.#activeTargets.delete(target);\n  }\n\n  /** Releases every listener and clears state so reconnect starts cleanly. */\n  disconnect(): void {\n    for (const target of this.#observedTargets) {\n      target.removeEventListener(\"compositionstart\", this.#handleStart);\n      target.removeEventListener(\"compositionend\", this.#handleEnd);\n    }\n    this.#observedTargets.clear();\n    this.#activeTargets.clear();\n  }\n\n  /** True when lifecycle tracking or the current event reports composition. */\n  isComposing(event?: CompositionSignal): boolean {\n    return this.#activeTargets.size > 0 || event?.isComposing === true;\n  }\n\n  readonly #handleStart = (event: Event): void => {\n    if (event.currentTarget) this.#activeTargets.add(event.currentTarget);\n    this.#onStart?.(event);\n  };\n\n  readonly #handleEnd = (event: Event): void => {\n    if (event.currentTarget) this.#activeTargets.delete(event.currentTarget);\n    this.#onEnd?.(event);\n  };\n}\n","/**\n * Low-level roving-tabindex primitive shared by composite-widget controllers.\n *\n * The APG roving-tabindex pattern keeps a composite widget a single Tab stop:\n * exactly one item is in the Tab sequence (`tabindex=\"0\"`) while the rest are\n * removed from it (`tabindex=\"-1\"`), and the arrow keys move both DOM focus and\n * that single tabbable position together. {@link RovingTabindex} owns *only* that\n * mechanical bookkeeping — \"which one item is tabbable, and move focus there\".\n *\n * It is intentionally **policy-free**. Orientation, wrapping vs. clamping,\n * selection-follows-focus, typeahead, and `Home`/`End` semantics differ per APG\n * pattern (Radio Group, Toolbar, Rating, …); folding them into one helper would\n * flatten those widgets to a lowest common denominator and lose each pattern's\n * correctness. Those decisions therefore stay in each controller, which calls\n * {@link RovingTabindex.setActive} with an index it computed itself (optionally\n * via the pure {@link rovingMove} helper).\n *\n * @remarks\n * Items are read lazily through a getter so a controller can add or remove\n * targets (Stimulus re-scans the DOM) without re-wiring this helper.\n */\nexport class RovingTabindex {\n  /** Returns the current ordered item elements; called on every operation. */\n  readonly #getItems: () => HTMLElement[];\n\n  /**\n   * @param getItems - Returns the current ordered item elements. Called on every\n   *   operation so the live target list is always used.\n   */\n  constructor(getItems: () => HTMLElement[]) {\n    this.#getItems = getItems;\n  }\n\n  /** Index of the currently tabbable item (`tabindex=\"0\"`), or `-1` if none. */\n  get activeIndex(): number {\n    return this.#getItems().findIndex((item) => item.tabIndex === 0);\n  }\n\n  /**\n   * Makes exactly the item at `index` tabbable (`tabindex=\"0\"`) and removes every\n   * other item from the Tab sequence (`tabindex=\"-1\"`). An out-of-range `index`\n   * (e.g. `-1`) leaves all items at `-1`, which a controller can use to express\n   * \"nothing is currently tabbable\".\n   *\n   * @param index - Position of the item to make tabbable.\n   * @param options - Pass `{ focus: true }` to also move DOM focus to that item.\n   */\n  setActive(index: number, { focus = false }: { focus?: boolean } = {}): void {\n    const items = this.#getItems();\n    items.forEach((item, i) => {\n      item.tabIndex = i === index ? 0 : -1;\n    });\n    if (focus) items[index]?.focus();\n  }\n}\n\n/** Edge behavior for {@link rovingMove}: cycle past the ends, or stop at them. */\nexport type RovingWrap = \"wrap\" | \"clamp\";\n\n/**\n * Pure helper that resolves the target index for a one-step directional move.\n *\n * Keyboard/orientation mapping stays in the caller: it decides that a key means\n * `delta` `+1` (next) or `-1` (previous) and whether the widget should `\"wrap\"`\n * (Radio Group, Toolbar) or `\"clamp\"` at the ends.\n *\n * @param current - The index focus is moving from.\n * @param length - Number of items in the set.\n * @param delta - `+1` to move to the next item, `-1` for the previous.\n * @param wrap - `\"wrap\"` cycles around the ends; `\"clamp\"` stops at them.\n * @returns The resolved index, or `-1` when there are no items.\n */\nexport function rovingMove(\n  current: number,\n  length: number,\n  delta: number,\n  wrap: RovingWrap,\n): number {\n  if (length === 0) return -1;\n  const next = current + delta;\n  if (wrap === \"wrap\") return (next + length) % length;\n  return Math.min(length - 1, Math.max(0, next));\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { CompositionTracker } from \"../utils/composition_tracker\";\nimport { RovingTabindex } from \"../utils/roving_tabindex\";\n\n/**\n * Headless, accessible free-input tags / chips field.\n *\n * Markup contract (identifier: `stimeo--tags-input`):\n *   <div data-controller=\"stimeo--tags-input\"\n *        data-stimeo--tags-input-delimiter-value=\",\">\n *     <ul role=\"list\" aria-label=\"Tags\" data-stimeo--tags-input-target=\"tags\"></ul>\n *     <input type=\"text\" aria-label=\"Add tag\" aria-describedby=\"tags-help\"\n *            data-stimeo--tags-input-target=\"input\"\n *            data-action=\"keydown->stimeo--tags-input#onKeydown\" />\n *     <span role=\"status\" aria-live=\"polite\" class=\"visually-hidden\"\n *           data-stimeo--tags-input-target=\"status\"></span>\n *     <div data-stimeo--tags-input-target=\"fields\"></div>\n *     <template data-stimeo--tags-input-target=\"tagTemplate\">\n *       <li role=\"listitem\" data-stimeo--tags-input-target=\"tag\">\n *         <span data-tags-input-slot=\"label\"></span>\n *         <!-- Removal is delegated on the tags container; no per-chip action needed. -->\n *         <button type=\"button\" tabindex=\"-1\">×</button>\n *       </li>\n *     </template>\n *   </div>\n *\n * There is no single established APG pattern; this composes a labeled text input\n * with a roving-tabindex list of removable chips, mapping to WCAG 2.1.1, 2.4.7,\n * 4.1.2, 4.1.3, and 1.3.1. Unlike {@link MultiSelectController} (pick from a\n * candidate list) the user types arbitrary strings.\n *\n * Behavior provided:\n * - `Enter` or the configured delimiter commits the trimmed input as a tag.\n * - Empty / duplicate / over-limit additions are rejected with\n *   `stimeo--tags-input:reject`; duplicates are allowed when `allowDuplicates`.\n * - Tags render from the `tagTemplate`, each with a `Remove {label}` button; the\n *   `fields` container mirrors the tag set as `name`d hidden inputs for form\n *   submission, and every change dispatches `stimeo--tags-input:change`.\n * - The remove buttons form one roving Tab stop: `ArrowLeft`/`ArrowRight` move\n *   between them (right past the end returns to the input), `Delete`/`Backspace`\n *   delete the focused tag, and `Backspace` on an empty input deletes the last.\n * - Removing a tag moves focus to the neighboring tag, else back to the input.\n */\nexport class TagsInputController extends Controller<HTMLElement> {\n  static override targets = [\"input\", \"tags\", \"tag\", \"tagTemplate\", \"status\", \"fields\"];\n  static override values = {\n    delimiter: { type: String, default: \",\" },\n    max: { type: Number, default: 0 },\n    allowDuplicates: { type: Boolean, default: false },\n    name: { type: String, default: \"tags[]\" },\n  };\n  static actions = [\"onKeydown\"] as const;\n  static events = [\"change\", \"reject\"] as const;\n\n  declare readonly inputTarget: HTMLInputElement;\n  declare readonly tagsTarget: HTMLElement;\n  declare readonly tagTargets: HTMLElement[];\n  declare readonly tagTemplateTarget: HTMLTemplateElement;\n  declare readonly statusTarget: HTMLElement;\n  declare readonly fieldsTarget: HTMLElement;\n  declare readonly hasStatusTarget: boolean;\n  declare readonly hasFieldsTarget: boolean;\n  declare readonly hasTagTemplateTarget: boolean;\n  declare readonly hasInputTarget: boolean;\n\n  declare delimiterValue: string;\n  declare maxValue: number;\n  declare allowDuplicatesValue: boolean;\n  declare nameValue: string;\n\n  readonly #roving = new RovingTabindex(() => this.#removeButtons);\n  /** Owns IME lifecycle state for commit-key guarding. */\n  readonly #composition = new CompositionTracker();\n\n  /** Wires tag-list keyboard navigation and removal, and seeds the single Tab stop. */\n  override connect(): void {\n    if (this.hasInputTarget) this.#composition.observe(this.inputTarget);\n    this.tagsTarget.addEventListener(\"keydown\", this.#onTagKeydown);\n    this.tagsTarget.addEventListener(\"click\", this.#onTagClick);\n    this.#syncState();\n  }\n\n  /** Releases the delegated listeners so no handler outlives the element. */\n  override disconnect(): void {\n    this.#composition.disconnect();\n    this.tagsTarget.removeEventListener(\"keydown\", this.#onTagKeydown);\n    this.tagsTarget.removeEventListener(\"click\", this.#onTagClick);\n  }\n\n  /** Tracks an input added initially or after connect. */\n  inputTargetConnected(input: HTMLInputElement): void {\n    this.#composition.observe(input);\n  }\n\n  /** Removes composition listeners when the active input is replaced or removed. */\n  inputTargetDisconnected(input: HTMLInputElement): void {\n    this.#composition.unobserve(input);\n  }\n\n  /** Commits on `Enter`/delimiter and deletes the last tag on empty `Backspace`. */\n  onKeydown(event: KeyboardEvent): void {\n    // Ignore keys fired during IME composition: the `Enter` that confirms a\n    // candidate (and arrows that move within it) must not commit/navigate the\n    // chip list. Controller-owned lifecycle state covers confirming events that\n    // omit the standard per-event signal.\n    if (this.#composition.isComposing(event)) return;\n    if (event.key === \"Enter\" || event.key === this.delimiterValue) {\n      event.preventDefault();\n      this.#commitInput();\n      return;\n    }\n    if (event.key === \"Backspace\" && this.inputTarget.value === \"\") {\n      const buttons = this.#removeButtons;\n      if (buttons.length > 0) {\n        event.preventDefault();\n        this.#removeAt(buttons.length - 1);\n      }\n      return;\n    }\n    if (event.key === \"ArrowLeft\" && this.inputTarget.value === \"\") {\n      const buttons = this.#removeButtons;\n      if (buttons.length > 0) {\n        event.preventDefault();\n        this.#roving.setActive(buttons.length - 1, { focus: true });\n      }\n    }\n  }\n\n  /**\n   * Deletes the tag whose remove button was clicked. Delegated on the tags\n   * container (like `#onTagKeydown`) rather than bound per chip via\n   * `data-action`, so it works the instant a chip is appended without waiting on\n   * Stimulus to wire a freshly created element.\n   */\n  readonly #onTagClick = (event: MouseEvent): void => {\n    const button = (event.target as HTMLElement).closest(\"button\");\n    if (!button || !this.tagsTarget.contains(button)) return;\n    const index = this.#removeButtons.indexOf(button as HTMLButtonElement);\n    if (index !== -1) this.#removeAt(index);\n  };\n\n  /** Validates and adds the current input value as a tag, then clears the input. */\n  #commitInput(): void {\n    const value = this.inputTarget.value.trim();\n    if (value === \"\") {\n      this.#reject(value, \"empty\");\n      return;\n    }\n    if (this.maxValue > 0 && this.tagTargets.length >= this.maxValue) {\n      this.#reject(value, \"max\");\n      return;\n    }\n    if (!this.allowDuplicatesValue && this.#values.includes(value)) {\n      this.#reject(value, \"duplicate\");\n      return;\n    }\n    this.#appendTag(value);\n    this.inputTarget.value = \"\";\n    this.#announce(value);\n    this.#syncState();\n    this.dispatch(\"change\", { detail: { tags: this.#values } });\n  }\n\n  /** Builds one chip from the template and appends it to the tag list. */\n  #appendTag(value: string): void {\n    if (!this.hasTagTemplateTarget) return;\n    const fragment = this.tagTemplateTarget.content.cloneNode(true) as DocumentFragment;\n    const tag = fragment.querySelector<HTMLElement>('[data-stimeo--tags-input-target=\"tag\"]');\n    const label = fragment.querySelector<HTMLElement>('[data-tags-input-slot=\"label\"]');\n    const button = fragment.querySelector<HTMLButtonElement>(\"button\");\n    if (!tag || !button) return;\n    tag.dataset.value = value;\n    if (label) label.textContent = value;\n    button.setAttribute(\"aria-label\", `Remove ${value}`);\n    button.tabIndex = -1;\n    this.tagsTarget.appendChild(fragment);\n  }\n\n  /** Removes the tag at `index`, then moves focus to a neighbor or the input. */\n  #removeAt(index: number): void {\n    const tag = this.tagTargets[index];\n    if (!tag) return;\n    const value = tag.dataset.value ?? \"\";\n    tag.remove();\n    this.#announce(value);\n    this.#syncState();\n    this.dispatch(\"change\", { detail: { tags: this.#values } });\n    const remaining = this.#removeButtons;\n    if (remaining.length === 0) {\n      this.inputTarget.focus();\n    } else {\n      this.#roving.setActive(Math.min(index, remaining.length - 1), { focus: true });\n    }\n  }\n\n  /** Handles arrow navigation and deletion within the chip list (delegated). */\n  readonly #onTagKeydown = (event: KeyboardEvent): void => {\n    const button = (event.target as HTMLElement).closest(\"button\");\n    if (!button) return;\n    const buttons = this.#removeButtons;\n    const index = buttons.indexOf(button);\n    if (index === -1) return;\n    switch (event.key) {\n      case \"ArrowLeft\":\n        if (index > 0) {\n          event.preventDefault();\n          this.#roving.setActive(index - 1, { focus: true });\n        }\n        break;\n      case \"ArrowRight\":\n        event.preventDefault();\n        if (index < buttons.length - 1) {\n          this.#roving.setActive(index + 1, { focus: true });\n        } else {\n          this.inputTarget.focus();\n        }\n        break;\n      case \"Delete\":\n      case \"Backspace\":\n        event.preventDefault();\n        this.#removeAt(index);\n        break;\n      default:\n        break;\n    }\n  };\n\n  /** Rebuilds the hidden form fields, the `full` flag, and the roving Tab stop. */\n  #syncState(): void {\n    if (this.hasFieldsTarget) {\n      this.fieldsTarget.replaceChildren(\n        ...this.#values.map((value) => {\n          const input = document.createElement(\"input\");\n          input.type = \"hidden\";\n          input.name = this.nameValue;\n          input.value = value;\n          return input;\n        }),\n      );\n    }\n    const full = this.maxValue > 0 && this.tagTargets.length >= this.maxValue;\n    this.element.toggleAttribute(\"data-stimeo--tags-input-full\", full);\n    // Keep exactly one remove button tabbable so the chip list is a single stop.\n    if (this.#removeButtons.length > 0 && this.#roving.activeIndex === -1) {\n      this.#roving.setActive(0);\n    }\n  }\n\n  /** Mirrors the changed tag into the live region for assistive tech. */\n  #announce(value: string): void {\n    if (this.hasStatusTarget) this.statusTarget.textContent = value;\n  }\n\n  /** Reports a rejected addition via `stimeo--tags-input:reject`. */\n  #reject(value: string, reason: \"duplicate\" | \"empty\" | \"max\"): void {\n    this.dispatch(\"reject\", { detail: { value, reason } });\n  }\n\n  /** The remove buttons in document order (the roving navigation set). */\n  get #removeButtons(): HTMLButtonElement[] {\n    return Array.from(this.tagsTarget.querySelectorAll<HTMLButtonElement>(\"button\"));\n  }\n\n  /** Current tag values in order. */\n  get #values(): string[] {\n    return this.tagTargets.map((tag) => tag.dataset.value ?? \"\");\n  }\n}\n"]}

package/dist/controllers/theme_controller.js

@@ -1,5 +1,22 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/theme_controller.ts
+
+// src/utils/safe_storage.ts
+function readLocalStorage(key) {
+  try {
+    return window.localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+function writeLocalStorage(key, value) {
+  try {
+    window.localStorage.setItem(key, value);
+  } catch {
+  }
+}
+
 // src/controllers/theme_controller.ts
 var MODES = ["light", "dark", "system"];
 var isMode = (value) => typeof value === "string" && MODES.includes(value);
@@ -133,19 +150,12 @@ var ThemeController = class extends Controller {
   }
   /** 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;
-    }
+    const value = readLocalStorage(this.storageKeyValue);
+    return isMode(value) ? value : null;
   }
   /** Persists the mode, swallowing storage errors (private mode / quota). */
   #writeStored(mode) {
-    try {
-      window.localStorage.setItem(this.storageKeyValue, mode);
-    } catch {
-    }
+    writeLocalStorage(this.storageKeyValue, mode);
   }
 };