@data-slot/collapsible 0.2.74 → 0.2.77

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,22 @@ 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;
+}
 ```
 
+## 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=(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;

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=[],_=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};

package/package.json

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