@rcarls/rc-accordion 0.1.0 → 0.3.0

package/README.md

@@ -1,3 +1,7 @@
 # @rcarls/rc-accordion
 
-Accordion coordinator for `rc-disclosure` components.
+Accordion coordinator for child native `<details>` panels with single- or multiple-open behavior, following the [WAI-ARIA Accordion pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
+
+Docs: [https://richardcarls.github.io/rc-webcomponents/components/rc-accordion](https://richardcarls.github.io/rc-webcomponents/components/rc-accordion).
+
+Also supports [`rc-disclosure`](./rc-disclosure) for granular control and fragment-target.

package/dist/custom-elements.json

@@ -38,12 +38,32 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Coordinates direct child disclosures so only one stays open at a time.\n\nChild disclosures remain light-DOM behavioral wrappers around native\n`<details>` elements. The accordion only adds group behavior and optional\narrow-key navigation between summaries.",
+          "description": "Accordion coordinator for child native <details> panels with single- or multiple-open\nbehavior, following the WAI-ARIA Accordion pattern.\n\nSupports native details and rc-disclosure wrappers.",
           "name": "RCAccordion",
           "members": [
+            {
+              "kind": "field",
+              "name": "_$managedGroupNames",
+              "privacy": "private",
+              "default": "new Map<HTMLDetailsElement, string>()"
+            },
+            {
+              "kind": "field",
+              "name": "_childrenObserver",
+              "privacy": "private",
+              "default": "new MutationObserver((records) => this._onChildrenChanged(records))"
+            },
+            {
+              "kind": "field",
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Allows more than one panel open at a time."
+            },
             {
               "kind": "method",
-              "name": "_details",
+              "name": "_$details",
               "privacy": "private",
               "return": {
                 "type": {
@@ -53,7 +73,7 @@
             },
             {
               "kind": "method",
-              "name": "_summaries",
+              "name": "_$summaries",
               "privacy": "private",
               "return": {
                 "type": {
@@ -78,8 +98,99 @@
             },
             {
               "kind": "field",
-              "name": "_onDisclosureToggle",
+              "name": "_onDetailsToggle",
               "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_setDetailsOpen",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "$target",
+                  "type": {
+                    "text": "HTMLDetailsElement"
+                  }
+                },
+                {
+                  "name": "open",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onChildrenChanged",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "records",
+                  "type": {
+                    "text": "MutationRecord[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_findAddedOpenDetails",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLDetailsElement | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "records",
+                  "type": {
+                    "text": "MutationRecord[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_enforceSingleOpen",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "$target",
+                  "optional": true,
+                  "type": {
+                    "text": "HTMLDetailsElement"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Allows more than one panel open at a time."
+            },
+            {
+              "name": "name"
             }
           ],
           "superclass": {

package/dist/rc-accordion-define.js.map

@@ -1 +1 @@
-{"version":3,"file":"rc-accordion-define.js","sources":["../src/define.ts"],"sourcesContent":["import '@rcarls/rc-disclosure/define';\n\nimport { RCAccordion } from './index.js';\n\ncustomElements.get('rc-accordion') || customElements.define('rc-accordion', RCAccordion);\n"],"names":["RCAccordion"],"mappings":";;AAIA,eAAe,IAAI,cAAc,KAAK,eAAe,OAAO,gBAAgBA,CAAW;"}
+{"version":3,"file":"rc-accordion-define.js","sources":["../src/define.ts"],"sourcesContent":["import '@rcarls/rc-disclosure/define';\n\nimport { RCAccordion } from './index.js';\n\nif (!customElements.get('rc-accordion')) {\n  customElements.define('rc-accordion', RCAccordion);\n}\n"],"names":["RCAccordion"],"mappings":";;AAIK,eAAe,IAAI,cAAc,KACpC,eAAe,OAAO,gBAAgBA,CAAW;"}

package/dist/rc-accordion.js

@@ -1,50 +1,118 @@
-class i extends HTMLElement {
+const a = ["ArrowDown", "ArrowUp", "Home", "End"];
+function u(l) {
+  return a.includes(l);
+}
+function c(l) {
+  return l?.localName === "rc-disclosure";
+}
+class m extends HTMLElement {
   constructor() {
-    super(...arguments), this._onKeydown = (e) => {
-      if (e.altKey || e.ctrlKey || e.metaKey || e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End") return;
-      const t = this._summaries();
-      if (t.length === 0) return;
-      const s = document.activeElement, r = s ? t.indexOf(s) : -1;
-      if (r === -1) return;
+    super(...arguments), this._$managedGroupNames = /* @__PURE__ */ new Map(), this._childrenObserver = new MutationObserver((e) => this._onChildrenChanged(e)), this._onKeydown = (e) => {
+      if (e.altKey || e.ctrlKey || e.metaKey || !u(e.key))
+        return;
+      const t = this._$summaries();
+      if (t.length === 0)
+        return;
+      const i = document.activeElement, n = i ? t.indexOf(i) : -1;
+      if (n === -1)
+        return;
       if (e.preventDefault(), e.key === "Home") {
-        t[0].focus();
+        const o = t.at(0);
+        if (!o)
+          return;
+        o.focus();
         return;
       }
       if (e.key === "End") {
-        t[t.length - 1].focus();
+        const o = t.at(-1);
+        if (!o)
+          return;
+        o.focus();
         return;
       }
-      const n = e.key === "ArrowDown" ? (r + 1) % t.length : (r - 1 + t.length) % t.length;
-      t[n].focus();
-    }, this._onDisclosureToggle = (e) => {
-      if (!e.detail.open) return;
+      const s = e.key === "ArrowDown" ? (n + 1) % t.length : (n - 1 + t.length) % t.length, r = t.at(s);
+      r && r.focus();
+    }, this._onDetailsToggle = (e) => {
       const t = e.target;
-      for (const s of this.querySelectorAll(":scope > rc-disclosure"))
-        s !== t && (s.open = !1);
+      t instanceof HTMLDetailsElement && (this.multiple || t.open && this._enforceSingleOpen(t));
     };
   }
+  static get observedAttributes() {
+    return ["multiple", "name"];
+  }
+  /** Allows more than one panel open at a time. */
+  get multiple() {
+    return this.hasAttribute("multiple");
+  }
+  set multiple(e) {
+    this.toggleAttribute("multiple", e);
+  }
   connectedCallback() {
-    this.addEventListener("rc-disclosure-toggle", this._onDisclosureToggle), this.addEventListener("keydown", this._onKeydown), this._syncNativeGroupNames();
+    this._childrenObserver.observe(this, { childList: !0, subtree: !0 }), this.addEventListener("toggle", this._onDetailsToggle, !0), this.addEventListener("keydown", this._onKeydown), this._syncNativeGroupNames(), this._enforceSingleOpen();
   }
   disconnectedCallback() {
-    this.removeEventListener("rc-disclosure-toggle", this._onDisclosureToggle), this.removeEventListener("keydown", this._onKeydown);
+    this._childrenObserver.disconnect(), this.removeEventListener("toggle", this._onDetailsToggle, !0), this.removeEventListener("keydown", this._onKeydown);
+  }
+  attributeChangedCallback(e, t, i) {
+    t !== i && ((e === "name" || e === "multiple") && this._syncNativeGroupNames(), e === "multiple" && !this.multiple && this._enforceSingleOpen());
   }
-  _details() {
+  _$details() {
     return Array.from(
-      this.querySelectorAll(":scope > rc-disclosure > details")
+      this.querySelectorAll(
+        ":scope > details, :scope > rc-disclosure > details"
+      )
     );
   }
-  _summaries() {
-    return this._details().map((e) => e.querySelector(":scope > summary")).filter((e) => e !== null);
+  _$summaries() {
+    return this._$details().map((e) => e.querySelector(":scope > summary")).filter((e) => e !== null);
   }
   _syncNativeGroupNames() {
-    const e = this.getAttribute("name");
-    if (e)
-      for (const t of this._details())
-        t.hasAttribute("name") || t.setAttribute("name", e);
+    const e = this.getAttribute("name"), t = this._$details(), i = new Set(t);
+    for (const [n, s] of this._$managedGroupNames)
+      (!i.has(n) || this.multiple || !e || s !== e || n.getAttribute("name") !== s) && (n.getAttribute("name") === s && n.removeAttribute("name"), this._$managedGroupNames.delete(n));
+    if (!(this.multiple || !e))
+      for (const n of t)
+        n.hasAttribute("name") && !this._$managedGroupNames.has(n) || (n.setAttribute("name", e), this._$managedGroupNames.set(n, e));
+  }
+  _setDetailsOpen(e, t) {
+    const i = e.parentElement;
+    if (c(i)) {
+      i.open = t;
+      return;
+    }
+    e.open = t;
+  }
+  _onChildrenChanged(e) {
+    this._syncNativeGroupNames(), !this.multiple && this._enforceSingleOpen(this._findAddedOpenDetails(e));
+  }
+  _findAddedOpenDetails(e) {
+    const i = this._$details().filter(
+      (n) => e.some(
+        (s) => Array.from(s.addedNodes).some(
+          (r) => r === n || r instanceof Element && r.contains(n)
+        )
+      )
+    );
+    for (let n = i.length - 1; n >= 0; n -= 1) {
+      const s = i.at(n);
+      if (s && s.open)
+        return s;
+    }
+  }
+  _enforceSingleOpen(e) {
+    const t = this._$details();
+    if (e && !t.includes(e))
+      return;
+    const i = t.filter((s) => s.open);
+    if (i.length <= 1)
+      return;
+    const n = e ?? i.at(0);
+    if (n)
+      for (const s of i)
+        s !== n && this._setDetailsOpen(s, !1);
   }
 }
 export {
-  i as RCAccordion
+  m as RCAccordion
 };
 //# sourceMappingURL=rc-accordion.js.map

package/dist/rc-accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"rc-accordion.js","sources":["../src/rc-accordion.ts"],"sourcesContent":["import type { RCDisclosureToggleEvent } from '@rcarls/rc-disclosure';\nimport type { RCDisclosure } from '@rcarls/rc-disclosure';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-accordion': RCAccordion;\n  }\n}\n\n/**\n * Coordinates direct child disclosures so only one stays open at a time.\n *\n * Child disclosures remain light-DOM behavioral wrappers around native\n * `<details>` elements. The accordion only adds group behavior and optional\n * arrow-key navigation between summaries.\n */\nexport class RCAccordion extends HTMLElement {\n  connectedCallback(): void {\n    this.addEventListener('rc-disclosure-toggle', this._onDisclosureToggle as EventListener);\n    this.addEventListener('keydown', this._onKeydown);\n    this._syncNativeGroupNames();\n  }\n\n  disconnectedCallback(): void {\n    this.removeEventListener('rc-disclosure-toggle', this._onDisclosureToggle as EventListener);\n    this.removeEventListener('keydown', this._onKeydown);\n  }\n\n  private _details(): HTMLDetailsElement[] {\n    return Array.from(\n      this.querySelectorAll<HTMLDetailsElement>(':scope > rc-disclosure > details'),\n    );\n  }\n\n  private _summaries(): HTMLElement[] {\n    return this._details()\n      .map((details) => details.querySelector<HTMLElement>(':scope > summary'))\n      .filter((summary): summary is HTMLElement => summary !== null);\n  }\n\n  private _syncNativeGroupNames(): void {\n    const name = this.getAttribute('name');\n    if (!name) return;\n\n    for (const details of this._details()) {\n      if (!details.hasAttribute('name')) details.setAttribute('name', name);\n    }\n  }\n\n  private _onKeydown = (e: KeyboardEvent): void => {\n    if (e.altKey || e.ctrlKey || e.metaKey) return;\n    if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' && e.key !== 'Home' && e.key !== 'End') return;\n\n    const summaries = this._summaries();\n    if (summaries.length === 0) return;\n\n    const active = document.activeElement as HTMLElement | null;\n    const idx = active ? summaries.indexOf(active) : -1;\n    if (idx === -1) return;\n\n    e.preventDefault();\n\n    if (e.key === 'Home') {\n      summaries[0].focus();\n      return;\n    }\n\n    if (e.key === 'End') {\n      summaries[summaries.length - 1].focus();\n      return;\n    }\n\n    const next = e.key === 'ArrowDown'\n      ? (idx + 1) % summaries.length\n      : (idx - 1 + summaries.length) % summaries.length;\n\n    summaries[next].focus();\n  };\n\n  private _onDisclosureToggle = (e: CustomEvent<RCDisclosureToggleEvent>): void => {\n    if (!e.detail.open) return;\n\n    const opened = e.target;\n    for (const disclosure of this.querySelectorAll<RCDisclosure>(':scope > rc-disclosure')) {\n      if (disclosure !== opened) disclosure.open = false;\n    }\n  };\n}\n\nexport default RCAccordion;\n"],"names":["RCAccordion","summaries","active","idx","next","opened","disclosure","details","summary","name"],"mappings":"AAgBO,MAAMA,UAAoB,YAAY;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAiCL,KAAQ,aAAa,CAAC,MAA2B;AAE/C,UADI,EAAE,UAAU,EAAE,WAAW,EAAE,WAC3B,EAAE,QAAQ,eAAe,EAAE,QAAQ,aAAa,EAAE,QAAQ,UAAU,EAAE,QAAQ,MAAO;AAEzF,YAAMC,IAAY,KAAK,WAAA;AACvB,UAAIA,EAAU,WAAW,EAAG;AAE5B,YAAMC,IAAS,SAAS,eAClBC,IAAMD,IAASD,EAAU,QAAQC,CAAM,IAAI;AACjD,UAAIC,MAAQ,GAAI;AAIhB,UAFA,EAAE,eAAA,GAEE,EAAE,QAAQ,QAAQ;AACpB,QAAAF,EAAU,CAAC,EAAE,MAAA;AACb;AAAA,MACF;AAEA,UAAI,EAAE,QAAQ,OAAO;AACnB,QAAAA,EAAUA,EAAU,SAAS,CAAC,EAAE,MAAA;AAChC;AAAA,MACF;AAEA,YAAMG,IAAO,EAAE,QAAQ,eAClBD,IAAM,KAAKF,EAAU,UACrBE,IAAM,IAAIF,EAAU,UAAUA,EAAU;AAE7C,MAAAA,EAAUG,CAAI,EAAE,MAAA;AAAA,IAClB,GAEA,KAAQ,sBAAsB,CAAC,MAAkD;AAC/E,UAAI,CAAC,EAAE,OAAO,KAAM;AAEpB,YAAMC,IAAS,EAAE;AACjB,iBAAWC,KAAc,KAAK,iBAA+B,wBAAwB;AACnF,QAAIA,MAAeD,MAAQC,EAAW,OAAO;AAAA,IAEjD;AAAA,EAAA;AAAA,EArEA,oBAA0B;AACxB,SAAK,iBAAiB,wBAAwB,KAAK,mBAAoC,GACvF,KAAK,iBAAiB,WAAW,KAAK,UAAU,GAChD,KAAK,sBAAA;AAAA,EACP;AAAA,EAEA,uBAA6B;AAC3B,SAAK,oBAAoB,wBAAwB,KAAK,mBAAoC,GAC1F,KAAK,oBAAoB,WAAW,KAAK,UAAU;AAAA,EACrD;AAAA,EAEQ,WAAiC;AACvC,WAAO,MAAM;AAAA,MACX,KAAK,iBAAqC,kCAAkC;AAAA,IAAA;AAAA,EAEhF;AAAA,EAEQ,aAA4B;AAClC,WAAO,KAAK,SAAA,EACT,IAAI,CAACC,MAAYA,EAAQ,cAA2B,kBAAkB,CAAC,EACvE,OAAO,CAACC,MAAoCA,MAAY,IAAI;AAAA,EACjE;AAAA,EAEQ,wBAA8B;AACpC,UAAMC,IAAO,KAAK,aAAa,MAAM;AACrC,QAAKA;AAEL,iBAAWF,KAAW,KAAK;AACzB,QAAKA,EAAQ,aAAa,MAAM,KAAGA,EAAQ,aAAa,QAAQE,CAAI;AAAA,EAExE;AAwCF;"}
+{"version":3,"file":"rc-accordion.js","sources":["../src/rc-accordion.ts"],"sourcesContent":["const NAVIGATION_KEYS = ['ArrowDown', 'ArrowUp', 'Home', 'End'] as const;\n\ntype NavigationKey = (typeof NAVIGATION_KEYS)[number];\n\ntype RCDisclosureElement = HTMLElement & {\n  open: boolean;\n};\n\nfunction isNavigationKey(key: string): key is NavigationKey {\n  return NAVIGATION_KEYS.includes(key as NavigationKey);\n}\n\nfunction isRCDisclosureElement($el: Element | null): $el is RCDisclosureElement {\n  return $el?.localName === 'rc-disclosure';\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-accordion': RCAccordion;\n  }\n}\n\n/**\n * Accordion coordinator for child native <details> panels with single- or multiple-open\n * behavior, following the WAI-ARIA Accordion pattern.\n *\n * Supports native details and rc-disclosure wrappers.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-accordion rc-accordion docs}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/accordion/ WAI-ARIA Accordion pattern}\n *\n * @attr {boolean} multiple - Allows more than one panel open at a time.\n */\nexport class RCAccordion extends HTMLElement {\n  private _$managedGroupNames = new Map<HTMLDetailsElement, string>();\n\n  private _childrenObserver = new MutationObserver((records) => this._onChildrenChanged(records));\n\n  static get observedAttributes(): string[] {\n    return ['multiple', 'name'];\n  }\n\n  /** Allows more than one panel open at a time. */\n  get multiple(): boolean {\n    return this.hasAttribute('multiple');\n  }\n\n  set multiple(value: boolean) {\n    this.toggleAttribute('multiple', value);\n  }\n\n  connectedCallback(): void {\n    this._childrenObserver.observe(this, { childList: true, subtree: true });\n\n    this.addEventListener('toggle', this._onDetailsToggle, true);\n    this.addEventListener('keydown', this._onKeydown);\n\n    this._syncNativeGroupNames();\n    this._enforceSingleOpen();\n  }\n\n  disconnectedCallback(): void {\n    this._childrenObserver.disconnect();\n\n    this.removeEventListener('toggle', this._onDetailsToggle, true);\n    this.removeEventListener('keydown', this._onKeydown);\n  }\n\n  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void {\n    if (oldValue === newValue) {\n      return;\n    }\n\n    if (name === 'name' || name === 'multiple') {\n      this._syncNativeGroupNames();\n    }\n\n    if (name === 'multiple' && !this.multiple) {\n      this._enforceSingleOpen();\n    }\n  }\n\n  private _$details(): HTMLDetailsElement[] {\n    return Array.from(\n      this.querySelectorAll<HTMLDetailsElement>(\n        ':scope > details, :scope > rc-disclosure > details',\n      ),\n    );\n  }\n\n  private _$summaries(): HTMLElement[] {\n    return this._$details()\n      .map(($details) => $details.querySelector<HTMLElement>(':scope > summary'))\n      .filter(($summary): $summary is HTMLElement => $summary !== null);\n  }\n\n  private _syncNativeGroupNames(): void {\n    const groupName = this.getAttribute('name');\n    const $details = this._$details();\n    const $currentDetails = new Set($details);\n\n    for (const [$el, managedName] of this._$managedGroupNames) {\n      const shouldReleaseName =\n        !$currentDetails.has($el) ||\n        this.multiple ||\n        !groupName ||\n        managedName !== groupName ||\n        $el.getAttribute('name') !== managedName;\n\n      if (!shouldReleaseName) {\n        continue;\n      }\n\n      if ($el.getAttribute('name') === managedName) {\n        $el.removeAttribute('name');\n      }\n\n      this._$managedGroupNames.delete($el);\n    }\n\n    if (this.multiple || !groupName) {\n      return;\n    }\n\n    for (const $el of $details) {\n      if ($el.hasAttribute('name') && !this._$managedGroupNames.has($el)) {\n        continue;\n      }\n\n      $el.setAttribute('name', groupName);\n      this._$managedGroupNames.set($el, groupName);\n    }\n  }\n\n  private _onKeydown = (e: KeyboardEvent): void => {\n    if (e.altKey || e.ctrlKey || e.metaKey) {\n      return;\n    }\n\n    if (!isNavigationKey(e.key)) {\n      return;\n    }\n\n    const $summaries = this._$summaries();\n\n    if ($summaries.length === 0) {\n      return;\n    }\n\n    const $active = document.activeElement as HTMLElement | null;\n    const index = $active ? $summaries.indexOf($active) : -1;\n\n    if (index === -1) {\n      return;\n    }\n\n    e.preventDefault();\n\n    if (e.key === 'Home') {\n      const $firstSummary = $summaries.at(0);\n\n      if (!$firstSummary) {\n        return;\n      }\n\n      $firstSummary.focus();\n\n      return;\n    }\n\n    if (e.key === 'End') {\n      const $lastSummary = $summaries.at(-1);\n\n      if (!$lastSummary) {\n        return;\n      }\n\n      $lastSummary.focus();\n\n      return;\n    }\n\n    const next =\n      e.key === 'ArrowDown'\n        ? (index + 1) % $summaries.length\n        : (index - 1 + $summaries.length) % $summaries.length;\n\n    const $nextSummary = $summaries.at(next);\n\n    if (!$nextSummary) {\n      return;\n    }\n\n    $nextSummary.focus();\n  };\n\n  private _onDetailsToggle = (e: Event): void => {\n    const $opened = e.target;\n\n    if (!($opened instanceof HTMLDetailsElement)) {\n      return;\n    }\n\n    if (this.multiple) {\n      return;\n    }\n\n    if (!$opened.open) {\n      return;\n    }\n\n    this._enforceSingleOpen($opened);\n  };\n\n  private _setDetailsOpen($target: HTMLDetailsElement, open: boolean): void {\n    const $parent = $target.parentElement;\n\n    if (isRCDisclosureElement($parent)) {\n      $parent.open = open;\n\n      return;\n    }\n\n    $target.open = open;\n  }\n\n  private _onChildrenChanged(records: MutationRecord[]): void {\n    this._syncNativeGroupNames();\n\n    if (this.multiple) {\n      return;\n    }\n\n    this._enforceSingleOpen(this._findAddedOpenDetails(records));\n  }\n\n  private _findAddedOpenDetails(records: MutationRecord[]): HTMLDetailsElement | undefined {\n    const $details = this._$details();\n\n    const $added = $details.filter(($el) =>\n      records.some((record) =>\n        Array.from(record.addedNodes).some(\n          ($node) => $node === $el || ($node instanceof Element && $node.contains($el)),\n        ),\n      ),\n    );\n\n    for (let i = $added.length - 1; i >= 0; i -= 1) {\n      const $el = $added.at(i);\n\n      if (!$el) {\n        continue;\n      }\n\n      if ($el.open) {\n        return $el;\n      }\n    }\n\n    return undefined;\n  }\n\n  private _enforceSingleOpen($target?: HTMLDetailsElement): void {\n    const $details = this._$details();\n\n    if ($target && !$details.includes($target)) {\n      return;\n    }\n\n    const $openDetails = $details.filter(($el) => $el.open);\n\n    if ($openDetails.length <= 1) {\n      return;\n    }\n\n    const $keepOpen = $target ?? $openDetails.at(0);\n\n    if (!$keepOpen) {\n      return;\n    }\n\n    for (const $el of $openDetails) {\n      if ($el !== $keepOpen) {\n        this._setDetailsOpen($el, false);\n      }\n    }\n  }\n}\n\nexport default RCAccordion;\n"],"names":["NAVIGATION_KEYS","isNavigationKey","key","isRCDisclosureElement","$el","RCAccordion","records","$summaries","$active","index","$firstSummary","$lastSummary","next","$nextSummary","$opened","value","name","oldValue","newValue","$details","$summary","groupName","$currentDetails","managedName","$target","open","$parent","$added","record","$node","i","$openDetails","$keepOpen"],"mappings":"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"}

package/dist/types/packages/rc-accordion/src/rc-accordion.d.ts

@@ -4,19 +4,34 @@ declare global {
     }
 }
 /**
- * Coordinates direct child disclosures so only one stays open at a time.
+ * Accordion coordinator for child native <details> panels with single- or multiple-open
+ * behavior, following the WAI-ARIA Accordion pattern.
  *
- * Child disclosures remain light-DOM behavioral wrappers around native
- * `<details>` elements. The accordion only adds group behavior and optional
- * arrow-key navigation between summaries.
+ * Supports native details and rc-disclosure wrappers.
+ *
+ * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-accordion rc-accordion docs}
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/accordion/ WAI-ARIA Accordion pattern}
+ *
+ * @attr {boolean} multiple - Allows more than one panel open at a time.
  */
 export declare class RCAccordion extends HTMLElement {
+    private _$managedGroupNames;
+    private _childrenObserver;
+    static get observedAttributes(): string[];
+    /** Allows more than one panel open at a time. */
+    get multiple(): boolean;
+    set multiple(value: boolean);
     connectedCallback(): void;
     disconnectedCallback(): void;
-    private _details;
-    private _summaries;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private _$details;
+    private _$summaries;
     private _syncNativeGroupNames;
     private _onKeydown;
-    private _onDisclosureToggle;
+    private _onDetailsToggle;
+    private _setDetailsOpen;
+    private _onChildrenChanged;
+    private _findAddedOpenDetails;
+    private _enforceSingleOpen;
 }
 export default RCAccordion;

package/package.json

@@ -3,14 +3,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.0",
-  "description": "Headless WAI-ARIA accordion coordinator for disclosure groups, built with Lit",
+  "version": "0.3.0",
+  "description": "Accordion coordinator for child native <details> panels with single- or multiple-open behavior.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
     "directory": "packages/rc-accordion"
   },
-  "homepage": "https://github.com/richardcarls/rc-webcomponents#readme",
+  "homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-accordion",
   "license": "MIT",
   "type": "module",
   "files": [
@@ -37,21 +37,17 @@
   ],
   "customElements": "dist/custom-elements.json",
   "scripts": {
-    "dev": "vite",
     "build": "tsc && vite build && cem analyze",
     "cem:analyze": "cem analyze",
-    "preview": "vite preview",
-    "test:browser": "vitest",
-    "test:browser:chrome": "vitest --project=chromium",
-    "test:browser:firefox": "vitest --project=firefox",
-    "yalc:publish": "yalc publish --push"
+    "test:browser": "vitest --run",
+    "test:browser:chrome": "vitest --run --project=chromium",
+    "test:browser:firefox": "vitest --run --project=firefox"
   },
   "dependencies": {
-    "@rcarls/rc-disclosure": "workspace:^"
+    "@rcarls/rc-disclosure": "workspace:*"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.11.0",
-    "@guanghechen/rollup-plugin-copy": "^6.0.9",
     "@vitest/browser-playwright": "4.1.5",
     "lit": "^3.0.0",
     "playwright": "^1.56.0",

package/dist/demo.css

@@ -1,85 +0,0 @@
-*, *::before, *::after {
-  box-sizing: border-box;
-}
-
-:root {
-  color-scheme: light dark;
-  --rc-accent: Highlight; /* Chrome doesn't support AccentColor on the open web */
-}
-
-@supports (color: AccentColor) {
-  :root {
-    --rc-accent: AccentColor;
-  }
-}
-
-[data-theme="light"] { color-scheme: light; }
-[data-theme="dark"]  { color-scheme: dark;  }
-
-[data-theme="solarized-light"] {
-  color-scheme: light;
-  --rc-surface: #fdf6e3;
-  --rc-text:    #657b83;
-  --rc-border:  1px solid #93a1a1;
-  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .12);
-}
-
-[data-theme="solarized-dark"] {
-  color-scheme: dark;
-  --rc-surface: #002b36;
-  --rc-text:    #839496;
-  --rc-border:  1px solid #586e75;
-  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .3);
-}
-
-body {
-  font-family: system-ui, sans-serif;
-  margin: 0;
-}
-
-.demo-page {
-  max-width: 60rem;
-  margin: 0 auto;
-  padding: 2rem 1.5rem;
-}
-
-.demo-controls {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 2rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid ButtonBorder;
-}
-
-.demo-controls .demo-title {
-  flex: 1;
-}
-
-.demo-controls h1 {
-  margin: 0 0 0.15rem;
-  font-size: 1.5rem;
-}
-
-.demo-controls a {
-  font-size: 0.8rem;
-}
-
-.demo-section {
-  margin-bottom: 2rem;
-}
-
-.demo-section h2 {
-  margin: 0 0 0.5rem;
-}
-
-.theme-picker {
-  padding: 0.35em 0.75em;
-  font-family: inherit;
-  font-size: 0.8rem;
-  cursor: pointer;
-  border: 1px solid ButtonBorder;
-  border-radius: 4px;
-  background: Canvas;
-  color: CanvasText;
-}

package/dist/demo.js

@@ -1,40 +0,0 @@
-const THEMES = ['', 'light', 'dark', 'solarized-light', 'solarized-dark'];
-const LABELS = ['Auto', 'Light', 'Dark', 'Solarized ☀', 'Solarized ☾'];
-
-const stored = localStorage.getItem('rc-demo-theme') ?? '';
-applyTheme(stored);
-
-function applyTheme(theme) {
-  if (theme) {
-    document.documentElement.dataset.theme = theme;
-  } else {
-    delete document.documentElement.dataset.theme;
-  }
-}
-
-function currentIndex() {
-  const current = document.documentElement.dataset.theme ?? '';
-  const idx = THEMES.indexOf(current);
-  return idx === -1 ? 0 : idx;
-}
-
-function updateButtons() {
-  const label = LABELS[currentIndex()];
-  document.querySelectorAll('.theme-picker').forEach((btn) => {
-    btn.textContent = label;
-  });
-}
-
-window.cycleTheme = function () {
-  const next = THEMES[(currentIndex() + 1) % THEMES.length];
-  applyTheme(next);
-  localStorage.setItem('rc-demo-theme', next);
-  updateButtons();
-};
-
-document.addEventListener('DOMContentLoaded', () => {
-  updateButtons();
-  document.querySelectorAll('.theme-picker').forEach((btn) => {
-    btn.addEventListener('click', window.cycleTheme);
-  });
-});