@y14e/disclosure-css 2.1.3 → 2.2.1

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,193 @@ 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;
+  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 isFormControl(element) {
-  return ["BUTTON", "INPUT", "SELECT", "TEXTAREA"].includes(element.tagName);
+
+// node_modules/@y14e/roving-tabindex/dist/index.js
+function getCellCoords(cell) {
+  const { left, top, width, height } = cell.getBoundingClientRect();
+  return { x: left + width / 2, y: top + height / 2 };
 }
-function isInert(element) {
-  return "inert" in element && !!element.inert;
+function getCellsOfActiveRow(cells) {
+  const active = getActiveElement();
+  if (!(active instanceof Element)) {
+    return [];
+  }
+  const activeRect = active.getBoundingClientRect();
+  return cells.filter((cell) => {
+    const cellRect = cell.getBoundingClientRect();
+    return cellRect.top < activeRect.bottom && cellRect.bottom > activeRect.top;
+  });
 }
-function isUngroupedRadio(element) {
-  return element.type === "radio" && !!element.name;
+function getNextCell(cells, key, wrap) {
+  const active = getActiveElement();
+  if (!(active instanceof Element)) {
+    return null;
+  }
+  const activeCoords = getCellCoords(active);
+  let min = Infinity;
+  let result = null;
+  for (const cell of cells) {
+    if (cell === active) {
+      continue;
+    }
+    const cellCoords = getCellCoords(cell);
+    const distances = {
+      x: Math.abs(cellCoords.x - activeCoords.x),
+      y: Math.abs(cellCoords.y - activeCoords.y)
+    };
+    if (key === "ArrowUp" && cellCoords.y < activeCoords.y && distances.x < distances.y || key === "ArrowDown" && cellCoords.y > activeCoords.y && distances.x < distances.y) {
+      const distance = distances.x ** 2 + distances.y ** 2;
+      if (distance < min) {
+        min = distance;
+        result = cell;
+      }
+    }
+  }
+  if (!result && wrap) {
+    let max = -Infinity;
+    for (const cell of cells) {
+      if (cell === active) {
+        continue;
+      }
+      const cellCoords = getCellCoords(cell);
+      if (Math.abs(cellCoords.x - activeCoords.x) < cell.getBoundingClientRect().width / 2) {
+        const distance = key === "ArrowUp" ? cellCoords.y - activeCoords.y : activeCoords.y - cellCoords.y;
+        if (distance > max) {
+          max = distance;
+          result = cell;
+        }
+      }
+    }
+  }
+  return result;
 }
-function resolveOptions2(options) {
+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 +476,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();
   }
@@ -547,20 +657,8 @@ var RovingTabIndex = class _RovingTabIndex {
     const { selector } = this.#settings;
     return (element) => !selector || [...this.#container.querySelectorAll(selector)].includes(element);
   }
-  #getCellCoords(cell) {
-    const { left, top, width, height } = cell.getBoundingClientRect();
-    return { x: left + width / 2, y: top + height / 2 };
-  }
   #getCellsOfActiveRow() {
-    const active = getActiveElement();
-    if (!(active instanceof Element)) {
-      return [];
-    }
-    const activeRect = active.getBoundingClientRect();
-    return this.#getFocusables().filter((cell) => {
-      const cellRect = cell.getBoundingClientRect();
-      return cellRect.top < activeRect.bottom && cellRect.bottom > activeRect.top;
-    });
+    return getCellsOfActiveRow(this.#getFocusables());
   }
   #getFocusables() {
     return getFocusables(this.#container, {
@@ -571,111 +669,28 @@ var RovingTabIndex = class _RovingTabIndex {
     });
   }
   #getNextCell(key, wrap) {
-    const cells = this.#getFocusables();
-    const active = getActiveElement();
-    if (!(active instanceof Element)) {
-      return null;
-    }
-    const activeCoords = this.#getCellCoords(active);
-    let min = Infinity;
-    let result = null;
-    for (const cell of cells) {
-      if (cell === active) {
-        continue;
-      }
-      const cellCoords = this.#getCellCoords(cell);
-      const distances = {
-        x: Math.abs(cellCoords.x - activeCoords.x),
-        y: Math.abs(cellCoords.y - activeCoords.y)
-      };
-      if (key === "ArrowUp" && cellCoords.y < activeCoords.y && distances.x < distances.y || key === "ArrowDown" && cellCoords.y > activeCoords.y && distances.x < distances.y) {
-        const distance = distances.x ** 2 + distances.y ** 2;
-        if (distance < min) {
-          min = distance;
-          result = cell;
-        }
-      }
-    }
-    if (!result && wrap) {
-      let max = -Infinity;
-      for (const cell of cells) {
-        if (cell === active) {
-          continue;
-        }
-        const cellCoords = this.#getCellCoords(cell);
-        if (Math.abs(cellCoords.x - activeCoords.x) < cell.getBoundingClientRect().width / 2) {
-          const distance = key === "ArrowUp" ? cellCoords.y - activeCoords.y : activeCoords.y - cellCoords.y;
-          if (distance > max) {
-            max = distance;
-            result = cell;
-          }
-        }
-      }
-    }
-    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
-    };
+    return getNextCell(this.#getFocusables(), key, wrap);
   }
 };
 
+// src/defaults.ts
+var defaults = { collapsible: true };
+
+// src/options.ts
+function resolveOptions4(defaults2, source) {
+  const merged = { ...defaults2, ...source };
+  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 = { collapsible: true };
   #settings;
   #detailsElements;
   #summaryElements;
@@ -693,8 +708,10 @@ var Disclosure = class _Disclosure {
       return;
     }
     this.#rootElement = root;
-    this.#defaults = this.#resolveOptions(this.#defaults, _Disclosure.defaults);
-    this.#settings = this.#resolveOptions(this.#defaults, options);
+    this.#settings = resolveOptions4(
+      resolveOptions4(defaults, _Disclosure.defaults),
+      options
+    );
     const NOT_NESTED = ":not(:scope summary + * *)";
     this.#detailsElements = [
       ...this.#rootElement.querySelectorAll(
@@ -823,15 +840,6 @@ var Disclosure = class _Disclosure {
   #isFocusable(element) {
     return element.tabIndex >= 0;
   }
-  #resolveOptions(target, source) {
-    const merged = { ...target, ...source };
-    if (typeof merged.collapsible !== "boolean") {
-      const collapsible = this.#defaults.collapsible;
-      console.warn(`Invalid collapsible option. Fallback: ${collapsible}.`);
-      merged.collapsible = collapsible;
-    }
-    return merged;
-  }
 };
 
 export { Disclosure };

package/dist/index.cjs

@@ -3,11 +3,26 @@
 var attributeUtils = require('@y14e/attribute-utils');
 var rovingTabindex = require('@y14e/roving-tabindex');
 
+// src/index.ts
+
+// src/defaults.ts
+var defaults = { collapsible: true };
+
+// src/options.ts
+function resolveOptions(defaults2, source) {
+  const merged = { ...defaults2, ...source };
+  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 = { collapsible: true };
   #settings;
   #detailsElements;
   #summaryElements;
@@ -25,8 +40,10 @@ var Disclosure = class _Disclosure {
       return;
     }
     this.#rootElement = root;
-    this.#defaults = this.#resolveOptions(this.#defaults, _Disclosure.defaults);
-    this.#settings = this.#resolveOptions(this.#defaults, options);
+    this.#settings = resolveOptions(
+      resolveOptions(defaults, _Disclosure.defaults),
+      options
+    );
     const NOT_NESTED = ":not(:scope summary + * *)";
     this.#detailsElements = [
       ...this.#rootElement.querySelectorAll(
@@ -155,15 +172,6 @@ var Disclosure = class _Disclosure {
   #isFocusable(element) {
     return element.tabIndex >= 0;
   }
-  #resolveOptions(target, source) {
-    const merged = { ...target, ...source };
-    if (typeof merged.collapsible !== "boolean") {
-      const collapsible = this.#defaults.collapsible;
-      console.warn(`Invalid collapsible option. Fallback: ${collapsible}.`);
-      merged.collapsible = collapsible;
-    }
-    return merged;
-  }
 };
 
 exports.Disclosure = Disclosure;