stimeo-ui 0.1.0-alpha.1

package/dist/controllers/otp_controller.d.ts

@@ -0,0 +1,68 @@
+import { Controller } from '@hotwired/stimulus';
+
+/**
+ * Headless, accessible One-Time Password / PIN input logic.
+ *
+ * Markup contract (identifier: `stimeo--otp`):
+ *   <div data-controller="stimeo--otp"
+ *        data-stimeo--otp-length-value="6"
+ *        data-stimeo--otp-pattern-value="[0-9]"
+ *        role="group" aria-label="One-time passcode">
+ *     <input data-stimeo--otp-target="field" inputmode="numeric" maxlength="1"
+ *            data-action="input->stimeo--otp#onInput
+ *                         keydown->stimeo--otp#onKeydown
+ *                         paste->stimeo--otp#onPaste" />
+ *     <input type="hidden" data-stimeo--otp-target="value" />
+ *   </div>
+ *
+ * Implements highly polished UX conventions for single-digit field groups:
+ * - Dynamic autofocus advancement upon valid inputs.
+ * - Auto-selection `select()` upon gaining focus to enable frictionless digit overwrites.
+ * - Retroactive Backspace key focus stepping to clear preceding values safely.
+ * - Clipboard intercepting paste division across fields with trailing focus positioning.
+ * - Hidden form sync and complete/change event dispatching.
+ *
+ * @remarks
+ * Behavior only. The controller binds events dynamically to pre-rendered inputs,
+ * updates `data-filled` and hidden value bindings, and emits Stimulus custom events.
+ */
+declare class OtpController extends Controller<HTMLElement> {
+    #private;
+    static targets: string[];
+    static values: {
+        length: {
+            type: NumberConstructor;
+            default: number;
+        };
+        pattern: {
+            type: StringConstructor;
+            default: string;
+        };
+    };
+    static actions: readonly ["onInput", "onKeydown", "onPaste"];
+    static events: readonly ["change", "complete", "invalid"];
+    readonly fieldTargets: HTMLInputElement[];
+    readonly valueTarget: HTMLInputElement;
+    readonly errorTarget: HTMLElement;
+    readonly hasValueTarget: boolean;
+    readonly hasErrorTarget: boolean;
+    lengthValue: number;
+    patternValue: string;
+    connect(): void;
+    disconnect(): void;
+    /**
+     * Stimulus lifecycle callback when a new field target enters the DOM.
+     * Ensures new additions are also wired with overwriting support.
+     */
+    fieldTargetConnected(element: HTMLInputElement): void;
+    /** Removes focus listeners when fields are dropped. */
+    fieldTargetDisconnected(element: HTMLInputElement): void;
+    /** Handles keystroke inputs and advances focus to the next field. */
+    onInput(event: Event): void;
+    /** Handles Backspace retreating, arrows, and home/end navigation. */
+    onKeydown(event: KeyboardEvent): void;
+    /** Divides pasted string characters across available input fields. */
+    onPaste(event: ClipboardEvent): void;
+}
+
+export { OtpController };

package/dist/controllers/otp_controller.js

@@ -0,0 +1,201 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/otp_controller.ts
+var OtpController = class extends Controller {
+  static targets = ["field", "value", "error"];
+  static values = {
+    length: { type: Number, default: 6 },
+    pattern: { type: String, default: "[0-9]" }
+  };
+  static actions = ["onInput", "onKeydown", "onPaste"];
+  static events = ["change", "complete", "invalid"];
+  #isComposing = /* @__PURE__ */ new Map();
+  connect() {
+    for (const field of this.fieldTargets) {
+      field.addEventListener("focus", this.#onFieldFocus);
+      field.addEventListener("compositionstart", this.#onCompositionStart);
+      field.addEventListener("compositionend", this.#onCompositionEnd);
+    }
+  }
+  disconnect() {
+    for (const field of this.fieldTargets) {
+      field.removeEventListener("focus", this.#onFieldFocus);
+      field.removeEventListener("compositionstart", this.#onCompositionStart);
+      field.removeEventListener("compositionend", this.#onCompositionEnd);
+    }
+    this.#isComposing.clear();
+  }
+  /**
+   * Stimulus lifecycle callback when a new field target enters the DOM.
+   * Ensures new additions are also wired with overwriting support.
+   */
+  fieldTargetConnected(element) {
+    element.addEventListener("focus", this.#onFieldFocus);
+    element.addEventListener("compositionstart", this.#onCompositionStart);
+    element.addEventListener("compositionend", this.#onCompositionEnd);
+  }
+  /** Removes focus listeners when fields are dropped. */
+  fieldTargetDisconnected(element) {
+    element.removeEventListener("focus", this.#onFieldFocus);
+    element.removeEventListener("compositionstart", this.#onCompositionStart);
+    element.removeEventListener("compositionend", this.#onCompositionEnd);
+    this.#isComposing.delete(element);
+  }
+  /** Handles keystroke inputs and advances focus to the next field. */
+  onInput(event) {
+    const input = event.currentTarget;
+    if (!input) return;
+    if (this.#isComposing.get(input)) return;
+    this.#handleInputValidation(input);
+  }
+  /** Handles Backspace retreating, arrows, and home/end navigation. */
+  onKeydown(event) {
+    const input = event.currentTarget;
+    if (!input) return;
+    const index = this.fieldTargets.indexOf(input);
+    if (index === -1) return;
+    if (this.#isComposing.get(input)) return;
+    switch (event.key) {
+      case "Backspace":
+        if (!input.value) {
+          if (index > 0) {
+            event.preventDefault();
+            const prevField = this.fieldTargets[index - 1];
+            if (prevField) {
+              prevField.value = "";
+              prevField.removeAttribute("data-filled");
+              prevField.focus();
+              this.#clearError();
+              this.#syncAndDispatch();
+            }
+          }
+        } else {
+          input.value = "";
+          input.removeAttribute("data-filled");
+          this.#clearError();
+          this.#syncAndDispatch();
+        }
+        break;
+      case "ArrowLeft":
+        if (index > 0) {
+          event.preventDefault();
+          this.fieldTargets[index - 1]?.focus();
+        }
+        break;
+      case "ArrowRight":
+        if (index < this.lengthValue - 1) {
+          event.preventDefault();
+          this.fieldTargets[index + 1]?.focus();
+        }
+        break;
+      case "Home":
+        event.preventDefault();
+        this.fieldTargets[0]?.focus();
+        break;
+      case "End":
+        event.preventDefault();
+        this.fieldTargets[this.lengthValue - 1]?.focus();
+        break;
+    }
+  }
+  /** Divides pasted string characters across available input fields. */
+  onPaste(event) {
+    const input = event.currentTarget;
+    if (!input) return;
+    const startIndex = this.fieldTargets.indexOf(input);
+    if (startIndex === -1) return;
+    event.preventDefault();
+    const rawText = event.clipboardData?.getData("text") || "";
+    const text = this.#normalizeValue(rawText);
+    const regex = new RegExp(`^${this.patternValue}$`);
+    const validChars = Array.from(text).filter((char) => regex.test(char));
+    if (validChars.length === 0) {
+      this.#showError();
+      return;
+    }
+    const limit = Math.min(validChars.length, this.lengthValue - startIndex);
+    let lastFocusedIndex = startIndex;
+    for (let i = 0; i < limit; i++) {
+      const fieldIndex = startIndex + i;
+      const field = this.fieldTargets[fieldIndex];
+      const char = validChars[i];
+      if (field && char) {
+        field.value = char;
+        field.setAttribute("data-filled", "true");
+        lastFocusedIndex = fieldIndex;
+      }
+    }
+    this.#clearError();
+    const focusTargetIndex = lastFocusedIndex < this.lengthValue - 1 ? lastFocusedIndex + 1 : lastFocusedIndex;
+    this.fieldTargets[focusTargetIndex]?.focus();
+    this.#syncAndDispatch();
+  }
+  #onFieldFocus = (event) => {
+    const input = event.currentTarget;
+    if (input) {
+      input.select();
+    }
+  };
+  #onCompositionStart = (event) => {
+    const input = event.currentTarget;
+    this.#isComposing.set(input, true);
+  };
+  #onCompositionEnd = (event) => {
+    const input = event.currentTarget;
+    this.#isComposing.set(input, false);
+    this.#handleInputValidation(input);
+  };
+  #handleInputValidation(input) {
+    const index = this.fieldTargets.indexOf(input);
+    if (index === -1) return;
+    const rawValue = input.value;
+    const normalized = this.#normalizeValue(rawValue);
+    const regex = new RegExp(`^${this.patternValue}$`);
+    if (normalized && regex.test(normalized)) {
+      input.value = normalized;
+      input.setAttribute("data-filled", "true");
+      this.#clearError();
+      if (index < this.lengthValue - 1) {
+        const nextField = this.fieldTargets[index + 1];
+        nextField?.focus();
+      }
+    } else if (normalized) {
+      input.value = "";
+      input.removeAttribute("data-filled");
+      this.#showError();
+    } else {
+      input.removeAttribute("data-filled");
+    }
+    this.#syncAndDispatch();
+  }
+  #normalizeValue(val) {
+    return val.replace(/[０-９]/g, (s) => String.fromCharCode(s.charCodeAt(0) - 65248));
+  }
+  #showError() {
+    if (this.hasErrorTarget) {
+      this.errorTarget.removeAttribute("hidden");
+    }
+    this.dispatch("invalid", { detail: { pattern: this.patternValue } });
+  }
+  #clearError() {
+    if (this.hasErrorTarget) {
+      this.errorTarget.setAttribute("hidden", "true");
+    }
+  }
+  #syncAndDispatch() {
+    const fields = this.fieldTargets;
+    const combinedValue = fields.map((f) => f.value).join("");
+    if (this.hasValueTarget) {
+      this.valueTarget.value = combinedValue;
+    }
+    this.dispatch("change", { detail: { value: combinedValue } });
+    const isCompleted = fields.every((f) => f.value.length > 0) && combinedValue.length === this.lengthValue;
+    if (isCompleted) {
+      this.dispatch("complete", { detail: { value: combinedValue } });
+    }
+  }
+};
+
+export { OtpController };
+//# sourceMappingURL=otp_controller.js.map
+//# sourceMappingURL=otp_controller.js.map

package/dist/controllers/otp_controller.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/controllers/otp_controller.ts"],"names":[],"mappings":"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","file":"otp_controller.js","sourcesContent":["import { Controller } from \"@hotwired/stimulus\";\n\n/**\n * Headless, accessible One-Time Password / PIN input logic.\n *\n * Markup contract (identifier: `stimeo--otp`):\n *   <div data-controller=\"stimeo--otp\"\n *        data-stimeo--otp-length-value=\"6\"\n *        data-stimeo--otp-pattern-value=\"[0-9]\"\n *        role=\"group\" aria-label=\"One-time passcode\">\n *     <input data-stimeo--otp-target=\"field\" inputmode=\"numeric\" maxlength=\"1\"\n *            data-action=\"input->stimeo--otp#onInput\n *                         keydown->stimeo--otp#onKeydown\n *                         paste->stimeo--otp#onPaste\" />\n *     <input type=\"hidden\" data-stimeo--otp-target=\"value\" />\n *   </div>\n *\n * Implements highly polished UX conventions for single-digit field groups:\n * - Dynamic autofocus advancement upon valid inputs.\n * - Auto-selection `select()` upon gaining focus to enable frictionless digit overwrites.\n * - Retroactive Backspace key focus stepping to clear preceding values safely.\n * - Clipboard intercepting paste division across fields with trailing focus positioning.\n * - Hidden form sync and complete/change event dispatching.\n *\n * @remarks\n * Behavior only. The controller binds events dynamically to pre-rendered inputs,\n * updates `data-filled` and hidden value bindings, and emits Stimulus custom events.\n */\nexport class OtpController extends Controller<HTMLElement> {\n  static override targets = [\"field\", \"value\", \"error\"];\n  static override values = {\n    length: { type: Number, default: 6 },\n    pattern: { type: String, default: \"[0-9]\" },\n  };\n  static actions = [\"onInput\", \"onKeydown\", \"onPaste\"] as const;\n  static events = [\"change\", \"complete\", \"invalid\"] as const;\n\n  declare readonly fieldTargets: HTMLInputElement[];\n  declare readonly valueTarget: HTMLInputElement;\n  declare readonly errorTarget: HTMLElement;\n  declare readonly hasValueTarget: boolean;\n  declare readonly hasErrorTarget: boolean;\n\n  declare lengthValue: number;\n  declare patternValue: string;\n\n  #isComposing = new Map<HTMLInputElement, boolean>();\n\n  override connect(): void {\n    // Dynamically bind auto-selection and IME tracking logic to all connected inputs\n    for (const field of this.fieldTargets) {\n      field.addEventListener(\"focus\", this.#onFieldFocus);\n      field.addEventListener(\"compositionstart\", this.#onCompositionStart);\n      field.addEventListener(\"compositionend\", this.#onCompositionEnd);\n    }\n  }\n\n  override disconnect(): void {\n    for (const field of this.fieldTargets) {\n      field.removeEventListener(\"focus\", this.#onFieldFocus);\n      field.removeEventListener(\"compositionstart\", this.#onCompositionStart);\n      field.removeEventListener(\"compositionend\", this.#onCompositionEnd);\n    }\n    this.#isComposing.clear();\n  }\n\n  /**\n   * Stimulus lifecycle callback when a new field target enters the DOM.\n   * Ensures new additions are also wired with overwriting support.\n   */\n  fieldTargetConnected(element: HTMLInputElement): void {\n    element.addEventListener(\"focus\", this.#onFieldFocus);\n    element.addEventListener(\"compositionstart\", this.#onCompositionStart);\n    element.addEventListener(\"compositionend\", this.#onCompositionEnd);\n  }\n\n  /** Removes focus listeners when fields are dropped. */\n  fieldTargetDisconnected(element: HTMLInputElement): void {\n    element.removeEventListener(\"focus\", this.#onFieldFocus);\n    element.removeEventListener(\"compositionstart\", this.#onCompositionStart);\n    element.removeEventListener(\"compositionend\", this.#onCompositionEnd);\n    this.#isComposing.delete(element);\n  }\n\n  /** Handles keystroke inputs and advances focus to the next field. */\n  onInput(event: Event): void {\n    const input = event.currentTarget as HTMLInputElement | null;\n    if (!input) return;\n\n    // Guard during active composition to prevent premature focus switching\n    if (this.#isComposing.get(input)) return;\n\n    this.#handleInputValidation(input);\n  }\n\n  /** Handles Backspace retreating, arrows, and home/end navigation. */\n  onKeydown(event: KeyboardEvent): void {\n    const input = event.currentTarget as HTMLInputElement | null;\n    if (!input) return;\n\n    const index = this.fieldTargets.indexOf(input);\n    if (index === -1) return;\n\n    // Do not trigger keydown actions during composition\n    if (this.#isComposing.get(input)) return;\n\n    switch (event.key) {\n      case \"Backspace\":\n        if (!input.value) {\n          // Empty field: step backward, wipe previous digit, and focus it\n          if (index > 0) {\n            event.preventDefault();\n            const prevField = this.fieldTargets[index - 1];\n            if (prevField) {\n              prevField.value = \"\";\n              prevField.removeAttribute(\"data-filled\");\n              prevField.focus();\n              this.#clearError();\n              this.#syncAndDispatch();\n            }\n          }\n        } else {\n          // Filled field: clear current value\n          input.value = \"\";\n          input.removeAttribute(\"data-filled\");\n          this.#clearError();\n          this.#syncAndDispatch();\n        }\n        break;\n\n      case \"ArrowLeft\":\n        if (index > 0) {\n          event.preventDefault();\n          this.fieldTargets[index - 1]?.focus();\n        }\n        break;\n\n      case \"ArrowRight\":\n        if (index < this.lengthValue - 1) {\n          event.preventDefault();\n          this.fieldTargets[index + 1]?.focus();\n        }\n        break;\n\n      case \"Home\":\n        event.preventDefault();\n        this.fieldTargets[0]?.focus();\n        break;\n\n      case \"End\":\n        event.preventDefault();\n        this.fieldTargets[this.lengthValue - 1]?.focus();\n        break;\n\n      default:\n        break;\n    }\n  }\n\n  /** Divides pasted string characters across available input fields. */\n  onPaste(event: ClipboardEvent): void {\n    const input = event.currentTarget as HTMLInputElement | null;\n    if (!input) return;\n\n    const startIndex = this.fieldTargets.indexOf(input);\n    if (startIndex === -1) return;\n\n    event.preventDefault();\n\n    const rawText = event.clipboardData?.getData(\"text\") || \"\";\n    const text = this.#normalizeValue(rawText);\n    const regex = new RegExp(`^${this.patternValue}$`);\n    const validChars = Array.from(text).filter((char) => regex.test(char));\n\n    if (validChars.length === 0) {\n      this.#showError();\n      return;\n    }\n\n    const limit = Math.min(validChars.length, this.lengthValue - startIndex);\n    let lastFocusedIndex = startIndex;\n\n    for (let i = 0; i < limit; i++) {\n      const fieldIndex = startIndex + i;\n      const field = this.fieldTargets[fieldIndex];\n      const char = validChars[i];\n\n      if (field && char) {\n        field.value = char;\n        field.setAttribute(\"data-filled\", \"true\");\n        lastFocusedIndex = fieldIndex;\n      }\n    }\n\n    this.#clearError();\n\n    // Set trailing focus position to the last filled box (or next empty if one exists)\n    const focusTargetIndex =\n      lastFocusedIndex < this.lengthValue - 1 ? lastFocusedIndex + 1 : lastFocusedIndex;\n    this.fieldTargets[focusTargetIndex]?.focus();\n\n    this.#syncAndDispatch();\n  }\n\n  readonly #onFieldFocus = (event: FocusEvent): void => {\n    const input = event.currentTarget as HTMLInputElement | null;\n    if (input) {\n      // Auto-selection enables effortless character overwrites\n      input.select();\n    }\n  };\n\n  readonly #onCompositionStart = (event: CompositionEvent): void => {\n    const input = event.currentTarget as HTMLInputElement;\n    this.#isComposing.set(input, true);\n  };\n\n  readonly #onCompositionEnd = (event: CompositionEvent): void => {\n    const input = event.currentTarget as HTMLInputElement;\n    this.#isComposing.set(input, false);\n\n    // Force validation after IME conversion finishes\n    this.#handleInputValidation(input);\n  };\n\n  #handleInputValidation(input: HTMLInputElement): void {\n    const index = this.fieldTargets.indexOf(input);\n    if (index === -1) return;\n\n    const rawValue = input.value;\n    const normalized = this.#normalizeValue(rawValue);\n    const regex = new RegExp(`^${this.patternValue}$`);\n\n    if (normalized && regex.test(normalized)) {\n      input.value = normalized;\n      input.setAttribute(\"data-filled\", \"true\");\n      this.#clearError();\n\n      // Step focus forward\n      if (index < this.lengthValue - 1) {\n        const nextField = this.fieldTargets[index + 1];\n        nextField?.focus();\n      }\n    } else if (normalized) {\n      input.value = \"\";\n      input.removeAttribute(\"data-filled\");\n      this.#showError();\n    } else {\n      input.removeAttribute(\"data-filled\");\n    }\n\n    this.#syncAndDispatch();\n  }\n\n  #normalizeValue(val: string): string {\n    // Replaces full-width numbers (０-９) with standard half-width ones (0-9)\n    return val.replace(/[０-９]/g, (s) => String.fromCharCode(s.charCodeAt(0) - 0xfee0));\n  }\n\n  #showError(): void {\n    if (this.hasErrorTarget) {\n      this.errorTarget.removeAttribute(\"hidden\");\n    }\n    // Behavior only: emit a neutral payload and let the consumer compose/localize\n    // the user-facing message. The pattern is reported so consumers can word it.\n    this.dispatch(\"invalid\", { detail: { pattern: this.patternValue } });\n  }\n\n  #clearError(): void {\n    if (this.hasErrorTarget) {\n      this.errorTarget.setAttribute(\"hidden\", \"true\");\n    }\n  }\n\n  #syncAndDispatch(): void {\n    const fields = this.fieldTargets;\n    const combinedValue = fields.map((f) => f.value).join(\"\");\n\n    if (this.hasValueTarget) {\n      this.valueTarget.value = combinedValue;\n    }\n\n    this.dispatch(\"change\", { detail: { value: combinedValue } });\n\n    // Completed state when all fields contain a digit\n    const isCompleted =\n      fields.every((f) => f.value.length > 0) && combinedValue.length === this.lengthValue;\n    if (isCompleted) {\n      this.dispatch(\"complete\", { detail: { value: combinedValue } });\n    }\n  }\n}\n"]}

package/dist/controllers/overflow_indicator_controller.d.ts

@@ -0,0 +1,62 @@
+import { Controller } from '@hotwired/stimulus';
+
+/**
+ * Headless **Overflow Indicator**: detects whether a scroll container can still
+ * scroll toward its start and/or end and publishes it as `data-overflow-start` /
+ * `data-overflow-end`. No APG widget — a state-detection utility. Consumers draw
+ * edge shadows or arrows in CSS to signal "more content this way".
+ *
+ * Markup contract (identifier: `stimeo--overflow-indicator`):
+ *   <div data-controller="stimeo--overflow-indicator"
+ *        data-stimeo--overflow-indicator-orientation-value="horizontal">
+ *     <button type="button" aria-label="Prev"
+ *             data-stimeo--overflow-indicator-direction-param="start"
+ *             data-action="click->stimeo--overflow-indicator#scrollByPage">‹</button>
+ *     <div data-stimeo--overflow-indicator-target="viewport"
+ *          data-action="scroll->stimeo--overflow-indicator#update"
+ *          tabindex="0" role="region" aria-label="Products"
+ *          style="overflow-x: auto;"><!-- items --></div>
+ *     <button type="button" aria-label="Next"
+ *             data-stimeo--overflow-indicator-direction-param="end"
+ *             data-action="click->stimeo--overflow-indicator#scrollByPage">›</button>
+ *   </div>
+ *
+ * The viewport's scroll position and size are watched (via the wired `scroll`
+ * action, plus {@link LayoutObserver} for resize and a {@link MutationObserver}
+ * for content changes). Optional page buttons scroll one viewport at a time and
+ * have their `disabled` synced to the matching direction's remaining room.
+ *
+ * @remarks
+ * Behavior only — shadows, arrows, and gradients are the consumer's CSS;
+ * `data-overflow-*` carry no ARIA semantics. All observers/listeners are released
+ * on `disconnect()` (Turbo navigation included). `scrollByPage` honors
+ * `prefers-reduced-motion`.
+ */
+declare class OverflowIndicatorController extends Controller<HTMLElement> {
+    #private;
+    static targets: string[];
+    static values: {
+        orientation: {
+            type: StringConstructor;
+            default: string;
+        };
+        threshold: {
+            type: NumberConstructor;
+            default: number;
+        };
+    };
+    static actions: readonly ["scrollByPage", "update"];
+    static events: readonly ["change"];
+    readonly viewportTarget: HTMLElement;
+    readonly hasViewportTarget: boolean;
+    orientationValue: string;
+    thresholdValue: number;
+    connect(): void;
+    disconnect(): void;
+    /** Re-measures remaining scroll room and reflects the state hooks. Public so it can be wired to the viewport's `scroll`. */
+    update(): void;
+    /** Scrolls one viewport page toward the `direction` param (`start`/`end`). */
+    scrollByPage(event: Event): void;
+}
+
+export { OverflowIndicatorController };

package/dist/controllers/overflow_indicator_controller.js

@@ -0,0 +1,169 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/overflow_indicator_controller.ts
+
+// src/utils/layout_observer.ts
+var LayoutObserver = class {
+  #callback;
+  #resizeObserverFactory;
+  #resizeObserver = null;
+  #observingViewport = false;
+  /** Stable bound handler so add/removeEventListener target the same reference. */
+  #handleViewportResize = () => {
+    this.#callback();
+  };
+  constructor(callback, options = {}) {
+    this.#callback = callback;
+    this.#resizeObserverFactory = options.resizeObserverFactory ?? (typeof ResizeObserver === "undefined" ? null : (cb) => new ResizeObserver(cb));
+  }
+  /**
+   * Starts observing an element's size. Repeated calls observe additional
+   * elements through the same shared observer. No-ops when no
+   * `ResizeObserver` implementation is available.
+   */
+  observe(element) {
+    if (!this.#resizeObserverFactory) return;
+    if (!this.#resizeObserver) {
+      this.#resizeObserver = this.#resizeObserverFactory(() => {
+        this.#callback();
+      });
+    }
+    this.#resizeObserver.observe(element);
+  }
+  /** Stops observing a single element while leaving any others in place. */
+  unobserve(element) {
+    this.#resizeObserver?.unobserve(element);
+  }
+  /** Starts observing viewport resizes. Idempotent: the listener is added once. */
+  observeViewport() {
+    if (this.#observingViewport) return;
+    this.#observingViewport = true;
+    window.addEventListener("resize", this.#handleViewportResize);
+  }
+  /** Stops observing viewport resizes without affecting element observation. */
+  unobserveViewport() {
+    if (!this.#observingViewport) return;
+    this.#observingViewport = false;
+    window.removeEventListener("resize", this.#handleViewportResize);
+  }
+  /**
+   * Releases every observation: disconnects the {@link ResizeObserver} and
+   * removes the viewport listener. Safe to call multiple times. Call this from a
+   * controller's `disconnect()`.
+   */
+  disconnect() {
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = null;
+    this.unobserveViewport();
+  }
+};
+
+// src/controllers/overflow_indicator_controller.ts
+var OverflowIndicatorController = class extends Controller {
+  static targets = ["viewport"];
+  static values = {
+    orientation: { type: String, default: "horizontal" },
+    threshold: { type: Number, default: 1 }
+  };
+  static actions = ["scrollByPage", "update"];
+  static events = ["change"];
+  #layout = new LayoutObserver(() => this.update());
+  #mutationObserver = null;
+  /** 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();
+  }
+  disconnect() {
+    this.#layout.disconnect();
+    this.#mutationObserver?.disconnect();
+    this.#mutationObserver = null;
+    this.#state = null;
+  }
+  /** 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 start = scrollPos > t;
+    const end = scrollPos < maxScroll - t;
+    vp.setAttribute("data-overflow-start", start ? "true" : "false");
+    vp.setAttribute("data-overflow-end", end ? "true" : "false");
+    this.#syncButtons(start, end);
+    if (!this.#state || this.#state.start !== start || this.#state.end !== end) {
+      this.#state = { start, end };
+      this.dispatch("change", { detail: { start, end } });
+    }
+  }
+  /** Scrolls one viewport page toward the `direction` param (`start`/`end`). */
+  scrollByPage(event) {
+    if (!this.hasViewportTarget) return;
+    const direction = this.#directionFromEvent(event);
+    if (!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";
+    if (horizontal) {
+      vp.scrollBy({ left: delta, behavior });
+    } else {
+      vp.scrollBy({ top: delta, behavior });
+    }
+  }
+  /** 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 buttons) {
+      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);
+    }
+  }
+  /**
+   * Reflects the remaining room onto a page button's `disabled`, owning only the
+   * `disabled` it sets itself via a marker (`data-overflow-indicator-disabled`,
+   * like `number-input`/`conditional-fields`). An author-disabled button (e.g. the
+   * whole control disabled) is therefore never blindly re-enabled.
+   */
+  #toggleButton(button, hasRoom) {
+    if (hasRoom) {
+      if (button.hasAttribute("data-overflow-indicator-disabled")) {
+        button.disabled = false;
+        button.removeAttribute("data-overflow-indicator-disabled");
+      }
+      return;
+    }
+    if (button.disabled) return;
+    button.disabled = true;
+    button.setAttribute("data-overflow-indicator-disabled", "");
+  }
+  #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 };
+//# sourceMappingURL=overflow_indicator_controller.js.map
+//# sourceMappingURL=overflow_indicator_controller.js.map

package/dist/controllers/overflow_indicator_controller.js.map

@@ -0,0 +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"]}

package/dist/controllers/overflow_menu_controller.d.ts

@@ -0,0 +1,64 @@
+import { Controller } from '@hotwired/stimulus';
+
+/**
+ * Headless **overflow / priority menu**: items that no longer fit their container are
+ * moved into a "More" dropdown (lowest `data-priority` first) and moved back as space
+ * returns, watched with a {@link ResizeObserver} (no dedicated APG pattern — a
+ * 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">
+ *     <div data-stimeo--overflow-menu-target="items">
+ *       <a data-priority="1">Save</a><a data-priority="2">Duplicate</a><a>Delete</a>
+ *     </div>
+ *     <div data-controller="stimeo--menu" data-stimeo--overflow-menu-target="more" hidden>
+ *       <button data-stimeo--menu-target="trigger">More</button>
+ *       <ul role="menu" data-stimeo--menu-target="menu" hidden></ul>
+ *     </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.
+ *
+ * @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.
+ */
+declare class OverflowMenuController extends Controller<HTMLElement> {
+    #private;
+    static targets: string[];
+    static values: {
+        moreLabel: {
+            type: StringConstructor;
+            default: string;
+        };
+        debounce: {
+            type: NumberConstructor;
+            default: number;
+        };
+    };
+    static actions: readonly ["update"];
+    static events: readonly ["change"];
+    readonly itemsTarget: HTMLElement;
+    readonly moreTarget: HTMLElement;
+    readonly hasItemsTarget: boolean;
+    readonly hasMoreTarget: boolean;
+    moreLabelValue: string;
+    debounceValue: number;
+    connect(): void;
+    disconnect(): void;
+    /** Re-measures and rebalances items between the bar and the More menu. */
+    update(): void;
+}
+
+export { OverflowMenuController };