@bug-on/m3-expressive 1.2.3 → 1.2.5

package/dist/navigation.d.mts

@@ -5,6 +5,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as RxContextMenu from '@radix-ui/react-context-menu';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { Transition, Variants, HTMLMotionProps } from 'motion/react';
+import { M as MD3ShapeName } from './md3-expressive-shapes-CPcfl_Hf.mjs';
 import { B as BaseIconButtonProps } from './icon-button-CSsDmuQC.mjs';
 
 /**
@@ -810,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)
@@ -842,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)
@@ -894,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 {
@@ -927,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;
@@ -936,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 */
@@ -966,6 +983,7 @@ interface MenuGroupProps {
 }
 interface MenuDividerProps {
     className?: string;
+    isGapVariant?: boolean;
 }
 interface SubMenuProps {
     /** The SubMenu children (another MenuContent) */
@@ -1158,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;
 }
@@ -1236,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)
@@ -1254,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).
@@ -1396,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]";
 };
 /**
@@ -1423,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) */
@@ -1459,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) */
@@ -1609,6 +1630,18 @@ declare const VerticalMenuContent: React$1.ForwardRefExoticComponent<VerticalMen
  */
 declare const VerticalMenu: React$1.ForwardRefExoticComponent<VerticalMenuProps & React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 
+type NavigationItemShape = "pill" | MD3ShapeName;
+/**
+ * Returns inline style for a navigation item shape.
+ * If shape is 'pill' or 'circle', returns undefined (handled via rounded-full CSS).
+ * For custom MD3 shapes (e.g. 'sunny', 'flower', 'star'), returns { clipPath: "path(...)" }.
+ */
+declare function getNavigationShapeStyle(shape: NavigationItemShape | undefined, width?: number, height?: number): React.CSSProperties | undefined;
+/**
+ * Checks if a shape is a 1:1 ratio shape (circle or custom MD3 shape).
+ */
+declare function isSquareShape(shape: NavigationItemShape | undefined): boolean;
+
 /**
  * Layout styling for navigation bar items.
  * - vertical: Icon above label (default for mobile)
@@ -1622,13 +1655,20 @@ type NavigationBarItemLayout = "vertical" | "horizontal";
  * - xr: Floating orbiter variant for spatial interfaces (detached from bottom).
  */
 type NavigationBarVariant = "flexible" | "baseline" | "xr";
+type NavigationBarLabelVisibility = "labeled" | "auto" | "unlabeled";
 interface NavigationBarItemProps {
     selected: boolean;
     icon: React$1.ReactNode;
-    label: React$1.ReactNode;
+    label?: React$1.ReactNode;
     onClick?: () => void;
     disabled?: boolean;
     badge?: React$1.ReactNode;
+    /** Shape of the item active indicator / icon container (pill, circle, sunny, flower, etc.) */
+    shape?: NavigationItemShape;
+    /** Override size (width & height) of the shape container in px. Default: 56 for square shapes, 32h×56w for pill */
+    shapeSize?: number;
+    /** Hide the label below the icon. Overrides container-level labelVisibility. */
+    hideLabel?: boolean;
     "aria-label"?: string;
     className?: string;
     asChild?: boolean;
@@ -1639,6 +1679,17 @@ interface NavigationBarProps {
     variant?: NavigationBarVariant;
     /** Forces a specific item layout (horizontal/vertical) */
     itemLayout?: NavigationBarItemLayout;
+    /** Default shape of navigation items (pill, circle, sunny, flower, etc.) */
+    shape?: NavigationItemShape;
+    /**
+     * Label visibility for all items.
+     * - "labeled" (default): always show label
+     * - "auto": show label only for the selected item
+     * - "unlabeled": never show label (icon-only mode)
+     */
+    labelVisibility?: NavigationBarLabelVisibility;
+    /** Default size (width & height) for square shape containers in px. Default: 56 */
+    shapeSize?: number;
     /** Whether the bar should hide when scrolling down */
     hideOnScroll?: boolean;
     /** Whether the bar should have an elevation shadow */
@@ -1664,6 +1715,7 @@ declare const NavigationBar: React$1.NamedExoticComponent<NavigationBarProps & R
 
 type NavigationRailVariant = "collapsed" | "expanded" | "modal" | "xr";
 type NavigationRailLabelVisibility = "labeled" | "auto" | "unlabeled";
+type NavigationRailActiveIndicatorWidth = "hug" | "fill";
 interface NavigationRailItemProps {
     selected: boolean;
     icon: React$1.ReactNode;
@@ -1671,6 +1723,16 @@ interface NavigationRailItemProps {
     onClick?: () => void;
     disabled?: boolean;
     badge?: React$1.ReactNode;
+    /** Shape of the item active indicator / icon container (pill, circle, sunny, flower, etc.) */
+    shape?: NavigationItemShape;
+    /** Override size (width & height) of the shape container in px. Default: 56 for square shapes, 32h×56w for pill */
+    shapeSize?: number;
+    /**
+     * Width behavior of the active indicator when expanded with pill shape.
+     * - "hug" (default): hugs the icon + label contents (MD3 Expressive style)
+     * - "fill": fills the full width of the container (baseline navigation drawer style)
+     */
+    activeIndicatorWidth?: NavigationRailActiveIndicatorWidth;
     "aria-label"?: string;
     className?: string;
     asChild?: boolean;
@@ -1679,6 +1741,16 @@ interface NavigationRailItemProps {
 interface NavigationRailProps {
     variant?: NavigationRailVariant;
     labelVisibility?: NavigationRailLabelVisibility;
+    /** Default shape of navigation rail items (pill, circle, sunny, flower, etc.) */
+    shape?: NavigationItemShape;
+    /** Default size (width & height) for square shape containers in px. Default: 56 */
+    shapeSize?: number;
+    /**
+     * Default width behavior of the active indicator when expanded with pill shape.
+     * - "hug" (default): hugs the icon + label contents (MD3 Expressive style)
+     * - "fill": fills the full width of the container (baseline navigation drawer style)
+     */
+    activeIndicatorWidth?: NavigationRailActiveIndicatorWidth;
     header?: React$1.ReactNode;
     fab?: React$1.ReactNode;
     fabPlacement?: "contained" | "spatialized";
@@ -2811,18 +2883,17 @@ interface ToolbarToggleButtonProps extends Omit<HTMLMotionProps<"button">, "chil
      */
     children?: React$1.ReactNode;
     /**
-     * Scale compression factor when pressed/clicked.
-     * MD3 Expressive default: 0.95.
-     * @default 0.95
+     * Enable symmetric spring expand on press.
+     * The button expands equally to the left and right — matching ButtonDistribute behavior.
+     * @default true
      */
-    pressScale?: number;
+    pressExpand?: boolean;
     /**
-     * Horizontal spring bounce offset (in px) when pressed/clicked.
-     * Oscillates left and right then contracts back to center.
-     * Set to 0 to disable horizontal bounce.
-     * @default 6
+     * Fraction of the button width added symmetrically on press.
+     * e.g. 0.06 → scaleX goes from 1.0 to 1.06 (3% each side).
+     * @default 0.06
      */
-    pressBounceOffset?: number;
+    pressExpandRatio?: number;
     /**
      * Enable MD3 state layer ripple effect on click.
      * @default true
@@ -2838,8 +2909,10 @@ interface ToolbarToggleButtonProps extends Omit<HTMLMotionProps<"button">, "chil
  * An MD3 pill-shaped toggle button with optional leading icon and text label.
  *
  * Meets MD3 Expressive touch-target requirements (48dp height minimum, ~95dp width).
- * Features Material Design 3 Expressive spring press animation (`FAST_SPATIAL_SPRING`),
- * horizontal spring bounce oscillation (left-right bounce), and configurable ripple state layer.
+ * Features Material Design 3 Expressive spring press animation:
+ * - Symmetric horizontal expand (scaleX) with `FAST_SPATIAL_SPRING` (has bounce)
+ * - Border-radius morphing via `BUTTON_RADIUS_SPRING` (fast.effects, no overshoot)
+ * - Configurable ripple state layer
  *
  * @example
  * ```tsx
@@ -2894,4 +2967,4 @@ declare const ToolbarToggleButtonTokens: {
     readonly Gap: 8;
 };
 
-export { APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, type AppBarColors, AppBarColumn, type AppBarColumnProps, type AppBarItem, type AppBarItemType, type AppBarMenuState, AppBarOverflowIndicator, type AppBarOverflowIndicatorProps, AppBarRow, type AppBarRowProps, type AppBarScrollBehavior, AppBarTokens, type BaseAppBarProps, BottomAppBar, type BottomAppBarProps, BottomDockedToolbar, type BottomDockedToolbarProps, CHECK_ICON_VARIANTS, ContextMenu, ContextMenuContent, type ContextMenuContentProps, type ContextMenuProps, ContextMenuTrigger, type ContextMenuTriggerProps, DIVIDER_COLOR, DIVIDER_PADDING, DockedToolbar, type DockedToolbarProps, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, type FlexibleAppBarProps, type FloatingToolbarColors, type FloatingToolbarProps, type FloatingToolbarScrollBehavior, type FloatingToolbarWithFabProps, GROUP_SHAPES, HorizontalFloatingToolbar, HorizontalFloatingToolbarWithFab, ITEM_SHAPE_CLASSES, LargeFlexibleAppBar, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MediumFlexibleAppBar, Menu, type MenuColorVariant, MenuContent, type MenuContentProps, MenuDivider, type MenuDividerProps, MenuGroup, type MenuGroupPosition, type MenuGroupProps, MenuItem, type MenuItemPosition, type MenuItemProps, type MenuPrimitive, type MenuProps, MenuProvider, MenuTrigger, type MenuTriggerProps, type MenuVariant, NavigationBar, NavigationBarComponent, NavigationBarItem, type NavigationBarItemLayout, type NavigationBarItemProps, type NavigationBarProps, type NavigationBarVariant, NavigationRail, NavigationRailItem, type NavigationRailItemProps, type NavigationRailLabelVisibility, type NavigationRailProps, type NavigationRailVariant, SEARCH_BAR_EXIT_SPRING, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, Search, SearchAppBar, type SearchAppBarProps, SearchBar, type SearchBarVariant, type SearchProps, type SearchStyleType, SearchTokens, type SearchVariant, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, type SearchViewProps, SmallAppBar, type SmallAppBarProps, SubMenu, type SubMenuProps, Tab, type TabProps, Tabs, TabsColors, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTokens, type TabsVariant, type TitleAlignment, ToolbarDivider, type ToolbarDividerProps, ToolbarDividerTokens, ToolbarIconButton, type ToolbarIconButtonProps, type ToolbarIconButtonSize, ToolbarIconButtonTokens, type ToolbarIconButtonVariant, ToolbarToggleButton, type ToolbarToggleButtonProps, ToolbarToggleButtonTokens, type ToolbarVariant, type UseAppBarScrollReturn, type UseFloatingToolbarScrollBehaviorOptions, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, type VerticalMenuContentProps, VerticalMenuDivider, type VerticalMenuDividerProps, VerticalMenuGroup, type VerticalMenuGroupProps, type VerticalMenuProps, type VerticalMenuSeparatorStyle, appBarTypography, getToolbarColors, standardFloatingToolbarColors, surfaceContainerHighFloatingToolbarColors, surfaceContainerHighestFloatingToolbarColors, tertiaryContainerFloatingToolbarColors, useAppBarScroll, useFloatingToolbarScrollBehavior, useMenuContext, useSearch, useSearchKeyboard, vibrantFloatingToolbarColors, xrFloatingToolbarColors };
+export { APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, type AppBarColors, AppBarColumn, type AppBarColumnProps, type AppBarItem, type AppBarItemType, type AppBarMenuState, AppBarOverflowIndicator, type AppBarOverflowIndicatorProps, AppBarRow, type AppBarRowProps, type AppBarScrollBehavior, AppBarTokens, type BaseAppBarProps, BottomAppBar, type BottomAppBarProps, BottomDockedToolbar, type BottomDockedToolbarProps, CHECK_ICON_VARIANTS, ContextMenu, ContextMenuContent, type ContextMenuContentProps, type ContextMenuProps, ContextMenuTrigger, type ContextMenuTriggerProps, DIVIDER_COLOR, DIVIDER_PADDING, DockedToolbar, type DockedToolbarProps, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, type FlexibleAppBarProps, type FloatingToolbarColors, type FloatingToolbarProps, type FloatingToolbarScrollBehavior, type FloatingToolbarWithFabProps, GROUP_SHAPES, HorizontalFloatingToolbar, HorizontalFloatingToolbarWithFab, ITEM_SHAPE_CLASSES, LargeFlexibleAppBar, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MediumFlexibleAppBar, Menu, type MenuColorVariant, MenuContent, type MenuContentProps, MenuDivider, type MenuDividerProps, MenuGroup, type MenuGroupPosition, type MenuGroupProps, MenuItem, type MenuItemPosition, type MenuItemProps, type MenuPrimitive, type MenuProps, MenuProvider, MenuTrigger, type MenuTriggerProps, type MenuVariant, NavigationBar, NavigationBarComponent, NavigationBarItem, type NavigationBarItemLayout, type NavigationBarItemProps, type NavigationBarLabelVisibility, type NavigationBarProps, type NavigationBarVariant, type NavigationItemShape, NavigationRail, type NavigationRailActiveIndicatorWidth, NavigationRailItem, type NavigationRailItemProps, type NavigationRailLabelVisibility, type NavigationRailProps, type NavigationRailVariant, SEARCH_BAR_EXIT_SPRING, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, Search, SearchAppBar, type SearchAppBarProps, SearchBar, type SearchBarVariant, type SearchProps, type SearchStyleType, SearchTokens, type SearchVariant, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, type SearchViewProps, SmallAppBar, type SmallAppBarProps, SubMenu, type SubMenuProps, Tab, type TabProps, Tabs, TabsColors, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTokens, type TabsVariant, type TitleAlignment, ToolbarDivider, type ToolbarDividerProps, ToolbarDividerTokens, ToolbarIconButton, type ToolbarIconButtonProps, type ToolbarIconButtonSize, ToolbarIconButtonTokens, type ToolbarIconButtonVariant, ToolbarToggleButton, type ToolbarToggleButtonProps, ToolbarToggleButtonTokens, type ToolbarVariant, type UseAppBarScrollReturn, type UseFloatingToolbarScrollBehaviorOptions, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, type VerticalMenuContentProps, VerticalMenuDivider, type VerticalMenuDividerProps, VerticalMenuGroup, type VerticalMenuGroupProps, type VerticalMenuProps, type VerticalMenuSeparatorStyle, appBarTypography, getNavigationShapeStyle, getToolbarColors, isSquareShape, standardFloatingToolbarColors, surfaceContainerHighFloatingToolbarColors, surfaceContainerHighestFloatingToolbarColors, tertiaryContainerFloatingToolbarColors, useAppBarScroll, useFloatingToolbarScrollBehavior, useMenuContext, useSearch, useSearchKeyboard, vibrantFloatingToolbarColors, xrFloatingToolbarColors };

package/dist/navigation.d.ts

@@ -5,6 +5,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as RxContextMenu from '@radix-ui/react-context-menu';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { Transition, Variants, HTMLMotionProps } from 'motion/react';
+import { M as MD3ShapeName } from './md3-expressive-shapes-CPcfl_Hf.js';
 import { B as BaseIconButtonProps } from './icon-button-CSsDmuQC.js';
 
 /**
@@ -810,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)
@@ -842,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)
@@ -894,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 {
@@ -927,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;
@@ -936,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 */
@@ -966,6 +983,7 @@ interface MenuGroupProps {
 }
 interface MenuDividerProps {
     className?: string;
+    isGapVariant?: boolean;
 }
 interface SubMenuProps {
     /** The SubMenu children (another MenuContent) */
@@ -1158,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;
 }
@@ -1236,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)
@@ -1254,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).
@@ -1396,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]";
 };
 /**
@@ -1423,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) */
@@ -1459,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) */
@@ -1609,6 +1630,18 @@ declare const VerticalMenuContent: React$1.ForwardRefExoticComponent<VerticalMen
  */
 declare const VerticalMenu: React$1.ForwardRefExoticComponent<VerticalMenuProps & React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 
+type NavigationItemShape = "pill" | MD3ShapeName;
+/**
+ * Returns inline style for a navigation item shape.
+ * If shape is 'pill' or 'circle', returns undefined (handled via rounded-full CSS).
+ * For custom MD3 shapes (e.g. 'sunny', 'flower', 'star'), returns { clipPath: "path(...)" }.
+ */
+declare function getNavigationShapeStyle(shape: NavigationItemShape | undefined, width?: number, height?: number): React.CSSProperties | undefined;
+/**
+ * Checks if a shape is a 1:1 ratio shape (circle or custom MD3 shape).
+ */
+declare function isSquareShape(shape: NavigationItemShape | undefined): boolean;
+
 /**
  * Layout styling for navigation bar items.
  * - vertical: Icon above label (default for mobile)
@@ -1622,13 +1655,20 @@ type NavigationBarItemLayout = "vertical" | "horizontal";
  * - xr: Floating orbiter variant for spatial interfaces (detached from bottom).
  */
 type NavigationBarVariant = "flexible" | "baseline" | "xr";
+type NavigationBarLabelVisibility = "labeled" | "auto" | "unlabeled";
 interface NavigationBarItemProps {
     selected: boolean;
     icon: React$1.ReactNode;
-    label: React$1.ReactNode;
+    label?: React$1.ReactNode;
     onClick?: () => void;
     disabled?: boolean;
     badge?: React$1.ReactNode;
+    /** Shape of the item active indicator / icon container (pill, circle, sunny, flower, etc.) */
+    shape?: NavigationItemShape;
+    /** Override size (width & height) of the shape container in px. Default: 56 for square shapes, 32h×56w for pill */
+    shapeSize?: number;
+    /** Hide the label below the icon. Overrides container-level labelVisibility. */
+    hideLabel?: boolean;
     "aria-label"?: string;
     className?: string;
     asChild?: boolean;
@@ -1639,6 +1679,17 @@ interface NavigationBarProps {
     variant?: NavigationBarVariant;
     /** Forces a specific item layout (horizontal/vertical) */
     itemLayout?: NavigationBarItemLayout;
+    /** Default shape of navigation items (pill, circle, sunny, flower, etc.) */
+    shape?: NavigationItemShape;
+    /**
+     * Label visibility for all items.
+     * - "labeled" (default): always show label
+     * - "auto": show label only for the selected item
+     * - "unlabeled": never show label (icon-only mode)
+     */
+    labelVisibility?: NavigationBarLabelVisibility;
+    /** Default size (width & height) for square shape containers in px. Default: 56 */
+    shapeSize?: number;
     /** Whether the bar should hide when scrolling down */
     hideOnScroll?: boolean;
     /** Whether the bar should have an elevation shadow */
@@ -1664,6 +1715,7 @@ declare const NavigationBar: React$1.NamedExoticComponent<NavigationBarProps & R
 
 type NavigationRailVariant = "collapsed" | "expanded" | "modal" | "xr";
 type NavigationRailLabelVisibility = "labeled" | "auto" | "unlabeled";
+type NavigationRailActiveIndicatorWidth = "hug" | "fill";
 interface NavigationRailItemProps {
     selected: boolean;
     icon: React$1.ReactNode;
@@ -1671,6 +1723,16 @@ interface NavigationRailItemProps {
     onClick?: () => void;
     disabled?: boolean;
     badge?: React$1.ReactNode;
+    /** Shape of the item active indicator / icon container (pill, circle, sunny, flower, etc.) */
+    shape?: NavigationItemShape;
+    /** Override size (width & height) of the shape container in px. Default: 56 for square shapes, 32h×56w for pill */
+    shapeSize?: number;
+    /**
+     * Width behavior of the active indicator when expanded with pill shape.
+     * - "hug" (default): hugs the icon + label contents (MD3 Expressive style)
+     * - "fill": fills the full width of the container (baseline navigation drawer style)
+     */
+    activeIndicatorWidth?: NavigationRailActiveIndicatorWidth;
     "aria-label"?: string;
     className?: string;
     asChild?: boolean;
@@ -1679,6 +1741,16 @@ interface NavigationRailItemProps {
 interface NavigationRailProps {
     variant?: NavigationRailVariant;
     labelVisibility?: NavigationRailLabelVisibility;
+    /** Default shape of navigation rail items (pill, circle, sunny, flower, etc.) */
+    shape?: NavigationItemShape;
+    /** Default size (width & height) for square shape containers in px. Default: 56 */
+    shapeSize?: number;
+    /**
+     * Default width behavior of the active indicator when expanded with pill shape.
+     * - "hug" (default): hugs the icon + label contents (MD3 Expressive style)
+     * - "fill": fills the full width of the container (baseline navigation drawer style)
+     */
+    activeIndicatorWidth?: NavigationRailActiveIndicatorWidth;
     header?: React$1.ReactNode;
     fab?: React$1.ReactNode;
     fabPlacement?: "contained" | "spatialized";
@@ -2811,18 +2883,17 @@ interface ToolbarToggleButtonProps extends Omit<HTMLMotionProps<"button">, "chil
      */
     children?: React$1.ReactNode;
     /**
-     * Scale compression factor when pressed/clicked.
-     * MD3 Expressive default: 0.95.
-     * @default 0.95
+     * Enable symmetric spring expand on press.
+     * The button expands equally to the left and right — matching ButtonDistribute behavior.
+     * @default true
      */
-    pressScale?: number;
+    pressExpand?: boolean;
     /**
-     * Horizontal spring bounce offset (in px) when pressed/clicked.
-     * Oscillates left and right then contracts back to center.
-     * Set to 0 to disable horizontal bounce.
-     * @default 6
+     * Fraction of the button width added symmetrically on press.
+     * e.g. 0.06 → scaleX goes from 1.0 to 1.06 (3% each side).
+     * @default 0.06
      */
-    pressBounceOffset?: number;
+    pressExpandRatio?: number;
     /**
      * Enable MD3 state layer ripple effect on click.
      * @default true
@@ -2838,8 +2909,10 @@ interface ToolbarToggleButtonProps extends Omit<HTMLMotionProps<"button">, "chil
  * An MD3 pill-shaped toggle button with optional leading icon and text label.
  *
  * Meets MD3 Expressive touch-target requirements (48dp height minimum, ~95dp width).
- * Features Material Design 3 Expressive spring press animation (`FAST_SPATIAL_SPRING`),
- * horizontal spring bounce oscillation (left-right bounce), and configurable ripple state layer.
+ * Features Material Design 3 Expressive spring press animation:
+ * - Symmetric horizontal expand (scaleX) with `FAST_SPATIAL_SPRING` (has bounce)
+ * - Border-radius morphing via `BUTTON_RADIUS_SPRING` (fast.effects, no overshoot)
+ * - Configurable ripple state layer
  *
  * @example
  * ```tsx
@@ -2894,4 +2967,4 @@ declare const ToolbarToggleButtonTokens: {
     readonly Gap: 8;
 };
 
-export { APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, type AppBarColors, AppBarColumn, type AppBarColumnProps, type AppBarItem, type AppBarItemType, type AppBarMenuState, AppBarOverflowIndicator, type AppBarOverflowIndicatorProps, AppBarRow, type AppBarRowProps, type AppBarScrollBehavior, AppBarTokens, type BaseAppBarProps, BottomAppBar, type BottomAppBarProps, BottomDockedToolbar, type BottomDockedToolbarProps, CHECK_ICON_VARIANTS, ContextMenu, ContextMenuContent, type ContextMenuContentProps, type ContextMenuProps, ContextMenuTrigger, type ContextMenuTriggerProps, DIVIDER_COLOR, DIVIDER_PADDING, DockedToolbar, type DockedToolbarProps, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, type FlexibleAppBarProps, type FloatingToolbarColors, type FloatingToolbarProps, type FloatingToolbarScrollBehavior, type FloatingToolbarWithFabProps, GROUP_SHAPES, HorizontalFloatingToolbar, HorizontalFloatingToolbarWithFab, ITEM_SHAPE_CLASSES, LargeFlexibleAppBar, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MediumFlexibleAppBar, Menu, type MenuColorVariant, MenuContent, type MenuContentProps, MenuDivider, type MenuDividerProps, MenuGroup, type MenuGroupPosition, type MenuGroupProps, MenuItem, type MenuItemPosition, type MenuItemProps, type MenuPrimitive, type MenuProps, MenuProvider, MenuTrigger, type MenuTriggerProps, type MenuVariant, NavigationBar, NavigationBarComponent, NavigationBarItem, type NavigationBarItemLayout, type NavigationBarItemProps, type NavigationBarProps, type NavigationBarVariant, NavigationRail, NavigationRailItem, type NavigationRailItemProps, type NavigationRailLabelVisibility, type NavigationRailProps, type NavigationRailVariant, SEARCH_BAR_EXIT_SPRING, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, Search, SearchAppBar, type SearchAppBarProps, SearchBar, type SearchBarVariant, type SearchProps, type SearchStyleType, SearchTokens, type SearchVariant, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, type SearchViewProps, SmallAppBar, type SmallAppBarProps, SubMenu, type SubMenuProps, Tab, type TabProps, Tabs, TabsColors, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTokens, type TabsVariant, type TitleAlignment, ToolbarDivider, type ToolbarDividerProps, ToolbarDividerTokens, ToolbarIconButton, type ToolbarIconButtonProps, type ToolbarIconButtonSize, ToolbarIconButtonTokens, type ToolbarIconButtonVariant, ToolbarToggleButton, type ToolbarToggleButtonProps, ToolbarToggleButtonTokens, type ToolbarVariant, type UseAppBarScrollReturn, type UseFloatingToolbarScrollBehaviorOptions, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, type VerticalMenuContentProps, VerticalMenuDivider, type VerticalMenuDividerProps, VerticalMenuGroup, type VerticalMenuGroupProps, type VerticalMenuProps, type VerticalMenuSeparatorStyle, appBarTypography, getToolbarColors, standardFloatingToolbarColors, surfaceContainerHighFloatingToolbarColors, surfaceContainerHighestFloatingToolbarColors, tertiaryContainerFloatingToolbarColors, useAppBarScroll, useFloatingToolbarScrollBehavior, useMenuContext, useSearch, useSearchKeyboard, vibrantFloatingToolbarColors, xrFloatingToolbarColors };
+export { APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, type AppBarColors, AppBarColumn, type AppBarColumnProps, type AppBarItem, type AppBarItemType, type AppBarMenuState, AppBarOverflowIndicator, type AppBarOverflowIndicatorProps, AppBarRow, type AppBarRowProps, type AppBarScrollBehavior, AppBarTokens, type BaseAppBarProps, BottomAppBar, type BottomAppBarProps, BottomDockedToolbar, type BottomDockedToolbarProps, CHECK_ICON_VARIANTS, ContextMenu, ContextMenuContent, type ContextMenuContentProps, type ContextMenuProps, ContextMenuTrigger, type ContextMenuTriggerProps, DIVIDER_COLOR, DIVIDER_PADDING, DockedToolbar, type DockedToolbarProps, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, type FlexibleAppBarProps, type FloatingToolbarColors, type FloatingToolbarProps, type FloatingToolbarScrollBehavior, type FloatingToolbarWithFabProps, GROUP_SHAPES, HorizontalFloatingToolbar, HorizontalFloatingToolbarWithFab, ITEM_SHAPE_CLASSES, LargeFlexibleAppBar, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MediumFlexibleAppBar, Menu, type MenuColorVariant, MenuContent, type MenuContentProps, MenuDivider, type MenuDividerProps, MenuGroup, type MenuGroupPosition, type MenuGroupProps, MenuItem, type MenuItemPosition, type MenuItemProps, type MenuPrimitive, type MenuProps, MenuProvider, MenuTrigger, type MenuTriggerProps, type MenuVariant, NavigationBar, NavigationBarComponent, NavigationBarItem, type NavigationBarItemLayout, type NavigationBarItemProps, type NavigationBarLabelVisibility, type NavigationBarProps, type NavigationBarVariant, type NavigationItemShape, NavigationRail, type NavigationRailActiveIndicatorWidth, NavigationRailItem, type NavigationRailItemProps, type NavigationRailLabelVisibility, type NavigationRailProps, type NavigationRailVariant, SEARCH_BAR_EXIT_SPRING, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, Search, SearchAppBar, type SearchAppBarProps, SearchBar, type SearchBarVariant, type SearchProps, type SearchStyleType, SearchTokens, type SearchVariant, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, type SearchViewProps, SmallAppBar, type SmallAppBarProps, SubMenu, type SubMenuProps, Tab, type TabProps, Tabs, TabsColors, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTokens, type TabsVariant, type TitleAlignment, ToolbarDivider, type ToolbarDividerProps, ToolbarDividerTokens, ToolbarIconButton, type ToolbarIconButtonProps, type ToolbarIconButtonSize, ToolbarIconButtonTokens, type ToolbarIconButtonVariant, ToolbarToggleButton, type ToolbarToggleButtonProps, ToolbarToggleButtonTokens, type ToolbarVariant, type UseAppBarScrollReturn, type UseFloatingToolbarScrollBehaviorOptions, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, type VerticalMenuContentProps, VerticalMenuDivider, type VerticalMenuDividerProps, VerticalMenuGroup, type VerticalMenuGroupProps, type VerticalMenuProps, type VerticalMenuSeparatorStyle, appBarTypography, getNavigationShapeStyle, getToolbarColors, isSquareShape, standardFloatingToolbarColors, surfaceContainerHighFloatingToolbarColors, surfaceContainerHighestFloatingToolbarColors, tertiaryContainerFloatingToolbarColors, useAppBarScroll, useFloatingToolbarScrollBehavior, useMenuContext, useSearch, useSearchKeyboard, vibrantFloatingToolbarColors, xrFloatingToolbarColors };