monochrome 0.2.0 → 0.3.0

package/README.md

@@ -1,9 +1,9 @@
-# monochrome
+# Monochrome
 
-Accessible UI component library. Best-in-class performance. HTML-first, React supported.
+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-350_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.2kB-brightgreen) ![tests](https://img.shields.io/badge/tests-354_passing-brightgreen) ![WCAG](https://img.shields.io/badge/WCAG_2.2-AA-blue) ![license](https://img.shields.io/badge/license-MIT-blue)
 <!-- /badges -->
 
 ## Install
@@ -12,16 +12,14 @@ Accessible UI component library. Best-in-class performance. HTML-first, React su
 npm install monochrome
 ```
 
-## How it works
-
-monochrome uses the DOM as its source of truth. Instead of managing state in JavaScript, it reads ARIA attributes, responds to user interactions, and updates them directly. Minimal global event listeners handle every component on the page through event delegation. No initialization, no configuration, no framework required.
-
-Write semantic HTML, load the script, and everything becomes interactive.
+```ts
+import "monochrome"                               // Core (auto-activates)
+import { Accordion } from "monochrome/react"       // React
+import { Accordion } from "monochrome/vue"         // Vue
+```
 
 ## Usage
 
-### React
-
 ```tsx
 import "monochrome"
 import { Accordion } from "monochrome/react"
@@ -42,79 +40,9 @@ export function FAQ() {
 }
 ```
 
-Import `"monochrome"` once at your app's entry point. The React wrappers generate the correct HTML structure and ARIA attributes. All interactivity comes from the monochrome runtime. No React needed on the client.
-
-### HTML
-
-monochrome works with any framework or no framework at all. Write semantic HTML with the ID convention and everything just works:
-
-```html
-<script src="https://unpkg.com/monochrome"></script>
-
-<button
-  id="mct:collapsible:demo"
-  aria-expanded="false"
-  aria-controls="mcc:collapsible:demo"
->
-  Toggle
-</button>
-<div id="mcc:collapsible:demo" aria-hidden="true" hidden="until-found">
-  Content appears here.
-</div>
-```
-
-
-### React Components
-
-<details>
-<summary>Collapsible</summary>
-
-```tsx
-import { Collapsible } from "monochrome/react"
-
-<Collapsible.Root open>
-  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
-  <Collapsible.Panel>Content here</Collapsible.Panel>
-</Collapsible.Root>
-```
-</details>
-
-<details>
-<summary>Tabs</summary>
-
-```tsx
-import { Tabs } from "monochrome/react"
-
-<Tabs.Root defaultValue="tab1" orientation="horizontal">
-  <Tabs.List>
-    <Tabs.Tab value="tab1">Tab 1</Tabs.Tab>
-    <Tabs.Tab value="tab2">Tab 2</Tabs.Tab>
-  </Tabs.List>
-  <Tabs.Panel value="tab1">Content 1</Tabs.Panel>
-  <Tabs.Panel value="tab2">Content 2</Tabs.Panel>
-</Tabs.Root>
-```
-</details>
+Import `"monochrome"` once at your app's entry point. The wrappers generate the correct HTML structure and ARIA attributes. All interactivity comes from the Monochrome runtime - no framework JavaScript needed on the client.
 
-<details>
-<summary>Menu</summary>
-
-```tsx
-import { Menu } from "monochrome/react"
-
-<Menu.Root>
-  <Menu.Trigger>Open Menu</Menu.Trigger>
-  <Menu.Popover>
-    <Menu.Item>Action 1</Menu.Item>
-    <Menu.Item disabled>Disabled</Menu.Item>
-    <Menu.Separator />
-    <Menu.CheckboxItem checked={false}>Bold</Menu.CheckboxItem>
-    <Menu.RadioItem checked>Small</Menu.RadioItem>
-    <Menu.RadioItem checked={false}>Large</Menu.RadioItem>
-  </Menu.Popover>
-</Menu.Root>
-```
-</details>
+The Vue API is identical: `import { Accordion } from "monochrome/vue"`. Monochrome also works with plain HTML or any framework that outputs HTML. See [AGENTS.md](./AGENTS.md) for full documentation.
 
 ## Components
 
@@ -122,10 +50,14 @@ Four interactive UI patterns in <!-- size -->2.2kB<!-- /size -->:
 
 | Component | Description | Tests |
 | --- | --- | ---: |
-| **Accordion** | Grouped collapsible content sections | <!-- tests:accordion -->65<!-- /tests:accordion --> |
-| **Collapsible** | Show and hide content with a button | <!-- tests:collapsible -->41<!-- /tests:collapsible --> |
-| **Menu** | Dropdown menus, menubars, and submenus | <!-- tests:menu -->175<!-- /tests:menu --> |
-| **Tabs** | Switch between multiple content panels | <!-- tests:tabs -->69<!-- /tests:tabs --> |
+| **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 -->176<!-- /tests:menu --> |
+| **Tabs** | Switch between multiple content panels | <!-- tests:tabs -->70<!-- /tests:tabs --> |
+
+## How it works
+
+Monochrome uses the DOM as its source of truth. Instead of managing state in JavaScript, it reads ARIA attributes, responds to user interactions, and updates them directly. Minimal global event listeners handle every component on the page through event delegation. No initialization, no configuration, no framework required.
 
 ## Accessibility
 
@@ -137,33 +69,21 @@ Every component follows [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/AR
 - Preserves browser find-in-page (cmd+f)
 - Screen reader support out of the box
 
-## Performance
-
-- Event delegation: minimal global listeners shared across all components
-- No per-component instances, state objects, or memory allocations
-- Zero DOM queries, navigates through direct element pointers
-- Adding more components to the page costs nothing at runtime
-
-> Performance isn't a feature, it's a consequence of the architecture. When you don't have per-component state, per-component listeners, or a rendering framework, there's nothing left to be slow.
-
 ## Styling
 
-monochrome is headless — no CSS is shipped. You provide all styles. Key requirements for menus:
+Monochrome is headless - no CSS is shipped. You provide all styles. Key requirements for menus:
 
 ```css
-/* Menu popover visibility */
 [popover]:popover-open {
   display: flex;
 }
 
-/* Menu positioning (core sets --top, --right, --bottom, --left from getBoundingClientRect) */
 [role="menu"] {
   position: fixed;
   top: var(--bottom);
   left: var(--left);
 }
 
-/* Submenu positioning */
 [role="menu"] [role="menu"] {
   top: var(--top);
   left: var(--right);

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+declare enum Focus {
+    Trigger = 0,
+    First = 1,
+    Last = 2,
+    None = 3
+}
+declare enum Prefix {
+    Trigger = "mct:",
+    TriggerAccordion = "mct:a",
+    TriggerCollapsible = "mct:c",
+    TriggerMenu = "mct:m",
+    TriggerTabs = "mct:t",
+    Content = "mcc:",
+    ContentMenu = "mcc:m",
+    RootAccordion = "mcr:a"
+}

package/dist/react/accordion.d.ts

@@ -0,0 +1,22 @@
+import { type ReactElement } from "react";
+import { type BaseProps } from "./shared.js";
+declare function Root({ children, type, ...props }: BaseProps & {
+    type?: "single" | "multiple";
+}): ReactElement;
+declare function Item({ children, open, disabled, ...props }: BaseProps & {
+    open?: boolean;
+    disabled?: boolean;
+}): ReactElement;
+declare function Header({ children, as, ...props }: BaseProps & {
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+}): ReactElement;
+declare function Trigger({ children, ...props }: BaseProps): ReactElement;
+declare function Panel({ children, ...props }: BaseProps): ReactElement;
+export declare const Accordion: {
+    Root: typeof Root;
+    Item: typeof Item;
+    Header: typeof Header;
+    Trigger: typeof Trigger;
+    Panel: typeof Panel;
+};
+export {};

package/dist/react/collapsible.d.ts

@@ -0,0 +1,13 @@
+import { type ReactElement } from "react";
+import { type BaseProps } from "./shared.js";
+declare function Root({ children, open, ...props }: BaseProps & {
+    open?: boolean;
+}): ReactElement;
+declare function Trigger({ children, ...props }: BaseProps): ReactElement;
+declare function Panel({ children, ...props }: BaseProps): ReactElement;
+export declare const Collapsible: {
+    Root: typeof Root;
+    Trigger: typeof Trigger;
+    Panel: typeof Panel;
+};
+export {};

package/dist/react/index.d.ts

@@ -0,0 +1,4 @@
+export { Accordion } from "./accordion.js";
+export { Collapsible } from "./collapsible.js";
+export { Menu } from "./menu.js";
+export { Tabs } from "./tabs.js";

package/dist/react/index.js

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

package/dist/react/menu.d.ts

@@ -0,0 +1,34 @@
+import { type ReactElement } from "react";
+import type { BaseProps } from "./shared.js";
+declare function Root({ children, menubar, ...props }: BaseProps & {
+    menubar?: boolean;
+}): ReactElement;
+declare function Trigger({ children, ...props }: BaseProps): ReactElement;
+declare function Popover({ children, ...props }: BaseProps): ReactElement;
+declare function Item({ children, disabled, href, ...props }: BaseProps & {
+    disabled?: boolean;
+    href?: string;
+}): ReactElement;
+declare function CheckboxItem({ children, checked, disabled, ...props }: BaseProps & {
+    checked?: boolean;
+    disabled?: boolean;
+}): ReactElement;
+declare function RadioItem({ children, checked, disabled, ...props }: BaseProps & {
+    checked?: boolean;
+    disabled?: boolean;
+}): ReactElement;
+declare function Label({ children, ...props }: BaseProps): ReactElement;
+declare function Separator(props: Omit<BaseProps, "children">): ReactElement;
+declare function Group({ children, ...props }: BaseProps): ReactElement;
+export declare const Menu: {
+    Root: typeof Root;
+    Trigger: typeof Trigger;
+    Popover: typeof Popover;
+    Item: typeof Item;
+    CheckboxItem: typeof CheckboxItem;
+    RadioItem: typeof RadioItem;
+    Label: typeof Label;
+    Separator: typeof Separator;
+    Group: typeof Group;
+};
+export {};

package/dist/react/shared.d.ts

@@ -0,0 +1,6 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+export type BaseProps = HTMLAttributes<HTMLElement> & {
+    children: ReactNode;
+};
+export declare const buildId: (base: string, id?: string) => string;
+export declare const HiddenUntilFound: () => ReactElement;

package/dist/react/tabs.d.ts

@@ -0,0 +1,24 @@
+import { type ReactElement } from "react";
+import { type BaseProps } from "./shared.js";
+declare function Root({ children, defaultValue, orientation, ...props }: BaseProps & {
+    defaultValue: string;
+    orientation?: "horizontal" | "vertical";
+}): ReactElement;
+declare function List({ children, ...props }: BaseProps): ReactElement;
+declare function Tab({ children, value, selected, disabled, ...props }: BaseProps & {
+    value: string;
+    selected?: boolean;
+    disabled?: boolean;
+}): ReactElement;
+declare function Panel({ children, value, selected, focusable, ...props }: BaseProps & {
+    value: string;
+    selected?: boolean;
+    focusable?: boolean;
+}): ReactElement;
+export declare const Tabs: {
+    Root: typeof Root;
+    List: typeof List;
+    Tab: typeof Tab;
+    Panel: typeof Panel;
+};
+export {};

package/dist/vue/accordion.d.ts

@@ -0,0 +1,62 @@
+export declare const Accordion: {
+    Root: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        type: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        type: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{}>, {
+        type: string;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Item: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        open: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        open: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{}>, {
+        open: boolean;
+        disabled: boolean;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Header: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        as: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        as: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{}>, {
+        as: string;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    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>;
+    Panel: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};

package/dist/vue/collapsible.d.ts

@@ -0,0 +1,23 @@
+export declare const Collapsible: {
+    Root: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        open: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        open: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{}>, {
+        open: boolean;
+    }, {}, {}, {}, 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>;
+    Panel: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};

package/dist/vue/index.d.ts

@@ -0,0 +1,4 @@
+export { Accordion } from "./accordion.js";
+export { Collapsible } from "./collapsible.js";
+export { Menu } from "./menu.js";
+export { Tabs } from "./tabs.js";

package/dist/vue/index.js

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

package/dist/vue/menu.d.ts

@@ -0,0 +1,73 @@
+export declare const Menu: {
+    Root: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        menubar: BooleanConstructor;
+    }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        menubar: BooleanConstructor;
+    }>> & Readonly<{}>, {
+        menubar: boolean;
+    }, {}, {}, {}, 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>;
+    Popover: 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>;
+    Item: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        disabled: BooleanConstructor;
+        href: StringConstructor;
+    }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        disabled: BooleanConstructor;
+        href: StringConstructor;
+    }>> & Readonly<{}>, {
+        disabled: boolean;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    CheckboxItem: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        checked: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: BooleanConstructor;
+    }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        checked: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: BooleanConstructor;
+    }>> & Readonly<{}>, {
+        disabled: boolean;
+        checked: boolean;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    RadioItem: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        checked: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: BooleanConstructor;
+    }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        checked: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: BooleanConstructor;
+    }>> & Readonly<{}>, {
+        disabled: boolean;
+        checked: boolean;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Label: 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>;
+    Separator: 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>;
+    Group: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};

package/dist/vue/shared.d.ts

@@ -0,0 +1,35 @@
+import type { InjectionKey } from "vue";
+export declare function requireInject<T>(key: InjectionKey<T>, component: string): T;
+export declare const buildId: (base: string, id?: string) => string;
+export declare const HiddenUntilFound: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>;
+export type CollapsibleContext = {
+    baseId: string;
+    open: boolean;
+};
+export declare const CollapsibleKey: InjectionKey<CollapsibleContext>;
+export type AccordionContext = {
+    baseId: string;
+    open: boolean;
+    disabled: boolean;
+};
+export declare const AccordionKey: InjectionKey<AccordionContext>;
+export type TabsContext = {
+    baseId: string;
+    selected: string;
+    orientation: "horizontal" | "vertical";
+};
+export declare const TabsKey: InjectionKey<TabsContext>;
+export type MenuContext = {
+    id: string;
+    root?: boolean;
+    menubar?: boolean;
+    submenu?: boolean;
+    first?: boolean;
+};
+export declare const MenuKey: InjectionKey<MenuContext>;
+export type MenuPopupContext = {
+    claimFirst: () => boolean;
+};
+export declare const MenuPopupKey: InjectionKey<MenuPopupContext>;