@tinybigui/react 0.22.0 → 0.24.0

package/dist/index.js

@@ -5,11 +5,11 @@ export { argbFromHex, hexFromArgb } from '@material/material-color-utilities';
 import React, { forwardRef, useRef, createContext, useState, useCallback, useId, useMemo, useEffect, useContext, useLayoutEffect, Children, isValidElement, cloneElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
-import { useButton, useHover, useFocusRing, mergeProps as mergeProps$1, useTextField, useCheckbox, VisuallyHidden, useSwitch, useRadioGroup, useRadio, useTabList, useTab, useTabPanel, FocusScope, usePreventScroll, useDialog, useOverlay, useLink, useSeparator, useProgressBar, useToggleButton, useListBox, useOption, useSearchField, useSlider, useDatePicker, useLocale, useDateField, useSliderThumb, useRangeCalendar, useCalendar, usePopover, DismissButton, usePress, useDateSegment, useCalendarGrid, useCalendarCell, useTooltipTrigger, useTooltip, useOverlayPosition } from 'react-aria';
+import { useButton, useHover, useFocusRing, mergeProps as mergeProps$1, useTextField, useCheckbox, VisuallyHidden, useSwitch, useRadioGroup, useRadio, useTabList, useTab, useTabPanel, FocusScope, useLink, useSeparator, useProgressBar, useToggleButton, useListBox, useOption, useSearchField, usePreventScroll, useOverlay, useSlider, useDatePicker, useDialog, useLocale, useDateField, useSliderThumb, useRangeCalendar, useCalendar, usePopover, DismissButton, usePress, useDateSegment, useCalendarGrid, useCalendarCell, useTooltipTrigger, useTooltip, useOverlayPosition } from 'react-aria';
 import { mergeProps, filterDOMProps } from '@react-aria/utils';
 import { useToggleState, useRadioGroupState, useTabListState, Item, useOverlayTriggerState, useListState, useSearchFieldState, useMenuTriggerState, useSliderState, useDatePickerState, useDateFieldState, useRangeCalendarState, useCalendarState, useTooltipTriggerState } from 'react-stately';
-import { MenuItem as MenuItem$1, Menu as Menu$1, MenuTrigger as MenuTrigger$1, Popover, MenuSection as MenuSection$1, Separator, Header, useSlottedContext, ButtonContext } from 'react-aria-components';
 import { createPortal } from 'react-dom';
+import { MenuItem as MenuItem$1, Menu as Menu$1, MenuTrigger as MenuTrigger$1, Popover, MenuSection as MenuSection$1, Separator, Header, useSlottedContext, ButtonContext } from 'react-aria-components';
 import { createCalendar, getWeeksInMonth, isSameDay, today, getLocalTimeZone } from '@internationalized/date';
 
 // src/utils/cn.ts
@@ -467,6 +467,10 @@ var buttonVariants = 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: {
         /**
@@ -475,17 +479,17 @@ var buttonVariants = 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.
@@ -493,10 +497,10 @@ var buttonVariants = 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.
@@ -504,16 +508,15 @@ var buttonVariants = 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.
@@ -521,17 +524,16 @@ var buttonVariants = 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.
@@ -539,9 +541,9 @@ var buttonVariants = 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"
         ]
       },
       /**
@@ -579,6 +581,29 @@ var buttonVariants = cva(
     }
   }
 );
+var buttonContainerVariants = 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 = cva(
   [
     "absolute inset-0 rounded-[inherit] overflow-hidden pointer-events-none opacity-0",
@@ -881,6 +906,7 @@ var Button = forwardRef(
           className
         ),
         children: [
+          /* @__PURE__ */ jsx("span", { className: cn(buttonContainerVariants({ variant })), "aria-hidden": "true" }),
           ripples,
           /* @__PURE__ */ jsx("span", { className: cn(buttonStateLayerVariants({ variant })), "aria-hidden": "true" }),
           /* @__PURE__ */ jsx("span", { className: cn(buttonFocusRingVariants()), "aria-hidden": "true" }),
@@ -4388,7 +4414,51 @@ var NavigationBarItem = forwardRef(
 );
 NavigationBarItem.displayName = "NavigationBarItem";
 var DrawerContext = createContext(null);
-var DrawerIconOnlyContext = createContext(false);
+var ModalDrawerPanel = ({
+  ariaLabel,
+  onClose,
+  className,
+  animationState,
+  getAnimationClassName,
+  onTransitionEnd,
+  forwardedRef,
+  children
+}) => {
+  const panelRef = useRef(null);
+  usePreventScroll();
+  const { dialogProps } = useDialog(
+    { "aria-label": ariaLabel },
+    panelRef
+  );
+  const { overlayProps } = useOverlay(
+    { isOpen: true, onClose, isDismissable: true, shouldCloseOnBlur: false },
+    panelRef
+  );
+  const setRef = useCallback(
+    (node) => {
+      panelRef.current = node;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else if (forwardedRef !== null && forwardedRef !== void 0) {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...mergeProps(overlayProps, dialogProps),
+      ref: setRef,
+      "aria-modal": "true",
+      className: cn(className, getAnimationClassName?.(animationState)),
+      "data-animation-state": animationState,
+      onTransitionEnd,
+      children
+    }
+  );
+};
+ModalDrawerPanel.displayName = "ModalDrawerPanel";
 var HeadlessDrawer = forwardRef(
   ({
     variant = "standard",
@@ -4399,8 +4469,9 @@ var HeadlessDrawer = forwardRef(
     children,
     className,
     scrimClassName,
-    disableRipple = false,
-    iconOnly = false
+    getAnimationClassName,
+    getScrimAnimationClassName,
+    disableRipple = false
   }, ref) => {
     const state = useOverlayTriggerState({
       ...open !== void 0 ? { isOpen: open } : {},
@@ -4411,77 +4482,99 @@ var HeadlessDrawer = forwardRef(
     const close = useCallback(() => {
       state.close();
     }, [state]);
+    const [animationState, setAnimationState] = useState("exited");
+    const closedRef = useRef(false);
+    const exitFallbackRef = useRef(null);
+    useEffect(() => {
+      if (!isOpen) return;
+      closedRef.current = false;
+      setAnimationState("entering");
+      const id = setTimeout(() => {
+        setAnimationState("visible");
+      }, 0);
+      return () => clearTimeout(id);
+    }, [isOpen]);
+    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]);
+    useEffect(
+      () => () => {
+        if (exitFallbackRef.current !== null) {
+          clearTimeout(exitFallbackRef.current);
+        }
+      },
+      []
+    );
+    const handleTransitionEnd = 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__ */ jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("nav", { ref, role: "navigation", "aria-label": ariaLabel, children: isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-testid": "drawer-scrim",
-            className: scrimClassName,
-            onClick: () => state.close(),
-            "aria-hidden": "true"
-          }
-        ),
-        /* @__PURE__ */ jsx(FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsx(
-          ModalDrawerPanel,
-          {
-            ariaLabel,
-            onClose: () => state.close(),
-            className,
-            children
-          }
-        ) })
-      ] }) }) });
+    if (variant === "standard") {
+      return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+        "nav",
+        {
+          ref,
+          role: "navigation",
+          "aria-label": ariaLabel,
+          className,
+          children
+        }
+      ) });
     }
-    return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ 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__ */ jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-testid": "drawer-scrim",
+          className: cn(scrimClassName, getScrimAnimationClassName?.(animationState)),
+          "data-animation-state": animationState,
+          onClick: close,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ModalDrawerPanel,
+        {
+          ariaLabel,
+          onClose: close,
+          className,
+          animationState,
+          getAnimationClassName,
+          onTransitionEnd: handleTransitionEnd,
+          forwardedRef: ref,
+          children
+        }
+      )
+    ] }) });
+    return createPortal(content, document.body);
   }
 );
 HeadlessDrawer.displayName = "HeadlessDrawer";
-var ModalDrawerPanel = ({
-  ariaLabel,
-  onClose,
-  className,
-  children
-}) => {
-  const panelRef = useRef(null);
-  usePreventScroll();
-  const { dialogProps } = useDialog({ "aria-label": ariaLabel }, panelRef);
-  const { overlayProps } = useOverlay(
-    {
-      isOpen: true,
-      onClose,
-      isDismissable: true,
-      shouldCloseOnBlur: false
-    },
-    panelRef
-  );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...mergeProps(overlayProps, dialogProps),
-      ref: panelRef,
-      className,
-      "aria-modal": "true",
-      children
-    }
-  );
-};
-ModalDrawerPanel.displayName = "ModalDrawerPanel";
 var HeadlessDrawerItem = forwardRef(
   ({
     href,
@@ -4499,7 +4592,6 @@ var HeadlessDrawerItem = forwardRef(
     ...restProps
   }, forwardedRef) => {
     const internalRef = useRef(null);
-    const { isFocusVisible, focusProps } = useFocusRing();
     if (href) {
       const linkRef = forwardedRef ?? internalRef;
       const { linkProps } = useLink(
@@ -4513,14 +4605,12 @@ var HeadlessDrawerItem = forwardRef(
       return /* @__PURE__ */ jsx(
         "a",
         {
-          ...mergeProps(linkProps, focusProps, { onMouseDown }),
+          ...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
         }
       );
@@ -4543,13 +4633,11 @@ var HeadlessDrawerItem = forwardRef(
       "button",
       {
         type: "button",
-        ...mergeProps(buttonProps, focusProps, { onMouseDown }),
+        ...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
       }
     );
@@ -4644,120 +4732,195 @@ var drawerVariants = 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 = cva(
+var drawerAnimationVariants = 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 = 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 = cva([
-  "fixed inset-0 z-40",
-  "bg-scrim opacity-32",
-  "transition-opacity duration-short4 ease-standard"
+var drawerItemVariants = 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 = cva(["flex flex-col w-full"]);
-var drawerSectionHeaderVariants = cva([
-  "px-4 pt-4 pb-2",
-  "text-title-small text-on-surface-variant",
-  "select-none"
+var drawerItemActiveIndicatorVariants = 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 = 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 = 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 = 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 = cva(["relative z-10 flex-1 min-w-0 truncate"]);
+var drawerItemBadgeVariants = 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 = cva([
+  "px-4 pt-4 pb-1",
+  "text-title-small",
+  "font-medium",
+  "tracking-[0.1px]",
+  "text-on-surface-variant",
+  "select-none"
+]);
+var drawerScrimVariants = 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 = cva(["flex flex-col w-full"]);
+var drawerSectionHeaderVariants = cva([
+  "px-4 pt-4 pb-2",
+  "text-title-small",
+  "font-medium",
+  "tracking-[0.1px]",
+  "text-on-surface-variant",
+  "select-none"
 ]);
-cva(["border-t border-outline-variant", "mx-4 my-2"]);
 var DrawerSection = forwardRef(
   ({ header, children, showDivider = true, _isFirstSection = false, className }, ref) => {
     const shouldShowDivider = showDivider && !_isFirstSection;
@@ -4779,19 +4942,19 @@ var Drawer = 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.Children.map(children, (child) => {
       if (React.isValidElement(child) && child.type === DrawerSection) {
@@ -4804,7 +4967,7 @@ var Drawer = forwardRef(
       }
       return child;
     });
-    return /* @__PURE__ */ jsx(DrawerIconOnlyContext.Provider, { value: iconOnly, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(
       HeadlessDrawer,
       {
         ref,
@@ -4815,153 +4978,99 @@ var Drawer = 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 = 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 = cva(["inline-flex", ...badgeAppearance]);
-function isBadgeConfig(badge) {
-  return typeof badge === "object" && badge !== null && !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 = 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 = useContext(DrawerIconOnlyContext);
+    const [isPressed, setIsPressed] = useState(false);
+    const handlePressStart = useCallback(() => setIsPressed(true), []);
+    const handlePressEnd = useCallback(() => setIsPressed(false), []);
+    const { isHovered, hoverProps } = useHover({ isDisabled });
+    const { isFocusVisible, focusProps } = 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__ */ jsx("span", { className: "relative z-10 ml-auto flex shrink-0 items-center pr-2", children: /* @__PURE__ */ jsx(
-          "span",
-          {
-            role: "status",
-            "aria-label": ariaLabel,
-            "data-dot": isDot ? "" : void 0,
-            className: cn(badgeStaticVariants()),
-            children: displayValue
-          }
-        ) });
-      }
-      return /* @__PURE__ */ jsx("span", { className: "relative z-10 ml-auto flex shrink-0 items-center pr-2", "aria-hidden": "true", children: badge });
-    };
+    const mergedInteractionProps = mergeProps$1(
+      hoverProps,
+      focusProps,
+      { onPressStart: handlePressStart, onPressEnd: handlePressEnd },
+      restProps
+    );
     return /* @__PURE__ */ 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__ */ jsx(
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: drawerItemActiveIndicatorVariants() }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: drawerItemStateLayerVariants() }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: drawerItemFocusRingVariants() }),
+          /* @__PURE__ */ 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__ */ jsxs(
+          icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: drawerItemIconVariants(), children: icon }),
+          /* @__PURE__ */ jsx("span", { className: drawerItemLabelVariants(), children: label }),
+          badge !== void 0 && badge !== null && /* @__PURE__ */ jsx(
             "span",
             {
-              className: cn(
-                "relative z-10 flex min-w-0 flex-1 flex-col text-left",
-                isIconOnly && "hidden"
-              ),
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
-                secondaryText && /* @__PURE__ */ 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 = forwardRef(
+  ({ children, className, ...restProps }, ref) => /* @__PURE__ */ jsx("span", { ref, className: cn(drawerHeadlineVariants(), className), ...restProps, children })
+);
+DrawerHeadline.displayName = "DrawerHeadline";
 var progressContainerVariants = cva(["inline-flex", "flex-col", "gap-1"], {
   variants: {
     type: {
@@ -5903,50 +6012,460 @@ var Card = forwardRef(function Card2({
         /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
       ]
     }
-  );
-});
-Card.displayName = "Card";
-var cardMediaVariants = 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 = 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 = forwardRef(function CardMedia2({ src, alt, aspectRatio = "auto", className }, ref) {
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      ref,
+      src,
+      alt,
+      ...alt === "" && { role: "presentation" },
+      className: cn(cardMediaVariants({ aspectRatio }), className)
+    }
+  );
+});
+CardMedia.displayName = "CardMedia";
+var CardHeader = forwardRef(function CardHeader2({ headline, subheader, className }, ref) {
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("p-4", className), children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-on-surface text-title-medium", children: headline }),
+    subheader !== void 0 && /* @__PURE__ */ jsx("p", { className: "text-on-surface-variant text-body-medium mt-1", children: subheader })
+  ] });
+});
+CardHeader.displayName = "CardHeader";
+var CardContent = forwardRef(function CardContent2({ children, className }, ref) {
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("p-4", className), children });
+});
+CardContent.displayName = "CardContent";
+var CardActions = forwardRef(function CardActions2({ children, className }, ref) {
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center justify-end gap-2 p-4 pt-0", className), children });
+});
+CardActions.displayName = "CardActions";
+var menuContainerVariants = 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 = 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 = 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 = 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 = 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 = 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 = 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 = cva(["flex flex-col w-full"]);
+var menuSectionHeaderVariants = 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 = cva(["border-t border-outline-variant", "my-0.5 mx-3"]);
+cva(["h-0.5 w-full"]);
+var menuItemTrailingTextVariants = 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 = 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 = forwardRef(function CardMedia2({ src, alt, aspectRatio = "auto", className }, ref) {
-  return /* @__PURE__ */ jsx(
-    "img",
-    {
-      ref,
-      src,
-      alt,
-      ...alt === "" && { role: "presentation" },
-      className: cn(cardMediaVariants({ aspectRatio }), className)
+);
+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 = forwardRef(function CardHeader2({ headline, subheader, className }, ref) {
-  return /* @__PURE__ */ jsxs("div", { ref, className: cn("p-4", className), children: [
-    /* @__PURE__ */ jsx("h3", { className: "text-on-surface text-title-medium", children: headline }),
-    subheader !== void 0 && /* @__PURE__ */ jsx("p", { className: "text-on-surface-variant text-body-medium mt-1", children: subheader })
-  ] });
-});
-CardHeader.displayName = "CardHeader";
-var CardContent = forwardRef(function CardContent2({ children, className }, ref) {
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("p-4", className), children });
-});
-CardContent.displayName = "CardContent";
-var CardActions = forwardRef(function CardActions2({ children, className }, ref) {
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center justify-end gap-2 p-4 pt-0", className), children });
-});
-CardActions.displayName = "CardActions";
+  }
+);
 var MenuContext = createContext(null);
 function useMenuContext() {
   return useContext(MenuContext);
@@ -5984,7 +6503,16 @@ function HeadlessMenuTrigger({
   const [triggerChild, menuChild] = childrenArray;
   return /* @__PURE__ */ jsxs(MenuTrigger$1, { ...rest, children: [
     /* @__PURE__ */ jsx(TriggerBridge, { children: triggerChild }),
-    /* @__PURE__ */ jsx(Popover, { placement, shouldFlip, offset: 4, children: menuChild })
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        placement,
+        shouldFlip,
+        offset: 4,
+        className: menuPopoverVariants(),
+        children: menuChild
+      }
+    )
   ] });
 }
 function HeadlessMenu({
@@ -6036,192 +6564,6 @@ function HeadlessMenuDivider({
 }) {
   return /* @__PURE__ */ jsx(Separator, { ...props, className: className ?? "" });
 }
-var menuContainerVariants = 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 = 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 = cva(["flex flex-col w-full"]);
-var menuSectionHeaderVariants = cva([
-  "px-3 pt-2 pb-1",
-  "text-title-small text-on-surface-variant",
-  "select-none"
-]);
-var menuDividerVariants = cva(["border-t border-outline-variant", "my-2 mx-0"]);
-cva(["h-2 w-full"]);
-var menuItemTrailingTextVariants = cva([
-  "ml-auto shrink-0 text-label-large text-on-surface-variant",
-  "select-none"
-]);
-var menuItemDescriptionVariants = cva([
-  "text-body-medium text-on-surface-variant",
-  "select-none"
-]);
 var Menu = forwardRef(function Menu2({
   children,
   className,
@@ -6281,7 +6623,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",
@@ -6304,19 +6652,18 @@ var MenuItem = 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__ */ jsx(
     HeadlessMenuItem,
@@ -6326,24 +6673,48 @@ var MenuItem = forwardRef(function MenuItem2({
       className: computeClassName,
       onMouseDown,
       children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-        !disableRipple && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]", children: ripples }),
-        (leadingIcon != null || isSelectionMenu) && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-testid": "menuitem-highlight",
+            className: menuItemHighlightVariants({ colorScheme, menuStyle })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: menuItemStateLayerVariants({ colorScheme, menuStyle })
+          }
+        ),
+        /* @__PURE__ */ 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__ */ jsx(CheckIcon, {}) : null : leadingIcon
+            "data-testid": "menuitem-focus-ring",
+            className: menuItemFocusRingVariants()
+          }
+        ),
+        !disableRipple && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "pointer-events-none absolute inset-0 z-[3] overflow-hidden rounded-[inherit]"
+            ),
+            children: ripples
           }
         ),
+        (leadingIcon != null || isSelectionMenu) && /* @__PURE__ */ jsx("span", { className: menuItemIconVariants({ colorScheme, menuStyle }), "aria-hidden": "true", children: isSelectionMenu && leadingIcon == null ? isSelected ? /* @__PURE__ */ jsx(CheckIcon, {}) : null : leadingIcon }),
         description != null ? /* @__PURE__ */ jsxs("span", { className: "relative z-10 flex min-w-0 flex-1 flex-col", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-body-large", children }),
-          /* @__PURE__ */ jsx("span", { className: menuItemDescriptionVariants(), children: description })
-        ] }) : /* @__PURE__ */ jsx("span", { className: "text-body-large relative z-10 min-w-0 flex-1", children }),
+          /* @__PURE__ */ jsx("span", { className: "text-label-large group-data-[disabled]/menuitem:text-on-surface/38", children }),
+          /* @__PURE__ */ jsx("span", { className: menuItemDescriptionVariants({ colorScheme, menuStyle }), children: description })
+        ] }) : /* @__PURE__ */ 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__ */ jsx("span", { className: "relative z-10 shrink-0", children: badge }),
         trailingIcon != null && trailingText == null && /* @__PURE__ */ 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
           }
@@ -6351,7 +6722,10 @@ var MenuItem = forwardRef(function MenuItem2({
         trailingText != null && trailingIcon == null && /* @__PURE__ */ jsx(
           "span",
           {
-            className: cn(menuItemTrailingTextVariants(), "relative z-10"),
+            className: cn(
+              menuItemTrailingTextVariants({ colorScheme, menuStyle }),
+              "relative z-10"
+            ),
             "aria-keyshortcuts": trailingText,
             children: trailingText
           }
@@ -6367,6 +6741,8 @@ function MenuSection({
   className,
   "aria-label": ariaLabel
 }) {
+  const ctx = useMenuContext();
+  const colorScheme = ctx?.colorScheme ?? "standard";
   const sectionAriaLabel = ariaLabel ?? header;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     showDivider && /* @__PURE__ */ jsx(HeadlessMenuDivider, { className: menuDividerVariants() }),
@@ -6376,7 +6752,7 @@ function MenuSection({
         "aria-label": sectionAriaLabel,
         className: cn(menuSectionVariants(), className),
         children: [
-          header && /* @__PURE__ */ jsx(Header, { className: menuSectionHeaderVariants(), "aria-hidden": "true", children: header }),
+          header && /* @__PURE__ */ jsx(Header, { className: menuSectionHeaderVariants({ colorScheme }), "aria-hidden": "true", children: header }),
           children
         ]
       }
@@ -9732,6 +10108,39 @@ var BadgeHeadless = 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 = 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
+]);
+cva(["inline-flex", ...badgeAppearance]);
 var getDisplayValue = (count, max) => {
   if (count === void 0) return "";
   return count > max ? `${max}+` : count.toString();
@@ -15279,7 +15688,7 @@ var modeToggleStateLayerVariants = cva([
   "group-data-[focus-visible]/mode-toggle:opacity-10",
   "group-data-[pressed]/mode-toggle:opacity-10"
 ]);
-var scrimVariants2 = cva([
+var scrimVariants = cva([
   "fixed inset-0 z-40",
   "bg-scrim opacity-32",
   "transition-opacity duration-medium2 ease-standard"
@@ -16022,7 +16431,7 @@ var DatePickerModalStyled = forwardRef(
           !reducedMotion && MODAL_DIALOG_MOTION,
           className
         ),
-        scrimClassName: cn(scrimVariants2()),
+        scrimClassName: cn(scrimVariants()),
         slots: {
           CellComponent: StyledCalendarCell,
           NavButtonComponent: StyledNavButton,
@@ -16472,7 +16881,7 @@ var DatePickerModalInputStyled = forwardRef(
           MODAL_INPUT_CONTENT_STRUCTURAL,
           className
         ),
-        scrimClassName: cn(scrimVariants2()),
+        scrimClassName: cn(scrimVariants()),
         ActionButtonComponent: StyledActionButton
       }
     );
@@ -16584,6 +16993,6 @@ var DateField = forwardRef((props, forwardedRef) => {
 });
 DateField.displayName = "DateField";
 
-export { AppBar, AppBarHeadless, Badge, BadgeContent, BadgeHeadless, BottomSheet, BottomSheetContext, BottomSheetHandle, BottomSheetHeadless, Button, ButtonGroup, ButtonGroupContext, ButtonGroupHeadless, CalendarCore, Card, CardActions, CardContent, CardHeader, CardHeadless, CardMedia, Checkbox, Chip, ChipHeadless, ChipSet, DateField, DatePicker, DatePickerDocked, DatePickerModal, DatePickerModalInput, Dialog, DialogActions, DialogContent, DialogContext, DialogHeadless, DialogHeadline, Divider, DividerHeadless, Drawer, DrawerIconOnlyContext, DrawerItem, DrawerSection, FAB, FABHeadless, FABMenu, FABMenuContext, FABMenuHeadless, FABMenuItem, HeadlessDrawer, HeadlessDrawerItem, HeadlessMenu, HeadlessMenuDivider, HeadlessMenuItem, HeadlessMenuSection, HeadlessMenuTrigger, HeadlessNavigationBar, HeadlessNavigationBarItem, HeadlessTab, HeadlessTabList, HeadlessTabPanel, IconButton, IconButtonHeadless, List, ListHeadless, ListItem, ListItemHeadless, ListItemLeading, ListItemText, ListItemTrailing, Menu, MenuContext, MenuDivider, MenuItem, MenuSection, MenuTrigger, NavigationBar, NavigationBarItem, Progress, ProgressHeadless, Radio, RadioGroup, RadioGroupHeadless, RadioHeadless, RichTooltip, STATE_LAYER_OPACITY, Search, SearchBar, SearchBarHeadless, SearchView, SearchViewHeadless, Slider, SliderHeadless, Snackbar, SnackbarContext, SnackbarHeadless, SnackbarProvider, SplitButton, SplitButtonHeadless, StyledActionButton, StyledCalendarCell, StyledCalendarTitle, StyledNavButton, StyledWeekday, StyledYearItem, Switch, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, TabList, TabPanel, Tabs, TextField, TimePicker, TimePickerDial, TimePickerInput, Tooltip, TooltipOverlayHeadless, TooltipTrigger, TooltipTriggerHeadless, actionButtonFocusRingVariants, actionButtonStateLayerVariants, actionButtonVariants, actionRowVariants, applyStateLayer, badgeVariants2 as badgeVariants, bottomSheetAnimationVariants, bottomSheetHandlePillVariants, bottomSheetHandleWrapperVariants, bottomSheetScrimVariants, bottomSheetVariants, buttonGroupFocusRingVariants, buttonGroupRootVariants, buttonGroupVariants, calendarCellFocusRingVariants, calendarCellStateLayerVariants, calendarCellVariants, calendarDividerVariants, calendarHeaderVariants, calendarTitleIconVariants, calendarTitleStateLayerVariants, calendarTitleTextVariants, calendarTitleVariants, cardVariants, chipVariants, clockDialContainerVariants, clockDialNumberVariants, clockHandCenterVariants, clockHandHandleVariants, clockHandTrackVariants, cn, dateFieldVariants, dateInputErrorVariants, dateInputFieldGroupVariants, dateInputFieldVariants, dateInputLabelVariants, datePickerContainerVariants, dateSegmentPlaceholderVariants, dividerVariants, dockedFieldGroupVariants, dockedLabelVariants, dockedTriggerStateLayerVariants, dockedTriggerVariants, fabMenuItemFocusRingVariants, fabMenuItemIconVariants, fabMenuItemLabelVariants, fabMenuItemStateLayerVariants, fabMenuItemVariants, fabMenuListVariants, fabMenuVariants, generateMD3Theme, getColorValue, getConnectedRadiusClasses, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, headlineVariants, hexToRgb, listItemVariants, listVariants, modalDialogVariants, modalHeaderVariants, modeToggleStateLayerVariants, modeToggleVariants, navButtonFocusRingVariants, navButtonStateLayerVariants, navButtonVariants, periodSelectorContainerVariants, periodSelectorItemVariants, popoverVariants, pxToRem, remToPx, rgbToHex, richTooltipVariants, scrimVariants2 as scrimVariants, searchBarAvatarVariants, searchBarFocusRingVariants, searchBarInputVariants, searchBarLeadingIconVariants, searchBarRootVariants, searchBarStateLayerVariants, searchBarTrailingActionVariants, searchBarTrailingActionsVariants, searchViewBackButtonVariants, searchViewClearButtonVariants, searchViewContentVariants, searchViewDividerVariants, searchViewHeaderVariants, searchViewInputVariants, searchViewTrailingActionVariants, searchViewTrailingActionsVariants, searchViewVariants, sliderActiveTrackVariants, sliderContainerVariants, sliderHandleStateLayerVariants, sliderHandleVariants, sliderInactiveTrackVariants, sliderTrackLayoutVariants, splitButtonContainerVariants, splitButtonFocusRingVariants, splitButtonIconVariants, splitButtonLabelVariants, splitButtonLeadingVariants, splitButtonMenuItemVariants, splitButtonMenuVariants, splitButtonStateLayerVariants, splitButtonTrailingVariants, splitButtonVariants, supportingTextVariants, timeInputFieldVariants, timePickerActionButtonVariants, timePickerActionRowVariants, timePickerContainerVariants, timePickerHeadlineVariants, timePickerModeToggleVariants, timeSelectorContainerVariants, timeSeparatorVariants, tooltipVariants, truncateText, useBottomSheetContext, useBottomSheetDrag, useButtonGroup, useDialogContext, useFABMenuContext, useMenuContext, useOptionalButtonGroup, useSnackbar, weekdayVariants, withOpacity, yearGridVariants, yearItemFocusRingVariants, yearItemStateLayerVariants, yearItemVariants };
+export { AppBar, AppBarHeadless, Badge, BadgeContent, BadgeHeadless, BottomSheet, BottomSheetContext, BottomSheetHandle, BottomSheetHeadless, Button, ButtonGroup, ButtonGroupContext, ButtonGroupHeadless, CalendarCore, Card, CardActions, CardContent, CardHeader, CardHeadless, CardMedia, Checkbox, Chip, ChipHeadless, ChipSet, DateField, DatePicker, DatePickerDocked, DatePickerModal, DatePickerModalInput, Dialog, DialogActions, DialogContent, DialogContext, DialogHeadless, DialogHeadline, Divider, DividerHeadless, Drawer, DrawerContext, DrawerHeadline, DrawerItem, DrawerSection, FAB, FABHeadless, FABMenu, FABMenuContext, FABMenuHeadless, FABMenuItem, HeadlessDrawer, HeadlessDrawerItem, HeadlessMenu, HeadlessMenuDivider, HeadlessMenuItem, HeadlessMenuSection, HeadlessMenuTrigger, HeadlessNavigationBar, HeadlessNavigationBarItem, HeadlessTab, HeadlessTabList, HeadlessTabPanel, IconButton, IconButtonHeadless, List, ListHeadless, ListItem, ListItemHeadless, ListItemLeading, ListItemText, ListItemTrailing, Menu, MenuContext, MenuDivider, MenuItem, MenuSection, MenuTrigger, NavigationBar, NavigationBarItem, Progress, ProgressHeadless, Radio, RadioGroup, RadioGroupHeadless, RadioHeadless, RichTooltip, STATE_LAYER_OPACITY, Search, SearchBar, SearchBarHeadless, SearchView, SearchViewHeadless, Slider, SliderHeadless, Snackbar, SnackbarContext, SnackbarHeadless, SnackbarProvider, SplitButton, SplitButtonHeadless, StyledActionButton, StyledCalendarCell, StyledCalendarTitle, StyledNavButton, StyledWeekday, StyledYearItem, Switch, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, TabList, TabPanel, Tabs, TextField, TimePicker, TimePickerDial, TimePickerInput, Tooltip, TooltipOverlayHeadless, TooltipTrigger, TooltipTriggerHeadless, actionButtonFocusRingVariants, actionButtonStateLayerVariants, actionButtonVariants, actionRowVariants, applyStateLayer, badgeVariants2 as badgeVariants, bottomSheetAnimationVariants, bottomSheetHandlePillVariants, bottomSheetHandleWrapperVariants, bottomSheetScrimVariants, bottomSheetVariants, buttonGroupFocusRingVariants, buttonGroupRootVariants, buttonGroupVariants, calendarCellFocusRingVariants, calendarCellStateLayerVariants, calendarCellVariants, calendarDividerVariants, calendarHeaderVariants, calendarTitleIconVariants, calendarTitleStateLayerVariants, calendarTitleTextVariants, calendarTitleVariants, cardVariants, chipVariants, clockDialContainerVariants, clockDialNumberVariants, clockHandCenterVariants, clockHandHandleVariants, clockHandTrackVariants, cn, dateFieldVariants, dateInputErrorVariants, dateInputFieldGroupVariants, dateInputFieldVariants, dateInputLabelVariants, datePickerContainerVariants, dateSegmentPlaceholderVariants, dividerVariants, dockedFieldGroupVariants, dockedLabelVariants, dockedTriggerStateLayerVariants, dockedTriggerVariants, drawerAnimationVariants, drawerHeadlineVariants, drawerItemActiveIndicatorVariants, drawerItemBadgeVariants, drawerItemFocusRingVariants, drawerItemIconVariants, drawerItemLabelVariants, drawerItemStateLayerVariants, drawerItemVariants, drawerScrimAnimationVariants, drawerScrimVariants, drawerSectionHeaderVariants, drawerSectionVariants, drawerVariants, fabMenuItemFocusRingVariants, fabMenuItemIconVariants, fabMenuItemLabelVariants, fabMenuItemStateLayerVariants, fabMenuItemVariants, fabMenuListVariants, fabMenuVariants, generateMD3Theme, getColorValue, getConnectedRadiusClasses, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, headlineVariants, hexToRgb, listItemVariants, listVariants, modalDialogVariants, modalHeaderVariants, modeToggleStateLayerVariants, modeToggleVariants, navButtonFocusRingVariants, navButtonStateLayerVariants, navButtonVariants, periodSelectorContainerVariants, periodSelectorItemVariants, popoverVariants, pxToRem, remToPx, rgbToHex, richTooltipVariants, scrimVariants, searchBarAvatarVariants, searchBarFocusRingVariants, searchBarInputVariants, searchBarLeadingIconVariants, searchBarRootVariants, searchBarStateLayerVariants, searchBarTrailingActionVariants, searchBarTrailingActionsVariants, searchViewBackButtonVariants, searchViewClearButtonVariants, searchViewContentVariants, searchViewDividerVariants, searchViewHeaderVariants, searchViewInputVariants, searchViewTrailingActionVariants, searchViewTrailingActionsVariants, searchViewVariants, sliderActiveTrackVariants, sliderContainerVariants, sliderHandleStateLayerVariants, sliderHandleVariants, sliderInactiveTrackVariants, sliderTrackLayoutVariants, splitButtonContainerVariants, splitButtonFocusRingVariants, splitButtonIconVariants, splitButtonLabelVariants, splitButtonLeadingVariants, splitButtonMenuItemVariants, splitButtonMenuVariants, splitButtonStateLayerVariants, splitButtonTrailingVariants, splitButtonVariants, supportingTextVariants, timeInputFieldVariants, timePickerActionButtonVariants, timePickerActionRowVariants, timePickerContainerVariants, timePickerHeadlineVariants, timePickerModeToggleVariants, timeSelectorContainerVariants, timeSeparatorVariants, tooltipVariants, truncateText, useBottomSheetContext, useBottomSheetDrag, useButtonGroup, useDialogContext, useFABMenuContext, useMenuContext, useOptionalButtonGroup, useSnackbar, weekdayVariants, withOpacity, yearGridVariants, yearItemFocusRingVariants, yearItemStateLayerVariants, yearItemVariants };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map