stimeo-ui 0.2.1 → 0.3.0

data/dist/controllers/resizable_controller.js

@@ -1,5 +1,40 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/resizable_controller.ts
+
+// src/utils/arrow_step.ts
+function isReservedArrowChord(event, allow = []) {
+  if (!event.key.startsWith("Arrow")) return false;
+  return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
+}
+
+// src/utils/tabindex_loan.ts
+var TabindexLoan = class {
+  #value;
+  #lent = /* @__PURE__ */ new Set();
+  /**
+   * @param value - the `tabindex` to lend. `"-1"` (the default) is
+   *   programmatically focusable but not a Tab stop; `"0"` is a real Tab stop,
+   *   which a scroll region with no focusable content of its own needs.
+   */
+  constructor(value = "-1") {
+    this.#value = value;
+  }
+  /** Lends `element` the value; no-ops when it already carries a `tabindex`. */
+  lend(element) {
+    if (element.hasAttribute("tabindex")) return;
+    element.setAttribute("tabindex", this.#value);
+    this.#lent.add(element);
+  }
+  /** Takes back every loan whose value is still the one that was lent. */
+  returnAll() {
+    for (const element of this.#lent) {
+      if (element.getAttribute("tabindex") === this.#value) element.removeAttribute("tabindex");
+    }
+    this.#lent.clear();
+  }
+};
+
 // src/controllers/resizable_controller.ts
 var ResizableController = class extends Controller {
   static targets = ["primary", "secondary", "separator"];
@@ -11,18 +46,46 @@ var ResizableController = class extends Controller {
   };
   static actions = ["onKeydown", "onPointerDown", "toggle"];
   static events = ["change"];
-  /** Track previously held value before collapse toggles. */
+  /** The value held before the current collapse, restored when toggling back. */
   #valueBeforeCollapse = 50;
   /** Aborts in-progress pointer-drag listeners when the drag ends or on teardown. */
   #dragAbort = null;
+  /** `tabindex` lent to a pane so `F6` can put focus on it; panes carry none. */
+  #paneTabindex = new TabindexLoan();
+  /** Releases the pane cycle listener bound in {@link connect}. */
+  #cycleAbort = null;
   connect() {
     this.#clampAndSync();
+    this.#cycleAbort = new AbortController();
+    this.element.addEventListener("keydown", this.#onCycleKeydown, {
+      signal: this.#cycleAbort.signal
+    });
   }
   /** Cancels any active pointer drag so listeners never leak past disconnect. */
   disconnect() {
     this.#dragAbort?.abort();
     this.#dragAbort = null;
+    this.#cycleAbort?.abort();
+    this.#cycleAbort = null;
+    this.#paneTabindex.returnAll();
   }
+  /** Moves focus to the next pane on `F6`, wrapping; entering at the first one. */
+  #onCycleKeydown = (event) => {
+    if (event.key !== "F6") return;
+    if (event.defaultPrevented) return;
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+    const panes = [];
+    if (this.hasPrimaryTarget) panes.push(this.primaryTarget);
+    if (this.hasSecondaryTarget) panes.push(this.secondaryTarget);
+    if (panes.length === 0) return;
+    const target = event.target;
+    const current = panes.findIndex((pane) => target instanceof Node && pane.contains(target));
+    const next = panes[(current + 1) % panes.length];
+    if (!next) return;
+    event.preventDefault();
+    this.#paneTabindex.lend(next);
+    next.focus();
+  };
   /**
    * Stimulus lifecycle callback when the valueValue changes.
    * Keeps CSS fractions and ARIA status completely aligned.
@@ -47,6 +110,7 @@ var ResizableController = class extends Controller {
   }
   /** Keydown adjustments for ArrowUp/Down/Left/Right and Home/End. */
   onKeydown(event) {
+    if (isReservedArrowChord(event)) return;
     if (!this.hasSeparatorTarget) return;
     const orientation = this.separatorTarget.getAttribute("aria-orientation") || "vertical";
     const isVertical = orientation === "vertical";

data/dist/controllers/roving_controller.js

@@ -2,6 +2,17 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/roving_controller.ts
 
+// src/utils/logical_scroll.ts
+function isRtl(element) {
+  return window.getComputedStyle(element).direction === "rtl";
+}
+
+// src/utils/arrow_step.ts
+function isReservedArrowChord(event, allow = []) {
+  if (!event.key.startsWith("Arrow")) return false;
+  return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
+}
+
 // src/utils/roving_tabindex.ts
 var RovingTabindex = class {
   /** Returns the current ordered item elements; called on every operation. */
@@ -64,6 +75,7 @@ var RovingController = class extends Controller {
   /** Arrow keys move focus + the tab stop; Home/End jump to the ends. */
   #onKeydown = (event) => {
     if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
     const items = this.itemTargets;
     const current = this.#indexOf(event.target);
     if (current === -1) return;
@@ -72,10 +84,13 @@ var RovingController = class extends Controller {
     const orientation = this.orientationValue;
     const horizontal = orientation === "horizontal" || orientation === "both";
     const vertical = orientation === "vertical" || orientation === "both";
+    const rtl = horizontal && isRtl(this.element);
+    const forwardKey = rtl ? "ArrowLeft" : "ArrowRight";
+    const backwardKey = rtl ? "ArrowRight" : "ArrowLeft";
     let next;
-    if (horizontal && event.key === "ArrowRight" || vertical && event.key === "ArrowDown") {
+    if (horizontal && event.key === forwardKey || vertical && event.key === "ArrowDown") {
       next = rovingMove(current, length, 1, wrap);
-    } else if (horizontal && event.key === "ArrowLeft" || vertical && event.key === "ArrowUp") {
+    } else if (horizontal && event.key === backwardKey || vertical && event.key === "ArrowUp") {
       next = rovingMove(current, length, -1, wrap);
     } else if (this.homeEndValue && event.key === "Home") {
       next = 0;

data/dist/controllers/scroll_area_controller.js

@@ -72,6 +72,33 @@ function logicalScrollMetrics(element, horizontal) {
   return { position: Math.min(max, Math.max(0, position)), max };
 }
 
+// src/utils/tabindex_loan.ts
+var TabindexLoan = class {
+  #value;
+  #lent = /* @__PURE__ */ new Set();
+  /**
+   * @param value - the `tabindex` to lend. `"-1"` (the default) is
+   *   programmatically focusable but not a Tab stop; `"0"` is a real Tab stop,
+   *   which a scroll region with no focusable content of its own needs.
+   */
+  constructor(value = "-1") {
+    this.#value = value;
+  }
+  /** Lends `element` the value; no-ops when it already carries a `tabindex`. */
+  lend(element) {
+    if (element.hasAttribute("tabindex")) return;
+    element.setAttribute("tabindex", this.#value);
+    this.#lent.add(element);
+  }
+  /** Takes back every loan whose value is still the one that was lent. */
+  returnAll() {
+    for (const element of this.#lent) {
+      if (element.getAttribute("tabindex") === this.#value) element.removeAttribute("tabindex");
+    }
+    this.#lent.clear();
+  }
+};
+
 // src/controllers/scroll_area_controller.ts
 var FOCUSABLE_SELECTOR = [
   "a[href]",
@@ -90,10 +117,12 @@ var ScrollAreaController = class extends Controller {
   };
   static events = ["reach"];
   #layout = new LayoutObserver(() => this.#update());
+  /** Re-checks the tab stop when the viewport's focusable content comes or goes. */
+  #content = null;
   /** Last edge reported via `reach`, so the event fires once per arrival. */
   #lastEdge = null;
   /** Whether this controller added `tabindex`, so teardown only removes its own. */
-  #addedTabindex = false;
+  #tabindex = new TabindexLoan("0");
   /** Whether this controller added `role="region"`, for symmetric teardown. */
   #addedRole = false;
   #onScroll = () => {
@@ -104,6 +133,18 @@ var ScrollAreaController = class extends Controller {
     this.viewportTarget.addEventListener("scroll", this.#onScroll, { passive: true });
     this.#layout.observe(this.viewportTarget);
     this.#layout.observeViewport();
+    if (typeof MutationObserver !== "undefined") {
+      this.#content = new MutationObserver(() => {
+        if (!this.hasViewportTarget) return;
+        const vp = this.viewportTarget;
+        this.#syncKeyboardReach(vp, this.#syncOverflow(vp));
+      });
+      this.#content.observe(this.viewportTarget, {
+        subtree: true,
+        childList: true,
+        attributes: true
+      });
+    }
     this.#update();
   }
   disconnect() {
@@ -112,14 +153,15 @@ var ScrollAreaController = class extends Controller {
       this.#clearAddedAttributes(this.viewportTarget);
     }
     this.#layout.disconnect();
+    this.#content?.disconnect();
+    this.#content = null;
     this.#lastEdge = null;
   }
   /** Re-measures overflow and scroll position and reflects the state hooks. */
   #update() {
     if (!this.hasViewportTarget) return;
     const vp = this.viewportTarget;
-    const overflowing = this.#measureOverflow(vp);
-    this.element.setAttribute("data-overflow", overflowing ? "true" : "false");
+    const overflowing = this.#syncOverflow(vp);
     this.#syncKeyboardReach(vp, overflowing);
     const { position, progress } = this.#measurePosition(vp);
     this.element.setAttribute("data-scroll", position);
@@ -133,6 +175,21 @@ var ScrollAreaController = class extends Controller {
     }
   }
   /** Whether the viewport can scroll on the configured axis. */
+  /**
+   * Measures overflow and reflects the `data-overflow` hook.
+   *
+   * The write is skipped when the value is unchanged. An identical `setAttribute` still
+   * queues a MutationRecord, and markup that puts the viewport target on the controller
+   * element itself would then have the content observer trigger its own next callback.
+   */
+  #syncOverflow(vp) {
+    const overflowing = this.#measureOverflow(vp);
+    const next = overflowing ? "true" : "false";
+    if (this.element.getAttribute("data-overflow") !== next) {
+      this.element.setAttribute("data-overflow", next);
+    }
+    return overflowing;
+  }
   #measureOverflow(vp) {
     const o = this.orientationValue;
     const vertical = o !== "horizontal" && vp.scrollHeight > vp.clientHeight + EDGE_EPSILON;
@@ -160,10 +217,7 @@ var ScrollAreaController = class extends Controller {
   #syncKeyboardReach(vp, overflowing) {
     const wantsTabindex = overflowing && !this.#hasFocusableContent(vp);
     if (wantsTabindex) {
-      if (!vp.hasAttribute("tabindex")) {
-        vp.setAttribute("tabindex", "0");
-        this.#addedTabindex = true;
-      }
+      this.#tabindex.lend(vp);
       if (!vp.hasAttribute("role") && this.#hasAccessibleName(vp)) {
         vp.setAttribute("role", "region");
         this.#addedRole = true;
@@ -174,17 +228,37 @@ var ScrollAreaController = class extends Controller {
   }
   /** Removes (and resets the flags for) only the attributes this controller added. */
   #clearAddedAttributes(vp) {
-    if (this.#addedTabindex) {
-      vp.removeAttribute("tabindex");
-      this.#addedTabindex = false;
-    }
+    this.#tabindex.returnAll();
     if (this.#addedRole) {
       vp.removeAttribute("role");
       this.#addedRole = false;
     }
   }
+  /**
+   * Whether the viewport owns something the user can Tab to *right now*.
+   *
+   * The selector alone is not enough: a `display: none` button still matches it,
+   * so a viewport whose only control is revealed on demand would never get a tab
+   * stop — leaving it unreachable by keyboard exactly while it has nothing else to
+   * offer. Only rendered candidates count.
+   */
   #hasFocusableContent(vp) {
-    return vp.querySelector(FOCUSABLE_SELECTOR) !== null;
+    return Array.from(vp.querySelectorAll(FOCUSABLE_SELECTOR)).some(
+      (el) => this.#isRendered(el)
+    );
+  }
+  /**
+   * Whether `el` is actually rendered, and so can hold focus.
+   *
+   * `checkVisibility()` answers this for every way CSS can remove a box, including
+   * a class-driven `display: none` that no attribute reveals. The `hidden` walk in
+   * front of it is not redundant: it is the one case a DOM-only environment with no
+   * layout engine has to be told about explicitly.
+   */
+  #isRendered(el) {
+    if (el.closest("[hidden]") !== null) return false;
+    const check = el.checkVisibility;
+    return typeof check === "function" ? check.call(el, { visibilityProperty: true }) : true;
   }
   #hasAccessibleName(vp) {
     return vp.hasAttribute("aria-label") || vp.hasAttribute("aria-labelledby");

data/dist/controllers/scroll_restore_controller.js

@@ -6,7 +6,7 @@ var ScrollRestoreController = class extends Controller {
     key: { type: String, default: "" },
     axis: { type: String, default: "vertical" }
   };
-  /** Pending rAF id used to coalesce scroll bursts into one save. */
+  /** Pending rAF id that coalesces scroll bursts into one save. */
   #rafId = null;
   /** Resolved storage key; empty disables persistence (no key and no id). */
   #storageKey = "";

data/dist/controllers/scroll_visibility_controller.js

@@ -7,6 +7,33 @@ function prefersReducedMotion() {
   return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
 
+// src/utils/tabindex_loan.ts
+var TabindexLoan = class {
+  #value;
+  #lent = /* @__PURE__ */ new Set();
+  /**
+   * @param value - the `tabindex` to lend. `"-1"` (the default) is
+   *   programmatically focusable but not a Tab stop; `"0"` is a real Tab stop,
+   *   which a scroll region with no focusable content of its own needs.
+   */
+  constructor(value = "-1") {
+    this.#value = value;
+  }
+  /** Lends `element` the value; no-ops when it already carries a `tabindex`. */
+  lend(element) {
+    if (element.hasAttribute("tabindex")) return;
+    element.setAttribute("tabindex", this.#value);
+    this.#lent.add(element);
+  }
+  /** Takes back every loan whose value is still the one that was lent. */
+  returnAll() {
+    for (const element of this.#lent) {
+      if (element.getAttribute("tabindex") === this.#value) element.removeAttribute("tabindex");
+    }
+    this.#lent.clear();
+  }
+};
+
 // src/controllers/scroll_visibility_controller.ts
 var ScrollVisibilityController = class extends Controller {
   static targets = ["element"];
@@ -18,7 +45,7 @@ var ScrollVisibilityController = class extends Controller {
   };
   static actions = ["toTop"];
   static events = ["change"];
-  /** Pending rAF id used to coalesce scroll bursts into one measurement. */
+  /** Pending rAF id that coalesces scroll bursts into one measurement. */
   #rafId = null;
   /** Previous scroll position, for `direction` mode delta detection. */
   #lastScrollY = 0;
@@ -29,6 +56,8 @@ var ScrollVisibilityController = class extends Controller {
    * the window. Captured on connect so teardown detaches from the same source.
    */
   #scrollSource = window;
+  /** Focus targets this instance lent a `tabindex` to. */
+  #tabindex = new TabindexLoan();
   #onScroll = () => {
     if (this.#rafId !== null) return;
     this.#rafId = requestAnimationFrame(() => {
@@ -48,16 +77,17 @@ var ScrollVisibilityController = class extends Controller {
       cancelAnimationFrame(this.#rafId);
       this.#rafId = null;
     }
+    this.#tabindex.returnAll();
     this.#visible = null;
   }
   /** Scrolls the source to the top and, optionally, moves focus to a safe target. */
   toTop() {
-    const behavior = prefersReducedMotion() ? "auto" : "smooth";
+    const behavior = prefersReducedMotion() ? "instant" : "smooth";
     this.#scrollSource.scrollTo({ top: 0, behavior });
     if (this.focusSelectorValue) {
       const target = document.querySelector(this.focusSelectorValue);
       if (target) {
-        if (!target.hasAttribute("tabindex")) target.setAttribute("tabindex", "-1");
+        this.#tabindex.lend(target);
         target.focus();
       }
     }