@bug-on/m3-expressive 1.1.0 → 1.2.1

package/dist/index.mjs

@@ -1,8 +1,8 @@
 "use client";
 import * as React59 from 'react';
 import { createContext, forwardRef, useState, useRef, useCallback, useMemo, useEffect, useLayoutEffect, useReducer, useContext, useId, cloneElement, createElement } from 'react';
+import { hexFromArgb, Hct, SchemeExpressive, SchemeNeutral, SchemeMonochrome, SchemeContent, SchemeFidelity, SchemeVibrant, SchemeTonalSpot } from '@material/material-color-utilities';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { argbFromHex, themeFromSourceColor, hexFromArgb } from '@material/material-color-utilities';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as RxContextMenu from '@radix-ui/react-context-menu';
@@ -118,6 +118,143 @@ function useRipple(options = {}) {
   );
   return { rippleRef: ref, onPointerDown };
 }
+function resolveMode(mode) {
+  if (mode !== "system") return mode;
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function createDynamicScheme(sourceColorHex, isDark, variant = "expressive", contrastLevel = 0) {
+  const hct = Hct.fromInt(argbFromHex(sourceColorHex));
+  const spec = "2025";
+  switch (variant) {
+    case "tonal_spot":
+      return new SchemeTonalSpot(hct, isDark, contrastLevel, spec);
+    case "vibrant":
+      return new SchemeVibrant(hct, isDark, contrastLevel, spec);
+    case "fidelity":
+      return new SchemeFidelity(hct, isDark, contrastLevel, spec);
+    case "content":
+      return new SchemeContent(hct, isDark, contrastLevel, spec);
+    case "monochrome":
+      return new SchemeMonochrome(hct, isDark, contrastLevel, spec);
+    case "neutral":
+      return new SchemeNeutral(hct, isDark, contrastLevel, spec);
+    default:
+      return new SchemeExpressive(hct, isDark, contrastLevel, spec);
+  }
+}
+function argbFromHex(hex) {
+  const sanitized = hex.replace(/^#/, "");
+  const r = Number.parseInt(sanitized.substring(0, 2), 16);
+  const g = Number.parseInt(sanitized.substring(2, 4), 16);
+  const b = Number.parseInt(sanitized.substring(4, 6), 16);
+  return (4278190080 | r << 16 | g << 8 | b) >>> 0;
+}
+function generateM3Theme(sourceColorHex, mode = "light", options = {}) {
+  const { variant = "expressive", contrastLevel = 0 } = options;
+  const isDark = mode === "dark";
+  const scheme = createDynamicScheme(
+    sourceColorHex,
+    isDark,
+    variant,
+    contrastLevel
+  );
+  const hex = (argb) => hexFromArgb(argb);
+  return {
+    // Primary
+    primary: hex(scheme.primary),
+    onPrimary: hex(scheme.onPrimary),
+    primaryContainer: hex(scheme.primaryContainer),
+    onPrimaryContainer: hex(scheme.onPrimaryContainer),
+    inversePrimary: hex(scheme.inversePrimary),
+    primaryFixed: hex(scheme.primaryFixed),
+    primaryFixedDim: hex(scheme.primaryFixedDim),
+    onPrimaryFixed: hex(scheme.onPrimaryFixed),
+    onPrimaryFixedVariant: hex(scheme.onPrimaryFixedVariant),
+    primaryDim: hex(scheme.primaryDim),
+    // Secondary
+    secondary: hex(scheme.secondary),
+    onSecondary: hex(scheme.onSecondary),
+    secondaryContainer: hex(scheme.secondaryContainer),
+    onSecondaryContainer: hex(scheme.onSecondaryContainer),
+    secondaryFixed: hex(scheme.secondaryFixed),
+    secondaryFixedDim: hex(scheme.secondaryFixedDim),
+    onSecondaryFixed: hex(scheme.onSecondaryFixed),
+    onSecondaryFixedVariant: hex(scheme.onSecondaryFixedVariant),
+    secondaryDim: hex(scheme.secondaryDim),
+    // Tertiary
+    tertiary: hex(scheme.tertiary),
+    onTertiary: hex(scheme.onTertiary),
+    tertiaryContainer: hex(scheme.tertiaryContainer),
+    onTertiaryContainer: hex(scheme.onTertiaryContainer),
+    tertiaryFixed: hex(scheme.tertiaryFixed),
+    tertiaryFixedDim: hex(scheme.tertiaryFixedDim),
+    onTertiaryFixed: hex(scheme.onTertiaryFixed),
+    onTertiaryFixedVariant: hex(scheme.onTertiaryFixedVariant),
+    tertiaryDim: hex(scheme.tertiaryDim),
+    // Error
+    error: hex(scheme.error),
+    onError: hex(scheme.onError),
+    errorContainer: hex(scheme.errorContainer),
+    onErrorContainer: hex(scheme.onErrorContainer),
+    // Surface
+    surface: hex(scheme.surface),
+    onSurface: hex(scheme.onSurface),
+    surfaceVariant: hex(scheme.surfaceVariant),
+    onSurfaceVariant: hex(scheme.onSurfaceVariant),
+    surfaceTint: hex(scheme.surfaceTint),
+    surfaceDim: hex(scheme.surfaceDim),
+    surfaceBright: hex(scheme.surfaceBright),
+    surfaceContainerLowest: hex(scheme.surfaceContainerLowest),
+    surfaceContainerLow: hex(scheme.surfaceContainerLow),
+    surfaceContainer: hex(scheme.surfaceContainer),
+    surfaceContainerHigh: hex(scheme.surfaceContainerHigh),
+    surfaceContainerHighest: hex(scheme.surfaceContainerHighest),
+    // Inverse
+    inverseSurface: hex(scheme.inverseSurface),
+    inverseOnSurface: hex(scheme.inverseOnSurface),
+    // Background
+    background: hex(scheme.background),
+    onBackground: hex(scheme.onBackground),
+    // Outline
+    outline: hex(scheme.outline),
+    outlineVariant: hex(scheme.outlineVariant),
+    // Utility
+    shadow: hex(scheme.shadow),
+    scrim: hex(scheme.scrim)
+  };
+}
+function applyTheme(sourceColorHex, mode = "light", root = document.documentElement, options = {}) {
+  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, (m68) => `-${m68.toLowerCase()}`);
+    root.style.setProperty(`--md-sys-color-${kebabKey}`, value);
+    root.style.setProperty(`--color-m3-${kebabKey}`, value);
+  }
+  root.setAttribute("data-theme", resolved);
+}
+
+// src/lib/create-theme.ts
+function createMd3ExpressiveTheme(options) {
+  const { seedColor, isDark = false, variant, contrastLevel } = options;
+  const themeOptions = { variant, contrastLevel };
+  const colorScheme = generateM3Theme(
+    seedColor,
+    isDark ? "dark" : "light",
+    themeOptions
+  );
+  const cssVariables = schemeToCssVariables(colorScheme);
+  return { cssVariables, colorScheme };
+}
+function schemeToCssVariables(scheme) {
+  const result = {};
+  for (const [key, value] of Object.entries(scheme)) {
+    const kebabKey = key.replace(/[A-Z]/g, (m68) => `-${m68.toLowerCase()}`);
+    result[`--md-sys-color-${kebabKey}`] = value;
+  }
+  return result;
+}
 function MaterialSymbolsPreconnect({
   variants = ["outlined"]
 }) {
@@ -157,78 +294,6 @@ function MaterialSymbolsPreconnect({
     )
   ] });
 }
-function resolveMode(mode) {
-  if (mode !== "system") return mode;
-  if (typeof window === "undefined") return "light";
-  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
-function generateM3Theme(sourceColorHex, mode = "light") {
-  const sourceColor = argbFromHex(sourceColorHex);
-  const theme = themeFromSourceColor(sourceColor);
-  const scheme = mode === "light" ? theme.schemes.light : theme.schemes.dark;
-  const palettes = theme.palettes;
-  const tone = (palette, t) => hexFromArgb(palette.tone(t));
-  return {
-    primary: hexFromArgb(scheme.primary),
-    onPrimary: hexFromArgb(scheme.onPrimary),
-    primaryContainer: hexFromArgb(scheme.primaryContainer),
-    onPrimaryContainer: hexFromArgb(scheme.onPrimaryContainer),
-    inversePrimary: hexFromArgb(scheme.inversePrimary),
-    primaryFixed: tone(palettes.primary, 90),
-    primaryFixedDim: tone(palettes.primary, 80),
-    onPrimaryFixed: tone(palettes.primary, 10),
-    onPrimaryFixedVariant: tone(palettes.primary, 30),
-    secondary: hexFromArgb(scheme.secondary),
-    onSecondary: hexFromArgb(scheme.onSecondary),
-    secondaryContainer: hexFromArgb(scheme.secondaryContainer),
-    onSecondaryContainer: hexFromArgb(scheme.onSecondaryContainer),
-    secondaryFixed: tone(palettes.secondary, 90),
-    secondaryFixedDim: tone(palettes.secondary, 80),
-    onSecondaryFixed: tone(palettes.secondary, 10),
-    onSecondaryFixedVariant: tone(palettes.secondary, 30),
-    tertiary: hexFromArgb(scheme.tertiary),
-    onTertiary: hexFromArgb(scheme.onTertiary),
-    tertiaryContainer: hexFromArgb(scheme.tertiaryContainer),
-    onTertiaryContainer: hexFromArgb(scheme.onTertiaryContainer),
-    tertiaryFixed: tone(palettes.tertiary, 90),
-    tertiaryFixedDim: tone(palettes.tertiary, 80),
-    onTertiaryFixed: tone(palettes.tertiary, 10),
-    onTertiaryFixedVariant: tone(palettes.tertiary, 30),
-    error: hexFromArgb(scheme.error),
-    onError: hexFromArgb(scheme.onError),
-    errorContainer: hexFromArgb(scheme.errorContainer),
-    onErrorContainer: hexFromArgb(scheme.onErrorContainer),
-    surface: hexFromArgb(scheme.surface),
-    onSurface: hexFromArgb(scheme.onSurface),
-    surfaceVariant: hexFromArgb(scheme.surfaceVariant),
-    onSurfaceVariant: hexFromArgb(scheme.onSurfaceVariant),
-    surfaceTint: hexFromArgb(scheme.primary),
-    // Surface container roles from neutral palette tones
-    surfaceContainerLowest: mode === "light" ? tone(palettes.neutral, 100) : tone(palettes.neutral, 4),
-    surfaceContainerLow: mode === "light" ? tone(palettes.neutral, 96) : tone(palettes.neutral, 10),
-    surfaceContainer: mode === "light" ? tone(palettes.neutral, 94) : tone(palettes.neutral, 12),
-    surfaceContainerHigh: mode === "light" ? tone(palettes.neutral, 92) : tone(palettes.neutral, 17),
-    surfaceContainerHighest: mode === "light" ? tone(palettes.neutral, 90) : tone(palettes.neutral, 22),
-    inverseSurface: hexFromArgb(scheme.inverseSurface),
-    inverseOnSurface: hexFromArgb(scheme.inverseOnSurface),
-    background: hexFromArgb(scheme.background),
-    onBackground: hexFromArgb(scheme.onBackground),
-    outline: hexFromArgb(scheme.outline),
-    outlineVariant: hexFromArgb(scheme.outlineVariant),
-    shadow: hexFromArgb(scheme.shadow),
-    scrim: hexFromArgb(scheme.scrim)
-  };
-}
-function applyTheme(sourceColorHex, mode = "light", root = document.documentElement) {
-  const resolved = resolveMode(mode);
-  const colors = generateM3Theme(sourceColorHex, resolved);
-  for (const [key, value] of Object.entries(colors)) {
-    const kebabKey = key.replace(/[A-Z]/g, (m67) => `-${m67.toLowerCase()}`);
-    root.style.setProperty(`--md-sys-color-${kebabKey}`, value);
-    root.style.setProperty(`--color-m3-${kebabKey}`, value);
-  }
-  root.setAttribute("data-theme", resolved);
-}
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -1022,8 +1087,8 @@ var RoundedPolygon = class _RoundedPolygon {
       );
       const mid = c.pointOnCurve(0.5);
       const md = distanceSquared(mid.x - this.centerX, mid.y - this.centerY);
-      const m67 = Math.max(ad, md);
-      if (m67 > maxDistSq) maxDistSq = m67;
+      const m68 = Math.max(ad, md);
+      if (m68 > maxDistSq) maxDistSq = m68;
     }
     const d = Math.sqrt(maxDistSq);
     return [
@@ -6559,6 +6624,35 @@ var BUTTON_COLOR_TOKENS = {
     default: "bg-transparent text-m3-primary",
     selected: "bg-transparent text-m3-primary",
     unselected: "bg-transparent text-m3-primary"
+  },
+  // ── MD3 Expressive accent variants ──────────────────────────────────────
+  /**
+   * High-chroma tertiary tone. Use for hero CTAs and expressive moments where
+   * a distinct accent beyond primary is needed (e.g., hero chip, highlight fab).
+   */
+  tertiary: {
+    default: "bg-m3-tertiary text-m3-on-tertiary",
+    selected: "bg-m3-tertiary text-m3-on-tertiary",
+    unselected: "bg-m3-tertiary-container text-m3-on-tertiary-container"
+  },
+  /**
+   * Brand-stable primary fixed. Hue stays consistent across light and dark modes.
+   * Ideal for badges, pill chips, and elements that must carry the brand color
+   * regardless of the active theme.
+   */
+  "primary-fixed": {
+    default: "bg-m3-primary-fixed text-m3-on-primary-fixed",
+    selected: "bg-m3-primary-fixed text-m3-on-primary-fixed",
+    unselected: "bg-m3-primary-fixed text-m3-on-primary-fixed-variant"
+  },
+  /**
+   * Brand-stable tertiary fixed. Use for special-state indicators, achievement
+   * badges, or accent pills that need a fixed tertiary hue across themes.
+   */
+  "tertiary-fixed": {
+    default: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed",
+    selected: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed",
+    unselected: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed-variant"
   }
 };
 var MOTION_PROP_KEYS = [
@@ -6930,7 +7024,7 @@ var PILL_BORDER_RADIUS = 9999;
 var MIN_FLEX_GROW = 0.01;
 var PADDING_EXPAND_MULTIPLIER = 4;
 var CHECK_ICON_SIZE = 24;
-var CHECK_ICON = /* @__PURE__ */ jsx(Icon, { name: "check", size: CHECK_ICON_SIZE, weight: 700 });
+var CHECK_ICON = /* @__PURE__ */ jsx(Icon, { name: "check", variant: "rounded", size: CHECK_ICON_SIZE, weight: 700 });
 var CHECK_ICON_GAP_MAP = {
   xs: 6,
   sm: 8,
@@ -6950,12 +7044,6 @@ var WIDTH_MORPH_SPRING = {
   damping: 38,
   mass: 0.85
 };
-var NAVBAR_EXPRESSIVE_SPRING = {
-  type: "spring",
-  stiffness: 430,
-  damping: 38,
-  mass: 0.8
-};
 var AnimatedCheckLabel = React59.memo(function AnimatedCheckLabel2({
   selected,
   size,
@@ -6993,23 +7081,6 @@ var AnimatedCheckLabel = React59.memo(function AnimatedCheckLabel2({
     }
   );
 });
-var AnimatedNavbarLabel = React59.memo(function AnimatedNavbarLabel2({
-  show,
-  children
-}) {
-  return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: show && /* @__PURE__ */ jsx(
-    m.span,
-    {
-      initial: { width: 0, opacity: 0, scale: 0.8 },
-      animate: { width: "auto", opacity: 1, scale: 1 },
-      exit: { width: 0, opacity: 0, scale: 0.8 },
-      transition: NAVBAR_EXPRESSIVE_SPRING,
-      className: "overflow-hidden whitespace-nowrap text-sm font-semibold tracking-[0.01em] ml-1.5",
-      children
-    },
-    "navbar-label"
-  ) });
-});
 function resolveConnectedShapes(variant, orientation, isFirst, isLast, itemSize) {
   const defaults = ButtonGroupDefaults.connectedLeadingButtonShapes(itemSize);
   if (variant !== "connected") return defaults;
@@ -7030,7 +7101,7 @@ function resolveConnectedShapes(variant, orientation, isFirst, isLast, itemSize)
   }
   return defaults;
 }
-function resolveIconAndLabel(element, isSelected, itemSize, variant, showCheck, iconBehavior, labelBehavior) {
+function resolveIconAndLabel(element, isSelected, itemSize, showCheck, iconBehavior, labelBehavior) {
   let icon = element.props.icon;
   let label = element.props.children;
   const animateCheckInLabel = showCheck && iconBehavior !== "none" && iconBehavior !== "selected" && label !== void 0;
@@ -7046,9 +7117,6 @@ function resolveIconAndLabel(element, isSelected, itemSize, variant, showCheck,
   }
   if (animateCheckInLabel && label !== void 0) {
     label = /* @__PURE__ */ jsx(AnimatedCheckLabel, { selected: isSelected, size: itemSize, children: label });
-  } else if (variant === "navbar" && label !== void 0) {
-    const showLabel = !labelBehavior || labelBehavior === "all" || labelBehavior === "selected" && isSelected;
-    label = /* @__PURE__ */ jsx(AnimatedNavbarLabel, { show: showLabel, children: label });
   }
   return { icon, label };
 }
@@ -7083,13 +7151,11 @@ function resolveFlexTargets(variant, orientation, isSelected, isPressed, hasSele
 function buildMotionProps(variant, isSelected, isPressed, itemSize, shapes, flex, existingAnimate, existingWhileTap) {
   var _a, _b;
   const props = { animate: __spreadValues({}, existingAnimate) };
-  if (variant !== "navbar") {
-    if (flex.flexGrow !== void 0) {
-      props.animate.flexGrow = flex.flexGrow;
-    }
-    if (flex.paddingInline !== void 0) {
-      props.animate.paddingInline = flex.paddingInline;
-    }
+  if (flex.flexGrow !== void 0) {
+    props.animate.flexGrow = flex.flexGrow;
+  }
+  if (flex.paddingInline !== void 0) {
+    props.animate.paddingInline = flex.paddingInline;
   }
   if (variant === "standard") {
     const pressedRadius = (_a = PRESSED_RADIUS_MAP[itemSize]) != null ? _a : PRESSED_RADIUS_MAP.sm;
@@ -7140,13 +7206,6 @@ function buildMotionProps(variant, isSelected, isPressed, itemSize, shapes, flex
     });
     props.layout = true;
   }
-  if (variant === "navbar") {
-    props.layout = true;
-    props.transition = {
-      layout: WIDTH_MORPH_SPRING,
-      default: BUTTON_SHAPE_MORPH_SPRING
-    };
-  }
   return props;
 }
 var ButtonGroupComponent = React59.forwardRef(
@@ -7186,7 +7245,6 @@ var ButtonGroupComponent = React59.forwardRef(
     const [lockedGroupSize, setLockedGroupSize] = React59.useState(
       null
     );
-    const layoutIdGroup = React59.useId();
     const rootRef = React59.useRef(null);
     const setRootRef = React59.useCallback(
       (node) => {
@@ -7269,7 +7327,7 @@ var ButtonGroupComponent = React59.forwardRef(
         className: cn(
           "inline-flex p-0 m-0 border-none max-w-full [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
           orientation === "vertical" ? "flex-col items-stretch overflow-y-auto overflow-x-hidden" : "flex-row overflow-x-auto overflow-y-hidden",
-          variant === "standard" ? "gap-3" : variant === "navbar" ? "gap-1.5 h-full" : "gap-0.5",
+          variant === "standard" ? "gap-3" : "gap-0.5",
           fullWidth && "w-full",
           fullWidth && orientation === "vertical" && "h-full",
           className
@@ -7279,7 +7337,7 @@ var ButtonGroupComponent = React59.forwardRef(
         onPointerUp: handlePointerLeaveAndUp
       }, props), {
         children: childrenArray.map((child, index) => {
-          var _a2, _b2, _c;
+          var _a2, _b2;
           const element = child;
           const isSelected = element.props.selected === true;
           const isFirst = index === 0;
@@ -7291,7 +7349,6 @@ var ButtonGroupComponent = React59.forwardRef(
             element,
             isSelected,
             itemSize,
-            variant,
             showCheck,
             iconBehavior,
             labelBehavior
@@ -7317,7 +7374,7 @@ var ButtonGroupComponent = React59.forwardRef(
             basePx
           );
           const dynamicStyle = __spreadValues({}, element.props.style);
-          if (variant !== "navbar" && flex.flexGrow !== void 0 && fullWidth) {
+          if (flex.flexGrow !== void 0 && fullWidth) {
             dynamicStyle.flexBasis = 0;
             dynamicStyle.flexShrink = 1;
             dynamicStyle.minWidth = 0;
@@ -7335,13 +7392,7 @@ var ButtonGroupComponent = React59.forwardRef(
             existingWhileTap
           );
           const connectedClasses = variant === "connected" && isSelected ? "z-20" : "";
-          const navbarFlexStyle = flex.flexGrow !== void 0 ? {
-            flexBasis: fullWidth && labelBehavior !== "selected" ? 0 : "auto",
-            flexShrink: fullWidth ? 1 : 0,
-            flexGrow: flex.flexGrow,
-            minWidth: labelBehavior !== "selected" ? 0 : "fit-content"
-          } : {};
-          const clonedElement = React59.cloneElement(element, __spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues({
+          const clonedElement = React59.cloneElement(element, __spreadValues(__spreadProps(__spreadValues({
             key: (_b2 = element.key) != null ? _b2 : index,
             tabIndex: isFirst ? 0 : -1,
             size: size || element.props.size,
@@ -7350,71 +7401,20 @@ var ButtonGroupComponent = React59.forwardRef(
           }, variant === "connected" && {
             colorStyle: element.props.colorStyle || "tonal",
             selectedColorStyle: element.props.selectedColorStyle || "filled"
-          }), variant === "navbar" && {
-            colorStyle: "text",
-            selectedColorStyle: "text",
-            className: cn(
-              element.props.className,
-              "w-full! h-full! px-3! min-w-0! relative z-20 flex items-center justify-center",
-              isSelected ? "text-m3-on-secondary-container! hover:bg-transparent! active:bg-transparent!" : "text-m3-on-surface-variant! hover:bg-transparent! active:bg-transparent!",
-              itemClassName
-            )
-          }), variant !== "navbar" && {
+          }), {
             className: cn(
               element.props.className,
               connectedClasses,
               "focus-visible:z-10 hover:z-10 relative min-w-0",
               orientation === "vertical" && "w-full",
               itemClassName
-            )
-          }), {
-            style: variant === "navbar" ? __spreadProps(__spreadValues({}, dynamicStyle), { minWidth: 0 }) : dynamicStyle,
+            ),
+            style: dynamicStyle,
             onPointerDown: (e) => {
               setPressedIndex(index);
               if (element.props.onPointerDown) element.props.onPointerDown(e);
             }
           }), motionProps));
-          if (variant === "navbar") {
-            return /* @__PURE__ */ jsxs(
-              m.div,
-              {
-                layout: true,
-                whileTap: { scale: 0.96 },
-                transition: NAVBAR_EXPRESSIVE_SPRING,
-                className: "group relative h-full flex items-center justify-center min-w-0",
-                style: navbarFlexStyle,
-                children: [
-                  /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      className: "absolute inset-x-1 inset-y-0 m-auto flex items-center justify-center pointer-events-none",
-                      style: { zIndex: 1 },
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            className: "w-full h-[40px] bg-m3-on-surface-variant/8 opacity-0 group-hover:opacity-100 transition-opacity duration-200",
-                            style: { borderRadius: PILL_BORDER_RADIUS }
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(AnimatePresence, { children: isSelected && /* @__PURE__ */ jsx(
-                          m.div,
-                          {
-                            layoutId: `navbar-active-indicator-${layoutIdGroup}`,
-                            className: "absolute inset-0 m-auto w-full h-[40px] bg-m3-secondary-container",
-                            style: { borderRadius: PILL_BORDER_RADIUS },
-                            transition: NAVBAR_EXPRESSIVE_SPRING
-                          }
-                        ) })
-                      ]
-                    }
-                  ),
-                  clonedElement
-                ]
-              },
-              (_c = element.key) != null ? _c : index
-            );
-          }
           return clonedElement;
         })
       })
@@ -7519,6 +7519,8 @@ var ExtendedFABComponent = React59.forwardRef(
       scrollThreshold = 50,
       collapsed,
       onCollapsedChange,
+      asChild = false,
+      children,
       onClick,
       onKeyDown,
       layoutId,
@@ -7538,6 +7540,8 @@ var ExtendedFABComponent = React59.forwardRef(
       "scrollThreshold",
       "collapsed",
       "onCollapsedChange",
+      "asChild",
+      "children",
       "onClick",
       "onKeyDown",
       "layoutId",
@@ -7589,7 +7593,109 @@ var ExtendedFABComponent = React59.forwardRef(
       },
       [loading, onClick, onKeyDown]
     );
-    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(AnimatePresence, { children: visible && !(isCollapsed && !hasIcon) && /* @__PURE__ */ jsxs(
+    const containerClassName = cn(
+      "relative shrink-0 inline-flex items-center select-none cursor-pointer overflow-hidden",
+      "transition-[box-shadow,filter] duration-200",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-2",
+      "disabled:pointer-events-none disabled:opacity-[0.38] disabled:shadow-none",
+      colors.bg,
+      colors.text,
+      lowered ? "shadow-sm" : "shadow-md",
+      (_d = SIZE_HEIGHT[size]) != null ? _d : "h-14",
+      SIZE_TEXT[size],
+      isCollapsed ? cn("px-0 justify-center", SIZE_WIDTH_COLLAPSED[size]) : cn(
+        hasIcon ? "justify-start" : "justify-center",
+        SIZE_PADDING[size],
+        hasIcon && SIZE_GAP[size]
+      ),
+      dir === "rtl" || restProps.dir === "rtl" ? "flex-row-reverse" : "flex-row",
+      loading && "pointer-events-none opacity-75 cursor-not-allowed",
+      className
+    );
+    const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+      hasIcon && /* @__PURE__ */ jsx(
+        m.span,
+        {
+          layout: "position",
+          className: cn(
+            "flex items-center justify-center shrink-0",
+            sizeIcon.cls
+          ),
+          children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsx(
+            m.span,
+            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+              transition: SPRING_TRANSITION,
+              className: "flex items-center justify-center shrink-0 w-full h-full",
+              children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsx(
+                LoadingIndicator,
+                {
+                  size: sizeIcon.px,
+                  color: "currentColor",
+                  "aria-label": "Loading"
+                }
+              ) : /* @__PURE__ */ jsx(
+                ProgressIndicator,
+                {
+                  variant: "circular",
+                  size: sizeIcon.px,
+                  color: "currentColor",
+                  trackColor: "transparent",
+                  "aria-label": "Loading"
+                }
+              )
+            }),
+            "loading"
+          ) : icon && /* @__PURE__ */ jsx(
+            m.span,
+            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+              transition: SPRING_TRANSITION,
+              "aria-hidden": "true",
+              className: "flex items-center justify-center shrink-0 w-full h-full [&>svg]:w-full [&>svg]:h-full",
+              children: icon
+            }),
+            "icon"
+          ) })
+        }
+      ),
+      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !isCollapsed && /* @__PURE__ */ jsx(
+        m.span,
+        {
+          layout: "position",
+          initial: { opacity: 0, width: 0 },
+          animate: { opacity: 1, width: "auto" },
+          exit: { opacity: 0, width: 0 },
+          transition: {
+            opacity: { duration: 0.15, ease: "linear" },
+            width: SPRING_TRANSITION
+          },
+          className: "overflow-hidden whitespace-nowrap",
+          children: label
+        },
+        "label"
+      ) })
+    ] });
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(AnimatePresence, { children: visible && !(isCollapsed && !hasIcon) && (asChild ? /* @__PURE__ */ jsx(
+      Slot,
+      __spreadProps(__spreadValues({
+        ref: localRef,
+        "aria-label": ariaLabel || label,
+        "aria-busy": loading || void 0,
+        "aria-disabled": loading || restProps.disabled,
+        onClick: handleClick,
+        onPointerDown,
+        onKeyDown: handleKeyDown,
+        style: __spreadProps(__spreadValues({}, style), {
+          borderRadius: `${radiusConfig.default}px`
+        }),
+        className: containerClassName
+      }, restProps), {
+        children: React59.cloneElement(
+          React59.Children.only(children),
+          { children: innerContent }
+        )
+      })
+    ) : /* @__PURE__ */ jsx(
       m.button,
       __spreadProps(__spreadValues({
         ref: localRef,
@@ -7621,91 +7727,11 @@ var ExtendedFABComponent = React59.forwardRef(
           opacity: { duration: 0.2, ease: "linear" },
           layout: SPRING_TRANSITION
         },
-        className: cn(
-          "relative shrink-0 inline-flex items-center select-none cursor-pointer overflow-hidden",
-          "transition-[box-shadow,filter] duration-200",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-2",
-          "disabled:pointer-events-none disabled:opacity-[0.38] disabled:shadow-none",
-          colors.bg,
-          colors.text,
-          lowered ? "shadow-sm" : "shadow-md",
-          (_d = SIZE_HEIGHT[size]) != null ? _d : "h-14",
-          SIZE_TEXT[size],
-          isCollapsed ? cn("px-0 justify-center", SIZE_WIDTH_COLLAPSED[size]) : cn(
-            hasIcon ? "justify-start" : "justify-center",
-            SIZE_PADDING[size],
-            hasIcon && SIZE_GAP[size]
-          ),
-          dir === "rtl" || restProps.dir === "rtl" ? "flex-row-reverse" : "flex-row",
-          loading && "pointer-events-none opacity-75 cursor-not-allowed",
-          className
-        )
+        className: containerClassName
       }, restProps), {
-        children: [
-          /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
-          hasIcon && /* @__PURE__ */ jsx(
-            m.span,
-            {
-              layout: "position",
-              className: cn(
-                "flex items-center justify-center shrink-0",
-                sizeIcon.cls
-              ),
-              children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsx(
-                m.span,
-                __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
-                  transition: SPRING_TRANSITION,
-                  className: "flex items-center justify-center shrink-0 w-full h-full",
-                  children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsx(
-                    LoadingIndicator,
-                    {
-                      size: sizeIcon.px,
-                      color: "currentColor",
-                      "aria-label": "Loading"
-                    }
-                  ) : /* @__PURE__ */ jsx(
-                    ProgressIndicator,
-                    {
-                      variant: "circular",
-                      size: sizeIcon.px,
-                      color: "currentColor",
-                      trackColor: "transparent",
-                      "aria-label": "Loading"
-                    }
-                  )
-                }),
-                "loading"
-              ) : icon && /* @__PURE__ */ jsx(
-                m.span,
-                __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
-                  transition: SPRING_TRANSITION,
-                  "aria-hidden": "true",
-                  className: "flex items-center justify-center shrink-0 w-full h-full [&>svg]:w-full [&>svg]:h-full",
-                  children: icon
-                }),
-                "icon"
-              ) })
-            }
-          ),
-          /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !isCollapsed && /* @__PURE__ */ jsx(
-            m.span,
-            {
-              layout: "position",
-              initial: { opacity: 0, width: 0 },
-              animate: { opacity: 1, width: "auto" },
-              exit: { opacity: 0, width: 0 },
-              transition: {
-                opacity: { duration: 0.15, ease: "linear" },
-                width: SPRING_TRANSITION
-              },
-              className: "overflow-hidden whitespace-nowrap",
-              children: label
-            },
-            "label"
-          ) })
-        ]
+        children: innerContent
       })
-    ) }) });
+    )) }) });
   }
 );
 ExtendedFABComponent.displayName = "ExtendedFAB";
@@ -7794,6 +7820,7 @@ var FABComponent = React59.forwardRef(
       loading = false,
       loadingVariant = "loading-indicator",
       visible = true,
+      asChild = false,
       onClick,
       onKeyDown,
       "aria-label": ariaLabel
@@ -7809,6 +7836,7 @@ var FABComponent = React59.forwardRef(
       "loading",
       "loadingVariant",
       "visible",
+      "asChild",
       "onClick",
       "onKeyDown",
       "aria-label"
@@ -7846,101 +7874,129 @@ var FABComponent = React59.forwardRef(
       },
       [loading, onClick, onKeyDown]
     );
-    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(AnimatePresence, { children: visible && /* @__PURE__ */ jsxs(
+    const labelContent = asChild ? React59.Children.only(children).props.children : children;
+    const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+      needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
+      /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+      /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsx(
+        m.span,
+        __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+          transition: SPRING_TRANSITION,
+          className: cn(
+            "flex items-center justify-center shrink-0",
+            iconClass
+          ),
+          children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsx(
+            LoadingIndicator,
+            {
+              size: iconPx,
+              color: "currentColor",
+              "aria-label": "Loading"
+            }
+          ) : /* @__PURE__ */ jsx(
+            ProgressIndicator,
+            {
+              variant: "circular",
+              size: iconPx,
+              color: "currentColor",
+              trackColor: "transparent",
+              "aria-label": "Loading"
+            }
+          )
+        }),
+        "loading"
+      ) : /* @__PURE__ */ jsx(
+        m.span,
+        __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+          transition: SPRING_TRANSITION,
+          "aria-hidden": "true",
+          className: cn(
+            "flex items-center justify-center shrink-0 [&>svg]:w-full [&>svg]:h-full",
+            iconClass
+          ),
+          children: icon
+        }),
+        "icon"
+      ) }),
+      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: extended && labelContent && /* @__PURE__ */ jsx(
+        m.span,
+        {
+          initial: { width: 0, opacity: 0 },
+          animate: { width: "auto", opacity: 1 },
+          exit: { width: 0, opacity: 0 },
+          transition: SPRING_TRANSITION,
+          className: "overflow-hidden whitespace-nowrap ml-3",
+          children: labelContent
+        },
+        "label"
+      ) })
+    ] });
+    const containerClassName = cn(
+      "relative shrink-0 inline-flex items-center justify-center",
+      "select-none cursor-pointer overflow-hidden",
+      "transition-[box-shadow,opacity,filter] duration-200",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-2",
+      "disabled:pointer-events-none disabled:opacity-[0.38] disabled:shadow-none",
+      colors.bg,
+      colors.text,
+      lowered ? "shadow-sm" : colors.shadow,
+      (_d = SIZE_STYLES[size]) != null ? _d : "h-14 w-14",
+      extended && "w-auto px-6",
+      SIZE_TEXT_CLASS[size],
+      loading && "pointer-events-none opacity-75 cursor-not-allowed",
+      className
+    );
+    const computedAriaLabel = ariaLabel || (typeof children === "string" ? children : void 0);
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(AnimatePresence, { children: visible && (asChild ? /* @__PURE__ */ jsx(
+      Slot,
+      __spreadProps(__spreadValues({
+        ref,
+        "aria-label": computedAriaLabel,
+        "aria-busy": loading || void 0,
+        "aria-disabled": loading || restProps.disabled,
+        onClick: handleClick,
+        onPointerDown,
+        onKeyDown: handleKeyDown,
+        style: __spreadProps(__spreadValues({}, style), {
+          borderRadius: `${animateRadius}px`
+        }),
+        className: containerClassName
+      }, restProps), {
+        children: React59.cloneElement(
+          React59.Children.only(children),
+          { children: innerContent }
+        )
+      })
+    ) : /* @__PURE__ */ jsx(
       m.button,
       __spreadProps(__spreadValues({
         ref,
         type: "button",
-        "aria-label": ariaLabel || (typeof children === "string" ? children : void 0),
+        "aria-label": computedAriaLabel,
         "aria-busy": loading || void 0,
         "aria-disabled": loading || restProps.disabled,
         onClick: handleClick,
         onPointerDown,
         onKeyDown: handleKeyDown,
         style,
-        initial: { scale: 0.5, opacity: 0, borderRadius: animateRadius },
-        animate: { scale: 1, opacity: 1, borderRadius: animateRadius },
-        exit: { scale: 0.5, opacity: 0 },
+        initial: {
+          scale: 0.5,
+          opacity: 0,
+          borderRadius: animateRadius
+        },
+        animate: { scale: 1, opacity: 1, borderRadius: animateRadius },
+        exit: { scale: 0.5, opacity: 0 },
         whileTap: { borderRadius: pressedRadius },
         transition: {
           borderRadius: SPRING_TRANSITION_FAST,
           scale: SPRING_TRANSITION,
           opacity: { duration: 0.25, ease: "easeOut" }
         },
-        className: cn(
-          "relative shrink-0 inline-flex items-center justify-center",
-          "select-none cursor-pointer overflow-hidden",
-          "transition-[box-shadow,opacity,filter] duration-200",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-2",
-          "disabled:pointer-events-none disabled:opacity-[0.38] disabled:shadow-none",
-          colors.bg,
-          colors.text,
-          lowered ? "shadow-sm" : colors.shadow,
-          (_d = SIZE_STYLES[size]) != null ? _d : "h-14 w-14",
-          extended && "w-auto px-6",
-          SIZE_TEXT_CLASS[size],
-          loading && "pointer-events-none opacity-75 cursor-not-allowed",
-          className
-        )
+        className: containerClassName
       }, restProps), {
-        children: [
-          needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
-          /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
-          /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsx(
-            m.span,
-            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
-              transition: SPRING_TRANSITION,
-              className: cn(
-                "flex items-center justify-center shrink-0",
-                iconClass
-              ),
-              children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsx(
-                LoadingIndicator,
-                {
-                  size: iconPx,
-                  color: "currentColor",
-                  "aria-label": "Loading"
-                }
-              ) : /* @__PURE__ */ jsx(
-                ProgressIndicator,
-                {
-                  variant: "circular",
-                  size: iconPx,
-                  color: "currentColor",
-                  trackColor: "transparent",
-                  "aria-label": "Loading"
-                }
-              )
-            }),
-            "loading"
-          ) : /* @__PURE__ */ jsx(
-            m.span,
-            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
-              transition: SPRING_TRANSITION,
-              "aria-hidden": "true",
-              className: cn(
-                "flex items-center justify-center shrink-0 [&>svg]:w-full [&>svg]:h-full",
-                iconClass
-              ),
-              children: icon
-            }),
-            "icon"
-          ) }),
-          /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: extended && children && /* @__PURE__ */ jsx(
-            m.span,
-            {
-              initial: { width: 0, opacity: 0 },
-              animate: { width: "auto", opacity: 1 },
-              exit: { width: 0, opacity: 0 },
-              transition: SPRING_TRANSITION,
-              className: "overflow-hidden whitespace-nowrap ml-3",
-              children
-            },
-            "label"
-          ) })
-        ]
+        children: innerContent
       })
-    ) }) });
+    )) }) });
   }
 );
 FABComponent.displayName = "FAB";
@@ -8140,7 +8196,9 @@ function FABMenuItem({
   disabled = false,
   colorVariant = "primary",
   className,
-  tabIndex = 0
+  tabIndex = 0,
+  asChild = false,
+  children
 }) {
   var _a;
   const colors = (_a = MENU_ITEM_COLORS[colorVariant]) != null ? _a : MENU_ITEM_COLORS.primary;
@@ -8165,7 +8223,55 @@ function FABMenuItem({
     },
     [disabled, onClick]
   );
-  return /* @__PURE__ */ jsxs(
+  const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(TouchTarget, {}),
+    /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "relative z-10 flex items-center justify-center size-6 shrink-0 [&>svg]:w-full [&>svg]:h-full pointer-events-none",
+        children: icon
+      }
+    ),
+    label && /* @__PURE__ */ jsx("span", { className: "relative z-10 text-base font-medium leading-none pointer-events-none", children: label })
+  ] });
+  const containerClassName = cn(
+    "relative inline-flex flex-row items-center",
+    "select-none cursor-pointer overflow-hidden",
+    "whitespace-nowrap",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-1",
+    MENU_ITEM_STYLES.size,
+    MENU_ITEM_STYLES.gap,
+    label ? MENU_ITEM_STYLES.padding : "px-4",
+    !label && "justify-center",
+    colors.bg,
+    colors.text,
+    disabled && "opacity-[0.38] pointer-events-none",
+    className
+  );
+  const containerStyle = {
+    transformOrigin: "right",
+    borderRadius: `${MENU_ITEM_STYLES.cornerRadius}px`
+  };
+  if (asChild) {
+    const child = React59.Children.only(children);
+    return /* @__PURE__ */ jsx(m.div, { variants: MENU_ITEM_VARIANTS, style: containerStyle, children: /* @__PURE__ */ jsx(
+      Slot,
+      {
+        role: "menuitem",
+        tabIndex,
+        "aria-disabled": disabled ? "true" : void 0,
+        "data-disabled": disabled ? "true" : void 0,
+        onClick: handleClick,
+        onPointerDown,
+        onKeyDown: handleKeyDown,
+        className: containerClassName,
+        children: React59.cloneElement(child, { children: innerContent })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
     m.div,
     {
       role: "menuitem",
@@ -8176,37 +8282,9 @@ function FABMenuItem({
       onPointerDown,
       onKeyDown: handleKeyDown,
       variants: MENU_ITEM_VARIANTS,
-      style: {
-        transformOrigin: "right",
-        borderRadius: `${MENU_ITEM_STYLES.cornerRadius}px`
-      },
-      className: cn(
-        "relative inline-flex flex-row items-center",
-        "select-none cursor-pointer overflow-hidden",
-        "whitespace-nowrap",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-1",
-        MENU_ITEM_STYLES.size,
-        MENU_ITEM_STYLES.gap,
-        label ? MENU_ITEM_STYLES.padding : "px-4",
-        !label && "justify-center",
-        colors.bg,
-        colors.text,
-        disabled && "opacity-[0.38] pointer-events-none",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(TouchTarget, {}),
-        /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: "relative z-10 flex items-center justify-center size-6 shrink-0 [&>svg]:w-full [&>svg]:h-full pointer-events-none",
-            children: icon
-          }
-        ),
-        label && /* @__PURE__ */ jsx("span", { className: "relative z-10 text-base font-medium leading-none pointer-events-none", children: label })
-      ]
+      style: containerStyle,
+      className: containerClassName,
+      children: innerContent
     }
   );
 }
@@ -8488,6 +8566,7 @@ var IconButtonComponent = React59.forwardRef(
       loading = false,
       loadingVariant = "loading-indicator",
       iconSize,
+      asChild = false,
       children,
       onClick,
       onKeyDown,
@@ -8503,6 +8582,7 @@ var IconButtonComponent = React59.forwardRef(
       "loading",
       "loadingVariant",
       "iconSize",
+      "asChild",
       "children",
       "onClick",
       "onKeyDown",
@@ -8564,7 +8644,87 @@ var IconButtonComponent = React59.forwardRef(
       },
       [loading, onClick, onKeyDown]
     );
-    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
+    const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+      needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
+      /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+      /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsx(
+        m.span,
+        __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+          transition: SPRING_TRANSITION,
+          className: cn(
+            "flex items-center justify-center shrink-0",
+            iconSize != null ? void 0 : iconClass
+          ),
+          style: isCustomSize ? { width: `${iconSize}px`, height: `${iconSize}px` } : void 0,
+          children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsx(
+            LoadingIndicator,
+            {
+              size: typeof iconPx === "number" ? iconPx : defaultIconPx,
+              color: "currentColor",
+              "aria-label": "Loading"
+            }
+          ) : /* @__PURE__ */ jsx(
+            ProgressIndicator,
+            {
+              variant: "circular",
+              size: typeof iconPx === "number" ? iconPx : defaultIconPx,
+              color: "currentColor",
+              trackColor: "transparent",
+              "aria-label": "Loading"
+            }
+          )
+        }),
+        "loading"
+      ) : /* @__PURE__ */ jsx(
+        m.span,
+        __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+          transition: SPRING_TRANSITION,
+          "aria-hidden": "true",
+          className: cn(
+            "flex items-center justify-center shrink-0 [&_svg]:w-full [&_svg]:h-full [&_.md-icon]:text-[length:inherit]!",
+            iconSize != null ? void 0 : iconClass
+          ),
+          style: {
+            fontSize: typeof iconPx === "number" ? `${iconPx}px` : iconPx,
+            width: isCustomSize ? `${iconSize}px` : void 0,
+            height: isCustomSize ? `${iconSize}px` : void 0
+          },
+          children: asChild ? React59.Children.only(children).props.children : children
+        }),
+        "content"
+      ) })
+    ] });
+    const containerClassName = cn(
+      baseIconButtonClasses,
+      resolvedColorClass,
+      outlineWidthClass,
+      disabledBgClass,
+      "overflow-hidden",
+      SIZE_STYLES2[size],
+      loading && "pointer-events-none opacity-75 cursor-not-allowed",
+      className
+    );
+    if (asChild) {
+      const child = React59.Children.only(children);
+      return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
+        Slot,
+        __spreadProps(__spreadValues({
+          ref,
+          "aria-pressed": isToggle ? isSelected : void 0,
+          "aria-label": ariaLabel,
+          "aria-busy": loading || void 0,
+          "aria-disabled": loading || restProps.disabled,
+          onClick: handleClick,
+          onPointerDown,
+          onKeyDown: handleKeyDown,
+          style: __spreadProps(__spreadValues({}, style), { borderRadius: `${animateRadius}px` }),
+          className: containerClassName
+        }, restProps), {
+          children: React59.cloneElement(child, { children: innerContent })
+        })
+      ) });
+    }
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
       m.button,
       __spreadProps(__spreadValues({
         ref,
@@ -8580,67 +8740,9 @@ var IconButtonComponent = React59.forwardRef(
         animate: { borderRadius: animateRadius },
         whileTap: { borderRadius: pressedRadius },
         transition: { borderRadius: SPRING_TRANSITION_FAST },
-        className: cn(
-          baseIconButtonClasses,
-          resolvedColorClass,
-          outlineWidthClass,
-          disabledBgClass,
-          "overflow-hidden",
-          SIZE_STYLES2[size],
-          loading && "pointer-events-none opacity-75 cursor-not-allowed",
-          className
-        )
+        className: containerClassName
       }, restProps), {
-        children: [
-          needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
-          /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
-          /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsx(
-            m.span,
-            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
-              transition: SPRING_TRANSITION,
-              className: cn(
-                "flex items-center justify-center shrink-0",
-                iconSize != null ? void 0 : iconClass
-              ),
-              style: isCustomSize ? { width: `${iconSize}px`, height: `${iconSize}px` } : void 0,
-              children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsx(
-                LoadingIndicator,
-                {
-                  size: typeof iconPx === "number" ? iconPx : defaultIconPx,
-                  color: "currentColor",
-                  "aria-label": "Loading"
-                }
-              ) : /* @__PURE__ */ jsx(
-                ProgressIndicator,
-                {
-                  variant: "circular",
-                  size: typeof iconPx === "number" ? iconPx : defaultIconPx,
-                  color: "currentColor",
-                  trackColor: "transparent",
-                  "aria-label": "Loading"
-                }
-              )
-            }),
-            "loading"
-          ) : /* @__PURE__ */ jsx(
-            m.span,
-            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
-              transition: SPRING_TRANSITION,
-              "aria-hidden": "true",
-              className: cn(
-                "flex items-center justify-center shrink-0 [&_svg]:w-full [&_svg]:h-full [&_.md-icon]:text-[length:inherit]!",
-                iconSize != null ? void 0 : iconClass
-              ),
-              style: {
-                fontSize: typeof iconPx === "number" ? `${iconPx}px` : iconPx,
-                width: isCustomSize ? `${iconSize}px` : void 0,
-                height: isCustomSize ? `${iconSize}px` : void 0
-              },
-              children
-            }),
-            "content"
-          ) })
-        ]
+        children: innerContent
       })
     ) });
   }
@@ -8960,6 +9062,7 @@ var SplitButtonLeadingComponent = React59.forwardRef(
       icon,
       children,
       disabled,
+      asChild = false,
       onClick,
       onPointerDown,
       onPointerUp,
@@ -8975,6 +9078,7 @@ var SplitButtonLeadingComponent = React59.forwardRef(
       "icon",
       "children",
       "disabled",
+      "asChild",
       "onClick",
       "onPointerDown",
       "onPointerUp",
@@ -9061,12 +9165,73 @@ var SplitButtonLeadingComponent = React59.forwardRef(
       [onBlur]
     );
     const leadingIconSize = LEADING_ICON_SIZE_FOR_SIZE[actualSize];
-    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
+    const labelContent = asChild ? React59.Children.only(children).props.children : children;
+    const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+      needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
+      /* @__PURE__ */ jsx(
+        StateLayer,
+        {
+          hovered: isHovered,
+          focused: isFocused,
+          pressed: isPressed
+        }
+      ),
+      /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+      icon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "flex items-center justify-center shrink-0 [&>svg]:w-full [&>svg]:h-full overflow-hidden [&_.md-icon]:text-[length:inherit]!",
+          style: {
+            fontSize: leadingIconSize,
+            width: leadingIconSize,
+            height: leadingIconSize
+          },
+          children: icon
+        }
+      ),
+      labelContent && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center h-full gap-[inherit]", children: labelContent })
+    ] });
+    const containerClassName = cn(
+      splitButtonVariants({
+        variant: actualVariant,
+        size: actualSize,
+        disabled
+      }),
+      typographyClass,
+      className
+    );
+    const mergedStyle = __spreadValues({
+      paddingInlineStart: tokens.leadingPadding.start,
+      paddingInlineEnd: tokens.leadingPadding.end,
+      gap: "8px",
+      borderRadius
+    }, style);
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: asChild ? /* @__PURE__ */ jsx(
+      Slot,
+      __spreadProps(__spreadValues({
+        ref,
+        "aria-disabled": disabled || void 0,
+        onClick: handleClick,
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerEnter: handlePointerEnter,
+        onPointerLeave: handlePointerLeave,
+        onPointerCancel: handlePointerCancel,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        style: mergedStyle,
+        className: containerClassName
+      }, restProps), {
+        children: React59.cloneElement(
+          React59.Children.only(children),
+          { children: innerContent }
+        )
+      })
+    ) : /* @__PURE__ */ jsx(
       m.button,
       __spreadProps(__spreadValues({
         ref,
         type: "button",
-        "aria-disabled": disabled,
         disabled,
         onClick: handleClick,
         onPointerDown: handlePointerDown,
@@ -9083,41 +9248,9 @@ var SplitButtonLeadingComponent = React59.forwardRef(
           paddingInlineEnd: tokens.leadingPadding.end,
           gap: "8px"
         }, style),
-        className: cn(
-          splitButtonVariants({
-            variant: actualVariant,
-            size: actualSize,
-            disabled
-          }),
-          typographyClass,
-          className
-        )
+        className: containerClassName
       }, restProps), {
-        children: [
-          needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
-          /* @__PURE__ */ jsx(
-            StateLayer,
-            {
-              hovered: isHovered,
-              focused: isFocused,
-              pressed: isPressed
-            }
-          ),
-          /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
-          icon && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "flex items-center justify-center shrink-0 [&>svg]:w-full [&>svg]:h-full overflow-hidden [&_.md-icon]:text-[length:inherit]!",
-              style: {
-                fontSize: leadingIconSize,
-                width: leadingIconSize,
-                height: leadingIconSize
-              },
-              children: icon
-            }
-          ),
-          children && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center h-full gap-[inherit]", children })
-        ]
+        children: innerContent
       })
     ) });
   }
@@ -9149,6 +9282,8 @@ var SplitButtonTrailingComponent = React59.forwardRef(
       onPointerCancel,
       onFocus,
       onBlur,
+      asChild = false,
+      children,
       "aria-label": ariaLabel
     } = _b, restProps = __objRest(_b, [
       "className",
@@ -9165,6 +9300,8 @@ var SplitButtonTrailingComponent = React59.forwardRef(
       "onPointerCancel",
       "onFocus",
       "onBlur",
+      "asChild",
+      "children",
       "aria-label"
     ]);
     var _a2, _b2;
@@ -9239,14 +9376,81 @@ var SplitButtonTrailingComponent = React59.forwardRef(
       },
       [onBlur]
     );
-    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
+    const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+      needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
+      /* @__PURE__ */ jsx(
+        StateLayer,
+        {
+          hovered: isHovered,
+          focused: isFocused,
+          pressed: isPressed
+        }
+      ),
+      /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+      /* @__PURE__ */ jsx(
+        m.div,
+        {
+          animate: {
+            rotate: checked ? 180 : 0,
+            x: checked ? 0 : tokens.opticalCenterOffset
+          },
+          transition: prefersReducedMotion2 ? { duration: 0 } : SPLIT_BUTTON_CHEVRON_SPRING,
+          className: "flex items-center justify-center shrink-0",
+          children: icon != null ? icon : /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: "arrow_drop_down",
+              size: tokens.trailingIconSize,
+              opticalSize: 24
+            }
+          )
+        }
+      )
+    ] });
+    const containerClassName = cn(
+      splitButtonVariants({
+        variant: actualVariant,
+        size: actualSize,
+        disabled
+      }),
+      className
+    );
+    const mergedStyle = __spreadValues({
+      paddingInlineStart: tokens.trailingPadding.start,
+      paddingInlineEnd: tokens.trailingPadding.end,
+      borderRadius
+    }, style);
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: asChild ? /* @__PURE__ */ jsx(
+      Slot,
+      __spreadProps(__spreadValues({
+        ref,
+        "aria-label": ariaLabel,
+        "aria-expanded": checked,
+        "aria-disabled": disabled,
+        onClick: handleToggle,
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerEnter: handlePointerEnter,
+        onPointerLeave: handlePointerLeave,
+        onPointerCancel: handlePointerCancel,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        style: mergedStyle,
+        className: containerClassName
+      }, restProps), {
+        children: React59.cloneElement(
+          React59.Children.only(children),
+          { children: innerContent }
+        )
+      })
+    ) : /* @__PURE__ */ jsx(
       m.button,
       __spreadProps(__spreadValues({
         ref,
         type: "button",
-        "aria-pressed": checked,
-        "aria-expanded": checked,
         "aria-label": ariaLabel,
+        "aria-expanded": checked,
+        "aria-disabled": disabled,
         disabled,
         onClick: handleToggle,
         onPointerDown: handlePointerDown,
@@ -9262,46 +9466,9 @@ var SplitButtonTrailingComponent = React59.forwardRef(
           paddingInlineStart: tokens.trailingPadding.start,
           paddingInlineEnd: tokens.trailingPadding.end
         }, style),
-        className: cn(
-          splitButtonVariants({
-            variant: actualVariant,
-            size: actualSize,
-            disabled
-          }),
-          className
-        )
+        className: containerClassName
       }, restProps), {
-        children: [
-          needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
-          /* @__PURE__ */ jsx(
-            StateLayer,
-            {
-              hovered: isHovered,
-              focused: isFocused,
-              pressed: isPressed
-            }
-          ),
-          /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
-          /* @__PURE__ */ jsx(
-            m.div,
-            {
-              animate: {
-                rotate: checked ? 180 : 0,
-                x: checked ? 0 : tokens.opticalCenterOffset
-              },
-              transition: prefersReducedMotion2 ? { duration: 0 } : SPLIT_BUTTON_CHEVRON_SPRING,
-              className: "flex items-center justify-center shrink-0",
-              children: icon != null ? icon : /* @__PURE__ */ jsx(
-                Icon,
-                {
-                  name: "arrow_drop_down",
-                  size: tokens.trailingIconSize,
-                  opticalSize: 24
-                }
-              )
-            }
-          )
-        ]
+        children: innerContent
       })
     ) });
   }
@@ -9555,6 +9722,7 @@ var CardImpl = React59.forwardRef(
       target,
       rel: relProp,
       onClick,
+      asChild = false,
       children
     } = _b, props = __objRest(_b, [
       "className",
@@ -9565,10 +9733,11 @@ var CardImpl = React59.forwardRef(
       "target",
       "rel",
       "onClick",
+      "asChild",
       "children"
     ]);
     const safeVariant = variant;
-    const isInteractive = !!onClick || !!href || interactive;
+    const isInteractive = !!onClick || !!href || interactive || asChild;
     const elevationProps = useCardElevation(safeVariant, disabled);
     const { ripples, onPointerDown, removeRipple } = useRippleState();
     const baseClass = cn(
@@ -9589,6 +9758,26 @@ var CardImpl = React59.forwardRef(
       // Outlined interactive card: change border color to m3-outline on focus/press/hover
       variant === "outlined" && "hover:border-m3-outline focus-visible:border-m3-outline active:border-m3-outline"
     );
+    if (asChild) {
+      const child = React59.Children.only(children);
+      const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+        child.props.children
+      ] });
+      return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
+        Slot,
+        __spreadProps(__spreadValues({
+          ref,
+          className: cn(baseClass, interactiveClass),
+          "aria-disabled": disabled ? true : void 0,
+          tabIndex: disabled ? -1 : 0,
+          onPointerDown,
+          onClick
+        }, props), {
+          children: React59.cloneElement(child, { children: innerContent })
+        })
+      ) });
+    }
     if (!isInteractive) {
       return /* @__PURE__ */ jsx(
         "div",
@@ -10055,7 +10244,9 @@ var ChipImpl = React59.forwardRef(
       avatar,
       onRemove,
       className,
-      onClick
+      onClick,
+      asChild = false,
+      children
     } = _b, props = __objRest(_b, [
       "variant",
       "elevated",
@@ -10067,7 +10258,9 @@ var ChipImpl = React59.forwardRef(
       "avatar",
       "onRemove",
       "className",
-      "onClick"
+      "onClick",
+      "asChild",
+      "children"
     ]);
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled
@@ -10182,6 +10375,63 @@ var ChipImpl = React59.forwardRef(
       ) : null }),
       /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: label })
     ] });
+    if (asChild) {
+      const child = React59.Children.only(children);
+      const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+        mainContent,
+        hasTrailingContent && /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center shrink-0", children: onRemove ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: disabled ? -1 : 0,
+            "aria-label": typeof label === "string" ? `Remove ${label}` : "Remove",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove(e);
+            },
+            onPointerDown: (e) => e.stopPropagation(),
+            className: cn(
+              "flex items-center justify-center w-8.5 h-full",
+              "cursor-pointer focus-visible:outline-none",
+              "transition-all duration-150",
+              "relative overflow-hidden rounded-r-[7px] rounded-l-none",
+              "before:absolute before:-inset-px before:pointer-events-none before:bg-current",
+              "before:transition-opacity before:duration-200 before:opacity-0 before:rounded-r-[7px]",
+              "hover:before:opacity-[0.08] active:before:opacity-[0.12]",
+              selected ? "text-m3-on-secondary-container" : "text-m3-on-surface-variant"
+            ),
+            children: /* @__PURE__ */ jsx(CloseIcon3, {})
+          }
+        ) : trailingIcon ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "flex items-center justify-center w-4.5 h-4.5 [&_.md-icon]:text-[length:inherit]!",
+              selected ? "text-m3-on-secondary-container" : "text-m3-on-surface-variant"
+            ),
+            style: { fontSize: 18 },
+            "aria-hidden": "true",
+            children: trailingIcon
+          }
+        ) : null })
+      ] });
+      const strippedProps = __spreadValues({}, props);
+      delete strippedProps.children;
+      return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
+        Slot,
+        __spreadProps(__spreadValues({
+          ref,
+          "aria-disabled": disabled || void 0,
+          tabIndex: disabled ? -1 : 0,
+          onClick,
+          onPointerDown,
+          className: containerClass
+        }, strippedProps), {
+          children: React59.cloneElement(child, { children: innerContent })
+        })
+      ) });
+    }
     return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
       Root8,
       __spreadProps(__spreadValues(__spreadProps(__spreadValues({
@@ -13123,7 +13373,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 = (m67) => m67 >= 0 && m67 <= 59;
+var isValidMinuteInput = (m68) => m68 >= 0 && m68 <= 59;
 var to24Hour = (hour12, isPm) => {
   if (isPm) {
     return hour12 === 12 ? 12 : hour12 + 12;
@@ -13159,8 +13409,8 @@ var useTimePickerState = (options) => {
     },
     [is24hour]
   );
-  const setMinute = useCallback((m67) => {
-    const clamped = clamp(m67, 0, 59);
+  const setMinute = useCallback((m68) => {
+    const clamped = clamp(m68, 0, 59);
     setMinuteState(clamped);
     setMinuteInputState(clamped);
   }, []);
@@ -13174,10 +13424,10 @@ var useTimePickerState = (options) => {
     },
     [is24hour, isPm]
   );
-  const setMinuteInput = useCallback((m67) => {
-    setMinuteInputState(m67);
-    if (isValidMinuteInput(m67)) {
-      setMinuteState(m67);
+  const setMinuteInput = useCallback((m68) => {
+    setMinuteInputState(m68);
+    if (isValidMinuteInput(m68)) {
+      setMinuteState(m68);
     }
   }, []);
   const setSelection = useCallback((mode) => {
@@ -15317,7 +15567,7 @@ var NavigationBarItemComponent = React59.forwardRef(
     className,
     "aria-label": ariaLabelProp
   }, ref) => {
-    const { variant, itemLayout } = React59.useContext(NavigationBarContext);
+    const { variant, itemLayout, itemClassName: contextItemClassName } = React59.useContext(NavigationBarContext);
     const isForcedHorizontal = itemLayout === "horizontal";
     const isResponsiveHorizontal = (variant === "flexible" || variant === "xr") && itemLayout === void 0;
     const { ripples, onPointerDown, removeRipple } = useRippleState({
@@ -15352,9 +15602,10 @@ var NavigationBarItemComponent = React59.forwardRef(
         onClick: handleClick,
         onPointerDown,
         className: cn(
-          "group relative flex flex-1 cursor-pointer transition-colors duration-200 outline-none select-none h-full",
-          variant === "xr" ? "items-center justify-center max-[599px]:min-w-28 max-[599px]:max-w-28 max-[599px]:items-start max-[599px]:pt-3 max-[599px]:pb-4" : "items-center justify-center",
+          "group relative flex cursor-pointer transition-colors duration-200 outline-none select-none h-full items-center justify-center min-w-0",
+          variant === "xr" ? isResponsiveHorizontal ? "flex-1 min-[600px]:flex-initial min-[600px]:w-auto" : isForcedHorizontal ? "flex-initial w-auto" : "flex-1" : isForcedHorizontal ? "flex-initial w-auto" : "flex-1",
           disabled && "pointer-events-none opacity-[0.38]",
+          contextItemClassName,
           className
         ),
         children: [
@@ -15362,9 +15613,9 @@ var NavigationBarItemComponent = React59.forwardRef(
             "div",
             {
               className: cn(
-                "relative flex items-center justify-center flex-col gap-y-1 w-full",
-                isResponsiveHorizontal && "min-[600px]:flex-row min-[600px]:gap-y-0 min-[600px]:gap-x-1 min-[600px]:h-10 min-[600px]:px-4 min-[600px]:rounded-full min-[600px]:w-auto min-[600px]:max-w-42",
-                isForcedHorizontal && "flex-row gap-y-0 gap-x-1 h-10 px-4 rounded-full w-auto max-w-42"
+                "relative flex items-center justify-center flex-col gap-y-1 w-full px-1 py-1.5",
+                isResponsiveHorizontal && "min-[600px]:flex-row min-[600px]:gap-y-0 min-[600px]:gap-x-1.5 min-[600px]:h-10 min-[600px]:px-4 min-[600px]:py-0 min-[600px]:rounded-full min-[600px]:w-auto",
+                isForcedHorizontal && "flex-row gap-y-0 gap-x-1.5 h-10 px-4 py-0 rounded-full w-auto"
               ),
               children: [
                 /* @__PURE__ */ jsxs(
@@ -15441,7 +15692,7 @@ var navContainerVariants = cva(
       variant: {
         flexible: "bottom-0 left-0 right-0 w-full h-16 pb-safe",
         baseline: "bottom-0 left-0 right-0 w-full h-20 pb-safe",
-        xr: "bottom-6 left-1/2 -translate-x-1/2 w-auto max-w-fit h-20 min-[600px]:h-16 rounded-[48px] px-2"
+        xr: "bottom-6 left-1/2 -translate-x-1/2 w-auto max-w-[calc(100%-2rem)] min-[600px]:max-w-fit h-20 min-[600px]:h-16 rounded-[48px] px-2"
       },
       position: {
         fixed: "fixed",
@@ -15469,6 +15720,7 @@ var NavigationBarComponent = React59.forwardRef(
     scrollContainerRef,
     activeIndicatorTransition,
     children,
+    itemClassName,
     className,
     style
   }, ref) => {
@@ -15519,7 +15771,7 @@ var NavigationBarComponent = React59.forwardRef(
     return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
       NavigationBarContext.Provider,
       {
-        value: { variant, itemLayout, activeIndicatorTransition },
+        value: { variant, itemLayout, activeIndicatorTransition, itemClassName },
         children: /* @__PURE__ */ jsx(
           m.nav,
           {
@@ -15540,7 +15792,7 @@ var NavigationBarComponent = React59.forwardRef(
                 "aria-orientation": "horizontal",
                 className: cn(
                   "flex w-full h-full mx-auto",
-                  variant === "xr" ? "gap-0 min-[600px]:gap-1.5" : "max-w-7xl gap-1.5"
+                  variant === "xr" ? "gap-0 min-[600px]:gap-1.5 items-center justify-center px-1" : "max-w-7xl gap-1.5"
                 ),
                 children
               }
@@ -20636,6 +20888,7 @@ var TabsList = React59.memo(TabsListComponent);
 var typographyVariants = cva("m-0 p-0 text-m3-on-surface", {
   variants: {
     variant: {
+      // Short hyphenated
       "display-lg": "text-[57px] leading-[64px] font-normal tracking-[-0.25px]",
       "display-md": "text-[45px] leading-[52px] font-normal tracking-[0px]",
       "display-sm": "text-[36px] leading-[44px] font-normal tracking-[0px]",
@@ -20650,7 +20903,39 @@ var typographyVariants = cva("m-0 p-0 text-m3-on-surface", {
       "label-sm": "text-[11px] leading-[16px] font-medium tracking-[0.5px]",
       "body-lg": "text-[16px] leading-[24px] font-normal tracking-[0.5px]",
       "body-md": "text-[14px] leading-[20px] font-normal tracking-[0.25px]",
-      "body-sm": "text-[12px] leading-[16px] font-normal tracking-[0.4px]"
+      "body-sm": "text-[12px] leading-[16px] font-normal tracking-[0.4px]",
+      // Full hyphenated aliases
+      "display-large": "text-[57px] leading-[64px] font-normal tracking-[-0.25px]",
+      "display-medium": "text-[45px] leading-[52px] font-normal tracking-[0px]",
+      "display-small": "text-[36px] leading-[44px] font-normal tracking-[0px]",
+      "headline-large": "text-[32px] leading-[40px] font-normal tracking-[0px]",
+      "headline-medium": "text-[28px] leading-[36px] font-normal tracking-[0px]",
+      "headline-small": "text-[24px] leading-[32px] font-normal tracking-[0px]",
+      "title-large": "text-[22px] leading-[28px] font-normal tracking-[0px]",
+      "title-medium": "text-[16px] leading-[24px] font-medium tracking-[0.15px]",
+      "title-small": "text-[14px] leading-[20px] font-medium tracking-[0.1px]",
+      "label-large": "text-[14px] leading-[20px] font-medium tracking-[0.1px]",
+      "label-medium": "text-[12px] leading-[16px] font-medium tracking-[0.5px]",
+      "label-small": "text-[11px] leading-[16px] font-medium tracking-[0.5px]",
+      "body-large": "text-[16px] leading-[24px] font-normal tracking-[0.5px]",
+      "body-medium": "text-[14px] leading-[20px] font-normal tracking-[0.25px]",
+      "body-small": "text-[12px] leading-[16px] font-normal tracking-[0.4px]",
+      // CamelCase aliases
+      displayLarge: "text-[57px] leading-[64px] font-normal tracking-[-0.25px]",
+      displayMedium: "text-[45px] leading-[52px] font-normal tracking-[0px]",
+      displaySmall: "text-[36px] leading-[44px] font-normal tracking-[0px]",
+      headlineLarge: "text-[32px] leading-[40px] font-normal tracking-[0px]",
+      headlineMedium: "text-[28px] leading-[36px] font-normal tracking-[0px]",
+      headlineSmall: "text-[24px] leading-[32px] font-normal tracking-[0px]",
+      titleLarge: "text-[22px] leading-[28px] font-normal tracking-[0px]",
+      titleMedium: "text-[16px] leading-[24px] font-medium tracking-[0.15px]",
+      titleSmall: "text-[14px] leading-[20px] font-medium tracking-[0.1px]",
+      labelLarge: "text-[14px] leading-[20px] font-medium tracking-[0.1px]",
+      labelMedium: "text-[12px] leading-[16px] font-medium tracking-[0.5px]",
+      labelSmall: "text-[11px] leading-[16px] font-medium tracking-[0.5px]",
+      bodyLarge: "text-[16px] leading-[24px] font-normal tracking-[0.5px]",
+      bodyMedium: "text-[14px] leading-[20px] font-normal tracking-[0.25px]",
+      bodySmall: "text-[12px] leading-[16px] font-normal tracking-[0.4px]"
     }
   },
   defaultVariants: {
@@ -20659,19 +20944,21 @@ var typographyVariants = cva("m-0 p-0 text-m3-on-surface", {
 });
 var Text = React59.forwardRef(
   (_a, ref) => {
-    var _b = _a, { className, variant, as: Component } = _b, props = __objRest(_b, ["className", "variant", "as"]);
+    var _b = _a, { className, variant, as: Component, color, weight, style } = _b, props = __objRest(_b, ["className", "variant", "as", "color", "weight", "style"]);
     const defaultComponent = React59.useMemo(() => {
-      if ((variant == null ? void 0 : variant.startsWith("display")) || (variant == null ? void 0 : variant.startsWith("headline")))
-        return "h1";
-      if (variant == null ? void 0 : variant.startsWith("title")) return "h2";
+      const v = variant ? String(variant).toLowerCase() : "";
+      if (v.startsWith("display") || v.startsWith("headline")) return "h1";
+      if (v.startsWith("title")) return "h2";
       return "p";
     }, [variant]);
     const Tag = Component || defaultComponent;
+    const customStyle = __spreadValues(__spreadValues(__spreadValues({}, style), color ? { color } : {}), weight ? { fontWeight: weight } : {});
     return /* @__PURE__ */ jsx(
       Tag,
       __spreadValues({
         ref,
-        className: cn(typographyVariants({ variant, className }))
+        className: cn(typographyVariants({ variant, className })),
+        style: customStyle
       }, props)
     );
   }
@@ -20796,7 +21083,6 @@ var FloatingLabel = React59.memo(function FloatingLabel2({
         "absolute pointer-events-none select-none origin-[left_center] leading-6 text-base whitespace-nowrap",
         "px-1 -mx-1",
         // Clear the notch gap and keep text aligned
-        variant === "outlined" && isFloated && "bg-m3-surface",
         "left-4",
         isDisabled && "opacity-[0.38]"
       ),
@@ -20872,7 +21158,8 @@ var OutlineContainer = React59.memo(function OutlineContainer2({
   );
   const borderWidth = isFocused || isError ? TF_SIZE.outlineThick : TF_SIZE.outlineThin;
   const leftSegmentWidth = TF_SIZE.paddingStart;
-  const notchWidth = isFloated ? labelWidth * TF_TYPOGRAPHY.labelScaleRatio + TF_SIZE.notchPadding * 2 : 0;
+  const isNotched = isFloated && labelWidth > 0;
+  const notchWidth = isNotched ? labelWidth * TF_TYPOGRAPHY.labelScaleRatio + TF_SIZE.notchPadding * 2 : 0;
   const borderTransition = { duration: colorDuration, ease };
   const notchTransition = { duration: notchDuration, ease };
   return /* @__PURE__ */ jsxs(
@@ -20910,7 +21197,7 @@ var OutlineContainer = React59.memo(function OutlineContainer2({
                   style: { height: borderWidth },
                   animate: {
                     borderTopColor: borderColor,
-                    opacity: isFloated ? 0 : 1,
+                    opacity: isNotched ? 0 : 1,
                     borderTopWidth: borderWidth,
                     borderTopStyle: "solid"
                   },
@@ -21362,7 +21649,7 @@ var TextFieldComponent = React59.forwardRef(
     const computedDescribedby = [hasSupporting ? supportingId : "", ariaDescribedby != null ? ariaDescribedby : ""].filter(Boolean).join(" ") || void 0;
     const inputClass = cn(
       "bg-transparent outline-none w-full",
-      isInToolbar ? "self-center" : "self-end",
+      !resolvedLabel || isInToolbar ? "self-center" : "self-end",
       "text-base leading-6 text-m3-on-surface",
       "caret-[var(--color-m3-primary)]",
       "placeholder:text-m3-on-surface-variant/60",
@@ -21373,7 +21660,7 @@ var TextFieldComponent = React59.forwardRef(
       id: inputId,
       name,
       value: currentValue,
-      placeholder: isFloated ? placeholder != null ? placeholder : "" : "",
+      placeholder: !resolvedLabel || isFloated ? placeholder != null ? placeholder : "" : "",
       disabled,
       readOnly,
       required,
@@ -21405,7 +21692,7 @@ var TextFieldComponent = React59.forwardRef(
       "relative flex flex-col flex-1 min-w-0 h-full",
       paddingStart,
       paddingEnd,
-      isInToolbar ? "justify-center" : variant === "filled" ? resolvedDense ? "pt-5 pb-2" : "pt-6 pb-2" : resolvedDense ? "py-3" : "py-4"
+      isInToolbar || !resolvedLabel ? "justify-center" : variant === "filled" ? resolvedDense ? "pt-5 pb-2" : "pt-6 pb-2" : resolvedDense ? "py-3" : "py-4"
     );
     const wrapperClass = cn(
       "group/tf inline-flex flex-col",
@@ -22314,6 +22601,8 @@ function MD3ThemeProvider({
   sourceColor: initialSourceColor = "#6750A4",
   defaultMode = "light",
   persistToLocalStorage = false,
+  variant = "expressive",
+  contrastLevel = 0,
   typography: typographyProp,
   fontFamily,
   fontVariationAxes,
@@ -22322,6 +22611,17 @@ function MD3ThemeProvider({
   const [sourceColor, setSourceColor] = useState(initialSourceColor);
   const [mode, setMode] = useState(defaultMode);
   const [isHydrated, setIsHydrated] = useState(!persistToLocalStorage);
+  const [systemMode, setSystemMode] = useState("light");
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const updateSystemMode = () => {
+      setSystemMode(mediaQuery.matches ? "dark" : "light");
+    };
+    updateSystemMode();
+    mediaQuery.addEventListener("change", updateSystemMode);
+    return () => mediaQuery.removeEventListener("change", updateSystemMode);
+  }, []);
   useEffect(() => {
     if (!persistToLocalStorage) return;
     const savedColor = localStorage.getItem(STORAGE_KEY_COLOR);
@@ -22333,25 +22633,37 @@ function MD3ThemeProvider({
       setMode(savedMode);
     setIsHydrated(true);
   }, [persistToLocalStorage]);
+  const effectiveMode = mode === "system" ? systemMode : mode;
   useEffect(() => {
     if (!isHydrated) return;
-    applyTheme(sourceColor, mode);
+    applyTheme(sourceColor, effectiveMode, document.documentElement, {
+      variant,
+      contrastLevel
+    });
     if (persistToLocalStorage) {
       localStorage.setItem(STORAGE_KEY_COLOR, sourceColor);
       localStorage.setItem(STORAGE_KEY_MODE, mode);
     }
-  }, [sourceColor, mode, persistToLocalStorage, isHydrated]);
-  useEffect(() => {
-    if (mode !== "system" || typeof window === "undefined") return;
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = () => applyTheme(sourceColor, "system");
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
-  }, [mode, sourceColor]);
-  const effectiveMode = resolveMode(mode);
+  }, [
+    sourceColor,
+    mode,
+    effectiveMode,
+    persistToLocalStorage,
+    isHydrated,
+    variant,
+    contrastLevel
+  ]);
   const themeValue = useMemo(
-    () => ({ sourceColor, setSourceColor, mode, setMode, effectiveMode }),
-    [sourceColor, mode, effectiveMode]
+    () => ({
+      sourceColor,
+      setSourceColor,
+      mode,
+      setMode,
+      effectiveMode,
+      variant,
+      contrastLevel
+    }),
+    [sourceColor, mode, effectiveMode, variant, contrastLevel]
   );
   const typographyValue = useMemo(() => {
     if (typographyProp) return typographyProp;
@@ -22464,6 +22776,47 @@ var vibrantFloatingToolbarColors = {
   fabContainerColor: "var(--md-sys-color-tertiary-container)",
   fabContentColor: "var(--md-sys-color-on-tertiary-container)"
 };
+var surfaceContainerHighFloatingToolbarColors = {
+  toolbarContainerColor: "var(--md-sys-color-surface-container-high)",
+  toolbarContentColor: "var(--md-sys-color-on-surface)",
+  fabContainerColor: "var(--md-sys-color-secondary-container)",
+  fabContentColor: "var(--md-sys-color-on-secondary-container)"
+};
+var surfaceContainerHighestFloatingToolbarColors = {
+  toolbarContainerColor: "var(--md-sys-color-surface-container-highest)",
+  toolbarContentColor: "var(--md-sys-color-on-surface)",
+  fabContainerColor: "var(--md-sys-color-secondary-container)",
+  fabContentColor: "var(--md-sys-color-on-secondary-container)"
+};
+var tertiaryContainerFloatingToolbarColors = {
+  toolbarContainerColor: "var(--md-sys-color-tertiary-container)",
+  toolbarContentColor: "var(--md-sys-color-on-tertiary-container)",
+  fabContainerColor: "var(--md-sys-color-primary-container)",
+  fabContentColor: "var(--md-sys-color-on-primary-container)"
+};
+var xrFloatingToolbarColors = {
+  toolbarContainerColor: "color-mix(in srgb, var(--md-sys-color-surface-container-high) 80%, transparent)",
+  toolbarContentColor: "var(--md-sys-color-on-surface)",
+  fabContainerColor: "color-mix(in srgb, var(--md-sys-color-secondary-container) 85%, transparent)",
+  fabContentColor: "var(--md-sys-color-on-secondary-container)"
+};
+function getToolbarColors(variant = "standard", customColors) {
+  if (customColors) return customColors;
+  switch (variant) {
+    case "vibrant":
+      return vibrantFloatingToolbarColors;
+    case "surface-high":
+      return surfaceContainerHighFloatingToolbarColors;
+    case "surface-highest":
+      return surfaceContainerHighestFloatingToolbarColors;
+    case "tertiary":
+      return tertiaryContainerFloatingToolbarColors;
+    case "xr":
+      return xrFloatingToolbarColors;
+    default:
+      return standardFloatingToolbarColors;
+  }
+}
 var BottomDockedToolbar = React59.forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -22493,7 +22846,7 @@ var BottomDockedToolbar = React59.forwardRef(
       "className",
       "aria-label"
     ]);
-    const colors = customColors || (variant === "vibrant" ? vibrantFloatingToolbarColors : standardFloatingToolbarColors);
+    const colors = getToolbarColors(variant, customColors);
     const { scrollY } = useScroll(
       scrollContainerRef ? { container: scrollContainerRef } : void 0
     );
@@ -22522,6 +22875,7 @@ var BottomDockedToolbar = React59.forwardRef(
       full: "rounded-full"
     };
     const justifyClass = justify === "center" ? "justify-center gap-4" : "justify-between";
+    const isXr = variant === "xr";
     return /* @__PURE__ */ jsx(ToolbarContext.Provider, { value: { orientation: "horizontal" }, children: /* @__PURE__ */ jsxs(
       m.div,
       __spreadProps(__spreadValues({
@@ -22542,11 +22896,12 @@ var BottomDockedToolbar = React59.forwardRef(
           paddingRight: paddingX
         }),
         className: cn(
-          "fixed bottom-0 left-0 right-0 w-full z-40",
+          "fixed bottom-0 left-0 right-0 w-full z-40 text-(--toolbar-color) [&_.text-m3-on-surface-variant]:text-current",
           "flex items-center h-16",
           justifyClass,
           SHAPE_CLASSES[shape],
-          "shadow-[0_-1px_3px_rgba(0,0,0,0.1)] pointer-events-auto",
+          isXr ? "backdrop-blur-md border-t border-white/10 shadow-lg" : "shadow-[0_-1px_3px_rgba(0,0,0,0.1)]",
+          "pointer-events-auto",
           className
         )
       }, props), {
@@ -22593,6 +22948,13 @@ var ToolbarIconButtonTokens = {
   /** Icon size in dp — larger than standard 24dp to fill the 48dp button properly */
   IconSize: 28
 };
+var ToolbarToggleButtonTokens = {
+  Height: 48,
+  MinWidth: 95,
+  IconSize: 24,
+  PaddingX: 16,
+  Gap: 8
+};
 var ALIGNMENT_CLASS = {
   start: "justify-start",
   center: "justify-center",
@@ -22651,7 +23013,8 @@ var FloatingToolbarBase = React59.forwardRef(
     var _b = _a, {
       expanded,
       orientation = "horizontal",
-      colors = standardFloatingToolbarColors,
+      variant = "standard",
+      colors: customColors,
       shape = "full",
       contentPadding,
       scrollBehavior,
@@ -22669,6 +23032,7 @@ var FloatingToolbarBase = React59.forwardRef(
     } = _b, props = __objRest(_b, [
       "expanded",
       "orientation",
+      "variant",
       "colors",
       "shape",
       "contentPadding",
@@ -22685,6 +23049,7 @@ var FloatingToolbarBase = React59.forwardRef(
       "style",
       "aria-label"
     ]);
+    const colors = getToolbarColors(variant, customColors);
     const isHorizontal = orientation === "horizontal";
     const isStringPadding = typeof contentPadding === "string";
     const cssVars = __spreadValues(__spreadValues({
@@ -22693,7 +23058,8 @@ var FloatingToolbarBase = React59.forwardRef(
       "--toolbar-size": `${FloatingToolbarTokens.ContainerHeight}px`
     }, isStringPadding ? {} : contentPadding), style);
     const isScrolledOff = scrollBehavior && scrollBehavior.offset < 0;
-    const shadowClass = expanded ? "shadow-md" : "shadow-sm";
+    const isXr = variant === "xr";
+    const shadowClass = isXr ? "shadow-lg border border-white/10 backdrop-blur-md" : expanded ? "shadow-md" : "shadow-sm";
     const containerShapeClass = shape === "full" ? "rounded-full" : "rounded-2xl";
     const leadingVariants = buildSlotVariants(
       isHorizontal ? "-100%" : 0,
@@ -22710,7 +23076,7 @@ var FloatingToolbarBase = React59.forwardRef(
       scrollBehavior,
       disableScrollTranslation
     );
-    return /* @__PURE__ */ jsx(ToolbarContext.Provider, { value: { orientation }, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(ToolbarContext.Provider, { value: { orientation, itemClassName }, children: /* @__PURE__ */ jsx(
       m.div,
       {
         ref,
@@ -22732,8 +23098,8 @@ var FloatingToolbarBase = React59.forwardRef(
               color: "var(--toolbar-color)"
             }),
             className: cn(
-              "flex pointer-events-auto relative",
-              isHorizontal ? "max-w-[90vw] h-(--toolbar-size)" : "max-h-[90vh] w-(--toolbar-size) h-fit",
+              "flex pointer-events-auto relative text-(--toolbar-color) [&_.text-m3-on-surface-variant]:text-current",
+              isHorizontal ? "max-w-[min(90vw,100%)] h-(--toolbar-size)" : "max-h-[min(90vh,100%)] w-(--toolbar-size) h-fit",
               containerShapeClass,
               shadowClass,
               className
@@ -22750,11 +23116,11 @@ var FloatingToolbarBase = React59.forwardRef(
                   "div",
                   {
                     className: cn(
-                      "flex items-center gap-1 min-w-0 min-h-0",
+                      "flex items-center min-w-0 min-h-0",
                       isHorizontal ? "flex-row h-full" : "flex-col w-full",
-                      isStringPadding ? contentPadding : isHorizontal ? "px-4" : "py-6"
+                      isStringPadding ? contentPadding : isHorizontal ? "px-2" : "py-2"
                     ),
-                    style: isStringPadding ? void 0 : contentPadding,
+                    style: __spreadValues({ gap: itemGap }, isStringPadding ? {} : contentPadding),
                     children: [
                       /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: expanded && startContent && /* @__PURE__ */ jsx(
                         m.div,
@@ -22764,9 +23130,10 @@ var FloatingToolbarBase = React59.forwardRef(
                           animate: "visible",
                           exit: "hidden",
                           className: cn(
-                            "flex shrink-0 overflow-hidden",
+                            "flex shrink-0 items-center overflow-hidden",
                             isHorizontal ? "flex-row" : "flex-col"
                           ),
+                          style: { gap: itemGap },
                           children: processNodes(startContent)
                         },
                         "start"
@@ -22791,9 +23158,10 @@ var FloatingToolbarBase = React59.forwardRef(
                           animate: "visible",
                           exit: "hidden",
                           className: cn(
-                            "flex shrink-0 overflow-hidden",
+                            "flex shrink-0 items-center overflow-hidden",
                             isHorizontal ? "flex-row" : "flex-col"
                           ),
+                          style: { gap: itemGap },
                           children: processNodes(endContent)
                         },
                         "end"
@@ -22819,7 +23187,8 @@ var FloatingToolbarWithFabBase = React59.forwardRef(
     var _b = _a, {
       expanded,
       orientation = "horizontal",
-      colors = standardFloatingToolbarColors,
+      variant = "standard",
+      colors: customColors,
       floatingActionButton,
       fabPosition = orientation === "horizontal" ? "end" : "bottom",
       animationDuration = 0.3,
@@ -22830,6 +23199,7 @@ var FloatingToolbarWithFabBase = React59.forwardRef(
     } = _b, props = __objRest(_b, [
       "expanded",
       "orientation",
+      "variant",
       "colors",
       "floatingActionButton",
       "fabPosition",
@@ -22839,6 +23209,7 @@ var FloatingToolbarWithFabBase = React59.forwardRef(
       "className",
       "style"
     ]);
+    const colors = getToolbarColors(variant, customColors);
     const isHorizontal = orientation === "horizontal";
     const effectiveExpanded = expanded && (!scrollBehavior || scrollBehavior.isExpanded);
     const isFabBefore = fabPosition === "start" || fabPosition === "top";
@@ -22916,7 +23287,8 @@ var FloatingToolbarWithFabBase = React59.forwardRef(
                   expanded,
                   colors,
                   disableScrollTranslation: true,
-                  disableLayoutAnimation: true
+                  disableLayoutAnimation: true,
+                  className: className ? cn("h-full", className) : void 0
                 }, props)
               ) : /* @__PURE__ */ jsx(
                 VerticalFloatingToolbar,
@@ -22924,7 +23296,8 @@ var FloatingToolbarWithFabBase = React59.forwardRef(
                   expanded,
                   colors,
                   disableScrollTranslation: true,
-                  disableLayoutAnimation: true
+                  disableLayoutAnimation: true,
+                  className: className ? cn("w-full", className) : void 0
                 }, props)
               )
             },
@@ -22954,7 +23327,7 @@ var ToolbarDivider = ({
       "aria-orientation": isHorizontalToolbar ? "vertical" : "horizontal",
       className: cn(
         "shrink-0 bg-current opacity-30 border-none",
-        isHorizontalToolbar ? "w-px h-8 self-center mx-2" : "h-px w-8 self-center my-2",
+        isHorizontalToolbar ? "w-px h-8 self-center mx-1" : "h-px w-8 self-center my-1",
         className
       ),
       style: {
@@ -22977,20 +23350,47 @@ var VARIANT_TO_COLOR_STYLE = {
 };
 var ToolbarIconButton = React59.forwardRef(
   (_a, ref) => {
-    var _b = _a, { emphasis = "standard", toolbarSize = "default", className } = _b, props = __objRest(_b, ["emphasis", "toolbarSize", "className"]);
+    var _b = _a, {
+      emphasis = "standard",
+      toolbarSize = "default",
+      selected,
+      asChild,
+      className
+    } = _b, props = __objRest(_b, [
+      "emphasis",
+      "toolbarSize",
+      "selected",
+      "asChild",
+      "className"
+    ]);
+    const context = useToolbarContext();
     const widthClass = TOOLBAR_ICON_BUTTON_WIDTH[toolbarSize];
     const colorStyle = VARIANT_TO_COLOR_STYLE[emphasis];
+    const iconButtonProps = selected !== void 0 ? {
+      variant: "toggle",
+      selected: Boolean(selected)
+    } : {
+      variant: "default"
+    };
     return /* @__PURE__ */ jsx(
       IconButton,
-      __spreadValues({
+      __spreadValues(__spreadProps(__spreadValues({
         ref,
-        variant: "default",
+        asChild,
         colorStyle,
         size: "md",
         shape: "round",
-        iconSize: ToolbarIconButtonTokens.IconSize,
-        className: cn("h-[48px]", widthClass, className)
-      }, props)
+        iconSize: ToolbarIconButtonTokens.IconSize
+      }, iconButtonProps), {
+        className: cn(
+          "h-[48px]",
+          widthClass,
+          emphasis === "standard" && !selected && "text-current hover:bg-current/8 active:bg-current/12",
+          emphasis === "standard" && selected && "bg-current/16 text-current hover:bg-current/20 active:bg-current/24",
+          context == null ? void 0 : context.itemClassName,
+          className
+        )
+      }), props)
     );
   }
 );
@@ -23061,6 +23461,195 @@ function useFloatingToolbarScrollBehavior(options = {}) {
     exitDirection
   };
 }
+var MOTION_PROP_KEYS2 = [
+  "animate",
+  "exit",
+  "initial",
+  "transition",
+  "variants",
+  "whileHover",
+  "whileTap",
+  "whileFocus",
+  "whileDrag",
+  "whileInView",
+  "onAnimationStart",
+  "onAnimationComplete",
+  "onUpdate",
+  "onDragStart",
+  "onDragEnd",
+  "onDrag",
+  "onDirectionLock",
+  "onDragTransitionEnd",
+  "layout",
+  "layoutId",
+  "onLayoutAnimationComplete"
+];
+var ToolbarToggleButton = React59.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      emphasis = "standard",
+      selected = false,
+      icon,
+      children,
+      pressScale = 0.95,
+      pressBounceOffset = 6,
+      ripple = true,
+      asChild = false,
+      className,
+      type = "button",
+      disabled,
+      onPointerDown: onPointerDownProp
+    } = _b, props = __objRest(_b, [
+      "emphasis",
+      "selected",
+      "icon",
+      "children",
+      "pressScale",
+      "pressBounceOffset",
+      "ripple",
+      "asChild",
+      "className",
+      "type",
+      "disabled",
+      "onPointerDown"
+    ]);
+    const context = useToolbarContext();
+    const {
+      ripples,
+      onPointerDown: handleRipplePointerDown,
+      removeRipple
+    } = useRippleState({
+      disabled: Boolean(disabled) || !ripple
+    });
+    const handlePointerDown = React59.useCallback(
+      (e) => {
+        if (!disabled && ripple) {
+          handleRipplePointerDown(e);
+        }
+        onPointerDownProp == null ? void 0 : onPointerDownProp(e);
+      },
+      [disabled, ripple, handleRipplePointerDown, onPointerDownProp]
+    );
+    const baseClasses = "relative overflow-hidden inline-flex items-center justify-center min-w-[95px] h-[48px] px-4 rounded-full text-sm font-medium transition-colors select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/40 disabled:pointer-events-none disabled:opacity-38";
+    const variantClasses = {
+      standard: selected ? "bg-current/16 text-current hover:bg-current/20 active:bg-current/24" : "bg-transparent text-current hover:bg-current/8 active:bg-current/12",
+      tonal: selected ? "bg-m3-secondary-container text-m3-on-secondary-container hover:shadow-sm" : "bg-m3-surface-container-high text-m3-on-surface hover:bg-m3-surface-container-highest",
+      filled: selected ? "bg-m3-primary text-m3-on-primary hover:shadow-sm" : "bg-m3-surface-container-highest text-m3-on-surface hover:bg-m3-surface-container-high"
+    };
+    const combinedClassName = cn(
+      baseClasses,
+      variantClasses[emphasis],
+      context == null ? void 0 : context.itemClassName,
+      className
+    );
+    const whileTapConfig = React59.useMemo(
+      () => ({
+        scale: pressScale,
+        x: pressBounceOffset ? [
+          0,
+          -pressBounceOffset,
+          pressBounceOffset,
+          -pressBounceOffset / 2,
+          pressBounceOffset / 2,
+          0
+        ] : 0
+      }),
+      [pressScale, pressBounceOffset]
+    );
+    const transitionConfig = React59.useMemo(
+      () => ({
+        scale: FAST_SPATIAL_SPRING,
+        x: {
+          duration: 0.35,
+          ease: "easeInOut"
+        }
+      }),
+      []
+    );
+    const mainContent = /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center justify-center h-full gap-2", children: [
+      icon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "shrink-0 inline-flex items-center justify-center",
+          style: {
+            width: ToolbarToggleButtonTokens.IconSize,
+            height: ToolbarToggleButtonTokens.IconSize
+          },
+          children: icon
+        }
+      ),
+      children && (typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx("span", { children }) : children)
+    ] });
+    if (asChild) {
+      const child = React59.Children.only(children);
+      const childContent = child.props.children;
+      const innerChildContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+        ripple && /* @__PURE__ */ jsx(
+          Ripple,
+          {
+            ripples,
+            onRippleDone: removeRipple,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center h-full gap-2", children: icon ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "shrink-0 inline-flex items-center justify-center",
+              style: {
+                width: ToolbarToggleButtonTokens.IconSize,
+                height: ToolbarToggleButtonTokens.IconSize
+              },
+              children: icon
+            }
+          ),
+          typeof childContent === "string" || typeof childContent === "number" ? /* @__PURE__ */ jsx("span", { children: childContent }) : childContent
+        ] }) : childContent })
+      ] });
+      const strippedProps = __spreadValues({}, props);
+      for (const key of MOTION_PROP_KEYS2) delete strippedProps[key];
+      delete strippedProps.children;
+      return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
+        Slot,
+        __spreadProps(__spreadValues({
+          ref,
+          "aria-pressed": selected,
+          className: combinedClassName,
+          onPointerDown: handlePointerDown
+        }, strippedProps), {
+          children: React59.cloneElement(child, { children: innerChildContent })
+        })
+      ) });
+    }
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
+      m.button,
+      __spreadProps(__spreadValues({
+        ref,
+        type,
+        "aria-pressed": selected,
+        disabled,
+        whileTap: whileTapConfig,
+        transition: transitionConfig,
+        onPointerDown: handlePointerDown,
+        className: combinedClassName
+      }, props), {
+        children: [
+          ripple && /* @__PURE__ */ jsx(
+            Ripple,
+            {
+              ripples,
+              onRippleDone: removeRipple,
+              disabled
+            }
+          ),
+          mainContent
+        ]
+      })
+    ) });
+  }
+);
+ToolbarToggleButton.displayName = "ToolbarToggleButton";
 
 // src/ui/tooltip/tooltip.tokens.ts
 var TooltipTokens = {
@@ -23663,6 +24252,6 @@ function TooltipBox({
   ] });
 }
 
-export { ANGLE_EPSILON, APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, AppBarColumn, AppBarOverflowIndicator, AppBarRow, AppBarTokens, BUTTON_COLOR_TOKENS, BUTTON_SIZE_TOKENS, Badge, BadgedBox, BottomAppBar, BottomDockedToolbar, BottomSheet, BottomSheetModal, Button, ButtonGroup, CHECK_ICON_VARIANTS, Card, Checkbox, Chip, CodeBlock, ContextMenu, ContextMenuContent, ContextMenuTrigger, Cubic, DISTANCE_EPSILON, DIVIDER_COLOR, DIVIDER_PADDING, DP_CLASSES, DP_COLORS, DP_SHAPE, DP_SIZE, DatePicker, DatePickerDialog, DatePickerInput, DateRangePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogFullScreenContent, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DockedToolbar, DragHandle, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, ElevatedSplitButtonLeading, ElevatedSplitButtonTrailing, ElevatedSplitButtonTrailingUncheckable, ExtendedFAB, FAB, FABMenu, FABMenuItem, FABPosition, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, FLOAT_PI, FilledSplitButtonLeading, FilledSplitButtonTrailing, FilledSplitButtonTrailingUncheckable, GROUP_SHAPES, HorizontalFloatingToolbar, HorizontalFloatingToolbarWithFab, ITEM_SHAPE_CLASSES, Icon, IconButton, LIST_TOKENS, LargeFlexibleAppBar, List, ListContext, ListDivider, ListItem, LoadingIndicator, MD3CornerRadius, MD3Shapes, MD3ThemeProvider, MD3_EXPRESSIVE_FONT_VARIATION, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MaterialSymbolsPreconnect, MeasuredPolygon, MediumFlexibleAppBar, Menu, MenuContent, MenuDivider, MenuGroup, MenuItem, MenuProvider, MenuTrigger, Morph, MutableCubic, NavigationBar, NavigationBarItem, NavigationRail, NavigationRailItem, OutlinedSplitButtonLeading, OutlinedSplitButtonTrailing, OutlinedSplitButtonTrailingUncheckable, PlainTooltip, ProgressIndicator, RadioButton, RadioGroup, RangeSlider, RichTooltip, Ripple, RoundedPolygon, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, Scrim, ScrollArea, ScrollAreaScrollbar, Search, SearchAppBar, SearchBar, SearchTokens, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, ShapeIcon, ShapeMedia, ShapeMediaServer, ShapeSvg, SideSheet, SideSheetModal, Slider, SliderColors, SliderTokens, SmallAppBar, Snackbar, SnackbarHost, SnackbarProvider, SplitButtonLayout, SplitButtonLeading, SplitButtonTrailing, SplitButtonTrailingUncheckable, SubMenu, Switch, SwitchColors, SwitchTokens, TP_CLASSES, TP_COLORS, TP_SHAPE, TP_SIZE, Tab, TableOfContents, Tabs, TabsColors, TabsContent, TabsList, TabsTokens, Text, TextField, TimeInput, TimePicker, TimePickerDialog, ToggleFAB, TonalSplitButtonLeading, TonalSplitButtonTrailing, TonalSplitButtonTrailingUncheckable, ToolbarDivider, ToolbarDividerTokens, ToolbarIconButton, ToolbarIconButtonTokens, TooltipBox, TooltipCaretShape, TooltipTokens, TriStateCheckbox, TypeScaleTokens, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, TypographyTokens, UNROUNDED, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, VerticalMenuDivider, VerticalMenuGroup, addPoints, appBarTypography, applyTheme, buildWavePath, circle, clockwise, cn, convex, cornerFeature, cornerRounding, createDoubleMapper, directionVector, distance, distanceSquared, dividePoint, dotProduct, edgeFeature, featureMapper, generateM3Theme, getDirection, getDistance, getDistanceSquared, getExpressiveShape, getListItemHeight, interpolate, interpolatePath, lerpPoint, pill, pillStar, point, positiveModulo, radialToCartesian, rectangle, resolveMode, rotate90, scalePoint, shouldTopAlign, square, standardFloatingToolbarColors, star, subtractPoints, toClipPath, toSvgPath, transformFeature, transformPoint, useAppBarScroll, useBottomSheet, useRipple as useDOMRipple, useDatePickerState, useDateRangePickerState, useFloatingToolbarScrollBehavior, useListContext, useMediaQuery, useMenuContext, useRipple2 as useRipple, useRippleState, useSearchKeyboard, useShapeMorph, useSnackbar, useSnackbarState, useTheme, useThemeMode, useTimePickerState, useTooltipPosition, useTooltipState, useTypography, vibrantFloatingToolbarColors };
+export { ANGLE_EPSILON, APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, AppBarColumn, AppBarOverflowIndicator, AppBarRow, AppBarTokens, BUTTON_COLOR_TOKENS, BUTTON_SIZE_TOKENS, Badge, BadgedBox, BottomAppBar, BottomDockedToolbar, BottomSheet, BottomSheetModal, Button, ButtonGroup, CHECK_ICON_VARIANTS, Card, Checkbox, Chip, CodeBlock, ContextMenu, ContextMenuContent, ContextMenuTrigger, Cubic, DISTANCE_EPSILON, DIVIDER_COLOR, DIVIDER_PADDING, DP_CLASSES, DP_COLORS, DP_SHAPE, DP_SIZE, DatePicker, DatePickerDialog, DatePickerInput, DateRangePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogFullScreenContent, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DockedToolbar, DragHandle, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, ElevatedSplitButtonLeading, ElevatedSplitButtonTrailing, ElevatedSplitButtonTrailingUncheckable, ExtendedFAB, FAB, FABMenu, FABMenuItem, FABPosition, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, FLOAT_PI, FilledSplitButtonLeading, FilledSplitButtonTrailing, FilledSplitButtonTrailingUncheckable, GROUP_SHAPES, HorizontalFloatingToolbar, HorizontalFloatingToolbarWithFab, ITEM_SHAPE_CLASSES, Icon, IconButton, LIST_TOKENS, LargeFlexibleAppBar, List, ListContext, ListDivider, ListItem, LoadingIndicator, MD3CornerRadius, MD3Shapes, MD3ThemeProvider, MD3_EXPRESSIVE_FONT_VARIATION, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MaterialSymbolsPreconnect, MeasuredPolygon, MediumFlexibleAppBar, Menu, MenuContent, MenuDivider, MenuGroup, MenuItem, MenuProvider, MenuTrigger, Morph, MutableCubic, NavigationBar, NavigationBarItem, NavigationRail, NavigationRailItem, OutlinedSplitButtonLeading, OutlinedSplitButtonTrailing, OutlinedSplitButtonTrailingUncheckable, PlainTooltip, ProgressIndicator, RadioButton, RadioGroup, RangeSlider, RichTooltip, Ripple, RoundedPolygon, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, Scrim, ScrollArea, ScrollAreaScrollbar, Search, SearchAppBar, SearchBar, SearchTokens, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, ShapeIcon, ShapeMedia, ShapeMediaServer, ShapeSvg, SideSheet, SideSheetModal, Slider, SliderColors, SliderTokens, SmallAppBar, Snackbar, SnackbarHost, SnackbarProvider, SplitButtonLayout, SplitButtonLeading, SplitButtonTrailing, SplitButtonTrailingUncheckable, SubMenu, Switch, SwitchColors, SwitchTokens, TP_CLASSES, TP_COLORS, TP_SHAPE, TP_SIZE, Tab, TableOfContents, Tabs, TabsColors, TabsContent, TabsList, TabsTokens, Text, TextField, TimeInput, TimePicker, TimePickerDialog, ToggleFAB, TonalSplitButtonLeading, TonalSplitButtonTrailing, TonalSplitButtonTrailingUncheckable, ToolbarDivider, ToolbarDividerTokens, ToolbarIconButton, ToolbarIconButtonTokens, ToolbarToggleButton, ToolbarToggleButtonTokens, TooltipBox, TooltipCaretShape, TooltipTokens, TriStateCheckbox, TypeScaleTokens, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, TypographyTokens, UNROUNDED, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, VerticalMenuDivider, VerticalMenuGroup, addPoints, appBarTypography, applyTheme, buildWavePath, circle, clockwise, cn, convex, cornerFeature, cornerRounding, createDoubleMapper, createMd3ExpressiveTheme, directionVector, distance, distanceSquared, dividePoint, dotProduct, edgeFeature, featureMapper, generateM3Theme, getDirection, getDistance, getDistanceSquared, getExpressiveShape, getListItemHeight, getToolbarColors, interpolate, interpolatePath, lerpPoint, pill, pillStar, point, positiveModulo, radialToCartesian, rectangle, resolveMode, rotate90, scalePoint, shouldTopAlign, square, standardFloatingToolbarColors, star, subtractPoints, surfaceContainerHighFloatingToolbarColors, surfaceContainerHighestFloatingToolbarColors, tertiaryContainerFloatingToolbarColors, toClipPath, toSvgPath, transformFeature, transformPoint, useAppBarScroll, useBottomSheet, useRipple as useDOMRipple, useDatePickerState, useDateRangePickerState, useFloatingToolbarScrollBehavior, useListContext, useMediaQuery, useMenuContext, useRipple2 as useRipple, useRippleState, useSearchKeyboard, useShapeMorph, useSnackbar, useSnackbarState, useTheme, useThemeMode, useTimePickerState, useTooltipPosition, useTooltipState, useTypography, vibrantFloatingToolbarColors, xrFloatingToolbarColors };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map