@data-slot/collapsible 0.2.77 → 0.2.79

package/README.md

@@ -134,6 +134,32 @@ 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` | Panel height (`auto` at open rest, measured px during transitions, `0px` when closed) |
+| `--collapsible-panel-width` | Panel width (`auto` at open rest, measured px during transitions, `0px` when closed) |
+
+Example:
+
+```css
+[data-slot="collapsible-content"] {
+  overflow: hidden;
+  height: var(--collapsible-panel-height);
+  width: var(--collapsible-panel-width);
+  transition: height 0.25s ease, width 0.25s ease, opacity 0.2s ease;
+}
+
+[data-slot="collapsible-content"][data-starting-style],
+[data-slot="collapsible-content"][data-ending-style] {
+  height: 0;
+  opacity: 0;
+}
+```
+
 ## 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,n=e=>{let t=e.trim();return t?t.endsWith(`ms`)?Number.parseFloat(t.slice(0,-2))||0:t.endsWith(`s`)?(Number.parseFloat(t.slice(0,-1))||0)*1e3:Number.parseFloat(t)||0:0},r=(e,t)=>{let r=e.split(`,`),i=t.split(`,`),a=Math.max(r.length,i.length),o=0;for(let e=0;e<a;e+=1){let t=n(r[e]??r[r.length-1]??`0`),a=n(i[e]??i[i.length-1]??`0`);o=Math.max(o,t+a)}return o},i=e=>{let t=getComputedStyle(e),n=r(t.transitionDuration,t.transitionDelay),i=r(t.animationDuration,t.animationDelay);return Math.max(n,i)};function a(n,r={}){let a=r.defaultOpen??(0,e.getDataBool)(n,`defaultOpen`)??!1,o=r.hiddenUntilFound??(0,e.getDataBool)(n,`hiddenUntilFound`)??!1,s=r.onOpenChange,c=(0,e.getPart)(n,`collapsible-trigger`),l=(0,e.getPart)(n,`collapsible-content`);if(!c||!l)throw Error(`Collapsible requires trigger and content slots`);let u=n.ownerDocument?.defaultView??window,d=a,f=[],p=null,m=null,h=null,g=null,_=[],v=(0,e.ensureId)(l,`collapsible-content`),y=(0,e.ensureId)(c,`collapsible-trigger`);c.setAttribute(`aria-controls`,v),l.setAttribute(`role`,`region`),l.setAttribute(`aria-labelledby`,y);let b=e=>{n.setAttribute(`data-state`,e),l.setAttribute(`data-state`,e)},x=(e,t)=>{l.style.setProperty(`--collapsible-panel-height`,e),l.style.setProperty(`--collapsible-panel-width`,t)},S=(e,t)=>{x(`${e}px`,`${t}px`)},C=()=>{x(`auto`,`auto`)},w=()=>{S(0,0)},T=()=>{S(l.scrollHeight,l.scrollWidth)},E=()=>{let e=l.style.getPropertyValue(`--collapsible-panel-height`).trim(),t=l.style.getPropertyValue(`--collapsible-panel-width`).trim();return e===`auto`&&t===`auto`},D=()=>{m!==null&&(u.cancelAnimationFrame(m),m=null),h!==null&&(u.clearTimeout(h),h=null),_.forEach(e=>e()),_=[]},O=()=>{g!==null&&(u.cancelAnimationFrame(g),g=null)},k=()=>{D(),O()},A=()=>{l.removeAttribute(`hidden`)},j=()=>{o?l.setAttribute(`hidden`,`until-found`):l.hidden=!0,w()},M=()=>{D(),!(!d||F.isExiting)&&C()},N=()=>{D();let e=i(l);if(e>0){let t=e=>{e.target===l&&M()};l.addEventListener(`transitionend`,t),l.addEventListener(`animationend`,t),_.push(()=>l.removeEventListener(`transitionend`,t)),_.push(()=>l.removeEventListener(`animationend`,t)),h=u.setTimeout(()=>{h=null,M()},Math.ceil(e)+50);return}m=u.requestAnimationFrame(()=>{m=null,M()})},P=()=>{O(),g=u.requestAnimationFrame(()=>{g=null,!d&&F.isExiting&&w()})},F=(0,e.createPresenceLifecycle)({element:l,onExitComplete:()=>{O(),j()}}),I=t=>{d!==t&&(d=t,(0,e.setAria)(c,`expanded`,d),b(d?`open`:`closed`),d?(O(),A(),T(),F.enter(),N()):(D(),T(),F.exit(),P()),(0,e.emit)(n,`collapsible:change`,{open:d}),s?.(d))};return(0,e.setAria)(c,`expanded`,d),d?(A(),T(),N()):j(),b(d?`open`:`closed`),typeof ResizeObserver<`u`&&(p=new ResizeObserver(()=>{!d||F.isExiting||E()||T()}),p.observe(l)),f.push((0,e.on)(c,`click`,()=>{c.hasAttribute(`disabled`)||c.getAttribute(`aria-disabled`)===`true`||I(!d)})),o&&f.push((0,e.on)(l,`beforematch`,()=>{d||I(!0)})),f.push((0,e.on)(n,`collapsible:set`,e=>{if(c.hasAttribute(`disabled`)||c.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`&&I(n)})),{open:()=>I(!0),close:()=>I(!1),toggle:()=>I(!d),get isOpen(){return d},destroy:()=>{F.cleanup(),k(),p?.disconnect(),p=null,f.forEach(e=>e()),f.length=0,t.delete(n)}}}function o(n=document){let r=[];for(let i of(0,e.getRoots)(n,`collapsible`))t.has(i)||(t.add(i),r.push(a(i)));return r}exports.create=o,exports.createCollapsible=a;

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,l=e=>{let t=e.trim();return t?t.endsWith(`ms`)?Number.parseFloat(t.slice(0,-2))||0:t.endsWith(`s`)?(Number.parseFloat(t.slice(0,-1))||0)*1e3:Number.parseFloat(t)||0:0},u=(e,t)=>{let n=e.split(`,`),r=t.split(`,`),i=Math.max(n.length,r.length),a=0;for(let e=0;e<i;e+=1){let t=l(n[e]??n[n.length-1]??`0`),i=l(r[e]??r[r.length-1]??`0`);a=Math.max(a,t+i)}return a},d=e=>{let t=getComputedStyle(e),n=u(t.transitionDuration,t.transitionDelay),r=u(t.animationDuration,t.animationDelay);return Math.max(n,r)};function f(a,l={}){let u=l.defaultOpen??r(a,`defaultOpen`)??!1,f=l.hiddenUntilFound??r(a,`hiddenUntilFound`)??!1,p=l.onOpenChange,m=i(a,`collapsible-trigger`),h=i(a,`collapsible-content`);if(!m||!h)throw Error(`Collapsible requires trigger and content slots`);let g=a.ownerDocument?.defaultView??window,_=u,v=[],y=null,b=null,x=null,S=null,C=[],w=n(h,`collapsible-content`),T=n(m,`collapsible-trigger`);m.setAttribute(`aria-controls`,w),h.setAttribute(`role`,`region`),h.setAttribute(`aria-labelledby`,T);let E=e=>{a.setAttribute(`data-state`,e),h.setAttribute(`data-state`,e)},D=(e,t)=>{h.style.setProperty(`--collapsible-panel-height`,e),h.style.setProperty(`--collapsible-panel-width`,t)},O=(e,t)=>{D(`${e}px`,`${t}px`)},k=()=>{D(`auto`,`auto`)},A=()=>{O(0,0)},j=()=>{O(h.scrollHeight,h.scrollWidth)},M=()=>{let e=h.style.getPropertyValue(`--collapsible-panel-height`).trim(),t=h.style.getPropertyValue(`--collapsible-panel-width`).trim();return e===`auto`&&t===`auto`},N=()=>{b!==null&&(g.cancelAnimationFrame(b),b=null),x!==null&&(g.clearTimeout(x),x=null),C.forEach(e=>e()),C=[]},P=()=>{S!==null&&(g.cancelAnimationFrame(S),S=null)},F=()=>{N(),P()},I=()=>{h.removeAttribute(`hidden`)},L=()=>{f?h.setAttribute(`hidden`,`until-found`):h.hidden=!0,A()},R=()=>{N(),!(!_||V.isExiting)&&k()},z=()=>{N();let e=d(h);if(e>0){let t=e=>{e.target===h&&R()};h.addEventListener(`transitionend`,t),h.addEventListener(`animationend`,t),C.push(()=>h.removeEventListener(`transitionend`,t)),C.push(()=>h.removeEventListener(`animationend`,t)),x=g.setTimeout(()=>{x=null,R()},Math.ceil(e)+50);return}b=g.requestAnimationFrame(()=>{b=null,R()})},B=()=>{P(),S=g.requestAnimationFrame(()=>{S=null,!_&&V.isExiting&&A()})},V=e({element:h,onExitComplete:()=>{P(),L()}}),H=e=>{_!==e&&(_=e,s(m,`expanded`,_),E(_?`open`:`closed`),_?(P(),I(),j(),V.enter(),z()):(N(),j(),V.exit(),B()),t(a,`collapsible:change`,{open:_}),p?.(_))};return s(m,`expanded`,_),_?(I(),j(),z()):L(),E(_?`open`:`closed`),typeof ResizeObserver<`u`&&(y=new ResizeObserver(()=>{!_||V.isExiting||M()||j()}),y.observe(h)),v.push(o(m,`click`,()=>{m.hasAttribute(`disabled`)||m.getAttribute(`aria-disabled`)===`true`||H(!_)})),f&&v.push(o(h,`beforematch`,()=>{_||H(!0)})),v.push(o(a,`collapsible:set`,e=>{if(m.hasAttribute(`disabled`)||m.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`&&H(n)})),{open:()=>H(!0),close:()=>H(!1),toggle:()=>H(!_),get isOpen(){return _},destroy:()=>{V.cleanup(),F(),y?.disconnect(),y=null,v.forEach(e=>e()),v.length=0,c.delete(a)}}}function p(e=document){let t=[];for(let n of a(e,`collapsible`))c.has(n)||(c.add(n),t.push(f(n)));return t}export{p as create,f as createCollapsible};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-slot/collapsible",
-  "version": "0.2.77",
+  "version": "0.2.79",
   "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.79"
   }
 }