@windmorph/react 0.0.0-stage → 0.1.0

package/dist/components/menu/menu-styles.js

@@ -0,0 +1,219 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/menu/menu-styles.ts
+/**
+* M3: a menu that scrolls "show[s] a persistent scrollbar". Overlay scrollbars hide at rest,
+* so a styled WebKit scrollbar is always drawn (a 4px `outline` thumb in a 12px track);
+* elsewhere, a thin one. Shared by the menu and the exposed dropdown menus' option list.
+*/
+const persistentScrollbar = [
+	"[&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar-track]:bg-transparent",
+	"[&::-webkit-scrollbar-thumb]:rounded-corner-full [&::-webkit-scrollbar-thumb]:border-[4px] [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-outline [&::-webkit-scrollbar-thumb]:bg-clip-padding",
+	"supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--md-sys-color-outline)_transparent]"
+];
+/** Variant definitions for {@link Menu} and its parts. */
+/**
+* Keeps a menu's placed box at the menu's own width (`!`, so a consumer's `w-full` or `min-w-*`
+* doesn't merge it away): React Aria places the box by its size, so a full-width box was held
+* 12px from the window's edge and the menu inside it sat off its trigger (2026-10-17). Only the
+* menus take it: an `!important` minimum would also beat the inline minimum that keeps a
+* Select's or Autocomplete's option list as wide as its field.
+*/
+const menuOwnWidth = "w-max! min-w-0!";
+const menuStyles = tv({
+	slots: {
+		popover: "z-(--md-sys-z-menu)",
+		reveal: [
+			"flex max-h-[inherit] w-max flex-col opacity-100 [clip-path:inset(-24px)]",
+			"[transition-property:opacity,clip-path]",
+			"[transition-duration:var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing)]",
+			"data-entering:opacity-0 data-entering:[transition-property:none] data-exiting:opacity-0",
+			"data-exiting:pointer-events-none data-exiting:**:pointer-events-none",
+			"motion-safe:data-entering:[clip-path:inset(-24px_-24px_100%_-24px)] motion-safe:data-exiting:[clip-path:inset(-24px_-24px_100%_-24px)]",
+			"motion-safe:data-[placement=top]:data-entering:[clip-path:inset(100%_-24px_-24px_-24px)] motion-safe:data-[placement=top]:data-exiting:[clip-path:inset(100%_-24px_-24px_-24px)]",
+			"motion-safe:data-[placement=right]:data-entering:[clip-path:inset(-24px_100%_-24px_-24px)] motion-safe:data-[placement=right]:data-exiting:[clip-path:inset(-24px_100%_-24px_-24px)]",
+			"motion-safe:data-[placement=left]:data-entering:[clip-path:inset(-24px_-24px_-24px_100%)] motion-safe:data-[placement=left]:data-exiting:[clip-path:inset(-24px_-24px_-24px_100%)]"
+		],
+		menu: [
+			"flex max-h-[inherit] flex-col overflow-y-auto bg-[var(--_md-comp-menus-container-color)] outline-none",
+			...persistentScrollbar,
+			"[--m3-menu-corner:var(--_md-comp-menus-container-shape)]",
+			"data-[shape=active]:[--m3-menu-corner:24px]",
+			"data-[shape=inactive]:[--m3-menu-corner:var(--md-sys-shape-corner-small)]"
+		],
+		group: [
+			"pointer-events-auto flex flex-col bg-[var(--_md-comp-menus-container-color)] p-[4px] shadow-[shadow:var(--_md-comp-menus-container-elevation)]",
+			"forced-colors:outline-solid forced-colors:outline-1 forced-colors:outline-[CanvasText]",
+			"[transition-property:border-radius]",
+			"[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]"
+		],
+		divider: "my-[calc(8px+var(--md-sys-density,0)*2px)] -mx-[4px] w-auto",
+		heading: "flex min-h-[32px] items-center ps-[16px] text-label-large",
+		item: [
+			"group/item flex min-h-[calc(44px+var(--md-sys-density,0)*4px)] w-full cursor-pointer items-center px-[16px] text-start",
+			"text-body-large text-[color:var(--_md-comp-menus-menu-item-label-text-color)] outline-none select-none",
+			"data-selected:bg-[var(--_md-comp-menus-menu-item-selected-container-color)] data-selected:text-[color:var(--_md-comp-menus-menu-item-selected-label-text-color)]",
+			"state-layer focus-ring-inset container-motion",
+			"data-selected:rounded-corner-medium",
+			"data-disabled:cursor-default"
+		],
+		selectedIcon: [
+			"grid grid-cols-[0fr] opacity-0",
+			"[transition-property:grid-template-columns,opacity]",
+			"[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]",
+			"group-data-selected/item:grid-cols-[1fr] group-data-selected/item:opacity-100"
+		],
+		selectedIconInner: "overflow-hidden",
+		icon: "me-[12px] inline-flex size-[20px] shrink-0 items-center justify-center text-[color:var(--_md-comp-menus-menu-item-leading-icon-color)] [&>svg]:size-full",
+		text: "flex min-w-0 flex-1 flex-col",
+		description: "text-body-medium",
+		trailing: "ms-auto inline-flex shrink-0 items-center ps-[12px] text-label-small text-[color:var(--_md-comp-menus-menu-item-trailing-icon-color)] [&>svg]:size-[20px]",
+		badge: "inline-flex shrink-0 items-center ps-[12px]",
+		sheetContent: [
+			"flex min-h-0 flex-1 flex-col px-[8px] pb-[16px]",
+			"[&>:not([data-overlay-scope]):has(~[data-overlay-scope])]:hidden",
+			"[&>[data-overlay-scope]:has(~[data-overlay-scope])>*]:hidden"
+		],
+		sheetPanel: [
+			"flex min-h-0 flex-1 flex-col opacity-100 starting:opacity-0",
+			"[transition-property:opacity]",
+			"[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]"
+		],
+		sheetHeader: "flex min-h-[48px] shrink-0 items-center gap-[4px] pe-[12px]",
+		sheetBack: ["inline-flex size-[48px] shrink-0 cursor-pointer items-center justify-center rounded-corner-full", "state-layer focus-ring text-on-surface-variant [&>svg]:size-[24px]"],
+		sheetTitle: "min-w-0 flex-1 truncate text-title-medium text-on-surface"
+	},
+	variants: {
+		variant: {
+			standard: {
+				heading: "text-on-surface-variant",
+				item: ["data-disabled:text-on-surface/38", "data-disabled:data-selected:bg-tertiary-container/38 data-disabled:data-selected:text-on-tertiary-container/38"],
+				icon: "group-data-selected/item:text-on-tertiary-container group-data-disabled/item:text-on-surface/38",
+				description: "text-on-surface-variant group-data-selected/item:text-on-tertiary-container group-data-disabled/item:text-on-surface/38",
+				trailing: "group-data-selected/item:text-on-tertiary-container group-data-disabled/item:text-on-surface/38"
+			},
+			vibrant: {
+				heading: "text-on-tertiary-container",
+				item: ["data-disabled:text-on-tertiary-container/38", "data-disabled:data-selected:bg-tertiary/38 data-disabled:data-selected:text-on-tertiary/38"],
+				icon: [
+					"group-data-hovered/item:text-tertiary group-data-focus-visible/item:text-tertiary group-data-pressed/item:text-tertiary",
+					"group-data-selected/item:text-on-tertiary",
+					"group-data-selected/item:group-data-hovered/item:text-on-tertiary",
+					"group-data-selected/item:group-data-focus-visible/item:text-on-tertiary",
+					"group-data-selected/item:group-data-pressed/item:text-on-tertiary",
+					"group-data-disabled/item:text-on-tertiary-container/38"
+				],
+				description: "text-on-tertiary-container group-data-selected/item:text-on-tertiary group-data-disabled/item:text-on-tertiary-container/38",
+				trailing: [
+					"group-data-hovered/item:text-tertiary group-data-focus-visible/item:text-tertiary group-data-pressed/item:text-tertiary",
+					"group-data-selected/item:text-on-tertiary",
+					"group-data-selected/item:group-data-hovered/item:text-on-tertiary",
+					"group-data-selected/item:group-data-focus-visible/item:text-on-tertiary",
+					"group-data-selected/item:group-data-pressed/item:text-on-tertiary",
+					"group-data-disabled/item:text-on-tertiary-container/38"
+				]
+			}
+		},
+		groupPosition: {
+			only: { group: "rounded-[var(--_md-comp-menus-container-shape)]" },
+			first: { group: "rounded-t-[var(--_md-comp-menus-container-shape)] rounded-b-corner-small" },
+			middle: { group: "rounded-corner-small" },
+			last: { group: "rounded-t-corner-small rounded-b-[var(--_md-comp-menus-container-shape)]" }
+		},
+		/**
+		* The item's top corners: `nested` inside a 16px corner (12px), `outer` inside the
+		* menu's morphing outer corner (`--m3-menu-corner` less the 4px padding), else 4px.
+		*/
+		itemTop: {
+			nested: { item: "rounded-t-corner-medium" },
+			outer: { item: "rounded-t-[calc(var(--m3-menu-corner,var(--md-sys-shape-corner-large))-4px)]" },
+			plain: { item: "rounded-t-corner-extra-small" }
+		},
+		/** The item's bottom corners, as `itemTop`. */
+		itemBottom: {
+			nested: { item: "rounded-b-corner-medium" },
+			outer: { item: "rounded-b-[calc(var(--m3-menu-corner,var(--md-sys-shape-corner-large))-4px)]" },
+			plain: { item: "rounded-b-corner-extra-small" }
+		},
+		/** Groups' outer corners follow `--m3-menu-corner` (the submenu morph). */
+		morph: {
+			true: {},
+			false: {}
+		},
+		hasDescription: {
+			true: { item: "py-[calc(8px+var(--md-sys-density,0)*2px)]" },
+			false: {}
+		},
+		/** Open and close with no motion (`instant`). */
+		instant: {
+			true: { reveal: "[transition-property:none]" },
+			false: {}
+		},
+		/** In a bottom sheet: the list spans it, on the sheet's own surface. */
+		embedded: {
+			true: {},
+			false: {}
+		},
+		/**
+		* `gap`: every group is its own surface, and the list only scrolls (its 8px ring keeps
+		* the groups' shadows); `divider`: the list is the one surface.
+		*/
+		layout: {
+			gap: { menu: ["-m-[8px] p-[8px] pointer-events-none gap-[2px] bg-transparent", "min-w-[128px] max-w-[296px]"] },
+			divider: {
+				menu: [
+					"pointer-events-auto min-w-[112px] max-w-[280px] p-[4px] shadow-[shadow:var(--_md-comp-menus-container-elevation)]",
+					"forced-colors:outline-solid forced-colors:outline-1 forced-colors:outline-[CanvasText]",
+					"rounded-[var(--m3-menu-corner,var(--md-sys-shape-corner-large))]",
+					"[transition-property:border-radius]",
+					"[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]",
+					"[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]"
+				],
+				group: "bg-transparent p-0 shadow-none forced-colors:outline-none"
+			}
+		}
+	},
+	compoundVariants: [
+		{
+			morph: true,
+			groupPosition: "only",
+			class: { group: "rounded-[var(--m3-menu-corner,var(--md-sys-shape-corner-large))]" }
+		},
+		{
+			morph: true,
+			groupPosition: "first",
+			class: { group: "rounded-t-[var(--m3-menu-corner,var(--md-sys-shape-corner-large))] rounded-b-corner-small" }
+		},
+		{
+			morph: true,
+			groupPosition: "last",
+			class: { group: "rounded-t-corner-small rounded-b-[var(--m3-menu-corner,var(--md-sys-shape-corner-large))]" }
+		},
+		{
+			layout: "divider",
+			class: { group: "rounded-none" }
+		},
+		{
+			embedded: true,
+			class: { menu: "w-full max-w-none min-w-0 rounded-none bg-transparent p-0 shadow-none forced-colors:outline-none" }
+		}
+	],
+	defaultVariants: {
+		variant: "standard",
+		layout: "gap",
+		morph: false,
+		groupPosition: "only",
+		itemTop: "plain",
+		itemBottom: "plain",
+		hasDescription: false,
+		instant: false,
+		embedded: false
+	}
+});
+//#endregion
+export { menuOwnWidth, menuStyles, persistentScrollbar };
+
+//# sourceMappingURL=menu-styles.js.map

package/dist/components/menu/menu-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-styles.js","names":[],"sources":["../../../src/components/menu/menu-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow the M3 Expressive menu spec and Compose Material 3's Expressive menu\n * (Menu.kt, MenuDefaults.kt and the Menu / StandardMenu / VibrantMenu / SegmentedMenu\n * token files):\n * - two layouts (M3 \"Vertical menu with gap\" / \"with divider\"). `gap`: groups are separate\n *   surfaces 2px apart at elevation 2, with 4px padding (the SegmentedMenu `GroupPadding`\n *   token); corners: only 16px; first 16px top / 8px bottom; middle 8px; last 8px top /\n *   16px bottom. `divider`: one surface with 4px padding and 16px corners, groups split by\n *   a 1px `outline-variant` divider with 8px above and below (the baseline menu's divider\n *   padding). M3 recommends dividers on the web and in scrolling menus;\n * - the outer corners read `--m3-menu-corner`, so they morph while a submenu is open: the\n *   menu holding focus takes 24px (SegmentedMenu `ActiveContainerShape`), the others 8px\n *   (`InactiveContainerShape`), on the fast spatial spring;\n * - items are 44px minimum (4px less per web density step, `--md-sys-density`: 44 → 40 → 36 →\n *   32px; dividers' 8px margins lose 2px per step), 112–280px wide, 16px padding at\n *   the start and end, body-large labels, 20px icons with a 12px gap and label-small trailing\n *   text (the shortcut); 12px corners when selected (morph on the fast spatial spring). The\n *   padding, gap and type follow the Menu token files (2026-10-14); Compose's code uses 12px,\n *   an 8px gap and label-large on touch;\n * - item corners nest inside the container's: an edge item takes the outer corner minus\n *   the 4px padding (16px → 12px, 8px → 4px), other corners are 4px. Compose picks item\n *   shapes per group alone, so a last item could be rounder than its group's 8px corner;\n * - group labels start 16px inside the group's 4px padding, lined up with the items' 16px\n *   padding, and end 4px from its edge (Compose starts them 12px from the edge; aligned\n *   with the labels, 2026-10-15);\n * - standard: surface-container-low, on-surface text, on-surface-variant icons, selected\n *   tertiary-container; vibrant: tertiary-container, on-tertiary-container content\n *   (icons turn tertiary on hover, focus and press), selected tertiary;\n * - the menu is revealed from its anchored edge (a clip) as it fades in, on the fast springs\n *   (M3 motion: components enter along the x or y axis; scale is avoided), as do the\n *   exposed dropdown menus (Select, Autocomplete) and the docked date picker;\n * - the scrolling list keeps 8px of room around the groups so their shadows aren't clipped,\n *   and shows a persistent scrollbar (M3).\n *\n * The container's colour, shadow and resting corners and the items' resting and selected\n * colours come from the menu's component tokens (`menu-tokens.ts`, `--md-comp-menus-*`):\n * the menu, each item and the option lists that share these styles carry\n * `data-tokens=\"md-comp-menus\"` and `data-variant`. `--m3-menu-corner` takes the shape\n * token, so the submenu morph still animates from it. A consumer class still wins in `cn()`.\n * Every class is written out in full so Tailwind can find it.\n */\n\n/**\n * M3: a menu that scrolls \"show[s] a persistent scrollbar\". Overlay scrollbars hide at rest,\n * so a styled WebKit scrollbar is always drawn (a 4px `outline` thumb in a 12px track);\n * elsewhere, a thin one. Shared by the menu and the exposed dropdown menus' option list.\n */\nexport const persistentScrollbar = [\n  '[&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar-track]:bg-transparent',\n  '[&::-webkit-scrollbar-thumb]:rounded-corner-full [&::-webkit-scrollbar-thumb]:border-[4px] [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-outline [&::-webkit-scrollbar-thumb]:bg-clip-padding',\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--md-sys-color-outline)_transparent]',\n];\n\n/** Variant definitions for {@link Menu} and its parts. */\n/**\n * Keeps a menu's placed box at the menu's own width (`!`, so a consumer's `w-full` or `min-w-*`\n * doesn't merge it away): React Aria places the box by its size, so a full-width box was held\n * 12px from the window's edge and the menu inside it sat off its trigger (2026-10-17). Only the\n * menus take it: an `!important` minimum would also beat the inline minimum that keeps a\n * Select's or Autocomplete's option list as wide as its field.\n */\nexport const menuOwnWidth = 'w-max! min-w-0!';\n\nexport const menuStyles = tv({\n  slots: {\n    // The outermost element, which React Aria places (inline `position` and insets) and which\n    // takes the consumer's `className` and `style`. A menu adds `menuOwnWidth` to it; the\n    // option list of a Select or Autocomplete doesn't, since it sets its own minimum (the\n    // field's width) inline.\n    popover: 'z-(--md-sys-z-menu)',\n    // The menu's enter and exit: revealed from its anchored edge with a clip (24px of room\n    // for the shadows) as it fades in. M3 motion avoids scale, and a clip leaves the items'\n    // layout untouched, so a submenu opened mid-animation is placed against its item's final\n    // position. It also passes the popover's maximum height down, so a long list scrolls.\n    // `w-max` keeps the menu's own width whatever width a consumer class gives the popover\n    // (whose insets only React Aria sets: `data-overlay-placement`, styles/utilities.css).\n    reveal: [\n      'flex max-h-[inherit] w-max flex-col opacity-100 [clip-path:inset(-24px)]',\n      '[transition-property:opacity,clip-path]',\n      '[transition-duration:var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing)]',\n      // Closed until React Aria has placed it (`data-entering`, `useRevealEntering`), with no\n      // transition, then it opens from there: a `@starting-style` was resolved before the\n      // placement was known, so every menu opened from its top edge.\n      'data-entering:opacity-0 data-entering:[transition-property:none] data-exiting:opacity-0',\n      // Leaving, it takes no presses (nor do its groups and items, which set their own):\n      // an item clicked as it faded ran its action.\n      'data-exiting:pointer-events-none data-exiting:**:pointer-events-none',\n      // Below the anchor it opens downwards, above it upwards, beside it sideways. Under\n      // reduced motion it only fades: the clip stays open.\n      'motion-safe:data-entering:[clip-path:inset(-24px_-24px_100%_-24px)] motion-safe:data-exiting:[clip-path:inset(-24px_-24px_100%_-24px)]',\n      'motion-safe:data-[placement=top]:data-entering:[clip-path:inset(100%_-24px_-24px_-24px)] motion-safe:data-[placement=top]:data-exiting:[clip-path:inset(100%_-24px_-24px_-24px)]',\n      'motion-safe:data-[placement=right]:data-entering:[clip-path:inset(-24px_100%_-24px_-24px)] motion-safe:data-[placement=right]:data-exiting:[clip-path:inset(-24px_100%_-24px_-24px)]',\n      'motion-safe:data-[placement=left]:data-entering:[clip-path:inset(-24px_-24px_-24px_100%)] motion-safe:data-[placement=left]:data-exiting:[clip-path:inset(-24px_-24px_-24px_100%)]',\n    ],\n    // The list scrolls when tall, and a scroll container clips its children's shadows to\n    // its box. 8px of padding (cancelled by a negative margin, so nothing moves) leaves room\n    // for the groups' elevation-2 shadows; that ring lets clicks through, so a press just\n    // outside the menu still dismisses it. Widths include the padding: 112–280px groups.\n    menu: [\n      'flex max-h-[inherit] flex-col overflow-y-auto bg-[var(--_md-comp-menus-container-color)] outline-none',\n      ...persistentScrollbar,\n      '[--m3-menu-corner:var(--_md-comp-menus-container-shape)]',\n      'data-[shape=active]:[--m3-menu-corner:24px]',\n      'data-[shape=inactive]:[--m3-menu-corner:var(--md-sys-shape-corner-small)]',\n    ],\n    group: [\n      'pointer-events-auto flex flex-col bg-[var(--_md-comp-menus-container-color)] p-[4px] shadow-[shadow:var(--_md-comp-menus-container-elevation)]',\n      // Forced colours drop the surface colour and the shadow: a system-colour outline keeps\n      // the edge (an outline, so nothing moves).\n      'forced-colors:outline-solid forced-colors:outline-1 forced-colors:outline-[CanvasText]',\n      '[transition-property:border-radius]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]',\n    ],\n    // 8px above and below at density 0, 2px less per step (M3: density takes spacing off).\n    divider: 'my-[calc(8px+var(--md-sys-density,0)*2px)] -mx-[4px] w-auto',\n    // 16px inside the group's 4px padding, as the items' own 16px padding: in line with them.\n    heading: 'flex min-h-[32px] items-center ps-[16px] text-label-large',\n    item: [\n      'group/item flex min-h-[calc(44px+var(--md-sys-density,0)*4px)] w-full cursor-pointer items-center px-[16px] text-start',\n      'text-body-large text-[color:var(--_md-comp-menus-menu-item-label-text-color)] outline-none select-none',\n      'data-selected:bg-[var(--_md-comp-menus-menu-item-selected-container-color)] data-selected:text-[color:var(--_md-comp-menus-menu-item-selected-label-text-color)]',\n      'state-layer focus-ring-inset container-motion',\n      'data-selected:rounded-corner-medium',\n      'data-disabled:cursor-default',\n    ],\n    selectedIcon: [\n      'grid grid-cols-[0fr] opacity-0',\n      '[transition-property:grid-template-columns,opacity]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]',\n      'group-data-selected/item:grid-cols-[1fr] group-data-selected/item:opacity-100',\n    ],\n    selectedIconInner: 'overflow-hidden',\n    icon: 'me-[12px] inline-flex size-[20px] shrink-0 items-center justify-center text-[color:var(--_md-comp-menus-menu-item-leading-icon-color)] [&>svg]:size-full',\n    text: 'flex min-w-0 flex-1 flex-col',\n    description: 'text-body-medium',\n    trailing:\n      'ms-auto inline-flex shrink-0 items-center ps-[12px] text-label-small text-[color:var(--_md-comp-menus-menu-item-trailing-icon-color)] [&>svg]:size-[20px]',\n    badge: 'inline-flex shrink-0 items-center ps-[12px]',\n    // A menu's place in a bottom sheet. An open submenu's panel follows the menu that opened\n    // it (portalled in after it) and hides it, and any panel before it, while it's open.\n    sheetContent: [\n      'flex min-h-0 flex-1 flex-col px-[8px] pb-[16px]',\n      '[&>:not([data-overlay-scope]):has(~[data-overlay-scope])]:hidden',\n      '[&>[data-overlay-scope]:has(~[data-overlay-scope])>*]:hidden',\n    ],\n    // A submenu in a sheet: a back button and its item's label above its list, fading in.\n    sheetPanel: [\n      'flex min-h-0 flex-1 flex-col opacity-100 starting:opacity-0',\n      '[transition-property:opacity]',\n      '[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]',\n    ],\n    sheetHeader: 'flex min-h-[48px] shrink-0 items-center gap-[4px] pe-[12px]',\n    sheetBack: [\n      'inline-flex size-[48px] shrink-0 cursor-pointer items-center justify-center rounded-corner-full',\n      'state-layer focus-ring text-on-surface-variant [&>svg]:size-[24px]',\n    ],\n    sheetTitle: 'min-w-0 flex-1 truncate text-title-medium text-on-surface',\n  },\n  variants: {\n    variant: {\n      standard: {\n        heading: 'text-on-surface-variant',\n        item: [\n          'data-disabled:text-on-surface/38',\n          'data-disabled:data-selected:bg-tertiary-container/38 data-disabled:data-selected:text-on-tertiary-container/38',\n        ],\n        icon: 'group-data-selected/item:text-on-tertiary-container group-data-disabled/item:text-on-surface/38',\n        description:\n          'text-on-surface-variant group-data-selected/item:text-on-tertiary-container group-data-disabled/item:text-on-surface/38',\n        trailing:\n          'group-data-selected/item:text-on-tertiary-container group-data-disabled/item:text-on-surface/38',\n      },\n      vibrant: {\n        heading: 'text-on-tertiary-container',\n        item: [\n          'data-disabled:text-on-tertiary-container/38',\n          'data-disabled:data-selected:bg-tertiary/38 data-disabled:data-selected:text-on-tertiary/38',\n        ],\n        icon: [\n          'group-data-hovered/item:text-tertiary group-data-focus-visible/item:text-tertiary group-data-pressed/item:text-tertiary',\n          'group-data-selected/item:text-on-tertiary',\n          'group-data-selected/item:group-data-hovered/item:text-on-tertiary',\n          'group-data-selected/item:group-data-focus-visible/item:text-on-tertiary',\n          'group-data-selected/item:group-data-pressed/item:text-on-tertiary',\n          'group-data-disabled/item:text-on-tertiary-container/38',\n        ],\n        description:\n          'text-on-tertiary-container group-data-selected/item:text-on-tertiary group-data-disabled/item:text-on-tertiary-container/38',\n        trailing: [\n          'group-data-hovered/item:text-tertiary group-data-focus-visible/item:text-tertiary group-data-pressed/item:text-tertiary',\n          'group-data-selected/item:text-on-tertiary',\n          'group-data-selected/item:group-data-hovered/item:text-on-tertiary',\n          'group-data-selected/item:group-data-focus-visible/item:text-on-tertiary',\n          'group-data-selected/item:group-data-pressed/item:text-on-tertiary',\n          'group-data-disabled/item:text-on-tertiary-container/38',\n        ],\n      },\n    },\n    groupPosition: {\n      only: { group: 'rounded-[var(--_md-comp-menus-container-shape)]' },\n      first: { group: 'rounded-t-[var(--_md-comp-menus-container-shape)] rounded-b-corner-small' },\n      middle: { group: 'rounded-corner-small' },\n      last: { group: 'rounded-t-corner-small rounded-b-[var(--_md-comp-menus-container-shape)]' },\n    },\n    /**\n     * The item's top corners: `nested` inside a 16px corner (12px), `outer` inside the\n     * menu's morphing outer corner (`--m3-menu-corner` less the 4px padding), else 4px.\n     */\n    itemTop: {\n      nested: { item: 'rounded-t-corner-medium' },\n      outer: {\n        item: 'rounded-t-[calc(var(--m3-menu-corner,var(--md-sys-shape-corner-large))-4px)]',\n      },\n      plain: { item: 'rounded-t-corner-extra-small' },\n    },\n    /** The item's bottom corners, as `itemTop`. */\n    itemBottom: {\n      nested: { item: 'rounded-b-corner-medium' },\n      outer: {\n        item: 'rounded-b-[calc(var(--m3-menu-corner,var(--md-sys-shape-corner-large))-4px)]',\n      },\n      plain: { item: 'rounded-b-corner-extra-small' },\n    },\n    /** Groups' outer corners follow `--m3-menu-corner` (the submenu morph). */\n    morph: {\n      true: {},\n      false: {},\n    },\n    hasDescription: {\n      true: { item: 'py-[calc(8px+var(--md-sys-density,0)*2px)]' },\n      false: {},\n    },\n    /** Open and close with no motion (`instant`). */\n    instant: {\n      true: { reveal: '[transition-property:none]' },\n      false: {},\n    },\n    /** In a bottom sheet: the list spans it, on the sheet's own surface. */\n    embedded: {\n      true: {},\n      false: {},\n    },\n    /**\n     * `gap`: every group is its own surface, and the list only scrolls (its 8px ring keeps\n     * the groups' shadows); `divider`: the list is the one surface.\n     */\n    layout: {\n      gap: {\n        menu: [\n          '-m-[8px] p-[8px] pointer-events-none gap-[2px] bg-transparent',\n          'min-w-[128px] max-w-[296px]',\n        ],\n      },\n      divider: {\n        menu: [\n          'pointer-events-auto min-w-[112px] max-w-[280px] p-[4px] shadow-[shadow:var(--_md-comp-menus-container-elevation)]',\n          'forced-colors:outline-solid forced-colors:outline-1 forced-colors:outline-[CanvasText]',\n          'rounded-[var(--m3-menu-corner,var(--md-sys-shape-corner-large))]',\n          '[transition-property:border-radius]',\n          '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]',\n          '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]',\n        ],\n        group: 'bg-transparent p-0 shadow-none forced-colors:outline-none',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      morph: true,\n      groupPosition: 'only',\n      class: { group: 'rounded-[var(--m3-menu-corner,var(--md-sys-shape-corner-large))]' },\n    },\n    {\n      morph: true,\n      groupPosition: 'first',\n      class: {\n        group:\n          'rounded-t-[var(--m3-menu-corner,var(--md-sys-shape-corner-large))] rounded-b-corner-small',\n      },\n    },\n    {\n      morph: true,\n      groupPosition: 'last',\n      class: {\n        group:\n          'rounded-t-corner-small rounded-b-[var(--m3-menu-corner,var(--md-sys-shape-corner-large))]',\n      },\n    },\n    // A divider layout's groups are plain sections of the one surface.\n    { layout: 'divider', class: { group: 'rounded-none' } },\n    // In a sheet the list has no surface, shadow or width limits of its own.\n    {\n      embedded: true,\n      class: {\n        menu: 'w-full max-w-none min-w-0 rounded-none bg-transparent p-0 shadow-none forced-colors:outline-none',\n      },\n    },\n  ],\n  defaultVariants: {\n    variant: 'standard',\n    layout: 'gap',\n    morph: false,\n    groupPosition: 'only',\n    itemTop: 'plain',\n    itemBottom: 'plain',\n    hasDescription: false,\n    instant: false,\n    embedded: false,\n  },\n});\n\n/**\n * The variants of {@link menuStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type MenuStyleProps = VariantProps<typeof menuStyles>;\nexport type MenuVariant = NonNullable<MenuStyleProps['variant']>;\nexport type MenuLayout = NonNullable<MenuStyleProps['layout']>;\n"],"mappings":";;;;;;;AAiDA,MAAa,sBAAsB;CACjC;CACA;CACA;AACF;;;;;;;;;AAUA,MAAa,eAAe;AAE5B,MAAa,aAAa,GAAG;CAC3B,OAAO;EAKL,SAAS;EAOT,QAAQ;GACN;GACA;GACA;GACA;GAIA;GAGA;GAGA;GACA;GACA;GACA;EACF;EAKA,MAAM;GACJ;GACA,GAAG;GACH;GACA;GACA;EACF;EACA,OAAO;GACL;GAGA;GACA;GACA;GACA;EACF;EAEA,SAAS;EAET,SAAS;EACT,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;EACF;EACA,cAAc;GACZ;GACA;GACA;GACA;GACA;EACF;EACA,mBAAmB;EACnB,MAAM;EACN,MAAM;EACN,aAAa;EACb,UACE;EACF,OAAO;EAGP,cAAc;GACZ;GACA;GACA;EACF;EAEA,YAAY;GACV;GACA;GACA;GACA;EACF;EACA,aAAa;EACb,WAAW,CACT,mGACA,oEACF;EACA,YAAY;CACd;CACA,UAAU;EACR,SAAS;GACP,UAAU;IACR,SAAS;IACT,MAAM,CACJ,oCACA,gHACF;IACA,MAAM;IACN,aACE;IACF,UACE;GACJ;GACA,SAAS;IACP,SAAS;IACT,MAAM,CACJ,+CACA,4FACF;IACA,MAAM;KACJ;KACA;KACA;KACA;KACA;KACA;IACF;IACA,aACE;IACF,UAAU;KACR;KACA;KACA;KACA;KACA;KACA;IACF;GACF;EACF;EACA,eAAe;GACb,MAAM,EAAE,OAAO,kDAAkD;GACjE,OAAO,EAAE,OAAO,2EAA2E;GAC3F,QAAQ,EAAE,OAAO,uBAAuB;GACxC,MAAM,EAAE,OAAO,2EAA2E;EAC5F;;;;;EAKA,SAAS;GACP,QAAQ,EAAE,MAAM,0BAA0B;GAC1C,OAAO,EACL,MAAM,+EACR;GACA,OAAO,EAAE,MAAM,+BAA+B;EAChD;;EAEA,YAAY;GACV,QAAQ,EAAE,MAAM,0BAA0B;GAC1C,OAAO,EACL,MAAM,+EACR;GACA,OAAO,EAAE,MAAM,+BAA+B;EAChD;;EAEA,OAAO;GACL,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EACA,gBAAgB;GACd,MAAM,EAAE,MAAM,6CAA6C;GAC3D,OAAO,CAAC;EACV;;EAEA,SAAS;GACP,MAAM,EAAE,QAAQ,6BAA6B;GAC7C,OAAO,CAAC;EACV;;EAEA,UAAU;GACR,MAAM,CAAC;GACP,OAAO,CAAC;EACV;;;;;EAKA,QAAQ;GACN,KAAK,EACH,MAAM,CACJ,iEACA,6BACF,EACF;GACA,SAAS;IACP,MAAM;KACJ;KACA;KACA;KACA;KACA;KACA;IACF;IACA,OAAO;GACT;EACF;CACF;CACA,kBAAkB;EAChB;GACE,OAAO;GACP,eAAe;GACf,OAAO,EAAE,OAAO,mEAAmE;EACrF;EACA;GACE,OAAO;GACP,eAAe;GACf,OAAO,EACL,OACE,4FACJ;EACF;EACA;GACE,OAAO;GACP,eAAe;GACf,OAAO,EACL,OACE,4FACJ;EACF;EAEA;GAAE,QAAQ;GAAW,OAAO,EAAE,OAAO,eAAe;EAAE;EAEtD;GACE,UAAU;GACV,OAAO,EACL,MAAM,mGACR;EACF;CACF;CACA,iBAAiB;EACf,SAAS;EACT,QAAQ;EACR,OAAO;EACP,eAAe;EACf,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,SAAS;EACT,UAAU;CACZ;AACF,CAAC"}

package/dist/components/menu/menu-tokens.d.ts

@@ -0,0 +1,7 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/menu/menu-tokens.d.ts
+/** The tokens of {@link Menu}: `--md-comp-menus-<part>` and `--md-comp-menus-standard-<part>`. */
+export declare const menuTokenSet: ComponentTokenSet<"container-shape" | "container-elevation">;
+//#endregion
+//# sourceMappingURL=menu-tokens.d.ts.map

package/dist/components/menu/menu-tokens.js

@@ -0,0 +1,93 @@
+import { color, corner, defineComponentTokens, elevation } from "../../tokens/component.js";
+//#region src/components/menu/menu-tokens.ts
+/** The tokens of {@link Menu}: `--md-comp-menus-<part>` and `--md-comp-menus-standard-<part>`. */
+const menuTokenSet = defineComponentTokens({
+	name: "md-comp-menus",
+	tokens: {
+		"container-elevation": {
+			value: elevation(2),
+			description: "The menu's shadow (each group's, in the gap layout).",
+			compose: "MenuTokens.ContainerElevation",
+			paints: { property: "box-shadow" }
+		},
+		"container-shape": {
+			value: corner("large"),
+			description: "The menu's outer corners at rest.",
+			compose: "MenuTokens.ContainerShape",
+			paints: { property: "border-top-left-radius" }
+		}
+	},
+	scopes: { variant: {
+		standard: {
+			prefix: "md-comp-menus-standard",
+			tokens: {
+				"container-color": {
+					value: color("surface-container-low"),
+					description: "The menu (each group, in the gap layout).",
+					compose: "StandardMenuTokens.ContainerColor",
+					paints: { property: "background-color" }
+				},
+				"menu-item-label-text-color": {
+					value: color("on-surface"),
+					description: "An item’s label.",
+					compose: "StandardMenuTokens.ItemLabelTextColor",
+					paints: {
+						property: "color",
+						slot: "item"
+					}
+				},
+				"menu-item-leading-icon-color": {
+					value: color("on-surface-variant"),
+					description: "An item’s leading icon.",
+					compose: "StandardMenuTokens.ItemLeadingIconColor",
+					paints: {
+						property: "color",
+						slot: "leading-icon"
+					}
+				},
+				"menu-item-trailing-icon-color": {
+					value: color("on-surface-variant"),
+					description: "An item’s trailing icon, keyboard shortcut or trailing text.",
+					compose: "StandardMenuTokens.ItemTrailingIconColor",
+					paints: {
+						property: "color",
+						slot: "trailing-icon"
+					}
+				},
+				"menu-item-selected-container-color": {
+					value: color("tertiary-container"),
+					description: "A selected item.",
+					compose: "StandardMenuTokens.ItemSelectedContainerColor",
+					paints: {
+						property: "background-color",
+						state: "selected"
+					}
+				},
+				"menu-item-selected-label-text-color": {
+					value: color("on-tertiary-container"),
+					description: "A selected item’s label.",
+					compose: "StandardMenuTokens.ItemSelectedLabelTextColor",
+					paints: {
+						property: "color",
+						state: "selected"
+					}
+				}
+			}
+		},
+		vibrant: {
+			prefix: "md-comp-menus-vibrant",
+			fixed: {
+				"container-color": color("tertiary-container"),
+				"menu-item-label-text-color": color("on-tertiary-container"),
+				"menu-item-leading-icon-color": color("on-tertiary-container"),
+				"menu-item-trailing-icon-color": color("on-tertiary-container"),
+				"menu-item-selected-container-color": color("tertiary"),
+				"menu-item-selected-label-text-color": color("on-tertiary")
+			}
+		}
+	} }
+});
+//#endregion
+export { menuTokenSet };
+
+//# sourceMappingURL=menu-tokens.js.map

package/dist/components/menu/menu-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-tokens.js","names":[],"sources":["../../../src/components/menu/menu-tokens.ts"],"sourcesContent":["import { color, corner, defineComponentTokens, elevation } from '../../tokens/component';\n\n/*\n * The menu's component tokens, M3 Expressive's `md.comp.menus.*` (common) and\n * `md.comp.menus.standard.*` names (checked against m3.material.io's token tables,\n * 2026-10-14; `md.comp.menu.*` is the baseline set), with the defaults of `menu-styles.ts`.\n *\n * The menu, its items, and Select's and Autocomplete's option lists (which share the menu's\n * styles) carry `data-tokens=\"md-comp-menus\"` and `data-variant`, so an item's own state\n * (`data-selected`) picks its colours. The vibrant menu's colours have no public names yet\n * (fixed below). The container shape is the menu's outer corner at rest: the submenu morph's\n * active and inactive corners, hover, focus, press, disabled and the selected item's icon\n * colours stay classes.\n */\n\n/** The tokens of {@link Menu}: `--md-comp-menus-<part>` and `--md-comp-menus-standard-<part>`. */\nexport const menuTokenSet = defineComponentTokens({\n  name: 'md-comp-menus',\n  tokens: {\n    'container-elevation': {\n      value: elevation(2),\n      description: \"The menu's shadow (each group's, in the gap layout).\",\n      compose: 'MenuTokens.ContainerElevation',\n      paints: { property: 'box-shadow' },\n    },\n    'container-shape': {\n      value: corner('large'),\n      description: \"The menu's outer corners at rest.\",\n      compose: 'MenuTokens.ContainerShape',\n      paints: { property: 'border-top-left-radius' },\n    },\n  },\n  scopes: {\n    variant: {\n      standard: {\n        prefix: 'md-comp-menus-standard',\n        tokens: {\n          'container-color': {\n            value: color('surface-container-low'),\n            description: 'The menu (each group, in the gap layout).',\n            compose: 'StandardMenuTokens.ContainerColor',\n            paints: { property: 'background-color' },\n          },\n          'menu-item-label-text-color': {\n            value: color('on-surface'),\n            description: 'An item’s label.',\n            compose: 'StandardMenuTokens.ItemLabelTextColor',\n            paints: { property: 'color', slot: 'item' },\n          },\n          'menu-item-leading-icon-color': {\n            value: color('on-surface-variant'),\n            description: 'An item’s leading icon.',\n            compose: 'StandardMenuTokens.ItemLeadingIconColor',\n            paints: { property: 'color', slot: 'leading-icon' },\n          },\n          'menu-item-trailing-icon-color': {\n            value: color('on-surface-variant'),\n            description: 'An item’s trailing icon, keyboard shortcut or trailing text.',\n            compose: 'StandardMenuTokens.ItemTrailingIconColor',\n            paints: { property: 'color', slot: 'trailing-icon' },\n          },\n          'menu-item-selected-container-color': {\n            value: color('tertiary-container'),\n            description: 'A selected item.',\n            compose: 'StandardMenuTokens.ItemSelectedContainerColor',\n            paints: { property: 'background-color', state: 'selected' },\n          },\n          'menu-item-selected-label-text-color': {\n            value: color('on-tertiary-container'),\n            description: 'A selected item’s label.',\n            compose: 'StandardMenuTokens.ItemSelectedLabelTextColor',\n            paints: { property: 'color', state: 'selected' },\n          },\n        },\n      },\n      vibrant: {\n        prefix: 'md-comp-menus-vibrant',\n        fixed: {\n          'container-color': color('tertiary-container'),\n          'menu-item-label-text-color': color('on-tertiary-container'),\n          'menu-item-leading-icon-color': color('on-tertiary-container'),\n          'menu-item-trailing-icon-color': color('on-tertiary-container'),\n          'menu-item-selected-container-color': color('tertiary'),\n          'menu-item-selected-label-text-color': color('on-tertiary'),\n        },\n      },\n    },\n  },\n});\n"],"mappings":";;;AAgBA,MAAa,eAAe,sBAAsB;CAChD,MAAM;CACN,QAAQ;EACN,uBAAuB;GACrB,OAAO,UAAU,CAAC;GAClB,aAAa;GACb,SAAS;GACT,QAAQ,EAAE,UAAU,aAAa;EACnC;EACA,mBAAmB;GACjB,OAAO,OAAO,OAAO;GACrB,aAAa;GACb,SAAS;GACT,QAAQ,EAAE,UAAU,yBAAyB;EAC/C;CACF;CACA,QAAQ,EACN,SAAS;EACP,UAAU;GACR,QAAQ;GACR,QAAQ;IACN,mBAAmB;KACjB,OAAO,MAAM,uBAAuB;KACpC,aAAa;KACb,SAAS;KACT,QAAQ,EAAE,UAAU,mBAAmB;IACzC;IACA,8BAA8B;KAC5B,OAAO,MAAM,YAAY;KACzB,aAAa;KACb,SAAS;KACT,QAAQ;MAAE,UAAU;MAAS,MAAM;KAAO;IAC5C;IACA,gCAAgC;KAC9B,OAAO,MAAM,oBAAoB;KACjC,aAAa;KACb,SAAS;KACT,QAAQ;MAAE,UAAU;MAAS,MAAM;KAAe;IACpD;IACA,iCAAiC;KAC/B,OAAO,MAAM,oBAAoB;KACjC,aAAa;KACb,SAAS;KACT,QAAQ;MAAE,UAAU;MAAS,MAAM;KAAgB;IACrD;IACA,sCAAsC;KACpC,OAAO,MAAM,oBAAoB;KACjC,aAAa;KACb,SAAS;KACT,QAAQ;MAAE,UAAU;MAAoB,OAAO;KAAW;IAC5D;IACA,uCAAuC;KACrC,OAAO,MAAM,uBAAuB;KACpC,aAAa;KACb,SAAS;KACT,QAAQ;MAAE,UAAU;MAAS,OAAO;KAAW;IACjD;GACF;EACF;EACA,SAAS;GACP,QAAQ;GACR,OAAO;IACL,mBAAmB,MAAM,oBAAoB;IAC7C,8BAA8B,MAAM,uBAAuB;IAC3D,gCAAgC,MAAM,uBAAuB;IAC7D,iCAAiC,MAAM,uBAAuB;IAC9D,sCAAsC,MAAM,UAAU;IACtD,uCAAuC,MAAM,aAAa;GAC5D;EACF;CACF,EACF;AACF,CAAC"}

package/dist/components/menu/menu-trigger.d.ts

@@ -0,0 +1,51 @@
+import { ReactNode, RefObject } from "react";
+import "react-aria";
+import "react-stately";
+//#region src/components/menu/menu-trigger.d.ts
+export interface MenuTriggerProps {
+  /** The trigger (a Button, IconButton, …) followed by the `Menu`. */
+  children: ReactNode;
+  /** Whether the menu is open (controlled). */
+  open?: boolean;
+  /** Whether the menu starts open, when uncontrolled. @default false */
+  defaultOpen?: boolean;
+  /** Called when the menu opens or closes. */
+  onOpenChange?: (open: boolean) => void;
+}
+/**
+ * Opens a `Menu` from a button: on press, or with Enter, Space and the arrow keys.
+ * The first child is the trigger (any button-like component); the rest is the menu.
+ * While the menu is open the trigger keeps a pressed state layer (`data-menu-open`), as
+ * M3 asks, however the menu was opened.
+ */
+export declare function MenuTrigger({ children, open, defaultOpen, onOpenChange }: MenuTriggerProps): import("react").JSX.Element;
+export interface ContextMenuTriggerProps {
+  /** The content the menu belongs to, followed by the `Menu`. */
+  children: ReactNode;
+  /** Whether the menu is open (controlled). */
+  open?: boolean;
+  /** Whether the menu starts open, when uncontrolled. @default false */
+  defaultOpen?: boolean;
+  /** Called when the menu opens or closes. */
+  onOpenChange?: (open: boolean) => void;
+  /** Ignore secondary clicks and long presses. @default false */
+  disabled?: boolean;
+}
+/**
+ * Opens a `Menu` as a context menu (M3: "A secondary click, like a right-click on a mouse
+ * or a two-finger tap on a trackpad, opens a context menu"): a secondary click, Shift +
+ * F10 or a long press on a touch screen opens it at the pointer (React Aria
+ * `useMenuTrigger` with `trigger: 'contextMenu'`). The first child is the content the menu
+ * belongs to, wrapped in a `display: contents` element so its layout doesn't change; the
+ * rest is the menu. Make that content focusable (a link, a button or `tabIndex={0}`), so
+ * the keyboard can open the menu and Escape can return focus to it.
+ *
+ * @example
+ * <ContextMenuTrigger>
+ *   <Card tabIndex={0}>…</Card>
+ *   <Menu onAction={(key) => run(key)}>…</Menu>
+ * </ContextMenuTrigger>
+ */
+export declare function ContextMenuTrigger({ children, open, defaultOpen, onOpenChange, disabled }: ContextMenuTriggerProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=menu-trigger.d.ts.map

package/dist/components/menu/menu-trigger.js

@@ -0,0 +1,100 @@
+"use client";
+import { TriggerContext, useTriggerProps } from "../../primitives/TriggerContext.js";
+import { Children, createContext, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMenuTrigger } from "react-aria";
+import { useMenuTriggerState } from "react-stately";
+//#region src/components/menu/menu-trigger.tsx
+/**
+* The menu triggers, apart from the `Menu` itself, so a component can render a trigger and
+* load its menu only when needed (`ButtonGroup`'s overflow menu) without carrying the
+* menu's code up front.
+*/
+const omitLabelledBy = ({ "aria-labelledby": _, ...props }) => props;
+const MenuTriggerContext = createContext(null);
+/**
+* A menu opens on pointer down and takes focus, and React Aria then hides the rest of
+* the page, trigger included, from assistive tech. The browser's follow-up `mousedown` on
+* the trigger would try to focus it there and drop focus on `<body>`, out of the menu.
+* React Aria has already focused the trigger on pointer down, so the default is not needed.
+*/
+const keepMenuFocus = (event) => event.preventDefault();
+/**
+* Opens a `Menu` from a button: on press, or with Enter, Space and the arrow keys.
+* The first child is the trigger (any button-like component); the rest is the menu.
+* While the menu is open the trigger keeps a pressed state layer (`data-menu-open`), as
+* M3 asks, however the menu was opened.
+*/
+function MenuTrigger({ children, open, defaultOpen, onOpenChange }) {
+	const state = useMenuTriggerState({
+		isOpen: open,
+		defaultOpen,
+		onOpenChange
+	});
+	const triggerRef = useRef(null);
+	const { menuTriggerProps, menuProps } = useMenuTrigger({}, state, triggerRef);
+	const triggerValue = useTriggerProps({
+		...menuTriggerProps,
+		"data-menu-open": state.isOpen || void 0,
+		onMouseDown: keepMenuFocus,
+		ref: triggerRef
+	});
+	const [trigger, ...menu] = Children.toArray(children);
+	return /* @__PURE__ */ jsxs(MenuTriggerContext, {
+		value: {
+			state,
+			triggerRef,
+			menuProps
+		},
+		children: [/* @__PURE__ */ jsx(TriggerContext, {
+			value: triggerValue,
+			children: trigger
+		}), menu]
+	});
+}
+/**
+* Opens a `Menu` as a context menu (M3: "A secondary click, like a right-click on a mouse
+* or a two-finger tap on a trackpad, opens a context menu"): a secondary click, Shift +
+* F10 or a long press on a touch screen opens it at the pointer (React Aria
+* `useMenuTrigger` with `trigger: 'contextMenu'`). The first child is the content the menu
+* belongs to, wrapped in a `display: contents` element so its layout doesn't change; the
+* rest is the menu. Make that content focusable (a link, a button or `tabIndex={0}`), so
+* the keyboard can open the menu and Escape can return focus to it.
+*
+* @example
+* <ContextMenuTrigger>
+*   <Card tabIndex={0}>…</Card>
+*   <Menu onAction={(key) => run(key)}>…</Menu>
+* </ContextMenuTrigger>
+*/
+function ContextMenuTrigger({ children, open, defaultOpen, onOpenChange, disabled }) {
+	const state = useMenuTriggerState({
+		isOpen: open,
+		defaultOpen,
+		onOpenChange
+	});
+	const triggerRef = useRef(null);
+	const { menuTriggerProps, menuProps } = useMenuTrigger({
+		trigger: "contextMenu",
+		isDisabled: disabled
+	}, state, triggerRef);
+	const [target, ...menu] = Children.toArray(children);
+	return /* @__PURE__ */ jsxs(MenuTriggerContext, {
+		value: {
+			state,
+			triggerRef,
+			menuProps: omitLabelledBy(menuProps)
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			...menuTriggerProps,
+			ref: triggerRef,
+			"data-context-menu-trigger": "",
+			className: "contents",
+			children: target
+		}), menu]
+	});
+}
+//#endregion
+export { ContextMenuTrigger, MenuTrigger, MenuTriggerContext };
+
+//# sourceMappingURL=menu-trigger.js.map

package/dist/components/menu/menu-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-trigger.js","names":[],"sources":["../../../src/components/menu/menu-trigger.tsx"],"sourcesContent":["'use client';\n\n/**\n * The menu triggers, apart from the `Menu` itself, so a component can render a trigger and\n * load its menu only when needed (`ButtonGroup`'s overflow menu) without carrying the\n * menu's code up front.\n */\nimport {\n  Children,\n  createContext,\n  useRef,\n  type MouseEvent,\n  type ReactNode,\n  type RefObject,\n} from 'react';\nimport { useMenuTrigger, type AriaMenuOptions } from 'react-aria';\nimport { useMenuTriggerState, type RootMenuTriggerState } from 'react-stately';\nimport {\n  TriggerContext,\n  useTriggerProps,\n  type TriggerContextValue,\n} from '../../primitives/TriggerContext';\n\n/** What a trigger shares with its `Menu`. */\nexport interface MenuTriggerContextValue {\n  state: RootMenuTriggerState;\n  triggerRef: RefObject<HTMLElement | null>;\n  menuProps: AriaMenuOptions<unknown>;\n}\n\nconst omitLabelledBy = ({ 'aria-labelledby': _, ...props }: AriaMenuOptions<unknown>) => props;\n\nexport const MenuTriggerContext = createContext<MenuTriggerContextValue | null>(null);\n\nexport interface MenuTriggerProps {\n  /** The trigger (a Button, IconButton, …) followed by the `Menu`. */\n  children: ReactNode;\n  /** Whether the menu is open (controlled). */\n  open?: boolean;\n  /** Whether the menu starts open, when uncontrolled. @default false */\n  defaultOpen?: boolean;\n  /** Called when the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * A menu opens on pointer down and takes focus, and React Aria then hides the rest of\n * the page, trigger included, from assistive tech. The browser's follow-up `mousedown` on\n * the trigger would try to focus it there and drop focus on `<body>`, out of the menu.\n * React Aria has already focused the trigger on pointer down, so the default is not needed.\n */\nconst keepMenuFocus = (event: MouseEvent) => event.preventDefault();\n\n/**\n * Opens a `Menu` from a button: on press, or with Enter, Space and the arrow keys.\n * The first child is the trigger (any button-like component); the rest is the menu.\n * While the menu is open the trigger keeps a pressed state layer (`data-menu-open`), as\n * M3 asks, however the menu was opened.\n */\nexport function MenuTrigger({ children, open, defaultOpen, onOpenChange }: MenuTriggerProps) {\n  const state = useMenuTriggerState({ isOpen: open, defaultOpen, onOpenChange });\n  const triggerRef = useRef<HTMLElement>(null);\n  const { menuTriggerProps, menuProps } = useMenuTrigger({}, state, triggerRef);\n  // Merged into an enclosing trigger's props, so a TooltipTrigger around it still works.\n  const triggerValue = useTriggerProps({\n    ...(menuTriggerProps as TriggerContextValue),\n    'data-menu-open': state.isOpen || undefined,\n    onMouseDown: keepMenuFocus,\n    ref: triggerRef,\n  });\n  const [trigger, ...menu] = Children.toArray(children);\n  return (\n    <MenuTriggerContext value={{ state, triggerRef, menuProps }}>\n      <TriggerContext value={triggerValue}>{trigger}</TriggerContext>\n      {menu}\n    </MenuTriggerContext>\n  );\n}\n\nexport interface ContextMenuTriggerProps {\n  /** The content the menu belongs to, followed by the `Menu`. */\n  children: ReactNode;\n  /** Whether the menu is open (controlled). */\n  open?: boolean;\n  /** Whether the menu starts open, when uncontrolled. @default false */\n  defaultOpen?: boolean;\n  /** Called when the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Ignore secondary clicks and long presses. @default false */\n  disabled?: boolean;\n}\n\n/**\n * Opens a `Menu` as a context menu (M3: \"A secondary click, like a right-click on a mouse\n * or a two-finger tap on a trackpad, opens a context menu\"): a secondary click, Shift +\n * F10 or a long press on a touch screen opens it at the pointer (React Aria\n * `useMenuTrigger` with `trigger: 'contextMenu'`). The first child is the content the menu\n * belongs to, wrapped in a `display: contents` element so its layout doesn't change; the\n * rest is the menu. Make that content focusable (a link, a button or `tabIndex={0}`), so\n * the keyboard can open the menu and Escape can return focus to it.\n *\n * @example\n * <ContextMenuTrigger>\n *   <Card tabIndex={0}>…</Card>\n *   <Menu onAction={(key) => run(key)}>…</Menu>\n * </ContextMenuTrigger>\n */\nexport function ContextMenuTrigger({\n  children,\n  open,\n  defaultOpen,\n  onOpenChange,\n  disabled,\n}: ContextMenuTriggerProps) {\n  const state = useMenuTriggerState({ isOpen: open, defaultOpen, onOpenChange });\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const { menuTriggerProps, menuProps } = useMenuTrigger(\n    { trigger: 'contextMenu', isDisabled: disabled },\n    state,\n    triggerRef,\n  );\n  const [target, ...menu] = Children.toArray(children);\n  // React Aria names the menu after its trigger, here the whole content: name it with the\n  // `Menu`'s own `aria-label` instead.\n  return (\n    <MenuTriggerContext value={{ state, triggerRef, menuProps: omitLabelledBy(menuProps) }}>\n      <div\n        {...(menuTriggerProps as TriggerContextValue)}\n        ref={triggerRef}\n        data-context-menu-trigger=\"\"\n        className=\"contents\"\n      >\n        {target}\n      </div>\n      {menu}\n    </MenuTriggerContext>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AA8BA,MAAM,kBAAkB,EAAE,mBAAmB,GAAG,GAAG,YAAsC;AAEzF,MAAa,qBAAqB,cAA8C,IAAI;;;;;;;AAmBpF,MAAM,iBAAiB,UAAsB,MAAM,eAAe;;;;;;;AAQlE,SAAgB,YAAY,EAAE,UAAU,MAAM,aAAa,gBAAkC;CAC3F,MAAM,QAAQ,oBAAoB;EAAE,QAAQ;EAAM;EAAa;CAAa,CAAC;CAC7E,MAAM,aAAa,OAAoB,IAAI;CAC3C,MAAM,EAAE,kBAAkB,cAAc,eAAe,CAAC,GAAG,OAAO,UAAU;CAE5E,MAAM,eAAe,gBAAgB;EACnC,GAAI;EACJ,kBAAkB,MAAM,UAAU,KAAA;EAClC,aAAa;EACb,KAAK;CACP,CAAC;CACD,MAAM,CAAC,SAAS,GAAG,QAAQ,SAAS,QAAQ,QAAQ;CACpD,OACE,qBAAC,oBAAD;EAAoB,OAAO;GAAE;GAAO;GAAY;EAAU;EAA1D,UAAA,CACE,oBAAC,gBAAD;GAAgB,OAAO;GAAe,UAAA;EAAwB,CAAA,GAC7D,IACiB;;AAExB;;;;;;;;;;;;;;;;AA8BA,SAAgB,mBAAmB,EACjC,UACA,MACA,aACA,cACA,YAC0B;CAC1B,MAAM,QAAQ,oBAAoB;EAAE,QAAQ;EAAM;EAAa;CAAa,CAAC;CAC7E,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,EAAE,kBAAkB,cAAc,eACtC;EAAE,SAAS;EAAe,YAAY;CAAS,GAC/C,OACA,UACF;CACA,MAAM,CAAC,QAAQ,GAAG,QAAQ,SAAS,QAAQ,QAAQ;CAGnD,OACE,qBAAC,oBAAD;EAAoB,OAAO;GAAE;GAAO;GAAY,WAAW,eAAe,SAAS;EAAE;EAArF,UAAA,CACE,oBAAC,OAAD;GACE,GAAK;GACL,KAAK;GACL,6BAA0B;GAC1B,WAAU;GAET,UAAA;EACE,CAAA,GACJ,IACiB;;AAExB"}

package/dist/components/menu/use-reveal-entering.js

@@ -0,0 +1,42 @@
+"use client";
+import { useLayoutEffect, useState } from "react";
+//#region src/components/menu/use-reveal-entering.ts
+/**
+* Holds a menu's reveal closed (`data-entering`) until React Aria has placed it, then lets
+* it open, so it grows from the edge nearest its anchor.
+*
+* The reveal's closed clip depends on `data-placement` (from the top below the anchor, from
+* the bottom above it, from the side beside it). A `@starting-style` rule is read the first
+* time the element's style is resolved, which React Aria's measuring forces before it has
+* set the placement, so every menu used to open from its top edge. Instead, the closed state
+* is a class with no transition: once the placement is known (before the first paint, as
+* React Aria places in a layout effect), the closed clip for that edge is resolved and the
+* class removed, and the clip and opacity transition open from there.
+*
+* Should the placement never arrive, the menu opens on the next frame anyway.
+*/
+function useRevealEntering(placement, ref) {
+	const [entering, setEntering] = useState(true);
+	useLayoutEffect(() => {
+		if (!entering) return;
+		const open = () => {
+			if (ref.current) getComputedStyle(ref.current).clipPath;
+			setEntering(false);
+		};
+		if (placement) {
+			open();
+			return;
+		}
+		const frame = requestAnimationFrame(open);
+		return () => cancelAnimationFrame(frame);
+	}, [
+		entering,
+		placement,
+		ref
+	]);
+	return entering;
+}
+//#endregion
+export { useRevealEntering };
+
+//# sourceMappingURL=use-reveal-entering.js.map

package/dist/components/menu/use-reveal-entering.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-reveal-entering.js","names":[],"sources":["../../../src/components/menu/use-reveal-entering.ts"],"sourcesContent":["'use client';\n\nimport { useLayoutEffect, useState, type RefObject } from 'react';\n\n/**\n * Holds a menu's reveal closed (`data-entering`) until React Aria has placed it, then lets\n * it open, so it grows from the edge nearest its anchor.\n *\n * The reveal's closed clip depends on `data-placement` (from the top below the anchor, from\n * the bottom above it, from the side beside it). A `@starting-style` rule is read the first\n * time the element's style is resolved, which React Aria's measuring forces before it has\n * set the placement, so every menu used to open from its top edge. Instead, the closed state\n * is a class with no transition: once the placement is known (before the first paint, as\n * React Aria places in a layout effect), the closed clip for that edge is resolved and the\n * class removed, and the clip and opacity transition open from there.\n *\n * Should the placement never arrive, the menu opens on the next frame anyway.\n */\nexport function useRevealEntering(\n  placement: string | null | undefined,\n  ref: RefObject<HTMLElement | null>,\n) {\n  const [entering, setEntering] = useState(true);\n  useLayoutEffect(() => {\n    if (!entering) return;\n    const open = () => {\n      // Resolve the closed state for this placement, so the transition starts from it.\n      if (ref.current) void getComputedStyle(ref.current).clipPath;\n      setEntering(false);\n    };\n    if (placement) {\n      open();\n      return;\n    }\n    const frame = requestAnimationFrame(open);\n    return () => cancelAnimationFrame(frame);\n  }, [entering, placement, ref]);\n  return entering;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,SAAgB,kBACd,WACA,KACA;CACA,MAAM,CAAC,UAAU,eAAe,SAAS,IAAI;CAC7C,sBAAsB;EACpB,IAAI,CAAC,UAAU;EACf,MAAM,aAAa;GAEjB,IAAI,IAAI,SAAS,iBAAsB,IAAI,OAAO,CAAC,CAAC;GACpD,YAAY,KAAK;EACnB;EACA,IAAI,WAAW;GACb,KAAK;GACL;EACF;EACA,MAAM,QAAQ,sBAAsB,IAAI;EACxC,aAAa,qBAAqB,KAAK;CACzC,GAAG;EAAC;EAAU;EAAW;CAAG,CAAC;CAC7B,OAAO;AACT"}