@primitiv-ui/web 0.1.52 → 0.1.54

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, Accordion and Collapsible so far. See
+> **Status: published.** Tabs, Accordion, Collapsible and Modal so far. See
 > [RFC 0033](../../docs/rfcs/0033-web-components.md) for the design.
 
 ## Components
@@ -16,6 +16,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 |
+| Modal | `primitiv-modal`, `-trigger`, `-content`, `-title`, `-description`, `-close` | `primitiv-modal-change` | 0.1.54 |
 
 ## Use it
 
@@ -47,9 +48,10 @@ 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`, `/collapsible`)
-exports the classes and `defineTabs(registry?)` / `defineAccordion(registry?)` /
-`defineCollapsible(registry?)` with **no side effects**.
+The main entry (`@primitiv-ui/web`, `/tabs`, `/accordion`, `/collapsible`,
+`/modal`) exports the classes and `defineTabs(registry?)` /
+`defineAccordion(registry?)` / `defineCollapsible(registry?)` /
+`defineModal(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.
@@ -118,6 +120,40 @@ on a panel as it becomes active, for lazy loading.
   open }`) and `primitiv-collapsible-show` on the panel as it opens. Render
   `hidden` on a closed panel yourself, as for Tabs.
 
+### Modal
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@primitiv-ui/web@<version>/dist/cdn/modal.js"></script>
+
+<primitiv-modal>
+  <primitiv-modal-trigger><button type="button">Edit profile</button></primitiv-modal-trigger>
+  <primitiv-modal-content>
+    <dialog>
+      <primitiv-modal-title><h2>Edit profile</h2></primitiv-modal-title>
+      <primitiv-modal-description><p>Changes apply to every workspace.</p></primitiv-modal-description>
+      <primitiv-modal-close><button type="button">Done</button></primitiv-modal-close>
+    </dialog>
+  </primitiv-modal-content>
+</primitiv-modal>
+```
+
+- **It is a native `<dialog>`, opened with `showModal()`**: the browser supplies
+  the top layer, the `::backdrop` and the inert page. The element adds the
+  Tab wrap, closing on Escape and on a backdrop press, and the ARIA wiring —
+  `aria-haspopup`, `aria-expanded` and `aria-controls` on the trigger's button,
+  `aria-labelledby` / `aria-describedby` from the title's heading and the
+  description's paragraph. Focus returns to the trigger on close.
+- **`open` on the root is the state**, reflected as the user opens and dismisses
+  it; the `open` property reads and sets it, and setting it is not announced.
+  Leave `open` off the `<dialog>` itself — the root opens it modally, and
+  reopens modally one that arrives with it (a history snapshot).
+- **Several triggers and close buttons** are fine. There is no overlay element:
+  style `::backdrop`.
+- **Listen with `primitiv-modal-change`** (bubbles, cancelable, `detail: { open
+  }`), fired before every user-driven change — trigger, close, Escape, a backdrop
+  press, a `<form method="dialog">` — so `preventDefault()` keeps a dirty form
+  open.
+
 **TypeScript** — opt into the tag map so DOM queries return the element classes:
 `import type {} from "@primitiv-ui/web/tags"` (npm only).
 

package/dist/cdn/accordion.js

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

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

@@ -0,0 +1 @@
+var n=class{#r;#e=new Map;#t=null;constructor(e){this.#r=e}registerTrigger(e,t,r={}){this.#e.set(t,{value:e,disabled:r.disabled??!1})}setTriggers(e){this.#e.clear();for(let{value:t,element:r,disabled:i}of e)this.registerTrigger(t,r,{disabled:i})}unregisterTrigger(e){this.#e.delete(e)}connect(){if(this.#t)return;this.#t=new AbortController;let{signal:e}=this.#t;this.#r.addEventListener("click",t=>this.#i(t,this.onTriggerClick),{signal:e}),this.#r.addEventListener("keydown",t=>this.#i(t,this.onTriggerKeydown),{signal:e})}disconnect(){this.#t?.abort(),this.#t=null}ordered(){return[...this.#e].sort(([e],[t])=>e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1)}disabled(){let e=new Set;for(let t of this.#e.values())t.disabled&&e.add(t.value);return e}#i(e,t){for(let[r,i]of this.#e)if(r.contains(e.target))return t.call(this,i,e)}};export{n as a};

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

@@ -0,0 +1 @@
+function c(r,e,n){return`${r}-${e}-${n}`}function l({orientation:r,dir:e,homeEnd:n=!1,activate:o=!1}){let t={};if(r==="horizontal"||r==="both"){let i=e==="rtl"?"ArrowLeft":"ArrowRight",a=e==="rtl"?"ArrowRight":"ArrowLeft";t[i]="next",t[a]="prev"}return(r==="vertical"||r==="both")&&(t.ArrowDown="next",t.ArrowUp="prev"),n&&(t.Home="first",t.End="last"),o&&(t.Enter="activate",t[" "]="activate"),t}function g({action:r,navigable:e,currentKey:n}){let o=e.length;if(o===0)return null;switch(r){case"activate":return{target:n};case"first":return{target:e[0]};case"last":return{target:e[o-1]};case void 0:return null;case"next":case"prev":{let t=e.indexOf(n);if(t===-1)return null;let i=r==="next"?1:o-1;return{target:e[(t+i)%o]}}}}export{c as a,l as b,g as c};

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

@@ -0,0 +1 @@
+var i=globalThis.HTMLElement??class{};function d(e,t,n){e.getAttribute(t)!==n&&(n===null?e.removeAttribute(t):e.setAttribute(t,n))}var o=new WeakSet;function a(e,t){o.has(e)||(o.add(e),console.error(t,e))}function u(e,t){if(e)for(let[n,r]of t)e.get(n)||e.define(n,r)}function s(e,t,n){return[...e.querySelectorAll(t)].filter(r=>r.closest(n)===e)}var l=0,c=class extends i{#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}-${++l}`)}direction(){return this.matches(":dir(rtl)")?"rtl":"ltr"}parts(t){return s(this,t,this.localName)}announce(t,n){return this.dispatchEvent(new CustomEvent(t,{bubbles:!0,cancelable:!0,detail:n}))}};export{i as a,d as b,a as c,u as d,s as e,c as f};

package/dist/cdn/collapsible.js

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

package/dist/cdn/modal.js

@@ -0,0 +1 @@
+import{a as l,b as i,c as h,d as L,f as M}from"./chunks/chunk-QVNDDONZ.js";var C=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(",");function H({key:n,shiftKey:t,active:e,count:o}){if(n!=="Tab")return null;if(o===0)return{focus:null};let r=o-1;return!t&&e===r?{focus:0}:t&&e===0?{focus:r}:null}function O(n,t){return t.x<n.left||t.x>n.right||t.y<n.top||t.y>n.bottom}var d=class{#e;#t;#n=null;constructor(t,e){this.#e=t,this.#t=e}connect(){if(this.#n)return;this.#n=new AbortController;let{signal:t}=this.#n,e=this.#e;e.addEventListener("close",()=>this.#t.change(!1),{signal:t}),e.addEventListener("cancel",o=>this.#i(o),{signal:t}),e.addEventListener("pointerdown",o=>this.#o(o),{signal:t}),e.addEventListener("keydown",o=>this.#s(o),{signal:t})}disconnect(){this.#n?.abort(),this.#n=null}sync(){let{open:t}=this.#t.state();t&&!this.#e.open?this.#e.showModal():!t&&this.#e.open&&this.#e.close()}#i(t){this.#t.escapeKeyDown?.(t);let e=t.defaultPrevented;t.preventDefault(),e||this.#t.change(!1)}#o(t){let e={x:t.clientX,y:t.clientY};O(this.#e.getBoundingClientRect(),e)&&(this.#t.pointerDownOutside?.(t),t.defaultPrevented||this.#t.change(!1))}#s(t){if(!this.#e.open)return;let e=[...this.#e.querySelectorAll(C)],o=H({key:t.key,shiftKey:t.shiftKey,active:e.indexOf(document.activeElement),count:e.length});o&&(t.preventDefault(),o.focus!==null&&e[o.focus].focus())}};var k="primitiv-modal",w="primitiv-modal-trigger",v="primitiv-modal-content",D="primitiv-modal-title",R="primitiv-modal-description",A="primitiv-modal-close";function p(n,t){return n.childElementCount===1?n.firstElementChild:(h(n,`<${n.localName}> needs exactly one element child (${t}) to decorate.`),null)}function K(n){let t=n.firstElementChild;return n.childElementCount===1&&t instanceof HTMLDialogElement?t:(h(n,`<${v}> needs exactly one <dialog> child to decorate.`),null)}var f=class extends M{#e=null;#t=null;#n=[];#i=[];#o=null;controller={connect:()=>this.#a(),disconnect:()=>this.#c()};reconcileOn=["open"];get open(){return this.hasAttribute("open")}set open(t){this.toggleAttribute("open",t)}#s(){return{state:()=>({open:this.open}),change:t=>this.#l(t)}}#l(t){t!==this.open&&(this.announce("primitiv-modal-change",{open:t})?this.open=t:this.#t?.sync())}#a(){this.#o=new AbortController,this.addEventListener("click",t=>this.#d(t),{signal:this.#o.signal}),this.#t?.connect()}#c(){this.#o.abort(),this.#o=null,this.#t?.disconnect(),this.#e&&i(this.#e,"open",null)}#d(t){let e=t.target;this.#n.some(o=>o.contains(e))?this.#l(!0):this.#i.some(o=>o.contains(e))&&this.#l(!1)}#u(t){t!==this.#e&&(this.#t?.disconnect(),t&&i(t,"open",null),this.#e=t,this.#t=t?new d(t,this.#s()):null,this.#t?.connect())}reconcile(){let t=this.open,e=t?"open":"closed",o=this.rootId();i(this,"data-state",e);let[r]=this.parts(v),s=r?K(r):null,[x]=this.parts(D),a=x?p(x,"a heading"):null,[T]=this.parts(R),c=T?p(T,"a <p>"):null;a&&!a.id&&(a.id=`${o}-title`),c&&!c.id&&(c.id=`${o}-description`),s&&(s.id||(s.id=`${o}-content`),i(s,"data-state",e),i(s,"aria-labelledby",a?a.id:null),i(s,"aria-describedby",c?c.id:null)),this.#n=this.#r(w);for(let u of this.#n)i(u,"aria-haspopup","dialog"),i(u,"aria-expanded",String(t)),i(u,"aria-controls",s?s.id:null);this.#i=this.#r(A),this.#u(s),this.#t?.sync()}#r(t){return this.parts(t).flatMap(e=>p(e,"a <button>")??[])}},m=class extends l{},b=class extends l{},E=class extends l{},g=class extends l{},y=class extends l{};function S(n=globalThis.customElements){L(n,[[k,f],[w,m],[v,b],[D,E],[R,g],[A,y]])}S();

package/dist/cdn/tabs.js

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

package/dist/custom-elements.json

@@ -516,6 +516,376 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/modal/elements.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`<primitiv-modal>` — the state owner of a modal dialog, built on the native\n`<dialog>` and its `showModal()`: the browser makes the page behind it inert,\npaints the `::backdrop` and owns the top layer, and the element adds the\nrest of the WAI-ARIA Modal Dialog pattern — Tab wraps inside the dialog,\nEscape and a press on the backdrop close it, and closing hands focus back to\nthe button that opened it.\n\nThe root finds its own parts, so a modal nested in a dialog keeps its own,\nand reconciles their ARIA from its reflected state whenever a part arrives,\nleaves, or changes an attribute the root reads (the lifecycle is\n`PrimitivRootElement`'s). Leave `open` off the `<dialog>` itself: the root\nopens it, modally.",
+          "name": "PrimitivModalElement",
+          "members": [
+            {
+              "kind": "field",
+              "name": "#dialog",
+              "privacy": "private",
+              "type": {
+                "text": "HTMLDialogElement | null"
+              },
+              "default": "null",
+              "description": "The dialog the root currently decorates, and the controller over it."
+            },
+            {
+              "kind": "field",
+              "name": "#modal",
+              "privacy": "private",
+              "type": {
+                "text": "ModalController | null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "#openers",
+              "privacy": "private",
+              "type": {
+                "text": "HTMLElement[]"
+              },
+              "default": "[]",
+              "description": "The decorated trigger and close buttons, as of the last reconcile."
+            },
+            {
+              "kind": "field",
+              "name": "#closers",
+              "privacy": "private",
+              "type": {
+                "text": "HTMLElement[]"
+              },
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "#listening",
+              "privacy": "private",
+              "type": {
+                "text": "AbortController | null"
+              },
+              "default": "null",
+              "description": "The root's own click listener, while connected."
+            },
+            {
+              "kind": "field",
+              "name": "controller",
+              "type": {
+                "text": "{ connect(): void; disconnect(): void }"
+              },
+              "privacy": "protected",
+              "readonly": true,
+              "default": "{ connect: (): void => this.#connect(), disconnect: (): void => this.#disconnect(), }"
+            },
+            {
+              "kind": "field",
+              "name": "reconcileOn",
+              "type": {
+                "text": "readonly string[]"
+              },
+              "privacy": "protected",
+              "readonly": true,
+              "default": "[\"open\"]"
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the dialog is open, reflected as the boolean `open` attribute."
+            },
+            {
+              "kind": "method",
+              "name": "#host",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "ModalControllerHost"
+                }
+              },
+              "description": "The controller's view of this element: state lives in the reflected attribute."
+            },
+            {
+              "kind": "method",
+              "name": "#change",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "open",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "A change the user asked for: announced first, so a listener can veto it."
+            },
+            {
+              "kind": "method",
+              "name": "#connect",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#disconnect",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#click",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#use",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "dialog",
+                  "type": {
+                    "text": "HTMLDialogElement | null"
+                  }
+                }
+              ],
+              "description": "Decorate `dialog` from now on: the controller follows it. Only a reconcile\ncalls this, and a root reconciles only while connected, so the new\ncontroller listens at once."
+            },
+            {
+              "kind": "method",
+              "name": "reconcile",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#buttons",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLElement[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "selector",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "The buttons this root's `selector` parts decorate."
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent<{ open: boolean }>"
+              },
+              "description": "Bubbles, cancelable, fired before a user-driven change is applied — a trigger or close click, Escape, a press on the backdrop, or the dialog closing natively — with the open state afterwards. Call `preventDefault()` to veto it, e.g. to keep a form with unsaved changes open.",
+              "name": "primitiv-modal-change"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the dialog is open. Reflected: it changes as the user opens and dismisses the dialog, so a server re-render or a history snapshot sees the live state. Set it (or the `open` property) to open or close the dialog from script.",
+              "name": "open"
+            }
+          ],
+          "superclass": {
+            "name": "PrimitivRootElement",
+            "module": "/src/internal/RootElement.ts"
+          },
+          "tagName": "primitiv-modal",
+          "customElement": true,
+          "summary": "The state owner of a modal dialog on the native `<dialog>`."
+        },
+        {
+          "kind": "class",
+          "description": "`<primitiv-modal-trigger>` — an interactive part. It decorates exactly one\nchild the consumer writes, a `<button>`, which opens the dialog and receives\n`aria-haspopup=\"dialog\"`, `aria-expanded` and `aria-controls`, so the\nrendered DOM matches React's (RFC 0033 D24). A modal may have several.",
+          "name": "PrimitivModalTriggerElement",
+          "superclass": {
+            "name": "ElementBase",
+            "module": "/src/internal/element.ts"
+          },
+          "tagName": "primitiv-modal-trigger",
+          "customElement": true
+        },
+        {
+          "kind": "class",
+          "description": "`<primitiv-modal-content>` — decorates exactly one native `<dialog>` the\nconsumer writes, which the root opens with `showModal()`, closes, and gives\nan id, `data-state`, and `aria-labelledby` / `aria-describedby` pointing at\nthe title and description. The dialog keeps its implicit `dialog` role.",
+          "name": "PrimitivModalContentElement",
+          "superclass": {
+            "name": "ElementBase",
+            "module": "/src/internal/element.ts"
+          },
+          "tagName": "primitiv-modal-content",
+          "customElement": true
+        },
+        {
+          "kind": "class",
+          "description": "`<primitiv-modal-title>` — decorates exactly one heading the consumer writes\n(an `<h2>`, usually), whose id becomes the dialog's `aria-labelledby`, so it\nis the name a screen reader announces as the dialog opens.",
+          "name": "PrimitivModalTitleElement",
+          "superclass": {
+            "name": "ElementBase",
+            "module": "/src/internal/element.ts"
+          },
+          "tagName": "primitiv-modal-title",
+          "customElement": true
+        },
+        {
+          "kind": "class",
+          "description": "`<primitiv-modal-description>` — decorates exactly one element the consumer\nwrites (a `<p>`, usually), whose id becomes the dialog's `aria-describedby`.",
+          "name": "PrimitivModalDescriptionElement",
+          "superclass": {
+            "name": "ElementBase",
+            "module": "/src/internal/element.ts"
+          },
+          "tagName": "primitiv-modal-description",
+          "customElement": true
+        },
+        {
+          "kind": "class",
+          "description": "`<primitiv-modal-close>` — an interactive part. It decorates exactly one\n`<button>` the consumer writes, which closes the dialog. A modal may have\nseveral: the header's icon button and the footer's Cancel.",
+          "name": "PrimitivModalCloseElement",
+          "superclass": {
+            "name": "ElementBase",
+            "module": "/src/internal/element.ts"
+          },
+          "tagName": "primitiv-modal-close",
+          "customElement": true
+        },
+        {
+          "kind": "function",
+          "name": "defineModal",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "registry",
+              "default": "globalThis.customElements",
+              "type": {
+                "text": "ElementRegistry | undefined"
+              }
+            }
+          ],
+          "description": "Define the six Modal elements on `registry` (the global `customElements` by\ndefault). Safe to call more than once, and a no-op where there is no\nregistry (a server render)."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ElementRegistry",
+          "declaration": {
+            "name": "ElementRegistry",
+            "module": "src/modal/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimitivModalElement",
+          "declaration": {
+            "name": "PrimitivModalElement",
+            "module": "src/modal/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimitivModalTriggerElement",
+          "declaration": {
+            "name": "PrimitivModalTriggerElement",
+            "module": "src/modal/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimitivModalContentElement",
+          "declaration": {
+            "name": "PrimitivModalContentElement",
+            "module": "src/modal/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimitivModalTitleElement",
+          "declaration": {
+            "name": "PrimitivModalTitleElement",
+            "module": "src/modal/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimitivModalDescriptionElement",
+          "declaration": {
+            "name": "PrimitivModalDescriptionElement",
+            "module": "src/modal/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimitivModalCloseElement",
+          "declaration": {
+            "name": "PrimitivModalCloseElement",
+            "module": "src/modal/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "defineModal",
+          "declaration": {
+            "name": "defineModal",
+            "module": "src/modal/elements.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/tabs/elements.ts",

package/dist/define/index.d.ts

@@ -4,4 +4,5 @@
  */
 import "./accordion.js";
 import "./collapsible.js";
+import "./modal.js";
 import "./tabs.js";

package/dist/define/index.js

@@ -4,4 +4,5 @@
  */
 import "./accordion.js";
 import "./collapsible.js";
+import "./modal.js";
 import "./tabs.js";

package/dist/define/modal.d.ts

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

package/dist/define/modal.js

@@ -0,0 +1,11 @@
+/**
+ * Side-effect entry: importing this module defines the six Modal elements
+ * (`<primitiv-modal>`, `-trigger`, `-content`, `-title`, `-description`,
+ * `-close`) on the global `customElements` registry.
+ *
+ * ```html
+ * <script type="module">import "@primitiv-ui/web/define/modal";</script>
+ * ```
+ */
+import { defineModal } from "../modal/elements.js";
+defineModal();

package/dist/frameworks/events.d.ts

@@ -15,3 +15,7 @@ export type PrimitivAccordionChangeEvent = CustomEvent<{
 export type PrimitivCollapsibleChangeEvent = CustomEvent<{
     open: boolean;
 }>;
+/** The `primitiv-modal-change` event: bubbles, cancelable, fired before the change applies, with the open state afterwards. */
+export type PrimitivModalChangeEvent = CustomEvent<{
+    open: boolean;
+}>;

package/dist/frameworks/react.d.ts

@@ -20,13 +20,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 { PrimitivModalCloseElement, PrimitivModalContentElement, PrimitivModalDescriptionElement, PrimitivModalElement, PrimitivModalTitleElement, PrimitivModalTriggerElement } from "../modal/elements.js";
 import type { PrimitivTabsContentElement, PrimitivTabsElement, PrimitivTabsListElement, PrimitivTabsTriggerElement } from "../tabs/elements.js";
-import type { PrimitivAccordionChangeEvent, PrimitivCollapsibleChangeEvent, PrimitivTabsChangeEvent } from "./events.js";
+import type { PrimitivAccordionChangeEvent, PrimitivCollapsibleChangeEvent, PrimitivModalChangeEvent, 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, PrimitivCollapsibleChangeEvent, PrimitivTabsChangeEvent };
+export type { PrimitivAccordionChangeEvent, PrimitivCollapsibleChangeEvent, PrimitivModalChangeEvent, PrimitivTabsChangeEvent, };
 declare module "react" {
     namespace JSX {
         interface IntrinsicElements {
@@ -59,6 +60,15 @@ declare module "react" {
                 "onprimitiv-collapsible-show"?: (event: CustomEvent) => void;
             };
             "primitiv-collapsible-trigger-icon": ElementProps<PrimitivCollapsibleTriggerIconElement>;
+            "primitiv-modal": ElementProps<PrimitivModalElement> & {
+                open?: boolean;
+                "onprimitiv-modal-change"?: (event: PrimitivModalChangeEvent) => void;
+            };
+            "primitiv-modal-trigger": ElementProps<PrimitivModalTriggerElement>;
+            "primitiv-modal-content": ElementProps<PrimitivModalContentElement>;
+            "primitiv-modal-title": ElementProps<PrimitivModalTitleElement>;
+            "primitiv-modal-description": ElementProps<PrimitivModalDescriptionElement>;
+            "primitiv-modal-close": ElementProps<PrimitivModalCloseElement>;
             "primitiv-tabs": ElementProps<PrimitivTabsElement> & {
                 value?: string;
                 orientation?: "horizontal" | "vertical";