stimeo-ui 0.2.0 → 0.3.0

package/dist/controllers/overflow_indicator_controller.js

@@ -2,6 +2,61 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/overflow_indicator_controller.ts
 
+// src/utils/blur_deferral.ts
+var BlurDeferral = class {
+  /** Elements currently holding an update back, mapped to their `blur` listener. */
+  #pending = /* @__PURE__ */ new Map();
+  /** Called after a pending element blurs and has been detached. */
+  #onRelease;
+  /** @param onRelease - Invoked once `element` actually blurs; never on `release`. */
+  constructor(onRelease) {
+    this.#onRelease = onRelease;
+  }
+  /** Number of elements currently holding an update back. */
+  get size() {
+    return this.#pending.size;
+  }
+  /** Snapshot of the pending elements, safe to iterate while releasing them. */
+  get elements() {
+    return [...this.#pending.keys()];
+  }
+  /** Whether `element` is currently holding an update back. */
+  has(element) {
+    return this.#pending.has(element);
+  }
+  /** Holds an update back until `element` blurs. Idempotent (no stacked listeners). */
+  defer(element) {
+    if (this.#pending.has(element)) return;
+    const onBlur = () => {
+      this.#detach(element);
+      this.#onRelease(element);
+    };
+    this.#pending.set(element, onBlur);
+    element.addEventListener("blur", onBlur);
+  }
+  /** Defers `element` as the only pending entry, cancelling any others. */
+  deferOnly(element) {
+    for (const pending of this.elements) {
+      if (pending !== element) this.#detach(pending);
+    }
+    this.defer(element);
+  }
+  /** Cancels `element`'s deferral without completing it; no-ops when not pending. */
+  release(element) {
+    this.#detach(element);
+  }
+  /** Cancels every deferral without completing any of them. */
+  releaseAll() {
+    for (const element of this.elements) this.#detach(element);
+  }
+  /** Removes the `blur` listener for `element` and forgets it. */
+  #detach(element) {
+    const onBlur = this.#pending.get(element);
+    if (onBlur) element.removeEventListener("blur", onBlur);
+    this.#pending.delete(element);
+  }
+};
+
 // src/utils/layout_observer.ts
 var LayoutObserver = class {
   #callback;
@@ -58,7 +113,30 @@ var LayoutObserver = class {
   }
 };
 
+// src/utils/logical_scroll.ts
+function isRtl(element) {
+  return window.getComputedStyle(element).direction === "rtl";
+}
+function logicalScrollMetrics(element, horizontal) {
+  const max = Math.max(
+    0,
+    horizontal ? element.scrollWidth - element.clientWidth : element.scrollHeight - element.clientHeight
+  );
+  const raw = horizontal ? element.scrollLeft : element.scrollTop;
+  const position = horizontal && isRtl(element) ? -raw : raw;
+  return { position: Math.min(max, Math.max(0, position)), max };
+}
+function physicalScrollDelta(element, horizontal, logicalDelta) {
+  return horizontal && isRtl(element) ? -logicalDelta : logicalDelta;
+}
+
+// src/utils/reduced_motion.ts
+function prefersReducedMotion() {
+  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
 // src/controllers/overflow_indicator_controller.ts
+var DIRECTION_BUTTON_SELECTOR = "[data-stimeo--overflow-indicator-direction-param]";
 var OverflowIndicatorController = class extends Controller {
   static targets = ["viewport"];
   static values = {
@@ -67,38 +145,59 @@ var OverflowIndicatorController = class extends Controller {
   };
   static actions = ["scrollByPage", "update"];
   static events = ["change"];
-  #layout = new LayoutObserver(() => this.update());
+  #layout = new LayoutObserver(() => {
+    if (this.#connected) this.update();
+  });
+  #connected = false;
+  #observedViewport = null;
+  #observedContent = /* @__PURE__ */ new Set();
   #mutationObserver = null;
+  /**
+   * Boundary buttons whose native `disabled` is held back while they hold focus.
+   *
+   * Completing the deferral is what actually disables the button, so the release
+   * callback — unlike {@link #cancelPendingButtonDisable} — applies it.
+   */
+  #pendingButtonDisables = new BlurDeferral((button) => {
+    this.#restorePendingMarkers(button);
+    if (!button.disabled) this.#disableButton(button);
+  });
   /** Last reported room, so `change` fires only on transitions. */
   #state = null;
   connect() {
-    if (!this.hasViewportTarget) return;
-    this.#layout.observe(this.viewportTarget);
-    this.#layout.observeViewport();
-    if (typeof MutationObserver !== "undefined") {
-      this.#mutationObserver = new MutationObserver(() => this.update());
-      this.#mutationObserver.observe(this.viewportTarget, {
-        childList: true,
-        subtree: true,
-        characterData: true
-      });
-    }
-    this.update();
+    this.#connected = true;
+    this.#syncViewport();
   }
   disconnect() {
+    this.#connected = false;
+    this.#stopObservingViewport();
     this.#layout.disconnect();
-    this.#mutationObserver?.disconnect();
-    this.#mutationObserver = null;
+    this.#clearPendingButtonDisables();
     this.#state = null;
   }
-  /** Re-measures remaining scroll room and reflects the state hooks. Public so it can be wired to the viewport's `scroll`. */
+  viewportTargetConnected() {
+    this.#syncViewport();
+  }
+  viewportTargetDisconnected(viewport) {
+    if (this.#observedViewport === viewport) this.#stopObservingViewport();
+    this.#syncViewport();
+  }
+  orientationValueChanged() {
+    if (this.#connected) this.update();
+  }
+  thresholdValueChanged() {
+    if (this.#connected) this.update();
+  }
+  /**
+   * Re-measures remaining scroll room and reflects the state hooks.
+   * Public so it can be wired to the viewport's `scroll`.
+   */
   update() {
     if (!this.hasViewportTarget) return;
     const vp = this.viewportTarget;
     const horizontal = this.orientationValue !== "vertical";
-    const t = this.thresholdValue;
-    const scrollPos = horizontal ? vp.scrollLeft : vp.scrollTop;
-    const maxScroll = horizontal ? vp.scrollWidth - vp.clientWidth : vp.scrollHeight - vp.clientHeight;
+    const t = this.#threshold;
+    const { position: scrollPos, max: maxScroll } = logicalScrollMetrics(vp, horizontal);
     const start = scrollPos > t;
     const end = scrollPos < maxScroll - t;
     vp.setAttribute("data-overflow-start", start ? "true" : "false");
@@ -114,11 +213,13 @@ var OverflowIndicatorController = class extends Controller {
     if (!this.hasViewportTarget) return;
     const direction = this.#directionFromEvent(event);
     if (!direction) return;
+    if (this.#state && !this.#state[direction]) return;
     const vp = this.viewportTarget;
     const horizontal = this.orientationValue !== "vertical";
     const page = horizontal ? vp.clientWidth : vp.clientHeight;
-    const delta = direction === "start" ? -page : page;
-    const behavior = this.#prefersReducedMotion() ? "auto" : "smooth";
+    const logicalDelta = direction === "start" ? -page : page;
+    const delta = physicalScrollDelta(vp, horizontal, logicalDelta);
+    const behavior = prefersReducedMotion() ? "instant" : "smooth";
     if (horizontal) {
       vp.scrollBy({ left: delta, behavior });
     } else {
@@ -127,10 +228,16 @@ var OverflowIndicatorController = class extends Controller {
   }
   /** Mirrors remaining room onto any direction buttons by toggling `disabled`. */
   #syncButtons(start, end) {
-    const buttons = this.element.querySelectorAll(
-      "[data-stimeo--overflow-indicator-direction-param]"
-    );
+    for (const button of this.#pendingButtonDisables.elements) {
+      if (!button.isConnected || button.closest("[data-controller~='stimeo--overflow-indicator']") !== this.element) {
+        this.#cancelPendingButtonDisable(button);
+      }
+    }
+    const buttons = this.element.querySelectorAll(DIRECTION_BUTTON_SELECTOR);
     for (const button of buttons) {
+      if (button.closest("[data-controller~='stimeo--overflow-indicator']") !== this.element) {
+        continue;
+      }
       const direction = button.getAttribute("data-stimeo--overflow-indicator-direction-param");
       if (direction === "start") this.#toggleButton(button, start);
       else if (direction === "end") this.#toggleButton(button, end);
@@ -143,7 +250,11 @@ var OverflowIndicatorController = class extends Controller {
    * whole control disabled) is therefore never blindly re-enabled.
    */
   #toggleButton(button, hasRoom) {
+    if (!this.#pendingButtonDisables.has(button) && button.hasAttribute("data-overflow-indicator-pending-disabled")) {
+      this.#cancelPendingButtonDisable(button);
+    }
     if (hasRoom) {
+      this.#cancelPendingButtonDisable(button);
       if (button.hasAttribute("data-overflow-indicator-disabled")) {
         button.disabled = false;
         button.removeAttribute("data-overflow-indicator-disabled");
@@ -151,17 +262,125 @@ var OverflowIndicatorController = class extends Controller {
       return;
     }
     if (button.disabled) return;
+    if (document.activeElement === button) {
+      this.#deferButtonDisable(button);
+    } else {
+      this.#disableButton(button);
+    }
+  }
+  /**
+   * Keeps a boundary button focusable until native blur, exposing its temporary
+   * inoperability with `aria-disabled` and making its action a no-op meanwhile.
+   */
+  #deferButtonDisable(button) {
+    if (this.#pendingButtonDisables.has(button)) return;
+    button.setAttribute("data-overflow-indicator-pending-disabled", "");
+    button.setAttribute(
+      "data-overflow-indicator-aria-disabled",
+      button.getAttribute("aria-disabled") ?? ""
+    );
+    button.setAttribute("aria-disabled", "true");
+    this.#pendingButtonDisables.defer(button);
+  }
+  #disableButton(button) {
     button.disabled = true;
     button.setAttribute("data-overflow-indicator-disabled", "");
   }
+  /** Cancels a pending disable without applying it, restoring the displaced state. */
+  #cancelPendingButtonDisable(button) {
+    this.#pendingButtonDisables.release(button);
+    this.#restorePendingMarkers(button);
+  }
+  /**
+   * Drops the pending marker and gives back the `aria-disabled` it displaced.
+   *
+   * Reads the displaced value from the DOM rather than memory: a Turbo snapshot is
+   * cloned before `disconnect()` runs, so a restored page can arrive with markers
+   * this instance never wrote.
+   */
+  #restorePendingMarkers(button) {
+    button.removeAttribute("data-overflow-indicator-pending-disabled");
+    const displaced = button.getAttribute("data-overflow-indicator-aria-disabled");
+    if (displaced !== null) {
+      button.removeAttribute("data-overflow-indicator-aria-disabled");
+      if (button.getAttribute("aria-disabled") === "true") {
+        if (displaced === "") button.removeAttribute("aria-disabled");
+        else button.setAttribute("aria-disabled", displaced);
+      }
+    }
+  }
+  #clearPendingButtonDisables() {
+    for (const button of this.#pendingButtonDisables.elements) {
+      this.#cancelPendingButtonDisable(button);
+    }
+  }
+  /** Moves resize/mutation/load observation to the current viewport target. */
+  #syncViewport() {
+    if (!this.#connected) return;
+    const next = this.hasViewportTarget ? this.viewportTarget : null;
+    if (next === this.#observedViewport) return;
+    this.#stopObservingViewport();
+    if (!next) return;
+    this.#observedViewport = next;
+    this.#layout.observe(next);
+    this.#layout.observeViewport();
+    next.addEventListener("load", this.#onContentLoad, true);
+    this.#syncContentObservation();
+    if (typeof MutationObserver !== "undefined") {
+      this.#mutationObserver = new MutationObserver(() => {
+        if (!this.#connected || this.#observedViewport !== next) return;
+        this.#syncContentObservation();
+        this.update();
+      });
+      this.#mutationObserver.observe(this.element, {
+        childList: true,
+        subtree: true,
+        characterData: true,
+        attributes: true,
+        attributeFilter: ["class", "style", "hidden"]
+      });
+    }
+    this.#state = null;
+    this.update();
+  }
+  /** Observes direct content boxes whose resize can change the viewport's scroll extent. */
+  #syncContentObservation() {
+    const next = new Set(this.#observedViewport?.children ?? []);
+    for (const content of this.#observedContent) {
+      if (!next.has(content)) {
+        this.#layout.unobserve(content);
+        this.#observedContent.delete(content);
+      }
+    }
+    for (const content of next) {
+      if (!this.#observedContent.has(content)) {
+        this.#observedContent.add(content);
+        this.#layout.observe(content);
+      }
+    }
+  }
+  #stopObservingViewport() {
+    this.#mutationObserver?.disconnect();
+    this.#mutationObserver = null;
+    this.#observedViewport?.removeEventListener("load", this.#onContentLoad, true);
+    if (this.#observedViewport) this.#layout.unobserve(this.#observedViewport);
+    for (const content of this.#observedContent) this.#layout.unobserve(content);
+    this.#observedContent.clear();
+    this.#observedViewport = null;
+    this.#layout.unobserveViewport();
+  }
+  #onContentLoad = () => {
+    if (this.#connected) this.update();
+  };
+  get #threshold() {
+    const value = this.thresholdValue;
+    return Number.isFinite(value) ? Math.max(0, value) : 1;
+  }
   #directionFromEvent(event) {
     const params = event.params;
     const direction = params?.direction;
     return direction === "start" || direction === "end" ? direction : null;
   }
-  #prefersReducedMotion() {
-    return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  }
 };
 
 export { OverflowIndicatorController };

package/dist/controllers/overflow_indicator_controller.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/layout_observer.ts","../../src/controllers/overflow_indicator_controller.ts"],"names":[],"mappings":"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","file":"overflow_indicator_controller.js","sourcesContent":["/**\n * Unified element-size and viewport observation for Stimeo controllers.\n *\n * Layout-sensitive widgets (sliders, resizable panes, scroll spies, popovers)\n * need to react both to their *own* box changing — via {@link ResizeObserver} —\n * and to the *viewport* changing — via the `window` `resize` event. Wiring those\n * two sources by hand in every controller risks leaked listeners on\n * `disconnect()`. {@link LayoutObserver} owns both behind one callback and one\n * {@link LayoutObserver.disconnect | disconnect()} that releases everything.\n *\n * Behavior only: the helper reports *that* layout changed; it never reads or\n * writes styles. Consumers decide what to recompute.\n */\n\n/** Invoked whenever an observed element or the viewport changes size. */\nexport type LayoutCallback = () => void;\n\n/** Constructs a {@link ResizeObserver}; injectable so tests stay deterministic. */\nexport type ResizeObserverFactory = (callback: ResizeObserverCallback) => ResizeObserver;\n\n/** Options for {@link LayoutObserver}. */\nexport interface LayoutObserverOptions {\n  /**\n   * Factory for the {@link ResizeObserver} used by {@link LayoutObserver.observe}.\n   * Defaults to the global constructor; override it in tests, or to no-op in\n   * environments where `ResizeObserver` is unavailable.\n   */\n  resizeObserverFactory?: ResizeObserverFactory;\n}\n\n/**\n * Observes element resizes and/or viewport resizes through a single callback,\n * with guaranteed teardown.\n *\n * @example\n * ```ts\n * #layout = new LayoutObserver(() => this.#reposition());\n *\n * connect() {\n *   this.#layout.observe(this.panelTarget);\n *   this.#layout.observeViewport();\n * }\n *\n * disconnect() {\n *   this.#layout.disconnect();\n * }\n * ```\n */\nexport class LayoutObserver {\n  readonly #callback: LayoutCallback;\n  readonly #resizeObserverFactory: ResizeObserverFactory | null;\n  #resizeObserver: ResizeObserver | null = null;\n  #observingViewport = false;\n\n  /** Stable bound handler so add/removeEventListener target the same reference. */\n  readonly #handleViewportResize = (): void => {\n    this.#callback();\n  };\n\n  constructor(callback: LayoutCallback, options: LayoutObserverOptions = {}) {\n    this.#callback = callback;\n    this.#resizeObserverFactory =\n      options.resizeObserverFactory ??\n      (typeof ResizeObserver === \"undefined\" ? null : (cb) => new ResizeObserver(cb));\n  }\n\n  /**\n   * Starts observing an element's size. Repeated calls observe additional\n   * elements through the same shared observer. No-ops when no\n   * `ResizeObserver` implementation is available.\n   */\n  observe(element: Element): void {\n    if (!this.#resizeObserverFactory) return;\n    if (!this.#resizeObserver) {\n      this.#resizeObserver = this.#resizeObserverFactory(() => {\n        this.#callback();\n      });\n    }\n    this.#resizeObserver.observe(element);\n  }\n\n  /** Stops observing a single element while leaving any others in place. */\n  unobserve(element: Element): void {\n    this.#resizeObserver?.unobserve(element);\n  }\n\n  /** Starts observing viewport resizes. Idempotent: the listener is added once. */\n  observeViewport(): void {\n    if (this.#observingViewport) return;\n    this.#observingViewport = true;\n    window.addEventListener(\"resize\", this.#handleViewportResize);\n  }\n\n  /** Stops observing viewport resizes without affecting element observation. */\n  unobserveViewport(): void {\n    if (!this.#observingViewport) return;\n    this.#observingViewport = false;\n    window.removeEventListener(\"resize\", this.#handleViewportResize);\n  }\n\n  /**\n   * Releases every observation: disconnects the {@link ResizeObserver} and\n   * removes the viewport listener. Safe to call multiple times. Call this from a\n   * controller's `disconnect()`.\n   */\n  disconnect(): void {\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = null;\n    this.unobserveViewport();\n  }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { LayoutObserver } from \"../utils/layout_observer\";\n\n/**\n * Headless **Overflow Indicator**: detects whether a scroll container can still\n * scroll toward its start and/or end and publishes it as `data-overflow-start` /\n * `data-overflow-end`. No APG widget — a state-detection utility. Consumers draw\n * edge shadows or arrows in CSS to signal \"more content this way\".\n *\n * Markup contract (identifier: `stimeo--overflow-indicator`):\n *   <div data-controller=\"stimeo--overflow-indicator\"\n *        data-stimeo--overflow-indicator-orientation-value=\"horizontal\">\n *     <button type=\"button\" aria-label=\"Prev\"\n *             data-stimeo--overflow-indicator-direction-param=\"start\"\n *             data-action=\"click->stimeo--overflow-indicator#scrollByPage\">‹</button>\n *     <div data-stimeo--overflow-indicator-target=\"viewport\"\n *          data-action=\"scroll->stimeo--overflow-indicator#update\"\n *          tabindex=\"0\" role=\"region\" aria-label=\"Products\"\n *          style=\"overflow-x: auto;\"><!-- items --></div>\n *     <button type=\"button\" aria-label=\"Next\"\n *             data-stimeo--overflow-indicator-direction-param=\"end\"\n *             data-action=\"click->stimeo--overflow-indicator#scrollByPage\">›</button>\n *   </div>\n *\n * The viewport's scroll position and size are watched (via the wired `scroll`\n * action, plus {@link LayoutObserver} for resize and a {@link MutationObserver}\n * for content changes). Optional page buttons scroll one viewport at a time and\n * have their `disabled` synced to the matching direction's remaining room.\n *\n * @remarks\n * Behavior only — shadows, arrows, and gradients are the consumer's CSS;\n * `data-overflow-*` carry no ARIA semantics. All observers/listeners are released\n * on `disconnect()` (Turbo navigation included). `scrollByPage` honors\n * `prefers-reduced-motion`.\n */\nexport class OverflowIndicatorController extends Controller<HTMLElement> {\n  static override targets = [\"viewport\"];\n  static override values = {\n    orientation: { type: String, default: \"horizontal\" },\n    threshold: { type: Number, default: 1 },\n  };\n  static actions = [\"scrollByPage\", \"update\"] as const;\n  static events = [\"change\"] as const;\n\n  declare readonly viewportTarget: HTMLElement;\n  declare readonly hasViewportTarget: boolean;\n\n  declare orientationValue: string;\n  declare thresholdValue: number;\n\n  readonly #layout = new LayoutObserver(() => this.update());\n  #mutationObserver: MutationObserver | null = null;\n  /** Last reported room, so `change` fires only on transitions. */\n  #state: { start: boolean; end: boolean } | null = null;\n\n  override connect(): void {\n    if (!this.hasViewportTarget) return;\n    this.#layout.observe(this.viewportTarget);\n    this.#layout.observeViewport();\n\n    if (typeof MutationObserver !== \"undefined\") {\n      this.#mutationObserver = new MutationObserver(() => this.update());\n      this.#mutationObserver.observe(this.viewportTarget, {\n        childList: true,\n        subtree: true,\n        characterData: true,\n      });\n    }\n    this.update();\n  }\n\n  override disconnect(): void {\n    this.#layout.disconnect();\n    this.#mutationObserver?.disconnect();\n    this.#mutationObserver = null;\n    this.#state = null;\n  }\n\n  /** Re-measures remaining scroll room and reflects the state hooks. Public so it can be wired to the viewport's `scroll`. */\n  update(): void {\n    if (!this.hasViewportTarget) return;\n    const vp = this.viewportTarget;\n    const horizontal = this.orientationValue !== \"vertical\";\n    const t = this.thresholdValue;\n\n    const scrollPos = horizontal ? vp.scrollLeft : vp.scrollTop;\n    const maxScroll = horizontal\n      ? vp.scrollWidth - vp.clientWidth\n      : vp.scrollHeight - vp.clientHeight;\n\n    const start = scrollPos > t;\n    const end = scrollPos < maxScroll - t;\n\n    vp.setAttribute(\"data-overflow-start\", start ? \"true\" : \"false\");\n    vp.setAttribute(\"data-overflow-end\", end ? \"true\" : \"false\");\n    this.#syncButtons(start, end);\n\n    if (!this.#state || this.#state.start !== start || this.#state.end !== end) {\n      this.#state = { start, end };\n      this.dispatch(\"change\", { detail: { start, end } });\n    }\n  }\n\n  /** Scrolls one viewport page toward the `direction` param (`start`/`end`). */\n  scrollByPage(event: Event): void {\n    if (!this.hasViewportTarget) return;\n    const direction = this.#directionFromEvent(event);\n    if (!direction) return;\n\n    const vp = this.viewportTarget;\n    const horizontal = this.orientationValue !== \"vertical\";\n    const page = horizontal ? vp.clientWidth : vp.clientHeight;\n    const delta = direction === \"start\" ? -page : page;\n    const behavior: ScrollBehavior = this.#prefersReducedMotion() ? \"auto\" : \"smooth\";\n\n    if (horizontal) {\n      vp.scrollBy({ left: delta, behavior });\n    } else {\n      vp.scrollBy({ top: delta, behavior });\n    }\n  }\n\n  /** Mirrors remaining room onto any direction buttons by toggling `disabled`. */\n  #syncButtons(start: boolean, end: boolean): void {\n    const buttons = this.element.querySelectorAll<HTMLButtonElement>(\n      \"[data-stimeo--overflow-indicator-direction-param]\",\n    );\n    for (const button of buttons) {\n      const direction = button.getAttribute(\"data-stimeo--overflow-indicator-direction-param\");\n      if (direction === \"start\") this.#toggleButton(button, start);\n      else if (direction === \"end\") this.#toggleButton(button, end);\n    }\n  }\n\n  /**\n   * Reflects the remaining room onto a page button's `disabled`, owning only the\n   * `disabled` it sets itself via a marker (`data-overflow-indicator-disabled`,\n   * like `number-input`/`conditional-fields`). An author-disabled button (e.g. the\n   * whole control disabled) is therefore never blindly re-enabled.\n   */\n  #toggleButton(button: HTMLButtonElement, hasRoom: boolean): void {\n    if (hasRoom) {\n      if (button.hasAttribute(\"data-overflow-indicator-disabled\")) {\n        button.disabled = false;\n        button.removeAttribute(\"data-overflow-indicator-disabled\");\n      }\n      return;\n    }\n    if (button.disabled) return; // already disabled (possibly by the author) — leave it\n    button.disabled = true;\n    button.setAttribute(\"data-overflow-indicator-disabled\", \"\");\n  }\n\n  #directionFromEvent(event: Event): \"start\" | \"end\" | null {\n    const params = (event as Event & { params?: { direction?: unknown } }).params;\n    const direction = params?.direction;\n    return direction === \"start\" || direction === \"end\" ? direction : null;\n  }\n\n  #prefersReducedMotion(): boolean {\n    return (\n      typeof window.matchMedia === \"function\" &&\n      window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n    );\n  }\n}\n"]}
+{"version":3,"sources":["../../src/utils/blur_deferral.ts","../../src/utils/layout_observer.ts","../../src/utils/logical_scroll.ts","../../src/utils/reduced_motion.ts","../../src/controllers/overflow_indicator_controller.ts"],"names":[],"mappings":"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","file":"overflow_indicator_controller.js","sourcesContent":["/**\n * Shared bookkeeping for updates that must wait until an element loses focus.\n *\n * A control that becomes redundant while the user is standing on it cannot be\n * removed from the page immediately: hiding a focused element (or turning it\n * into a native `disabled` one) drops focus to `<body>`, stranding a keyboard\n * user mid-widget. The fix every affected controller reached for is the same —\n * keep the element reachable, hold the destructive update, listen for `blur`,\n * and apply it then.\n *\n * {@link BlurDeferral} owns *only* the registry part of that: which elements are\n * currently holding an update back, attaching and detaching the `blur` listener,\n * and guaranteeing teardown. It is deliberately **policy-free** — what the\n * interim state looks like (`aria-disabled`, an ownership marker, nothing at\n * all), and what the deferred update actually is, stay in the controller, which\n * receives the element back through its release callback.\n *\n * Three contracts are worth stating up front, because each one is a hazard the\n * consumers would otherwise hit:\n *\n * - **The release callback fires only on a real `blur`.** `release()` /\n *   `releaseAll()` *cancel* a deferral; they do not complete it. Conflating the\n *   two makes `overflow-indicator` disable a button that just left the boundary.\n * - **`elements` is a snapshot.** Iterating the live key set while releasing\n *   inside the loop is the failure this registry exists to prevent.\n * - **The entry is detached before the callback runs**, so a controller that\n *   decides the update is still unsafe can simply defer again.\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 contracts belong on the members.\n *\n * @example\n * ```ts\n * readonly #deferred = new BlurDeferral<HTMLElement>((trigger) => {\n *   if (this.#connected) this.#evaluate();\n * });\n *\n * #hide(trigger: HTMLElement) {\n *   if (document.activeElement === trigger) {\n *     this.#deferred.deferOnly(trigger); // stays visible until blur\n *     return;\n *   }\n *   this.#deferred.releaseAll();\n *   trigger.hidden = true;\n * }\n *\n * disconnect() {\n *   this.#deferred.releaseAll();\n * }\n * ```\n */\nexport class BlurDeferral<T extends HTMLElement = HTMLElement> {\n  /** Elements currently holding an update back, mapped to their `blur` listener. */\n  readonly #pending = new Map<T, () => void>();\n  /** Called after a pending element blurs and has been detached. */\n  readonly #onRelease: (element: T) => void;\n\n  /** @param onRelease - Invoked once `element` actually blurs; never on `release`. */\n  constructor(onRelease: (element: T) => void) {\n    this.#onRelease = onRelease;\n  }\n\n  /** Number of elements currently holding an update back. */\n  get size(): number {\n    return this.#pending.size;\n  }\n\n  /** Snapshot of the pending elements, safe to iterate while releasing them. */\n  get elements(): T[] {\n    return [...this.#pending.keys()];\n  }\n\n  /** Whether `element` is currently holding an update back. */\n  has(element: T): boolean {\n    return this.#pending.has(element);\n  }\n\n  /** Holds an update back until `element` blurs. Idempotent (no stacked listeners). */\n  defer(element: T): void {\n    if (this.#pending.has(element)) return;\n    const onBlur = (): void => {\n      this.#detach(element);\n      this.#onRelease(element);\n    };\n    this.#pending.set(element, onBlur);\n    element.addEventListener(\"blur\", onBlur);\n  }\n\n  /** Defers `element` as the only pending entry, cancelling any others. */\n  deferOnly(element: T): void {\n    for (const pending of this.elements) {\n      if (pending !== element) this.#detach(pending);\n    }\n    this.defer(element);\n  }\n\n  /** Cancels `element`'s deferral without completing it; no-ops when not pending. */\n  release(element: T): void {\n    this.#detach(element);\n  }\n\n  /** Cancels every deferral without completing any of them. */\n  releaseAll(): void {\n    for (const element of this.elements) this.#detach(element);\n  }\n\n  /** Removes the `blur` listener for `element` and forgets it. */\n  #detach(element: T): void {\n    const onBlur = this.#pending.get(element);\n    if (onBlur) element.removeEventListener(\"blur\", onBlur);\n    this.#pending.delete(element);\n  }\n}\n","/**\n * Unified element-size and viewport observation for Stimeo controllers.\n *\n * Layout-sensitive widgets (sliders, resizable panes, scroll spies, popovers)\n * need to react both to their *own* box changing — via {@link ResizeObserver} —\n * and to the *viewport* changing — via the `window` `resize` event. Wiring those\n * two sources by hand in every controller risks leaked listeners on\n * `disconnect()`. {@link LayoutObserver} owns both behind one callback and one\n * {@link LayoutObserver.disconnect | disconnect()} that releases everything.\n *\n * Behavior only: the helper reports *that* layout changed; it never reads or\n * writes styles. Consumers decide what to recompute.\n */\n\n/** Invoked whenever an observed element or the viewport changes size. */\nexport type LayoutCallback = () => void;\n\n/** Constructs a {@link ResizeObserver}; injectable so tests stay deterministic. */\nexport type ResizeObserverFactory = (callback: ResizeObserverCallback) => ResizeObserver;\n\n/** Options for {@link LayoutObserver}. */\nexport interface LayoutObserverOptions {\n  /**\n   * Factory for the {@link ResizeObserver} used by {@link LayoutObserver.observe}.\n   * Defaults to the global constructor; override it in tests, or to no-op in\n   * environments where `ResizeObserver` is unavailable.\n   */\n  resizeObserverFactory?: ResizeObserverFactory;\n}\n\n/**\n * Observes element resizes and/or viewport resizes through a single callback,\n * with guaranteed teardown.\n *\n * @example\n * ```ts\n * #layout = new LayoutObserver(() => this.#reposition());\n *\n * connect() {\n *   this.#layout.observe(this.panelTarget);\n *   this.#layout.observeViewport();\n * }\n *\n * disconnect() {\n *   this.#layout.disconnect();\n * }\n * ```\n */\nexport class LayoutObserver {\n  readonly #callback: LayoutCallback;\n  readonly #resizeObserverFactory: ResizeObserverFactory | null;\n  #resizeObserver: ResizeObserver | null = null;\n  #observingViewport = false;\n\n  /** Stable bound handler so add/removeEventListener target the same reference. */\n  readonly #handleViewportResize = (): void => {\n    this.#callback();\n  };\n\n  constructor(callback: LayoutCallback, options: LayoutObserverOptions = {}) {\n    this.#callback = callback;\n    this.#resizeObserverFactory =\n      options.resizeObserverFactory ??\n      (typeof ResizeObserver === \"undefined\" ? null : (cb) => new ResizeObserver(cb));\n  }\n\n  /**\n   * Starts observing an element's size. Repeated calls observe additional\n   * elements through the same shared observer. No-ops when no\n   * `ResizeObserver` implementation is available.\n   */\n  observe(element: Element): void {\n    if (!this.#resizeObserverFactory) return;\n    if (!this.#resizeObserver) {\n      this.#resizeObserver = this.#resizeObserverFactory(() => {\n        this.#callback();\n      });\n    }\n    this.#resizeObserver.observe(element);\n  }\n\n  /** Stops observing a single element while leaving any others in place. */\n  unobserve(element: Element): void {\n    this.#resizeObserver?.unobserve(element);\n  }\n\n  /** Starts observing viewport resizes. Idempotent: the listener is added once. */\n  observeViewport(): void {\n    if (this.#observingViewport) return;\n    this.#observingViewport = true;\n    window.addEventListener(\"resize\", this.#handleViewportResize);\n  }\n\n  /** Stops observing viewport resizes without affecting element observation. */\n  unobserveViewport(): void {\n    if (!this.#observingViewport) return;\n    this.#observingViewport = false;\n    window.removeEventListener(\"resize\", this.#handleViewportResize);\n  }\n\n  /**\n   * Releases every observation: disconnects the {@link ResizeObserver} and\n   * removes the viewport listener. Safe to call multiple times. Call this from a\n   * controller's `disconnect()`.\n   */\n  disconnect(): void {\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = null;\n    this.unobserveViewport();\n  }\n}\n","/** Normalized scroll position and maximum distance on one logical axis. */\nexport interface LogicalScrollMetrics {\n  position: number;\n  max: number;\n}\n\n/**\n * Whether horizontal scrolling on `element` follows right-to-left inline flow.\n *\n * Resolved from the **computed** `direction`, so the authoring contract is the\n * usual `dir=\"rtl\"` (or a stylesheet) on the element or any ancestor.\n *\n * Scope: horizontal writing modes. A vertical writing mode (`writing-mode:\n * vertical-rl`) also inverts the horizontal axis, which this check does not\n * model — vertical writing modes are out of scope for the scroll utilities\n * (their consumers describe axes as horizontal/vertical, not inline/block).\n */\nexport function isRtl(element: Element): boolean {\n  return window.getComputedStyle(element).direction === \"rtl\";\n}\n\n/**\n * Returns scroll distance from the logical start edge.\n *\n * CSSOM View exposes standards-mode RTL horizontal offsets as `0` at the inline\n * start (right) and increasingly negative values toward the inline end (left).\n * The normalized position is always clamped to `[0, max]`, which also absorbs\n * Safari's elastic overscroll values.\n */\nexport function logicalScrollMetrics(\n  element: HTMLElement,\n  horizontal: boolean,\n): LogicalScrollMetrics {\n  const max = Math.max(\n    0,\n    horizontal\n      ? element.scrollWidth - element.clientWidth\n      : element.scrollHeight - element.clientHeight,\n  );\n  const raw = horizontal ? element.scrollLeft : element.scrollTop;\n  const position = horizontal && isRtl(element) ? -raw : raw;\n  return { position: Math.min(max, Math.max(0, position)), max };\n}\n\n/**\n * Converts a logical start/end delta to the physical value accepted by\n * `Element.scrollBy`.\n */\nexport function physicalScrollDelta(\n  element: HTMLElement,\n  horizontal: boolean,\n  logicalDelta: number,\n): number {\n  return horizontal && isRtl(element) ? -logicalDelta : logicalDelta;\n}\n","/**\n * Shared `prefers-reduced-motion` lookup for the motion-aware controllers\n * (count-up, highlight, overflow-indicator, scroll-visibility, stick-to-bottom,\n * transition).\n *\n * This one-liner keeps the media query string and the environment guard\n * single-sourced across them. The preference is intentionally re-read on every\n * call — the controllers check it at each animation/scroll start (WCAG 2.2\n * **2.3.3**), so flipping the OS setting takes effect immediately without any\n * listener or cache bookkeeping here.\n */\n\n/**\n * Whether the user currently requests reduced motion.\n *\n * @returns `true` when `(prefers-reduced-motion: reduce)` matches; `false`\n * otherwise, including environments without `window.matchMedia` (treated as\n * \"no preference\").\n */\nexport function prefersReducedMotion(): boolean {\n  return (\n    typeof window.matchMedia === \"function\" &&\n    window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n  );\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { BlurDeferral } from \"../utils/blur_deferral\";\nimport { LayoutObserver } from \"../utils/layout_observer\";\nimport { logicalScrollMetrics, physicalScrollDelta } from \"../utils/logical_scroll\";\nimport { prefersReducedMotion } from \"../utils/reduced_motion\";\n\nconst DIRECTION_BUTTON_SELECTOR = \"[data-stimeo--overflow-indicator-direction-param]\";\n\n/**\n * Headless **Overflow Indicator**: detects whether a scroll container can still\n * scroll toward its start and/or end and publishes it as `data-overflow-start` /\n * `data-overflow-end`. No APG widget — a state-detection utility. Consumers draw\n * edge shadows or arrows in CSS to signal \"more content this way\".\n *\n * Markup contract (identifier: `stimeo--overflow-indicator`):\n *   <div data-controller=\"stimeo--overflow-indicator\"\n *        data-stimeo--overflow-indicator-orientation-value=\"horizontal\">\n *     <button type=\"button\" aria-label=\"Prev\"\n *             data-stimeo--overflow-indicator-direction-param=\"start\"\n *             data-action=\"click->stimeo--overflow-indicator#scrollByPage\">‹</button>\n *     <div data-stimeo--overflow-indicator-target=\"viewport\"\n *          data-action=\"scroll->stimeo--overflow-indicator#update\"\n *          tabindex=\"0\" role=\"region\" aria-label=\"Products\"\n *          style=\"overflow-x: auto;\"><!-- items --></div>\n *     <button type=\"button\" aria-label=\"Next\"\n *             data-stimeo--overflow-indicator-direction-param=\"end\"\n *             data-action=\"click->stimeo--overflow-indicator#scrollByPage\">›</button>\n *   </div>\n *\n * The viewport's scroll position and size are watched (via the wired `scroll`\n * action, plus {@link LayoutObserver} for viewport/content resize, a\n * {@link MutationObserver}, and descendant load events). Optional page buttons\n * scroll one logical viewport page at a time (including RTL) and have their\n * disabled state synced to the matching direction's remaining room.\n *\n * @remarks\n * Behavior only — shadows, arrows, and gradients are the consumer's CSS;\n * `data-overflow-*` carry no ARIA semantics. All observers/listeners are released\n * on `disconnect()` (Turbo navigation included). `scrollByPage` scrolls smoothly\n * by default and forces an instant jump under `prefers-reduced-motion`, regardless\n * of the consumer's CSS `scroll-behavior`.\n */\nexport class OverflowIndicatorController extends Controller<HTMLElement> {\n  static override targets = [\"viewport\"];\n  static override values = {\n    orientation: { type: String, default: \"horizontal\" },\n    threshold: { type: Number, default: 1 },\n  };\n  static actions = [\"scrollByPage\", \"update\"] as const;\n  static events = [\"change\"] as const;\n\n  declare readonly viewportTarget: HTMLElement;\n  declare readonly hasViewportTarget: boolean;\n\n  declare orientationValue: string;\n  declare thresholdValue: number;\n\n  readonly #layout = new LayoutObserver(() => {\n    if (this.#connected) this.update();\n  });\n  #connected = false;\n  #observedViewport: HTMLElement | null = null;\n  readonly #observedContent = new Set<Element>();\n  #mutationObserver: MutationObserver | null = null;\n  /**\n   * Boundary buttons whose native `disabled` is held back while they hold focus.\n   *\n   * Completing the deferral is what actually disables the button, so the release\n   * callback — unlike {@link #cancelPendingButtonDisable} — applies it.\n   */\n  readonly #pendingButtonDisables = new BlurDeferral<HTMLButtonElement>((button) => {\n    this.#restorePendingMarkers(button);\n    // If the author disabled it while focus was pending, do not claim ownership.\n    if (!button.disabled) this.#disableButton(button);\n  });\n  /** Last reported room, so `change` fires only on transitions. */\n  #state: { start: boolean; end: boolean } | null = null;\n\n  override connect(): void {\n    this.#connected = true;\n    this.#syncViewport();\n  }\n\n  override disconnect(): void {\n    this.#connected = false;\n    this.#stopObservingViewport();\n    this.#layout.disconnect();\n    this.#clearPendingButtonDisables();\n    this.#state = null;\n  }\n\n  viewportTargetConnected(): void {\n    this.#syncViewport();\n  }\n\n  viewportTargetDisconnected(viewport: HTMLElement): void {\n    if (this.#observedViewport === viewport) this.#stopObservingViewport();\n    this.#syncViewport();\n  }\n\n  orientationValueChanged(): void {\n    if (this.#connected) this.update();\n  }\n\n  thresholdValueChanged(): void {\n    if (this.#connected) this.update();\n  }\n\n  /**\n   * Re-measures remaining scroll room and reflects the state hooks.\n   * Public so it can be wired to the viewport's `scroll`.\n   */\n  update(): void {\n    if (!this.hasViewportTarget) return;\n    const vp = this.viewportTarget;\n    const horizontal = this.orientationValue !== \"vertical\";\n    const t = this.#threshold;\n    const { position: scrollPos, max: maxScroll } = logicalScrollMetrics(vp, horizontal);\n\n    const start = scrollPos > t;\n    const end = scrollPos < maxScroll - t;\n\n    vp.setAttribute(\"data-overflow-start\", start ? \"true\" : \"false\");\n    vp.setAttribute(\"data-overflow-end\", end ? \"true\" : \"false\");\n    this.#syncButtons(start, end);\n\n    if (!this.#state || this.#state.start !== start || this.#state.end !== end) {\n      this.#state = { start, end };\n      this.dispatch(\"change\", { detail: { start, end } });\n    }\n  }\n\n  /** Scrolls one viewport page toward the `direction` param (`start`/`end`). */\n  scrollByPage(event: Event): void {\n    if (!this.hasViewportTarget) return;\n    const direction = this.#directionFromEvent(event);\n    if (!direction) return;\n    if (this.#state && !this.#state[direction]) return;\n\n    const vp = this.viewportTarget;\n    const horizontal = this.orientationValue !== \"vertical\";\n    const page = horizontal ? vp.clientWidth : vp.clientHeight;\n    const logicalDelta = direction === \"start\" ? -page : page;\n    const delta = physicalScrollDelta(vp, horizontal, logicalDelta);\n    const behavior: ScrollBehavior = prefersReducedMotion() ? \"instant\" : \"smooth\";\n\n    if (horizontal) {\n      vp.scrollBy({ left: delta, behavior });\n    } else {\n      vp.scrollBy({ top: delta, behavior });\n    }\n  }\n\n  /** Mirrors remaining room onto any direction buttons by toggling `disabled`. */\n  #syncButtons(start: boolean, end: boolean): void {\n    for (const button of this.#pendingButtonDisables.elements) {\n      if (\n        !button.isConnected ||\n        button.closest(\"[data-controller~='stimeo--overflow-indicator']\") !== this.element\n      ) {\n        this.#cancelPendingButtonDisable(button);\n      }\n    }\n    const buttons = this.element.querySelectorAll<HTMLButtonElement>(DIRECTION_BUTTON_SELECTOR);\n    for (const button of buttons) {\n      if (button.closest(\"[data-controller~='stimeo--overflow-indicator']\") !== this.element) {\n        continue;\n      }\n      const direction = button.getAttribute(\"data-stimeo--overflow-indicator-direction-param\");\n      if (direction === \"start\") this.#toggleButton(button, start);\n      else if (direction === \"end\") this.#toggleButton(button, end);\n    }\n  }\n\n  /**\n   * Reflects the remaining room onto a page button's `disabled`, owning only the\n   * `disabled` it sets itself via a marker (`data-overflow-indicator-disabled`,\n   * like `number-input`/`conditional-fields`). An author-disabled button (e.g. the\n   * whole control disabled) is therefore never blindly re-enabled.\n   */\n  #toggleButton(button: HTMLButtonElement, hasRoom: boolean): void {\n    // A restored Turbo snapshot can carry pending markers from the previous visit\n    // that this instance never created; release them from the DOM record before\n    // deciding, or the displaced `aria-disabled` would never be given back.\n    if (\n      !this.#pendingButtonDisables.has(button) &&\n      button.hasAttribute(\"data-overflow-indicator-pending-disabled\")\n    ) {\n      this.#cancelPendingButtonDisable(button);\n    }\n    if (hasRoom) {\n      this.#cancelPendingButtonDisable(button);\n      if (button.hasAttribute(\"data-overflow-indicator-disabled\")) {\n        button.disabled = false;\n        button.removeAttribute(\"data-overflow-indicator-disabled\");\n      }\n      return;\n    }\n    if (button.disabled) return; // already disabled (possibly by the author) — leave it\n    if (document.activeElement === button) {\n      this.#deferButtonDisable(button);\n    } else {\n      this.#disableButton(button);\n    }\n  }\n\n  /**\n   * Keeps a boundary button focusable until native blur, exposing its temporary\n   * inoperability with `aria-disabled` and making its action a no-op meanwhile.\n   */\n  #deferButtonDisable(button: HTMLButtonElement): void {\n    if (this.#pendingButtonDisables.has(button)) return;\n    button.setAttribute(\"data-overflow-indicator-pending-disabled\", \"\");\n    // The ownership marker carries the value we displace, so the DOM alone is\n    // enough to undo it. A Turbo snapshot is cloned before `disconnect()` runs,\n    // so a restored page arrives with these markers while the new instance has\n    // no in-memory record of them — an empty marker means \"there was none\".\n    button.setAttribute(\n      \"data-overflow-indicator-aria-disabled\",\n      button.getAttribute(\"aria-disabled\") ?? \"\",\n    );\n    button.setAttribute(\"aria-disabled\", \"true\");\n    this.#pendingButtonDisables.defer(button);\n  }\n\n  #disableButton(button: HTMLButtonElement): void {\n    button.disabled = true;\n    button.setAttribute(\"data-overflow-indicator-disabled\", \"\");\n  }\n\n  /** Cancels a pending disable without applying it, restoring the displaced state. */\n  #cancelPendingButtonDisable(button: HTMLButtonElement): void {\n    this.#pendingButtonDisables.release(button);\n    this.#restorePendingMarkers(button);\n  }\n\n  /**\n   * Drops the pending marker and gives back the `aria-disabled` it displaced.\n   *\n   * Reads the displaced value from the DOM rather than memory: a Turbo snapshot is\n   * cloned before `disconnect()` runs, so a restored page can arrive with markers\n   * this instance never wrote.\n   */\n  #restorePendingMarkers(button: HTMLButtonElement): void {\n    button.removeAttribute(\"data-overflow-indicator-pending-disabled\");\n    const displaced = button.getAttribute(\"data-overflow-indicator-aria-disabled\");\n    if (displaced !== null) {\n      button.removeAttribute(\"data-overflow-indicator-aria-disabled\");\n      if (button.getAttribute(\"aria-disabled\") === \"true\") {\n        if (displaced === \"\") button.removeAttribute(\"aria-disabled\");\n        else button.setAttribute(\"aria-disabled\", displaced);\n      }\n    }\n  }\n\n  #clearPendingButtonDisables(): void {\n    for (const button of this.#pendingButtonDisables.elements) {\n      this.#cancelPendingButtonDisable(button);\n    }\n  }\n\n  /** Moves resize/mutation/load observation to the current viewport target. */\n  #syncViewport(): void {\n    if (!this.#connected) return;\n    const next = this.hasViewportTarget ? this.viewportTarget : null;\n    if (next === this.#observedViewport) return;\n    this.#stopObservingViewport();\n    if (!next) return;\n\n    this.#observedViewport = next;\n    this.#layout.observe(next);\n    this.#layout.observeViewport();\n    next.addEventListener(\"load\", this.#onContentLoad, true);\n    this.#syncContentObservation();\n\n    if (typeof MutationObserver !== \"undefined\") {\n      this.#mutationObserver = new MutationObserver(() => {\n        if (!this.#connected || this.#observedViewport !== next) return;\n        this.#syncContentObservation();\n        this.update();\n      });\n      this.#mutationObserver.observe(this.element, {\n        childList: true,\n        subtree: true,\n        characterData: true,\n        attributes: true,\n        attributeFilter: [\"class\", \"style\", \"hidden\"],\n      });\n    }\n    this.#state = null;\n    this.update();\n  }\n\n  /** Observes direct content boxes whose resize can change the viewport's scroll extent. */\n  #syncContentObservation(): void {\n    const next = new Set<Element>(this.#observedViewport?.children ?? []);\n    for (const content of this.#observedContent) {\n      if (!next.has(content)) {\n        this.#layout.unobserve(content);\n        this.#observedContent.delete(content);\n      }\n    }\n    for (const content of next) {\n      if (!this.#observedContent.has(content)) {\n        this.#observedContent.add(content);\n        this.#layout.observe(content);\n      }\n    }\n  }\n\n  #stopObservingViewport(): void {\n    this.#mutationObserver?.disconnect();\n    this.#mutationObserver = null;\n    this.#observedViewport?.removeEventListener(\"load\", this.#onContentLoad, true);\n    if (this.#observedViewport) this.#layout.unobserve(this.#observedViewport);\n    for (const content of this.#observedContent) this.#layout.unobserve(content);\n    this.#observedContent.clear();\n    this.#observedViewport = null;\n    this.#layout.unobserveViewport();\n  }\n\n  readonly #onContentLoad = (): void => {\n    if (this.#connected) this.update();\n  };\n\n  get #threshold(): number {\n    const value = this.thresholdValue;\n    return Number.isFinite(value) ? Math.max(0, value) : 1;\n  }\n\n  #directionFromEvent(event: Event): \"start\" | \"end\" | null {\n    const params = (event as Event & { params?: { direction?: unknown } }).params;\n    const direction = params?.direction;\n    return direction === \"start\" || direction === \"end\" ? direction : null;\n  }\n}\n"]}

package/dist/controllers/overflow_menu_controller.d.ts

@@ -7,33 +7,92 @@ import { Controller } from '@hotwired/stimulus';
  * composition; the menu's a11y is delegated to Menu, so it is not re-implemented).
  *
  * Markup contract (identifier: `stimeo--overflow-menu`):
- *   <div data-controller="stimeo--overflow-menu" role="toolbar">
+ *   <nav data-controller="stimeo--overflow-menu" aria-label="Actions">
  *     <div data-stimeo--overflow-menu-target="items">
- *       <a data-priority="1">Save</a><a data-priority="2">Duplicate</a><a>Delete</a>
+ *       <button data-priority="1">Save</button>
+ *       <button>Delete</button>
  *     </div>
  *     <div data-controller="stimeo--menu" data-stimeo--overflow-menu-target="more" hidden>
- *       <button id="more-trigger" data-stimeo--menu-target="trigger">More</button>
- *       <ul role="menu" aria-labelledby="more-trigger"
- *           data-stimeo--menu-target="menu" hidden></ul>
+ *       <button id="more-trigger" data-stimeo--menu-target="trigger"
+ *         aria-haspopup="menu" aria-expanded="false"
+ *         data-action="click->stimeo--menu#toggle
+ *                      keydown->stimeo--menu#onTriggerKeydown">More</button>
+ *       <div role="menu" aria-labelledby="more-trigger"
+ *            data-stimeo--menu-target="menu" hidden></div>
  *     </div>
  *   </div>
  *
- * On connect (and every debounced resize) it measures the items against the container
- * width and, when they overflow, banks the lowest-priority ones into the More menu —
- * giving each `role="menuitem"` / `tabindex="-1"` and the menu's `item` target so Menu
- * drives it — until the rest fit beside the More button. When nothing overflows the
- * More button is `hidden`. The controller element carries `data-overflowing` /
- * `data-overflow-count`, and a `change` event fires on each transition.
+ * This controller does not own the root's role. It ships none: a navigation bar is
+ * a named `<nav>` whose items stay in the normal Tab order. A consumer may add
+ * `role="toolbar"`, but that alone is not an APG Toolbar — the single-tab-stop
+ * roving is {@link ToolbarController}'s behavior, not this one's — and a named
+ * role still needs `aria-label` / `aria-labelledby`.
+ *
+ * Two parts of that contract are load-bearing and easy to drop. The banked-items
+ * container is a permissive single `role="menu"` element this controller appends to
+ * directly; use a `<div>`, since a `<ul>` cannot directly own the moved controls. And the
+ * trigger's `data-action` is **required, not decoration**: without it the More button
+ * never opens, and `keydown->stimeo--menu#onTriggerKeydown` is what makes it reachable
+ * by keyboard at all (`Enter` / `Space` / `ArrowDown`). It is spelled out above rather
+ * than referenced, because the keyboard half of this contract lives *only* in the
+ * consumer's markup — nothing in this controller's source would reveal its absence.
+ * Items need no bindings of their own — Menu delegates their handling from its own
+ * element, so a control that only becomes a menu item at runtime is operable the
+ * moment it lands.
+ *
+ * On connect (and every debounced resize) it measures the items against the container's
+ * content width and, when they overflow, banks the lowest-priority ones into the More
+ * menu — giving each `role="menuitem"` / `tabindex="-1"` and the menu's `item` target so
+ * Menu drives it — until the rest fit beside the More button. When nothing overflows the
+ * More wrapper (button *and* menu) is `hidden`. The controller element carries
+ * `data-overflowing` / `data-overflow-count`, and a `change` event fires on connect and
+ * on every later transition.
  *
  * @remarks
- * Items are *moved* (not cloned). When a focused item retreats into the (collapsed)
- * menu it would otherwise be hidden and lose focus, so focus is redirected to the More
- * trigger. Priority: lower `data-priority` is kept longer; items without one drop first.
- * Behavior only — no styling. The `ResizeObserver` and debounce timer are released on
- * `disconnect()` (Turbo navigation included); state is derived from the DOM each pass
- * (no module-scope state), so `connect()` re-syncs after a Turbo morph. Captures the
- * managed item set at connect; call the `update` action to re-measure after adding
- * items dynamically.
+ * **Measuring.** The container's width must not be derived from its content (give the bar
+ * an explicit width, `flex: 1`, or plain block layout): the More button is revealed before
+ * measuring, so a shrink-to-fit container always reports "items + gap + More" and nothing
+ * ever overflows. The budget is the container's *content box* (`clientWidth` minus its
+ * horizontal padding); the gap between items comes from the items container, the gap
+ * reserved for the More button from the bar itself. Item widths are cached (a natural
+ * width is location-independent) so a pass reads only the items in the bar — one reflow,
+ * not two. The trade-off: an item whose content changes *while banked* (a locale switch, a
+ * badge update) keeps its stale width until it is back in the bar, so it may return one
+ * pass late; re-measuring it in place would cost a second reflow every pass. An item the
+ * author marked `hidden` is out of the budget, out of the drop order, and never banked; it
+ * holds its canonical slot and rejoins as soon as the attribute goes away. Toggling
+ * `hidden` is an attribute change, not a resize, so call `update` after it.
+ *
+ * **Moving.** Items are moved (never cloned), and only the nodes that are actually out of
+ * place — a pass that changes nothing touches no node, because re-inserting a node removes
+ * it first and the browser then drops focus to `<body>`. Where `moveBefore` is supported
+ * the move preserves focus and transient element state outright.
+ *
+ * **Focus.** When the focused item (or a descendant of it) *starts* retreating into a
+ * collapsed menu it would be hidden and lose focus, so focus is redirected to the More
+ * trigger (falling back to the More wrapper when the markup has no trigger — give it one,
+ * or focus is left to the browser). While the menu is expanded the item stays visible, so
+ * focus is left alone — unless the focused item is the one returning to the bar, which
+ * takes focus out of the wrapper and leaves the expanded menu with nothing that owns it;
+ * the menu is then closed and focus stays on the returned item. When the last banked item
+ * returns, the wrapper is about to be hidden: the menu is closed and focus is moved out of
+ * it to the last item that can actually hold it (`hidden` and disabled ones cannot), or to
+ * the root when none can.
+ *
+ * **Priority.** Lower `data-priority` is kept longer; a value that is absent, empty, or
+ * not a number ranks lowest and drops first.
+ *
+ * **Turbo.** The managed set and the canonical order are rebuilt *from the DOM* every
+ * pass, so a fresh `connect()` onto markup that already holds banked items (cache restore,
+ * a morph, a clone, server-rendered overflow) re-adopts them instead of orphaning them
+ * inside a wrapper it would then hide. Symmetrically, `disconnect()` and
+ * `turbo:before-cache` return every item to the bar, collapse the composed menu (so it
+ * releases its dismissal-stack membership rather than being snapshotted mid-gesture), and
+ * strip this controller's bookkeeping attributes, so a cached snapshot is always the
+ * pristine authored DOM. The `ResizeObserver` and debounce timer are released on
+ * `disconnect()` too.
+ *
+ * Behavior only — no styling.
  */
 declare class OverflowMenuController extends Controller<HTMLElement> {
     #private;