@data-slot/disclosure 0.1.0

package/README.md

@@ -0,0 +1,143 @@
+# @data-slot/disclosure
+
+Headless disclosure (show/hide) component for vanilla JavaScript. Accessible, unstyled, tiny.
+
+## Installation
+
+```bash
+npm install @data-slot/disclosure
+```
+
+## Quick Start
+
+```html
+<div data-slot="disclosure">
+  <button data-slot="disclosure-trigger">Toggle Content</button>
+  <div data-slot="disclosure-content" hidden>
+    Hidden content revealed on click.
+  </div>
+</div>
+
+<script type="module">
+  import { create } from "@data-slot/disclosure";
+  
+  const controllers = create();
+</script>
+```
+
+## API
+
+### `create(scope?)`
+
+Auto-discover and bind all disclosure instances in a scope (defaults to `document`).
+
+```typescript
+import { create } from "@data-slot/disclosure";
+
+const controllers = create(); // Returns DisclosureController[]
+```
+
+### `createDisclosure(root, options?)`
+
+Create a controller for a specific element.
+
+```typescript
+import { createDisclosure } from "@data-slot/disclosure";
+
+const disclosure = createDisclosure(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 |
+
+### Controller
+
+| Method/Property | Description |
+|-----------------|-------------|
+| `open()` | Open the disclosure |
+| `close()` | Close the disclosure |
+| `toggle()` | Toggle the disclosure |
+| `isOpen` | Current open state (readonly `boolean`) |
+| `destroy()` | Cleanup all event listeners |
+
+## Markup Structure
+
+```html
+<div data-slot="disclosure">
+  <button data-slot="disclosure-trigger">Toggle</button>
+  <div data-slot="disclosure-content">Content</div>
+</div>
+```
+
+Both `disclosure-trigger` and `disclosure-content` are required.
+
+## Styling
+
+Use `data-state` attributes for CSS styling:
+
+```css
+/* Hidden state */
+[data-slot="disclosure-content"][hidden] {
+  display: none;
+}
+
+/* Or use data-state */
+[data-slot="disclosure"][data-state="closed"] [data-slot="disclosure-content"] {
+  display: none;
+}
+
+/* Animate */
+[data-slot="disclosure-content"] {
+  overflow: hidden;
+  transition: max-height 0.3s;
+  max-height: 0;
+}
+
+[data-slot="disclosure"][data-state="open"] [data-slot="disclosure-content"] {
+  max-height: 500px;
+}
+```
+
+With Tailwind:
+
+```html
+<div data-slot="disclosure" class="group">
+  <button data-slot="disclosure-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="disclosure-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
+- Unique ID generation for content
+
+## Events
+
+Listen for changes via custom events:
+
+```javascript
+element.addEventListener("disclosure:change", (e) => {
+  console.log("Disclosure open:", e.detail.open);
+});
+```
+
+## 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{defaultOpen:n=!1,onOpenChange:r}=t,i=(0,c.getPart)(e,`disclosure-trigger`),a=(0,c.getPart)(e,`disclosure-content`);if(!i||!a)throw Error(`Disclosure requires trigger and content slots`);let o=n,s=[],l=(0,c.ensureId)(a,`disclosure-content`);i.setAttribute(`aria-controls`,l);let u=t=>{o!==t&&(o=t,(0,c.setAria)(i,`expanded`,o),a.hidden=!o,e.setAttribute(`data-state`,o?`open`:`closed`),(0,c.emit)(e,`disclosure:change`,{open:o}),r?.(o))};(0,c.setAria)(i,`expanded`,o),a.hidden=!o,e.setAttribute(`data-state`,o?`open`:`closed`),s.push((0,c.on)(i,`click`,()=>u(!o)));let d={open:()=>u(!0),close:()=>u(!1),toggle:()=>u(!o),get isOpen(){return o},destroy:()=>{s.forEach(e=>e()),s.length=0}};return d}const u=new WeakSet;function d(e=document){let t=[];for(let n of(0,c.getRoots)(e,`disclosure`)){if(u.has(n))continue;u.add(n),t.push(l(n))}return t}exports.create=d,exports.createDisclosure=l;

package/dist/index.d.cts

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1 @@
+import{emit as e,ensureId as t,getPart as n,getRoots as r,on as i,setAria as a}from"@data-slot/core";function o(r,o={}){let{defaultOpen:s=!1,onOpenChange:c}=o,l=n(r,`disclosure-trigger`),u=n(r,`disclosure-content`);if(!l||!u)throw Error(`Disclosure requires trigger and content slots`);let d=s,f=[],p=t(u,`disclosure-content`);l.setAttribute(`aria-controls`,p);let m=t=>{d!==t&&(d=t,a(l,`expanded`,d),u.hidden=!d,r.setAttribute(`data-state`,d?`open`:`closed`),e(r,`disclosure:change`,{open:d}),c?.(d))};a(l,`expanded`,d),u.hidden=!d,r.setAttribute(`data-state`,d?`open`:`closed`),f.push(i(l,`click`,()=>m(!d)));let h={open:()=>m(!0),close:()=>m(!1),toggle:()=>m(!d),get isOpen(){return d},destroy:()=>{f.forEach(e=>e()),f.length=0}};return h}const s=new WeakSet;function c(e=document){let t=[];for(let n of r(e,`disclosure`)){if(s.has(n))continue;s.add(n),t.push(o(n))}return t}export{c as create,o as createDisclosure};

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@data-slot/disclosure",
+  "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", "disclosure", "vanilla", "data-slot"],
+  "license": "MIT"
+}