@y14e/disclosure-css 1.3.13 → 2.0.1

package/README.md

@@ -13,27 +13,51 @@ npm i @y14e/disclosure-css
 import Disclosure from '@y14e/disclosure-css';
 
 // CDNs
-import Disclosure from 'https://esm.sh/@y14e/disclosure-css@1.3.13';
+import Disclosure from 'https://esm.sh/@y14e/disclosure-css@2.0.0';
 // or
-import Disclosure from 'https://cdn.jsdelivr.net/npm/@y14e/disclosure-css@1.3.13/+esm';
+import Disclosure from 'https://cdn.jsdelivr.net/npm/@y14e/disclosure-css@2.0.0/+esm';
 // or
-import Disclosure from 'https://esm.unpkg.com/@y14e/disclosure-css@1.3.13';
+import Disclosure from 'https://esm.unpkg.com/@y14e/disclosure-css@2.0.0';
 ```
 
 ## Usage
 
 ```ts
-new Disclosure(root);
+new Disclosure(root, options);
 // => Disclosure
+//
+// root: HTMLElement
+// options (optional): DisclosureOptions
+```
+
+## 🪄 Options
+
+```ts
+interface DisclosureOptions {
+  collapsible?: boolean; // default: true
+}
+```
 
+### ⚙️ Customize defaults
+
+Override the global default settings applied to all disclosure instances.
+
+```ts
+import Disclosure from '@y14e/disclosure-css';
+
+Disclosure.defaults = {
+  collapsible: false,
+};
+
+new Disclosure(root);
 ```
 
 ## 📦 APIs
 
-### `close`
+### `collapse`
 
 ```ts
-disclosure.close(details);
+disclosure.collapse(details);
 // => void
 //
 // details: HTMLDetailsElement
@@ -48,10 +72,10 @@ disclosure.destroy();
 // => void
 ```
 
-### `open`
+### `expand`
 
 ```ts
-disclosure.open(details);
+disclosure.expand(details);
 // => void
 //
 // details: HTMLDetailsElement

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();
@@ -534,15 +531,19 @@ var RovingTabIndex = class _RovingTabIndex {
 };
 
 // src/index.ts
-var Disclosure = class {
+var Disclosure = class _Disclosure {
+  static defaults = {};
   #rootElement;
+  #defaults = { collapsible: true };
+  #settings;
   #detailsElements;
   #summaryElements;
   #contentElements;
   #bindings = /* @__PURE__ */ new WeakMap();
+  #controller = null;
   #cleanupRovingTabIndex = null;
   #isDestroyed = false;
-  constructor(root) {
+  constructor(root, options = {}) {
     if (!(root instanceof HTMLElement)) {
       throw new TypeError("Invalid root element");
     }
@@ -551,6 +552,8 @@ var Disclosure = class {
       return;
     }
     this.#rootElement = root;
+    this.#defaults = this.#mergeOptions(this.#defaults, _Disclosure.defaults);
+    this.#settings = this.#mergeOptions(this.#defaults, options);
     const NOT_NESTED = ":not(:scope summary + * *)";
     this.#detailsElements = [
       ...this.#rootElement.querySelectorAll(
@@ -592,7 +595,7 @@ var Disclosure = class {
     });
     this.#initialize();
   }
-  close(details) {
+  collapse(details) {
     if (this.#isDestroyed) {
       return;
     }
@@ -607,6 +610,8 @@ var Disclosure = class {
       return;
     }
     this.#isDestroyed = true;
+    this.#controller?.abort();
+    this.#controller = null;
     this.#cleanupRovingTabIndex?.();
     this.#cleanupRovingTabIndex = null;
     this.#detailsElements.length = 0;
@@ -615,7 +620,7 @@ var Disclosure = class {
     this.#contentElements.length = 0;
     this.#rootElement.removeAttribute("data-disclosure-initialized");
   }
-  open(details) {
+  expand(details) {
     if (this.#isDestroyed) {
       return;
     }
@@ -631,10 +636,15 @@ var Disclosure = class {
       "style",
       "tabindex"
     ]);
-    this.#summaryElements.filter((summary) => !this.#isFocusable(summary)).forEach((summary) => {
-      summary.setAttribute("aria-disabled", "true");
-      summary.setAttribute("tabindex", "-1");
-      summary.style.setProperty("pointer-events", "none");
+    this.#controller = new AbortController();
+    const { signal } = this.#controller;
+    this.#summaryElements.forEach((summary) => {
+      if (!this.#isFocusable(summary)) {
+        summary.setAttribute("aria-disabled", "true");
+        summary.setAttribute("tabindex", "-1");
+        summary.style.setProperty("pointer-events", "none");
+      }
+      summary.addEventListener("click", this.#onSummaryClick, { signal });
     });
     this.#cleanupRovingTabIndex = createRovingTabIndex(this.#rootElement, {
       direction: "vertical",
@@ -644,10 +654,27 @@ var Disclosure = class {
     });
     this.#rootElement.setAttribute("data-disclosure-initialized", "");
   }
-  #toggle(details, isOpen) {
-    if (details.open !== isOpen) {
-      details.open = isOpen;
+  #onSummaryClick = (event) => {
+    event.preventDefault();
+    const summary = event.currentTarget;
+    if (!(summary instanceof HTMLElement)) {
+      return;
+    }
+    const binding = this.#bindings.get(summary);
+    if (!binding) {
+      return;
+    }
+    const { details } = binding;
+    this.#toggle(details, !details.open);
+  };
+  #toggle(details, isExpand) {
+    if (details.open === isExpand) {
+      return;
     }
+    if (!isExpand && !this.#settings.collapsible && this.#detailsElements.filter((details2) => details2.open).length <= 1) {
+      return;
+    }
+    details.open = isExpand;
   }
   #createBinding(details, summary, content) {
     return { details, summary, content };
@@ -655,13 +682,16 @@ var Disclosure = class {
   #isFocusable(element) {
     return element.tabIndex >= 0;
   }
+  #mergeOptions(target, source) {
+    return { ...target, ...source };
+  }
 };
 /**
  * Disclosure (CSS Animation)
  * WAI-ARIA compliant disclosure pattern implementation in TypeScript.
  * Using the <details> and <summary> element.
  *
- * @version 1.3.13
+ * @version 2.0.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -673,7 +703,7 @@ var Disclosure = class {
   (**
    * Attributes Utils
    *
-   * @version 1.1.2
+   * @version 1.1.3
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -686,7 +716,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
@@ -699,7 +729,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();
@@ -532,15 +529,19 @@ var RovingTabIndex = class _RovingTabIndex {
 };
 
 // src/index.ts
-var Disclosure = class {
+var Disclosure = class _Disclosure {
+  static defaults = {};
   #rootElement;
+  #defaults = { collapsible: true };
+  #settings;
   #detailsElements;
   #summaryElements;
   #contentElements;
   #bindings = /* @__PURE__ */ new WeakMap();
+  #controller = null;
   #cleanupRovingTabIndex = null;
   #isDestroyed = false;
-  constructor(root) {
+  constructor(root, options = {}) {
     if (!(root instanceof HTMLElement)) {
       throw new TypeError("Invalid root element");
     }
@@ -549,6 +550,8 @@ var Disclosure = class {
       return;
     }
     this.#rootElement = root;
+    this.#defaults = this.#mergeOptions(this.#defaults, _Disclosure.defaults);
+    this.#settings = this.#mergeOptions(this.#defaults, options);
     const NOT_NESTED = ":not(:scope summary + * *)";
     this.#detailsElements = [
       ...this.#rootElement.querySelectorAll(
@@ -590,7 +593,7 @@ var Disclosure = class {
     });
     this.#initialize();
   }
-  close(details) {
+  collapse(details) {
     if (this.#isDestroyed) {
       return;
     }
@@ -605,6 +608,8 @@ var Disclosure = class {
       return;
     }
     this.#isDestroyed = true;
+    this.#controller?.abort();
+    this.#controller = null;
     this.#cleanupRovingTabIndex?.();
     this.#cleanupRovingTabIndex = null;
     this.#detailsElements.length = 0;
@@ -613,7 +618,7 @@ var Disclosure = class {
     this.#contentElements.length = 0;
     this.#rootElement.removeAttribute("data-disclosure-initialized");
   }
-  open(details) {
+  expand(details) {
     if (this.#isDestroyed) {
       return;
     }
@@ -629,10 +634,15 @@ var Disclosure = class {
       "style",
       "tabindex"
     ]);
-    this.#summaryElements.filter((summary) => !this.#isFocusable(summary)).forEach((summary) => {
-      summary.setAttribute("aria-disabled", "true");
-      summary.setAttribute("tabindex", "-1");
-      summary.style.setProperty("pointer-events", "none");
+    this.#controller = new AbortController();
+    const { signal } = this.#controller;
+    this.#summaryElements.forEach((summary) => {
+      if (!this.#isFocusable(summary)) {
+        summary.setAttribute("aria-disabled", "true");
+        summary.setAttribute("tabindex", "-1");
+        summary.style.setProperty("pointer-events", "none");
+      }
+      summary.addEventListener("click", this.#onSummaryClick, { signal });
     });
     this.#cleanupRovingTabIndex = createRovingTabIndex(this.#rootElement, {
       direction: "vertical",
@@ -642,10 +652,27 @@ var Disclosure = class {
     });
     this.#rootElement.setAttribute("data-disclosure-initialized", "");
   }
-  #toggle(details, isOpen) {
-    if (details.open !== isOpen) {
-      details.open = isOpen;
+  #onSummaryClick = (event) => {
+    event.preventDefault();
+    const summary = event.currentTarget;
+    if (!(summary instanceof HTMLElement)) {
+      return;
+    }
+    const binding = this.#bindings.get(summary);
+    if (!binding) {
+      return;
+    }
+    const { details } = binding;
+    this.#toggle(details, !details.open);
+  };
+  #toggle(details, isExpand) {
+    if (details.open === isExpand) {
+      return;
     }
+    if (!isExpand && !this.#settings.collapsible && this.#detailsElements.filter((details2) => details2.open).length <= 1) {
+      return;
+    }
+    details.open = isExpand;
   }
   #createBinding(details, summary, content) {
     return { details, summary, content };
@@ -653,13 +680,16 @@ var Disclosure = class {
   #isFocusable(element) {
     return element.tabIndex >= 0;
   }
+  #mergeOptions(target, source) {
+    return { ...target, ...source };
+  }
 };
 /**
  * Disclosure (CSS Animation)
  * WAI-ARIA compliant disclosure pattern implementation in TypeScript.
  * Using the <details> and <summary> element.
  *
- * @version 1.3.13
+ * @version 2.0.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -671,7 +701,7 @@ var Disclosure = class {
   (**
    * Attributes Utils
    *
-   * @version 1.1.2
+   * @version 1.1.3
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -684,7 +714,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
@@ -697,7 +727,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

@@ -4,15 +4,19 @@ var attributesUtils = require('@y14e/attributes-utils');
 var rovingTabindex = require('@y14e/roving-tabindex');
 
 // src/index.ts
-var Disclosure = class {
+var Disclosure = class _Disclosure {
+  static defaults = {};
   #rootElement;
+  #defaults = { collapsible: true };
+  #settings;
   #detailsElements;
   #summaryElements;
   #contentElements;
   #bindings = /* @__PURE__ */ new WeakMap();
+  #controller = null;
   #cleanupRovingTabIndex = null;
   #isDestroyed = false;
-  constructor(root) {
+  constructor(root, options = {}) {
     if (!(root instanceof HTMLElement)) {
       throw new TypeError("Invalid root element");
     }
@@ -21,6 +25,8 @@ var Disclosure = class {
       return;
     }
     this.#rootElement = root;
+    this.#defaults = this.#mergeOptions(this.#defaults, _Disclosure.defaults);
+    this.#settings = this.#mergeOptions(this.#defaults, options);
     const NOT_NESTED = ":not(:scope summary + * *)";
     this.#detailsElements = [
       ...this.#rootElement.querySelectorAll(
@@ -62,7 +68,7 @@ var Disclosure = class {
     });
     this.#initialize();
   }
-  close(details) {
+  collapse(details) {
     if (this.#isDestroyed) {
       return;
     }
@@ -77,6 +83,8 @@ var Disclosure = class {
       return;
     }
     this.#isDestroyed = true;
+    this.#controller?.abort();
+    this.#controller = null;
     this.#cleanupRovingTabIndex?.();
     this.#cleanupRovingTabIndex = null;
     this.#detailsElements.length = 0;
@@ -85,7 +93,7 @@ var Disclosure = class {
     this.#contentElements.length = 0;
     this.#rootElement.removeAttribute("data-disclosure-initialized");
   }
-  open(details) {
+  expand(details) {
     if (this.#isDestroyed) {
       return;
     }
@@ -101,10 +109,15 @@ var Disclosure = class {
       "style",
       "tabindex"
     ]);
-    this.#summaryElements.filter((summary) => !this.#isFocusable(summary)).forEach((summary) => {
-      summary.setAttribute("aria-disabled", "true");
-      summary.setAttribute("tabindex", "-1");
-      summary.style.setProperty("pointer-events", "none");
+    this.#controller = new AbortController();
+    const { signal } = this.#controller;
+    this.#summaryElements.forEach((summary) => {
+      if (!this.#isFocusable(summary)) {
+        summary.setAttribute("aria-disabled", "true");
+        summary.setAttribute("tabindex", "-1");
+        summary.style.setProperty("pointer-events", "none");
+      }
+      summary.addEventListener("click", this.#onSummaryClick, { signal });
     });
     this.#cleanupRovingTabIndex = rovingTabindex.createRovingTabIndex(this.#rootElement, {
       direction: "vertical",
@@ -114,10 +127,27 @@ var Disclosure = class {
     });
     this.#rootElement.setAttribute("data-disclosure-initialized", "");
   }
-  #toggle(details, isOpen) {
-    if (details.open !== isOpen) {
-      details.open = isOpen;
+  #onSummaryClick = (event) => {
+    event.preventDefault();
+    const summary = event.currentTarget;
+    if (!(summary instanceof HTMLElement)) {
+      return;
     }
+    const binding = this.#bindings.get(summary);
+    if (!binding) {
+      return;
+    }
+    const { details } = binding;
+    this.#toggle(details, !details.open);
+  };
+  #toggle(details, isExpand) {
+    if (details.open === isExpand) {
+      return;
+    }
+    if (!isExpand && !this.#settings.collapsible && this.#detailsElements.filter((details2) => details2.open).length <= 1) {
+      return;
+    }
+    details.open = isExpand;
   }
   #createBinding(details, summary, content) {
     return { details, summary, content };
@@ -125,13 +155,16 @@ var Disclosure = class {
   #isFocusable(element) {
     return element.tabIndex >= 0;
   }
+  #mergeOptions(target, source) {
+    return { ...target, ...source };
+  }
 };
 /**
  * Disclosure (CSS Animation)
  * WAI-ARIA compliant disclosure pattern implementation in TypeScript.
  * Using the <details> and <summary> element.
  *
- * @version 1.3.13
+ * @version 2.0.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.cts

@@ -3,18 +3,22 @@
  * WAI-ARIA compliant disclosure pattern implementation in TypeScript.
  * Using the <details> and <summary> element.
  *
- * @version 1.3.13
+ * @version 2.0.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
  * @see {@link https://github.com/y14e/disclosure-css}
  */
+interface DisclosureOptions {
+    readonly collapsible?: boolean;
+}
 declare class Disclosure {
     #private;
-    constructor(root: HTMLElement);
-    close(details: HTMLDetailsElement): void;
+    static defaults: DisclosureOptions;
+    constructor(root: HTMLElement, options?: DisclosureOptions);
+    collapse(details: HTMLDetailsElement): void;
     destroy(): void;
-    open(details: HTMLDetailsElement): void;
+    expand(details: HTMLDetailsElement): void;
 }
 
-export { Disclosure as default };
+export { type DisclosureOptions, Disclosure as default };

package/dist/index.d.ts

@@ -3,18 +3,22 @@
  * WAI-ARIA compliant disclosure pattern implementation in TypeScript.
  * Using the <details> and <summary> element.
  *
- * @version 1.3.13
+ * @version 2.0.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
  * @see {@link https://github.com/y14e/disclosure-css}
  */
+interface DisclosureOptions {
+    readonly collapsible?: boolean;
+}
 declare class Disclosure {
     #private;
-    constructor(root: HTMLElement);
-    close(details: HTMLDetailsElement): void;
+    static defaults: DisclosureOptions;
+    constructor(root: HTMLElement, options?: DisclosureOptions);
+    collapse(details: HTMLDetailsElement): void;
     destroy(): void;
-    open(details: HTMLDetailsElement): void;
+    expand(details: HTMLDetailsElement): void;
 }
 
-export { Disclosure as default };
+export { type DisclosureOptions, Disclosure as default };

package/dist/index.js

@@ -2,15 +2,19 @@ import { restoreAttributes, saveAttributes } from '@y14e/attributes-utils';
 import { createRovingTabIndex } from '@y14e/roving-tabindex';
 
 // src/index.ts
-var Disclosure = class {
+var Disclosure = class _Disclosure {
+  static defaults = {};
   #rootElement;
+  #defaults = { collapsible: true };
+  #settings;
   #detailsElements;
   #summaryElements;
   #contentElements;
   #bindings = /* @__PURE__ */ new WeakMap();
+  #controller = null;
   #cleanupRovingTabIndex = null;
   #isDestroyed = false;
-  constructor(root) {
+  constructor(root, options = {}) {
     if (!(root instanceof HTMLElement)) {
       throw new TypeError("Invalid root element");
     }
@@ -19,6 +23,8 @@ var Disclosure = class {
       return;
     }
     this.#rootElement = root;
+    this.#defaults = this.#mergeOptions(this.#defaults, _Disclosure.defaults);
+    this.#settings = this.#mergeOptions(this.#defaults, options);
     const NOT_NESTED = ":not(:scope summary + * *)";
     this.#detailsElements = [
       ...this.#rootElement.querySelectorAll(
@@ -60,7 +66,7 @@ var Disclosure = class {
     });
     this.#initialize();
   }
-  close(details) {
+  collapse(details) {
     if (this.#isDestroyed) {
       return;
     }
@@ -75,6 +81,8 @@ var Disclosure = class {
       return;
     }
     this.#isDestroyed = true;
+    this.#controller?.abort();
+    this.#controller = null;
     this.#cleanupRovingTabIndex?.();
     this.#cleanupRovingTabIndex = null;
     this.#detailsElements.length = 0;
@@ -83,7 +91,7 @@ var Disclosure = class {
     this.#contentElements.length = 0;
     this.#rootElement.removeAttribute("data-disclosure-initialized");
   }
-  open(details) {
+  expand(details) {
     if (this.#isDestroyed) {
       return;
     }
@@ -99,10 +107,15 @@ var Disclosure = class {
       "style",
       "tabindex"
     ]);
-    this.#summaryElements.filter((summary) => !this.#isFocusable(summary)).forEach((summary) => {
-      summary.setAttribute("aria-disabled", "true");
-      summary.setAttribute("tabindex", "-1");
-      summary.style.setProperty("pointer-events", "none");
+    this.#controller = new AbortController();
+    const { signal } = this.#controller;
+    this.#summaryElements.forEach((summary) => {
+      if (!this.#isFocusable(summary)) {
+        summary.setAttribute("aria-disabled", "true");
+        summary.setAttribute("tabindex", "-1");
+        summary.style.setProperty("pointer-events", "none");
+      }
+      summary.addEventListener("click", this.#onSummaryClick, { signal });
     });
     this.#cleanupRovingTabIndex = createRovingTabIndex(this.#rootElement, {
       direction: "vertical",
@@ -112,10 +125,27 @@ var Disclosure = class {
     });
     this.#rootElement.setAttribute("data-disclosure-initialized", "");
   }
-  #toggle(details, isOpen) {
-    if (details.open !== isOpen) {
-      details.open = isOpen;
+  #onSummaryClick = (event) => {
+    event.preventDefault();
+    const summary = event.currentTarget;
+    if (!(summary instanceof HTMLElement)) {
+      return;
     }
+    const binding = this.#bindings.get(summary);
+    if (!binding) {
+      return;
+    }
+    const { details } = binding;
+    this.#toggle(details, !details.open);
+  };
+  #toggle(details, isExpand) {
+    if (details.open === isExpand) {
+      return;
+    }
+    if (!isExpand && !this.#settings.collapsible && this.#detailsElements.filter((details2) => details2.open).length <= 1) {
+      return;
+    }
+    details.open = isExpand;
   }
   #createBinding(details, summary, content) {
     return { details, summary, content };
@@ -123,13 +153,16 @@ var Disclosure = class {
   #isFocusable(element) {
     return element.tabIndex >= 0;
   }
+  #mergeOptions(target, source) {
+    return { ...target, ...source };
+  }
 };
 /**
  * Disclosure (CSS Animation)
  * WAI-ARIA compliant disclosure pattern implementation in TypeScript.
  * Using the <details> and <summary> element.
  *
- * @version 1.3.13
+ * @version 2.0.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/disclosure-css",
-  "version": "1.3.13",
+  "version": "2.0.1",
   "description": "WAI-ARIA compliant disclosure pattern implementation in TypeScript",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -45,13 +45,14 @@
   "devDependencies": {
     "bun-types": "latest",
     "tsup": "^8.0.0",
-    "typescript": "^5.6.0"
+    "typescript": "^5.6.0",
+    "utility-types": "^3.11.0"
   },
   "engines": {
     "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"
   }
 }