@viraui/react 1.0.15 → 1.0.16

package/dist/components/menu/menu-checkbox-item.js

@@ -1,5 +1,4 @@
 import { clsx } from "../../core/clsx.js";
-import { ChromeCheck } from "../../internal/chrome-icons/chrome-icons.js";
 import { Surface } from "../surface/surface.js";
 import menu_module_default from "./menu.module.js";
 import { MenuIndicatorSlot } from "./menu-indicator-slot.js";
@@ -7,7 +6,7 @@ import { MenuItemRow } from "./menu-item-row.js";
 import { jsx } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
 //#region src/components/menu/menu-checkbox-item.tsx
-var MenuCheckboxItem = ({ addon, addonAlign = "center", children, className, closeOnClick = false, indicator, note, sentiment, ...otherProps }) => /* @__PURE__ */ jsx(Menu.CheckboxItem, {
+var MenuCheckboxItem = ({ addon, children, className, closeOnClick = false, note, sentiment, ...otherProps }) => /* @__PURE__ */ jsx(Menu.CheckboxItem, {
 	...otherProps,
 	className: clsx(menu_module_default.Item, className),
 	closeOnClick,
@@ -15,12 +14,8 @@ var MenuCheckboxItem = ({ addon, addonAlign = "center", children, className, clo
 	render: /* @__PURE__ */ jsx(Surface, { radius: "auto" }),
 	children: /* @__PURE__ */ jsx(MenuItemRow, {
 		addon,
-		addonAlign,
 		note,
-		trailing: /* @__PURE__ */ jsx(MenuIndicatorSlot, {
-			kind: "checkbox",
-			children: indicator ?? /* @__PURE__ */ jsx(ChromeCheck, { size: 16 })
-		}),
+		trailing: /* @__PURE__ */ jsx(MenuIndicatorSlot, { kind: "checkbox" }),
 		children
 	})
 });

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

@@ -1,21 +1,18 @@
-import { clsx } from "../../core/clsx.js";
 import { Text } from "../text/text.js";
 import { Stack } from "../stack/stack.js";
-import menu_module_default from "./menu.module.js";
-import { MenuIndicatorSlot } from "./menu-indicator-slot.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
 //#region src/components/menu/menu-group.tsx
 var MenuGroup = ({ children, className, label, ...otherProps }) => /* @__PURE__ */ jsxs(Menu.Group, {
 	...otherProps,
-	className: clsx(menu_module_default.Group, className),
+	className,
 	render: /* @__PURE__ */ jsx(Stack, {
 		direction: "column",
 		fillChildren: false,
 		rowGap: "2x-small",
 		vPadding: "2x-small"
 	}),
-	children: [/* @__PURE__ */ jsxs(Menu.GroupLabel, {
+	children: [/* @__PURE__ */ jsx(Menu.GroupLabel, {
 		render: /* @__PURE__ */ jsx(Stack, {
 			columnGap: "small",
 			direction: "row",
@@ -24,12 +21,12 @@ var MenuGroup = ({ children, className, label, ...otherProps }) => /* @__PURE__
 			vAlign: "center",
 			vPadding: ["small", "x-small"]
 		}),
-		children: [/* @__PURE__ */ jsx(Text, {
+		children: /* @__PURE__ */ jsx(Text, {
 			size: "x-small",
 			tone: "muted",
 			weight: "semibold",
 			children: label
-		}), /* @__PURE__ */ jsx(MenuIndicatorSlot, {})]
+		})
 	}), children]
 });
 //#endregion

package/dist/components/menu/menu-indicator-slot.d.ts

@@ -1,15 +1,11 @@
 import type * as React from 'react';
-export type MenuIndicatorSlotKind = 'spacer' | 'checkbox' | 'radio' | 'chevron';
+export type MenuIndicatorSlotKind = 'checkbox' | 'radio' | 'chevron';
 export type MenuIndicatorSlotProps = {
-    children?: React.ReactNode;
     /**
      * Trailing footprint kind.
-     * - `spacer`: empty matching footprint (Item / LinkItem)
-     * - `checkbox` / `radio`: Base UI indicator with `keepMounted`
+     * - `checkbox` / `radio`: Base UI indicator with `keepMounted` + built-in check
      * - `chevron`: always-visible submenu end chevron
-     *
-     * @default 'spacer'
      */
-    kind?: MenuIndicatorSlotKind;
+    kind: MenuIndicatorSlotKind;
 };
 export declare const MenuIndicatorSlot: React.FC<MenuIndicatorSlotProps>;

package/dist/components/menu/menu-indicator-slot.js

@@ -1,3 +1,4 @@
+import { ChromeCheck, ChromeChevronEnd } from "../../internal/chrome-icons/chrome-icons.js";
 import { Stack } from "../stack/stack.js";
 import menu_module_default from "./menu.module.js";
 import { jsx } from "react/jsx-runtime";
@@ -10,42 +11,35 @@ var indicatorStackRender = /* @__PURE__ */ jsx(Stack, {
 	inline: true,
 	vAlign: "center"
 });
-var MenuIndicatorSlot = ({ children, kind = "spacer" }) => {
+var checkIcon = /* @__PURE__ */ jsx(ChromeCheck, { size: 16 });
+var chevronIcon = /* @__PURE__ */ jsx(ChromeChevronEnd, { size: 16 });
+var indicatorSlotProps = {
+	className: menu_module_default.Indicator,
+	"data-grow": "false"
+};
+var MenuIndicatorSlot = ({ kind }) => {
 	if (kind === "checkbox") return /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
-		className: menu_module_default.Indicator,
-		"data-grow": "false",
+		...indicatorSlotProps,
 		keepMounted: true,
 		render: indicatorStackRender,
-		children
+		children: checkIcon
 	});
 	if (kind === "radio") return /* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
-		className: menu_module_default.Indicator,
-		"data-grow": "false",
+		...indicatorSlotProps,
 		keepMounted: true,
 		render: indicatorStackRender,
-		children
+		children: checkIcon
 	});
-	if (kind === "chevron") return /* @__PURE__ */ jsx(Stack, {
+	return /* @__PURE__ */ jsx(Stack, {
+		...indicatorSlotProps,
 		"aria-hidden": true,
-		className: menu_module_default.Indicator,
-		"data-grow": "false",
 		"data-kind": "chevron",
 		"data-shrink": "false",
 		fillChildren: false,
 		hAlign: "center",
 		inline: true,
 		vAlign: "center",
-		children
-	});
-	return /* @__PURE__ */ jsx(Stack, {
-		"aria-hidden": true,
-		className: menu_module_default.Indicator,
-		"data-grow": "false",
-		"data-shrink": "false",
-		fillChildren: false,
-		hAlign: "center",
-		inline: true,
-		vAlign: "center"
+		children: chevronIcon
 	});
 };
 //#endregion

package/dist/components/menu/menu-item-row.d.ts

@@ -1,12 +1,10 @@
-import { StackProps } from '../stack';
 import type * as React from 'react';
 export type MenuItemRowProps = {
     addon?: React.ReactNode;
-    addonAlign?: StackProps['vAlign'];
     children?: React.ReactNode;
     /**
-     * Optional muted note (shortcut / secondary label) at the end of the content row,
-     * immediately before any trailing indicator.
+     * Optional muted note (shortcut / secondary label) after the label,
+     * before any trailing chevron / check indicator.
      */
     note?: React.ReactNode;
     trailing?: React.ReactNode;

package/dist/components/menu/menu-item-row.js

@@ -1,36 +1,34 @@
 import { Text } from "../text/text.js";
 import { Stack } from "../stack/stack.js";
+import menu_module_default from "./menu.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/menu/menu-item-row.tsx
 /**
 * Shared internal row layout for all Menu item kinds (addon + label + optional note + trailing).
 * Not a public export.
 */
-var MenuItemRow = ({ addon, addonAlign = "center", children, note, trailing }) => /* @__PURE__ */ jsxs(Stack, {
-	columnGap: "medium",
+var MenuItemRow = ({ addon, children, note, trailing }) => /* @__PURE__ */ jsxs(Stack, {
+	columnGap: "small",
+	"data-grow": "true",
 	direction: "row",
 	fillChildren: false,
 	hPadding: "small",
 	vPadding: "small",
 	vAlign: "center",
+	className: menu_module_default.ItemRow,
 	children: [
-		/* @__PURE__ */ jsxs(Stack, {
-			columnGap: "small",
+		addon && /* @__PURE__ */ jsx(Stack, {
+			"aria-hidden": "true",
+			"data-grow": "false",
+			"data-shrink": "false",
+			children: addon
+		}),
+		/* @__PURE__ */ jsx(Text, {
 			"data-grow": "true",
 			"data-shrink": "true",
-			direction: "row",
-			fillChildren: false,
-			vAlign: addonAlign,
-			children: [addon && /* @__PURE__ */ jsx(Stack, {
-				"aria-hidden": "true",
-				"data-grow": "false",
-				"data-shrink": "false",
-				children: addon
-			}), /* @__PURE__ */ jsx(Text, {
-				lineHeight: "small",
-				size: "small",
-				children
-			})]
+			lineHeight: "small",
+			size: "small",
+			children
 		}),
 		note && /* @__PURE__ */ jsx(Text, {
 			whiteSpace: "nowrap",

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

@@ -1,5 +1,4 @@
 import { MenuItem as MenuItemPrimitive } from '@base-ui/react/menu';
-import { StackProps } from '../stack';
 import type * as React from 'react';
 /**
  * Public Menu.Item props.
@@ -14,14 +13,7 @@ export type MenuItemProps = MenuItemPrimitive.Props & {
      */
     addon?: React.ReactNode;
     /**
-     * Vertical alignment of the addon relative to the label row.
-     *
-     * @default 'center'
-     */
-    addonAlign?: StackProps['vAlign'];
-    /**
-     * End-aligned secondary text (e.g. keyboard shortcut). Rendered muted `x-small`
-     * at the end of the row (replaces the empty indicator spacer when set).
+     * End-aligned secondary text (e.g. keyboard shortcut). Rendered muted `x-small`.
      *
      * @default No note is rendered.
      */

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

@@ -1,21 +1,18 @@
 import { clsx } from "../../core/clsx.js";
 import { Surface } from "../surface/surface.js";
 import menu_module_default from "./menu.module.js";
-import { MenuIndicatorSlot } from "./menu-indicator-slot.js";
 import { MenuItemRow } from "./menu-item-row.js";
 import { jsx } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
 //#region src/components/menu/menu-item.tsx
-var MenuItem = ({ addon, addonAlign = "center", children, className, note, sentiment, ...otherProps }) => /* @__PURE__ */ jsx(Menu.Item, {
+var MenuItem = ({ addon, children, className, note, sentiment, ...otherProps }) => /* @__PURE__ */ jsx(Menu.Item, {
 	...otherProps,
 	className: clsx(menu_module_default.Item, className),
 	...sentiment && { "data-sentiment": sentiment },
 	render: /* @__PURE__ */ jsx(Surface, { radius: "auto" }),
 	children: /* @__PURE__ */ jsx(MenuItemRow, {
 		addon,
-		addonAlign,
 		note,
-		...!note && { trailing: /* @__PURE__ */ jsx(MenuIndicatorSlot, {}) },
 		children
 	})
 });

package/dist/components/menu/menu-link-item.d.ts

@@ -1,5 +1,4 @@
-import { MenuLinkItem as MenuLinkItemPrimitive } from '@base-ui/react/menu';
-import { StackProps } from '../stack';
+import { MenuLinkItem as MenuLinkItemPrimitive } from '@base-ui/react';
 import type * as React from 'react';
 /**
  * Public Menu.LinkItem props.
@@ -14,14 +13,7 @@ export type MenuLinkItemProps = MenuLinkItemPrimitive.Props & {
      */
     addon?: React.ReactNode;
     /**
-     * Vertical alignment of the addon relative to the label row.
-     *
-     * @default 'center'
-     */
-    addonAlign?: StackProps['vAlign'];
-    /**
-     * End-aligned secondary text (e.g. keyboard shortcut). Rendered muted `x-small`
-     * at the end of the row (replaces the empty indicator spacer when set).
+     * End-aligned secondary text (e.g. keyboard shortcut). Rendered muted `x-small`.
      *
      * @default No note is rendered.
      */

package/dist/components/menu/menu-link-item.js

@@ -1,24 +1,22 @@
 import { clsx } from "../../core/clsx.js";
+import { Stack } from "../stack/stack.js";
 import { Surface } from "../surface/surface.js";
 import menu_module_default from "./menu.module.js";
-import { MenuIndicatorSlot } from "./menu-indicator-slot.js";
 import { MenuItemRow } from "./menu-item-row.js";
 import { jsx } from "react/jsx-runtime";
-import { Menu } from "@base-ui/react/menu";
+import { Menu } from "@base-ui/react";
 //#region src/components/menu/menu-link-item.tsx
-var MenuLinkItem = ({ addon, addonAlign = "center", children, className, note, sentiment, ...otherProps }) => /* @__PURE__ */ jsx(Menu.LinkItem, {
+var MenuLinkItem = ({ addon, children, className, note, sentiment, ...otherProps }) => /* @__PURE__ */ jsx(Menu.LinkItem, {
 	...otherProps,
 	className: clsx(menu_module_default.Item, className),
 	...sentiment && { "data-sentiment": sentiment },
 	render: /* @__PURE__ */ jsx(Surface, {
 		radius: "auto",
-		render: /* @__PURE__ */ jsx("a", {})
+		render: /* @__PURE__ */ jsx(Stack, { render: /* @__PURE__ */ jsx("a", {}) })
 	}),
 	children: /* @__PURE__ */ jsx(MenuItemRow, {
 		addon,
-		addonAlign,
 		note,
-		...!note && { trailing: /* @__PURE__ */ jsx(MenuIndicatorSlot, {}) },
 		children
 	})
 });

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

@@ -6,7 +6,8 @@ type MenuPopupPositionerProps = Omit<MenuPositioner.Props, 'className' | 'style'
  *
  * Encapsulates Portal + Positioner + Popup with Elevator + Surface list chrome
  * (Select-like). Positioning props forward to the Positioner; `sideOffset`
- * defaults to `2`.
+ * defaults to `2`. RTL placement comes from Base UI `DirectionProvider`;
+ * app must also set HTML/`dir` (or `direction`) so portaled CSS inherits RTL.
  *
  * @default `sideOffset` is `2`.
  */

package/dist/components/menu/menu-radio-group.js

@@ -1,21 +1,18 @@
-import { clsx } from "../../core/clsx.js";
 import { Text } from "../text/text.js";
 import { Stack } from "../stack/stack.js";
-import menu_module_default from "./menu.module.js";
-import { MenuIndicatorSlot } from "./menu-indicator-slot.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
 //#region src/components/menu/menu-radio-group.tsx
 var MenuRadioGroup = ({ children, className, label, ...otherProps }) => /* @__PURE__ */ jsxs(Menu.RadioGroup, {
 	...otherProps,
-	className: clsx(menu_module_default.Group, className),
+	className,
 	render: /* @__PURE__ */ jsx(Stack, {
 		direction: "column",
 		fillChildren: false,
 		rowGap: "2x-small",
 		vPadding: "2x-small"
 	}),
-	children: [label && /* @__PURE__ */ jsxs(Menu.GroupLabel, {
+	children: [label && /* @__PURE__ */ jsx(Menu.GroupLabel, {
 		render: /* @__PURE__ */ jsx(Stack, {
 			columnGap: "small",
 			direction: "row",
@@ -24,12 +21,12 @@ var MenuRadioGroup = ({ children, className, label, ...otherProps }) => /* @__PU
 			vAlign: "center",
 			vPadding: ["small", "small"]
 		}),
-		children: [/* @__PURE__ */ jsx(Text, {
+		children: /* @__PURE__ */ jsx(Text, {
 			size: "x-small",
 			tone: "muted",
 			weight: "semibold",
 			children: label
-		}), /* @__PURE__ */ jsx(MenuIndicatorSlot, {})]
+		})
 	}), children]
 });
 //#endregion

package/dist/components/menu/menu-radio-item.d.ts

@@ -1,5 +1,4 @@
 import { MenuRadioItem as MenuRadioItemPrimitive } from '@base-ui/react/menu';
-import { StackProps } from '../stack';
 import type * as React from 'react';
 /**
  * Public Menu.RadioItem props.
@@ -13,18 +12,6 @@ export type MenuRadioItemProps = MenuRadioItemPrimitive.Props & {
      * @default No addon is rendered.
      */
     addon?: React.ReactNode;
-    /**
-     * Vertical alignment of the addon relative to the label row.
-     *
-     * @default 'center'
-     */
-    addonAlign?: StackProps['vAlign'];
-    /**
-     * Custom indicator node when selected.
-     *
-     * @default Built-in Check chrome SVG at size 16
-     */
-    indicator?: React.ReactNode;
     /**
      * End-aligned secondary text (e.g. keyboard shortcut) before the check indicator.
      * Rendered muted `x-small`.

package/dist/components/menu/menu-radio-item.js

@@ -1,5 +1,4 @@
 import { clsx } from "../../core/clsx.js";
-import { ChromeCheck } from "../../internal/chrome-icons/chrome-icons.js";
 import { Surface } from "../surface/surface.js";
 import menu_module_default from "./menu.module.js";
 import { MenuIndicatorSlot } from "./menu-indicator-slot.js";
@@ -7,7 +6,7 @@ import { MenuItemRow } from "./menu-item-row.js";
 import { jsx } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
 //#region src/components/menu/menu-radio-item.tsx
-var MenuRadioItem = ({ addon, addonAlign = "center", children, className, closeOnClick = false, indicator, note, sentiment, ...otherProps }) => /* @__PURE__ */ jsx(Menu.RadioItem, {
+var MenuRadioItem = ({ addon, children, className, closeOnClick = false, note, sentiment, ...otherProps }) => /* @__PURE__ */ jsx(Menu.RadioItem, {
 	...otherProps,
 	className: clsx(menu_module_default.Item, className),
 	closeOnClick,
@@ -15,12 +14,8 @@ var MenuRadioItem = ({ addon, addonAlign = "center", children, className, closeO
 	render: /* @__PURE__ */ jsx(Surface, { radius: "auto" }),
 	children: /* @__PURE__ */ jsx(MenuItemRow, {
 		addon,
-		addonAlign,
 		note,
-		trailing: /* @__PURE__ */ jsx(MenuIndicatorSlot, {
-			kind: "radio",
-			children: indicator ?? /* @__PURE__ */ jsx(ChromeCheck, { size: 16 })
-		}),
+		trailing: /* @__PURE__ */ jsx(MenuIndicatorSlot, { kind: "radio" }),
 		children
 	})
 });

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

@@ -1,5 +1,4 @@
 import { MenuSubmenuTrigger as MenuSubmenuTriggerPrimitive } from '@base-ui/react/menu';
-import { StackProps } from '../stack';
 import type * as React from 'react';
 /**
  * Public Menu.SubmenuTrigger props.
@@ -13,12 +12,6 @@ export type MenuSubmenuTriggerProps = MenuSubmenuTriggerPrimitive.Props & {
      * @default No addon is rendered.
      */
     addon?: React.ReactNode;
-    /**
-     * Vertical alignment of the addon relative to the label row.
-     *
-     * @default 'center'
-     */
-    addonAlign?: StackProps['vAlign'];
     /**
      * Visual sentiment. `destructive` uses highlight-red wash + text.
      *

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

@@ -1,5 +1,4 @@
 import { clsx } from "../../core/clsx.js";
-import { ChromeChevronEnd } from "../../internal/chrome-icons/chrome-icons.js";
 import { Surface } from "../surface/surface.js";
 import menu_module_default from "./menu.module.js";
 import { MenuIndicatorSlot } from "./menu-indicator-slot.js";
@@ -7,18 +6,14 @@ import { MenuItemRow } from "./menu-item-row.js";
 import { jsx } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
 //#region src/components/menu/menu-submenu-trigger.tsx
-var MenuSubmenuTrigger = ({ addon, addonAlign = "center", children, className, sentiment, ...otherProps }) => /* @__PURE__ */ jsx(Menu.SubmenuTrigger, {
+var MenuSubmenuTrigger = ({ addon, children, className, sentiment, ...otherProps }) => /* @__PURE__ */ jsx(Menu.SubmenuTrigger, {
 	...otherProps,
 	className: clsx(menu_module_default.Item, className),
 	...sentiment && { "data-sentiment": sentiment },
 	render: /* @__PURE__ */ jsx(Surface, { radius: "auto" }),
 	children: /* @__PURE__ */ jsx(MenuItemRow, {
 		addon,
-		addonAlign,
-		trailing: /* @__PURE__ */ jsx(MenuIndicatorSlot, {
-			kind: "chevron",
-			children: /* @__PURE__ */ jsx(ChromeChevronEnd, { size: 16 })
-		}),
+		trailing: /* @__PURE__ */ jsx(MenuIndicatorSlot, { kind: "chevron" }),
 		children
 	})
 });

package/dist/components/menu/menu.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --__menu-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__menu-module__MenuPopup_GkrGa{min-inline-size:var(--anchor-width);max-block-size:var(--available-height);scroll-padding-block:var(--space-x-small);color:var(--global-foreground);outline:none;position:relative;overscroll-behavior:contain;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{translate:0 calc(var(--__menu-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__menu-list-appear-offset)}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style],&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__menu-list-appear-offset) 0}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style],&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__menu-list-appear-offset) * -1) 0}&[data-instant=click],&[data-instant=dismiss]{transition:none;scale:1;translate:0;opacity:1}&:focus,&:focus-visible{outline:none}}.viraui__menu-module__Indicator_btL99{min-inline-size:var(--space-medium);min-block-size:var(--space-medium);inline-size:fit-content;block-size:fit-content;color:var(--global-primary);opacity:0;&[data-checked]{opacity:1}&[data-kind=chevron]{opacity:1;color:var(--global-foreground);&:dir(rtl){scale:-1 1}}}.viraui__menu-module__Group_Orz5Y+.viraui__menu-module__Group_Orz5Y{margin-block-start:var(--space-medium)}}@layer viraui.overrides{.viraui__menu-module__Item_9zmEO{cursor:pointer;min-block-size:var(--space-x-large);&:any-link{display:flex}&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--vibrancy-enable: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&:not([data-disabled],:hover)[data-checked]{background:light-dark(oklab(from var(--global-contrast) l a b/8%),oklab(from var(--global-contrast) l a b/5%))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}&[data-sentiment=destructive]{color:var(--highlight-red);outline-color:var(--highlight-red);&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:oklab(from var(--highlight-red) l a b/12%)}}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --__menu-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__menu-module__MenuPopup_GkrGa{min-inline-size:var(--anchor-width);max-block-size:var(--available-height);scroll-padding-block:var(--space-x-small);color:var(--global-foreground);outline:none;position:relative;overscroll-behavior:contain;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{translate:0 calc(var(--__menu-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__menu-list-appear-offset)}&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__menu-list-appear-offset) 0}&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__menu-list-appear-offset) * -1) 0}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style]{translate:var(--__menu-list-appear-offset) 0;&:dir(rtl){translate:calc(var(--__menu-list-appear-offset) * -1) 0}}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style]{translate:calc(var(--__menu-list-appear-offset) * -1) 0;&:dir(rtl){translate:var(--__menu-list-appear-offset) 0}}&[data-instant=click],&[data-instant=dismiss]{transition:none;scale:1;translate:0;opacity:1}&:focus,&:focus-visible{outline:none}}.viraui__menu-module__ItemRow_Be40k{min-block-size:var(--space-x-large)}.viraui__menu-module__Indicator_btL99{min-inline-size:var(--space-small);min-block-size:var(--space-small);inline-size:fit-content;block-size:fit-content;color:var(--global-primary);opacity:0;&[data-checked]{opacity:1}&[data-kind=chevron]{opacity:1;color:var(--global-foreground);&:dir(rtl){scale:-1 1}}}}@layer viraui.overrides{.viraui__menu-module__Item_9zmEO{cursor:pointer;&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--vibrancy-enable: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&:not([data-disabled],:hover)[data-checked]{background:light-dark(oklab(from var(--global-contrast) l a b/8%),oklab(from var(--global-contrast) l a b/5%))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}&[data-sentiment=destructive]{color:var(--highlight-red);outline-color:var(--highlight-red);&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:oklab(from var(--highlight-red) l a b/12%)}}}}

package/dist/components/menu/menu.guide.json

@@ -6,36 +6,36 @@
     "Action menus anchored to a button or icon button",
     "Nested command lists with checkbox or radio options that stay open on toggle",
     "Link rows mixed with actions in one menu surface",
-    "Detached or multi-trigger menus via `Menu.createHandle`"
+    "Detached or multi-trigger menus via `Menu.createHandle`",
+    "Account / user widgets: `Menu.Trigger` as a Surface chip (avatar + name + email) opening a Popup with a static profile header plus action items"
   ],
   "whenNotToUse": [
     "Page-blocking modal flows (use Dialog)",
     "Form field single-select from a long list (use Select)",
     "Context menu or menubar chrome (not in this surface)",
-    "System-wide transient alerts (use Toast)"
+    "System-wide transient alerts (use Toast)",
+    "Rich non-menu panels with forms or free layout (use Popover / Dialog — do not wrap Menu in Popover)"
   ],
   "accessibility": [
-    "Give the trigger an accessible name (`Button` label or `aria-label` on IconButton)",
+    "Give the trigger an accessible name (`Button` label, visible text in a Surface trigger rendered as `<button>`, or `aria-label` on IconButton)",
     "Use `Menu.Group` `label` for grouped sections so assistive tech gets a group name",
-    "Prefer Base UI keyboard navigation; do not trap focus outside the menu pattern"
+    "Prefer Base UI keyboard navigation; do not trap focus outside the menu pattern",
+    "`Menu.Popup` may include static non-item children (e.g. profile header); keep them non-interactive so focus roving stays on menu items"
   ],
   "antiPatterns": [
     "Expecting `Menu.Arrow`, `Menu.Backdrop`, or public Portal/Positioner/Viewport exports",
     "Closing checkbox/radio items on click by default when the menu should stay open for multi-toggle",
-    "Using physical left/right CSS that breaks RTL submenu chevrons"
+    "Using physical left/right CSS that breaks RTL submenu chevrons",
+    "Expecting RTL item rows / left-opening submenus without Base UI `DirectionProvider direction=\"rtl\"` plus app `dir=\"rtl\"` on a portal ancestor (usually `<html>` / document root — a local wrapper alone does not reach body-mounted popups)",
+    "Nesting Menu inside Popover for an account menu — Menu already owns portal, positioning, and listbox keyboard behavior",
+    "Putting focusable controls (inputs, nested buttons) in `Menu.Popup` outside `Menu.Item` / `Menu.LinkItem` / checkbox / radio / submenu trigger parts"
   ],
-  "related": ["Button", "IconButton", "Select", "Popover", "Tooltip", "Surface", "Stack"],
+  "related": ["Avatar", "Button", "IconButton", "Popover", "Select", "Stack", "Surface", "Text", "Tooltip"],
   "properties": {
     "react": {
       "CheckboxItem.addon": {
         "description": "Decorative leading node rendered before the item label."
       },
-      "CheckboxItem.addonAlign": {
-        "description": "Vertical alignment of the addon relative to the label row."
-      },
-      "CheckboxItem.indicator": {
-        "description": "Custom indicator node when checked."
-      },
       "CheckboxItem.note": {
         "description": "End-aligned secondary text (e.g. keyboard shortcut) before the check indicator. Rendered muted `x-small`."
       },
@@ -48,11 +48,8 @@
       "Item.addon": {
         "description": "Decorative leading node rendered before the item label."
       },
-      "Item.addonAlign": {
-        "description": "Vertical alignment of the addon relative to the label row."
-      },
       "Item.note": {
-        "description": "End-aligned secondary text (e.g. keyboard shortcut). Rendered muted `x-small` at the end of the row (replaces the empty indicator spacer when set)."
+        "description": "End-aligned secondary text (e.g. keyboard shortcut). Rendered muted `x-small`."
       },
       "Item.sentiment": {
         "description": "Visual sentiment. `destructive` uses highlight-red wash + text."
@@ -60,11 +57,8 @@
       "LinkItem.addon": {
         "description": "Decorative leading node rendered before the item label."
       },
-      "LinkItem.addonAlign": {
-        "description": "Vertical alignment of the addon relative to the label row."
-      },
       "LinkItem.note": {
-        "description": "End-aligned secondary text (e.g. keyboard shortcut). Rendered muted `x-small` at the end of the row (replaces the empty indicator spacer when set)."
+        "description": "End-aligned secondary text (e.g. keyboard shortcut). Rendered muted `x-small`."
       },
       "LinkItem.sentiment": {
         "description": "Visual sentiment. `destructive` uses highlight-red wash + text."
@@ -75,12 +69,6 @@
       "RadioItem.addon": {
         "description": "Decorative leading node rendered before the item label."
       },
-      "RadioItem.addonAlign": {
-        "description": "Vertical alignment of the addon relative to the label row."
-      },
-      "RadioItem.indicator": {
-        "description": "Custom indicator node when selected."
-      },
       "RadioItem.note": {
         "description": "End-aligned secondary text (e.g. keyboard shortcut) before the check indicator. Rendered muted `x-small`."
       },
@@ -90,9 +78,6 @@
       "SubmenuTrigger.addon": {
         "description": "Decorative leading node rendered before the item label."
       },
-      "SubmenuTrigger.addonAlign": {
-        "description": "Vertical alignment of the addon relative to the label row."
-      },
       "SubmenuTrigger.sentiment": {
         "description": "Visual sentiment. `destructive` uses highlight-red wash + text."
       }

package/dist/components/menu/menu.module.js

@@ -1,13 +1,13 @@
 //#region src/components/menu/menu.module.css
 var MenuPopup = "viraui__menu-module__MenuPopup_GkrGa";
+var ItemRow = "viraui__menu-module__ItemRow_Be40k";
 var Indicator = "viraui__menu-module__Indicator_btL99";
-var Group = "viraui__menu-module__Group_Orz5Y";
 var Item = "viraui__menu-module__Item_9zmEO";
 var menu_module_default = {
 	MenuPopup,
+	ItemRow,
 	Indicator,
-	Group,
 	Item
 };
 //#endregion
-export { Group, Indicator, Item, MenuPopup, menu_module_default as default };
+export { Indicator, Item, ItemRow, MenuPopup, menu_module_default as default };

package/dist/components/select/select-group.js

@@ -1,7 +1,5 @@
-import { clsx } from "../../core/clsx.js";
 import { Text } from "../text/text.js";
 import { Stack } from "../stack/stack.js";
-import select_module_default from "./select.module.js";
 import { SelectIndicatorSlot } from "./select-indicator-slot.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select } from "@base-ui/react/select";
@@ -9,7 +7,7 @@ import { Select } from "@base-ui/react/select";
 function SelectGroup({ children, className, label, ...groupProps }) {
 	return /* @__PURE__ */ jsxs(Select.Group, {
 		...groupProps,
-		className: clsx(select_module_default.Group, className),
+		className,
 		render: /* @__PURE__ */ jsx(Stack, {
 			direction: "column",
 			fillChildren: false,