@y14e/disclosure-css 1.3.4 → 1.3.6

package/README.md

@@ -10,14 +10,14 @@ npm i @y14e/disclosure-css
 
 ```ts
 // npm
-import Disclosure from '@y14e/disclosure-css@1.3.4';
+import Disclosure from '@y14e/disclosure-css@1.3.6';
 
 // CDNs
-import Disclosure from 'https://esm.sh/@y14e/disclosure-css@1.3.4';
+import Disclosure from 'https://esm.sh/@y14e/disclosure-css@1.3.6';
 // or
-import Disclosure from 'https://cdn.jsdelivr.net/npm/@y14e/disclosure-css@1.3.4/+esm';
+import Disclosure from 'https://cdn.jsdelivr.net/npm/@y14e/disclosure-css@1.3.6/+esm';
 // or
-import Disclosure from 'https://esm.unpkg.com/@y14e/disclosure-css@1.3.4';
+import Disclosure from 'https://esm.unpkg.com/@y14e/disclosure-css@1.3.6';
 ```
 
 ## Usage
@@ -30,15 +30,6 @@ new Disclosure(root);
 
 ## 📦 APIs
 
-### `open`
-
-```ts
-disclosure.open(details);
-// => void
-//
-// details: HTMLDetailsElement
-```
-
 ### `close`
 
 ```ts
@@ -57,6 +48,15 @@ disclosure.destroy();
 // => void
 ```
 
+### `open`
+
+```ts
+disclosure.open(details);
+// => void
+//
+// details: HTMLDetailsElement
+```
+
 ## Demo
 
 - https://y14e.github.io/disclosure-css/

package/dist/index.cjs

@@ -40,11 +40,10 @@ function addTokenToAttribute(element, attribute, token, options = {}) {
   const tokens = value ? parse(value).filter(Boolean) : [];
   if (caseInsensitive) {
     const lower = token.toLowerCase();
-    if (tokens.some((token2) => token2.toLowerCase() === lower)) {
-      return;
+    if (tokens.every((token2) => token2.toLowerCase() !== lower)) {
+      tokens.push(token);
+      element.setAttribute(attribute, serialize(tokens));
     }
-    tokens.push(token);
-    element.setAttribute(attribute, serialize(tokens));
     return;
   }
   const set = new Set(tokens);
@@ -323,6 +322,8 @@ function createRovingTabIndex(container, options = {}) {
   let {
     direction,
     navigationOnly = false,
+    noMemory = false,
+    noStart = false,
     selector,
     typeahead = false,
     wrap = false
@@ -335,6 +336,14 @@ function createRovingTabIndex(container, options = {}) {
     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)."
@@ -349,13 +358,15 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid wrap option. Fallback: false.");
     wrap = false;
   }
-  const settings = { navigationOnly, typeahead, wrap };
-  if (direction) {
-    Object.assign(settings, { direction });
-  }
-  if (selector) {
-    Object.assign(settings, { selector });
-  }
+  const settings = {
+    navigationOnly,
+    noMemory,
+    noStart,
+    typeahead,
+    wrap
+  };
+  direction && Object.assign(settings, { direction });
+  selector && Object.assign(settings, { selector });
   const roving = new RovingTabIndex(container, settings);
   return () => roving.destroy();
 }
@@ -388,12 +399,29 @@ var RovingTabIndex = class {
   #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.#controller.signal
+      signal
     });
     this.#container.setAttribute("data-roving-tabindex-initialized", "");
   }
+  #onFocusIn = (event) => {
+    const { target } = event;
+    if (!(target instanceof Element)) {
+      return;
+    }
+    const isFocusable22 = this.#focusables.has(target);
+    if (this.#options.noMemory && !isFocusable22) {
+      this.#update(null);
+      return;
+    }
+    isFocusable22 && this.#update(target);
+  };
   #onKeyDown = (event) => {
     if (!event.composedPath().includes(this.#container)) {
       return;
@@ -424,7 +452,6 @@ var RovingTabIndex = class {
       return;
     }
     event.preventDefault();
-    event.stopPropagation();
     const currentIndex = current.indexOf(active);
     let rawIndex;
     let newIndex = currentIndex;
@@ -455,11 +482,7 @@ var RovingTabIndex = class {
       }
     }
     const focusable = target.at(newIndex);
-    if (!focusable) {
-      return;
-    }
-    this.#update(focusable);
-    focusElement(focusable);
+    focusable && focusElement(focusable);
   };
   #update(active) {
     const current = new Set(this.#getFocusables());
@@ -474,7 +497,7 @@ var RovingTabIndex = class {
         index >= 0 && focusables.splice(index, 1);
       });
     }
-    const { navigationOnly } = this.#options;
+    const { navigationOnly, noStart, typeahead } = this.#options;
     for (const focusable of current) {
       if (this.#focusables.has(focusable)) {
         continue;
@@ -484,7 +507,7 @@ var RovingTabIndex = class {
         saveAttributes2([focusable], ["tabindex"]);
         focusable.setAttribute("tabindex", "-1");
       }
-      if (!this.#options.typeahead) {
+      if (!typeahead) {
         continue;
       }
       const value = focusable.ariaKeyShortcuts?.trim();
@@ -515,7 +538,7 @@ var RovingTabIndex = class {
       return;
     }
     [...this.#focusables].forEach((focusable, i) => {
-      focusable.setAttribute("tabindex", i ? "-1" : "0");
+      focusable.setAttribute("tabindex", i || noStart ? "-1" : "0");
     });
   }
   #createSelectorFilter() {
@@ -526,7 +549,8 @@ var RovingTabIndex = class {
     return getFocusables(this.#container, {
       composed: true,
       filter: this.#selectorFilter,
-      skipNegativeTabIndexCheck: !this.#options.navigationOnly
+      skipNegativeTabIndexCheck: !this.#options.navigationOnly,
+      skipVisibilityCheck: true
     });
   }
 };
@@ -600,16 +624,6 @@ var Disclosure = class {
     });
     this.#initialize();
   }
-  open(details) {
-    if (this.#isDestroyed) {
-      return;
-    }
-    if (!(details instanceof HTMLDetailsElement) || !this.#bindings.has(details)) {
-      console.warn("Invalid <details> element");
-      return;
-    }
-    this.#toggle(details, true);
-  }
   close(details) {
     if (this.#isDestroyed) {
       return;
@@ -633,6 +647,16 @@ var Disclosure = class {
     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",
@@ -669,7 +693,7 @@ function isFocusable2(element) {
  * WAI-ARIA compliant disclosure pattern implementation in TypeScript.
  * Using the <details> and <summary> element.
  *
- * @version 1.3.4
+ * @version 1.3.6
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -681,7 +705,7 @@ function isFocusable2(element) {
   (**
    * Attributes Utils
    *
-   * @version 1.1.0
+   * @version 1.1.1
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -694,7 +718,7 @@ function isFocusable2(element) {
    * Lightweight roving tabindex utility with fully focus management.
    * Designed for accessible menus, tabs, toolbars, and composite widgets.
    *
-   * @version 2.0.4
+   * @version 3.0.0
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -706,7 +730,7 @@ function isFocusable2(element) {
     (**
      * Attributes Utils
      *
-     * @version 1.1.0
+     * @version 1.1.1
      * @author Yusuke Kamiyamane
      * @license MIT
      * @copyright Copyright (c) Yusuke Kamiyamane
@@ -719,7 +743,7 @@ function isFocusable2(element) {
      * High-precision focus management utility with full composed tree support.
      * Handles complex focus rules including tabindex ordering, radio groups, inert.
      *
-     * @version 4.3.1
+     * @version 4.3.2
      * @author Yusuke Kamiyamane
      * @license MIT
      * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.cts

@@ -3,7 +3,7 @@
  * WAI-ARIA compliant disclosure pattern implementation in TypeScript.
  * Using the <details> and <summary> element.
  *
- * @version 1.3.4
+ * @version 1.3.6
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -12,9 +12,9 @@
 declare class Disclosure {
     #private;
     constructor(root: HTMLElement);
-    open(details: HTMLDetailsElement): void;
     close(details: HTMLDetailsElement): void;
     destroy(): void;
+    open(details: HTMLDetailsElement): void;
 }
 
 export { Disclosure as default };

package/dist/index.d.ts

@@ -3,7 +3,7 @@
  * WAI-ARIA compliant disclosure pattern implementation in TypeScript.
  * Using the <details> and <summary> element.
  *
- * @version 1.3.4
+ * @version 1.3.6
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -12,9 +12,9 @@
 declare class Disclosure {
     #private;
     constructor(root: HTMLElement);
-    open(details: HTMLDetailsElement): void;
     close(details: HTMLDetailsElement): void;
     destroy(): void;
+    open(details: HTMLDetailsElement): void;
 }
 
 export { Disclosure as default };

package/dist/index.js

@@ -38,11 +38,10 @@ function addTokenToAttribute(element, attribute, token, options = {}) {
   const tokens = value ? parse(value).filter(Boolean) : [];
   if (caseInsensitive) {
     const lower = token.toLowerCase();
-    if (tokens.some((token2) => token2.toLowerCase() === lower)) {
-      return;
+    if (tokens.every((token2) => token2.toLowerCase() !== lower)) {
+      tokens.push(token);
+      element.setAttribute(attribute, serialize(tokens));
     }
-    tokens.push(token);
-    element.setAttribute(attribute, serialize(tokens));
     return;
   }
   const set = new Set(tokens);
@@ -321,6 +320,8 @@ function createRovingTabIndex(container, options = {}) {
   let {
     direction,
     navigationOnly = false,
+    noMemory = false,
+    noStart = false,
     selector,
     typeahead = false,
     wrap = false
@@ -333,6 +334,14 @@ function createRovingTabIndex(container, options = {}) {
     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)."
@@ -347,13 +356,15 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid wrap option. Fallback: false.");
     wrap = false;
   }
-  const settings = { navigationOnly, typeahead, wrap };
-  if (direction) {
-    Object.assign(settings, { direction });
-  }
-  if (selector) {
-    Object.assign(settings, { selector });
-  }
+  const settings = {
+    navigationOnly,
+    noMemory,
+    noStart,
+    typeahead,
+    wrap
+  };
+  direction && Object.assign(settings, { direction });
+  selector && Object.assign(settings, { selector });
   const roving = new RovingTabIndex(container, settings);
   return () => roving.destroy();
 }
@@ -386,12 +397,29 @@ var RovingTabIndex = class {
   #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.#controller.signal
+      signal
     });
     this.#container.setAttribute("data-roving-tabindex-initialized", "");
   }
+  #onFocusIn = (event) => {
+    const { target } = event;
+    if (!(target instanceof Element)) {
+      return;
+    }
+    const isFocusable22 = this.#focusables.has(target);
+    if (this.#options.noMemory && !isFocusable22) {
+      this.#update(null);
+      return;
+    }
+    isFocusable22 && this.#update(target);
+  };
   #onKeyDown = (event) => {
     if (!event.composedPath().includes(this.#container)) {
       return;
@@ -422,7 +450,6 @@ var RovingTabIndex = class {
       return;
     }
     event.preventDefault();
-    event.stopPropagation();
     const currentIndex = current.indexOf(active);
     let rawIndex;
     let newIndex = currentIndex;
@@ -453,11 +480,7 @@ var RovingTabIndex = class {
       }
     }
     const focusable = target.at(newIndex);
-    if (!focusable) {
-      return;
-    }
-    this.#update(focusable);
-    focusElement(focusable);
+    focusable && focusElement(focusable);
   };
   #update(active) {
     const current = new Set(this.#getFocusables());
@@ -472,7 +495,7 @@ var RovingTabIndex = class {
         index >= 0 && focusables.splice(index, 1);
       });
     }
-    const { navigationOnly } = this.#options;
+    const { navigationOnly, noStart, typeahead } = this.#options;
     for (const focusable of current) {
       if (this.#focusables.has(focusable)) {
         continue;
@@ -482,7 +505,7 @@ var RovingTabIndex = class {
         saveAttributes2([focusable], ["tabindex"]);
         focusable.setAttribute("tabindex", "-1");
       }
-      if (!this.#options.typeahead) {
+      if (!typeahead) {
         continue;
       }
       const value = focusable.ariaKeyShortcuts?.trim();
@@ -513,7 +536,7 @@ var RovingTabIndex = class {
       return;
     }
     [...this.#focusables].forEach((focusable, i) => {
-      focusable.setAttribute("tabindex", i ? "-1" : "0");
+      focusable.setAttribute("tabindex", i || noStart ? "-1" : "0");
     });
   }
   #createSelectorFilter() {
@@ -524,7 +547,8 @@ var RovingTabIndex = class {
     return getFocusables(this.#container, {
       composed: true,
       filter: this.#selectorFilter,
-      skipNegativeTabIndexCheck: !this.#options.navigationOnly
+      skipNegativeTabIndexCheck: !this.#options.navigationOnly,
+      skipVisibilityCheck: true
     });
   }
 };
@@ -598,16 +622,6 @@ var Disclosure = class {
     });
     this.#initialize();
   }
-  open(details) {
-    if (this.#isDestroyed) {
-      return;
-    }
-    if (!(details instanceof HTMLDetailsElement) || !this.#bindings.has(details)) {
-      console.warn("Invalid <details> element");
-      return;
-    }
-    this.#toggle(details, true);
-  }
   close(details) {
     if (this.#isDestroyed) {
       return;
@@ -631,6 +645,16 @@ var Disclosure = class {
     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",
@@ -667,7 +691,7 @@ function isFocusable2(element) {
  * WAI-ARIA compliant disclosure pattern implementation in TypeScript.
  * Using the <details> and <summary> element.
  *
- * @version 1.3.4
+ * @version 1.3.6
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -679,7 +703,7 @@ function isFocusable2(element) {
   (**
    * Attributes Utils
    *
-   * @version 1.1.0
+   * @version 1.1.1
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -692,7 +716,7 @@ function isFocusable2(element) {
    * Lightweight roving tabindex utility with fully focus management.
    * Designed for accessible menus, tabs, toolbars, and composite widgets.
    *
-   * @version 2.0.4
+   * @version 3.0.0
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -704,7 +728,7 @@ function isFocusable2(element) {
     (**
      * Attributes Utils
      *
-     * @version 1.1.0
+     * @version 1.1.1
      * @author Yusuke Kamiyamane
      * @license MIT
      * @copyright Copyright (c) Yusuke Kamiyamane
@@ -717,7 +741,7 @@ function isFocusable2(element) {
      * High-precision focus management utility with full composed tree support.
      * Handles complex focus rules including tabindex ordering, radio groups, inert.
      *
-     * @version 4.3.1
+     * @version 4.3.2
      * @author Yusuke Kamiyamane
      * @license MIT
      * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/disclosure-css",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "description": "WAI-ARIA compliant disclosure pattern implementation in TypeScript",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -43,8 +43,8 @@
   },
   "homepage": "https://github.com/y14e/disclosure-css#readme",
   "devDependencies": {
-    "@y14e/attributes-utils": "^1.1.0",
-    "@y14e/roving-tabindex": "^2.0.4",
+    "@y14e/attributes-utils": "^1.1.1",
+    "@y14e/roving-tabindex": "^3.0.0",
     "bun-types": "latest",
     "tsup": "^8.0.0",
     "typescript": "^5.6.0"