@data-slot/collapsible 0.2.4

package/README.md

@@ -0,0 +1,145 @@
+# @data-slot/collapsible
+
+Headless collapsible (show/hide) component for vanilla JavaScript. Accessible, unstyled, tiny.
+
+## Installation
+
+```bash
+npm install @data-slot/collapsible
+```
+
+## Quick Start
+
+```html
+<div data-slot="collapsible">
+  <button data-slot="collapsible-trigger">Toggle Content</button>
+  <div data-slot="collapsible-content" hidden>
+    Hidden content revealed on click.
+  </div>
+</div>
+
+<script type="module">
+  import { create } from "@data-slot/collapsible";
+  
+  const controllers = create();
+</script>
+```
+
+## API
+
+### `create(scope?)`
+
+Auto-discover and bind all collapsible instances in a scope (defaults to `document`).
+
+```typescript
+import { create } from "@data-slot/collapsible";
+
+const controllers = create(); // Returns CollapsibleController[]
+```
+
+### `createCollapsible(root, options?)`
+
+Create a controller for a specific element.
+
+```typescript
+import { createCollapsible } from "@data-slot/collapsible";
+
+const collapsible = createCollapsible(element, {
+  defaultOpen: false,
+  onOpenChange: (open) => console.log(open),
+});
+```
+
+### Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `defaultOpen` | `boolean` | `false` | Initial open state |
+| `onOpenChange` | `(open: boolean) => void` | `undefined` | Callback when open state changes (not called on init) |
+
+### Controller
+
+| Method/Property | Description |
+|-----------------|-------------|
+| `open()` | Open the collapsible |
+| `close()` | Close the collapsible |
+| `toggle()` | Toggle the collapsible |
+| `isOpen` | Current open state (readonly `boolean`) |
+| `destroy()` | Cleanup all event listeners |
+
+## Markup Structure
+
+```html
+<div data-slot="collapsible">
+  <button data-slot="collapsible-trigger">Toggle</button>
+  <div data-slot="collapsible-content">Content</div>
+</div>
+```
+
+Both `collapsible-trigger` and `collapsible-content` are required.
+
+## Styling
+
+Use `data-state` attributes for CSS styling (available on both root and content):
+
+```css
+/* Hidden state */
+[data-slot="collapsible-content"][hidden] {
+  display: none;
+}
+
+/* Or use data-state */
+[data-slot="collapsible"][data-state="closed"] [data-slot="collapsible-content"] {
+  display: none;
+}
+
+/* Animate using data-state on content */
+[data-slot="collapsible-content"] {
+  overflow: hidden;
+  transition: max-height 0.3s;
+  max-height: 0;
+}
+
+[data-slot="collapsible-content"][data-state="open"] {
+  max-height: 500px;
+}
+```
+
+With Tailwind:
+
+```html
+<div data-slot="collapsible" class="group">
+  <button data-slot="collapsible-trigger" class="flex items-center gap-2">
+    <span>Show more</span>
+    <svg class="group-data-[state=open]:rotate-180 transition-transform">...</svg>
+  </button>
+  <div data-slot="collapsible-content" class="hidden group-data-[state=open]:block">
+    Content here
+  </div>
+</div>
+```
+
+## Accessibility
+
+The component automatically handles:
+
+- `aria-expanded` state on trigger
+- `aria-controls` linking trigger to content
+- `role="region"` on content
+- `aria-labelledby` linking content back to trigger
+- Unique ID generation for trigger and content
+- Disabled trigger support (respects `disabled` attribute and `aria-disabled="true"`)
+
+## Events
+
+Listen for changes via custom events:
+
+```javascript
+element.addEventListener("collapsible:change", (e) => {
+  console.log("Collapsible open:", e.detail.open);
+});
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1 @@
+const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)];let n=0;const r=(e,t)=>e.id||=`${t}-${++n}`,i=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function a(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const o=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n})),s=new WeakSet;function c(t,n={}){let{defaultOpen:c=!1,onOpenChange:l}=n,u=e(t,`collapsible-trigger`),d=e(t,`collapsible-content`);if(!u||!d)throw Error(`Collapsible requires trigger and content slots`);let f=c,p=[],m=r(d,`collapsible-content`),h=r(u,`collapsible-trigger`);u.setAttribute(`aria-controls`,m),d.setAttribute(`role`,`region`),d.setAttribute(`aria-labelledby`,h);let g=e=>{t.setAttribute(`data-state`,e),d.setAttribute(`data-state`,e)},_=e=>{f!==e&&(f=e,i(u,`expanded`,f),d.hidden=!f,g(f?`open`:`closed`),o(t,`collapsible:change`,{open:f}),l?.(f))};i(u,`expanded`,f),d.hidden=!f,g(f?`open`:`closed`),p.push(a(u,`click`,()=>{u.hasAttribute(`disabled`)||u.getAttribute(`aria-disabled`)===`true`||_(!f)}));let v={open:()=>_(!0),close:()=>_(!1),toggle:()=>_(!f),get isOpen(){return f},destroy:()=>{p.forEach(e=>e()),p.length=0,s.delete(t)}};return v}function l(e=document){let n=[];for(let r of t(e,`collapsible`)){if(s.has(r))continue;s.add(r),n.push(c(r))}return n}exports.create=l,exports.createCollapsible=c;

package/dist/index.d.cts

@@ -0,0 +1,41 @@
+//#region src/index.d.ts
+interface CollapsibleOptions {
+  /** Initial open state */
+  defaultOpen?: boolean;
+  /**
+   * Callback when open state changes.
+   * Note: Not called on initial render, only on subsequent state changes.
+   */
+  onOpenChange?: (open: boolean) => void;
+}
+interface CollapsibleController {
+  /** Open the collapsible */
+  open(): void;
+  /** Close the collapsible */
+  close(): void;
+  /** Toggle the collapsible */
+  toggle(): void;
+  /** Current open state */
+  readonly isOpen: boolean;
+  /** Cleanup all event listeners */
+  destroy(): void;
+}
+/**
+ * Create a collapsible controller for a root element
+ *
+ * Expected markup:
+ * ```html
+ * <div data-slot="collapsible">
+ *   <button data-slot="collapsible-trigger">Toggle</button>
+ *   <div data-slot="collapsible-content">Content here</div>
+ * </div>
+ * ```
+ */
+declare function createCollapsible(root: Element, options?: CollapsibleOptions): CollapsibleController;
+/**
+ * Find and bind all collapsible components in a scope
+ * Returns array of controllers for programmatic access
+ */
+declare function create(scope?: ParentNode): CollapsibleController[];
+//#endregion
+export { CollapsibleController, CollapsibleOptions, create, createCollapsible };

package/dist/index.d.ts

@@ -0,0 +1,41 @@
+//#region src/index.d.ts
+interface CollapsibleOptions {
+  /** Initial open state */
+  defaultOpen?: boolean;
+  /**
+   * Callback when open state changes.
+   * Note: Not called on initial render, only on subsequent state changes.
+   */
+  onOpenChange?: (open: boolean) => void;
+}
+interface CollapsibleController {
+  /** Open the collapsible */
+  open(): void;
+  /** Close the collapsible */
+  close(): void;
+  /** Toggle the collapsible */
+  toggle(): void;
+  /** Current open state */
+  readonly isOpen: boolean;
+  /** Cleanup all event listeners */
+  destroy(): void;
+}
+/**
+ * Create a collapsible controller for a root element
+ *
+ * Expected markup:
+ * ```html
+ * <div data-slot="collapsible">
+ *   <button data-slot="collapsible-trigger">Toggle</button>
+ *   <div data-slot="collapsible-content">Content here</div>
+ * </div>
+ * ```
+ */
+declare function createCollapsible(root: Element, options?: CollapsibleOptions): CollapsibleController;
+/**
+ * Find and bind all collapsible components in a scope
+ * Returns array of controllers for programmatic access
+ */
+declare function create(scope?: ParentNode): CollapsibleController[];
+//#endregion
+export { CollapsibleController, CollapsibleOptions, create, createCollapsible };

package/dist/index.js

@@ -0,0 +1 @@
+const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)];let n=0;const r=(e,t)=>e.id||=`${t}-${++n}`,i=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function a(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const o=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n})),s=new WeakSet;function c(t,n={}){let{defaultOpen:c=!1,onOpenChange:l}=n,u=e(t,`collapsible-trigger`),d=e(t,`collapsible-content`);if(!u||!d)throw Error(`Collapsible requires trigger and content slots`);let f=c,p=[],m=r(d,`collapsible-content`),h=r(u,`collapsible-trigger`);u.setAttribute(`aria-controls`,m),d.setAttribute(`role`,`region`),d.setAttribute(`aria-labelledby`,h);let g=e=>{t.setAttribute(`data-state`,e),d.setAttribute(`data-state`,e)},_=e=>{f!==e&&(f=e,i(u,`expanded`,f),d.hidden=!f,g(f?`open`:`closed`),o(t,`collapsible:change`,{open:f}),l?.(f))};i(u,`expanded`,f),d.hidden=!f,g(f?`open`:`closed`),p.push(a(u,`click`,()=>{u.hasAttribute(`disabled`)||u.getAttribute(`aria-disabled`)===`true`||_(!f)}));let v={open:()=>_(!0),close:()=>_(!1),toggle:()=>_(!f),get isOpen(){return f},destroy:()=>{p.forEach(e=>e()),p.length=0,s.delete(t)}};return v}function l(e=document){let n=[];for(let r of t(e,`collapsible`)){if(s.has(r))continue;s.add(r),n.push(c(r))}return n}export{l as create,c as createCollapsible};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@data-slot/collapsible",
+  "version": "0.2.4",
+  "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"
+  },
+  "devDependencies": {
+    "@data-slot/core": "workspace:*"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bejamas/data-slot",
+    "directory": "packages/collapsible"
+  },
+  "keywords": [
+    "headless",
+    "ui",
+    "collapsible",
+    "vanilla",
+    "data-slot"
+  ],
+  "license": "MIT"
+}