monochrome 0.1.0 → 0.2.0

package/README.md

@@ -2,7 +2,9 @@
 
 Accessible UI component library. Best-in-class performance. HTML-first, React supported.
 
-<!-- badges -->![gzip](https://img.shields.io/badge/gzip-2.2kB-brightgreen) ![tests](https://img.shields.io/badge/tests-350_passing-brightgreen) ![WCAG](https://img.shields.io/badge/WCAG_2.2-AA-blue) ![license](https://img.shields.io/badge/license-MIT-blue)<!-- /badges -->
+<!-- badges -->
+![gzip](https://img.shields.io/badge/gzip-2.2kB-brightgreen) ![tests](https://img.shields.io/badge/tests-350_passing-brightgreen) ![WCAG](https://img.shields.io/badge/WCAG_2.2-AA-blue) ![license](https://img.shields.io/badge/license-MIT-blue)
+<!-- /badges -->
 
 ## Install
 

package/dist/react/index.js

@@ -0,0 +1,2 @@
+"use client";
+import{createContext as Y,useContext as Z,useId as N}from"react";import{jsx as X}from"react/jsx-runtime";var m=(a,t)=>t?`${a}:${t}`:a,i=()=>X("script",{dangerouslySetInnerHTML:{__html:"document.currentScript.parentNode.setAttribute('hidden','until-found')"}});import{jsx as w,jsxs as A}from"react/jsx-runtime";var E=Y(null);function _(){let a=Z(E);if(!a)throw Error("Accordion components must be used within Accordion.Item");return a}function G({children:a,type:t,...b}){let f=N();return w("div",{...b,"data-mode":t??"single",id:`mcr:accordion:${f}`,children:a})}function F({children:a,open:t,disabled:b,...f}){let v=N();return w(E.Provider,{value:{baseId:v,open:t??!1,disabled:b??!1},children:w("div",{...f,children:a})})}function W({children:a,as:t,...b}){return w(t??"h3",{...b,children:a})}function R({children:a,...t}){let b=_(),f=b.baseId,v=b.open;return w("button",{...t,type:"button",id:`mct:accordion:${f}`,"aria-expanded":v,"aria-controls":`mcc:accordion:${f}`,"aria-disabled":b.disabled||void 0,children:a})}function M({children:a,...t}){let b=_(),f=b.baseId,v=b.open;return A("div",{...t,id:`mcc:accordion:${f}`,role:"region","aria-labelledby":`mct:accordion:${f}`,"aria-hidden":!v,hidden:v?void 0:!0,children:[!v&&w(i,{}),a]})}var k={Root:G,Item:F,Header:W,Trigger:R,Panel:M};import{createContext as O,useContext as n,useId as I}from"react";import{jsx as g,jsxs as r}from"react/jsx-runtime";var D=O(null);function P(){let a=n(D);if(!a)throw Error("Collapsible components must be used within Collapsible.Root");return a}function o({children:a,open:t,...b}){let f=I();return g(D.Provider,{value:{baseId:f,open:t??!1},children:g("div",{...b,children:a})})}function l({children:a,...t}){let b=P(),f=b.baseId,v=b.open;return g("button",{...t,type:"button",id:`mct:collapsible:${f}`,"aria-expanded":v,"aria-controls":`mcc:collapsible:${f}`,children:a})}function C({children:a,...t}){let b=P(),f=b.baseId,v=b.open;return r("div",{...t,id:`mcc:collapsible:${f}`,"aria-labelledby":`mct:collapsible:${f}`,"aria-hidden":!v,hidden:v?void 0:!0,children:[!v&&g(i,{}),a]})}var d={Root:o,Trigger:l,Panel:C};import{createContext as q,useContext as J,useId as K,useRef as h}from"react";import{jsx as u}from"react/jsx-runtime";var H=q(null),Q=q(null);function L(){let a=J(H);if(!a)throw Error("Menu components must be used within Menu.Root");return a}function j(){let a=J(Q);if(!a)throw Error("Menu components must be used within Menu.Popover");return a}function c({children:a,menubar:t,...b}){let f=K();return u(H.Provider,{value:{id:f,root:!0,menubar:t},children:u("div",{...b,id:`mcr:menu:${f}`,children:a})})}function s({children:a,...t}){let b=L();return u("button",{...t,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",children:a})}function e({children:a,...t}){let b=L(),f=h(!1);f.current=!1;let v=u(Q.Provider,{value:{claimFirst:()=>{if(!f.current)return f.current=!0,!0;return!1}},children:a});return b.menubar?u("ul",{...t,role:"menubar",children:v}):u("ul",{...t,role:"menu",id:`mcc:menu:${b.id}`,"aria-labelledby":`mct:menu:${b.id}`,"aria-hidden":"true",popover:"manual",children:v})}function x({children:a,disabled:t,href:b,...f}){return u("li",{role:"none",children:t?u("span",{...f,role:"menuitem","aria-disabled":"true",tabIndex:-1,children:a}):b?u("a",{...f,role:"menuitem",href:b,tabIndex:-1,children:a}):u("button",{...f,type:"button",role:"menuitem",tabIndex:-1,children:a})})}function p({children:a,checked:t,disabled:b,...f}){return u("li",{role:"none",children:b?u("span",{...f,role:"menuitemcheckbox","aria-checked":t??!1,"aria-disabled":"true",tabIndex:-1,children:a}):u("button",{...f,type:"button",role:"menuitemcheckbox","aria-checked":t??!1,tabIndex:-1,children:a})})}function aa({children:a,checked:t,disabled:b,...f}){return u("li",{role:"none",children:b?u("span",{...f,role:"menuitemradio","aria-checked":t??!1,"aria-disabled":"true",tabIndex:-1,children:a}):u("button",{...f,type:"button",role:"menuitemradio","aria-checked":t??!1,tabIndex:-1,children:a})})}function ta({children:a,...t}){return u("li",{...t,role:"presentation",children:a})}function ba(a){return u("li",{...a,role:"separator"})}function fa({children:a,...t}){let b=L(),v=j().claimFirst(),T=K(),y=v&&b.menubar&&!b.submenu;return u(H.Provider,{value:{id:T,submenu:!0,first:y},children:u("li",{...t,role:"none",children:a})})}var va={Root:c,Trigger:s,Popover:e,Item:x,CheckboxItem:p,RadioItem:aa,Label:ta,Separator:ba,Group:fa};import{createContext as ua,isValidElement as Ta,useContext as ya,useId as $a}from"react";import{jsx as V,jsxs as ma}from"react/jsx-runtime";var U=ua(null);function z(){let a=ya(U);if(!a)throw Error("Tabs components must be used within Tabs.Root");return a}function S(a){if(!a||typeof a!=="object")return;if(Ta(a)){let t=a.props;if(t.value!==void 0)return t.value;return S(t.children)}if(Array.isArray(a))for(let t of a){let b=S(t);if(b!==void 0)return b}}function ia({children:a,defaultValue:t,orientation:b,...f}){let v=$a(),T=b??"horizontal";return V(U.Provider,{value:{baseId:v,selected:t??S(a),orientation:T},children:V("div",{...f,"data-orientation":T,id:`mcr:tabs:${v}`,children:a})})}function wa({children:a,...t}){let b=z();return V("div",{...t,role:"tablist","aria-orientation":b.orientation,children:a})}function Ba({children:a,value:t,id:b,selected:f,disabled:v,...T}){let y=z(),B=m(y.baseId,b??t),$=f??t===y.selected;return V("button",{...T,type:"button",role:"tab",id:`mct:tabs:${B}`,"aria-selected":$,"aria-controls":`mcc:tabs:${B}`,tabIndex:$?0:-1,"aria-disabled":v||void 0,children:a})}function Va({children:a,value:t,id:b,selected:f,focusable:v=!0,...T}){let y=z(),B=m(y.baseId,b??t),$=f??t===y.selected;return ma("div",{...T,role:"tabpanel",id:`mcc:tabs:${B}`,"aria-labelledby":`mct:tabs:${B}`,"aria-hidden":!$,hidden:$?void 0:!0,tabIndex:v?$?0:-1:void 0,"data-orientation":y.orientation,children:[!$&&V(i,{}),a]})}var ga={Root:ia,List:wa,Tab:Ba,Panel:Va};export{ga as Tabs,va as Menu,d as Collapsible,k as Accordion};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monochrome",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Accessible UI component library. Best-in-class performance. HTML-first, React supported.",
   "author": "Colin van Eenige",
   "license": "MIT",
@@ -10,9 +10,33 @@
   },
   "homepage": "https://github.com/vaneenige/monochrome-ui#readme",
   "bugs": "https://github.com/vaneenige/monochrome-ui/issues",
-  "keywords": ["accessible", "a11y", "aria", "wai-aria", "ui", "component", "components", "component-library", "library", "headless", "unstyled", "lightweight", "keyboard-navigation", "html", "react", "typescript", "accordion", "collapsible", "menu", "tabs"],
+  "keywords": [
+    "accessible",
+    "a11y",
+    "aria",
+    "wai-aria",
+    "ui",
+    "component",
+    "components",
+    "component-library",
+    "library",
+    "headless",
+    "unstyled",
+    "lightweight",
+    "keyboard-navigation",
+    "html",
+    "react",
+    "typescript",
+    "accordion",
+    "collapsible",
+    "menu",
+    "tabs"
+  ],
   "type": "module",
-  "sideEffects": ["./dist/index.js", "./src/index.ts"],
+  "sideEffects": [
+    "./dist/index.js",
+    "./src/index.ts"
+  ],
   "exports": {
     ".": {
       "types": "./src/index.ts",
@@ -21,17 +45,22 @@
     "./src": "./src/index.ts",
     "./react": {
       "types": "./src/react/index.ts",
-      "default": "./src/react/index.ts"
+      "default": "./dist/react/index.js"
     }
   },
   "typesVersions": {
     "*": {
-      "react": ["./src/react/index.ts"]
+      "react": [
+        "./src/react/index.ts"
+      ]
     }
   },
-  "files": ["dist", "src"],
+  "files": [
+    "dist",
+    "src"
+  ],
   "scripts": {
-    "build": "bun build.ts",
+    "build": "NODE_ENV=production bun build.ts",
     "test": "playwright test",
     "lint": "biome check src tests",
     "lint:fix": "biome check --write src tests",
@@ -58,5 +87,15 @@
     "@types/react-dom": "19.2.3",
     "react": "19.2.4",
     "react-dom": "19.2.4"
+  },
+  "versionMeta": {
+    "gzipSize": 2219,
+    "tests": {
+      "total": 350,
+      "collapsible": 41,
+      "accordion": 65,
+      "menu": 175,
+      "tabs": 69
+    }
   }
 }

package/dist/client/monochrome.js

@@ -1,498 +0,0 @@
-// src/index.ts
-if (typeof document !== "undefined") {
-  let shouldPreventDefault = null;
-  let shouldMatchLetter = null;
-  let shouldResetRadio = null;
-  let radioHeadDone = null;
-  let radioTailChain = [];
-  const menuPopovers = [];
-  let rovingBoundary = null;
-  let safeGroup = null;
-  let safeRect = null;
-  let safeDir = 0;
-  const isElement = (el) => el instanceof HTMLElement;
-  const isTrigger = (el, prefix) => el instanceof HTMLButtonElement && (!prefix || el.id.startsWith(prefix));
-  const isMenuItem = (el) => isElement(el) && el.role?.startsWith("menuitem") === true && el.ariaDisabled !== "true";
-  const getContent = (el) => document.getElementById(el.getAttribute("aria-controls") || "");
-  const findAncestor = (el, prefix) => {
-    while (el) {
-      if (el.id.startsWith(prefix))
-        return el;
-      el = el.parentElement;
-    }
-    return null;
-  };
-  const roving = (focus) => {
-    const next = (origin) => origin ? focus(origin.nextElementSibling || origin.parentElement?.firstElementChild, next) : null;
-    const previous = (origin) => origin ? focus(origin.previousElementSibling || origin.parentElement?.lastElementChild, previous) : null;
-    return [next, previous];
-  };
-  const menuRoving = (element, fallback) => {
-    if (isElement(element)) {
-      const menuitem = element.firstElementChild;
-      if (shouldResetRadio) {
-        if (isElement(menuitem)) {
-          if (menuitem === shouldResetRadio) {
-            for (const item of radioTailChain)
-              item.ariaChecked = "false";
-            return menuitem;
-          }
-          if (menuitem.role === "menuitemradio") {
-            if (!radioHeadDone) {
-              menuitem.ariaChecked = "false";
-            } else {
-              radioTailChain.push(menuitem);
-            }
-            return fallback(element);
-          }
-        }
-        radioHeadDone = true;
-        radioTailChain = [];
-        return fallback(element);
-      }
-      if (isMenuItem(menuitem) && (!shouldMatchLetter || menuitem.textContent?.toLowerCase().startsWith(shouldMatchLetter))) {
-        menuitem.focus();
-        shouldPreventDefault = true;
-        return menuitem;
-      } else if (rovingBoundary !== element) {
-        if (!rovingBoundary)
-          rovingBoundary = element;
-        return fallback(element);
-      } else {
-        rovingBoundary = null;
-      }
-    }
-    return null;
-  };
-  const accordionRoving = (node, fallback) => {
-    if (isElement(node)) {
-      if (rovingBoundary === node)
-        return null;
-      if (!rovingBoundary)
-        rovingBoundary = node;
-      const trigger = node.firstElementChild?.firstElementChild;
-      if (isTrigger(trigger, "mct:a" /* TriggerAccordion */)) {
-        if (trigger.ariaDisabled === "true")
-          return fallback(node);
-        shouldPreventDefault = true;
-        trigger.focus();
-        return trigger;
-      }
-    }
-    return fallback(node);
-  };
-  const tabsRoving = (node, fallback) => {
-    if (isTrigger(node, "mct:t" /* TriggerTabs */)) {
-      if (rovingBoundary === node)
-        return null;
-      if (!rovingBoundary)
-        rovingBoundary = node;
-      if (node.ariaDisabled === "true")
-        return fallback(node);
-      shouldPreventDefault = true;
-      node.focus();
-      return node;
-    } else {
-      return fallback(node);
-    }
-  };
-  const [menuNext, menuPrevious] = roving(menuRoving);
-  const [accordionNext, accordionPrevious] = roving(accordionRoving);
-  const [tabNext, tabPrevious] = roving(tabsRoving);
-  const collapsible = (trigger) => {
-    const content = getContent(trigger);
-    if (content) {
-      const isOpen = trigger.ariaExpanded !== "true";
-      trigger.ariaExpanded = isOpen ? "true" : "false";
-      content.ariaHidden = isOpen ? "false" : "true";
-      isOpen ? content.removeAttribute("hidden") : content.setAttribute("hidden", "until-found");
-    }
-  };
-  const accordion = (trigger) => {
-    if (trigger.ariaDisabled === "true")
-      return;
-    if (trigger.ariaExpanded === "true") {
-      collapsible(trigger);
-    } else {
-      const root = findAncestor(trigger, "mcr:a" /* RootAccordion */);
-      if (!root || root.getAttribute("data-mode") !== "single") {
-        collapsible(trigger);
-      } else {
-        let item = root.firstElementChild;
-        while (item) {
-          const itemTrigger = item.firstElementChild?.firstElementChild;
-          if (isElement(itemTrigger) && (itemTrigger === trigger || itemTrigger.ariaExpanded === "true")) {
-            collapsible(itemTrigger);
-          }
-          item = item.nextElementSibling;
-        }
-      }
-    }
-  };
-  const tabs = (trigger) => {
-    if (trigger.ariaDisabled !== "true" && trigger.ariaSelected !== "true") {
-      let tab = trigger.parentElement?.firstElementChild;
-      while (isElement(tab)) {
-        if (tab === trigger || tab.ariaSelected === "true") {
-          const content = getContent(tab);
-          if (content) {
-            const isSelected = tab.ariaSelected !== "true";
-            tab.ariaSelected = isSelected ? "true" : "false";
-            tab.tabIndex = isSelected ? 0 : -1;
-            content.ariaHidden = isSelected ? "false" : "true";
-            if (content.hasAttribute("tabindex"))
-              content.tabIndex = isSelected ? 0 : -1;
-            isSelected ? content.removeAttribute("hidden") : content.setAttribute("hidden", "until-found");
-          }
-        }
-        tab = tab.nextElementSibling;
-      }
-    }
-  };
-  const menu = (trigger, mode = 0 /* Trigger */) => {
-    if (trigger?.id.startsWith("mct:m" /* TriggerMenu */)) {
-      const content = getContent(trigger);
-      if (content) {
-        if (trigger.ariaExpanded === "true") {
-          if (safeGroup)
-            safeGroup.removeAttribute("data-safe");
-          safeGroup = null;
-          if (mode !== 3 /* None */)
-            trigger.focus();
-          content.hidePopover();
-          trigger.ariaExpanded = "false";
-          content.ariaHidden = "true";
-        } else {
-          menuPopovers.push(trigger);
-          content.showPopover();
-          trigger.ariaExpanded = "true";
-          content.ariaHidden = "false";
-          const rect = trigger.getBoundingClientRect();
-          content.style.setProperty("--top", `${rect.top}px`);
-          content.style.setProperty("--right", `${rect.right}px`);
-          content.style.setProperty("--bottom", `${rect.bottom}px`);
-          content.style.setProperty("--left", `${rect.left}px`);
-          const group = trigger.parentElement;
-          if (group) {
-            const cr = content.getBoundingClientRect();
-            const right = cr.left > rect.right;
-            const sx = right ? cr.left : cr.right;
-            safeGroup = group;
-            safeRect = rect;
-            safeDir = right ? -4 : 4;
-            group.style.setProperty("--right", `${sx}px`);
-            group.style.setProperty("--top", `${cr.top}px`);
-            group.style.setProperty("--bottom", `${cr.bottom}px`);
-          }
-          if (mode === 0 /* Trigger */) {
-            trigger.focus();
-          } else if (mode === 1 /* First */) {
-            menuRoving(content.firstElementChild, menuNext);
-          } else if (mode === 2 /* Last */) {
-            menuRoving(content.lastElementChild, menuPrevious);
-          }
-        }
-      }
-    }
-  };
-  const menuHideAll = (keep = 0) => {
-    while (menuPopovers[keep])
-      menu(menuPopovers.pop(), 3 /* None */);
-  };
-  const menuItemAction = (el) => {
-    if (el.role === "menuitemcheckbox") {
-      el.ariaChecked = el.ariaChecked === "true" ? "false" : "true";
-    } else if (el.role === "menuitemradio") {
-      shouldResetRadio = el;
-      radioHeadDone = null;
-      radioTailChain = [];
-      menuNext(el.parentElement);
-      shouldResetRadio = null;
-      el.ariaChecked = "true";
-    } else {
-      menuHideAll();
-    }
-  };
-  addEventListener("click", (event) => {
-    shouldPreventDefault = null;
-    const keyboard = event.detail === 0;
-    const start = isElement(event.target) ? event.target : event.target instanceof Element ? event.target.parentElement : null;
-    if (start) {
-      let target = start;
-      while (target) {
-        const id = target.id;
-        if (id.startsWith("mct:" /* Trigger */)) {
-          if (id.startsWith("mct:m" /* TriggerMenu */)) {
-            const focusMode = keyboard ? 1 /* First */ : 3 /* None */;
-            const inPopover = findAncestor(target.parentElement, "mcc:m" /* ContentMenu */);
-            if (inPopover) {
-              if (!menuPopovers.includes(target))
-                menu(target, focusMode);
-            } else {
-              if (menuPopovers[0]) {
-                const openTarget = target !== menuPopovers[0];
-                menuHideAll();
-                if (openTarget)
-                  menu(target, focusMode);
-              } else {
-                menu(target, focusMode);
-              }
-            }
-          } else {
-            if (menuPopovers[0])
-              menuHideAll();
-            if (id.startsWith("mct:a" /* TriggerAccordion */))
-              accordion(target);
-            else if (id.startsWith("mct:c" /* TriggerCollapsible */))
-              collapsible(target);
-            else if (id.startsWith("mct:t" /* TriggerTabs */))
-              tabs(target);
-          }
-          break;
-        } else if (id.startsWith("mcc:m" /* ContentMenu */) && menuPopovers[0]) {
-          let el = start;
-          while (el && el !== target) {
-            if (isMenuItem(el) && !isTrigger(el, "mct:m" /* TriggerMenu */)) {
-              menuItemAction(el);
-              break;
-            }
-            el = el.parentElement;
-          }
-          break;
-        }
-        target = target.parentElement;
-      }
-      if (!target && menuPopovers[0])
-        menuHideAll();
-    }
-    if (shouldPreventDefault)
-      event.preventDefault();
-  });
-  addEventListener("pointermove", (event) => {
-    if (event.pointerType === "touch")
-      return;
-    if (menuPopovers[0]) {
-      if (menuPopovers[1] && safeGroup && safeRect) {
-        if (event.clientX >= safeRect.left && event.clientX <= safeRect.right && event.clientY >= safeRect.top && event.clientY <= safeRect.bottom) {
-          safeGroup.style.setProperty("--left", `${event.clientX + safeDir}px`);
-          safeGroup.style.setProperty("--center", `${event.clientY}px`);
-          if (!safeGroup.hasAttribute("data-safe"))
-            safeGroup.setAttribute("data-safe", "");
-        } else if (safeGroup.hasAttribute("data-safe") && (event.target !== safeGroup || safeDir * event.movementX > 0)) {
-          safeGroup.removeAttribute("data-safe");
-        }
-      }
-      const el = event.target;
-      if (isElement(el)) {
-        const popoverTriggers = [];
-        let target = el;
-        let bail = false;
-        let foundItem = false;
-        while (target) {
-          if (isMenuItem(target)) {
-            foundItem = true;
-          }
-          if (!foundItem && target.id.startsWith("mcc:" /* Content */)) {
-            bail = true;
-            break;
-          }
-          const firstChild = target.firstElementChild;
-          if (isTrigger(firstChild, "mct:m" /* TriggerMenu */)) {
-            popoverTriggers.unshift(firstChild);
-          }
-          target = target.parentElement;
-        }
-        if (!bail && popoverTriggers[0]) {
-          let i = 0;
-          while (menuPopovers[i] && menuPopovers[i] === popoverTriggers[i])
-            i++;
-          if (i === 0 && popoverTriggers[0].role !== "menuitem")
-            return;
-          menuHideAll(i);
-          menu(popoverTriggers[i], 3 /* None */);
-        }
-      }
-    }
-  });
-  addEventListener("keydown", (event) => {
-    shouldPreventDefault = null;
-    shouldMatchLetter = null;
-    rovingBoundary = null;
-    const target = event.target;
-    if (isTrigger(target, "mct:a" /* TriggerAccordion */)) {
-      const item = target.parentElement?.parentElement;
-      if (item) {
-        switch (event.key) {
-          case "ArrowDown":
-            accordionNext(item);
-            break;
-          case "ArrowUp":
-            accordionPrevious(item);
-            break;
-          case "Home": {
-            const root = item.parentElement;
-            if (root)
-              accordionRoving(root.firstElementChild, accordionNext);
-            break;
-          }
-          case "End": {
-            const root = item.parentElement;
-            if (root)
-              accordionRoving(root.lastElementChild, accordionPrevious);
-            break;
-          }
-        }
-      }
-    } else if (isTrigger(target, "mct:t" /* TriggerTabs */)) {
-      const vertical = target.parentElement?.ariaOrientation === "vertical";
-      switch (event.key) {
-        case "ArrowDown":
-          if (vertical)
-            tabNext(target);
-          break;
-        case "ArrowUp":
-          if (vertical)
-            tabPrevious(target);
-          break;
-        case "ArrowRight":
-          if (!vertical)
-            tabNext(target);
-          break;
-        case "ArrowLeft":
-          if (!vertical)
-            tabPrevious(target);
-          break;
-        case "Home":
-          tabsRoving(target.parentElement?.firstElementChild, tabNext);
-          break;
-        case "End":
-          tabsRoving(target.parentElement?.lastElementChild, tabPrevious);
-          break;
-      }
-    } else {
-      if (isTrigger(target, "mct:m" /* TriggerMenu */)) {
-        const isRootTrigger = findAncestor(target, "mcc:m" /* ContentMenu */) === null;
-        switch (event.key) {
-          case "ArrowDown":
-            if (isRootTrigger) {
-              if (target.ariaExpanded !== "true") {
-                menu(target, 1 /* First */);
-              } else {
-                const content = getContent(target);
-                if (content)
-                  menuRoving(content.firstElementChild, menuNext);
-              }
-            }
-            break;
-          case "ArrowUp":
-            if (isRootTrigger) {
-              if (target.ariaExpanded !== "true") {
-                menu(target, 2 /* Last */);
-              } else {
-                const content = getContent(target);
-                if (content)
-                  menuRoving(content.lastElementChild, menuPrevious);
-              }
-            }
-            break;
-          case "ArrowRight":
-            if (!isRootTrigger)
-              menu(target, 1 /* First */);
-            break;
-        }
-      }
-      if (!shouldPreventDefault && isElement(target) && target.role?.startsWith("menuitem") && target.parentElement) {
-        const parent = target.parentElement;
-        const menubarRoot = menuPopovers[0]?.parentElement || parent;
-        const inPopover = findAncestor(target.parentElement, "mcc:m" /* ContentMenu */);
-        switch (event.key) {
-          case "Tab":
-            if (menuPopovers[0])
-              menuPopovers[0].focus();
-            menuHideAll();
-            break;
-          case "ArrowDown":
-            if (inPopover)
-              menuNext(parent);
-            break;
-          case "ArrowUp":
-            if (inPopover)
-              menuPrevious(parent);
-            break;
-          case "ArrowRight": {
-            const nextNode = menuNext(menubarRoot);
-            if (nextNode) {
-              const hadOpenMenu = menuPopovers[0];
-              menuHideAll();
-              if (hadOpenMenu && isTrigger(nextNode, "mct:m" /* TriggerMenu */)) {
-                menu(nextNode, 3 /* None */);
-              }
-            }
-            break;
-          }
-          case "ArrowLeft":
-            if (menuPopovers[1]) {
-              menu(menuPopovers.pop(), 0 /* Trigger */);
-            } else {
-              const nextNode = menuPrevious(menubarRoot);
-              if (nextNode) {
-                const hadOpenMenu = menuPopovers[0];
-                menuHideAll();
-                if (hadOpenMenu && isTrigger(nextNode, "mct:m" /* TriggerMenu */)) {
-                  menu(nextNode, 3 /* None */);
-                }
-              }
-            }
-            break;
-          case "Home":
-            menuRoving(parent.parentElement?.firstElementChild, menuNext);
-            break;
-          case "End":
-            menuRoving(parent.parentElement?.lastElementChild, menuPrevious);
-            break;
-          default:
-            if (/^[a-zA-Z]$/.test(event.key)) {
-              shouldMatchLetter = event.key.toLowerCase();
-              menuNext(parent);
-            }
-            break;
-        }
-      }
-    }
-    if (event.key === "Escape" && menuPopovers[0]) {
-      menu(menuPopovers.pop(), 0 /* Trigger */);
-    }
-    if (shouldPreventDefault)
-      event.preventDefault();
-  });
-  addEventListener("scroll", (event) => {
-    if (menuPopovers[0] && (!isElement(event.target) || !event.target.id.startsWith("mcc:m" /* ContentMenu */))) {
-      menuHideAll();
-    }
-  }, true);
-  addEventListener("resize", () => {
-    if (menuPopovers[0])
-      menuHideAll();
-  });
-  addEventListener("beforematch", (event) => {
-    if (isElement(event.target)) {
-      let target = event.target;
-      while (target) {
-        const triggerId = target.getAttribute("aria-labelledby");
-        if (triggerId) {
-          const trigger = document.getElementById(triggerId);
-          if (isTrigger(trigger, "mct:a" /* TriggerAccordion */)) {
-            if (trigger.ariaExpanded !== "true")
-              accordion(trigger);
-          } else if (isTrigger(trigger, "mct:c" /* TriggerCollapsible */)) {
-            if (trigger.ariaExpanded !== "true")
-              collapsible(trigger);
-          } else if (isTrigger(trigger, "mct:t" /* TriggerTabs */)) {
-            tabs(trigger);
-          }
-        }
-        target = target.parentElement;
-      }
-    }
-  });
-}