@y14e/disclosure 2.1.4 → 2.2.0

package/dist/index.bundle.js

@@ -89,81 +89,105 @@ function resolveOptions(options) {
 }
 
 // node_modules/power-focusable/dist/index.js
+function getComposedChildren(node) {
+  if (node instanceof ShadowRoot) {
+    return [...node.children];
+  }
+  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 [...node.shadowRoot.children];
+  }
+  return [...node.children];
+}
 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"])';
-var FOCUSABLE_SELECTOR_WITH_NEGATIVE_TABINDEX = FOCUSABLE_SELECTOR.replace(
-  /(,\s*)?\[tabindex="-1"\]/g,
-  ""
-);
-function getFocusables(container = document.body, options = {}) {
-  if (!(container instanceof Element)) {
-    console.warn("Invalid container element. Fallback: <body> element.");
-    container = document.body;
+var FOCUSABLE_SELECTOR_WITH_NEGATIVE_TABINDEX = FOCUSABLE_SELECTOR.replace(/(,\s*)?\[tabindex="-1"\]/g, "");
+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;
   }
-  const {
-    composed,
+  return current;
+}
+function getTabIndex(element) {
+  return "tabIndex" in element ? Number(element.tabIndex) : 0;
+}
+function isDisabled(element) {
+  return "disabled" in element && !!element.disabled;
+}
+function isFormControl(element) {
+  return ["BUTTON", "INPUT", "SELECT", "TEXTAREA"].includes(element.tagName);
+}
+function isInert(element) {
+  return "inert" in element && !!element.inert;
+}
+function isUngroupedRadio(element) {
+  return element.type === "radio" && !!element.name;
+}
+function resolveOptions2(options) {
+  let {
+    anchor = getActiveElement(),
+    composed = false,
     filter,
     include,
-    skipNegativeTabIndexCheck,
-    skipVisibilityCheck
-  } = resolveOptions2(options);
-  const candidates = [];
-  if (!composed && !include) {
-    for (const match of container.querySelectorAll(
-      !skipNegativeTabIndexCheck ? FOCUSABLE_SELECTOR : FOCUSABLE_SELECTOR_WITH_NEGATIVE_TABINDEX
-    )) {
-      match && isFocusable(match, {
-        skipNegativeTabIndexCheck,
-        skipVisibilityCheck
-      }) && candidates.push(match);
+    skipNegativeTabIndexCheck = false,
+    skipVisibilityCheck = false,
+    wrap = false
+  } = options;
+  if (!(anchor instanceof Element)) {
+    const active = getActiveElement();
+    if (active instanceof Element) {
+      console.warn("Invalid anchor element. Fallback: active element.");
+      anchor = active;
     }
-  } else {
-    let traverse2 = function(node) {
-      if (isFocusable(node, {
-        skipNegativeTabIndexCheck,
-        skipVisibilityCheck
-      }) || include?.(node)) {
-        candidates.push(node);
-      }
-      (!composed ? [...node.children] : getComposedChildren(node)).map(
-        traverse2
-      );
-    };
-    (!composed ? [...container.children] : getComposedChildren(container)).map(
-      traverse2
-    );
   }
-  return normalizeRadioGroup(
-    sortByTabIndex(!filter ? candidates : candidates.filter(filter))
-  );
-}
-function isFocusable(element, options = {}) {
-  if (!(element instanceof Element)) {
-    console.warn("Invalid element");
-    return false;
+  if (typeof composed !== "boolean") {
+    console.warn("Invalid composed option. Fallback: false.");
+    composed = false;
   }
-  const { skipNegativeTabIndexCheck, skipVisibilityCheck } = resolveOptions2(options);
-  if (element.hasAttribute("hidden") || isInert(element)) {
-    return false;
+  if (filter !== void 0 && typeof filter !== "function") {
+    console.warn(
+      "Invalid filter function. Fallback: no filter function (undefined)."
+    );
+    filter = void 0;
   }
-  if (!skipNegativeTabIndexCheck && getTabIndex(element) < 0) {
-    return false;
+  if (include !== void 0 && typeof include !== "function") {
+    console.warn(
+      "Invalid include function. Fallback: no include function (undefined)."
+    );
+    include = void 0;
   }
-  if (!element.matches(
-    !skipNegativeTabIndexCheck ? FOCUSABLE_SELECTOR : FOCUSABLE_SELECTOR_WITH_NEGATIVE_TABINDEX
-  )) {
-    return false;
+  if (typeof skipNegativeTabIndexCheck !== "boolean") {
+    console.warn("Invalid skipNegativeTabIndexCheck option. Fallback: false.");
+    skipNegativeTabIndexCheck = false;
   }
-  if (isDisabledDeep(element)) {
-    return false;
+  if (typeof skipVisibilityCheck !== "boolean") {
+    console.warn("Invalid skipVisibilityCheck option. Fallback: false.");
+    skipVisibilityCheck = false;
   }
-  if (!skipVisibilityCheck && !element.checkVisibility({
-    contentVisibilityAuto: true,
-    opacityProperty: true,
-    visibilityProperty: true
-  })) {
-    return false;
+  if (typeof wrap !== "boolean") {
+    console.warn("Invalid wrap option. Fallback: false.");
+    wrap = false;
   }
-  return true;
+  return {
+    anchor,
+    composed,
+    filter,
+    include,
+    skipNegativeTabIndexCheck,
+    skipVisibilityCheck,
+    wrap
+  };
 }
 function isDisabledDeep(element) {
   let current = element;
@@ -245,107 +269,135 @@ function sortByTabIndex(elements) {
   }
   return ordered.sort((a, b) => getTabIndex(a) - getTabIndex(b)).concat(natural);
 }
-function getComposedChildren(node) {
-  if (node instanceof ShadowRoot) {
-    return [...node.children];
-  }
-  if (!(node instanceof Element)) {
-    return [];
+function getFocusables(container = document.body, options = {}) {
+  if (!(container instanceof Element)) {
+    console.warn("Invalid container element. Fallback: <body> element.");
+    container = document.body;
   }
-  if (node instanceof HTMLSlotElement) {
-    const assigned = node.assignedElements({ flatten: true });
-    if (assigned.length) {
-      return assigned;
+  const {
+    composed,
+    filter,
+    include,
+    skipNegativeTabIndexCheck,
+    skipVisibilityCheck
+  } = resolveOptions2(options);
+  const candidates = [];
+  if (!composed && !include) {
+    for (const match of container.querySelectorAll(
+      !skipNegativeTabIndexCheck ? FOCUSABLE_SELECTOR : FOCUSABLE_SELECTOR_WITH_NEGATIVE_TABINDEX
+    )) {
+      match && isFocusable(match, {
+        skipNegativeTabIndexCheck,
+        skipVisibilityCheck
+      }) && candidates.push(match);
     }
+  } else {
+    let traverse2 = function(node) {
+      if (isFocusable(node, {
+        skipNegativeTabIndexCheck,
+        skipVisibilityCheck
+      }) || include?.(node)) {
+        candidates.push(node);
+      }
+      (!composed ? [...node.children] : getComposedChildren(node)).map(
+        traverse2
+      );
+    };
+    (!composed ? [...container.children] : getComposedChildren(container)).map(
+      traverse2
+    );
   }
-  if (node instanceof HTMLElement && node.shadowRoot?.mode === "open") {
-    return [...node.shadowRoot.children];
-  }
-  return [...node.children];
-}
-function focusElement(element) {
-  "focus" in element && typeof element.focus === "function" && element.focus();
+  return normalizeRadioGroup(
+    sortByTabIndex(!filter ? candidates : candidates.filter(filter))
+  );
 }
-function getActiveElement() {
-  let current = document.activeElement;
-  while (current?.shadowRoot?.activeElement) {
-    current = current.shadowRoot.activeElement;
+function isFocusable(element, options = {}) {
+  if (!(element instanceof Element)) {
+    console.warn("Invalid element");
+    return false;
   }
-  return current;
-}
-function getTabIndex(element) {
-  return "tabIndex" in element ? Number(element.tabIndex) : 0;
-}
-function isDisabled(element) {
-  return "disabled" in element && !!element.disabled;
-}
-function isFormControl(element) {
-  return ["BUTTON", "INPUT", "SELECT", "TEXTAREA"].includes(element.tagName);
-}
-function isInert(element) {
-  return "inert" in element && !!element.inert;
-}
-function isUngroupedRadio(element) {
-  return element.type === "radio" && !!element.name;
+  const { skipNegativeTabIndexCheck, skipVisibilityCheck } = resolveOptions2(options);
+  if (element.hasAttribute("hidden") || isInert(element)) {
+    return false;
+  }
+  if (!skipNegativeTabIndexCheck && getTabIndex(element) < 0) {
+    return false;
+  }
+  if (!element.matches(
+    !skipNegativeTabIndexCheck ? FOCUSABLE_SELECTOR : FOCUSABLE_SELECTOR_WITH_NEGATIVE_TABINDEX
+  )) {
+    return false;
+  }
+  if (isDisabledDeep(element)) {
+    return false;
+  }
+  if (!skipVisibilityCheck && !element.checkVisibility({
+    contentVisibilityAuto: true,
+    opacityProperty: true,
+    visibilityProperty: true
+  })) {
+    return false;
+  }
+  return true;
 }
-function resolveOptions2(options) {
+
+// node_modules/@y14e/roving-tabindex/dist/index.js
+var DIRECTIONS = ["both", "grid", "horizontal", "vertical"];
+function resolveOptions3(options) {
   let {
-    anchor = getActiveElement(),
-    composed = false,
-    filter,
-    include,
-    skipNegativeTabIndexCheck = false,
-    skipVisibilityCheck = false,
+    direction = "both",
+    navigationOnly = false,
+    noMemory = false,
+    noStart = false,
+    selector = "",
+    typeahead = false,
     wrap = false
   } = options;
-  if (!(anchor instanceof Element)) {
-    const active = getActiveElement();
-    if (active instanceof Element) {
-      console.warn("Invalid anchor element. Fallback: active element.");
-      anchor = active;
-    }
+  if (typeof direction === "string") {
+    direction = direction.toLowerCase();
   }
-  if (typeof composed !== "boolean") {
-    console.warn("Invalid composed option. Fallback: false.");
-    composed = false;
+  if (!DIRECTIONS.includes(direction)) {
+    console.warn("Invalid direction option. Fallback: 'both'.");
+    direction = "both";
   }
-  if (filter !== void 0 && typeof filter !== "function") {
-    console.warn(
-      "Invalid filter function. Fallback: no filter function (undefined)."
-    );
-    filter = void 0;
+  if (typeof navigationOnly !== "boolean") {
+    console.warn("Invalid navigationOnly option. Fallback: false.");
+    navigationOnly = false;
   }
-  if (include !== void 0 && typeof include !== "function") {
-    console.warn(
-      "Invalid include function. Fallback: no include function (undefined)."
-    );
-    include = void 0;
+  if (typeof noMemory !== "boolean") {
+    console.warn("Invalid noMemory option. Fallback: false.");
+    noMemory = false;
   }
-  if (typeof skipNegativeTabIndexCheck !== "boolean") {
-    console.warn("Invalid skipNegativeTabIndexCheck option. Fallback: false.");
-    skipNegativeTabIndexCheck = false;
+  if (typeof noStart !== "boolean") {
+    console.warn("Invalid noStart option. Fallback: false.");
+    noStart = false;
   }
-  if (typeof skipVisibilityCheck !== "boolean") {
-    console.warn("Invalid skipVisibilityCheck option. Fallback: false.");
-    skipVisibilityCheck = false;
+  if (selector !== "") {
+    try {
+      document.querySelector(selector);
+    } catch {
+      console.warn("Invalid selector. Fallback: no selector string.");
+      selector = "";
+    }
+  }
+  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;
   }
   return {
-    anchor,
-    composed,
-    filter,
-    include,
-    skipNegativeTabIndexCheck,
-    skipVisibilityCheck,
+    direction,
+    navigationOnly,
+    noMemory,
+    noStart,
+    selector,
+    typeahead,
     wrap
   };
 }
-
-// node_modules/@y14e/roving-tabindex/dist/index.js
-var DIRECTIONS = ["both", "grid", "horizontal", "vertical"];
 function createRovingTabIndex(container, options = {}) {
   if (!(container instanceof Element)) {
     console.warn("Invalid container element");
@@ -366,7 +418,7 @@ var RovingTabIndex = class _RovingTabIndex {
   #isDestroyed = false;
   constructor(container, options = {}) {
     this.#container = container;
-    this.#settings = this.#resolveOptions(options);
+    this.#settings = resolveOptions3(options);
     this.#selectorFilter = this.#createSelectorFilter();
     this.#initialize();
   }
@@ -614,74 +666,54 @@ var RovingTabIndex = class _RovingTabIndex {
     }
     return result;
   }
-  #resolveOptions(options) {
-    let {
-      direction = "both",
-      navigationOnly = false,
-      noMemory = false,
-      noStart = false,
-      selector = "",
-      typeahead = false,
-      wrap = false
-    } = options;
-    if (typeof direction === "string") {
-      direction = direction.toLowerCase();
-    }
-    if (!DIRECTIONS.includes(direction)) {
-      console.warn("Invalid direction option. Fallback: 'both'.");
-      direction = "both";
-    }
-    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 (selector !== "") {
-      try {
-        document.querySelector(selector);
-      } catch {
-        console.warn("Invalid selector. Fallback: no selector string.");
-        selector = "";
-      }
-    }
-    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;
-    }
-    return {
-      direction,
-      navigationOnly,
-      noMemory,
-      noStart,
-      selector,
-      typeahead,
-      wrap
-    };
-  }
 };
 
+// src/defaults.ts
+var defaults = {
+  animation: {
+    duration: 300,
+    easing: "ease"
+  },
+  collapsible: true
+};
+
+// src/options.ts
+function resolveOptions4(defaults2, source) {
+  const merged = {
+    ...defaults2,
+    ...source,
+    animation: { ...defaults2.animation, ...source.animation ?? {} }
+  };
+  const mergedAnimation = merged.animation;
+  const duration = mergedAnimation.duration;
+  const defaultAnimation = defaults2.animation;
+  if (typeof duration !== "number" || Number.isNaN(duration)) {
+    const duration2 = defaultAnimation.duration;
+    console.warn(`Invalid animation duration. Fallback: ${duration2} (ms).`);
+    mergedAnimation.duration = duration2;
+  }
+  if (duration < 0) {
+    console.warn("Invalid animation duration. Fallback: 0 (ms).");
+    mergedAnimation.duration = 0;
+  }
+  if (!CSS.supports("animation-timing-function", mergedAnimation.easing)) {
+    const easing = defaultAnimation.easing;
+    console.warn(`Invalid animation easing. Fallback: '${easing}'.`);
+    mergedAnimation.easing = easing;
+  }
+  if (typeof merged.collapsible !== "boolean") {
+    const collapsible = defaults2.collapsible;
+    console.warn(`Invalid collapsible option. Fallback: ${collapsible}.`);
+    merged.collapsible = collapsible;
+  }
+  return merged;
+}
+
 // src/index.ts
 var Disclosure = class _Disclosure {
   static defaults = {};
   #rootElement;
-  #defaults = {
-    animation: {
-      duration: 300,
-      easing: "ease"
-    },
-    collapsible: true
-  };
+  #defaults = defaults;
   #settings;
   #detailsElements;
   #summaryElements;
@@ -701,8 +733,8 @@ var Disclosure = class _Disclosure {
       return;
     }
     this.#rootElement = root;
-    this.#defaults = this.#resolveOptions(this.#defaults, _Disclosure.defaults);
-    this.#settings = this.#resolveOptions(this.#defaults, options);
+    this.#defaults = resolveOptions4(this.#defaults, _Disclosure.defaults);
+    this.#settings = resolveOptions4(this.#defaults, options);
     matchMedia("(prefers-reduced-motion: reduce)").matches && Object.assign(this.#settings.animation, { duration: 0 });
     const NOT_NESTED = ":not(:scope summary + * *)";
     this.#detailsElements = [
@@ -925,37 +957,6 @@ var Disclosure = class _Disclosure {
   #isFocusable(element) {
     return element.tabIndex >= 0;
   }
-  #resolveOptions(target, source) {
-    const merged = {
-      ...target,
-      ...source,
-      animation: { ...target.animation, ...source.animation ?? {} }
-    };
-    const mergedAnimation = merged.animation;
-    const duration = mergedAnimation.duration;
-    const defaults = this.#defaults;
-    const defaultAnimation = defaults.animation;
-    if (typeof duration !== "number" || Number.isNaN(duration)) {
-      const duration2 = defaultAnimation.duration;
-      console.warn(`Invalid animation duration. Fallback: ${duration2} (ms).`);
-      mergedAnimation.duration = duration2;
-    }
-    if (duration < 0) {
-      console.warn("Invalid animation duration. Fallback: 0 (ms).");
-      mergedAnimation.duration = 0;
-    }
-    if (!CSS.supports("animation-timing-function", mergedAnimation.easing)) {
-      const easing = defaultAnimation.easing;
-      console.warn(`Invalid animation easing. Fallback: '${easing}'.`);
-      mergedAnimation.easing = easing;
-    }
-    if (typeof merged.collapsible !== "boolean") {
-      const collapsible = defaults.collapsible;
-      console.warn(`Invalid collapsible option. Fallback: ${collapsible}.`);
-      merged.collapsible = collapsible;
-    }
-    return merged;
-  }
   async #waitAnimationsFinish() {
     const promises = [];
     for (const content of this.#contentElements) {

package/dist/index.cjs

@@ -3,17 +3,54 @@
 var attributeUtils = require('@y14e/attribute-utils');
 var rovingTabindex = require('@y14e/roving-tabindex');
 
+// src/index.ts
+
+// src/defaults.ts
+var defaults = {
+  animation: {
+    duration: 300,
+    easing: "ease"
+  },
+  collapsible: true
+};
+
+// src/options.ts
+function resolveOptions(defaults2, source) {
+  const merged = {
+    ...defaults2,
+    ...source,
+    animation: { ...defaults2.animation, ...source.animation ?? {} }
+  };
+  const mergedAnimation = merged.animation;
+  const duration = mergedAnimation.duration;
+  const defaultAnimation = defaults2.animation;
+  if (typeof duration !== "number" || Number.isNaN(duration)) {
+    const duration2 = defaultAnimation.duration;
+    console.warn(`Invalid animation duration. Fallback: ${duration2} (ms).`);
+    mergedAnimation.duration = duration2;
+  }
+  if (duration < 0) {
+    console.warn("Invalid animation duration. Fallback: 0 (ms).");
+    mergedAnimation.duration = 0;
+  }
+  if (!CSS.supports("animation-timing-function", mergedAnimation.easing)) {
+    const easing = defaultAnimation.easing;
+    console.warn(`Invalid animation easing. Fallback: '${easing}'.`);
+    mergedAnimation.easing = easing;
+  }
+  if (typeof merged.collapsible !== "boolean") {
+    const collapsible = defaults2.collapsible;
+    console.warn(`Invalid collapsible option. Fallback: ${collapsible}.`);
+    merged.collapsible = collapsible;
+  }
+  return merged;
+}
+
 // src/index.ts
 var Disclosure = class _Disclosure {
   static defaults = {};
   #rootElement;
-  #defaults = {
-    animation: {
-      duration: 300,
-      easing: "ease"
-    },
-    collapsible: true
-  };
+  #defaults = defaults;
   #settings;
   #detailsElements;
   #summaryElements;
@@ -33,8 +70,8 @@ var Disclosure = class _Disclosure {
       return;
     }
     this.#rootElement = root;
-    this.#defaults = this.#resolveOptions(this.#defaults, _Disclosure.defaults);
-    this.#settings = this.#resolveOptions(this.#defaults, options);
+    this.#defaults = resolveOptions(this.#defaults, _Disclosure.defaults);
+    this.#settings = resolveOptions(this.#defaults, options);
     matchMedia("(prefers-reduced-motion: reduce)").matches && Object.assign(this.#settings.animation, { duration: 0 });
     const NOT_NESTED = ":not(:scope summary + * *)";
     this.#detailsElements = [
@@ -257,37 +294,6 @@ var Disclosure = class _Disclosure {
   #isFocusable(element) {
     return element.tabIndex >= 0;
   }
-  #resolveOptions(target, source) {
-    const merged = {
-      ...target,
-      ...source,
-      animation: { ...target.animation, ...source.animation ?? {} }
-    };
-    const mergedAnimation = merged.animation;
-    const duration = mergedAnimation.duration;
-    const defaults = this.#defaults;
-    const defaultAnimation = defaults.animation;
-    if (typeof duration !== "number" || Number.isNaN(duration)) {
-      const duration2 = defaultAnimation.duration;
-      console.warn(`Invalid animation duration. Fallback: ${duration2} (ms).`);
-      mergedAnimation.duration = duration2;
-    }
-    if (duration < 0) {
-      console.warn("Invalid animation duration. Fallback: 0 (ms).");
-      mergedAnimation.duration = 0;
-    }
-    if (!CSS.supports("animation-timing-function", mergedAnimation.easing)) {
-      const easing = defaultAnimation.easing;
-      console.warn(`Invalid animation easing. Fallback: '${easing}'.`);
-      mergedAnimation.easing = easing;
-    }
-    if (typeof merged.collapsible !== "boolean") {
-      const collapsible = defaults.collapsible;
-      console.warn(`Invalid collapsible option. Fallback: ${collapsible}.`);
-      merged.collapsible = collapsible;
-    }
-    return merged;
-  }
   async #waitAnimationsFinish() {
     const promises = [];
     for (const content of this.#contentElements) {

package/dist/index.d.cts

@@ -5,6 +5,7 @@ interface DisclosureOptions {
     };
     collapsible: boolean;
 }
+
 declare class Disclosure {
     #private;
     static defaults: Partial<DisclosureOptions>;

package/dist/index.d.ts

@@ -5,6 +5,7 @@ interface DisclosureOptions {
     };
     collapsible: boolean;
 }
+
 declare class Disclosure {
     #private;
     static defaults: Partial<DisclosureOptions>;