@m3-baseui/react-tailwind 1.4.0 → 2.0.0

package/dist/index.js

@@ -3,7 +3,7 @@ import { createButton, createIconButton, createSwitch, createCheckbox, createRad
 export { ITEM_LEADING_VARIANTS, LIST_LEADING_VARIANTS, Ripple, ThemeProvider, applyScheme, generateScheme, schemeToCssText, useSnackbar, useTheme } from '@m3-baseui/core';
 import { tv } from 'tailwind-variants';
 
-// src/button.ts
+// src/components/button/button.ts
 var button = tv({
   base: [
     "relative inline-flex items-center justify-center gap-2",
@@ -465,7 +465,7 @@ var tv7 = (options, config) => tv(options, {
   }
 });
 
-// src/tooltip.ts
+// src/components/tooltip/tooltip.ts
 var transition = [
   "origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard",
   "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
@@ -573,16 +573,102 @@ var Dialog = createDialog({
   actions: d.actions(),
   close: d.close()
 });
+
+// src/components/menu/menu-selectable-item.ts
+var menuSelectableItemStateLayer = [
+  "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
+  "hover:before:opacity-[var(--md-sys-state-hover)]",
+  "data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]",
+  "active:before:opacity-[var(--md-sys-state-pressed)]"
+];
+var menuSelectableItemSelectedFill = [
+  "data-[selected]:bg-secondary-container data-[selected]:text-on-secondary-container",
+  "data-[checked]:bg-secondary-container data-[checked]:text-on-secondary-container"
+];
+var menuSelectableItemPositionShape = [
+  "data-[selected]:data-[position=only]:rounded-extra-small",
+  "data-[selected]:data-[position=first]:rounded-t-extra-small",
+  "data-[selected]:data-[position=middle]:rounded-none",
+  "data-[selected]:data-[position=last]:rounded-b-extra-small",
+  "data-[checked]:data-[position=only]:rounded-extra-small",
+  "data-[checked]:data-[position=first]:rounded-t-extra-small",
+  "data-[checked]:data-[position=middle]:rounded-none",
+  "data-[checked]:data-[position=last]:rounded-b-extra-small"
+];
+var menuSelectableItemPositionShapeFallback = [
+  "data-[selected]:not([data-position]):rounded-extra-small",
+  "data-[checked]:not([data-position]):rounded-extra-small"
+];
+var menuSelectableItemDisabled = [
+  "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none",
+  "data-[disabled]:data-[selected]:bg-transparent data-[disabled]:data-[selected]:text-on-surface/[0.38]",
+  "data-[disabled]:data-[checked]:bg-transparent data-[disabled]:data-[checked]:text-on-surface/[0.38]"
+];
+var menuSelectableItemBase = [
+  "group relative cursor-pointer select-none outline-none text-label-large text-on-surface",
+  "h-12 px-3 overflow-hidden",
+  ...menuSelectableItemStateLayer,
+  ...menuSelectableItemSelectedFill,
+  ...menuSelectableItemPositionShape,
+  ...menuSelectableItemPositionShapeFallback,
+  ...menuSelectableItemDisabled
+];
+var menuSelectableItemTv = tv7({
+  slots: {
+    /** Select row: check + label + optional trailing meta. */
+    selectItem: ["grid grid-cols-[24px_1fr_auto] items-center gap-3", ...menuSelectableItemBase],
+    /** Menu checkbox / radio row: check + label. */
+    menuSelectableItem: ["grid grid-cols-[24px_1fr] items-center gap-3", ...menuSelectableItemBase],
+    itemIndicator: [
+      "inline-flex items-center justify-center text-on-surface",
+      "invisible group-data-[selected]:visible group-data-[checked]:visible",
+      "group-data-[selected]:text-on-secondary-container group-data-[checked]:text-on-secondary-container",
+      "group-data-[disabled]:text-on-surface/[0.38]"
+    ]
+  }
+});
+var menuSelectableItem = menuSelectableItemTv();
+
+// src/components/menu/menu-surface.ts
+var menuSurfaceBase = [
+  "py-2",
+  "bg-surface-container text-on-surface rounded-extra-small shadow-level2",
+  "origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard",
+  "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
+  "data-[ending-style]:opacity-0",
+  "focus:outline-none"
+];
+var menuSurfaceTv = tv7({
+  slots: {
+    popup: ["max-w-[280px]", ...menuSurfaceBase],
+    groupLabel: "px-3 py-2 text-label-small text-on-surface-variant"
+  },
+  variants: {
+    width: {
+      /** Standalone Menu: 112–280dp. */
+      standard: { popup: "min-w-[112px]" },
+      /** Exposed Dropdown / Select: at least anchor width, capped at 280dp. */
+      anchor: { popup: "min-w-[max(112px,var(--anchor-width))]" }
+    },
+    scroll: {
+      none: {},
+      /** Select popup: clamp height and scroll the list. */
+      auto: { popup: "max-h-[var(--available-height)] overflow-auto" }
+    }
+  },
+  defaultVariants: {
+    width: "standard",
+    scroll: "none"
+  }
+});
+menuSurfaceTv();
+
+// src/components/menu/menu.ts
+var surface = menuSurfaceTv({ width: "standard", scroll: "none" });
+var selectable = menuSelectableItem;
 var menuTv = tv7({
   slots: {
-    popup: [
-      "min-w-[112px] max-w-[280px] py-2",
-      "bg-surface-container text-on-surface rounded-extra-small shadow-level2",
-      "origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard",
-      "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
-      "data-[ending-style]:opacity-0",
-      "focus:outline-none"
-    ],
+    popup: surface.popup(),
     item: [
       "relative flex items-center gap-3 h-12 px-3 overflow-hidden cursor-pointer select-none outline-none",
       "text-label-large text-on-surface",
@@ -599,7 +685,7 @@ var menuTv = tv7({
       "[&_[data-slot=menu-trailing]]:ml-auto [&_[data-slot=menu-trailing]]:pl-4 [&_[data-slot=menu-trailing]]:text-label-large [&_[data-slot=menu-trailing]]:text-on-surface-variant"
     ],
     separator: ["my-2 h-px border-0 bg-outline-variant"],
-    groupLabel: ["px-3 py-2 text-label-small text-on-surface-variant"],
+    groupLabel: surface.groupLabel(),
     // Submenu trigger: item look + trailing chevron, highlighted while open.
     submenuTrigger: [
       "relative flex items-center justify-between gap-3 h-12 px-3 overflow-hidden cursor-pointer select-none outline-none",
@@ -614,28 +700,9 @@ var menuTv = tv7({
       "data-[disabled]:[&_[data-slot=menu-leading]]:text-on-surface/[0.38]",
       "[&_[data-slot=menu-leading]]:inline-flex [&_[data-slot=menu-leading]]:text-on-surface-variant [&_[data-slot=menu-leading]>svg]:size-6"
     ],
-    // Selectable items: 24dp leading indicator column + label.
-    checkboxItem: [
-      "group relative grid grid-cols-[24px_1fr] items-center gap-3 h-12 px-3 overflow-hidden",
-      "cursor-pointer select-none outline-none text-label-large text-on-surface",
-      "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
-      "hover:before:opacity-[var(--md-sys-state-hover)]",
-      "data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]",
-      "active:before:opacity-[var(--md-sys-state-pressed)]",
-      // M3 disabled (per-token): label on-surface/0.38, no state layer.
-      "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none"
-    ],
-    radioItem: [
-      "group relative grid grid-cols-[24px_1fr] items-center gap-3 h-12 px-3 overflow-hidden",
-      "cursor-pointer select-none outline-none text-label-large text-on-surface",
-      "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
-      "hover:before:opacity-[var(--md-sys-state-hover)]",
-      "data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]",
-      "active:before:opacity-[var(--md-sys-state-pressed)]",
-      // M3 disabled (per-token): label on-surface/0.38, no state layer.
-      "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none"
-    ],
-    itemIndicator: "inline-flex items-center justify-center text-on-surface invisible group-data-[checked]:visible group-data-[disabled]:text-on-surface/[0.38]"
+    checkboxItem: selectable.menuSelectableItem(),
+    radioItem: selectable.menuSelectableItem(),
+    itemIndicator: selectable.itemIndicator()
   }
 });
 var m = menuTv();
@@ -754,6 +821,8 @@ var Slider = createSlider({
   tick: s2.tick(),
   valueLabel: s2.valueLabel()
 });
+var surface2 = menuSurfaceTv({ width: "anchor", scroll: "auto" });
+var selectable2 = menuSelectableItem;
 var selectTv = tv7({
   slots: {
     trigger: [
@@ -768,30 +837,16 @@ var selectTv = tv7({
     ],
     value: "flex-1 truncate",
     icon: "flex text-on-surface-variant transition-transform duration-150 group-data-[popup-open]:rotate-180 group-data-[disabled]:text-on-surface/[0.38]",
-    popup: [
-      "min-w-[var(--anchor-width)] max-h-[var(--available-height)] py-2 overflow-auto",
-      "bg-surface-container text-on-surface rounded-extra-small shadow-level2",
-      "origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard",
-      "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
-      "data-[ending-style]:opacity-0",
-      "focus:outline-none"
-    ],
+    popup: surface2.popup(),
     item: [
-      "group relative grid grid-cols-[24px_1fr_auto] items-center gap-2 h-12 px-3 overflow-hidden",
-      "cursor-pointer select-none outline-none text-body-large text-on-surface",
-      "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
-      "hover:before:opacity-[var(--md-sys-state-hover)]",
-      "data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]",
-      "active:before:opacity-[var(--md-sys-state-pressed)]",
-      // M3 disabled (per-token, not a blanket fade): label + trailing supporting
-      // text on-surface/0.38, no state layer.
-      "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none",
-      "data-[disabled]:[&_[data-slot=select-trailing]]:text-on-surface/[0.38]",
+      selectable2.selectItem(),
       // M3 trailing supporting text (e.g. meta) sits in the last column.
-      "[&_[data-slot=select-trailing]]:pl-4 [&_[data-slot=select-trailing]]:text-label-large [&_[data-slot=select-trailing]]:text-on-surface-variant"
+      "[&_[data-slot=select-trailing]]:pl-4 [&_[data-slot=select-trailing]]:text-label-large [&_[data-slot=select-trailing]]:text-on-surface-variant",
+      "data-[selected]:[&_[data-slot=select-trailing]]:text-on-secondary-container",
+      "data-[disabled]:[&_[data-slot=select-trailing]]:text-on-surface/[0.38]"
     ],
-    itemIndicator: "inline-flex items-center justify-center text-primary invisible group-data-[selected]:visible group-data-[disabled]:text-on-surface/[0.38]",
-    groupLabel: "px-3 py-2 text-label-small text-on-surface-variant",
+    itemIndicator: selectable2.itemIndicator(),
+    groupLabel: surface2.groupLabel(),
     // Sticky scroll affordances at the popup edges; surface-tinted with a chevron.
     scrollUpArrow: [
       "sticky top-0 z-[1] flex items-center justify-center h-6 cursor-default",
@@ -803,27 +858,123 @@ var selectTv = tv7({
     ]
   }
 });
-var s3 = selectTv();
-var Select = createSelect({
-  trigger: s3.trigger(),
-  value: s3.value(),
-  icon: s3.icon(),
-  popup: s3.popup(),
-  item: s3.item(),
-  itemIndicator: s3.itemIndicator(),
-  groupLabel: s3.groupLabel(),
-  scrollUpArrow: s3.scrollUpArrow(),
-  scrollDownArrow: s3.scrollDownArrow()
+var selectFieldTv = tv7({
+  slots: {
+    // The `group` hook lives here (not in engine-neutral core): supporting text
+    // keys its error color off Field.Root's `group-data-[invalid]`.
+    root: "group flex flex-col gap-1 min-w-[210px]",
+    field: [
+      "group/field relative flex items-stretch gap-3 h-14 px-4 box-border w-full",
+      "text-on-surface text-body-large cursor-pointer text-left outline-none",
+      "transition-[border-color,padding] duration-150 ease-standard",
+      "data-[disabled]:opacity-[0.38] data-[disabled]:pointer-events-none"
+    ],
+    inputWrap: "relative z-0 flex-1 flex items-center min-w-0 overflow-visible",
+    value: "flex-1 truncate text-body-large text-on-surface",
+    label: [
+      "absolute left-0 pointer-events-none origin-left",
+      "top-1/2 -translate-y-1/2 text-body-large text-on-surface-variant",
+      "transition-all duration-150 ease-standard",
+      "group-data-[focused]/field:text-primary group-data-[invalid]/field:text-error"
+    ],
+    icon: [
+      // Disabled dimming comes from the field's own opacity (0.38); no per-icon
+      // color override here, else it would compound to ~0.14.
+      "flex items-center text-on-surface-variant transition-transform duration-150 [&>svg]:size-6",
+      "group-data-[popup-open]/field:rotate-180"
+    ],
+    leadingIcon: "inline-flex items-center justify-center shrink-0 text-on-surface-variant [&>svg]:size-6",
+    supporting: [
+      "flex justify-between gap-4 px-4 text-body-small text-on-surface-variant",
+      "group-data-[invalid]:text-error"
+    ],
+    supportingText: "min-w-0"
+  },
+  variants: {
+    variant: {
+      filled: {
+        field: [
+          "overflow-hidden rounded-t-extra-small bg-surface-container-highest",
+          // M3 filled hover: state layer (on-surface × state-hover).
+          "before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none",
+          "before:transition-opacity before:duration-100",
+          "hover:before:opacity-[var(--md-sys-state-hover)]",
+          "data-[disabled]:before:opacity-0",
+          // M3 filled resting active-indicator: 1dp on-surface-variant.
+          "border-b border-on-surface-variant hover:border-on-surface",
+          // M3 filled focus-active-indicator-height is 3dp.
+          "data-[focused]:border-b-[3px] data-[focused]:border-primary",
+          "data-[popup-open]:border-b-[3px] data-[popup-open]:border-primary",
+          "data-[invalid]:border-error"
+        ],
+        value: "pt-3",
+        label: [
+          "group-data-[focused]/field:top-1.5 group-data-[focused]/field:translate-y-0 group-data-[focused]/field:text-body-small",
+          "group-data-[filled]/field:top-1.5 group-data-[filled]/field:translate-y-0 group-data-[filled]/field:text-body-small",
+          "group-data-[popup-open]/field:top-1.5 group-data-[popup-open]/field:translate-y-0 group-data-[popup-open]/field:text-body-small",
+          "group-data-[has-placeholder]/field:top-1.5 group-data-[has-placeholder]/field:translate-y-0 group-data-[has-placeholder]/field:text-body-small"
+        ]
+      },
+      outlined: {
+        field: [
+          "overflow-visible rounded-extra-small border border-outline hover:border-on-surface",
+          // M3 outlined focus-outline-width is 3dp; padding drops 2px so content
+          // stays steady as the 1dp border grows (matches the TextField anchor).
+          "data-[focused]:border-[3px] data-[focused]:border-primary data-[focused]:px-[14px]",
+          "data-[popup-open]:border-[3px] data-[popup-open]:border-primary data-[popup-open]:px-[14px]",
+          "data-[invalid]:border-error"
+        ],
+        label: [
+          "group-data-[focused]/field:top-0 group-data-[focused]/field:-translate-y-1/2 group-data-[focused]/field:z-[1] group-data-[focused]/field:text-body-small group-data-[focused]/field:bg-surface group-data-[focused]/field:px-1 group-data-[focused]/field:leading-none",
+          "group-data-[filled]/field:top-0 group-data-[filled]/field:-translate-y-1/2 group-data-[filled]/field:z-[1] group-data-[filled]/field:text-body-small group-data-[filled]/field:bg-surface group-data-[filled]/field:px-1 group-data-[filled]/field:leading-none",
+          "group-data-[popup-open]/field:top-0 group-data-[popup-open]/field:-translate-y-1/2 group-data-[popup-open]/field:z-[1] group-data-[popup-open]/field:text-body-small group-data-[popup-open]/field:bg-surface group-data-[popup-open]/field:px-1 group-data-[popup-open]/field:leading-none",
+          "group-data-[has-placeholder]/field:top-0 group-data-[has-placeholder]/field:-translate-y-1/2 group-data-[has-placeholder]/field:z-[1] group-data-[has-placeholder]/field:text-body-small group-data-[has-placeholder]/field:bg-surface group-data-[has-placeholder]/field:px-1 group-data-[has-placeholder]/field:leading-none"
+        ]
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "outlined"
+  }
 });
+var s3 = selectTv();
+var Select = createSelect(
+  {
+    trigger: s3.trigger(),
+    value: s3.value(),
+    icon: s3.icon(),
+    popup: s3.popup(),
+    item: s3.item(),
+    itemIndicator: s3.itemIndicator(),
+    groupLabel: s3.groupLabel(),
+    scrollUpArrow: s3.scrollUpArrow(),
+    scrollDownArrow: s3.scrollDownArrow()
+  },
+  ({ variant }) => {
+    const f = selectFieldTv({ variant });
+    return {
+      root: f.root(),
+      field: f.field(),
+      inputWrap: f.inputWrap(),
+      value: f.value(),
+      label: f.label(),
+      icon: f.icon(),
+      leadingIcon: f.leadingIcon(),
+      supporting: f.supporting(),
+      supportingText: f.supportingText()
+    };
+  }
+);
+var iconVisual = "inline-flex items-center justify-center shrink-0 text-on-surface-variant [&>svg]:size-6";
 var textFieldTv = tv({
   slots: {
     root: "flex flex-col gap-1 min-w-[210px]",
     field: [
-      "relative flex items-stretch gap-3 h-14 px-4 box-border",
+      "relative flex items-stretch gap-3 h-14 px-4 box-border text-on-surface",
       "transition-[border-color,padding] duration-150 ease-standard",
       "group-data-[disabled]:opacity-[0.38] group-data-[disabled]:pointer-events-none"
     ],
-    inputWrap: "relative flex-1 flex items-center min-w-0",
+    inputWrap: "relative z-0 flex-1 flex items-center min-w-0 overflow-visible",
     input: [
       "peer w-full bg-transparent outline-none border-0 p-0 text-body-large text-on-surface",
       "placeholder:text-on-surface-variant"
@@ -834,8 +985,18 @@ var textFieldTv = tv({
       "transition-all duration-150 ease-standard",
       "group-data-[focused]:text-primary group-data-[invalid]:text-error"
     ],
-    leadingIcon: "flex items-center shrink-0 text-on-surface-variant",
-    trailingIcon: "flex items-center shrink-0 text-on-surface-variant",
+    leadingIcon: iconVisual,
+    trailingIcon: iconVisual,
+    leadingIconButton: [
+      iconVisual,
+      "relative size-12 p-0 border-0 bg-transparent cursor-pointer",
+      "group-data-[disabled]:pointer-events-none"
+    ],
+    trailingIconButton: [
+      iconVisual,
+      "relative size-12 p-0 border-0 bg-transparent cursor-pointer",
+      "group-data-[disabled]:pointer-events-none"
+    ],
     supporting: [
       "flex justify-between gap-4 px-4 text-body-small text-on-surface-variant",
       "group-data-[invalid]:text-error"
@@ -847,9 +1008,15 @@ var textFieldTv = tv({
     variant: {
       filled: {
         field: [
-          "rounded-t-extra-small bg-surface-container-highest",
-          "border-b-2 border-outline",
-          // M3 filled focus-active-indicator-height is 3dp (resting/error stay 2dp).
+          "overflow-hidden rounded-t-extra-small bg-surface-container-highest",
+          // M3 filled hover: state layer (on-surface × state-hover) + indicator color.
+          "before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none",
+          "before:transition-opacity before:duration-100",
+          "hover:before:opacity-[var(--md-sys-state-hover)]",
+          "group-data-[disabled]:before:opacity-0",
+          // M3 filled resting active-indicator: 1dp on-surface-variant.
+          "border-b border-on-surface-variant hover:border-on-surface",
+          // M3 filled focus-active-indicator-height is 3dp.
           "group-data-[focused]:border-b-[3px] group-data-[focused]:border-primary group-data-[invalid]:border-error"
         ],
         input: "pt-3",
@@ -860,15 +1027,18 @@ var textFieldTv = tv({
       },
       outlined: {
         field: [
-          "rounded-extra-small border border-outline",
+          // Outlined hover = outline color only (no container state layer per M3).
+          "overflow-visible rounded-extra-small border border-outline hover:border-on-surface",
           // M3 outlined focus-outline-width is 3dp (matches Select's trigger);
           // padding drops 2px so content stays steady as the 1dp border grows.
           "group-data-[focused]:border-[3px] group-data-[focused]:border-primary group-data-[focused]:px-[14px]",
           "group-data-[invalid]:border-error"
         ],
         label: [
-          "group-data-[focused]:top-0 group-data-[focused]:-translate-y-1/2 group-data-[focused]:text-body-small group-data-[focused]:bg-surface group-data-[focused]:px-1",
-          "group-data-[filled]:top-0 group-data-[filled]:-translate-y-1/2 group-data-[filled]:text-body-small group-data-[filled]:bg-surface group-data-[filled]:px-1"
+          "group-data-[focused]:top-0 group-data-[focused]:-translate-y-1/2 group-data-[focused]:z-[1]",
+          "group-data-[focused]:text-body-small group-data-[focused]:bg-surface group-data-[focused]:px-1 group-data-[focused]:leading-none",
+          "group-data-[filled]:top-0 group-data-[filled]:-translate-y-1/2 group-data-[filled]:z-[1]",
+          "group-data-[filled]:text-body-small group-data-[filled]:bg-surface group-data-[filled]:px-1 group-data-[filled]:leading-none"
         ]
       }
     }
@@ -887,6 +1057,8 @@ var TextField = createTextField(({ variant }) => {
     label: c3.label(),
     leadingIcon: c3.leadingIcon(),
     trailingIcon: c3.trailingIcon(),
+    leadingIconButton: c3.leadingIconButton(),
+    trailingIconButton: c3.trailingIconButton(),
     supporting: c3.supporting(),
     supportingText: c3.supportingText(),
     counter: c3.counter()
@@ -966,36 +1138,68 @@ var fabTv = tv({
     "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
   ],
   variants: {
-    size: {
-      small: "size-10 rounded-medium [&_svg]:size-6",
-      regular: "size-14 rounded-large [&_svg]:size-6",
-      large: "size-24 rounded-extra-large [&_svg]:size-9",
-      extended: "h-14 min-w-20 px-4 gap-3 rounded-large text-label-large [&_svg]:size-6"
-    },
+    // Geometry is set by compoundVariants (size × variant); these keys exist so
+    // the resolver can accept them.
+    size: { small: "", medium: "", large: "" },
+    variant: { standard: "", extended: "" },
     color: {
-      surface: "bg-surface-container-high text-primary",
       primary: "bg-primary-container text-on-primary-container",
       secondary: "bg-secondary-container text-on-secondary-container",
       tertiary: "bg-tertiary-container text-on-tertiary-container"
     }
   },
+  compoundVariants: [
+    // ---- Standard (icon-only square): container / corner / icon ----
+    { size: "small", variant: "standard", class: "size-14 rounded-large [&_svg]:size-6" },
+    // 56 / 16 / 24
+    {
+      size: "medium",
+      variant: "standard",
+      class: "size-20 rounded-large-increased [&_svg]:size-7"
+      // 80 / 20 / 28
+    },
+    { size: "large", variant: "standard", class: "size-24 rounded-extra-large [&_svg]:size-8" },
+    // 96 / 28 / 32
+    // ---- Extended (icon + label pill): height / corner / icon / padding / gap / label ----
+    // `min-w-*` keeps the pill affordance for short / text-only labels (wider
+    // than tall), matching the pre-Expressive extended FAB which guarded this.
+    {
+      size: "small",
+      variant: "extended",
+      class: "h-14 min-w-20 px-4 gap-2 rounded-large text-title-medium [&_svg]:size-6"
+      // 56 / 16 / 24 / 16 / 8
+    },
+    {
+      size: "medium",
+      variant: "extended",
+      class: "h-20 min-w-28 px-[26px] gap-4 rounded-large-increased text-title-large [&_svg]:size-7"
+      // 80 / 20 / 28 / 26 / 16
+    },
+    {
+      size: "large",
+      variant: "extended",
+      class: "h-24 min-w-32 px-7 gap-5 rounded-extra-large text-headline-small [&_svg]:size-8"
+      // 96 / 28 / 32 / 28 / 20
+    }
+  ],
   defaultVariants: {
-    size: "regular",
-    color: "surface"
+    size: "small",
+    variant: "standard",
+    color: "primary"
   }
 });
-var Fab = createFab(({ size, color }) => fabTv({ size, color }));
+var Fab = createFab(({ size, color, variant }) => fabTv({ size, color, variant }));
 var fabMenuTv = tv7({
   slots: {
     popup: [
-      "flex flex-col items-end gap-2 bg-transparent outline-none",
+      "flex flex-col items-end gap-1 bg-transparent outline-none",
       "origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard",
       "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
       "data-[ending-style]:opacity-0"
     ],
     item: [
-      "relative inline-flex items-center gap-3 h-14 px-4 overflow-hidden box-border",
-      "cursor-pointer select-none outline-none rounded-full text-label-large",
+      "relative inline-flex items-center gap-2 h-14 px-6 overflow-hidden box-border",
+      "cursor-pointer select-none outline-none rounded-full text-title-medium",
       "shadow-level3 hover:shadow-level4 transition-shadow duration-150 ease-standard",
       "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
       "hover:before:opacity-[var(--md-sys-state-hover)]",
@@ -1011,7 +1215,6 @@ var fabMenuTv = tv7({
   },
   variants: {
     color: {
-      surface: { item: "bg-surface-container-high text-primary" },
       primary: { item: "bg-primary-container text-on-primary-container" },
       secondary: { item: "bg-secondary-container text-on-secondary-container" },
       tertiary: { item: "bg-tertiary-container text-on-tertiary-container" }
@@ -1053,13 +1256,16 @@ var dividerTv = tv({
 var Divider = createDivider(({ inset, orientation }) => dividerTv({ inset, orientation }));
 var linearTv = tv({
   slots: {
-    // The track-stop dot (4dp, primary) sits at the inline-end via `after:`. It's
-    // a determinate-only M3 concept, so it's hidden while indeterminate. Logical
-    // `end-0` mirrors with the indicator under `dir="rtl"`.
+    // The track-stop dot (primary, full track height) sits at the inline-end via
+    // `after:`. It's a determinate-only M3 concept, so it's hidden while
+    // indeterminate. Logical `end-0` mirrors with the indicator under `dir="rtl"`.
+    // Height comes from the factory (inline) so `thickness` is honored.
     root: [
-      "group relative block w-full h-1 overflow-hidden rounded-full",
+      "group relative block w-full overflow-hidden rounded-full",
+      // The dot is `--m3-thickness` tall (stroke height) and centered, so it stays
+      // correct when the wavy track grows taller than the stroke.
       "after:content-[''] after:absolute after:end-0 after:top-1/2 after:-translate-y-1/2",
-      "after:size-1 after:rounded-full after:bg-primary",
+      "after:h-[var(--m3-thickness,100%)] after:aspect-square after:rounded-full after:bg-primary",
       // Self variant (not `group-data-*`): the dot is on the root element itself,
       // which carries `data-indeterminate` — it isn't a descendant of `.group`.
       "data-[indeterminate]:after:hidden"
@@ -1068,40 +1274,76 @@ var linearTv = tv({
     // 4dp gap separates it from the active indicator (`--m3-progress` + 4px). The
     // gap uses logical inline insets so it tracks the indicator (which Base UI
     // anchors at inline-start) under `dir="rtl"`. Indeterminate has no fraction,
-    // so the inactive track spans the full width.
+    // so the inactive track spans the full width. The flat track stays
+    // `--m3-thickness` tall and centered even when the wavy root is taller.
     track: [
       "absolute inset-0",
-      "before:content-[''] before:absolute before:inset-y-0 before:end-0",
-      "before:[inset-inline-start:calc(var(--m3-progress,0%)+4px)]",
+      "before:content-[''] before:absolute before:top-1/2 before:-translate-y-1/2 before:end-0",
+      "before:h-[var(--m3-thickness,100%)]",
+      "before:[inset-inline-start:calc(var(--m3-progress,0%)_+_4px)]",
       "before:bg-surface-container-highest before:rounded-full",
       "group-data-[indeterminate]:before:start-0"
     ],
+    // Primary bar. Determinate: width from Base UI. Indeterminate: full width,
+    // scaled + slid by the disjoint `primary` keyframe (origin at the start edge).
+    // Wavy determinate: a scrolling sine tile masks the solid bar into a wave.
     indicator: [
-      "absolute inset-y-0 left-0 bg-primary rounded-full",
+      "absolute inset-y-0 left-0 origin-left bg-primary rounded-full",
       "transition-[width] duration-200 ease-standard",
-      "group-data-[indeterminate]:w-2/5 group-data-[indeterminate]:transition-none",
-      "group-data-[indeterminate]:animate-m3-linear-indeterminate"
+      "group-data-[indeterminate]:w-full group-data-[indeterminate]:transition-none",
+      "group-data-[indeterminate]:animate-m3-linear-primary",
+      "group-data-[wavy]:rounded-none",
+      "group-data-[wavy]:[-webkit-mask-image:var(--m3-wave)] group-data-[wavy]:[mask-image:var(--m3-wave)]",
+      "group-data-[wavy]:[-webkit-mask-repeat:repeat-x] group-data-[wavy]:[mask-repeat:repeat-x]",
+      "group-data-[wavy]:[-webkit-mask-size:40px_100%] group-data-[wavy]:[mask-size:40px_100%]",
+      "group-data-[wavy]:animate-m3-wave-flow",
+      // Reduced motion: freeze the loops and show a static ~40% bar / static wave.
+      "motion-reduce:group-data-[indeterminate]:w-2/5",
+      "motion-reduce:group-data-[indeterminate]:animate-none motion-reduce:group-data-[wavy]:animate-none"
+    ],
+    // Second disjoint bar: only present visually while indeterminate.
+    indicatorSecondary: [
+      "absolute inset-y-0 left-0 w-full origin-left bg-primary rounded-full hidden",
+      "group-data-[indeterminate]:block group-data-[indeterminate]:animate-m3-linear-secondary",
+      // Reduced motion: a single static bar reads better than two frozen ones.
+      "motion-reduce:group-data-[indeterminate]:hidden"
     ]
   }
 });
 var circularTv = tv({
   slots: {
+    // Size comes from the factory (inline width/height) so `size` is honored.
+    // Indeterminate rotates the whole ring; the arc grows/shrinks via the
+    // indicator's own `dash` animation (M3 "advance").
     root: [
-      "inline-flex items-center justify-center size-12",
+      "group inline-flex items-center justify-center",
       "[&_svg]:block [&_svg]:size-full",
-      "data-[indeterminate]:animate-spin"
+      "data-[indeterminate]:animate-m3-circular-rotate",
+      "motion-reduce:data-[indeterminate]:animate-none"
+    ],
+    // Both ends are rounded (M3); the inactive track sits behind with a 4dp gap.
+    track: [
+      "stroke-surface-container-highest [stroke-linecap:round]",
+      "transition-[stroke-dasharray,stroke-dashoffset] duration-300 ease-standard"
     ],
-    track: "stroke-surface-container-highest [stroke-width:4px]",
     indicator: [
-      "stroke-primary [stroke-width:4px] [stroke-linecap:round]",
-      "transition-[stroke-dashoffset] duration-300 ease-standard"
+      "stroke-primary [stroke-linecap:round]",
+      "transition-[stroke-dasharray,stroke-dashoffset] duration-300 ease-standard",
+      "group-data-[indeterminate]:animate-m3-circular-dash group-data-[indeterminate]:transition-none",
+      // Reduced motion: freeze the arc at its static 25% length (no rotation).
+      "motion-reduce:group-data-[indeterminate]:animate-none"
     ]
   }
 });
 var l = linearTv();
 var c2 = circularTv();
 var Progress = createProgress({
-  linear: { root: l.root(), track: l.track(), indicator: l.indicator() },
+  linear: {
+    root: l.root(),
+    track: l.track(),
+    indicator: l.indicator(),
+    indicatorSecondary: l.indicatorSecondary()
+  },
   circular: { root: c2.root(), track: c2.track(), indicator: c2.indicator() }
 });
 var loadingIndicatorTv = tv7({
@@ -1384,7 +1626,7 @@ var buttonGroup = tv7({
   }
 });
 var ButtonGroup = createButtonGroup(({ variant }) => buttonGroup({ variant }));
-var surface = [
+var surface3 = [
   "relative inline-flex items-center justify-center h-10 overflow-hidden cursor-pointer select-none border-0 outline-none",
   "text-label-large",
   "transition-[background-color,color,border-color] duration-200 ease-standard",
@@ -1426,9 +1668,9 @@ var splitButtonTv = tv7({
   slots: {
     group: "inline-flex items-center gap-0.5",
     // leading: outer (start) corner full, seam (end) corner reduced.
-    leading: [...surface, "gap-2 px-6 rounded-s-full rounded-e-small"],
+    leading: [...surface3, "gap-2 px-6 rounded-s-full rounded-e-small"],
     // trailing: seam (start) corner reduced, outer (end) corner full.
-    trailing: [...surface, "group gap-1 px-3 rounded-s-small rounded-e-full"],
+    trailing: [...surface3, "group gap-1 px-3 rounded-s-small rounded-e-full"],
     chevron: [
       "inline-flex items-center justify-center shrink-0 [&>svg]:size-[18px]",
       "transition-transform duration-200 ease-standard group-data-[popup-open]:rotate-180"
@@ -1873,32 +2115,46 @@ var DatePicker = createDatePicker({
   modalHeadline: dp.modalHeadline(),
   modalActions: dp.modalActions()
 });
+var stateLayerBase = [
+  "overflow-hidden",
+  'before:content-[""] before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',
+  "hover:before:opacity-[var(--md-sys-state-hover)]",
+  "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+  "active:before:opacity-[var(--md-sys-state-pressed)]",
+  "focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2"
+];
 var timePickerTv = tv7({
   slots: {
-    root: ["inline-flex flex-col items-center gap-2 p-2 text-on-surface"],
-    header: ["flex items-center gap-2"],
+    root: ["inline-flex flex-col items-center p-2 text-on-surface"],
+    header: ["flex items-center gap-3 min-h-[98px]"],
+    display: ["inline-flex items-center"],
     field: [
-      "inline-grid place-items-center w-24 h-20 rounded-small overflow-hidden box-border",
+      "relative",
+      ...stateLayerBase,
+      "inline-grid place-items-center w-24 h-20 rounded-small box-border",
       "bg-surface-container-highest text-on-surface text-display-large cursor-pointer outline-none",
       "border border-transparent transition-colors duration-100",
       "data-[selected]:bg-primary-container data-[selected]:text-on-primary-container"
     ],
-    colon: ["text-display-large text-on-surface px-1 leading-none"],
+    colon: ["text-display-large text-on-surface px-1 leading-none self-center"],
     periods: [
-      "inline-flex flex-col rounded-small overflow-hidden border border-outline self-stretch",
-      "m-0 p-0 min-w-0"
+      "inline-flex flex-col shrink-0 rounded-small overflow-hidden border border-outline",
+      "h-[98px] w-[52px] m-0 p-0 min-w-0 box-border"
     ],
     period: [
-      "flex-1 inline-flex items-center justify-center px-3 min-h-[38px] w-14",
+      "relative",
+      ...stateLayerBase,
+      "flex-1 inline-flex items-center justify-center min-h-12 h-12 w-full",
       "border-0 bg-transparent",
       "text-title-medium text-on-surface-variant cursor-pointer outline-none",
       "data-[selected]:bg-secondary-container data-[selected]:text-on-secondary-container",
       "[&+&]:border-t [&+&]:border-outline"
     ],
     dial: [
-      "relative size-[256px] my-2 p-0 min-w-0 border-0 rounded-full bg-surface-container-highest"
+      "relative size-[256px] mt-[28px] p-0 min-w-0 border-0 rounded-full bg-surface-container-highest"
     ],
     dialNumber: [
+      ...stateLayerBase,
       "absolute -translate-x-1/2 -translate-y-1/2 inline-grid place-items-center size-12 rounded-full",
       "border-0 bg-transparent",
       "text-body-large text-on-surface cursor-pointer outline-none select-none",
@@ -1910,7 +2166,7 @@ var timePickerTv = tv7({
     dialCenter: [
       "absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary pointer-events-none"
     ],
-    inputs: ["flex items-start gap-2"],
+    inputs: ["flex items-start gap-3"],
     inputBox: [
       "w-24 h-20 rounded-small box-border text-center",
       "bg-surface-container-highest text-on-surface text-display-large outline-none",
@@ -1924,6 +2180,7 @@ var tp = timePickerTv();
 var TimePicker = createTimePicker(() => ({
   root: tp.root(),
   header: tp.header(),
+  display: tp.display(),
   field: tp.field(),
   colon: tp.colon(),
   periods: tp.periods(),
@@ -1979,6 +2236,6 @@ var Carousel = createCarousel((variant) => {
   return { root: s14.root(), item: s14.item() };
 });
 
-export { Badge, BottomAppBar, BottomSheet, Button, ButtonGroup, Card, Carousel, Checkbox, Chip, DatePicker, Dialog, Divider, Fab, FabMenu, IconButton, Item, List, LoadingIndicator, Menu, NavigationBar, NavigationDrawer, NavigationRail, Progress, Radio, RadioGroup, RichTooltip, Search, SegmentedButton, Select, SideSheet, Slider, Snackbar, SplitButton, Switch, Tabs, TextField, TimePicker, Toolbar, Tooltip, TopAppBar, badgeTv, bottomAppBarTv, bottomSheetTv, button, buttonGroup, cardTv, carouselTv, checkboxTv, chipTv, circularTv, datePickerTv, dialogTv, dividerTv, fabMenuTv, fabTv, iconButton, itemTv, linearTv, listTv, loadingIndicatorTv, menuTv, navigationBarTv, navigationDrawerTv, navigationRailTv, radioTv, richTooltipTv, searchTv, segmentedButtonTv, selectTv, sideSheetTv, sliderTv, snackbarTv, splitButtonTv, switchTv, tabsTv, textFieldTv, timePickerTv, toolbarTv, tooltipTv, topAppBarTv };
+export { Badge, BottomAppBar, BottomSheet, Button, ButtonGroup, Card, Carousel, Checkbox, Chip, DatePicker, Dialog, Divider, Fab, FabMenu, IconButton, Item, List, LoadingIndicator, Menu, NavigationBar, NavigationDrawer, NavigationRail, Progress, Radio, RadioGroup, RichTooltip, Search, SegmentedButton, Select, SideSheet, Slider, Snackbar, SplitButton, Switch, Tabs, TextField, TimePicker, Toolbar, Tooltip, TopAppBar, badgeTv, bottomAppBarTv, bottomSheetTv, button, buttonGroup, cardTv, carouselTv, checkboxTv, chipTv, circularTv, datePickerTv, dialogTv, dividerTv, fabMenuTv, fabTv, iconButton, itemTv, linearTv, listTv, loadingIndicatorTv, menuTv, navigationBarTv, navigationDrawerTv, navigationRailTv, radioTv, richTooltipTv, searchTv, segmentedButtonTv, selectFieldTv, selectTv, sideSheetTv, sliderTv, snackbarTv, splitButtonTv, switchTv, tabsTv, textFieldTv, timePickerTv, toolbarTv, tooltipTv, topAppBarTv };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map