@tinybigui/react 0.21.1 → 0.23.0

package/dist/index.cjs

@@ -472,6 +472,10 @@ var buttonVariants = classVarianceAuthority.cva(
        *   Filled/Tonal  hover→level-1, focus/pressed→level-0
        *   Elevated      base→level-1, hover→level-2, focus/pressed→level-1
        *   Outlined/Text no elevation
+       *
+       * Self-targeting `data-[x]:` is used for elevation because these classes
+       * sit on the root element (the group host) — group-data descendant
+       * selectors cannot match an element against itself.
        */
       variant: {
         /**
@@ -480,17 +484,17 @@ var buttonVariants = classVarianceAuthority.cva(
          * Elevation: 0 base → 1 hover → 0 focus → 0 pressed
          */
         filled: [
-          "bg-primary text-on-primary shadow-none",
+          "text-on-primary shadow-none",
           // Hover: gains level-1 elevation
-          "group-data-[hovered]/button:shadow-elevation-1",
+          "data-[hovered]:shadow-elevation-1",
           // Focus/pressed: shadow must explicitly return to level-0
           // (doubled attribute selector → higher specificity than hover)
-          "group-data-[focus-visible]/button:shadow-none",
-          "group-data-[pressed]/button:group-data-[pressed]/button:shadow-none",
-          // Disabled overrides
-          "group-data-[disabled]/button:bg-on-surface/12",
-          "group-data-[disabled]/button:text-on-surface/38",
-          "group-data-[disabled]/button:shadow-none"
+          "data-[focus-visible]:data-[focus-visible]:shadow-none",
+          "data-[pressed]:data-[pressed]:data-[pressed]:shadow-none",
+          // Disabled overrides — root owns text color + shadow only;
+          // disabled bg override lives on buttonContainerVariants (filled variant)
+          "data-[disabled]:text-on-surface/38",
+          "data-[disabled]:shadow-none"
         ],
         /**
          * Outlined — medium emphasis. Transparent with border.
@@ -498,10 +502,10 @@ var buttonVariants = classVarianceAuthority.cva(
          * Elevation: always 0
          */
         outlined: [
-          "bg-transparent border border-outline text-primary",
+          "border border-outline text-primary",
           // Disabled overrides
-          "group-data-[disabled]/button:border-on-surface/12",
-          "group-data-[disabled]/button:text-on-surface/38"
+          "data-[disabled]:border-on-surface/12",
+          "data-[disabled]:text-on-surface/38"
         ],
         /**
          * Tonal — secondary emphasis.
@@ -509,16 +513,15 @@ var buttonVariants = classVarianceAuthority.cva(
          * Elevation: 0 base → 1 hover → 0 focus → 0 pressed
          */
         tonal: [
-          "bg-secondary-container text-on-secondary-container shadow-none",
+          "text-on-secondary-container shadow-none",
           // Hover: gains level-1 elevation (same as filled)
-          "group-data-[hovered]/button:shadow-elevation-1",
+          "data-[hovered]:shadow-elevation-1",
           // Focus/pressed: return to level-0
-          "group-data-[focus-visible]/button:shadow-none",
-          "group-data-[pressed]/button:group-data-[pressed]/button:shadow-none",
+          "data-[focus-visible]:data-[focus-visible]:shadow-none",
+          "data-[pressed]:data-[pressed]:data-[pressed]:shadow-none",
           // Disabled overrides
-          "group-data-[disabled]/button:bg-on-surface/12",
-          "group-data-[disabled]/button:text-on-surface/38",
-          "group-data-[disabled]/button:shadow-none"
+          "data-[disabled]:text-on-surface/38",
+          "data-[disabled]:shadow-none"
         ],
         /**
          * Elevated — separation via shadow.
@@ -526,17 +529,16 @@ var buttonVariants = classVarianceAuthority.cva(
          * Elevation: 1 base → 2 hover → 1 focus → 1 pressed
          */
         elevated: [
-          "bg-surface-container-low text-primary shadow-elevation-1",
+          "text-primary shadow-elevation-1",
           // Hover: gains extra elevation
-          "group-data-[hovered]/button:shadow-elevation-2",
+          "data-[hovered]:shadow-elevation-2",
           // Focus/pressed: return to base level-1
           // (doubled selector wins over single hover selector at same cascade position)
-          "group-data-[focus-visible]/button:shadow-elevation-1",
-          "group-data-[pressed]/button:group-data-[pressed]/button:shadow-elevation-1",
+          "data-[focus-visible]:data-[focus-visible]:shadow-elevation-1",
+          "data-[pressed]:data-[pressed]:data-[pressed]:shadow-elevation-1",
           // Disabled overrides
-          "group-data-[disabled]/button:bg-on-surface/12",
-          "group-data-[disabled]/button:text-on-surface/38",
-          "group-data-[disabled]/button:shadow-none"
+          "data-[disabled]:text-on-surface/38",
+          "data-[disabled]:shadow-none"
         ],
         /**
          * Text — lowest emphasis.
@@ -544,9 +546,9 @@ var buttonVariants = classVarianceAuthority.cva(
          * Elevation: always 0
          */
         text: [
-          "bg-transparent text-primary",
+          "text-primary",
           // Disabled overrides
-          "group-data-[disabled]/button:text-on-surface/38"
+          "data-[disabled]:text-on-surface/38"
         ]
       },
       /**
@@ -584,6 +586,29 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
+var buttonContainerVariants = classVarianceAuthority.cva(
+  [
+    "absolute inset-0 rounded-[inherit] pointer-events-none",
+    // Effects transition for background-color — no overshoot
+    "transition-[background-color] duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
+  ],
+  {
+    variants: {
+      variant: {
+        // MD3 disabled: filled containers replace bg with on-surface/12.
+        // group-data descendant selector targets this child span (not the root host).
+        filled: "bg-primary group-data-[disabled]/button:bg-on-surface/12",
+        // outlined/text: container stays transparent when disabled — only border + label fade.
+        outlined: "bg-transparent",
+        // MD3 disabled: tonal and elevated containers also replace bg with on-surface/12.
+        tonal: "bg-secondary-container group-data-[disabled]/button:bg-on-surface/12",
+        elevated: "bg-surface-container-low group-data-[disabled]/button:bg-on-surface/12",
+        text: "bg-transparent"
+      }
+    },
+    defaultVariants: { variant: "filled" }
+  }
+);
 var buttonStateLayerVariants = classVarianceAuthority.cva(
   [
     "absolute inset-0 rounded-[inherit] overflow-hidden pointer-events-none opacity-0",
@@ -886,6 +911,7 @@ var Button = React.forwardRef(
           className
         ),
         children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(buttonContainerVariants({ variant })), "aria-hidden": "true" }),
           ripples,
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(buttonStateLayerVariants({ variant })), "aria-hidden": "true" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(buttonFocusRingVariants()), "aria-hidden": "true" }),
@@ -5952,293 +5978,526 @@ var CardActions = React.forwardRef(function CardActions2({ children, className }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center justify-end gap-2 p-4 pt-0", className), children });
 });
 CardActions.displayName = "CardActions";
-var MenuContext = React.createContext(null);
-function useMenuContext() {
-  return React.useContext(MenuContext);
-}
-function TriggerBridge({ children }) {
-  const ctx = reactAriaComponents.useSlottedContext(reactAriaComponents.ButtonContext);
-  const localRef = React.useRef(null);
-  const { ref: contextRef, ...ctxProps } = ctx ?? {};
-  const mergedCallbackRef = React.useCallback(
-    (node) => {
-      localRef.current = node;
-      if (!contextRef) return;
-      if (typeof contextRef === "function") {
-        contextRef(node);
-      } else {
-        contextRef.current = node;
-      }
-    },
-    [contextRef]
-  );
-  const { buttonProps } = reactAria.useButton({ ...ctxProps, elementType: "button" }, localRef);
-  if (!React.isValidElement(children)) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-  return React.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__ */ jsxRuntime.jsxs(reactAriaComponents.MenuTrigger, { ...rest, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TriggerBridge, { children: triggerChild }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Popover, { placement, shouldFlip, offset: 4, children: menuChild })
-  ] });
-}
-function HeadlessMenu({
-  className,
-  children,
-  "aria-label": ariaLabel,
-  ...props
-}) {
-  const menuRef = React.useRef(null);
-  React.useLayoutEffect(() => {
-    if (ariaLabel && menuRef.current) {
-      menuRef.current.removeAttribute("aria-labelledby");
-    }
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactAriaComponents.Menu,
-    {
-      ...props,
-      ref: menuRef,
-      ...ariaLabel !== void 0 ? { "aria-label": ariaLabel } : {},
-      className: className ?? "",
-      children
-    }
-  );
-}
-HeadlessMenuTrigger.Menu = HeadlessMenu;
-var HeadlessMenuItem = React.forwardRef(
-  function HeadlessMenuItem2({ children, className, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.MenuItem, { ...props, ref, className: className ?? "", children });
-  }
-);
-function HeadlessMenuSection({
-  children,
-  "aria-label": ariaLabel,
-  className
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactAriaComponents.MenuSection,
-    {
-      ...ariaLabel !== void 0 ? { "aria-label": ariaLabel } : {},
-      className: className ?? "",
-      children
-    }
-  );
-}
-function HeadlessMenuDivider({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Separator, { ...props, className: className ?? "" });
-}
 var menuContainerVariants = classVarianceAuthority.cva(
   [
-    // Elevation
-    "shadow-elevation-2",
-    // Width constraints per MD3 spec (112dp min / 280dp max)
+    // Width constraints: 112dp min / 280dp max per MD3 spec
     "min-w-28 max-w-70",
-    // Layout
-    "py-2",
-    // Scroll: show scrollbar when content overflows; max height avoids clipping
-    "overflow-y-auto",
+    "flex flex-col",
+    // Scroll behaviour
     "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"
+    "gap-0.5",
+    // Focus outline delegated to React Aria
+    "outline-none"
   ],
   {
     variants: {
       /**
-       * Color scheme — drives the container background.
-       * baseline+standard uses a separate compound variant.
+       * Color scheme — drives item/segment background and content colors.
+       * standard: surface-container-low item background.
+       * vibrant:  tertiary-container item background.
        */
       colorScheme: {
         standard: [],
         vibrant: []
       },
       /**
-       * Visual style — drives corner radius and baseline vs vertical background.
+       * Visual style — drives corner radius and container background.
+       *
+       * baseline: solid surface-container, 4dp corners, 8dp vertical padding.
+       * vertical: transparent container, 16dp corners, no container padding —
+       *   items own their segment surface, gaps reveal the page background.
        */
       menuStyle: {
-        baseline: ["rounded-xs", "bg-surface-container"],
-        vertical: ["rounded-lg", "bg-surface-container-low"]
+        baseline: ["rounded-xs", "bg-surface-container", "py-2"],
+        vertical: ["bg-transparent"]
       }
     },
-    compoundVariants: [
-      // Vertical + vibrant: tertiary container background
-      {
-        menuStyle: "vertical",
-        colorScheme: "vibrant",
-        class: ["bg-tertiary-container"]
-      }
-    ],
     defaultVariants: {
       colorScheme: "standard",
       menuStyle: "baseline"
     }
   }
 );
+var menuPopoverVariants = classVarianceAuthority.cva([
+  "will-change-[transform,opacity]",
+  "data-[entering]:pointer-events-none data-[exiting]:pointer-events-none",
+  "data-[entering]:animate-md-scale-in",
+  "data-[exiting]:animate-md-scale-out",
+  "origin-top",
+  "data-[placement=top]:origin-bottom",
+  "data-[placement=left]:origin-right",
+  "data-[placement=right]:origin-left",
+  "motion-reduce:data-[entering]:animate-none motion-reduce:data-[exiting]:animate-none"
+]);
 var menuItemVariants = classVarianceAuthority.cva(
   [
     // Layout — height set by density context in MenuItem component
+    // gap is style-specific: baseline = 12dp (gap-3), vertical = 8dp (gap-2)
     "relative flex w-full items-center",
-    "px-3 gap-3",
-    // Typography: Body Large per MD3 baseline spec
-    "text-body-large",
+    // Typography: Label Large per MD3 menu spec
+    "text-label-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"
+    // Color transition (effects — no overshoot)
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Disabled — self-targeting data-[x]: selectors (RAC emits data-disabled)
+    "data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed"
   ],
   {
     variants: {
       /**
-       * Disabled state: reduces opacity and blocks interaction.
+       * Color scheme — drives item bg, default text/icon color, and selection colors.
+       *
+       * standard: surface-container-low bg, on-surface text, on-surface-variant icons.
+       *           Selected/open: tertiary-container bg highlight, on-tertiary-container content.
+       * vibrant:  tertiary-container bg, on-tertiary-container text AND icons.
+       *           Selected/open: tertiary bg highlight, on-tertiary content.
        */
-      isDisabled: {
-        true: ["opacity-38 cursor-not-allowed pointer-events-none"],
-        false: []
+      colorScheme: {
+        standard: ["text-on-surface"],
+        vibrant: ["text-on-tertiary-container"]
       },
       /**
-       * Selected state: background and text color driven by compound variants.
+       * Visual style — drives padding, gap, segment surface, and corner rounding.
+       *
+       * baseline: 12dp h-padding, 12dp icon-to-label gap, no item background (container provides it).
+       * vertical: 12dp h-padding, 8dp icon-to-label gap, item owns segment surface, segmented rounding
+       *   via first/last + adjacent-sibling gap selectors.
        */
-      isSelected: {
-        true: [],
-        false: []
+      menuStyle: {
+        baseline: ["px-3", "gap-3"],
+        vertical: [
+          "px-3",
+          "gap-2",
+          // Default: inner item (4dp all corners)
+          "rounded-md"
+          // Last item in the whole menu → 16dp bottom corners
+        ]
+      }
+    },
+    compoundVariants: [
+      // vertical + standard: selected/open text → on-tertiary-container
+      {
+        menuStyle: "vertical",
+        colorScheme: "standard",
+        class: [
+          "data-[selected]:text-on-tertiary-container",
+          "data-[open]:text-on-tertiary-container"
+        ]
+      },
+      // vertical + vibrant: selected/open text → on-tertiary
+      {
+        menuStyle: "vertical",
+        colorScheme: "vibrant",
+        class: ["data-[selected]:text-on-tertiary", "data-[open]:text-on-tertiary"]
+      }
+    ],
+    defaultVariants: {
+      colorScheme: "standard",
+      menuStyle: "baseline"
+    }
+  }
+);
+var menuItemHighlightVariants = classVarianceAuthority.cva(
+  [
+    "absolute inset-0 pointer-events-none",
+    // Inherit the item's own corner radius (inner 4dp or outer 16dp)
+    "rounded-[inherit]",
+    // Effects transition for background-color — no overshoot
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // z-0: below state layer (z-[1]) and content (z-10)
+    "z-0"
+  ],
+  {
+    variants: {
+      menuStyle: {
+        baseline: [],
+        vertical: []
       },
-      /**
-       * 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"]
+        standard: [
+          // baseline selected bg
+          "group-data-[selected]/menuitem:bg-surface-container-highest"
+        ],
+        vibrant: [
+          // baseline + vibrant: use surface-container-highest as fallback
+          "group-data-[selected]/menuitem:bg-surface-container-highest"
+        ]
+      }
+    },
+    compoundVariants: [
+      // vertical + standard: selected/open highlight → tertiary-container
+      {
+        menuStyle: "vertical",
+        colorScheme: "standard",
+        class: [
+          "group-data-[selected]/menuitem:bg-tertiary-container",
+          "group-data-[open]/menuitem:bg-tertiary-container"
+        ]
+      },
+      // vertical + vibrant: selected/open highlight → tertiary
+      {
+        menuStyle: "vertical",
+        colorScheme: "vibrant",
+        class: [
+          "group-data-[selected]/menuitem:bg-tertiary",
+          "group-data-[open]/menuitem:bg-tertiary"
+        ]
+      }
+    ],
+    defaultVariants: {
+      menuStyle: "baseline",
+      colorScheme: "standard"
+    }
+  }
+);
+var menuItemStateLayerVariants = classVarianceAuthority.cva(
+  [
+    "absolute inset-0 rounded-[inherit] overflow-hidden pointer-events-none opacity-0",
+    // Effects transition — opacity must NOT overshoot
+    "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Hover: 8%
+    "group-data-[hovered]/menuitem:opacity-8",
+    // Pressed: 10%, doubled selector wins over hover at same cascade position
+    "group-data-[pressed]/menuitem:group-data-[pressed]/menuitem:opacity-10",
+    // No state layer when disabled
+    "group-data-[disabled]/menuitem:hidden",
+    // z-[1]: above highlight layer (z-0), below content (z-10)
+    "z-[1]"
+  ],
+  {
+    variants: {
+      colorScheme: {
+        standard: ["bg-on-surface"],
+        vibrant: ["bg-on-tertiary-container"]
       },
-      /**
-       * 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) ──────────────────────────
+      // vertical + standard: selected/open state layer → on-tertiary-container
+      {
+        menuStyle: "vertical",
+        colorScheme: "standard",
+        class: [
+          "group-data-[selected]/menuitem:bg-on-tertiary-container",
+          "group-data-[open]/menuitem:bg-on-tertiary-container"
+        ]
+      },
+      // vertical + vibrant: selected/open state layer → on-tertiary
       {
-        isSelected: true,
-        menuStyle: "baseline",
+        menuStyle: "vertical",
+        colorScheme: "vibrant",
         class: [
-          "bg-surface-container-highest"
-          // text-on-surface already applied by standard colorScheme variant
+          "group-data-[selected]/menuitem:bg-on-tertiary",
+          "group-data-[open]/menuitem:bg-on-tertiary"
         ]
+      }
+    ],
+    defaultVariants: {
+      colorScheme: "standard",
+      menuStyle: "baseline"
+    }
+  }
+);
+var menuItemFocusRingVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-[inherit]",
+  "outline outline-2 -outline-offset-2 outline-secondary",
+  // Effects transition — opacity must not overshoot
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/menuitem:opacity-100",
+  // z-[2]: above state layer (z-[1]) and highlight (z-0), below content (z-10)
+  "z-[2]"
+]);
+var menuItemIconVariants = classVarianceAuthority.cva(
+  [
+    "relative z-10 shrink-0 flex items-center justify-center",
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Disabled: 38% opacity on icon color
+    "group-data-[disabled]/menuitem:text-on-surface/38"
+  ],
+  {
+    variants: {
+      colorScheme: {
+        standard: ["text-on-surface-variant"],
+        vibrant: ["text-on-tertiary-container"]
       },
-      // ── Vertical + Standard selection ───────────────────────────────────
+      menuStyle: {
+        baseline: ["h-6 w-6"],
+        vertical: ["h-5 w-5"]
+      }
+    },
+    compoundVariants: [
+      // vertical + standard: selected/open icon → on-tertiary-container
       {
-        isSelected: true,
         menuStyle: "vertical",
         colorScheme: "standard",
         class: [
-          "bg-tertiary-container",
-          "text-on-tertiary-container",
-          "before:bg-on-tertiary-container"
+          "group-data-[selected]/menuitem:text-on-tertiary-container",
+          "group-data-[open]/menuitem:text-on-tertiary-container"
         ]
       },
-      // ── Vertical + Vibrant selection ─────────────────────────────────────
+      // vertical + vibrant: selected/open icon → on-tertiary
       {
-        isSelected: true,
         menuStyle: "vertical",
         colorScheme: "vibrant",
-        class: ["bg-tertiary", "text-on-tertiary", "before:bg-on-tertiary"]
+        class: [
+          "group-data-[selected]/menuitem:text-on-tertiary",
+          "group-data-[open]/menuitem:text-on-tertiary"
+        ]
       }
     ],
     defaultVariants: {
-      isDisabled: false,
-      isSelected: false,
       colorScheme: "standard",
       menuStyle: "baseline"
     }
   }
 );
 var menuSectionVariants = classVarianceAuthority.cva(["flex flex-col w-full"]);
-var menuSectionHeaderVariants = classVarianceAuthority.cva([
-  "px-3 pt-2 pb-1",
-  "text-title-small text-on-surface-variant",
-  "select-none"
-]);
-var menuDividerVariants = classVarianceAuthority.cva(["border-t border-outline-variant", "my-2 mx-0"]);
-classVarianceAuthority.cva(["h-2 w-full"]);
-var menuItemTrailingTextVariants = classVarianceAuthority.cva([
-  "ml-auto shrink-0 text-label-large text-on-surface-variant",
-  "select-none"
-]);
-var menuItemDescriptionVariants = classVarianceAuthority.cva([
-  "text-body-medium text-on-surface-variant",
-  "select-none"
-]);
-var Menu = React.forwardRef(function Menu2({
-  children,
-  className,
-  colorScheme = "standard",
-  menuStyle = "baseline",
-  density = 0,
-  disableRipple = false,
-  selectionMode,
-  selectedKeys,
-  onSelectionChange,
-  ...props
-}, _ref) {
+var menuSectionHeaderVariants = classVarianceAuthority.cva(
+  [
+    // 32dp tall region, content vertically centred, 12dp leading padding aligned with items
+    "px-3 h-8 flex items-center",
+    "text-title-small",
+    "select-none"
+  ],
+  {
+    variants: {
+      colorScheme: {
+        standard: ["text-on-surface-variant"],
+        vibrant: ["text-on-tertiary-container"]
+      }
+    },
+    defaultVariants: {
+      colorScheme: "standard"
+    }
+  }
+);
+var menuDividerVariants = classVarianceAuthority.cva(["border-t border-outline-variant", "my-0.5 mx-3"]);
+classVarianceAuthority.cva(["h-0.5 w-full"]);
+var menuItemTrailingTextVariants = classVarianceAuthority.cva(
+  [
+    "ml-auto shrink-0 text-label-large",
+    "select-none",
+    "group-data-[disabled]/menuitem:text-on-surface/38"
+  ],
+  {
+    variants: {
+      colorScheme: {
+        standard: ["text-on-surface-variant"],
+        vibrant: ["text-on-tertiary-container"]
+      },
+      menuStyle: {
+        baseline: [],
+        vertical: [
+          "group-data-[selected]/menuitem:text-on-tertiary-container",
+          "group-data-[open]/menuitem:text-on-tertiary-container"
+        ]
+      }
+    },
+    compoundVariants: [
+      // vertical + vibrant: selected/open trailing text → on-tertiary
+      {
+        menuStyle: "vertical",
+        colorScheme: "vibrant",
+        class: [
+          "group-data-[selected]/menuitem:text-on-tertiary",
+          "group-data-[open]/menuitem:text-on-tertiary"
+        ]
+      }
+    ],
+    defaultVariants: {
+      colorScheme: "standard",
+      menuStyle: "baseline"
+    }
+  }
+);
+var menuItemDescriptionVariants = classVarianceAuthority.cva(
+  ["text-body-medium", "select-none", "group-data-[disabled]/menuitem:text-on-surface/38"],
+  {
+    variants: {
+      colorScheme: {
+        standard: ["text-on-surface-variant"],
+        vibrant: ["text-on-tertiary-container"]
+      },
+      menuStyle: {
+        baseline: [],
+        vertical: [
+          "group-data-[selected]/menuitem:text-on-tertiary-container",
+          "group-data-[open]/menuitem:text-on-tertiary-container"
+        ]
+      }
+    },
+    compoundVariants: [
+      // vertical + vibrant: selected/open description → on-tertiary
+      {
+        menuStyle: "vertical",
+        colorScheme: "vibrant",
+        class: [
+          "group-data-[selected]/menuitem:text-on-tertiary",
+          "group-data-[open]/menuitem:text-on-tertiary"
+        ]
+      }
+    ],
+    defaultVariants: {
+      colorScheme: "standard",
+      menuStyle: "baseline"
+    }
+  }
+);
+classVarianceAuthority.cva(
+  [
+    "flex flex-col w-full",
+    "px-1 py-0.5 gap-0.5",
+    "rounded-lg first:rounded-b-sm last:rounded-t-sm",
+    "shadow-elevation-1"
+  ],
+  {
+    variants: {
+      menuStyle: {
+        vertical: ["bg-surface-container-low"],
+        baseline: []
+      },
+      colorScheme: {
+        standard: ["bg-surface-container-low"],
+        vibrant: ["bg-tertiary-container"]
+      }
+    },
+    compoundVariants: [
+      // vertical + standard: item background = surface-container-low
+      {
+        menuStyle: "vertical",
+        colorScheme: "standard",
+        class: ["bg-surface-container-low"]
+      },
+      // vertical + vibrant: item background = tertiary-container
+      {
+        menuStyle: "vertical",
+        colorScheme: "vibrant",
+        class: ["bg-tertiary-container"]
+      }
+    ],
+    defaultVariants: {
+      menuStyle: "vertical",
+      colorScheme: "standard"
+    }
+  }
+);
+var MenuContext = React.createContext(null);
+function useMenuContext() {
+  return React.useContext(MenuContext);
+}
+function TriggerBridge({ children }) {
+  const ctx = reactAriaComponents.useSlottedContext(reactAriaComponents.ButtonContext);
+  const localRef = React.useRef(null);
+  const { ref: contextRef, ...ctxProps } = ctx ?? {};
+  const mergedCallbackRef = React.useCallback(
+    (node) => {
+      localRef.current = node;
+      if (!contextRef) return;
+      if (typeof contextRef === "function") {
+        contextRef(node);
+      } else {
+        contextRef.current = node;
+      }
+    },
+    [contextRef]
+  );
+  const { buttonProps } = reactAria.useButton({ ...ctxProps, elementType: "button" }, localRef);
+  if (!React.isValidElement(children)) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  return React.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__ */ jsxRuntime.jsxs(reactAriaComponents.MenuTrigger, { ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TriggerBridge, { children: triggerChild }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.Popover,
+      {
+        placement,
+        shouldFlip,
+        offset: 4,
+        className: menuPopoverVariants(),
+        children: menuChild
+      }
+    )
+  ] });
+}
+function HeadlessMenu({
+  className,
+  children,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const menuRef = React.useRef(null);
+  React.useLayoutEffect(() => {
+    if (ariaLabel && menuRef.current) {
+      menuRef.current.removeAttribute("aria-labelledby");
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Menu,
+    {
+      ...props,
+      ref: menuRef,
+      ...ariaLabel !== void 0 ? { "aria-label": ariaLabel } : {},
+      className: className ?? "",
+      children
+    }
+  );
+}
+HeadlessMenuTrigger.Menu = HeadlessMenu;
+var HeadlessMenuItem = React.forwardRef(
+  function HeadlessMenuItem2({ children, className, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.MenuItem, { ...props, ref, className: className ?? "", children });
+  }
+);
+function HeadlessMenuSection({
+  children,
+  "aria-label": ariaLabel,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.MenuSection,
+    {
+      ...ariaLabel !== void 0 ? { "aria-label": ariaLabel } : {},
+      className: className ?? "",
+      children
+    }
+  );
+}
+function HeadlessMenuDivider({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Separator, { ...props, className: className ?? "" });
+}
+var Menu = React.forwardRef(function Menu2({
+  children,
+  className,
+  colorScheme = "standard",
+  menuStyle = "baseline",
+  density = 0,
+  disableRipple = false,
+  selectionMode,
+  selectedKeys,
+  onSelectionChange,
+  ...props
+}, _ref) {
   const close = () => {
   };
   const contextValue = {
@@ -6286,7 +6545,13 @@ function CheckIcon() {
     }
   );
 }
-var DENSITY_HEIGHT = {
+var BASELINE_DENSITY_HEIGHT = {
+  0: "h-12",
+  [-1]: "h-11",
+  [-2]: "h-10",
+  [-3]: "h-9"
+};
+var VERTICAL_DENSITY_HEIGHT = {
   0: "h-12",
   [-1]: "h-11",
   [-2]: "h-10",
@@ -6309,19 +6574,18 @@ var MenuItem = React.forwardRef(function MenuItem2({
   const menuStyle = ctx?.menuStyle ?? "baseline";
   const density = ctx?.density ?? 0;
   const selectionMode = ctx?.selectionMode;
-  const heightClass = DENSITY_HEIGHT[density];
+  const heightClass = menuStyle === "vertical" ? VERTICAL_DENSITY_HEIGHT[density] : BASELINE_DENSITY_HEIGHT[density];
   const isSelectionMenu = selectionMode != null;
   const { ripples, onMouseDown } = useRipple({ disabled: disableRipple });
-  const computeClassName = ({ isDisabled, isSelected }) => cn(
-    menuItemVariants({
-      isDisabled,
-      isSelected: isSelected ?? false,
-      colorScheme,
-      menuStyle
-    }),
+  const computeClassName = ({ isSelected }) => cn(
+    menuItemVariants({ colorScheme, menuStyle }),
+    // group/menuitem scope: all slot children read state via group-data-[x]/menuitem
+    "group/menuitem",
     // Height: auto when description is present (multi-line), otherwise density
     description ? "min-h-12 py-2 h-auto items-start" : heightClass,
-    className
+    className,
+    // Silence the isSelected lint — value consumed in render-prop below
+    isSelected ? "" : ""
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
     HeadlessMenuItem,
@@ -6331,24 +6595,48 @@ var MenuItem = React.forwardRef(function MenuItem2({
       className: computeClassName,
       onMouseDown,
       children: ({ isSelected }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        !disableRipple && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]", children: ripples }),
-        (leadingIcon != null || isSelectionMenu) && /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: "text-on-surface-variant relative z-10 flex h-6 w-6 shrink-0 items-center justify-center",
             "aria-hidden": "true",
-            children: isSelectionMenu && leadingIcon == null ? isSelected ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) : null : leadingIcon
+            "data-testid": "menuitem-highlight",
+            className: menuItemHighlightVariants({ colorScheme, menuStyle })
           }
         ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: menuItemStateLayerVariants({ colorScheme, menuStyle })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-testid": "menuitem-focus-ring",
+            className: menuItemFocusRingVariants()
+          }
+        ),
+        !disableRipple && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "pointer-events-none absolute inset-0 z-[3] overflow-hidden rounded-[inherit]"
+            ),
+            children: ripples
+          }
+        ),
+        (leadingIcon != null || isSelectionMenu) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: menuItemIconVariants({ colorScheme, menuStyle }), "aria-hidden": "true", children: isSelectionMenu && leadingIcon == null ? isSelected ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) : null : leadingIcon }),
         description != null ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative z-10 flex min-w-0 flex-1 flex-col", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-body-large", children }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: menuItemDescriptionVariants(), children: description })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-body-large relative z-10 min-w-0 flex-1", children }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-label-large group-data-[disabled]/menuitem:text-on-surface/38", children }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: menuItemDescriptionVariants({ colorScheme, menuStyle }), children: description })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-label-large group-data-[disabled]/menuitem:text-on-surface/38 relative z-10 min-w-0 flex-1", children }),
         badge != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 shrink-0", children: badge }),
         trailingIcon != null && trailingText == null && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: "text-on-surface-variant relative z-10 ml-auto flex h-6 w-6 shrink-0 items-center justify-center",
+            className: cn(menuItemIconVariants({ colorScheme, menuStyle }), "ml-auto"),
             "aria-hidden": "true",
             children: trailingIcon
           }
@@ -6356,7 +6644,10 @@ var MenuItem = React.forwardRef(function MenuItem2({
         trailingText != null && trailingIcon == null && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: cn(menuItemTrailingTextVariants(), "relative z-10"),
+            className: cn(
+              menuItemTrailingTextVariants({ colorScheme, menuStyle }),
+              "relative z-10"
+            ),
             "aria-keyshortcuts": trailingText,
             children: trailingText
           }
@@ -6372,6 +6663,8 @@ function MenuSection({
   className,
   "aria-label": ariaLabel
 }) {
+  const ctx = useMenuContext();
+  const colorScheme = ctx?.colorScheme ?? "standard";
   const sectionAriaLabel = ariaLabel ?? header;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     showDivider && /* @__PURE__ */ jsxRuntime.jsx(HeadlessMenuDivider, { className: menuDividerVariants() }),
@@ -6381,7 +6674,7 @@ function MenuSection({
         "aria-label": sectionAriaLabel,
         className: cn(menuSectionVariants(), className),
         children: [
-          header && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Header, { className: menuSectionHeaderVariants(), "aria-hidden": "true", children: header }),
+          header && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Header, { className: menuSectionHeaderVariants({ colorScheme }), "aria-hidden": "true", children: header }),
           children
         ]
       }
@@ -7721,13 +8014,14 @@ var DialogPanel = ({
   headlineId,
   contentId,
   onClose,
-  onTransitionEnd,
+  onAnimationEnd,
   variant,
   isDismissable,
   wrapperClassName,
   className,
   animationState,
   getAnimationClassName,
+  icon,
   children
 }) => {
   const panelRef = React.useRef(null);
@@ -7750,9 +8044,10 @@ var DialogPanel = ({
     panelRef
   );
   const panelClassName = cn(className, getAnimationClassName?.(animationState));
+  const hasIcon = icon !== void 0 && icon !== null && variant === "basic";
   return (
     // Centering/positioning wrapper — structural only, no ARIA role
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapperClassName, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapperClassName, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ...utils.mergeProps(overlayProps, dialogProps),
@@ -7761,8 +8056,12 @@ var DialogPanel = ({
         className: panelClassName,
         "data-animation-state": animationState,
         "data-variant": variant,
-        onTransitionEnd,
-        children
+        "data-with-icon": hasIcon ? "" : void 0,
+        onAnimationEnd,
+        children: [
+          hasIcon && icon,
+          children
+        ]
       }
     ) })
   );
@@ -7775,9 +8074,11 @@ var DialogHeadless = React.forwardRef(
     defaultOpen = false,
     onOpenChange,
     "aria-label": ariaLabel,
+    icon,
     children,
     className,
-    scrimClassName,
+    wrapperClassName,
+    getScrimClassName,
     getAnimationClassName
   }, _ref) {
     const state = reactStately.useOverlayTriggerState({
@@ -7811,7 +8112,7 @@ var DialogHeadless = React.forwardRef(
             closedRef.current = true;
             setAnimationState("exited");
           }
-        }, 150);
+        }, 250);
       }
     }, [isOpen, animationState]);
     React.useEffect(
@@ -7822,16 +8123,20 @@ var DialogHeadless = React.forwardRef(
       },
       []
     );
-    const handleTransitionEnd = React.useCallback(() => {
-      if (animationState === "exiting" && !closedRef.current) {
-        if (exitFallbackRef.current !== null) {
-          clearTimeout(exitFallbackRef.current);
-          exitFallbackRef.current = null;
+    const handleAnimationEnd = React.useCallback(
+      (e) => {
+        if (e.target !== e.currentTarget) return;
+        if (animationState === "exiting" && !closedRef.current) {
+          if (exitFallbackRef.current !== null) {
+            clearTimeout(exitFallbackRef.current);
+            exitFallbackRef.current = null;
+          }
+          closedRef.current = true;
+          setAnimationState("exited");
         }
-        closedRef.current = true;
-        setAnimationState("exited");
-      }
-    }, [animationState]);
+      },
+      [animationState]
+    );
     const baseId = React.useId();
     const headlineId = `${baseId}-dialog-headline`;
     const contentId = `${baseId}-dialog-content`;
@@ -7846,6 +8151,8 @@ var DialogHeadless = React.forwardRef(
         close();
       }
     }, [variant, close]);
+    const resolvedWrapperClass = wrapperClassName ?? (variant === "basic" ? "fixed inset-0 z-50 flex items-center justify-center px-4" : "fixed inset-0 z-50");
+    const resolvedScrimClass = getScrimClassName?.(animationState) ?? "fixed inset-0 z-40 bg-scrim/32";
     if (!isOpen && animationState === "exited") {
       return null;
     }
@@ -7854,7 +8161,7 @@ var DialogHeadless = React.forwardRef(
         "div",
         {
           "data-testid": "dialog-scrim",
-          className: scrimClassName,
+          className: resolvedScrimClass,
           onClick: handleScrimClick,
           "aria-hidden": "true"
         }
@@ -7866,13 +8173,14 @@ var DialogHeadless = React.forwardRef(
           headlineId,
           contentId,
           onClose: close,
-          onTransitionEnd: handleTransitionEnd,
+          onAnimationEnd: handleAnimationEnd,
           variant,
           isDismissable: variant === "basic",
-          wrapperClassName: variant === "basic" ? "fixed inset-0 z-50 flex items-center justify-center px-4" : "fixed inset-0 z-50",
+          wrapperClassName: resolvedWrapperClass,
           className,
           animationState,
           getAnimationClassName,
+          icon,
           children
         }
       ) })
@@ -7882,16 +8190,28 @@ var DialogHeadless = React.forwardRef(
   }
 );
 DialogHeadless.displayName = "DialogHeadless";
-var dialogScrimVariants = classVarianceAuthority.cva([
-  "fixed",
-  "inset-0",
-  "z-40",
-  "bg-scrim",
-  "opacity-32",
-  "transition-opacity",
-  "duration-medium2",
-  "ease-standard"
-]);
+var dialogScrimVariants = classVarianceAuthority.cva(
+  [
+    "fixed",
+    "inset-0",
+    "z-40",
+    // MD3 scrim: bg-scrim at 32% opacity — always set so instant-show works in reduced-motion
+    "bg-scrim/32"
+  ],
+  {
+    variants: {
+      animationState: {
+        entering: ["opacity-0"],
+        visible: ["animate-md-fade-in"],
+        exiting: ["animate-md-fade-out"],
+        exited: ["opacity-0", "pointer-events-none"]
+      }
+    },
+    defaultVariants: {
+      animationState: "entering"
+    }
+  }
+);
 var dialogPanelVariants = classVarianceAuthority.cva(
   [
     // Stacking above scrim
@@ -7901,9 +8221,10 @@ var dialogPanelVariants = classVarianceAuthority.cva(
     // Flex column layout for slots
     "flex",
     "flex-col",
-    // Transition for animation state changes
-    "transition-[opacity,transform]",
-    "will-change-[opacity,transform]"
+    // Compositor hint for keyframe animation
+    "will-change-[opacity,transform]",
+    // group scope — lets child slots consume data-with-icon via group-data-[with-icon]/dialog:
+    "group/dialog"
   ],
   {
     variants: {
@@ -7917,11 +8238,11 @@ var dialogPanelVariants = classVarianceAuthority.cva(
           "min-w-70",
           "max-w-dialog-max",
           "w-full",
-          // Internal spacing
+          // Internal spacing: 24dp padding, headline mb-4, content mb-6, actions pt-3
           "pt-6",
           "pb-3",
           "px-6",
-          // Positioned in viewport center
+          // Positioning (centering wrapper handles the viewport centering)
           "relative"
         ],
         fullscreen: [
@@ -7932,7 +8253,6 @@ var dialogPanelVariants = classVarianceAuthority.cva(
           "rounded-none",
           // No elevation shadow on fullscreen
           "shadow-none",
-          // Positioned to fill portal
           "relative"
         ]
       }
@@ -7942,7 +8262,7 @@ var dialogPanelVariants = classVarianceAuthority.cva(
     }
   }
 );
-classVarianceAuthority.cva([], {
+var dialogWrapperVariants = classVarianceAuthority.cva([], {
   variants: {
     variant: {
       basic: ["fixed", "inset-0", "z-50", "flex", "items-center", "justify-center", "px-4"],
@@ -7956,9 +8276,13 @@ classVarianceAuthority.cva([], {
 var dialogAnimationVariants = classVarianceAuthority.cva("", {
   variants: {
     animationState: {
+      // initial mount frame before the animation starts — rendered invisible
       entering: [],
+      // entry animation active
       visible: [],
+      // exit animation active
       exiting: [],
+      // fully dismissed; portal gate will remove the element
       exited: []
     },
     variant: {
@@ -7967,53 +8291,55 @@ var dialogAnimationVariants = classVarianceAuthority.cva("", {
     }
   },
   compoundVariants: [
-    // Basic: entering — start scaled down + transparent
+    // ── Basic ────────────────────────────────────────────────────────────────
+    // entering: start invisible (animate-md-scale-in keyframe starts from scale(0.85)/opacity:0)
     {
       animationState: "entering",
       variant: "basic",
-      className: ["scale-90", "opacity-0"]
+      className: ["opacity-0"]
     },
-    // Basic: visible — scale to full + fade in
+    // visible: composite scale-in keyframe (expressive-fast-spatial 350ms)
     {
       animationState: "visible",
       variant: "basic",
-      className: ["scale-100", "opacity-100", "duration-medium4", "ease-emphasized-decelerate"]
+      className: ["animate-md-scale-in"]
     },
-    // Basic: exiting — fade out (scale stays at 1)
+    // exiting: composite scale-out keyframe (emphasized-accelerate 200ms)
     {
       animationState: "exiting",
       variant: "basic",
-      className: ["scale-100", "opacity-0", "duration-short2", "ease-emphasized-accelerate"]
+      className: ["animate-md-scale-out"]
     },
-    // Basic: exited — fully transparent
+    // exited: keep hidden until portal gate removes it
     {
       animationState: "exited",
       variant: "basic",
-      className: ["scale-100", "opacity-0"]
+      className: ["opacity-0", "pointer-events-none"]
     },
-    // Fullscreen: entering — start below viewport + transparent
+    // ── Fullscreen ───────────────────────────────────────────────────────────
+    // entering: start off-screen below (slide-in-bottom starts from translateY(100%)/opacity:0)
     {
       animationState: "entering",
       variant: "fullscreen",
-      className: ["translate-y-full", "opacity-0"]
+      className: ["opacity-0"]
     },
-    // Fullscreen: visible — slide up + fade in
+    // visible: composite slide-in-bottom keyframe (standard-default-spatial 500ms)
     {
       animationState: "visible",
       variant: "fullscreen",
-      className: ["translate-y-0", "opacity-100", "duration-medium4", "ease-emphasized-decelerate"]
+      className: ["animate-md-slide-in-bottom"]
     },
-    // Fullscreen: exiting — slide down + fade out
+    // exiting: composite slide-out-bottom keyframe (emphasized-accelerate 200ms)
     {
       animationState: "exiting",
       variant: "fullscreen",
-      className: ["translate-y-full", "opacity-0", "duration-short2", "ease-emphasized-accelerate"]
+      className: ["animate-md-slide-out-bottom"]
     },
-    // Fullscreen: exited — fully off-screen
+    // exited: keep hidden until portal gate removes it
     {
       animationState: "exited",
       variant: "fullscreen",
-      className: ["translate-y-full", "opacity-0"]
+      className: ["opacity-0", "pointer-events-none"]
     }
   ],
   defaultVariants: {
@@ -8021,10 +8347,26 @@ var dialogAnimationVariants = classVarianceAuthority.cva("", {
     variant: "basic"
   }
 });
+classVarianceAuthority.cva([
+  // Center the icon in the panel
+  "flex",
+  "items-center",
+  "justify-center",
+  // Bottom margin separating icon from headline
+  "mb-4",
+  // MD3 spec: icon color = secondary
+  "text-secondary",
+  // 24dp icon size (children — typically an SVG — should be 24×24)
+  "size-6"
+]);
 var dialogHeadlineVariants = classVarianceAuthority.cva(["text-headline-small", "text-on-surface"], {
   variants: {
     variant: {
-      basic: ["mb-4"],
+      basic: [
+        "mb-4",
+        // Center headline text when hero icon is present
+        "group-data-[with-icon]/dialog:text-center"
+      ],
       fullscreen: [
         // Top app bar row in fullscreen: flex, items-center, gap
         "flex",
@@ -8049,7 +8391,19 @@ var dialogHeadlineTitleVariants = classVarianceAuthority.cva([
   "truncate"
 ]);
 var dialogContentVariants = classVarianceAuthority.cva(
-  ["text-body-medium", "text-on-surface-variant", "overflow-y-auto", "flex-1"],
+  [
+    "text-body-medium",
+    "text-on-surface-variant",
+    "overflow-y-auto",
+    "flex-1",
+    // Center supporting text when hero icon is present
+    "group-data-[with-icon]/dialog:text-center",
+    // Scroll dividers — activated by DialogContent's scroll handler
+    "data-[scroll-divider-top]:border-t",
+    "data-[scroll-divider-top]:border-outline-variant",
+    "data-[scroll-divider-bottom]:border-b",
+    "data-[scroll-divider-bottom]:border-outline-variant"
+  ],
   {
     variants: {
       variant: {
@@ -8076,11 +8430,31 @@ var Dialog = React.forwardRef(function Dialog2({
   defaultOpen = false,
   onOpenChange,
   "aria-label": ariaLabel,
+  icon,
   children,
   className
 }, _ref) {
-  const panelClassName = cn(dialogPanelVariants({ variant }), className);
-  const scrimClass = dialogScrimVariants();
+  const reducedMotion = useReducedMotion();
+  const panelClassName = cn(
+    dialogPanelVariants({ variant }),
+    reducedMotion && "transition-none",
+    className
+  );
+  const wrapperClassName = dialogWrapperVariants({ variant });
+  const getScrimClassName = React.useCallback(
+    (state) => {
+      if (reducedMotion) return "fixed inset-0 z-40 bg-scrim/32";
+      return dialogScrimVariants({ animationState: state });
+    },
+    [reducedMotion]
+  );
+  const getAnimationClassName = React.useCallback(
+    (state) => {
+      if (reducedMotion) return "";
+      return dialogAnimationVariants({ animationState: state, variant });
+    },
+    [reducedMotion, variant]
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogHeadless,
     {
@@ -8089,9 +8463,11 @@ var Dialog = React.forwardRef(function Dialog2({
       ...defaultOpen !== void 0 ? { defaultOpen } : {},
       ...onOpenChange !== void 0 ? { onOpenChange } : {},
       ...ariaLabel ? { "aria-label": ariaLabel } : {},
+      ...icon !== void 0 ? { icon } : {},
       className: panelClassName,
-      scrimClassName: scrimClass,
-      getAnimationClassName: (state) => dialogAnimationVariants({ animationState: state, variant }),
+      wrapperClassName,
+      getScrimClassName,
+      getAnimationClassName,
       children
     }
   );
@@ -8102,7 +8478,7 @@ var DialogHeadline = React.forwardRef(
     const { headlineId, variant } = useDialogContext();
     if (variant === "fullscreen") {
       return (
-        // Top app bar row for fullscreen variant
+        // Top app bar row for fullscreen variant — always has border-b border-outline-variant
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(dialogHeadlineVariants({ variant: "fullscreen" }), className), children: [
           closeButton,
           /* @__PURE__ */ jsxRuntime.jsx("h2", { id: headlineId, className: dialogHeadlineTitleVariants(), children }),
@@ -8110,21 +8486,72 @@ var DialogHeadline = React.forwardRef(
         ] })
       );
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "h2",
-      {
-        ref,
-        id: headlineId,
-        className: cn(dialogHeadlineVariants({ variant: "basic" }), className),
-        children
-      }
+    return (
+      // Basic variant: text-headline-small, text-on-surface, mb-4
+      // group-data-[with-icon]/dialog:text-center is applied via the CVA base classes
+      // when the parent panel root has data-with-icon set by DialogHeadless.
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "h2",
+        {
+          ref,
+          id: headlineId,
+          className: cn(dialogHeadlineVariants({ variant: "basic" }), className),
+          children
+        }
+      )
     );
   }
 );
 DialogHeadline.displayName = "DialogHeadline";
-var DialogContent = React.forwardRef(function DialogContent2({ children, className }, ref) {
+var DialogContent = React.forwardRef(function DialogContent2({ children, className }, forwardedRef) {
   const { contentId, variant } = useDialogContext();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, id: contentId, className: cn(dialogContentVariants({ variant }), className), children });
+  const internalRef = React.useRef(null);
+  const setRef = React.useCallback(
+    (node) => {
+      internalRef.current = node;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else if (forwardedRef !== null && forwardedRef !== void 0) {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef]
+  );
+  const updateDividers = React.useCallback(() => {
+    const el = internalRef.current;
+    if (!el) return;
+    const isScrollable = el.scrollHeight > el.clientHeight;
+    if (!isScrollable) {
+      el.removeAttribute("data-scroll-divider-top");
+      el.removeAttribute("data-scroll-divider-bottom");
+      return;
+    }
+    const scrolledFromTop = el.scrollTop > 1;
+    const scrolledToBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1;
+    if (scrolledFromTop) {
+      el.setAttribute("data-scroll-divider-top", "");
+    } else {
+      el.removeAttribute("data-scroll-divider-top");
+    }
+    if (!scrolledToBottom) {
+      el.setAttribute("data-scroll-divider-bottom", "");
+    } else {
+      el.removeAttribute("data-scroll-divider-bottom");
+    }
+  }, []);
+  React.useEffect(() => {
+    const el = internalRef.current;
+    if (!el) return;
+    updateDividers();
+    el.addEventListener("scroll", updateDividers, { passive: true });
+    const observer = new ResizeObserver(updateDividers);
+    observer.observe(el);
+    return () => {
+      el.removeEventListener("scroll", updateDividers);
+      observer.disconnect();
+    };
+  }, [updateDividers]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setRef, id: contentId, className: cn(dialogContentVariants({ variant }), className), children });
 });
 DialogContent.displayName = "DialogContent";
 var DialogActions = React.forwardRef(function DialogActions2({ children, className }, ref) {