@rcarls/rc-accordion 0.1.0

package/README.md

@@ -0,0 +1,3 @@
+# @rcarls/rc-accordion
+
+Accordion coordinator for `rc-disclosure` components.

package/dist/custom-elements.json

@@ -0,0 +1,112 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/define.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "rc-accordion",
+          "declaration": {
+            "name": "RCAccordion",
+            "module": "/src/index.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/rc-accordion.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/rc-accordion.ts",
+      "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.",
+          "name": "RCAccordion",
+          "members": [
+            {
+              "kind": "method",
+              "name": "_details",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLDetailsElement[]"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_summaries",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLElement[]"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_syncNativeGroupNames",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_onKeydown",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_onDisclosureToggle",
+              "privacy": "private"
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "rc-accordion",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RCAccordion",
+          "declaration": {
+            "name": "RCAccordion",
+            "module": "src/rc-accordion.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "RCAccordion",
+            "module": "src/rc-accordion.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/demo.css

@@ -0,0 +1,85 @@
+*, *::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

@@ -0,0 +1,40 @@
+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);
+  });
+});

package/dist/rc-accordion-define.js

@@ -0,0 +1,4 @@
+import "@rcarls/rc-disclosure/define";
+import { RCAccordion as o } from "./rc-accordion.js";
+customElements.get("rc-accordion") || customElements.define("rc-accordion", o);
+//# sourceMappingURL=rc-accordion-define.js.map

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

@@ -0,0 +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;"}

package/dist/rc-accordion.js

@@ -0,0 +1,50 @@
+class i 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;
+      if (e.preventDefault(), e.key === "Home") {
+        t[0].focus();
+        return;
+      }
+      if (e.key === "End") {
+        t[t.length - 1].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 t = e.target;
+      for (const s of this.querySelectorAll(":scope > rc-disclosure"))
+        s !== t && (s.open = !1);
+    };
+  }
+  connectedCallback() {
+    this.addEventListener("rc-disclosure-toggle", this._onDisclosureToggle), this.addEventListener("keydown", this._onKeydown), this._syncNativeGroupNames();
+  }
+  disconnectedCallback() {
+    this.removeEventListener("rc-disclosure-toggle", this._onDisclosureToggle), this.removeEventListener("keydown", this._onKeydown);
+  }
+  _details() {
+    return Array.from(
+      this.querySelectorAll(":scope > rc-disclosure > details")
+    );
+  }
+  _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);
+  }
+}
+export {
+  i as RCAccordion
+};
+//# sourceMappingURL=rc-accordion.js.map

package/dist/rc-accordion.js.map

@@ -0,0 +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;"}

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

@@ -0,0 +1 @@
+export * from './rc-accordion.js';

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

@@ -0,0 +1,22 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        'rc-accordion': RCAccordion;
+    }
+}
+/**
+ * Coordinates direct child disclosures so only one stays open at a time.
+ *
+ * Child disclosures remain light-DOM behavioral wrappers around native
+ * `<details>` elements. The accordion only adds group behavior and optional
+ * arrow-key navigation between summaries.
+ */
+export declare class RCAccordion extends HTMLElement {
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _details;
+    private _summaries;
+    private _syncNativeGroupNames;
+    private _onKeydown;
+    private _onDisclosureToggle;
+}
+export default RCAccordion;

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@rcarls/rc-accordion",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.1.0",
+  "description": "Headless WAI-ARIA accordion coordinator for disclosure groups, built with Lit",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
+    "directory": "packages/rc-accordion"
+  },
+  "homepage": "https://github.com/richardcarls/rc-webcomponents#readme",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/rc-accordion.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/packages/rc-accordion/src/index.d.ts",
+        "default": "./dist/rc-accordion.js"
+      }
+    },
+    "./define": {
+      "import": {
+        "types": "./dist/types/packages/rc-accordion/src/define.d.ts",
+        "default": "./dist/rc-accordion-define.js"
+      }
+    }
+  },
+  "types": "./dist/types/packages/rc-accordion/src/index.d.ts",
+  "sideEffects": [
+    "./dist/rc-accordion-define.js"
+  ],
+  "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"
+  },
+  "dependencies": {
+    "@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",
+    "rollup": "^4.60.2",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.6",
+    "vitest-browser-lit": "^1.0.1"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  }
+}