@y14e/disclosure-css 1.3.10 → 1.3.12

package/dist/index.bundle.cjs

@@ -0,0 +1,710 @@
+'use strict';
+
+// node_modules/@y14e/attributes-utils/dist/index.js
+var DEFAULT_PARSER = (value) => value.split(/\s+/);
+var DEFAULT_SERIALIZER = (tokens) => tokens.join(" ");
+function addTokenToAttribute(element, attribute, token, options = {}) {
+  const {
+    caseInsensitive = false,
+    parse = DEFAULT_PARSER,
+    serialize = DEFAULT_SERIALIZER
+  } = options;
+  const value = element.getAttribute(attribute)?.trim();
+  const tokens = value ? parse(value).filter(Boolean) : [];
+  if (caseInsensitive) {
+    const lower = token.toLowerCase();
+    if (tokens.every((token2) => token2.toLowerCase() !== lower)) {
+      tokens.push(token);
+      element.setAttribute(attribute, serialize(tokens));
+    }
+  } else {
+    const set = new Set(tokens);
+    set.add(token);
+    element.setAttribute(attribute, serialize([...set]));
+  }
+}
+var snapshots = /* @__PURE__ */ new WeakMap();
+function restoreAttributes(elements) {
+  for (const element of elements) {
+    const snapshot = snapshots.get(element);
+    if (!snapshot) {
+      continue;
+    }
+    for (const [attribute, value] of snapshot.entries()) {
+      value === null ? element.removeAttribute(attribute) : element.setAttribute(attribute, value);
+    }
+    snapshots.delete(element);
+  }
+}
+function saveAttributes(elements, attributes) {
+  elements.forEach((element) => {
+    let snapshot = snapshots.get(element);
+    if (!snapshot) {
+      snapshot = /* @__PURE__ */ new Map();
+      snapshots.set(element, snapshot);
+    }
+    attributes.forEach((attribute) => {
+      snapshot.set(attribute, element.getAttribute(attribute));
+    });
+  });
+}
+
+// node_modules/power-focusable/dist/index.js
+var FOCUSABLE_SELECTOR = `:is(a[href], area[href], button, embed, iframe, input:not([type="hidden" i]), object, select, details > summary:first-of-type, textarea, [contenteditable]:not([contenteditable="false" i]), [controls], [tabindex]):not(:disabled, [hidden], [inert], [tabindex="-1"])`;
+function getFocusables(container = document.body, options = {}) {
+  if (!(container instanceof Element)) {
+    console.warn("Invalid container element. Fallback: <body> element.");
+    container = document.body;
+  }
+  let {
+    composed = false,
+    filter,
+    include,
+    skipNegativeTabIndexCheck = false,
+    skipVisibilityCheck = false
+  } = options;
+  if (typeof composed !== "boolean") {
+    console.warn("Invalid composed option. Fallback: false.");
+    composed = false;
+  }
+  if (typeof filter !== "undefined" && typeof filter !== "function") {
+    console.warn(
+      "Invalid filter function. Fallback: no filter function (undefined)."
+    );
+    filter = void 0;
+  }
+  if (typeof include !== "undefined" && typeof include !== "function") {
+    console.warn(
+      "Invalid include function. Fallback: no include function (undefined)."
+    );
+    include = void 0;
+  }
+  if (typeof skipNegativeTabIndexCheck !== "boolean") {
+    console.warn("Invalid skipNegativeTabIndexCheck option. Fallback: false.");
+    skipNegativeTabIndexCheck = false;
+  }
+  if (typeof skipVisibilityCheck !== "boolean") {
+    console.warn("Invalid skipVisibilityCheck option. Fallback: false.");
+    skipVisibilityCheck = false;
+  }
+  const elements = [];
+  if (composed || include) {
+    let traverse2 = function(node) {
+      if (!(node instanceof Element)) {
+        return;
+      }
+      if (isFocusable(node, { skipNegativeTabIndexCheck, skipVisibilityCheck }) || include?.(node)) {
+        elements[elements.length] = node;
+      }
+      const children = getComposedChildren(node);
+      for (let i = 0, l = children.length; i < l; i++) {
+        const child = children[i];
+        child && traverse2(child);
+      }
+    };
+    traverse2(container);
+  } else {
+    const candidates = container.querySelectorAll(FOCUSABLE_SELECTOR);
+    for (let i = 0, l = candidates.length; i < l; i++) {
+      const candidate = candidates[i];
+      if (candidate && isFocusable(candidate, {
+        skipNegativeTabIndexCheck,
+        skipVisibilityCheck
+      })) {
+        elements[elements.length] = candidate;
+      }
+    }
+  }
+  const unfiltered = normalizeRadioGroup(sortByTabIndex(elements));
+  return filter ? unfiltered.filter(filter) : unfiltered;
+}
+function isFocusable(element, options = {}) {
+  if (!(element instanceof Element)) {
+    console.warn("Invalid element");
+    return false;
+  }
+  let { skipNegativeTabIndexCheck = false, skipVisibilityCheck = false } = options;
+  if (typeof skipNegativeTabIndexCheck !== "boolean") {
+    console.warn("Invalid skipNegativeTabIndexCheck option. Fallback: false.");
+    skipNegativeTabIndexCheck = false;
+  }
+  if (typeof skipVisibilityCheck !== "boolean") {
+    console.warn("Invalid skipVisibilityCheck option. Fallback: false.");
+    skipVisibilityCheck = false;
+  }
+  if (element.hasAttribute("hidden") || isInert(element)) {
+    return false;
+  }
+  if (!skipNegativeTabIndexCheck && getTabIndex(element) < 0) {
+    return false;
+  }
+  if (!element.matches(
+    skipNegativeTabIndexCheck ? FOCUSABLE_SELECTOR.replace(/(,\s*)?\[tabindex="-1"\]/g, "") : FOCUSABLE_SELECTOR
+  )) {
+    return false;
+  }
+  if (isDisabledDeep(element)) {
+    return false;
+  }
+  if (!skipVisibilityCheck && !element.checkVisibility({
+    contentVisibilityAuto: true,
+    opacityProperty: true,
+    visibilityProperty: true
+  })) {
+    return false;
+  }
+  return true;
+}
+function isDisabledDeep(element) {
+  let current = element;
+  while (current) {
+    if (current instanceof ShadowRoot) {
+      if (current.mode !== "open") {
+        return false;
+      }
+      current = current.host;
+      continue;
+    }
+    if (!(current instanceof Element)) {
+      current = current.parentNode;
+      continue;
+    }
+    if (current === element && isFormControl(current) && isDisabled(current)) {
+      return true;
+    }
+    if (isInert(current)) {
+      return true;
+    }
+    if (isFormControl(element) && current.tagName === "FIELDSET" && isDisabled(current)) {
+      if (!current.querySelector(":scope > legend:first-of-type")?.contains(element)) {
+        return true;
+      }
+    }
+    current = current.parentNode;
+  }
+  return false;
+}
+function normalizeRadioGroup(elements) {
+  let map = null;
+  for (let i = 0, l = elements.length; i < l; i++) {
+    const element = elements[i];
+    if (!(element instanceof HTMLInputElement)) {
+      continue;
+    }
+    if (!isUngroupedRadio(element)) {
+      continue;
+    }
+    if (!map) {
+      map = /* @__PURE__ */ new Map();
+    }
+    const key = `${element.form?.id ?? "no-form"}::${element.name}`;
+    const group = map.get(key) ?? map.set(key, []).get(key);
+    if (group) {
+      group[group.length] = element;
+    }
+  }
+  if (!map) {
+    return elements;
+  }
+  const placeholder = /* @__PURE__ */ new Set();
+  for (const group of map.values()) {
+    placeholder.add(group.find((radio) => radio.checked) ?? group[0]);
+  }
+  return elements.filter(
+    (element) => isUngroupedRadio(element) ? placeholder.has(element) : true
+  );
+}
+function sortByTabIndex(elements) {
+  const ordered = [];
+  const natural = [];
+  for (let i = 0, l = elements.length; i < l; i++) {
+    const element = elements[i];
+    if (element) {
+      const target = getTabIndex(element) > 0 ? ordered : natural;
+      target[target.length] = element;
+    }
+  }
+  ordered.sort((a, b) => getTabIndex(a) - getTabIndex(b));
+  let count = 0;
+  const sorted = new Array(ordered.length + natural.length);
+  for (let i = 0, l = ordered.length; i < l; i++) {
+    sorted[count++] = ordered[i];
+  }
+  for (let i = 0, l = natural.length; i < l; i++) {
+    sorted[count++] = natural[i];
+  }
+  return sorted;
+}
+function getComposedChildren(node) {
+  if (node instanceof ShadowRoot) {
+    return getChildren(node);
+  }
+  if (!(node instanceof Element)) {
+    return [];
+  }
+  if (node instanceof HTMLSlotElement) {
+    const assigned = node.assignedElements({ flatten: true });
+    if (assigned.length) {
+      return assigned;
+    }
+  }
+  if (node instanceof HTMLElement && node.shadowRoot?.mode === "open") {
+    return getChildren(node.shadowRoot);
+  }
+  return getChildren(node);
+}
+function focusElement(element) {
+  "focus" in element && typeof element.focus === "function" && element.focus();
+}
+function getActiveElement() {
+  let current = document.activeElement;
+  while (current?.shadowRoot?.activeElement) {
+    current = current.shadowRoot.activeElement;
+  }
+  return current;
+}
+function getChildren(node) {
+  const elements = [];
+  for (let child = node.firstElementChild; child; child = child.nextElementSibling) {
+    elements[elements.length] = child;
+  }
+  return elements;
+}
+function getTabIndex(element) {
+  return "tabIndex" in element ? Number(element.tabIndex) : 0;
+}
+function isDisabled(element) {
+  return "disabled" in element && !!element.disabled;
+}
+function isFormControl(element) {
+  const name = element.tagName;
+  return name === "BUTTON" || name === "INPUT" || name === "SELECT" || name === "TEXTAREA";
+}
+function isInert(element) {
+  return "inert" in element && !!element.inert;
+}
+function isUngroupedRadio(element) {
+  return element instanceof HTMLInputElement && element.type === "radio" && !!element.name;
+}
+
+// node_modules/@y14e/roving-tabindex/dist/index.js
+function createRovingTabIndex(container, options = {}) {
+  if (!(container instanceof Element)) {
+    console.warn("Invalid container element");
+    return () => {
+    };
+  }
+  try {
+    const roving = new RovingTabIndex(container, options);
+    return () => roving.destroy();
+  } catch (error) {
+    error instanceof Error && console.warn(error.message || error);
+    return () => {
+    };
+  }
+}
+var RovingTabIndex = class _RovingTabIndex {
+  static #initialized = /* @__PURE__ */ new Set();
+  #container;
+  #settings;
+  #focusables = /* @__PURE__ */ new Set();
+  #focusablesByFirstChar = /* @__PURE__ */ new Map();
+  #selectorFilter;
+  #controller = null;
+  #isDestroyed = false;
+  constructor(container, options = {}) {
+    this.#container = container;
+    let {
+      direction,
+      navigationOnly = false,
+      noMemory = false,
+      noStart = false,
+      selector,
+      typeahead = false,
+      wrap = false
+    } = options;
+    if (typeof direction !== "undefined" && !["horizontal", "vertical"].includes(direction)) {
+      console.warn("Invalid direction option. Fallback: both (undefined).");
+      direction = void 0;
+    }
+    if (typeof navigationOnly !== "boolean") {
+      console.warn("Invalid navigationOnly option. Fallback: false.");
+      navigationOnly = false;
+    }
+    if (typeof noMemory !== "boolean") {
+      console.warn("Invalid noMemory option. Fallback: false.");
+      noMemory = false;
+    }
+    if (typeof noStart !== "boolean") {
+      console.warn("Invalid noStart option. Fallback: false.");
+      noStart = false;
+    }
+    if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
+      console.warn(
+        "Invalid selector. Fallback: all focusable elements (undefined)."
+      );
+      selector = void 0;
+    }
+    if (typeof typeahead !== "boolean") {
+      console.warn("Invalid typeahead option. Fallback: false.");
+      typeahead = false;
+    }
+    if (typeof wrap !== "boolean") {
+      console.warn("Invalid wrap option. Fallback: false.");
+      wrap = false;
+    }
+    this.#settings = {
+      navigationOnly,
+      noMemory,
+      noStart,
+      typeahead,
+      wrap
+    };
+    direction && Object.assign(this.#settings, { direction });
+    selector && Object.assign(this.#settings, { selector });
+    this.#selectorFilter = this.#createSelectorFilter();
+    this.#initialize();
+  }
+  destroy() {
+    if (this.#isDestroyed) {
+      return;
+    }
+    this.#isDestroyed = true;
+    this.#controller?.abort();
+    this.#controller = null;
+    restoreAttributes([...this.#focusables]);
+    this.#focusables.clear();
+    this.#focusablesByFirstChar.clear();
+  }
+  #initialize() {
+    this.#update(getActiveElement());
+    if (!(this.#container instanceof HTMLElement)) {
+      return;
+    }
+    this.#controller = new AbortController();
+    const { signal } = this.#controller;
+    document.addEventListener("focusin", this.#onFocusIn, { signal });
+    this.#settings.noMemory && document.addEventListener("focusout", this.#onFocusOut, { signal });
+    this.#container.addEventListener("keydown", this.#onKeyDown, { signal });
+  }
+  #onFocusIn = (event) => {
+    const { target } = event;
+    if (!(target instanceof Element)) {
+      return;
+    }
+    const isFocusable2 = this.#focusables.has(target);
+    this.#settings.noMemory && !isFocusable2 ? this.#update() : isFocusable2 && this.#update(target);
+  };
+  #onFocusOut = (event) => {
+    if (!event.relatedTarget) {
+      this.#update();
+    }
+  };
+  #onKeyDown = (event) => {
+    const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
+    if (altKey || ctrlKey || metaKey || shiftKey) {
+      return;
+    }
+    const { direction, typeahead, wrap } = this.#settings;
+    const isBoth = !direction;
+    const isHorizontal = direction === "horizontal";
+    if (![
+      "End",
+      "Home",
+      ...isBoth ? ["ArrowLeft", "ArrowUp"] : [`Arrow${isHorizontal ? "Left" : "Up"}`],
+      ...isBoth ? ["ArrowRight", "ArrowDown"] : [`Arrow${isHorizontal ? "Right" : "Down"}`]
+    ].includes(key)) {
+      if (!typeahead || !/^\S$/i.test(key) || !this.#focusablesByFirstChar.has(key.toUpperCase())) {
+        return;
+      }
+    }
+    const active = getActiveElement();
+    if (!(active instanceof HTMLElement)) {
+      return;
+    }
+    const current = this.#getFocusables();
+    if (!current.includes(active)) {
+      return;
+    }
+    event.preventDefault();
+    const currentIndex = current.indexOf(active);
+    let newIndex;
+    let target = current;
+    switch (key) {
+      case "End":
+        newIndex = -1;
+        break;
+      case "Home":
+        newIndex = 0;
+        break;
+      case "ArrowLeft":
+      case "ArrowUp": {
+        const rawIndex = currentIndex - 1;
+        newIndex = wrap ? rawIndex : Math.max(rawIndex, 0);
+        break;
+      }
+      case "ArrowRight":
+      case "ArrowDown": {
+        const rawIndex = currentIndex + 1;
+        newIndex = wrap ? rawIndex % current.length : Math.min(rawIndex, current.length - 1);
+        break;
+      }
+      default: {
+        target = this.#focusablesByFirstChar.get(key.toUpperCase()) ?? [];
+        const foundIndex = target.findIndex(
+          (focusable2) => current.indexOf(focusable2) > currentIndex
+        );
+        newIndex = foundIndex >= 0 ? foundIndex : 0;
+      }
+    }
+    const focusable = target.at(newIndex);
+    focusable && focusElement(focusable);
+  };
+  #update(active) {
+    const current = new Set(this.#getFocusables());
+    for (const focusable of this.#focusables) {
+      if (!current.has(focusable)) {
+        focusable.isConnected && restoreAttributes([focusable]);
+        this.#focusables.delete(focusable);
+        this.#focusablesByFirstChar.forEach((focusables) => {
+          const index = focusables.indexOf(focusable);
+          index >= 0 && focusables.splice(index, 1);
+        });
+      }
+    }
+    const { navigationOnly, noStart, typeahead } = this.#settings;
+    for (const focusable of current) {
+      if (this.#focusables.has(focusable)) {
+        continue;
+      }
+      if (_RovingTabIndex.#initialized.has(focusable)) {
+        throw new TypeError("Already initialized");
+      }
+      this.#focusables.add(focusable);
+      _RovingTabIndex.#initialized.add(focusable);
+      if (!navigationOnly) {
+        saveAttributes([focusable], ["tabindex"]);
+        focusable.setAttribute("tabindex", "-1");
+      }
+      if (!typeahead) {
+        continue;
+      }
+      const char = focusable.textContent?.trim()?.at(0)?.toUpperCase();
+      const value = focusable.ariaKeyShortcuts?.trim();
+      const keys = new Set(
+        value ? value.split(/\s+/).filter((key) => /^\S$/i.test(key)).map((key) => key.toUpperCase()) : []
+      );
+      if (char) {
+        keys.add(char);
+        saveAttributes([focusable], ["aria-keyshortcuts"]);
+        addTokenToAttribute(focusable, "aria-keyshortcuts", char, {
+          caseInsensitive: true
+        });
+      }
+      keys.forEach((key) => {
+        const focusables = this.#focusablesByFirstChar.get(key) ?? [];
+        focusables.push(focusable);
+        this.#focusablesByFirstChar.set(key, focusables);
+      });
+    }
+    if (!navigationOnly) {
+      if (active && this.#focusables.has(active)) {
+        this.#focusables.forEach((focusable) => {
+          focusable.setAttribute("tabindex", focusable === active ? "0" : "-1");
+        });
+      } else {
+        [...this.#focusables].forEach((focusable, i) => {
+          focusable.setAttribute("tabindex", i || noStart ? "-1" : "0");
+        });
+      }
+    }
+  }
+  #createSelectorFilter() {
+    const { selector } = this.#settings;
+    return (element) => !selector || [...this.#container.querySelectorAll(selector)].includes(element);
+  }
+  #getFocusables() {
+    return getFocusables(this.#container, {
+      composed: true,
+      filter: this.#selectorFilter,
+      skipNegativeTabIndexCheck: !this.#settings.navigationOnly,
+      skipVisibilityCheck: true
+    });
+  }
+};
+
+// src/index.ts
+var Disclosure = class {
+  #rootElement;
+  #detailsElements;
+  #summaryElements;
+  #contentElements;
+  #bindings = /* @__PURE__ */ new WeakMap();
+  #cleanupRovingTabIndex = null;
+  #isDestroyed = false;
+  constructor(root) {
+    if (!(root instanceof HTMLElement)) {
+      throw new TypeError("Invalid root element");
+    }
+    if (root.hasAttribute("data-disclosure-initialized")) {
+      console.warn("Already initialized");
+      return;
+    }
+    this.#rootElement = root;
+    const NOT_NESTED = ":not(:scope summary + * *)";
+    this.#detailsElements = [
+      ...this.#rootElement.querySelectorAll(
+        `details${NOT_NESTED}`
+      )
+    ];
+    if (!this.#detailsElements.length) {
+      console.warn("Missing <details> elements");
+      return;
+    }
+    this.#summaryElements = [
+      ...this.#rootElement.querySelectorAll(
+        `summary${NOT_NESTED}`
+      )
+    ];
+    if (!this.#summaryElements.length) {
+      console.warn("Missing <summary> elements");
+      return;
+    }
+    this.#contentElements = [
+      ...this.#rootElement.querySelectorAll(
+        `summary${NOT_NESTED} + *`
+      )
+    ];
+    if (!this.#contentElements.length) {
+      console.warn("Missing content elements");
+      return;
+    }
+    this.#detailsElements.forEach((details, i) => {
+      const summary = this.#summaryElements[i];
+      const content = this.#contentElements[i];
+      if (!summary || !content) {
+        return;
+      }
+      const binding = this.#createBinding(details, summary, content);
+      this.#bindings.set(details, binding);
+      this.#bindings.set(summary, binding);
+      this.#bindings.set(content, binding);
+    });
+    this.#initialize();
+  }
+  close(details) {
+    if (this.#isDestroyed) {
+      return;
+    }
+    if (!(details instanceof HTMLDetailsElement) || !this.#bindings.has(details)) {
+      console.warn("Invalid <details> element");
+      return;
+    }
+    this.#toggle(details, false);
+  }
+  destroy() {
+    if (this.#isDestroyed) {
+      return;
+    }
+    this.#isDestroyed = true;
+    this.#cleanupRovingTabIndex?.();
+    this.#cleanupRovingTabIndex = null;
+    this.#detailsElements.length = 0;
+    restoreAttributes(this.#summaryElements);
+    this.#summaryElements.length = 0;
+    this.#contentElements.length = 0;
+    this.#rootElement.removeAttribute("data-disclosure-initialized");
+  }
+  open(details) {
+    if (this.#isDestroyed) {
+      return;
+    }
+    if (!(details instanceof HTMLDetailsElement) || !this.#bindings.has(details)) {
+      console.warn("Invalid <details> element");
+      return;
+    }
+    this.#toggle(details, true);
+  }
+  #initialize() {
+    saveAttributes(this.#summaryElements, [
+      "aria-disabled",
+      "style",
+      "tabindex"
+    ]);
+    this.#summaryElements.filter((summary) => !this.#isFocusable(summary)).forEach((summary) => {
+      summary.setAttribute("aria-disabled", "true");
+      summary.setAttribute("tabindex", "-1");
+      summary.style.setProperty("pointer-events", "none");
+    });
+    this.#cleanupRovingTabIndex = createRovingTabIndex(this.#rootElement, {
+      direction: "vertical",
+      navigationOnly: true,
+      selector: "summary:not(:scope summary + * *)",
+      wrap: true
+    });
+    this.#rootElement.setAttribute("data-disclosure-initialized", "");
+  }
+  #toggle(details, isOpen) {
+    if (details.open !== isOpen) {
+      details.open = isOpen;
+    }
+  }
+  #createBinding(details, summary, content) {
+    return { details, summary, content };
+  }
+  #isFocusable(element) {
+    return element.tabIndex >= 0;
+  }
+};
+/**
+ * Disclosure (CSS Animation)
+ * WAI-ARIA compliant disclosure pattern implementation in TypeScript.
+ * Using the <details> and <summary> element.
+ *
+ * @version 1.3.12
+ * @author Yusuke Kamiyamane
+ * @license MIT
+ * @copyright Copyright (c) Yusuke Kamiyamane
+ * @see {@link https://github.com/y14e/disclosure-css}
+ */
+/*! Bundled license information:
+
+@y14e/attributes-utils/dist/index.js:
+  (**
+   * Attributes Utils
+   *
+   * @version 1.1.2
+   * @author Yusuke Kamiyamane
+   * @license MIT
+   * @copyright Copyright (c) Yusuke Kamiyamane
+   * @see {@link https://github.com/y14e/attributes-utils}
+   *)
+
+power-focusable/dist/index.js:
+  (**
+   * Power Focusable
+   * High-precision focus management utility with full composed tree support.
+   * Handles complex focus rules including tabindex ordering, radio groups, inert.
+   *
+   * @version 4.3.5
+   * @author Yusuke Kamiyamane
+   * @license MIT
+   * @copyright Copyright (c) Yusuke Kamiyamane
+   * @see {@link https://github.com/y14e/power-focusable}
+   *)
+
+@y14e/roving-tabindex/dist/index.js:
+  (**
+   * Roving Tabindex
+   * Lightweight roving tabindex utility with fully focus management.
+   * Designed for accessible menus, tabs, toolbars, and composite widgets.
+   *
+   * @version 3.1.2
+   * @author Yusuke Kamiyamane
+   * @license MIT
+   * @copyright Copyright (c) Yusuke Kamiyamane
+   * @see {@link https://github.com/y14e/roving-tabindex}
+   *)
+*/
+
+module.exports = Disclosure;