@data-slot/collapsible 0.2.75 → 0.2.78

package/README.md

@@ -46,6 +46,7 @@ import { createCollapsible } from "@data-slot/collapsible";
 
 const collapsible = createCollapsible(element, {
   defaultOpen: false,
+  hiddenUntilFound: false,
   onOpenChange: (open) => console.log(open),
 });
 ```
@@ -55,6 +56,7 @@ const collapsible = createCollapsible(element, {
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
 | `defaultOpen` | `boolean` | `false` | Initial open state |
+| `hiddenUntilFound` | `boolean` | `false` | Use `hidden="until-found"` when closed |
 | `onOpenChange` | `(open: boolean) => void` | `undefined` | Callback when open state changes (not called on init) |
 
 ### Data Attributes
@@ -64,6 +66,7 @@ Options can also be set via data attributes on the root element. JS options take
 | Attribute | Type | Default | Description |
 |-----------|------|---------|-------------|
 | `data-default-open` | boolean | `false` | Initial open state |
+| `data-hidden-until-found` | boolean | `false` | Use `hidden="until-found"` when closed |
 
 Boolean attributes: present or `"true"` = true, `"false"` = false, absent = default.
 
@@ -120,8 +123,40 @@ Use `data-state` attributes for CSS styling (available on both root and content)
 [data-slot="collapsible-content"][data-state="open"] {
   max-height: 500px;
 }
+
+/* Presence lifecycle markers */
+[data-slot="collapsible-content"][data-starting-style] {
+  opacity: 0;
+}
+
+[data-slot="collapsible-content"][data-ending-style] {
+  opacity: 0;
+}
 ```
 
+## 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
+`hidden="until-found"`. This allows browser find-in-page to reveal matching text.
+
 With Tailwind:
 
 ```html

package/dist/{index-BsJznQnh.d.cts → index-CmPZRQr9.d.ts}

@@ -2,6 +2,11 @@
 interface CollapsibleOptions {
   /** Initial open state */
   defaultOpen?: boolean;
+  /**
+   * Use hidden="until-found" when closed so browser find-in-page can reveal content.
+   * @default false
+   */
+  hiddenUntilFound?: boolean;
   /**
    * Callback when open state changes.
    * Note: Not called on initial render, only on subsequent state changes.

package/dist/{index-DflcJUei.d.ts → index-DLaRaOFh.d.cts}

@@ -2,6 +2,11 @@
 interface CollapsibleOptions {
   /** Initial open state */
   defaultOpen?: boolean;
+  /**
+   * Use hidden="until-found" when closed so browser find-in-page can reveal content.
+   * @default false
+   */
+  hiddenUntilFound?: boolean;
   /**
    * Callback when open state changes.
    * Note: Not called on initial render, only on subsequent state changes.

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.onOpenChange,o=(0,e.getPart)(n,`collapsible-trigger`),s=(0,e.getPart)(n,`collapsible-content`);if(!o||!s)throw Error(`Collapsible requires trigger and content slots`);let c=i,l=[],u=(0,e.ensureId)(s,`collapsible-content`),d=(0,e.ensureId)(o,`collapsible-trigger`);o.setAttribute(`aria-controls`,u),s.setAttribute(`role`,`region`),s.setAttribute(`aria-labelledby`,d);let f=e=>{n.setAttribute(`data-state`,e),s.setAttribute(`data-state`,e)},p=t=>{c!==t&&(c=t,(0,e.setAria)(o,`expanded`,c),s.hidden=!c,f(c?`open`:`closed`),(0,e.emit)(n,`collapsible:change`,{open:c}),a?.(c))};return(0,e.setAria)(o,`expanded`,c),s.hidden=!c,f(c?`open`:`closed`),l.push((0,e.on)(o,`click`,()=>{o.hasAttribute(`disabled`)||o.getAttribute(`aria-disabled`)===`true`||p(!c)})),l.push((0,e.on)(n,`collapsible:set`,e=>{if(o.hasAttribute(`disabled`)||o.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`&&p(n)})),{open:()=>p(!0),close:()=>p(!1),toggle:()=>p(!c),get isOpen(){return c},destroy:()=>{l.forEach(e=>e()),l.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{emit as e,ensureId as t,getDataBool as n,getPart as r,getRoots as i,on as a,setAria as o}from"@data-slot/core";const s=new WeakSet;function c(i,c={}){let l=c.defaultOpen??n(i,`defaultOpen`)??!1,u=c.onOpenChange,d=r(i,`collapsible-trigger`),f=r(i,`collapsible-content`);if(!d||!f)throw Error(`Collapsible requires trigger and content slots`);let p=l,m=[],h=t(f,`collapsible-content`),g=t(d,`collapsible-trigger`);d.setAttribute(`aria-controls`,h),f.setAttribute(`role`,`region`),f.setAttribute(`aria-labelledby`,g);let _=e=>{i.setAttribute(`data-state`,e),f.setAttribute(`data-state`,e)},v=t=>{p!==t&&(p=t,o(d,`expanded`,p),f.hidden=!p,_(p?`open`:`closed`),e(i,`collapsible:change`,{open:p}),u?.(p))};return o(d,`expanded`,p),f.hidden=!p,_(p?`open`:`closed`),m.push(a(d,`click`,()=>{d.hasAttribute(`disabled`)||d.getAttribute(`aria-disabled`)===`true`||v(!p)})),m.push(a(i,`collapsible:set`,e=>{if(d.hasAttribute(`disabled`)||d.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`&&v(n)})),{open:()=>v(!0),close:()=>v(!1),toggle:()=>v(!p),get isOpen(){return p},destroy:()=>{m.forEach(e=>e()),m.length=0,s.delete(i)}}}function l(e=document){let t=[];for(let n of i(e,`collapsible`))s.has(n)||(s.add(n),t.push(c(n)));return t}export{l as create,c 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.75",
+  "version": "0.2.78",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.cjs",
@@ -38,6 +38,6 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@data-slot/core": "0.2.75"
+    "@data-slot/core": "0.2.78"
   }
 }