@data-slot/collapsible 0.2.77 → 0.2.78

package/README.md

@@ -134,6 +134,24 @@ Use `data-state` attributes for CSS styling (available on both root and content)
 }
 ```
 
+## CSS Variables
+
+The content element exposes size variables you can use for dimension animations:
+
+| Variable | Description |
+|----------|-------------|
+| `--collapsible-panel-height` | The measured panel height |
+| `--collapsible-panel-width` | The measured panel width |
+
+Example:
+
+```css
+[data-slot="collapsible-content"] {
+  height: var(--collapsible-panel-height);
+  width: var(--collapsible-panel-width);
+}
+```
+
 ## Find-in-Page Support
 
 Enable `hiddenUntilFound` (or `data-hidden-until-found`) to close panels with

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=new WeakSet;function n(n,r={}){let i=r.defaultOpen??(0,e.getDataBool)(n,`defaultOpen`)??!1,a=r.hiddenUntilFound??(0,e.getDataBool)(n,`hiddenUntilFound`)??!1,o=r.onOpenChange,s=(0,e.getPart)(n,`collapsible-trigger`),c=(0,e.getPart)(n,`collapsible-content`);if(!s||!c)throw Error(`Collapsible requires trigger and content slots`);let l=i,u=[],d=(0,e.ensureId)(c,`collapsible-content`),f=(0,e.ensureId)(s,`collapsible-trigger`);s.setAttribute(`aria-controls`,d),c.setAttribute(`role`,`region`),c.setAttribute(`aria-labelledby`,f);let p=e=>{n.setAttribute(`data-state`,e),c.setAttribute(`data-state`,e)},m=()=>{c.removeAttribute(`hidden`)},h=()=>{a?c.setAttribute(`hidden`,`until-found`):c.hidden=!0},g=(0,e.createPresenceLifecycle)({element:c,onExitComplete:()=>{h()}}),_=t=>{l!==t&&(l=t,(0,e.setAria)(s,`expanded`,l),p(l?`open`:`closed`),l?(m(),g.enter()):g.exit(),(0,e.emit)(n,`collapsible:change`,{open:l}),o?.(l))};return(0,e.setAria)(s,`expanded`,l),l?m():h(),p(l?`open`:`closed`),u.push((0,e.on)(s,`click`,()=>{s.hasAttribute(`disabled`)||s.getAttribute(`aria-disabled`)===`true`||_(!l)})),a&&u.push((0,e.on)(c,`beforematch`,()=>{l||_(!0)})),u.push((0,e.on)(n,`collapsible:set`,e=>{if(s.hasAttribute(`disabled`)||s.getAttribute(`aria-disabled`)===`true`)return;let t=e.detail,n;t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`&&_(n)})),{open:()=>_(!0),close:()=>_(!1),toggle:()=>_(!l),get isOpen(){return l},destroy:()=>{g.cleanup(),u.forEach(e=>e()),u.length=0,t.delete(n)}}}function r(r=document){let i=[];for(let a of(0,e.getRoots)(r,`collapsible`))t.has(a)||(t.add(a),i.push(n(a)));return i}exports.create=r,exports.createCollapsible=n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=new WeakSet;function n(n,r={}){let i=r.defaultOpen??(0,e.getDataBool)(n,`defaultOpen`)??!1,a=r.hiddenUntilFound??(0,e.getDataBool)(n,`hiddenUntilFound`)??!1,o=r.onOpenChange,s=(0,e.getPart)(n,`collapsible-trigger`),c=(0,e.getPart)(n,`collapsible-content`);if(!s||!c)throw Error(`Collapsible requires trigger and content slots`);let l=i,u=[],d=null,f=(0,e.ensureId)(c,`collapsible-content`),p=(0,e.ensureId)(s,`collapsible-trigger`);s.setAttribute(`aria-controls`,f),c.setAttribute(`role`,`region`),c.setAttribute(`aria-labelledby`,p);let m=e=>{n.setAttribute(`data-state`,e),c.setAttribute(`data-state`,e)},h=(e,t)=>{c.style.setProperty(`--collapsible-panel-height`,`${e}px`),c.style.setProperty(`--collapsible-panel-width`,`${t}px`)},g=()=>{h(c.scrollHeight,c.scrollWidth)},_=()=>{c.removeAttribute(`hidden`)},v=()=>{a?c.setAttribute(`hidden`,`until-found`):c.hidden=!0,h(0,0)},y=(0,e.createPresenceLifecycle)({element:c,onExitComplete:()=>{v()}}),b=t=>{l!==t&&(l=t,(0,e.setAria)(s,`expanded`,l),m(l?`open`:`closed`),l?(_(),g(),y.enter()):(g(),y.exit()),(0,e.emit)(n,`collapsible:change`,{open:l}),o?.(l))};return(0,e.setAria)(s,`expanded`,l),l?(_(),g()):v(),m(l?`open`:`closed`),typeof ResizeObserver<`u`&&(d=new ResizeObserver(()=>{l&&g()}),d.observe(c)),u.push((0,e.on)(s,`click`,()=>{s.hasAttribute(`disabled`)||s.getAttribute(`aria-disabled`)===`true`||b(!l)})),a&&u.push((0,e.on)(c,`beforematch`,()=>{l||b(!0)})),u.push((0,e.on)(n,`collapsible:set`,e=>{if(s.hasAttribute(`disabled`)||s.getAttribute(`aria-disabled`)===`true`)return;let t=e.detail,n;t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`&&b(n)})),{open:()=>b(!0),close:()=>b(!1),toggle:()=>b(!l),get isOpen(){return l},destroy:()=>{y.cleanup(),d?.disconnect(),d=null,u.forEach(e=>e()),u.length=0,t.delete(n)}}}function r(r=document){let i=[];for(let a of(0,e.getRoots)(r,`collapsible`))t.has(a)||(t.add(a),i.push(n(a)));return i}exports.create=r,exports.createCollapsible=n;

package/dist/index.js

@@ -1 +1 @@
-import{createPresenceLifecycle as e,emit as t,ensureId as n,getDataBool as r,getPart as i,getRoots as a,on as o,setAria as s}from"@data-slot/core";const c=new WeakSet;function l(a,l={}){let u=l.defaultOpen??r(a,`defaultOpen`)??!1,d=l.hiddenUntilFound??r(a,`hiddenUntilFound`)??!1,f=l.onOpenChange,p=i(a,`collapsible-trigger`),m=i(a,`collapsible-content`);if(!p||!m)throw Error(`Collapsible requires trigger and content slots`);let h=u,g=[],_=n(m,`collapsible-content`),v=n(p,`collapsible-trigger`);p.setAttribute(`aria-controls`,_),m.setAttribute(`role`,`region`),m.setAttribute(`aria-labelledby`,v);let y=e=>{a.setAttribute(`data-state`,e),m.setAttribute(`data-state`,e)},b=()=>{m.removeAttribute(`hidden`)},x=()=>{d?m.setAttribute(`hidden`,`until-found`):m.hidden=!0},S=e({element:m,onExitComplete:()=>{x()}}),C=e=>{h!==e&&(h=e,s(p,`expanded`,h),y(h?`open`:`closed`),h?(b(),S.enter()):S.exit(),t(a,`collapsible:change`,{open:h}),f?.(h))};return s(p,`expanded`,h),h?b():x(),y(h?`open`:`closed`),g.push(o(p,`click`,()=>{p.hasAttribute(`disabled`)||p.getAttribute(`aria-disabled`)===`true`||C(!h)})),d&&g.push(o(m,`beforematch`,()=>{h||C(!0)})),g.push(o(a,`collapsible:set`,e=>{if(p.hasAttribute(`disabled`)||p.getAttribute(`aria-disabled`)===`true`)return;let t=e.detail,n;t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`&&C(n)})),{open:()=>C(!0),close:()=>C(!1),toggle:()=>C(!h),get isOpen(){return h},destroy:()=>{S.cleanup(),g.forEach(e=>e()),g.length=0,c.delete(a)}}}function u(e=document){let t=[];for(let n of a(e,`collapsible`))c.has(n)||(c.add(n),t.push(l(n)));return t}export{u as create,l as createCollapsible};
+import{createPresenceLifecycle as e,emit as t,ensureId as n,getDataBool as r,getPart as i,getRoots as a,on as o,setAria as s}from"@data-slot/core";const c=new WeakSet;function l(a,l={}){let u=l.defaultOpen??r(a,`defaultOpen`)??!1,d=l.hiddenUntilFound??r(a,`hiddenUntilFound`)??!1,f=l.onOpenChange,p=i(a,`collapsible-trigger`),m=i(a,`collapsible-content`);if(!p||!m)throw Error(`Collapsible requires trigger and content slots`);let h=u,g=[],_=null,v=n(m,`collapsible-content`),y=n(p,`collapsible-trigger`);p.setAttribute(`aria-controls`,v),m.setAttribute(`role`,`region`),m.setAttribute(`aria-labelledby`,y);let b=e=>{a.setAttribute(`data-state`,e),m.setAttribute(`data-state`,e)},x=(e,t)=>{m.style.setProperty(`--collapsible-panel-height`,`${e}px`),m.style.setProperty(`--collapsible-panel-width`,`${t}px`)},S=()=>{x(m.scrollHeight,m.scrollWidth)},C=()=>{m.removeAttribute(`hidden`)},w=()=>{d?m.setAttribute(`hidden`,`until-found`):m.hidden=!0,x(0,0)},T=e({element:m,onExitComplete:()=>{w()}}),E=e=>{h!==e&&(h=e,s(p,`expanded`,h),b(h?`open`:`closed`),h?(C(),S(),T.enter()):(S(),T.exit()),t(a,`collapsible:change`,{open:h}),f?.(h))};return s(p,`expanded`,h),h?(C(),S()):w(),b(h?`open`:`closed`),typeof ResizeObserver<`u`&&(_=new ResizeObserver(()=>{h&&S()}),_.observe(m)),g.push(o(p,`click`,()=>{p.hasAttribute(`disabled`)||p.getAttribute(`aria-disabled`)===`true`||E(!h)})),d&&g.push(o(m,`beforematch`,()=>{h||E(!0)})),g.push(o(a,`collapsible:set`,e=>{if(p.hasAttribute(`disabled`)||p.getAttribute(`aria-disabled`)===`true`)return;let t=e.detail,n;t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`&&E(n)})),{open:()=>E(!0),close:()=>E(!1),toggle:()=>E(!h),get isOpen(){return h},destroy:()=>{T.cleanup(),_?.disconnect(),_=null,g.forEach(e=>e()),g.length=0,c.delete(a)}}}function u(e=document){let t=[];for(let n of a(e,`collapsible`))c.has(n)||(c.add(n),t.push(l(n)));return t}export{u as create,l as createCollapsible};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-slot/collapsible",
-  "version": "0.2.77",
+  "version": "0.2.78",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.cjs",
@@ -38,6 +38,6 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@data-slot/core": "0.2.77"
+    "@data-slot/core": "0.2.78"
   }
 }