@data-slot/collapsible 0.2.4 → 0.2.5

package/README.md

@@ -57,6 +57,23 @@ const collapsible = createCollapsible(element, {
 | `defaultOpen` | `boolean` | `false` | Initial open state |
 | `onOpenChange` | `(open: boolean) => void` | `undefined` | Callback when open state changes (not called on init) |
 
+### Data Attributes
+
+Options can also be set via data attributes on the root element. JS options take precedence.
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `data-default-open` | boolean | `false` | Initial open state |
+
+Boolean attributes: present or `"true"` = true, `"false"` = false, absent = default.
+
+```html
+<!-- Start expanded -->
+<div data-slot="collapsible" data-default-open>
+  ...
+</div>
+```
+
 ### Controller
 
 | Method/Property | Description |

package/dist/index.cjs

@@ -1 +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;
+const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=new WeakMap;function r(e,t,r){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=n.get(e);i||(i=new Set,n.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${r}`))}function i(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function a(e,t){for(let n of i(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function o(e,t){return i(t).some(t=>e.hasAttribute(t))}const s=new Set([``,`true`,`1`,`yes`]),c=new Set([`false`,`0`,`no`]);function l(e,t){if(!o(e,t))return;let n=a(e,t);if(n===null)return;let i=n.toLowerCase();if(s.has(i))return!0;if(c.has(i))return!1;r(e,t,`Invalid boolean value "${n}" for data-${t}. Expected: true/false/1/0/yes/no or empty.`)}let u=0;const d=(e,t)=>e.id||=`${t}-${++u}`,f=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function p(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const m=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n})),h=new WeakSet;function g(t,n={}){let r=n.defaultOpen??l(t,`defaultOpen`)??!1,i=n.onOpenChange,a=e(t,`collapsible-trigger`),o=e(t,`collapsible-content`);if(!a||!o)throw Error(`Collapsible requires trigger and content slots`);let s=r,c=[],u=d(o,`collapsible-content`),g=d(a,`collapsible-trigger`);a.setAttribute(`aria-controls`,u),o.setAttribute(`role`,`region`),o.setAttribute(`aria-labelledby`,g);let _=e=>{t.setAttribute(`data-state`,e),o.setAttribute(`data-state`,e)},v=e=>{s!==e&&(s=e,f(a,`expanded`,s),o.hidden=!s,_(s?`open`:`closed`),m(t,`collapsible:change`,{open:s}),i?.(s))};f(a,`expanded`,s),o.hidden=!s,_(s?`open`:`closed`),c.push(p(a,`click`,()=>{a.hasAttribute(`disabled`)||a.getAttribute(`aria-disabled`)===`true`||v(!s)}));let y={open:()=>v(!0),close:()=>v(!1),toggle:()=>v(!s),get isOpen(){return s},destroy:()=>{c.forEach(e=>e()),c.length=0,h.delete(t)}};return y}function _(e=document){let n=[];for(let r of t(e,`collapsible`)){if(h.has(r))continue;h.add(r),n.push(g(r))}return n}exports.create=_,exports.createCollapsible=g;

package/dist/index.js

@@ -1 +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};
+const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=new WeakMap;function r(e,t,r){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=n.get(e);i||(i=new Set,n.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${r}`))}function i(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function a(e,t){for(let n of i(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function o(e,t){return i(t).some(t=>e.hasAttribute(t))}const s=new Set([``,`true`,`1`,`yes`]),c=new Set([`false`,`0`,`no`]);function l(e,t){if(!o(e,t))return;let n=a(e,t);if(n===null)return;let i=n.toLowerCase();if(s.has(i))return!0;if(c.has(i))return!1;r(e,t,`Invalid boolean value "${n}" for data-${t}. Expected: true/false/1/0/yes/no or empty.`)}let u=0;const d=(e,t)=>e.id||=`${t}-${++u}`,f=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function p(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const m=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n})),h=new WeakSet;function g(t,n={}){let r=n.defaultOpen??l(t,`defaultOpen`)??!1,i=n.onOpenChange,a=e(t,`collapsible-trigger`),o=e(t,`collapsible-content`);if(!a||!o)throw Error(`Collapsible requires trigger and content slots`);let s=r,c=[],u=d(o,`collapsible-content`),g=d(a,`collapsible-trigger`);a.setAttribute(`aria-controls`,u),o.setAttribute(`role`,`region`),o.setAttribute(`aria-labelledby`,g);let _=e=>{t.setAttribute(`data-state`,e),o.setAttribute(`data-state`,e)},v=e=>{s!==e&&(s=e,f(a,`expanded`,s),o.hidden=!s,_(s?`open`:`closed`),m(t,`collapsible:change`,{open:s}),i?.(s))};f(a,`expanded`,s),o.hidden=!s,_(s?`open`:`closed`),c.push(p(a,`click`,()=>{a.hasAttribute(`disabled`)||a.getAttribute(`aria-disabled`)===`true`||v(!s)}));let y={open:()=>v(!0),close:()=>v(!1),toggle:()=>v(!s),get isOpen(){return s},destroy:()=>{c.forEach(e=>e()),c.length=0,h.delete(t)}};return y}function _(e=document){let n=[];for(let r of t(e,`collapsible`)){if(h.has(r))continue;h.add(r),n.push(g(r))}return n}export{_ as create,g as createCollapsible};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-slot/collapsible",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.cjs",