@primitiv-ui/web 0.1.46 → 0.1.47

package/README.md

@@ -6,7 +6,7 @@ framework and no runtime dependencies beyond
 server-rendered stack (HTMX, Rails, Django, Laravel, Spring …), and inside
 React, Vue, Angular or any other framework.
 
-> **Status: published.** Tabs and Accordion so far. See
+> **Status: published.** Tabs, Accordion and Collapsible so far. See
 > [RFC 0033](../../docs/rfcs/0033-web-components.md) for the design.
 
 ## Components
@@ -15,6 +15,7 @@ React, Vue, Angular or any other framework.
 |---|---|---|---|
 | Tabs | `primitiv-tabs`, `-list`, `-trigger`, `-content` | `primitiv-tabs-change` | 0.1.42 |
 | Accordion | `primitiv-accordion`, `-item`, `-trigger`, `-content`, `-trigger-icon` | `primitiv-accordion-change` | 0.1.44 |
+| Collapsible | `primitiv-collapsible`, `-trigger`, `-content`, `-trigger-icon` | `primitiv-collapsible-change` | 0.1.47 |
 
 ## Use it
 
@@ -46,9 +47,9 @@ Each `dist/cdn/<component>.js` imports the code components share from
 downloads it once. `dist/primitiv-web.js` is the alternative: every element in
 one file. Per-component files ship from 0.1.43.
 
-The main entry (`@primitiv-ui/web`, `/tabs`, `/accordion`) exports the classes
-and `defineTabs(registry?)` / `defineAccordion(registry?)` with **no side
-effects**.
+The main entry (`@primitiv-ui/web`, `/tabs`, `/accordion`, `/collapsible`)
+exports the classes and `defineTabs(registry?)` / `defineAccordion(registry?)` /
+`defineCollapsible(registry?)` with **no side effects**.
 
 **Render `hidden` on inactive panels yourself.** Until the module loads, CSS
 cannot tell which panel is active, so markup that omits it shows every panel.
@@ -93,6 +94,30 @@ on a panel as it becomes active, for lazy loading.
   value }`, every item open afterwards) and `primitiv-accordion-show` on a panel
   as its item opens. Render `hidden` on closed panels yourself, as for Tabs.
 
+### Collapsible
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@primitiv-ui/web@<version>/dist/cdn/collapsible.js"></script>
+
+<primitiv-collapsible>
+  <primitiv-collapsible-trigger><button type="button">Shipping details</button></primitiv-collapsible-trigger>
+  <primitiv-collapsible-content hidden>Orders ship within two business days.</primitiv-collapsible-content>
+</primitiv-collapsible>
+```
+
+- **`open` is the state**, a boolean attribute reflected as the user toggles,
+  and the `open` property reads and sets it. `disabled` on the root keeps the
+  button focusable but stops it toggling.
+- **`collapsed-height` on the panel** shows a clamped preview while closed (the
+  read-more pattern): a bare number is pixels, anything else a CSS length. It is
+  published as `--primitiv-collapsible-collapsed-height` with
+  `data-clamped="true"`, and the panel is never hidden, since the preview is
+  real content. `force-mount` keeps a closed panel unhidden for your own
+  animation, with `aria-hidden` instead.
+- **Listen with `primitiv-collapsible-change`** (bubbles, cancelable, `detail: {
+  open }`) and `primitiv-collapsible-show` on the panel as it opens. Render
+  `hidden` on a closed panel yourself, as for Tabs.
+
 **TypeScript** — opt into the tag map so DOM queries return the element classes:
 `import type {} from "@primitiv-ui/web/tags"` (npm only).
 
@@ -127,7 +152,7 @@ The elements write no `class` and no `style`. For the registry look, apply the
 
 ## Layers
 
-- **Controllers** (`TabsController`, `AccordionController`) hold a component's DOM behaviour —
+- **Controllers** (`TabsController`, `AccordionController`, `CollapsibleController`) hold a component's DOM behaviour —
   listeners, focus, the ordered collection of parts — and attach to whatever
   elements register with them. They never own state; their host does.
 - **Element hosts** (`<primitiv-tabs>` …) are the public face: they keep state

package/dist/cdn/accordion.js

@@ -1 +1 @@
-import{a as b,e as C,f as O,g,h as n,i as v,j as H,k as f,l as R,m as M}from"./chunks/chunk-FKLOMAT4.js";var m=class extends M{#t;constructor(e,s){super(e),this.#t=s}#e(e){let{expanded:s,multiple:c}=this.#t.state(),r=C({disabled:this.disabled(),expanded:s,multiple:c},e);r!==null&&this.#t.change(r)}onTriggerClick(e){this.#e(e.value)}onTriggerKeydown(e,s){let{expanded:c,multiple:r,orientation:l,dir:d}=this.#t.state(),u=this.ordered(),p=u.map(([,o])=>o.value),t=O({values:p,disabled:this.disabled(),expanded:c,multiple:r,orientation:l,dir:d},e.value,s.key);t&&(s.preventDefault(),t.toggle!==null&&this.#e(t.toggle),t.focus!==null&&u[p.indexOf(t.focus)][0].focus())}};var k="primitiv-accordion",h="primitiv-accordion-item",w="primitiv-accordion-trigger",L="primitiv-accordion-content",S="primitiv-accordion-trigger-icon";function D(i){return(i??"").split(/\s+/).filter(Boolean)}function K(i){return i.childElementCount===1?i.firstElementChild:(v(i,`<${w}> needs exactly one element child (a <button>) to decorate.`),null)}var y=class extends R{#t=new Set;#e=!1;controller=new m(this,this.#i());reconcileOn=["value","disabled","orientation","force-mount"];get value(){return D(this.getAttribute("value"))}set value(e){this.setAttribute("value",typeof e=="string"?e:e.join(" "))}#i(){return{state:()=>({expanded:this.value,multiple:this.hasAttribute("multiple"),orientation:this.#o(),dir:this.direction()}),change:e=>{this.announce("primitiv-accordion-change",{value:e})&&(this.value=e)}}}#o(){return this.getAttribute("orientation")==="horizontal"?"horizontal":"vertical"}reconcile(){let e=new Set(this.value),s=this.rootId();n(this,"data-orientation",this.#o());let c=[];for(let r of this.parts(h)){let l=r.getAttribute("value");if(l===null){v(r,`<${h}> needs a value, which pairs it with the root's value.`);continue}let d=e.has(l),u=d?"open":"closed",[p]=f(r,w,h),[t]=f(r,L,h),o=p?K(p):null;if(o){let a=p.hasAttribute("disabled");c.push({value:l,element:o,disabled:a}),o.id||(o.id=b(s,"heading",l)),n(o,"aria-expanded",String(d)),n(o,"aria-disabled",String(a)),n(o,"data-disabled",String(a)),n(o,"data-state",u)}if(t){t.id||(t.id=b(s,"panel",l));let a=t.hasAttribute("force-mount");t.hasAttribute("role")||t.setAttribute("role","region"),n(t,"aria-labelledby",o?o.id:null),n(t,"hidden",d||a?null:""),n(t,"aria-hidden",d?null:"true"),n(t,"data-state",u),this.#e&&d&&!this.#t.has(l)&&t.dispatchEvent(new CustomEvent("primitiv-accordion-show",{bubbles:!0}))}o&&n(o,"aria-controls",t?t.id:null);for(let a of f(r,S,h))n(a,"aria-hidden","true"),n(a,"data-state",u)}this.controller.setTriggers(c),this.#t=e,this.#e=!0}},x=class extends g{},A=class extends g{},T=class extends g{},E=class extends g{};function I(i=globalThis.customElements){H(i,[[k,y],[h,x],[w,A],[L,T],[S,E]])}I();
+import{a as b,e as C,f as O,i as g,j as n,k as v,l as H,m as f,n as R,o as M}from"./chunks/chunk-WVI5UEAW.js";var m=class extends M{#t;constructor(e,s){super(e),this.#t=s}#e(e){let{expanded:s,multiple:c}=this.#t.state(),r=C({disabled:this.disabled(),expanded:s,multiple:c},e);r!==null&&this.#t.change(r)}onTriggerClick(e){this.#e(e.value)}onTriggerKeydown(e,s){let{expanded:c,multiple:r,orientation:l,dir:d}=this.#t.state(),u=this.ordered(),p=u.map(([,o])=>o.value),t=O({values:p,disabled:this.disabled(),expanded:c,multiple:r,orientation:l,dir:d},e.value,s.key);t&&(s.preventDefault(),t.toggle!==null&&this.#e(t.toggle),t.focus!==null&&u[p.indexOf(t.focus)][0].focus())}};var k="primitiv-accordion",h="primitiv-accordion-item",w="primitiv-accordion-trigger",L="primitiv-accordion-content",S="primitiv-accordion-trigger-icon";function D(i){return(i??"").split(/\s+/).filter(Boolean)}function K(i){return i.childElementCount===1?i.firstElementChild:(v(i,`<${w}> needs exactly one element child (a <button>) to decorate.`),null)}var y=class extends R{#t=new Set;#e=!1;controller=new m(this,this.#i());reconcileOn=["value","disabled","orientation","force-mount"];get value(){return D(this.getAttribute("value"))}set value(e){this.setAttribute("value",typeof e=="string"?e:e.join(" "))}#i(){return{state:()=>({expanded:this.value,multiple:this.hasAttribute("multiple"),orientation:this.#o(),dir:this.direction()}),change:e=>{this.announce("primitiv-accordion-change",{value:e})&&(this.value=e)}}}#o(){return this.getAttribute("orientation")==="horizontal"?"horizontal":"vertical"}reconcile(){let e=new Set(this.value),s=this.rootId();n(this,"data-orientation",this.#o());let c=[];for(let r of this.parts(h)){let l=r.getAttribute("value");if(l===null){v(r,`<${h}> needs a value, which pairs it with the root's value.`);continue}let d=e.has(l),u=d?"open":"closed",[p]=f(r,w,h),[t]=f(r,L,h),o=p?K(p):null;if(o){let a=p.hasAttribute("disabled");c.push({value:l,element:o,disabled:a}),o.id||(o.id=b(s,"heading",l)),n(o,"aria-expanded",String(d)),n(o,"aria-disabled",String(a)),n(o,"data-disabled",String(a)),n(o,"data-state",u)}if(t){t.id||(t.id=b(s,"panel",l));let a=t.hasAttribute("force-mount");t.hasAttribute("role")||t.setAttribute("role","region"),n(t,"aria-labelledby",o?o.id:null),n(t,"hidden",d||a?null:""),n(t,"aria-hidden",d?null:"true"),n(t,"data-state",u),this.#e&&d&&!this.#t.has(l)&&t.dispatchEvent(new CustomEvent("primitiv-accordion-show",{bubbles:!0}))}o&&n(o,"aria-controls",t?t.id:null);for(let a of f(r,S,h))n(a,"aria-hidden","true"),n(a,"data-state",u)}this.controller.setTriggers(c),this.#t=e,this.#e=!0}},x=class extends g{},A=class extends g{},T=class extends g{},E=class extends g{};function I(i=globalThis.customElements){H(i,[[k,y],[h,x],[w,A],[L,T],[S,E]])}I();

package/dist/cdn/chunks/chunk-WVI5UEAW.js

@@ -0,0 +1 @@
+function v(t,e,r){return`${t}-${e}-${r}`}function a({orientation:t,dir:e,homeEnd:r=!1,activate:n=!1}){let o={};if(t==="horizontal"||t==="both"){let i=e==="rtl"?"ArrowLeft":"ArrowRight",l=e==="rtl"?"ArrowRight":"ArrowLeft";o[i]="next",o[l]="prev"}return(t==="vertical"||t==="both")&&(o.ArrowDown="next",o.ArrowUp="prev"),r&&(o.Home="first",o.End="last"),n&&(o.Enter="activate",o[" "]="activate"),o}function s({action:t,navigable:e,currentKey:r}){let n=e.length;if(n===0)return null;switch(t){case"activate":return{target:r};case"first":return{target:e[0]};case"last":return{target:e[n-1]};case void 0:return null;case"next":case"prev":{let o=e.indexOf(r);if(o===-1)return null;let i=t==="next"?1:n-1;return{target:e[(o+i)%n]}}}}function f(t){return t.active??t.values[0]}function c(t,e){return t.disabled.has(e)||t.active===e?null:e}function m(t,e,r){let n=a({orientation:t.orientation,dir:t.dir,homeEnd:!0,activate:!0})[r],o=s({action:n,navigable:t.values,currentKey:e});if(!o)return null;let i=o.target,l=t.activationMode==="automatic"||n==="activate";return{focus:i,activate:l?c(t,i):null}}function T(t,e){return t.disabled.has(e)?null:t.expanded.includes(e)?t.expanded.filter(r=>r!==e):t.multiple?[...t.expanded,e]:[e]}function h(t,e,r){let n=a({orientation:t.orientation,dir:t.dir,homeEnd:!0,activate:!0})[r];if(n==="activate")return t.disabled.has(e)?null:{focus:null,toggle:e};let o=t.values.filter(l=>!t.disabled.has(l)),i=s({action:n,navigable:o,currentKey:e});return i&&{focus:i.target,toggle:null}}function d(t){return t.disabled?null:!t.open}function x(t,e){if(e!=="Enter"&&e!==" ")return null;let r=d(t);return r===null?null:{open:r}}var u=globalThis.HTMLElement??class{};function $(t,e,r){t.getAttribute(e)!==r&&(r===null?t.removeAttribute(e):t.setAttribute(e,r))}var g=new WeakSet;function z(t,e){g.has(t)||(g.add(t),console.error(e,t))}function G(t,e){if(t)for(let[r,n]of e)t.get(r)||t.define(r,n)}function p(t,e,r){return[...t.querySelectorAll(e)].filter(n=>n.closest(r)===t)}var A=0,b=class extends u{#t;#e=new MutationObserver(()=>this.reconcile());connectedCallback(){this.controller.connect(),this.#e.observe(this,{subtree:!0,childList:!0,attributes:!0,attributeFilter:[...this.reconcileOn]}),this.reconcile()}disconnectedCallback(){this.controller.disconnect(),this.#e.disconnect()}rootId(){return this.id||(this.#t??=`${this.localName}-${++A}`)}direction(){return this.matches(":dir(rtl)")?"rtl":"ltr"}parts(e){return p(this,e,this.localName)}announce(e,r){return this.dispatchEvent(new CustomEvent(e,{bubbles:!0,cancelable:!0,detail:r}))}};var y=class{#t;#e=new Map;#r=null;constructor(e){this.#t=e}registerTrigger(e,r,n={}){this.#e.set(r,{value:e,disabled:n.disabled??!1})}setTriggers(e){this.#e.clear();for(let{value:r,element:n,disabled:o}of e)this.registerTrigger(r,n,{disabled:o})}unregisterTrigger(e){this.#e.delete(e)}connect(){if(this.#r)return;this.#r=new AbortController;let{signal:e}=this.#r;this.#t.addEventListener("click",r=>this.#n(r,this.onTriggerClick),{signal:e}),this.#t.addEventListener("keydown",r=>this.#n(r,this.onTriggerKeydown),{signal:e})}disconnect(){this.#r?.abort(),this.#r=null}ordered(){return[...this.#e].sort(([e],[r])=>e.compareDocumentPosition(r)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1)}disabled(){let e=new Set;for(let r of this.#e.values())r.disabled&&e.add(r.value);return e}#n(e,r){for(let[n,o]of this.#e)if(n.contains(e.target))return r.call(this,o,e)}};export{v as a,f as b,c,m as d,T as e,h as f,d as g,x as h,u as i,$ as j,z as k,G as l,p as m,b as n,y as o};

package/dist/cdn/collapsible.js

@@ -0,0 +1 @@
+import{g as y,h as T,i as d,j as i,k as x,l as C,n as E,o as v}from"./chunks/chunk-WVI5UEAW.js";var p=class extends v{#t;constructor(t,o){super(t),this.#t=o}onTriggerClick(t){let o=y({open:this.#t.state().open,disabled:t.disabled});o!==null&&this.#t.change(o)}onTriggerKeydown(t,o){let s=T({open:this.#t.state().open,disabled:t.disabled},o.key);s&&(o.preventDefault(),this.#t.change(s.open))}};var R="primitiv-collapsible",b="primitiv-collapsible-trigger",H="primitiv-collapsible-content",w="primitiv-collapsible-trigger-icon",L="--primitiv-collapsible-collapsed-height";function O(e){return e.childElementCount===1?e.firstElementChild:(x(e,`<${b}> needs exactly one element child (a <button>) to decorate.`),null)}function M(e){return Number.isNaN(Number(e))?e:`${e}px`}function I(e,t,o){e.style.getPropertyValue(t)!==o&&(e.style.setProperty(t,o),e.getAttribute("style")===""&&e.removeAttribute("style"))}var c=class extends E{#t;controller=new p(this,this.#e());reconcileOn=["open","disabled","force-mount","collapsed-height"];get open(){return this.hasAttribute("open")}set open(t){this.toggleAttribute("open",t)}#e(){return{state:()=>({open:this.open}),change:t=>{this.announce("primitiv-collapsible-change",{open:t})&&(this.open=t)}}}reconcile(){let t=this.open,o=t?"open":"closed",s=this.hasAttribute("disabled"),m=this.rootId();i(this,"data-state",o),i(this,"data-disabled",String(s));let[f]=this.parts(b),[n]=this.parts(H),r=f?O(f):null;if(r&&(r.id||(r.id=`${m}-trigger`),i(r,"aria-expanded",String(t)),i(r,"aria-disabled",s?"true":null),i(r,"data-disabled",String(s)),i(r,"data-state",o)),n){n.id||(n.id=`${m}-content`);let l=n.getAttribute("collapsed-height"),a=l!==null,N=a||n.hasAttribute("force-mount");i(n,"hidden",t||N?null:""),i(n,"aria-hidden",t||a?null:"true"),i(n,"data-state",o),i(n,"data-disabled",String(s)),i(n,"data-clamped",a?"true":null),I(n,L,a?M(l):""),t&&this.#t===!1&&n.dispatchEvent(new CustomEvent("primitiv-collapsible-show",{bubbles:!0}))}r&&i(r,"aria-controls",n?n.id:null);for(let l of this.parts(w))i(l,"aria-hidden","true"),i(l,"data-state",o);this.controller.setTriggers(r?[{value:"trigger",element:r,disabled:s}]:[]),this.#t=t}},h=class extends d{},u=class extends d{},g=class extends d{};function A(e=globalThis.customElements){C(e,[[R,c],[b,h],[H,u],[w,g]])}A();

package/dist/cdn/tabs.js

@@ -1 +1 @@
-import{a as h,b as M,c as A,d as C,g as b,h as a,i as O,j as H,l as w,m as R}from"./chunks/chunk-FKLOMAT4.js";var v=class extends R{#t;constructor(i,n){super(i),this.#t=n}onTriggerClick(i){let{active:n}=this.#t.state(),r=A({disabled:this.disabled(),active:n},i.value);if(r!==null){let l=this.ordered().map(([,d])=>d.value);this.#t.activate(r,l.indexOf(r))}}onTriggerKeydown(i,n){let{active:r,orientation:l,dir:d,activationMode:p}=this.#t.state(),u=this.ordered(),e=u.map(([,o])=>o.value),t=C({values:e,disabled:this.disabled(),active:r,orientation:l,dir:d,activationMode:p},i.value,n.key);t&&(n.preventDefault(),t.activate!==null&&this.#t.activate(t.activate,e.indexOf(t.activate)),u[e.indexOf(t.focus)][0].focus())}};var D="primitiv-tabs",I="primitiv-tabs-list",y="primitiv-tabs-trigger",L="primitiv-tabs-content";function K(s){let i=s.getAttribute("value");return s.childElementCount===1&&i!==null?{tab:s.firstElementChild,value:i}:(O(s,`<${y}> needs a value and exactly one element child (a <button>, an <a href> or a router link) to decorate.`),null)}var f=class extends w{#t;#e=!1;controller=new v(this,this.#a());reconcileOn=["value","disabled","label","orientation"];get value(){return this.getAttribute("value")??void 0}set value(i){this.setAttribute("value",i)}#a(){return{state:()=>({active:this.value,orientation:this.#i(),dir:this.direction(),activationMode:this.#n()}),activate:(i,n)=>{this.announce("primitiv-tabs-change",{value:i,index:n})&&(this.value=i)}}}#n(){let i=this.getAttribute("activation-mode");return i==="manual"?i:"automatic"}#i(){return this.getAttribute("orientation")==="vertical"?"vertical":"horizontal"}reconcile(){let i=this.#i(),n=this.value,r=this.rootId();a(this,"data-orientation",i);for(let e of this.parts(I)){a(e,"role","tablist"),a(e,"aria-orientation",i),a(e,"data-orientation",i);let t=e.getAttribute("label");t!==null&&a(e,"aria-label",t)}let l=new Map;for(let e of this.parts(L)){let t=e.getAttribute("value");t!==null&&l.set(t,e)}let d=this.parts(y).flatMap(e=>{let t=K(e);return t?[{trigger:e,...t}]:[]}),p=M({values:d.map(e=>e.value),active:n});this.controller.setTriggers(d.map(({trigger:e,tab:t,value:o})=>({value:o,element:t,disabled:e.hasAttribute("disabled")})));for(let{trigger:e,tab:t,value:o}of d){let c=l.get(o),x=o===n,E=e.hasAttribute("disabled");t.id||(t.id=h(r,"trigger",o)),c&&!c.id&&(c.id=h(r,"panel",o)),a(t,"role","tab"),a(t,"aria-selected",String(x)),a(t,"aria-controls",c?c.id:null),a(t,"tabindex",o===p?"0":"-1"),a(t,"aria-disabled",E?"true":null),a(t,"data-disabled",E?"":null),a(t,"data-state",x?"active":"inactive"),a(t,"data-orientation",i),c&&a(c,"aria-labelledby",t.id)}for(let[e,t]of l){let o=e===n;a(t,"role","tabpanel"),a(t,"tabindex","0"),a(t,"hidden",o?null:""),a(t,"data-state",o?"active":"inactive"),a(t,"data-orientation",i)}let u=l.get(n);this.#e&&n!==this.#t&&u&&u.dispatchEvent(new CustomEvent("primitiv-tabs-show",{bubbles:!0})),this.#t=n,this.#e=!0}},m=class extends b{},g=class extends b{},T=class extends b{};function k(s=globalThis.customElements){H(s,[[D,f],[I,m],[y,g],[L,T]])}k();
+import{a as h,b as M,c as A,d as C,i as b,j as a,k as O,l as H,n as w,o as R}from"./chunks/chunk-WVI5UEAW.js";var v=class extends R{#t;constructor(i,n){super(i),this.#t=n}onTriggerClick(i){let{active:n}=this.#t.state(),r=A({disabled:this.disabled(),active:n},i.value);if(r!==null){let l=this.ordered().map(([,d])=>d.value);this.#t.activate(r,l.indexOf(r))}}onTriggerKeydown(i,n){let{active:r,orientation:l,dir:d,activationMode:p}=this.#t.state(),u=this.ordered(),e=u.map(([,o])=>o.value),t=C({values:e,disabled:this.disabled(),active:r,orientation:l,dir:d,activationMode:p},i.value,n.key);t&&(n.preventDefault(),t.activate!==null&&this.#t.activate(t.activate,e.indexOf(t.activate)),u[e.indexOf(t.focus)][0].focus())}};var D="primitiv-tabs",I="primitiv-tabs-list",y="primitiv-tabs-trigger",L="primitiv-tabs-content";function K(s){let i=s.getAttribute("value");return s.childElementCount===1&&i!==null?{tab:s.firstElementChild,value:i}:(O(s,`<${y}> needs a value and exactly one element child (a <button>, an <a href> or a router link) to decorate.`),null)}var f=class extends w{#t;#e=!1;controller=new v(this,this.#a());reconcileOn=["value","disabled","label","orientation"];get value(){return this.getAttribute("value")??void 0}set value(i){this.setAttribute("value",i)}#a(){return{state:()=>({active:this.value,orientation:this.#i(),dir:this.direction(),activationMode:this.#n()}),activate:(i,n)=>{this.announce("primitiv-tabs-change",{value:i,index:n})&&(this.value=i)}}}#n(){let i=this.getAttribute("activation-mode");return i==="manual"?i:"automatic"}#i(){return this.getAttribute("orientation")==="vertical"?"vertical":"horizontal"}reconcile(){let i=this.#i(),n=this.value,r=this.rootId();a(this,"data-orientation",i);for(let e of this.parts(I)){a(e,"role","tablist"),a(e,"aria-orientation",i),a(e,"data-orientation",i);let t=e.getAttribute("label");t!==null&&a(e,"aria-label",t)}let l=new Map;for(let e of this.parts(L)){let t=e.getAttribute("value");t!==null&&l.set(t,e)}let d=this.parts(y).flatMap(e=>{let t=K(e);return t?[{trigger:e,...t}]:[]}),p=M({values:d.map(e=>e.value),active:n});this.controller.setTriggers(d.map(({trigger:e,tab:t,value:o})=>({value:o,element:t,disabled:e.hasAttribute("disabled")})));for(let{trigger:e,tab:t,value:o}of d){let c=l.get(o),x=o===n,E=e.hasAttribute("disabled");t.id||(t.id=h(r,"trigger",o)),c&&!c.id&&(c.id=h(r,"panel",o)),a(t,"role","tab"),a(t,"aria-selected",String(x)),a(t,"aria-controls",c?c.id:null),a(t,"tabindex",o===p?"0":"-1"),a(t,"aria-disabled",E?"true":null),a(t,"data-disabled",E?"":null),a(t,"data-state",x?"active":"inactive"),a(t,"data-orientation",i),c&&a(c,"aria-labelledby",t.id)}for(let[e,t]of l){let o=e===n;a(t,"role","tabpanel"),a(t,"tabindex","0"),a(t,"hidden",o?null:""),a(t,"data-state",o?"active":"inactive"),a(t,"data-orientation",i)}let u=l.get(n);this.#e&&n!==this.#t&&u&&u.dispatchEvent(new CustomEvent("primitiv-tabs-show",{bubbles:!0})),this.#t=n,this.#e=!0}},m=class extends b{},g=class extends b{},T=class extends b{};function k(s=globalThis.customElements){H(s,[[D,f],[I,m],[y,g],[L,T]])}k();

package/dist/collapsible/CollapsibleController.d.ts

@@ -0,0 +1,32 @@
+import { TriggerController, type Trigger } from "../internal/TriggerController.js";
+/**
+ * What a {@link CollapsibleController} asks of whoever hosts it. The controller
+ * owns behaviour and never owns state (RFC 0033 D28): the custom elements keep
+ * the open state in a reflected `open` attribute, the React adapter keeps it in
+ * React, and each answers these two calls from wherever it keeps it.
+ */
+export type CollapsibleControllerHost = {
+    /** The state the controller cannot see for itself. */
+    state(): {
+        /** Whether the panel is open. */
+        open: boolean;
+    };
+    /** Apply a change the user asked for: `open` is the state afterwards. */
+    change(open: boolean): void;
+};
+/**
+ * The DOM behaviour of a collapsible: a click, Enter or Space on its trigger
+ * toggles it. It attaches to whatever trigger registers with it, so the same
+ * code runs under the custom elements and under the React adapter, which renders
+ * its own markup (RFC 0033 §3.4). There is one trigger; registering it
+ * `disabled` disables the collapsible — it stays focusable and never toggles.
+ * Enter and Space are handled here, not left to native activation, so a
+ * trigger that is not a `<button>` (an `<a>`, a `<div role="button">`)
+ * toggles too.
+ */
+export declare class CollapsibleController extends TriggerController {
+    #private;
+    constructor(root: HTMLElement, host: CollapsibleControllerHost);
+    protected onTriggerClick(trigger: Trigger): void;
+    protected onTriggerKeydown(trigger: Trigger, event: KeyboardEvent): void;
+}

package/dist/collapsible/CollapsibleController.js

@@ -0,0 +1,32 @@
+import { collapsibleKeydown, collapsibleToggle } from "@primitiv-ui/core";
+import { TriggerController } from "../internal/TriggerController.js";
+/**
+ * The DOM behaviour of a collapsible: a click, Enter or Space on its trigger
+ * toggles it. It attaches to whatever trigger registers with it, so the same
+ * code runs under the custom elements and under the React adapter, which renders
+ * its own markup (RFC 0033 §3.4). There is one trigger; registering it
+ * `disabled` disables the collapsible — it stays focusable and never toggles.
+ * Enter and Space are handled here, not left to native activation, so a
+ * trigger that is not a `<button>` (an `<a>`, a `<div role="button">`)
+ * toggles too.
+ */
+export class CollapsibleController extends TriggerController {
+    #host;
+    constructor(root, host) {
+        super(root);
+        this.#host = host;
+    }
+    onTriggerClick(trigger) {
+        const open = collapsibleToggle({ open: this.#host.state().open, disabled: trigger.disabled });
+        if (open !== null)
+            this.#host.change(open);
+    }
+    onTriggerKeydown(trigger, event) {
+        const outcome = collapsibleKeydown({ open: this.#host.state().open, disabled: trigger.disabled }, event.key);
+        if (!outcome)
+            return;
+        // Enter and Space would also click a button; the toggle happens here once.
+        event.preventDefault();
+        this.#host.change(outcome.open);
+    }
+}

package/dist/collapsible/elements.d.ts

@@ -0,0 +1,64 @@
+import { ElementBase, type ElementRegistry } from "../internal/element.js";
+import { PrimitivRootElement } from "../internal/RootElement.js";
+import { CollapsibleController } from "./CollapsibleController.js";
+export type { ElementRegistry };
+/**
+ * `<primitiv-collapsible>` — the state owner of a single disclosure: a trigger
+ * that shows and hides one panel.
+ *
+ * The root finds its own parts, so a collapsible nested in a panel keeps its
+ * own, and reconciles their ARIA from its reflected state whenever a part
+ * arrives, leaves, or changes an attribute the root reads (the lifecycle is
+ * `PrimitivRootElement`'s).
+ *
+ * @customElement primitiv-collapsible
+ * @summary The state owner of a single disclosure: a trigger that shows and hides one panel.
+ * @attr {boolean} open - Whether the panel is open. Reflected: it changes as the user toggles, so a server re-render or a history snapshot sees the live state.
+ * @attr {boolean} disabled - Disables the collapsible: the trigger's button stays focusable, is marked `aria-disabled`, and never toggles.
+ * @fires {CustomEvent<{ open: boolean }>} primitiv-collapsible-change - Bubbles, cancelable, fired before a user-driven toggle is applied, with the open state afterwards. Call `preventDefault()` to veto it.
+ */
+export declare class PrimitivCollapsibleElement extends PrimitivRootElement {
+    #private;
+    protected readonly controller: CollapsibleController;
+    protected readonly reconcileOn: readonly string[];
+    /** Whether the panel is open, reflected as the boolean `open` attribute. */
+    get open(): boolean;
+    set open(next: boolean);
+    protected reconcile(): void;
+}
+/**
+ * `<primitiv-collapsible-trigger>` — an interactive part. It decorates exactly
+ * one child the consumer writes, a `<button>`, which receives `aria-expanded`,
+ * `aria-controls` and the state attributes, so the rendered DOM matches React's
+ * `<button aria-expanded>` (RFC 0033 D24).
+ *
+ * @customElement primitiv-collapsible-trigger
+ */
+export declare class PrimitivCollapsibleTriggerElement extends ElementBase {
+}
+/**
+ * `<primitiv-collapsible-content>` — the panel. Structural: the root writes its
+ * id and state and hides it while closed.
+ *
+ * @customElement primitiv-collapsible-content
+ * @attr {boolean} force-mount - Never sets `hidden`, so styles can animate the panel open and closed. A closed panel always carries `aria-hidden`, so it stays out of the accessibility tree either way.
+ * @attr {string} collapsed-height - Shows a clamped preview while closed instead of hiding the panel (the read-more pattern). A bare number is pixels; anything else is a CSS length, used verbatim. Published as the `--primitiv-collapsible-collapsed-height` custom property, with `data-clamped="true"`; the panel is never hidden, since the preview is real content.
+ * @fires {CustomEvent} primitiv-collapsible-show - Bubbles from the panel as it opens (not on first render), so a lazy panel can fetch its content.
+ */
+export declare class PrimitivCollapsibleContentElement extends ElementBase {
+}
+/**
+ * `<primitiv-collapsible-trigger-icon>` — a decorative indicator, usually inside
+ * the trigger's button. The root hides it from assistive technology and mirrors
+ * the `data-state`, for a chevron that flips.
+ *
+ * @customElement primitiv-collapsible-trigger-icon
+ */
+export declare class PrimitivCollapsibleTriggerIconElement extends ElementBase {
+}
+/**
+ * Define the four Collapsible elements on `registry` (the global
+ * `customElements` by default). Safe to call more than once, and a no-op where
+ * there is no registry (a server render).
+ */
+export declare function defineCollapsible(registry?: ElementRegistry | undefined): void;

package/dist/collapsible/elements.js

@@ -0,0 +1,173 @@
+import { defineElements, ElementBase, reportOnce, write } from "../internal/element.js";
+import { PrimitivRootElement } from "../internal/RootElement.js";
+import { CollapsibleController } from "./CollapsibleController.js";
+// Stryker disable StringLiteral: static — evaluated once at import, so runtime mutant switching never reaches them; the names are pinned by the defineCollapsible registry test instead.
+const ROOT = "primitiv-collapsible";
+const TRIGGER = "primitiv-collapsible-trigger";
+const CONTENT = "primitiv-collapsible-content";
+const ICON = "primitiv-collapsible-trigger-icon";
+const HEIGHT = "--primitiv-collapsible-collapsed-height";
+// Stryker restore StringLiteral
+/**
+ * A trigger decorates exactly one element child — the `<button>` the consumer
+ * writes. Anything else is reported once and left undecorated rather than
+ * thrown (RFC 0033 D24).
+ */
+function decoratable(trigger) {
+    if (trigger.childElementCount === 1)
+        return trigger.firstElementChild;
+    reportOnce(trigger, `<${TRIGGER}> needs exactly one element child (a <button>) to decorate.`);
+    return null;
+}
+/** A `collapsed-height` as a CSS length: a bare number is pixels, anything else is used verbatim. */
+function cssLength(value) {
+    return Number.isNaN(Number(value)) ? value : `${value}px`;
+}
+/** Set or remove (`""`) a custom property, only when it would change (D20). */
+function writeProperty(element, name, value) {
+    if (element.style.getPropertyValue(name) === value)
+        return;
+    // Setting the empty string removes the property (CSSOM).
+    element.style.setProperty(name, value);
+    // Removing the last property leaves `style=""` behind; drop it.
+    if (element.getAttribute("style") === "")
+        element.removeAttribute("style");
+}
+/**
+ * `<primitiv-collapsible>` — the state owner of a single disclosure: a trigger
+ * that shows and hides one panel.
+ *
+ * The root finds its own parts, so a collapsible nested in a panel keeps its
+ * own, and reconciles their ARIA from its reflected state whenever a part
+ * arrives, leaves, or changes an attribute the root reads (the lifecycle is
+ * `PrimitivRootElement`'s).
+ *
+ * @customElement primitiv-collapsible
+ * @summary The state owner of a single disclosure: a trigger that shows and hides one panel.
+ * @attr {boolean} open - Whether the panel is open. Reflected: it changes as the user toggles, so a server re-render or a history snapshot sees the live state.
+ * @attr {boolean} disabled - Disables the collapsible: the trigger's button stays focusable, is marked `aria-disabled`, and never toggles.
+ * @fires {CustomEvent<{ open: boolean }>} primitiv-collapsible-change - Bubbles, cancelable, fired before a user-driven toggle is applied, with the open state afterwards. Call `preventDefault()` to veto it.
+ */
+export class PrimitivCollapsibleElement extends PrimitivRootElement {
+    /**
+     * Whether the panel was open at the last reconcile, so opening fires
+     * primitiv-collapsible-show; `undefined` until the first render.
+     */
+    #shown;
+    controller = new CollapsibleController(this, this.#host());
+    reconcileOn = ["open", "disabled", "force-mount", "collapsed-height"];
+    /** Whether the panel is open, reflected as the boolean `open` attribute. */
+    get open() {
+        return this.hasAttribute("open");
+    }
+    set open(next) {
+        this.toggleAttribute("open", next);
+    }
+    /** The controller's view of this element: state lives in reflected attributes. */
+    #host() {
+        return {
+            state: () => ({ open: this.open }),
+            change: (open) => {
+                if (this.announce("primitiv-collapsible-change", { open }))
+                    this.open = open;
+            },
+        };
+    }
+    reconcile() {
+        const open = this.open;
+        const state = open ? "open" : "closed";
+        const disabled = this.hasAttribute("disabled");
+        const rootId = this.rootId();
+        write(this, "data-state", state);
+        write(this, "data-disabled", String(disabled));
+        const [trigger] = this.parts(TRIGGER);
+        const [panel] = this.parts(CONTENT);
+        const button = trigger ? decoratable(trigger) : null;
+        if (button) {
+            if (!button.id)
+                button.id = `${rootId}-trigger`;
+            write(button, "aria-expanded", String(open));
+            write(button, "aria-disabled", disabled ? "true" : null);
+            write(button, "data-disabled", String(disabled));
+            write(button, "data-state", state);
+        }
+        if (panel) {
+            if (!panel.id)
+                panel.id = `${rootId}-content`;
+            const height = panel.getAttribute("collapsed-height");
+            // A clamped preview is real, readable content while closed, so it is
+            // never hidden; a force-mount panel stays rendered so styles can animate it.
+            const clamped = height !== null;
+            const mounted = clamped || panel.hasAttribute("force-mount");
+            write(panel, "hidden", open || mounted ? null : "");
+            // Every closed panel but a preview, not only a force-mount one: a
+            // stylesheet that animates the panel gives it a display that wins over
+            // `hidden` (the registry's does), which would leave it exposed.
+            write(panel, "aria-hidden", open || clamped ? null : "true");
+            write(panel, "data-state", state);
+            write(panel, "data-disabled", String(disabled));
+            write(panel, "data-clamped", clamped ? "true" : null);
+            writeProperty(panel, HEIGHT, clamped ? cssLength(height) : "");
+            // Opening announces it, so a lazy panel can fetch its content
+            // (`hx-trigger="primitiv-collapsible-show once"`). The first render shows
+            // what the server already rendered, so it announces nothing.
+            if (open && this.#shown === false) {
+                panel.dispatchEvent(new CustomEvent("primitiv-collapsible-show", { bubbles: true }));
+            }
+        }
+        if (button)
+            write(button, "aria-controls", panel ? panel.id : null);
+        for (const icon of this.parts(ICON)) {
+            write(icon, "aria-hidden", "true");
+            write(icon, "data-state", state);
+        }
+        // Replace the registration wholesale: a trigger whose child was re-rendered
+        // simply is not registered again.
+        // Stryker disable next-line StringLiteral: equivalent — a collapsible has one trigger, so its value is never read.
+        this.controller.setTriggers(button ? [{ value: "trigger", element: button, disabled }] : []);
+        this.#shown = open;
+    }
+}
+/**
+ * `<primitiv-collapsible-trigger>` — an interactive part. It decorates exactly
+ * one child the consumer writes, a `<button>`, which receives `aria-expanded`,
+ * `aria-controls` and the state attributes, so the rendered DOM matches React's
+ * `<button aria-expanded>` (RFC 0033 D24).
+ *
+ * @customElement primitiv-collapsible-trigger
+ */
+export class PrimitivCollapsibleTriggerElement extends ElementBase {
+}
+/**
+ * `<primitiv-collapsible-content>` — the panel. Structural: the root writes its
+ * id and state and hides it while closed.
+ *
+ * @customElement primitiv-collapsible-content
+ * @attr {boolean} force-mount - Never sets `hidden`, so styles can animate the panel open and closed. A closed panel always carries `aria-hidden`, so it stays out of the accessibility tree either way.
+ * @attr {string} collapsed-height - Shows a clamped preview while closed instead of hiding the panel (the read-more pattern). A bare number is pixels; anything else is a CSS length, used verbatim. Published as the `--primitiv-collapsible-collapsed-height` custom property, with `data-clamped="true"`; the panel is never hidden, since the preview is real content.
+ * @fires {CustomEvent} primitiv-collapsible-show - Bubbles from the panel as it opens (not on first render), so a lazy panel can fetch its content.
+ */
+export class PrimitivCollapsibleContentElement extends ElementBase {
+}
+/**
+ * `<primitiv-collapsible-trigger-icon>` — a decorative indicator, usually inside
+ * the trigger's button. The root hides it from assistive technology and mirrors
+ * the `data-state`, for a chevron that flips.
+ *
+ * @customElement primitiv-collapsible-trigger-icon
+ */
+export class PrimitivCollapsibleTriggerIconElement extends ElementBase {
+}
+/**
+ * Define the four Collapsible elements on `registry` (the global
+ * `customElements` by default). Safe to call more than once, and a no-op where
+ * there is no registry (a server render).
+ */
+export function defineCollapsible(registry = globalThis.customElements) {
+    defineElements(registry, [
+        [ROOT, PrimitivCollapsibleElement],
+        [TRIGGER, PrimitivCollapsibleTriggerElement],
+        [CONTENT, PrimitivCollapsibleContentElement],
+        [ICON, PrimitivCollapsibleTriggerIconElement],
+    ]);
+}

package/dist/collapsible/index.d.ts

@@ -0,0 +1,2 @@
+export { CollapsibleController, type CollapsibleControllerHost } from "./CollapsibleController.js";
+export { defineCollapsible, PrimitivCollapsibleContentElement, PrimitivCollapsibleElement, PrimitivCollapsibleTriggerElement, PrimitivCollapsibleTriggerIconElement, } from "./elements.js";

package/dist/collapsible/index.js

@@ -0,0 +1,2 @@
+export { CollapsibleController } from "./CollapsibleController.js";
+export { defineCollapsible, PrimitivCollapsibleContentElement, PrimitivCollapsibleElement, PrimitivCollapsibleTriggerElement, PrimitivCollapsibleTriggerIconElement, } from "./elements.js";

package/dist/custom-elements.json

@@ -286,6 +286,236 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/collapsible/elements.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`<primitiv-collapsible>` — the state owner of a single disclosure: a trigger\nthat shows and hides one panel.\n\nThe root finds its own parts, so a collapsible nested in a panel keeps its\nown, and reconciles their ARIA from its reflected state whenever a part\narrives, leaves, or changes an attribute the root reads (the lifecycle is\n`PrimitivRootElement`'s).",
+          "name": "PrimitivCollapsibleElement",
+          "members": [
+            {
+              "kind": "field",
+              "name": "#shown",
+              "privacy": "private",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Whether the panel was open at the last reconcile, so opening fires\nprimitiv-collapsible-show; `undefined` until the first render."
+            },
+            {
+              "kind": "field",
+              "name": "controller",
+              "type": {
+                "text": "CollapsibleController"
+              },
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new CollapsibleController(this, this.#host())"
+            },
+            {
+              "kind": "field",
+              "name": "reconcileOn",
+              "type": {
+                "text": "readonly string[]"
+              },
+              "privacy": "protected",
+              "readonly": true,
+              "default": "[\"open\", \"disabled\", \"force-mount\", \"collapsed-height\"]"
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the panel is open, reflected as the boolean `open` attribute."
+            },
+            {
+              "kind": "method",
+              "name": "#host",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "CollapsibleControllerHost"
+                }
+              },
+              "description": "The controller's view of this element: state lives in reflected attributes."
+            },
+            {
+              "kind": "method",
+              "name": "reconcile",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent<{ open: boolean }>"
+              },
+              "description": "Bubbles, cancelable, fired before a user-driven toggle is applied, with the open state afterwards. Call `preventDefault()` to veto it.",
+              "name": "primitiv-collapsible-change"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the panel is open. Reflected: it changes as the user toggles, so a server re-render or a history snapshot sees the live state.",
+              "name": "open"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Disables the collapsible: the trigger's button stays focusable, is marked `aria-disabled`, and never toggles.",
+              "name": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "PrimitivRootElement",
+            "module": "/src/internal/RootElement.ts"
+          },
+          "tagName": "primitiv-collapsible",
+          "customElement": true,
+          "summary": "The state owner of a single disclosure: a trigger that shows and hides one panel."
+        },
+        {
+          "kind": "class",
+          "description": "`<primitiv-collapsible-trigger>` — an interactive part. It decorates exactly\none child the consumer writes, a `<button>`, which receives `aria-expanded`,\n`aria-controls` and the state attributes, so the rendered DOM matches React's\n`<button aria-expanded>` (RFC 0033 D24).",
+          "name": "PrimitivCollapsibleTriggerElement",
+          "superclass": {
+            "name": "ElementBase",
+            "module": "/src/internal/element.ts"
+          },
+          "tagName": "primitiv-collapsible-trigger",
+          "customElement": true
+        },
+        {
+          "kind": "class",
+          "description": "`<primitiv-collapsible-content>` — the panel. Structural: the root writes its\nid and state and hides it while closed.",
+          "name": "PrimitivCollapsibleContentElement",
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Bubbles from the panel as it opens (not on first render), so a lazy panel can fetch its content.",
+              "name": "primitiv-collapsible-show"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Never sets `hidden`, so styles can animate the panel open and closed. A closed panel always carries `aria-hidden`, so it stays out of the accessibility tree either way.",
+              "name": "force-mount"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "Shows a clamped preview while closed instead of hiding the panel (the read-more pattern). A bare number is pixels; anything else is a CSS length, used verbatim. Published as the `--primitiv-collapsible-collapsed-height` custom property, with `data-clamped=\"true\"`; the panel is never hidden, since the preview is real content.",
+              "name": "collapsed-height"
+            }
+          ],
+          "superclass": {
+            "name": "ElementBase",
+            "module": "/src/internal/element.ts"
+          },
+          "tagName": "primitiv-collapsible-content",
+          "customElement": true
+        },
+        {
+          "kind": "class",
+          "description": "`<primitiv-collapsible-trigger-icon>` — a decorative indicator, usually inside\nthe trigger's button. The root hides it from assistive technology and mirrors\nthe `data-state`, for a chevron that flips.",
+          "name": "PrimitivCollapsibleTriggerIconElement",
+          "superclass": {
+            "name": "ElementBase",
+            "module": "/src/internal/element.ts"
+          },
+          "tagName": "primitiv-collapsible-trigger-icon",
+          "customElement": true
+        },
+        {
+          "kind": "function",
+          "name": "defineCollapsible",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "registry",
+              "default": "globalThis.customElements",
+              "type": {
+                "text": "ElementRegistry | undefined"
+              }
+            }
+          ],
+          "description": "Define the four Collapsible elements on `registry` (the global\n`customElements` by default). Safe to call more than once, and a no-op where\nthere is no registry (a server render)."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ElementRegistry",
+          "declaration": {
+            "name": "ElementRegistry",
+            "module": "src/collapsible/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimitivCollapsibleElement",
+          "declaration": {
+            "name": "PrimitivCollapsibleElement",
+            "module": "src/collapsible/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimitivCollapsibleTriggerElement",
+          "declaration": {
+            "name": "PrimitivCollapsibleTriggerElement",
+            "module": "src/collapsible/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimitivCollapsibleContentElement",
+          "declaration": {
+            "name": "PrimitivCollapsibleContentElement",
+            "module": "src/collapsible/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimitivCollapsibleTriggerIconElement",
+          "declaration": {
+            "name": "PrimitivCollapsibleTriggerIconElement",
+            "module": "src/collapsible/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "defineCollapsible",
+          "declaration": {
+            "name": "defineCollapsible",
+            "module": "src/collapsible/elements.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/tabs/elements.ts",

package/dist/define/collapsible.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/define/collapsible.js

@@ -0,0 +1,11 @@
+/**
+ * Side-effect entry: importing this module defines the four Collapsible
+ * elements (`<primitiv-collapsible>`, `-trigger`, `-content`, `-trigger-icon`)
+ * on the global `customElements` registry.
+ *
+ * ```html
+ * <script type="module">import "@primitiv-ui/web/define/collapsible";</script>
+ * ```
+ */
+import { defineCollapsible } from "../collapsible/elements.js";
+defineCollapsible();

package/dist/define/index.d.ts

@@ -3,4 +3,5 @@
  * Import `@primitiv-ui/web/define/<component>` instead to define only one.
  */
 import "./accordion.js";
+import "./collapsible.js";
 import "./tabs.js";

package/dist/define/index.js

@@ -3,4 +3,5 @@
  * Import `@primitiv-ui/web/define/<component>` instead to define only one.
  */
 import "./accordion.js";
+import "./collapsible.js";
 import "./tabs.js";

package/dist/frameworks/events.d.ts

@@ -11,3 +11,7 @@ export type PrimitivTabsChangeEvent = CustomEvent<{
 export type PrimitivAccordionChangeEvent = CustomEvent<{
     value: string[];
 }>;
+/** The `primitiv-collapsible-change` event: bubbles, cancelable, fired before the change applies, with the open state afterwards. */
+export type PrimitivCollapsibleChangeEvent = CustomEvent<{
+    open: boolean;
+}>;

package/dist/frameworks/react.d.ts

@@ -19,13 +19,14 @@
  */
 import type { DetailedHTMLProps, HTMLAttributes } from "react";
 import type { PrimitivAccordionContentElement, PrimitivAccordionElement, PrimitivAccordionItemElement, PrimitivAccordionTriggerElement, PrimitivAccordionTriggerIconElement } from "../accordion/elements.js";
+import type { PrimitivCollapsibleContentElement, PrimitivCollapsibleElement, PrimitivCollapsibleTriggerElement, PrimitivCollapsibleTriggerIconElement } from "../collapsible/elements.js";
 import type { PrimitivTabsContentElement, PrimitivTabsElement, PrimitivTabsListElement, PrimitivTabsTriggerElement } from "../tabs/elements.js";
-import type { PrimitivAccordionChangeEvent, PrimitivTabsChangeEvent } from "./events.js";
+import type { PrimitivAccordionChangeEvent, PrimitivCollapsibleChangeEvent, PrimitivTabsChangeEvent } from "./events.js";
 /** React's own props for an element, plus `class`, which React 19 passes to custom elements. */
 type ElementProps<E extends HTMLElement> = DetailedHTMLProps<HTMLAttributes<E>, E> & {
     class?: string;
 };
-export type { PrimitivAccordionChangeEvent, PrimitivTabsChangeEvent };
+export type { PrimitivAccordionChangeEvent, PrimitivCollapsibleChangeEvent, PrimitivTabsChangeEvent };
 declare module "react" {
     namespace JSX {
         interface IntrinsicElements {
@@ -46,6 +47,18 @@ declare module "react" {
                 "onprimitiv-accordion-show"?: (event: CustomEvent) => void;
             };
             "primitiv-accordion-trigger-icon": ElementProps<PrimitivAccordionTriggerIconElement>;
+            "primitiv-collapsible": ElementProps<PrimitivCollapsibleElement> & {
+                open?: boolean;
+                disabled?: boolean;
+                "onprimitiv-collapsible-change"?: (event: PrimitivCollapsibleChangeEvent) => void;
+            };
+            "primitiv-collapsible-trigger": ElementProps<PrimitivCollapsibleTriggerElement>;
+            "primitiv-collapsible-content": ElementProps<PrimitivCollapsibleContentElement> & {
+                "force-mount"?: boolean;
+                "collapsed-height"?: string | number;
+                "onprimitiv-collapsible-show"?: (event: CustomEvent) => void;
+            };
+            "primitiv-collapsible-trigger-icon": ElementProps<PrimitivCollapsibleTriggerIconElement>;
             "primitiv-tabs": ElementProps<PrimitivTabsElement> & {
                 value?: string;
                 orientation?: "horizontal" | "vertical";

package/dist/frameworks/svelte.d.ts

@@ -18,8 +18,9 @@
  */
 import type { HTMLAttributes } from "svelte/elements";
 import type { PrimitivAccordionContentElement, PrimitivAccordionElement, PrimitivAccordionItemElement, PrimitivAccordionTriggerElement, PrimitivAccordionTriggerIconElement } from "../accordion/elements.js";
+import type { PrimitivCollapsibleContentElement, PrimitivCollapsibleElement, PrimitivCollapsibleTriggerElement, PrimitivCollapsibleTriggerIconElement } from "../collapsible/elements.js";
 import type { PrimitivTabsContentElement, PrimitivTabsElement, PrimitivTabsListElement, PrimitivTabsTriggerElement } from "../tabs/elements.js";
-import type { PrimitivAccordionChangeEvent, PrimitivTabsChangeEvent } from "./events.js";
+import type { PrimitivAccordionChangeEvent, PrimitivCollapsibleChangeEvent, PrimitivTabsChangeEvent } from "./events.js";
 /** Svelte's own attributes and events for an element. */
 type Attributes<E extends HTMLElement> = HTMLAttributes<E>;
 declare module "svelte/elements" {
@@ -41,6 +42,18 @@ declare module "svelte/elements" {
             "onprimitiv-accordion-show"?: (event: CustomEvent) => void;
         };
         "primitiv-accordion-trigger-icon": Attributes<PrimitivAccordionTriggerIconElement>;
+        "primitiv-collapsible": Attributes<PrimitivCollapsibleElement> & {
+            open?: boolean;
+            disabled?: boolean;
+            "onprimitiv-collapsible-change"?: (event: PrimitivCollapsibleChangeEvent) => void;
+        };
+        "primitiv-collapsible-trigger": Attributes<PrimitivCollapsibleTriggerElement>;
+        "primitiv-collapsible-content": Attributes<PrimitivCollapsibleContentElement> & {
+            "force-mount"?: boolean;
+            "collapsed-height"?: string | number;
+            "onprimitiv-collapsible-show"?: (event: CustomEvent) => void;
+        };
+        "primitiv-collapsible-trigger-icon": Attributes<PrimitivCollapsibleTriggerIconElement>;
         "primitiv-tabs": Attributes<PrimitivTabsElement> & {
             value?: string;
             orientation?: "horizontal" | "vertical";

package/dist/frameworks/vue.d.ts

@@ -19,7 +19,7 @@
  * JSR does not allow a published module to do.
  */
 import type { DefineComponent, EmitsOptions } from "vue";
-import type { PrimitivAccordionChangeEvent, PrimitivTabsChangeEvent } from "./events.js";
+import type { PrimitivAccordionChangeEvent, PrimitivCollapsibleChangeEvent, PrimitivTabsChangeEvent } from "./events.js";
 /** A tag as Vue's template checker sees it: its props, and the events it emits. */
 type Tag<Props, Events extends EmitsOptions = Record<never, never>> = DefineComponent<Props, Record<never, never>, Record<never, never>, Record<never, never>, Record<never, never>, Record<never, never>, Record<never, never>, Events>;
 declare module "vue" {
@@ -43,6 +43,20 @@ declare module "vue" {
             "primitiv-accordion-show": (event: CustomEvent) => void;
         }>;
         "primitiv-accordion-trigger-icon": Tag<Record<never, never>>;
+        "primitiv-collapsible": Tag<{
+            open?: boolean | "";
+            disabled?: boolean | "";
+        }, {
+            "primitiv-collapsible-change": (event: PrimitivCollapsibleChangeEvent) => void;
+        }>;
+        "primitiv-collapsible-trigger": Tag<Record<never, never>>;
+        "primitiv-collapsible-content": Tag<{
+            forceMount?: boolean | "";
+            collapsedHeight?: string | number;
+        }, {
+            "primitiv-collapsible-show": (event: CustomEvent) => void;
+        }>;
+        "primitiv-collapsible-trigger-icon": Tag<Record<never, never>>;
         "primitiv-tabs": Tag<{
             value?: string;
             orientation?: "horizontal" | "vertical";

package/dist/index.d.ts

@@ -4,4 +4,5 @@
  * `@primitiv-ui/web/define` (or `/define/<component>`) to register the tags.
  */
 export * from "./accordion/index.js";
+export * from "./collapsible/index.js";
 export * from "./tabs/index.js";

package/dist/index.js

@@ -4,4 +4,5 @@
  * `@primitiv-ui/web/define` (or `/define/<component>`) to register the tags.
  */
 export * from "./accordion/index.js";
+export * from "./collapsible/index.js";
 export * from "./tabs/index.js";

package/dist/primitiv-web.js

@@ -1 +1 @@
-function b(e,t,i){return`${e}-${t}-${i}`}function A({orientation:e,dir:t,homeEnd:i=!1,activate:r=!1}){let n={};if(e==="horizontal"||e==="both"){let c=t==="rtl"?"ArrowLeft":"ArrowRight",d=t==="rtl"?"ArrowRight":"ArrowLeft";n[c]="next",n[d]="prev"}return(e==="vertical"||e==="both")&&(n.ArrowDown="next",n.ArrowUp="prev"),i&&(n.Home="first",n.End="last"),r&&(n.Enter="activate",n[" "]="activate"),n}function E({action:e,navigable:t,currentKey:i}){let r=t.length;if(r===0)return null;switch(e){case"activate":return{target:i};case"first":return{target:t[0]};case"last":return{target:t[r-1]};case void 0:return null;case"next":case"prev":{let n=t.indexOf(i);if(n===-1)return null;let c=e==="next"?1:r-1;return{target:t[(n+c)%r]}}}}function D(e){return e.active??e.values[0]}function R(e,t){return e.disabled.has(t)||e.active===t?null:t}function N(e,t,i){let r=A({orientation:e.orientation,dir:e.dir,homeEnd:!0,activate:!0})[i],n=E({action:r,navigable:e.values,currentKey:t});if(!n)return null;let c=n.target,d=e.activationMode==="automatic"||r==="activate";return{focus:c,activate:d?R(e,c):null}}function P(e,t){return e.disabled.has(t)?null:e.expanded.includes(t)?e.expanded.filter(i=>i!==t):e.multiple?[...e.expanded,t]:[t]}function $(e,t,i){let r=A({orientation:e.orientation,dir:e.dir,homeEnd:!0,activate:!0})[i];if(r==="activate")return e.disabled.has(t)?null:{focus:null,toggle:t};let n=e.values.filter(d=>!e.disabled.has(d)),c=E({action:r,navigable:n,currentKey:t});return c&&{focus:c.target,toggle:null}}var v=class{#t;#e=new Map;#i=null;constructor(t){this.#t=t}registerTrigger(t,i,r={}){this.#e.set(i,{value:t,disabled:r.disabled??!1})}setTriggers(t){this.#e.clear();for(let{value:i,element:r,disabled:n}of t)this.registerTrigger(i,r,{disabled:n})}unregisterTrigger(t){this.#e.delete(t)}connect(){if(this.#i)return;this.#i=new AbortController;let{signal:t}=this.#i;this.#t.addEventListener("click",i=>this.#o(i,this.onTriggerClick),{signal:t}),this.#t.addEventListener("keydown",i=>this.#o(i,this.onTriggerKeydown),{signal:t})}disconnect(){this.#i?.abort(),this.#i=null}ordered(){return[...this.#e].sort(([t],[i])=>t.compareDocumentPosition(i)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1)}disabled(){let t=new Set;for(let i of this.#e.values())i.disabled&&t.add(i.value);return t}#o(t,i){for(let[r,n]of this.#e)if(r.contains(t.target))return i.call(this,n,t)}};var y=class extends v{#t;constructor(t,i){super(t),this.#t=i}#e(t){let{expanded:i,multiple:r}=this.#t.state(),n=P({disabled:this.disabled(),expanded:i,multiple:r},t);n!==null&&this.#t.change(n)}onTriggerClick(t){this.#e(t.value)}onTriggerKeydown(t,i){let{expanded:r,multiple:n,orientation:c,dir:d}=this.#t.state(),p=this.ordered(),s=p.map(([,l])=>l.value),o=$({values:s,disabled:this.disabled(),expanded:r,multiple:n,orientation:c,dir:d},t.value,i.key);o&&(i.preventDefault(),o.toggle!==null&&this.#e(o.toggle),o.focus!==null&&p[s.indexOf(o.focus)][0].focus())}};var g=globalThis.HTMLElement??class{};function a(e,t,i){e.getAttribute(t)!==i&&(i===null?e.removeAttribute(t):e.setAttribute(t,i))}var W=new WeakSet;function T(e,t){W.has(e)||(W.add(e),console.error(t,e))}function M(e,t){if(e)for(let[i,r]of t)e.get(i)||e.define(i,r)}function m(e,t,i){return[...e.querySelectorAll(t)].filter(r=>r.closest(i)===e)}var V=0,f=class extends g{#t;#e=new MutationObserver(()=>this.reconcile());connectedCallback(){this.controller.connect(),this.#e.observe(this,{subtree:!0,childList:!0,attributes:!0,attributeFilter:[...this.reconcileOn]}),this.reconcile()}disconnectedCallback(){this.controller.disconnect(),this.#e.disconnect()}rootId(){return this.id||(this.#t??=`${this.localName}-${++V}`)}direction(){return this.matches(":dir(rtl)")?"rtl":"ltr"}parts(t){return m(this,t,this.localName)}announce(t,i){return this.dispatchEvent(new CustomEvent(t,{bubbles:!0,cancelable:!0,detail:i}))}};var X="primitiv-accordion",h="primitiv-accordion-item",z="primitiv-accordion-trigger",_="primitiv-accordion-content",j="primitiv-accordion-trigger-icon";function Y(e){return(e??"").split(/\s+/).filter(Boolean)}function Z(e){return e.childElementCount===1?e.firstElementChild:(T(e,`<${z}> needs exactly one element child (a <button>) to decorate.`),null)}var O=class extends f{#t=new Set;#e=!1;controller=new y(this,this.#i());reconcileOn=["value","disabled","orientation","force-mount"];get value(){return Y(this.getAttribute("value"))}set value(t){this.setAttribute("value",typeof t=="string"?t:t.join(" "))}#i(){return{state:()=>({expanded:this.value,multiple:this.hasAttribute("multiple"),orientation:this.#o(),dir:this.direction()}),change:t=>{this.announce("primitiv-accordion-change",{value:t})&&(this.value=t)}}}#o(){return this.getAttribute("orientation")==="horizontal"?"horizontal":"vertical"}reconcile(){let t=new Set(this.value),i=this.rootId();a(this,"data-orientation",this.#o());let r=[];for(let n of this.parts(h)){let c=n.getAttribute("value");if(c===null){T(n,`<${h}> needs a value, which pairs it with the root's value.`);continue}let d=t.has(c),p=d?"open":"closed",[s]=m(n,z,h),[o]=m(n,_,h),l=s?Z(s):null;if(l){let u=s.hasAttribute("disabled");r.push({value:c,element:l,disabled:u}),l.id||(l.id=b(i,"heading",c)),a(l,"aria-expanded",String(d)),a(l,"aria-disabled",String(u)),a(l,"data-disabled",String(u)),a(l,"data-state",p)}if(o){o.id||(o.id=b(i,"panel",c));let u=o.hasAttribute("force-mount");o.hasAttribute("role")||o.setAttribute("role","region"),a(o,"aria-labelledby",l?l.id:null),a(o,"hidden",d||u?null:""),a(o,"aria-hidden",d?null:"true"),a(o,"data-state",p),this.#e&&d&&!this.#t.has(c)&&o.dispatchEvent(new CustomEvent("primitiv-accordion-show",{bubbles:!0}))}l&&a(l,"aria-controls",o?o.id:null);for(let u of m(n,j,h))a(u,"aria-hidden","true"),a(u,"data-state",p)}this.controller.setTriggers(r),this.#t=t,this.#e=!0}},w=class extends g{},C=class extends g{},K=class extends g{},H=class extends g{};function G(e=globalThis.customElements){M(e,[[X,O],[h,w],[z,C],[_,K],[j,H]])}var x=class extends v{#t;constructor(t,i){super(t),this.#t=i}onTriggerClick(t){let{active:i}=this.#t.state(),r=R({disabled:this.disabled(),active:i},t.value);if(r!==null){let n=this.ordered().map(([,c])=>c.value);this.#t.activate(r,n.indexOf(r))}}onTriggerKeydown(t,i){let{active:r,orientation:n,dir:c,activationMode:d}=this.#t.state(),p=this.ordered(),s=p.map(([,l])=>l.value),o=N({values:s,disabled:this.disabled(),active:r,orientation:n,dir:c,activationMode:d},t.value,i.key);o&&(i.preventDefault(),o.activate!==null&&this.#t.activate(o.activate,s.indexOf(o.activate)),p[s.indexOf(o.focus)][0].focus())}};var tt="primitiv-tabs",J="primitiv-tabs-list",B="primitiv-tabs-trigger",Q="primitiv-tabs-content";function et(e){let t=e.getAttribute("value");return e.childElementCount===1&&t!==null?{tab:e.firstElementChild,value:t}:(T(e,`<${B}> needs a value and exactly one element child (a <button>, an <a href> or a router link) to decorate.`),null)}var L=class extends f{#t;#e=!1;controller=new x(this,this.#i());reconcileOn=["value","disabled","label","orientation"];get value(){return this.getAttribute("value")??void 0}set value(t){this.setAttribute("value",t)}#i(){return{state:()=>({active:this.value,orientation:this.#n(),dir:this.direction(),activationMode:this.#o()}),activate:(t,i)=>{this.announce("primitiv-tabs-change",{value:t,index:i})&&(this.value=t)}}}#o(){let t=this.getAttribute("activation-mode");return t==="manual"?t:"automatic"}#n(){return this.getAttribute("orientation")==="vertical"?"vertical":"horizontal"}reconcile(){let t=this.#n(),i=this.value,r=this.rootId();a(this,"data-orientation",t);for(let s of this.parts(J)){a(s,"role","tablist"),a(s,"aria-orientation",t),a(s,"data-orientation",t);let o=s.getAttribute("label");o!==null&&a(s,"aria-label",o)}let n=new Map;for(let s of this.parts(Q)){let o=s.getAttribute("value");o!==null&&n.set(o,s)}let c=this.parts(B).flatMap(s=>{let o=et(s);return o?[{trigger:s,...o}]:[]}),d=D({values:c.map(s=>s.value),active:i});this.controller.setTriggers(c.map(({trigger:s,tab:o,value:l})=>({value:l,element:o,disabled:s.hasAttribute("disabled")})));for(let{trigger:s,tab:o,value:l}of c){let u=n.get(l),F=l===i,U=s.hasAttribute("disabled");o.id||(o.id=b(r,"trigger",l)),u&&!u.id&&(u.id=b(r,"panel",l)),a(o,"role","tab"),a(o,"aria-selected",String(F)),a(o,"aria-controls",u?u.id:null),a(o,"tabindex",l===d?"0":"-1"),a(o,"aria-disabled",U?"true":null),a(o,"data-disabled",U?"":null),a(o,"data-state",F?"active":"inactive"),a(o,"data-orientation",t),u&&a(u,"aria-labelledby",o.id)}for(let[s,o]of n){let l=s===i;a(o,"role","tabpanel"),a(o,"tabindex","0"),a(o,"hidden",l?null:""),a(o,"data-state",l?"active":"inactive"),a(o,"data-orientation",t)}let p=n.get(i);this.#e&&i!==this.#t&&p&&p.dispatchEvent(new CustomEvent("primitiv-tabs-show",{bubbles:!0})),this.#t=i,this.#e=!0}},S=class extends g{},k=class extends g{},I=class extends g{};function q(e=globalThis.customElements){M(e,[[tt,L],[J,S],[B,k],[Q,I]])}G();q();export{y as AccordionController,K as PrimitivAccordionContentElement,O as PrimitivAccordionElement,w as PrimitivAccordionItemElement,C as PrimitivAccordionTriggerElement,H as PrimitivAccordionTriggerIconElement,I as PrimitivTabsContentElement,L as PrimitivTabsElement,S as PrimitivTabsListElement,k as PrimitivTabsTriggerElement,x as TabsController,G as defineAccordion,q as defineTabs};
+function h(e,t,o){return`${e}-${t}-${o}`}function C({orientation:e,dir:t,homeEnd:o=!1,activate:r=!1}){let s={};if(e==="horizontal"||e==="both"){let c=t==="rtl"?"ArrowLeft":"ArrowRight",a=t==="rtl"?"ArrowRight":"ArrowLeft";s[c]="next",s[a]="prev"}return(e==="vertical"||e==="both")&&(s.ArrowDown="next",s.ArrowUp="prev"),o&&(s.Home="first",s.End="last"),r&&(s.Enter="activate",s[" "]="activate"),s}function w({action:e,navigable:t,currentKey:o}){let r=t.length;if(r===0)return null;switch(e){case"activate":return{target:o};case"first":return{target:t[0]};case"last":return{target:t[r-1]};case void 0:return null;case"next":case"prev":{let s=t.indexOf(o);if(s===-1)return null;let c=e==="next"?1:r-1;return{target:t[(s+c)%r]}}}}function B(e){return e.active??e.values[0]}function O(e,t){return e.disabled.has(t)||e.active===t?null:t}function q(e,t,o){let r=C({orientation:e.orientation,dir:e.dir,homeEnd:!0,activate:!0})[o],s=w({action:r,navigable:e.values,currentKey:t});if(!s)return null;let c=s.target,a=e.activationMode==="automatic"||r==="activate";return{focus:c,activate:a?O(e,c):null}}function F(e,t){return e.disabled.has(t)?null:e.expanded.includes(t)?e.expanded.filter(o=>o!==t):e.multiple?[...e.expanded,t]:[t]}function U(e,t,o){let r=C({orientation:e.orientation,dir:e.dir,homeEnd:!0,activate:!0})[o];if(r==="activate")return e.disabled.has(t)?null:{focus:null,toggle:t};let s=e.values.filter(a=>!e.disabled.has(a)),c=w({action:r,navigable:s,currentKey:t});return c&&{focus:c.target,toggle:null}}function R(e){return e.disabled?null:!e.open}function W(e,t){if(t!=="Enter"&&t!==" ")return null;let o=R(e);return o===null?null:{open:o}}var b=class{#t;#e=new Map;#o=null;constructor(t){this.#t=t}registerTrigger(t,o,r={}){this.#e.set(o,{value:t,disabled:r.disabled??!1})}setTriggers(t){this.#e.clear();for(let{value:o,element:r,disabled:s}of t)this.registerTrigger(o,r,{disabled:s})}unregisterTrigger(t){this.#e.delete(t)}connect(){if(this.#o)return;this.#o=new AbortController;let{signal:t}=this.#o;this.#t.addEventListener("click",o=>this.#i(o,this.onTriggerClick),{signal:t}),this.#t.addEventListener("keydown",o=>this.#i(o,this.onTriggerKeydown),{signal:t})}disconnect(){this.#o?.abort(),this.#o=null}ordered(){return[...this.#e].sort(([t],[o])=>t.compareDocumentPosition(o)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1)}disabled(){let t=new Set;for(let o of this.#e.values())o.disabled&&t.add(o.value);return t}#i(t,o){for(let[r,s]of this.#e)if(r.contains(t.target))return o.call(this,s,t)}};var x=class extends b{#t;constructor(t,o){super(t),this.#t=o}#e(t){let{expanded:o,multiple:r}=this.#t.state(),s=F({disabled:this.disabled(),expanded:o,multiple:r},t);s!==null&&this.#t.change(s)}onTriggerClick(t){this.#e(t.value)}onTriggerKeydown(t,o){let{expanded:r,multiple:s,orientation:c,dir:a}=this.#t.state(),p=this.ordered(),l=p.map(([,d])=>d.value),i=U({values:l,disabled:this.disabled(),expanded:r,multiple:s,orientation:c,dir:a},t.value,o.key);i&&(o.preventDefault(),i.toggle!==null&&this.#e(i.toggle),i.focus!==null&&p[l.indexOf(i.focus)][0].focus())}};var g=globalThis.HTMLElement??class{};function n(e,t,o){e.getAttribute(t)!==o&&(o===null?e.removeAttribute(t):e.setAttribute(t,o))}var tt=new WeakSet;function f(e,t){tt.has(e)||(tt.add(e),console.error(t,e))}function v(e,t){if(e)for(let[o,r]of t)e.get(o)||e.define(o,r)}function y(e,t,o){return[...e.querySelectorAll(t)].filter(r=>r.closest(o)===e)}var lt=0,m=class extends g{#t;#e=new MutationObserver(()=>this.reconcile());connectedCallback(){this.controller.connect(),this.#e.observe(this,{subtree:!0,childList:!0,attributes:!0,attributeFilter:[...this.reconcileOn]}),this.reconcile()}disconnectedCallback(){this.controller.disconnect(),this.#e.disconnect()}rootId(){return this.id||(this.#t??=`${this.localName}-${++lt}`)}direction(){return this.matches(":dir(rtl)")?"rtl":"ltr"}parts(t){return y(this,t,this.localName)}announce(t,o){return this.dispatchEvent(new CustomEvent(t,{bubbles:!0,cancelable:!0,detail:o}))}};var at="primitiv-accordion",T="primitiv-accordion-item",_="primitiv-accordion-trigger",et="primitiv-accordion-content",ot="primitiv-accordion-trigger-icon";function ct(e){return(e??"").split(/\s+/).filter(Boolean)}function dt(e){return e.childElementCount===1?e.firstElementChild:(f(e,`<${_}> needs exactly one element child (a <button>) to decorate.`),null)}var M=class extends m{#t=new Set;#e=!1;controller=new x(this,this.#o());reconcileOn=["value","disabled","orientation","force-mount"];get value(){return ct(this.getAttribute("value"))}set value(t){this.setAttribute("value",typeof t=="string"?t:t.join(" "))}#o(){return{state:()=>({expanded:this.value,multiple:this.hasAttribute("multiple"),orientation:this.#i(),dir:this.direction()}),change:t=>{this.announce("primitiv-accordion-change",{value:t})&&(this.value=t)}}}#i(){return this.getAttribute("orientation")==="horizontal"?"horizontal":"vertical"}reconcile(){let t=new Set(this.value),o=this.rootId();n(this,"data-orientation",this.#i());let r=[];for(let s of this.parts(T)){let c=s.getAttribute("value");if(c===null){f(s,`<${T}> needs a value, which pairs it with the root's value.`);continue}let a=t.has(c),p=a?"open":"closed",[l]=y(s,_,T),[i]=y(s,et,T),d=l?dt(l):null;if(d){let u=l.hasAttribute("disabled");r.push({value:c,element:d,disabled:u}),d.id||(d.id=h(o,"heading",c)),n(d,"aria-expanded",String(a)),n(d,"aria-disabled",String(u)),n(d,"data-disabled",String(u)),n(d,"data-state",p)}if(i){i.id||(i.id=h(o,"panel",c));let u=i.hasAttribute("force-mount");i.hasAttribute("role")||i.setAttribute("role","region"),n(i,"aria-labelledby",d?d.id:null),n(i,"hidden",a||u?null:""),n(i,"aria-hidden",a?null:"true"),n(i,"data-state",p),this.#e&&a&&!this.#t.has(c)&&i.dispatchEvent(new CustomEvent("primitiv-accordion-show",{bubbles:!0}))}d&&n(d,"aria-controls",i?i.id:null);for(let u of y(s,ot,T))n(u,"aria-hidden","true"),n(u,"data-state",p)}this.controller.setTriggers(r),this.#t=t,this.#e=!0}},H=class extends g{},K=class extends g{},L=class extends g{},S=class extends g{};function j(e=globalThis.customElements){v(e,[[at,M],[T,H],[_,K],[et,L],[ot,S]])}var E=class extends b{#t;constructor(t,o){super(t),this.#t=o}onTriggerClick(t){let o=R({open:this.#t.state().open,disabled:t.disabled});o!==null&&this.#t.change(o)}onTriggerKeydown(t,o){let r=W({open:this.#t.state().open,disabled:t.disabled},o.key);r&&(o.preventDefault(),this.#t.change(r.open))}};var pt="primitiv-collapsible",V="primitiv-collapsible-trigger",it="primitiv-collapsible-content",nt="primitiv-collapsible-trigger-icon",ut="--primitiv-collapsible-collapsed-height";function gt(e){return e.childElementCount===1?e.firstElementChild:(f(e,`<${V}> needs exactly one element child (a <button>) to decorate.`),null)}function bt(e){return Number.isNaN(Number(e))?e:`${e}px`}function mt(e,t,o){e.style.getPropertyValue(t)!==o&&(e.style.setProperty(t,o),e.getAttribute("style")===""&&e.removeAttribute("style"))}var I=class extends m{#t;controller=new E(this,this.#e());reconcileOn=["open","disabled","force-mount","collapsed-height"];get open(){return this.hasAttribute("open")}set open(t){this.toggleAttribute("open",t)}#e(){return{state:()=>({open:this.open}),change:t=>{this.announce("primitiv-collapsible-change",{open:t})&&(this.open=t)}}}reconcile(){let t=this.open,o=t?"open":"closed",r=this.hasAttribute("disabled"),s=this.rootId();n(this,"data-state",o),n(this,"data-disabled",String(r));let[c]=this.parts(V),[a]=this.parts(it),p=c?gt(c):null;if(p&&(p.id||(p.id=`${s}-trigger`),n(p,"aria-expanded",String(t)),n(p,"aria-disabled",r?"true":null),n(p,"data-disabled",String(r)),n(p,"data-state",o)),a){a.id||(a.id=`${s}-content`);let l=a.getAttribute("collapsed-height"),i=l!==null,d=i||a.hasAttribute("force-mount");n(a,"hidden",t||d?null:""),n(a,"aria-hidden",t||i?null:"true"),n(a,"data-state",o),n(a,"data-disabled",String(r)),n(a,"data-clamped",i?"true":null),mt(a,ut,i?bt(l):""),t&&this.#t===!1&&a.dispatchEvent(new CustomEvent("primitiv-collapsible-show",{bubbles:!0}))}p&&n(p,"aria-controls",a?a.id:null);for(let l of this.parts(nt))n(l,"aria-hidden","true"),n(l,"data-state",o);this.controller.setTriggers(p?[{value:"trigger",element:p,disabled:r}]:[]),this.#t=t}},k=class extends g{},N=class extends g{},D=class extends g{};function J(e=globalThis.customElements){v(e,[[pt,I],[V,k],[it,N],[nt,D]])}var A=class extends b{#t;constructor(t,o){super(t),this.#t=o}onTriggerClick(t){let{active:o}=this.#t.state(),r=O({disabled:this.disabled(),active:o},t.value);if(r!==null){let s=this.ordered().map(([,c])=>c.value);this.#t.activate(r,s.indexOf(r))}}onTriggerKeydown(t,o){let{active:r,orientation:s,dir:c,activationMode:a}=this.#t.state(),p=this.ordered(),l=p.map(([,d])=>d.value),i=q({values:l,disabled:this.disabled(),active:r,orientation:s,dir:c,activationMode:a},t.value,o.key);i&&(o.preventDefault(),i.activate!==null&&this.#t.activate(i.activate,l.indexOf(i.activate)),p[l.indexOf(i.focus)][0].focus())}};var ht="primitiv-tabs",rt="primitiv-tabs-list",Q="primitiv-tabs-trigger",st="primitiv-tabs-content";function ft(e){let t=e.getAttribute("value");return e.childElementCount===1&&t!==null?{tab:e.firstElementChild,value:t}:(f(e,`<${Q}> needs a value and exactly one element child (a <button>, an <a href> or a router link) to decorate.`),null)}var P=class extends m{#t;#e=!1;controller=new A(this,this.#o());reconcileOn=["value","disabled","label","orientation"];get value(){return this.getAttribute("value")??void 0}set value(t){this.setAttribute("value",t)}#o(){return{state:()=>({active:this.value,orientation:this.#n(),dir:this.direction(),activationMode:this.#i()}),activate:(t,o)=>{this.announce("primitiv-tabs-change",{value:t,index:o})&&(this.value=t)}}}#i(){let t=this.getAttribute("activation-mode");return t==="manual"?t:"automatic"}#n(){return this.getAttribute("orientation")==="vertical"?"vertical":"horizontal"}reconcile(){let t=this.#n(),o=this.value,r=this.rootId();n(this,"data-orientation",t);for(let l of this.parts(rt)){n(l,"role","tablist"),n(l,"aria-orientation",t),n(l,"data-orientation",t);let i=l.getAttribute("label");i!==null&&n(l,"aria-label",i)}let s=new Map;for(let l of this.parts(st)){let i=l.getAttribute("value");i!==null&&s.set(i,l)}let c=this.parts(Q).flatMap(l=>{let i=ft(l);return i?[{trigger:l,...i}]:[]}),a=B({values:c.map(l=>l.value),active:o});this.controller.setTriggers(c.map(({trigger:l,tab:i,value:d})=>({value:d,element:i,disabled:l.hasAttribute("disabled")})));for(let{trigger:l,tab:i,value:d}of c){let u=s.get(d),Y=d===o,Z=l.hasAttribute("disabled");i.id||(i.id=h(r,"trigger",d)),u&&!u.id&&(u.id=h(r,"panel",d)),n(i,"role","tab"),n(i,"aria-selected",String(Y)),n(i,"aria-controls",u?u.id:null),n(i,"tabindex",d===a?"0":"-1"),n(i,"aria-disabled",Z?"true":null),n(i,"data-disabled",Z?"":null),n(i,"data-state",Y?"active":"inactive"),n(i,"data-orientation",t),u&&n(u,"aria-labelledby",i.id)}for(let[l,i]of s){let d=l===o;n(i,"role","tabpanel"),n(i,"tabindex","0"),n(i,"hidden",d?null:""),n(i,"data-state",d?"active":"inactive"),n(i,"data-orientation",t)}let p=s.get(o);this.#e&&o!==this.#t&&p&&p.dispatchEvent(new CustomEvent("primitiv-tabs-show",{bubbles:!0})),this.#t=o,this.#e=!0}},$=class extends g{},G=class extends g{},z=class extends g{};function X(e=globalThis.customElements){v(e,[[ht,P],[rt,$],[Q,G],[st,z]])}j();J();X();export{x as AccordionController,E as CollapsibleController,L as PrimitivAccordionContentElement,M as PrimitivAccordionElement,H as PrimitivAccordionItemElement,K as PrimitivAccordionTriggerElement,S as PrimitivAccordionTriggerIconElement,N as PrimitivCollapsibleContentElement,I as PrimitivCollapsibleElement,k as PrimitivCollapsibleTriggerElement,D as PrimitivCollapsibleTriggerIconElement,z as PrimitivTabsContentElement,P as PrimitivTabsElement,$ as PrimitivTabsListElement,G as PrimitivTabsTriggerElement,A as TabsController,j as defineAccordion,J as defineCollapsible,X as defineTabs};

package/dist/tags.d.ts

@@ -13,6 +13,7 @@
  * JSR does not allow a published module to do (RFC 0033 §5.6.4).
  */
 import type { PrimitivAccordionContentElement, PrimitivAccordionElement, PrimitivAccordionItemElement, PrimitivAccordionTriggerElement, PrimitivAccordionTriggerIconElement } from "./accordion/elements.js";
+import type { PrimitivCollapsibleContentElement, PrimitivCollapsibleElement, PrimitivCollapsibleTriggerElement, PrimitivCollapsibleTriggerIconElement } from "./collapsible/elements.js";
 import type { PrimitivTabsContentElement, PrimitivTabsElement, PrimitivTabsListElement, PrimitivTabsTriggerElement } from "./tabs/elements.js";
 declare global {
     interface HTMLElementTagNameMap {
@@ -21,6 +22,10 @@ declare global {
         "primitiv-accordion-trigger": PrimitivAccordionTriggerElement;
         "primitiv-accordion-content": PrimitivAccordionContentElement;
         "primitiv-accordion-trigger-icon": PrimitivAccordionTriggerIconElement;
+        "primitiv-collapsible": PrimitivCollapsibleElement;
+        "primitiv-collapsible-trigger": PrimitivCollapsibleTriggerElement;
+        "primitiv-collapsible-content": PrimitivCollapsibleContentElement;
+        "primitiv-collapsible-trigger-icon": PrimitivCollapsibleTriggerIconElement;
         "primitiv-tabs": PrimitivTabsElement;
         "primitiv-tabs-list": PrimitivTabsListElement;
         "primitiv-tabs-trigger": PrimitivTabsTriggerElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primitiv-ui/web",
-  "version": "0.1.46",
+  "version": "0.1.47",
   "description": "Primitiv's headless components as standard custom elements: light DOM, no framework, no runtime dependencies. Works in plain HTML, server-rendered stacks, React, Vue, Angular and anything else that renders HTML.",
   "type": "module",
   "main": "./dist/index.js",
@@ -14,6 +14,10 @@
       "types": "./dist/accordion/index.d.ts",
       "default": "./dist/accordion/index.js"
     },
+    "./collapsible": {
+      "types": "./dist/collapsible/index.d.ts",
+      "default": "./dist/collapsible/index.js"
+    },
     "./tabs": {
       "types": "./dist/tabs/index.d.ts",
       "default": "./dist/tabs/index.js"
@@ -26,6 +30,10 @@
       "types": "./dist/define/accordion.d.ts",
       "default": "./dist/define/accordion.js"
     },
+    "./define/collapsible": {
+      "types": "./dist/define/collapsible.d.ts",
+      "default": "./dist/define/collapsible.js"
+    },
     "./define/tabs": {
       "types": "./dist/define/tabs.d.ts",
       "default": "./dist/define/tabs.js"
@@ -60,7 +68,7 @@
     "directory": "packages/web"
   },
   "dependencies": {
-    "@primitiv-ui/core": "0.1.46"
+    "@primitiv-ui/core": "0.1.47"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.11.0",

package/dist/cdn/chunks/chunk-FKLOMAT4.js

@@ -1 +0,0 @@
-function b(e,t,r){return`${e}-${t}-${r}`}function s({orientation:e,dir:t,homeEnd:r=!1,activate:n=!1}){let o={};if(e==="horizontal"||e==="both"){let i=t==="rtl"?"ArrowLeft":"ArrowRight",a=t==="rtl"?"ArrowRight":"ArrowLeft";o[i]="next",o[a]="prev"}return(e==="vertical"||e==="both")&&(o.ArrowDown="next",o.ArrowUp="prev"),r&&(o.Home="first",o.End="last"),n&&(o.Enter="activate",o[" "]="activate"),o}function c({action:e,navigable:t,currentKey:r}){let n=t.length;if(n===0)return null;switch(e){case"activate":return{target:r};case"first":return{target:t[0]};case"last":return{target:t[n-1]};case void 0:return null;case"next":case"prev":{let o=t.indexOf(r);if(o===-1)return null;let i=e==="next"?1:n-1;return{target:t[(o+i)%n]}}}}function y(e){return e.active??e.values[0]}function l(e,t){return e.disabled.has(t)||e.active===t?null:t}function f(e,t,r){let n=s({orientation:e.orientation,dir:e.dir,homeEnd:!0,activate:!0})[r],o=c({action:n,navigable:e.values,currentKey:t});if(!o)return null;let i=o.target,a=e.activationMode==="automatic"||n==="activate";return{focus:i,activate:a?l(e,i):null}}function m(e,t){return e.disabled.has(t)?null:e.expanded.includes(t)?e.expanded.filter(r=>r!==t):e.multiple?[...e.expanded,t]:[t]}function T(e,t,r){let n=s({orientation:e.orientation,dir:e.dir,homeEnd:!0,activate:!0})[r];if(n==="activate")return e.disabled.has(t)?null:{focus:null,toggle:t};let o=e.values.filter(a=>!e.disabled.has(a)),i=c({action:n,navigable:o,currentKey:t});return i&&{focus:i.target,toggle:null}}var g=globalThis.HTMLElement??class{};function D(e,t,r){e.getAttribute(t)!==r&&(r===null?e.removeAttribute(t):e.setAttribute(t,r))}var d=new WeakSet;function I(e,t){d.has(e)||(d.add(e),console.error(t,e))}function N(e,t){if(e)for(let[r,n]of t)e.get(r)||e.define(r,n)}function u(e,t,r){return[...e.querySelectorAll(t)].filter(n=>n.closest(r)===e)}var h=0,p=class extends g{#e;#t=new MutationObserver(()=>this.reconcile());connectedCallback(){this.controller.connect(),this.#t.observe(this,{subtree:!0,childList:!0,attributes:!0,attributeFilter:[...this.reconcileOn]}),this.reconcile()}disconnectedCallback(){this.controller.disconnect(),this.#t.disconnect()}rootId(){return this.id||(this.#e??=`${this.localName}-${++h}`)}direction(){return this.matches(":dir(rtl)")?"rtl":"ltr"}parts(t){return u(this,t,this.localName)}announce(t,r){return this.dispatchEvent(new CustomEvent(t,{bubbles:!0,cancelable:!0,detail:r}))}};var v=class{#e;#t=new Map;#r=null;constructor(t){this.#e=t}registerTrigger(t,r,n={}){this.#t.set(r,{value:t,disabled:n.disabled??!1})}setTriggers(t){this.#t.clear();for(let{value:r,element:n,disabled:o}of t)this.registerTrigger(r,n,{disabled:o})}unregisterTrigger(t){this.#t.delete(t)}connect(){if(this.#r)return;this.#r=new AbortController;let{signal:t}=this.#r;this.#e.addEventListener("click",r=>this.#n(r,this.onTriggerClick),{signal:t}),this.#e.addEventListener("keydown",r=>this.#n(r,this.onTriggerKeydown),{signal:t})}disconnect(){this.#r?.abort(),this.#r=null}ordered(){return[...this.#t].sort(([t],[r])=>t.compareDocumentPosition(r)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1)}disabled(){let t=new Set;for(let r of this.#t.values())r.disabled&&t.add(r.value);return t}#n(t,r){for(let[n,o]of this.#t)if(n.contains(t.target))return r.call(this,o,t)}};export{b as a,y as b,l as c,f as d,m as e,T as f,g,D as h,I as i,N as j,u as k,p as l,v as m};