@bug-on/m3-expressive 1.2.4 → 1.2.6

package/dist/navigation.d.mts

@@ -811,6 +811,8 @@ declare function SmallAppBar({ title, subtitle, titleAlignment, navigationIcon,
 type MenuColorVariant = "standard" | "vibrant";
 /** Visual variant of the menu. */
 type MenuVariant = "baseline" | "expressive";
+/** Layout density for menu items: 0 (default: 48dp), -2 (40dp), -4 (32dp). */
+type MenuDensity = 0 | -2 | -4;
 /**
  * Which Radix primitive family drives this menu:
  * - `dropdown` → @radix-ui/react-dropdown-menu (button, text field, icon trigger)
@@ -843,6 +845,11 @@ interface MenuProps {
      * - `vibrant`: tertiary-container background (use sparingly, high emphasis)
      */
     colorVariant?: MenuColorVariant;
+    /**
+     * Layout density of menu items: 0 (48dp), -2 (40dp), -4 (32dp).
+     * @default 0
+     */
+    density?: MenuDensity;
     /**
      * Visual variant of the menu.
      * - `baseline`: original M3 specs (4dp corners, no shape morphing)
@@ -895,6 +902,11 @@ interface MenuContentProps {
      * Default: "gap"
      */
     separatorStyle?: VerticalMenuSeparatorStyle;
+    /**
+     * When true, automatically sets the menu popover width to match the trigger width
+     * using Radix CSS variable `--radix-dropdown-menu-trigger-width`.
+     */
+    matchTriggerWidth?: boolean;
     className?: string;
 }
 interface MenuItemProps {
@@ -928,6 +940,8 @@ interface MenuItemProps {
     itemPosition?: MenuItemPosition;
     /** Override colorVariant from MenuContext */
     colorVariant?: MenuColorVariant;
+    /** Layout density of this menu item: 0 (48dp), -2 (40dp), -4 (32dp). */
+    density?: MenuDensity;
     /** If true, keeps the menu open after clicking (e.g. for multi-select items) */
     keepOpen?: boolean;
     className?: string;
@@ -937,6 +951,8 @@ interface MenuItemProps {
     isSubTrigger?: boolean;
     /** ARIA role override. Defaults to 'menuitem', 'menuitemcheckbox', or 'menuitemradio' based on selected prop. */
     role?: string;
+    /** Internal flag: true if rendered inside a gap-variant expressive menu */
+    isGapVariant?: boolean;
 }
 interface MenuGroupProps {
     /** MenuItem children — itemPosition is auto-injected */
@@ -967,6 +983,7 @@ interface MenuGroupProps {
 }
 interface MenuDividerProps {
     className?: string;
+    isGapVariant?: boolean;
 }
 interface SubMenuProps {
     /** The SubMenu children (another MenuContent) */
@@ -1159,7 +1176,7 @@ declare const ContextMenuContent: React$1.ForwardRefExoticComponent<ContextMenuC
  *   </MenuContent>
  * </Menu>
  */
-declare function Menu({ children, variant, menuVariant, colorVariant, open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, ...props }: MenuProps & Omit<React$1.ComponentPropsWithoutRef<typeof DropdownMenu.Root>, "children">): react_jsx_runtime.JSX.Element;
+declare function Menu({ children, variant, menuVariant, colorVariant, density, open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, ...props }: MenuProps & Omit<React$1.ComponentPropsWithoutRef<typeof DropdownMenu.Root>, "children">): react_jsx_runtime.JSX.Element;
 declare namespace Menu {
     var displayName: string;
 }
@@ -1237,6 +1254,8 @@ interface MenuContextValue {
     variant: MenuVariant;
     /** Color variant inherited by all children unless overridden */
     colorVariant: MenuColorVariant;
+    /** Density of menu items: 0, -2, -4 */
+    density: MenuDensity;
     /**
      * Which Radix primitive family drives this menu:
      * - "dropdown" → @radix-ui/react-dropdown-menu (button/field trigger)
@@ -1255,12 +1274,13 @@ interface MenuContextValue {
 interface MenuProviderProps {
     variant?: MenuVariant;
     colorVariant?: MenuColorVariant;
+    density?: MenuDensity;
     menuPrimitive?: MenuPrimitive;
     open: boolean;
     onOpenChange: (open: boolean) => void;
     children: React$1.ReactNode;
 }
-declare function MenuProvider({ variant, colorVariant, menuPrimitive, open, onOpenChange, children, }: MenuProviderProps): react_jsx_runtime.JSX.Element;
+declare function MenuProvider({ variant, colorVariant, density, menuPrimitive, open, onOpenChange, children, }: MenuProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Returns the nearest MenuContext value.
  * Safe to use outside a MenuProvider (returns default: baseline, dropdown, closed).
@@ -1397,7 +1417,7 @@ declare const ITEM_SHAPE_CLASSES: {
     readonly leading: "rounded-t-[12px] rounded-b-[4px]";
     readonly middle: "rounded-[4px]";
     readonly trailing: "rounded-t-[4px] rounded-b-[12px]";
-    readonly standalone: "rounded-[4px]";
+    readonly standalone: "rounded-[12px]";
     readonly selected: "rounded-[12px]";
 };
 /**
@@ -1424,9 +1444,9 @@ declare const STANDARD_COLORS: {
     /** Trailing icon color (StandardMenuTokens.ItemTrailingIconColor) */
     readonly trailingIconColor: "text-m3-on-surface-variant";
     /** Hover state layer (OnSurface @ 8% opacity) */
-    readonly hoverLayer: "hover:bg-m3-on-surface/8";
+    readonly hoverLayer: "hover:bg-m3-on-surface/8 data-[highlighted]:bg-m3-on-surface/8";
     /** Focus state layer (OnSurface @ 12% opacity) */
-    readonly focusLayer: "focus:bg-m3-on-surface/12";
+    readonly focusLayer: "focus:bg-m3-on-surface/12 data-[highlighted]:bg-m3-on-surface/8";
     /** Selected item background (StandardMenuTokens.ItemSelectedContainerColor) */
     readonly selectedBg: "bg-m3-tertiary-container";
     /** Selected item text (StandardMenuTokens.ItemSelectedLabelTextColor) */
@@ -1460,9 +1480,9 @@ declare const VIBRANT_COLORS: {
     /** Trailing icon color (VibrantMenuTokens.ItemTrailingIconColor) */
     readonly trailingIconColor: "text-m3-on-tertiary-container";
     /** Hover state layer (OnTertiaryContainer @ 8% opacity) */
-    readonly hoverLayer: "hover:bg-m3-on-tertiary-container/8";
+    readonly hoverLayer: "hover:bg-m3-on-tertiary-container/8 data-[highlighted]:bg-m3-on-tertiary-container/8";
     /** Focus state layer (OnTertiaryContainer @ 12% opacity) */
-    readonly focusLayer: "focus:bg-m3-on-tertiary-container/12";
+    readonly focusLayer: "focus:bg-m3-on-tertiary-container/12 data-[highlighted]:bg-m3-on-tertiary-container/8";
     /** Selected item background (VibrantMenuTokens.ItemSelectedContainerColor = Tertiary) */
     readonly selectedBg: "bg-m3-tertiary";
     /** Selected item text (VibrantMenuTokens.ItemSelectedLabelTextColor = OnTertiary) */

package/dist/navigation.d.ts

@@ -811,6 +811,8 @@ declare function SmallAppBar({ title, subtitle, titleAlignment, navigationIcon,
 type MenuColorVariant = "standard" | "vibrant";
 /** Visual variant of the menu. */
 type MenuVariant = "baseline" | "expressive";
+/** Layout density for menu items: 0 (default: 48dp), -2 (40dp), -4 (32dp). */
+type MenuDensity = 0 | -2 | -4;
 /**
  * Which Radix primitive family drives this menu:
  * - `dropdown` → @radix-ui/react-dropdown-menu (button, text field, icon trigger)
@@ -843,6 +845,11 @@ interface MenuProps {
      * - `vibrant`: tertiary-container background (use sparingly, high emphasis)
      */
     colorVariant?: MenuColorVariant;
+    /**
+     * Layout density of menu items: 0 (48dp), -2 (40dp), -4 (32dp).
+     * @default 0
+     */
+    density?: MenuDensity;
     /**
      * Visual variant of the menu.
      * - `baseline`: original M3 specs (4dp corners, no shape morphing)
@@ -895,6 +902,11 @@ interface MenuContentProps {
      * Default: "gap"
      */
     separatorStyle?: VerticalMenuSeparatorStyle;
+    /**
+     * When true, automatically sets the menu popover width to match the trigger width
+     * using Radix CSS variable `--radix-dropdown-menu-trigger-width`.
+     */
+    matchTriggerWidth?: boolean;
     className?: string;
 }
 interface MenuItemProps {
@@ -928,6 +940,8 @@ interface MenuItemProps {
     itemPosition?: MenuItemPosition;
     /** Override colorVariant from MenuContext */
     colorVariant?: MenuColorVariant;
+    /** Layout density of this menu item: 0 (48dp), -2 (40dp), -4 (32dp). */
+    density?: MenuDensity;
     /** If true, keeps the menu open after clicking (e.g. for multi-select items) */
     keepOpen?: boolean;
     className?: string;
@@ -937,6 +951,8 @@ interface MenuItemProps {
     isSubTrigger?: boolean;
     /** ARIA role override. Defaults to 'menuitem', 'menuitemcheckbox', or 'menuitemradio' based on selected prop. */
     role?: string;
+    /** Internal flag: true if rendered inside a gap-variant expressive menu */
+    isGapVariant?: boolean;
 }
 interface MenuGroupProps {
     /** MenuItem children — itemPosition is auto-injected */
@@ -967,6 +983,7 @@ interface MenuGroupProps {
 }
 interface MenuDividerProps {
     className?: string;
+    isGapVariant?: boolean;
 }
 interface SubMenuProps {
     /** The SubMenu children (another MenuContent) */
@@ -1159,7 +1176,7 @@ declare const ContextMenuContent: React$1.ForwardRefExoticComponent<ContextMenuC
  *   </MenuContent>
  * </Menu>
  */
-declare function Menu({ children, variant, menuVariant, colorVariant, open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, ...props }: MenuProps & Omit<React$1.ComponentPropsWithoutRef<typeof DropdownMenu.Root>, "children">): react_jsx_runtime.JSX.Element;
+declare function Menu({ children, variant, menuVariant, colorVariant, density, open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, ...props }: MenuProps & Omit<React$1.ComponentPropsWithoutRef<typeof DropdownMenu.Root>, "children">): react_jsx_runtime.JSX.Element;
 declare namespace Menu {
     var displayName: string;
 }
@@ -1237,6 +1254,8 @@ interface MenuContextValue {
     variant: MenuVariant;
     /** Color variant inherited by all children unless overridden */
     colorVariant: MenuColorVariant;
+    /** Density of menu items: 0, -2, -4 */
+    density: MenuDensity;
     /**
      * Which Radix primitive family drives this menu:
      * - "dropdown" → @radix-ui/react-dropdown-menu (button/field trigger)
@@ -1255,12 +1274,13 @@ interface MenuContextValue {
 interface MenuProviderProps {
     variant?: MenuVariant;
     colorVariant?: MenuColorVariant;
+    density?: MenuDensity;
     menuPrimitive?: MenuPrimitive;
     open: boolean;
     onOpenChange: (open: boolean) => void;
     children: React$1.ReactNode;
 }
-declare function MenuProvider({ variant, colorVariant, menuPrimitive, open, onOpenChange, children, }: MenuProviderProps): react_jsx_runtime.JSX.Element;
+declare function MenuProvider({ variant, colorVariant, density, menuPrimitive, open, onOpenChange, children, }: MenuProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Returns the nearest MenuContext value.
  * Safe to use outside a MenuProvider (returns default: baseline, dropdown, closed).
@@ -1397,7 +1417,7 @@ declare const ITEM_SHAPE_CLASSES: {
     readonly leading: "rounded-t-[12px] rounded-b-[4px]";
     readonly middle: "rounded-[4px]";
     readonly trailing: "rounded-t-[4px] rounded-b-[12px]";
-    readonly standalone: "rounded-[4px]";
+    readonly standalone: "rounded-[12px]";
     readonly selected: "rounded-[12px]";
 };
 /**
@@ -1424,9 +1444,9 @@ declare const STANDARD_COLORS: {
     /** Trailing icon color (StandardMenuTokens.ItemTrailingIconColor) */
     readonly trailingIconColor: "text-m3-on-surface-variant";
     /** Hover state layer (OnSurface @ 8% opacity) */
-    readonly hoverLayer: "hover:bg-m3-on-surface/8";
+    readonly hoverLayer: "hover:bg-m3-on-surface/8 data-[highlighted]:bg-m3-on-surface/8";
     /** Focus state layer (OnSurface @ 12% opacity) */
-    readonly focusLayer: "focus:bg-m3-on-surface/12";
+    readonly focusLayer: "focus:bg-m3-on-surface/12 data-[highlighted]:bg-m3-on-surface/8";
     /** Selected item background (StandardMenuTokens.ItemSelectedContainerColor) */
     readonly selectedBg: "bg-m3-tertiary-container";
     /** Selected item text (StandardMenuTokens.ItemSelectedLabelTextColor) */
@@ -1460,9 +1480,9 @@ declare const VIBRANT_COLORS: {
     /** Trailing icon color (VibrantMenuTokens.ItemTrailingIconColor) */
     readonly trailingIconColor: "text-m3-on-tertiary-container";
     /** Hover state layer (OnTertiaryContainer @ 8% opacity) */
-    readonly hoverLayer: "hover:bg-m3-on-tertiary-container/8";
+    readonly hoverLayer: "hover:bg-m3-on-tertiary-container/8 data-[highlighted]:bg-m3-on-tertiary-container/8";
     /** Focus state layer (OnTertiaryContainer @ 12% opacity) */
-    readonly focusLayer: "focus:bg-m3-on-tertiary-container/12";
+    readonly focusLayer: "focus:bg-m3-on-tertiary-container/12 data-[highlighted]:bg-m3-on-tertiary-container/8";
     /** Selected item background (VibrantMenuTokens.ItemSelectedContainerColor = Tertiary) */
     readonly selectedBg: "bg-m3-tertiary";
     /** Selected item text (VibrantMenuTokens.ItemSelectedLabelTextColor = OnTertiary) */