@m3-baseui/react-tailwind 1.0.4 → 1.2.0

package/dist/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { createButton, createIconButton, createSwitch, createCheckbox, createRadio, createRadioGroup, createChip, createTooltip, createDialog, createMenu, createTabs, createSlider, createSelect, createTextField, createNavigationBar, createFab, createDivider, createProgress, createList, createSnackbar, createItem, createBadge, createCard, createSegmentedButton, createNavigationDrawer } from '@m3-baseui/core';
+import { createButton, createIconButton, createSwitch, createCheckbox, createRadio, createRadioGroup, createChip, createTooltip, 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 { Ripple, ThemeProvider, applyScheme, generateScheme, schemeToCssText, useSnackbar, useTheme } from '@m3-baseui/core';
 import { tv } from 'tailwind-variants';
 
@@ -91,7 +91,10 @@ var widthCompounds = Object.entries(WIDTHS).flatMap(
 var iconButton = tv({
   base: [
     "relative inline-flex items-center justify-center shrink-0",
-    "rounded-full overflow-hidden cursor-pointer select-none border-0 bg-transparent",
+    // No `overflow-hidden`: it would clip the 48dp touch target on small sizes.
+    // 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",
     // State layer overlay
     "before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none",
@@ -331,9 +334,12 @@ var chipTv = tv({
   slots: {
     root: [
       "group relative inline-flex items-center justify-center gap-2 box-border",
-      "h-8 px-4 rounded-[8px] overflow-hidden select-none border bg-transparent text-label-large",
+      // No `overflow-hidden`: it would clip the 48dp touch target. The state
+      // layer is rounded to match instead (before:rounded-[inherit]); the ripple
+      // self-clips.
+      "h-8 px-4 rounded-[8px] select-none border bg-transparent text-label-large",
       "transition-colors 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",
+      "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)]",
@@ -593,13 +599,13 @@ var tabsTv = tv7({
   }
 });
 var Tabs = createTabs((variant) => {
-  const s9 = tabsTv({ variant });
+  const s14 = tabsTv({ variant });
   return {
-    root: s9.root(),
-    list: s9.list(),
-    tab: s9.tab(),
-    indicator: s9.indicator(),
-    panel: s9.panel()
+    root: s14.root(),
+    list: s14.list(),
+    tab: s14.tab(),
+    indicator: s14.indicator(),
+    panel: s14.panel()
   };
 });
 var sliderTv = tv7({
@@ -866,6 +872,46 @@ var fabTv = tv({
   }
 });
 var Fab = createFab(({ size, color }) => fabTv({ size, color }));
+var fabMenuTv = tv7({
+  slots: {
+    popup: [
+      "flex flex-col items-end gap-2 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",
+      "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)]",
+      "data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]",
+      // M3 leading icon (24dp).
+      "[&_[data-slot=fab-menu-leading]]:inline-flex [&_[data-slot=fab-menu-leading]>svg]:size-6",
+      // M3 discourages disabled FABs; when used, match the filled-button tokens
+      // (per-token, not a blanket opacity) and suppress the state layer.
+      "data-[disabled]:pointer-events-none data-[disabled]:shadow-none data-[disabled]:before:opacity-0",
+      "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
+    ]
+  },
+  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" }
+    }
+  },
+  defaultVariants: {
+    color: "primary"
+  }
+});
+var FabMenu = createFabMenu(({ size, color }) => fabTv({ size, color }), {
+  popup: fabMenuTv().popup(),
+  item: (color) => fabMenuTv({ color }).item()
+});
 var dividerTv = tv({
   base: "shrink-0 self-stretch border-0 bg-outline-variant",
   variants: {
@@ -924,6 +970,29 @@ var Progress = createProgress({
   linear: { root: l.root(), track: l.track(), indicator: l.indicator() },
   circular: { root: c2.root(), track: c2.track(), indicator: c2.indicator() }
 });
+var loadingIndicatorTv = tv7({
+  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).
+    root: "inline-flex items-center justify-center [&_svg]:block [&_svg]:size-[38px]",
+    indicator: [
+      "fill-primary",
+      // Morph + rotate about the shape's own centre (transform-box: fill-box).
+      "[transform-box:fill-box] origin-center animate-m3-loading"
+    ]
+  },
+  variants: {
+    contained: {
+      true: { root: "size-12 rounded-full bg-secondary-container" },
+      false: {}
+    }
+  },
+  defaultVariants: { contained: false }
+});
+var LoadingIndicator = createLoadingIndicator(({ contained }) => {
+  const s14 = loadingIndicatorTv({ contained });
+  return { root: s14.root(), indicator: s14.indicator() };
+});
 var listTv = tv7({
   slots: {
     root: "list-none m-0 px-0 py-2 bg-transparent",
@@ -1142,6 +1211,114 @@ var SegmentedButton = createSegmentedButton({
   icon: s7.icon(),
   label: s7.label()
 });
+var buttonGroup = tv7({
+  base: "inline-flex items-center",
+  variants: {
+    variant: {
+      standard: "gap-2",
+      connected: [
+        "gap-0.5",
+        "[&>*:not(:first-child):not(:last-child)]:rounded-small",
+        // Guard against a lone child (it is both first *and* last) — only morph
+        // the inner-facing corner when there is actually a sibling to face.
+        "[&>*:first-child:not(:last-child)]:rounded-e-small",
+        "[&>*:last-child:not(:first-child)]:rounded-s-small"
+      ]
+    }
+  },
+  defaultVariants: {
+    variant: "standard"
+  }
+});
+var ButtonGroup = createButtonGroup(({ variant }) => buttonGroup({ variant }));
+var surface = [
+  "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",
+  "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)]",
+  "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+  "active:before:opacity-[var(--md-sys-state-pressed)]",
+  "data-[pressed]:before:opacity-[var(--md-sys-state-pressed)]",
+  "focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary",
+  "disabled:pointer-events-none disabled:before:opacity-0",
+  "data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0"
+];
+var VARIANT_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"
+];
+var VARIANT_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"
+];
+var VARIANT_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"
+];
+var VARIANT_ELEVATED = [
+  "bg-surface-container-low text-primary shadow-level1",
+  "disabled:bg-on-surface/12 disabled:text-on-surface/38 disabled:shadow-none",
+  "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38 data-[disabled]:shadow-none"
+];
+var VARIANT_TEXT = [
+  "bg-transparent text-primary",
+  "disabled:text-on-surface/38",
+  "data-[disabled]:text-on-surface/38"
+];
+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"],
+    // trailing: seam (start) corner reduced, outer (end) corner full.
+    trailing: [...surface, "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"
+    ],
+    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"
+    ],
+    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",
+      "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)]",
+      "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none"
+    ]
+  },
+  variants: {
+    variant: {
+      filled: { leading: VARIANT_FILLED, trailing: VARIANT_FILLED },
+      tonal: { leading: VARIANT_TONAL, trailing: VARIANT_TONAL },
+      outlined: { leading: VARIANT_OUTLINED, trailing: VARIANT_OUTLINED },
+      elevated: { leading: VARIANT_ELEVATED, trailing: VARIANT_ELEVATED },
+      text: { leading: VARIANT_TEXT, trailing: VARIANT_TEXT }
+    }
+  },
+  defaultVariants: {
+    variant: "filled"
+  }
+});
+var SplitButton = createSplitButton({
+  group: splitButtonTv().group(),
+  leading: (variant) => splitButtonTv({ variant }).leading(),
+  trailing: (variant) => splitButtonTv({ variant }).trailing(),
+  chevron: splitButtonTv().chevron(),
+  popup: splitButtonTv().popup(),
+  item: splitButtonTv().item()
+});
 var navigationDrawerTv = tv7({
   slots: {
     root: "flex flex-col gap-1 box-border w-[360px] p-3 bg-surface-container-low text-on-surface",
@@ -1182,7 +1359,473 @@ var NavigationDrawer = createNavigationDrawer({
   label: s8.label(),
   trailing: s8.trailing()
 });
+var topAppBarTv = tv7({
+  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",
+    leading: "flex items-center shrink-0 text-on-surface [&_svg]:size-6",
+    headline: "min-w-0 truncate text-on-surface",
+    trailing: "flex items-center gap-1 shrink-0 text-on-surface-variant [&_svg]:size-6"
+  },
+  variants: {
+    variant: {
+      small: { headline: "flex-1 px-3 text-title-large" },
+      center: { headline: "flex-1 px-3 text-center text-title-large" },
+      medium: { root: "h-28", headline: "px-4 pb-6 text-headline-small" },
+      large: { root: "h-38", headline: "px-4 pb-7 text-headline-medium" }
+    }
+  },
+  defaultVariants: {
+    variant: "small"
+  }
+});
+var TopAppBar = createTopAppBar((args) => {
+  const s14 = topAppBarTv({ variant: args.variant });
+  return {
+    root: s14.root(),
+    row: s14.row(),
+    leading: s14.leading(),
+    headline: s14.headline(),
+    trailing: s14.trailing()
+  };
+});
+var bottomAppBarTv = tv7({
+  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",
+    fab: "flex items-center pr-3"
+  }
+});
+var s9 = bottomAppBarTv();
+var BottomAppBar = createBottomAppBar({
+  root: s9.root(),
+  actions: s9.actions(),
+  fab: s9.fab()
+});
+var navigationRailTv = tv7({
+  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",
+    item: [
+      "group relative flex flex-col items-center justify-center gap-1 px-1 py-1",
+      "bg-transparent border-0 cursor-pointer select-none outline-none",
+      // M3 disabled is per-token (icon + label dimmed below), not a blanket fade.
+      "data-[disabled]:pointer-events-none"
+    ],
+    iconWrap: "relative flex items-center justify-center w-14 h-8",
+    indicator: [
+      "absolute inset-0 rounded-full bg-transparent overflow-hidden",
+      "transition-colors duration-150 ease-standard",
+      "group-data-[pressed]:bg-secondary-container",
+      "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
+      "group-hover:before:opacity-[var(--md-sys-state-hover)]",
+      "group-focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+      "group-active:before:opacity-[var(--md-sys-state-pressed)]",
+      // No state layer on a disabled destination.
+      "group-data-[disabled]:before:opacity-0"
+    ],
+    icon: [
+      "relative flex items-center justify-center text-on-surface-variant",
+      "transition-colors duration-150 ease-standard",
+      // Raw <svg> icons render at 24dp (Material Symbols set their own size).
+      "[&_svg]:size-6",
+      "group-data-[pressed]:text-on-secondary-container",
+      // M3 disabled: icon dims to on-surface/0.38. The item is the only `.group`,
+      // so the disabled+active override tests both attributes on that single
+      // element (see NavigationBar for the rationale).
+      "group-data-[disabled]:text-on-surface/[0.38]",
+      "group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]"
+    ],
+    label: [
+      "text-label-medium text-on-surface-variant",
+      "transition-colors duration-150 ease-standard",
+      "group-data-[pressed]:text-on-surface group-data-[pressed]:font-bold",
+      // M3 disabled: label dims to on-surface/0.38 (same-element override).
+      "group-data-[disabled]:text-on-surface/[0.38]",
+      "group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]"
+    ]
+  }
+});
+var s10 = navigationRailTv();
+var NavigationRail = createNavigationRail({
+  root: s10.root(),
+  header: s10.header(),
+  item: s10.item(),
+  iconWrap: s10.iconWrap(),
+  indicator: s10.indicator(),
+  icon: s10.icon(),
+  label: s10.label()
+});
+var bottomSheetTv = tv7({
+  slots: {
+    backdrop: [
+      "fixed inset-0 z-40 bg-scrim/32",
+      "transition-opacity duration-300 ease-emphasized",
+      "data-[swiping]:transition-none",
+      "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"
+    ],
+    viewport: "fixed inset-0 z-50 flex items-end justify-center",
+    popup: [
+      "box-border w-full max-w-[640px] max-h-[calc(100dvh-56px)]",
+      "overflow-y-auto overscroll-contain touch-auto outline-none",
+      "pb-6 bg-surface-container-low text-on-surface rounded-t-extra-large shadow-level1",
+      "[transform:translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))]",
+      "transition-transform duration-300 ease-emphasized",
+      "data-[swiping]:select-none",
+      "data-[starting-style]:[transform:translateY(100%)] data-[ending-style]:[transform:translateY(100%)]"
+    ],
+    handle: "mx-auto mt-4 mb-2 h-1 w-8 shrink-0 rounded-full bg-on-surface-variant/40",
+    title: ["m-0 px-6 pt-2 text-title-large text-on-surface"],
+    description: ["m-0 px-6 pt-1 text-body-medium text-on-surface-variant"]
+  }
+});
+var s11 = bottomSheetTv();
+var BottomSheet = createBottomSheet({
+  backdrop: s11.backdrop(),
+  viewport: s11.viewport(),
+  popup: s11.popup(),
+  handle: s11.handle(),
+  title: s11.title(),
+  description: s11.description()
+});
+var sideSheetTv = tv7({
+  slots: {
+    backdrop: [
+      "fixed inset-0 z-40 bg-scrim/32",
+      "transition-opacity duration-300 ease-emphasized",
+      "data-[swiping]:transition-none",
+      "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"
+    ],
+    viewport: "fixed inset-0 z-50 flex items-stretch",
+    popup: [
+      "box-border h-full w-[320px] max-w-[calc(100vw-56px)]",
+      "flex flex-col overflow-y-auto overscroll-contain touch-auto outline-none",
+      "bg-surface-container-low text-on-surface",
+      "data-[swipe-direction=right]:ml-auto data-[swipe-direction=left]:mr-auto",
+      "[transform:translateX(var(--drawer-swipe-movement-x))]",
+      "transition-transform duration-300 ease-emphasized",
+      "data-[swiping]:select-none",
+      "data-[swipe-direction=right]:data-[starting-style]:[transform:translateX(100%)]",
+      "data-[swipe-direction=right]:data-[ending-style]:[transform:translateX(100%)]",
+      "data-[swipe-direction=left]:data-[starting-style]:[transform:translateX(-100%)]",
+      "data-[swipe-direction=left]:data-[ending-style]:[transform:translateX(-100%)]"
+    ],
+    header: "flex items-center gap-2 min-h-14 px-4 py-2",
+    title: ["flex-1 m-0 text-title-large text-on-surface"],
+    description: ["m-0 px-6 pb-4 text-body-medium text-on-surface-variant"],
+    close: "inline-flex shrink-0"
+  },
+  variants: {
+    variant: {
+      modal: {
+        popup: [
+          "shadow-level1",
+          "data-[swipe-direction=right]:rounded-s-large data-[swipe-direction=left]:rounded-e-large"
+        ]
+      },
+      standard: { popup: "shadow-none" }
+    }
+  },
+  defaultVariants: {
+    variant: "modal"
+  }
+});
+var s12 = sideSheetTv();
+var SideSheet = createSideSheet({
+  backdrop: s12.backdrop(),
+  viewport: s12.viewport(),
+  popup: ({ variant }) => sideSheetTv({ variant }).popup(),
+  header: s12.header(),
+  title: s12.title(),
+  description: s12.description(),
+  close: s12.close()
+});
+var searchTv = tv7({
+  slots: {
+    bar: [
+      "flex items-center gap-1 h-14 min-w-[360px] max-w-full pl-4 pr-2",
+      "bg-surface-container-high text-on-surface rounded-full",
+      "transition-shadow duration-150 ease-standard",
+      "focus-within:shadow-level1"
+    ],
+    icon: [
+      "inline-flex shrink-0 items-center justify-center text-on-surface-variant",
+      "[&>svg]:size-6"
+    ],
+    input: [
+      "flex-1 min-w-0 h-full bg-transparent border-0 outline-none",
+      "text-body-large text-on-surface placeholder:text-on-surface-variant"
+    ],
+    clear: [
+      "relative inline-flex shrink-0 items-center justify-center size-10 rounded-full overflow-hidden",
+      "text-on-surface-variant cursor-pointer outline-none [&>svg]:size-6",
+      "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)]",
+      "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]"
+    ],
+    popup: [
+      "w-[var(--anchor-width)] min-w-[360px] max-h-[min(72vh,480px)] overflow-y-auto py-2",
+      "bg-surface-container-high text-on-surface rounded-large shadow-level3",
+      "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"
+    ],
+    list: ["outline-none"],
+    item: [
+      "group relative grid grid-cols-[24px_1fr_24px] items-center gap-4 h-14 px-4 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)]",
+      "data-[selected]:before:opacity-[var(--md-sys-state-pressed)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]",
+      "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none",
+      "[&_[data-slot=search-leading]]:inline-flex [&_[data-slot=search-leading]]:text-on-surface-variant [&_[data-slot=search-leading]>svg]:size-6"
+    ],
+    itemIndicator: [
+      "inline-flex items-center justify-center text-on-surface",
+      "invisible group-data-[selected]:visible"
+    ],
+    empty: ["px-4 py-3 text-body-medium text-on-surface-variant"],
+    separator: ["my-2 h-px border-0 bg-outline-variant"],
+    groupLabel: ["px-4 py-2 text-label-small text-on-surface-variant"]
+  }
+});
+var s13 = searchTv();
+var Search = createSearch({
+  bar: s13.bar(),
+  icon: s13.icon(),
+  input: s13.input(),
+  clear: s13.clear(),
+  popup: s13.popup(),
+  list: s13.list(),
+  item: s13.item(),
+  itemIndicator: s13.itemIndicator(),
+  empty: s13.empty(),
+  separator: s13.separator(),
+  groupLabel: s13.groupLabel()
+});
+var datePickerTv = tv7({
+  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"],
+    navButton: [
+      "relative inline-flex items-center justify-center size-10 rounded-full overflow-hidden",
+      "text-on-surface-variant cursor-pointer outline-none [&>svg]:size-6",
+      "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)]",
+      "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]",
+      "disabled:text-on-surface/[0.38] disabled:before:opacity-0 disabled:pointer-events-none"
+    ],
+    monthLabel: [
+      "relative inline-flex items-center gap-1 h-9 px-3 rounded-full overflow-hidden",
+      "text-label-large text-on-surface-variant cursor-pointer outline-none",
+      "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)]",
+      "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+      "[&>svg]:transition-transform data-[view=years]:[&>svg]:rotate-180"
+    ],
+    grid: ["mt-2 border-collapse", "[&_td]:p-0 [&_td]:text-center"],
+    weekdays: [""],
+    weekday: ["size-12 font-normal text-body-large text-on-surface-variant"],
+    day: [
+      "relative inline-flex items-center justify-center size-12 rounded-full overflow-hidden",
+      "text-body-large text-on-surface cursor-pointer outline-none",
+      "before:absolute before:inset-0 before:rounded-full 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)]",
+      // today: 1px primary outline ring
+      "data-[today]:ring-1 data-[today]:ring-inset data-[today]:ring-primary",
+      // selected: primary fill, on-primary label, no state layer tint shift
+      "data-[selected]:bg-primary data-[selected]:text-on-primary",
+      "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none"
+    ],
+    // weeks render as 7-col rows; force grid layout on each row
+    yearGrid: ["grid grid-cols-3 gap-2 max-h-[280px] overflow-y-auto px-3 py-2"],
+    yearButton: [
+      "relative inline-flex items-center justify-center h-9 rounded-full overflow-hidden",
+      "text-label-large text-on-surface-variant cursor-pointer outline-none",
+      "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)]",
+      "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+      "data-[selected]:bg-primary data-[selected]:text-on-primary"
+    ],
+    field: [
+      "inline-flex items-center gap-1 h-14 pl-4 pr-1 min-w-[200px]",
+      "bg-surface-container-highest text-on-surface rounded-t-extra-small",
+      "border-b border-on-surface-variant"
+    ],
+    input: [
+      "flex-1 min-w-0 h-full bg-transparent border-0 outline-none",
+      "text-body-large text-on-surface placeholder:text-on-surface-variant"
+    ],
+    fieldIcon: [
+      "relative inline-flex items-center justify-center size-10 rounded-full overflow-hidden",
+      "text-on-surface-variant cursor-pointer outline-none [&>svg]:size-6",
+      "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)]",
+      "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]"
+    ],
+    popup: [
+      "bg-surface-container-high text-on-surface rounded-large 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"
+    ],
+    modalBackdrop: [
+      "fixed inset-0 z-40 bg-scrim/32",
+      "transition-opacity duration-200 ease-standard",
+      "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"
+    ],
+    modalPopup: [
+      "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
+      "w-[min(360px,calc(100vw-48px))] max-h-[calc(100vh-48px)] overflow-auto",
+      "bg-surface-container-high text-on-surface rounded-extra-large shadow-level3",
+      "flex flex-col",
+      "origin-[var(--transform-origin)] transition-[opacity,transform] duration-200 ease-emphasized",
+      "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
+      "data-[ending-style]:opacity-0 data-[ending-style]:scale-95",
+      "focus:outline-none"
+    ],
+    modalHeader: ["px-6 pt-4 text-label-medium text-on-surface-variant m-0"],
+    modalHeadline: ["px-6 pt-1 pb-4 text-headline-large text-on-surface m-0"],
+    modalActions: ["flex justify-end gap-2 px-6 pb-4 pt-2"]
+  }
+});
+var dp = datePickerTv();
+var DatePicker = createDatePicker({
+  calendar: dp.calendar(),
+  header: dp.header(),
+  navButton: dp.navButton(),
+  monthLabel: dp.monthLabel(),
+  grid: dp.grid(),
+  weekdays: dp.weekdays(),
+  weekday: dp.weekday(),
+  day: dp.day(),
+  yearGrid: dp.yearGrid(),
+  yearButton: dp.yearButton(),
+  field: dp.field(),
+  input: dp.input(),
+  fieldIcon: dp.fieldIcon(),
+  popup: dp.popup(),
+  modalBackdrop: dp.modalBackdrop(),
+  modalPopup: dp.modalPopup(),
+  modalHeader: dp.modalHeader(),
+  modalHeadline: dp.modalHeadline(),
+  modalActions: dp.modalActions()
+});
+var timePickerTv = tv7({
+  slots: {
+    root: ["inline-flex flex-col items-center gap-2 p-2 text-on-surface"],
+    header: ["flex items-center gap-2"],
+    field: [
+      "inline-grid place-items-center w-24 h-20 rounded-small overflow-hidden 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"],
+    periods: [
+      "inline-flex flex-col rounded-small overflow-hidden border border-outline self-stretch",
+      "m-0 p-0 min-w-0"
+    ],
+    period: [
+      "flex-1 inline-flex items-center justify-center px-3 min-h-[38px] w-14",
+      "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"
+    ],
+    dialNumber: [
+      "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",
+      "data-[selected]:bg-primary data-[selected]:text-on-primary"
+    ],
+    dialHand: [
+      "absolute left-1/2 top-[12%] h-[38%] w-0.5 origin-bottom bg-primary -translate-x-1/2 pointer-events-none"
+    ],
+    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"],
+    inputBox: [
+      "w-24 h-20 rounded-small box-border text-center",
+      "bg-surface-container-highest text-on-surface text-display-large outline-none",
+      "border border-outline focus:border-2 focus:border-primary",
+      "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+    ],
+    inputCaption: ["block mt-1 text-body-small text-on-surface-variant"]
+  }
+});
+var tp = timePickerTv();
+var TimePicker = createTimePicker(() => ({
+  root: tp.root(),
+  header: tp.header(),
+  field: tp.field(),
+  colon: tp.colon(),
+  periods: tp.periods(),
+  period: tp.period(),
+  dial: tp.dial(),
+  dialNumber: tp.dialNumber(),
+  dialHand: tp.dialHand(),
+  dialCenter: tp.dialCenter(),
+  inputs: tp.inputs(),
+  inputBox: tp.inputBox(),
+  inputCaption: tp.inputCaption()
+}));
+var toolbarTv = tv7({
+  base: "inline-flex items-center justify-center gap-1 box-border rounded-full shadow-level3 [&_svg]:size-6",
+  variants: {
+    variant: {
+      standard: "bg-surface-container text-on-surface-variant",
+      vibrant: "bg-primary-container text-on-primary-container [&_button]:text-on-primary-container [&_a]:text-on-primary-container"
+    },
+    orientation: {
+      horizontal: "flex-row h-16 px-2",
+      vertical: "flex-col w-16 py-2"
+    }
+  },
+  defaultVariants: { variant: "standard", orientation: "horizontal" }
+});
+var Toolbar = createToolbar(
+  ({ variant, orientation }) => toolbarTv({ variant, orientation })
+);
+var carouselTv = tv7({
+  slots: {
+    root: [
+      "flex gap-2 overflow-x-auto snap-x snap-mandatory scroll-smooth",
+      "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+    ],
+    item: "snap-start shrink-0 overflow-hidden rounded-large"
+  },
+  variants: {
+    variant: {
+      "multi-browse": { item: "w-40 h-56" },
+      hero: { item: "w-72 h-56 snap-center" },
+      "full-screen": {
+        // gap-0: full-screen slides fill the viewport with no inter-slide gap.
+        root: "flex-col gap-0 overflow-x-hidden overflow-y-auto snap-y h-full",
+        item: "w-full h-full snap-center"
+      }
+    }
+  },
+  defaultVariants: { variant: "multi-browse" }
+});
+var Carousel = createCarousel((variant) => {
+  const s14 = carouselTv({ variant });
+  return { root: s14.root(), item: s14.item() };
+});
 
-export { Badge, Button, Card, Checkbox, Chip, Dialog, Divider, Fab, IconButton, Item, List, Menu, NavigationBar, NavigationDrawer, Progress, Radio, RadioGroup, SegmentedButton, Select, Slider, Snackbar, Switch, Tabs, TextField, Tooltip, badgeTv, button, cardTv, checkboxTv, chipTv, circularTv, dialogTv, dividerTv, fabTv, iconButton, itemTv, linearTv, listTv, menuTv, navigationBarTv, navigationDrawerTv, radioTv, segmentedButtonTv, selectTv, sliderTv, snackbarTv, switchTv, tabsTv, textFieldTv, tooltipTv };
+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, 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, searchTv, segmentedButtonTv, selectTv, sideSheetTv, sliderTv, snackbarTv, splitButtonTv, switchTv, tabsTv, textFieldTv, timePickerTv, toolbarTv, tooltipTv, topAppBarTv };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map