@bug-on/m3-expressive 1.2.0 → 1.2.1

package/dist/navigation.d.mts

@@ -4,8 +4,8 @@ import { RefObject } from 'react';
 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 } from 'motion/react';
-import { B as BaseIconButtonProps } from './icon-button-D-gs0gfj.mjs';
+import { Transition, Variants, HTMLMotionProps } from 'motion/react';
+import { B as BaseIconButtonProps } from './icon-button-sSt6PPLg.mjs';
 
 /**
  * @file app-bar.tokens.ts
@@ -1649,6 +1649,8 @@ interface NavigationBarProps {
     activeIndicatorTransition?: Transition;
     /** Navigation items */
     children: React$1.ReactNode;
+    /** Optional additional classes for individual navigation items */
+    itemClassName?: string;
     /** Optional additional classes */
     className?: string;
     /** Optional inline styles */
@@ -2383,6 +2385,11 @@ declare const TabsList: React$1.NamedExoticComponent<TabsListProps & React$1.Ref
  * Color configuration types and standard values for the FloatingToolbar component.
  * Maps MD3 design tokens to CSS custom properties used in Tailwind CSS.
  */
+/**
+ * Color configuration types and standard values for the FloatingToolbar component.
+ * Maps MD3 design tokens to CSS custom properties used in Tailwind CSS.
+ */
+type ToolbarVariant = "standard" | "vibrant" | "surface-high" | "surface-highest" | "tertiary" | "xr";
 interface FloatingToolbarColors {
     /** The background color of the toolbar container */
     toolbarContainerColor?: string;
@@ -2403,10 +2410,31 @@ declare const standardFloatingToolbarColors: FloatingToolbarColors;
  * Uses primary container for the toolbar and tertiary container for the FAB.
  */
 declare const vibrantFloatingToolbarColors: FloatingToolbarColors;
+/**
+ * Surface Container High color configuration for the toolbar (XR / Elevated).
+ */
+declare const surfaceContainerHighFloatingToolbarColors: FloatingToolbarColors;
+/**
+ * Surface Container Highest color configuration for the toolbar (XR / Elevated).
+ */
+declare const surfaceContainerHighestFloatingToolbarColors: FloatingToolbarColors;
+/**
+ * Tertiary Container color configuration for the toolbar.
+ */
+declare const tertiaryContainerFloatingToolbarColors: FloatingToolbarColors;
+/**
+ * XR Glassmorphic color configuration for the toolbar.
+ * Uses semi-transparent surface container high with backdrop blur.
+ */
+declare const xrFloatingToolbarColors: FloatingToolbarColors;
+/**
+ * Helper function to resolve FloatingToolbarColors based on variant prop or custom override.
+ */
+declare function getToolbarColors(variant?: ToolbarVariant, customColors?: FloatingToolbarColors): FloatingToolbarColors;
 
 interface BottomDockedToolbarProps {
-    /** Color variant: standard or vibrant */
-    variant?: "standard" | "vibrant";
+    /** Color variant: standard, vibrant, surface-high, surface-highest, tertiary, or xr */
+    variant?: ToolbarVariant;
     /** Custom colors override */
     colors?: FloatingToolbarColors;
     /** Whether to hide on scroll */
@@ -2517,7 +2545,9 @@ interface FloatingToolbarProps {
     expanded: boolean;
     /** Orientation of the toolbar */
     orientation?: "horizontal" | "vertical";
-    /** Color configuration */
+    /** Color variant: standard, vibrant, surface-high, surface-highest, tertiary, or xr */
+    variant?: ToolbarVariant;
+    /** Color configuration override */
     colors?: FloatingToolbarColors;
     /** Shape variant: full = pill shape (default), large = large rounded */
     shape?: "full" | "large";
@@ -2681,6 +2711,14 @@ interface ToolbarIconButtonProps extends Omit<BaseIconButtonProps, "colorStyle"
      * @default "default"
      */
     toolbarSize?: ToolbarIconButtonSize;
+    /**
+     * Whether the icon button is in a selected/active toggle state.
+     */
+    selected?: boolean;
+    /**
+     * Change the default rendered element to the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
     /** Icon content — typically a single SVG icon component. */
     children: React$1.ReactNode;
     /**
@@ -2716,6 +2754,8 @@ type ToolbarIconButtonVariant = "standard" | "tonal" | "filled";
  * Wraps the project's `IconButton` and adds:
  * - Three emphasis styles (`standard`, `tonal`, `filled`) via `emphasis` prop.
  * - Three width sizes (`narrow`, `default`, `wide`) for visual hierarchy.
+ * - Support for `selected` state (Toggleable Icon Button per MD3 spec).
+ * - Support for `asChild` slot delegation.
  * - Always `rounded-full` shape (required for floating toolbars per MD3 spec).
  * - Always 48dp height to meet MD3 accessibility touch-target requirements.
  *
@@ -2726,9 +2766,9 @@ type ToolbarIconButtonVariant = "standard" | "tonal" | "filled";
  *   <ShareIcon />
  * </ToolbarIconButton>
  *
- * // Filled + wide — use for the single highest-priority action
- * <ToolbarIconButton emphasis="filled" toolbarSize="wide" aria-label="Add">
- *   <PlusIcon />
+ * // Toggleable state
+ * <ToolbarIconButton selected={isSelected} aria-label="Bookmark" onClick={() => setIsSelected(!isSelected)}>
+ *   <BookmarkIcon />
  * </ToolbarIconButton>
  * ```
  *
@@ -2736,6 +2776,80 @@ type ToolbarIconButtonVariant = "standard" | "tonal" | "filled";
  */
 declare const ToolbarIconButton: React$1.ForwardRefExoticComponent<Omit<ToolbarIconButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * @file toolbar-toggle-button.tsx
+ *
+ * An MD3 Expressive toggle button with icon and text label for Toolbar slots.
+ * Implements the 'Button toggleable' building block from MD3 Toolbar guidelines.
+ *
+ * @see https://m3.material.io/components/toolbars/guidelines (Anatomy → Flexibility & slots)
+ */
+
+interface ToolbarToggleButtonProps extends Omit<HTMLMotionProps<"button">, "children"> {
+    /**
+     * Visual emphasis variant.
+     * @default "standard"
+     */
+    emphasis?: "standard" | "tonal" | "filled";
+    /**
+     * Whether the button is in a selected/active state.
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Leading icon component or node.
+     */
+    icon?: React$1.ReactNode;
+    /**
+     * Button text label / content.
+     */
+    children?: React$1.ReactNode;
+    /**
+     * Scale compression factor when pressed/clicked.
+     * MD3 Expressive default: 0.95.
+     * @default 0.95
+     */
+    pressScale?: number;
+    /**
+     * 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
+     */
+    pressBounceOffset?: number;
+    /**
+     * Enable MD3 state layer ripple effect on click.
+     * @default true
+     */
+    ripple?: boolean;
+    /**
+     * Delegation prop to merge props onto a child element (Radix Slot).
+     */
+    asChild?: boolean;
+    className?: string;
+}
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * const [selected, setSelected] = useState(false);
+ *
+ * <ToolbarToggleButton
+ *   selected={selected}
+ *   onClick={() => setSelected(!selected)}
+ *   icon={<EditIcon />}
+ * >
+ *   Edit
+ * </ToolbarToggleButton>
+ * ```
+ */
+declare const ToolbarToggleButton: React$1.ForwardRefExoticComponent<Omit<ToolbarToggleButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
 /**
  * Design tokens for the ToolbarDivider component.
  * The divider is a decorative separator used to group toolbar actions.
@@ -2762,5 +2876,16 @@ declare const ToolbarIconButtonTokens: {
     /** Icon size in dp — larger than standard 24dp to fill the 48dp button properly */
     readonly IconSize: 28;
 };
+/**
+ * Design tokens for the ToolbarToggleButton component.
+ * Follows MD3 Expressive 'Button toggleable' building block specifications.
+ */
+declare const ToolbarToggleButtonTokens: {
+    readonly Height: 48;
+    readonly MinWidth: 95;
+    readonly IconSize: 24;
+    readonly PaddingX: 16;
+    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, type UseAppBarScrollReturn, type UseFloatingToolbarScrollBehaviorOptions, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, type VerticalMenuContentProps, VerticalMenuDivider, type VerticalMenuDividerProps, VerticalMenuGroup, type VerticalMenuGroupProps, type VerticalMenuProps, type VerticalMenuSeparatorStyle, appBarTypography, standardFloatingToolbarColors, useAppBarScroll, useFloatingToolbarScrollBehavior, useMenuContext, useSearch, useSearchKeyboard, vibrantFloatingToolbarColors };
+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 };

package/dist/navigation.d.ts

@@ -4,8 +4,8 @@ import { RefObject } from 'react';
 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 } from 'motion/react';
-import { B as BaseIconButtonProps } from './icon-button-D-gs0gfj.js';
+import { Transition, Variants, HTMLMotionProps } from 'motion/react';
+import { B as BaseIconButtonProps } from './icon-button-sSt6PPLg.js';
 
 /**
  * @file app-bar.tokens.ts
@@ -1649,6 +1649,8 @@ interface NavigationBarProps {
     activeIndicatorTransition?: Transition;
     /** Navigation items */
     children: React$1.ReactNode;
+    /** Optional additional classes for individual navigation items */
+    itemClassName?: string;
     /** Optional additional classes */
     className?: string;
     /** Optional inline styles */
@@ -2383,6 +2385,11 @@ declare const TabsList: React$1.NamedExoticComponent<TabsListProps & React$1.Ref
  * Color configuration types and standard values for the FloatingToolbar component.
  * Maps MD3 design tokens to CSS custom properties used in Tailwind CSS.
  */
+/**
+ * Color configuration types and standard values for the FloatingToolbar component.
+ * Maps MD3 design tokens to CSS custom properties used in Tailwind CSS.
+ */
+type ToolbarVariant = "standard" | "vibrant" | "surface-high" | "surface-highest" | "tertiary" | "xr";
 interface FloatingToolbarColors {
     /** The background color of the toolbar container */
     toolbarContainerColor?: string;
@@ -2403,10 +2410,31 @@ declare const standardFloatingToolbarColors: FloatingToolbarColors;
  * Uses primary container for the toolbar and tertiary container for the FAB.
  */
 declare const vibrantFloatingToolbarColors: FloatingToolbarColors;
+/**
+ * Surface Container High color configuration for the toolbar (XR / Elevated).
+ */
+declare const surfaceContainerHighFloatingToolbarColors: FloatingToolbarColors;
+/**
+ * Surface Container Highest color configuration for the toolbar (XR / Elevated).
+ */
+declare const surfaceContainerHighestFloatingToolbarColors: FloatingToolbarColors;
+/**
+ * Tertiary Container color configuration for the toolbar.
+ */
+declare const tertiaryContainerFloatingToolbarColors: FloatingToolbarColors;
+/**
+ * XR Glassmorphic color configuration for the toolbar.
+ * Uses semi-transparent surface container high with backdrop blur.
+ */
+declare const xrFloatingToolbarColors: FloatingToolbarColors;
+/**
+ * Helper function to resolve FloatingToolbarColors based on variant prop or custom override.
+ */
+declare function getToolbarColors(variant?: ToolbarVariant, customColors?: FloatingToolbarColors): FloatingToolbarColors;
 
 interface BottomDockedToolbarProps {
-    /** Color variant: standard or vibrant */
-    variant?: "standard" | "vibrant";
+    /** Color variant: standard, vibrant, surface-high, surface-highest, tertiary, or xr */
+    variant?: ToolbarVariant;
     /** Custom colors override */
     colors?: FloatingToolbarColors;
     /** Whether to hide on scroll */
@@ -2517,7 +2545,9 @@ interface FloatingToolbarProps {
     expanded: boolean;
     /** Orientation of the toolbar */
     orientation?: "horizontal" | "vertical";
-    /** Color configuration */
+    /** Color variant: standard, vibrant, surface-high, surface-highest, tertiary, or xr */
+    variant?: ToolbarVariant;
+    /** Color configuration override */
     colors?: FloatingToolbarColors;
     /** Shape variant: full = pill shape (default), large = large rounded */
     shape?: "full" | "large";
@@ -2681,6 +2711,14 @@ interface ToolbarIconButtonProps extends Omit<BaseIconButtonProps, "colorStyle"
      * @default "default"
      */
     toolbarSize?: ToolbarIconButtonSize;
+    /**
+     * Whether the icon button is in a selected/active toggle state.
+     */
+    selected?: boolean;
+    /**
+     * Change the default rendered element to the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
     /** Icon content — typically a single SVG icon component. */
     children: React$1.ReactNode;
     /**
@@ -2716,6 +2754,8 @@ type ToolbarIconButtonVariant = "standard" | "tonal" | "filled";
  * Wraps the project's `IconButton` and adds:
  * - Three emphasis styles (`standard`, `tonal`, `filled`) via `emphasis` prop.
  * - Three width sizes (`narrow`, `default`, `wide`) for visual hierarchy.
+ * - Support for `selected` state (Toggleable Icon Button per MD3 spec).
+ * - Support for `asChild` slot delegation.
  * - Always `rounded-full` shape (required for floating toolbars per MD3 spec).
  * - Always 48dp height to meet MD3 accessibility touch-target requirements.
  *
@@ -2726,9 +2766,9 @@ type ToolbarIconButtonVariant = "standard" | "tonal" | "filled";
  *   <ShareIcon />
  * </ToolbarIconButton>
  *
- * // Filled + wide — use for the single highest-priority action
- * <ToolbarIconButton emphasis="filled" toolbarSize="wide" aria-label="Add">
- *   <PlusIcon />
+ * // Toggleable state
+ * <ToolbarIconButton selected={isSelected} aria-label="Bookmark" onClick={() => setIsSelected(!isSelected)}>
+ *   <BookmarkIcon />
  * </ToolbarIconButton>
  * ```
  *
@@ -2736,6 +2776,80 @@ type ToolbarIconButtonVariant = "standard" | "tonal" | "filled";
  */
 declare const ToolbarIconButton: React$1.ForwardRefExoticComponent<Omit<ToolbarIconButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * @file toolbar-toggle-button.tsx
+ *
+ * An MD3 Expressive toggle button with icon and text label for Toolbar slots.
+ * Implements the 'Button toggleable' building block from MD3 Toolbar guidelines.
+ *
+ * @see https://m3.material.io/components/toolbars/guidelines (Anatomy → Flexibility & slots)
+ */
+
+interface ToolbarToggleButtonProps extends Omit<HTMLMotionProps<"button">, "children"> {
+    /**
+     * Visual emphasis variant.
+     * @default "standard"
+     */
+    emphasis?: "standard" | "tonal" | "filled";
+    /**
+     * Whether the button is in a selected/active state.
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Leading icon component or node.
+     */
+    icon?: React$1.ReactNode;
+    /**
+     * Button text label / content.
+     */
+    children?: React$1.ReactNode;
+    /**
+     * Scale compression factor when pressed/clicked.
+     * MD3 Expressive default: 0.95.
+     * @default 0.95
+     */
+    pressScale?: number;
+    /**
+     * 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
+     */
+    pressBounceOffset?: number;
+    /**
+     * Enable MD3 state layer ripple effect on click.
+     * @default true
+     */
+    ripple?: boolean;
+    /**
+     * Delegation prop to merge props onto a child element (Radix Slot).
+     */
+    asChild?: boolean;
+    className?: string;
+}
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * const [selected, setSelected] = useState(false);
+ *
+ * <ToolbarToggleButton
+ *   selected={selected}
+ *   onClick={() => setSelected(!selected)}
+ *   icon={<EditIcon />}
+ * >
+ *   Edit
+ * </ToolbarToggleButton>
+ * ```
+ */
+declare const ToolbarToggleButton: React$1.ForwardRefExoticComponent<Omit<ToolbarToggleButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
 /**
  * Design tokens for the ToolbarDivider component.
  * The divider is a decorative separator used to group toolbar actions.
@@ -2762,5 +2876,16 @@ declare const ToolbarIconButtonTokens: {
     /** Icon size in dp — larger than standard 24dp to fill the 48dp button properly */
     readonly IconSize: 28;
 };
+/**
+ * Design tokens for the ToolbarToggleButton component.
+ * Follows MD3 Expressive 'Button toggleable' building block specifications.
+ */
+declare const ToolbarToggleButtonTokens: {
+    readonly Height: 48;
+    readonly MinWidth: 95;
+    readonly IconSize: 24;
+    readonly PaddingX: 16;
+    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, type UseAppBarScrollReturn, type UseFloatingToolbarScrollBehaviorOptions, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, type VerticalMenuContentProps, VerticalMenuDivider, type VerticalMenuDividerProps, VerticalMenuGroup, type VerticalMenuGroupProps, type VerticalMenuProps, type VerticalMenuSeparatorStyle, appBarTypography, standardFloatingToolbarColors, useAppBarScroll, useFloatingToolbarScrollBehavior, useMenuContext, useSearch, useSearchKeyboard, vibrantFloatingToolbarColors };
+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 };