@data-slot/accordion 0.1.0

package/README.md

@@ -0,0 +1,154 @@
+# @data-slot/accordion
+
+Headless accordion component for vanilla JavaScript. Accessible, unstyled, tiny.
+
+## Installation
+
+```bash
+npm install @data-slot/accordion
+```
+
+## Quick Start
+
+```html
+<div data-slot="accordion">
+  <div data-slot="accordion-item" data-value="one">
+    <button data-slot="accordion-trigger">Section One</button>
+    <div data-slot="accordion-content">Content for section one</div>
+  </div>
+  <div data-slot="accordion-item" data-value="two">
+    <button data-slot="accordion-trigger">Section Two</button>
+    <div data-slot="accordion-content">Content for section two</div>
+  </div>
+</div>
+
+<script type="module">
+  import { create } from "@data-slot/accordion";
+
+  const controllers = create();
+</script>
+```
+
+## API
+
+### `create(scope?)`
+
+Auto-discover and bind all accordion instances in a scope (defaults to `document`).
+
+```typescript
+import { create } from "@data-slot/accordion";
+
+const controllers = create(); // Returns AccordionController[]
+```
+
+### `createAccordion(root, options?)`
+
+Create a controller for a specific element.
+
+```typescript
+import { createAccordion } from "@data-slot/accordion";
+
+const accordion = createAccordion(element, {
+  multiple: true,
+  defaultValue: ["one"],
+  collapsible: true,
+  onValueChange: (values) => console.log(values),
+});
+```
+
+### Options
+
+| Option          | Type                        | Default     | Description                                             |
+| --------------- | --------------------------- | ----------- | ------------------------------------------------------- |
+| `multiple`      | `boolean`                   | `false`     | Allow multiple items open at once                       |
+| `defaultValue`  | `string \| string[]`        | `undefined` | Initially expanded item(s)                              |
+| `collapsible`   | `boolean`                   | `true`      | Whether items can be fully collapsed (single mode only) |
+| `onValueChange` | `(value: string[]) => void` | `undefined` | Callback when expanded items change                     |
+
+### Controller
+
+| Method/Property   | Description                                     |
+| ----------------- | ----------------------------------------------- |
+| `expand(value)`   | Expand an item by value                         |
+| `collapse(value)` | Collapse an item by value                       |
+| `toggle(value)`   | Toggle an item by value                         |
+| `value`           | Currently expanded values (readonly `string[]`) |
+| `destroy()`       | Cleanup all event listeners                     |
+
+## Markup Structure
+
+```html
+<div data-slot="accordion">
+  <div data-slot="accordion-item" data-value="unique-id">
+    <button data-slot="accordion-trigger">Trigger</button>
+    <div data-slot="accordion-content">Content</div>
+  </div>
+</div>
+```
+
+## Styling
+
+Use `data-state` attributes for CSS styling:
+
+```css
+/* Closed state */
+[data-slot="accordion-content"][data-state="closed"] {
+  display: none;
+}
+
+/* Open state */
+[data-slot="accordion-content"][data-state="open"] {
+  display: block;
+}
+
+/* Animate with grid */
+[data-slot="accordion-item"] {
+  display: grid;
+  grid-template-rows: auto 0fr;
+  transition: grid-template-rows 0.3s;
+}
+
+[data-slot="accordion-item"][data-state="open"] {
+  grid-template-rows: auto 1fr;
+}
+
+[data-slot="accordion-content"] {
+  overflow: hidden;
+}
+```
+
+With Tailwind:
+
+```html
+<div
+  data-slot="accordion-item"
+  class="grid grid-rows-[auto_0fr] data-[state=open]:grid-rows-[auto_1fr] transition-[grid-template-rows]"
+>
+  <button data-slot="accordion-trigger">...</button>
+  <div data-slot="accordion-content" class="overflow-hidden">...</div>
+</div>
+```
+
+## Keyboard Navigation
+
+| Key               | Action                         |
+| ----------------- | ------------------------------ |
+| `Enter` / `Space` | Toggle focused item            |
+| `ArrowDown`       | Move focus to next trigger     |
+| `ArrowUp`         | Move focus to previous trigger |
+| `Home`            | Move focus to first trigger    |
+| `End`             | Move focus to last trigger     |
+
+## Events
+
+Listen for changes via custom events:
+
+```javascript
+element.addEventListener("accordion:change", (e) => {
+  console.log("Expanded items:", e.detail.value);
+});
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1 @@
+var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));const c=s(require(`@data-slot/core`));function l(e,t={}){let{multiple:n=!1,onValueChange:r,collapsible:i=!0}=t,a=(0,c.getParts)(e,`accordion-item`);if(a.length===0)throw Error(`Accordion requires at least one accordion-item`);let o=t.defaultValue?Array.isArray(t.defaultValue)?t.defaultValue:[t.defaultValue]:[],s=new Set(o),l=[],u=[];a.forEach(t=>{let a=t.dataset.value;if(!a)return;let o=(0,c.getPart)(t,`accordion-trigger`),f=(0,c.getPart)(t,`accordion-content`);if(!o||!f)return;u.push(o);let p=(0,c.ensureId)(f,`accordion-content`),m=(0,c.ensureId)(o,`accordion-trigger`);o.setAttribute(`aria-controls`,p),f.setAttribute(`aria-labelledby`,m),f.setAttribute(`role`,`region`),l.push((0,c.on)(o,`click`,()=>{let t=s.has(a);if(t){if(!i&&!n&&s.size===1)return;s.delete(a)}else n?s.add(a):s=new Set([a]);d(),(0,c.emit)(e,`accordion:change`,{value:[...s]}),r?.([...s])}))}),l.push((0,c.on)(e,`keydown`,e=>{let t=e.target,n=u.indexOf(t);if(n===-1)return;let r=n;switch(e.key){case`ArrowDown`:r=n+1,r>=u.length&&(r=0);break;case`ArrowUp`:r=n-1,r<0&&(r=u.length-1);break;case`Home`:r=0;break;case`End`:r=u.length-1;break;default:return}e.preventDefault(),u[r]?.focus()}));let d=()=>{a.forEach(e=>{let t=e.dataset.value;if(!t)return;let n=(0,c.getPart)(e,`accordion-trigger`),r=(0,c.getPart)(e,`accordion-content`);if(!n||!r)return;let i=s.has(t),a=n.getAttribute(`aria-expanded`)===`true`;if((0,c.setAria)(n,`expanded`,i),e.setAttribute(`data-state`,i?`open`:`closed`),r.setAttribute(`data-state`,i?`open`:`closed`),i)r.hidden=!1,r._accordionTimeout&&(clearTimeout(r._accordionTimeout),r._accordionTimeout=null);else if(a){r._accordionTimeout&&clearTimeout(r._accordionTimeout);let e=r.parentElement,t=n=>{if(n.propertyName===`grid-template-rows`){let n=r.getAttribute(`data-state`);n===`closed`&&(r.hidden=!0),e?.removeEventListener(`transitionend`,t),r._accordionTimeout&&(clearTimeout(r._accordionTimeout),r._accordionTimeout=null)}};e?(e.addEventListener(`transitionend`,t),r._accordionTimeout=setTimeout(()=>{let n=r.getAttribute(`data-state`);n===`closed`&&(r.hidden=!0),e.removeEventListener(`transitionend`,t),r._accordionTimeout=null},350)):r._accordionTimeout=setTimeout(()=>{r.hidden=!0,r._accordionTimeout=null},300)}else r.hidden=!0})};d();let f={expand:t=>{s.has(t)||(n?s.add(t):s=new Set([t]),d(),(0,c.emit)(e,`accordion:change`,{value:[...s]}),r?.([...s]))},collapse:t=>{s.has(t)&&(!i&&!n&&s.size===1||(s.delete(t),d(),(0,c.emit)(e,`accordion:change`,{value:[...s]}),r?.([...s])))},toggle:e=>{s.has(e)?f.collapse(e):f.expand(e)},get value(){return[...s]},destroy:()=>{l.forEach(e=>e()),l.length=0,a.forEach(e=>{let t=(0,c.getPart)(e,`accordion-content`);t&&t._accordionTimeout&&(clearTimeout(t._accordionTimeout),t._accordionTimeout=null)})}};return f}const u=new WeakSet;function d(e=document){let t=[];for(let n of(0,c.getRoots)(e,`accordion`)){if(u.has(n))continue;u.add(n),t.push(l(n))}return t}exports.create=d,exports.createAccordion=l;

package/dist/index.d.cts

@@ -0,0 +1,48 @@
+//#region src/index.d.ts
+interface AccordionOptions {
+  /** Allow multiple items open at once */
+  multiple?: boolean;
+  /** Initially expanded item(s) */
+  defaultValue?: string | string[];
+  /** Callback when expanded items change */
+  onValueChange?: (value: string[]) => void;
+  /** Whether items can be fully collapsed (only applies to single mode) */
+  collapsible?: boolean;
+}
+interface AccordionController {
+  /** Expand an item by value */
+  expand(value: string): void;
+  /** Collapse an item by value */
+  collapse(value: string): void;
+  /** Toggle an item by value */
+  toggle(value: string): void;
+  /** Currently expanded values */
+  readonly value: string[];
+  /** Cleanup all event listeners */
+  destroy(): void;
+}
+/**
+ * Create an accordion controller for a root element
+ *
+ * Expected markup:
+ * ```html
+ * <div data-slot="accordion">
+ *   <div data-slot="accordion-item" data-value="one">
+ *     <button data-slot="accordion-trigger">Item One</button>
+ *     <div data-slot="accordion-content">Content One</div>
+ *   </div>
+ *   <div data-slot="accordion-item" data-value="two">
+ *     <button data-slot="accordion-trigger">Item Two</button>
+ *     <div data-slot="accordion-content">Content Two</div>
+ *   </div>
+ * </div>
+ * ```
+ */
+declare function createAccordion(root: Element, options?: AccordionOptions): AccordionController;
+/**
+ * Find and bind all accordion components in a scope
+ * Returns array of controllers for programmatic access
+ */
+declare function create(scope?: ParentNode): AccordionController[];
+//#endregion
+export { AccordionController, AccordionOptions, create, createAccordion };

package/dist/index.d.ts

@@ -0,0 +1,48 @@
+//#region src/index.d.ts
+interface AccordionOptions {
+  /** Allow multiple items open at once */
+  multiple?: boolean;
+  /** Initially expanded item(s) */
+  defaultValue?: string | string[];
+  /** Callback when expanded items change */
+  onValueChange?: (value: string[]) => void;
+  /** Whether items can be fully collapsed (only applies to single mode) */
+  collapsible?: boolean;
+}
+interface AccordionController {
+  /** Expand an item by value */
+  expand(value: string): void;
+  /** Collapse an item by value */
+  collapse(value: string): void;
+  /** Toggle an item by value */
+  toggle(value: string): void;
+  /** Currently expanded values */
+  readonly value: string[];
+  /** Cleanup all event listeners */
+  destroy(): void;
+}
+/**
+ * Create an accordion controller for a root element
+ *
+ * Expected markup:
+ * ```html
+ * <div data-slot="accordion">
+ *   <div data-slot="accordion-item" data-value="one">
+ *     <button data-slot="accordion-trigger">Item One</button>
+ *     <div data-slot="accordion-content">Content One</div>
+ *   </div>
+ *   <div data-slot="accordion-item" data-value="two">
+ *     <button data-slot="accordion-trigger">Item Two</button>
+ *     <div data-slot="accordion-content">Content Two</div>
+ *   </div>
+ * </div>
+ * ```
+ */
+declare function createAccordion(root: Element, options?: AccordionOptions): AccordionController;
+/**
+ * Find and bind all accordion components in a scope
+ * Returns array of controllers for programmatic access
+ */
+declare function create(scope?: ParentNode): AccordionController[];
+//#endregion
+export { AccordionController, AccordionOptions, create, createAccordion };

package/dist/index.js

@@ -0,0 +1 @@
+import{emit as e,ensureId as t,getPart as n,getParts as r,getRoots as i,on as a,setAria as o}from"@data-slot/core";function s(i,s={}){let{multiple:c=!1,onValueChange:l,collapsible:u=!0}=s,d=r(i,`accordion-item`);if(d.length===0)throw Error(`Accordion requires at least one accordion-item`);let f=s.defaultValue?Array.isArray(s.defaultValue)?s.defaultValue:[s.defaultValue]:[],p=new Set(f),m=[],h=[];d.forEach(r=>{let o=r.dataset.value;if(!o)return;let s=n(r,`accordion-trigger`),d=n(r,`accordion-content`);if(!s||!d)return;h.push(s);let f=t(d,`accordion-content`),_=t(s,`accordion-trigger`);s.setAttribute(`aria-controls`,f),d.setAttribute(`aria-labelledby`,_),d.setAttribute(`role`,`region`),m.push(a(s,`click`,()=>{let t=p.has(o);if(t){if(!u&&!c&&p.size===1)return;p.delete(o)}else c?p.add(o):p=new Set([o]);g(),e(i,`accordion:change`,{value:[...p]}),l?.([...p])}))}),m.push(a(i,`keydown`,e=>{let t=e.target,n=h.indexOf(t);if(n===-1)return;let r=n;switch(e.key){case`ArrowDown`:r=n+1,r>=h.length&&(r=0);break;case`ArrowUp`:r=n-1,r<0&&(r=h.length-1);break;case`Home`:r=0;break;case`End`:r=h.length-1;break;default:return}e.preventDefault(),h[r]?.focus()}));let g=()=>{d.forEach(e=>{let t=e.dataset.value;if(!t)return;let r=n(e,`accordion-trigger`),i=n(e,`accordion-content`);if(!r||!i)return;let a=p.has(t),s=r.getAttribute(`aria-expanded`)===`true`;if(o(r,`expanded`,a),e.setAttribute(`data-state`,a?`open`:`closed`),i.setAttribute(`data-state`,a?`open`:`closed`),a)i.hidden=!1,i._accordionTimeout&&(clearTimeout(i._accordionTimeout),i._accordionTimeout=null);else if(s){i._accordionTimeout&&clearTimeout(i._accordionTimeout);let e=i.parentElement,t=n=>{if(n.propertyName===`grid-template-rows`){let n=i.getAttribute(`data-state`);n===`closed`&&(i.hidden=!0),e?.removeEventListener(`transitionend`,t),i._accordionTimeout&&(clearTimeout(i._accordionTimeout),i._accordionTimeout=null)}};e?(e.addEventListener(`transitionend`,t),i._accordionTimeout=setTimeout(()=>{let n=i.getAttribute(`data-state`);n===`closed`&&(i.hidden=!0),e.removeEventListener(`transitionend`,t),i._accordionTimeout=null},350)):i._accordionTimeout=setTimeout(()=>{i.hidden=!0,i._accordionTimeout=null},300)}else i.hidden=!0})};g();let _={expand:t=>{p.has(t)||(c?p.add(t):p=new Set([t]),g(),e(i,`accordion:change`,{value:[...p]}),l?.([...p]))},collapse:t=>{p.has(t)&&(!u&&!c&&p.size===1||(p.delete(t),g(),e(i,`accordion:change`,{value:[...p]}),l?.([...p])))},toggle:e=>{p.has(e)?_.collapse(e):_.expand(e)},get value(){return[...p]},destroy:()=>{m.forEach(e=>e()),m.length=0,d.forEach(e=>{let t=n(e,`accordion-content`);t&&t._accordionTimeout&&(clearTimeout(t._accordionTimeout),t._accordionTimeout=null)})}};return _}const c=new WeakSet;function l(e=document){let t=[];for(let n of i(e,`accordion`)){if(c.has(n))continue;c.add(n),t.push(s(n))}return t}export{l as create,s as createAccordion};

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@data-slot/accordion",
+  "version": "0.1.0",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsdown"
+  },
+  "dependencies": {
+    "@data-slot/core": "workspace:*"
+  },
+  "keywords": [
+    "headless",
+    "ui",
+    "accordion",
+    "vanilla",
+    "data-slot"
+  ],
+  "license": "MIT"
+}