@m3-baseui/react-tailwind 2.0.0 → 4.0.0

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":"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","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"]}

package/dist/components/navigation-drawer/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/navigation-drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/tv.ts","../../../src/components/navigation-drawer/navigation-drawer.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,IACL,IAAA,EAAM,uFAAA;AAAA,IACN,QAAA,EAAU,yDAAA;AAAA,IACV,IAAA,EAAM;AAAA,MACJ,2FAAA;AAAA,MACA,sHAAA;AAAA,MACA,kBAAA;AAAA,MACA,8CAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,qDAAA;AAAA,MACA,oFAAA;AAAA,MACA,yGAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA,EAAS,0DAAA;AAAA,IACT,KAAA,EAAO,yBAAA;AAAA,IACP,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,UAAU,EAAC;AAAA,MACX,KAAA,EAAO,EAAE,IAAA,EAAM,+BAAA;AAAgC;AACjD,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAED,IAAM,IAAI,kBAAA,EAAmB;AACtB,IAAM,mBAAmB,sBAAA,CAAuB;AAAA,EACrD,IAAA,EAAM,CAAC,EAAE,OAAA,EAAQ,KAAM,mBAAmB,EAAE,OAAA,EAAS,CAAA,CAAE,IAAA,EAAK;AAAA,EAC5D,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,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 * navigation-drawer.ts — tailwind-variants slots for the M3 NavigationDrawer.\n *\n * A 360dp `surface-container-low` panel. `standard` is inline; `modal` floats\n * with elevation + a rounded trailing edge. Destinations are 56dp full-corner\n * pills; the active one (`data-selected`) fills with secondary-container. State\n * layer is the item `::before` (ripple added by the factory); disabled rows dim\n * per-token. Same DOM + `data-*` as the VE build.\n */\nimport { createNavigationDrawer } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const navigationDrawerTv = tv({\n  slots: {\n    root: 'flex flex-col gap-1 box-border w-[360px] p-3 bg-surface-container-low text-on-surface',\n    headline: 'px-4 pt-4 pb-1 text-title-small text-on-surface-variant',\n    item: [\n      'group relative flex w-full items-center gap-3 box-border h-14 px-4 rounded-full text-left',\n      'bg-transparent border-0 text-on-surface-variant no-underline cursor-pointer select-none overflow-hidden outline-none',\n      'text-label-large',\n      'transition-colors duration-150 ease-standard',\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-[selected]:bg-secondary-container data-[selected]:text-on-secondary-container',\n      'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0 data-[disabled]:text-on-surface/38',\n      'disabled:pointer-events-none disabled:before:opacity-0 disabled:text-on-surface/38',\n    ],\n    leading: 'flex items-center justify-center shrink-0 [&_svg]:size-6',\n    label: 'flex-1 min-w-0 truncate',\n    trailing: 'flex items-center shrink-0 text-label-small',\n  },\n  variants: {\n    variant: {\n      standard: {},\n      modal: { root: 'shadow-level1 rounded-e-large' },\n    },\n  },\n  defaultVariants: {\n    variant: 'standard',\n  },\n});\n\nconst s = navigationDrawerTv();\nexport const NavigationDrawer = createNavigationDrawer({\n  root: ({ variant }) => navigationDrawerTv({ variant }).root(),\n  headline: s.headline(),\n  item: s.item(),\n  leading: s.leading(),\n  label: s.label(),\n  trailing: s.trailing(),\n});\nexport type { NavigationDrawerVariant } from '@m3-baseui/core';\n"]}
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/navigation-drawer/navigation-drawer.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,IACL,IAAA,EAAM,uFAAA;AAAA,IACN,QAAA,EAAU,yDAAA;AAAA,IACV,IAAA,EAAM;AAAA,MACJ,2FAAA;AAAA,MACA,sHAAA;AAAA,MACA,kBAAA;AAAA,MACA,8CAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,qDAAA;AAAA,MACA,oFAAA;AAAA,MACA,yGAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA,EAAS,0DAAA;AAAA,IACT,KAAA,EAAO,yBAAA;AAAA,IACP,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,UAAU,EAAC;AAAA,MACX,KAAA,EAAO,EAAE,IAAA,EAAM,+BAAA;AAAgC;AACjD,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAED,IAAM,IAAI,kBAAA,EAAmB;AACtB,IAAM,mBAAmB,sBAAA,CAAuB;AAAA,EACrD,IAAA,EAAM,CAAC,EAAE,OAAA,EAAQ,KAAM,mBAAmB,EAAE,OAAA,EAAS,CAAA,CAAE,IAAA,EAAK;AAAA,EAC5D,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,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 * navigation-drawer.ts — tailwind-variants slots for the M3 NavigationDrawer.\n *\n * A 360dp `surface-container-low` panel. `standard` is inline; `modal` floats\n * with elevation + a rounded trailing edge. Destinations are 56dp full-corner\n * pills; the active one (`data-selected`) fills with secondary-container. State\n * layer is the item `::before` (ripple added by the factory); disabled rows dim\n * per-token. Same DOM + `data-*` as the VE build.\n */\nimport { createNavigationDrawer } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const navigationDrawerTv = tv({\n  slots: {\n    root: 'flex flex-col gap-1 box-border w-[360px] p-3 bg-surface-container-low text-on-surface',\n    headline: 'px-4 pt-4 pb-1 text-title-small text-on-surface-variant',\n    item: [\n      'group relative flex w-full items-center gap-3 box-border h-14 px-4 rounded-full text-left',\n      'bg-transparent border-0 text-on-surface-variant no-underline cursor-pointer select-none overflow-hidden outline-none',\n      'text-label-large',\n      'transition-colors duration-150 ease-standard',\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-[selected]:bg-secondary-container data-[selected]:text-on-secondary-container',\n      'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0 data-[disabled]:text-on-surface/38',\n      'disabled:pointer-events-none disabled:before:opacity-0 disabled:text-on-surface/38',\n    ],\n    leading: 'flex items-center justify-center shrink-0 [&_svg]:size-6',\n    label: 'flex-1 min-w-0 truncate',\n    trailing: 'flex items-center shrink-0 text-label-small',\n  },\n  variants: {\n    variant: {\n      standard: {},\n      modal: { root: 'shadow-level1 rounded-e-large' },\n    },\n  },\n  defaultVariants: {\n    variant: 'standard',\n  },\n});\n\nconst s = navigationDrawerTv();\nexport const NavigationDrawer = createNavigationDrawer({\n  root: ({ variant }) => navigationDrawerTv({ variant }).root(),\n  headline: s.headline(),\n  item: s.item(),\n  leading: s.leading(),\n  label: s.label(),\n  trailing: s.trailing(),\n});\nexport type { NavigationDrawerVariant } from '@m3-baseui/core';\n"]}

package/dist/components/navigation-rail/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/navigation-rail/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/tv.ts","../../../src/components/navigation-rail/navigation-rail.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,mBAAmB,EAAA,CAAG;AAAA,EACjC,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,8DAAA;AAAA,IACN,MAAA,EAAQ,uCAAA;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,0EAAA;AAAA,MACA,iEAAA;AAAA;AAAA,MAEA;AAAA,KACF;AAAA,IACA,QAAA,EAAU,oDAAA;AAAA,IACV,SAAA,EAAW;AAAA,MACT,8DAAA;AAAA,MACA,8CAAA;AAAA,MACA,6CAAA;AAAA,MACA,4IAAA;AAAA,MACA,wDAAA;AAAA,MACA,gEAAA;AAAA,MACA,2DAAA;AAAA;AAAA,MAEA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,mEAAA;AAAA,MACA,8CAAA;AAAA;AAAA,MAEA,gBAAA;AAAA,MACA,kDAAA;AAAA;AAAA;AAAA;AAAA,MAIA,8CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,2CAAA;AAAA,MACA,8CAAA;AAAA,MACA,qEAAA;AAAA;AAAA,MAEA,8CAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,gBAAA,EAAiB;AACpB,IAAM,iBAAiB,oBAAA,CAAqB;AAAA,EACjD,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,EACjB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,EACvB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA;AACX,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 * navigation-rail.ts — tailwind-variants slots for the M3 NavigationRail.\n *\n * 80dp vertical rail on `surface`. The selected destination surfaces\n * `data-pressed` (Base UI Toggle); the pill, icon and label colors key off it\n * via the `group` on each item. State layer is the pill `::before`; the pointer\n * ripple is added by the factory. `Root` renders an optional leading `header`\n * (menu button / FAB). Same DOM + `data-*` as the VE build (mirrors NavigationBar).\n */\nimport { createNavigationRail } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const navigationRailTv = tv({\n  slots: {\n    root: 'flex flex-col items-center gap-3 h-full w-20 py-5 bg-surface',\n    header: 'flex flex-col items-center gap-3 mb-1',\n    item: [\n      'group relative flex flex-col items-center justify-center gap-1 px-1 py-1',\n      'bg-transparent border-0 cursor-pointer select-none outline-none',\n      // M3 disabled is per-token (icon + label dimmed below), not a blanket fade.\n      'data-[disabled]:pointer-events-none',\n    ],\n    iconWrap: 'relative flex items-center justify-center w-14 h-8',\n    indicator: [\n      'absolute inset-0 rounded-full bg-transparent overflow-hidden',\n      'transition-colors duration-150 ease-standard',\n      'group-data-[pressed]:bg-secondary-container',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n      'group-hover:before:opacity-[var(--md-sys-state-hover)]',\n      'group-focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n      'group-active:before:opacity-[var(--md-sys-state-pressed)]',\n      // No state layer on a disabled destination.\n      'group-data-[disabled]:before:opacity-0',\n    ],\n    icon: [\n      'relative flex items-center justify-center text-on-surface-variant',\n      'transition-colors duration-150 ease-standard',\n      // Raw <svg> icons render at 24dp (Material Symbols set their own size).\n      '[&_svg]:size-6',\n      'group-data-[pressed]:text-on-secondary-container',\n      // M3 disabled: icon dims to on-surface/0.38. The item is the only `.group`,\n      // so the disabled+active override tests both attributes on that single\n      // element (see NavigationBar for the rationale).\n      'group-data-[disabled]:text-on-surface/[0.38]',\n      'group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]',\n    ],\n    label: [\n      'text-label-medium text-on-surface-variant',\n      'transition-colors duration-150 ease-standard',\n      'group-data-[pressed]:text-on-surface group-data-[pressed]:font-bold',\n      // M3 disabled: label dims to on-surface/0.38 (same-element override).\n      'group-data-[disabled]:text-on-surface/[0.38]',\n      'group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]',\n    ],\n  },\n});\n\nconst s = navigationRailTv();\nexport const NavigationRail = createNavigationRail({\n  root: s.root(),\n  header: s.header(),\n  item: s.item(),\n  iconWrap: s.iconWrap(),\n  indicator: s.indicator(),\n  icon: s.icon(),\n  label: s.label(),\n});\n"]}
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/navigation-rail/navigation-rail.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,mBAAmB,EAAA,CAAG;AAAA,EACjC,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,8DAAA;AAAA,IACN,MAAA,EAAQ,uCAAA;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,0EAAA;AAAA,MACA,iEAAA;AAAA;AAAA,MAEA;AAAA,KACF;AAAA,IACA,QAAA,EAAU,oDAAA;AAAA,IACV,SAAA,EAAW;AAAA,MACT,8DAAA;AAAA,MACA,8CAAA;AAAA,MACA,6CAAA;AAAA,MACA,4IAAA;AAAA,MACA,wDAAA;AAAA,MACA,gEAAA;AAAA,MACA,2DAAA;AAAA;AAAA,MAEA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,mEAAA;AAAA,MACA,8CAAA;AAAA;AAAA,MAEA,gBAAA;AAAA,MACA,kDAAA;AAAA;AAAA;AAAA;AAAA,MAIA,8CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,2CAAA;AAAA,MACA,8CAAA;AAAA,MACA,qEAAA;AAAA;AAAA,MAEA,8CAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,gBAAA,EAAiB;AACpB,IAAM,iBAAiB,oBAAA,CAAqB;AAAA,EACjD,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,EACjB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,EACvB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA;AACX,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 * navigation-rail.ts — tailwind-variants slots for the M3 NavigationRail.\n *\n * 80dp vertical rail on `surface`. The selected destination surfaces\n * `data-pressed` (Base UI Toggle); the pill, icon and label colors key off it\n * via the `group` on each item. State layer is the pill `::before`; the pointer\n * ripple is added by the factory. `Root` renders an optional leading `header`\n * (menu button / FAB). Same DOM + `data-*` as the VE build (mirrors NavigationBar).\n */\nimport { createNavigationRail } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const navigationRailTv = tv({\n  slots: {\n    root: 'flex flex-col items-center gap-3 h-full w-20 py-5 bg-surface',\n    header: 'flex flex-col items-center gap-3 mb-1',\n    item: [\n      'group relative flex flex-col items-center justify-center gap-1 px-1 py-1',\n      'bg-transparent border-0 cursor-pointer select-none outline-none',\n      // M3 disabled is per-token (icon + label dimmed below), not a blanket fade.\n      'data-[disabled]:pointer-events-none',\n    ],\n    iconWrap: 'relative flex items-center justify-center w-14 h-8',\n    indicator: [\n      'absolute inset-0 rounded-full bg-transparent overflow-hidden',\n      'transition-colors duration-150 ease-standard',\n      'group-data-[pressed]:bg-secondary-container',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n      'group-hover:before:opacity-[var(--md-sys-state-hover)]',\n      'group-focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n      'group-active:before:opacity-[var(--md-sys-state-pressed)]',\n      // No state layer on a disabled destination.\n      'group-data-[disabled]:before:opacity-0',\n    ],\n    icon: [\n      'relative flex items-center justify-center text-on-surface-variant',\n      'transition-colors duration-150 ease-standard',\n      // Raw <svg> icons render at 24dp (Material Symbols set their own size).\n      '[&_svg]:size-6',\n      'group-data-[pressed]:text-on-secondary-container',\n      // M3 disabled: icon dims to on-surface/0.38. The item is the only `.group`,\n      // so the disabled+active override tests both attributes on that single\n      // element (see NavigationBar for the rationale).\n      'group-data-[disabled]:text-on-surface/[0.38]',\n      'group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]',\n    ],\n    label: [\n      'text-label-medium text-on-surface-variant',\n      'transition-colors duration-150 ease-standard',\n      'group-data-[pressed]:text-on-surface group-data-[pressed]:font-bold',\n      // M3 disabled: label dims to on-surface/0.38 (same-element override).\n      'group-data-[disabled]:text-on-surface/[0.38]',\n      'group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]',\n    ],\n  },\n});\n\nconst s = navigationRailTv();\nexport const NavigationRail = createNavigationRail({\n  root: s.root(),\n  header: s.header(),\n  item: s.item(),\n  iconWrap: s.iconWrap(),\n  indicator: s.indicator(),\n  icon: s.icon(),\n  label: s.label(),\n});\n"]}

package/dist/components/search/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/search/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/tv.ts","../../../src/components/search/search.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,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,GAAA,EAAK;AAAA,MACH,iEAAA;AAAA,MACA,wDAAA;AAAA,MACA,8CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,0EAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,4DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,gGAAA;AAAA,MACA,oEAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,oFAAA;AAAA,MACA,uEAAA;AAAA,MACA,4FAAA;AAAA,MACA,gEAAA;AAAA,MACA,+BAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM,CAAC,cAAc,CAAA;AAAA,IACrB,IAAA,EAAM;AAAA,MACJ,4FAAA;AAAA,MACA,yEAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,+DAAA;AAAA,MACA,8DAAA;AAAA,MACA,qDAAA;AAAA,MACA,6GAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,aAAA,EAAe;AAAA,MACb,yDAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO,CAAC,oDAAoD,CAAA;AAAA,IAC5D,SAAA,EAAW,CAAC,uCAAuC,CAAA;AAAA,IACnD,UAAA,EAAY,CAAC,oDAAoD;AAAA;AAErE,CAAC;AAED,IAAM,IAAI,QAAA,EAAS;AACZ,IAAM,SAAS,YAAA,CAAa;AAAA,EACjC,GAAA,EAAK,EAAE,GAAA,EAAI;AAAA,EACX,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,aAAA,EAAe,EAAE,aAAA,EAAc;AAAA,EAC/B,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,EACvB,UAAA,EAAY,EAAE,UAAA;AAChB,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 * search.ts — Tailwind classes for the M3 Search (search bar + docked view).\n *\n * Resting bar: surface-container-high pill (full corner, 56dp) with a leading\n * magnifier and a body-large input. The docked view is a surface-container-high\n * popup (elevation 3) whose suggestion rows carry a `before:` state layer keyed\n * to hover + Base UI's data-[highlighted]/data-[selected]. Same DOM + ripple as\n * the VE build.\n */\nimport { createSearch } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const searchTv = tv({\n  slots: {\n    bar: [\n      'flex items-center gap-1 h-14 min-w-[360px] max-w-full pl-4 pr-2',\n      'bg-surface-container-high text-on-surface rounded-full',\n      'transition-shadow duration-150 ease-standard',\n      'focus-within:shadow-level1',\n    ],\n    icon: [\n      'inline-flex shrink-0 items-center justify-center text-on-surface-variant',\n      '[&>svg]:size-6',\n    ],\n    input: [\n      'flex-1 min-w-0 h-full bg-transparent border-0 outline-none',\n      'text-body-large text-on-surface placeholder:text-on-surface-variant',\n    ],\n    clear: [\n      'relative inline-flex shrink-0 items-center justify-center size-10 rounded-full overflow-hidden',\n      'text-on-surface-variant cursor-pointer outline-none [&>svg]:size-6',\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    ],\n    popup: [\n      'w-[var(--anchor-width)] min-w-[360px] max-h-[min(72vh,480px)] overflow-y-auto py-2',\n      'bg-surface-container-high text-on-surface rounded-large shadow-level3',\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    ],\n    list: ['outline-none'],\n    item: [\n      'group relative grid grid-cols-[24px_1fr_24px] items-center gap-4 h-14 px-4 overflow-hidden',\n      'cursor-pointer select-none outline-none text-body-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-[selected]:before:opacity-[var(--md-sys-state-pressed)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n      'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n      '[&_[data-slot=search-leading]]:inline-flex [&_[data-slot=search-leading]]:text-on-surface-variant [&_[data-slot=search-leading]>svg]:size-6',\n    ],\n    itemIndicator: [\n      'inline-flex items-center justify-center text-on-surface',\n      'invisible group-data-[selected]:visible',\n    ],\n    empty: ['px-4 py-3 text-body-medium text-on-surface-variant'],\n    separator: ['my-2 h-px border-0 bg-outline-variant'],\n    groupLabel: ['px-4 py-2 text-label-small text-on-surface-variant'],\n  },\n});\n\nconst s = searchTv();\nexport const Search = createSearch({\n  bar: s.bar(),\n  icon: s.icon(),\n  input: s.input(),\n  clear: s.clear(),\n  popup: s.popup(),\n  list: s.list(),\n  item: s.item(),\n  itemIndicator: s.itemIndicator(),\n  empty: s.empty(),\n  separator: s.separator(),\n  groupLabel: s.groupLabel(),\n});\n"]}
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/search/search.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 * search.ts — Tailwind classes for the M3 Search (search bar + docked view).\n *\n * Resting bar: surface-container-high pill (full corner, 56dp) with a leading\n * magnifier and a body-large input. The docked view is a surface-container-high\n * popup (elevation 3) whose suggestion rows carry a `before:` state layer keyed\n * to hover + Base UI's data-[highlighted]/data-[selected]. Same DOM + ripple as\n * the VE build.\n */\nimport { createSearch } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const searchTv = tv({\n  slots: {\n    bar: [\n      'flex items-center gap-1 h-14 min-w-[360px] max-w-full pl-4 pr-2',\n      'bg-surface-container-high text-on-surface rounded-full',\n      'transition-shadow duration-150 ease-standard',\n      'focus-within:shadow-level1',\n    ],\n    icon: [\n      'inline-flex shrink-0 items-center justify-center text-on-surface-variant',\n      '[&>svg]:size-6',\n    ],\n    input: [\n      'flex-1 min-w-0 h-full bg-transparent border-0 outline-none',\n      'text-body-large text-on-surface placeholder:text-on-surface-variant',\n    ],\n    clear: [\n      'relative inline-flex shrink-0 items-center justify-center size-10 rounded-full overflow-hidden',\n      'text-on-surface-variant cursor-pointer outline-none [&>svg]:size-6',\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    ],\n    popup: [\n      'w-[var(--anchor-width)] min-w-[360px] max-h-[min(72vh,480px)] overflow-y-auto py-2',\n      'bg-surface-container-high text-on-surface rounded-large shadow-level3',\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    ],\n    list: ['outline-none'],\n    item: [\n      'group relative grid grid-cols-[24px_1fr_24px] items-center gap-4 h-14 px-4 overflow-hidden',\n      'cursor-pointer select-none outline-none text-body-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-[selected]:before:opacity-[var(--md-sys-state-pressed)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n      'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n      '[&_[data-slot=search-leading]]:inline-flex [&_[data-slot=search-leading]]:text-on-surface-variant [&_[data-slot=search-leading]>svg]:size-6',\n    ],\n    itemIndicator: [\n      'inline-flex items-center justify-center text-on-surface',\n      'invisible group-data-[selected]:visible',\n    ],\n    empty: ['px-4 py-3 text-body-medium text-on-surface-variant'],\n    separator: ['my-2 h-px border-0 bg-outline-variant'],\n    groupLabel: ['px-4 py-2 text-label-small text-on-surface-variant'],\n  },\n});\n\nconst s = searchTv();\nexport const Search = createSearch({\n  bar: s.bar(),\n  icon: s.icon(),\n  input: s.input(),\n  clear: s.clear(),\n  popup: s.popup(),\n  list: s.list(),\n  item: s.item(),\n  itemIndicator: s.itemIndicator(),\n  empty: s.empty(),\n  separator: s.separator(),\n  groupLabel: s.groupLabel(),\n});\n"]}

package/dist/components/segmented-button/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/segmented-button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/tv.ts","../../../src/components/segmented-button/segmented-button.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,oBAAoB,EAAA,CAAG;AAAA,EAClC,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,mEAAA;AAAA,IACN,IAAA,EAAM;AAAA,MACJ,mGAAA;AAAA,MACA,0CAAA;AAAA,MACA,0GAAA;AAAA,MACA,kCAAA;AAAA,MACA,8CAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,qDAAA;AAAA,MACA,kFAAA;AAAA;AAAA,MAEA,4FAAA;AAAA,MACA,sEAAA;AAAA,MACA,yEAAA;AAAA,MACA,wDAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,6GAAA;AAAA,MACA,2CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM,kGAAA;AAAA,IACN,KAAA,EAAO;AAAA;AAEX,CAAC;AAED,IAAM,IAAI,iBAAA,EAAkB;AACrB,IAAM,kBAAkB,qBAAA,CAAsB;AAAA,EACnD,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA;AACX,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 * segmented-button.ts — tailwind-variants slots for the M3 SegmentedButton.\n *\n * A 40dp-tall connected row with a shared outline; segments divide with a left\n * border. The selected segment surfaces `data-pressed` (Base UI Toggle) → a\n * secondary-container fill that reveals the leading checkmark (and hides any\n * provided icon) via the `group`. State layer is the item `::before`; the\n * pointer ripple is added by the factory. Same DOM as the VE build.\n */\nimport { createSegmentedButton } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const segmentedButtonTv = tv({\n  slots: {\n    root: 'inline-flex items-stretch h-10 rounded-full border border-outline',\n    item: [\n      'group relative inline-flex flex-1 items-center justify-center gap-2 px-3 min-w-12 overflow-hidden',\n      'first:rounded-s-full last:rounded-e-full',\n      'bg-transparent border-0 border-l border-outline first:border-l-0 cursor-pointer select-none outline-none',\n      'text-label-large text-on-surface',\n      'transition-colors duration-150 ease-standard',\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-[pressed]:bg-secondary-container data-[pressed]:text-on-secondary-container',\n      // M3 disabled: label on-surface/38, divider outline on-surface/12 (material-web).\n      'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n      'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n      'data-[disabled]:text-on-surface/38 data-[disabled]:border-on-surface/12',\n      'disabled:pointer-events-none disabled:before:opacity-0',\n      'disabled:text-on-surface/38 disabled:border-on-surface/12',\n    ],\n    check: [\n      'inline-flex items-center justify-center shrink-0 h-[18px] w-0 opacity-0 overflow-hidden pointer-events-none',\n      'transition-all duration-150 ease-standard',\n      'group-data-[pressed]:w-[18px] group-data-[pressed]:opacity-100',\n    ],\n    icon: 'inline-flex items-center justify-center shrink-0 [&_svg]:size-[18px] group-data-[pressed]:hidden',\n    label: 'truncate',\n  },\n});\n\nconst s = segmentedButtonTv();\nexport const SegmentedButton = createSegmentedButton({\n  root: s.root(),\n  item: s.item(),\n  check: s.check(),\n  icon: s.icon(),\n  label: s.label(),\n});\n"]}
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/segmented-button/segmented-button.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,oBAAoB,EAAA,CAAG;AAAA,EAClC,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,mEAAA;AAAA,IACN,IAAA,EAAM;AAAA,MACJ,mGAAA;AAAA,MACA,0CAAA;AAAA,MACA,0GAAA;AAAA,MACA,kCAAA;AAAA,MACA,8CAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,qDAAA;AAAA,MACA,kFAAA;AAAA;AAAA,MAEA,4FAAA;AAAA,MACA,sEAAA;AAAA,MACA,yEAAA;AAAA,MACA,wDAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,6GAAA;AAAA,MACA,2CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM,kGAAA;AAAA,IACN,KAAA,EAAO;AAAA;AAEX,CAAC;AAED,IAAM,IAAI,iBAAA,EAAkB;AACrB,IAAM,kBAAkB,qBAAA,CAAsB;AAAA,EACnD,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA;AACX,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 * segmented-button.ts — tailwind-variants slots for the M3 SegmentedButton.\n *\n * A 40dp-tall connected row with a shared outline; segments divide with a left\n * border. The selected segment surfaces `data-pressed` (Base UI Toggle) → a\n * secondary-container fill that reveals the leading checkmark (and hides any\n * provided icon) via the `group`. State layer is the item `::before`; the\n * pointer ripple is added by the factory. Same DOM as the VE build.\n */\nimport { createSegmentedButton } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const segmentedButtonTv = tv({\n  slots: {\n    root: 'inline-flex items-stretch h-10 rounded-full border border-outline',\n    item: [\n      'group relative inline-flex flex-1 items-center justify-center gap-2 px-3 min-w-12 overflow-hidden',\n      'first:rounded-s-full last:rounded-e-full',\n      'bg-transparent border-0 border-l border-outline first:border-l-0 cursor-pointer select-none outline-none',\n      'text-label-large text-on-surface',\n      'transition-colors duration-150 ease-standard',\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-[pressed]:bg-secondary-container data-[pressed]:text-on-secondary-container',\n      // M3 disabled: label on-surface/38, divider outline on-surface/12 (material-web).\n      'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n      'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n      'data-[disabled]:text-on-surface/38 data-[disabled]:border-on-surface/12',\n      'disabled:pointer-events-none disabled:before:opacity-0',\n      'disabled:text-on-surface/38 disabled:border-on-surface/12',\n    ],\n    check: [\n      'inline-flex items-center justify-center shrink-0 h-[18px] w-0 opacity-0 overflow-hidden pointer-events-none',\n      'transition-all duration-150 ease-standard',\n      'group-data-[pressed]:w-[18px] group-data-[pressed]:opacity-100',\n    ],\n    icon: 'inline-flex items-center justify-center shrink-0 [&_svg]:size-[18px] group-data-[pressed]:hidden',\n    label: 'truncate',\n  },\n});\n\nconst s = segmentedButtonTv();\nexport const SegmentedButton = createSegmentedButton({\n  root: s.root(),\n  item: s.item(),\n  check: s.check(),\n  icon: s.icon(),\n  label: s.label(),\n});\n"]}

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

@@ -16,8 +16,6 @@ declare const selectTv: tailwind_variants.TVReturnType<{
             groupLabel?: tailwind_merge.ClassNameValue;
             item?: tailwind_merge.ClassNameValue;
             trigger?: tailwind_merge.ClassNameValue;
-            scrollUpArrow?: tailwind_merge.ClassNameValue;
-            scrollDownArrow?: tailwind_merge.ClassNameValue;
         };
     };
 } | {
@@ -30,8 +28,6 @@ declare const selectTv: tailwind_variants.TVReturnType<{
             groupLabel?: tailwind_merge.ClassNameValue;
             item?: tailwind_merge.ClassNameValue;
             trigger?: tailwind_merge.ClassNameValue;
-            scrollUpArrow?: tailwind_merge.ClassNameValue;
-            scrollDownArrow?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
@@ -42,8 +38,6 @@ declare const selectTv: tailwind_variants.TVReturnType<{
     item: string[];
     itemIndicator: string;
     groupLabel: string;
-    scrollUpArrow: string[];
-    scrollDownArrow: string[];
 }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
     [key: string]: {
         [key: string]: tailwind_merge.ClassNameValue | {
@@ -54,8 +48,6 @@ declare const selectTv: tailwind_variants.TVReturnType<{
             groupLabel?: tailwind_merge.ClassNameValue;
             item?: tailwind_merge.ClassNameValue;
             trigger?: tailwind_merge.ClassNameValue;
-            scrollUpArrow?: tailwind_merge.ClassNameValue;
-            scrollDownArrow?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}>, {
@@ -68,8 +60,6 @@ declare const selectTv: tailwind_variants.TVReturnType<{
             groupLabel?: tailwind_merge.ClassNameValue;
             item?: tailwind_merge.ClassNameValue;
             trigger?: tailwind_merge.ClassNameValue;
-            scrollUpArrow?: tailwind_merge.ClassNameValue;
-            scrollDownArrow?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
@@ -80,8 +70,6 @@ declare const selectTv: tailwind_variants.TVReturnType<{
     item: string[];
     itemIndicator: string;
     groupLabel: string;
-    scrollUpArrow: string[];
-    scrollDownArrow: string[];
 }, tailwind_variants.TVReturnType<unknown, {
     trigger: string[];
     value: string;
@@ -90,8 +78,6 @@ declare const selectTv: tailwind_variants.TVReturnType<{
     item: string[];
     itemIndicator: string;
     groupLabel: string;
-    scrollUpArrow: string[];
-    scrollDownArrow: string[];
 }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
     [key: string]: {
         [key: string]: tailwind_merge.ClassNameValue | {
@@ -102,8 +88,6 @@ declare const selectTv: tailwind_variants.TVReturnType<{
             groupLabel?: tailwind_merge.ClassNameValue;
             item?: tailwind_merge.ClassNameValue;
             trigger?: tailwind_merge.ClassNameValue;
-            scrollUpArrow?: tailwind_merge.ClassNameValue;
-            scrollDownArrow?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;
@@ -244,8 +228,6 @@ declare const Select: {
     Item: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectItemProps, "ref"> & react.RefAttributes<HTMLElement>, "ref"> & react.RefAttributes<unknown>>;
     ItemText: react.NamedExoticComponent<Omit<_base_ui_react.SelectItemTextProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
     ItemIndicator: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectItemIndicatorProps, "ref"> & react.RefAttributes<HTMLSpanElement>, "ref"> & react.RefAttributes<unknown>>;
-    ScrollUpArrow: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectScrollUpArrowProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    ScrollDownArrow: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectScrollDownArrowProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
     Group: react.ForwardRefExoticComponent<Omit<_base_ui_react.SelectGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
     GroupLabel: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectGroupLabelProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
 };

package/dist/components/select/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] }]
       }
     }
   }
@@ -146,16 +158,7 @@ var selectTv = tv({
       "data-[disabled]:[&_[data-slot=select-trailing]]:text-on-surface/[0.38]"
     ],
     itemIndicator: selectable.itemIndicator(),
-    groupLabel: surface.groupLabel(),
-    // Sticky scroll affordances at the popup edges; surface-tinted with a chevron.
-    scrollUpArrow: [
-      "sticky top-0 z-[1] flex items-center justify-center h-6 cursor-default",
-      "bg-surface-container text-on-surface-variant [&>svg]:size-5"
-    ],
-    scrollDownArrow: [
-      "sticky bottom-0 z-[1] flex items-center justify-center h-6 cursor-default",
-      "bg-surface-container text-on-surface-variant [&>svg]:size-5"
-    ]
+    groupLabel: surface.groupLabel()
   }
 });
 var selectFieldTv = tv({
@@ -246,9 +249,7 @@ var Select = createSelect(
     popup: s.popup(),
     item: s.item(),
     itemIndicator: s.itemIndicator(),
-    groupLabel: s.groupLabel(),
-    scrollUpArrow: s.scrollUpArrow(),
-    scrollDownArrow: s.scrollDownArrow()
+    groupLabel: s.groupLabel()
   },
   ({ variant }) => {
     const f = selectFieldTv({ variant });