stimeo-ui 0.2.1 → 0.3.0

data/dist/controllers/sortable_controller.js

@@ -1,5 +1,12 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/sortable_controller.ts
+
+// src/utils/logical_scroll.ts
+function isRtl(element) {
+  return window.getComputedStyle(element).direction === "rtl";
+}
+
 // src/controllers/sortable_controller.ts
 var SortableController = class extends Controller {
   static targets = ["list", "item", "status"];
@@ -67,6 +74,12 @@ var SortableController = class extends Controller {
    * Keyboard stepping: `pointer-drag` reports *cumulative* synthetic deltas, so
    * the difference from the last consumed value is one arrow press — its sign is
    * the direction. Cross-axis arrows never change the primary delta (no move).
+   *
+   * The sign is physical (`ArrowRight` is always `+dx`), so a right-to-left row
+   * has to invert it: there, moving the item rightward means moving it *earlier*
+   * in the DOM. Skipping this would also split the two halves of one keypress —
+   * `roving` already moves focus logically, so the same arrow would send the
+   * focus and the grabbed item opposite ways.
    */
   #stepFromKeyboard(session, detail) {
     const primary = Number(this.#isVertical ? detail.dy : detail.dx) || 0;
@@ -75,7 +88,8 @@ var SortableController = class extends Controller {
     if (delta === 0) return;
     const items = this.#items();
     const index = items.indexOf(session.item);
-    const next = Math.max(0, Math.min(index + (delta > 0 ? 1 : -1), items.length - 1));
+    const step = (delta > 0 ? 1 : -1) * (this.#isReversed ? -1 : 1);
+    const next = Math.max(0, Math.min(index + step, items.length - 1));
     if (next === index) return;
     this.#moveTo(session.item, next);
     this.#announce("moved", session.item);
@@ -91,11 +105,13 @@ var SortableController = class extends Controller {
     if (others.length === 0) return;
     let laidOut = false;
     let target = 0;
+    const reversed = this.#isReversed;
     for (const other of others) {
       const rect = other.getBoundingClientRect();
       if (rect.width > 0 || rect.height > 0) laidOut = true;
       const midpoint = this.#isVertical ? rect.top + rect.height / 2 : rect.left + rect.width / 2;
-      if (pointer > midpoint) target += 1;
+      const precedes = reversed ? pointer < midpoint : pointer > midpoint;
+      if (precedes) target += 1;
     }
     if (!laidOut) return;
     const current = this.#items().indexOf(session.item);
@@ -118,7 +134,7 @@ var SortableController = class extends Controller {
    * Mirrors a step into the `status` live region. Copy is localizable through
    * `data-grabbed` / `data-moved` / `data-dropped` / `data-canceled` templates on
    * the status element (`%{name}` / `%{position}` / `%{total}` placeholders);
-   * terse English is the fallback (the library's shared status-channel design).
+   * terse English is the fallback.
    */
   #announce(key, item) {
     if (!this.hasStatusTarget) return;
@@ -160,6 +176,21 @@ var SortableController = class extends Controller {
   get #isVertical() {
     return this.orientationValue !== "horizontal";
   }
+  /**
+   * Whether DOM order runs opposite to the primary coordinate — true only for a
+   * horizontal row under `dir="rtl"`, where the first item sits at the largest
+   * `x`. Both drag paths reach this controller in physical terms (`pointer-drag`
+   * documents its deltas as physical and hands RTL to its consumer, which is
+   * this controller), so both have to be mapped back onto DOM order here.
+   *
+   * Read from the list, the element that lays the items out — never from the
+   * dragged item, which may carry its own `dir`. The list inherits the computed
+   * direction, so authoring `dir` on the root works too. A vertical list is
+   * unaffected: writing direction does not mirror the block axis.
+   */
+  get #isReversed() {
+    return !this.#isVertical && isRtl(this.#list);
+  }
 };
 
 export { SortableController };

data/dist/controllers/spinner_controller.js

@@ -69,7 +69,7 @@ var SpinnerController = class extends Controller {
   #delayTimerId = null;
   /** Pending min-duration hide timer id, or `null` when none is scheduled. */
   #hideTimerId = null;
-  /** Epoch ms when the spinner became visible, used to enforce `minDuration`. */
+  /** Epoch ms when the spinner became visible; `minDuration` is measured from it. */
   #shownAt = 0;
   connect() {
     if (!this.element.hasAttribute("data-state")) {

data/dist/controllers/stick_to_bottom_controller.js

@@ -93,8 +93,9 @@ var StickToBottomController = class extends Controller {
   #watched() {
     return this.hasContentTarget ? this.contentTarget : this.element;
   }
+  /** Forces reduced-motion jumps while preserving the configured normal behavior. */
   #behavior() {
-    if (prefersReducedMotion()) return "auto";
+    if (prefersReducedMotion()) return "instant";
     return this.behaviorValue === "smooth" ? "smooth" : "auto";
   }
 };

data/dist/controllers/sticky_observer_controller.js

@@ -13,6 +13,7 @@ var IntersectionWatcher = class {
   #onEntries;
   #observer = null;
   #active = false;
+  #usingPlatformDefaults = false;
   constructor(onEntries) {
     this.#onEntries = onEntries;
   }
@@ -20,15 +21,22 @@ var IntersectionWatcher = class {
   get active() {
     return this.#active;
   }
+  /** Whether the live observer discarded configured options after construction failed. */
+  get usingPlatformDefaults() {
+    return this.#usingPlatformDefaults;
+  }
   /**
    * (Re)creates the observer and observes `targets`. Returns `false` — leaving
    * the watcher inert — without `IntersectionObserver` support (very old
    * browsers; the caller's no-JS fallback stays in charge) or with no targets.
+   * If initial construction with the configured options fails, the watcher
+   * warns and retries once with the same root and platform defaults.
    *
-   * @throws Whatever the platform throws for an invalid `rootMargin`/`threshold`
-   *   or a failing `observe()`. The exception is passed through unchanged, but
-   *   the watcher rolls back first: every target observed so far is released and
-   *   `active` stays `false`, so a caller that retries starts from a clean slate.
+   * @throws The fallback constructor error if both construction attempts fail,
+   *   or whatever the platform throws from `observe()`. The exception is passed
+   *   through unchanged, but the watcher rolls back first: every target observed
+   *   so far is released and `active` stays `false`, so a caller that retries
+   *   starts from a clean slate.
    */
   start(targets, options = {}) {
     this.stop();
@@ -38,12 +46,23 @@ var IntersectionWatcher = class {
     const root = "root" in options ? options.root ?? null : options.rootSelector ? document.querySelector(options.rootSelector) : null;
     let observer = null;
     try {
-      observer = new IntersectionObserver(
-        (entries) => {
-          if (this.#active && this.#observer === observer) this.#onEntries(entries);
-        },
-        { root, rootMargin: options.rootMargin, threshold: options.threshold }
-      );
+      const onEntries = (entries) => {
+        if (this.#active && this.#observer === observer) this.#onEntries(entries);
+      };
+      try {
+        observer = new IntersectionObserver(onEntries, {
+          root,
+          rootMargin: options.rootMargin,
+          threshold: options.threshold
+        });
+      } catch (error) {
+        console.warn(
+          "Stimeo UI: IntersectionObserver could not be constructed with the configured options; retrying with platform defaults.",
+          error
+        );
+        observer = new IntersectionObserver(onEntries, { root });
+        this.#usingPlatformDefaults = true;
+      }
       for (const target of list) observer.observe(target);
       this.#observer = observer;
       this.#active = true;
@@ -52,6 +71,7 @@ var IntersectionWatcher = class {
       observer?.disconnect();
       this.#observer = null;
       this.#active = false;
+      this.#usingPlatformDefaults = false;
       throw error;
     }
   }
@@ -78,6 +98,7 @@ var IntersectionWatcher = class {
     this.#active = false;
     this.#observer?.disconnect();
     this.#observer = null;
+    this.#usingPlatformDefaults = false;
   }
 };
 
@@ -93,7 +114,7 @@ var StickyObserverController = class extends Controller {
   #watcher = new IntersectionWatcher((entries) => this.#onIntersect(entries));
   /** Last reported stuck state, so `change` fires only on transitions. */
   #stuck = null;
-  /** Target currently owned by the watcher, used to avoid duplicate restarts. */
+  /** Target currently owned by the watcher; comparing it avoids duplicate restarts. */
   #observedSentinel = null;
   #connected = false;
   #onIntersect(entries) {

data/dist/controllers/switch_controller.js

@@ -27,6 +27,7 @@ var SwitchController = class extends Controller {
    * which would otherwise toggle the switch twice.
    */
   onKeydown(event) {
+    if (event.defaultPrevented) return;
     if (this.element instanceof HTMLButtonElement) return;
     if (event.repeat) return;
     if (event.key === " " || event.key === "Enter") {

data/dist/controllers/tabs_controller.js

@@ -1,10 +1,30 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/tabs_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/controllers/tabs_controller.ts
 var TabsController = class extends Controller {
   static targets = ["tab", "panel", "list"];
   static actions = ["onKeydown", "select"];
-  /** Selects the initially active tab (the pre-selected one, else the first). */
+  /**
+   * Selects the initially active tab: the pre-selected one, else the first.
+   *
+   * `findIndex` makes this first-wins when the author marked several — the first
+   * in DOM order is the only deterministic reading of "which one did they mean" —
+   * and `#selectIndex` then writes an explicit value onto every tab, so a
+   * forgotten `aria-selected` cannot leave a tab looking unselectable.
+   */
   connect() {
     const preselected = this.tabTargets.findIndex(
       (tab) => tab.getAttribute("aria-selected") === "true"
@@ -18,16 +38,19 @@ var TabsController = class extends Controller {
   }
   /** Implements arrow/Home/End navigation with automatic activation. */
   onKeydown(event) {
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
     const tabs = this.tabTargets;
     const currentIndex = tabs.indexOf(event.currentTarget);
     if (currentIndex === -1) return;
     let nextIndex = null;
+    const step = isRtl(this.element) ? -1 : 1;
     switch (event.key) {
       case "ArrowRight":
-        nextIndex = (currentIndex + 1) % tabs.length;
+        nextIndex = (currentIndex + step + tabs.length) % tabs.length;
         break;
       case "ArrowLeft":
-        nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+        nextIndex = (currentIndex - step + tabs.length) % tabs.length;
         break;
       case "Home":
         nextIndex = 0;

data/dist/controllers/tags_input_controller.js

@@ -2,6 +2,22 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/tags_input_controller.ts
 
+// src/utils/logical_scroll.ts
+function isRtl(element) {
+  return window.getComputedStyle(element).direction === "rtl";
+}
+
+// src/utils/arrow_step.ts
+function logicalArrowKey(key, element) {
+  if (key !== "ArrowRight" && key !== "ArrowLeft") return key;
+  if (!isRtl(element)) return key;
+  return key === "ArrowRight" ? "ArrowLeft" : "ArrowRight";
+}
+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/composition_tracker.ts
 var CompositionTracker = class {
   #observedTargets = /* @__PURE__ */ new Set();
@@ -119,6 +135,8 @@ var TagsInputController = class extends Controller {
   }
   /** Commits on `Enter`/delimiter and deletes the last tag on empty `Backspace`. */
   onKeydown(event) {
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
     if (this.#composition.isComposing(event)) return;
     if (event.key === "Enter" || event.key === this.delimiterValue) {
       event.preventDefault();
@@ -133,7 +151,7 @@ var TagsInputController = class extends Controller {
       }
       return;
     }
-    if (event.key === "ArrowLeft" && this.inputTarget.value === "") {
+    if (logicalArrowKey(event.key, this.element) === "ArrowLeft" && this.inputTarget.value === "") {
       const buttons = this.#removeButtons;
       if (buttons.length > 0) {
         event.preventDefault();
@@ -206,12 +224,14 @@ var TagsInputController = class extends Controller {
   }
   /** Handles arrow navigation and deletion within the chip list (delegated). */
   #onTagKeydown = (event) => {
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
     const button = event.target.closest("button");
     if (!button) return;
     const buttons = this.#removeButtons;
     const index = buttons.indexOf(button);
     if (index === -1) return;
-    switch (event.key) {
+    switch (logicalArrowKey(event.key, this.element)) {
       case "ArrowLeft":
         if (index > 0) {
           event.preventDefault();

data/dist/controllers/theme_controller.js

@@ -2,6 +2,24 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/theme_controller.ts
 
+// src/utils/logical_scroll.ts
+function isRtl(element) {
+  return window.getComputedStyle(element).direction === "rtl";
+}
+
+// src/utils/arrow_step.ts
+function logicalArrowStep(key, element) {
+  if (key === "ArrowDown") return 1;
+  if (key === "ArrowUp") return -1;
+  if (key !== "ArrowRight" && key !== "ArrowLeft") return 0;
+  const forward = isRtl(element) ? "ArrowLeft" : "ArrowRight";
+  return key === forward ? 1 : -1;
+}
+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/safe_storage.ts
 function readLocalStorage(key) {
   try {
@@ -41,6 +59,8 @@ var ThemeController = class extends Controller {
   };
   /** Arrow/Home/End navigation for the radiogroup (APG radio pattern). */
   #onKeydown = (event) => {
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
     const options = this.optionTargets;
     if (options.length === 0) return;
     const target = event.target;
@@ -48,14 +68,13 @@ var ThemeController = class extends Controller {
     if (current === -1) return;
     const last = options.length - 1;
     let next = current;
+    const step = logicalArrowStep(event.key, this.element);
     switch (event.key) {
       case "ArrowDown":
       case "ArrowRight":
-        next = current === last ? 0 : current + 1;
-        break;
       case "ArrowUp":
       case "ArrowLeft":
-        next = current === 0 ? last : current - 1;
+        next = step === 1 ? current === last ? 0 : current + 1 : current === 0 ? last : current - 1;
         break;
       case "Home":
         next = 0;

data/dist/controllers/time_picker_controller.js

@@ -1,5 +1,23 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/time_picker_controller.ts
+
+// src/utils/logical_scroll.ts
+function isRtl(element) {
+  return window.getComputedStyle(element).direction === "rtl";
+}
+
+// src/utils/arrow_step.ts
+function logicalArrowKey(key, element) {
+  if (key !== "ArrowRight" && key !== "ArrowLeft") return key;
+  if (!isRtl(element)) return key;
+  return key === "ArrowRight" ? "ArrowLeft" : "ArrowRight";
+}
+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/controllers/time_picker_controller.ts
 var AM = 0;
 var PM = 1;
@@ -34,12 +52,13 @@ var TimePickerController = class extends Controller {
   }
   /** Handles stepping, inter-segment focus moves, jumps, and direct entry. */
   onKeydown(event) {
+    if (isReservedArrowChord(event)) return;
     const segment = event.target?.closest(
       "[data-stimeo--time-picker-target='segment']"
     );
     const kind = segment ? this.#kindOf(segment) : null;
     if (!segment || !kind) return;
-    switch (event.key) {
+    switch (logicalArrowKey(event.key, this.element)) {
       case "ArrowUp":
         event.preventDefault();
         this.#step(kind, this.#delta(kind));

data/dist/controllers/toast_controller.js

@@ -348,11 +348,10 @@ var ToastController = class extends Controller {
   /**
    * Removes the oldest toasts when the list exceeds `maxValue`.
    *
-   * Public (not `#private`) as a deterministic test seam: enforcement normally
-   * runs from `itemTargetConnected`, a Stimulus callback that fires via a
-   * MutationObserver — which happy-dom does not reliably deliver — so the unit
-   * tests invoke it directly. It is therefore listed in the contract guard's
-   * NON_ACTION_ALLOWLIST (it is not a user-wired action).
+   * Public (not `#private`) as a deterministic seam: enforcement normally runs
+   * from `itemTargetConnected`, a Stimulus callback delivered through a
+   * MutationObserver, which a DOM-only environment does not reliably fire — so
+   * it can also be invoked directly. It is not a user-wired action.
    */
   enforceMaxLimit() {
     const currentItems = this.itemTargets;

data/dist/controllers/toggle_group_controller.js

@@ -2,6 +2,17 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/toggle_group_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. */
@@ -60,17 +71,27 @@ var ToggleGroupController = class extends Controller {
   }
   /** Arrow/Home/End move focus only; Space/Enter toggle non-button hosts. */
   onKeydown(event) {
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
     const current = this.itemTargets.indexOf(event.currentTarget);
     if (current === -1) return;
     let next = null;
+    const rtl = isRtl(this.element);
+    const horizontalStep = (key) => rtl ? key === "ArrowRight" ? -1 : 1 : key === "ArrowRight" ? 1 : -1;
     switch (event.key) {
       case "ArrowRight":
       case "ArrowDown":
-        next = rovingMove(current, this.itemTargets.length, 1);
+        next = rovingMove(
+          current,
+          this.itemTargets.length,
+          event.key === "ArrowDown" ? 1 : horizontalStep(event.key));
         break;
       case "ArrowLeft":
       case "ArrowUp":
-        next = rovingMove(current, this.itemTargets.length, -1);
+        next = rovingMove(
+          current,
+          this.itemTargets.length,
+          event.key === "ArrowUp" ? -1 : horizontalStep(event.key));
         break;
       case "Home":
         next = 0;