monochrome 0.4.0 → 0.5.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.2kB-brightgreen) ![tests](https://img.shields.io/badge/tests-385_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.3kB-brightgreen) ![tests](https://img.shields.io/badge/tests-389_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,13 +50,13 @@ The Vue API is identical: `import { Accordion } from "monochrome/vue"`. Monochro
 
 ## Components
 
-Four interactive UI patterns in <!-- size -->2.2kB<!-- /size -->:
+Four interactive UI patterns in <!-- size -->2.3kB<!-- /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 --> |
+| **Menu** | Dropdown menus, menubars, and submenus | <!-- tests:menu -->183<!-- /tests:menu --> |
 | **Tabs** | Switch between multiple content panels | <!-- tests:tabs -->70<!-- /tests:tabs --> |
 
 ## How it works

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monochrome",
-  "version": "0.4.0",
+  "version": "0.5.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,14 @@
     "vue": "3.5.29"
   },
   "versionMeta": {
-    "gzipSize": 2236,
+    "gzipSize": 2305,
     "routerGzipSize": 1052,
     "tests": {
-      "total": 385,
+      "total": 389,
       "collapsible": 42,
       "router": 28,
       "accordion": 66,
-      "menu": 179,
+      "menu": 183,
       "tabs": 70
     }
   }