stimeo-ui 0.1.0-beta.3 → 0.2.1

package/CHANGELOG.md

@@ -7,6 +7,154 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 While the version is `0.x`, the public API (the `stimeo--*` data attributes) may
 change between releases.
 
+## [0.2.1] - 2026-07-26
+
+Patch release from a review of the disclosure and layout components, plus a
+packaging fix. No breaking changes, but `stimeo check` now reports two markup
+requirements that existing pages may need to satisfy.
+
+### Added
+
+- sidebar: `beforeCache` action for Turbo page caching — wire
+  `data-action="turbo:before-cache@document->stimeo--sidebar#beforeCache"` to close
+  an open overlay and release its modal side effects before the snapshot is taken.
+- sidebar, stepper: the `breakpoint` and `index` values now take effect when
+  changed at runtime. An invalid `breakpoint` falls back to 768px.
+- Inspector: `stimeo check` verifies that the tabs `role="tablist"` element has an
+  accessible name.
+
+### Changed
+
+- tabs: the tablist container is now a required `list` target. Add
+  `data-stimeo--tabs-target="list"` to it, or `stimeo check` reports an error.
+  Runtime behavior is unchanged.
+- Inspector: `stimeo check` reports an error when `stimeo--sidebar` markup has no
+  `panel` target.
+
+### Fixed
+
+- package exports: 26 controllers — including sidebar, drawer, collapsible,
+  read-more, alert-dialog, carousel and tree-view — had no build output behind the
+  `./controllers/*` subpath their `package.json` `exports` declares, so
+  `import … from "stimeo-ui/controllers/<name>_controller"` failed to resolve in
+  0.2.0. Every controller in the catalog now ships one.
+- transition, flash, toast, sidebar, drawer, collapsible: animations now wait for
+  every declared transition property and its `transition-delay`, not just the
+  first duration. Multi-property and delayed animations are no longer cut short, a
+  cancelled transition settles immediately, and pseudo-element transitions no
+  longer end the wait early — so `hidden`, events, focus restore and scroll unlock
+  land at the right moment.
+- sidebar, drawer, collapsible: an interrupted close animation no longer leaves the
+  panel stuck open with the focus trap, background `inert` or scroll lock in place.
+- sidebar, drawer, collapsible, read-more, sticky-observer, overflow-indicator:
+  targets swapped in or added after connect (Turbo morph, lazily loaded Frames,
+  Streams) are now reconciled with the current state instead of keeping the value
+  they were rendered with.
+- overflow-indicator, scroll-area: horizontal position is read logically, so the
+  overflow attributes, the `scrollByPage` action, `data-scroll` and
+  `--stimeo-scroll-progress` behave correctly inside `dir="rtl"` containers.
+- overflow-indicator: reaching an edge while a page button has focus no longer
+  drops focus to the page body — the button stays focused and inert via
+  `aria-disabled`, becoming natively `disabled` only once blurred.
+- read-more: the toggle is no longer hidden while it holds keyboard focus when the
+  text starts to fit; overflow is re-checked on blur, on content changes, and when
+  media inside it finishes loading.
+- sticky-observer: `data-stuck="true"` is set only once the sentinel has actually
+  scrolled past the top edge — one that is merely out of view, or inside a hidden
+  container, no longer marks the element as stuck. Negative `offset` values are now
+  accepted.
+- intersection: an element with no layout box (hidden ancestor, collapsed
+  `<details>`) is no longer reported as scrolled past.
+
+## [0.2.0] - 2026-07-22
+
+First release off the beta channel: `npm install stimeo-ui` now resolves
+this version as `latest`, and the gem no longer needs a prerelease pin. The
+library is still `0.x`, so the `stimeo--*` attribute API may change before
+1.0. The changes below come from a component-by-component hardening review
+of the catalog, centered on layered Escape handling, IME-safe input, and
+focus/dismissal correctness in the overlay controllers.
+
+### Added
+
+- dropdown: the trigger is now associated with its menu — on connect the
+  controller sets `aria-controls`, minting a menu id when needed. Authored
+  markup is never overwritten.
+- toast: item interaction (dismiss click, Escape, hover/focus pause) is now
+  delegated from the list container, so dynamically appended toasts work
+  without per-item `data-action` attributes; the dismiss button is the
+  element carrying the new `data-toast-dismiss` attribute. Existing per-item
+  markup keeps working.
+- Inspector: new checks — the menu target of `stimeo--menu` must carry an
+  accessible name, and every command-palette option needs a unique `id`.
+
+### Changed
+
+- tooltip, hover-card: Escape dismissal is now owned by the shared layer
+  stack, so the redundant `onKeydown` action was removed from the
+  controllers and the documented trigger markup. Markup still binding it
+  logs a Stimulus missing-action warning; dismissal keeps working.
+- toast: the live-region role (`status`/`alert`) now applies to the body
+  slot instead of the toast item, so screen readers announce only the
+  message text.
+- menu, overflow-menu: the documented markup contract now requires an
+  accessible name on the `role="menu"` element (`aria-labelledby` or
+  `aria-label`). Existing markup keeps working; the new Inspector check
+  flags the missing name.
+- command-palette: option ARIA is now controller-managed — `data-disabled`
+  and authored `aria-disabled` stay in sync, and every option gets a
+  baseline `aria-selected="false"`.
+
+### Fixed
+
+- Escape now dismisses exactly one overlay layer per press — the most
+  recently opened one — when overlays are stacked: nested dialogs no longer
+  close together, a tooltip or hover card shown above an open menu or dialog
+  no longer closes the layer beneath it, a press already handled by a nested
+  component (an inline edit, a listbox, a toast) is never acted on twice,
+  and an Escape aimed at another layer no longer closes an overlay
+  underneath or yanks focus back to its trigger. This covers dropdown,
+  popover, menu, menubar, context-menu, navigation-menu, hover-card,
+  tooltip, and the modal overlays; a combobox with its list closed now lets
+  Escape reach the enclosing dialog.
+- Escape or Enter pressed during an IME composition now steers the
+  composition only: cancelling a Japanese/Chinese/Korean conversion no
+  longer closes overlays, dismisses a toast or dismissible, or cancels an
+  inline edit, a drag, or a pending date-range start — and a
+  conversion-confirming Enter no longer saves an edit, commits a tag, or
+  selects a command. Filtering inputs (combobox, multi-select,
+  command-palette) apply the confirmed text once on `compositionend` instead
+  of filtering intermediate text. The guards track the composition lifecycle
+  instead of the deprecated `keyCode === 229` heuristic, and otp ignores
+  events flagged `isComposing` even without a preceding `compositionstart`.
+- command-palette: the open/close hotkey no longer misfires when Shift or
+  Alt is held or when both Cmd and Ctrl are down, an unsupported hotkey
+  value now does nothing, and stale `aria-activedescendant`/active-option
+  state is cleaned up correctly.
+- menu, context-menu: `aria-disabled="true"` items are truly inert —
+  activating one runs no consumer handlers and the menu stays open — and
+  Tab now lets the browser move focus before the menu closes. context-menu
+  also closes on an outside right-click without stealing focus from the
+  new target.
+- popover, navigation-menu, dropdown: outside-interaction handling
+  corrected — an outside click closes without refocusing the trigger,
+  clicking non-focusable panel content or deactivating the browser window
+  no longer dismisses an open panel, and dropdown's outside-click listener
+  runs in the capture phase so a widget that stops click propagation can no
+  longer leave a stuck menu.
+- tooltip, hover-card: keyboard focus and pointer hover are now tracked as
+  separate reasons to stay open (per WCAG 1.4.13), and a pending show/hide
+  delay no longer leaves the element permanently stuck after a
+  disconnect/reconnect cycle (e.g. a Turbo restore). The documented
+  hover-card markup now also closes the card after keyboard focus leaves it.
+- toast: runtime `duration` changes now take effect (0 or below makes
+  toasts persistent), a toast paused after its time fully elapsed dismisses
+  immediately, and dismissal is idempotent — the dismiss event fires exactly
+  once per removal.
+- dismissible: the `closeOnEscape` value is live after connect, and focus
+  retreat now skips unfocusable candidates instead of silently dropping
+  focus to `<body>`.
+
 ## [0.1.0-beta.3] - 2026-07-18
 
 Maintenance release: one bug fix in the focus-trap primitive shared by the
@@ -86,6 +234,7 @@ Initial public alpha: 101 behavior-only, accessible Stimulus controllers driven
 by `data-*` attributes, shipping no CSS. Published to npm (with provenance) and
 RubyGems.
 
+[0.2.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.2.0
 [0.1.0-beta.3]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.1.0-beta.3
 [0.1.0-beta.2]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.1.0-beta.2
 [0.1.0-beta.1]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.1.0-beta.1

package/README.md

@@ -5,9 +5,9 @@
   </picture>
 </h1>
 
-<p align="center"><a href="https://stimeo-labs.com"><strong>Live demo (beta) →</strong></a></p>
+<p align="center"><a href="https://stimeo-labs.com"><strong>Live demo →</strong></a></p>
 
-[![CI](https://github.com/taiyaky/stimeo-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/taiyaky/stimeo-ui/actions/workflows/ci.yml) [![npm](https://img.shields.io/npm/v/stimeo-ui/beta)](https://www.npmjs.com/package/stimeo-ui) [![gem](https://img.shields.io/gem/v/stimeo-ui)](https://rubygems.org/gems/stimeo-ui) [![License: MIT](https://img.shields.io/github/license/taiyaky/stimeo-ui)](LICENSE)
+[![CI](https://github.com/taiyaky/stimeo-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/taiyaky/stimeo-ui/actions/workflows/ci.yml) [![npm](https://img.shields.io/npm/v/stimeo-ui)](https://www.npmjs.com/package/stimeo-ui) [![gem](https://img.shields.io/gem/v/stimeo-ui)](https://rubygems.org/gems/stimeo-ui) [![License: MIT](https://img.shields.io/github/license/taiyaky/stimeo-ui)](LICENSE)
 
 **Headless Stimulus UI framework for Ruby on Rails.** Stimeo UI ships *behavior*
 — ARIA state, keyboard interaction, focus management, Turbo resilience — as
@@ -23,15 +23,15 @@ owns the look entirely.
 - Public controller identifiers use the `stimeo--` namespace (e.g.
   `stimeo--dropdown`).
 
-> Status: **beta** (`0.x`). The `stimeo--*` attribute API may still change before
-> 1.0 — pin your version.
+> Status: **pre-release** (`0.x`). The `stimeo--*` attribute API may still
+> change before 1.0 — pin your version.
 
 ## Install
 
 ### Rails with importmap (recommended)
 
 ```bash
-bundle add stimeo-ui --version "0.1.0.pre.beta.3"
+bundle add stimeo-ui
 bin/rails generate stimeo:install
 ```
 
@@ -50,7 +50,7 @@ Stimulus application. Then drive components from HTML alone:
 ### npm (jsbundling or any bundler)
 
 ```bash
-npm install stimeo-ui@beta @hotwired/stimulus
+npm install stimeo-ui @hotwired/stimulus
 ```
 
 ```js

package/dist/controllers/accordion_controller.d.ts

@@ -6,13 +6,14 @@ import { Controller } from '@hotwired/stimulus';
  * Markup contract (identifier: `stimeo--accordion`):
  *   <div data-controller="stimeo--accordion">
  *     <h3>
- *       <button data-stimeo--accordion-target="trigger"
+ *       <button id="trigger-1"
+ *               data-stimeo--accordion-target="trigger"
  *               data-action="stimeo--accordion#toggle
  *                            keydown->stimeo--accordion#onKeydown"
  *               aria-expanded="false" aria-controls="panel-1">Section 1</button>
  *     </h3>
  *     <div id="panel-1" data-stimeo--accordion-target="panel"
- *          role="region" hidden>…</div>
+ *          role="region" aria-labelledby="trigger-1" hidden>…</div>
  *     <!-- repeat header/panel pairs -->
  *   </div>
  *

package/dist/controllers/accordion_controller.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/controllers/accordion_controller.ts"],"names":[],"mappings":"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","file":"accordion_controller.js","sourcesContent":["import { Controller } from \"@hotwired/stimulus\";\n\n/**\n * Headless, accessible accordion behavior.\n *\n * Markup contract (identifier: `stimeo--accordion`):\n *   <div data-controller=\"stimeo--accordion\">\n *     <h3>\n *       <button data-stimeo--accordion-target=\"trigger\"\n *               data-action=\"stimeo--accordion#toggle\n *                            keydown->stimeo--accordion#onKeydown\"\n *               aria-expanded=\"false\" aria-controls=\"panel-1\">Section 1</button>\n *     </h3>\n *     <div id=\"panel-1\" data-stimeo--accordion-target=\"panel\"\n *          role=\"region\" hidden>…</div>\n *     <!-- repeat header/panel pairs -->\n *   </div>\n *\n * Implements the WAI-ARIA APG **Accordion** pattern. Each header button is\n * associated with its panel through `aria-controls`; the panel's `id` is the\n * single source of truth for the pairing, so headers and panels need not be\n * adjacent siblings.\n *\n * @remarks\n * Multiple panels may be open at once (this is the APG-allowed default). State\n * is reflected through `aria-expanded` on the header and the `hidden` attribute\n * on the panel — never through visual styling, which the consumer owns.\n *\n * Behavior provided:\n * - Click a header to toggle its panel (`aria-expanded` + `hidden` reflect state).\n * - `ArrowDown`/`ArrowUp` move focus between headers; `Home`/`End` jump to the\n *   first/last header. Hidden headers (including those inside a hidden subtree,\n *   e.g. a section a filter collapsed) are skipped so focus stays perceivable.\n * - {@link expandAll} / {@link collapseAll} open or close every panel at once,\n *   for an optional \"expand all / collapse all\" control pair anywhere in scope.\n */\nexport class AccordionController extends Controller<HTMLElement> {\n  static override targets = [\"trigger\", \"panel\"];\n  static actions = [\"collapseAll\", \"expandAll\", \"onKeydown\", \"toggle\"] as const;\n\n  declare readonly triggerTargets: HTMLButtonElement[];\n  declare readonly panelTargets: HTMLElement[];\n\n  /** Toggles the panel controlled by the activated header. */\n  toggle(event: Event): void {\n    const trigger = event.currentTarget as HTMLButtonElement;\n    const panel = this.#panelFor(trigger);\n    if (!panel) return;\n\n    this.#setExpanded(trigger, panel, trigger.getAttribute(\"aria-expanded\") !== \"true\");\n  }\n\n  /** Opens every panel. Bound via `data-action` on an \"expand all\" control. */\n  expandAll(): void {\n    this.#setAll(true);\n  }\n\n  /** Closes every panel. Bound via `data-action` on a \"collapse all\" control. */\n  collapseAll(): void {\n    this.#setAll(false);\n  }\n\n  /** Drives every header/panel pair to the same expanded state. */\n  #setAll(open: boolean): void {\n    for (const trigger of this.triggerTargets) {\n      const panel = this.#panelFor(trigger);\n      if (panel) this.#setExpanded(trigger, panel, open);\n    }\n  }\n\n  /** Reflects one header/panel pair's state through `aria-expanded` + `hidden`. */\n  #setExpanded(trigger: HTMLButtonElement, panel: HTMLElement, open: boolean): void {\n    trigger.setAttribute(\"aria-expanded\", open ? \"true\" : \"false\");\n    panel.hidden = !open;\n  }\n\n  /**\n   * Moves focus between headers per the APG keyboard model, skipping any header\n   * that is hidden or nested in a hidden subtree. A consumer may hide whole\n   * sections (e.g. an `stimeo--filter` that collapses empty groups), and an\n   * unperceivable header must never become an arrow-key target — otherwise\n   * `.focus()` lands on nothing and navigation appears to stall.\n   */\n  onKeydown(event: KeyboardEvent): void {\n    const current = event.currentTarget as HTMLButtonElement;\n    if (this.triggerTargets.indexOf(current) === -1) return;\n\n    // `closest(\"[hidden]\")` catches both a directly-hidden header and one inside a\n    // hidden ancestor (the filter-group case); navigate over the visible set only.\n    const navigable = this.triggerTargets.filter((trigger) => trigger.closest(\"[hidden]\") === null);\n    const here = navigable.indexOf(current);\n    if (here === -1) return;\n\n    let next: HTMLButtonElement | undefined;\n    switch (event.key) {\n      case \"ArrowDown\":\n        next = navigable[(here + 1) % navigable.length];\n        break;\n      case \"ArrowUp\":\n        next = navigable[(here - 1 + navigable.length) % navigable.length];\n        break;\n      case \"Home\":\n        next = navigable[0];\n        break;\n      case \"End\":\n        next = navigable[navigable.length - 1];\n        break;\n      default:\n        return;\n    }\n\n    event.preventDefault();\n    next?.focus();\n  }\n\n  /** Resolves the panel a header controls via its `aria-controls` reference. */\n  #panelFor(trigger: HTMLButtonElement): HTMLElement | null {\n    const id = trigger.getAttribute(\"aria-controls\");\n    return id ? (this.panelTargets.find((panel) => panel.id === id) ?? null) : null;\n  }\n}\n"]}
+{"version":3,"sources":["../../src/controllers/accordion_controller.ts"],"names":[],"mappings":"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","file":"accordion_controller.js","sourcesContent":["import { Controller } from \"@hotwired/stimulus\";\n\n/**\n * Headless, accessible accordion behavior.\n *\n * Markup contract (identifier: `stimeo--accordion`):\n *   <div data-controller=\"stimeo--accordion\">\n *     <h3>\n *       <button id=\"trigger-1\"\n *               data-stimeo--accordion-target=\"trigger\"\n *               data-action=\"stimeo--accordion#toggle\n *                            keydown->stimeo--accordion#onKeydown\"\n *               aria-expanded=\"false\" aria-controls=\"panel-1\">Section 1</button>\n *     </h3>\n *     <div id=\"panel-1\" data-stimeo--accordion-target=\"panel\"\n *          role=\"region\" aria-labelledby=\"trigger-1\" hidden>…</div>\n *     <!-- repeat header/panel pairs -->\n *   </div>\n *\n * Implements the WAI-ARIA APG **Accordion** pattern. Each header button is\n * associated with its panel through `aria-controls`; the panel's `id` is the\n * single source of truth for the pairing, so headers and panels need not be\n * adjacent siblings.\n *\n * @remarks\n * Multiple panels may be open at once (this is the APG-allowed default). State\n * is reflected through `aria-expanded` on the header and the `hidden` attribute\n * on the panel — never through visual styling, which the consumer owns.\n *\n * Behavior provided:\n * - Click a header to toggle its panel (`aria-expanded` + `hidden` reflect state).\n * - `ArrowDown`/`ArrowUp` move focus between headers; `Home`/`End` jump to the\n *   first/last header. Hidden headers (including those inside a hidden subtree,\n *   e.g. a section a filter collapsed) are skipped so focus stays perceivable.\n * - {@link expandAll} / {@link collapseAll} open or close every panel at once,\n *   for an optional \"expand all / collapse all\" control pair anywhere in scope.\n */\nexport class AccordionController extends Controller<HTMLElement> {\n  static override targets = [\"trigger\", \"panel\"];\n  static actions = [\"collapseAll\", \"expandAll\", \"onKeydown\", \"toggle\"] as const;\n\n  declare readonly triggerTargets: HTMLButtonElement[];\n  declare readonly panelTargets: HTMLElement[];\n\n  /** Toggles the panel controlled by the activated header. */\n  toggle(event: Event): void {\n    const trigger = event.currentTarget as HTMLButtonElement;\n    const panel = this.#panelFor(trigger);\n    if (!panel) return;\n\n    this.#setExpanded(trigger, panel, trigger.getAttribute(\"aria-expanded\") !== \"true\");\n  }\n\n  /** Opens every panel. Bound via `data-action` on an \"expand all\" control. */\n  expandAll(): void {\n    this.#setAll(true);\n  }\n\n  /** Closes every panel. Bound via `data-action` on a \"collapse all\" control. */\n  collapseAll(): void {\n    this.#setAll(false);\n  }\n\n  /** Drives every header/panel pair to the same expanded state. */\n  #setAll(open: boolean): void {\n    for (const trigger of this.triggerTargets) {\n      const panel = this.#panelFor(trigger);\n      if (panel) this.#setExpanded(trigger, panel, open);\n    }\n  }\n\n  /** Reflects one header/panel pair's state through `aria-expanded` + `hidden`. */\n  #setExpanded(trigger: HTMLButtonElement, panel: HTMLElement, open: boolean): void {\n    trigger.setAttribute(\"aria-expanded\", open ? \"true\" : \"false\");\n    panel.hidden = !open;\n  }\n\n  /**\n   * Moves focus between headers per the APG keyboard model, skipping any header\n   * that is hidden or nested in a hidden subtree. A consumer may hide whole\n   * sections (e.g. an `stimeo--filter` that collapses empty groups), and an\n   * unperceivable header must never become an arrow-key target — otherwise\n   * `.focus()` lands on nothing and navigation appears to stall.\n   */\n  onKeydown(event: KeyboardEvent): void {\n    const current = event.currentTarget as HTMLButtonElement;\n    if (this.triggerTargets.indexOf(current) === -1) return;\n\n    // `closest(\"[hidden]\")` catches both a directly-hidden header and one inside a\n    // hidden ancestor (the filter-group case); navigate over the visible set only.\n    const navigable = this.triggerTargets.filter((trigger) => trigger.closest(\"[hidden]\") === null);\n    const here = navigable.indexOf(current);\n    if (here === -1) return;\n\n    let next: HTMLButtonElement | undefined;\n    switch (event.key) {\n      case \"ArrowDown\":\n        next = navigable[(here + 1) % navigable.length];\n        break;\n      case \"ArrowUp\":\n        next = navigable[(here - 1 + navigable.length) % navigable.length];\n        break;\n      case \"Home\":\n        next = navigable[0];\n        break;\n      case \"End\":\n        next = navigable[navigable.length - 1];\n        break;\n      default:\n        return;\n    }\n\n    event.preventDefault();\n    next?.focus();\n  }\n\n  /** Resolves the panel a header controls via its `aria-controls` reference. */\n  #panelFor(trigger: HTMLButtonElement): HTMLElement | null {\n    const id = trigger.getAttribute(\"aria-controls\");\n    return id ? (this.panelTargets.find((panel) => panel.id === id) ?? null) : null;\n  }\n}\n"]}

package/dist/controllers/alert_dialog_controller.d.ts

@@ -0,0 +1,64 @@
+import { Controller } from '@hotwired/stimulus';
+
+/**
+ * Headless, accessible **alert dialog** behavior.
+ *
+ * Markup contract (identifier: `stimeo--alert-dialog`):
+ *   <div data-controller="stimeo--alert-dialog">
+ *     <button data-stimeo--alert-dialog-target="trigger"
+ *             data-action="click->stimeo--alert-dialog#open">Delete…</button>
+ *     <div data-stimeo--alert-dialog-target="dialog" role="alertdialog"
+ *          aria-modal="true" aria-labelledby="t" aria-describedby="d" hidden>
+ *       <h2 id="t">…</h2><p id="d">…</p>
+ *       <button data-stimeo--alert-dialog-target="initialFocus"
+ *               data-action="click->stimeo--alert-dialog#cancel">Cancel</button>
+ *       <button data-action="click->stimeo--alert-dialog#confirm">Delete</button>
+ *     </div>
+ *   </div>
+ *
+ * Implements the WAI-ARIA APG **Alert Dialog** pattern. It is the same modal as
+ * `stimeo--dialog` with two deliberate differences that suit an *interrupting
+ * confirmation*: it never closes on a backdrop click (an accidental dismissal
+ * would be dangerous), and it exposes explicit {@link confirm}/{@link cancel}
+ * actions that emit events so the consumer only writes the message and "what to
+ * do on confirm".
+ *
+ * @remarks
+ * Behavior only. The modal lifecycle (focus trap, scroll lock, background
+ * `inert`, focus restore, teardown reversal) is delegated to the shared
+ * {@link FocusTrap}. The only closing affordances are the confirm/cancel actions
+ * and `Escape` (which cancels) — there is intentionally no backdrop close.
+ *
+ * Behavior provided:
+ * - {@link open} shows the dialog and moves focus to the `initialFocus` target
+ *   (the least destructive action, by convention), else the first focusable
+ *   element.
+ * - `Tab`/`Shift+Tab` cycle focus within the dialog (focus trap).
+ * - {@link confirm} closes and dispatches `stimeo--alert-dialog:confirm`.
+ * - {@link cancel} and `Escape` close and dispatch `stimeo--alert-dialog:cancel`
+ *   with a `reason` of `"user"` / `"escape"`. Focus returns to the opener.
+ */
+declare class AlertDialogController extends Controller<HTMLElement> {
+    #private;
+    static targets: string[];
+    static actions: readonly ["cancel", "confirm", "open"];
+    static events: readonly ["cancel", "confirm"];
+    readonly triggerTarget: HTMLElement;
+    readonly dialogTarget: HTMLElement;
+    readonly initialFocusTarget: HTMLElement;
+    readonly hasTriggerTarget: boolean;
+    readonly hasDialogTarget: boolean;
+    readonly hasInitialFocusTarget: boolean;
+    /** Starts closed (idempotently reflects the closed state on the markup). */
+    connect(): void;
+    /** Reverts the modal side effects if torn down while open (Turbo navigation). */
+    disconnect(): void;
+    /** Opens the dialog, traps focus, and locks background scroll. */
+    open(): void;
+    /** Confirms: closes and dispatches `confirm`. Bound via `data-action`. */
+    confirm(): void;
+    /** Cancels (user action): closes and dispatches `cancel` with `reason: "user"`. */
+    cancel(): void;
+}
+
+export { AlertDialogController };

package/dist/controllers/alert_dialog_controller.js

@@ -0,0 +1,318 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/alert_dialog_controller.ts
+
+// src/utils/escape_layer.ts
+var EscapeLayer = class _EscapeLayer {
+  static #registries = /* @__PURE__ */ new WeakMap();
+  #ownerDocument = null;
+  /** Dismissal callback while active; `null` when inactive. */
+  #onDismiss = null;
+  /** Live predicate deciding whether the layer claims a press; `null` = always. */
+  #claims = null;
+  /**
+   * Activates this layer at the top of its document's Escape stack, installing
+   * the document's shared resolver listener if this is its first layer.
+   * Re-activating an already-active layer moves it to the top.
+   */
+  activate(ownerDocument = document, options) {
+    this.deactivate();
+    let registry = _EscapeLayer.#registries.get(ownerDocument);
+    if (!registry) {
+      registry = _EscapeLayer.#createRegistry();
+      _EscapeLayer.#registries.set(ownerDocument, registry);
+      ownerDocument.addEventListener("keydown", registry.onKeydown);
+    }
+    registry.stack.push(this);
+    this.#ownerDocument = ownerDocument;
+    this.#onDismiss = options.onDismiss;
+    this.#claims = options.claims ?? null;
+  }
+  /**
+   * Removes this layer from its document's Escape stack, uninstalling the
+   * shared listener when the stack empties. Safe to call when inactive.
+   */
+  deactivate() {
+    const ownerDocument = this.#ownerDocument;
+    if (!ownerDocument) return;
+    const registry = _EscapeLayer.#registries.get(ownerDocument);
+    if (registry) {
+      const index = registry.stack.lastIndexOf(this);
+      if (index >= 0) registry.stack.splice(index, 1);
+      if (registry.stack.length === 0) {
+        ownerDocument.removeEventListener("keydown", registry.onKeydown);
+        _EscapeLayer.#registries.delete(ownerDocument);
+      }
+    }
+    this.#ownerDocument = null;
+    this.#onDismiss = null;
+    this.#claims = null;
+  }
+  /**
+   * Whether this active layer would own a press right now: it is the topmost
+   * layer whose {@link EscapeLayerOptions.claims} passes. Exposed for tests
+   * and diagnostics — production dismissal goes through the shared listener.
+   */
+  get ownsEscape() {
+    const ownerDocument = this.#ownerDocument;
+    if (!ownerDocument) return false;
+    const registry = _EscapeLayer.#registries.get(ownerDocument);
+    if (!registry) return false;
+    return _EscapeLayer.#resolveOwner(registry.stack) === this;
+  }
+  /** Builds a document's registry with its shared resolver listener. */
+  static #createRegistry() {
+    const registry = {
+      stack: [],
+      onKeydown: (event) => {
+        if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+        const owner = _EscapeLayer.#resolveOwner(registry.stack);
+        if (!owner) return;
+        event.preventDefault();
+        owner.#onDismiss?.();
+      }
+    };
+    return registry;
+  }
+  /** The topmost stack layer whose claims predicate passes, or `null`. */
+  static #resolveOwner(stack) {
+    for (let index = stack.length - 1; index >= 0; index--) {
+      const layer = stack[index];
+      if (!layer) continue;
+      if (layer.#claims && !layer.#claims()) continue;
+      return layer;
+    }
+    return null;
+  }
+};
+
+// src/utils/focus_trap.ts
+var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var FocusTrap = class {
+  /** The element focused before activation, restored on deactivation. */
+  #previouslyFocused = null;
+  /** The body's inline `overflow` before locking, restored on deactivation. */
+  #previousBodyOverflow = "";
+  /** Whether scroll was locked this activation (so it is only restored if applied). */
+  #scrollLocked = false;
+  /** Background siblings made `inert` while active, restored on deactivation. */
+  #inertedSiblings = [];
+  /** Whether the modal side effects are currently applied. */
+  #activeState = false;
+  /** Registers the trap on the shared Escape stack while active (see {@link EscapeLayer}). */
+  #escapeLayer = new EscapeLayer();
+  /** Returns the trapped element; called on every operation for the live target. */
+  #getContainer;
+  /** Closing/focus hooks; see {@link FocusTrapOptions}. */
+  #options;
+  /**
+   * @param getContainer - Returns the trapped element. Called on every operation
+   *   so the live target is always used.
+   * @param options - Closing/focus hooks; see {@link FocusTrapOptions}.
+   */
+  constructor(getContainer, options = {}) {
+    this.#getContainer = getContainer;
+    this.#options = options;
+  }
+  /** Whether the trap is currently active. */
+  get active() {
+    return this.#activeState;
+  }
+  /**
+   * Applies the trap: records the current focus, optionally locks background scroll
+   * and makes background siblings `inert`, listens for `Tab`/`Escape`, and (unless
+   * `autoFocus` is off) moves focus inside. No-ops if already active.
+   */
+  activate() {
+    if (this.#activeState) return;
+    this.#activeState = true;
+    const active = document.activeElement;
+    this.#previouslyFocused = active instanceof HTMLElement && active !== document.body ? active : null;
+    if (this.#flag(this.#options.lockScroll, true)) {
+      this.#previousBodyOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      this.#scrollLocked = true;
+    }
+    if (this.#flag(this.#options.isolate, true)) this.#isolateBackground();
+    document.addEventListener("keydown", this.#onKeydown);
+    document.addEventListener("turbo:before-cache", this.#onBeforeCache);
+    const onEscape = this.#options.onEscape;
+    if (onEscape) this.#escapeLayer.activate(document, { onDismiss: () => onEscape() });
+    if (this.#flag(this.#options.autoFocus, true)) this.#focusInitial();
+  }
+  /**
+   * Reverts every side effect applied by {@link activate}. No-ops if inactive, so
+   * a controller can call it defensively from both `close()` and `disconnect()`.
+   *
+   * @param restoreFocus - Move focus back to the opener (default `true`). Pass
+   *   `false` on teardown (`disconnect`), where yanking focus is undesirable.
+   */
+  deactivate({ restoreFocus = true } = {}) {
+    if (!this.#activeState) return;
+    this.#activeState = false;
+    this.#escapeLayer.deactivate();
+    document.removeEventListener("keydown", this.#onKeydown);
+    document.removeEventListener("turbo:before-cache", this.#onBeforeCache);
+    if (this.#scrollLocked) {
+      document.body.style.overflow = this.#previousBodyOverflow;
+      this.#scrollLocked = false;
+    }
+    this.#releaseBackground();
+    if (restoreFocus) {
+      const target = this.#previouslyFocused ?? this.#options.fallbackFocus?.() ?? null;
+      target?.focus();
+    }
+  }
+  /** Resolves a boolean-or-getter option, defaulting when it was not provided. */
+  #flag(option, fallback) {
+    if (option === void 0) return fallback;
+    return typeof option === "function" ? option() : option;
+  }
+  /**
+   * Reverts the side effects just before Turbo caches the page snapshot, so an
+   * overlay left open does not bake the scroll lock into `body[style]` — a
+   * restored page would feed that locked value back into {@link activate} as the
+   * baseline, and closing would then never unlock the page. Markup state stays
+   * untouched (restore-open designs reopen against a clean baseline), and focus
+   * is left alone mid-navigation. The listener lives only while active.
+   */
+  #onBeforeCache = () => {
+    this.deactivate({ restoreFocus: false });
+  };
+  /**
+   * Handles `Tab` (focus trap) while active. `Escape` dismissal is owned by the
+   * shared {@link EscapeLayer} resolver, so Tab trapping stays independent of
+   * which layer currently owns Escape.
+   */
+  #onKeydown = (event) => {
+    if (event.key === "Tab") this.#trapTab(event);
+  };
+  /** Keeps `Tab` focus cycling within the container's focusable elements. */
+  #trapTab(event) {
+    const focusable = this.#focusableElements();
+    if (focusable.length === 0) {
+      event.preventDefault();
+      return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = document.activeElement;
+    if (!(active instanceof Node) || !this.#getContainer().contains(active)) {
+      event.preventDefault();
+      first?.focus();
+      return;
+    }
+    if (event.shiftKey && active === first) {
+      event.preventDefault();
+      last?.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first?.focus();
+    }
+  }
+  /**
+   * Marks every element outside the container's subtree as `inert` so background
+   * content cannot be focused or reached by assistive technology, honoring the
+   * `aria-modal="true"` contract. An element that was *already* `inert` is left
+   * untracked so `#releaseBackground` does not wrongly clear it.
+   */
+  #isolateBackground() {
+    const container = this.#getContainer();
+    this.#inertedSiblings = [];
+    for (const sibling of Array.from(document.body.children)) {
+      if (!(sibling instanceof HTMLElement)) continue;
+      if (sibling.contains(container) || sibling.inert) continue;
+      sibling.inert = true;
+      this.#inertedSiblings.push(sibling);
+    }
+  }
+  /** Reverts the `inert` flags applied by `#isolateBackground`. */
+  #releaseBackground() {
+    for (const sibling of this.#inertedSiblings) {
+      sibling.inert = false;
+    }
+    this.#inertedSiblings = [];
+  }
+  /** Moves focus to the initial target, the first focusable, or the container. */
+  #focusInitial() {
+    const preferred = this.#options.initialFocus?.();
+    if (preferred) {
+      preferred.focus();
+      return;
+    }
+    const focusable = this.#focusableElements();
+    if (focusable[0]) {
+      focusable[0].focus();
+      return;
+    }
+    const container = this.#getContainer();
+    container.tabIndex = -1;
+    container.focus();
+  }
+  /** Collects the container's currently focusable descendants in DOM order. */
+  #focusableElements() {
+    return Array.from(this.#getContainer().querySelectorAll(FOCUSABLE)).filter(
+      (el) => !el.hidden
+    );
+  }
+};
+
+// src/controllers/alert_dialog_controller.ts
+var AlertDialogController = class extends Controller {
+  static targets = ["trigger", "dialog", "initialFocus"];
+  static actions = ["cancel", "confirm", "open"];
+  static events = ["cancel", "confirm"];
+  /**
+   * Owns the modal side effects. Escape is routed through {@link cancel} so it
+   * emits the same event as the cancel button (tagged `"escape"`); focus falls
+   * back to the trigger when nothing was focused before opening.
+   */
+  #trap = new FocusTrap(() => this.dialogTarget, {
+    onEscape: () => this.#requestCancel("escape"),
+    initialFocus: () => this.hasInitialFocusTarget ? this.initialFocusTarget : null,
+    fallbackFocus: () => this.hasTriggerTarget ? this.triggerTarget : null
+  });
+  /** Starts closed (idempotently reflects the closed state on the markup). */
+  connect() {
+    if (this.hasDialogTarget) this.dialogTarget.hidden = true;
+  }
+  /** Reverts the modal side effects if torn down while open (Turbo navigation). */
+  disconnect() {
+    this.#trap.deactivate({ restoreFocus: false });
+  }
+  /** Opens the dialog, traps focus, and locks background scroll. */
+  open() {
+    if (!this.hasDialogTarget || this.#isOpen) return;
+    this.dialogTarget.hidden = false;
+    this.#trap.activate();
+  }
+  /** Confirms: closes and dispatches `confirm`. Bound via `data-action`. */
+  confirm() {
+    if (!this.#isOpen) return;
+    this.dispatch("confirm");
+    this.#closeDialog();
+  }
+  /** Cancels (user action): closes and dispatches `cancel` with `reason: "user"`. */
+  cancel() {
+    this.#requestCancel("user");
+  }
+  /** Shared cancel path used by both the cancel action and the Escape key. */
+  #requestCancel(reason) {
+    if (!this.#isOpen) return;
+    this.dispatch("cancel", { detail: { reason } });
+    this.#closeDialog();
+  }
+  /** Hides the dialog and reverts the modal side effects (restoring focus). */
+  #closeDialog() {
+    this.dialogTarget.hidden = true;
+    this.#trap.deactivate();
+  }
+  /** Whether the dialog is currently visible. */
+  get #isOpen() {
+    return this.hasDialogTarget && !this.dialogTarget.hidden;
+  }
+};
+
+export { AlertDialogController };
+//# sourceMappingURL=alert_dialog_controller.js.map
+//# sourceMappingURL=alert_dialog_controller.js.map