@y14e/disclosure 2.0.0 → 2.0.2

package/README.md

@@ -13,11 +13,11 @@ npm i @y14e/disclosure
 import Disclosure from '@y14e/disclosure';
 
 // CDNs
-import Disclosure from 'https://esm.sh/@y14e/disclosure@2.0.0';
+import Disclosure from 'https://esm.sh/@y14e/disclosure@2.0.2';
 // or
-import Disclosure from 'https://cdn.jsdelivr.net/npm/@y14e/disclosure@2.0.0/+esm';
+import Disclosure from 'https://cdn.jsdelivr.net/npm/@y14e/disclosure@2.0.2/+esm';
 // or
-import Disclosure from 'https://esm.unpkg.com/@y14e/disclosure@2.0.0';
+import Disclosure from 'https://esm.unpkg.com/@y14e/disclosure@2.0.2';
 ```
 
 ## Usage
@@ -28,7 +28,6 @@ new Disclosure(root, options);
 //
 // root: HTMLElement
 // options (optional): DisclosureOptions
-
 ```
 
 ## 🪄 Options
@@ -36,9 +35,10 @@ new Disclosure(root, options);
 ```ts
 interface DisclosureOptions {
   animation?: {
-    duration?: number; // ms (default: 300)
-    easing?: string;   // <easing-function> (default: 'ease')
+    duration?: number;   // ms (default: 300)
+    easing?: string;     // <easing-function> (default: 'ease')
   };
+  collapsible?: boolean; // default: true
 }
 ```
 

package/dist/index.bundle.cjs

@@ -4,12 +4,12 @@
 var DEFAULT_PARSER = (value) => value.split(/\s+/);
 var DEFAULT_SERIALIZER = (tokens) => tokens.join(" ");
 function addTokenToAttribute(element, attribute, token, options = {}) {
+  const value = element.getAttribute(attribute)?.trim();
   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();
@@ -353,13 +353,7 @@ var RovingTabIndex = class _RovingTabIndex {
       console.warn("Invalid wrap option. Fallback: false.");
       wrap = false;
     }
-    this.#settings = {
-      navigationOnly,
-      noMemory,
-      noStart,
-      typeahead,
-      wrap
-    };
+    this.#settings = { navigationOnly, noMemory, noStart, typeahead, wrap };
     direction && Object.assign(this.#settings, { direction });
     selector && Object.assign(this.#settings, { selector });
     this.#selectorFilter = this.#createSelectorFilter();
@@ -378,29 +372,32 @@ var RovingTabIndex = class _RovingTabIndex {
   }
   #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("focusin", this.#onFocusIn, { signal });
+    this.#settings.noMemory && this.#container.addEventListener("focusout", this.#onFocusOut, {
+      signal
+    });
     this.#container.addEventListener("keydown", this.#onKeyDown, { signal });
   }
   #onFocusIn = (event) => {
-    const { target } = event;
-    if (!(target instanceof Element)) {
+    if (!(event instanceof FocusEvent)) {
       return;
     }
-    const isFocusable2 = this.#focusables.has(target);
-    this.#settings.noMemory && !isFocusable2 ? this.#update() : isFocusable2 && this.#update(target);
+    const { target } = event;
+    target instanceof Element && this.#update(target);
   };
   #onFocusOut = (event) => {
-    if (!event.relatedTarget) {
-      this.#update();
+    if (!(event instanceof FocusEvent)) {
+      return;
     }
+    const target = event.relatedTarget;
+    (!(target instanceof Element) || !this.#focusables.has(target)) && this.#update();
   };
   #onKeyDown = (event) => {
+    if (!(event instanceof KeyboardEvent)) {
+      return;
+    }
     const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
     if (altKey || ctrlKey || metaKey || shiftKey) {
       return;
@@ -419,7 +416,7 @@ var RovingTabIndex = class _RovingTabIndex {
       }
     }
     const active = getActiveElement();
-    if (!(active instanceof HTMLElement)) {
+    if (!(active instanceof Element)) {
       return;
     }
     const current = this.#getFocusables();
@@ -541,7 +538,8 @@ var Disclosure = class _Disclosure {
     animation: {
       duration: 300,
       easing: "ease"
-    }
+    },
+    collapsible: true
   };
   #settings;
   #detailsElements;
@@ -596,12 +594,13 @@ var Disclosure = class _Disclosure {
     this.#detailsElements.forEach((details, i) => {
       const summary = this.#summaryElements[i];
       const content = this.#contentElements[i];
-      if (summary && content) {
-        const binding = this.#createBinding(details, summary, content);
-        this.#bindings.set(details, binding);
-        this.#bindings.set(summary, binding);
-        this.#bindings.set(content, binding);
+      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();
   }
@@ -723,17 +722,22 @@ var Disclosure = class _Disclosure {
       content.style.removeProperty(name2);
     });
   }
-  #toggle(details, isExpand) {
+  #toggle(details, isExpand, isProgrammatic = false) {
     if (details.hasAttribute("data-disclosure-open") === isExpand) {
       return;
     }
+    if (!isExpand && !isProgrammatic && !this.#settings.collapsible && this.#detailsElements.filter(
+      (details2) => details2.hasAttribute("data-disclosure-open")
+    ).length <= 1) {
+      return;
+    }
     const name = details.getAttribute("data-disclosure-name");
     if (name && isExpand) {
       details.removeAttribute("name");
       const expanded = this.#detailsElements.find(
         (d) => d.hasAttribute("data-disclosure-open") && d.getAttribute("data-disclosure-name") === name
       );
-      expanded && this.#toggle(expanded, false);
+      expanded && this.#toggle(expanded, false, true);
     }
     const binding = this.#bindings.get(details);
     if (!binding) {
@@ -782,6 +786,8 @@ var Disclosure = class _Disclosure {
   }
   #mergeOptions(target, source) {
     return {
+      ...target,
+      ...source,
       animation: { ...target.animation, ...source.animation ?? {} }
     };
   }
@@ -804,7 +810,7 @@ function waitAnimationFinish(animation) {
  * WAI-ARIA compliant disclosure pattern implementation in TypeScript.
  * Using the <details> and <summary> element.
  *
- * @version 2.0.0
+ * @version 2.0.2
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -816,7 +822,7 @@ function waitAnimationFinish(animation) {
   (**
    * Attributes Utils
    *
-   * @version 1.1.2
+   * @version 1.1.3
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -829,7 +835,7 @@ power-focusable/dist/index.js:
    * High-precision focus management utility with full composed tree support.
    * Handles complex focus rules including tabindex ordering, radio groups, inert.
    *
-   * @version 4.3.5
+   * @version 4.3.8
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -842,7 +848,7 @@ power-focusable/dist/index.js:
    * Lightweight roving tabindex utility with fully focus management.
    * Designed for accessible menus, tabs, toolbars, and composite widgets.
    *
-   * @version 3.1.2
+   * @version 3.1.6
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.bundle.js

@@ -2,12 +2,12 @@
 var DEFAULT_PARSER = (value) => value.split(/\s+/);
 var DEFAULT_SERIALIZER = (tokens) => tokens.join(" ");
 function addTokenToAttribute(element, attribute, token, options = {}) {
+  const value = element.getAttribute(attribute)?.trim();
   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();
@@ -351,13 +351,7 @@ var RovingTabIndex = class _RovingTabIndex {
       console.warn("Invalid wrap option. Fallback: false.");
       wrap = false;
     }
-    this.#settings = {
-      navigationOnly,
-      noMemory,
-      noStart,
-      typeahead,
-      wrap
-    };
+    this.#settings = { navigationOnly, noMemory, noStart, typeahead, wrap };
     direction && Object.assign(this.#settings, { direction });
     selector && Object.assign(this.#settings, { selector });
     this.#selectorFilter = this.#createSelectorFilter();
@@ -376,29 +370,32 @@ var RovingTabIndex = class _RovingTabIndex {
   }
   #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("focusin", this.#onFocusIn, { signal });
+    this.#settings.noMemory && this.#container.addEventListener("focusout", this.#onFocusOut, {
+      signal
+    });
     this.#container.addEventListener("keydown", this.#onKeyDown, { signal });
   }
   #onFocusIn = (event) => {
-    const { target } = event;
-    if (!(target instanceof Element)) {
+    if (!(event instanceof FocusEvent)) {
       return;
     }
-    const isFocusable2 = this.#focusables.has(target);
-    this.#settings.noMemory && !isFocusable2 ? this.#update() : isFocusable2 && this.#update(target);
+    const { target } = event;
+    target instanceof Element && this.#update(target);
   };
   #onFocusOut = (event) => {
-    if (!event.relatedTarget) {
-      this.#update();
+    if (!(event instanceof FocusEvent)) {
+      return;
     }
+    const target = event.relatedTarget;
+    (!(target instanceof Element) || !this.#focusables.has(target)) && this.#update();
   };
   #onKeyDown = (event) => {
+    if (!(event instanceof KeyboardEvent)) {
+      return;
+    }
     const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
     if (altKey || ctrlKey || metaKey || shiftKey) {
       return;
@@ -417,7 +414,7 @@ var RovingTabIndex = class _RovingTabIndex {
       }
     }
     const active = getActiveElement();
-    if (!(active instanceof HTMLElement)) {
+    if (!(active instanceof Element)) {
       return;
     }
     const current = this.#getFocusables();
@@ -539,7 +536,8 @@ var Disclosure = class _Disclosure {
     animation: {
       duration: 300,
       easing: "ease"
-    }
+    },
+    collapsible: true
   };
   #settings;
   #detailsElements;
@@ -594,12 +592,13 @@ var Disclosure = class _Disclosure {
     this.#detailsElements.forEach((details, i) => {
       const summary = this.#summaryElements[i];
       const content = this.#contentElements[i];
-      if (summary && content) {
-        const binding = this.#createBinding(details, summary, content);
-        this.#bindings.set(details, binding);
-        this.#bindings.set(summary, binding);
-        this.#bindings.set(content, binding);
+      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();
   }
@@ -721,17 +720,22 @@ var Disclosure = class _Disclosure {
       content.style.removeProperty(name2);
     });
   }
-  #toggle(details, isExpand) {
+  #toggle(details, isExpand, isProgrammatic = false) {
     if (details.hasAttribute("data-disclosure-open") === isExpand) {
       return;
     }
+    if (!isExpand && !isProgrammatic && !this.#settings.collapsible && this.#detailsElements.filter(
+      (details2) => details2.hasAttribute("data-disclosure-open")
+    ).length <= 1) {
+      return;
+    }
     const name = details.getAttribute("data-disclosure-name");
     if (name && isExpand) {
       details.removeAttribute("name");
       const expanded = this.#detailsElements.find(
         (d) => d.hasAttribute("data-disclosure-open") && d.getAttribute("data-disclosure-name") === name
       );
-      expanded && this.#toggle(expanded, false);
+      expanded && this.#toggle(expanded, false, true);
     }
     const binding = this.#bindings.get(details);
     if (!binding) {
@@ -780,6 +784,8 @@ var Disclosure = class _Disclosure {
   }
   #mergeOptions(target, source) {
     return {
+      ...target,
+      ...source,
       animation: { ...target.animation, ...source.animation ?? {} }
     };
   }
@@ -802,7 +808,7 @@ function waitAnimationFinish(animation) {
  * WAI-ARIA compliant disclosure pattern implementation in TypeScript.
  * Using the <details> and <summary> element.
  *
- * @version 2.0.0
+ * @version 2.0.2
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -814,7 +820,7 @@ function waitAnimationFinish(animation) {
   (**
    * Attributes Utils
    *
-   * @version 1.1.2
+   * @version 1.1.3
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -827,7 +833,7 @@ power-focusable/dist/index.js:
    * High-precision focus management utility with full composed tree support.
    * Handles complex focus rules including tabindex ordering, radio groups, inert.
    *
-   * @version 4.3.5
+   * @version 4.3.8
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -840,7 +846,7 @@ power-focusable/dist/index.js:
    * Lightweight roving tabindex utility with fully focus management.
    * Designed for accessible menus, tabs, toolbars, and composite widgets.
    *
-   * @version 3.1.2
+   * @version 3.1.6
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.cjs

@@ -11,7 +11,8 @@ var Disclosure = class _Disclosure {
     animation: {
       duration: 300,
       easing: "ease"
-    }
+    },
+    collapsible: true
   };
   #settings;
   #detailsElements;
@@ -66,12 +67,13 @@ var Disclosure = class _Disclosure {
     this.#detailsElements.forEach((details, i) => {
       const summary = this.#summaryElements[i];
       const content = this.#contentElements[i];
-      if (summary && content) {
-        const binding = this.#createBinding(details, summary, content);
-        this.#bindings.set(details, binding);
-        this.#bindings.set(summary, binding);
-        this.#bindings.set(content, binding);
+      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();
   }
@@ -193,17 +195,22 @@ var Disclosure = class _Disclosure {
       content.style.removeProperty(name2);
     });
   }
-  #toggle(details, isExpand) {
+  #toggle(details, isExpand, isProgrammatic = false) {
     if (details.hasAttribute("data-disclosure-open") === isExpand) {
       return;
     }
+    if (!isExpand && !isProgrammatic && !this.#settings.collapsible && this.#detailsElements.filter(
+      (details2) => details2.hasAttribute("data-disclosure-open")
+    ).length <= 1) {
+      return;
+    }
     const name = details.getAttribute("data-disclosure-name");
     if (name && isExpand) {
       details.removeAttribute("name");
       const expanded = this.#detailsElements.find(
         (d) => d.hasAttribute("data-disclosure-open") && d.getAttribute("data-disclosure-name") === name
       );
-      expanded && this.#toggle(expanded, false);
+      expanded && this.#toggle(expanded, false, true);
     }
     const binding = this.#bindings.get(details);
     if (!binding) {
@@ -252,6 +259,8 @@ var Disclosure = class _Disclosure {
   }
   #mergeOptions(target, source) {
     return {
+      ...target,
+      ...source,
       animation: { ...target.animation, ...source.animation ?? {} }
     };
   }
@@ -274,7 +283,7 @@ function waitAnimationFinish(animation) {
  * WAI-ARIA compliant disclosure pattern implementation in TypeScript.
  * Using the <details> and <summary> element.
  *
- * @version 2.0.0
+ * @version 2.0.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 2.0.0
+ * @version 2.0.2
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -14,6 +14,7 @@ interface DisclosureOptions {
         readonly duration?: number;
         readonly easing?: string;
     };
+    readonly collapsible?: boolean;
 }
 declare class Disclosure {
     #private;

package/dist/index.d.ts

@@ -3,7 +3,7 @@
  * WAI-ARIA compliant disclosure pattern implementation in TypeScript.
  * Using the <details> and <summary> element.
  *
- * @version 2.0.0
+ * @version 2.0.2
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -14,6 +14,7 @@ interface DisclosureOptions {
         readonly duration?: number;
         readonly easing?: string;
     };
+    readonly collapsible?: boolean;
 }
 declare class Disclosure {
     #private;

package/dist/index.js

@@ -9,7 +9,8 @@ var Disclosure = class _Disclosure {
     animation: {
       duration: 300,
       easing: "ease"
-    }
+    },
+    collapsible: true
   };
   #settings;
   #detailsElements;
@@ -64,12 +65,13 @@ var Disclosure = class _Disclosure {
     this.#detailsElements.forEach((details, i) => {
       const summary = this.#summaryElements[i];
       const content = this.#contentElements[i];
-      if (summary && content) {
-        const binding = this.#createBinding(details, summary, content);
-        this.#bindings.set(details, binding);
-        this.#bindings.set(summary, binding);
-        this.#bindings.set(content, binding);
+      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();
   }
@@ -191,17 +193,22 @@ var Disclosure = class _Disclosure {
       content.style.removeProperty(name2);
     });
   }
-  #toggle(details, isExpand) {
+  #toggle(details, isExpand, isProgrammatic = false) {
     if (details.hasAttribute("data-disclosure-open") === isExpand) {
       return;
     }
+    if (!isExpand && !isProgrammatic && !this.#settings.collapsible && this.#detailsElements.filter(
+      (details2) => details2.hasAttribute("data-disclosure-open")
+    ).length <= 1) {
+      return;
+    }
     const name = details.getAttribute("data-disclosure-name");
     if (name && isExpand) {
       details.removeAttribute("name");
       const expanded = this.#detailsElements.find(
         (d) => d.hasAttribute("data-disclosure-open") && d.getAttribute("data-disclosure-name") === name
       );
-      expanded && this.#toggle(expanded, false);
+      expanded && this.#toggle(expanded, false, true);
     }
     const binding = this.#bindings.get(details);
     if (!binding) {
@@ -250,6 +257,8 @@ var Disclosure = class _Disclosure {
   }
   #mergeOptions(target, source) {
     return {
+      ...target,
+      ...source,
       animation: { ...target.animation, ...source.animation ?? {} }
     };
   }
@@ -272,7 +281,7 @@ function waitAnimationFinish(animation) {
  * WAI-ARIA compliant disclosure pattern implementation in TypeScript.
  * Using the <details> and <summary> element.
  *
- * @version 2.0.0
+ * @version 2.0.2
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/disclosure",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "WAI-ARIA compliant disclosure pattern implementation in TypeScript",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -52,7 +52,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@y14e/attributes-utils": "^1.1.2",
-    "@y14e/roving-tabindex": "^3.1.2"
+    "@y14e/attributes-utils": "^1.1.3",
+    "@y14e/roving-tabindex": "^3.1.6"
   }
 }