stimeo-ui 0.2.1 → 0.3.0

data/dist/controllers/carousel_controller.js

@@ -2,6 +2,24 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/carousel_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/roving_tabindex.ts
 var RovingTabindex = class {
   /** Returns the current ordered item elements; called on every operation. */
@@ -104,6 +122,8 @@ var CarouselController = class extends Controller {
   ];
   static events = ["change", "pause", "play"];
   #roving = new RovingTabindex(() => this.pickerTargets);
+  /** Gates the target callback so it does not repaint once per authored picker on mount. */
+  #connected = false;
   #intervals = new SafeInterval();
   /** Index of the visible slide. */
   #index = 0;
@@ -113,7 +133,12 @@ var CarouselController = class extends Controller {
   #pointerPaused = false;
   /** Id of the live autoplay interval, or null when stopped. */
   #timerId = null;
-  /** Renders the initial slide and starts autoplay when requested. */
+  /**
+   * Renders the initial slide and starts autoplay when requested.
+   *
+   * `findIndex` makes the authored pre-selection first-wins when several pickers
+   * are marked; `#render` then writes an explicit value onto every picker.
+   */
   connect() {
     const preselected = this.pickerTargets.findIndex(
       (picker) => picker.getAttribute("aria-selected") === "true"
@@ -122,6 +147,20 @@ var CarouselController = class extends Controller {
     this.#playing = this.#initialPlaying();
     this.#render({ focus: false });
     this.#syncTimer();
+    this.#connected = true;
+  }
+  /**
+   * Re-establishes the single selected picker when one is added after connect.
+   *
+   * Without this an appended picker that arrives `aria-selected="true"` leaves two
+   * marked at once — the authored pre-selection is only read on connect, so
+   * nothing else ever resolves the conflict. The current slide is kept: the
+   * repaint re-derives every picker from `#index`, so a late arrival never steals
+   * the selection.
+   */
+  pickerTargetConnected() {
+    if (!this.#connected) return;
+    this.#render({ focus: false });
   }
   /**
    * Resolves the starting autoplay intent. The play toggle's `aria-pressed` is the
@@ -138,6 +177,7 @@ var CarouselController = class extends Controller {
   }
   /** Clears the autoplay interval so it never fires after teardown. */
   disconnect() {
+    this.#connected = false;
     this.#intervals.clearAll();
     this.#timerId = null;
   }
@@ -185,20 +225,21 @@ var CarouselController = class extends Controller {
   }
   /** Picker roving: arrows move focus only; Home/End activate first/last slide. */
   onPickerKeydown(event) {
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
     const current = this.pickerTargets.indexOf(event.currentTarget);
     if (current === -1) return;
     const length = this.pickerTargets.length;
     switch (event.key) {
       case "ArrowRight":
       case "ArrowDown":
-        event.preventDefault();
-        this.#roving.setActive(rovingMove(current, length, 1), { focus: true });
-        return;
       case "ArrowLeft":
-      case "ArrowUp":
+      case "ArrowUp": {
         event.preventDefault();
-        this.#roving.setActive(rovingMove(current, length, -1), { focus: true });
+        const step = logicalArrowStep(event.key, this.element);
+        this.#roving.setActive(rovingMove(current, length, step), { focus: true });
         return;
+      }
       case "Home":
         event.preventDefault();
         this.#select(0, { focus: true });

data/dist/controllers/collapsible_controller.js

@@ -276,8 +276,8 @@ var CollapsibleController = class extends Controller {
   }
   /**
    * Drives the disclosure to `open`, syncing the trigger's `aria-expanded` and
-   * the content's `hidden` / `data-state` / height variable in the order the
-   * spec requires.
+   * the content's `hidden` / `data-state` / height variable in an order where
+   * `hidden` never blocks measurement or the transition.
    *
    * @param open - Target state.
    * @param waitForCloseTransition - When `false` (initial `connect`) the close

data/dist/controllers/color_picker_controller.js

@@ -1,5 +1,30 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/color_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/utils/coerce.ts
+function toFiniteNumber(raw) {
+  if (raw === null || raw === void 0 || raw === "") return null;
+  const value = typeof raw === "number" ? raw : Number(raw);
+  return Number.isFinite(value) ? value : null;
+}
+
 // src/controllers/color_picker_controller.ts
 var COLOR_PROPERTY = "--stimeo-color";
 var CHANNEL_RANGE = {
@@ -12,10 +37,15 @@ var ColorPickerController = class extends Controller {
   static targets = ["slider", "hex", "preview", "field"];
   static values = {
     value: { type: String, default: "#000000" },
-    alpha: { type: Boolean, default: false }
+    alpha: { type: Boolean, default: false },
+    logicalTrack: { type: Boolean, default: false }
   };
   static actions = ["onHexInput", "onKeydown", "onPointerDown"];
   static events = ["change"];
+  /** Whether the consumer declared a mirroring track and the direction mirrors it. */
+  get #mirrored() {
+    return this.logicalTrackValue && isRtl(this.element);
+  }
   /** The current color in the editing model. */
   #color = { hue: 0, saturation: 0, lightness: 0, alpha: 100 };
   /** Aborts in-progress pointer-drag listeners on drag end / teardown. */
@@ -33,13 +63,14 @@ var ColorPickerController = class extends Controller {
   }
   /** Keyboard stepping on the focused channel slider (APG Slider model). */
   onKeydown(event) {
+    if (isReservedArrowChord(event)) return;
     const slider = event.currentTarget;
     const channel = this.#channelOf(slider);
     if (!channel) return;
     const [min, max] = this.#rangeOf(slider, channel);
     const value = this.#color[channel];
     let next = null;
-    switch (event.key) {
+    switch (this.#mirrored ? logicalArrowKey(event.key, this.element) : event.key) {
       case "ArrowRight":
       case "ArrowUp":
         next = value + 1;
@@ -74,10 +105,12 @@ var ColorPickerController = class extends Controller {
     event.preventDefault();
     slider.focus();
     const [min, max] = this.#rangeOf(slider, channel);
+    const mirrored = this.#mirrored;
     const update = (clientX) => {
       const rect = slider.getBoundingClientRect();
       if (rect.width === 0) return;
-      const fraction = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+      const offset = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+      const fraction = mirrored ? 1 - offset : offset;
       this.#setChannel(channel, min + fraction * (max - min), min, max);
     };
     update(event.clientX);
@@ -140,12 +173,18 @@ var ColorPickerController = class extends Controller {
     const channel = slider.getAttribute("data-channel");
     return channel && channel in CHANNEL_RANGE ? channel : null;
   }
-  /** A slider's `[min, max]` from aria-valuemin/max, falling back per channel. */
+  /**
+   * A slider's `[min, max]` from aria-valuemin/max, falling back per channel.
+   * An absent or blank attribute means "not authored", not zero — coercing it to
+   * a number would pin the channel at `0` and make the per-channel default
+   * unreachable.
+   */
   #rangeOf(slider, channel) {
     const [defMin, defMax] = CHANNEL_RANGE[channel];
-    const min = Number(slider.getAttribute("aria-valuemin"));
-    const max = Number(slider.getAttribute("aria-valuemax"));
-    return [Number.isFinite(min) ? min : defMin, Number.isFinite(max) ? max : defMax];
+    return [
+      toFiniteNumber(slider.getAttribute("aria-valuemin")) ?? defMin,
+      toFiniteNumber(slider.getAttribute("aria-valuemax")) ?? defMax
+    ];
   }
 };
 function valueText(channel, value) {

data/dist/controllers/combobox_controller.js

@@ -2,6 +2,24 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/combobox_controller.ts
 
+// src/utils/active_option.ts
+function syncActiveOption(options, active) {
+  let written = 0;
+  for (const option of options) {
+    const next = option === active ? "true" : "false";
+    if (option.getAttribute("aria-selected") === next) continue;
+    option.setAttribute("aria-selected", next);
+    written += 1;
+  }
+  return written;
+}
+
+// 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/composition_tracker.ts
 var CompositionTracker = class {
   #observedTargets = /* @__PURE__ */ new Set();
@@ -49,6 +67,39 @@ var CompositionTracker = class {
   };
 };
 
+// src/utils/microtask_coalescer.ts
+var MicrotaskCoalescer = class {
+  #run;
+  #queued = false;
+  #active = false;
+  #generation = 0;
+  /** @param run - the single reconciliation pass, invoked at most once per batch. */
+  constructor(run) {
+    this.#run = run;
+  }
+  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */
+  activate() {
+    this.#active = true;
+  }
+  /** Closes the window and drops any pending pass; call from `disconnect()`. */
+  cancel() {
+    this.#active = false;
+    this.#queued = false;
+    this.#generation += 1;
+  }
+  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */
+  schedule() {
+    if (!this.#active || this.#queued) return;
+    this.#queued = true;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
 // src/utils/option_scroll.ts
 function scrollOptionIntoView(list, option) {
   if (list.scrollHeight <= list.clientHeight) return;
@@ -66,8 +117,11 @@ var ComboboxController = class extends Controller {
   static targets = ["input", "list", "option"];
   static actions = ["close", "filter", "onKeydown", "open", "selectByClick"];
   static events = ["selected"];
-  /** Index into the *visible* options of the active option, or -1 if none. */
-  #activeIndex = -1;
+  /** Stable ID of the active option; the live element is resolved before every use. */
+  #activeId = null;
+  #connected = false;
+  /** Collapses one mutation batch of target callbacks into a single pass. */
+  #reconcile = new MicrotaskCoalescer(() => this.#reconcileOptions());
   /**
    * Suppresses {@link open} for the duration of the programmatic re-focus in
    * `#select`, so committing a value (which returns focus to the input)
@@ -80,21 +134,36 @@ var ComboboxController = class extends Controller {
   connect() {
     if (this.hasInputTarget) this.#composition.observe(this.inputTarget);
     this.close();
-    document.addEventListener("click", this.#onOutsideClick);
+    document.addEventListener("click", this.#onOutsideClick, true);
+    this.#connected = true;
+    this.#reconcile.activate();
   }
   /** Removes the document-level listener registered in {@link connect}. */
   disconnect() {
+    this.#connected = false;
+    this.#reconcile.cancel();
     this.#composition.disconnect();
-    document.removeEventListener("click", this.#onOutsideClick);
+    document.removeEventListener("click", this.#onOutsideClick, true);
   }
   /** Tracks an input added initially or after connect. */
   inputTargetConnected(input) {
     this.#composition.observe(input);
+    if (this.#connected) this.#queueOptionReconciliation();
   }
   /** Removes composition listeners when the active input is replaced or removed. */
   inputTargetDisconnected(input) {
     this.#composition.unobserve(input);
   }
+  /** Establishes the active-state baseline, then reconciles a runtime addition. */
+  optionTargetConnected(option) {
+    option.setAttribute("aria-selected", "false");
+    if (this.#connected) this.#queueOptionReconciliation();
+  }
+  /** Clears the disconnected node's active state, then reconciles the survivors. */
+  optionTargetDisconnected(option) {
+    option.setAttribute("aria-selected", "false");
+    if (this.#connected) this.#queueOptionReconciliation();
+  }
   /** Filters confirmed input text and opens the listbox. */
   filter(event) {
     if (this.#composition.isComposing(event)) return;
@@ -106,7 +175,7 @@ var ComboboxController = class extends Controller {
    * re-opening with a stale non-matching value still surfaces the empty state).
    */
   open() {
-    if (!this.hasListTarget || this.#suppressOpen) return;
+    if (!this.hasListTarget || !this.hasInputTarget || this.#suppressOpen) return;
     this.#applyFilter();
     this.listTarget.hidden = false;
     this.inputTarget.setAttribute("aria-expanded", "true");
@@ -124,24 +193,47 @@ var ComboboxController = class extends Controller {
       option.hidden = query.length > 0 && !text.includes(query);
     }
   }
-  /** Closes the listbox, clears the active option, and updates ARIA state. */
+  /**
+   * Closes the listbox, clears the active option, and updates ARIA state.
+   *
+   * Survives a missing input in both directions. {@link inputTargetConnected}
+   * accepts an input added after connect, so dereferencing it here would abort
+   * `connect()` before it registers the outside-click listener, and nothing
+   * re-registers it later. Symmetrically, an input removed while the popup is
+   * open must still let the popup come down — so hiding the list is
+   * unconditional and only the ARIA half is guarded.
+   */
   close() {
     if (!this.hasListTarget) return;
     this.listTarget.hidden = true;
-    this.inputTarget.setAttribute("aria-expanded", "false");
-    this.#setActive(-1);
     this.element.removeAttribute("data-stimeo--combobox-empty");
+    if (this.hasInputTarget) this.inputTarget.setAttribute("aria-expanded", "false");
+    this.#setActive(-1);
   }
   /** Routes keyboard interaction per the APG combobox model. */
   onKeydown(event) {
     if (this.#composition.isComposing(event)) return;
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event, ["alt"])) return;
+    if (event.altKey && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+      if (event.key === "ArrowDown" ? !this.#isClosed : this.#isClosed) return;
+      event.preventDefault();
+      if (event.key === "ArrowDown") {
+        this.open();
+      } else {
+        this.close();
+      }
+      return;
+    }
+    if (!this.#isClosed) this.#reconcileActive();
     switch (event.key) {
       case "ArrowDown": {
         event.preventDefault();
         if (this.#isClosed) this.open();
         const visible = this.#visibleOptions();
         if (visible.length > 0) {
-          const next = this.#activeIndex === -1 ? 0 : (this.#activeIndex + 1) % visible.length;
+          const activeIndex = this.#findActiveIndex(visible);
+          const next = activeIndex === -1 ? 0 : (activeIndex + 1) % visible.length;
           this.#setActive(next);
         }
         break;
@@ -151,7 +243,8 @@ var ComboboxController = class extends Controller {
         if (this.#isClosed) this.open();
         const visible = this.#visibleOptions();
         if (visible.length > 0) {
-          const next = this.#activeIndex === -1 ? visible.length - 1 : (this.#activeIndex - 1 + visible.length) % visible.length;
+          const activeIndex = this.#findActiveIndex(visible);
+          const next = activeIndex === -1 ? visible.length - 1 : (activeIndex - 1 + visible.length) % visible.length;
           this.#setActive(next);
         }
         break;
@@ -172,7 +265,8 @@ var ComboboxController = class extends Controller {
       }
       case "Enter": {
         const visible = this.#visibleOptions();
-        const active = this.#activeIndex === -1 ? void 0 : visible[this.#activeIndex];
+        const activeIndex = this.#findActiveIndex(visible);
+        const active = activeIndex === -1 ? void 0 : visible[activeIndex];
         if (active) {
           event.preventDefault();
           this.#select(active);
@@ -180,7 +274,7 @@ var ComboboxController = class extends Controller {
         break;
       }
       case "Escape":
-        if (event.defaultPrevented || this.#isClosed) break;
+        if (this.#isClosed) break;
         event.preventDefault();
         this.close();
         break;
@@ -200,11 +294,24 @@ var ComboboxController = class extends Controller {
   /** Selects the clicked option. Bound via `data-action` (click). */
   selectByClick(event) {
     const option = event.currentTarget.closest('[role="option"]');
-    if (option) this.#select(option);
+    if (option && this.optionTargets.includes(option)) this.#select(option);
   }
-  /** Commits an option: fills the input, closes the listbox, notifies listeners. */
+  /**
+   * Commits an option: fills the input, closes the listbox, notifies listeners.
+   *
+   * An input removed while the popup is open leaves the options clickable, and
+   * {@link close} already survives that state. Selection does too: the popup
+   * comes down and listeners still hear the choice, with only the field-bound
+   * half — the value write, the focus return, and the native `change` — skipped,
+   * because there is no field to carry them.
+   */
   #select(option) {
     const value = option.dataset.value ?? (option.textContent ?? "").trim();
+    if (!this.hasInputTarget) {
+      this.close();
+      this.dispatch("selected", { detail: { value } });
+      return;
+    }
     const changed = this.inputTarget.value !== value;
     this.inputTarget.value = value;
     this.close();
@@ -235,19 +342,51 @@ var ComboboxController = class extends Controller {
    * input's `aria-activedescendant`. Pass `-1` to clear the active option.
    */
   #setActive(index) {
-    this.#activeIndex = index;
     const visible = this.#visibleOptions();
-    const active = index === -1 ? null : visible[index];
-    for (const option of this.optionTargets) {
-      option.setAttribute("aria-selected", option === active ? "true" : "false");
-    }
-    if (active?.id) {
-      this.inputTarget.setAttribute("aria-activedescendant", active.id);
-    } else {
-      this.inputTarget.removeAttribute("aria-activedescendant");
+    const active = index === -1 ? null : visible[index] ?? null;
+    syncActiveOption(this.optionTargets, active);
+    this.#activeId = active?.id || null;
+    if (this.hasInputTarget) {
+      if (active?.id) {
+        this.inputTarget.setAttribute("aria-activedescendant", active.id);
+      } else {
+        this.inputTarget.removeAttribute("aria-activedescendant");
+      }
     }
     if (active && this.hasListTarget) scrollOptionIntoView(this.listTarget, active);
   }
+  /** Re-applies filtering and active state after a target collection change. */
+  #reconcileOptions() {
+    if (this.hasInputTarget && !this.#isClosed) this.#applyFilter();
+    this.#reconcileActive();
+    this.#reflectEmptyState();
+  }
+  /** Preserves a surviving active ID; disappearance deliberately clears active state. */
+  #reconcileActive() {
+    if (!this.hasInputTarget || this.#isClosed) {
+      this.#setActive(-1);
+      return;
+    }
+    const visible = this.#visibleOptions();
+    const index = this.#findActiveIndex(visible);
+    const active = index === -1 ? null : visible[index] ?? null;
+    const selected = this.optionTargets.filter(
+      (option) => option.getAttribute("aria-selected") === "true"
+    );
+    const idref = this.inputTarget.getAttribute("aria-activedescendant");
+    const stateMatches = active ? this.#activeId === (active.id || null) && selected.length === 1 && selected[0] === active && idref === (active.id || null) : this.#activeId === null && selected.length === 0 && idref === null;
+    if (!stateMatches) this.#setActive(index);
+  }
+  /** Resolves the stable ID, with `aria-selected` as the ID-less compatibility marker. */
+  #findActiveIndex(options) {
+    const activeId = (this.hasInputTarget ? this.inputTarget.getAttribute("aria-activedescendant") : null) ?? this.#activeId;
+    if (activeId) return options.findIndex((option) => option.id === activeId);
+    return options.findIndex((option) => option.getAttribute("aria-selected") === "true");
+  }
+  /** Coalesces all target callbacks from one MutationObserver batch. */
+  #queueOptionReconciliation() {
+    this.#reconcile.schedule();
+  }
   /** The options currently shown (not filtered out). */
   #visibleOptions() {
     return this.optionTargets.filter((option) => !option.hidden);