@ttoss/fsl-ui 0.2.4

package/dist/composites/Menu/Menu.cjs

@@ -0,0 +1,190 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+const require_focusRing = require('../../tokens/focusRing.cjs');
+const require_resolveInteractiveStyle = require('../../tokens/resolveInteractiveStyle.cjs');
+const require_scope = require('../scope.cjs');
+const require_escapeHatch = require('../../tokens/escapeHatch.cjs');
+let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
+let react_aria_components = require("react-aria-components");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/composites/Menu/Menu.tsx
+var MENU_MIN_WIDTH_DEFAULT = "12rem";
+var MENU_MAX_WIDTH_DEFAULT = "min(320px, 90vw)";
+var MENU_OFFSET_DEFAULT = 4;
+var menuScope = require_scope.createPresenceScope("Menu");
+/**
+* Orchestrates open/close state between a trigger and a Menu.
+* Pure pass-through to React Aria — no semantic tokens applied.
+*/
+var MenuTrigger = props => {
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.MenuTrigger, {
+    ...props
+  });
+};
+MenuTrigger.displayName = "MenuTrigger";
+/**
+* Formal semantic identity — what this component *is* (Layer 1).
+*
+* Entity = Overlay → CONTRACT.md §1 row:
+*   colors: `informational`, radii: `surface`, border: `outline.surface`,
+*   spacing: `inset.surface`, typography: `label`, motion: `transition`,
+*   elevation: `overlay`.
+*/
+var menuMeta = {
+  displayName: "Menu",
+  entity: "Overlay",
+  structure: "root"
+};
+/**
+* A semantic menu built on React Aria.
+*
+* Renders an anchored popover containing a keyboard-navigable list of
+* {@link MenuItem} children. Must be placed inside a {@link MenuTrigger}.
+*
+* Entity = Overlay → `vars.colors.informational[evaluation].*`,
+* `vars.radii.surface`, `vars.spacing.inset.surface.md`,
+* `vars.elevation.surface.overlay`.
+*
+* @example
+* ```tsx
+* <MenuTrigger>
+*   <Button>Open</Button>
+*   <Menu>
+*     <MenuItem>Edit</MenuItem>
+*     <MenuItem consequence="destructive">Delete</MenuItem>
+*   </Menu>
+* </MenuTrigger>
+* ```
+*/
+var Menu = ({
+  evaluation = "primary",
+  placement = "bottom start",
+  offset = MENU_OFFSET_DEFAULT,
+  crossOffset,
+  shouldFlip,
+  containerPadding,
+  children,
+  ...props
+}) => {
+  const colors = _ttoss_fsl_theme_vars.vars.colors.informational[evaluation];
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(menuScope.Provider, {
+    children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Popover, {
+      placement,
+      offset,
+      crossOffset,
+      shouldFlip,
+      containerPadding,
+      "data-scope": "menu",
+      "data-part": "root",
+      "data-evaluation": evaluation,
+      style: {
+        boxSizing: "border-box",
+        minWidth: require_escapeHatch.fslVar("--fsl-menu-min-width", MENU_MIN_WIDTH_DEFAULT),
+        maxWidth: require_escapeHatch.fslVar("--fsl-menu-max-width", MENU_MAX_WIDTH_DEFAULT),
+        borderRadius: _ttoss_fsl_theme_vars.vars.radii.surface,
+        borderWidth: _ttoss_fsl_theme_vars.vars.border.outline.surface.width,
+        borderStyle: _ttoss_fsl_theme_vars.vars.border.outline.surface.style,
+        borderColor: colors?.border?.default,
+        backgroundColor: colors?.background?.default,
+        color: colors?.text?.default,
+        boxShadow: _ttoss_fsl_theme_vars.vars.elevation.surface.overlay,
+        outline: "none",
+        overflow: "auto",
+        zIndex: _ttoss_fsl_theme_vars.vars.zIndex.layer.overlay
+      },
+      children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Menu, {
+        ...props,
+        "data-scope": "menu",
+        "data-part": "content",
+        "data-evaluation": evaluation,
+        style: {
+          boxSizing: "border-box",
+          outline: "none",
+          padding: _ttoss_fsl_theme_vars.vars.spacing.inset.surface.sm,
+          display: "flex",
+          flexDirection: "column",
+          ..._ttoss_fsl_theme_vars.vars.text.label.md
+        },
+        children
+      })
+    })
+  });
+};
+Menu.displayName = menuMeta.displayName;
+/**
+* Formal semantic identity — a single menu action (Layer 1).
+*
+* Entity = Action. Structure is `root` — a MenuItem is the root of its own
+* Action identity, nested inside the menu's `data-scope="menu"`.
+*/
+var menuItemMeta = {
+  displayName: "MenuItem",
+  entity: "Action",
+  structure: "root"
+};
+/**
+* An actionable item inside a {@link Menu}.
+*
+* Entity = Action → `vars.colors.action[evaluation].*`, `vars.radii.control`,
+* `vars.spacing.inset.control.sm`, `vars.text.label.md`, `vars.motion.feedback`.
+*/
+var MenuItem = ({
+  evaluation = "primary",
+  consequence = "neutral",
+  composition,
+  children,
+  ...props
+}) => {
+  menuScope.use(menuItemMeta.displayName);
+  const colors = _ttoss_fsl_theme_vars.vars.colors.action[evaluation];
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.MenuItem, {
+    ...props,
+    "data-scope": "menu",
+    "data-part": "root",
+    "data-evaluation": evaluation,
+    "data-consequence": consequence,
+    "data-composition": composition,
+    style: ({
+      isHovered,
+      isPressed,
+      isDisabled,
+      isFocusVisible
+    }) => {
+      return {
+        boxSizing: "border-box",
+        display: "flex",
+        alignItems: "center",
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        borderRadius: _ttoss_fsl_theme_vars.vars.radii.control,
+        minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit.base,
+        paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.sm,
+        paddingInline: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
+        ..._ttoss_fsl_theme_vars.vars.text.label.md,
+        transitionDuration: _ttoss_fsl_theme_vars.vars.motion.feedback.duration,
+        transitionTimingFunction: _ttoss_fsl_theme_vars.vars.motion.feedback.easing,
+        transitionProperty: "background-color, color",
+        backgroundColor: require_resolveInteractiveStyle.resolveInteractiveStyle(colors?.background, {
+          isHovered,
+          isPressed,
+          isDisabled
+        }),
+        color: require_resolveInteractiveStyle.resolveInteractiveStyle(colors?.text, {
+          isHovered,
+          isPressed,
+          isDisabled
+        }) ?? colors?.text?.default,
+        outline: require_focusRing.focusRingOutline(isFocusVisible),
+        outlineOffset: "-1px"
+      };
+    },
+    children
+  });
+};
+MenuItem.displayName = menuItemMeta.displayName;
+
+//#endregion
+exports.Menu = Menu;
+exports.MenuItem = MenuItem;
+exports.MenuTrigger = MenuTrigger;
+exports.menuItemMeta = menuItemMeta;
+exports.menuMeta = menuMeta;

package/dist/composites/Menu/Menu.d.cts

@@ -0,0 +1,158 @@
+
+import { CompositionsFor, ConsequencesFor, EvaluationsFor } from "../../semantics/taxonomy.cjs";
+import * as React from "react";
+import { MenuItemProps, MenuProps, MenuTriggerProps, PopoverProps } from "react-aria-components";
+
+//#region src/composites/Menu/Menu.d.ts
+/**
+ * Orchestrates open/close state between a trigger and a Menu.
+ * Pure pass-through to React Aria — no semantic tokens applied.
+ */
+declare const MenuTrigger: {
+  (props: MenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+/**
+ * Formal semantic identity — what this component *is* (Layer 1).
+ *
+ * Entity = Overlay → CONTRACT.md §1 row:
+ *   colors: `informational`, radii: `surface`, border: `outline.surface`,
+ *   spacing: `inset.surface`, typography: `label`, motion: `transition`,
+ *   elevation: `overlay`.
+ */
+declare const menuMeta: {
+  readonly displayName: "Menu";
+  readonly entity: "Overlay";
+  readonly structure: "root";
+};
+/**
+ * Props for the Menu component.
+ *
+ * The composite owns its layout; pass `style`/`className` on a wrapping
+ * element rather than on the composite root. See CONTRIBUTING §4.
+ */
+interface MenuProps$1<T extends object> extends Omit<MenuProps<T>, 'style' | 'className'> {
+  /**
+   * Semantic emphasis for the overlay surface.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<(typeof menuMeta)['entity']>;
+  /**
+   * Popover placement relative to the trigger.
+   */
+  placement?: PopoverProps['placement'];
+  /**
+   * Popover offset (px) from the trigger.
+   */
+  offset?: PopoverProps['offset'];
+  /**
+   * Popover offset (px) along the cross axis of `placement`.
+   */
+  crossOffset?: PopoverProps['crossOffset'];
+  /**
+   * Whether the popover flips to the opposite side when it would overflow
+   * the viewport.
+   * @default true
+   */
+  shouldFlip?: PopoverProps['shouldFlip'];
+  /**
+   * Minimum distance (px) the popover keeps from the viewport edges when
+   * positioning.
+   */
+  containerPadding?: PopoverProps['containerPadding'];
+}
+/**
+ * A semantic menu built on React Aria.
+ *
+ * Renders an anchored popover containing a keyboard-navigable list of
+ * {@link MenuItem} children. Must be placed inside a {@link MenuTrigger}.
+ *
+ * Entity = Overlay → `vars.colors.informational[evaluation].*`,
+ * `vars.radii.surface`, `vars.spacing.inset.surface.md`,
+ * `vars.elevation.surface.overlay`.
+ *
+ * @example
+ * ```tsx
+ * <MenuTrigger>
+ *   <Button>Open</Button>
+ *   <Menu>
+ *     <MenuItem>Edit</MenuItem>
+ *     <MenuItem consequence="destructive">Delete</MenuItem>
+ *   </Menu>
+ * </MenuTrigger>
+ * ```
+ */
+declare const Menu: {
+  <T extends object>({
+    evaluation,
+    placement,
+    offset,
+    crossOffset,
+    shouldFlip,
+    containerPadding,
+    children,
+    ...props
+  }: MenuProps$1<T>): import("react/jsx-runtime").JSX.Element;
+  displayName: "Menu";
+};
+/**
+ * Formal semantic identity — a single menu action (Layer 1).
+ *
+ * Entity = Action. Structure is `root` — a MenuItem is the root of its own
+ * Action identity, nested inside the menu's `data-scope="menu"`.
+ */
+declare const menuItemMeta: {
+  readonly displayName: "MenuItem";
+  readonly entity: "Action";
+  readonly structure: "root";
+};
+/**
+ * Props for the MenuItem component.
+ */
+interface MenuItemProps$1 extends Omit<MenuItemProps, 'style' | 'children' | 'className'> {
+  /**
+   * Semantic emphasis for the item.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<(typeof menuItemMeta)['entity']>;
+  /**
+   * Effect on state that activating this item produces.
+   *
+   * Emitted as `data-consequence` on the rendered element so callers, tests,
+   * and host integrations (confirm wrappers, telemetry) can observe the
+   * contract. This component does **not** alter colors based on consequence;
+   * visual distinction (if any) is a theme / CSS layer concern.
+   *
+   * @default 'neutral'
+   */
+  consequence?: ConsequencesFor<(typeof menuItemMeta)['entity']>;
+  /**
+   * Optional composition slot when this item plays a named role inside the
+   * parent Menu (e.g. `primaryAction`, `dismissAction`). Emitted as
+   * `data-composition` so parents can target it with layout CSS (ordering,
+   * separation).
+   */
+  composition?: CompositionsFor<(typeof menuItemMeta)['entity']>;
+  /**
+   * Item content.
+   */
+  children?: React.ReactNode;
+}
+/**
+ * An actionable item inside a {@link Menu}.
+ *
+ * Entity = Action → `vars.colors.action[evaluation].*`, `vars.radii.control`,
+ * `vars.spacing.inset.control.sm`, `vars.text.label.md`, `vars.motion.feedback`.
+ */
+declare const MenuItem: {
+  ({
+    evaluation,
+    consequence,
+    composition,
+    children,
+    ...props
+  }: MenuItemProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "MenuItem";
+};
+//#endregion
+export { Menu, MenuItem, MenuItemProps$1 as MenuItemProps, MenuProps$1 as MenuProps, MenuTrigger, menuItemMeta, menuMeta };

package/dist/composites/Menu/Menu.d.mts

@@ -0,0 +1,158 @@
+
+import { CompositionsFor, ConsequencesFor, EvaluationsFor } from "../../semantics/taxonomy.mjs";
+import { MenuItemProps, MenuProps, MenuTriggerProps, PopoverProps } from "react-aria-components";
+import * as React from "react";
+
+//#region src/composites/Menu/Menu.d.ts
+/**
+ * Orchestrates open/close state between a trigger and a Menu.
+ * Pure pass-through to React Aria — no semantic tokens applied.
+ */
+declare const MenuTrigger$1: {
+  (props: MenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+/**
+ * Formal semantic identity — what this component *is* (Layer 1).
+ *
+ * Entity = Overlay → CONTRACT.md §1 row:
+ *   colors: `informational`, radii: `surface`, border: `outline.surface`,
+ *   spacing: `inset.surface`, typography: `label`, motion: `transition`,
+ *   elevation: `overlay`.
+ */
+declare const menuMeta: {
+  readonly displayName: "Menu";
+  readonly entity: "Overlay";
+  readonly structure: "root";
+};
+/**
+ * Props for the Menu component.
+ *
+ * The composite owns its layout; pass `style`/`className` on a wrapping
+ * element rather than on the composite root. See CONTRIBUTING §4.
+ */
+interface MenuProps$1<T extends object> extends Omit<MenuProps<T>, 'style' | 'className'> {
+  /**
+   * Semantic emphasis for the overlay surface.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<(typeof menuMeta)['entity']>;
+  /**
+   * Popover placement relative to the trigger.
+   */
+  placement?: PopoverProps['placement'];
+  /**
+   * Popover offset (px) from the trigger.
+   */
+  offset?: PopoverProps['offset'];
+  /**
+   * Popover offset (px) along the cross axis of `placement`.
+   */
+  crossOffset?: PopoverProps['crossOffset'];
+  /**
+   * Whether the popover flips to the opposite side when it would overflow
+   * the viewport.
+   * @default true
+   */
+  shouldFlip?: PopoverProps['shouldFlip'];
+  /**
+   * Minimum distance (px) the popover keeps from the viewport edges when
+   * positioning.
+   */
+  containerPadding?: PopoverProps['containerPadding'];
+}
+/**
+ * A semantic menu built on React Aria.
+ *
+ * Renders an anchored popover containing a keyboard-navigable list of
+ * {@link MenuItem} children. Must be placed inside a {@link MenuTrigger}.
+ *
+ * Entity = Overlay → `vars.colors.informational[evaluation].*`,
+ * `vars.radii.surface`, `vars.spacing.inset.surface.md`,
+ * `vars.elevation.surface.overlay`.
+ *
+ * @example
+ * ```tsx
+ * <MenuTrigger>
+ *   <Button>Open</Button>
+ *   <Menu>
+ *     <MenuItem>Edit</MenuItem>
+ *     <MenuItem consequence="destructive">Delete</MenuItem>
+ *   </Menu>
+ * </MenuTrigger>
+ * ```
+ */
+declare const Menu$1: {
+  <T extends object>({
+    evaluation,
+    placement,
+    offset,
+    crossOffset,
+    shouldFlip,
+    containerPadding,
+    children,
+    ...props
+  }: MenuProps$1<T>): import("react/jsx-runtime").JSX.Element;
+  displayName: "Menu";
+};
+/**
+ * Formal semantic identity — a single menu action (Layer 1).
+ *
+ * Entity = Action. Structure is `root` — a MenuItem is the root of its own
+ * Action identity, nested inside the menu's `data-scope="menu"`.
+ */
+declare const menuItemMeta: {
+  readonly displayName: "MenuItem";
+  readonly entity: "Action";
+  readonly structure: "root";
+};
+/**
+ * Props for the MenuItem component.
+ */
+interface MenuItemProps$1 extends Omit<MenuItemProps, 'style' | 'children' | 'className'> {
+  /**
+   * Semantic emphasis for the item.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<(typeof menuItemMeta)['entity']>;
+  /**
+   * Effect on state that activating this item produces.
+   *
+   * Emitted as `data-consequence` on the rendered element so callers, tests,
+   * and host integrations (confirm wrappers, telemetry) can observe the
+   * contract. This component does **not** alter colors based on consequence;
+   * visual distinction (if any) is a theme / CSS layer concern.
+   *
+   * @default 'neutral'
+   */
+  consequence?: ConsequencesFor<(typeof menuItemMeta)['entity']>;
+  /**
+   * Optional composition slot when this item plays a named role inside the
+   * parent Menu (e.g. `primaryAction`, `dismissAction`). Emitted as
+   * `data-composition` so parents can target it with layout CSS (ordering,
+   * separation).
+   */
+  composition?: CompositionsFor<(typeof menuItemMeta)['entity']>;
+  /**
+   * Item content.
+   */
+  children?: React.ReactNode;
+}
+/**
+ * An actionable item inside a {@link Menu}.
+ *
+ * Entity = Action → `vars.colors.action[evaluation].*`, `vars.radii.control`,
+ * `vars.spacing.inset.control.sm`, `vars.text.label.md`, `vars.motion.feedback`.
+ */
+declare const MenuItem$1: {
+  ({
+    evaluation,
+    consequence,
+    composition,
+    children,
+    ...props
+  }: MenuItemProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "MenuItem";
+};
+//#endregion
+export { Menu$1 as Menu, MenuItem$1 as MenuItem, MenuItemProps$1 as MenuItemProps, MenuProps$1 as MenuProps, MenuTrigger$1 as MenuTrigger, menuItemMeta, menuMeta };

package/dist/composites/Menu/Menu.mjs

@@ -0,0 +1,186 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { focusRingOutline } from "../../tokens/focusRing.mjs";
+import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mjs";
+import { createPresenceScope } from "../scope.mjs";
+import { fslVar } from "../../tokens/escapeHatch.mjs";
+import { vars } from "@ttoss/fsl-theme/vars";
+import { Menu, MenuItem, MenuTrigger, Popover } from "react-aria-components";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/composites/Menu/Menu.tsx
+var MENU_MIN_WIDTH_DEFAULT = "12rem";
+var MENU_MAX_WIDTH_DEFAULT = "min(320px, 90vw)";
+var MENU_OFFSET_DEFAULT = 4;
+var menuScope = createPresenceScope("Menu");
+/**
+* Orchestrates open/close state between a trigger and a Menu.
+* Pure pass-through to React Aria — no semantic tokens applied.
+*/
+var MenuTrigger$1 = props => {
+  return /* @__PURE__ */jsx(MenuTrigger, {
+    ...props
+  });
+};
+MenuTrigger$1.displayName = "MenuTrigger";
+/**
+* Formal semantic identity — what this component *is* (Layer 1).
+*
+* Entity = Overlay → CONTRACT.md §1 row:
+*   colors: `informational`, radii: `surface`, border: `outline.surface`,
+*   spacing: `inset.surface`, typography: `label`, motion: `transition`,
+*   elevation: `overlay`.
+*/
+var menuMeta = {
+  displayName: "Menu",
+  entity: "Overlay",
+  structure: "root"
+};
+/**
+* A semantic menu built on React Aria.
+*
+* Renders an anchored popover containing a keyboard-navigable list of
+* {@link MenuItem} children. Must be placed inside a {@link MenuTrigger}.
+*
+* Entity = Overlay → `vars.colors.informational[evaluation].*`,
+* `vars.radii.surface`, `vars.spacing.inset.surface.md`,
+* `vars.elevation.surface.overlay`.
+*
+* @example
+* ```tsx
+* <MenuTrigger>
+*   <Button>Open</Button>
+*   <Menu>
+*     <MenuItem>Edit</MenuItem>
+*     <MenuItem consequence="destructive">Delete</MenuItem>
+*   </Menu>
+* </MenuTrigger>
+* ```
+*/
+var Menu$1 = ({
+  evaluation = "primary",
+  placement = "bottom start",
+  offset = MENU_OFFSET_DEFAULT,
+  crossOffset,
+  shouldFlip,
+  containerPadding,
+  children,
+  ...props
+}) => {
+  const colors = vars.colors.informational[evaluation];
+  return /* @__PURE__ */jsx(menuScope.Provider, {
+    children: /* @__PURE__ */jsx(Popover, {
+      placement,
+      offset,
+      crossOffset,
+      shouldFlip,
+      containerPadding,
+      "data-scope": "menu",
+      "data-part": "root",
+      "data-evaluation": evaluation,
+      style: {
+        boxSizing: "border-box",
+        minWidth: fslVar("--fsl-menu-min-width", MENU_MIN_WIDTH_DEFAULT),
+        maxWidth: fslVar("--fsl-menu-max-width", MENU_MAX_WIDTH_DEFAULT),
+        borderRadius: vars.radii.surface,
+        borderWidth: vars.border.outline.surface.width,
+        borderStyle: vars.border.outline.surface.style,
+        borderColor: colors?.border?.default,
+        backgroundColor: colors?.background?.default,
+        color: colors?.text?.default,
+        boxShadow: vars.elevation.surface.overlay,
+        outline: "none",
+        overflow: "auto",
+        zIndex: vars.zIndex.layer.overlay
+      },
+      children: /* @__PURE__ */jsx(Menu, {
+        ...props,
+        "data-scope": "menu",
+        "data-part": "content",
+        "data-evaluation": evaluation,
+        style: {
+          boxSizing: "border-box",
+          outline: "none",
+          padding: vars.spacing.inset.surface.sm,
+          display: "flex",
+          flexDirection: "column",
+          ...vars.text.label.md
+        },
+        children
+      })
+    })
+  });
+};
+Menu$1.displayName = menuMeta.displayName;
+/**
+* Formal semantic identity — a single menu action (Layer 1).
+*
+* Entity = Action. Structure is `root` — a MenuItem is the root of its own
+* Action identity, nested inside the menu's `data-scope="menu"`.
+*/
+var menuItemMeta = {
+  displayName: "MenuItem",
+  entity: "Action",
+  structure: "root"
+};
+/**
+* An actionable item inside a {@link Menu}.
+*
+* Entity = Action → `vars.colors.action[evaluation].*`, `vars.radii.control`,
+* `vars.spacing.inset.control.sm`, `vars.text.label.md`, `vars.motion.feedback`.
+*/
+var MenuItem$1 = ({
+  evaluation = "primary",
+  consequence = "neutral",
+  composition,
+  children,
+  ...props
+}) => {
+  menuScope.use(menuItemMeta.displayName);
+  const colors = vars.colors.action[evaluation];
+  return /* @__PURE__ */jsx(MenuItem, {
+    ...props,
+    "data-scope": "menu",
+    "data-part": "root",
+    "data-evaluation": evaluation,
+    "data-consequence": consequence,
+    "data-composition": composition,
+    style: ({
+      isHovered,
+      isPressed,
+      isDisabled,
+      isFocusVisible
+    }) => {
+      return {
+        boxSizing: "border-box",
+        display: "flex",
+        alignItems: "center",
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        borderRadius: vars.radii.control,
+        minHeight: vars.sizing.hit.base,
+        paddingBlock: vars.spacing.inset.control.sm,
+        paddingInline: vars.spacing.inset.control.md,
+        ...vars.text.label.md,
+        transitionDuration: vars.motion.feedback.duration,
+        transitionTimingFunction: vars.motion.feedback.easing,
+        transitionProperty: "background-color, color",
+        backgroundColor: resolveInteractiveStyle(colors?.background, {
+          isHovered,
+          isPressed,
+          isDisabled
+        }),
+        color: resolveInteractiveStyle(colors?.text, {
+          isHovered,
+          isPressed,
+          isDisabled
+        }) ?? colors?.text?.default,
+        outline: focusRingOutline(isFocusVisible),
+        outlineOffset: "-1px"
+      };
+    },
+    children
+  });
+};
+MenuItem$1.displayName = menuItemMeta.displayName;
+
+//#endregion
+export { Menu$1 as Menu, MenuItem$1 as MenuItem, MenuTrigger$1 as MenuTrigger, menuItemMeta, menuMeta };