stimeo-ui 0.4.0 → 0.5.0

data/dist/controllers/switch_controller.js

@@ -1,39 +1,181 @@
 import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/switch_controller.ts
+
+// src/utils/default_attribute.ts
+function setDefaultAttribute(element, name, value) {
+  if (element.hasAttribute(name)) return false;
+  element.setAttribute(name, value);
+  return true;
+}
+
+// src/utils/focus_candidate.ts
+function inheritsFieldsetDisabled(control) {
+  let fieldset = control.closest("fieldset[disabled]");
+  while (fieldset) {
+    const legend = Array.from(fieldset.children).find((child) => child.tagName === "LEGEND");
+    if (!legend?.contains(control)) return true;
+    fieldset = fieldset.parentElement?.closest("fieldset[disabled]") ?? null;
+  }
+  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;
+  let current = element;
+  while (current) {
+    const raw = current.getAttribute("contenteditable");
+    if (raw !== null) {
+      const value = raw.trim().toLowerCase();
+      if (value === "false") return false;
+      if (value === "" || value === "true" || value === "plaintext-only") return true;
+    }
+    current = current.parentElement;
+  }
+  return false;
+}
+
+// src/controllers/switch_controller.ts
+var OBSERVED_ATTRIBUTES = [
+  "role",
+  "aria-checked",
+  "tabindex",
+  "type",
+  "href",
+  "contenteditable",
+  "controls"
+];
+var OBSERVED_ANCESTOR_ATTRIBUTES = ["contenteditable"];
 var SwitchController = class extends Controller {
   static actions = ["onKeydown", "toggle"];
   static events = ["changed"];
+  /** 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();
+  #attributeObserver = new MutationObserver((records) => {
+    this.#releaseAuthoredDefaults(records);
+    this.#attributeObserver.disconnect();
+    this.#reconcileDefaults();
+    this.#observeAttributes();
+  });
+  /** 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. */
   connect() {
-    if (!this.element.hasAttribute("role")) {
-      this.element.setAttribute("role", "switch");
-    }
-    if (!this.element.hasAttribute("aria-checked")) {
-      this.element.setAttribute("aria-checked", "false");
-    }
-    if (!(this.element instanceof HTMLButtonElement) && !this.element.hasAttribute("tabindex")) {
-      this.element.setAttribute("tabindex", "0");
-    }
+    this.#reconcileDefaults();
+    this.element.addEventListener("click", this.#onClickCapture, true);
+    this.#observeAttributes();
+  }
+  /** Releases the explicit click guard and retained-element attribute observer. */
+  disconnect() {
+    this.element.removeEventListener("click", this.#onClickCapture, true);
+    this.#attributeObserver.disconnect();
+    this.#internalAttributeValues.clear();
   }
   /** Toggles the checked state. Bound via `data-action` (click). */
   toggle() {
+    if (!this.#isSupportedHost || this.#isActivationDisabled) return;
     this.#checked = !this.#checked;
   }
   /**
-   * Activates the switch on Space/Enter for non-native hosts and prevents the
-   * default Space scroll. Bound via `data-action` (keydown). Native `<button>`
-   * hosts are skipped because the browser already turns Space/Enter into a click,
-   * which would otherwise toggle the switch twice.
+   * 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.element instanceof HTMLButtonElement) return;
-    if (event.repeat) return;
-    if (event.key === " " || event.key === "Enter") {
+    if (!this.#isSupportedHost) return;
+    if (event.key !== " " && event.key !== "Enter") return;
+    if (this.#isActivationDisabled) {
       event.preventDefault();
-      this.toggle();
+      event.stopImmediatePropagation();
+      return;
+    }
+    if (this.element instanceof HTMLButtonElement) {
+      if (event.repeat) event.preventDefault();
+      return;
+    }
+    event.preventDefault();
+    if (event.repeat) return;
+    this.toggle();
+  }
+  /** Re-adds only missing defaults, preserving every authored attribute value. */
+  #reconcileDefaults() {
+    if (!this.#isSupportedHost) {
+      this.#removeOwnedDefaults();
+      return;
+    }
+    this.#setOwnedDefault("role", "switch");
+    this.#setOwnedDefault("aria-checked", "false");
+    if (!(this.element instanceof HTMLButtonElement)) {
+      this.#setOwnedDefault("tabindex", "0");
+    }
+  }
+  /** Records a newly introduced default without claiming authored markup. */
+  #setOwnedDefault(name, value) {
+    if (setDefaultAttribute(this.element, name, value)) this.#ownedDefaults.add(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) {
+            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);
+    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
+    });
+    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) {
+      if (current.getAttribute("aria-disabled") === "true") return true;
+      current = current.parentElement;
     }
+    if (!(this.element instanceof HTMLButtonElement)) return false;
+    return this.element.disabled || inheritsFieldsetDisabled(this.element);
   }
   /** Whether the switch is currently on. */
   get #checked() {
@@ -41,7 +183,9 @@ var SwitchController = class extends Controller {
   }
   /** Reflects the new state on `aria-checked` and notifies listeners. */
   set #checked(value) {
-    this.element.setAttribute("aria-checked", value ? "true" : "false");
+    const reflected = value ? "true" : "false";
+    this.#internalAttributeValues.set("aria-checked", reflected);
+    this.element.setAttribute("aria-checked", reflected);
     this.dispatch("changed", { detail: { checked: value } });
   }
 };

data/dist/controllers/textarea_autosize_controller.js

@@ -52,7 +52,7 @@ var TextareaAutosizeController = class extends Controller {
     } else {
       el.removeAttribute("data-at-max-rows");
     }
-    el.style.setProperty("--stimeo-textarea-rows", String(rows));
+    el.style.setProperty("--stimeo--textarea-rows", String(rows));
     if (height !== this.#lastHeight) {
       this.#lastHeight = height;
       this.dispatch("resize", { detail: { height, rows } });

data/dist/controllers/time_picker_controller.js

@@ -121,7 +121,6 @@ var TimePickerController = class extends Controller {
   }
   /** Propagates a wrap carry from `kind` into the next larger segment. */
   #carry(kind, amount) {
-    if (amount === 0) return;
     if (kind === "second") this.#step("minute", amount);
     else if (kind === "minute") this.#step("hour", amount);
   }
@@ -183,15 +182,19 @@ var TimePickerController = class extends Controller {
     segment.setAttribute("aria-valuemax", String(max));
     segment.textContent = text;
   }
-  /** Composes `HH:MM[:SS]` (24-hour) into the hidden field; dispatches `change`. */
+  /** Composes `HH:MM[:SS]` and notifies both native-form and widget consumers. */
   #syncField(notify) {
     const h24 = this.#hours24();
     const parts = [pad(h24), pad(this.#state.minute)];
     if (this.secondsValue) parts.push(pad(this.#state.second));
     const value = parts.join(":");
-    if (this.hasFieldTarget && this.fieldTarget.value !== value) {
+    const fieldChanged = this.hasFieldTarget && this.fieldTarget.value !== value;
+    if (fieldChanged) {
       this.fieldTarget.value = value;
     }
+    if (notify && fieldChanged) {
+      this.fieldTarget.dispatchEvent(new Event("change", { bubbles: true }));
+    }
     if (notify && value !== this.#lastValue) this.dispatch("change", { detail: { value } });
     this.#lastValue = value;
   }

data/dist/controllers/tree_view_controller.js

@@ -30,6 +30,23 @@ function canTakeFocus(element) {
   return !inheritsFieldsetDisabled(element);
 }
 
+// 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;
+  let current = element;
+  while (current) {
+    const raw = current.getAttribute("contenteditable");
+    if (raw !== null) {
+      const value = raw.trim().toLowerCase();
+      if (value === "false") return false;
+      if (value === "" || value === "true" || value === "plaintext-only") return true;
+    }
+    current = current.parentElement;
+  }
+  return false;
+}
+
 // src/utils/roving_tabindex.ts
 var RovingTabindex = class {
   /** Returns the current ordered item elements; called on every operation. */
@@ -175,7 +192,7 @@ function findTypeaheadMatch(items, from, query, label = (item) => typeaheadLabel
 }
 
 // src/controllers/tree_view_controller.ts
-var NESTED_INTERACTIVE = 'input, textarea, select, button, a[href], [contenteditable]:not([contenteditable="false"])';
+var NESTED_INTERACTIVE = INTERACTIVE_HOST_SELECTOR;
 var TreeViewController = class extends Controller {
   static targets = ["item", "group"];
   static actions = ["onClick", "onKeydown", "toggle"];
@@ -436,6 +453,7 @@ var TreeViewController = class extends Controller {
     if (target.closest('[role="treeitem"]') !== item) return null;
     const control = target.closest(NESTED_INTERACTIVE);
     if (control && item.contains(control)) return null;
+    if (isInteractiveHost(target)) return null;
     return item;
   }
   /**