stimeo-ui 0.5.0 → 0.7.0

data/dist/controllers/dismissible_controller.js

@@ -2,8 +2,79 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/dismissible_controller.ts
 
-// src/utils/focus_trap.ts
-var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+// 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;
+}
+function canTakeFocus(element) {
+  if (element.closest("[hidden], [inert]")) return false;
+  if (element instanceof HTMLInputElement && element.type === "hidden") return false;
+  if (!("disabled" in element)) return true;
+  if (element.disabled) return false;
+  return !inheritsFieldsetDisabled(element);
+}
+var TAB_STOP_CANDIDATE_SELECTOR = [
+  "a[href]",
+  "area[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "summary",
+  "iframe",
+  "audio[controls]",
+  "video[controls]",
+  "[tabindex]",
+  "[contenteditable]"
+].join(",");
+function isRenderedForFocus(element) {
+  const check = element.checkVisibility;
+  return typeof check === "function" ? check.call(element, { visibilityProperty: true }) : true;
+}
+function authoredTabindex(element) {
+  const value = element.getAttribute("tabindex");
+  if (value === null || !/^[+-]?\d+$/.test(value.trim())) return null;
+  return Number(value);
+}
+function hasNativeTabStop(element) {
+  if (element instanceof HTMLAnchorElement || element instanceof HTMLAreaElement) {
+    return element.hasAttribute("href");
+  }
+  if (element instanceof HTMLButtonElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) {
+    return true;
+  }
+  if (element instanceof HTMLInputElement) return element.type !== "hidden";
+  if (element instanceof HTMLIFrameElement) return true;
+  if (element.tagName === "AUDIO" || element.tagName === "VIDEO") {
+    return element.hasAttribute("controls");
+  }
+  if (element instanceof HTMLElement && element.tagName === "SUMMARY") {
+    const details = element.parentElement;
+    return details instanceof HTMLDetailsElement && Array.from(details.children).find((child) => child.tagName === "SUMMARY") === element;
+  }
+  return false;
+}
+function hasEditableTabStop(element) {
+  const value = element.getAttribute("contenteditable")?.toLowerCase();
+  return value === "" || value === "true" || value === "plaintext-only";
+}
+function isTabStop(element) {
+  if (!canTakeFocus(element) || !isRenderedForFocus(element)) return false;
+  const tabindex = authoredTabindex(element);
+  if (tabindex !== null) return tabindex >= 0;
+  return hasNativeTabStop(element) || hasEditableTabStop(element);
+}
+function tabStopsWithin(root) {
+  return Array.from(root.querySelectorAll(TAB_STOP_CANDIDATE_SELECTOR)).filter(
+    isTabStop
+  );
+}
 
 // src/controllers/dismissible_controller.ts
 var DismissibleController = class extends Controller {
@@ -80,35 +151,29 @@ var DismissibleController = class extends Controller {
   /** Yields available focus fallbacks in precedence order, stopping after focus succeeds. */
   *#focusFallbacks(root) {
     const explicitFallback = this.hasFallbackTarget ? this.fallbackTarget : null;
-    if (explicitFallback && !root.contains(explicitFallback) && this.#isFocusAvailable(explicitFallback)) {
+    if (explicitFallback && !root.contains(explicitFallback) && this.#isExplicitFocusAvailable(explicitFallback)) {
       yield explicitFallback;
     }
-    const candidates = document.querySelectorAll(FOCUSABLE);
+    const candidates = tabStopsWithin(document);
     for (const element of candidates) {
       if (element === explicitFallback || root.contains(element) || !(root.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_FOLLOWING)) {
         continue;
       }
-      if (this.#isFocusAvailable(element)) yield element;
+      yield element;
     }
     for (let index = candidates.length - 1; index >= 0; index -= 1) {
-      const element = candidates.item(index);
+      const element = candidates[index];
+      if (!element) continue;
       if (element === explicitFallback || root.contains(element) || !(root.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING)) {
         continue;
       }
-      if (this.#isFocusAvailable(element)) yield element;
+      yield element;
     }
   }
-  /** Whether focus is allowed by the element and its semantic ancestors. */
-  #isFocusAvailable(element) {
-    if (!element.matches(FOCUSABLE) && !element.hasAttribute("tabindex") && !element.isContentEditable) {
-      return false;
-    }
-    if (element.matches(":disabled")) return false;
-    if (element instanceof HTMLInputElement && element.type === "hidden") return false;
-    for (let current = element; current; current = current.parentElement) {
-      if (current.hidden || current.inert) return false;
-    }
-    return true;
+  /** Whether an explicit fallback can receive programmatic focus right now. */
+  #isExplicitFocusAvailable(element) {
+    const programmaticallyFocusable = element.hasAttribute("tabindex") || isTabStop(element);
+    return programmaticallyFocusable && canTakeFocus(element) && isRenderedForFocus(element);
   }
 };
 

data/dist/controllers/drawer_controller.js

@@ -115,8 +115,81 @@ var EscapeLayer = class _EscapeLayer {
   }
 };
 
+// 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;
+}
+function canTakeFocus(element) {
+  if (element.closest("[hidden], [inert]")) return false;
+  if (element instanceof HTMLInputElement && element.type === "hidden") return false;
+  if (!("disabled" in element)) return true;
+  if (element.disabled) return false;
+  return !inheritsFieldsetDisabled(element);
+}
+var TAB_STOP_CANDIDATE_SELECTOR = [
+  "a[href]",
+  "area[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "summary",
+  "iframe",
+  "audio[controls]",
+  "video[controls]",
+  "[tabindex]",
+  "[contenteditable]"
+].join(",");
+function isRenderedForFocus(element) {
+  const check = element.checkVisibility;
+  return typeof check === "function" ? check.call(element, { visibilityProperty: true }) : true;
+}
+function authoredTabindex(element) {
+  const value = element.getAttribute("tabindex");
+  if (value === null || !/^[+-]?\d+$/.test(value.trim())) return null;
+  return Number(value);
+}
+function hasNativeTabStop(element) {
+  if (element instanceof HTMLAnchorElement || element instanceof HTMLAreaElement) {
+    return element.hasAttribute("href");
+  }
+  if (element instanceof HTMLButtonElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) {
+    return true;
+  }
+  if (element instanceof HTMLInputElement) return element.type !== "hidden";
+  if (element instanceof HTMLIFrameElement) return true;
+  if (element.tagName === "AUDIO" || element.tagName === "VIDEO") {
+    return element.hasAttribute("controls");
+  }
+  if (element instanceof HTMLElement && element.tagName === "SUMMARY") {
+    const details = element.parentElement;
+    return details instanceof HTMLDetailsElement && Array.from(details.children).find((child) => child.tagName === "SUMMARY") === element;
+  }
+  return false;
+}
+function hasEditableTabStop(element) {
+  const value = element.getAttribute("contenteditable")?.toLowerCase();
+  return value === "" || value === "true" || value === "plaintext-only";
+}
+function isTabStop(element) {
+  if (!canTakeFocus(element) || !isRenderedForFocus(element)) return false;
+  const tabindex = authoredTabindex(element);
+  if (tabindex !== null) return tabindex >= 0;
+  return hasNativeTabStop(element) || hasEditableTabStop(element);
+}
+function tabStopsWithin(root) {
+  return Array.from(root.querySelectorAll(TAB_STOP_CANDIDATE_SELECTOR)).filter(
+    isTabStop
+  );
+}
+
 // src/utils/focus_trap.ts
-var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 var FocusTrap = class {
   /** The element focused before activation, restored on deactivation. */
   #previouslyFocused = null;
@@ -278,9 +351,7 @@ var FocusTrap = class {
   }
   /** Collects the container's currently focusable descendants in DOM order. */
   #focusableElements() {
-    return Array.from(this.#getContainer().querySelectorAll(FOCUSABLE)).filter(
-      (el) => !el.hidden
-    );
+    return tabStopsWithin(this.#getContainer());
   }
 };
 

data/dist/controllers/file_dropzone_controller.js

@@ -12,18 +12,38 @@ var FileDropzoneController = class extends Controller {
   static events = ["change", "reject"];
   /** Selected files paired with their rendered item and any preview objectURL. */
   #entries = [];
+  /** Prevents initial and teardown target callbacks from binding outside controller lifetime. */
+  #connected = false;
   /** Wires file removal as a delegated listener on the list container. */
   connect() {
-    if (this.hasListTarget) this.listTarget.addEventListener("click", this.#onItemClick);
+    this.#connected = true;
+    if (this.hasListTarget) this.#bindList(this.listTarget);
   }
   /** Revokes any outstanding preview URLs so none leaks across navigations. */
   disconnect() {
-    if (this.hasListTarget) this.listTarget.removeEventListener("click", this.#onItemClick);
+    this.#connected = false;
+    for (const list of this.listTargets) list.removeEventListener("click", this.#onItemClick);
     for (const entry of this.#entries) {
       if (entry.url) URL.revokeObjectURL(entry.url);
     }
     this.#entries.length = 0;
   }
+  /** Rebinds removal and restores client-only previews when Turbo replaces the list target. */
+  listTargetConnected(list) {
+    if (!this.#connected) return;
+    this.#bindList(list);
+  }
+  /** Releases only the list target that actually disconnected. */
+  listTargetDisconnected(list) {
+    list.removeEventListener("click", this.#onItemClick);
+  }
+  /** Binds delegated removal once and moves live preview items into the current list. */
+  #bindList(list) {
+    list.addEventListener("click", this.#onItemClick);
+    for (const entry of this.#entries) {
+      if (!list.contains(entry.item)) list.appendChild(entry.item);
+    }
+  }
   /** Opens the native file dialog. Bound via `data-action` (trigger click). */
   openDialog() {
     this.inputTarget.click();
@@ -55,8 +75,11 @@ var FileDropzoneController = class extends Controller {
    * an item is appended without waiting on Stimulus to wire a freshly created element.
    */
   #onItemClick = (event) => {
+    const list = event.currentTarget;
     const button = event.target.closest("button");
-    if (!button || !this.hasListTarget || !this.listTarget.contains(button)) return;
+    if (!this.#connected || !list || !button || !this.hasListTarget || list !== this.listTarget || !list.contains(button)) {
+      return;
+    }
     const index = this.#entries.findIndex((entry) => entry.item.contains(button));
     if (index !== -1) this.#removeAt(index);
   };

data/dist/controllers/focus_controller.js

@@ -115,8 +115,81 @@ var EscapeLayer = class _EscapeLayer {
   }
 };
 
+// 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;
+}
+function canTakeFocus(element) {
+  if (element.closest("[hidden], [inert]")) return false;
+  if (element instanceof HTMLInputElement && element.type === "hidden") return false;
+  if (!("disabled" in element)) return true;
+  if (element.disabled) return false;
+  return !inheritsFieldsetDisabled(element);
+}
+var TAB_STOP_CANDIDATE_SELECTOR = [
+  "a[href]",
+  "area[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "summary",
+  "iframe",
+  "audio[controls]",
+  "video[controls]",
+  "[tabindex]",
+  "[contenteditable]"
+].join(",");
+function isRenderedForFocus(element) {
+  const check = element.checkVisibility;
+  return typeof check === "function" ? check.call(element, { visibilityProperty: true }) : true;
+}
+function authoredTabindex(element) {
+  const value = element.getAttribute("tabindex");
+  if (value === null || !/^[+-]?\d+$/.test(value.trim())) return null;
+  return Number(value);
+}
+function hasNativeTabStop(element) {
+  if (element instanceof HTMLAnchorElement || element instanceof HTMLAreaElement) {
+    return element.hasAttribute("href");
+  }
+  if (element instanceof HTMLButtonElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) {
+    return true;
+  }
+  if (element instanceof HTMLInputElement) return element.type !== "hidden";
+  if (element instanceof HTMLIFrameElement) return true;
+  if (element.tagName === "AUDIO" || element.tagName === "VIDEO") {
+    return element.hasAttribute("controls");
+  }
+  if (element instanceof HTMLElement && element.tagName === "SUMMARY") {
+    const details = element.parentElement;
+    return details instanceof HTMLDetailsElement && Array.from(details.children).find((child) => child.tagName === "SUMMARY") === element;
+  }
+  return false;
+}
+function hasEditableTabStop(element) {
+  const value = element.getAttribute("contenteditable")?.toLowerCase();
+  return value === "" || value === "true" || value === "plaintext-only";
+}
+function isTabStop(element) {
+  if (!canTakeFocus(element) || !isRenderedForFocus(element)) return false;
+  const tabindex = authoredTabindex(element);
+  if (tabindex !== null) return tabindex >= 0;
+  return hasNativeTabStop(element) || hasEditableTabStop(element);
+}
+function tabStopsWithin(root) {
+  return Array.from(root.querySelectorAll(TAB_STOP_CANDIDATE_SELECTOR)).filter(
+    isTabStop
+  );
+}
+
 // src/utils/focus_trap.ts
-var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 var FocusTrap = class {
   /** The element focused before activation, restored on deactivation. */
   #previouslyFocused = null;
@@ -278,9 +351,7 @@ var FocusTrap = class {
   }
   /** Collects the container's currently focusable descendants in DOM order. */
   #focusableElements() {
-    return Array.from(this.#getContainer().querySelectorAll(FOCUSABLE)).filter(
-      (el) => !el.hidden
-    );
+    return tabStopsWithin(this.#getContainer());
   }
 };