@tinybigui/react 0.22.0 → 0.24.0

package/dist/index.cjs

@@ -9,8 +9,8 @@ var classVarianceAuthority = require('class-variance-authority');
 var reactAria = require('react-aria');
 var utils = require('@react-aria/utils');
 var reactStately = require('react-stately');
-var reactAriaComponents = require('react-aria-components');
 var reactDom = require('react-dom');
+var reactAriaComponents = require('react-aria-components');
 var date = require('@internationalized/date');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -472,6 +472,10 @@ var buttonVariants = classVarianceAuthority.cva(
        *   Filled/Tonal  hover→level-1, focus/pressed→level-0
        *   Elevated      base→level-1, hover→level-2, focus/pressed→level-1
        *   Outlined/Text no elevation
+       *
+       * Self-targeting `data-[x]:` is used for elevation because these classes
+       * sit on the root element (the group host) — group-data descendant
+       * selectors cannot match an element against itself.
        */
       variant: {
         /**
@@ -480,17 +484,17 @@ var buttonVariants = classVarianceAuthority.cva(
          * Elevation: 0 base → 1 hover → 0 focus → 0 pressed
          */
         filled: [
-          "bg-primary text-on-primary shadow-none",
+          "text-on-primary shadow-none",
           // Hover: gains level-1 elevation
-          "group-data-[hovered]/button:shadow-elevation-1",
+          "data-[hovered]:shadow-elevation-1",
           // Focus/pressed: shadow must explicitly return to level-0
           // (doubled attribute selector → higher specificity than hover)
-          "group-data-[focus-visible]/button:shadow-none",
-          "group-data-[pressed]/button:group-data-[pressed]/button:shadow-none",
-          // Disabled overrides
-          "group-data-[disabled]/button:bg-on-surface/12",
-          "group-data-[disabled]/button:text-on-surface/38",
-          "group-data-[disabled]/button:shadow-none"
+          "data-[focus-visible]:data-[focus-visible]:shadow-none",
+          "data-[pressed]:data-[pressed]:data-[pressed]:shadow-none",
+          // Disabled overrides — root owns text color + shadow only;
+          // disabled bg override lives on buttonContainerVariants (filled variant)
+          "data-[disabled]:text-on-surface/38",
+          "data-[disabled]:shadow-none"
         ],
         /**
          * Outlined — medium emphasis. Transparent with border.
@@ -498,10 +502,10 @@ var buttonVariants = classVarianceAuthority.cva(
          * Elevation: always 0
          */
         outlined: [
-          "bg-transparent border border-outline text-primary",
+          "border border-outline text-primary",
           // Disabled overrides
-          "group-data-[disabled]/button:border-on-surface/12",
-          "group-data-[disabled]/button:text-on-surface/38"
+          "data-[disabled]:border-on-surface/12",
+          "data-[disabled]:text-on-surface/38"
         ],
         /**
          * Tonal — secondary emphasis.
@@ -509,16 +513,15 @@ var buttonVariants = classVarianceAuthority.cva(
          * Elevation: 0 base → 1 hover → 0 focus → 0 pressed
          */
         tonal: [
-          "bg-secondary-container text-on-secondary-container shadow-none",
+          "text-on-secondary-container shadow-none",
           // Hover: gains level-1 elevation (same as filled)
-          "group-data-[hovered]/button:shadow-elevation-1",
+          "data-[hovered]:shadow-elevation-1",
           // Focus/pressed: return to level-0
-          "group-data-[focus-visible]/button:shadow-none",
-          "group-data-[pressed]/button:group-data-[pressed]/button:shadow-none",
+          "data-[focus-visible]:data-[focus-visible]:shadow-none",
+          "data-[pressed]:data-[pressed]:data-[pressed]:shadow-none",
           // Disabled overrides
-          "group-data-[disabled]/button:bg-on-surface/12",
-          "group-data-[disabled]/button:text-on-surface/38",
-          "group-data-[disabled]/button:shadow-none"
+          "data-[disabled]:text-on-surface/38",
+          "data-[disabled]:shadow-none"
         ],
         /**
          * Elevated — separation via shadow.
@@ -526,17 +529,16 @@ var buttonVariants = classVarianceAuthority.cva(
          * Elevation: 1 base → 2 hover → 1 focus → 1 pressed
          */
         elevated: [
-          "bg-surface-container-low text-primary shadow-elevation-1",
+          "text-primary shadow-elevation-1",
           // Hover: gains extra elevation
-          "group-data-[hovered]/button:shadow-elevation-2",
+          "data-[hovered]:shadow-elevation-2",
           // Focus/pressed: return to base level-1
           // (doubled selector wins over single hover selector at same cascade position)
-          "group-data-[focus-visible]/button:shadow-elevation-1",
-          "group-data-[pressed]/button:group-data-[pressed]/button:shadow-elevation-1",
+          "data-[focus-visible]:data-[focus-visible]:shadow-elevation-1",
+          "data-[pressed]:data-[pressed]:data-[pressed]:shadow-elevation-1",
           // Disabled overrides
-          "group-data-[disabled]/button:bg-on-surface/12",
-          "group-data-[disabled]/button:text-on-surface/38",
-          "group-data-[disabled]/button:shadow-none"
+          "data-[disabled]:text-on-surface/38",
+          "data-[disabled]:shadow-none"
         ],
         /**
          * Text — lowest emphasis.
@@ -544,9 +546,9 @@ var buttonVariants = classVarianceAuthority.cva(
          * Elevation: always 0
          */
         text: [
-          "bg-transparent text-primary",
+          "text-primary",
           // Disabled overrides
-          "group-data-[disabled]/button:text-on-surface/38"
+          "data-[disabled]:text-on-surface/38"
         ]
       },
       /**
@@ -584,6 +586,29 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
+var buttonContainerVariants = classVarianceAuthority.cva(
+  [
+    "absolute inset-0 rounded-[inherit] pointer-events-none",
+    // Effects transition for background-color — no overshoot
+    "transition-[background-color] duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
+  ],
+  {
+    variants: {
+      variant: {
+        // MD3 disabled: filled containers replace bg with on-surface/12.
+        // group-data descendant selector targets this child span (not the root host).
+        filled: "bg-primary group-data-[disabled]/button:bg-on-surface/12",
+        // outlined/text: container stays transparent when disabled — only border + label fade.
+        outlined: "bg-transparent",
+        // MD3 disabled: tonal and elevated containers also replace bg with on-surface/12.
+        tonal: "bg-secondary-container group-data-[disabled]/button:bg-on-surface/12",
+        elevated: "bg-surface-container-low group-data-[disabled]/button:bg-on-surface/12",
+        text: "bg-transparent"
+      }
+    },
+    defaultVariants: { variant: "filled" }
+  }
+);
 var buttonStateLayerVariants = classVarianceAuthority.cva(
   [
     "absolute inset-0 rounded-[inherit] overflow-hidden pointer-events-none opacity-0",
@@ -886,6 +911,7 @@ var Button = React.forwardRef(
           className
         ),
         children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(buttonContainerVariants({ variant })), "aria-hidden": "true" }),
           ripples,
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(buttonStateLayerVariants({ variant })), "aria-hidden": "true" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(buttonFocusRingVariants()), "aria-hidden": "true" }),
@@ -4393,7 +4419,51 @@ var NavigationBarItem = React.forwardRef(
 );
 NavigationBarItem.displayName = "NavigationBarItem";
 var DrawerContext = React.createContext(null);
-var DrawerIconOnlyContext = React.createContext(false);
+var ModalDrawerPanel = ({
+  ariaLabel,
+  onClose,
+  className,
+  animationState,
+  getAnimationClassName,
+  onTransitionEnd,
+  forwardedRef,
+  children
+}) => {
+  const panelRef = React.useRef(null);
+  reactAria.usePreventScroll();
+  const { dialogProps } = reactAria.useDialog(
+    { "aria-label": ariaLabel },
+    panelRef
+  );
+  const { overlayProps } = reactAria.useOverlay(
+    { isOpen: true, onClose, isDismissable: true, shouldCloseOnBlur: false },
+    panelRef
+  );
+  const setRef = React.useCallback(
+    (node) => {
+      panelRef.current = node;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else if (forwardedRef !== null && forwardedRef !== void 0) {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...utils.mergeProps(overlayProps, dialogProps),
+      ref: setRef,
+      "aria-modal": "true",
+      className: cn(className, getAnimationClassName?.(animationState)),
+      "data-animation-state": animationState,
+      onTransitionEnd,
+      children
+    }
+  );
+};
+ModalDrawerPanel.displayName = "ModalDrawerPanel";
 var HeadlessDrawer = React.forwardRef(
   ({
     variant = "standard",
@@ -4404,8 +4474,9 @@ var HeadlessDrawer = React.forwardRef(
     children,
     className,
     scrimClassName,
-    disableRipple = false,
-    iconOnly = false
+    getAnimationClassName,
+    getScrimAnimationClassName,
+    disableRipple = false
   }, ref) => {
     const state = reactStately.useOverlayTriggerState({
       ...open !== void 0 ? { isOpen: open } : {},
@@ -4416,77 +4487,99 @@ var HeadlessDrawer = React.forwardRef(
     const close = React.useCallback(() => {
       state.close();
     }, [state]);
+    const [animationState, setAnimationState] = React.useState("exited");
+    const closedRef = React.useRef(false);
+    const exitFallbackRef = React.useRef(null);
+    React.useEffect(() => {
+      if (!isOpen) return;
+      closedRef.current = false;
+      setAnimationState("entering");
+      const id = setTimeout(() => {
+        setAnimationState("visible");
+      }, 0);
+      return () => clearTimeout(id);
+    }, [isOpen]);
+    React.useEffect(() => {
+      if (isOpen) return;
+      if (animationState === "exited" || animationState === "entering") return;
+      if (animationState === "visible") {
+        setAnimationState("exiting");
+        exitFallbackRef.current = setTimeout(() => {
+          if (!closedRef.current) {
+            closedRef.current = true;
+            setAnimationState("exited");
+          }
+        }, 500);
+      }
+    }, [isOpen, animationState]);
+    React.useEffect(
+      () => () => {
+        if (exitFallbackRef.current !== null) {
+          clearTimeout(exitFallbackRef.current);
+        }
+      },
+      []
+    );
+    const handleTransitionEnd = React.useCallback(() => {
+      if (animationState === "exiting" && !closedRef.current) {
+        if (exitFallbackRef.current !== null) {
+          clearTimeout(exitFallbackRef.current);
+          exitFallbackRef.current = null;
+        }
+        closedRef.current = true;
+        setAnimationState("exited");
+      }
+    }, [animationState]);
     const contextValue = {
       isOpen,
       close,
-      disableRipple,
-      iconOnly
+      disableRipple
     };
-    if (variant === "modal") {
-      return /* @__PURE__ */ jsxRuntime.jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, role: "navigation", "aria-label": ariaLabel, children: isOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            "data-testid": "drawer-scrim",
-            className: scrimClassName,
-            onClick: () => state.close(),
-            "aria-hidden": "true"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(reactAria.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-          ModalDrawerPanel,
-          {
-            ariaLabel,
-            onClose: () => state.close(),
-            className,
-            children
-          }
-        ) })
-      ] }) }) });
+    if (variant === "standard") {
+      return /* @__PURE__ */ jsxRuntime.jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "nav",
+        {
+          ref,
+          role: "navigation",
+          "aria-label": ariaLabel,
+          className,
+          children
+        }
+      ) });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "nav",
-      {
-        ref,
-        role: "navigation",
-        "aria-label": ariaLabel,
-        className,
-        children
-      }
-    ) });
+    if (!isOpen && animationState === "exited") {
+      return null;
+    }
+    if (typeof document === "undefined") return null;
+    const content = /* @__PURE__ */ jsxRuntime.jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(reactAria.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "data-testid": "drawer-scrim",
+          className: cn(scrimClassName, getScrimAnimationClassName?.(animationState)),
+          "data-animation-state": animationState,
+          onClick: close,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ModalDrawerPanel,
+        {
+          ariaLabel,
+          onClose: close,
+          className,
+          animationState,
+          getAnimationClassName,
+          onTransitionEnd: handleTransitionEnd,
+          forwardedRef: ref,
+          children
+        }
+      )
+    ] }) });
+    return reactDom.createPortal(content, document.body);
   }
 );
 HeadlessDrawer.displayName = "HeadlessDrawer";
-var ModalDrawerPanel = ({
-  ariaLabel,
-  onClose,
-  className,
-  children
-}) => {
-  const panelRef = React.useRef(null);
-  reactAria.usePreventScroll();
-  const { dialogProps } = reactAria.useDialog({ "aria-label": ariaLabel }, panelRef);
-  const { overlayProps } = reactAria.useOverlay(
-    {
-      isOpen: true,
-      onClose,
-      isDismissable: true,
-      shouldCloseOnBlur: false
-    },
-    panelRef
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ...utils.mergeProps(overlayProps, dialogProps),
-      ref: panelRef,
-      className,
-      "aria-modal": "true",
-      children
-    }
-  );
-};
-ModalDrawerPanel.displayName = "ModalDrawerPanel";
 var HeadlessDrawerItem = React.forwardRef(
   ({
     href,
@@ -4504,7 +4597,6 @@ var HeadlessDrawerItem = React.forwardRef(
     ...restProps
   }, forwardedRef) => {
     const internalRef = React.useRef(null);
-    const { isFocusVisible, focusProps } = reactAria.useFocusRing();
     if (href) {
       const linkRef = forwardedRef ?? internalRef;
       const { linkProps } = reactAria.useLink(
@@ -4518,14 +4610,12 @@ var HeadlessDrawerItem = React.forwardRef(
       return /* @__PURE__ */ jsxRuntime.jsx(
         "a",
         {
-          ...utils.mergeProps(linkProps, focusProps, { onMouseDown }),
+          ...utils.mergeProps(linkProps, { onMouseDown }),
           ref: linkRef,
           href,
           className,
           title,
           "aria-current": isActive ? "page" : void 0,
-          "data-focus-visible": isFocusVisible || void 0,
-          "data-active": isActive || void 0,
           children
         }
       );
@@ -4548,13 +4638,11 @@ var HeadlessDrawerItem = React.forwardRef(
       "button",
       {
         type: "button",
-        ...utils.mergeProps(buttonProps, focusProps, { onMouseDown }),
+        ...utils.mergeProps(buttonProps, { onMouseDown }),
         ref: buttonRef,
         className,
         title,
         "aria-current": isActive ? "page" : void 0,
-        "data-focus-visible": isFocusVisible || void 0,
-        "data-active": isActive || void 0,
         children
       }
     );
@@ -4649,120 +4737,195 @@ var drawerVariants = classVarianceAuthority.cva(
     // Layout
     "fixed top-0 left-0 h-full",
     "flex flex-col overflow-y-auto",
-    // Stacking and shape
+    // Width — 360dp per MD3 spec
+    "w-drawer",
+    // Stacking
     "z-50",
-    "rounded-r-xl",
-    // Slide animation (transition applies to all open/closed state changes)
-    "transition-transform duration-medium4 ease-emphasized-decelerate",
+    // Container padding — 12dp per MD3 nav drawer spec
+    "px-3 py-3",
     // Focus outline removal (focus management handled by FocusScope / React Aria)
-    "outline-none",
-    // Padding for content spacing
-    "px-3"
+    "outline-none"
   ],
   {
     variants: {
       /**
-       * Structural variant — drives surface color and elevation.
-       * - `standard`: inline nav panel, lower-elevation surface
-       * - `modal`: overlay dialog with elevation shadow
+       * Structural variant — drives shape and elevation.
+       *
+       * - `standard`: flush left panel, square trailing edge, flat surface.
+       * - `modal`:    overlay dialog, 16dp trailing corner, shadow-elevation-1.
        */
       variant: {
-        standard: ["bg-surface-container-low"],
-        modal: ["bg-surface-container", "shadow-elevation-1"]
+        standard: ["bg-surface-container-low", "rounded-none"],
+        modal: ["bg-surface-container-low", "rounded-r-lg", "shadow-elevation-1"]
       },
       /**
-       * Open/closed state — drives translation.
-       * - `true`:  drawer visible (`translate-x-0`)
-       * - `false`: drawer off-screen (`-translate-x-full`)
+       * Open/closed state — drives translation for the STANDARD variant only.
+       *
+       * Standard slide: spatial on-screen property → spring-standard-default-spatial.
+       * Modal enter/exit is handled externally via drawerAnimationVariants + portal gate.
+       *
+       * - `true`:  translate-x-0 (visible)
+       * - `false`: -translate-x-full (off-screen to the left)
        */
       open: {
-        true: ["translate-x-0"],
-        false: ["-translate-x-full"]
-      },
-      /**
-       * Icon-only compact mode — 80dp rail instead of 360dp drawer.
-       * - `true`:  `w-20` (80dp), items centered
-       * - `false`: `w-drawer` (360dp), standard layout
-       */
-      iconOnly: {
-        true: ["w-20", "items-center"],
-        false: ["w-drawer"]
+        true: [
+          "translate-x-0",
+          "transition-transform",
+          "duration-spring-standard-default-spatial",
+          "ease-spring-standard-default-spatial"
+        ],
+        false: [
+          "-translate-x-full",
+          "transition-transform",
+          "duration-spring-standard-default-spatial",
+          "ease-spring-standard-default-spatial"
+        ]
       }
     },
     defaultVariants: {
       variant: "standard",
-      open: false,
-      iconOnly: false
+      open: false
     }
   }
 );
-var drawerItemVariants = classVarianceAuthority.cva(
+var drawerAnimationVariants = classVarianceAuthority.cva("", {
+  variants: {
+    animationState: {
+      // Mount frame: invisible until animation starts
+      entering: ["opacity-0"],
+      // Entry animation: slide in from the left edge
+      visible: ["animate-md-slide-in-left"],
+      // Exit animation: slide out to the left
+      exiting: ["animate-md-slide-out-left"],
+      // Portal gate removes element; classes below act as a safety net
+      exited: ["opacity-0", "pointer-events-none"]
+    }
+  },
+  defaultVariants: {
+    animationState: "entering"
+  }
+});
+var drawerScrimAnimationVariants = classVarianceAuthority.cva(
   [
-    // Layout
-    "relative flex w-full items-center gap-3",
-    "h-14 px-4",
-    "rounded-full",
-    // Typography
-    "text-label-large",
-    // Interaction
-    "cursor-pointer select-none outline-none",
-    // State layer pseudo-element (z-[1] above active indicator)
-    "before:absolute before:inset-0 before:rounded-full before:z-[1]",
-    "before:transition-opacity before:duration-short2 before:ease-standard",
-    "before:opacity-0",
-    // Hover and focus visible state layers
-    "hover:before:opacity-8",
-    "focus-visible:before:opacity-12",
-    // Active pressed state
-    "active:before:opacity-12",
-    // Transition for color changes
-    "transition-colors duration-short2 ease-standard"
+    "transition-opacity",
+    "duration-spring-standard-fast-effects",
+    "ease-spring-standard-fast-effects"
   ],
   {
     variants: {
-      /**
-       * Whether this item is the currently active destination.
-       *
-       * Active indicator is a 336dp pill rendered via `after:` pseudo-element
-       * per MD3 Navigation Drawer spec.
-       */
-      isActive: {
-        true: [
-          "text-on-secondary-container",
-          "before:bg-on-secondary-container",
-          // Active indicator — 336dp pill via after: pseudo
-          "after:absolute after:inset-0 after:mx-auto after:max-w-[336px]",
-          "after:rounded-full after:bg-secondary-container"
-        ],
-        false: ["bg-transparent", "text-on-surface-variant", "before:bg-on-surface-variant"]
-      },
-      /**
-       * Whether the item is disabled.
-       * Applies `opacity-38` per MD3 disabled state spec.
-       */
-      isDisabled: {
-        true: ["opacity-38 cursor-not-allowed pointer-events-none"],
-        false: []
+      animationState: {
+        entering: ["opacity-0"],
+        visible: ["opacity-32"],
+        exiting: ["opacity-0"],
+        exited: ["opacity-0", "pointer-events-none"]
       }
     },
     defaultVariants: {
-      isActive: false,
-      isDisabled: false
+      animationState: "entering"
     }
   }
 );
-var scrimVariants = classVarianceAuthority.cva([
-  "fixed inset-0 z-40",
-  "bg-scrim opacity-32",
-  "transition-opacity duration-short4 ease-standard"
+var drawerItemVariants = classVarianceAuthority.cva([
+  // Layout
+  "relative flex w-full items-center",
+  "h-14 pl-4 pr-6 gap-3",
+  // Shape
+  "rounded-full",
+  // Typography — Label Large per MD3 spec (size via text-label-large, weight + tracking explicit)
+  "text-label-large",
+  "font-medium",
+  "tracking-[0.1px]",
+  // Interaction
+  "cursor-pointer select-none outline-none",
+  // Color transition (effects — no overshoot)
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Inactive content color (icon/label/badge inherit this via currentColor)
+  "text-on-surface-variant",
+  // Active content color — self-targeting data-[active]: (root is the group host)
+  "data-[active]:text-on-secondary-container",
+  // Disabled — self-targeting
+  "data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed",
+  "data-[disabled]:text-on-surface/38"
 ]);
-var drawerSectionVariants = classVarianceAuthority.cva(["flex flex-col w-full"]);
-var drawerSectionHeaderVariants = classVarianceAuthority.cva([
-  "px-4 pt-4 pb-2",
-  "text-title-small text-on-surface-variant",
-  "select-none"
+var drawerItemActiveIndicatorVariants = classVarianceAuthority.cva([
+  "absolute inset-0 rounded-[inherit] pointer-events-none",
+  "bg-secondary-container",
+  // Effects transition for opacity — no overshoot
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Hidden when inactive; shown when active
+  "opacity-0",
+  "group-data-[active]/draweritem:opacity-100",
+  // z-0: below state layer (z-[1]) and content (z-10)
+  "z-0"
+]);
+var drawerItemStateLayerVariants = classVarianceAuthority.cva([
+  "absolute inset-0 rounded-[inherit] overflow-hidden pointer-events-none opacity-0",
+  // Effects transition — opacity must NOT overshoot
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Color: inactive uses on-surface-variant; active switches to on-secondary-container
+  "bg-on-surface-variant",
+  "group-data-[active]/draweritem:bg-on-secondary-container",
+  // Hover: 8%
+  "group-data-[hovered]/draweritem:opacity-8",
+  // Focus-visible: 10% (MD3 focus state layer)
+  "group-data-[focus-visible]/draweritem:opacity-10",
+  // Pressed: 10%, doubled selector wins over hover at same cascade position
+  "group-data-[pressed]/draweritem:group-data-[pressed]/draweritem:opacity-10",
+  // No state layer when disabled
+  "group-data-[disabled]/draweritem:hidden",
+  // z-[1]: above active indicator (z-0), below focus ring and content
+  "z-[1]"
+]);
+var drawerItemFocusRingVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-[inherit]",
+  "outline outline-2 -outline-offset-2 outline-secondary",
+  // Effects transition — opacity must not overshoot
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/draweritem:opacity-100",
+  // z-[2]: above state layer (z-[1]), below content (z-10)
+  "z-[2]"
+]);
+var drawerItemIconVariants = classVarianceAuthority.cva([
+  "relative z-10 flex shrink-0 items-center justify-center",
+  "h-6 w-6",
+  // Color and transition inherited via currentColor from root
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Explicit disabled override — mirrors Menu icon (on-surface/38)
+  "group-data-[disabled]/draweritem:text-on-surface/38"
+]);
+var drawerItemLabelVariants = classVarianceAuthority.cva(["relative z-10 flex-1 min-w-0 truncate"]);
+var drawerItemBadgeVariants = classVarianceAuthority.cva([
+  "relative z-10 shrink-0 ml-auto",
+  "text-label-large",
+  "font-medium",
+  "tracking-[0.1px]",
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
+]);
+var drawerHeadlineVariants = classVarianceAuthority.cva([
+  "px-4 pt-4 pb-1",
+  "text-title-small",
+  "font-medium",
+  "tracking-[0.1px]",
+  "text-on-surface-variant",
+  "select-none"
+]);
+var drawerScrimVariants = classVarianceAuthority.cva([
+  "fixed inset-0 z-40",
+  // NOTE: opacity is intentionally absent here — it is controlled per
+  // animation state by drawerScrimAnimationVariants (opacity-0 / opacity-32)
+  // to avoid tailwind-merge collapsing the classes during cn() composition.
+  "bg-scrim"
+]);
+var drawerSectionVariants = classVarianceAuthority.cva(["flex flex-col w-full"]);
+var drawerSectionHeaderVariants = classVarianceAuthority.cva([
+  "px-4 pt-4 pb-2",
+  "text-title-small",
+  "font-medium",
+  "tracking-[0.1px]",
+  "text-on-surface-variant",
+  "select-none"
 ]);
-classVarianceAuthority.cva(["border-t border-outline-variant", "mx-4 my-2"]);
 var DrawerSection = React.forwardRef(
   ({ header, children, showDivider = true, _isFirstSection = false, className }, ref) => {
     const shouldShowDivider = showDivider && !_isFirstSection;
@@ -4784,19 +4947,19 @@ var Drawer = React.forwardRef(
     children,
     className,
     disableRipple = false,
-    iconOnly = false,
     ...restProps
   }, ref) => {
     const isOpen = open ?? defaultOpen;
+    const reducedMotion = useReducedMotion();
     const drawerPanelClass = cn(
-      drawerVariants({
-        variant,
-        open: isOpen,
-        iconOnly
-      }),
+      drawerVariants({ variant, open: isOpen }),
+      // Suppress spring transition when user has requested reduced motion
+      reducedMotion && "transition-none",
       className
     );
-    const scrimClass = scrimVariants();
+    const scrimClass = drawerScrimVariants();
+    const getAnimationClassName = reducedMotion ? (_state) => "" : (state) => drawerAnimationVariants({ animationState: state });
+    const getScrimAnimationClassName = reducedMotion ? (_state) => "" : (state) => drawerScrimAnimationVariants({ animationState: state });
     let foundFirstSection = false;
     const processedChildren = React__default.default.Children.map(children, (child) => {
       if (React__default.default.isValidElement(child) && child.type === DrawerSection) {
@@ -4809,7 +4972,7 @@ var Drawer = React.forwardRef(
       }
       return child;
     });
-    return /* @__PURE__ */ jsxRuntime.jsx(DrawerIconOnlyContext.Provider, { value: iconOnly, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       HeadlessDrawer,
       {
         ref,
@@ -4820,153 +4983,99 @@ var Drawer = React.forwardRef(
         "aria-label": ariaLabel,
         className: drawerPanelClass,
         scrimClassName: scrimClass,
+        getAnimationClassName,
+        getScrimAnimationClassName,
         disableRipple,
-        iconOnly,
         ...restProps,
         children: processedChildren
       }
-    ) });
+    );
   }
 );
 Drawer.displayName = "Drawer";
-var badgeAppearance = [
-  // ── Shape ─────────────────────────────────────────────────────────────────────
-  "flex items-center justify-center",
-  "rounded-full",
-  // ── Large (count) sizing — base defaults ──────────────────────────────────────
-  // Height 16dp, min-width 16dp, horizontal padding 4dp
-  "h-4 min-w-4 px-1",
-  // ── Color — error role (only MD3-spec role for badges) ────────────────────────
-  "bg-error text-on-error",
-  // ── Typography — label-small, tight leading, tabular numbers ──────────────────
-  "text-label-small leading-none tabular-nums",
-  // ── Visibility (runtime flag) ──────────────────────────────────────────────────
-  // Base: fully visible
-  "scale-100",
-  // data-invisible: scale to zero (visually hidden; aria-label still readable by SR)
-  "data-[invisible]:scale-0",
-  // ── Dot content flag overrides (placed last — cascade wins over base sizing) ───
-  // Clear out the count-pill sizing, set 6dp circle
-  "data-[dot]:size-1.5",
-  "data-[dot]:min-w-0",
-  "data-[dot]:p-0",
-  "data-[dot]:text-[0]"
-  // suppress any stray text rendering on dot
-];
-var badgeVariants2 = classVarianceAuthority.cva([
-  // ── Anchored placement — badge center on host's top-right corner ──────────────
-  // top-0 right-0 places the badge's own top-right at the host's top-right,
-  // then the 1/2-element translate moves the badge center onto that corner.
-  // Host-size-agnostic: works for any wrapped element (icon, avatar, nav chip).
-  "absolute top-0 right-0 -translate-y-1/2 translate-x-1/2",
-  ...badgeAppearance
-]);
-var badgeStaticVariants = classVarianceAuthority.cva(["inline-flex", ...badgeAppearance]);
-function isBadgeConfig(badge) {
-  return typeof badge === "object" && badge !== null && !React.isValidElement(badge) && "count" in badge;
-}
-function getBadgeDisplayValue(count, max) {
-  if (count === void 0) return "";
-  return count > max ? `${max}+` : count.toString();
-}
-function getBadgeAriaLabel(count) {
-  return count === void 0 ? "New" : `${count} notifications`;
-}
 var DrawerItem = React.forwardRef(
   ({
     href,
     icon,
     label,
     badge,
-    secondaryText,
     isActive = false,
     isDisabled = false,
     disableRipple = false,
     className,
-    onPress,
-    onPressStart,
-    onPressEnd,
-    onPressChange,
-    onPressUp,
+    // All remaining props (onPress, onPressStart, onPressEnd, etc.) stay in
+    // restProps and are passed into mergeProps — mirrors the Button pattern.
     ...restProps
   }, ref) => {
-    const isItemDisabled = isDisabled;
-    const isIconOnly = React.useContext(DrawerIconOnlyContext);
+    const [isPressed, setIsPressed] = React.useState(false);
+    const handlePressStart = React.useCallback(() => setIsPressed(true), []);
+    const handlePressEnd = React.useCallback(() => setIsPressed(false), []);
+    const { isHovered, hoverProps } = reactAria.useHover({ isDisabled });
+    const { isFocusVisible, focusProps } = reactAria.useFocusRing();
     const { onMouseDown: handleRipple, ripples } = useRipple({
-      disabled: isItemDisabled || disableRipple
+      disabled: isDisabled || disableRipple
     });
-    const renderBadge = () => {
-      if (!badge) return null;
-      if (isBadgeConfig(badge)) {
-        const max = 999;
-        const isDot = badge.count === void 0;
-        const displayValue = getBadgeDisplayValue(badge.count, max);
-        const ariaLabel = getBadgeAriaLabel(badge.count);
-        return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 ml-auto flex shrink-0 items-center pr-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            role: "status",
-            "aria-label": ariaLabel,
-            "data-dot": isDot ? "" : void 0,
-            className: cn(badgeStaticVariants()),
-            children: displayValue
-          }
-        ) });
-      }
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 ml-auto flex shrink-0 items-center pr-2", "aria-hidden": "true", children: badge });
-    };
+    const mergedInteractionProps = reactAria.mergeProps(
+      hoverProps,
+      focusProps,
+      { onPressStart: handlePressStart, onPressEnd: handlePressEnd },
+      restProps
+    );
     return /* @__PURE__ */ jsxRuntime.jsxs(
       HeadlessDrawerItem,
       {
-        ...restProps,
+        ...mergedInteractionProps,
         ref,
         ...href !== void 0 ? { href } : {},
         isActive,
-        ...isItemDisabled !== void 0 ? { isDisabled: isItemDisabled } : {},
-        ...onPress !== void 0 ? { onPress } : {},
-        ...onPressStart !== void 0 ? { onPressStart } : {},
-        ...onPressEnd !== void 0 ? { onPressEnd } : {},
-        ...onPressChange !== void 0 ? { onPressChange } : {},
-        ...onPressUp !== void 0 ? { onPressUp } : {},
+        ...isDisabled !== void 0 ? { isDisabled } : {},
         onMouseDown: handleRipple,
-        title: isIconOnly ? label : void 0,
+        ...getInteractionDataAttributes({
+          isHovered,
+          isFocusVisible,
+          isPressed,
+          isDisabled
+        }),
+        "data-active": isActive ? "" : void 0,
         className: cn(
-          drawerItemVariants({
-            isActive,
-            isDisabled: isItemDisabled
-          }),
+          drawerItemVariants(),
+          // group/draweritem: enables group-data-[x]/draweritem selectors in all slots
+          "group/draweritem",
           className
         ),
         children: [
-          ripples,
-          icon && /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: drawerItemActiveIndicatorVariants() }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: drawerItemStateLayerVariants() }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: drawerItemFocusRingVariants() }),
+          /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
-              className: "relative z-10 flex shrink-0 items-center justify-center",
+              className: "pointer-events-none absolute inset-0 z-[3] overflow-hidden rounded-[inherit]",
               "aria-hidden": "true",
-              children: icon
+              children: ripples
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: drawerItemIconVariants(), children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: drawerItemLabelVariants(), children: label }),
+          badge !== void 0 && badge !== null && /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
-              className: cn(
-                "relative z-10 flex min-w-0 flex-1 flex-col text-left",
-                isIconOnly && "hidden"
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label }),
-                secondaryText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-body-small truncate opacity-70", children: secondaryText })
-              ]
+              role: "status",
+              "aria-label": typeof badge === "number" ? `${badge} notifications` : String(badge),
+              className: drawerItemBadgeVariants(),
+              children: badge
             }
-          ),
-          !isIconOnly && renderBadge()
+          )
         ]
       }
     );
   }
 );
 DrawerItem.displayName = "DrawerItem";
+var DrawerHeadline = React.forwardRef(
+  ({ children, className, ...restProps }, ref) => /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: cn(drawerHeadlineVariants(), className), ...restProps, children })
+);
+DrawerHeadline.displayName = "DrawerHeadline";
 var progressContainerVariants = classVarianceAuthority.cva(["inline-flex", "flex-col", "gap-1"], {
   variants: {
     type: {
@@ -5908,50 +6017,460 @@ var Card = React.forwardRef(function Card2({
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10", children })
       ]
     }
-  );
-});
-Card.displayName = "Card";
-var cardMediaVariants = classVarianceAuthority.cva("w-full object-cover", {
-  variants: {
-    aspectRatio: {
-      "16/9": "aspect-video",
-      "4/3": "aspect-[4/3]",
-      "1/1": "aspect-square",
-      auto: ""
+  );
+});
+Card.displayName = "Card";
+var cardMediaVariants = classVarianceAuthority.cva("w-full object-cover", {
+  variants: {
+    aspectRatio: {
+      "16/9": "aspect-video",
+      "4/3": "aspect-[4/3]",
+      "1/1": "aspect-square",
+      auto: ""
+    }
+  },
+  defaultVariants: {
+    aspectRatio: "auto"
+  }
+});
+var CardMedia = React.forwardRef(function CardMedia2({ src, alt, aspectRatio = "auto", className }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      ref,
+      src,
+      alt,
+      ...alt === "" && { role: "presentation" },
+      className: cn(cardMediaVariants({ aspectRatio }), className)
+    }
+  );
+});
+CardMedia.displayName = "CardMedia";
+var CardHeader = React.forwardRef(function CardHeader2({ headline, subheader, className }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("p-4", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-on-surface text-title-medium", children: headline }),
+    subheader !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-on-surface-variant text-body-medium mt-1", children: subheader })
+  ] });
+});
+CardHeader.displayName = "CardHeader";
+var CardContent = React.forwardRef(function CardContent2({ children, className }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("p-4", className), children });
+});
+CardContent.displayName = "CardContent";
+var CardActions = React.forwardRef(function CardActions2({ children, className }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center justify-end gap-2 p-4 pt-0", className), children });
+});
+CardActions.displayName = "CardActions";
+var menuContainerVariants = classVarianceAuthority.cva(
+  [
+    // Width constraints: 112dp min / 280dp max per MD3 spec
+    "min-w-28 max-w-70",
+    "flex flex-col",
+    // Scroll behaviour
+    "max-h-[calc(var(--visual-viewport-height,100vh)-2rem)]",
+    // Stacking
+    "z-50",
+    "gap-0.5",
+    // Focus outline delegated to React Aria
+    "outline-none"
+  ],
+  {
+    variants: {
+      /**
+       * Color scheme — drives item/segment background and content colors.
+       * standard: surface-container-low item background.
+       * vibrant:  tertiary-container item background.
+       */
+      colorScheme: {
+        standard: [],
+        vibrant: []
+      },
+      /**
+       * Visual style — drives corner radius and container background.
+       *
+       * baseline: solid surface-container, 4dp corners, 8dp vertical padding.
+       * vertical: transparent container, 16dp corners, no container padding —
+       *   items own their segment surface, gaps reveal the page background.
+       */
+      menuStyle: {
+        baseline: ["rounded-xs", "bg-surface-container", "py-2"],
+        vertical: ["bg-transparent"]
+      }
+    },
+    defaultVariants: {
+      colorScheme: "standard",
+      menuStyle: "baseline"
+    }
+  }
+);
+var menuPopoverVariants = classVarianceAuthority.cva([
+  "will-change-[transform,opacity]",
+  "data-[entering]:pointer-events-none data-[exiting]:pointer-events-none",
+  "data-[entering]:animate-md-scale-in",
+  "data-[exiting]:animate-md-scale-out",
+  "origin-top",
+  "data-[placement=top]:origin-bottom",
+  "data-[placement=left]:origin-right",
+  "data-[placement=right]:origin-left",
+  "motion-reduce:data-[entering]:animate-none motion-reduce:data-[exiting]:animate-none"
+]);
+var menuItemVariants = classVarianceAuthority.cva(
+  [
+    // Layout — height set by density context in MenuItem component
+    // gap is style-specific: baseline = 12dp (gap-3), vertical = 8dp (gap-2)
+    "relative flex w-full items-center",
+    // Typography: Label Large per MD3 menu spec
+    "text-label-large",
+    // Interaction
+    "cursor-pointer select-none outline-none",
+    // Color transition (effects — no overshoot)
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Disabled — self-targeting data-[x]: selectors (RAC emits data-disabled)
+    "data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      /**
+       * Color scheme — drives item bg, default text/icon color, and selection colors.
+       *
+       * standard: surface-container-low bg, on-surface text, on-surface-variant icons.
+       *           Selected/open: tertiary-container bg highlight, on-tertiary-container content.
+       * vibrant:  tertiary-container bg, on-tertiary-container text AND icons.
+       *           Selected/open: tertiary bg highlight, on-tertiary content.
+       */
+      colorScheme: {
+        standard: ["text-on-surface"],
+        vibrant: ["text-on-tertiary-container"]
+      },
+      /**
+       * Visual style — drives padding, gap, segment surface, and corner rounding.
+       *
+       * baseline: 12dp h-padding, 12dp icon-to-label gap, no item background (container provides it).
+       * vertical: 12dp h-padding, 8dp icon-to-label gap, item owns segment surface, segmented rounding
+       *   via first/last + adjacent-sibling gap selectors.
+       */
+      menuStyle: {
+        baseline: ["px-3", "gap-3"],
+        vertical: [
+          "px-3",
+          "gap-2",
+          // Default: inner item (4dp all corners)
+          "rounded-md"
+          // Last item in the whole menu → 16dp bottom corners
+        ]
+      }
+    },
+    compoundVariants: [
+      // vertical + standard: selected/open text → on-tertiary-container
+      {
+        menuStyle: "vertical",
+        colorScheme: "standard",
+        class: [
+          "data-[selected]:text-on-tertiary-container",
+          "data-[open]:text-on-tertiary-container"
+        ]
+      },
+      // vertical + vibrant: selected/open text → on-tertiary
+      {
+        menuStyle: "vertical",
+        colorScheme: "vibrant",
+        class: ["data-[selected]:text-on-tertiary", "data-[open]:text-on-tertiary"]
+      }
+    ],
+    defaultVariants: {
+      colorScheme: "standard",
+      menuStyle: "baseline"
+    }
+  }
+);
+var menuItemHighlightVariants = classVarianceAuthority.cva(
+  [
+    "absolute inset-0 pointer-events-none",
+    // Inherit the item's own corner radius (inner 4dp or outer 16dp)
+    "rounded-[inherit]",
+    // Effects transition for background-color — no overshoot
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // z-0: below state layer (z-[1]) and content (z-10)
+    "z-0"
+  ],
+  {
+    variants: {
+      menuStyle: {
+        baseline: [],
+        vertical: []
+      },
+      colorScheme: {
+        standard: [
+          // baseline selected bg
+          "group-data-[selected]/menuitem:bg-surface-container-highest"
+        ],
+        vibrant: [
+          // baseline + vibrant: use surface-container-highest as fallback
+          "group-data-[selected]/menuitem:bg-surface-container-highest"
+        ]
+      }
+    },
+    compoundVariants: [
+      // vertical + standard: selected/open highlight → tertiary-container
+      {
+        menuStyle: "vertical",
+        colorScheme: "standard",
+        class: [
+          "group-data-[selected]/menuitem:bg-tertiary-container",
+          "group-data-[open]/menuitem:bg-tertiary-container"
+        ]
+      },
+      // vertical + vibrant: selected/open highlight → tertiary
+      {
+        menuStyle: "vertical",
+        colorScheme: "vibrant",
+        class: [
+          "group-data-[selected]/menuitem:bg-tertiary",
+          "group-data-[open]/menuitem:bg-tertiary"
+        ]
+      }
+    ],
+    defaultVariants: {
+      menuStyle: "baseline",
+      colorScheme: "standard"
+    }
+  }
+);
+var menuItemStateLayerVariants = classVarianceAuthority.cva(
+  [
+    "absolute inset-0 rounded-[inherit] overflow-hidden pointer-events-none opacity-0",
+    // Effects transition — opacity must NOT overshoot
+    "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Hover: 8%
+    "group-data-[hovered]/menuitem:opacity-8",
+    // Pressed: 10%, doubled selector wins over hover at same cascade position
+    "group-data-[pressed]/menuitem:group-data-[pressed]/menuitem:opacity-10",
+    // No state layer when disabled
+    "group-data-[disabled]/menuitem:hidden",
+    // z-[1]: above highlight layer (z-0), below content (z-10)
+    "z-[1]"
+  ],
+  {
+    variants: {
+      colorScheme: {
+        standard: ["bg-on-surface"],
+        vibrant: ["bg-on-tertiary-container"]
+      },
+      menuStyle: {
+        baseline: [],
+        vertical: []
+      }
+    },
+    compoundVariants: [
+      // vertical + standard: selected/open state layer → on-tertiary-container
+      {
+        menuStyle: "vertical",
+        colorScheme: "standard",
+        class: [
+          "group-data-[selected]/menuitem:bg-on-tertiary-container",
+          "group-data-[open]/menuitem:bg-on-tertiary-container"
+        ]
+      },
+      // vertical + vibrant: selected/open state layer → on-tertiary
+      {
+        menuStyle: "vertical",
+        colorScheme: "vibrant",
+        class: [
+          "group-data-[selected]/menuitem:bg-on-tertiary",
+          "group-data-[open]/menuitem:bg-on-tertiary"
+        ]
+      }
+    ],
+    defaultVariants: {
+      colorScheme: "standard",
+      menuStyle: "baseline"
+    }
+  }
+);
+var menuItemFocusRingVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-[inherit]",
+  "outline outline-2 -outline-offset-2 outline-secondary",
+  // Effects transition — opacity must not overshoot
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/menuitem:opacity-100",
+  // z-[2]: above state layer (z-[1]) and highlight (z-0), below content (z-10)
+  "z-[2]"
+]);
+var menuItemIconVariants = classVarianceAuthority.cva(
+  [
+    "relative z-10 shrink-0 flex items-center justify-center",
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Disabled: 38% opacity on icon color
+    "group-data-[disabled]/menuitem:text-on-surface/38"
+  ],
+  {
+    variants: {
+      colorScheme: {
+        standard: ["text-on-surface-variant"],
+        vibrant: ["text-on-tertiary-container"]
+      },
+      menuStyle: {
+        baseline: ["h-6 w-6"],
+        vertical: ["h-5 w-5"]
+      }
+    },
+    compoundVariants: [
+      // vertical + standard: selected/open icon → on-tertiary-container
+      {
+        menuStyle: "vertical",
+        colorScheme: "standard",
+        class: [
+          "group-data-[selected]/menuitem:text-on-tertiary-container",
+          "group-data-[open]/menuitem:text-on-tertiary-container"
+        ]
+      },
+      // vertical + vibrant: selected/open icon → on-tertiary
+      {
+        menuStyle: "vertical",
+        colorScheme: "vibrant",
+        class: [
+          "group-data-[selected]/menuitem:text-on-tertiary",
+          "group-data-[open]/menuitem:text-on-tertiary"
+        ]
+      }
+    ],
+    defaultVariants: {
+      colorScheme: "standard",
+      menuStyle: "baseline"
+    }
+  }
+);
+var menuSectionVariants = classVarianceAuthority.cva(["flex flex-col w-full"]);
+var menuSectionHeaderVariants = classVarianceAuthority.cva(
+  [
+    // 32dp tall region, content vertically centred, 12dp leading padding aligned with items
+    "px-3 h-8 flex items-center",
+    "text-title-small",
+    "select-none"
+  ],
+  {
+    variants: {
+      colorScheme: {
+        standard: ["text-on-surface-variant"],
+        vibrant: ["text-on-tertiary-container"]
+      }
+    },
+    defaultVariants: {
+      colorScheme: "standard"
+    }
+  }
+);
+var menuDividerVariants = classVarianceAuthority.cva(["border-t border-outline-variant", "my-0.5 mx-3"]);
+classVarianceAuthority.cva(["h-0.5 w-full"]);
+var menuItemTrailingTextVariants = classVarianceAuthority.cva(
+  [
+    "ml-auto shrink-0 text-label-large",
+    "select-none",
+    "group-data-[disabled]/menuitem:text-on-surface/38"
+  ],
+  {
+    variants: {
+      colorScheme: {
+        standard: ["text-on-surface-variant"],
+        vibrant: ["text-on-tertiary-container"]
+      },
+      menuStyle: {
+        baseline: [],
+        vertical: [
+          "group-data-[selected]/menuitem:text-on-tertiary-container",
+          "group-data-[open]/menuitem:text-on-tertiary-container"
+        ]
+      }
+    },
+    compoundVariants: [
+      // vertical + vibrant: selected/open trailing text → on-tertiary
+      {
+        menuStyle: "vertical",
+        colorScheme: "vibrant",
+        class: [
+          "group-data-[selected]/menuitem:text-on-tertiary",
+          "group-data-[open]/menuitem:text-on-tertiary"
+        ]
+      }
+    ],
+    defaultVariants: {
+      colorScheme: "standard",
+      menuStyle: "baseline"
+    }
+  }
+);
+var menuItemDescriptionVariants = classVarianceAuthority.cva(
+  ["text-body-medium", "select-none", "group-data-[disabled]/menuitem:text-on-surface/38"],
+  {
+    variants: {
+      colorScheme: {
+        standard: ["text-on-surface-variant"],
+        vibrant: ["text-on-tertiary-container"]
+      },
+      menuStyle: {
+        baseline: [],
+        vertical: [
+          "group-data-[selected]/menuitem:text-on-tertiary-container",
+          "group-data-[open]/menuitem:text-on-tertiary-container"
+        ]
+      }
+    },
+    compoundVariants: [
+      // vertical + vibrant: selected/open description → on-tertiary
+      {
+        menuStyle: "vertical",
+        colorScheme: "vibrant",
+        class: [
+          "group-data-[selected]/menuitem:text-on-tertiary",
+          "group-data-[open]/menuitem:text-on-tertiary"
+        ]
+      }
+    ],
+    defaultVariants: {
+      colorScheme: "standard",
+      menuStyle: "baseline"
     }
-  },
-  defaultVariants: {
-    aspectRatio: "auto"
   }
-});
-var CardMedia = React.forwardRef(function CardMedia2({ src, alt, aspectRatio = "auto", className }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "img",
-    {
-      ref,
-      src,
-      alt,
-      ...alt === "" && { role: "presentation" },
-      className: cn(cardMediaVariants({ aspectRatio }), className)
+);
+classVarianceAuthority.cva(
+  [
+    "flex flex-col w-full",
+    "px-1 py-0.5 gap-0.5",
+    "rounded-lg first:rounded-b-sm last:rounded-t-sm",
+    "shadow-elevation-1"
+  ],
+  {
+    variants: {
+      menuStyle: {
+        vertical: ["bg-surface-container-low"],
+        baseline: []
+      },
+      colorScheme: {
+        standard: ["bg-surface-container-low"],
+        vibrant: ["bg-tertiary-container"]
+      }
+    },
+    compoundVariants: [
+      // vertical + standard: item background = surface-container-low
+      {
+        menuStyle: "vertical",
+        colorScheme: "standard",
+        class: ["bg-surface-container-low"]
+      },
+      // vertical + vibrant: item background = tertiary-container
+      {
+        menuStyle: "vertical",
+        colorScheme: "vibrant",
+        class: ["bg-tertiary-container"]
+      }
+    ],
+    defaultVariants: {
+      menuStyle: "vertical",
+      colorScheme: "standard"
     }
-  );
-});
-CardMedia.displayName = "CardMedia";
-var CardHeader = React.forwardRef(function CardHeader2({ headline, subheader, className }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("p-4", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-on-surface text-title-medium", children: headline }),
-    subheader !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-on-surface-variant text-body-medium mt-1", children: subheader })
-  ] });
-});
-CardHeader.displayName = "CardHeader";
-var CardContent = React.forwardRef(function CardContent2({ children, className }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("p-4", className), children });
-});
-CardContent.displayName = "CardContent";
-var CardActions = React.forwardRef(function CardActions2({ children, className }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center justify-end gap-2 p-4 pt-0", className), children });
-});
-CardActions.displayName = "CardActions";
+  }
+);
 var MenuContext = React.createContext(null);
 function useMenuContext() {
   return React.useContext(MenuContext);
@@ -5989,7 +6508,16 @@ function HeadlessMenuTrigger({
   const [triggerChild, menuChild] = childrenArray;
   return /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.MenuTrigger, { ...rest, children: [
     /* @__PURE__ */ jsxRuntime.jsx(TriggerBridge, { children: triggerChild }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Popover, { placement, shouldFlip, offset: 4, children: menuChild })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.Popover,
+      {
+        placement,
+        shouldFlip,
+        offset: 4,
+        className: menuPopoverVariants(),
+        children: menuChild
+      }
+    )
   ] });
 }
 function HeadlessMenu({
@@ -6041,192 +6569,6 @@ function HeadlessMenuDivider({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Separator, { ...props, className: className ?? "" });
 }
-var menuContainerVariants = classVarianceAuthority.cva(
-  [
-    // Elevation
-    "shadow-elevation-2",
-    // Width constraints per MD3 spec (112dp min / 280dp max)
-    "min-w-28 max-w-70",
-    // Layout
-    "py-2",
-    // Scroll: show scrollbar when content overflows; max height avoids clipping
-    "overflow-y-auto",
-    "max-h-[calc(var(--visual-viewport-height,100vh)-2rem)]",
-    // Stacking
-    "z-50",
-    // Focus outline handled by React Aria
-    "outline-none",
-    // GPU compositing — promotes menu to its own compositor layer so
-    // scale + opacity animations run without triggering layout reflow.
-    "will-change-[transform,opacity]",
-    // Pointer events blocked during animation to prevent accidental clicks
-    // on menu items while the panel is still animating in or out.
-    "data-[entering]:pointer-events-none data-[exiting]:pointer-events-none",
-    // ── Enter animation ────────────────────────────────────────────────────
-    // @keyframes menu-enter (defined in styles.css): scale(0.8)+opacity:0 →
-    // scale(1)+opacity:1 in 120ms with cubic-bezier(0,0,0.2,1) (standard
-    // decelerate — matches Angular Material's _mat-menu-enter keyframe).
-    "data-[entering]:animate-[menu-enter_120ms_cubic-bezier(0,0,0.2,1)_both]",
-    // ── Exit animation ─────────────────────────────────────────────────────
-    // @keyframes menu-exit (defined in styles.css): opacity:1 → opacity:0
-    // in 100ms after 25ms delay, linear — matches Angular Material's
-    // _mat-menu-exit keyframe (fade-only, no reverse scale).
-    "data-[exiting]:animate-[menu-exit_100ms_25ms_linear_both]",
-    // ── Transform origin (placement-aware) ────────────────────────────────
-    // RAC sets data-placement="bottom|top|left|right" on the Popover element.
-    // Default (bottom): origin at top edge (menu expands downward).
-    "origin-top",
-    // top: origin at bottom edge (menu expands upward)
-    "data-[placement=top]:origin-bottom",
-    // left: origin at right edge
-    "data-[placement=left]:origin-right",
-    // right: origin at left edge
-    "data-[placement=right]:origin-left",
-    // ── Reduced motion ────────────────────────────────────────────────────
-    // Skip both animations entirely for users who prefer reduced motion.
-    "motion-reduce:data-[entering]:animate-none motion-reduce:data-[exiting]:animate-none"
-  ],
-  {
-    variants: {
-      /**
-       * Color scheme — drives the container background.
-       * baseline+standard uses a separate compound variant.
-       */
-      colorScheme: {
-        standard: [],
-        vibrant: []
-      },
-      /**
-       * Visual style — drives corner radius and baseline vs vertical background.
-       */
-      menuStyle: {
-        baseline: ["rounded-xs", "bg-surface-container"],
-        vertical: ["rounded-lg", "bg-surface-container-low"]
-      }
-    },
-    compoundVariants: [
-      // Vertical + vibrant: tertiary container background
-      {
-        menuStyle: "vertical",
-        colorScheme: "vibrant",
-        class: ["bg-tertiary-container"]
-      }
-    ],
-    defaultVariants: {
-      colorScheme: "standard",
-      menuStyle: "baseline"
-    }
-  }
-);
-var menuItemVariants = classVarianceAuthority.cva(
-  [
-    // Layout — height set by density context in MenuItem component
-    "relative flex w-full items-center",
-    "px-3 gap-3",
-    // Typography: Body Large per MD3 baseline spec
-    "text-body-large",
-    // Interaction
-    "cursor-pointer select-none outline-none",
-    // State layer pseudo-element
-    "before:absolute before:inset-0 before:rounded-[inherit]",
-    "before:transition-opacity before:duration-short2 before:ease-standard",
-    "before:opacity-0",
-    // Hover state layer
-    "hover:before:opacity-8",
-    // Focus visible state layer
-    "focus-visible:before:opacity-12",
-    // Active pressed state layer
-    "active:before:opacity-12",
-    // Color transition for selection
-    "transition-colors duration-short2 ease-standard"
-  ],
-  {
-    variants: {
-      /**
-       * Disabled state: reduces opacity and blocks interaction.
-       */
-      isDisabled: {
-        true: ["opacity-38 cursor-not-allowed pointer-events-none"],
-        false: []
-      },
-      /**
-       * Selected state: background and text color driven by compound variants.
-       */
-      isSelected: {
-        true: [],
-        false: []
-      },
-      /**
-       * Color scheme: drives default text and state layer colors.
-       * - standard: on-surface text, on-surface state layer
-       * - vibrant (vertical only): on-tertiary-container text + state layer
-       */
-      colorScheme: {
-        standard: ["text-on-surface", "before:bg-on-surface"],
-        vibrant: ["text-on-tertiary-container", "before:bg-on-tertiary-container"]
-      },
-      /**
-       * Visual style: drives corner radius on items (vertical uses rounded-lg
-       * inherited from container, items stay flat inside).
-       */
-      menuStyle: {
-        baseline: [],
-        vertical: []
-      }
-    },
-    compoundVariants: [
-      // ── Baseline selection (both colorSchemes) ──────────────────────────
-      {
-        isSelected: true,
-        menuStyle: "baseline",
-        class: [
-          "bg-surface-container-highest"
-          // text-on-surface already applied by standard colorScheme variant
-        ]
-      },
-      // ── Vertical + Standard selection ───────────────────────────────────
-      {
-        isSelected: true,
-        menuStyle: "vertical",
-        colorScheme: "standard",
-        class: [
-          "bg-tertiary-container",
-          "text-on-tertiary-container",
-          "before:bg-on-tertiary-container"
-        ]
-      },
-      // ── Vertical + Vibrant selection ─────────────────────────────────────
-      {
-        isSelected: true,
-        menuStyle: "vertical",
-        colorScheme: "vibrant",
-        class: ["bg-tertiary", "text-on-tertiary", "before:bg-on-tertiary"]
-      }
-    ],
-    defaultVariants: {
-      isDisabled: false,
-      isSelected: false,
-      colorScheme: "standard",
-      menuStyle: "baseline"
-    }
-  }
-);
-var menuSectionVariants = classVarianceAuthority.cva(["flex flex-col w-full"]);
-var menuSectionHeaderVariants = classVarianceAuthority.cva([
-  "px-3 pt-2 pb-1",
-  "text-title-small text-on-surface-variant",
-  "select-none"
-]);
-var menuDividerVariants = classVarianceAuthority.cva(["border-t border-outline-variant", "my-2 mx-0"]);
-classVarianceAuthority.cva(["h-2 w-full"]);
-var menuItemTrailingTextVariants = classVarianceAuthority.cva([
-  "ml-auto shrink-0 text-label-large text-on-surface-variant",
-  "select-none"
-]);
-var menuItemDescriptionVariants = classVarianceAuthority.cva([
-  "text-body-medium text-on-surface-variant",
-  "select-none"
-]);
 var Menu = React.forwardRef(function Menu2({
   children,
   className,
@@ -6286,7 +6628,13 @@ function CheckIcon() {
     }
   );
 }
-var DENSITY_HEIGHT = {
+var BASELINE_DENSITY_HEIGHT = {
+  0: "h-12",
+  [-1]: "h-11",
+  [-2]: "h-10",
+  [-3]: "h-9"
+};
+var VERTICAL_DENSITY_HEIGHT = {
   0: "h-12",
   [-1]: "h-11",
   [-2]: "h-10",
@@ -6309,19 +6657,18 @@ var MenuItem = React.forwardRef(function MenuItem2({
   const menuStyle = ctx?.menuStyle ?? "baseline";
   const density = ctx?.density ?? 0;
   const selectionMode = ctx?.selectionMode;
-  const heightClass = DENSITY_HEIGHT[density];
+  const heightClass = menuStyle === "vertical" ? VERTICAL_DENSITY_HEIGHT[density] : BASELINE_DENSITY_HEIGHT[density];
   const isSelectionMenu = selectionMode != null;
   const { ripples, onMouseDown } = useRipple({ disabled: disableRipple });
-  const computeClassName = ({ isDisabled, isSelected }) => cn(
-    menuItemVariants({
-      isDisabled,
-      isSelected: isSelected ?? false,
-      colorScheme,
-      menuStyle
-    }),
+  const computeClassName = ({ isSelected }) => cn(
+    menuItemVariants({ colorScheme, menuStyle }),
+    // group/menuitem scope: all slot children read state via group-data-[x]/menuitem
+    "group/menuitem",
     // Height: auto when description is present (multi-line), otherwise density
     description ? "min-h-12 py-2 h-auto items-start" : heightClass,
-    className
+    className,
+    // Silence the isSelected lint — value consumed in render-prop below
+    isSelected ? "" : ""
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
     HeadlessMenuItem,
@@ -6331,24 +6678,48 @@ var MenuItem = React.forwardRef(function MenuItem2({
       className: computeClassName,
       onMouseDown,
       children: ({ isSelected }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        !disableRipple && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]", children: ripples }),
-        (leadingIcon != null || isSelectionMenu) && /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-testid": "menuitem-highlight",
+            className: menuItemHighlightVariants({ colorScheme, menuStyle })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: menuItemStateLayerVariants({ colorScheme, menuStyle })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: "text-on-surface-variant relative z-10 flex h-6 w-6 shrink-0 items-center justify-center",
             "aria-hidden": "true",
-            children: isSelectionMenu && leadingIcon == null ? isSelected ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) : null : leadingIcon
+            "data-testid": "menuitem-focus-ring",
+            className: menuItemFocusRingVariants()
+          }
+        ),
+        !disableRipple && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "pointer-events-none absolute inset-0 z-[3] overflow-hidden rounded-[inherit]"
+            ),
+            children: ripples
           }
         ),
+        (leadingIcon != null || isSelectionMenu) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: menuItemIconVariants({ colorScheme, menuStyle }), "aria-hidden": "true", children: isSelectionMenu && leadingIcon == null ? isSelected ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) : null : leadingIcon }),
         description != null ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative z-10 flex min-w-0 flex-1 flex-col", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-body-large", children }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: menuItemDescriptionVariants(), children: description })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-body-large relative z-10 min-w-0 flex-1", children }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-label-large group-data-[disabled]/menuitem:text-on-surface/38", children }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: menuItemDescriptionVariants({ colorScheme, menuStyle }), children: description })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-label-large group-data-[disabled]/menuitem:text-on-surface/38 relative z-10 min-w-0 flex-1", children }),
         badge != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 shrink-0", children: badge }),
         trailingIcon != null && trailingText == null && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: "text-on-surface-variant relative z-10 ml-auto flex h-6 w-6 shrink-0 items-center justify-center",
+            className: cn(menuItemIconVariants({ colorScheme, menuStyle }), "ml-auto"),
             "aria-hidden": "true",
             children: trailingIcon
           }
@@ -6356,7 +6727,10 @@ var MenuItem = React.forwardRef(function MenuItem2({
         trailingText != null && trailingIcon == null && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: cn(menuItemTrailingTextVariants(), "relative z-10"),
+            className: cn(
+              menuItemTrailingTextVariants({ colorScheme, menuStyle }),
+              "relative z-10"
+            ),
             "aria-keyshortcuts": trailingText,
             children: trailingText
           }
@@ -6372,6 +6746,8 @@ function MenuSection({
   className,
   "aria-label": ariaLabel
 }) {
+  const ctx = useMenuContext();
+  const colorScheme = ctx?.colorScheme ?? "standard";
   const sectionAriaLabel = ariaLabel ?? header;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     showDivider && /* @__PURE__ */ jsxRuntime.jsx(HeadlessMenuDivider, { className: menuDividerVariants() }),
@@ -6381,7 +6757,7 @@ function MenuSection({
         "aria-label": sectionAriaLabel,
         className: cn(menuSectionVariants(), className),
         children: [
-          header && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Header, { className: menuSectionHeaderVariants(), "aria-hidden": "true", children: header }),
+          header && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Header, { className: menuSectionHeaderVariants({ colorScheme }), "aria-hidden": "true", children: header }),
           children
         ]
       }
@@ -9737,6 +10113,39 @@ var BadgeHeadless = React.forwardRef(
   }
 );
 BadgeHeadless.displayName = "BadgeHeadless";
+var badgeAppearance = [
+  // ── Shape ─────────────────────────────────────────────────────────────────────
+  "flex items-center justify-center",
+  "rounded-full",
+  // ── Large (count) sizing — base defaults ──────────────────────────────────────
+  // Height 16dp, min-width 16dp, horizontal padding 4dp
+  "h-4 min-w-4 px-1",
+  // ── Color — error role (only MD3-spec role for badges) ────────────────────────
+  "bg-error text-on-error",
+  // ── Typography — label-small, tight leading, tabular numbers ──────────────────
+  "text-label-small leading-none tabular-nums",
+  // ── Visibility (runtime flag) ──────────────────────────────────────────────────
+  // Base: fully visible
+  "scale-100",
+  // data-invisible: scale to zero (visually hidden; aria-label still readable by SR)
+  "data-[invisible]:scale-0",
+  // ── Dot content flag overrides (placed last — cascade wins over base sizing) ───
+  // Clear out the count-pill sizing, set 6dp circle
+  "data-[dot]:size-1.5",
+  "data-[dot]:min-w-0",
+  "data-[dot]:p-0",
+  "data-[dot]:text-[0]"
+  // suppress any stray text rendering on dot
+];
+var badgeVariants2 = classVarianceAuthority.cva([
+  // ── Anchored placement — badge center on host's top-right corner ──────────────
+  // top-0 right-0 places the badge's own top-right at the host's top-right,
+  // then the 1/2-element translate moves the badge center onto that corner.
+  // Host-size-agnostic: works for any wrapped element (icon, avatar, nav chip).
+  "absolute top-0 right-0 -translate-y-1/2 translate-x-1/2",
+  ...badgeAppearance
+]);
+classVarianceAuthority.cva(["inline-flex", ...badgeAppearance]);
 var getDisplayValue = (count, max) => {
   if (count === void 0) return "";
   return count > max ? `${max}+` : count.toString();
@@ -15284,7 +15693,7 @@ var modeToggleStateLayerVariants = classVarianceAuthority.cva([
   "group-data-[focus-visible]/mode-toggle:opacity-10",
   "group-data-[pressed]/mode-toggle:opacity-10"
 ]);
-var scrimVariants2 = classVarianceAuthority.cva([
+var scrimVariants = classVarianceAuthority.cva([
   "fixed inset-0 z-40",
   "bg-scrim opacity-32",
   "transition-opacity duration-medium2 ease-standard"
@@ -16027,7 +16436,7 @@ var DatePickerModalStyled = React.forwardRef(
           !reducedMotion && MODAL_DIALOG_MOTION,
           className
         ),
-        scrimClassName: cn(scrimVariants2()),
+        scrimClassName: cn(scrimVariants()),
         slots: {
           CellComponent: StyledCalendarCell,
           NavButtonComponent: StyledNavButton,
@@ -16477,7 +16886,7 @@ var DatePickerModalInputStyled = React.forwardRef(
           MODAL_INPUT_CONTENT_STRUCTURAL,
           className
         ),
-        scrimClassName: cn(scrimVariants2()),
+        scrimClassName: cn(scrimVariants()),
         ActionButtonComponent: StyledActionButton
       }
     );
@@ -16635,7 +17044,8 @@ exports.DialogHeadline = DialogHeadline;
 exports.Divider = Divider;
 exports.DividerHeadless = DividerHeadless;
 exports.Drawer = Drawer;
-exports.DrawerIconOnlyContext = DrawerIconOnlyContext;
+exports.DrawerContext = DrawerContext;
+exports.DrawerHeadline = DrawerHeadline;
 exports.DrawerItem = DrawerItem;
 exports.DrawerSection = DrawerSection;
 exports.FAB = FAB;
@@ -16758,6 +17168,20 @@ exports.dockedFieldGroupVariants = dockedFieldGroupVariants;
 exports.dockedLabelVariants = dockedLabelVariants;
 exports.dockedTriggerStateLayerVariants = dockedTriggerStateLayerVariants;
 exports.dockedTriggerVariants = dockedTriggerVariants;
+exports.drawerAnimationVariants = drawerAnimationVariants;
+exports.drawerHeadlineVariants = drawerHeadlineVariants;
+exports.drawerItemActiveIndicatorVariants = drawerItemActiveIndicatorVariants;
+exports.drawerItemBadgeVariants = drawerItemBadgeVariants;
+exports.drawerItemFocusRingVariants = drawerItemFocusRingVariants;
+exports.drawerItemIconVariants = drawerItemIconVariants;
+exports.drawerItemLabelVariants = drawerItemLabelVariants;
+exports.drawerItemStateLayerVariants = drawerItemStateLayerVariants;
+exports.drawerItemVariants = drawerItemVariants;
+exports.drawerScrimAnimationVariants = drawerScrimAnimationVariants;
+exports.drawerScrimVariants = drawerScrimVariants;
+exports.drawerSectionHeaderVariants = drawerSectionHeaderVariants;
+exports.drawerSectionVariants = drawerSectionVariants;
+exports.drawerVariants = drawerVariants;
 exports.fabMenuItemFocusRingVariants = fabMenuItemFocusRingVariants;
 exports.fabMenuItemIconVariants = fabMenuItemIconVariants;
 exports.fabMenuItemLabelVariants = fabMenuItemLabelVariants;
@@ -16793,7 +17217,7 @@ exports.pxToRem = pxToRem;
 exports.remToPx = remToPx;
 exports.rgbToHex = rgbToHex;
 exports.richTooltipVariants = richTooltipVariants;
-exports.scrimVariants = scrimVariants2;
+exports.scrimVariants = scrimVariants;
 exports.searchBarAvatarVariants = searchBarAvatarVariants;
 exports.searchBarFocusRingVariants = searchBarFocusRingVariants;
 exports.searchBarInputVariants = searchBarInputVariants;