@data-slot/collapsible 0.2.11 → 0.2.13

package/README.md

@@ -149,6 +149,8 @@ The component automatically handles:
 
 ## Events
 
+### Outbound Events
+
 Listen for changes via custom events:
 
 ```javascript
@@ -157,6 +159,41 @@ element.addEventListener("collapsible:change", (e) => {
 });
 ```
 
+### Inbound Events
+
+Control the collapsible via events:
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `collapsible:set` | `{ open: boolean }` | Set open state programmatically |
+
+```javascript
+// Open the collapsible
+element.dispatchEvent(
+  new CustomEvent("collapsible:set", { detail: { open: true } })
+);
+
+// Close the collapsible
+element.dispatchEvent(
+  new CustomEvent("collapsible:set", { detail: { open: false } })
+);
+```
+
+**Note:** Blocked when trigger is disabled (has `disabled` attribute or `aria-disabled="true"`).
+
+#### Deprecated Shapes
+
+The following shape is deprecated and will be removed in v1.0:
+
+```javascript
+// Deprecated: { value: boolean }
+element.dispatchEvent(
+  new CustomEvent("collapsible:set", { detail: { value: true } })
+);
+```
+
+Use `{ open: boolean }` instead.
+
 ## License
 
 MIT

package/dist/index.cjs

@@ -1 +1 @@
-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;
+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)})),c.push(p(t,`collapsible:set`,e=>{if(a.hasAttribute(`disabled`)||a.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)}));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}"]`)],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};
+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)})),c.push(p(t,`collapsible:set`,e=>{if(a.hasAttribute(`disabled`)||a.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)}));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.11",
+  "version": "0.2.13",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.cjs",