@m3-baseui/react-tailwind 3.0.0 → 5.0.0

package/dist/components/icon-button/index.js

@@ -1,6 +1,47 @@
 "use client";
-import { createIconButton } from '@m3-baseui/core';
-import { tv } from 'tailwind-variants';
+import { createIconButton, toToggle } from '@m3-baseui/core';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/components/icon-button/icon-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/icon-button/icon-button.ts
 var WIDTHS = {
@@ -22,6 +63,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",
@@ -29,7 +99,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",
@@ -40,14 +112,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",
@@ -55,68 +127,93 @@ 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) })
 );
 
 export { IconButton, iconButton };

package/dist/components/icon-button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/icon-button/icon-button.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * icon-button.ts — tailwind-variants resolver for the M3 Icon Button.\n *\n * 40×40 circular target with a centered icon. The `selected` variant supports\n * toggle icon buttons; when `selected` is undefined the variant's default\n * (filled/active) look is used. Emits the same DOM + ripple as the VE build.\n */\nimport { createIconButton } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\n// M3 Expressive container widths (px) per size × width. Tailwind v4's dynamic\n// spacing scale resolves any integer (e.g. w-13 = 52px, w-46 = 184px).\nconst WIDTHS = {\n  xs: { narrow: 'w-7', default: 'w-8', wide: 'w-10' }, // 28 / 32 / 40\n  s: { narrow: 'w-8', default: 'w-10', wide: 'w-13' }, // 32 / 40 / 52\n  m: { narrow: 'w-12', default: 'w-14', wide: 'w-18' }, // 48 / 56 / 72\n  l: { narrow: 'w-16', default: 'w-24', wide: 'w-32' }, // 64 / 96 / 128\n  xl: { narrow: 'w-26', default: 'w-34', wide: 'w-46' }, // 104 / 136 / 184\n} as const;\n\nconst widthCompounds = Object.entries(WIDTHS).flatMap(([size, w]) =>\n  Object.entries(w).map(([width, klass]) => ({\n    size: size as keyof typeof WIDTHS,\n    width: width as 'narrow' | 'default' | 'wide',\n    class: klass,\n  })),\n);\n\nexport const iconButton = tv({\n  base: [\n    'relative inline-flex items-center justify-center shrink-0',\n    // No `overflow-hidden`: it would clip the 48dp touch target on small sizes.\n    // The state layer is already rounded (before:rounded-[inherit]); the ripple\n    // self-clips.\n    'rounded-full cursor-pointer select-none border-0 bg-transparent',\n    'transition-[box-shadow,background-color,color] duration-200 ease-standard',\n    // State layer overlay\n    'before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none',\n    'before:transition-opacity before:duration-100',\n    'hover:before:opacity-[var(--md-sys-state-hover)]',\n    'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n    'active:before:opacity-[var(--md-sys-state-pressed)]',\n    'data-[pressed]:before:opacity-[var(--md-sys-state-pressed)]',\n    // Focus ring (M3: 3px secondary, 2px offset)\n    'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n    // Disabled: no interaction, no state layer. Per-variant disabled colors\n    // (container on-surface/12, icon on-surface/38) live on each variant.\n    'disabled:pointer-events-none disabled:before:opacity-0',\n    'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n  ],\n  variants: {\n    // Disabled icon is on-surface/38 for every variant; filled/tonal disabled\n    // container is on-surface/12; outlined disabled outline is on-surface/12\n    // (material-web parity).\n    variant: {\n      standard: [\n        'text-on-surface-variant',\n        'disabled:text-on-surface/38 data-[disabled]:text-on-surface/38',\n      ],\n      filled: [\n        'bg-primary text-on-primary',\n        'disabled:bg-on-surface/12 disabled:text-on-surface/38',\n        'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38',\n      ],\n      tonal: [\n        'bg-secondary-container text-on-secondary-container',\n        'disabled:bg-on-surface/12 disabled:text-on-surface/38',\n        'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38',\n      ],\n      outlined: [\n        'border border-outline text-on-surface-variant',\n        'disabled:border-on-surface/12 disabled:text-on-surface/38',\n        'data-[disabled]:border-on-surface/12 data-[disabled]:text-on-surface/38',\n      ],\n    },\n    selected: {\n      true: '',\n      false: '',\n    },\n    // Container height + icon size per M3 Expressive size. Width comes from the\n    // (size, width) compound variants below.\n    size: {\n      xs: 'h-8 [&>svg]:size-5',\n      s: 'h-10 [&>svg]:size-6',\n      m: 'h-14 [&>svg]:size-6',\n      l: 'h-24 [&>svg]:size-8',\n      xl: 'h-[136px] [&>svg]:size-10',\n    },\n    width: {\n      narrow: '',\n      default: '',\n      wide: '',\n    },\n  },\n  compoundVariants: [\n    ...widthCompounds,\n    { variant: 'standard', selected: true, class: 'text-primary' },\n    { variant: 'filled', selected: false, class: 'bg-surface-container-highest text-primary' },\n    {\n      variant: 'tonal',\n      selected: false,\n      class: 'bg-surface-container-highest text-on-surface-variant',\n    },\n    {\n      variant: 'outlined',\n      selected: true,\n      class: [\n        'bg-inverse-surface text-inverse-on-surface border-transparent',\n        // M3 disabled + selected: faint on-surface/12 container, no outline\n        // (icon falls back to on-surface/38 from the variant). NOT transparent.\n        'disabled:bg-on-surface/12 disabled:border-transparent',\n        'data-[disabled]:bg-on-surface/12 data-[disabled]:border-transparent',\n      ],\n    },\n  ],\n  defaultVariants: {\n    variant: 'standard',\n    size: 's',\n    width: 'default',\n  },\n});\n\nexport const IconButton = createIconButton(({ variant, selected, size, width }) =>\n  iconButton({ variant, selected, size, width }),\n);\nexport type { IconButtonProps, IconButtonVariant } from '@m3-baseui/core';\n"]}
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/icon-button/icon-button.ts"],"names":["baseTv"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * tv.ts — a tailwind-variants factory pre-configured for the M3 typescale and\n * shape scale.\n *\n * The Tailwind v4 preset exposes the 15 typescale roles as `text-<role>`\n * font-size utilities (e.g. `text-body-small`, `text-label-large`) and the\n * shape scale as `rounded-<role>` border-radius utilities (e.g. `rounded-small`,\n * `rounded-extra-large`). Stock tailwind-merge does not know these custom names,\n * so it (a) groups the typescale names with `text-<color>` and drops one when a\n * slot sets both a color *and* a typescale, and (b) fails to see two custom\n * `rounded-<role>` classes as conflicting, so a later corner override never\n * dedupes the resting one (both survive, and CSS source order — not intent —\n * decides). Either way token compliance / shape morph silently breaks.\n *\n * Teaching tailwind-merge that the typescale names belong to `font-size` and the\n * shape names belong to `rounded` keeps color and type independent and makes the\n * corner utilities override one another as expected.\n */\nimport { type TV, tv as baseTv } from 'tailwind-variants';\n\nconst TYPESCALE = [\n  'display-large',\n  'display-medium',\n  'display-small',\n  'headline-large',\n  'headline-medium',\n  'headline-small',\n  'title-large',\n  'title-medium',\n  'title-small',\n  'body-large',\n  'body-medium',\n  'body-small',\n  'label-large',\n  'label-medium',\n  'label-small',\n] as const;\n\n// M3 shape scale exposed as `rounded-<role>` (see @m3-baseui/tokens theme.css\n// `--radius-*`). `none` / `full` overlap stock Tailwind and are harmless to\n// re-list; the intermediate roles are what stock tailwind-merge misses.\nconst SHAPE = [\n  'none',\n  'extra-small',\n  'small',\n  'medium',\n  'large',\n  'large-increased',\n  'extra-large',\n  'extra-large-increased',\n  'full',\n] as const;\n\nexport const tv: TV = (options, config) =>\n  baseTv(options, {\n    ...config,\n    twMergeConfig: {\n      extend: {\n        classGroups: {\n          'font-size': [{ text: [...TYPESCALE] }],\n          rounded: [{ rounded: [...SHAPE] }],\n        },\n      },\n    },\n  });\n","/**\n * icon-button.ts — tailwind-variants resolver for the M3 (Expressive) Icon Button.\n *\n * Emits the same DOM + `data-*` state as the vanilla-extract build (drop-in\n * compatible); only the class strings differ. The `rounded-<role>` corner\n * utilities come from the Tailwind v4 `@theme` preset in\n * `@m3-baseui/tokens/theme.css`; the configured `tv` helper teaches\n * tailwind-merge to dedupe them so a morph override drops the resting corner.\n *\n * M3 Expressive: five sizes (XS 32 → XL 136 dp) drive height / icon size and\n * (with `width`) the container width; `shape` picks the resting corner\n * (round=full circle vs a size-specific square), the corner morphs smaller on\n * press, and toggle buttons (`selected`) swap to the opposite shape\n * (round↔square) plus the Selected/Unselected color set.\n */\nimport { createIconButton, toToggle } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\n// M3 Expressive container widths (px) per size × width. Tailwind v4's dynamic\n// spacing scale resolves any integer (e.g. w-13 = 52px, w-46 = 184px).\nconst WIDTHS = {\n  xs: { narrow: 'w-7', default: 'w-8', wide: 'w-10' }, // 28 / 32 / 40\n  s: { narrow: 'w-8', default: 'w-10', wide: 'w-13' }, // 32 / 40 / 52\n  m: { narrow: 'w-12', default: 'w-14', wide: 'w-18' }, // 48 / 56 / 72\n  l: { narrow: 'w-16', default: 'w-24', wide: 'w-32' }, // 64 / 96 / 128\n  xl: { narrow: 'w-26', default: 'w-34', wide: 'w-46' }, // 104 / 136 / 184\n} as const;\n\nconst widthCompounds = Object.entries(WIDTHS).flatMap(([size, w]) =>\n  Object.entries(w).map(([width, klass]) => ({\n    size: size as keyof typeof WIDTHS,\n    width: width as 'narrow' | 'default' | 'wide',\n    class: klass,\n  })),\n);\n\n// Resting square corner (ContainerShapeSquare) per size bucket.\nconst SQUARE_CORNER = {\n  xs: 'rounded-medium', // 12dp\n  s: 'rounded-medium', // 12dp\n  m: 'rounded-large', // 16dp\n  l: 'rounded-extra-large', // 28dp\n  xl: 'rounded-extra-large', // 28dp\n} as const;\n\n// Resting square corner: `shape: square` maps to the size-specific corner.\nconst squareShapeCompounds = (Object.keys(SQUARE_CORNER) as (keyof typeof SQUARE_CORNER)[]).map(\n  (size) => ({ shape: 'square' as const, size, class: SQUARE_CORNER[size] }),\n);\n\n// Selected shape morph (Expressive's signature behavior). Listed after the\n// resting corner so tailwind-merge keeps these: a selected `round` container\n// morphs to the square corner; a selected `square` container morphs to `full`.\nconst selectedShapeCompounds = [\n  ...(Object.keys(SQUARE_CORNER) as (keyof typeof SQUARE_CORNER)[]).map((size) => ({\n    shape: 'round' as const,\n    toggle: 'on' as const,\n    size,\n    class: SQUARE_CORNER[size],\n  })),\n  ...(Object.keys(SQUARE_CORNER) as (keyof typeof SQUARE_CORNER)[]).map((size) => ({\n    shape: 'square' as const,\n    toggle: 'on' as const,\n    size,\n    class: 'rounded-full',\n  })),\n];\n\nexport const iconButton = tv({\n  base: [\n    'relative inline-flex items-center justify-center shrink-0',\n    // No `overflow-hidden`: it would clip the 48dp touch target on small sizes.\n    // The state layer is already rounded (before:rounded-[inherit]); the ripple\n    // self-clips.\n    'rounded-full cursor-pointer select-none border-0 bg-transparent',\n    // Motion: Compose uses DefaultEffects (critically-damped spring, no bounce)\n    // for the shape/color transitions — spring-effects-default here.\n    'transition-[box-shadow,background-color,color,border-color,border-radius] duration-200 ease-spring-effects-default',\n    // State layer overlay\n    'before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none',\n    'before:transition-opacity before:duration-100',\n    'hover:before:opacity-[var(--md-sys-state-hover)]',\n    'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n    'active:before:opacity-[var(--md-sys-state-pressed)]',\n    'data-[pressed]:before:opacity-[var(--md-sys-state-pressed)]',\n    // Focus ring (M3: 3px secondary, 2px offset)\n    'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n    // Disabled: no interaction, no state layer. Per-variant disabled colors\n    // (container on-surface/10, icon on-surface/38) live on each variant.\n    'disabled:pointer-events-none disabled:before:opacity-0',\n    'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n  ],\n  variants: {\n    // Disabled icon is on-surface/38 for every variant; filled/tonal disabled\n    // container is on-surface/10 (DisabledContainerOpacity); outlined disabled\n    // outline stays outline-variant (Expressive DisabledOutlineColor).\n    variant: {\n      standard: [\n        'text-on-surface-variant',\n        'disabled:text-on-surface/38 data-[disabled]:text-on-surface/38',\n      ],\n      filled: [\n        'bg-primary text-on-primary',\n        'disabled:bg-on-surface/10 disabled:text-on-surface/38',\n        'data-[disabled]:bg-on-surface/10 data-[disabled]:text-on-surface/38',\n      ],\n      tonal: [\n        'bg-secondary-container text-on-secondary-container',\n        'disabled:bg-on-surface/10 disabled:text-on-surface/38',\n        'data-[disabled]:bg-on-surface/10 data-[disabled]:text-on-surface/38',\n      ],\n      outlined: [\n        'border border-outline-variant text-on-surface-variant',\n        'disabled:border-outline-variant disabled:text-on-surface/38',\n        'data-[disabled]:border-outline-variant data-[disabled]:text-on-surface/38',\n      ],\n    },\n    // Toggle state, string-keyed so a plain (non-toggle) button — `toggle`\n    // unset — fires neither compound below (a boolean variant would default to\n    // `off` in tailwind-variants and wrongly apply the unselected look).\n    toggle: {\n      on: '',\n      off: '',\n    },\n    // Container height + icon size per M3 Expressive size. Width comes from the\n    // (size, width) compound variants below. The pressed corner morph\n    // (PressedContainerShape: XS·S small 8 / M medium 12 / L·XL large 16) rides\n    // on data-[pressed]/active so its attribute-selector specificity wins over\n    // the resting `rounded-*`.\n    size: {\n      xs: 'h-8 [&>svg]:size-5 data-[pressed]:rounded-small active:rounded-small',\n      s: 'h-10 [&>svg]:size-6 data-[pressed]:rounded-small active:rounded-small',\n      m: 'h-14 [&>svg]:size-6 data-[pressed]:rounded-medium active:rounded-medium',\n      l: 'h-24 [&>svg]:size-8 data-[pressed]:rounded-large active:rounded-large',\n      xl: 'h-[136px] [&>svg]:size-10 data-[pressed]:rounded-large active:rounded-large',\n    },\n    width: {\n      narrow: '',\n      default: '',\n      wide: '',\n    },\n    // round = full circle; the square corner is size-specific (compounds below).\n    shape: {\n      round: 'rounded-full',\n      square: '',\n    },\n  },\n  compoundVariants: [\n    ...widthCompounds,\n    ...squareShapeCompounds,\n    ...selectedShapeCompounds,\n    // ---- Outlined border width (OutlinedOutlineWidth: L 2 / XL 3 dp) ------\n    { variant: 'outlined', size: 'l', class: 'border-2' },\n    { variant: 'outlined', size: 'xl', class: 'border-[3px]' },\n    // ---- Toggle colors (Selected*/Unselected* tokens) ---------------------\n    // standard: unselected = on-surface-variant (base); selected = primary.\n    { variant: 'standard', toggle: 'on', class: 'text-primary' },\n    // filled: base = default & selected look (primary/on-primary); unselected =\n    // surface-container + on-surface-variant (was surface-container-highest+primary).\n    {\n      variant: 'filled',\n      toggle: 'off',\n      class: 'bg-surface-container text-on-surface-variant',\n    },\n    // tonal: base = default & unselected look (secondary-container); selected =\n    // secondary + on-secondary (was left at the variant default — the \"selection\n    // not visible\" bug this issue fixes).\n    { variant: 'tonal', toggle: 'on', class: 'bg-secondary text-on-secondary' },\n    // outlined: selected fills with the inverse surface (base = unselected).\n    {\n      variant: 'outlined',\n      toggle: 'on',\n      class: [\n        'bg-inverse-surface text-inverse-on-surface border-transparent',\n        // M3 disabled + selected: faint on-surface/10 container, no outline\n        // (icon falls back to on-surface/38 from the variant). NOT transparent.\n        'disabled:bg-on-surface/10 disabled:border-transparent',\n        'data-[disabled]:bg-on-surface/10 data-[disabled]:border-transparent',\n      ],\n    },\n  ],\n  defaultVariants: {\n    variant: 'standard',\n    size: 's',\n    width: 'default',\n    shape: 'round',\n  },\n});\n\nexport const IconButton = createIconButton(({ variant, selected, size, width, shape }) =>\n  iconButton({ variant, size, width, shape, toggle: toToggle(selected) }),\n);\nexport type {\n  IconButtonProps,\n  IconButtonVariant,\n  IconButtonSize,\n  IconButtonWidth,\n  IconButtonShape,\n} from '@m3-baseui/core';\n"]}

package/dist/components/item/index.d.ts

@@ -9,9 +9,9 @@ declare const itemTv: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_merge.ClassNameValue | {
             content?: tailwind_merge.ClassNameValue;
+            overline?: tailwind_merge.ClassNameValue;
             leading?: tailwind_merge.ClassNameValue;
             trailing?: tailwind_merge.ClassNameValue;
-            overline?: tailwind_merge.ClassNameValue;
             supporting?: tailwind_merge.ClassNameValue;
             root?: tailwind_merge.ClassNameValue;
             headline?: tailwind_merge.ClassNameValue;
@@ -21,9 +21,9 @@ declare const itemTv: tailwind_variants.TVReturnType<{
     [x: string]: {
         [x: string]: tailwind_merge.ClassNameValue | {
             content?: tailwind_merge.ClassNameValue;
+            overline?: tailwind_merge.ClassNameValue;
             leading?: tailwind_merge.ClassNameValue;
             trailing?: tailwind_merge.ClassNameValue;
-            overline?: tailwind_merge.ClassNameValue;
             supporting?: tailwind_merge.ClassNameValue;
             root?: tailwind_merge.ClassNameValue;
             headline?: tailwind_merge.ClassNameValue;
@@ -41,9 +41,9 @@ declare const itemTv: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_merge.ClassNameValue | {
             content?: tailwind_merge.ClassNameValue;
+            overline?: tailwind_merge.ClassNameValue;
             leading?: tailwind_merge.ClassNameValue;
             trailing?: tailwind_merge.ClassNameValue;
-            overline?: tailwind_merge.ClassNameValue;
             supporting?: tailwind_merge.ClassNameValue;
             root?: tailwind_merge.ClassNameValue;
             headline?: tailwind_merge.ClassNameValue;
@@ -53,9 +53,9 @@ declare const itemTv: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_merge.ClassNameValue | {
             content?: tailwind_merge.ClassNameValue;
+            overline?: tailwind_merge.ClassNameValue;
             leading?: tailwind_merge.ClassNameValue;
             trailing?: tailwind_merge.ClassNameValue;
-            overline?: tailwind_merge.ClassNameValue;
             supporting?: tailwind_merge.ClassNameValue;
             root?: tailwind_merge.ClassNameValue;
             headline?: tailwind_merge.ClassNameValue;
@@ -81,9 +81,9 @@ declare const itemTv: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_merge.ClassNameValue | {
             content?: tailwind_merge.ClassNameValue;
+            overline?: tailwind_merge.ClassNameValue;
             leading?: tailwind_merge.ClassNameValue;
             trailing?: tailwind_merge.ClassNameValue;
-            overline?: tailwind_merge.ClassNameValue;
             supporting?: tailwind_merge.ClassNameValue;
             root?: tailwind_merge.ClassNameValue;
             headline?: tailwind_merge.ClassNameValue;

package/dist/components/item/index.js

@@ -21,12 +21,24 @@ var TYPESCALE = [
   "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] }]
+        "font-size": [{ text: [...TYPESCALE] }],
+        rounded: [{ rounded: [...SHAPE] }]
       }
     }
   }

package/dist/components/item/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/tv.ts","../../../src/components/item/item.ts"],"names":["baseTv"],"mappings":";;;;;;AAeA,IAAM,SAAA,GAAY;AAAA,EAChB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,EAAA,GAAS,CAAC,OAAA,EAAS,MAAA,KAC9BA,KAAO,OAAA,EAAS;AAAA,EACd,GAAG,MAAA;AAAA,EACH,aAAA,EAAe;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa;AAAA,QACX,WAAA,EAAa,CAAC,EAAE,IAAA,EAAM,CAAC,GAAG,SAAS,GAAG;AAAA;AACxC;AACF;AAEJ,CAAC,CAAA;AChCI,IAAM,SAAS,EAAA,CAAG;AAAA,EACvB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,iFAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA,EAAS;AAAA,MACP,mFAAA;AAAA,MACA,uDAAA;AAAA;AAAA,MAEA,kEAAA;AAAA,MACA,8BAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA,EAAS,8BAAA;AAAA,IACT,QAAA,EAAU,0CAAA;AAAA,IACV,QAAA,EAAU,iCAAA;AAAA,IACV,UAAA,EAAY,0CAAA;AAAA,IACZ,QAAA,EAAU;AAAA;AAEd,CAAC;AAED,IAAM,IAAI,MAAA,EAAO;AACV,IAAM,OAAO,UAAA,CAAW;AAAA,EAC7B,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,UAAA,EAAY,EAAE,UAAA,EAAW;AAAA,EACzB,QAAA,EAAU,EAAE,QAAA;AACd,CAAC","file":"index.js","sourcesContent":["/**\n * tv.ts — a tailwind-variants factory pre-configured for the M3 typescale.\n *\n * The Tailwind v4 preset exposes the 15 typescale roles as `text-<role>`\n * font-size utilities (e.g. `text-body-small`, `text-label-large`). Stock\n * tailwind-merge does not know these custom names, so it groups them with the\n * `text-<color>` utilities and drops one when a slot sets both a color *and* a\n * typescale (the common M3 case). That silently strips either the color or the\n * type, breaking token compliance.\n *\n * Teaching tailwind-merge that the typescale names belong to the `font-size`\n * group keeps color and type independent, so both survive the merge.\n */\nimport { type TV, tv as baseTv } from 'tailwind-variants';\n\nconst TYPESCALE = [\n  'display-large',\n  'display-medium',\n  'display-small',\n  'headline-large',\n  'headline-medium',\n  'headline-small',\n  'title-large',\n  'title-medium',\n  'title-small',\n  'body-large',\n  'body-medium',\n  'body-small',\n  'label-large',\n  'label-medium',\n  'label-small',\n] as const;\n\nexport const tv: TV = (options, config) =>\n  baseTv(options, {\n    ...config,\n    twMergeConfig: {\n      extend: {\n        classGroups: {\n          'font-size': [{ text: [...TYPESCALE] }],\n        },\n      },\n    },\n  });\n","/**\n * item.ts — tailwind-variants slots for the M3 Item row primitive.\n *\n * The shared row layout: leading slot, overline/headline/supporting column and\n * trailing slot. Headline is `body-large`/`on-surface`, overline `label-small`,\n * supporting `body-medium`, leading/trailing `on-surface-variant`. Inert by\n * design — interactive surfaces wrap it. Same DOM as the VE build.\n */\nimport { createItem } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const itemTv = tv({\n  slots: {\n    root: [\n      'relative flex w-full items-center gap-4 box-border px-4 py-3 min-h-14 text-left',\n      'bg-transparent text-on-surface',\n    ],\n    leading: [\n      'flex items-center justify-center shrink-0 overflow-hidden text-on-surface-variant',\n      '[&_svg]:size-6 [&_img]:size-full [&_img]:object-cover',\n      // M3 leading column widths, keyed on the factory's data-leading attribute.\n      'data-[leading=avatar]:size-10 data-[leading=avatar]:rounded-full',\n      'data-[leading=image]:size-14',\n      'data-[leading=video]:w-25 data-[leading=video]:h-14',\n    ],\n    content: 'flex flex-col min-w-0 flex-1',\n    overline: 'text-label-small text-on-surface-variant',\n    headline: 'text-body-large text-on-surface',\n    supporting: 'text-body-medium text-on-surface-variant',\n    trailing: 'flex items-center shrink-0 text-label-small text-on-surface-variant [&_svg]:size-6',\n  },\n});\n\nconst s = itemTv();\nexport const Item = createItem({\n  root: s.root(),\n  leading: s.leading(),\n  content: s.content(),\n  overline: s.overline(),\n  headline: s.headline(),\n  supporting: s.supporting(),\n  trailing: s.trailing(),\n});\nexport { ITEM_LEADING_VARIANTS } from '@m3-baseui/core';\nexport type { ItemProps, ItemLeadingVariant } from '@m3-baseui/core';\n"]}
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/item/item.ts"],"names":["baseTv"],"mappings":";;;;;;AAoBA,IAAM,SAAA,GAAY;AAAA,EAChB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA;AAKA,IAAM,KAAA,GAAQ;AAAA,EACZ,MAAA;AAAA,EACA,aAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,iBAAA;AAAA,EACA,aAAA;AAAA,EACA,uBAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,EAAA,GAAS,CAAC,OAAA,EAAS,MAAA,KAC9BA,KAAO,OAAA,EAAS;AAAA,EACd,GAAG,MAAA;AAAA,EACH,aAAA,EAAe;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa;AAAA,QACX,WAAA,EAAa,CAAC,EAAE,IAAA,EAAM,CAAC,GAAG,SAAS,GAAG,CAAA;AAAA,QACtC,OAAA,EAAS,CAAC,EAAE,OAAA,EAAS,CAAC,GAAG,KAAK,GAAG;AAAA;AACnC;AACF;AAEJ,CAAC,CAAA;ACrDI,IAAM,SAAS,EAAA,CAAG;AAAA,EACvB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,iFAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA,EAAS;AAAA,MACP,mFAAA;AAAA,MACA,uDAAA;AAAA;AAAA,MAEA,kEAAA;AAAA,MACA,8BAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA,EAAS,8BAAA;AAAA,IACT,QAAA,EAAU,0CAAA;AAAA,IACV,QAAA,EAAU,iCAAA;AAAA,IACV,UAAA,EAAY,0CAAA;AAAA,IACZ,QAAA,EAAU;AAAA;AAEd,CAAC;AAED,IAAM,IAAI,MAAA,EAAO;AACV,IAAM,OAAO,UAAA,CAAW;AAAA,EAC7B,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,UAAA,EAAY,EAAE,UAAA,EAAW;AAAA,EACzB,QAAA,EAAU,EAAE,QAAA;AACd,CAAC","file":"index.js","sourcesContent":["/**\n * tv.ts — a tailwind-variants factory pre-configured for the M3 typescale and\n * shape scale.\n *\n * The Tailwind v4 preset exposes the 15 typescale roles as `text-<role>`\n * font-size utilities (e.g. `text-body-small`, `text-label-large`) and the\n * shape scale as `rounded-<role>` border-radius utilities (e.g. `rounded-small`,\n * `rounded-extra-large`). Stock tailwind-merge does not know these custom names,\n * so it (a) groups the typescale names with `text-<color>` and drops one when a\n * slot sets both a color *and* a typescale, and (b) fails to see two custom\n * `rounded-<role>` classes as conflicting, so a later corner override never\n * dedupes the resting one (both survive, and CSS source order — not intent —\n * decides). Either way token compliance / shape morph silently breaks.\n *\n * Teaching tailwind-merge that the typescale names belong to `font-size` and the\n * shape names belong to `rounded` keeps color and type independent and makes the\n * corner utilities override one another as expected.\n */\nimport { type TV, tv as baseTv } from 'tailwind-variants';\n\nconst TYPESCALE = [\n  'display-large',\n  'display-medium',\n  'display-small',\n  'headline-large',\n  'headline-medium',\n  'headline-small',\n  'title-large',\n  'title-medium',\n  'title-small',\n  'body-large',\n  'body-medium',\n  'body-small',\n  'label-large',\n  'label-medium',\n  'label-small',\n] as const;\n\n// M3 shape scale exposed as `rounded-<role>` (see @m3-baseui/tokens theme.css\n// `--radius-*`). `none` / `full` overlap stock Tailwind and are harmless to\n// re-list; the intermediate roles are what stock tailwind-merge misses.\nconst SHAPE = [\n  'none',\n  'extra-small',\n  'small',\n  'medium',\n  'large',\n  'large-increased',\n  'extra-large',\n  'extra-large-increased',\n  'full',\n] as const;\n\nexport const tv: TV = (options, config) =>\n  baseTv(options, {\n    ...config,\n    twMergeConfig: {\n      extend: {\n        classGroups: {\n          'font-size': [{ text: [...TYPESCALE] }],\n          rounded: [{ rounded: [...SHAPE] }],\n        },\n      },\n    },\n  });\n","/**\n * item.ts — tailwind-variants slots for the M3 Item row primitive.\n *\n * The shared row layout: leading slot, overline/headline/supporting column and\n * trailing slot. Headline is `body-large`/`on-surface`, overline `label-small`,\n * supporting `body-medium`, leading/trailing `on-surface-variant`. Inert by\n * design — interactive surfaces wrap it. Same DOM as the VE build.\n */\nimport { createItem } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const itemTv = tv({\n  slots: {\n    root: [\n      'relative flex w-full items-center gap-4 box-border px-4 py-3 min-h-14 text-left',\n      'bg-transparent text-on-surface',\n    ],\n    leading: [\n      'flex items-center justify-center shrink-0 overflow-hidden text-on-surface-variant',\n      '[&_svg]:size-6 [&_img]:size-full [&_img]:object-cover',\n      // M3 leading column widths, keyed on the factory's data-leading attribute.\n      'data-[leading=avatar]:size-10 data-[leading=avatar]:rounded-full',\n      'data-[leading=image]:size-14',\n      'data-[leading=video]:w-25 data-[leading=video]:h-14',\n    ],\n    content: 'flex flex-col min-w-0 flex-1',\n    overline: 'text-label-small text-on-surface-variant',\n    headline: 'text-body-large text-on-surface',\n    supporting: 'text-body-medium text-on-surface-variant',\n    trailing: 'flex items-center shrink-0 text-label-small text-on-surface-variant [&_svg]:size-6',\n  },\n});\n\nconst s = itemTv();\nexport const Item = createItem({\n  root: s.root(),\n  leading: s.leading(),\n  content: s.content(),\n  overline: s.overline(),\n  headline: s.headline(),\n  supporting: s.supporting(),\n  trailing: s.trailing(),\n});\nexport { ITEM_LEADING_VARIANTS } from '@m3-baseui/core';\nexport type { ItemProps, ItemLeadingVariant } from '@m3-baseui/core';\n"]}

package/dist/components/list/index.js

@@ -21,12 +21,24 @@ var TYPESCALE = [
   "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] }]
+        "font-size": [{ text: [...TYPESCALE] }],
+        rounded: [{ rounded: [...SHAPE] }]
       }
     }
   }

package/dist/components/list/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/tv.ts","../../../src/components/list/list.ts"],"names":["baseTv"],"mappings":";;;;;;AAeA,IAAM,SAAA,GAAY;AAAA,EAChB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,EAAA,GAAS,CAAC,OAAA,EAAS,MAAA,KAC9BA,KAAO,OAAA,EAAS;AAAA,EACd,GAAG,MAAA;AAAA,EACH,aAAA,EAAe;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa;AAAA,QACX,WAAA,EAAa,CAAC,EAAE,IAAA,EAAM,CAAC,GAAG,SAAS,GAAG;AAAA;AACxC;AACF;AAEJ,CAAC,CAAA;AC9BI,IAAM,SAAS,EAAA,CAAG;AAAA,EACvB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,wCAAA;AAAA,IACN,IAAA,EAAM;AAAA,MACJ,yEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA,EAAS;AAAA,MACP,mFAAA;AAAA,MACA,uDAAA;AAAA;AAAA,MAEA,kEAAA;AAAA,MACA,8BAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA,EAAS,8BAAA;AAAA,IACT,QAAA,EAAU,0EAAA;AAAA,IACV,UAAA,EAAY,mFAAA;AAAA,IACZ,QAAA,EAAU;AAAA,MACR,oFAAA;AAAA,MACA;AAAA;AACF,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA,MACL,CAAA,EAAG,EAAE,IAAA,EAAM,eAAA,EAAgB;AAAA,MAC3B,CAAA,EAAG,EAAE,IAAA,EAAM,mBAAA,EAAoB;AAAA,MAC/B,CAAA,EAAG,EAAE,IAAA,EAAM,+BAAA;AAAgC,KAC7C;AAAA,IACA,WAAA,EAAa;AAAA,MACX,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM;AAAA,UACJ,yDAAA;AAAA,UACA,4IAAA;AAAA,UACA,kDAAA;AAAA,UACA,0DAAA;AAAA,UACA,qDAAA;AAAA,UACA,sEAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,MACA,OAAO;AAAC;AACV,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,KAAA,EAAO,CAAA;AAAA,IACP,WAAA,EAAa;AAAA;AAEjB,CAAC;AAEM,IAAM,OAAO,UAAA,CAAW;AAAA,EAC7B,IAAA,EAAM,MAAA,EAAO,CAAE,IAAA,EAAK;AAAA,EACpB,IAAA,EAAM,CAAC,EAAE,KAAA,EAAO,aAAY,KAAM;AAChC,IAAA,MAAM,CAAA,GAAI,MAAA,CAAO,EAAE,KAAA,EAAO,aAAa,CAAA;AACvC,IAAA,OAAO;AAAA,MACL,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,MACb,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,MACnB,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,MACnB,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,MACrB,UAAA,EAAY,EAAE,UAAA,EAAW;AAAA,MACzB,QAAA,EAAU,EAAE,QAAA;AAAS,KACvB;AAAA,EACF;AACF,CAAC","file":"index.js","sourcesContent":["/**\n * tv.ts — a tailwind-variants factory pre-configured for the M3 typescale.\n *\n * The Tailwind v4 preset exposes the 15 typescale roles as `text-<role>`\n * font-size utilities (e.g. `text-body-small`, `text-label-large`). Stock\n * tailwind-merge does not know these custom names, so it groups them with the\n * `text-<color>` utilities and drops one when a slot sets both a color *and* a\n * typescale (the common M3 case). That silently strips either the color or the\n * type, breaking token compliance.\n *\n * Teaching tailwind-merge that the typescale names belong to the `font-size`\n * group keeps color and type independent, so both survive the merge.\n */\nimport { type TV, tv as baseTv } from 'tailwind-variants';\n\nconst TYPESCALE = [\n  'display-large',\n  'display-medium',\n  'display-small',\n  'headline-large',\n  'headline-medium',\n  'headline-small',\n  'title-large',\n  'title-medium',\n  'title-small',\n  'body-large',\n  'body-medium',\n  'body-small',\n  'label-large',\n  'label-medium',\n  'label-small',\n] as const;\n\nexport const tv: TV = (options, config) =>\n  baseTv(options, {\n    ...config,\n    twMergeConfig: {\n      extend: {\n        classGroups: {\n          'font-size': [{ text: [...TYPESCALE] }],\n        },\n      },\n    },\n  });\n","/**\n * list.ts — tailwind-variants slots for the M3 List.\n *\n * `surface` container with 8dp block padding; rows are 56/72/88dp for\n * one/two/three-line. Interactive rows get a `currentColor` state-layer\n * `::before` (the pointer ripple is added by the factory) and dim per-token when\n * `data-disabled`. Headline is `body-large`/`on-surface`, supporting\n * `body-medium`/`on-surface-variant`, leading/trailing `on-surface-variant`.\n * Same DOM as the VE build.\n */\nimport { createList } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const listTv = tv({\n  slots: {\n    root: 'list-none m-0 px-0 py-2 bg-transparent',\n    item: [\n      'group relative flex w-full items-center gap-4 box-border px-4 text-left',\n      'bg-transparent border-0 text-on-surface no-underline',\n    ],\n    leading: [\n      'flex items-center justify-center shrink-0 overflow-hidden text-on-surface-variant',\n      '[&_svg]:size-6 [&_img]:size-full [&_img]:object-cover',\n      // M3 leading column widths, keyed on the factory's data-leading attribute.\n      'data-[leading=avatar]:size-10 data-[leading=avatar]:rounded-full',\n      'data-[leading=image]:size-14',\n      'data-[leading=video]:w-25 data-[leading=video]:h-14',\n    ],\n    content: 'flex flex-col min-w-0 flex-1',\n    headline: 'text-body-large text-on-surface group-data-[disabled]:text-on-surface/38',\n    supporting: 'text-body-medium text-on-surface-variant group-data-[disabled]:text-on-surface/38',\n    trailing: [\n      'flex items-center shrink-0 text-label-small text-on-surface-variant [&_svg]:size-6',\n      'group-data-[disabled]:text-on-surface/38',\n    ],\n  },\n  variants: {\n    lines: {\n      1: { item: 'min-h-14 py-2' },\n      2: { item: 'min-h-[72px] py-2' },\n      3: { item: 'min-h-[88px] items-start py-3' },\n    },\n    interactive: {\n      true: {\n        item: [\n          'cursor-pointer select-none overflow-hidden outline-none',\n          'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n          'hover:before:opacity-[var(--md-sys-state-hover)]',\n          'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n          'active:before:opacity-[var(--md-sys-state-pressed)]',\n          'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n          'disabled:pointer-events-none disabled:before:opacity-0',\n        ],\n      },\n      false: {},\n    },\n  },\n  defaultVariants: {\n    lines: 1,\n    interactive: false,\n  },\n});\n\nexport const List = createList({\n  root: listTv().root(),\n  item: ({ lines, interactive }) => {\n    const c = listTv({ lines, interactive });\n    return {\n      item: c.item(),\n      leading: c.leading(),\n      content: c.content(),\n      headline: c.headline(),\n      supporting: c.supporting(),\n      trailing: c.trailing(),\n    };\n  },\n});\nexport { LIST_LEADING_VARIANTS } from '@m3-baseui/core';\nexport type { ListItemProps, ListItemLines, ListLeadingVariant } from '@m3-baseui/core';\n"]}
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/list/list.ts"],"names":["baseTv"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * tv.ts — a tailwind-variants factory pre-configured for the M3 typescale and\n * shape scale.\n *\n * The Tailwind v4 preset exposes the 15 typescale roles as `text-<role>`\n * font-size utilities (e.g. `text-body-small`, `text-label-large`) and the\n * shape scale as `rounded-<role>` border-radius utilities (e.g. `rounded-small`,\n * `rounded-extra-large`). Stock tailwind-merge does not know these custom names,\n * so it (a) groups the typescale names with `text-<color>` and drops one when a\n * slot sets both a color *and* a typescale, and (b) fails to see two custom\n * `rounded-<role>` classes as conflicting, so a later corner override never\n * dedupes the resting one (both survive, and CSS source order — not intent —\n * decides). Either way token compliance / shape morph silently breaks.\n *\n * Teaching tailwind-merge that the typescale names belong to `font-size` and the\n * shape names belong to `rounded` keeps color and type independent and makes the\n * corner utilities override one another as expected.\n */\nimport { type TV, tv as baseTv } from 'tailwind-variants';\n\nconst TYPESCALE = [\n  'display-large',\n  'display-medium',\n  'display-small',\n  'headline-large',\n  'headline-medium',\n  'headline-small',\n  'title-large',\n  'title-medium',\n  'title-small',\n  'body-large',\n  'body-medium',\n  'body-small',\n  'label-large',\n  'label-medium',\n  'label-small',\n] as const;\n\n// M3 shape scale exposed as `rounded-<role>` (see @m3-baseui/tokens theme.css\n// `--radius-*`). `none` / `full` overlap stock Tailwind and are harmless to\n// re-list; the intermediate roles are what stock tailwind-merge misses.\nconst SHAPE = [\n  'none',\n  'extra-small',\n  'small',\n  'medium',\n  'large',\n  'large-increased',\n  'extra-large',\n  'extra-large-increased',\n  'full',\n] as const;\n\nexport const tv: TV = (options, config) =>\n  baseTv(options, {\n    ...config,\n    twMergeConfig: {\n      extend: {\n        classGroups: {\n          'font-size': [{ text: [...TYPESCALE] }],\n          rounded: [{ rounded: [...SHAPE] }],\n        },\n      },\n    },\n  });\n","/**\n * list.ts — tailwind-variants slots for the M3 List.\n *\n * `surface` container with 8dp block padding; rows are 56/72/88dp for\n * one/two/three-line. Interactive rows get a `currentColor` state-layer\n * `::before` (the pointer ripple is added by the factory) and dim per-token when\n * `data-disabled`. Headline is `body-large`/`on-surface`, supporting\n * `body-medium`/`on-surface-variant`, leading/trailing `on-surface-variant`.\n * Same DOM as the VE build.\n */\nimport { createList } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const listTv = tv({\n  slots: {\n    root: 'list-none m-0 px-0 py-2 bg-transparent',\n    item: [\n      'group relative flex w-full items-center gap-4 box-border px-4 text-left',\n      'bg-transparent border-0 text-on-surface no-underline',\n    ],\n    leading: [\n      'flex items-center justify-center shrink-0 overflow-hidden text-on-surface-variant',\n      '[&_svg]:size-6 [&_img]:size-full [&_img]:object-cover',\n      // M3 leading column widths, keyed on the factory's data-leading attribute.\n      'data-[leading=avatar]:size-10 data-[leading=avatar]:rounded-full',\n      'data-[leading=image]:size-14',\n      'data-[leading=video]:w-25 data-[leading=video]:h-14',\n    ],\n    content: 'flex flex-col min-w-0 flex-1',\n    headline: 'text-body-large text-on-surface group-data-[disabled]:text-on-surface/38',\n    supporting: 'text-body-medium text-on-surface-variant group-data-[disabled]:text-on-surface/38',\n    trailing: [\n      'flex items-center shrink-0 text-label-small text-on-surface-variant [&_svg]:size-6',\n      'group-data-[disabled]:text-on-surface/38',\n    ],\n  },\n  variants: {\n    lines: {\n      1: { item: 'min-h-14 py-2' },\n      2: { item: 'min-h-[72px] py-2' },\n      3: { item: 'min-h-[88px] items-start py-3' },\n    },\n    interactive: {\n      true: {\n        item: [\n          'cursor-pointer select-none overflow-hidden outline-none',\n          'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n          'hover:before:opacity-[var(--md-sys-state-hover)]',\n          'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n          'active:before:opacity-[var(--md-sys-state-pressed)]',\n          'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n          'disabled:pointer-events-none disabled:before:opacity-0',\n        ],\n      },\n      false: {},\n    },\n  },\n  defaultVariants: {\n    lines: 1,\n    interactive: false,\n  },\n});\n\nexport const List = createList({\n  root: listTv().root(),\n  item: ({ lines, interactive }) => {\n    const c = listTv({ lines, interactive });\n    return {\n      item: c.item(),\n      leading: c.leading(),\n      content: c.content(),\n      headline: c.headline(),\n      supporting: c.supporting(),\n      trailing: c.trailing(),\n    };\n  },\n});\nexport { LIST_LEADING_VARIANTS } from '@m3-baseui/core';\nexport type { ListItemProps, ListItemLines, ListLeadingVariant } from '@m3-baseui/core';\n"]}

package/dist/components/loading-indicator/index.js

@@ -20,12 +20,24 @@ var TYPESCALE = [
   "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] }]
+        "font-size": [{ text: [...TYPESCALE] }],
+        rounded: [{ rounded: [...SHAPE] }]
       }
     }
   }

package/dist/components/loading-indicator/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/tv.ts","../../../src/components/loading-indicator/loading-indicator.ts"],"names":["baseTv"],"mappings":";;;;;AAeA,IAAM,SAAA,GAAY;AAAA,EAChB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,EAAA,GAAS,CAAC,OAAA,EAAS,MAAA,KAC9BA,KAAO,OAAA,EAAS;AAAA,EACd,GAAG,MAAA;AAAA,EACH,aAAA,EAAe;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa;AAAA,QACX,WAAA,EAAa,CAAC,EAAE,IAAA,EAAM,CAAC,GAAG,SAAS,GAAG;AAAA;AACxC;AACF;AAEJ,CAAC,CAAA;;;AC/BI,IAAM,qBAAqB,EAAA,CAAG;AAAA,EACnC,KAAA,EAAO;AAAA;AAAA;AAAA,IAGL,IAAA,EAAM,2EAAA;AAAA,IACN,SAAA,EAAW;AAAA,MACT,cAAA;AAAA;AAAA,MAEA;AAAA;AACF,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,SAAA,EAAW;AAAA,MACT,IAAA,EAAM,EAAE,IAAA,EAAM,6CAAA,EAA8C;AAAA,MAC5D,OAAO;AAAC;AACV,GACF;AAAA,EACA,eAAA,EAAiB,EAAE,SAAA,EAAW,KAAA;AAChC,CAAC;AAEM,IAAM,gBAAA,GAAmB,sBAAA,CAAuB,CAAC,EAAE,WAAU,KAAM;AACxE,EAAA,MAAM,CAAA,GAAI,kBAAA,CAAmB,EAAE,SAAA,EAAW,CAAA;AAC1C,EAAA,OAAO,EAAE,MAAM,CAAA,CAAE,IAAA,IAAQ,SAAA,EAAW,CAAA,CAAE,WAAU,EAAE;AACpD,CAAC","file":"index.js","sourcesContent":["/**\n * tv.ts — a tailwind-variants factory pre-configured for the M3 typescale.\n *\n * The Tailwind v4 preset exposes the 15 typescale roles as `text-<role>`\n * font-size utilities (e.g. `text-body-small`, `text-label-large`). Stock\n * tailwind-merge does not know these custom names, so it groups them with the\n * `text-<color>` utilities and drops one when a slot sets both a color *and* a\n * typescale (the common M3 case). That silently strips either the color or the\n * type, breaking token compliance.\n *\n * Teaching tailwind-merge that the typescale names belong to the `font-size`\n * group keeps color and type independent, so both survive the merge.\n */\nimport { type TV, tv as baseTv } from 'tailwind-variants';\n\nconst TYPESCALE = [\n  'display-large',\n  'display-medium',\n  'display-small',\n  'headline-large',\n  'headline-medium',\n  'headline-small',\n  'title-large',\n  'title-medium',\n  'title-small',\n  'body-large',\n  'body-medium',\n  'body-small',\n  'label-large',\n  'label-medium',\n  'label-small',\n] as const;\n\nexport const tv: TV = (options, config) =>\n  baseTv(options, {\n    ...config,\n    twMergeConfig: {\n      extend: {\n        classGroups: {\n          'font-size': [{ text: [...TYPESCALE] }],\n        },\n      },\n    },\n  });\n","/**\n * loading-indicator.ts — tailwind-variants slots for the M3 Expressive Loading\n * indicator.\n *\n * A 48dp box holding the morphing `primary` shape; the rotate+scale morph keys\n * off the `m3-loading` keyframe (see preset.css) and always runs (indeterminate\n * only). `contained` puts the shape on a `secondary-container` pill. Same DOM as\n * the VE build.\n */\nimport { createLoadingIndicator } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const loadingIndicatorTv = tv({\n  slots: {\n    // The SVG is a fixed 38dp active indicator. Uncontained: the box shrinks to\n    // the shape. Contained: a 48dp pill wraps it (5dp inset on each side).\n    root: 'inline-flex items-center justify-center [&_svg]:block [&_svg]:size-[38px]',\n    indicator: [\n      'fill-primary',\n      // Morph + rotate about the shape's own centre (transform-box: fill-box).\n      '[transform-box:fill-box] origin-center animate-m3-loading',\n    ],\n  },\n  variants: {\n    contained: {\n      true: { root: 'size-12 rounded-full bg-secondary-container' },\n      false: {},\n    },\n  },\n  defaultVariants: { contained: false },\n});\n\nexport const LoadingIndicator = createLoadingIndicator(({ contained }) => {\n  const s = loadingIndicatorTv({ contained });\n  return { root: s.root(), indicator: s.indicator() };\n});\nexport type { LoadingIndicatorProps } from '@m3-baseui/core';\n"]}
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/loading-indicator/loading-indicator.ts"],"names":["baseTv"],"mappings":";;;;;AAoBA,IAAM,SAAA,GAAY;AAAA,EAChB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA;AAKA,IAAM,KAAA,GAAQ;AAAA,EACZ,MAAA;AAAA,EACA,aAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,iBAAA;AAAA,EACA,aAAA;AAAA,EACA,uBAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,EAAA,GAAS,CAAC,OAAA,EAAS,MAAA,KAC9BA,KAAO,OAAA,EAAS;AAAA,EACd,GAAG,MAAA;AAAA,EACH,aAAA,EAAe;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa;AAAA,QACX,WAAA,EAAa,CAAC,EAAE,IAAA,EAAM,CAAC,GAAG,SAAS,GAAG,CAAA;AAAA,QACtC,OAAA,EAAS,CAAC,EAAE,OAAA,EAAS,CAAC,GAAG,KAAK,GAAG;AAAA;AACnC;AACF;AAEJ,CAAC,CAAA;;;ACpDI,IAAM,qBAAqB,EAAA,CAAG;AAAA,EACnC,KAAA,EAAO;AAAA;AAAA;AAAA,IAGL,IAAA,EAAM,2EAAA;AAAA,IACN,SAAA,EAAW;AAAA,MACT,cAAA;AAAA;AAAA,MAEA;AAAA;AACF,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,SAAA,EAAW;AAAA,MACT,IAAA,EAAM,EAAE,IAAA,EAAM,6CAAA,EAA8C;AAAA,MAC5D,OAAO;AAAC;AACV,GACF;AAAA,EACA,eAAA,EAAiB,EAAE,SAAA,EAAW,KAAA;AAChC,CAAC;AAEM,IAAM,gBAAA,GAAmB,sBAAA,CAAuB,CAAC,EAAE,WAAU,KAAM;AACxE,EAAA,MAAM,CAAA,GAAI,kBAAA,CAAmB,EAAE,SAAA,EAAW,CAAA;AAC1C,EAAA,OAAO,EAAE,MAAM,CAAA,CAAE,IAAA,IAAQ,SAAA,EAAW,CAAA,CAAE,WAAU,EAAE;AACpD,CAAC","file":"index.js","sourcesContent":["/**\n * tv.ts — a tailwind-variants factory pre-configured for the M3 typescale and\n * shape scale.\n *\n * The Tailwind v4 preset exposes the 15 typescale roles as `text-<role>`\n * font-size utilities (e.g. `text-body-small`, `text-label-large`) and the\n * shape scale as `rounded-<role>` border-radius utilities (e.g. `rounded-small`,\n * `rounded-extra-large`). Stock tailwind-merge does not know these custom names,\n * so it (a) groups the typescale names with `text-<color>` and drops one when a\n * slot sets both a color *and* a typescale, and (b) fails to see two custom\n * `rounded-<role>` classes as conflicting, so a later corner override never\n * dedupes the resting one (both survive, and CSS source order — not intent —\n * decides). Either way token compliance / shape morph silently breaks.\n *\n * Teaching tailwind-merge that the typescale names belong to `font-size` and the\n * shape names belong to `rounded` keeps color and type independent and makes the\n * corner utilities override one another as expected.\n */\nimport { type TV, tv as baseTv } from 'tailwind-variants';\n\nconst TYPESCALE = [\n  'display-large',\n  'display-medium',\n  'display-small',\n  'headline-large',\n  'headline-medium',\n  'headline-small',\n  'title-large',\n  'title-medium',\n  'title-small',\n  'body-large',\n  'body-medium',\n  'body-small',\n  'label-large',\n  'label-medium',\n  'label-small',\n] as const;\n\n// M3 shape scale exposed as `rounded-<role>` (see @m3-baseui/tokens theme.css\n// `--radius-*`). `none` / `full` overlap stock Tailwind and are harmless to\n// re-list; the intermediate roles are what stock tailwind-merge misses.\nconst SHAPE = [\n  'none',\n  'extra-small',\n  'small',\n  'medium',\n  'large',\n  'large-increased',\n  'extra-large',\n  'extra-large-increased',\n  'full',\n] as const;\n\nexport const tv: TV = (options, config) =>\n  baseTv(options, {\n    ...config,\n    twMergeConfig: {\n      extend: {\n        classGroups: {\n          'font-size': [{ text: [...TYPESCALE] }],\n          rounded: [{ rounded: [...SHAPE] }],\n        },\n      },\n    },\n  });\n","/**\n * loading-indicator.ts — tailwind-variants slots for the M3 Expressive Loading\n * indicator.\n *\n * A 48dp box holding the morphing `primary` shape; the rotate+scale morph keys\n * off the `m3-loading` keyframe (see preset.css) and always runs (indeterminate\n * only). `contained` puts the shape on a `secondary-container` pill. Same DOM as\n * the VE build.\n */\nimport { createLoadingIndicator } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const loadingIndicatorTv = tv({\n  slots: {\n    // The SVG is a fixed 38dp active indicator. Uncontained: the box shrinks to\n    // the shape. Contained: a 48dp pill wraps it (5dp inset on each side).\n    root: 'inline-flex items-center justify-center [&_svg]:block [&_svg]:size-[38px]',\n    indicator: [\n      'fill-primary',\n      // Morph + rotate about the shape's own centre (transform-box: fill-box).\n      '[transform-box:fill-box] origin-center animate-m3-loading',\n    ],\n  },\n  variants: {\n    contained: {\n      true: { root: 'size-12 rounded-full bg-secondary-container' },\n      false: {},\n    },\n  },\n  defaultVariants: { contained: false },\n});\n\nexport const LoadingIndicator = createLoadingIndicator(({ contained }) => {\n  const s = loadingIndicatorTv({ contained });\n  return { root: s.root(), indicator: s.indicator() };\n});\nexport type { LoadingIndicatorProps } from '@m3-baseui/core';\n"]}

package/dist/components/menu/index.js

@@ -20,12 +20,24 @@ var TYPESCALE = [
   "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] }]
+        "font-size": [{ text: [...TYPESCALE] }],
+        rounded: [{ rounded: [...SHAPE] }]
       }
     }
   }

package/dist/components/menu/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/tv.ts","../../../src/components/menu/menu-selectable-item.ts","../../../src/components/menu/menu-surface.ts","../../../src/components/menu/menu.ts"],"names":["baseTv"],"mappings":";;;;;AAeA,IAAM,SAAA,GAAY;AAAA,EAChB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,EAAA,GAAS,CAAC,OAAA,EAAS,MAAA,KAC9BA,KAAO,OAAA,EAAS;AAAA,EACd,GAAG,MAAA;AAAA,EACH,aAAA,EAAe;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa;AAAA,QACX,WAAA,EAAa,CAAC,EAAE,IAAA,EAAM,CAAC,GAAG,SAAS,GAAG;AAAA;AACxC;AACF;AAEJ,CAAC,CAAA;;;AClCI,IAAM,4BAAA,GAA+B;AAAA,EAC1C,4IAAA;AAAA,EACA,kDAAA;AAAA,EACA,+DAAA;AAAA,EACA;AACF,CAAA;AAGO,IAAM,8BAAA,GAAiC;AAAA,EAC5C,oFAAA;AAAA,EACA;AACF,CAAA;AAGO,IAAM,+BAAA,GAAkC;AAAA,EAC7C,0DAAA;AAAA,EACA,6DAAA;AAAA,EACA,qDAAA;AAAA,EACA,4DAAA;AAAA,EACA,yDAAA;AAAA,EACA,4DAAA;AAAA,EACA,oDAAA;AAAA,EACA;AACF,CAAA;AAGO,IAAM,uCAAA,GAA0C;AAAA,EACrD,0DAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,0BAAA,GAA6B;AAAA,EACxC,6GAAA;AAAA,EACA,uGAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,sBAAA,GAAyB;AAAA,EACpC,yFAAA;AAAA,EACA,2BAAA;AAAA,EACA,GAAG,4BAAA;AAAA,EACH,GAAG,8BAAA;AAAA,EACH,GAAG,+BAAA;AAAA,EACH,GAAG,uCAAA;AAAA,EACH,GAAG;AACL,CAAA;AAEO,IAAM,uBAAuB,EAAA,CAAG;AAAA,EACrC,KAAA,EAAO;AAAA;AAAA,IAEL,UAAA,EAAY,CAAC,mDAAA,EAAqD,GAAG,sBAAsB,CAAA;AAAA;AAAA,IAE3F,kBAAA,EAAoB,CAAC,8CAAA,EAAgD,GAAG,sBAAsB,CAAA;AAAA,IAC9F,aAAA,EAAe;AAAA,MACb,yDAAA;AAAA,MACA,sEAAA;AAAA,MACA,oGAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC,CAAA;AAEM,IAAM,qBAAqB,oBAAA,EAAqB;;;AC9DhD,IAAM,eAAA,GAAkB;AAAA,EAC7B,MAAA;AAAA,EACA,wEAAA;AAAA,EACA,4FAAA;AAAA,EACA,gEAAA;AAAA,EACA,+BAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,gBAAgB,EAAA,CAAG;AAAA,EAC9B,KAAA,EAAO;AAAA,IACL,KAAA,EAAO,CAAC,eAAA,EAAiB,GAAG,eAAe,CAAA;AAAA,IAC3C,UAAA,EAAY;AAAA,GACd;AAAA,EACA,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA;AAAA,MAEL,QAAA,EAAU,EAAE,KAAA,EAAO,eAAA,EAAgB;AAAA;AAAA,MAEnC,MAAA,EAAQ,EAAE,KAAA,EAAO,wCAAA;AAAyC,KAC5D;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,MAAM,EAAC;AAAA;AAAA,MAEP,IAAA,EAAM,EAAE,KAAA,EAAO,+CAAA;AAAgD;AACjE,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,KAAA,EAAO,UAAA;AAAA,IACP,MAAA,EAAQ;AAAA;AAEZ,CAAC,CAAA;AAE0B,aAAA;;;AC7B3B,IAAM,UAAU,aAAA,CAAc,EAAE,OAAO,UAAA,EAAY,MAAA,EAAQ,QAAQ,CAAA;AACnE,IAAM,UAAA,GAAa,kBAAA;AAEZ,IAAM,SAAS,EAAA,CAAG;AAAA,EACvB,KAAA,EAAO;AAAA,IACL,KAAA,EAAO,QAAQ,KAAA,EAAM;AAAA,IACrB,IAAA,EAAM;AAAA,MACJ,oGAAA;AAAA,MACA,kCAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,+DAAA;AAAA,MACA,qDAAA;AAAA;AAAA;AAAA,MAGA,6GAAA;AAAA,MACA,0IAAA;AAAA;AAAA,MAEA,uIAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW,CAAC,uCAAuC,CAAA;AAAA,IACnD,UAAA,EAAY,QAAQ,UAAA,EAAW;AAAA;AAAA,IAE/B,cAAA,EAAgB;AAAA,MACd,oHAAA;AAAA,MACA,kCAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,+DAAA;AAAA,MACA,8DAAA;AAAA,MACA,qDAAA;AAAA;AAAA,MAEA,6GAAA;AAAA,MACA,qEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,YAAA,EAAc,WAAW,kBAAA,EAAmB;AAAA,IAC5C,SAAA,EAAW,WAAW,kBAAA,EAAmB;AAAA,IACzC,aAAA,EAAe,WAAW,aAAA;AAAc;AAE5C,CAAC;AAED,IAAM,IAAI,MAAA,EAAO;AACV,IAAM,OAAO,UAAA,CAAW;AAAA,EAC7B,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,EACvB,UAAA,EAAY,EAAE,UAAA,EAAW;AAAA,EACzB,cAAA,EAAgB,EAAE,cAAA,EAAe;AAAA,EACjC,YAAA,EAAc,EAAE,YAAA,EAAa;AAAA,EAC7B,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,EACvB,aAAA,EAAe,EAAE,aAAA;AACnB,CAAC","file":"index.js","sourcesContent":["/**\n * tv.ts — a tailwind-variants factory pre-configured for the M3 typescale.\n *\n * The Tailwind v4 preset exposes the 15 typescale roles as `text-<role>`\n * font-size utilities (e.g. `text-body-small`, `text-label-large`). Stock\n * tailwind-merge does not know these custom names, so it groups them with the\n * `text-<color>` utilities and drops one when a slot sets both a color *and* a\n * typescale (the common M3 case). That silently strips either the color or the\n * type, breaking token compliance.\n *\n * Teaching tailwind-merge that the typescale names belong to the `font-size`\n * group keeps color and type independent, so both survive the merge.\n */\nimport { type TV, tv as baseTv } from 'tailwind-variants';\n\nconst TYPESCALE = [\n  'display-large',\n  'display-medium',\n  'display-small',\n  'headline-large',\n  'headline-medium',\n  'headline-small',\n  'title-large',\n  'title-medium',\n  'title-small',\n  'body-large',\n  'body-medium',\n  'body-small',\n  'label-large',\n  'label-medium',\n  'label-small',\n] as const;\n\nexport const tv: TV = (options, config) =>\n  baseTv(options, {\n    ...config,\n    twMergeConfig: {\n      extend: {\n        classGroups: {\n          'font-size': [{ text: [...TYPESCALE] }],\n        },\n      },\n    },\n  });\n","/**\n * menu-selectable-item.ts — shared M3 selectable menu row tokens.\n *\n * Select.Item and Menu CheckboxItem / RadioItem share secondary-container fill,\n * position-based selected shapes (issue #98), and the 24dp leading indicator column.\n */\nimport { tv } from '../../tv';\n\n/** State layer on selectable rows (hover / highlighted / pressed). */\nexport const menuSelectableItemStateLayer = [\n  'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n  'hover:before:opacity-[var(--md-sys-state-hover)]',\n  'data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]',\n  'active:before:opacity-[var(--md-sys-state-pressed)]',\n] as const;\n\n/** M3 selectable row fill when selected or checked. */\nexport const menuSelectableItemSelectedFill = [\n  'data-[selected]:bg-secondary-container data-[selected]:text-on-secondary-container',\n  'data-[checked]:bg-secondary-container data-[checked]:text-on-secondary-container',\n] as const;\n\n/** M3 MenuDefaults.itemShape — corner radii on the selected/checked container. */\nexport const menuSelectableItemPositionShape = [\n  'data-[selected]:data-[position=only]:rounded-extra-small',\n  'data-[selected]:data-[position=first]:rounded-t-extra-small',\n  'data-[selected]:data-[position=middle]:rounded-none',\n  'data-[selected]:data-[position=last]:rounded-b-extra-small',\n  'data-[checked]:data-[position=only]:rounded-extra-small',\n  'data-[checked]:data-[position=first]:rounded-t-extra-small',\n  'data-[checked]:data-[position=middle]:rounded-none',\n  'data-[checked]:data-[position=last]:rounded-b-extra-small',\n] as const;\n\n/** Fallback when rows are rendered via a wrapper and data-position is not stamped. */\nexport const menuSelectableItemPositionShapeFallback = [\n  'data-[selected]:not([data-position]):rounded-extra-small',\n  'data-[checked]:not([data-position]):rounded-extra-small',\n] as const;\n\nexport const menuSelectableItemDisabled = [\n  'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n  'data-[disabled]:data-[selected]:bg-transparent data-[disabled]:data-[selected]:text-on-surface/[0.38]',\n  'data-[disabled]:data-[checked]:bg-transparent data-[disabled]:data-[checked]:text-on-surface/[0.38]',\n] as const;\n\nexport const menuSelectableItemBase = [\n  'group relative cursor-pointer select-none outline-none text-label-large text-on-surface',\n  'h-12 px-3 overflow-hidden',\n  ...menuSelectableItemStateLayer,\n  ...menuSelectableItemSelectedFill,\n  ...menuSelectableItemPositionShape,\n  ...menuSelectableItemPositionShapeFallback,\n  ...menuSelectableItemDisabled,\n] as const;\n\nexport const menuSelectableItemTv = tv({\n  slots: {\n    /** Select row: check + label + optional trailing meta. */\n    selectItem: ['grid grid-cols-[24px_1fr_auto] items-center gap-3', ...menuSelectableItemBase],\n    /** Menu checkbox / radio row: check + label. */\n    menuSelectableItem: ['grid grid-cols-[24px_1fr] items-center gap-3', ...menuSelectableItemBase],\n    itemIndicator: [\n      'inline-flex items-center justify-center text-on-surface',\n      'invisible group-data-[selected]:visible group-data-[checked]:visible',\n      'group-data-[selected]:text-on-secondary-container group-data-[checked]:text-on-secondary-container',\n      'group-data-[disabled]:text-on-surface/[0.38]',\n    ],\n  },\n});\n\nexport const menuSelectableItem = menuSelectableItemTv();\n","/**\n * menu-surface.ts — shared M3 menu popup surface tokens (Menus specs).\n *\n * Used by Menu (standard width) and Select (anchor-width + scroll). Engine-neutral\n * class strings; both components compose variants on top.\n */\nimport { tv } from '../../tv';\n\n/** Base popup surface shared by Menu and Select list popups. */\nexport const menuSurfaceBase = [\n  'py-2',\n  'bg-surface-container text-on-surface rounded-extra-small shadow-level2',\n  'origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard',\n  'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n  'data-[ending-style]:opacity-0',\n  'focus:outline-none',\n] as const;\n\nexport const menuSurfaceTv = tv({\n  slots: {\n    popup: ['max-w-[280px]', ...menuSurfaceBase],\n    groupLabel: 'px-3 py-2 text-label-small text-on-surface-variant',\n  },\n  variants: {\n    width: {\n      /** Standalone Menu: 112–280dp. */\n      standard: { popup: 'min-w-[112px]' },\n      /** Exposed Dropdown / Select: at least anchor width, capped at 280dp. */\n      anchor: { popup: 'min-w-[max(112px,var(--anchor-width))]' },\n    },\n    scroll: {\n      none: {},\n      /** Select popup: clamp height and scroll the list. */\n      auto: { popup: 'max-h-[var(--available-height)] overflow-auto' },\n    },\n  },\n  defaultVariants: {\n    width: 'standard',\n    scroll: 'none',\n  },\n});\n\nexport const menuSurface = menuSurfaceTv();\n","/**\n * menu.ts — Tailwind classes for the M3 Menu.\n *\n * surface-container popup (elevation 2, extra-small corners); 48dp items with a\n * `before:` state layer keyed to hover + Base UI's data-[highlighted]. Selectable\n * checkbox/radio rows share menu-selectable-item tokens with Select. Same DOM\n * + ripple as the VE build.\n */\nimport { createMenu } from '@m3-baseui/core';\nimport { tv } from '../../tv';\nimport { menuSelectableItem } from './menu-selectable-item';\nimport { menuSurfaceTv } from './menu-surface';\n\nconst surface = menuSurfaceTv({ width: 'standard', scroll: 'none' });\nconst selectable = menuSelectableItem;\n\nexport const menuTv = tv({\n  slots: {\n    popup: surface.popup(),\n    item: [\n      'relative flex items-center gap-3 h-12 px-3 overflow-hidden cursor-pointer select-none outline-none',\n      'text-label-large text-on-surface',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n      'hover:before:opacity-[var(--md-sys-state-hover)]',\n      'data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n      // M3 disabled (per-token, not a blanket fade): label + leading/trailing\n      // icon on-surface/0.38, no state layer.\n      'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n      'data-[disabled]:[&_[data-slot=menu-leading]]:text-on-surface/[0.38] data-[disabled]:[&_[data-slot=menu-trailing]]:text-on-surface/[0.38]',\n      // M3 leading icon (24dp) + trailing supporting text (shortcut/meta).\n      '[&_[data-slot=menu-leading]]:inline-flex [&_[data-slot=menu-leading]]:text-on-surface-variant [&_[data-slot=menu-leading]>svg]:size-6',\n      '[&_[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',\n    ],\n    separator: ['my-2 h-px border-0 bg-outline-variant'],\n    groupLabel: surface.groupLabel(),\n    // Submenu trigger: item look + trailing chevron, highlighted while open.\n    submenuTrigger: [\n      'relative flex items-center justify-between gap-3 h-12 px-3 overflow-hidden cursor-pointer select-none outline-none',\n      'text-label-large text-on-surface',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n      'hover:before:opacity-[var(--md-sys-state-hover)]',\n      'data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]',\n      'data-[popup-open]:before:opacity-[var(--md-sys-state-hover)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n      // M3 disabled (per-token): label + leading icon on-surface/0.38, no state layer.\n      'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n      'data-[disabled]:[&_[data-slot=menu-leading]]:text-on-surface/[0.38]',\n      '[&_[data-slot=menu-leading]]:inline-flex [&_[data-slot=menu-leading]]:text-on-surface-variant [&_[data-slot=menu-leading]>svg]:size-6',\n    ],\n    checkboxItem: selectable.menuSelectableItem(),\n    radioItem: selectable.menuSelectableItem(),\n    itemIndicator: selectable.itemIndicator(),\n  },\n});\n\nconst m = menuTv();\nexport const Menu = createMenu({\n  popup: m.popup(),\n  item: m.item(),\n  separator: m.separator(),\n  groupLabel: m.groupLabel(),\n  submenuTrigger: m.submenuTrigger(),\n  checkboxItem: m.checkboxItem(),\n  radioItem: m.radioItem(),\n  itemIndicator: m.itemIndicator(),\n});\n"]}
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/menu/menu-selectable-item.ts","../../../src/components/menu/menu-surface.ts","../../../src/components/menu/menu.ts"],"names":["baseTv"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * tv.ts — a tailwind-variants factory pre-configured for the M3 typescale and\n * shape scale.\n *\n * The Tailwind v4 preset exposes the 15 typescale roles as `text-<role>`\n * font-size utilities (e.g. `text-body-small`, `text-label-large`) and the\n * shape scale as `rounded-<role>` border-radius utilities (e.g. `rounded-small`,\n * `rounded-extra-large`). Stock tailwind-merge does not know these custom names,\n * so it (a) groups the typescale names with `text-<color>` and drops one when a\n * slot sets both a color *and* a typescale, and (b) fails to see two custom\n * `rounded-<role>` classes as conflicting, so a later corner override never\n * dedupes the resting one (both survive, and CSS source order — not intent —\n * decides). Either way token compliance / shape morph silently breaks.\n *\n * Teaching tailwind-merge that the typescale names belong to `font-size` and the\n * shape names belong to `rounded` keeps color and type independent and makes the\n * corner utilities override one another as expected.\n */\nimport { type TV, tv as baseTv } from 'tailwind-variants';\n\nconst TYPESCALE = [\n  'display-large',\n  'display-medium',\n  'display-small',\n  'headline-large',\n  'headline-medium',\n  'headline-small',\n  'title-large',\n  'title-medium',\n  'title-small',\n  'body-large',\n  'body-medium',\n  'body-small',\n  'label-large',\n  'label-medium',\n  'label-small',\n] as const;\n\n// M3 shape scale exposed as `rounded-<role>` (see @m3-baseui/tokens theme.css\n// `--radius-*`). `none` / `full` overlap stock Tailwind and are harmless to\n// re-list; the intermediate roles are what stock tailwind-merge misses.\nconst SHAPE = [\n  'none',\n  'extra-small',\n  'small',\n  'medium',\n  'large',\n  'large-increased',\n  'extra-large',\n  'extra-large-increased',\n  'full',\n] as const;\n\nexport const tv: TV = (options, config) =>\n  baseTv(options, {\n    ...config,\n    twMergeConfig: {\n      extend: {\n        classGroups: {\n          'font-size': [{ text: [...TYPESCALE] }],\n          rounded: [{ rounded: [...SHAPE] }],\n        },\n      },\n    },\n  });\n","/**\n * menu-selectable-item.ts — shared M3 selectable menu row tokens.\n *\n * Select.Item and Menu CheckboxItem / RadioItem share secondary-container fill,\n * position-based selected shapes (issue #98), and the 24dp leading indicator column.\n */\nimport { tv } from '../../tv';\n\n/** State layer on selectable rows (hover / highlighted / pressed). */\nexport const menuSelectableItemStateLayer = [\n  'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n  'hover:before:opacity-[var(--md-sys-state-hover)]',\n  'data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]',\n  'active:before:opacity-[var(--md-sys-state-pressed)]',\n] as const;\n\n/** M3 selectable row fill when selected or checked. */\nexport const menuSelectableItemSelectedFill = [\n  'data-[selected]:bg-secondary-container data-[selected]:text-on-secondary-container',\n  'data-[checked]:bg-secondary-container data-[checked]:text-on-secondary-container',\n] as const;\n\n/** M3 MenuDefaults.itemShape — corner radii on the selected/checked container. */\nexport const menuSelectableItemPositionShape = [\n  'data-[selected]:data-[position=only]:rounded-extra-small',\n  'data-[selected]:data-[position=first]:rounded-t-extra-small',\n  'data-[selected]:data-[position=middle]:rounded-none',\n  'data-[selected]:data-[position=last]:rounded-b-extra-small',\n  'data-[checked]:data-[position=only]:rounded-extra-small',\n  'data-[checked]:data-[position=first]:rounded-t-extra-small',\n  'data-[checked]:data-[position=middle]:rounded-none',\n  'data-[checked]:data-[position=last]:rounded-b-extra-small',\n] as const;\n\n/** Fallback when rows are rendered via a wrapper and data-position is not stamped. */\nexport const menuSelectableItemPositionShapeFallback = [\n  'data-[selected]:not([data-position]):rounded-extra-small',\n  'data-[checked]:not([data-position]):rounded-extra-small',\n] as const;\n\nexport const menuSelectableItemDisabled = [\n  'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n  'data-[disabled]:data-[selected]:bg-transparent data-[disabled]:data-[selected]:text-on-surface/[0.38]',\n  'data-[disabled]:data-[checked]:bg-transparent data-[disabled]:data-[checked]:text-on-surface/[0.38]',\n] as const;\n\nexport const menuSelectableItemBase = [\n  'group relative cursor-pointer select-none outline-none text-label-large text-on-surface',\n  'h-12 px-3 overflow-hidden',\n  ...menuSelectableItemStateLayer,\n  ...menuSelectableItemSelectedFill,\n  ...menuSelectableItemPositionShape,\n  ...menuSelectableItemPositionShapeFallback,\n  ...menuSelectableItemDisabled,\n] as const;\n\nexport const menuSelectableItemTv = tv({\n  slots: {\n    /** Select row: check + label + optional trailing meta. */\n    selectItem: ['grid grid-cols-[24px_1fr_auto] items-center gap-3', ...menuSelectableItemBase],\n    /** Menu checkbox / radio row: check + label. */\n    menuSelectableItem: ['grid grid-cols-[24px_1fr] items-center gap-3', ...menuSelectableItemBase],\n    itemIndicator: [\n      'inline-flex items-center justify-center text-on-surface',\n      'invisible group-data-[selected]:visible group-data-[checked]:visible',\n      'group-data-[selected]:text-on-secondary-container group-data-[checked]:text-on-secondary-container',\n      'group-data-[disabled]:text-on-surface/[0.38]',\n    ],\n  },\n});\n\nexport const menuSelectableItem = menuSelectableItemTv();\n","/**\n * menu-surface.ts — shared M3 menu popup surface tokens (Menus specs).\n *\n * Used by Menu (standard width) and Select (anchor-width + scroll). Engine-neutral\n * class strings; both components compose variants on top.\n */\nimport { tv } from '../../tv';\n\n/** Base popup surface shared by Menu and Select list popups. */\nexport const menuSurfaceBase = [\n  'py-2',\n  'bg-surface-container text-on-surface rounded-extra-small shadow-level2',\n  'origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard',\n  'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n  'data-[ending-style]:opacity-0',\n  'focus:outline-none',\n] as const;\n\nexport const menuSurfaceTv = tv({\n  slots: {\n    popup: ['max-w-[280px]', ...menuSurfaceBase],\n    groupLabel: 'px-3 py-2 text-label-small text-on-surface-variant',\n  },\n  variants: {\n    width: {\n      /** Standalone Menu: 112–280dp. */\n      standard: { popup: 'min-w-[112px]' },\n      /** Exposed Dropdown / Select: at least anchor width, capped at 280dp. */\n      anchor: { popup: 'min-w-[max(112px,var(--anchor-width))]' },\n    },\n    scroll: {\n      none: {},\n      /** Select popup: clamp height and scroll the list. */\n      auto: { popup: 'max-h-[var(--available-height)] overflow-auto' },\n    },\n  },\n  defaultVariants: {\n    width: 'standard',\n    scroll: 'none',\n  },\n});\n\nexport const menuSurface = menuSurfaceTv();\n","/**\n * menu.ts — Tailwind classes for the M3 Menu.\n *\n * surface-container popup (elevation 2, extra-small corners); 48dp items with a\n * `before:` state layer keyed to hover + Base UI's data-[highlighted]. Selectable\n * checkbox/radio rows share menu-selectable-item tokens with Select. Same DOM\n * + ripple as the VE build.\n */\nimport { createMenu } from '@m3-baseui/core';\nimport { tv } from '../../tv';\nimport { menuSelectableItem } from './menu-selectable-item';\nimport { menuSurfaceTv } from './menu-surface';\n\nconst surface = menuSurfaceTv({ width: 'standard', scroll: 'none' });\nconst selectable = menuSelectableItem;\n\nexport const menuTv = tv({\n  slots: {\n    popup: surface.popup(),\n    item: [\n      'relative flex items-center gap-3 h-12 px-3 overflow-hidden cursor-pointer select-none outline-none',\n      'text-label-large text-on-surface',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n      'hover:before:opacity-[var(--md-sys-state-hover)]',\n      'data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n      // M3 disabled (per-token, not a blanket fade): label + leading/trailing\n      // icon on-surface/0.38, no state layer.\n      'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n      'data-[disabled]:[&_[data-slot=menu-leading]]:text-on-surface/[0.38] data-[disabled]:[&_[data-slot=menu-trailing]]:text-on-surface/[0.38]',\n      // M3 leading icon (24dp) + trailing supporting text (shortcut/meta).\n      '[&_[data-slot=menu-leading]]:inline-flex [&_[data-slot=menu-leading]]:text-on-surface-variant [&_[data-slot=menu-leading]>svg]:size-6',\n      '[&_[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',\n    ],\n    separator: ['my-2 h-px border-0 bg-outline-variant'],\n    groupLabel: surface.groupLabel(),\n    // Submenu trigger: item look + trailing chevron, highlighted while open.\n    submenuTrigger: [\n      'relative flex items-center justify-between gap-3 h-12 px-3 overflow-hidden cursor-pointer select-none outline-none',\n      'text-label-large text-on-surface',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n      'hover:before:opacity-[var(--md-sys-state-hover)]',\n      'data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]',\n      'data-[popup-open]:before:opacity-[var(--md-sys-state-hover)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n      // M3 disabled (per-token): label + leading icon on-surface/0.38, no state layer.\n      'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n      'data-[disabled]:[&_[data-slot=menu-leading]]:text-on-surface/[0.38]',\n      '[&_[data-slot=menu-leading]]:inline-flex [&_[data-slot=menu-leading]]:text-on-surface-variant [&_[data-slot=menu-leading]>svg]:size-6',\n    ],\n    checkboxItem: selectable.menuSelectableItem(),\n    radioItem: selectable.menuSelectableItem(),\n    itemIndicator: selectable.itemIndicator(),\n  },\n});\n\nconst m = menuTv();\nexport const Menu = createMenu({\n  popup: m.popup(),\n  item: m.item(),\n  separator: m.separator(),\n  groupLabel: m.groupLabel(),\n  submenuTrigger: m.submenuTrigger(),\n  checkboxItem: m.checkboxItem(),\n  radioItem: m.radioItem(),\n  itemIndicator: m.itemIndicator(),\n});\n"]}