monochrome 0.9.0 → 0.10.0

package/README.md

@@ -11,7 +11,7 @@ If you write accessible HTML, monochrome makes it interactive. The DOM is the st
 
 ## Components
 
-Accordion · Collapsible · Menu · Popover · Tabs · Tooltip.
+Accordion · Collapsible · Dialog · Menu · Popover · Tabs · Tooltip.
 
 Plus an optional client-side router and thin React and Vue wrappers.
 
@@ -52,7 +52,8 @@ The React and Vue wrappers generate the same HTML and ARIA; all interactivity co
 
 ## Browser support
 
-Baseline 2024. Uses the Popover API. No polyfills shipped.
+Baseline 2024. Uses the Popover API and the native `<dialog>`
+element. No polyfills shipped.
 
 ## Contributing
 

package/dist/index.js

@@ -1 +1 @@
-if(typeof document<"u"){let b=null,w=null,A=null,N=null,R=[],r=[],d=null,s=null,C=null,F=null,h=null,o=null,y=null,p=null,m=null,P=null,f=(e)=>e instanceof HTMLElement,E=(e,n)=>e instanceof HTMLButtonElement&&(!n||e.id.startsWith(n)),D=(e)=>f(e)&&e.role?.startsWith("menuitem")===!0&&e.ariaDisabled!=="true",T=(e,n)=>{let t=e.getAttribute(n);return t?document.getElementById(t):null},L=(e,n)=>{while(e){if(e.id.startsWith(n))return e;e=e.parentElement}return null},$=(e,n)=>{let t=e.getBoundingClientRect();return n.style.setProperty("--top",`${t.top}px`),n.style.setProperty("--right",`${t.right}px`),n.style.setProperty("--bottom",`${t.bottom}px`),n.style.setProperty("--left",`${t.left}px`),n.style.setProperty("--pw",`${n.offsetWidth}px`),n.style.setProperty("--ph",`${n.offsetHeight}px`),t},S=(e)=>{let n=(i)=>i?e(i.nextElementSibling||i.parentElement?.firstElementChild,n):null,t=(i)=>i?e(i.previousElementSibling||i.parentElement?.lastElementChild,t):null;return[n,t]},k=(e,n)=>{if(f(e)){let t=e.firstElementChild;if(A){if(f(t)){if(t===A){for(let i of R)i.ariaChecked="false";return t}if(t.role==="menuitemradio"){if(!N)t.ariaChecked="false";else R.push(t);return n(e)}}return N=!0,R=[],n(e)}if(D(t)&&(!w||t.textContent?.toLowerCase().startsWith(w)))return t.focus(),b=!0,t;else if(d!==e){if(!d)d=e;return n(e)}else d=null}return null},O=(e,n)=>{if(f(e)){if(d===e)return null;if(!d)d=e;let t=e.firstElementChild?.firstElementChild;if(E(t,"mct:a")){if(t.ariaDisabled==="true")return n(e);return b=!0,t.focus(),t}}return n(e)},B=(e,n)=>{if(E(e,"mct:ta")){if(d===e)return null;if(!d)d=e;if(e.ariaDisabled==="true")return n(e);return b=!0,e.focus(),e}else return n(e)},[H,v]=S(k),[X,Y]=S(O),[I,U]=S(B),W=(e)=>{let n=T(e,"aria-controls");if(n){let t=e.ariaExpanded!=="true";e.ariaExpanded=t?"true":"false",n.ariaHidden=t?"false":"true",t?n.removeAttribute("hidden"):n.setAttribute("hidden","")}},G=(e)=>{if(e.ariaDisabled==="true")return;if(e.ariaExpanded==="true")W(e);else{let n=L(e,"mcr:a");if(!n||n.getAttribute("data-mode")!=="single")W(e);else{let t=n.firstElementChild;while(t){let i=t.firstElementChild?.firstElementChild;if(f(i)&&(i===e||i.ariaExpanded==="true"))W(i);t=t.nextElementSibling}}}},K=(e)=>{if(e.ariaDisabled!=="true"&&e.ariaSelected!=="true"){let n=e.parentElement?.firstElementChild;while(f(n)){if(n===e||n.ariaSelected==="true"){let t=T(n,"aria-controls");if(t){let i=n.ariaSelected!=="true";if(n.ariaSelected=i?"true":"false",n.tabIndex=i?0:-1,t.ariaHidden=i?"false":"true",t.hasAttribute("tabindex"))t.tabIndex=i?0:-1;i?t.removeAttribute("hidden"):t.setAttribute("hidden","")}}n=n.nextElementSibling}}},c=(e,n=0)=>{if(e?.id.startsWith("mct:m")){let t=T(e,"aria-controls");if(t)if(e.ariaExpanded==="true"){if(s)s.removeAttribute("data-safe");if(s=null,F=null,h=null,n!==3)e.focus();t.hidePopover(),e.ariaExpanded="false",t.ariaHidden="true"}else{r.push(e),t.showPopover(),e.ariaExpanded="true",t.ariaHidden="false";let i=$(e,t),a=e.parentElement;if(a)s=a,C=i,F=t,h=null;if(n===0)e.focus();else if(n===1)k(t.firstElementChild,H);else if(n===2)k(t.lastElementChild,v)}}},g=(e=0)=>{while(r[e])c(r.pop(),3)},Z=(e)=>{if(e.role==="menuitemcheckbox")e.ariaChecked=e.ariaChecked==="true"?"false":"true";else if(e.role==="menuitemradio")A=e,N=null,R=[],H(e.parentElement),A=null,e.ariaChecked="true";else g()},x=(e,n)=>{if(e.ariaExpanded==="true"===n)return;let t=T(e,"aria-controls");if(t){if(n){if(o&&o!==e)x(o,!1);t.showPopover(),e.ariaExpanded="true",t.ariaHidden="false",$(e,t),o=e}else if(t.hidePopover(),e.ariaExpanded="false",t.ariaHidden="true",o===e)o=null}},z=(e,n)=>{let t=T(e,"aria-describedby");if(t)if(n)t.showPopover(),$(e,t);else t.hidePopover()},M=()=>{if(P&&P!==y&&P!==p)P=null;let e=y??p,n=e&&e!==P?e:null;if(n!==m){if(m)z(m,!1);if(n)z(n,!0);m=n}};addEventListener("click",(e)=>{b=null;let n=e.detail===0,t=f(e.target)?e.target:e.target instanceof Element?e.target.parentElement:null;if(t){let i=t;while(i){let a=i.id;if(a.startsWith("mct:")){if(a.startsWith("mct:m")){if(o)x(o,!1);let l=n?1:3;if(L(i.parentElement,"mcc:m")){if(!r.includes(i))c(i,l)}else if(r[0]){let j=i!==r[0];if(g(),j)c(i,l)}else c(i,l)}else{if(r[0])g();if(a.startsWith("mct:a"))G(i);else if(a.startsWith("mct:c"))W(i);else if(a.startsWith("mct:ta"))K(i);else if(a.startsWith("mct:p")&&i.ariaDisabled!=="true"){let l=i.ariaExpanded==="true";x(i,!l),l?i.focus():T(i,"aria-controls")?.focus()}else if(a.startsWith("mct:to")&&m)P=m,M()}break}else if(a.startsWith("mcc:m")&&r[0]){let l=t;while(l&&l!==i){if(D(l)&&!E(l,"mct:m")){Z(l);break}l=l.parentElement}break}else if(a.startsWith("mcc:p"))break;else if(a.startsWith("mcc:to"))break;i=i.parentElement}if(!i){if(r[0])g();if(o)x(o,!1)}}if(b)e.preventDefault()}),addEventListener("pointermove",(e)=>{if(e.pointerType==="touch")return;if(f(e.target)&&!L(e.target,"mcc:to")){let n=L(e.target,"mct:to");if(n!==y)y=n,M()}if(r[0]){if(r[1]&&s&&C&&F){if(e.clientX>=C.left&&e.clientX<=C.right&&e.clientY>=C.top&&e.clientY<=C.bottom){if(h=F.getBoundingClientRect(),s.style.setProperty("--left",`${h.left}px`),s.style.setProperty("--right",`${h.right}px`),s.style.setProperty("--top",`${h.top}px`),s.style.setProperty("--bottom",`${h.bottom}px`),s.style.setProperty("--x",`${e.clientX}px`),s.style.setProperty("--y",`${e.clientY}px`),!s.hasAttribute("data-safe"))s.setAttribute("data-safe","")}else if(s.hasAttribute("data-safe")&&h&&(e.target!==s||(h.left-C.right)*e.movementX<0))s.removeAttribute("data-safe")}let n=e.target;if(f(n)){let t=[],i=n,a=!1,l=!1;while(i){if(D(i))l=!0;if(!l&&i.id.startsWith("mcc:")){a=!0;break}let u=i.firstElementChild;if(E(u,"mct:m"))t.unshift(u);i=i.parentElement}if(!a&&t[0]){let u=0;while(r[u]&&r[u]===t[u])u++;if(u===0&&(t[0].role!=="menuitem"||t[0].parentElement?.parentElement!==r[0].parentElement?.parentElement))return;g(u),c(t[u],3)}}}}),addEventListener("keydown",(e)=>{b=null,w=null,d=null;let n=e.target;if(E(n,"mct:a")){let t=n.parentElement?.parentElement;if(t)switch(e.key){case"ArrowDown":X(t);break;case"ArrowUp":Y(t);break;case"Home":{let i=t.parentElement;if(i)O(i.firstElementChild,X);break}case"End":{let i=t.parentElement;if(i)O(i.lastElementChild,Y);break}}}else if(E(n,"mct:ta")){let t=n.parentElement?.ariaOrientation==="vertical";switch(e.key){case"ArrowDown":if(t)I(n);break;case"ArrowUp":if(t)U(n);break;case"ArrowRight":if(!t)I(n);break;case"ArrowLeft":if(!t)U(n);break;case"Home":B(n.parentElement?.firstElementChild,I);break;case"End":B(n.parentElement?.lastElementChild,U);break}}else{if(E(n,"mct:m")){let t=L(n,"mcc:m")===null;switch(e.key){case"ArrowDown":if(t)if(n.ariaExpanded!=="true")c(n,1);else{let i=T(n,"aria-controls");if(i)k(i.firstElementChild,H)}break;case"ArrowUp":if(t)if(n.ariaExpanded!=="true")c(n,2);else{let i=T(n,"aria-controls");if(i)k(i.lastElementChild,v)}break;case"ArrowRight":if(!t)c(n,1);break}}if(!b&&f(n)&&n.role?.startsWith("menuitem")&&n.parentElement){let t=n.parentElement,i=r[0]?.parentElement||t,a=L(n.parentElement,"mcc:m");switch(e.key){case"Tab":if(r[0])r[0].focus();g();break;case"ArrowDown":if(a)H(t);break;case"ArrowUp":if(a)v(t);break;case"ArrowRight":{let l=H(i);if(l){let u=r[0];if(g(),u&&E(l,"mct:m"))c(l,3)}break}case"ArrowLeft":if(r[1])c(r.pop(),0);else{let l=v(i);if(l){let u=r[0];if(g(),u&&E(l,"mct:m"))c(l,3)}}break;case"Home":k(t.parentElement?.firstElementChild,H);break;case"End":k(t.parentElement?.lastElementChild,v);break;default:if(/^[a-zA-Z]$/.test(e.key))w=e.key.toLowerCase(),H(t);break}}}if(e.key==="Escape"){if(r[0])c(r.pop(),0);if(o){let t=o;x(t,!1),t.focus()}if(m)P=m,M()}if(b)e.preventDefault()}),addEventListener("scroll",(e)=>{if(r[0]&&(!f(e.target)||!e.target.id.startsWith("mcc:m")))g();if(o&&!(f(e.target)&&L(e.target,"mcc:p")))x(o,!1);if(m)y=null,p=null,M()},!0),addEventListener("resize",()=>{if(r[0])g();if(o)x(o,!1);if(m)y=null,p=null,M()}),addEventListener("focusin",(e)=>{let n=e.target;if(E(n,"mct:to")){if(p!==n)p=n,M()}else if(p)p=null,M()}),addEventListener("focusout",(e)=>{if(o&&f(e.relatedTarget)&&o!==e.relatedTarget&&!T(o,"aria-controls")?.contains(e.relatedTarget))x(o,!1);if(p&&e.target===p&&!e.relatedTarget)p=null,M()})}
+if(typeof document<"u"){let C=null,A=null,R=null,$=null,D=[],r=[],m=null,s=null,L=null,F=null,h=null,o=null,y=null,W=null,v=null,p=null,c=null,x=null,f=(e)=>e instanceof HTMLElement,E=(e,t)=>e instanceof HTMLButtonElement&&(!t||e.id.startsWith(t)),j=(e)=>e instanceof HTMLDialogElement,S=(e)=>f(e)&&e.role?.startsWith("menuitem")===!0&&e.ariaDisabled!=="true",g=(e,t)=>{let n=e.getAttribute(t);return n?document.getElementById(n):null},H=(e,t)=>{while(e){if(e.id.startsWith(t))return e;e=e.parentElement}return null},O=(e,t)=>{let n=e.getBoundingClientRect();return t.style.setProperty("--top",`${n.top}px`),t.style.setProperty("--right",`${n.right}px`),t.style.setProperty("--bottom",`${n.bottom}px`),t.style.setProperty("--left",`${n.left}px`),t.style.setProperty("--pw",`${t.offsetWidth}px`),t.style.setProperty("--ph",`${t.offsetHeight}px`),n},B=(e)=>{let t=(i)=>i?e(i.nextElementSibling||i.parentElement?.firstElementChild,t):null,n=(i)=>i?e(i.previousElementSibling||i.parentElement?.lastElementChild,n):null;return[t,n]},P=(e,t)=>{if(f(e)){let n=e.firstElementChild;if(R){if(f(n)){if(n===R){for(let i of D)i.ariaChecked="false";return n}if(n.role==="menuitemradio"){if(!$)n.ariaChecked="false";else D.push(n);return t(e)}}return $=!0,D=[],t(e)}if(S(n)&&(!A||n.textContent?.toLowerCase().startsWith(A)))return n.focus(),C=!0,n;else if(m!==e){if(!m)m=e;return t(e)}else m=null}return null},I=(e,t)=>{if(f(e)){if(m===e)return null;if(!m)m=e;let n=e.firstElementChild?.firstElementChild;if(E(n,"mct:a")){if(n.ariaDisabled==="true")return t(e);return C=!0,n.focus(),n}}return t(e)},U=(e,t)=>{if(E(e,"mct:ta")){if(m===e)return null;if(!m)m=e;if(e.ariaDisabled==="true")return t(e);return C=!0,e.focus(),e}else return t(e)},[k,w]=B(P),[z,G]=B(I),[X,Y]=B(U),N=(e)=>{let t=g(e,"aria-controls");if(t){let n=e.ariaExpanded!=="true";e.ariaExpanded=n?"true":"false",t.ariaHidden=n?"false":"true",n?t.removeAttribute("hidden"):t.setAttribute("hidden","")}},q=(e)=>{if(e.ariaDisabled==="true")return;if(e.ariaExpanded==="true")N(e);else{let t=H(e,"mcr:a");if(!t||t.getAttribute("data-mode")!=="single")N(e);else{let n=t.firstElementChild;while(n){let i=n.firstElementChild?.firstElementChild;if(f(i)&&(i===e||i.ariaExpanded==="true"))N(i);n=n.nextElementSibling}}}},J=(e)=>{if(e.ariaDisabled!=="true"&&e.ariaSelected!=="true"){let t=e.parentElement?.firstElementChild;while(f(t)){if(t===e||t.ariaSelected==="true"){let n=g(t,"aria-controls");if(n){let i=t.ariaSelected!=="true";if(t.ariaSelected=i?"true":"false",t.tabIndex=i?0:-1,n.ariaHidden=i?"false":"true",n.hasAttribute("tabindex"))n.tabIndex=i?0:-1;i?n.removeAttribute("hidden"):n.setAttribute("hidden","")}}t=t.nextElementSibling}}},d=(e,t=0)=>{if(e?.id.startsWith("mct:m")){let n=g(e,"aria-controls");if(n)if(e.ariaExpanded==="true"){if(s)s.removeAttribute("data-safe");if(s=null,F=null,h=null,t!==3)e.focus();n.hidePopover(),e.ariaExpanded="false",n.ariaHidden="true"}else{r.push(e),n.showPopover(),e.ariaExpanded="true",n.ariaHidden="false";let i=O(e,n),a=e.parentElement;if(a)s=a,L=i,F=n,h=null;if(t===0)e.focus();else if(t===1)P(n.firstElementChild,k);else if(t===2)P(n.lastElementChild,w)}}},T=(e=0)=>{while(r[e])d(r.pop(),3)},Q=(e)=>{if(e.role==="menuitemcheckbox")e.ariaChecked=e.ariaChecked==="true"?"false":"true";else if(e.role==="menuitemradio")R=e,$=null,D=[],k(e.parentElement),R=null,e.ariaChecked="true";else T()},b=(e,t)=>{if(e.ariaExpanded==="true"===t)return;let n=g(e,"aria-controls");if(n){if(t){if(o&&o!==e)b(o,!1);n.showPopover(),e.ariaExpanded="true",n.ariaHidden="false",O(e,n),o=e}else if(n.hidePopover(),e.ariaExpanded="false",n.ariaHidden="true",o===e)o=null}},K=(e,t)=>{let n=g(e,"aria-describedby");if(n)if(t)n.showPopover(),O(e,n);else n.hidePopover()},M=()=>{if(x&&x!==v&&x!==p)x=null;let e=v??p,t=e&&e!==x?e:null;if(t!==c){if(c)K(c,!1);if(t)K(t,!0);c=t}},V=(e)=>{if(y)return;let t=g(e,"aria-controls");if(!j(t))return;y=t,W=e,t.showModal()},Z=()=>{if(!y||!W)return;let e=y,t=W;y=null,W=null,e.close(),t.focus()};addEventListener("click",(e)=>{C=null;let t=e.detail===0,n=f(e.target)?e.target:e.target instanceof Element?e.target.parentElement:null;if(n){let i=n;while(i){let a=i.id;if(a.startsWith("mct:")){if(a.startsWith("mct:m")){if(o)b(o,!1);let l=t?1:3;if(H(i.parentElement,"mcc:m")){if(!r.includes(i))d(i,l)}else if(r[0]){let _=i!==r[0];if(T(),_)d(i,l)}else d(i,l)}else{if(r[0])T();if(a.startsWith("mct:a"))q(i);else if(a.startsWith("mct:c"))N(i);else if(a.startsWith("mct:ta"))J(i);else if(a.startsWith("mct:dialog-c"))Z();else if(a.startsWith("mct:dialog-o")&&i.ariaDisabled!=="true"){if(o)b(o,!1);if(c)x=c,M();V(i)}else if(a.startsWith("mct:p")&&i.ariaDisabled!=="true"){let l=i.ariaExpanded==="true";b(i,!l),l?i.focus():g(i,"aria-controls")?.focus()}else if(a.startsWith("mct:to")&&c)x=c,M()}break}else if(a.startsWith("mcc:m")&&r[0]){let l=n;while(l&&l!==i){if(S(l)&&!E(l,"mct:m")){Q(l);break}l=l.parentElement}break}else if(a.startsWith("mcc:p"))break;else if(a.startsWith("mcc:to"))break;else if(a.startsWith("mcc:d"))break;i=i.parentElement}if(!i){if(r[0])T();if(o)b(o,!1)}}if(C)e.preventDefault()}),addEventListener("pointermove",(e)=>{if(e.pointerType==="touch")return;if(f(e.target)&&!H(e.target,"mcc:to")){let t=H(e.target,"mct:to");if(t!==v)v=t,M()}if(r[0]){if(r[1]&&s&&L&&F){if(e.clientX>=L.left&&e.clientX<=L.right&&e.clientY>=L.top&&e.clientY<=L.bottom){if(h=F.getBoundingClientRect(),s.style.setProperty("--left",`${h.left}px`),s.style.setProperty("--right",`${h.right}px`),s.style.setProperty("--top",`${h.top}px`),s.style.setProperty("--bottom",`${h.bottom}px`),s.style.setProperty("--x",`${e.clientX}px`),s.style.setProperty("--y",`${e.clientY}px`),!s.hasAttribute("data-safe"))s.setAttribute("data-safe","")}else if(s.hasAttribute("data-safe")&&h&&(e.target!==s||(h.left-L.right)*e.movementX<0))s.removeAttribute("data-safe")}let t=e.target;if(f(t)){let n=[],i=t,a=!1,l=!1;while(i){if(S(i))l=!0;if(!l&&i.id.startsWith("mcc:")){a=!0;break}let u=i.firstElementChild;if(E(u,"mct:m"))n.unshift(u);i=i.parentElement}if(!a&&n[0]){let u=0;while(r[u]&&r[u]===n[u])u++;if(u===0&&(n[0].role!=="menuitem"||n[0].parentElement?.parentElement!==r[0].parentElement?.parentElement))return;T(u),d(n[u],3)}}}}),addEventListener("keydown",(e)=>{C=null,A=null,m=null;let t=e.target;if(E(t,"mct:a")){let n=t.parentElement?.parentElement;if(n)switch(e.key){case"ArrowDown":z(n);break;case"ArrowUp":G(n);break;case"Home":{let i=n.parentElement;if(i)I(i.firstElementChild,z);break}case"End":{let i=n.parentElement;if(i)I(i.lastElementChild,G);break}}}else if(E(t,"mct:ta")){let n=t.parentElement?.ariaOrientation==="vertical";switch(e.key){case"ArrowDown":if(n)X(t);break;case"ArrowUp":if(n)Y(t);break;case"ArrowRight":if(!n)X(t);break;case"ArrowLeft":if(!n)Y(t);break;case"Home":U(t.parentElement?.firstElementChild,X);break;case"End":U(t.parentElement?.lastElementChild,Y);break}}else{if(E(t,"mct:m")){let n=H(t,"mcc:m")===null;switch(e.key){case"ArrowDown":if(n)if(t.ariaExpanded!=="true")d(t,1);else{let i=g(t,"aria-controls");if(i)P(i.firstElementChild,k)}break;case"ArrowUp":if(n)if(t.ariaExpanded!=="true")d(t,2);else{let i=g(t,"aria-controls");if(i)P(i.lastElementChild,w)}break;case"ArrowRight":if(!n)d(t,1);break}}if(!C&&f(t)&&t.role?.startsWith("menuitem")&&t.parentElement){let n=t.parentElement,i=r[0]?.parentElement||n,a=H(t.parentElement,"mcc:m");switch(e.key){case"Tab":if(r[0])r[0].focus();T();break;case"ArrowDown":if(a)k(n);break;case"ArrowUp":if(a)w(n);break;case"ArrowRight":{let l=k(i);if(l){let u=r[0];if(T(),u&&E(l,"mct:m"))d(l,3)}break}case"ArrowLeft":if(r[1])d(r.pop(),0);else{let l=w(i);if(l){let u=r[0];if(T(),u&&E(l,"mct:m"))d(l,3)}}break;case"Home":P(n.parentElement?.firstElementChild,k);break;case"End":P(n.parentElement?.lastElementChild,w);break;default:if(/^[a-zA-Z]$/.test(e.key))A=e.key.toLowerCase(),k(n);break}}}if(e.key==="Escape"){if(r[0])d(r.pop(),0);if(o){let n=o;b(n,!1),n.focus()}if(y)Z();if(c)x=c,M()}if(C)e.preventDefault()}),addEventListener("scroll",(e)=>{if(r[0]&&(!f(e.target)||!e.target.id.startsWith("mcc:m")))T();if(o&&!(f(e.target)&&H(e.target,"mcc:p")))b(o,!1);if(c)v=null,p=null,M()},!0),addEventListener("resize",()=>{if(r[0])T();if(o)b(o,!1);if(c)v=null,p=null,M()}),addEventListener("focusin",(e)=>{let t=e.target;if(E(t,"mct:to")){if(p!==t)p=t,M()}else if(p)p=null,M()}),addEventListener("focusout",(e)=>{if(o&&f(e.relatedTarget)&&o!==e.relatedTarget&&!g(o,"aria-controls")?.contains(e.relatedTarget))b(o,!1);if(p&&e.target===p&&!e.relatedTarget)p=null,M()})}

package/dist/react/dialog.d.ts

@@ -0,0 +1,19 @@
+import { type ReactElement } from "react";
+import type { BaseProps } from "./shared.js";
+declare function Root({ children, ...props }: BaseProps): ReactElement;
+declare function Trigger({ children, ...props }: BaseProps): ReactElement;
+declare function Content({ children, ...props }: BaseProps): ReactElement;
+declare function Title({ children, as, ...props }: BaseProps & {
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+}): ReactElement;
+declare function Description({ children, ...props }: BaseProps): ReactElement;
+declare function Close({ children, ...props }: BaseProps): ReactElement;
+export declare const Dialog: {
+    Root: typeof Root;
+    Trigger: typeof Trigger;
+    Content: typeof Content;
+    Title: typeof Title;
+    Description: typeof Description;
+    Close: typeof Close;
+};
+export {};

package/dist/react/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./accordion.js";
 export * from "./collapsible.js";
+export * from "./dialog.js";
 export * from "./menu.js";
 export * from "./popover.js";
 export * from "./tabs.js";

package/dist/react/index.js

@@ -1,2 +1,2 @@
 "use client";
-import{createContext as A,createElement as l,useContext as k,useId as C}from"react";var R=A(null);function v(){let e=k(R);if(!e)throw Error("Accordion components must be used within Accordion.Item");return e}function j({children:e,type:o,...t}){let n=C();return l("div",{...t,"data-mode":o??"single",id:`mcr:accordion:${n}`},e)}function F({children:e,open:o,disabled:t,...n}){let r=C();return l(R.Provider,{value:{baseId:r,open:o??!1,disabled:t??!1}},l("div",n,e))}function L({children:e,as:o,...t}){return l(o??"h3",t,e)}function O({children:e,...o}){let t=v(),n=t.baseId,r=t.open;return l("button",{...o,type:"button",id:`mct:accordion:${n}`,"aria-expanded":r,"aria-controls":`mcc:accordion:${n}`,"aria-disabled":t.disabled||void 0},e)}function H({children:e,...o}){let t=v(),n=t.baseId,r=t.open;return l("div",{...o,id:`mcc:accordion:${n}`,role:"region","aria-labelledby":`mct:accordion:${n}`,"aria-hidden":!r,hidden:r?void 0:!0},e)}var he={Root:j,Item:F,Header:L,Trigger:O,Panel:H};import{createContext as z,createElement as d,useContext as S,useId as N}from"react";var E=z(null);function h(){let e=S(E);if(!e)throw Error("Collapsible components must be used within Collapsible.Root");return e}function G({children:e,open:o,...t}){let n=N();return d(E.Provider,{value:{baseId:n,open:o??!1}},d("div",t,e))}function q({children:e,...o}){let t=h(),n=t.baseId,r=t.open;return d("button",{...o,type:"button",id:`mct:collapsible:${n}`,"aria-expanded":r,"aria-controls":`mcc:collapsible:${n}`},e)}function D({children:e,...o}){let t=h(),n=t.baseId,r=t.open;return d("div",{...o,id:`mcc:collapsible:${n}`,"aria-labelledby":`mct:collapsible:${n}`,"aria-hidden":!r,hidden:r?void 0:!0},e)}var Be={Root:G,Trigger:q,Panel:D};import{createContext as I,createElement as a,useContext as y,useId as B,useRef as J}from"react";var b=I(null),$=I(null);function x(){let e=y(b);if(!e)throw Error("Menu components must be used within Menu.Root");return e}function K(){let e=y($);if(!e)throw Error("Menu components must be used within Menu.Popover");return e}function Q({children:e,menubar:o,...t}){let n=B();return a(b.Provider,{value:{id:n,root:!0,menubar:o}},a("div",{...t,id:`mcr:menu:${n}`},e))}function U({children:e,...o}){let t=x();return a("button",{...o,type:"button",id:`mct:menu:${t.id}`,"aria-controls":`mcc:menu:${t.id}`,"aria-expanded":"false","aria-haspopup":"menu",tabIndex:t.root||t.first?0:-1,role:t.submenu?"menuitem":"button"},e)}function W({children:e,...o}){let t=x(),n=J(!1);n.current=!1;let r=a($.Provider,{value:{claimFirst:()=>{if(!n.current)return n.current=!0,!0;return!1}}},e);return t.menubar?a("ul",{...o,role:"menubar"},r):a("ul",{...o,role:"menu",id:`mcc:menu:${t.id}`,"aria-labelledby":`mct:menu:${t.id}`,"aria-hidden":"true",popover:"manual"},r)}function X({children:e,disabled:o,href:t,...n}){let r=o?a("span",{...n,role:"menuitem","aria-disabled":"true",tabIndex:-1},e):t?a("a",{...n,role:"menuitem",href:t,tabIndex:-1},e):a("button",{...n,type:"button",role:"menuitem",tabIndex:-1},e);return a("li",{role:"none"},r)}function Y({children:e,checked:o,disabled:t,...n}){let r=t?a("span",{...n,role:"menuitemcheckbox","aria-checked":o??!1,"aria-disabled":"true",tabIndex:-1},e):a("button",{...n,type:"button",role:"menuitemcheckbox","aria-checked":o??!1,tabIndex:-1},e);return a("li",{role:"none"},r)}function Z({children:e,checked:o,disabled:t,...n}){let r=t?a("span",{...n,role:"menuitemradio","aria-checked":o??!1,"aria-disabled":"true",tabIndex:-1},e):a("button",{...n,type:"button",role:"menuitemradio","aria-checked":o??!1,tabIndex:-1},e);return a("li",{role:"none"},r)}function _({children:e,...o}){return a("li",{...o,role:"presentation"},e)}function ee(e){return a("li",{...e,role:"separator"})}function te({children:e,...o}){let t=x(),r=K().claimFirst(),i=B(),s=r&&t.menubar&&!t.submenu;return a(b.Provider,{value:{id:i,submenu:!0,first:s}},a("li",{...o,role:"none"},e))}var Te={Root:Q,Trigger:U,Popover:W,Item:X,CheckboxItem:Y,RadioItem:Z,Label:_,Separator:ee,Group:te};import{createContext as oe,createElement as p,useContext as ne,useId as re}from"react";var g=oe(null);function T(){let e=ne(g);if(!e)throw Error("Popover components must be used within Popover.Root");return e}function ae({children:e,...o}){let t=re();return p(g.Provider,{value:{id:t}},p("div",o,e))}function ie({children:e,...o}){let t=T();return p("button",{...o,type:"button",id:`mct:popover:${t.id}`,"aria-controls":`mcc:popover:${t.id}`,"aria-expanded":"false"},e)}function se({children:e,...o}){let t=T();return p("div",{...o,id:`mcc:popover:${t.id}`,"aria-labelledby":`mct:popover:${t.id}`,"aria-hidden":"true",popover:"manual",tabIndex:-1},e)}var Ve={Root:ae,Trigger:ie,Content:se};import{createContext as ce,createElement as u,useContext as le,useId as ue}from"react";var f=(e,o)=>o?`${e}:${o}`:e;var w=ce(null);function P(){let e=le(w);if(!e)throw Error("Tabs components must be used within Tabs.Root");return e}function de({children:e,defaultValue:o,orientation:t,...n}){let r=ue(),i=t??"horizontal";return u(w.Provider,{value:{baseId:r,selected:o,orientation:i}},u("div",{...n,id:`mcr:tabs:${r}`},e))}function pe({children:e,...o}){let t=P();return u("div",{...o,role:"tablist","aria-orientation":t.orientation},e)}function me({children:e,value:o,selected:t,disabled:n,...r}){let i=P(),s=f(i.baseId,o),c=t??o===i.selected;return u("button",{...r,type:"button",role:"tab",id:`mct:tabs:${s}`,"aria-selected":c,"aria-controls":`mcc:tabs:${s}`,tabIndex:c?0:-1,"aria-disabled":n||void 0},e)}function be({children:e,value:o,selected:t,focusable:n=!0,...r}){let i=P(),s=f(i.baseId,o),c=t??o===i.selected;return u("div",{...r,role:"tabpanel",id:`mcc:tabs:${s}`,"aria-labelledby":`mct:tabs:${s}`,"aria-hidden":!c,hidden:c?void 0:!0,tabIndex:n?c?0:-1:void 0},e)}var Le={Root:de,List:pe,Tab:me,Panel:be};import{createContext as xe,createElement as m,useContext as fe,useId as Pe}from"react";var M=xe(null);function V(){let e=fe(M);if(!e)throw Error("Tooltip components must be used within Tooltip.Root");return e}function Ce({children:e,...o}){let t=Pe();return m(M.Provider,{value:{id:t}},m("div",o,e))}function Re({children:e,...o}){let t=V();return m("button",{...o,type:"button",id:`mct:tooltip:${t.id}`,"aria-describedby":`mcc:tooltip:${t.id}`},e)}function ve({children:e,...o}){let t=V();return m("div",{...o,id:`mcc:tooltip:${t.id}`,role:"tooltip",popover:"manual"},e)}var ze={Root:Ce,Trigger:Re,Content:ve};export{ze as Tooltip,Le as Tabs,Ve as Popover,Te as Menu,Be as Collapsible,he as Accordion};
+import{createContext as L,createElement as u,useContext as j,useId as E}from"react";var v=L(null);function g(){let e=j(v);if(!e)throw Error("Accordion components must be used within Accordion.Item");return e}function F({children:e,type:o,...t}){let n=E();return u("div",{...t,"data-mode":o??"single",id:`mcr:accordion:${n}`},e)}function O({children:e,open:o,disabled:t,...n}){let r=E();return u(v.Provider,{value:{baseId:r,open:o??!1,disabled:t??!1}},u("div",n,e))}function H({children:e,as:o,...t}){return u(o??"h3",t,e)}function z({children:e,...o}){let t=g(),n=t.baseId,r=t.open;return u("button",{...o,type:"button",id:`mct:accordion:${n}`,"aria-expanded":r,"aria-controls":`mcc:accordion:${n}`,"aria-disabled":t.disabled||void 0},e)}function S({children:e,...o}){let t=g(),n=t.baseId,r=t.open;return u("div",{...o,id:`mcc:accordion:${n}`,role:"region","aria-labelledby":`mct:accordion:${n}`,"aria-hidden":!r,hidden:r?void 0:!0},e)}var je={Root:F,Item:O,Header:H,Trigger:z,Panel:S};import{createContext as N,createElement as b,useContext as G,useId as q}from"react";var y=N(null);function I(){let e=G(y);if(!e)throw Error("Collapsible components must be used within Collapsible.Root");return e}function J({children:e,open:o,...t}){let n=q();return b(y.Provider,{value:{baseId:n,open:o??!1}},b("div",t,e))}function K({children:e,...o}){let t=I(),n=t.baseId,r=t.open;return b("button",{...o,type:"button",id:`mct:collapsible:${n}`,"aria-expanded":r,"aria-controls":`mcc:collapsible:${n}`},e)}function Q({children:e,...o}){let t=I(),n=t.baseId,r=t.open;return b("div",{...o,id:`mcc:collapsible:${n}`,"aria-labelledby":`mct:collapsible:${n}`,"aria-hidden":!r,hidden:r?void 0:!0},e)}var He={Root:J,Trigger:K,Panel:Q};import{createContext as U,createElement as c,useContext as W,useId as X}from"react";var B=U(null);function p(){let e=W(B);if(!e)throw Error("Dialog components must be used within Dialog.Root");return e}function Y({children:e,...o}){let t=X();return c(B.Provider,{value:{id:t}},c("div",o,e))}function Z({children:e,...o}){let t=p();return c("button",{...o,type:"button",id:`mct:dialog-open:${t.id}`,"aria-haspopup":"dialog","aria-controls":`mcc:dialog:${t.id}`},e)}function _({children:e,...o}){let t=p(),n="aria-label"in o,r="aria-description"in o;return c("dialog",{...n?{}:{"aria-labelledby":`mcc:dialog-title:${t.id}`},...r?{}:{"aria-describedby":`mcc:dialog-description:${t.id}`},...o,id:`mcc:dialog:${t.id}`,tabIndex:-1},e)}function ee({children:e,as:o,...t}){let n=p();return c(o??"h2",{...t,id:`mcc:dialog-title:${n.id}`},e)}function te({children:e,...o}){let t=p();return c("p",{...o,id:`mcc:dialog-description:${t.id}`},e)}function oe({children:e,...o}){let t=p();return c("button",{...o,type:"button",id:`mct:dialog-close:${t.id}`},e)}var Ne={Root:Y,Trigger:Z,Content:_,Title:ee,Description:te,Close:oe};import{createContext as $,createElement as a,useContext as T,useId as w,useRef as ne}from"react";var P=$(null),M=$(null);function h(){let e=T(P);if(!e)throw Error("Menu components must be used within Menu.Root");return e}function re(){let e=T(M);if(!e)throw Error("Menu components must be used within Menu.Popover");return e}function ae({children:e,menubar:o,...t}){let n=w();return a(P.Provider,{value:{id:n,root:!0,menubar:o}},a("div",{...t,id:`mcr:menu:${n}`},e))}function ie({children:e,...o}){let t=h();return a("button",{...o,type:"button",id:`mct:menu:${t.id}`,"aria-controls":`mcc:menu:${t.id}`,"aria-expanded":"false","aria-haspopup":"menu",tabIndex:t.root||t.first?0:-1,role:t.submenu?"menuitem":"button"},e)}function se({children:e,...o}){let t=h(),n=ne(!1);n.current=!1;let r=a(M.Provider,{value:{claimFirst:()=>{if(!n.current)return n.current=!0,!0;return!1}}},e);return t.menubar?a("ul",{...o,role:"menubar"},r):a("ul",{...o,role:"menu",id:`mcc:menu:${t.id}`,"aria-labelledby":`mct:menu:${t.id}`,"aria-hidden":"true",popover:"manual"},r)}function ce({children:e,disabled:o,href:t,...n}){let r=o?a("span",{...n,role:"menuitem","aria-disabled":"true",tabIndex:-1},e):t?a("a",{...n,role:"menuitem",href:t,tabIndex:-1},e):a("button",{...n,type:"button",role:"menuitem",tabIndex:-1},e);return a("li",{role:"none"},r)}function le({children:e,checked:o,disabled:t,...n}){let r=t?a("span",{...n,role:"menuitemcheckbox","aria-checked":o??!1,"aria-disabled":"true",tabIndex:-1},e):a("button",{...n,type:"button",role:"menuitemcheckbox","aria-checked":o??!1,tabIndex:-1},e);return a("li",{role:"none"},r)}function ue({children:e,checked:o,disabled:t,...n}){let r=t?a("span",{...n,role:"menuitemradio","aria-checked":o??!1,"aria-disabled":"true",tabIndex:-1},e):a("button",{...n,type:"button",role:"menuitemradio","aria-checked":o??!1,tabIndex:-1},e);return a("li",{role:"none"},r)}function de({children:e,...o}){return a("li",{...o,role:"presentation"},e)}function pe(e){return a("li",{...e,role:"separator"})}function me({children:e,...o}){let t=h(),r=re().claimFirst(),i=w(),s=r&&t.menubar&&!t.submenu;return a(P.Provider,{value:{id:i,submenu:!0,first:s}},a("li",{...o,role:"none"},e))}var Je={Root:ae,Trigger:ie,Popover:se,Item:ce,CheckboxItem:le,RadioItem:ue,Label:de,Separator:pe,Group:me};import{createContext as be,createElement as d,useContext as xe,useId as fe}from"react";var V=be(null);function x(){let e=xe(V);if(!e)throw Error("Popover components must be used within Popover.Root");return e}function Pe({children:e,...o}){let t=fe();return d(V.Provider,{value:{id:t}},d("div",o,e))}function he({children:e,...o}){let t=x();return d("button",{...o,type:"button",id:`mct:popover:${t.id}`,"aria-controls":`mcc:popover:${t.id}`,"aria-expanded":"false"},e)}function Ce({children:e,...o}){let t=x(),n="aria-label"in o,r="aria-description"in o;return d("div",{...n?{}:{"aria-labelledby":`mct:popover:${t.id}`},...r?{}:{"aria-describedby":`mcc:popover-description:${t.id}`},...o,id:`mcc:popover:${t.id}`,"aria-hidden":"true",popover:"manual",tabIndex:-1},e)}function Re({children:e,as:o,...t}){let n=x();return d(o??"h2",{...t,id:`mcc:popover-title:${n.id}`},e)}function Ee({children:e,...o}){let t=x();return d("p",{...o,id:`mcc:popover-description:${t.id}`},e)}var Ue={Root:Pe,Trigger:he,Content:Ce,Title:Re,Description:Ee};import{createContext as ve,createElement as m,useContext as ge,useId as ye}from"react";var C=(e,o)=>o?`${e}:${o}`:e;var D=ve(null);function R(){let e=ge(D);if(!e)throw Error("Tabs components must be used within Tabs.Root");return e}function Ie({children:e,defaultValue:o,orientation:t,...n}){let r=ye(),i=t??"horizontal";return m(D.Provider,{value:{baseId:r,selected:o,orientation:i}},m("div",{...n,id:`mcr:tabs:${r}`},e))}function Be({children:e,...o}){let t=R();return m("div",{...o,role:"tablist","aria-orientation":t.orientation},e)}function $e({children:e,value:o,selected:t,disabled:n,...r}){let i=R(),s=C(i.baseId,o),l=t??o===i.selected;return m("button",{...r,type:"button",role:"tab",id:`mct:tabs:${s}`,"aria-selected":l,"aria-controls":`mcc:tabs:${s}`,tabIndex:l?0:-1,"aria-disabled":n||void 0},e)}function Te({children:e,value:o,selected:t,focusable:n=!0,...r}){let i=R(),s=C(i.baseId,o),l=t??o===i.selected;return m("div",{...r,role:"tabpanel",id:`mcc:tabs:${s}`,"aria-labelledby":`mct:tabs:${s}`,"aria-hidden":!l,hidden:l?void 0:!0,tabIndex:n?l?0:-1:void 0},e)}var _e={Root:Ie,List:Be,Tab:$e,Panel:Te};import{createContext as we,createElement as f,useContext as Me,useId as Ve}from"react";var A=we(null);function k(){let e=Me(A);if(!e)throw Error("Tooltip components must be used within Tooltip.Root");return e}function De({children:e,...o}){let t=Ve();return f(A.Provider,{value:{id:t}},f("div",o,e))}function Ae({children:e,...o}){let t=k();return f("button",{...o,type:"button",id:`mct:tooltip:${t.id}`,"aria-describedby":`mcc:tooltip:${t.id}`},e)}function ke({children:e,...o}){let t=k();return f("div",{...o,id:`mcc:tooltip:${t.id}`,role:"tooltip",popover:"manual"},e)}var ot={Root:De,Trigger:Ae,Content:ke};export{ot as Tooltip,_e as Tabs,Ue as Popover,Je as Menu,Ne as Dialog,He as Collapsible,je as Accordion};

package/dist/react/popover.d.ts

@@ -3,9 +3,15 @@ import type { BaseProps } from "./shared.js";
 declare function Root({ children, ...props }: BaseProps): ReactElement;
 declare function Trigger({ children, ...props }: BaseProps): ReactElement;
 declare function Content({ children, ...props }: BaseProps): ReactElement;
+declare function Title({ children, as, ...props }: BaseProps & {
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+}): ReactElement;
+declare function Description({ children, ...props }: BaseProps): ReactElement;
 export declare const Popover: {
     Root: typeof Root;
     Trigger: typeof Trigger;
     Content: typeof Content;
+    Title: typeof Title;
+    Description: typeof Description;
 };
 export {};

package/dist/vue/dialog.d.ts

@@ -0,0 +1,32 @@
+export declare const Dialog: {
+    Root: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Trigger: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Content: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Title: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        as: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        as: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{}>, {
+        as: string;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Description: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Close: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};

package/dist/vue/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./accordion.js";
 export * from "./collapsible.js";
+export * from "./dialog.js";
 export * from "./menu.js";
 export * from "./popover.js";
 export * from "./tabs.js";

package/dist/vue/index.js

@@ -1 +1 @@
-import{defineComponent as c,h as s,provide as R,reactive as q,toRef as S,useId as M}from"vue";import{inject as A}from"vue";function n(o,t){let e=A(o);if(!e)throw Error(`${t} must be used within its parent provider`);return e}var I=(o,t)=>t?`${o}:${t}`:o,p=Symbol("CollapsibleContext"),b=Symbol("AccordionContext"),u=Symbol("TabsContext"),d=Symbol("MenuContext"),g=Symbol("MenuPopupContext"),m=Symbol("PopoverContext"),f=Symbol("TooltipContext");var F=c({props:{type:{type:String,default:"single"}},setup(o,{slots:t}){let e=M();return()=>s("div",{"data-mode":o.type,id:`mcr:accordion:${e}`},t.default?.())}}),L=c({props:{open:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},setup(o,{slots:t}){let e=M();return R(b,q({baseId:e,open:S(o,"open"),disabled:S(o,"disabled")})),()=>s("div",null,t.default?.())}}),w=c({props:{as:{type:String,default:"h3"}},setup(o,{slots:t}){return()=>s(o.as,null,t.default?.())}}),z=c({setup(o,{slots:t}){let e=n(b,"Accordion.Trigger/Panel");return()=>s("button",{type:"button",id:`mct:accordion:${e.baseId}`,"aria-expanded":e.open,"aria-controls":`mcc:accordion:${e.baseId}`,"aria-disabled":e.disabled||void 0},t.default?.())}}),G=c({setup(o,{slots:t}){let e=n(b,"Accordion.Trigger/Panel");return()=>s("div",{id:`mcc:accordion:${e.baseId}`,role:"region","aria-labelledby":`mct:accordion:${e.baseId}`,"aria-hidden":!e.open,hidden:e.open?void 0:!0},t.default?.())}}),Me={Root:F,Item:L,Header:w,Trigger:z,Panel:G};import{defineComponent as C,h,provide as V,reactive as E,toRef as H,useId as U}from"vue";var D=C({props:{open:{type:Boolean,default:!1}},setup(o,{slots:t}){let e=U();return V(p,E({baseId:e,open:H(o,"open")})),()=>h("div",null,t.default?.())}}),J=C({setup(o,{slots:t}){let e=n(p,"Collapsible.Trigger/Panel");return()=>h("button",{type:"button",id:`mct:collapsible:${e.baseId}`,"aria-expanded":e.open,"aria-controls":`mcc:collapsible:${e.baseId}`},t.default?.())}}),N=C({setup(o,{slots:t}){let e=n(p,"Collapsible.Trigger/Panel");return()=>h("div",{id:`mcc:collapsible:${e.baseId}`,"aria-labelledby":`mct:collapsible:${e.baseId}`,"aria-hidden":!e.open,hidden:e.open?void 0:!0},t.default?.())}}),Ae={Root:D,Trigger:J,Panel:N};import{defineComponent as i,h as r,onBeforeUpdate as O,provide as T,reactive as Q,ref as W,toRef as X,useId as _}from"vue";var Y=i({props:{menubar:Boolean},setup(o,{slots:t}){let e=_();return T(d,Q({id:e,root:!0,menubar:X(o,"menubar")})),()=>r("div",{id:`mcr:menu:${e}`},t.default?.())}}),Z=i({setup(o,{slots:t}){let e=n(d,"Menu.Trigger");return()=>r("button",{type:"button",id:`mct:menu:${e.id}`,"aria-controls":`mcc:menu:${e.id}`,"aria-expanded":"false","aria-haspopup":"menu",tabindex:e.root||e.first?0:-1,role:e.submenu?"menuitem":"button"},t.default?.())}}),ee=i({setup(o,{slots:t}){let e=n(d,"Menu.Popover"),a=W(!1);return O(()=>{a.value=!1}),T(g,{claimFirst:()=>{if(!a.value)return a.value=!0,!0;return!1}}),()=>e.menubar?r("ul",{role:"menubar"},t.default?.()):r("ul",{role:"menu",id:`mcc:menu:${e.id}`,"aria-labelledby":`mct:menu:${e.id}`,"aria-hidden":"true",popover:"manual"},t.default?.())}}),te=i({inheritAttrs:!1,props:{disabled:Boolean,href:String},setup(o,{slots:t,attrs:e}){return()=>{let a=o.disabled?r("span",{...e,role:"menuitem","aria-disabled":"true",tabindex:-1},t.default?.()):o.href?r("a",{...e,role:"menuitem",href:o.href,tabindex:-1},t.default?.()):r("button",{...e,type:"button",role:"menuitem",tabindex:-1},t.default?.());return r("li",{role:"none"},[a])}}}),oe=i({inheritAttrs:!1,props:{checked:{type:Boolean,default:!1},disabled:Boolean},setup(o,{slots:t,attrs:e}){return()=>{let a=o.disabled?r("span",{...e,role:"menuitemcheckbox","aria-checked":o.checked,"aria-disabled":"true",tabindex:-1},t.default?.()):r("button",{...e,type:"button",role:"menuitemcheckbox","aria-checked":o.checked,tabindex:-1},t.default?.());return r("li",{role:"none"},[a])}}}),ne=i({inheritAttrs:!1,props:{checked:{type:Boolean,default:!1},disabled:Boolean},setup(o,{slots:t,attrs:e}){return()=>{let a=o.disabled?r("span",{...e,role:"menuitemradio","aria-checked":o.checked,"aria-disabled":"true",tabindex:-1},t.default?.()):r("button",{...e,type:"button",role:"menuitemradio","aria-checked":o.checked,tabindex:-1},t.default?.());return r("li",{role:"none"},[a])}}}),re=i({setup(o,{slots:t}){return()=>r("li",{role:"presentation"},t.default?.())}}),ae=i({setup(){return()=>r("li",{role:"separator"})}}),ie=i({setup(o,{slots:t}){let e=n(d,"Menu.Group"),l=n(g,"Menu.Group").claimFirst(),B=_(),k=l&&e.menubar&&!e.submenu;return T(d,{id:B,submenu:!0,first:k}),()=>r("li",{role:"none"},t.default?.())}}),Le={Root:Y,Trigger:Z,Popover:ee,Item:te,CheckboxItem:oe,RadioItem:ne,Label:re,Separator:ae,Group:ie};import{defineComponent as $,h as P,provide as le,useId as de}from"vue";var ue=$({setup(o,{slots:t}){let e=de();return le(m,{id:e}),()=>P("div",null,t.default?.())}}),ce=$({setup(o,{slots:t}){let e=n(m,"Popover.Trigger");return()=>P("button",{type:"button",id:`mct:popover:${e.id}`,"aria-controls":`mcc:popover:${e.id}`,"aria-expanded":"false"},t.default?.())}}),se=$({setup(o,{slots:t}){let e=n(m,"Popover.Content");return()=>P("div",{id:`mcc:popover:${e.id}`,"aria-labelledby":`mct:popover:${e.id}`,"aria-hidden":"true",popover:"manual",tabindex:-1},t.default?.())}}),Ve={Root:ue,Trigger:ce,Content:se};import{computed as x,defineComponent as y,h as v,provide as pe,reactive as be,toRef as me,useId as fe}from"vue";var xe=y({props:{defaultValue:{type:String,required:!0},orientation:{type:String,default:"horizontal"}},setup(o,{slots:t}){let e=fe();return pe(u,be({baseId:e,selected:o.defaultValue,orientation:me(o,"orientation")})),()=>v("div",{id:`mcr:tabs:${e}`},t.default?.())}}),ye=y({setup(o,{slots:t}){let e=n(u,"Tabs.List/Tab/Panel");return()=>v("div",{role:"tablist","aria-orientation":e.orientation},t.default?.())}}),ve=y({props:{value:{type:String,required:!0},selected:{type:[Boolean,null],default:null},disabled:Boolean},setup(o,{slots:t}){let e=n(u,"Tabs.List/Tab/Panel"),a=x(()=>I(e.baseId,o.value)),l=x(()=>o.selected!==null?o.selected:o.value===e.selected);return()=>v("button",{type:"button",role:"tab",id:`mct:tabs:${a.value}`,"aria-selected":l.value,"aria-controls":`mcc:tabs:${a.value}`,tabindex:l.value?0:-1,"aria-disabled":o.disabled||void 0},t.default?.())}}),Ie=y({props:{value:{type:String,required:!0},selected:{type:[Boolean,null],default:null},focusable:{type:Boolean,default:!0}},setup(o,{slots:t}){let e=n(u,"Tabs.List/Tab/Panel"),a=x(()=>I(e.baseId,o.value)),l=x(()=>o.selected!==null?o.selected:o.value===e.selected);return()=>v("div",{role:"tabpanel",id:`mcc:tabs:${a.value}`,"aria-labelledby":`mct:tabs:${a.value}`,"aria-hidden":!l.value,hidden:l.value?void 0:!0,tabindex:o.focusable?l.value?0:-1:void 0},t.default?.())}}),De={Root:xe,List:ye,Tab:ve,Panel:Ie};import{defineComponent as K,h as j,provide as ge,useId as Ce}from"vue";var he=K({setup(o,{slots:t}){let e=Ce();return ge(f,{id:e}),()=>j("div",null,t.default?.())}}),Te=K({setup(o,{slots:t}){let e=n(f,"Tooltip.Trigger");return()=>j("button",{type:"button",id:`mct:tooltip:${e.id}`,"aria-describedby":`mcc:tooltip:${e.id}`},t.default?.())}}),$e=K({setup(o,{slots:t}){let e=n(f,"Tooltip.Content");return()=>j("div",{id:`mcc:tooltip:${e.id}`,role:"tooltip",popover:"manual"},t.default?.())}}),Qe={Root:he,Trigger:Te,Content:$e};export{Qe as Tooltip,De as Tabs,Ve as Popover,Le as Menu,Ae as Collapsible,Me as Accordion};
+import{defineComponent as f,h as x,provide as L,reactive as F,toRef as B,useId as k}from"vue";import{inject as q}from"vue";function n(o,t){let e=q(o);if(!e)throw Error(`${t} must be used within its parent provider`);return e}var P=(o,t)=>t?`${o}:${t}`:o,v=Symbol("CollapsibleContext"),h=Symbol("AccordionContext"),m=Symbol("TabsContext"),u=Symbol("MenuContext"),K=Symbol("MenuPopupContext"),c=Symbol("PopoverContext"),C=Symbol("TooltipContext"),d=Symbol("DialogContext");var w=f({props:{type:{type:String,default:"single"}},setup(o,{slots:t}){let e=k();return()=>x("div",{"data-mode":o.type,id:`mcr:accordion:${e}`},t.default?.())}}),z=f({props:{open:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},setup(o,{slots:t}){let e=k();return L(h,F({baseId:e,open:B(o,"open"),disabled:B(o,"disabled")})),()=>x("div",null,t.default?.())}}),G=f({props:{as:{type:String,default:"h3"}},setup(o,{slots:t}){return()=>x(o.as,null,t.default?.())}}),V=f({setup(o,{slots:t}){let e=n(h,"Accordion.Trigger/Panel");return()=>x("button",{type:"button",id:`mct:accordion:${e.baseId}`,"aria-expanded":e.open,"aria-controls":`mcc:accordion:${e.baseId}`,"aria-disabled":e.disabled||void 0},t.default?.())}}),E=f({setup(o,{slots:t}){let e=n(h,"Accordion.Trigger/Panel");return()=>x("div",{id:`mcc:accordion:${e.baseId}`,role:"region","aria-labelledby":`mct:accordion:${e.baseId}`,"aria-hidden":!e.open,hidden:e.open?void 0:!0},t.default?.())}}),Ve={Root:w,Item:z,Header:G,Trigger:V,Panel:E};import{defineComponent as _,h as S,provide as H,reactive as U,toRef as J,useId as N}from"vue";var O=_({props:{open:{type:Boolean,default:!1}},setup(o,{slots:t}){let e=N();return H(v,U({baseId:e,open:J(o,"open")})),()=>S("div",null,t.default?.())}}),Q=_({setup(o,{slots:t}){let e=n(v,"Collapsible.Trigger/Panel");return()=>S("button",{type:"button",id:`mct:collapsible:${e.baseId}`,"aria-expanded":e.open,"aria-controls":`mcc:collapsible:${e.baseId}`},t.default?.())}}),W=_({setup(o,{slots:t}){let e=n(v,"Collapsible.Trigger/Panel");return()=>S("div",{id:`mcc:collapsible:${e.baseId}`,"aria-labelledby":`mct:collapsible:${e.baseId}`,"aria-hidden":!e.open,hidden:e.open?void 0:!0},t.default?.())}}),Je={Root:O,Trigger:Q,Panel:W};import{defineComponent as s,h as p,provide as X,useId as Y}from"vue";var Z=s({setup(o,{slots:t}){let e=Y();return X(d,{id:e}),()=>p("div",null,t.default?.())}}),ee=s({setup(o,{slots:t}){let e=n(d,"Dialog.Trigger");return()=>p("button",{type:"button",id:`mct:dialog-open:${e.id}`,"aria-haspopup":"dialog","aria-controls":`mcc:dialog:${e.id}`},t.default?.())}}),te=s({inheritAttrs:!1,setup(o,{slots:t,attrs:e}){let r=n(d,"Dialog.Content");return()=>{let a="aria-label"in e,b="aria-description"in e;return p("dialog",{...a?{}:{"aria-labelledby":`mcc:dialog-title:${r.id}`},...b?{}:{"aria-describedby":`mcc:dialog-description:${r.id}`},...e,id:`mcc:dialog:${r.id}`,tabindex:-1},t.default?.())}}}),oe=s({props:{as:{type:String,default:"h2"}},setup(o,{slots:t}){let e=n(d,"Dialog.Title");return()=>p(o.as,{id:`mcc:dialog-title:${e.id}`},t.default?.())}}),ne=s({setup(o,{slots:t}){let e=n(d,"Dialog.Description");return()=>p("p",{id:`mcc:dialog-description:${e.id}`},t.default?.())}}),re=s({setup(o,{slots:t}){let e=n(d,"Dialog.Close");return()=>p("button",{type:"button",id:`mct:dialog-close:${e.id}`},t.default?.())}}),We={Root:Z,Trigger:ee,Content:te,Title:oe,Description:ne,Close:re};import{defineComponent as l,h as i,onBeforeUpdate as ie,provide as j,reactive as ae,ref as le,toRef as de,useId as A}from"vue";var ue=l({props:{menubar:Boolean},setup(o,{slots:t}){let e=A();return j(u,ae({id:e,root:!0,menubar:de(o,"menubar")})),()=>i("div",{id:`mcr:menu:${e}`},t.default?.())}}),ce=l({setup(o,{slots:t}){let e=n(u,"Menu.Trigger");return()=>i("button",{type:"button",id:`mct:menu:${e.id}`,"aria-controls":`mcc:menu:${e.id}`,"aria-expanded":"false","aria-haspopup":"menu",tabindex:e.root||e.first?0:-1,role:e.submenu?"menuitem":"button"},t.default?.())}}),se=l({setup(o,{slots:t}){let e=n(u,"Menu.Popover"),r=le(!1);return ie(()=>{r.value=!1}),j(K,{claimFirst:()=>{if(!r.value)return r.value=!0,!0;return!1}}),()=>e.menubar?i("ul",{role:"menubar"},t.default?.()):i("ul",{role:"menu",id:`mcc:menu:${e.id}`,"aria-labelledby":`mct:menu:${e.id}`,"aria-hidden":"true",popover:"manual"},t.default?.())}}),pe=l({inheritAttrs:!1,props:{disabled:Boolean,href:String},setup(o,{slots:t,attrs:e}){return()=>{let r=o.disabled?i("span",{...e,role:"menuitem","aria-disabled":"true",tabindex:-1},t.default?.()):o.href?i("a",{...e,role:"menuitem",href:o.href,tabindex:-1},t.default?.()):i("button",{...e,type:"button",role:"menuitem",tabindex:-1},t.default?.());return i("li",{role:"none"},[r])}}}),be=l({inheritAttrs:!1,props:{checked:{type:Boolean,default:!1},disabled:Boolean},setup(o,{slots:t,attrs:e}){return()=>{let r=o.disabled?i("span",{...e,role:"menuitemcheckbox","aria-checked":o.checked,"aria-disabled":"true",tabindex:-1},t.default?.()):i("button",{...e,type:"button",role:"menuitemcheckbox","aria-checked":o.checked,tabindex:-1},t.default?.());return i("li",{role:"none"},[r])}}}),me=l({inheritAttrs:!1,props:{checked:{type:Boolean,default:!1},disabled:Boolean},setup(o,{slots:t,attrs:e}){return()=>{let r=o.disabled?i("span",{...e,role:"menuitemradio","aria-checked":o.checked,"aria-disabled":"true",tabindex:-1},t.default?.()):i("button",{...e,type:"button",role:"menuitemradio","aria-checked":o.checked,tabindex:-1},t.default?.());return i("li",{role:"none"},[r])}}}),fe=l({setup(o,{slots:t}){return()=>i("li",{role:"presentation"},t.default?.())}}),xe=l({setup(){return()=>i("li",{role:"separator"})}}),ye=l({setup(o,{slots:t}){let e=n(u,"Menu.Group"),a=n(K,"Menu.Group").claimFirst(),b=A(),R=a&&e.menubar&&!e.submenu;return j(u,{id:b,submenu:!0,first:R}),()=>i("li",{role:"none"},t.default?.())}}),et={Root:ue,Trigger:ce,Popover:se,Item:pe,CheckboxItem:be,RadioItem:me,Label:fe,Separator:xe,Group:ye};import{defineComponent as y,h as g,provide as ge,useId as ve}from"vue";var he=y({setup(o,{slots:t}){let e=ve();return ge(c,{id:e}),()=>g("div",null,t.default?.())}}),Ce=y({setup(o,{slots:t}){let e=n(c,"Popover.Trigger");return()=>g("button",{type:"button",id:`mct:popover:${e.id}`,"aria-controls":`mcc:popover:${e.id}`,"aria-expanded":"false"},t.default?.())}}),Ie=y({inheritAttrs:!1,setup(o,{slots:t,attrs:e}){let r=n(c,"Popover.Content");return()=>{let a="aria-label"in e,b="aria-description"in e;return g("div",{...a?{}:{"aria-labelledby":`mct:popover:${r.id}`},...b?{}:{"aria-describedby":`mcc:popover-description:${r.id}`},...e,id:`mcc:popover:${r.id}`,"aria-hidden":"true",popover:"manual",tabindex:-1},t.default?.())}}}),Te=y({props:{as:{type:String,default:"h2"}},setup(o,{slots:t}){let e=n(c,"Popover.Title");return()=>g(o.as,{id:`mcc:popover-title:${e.id}`},t.default?.())}}),$e=y({setup(o,{slots:t}){let e=n(c,"Popover.Description");return()=>g("p",{id:`mcc:popover-description:${e.id}`},t.default?.())}}),rt={Root:he,Trigger:Ce,Content:Ie,Title:Te,Description:$e};import{computed as I,defineComponent as T,h as $,provide as Pe,reactive as Ke,toRef as _e,useId as Se}from"vue";var je=T({props:{defaultValue:{type:String,required:!0},orientation:{type:String,default:"horizontal"}},setup(o,{slots:t}){let e=Se();return Pe(m,Ke({baseId:e,selected:o.defaultValue,orientation:_e(o,"orientation")})),()=>$("div",{id:`mcr:tabs:${e}`},t.default?.())}}),De=T({setup(o,{slots:t}){let e=n(m,"Tabs.List/Tab/Panel");return()=>$("div",{role:"tablist","aria-orientation":e.orientation},t.default?.())}}),Me=T({props:{value:{type:String,required:!0},selected:{type:[Boolean,null],default:null},disabled:Boolean},setup(o,{slots:t}){let e=n(m,"Tabs.List/Tab/Panel"),r=I(()=>P(e.baseId,o.value)),a=I(()=>o.selected!==null?o.selected:o.value===e.selected);return()=>$("button",{type:"button",role:"tab",id:`mct:tabs:${r.value}`,"aria-selected":a.value,"aria-controls":`mcc:tabs:${r.value}`,tabindex:a.value?0:-1,"aria-disabled":o.disabled||void 0},t.default?.())}}),Be=T({props:{value:{type:String,required:!0},selected:{type:[Boolean,null],default:null},focusable:{type:Boolean,default:!0}},setup(o,{slots:t}){let e=n(m,"Tabs.List/Tab/Panel"),r=I(()=>P(e.baseId,o.value)),a=I(()=>o.selected!==null?o.selected:o.value===e.selected);return()=>$("div",{role:"tabpanel",id:`mcc:tabs:${r.value}`,"aria-labelledby":`mct:tabs:${r.value}`,"aria-hidden":!a.value,hidden:a.value?void 0:!0,tabindex:o.focusable?a.value?0:-1:void 0},t.default?.())}}),dt={Root:je,List:De,Tab:Me,Panel:Be};import{defineComponent as D,h as M,provide as ke,useId as Ae}from"vue";var Re=D({setup(o,{slots:t}){let e=Ae();return ke(C,{id:e}),()=>M("div",null,t.default?.())}}),qe=D({setup(o,{slots:t}){let e=n(C,"Tooltip.Trigger");return()=>M("button",{type:"button",id:`mct:tooltip:${e.id}`,"aria-describedby":`mcc:tooltip:${e.id}`},t.default?.())}}),Le=D({setup(o,{slots:t}){let e=n(C,"Tooltip.Content");return()=>M("div",{id:`mcc:tooltip:${e.id}`,role:"tooltip",popover:"manual"},t.default?.())}}),pt={Root:Re,Trigger:qe,Content:Le};export{pt as Tooltip,dt as Tabs,rt as Popover,et as Menu,We as Dialog,Je as Collapsible,Ve as Accordion};

package/dist/vue/popover.d.ts

@@ -8,4 +8,22 @@ export declare const Popover: {
     Content: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Title: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        as: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        as: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{}>, {
+        as: string;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Description: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 };

package/dist/vue/shared.d.ts

@@ -38,3 +38,7 @@ export type TooltipContext = {
     id: string;
 };
 export declare const TooltipKey: InjectionKey<TooltipContext>;
+export type DialogContext = {
+    id: string;
+};
+export declare const DialogKey: InjectionKey<DialogContext>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monochrome",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Accessible UI component library. Best-in-class performance. HTML-first, React and Vue supported.",
   "author": "Colin van Eenige",
   "license": "MIT",
@@ -30,6 +30,7 @@
     "typescript",
     "accordion",
     "collapsible",
+    "dialog",
     "menu",
     "tabs"
   ],
@@ -62,9 +63,9 @@
   "scripts": {
     "build": "NODE_ENV=production bun build.ts",
     "test": "playwright test",
-    "lint": "biome check src tests",
-    "lint:fix": "biome check --write src tests",
-    "format": "biome format --write src tests",
+    "lint": "biome check src tests skill",
+    "lint:fix": "biome check --write src tests skill",
+    "format": "biome format --write src tests skill",
     "typecheck": "tsc --noEmit",
     "prepare": "git config core.hooksPath scripts/git-hooks",
     "prepublishOnly": "bun run typecheck && bun run build && bun run test"
@@ -98,17 +99,22 @@
     "vue": "3.5.32"
   },
   "versionMeta": {
-    "gzipSize": 2561,
+    "gzipSize": 2668,
     "routerGzipSize": 1057,
+    "wrappersGzipSize": {
+      "react": 2038,
+      "vue": 2237
+    },
     "tests": {
-      "total": 423,
+      "total": 463,
       "collapsible": 37,
       "router": 28,
       "accordion": 60,
       "menu": 179,
       "tooltip": 24,
       "tabs": 66,
-      "popover": 29
+      "dialog": 36,
+      "popover": 33
     }
   }
 }