@bug-on/m3-expressive 1.3.2 → 1.3.3

package/dist/index.d.mts

@@ -4,7 +4,7 @@ export { A as ANGLE_EPSILON, C as CornerFeature, a as CornerRounding, b as Cubic
 export { CubicPair, DoubleMapper, MD3CornerRadius, MD3CornerRadiusToken, MeasuredCubic, MeasuredFeature, MeasuredPolygon, Morph, MorphTrigger, ShapeIcon, ShapeIconProps, ShapeMedia, ShapeMediaProps, ShapeMediaServer, ShapeMorphOptions, ShapeRef, ShapeSvg, ShapeSvgProps, UseShapeMorphResult, circle, createDoubleMapper, featureMapper, interpolatePath, pill, pillStar, rectangle, star, toClipPath, toSvgPath, useShapeMorph } from './shapes.mjs';
 export { M as MD3ColorStyle, a as MD3Shape, b as MD3Size, P as PolymorphicProps, c as PolymorphicRef } from './md3-BQhRygSi.mjs';
 export { APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, AppBarColors, AppBarColumn, AppBarColumnProps, AppBarItem, AppBarItemType, AppBarMenuState, AppBarOverflowIndicator, AppBarOverflowIndicatorProps, AppBarRow, AppBarRowProps, AppBarScrollBehavior, AppBarTokens, BaseAppBarProps, BottomAppBar, BottomAppBarProps, BottomDockedToolbar, BottomDockedToolbarProps, CHECK_ICON_VARIANTS, ContextMenu, ContextMenuContent, ContextMenuTrigger, DIVIDER_COLOR, DIVIDER_PADDING, DockedToolbar, DockedToolbarProps, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, FadingBlurDirection, FadingBlurMask, FadingBlurMaskProps, FadingBlurProps, FlexibleAppBarProps, FloatingToolbarColors, FloatingToolbarProps, FloatingToolbarScrollBehavior, 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, MenuContent, MenuDivider, MenuGroup, MenuItem, MenuProvider, MenuTrigger, NavigationBar, NavigationBarItem, NavigationBarItemLayout, NavigationBarItemProps, NavigationBarLabelVisibility, NavigationBarProps, NavigationBarVariant, NavigationItemShape, NavigationRail, NavigationRailItem, NavigationRailItemProps, NavigationRailLabelVisibility, NavigationRailProps, NavigationRailVariant, 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, SearchAppBarProps, SearchBar, SearchBarVariant, SearchProps, SearchStyleType, SearchTokens, SearchVariant, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, SearchViewProps, SmallAppBar, SmallAppBarProps, SubMenu, Tab, TabProps, Tabs, TabsColors, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsProps, TabsTokens, TabsVariant, TitleAlignment, ToolbarDivider, ToolbarDividerProps, ToolbarDividerTokens, ToolbarIconButton, ToolbarIconButtonProps, ToolbarIconButtonTokens, ToolbarIconButtonVariant, ToolbarToggleButton, ToolbarToggleButtonProps, ToolbarToggleButtonTokens, ToolbarVariant, UseAppBarScrollReturn, UseFloatingToolbarScrollBehaviorOptions, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, VerticalMenuDivider, VerticalMenuGroup, appBarTypography, getToolbarColors, standardFloatingToolbarColors, surfaceContainerHighFloatingToolbarColors, surfaceContainerHighestFloatingToolbarColors, tertiaryContainerFloatingToolbarColors, useAppBarScroll, useFloatingToolbarScrollBehavior, useMenuContext, useSearchKeyboard, vibrantFloatingToolbarColors, xrFloatingToolbarColors } from './navigation.mjs';
-export { Badge, BadgeProps, BadgedBox, BadgedBoxProps, CaretConfig, CircularProgressProps, LinearProgressProps, LoadingIndicator, LoadingIndicatorProps, PlainTooltip, PlainTooltipProps, ProgressIndicator, ProgressIndicatorProps, RichTooltip, RichTooltipProps, Snackbar, SnackbarData, SnackbarDuration, SnackbarHost, SnackbarHostProps, SnackbarProps, SnackbarProvider, SnackbarResult, SnackbarVisuals, TooltipBox, TooltipBoxProps, TooltipCaretShape, TooltipPlacement, TooltipState, TooltipStateConfig, TooltipTokens, TooltipTrigger, UseSnackbarStateReturn, useSnackbar, useSnackbarState, useTooltipPosition, useTooltipState } from './feedback.mjs';
+export { Badge, BadgeProps, BadgedBox, BadgedBoxProps, CaretConfig, CircularProgressProps, LinearProgressProps, LoadingIndicator, LoadingIndicatorProps, PlainTooltip, PlainTooltipProps, ProgressIndicator, ProgressIndicatorProps, RichTooltip, RichTooltipProps, Snackbar, SnackbarContext, SnackbarData, SnackbarDuration, SnackbarHost, SnackbarHostProps, SnackbarProps, SnackbarProvider, SnackbarResult, SnackbarVisuals, TooltipBox, TooltipBoxProps, TooltipCaretShape, TooltipPlacement, TooltipState, TooltipStateConfig, TooltipTokens, TooltipTrigger, UseSnackbarStateReturn, useSnackbar, useSnackbarState, useTooltipPosition, useTooltipState } from './feedback.mjs';
 export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-gAz6OAIi.mjs';
 export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-CxyJv7UV.mjs';
 export { Card, CardContent, CardContentProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardMedia, CardMediaProps, CardProps, CardVariant, Carousel, CarouselGrid, CarouselItem, CarouselItemScope, CarouselKeyline, CarouselKeylineResult, CarouselLayout, CarouselProps, CarouselScrollClient, CarouselTokens, CodeBlock, CodeBlockProps, Divider, DividerProps, KeylineType, LIST_TOKENS, List, ListContext, ListDivider, ListDividerProps, ListItem, ListItemLeadingType, ListItemProps, ListItemTrailingType, ListProps, ListSelectionMode, ListStyle, ListVariant, TableOfContents, TableOfContentsProps, Text, TextProps, ToCItem, TypeScaleTokens, TypeScaleTokensType, buildWavePath, cardVariants, getExpressiveShape, getListItemHeight, shouldTopAlign, useCarouselA11y, useCarouselKeylines, useListContext } from './layout.mjs';

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { A as ANGLE_EPSILON, C as CornerFeature, a as CornerRounding, b as Cubic
 export { CubicPair, DoubleMapper, MD3CornerRadius, MD3CornerRadiusToken, MeasuredCubic, MeasuredFeature, MeasuredPolygon, Morph, MorphTrigger, ShapeIcon, ShapeIconProps, ShapeMedia, ShapeMediaProps, ShapeMediaServer, ShapeMorphOptions, ShapeRef, ShapeSvg, ShapeSvgProps, UseShapeMorphResult, circle, createDoubleMapper, featureMapper, interpolatePath, pill, pillStar, rectangle, star, toClipPath, toSvgPath, useShapeMorph } from './shapes.js';
 export { M as MD3ColorStyle, a as MD3Shape, b as MD3Size, P as PolymorphicProps, c as PolymorphicRef } from './md3-BQhRygSi.js';
 export { APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, AppBarColors, AppBarColumn, AppBarColumnProps, AppBarItem, AppBarItemType, AppBarMenuState, AppBarOverflowIndicator, AppBarOverflowIndicatorProps, AppBarRow, AppBarRowProps, AppBarScrollBehavior, AppBarTokens, BaseAppBarProps, BottomAppBar, BottomAppBarProps, BottomDockedToolbar, BottomDockedToolbarProps, CHECK_ICON_VARIANTS, ContextMenu, ContextMenuContent, ContextMenuTrigger, DIVIDER_COLOR, DIVIDER_PADDING, DockedToolbar, DockedToolbarProps, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, FadingBlurDirection, FadingBlurMask, FadingBlurMaskProps, FadingBlurProps, FlexibleAppBarProps, FloatingToolbarColors, FloatingToolbarProps, FloatingToolbarScrollBehavior, 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, MenuContent, MenuDivider, MenuGroup, MenuItem, MenuProvider, MenuTrigger, NavigationBar, NavigationBarItem, NavigationBarItemLayout, NavigationBarItemProps, NavigationBarLabelVisibility, NavigationBarProps, NavigationBarVariant, NavigationItemShape, NavigationRail, NavigationRailItem, NavigationRailItemProps, NavigationRailLabelVisibility, NavigationRailProps, NavigationRailVariant, 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, SearchAppBarProps, SearchBar, SearchBarVariant, SearchProps, SearchStyleType, SearchTokens, SearchVariant, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, SearchViewProps, SmallAppBar, SmallAppBarProps, SubMenu, Tab, TabProps, Tabs, TabsColors, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsProps, TabsTokens, TabsVariant, TitleAlignment, ToolbarDivider, ToolbarDividerProps, ToolbarDividerTokens, ToolbarIconButton, ToolbarIconButtonProps, ToolbarIconButtonTokens, ToolbarIconButtonVariant, ToolbarToggleButton, ToolbarToggleButtonProps, ToolbarToggleButtonTokens, ToolbarVariant, UseAppBarScrollReturn, UseFloatingToolbarScrollBehaviorOptions, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, VerticalMenuDivider, VerticalMenuGroup, appBarTypography, getToolbarColors, standardFloatingToolbarColors, surfaceContainerHighFloatingToolbarColors, surfaceContainerHighestFloatingToolbarColors, tertiaryContainerFloatingToolbarColors, useAppBarScroll, useFloatingToolbarScrollBehavior, useMenuContext, useSearchKeyboard, vibrantFloatingToolbarColors, xrFloatingToolbarColors } from './navigation.js';
-export { Badge, BadgeProps, BadgedBox, BadgedBoxProps, CaretConfig, CircularProgressProps, LinearProgressProps, LoadingIndicator, LoadingIndicatorProps, PlainTooltip, PlainTooltipProps, ProgressIndicator, ProgressIndicatorProps, RichTooltip, RichTooltipProps, Snackbar, SnackbarData, SnackbarDuration, SnackbarHost, SnackbarHostProps, SnackbarProps, SnackbarProvider, SnackbarResult, SnackbarVisuals, TooltipBox, TooltipBoxProps, TooltipCaretShape, TooltipPlacement, TooltipState, TooltipStateConfig, TooltipTokens, TooltipTrigger, UseSnackbarStateReturn, useSnackbar, useSnackbarState, useTooltipPosition, useTooltipState } from './feedback.js';
+export { Badge, BadgeProps, BadgedBox, BadgedBoxProps, CaretConfig, CircularProgressProps, LinearProgressProps, LoadingIndicator, LoadingIndicatorProps, PlainTooltip, PlainTooltipProps, ProgressIndicator, ProgressIndicatorProps, RichTooltip, RichTooltipProps, Snackbar, SnackbarContext, SnackbarData, SnackbarDuration, SnackbarHost, SnackbarHostProps, SnackbarProps, SnackbarProvider, SnackbarResult, SnackbarVisuals, TooltipBox, TooltipBoxProps, TooltipCaretShape, TooltipPlacement, TooltipState, TooltipStateConfig, TooltipTokens, TooltipTrigger, UseSnackbarStateReturn, useSnackbar, useSnackbarState, useTooltipPosition, useTooltipState } from './feedback.js';
 export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-CGzk7KcG.js';
 export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-Di8VX6ou.js';
 export { Card, CardContent, CardContentProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardMedia, CardMediaProps, CardProps, CardVariant, Carousel, CarouselGrid, CarouselItem, CarouselItemScope, CarouselKeyline, CarouselKeylineResult, CarouselLayout, CarouselProps, CarouselScrollClient, CarouselTokens, CodeBlock, CodeBlockProps, Divider, DividerProps, KeylineType, LIST_TOKENS, List, ListContext, ListDivider, ListDividerProps, ListItem, ListItemLeadingType, ListItemProps, ListItemTrailingType, ListProps, ListSelectionMode, ListStyle, ListVariant, TableOfContents, TableOfContentsProps, Text, TextProps, ToCItem, TypeScaleTokens, TypeScaleTokensType, buildWavePath, cardVariants, getExpressiveShape, getListItemHeight, shouldTopAlign, useCarouselA11y, useCarouselKeylines, useListContext } from './layout.js';

package/dist/index.js

@@ -253,7 +253,7 @@ function applyTheme(sourceColorHex, mode = "light", root = document.documentElem
   const resolved = resolveMode(mode);
   const colors = generateM3Theme(sourceColorHex, resolved, options);
   for (const [key, value] of Object.entries(colors)) {
-    const kebabKey = key.replace(/[A-Z]/g, (m71) => `-${m71.toLowerCase()}`);
+    const kebabKey = key.replace(/[A-Z]/g, (m72) => `-${m72.toLowerCase()}`);
     root.style.setProperty(`--md-sys-color-${kebabKey}`, value);
     root.style.setProperty(`--color-m3-${kebabKey}`, value);
   }
@@ -275,7 +275,7 @@ function createMd3ExpressiveTheme(options) {
 function schemeToCssVariables(scheme) {
   const result = {};
   for (const [key, value] of Object.entries(scheme)) {
-    const kebabKey = key.replace(/[A-Z]/g, (m71) => `-${m71.toLowerCase()}`);
+    const kebabKey = key.replace(/[A-Z]/g, (m72) => `-${m72.toLowerCase()}`);
     result[`--md-sys-color-${kebabKey}`] = value;
   }
   return result;
@@ -1112,8 +1112,8 @@ var RoundedPolygon = class _RoundedPolygon {
       );
       const mid = c.pointOnCurve(0.5);
       const md = distanceSquared(mid.x - this.centerX, mid.y - this.centerY);
-      const m71 = Math.max(ad, md);
-      if (m71 > maxDistSq) maxDistSq = m71;
+      const m72 = Math.max(ad, md);
+      if (m72 > maxDistSq) maxDistSq = m72;
     }
     const d = Math.sqrt(maxDistSq);
     return [
@@ -15465,7 +15465,7 @@ var TimePickerDialog = ({
 TimePickerDialog.displayName = "TimePickerDialog";
 var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
 var isValidHourInput = (h, is24hour) => is24hour ? h >= 0 && h <= 23 : h >= 1 && h <= 12;
-var isValidMinuteInput = (m71) => m71 >= 0 && m71 <= 59;
+var isValidMinuteInput = (m72) => m72 >= 0 && m72 <= 59;
 var to24Hour = (hour12, isPm) => {
   if (isPm) {
     return hour12 === 12 ? 12 : hour12 + 12;
@@ -15501,8 +15501,8 @@ var useTimePickerState = (options) => {
     },
     [is24hour]
   );
-  const setMinute = React67.useCallback((m71) => {
-    const clamped = clamp(m71, 0, 59);
+  const setMinute = React67.useCallback((m72) => {
+    const clamped = clamp(m72, 0, 59);
     setMinuteState(clamped);
     setMinuteInputState(clamped);
   }, []);
@@ -15516,10 +15516,10 @@ var useTimePickerState = (options) => {
     },
     [is24hour, isPm]
   );
-  const setMinuteInput = React67.useCallback((m71) => {
-    setMinuteInputState(m71);
-    if (isValidMinuteInput(m71)) {
-      setMinuteState(m71);
+  const setMinuteInput = React67.useCallback((m72) => {
+    setMinuteInputState(m72);
+    if (isValidMinuteInput(m72)) {
+      setMinuteState(m72);
     }
   }, []);
   const setSelection = React67.useCallback((mode) => {
@@ -18917,7 +18917,12 @@ var SEARCH_COLORS = {
   /** SearchViewTokens.DividerColor → outline */
   divider: "var(--md-sys-color-outline)",
   /** Focus indicator → secondary */
-  focusIndicator: "var(--md-sys-color-secondary)"
+  focusIndicator: "var(--md-sys-color-secondary)",
+  /** State layer overlay for interactive hover/press */
+  stateLayer: "var(--md-sys-color-on-surface)"
+};
+var SEARCH_ELEVATION = {
+  level3: "elevation-3"
 };
 var SEARCH_TYPOGRAPHY = {
   /** BodyLarge — used for input text and placeholder. */
@@ -19022,6 +19027,7 @@ function SearchBar({
   onActiveChange,
   leadingIcon,
   trailingIcon,
+  avatar,
   placeholder = "Search",
   textAlign = "left",
   className,
@@ -19035,6 +19041,9 @@ function SearchBar({
   const inputRef = React67__namespace.useRef(null);
   const prevActiveRef = React67__namespace.useRef(active);
   const isRestoringFocusRef = React67__namespace.useRef(false);
+  const [isHovered, setIsHovered] = React67__namespace.useState(false);
+  const [isPressed, setIsPressed] = React67__namespace.useState(false);
+  const [isFocused, setIsFocused] = React67__namespace.useState(false);
   React67__namespace.useEffect(() => {
     var _a;
     let rafId;
@@ -19051,10 +19060,14 @@ function SearchBar({
     };
   }, [active]);
   const handleFocus = () => {
+    setIsFocused(true);
     if (!active && !isRestoringFocusRef.current) {
       onActiveChange(true);
     }
   };
+  const handleBlur = () => {
+    setIsFocused(false);
+  };
   const handleFormSubmit = (e) => {
     e.preventDefault();
     onSearch(query);
@@ -19073,18 +19086,39 @@ function SearchBar({
         layout: !shouldReduceMotion,
         layoutId: shouldReduceMotion ? void 0 : searchId,
         transition: shouldReduceMotion ? void 0 : SEARCH_BAR_EXPAND_SPRING,
-        className: cn("relative", className),
+        className: cn(
+          "relative group select-none",
+          SEARCH_ELEVATION.level3,
+          className
+        ),
         style: { height: SearchTokens.heights.bar },
         initial: shouldReduceMotion ? false : { opacity: 0, scale: 0.95 },
         animate: { opacity: 1, scale: 1 },
         exit: shouldReduceMotion ? {} : { opacity: 0, scale: 0.95, transition: SEARCH_BAR_EXIT_SPRING },
+        onPointerEnter: () => setIsHovered(true),
+        onPointerLeave: () => {
+          setIsHovered(false);
+          setIsPressed(false);
+        },
+        onPointerDown: () => setIsPressed(true),
+        onPointerUp: () => setIsPressed(false),
+        onPointerCancel: () => setIsPressed(false),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: "absolute inset-0 rounded-full",
+              className: "absolute inset-0 rounded-full overflow-hidden",
               style: { backgroundColor: SEARCH_COLORS.container },
-              "aria-hidden": "true"
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                StateLayer,
+                {
+                  hovered: isHovered,
+                  focused: isFocused,
+                  pressed: isPressed,
+                  style: { color: SEARCH_COLORS.stateLayer }
+                }
+              )
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -19130,21 +19164,36 @@ function SearchBar({
                         ),
                         style: { color: SEARCH_COLORS.inputText },
                         onFocus: handleFocus,
+                        onBlur: handleBlur,
                         onChange: (e) => onQueryChange(e.target.value),
                         onKeyDown
                       }
                     )
                   }
                 ),
-                trailingIcon && /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    className: "flex shrink-0 items-center justify-center",
-                    style: { color: SEARCH_COLORS.trailingIcon },
-                    "aria-hidden": "true",
-                    children: trailingIcon
-                  }
-                )
+                (trailingIcon || avatar) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+                  trailingIcon && /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: "flex shrink-0 items-center justify-center",
+                      style: { color: SEARCH_COLORS.trailingIcon },
+                      "aria-hidden": "true",
+                      children: trailingIcon
+                    }
+                  ),
+                  avatar && /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: "flex shrink-0 items-center justify-center rounded-full overflow-hidden",
+                      style: {
+                        width: SearchTokens.avatarSize,
+                        height: SearchTokens.avatarSize
+                      },
+                      "aria-hidden": "true",
+                      children: avatar
+                    }
+                  )
+                ] })
               ] })
             }
           )
@@ -19207,40 +19256,77 @@ function useSearchViewFocus(inputRef, active) {
 function TrailingAction({
   query,
   trailingIcon,
+  avatar,
   onClear
 }) {
-  if (query) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      IconButton,
+  const shouldReduceMotion = react.useReducedMotion();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", initial: false, children: query ? /* @__PURE__ */ jsxRuntime.jsx(
+      react.m.div,
       {
-        size: "sm",
-        style: { color: SEARCH_COLORS.trailingIcon },
-        "aria-label": "Clear search",
-        onClick: onClear,
+        initial: shouldReduceMotion ? false : { opacity: 0, scale: 0.8 },
+        animate: { opacity: 1, scale: 1 },
+        exit: shouldReduceMotion ? {} : { opacity: 0, scale: 0.8 },
+        transition: { duration: 0.15 },
+        className: "flex items-center justify-center",
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
+          IconButton,
           {
-            className: "material-symbols-rounded select-none leading-none",
-            style: { fontSize: 20 },
-            "aria-hidden": "true",
-            children: "close"
+            size: "sm",
+            style: { color: SEARCH_COLORS.trailingIcon },
+            "aria-label": "Clear search",
+            onClick: onClear,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "material-symbols-rounded select-none leading-none",
+                style: { fontSize: 20 },
+                "aria-hidden": "true",
+                children: "close"
+              }
+            )
           }
         )
-      }
-    );
-  }
-  if (trailingIcon) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
+      },
+      "clear-action"
+    ) : trailingIcon && /* @__PURE__ */ jsxRuntime.jsx(
+      react.m.span,
       {
+        initial: shouldReduceMotion ? false : { opacity: 0, scale: 0.8 },
+        animate: { opacity: 1, scale: 1 },
+        exit: shouldReduceMotion ? {} : { opacity: 0, scale: 0.8 },
+        transition: { duration: 0.15 },
         className: "flex shrink-0 items-center justify-center",
         style: { color: SEARCH_COLORS.trailingIcon },
         "aria-hidden": "true",
         children: trailingIcon
+      },
+      "trailing-icon"
+    ) }),
+    avatar && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "flex shrink-0 items-center justify-center rounded-full overflow-hidden",
+        style: {
+          width: SearchTokens.avatarSize,
+          height: SearchTokens.avatarSize
+        },
+        "aria-hidden": "true",
+        children: avatar
       }
-    );
-  }
-  return null;
+    )
+  ] });
+}
+function DefaultSearchIcon2() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: "material-symbols-rounded select-none leading-none",
+      style: { fontSize: SearchTokens.iconSize },
+      "aria-hidden": "true",
+      children: "search"
+    }
+  );
 }
 function SearchViewDocked({
   query,
@@ -19250,6 +19336,7 @@ function SearchViewDocked({
   onActiveChange,
   leadingIcon,
   trailingIcon,
+  avatar,
   placeholder = "Search",
   textAlign = "left",
   styleType = "contained",
@@ -19282,10 +19369,12 @@ function SearchViewDocked({
       react.m.div,
       {
         ref: dropdownRef,
+        layout: !shouldReduceMotion,
         layoutId: shouldReduceMotion ? void 0 : searchId,
         className: cn(
           // DockedContainerShape = CornerExtraLarge = 28dp radius
           "rounded-[28px] overflow-hidden",
+          SEARCH_ELEVATION.level3,
           viewClassName
         ),
         style: { backgroundColor: SEARCH_COLORS.container },
@@ -19307,7 +19396,7 @@ function SearchViewDocked({
                     className: "flex shrink-0 items-center justify-center",
                     style: { color: SEARCH_COLORS.leadingIcon },
                     "aria-hidden": "true",
-                    children: leadingIcon
+                    children: leadingIcon != null ? leadingIcon : /* @__PURE__ */ jsxRuntime.jsx(DefaultSearchIcon2, {})
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -19348,6 +19437,7 @@ function SearchViewDocked({
                   {
                     query,
                     trailingIcon,
+                    avatar,
                     onClear: () => onQueryChange("")
                   }
                 )
@@ -19368,7 +19458,7 @@ function SearchViewDocked({
               id: listboxId,
               role: "listbox",
               "aria-label": `${ariaLabel} results`,
-              className: "min-h-30",
+              className: "min-h-[120px]",
               children
             }
           )
@@ -19397,6 +19487,7 @@ function SearchViewFullScreen({
   onActiveChange,
   leadingIcon,
   trailingIcon,
+  avatar,
   placeholder = "Search",
   textAlign = "left",
   styleType = "contained",
@@ -19511,6 +19602,7 @@ function SearchViewFullScreen({
                   {
                     query,
                     trailingIcon,
+                    avatar,
                     onClear: () => onQueryChange("")
                   }
                 )
@@ -19562,6 +19654,7 @@ function SearchComponent({
   hasGap = false,
   leadingIcon,
   trailingIcon,
+  avatar,
   placeholder = "Search",
   textAlign = "left",
   children,
@@ -19589,6 +19682,7 @@ function SearchComponent({
     onActiveChange,
     leadingIcon,
     trailingIcon,
+    avatar,
     placeholder,
     textAlign,
     "aria-label": ariaLabel,
@@ -24084,11 +24178,13 @@ var Snackbar = React67__namespace.memo(function Snackbar2({
                   type: "button",
                   onClick: handleAction,
                   className: cn(
-                    "text-sm font-medium",
-                    "px-2 py-1 rounded-sm",
-                    "focus-visible:outline-none focus-visible:ring-2",
-                    "transition-colors whitespace-nowrap",
-                    "text-m3-inverse-primary"
+                    "inline-flex items-center justify-center",
+                    "h-10 px-3 py-2.5 rounded-sm",
+                    "text-sm font-medium leading-5 whitespace-nowrap",
+                    "text-m3-inverse-primary",
+                    "hover:bg-m3-inverse-primary/8 focus-visible:bg-m3-inverse-primary/12 active:bg-m3-inverse-primary/12",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-inverse-primary",
+                    "transition-colors select-none cursor-pointer"
                   ),
                   children: actionLabel
                 }
@@ -24097,10 +24193,10 @@ var Snackbar = React67__namespace.memo(function Snackbar2({
                 IconButton,
                 {
                   size: "sm",
-                  colorStyle: "filled",
+                  colorStyle: "standard",
                   "aria-label": "Dismiss notification",
                   onClick: handleDismiss,
-                  className: "text-m3-inverse-on-surface bg-m3-inverse-surface",
+                  className: "text-m3-inverse-on-surface hover:bg-m3-inverse-on-surface/8 active:bg-m3-inverse-on-surface/12 focus-visible:ring-m3-inverse-primary",
                   children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "close", "aria-hidden": "true" })
                 }
               )
@@ -25594,12 +25690,15 @@ function useThemeMode() {
 function TableOfContents({
   items,
   className,
-  scrollAreaProps
+  scrollAreaProps,
+  scrollContainerRef
 }) {
   const [activeId, setActiveId] = React67.useState("");
   const itemIds = React67.useMemo(() => items.map((i) => i.id), [items]);
   React67.useEffect(() => {
+    var _a;
     if (typeof IntersectionObserver === "undefined") return;
+    const root = (_a = scrollContainerRef == null ? void 0 : scrollContainerRef.current) != null ? _a : null;
     const observer = new IntersectionObserver(
       (entries) => {
         for (const entry of entries) {
@@ -25607,19 +25706,20 @@ function TableOfContents({
         }
       },
       // rootMargin: top offset ~100px (fixed header), bottom -80% (early switch)
-      { rootMargin: "-100px 0% -80% 0%" }
+      { root, rootMargin: "-100px 0% -80% 0%" }
     );
     for (const id of itemIds) {
       const el = document.getElementById(id);
       if (el) observer.observe(el);
     }
     return () => observer.disconnect();
-  }, [itemIds]);
+  }, [itemIds, scrollContainerRef]);
   const handleClick = React67.useCallback(
     (e, id) => {
-      var _a;
       e.preventDefault();
-      (_a = document.getElementById(id)) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth", block: "start" });
+      const target = document.getElementById(id);
+      if (!target) return;
+      target.scrollIntoView({ behavior: "smooth", block: "start" });
     },
     []
   );
@@ -25636,19 +25736,35 @@ function TableOfContents({
             type: "hover"
           }, scrollAreaProps), {
             className: cn("flex-1 min-h-0", scrollAreaProps == null ? void 0 : scrollAreaProps.className),
-            children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-4 pr-4", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-              "a",
-              {
-                href: `#${item.id}`,
-                onClick: (e) => handleClick(e, item.id),
-                "aria-current": activeId === item.id ? "true" : void 0,
-                className: cn(
-                  "text-sm transition-colors hover:text-m3-primary block",
-                  activeId === item.id ? "text-m3-primary font-bold" : "text-m3-on-surface-variant font-medium"
-                ),
-                children: item.label
-              }
-            ) }, item.id)) })
+            children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2 pr-4", children: items.map((item) => {
+              var _a;
+              const depth = (_a = item.depth) != null ? _a : 1;
+              const isSubItem = depth > 1;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "li",
+                {
+                  className: cn(
+                    isSubItem && "pl-3.5 border-l border-m3-outline-variant/40 ml-1"
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "a",
+                    {
+                      href: `#${item.id}`,
+                      onClick: (e) => handleClick(e, item.id),
+                      "aria-current": activeId === item.id ? "true" : void 0,
+                      className: cn(
+                        "transition-colors hover:text-m3-primary block truncate",
+                        isSubItem ? "text-xs py-0.5 leading-relaxed" : "text-sm py-1 font-medium leading-snug",
+                        activeId === item.id ? "text-m3-primary font-bold" : "text-m3-on-surface-variant"
+                      ),
+                      title: item.label,
+                      children: item.label
+                    }
+                  )
+                },
+                item.id
+              );
+            }) })
           })
         )
       ]
@@ -27354,6 +27470,7 @@ exports.SliderColors = SliderColors;
 exports.SliderTokens = SliderTokens;
 exports.SmallAppBar = SmallAppBar;
 exports.Snackbar = Snackbar;
+exports.SnackbarContext = SnackbarContext;
 exports.SnackbarHost = SnackbarHost;
 exports.SnackbarProvider = SnackbarProvider;
 exports.SplitButtonLayout = SplitButtonLayout;