monochrome 0.6.0 → 0.7.0

package/README.md

@@ -3,7 +3,7 @@
 Accessible UI component library. Best-in-class performance. HTML-first, React and Vue supported.
 
 <!-- badges -->
-![gzip](https://img.shields.io/badge/gzip-2.4kB-brightgreen) ![tests](https://img.shields.io/badge/tests-414_passing-brightgreen) ![WCAG](https://img.shields.io/badge/WCAG_2.2-AA-blue) ![license](https://img.shields.io/badge/license-MIT-blue)
+![gzip](https://img.shields.io/badge/gzip-2.6kB-brightgreen) ![tests](https://img.shields.io/badge/tests-438_passing-brightgreen) ![WCAG](https://img.shields.io/badge/WCAG_2.2-AA-blue) ![license](https://img.shields.io/badge/license-MIT-blue)
 <!-- /badges -->
 
 ## Install
@@ -50,14 +50,16 @@ The Vue API is identical: `import { Accordion } from "monochrome/vue"`. Monochro
 
 ## Components
 
-Four interactive UI patterns in <!-- size -->2.4kB<!-- /size -->:
+Six interactive UI patterns in <!-- size -->2.6kB<!-- /size -->:
 
 | Component | Description | Tests |
 | --- | --- | ---: |
 | **Accordion** | Grouped collapsible content sections | <!-- tests:accordion -->66<!-- /tests:accordion --> |
 | **Collapsible** | Show and hide content with a button | <!-- tests:collapsible -->42<!-- /tests:collapsible --> |
 | **Menu** | Dropdown menus, menubars, and submenus | <!-- tests:menu -->179<!-- /tests:menu --> |
+| **Popover** | Floating panels anchored to a trigger | <!-- tests:popover -->29<!-- /tests:popover --> |
 | **Tabs** | Switch between multiple content panels | <!-- tests:tabs -->70<!-- /tests:tabs --> |
+| **Tooltip** | Non-interactive description on hover or focus | <!-- tests:tooltip -->24<!-- /tests:tooltip --> |
 
 ## How it works
 

package/dist/index.d.ts

@@ -10,9 +10,11 @@ declare enum Prefix {
     TriggerCollapsible = "mct:c",
     TriggerMenu = "mct:m",
     TriggerPopover = "mct:p",
-    TriggerTabs = "mct:t",
+    TriggerTabs = "mct:ta",
+    TriggerTooltip = "mct:to",
     Content = "mcc:",
     ContentMenu = "mcc:m",
     ContentPopover = "mcc:p",
+    ContentTooltip = "mcc:to",
     RootAccordion = "mcr:a"
 }

package/dist/index.js

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

package/dist/react/index.d.ts

@@ -3,3 +3,4 @@ export { Collapsible } from "./collapsible.js";
 export { Menu } from "./menu.js";
 export { Popover } from "./popover.js";
 export { Tabs } from "./tabs.js";
+export { Tooltip } from "./tooltip.js";

package/dist/react/index.js

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

package/dist/react/tooltip.d.ts

@@ -0,0 +1,11 @@
+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;
+export declare const Tooltip: {
+    Root: typeof Root;
+    Trigger: typeof Trigger;
+    Content: typeof Content;
+};
+export {};

package/dist/vue/index.d.ts

@@ -3,3 +3,4 @@ export { Collapsible } from "./collapsible.js";
 export { Menu } from "./menu.js";
 export { Popover } from "./popover.js";
 export { Tabs } from "./tabs.js";
+export { Tooltip } from "./tooltip.js";

package/dist/vue/index.js

@@ -1 +1 @@
-import{defineComponent as P,h as J,provide as C,reactive as q,toRef as T,useId as V}from"vue";import{h as H,inject as j}from"vue";function $(y,w){let b=j(y);if(!b)throw Error(`${w} must be used within its parent provider`);return b}var B=(y,w)=>w?`${y}:${w}`:y,N=()=>H("script",{innerHTML:"document.currentScript.parentNode.setAttribute('hidden','until-found')"}),S=Symbol("CollapsibleContext"),W=Symbol("AccordionContext"),O=Symbol("TabsContext"),D=Symbol("MenuContext"),G=Symbol("MenuPopupContext"),X=Symbol("PopoverContext");var R=P({props:{type:{type:String,default:"single"}},setup(y,{slots:w}){let b=V();return()=>J("div",{"data-mode":y.type,id:`mcr:accordion:${b}`},w.default?.())}}),v=P({props:{open:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},setup(y,{slots:w}){let b=V();return C(W,q({baseId:b,open:T(y,"open"),disabled:T(y,"disabled")})),()=>J("div",null,w.default?.())}}),m=P({props:{as:{type:String,default:"h3"}},setup(y,{slots:w}){return()=>J(y.as,null,w.default?.())}}),f=P({setup(y,{slots:w}){let b=$(W,"Accordion.Trigger/Panel");return()=>J("button",{type:"button",id:`mct:accordion:${b.baseId}`,"aria-expanded":b.open,"aria-controls":`mcc:accordion:${b.baseId}`,"aria-disabled":b.disabled||void 0},w.default?.())}}),a=P({setup(y,{slots:w}){let b=$(W,"Accordion.Trigger/Panel");return()=>J("div",{id:`mcc:accordion:${b.baseId}`,role:"region","aria-labelledby":`mct:accordion:${b.baseId}`,"aria-hidden":!b.open,hidden:b.open?void 0:!0},[!b.open&&J(N),w.default?.()])}}),I={Root:R,Item:v,Header:m,Trigger:f,Panel:a};import{defineComponent as A,h as Y,provide as u,reactive as h,toRef as n,useId as c}from"vue";var i=A({props:{open:{type:Boolean,default:!1}},setup(y,{slots:w}){let b=c();return u(S,h({baseId:b,open:n(y,"open")})),()=>Y("div",null,w.default?.())}}),l=A({setup(y,{slots:w}){let b=$(S,"Collapsible.Trigger/Panel");return()=>Y("button",{type:"button",id:`mct:collapsible:${b.baseId}`,"aria-expanded":b.open,"aria-controls":`mcc:collapsible:${b.baseId}`},w.default?.())}}),d=A({setup(y,{slots:w}){let b=$(S,"Collapsible.Trigger/Panel");return()=>Y("div",{id:`mcc:collapsible:${b.baseId}`,"aria-labelledby":`mct:collapsible:${b.baseId}`,"aria-hidden":!b.open,hidden:b.open?void 0:!0},[!b.open&&Y(N),w.default?.()])}}),r={Root:i,Trigger:l,Panel:d};import{defineComponent as E,h as M,onBeforeUpdate as t,provide as F,reactive as p,ref as o,toRef as e,useId as k}from"vue";var s=E({props:{menubar:Boolean},setup(y,{slots:w}){let b=k();return F(D,p({id:b,root:!0,menubar:e(y,"menubar")})),()=>M("div",{id:`mcr:menu:${b}`},w.default?.())}}),bb=E({setup(y,{slots:w}){let b=$(D,"Menu.Trigger");return()=>M("button",{type:"button",id:`mct:menu:${b.id}`,"aria-controls":`mcc:menu:${b.id}`,"aria-expanded":"false","aria-haspopup":"menu",tabindex:b.root||b.first?0:-1,role:b.submenu?"menuitem":"button"},w.default?.())}}),yb=E({setup(y,{slots:w}){let b=$(D,"Menu.Popover"),x=o(!1);return t(()=>{x.value=!1}),F(G,{claimFirst:()=>{if(!x.value)return x.value=!0,!0;return!1}}),()=>b.menubar?M("ul",{role:"menubar"},w.default?.()):M("ul",{role:"menu",id:`mcc:menu:${b.id}`,"aria-labelledby":`mct:menu:${b.id}`,"aria-hidden":"true",popover:"manual"},w.default?.())}}),wb=E({inheritAttrs:!1,props:{disabled:Boolean,href:String},setup(y,{slots:w,attrs:b}){return()=>{let x=y.disabled?M("span",{...b,role:"menuitem","aria-disabled":"true",tabindex:-1},w.default?.()):y.href?M("a",{...b,role:"menuitem",href:y.href,tabindex:-1},w.default?.()):M("button",{...b,type:"button",role:"menuitem",tabindex:-1},w.default?.());return M("li",{role:"none"},[x])}}}),$b=E({inheritAttrs:!1,props:{checked:{type:Boolean,default:!1},disabled:Boolean},setup(y,{slots:w,attrs:b}){return()=>{let x=y.disabled?M("span",{...b,role:"menuitemcheckbox","aria-checked":y.checked,"aria-disabled":"true",tabindex:-1},w.default?.()):M("button",{...b,type:"button",role:"menuitemcheckbox","aria-checked":y.checked,tabindex:-1},w.default?.());return M("li",{role:"none"},[x])}}}),Mb=E({inheritAttrs:!1,props:{checked:{type:Boolean,default:!1},disabled:Boolean},setup(y,{slots:w,attrs:b}){return()=>{let x=y.disabled?M("span",{...b,role:"menuitemradio","aria-checked":y.checked,"aria-disabled":"true",tabindex:-1},w.default?.()):M("button",{...b,type:"button",role:"menuitemradio","aria-checked":y.checked,tabindex:-1},w.default?.());return M("li",{role:"none"},[x])}}}),xb=E({setup(y,{slots:w}){return()=>M("li",{role:"presentation"},w.default?.())}}),zb=E({setup(){return()=>M("li",{role:"separator"})}}),Eb=E({setup(y,{slots:w}){let b=$(D,"Menu.Group"),z=$(G,"Menu.Group").claimFirst(),K=k(),L=z&&b.menubar&&!b.submenu;return F(D,{id:K,submenu:!0,first:L}),()=>M("li",{role:"none"},w.default?.())}}),Nb={Root:s,Trigger:bb,Popover:yb,Item:wb,CheckboxItem:$b,RadioItem:Mb,Label:xb,Separator:zb,Group:Eb};import{defineComponent as U,h as g,provide as Db,useId as Jb}from"vue";var Ob=U({setup(y,{slots:w}){let b=Jb();return Db(X,{id:b}),()=>g("div",null,w.default?.())}}),Pb=U({setup(y,{slots:w}){let b=$(X,"Popover.Trigger");return()=>g("button",{type:"button",id:`mct:popover:${b.id}`,"aria-controls":`mcc:popover:${b.id}`,"aria-expanded":"false"},w.default?.())}}),Qb=U({setup(y,{slots:w}){let b=$(X,"Popover.Content");return()=>g("div",{id:`mcc:popover:${b.id}`,"aria-labelledby":`mct:popover:${b.id}`,"aria-hidden":"true",popover:"manual",tabindex:-1},w.default?.())}}),Sb={Root:Ob,Trigger:Pb,Content:Qb};import{computed as Z,defineComponent as _,h as Q,provide as Wb,reactive as Xb,toRef as Yb,useId as Zb}from"vue";var _b=_({props:{defaultValue:{type:String,required:!0},orientation:{type:String,default:"horizontal"}},setup(y,{slots:w}){let b=Zb();return Wb(O,Xb({baseId:b,selected:y.defaultValue,orientation:Yb(y,"orientation")})),()=>Q("div",{"data-orientation":y.orientation,id:`mcr:tabs:${b}`},w.default?.())}}),Bb=_({setup(y,{slots:w}){let b=$(O,"Tabs.List/Tab/Panel");return()=>Q("div",{role:"tablist","aria-orientation":b.orientation},w.default?.())}}),Gb=_({props:{value:{type:String,required:!0},selected:{type:[Boolean,null],default:null},disabled:Boolean},setup(y,{slots:w}){let b=$(O,"Tabs.List/Tab/Panel"),x=Z(()=>B(b.baseId,y.value)),z=Z(()=>y.selected!==null?y.selected:y.value===b.selected);return()=>Q("button",{type:"button",role:"tab",id:`mct:tabs:${x.value}`,"aria-selected":z.value,"aria-controls":`mcc:tabs:${x.value}`,tabindex:z.value?0:-1,"aria-disabled":y.disabled||void 0},w.default?.())}}),Ab=_({props:{value:{type:String,required:!0},selected:{type:[Boolean,null],default:null},focusable:{type:Boolean,default:!0}},setup(y,{slots:w}){let b=$(O,"Tabs.List/Tab/Panel"),x=Z(()=>B(b.baseId,y.value)),z=Z(()=>y.selected!==null?y.selected:y.value===b.selected);return()=>Q("div",{role:"tabpanel",id:`mcc:tabs:${x.value}`,"aria-labelledby":`mct:tabs:${x.value}`,"aria-hidden":!z.value,hidden:z.value?void 0:!0,tabindex:y.focusable?z.value?0:-1:void 0,"data-orientation":b.orientation},[!z.value&&Q(N),w.default?.()])}}),Fb={Root:_b,List:Bb,Tab:Gb,Panel:Ab};export{Fb as Tabs,Sb as Popover,Nb as Menu,r as Collapsible,I as Accordion};
+import{defineComponent as O,h as D,provide as v,reactive as m,toRef as K,useId as L}from"vue";import{h as q,inject as R}from"vue";function w(x,y){let b=R(x);if(!b)throw Error(`${y} must be used within its parent provider`);return b}var G=(x,y)=>y?`${x}:${y}`:x,N=()=>q("script",{innerHTML:"document.currentScript.parentNode.setAttribute('hidden','until-found')"}),Q=Symbol("CollapsibleContext"),W=Symbol("AccordionContext"),J=Symbol("TabsContext"),S=Symbol("MenuContext"),A=Symbol("MenuPopupContext"),X=Symbol("PopoverContext"),Y=Symbol("TooltipContext");var f=O({props:{type:{type:String,default:"single"}},setup(x,{slots:y}){let b=L();return()=>D("div",{"data-mode":x.type,id:`mcr:accordion:${b}`},y.default?.())}}),a=O({props:{open:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},setup(x,{slots:y}){let b=L();return v(W,m({baseId:b,open:K(x,"open"),disabled:K(x,"disabled")})),()=>D("div",null,y.default?.())}}),I=O({props:{as:{type:String,default:"h3"}},setup(x,{slots:y}){return()=>D(x.as,null,y.default?.())}}),h=O({setup(x,{slots:y}){let b=w(W,"Accordion.Trigger/Panel");return()=>D("button",{type:"button",id:`mct:accordion:${b.baseId}`,"aria-expanded":b.open,"aria-controls":`mcc:accordion:${b.baseId}`,"aria-disabled":b.disabled||void 0},y.default?.())}}),u=O({setup(x,{slots:y}){let b=w(W,"Accordion.Trigger/Panel");return()=>D("div",{id:`mcc:accordion:${b.baseId}`,role:"region","aria-labelledby":`mct:accordion:${b.baseId}`,"aria-hidden":!b.open,hidden:b.open?void 0:!0},[!b.open&&D(N),y.default?.()])}}),n={Root:f,Item:a,Header:I,Trigger:h,Panel:u};import{defineComponent as F,h as Z,provide as c,reactive as i,toRef as l,useId as d}from"vue";var r=F({props:{open:{type:Boolean,default:!1}},setup(x,{slots:y}){let b=d();return c(Q,i({baseId:b,open:l(x,"open")})),()=>Z("div",null,y.default?.())}}),t=F({setup(x,{slots:y}){let b=w(Q,"Collapsible.Trigger/Panel");return()=>Z("button",{type:"button",id:`mct:collapsible:${b.baseId}`,"aria-expanded":b.open,"aria-controls":`mcc:collapsible:${b.baseId}`},y.default?.())}}),p=F({setup(x,{slots:y}){let b=w(Q,"Collapsible.Trigger/Panel");return()=>Z("div",{id:`mcc:collapsible:${b.baseId}`,"aria-labelledby":`mct:collapsible:${b.baseId}`,"aria-hidden":!b.open,hidden:b.open?void 0:!0},[!b.open&&Z(N),y.default?.()])}}),o={Root:r,Trigger:t,Panel:p};import{defineComponent as E,h as $,onBeforeUpdate as e,provide as U,reactive as s,ref as bb,toRef as yb,useId as H}from"vue";var xb=E({props:{menubar:Boolean},setup(x,{slots:y}){let b=H();return U(S,s({id:b,root:!0,menubar:yb(x,"menubar")})),()=>$("div",{id:`mcr:menu:${b}`},y.default?.())}}),wb=E({setup(x,{slots:y}){let b=w(S,"Menu.Trigger");return()=>$("button",{type:"button",id:`mct:menu:${b.id}`,"aria-controls":`mcc:menu:${b.id}`,"aria-expanded":"false","aria-haspopup":"menu",tabindex:b.root||b.first?0:-1,role:b.submenu?"menuitem":"button"},y.default?.())}}),$b=E({setup(x,{slots:y}){let b=w(S,"Menu.Popover"),M=bb(!1);return e(()=>{M.value=!1}),U(A,{claimFirst:()=>{if(!M.value)return M.value=!0,!0;return!1}}),()=>b.menubar?$("ul",{role:"menubar"},y.default?.()):$("ul",{role:"menu",id:`mcc:menu:${b.id}`,"aria-labelledby":`mct:menu:${b.id}`,"aria-hidden":"true",popover:"manual"},y.default?.())}}),Mb=E({inheritAttrs:!1,props:{disabled:Boolean,href:String},setup(x,{slots:y,attrs:b}){return()=>{let M=x.disabled?$("span",{...b,role:"menuitem","aria-disabled":"true",tabindex:-1},y.default?.()):x.href?$("a",{...b,role:"menuitem",href:x.href,tabindex:-1},y.default?.()):$("button",{...b,type:"button",role:"menuitem",tabindex:-1},y.default?.());return $("li",{role:"none"},[M])}}}),zb=E({inheritAttrs:!1,props:{checked:{type:Boolean,default:!1},disabled:Boolean},setup(x,{slots:y,attrs:b}){return()=>{let M=x.disabled?$("span",{...b,role:"menuitemcheckbox","aria-checked":x.checked,"aria-disabled":"true",tabindex:-1},y.default?.()):$("button",{...b,type:"button",role:"menuitemcheckbox","aria-checked":x.checked,tabindex:-1},y.default?.());return $("li",{role:"none"},[M])}}}),Eb=E({inheritAttrs:!1,props:{checked:{type:Boolean,default:!1},disabled:Boolean},setup(x,{slots:y,attrs:b}){return()=>{let M=x.disabled?$("span",{...b,role:"menuitemradio","aria-checked":x.checked,"aria-disabled":"true",tabindex:-1},y.default?.()):$("button",{...b,type:"button",role:"menuitemradio","aria-checked":x.checked,tabindex:-1},y.default?.());return $("li",{role:"none"},[M])}}}),Nb=E({setup(x,{slots:y}){return()=>$("li",{role:"presentation"},y.default?.())}}),Sb=E({setup(){return()=>$("li",{role:"separator"})}}),Db=E({setup(x,{slots:y}){let b=w(S,"Menu.Group"),z=w(A,"Menu.Group").claimFirst(),C=H(),j=z&&b.menubar&&!b.submenu;return U(S,{id:C,submenu:!0,first:j}),()=>$("li",{role:"none"},y.default?.())}}),Jb={Root:xb,Trigger:wb,Popover:$b,Item:Mb,CheckboxItem:zb,RadioItem:Eb,Label:Nb,Separator:Sb,Group:Db};import{defineComponent as T,h as g,provide as Ob,useId as Pb}from"vue";var Qb=T({setup(x,{slots:y}){let b=Pb();return Ob(X,{id:b}),()=>g("div",null,y.default?.())}}),Wb=T({setup(x,{slots:y}){let b=w(X,"Popover.Trigger");return()=>g("button",{type:"button",id:`mct:popover:${b.id}`,"aria-controls":`mcc:popover:${b.id}`,"aria-expanded":"false"},y.default?.())}}),Xb=T({setup(x,{slots:y}){let b=w(X,"Popover.Content");return()=>g("div",{id:`mcc:popover:${b.id}`,"aria-labelledby":`mct:popover:${b.id}`,"aria-hidden":"true",popover:"manual",tabindex:-1},y.default?.())}}),Yb={Root:Qb,Trigger:Wb,Content:Xb};import{computed as _,defineComponent as B,h as P,provide as Zb,reactive as _b,toRef as Bb,useId as Gb}from"vue";var Ab=B({props:{defaultValue:{type:String,required:!0},orientation:{type:String,default:"horizontal"}},setup(x,{slots:y}){let b=Gb();return Zb(J,_b({baseId:b,selected:x.defaultValue,orientation:Bb(x,"orientation")})),()=>P("div",{"data-orientation":x.orientation,id:`mcr:tabs:${b}`},y.default?.())}}),Fb=B({setup(x,{slots:y}){let b=w(J,"Tabs.List/Tab/Panel");return()=>P("div",{role:"tablist","aria-orientation":b.orientation},y.default?.())}}),Ub=B({props:{value:{type:String,required:!0},selected:{type:[Boolean,null],default:null},disabled:Boolean},setup(x,{slots:y}){let b=w(J,"Tabs.List/Tab/Panel"),M=_(()=>G(b.baseId,x.value)),z=_(()=>x.selected!==null?x.selected:x.value===b.selected);return()=>P("button",{type:"button",role:"tab",id:`mct:tabs:${M.value}`,"aria-selected":z.value,"aria-controls":`mcc:tabs:${M.value}`,tabindex:z.value?0:-1,"aria-disabled":x.disabled||void 0},y.default?.())}}),Tb=B({props:{value:{type:String,required:!0},selected:{type:[Boolean,null],default:null},focusable:{type:Boolean,default:!0}},setup(x,{slots:y}){let b=w(J,"Tabs.List/Tab/Panel"),M=_(()=>G(b.baseId,x.value)),z=_(()=>x.selected!==null?x.selected:x.value===b.selected);return()=>P("div",{role:"tabpanel",id:`mcc:tabs:${M.value}`,"aria-labelledby":`mct:tabs:${M.value}`,"aria-hidden":!z.value,hidden:z.value?void 0:!0,tabindex:x.focusable?z.value?0:-1:void 0,"data-orientation":b.orientation},[!z.value&&P(N),y.default?.()])}}),gb={Root:Ab,List:Fb,Tab:Ub,Panel:Tb};import{defineComponent as V,h as k,provide as Vb,useId as kb}from"vue";var Kb=V({setup(x,{slots:y}){let b=kb();return Vb(Y,{id:b}),()=>k("div",null,y.default?.())}}),Lb=V({setup(x,{slots:y}){let b=w(Y,"Tooltip.Trigger");return()=>k("button",{type:"button",id:`mct:tooltip:${b.id}`,"aria-describedby":`mcc:tooltip:${b.id}`},y.default?.())}}),Hb=V({setup(x,{slots:y}){let b=w(Y,"Tooltip.Content");return()=>k("div",{id:`mcc:tooltip:${b.id}`,role:"tooltip",popover:"manual"},y.default?.())}}),Cb={Root:Kb,Trigger:Lb,Content:Hb};export{Cb as Tooltip,gb as Tabs,Yb as Popover,Jb as Menu,o as Collapsible,n as Accordion};

package/dist/vue/shared.d.ts

@@ -37,3 +37,7 @@ export type PopoverContext = {
     id: string;
 };
 export declare const PopoverKey: InjectionKey<PopoverContext>;
+export type TooltipContext = {
+    id: string;
+};
+export declare const TooltipKey: InjectionKey<TooltipContext>;

package/dist/vue/tooltip.d.ts

@@ -0,0 +1,11 @@
+export declare const Tooltip: {
+    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>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monochrome",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Accessible UI component library. Best-in-class performance. HTML-first, React and Vue supported.",
   "author": "Colin van Eenige",
   "license": "MIT",
@@ -96,14 +96,15 @@
     "vue": "3.5.29"
   },
   "versionMeta": {
-    "gzipSize": 2436,
+    "gzipSize": 2640,
     "routerGzipSize": 1052,
     "tests": {
-      "total": 414,
+      "total": 438,
       "collapsible": 42,
       "router": 28,
       "accordion": 66,
       "menu": 179,
+      "tooltip": 24,
       "tabs": 70,
       "popover": 29
     }