@tinybigui/react 0.1.1 → 0.3.0

package/dist/index.js

@@ -1,15 +1,49 @@
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { extendTailwindMerge } from 'tailwind-merge';
 import { argbFromHex, themeFromSourceColor } from '@material/material-color-utilities';
 export { argbFromHex, hexFromArgb } from '@material/material-color-utilities';
-import { forwardRef, useRef, useEffect, createContext, useContext, useState, useCallback } from 'react';
-import { useButton, useTextField, useFocusRing, useCheckbox, VisuallyHidden, mergeProps as mergeProps$1, useSwitch, useRadioGroup, useRadio } from 'react-aria';
-import { mergeProps, filterDOMProps } from '@react-aria/utils';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useRef, useEffect, createContext, useContext, useMemo, useCallback, useState, useLayoutEffect, useId, Children, isValidElement, cloneElement } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
-import { useToggleState, useRadioGroupState } from 'react-stately';
+import { useButton, useTextField, useFocusRing, useCheckbox, VisuallyHidden, mergeProps as mergeProps$1, useSwitch, useRadioGroup, useRadio, useTabList, useTab, useTabPanel, FocusScope, usePreventScroll, useDialog, useOverlay, useLink, useProgressBar } from 'react-aria';
+import { mergeProps, filterDOMProps } from '@react-aria/utils';
+import { useToggleState, useRadioGroupState, useTabListState, Item, useOverlayTriggerState } 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';
 
 // src/utils/cn.ts
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            // MD3 Display scale
+            "display-large",
+            "display-medium",
+            "display-small",
+            // MD3 Headline scale
+            "headline-large",
+            "headline-medium",
+            "headline-small",
+            // MD3 Title scale
+            "title-large",
+            "title-medium",
+            "title-small",
+            // MD3 Body scale
+            "body-large",
+            "body-medium",
+            "body-small",
+            // MD3 Label scale
+            "label-large",
+            "label-medium",
+            "label-small"
+          ]
+        }
+      ]
+    }
+  }
+});
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -130,6 +164,162 @@ function truncateText(lines = 1) {
     textOverflow: "ellipsis"
   };
 }
+function useScrollElevation(options = {}) {
+  const { scrolled: controlledScrolled, onScrollStateChange, threshold = 0 } = options;
+  const isControlled = controlledScrolled !== void 0;
+  const [internalScrolled, setInternalScrolled] = useState(false);
+  const handleScroll = useCallback(() => {
+    const currentlyScrolled = window.scrollY > threshold;
+    setInternalScrolled((prev) => {
+      if (prev !== currentlyScrolled) {
+        onScrollStateChange?.(currentlyScrolled);
+        return currentlyScrolled;
+      }
+      return prev;
+    });
+  }, [threshold, onScrollStateChange]);
+  useEffect(() => {
+    if (isControlled) return;
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [isControlled, handleScroll]);
+  return {
+    isScrolled: isControlled ? controlledScrolled : internalScrolled
+  };
+}
+var AppBarHeadless = forwardRef(
+  ({ className, children, scrolled: scrolledProp, onScrollStateChange }, ref) => {
+    const { isScrolled } = useScrollElevation({
+      scrolled: scrolledProp,
+      onScrollStateChange
+    });
+    return /* @__PURE__ */ jsx("header", { ref, role: "banner", className, "data-scrolled": isScrolled, children });
+  }
+);
+AppBarHeadless.displayName = "AppBarHeadless";
+var appBarVariants = cva(
+  [
+    // Base classes (always applied)
+    "w-full",
+    "bg-surface text-on-surface",
+    "flex flex-col",
+    // Elevation transition using MD3 motion tokens
+    "transition-shadow duration-medium2 ease-standard"
+  ],
+  {
+    variants: {
+      /**
+       * Size variant (MD3 specification)
+       * Controls bar height, title placement, and type scale
+       */
+      variant: {
+        /** 64dp, title left-aligned, title-large */
+        small: "h-appbar-small",
+        /** 64dp, title centered, title-large */
+        "center-aligned": "h-appbar-small variant-center-aligned",
+        /** 112dp, title bottom-left, headline-small */
+        medium: "h-appbar-medium",
+        /** 152dp, title bottom-left, display-small */
+        large: "h-appbar-large"
+      },
+      /**
+       * Scroll state — controls surface elevation
+       * MD3: flat at rest, elevated on scroll
+       */
+      scrolled: {
+        false: "shadow-elevation-0",
+        true: "shadow-elevation-2"
+      }
+    },
+    defaultVariants: {
+      variant: "small",
+      scrolled: false
+    }
+  }
+);
+var appBarTitleVariants = cva("text-on-surface font-normal truncate", {
+  variants: {
+    variant: {
+      small: "text-title-large",
+      "center-aligned": "text-title-large",
+      medium: "text-headline-small",
+      large: "text-display-small"
+    }
+  },
+  defaultVariants: {
+    variant: "small"
+  }
+});
+var AppBar = forwardRef(
+  ({
+    variant = "small",
+    title,
+    navigationIcon,
+    actions,
+    scrolled: scrolledProp,
+    onScrollStateChange,
+    className
+  }, ref) => {
+    const { isScrolled } = useScrollElevation({
+      scrolled: scrolledProp,
+      onScrollStateChange
+    });
+    const isExpandedVariant = variant === "medium" || variant === "large";
+    return /* @__PURE__ */ jsxs(
+      AppBarHeadless,
+      {
+        ref,
+        scrolled: isScrolled,
+        className: cn(appBarVariants({ variant, scrolled: isScrolled }), className),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-slot": "top-row",
+              className: cn(
+                "flex items-center",
+                "px-1",
+                // Small and center-aligned: fill the full bar height
+                !isExpandedVariant && "flex-1",
+                // Expanded variants: fixed height for the top row (64dp)
+                isExpandedVariant && "h-16 shrink-0"
+              ),
+              children: [
+                navigationIcon != null && /* @__PURE__ */ jsx("div", { "data-slot": "navigation", className: "flex shrink-0 items-center", children: navigationIcon }),
+                !isExpandedVariant && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-testid": "appbar-title",
+                    className: cn(
+                      "min-w-0 flex-1 px-1",
+                      appBarTitleVariants({ variant }),
+                      // Center-aligned: center the title text
+                      variant === "center-aligned" && "text-center"
+                    ),
+                    children: title
+                  }
+                ),
+                actions != null && /* @__PURE__ */ jsx("div", { "data-slot": "actions", className: "flex shrink-0 items-center gap-0.5", children: actions })
+              ]
+            }
+          ),
+          isExpandedVariant && /* @__PURE__ */ jsx("div", { "data-slot": "expanded-title", className: cn("flex flex-1 items-end", "px-4 pb-4"), children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-testid": "appbar-title",
+              className: cn("min-w-0 truncate", appBarTitleVariants({ variant })),
+              children: title
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+AppBar.displayName = "AppBar";
 var ButtonHeadless = forwardRef(
   ({ className, children, tabIndex = 0, onMouseDown, type, ...restProps }, forwardedRef) => {
     const internalRef = useRef(null);
@@ -303,7 +493,7 @@ var buttonVariants = cva(
       {
         variant: "tonal",
         color: "primary",
-        className: "bg-secondary-container text-on-secondary-container"
+        className: "bg-primary-container text-on-primary-container"
       },
       {
         variant: "tonal",
@@ -574,7 +764,7 @@ IconButtonHeadless.displayName = "IconButtonHeadless";
 var iconButtonVariants = cva(
   [
     // Base classes (always applied)
-    "relative inline-flex items-center justify-center",
+    "relative inline-flex items-center justify-center cursor-pointer",
     "overflow-hidden rounded-full",
     // Circular shape
     "transition-all duration-200",
@@ -888,7 +1078,7 @@ FABHeadless.displayName = "FABHeadless";
 var fabVariants = cva(
   [
     // Base classes (always applied)
-    "relative inline-flex items-center justify-center",
+    "relative inline-flex items-center justify-center cursor-pointer",
     "overflow-hidden",
     "transition-all duration-200",
     "focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2",
@@ -1329,8 +1519,8 @@ var textFieldLabelVariants = cva(
   {
     variants: {
       variant: {
-        filled: "top-4",
-        outlined: "top-3 bg-surface px-1"
+        filled: "top-2.5",
+        outlined: "top-2.5 bg-surface px-1"
       },
       size: {
         small: "text-sm",
@@ -1338,7 +1528,7 @@ var textFieldLabelVariants = cva(
         large: "text-lg"
       },
       floating: {
-        true: "-translate-y-6 scale-75",
+        true: "-translate-y-5 scale-75",
         false: "scale-100"
       },
       focused: {
@@ -1363,7 +1553,7 @@ var textFieldLabelVariants = cva(
       {
         variant: "outlined",
         floating: true,
-        className: "-top-2"
+        className: "top-2.5"
       }
     ],
     defaultVariants: {
@@ -1676,7 +1866,8 @@ var TextField = forwardRef(
                       hasLeadingIcon: !!leadingIcon,
                       hasTrailingIcon: !!trailingIcon,
                       multiline: true
-                    })
+                    }),
+                    label && "placeholder:opacity-0"
                   ),
                   rows,
                   spellCheck: spellCheckProp
@@ -1694,7 +1885,9 @@ var TextField = forwardRef(
                       hasLeadingIcon: !!leadingIcon,
                       hasTrailingIcon: !!trailingIcon,
                       multiline: false
-                    })
+                    }),
+                    label && "placeholder:opacity-0"
+                    // Hide placeholder when there's a value to prevent overlap with floating label
                   ),
                   spellCheck: spellCheckProp
                 }
@@ -1928,8 +2121,7 @@ var checkboxLabelVariants = cva(
     // MD3: Body Medium (14px)
     "text-on-surface",
     "select-none",
-    "ml-4"
-    // 16px spacing between checkbox and label (MD3 standard)
+    "ml-1.5"
   ],
   {
     variants: {
@@ -2191,7 +2383,7 @@ var switchHandleContainerVariants = cva(
        */
       selected: {
         true: [
-          "left-[28px]",
+          "left-[24px]",
           // Position when ON (52px - 24px = 28px)
           "text-primary"
           // State layer color
@@ -2731,8 +2923,7 @@ var radioLabelVariants = cva(
     // MD3: Body Medium (14px)
     "text-on-surface",
     "select-none",
-    "ml-4"
-    // 16px spacing between radio and label (MD3 standard)
+    "ml-1.5"
   ],
   {
     variants: {
@@ -2984,7 +3175,2965 @@ var RadioHeadless = forwardRef(
   }
 );
 RadioHeadless.displayName = "RadioHeadless";
+var HeadlessTabsContext = createContext(null);
+function useHeadlessTabsContext(componentName) {
+  const context = useContext(HeadlessTabsContext);
+  if (!context) {
+    throw new Error(`${componentName} must be used within a Tabs component`);
+  }
+  return context;
+}
+var HeadlessTabList = forwardRef(
+  ({ children, className }, forwardedRef) => {
+    const { state } = useHeadlessTabsContext("HeadlessTabList");
+    const internalRef = useRef(null);
+    const ref = forwardedRef ?? internalRef;
+    const { tabListProps } = useTabList({}, state, ref);
+    return /* @__PURE__ */ jsx("div", { ...tabListProps, ref, className, children });
+  }
+);
+HeadlessTabList.displayName = "HeadlessTabList";
+var HeadlessTab = forwardRef(
+  ({ item, className, onMouseDown, children, ...props }, forwardedRef) => {
+    const { state } = useHeadlessTabsContext("HeadlessTab");
+    const internalRef = useRef(null);
+    const ref = forwardedRef ?? internalRef;
+    const { tabProps, isSelected, isDisabled, isPressed } = useTab(
+      {
+        key: item.key,
+        ...item.isDisabled !== void 0 && { isDisabled: item.isDisabled }
+      },
+      state,
+      ref
+    );
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const mergedProps = mergeProps(tabProps, focusProps, {
+      className,
+      onMouseDown
+    });
+    return /* @__PURE__ */ jsx("button", { ...mergedProps, ref, type: "button", "data-key": String(item.key), ...props, children: typeof children === "function" ? children({ isSelected, isDisabled, isFocusVisible, isPressed }) : children });
+  }
+);
+HeadlessTab.displayName = "HeadlessTab";
+var HeadlessTabPanel = forwardRef(
+  ({ children, className, ...props }, forwardedRef) => {
+    const { state } = useHeadlessTabsContext("HeadlessTabPanel");
+    const internalRef = useRef(null);
+    const ref = forwardedRef ?? internalRef;
+    const { tabPanelProps } = useTabPanel(props, state, ref);
+    return /* @__PURE__ */ jsx("div", { ...tabPanelProps, ref, className, children });
+  }
+);
+HeadlessTabPanel.displayName = "HeadlessTabPanel";
+var TabsContext = createContext(null);
+function useTabsContext() {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error("Component must be used within a Tabs component");
+  }
+  return context;
+}
+function getComponentName(type) {
+  if (typeof type === "string") return type;
+  const exotic = type;
+  return exotic.displayName ?? exotic.name ?? "";
+}
+function extractTabItemsFromChildren(children) {
+  const items = [];
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    if (getComponentName(child.type) === "TabList") {
+      const tabListProps = child.props;
+      Children.forEach(tabListProps.children, (tabChild) => {
+        if (!isValidElement(tabChild)) return;
+        if (getComponentName(tabChild.type) === "Tab") {
+          const tabProps = tabChild.props;
+          items.push({
+            key: tabProps.id,
+            ...tabProps.label !== void 0 && { label: tabProps.label },
+            ...tabProps.icon !== void 0 && { icon: tabProps.icon },
+            ...tabProps.isDisabled !== void 0 && { isDisabled: tabProps.isDisabled },
+            ...tabProps["aria-label"] !== void 0 && { "aria-label": tabProps["aria-label"] }
+          });
+        }
+      });
+    }
+  });
+  return items;
+}
+var Tabs = forwardRef(
+  ({
+    selectedKey,
+    defaultSelectedKey,
+    onSelectionChange,
+    variant = "primary",
+    layout = "fixed",
+    children,
+    className,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
+  }, ref) => {
+    const tabItems = useMemo(() => extractTabItemsFromChildren(children), [children]);
+    const state = useTabListState({
+      ...selectedKey !== void 0 && { selectedKey },
+      ...defaultSelectedKey !== void 0 && { defaultSelectedKey },
+      ...onSelectionChange !== void 0 && { onSelectionChange },
+      disabledKeys: tabItems.filter((t) => t.isDisabled).map((t) => t.key),
+      children: tabItems.map((item) => /* @__PURE__ */ jsx(Item, { textValue: item.label ?? item["aria-label"] ?? String(item.key), children: item.label ?? item["aria-label"] ?? "" }, item.key))
+    });
+    const tabsContextValue = useMemo(
+      () => ({
+        selectedKey: state.selectedKey,
+        variant,
+        layout,
+        disabledKeys: tabItems.filter((t) => t.isDisabled).map((t) => t.key),
+        ...ariaLabel !== void 0 && { "aria-label": ariaLabel },
+        ...ariaLabelledBy !== void 0 && { "aria-labelledby": ariaLabelledBy }
+      }),
+      [state.selectedKey, variant, layout, tabItems, ariaLabel, ariaLabelledBy]
+    );
+    const headlessContextValue = useMemo(() => ({ state }), [state]);
+    return /* @__PURE__ */ jsx(HeadlessTabsContext.Provider, { value: headlessContextValue, children: /* @__PURE__ */ jsx(TabsContext.Provider, { value: tabsContextValue, children: /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col", className), children }) }) });
+  }
+);
+Tabs.displayName = "Tabs";
+var tabListVariants = cva(
+  [
+    // Base classes
+    "relative flex",
+    "bg-surface",
+    // Bottom divider line (MD3 spec)
+    "border-b border-outline-variant"
+  ],
+  {
+    variants: {
+      layout: {
+        fixed: "w-full",
+        scrollable: "overflow-x-auto scrollbar-none"
+      }
+    },
+    defaultVariants: {
+      layout: "fixed"
+    }
+  }
+);
+var tabVariants = cva(
+  [
+    // Base layout
+    "relative flex flex-col items-center justify-center",
+    "min-h-12 px-4",
+    "cursor-pointer select-none",
+    "overflow-hidden",
+    // Typography: MD3 Title Small
+    "text-sm font-medium tracking-[0.1px]",
+    // Transition
+    "transition-colors duration-200",
+    // Focus visible
+    "focus-visible:outline-none",
+    // State layer via before pseudo-element
+    "before:absolute before:inset-0 before:transition-opacity before:duration-200",
+    "before:bg-current before:opacity-0",
+    "hover:before:opacity-8",
+    "active:before:opacity-12",
+    "focus-visible:before:opacity-12"
+  ],
+  {
+    variants: {
+      /**
+       * Tab variant (Primary or Secondary)
+       */
+      variant: {
+        primary: "",
+        secondary: ""
+      },
+      /**
+       * Selected state
+       */
+      selected: {
+        true: "",
+        false: ""
+      },
+      /**
+       * Disabled state
+       */
+      disabled: {
+        true: "opacity-38 cursor-not-allowed pointer-events-none",
+        false: ""
+      },
+      /**
+       * Layout determines min-width behavior
+       */
+      layout: {
+        fixed: "flex-1",
+        scrollable: "min-w-[90px] shrink-0"
+      }
+    },
+    compoundVariants: [
+      // Primary + selected
+      {
+        variant: "primary",
+        selected: true,
+        disabled: false,
+        className: "text-primary"
+      },
+      // Primary + unselected
+      {
+        variant: "primary",
+        selected: false,
+        disabled: false,
+        className: "text-on-surface-variant"
+      },
+      // Secondary + selected
+      {
+        variant: "secondary",
+        selected: true,
+        disabled: false,
+        className: "text-on-surface"
+      },
+      // Secondary + unselected
+      {
+        variant: "secondary",
+        selected: false,
+        disabled: false,
+        className: "text-on-surface-variant"
+      }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      selected: false,
+      disabled: false,
+      layout: "fixed"
+    }
+  }
+);
+var tabIndicatorVariants = cva(
+  [
+    // Base: absolutely positioned at bottom
+    "absolute bottom-0 left-0",
+    "pointer-events-none",
+    // Transition using MD3 motion tokens (medium2 duration, emphasized easing)
+    "transition-[left,width]",
+    "duration-medium2",
+    "ease-emphasized"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: ["h-[3px]", "bg-primary", "rounded-t-sm"],
+        secondary: ["h-[2px]", "bg-on-surface-variant"]
+      }
+    },
+    defaultVariants: {
+      variant: "primary"
+    }
+  }
+);
+var tabPanelVariants = cva(
+  [
+    // Base panel styles
+    "outline-none",
+    "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+  ],
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var tabBadgeVariants = cva(
+  [
+    // Base badge
+    "absolute",
+    "inline-flex items-center justify-center",
+    "bg-error text-on-error",
+    "font-medium leading-none",
+    "pointer-events-none"
+  ],
+  {
+    variants: {
+      type: {
+        dot: ["top-1 right-1", "w-1.5 h-1.5", "rounded-full"],
+        count: ["-top-1 -right-1", "min-w-[16px] h-4", "px-1", "rounded-full", "text-[11px]"]
+      }
+    },
+    defaultVariants: {
+      type: "count"
+    }
+  }
+);
+var tabIconVariants = cva(
+  ["relative", "inline-flex items-center justify-center", "w-6 h-6"],
+  {
+    variants: {
+      hasLabel: {
+        true: "mb-1",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      hasLabel: false
+    }
+  }
+);
+var TabList = forwardRef(
+  ({ children, className }, forwardedRef) => {
+    const { state } = useHeadlessTabsContext("TabList");
+    const {
+      variant,
+      layout,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy
+    } = useTabsContext();
+    const internalRef = useRef(null);
+    const ref = forwardedRef ?? internalRef;
+    const { tabListProps } = useTabList(
+      {
+        ...ariaLabel !== void 0 && { "aria-label": ariaLabel },
+        ...ariaLabelledBy !== void 0 && { "aria-labelledby": ariaLabelledBy }
+      },
+      state,
+      ref
+    );
+    const handleNavKeyDown = useCallback(
+      (e) => {
+        if (!["ArrowRight", "ArrowLeft", "Home", "End"].includes(e.key)) return;
+        const container = ref.current;
+        if (!container) return;
+        const focusedEl = document.activeElement;
+        const currentKey = focusedEl?.dataset?.key;
+        if (!currentKey) return;
+        const allTabEls = [...container.querySelectorAll("[data-key]")];
+        const allKeys = allTabEls.map((el) => el.dataset.key).filter(Boolean);
+        const enabledKeys = allKeys.filter(
+          (k) => allTabEls.find((el) => el.dataset.key === k)?.getAttribute("aria-disabled") !== "true"
+        );
+        const currentIndex = enabledKeys.indexOf(currentKey);
+        if (currentIndex === -1) return;
+        let nextKey = null;
+        switch (e.key) {
+          case "ArrowRight":
+            nextKey = enabledKeys[(currentIndex + 1) % enabledKeys.length] ?? null;
+            break;
+          case "ArrowLeft":
+            nextKey = enabledKeys[(currentIndex - 1 + enabledKeys.length) % enabledKeys.length] ?? null;
+            break;
+          case "Home":
+            nextKey = enabledKeys[0] ?? null;
+            break;
+          case "End":
+            nextKey = enabledKeys[enabledKeys.length - 1] ?? null;
+            break;
+        }
+        if (nextKey != null) {
+          e.preventDefault();
+          state.setSelectedKey(nextKey);
+          const nextEl = container.querySelector(
+            `[data-key="${CSS.escape(nextKey)}"]`
+          );
+          nextEl?.focus();
+        }
+      },
+      [state, ref]
+    );
+    const { onKeyDown: tabListKeyDown } = tabListProps;
+    const handleKeyDown = useCallback(
+      (e) => {
+        handleNavKeyDown(e);
+        if (!e.defaultPrevented) {
+          tabListKeyDown?.(e);
+        }
+      },
+      [handleNavKeyDown, tabListKeyDown]
+    );
+    const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 });
+    const [indicatorReady, setIndicatorReady] = useState(false);
+    const updateIndicator = useCallback(() => {
+      const container = ref.current;
+      if (!container) return;
+      const selectedTab = container.querySelector('[aria-selected="true"]');
+      if (!selectedTab) return;
+      const containerRect = container.getBoundingClientRect();
+      const tabRect = selectedTab.getBoundingClientRect();
+      const newLeft = tabRect.left - containerRect.left + container.scrollLeft;
+      const newWidth = tabRect.width;
+      setIndicatorStyle((prev) => {
+        if (prev.left === newLeft && prev.width === newWidth) return prev;
+        return { left: newLeft, width: newWidth };
+      });
+      setIndicatorReady(true);
+    }, [ref]);
+    useLayoutEffect(() => {
+      updateIndicator();
+    }, [state.selectedKey, updateIndicator]);
+    const mergedTabListProps = { ...tabListProps, onKeyDown: handleKeyDown };
+    return /* @__PURE__ */ jsxs("div", { ...mergedTabListProps, ref, className: cn(tabListVariants({ layout }), className), children: [
+      children,
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-tab-indicator": true,
+          "aria-hidden": "true",
+          className: cn(
+            tabIndicatorVariants({ variant }),
+            // Hide until first position is calculated to avoid flash
+            !indicatorReady && "opacity-0"
+          ),
+          style: {
+            // Dynamic left/width values from DOM measurements
+            left: `${indicatorStyle.left}px`,
+            width: `${indicatorStyle.width}px`
+          }
+        }
+      )
+    ] });
+  }
+);
+TabList.displayName = "TabList";
+function resolveBadgeDisplay(badge) {
+  if (badge === void 0 || badge === false) return null;
+  if (badge === true) return "dot";
+  if (typeof badge === "number") {
+    if (badge === 0) return null;
+    return badge > 999 ? "999+" : String(badge);
+  }
+  return null;
+}
+var Tab = forwardRef(
+  ({ id, icon, label, badge, isDisabled = false, disableRipple = false, className, ...htmlProps }, forwardedRef) => {
+    const { state } = useHeadlessTabsContext("Tab");
+    const { variant, layout } = useTabsContext();
+    const internalRef = useRef(null);
+    const ref = forwardedRef ?? internalRef;
+    const {
+      tabProps,
+      isSelected,
+      isDisabled: ariaIsDisabled
+    } = useTab({ key: id, isDisabled }, state, ref);
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const finalIsDisabled = isDisabled || ariaIsDisabled;
+    const { onMouseDown: handleRipple, ripples } = useRipple({
+      disabled: finalIsDisabled || disableRipple
+    });
+    const handleClick = useCallback(() => {
+      if (!finalIsDisabled) {
+        state.setSelectedKey(id);
+      }
+    }, [state, id, finalIsDisabled]);
+    const handleFocus = useCallback(() => {
+      if (!finalIsDisabled) {
+        state.selectionManager.setFocusedKey(id);
+      }
+    }, [state.selectionManager, id, finalIsDisabled]);
+    const mergedProps = mergeProps(tabProps, focusProps, {
+      onMouseDown: disableRipple ? void 0 : handleRipple,
+      onClick: handleClick,
+      onFocus: handleFocus
+    });
+    const badgeDisplay = resolveBadgeDisplay(badge);
+    const isDotBadge = badgeDisplay === "dot";
+    const hasIcon = Boolean(icon);
+    const hasLabel = Boolean(label);
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ...mergedProps,
+        ref,
+        type: "button",
+        "data-key": String(id),
+        tabIndex: finalIsDisabled ? -1 : isSelected ? 0 : -1,
+        className: cn(
+          tabVariants({
+            variant,
+            selected: isSelected,
+            disabled: finalIsDisabled,
+            layout
+          }),
+          isFocusVisible && "outline-primary outline-2 outline-offset-2",
+          hasLabel && hasIcon && "min-h-16",
+          className
+        ),
+        ...htmlProps,
+        children: [
+          !disableRipple && ripples,
+          hasIcon && /* @__PURE__ */ jsxs("span", { className: cn(tabIconVariants({ hasLabel })), children: [
+            icon,
+            badgeDisplay && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-badge-type": isDotBadge ? "dot" : "count",
+                "aria-hidden": "true",
+                className: cn(tabBadgeVariants({ type: isDotBadge ? "dot" : "count" })),
+                children: !isDotBadge && badgeDisplay
+              }
+            )
+          ] }),
+          hasLabel && /* @__PURE__ */ jsxs("span", { className: "relative z-10 truncate", children: [
+            label,
+            !hasIcon && badgeDisplay && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-badge-type": isDotBadge ? "dot" : "count",
+                "aria-hidden": "true",
+                className: cn(
+                  "relative ml-1",
+                  tabBadgeVariants({ type: isDotBadge ? "dot" : "count" })
+                ),
+                children: !isDotBadge && badgeDisplay
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+Tab.displayName = "Tab";
+var TabPanel = forwardRef(
+  ({ id, children, className }, forwardedRef) => {
+    const { state } = useHeadlessTabsContext("TabPanel");
+    useTabsContext();
+    const internalRef = useRef(null);
+    const ref = forwardedRef ?? internalRef;
+    const { tabPanelProps } = useTabPanel({}, state, ref);
+    if (state.selectedKey !== id) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", { ...tabPanelProps, ref, className: cn(tabPanelVariants(), className), children });
+  }
+);
+TabPanel.displayName = "TabPanel";
+var NavigationBarContext = createContext(null);
+function useNavigationBarContext() {
+  const ctx = useContext(NavigationBarContext);
+  if (ctx === null) {
+    throw new Error("HeadlessNavigationBarItem must be rendered inside HeadlessNavigationBar.");
+  }
+  return ctx;
+}
+var HeadlessNavigationBar = forwardRef(
+  ({
+    items,
+    selectedKey,
+    defaultSelectedKey,
+    onSelectionChange,
+    "aria-label": ariaLabel,
+    className,
+    renderItem
+  }, ref) => {
+    const collectionChildren = items.map((item) => /* @__PURE__ */ jsx(Item, { textValue: item.label ?? item["aria-label"] ?? item.key, children: item.key }, item.key));
+    const disabledKeys = items.filter((item) => item.isDisabled).map((item) => item.key);
+    const state = useTabListState({
+      children: collectionChildren,
+      ...selectedKey !== void 0 ? { selectedKey } : {},
+      ...defaultSelectedKey !== void 0 ? { defaultSelectedKey } : {},
+      ...onSelectionChange ? { onSelectionChange } : {},
+      disabledKeys
+    });
+    const tabListRef = useRef(null);
+    const { tabListProps } = useTabList({ "aria-label": ariaLabel }, state, tabListRef);
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        role: "navigation",
+        "aria-label": ariaLabel,
+        className,
+        children: /* @__PURE__ */ jsx(NavigationBarContext.Provider, { value: { state, hideLabels: false, disableRipple: false }, children: /* @__PURE__ */ jsx("div", { ...tabListProps, ref: tabListRef, className: "flex h-full w-full items-stretch", children: [...state.collection].map((collectionItem) => {
+          const itemConfig = items.find((i) => String(i.key) === String(collectionItem.key));
+          if (!itemConfig) return null;
+          return renderItem(itemConfig);
+        }) }) })
+      }
+    );
+  }
+);
+HeadlessNavigationBar.displayName = "HeadlessNavigationBar";
+var HeadlessNavigationBarItem = forwardRef(({ itemKey, children, className, "aria-label": ariaLabel }, ref) => {
+  const { state } = useNavigationBarContext();
+  const internalRef = useRef(null);
+  const resolvedRef = ref ?? internalRef;
+  const { tabProps, isSelected } = useTab({ key: itemKey }, state, resolvedRef);
+  const { "aria-controls": _controls, ...tabPropsWithoutControls } = tabProps;
+  const { focusProps, isFocusVisible } = useFocusRing();
+  const content = typeof children === "function" ? children({ isSelected, isFocusVisible }) : children;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      ...mergeProps(tabPropsWithoutControls, focusProps),
+      ref: resolvedRef,
+      className,
+      "aria-label": ariaLabel,
+      "data-focus-visible": isFocusVisible || void 0,
+      "data-selected": isSelected,
+      children: content
+    }
+  );
+});
+HeadlessNavigationBarItem.displayName = "HeadlessNavigationBarItem";
+var navigationBarVariants = cva([
+  // Layout
+  "fixed bottom-0 left-0 right-0 z-10",
+  "w-full",
+  "flex flex-row items-stretch",
+  // MD3 surface
+  "bg-surface-container",
+  // MD3 height: 80dp
+  "h-20",
+  // Safe-area bottom (for mobile devices)
+  "pb-safe"
+]);
+var navigationBarItemVariants = cva(
+  [
+    // Layout
+    "relative flex flex-1 flex-col items-center justify-center",
+    "cursor-pointer select-none outline-none",
+    // State layer pseudo-element (covers the full item area)
+    "before:absolute before:inset-0 before:rounded-none before:transition-opacity before:duration-short2 before:ease-standard",
+    // Focus-visible ring
+    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
+    // Transition for color changes
+    "transition-colors duration-short2 ease-standard"
+  ],
+  {
+    variants: {
+      /**
+       * Whether this item is the currently selected destination.
+       * Controls icon and label colors per MD3 spec.
+       */
+      isActive: {
+        true: [
+          // Active icon color applied via text-color on the icon wrapper
+          "[&>[data-icon]]:text-on-secondary-container",
+          // Active label color
+          "[&>[data-label]]:text-on-surface",
+          // State layer color for active item
+          "before:bg-on-surface-variant"
+        ],
+        false: [
+          // Inactive icon color
+          "[&>[data-icon]]:text-on-surface-variant",
+          // Inactive label color
+          "[&>[data-label]]:text-on-surface-variant",
+          // State layer color for inactive item
+          "before:bg-on-surface-variant"
+        ]
+      },
+      /**
+       * Whether the item is disabled.
+       * Applies `opacity-38` per MD3 disabled state.
+       */
+      isDisabled: {
+        true: ["cursor-not-allowed opacity-38 pointer-events-none"],
+        false: []
+      },
+      /**
+       * Hover and press state layer opacities.
+       * Applied via compound variants on hover/active pseudo-classes.
+       */
+      isHovered: {
+        true: ["before:opacity-8"],
+        false: ["before:opacity-0"]
+      },
+      isPressed: {
+        true: ["before:opacity-12"],
+        false: []
+      }
+    },
+    compoundVariants: [
+      // When not hovered or pressed, state layer is invisible
+      {
+        isHovered: false,
+        isPressed: false,
+        className: "before:opacity-0"
+      }
+    ],
+    defaultVariants: {
+      isActive: false,
+      isDisabled: false,
+      isHovered: false,
+      isPressed: false
+    }
+  }
+);
+var indicatorPillVariants = cva(
+  [
+    "absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2",
+    "w-16 h-8",
+    "rounded-full bg-secondary-container",
+    "transition-[transform,opacity] duration-medium2 ease-emphasized",
+    "origin-center"
+  ],
+  {
+    variants: {
+      isActive: {
+        true: ["scale-x-100 opacity-100"],
+        false: ["scale-x-0 opacity-0"]
+      }
+    },
+    defaultVariants: {
+      isActive: false
+    }
+  }
+);
+var badgeVariants = cva(
+  [
+    "absolute",
+    "flex items-center justify-center",
+    "bg-error text-on-error",
+    "font-medium leading-none",
+    // MD3 label-small
+    "text-[0.6875rem]"
+  ],
+  {
+    variants: {
+      isDot: {
+        true: [
+          // Dot: 6dp diameter, top-right of icon
+          "top-0 right-0.5 z-10",
+          "w-1.5 h-1.5 min-w-0 rounded-full"
+        ],
+        false: [
+          // Numeric: pill shape, top-right of icon
+          "-top-1 left-3 z-10",
+          "min-w-[1rem] h-4 px-1 rounded-full"
+        ]
+      }
+    },
+    defaultVariants: {
+      isDot: false
+    }
+  }
+);
+var iconWrapperVariants = cva([
+  "relative z-10 flex items-center justify-center",
+  "w-6 h-6"
+]);
+var labelVariants = cva([
+  "mt-1 select-none",
+  "text-label-medium",
+  "transition-colors duration-short2 ease-standard",
+  "truncate max-w-full"
+]);
+var MIN_ITEMS = 3;
+var MAX_ITEMS = 5;
+function validateItemCount(count) {
+  if (process.env.NODE_ENV !== "production" && (count < MIN_ITEMS || count > MAX_ITEMS)) {
+    console.warn(
+      `[NavigationBar] MD3 Navigation Bar requires between ${MIN_ITEMS} and ${MAX_ITEMS} destination items. Received ${count}. See: https://m3.material.io/components/navigation-bar/overview`
+    );
+  }
+}
+function getBadgeText(badge) {
+  if (badge === void 0 || badge === 0) return null;
+  if (badge === true) return null;
+  if (badge > 999) return "999+";
+  return String(badge);
+}
+function isBadgeVisible(badge) {
+  if (badge === void 0) return false;
+  if (badge === 0) return false;
+  return true;
+}
+function ItemVisual({ config, isActive, hideLabels, disableRipple }) {
+  const isItemDisabled = config.isDisabled === true;
+  const { onMouseDown, ripples } = useRipple({
+    ...disableRipple || isItemDisabled ? { disabled: true } : {}
+  });
+  const showBadge = isBadgeVisible(config.badge);
+  const isDot = config.badge === true;
+  const badgeText = getBadgeText(config.badge);
+  return (
+    // Overflow-hidden wrapper required for ripple containment.
+    // pointer-events-none is intentional: the parent <button> handles all interaction.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        onMouseDown,
+        className: "pointer-events-none relative flex h-full w-full flex-col items-center justify-center overflow-hidden",
+        children: [
+          ripples,
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-indicator-pill": true,
+              "data-active": isActive,
+              "aria-hidden": "true",
+              className: cn(indicatorPillVariants({ isActive }), !hideLabels && "-mt-3.5")
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              "data-icon": true,
+              className: cn(
+                iconWrapperVariants(),
+                isActive ? "text-on-secondary-container" : "text-on-surface-variant"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "relative z-10 flex h-6 w-6 items-center justify-center", children: config.icon }),
+                showBadge && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-badge": true,
+                    "data-badge-dot": isDot || void 0,
+                    "aria-label": isDot ? "notification" : badgeText ? `${badgeText} notifications` : void 0,
+                    "aria-live": "polite",
+                    className: cn(badgeVariants({ isDot })),
+                    children: isDot ? null : badgeText
+                  }
+                )
+              ]
+            }
+          ),
+          !hideLabels && config.label && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-label": true,
+              className: cn(labelVariants(), isActive ? "text-on-surface" : "text-on-surface-variant"),
+              children: config.label
+            }
+          )
+        ]
+      }
+    )
+  );
+}
+var NavigationBar = forwardRef(
+  ({
+    items,
+    activeKey,
+    defaultActiveKey,
+    onActiveChange,
+    hideLabels = false,
+    "aria-label": ariaLabel,
+    disableRipple = false,
+    className
+  }, ref) => {
+    validateItemCount(items.length);
+    return /* @__PURE__ */ jsx(
+      HeadlessNavigationBar,
+      {
+        ref,
+        items,
+        ...activeKey !== void 0 ? { selectedKey: activeKey } : {},
+        ...defaultActiveKey !== void 0 ? { defaultSelectedKey: defaultActiveKey } : {},
+        ...onActiveChange ? { onSelectionChange: onActiveChange } : {},
+        "aria-label": ariaLabel,
+        className: cn(navigationBarVariants(), className),
+        renderItem: (config) => (
+          // HeadlessNavigationBarItem renders the <button role="tab"> with all
+          // ARIA semantics. ItemVisual renders the icon/pill/badge/label inside
+          // — no nested <button> elements.
+          /* @__PURE__ */ jsx(
+            HeadlessNavigationBarItem,
+            {
+              itemKey: config.key,
+              ...config["aria-label"] !== void 0 ? { "aria-label": config["aria-label"] } : {},
+              className: cn(
+                "relative flex flex-1 flex-col items-center justify-center",
+                "cursor-pointer outline-none select-none",
+                "duration-short2 ease-standard transition-colors",
+                // State layer pseudo-element
+                "before:absolute before:inset-0 before:rounded-none",
+                "before:bg-on-surface-variant before:opacity-0",
+                "before:duration-short2 before:ease-standard before:transition-opacity",
+                "hover:before:opacity-8",
+                "active:before:opacity-12",
+                // Focus ring
+                "focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2",
+                // Disabled styling
+                config.isDisabled && "pointer-events-none cursor-not-allowed opacity-38"
+              ),
+              children: ({ isSelected }) => /* @__PURE__ */ jsx(
+                ItemVisual,
+                {
+                  config,
+                  isActive: isSelected,
+                  hideLabels,
+                  disableRipple
+                }
+              )
+            },
+            config.key
+          )
+        )
+      }
+    );
+  }
+);
+NavigationBar.displayName = "NavigationBar";
+function getBadgeContent(badge) {
+  if (badge === true) return null;
+  if (badge === 0) return "";
+  if (badge > 999) return "999+";
+  return String(badge);
+}
+function isBadgeVisible2(badge) {
+  if (badge === void 0) return false;
+  if (badge === 0) return false;
+  return true;
+}
+var NavigationBarItem = forwardRef(
+  ({
+    itemKey: _itemKey,
+    icon,
+    label,
+    badge,
+    isActive = false,
+    hideLabels = false,
+    isDisabled = false,
+    disableRipple = false,
+    className,
+    "aria-label": ariaLabel,
+    // Spread remaining props (e.g. tabProps from useTab)
+    ...rest
+  }, ref) => {
+    const { onMouseDown, ripples } = useRipple({
+      ...disableRipple || isDisabled ? { disabled: true } : {}
+    });
+    const showBadge = isBadgeVisible2(badge);
+    const isDot = badge === true;
+    const badgeContent = badge !== void 0 ? getBadgeContent(badge) : null;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        ref,
+        onMouseDown,
+        disabled: isDisabled,
+        "aria-label": ariaLabel,
+        className: cn(
+          navigationBarItemVariants({
+            isActive,
+            isDisabled
+          }),
+          className
+        ),
+        ...rest,
+        children: /* @__PURE__ */ jsxs("span", { className: "relative flex h-full w-full flex-col items-center justify-center overflow-hidden rounded-none", children: [
+          ripples,
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-indicator-pill": true,
+              "data-active": isActive,
+              className: cn(indicatorPillVariants({ isActive }), !hideLabels && "-mt-3.5"),
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { "data-icon": true, className: cn(iconWrapperVariants()), children: [
+            /* @__PURE__ */ jsx("span", { className: "relative z-10 flex h-6 w-6 items-center justify-center", children: icon }),
+            showBadge && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-badge": true,
+                "data-badge-dot": isDot || void 0,
+                "aria-label": isDot ? "notification" : badgeContent ? `${badgeContent} notifications` : void 0,
+                "aria-live": "polite",
+                className: cn(badgeVariants({ isDot })),
+                children: isDot ? null : badgeContent
+              }
+            )
+          ] }),
+          !hideLabels && label && /* @__PURE__ */ jsx("span", { "data-label": true, className: cn(labelVariants()), children: label })
+        ] })
+      }
+    );
+  }
+);
+NavigationBarItem.displayName = "NavigationBarItem";
+var DrawerContext = createContext(null);
+var HeadlessDrawer = forwardRef(
+  ({
+    variant = "standard",
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    "aria-label": ariaLabel,
+    children,
+    className,
+    scrimClassName,
+    disableRipple = false
+  }, ref) => {
+    const state = useOverlayTriggerState({
+      ...open !== void 0 ? { isOpen: open } : {},
+      ...defaultOpen !== void 0 ? { defaultOpen } : {},
+      ...onOpenChange !== void 0 ? { onOpenChange } : {}
+    });
+    const isOpen = state.isOpen;
+    const close = useCallback(() => {
+      state.close();
+    }, [state]);
+    const contextValue = {
+      isOpen,
+      close,
+      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
+          }
+        ) })
+      ] }) }) });
+    }
+    return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        role: "navigation",
+        "aria-label": ariaLabel,
+        className,
+        children
+      }
+    ) });
+  }
+);
+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,
+    isActive = false,
+    children,
+    className,
+    isDisabled,
+    onMouseDown,
+    onPress,
+    onPressStart,
+    onPressEnd,
+    onPressChange,
+    onPressUp,
+    ...restProps
+  }, forwardedRef) => {
+    const internalRef = useRef(null);
+    const { isFocusVisible, focusProps } = useFocusRing();
+    if (href) {
+      const linkRef = forwardedRef ?? internalRef;
+      const { linkProps } = useLink(
+        {
+          href,
+          ...isDisabled !== void 0 ? { isDisabled } : {},
+          ...onPress !== void 0 ? { onPress } : {}
+        },
+        linkRef
+      );
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          ...mergeProps(linkProps, focusProps, { onMouseDown }),
+          ref: linkRef,
+          href,
+          className,
+          "aria-current": isActive ? "page" : void 0,
+          "data-focus-visible": isFocusVisible || void 0,
+          "data-active": isActive || void 0,
+          children
+        }
+      );
+    }
+    const buttonRef = forwardedRef ?? internalRef;
+    const { buttonProps } = useButton(
+      {
+        ...restProps,
+        ...isDisabled !== void 0 ? { isDisabled } : {},
+        ...onPress !== void 0 ? { onPress } : {},
+        ...onPressStart !== void 0 ? { onPressStart } : {},
+        ...onPressEnd !== void 0 ? { onPressEnd } : {},
+        ...onPressChange !== void 0 ? { onPressChange } : {},
+        ...onPressUp !== void 0 ? { onPressUp } : {},
+        elementType: "button"
+      },
+      buttonRef
+    );
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        ...mergeProps(buttonProps, focusProps, { onMouseDown }),
+        ref: buttonRef,
+        className,
+        "aria-current": isActive ? "page" : void 0,
+        "data-focus-visible": isFocusVisible || void 0,
+        "data-active": isActive || void 0,
+        children
+      }
+    );
+  }
+);
+HeadlessDrawerItem.displayName = "HeadlessDrawerItem";
+var drawerVariants = cva(
+  [
+    // Layout
+    "fixed top-0 left-0 h-full w-drawer",
+    "flex flex-col overflow-y-auto",
+    // Stacking and shape
+    "z-50",
+    "rounded-r-xl",
+    // Slide animation (transition applies to all open/closed state changes)
+    "transition-transform duration-medium4 ease-emphasized-decelerate",
+    // Focus outline removal (focus management handled by FocusScope / React Aria)
+    "outline-none",
+    // Padding for content spacing
+    "px-3"
+  ],
+  {
+    variants: {
+      /**
+       * Structural variant — drives surface color and elevation.
+       * - `standard`: inline nav panel, lower-elevation surface
+       * - `modal`: overlay dialog with elevation shadow
+       */
+      variant: {
+        standard: ["bg-surface-container-low"],
+        modal: ["bg-surface-container", "shadow-elevation-1"]
+      },
+      /**
+       * Open/closed state — drives translation.
+       * - `true`:  drawer visible (`translate-x-0`)
+       * - `false`: drawer off-screen (`-translate-x-full`)
+       */
+      open: {
+        true: ["translate-x-0"],
+        false: ["-translate-x-full"]
+      }
+    },
+    defaultVariants: {
+      variant: "standard",
+      open: false
+    }
+  }
+);
+var drawerItemVariants = 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
+    "before:absolute before:inset-0 before:rounded-full",
+    "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"
+  ],
+  {
+    variants: {
+      /**
+       * Whether this item is the currently active destination.
+       * Controls background, text color, and icon color per MD3 spec.
+       */
+      isActive: {
+        true: [
+          "bg-secondary-container",
+          "text-on-secondary-container",
+          "before:bg-on-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: []
+      }
+    },
+    defaultVariants: {
+      isActive: false,
+      isDisabled: false
+    }
+  }
+);
+var scrimVariants = cva([
+  "fixed inset-0 z-40",
+  "bg-scrim opacity-32",
+  "transition-opacity duration-medium2 ease-standard"
+]);
+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 drawerDividerVariants = cva(["border-t border-outline-variant", "mx-4 my-2"]);
+var Drawer = forwardRef(
+  ({
+    variant = "standard",
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    "aria-label": ariaLabel,
+    children,
+    className,
+    disableRipple = false,
+    ...restProps
+  }, ref) => {
+    const isOpen = open ?? defaultOpen;
+    const drawerPanelClass = cn(
+      drawerVariants({
+        variant,
+        open: isOpen
+      }),
+      className
+    );
+    const scrimClass = scrimVariants();
+    return /* @__PURE__ */ jsx(
+      HeadlessDrawer,
+      {
+        ref,
+        variant,
+        ...open !== void 0 ? { open } : {},
+        ...defaultOpen !== void 0 ? { defaultOpen } : {},
+        ...onOpenChange !== void 0 ? { onOpenChange } : {},
+        "aria-label": ariaLabel,
+        className: drawerPanelClass,
+        scrimClassName: scrimClass,
+        disableRipple,
+        ...restProps,
+        children
+      }
+    );
+  }
+);
+Drawer.displayName = "Drawer";
+var DrawerItem = forwardRef(
+  ({
+    href,
+    icon,
+    label,
+    badge,
+    secondaryText,
+    isActive = false,
+    isDisabled = false,
+    disableRipple = false,
+    className,
+    onPress,
+    onPressStart,
+    onPressEnd,
+    onPressChange,
+    onPressUp,
+    ...restProps
+  }, ref) => {
+    const isItemDisabled = isDisabled;
+    const { onMouseDown: handleRipple, ripples } = useRipple({
+      disabled: isItemDisabled || disableRipple
+    });
+    return /* @__PURE__ */ jsxs(
+      HeadlessDrawerItem,
+      {
+        ...restProps,
+        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 } : {},
+        onMouseDown: handleRipple,
+        className: cn(
+          drawerItemVariants({
+            isActive,
+            isDisabled: isItemDisabled
+          }),
+          className
+        ),
+        children: [
+          ripples,
+          icon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "relative z-10 flex shrink-0 items-center justify-center",
+              "aria-hidden": "true",
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "relative z-10 flex min-w-0 flex-1 flex-col text-left", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
+            secondaryText && /* @__PURE__ */ jsx("span", { className: "text-body-small truncate opacity-70", children: secondaryText })
+          ] }),
+          badge && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "relative z-10 ml-auto flex shrink-0 items-center pr-2",
+              "aria-hidden": "true",
+              children: badge
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+DrawerItem.displayName = "DrawerItem";
+var DrawerSection = forwardRef(
+  ({ header, children, showDivider = false, className }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn(drawerSectionVariants(), className), children: [
+      showDivider && /* @__PURE__ */ jsx("hr", { role: "separator", "aria-hidden": "true", className: drawerDividerVariants() }),
+      header && /* @__PURE__ */ jsx("span", { className: drawerSectionHeaderVariants(), children: header }),
+      children
+    ] });
+  }
+);
+DrawerSection.displayName = "DrawerSection";
+var progressContainerVariants = cva(["inline-flex", "flex-col", "gap-1"], {
+  variants: {
+    /**
+     * The visual type of the indicator.
+     */
+    type: {
+      linear: "w-full",
+      circular: "items-center justify-center w-auto"
+    }
+  },
+  defaultVariants: {
+    type: "linear"
+  }
+});
+var progressTrackVariants = cva([
+  "relative",
+  "w-full",
+  "h-1",
+  // MD3: 4dp track height
+  "rounded-full",
+  // MD3: full corner radius
+  "overflow-hidden",
+  "bg-surface-container-highest"
+  // MD3: inactive track color
+]);
+var progressIndicatorVariants = cva([
+  "absolute",
+  "left-0",
+  "top-0",
+  "h-full",
+  "rounded-full",
+  "bg-primary",
+  // MD3: active track color
+  "transition-[width]",
+  "duration-medium4",
+  // MD3: 400ms for value transitions
+  "ease-standard"
+  // MD3: cubic-bezier(0.2, 0, 0, 1)
+]);
+var progressStopIndicatorVariants = cva([
+  "absolute",
+  "right-0",
+  "top-1/2",
+  "-translate-y-1/2",
+  "w-1",
+  "h-1",
+  "rounded-full",
+  "bg-primary"
+  // MD3: stop indicator uses primary color
+]);
+var progressCircularSizeVariants = cva(
+  ["relative", "flex", "items-center", "justify-center", "flex-shrink-0"],
+  {
+    variants: {
+      size: {
+        small: "h-6 w-6",
+        // MD3: 24dp
+        medium: "h-12 w-12",
+        // MD3: 48dp (default)
+        large: "h-16 w-16"
+        // MD3: 64dp
+      }
+    },
+    defaultVariants: {
+      size: "medium"
+    }
+  }
+);
+var progressLabelVariants = cva([
+  "text-body-small",
+  // MD3: body-small type scale (12px)
+  "text-on-surface",
+  // MD3: on-surface color role
+  "select-none"
+]);
+var STROKE_WIDTH = 4;
+var CIRCULAR_SIZE_PX = {
+  small: 24,
+  medium: 48,
+  large: 64
+};
+function getCircularGeometry(size) {
+  const diameter = CIRCULAR_SIZE_PX[size];
+  const radius = (diameter - STROKE_WIDTH) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const viewBox = `0 0 ${diameter} ${diameter}`;
+  const cx = diameter / 2;
+  const cy = diameter / 2;
+  return { diameter, radius, circumference, viewBox, cx, cy };
+}
+var Progress = forwardRef(
+  ({
+    type = "linear",
+    indeterminate = false,
+    size = "medium",
+    className,
+    label,
+    value = 0,
+    minValue = 0,
+    maxValue = 100,
+    ...restProps
+  }, forwardedRef) => {
+    const internalRef = useRef(null);
+    const ref = forwardedRef ?? internalRef;
+    const { progressBarProps, labelProps } = useProgressBar({
+      label,
+      value,
+      minValue,
+      maxValue,
+      isIndeterminate: indeterminate,
+      ...restProps
+    });
+    const percentage = indeterminate ? 0 : Math.min(100, Math.max(0, (value - minValue) / (maxValue - minValue) * 100));
+    if (process.env.NODE_ENV !== "production") {
+      const ariaProps = restProps;
+      if (!label && !ariaProps["aria-label"] && !ariaProps["aria-labelledby"]) {
+        console.warn(
+          "[Progress] Progress indicator should have a visible label prop or aria-label for accessibility."
+        );
+      }
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...progressBarProps,
+        ref,
+        className: cn(progressContainerVariants({ type }), className),
+        children: [
+          label && /* @__PURE__ */ jsx("span", { ...labelProps, className: cn(progressLabelVariants()), children: label }),
+          type === "linear" ? /* @__PURE__ */ jsx(LinearProgress, { percentage, indeterminate }) : /* @__PURE__ */ jsx(CircularProgress, { percentage, indeterminate, size })
+        ]
+      }
+    );
+  }
+);
+Progress.displayName = "Progress";
+function LinearProgress({ percentage, indeterminate }) {
+  if (indeterminate) {
+    return /* @__PURE__ */ jsx("div", { "data-progress-track": "", className: cn(progressTrackVariants()), children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-progress-indeterminate": "",
+        className: "absolute inset-0 overflow-hidden rounded-full",
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "bg-primary absolute top-0 h-full rounded-full",
+                "animate-progress-linear-indeterminate-1"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "bg-primary absolute top-0 h-full rounded-full",
+                "animate-progress-linear-indeterminate-2"
+              )
+            }
+          )
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-progress-track": "", className: cn(progressTrackVariants()), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-progress-indicator": "",
+        className: cn(progressIndicatorVariants()),
+        style: { width: `${percentage}%` }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-stop-indicator": "",
+        className: cn(progressStopIndicatorVariants()),
+        "aria-hidden": "true"
+      }
+    )
+  ] });
+}
+function CircularProgress({
+  percentage,
+  indeterminate,
+  size
+}) {
+  const { radius, circumference, viewBox, cx, cy } = getCircularGeometry(size);
+  const strokeDashoffset = (1 - percentage / 100) * circumference;
+  if (indeterminate) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-progress-size": size,
+        "data-progress-indeterminate": "",
+        className: cn(progressCircularSizeVariants({ size })),
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            viewBox,
+            className: "animate-progress-circular-rotate h-full w-full",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx,
+                  cy,
+                  r: radius,
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: STROKE_WIDTH,
+                  className: "text-surface-container-highest"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx,
+                  cy,
+                  r: radius,
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: STROKE_WIDTH,
+                  className: "animate-progress-circular-dash text-primary",
+                  strokeLinecap: "round"
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { "data-progress-size": size, className: cn(progressCircularSizeVariants({ size })), children: /* @__PURE__ */ jsxs("svg", { viewBox, className: "h-full w-full -rotate-90", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx,
+        cy,
+        r: radius,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: STROKE_WIDTH,
+        className: "text-surface-container-highest"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx,
+        cy,
+        r: radius,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: STROKE_WIDTH,
+        strokeLinecap: "round",
+        className: "text-primary duration-medium4 ease-standard transition-[stroke-dashoffset]",
+        strokeDasharray: circumference,
+        strokeDashoffset
+      }
+    )
+  ] }) });
+}
+var ProgressHeadless = forwardRef(
+  ({
+    type = "linear",
+    indeterminate = false,
+    size = "medium",
+    className,
+    children,
+    renderProgress,
+    label,
+    value = 0,
+    minValue = 0,
+    maxValue = 100,
+    ...restProps
+  }, forwardedRef) => {
+    const internalRef = useRef(null);
+    const ref = forwardedRef ?? internalRef;
+    const { progressBarProps, labelProps } = useProgressBar({
+      label,
+      value,
+      minValue,
+      maxValue,
+      isIndeterminate: indeterminate,
+      ...restProps
+    });
+    const percentage = indeterminate ? 0 : (value - minValue) / (maxValue - minValue) * 100;
+    return /* @__PURE__ */ jsxs("div", { ...progressBarProps, ref, className, children: [
+      label && /* @__PURE__ */ jsx("span", { ...labelProps, children: label }),
+      renderProgress?.({
+        percentage,
+        isIndeterminate: indeterminate,
+        type,
+        size
+      }),
+      children
+    ] });
+  }
+);
+ProgressHeadless.displayName = "ProgressHeadless";
+var MenuContext = createContext(null);
+function useMenuContext() {
+  return useContext(MenuContext);
+}
+function TriggerBridge({ children }) {
+  const ctx = useSlottedContext(ButtonContext);
+  const localRef = useRef(null);
+  const { ref: contextRef, ...ctxProps } = ctx ?? {};
+  const mergedCallbackRef = useCallback(
+    (node) => {
+      localRef.current = node;
+      if (!contextRef) return;
+      if (typeof contextRef === "function") {
+        contextRef(node);
+      } else {
+        contextRef.current = node;
+      }
+    },
+    [contextRef]
+  );
+  const { buttonProps } = useButton({ ...ctxProps, elementType: "button" }, localRef);
+  if (!isValidElement(children)) return /* @__PURE__ */ jsx(Fragment, { children });
+  return cloneElement(
+    children,
+    { ...buttonProps, ref: mergedCallbackRef }
+  );
+}
+function HeadlessMenuTrigger({
+  children,
+  placement = "bottom start",
+  shouldFlip = true,
+  ...rest
+}) {
+  const childrenArray = Array.isArray(children) ? children : [children];
+  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 })
+  ] });
+}
+function HeadlessMenu({
+  className,
+  children,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const menuRef = useRef(null);
+  useLayoutEffect(() => {
+    if (ariaLabel && menuRef.current) {
+      menuRef.current.removeAttribute("aria-labelledby");
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    Menu$1,
+    {
+      ...props,
+      ref: menuRef,
+      ...ariaLabel !== void 0 ? { "aria-label": ariaLabel } : {},
+      className: className ?? "",
+      children
+    }
+  );
+}
+HeadlessMenuTrigger.Menu = HeadlessMenu;
+var HeadlessMenuItem = forwardRef(
+  function HeadlessMenuItem2({ children, className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(MenuItem$1, { ...props, ref, className: className ?? "", children });
+  }
+);
+function HeadlessMenuSection({
+  children,
+  "aria-label": ariaLabel,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    MenuSection$1,
+    {
+      ...ariaLabel !== void 0 ? { "aria-label": ariaLabel } : {},
+      className: className ?? "",
+      children
+    }
+  );
+}
+function HeadlessMenuDivider({
+  className,
+  ...props
+}) {
+  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,
+  colorScheme = "standard",
+  menuStyle = "baseline",
+  density = 0,
+  disableRipple = false,
+  selectionMode,
+  selectedKeys,
+  onSelectionChange,
+  ...props
+}, _ref) {
+  const close = () => {
+  };
+  const contextValue = {
+    close,
+    disableRipple,
+    colorScheme,
+    menuStyle,
+    density,
+    ...selectionMode !== void 0 ? { selectionMode } : {},
+    ...selectedKeys !== void 0 ? { selectedKeys } : {}
+  };
+  return /* @__PURE__ */ jsx(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    HeadlessMenu,
+    {
+      ...props,
+      ...selectionMode !== void 0 ? { selectionMode } : {},
+      ...selectedKeys !== void 0 ? { selectedKeys } : {},
+      ...onSelectionChange !== void 0 ? { onSelectionChange } : {},
+      className: cn(menuContainerVariants({ colorScheme, menuStyle }), className),
+      children
+    }
+  ) });
+});
+function MenuTrigger({
+  children,
+  placement = "bottom start",
+  shouldFlip = true,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(HeadlessMenuTrigger, { placement, shouldFlip, ...rest, children });
+}
+MenuTrigger.Menu = Menu;
+function CheckIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "data-testid": "check-icon",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      focusable: "false",
+      className: "h-full w-full",
+      children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" })
+    }
+  );
+}
+var DENSITY_HEIGHT = {
+  0: "h-12",
+  [-1]: "h-11",
+  [-2]: "h-10",
+  [-3]: "h-9"
+};
+var MenuItem = forwardRef(function MenuItem2({
+  children,
+  leadingIcon,
+  trailingIcon,
+  trailingText,
+  description,
+  badge,
+  className,
+  disableRipple: itemDisableRipple,
+  ...props
+}, ref) {
+  const ctx = useMenuContext();
+  const disableRipple = itemDisableRipple ?? ctx?.disableRipple ?? false;
+  const colorScheme = ctx?.colorScheme ?? "standard";
+  const menuStyle = ctx?.menuStyle ?? "baseline";
+  const density = ctx?.density ?? 0;
+  const selectionMode = ctx?.selectionMode;
+  const heightClass = 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
+    }),
+    // Height: auto when description is present (multi-line), otherwise density
+    description ? "min-h-12 py-2 h-auto items-start" : heightClass,
+    className
+  );
+  return /* @__PURE__ */ jsx(
+    HeadlessMenuItem,
+    {
+      ...props,
+      ref,
+      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(
+          "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
+          }
+        ),
+        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 }),
+        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",
+            "aria-hidden": "true",
+            children: trailingIcon
+          }
+        ),
+        trailingText != null && trailingIcon == null && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(menuItemTrailingTextVariants(), "relative z-10"),
+            "aria-keyshortcuts": trailingText,
+            children: trailingText
+          }
+        )
+      ] })
+    }
+  );
+});
+function MenuSection({
+  children,
+  header,
+  showDivider = false,
+  className,
+  "aria-label": ariaLabel
+}) {
+  const sectionAriaLabel = ariaLabel ?? header;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showDivider && /* @__PURE__ */ jsx(HeadlessMenuDivider, { className: menuDividerVariants() }),
+    /* @__PURE__ */ jsxs(
+      HeadlessMenuSection,
+      {
+        "aria-label": sectionAriaLabel,
+        className: cn(menuSectionVariants(), className),
+        children: [
+          header && /* @__PURE__ */ jsx(Header, { className: menuSectionHeaderVariants(), "aria-hidden": "true", children: header }),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function MenuDivider({ className }) {
+  return /* @__PURE__ */ jsx(HeadlessMenuDivider, { className: cn(menuDividerVariants(), className) });
+}
+var SnackbarHeadless = forwardRef(
+  function SnackbarHeadless2({
+    message,
+    supportingText,
+    action,
+    showClose,
+    duration = 4e3,
+    severity = "default",
+    position = "bottom-center",
+    onClose,
+    children,
+    className,
+    getAnimationClassName
+  }, ref) {
+    const [animationState, setAnimationState] = useState("entering");
+    const remainingRef = useRef(duration);
+    const startedAtRef = useRef(Date.now());
+    const dismissTimerRef = useRef(null);
+    const exitFallbackRef = useRef(null);
+    const pausedRef = useRef(false);
+    const closedRef = useRef(false);
+    const clearDismissTimer = useCallback(() => {
+      if (dismissTimerRef.current !== null) {
+        clearTimeout(dismissTimerRef.current);
+        dismissTimerRef.current = null;
+      }
+    }, []);
+    const triggerExit = useCallback(() => {
+      if (closedRef.current) return;
+      clearDismissTimer();
+      setAnimationState("exiting");
+      exitFallbackRef.current = setTimeout(() => {
+        if (!closedRef.current) {
+          closedRef.current = true;
+          setAnimationState("exited");
+          onClose?.();
+        }
+      }, 250);
+    }, [clearDismissTimer, onClose]);
+    const startDismissTimer = useCallback(
+      (ms) => {
+        if (ms <= 0) return;
+        clearDismissTimer();
+        startedAtRef.current = Date.now();
+        dismissTimerRef.current = setTimeout(triggerExit, ms);
+      },
+      [clearDismissTimer, triggerExit]
+    );
+    useEffect(() => {
+      let frameId;
+      frameId = requestAnimationFrame(() => {
+        frameId = requestAnimationFrame(() => {
+          setAnimationState("visible");
+        });
+      });
+      return () => cancelAnimationFrame(frameId);
+    }, []);
+    useEffect(() => {
+      if (animationState !== "visible") return;
+      if (duration <= 0) return;
+      remainingRef.current = duration;
+      startDismissTimer(duration);
+      return clearDismissTimer;
+    }, [animationState, duration, startDismissTimer, clearDismissTimer]);
+    useEffect(
+      () => () => {
+        clearDismissTimer();
+        if (exitFallbackRef.current !== null) {
+          clearTimeout(exitFallbackRef.current);
+          exitFallbackRef.current = null;
+        }
+      },
+      [clearDismissTimer]
+    );
+    const handleTransitionEnd = useCallback(() => {
+      if (animationState === "exiting" && !closedRef.current) {
+        if (exitFallbackRef.current !== null) {
+          clearTimeout(exitFallbackRef.current);
+          exitFallbackRef.current = null;
+        }
+        closedRef.current = true;
+        setAnimationState("exited");
+        onClose?.();
+      }
+    }, [animationState, onClose]);
+    const handleMouseEnter = useCallback(() => {
+      if (pausedRef.current || animationState !== "visible") return;
+      pausedRef.current = true;
+      const elapsed = Date.now() - startedAtRef.current;
+      remainingRef.current = Math.max(remainingRef.current - elapsed, 0);
+      clearDismissTimer();
+    }, [animationState, clearDismissTimer]);
+    const handleMouseLeave = useCallback(() => {
+      if (!pausedRef.current || animationState !== "visible") return;
+      pausedRef.current = false;
+      if (duration > 0) startDismissTimer(remainingRef.current);
+    }, [animationState, duration, startDismissTimer]);
+    const handleFocusIn = useCallback(() => {
+      if (pausedRef.current || animationState !== "visible") return;
+      pausedRef.current = true;
+      const elapsed = Date.now() - startedAtRef.current;
+      remainingRef.current = Math.max(remainingRef.current - elapsed, 0);
+      clearDismissTimer();
+    }, [animationState, clearDismissTimer]);
+    const handleFocusOut = useCallback(() => {
+      if (!pausedRef.current || animationState !== "visible") return;
+      pausedRef.current = false;
+      if (duration > 0) startDismissTimer(remainingRef.current);
+    }, [animationState, duration, startDismissTimer]);
+    const handleClose = useCallback(() => {
+      triggerExit();
+    }, [triggerExit]);
+    const ariaProps = severity === "error" ? { role: "alert", "aria-live": "assertive", "aria-atomic": "true" } : { role: "status", "aria-live": "polite", "aria-atomic": "true" };
+    const computedClassName = cn(className, getAnimationClassName?.(animationState, position));
+    const childContent = typeof children === "function" ? children({ animationState, onClose: handleClose }) : children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { children: message }),
+      supportingText && /* @__PURE__ */ jsx("span", { children: supportingText }),
+      action && /* @__PURE__ */ jsx("button", { type: "button", onClick: action.onAction, children: action.label }),
+      showClose && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Close", onClick: handleClose, children: "\u2715" })
+    ] });
+    return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: computedClassName,
+          ...ariaProps,
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          onFocus: handleFocusIn,
+          onBlur: handleFocusOut,
+          onTransitionEnd: handleTransitionEnd,
+          "data-animation-state": animationState,
+          children: childContent
+        }
+      )
+    );
+  }
+);
+SnackbarHeadless.displayName = "SnackbarHeadless";
+var snackbarStackContainerVariants = cva(
+  ["fixed", "z-50", "flex", "gap-2", "pointer-events-none"],
+  {
+    variants: {
+      position: {
+        "bottom-center": [
+          "bottom-4",
+          "left-1/2",
+          "-translate-x-1/2",
+          "flex-col-reverse",
+          "items-center"
+        ],
+        "bottom-left": ["bottom-4", "left-4", "flex-col-reverse", "items-start"],
+        "bottom-right": ["bottom-4", "right-4", "flex-col-reverse", "items-end"],
+        "top-center": ["top-4", "left-1/2", "-translate-x-1/2", "flex-col", "items-center"],
+        "top-left": ["top-4", "left-4", "flex-col", "items-start"],
+        "top-right": ["top-4", "right-4", "flex-col", "items-end"]
+      }
+    },
+    defaultVariants: { position: "bottom-center" }
+  }
+);
+var snackbarBaseVariants = cva(
+  [
+    // Sizing (MD3 spec: 288dp min, 568dp max)
+    "min-w-72",
+    "max-w-snackbar-max",
+    "w-max",
+    "min-h-12",
+    // Restore pointer events so hover/focus timer pause works
+    "pointer-events-auto",
+    // Surface
+    "bg-inverse-surface",
+    // Shape: MD3 extra-small corner = 4dp
+    "rounded-xs",
+    // Elevation level 3
+    "shadow-elevation-3",
+    // Layout
+    "flex",
+    "items-center",
+    "gap-x-1",
+    "pl-4 pr-2",
+    // Typography
+    "text-body-medium",
+    "text-inverse-on-surface",
+    // Transition (properties used by both entry and exit)
+    "transition-[opacity,transform]",
+    "will-change-[opacity,transform]"
+  ],
+  {
+    variants: {
+      /**
+       * Whether the Snackbar has supporting text (two-line layout).
+       * Adjusts vertical padding to MD3 spec for two-line configuration.
+       */
+      twoLine: {
+        true: "py-1",
+        false: "py-1"
+      }
+    },
+    defaultVariants: {
+      twoLine: false
+    }
+  }
+);
+cva("", {
+  variants: {
+    position: {
+      "bottom-center": ["bottom-4", "left-1/2", "-translate-x-1/2"],
+      "bottom-left": ["bottom-4", "left-4"],
+      "bottom-right": ["bottom-4", "right-4"],
+      "top-center": ["top-4", "left-1/2", "-translate-x-1/2"],
+      "top-left": ["top-4", "left-4"],
+      "top-right": ["top-4", "right-4"]
+    }
+  },
+  defaultVariants: {
+    position: "bottom-center"
+  }
+});
+var snackbarAnimationVariants = cva("", {
+  variants: {
+    animationState: {
+      entering: ["opacity-0", "scale-75"],
+      visible: ["scale-100", "opacity-100", "duration-medium1", "ease-emphasized-decelerate"],
+      exiting: ["scale-75", "opacity-0", "duration-short4", "ease-standard-accelerate"],
+      exited: ["scale-75", "opacity-0", "duration-short4", "ease-standard-accelerate"]
+    },
+    enterDirection: {
+      up: ["origin-bottom"],
+      down: ["origin-top"]
+    }
+  },
+  defaultVariants: {
+    animationState: "entering",
+    enterDirection: "up"
+  }
+});
+cva([...snackbarBaseVariants()], {
+  variants: {
+    animationState: {
+      entering: ["opacity-0", "scale-75"],
+      visible: ["scale-100", "opacity-100", "duration-medium1", "ease-emphasized-decelerate"],
+      exiting: ["scale-75", "opacity-0", "duration-short4", "ease-standard-accelerate"],
+      exited: ["scale-75", "opacity-0", "duration-short4", "ease-standard-accelerate"]
+    },
+    enterDirection: {
+      up: ["origin-bottom"],
+      down: ["origin-top"]
+    },
+    position: {
+      "bottom-center": ["bottom-4", "left-1/2", "-translate-x-1/2"],
+      "bottom-left": ["bottom-4", "left-4"],
+      "bottom-right": ["bottom-4", "right-4"],
+      "top-center": ["top-4", "left-1/2", "-translate-x-1/2"],
+      "top-left": ["top-4", "left-4"],
+      "top-right": ["top-4", "right-4"]
+    },
+    twoLine: {
+      true: "py-1",
+      false: "py-1"
+    }
+  },
+  defaultVariants: {
+    animationState: "entering",
+    enterDirection: "up",
+    position: "bottom-center",
+    twoLine: false
+  }
+});
+var snackbarMessageVariants = cva([
+  "flex-1",
+  "text-body-medium",
+  "text-inverse-on-surface"
+]);
+var snackbarSupportingTextVariants = cva([
+  "text-body-medium",
+  "text-inverse-on-surface",
+  "opacity-80"
+]);
+var snackbarActionVariants = cva(["shrink-0", "text-inverse-primary"]);
+var snackbarCloseVariants = cva(["shrink-0", "text-inverse-on-surface"]);
+var snackbarContentVariants = cva(["flex", "flex-col", "flex-1", "min-w-0 py-2 pr-2"]);
+cva(["scale-75", "opacity-0"]);
+function getEnterDirection(position) {
+  return position.startsWith("top") ? "down" : "up";
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
+    }
+  );
+}
+var Snackbar = forwardRef(function Snackbar2({
+  message,
+  supportingText,
+  action,
+  showClose = false,
+  duration = 4e3,
+  severity = "default",
+  position = "bottom-center",
+  onClose,
+  className
+}, ref) {
+  const isTwoLine = Boolean(supportingText);
+  const baseClassName = cn(snackbarBaseVariants({ twoLine: isTwoLine }), className);
+  return /* @__PURE__ */ jsx(
+    SnackbarHeadless,
+    {
+      ref,
+      message,
+      ...supportingText !== void 0 && { supportingText },
+      ...action !== void 0 && { action },
+      showClose,
+      duration,
+      severity,
+      position,
+      ...onClose !== void 0 && { onClose },
+      className: baseClassName,
+      getAnimationClassName: (state, pos) => snackbarAnimationVariants({ animationState: state, enterDirection: getEnterDirection(pos) }),
+      children: ({ onClose: triggerClose }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: snackbarContentVariants(), children: [
+          /* @__PURE__ */ jsx("span", { className: snackbarMessageVariants(), children: message }),
+          supportingText && /* @__PURE__ */ jsx("span", { className: snackbarSupportingTextVariants(), children: supportingText })
+        ] }),
+        action && /* @__PURE__ */ jsx("span", { className: snackbarActionVariants(), children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "text",
+            onPress: action.onAction,
+            className: "text-inverse-primary hover:text-inverse-primary",
+            children: action.label
+          }
+        ) }),
+        showClose && /* @__PURE__ */ jsx("span", { className: snackbarCloseVariants(), children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            variant: "standard",
+            "aria-label": "Close",
+            onPress: triggerClose,
+            className: "text-inverse-on-surface hover:text-inverse-on-surface",
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
+          }
+        ) })
+      ] })
+    }
+  );
+});
+Snackbar.displayName = "Snackbar";
+var SnackbarContext = createContext(null);
+function useSnackbar() {
+  const ctx = useContext(SnackbarContext);
+  if (!ctx) {
+    throw new Error(
+      "[Snackbar] useSnackbar must be used inside <SnackbarProvider>. Wrap your application (or Storybook decorator) with <SnackbarProvider>."
+    );
+  }
+  return ctx;
+}
+function SnackbarProvider({ children, maxVisible = 5 }) {
+  const [queue, setQueue] = useState([]);
+  const counterRef = useRef(0);
+  const baseId = useId();
+  const showSnackbar = useCallback(
+    (options) => {
+      const id = `${baseId}-snackbar-${++counterRef.current}`;
+      setQueue((prev) => [...prev, { ...options, id }]);
+      return id;
+    },
+    [baseId]
+  );
+  const closeSnackbar = useCallback(() => {
+    setQueue((prev) => {
+      if (prev.length === 0) return prev;
+      return prev.slice(1);
+    });
+  }, []);
+  const removeById = useCallback((id) => {
+    setQueue((prev) => prev.filter((item) => item.id !== id));
+  }, []);
+  const contextValue = { showSnackbar, closeSnackbar };
+  const positionGroups = useMemo(() => {
+    const groups = /* @__PURE__ */ new Map();
+    const countByPosition = /* @__PURE__ */ new Map();
+    for (const item of queue) {
+      const pos = item.position ?? "bottom-center";
+      const count = countByPosition.get(pos) ?? 0;
+      if (count < maxVisible) {
+        const existing = groups.get(pos) ?? [];
+        groups.set(pos, [...existing, item]);
+        countByPosition.set(pos, count + 1);
+      }
+    }
+    return groups;
+  }, [queue, maxVisible]);
+  return /* @__PURE__ */ jsxs(SnackbarContext.Provider, { value: contextValue, children: [
+    children,
+    typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx(Fragment, { children: Array.from(positionGroups.entries()).map(([position, items]) => /* @__PURE__ */ jsx("div", { className: snackbarStackContainerVariants({ position }), children: items.map((item) => /* @__PURE__ */ jsx(
+        Snackbar,
+        {
+          message: item.message,
+          ...item.supportingText !== void 0 && {
+            supportingText: item.supportingText
+          },
+          ...item.action !== void 0 && { action: item.action },
+          ...item.showClose !== void 0 && { showClose: item.showClose },
+          ...item.duration !== void 0 && { duration: item.duration },
+          ...item.severity !== void 0 && { severity: item.severity },
+          ...item.position !== void 0 && { position: item.position },
+          ...item.className !== void 0 && { className: item.className },
+          onClose: () => {
+            item.onClose?.();
+            removeById(item.id);
+          }
+        },
+        item.id
+      )) }, position)) }),
+      document.body
+    )
+  ] });
+}
+var DialogContext = createContext(null);
+function useDialogContext() {
+  const ctx = useContext(DialogContext);
+  if (ctx === null) {
+    throw new Error(
+      "[Dialog] DialogHeadline, DialogContent, and DialogActions must be rendered inside a <Dialog> or <DialogHeadless> component."
+    );
+  }
+  return ctx;
+}
+var DialogPanel = ({
+  ariaLabel,
+  headlineId,
+  contentId,
+  onClose,
+  onTransitionEnd,
+  variant,
+  isDismissable,
+  wrapperClassName,
+  className,
+  animationState,
+  getAnimationClassName,
+  children
+}) => {
+  const panelRef = useRef(null);
+  usePreventScroll();
+  const { dialogProps } = useDialog(
+    {
+      ...ariaLabel ? { "aria-label": ariaLabel } : {},
+      "aria-labelledby": headlineId,
+      "aria-describedby": contentId
+    },
+    panelRef
+  );
+  const { overlayProps } = useOverlay(
+    {
+      isOpen: true,
+      onClose,
+      isDismissable,
+      shouldCloseOnBlur: false
+    },
+    panelRef
+  );
+  const panelClassName = cn(className, getAnimationClassName?.(animationState));
+  return (
+    // Centering/positioning wrapper — structural only, no ARIA role
+    /* @__PURE__ */ jsx("div", { className: wrapperClassName, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...mergeProps(overlayProps, dialogProps),
+        ref: panelRef,
+        "aria-modal": "true",
+        className: panelClassName,
+        "data-animation-state": animationState,
+        "data-variant": variant,
+        onTransitionEnd,
+        children
+      }
+    ) })
+  );
+};
+DialogPanel.displayName = "DialogPanel";
+var DialogHeadless = forwardRef(
+  function DialogHeadless2({
+    variant = "basic",
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    "aria-label": ariaLabel,
+    children,
+    className,
+    scrimClassName,
+    getAnimationClassName
+  }, _ref) {
+    const state = useOverlayTriggerState({
+      ...open !== void 0 ? { isOpen: open } : {},
+      ...defaultOpen !== void 0 ? { defaultOpen } : {},
+      ...onOpenChange !== void 0 ? { onOpenChange } : {}
+    });
+    const isOpen = state.isOpen;
+    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");
+          }
+        }, 150);
+      }
+    }, [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 baseId = useId();
+    const headlineId = `${baseId}-dialog-headline`;
+    const contentId = `${baseId}-dialog-content`;
+    const contextValue = {
+      headlineId,
+      contentId,
+      close,
+      variant
+    };
+    const handleScrimClick = useCallback(() => {
+      if (variant === "basic") {
+        close();
+      }
+    }, [variant, close]);
+    if (!isOpen && animationState === "exited") {
+      return null;
+    }
+    const content = /* @__PURE__ */ jsxs(DialogContext.Provider, { value: contextValue, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-testid": "dialog-scrim",
+          className: scrimClassName,
+          onClick: handleScrimClick,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsx(FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsx(
+        DialogPanel,
+        {
+          ariaLabel,
+          headlineId,
+          contentId,
+          onClose: close,
+          onTransitionEnd: handleTransitionEnd,
+          variant,
+          isDismissable: variant === "basic",
+          wrapperClassName: variant === "basic" ? "fixed inset-0 z-50 flex items-center justify-center px-4" : "fixed inset-0 z-50",
+          className,
+          animationState,
+          getAnimationClassName,
+          children
+        }
+      ) })
+    ] });
+    if (typeof document === "undefined") return null;
+    return createPortal(content, document.body);
+  }
+);
+DialogHeadless.displayName = "DialogHeadless";
+var dialogScrimVariants = cva([
+  "fixed",
+  "inset-0",
+  "z-40",
+  "bg-scrim",
+  "opacity-32",
+  "transition-opacity",
+  "duration-medium2",
+  "ease-standard"
+]);
+var dialogPanelVariants = cva(
+  [
+    // Stacking above scrim
+    "z-50",
+    // Surface
+    "bg-surface-container-high",
+    // Flex column layout for slots
+    "flex",
+    "flex-col",
+    // Transition for animation state changes
+    "transition-[opacity,transform]",
+    "will-change-[opacity,transform]"
+  ],
+  {
+    variants: {
+      variant: {
+        basic: [
+          // Shape: MD3 extra-large = 28dp
+          "rounded-xl",
+          // Elevation level 3
+          "shadow-elevation-3",
+          // Width constraints per MD3 spec (280dp min, 560dp max)
+          "min-w-70",
+          "max-w-dialog-max",
+          "w-full",
+          // Internal spacing
+          "pt-6",
+          "pb-3",
+          "px-6",
+          // Positioned in viewport center
+          "relative"
+        ],
+        fullscreen: [
+          // Full viewport
+          "w-full",
+          "h-full",
+          // No rounded corners on fullscreen
+          "rounded-none",
+          // No elevation shadow on fullscreen
+          "shadow-none",
+          // Positioned to fill portal
+          "relative"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "basic"
+    }
+  }
+);
+cva([], {
+  variants: {
+    variant: {
+      basic: ["fixed", "inset-0", "z-50", "flex", "items-center", "justify-center", "px-4"],
+      fullscreen: ["fixed", "inset-0", "z-50"]
+    }
+  },
+  defaultVariants: {
+    variant: "basic"
+  }
+});
+var dialogAnimationVariants = cva("", {
+  variants: {
+    animationState: {
+      entering: [],
+      visible: [],
+      exiting: [],
+      exited: []
+    },
+    variant: {
+      basic: [],
+      fullscreen: []
+    }
+  },
+  compoundVariants: [
+    // Basic: entering — start scaled down + transparent
+    {
+      animationState: "entering",
+      variant: "basic",
+      className: ["scale-90", "opacity-0"]
+    },
+    // Basic: visible — scale to full + fade in
+    {
+      animationState: "visible",
+      variant: "basic",
+      className: ["scale-100", "opacity-100", "duration-medium4", "ease-emphasized-decelerate"]
+    },
+    // Basic: exiting — fade out (scale stays at 1)
+    {
+      animationState: "exiting",
+      variant: "basic",
+      className: ["scale-100", "opacity-0", "duration-short2", "ease-emphasized-accelerate"]
+    },
+    // Basic: exited — fully transparent
+    {
+      animationState: "exited",
+      variant: "basic",
+      className: ["scale-100", "opacity-0"]
+    },
+    // Fullscreen: entering — start below viewport + transparent
+    {
+      animationState: "entering",
+      variant: "fullscreen",
+      className: ["translate-y-full", "opacity-0"]
+    },
+    // Fullscreen: visible — slide up + fade in
+    {
+      animationState: "visible",
+      variant: "fullscreen",
+      className: ["translate-y-0", "opacity-100", "duration-medium4", "ease-emphasized-decelerate"]
+    },
+    // Fullscreen: exiting — slide down + fade out
+    {
+      animationState: "exiting",
+      variant: "fullscreen",
+      className: ["translate-y-full", "opacity-0", "duration-short2", "ease-emphasized-accelerate"]
+    },
+    // Fullscreen: exited — fully off-screen
+    {
+      animationState: "exited",
+      variant: "fullscreen",
+      className: ["translate-y-full", "opacity-0"]
+    }
+  ],
+  defaultVariants: {
+    animationState: "entering",
+    variant: "basic"
+  }
+});
+var dialogHeadlineVariants = cva(["text-headline-small", "text-on-surface"], {
+  variants: {
+    variant: {
+      basic: ["mb-4"],
+      fullscreen: [
+        // Top app bar row in fullscreen: flex, items-center, gap
+        "flex",
+        "items-center",
+        "gap-4",
+        "px-4",
+        "h-14",
+        "shrink-0",
+        "border-b",
+        "border-outline-variant"
+      ]
+    }
+  },
+  defaultVariants: {
+    variant: "basic"
+  }
+});
+var dialogHeadlineTitleVariants = cva([
+  "flex-1",
+  "text-headline-small",
+  "text-on-surface",
+  "truncate"
+]);
+var dialogContentVariants = cva(
+  ["text-body-medium", "text-on-surface-variant", "overflow-y-auto", "flex-1"],
+  {
+    variants: {
+      variant: {
+        basic: ["mb-6"],
+        fullscreen: ["px-6", "py-4"]
+      }
+    },
+    defaultVariants: {
+      variant: "basic"
+    }
+  }
+);
+var dialogActionsVariants = cva([
+  "flex",
+  "items-center",
+  "justify-end",
+  "gap-2",
+  "pt-3",
+  "shrink-0"
+]);
+var Dialog = forwardRef(function Dialog2({
+  variant = "basic",
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  "aria-label": ariaLabel,
+  children,
+  className
+}, _ref) {
+  const panelClassName = cn(dialogPanelVariants({ variant }), className);
+  const scrimClass = dialogScrimVariants();
+  return /* @__PURE__ */ jsx(
+    DialogHeadless,
+    {
+      variant,
+      ...open !== void 0 ? { open } : {},
+      ...defaultOpen !== void 0 ? { defaultOpen } : {},
+      ...onOpenChange !== void 0 ? { onOpenChange } : {},
+      ...ariaLabel ? { "aria-label": ariaLabel } : {},
+      className: panelClassName,
+      scrimClassName: scrimClass,
+      getAnimationClassName: (state) => dialogAnimationVariants({ animationState: state, variant }),
+      children
+    }
+  );
+});
+Dialog.displayName = "Dialog";
+var DialogHeadline = forwardRef(
+  function DialogHeadline2({ children, className, closeButton, confirmButton }, ref) {
+    const { headlineId, variant } = useDialogContext();
+    if (variant === "fullscreen") {
+      return (
+        // Top app bar row for fullscreen variant
+        /* @__PURE__ */ jsxs("div", { className: cn(dialogHeadlineVariants({ variant: "fullscreen" }), className), children: [
+          closeButton,
+          /* @__PURE__ */ jsx("h2", { id: headlineId, className: dialogHeadlineTitleVariants(), children }),
+          confirmButton
+        ] })
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "h2",
+      {
+        ref,
+        id: headlineId,
+        className: cn(dialogHeadlineVariants({ variant: "basic" }), className),
+        children
+      }
+    );
+  }
+);
+DialogHeadline.displayName = "DialogHeadline";
+var DialogContent = forwardRef(function DialogContent2({ children, className }, ref) {
+  const { contentId, variant } = useDialogContext();
+  return /* @__PURE__ */ jsx("div", { ref, id: contentId, className: cn(dialogContentVariants({ variant }), className), children });
+});
+DialogContent.displayName = "DialogContent";
+var DialogActions = forwardRef(function DialogActions2({ children, className }, ref) {
+  useDialogContext();
+  return /* @__PURE__ */ jsx("div", { ref, className: cn(dialogActionsVariants(), className), children });
+});
+DialogActions.displayName = "DialogActions";
 
-export { Button, Checkbox, FAB, FABHeadless, IconButton, IconButtonHeadless, Radio, RadioGroup, RadioGroupHeadless, RadioHeadless, STATE_LAYER_OPACITY, Switch, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, TextField, applyStateLayer, cn, generateMD3Theme, getColorValue, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, hexToRgb, pxToRem, remToPx, rgbToHex, truncateText, withOpacity };
+export { AppBar, AppBarHeadless, Button, Checkbox, Dialog, DialogActions, DialogContent, DialogContext, DialogHeadless, DialogHeadline, Drawer, DrawerItem, DrawerSection, FAB, FABHeadless, HeadlessDrawer, HeadlessDrawerItem, HeadlessMenu, HeadlessMenuDivider, HeadlessMenuItem, HeadlessMenuSection, HeadlessMenuTrigger, HeadlessNavigationBar, HeadlessNavigationBarItem, HeadlessTab, HeadlessTabList, HeadlessTabPanel, IconButton, IconButtonHeadless, Menu, MenuContext, MenuDivider, MenuItem, MenuSection, MenuTrigger, NavigationBar, NavigationBarItem, Progress, ProgressHeadless, Radio, RadioGroup, RadioGroupHeadless, RadioHeadless, STATE_LAYER_OPACITY, Snackbar, SnackbarContext, SnackbarHeadless, SnackbarProvider, Switch, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, TabList, TabPanel, Tabs, TextField, applyStateLayer, cn, generateMD3Theme, getColorValue, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, hexToRgb, pxToRem, remToPx, rgbToHex, truncateText, useDialogContext, useMenuContext, useSnackbar, withOpacity };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map