stimeo-ui 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -7,6 +7,94 @@ 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.9.0] - 2026-08-28
+
+Minor release with no new components. Ten existing ones are reworked —
+bulk-select, clipboard, color-picker, data-grid, editable, filter, masonry, otp,
+reset-before-cache, and resizable — and of those, bulk-select, clipboard,
+data-grid, and editable also changed their markup contracts, so read Removed and
+Changed before upgrading. The Inspector manifest stays on schema v12.
+
+### Removed
+
+- bulk-select: `announce`, and the `aria-live` on the `bar` target that went with
+  it — the count goes through the page's `stimeo--announcer` now.
+- clipboard: the live-region requirement on the `feedback` target. Drop the
+  `role="status"` and `aria-live`; the slot is a plain visible label.
+- editable: the `onBlur` action. Drop `blur->stimeo--editable#onBlur` — the
+  departure is watched on the controller element.
+
+### Added
+
+- bulk-select: `announceText`, carrying `{count}`, and a `reconcile` event.
+- clipboard: `announceCopiedText` and `announceErrorText`. Like `announceText`
+  they default to empty, so seat a `stimeo--announcer` on the page and write the
+  wording you want read.
+- editable: `save` / `cancel` / `revert` actions, and `data-value` on the
+  `display` target for a display that renders the value rather than being it.
+- color-picker: `data-value-text`, an `aria-valuetext` template whose `{value}`
+  carries the channel value, for pages that are not in English.
+- Declarations read once are followed when they change — filter's `match`,
+  masonry's `minColumnWidth` / `gap`, resizable's `min` / `max` — as are targets
+  swapped in later by color-picker, editable, masonry, and resizable, and masonry
+  also relays out when a descendant resource finishes loading.
+
+### Changed
+
+- bulk-select: `selectAllPages` checks the rows on the page too, so a row that
+  arrives while the mode is on lands checked. Hiding the bar hands focus to the
+  select-all box, and a `bar` carrying `role="toolbar"` wants `stimeo--toolbar`
+  alongside it for the arrow keys and the single tab stop.
+- clipboard: `copied` and `error` are transient `data-state` values — a
+  `connect()` that finds either returns to `idle`, and the state is rewound
+  before Turbo caches the page. Any other authored `data-state` is left alone.
+- color-picker: `aria-valuenow` / `aria-valuetext` / `aria-valuemin` /
+  `aria-valuemax` are controller-owned, so the markup supplies `role="slider"`
+  and a name; an omitted range resolves to the channel default (hue `0`–`360`,
+  the rest `0`–`100`). Only a primary-button press drags, and an `alpha` slider
+  is inert unless `alpha` is on.
+- data-grid: a keystroke or click that reached a control inside a cell, and one
+  an IME is composing, belongs to that control — no move, no sort, no selection.
+  The exception is a click on a sortable header's own `<button>`, which needs
+  `tabindex="-1"`; host `gridcell` / `columnheader` on `td` / `th`.
+- editable: the mode is read back from the DOM and the controller writes no ARIA.
+  Focus landing inside the component has not left the edit, so a Save or Cancel
+  button beside the input keeps it open, and the value is trimmed once at the save.
+- reset-before-cache: `data-reset-value` returns a field to what the markup
+  declares — `defaultValue`, `defaultChecked`, the `selected` option — instead of
+  emptying it; a file input empties and `hidden` / `submit` / `reset` / `button` /
+  `image` are left alone.
+- resizable: a separator with no `aria-orientation` reads as `horizontal`, and
+  `toggle` reopens at the position the pane collapsed from. Pointer capture and
+  the drag listeners sit on the `separator` target, not on `event.target` and
+  `document`.
+- masonry: `layout` fires when the result moves, not only on a column count
+  change, and every relayout after the first is deferred to a microtask. otp:
+  `reconcile` reports a move in the pair (joined value, `data-state`).
+- A declaration that cannot be read falls back to its default instead of reaching
+  ARIA or CSS as `NaN` — masonry's `minColumnWidth` / `gap`, resizable's `min` /
+  `max` / `value` / `step`, bulk-select's `totalCount`, and reset-before-cache's
+  `scope`, which no longer aborts the whole sweep.
+- Inspector: clipboard's `feedback` is no longer required, a color-picker
+  `slider` is checked for `role` and a name only, and bulk-select and clipboard
+  join the components that need a `stimeo--announcer`.
+
+### Fixed
+
+- data-grid: `Enter` and `Space` on a `<button>` nested in a cell reach it, so a
+  row-action button is keyboard-reachable, and rows coming and going at runtime
+  re-establish exactly one tab stop. editable: tabbing past a Save or Cancel
+  button no longer strands the editor open, and a display removed mid-edit no
+  longer throws. bulk-select: a nested bulk-select's rows stay out of the outer
+  container's count.
+- clipboard: a copy that resolved after disconnect wrote to the detached element
+  and armed a timer past the teardown, and a repeat inside the feedback window is
+  read out again. In color-picker a drag belongs to the pointer that started it,
+  in masonry an item removed and re-appended in one batch keeps its layout hooks,
+  and in resizable `data-dragging` no longer rides a Turbo snapshot.
+- reset-before-cache: `data-reset-value` wrote an empty string into a checkbox's
+  `value` attribute, and could leave a select with nothing selected at all.
+
 ## [0.8.0] - 2026-08-22
 
 Minor release with no new components. Eight existing ones are reworked —
@@ -695,6 +783,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.9.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.9.0
 [0.8.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.8.0
 [0.7.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.7.0
 [0.6.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.6.0

package/dist/controllers/bulk_select_controller.d.ts

@@ -9,31 +9,59 @@ import { Controller } from '@hotwired/stimulus';
  *
  * Markup contract (identifier: `stimeo--bulk-select`):
  *   <div data-controller="stimeo--bulk-select"
- *        data-stimeo--bulk-select-total-count-value="128">
+ *        data-stimeo--bulk-select-total-count-value="128"
+ *        data-stimeo--bulk-select-announce-text-value="{count} selected">
  *     <input type="checkbox" data-stimeo--bulk-select-target="all">
  *     <!-- rows (may be added dynamically; handled via event delegation) -->
  *     <input type="checkbox" data-stimeo--bulk-select-target="item">
  *     <input type="checkbox" data-stimeo--bulk-select-target="item">
- *     <div data-stimeo--bulk-select-target="bar" hidden role="toolbar" aria-live="polite">
+ *     <div data-stimeo--bulk-select-target="bar" hidden role="toolbar"
+ *          data-controller="stimeo--toolbar" aria-label="Bulk actions">
  *       <span data-stimeo--bulk-select-target="count"></span> selected
  *       <button data-stimeo--bulk-select-target="selectAllPages"
+ *               data-stimeo--toolbar-target="control"
  *               data-action="click->stimeo--bulk-select#selectAllPages">Select all</button>
- *       <button data-action="click->stimeo--bulk-select#clear">Clear</button>
+ *       <button data-stimeo--toolbar-target="control"
+ *               data-action="click->stimeo--bulk-select#clear">Clear</button>
  *     </div>
  *   </div>
  *
- * `change` dispatches `{ count, allPages }`.
+ * The bar carries `role="toolbar"`, so it is composed with `stimeo--toolbar` to get
+ * the arrow-key movement and single tab stop that role calls for.
+ *
+ * `change` and `reconcile` both dispatch `{ count, allPages }`.
+ *
+ * Selection is two-stage. The select-all box covers the rows on this page; the
+ * optional `selectAllPages` control extends the selection to `totalCount` rows
+ * across every page, checking each row here as it does so. Touching any single row
+ * leaves that mode, because the selection is no longer the whole set.
  *
  * @remarks
  * Behavior only — it never runs the batch action (that is the consumer's
  * form/Turbo) nor fetches/pages rows. Selection lives **only** in each checkbox's
  * `checked` (no module-scope set), so `connect()` recomputes idempotently from the
  * DOM after a Turbo swap. Row `change` is handled by **delegation** on the
- * container, so dynamically-added rows work without per-row `data-action`.
- * Showing the bar never steals focus
- * (WCAG 2.2 2.4.3); the count rides the bar's own `aria-live` region (WCAG 2.2
- * 4.1.3) — the bar is revealed *before* the count text is written so the change is
- * observed and announced. The delegated listener is removed on `disconnect()`.
+ * container, so dynamically-added rows work without per-row `data-action`, while
+ * rows arriving or leaving on their own are picked up by the target callbacks and
+ * coalesced into one repair per batch.
+ *
+ * `change` is dispatched when the user moves the selection; `reconcile` when the
+ * controller repairs the figures itself — a row added or removed by the page, or a
+ * render input changing at runtime. Both carry the same detail.
+ *
+ * The count reaches assistive tech through the page's shared `stimeo--announcer`,
+ * worded by the consumer via `announceText` (`{count}` expands to the figure being
+ * shown; an empty template stays silent, keeping announcements opt-in and
+ * i18n-neutral).
+ *
+ * Showing the bar never steals focus (WCAG 2.2 2.4.3). Hiding it hands focus to
+ * the select-all box first when the bar holds it, so the keyboard user keeps a Tab
+ * position instead of falling back to the document.
+ *
+ * A non-finite `totalCount` falls back to the Value's default and is written back
+ * to the attribute, so the count never renders as `NaN`.
+ *
+ * The delegated listener and the pending repair are both released on `disconnect()`.
  */
 declare class BulkSelectController extends Controller<HTMLElement> {
     #private;
@@ -43,26 +71,45 @@ declare class BulkSelectController extends Controller<HTMLElement> {
             type: NumberConstructor;
             default: number;
         };
-        announce: {
-            type: BooleanConstructor;
-            default: boolean;
+        announceText: {
+            type: StringConstructor;
+            default: string;
         };
     };
     static actions: readonly ["clear", "selectAllPages"];
-    static events: readonly ["change"];
+    static events: readonly ["change", "reconcile"];
     readonly allTarget: HTMLInputElement;
     readonly barTarget: HTMLElement;
     readonly countTarget: HTMLElement;
+    readonly itemTargets: HTMLInputElement[];
     readonly hasAllTarget: boolean;
     readonly hasBarTarget: boolean;
     readonly hasCountTarget: boolean;
     totalCountValue: number;
-    announceValue: boolean;
+    announceTextValue: string;
     connect(): void;
     disconnect(): void;
+    /** Repairs the figures for a row that arrived at runtime. */
+    itemTargetConnected(): void;
+    /** Repairs the figures after a row leaves, so a removed selection stops counting. */
+    itemTargetDisconnected(): void;
+    /** Reflects the current selection onto a select-all box added at runtime. */
+    allTargetConnected(): void;
+    /** Repairs the figures after the select-all box leaves. */
+    allTargetDisconnected(): void;
+    /** Repaints the count for a total that changed at runtime, rejecting non-finite ones. */
+    totalCountValueChanged(): void;
+    /** Repaints so wording changed at runtime is used by the next announcement. */
+    announceTextValueChanged(): void;
     /** Clears every selection (rows + select-all) and exits all-pages mode. */
     clear(): void;
-    /** Enters "select all across pages" mode (count shows `totalCount`). */
+    /**
+     * Enters "select all across pages" mode: the count shows `totalCount`, and every
+     * row on this page is checked.
+     *
+     * The mode's claim is that the whole set is selected, so leaving a visible row
+     * unchecked would put the page and the count in open disagreement.
+     */
     selectAllPages(): void;
 }
 

package/dist/controllers/bulk_select_controller.js

@@ -1,72 +1,189 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/bulk_select_controller.ts
+
+// src/utils/announce.ts
+function announce(message, options = {}) {
+  const text = message.trim();
+  if (text.length === 0) return;
+  window.dispatchEvent(
+    new CustomEvent("stimeo--announcer:announce", {
+      detail: { message: text, assertive: options.assertive === true }
+    })
+  );
+}
+function fillTemplate(template, values) {
+  return template.replace(/\{([a-zA-Z][a-zA-Z0-9]*)\}/g, (match, name) => {
+    const replacement = values[name];
+    return replacement === void 0 ? match : String(replacement);
+  });
+}
+
+// src/utils/microtask_coalescer.ts
+var MicrotaskCoalescer = class {
+  #run;
+  #queued = false;
+  #active = false;
+  #generation = 0;
+  /** @param run - the single reconciliation pass, invoked at most once per batch. */
+  constructor(run) {
+    this.#run = run;
+  }
+  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */
+  activate() {
+    this.#active = true;
+  }
+  /** Closes the window and drops any pending pass; call from `disconnect()`. */
+  cancel() {
+    this.#active = false;
+    this.#queued = false;
+    this.#generation += 1;
+  }
+  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */
+  schedule() {
+    if (!this.#active || this.#queued) return;
+    this.#queued = true;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
 // src/controllers/bulk_select_controller.ts
 var BulkSelectController = class extends Controller {
   static targets = ["all", "item", "bar", "count", "selectAllPages"];
   static values = {
     totalCount: { type: Number, default: 0 },
-    announce: { type: Boolean, default: true }
+    announceText: { type: String, default: "" }
   };
   static actions = ["clear", "selectAllPages"];
-  static events = ["change"];
-  /** All-pages mode is a transient UI state; mirrored to `data-all-pages` so it
-   *  survives a Turbo swap and `connect()` can rehydrate it. */
+  static events = ["change", "reconcile"];
+  /** All-pages mode is a transient UI state, mirrored to `data-all-pages` so a
+   *  `connect()` over markup that already carries the attribute rehydrates the
+   *  mode — a morph, a Turbo Stream, or a server that renders it back. A restore
+   *  visit serves the server's markup instead, so the mode does not survive one. */
   #allPagesMode = false;
-  /** Last emitted figures, so a recompute dispatches `change` only on real change. */
+  /** Last emitted figures, so a recompute reports only on a real change. */
   #lastCount = -1;
   #lastAllPages = false;
+  /** Collapses every signal from one DOM or Value update into one repair. */
+  #reconcile = new MicrotaskCoalescer(() => this.#reconcileNow());
   /** Delegated `change` handler covering the select-all box and every row. */
   #onChange = (event) => {
     const target = event.target;
     if (!target) return;
     if (this.hasAllTarget && target === this.allTarget) {
       this.#applyAll();
-    } else if (target.matches('[data-stimeo--bulk-select-target="item"]')) {
+    } else if (this.itemTargets.some((item) => item === target)) {
       this.#exitAllPages();
-      this.#recompute(true);
+      this.#reportChange(this.#recompute());
     }
   };
   connect() {
     this.#allPagesMode = this.element.dataset.allPages === "true";
+    this.#reconcile.activate();
     this.element.addEventListener("change", this.#onChange);
-    this.#recompute(false);
+    this.#recompute();
   }
   disconnect() {
     this.element.removeEventListener("change", this.#onChange);
+    this.#reconcile.cancel();
+  }
+  /** Repairs the figures for a row that arrived at runtime. */
+  itemTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Repairs the figures after a row leaves, so a removed selection stops counting. */
+  itemTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
+  /** Reflects the current selection onto a select-all box added at runtime. */
+  allTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Repairs the figures after the select-all box leaves. */
+  allTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
+  /** Repaints the count for a total that changed at runtime, rejecting non-finite ones. */
+  totalCountValueChanged() {
+    if (!Number.isFinite(this.totalCountValue)) {
+      this.totalCountValue = 0;
+      return;
+    }
+    this.#reconcile.schedule();
+  }
+  /** Repaints so wording changed at runtime is used by the next announcement. */
+  announceTextValueChanged() {
+    this.#reconcile.schedule();
   }
   /** Clears every selection (rows + select-all) and exits all-pages mode. */
   clear() {
-    for (const item of this.#items) item.checked = false;
+    for (const item of this.itemTargets) item.checked = false;
     if (this.hasAllTarget) {
       this.allTarget.checked = false;
       this.allTarget.indeterminate = false;
     }
     this.#exitAllPages();
-    this.#recompute(true);
+    this.#reportChange(this.#recompute());
   }
-  /** Enters "select all across pages" mode (count shows `totalCount`). */
+  /**
+   * Enters "select all across pages" mode: the count shows `totalCount`, and every
+   * row on this page is checked.
+   *
+   * The mode's claim is that the whole set is selected, so leaving a visible row
+   * unchecked would put the page and the count in open disagreement.
+   */
   selectAllPages() {
     this.#allPagesMode = true;
-    this.#recompute(true);
+    this.#checkEveryRow();
+    this.#reportChange(this.#recompute());
+  }
+  /** Marks every row on this page selected. */
+  #checkEveryRow() {
+    for (const item of this.itemTargets) item.checked = true;
   }
   /** Mirrors the select-all box to every row, then recomputes. */
   #applyAll() {
     if (!this.hasAllTarget) return;
     const { checked } = this.allTarget;
-    for (const item of this.#items) item.checked = checked;
+    for (const item of this.itemTargets) item.checked = checked;
     this.#exitAllPages();
-    this.#recompute(true);
+    this.#reportChange(this.#recompute());
   }
   #exitAllPages() {
     this.#allPagesMode = false;
   }
+  /** Repairs the derived state after the page moved rows or a render input. */
+  #reconcileNow() {
+    if (this.#allPagesMode) this.#checkEveryRow();
+    const detail = this.#recompute();
+    if (!detail) return;
+    this.dispatch("reconcile", { detail });
+    this.#announce(detail);
+  }
+  /** Reports a selection the user moved. */
+  #reportChange(detail) {
+    if (!detail) return;
+    this.dispatch("change", { detail });
+    this.#announce(detail);
+  }
+  /** Hands the count to the shared announcer, worded by the consumer. */
+  #announce(detail) {
+    announce(fillTemplate(this.announceTextValue, { count: detail.count }));
+  }
   /**
    * Recomputes the count, the select-all checked/indeterminate state, and the bar
-   * visibility from the current DOM. Dispatches `change` (when `notify`) only if
-   * the emitted count or all-pages flag actually changed.
+   * visibility from the current DOM. Returns the figures when the emitted count or
+   * all-pages flag actually moved, and `null` when they did not.
+   *
+   * @stimeoRenderRoot
    */
-  #recompute(notify) {
-    const items = this.#items;
+  #recompute() {
+    const items = this.itemTargets;
     const total = items.length;
     const checked = items.filter((item) => item.checked).length;
     const allPages = this.#allPagesMode;
@@ -77,8 +194,10 @@ var BulkSelectController = class extends Controller {
     const count = allPages ? this.totalCountValue : checked;
     const show = allPages || checked > 0;
     if (this.hasBarTarget) {
+      if (!show && this.hasAllTarget && this.barTarget.contains(document.activeElement)) {
+        this.allTarget.focus();
+      }
       this.barTarget.hidden = !show;
-      this.barTarget.setAttribute("aria-live", this.announceValue ? "polite" : "off");
     }
     if (this.hasCountTarget) this.countTarget.textContent = String(count);
     this.element.setAttribute("data-selected-count", String(checked));
@@ -87,15 +206,7 @@ var BulkSelectController = class extends Controller {
     const changed = count !== this.#lastCount || allPages !== this.#lastAllPages;
     this.#lastCount = count;
     this.#lastAllPages = allPages;
-    if (notify && changed) {
-      this.dispatch("change", { detail: { count, allPages } });
-    }
-  }
-  /** Live list of row checkboxes, queried from the DOM so dynamic rows count. */
-  get #items() {
-    return Array.from(
-      this.element.querySelectorAll('[data-stimeo--bulk-select-target="item"]')
-    );
+    return changed ? { count, allPages } : null;
   }
 };
 

package/dist/controllers/bulk_select_controller.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/controllers/bulk_select_controller.ts"],"names":[],"mappings":"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","file":"bulk_select_controller.js","sourcesContent":["import { Controller } from \"@hotwired/stimulus\";\n\n/**\n * Headless **bulk select / batch action bar** (no dedicated APG pattern — a\n * composition of a checkbox group and a toolbar). Mirrors the Gmail/admin UX where\n * checking one or more rows reveals a sticky action bar with the selected count,\n * select-all, and clear. Data Grid owns per-row `aria-selected`; this is the\n * contextual action-bar layer on top.\n *\n * Markup contract (identifier: `stimeo--bulk-select`):\n *   <div data-controller=\"stimeo--bulk-select\"\n *        data-stimeo--bulk-select-total-count-value=\"128\">\n *     <input type=\"checkbox\" data-stimeo--bulk-select-target=\"all\">\n *     <!-- rows (may be added dynamically; handled via event delegation) -->\n *     <input type=\"checkbox\" data-stimeo--bulk-select-target=\"item\">\n *     <input type=\"checkbox\" data-stimeo--bulk-select-target=\"item\">\n *     <div data-stimeo--bulk-select-target=\"bar\" hidden role=\"toolbar\" aria-live=\"polite\">\n *       <span data-stimeo--bulk-select-target=\"count\"></span> selected\n *       <button data-stimeo--bulk-select-target=\"selectAllPages\"\n *               data-action=\"click->stimeo--bulk-select#selectAllPages\">Select all</button>\n *       <button data-action=\"click->stimeo--bulk-select#clear\">Clear</button>\n *     </div>\n *   </div>\n *\n * `change` dispatches `{ count, allPages }`.\n *\n * @remarks\n * Behavior only — it never runs the batch action (that is the consumer's\n * form/Turbo) nor fetches/pages rows. Selection lives **only** in each checkbox's\n * `checked` (no module-scope set), so `connect()` recomputes idempotently from the\n * DOM after a Turbo swap. Row `change` is handled by **delegation** on the\n * container, so dynamically-added rows work without per-row `data-action`.\n * Showing the bar never steals focus\n * (WCAG 2.2 2.4.3); the count rides the bar's own `aria-live` region (WCAG 2.2\n * 4.1.3) — the bar is revealed *before* the count text is written so the change is\n * observed and announced. The delegated listener is removed on `disconnect()`.\n */\nexport class BulkSelectController extends Controller<HTMLElement> {\n  static override targets = [\"all\", \"item\", \"bar\", \"count\", \"selectAllPages\"];\n  static override values = {\n    totalCount: { type: Number, default: 0 },\n    announce: { type: Boolean, default: true },\n  };\n  static actions = [\"clear\", \"selectAllPages\"] as const;\n  static events = [\"change\"] as const;\n\n  declare readonly allTarget: HTMLInputElement;\n  declare readonly barTarget: HTMLElement;\n  declare readonly countTarget: HTMLElement;\n  declare readonly hasAllTarget: boolean;\n  declare readonly hasBarTarget: boolean;\n  declare readonly hasCountTarget: boolean;\n\n  declare totalCountValue: number;\n  declare announceValue: boolean;\n\n  /** All-pages mode is a transient UI state; mirrored to `data-all-pages` so it\n   *  survives a Turbo swap and `connect()` can rehydrate it. */\n  #allPagesMode = false;\n  /** Last emitted figures, so a recompute dispatches `change` only on real change. */\n  #lastCount = -1;\n  #lastAllPages = false;\n\n  /** Delegated `change` handler covering the select-all box and every row. */\n  readonly #onChange = (event: Event): void => {\n    const target = event.target as HTMLElement | null;\n    if (!target) return;\n    if (this.hasAllTarget && target === this.allTarget) {\n      this.#applyAll();\n    } else if (target.matches('[data-stimeo--bulk-select-target=\"item\"]')) {\n      this.#exitAllPages();\n      this.#recompute(true);\n    }\n  };\n\n  override connect(): void {\n    this.#allPagesMode = this.element.dataset.allPages === \"true\";\n    this.element.addEventListener(\"change\", this.#onChange);\n    this.#recompute(false);\n  }\n\n  override disconnect(): void {\n    this.element.removeEventListener(\"change\", this.#onChange);\n  }\n\n  /** Clears every selection (rows + select-all) and exits all-pages mode. */\n  clear(): void {\n    for (const item of this.#items) item.checked = false;\n    if (this.hasAllTarget) {\n      this.allTarget.checked = false;\n      this.allTarget.indeterminate = false;\n    }\n    this.#exitAllPages();\n    this.#recompute(true);\n  }\n\n  /** Enters \"select all across pages\" mode (count shows `totalCount`). */\n  selectAllPages(): void {\n    this.#allPagesMode = true;\n    this.#recompute(true);\n  }\n\n  /** Mirrors the select-all box to every row, then recomputes. */\n  #applyAll(): void {\n    if (!this.hasAllTarget) return;\n    const { checked } = this.allTarget;\n    for (const item of this.#items) item.checked = checked;\n    this.#exitAllPages();\n    this.#recompute(true);\n  }\n\n  #exitAllPages(): void {\n    this.#allPagesMode = false;\n  }\n\n  /**\n   * Recomputes the count, the select-all checked/indeterminate state, and the bar\n   * visibility from the current DOM. Dispatches `change` (when `notify`) only if\n   * the emitted count or all-pages flag actually changed.\n   */\n  #recompute(notify: boolean): void {\n    const items = this.#items;\n    const total = items.length;\n    const checked = items.filter((item) => item.checked).length;\n    const allPages = this.#allPagesMode;\n\n    if (this.hasAllTarget) {\n      this.allTarget.checked = total > 0 && checked === total;\n      this.allTarget.indeterminate = checked > 0 && checked < total;\n    }\n\n    const count = allPages ? this.totalCountValue : checked;\n    const show = allPages || checked > 0;\n\n    // Reveal the bar BEFORE writing the count so its aria-live region observes the\n    // text change (a region revealed after its content changed may not announce).\n    if (this.hasBarTarget) {\n      this.barTarget.hidden = !show;\n      this.barTarget.setAttribute(\"aria-live\", this.announceValue ? \"polite\" : \"off\");\n    }\n    if (this.hasCountTarget) this.countTarget.textContent = String(count);\n\n    this.element.setAttribute(\"data-selected-count\", String(checked));\n    if (allPages) this.element.setAttribute(\"data-all-pages\", \"true\");\n    else this.element.removeAttribute(\"data-all-pages\");\n\n    const changed = count !== this.#lastCount || allPages !== this.#lastAllPages;\n    this.#lastCount = count;\n    this.#lastAllPages = allPages;\n    if (notify && changed) {\n      this.dispatch(\"change\", { detail: { count, allPages } });\n    }\n  }\n\n  /** Live list of row checkboxes, queried from the DOM so dynamic rows count. */\n  get #items(): HTMLInputElement[] {\n    return Array.from(\n      this.element.querySelectorAll<HTMLInputElement>('[data-stimeo--bulk-select-target=\"item\"]'),\n    );\n  }\n}\n"]}
+{"version":3,"sources":["../../src/utils/announce.ts","../../src/utils/microtask_coalescer.ts","../../src/controllers/bulk_select_controller.ts"],"names":[],"mappings":"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","file":"bulk_select_controller.js","sourcesContent":["/**\n * Sends one message to the page's shared `stimeo--announcer`.\n *\n * A component that has to reach assistive tech does not carry a live region of its\n * own: a region only announces what changes *after* assistive tech already knows\n * about it, which a region that appears (or is un-hidden) with its message cannot\n * satisfy. The one region that can is the announcer sitting in the page from the\n * start, so state changes are handed to it as an event and it does the reading.\n *\n * The event goes to `window` because the announcer is usually a sibling high in the\n * document rather than an ancestor of the component dispatching it.\n *\n * Wording comes from the consumer — the library ships no English strings — so an\n * empty message is silently dropped and nothing is announced.\n *\n * @example\n * ```ts\n * announce(this.announceTextValue, { assertive: false });\n * ```\n */\nexport function announce(message: string, options: { assertive?: boolean } = {}): void {\n  const text = message.trim();\n  if (text.length === 0) return;\n  window.dispatchEvent(\n    new CustomEvent(\"stimeo--announcer:announce\", {\n      detail: { message: text, assertive: options.assertive === true },\n    }),\n  );\n}\n\n/**\n * Fills `{name}` placeholders in an announcement template from `values`.\n *\n * The same substitution the value-text templates use, so a consumer writes\n * `\"{percent}% complete\"` in one attribute and gets the same rules everywhere. A\n * placeholder with no matching entry is left as authored rather than blanked, which\n * keeps a typo visible instead of silently swallowing the word.\n */\nexport function fillTemplate(template: string, values: Record<string, string | number>): string {\n  return template.replace(/\\{([a-zA-Z][a-zA-Z0-9]*)\\}/g, (match, name: string) => {\n    const replacement = values[name];\n    return replacement === undefined ? match : String(replacement);\n  });\n}\n","/**\n * Collapses many Stimulus lifecycle callbacks from one DOM mutation into a\n * single pass.\n *\n * Stimulus fires `<name>TargetConnected` / `Disconnected` once per element and\n * `<name>ValueChanged` once per changed attribute. Replacing a list of N options\n * or morphing several render Values therefore delivers N callbacks — but the\n * useful unit of work is \"reconcile against the resulting declarative input\",\n * once, after the batch has settled. Every controller with reconcilable targets\n * or render Values needs the same shape: a `queued` flag plus `queueMicrotask`.\n *\n * **A microtask is the right horizon, and the reason is specific.** Stimulus\n * drives these callbacks from a `MutationObserver`, whose own callback already\n * runs as a microtask with the whole batch in hand; scheduling one more lands\n * after the last sibling callback of that batch and still before paint or any\n * event handler. A timer would be later than it needs to be, and reconciling\n * synchronously would run once per element against a half-applied DOM.\n *\n * **The two guards are not the same guard.** Scheduling is refused before the\n * controller connects, and running is refused after it disconnects:\n *\n * - **Before `connect()`** — Stimulus delivers initial target and Value callbacks\n *   ahead of `connect()`. Reconciling there would compute output against a\n *   controller whose own state has not been initialised, and `connect()` is\n *   about to do a full pass anyway.\n * - **After `disconnect()`** — Stimulus fires a callback for **every** target\n *   during teardown, and a microtask queued just before it would otherwise run\n *   against a detached tree. {@link MicrotaskCoalescer.cancel} exists for the\n *   teardown path to drop the pending pass outright.\n *\n * Both guards are part of one contract here rather than something each consumer\n * has to remember separately.\n *\n * Scope is the scheduling only. *What* to reconcile — keep the surviving active\n * option, fall back to the next / previous / first visible one, rebuild derived\n * chips or hidden fields — stays in the controller, because no two consumers\n * answer it the same way.\n *\n * This file's own doc block is dropped from `dist`, but every member comment is\n * inlined into each consumer entry (`tsup` builds with `splitting: false`), so\n * rationale belongs here and only the contract belongs on the members.\n *\n * @example\n * ```ts\n * readonly #reconcile = new MicrotaskCoalescer(() => this.#reconcileOptions());\n *\n * connect()    { this.#reconcile.activate(); }\n * disconnect() { this.#reconcile.cancel(); }\n *\n * optionTargetConnected()    { this.#reconcile.schedule(); }\n * optionTargetDisconnected() { this.#reconcile.schedule(); }\n * ```\n */\nexport class MicrotaskCoalescer {\n  readonly #run: () => void;\n  #queued = false;\n  #active = false;\n  #generation = 0;\n\n  /** @param run - the single reconciliation pass, invoked at most once per batch. */\n  constructor(run: () => void) {\n    this.#run = run;\n  }\n\n  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */\n  activate(): void {\n    this.#active = true;\n  }\n\n  /** Closes the window and drops any pending pass; call from `disconnect()`. */\n  cancel(): void {\n    this.#active = false;\n    this.#queued = false;\n    this.#generation += 1;\n  }\n\n  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */\n  schedule(): void {\n    if (!this.#active || this.#queued) return;\n    this.#queued = true;\n    const generation = this.#generation;\n    queueMicrotask(() => {\n      // A cancelled callback must not consume a pass queued after reconnect.\n      if (generation !== this.#generation || !this.#queued || !this.#active) return;\n      this.#queued = false;\n      this.#run();\n    });\n  }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { announce, fillTemplate } from \"../utils/announce\";\nimport { MicrotaskCoalescer } from \"../utils/microtask_coalescer\";\n\n/** The selection figures every report carries. */\ntype SelectionDetail = { count: number; allPages: boolean };\n\n/**\n * Headless **bulk select / batch action bar** (no dedicated APG pattern — a\n * composition of a checkbox group and a toolbar). Mirrors the Gmail/admin UX where\n * checking one or more rows reveals a sticky action bar with the selected count,\n * select-all, and clear. Data Grid owns per-row `aria-selected`; this is the\n * contextual action-bar layer on top.\n *\n * Markup contract (identifier: `stimeo--bulk-select`):\n *   <div data-controller=\"stimeo--bulk-select\"\n *        data-stimeo--bulk-select-total-count-value=\"128\"\n *        data-stimeo--bulk-select-announce-text-value=\"{count} selected\">\n *     <input type=\"checkbox\" data-stimeo--bulk-select-target=\"all\">\n *     <!-- rows (may be added dynamically; handled via event delegation) -->\n *     <input type=\"checkbox\" data-stimeo--bulk-select-target=\"item\">\n *     <input type=\"checkbox\" data-stimeo--bulk-select-target=\"item\">\n *     <div data-stimeo--bulk-select-target=\"bar\" hidden role=\"toolbar\"\n *          data-controller=\"stimeo--toolbar\" aria-label=\"Bulk actions\">\n *       <span data-stimeo--bulk-select-target=\"count\"></span> selected\n *       <button data-stimeo--bulk-select-target=\"selectAllPages\"\n *               data-stimeo--toolbar-target=\"control\"\n *               data-action=\"click->stimeo--bulk-select#selectAllPages\">Select all</button>\n *       <button data-stimeo--toolbar-target=\"control\"\n *               data-action=\"click->stimeo--bulk-select#clear\">Clear</button>\n *     </div>\n *   </div>\n *\n * The bar carries `role=\"toolbar\"`, so it is composed with `stimeo--toolbar` to get\n * the arrow-key movement and single tab stop that role calls for.\n *\n * `change` and `reconcile` both dispatch `{ count, allPages }`.\n *\n * Selection is two-stage. The select-all box covers the rows on this page; the\n * optional `selectAllPages` control extends the selection to `totalCount` rows\n * across every page, checking each row here as it does so. Touching any single row\n * leaves that mode, because the selection is no longer the whole set.\n *\n * @remarks\n * Behavior only — it never runs the batch action (that is the consumer's\n * form/Turbo) nor fetches/pages rows. Selection lives **only** in each checkbox's\n * `checked` (no module-scope set), so `connect()` recomputes idempotently from the\n * DOM after a Turbo swap. Row `change` is handled by **delegation** on the\n * container, so dynamically-added rows work without per-row `data-action`, while\n * rows arriving or leaving on their own are picked up by the target callbacks and\n * coalesced into one repair per batch.\n *\n * `change` is dispatched when the user moves the selection; `reconcile` when the\n * controller repairs the figures itself — a row added or removed by the page, or a\n * render input changing at runtime. Both carry the same detail.\n *\n * The count reaches assistive tech through the page's shared `stimeo--announcer`,\n * worded by the consumer via `announceText` (`{count}` expands to the figure being\n * shown; an empty template stays silent, keeping announcements opt-in and\n * i18n-neutral).\n *\n * Showing the bar never steals focus (WCAG 2.2 2.4.3). Hiding it hands focus to\n * the select-all box first when the bar holds it, so the keyboard user keeps a Tab\n * position instead of falling back to the document.\n *\n * A non-finite `totalCount` falls back to the Value's default and is written back\n * to the attribute, so the count never renders as `NaN`.\n *\n * The delegated listener and the pending repair are both released on `disconnect()`.\n */\nexport class BulkSelectController extends Controller<HTMLElement> {\n  static override targets = [\"all\", \"item\", \"bar\", \"count\", \"selectAllPages\"];\n  static override values = {\n    totalCount: { type: Number, default: 0 },\n    announceText: { type: String, default: \"\" },\n  };\n  static actions = [\"clear\", \"selectAllPages\"] as const;\n  static events = [\"change\", \"reconcile\"] as const;\n\n  declare readonly allTarget: HTMLInputElement;\n  declare readonly barTarget: HTMLElement;\n  declare readonly countTarget: HTMLElement;\n  declare readonly itemTargets: HTMLInputElement[];\n  declare readonly hasAllTarget: boolean;\n  declare readonly hasBarTarget: boolean;\n  declare readonly hasCountTarget: boolean;\n\n  declare totalCountValue: number;\n  declare announceTextValue: string;\n\n  /** All-pages mode is a transient UI state, mirrored to `data-all-pages` so a\n   *  `connect()` over markup that already carries the attribute rehydrates the\n   *  mode — a morph, a Turbo Stream, or a server that renders it back. A restore\n   *  visit serves the server's markup instead, so the mode does not survive one. */\n  #allPagesMode = false;\n  /** Last emitted figures, so a recompute reports only on a real change. */\n  #lastCount = -1;\n  #lastAllPages = false;\n\n  /** Collapses every signal from one DOM or Value update into one repair. */\n  readonly #reconcile = new MicrotaskCoalescer(() => this.#reconcileNow());\n\n  /** Delegated `change` handler covering the select-all box and every row. */\n  readonly #onChange = (event: Event): void => {\n    const target = event.target as HTMLElement | null;\n    if (!target) return;\n    if (this.hasAllTarget && target === this.allTarget) {\n      this.#applyAll();\n    } else if (this.itemTargets.some((item) => item === target)) {\n      this.#exitAllPages();\n      this.#reportChange(this.#recompute());\n    }\n  };\n\n  override connect(): void {\n    this.#allPagesMode = this.element.dataset.allPages === \"true\";\n    this.#reconcile.activate();\n    this.element.addEventListener(\"change\", this.#onChange);\n    this.#recompute();\n  }\n\n  override disconnect(): void {\n    this.element.removeEventListener(\"change\", this.#onChange);\n    this.#reconcile.cancel();\n  }\n\n  /** Repairs the figures for a row that arrived at runtime. */\n  itemTargetConnected(): void {\n    this.#reconcile.schedule();\n  }\n\n  /** Repairs the figures after a row leaves, so a removed selection stops counting. */\n  itemTargetDisconnected(): void {\n    this.#reconcile.schedule();\n  }\n\n  /** Reflects the current selection onto a select-all box added at runtime. */\n  allTargetConnected(): void {\n    this.#reconcile.schedule();\n  }\n\n  /** Repairs the figures after the select-all box leaves. */\n  allTargetDisconnected(): void {\n    this.#reconcile.schedule();\n  }\n\n  /** Repaints the count for a total that changed at runtime, rejecting non-finite ones. */\n  totalCountValueChanged(): void {\n    if (!Number.isFinite(this.totalCountValue)) {\n      this.totalCountValue = 0;\n      return;\n    }\n    this.#reconcile.schedule();\n  }\n\n  /** Repaints so wording changed at runtime is used by the next announcement. */\n  announceTextValueChanged(): void {\n    this.#reconcile.schedule();\n  }\n\n  /** Clears every selection (rows + select-all) and exits all-pages mode. */\n  clear(): void {\n    for (const item of this.itemTargets) item.checked = false;\n    if (this.hasAllTarget) {\n      this.allTarget.checked = false;\n      this.allTarget.indeterminate = false;\n    }\n    this.#exitAllPages();\n    this.#reportChange(this.#recompute());\n  }\n\n  /**\n   * Enters \"select all across pages\" mode: the count shows `totalCount`, and every\n   * row on this page is checked.\n   *\n   * The mode's claim is that the whole set is selected, so leaving a visible row\n   * unchecked would put the page and the count in open disagreement.\n   */\n  selectAllPages(): void {\n    this.#allPagesMode = true;\n    this.#checkEveryRow();\n    this.#reportChange(this.#recompute());\n  }\n\n  /** Marks every row on this page selected. */\n  #checkEveryRow(): void {\n    for (const item of this.itemTargets) item.checked = true;\n  }\n\n  /** Mirrors the select-all box to every row, then recomputes. */\n  #applyAll(): void {\n    if (!this.hasAllTarget) return;\n    const { checked } = this.allTarget;\n    for (const item of this.itemTargets) item.checked = checked;\n    this.#exitAllPages();\n    this.#reportChange(this.#recompute());\n  }\n\n  #exitAllPages(): void {\n    this.#allPagesMode = false;\n  }\n\n  /** Repairs the derived state after the page moved rows or a render input. */\n  #reconcileNow(): void {\n    // A row that arrives while the whole set is selected is one of the rows the\n    // mode already claims, so it lands checked instead of contradicting the count.\n    if (this.#allPagesMode) this.#checkEveryRow();\n    const detail = this.#recompute();\n    if (!detail) return;\n    this.dispatch(\"reconcile\", { detail });\n    this.#announce(detail);\n  }\n\n  /** Reports a selection the user moved. */\n  #reportChange(detail: SelectionDetail | null): void {\n    if (!detail) return;\n    this.dispatch(\"change\", { detail });\n    this.#announce(detail);\n  }\n\n  /** Hands the count to the shared announcer, worded by the consumer. */\n  #announce(detail: SelectionDetail): void {\n    announce(fillTemplate(this.announceTextValue, { count: detail.count }));\n  }\n\n  /**\n   * Recomputes the count, the select-all checked/indeterminate state, and the bar\n   * visibility from the current DOM. Returns the figures when the emitted count or\n   * all-pages flag actually moved, and `null` when they did not.\n   *\n   * @stimeoRenderRoot\n   */\n  #recompute(): SelectionDetail | null {\n    const items = this.itemTargets;\n    const total = items.length;\n    const checked = items.filter((item) => item.checked).length;\n    const allPages = this.#allPagesMode;\n\n    if (this.hasAllTarget) {\n      this.allTarget.checked = total > 0 && checked === total;\n      this.allTarget.indeterminate = checked > 0 && checked < total;\n    }\n\n    const count = allPages ? this.totalCountValue : checked;\n    const show = allPages || checked > 0;\n\n    if (this.hasBarTarget) {\n      // Hand the Tab position over before the bar leaves, or focus falls to the\n      // document and the keyboard user loses their place.\n      if (!show && this.hasAllTarget && this.barTarget.contains(document.activeElement)) {\n        this.allTarget.focus();\n      }\n      this.barTarget.hidden = !show;\n    }\n    if (this.hasCountTarget) this.countTarget.textContent = String(count);\n\n    this.element.setAttribute(\"data-selected-count\", String(checked));\n    if (allPages) this.element.setAttribute(\"data-all-pages\", \"true\");\n    else this.element.removeAttribute(\"data-all-pages\");\n\n    const changed = count !== this.#lastCount || allPages !== this.#lastAllPages;\n    this.#lastCount = count;\n    this.#lastAllPages = allPages;\n    return changed ? { count, allPages } : null;\n  }\n}\n"]}

package/dist/controllers/clipboard_controller.d.ts

@@ -1,30 +1,52 @@
 import { Controller } from '@hotwired/stimulus';
 
 /**
- * Headless copy-to-clipboard behavior with a live-region completion notice.
+ * Headless copy-to-clipboard behavior with a completion slot and a screen-reader
+ * announcement.
  *
  * Markup contract (identifier: `stimeo--clipboard`):
  *   <div data-controller="stimeo--clipboard"
- *        data-stimeo--clipboard-feedback-duration-value="2000">
+ *        data-stimeo--clipboard-feedback-duration-value="2000"
+ *        data-stimeo--clipboard-announce-copied-text-value="Copied to clipboard"
+ *        data-stimeo--clipboard-announce-error-text-value="Copy failed">
  *     <input type="text" value="https://example.com" readonly
  *            data-stimeo--clipboard-target="source">
  *     <button type="button" data-stimeo--clipboard-target="button"
  *             data-action="stimeo--clipboard#copy">Copy</button>
- *     <span role="status" aria-live="polite"
- *           data-stimeo--clipboard-target="feedback"></span>
+ *     <span data-stimeo--clipboard-target="feedback"></span>
  *   </div>
  *
- * No dedicated APG pattern; this follows the Button + live-region practice. The
- * copy uses the standard `navigator.clipboard` API (no extra dependency); when
- * it is unavailable or rejects, the failure is surfaced rather than silently
- * swallowed, and never communicated by icon alone — the `role="status"` region
- * carries text so screen readers announce the outcome.
+ * No dedicated APG pattern; this follows the Button practice plus a status message
+ * ({@link https://www.w3.org/WAI/WCAG22/Understanding/status-changes.html | WCAG 2.2 SC 4.1.3}).
+ * The copy uses the standard `navigator.clipboard` API (no extra dependency); every
+ * failure mode — an API the browser withholds outside a secure context as much as a
+ * rejected permission — settles the same way, as `data-state="error"` plus the
+ * `copy` event's `success: false`.
+ *
+ * Targets: `source` (the text to copy, when `text` is not set), `button` (the
+ * control that triggers `copy`), `feedback` (the **visible** completion slot).
+ *
+ * Values: `text` (copy this instead of reading `source`), `feedbackDuration` (ms the
+ * completion state is held; `0` or less arms no timer, so it stands until the next
+ * copy — a reconnect and the before-cache rewind still clear it), `copiedLabel` /
+ * `errorLabel` (what the visible slot shows), `announceCopiedText` /
+ * `announceErrorText` (what assistive tech hears; empty announces nothing).
  *
  * @remarks
- * Behavior only — icon swaps and styling are the consumer's, keyed off
- * `data-state` (`idle` / `copied` / `error`). The completion notice clears
- * itself after `feedbackDuration`; that timer is torn down on disconnect (Turbo)
- * via {@link SafeTimeout}.
+ * Behavior only — icon swaps and styling are the consumer's, keyed off `data-state`
+ * (`idle` / `copied` / `error`).
+ *
+ * **The `feedback` slot must not carry live-region semantics.** Announcing is the
+ * page's shared `stimeo--announcer` job: it is seated before the change it reads,
+ * which a slot filled on demand cannot be, and it already collapses a repeat of the
+ * same wording so a second copy is still heard. A `role="status"` on the slot as
+ * well would say everything twice.
+ *
+ * `copied` and `error` are transient: the timer that clears them belongs to one
+ * connection, so a fresh `connect()` that finds either — a restored snapshot, an
+ * in-page move — returns to `idle`, and the state is rewound before Turbo caches
+ * the page ({@link BeforeCacheReset}). The rewind is silent: it discards nothing a
+ * reconnect does not derive again.
  */
 declare class ClipboardController extends Controller<HTMLElement> {
     #private;
@@ -46,6 +68,14 @@ declare class ClipboardController extends Controller<HTMLElement> {
             type: StringConstructor;
             default: string;
         };
+        announceCopiedText: {
+            type: StringConstructor;
+            default: string;
+        };
+        announceErrorText: {
+            type: StringConstructor;
+            default: string;
+        };
     };
     static actions: readonly ["copy"];
     static events: readonly ["copy"];
@@ -59,12 +89,15 @@ declare class ClipboardController extends Controller<HTMLElement> {
     feedbackDurationValue: number;
     copiedLabelValue: string;
     errorLabelValue: string;
+    announceCopiedTextValue: string;
+    announceErrorTextValue: string;
     connect(): void;
     disconnect(): void;
     /**
      * Copies the resolved text and reports the outcome. Bound via `data-action`
-     * (click). Always dispatches `stimeo--clipboard:copy` with `{ success, text }`
-     * — including on failure — so consumers can react either way.
+     * (click). Dispatches `stimeo--clipboard:copy` with `{ success, text }` once per
+     * completed attempt — including on failure — so consumers can react either way.
+     * An attempt whose connection ended while it was in flight reports nothing.
      */
     copy(): Promise<void>;
 }