@bug-on/m3-expressive 1.2.7 → 1.3.1

package/dist/{md3-Dty-Qcad.d.mts → md3-D0_Z7IXj.d.mts}

@@ -10,6 +10,14 @@ type MD3ColorStyle = "elevated" | "filled" | "tonal" | "outlined" | "text"
  | "tertiary-fixed";
 /** MD3 Expressive button sizes */
 type MD3Size = "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * MD3 Expressive slot width ratio.
+ * Used for icon buttons where width is independent from the size scale.
+ * - `"narrow"` – compressed width for dense toolbars.
+ * - `"default"` – 1:1 square/round aspect ratio.
+ * - `"wide"` – extended width.
+ */
+type MD3SlotWidth = "narrow" | "default" | "wide";
 /** MD3 shape families */
 type MD3Shape = "round" | "square";
 /** Helper: PolyMorphic component ref */
@@ -20,4 +28,4 @@ type PolymorphicProps<C extends ElementType, Props = object> = Props & Omit<Comp
     children?: ReactNode;
 };
 
-export type { MD3ColorStyle as M, PolymorphicProps as P, MD3Shape as a, MD3Size as b, PolymorphicRef as c };
+export type { MD3SlotWidth as M, PolymorphicProps as P, MD3ColorStyle as a, MD3Shape as b, MD3Size as c, PolymorphicRef as d };

package/dist/{md3-Dty-Qcad.d.ts → md3-D0_Z7IXj.d.ts}

@@ -10,6 +10,14 @@ type MD3ColorStyle = "elevated" | "filled" | "tonal" | "outlined" | "text"
  | "tertiary-fixed";
 /** MD3 Expressive button sizes */
 type MD3Size = "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * MD3 Expressive slot width ratio.
+ * Used for icon buttons where width is independent from the size scale.
+ * - `"narrow"` – compressed width for dense toolbars.
+ * - `"default"` – 1:1 square/round aspect ratio.
+ * - `"wide"` – extended width.
+ */
+type MD3SlotWidth = "narrow" | "default" | "wide";
 /** MD3 shape families */
 type MD3Shape = "round" | "square";
 /** Helper: PolyMorphic component ref */
@@ -20,4 +28,4 @@ type PolymorphicProps<C extends ElementType, Props = object> = Props & Omit<Comp
     children?: ReactNode;
 };
 
-export type { MD3ColorStyle as M, PolymorphicProps as P, MD3Shape as a, MD3Size as b, PolymorphicRef as c };
+export type { MD3SlotWidth as M, PolymorphicProps as P, MD3ColorStyle as a, MD3Shape as b, MD3Size as c, PolymorphicRef as d };

package/dist/navigation.d.mts

@@ -1,12 +1,86 @@
-import * as motion from 'motion';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import { RefObject } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as motion from 'motion';
 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';
+import { M as MD3SlotWidth } from './md3-D0_Z7IXj.mjs';
+import { B as BaseIconButtonProps } from './icon-button-USJo7AqO.mjs';
+
+/**
+ * @file fading-blur-mask.types.ts
+ * Fading Edge & Backdrop Blur Mask — TypeScript interfaces.
+ */
+
+/** Gradient fade direction for the blur mask. */
+type FadingBlurDirection = "top" | "bottom" | "both";
+/**
+ * Props for the primitive `<FadingBlurMask>` component.
+ */
+interface FadingBlurMaskProps {
+    /**
+     * Gradient fade direction.
+     * - `top`: Fades from opaque at top to transparent downward (for Top App Bars).
+     * - `bottom`: Fades from opaque at bottom to transparent upward (for Bottom App Bars).
+     * - `both`: Fades at both top and bottom edges.
+     * @default "top"
+     */
+    direction?: FadingBlurDirection;
+    /**
+     * Backdrop blur radius in pixels.
+     * @default 12
+     */
+    blurIntensity?: number;
+    /**
+     * Height/length of the fade mask container or gradient zone.
+     * Can be a CSS string (e.g., "100%", "64px") or pixel number.
+     * @default "100%"
+     */
+    blurHeight?: number | string;
+    /**
+     * Tint or background color overlay mixed into the blur.
+     * Defaults to MD3 surface token `var(--md-sys-color-surface)`.
+     */
+    color?: string;
+    /** Additional CSS class names for styling. */
+    className?: string;
+    /** Custom inline styles. */
+    style?: React$1.CSSProperties;
+    /** Children components rendered inside the blur mask container if needed. */
+    children?: React$1.ReactNode;
+}
+/**
+ * Mixin interface for components that integrate Fading Blur functionality (e.g. AppBars).
+ */
+interface FadingBlurProps {
+    /**
+     * Enables smooth fading edge and backdrop blur effect.
+     * @default false
+     */
+    enableFadingBlur?: boolean;
+    /**
+     * Custom blur intensity in pixels when `enableFadingBlur` is active.
+     * @default 12
+     */
+    blurIntensity?: number;
+    /**
+     * Custom blur height when `enableFadingBlur` is active.
+     * Defaults to container height.
+     */
+    blurHeight?: number | string;
+}
+
+/**
+ * `<FadingBlurMask>` component renders a smooth gradient fading backdrop blur overlay.
+ *
+ * @example
+ * ```tsx
+ * <FadingBlurMask direction="top" blurIntensity={16} />
+ * ```
+ */
+declare function FadingBlurMask({ direction, blurIntensity, blurHeight, color, className, style, children, }: FadingBlurMaskProps): react_jsx_runtime.JSX.Element;
 
 /**
  * @file app-bar.tokens.ts
@@ -214,7 +288,7 @@ interface AppBarColors {
 /**
  * Shared props for all top App Bar variants.
  */
-interface BaseAppBarProps {
+interface BaseAppBarProps extends FadingBlurProps {
     /**
      * Navigation icon slot (typically IconButton with back arrow or hamburger).
      * Should have `aria-label` for accessibility.
@@ -362,6 +436,12 @@ interface SearchAppBarProps extends BaseAppBarProps {
      * @default "search-bar"
      */
     searchBarId?: string;
+    /**
+     * Height of the search bar pill in px.
+     * MD3 spec: 56dp. Override for compact layouts.
+     * @default 56
+     */
+    searchBarHeight?: number;
 }
 /**
  * Props for `<BottomAppBar>`.
@@ -369,7 +449,7 @@ interface SearchAppBarProps extends BaseAppBarProps {
  * Fixed to the bottom of the screen. Contains navigation actions and optional FAB.
  * Height: 80px. Background: `surface-container`. Elevation: Level2.
  */
-interface BottomAppBarProps {
+interface BottomAppBarProps extends FadingBlurProps {
     /**
      * Action icon buttons rendered at the leading end.
      * Typically 3-4 `<IconButton>` components.
@@ -636,7 +716,7 @@ declare function AppBarRow({ items, maxItemCount, className }: AppBarRowProps):
  * <BottomAppBar scrollBehavior="hidden" actions={...} />
  * ```
  */
-declare function BottomAppBar({ actions, floatingActionButton, scrollBehavior, scrollElement, className, }: BottomAppBarProps): react_jsx_runtime.JSX.Element;
+declare function BottomAppBar({ actions, floatingActionButton, scrollBehavior, scrollElement, className, enableFadingBlur, blurIntensity, blurHeight, }: BottomAppBarProps): react_jsx_runtime.JSX.Element;
 
 /**
  * MD3 Expressive Docked Toolbar.
@@ -706,7 +786,7 @@ declare function useAppBarScroll({ scrollElement, behavior, collapsedHeight, exp
  * />
  * ```
  */
-declare function LargeFlexibleAppBar({ title, subtitle, titleAlignment, navigationIcon, actions, colors, scrollElement, headerContent, collapsedHeight, expandedHeight, className, }: FlexibleAppBarProps): react_jsx_runtime.JSX.Element;
+declare function LargeFlexibleAppBar({ title, subtitle, titleAlignment, navigationIcon, actions, colors, scrollElement, headerContent, collapsedHeight, expandedHeight, className, enableFadingBlur, blurIntensity, blurHeight, }: FlexibleAppBarProps): react_jsx_runtime.JSX.Element;
 
 /**
  * MD3 Expressive Medium Flexible App Bar.
@@ -721,7 +801,7 @@ declare function LargeFlexibleAppBar({ title, subtitle, titleAlignment, navigati
  * />
  * ```
  */
-declare function MediumFlexibleAppBar({ title, subtitle, titleAlignment, navigationIcon, actions, colors, scrollElement, headerContent, collapsedHeight, expandedHeight, className, }: FlexibleAppBarProps): react_jsx_runtime.JSX.Element;
+declare function MediumFlexibleAppBar({ title, subtitle, titleAlignment, navigationIcon, actions, colors, scrollElement, headerContent, collapsedHeight, expandedHeight, className, enableFadingBlur, blurIntensity, blurHeight, }: FlexibleAppBarProps): react_jsx_runtime.JSX.Element;
 
 /**
  * MD3 Expressive Search App Bar.
@@ -754,7 +834,7 @@ declare function MediumFlexibleAppBar({ title, subtitle, titleAlignment, navigat
  * </AnimatePresence>
  * ```
  */
-declare function SearchAppBar({ searchPlaceholder, searchValue, onSearchFocus, leadingSearchIcon, trailingSearchActions, externalActions, navigationIcon, colors, scrollBehavior, scrollElement, searchBarId, className, }: SearchAppBarProps): react_jsx_runtime.JSX.Element;
+declare function SearchAppBar({ searchPlaceholder, searchValue, onSearchFocus, leadingSearchIcon, trailingSearchActions, externalActions, navigationIcon, colors, scrollBehavior, scrollElement, searchBarId, searchBarVariant, searchBarHeight, className, enableFadingBlur, blurIntensity, blurHeight, }: SearchAppBarProps): react_jsx_runtime.JSX.Element;
 
 /**
  * MD3 Expressive Search View.
@@ -805,7 +885,7 @@ declare function SearchViewContainer({ isOpen, ...props }: SearchViewProps & {
  * />
  * ```
  */
-declare function SmallAppBar({ title, subtitle, titleAlignment, navigationIcon, actions, colors, scrollBehavior, scrollElement, className, }: SmallAppBarProps): react_jsx_runtime.JSX.Element;
+declare function SmallAppBar({ title, subtitle, titleAlignment, navigationIcon, actions, colors, scrollBehavior, scrollElement, className, enableFadingBlur, blurIntensity, blurHeight, }: SmallAppBarProps): react_jsx_runtime.JSX.Element;
 
 /** Color variant of the menu — standard (surface-based) or vibrant (tertiary-based). */
 type MenuColorVariant = "standard" | "vibrant";
@@ -2703,14 +2783,13 @@ interface FloatingToolbarWithFabProps extends FloatingToolbarProps {
     /** End content (explicitly declared to resolve type issues) */
     endContent?: React$1.ReactNode;
     /**
-     * Size of the FAB container.
-     * - `"default"` → 56×56px (`FabBaselineTokens.ContainerHeight`)
-     * - `"medium"` → 80×80px (`FabBaselineTokens.MediumContainerHeight`)
-     *
-     * MD3: pair a medium FAB with the toolbar to give it greater visual prominence.
-     * @default "default"
+     * FAB size embedded in the floating toolbar.
+     * - `"sm"` – standard FAB: 56×56dp (MD3 default).
+     * - `"md"` – medium FAB: 80×80dp (`FabBaselineTokens.MediumContainerHeight`).
+     * Corresponds to MD3 Toolbar Floating FAB token sizes.
+     * @default "sm"
      */
-    fabSize?: "default" | "medium";
+    fabSize?: "sm" | "md";
 }
 /**
  * A horizontal floating toolbar paired with a FAB.
@@ -2781,12 +2860,14 @@ interface ToolbarIconButtonProps extends Omit<BaseIconButtonProps, "colorStyle"
      */
     emphasis?: ToolbarIconButtonVariant;
     /**
-     * Button width sizing.
-     *
-     * Height is always `48px` to meet MD3 touch-target requirements.
+     * Slot width of the toolbar icon button per MD3 Expressive specification.
+     * Controls how much horizontal space the button occupies in the toolbar.
+     * - `"narrow"` – minimum width slot (40px), for compact actions.
+     * - `"default"` – standard square slot (48px).
+     * - `"wide"` – extended slot (64px), for primary emphasis actions.
      * @default "default"
      */
-    toolbarSize?: ToolbarIconButtonSize;
+    width?: MD3SlotWidth;
     /**
      * Whether the icon button is in a selected/active toggle state.
      */
@@ -2802,17 +2883,6 @@ interface ToolbarIconButtonProps extends Omit<BaseIconButtonProps, "colorStyle"
      */
     "aria-label": string;
 }
-/**
- * Width sizing for a toolbar icon button.
- *
- * MD3 guideline: *"Use wide and narrow icon buttons"* to create visual hierarchy.
- * Touch-target height is always 48dp regardless of width.
- *
- * - `narrow` → 40px wide (secondary, de-emphasised)
- * - `default` → 48px wide (standard square touch target)
- * - `wide` → 64px wide (primary emphasis, draws eye)
- */
-type ToolbarIconButtonSize = "narrow" | "default" | "wide";
 /**
  * Visual emphasis variant for a toolbar icon button.
  *
@@ -2967,4 +3037,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 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 };
+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 FadingBlurDirection, FadingBlurMask, type FadingBlurMaskProps, type FadingBlurProps, 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, 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

@@ -1,12 +1,86 @@
-import * as motion from 'motion';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import { RefObject } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as motion from 'motion';
 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';
+import { M as MD3SlotWidth } from './md3-D0_Z7IXj.js';
+import { B as BaseIconButtonProps } from './icon-button-CqdQBsRe.js';
+
+/**
+ * @file fading-blur-mask.types.ts
+ * Fading Edge & Backdrop Blur Mask — TypeScript interfaces.
+ */
+
+/** Gradient fade direction for the blur mask. */
+type FadingBlurDirection = "top" | "bottom" | "both";
+/**
+ * Props for the primitive `<FadingBlurMask>` component.
+ */
+interface FadingBlurMaskProps {
+    /**
+     * Gradient fade direction.
+     * - `top`: Fades from opaque at top to transparent downward (for Top App Bars).
+     * - `bottom`: Fades from opaque at bottom to transparent upward (for Bottom App Bars).
+     * - `both`: Fades at both top and bottom edges.
+     * @default "top"
+     */
+    direction?: FadingBlurDirection;
+    /**
+     * Backdrop blur radius in pixels.
+     * @default 12
+     */
+    blurIntensity?: number;
+    /**
+     * Height/length of the fade mask container or gradient zone.
+     * Can be a CSS string (e.g., "100%", "64px") or pixel number.
+     * @default "100%"
+     */
+    blurHeight?: number | string;
+    /**
+     * Tint or background color overlay mixed into the blur.
+     * Defaults to MD3 surface token `var(--md-sys-color-surface)`.
+     */
+    color?: string;
+    /** Additional CSS class names for styling. */
+    className?: string;
+    /** Custom inline styles. */
+    style?: React$1.CSSProperties;
+    /** Children components rendered inside the blur mask container if needed. */
+    children?: React$1.ReactNode;
+}
+/**
+ * Mixin interface for components that integrate Fading Blur functionality (e.g. AppBars).
+ */
+interface FadingBlurProps {
+    /**
+     * Enables smooth fading edge and backdrop blur effect.
+     * @default false
+     */
+    enableFadingBlur?: boolean;
+    /**
+     * Custom blur intensity in pixels when `enableFadingBlur` is active.
+     * @default 12
+     */
+    blurIntensity?: number;
+    /**
+     * Custom blur height when `enableFadingBlur` is active.
+     * Defaults to container height.
+     */
+    blurHeight?: number | string;
+}
+
+/**
+ * `<FadingBlurMask>` component renders a smooth gradient fading backdrop blur overlay.
+ *
+ * @example
+ * ```tsx
+ * <FadingBlurMask direction="top" blurIntensity={16} />
+ * ```
+ */
+declare function FadingBlurMask({ direction, blurIntensity, blurHeight, color, className, style, children, }: FadingBlurMaskProps): react_jsx_runtime.JSX.Element;
 
 /**
  * @file app-bar.tokens.ts
@@ -214,7 +288,7 @@ interface AppBarColors {
 /**
  * Shared props for all top App Bar variants.
  */
-interface BaseAppBarProps {
+interface BaseAppBarProps extends FadingBlurProps {
     /**
      * Navigation icon slot (typically IconButton with back arrow or hamburger).
      * Should have `aria-label` for accessibility.
@@ -362,6 +436,12 @@ interface SearchAppBarProps extends BaseAppBarProps {
      * @default "search-bar"
      */
     searchBarId?: string;
+    /**
+     * Height of the search bar pill in px.
+     * MD3 spec: 56dp. Override for compact layouts.
+     * @default 56
+     */
+    searchBarHeight?: number;
 }
 /**
  * Props for `<BottomAppBar>`.
@@ -369,7 +449,7 @@ interface SearchAppBarProps extends BaseAppBarProps {
  * Fixed to the bottom of the screen. Contains navigation actions and optional FAB.
  * Height: 80px. Background: `surface-container`. Elevation: Level2.
  */
-interface BottomAppBarProps {
+interface BottomAppBarProps extends FadingBlurProps {
     /**
      * Action icon buttons rendered at the leading end.
      * Typically 3-4 `<IconButton>` components.
@@ -636,7 +716,7 @@ declare function AppBarRow({ items, maxItemCount, className }: AppBarRowProps):
  * <BottomAppBar scrollBehavior="hidden" actions={...} />
  * ```
  */
-declare function BottomAppBar({ actions, floatingActionButton, scrollBehavior, scrollElement, className, }: BottomAppBarProps): react_jsx_runtime.JSX.Element;
+declare function BottomAppBar({ actions, floatingActionButton, scrollBehavior, scrollElement, className, enableFadingBlur, blurIntensity, blurHeight, }: BottomAppBarProps): react_jsx_runtime.JSX.Element;
 
 /**
  * MD3 Expressive Docked Toolbar.
@@ -706,7 +786,7 @@ declare function useAppBarScroll({ scrollElement, behavior, collapsedHeight, exp
  * />
  * ```
  */
-declare function LargeFlexibleAppBar({ title, subtitle, titleAlignment, navigationIcon, actions, colors, scrollElement, headerContent, collapsedHeight, expandedHeight, className, }: FlexibleAppBarProps): react_jsx_runtime.JSX.Element;
+declare function LargeFlexibleAppBar({ title, subtitle, titleAlignment, navigationIcon, actions, colors, scrollElement, headerContent, collapsedHeight, expandedHeight, className, enableFadingBlur, blurIntensity, blurHeight, }: FlexibleAppBarProps): react_jsx_runtime.JSX.Element;
 
 /**
  * MD3 Expressive Medium Flexible App Bar.
@@ -721,7 +801,7 @@ declare function LargeFlexibleAppBar({ title, subtitle, titleAlignment, navigati
  * />
  * ```
  */
-declare function MediumFlexibleAppBar({ title, subtitle, titleAlignment, navigationIcon, actions, colors, scrollElement, headerContent, collapsedHeight, expandedHeight, className, }: FlexibleAppBarProps): react_jsx_runtime.JSX.Element;
+declare function MediumFlexibleAppBar({ title, subtitle, titleAlignment, navigationIcon, actions, colors, scrollElement, headerContent, collapsedHeight, expandedHeight, className, enableFadingBlur, blurIntensity, blurHeight, }: FlexibleAppBarProps): react_jsx_runtime.JSX.Element;
 
 /**
  * MD3 Expressive Search App Bar.
@@ -754,7 +834,7 @@ declare function MediumFlexibleAppBar({ title, subtitle, titleAlignment, navigat
  * </AnimatePresence>
  * ```
  */
-declare function SearchAppBar({ searchPlaceholder, searchValue, onSearchFocus, leadingSearchIcon, trailingSearchActions, externalActions, navigationIcon, colors, scrollBehavior, scrollElement, searchBarId, className, }: SearchAppBarProps): react_jsx_runtime.JSX.Element;
+declare function SearchAppBar({ searchPlaceholder, searchValue, onSearchFocus, leadingSearchIcon, trailingSearchActions, externalActions, navigationIcon, colors, scrollBehavior, scrollElement, searchBarId, searchBarVariant, searchBarHeight, className, enableFadingBlur, blurIntensity, blurHeight, }: SearchAppBarProps): react_jsx_runtime.JSX.Element;
 
 /**
  * MD3 Expressive Search View.
@@ -805,7 +885,7 @@ declare function SearchViewContainer({ isOpen, ...props }: SearchViewProps & {
  * />
  * ```
  */
-declare function SmallAppBar({ title, subtitle, titleAlignment, navigationIcon, actions, colors, scrollBehavior, scrollElement, className, }: SmallAppBarProps): react_jsx_runtime.JSX.Element;
+declare function SmallAppBar({ title, subtitle, titleAlignment, navigationIcon, actions, colors, scrollBehavior, scrollElement, className, enableFadingBlur, blurIntensity, blurHeight, }: SmallAppBarProps): react_jsx_runtime.JSX.Element;
 
 /** Color variant of the menu — standard (surface-based) or vibrant (tertiary-based). */
 type MenuColorVariant = "standard" | "vibrant";
@@ -2703,14 +2783,13 @@ interface FloatingToolbarWithFabProps extends FloatingToolbarProps {
     /** End content (explicitly declared to resolve type issues) */
     endContent?: React$1.ReactNode;
     /**
-     * Size of the FAB container.
-     * - `"default"` → 56×56px (`FabBaselineTokens.ContainerHeight`)
-     * - `"medium"` → 80×80px (`FabBaselineTokens.MediumContainerHeight`)
-     *
-     * MD3: pair a medium FAB with the toolbar to give it greater visual prominence.
-     * @default "default"
+     * FAB size embedded in the floating toolbar.
+     * - `"sm"` – standard FAB: 56×56dp (MD3 default).
+     * - `"md"` – medium FAB: 80×80dp (`FabBaselineTokens.MediumContainerHeight`).
+     * Corresponds to MD3 Toolbar Floating FAB token sizes.
+     * @default "sm"
      */
-    fabSize?: "default" | "medium";
+    fabSize?: "sm" | "md";
 }
 /**
  * A horizontal floating toolbar paired with a FAB.
@@ -2781,12 +2860,14 @@ interface ToolbarIconButtonProps extends Omit<BaseIconButtonProps, "colorStyle"
      */
     emphasis?: ToolbarIconButtonVariant;
     /**
-     * Button width sizing.
-     *
-     * Height is always `48px` to meet MD3 touch-target requirements.
+     * Slot width of the toolbar icon button per MD3 Expressive specification.
+     * Controls how much horizontal space the button occupies in the toolbar.
+     * - `"narrow"` – minimum width slot (40px), for compact actions.
+     * - `"default"` – standard square slot (48px).
+     * - `"wide"` – extended slot (64px), for primary emphasis actions.
      * @default "default"
      */
-    toolbarSize?: ToolbarIconButtonSize;
+    width?: MD3SlotWidth;
     /**
      * Whether the icon button is in a selected/active toggle state.
      */
@@ -2802,17 +2883,6 @@ interface ToolbarIconButtonProps extends Omit<BaseIconButtonProps, "colorStyle"
      */
     "aria-label": string;
 }
-/**
- * Width sizing for a toolbar icon button.
- *
- * MD3 guideline: *"Use wide and narrow icon buttons"* to create visual hierarchy.
- * Touch-target height is always 48dp regardless of width.
- *
- * - `narrow` → 40px wide (secondary, de-emphasised)
- * - `default` → 48px wide (standard square touch target)
- * - `wide` → 64px wide (primary emphasis, draws eye)
- */
-type ToolbarIconButtonSize = "narrow" | "default" | "wide";
 /**
  * Visual emphasis variant for a toolbar icon button.
  *
@@ -2967,4 +3037,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 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 };
+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 FadingBlurDirection, FadingBlurMask, type FadingBlurMaskProps, type FadingBlurProps, 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, 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 };