@y14e/tabs 2.0.1 → 2.0.3

package/dist/index.d.cts

@@ -2,7 +2,7 @@
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.1
+ * @version 2.0.3
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.ts

@@ -2,7 +2,7 @@
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.1
+ * @version 2.0.3
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.js

@@ -1,578 +1,6 @@
-// node_modules/@y14e/button/dist/index.js
-var Button = class {
-  #element;
-  #controller = null;
-  #isDestroyed = false;
-  constructor(element) {
-    if (!(element instanceof HTMLElement)) {
-      throw new TypeError("Invalid element");
-    }
-    if (element.hasAttribute("data-button-initialized")) {
-      console.warn("Already initialized");
-      return;
-    }
-    this.#element = element;
-    this.#initialize();
-  }
-  destroy() {
-    if (this.#isDestroyed) {
-      return;
-    }
-    this.#isDestroyed = true;
-    this.#controller?.abort();
-    this.#controller = null;
-    this.#element.removeAttribute("data-button-initialized");
-  }
-  #initialize() {
-    this.#controller = new AbortController();
-    this.#element.addEventListener("keydown", this.#onKeyDown, {
-      signal: this.#controller.signal
-    });
-    this.#element.setAttribute("data-button-initialized", "");
-  }
-  #onKeyDown = (event) => {
-    const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
-    if (altKey || ctrlKey || metaKey || shiftKey) {
-      return;
-    }
-    if (!["Enter", " "].includes(key)) {
-      return;
-    }
-    const active = getActiveElement();
-    if (!(active instanceof HTMLElement)) {
-      return;
-    }
-    event.preventDefault();
-    active.click();
-  };
-};
-function getActiveElement() {
-  let current = document.activeElement;
-  while (current?.shadowRoot?.activeElement) {
-    current = current.shadowRoot.activeElement;
-  }
-  return current;
-}
-
-// node_modules/@y14e/roving-tabindex/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));
-    });
-  });
-}
-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 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;
-}
-function createRovingTabIndex(container, options = {}) {
-  if (!(container instanceof Element)) {
-    console.warn("Invalid container element");
-    return () => {
-    };
-  }
-  const roving = new RovingTabIndex(container, options);
-  return () => roving.destroy();
-}
-var RovingTabIndex = class {
-  #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();
-    this.#container.removeAttribute("data-roving-tabindex-initialized");
-  }
-  #initialize() {
-    this.#update(document.activeElement);
-    this.#controller = new AbortController();
-    const { signal } = this.#controller;
-    document.addEventListener("focusin", this.#onFocusIn, {
-      capture: true,
-      signal
-    });
-    document.addEventListener("keydown", this.#onKeyDown, {
-      capture: true,
-      signal
-    });
-    this.#container.setAttribute("data-roving-tabindex-initialized", "");
-  }
-  #onFocusIn = (event) => {
-    const { target } = event;
-    if (!(target instanceof Element)) {
-      return;
-    }
-    const isFocusable22 = this.#focusables.has(target);
-    this.#settings.noMemory && !isFocusable22 ? this.#update(null) : isFocusable22 && this.#update(target);
-  };
-  #onKeyDown = (event) => {
-    if (!event.composedPath().includes(this.#container)) {
-      return;
-    }
-    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 = getActiveElement2();
-    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;
-      }
-      this.#focusables.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
-    });
-  }
-};
-function focusElement(element) {
-  "focus" in element && typeof element.focus === "function" && element.focus();
-}
-function getActiveElement2() {
-  let current = document.activeElement;
-  while (current?.shadowRoot?.activeElement) {
-    current = current.shadowRoot.activeElement;
-  }
-  return current;
-}
+import { restoreAttributes, saveAttributes, addTokenToAttribute } from '@y14e/attributes-utils';
+import Button from '@y14e/button';
+import { createRovingTabIndex } from '@y14e/roving-tabindex';
 
 // src/index.ts
 var Tabs = class _Tabs {
@@ -736,7 +164,7 @@ var Tabs = class _Tabs {
         p.removeAttribute("hidden");
       } else {
         const tab2 = this.#tabElements[i];
-        tab2 && p.setAttribute("hidden", isFocusable2(tab2) ? "until-found" : "");
+        tab2 && p.setAttribute("hidden", isFocusable(tab2) ? "until-found" : "");
       }
     });
     this.#animation?.cancel();
@@ -904,7 +332,7 @@ var Tabs = class _Tabs {
         tab.id ||= `tabs-tab-${id}`;
       }
       tab.setAttribute("role", "tab");
-      !isFocusable2(tab) && tab.style.setProperty("pointer-events", "none");
+      !isFocusable(tab) && tab.style.setProperty("pointer-events", "none");
       addTokenToAttribute(panel, "aria-labelledby", tab.id);
       tab.addEventListener("click", this.#onTabClick, { signal });
       tab.addEventListener("focus", this.#onTabFocus, { signal });
@@ -1086,70 +514,18 @@ function hasFocusable(container) {
     )
   ].filter((element) => element.checkVisibility()).length;
 }
-function isFocusable2(element) {
+function isFocusable(element) {
   return !element.hasAttribute("disabled");
 }
 /**
  * Tabs
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
  *
- * @version 2.0.1
+ * @version 2.0.3
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
  * @see {@link https://github.com/y14e/tabs}
  */
-/*! Bundled license information:
-
-@y14e/button/dist/index.js:
-  (**
-   * Button
-   *
-   * @version 1.0.2
-   * @author Yusuke Kamiyamane
-   * @license MIT
-   * @copyright Copyright (c) Yusuke Kamiyamane
-   * @see {@link https://github.com/y14e/button}
-   *)
-
-@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.0.7
-   * @author Yusuke Kamiyamane
-   * @license MIT
-   * @copyright Copyright (c) Yusuke Kamiyamane
-   * @see {@link https://github.com/y14e/roving-tabindex}
-   *)
-  (*! 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.3
-     * @author Yusuke Kamiyamane
-     * @license MIT
-     * @copyright Copyright (c) Yusuke Kamiyamane
-     * @see {@link https://github.com/y14e/power-focusable}
-     *)
-  *)
-*/
 
 export { Tabs as default };