stimeo-ui 0.2.0 → 0.3.0

data/dist/controllers/skeleton_controller.js

@@ -66,7 +66,7 @@ var SkeletonController = class extends Controller {
   #timers = new SafeTimeout();
   /** Pending min-duration reveal timer id, or `null` when none is scheduled. */
   #revealTimerId = null;
-  /** Epoch ms when the loading state began, used to enforce `minDuration`. */
+  /** Epoch ms when the loading state began; `minDuration` is measured from it. */
   #loadingSince = 0;
   connect() {
     if (this.#state !== "ready") {

data/dist/controllers/slider_controller.js

@@ -1,5 +1,23 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/slider_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/slider_controller.ts
 var FRACTION_PROPERTY = "--stimeo--slider-fraction";
 var SliderController = class extends Controller {
@@ -8,12 +26,17 @@ var SliderController = class extends Controller {
     min: { type: Number, default: 0 },
     max: { type: Number, default: 100 },
     step: { type: Number, default: 1 },
-    value: { type: Number, default: 0 }
+    value: { type: Number, default: 0 },
+    logicalTrack: { type: Boolean, default: false }
   };
   static actions = ["onKeydown", "onPointerDown"];
   static events = ["change"];
   /** Aborts in-progress pointer-drag listeners when the drag ends or on teardown. */
   #dragAbort = null;
+  /** Whether the consumer declared a mirroring track and the direction mirrors it. */
+  get #mirrored() {
+    return this.logicalTrackValue && isRtl(this.element);
+  }
   /** Clamps the initial value and renders the starting position. */
   connect() {
     this.#setValue(this.valueValue, { silent: true });
@@ -25,9 +48,10 @@ var SliderController = class extends Controller {
   }
   /** Handles keyboard stepping per the APG slider model. */
   onKeydown(event) {
+    if (isReservedArrowChord(event)) return;
     const big = this.stepValue * 10;
     let next = null;
-    switch (event.key) {
+    switch (this.#mirrored ? logicalArrowKey(event.key, this.element) : event.key) {
       case "ArrowRight":
       case "ArrowUp":
         next = this.valueValue + this.stepValue;
@@ -58,12 +82,13 @@ var SliderController = class extends Controller {
   onPointerDown(event) {
     if (!this.hasTrackTarget) return;
     event.preventDefault();
-    this.#updateFromClientX(event.clientX);
+    const mirrored = this.#mirrored;
+    this.#updateFromClientX(event.clientX, mirrored);
     if (this.hasThumbTarget) this.thumbTarget.focus();
     this.#dragAbort?.abort();
     const abort = new AbortController();
     this.#dragAbort = abort;
-    const onMove = (move) => this.#updateFromClientX(move.clientX);
+    const onMove = (move) => this.#updateFromClientX(move.clientX, mirrored);
     const onUp = () => {
       abort.abort();
       this.#dragAbort = null;
@@ -73,10 +98,11 @@ var SliderController = class extends Controller {
     document.addEventListener("pointercancel", onUp, { signal: abort.signal });
   }
   /** Maps a pointer X coordinate to a value using the track's geometry. */
-  #updateFromClientX(clientX) {
+  #updateFromClientX(clientX, mirrored) {
     const rect = this.trackTarget.getBoundingClientRect();
     if (rect.width === 0) return;
-    const fraction = (clientX - rect.left) / rect.width;
+    const offset = (clientX - rect.left) / rect.width;
+    const fraction = mirrored ? 1 - offset : offset;
     this.#setValue(this.minValue + fraction * (this.maxValue - this.minValue));
   }
   /**

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/stepper_controller.js

@@ -9,23 +9,32 @@ var StepperController = class extends Controller {
   };
   static actions = ["goto", "next", "prev"];
   static events = ["change"];
+  #isConnected = false;
   /** Normalizes an out-of-range initial `index` and renders the initial state. */
   connect() {
-    this.indexValue = this.#clampIndex(this.indexValue);
-    this.#render();
+    this.#isConnected = true;
+    this.#normalizeAndRender();
+  }
+  disconnect() {
+    this.#isConnected = false;
+  }
+  /** Re-renders when Turbo Morph or application code changes `index` at runtime. */
+  indexValueChanged() {
+    if (!this.#isConnected) return;
+    this.#normalizeAndRender();
   }
   /** Advances to the next step (ignored at the last step). */
   next() {
-    this.#moveTo(this.indexValue + 1);
+    this.#moveTo(this.#clampIndex(this.indexValue) + 1);
   }
   /** Returns to the previous step (ignored at the first step). */
   prev() {
-    this.#moveTo(this.indexValue - 1);
+    this.#moveTo(this.#clampIndex(this.indexValue) - 1);
   }
   /** Jumps to the step carried in the action's `index` param. */
   goto(event) {
     const target = Number(event.params.index);
-    if (!Number.isFinite(target)) return;
+    if (!Number.isFinite(target) || !Number.isInteger(target)) return;
     this.#moveTo(target);
   }
   /**
@@ -35,16 +44,24 @@ var StepperController = class extends Controller {
    */
   #moveTo(target) {
     const total = this.stepTargets.length;
+    if (!Number.isFinite(target) || !Number.isInteger(target)) return;
     if (target < 0 || target >= total) return;
-    if (target === this.indexValue) return;
-    if (this.linearValue && target > this.indexValue + 1) return;
-    const previous = this.indexValue;
+    const current = this.#clampIndex(this.indexValue);
+    if (target === current) return;
+    if (this.linearValue && target > current + 1) return;
+    const previous = current;
     this.indexValue = target;
-    this.#render();
+    this.#render(target);
     this.dispatch("change", {
       detail: { index: target, previous, step: this.stepTargets[target] }
     });
   }
+  /** Normalizes the public Value and reflects it without dispatching an action event. */
+  #normalizeAndRender() {
+    const normalized = this.#clampIndex(this.indexValue);
+    if (!Object.is(normalized, this.indexValue)) this.indexValue = normalized;
+    this.#render(normalized);
+  }
   /**
    * Derives each step's `data-state` and the current button's `aria-current`.
    *
@@ -52,8 +69,7 @@ var StepperController = class extends Controller {
    * contract assumes one operable button per step. If a step needs multiple
    * buttons, mark the navigational one first (or this would target the wrong one).
    */
-  #render() {
-    const current = this.indexValue;
+  #render(current) {
     this.stepTargets.forEach((step, index) => {
       step.dataset.state = index < current ? "complete" : index === current ? "current" : "upcoming";
       const button = step.querySelector("button");
@@ -68,7 +84,7 @@ var StepperController = class extends Controller {
   /** Constrains an index to `[0, total-1]` (or `0` when there are no steps). */
   #clampIndex(index) {
     const last = this.stepTargets.length - 1;
-    if (last < 0) return 0;
+    if (last < 0 || !Number.isFinite(index)) return 0;
     return Math.min(last, Math.max(0, Math.trunc(index)));
   }
 };

data/dist/controllers/stick_to_bottom_controller.js

@@ -1,5 +1,12 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/stick_to_bottom_controller.ts
+
+// src/utils/reduced_motion.ts
+function prefersReducedMotion() {
+  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
 // src/controllers/stick_to_bottom_controller.ts
 var countElements = (nodes) => {
   let n = 0;
@@ -86,13 +93,11 @@ 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 (this.#prefersReducedMotion()) return "auto";
+    if (prefersReducedMotion()) return "instant";
     return this.behaviorValue === "smooth" ? "smooth" : "auto";
   }
-  #prefersReducedMotion() {
-    return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  }
 };
 
 export { StickToBottomController };

data/dist/controllers/sticky_observer_controller.js

@@ -3,10 +3,17 @@ import { Controller } from '@hotwired/stimulus';
 // src/controllers/sticky_observer_controller.ts
 
 // src/utils/intersection_watcher.ts
+function isBeforeRootStart(entry) {
+  const rect = entry.boundingClientRect;
+  if (rect.width === 0 && rect.height === 0) return false;
+  const rootTop = entry.rootBounds?.top ?? 0;
+  return rect.bottom <= rootTop;
+}
 var IntersectionWatcher = class {
   #onEntries;
   #observer = null;
   #active = false;
+  #usingPlatformDefaults = false;
   constructor(onEntries) {
     this.#onEntries = onEntries;
   }
@@ -14,10 +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 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();
@@ -25,31 +44,61 @@ var IntersectionWatcher = class {
     const list = Array.isArray(targets) ? targets : [targets];
     if (list.length === 0) return false;
     const root = "root" in options ? options.root ?? null : options.rootSelector ? document.querySelector(options.rootSelector) : null;
-    this.#active = true;
-    this.#observer = new IntersectionObserver(
-      (entries) => {
-        if (this.#active) this.#onEntries(entries);
-      },
-      { root, rootMargin: options.rootMargin, threshold: options.threshold }
-    );
-    for (const target of list) this.#observer.observe(target);
-    return true;
+    let observer = null;
+    try {
+      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;
+      return true;
+    } catch (error) {
+      observer?.disconnect();
+      this.#observer = null;
+      this.#active = false;
+      this.#usingPlatformDefaults = false;
+      throw error;
+    }
   }
   /**
    * Re-delivers `target`'s CURRENT intersection state: `IntersectionObserver`
    * only reports *changes*, but `observe()` always reports the present state,
    * so unobserve→observe turns "still intersecting" into a fresh callback.
+   *
+   * @throws Whatever `unobserve()`/`observe()` throws. The watcher is stopped
+   *   first, so it never stays live with a half-rearmed target.
    */
   rearm(target) {
     if (!this.#observer) return;
-    this.#observer.unobserve(target);
-    this.#observer.observe(target);
+    try {
+      this.#observer.unobserve(target);
+      this.#observer.observe(target);
+    } catch (error) {
+      this.stop();
+      throw error;
+    }
   }
   /** Severs the observer; late queued callbacks become no-ops via the guard. */
   stop() {
     this.#active = false;
     this.#observer?.disconnect();
     this.#observer = null;
+    this.#usingPlatformDefaults = false;
   }
 };
 
@@ -65,23 +114,63 @@ 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; comparing it avoids duplicate restarts. */
+  #observedSentinel = null;
+  #connected = false;
   #onIntersect(entries) {
-    const entry = entries[entries.length - 1];
-    if (!entry) return;
-    this.#setStuck(!entry.isIntersecting);
+    for (const entry of entries) {
+      if (!this.#connected || !this.#watcher.active) return;
+      this.#setStuck(!entry.isIntersecting && isBeforeRootStart(entry));
+    }
   }
   connect() {
-    if (!this.hasSentinelTarget) return;
-    this.#watcher.start(this.sentinelTarget, {
-      rootSelector: this.rootSelectorValue,
-      rootMargin: `-${this.offsetValue}px 0px 0px 0px`,
-      threshold: [0]
-    });
+    this.#connected = true;
+    this.#stuck = null;
+    this.#syncObserver();
   }
   disconnect() {
+    this.#connected = false;
     this.#watcher.stop();
+    this.#observedSentinel = null;
     this.#stuck = null;
   }
+  /** Starts observation when a sentinel is inserted after connection. */
+  sentinelTargetConnected() {
+    if (this.#connected) this.#syncObserver();
+  }
+  /** Stops or transfers observation when the current sentinel is removed. */
+  sentinelTargetDisconnected() {
+    if (this.#connected) this.#syncObserver();
+  }
+  /** Reflects the last snapshot onto an element inserted after that snapshot. */
+  elementTargetConnected(element) {
+    if (this.#stuck !== null) {
+      element.setAttribute("data-stuck", this.#stuck ? "true" : "false");
+    }
+  }
+  /** Rebuilds the observer when Turbo morphs the configured root. */
+  rootSelectorValueChanged() {
+    if (this.#connected) this.#syncObserver(true);
+  }
+  /** Rebuilds the observer when Turbo morphs the configured top offset. */
+  offsetValueChanged() {
+    if (this.#connected) this.#syncObserver(true);
+  }
+  #syncObserver(force = false) {
+    const sentinel = this.hasSentinelTarget ? this.sentinelTarget : null;
+    if (!force && sentinel === this.#observedSentinel && this.#watcher.active) return;
+    this.#watcher.stop();
+    this.#observedSentinel = null;
+    if (!sentinel) return;
+    const configuredOffset = this.offsetValue;
+    const offset = Number.isFinite(configuredOffset) ? configuredOffset : 0;
+    const started = this.#watcher.start(sentinel, {
+      rootSelector: this.rootSelectorValue,
+      rootMargin: `${-offset}px 0px 0px 0px`,
+      threshold: [0]
+    });
+    if (started) this.#observedSentinel = sentinel;
+  }
   /** Reflects the stuck state onto the sticky element and emits `change`. */
   #setStuck(next) {
     if (next === this.#stuck) return;

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;