@m3-baseui/react-tailwind 3.0.0 → 5.0.0

package/dist/index.js

@@ -1,20 +1,59 @@
 "use client";
-import { createButton, createIconButton, createSwitch, createCheckbox, createRadio, createRadioGroup, createChip, createTooltip, createRichTooltip, createDialog, createMenu, createTabs, createSlider, createSelect, createTextField, createNavigationBar, createFab, createFabMenu, createDivider, createProgress, createLoadingIndicator, createList, createSnackbar, createItem, createBadge, createCard, createSegmentedButton, createButtonGroup, createSplitButton, createNavigationDrawer, createTopAppBar, createBottomAppBar, createNavigationRail, createBottomSheet, createSideSheet, createSearch, createDatePicker, createTimePicker, createToolbar, createCarousel } from '@m3-baseui/core';
+import { createButton, toToggle, createIconButton, createSwitch, createCheckbox, createRadio, createRadioGroup, createChip, createTooltip, createRichTooltip, createDialog, createMenu, createTabs, createSlider, createSelect, createTextField, createNavigationBar, createFab, createFabMenu, createDivider, createProgress, createLoadingIndicator, createList, createSnackbar, createItem, createBadge, createCard, createSegmentedButton, createButtonGroup, createSplitButton, createNavigationDrawer, createTopAppBar, createBottomAppBar, createNavigationRail, createBottomSheet, createSideSheet, createSearch, createDatePicker, createTimePicker, createToolbar, createCarousel } from '@m3-baseui/core';
 export { ITEM_LEADING_VARIANTS, LIST_LEADING_VARIANTS, Ripple, ThemeProvider, applyScheme, generateScheme, schemeToCssText, useSnackbar, useTheme } from '@m3-baseui/core';
-import { tv } from 'tailwind-variants';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/components/button/button.ts
+var TYPESCALE = [
+  "display-large",
+  "display-medium",
+  "display-small",
+  "headline-large",
+  "headline-medium",
+  "headline-small",
+  "title-large",
+  "title-medium",
+  "title-small",
+  "body-large",
+  "body-medium",
+  "body-small",
+  "label-large",
+  "label-medium",
+  "label-small"
+];
+var SHAPE = [
+  "none",
+  "extra-small",
+  "small",
+  "medium",
+  "large",
+  "large-increased",
+  "extra-large",
+  "extra-large-increased",
+  "full"
+];
+var tv = (options, config) => tv$1(options, {
+  ...config,
+  twMergeConfig: {
+    extend: {
+      classGroups: {
+        "font-size": [{ text: [...TYPESCALE] }],
+        rounded: [{ rounded: [...SHAPE] }]
+      }
+    }
+  }
+});
 
 // src/components/button/button.ts
 var button = tv({
   base: [
-    "relative inline-flex items-center justify-center gap-2",
-    "h-10 px-6 rounded-full overflow-hidden cursor-pointer select-none border-0",
-    "text-label-large",
-    // M3 with-icon padding: the icon side trims to 16dp (label side stays 24dp).
-    "data-[with-start-icon]:pl-4 data-[with-end-icon]:pr-4",
-    // Icon slot: 18dp, centered.
+    "relative inline-flex items-center justify-center",
+    "overflow-hidden cursor-pointer select-none border-0",
+    // Icon slot: centered; the svg size comes from the `size` variant.
     "[&_[data-slot=button-icon]]:inline-flex [&_[data-slot=button-icon]]:items-center [&_[data-slot=button-icon]]:justify-center",
-    "[&_[data-slot=button-icon]>svg]:size-[18px]",
-    "transition-[box-shadow,background-color,color,border-color] duration-200 ease-[var(--md-sys-motion-easing-standard)]",
+    // Motion: Compose uses DefaultEffects (critically-damped spring, no bounce)
+    // for the shape/color/elevation transitions — spring-effects-default here.
+    "transition-[box-shadow,background-color,color,border-color,border-radius] duration-200 ease-spring-effects-default",
     // State layer overlay
     "before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none",
     "before:transition-opacity before:duration-100",
@@ -25,20 +64,23 @@ var button = tv({
     // Focus ring (M3: 3px secondary, 2px offset)
     "focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary",
     // Disabled: no interaction, no state layer, no elevation. Per-variant
-    // colors (container on-surface/12, label on-surface/38) live on each variant.
+    // colors (container on-surface/10, label on-surface-variant/38) live on
+    // each variant.
     "disabled:pointer-events-none disabled:shadow-none disabled:before:opacity-0",
     "data-[disabled]:pointer-events-none data-[disabled]:shadow-none data-[disabled]:before:opacity-0"
   ],
   variants: {
     // M3 elevation per variant: filled/tonal rest level0→hover level1→pressed level0;
-    // elevated rest level1→hover level2→pressed level1. Disabled container is
-    // on-surface/12 and label on-surface/38, matching material-web.
+    // elevated rest level1→hover level2→pressed level1. Expressive disabled:
+    // container on-surface/10, label on-surface-variant/38 — except tonal, which
+    // is unchanged upstream (FilledTonalButtonTokens v0_103) and keeps 0.12 /
+    // on-surface. Expressive also moves outlined/text labels to on-surface-variant.
     variant: {
       filled: [
         "bg-primary text-on-primary",
         "hover:shadow-level1 focus-visible:shadow-none active:shadow-none data-[pressed]:shadow-none",
-        "disabled:bg-on-surface/12 disabled:text-on-surface/38",
-        "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
+        "disabled:bg-on-surface/10 disabled:text-on-surface-variant/38",
+        "data-[disabled]:bg-on-surface/10 data-[disabled]:text-on-surface-variant/38"
       ],
       tonal: [
         "bg-secondary-container text-on-secondary-container",
@@ -47,28 +89,129 @@ var button = tv({
         "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
       ],
       outlined: [
-        "bg-transparent text-primary border border-outline",
-        "disabled:text-on-surface/38 disabled:border-on-surface/12",
-        "data-[disabled]:text-on-surface/38 data-[disabled]:border-on-surface/12"
+        "bg-transparent text-on-surface-variant border border-outline-variant",
+        // Compose outlinedButtonBorder(enabled=false) tints the outline with
+        // DisabledContainerOpacity (0.1), so the disabled border is faint.
+        "disabled:text-on-surface-variant/38 disabled:border-outline-variant/10",
+        "data-[disabled]:text-on-surface-variant/38 data-[disabled]:border-outline-variant/10"
       ],
       elevated: [
         "bg-surface-container-low text-primary shadow-level1",
         "hover:shadow-level2 focus-visible:shadow-level1 active:shadow-level1 data-[pressed]:shadow-level1",
-        "disabled:bg-on-surface/12 disabled:text-on-surface/38",
-        "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
+        "disabled:bg-on-surface/10 disabled:text-on-surface-variant/38",
+        "data-[disabled]:bg-on-surface/10 data-[disabled]:text-on-surface-variant/38"
       ],
       text: [
-        "bg-transparent text-primary px-3",
-        "disabled:text-on-surface/38",
-        "data-[disabled]:text-on-surface/38"
+        "bg-transparent text-on-surface-variant",
+        "disabled:text-on-surface-variant/38",
+        "data-[disabled]:text-on-surface-variant/38"
+      ]
+    },
+    // Height / horizontal padding / gap / typescale / icon size per Expressive
+    // size. The pressed corner morph (PressedContainerShape: XS·S small 8 /
+    // M medium 12 / L·XL large 16) rides on data-[pressed]/active here so its
+    // attribute-selector specificity wins over the resting `rounded-*`.
+    size: {
+      xs: [
+        // XS is special-cased in Compose Button.kt: contentPaddingFor returns
+        // ExtraSmallContentPadding (12dp) and iconSpacingFor returns
+        // ExtraSmallIconSpacing (4dp) — tighter than the ButtonXSmallTokens
+        // Leading/TrailingSpace (16) and IconLabelSpace (8). S–XL use their tokens.
+        "h-8 px-3 gap-1 text-label-large [&_[data-slot=button-icon]>svg]:size-5",
+        "data-[pressed]:rounded-small active:rounded-small"
+      ],
+      s: [
+        "h-10 px-4 gap-2 text-label-large [&_[data-slot=button-icon]>svg]:size-5",
+        "data-[pressed]:rounded-small active:rounded-small"
+      ],
+      m: [
+        "h-14 px-6 gap-2 text-title-medium [&_[data-slot=button-icon]>svg]:size-6",
+        "data-[pressed]:rounded-medium active:rounded-medium"
+      ],
+      l: [
+        "h-24 px-12 gap-3 text-headline-small [&_[data-slot=button-icon]>svg]:size-8",
+        "data-[pressed]:rounded-large active:rounded-large"
+      ],
+      xl: [
+        "h-[136px] px-16 gap-4 text-headline-large [&_[data-slot=button-icon]>svg]:size-10",
+        "data-[pressed]:rounded-large active:rounded-large"
       ]
+    },
+    // round = full pill; the square corner is size-specific (compounds below).
+    shape: {
+      round: "rounded-full",
+      square: ""
+    },
+    // Toggle state, string-keyed so a plain (non-toggle) button — `toggle`
+    // unset — fires neither compound below (a boolean variant would default to
+    // `off` in tailwind-variants and wrongly apply the unselected look).
+    toggle: {
+      on: "",
+      off: ""
     }
   },
+  compoundVariants: [
+    // ---- Resting square corner (ContainerShapeSquare) ---------------------
+    { shape: "square", size: "xs", class: "rounded-medium" },
+    // 12dp
+    { shape: "square", size: "s", class: "rounded-medium" },
+    // 12dp
+    { shape: "square", size: "m", class: "rounded-large" },
+    // 16dp
+    { shape: "square", size: "l", class: "rounded-extra-large" },
+    // 28dp
+    { shape: "square", size: "xl", class: "rounded-extra-large" },
+    // 28dp
+    // ---- Selected shape morph: swap to the opposite shape -----------------
+    // (listed after the resting corner so tailwind-merge keeps these).
+    { shape: "round", toggle: "on", size: "xs", class: "rounded-medium" },
+    { shape: "round", toggle: "on", size: "s", class: "rounded-medium" },
+    { shape: "round", toggle: "on", size: "m", class: "rounded-large" },
+    { shape: "round", toggle: "on", size: "l", class: "rounded-extra-large" },
+    { shape: "round", toggle: "on", size: "xl", class: "rounded-extra-large" },
+    { shape: "square", toggle: "on", size: "xs", class: "rounded-full" },
+    { shape: "square", toggle: "on", size: "s", class: "rounded-full" },
+    { shape: "square", toggle: "on", size: "m", class: "rounded-full" },
+    { shape: "square", toggle: "on", size: "l", class: "rounded-full" },
+    { shape: "square", toggle: "on", size: "xl", class: "rounded-full" },
+    // ---- Outlined border width (OutlinedOutlineWidth: L 2 / XL 3 dp) ------
+    { variant: "outlined", size: "l", class: "border-2" },
+    { variant: "outlined", size: "xl", class: "border-[3px]" },
+    // ---- Toggle colors (Selected*/Unselected* tokens) ---------------------
+    // filled/tonal: base = default & selected look; `toggle:off` = unselected.
+    { variant: "filled", toggle: "off", class: "bg-surface-container text-on-surface-variant" },
+    { variant: "tonal", toggle: "off", class: "bg-surface-container text-on-surface-variant" },
+    // elevated: distinct selected (primary) & unselected looks.
+    { variant: "elevated", toggle: "on", class: "bg-primary text-on-primary" },
+    {
+      variant: "elevated",
+      toggle: "off",
+      class: "bg-surface-container-low text-on-surface-variant"
+    },
+    // outlined: selected fills with the inverse surface (base = unselected).
+    {
+      variant: "outlined",
+      toggle: "on",
+      class: [
+        "bg-inverse-surface text-inverse-on-surface border-transparent",
+        "disabled:bg-on-surface/10 disabled:border-transparent",
+        "data-[disabled]:bg-on-surface/10 data-[disabled]:border-transparent"
+      ]
+    },
+    // text: no Selected/Unselected tokens exist upstream (TextButtonTokens),
+    // so selection raises the label emphasis to primary (base = unselected
+    // on-surface-variant) to communicate the toggle state.
+    { variant: "text", toggle: "on", class: "text-primary" }
+  ],
   defaultVariants: {
-    variant: "filled"
+    variant: "filled",
+    size: "s",
+    shape: "round"
   }
 });
-var Button = createButton(({ variant }) => button({ variant }));
+var Button = createButton(
+  ({ variant, size, shape, selected }) => button({ variant, size, shape, toggle: toToggle(selected) })
+);
 var WIDTHS = {
   xs: { narrow: "w-7", default: "w-8", wide: "w-10" },
   // 28 / 32 / 40
@@ -88,6 +231,35 @@ var widthCompounds = Object.entries(WIDTHS).flatMap(
     class: klass
   }))
 );
+var SQUARE_CORNER = {
+  xs: "rounded-medium",
+  // 12dp
+  s: "rounded-medium",
+  // 12dp
+  m: "rounded-large",
+  // 16dp
+  l: "rounded-extra-large",
+  // 28dp
+  xl: "rounded-extra-large"
+  // 28dp
+};
+var squareShapeCompounds = Object.keys(SQUARE_CORNER).map(
+  (size) => ({ shape: "square", size, class: SQUARE_CORNER[size] })
+);
+var selectedShapeCompounds = [
+  ...Object.keys(SQUARE_CORNER).map((size) => ({
+    shape: "round",
+    toggle: "on",
+    size,
+    class: SQUARE_CORNER[size]
+  })),
+  ...Object.keys(SQUARE_CORNER).map((size) => ({
+    shape: "square",
+    toggle: "on",
+    size,
+    class: "rounded-full"
+  }))
+];
 var iconButton = tv({
   base: [
     "relative inline-flex items-center justify-center shrink-0",
@@ -95,7 +267,9 @@ var iconButton = tv({
     // The state layer is already rounded (before:rounded-[inherit]); the ripple
     // self-clips.
     "rounded-full cursor-pointer select-none border-0 bg-transparent",
-    "transition-[box-shadow,background-color,color] duration-200 ease-standard",
+    // Motion: Compose uses DefaultEffects (critically-damped spring, no bounce)
+    // for the shape/color transitions — spring-effects-default here.
+    "transition-[box-shadow,background-color,color,border-color,border-radius] duration-200 ease-spring-effects-default",
     // State layer overlay
     "before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none",
     "before:transition-opacity before:duration-100",
@@ -106,14 +280,14 @@ var iconButton = tv({
     // Focus ring (M3: 3px secondary, 2px offset)
     "focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary",
     // Disabled: no interaction, no state layer. Per-variant disabled colors
-    // (container on-surface/12, icon on-surface/38) live on each variant.
+    // (container on-surface/10, icon on-surface/38) live on each variant.
     "disabled:pointer-events-none disabled:before:opacity-0",
     "data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0"
   ],
   variants: {
     // Disabled icon is on-surface/38 for every variant; filled/tonal disabled
-    // container is on-surface/12; outlined disabled outline is on-surface/12
-    // (material-web parity).
+    // container is on-surface/10 (DisabledContainerOpacity); outlined disabled
+    // outline stays outline-variant (Expressive DisabledOutlineColor).
     variant: {
       standard: [
         "text-on-surface-variant",
@@ -121,70 +295,95 @@ var iconButton = tv({
       ],
       filled: [
         "bg-primary text-on-primary",
-        "disabled:bg-on-surface/12 disabled:text-on-surface/38",
-        "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
+        "disabled:bg-on-surface/10 disabled:text-on-surface/38",
+        "data-[disabled]:bg-on-surface/10 data-[disabled]:text-on-surface/38"
       ],
       tonal: [
         "bg-secondary-container text-on-secondary-container",
-        "disabled:bg-on-surface/12 disabled:text-on-surface/38",
-        "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
+        "disabled:bg-on-surface/10 disabled:text-on-surface/38",
+        "data-[disabled]:bg-on-surface/10 data-[disabled]:text-on-surface/38"
       ],
       outlined: [
-        "border border-outline text-on-surface-variant",
-        "disabled:border-on-surface/12 disabled:text-on-surface/38",
-        "data-[disabled]:border-on-surface/12 data-[disabled]:text-on-surface/38"
+        "border border-outline-variant text-on-surface-variant",
+        "disabled:border-outline-variant disabled:text-on-surface/38",
+        "data-[disabled]:border-outline-variant data-[disabled]:text-on-surface/38"
       ]
     },
-    selected: {
-      true: "",
-      false: ""
+    // Toggle state, string-keyed so a plain (non-toggle) button — `toggle`
+    // unset — fires neither compound below (a boolean variant would default to
+    // `off` in tailwind-variants and wrongly apply the unselected look).
+    toggle: {
+      on: "",
+      off: ""
     },
     // Container height + icon size per M3 Expressive size. Width comes from the
-    // (size, width) compound variants below.
+    // (size, width) compound variants below. The pressed corner morph
+    // (PressedContainerShape: XS·S small 8 / M medium 12 / L·XL large 16) rides
+    // on data-[pressed]/active so its attribute-selector specificity wins over
+    // the resting `rounded-*`.
     size: {
-      xs: "h-8 [&>svg]:size-5",
-      s: "h-10 [&>svg]:size-6",
-      m: "h-14 [&>svg]:size-6",
-      l: "h-24 [&>svg]:size-8",
-      xl: "h-[136px] [&>svg]:size-10"
+      xs: "h-8 [&>svg]:size-5 data-[pressed]:rounded-small active:rounded-small",
+      s: "h-10 [&>svg]:size-6 data-[pressed]:rounded-small active:rounded-small",
+      m: "h-14 [&>svg]:size-6 data-[pressed]:rounded-medium active:rounded-medium",
+      l: "h-24 [&>svg]:size-8 data-[pressed]:rounded-large active:rounded-large",
+      xl: "h-[136px] [&>svg]:size-10 data-[pressed]:rounded-large active:rounded-large"
     },
     width: {
       narrow: "",
       default: "",
       wide: ""
+    },
+    // round = full circle; the square corner is size-specific (compounds below).
+    shape: {
+      round: "rounded-full",
+      square: ""
     }
   },
   compoundVariants: [
     ...widthCompounds,
-    { variant: "standard", selected: true, class: "text-primary" },
-    { variant: "filled", selected: false, class: "bg-surface-container-highest text-primary" },
+    ...squareShapeCompounds,
+    ...selectedShapeCompounds,
+    // ---- Outlined border width (OutlinedOutlineWidth: L 2 / XL 3 dp) ------
+    { variant: "outlined", size: "l", class: "border-2" },
+    { variant: "outlined", size: "xl", class: "border-[3px]" },
+    // ---- Toggle colors (Selected*/Unselected* tokens) ---------------------
+    // standard: unselected = on-surface-variant (base); selected = primary.
+    { variant: "standard", toggle: "on", class: "text-primary" },
+    // filled: base = default & selected look (primary/on-primary); unselected =
+    // surface-container + on-surface-variant (was surface-container-highest+primary).
     {
-      variant: "tonal",
-      selected: false,
-      class: "bg-surface-container-highest text-on-surface-variant"
+      variant: "filled",
+      toggle: "off",
+      class: "bg-surface-container text-on-surface-variant"
     },
+    // tonal: base = default & unselected look (secondary-container); selected =
+    // secondary + on-secondary (was left at the variant default — the "selection
+    // not visible" bug this issue fixes).
+    { variant: "tonal", toggle: "on", class: "bg-secondary text-on-secondary" },
+    // outlined: selected fills with the inverse surface (base = unselected).
     {
       variant: "outlined",
-      selected: true,
+      toggle: "on",
       class: [
         "bg-inverse-surface text-inverse-on-surface border-transparent",
-        // M3 disabled + selected: faint on-surface/12 container, no outline
+        // M3 disabled + selected: faint on-surface/10 container, no outline
         // (icon falls back to on-surface/38 from the variant). NOT transparent.
-        "disabled:bg-on-surface/12 disabled:border-transparent",
-        "data-[disabled]:bg-on-surface/12 data-[disabled]:border-transparent"
+        "disabled:bg-on-surface/10 disabled:border-transparent",
+        "data-[disabled]:bg-on-surface/10 data-[disabled]:border-transparent"
       ]
     }
   ],
   defaultVariants: {
     variant: "standard",
     size: "s",
-    width: "default"
+    width: "default",
+    shape: "round"
   }
 });
 var IconButton = createIconButton(
-  ({ variant, selected, size, width }) => iconButton({ variant, selected, size, width })
+  ({ variant, selected, size, width, shape }) => iconButton({ variant, size, width, shape, toggle: toToggle(selected) })
 );
-var switchTv = tv({
+var switchTv = tv$1({
   slots: {
     root: [
       "group relative inline-flex shrink-0 w-[52px] h-8 rounded-full border-2 box-border cursor-pointer",
@@ -244,7 +443,7 @@ var Switch = createSwitch({
   iconChecked: s.iconChecked(),
   iconUnchecked: s.iconUnchecked()
 });
-var checkboxTv = tv({
+var checkboxTv = tv$1({
   slots: {
     root: [
       "group relative inline-flex items-center justify-center shrink-0 box-border",
@@ -300,7 +499,7 @@ var Checkbox = createCheckbox({
   indicator: c.indicator(),
   icon: c.icon()
 });
-var radioTv = tv({
+var radioTv = tv$1({
   slots: {
     root: [
       "group relative inline-flex items-center justify-center shrink-0 box-border",
@@ -343,7 +542,7 @@ var radioTv = tv({
 var r = radioTv();
 var Radio = createRadio({ root: r.root(), indicator: r.indicator() });
 var RadioGroup = createRadioGroup("inline-flex flex-col gap-1");
-var chipTv = tv({
+var chipTv = tv$1({
   slots: {
     root: [
       "group relative inline-flex items-center justify-center gap-2 box-border",
@@ -437,41 +636,12 @@ var Chip = createChip(({ variant, elevated }) => {
     icon: c3.icon()
   };
 });
-var TYPESCALE = [
-  "display-large",
-  "display-medium",
-  "display-small",
-  "headline-large",
-  "headline-medium",
-  "headline-small",
-  "title-large",
-  "title-medium",
-  "title-small",
-  "body-large",
-  "body-medium",
-  "body-small",
-  "label-large",
-  "label-medium",
-  "label-small"
-];
-var tv7 = (options, config) => tv(options, {
-  ...config,
-  twMergeConfig: {
-    extend: {
-      classGroups: {
-        "font-size": [{ text: [...TYPESCALE] }]
-      }
-    }
-  }
-});
-
-// 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",
   "data-[ending-style]:opacity-0 data-[ending-style]:scale-95"
 ];
-var tooltipTv = tv7({
+var tooltipTv = tv({
   slots: {
     popup: [
       "bg-inverse-surface text-inverse-on-surface text-body-small",
@@ -481,7 +651,7 @@ var tooltipTv = tv7({
     arrow: ["text-inverse-surface"]
   }
 });
-var richTooltipTv = tv7({
+var richTooltipTv = tv({
   slots: {
     popup: [
       "bg-surface-container text-on-surface shadow-level2",
@@ -508,7 +678,7 @@ var RichTooltip = createRichTooltip({
   supportingText: r2.supportingText(),
   actions: r2.actions()
 });
-var dialogTv = tv7({
+var dialogTv = tv({
   slots: {
     backdrop: [
       "fixed inset-0 z-40 bg-scrim/32",
@@ -613,7 +783,7 @@ var menuSelectableItemBase = [
   ...menuSelectableItemPositionShapeFallback,
   ...menuSelectableItemDisabled
 ];
-var menuSelectableItemTv = tv7({
+var menuSelectableItemTv = tv({
   slots: {
     /** Select row: check + label + optional trailing meta. */
     selectItem: ["grid grid-cols-[24px_1fr_auto] items-center gap-3", ...menuSelectableItemBase],
@@ -638,7 +808,7 @@ var menuSurfaceBase = [
   "data-[ending-style]:opacity-0",
   "focus:outline-none"
 ];
-var menuSurfaceTv = tv7({
+var menuSurfaceTv = tv({
   slots: {
     popup: ["max-w-[280px]", ...menuSurfaceBase],
     groupLabel: "px-3 py-2 text-label-small text-on-surface-variant"
@@ -666,7 +836,7 @@ menuSurfaceTv();
 // src/components/menu/menu.ts
 var surface = menuSurfaceTv({ width: "standard", scroll: "none" });
 var selectable = menuSelectableItem;
-var menuTv = tv7({
+var menuTv = tv({
   slots: {
     popup: surface.popup(),
     item: [
@@ -716,7 +886,7 @@ var Menu = createMenu({
   radioItem: m.radioItem(),
   itemIndicator: m.itemIndicator()
 });
-var tabsTv = tv7({
+var tabsTv = tv({
   slots: {
     root: "flex flex-col",
     list: [
@@ -775,36 +945,58 @@ var Tabs = createTabs((variant) => {
     panel: s14.panel()
   };
 });
-var sliderTv = tv7({
+var sliderTv = tv({
   slots: {
     root: "group relative flex items-center select-none w-full touch-none",
-    control: "relative flex items-center w-full h-10",
+    control: "relative flex items-center w-full h-11",
+    // Transparent positioning container; the inactive rail lives on the pseudos.
+    // `::before` = the rail after the active end (single + range). `::after` =
+    // the rail before the active start (range only; it collapses when
+    // `--m3-slider-start` is 0). Both offset by the 8px handle gap and keep a 2dp
+    // inside corner / full outside corner. Logical inline insets track RTL.
     track: [
-      "relative w-full h-1 rounded-full bg-surface-container-highest",
-      "group-data-[disabled]:bg-on-surface/[0.12]"
-    ],
+      "relative w-full h-4",
+      "before:content-[''] before:absolute before:top-0 before:bottom-0 before:end-0",
+      "before:[inset-inline-start:calc(var(--m3-slider-end)_+_8px)]",
+      "before:bg-secondary-container before:rounded-s-[2px] before:rounded-e-full",
+      "group-data-[disabled]:before:bg-on-surface/[0.12]",
+      "after:content-[''] after:absolute after:top-0 after:bottom-0 after:start-0",
+      "after:[inset-inline-end:calc(100%_-_var(--m3-slider-start)_+_8px)]",
+      "after:bg-secondary-container after:rounded-s-full after:rounded-e-[2px]",
+      "group-data-[disabled]:after:bg-on-surface/[0.12]"
+    ],
+    // Active fill. Geometry (absolute insets built from the active fraction + 8px
+    // gap) is set inline by the factory; here we own colour + corners. Outer edge
+    // full, inner (handle-facing) edge 2dp; a range slider's start edge is inner
+    // too (`data-range`).
     indicator: [
-      "absolute h-1 rounded-full bg-primary",
+      "bg-primary rounded-s-full rounded-e-[2px]",
+      "group-data-[range]:rounded-s-[2px]",
       "group-data-[disabled]:bg-on-surface/[0.38]"
     ],
+    // 4×44dp bar handle, CornerFull. No state layer: it shrinks to 2dp on
+    // pressed (data-dragging) / focus via the fast-spatial spring; hover stays
+    // 4dp. Disabled keeps the 4dp width (DisabledHandleWidth) and dims to 0.38.
     thumb: [
-      "group/thumb relative size-5 rounded-full bg-primary outline-none",
-      'before:content-[""] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',
-      "before:size-10 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity before:duration-100",
-      "hover:before:opacity-[var(--md-sys-state-hover)]",
-      "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
-      "data-[dragging]:before:opacity-[var(--md-sys-state-dragged)]",
+      "w-1 h-11 rounded-full bg-primary outline-none",
+      "transition-[width] ease-spring-spatial-fast duration-[var(--md-sys-motion-duration-spring-spatial-fast)]",
+      "focus-visible:w-0.5 data-[dragging]:w-0.5",
       "group-data-[disabled]:bg-on-surface/[0.38]"
     ],
     value: "text-label-large text-on-surface-variant tabular-nums",
     tickList: "pointer-events-none absolute inset-0",
+    // Stop dots reverse across the tracks: primary on the inactive rail,
+    // secondary-container on the active fill; disabled dots are on-surface.
     tick: [
-      "absolute size-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-on-surface-variant",
-      "data-[active]:bg-on-primary/[0.38]"
+      "absolute size-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary",
+      "data-[active]:bg-secondary-container",
+      "group-data-[disabled]:bg-on-surface"
     ],
+    // Floating value indicator: inverse-surface container / inverse-on-surface
+    // text, 12dp above the handle.
     valueLabel: [
-      "pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded px-2 py-0.5",
-      "bg-primary text-label-large text-on-primary tabular-nums opacity-0",
+      "pointer-events-none absolute bottom-full left-1/2 mb-3 -translate-x-1/2 whitespace-nowrap rounded px-2 py-0.5",
+      "bg-inverse-surface text-label-large text-inverse-on-surface tabular-nums opacity-0",
       "data-[visible]:opacity-100"
     ]
   }
@@ -823,7 +1015,7 @@ var Slider = createSlider({
 });
 var surface2 = menuSurfaceTv({ width: "anchor", scroll: "auto" });
 var selectable2 = menuSelectableItem;
-var selectTv = tv7({
+var selectTv = tv({
   slots: {
     trigger: [
       "group relative inline-flex items-center justify-between gap-2 box-border",
@@ -849,7 +1041,7 @@ var selectTv = tv7({
     groupLabel: surface2.groupLabel()
   }
 });
-var selectFieldTv = tv7({
+var selectFieldTv = tv({
   slots: {
     // The `group` hook lives here (not in engine-neutral core): supporting text
     // keys its error color off Field.Root's `group-data-[invalid]`.
@@ -955,7 +1147,7 @@ var Select = createSelect(
   }
 );
 var iconVisual = "inline-flex items-center justify-center shrink-0 text-on-surface-variant [&>svg]:size-6";
-var textFieldTv = tv({
+var textFieldTv = tv$1({
   slots: {
     root: "flex flex-col gap-1 min-w-[210px]",
     field: [
@@ -1053,7 +1245,7 @@ var TextField = createTextField(({ variant }) => {
     counter: c3.counter()
   };
 });
-var navigationBarTv = tv({
+var navigationBarTv = tv$1({
   slots: {
     root: "flex items-stretch justify-around w-full h-20 bg-surface-container",
     item: [
@@ -1108,7 +1300,7 @@ var NavigationBar = createNavigationBar({
   icon: s4.icon(),
   label: s4.label()
 });
-var fabTv = tv({
+var fabTv = tv$1({
   base: [
     "relative inline-flex items-center justify-center box-border overflow-hidden",
     "border-0 cursor-pointer select-none outline-none",
@@ -1178,7 +1370,7 @@ var fabTv = tv({
   }
 });
 var Fab = createFab(({ size, color, variant }) => fabTv({ size, color, variant }));
-var fabMenuTv = tv7({
+var fabMenuTv = tv({
   slots: {
     popup: [
       "flex flex-col items-end gap-1 bg-transparent outline-none",
@@ -1217,7 +1409,7 @@ var FabMenu = createFabMenu(({ size, color }) => fabTv({ size, color }), {
   popup: fabMenuTv().popup(),
   item: (color) => fabMenuTv({ color }).item()
 });
-var dividerTv = tv({
+var dividerTv = tv$1({
   base: "shrink-0 self-stretch border-0 bg-outline-variant",
   variants: {
     orientation: {
@@ -1243,7 +1435,7 @@ var dividerTv = tv({
   }
 });
 var Divider = createDivider(({ inset, orientation }) => dividerTv({ inset, orientation }));
-var linearTv = tv({
+var linearTv = tv$1({
   slots: {
     // 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
@@ -1299,7 +1491,7 @@ var linearTv = tv({
     ]
   }
 });
-var circularTv = tv({
+var circularTv = tv$1({
   slots: {
     // Size comes from the factory (inline width/height) so `size` is honored.
     // Indeterminate rotates the whole ring; the arc grows/shrinks via the
@@ -1335,7 +1527,7 @@ var Progress = createProgress({
   },
   circular: { root: c2.root(), track: c2.track(), indicator: c2.indicator() }
 });
-var loadingIndicatorTv = tv7({
+var loadingIndicatorTv = tv({
   slots: {
     // The SVG is a fixed 38dp active indicator. Uncontained: the box shrinks to
     // the shape. Contained: a 48dp pill wraps it (5dp inset on each side).
@@ -1358,7 +1550,7 @@ var LoadingIndicator = createLoadingIndicator(({ contained }) => {
   const s14 = loadingIndicatorTv({ contained });
   return { root: s14.root(), indicator: s14.indicator() };
 });
-var listTv = tv7({
+var listTv = tv({
   slots: {
     root: "list-none m-0 px-0 py-2 bg-transparent",
     item: [
@@ -1421,7 +1613,7 @@ var List = createList({
     };
   }
 });
-var snackbarTv = tv({
+var snackbarTv = tv$1({
   slots: {
     viewport: [
       "fixed bottom-4 left-1/2 -translate-x-1/2 z-50",
@@ -1473,7 +1665,7 @@ var Snackbar = createSnackbar({
   action: s5.action(),
   close: s5.close()
 });
-var itemTv = tv7({
+var itemTv = tv({
   slots: {
     root: [
       "relative flex w-full items-center gap-4 box-border px-4 py-3 min-h-14 text-left",
@@ -1504,7 +1696,7 @@ var Item = createItem({
   supporting: s6.supporting(),
   trailing: s6.trailing()
 });
-var badgeTv = tv7({
+var badgeTv = tv({
   base: "pointer-events-none select-none inline-flex items-center justify-center bg-error text-on-error",
   variants: {
     size: {
@@ -1516,7 +1708,7 @@ var badgeTv = tv7({
 var Badge = createBadge({
   root: ({ size }) => badgeTv({ size })
 });
-var cardTv = tv7({
+var cardTv = tv({
   base: "relative box-border rounded-medium text-on-surface",
   variants: {
     variant: {
@@ -1557,7 +1749,7 @@ var cardTv = tv7({
 var Card = createCard({
   root: ({ variant, interactive }) => cardTv({ variant, interactive })
 });
-var segmentedButtonTv = tv7({
+var segmentedButtonTv = tv({
   slots: {
     root: "inline-flex items-stretch h-10 rounded-full border border-outline",
     item: [
@@ -1595,7 +1787,7 @@ var SegmentedButton = createSegmentedButton({
   icon: s7.icon(),
   label: s7.label()
 });
-var buttonGroup = tv7({
+var buttonGroup = tv({
   base: "inline-flex items-center",
   variants: {
     variant: {
@@ -1653,7 +1845,7 @@ var VARIANT_TEXT = [
   "disabled:text-on-surface/38",
   "data-[disabled]:text-on-surface/38"
 ];
-var splitButtonTv = tv7({
+var splitButtonTv = tv({
   slots: {
     group: "inline-flex items-center gap-0.5",
     // leading: outer (start) corner full, seam (end) corner reduced.
@@ -1703,7 +1895,7 @@ var SplitButton = createSplitButton({
   popup: splitButtonTv().popup(),
   item: splitButtonTv().item()
 });
-var navigationDrawerTv = tv7({
+var navigationDrawerTv = tv({
   slots: {
     root: "flex flex-col gap-1 box-border w-[360px] p-3 bg-surface-container-low text-on-surface",
     headline: "px-4 pt-4 pb-1 text-title-small text-on-surface-variant",
@@ -1743,7 +1935,7 @@ var NavigationDrawer = createNavigationDrawer({
   label: s8.label(),
   trailing: s8.trailing()
 });
-var topAppBarTv = tv7({
+var topAppBarTv = tv({
   slots: {
     root: "flex flex-col w-full box-border h-16 bg-surface text-on-surface",
     row: "flex items-center gap-1 h-16 px-1",
@@ -1773,7 +1965,7 @@ var TopAppBar = createTopAppBar((args) => {
     trailing: s14.trailing()
   };
 });
-var bottomAppBarTv = tv7({
+var bottomAppBarTv = tv({
   slots: {
     root: "flex items-center justify-between w-full box-border h-20 px-1 bg-surface-container text-on-surface-variant",
     actions: "flex items-center gap-1 pl-2 [&_svg]:size-6",
@@ -1786,7 +1978,7 @@ var BottomAppBar = createBottomAppBar({
   actions: s9.actions(),
   fab: s9.fab()
 });
-var navigationRailTv = tv7({
+var navigationRailTv = tv({
   slots: {
     root: "flex flex-col items-center gap-3 h-full w-20 py-5 bg-surface",
     header: "flex flex-col items-center gap-3 mb-1",
@@ -1840,7 +2032,7 @@ var NavigationRail = createNavigationRail({
   icon: s10.icon(),
   label: s10.label()
 });
-var bottomSheetTv = tv7({
+var bottomSheetTv = tv({
   slots: {
     backdrop: [
       "fixed inset-0 z-40 bg-scrim/32",
@@ -1872,7 +2064,7 @@ var BottomSheet = createBottomSheet({
   title: s11.title(),
   description: s11.description()
 });
-var sideSheetTv = tv7({
+var sideSheetTv = tv({
   slots: {
     backdrop: [
       "fixed inset-0 z-40 bg-scrim/32",
@@ -1924,7 +2116,7 @@ var SideSheet = createSideSheet({
   description: s12.description(),
   close: s12.close()
 });
-var searchTv = tv7({
+var searchTv = tv({
   slots: {
     bar: [
       "flex items-center gap-1 h-14 min-w-[360px] max-w-full pl-4 pr-2",
@@ -1991,7 +2183,7 @@ var Search = createSearch({
   separator: s13.separator(),
   groupLabel: s13.groupLabel()
 });
-var datePickerTv = tv7({
+var datePickerTv = tv({
   slots: {
     calendar: ["w-[328px] max-w-full p-3 text-on-surface"],
     header: ["flex items-center justify-between gap-2 h-12 pl-3 pr-1"],
@@ -2112,7 +2304,7 @@ var stateLayerBase = [
   "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({
+var timePickerTv = tv({
   slots: {
     root: ["inline-flex flex-col items-center p-2 text-on-surface"],
     header: ["flex items-center gap-3 min-h-[98px]"],
@@ -2182,7 +2374,7 @@ var TimePicker = createTimePicker(() => ({
   inputBox: tp.inputBox(),
   inputCaption: tp.inputCaption()
 }));
-var toolbarTv = tv7({
+var toolbarTv = tv({
   base: "inline-flex items-center justify-center gap-1 box-border rounded-full shadow-level3 [&_svg]:size-6",
   variants: {
     variant: {
@@ -2199,7 +2391,7 @@ var toolbarTv = tv7({
 var Toolbar = createToolbar(
   ({ variant, orientation }) => toolbarTv({ variant, orientation })
 );
-var carouselTv = tv7({
+var carouselTv = tv({
   slots: {
     root: [
       "flex gap-2 overflow-x-auto snap-x snap-mandatory scroll-smooth",