stimeo-ui 0.16.0 → 0.18.0

data/dist/controllers/switch_controller.js

@@ -1,15 +1,109 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/switch_controller.ts
+function setAttributeIfChanged(element, name, value, beforeWrite) {
+  if (element.getAttribute(name) === value) return false;
+  beforeWrite?.();
+  if (value === null) element.removeAttribute(name);
+  else element.setAttribute(name, value);
+  return true;
+}
+
+var AuthoredMutationWatcher = class {
+  #onAuthored;
+  #claims = null;
+  #observer = null;
+  constructor(onAuthored) {
+    this.#onAuthored = onAuthored;
+  }
+  observe(root, options) {
+    this.disconnect();
+    const observer = new MutationObserver((records) => {
+      if (this.#observer !== observer) return;
+      const authored = this.#filter(records);
+      if (authored.length > 0) this.#onAuthored(authored);
+    });
+    this.#observer = observer;
+    this.#claims = { attributes: /* @__PURE__ */ new Map(), children: /* @__PURE__ */ new Map() };
+    observer.observe(root, {
+      attributes: true,
+      attributeFilter: [...options.attributes],
+      subtree: options.subtree ?? false,
+      childList: options.childList ?? false
+    });
+    if (options.ancestorAttributes) {
+      let ancestor = root.parentElement;
+      while (ancestor) {
+        observer.observe(ancestor, {
+          attributes: true,
+          attributeFilter: [...options.ancestorAttributes]
+        });
+        ancestor = ancestor.parentElement;
+      }
+    }
+  }
+  claim(target, name, value) {
+    const claims = this.#claims?.attributes;
+    let attributes = claims?.get(target);
+    if (!attributes) {
+      attributes = /* @__PURE__ */ new Map();
+      claims?.set(target, attributes);
+    }
+    const pending = attributes.get(name);
+    attributes.set(name, { value, count: (pending?.count ?? 0) + 1 });
+  }
+  claimCurrent(target, name) {
+    this.claim(target, name, target.getAttribute(name));
+  }
+  claimChildList(target, added, removed) {
+    const claims = this.#claims?.children;
+    const pending = claims?.get(target) ?? { added: /* @__PURE__ */ new Map(), removed: /* @__PURE__ */ new Map() };
+    for (const node of added) pending.added.set(node, (pending.added.get(node) ?? 0) + 1);
+    for (const node of removed) pending.removed.set(node, (pending.removed.get(node) ?? 0) + 1);
+    claims?.set(target, pending);
+  }
+  take() {
+    return this.#filter(this.#observer?.takeRecords() ?? []);
+  }
+  disconnect() {
+    this.#observer?.disconnect();
+    this.#observer = null;
+    this.#claims = null;
+  }
+  #filter(records) {
+    const authored = records.filter((record) => !this.#consume(record));
+    this.#claims?.attributes.clear();
+    this.#claims?.children.clear();
+    return authored;
+  }
+  #consume(record) {
+    if (record.type === "attributes") {
+      const target = record.target;
+      const pending2 = this.#claims?.attributes.get(target)?.get(record.attributeName);
+      if (!pending2 || pending2.count === 0 || target.getAttribute(record.attributeName) !== pending2.value) {
+        return false;
+      }
+      pending2.count -= 1;
+      return true;
+    }
+    const pending = this.#claims?.children.get(record.target);
+    if (!pending) return false;
+    const added = [...record.addedNodes];
+    const removed = [...record.removedNodes];
+    if (added.some((node) => !pending.added.get(node)) || removed.some((node) => !pending.removed.get(node))) {
+      return false;
+    }
+    for (const node of added) pending.added.set(node, (pending.added.get(node) ?? 0) - 1);
+    for (const node of removed) pending.removed.set(node, (pending.removed.get(node) ?? 0) - 1);
+    return true;
+  }
+};
 
-// src/utils/default_attribute.ts
 function setDefaultAttribute(element, name, value) {
   if (element.hasAttribute(name)) return false;
   element.setAttribute(name, value);
   return true;
 }
 
-// src/utils/field_mirror.ts
 function writeField(field, value) {
   if (field.value === value) return false;
   field.value = value;
@@ -19,7 +113,6 @@ function commitField(target) {
   target.dispatchEvent(new Event("change", { bubbles: true }));
 }
 
-// src/utils/focus_candidate.ts
 function inheritsFieldsetDisabled(control) {
   let fieldset = control.closest("fieldset[disabled]");
   while (fieldset) {
@@ -30,7 +123,6 @@ function inheritsFieldsetDisabled(control) {
   return false;
 }
 
-// src/utils/interactive_host.ts
 var INTERACTIVE_HOST_SELECTOR = "button, input, select, textarea, label, a[href], area[href], summary, details, audio[controls], video[controls], iframe, object, embed";
 function isInteractiveHost(element) {
   if (element.matches(INTERACTIVE_HOST_SELECTOR)) return true;
@@ -47,27 +139,36 @@ function isInteractiveHost(element) {
   return false;
 }
 
-// src/utils/microtask_coalescer.ts
+var ListenerSet = class {
+  #abort = new AbortController();
+  add(target, type, handler, options) {
+    target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });
+  }
+  dispose() {
+    this.#abort.abort();
+    this.#abort = new AbortController();
+  }
+};
+
 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. */
+  get pending() {
+    return this.#queued;
+  }
   schedule() {
     if (!this.#active || this.#queued) return;
     this.#queued = true;
@@ -80,7 +181,45 @@ var MicrotaskCoalescer = class {
   }
 };
 
-// src/controllers/switch_controller.ts
+var MorphRenderWatcher = class {
+  #listeners = new ListenerSet();
+  #pass;
+  #element = null;
+  #onMorph = () => this.#pass.schedule();
+  constructor(run) {
+    this.#pass = new MicrotaskCoalescer(run);
+  }
+  observe(element) {
+    if (this.#element === element) return;
+    this.disconnect();
+    this.#element = element;
+    this.#pass.activate();
+    this.#listeners.add(element, "turbo:morph-element", this.#onMorph);
+  }
+  schedule() {
+    this.#pass.schedule();
+  }
+  get pending() {
+    return this.#pass.pending;
+  }
+  disconnect() {
+    this.#listeners.dispose();
+    this.#pass.cancel();
+    this.#element = null;
+  }
+};
+
+var MoveCounter = class {
+  #sequence = 0;
+  record() {
+    this.#sequence += 1;
+    return this.#sequence;
+  }
+  isLatest(token) {
+    return token === this.#sequence;
+  }
+};
+
 var OBSERVED_ATTRIBUTES = [
   "role",
   "aria-checked",
@@ -92,61 +231,49 @@ var OBSERVED_ATTRIBUTES = [
 ];
 var OBSERVED_ANCESTOR_ATTRIBUTES = ["contenteditable"];
 var SwitchController = class extends Controller {
+  #moves = new MoveCounter();
+  #connectionGeneration = 0;
   static targets = ["field"];
   static actions = ["onKeydown", "toggle"];
   static events = ["change", "reconcile"];
-  /** Defaults this instance introduced and may therefore remove safely. */
-  #ownedDefaults = /* @__PURE__ */ new Set();
-  /** Controller writes that must not be mistaken for authored morph changes. */
-  #internalAttributeValues = /* @__PURE__ */ new Map();
-  /** One pass per batch of retained-element changes and field arrivals. */
-  #pass = new MicrotaskCoalescer(() => this.#reconcile());
-  /** The checked state last published: read on connect, then committed or reported. */
+  #ownedDefaults = /* @__PURE__ */ new Map();
+  #pass = new MorphRenderWatcher(() => this.#reconcile());
   #committedChecked = false;
-  #attributeObserver = new MutationObserver((records) => {
+  #attributeObserver = new AuthoredMutationWatcher((records) => {
     this.#releaseAuthoredDefaults(records);
     this.#pass.schedule();
   });
-  /** Blocks disabled pointer/native-key activation before consumer click handlers. */
   #onClickCapture = (event) => {
     if (!this.#isSupportedHost || !this.#isActivationDisabled) return;
     event.preventDefault();
     event.stopImmediatePropagation();
   };
-  /**
-   * Ensures the switch exposes a role and is keyboard-reachable, and takes the
-   * state it finds as the one a later move is measured from, reporting nothing.
-   */
+  #listeners = new ListenerSet();
   connect() {
+    this.#releaseDefaultsRewrittenWhileAway();
     this.#reconcileDefaults();
     this.#mirrorField(false);
     this.#committedChecked = this.#checked;
-    this.element.addEventListener("click", this.#onClickCapture, true);
-    this.#pass.activate();
+    this.#listeners.add(this.element, "click", this.#onClickCapture, { capture: true });
+    this.#pass.observe(this.element);
     this.#observeAttributes();
   }
-  /** Fills a form field inserted or replaced at runtime with the current state. */
   fieldTargetConnected() {
     this.#pass.schedule();
   }
-  /** Releases the click guard, the attribute observer, and a pass still queued. */
+  fieldTargetDisconnected() {
+    this.#pass.schedule();
+  }
   disconnect() {
-    this.#pass.cancel();
-    this.element.removeEventListener("click", this.#onClickCapture, true);
+    this.#connectionGeneration += 1;
+    this.#pass.disconnect();
+    this.#listeners.dispose();
     this.#attributeObserver.disconnect();
-    this.#internalAttributeValues.clear();
   }
-  /** Toggles the checked state. Bound via `data-action` (click). */
   toggle() {
     if (!this.#isSupportedHost || this.#isActivationDisabled) return;
     this.#commit(!this.#checked);
   }
-  /**
-   * Activates the switch on Space/Enter for non-native hosts and suppresses key
-   * repeat. Bound via `data-action` (keydown). A native `<button type="button">`
-   * owns the initial key-to-click synthesis; repeated keydowns are canceled before
-   * the browser can synthesize additional clicks.
-   */
   onKeydown(event) {
     if (event.defaultPrevented) return;
     if (!this.#isSupportedHost) return;
@@ -164,29 +291,21 @@ var SwitchController = class extends Controller {
     if (event.repeat) return;
     this.toggle();
   }
-  /**
-   * Re-derives the defaults and the field after the page changed the host, then
-   * reports a checked state that moved. Records still queued are read first, so
-   * an author's write is not lost when observation is suspended for this pass's
-   * own writes; observation resumes before the report, so an edit a listener
-   * makes is seen by the next pass.
-   */
   #reconcile() {
-    this.#releaseAuthoredDefaults(this.#attributeObserver.takeRecords());
-    this.#attributeObserver.disconnect();
+    this.#releaseAuthoredDefaults(this.#attributeObserver.take());
     this.#reconcileDefaults();
     this.#mirrorField(false);
-    this.#observeAttributes();
+    const authored = this.#attributeObserver.take();
+    this.#releaseAuthoredDefaults(authored);
+    if (authored.length > 0) this.#pass.schedule();
     this.#reportMove();
   }
-  /** Reports a checked state that moved since the one this switch last published. */
   #reportMove() {
     const checked = this.#checked;
     if (checked === this.#committedChecked) return;
     this.#committedChecked = checked;
     this.dispatch("reconcile", { detail: { checked } });
   }
-  /** Re-adds only missing defaults, preserving every authored attribute value. */
   #reconcileDefaults() {
     if (!this.#isSupportedHost) {
       this.#removeOwnedDefaults();
@@ -198,61 +317,50 @@ var SwitchController = class extends Controller {
       this.#setOwnedDefault("tabindex", "0");
     }
   }
-  /** Mirrors the checked state into the optional form field. */
   #mirrorField(notify) {
     if (!this.hasFieldTarget) return;
     const moved = writeField(this.fieldTarget, this.#checked ? "true" : "false");
     if (moved && notify) commitField(this.fieldTarget);
   }
-  /** Records a newly introduced default without claiming authored markup. */
   #setOwnedDefault(name, value) {
-    if (setDefaultAttribute(this.element, name, value)) this.#ownedDefaults.add(name);
+    if (setDefaultAttribute(this.element, name, value)) {
+      this.#ownedDefaults.set(name, value);
+      this.#attributeObserver.claimCurrent(this.element, name);
+    }
+  }
+  #releaseDefaultsRewrittenWhileAway() {
+    for (const [name, written] of this.#ownedDefaults) {
+      const value = this.element.getAttribute(name);
+      if (value !== null && value !== written) this.#ownedDefaults.delete(name);
+    }
   }
-  /**
-   * Gives ownership back when a retained-element morph authors a value. Missing
-   * owned attributes stay owned so reconciliation can restore them.
-   */
   #releaseAuthoredDefaults(records) {
     for (const record of records) {
       if (record.target === this.element) {
         const name = record.attributeName;
         if (name && this.#ownedDefaults.has(name)) {
           const value = this.element.getAttribute(name);
-          if (value !== null && this.#internalAttributeValues.get(name) !== value) {
+          if (value !== null) {
             this.#ownedDefaults.delete(name);
           }
         }
       }
     }
-    this.#internalAttributeValues.clear();
   }
-  /** Removes only defaults introduced by this instance when a host becomes invalid. */
   #removeOwnedDefaults() {
-    for (const name of this.#ownedDefaults) this.element.removeAttribute(name);
+    for (const name of this.#ownedDefaults.keys()) this.#writeAttribute(name, null);
     this.#ownedDefaults.clear();
-    this.#internalAttributeValues.clear();
   }
-  /** Watches retained host attributes that Turbo can morph without reconnecting. */
   #observeAttributes() {
     this.#attributeObserver.observe(this.element, {
-      attributes: true,
-      attributeFilter: OBSERVED_ATTRIBUTES
+      attributes: OBSERVED_ATTRIBUTES,
+      ancestorAttributes: OBSERVED_ANCESTOR_ATTRIBUTES
     });
-    let ancestor = this.element.parentElement;
-    while (ancestor) {
-      this.#attributeObserver.observe(ancestor, {
-        attributes: true,
-        attributeFilter: OBSERVED_ANCESTOR_ATTRIBUTES
-      });
-      ancestor = ancestor.parentElement;
-    }
   }
-  /** Whether the host has one activation model that this controller can own. */
   get #isSupportedHost() {
     if (this.element instanceof HTMLButtonElement) return this.element.type === "button";
     return !isInteractiveHost(this.element);
   }
-  /** Whether ARIA or native HTML semantics make the supported switch inoperable. */
   get #isActivationDisabled() {
     let current = this.element;
     while (current) {
@@ -262,25 +370,34 @@ var SwitchController = class extends Controller {
     if (!(this.element instanceof HTMLButtonElement)) return false;
     return this.element.disabled || inheritsFieldsetDisabled(this.element);
   }
-  /** Whether the switch is currently on. */
   get #checked() {
     return this.element.getAttribute("aria-checked") === "true";
   }
-  /**
-   * Applies one toggle the user made. The state is taken as published before
-   * either report goes out, so a listener that toggles again or writes the
-   * attribute is measured from it.
-   */
   #commit(value) {
+    const generation = this.#connectionGeneration;
     const reflected = value ? "true" : "false";
-    this.#internalAttributeValues.set("aria-checked", reflected);
-    this.element.setAttribute("aria-checked", reflected);
+    const authored = this.#attributeObserver.take();
+    this.#releaseAuthoredDefaults(authored);
+    if (authored.length > 0) this.#pass.schedule();
+    if (this.#ownedDefaults.has("aria-checked")) this.#ownedDefaults.set("aria-checked", reflected);
+    this.#writeAttribute("aria-checked", reflected);
+    const changed = value !== this.#committedChecked;
     this.#committedChecked = value;
+    if (!changed) {
+      this.#mirrorField(false);
+      return;
+    }
+    const token = this.#moves.record();
     this.#mirrorField(true);
+    if (generation !== this.#connectionGeneration || !this.#moves.isLatest(token)) return;
     this.dispatch("change", { detail: { checked: value } });
   }
+  #writeAttribute(name, value) {
+    setAttributeIfChanged(this.element, name, value, () => {
+      this.#attributeObserver.claim(this.element, name, value);
+    });
+  }
 };
 
 export { SwitchController };
-//# sourceMappingURL=switch_controller.js.map
 //# sourceMappingURL=switch_controller.js.map

data/dist/controllers/tabs_controller.js

@@ -1,33 +1,48 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/tabs_controller.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";
+}
+
+function actionSource(source) {
+  if (source instanceof HTMLElement) {
+    return { event: null, host: source, origin: source, reason: "api" };
+  }
+  const event = source ?? null;
+  return {
+    event,
+    host: event?.currentTarget instanceof Element ? event.currentTarget : null,
+    origin: event?.target instanceof Element ? event.target : null,
+    reason: stateReasonFor(event)
+  };
+}
 
-// 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");
 }
+function hasModifierChord(event) {
+  return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+}
+
+function targetSelector(identifier, name) {
+  return `[data-${identifier}-target~="${name}"]`;
+}
 
-// src/controllers/tabs_controller.ts
 var TabsController = class extends Controller {
   static targets = ["tab", "panel", "list"];
   static actions = ["onKeydown", "select"];
   static events = ["change"];
-  /** Whether selection moves are reported: set once `connect()` settled the baseline. */
   #reporting = false;
-  /**
-   * 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"
@@ -35,27 +50,28 @@ var TabsController = class extends Controller {
     this.#selectIndex(preselected === -1 ? 0 : preselected, { focus: false });
     this.#reporting = true;
   }
-  /**
-   * Stops reporting until the next `connect()` has settled its baseline, so that
-   * normalization stays silent.
-   */
   disconnect() {
     this.#reporting = false;
   }
-  /** Selects the clicked tab. Bound via `data-action` (click). */
-  select(event) {
-    const index = this.tabTargets.indexOf(event.currentTarget);
-    if (index !== -1) this.#selectIndex(index, { focus: false });
+  select(source) {
+    const { host, origin, reason } = actionSource(source);
+    const tab = host?.closest(targetSelector(this.identifier, "tab"));
+    if (!tab || !this.tabTargets.includes(tab)) return;
+    if (origin && origin.closest(`[data-controller~="${this.identifier}"]`) !== this.element)
+      return;
+    const index = this.tabTargets.indexOf(tab);
+    this.#selectIndex(index, { focus: false }, reason);
   }
-  /** Implements arrow/Home/End navigation with automatic activation. */
   onKeydown(event) {
     if (event.defaultPrevented) return;
     if (isReservedArrowChord(event)) return;
+    if ((event.key === "Home" || event.key === "End") && hasModifierChord(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;
+    const directionElement = this.hasListTarget ? this.listTarget : this.element;
+    const step = isRtl(directionElement) ? -1 : 1;
     switch (event.key) {
       case "ArrowRight":
         nextIndex = (currentIndex + step + tabs.length) % tabs.length;
@@ -75,11 +91,7 @@ var TabsController = class extends Controller {
     event.preventDefault();
     this.#selectIndex(nextIndex, { focus: true });
   }
-  /**
-   * Activates the tab/panel pair at `index`: updates `aria-selected`, the roving
-   * `tabindex`, and panel visibility. Optionally moves focus to the new tab.
-   */
-  #selectIndex(index, { focus }) {
+  #selectIndex(index, { focus }, reason = "user") {
     const tabs = this.tabTargets;
     const previous = tabs.findIndex((tab) => tab.getAttribute("aria-selected") === "true");
     tabs.forEach((tab, i) => {
@@ -92,7 +104,7 @@ var TabsController = class extends Controller {
     });
     if (previous !== index && this.#reporting) {
       this.dispatch("change", {
-        detail: { index, total: tabs.length, previous },
+        detail: { index, total: tabs.length, previous, reason },
         cancelable: false
       });
     }
@@ -101,5 +113,4 @@ var TabsController = class extends Controller {
 };
 
 export { TabsController };
-//# sourceMappingURL=tabs_controller.js.map
 //# sourceMappingURL=tabs_controller.js.map