stimeo-ui 0.15.0 → 0.16.0

data/dist/controllers/accordion_controller.js

@@ -8,36 +8,125 @@ function isReservedArrowChord(event, allow = []) {
   return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
 }
 
+// src/utils/state_reason.ts
+var FOCUS_EVENTS = /* @__PURE__ */ new Set(["blur", "focus", "focusin", "focusout"]);
+var POINTER_EVENTS = /* @__PURE__ */ new Set(["mouseenter", "mouseleave", "pointerenter", "pointerleave"]);
+function stateReasonFor(event) {
+  if (!event) return "api";
+  if (FOCUS_EVENTS.has(event.type)) return "focus";
+  if (POINTER_EVENTS.has(event.type)) return "pointer";
+  return "user";
+}
+
+// src/utils/state_regions.ts
+var StateRegions = class {
+  #whenTrue;
+  #whenFalse;
+  #taken = /* @__PURE__ */ new WeakSet();
+  constructor(options) {
+    this.#whenTrue = options.whenTrue;
+    this.#whenFalse = options.whenFalse ?? null;
+  }
+  /** Shows the regions inside `host` that belong to `isTrue` and hides the others. */
+  reflect(host, isTrue) {
+    const shown = this.#inside(host, this.#whenTrue());
+    if (!this.#whenFalse) {
+      for (const region of shown) this.#write(region, !isTrue);
+      return;
+    }
+    const hiddenSide = this.#inside(host, this.#whenFalse());
+    if (shown.length === 0 || hiddenSide.length === 0) {
+      for (const region of shown) this.#give(region);
+      for (const region of hiddenSide) this.#give(region);
+      return;
+    }
+    for (const region of shown) this.#write(region, !isTrue);
+    for (const region of hiddenSide) this.#write(region, isTrue);
+  }
+  /** Writes `hidden` where it moves, noting which regions it takes out of view. */
+  #write(region, hidden) {
+    if (hidden) this.#taken.add(region);
+    else this.#taken.delete(region);
+    if (region.hidden !== hidden) region.hidden = hidden;
+  }
+  /** Returns a region this instance hid; one it never hid keeps what it carries. */
+  #give(region) {
+    if (this.#taken.delete(region)) region.hidden = false;
+  }
+  /** The declared regions that sit within `host`, which may be the host itself. */
+  #inside(host, regions) {
+    return regions.filter((region) => host.contains(region));
+  }
+};
+
 // src/controllers/accordion_controller.ts
 var AccordionController = class extends Controller {
-  static targets = ["trigger", "panel"];
+  static targets = ["trigger", "panel", "expandedLabel", "collapsedLabel"];
   static actions = ["collapseAll", "expandAll", "onKeydown", "toggle"];
+  static events = ["close", "open"];
+  /** Owns `hidden` on the label pair a header declares, narrowed to that header. */
+  #labels = new StateRegions({
+    whenTrue: () => this.expandedLabelTargets,
+    whenFalse: () => this.collapsedLabelTargets
+  });
+  /** Settles the label pair of a header as it joins the group. */
+  triggerTargetConnected(trigger) {
+    this.#reflectLabels(trigger);
+  }
+  /** Settles the pair of the header an arriving expanded half belongs to. */
+  expandedLabelTargetConnected(label) {
+    this.#settleLabelHost(label);
+  }
+  /** Settles the pair of the header an arriving collapsed half belongs to. */
+  collapsedLabelTargetConnected(label) {
+    this.#settleLabelHost(label);
+  }
+  /** Reflects the pair of the header a label half sits in, where a header holds it. */
+  #settleLabelHost(label) {
+    const trigger = this.triggerTargets.find((candidate) => candidate.contains(label));
+    if (trigger) this.#reflectLabels(trigger);
+  }
   /** Toggles the panel controlled by the activated header. */
   toggle(event) {
     const trigger = event.currentTarget;
     const panel = this.#panelFor(trigger);
     if (!panel) return;
-    this.#setExpanded(trigger, panel, trigger.getAttribute("aria-expanded") !== "true");
+    this.#setExpanded(
+      trigger,
+      panel,
+      trigger.getAttribute("aria-expanded") !== "true",
+      stateReasonFor(event)
+    );
   }
   /** Opens every panel. Bound via `data-action` on an "expand all" control. */
-  expandAll() {
-    this.#setAll(true);
+  expandAll(event) {
+    this.#setAll(true, stateReasonFor(event));
   }
   /** Closes every panel. Bound via `data-action` on a "collapse all" control. */
-  collapseAll() {
-    this.#setAll(false);
+  collapseAll(event) {
+    this.#setAll(false, stateReasonFor(event));
   }
   /** Drives every header/panel pair to the same expanded state. */
-  #setAll(open) {
+  #setAll(open, reason) {
     for (const trigger of this.triggerTargets) {
       const panel = this.#panelFor(trigger);
-      if (panel) this.#setExpanded(trigger, panel, open);
+      if (panel) this.#setExpanded(trigger, panel, open, reason);
     }
   }
   /** Reflects one header/panel pair's state through `aria-expanded` + `hidden`. */
-  #setExpanded(trigger, panel, open) {
+  #setExpanded(trigger, panel, open, reason) {
+    const was = trigger.getAttribute("aria-expanded") === "true";
     trigger.setAttribute("aria-expanded", open ? "true" : "false");
     panel.hidden = !open;
+    this.#labels.reflect(trigger, open);
+    if (was === open) return;
+    const detail = { reason, index: this.triggerTargets.indexOf(trigger), trigger, panel };
+    if (open) this.dispatch("open", { detail, cancelable: false });
+    else this.dispatch("close", { detail, cancelable: false });
+  }
+  /** Shows the half of a header's label pair that belongs to its `aria-expanded`. */
+  #reflectLabels(trigger) {
+    this.#labels.reflect(trigger, trigger.getAttribute("aria-expanded") === "true");
   }
   /**
    * Moves focus between headers per the APG keyboard model, skipping any header

data/dist/controllers/announcer_controller.js

@@ -346,6 +346,9 @@ var AnnouncerController = class extends Controller {
    * region (it has to be in the accessibility tree before the text arrives) and
    * emptying a region that already holds this exact text (an unchanged node is not
    * re-read, so `dedupeReannounce` clears first and writes on the following pass).
+   *
+   * @stimeoRuntimeOnly `dedupeReannounce` decides whether one queued message is spoken again; the
+   *   region's text is the message itself.
    */
   #drain(level) {
     const queue = this.#queues.get(level);
@@ -368,7 +371,11 @@ var AnnouncerController = class extends Controller {
     this.#scheduleClear(region, message);
     if (queue.length > 0) this.#scheduleDrain(level);
   }
-  /** Clears the region after `clearAfter` ms, unless a newer message replaced it. */
+  /**
+   * Clears the region after `clearAfter` ms, unless a newer message replaced it.
+   *
+   * @stimeoRuntimeOnly `clearAfter` is the delay of the one clearing timer this call arms.
+   */
   #scheduleClear(region, message) {
     if (this.clearAfterValue <= 0) return;
     this.#regionTimers.set(

data/dist/controllers/auto_submit_controller.js

@@ -43,11 +43,19 @@ var BeforeCacheReset = class _BeforeCacheReset {
 };
 
 // src/utils/composition_tracker.ts
+var COMPOSITION_INPUT_TYPES = /* @__PURE__ */ new Set([
+  "insertCompositionText",
+  "insertFromComposition",
+  "deleteCompositionText",
+  "deleteByComposition"
+]);
 var CompositionTracker = class {
   #observedTargets = /* @__PURE__ */ new Set();
   #activeTargets = /* @__PURE__ */ new Set();
   #onStart;
   #onEnd;
+  /** The field whose confirming `input` is still owed, while the window is open. */
+  #confirmedTarget = null;
   constructor(options = {}) {
     this.#onStart = options.onStart;
     this.#onEnd = options.onEnd;
@@ -57,6 +65,7 @@ var CompositionTracker = class {
     if (this.#observedTargets.has(target)) return;
     target.addEventListener("compositionstart", this.#handleStart);
     target.addEventListener("compositionend", this.#handleEnd);
+    target.addEventListener("keydown", this.#handleKeydown);
     this.#observedTargets.add(target);
   }
   /** Stops tracking one target and clears any active composition it owned. */
@@ -64,29 +73,52 @@ var CompositionTracker = class {
     if (!this.#observedTargets.delete(target)) return;
     target.removeEventListener("compositionstart", this.#handleStart);
     target.removeEventListener("compositionend", this.#handleEnd);
+    target.removeEventListener("keydown", this.#handleKeydown);
     this.#activeTargets.delete(target);
+    if (this.#confirmedTarget === target) this.#confirmedTarget = null;
   }
   /** Releases every listener and clears state so reconnect starts cleanly. */
   disconnect() {
     for (const target of this.#observedTargets) {
       target.removeEventListener("compositionstart", this.#handleStart);
       target.removeEventListener("compositionend", this.#handleEnd);
+      target.removeEventListener("keydown", this.#handleKeydown);
     }
     this.#observedTargets.clear();
     this.#activeTargets.clear();
+    this.#confirmedTarget = null;
   }
   /** True when lifecycle tracking or the current event reports composition. */
   isComposing(event) {
     return this.#activeTargets.size > 0 || event?.isComposing === true;
   }
+  /**
+   * Whether `event` is the `input` echoing the composition just confirmed.
+   *
+   * Asking closes the window either way, so one confirmation is folded at most
+   * once and a consumer asks once per `input`.
+   */
+  consumesConfirmedInput(event) {
+    const confirmed = this.#confirmedTarget;
+    this.#confirmedTarget = null;
+    if (confirmed === null || confirmed !== event.target) return false;
+    const inputType = event.inputType;
+    return !inputType || COMPOSITION_INPUT_TYPES.has(inputType);
+  }
   #handleStart = (event) => {
+    this.#confirmedTarget = null;
     if (event.currentTarget) this.#activeTargets.add(event.currentTarget);
     this.#onStart?.(event);
   };
   #handleEnd = (event) => {
     if (event.currentTarget) this.#activeTargets.delete(event.currentTarget);
+    this.#confirmedTarget = event.target;
     this.#onEnd?.(event);
   };
+  /** A key on an observed field opens an edit of its own, so no echo is owed. */
+  #handleKeydown = () => {
+    this.#confirmedTarget = null;
+  };
 };
 
 // src/utils/listener_set.ts
@@ -187,7 +219,12 @@ var AutoSubmitController = class extends Controller {
   #boundForm = null;
   /** Rewinds the transient state hooks just before Turbo snapshots the page. */
   #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
-  /** Clears `aria-busy` and emits completion once Turbo finishes the submit. */
+  /**
+   * Clears `aria-busy` and emits completion once Turbo finishes the submit.
+   *
+   * @stimeoRuntimeOnly `message` and `announce` shape the event and the announcement of one
+   *   finished submit; the busy flag it clears does not depend on them.
+   */
   #onSubmitEnd = () => {
     this.#boundForm?.removeAttribute("aria-busy");
     const message = this.messageValue;
@@ -229,7 +266,11 @@ var AutoSubmitController = class extends Controller {
     if (event.type === "input" && this.#composition.isComposing(event)) return;
     this.#schedule(event.target ?? null);
   }
-  /** Schedules (and coalesces) the debounced submit for the given trigger. */
+  /**
+   * Schedules (and coalesces) the debounced submit for the given trigger.
+   *
+   * @stimeoRuntimeOnly `debounce` is the delay of the one submit timer this call arms.
+   */
   #schedule(trigger) {
     const form = this.#boundForm;
     if (!form) return;

data/dist/controllers/avatar_controller.js

@@ -224,7 +224,7 @@ var AvatarController = class extends Controller {
   }
   /** Applies Value precedence and returns the effective raw `src` attribute. */
   #applySource(image) {
-    if (!this.element.hasAttribute("data-stimeo--avatar-src-value")) {
+    if (!this.element.hasAttribute(`data-${this.identifier}-src-value`)) {
       this.#src.return(image);
       return image.getAttribute("src");
     }

data/dist/controllers/breadcrumb_controller.js

@@ -187,21 +187,24 @@ var BreadcrumbController = class extends Controller {
     this.#resync();
   }
   /**
-   * Re-measures when the disclosure set gains or loses a member. The set is a
-   * precondition for collapsing at all, so it needs the same watching the list
-   * and items get: without these callbacks a swap that breaks or completes the
-   * set would only take effect at the next resize or list mutation, which may
-   * never come.
+   * Re-measures when an `ellipsis` target arrives. The `ellipsis` and `trigger`
+   * targets form the disclosure set, a precondition for collapsing at all, so they
+   * need the same watching the list and items get: without their callbacks a swap
+   * that breaks or completes the set would only take effect at the next resize or
+   * list mutation, which may never come.
    */
   ellipsisTargetConnected() {
     this.#resync();
   }
+  /** Re-measures when an `ellipsis` target leaves the disclosure set. */
   ellipsisTargetDisconnected() {
     this.#resync();
   }
+  /** Re-measures when a `trigger` target joins the disclosure set. */
   triggerTargetConnected() {
     this.#resync();
   }
+  /** Re-measures when a `trigger` target leaves the disclosure set. */
   triggerTargetDisconnected() {
     this.#resync();
   }
@@ -210,7 +213,7 @@ var BreadcrumbController = class extends Controller {
    *
    * The marker is the source of truth for what may be collapsed, so an element
    * that loses it while the controller is live is an always-visible item again —
-   * and `#render` only walks the *current* targets, so nothing else would ever
+   * and rendering only walks the *current* targets, so nothing else would ever
    * clear the `hidden` this controller put there.
    *
    * The `#connected` guard is load-bearing, not defensive. Stimulus fires this
@@ -315,8 +318,6 @@ var BreadcrumbController = class extends Controller {
   }
   /**
    * Applies the collapsed/expanded state to the items, ellipsis, and trigger.
-   *
-   * @stimeoRenderRoot
    */
   #render() {
     const collapsed = this.#overflowing && !this.#expanded;

data/dist/controllers/bulk_select_controller.js

@@ -108,12 +108,8 @@ var BulkSelectController = class extends Controller {
   allTargetDisconnected() {
     this.#reconcile.schedule();
   }
-  /** Repaints the count for a total that changed at runtime, rejecting non-finite ones. */
+  /** Repaints the count for a total that changed at runtime. */
   totalCountValueChanged() {
-    if (!Number.isFinite(this.totalCountValue)) {
-      this.totalCountValue = 0;
-      return;
-    }
     this.#reconcile.schedule();
   }
   /** Repaints so wording changed at runtime is used by the next announcement. */
@@ -175,6 +171,11 @@ var BulkSelectController = class extends Controller {
   #announce(detail) {
     announce(fillTemplate(this.announceTextValue, { count: detail.count }));
   }
+  /** The declared `totalCount`, or the default `0` in place of a non-finite one. */
+  get #totalCount() {
+    const declared = this.totalCountValue;
+    return Number.isFinite(declared) ? declared : 0;
+  }
   /**
    * Recomputes the count, the select-all checked/indeterminate state, and the bar
    * visibility from the current DOM. Returns the figures when the emitted count or
@@ -191,7 +192,7 @@ var BulkSelectController = class extends Controller {
       this.allTarget.checked = total > 0 && checked === total;
       this.allTarget.indeterminate = checked > 0 && checked < total;
     }
-    const count = allPages ? this.totalCountValue : checked;
+    const count = allPages ? this.#totalCount : checked;
     const show = allPages || checked > 0;
     if (this.hasBarTarget) {
       if (!show && this.hasAllTarget && this.barTarget.contains(document.activeElement)) {