@m3-baseui/react-tailwind 2.0.0 → 4.0.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/tv.ts","../../../src/components/button-group/button-group.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,cAAc,EAAA,CAAG;AAAA,EAC5B,IAAA,EAAM,0BAAA;AAAA,EACN,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,QAAA,EAAU,OAAA;AAAA,MACV,SAAA,EAAW;AAAA,QACT,SAAA;AAAA,QACA,wDAAA;AAAA;AAAA;AAAA,QAGA,oDAAA;AAAA,QACA;AAAA;AACF;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAEM,IAAM,WAAA,GAAc,iBAAA,CAAkB,CAAC,EAAE,OAAA,OAAc,WAAA,CAAY,EAAE,OAAA,EAAS,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 * button-group.ts — tailwind-variants resolver for the M3 ButtonGroup.\n *\n * `standard` lays the buttons out with an 8dp gap; `connected` tightens the gap\n * to 2dp and reduces the children's inner-facing corners to the `small` shape\n * token so the row reads as one connected unit (outer corners stay full). The\n * child selectors carry enough specificity to win over each button's own\n * `rounded-full`. Same DOM + `role=\"group\"` as the VE build.\n */\nimport { createButtonGroup } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const buttonGroup = tv({\n  base: 'inline-flex items-center',\n  variants: {\n    variant: {\n      standard: 'gap-2',\n      connected: [\n        'gap-0.5',\n        '[&>*:not(:first-child):not(:last-child)]:rounded-small',\n        // Guard against a lone child (it is both first *and* last) — only morph\n        // the inner-facing corner when there is actually a sibling to face.\n        '[&>*:first-child:not(:last-child)]:rounded-e-small',\n        '[&>*:last-child:not(:first-child)]:rounded-s-small',\n      ],\n    },\n  },\n  defaultVariants: {\n    variant: 'standard',\n  },\n});\n\nexport const ButtonGroup = createButtonGroup(({ variant }) => buttonGroup({ variant }));\nexport type { ButtonGroupProps, ButtonGroupVariant } from '@m3-baseui/core';\n"]}
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/button-group/button-group.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,cAAc,EAAA,CAAG;AAAA,EAC5B,IAAA,EAAM,0BAAA;AAAA,EACN,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,QAAA,EAAU,OAAA;AAAA,MACV,SAAA,EAAW;AAAA,QACT,SAAA;AAAA,QACA,wDAAA;AAAA;AAAA;AAAA,QAGA,oDAAA;AAAA,QACA;AAAA;AACF;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAEM,IAAM,WAAA,GAAc,iBAAA,CAAkB,CAAC,EAAE,OAAA,OAAc,WAAA,CAAY,EAAE,OAAA,EAAS,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 * button-group.ts — tailwind-variants resolver for the M3 ButtonGroup.\n *\n * `standard` lays the buttons out with an 8dp gap; `connected` tightens the gap\n * to 2dp and reduces the children's inner-facing corners to the `small` shape\n * token so the row reads as one connected unit (outer corners stay full). The\n * child selectors carry enough specificity to win over each button's own\n * `rounded-full`. Same DOM + `role=\"group\"` as the VE build.\n */\nimport { createButtonGroup } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const buttonGroup = tv({\n  base: 'inline-flex items-center',\n  variants: {\n    variant: {\n      standard: 'gap-2',\n      connected: [\n        'gap-0.5',\n        '[&>*:not(:first-child):not(:last-child)]:rounded-small',\n        // Guard against a lone child (it is both first *and* last) — only morph\n        // the inner-facing corner when there is actually a sibling to face.\n        '[&>*:first-child:not(:last-child)]:rounded-e-small',\n        '[&>*:last-child:not(:first-child)]:rounded-s-small',\n      ],\n    },\n  },\n  defaultVariants: {\n    variant: 'standard',\n  },\n});\n\nexport const ButtonGroup = createButtonGroup(({ variant }) => buttonGroup({ variant }));\nexport type { ButtonGroupProps, ButtonGroupVariant } from '@m3-baseui/core';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/tv.ts","../../../src/components/card/card.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,SAAS,EAAA,CAAG;AAAA,EACvB,IAAA,EAAM,oDAAA;AAAA,EACN,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,QAAA,EAAU,wCAAA;AAAA,MACV,MAAA,EAAQ,8BAAA;AAAA,MACR,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,WAAA,EAAa;AAAA,MACX,IAAA,EAAM;AAAA,QACJ,gFAAA;AAAA;AAAA,QAEA,8CAAA;AAAA,QACA,4IAAA;AAAA,QACA,kDAAA;AAAA,QACA,0DAAA;AAAA,QACA,qDAAA;AAAA,QACA,4FAAA;AAAA;AAAA,QAEA,yGAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,gBAAA,EAAkB;AAAA;AAAA,IAEhB;AAAA,MACE,OAAA,EAAS,UAAA;AAAA,MACT,WAAA,EAAa,IAAA;AAAA,MACb,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS,UAAA;AAAA,IACT,WAAA,EAAa;AAAA;AAEjB,CAAC;AAEM,IAAM,OAAO,UAAA,CAAW;AAAA,EAC7B,IAAA,EAAM,CAAC,EAAE,OAAA,EAAS,WAAA,OAAkB,MAAA,CAAO,EAAE,OAAA,EAAS,WAAA,EAAa;AACrE,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 * card.ts — tailwind-variants slots for the M3 Card.\n *\n * 12dp corners. `elevated` is surface-container-low + level1, `filled` is\n * surface-container-highest (level0), `outlined` is surface + outline-variant.\n * Interactive cards add the `currentColor` state-layer `::before` (the pointer\n * ripple is added by the factory), a focus ring and per-token disabled dimming.\n * Same DOM + `data-*` as the VE build.\n */\nimport { createCard } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const cardTv = tv({\n  base: 'relative box-border rounded-medium text-on-surface',\n  variants: {\n    variant: {\n      elevated: 'bg-surface-container-low shadow-level1',\n      filled: 'bg-surface-container-highest',\n      outlined: 'bg-surface border border-outline-variant',\n    },\n    interactive: {\n      true: [\n        'group overflow-hidden cursor-pointer select-none text-left w-full outline-none',\n        // Animate the elevation lift/settle to match the VE box-shadow transition.\n        'transition-shadow 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        'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n        // M3 disabled: drop the shadow + state layer, dim the content per-token.\n        'disabled:pointer-events-none disabled:before:opacity-0 disabled:shadow-none disabled:text-on-surface/38',\n        'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0 data-[disabled]:shadow-none data-[disabled]:text-on-surface/38',\n      ],\n      false: '',\n    },\n  },\n  compoundVariants: [\n    // M3 interactive elevated: lifts to level2 on hover, settles to level1 on press.\n    {\n      variant: 'elevated',\n      interactive: true,\n      class: 'hover:shadow-level2 active:shadow-level1',\n    },\n  ],\n  defaultVariants: {\n    variant: 'elevated',\n    interactive: false,\n  },\n});\n\nexport const Card = createCard({\n  root: ({ variant, interactive }) => cardTv({ variant, interactive }),\n});\nexport type { CardProps, CardVariant } from '@m3-baseui/core';\n"]}
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/card/card.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,SAAS,EAAA,CAAG;AAAA,EACvB,IAAA,EAAM,oDAAA;AAAA,EACN,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,QAAA,EAAU,wCAAA;AAAA,MACV,MAAA,EAAQ,8BAAA;AAAA,MACR,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,WAAA,EAAa;AAAA,MACX,IAAA,EAAM;AAAA,QACJ,gFAAA;AAAA;AAAA,QAEA,8CAAA;AAAA,QACA,4IAAA;AAAA,QACA,kDAAA;AAAA,QACA,0DAAA;AAAA,QACA,qDAAA;AAAA,QACA,4FAAA;AAAA;AAAA,QAEA,yGAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,gBAAA,EAAkB;AAAA;AAAA,IAEhB;AAAA,MACE,OAAA,EAAS,UAAA;AAAA,MACT,WAAA,EAAa,IAAA;AAAA,MACb,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS,UAAA;AAAA,IACT,WAAA,EAAa;AAAA;AAEjB,CAAC;AAEM,IAAM,OAAO,UAAA,CAAW;AAAA,EAC7B,IAAA,EAAM,CAAC,EAAE,OAAA,EAAS,WAAA,OAAkB,MAAA,CAAO,EAAE,OAAA,EAAS,WAAA,EAAa;AACrE,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 * card.ts — tailwind-variants slots for the M3 Card.\n *\n * 12dp corners. `elevated` is surface-container-low + level1, `filled` is\n * surface-container-highest (level0), `outlined` is surface + outline-variant.\n * Interactive cards add the `currentColor` state-layer `::before` (the pointer\n * ripple is added by the factory), a focus ring and per-token disabled dimming.\n * Same DOM + `data-*` as the VE build.\n */\nimport { createCard } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const cardTv = tv({\n  base: 'relative box-border rounded-medium text-on-surface',\n  variants: {\n    variant: {\n      elevated: 'bg-surface-container-low shadow-level1',\n      filled: 'bg-surface-container-highest',\n      outlined: 'bg-surface border border-outline-variant',\n    },\n    interactive: {\n      true: [\n        'group overflow-hidden cursor-pointer select-none text-left w-full outline-none',\n        // Animate the elevation lift/settle to match the VE box-shadow transition.\n        'transition-shadow 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        'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n        // M3 disabled: drop the shadow + state layer, dim the content per-token.\n        'disabled:pointer-events-none disabled:before:opacity-0 disabled:shadow-none disabled:text-on-surface/38',\n        'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0 data-[disabled]:shadow-none data-[disabled]:text-on-surface/38',\n      ],\n      false: '',\n    },\n  },\n  compoundVariants: [\n    // M3 interactive elevated: lifts to level2 on hover, settles to level1 on press.\n    {\n      variant: 'elevated',\n      interactive: true,\n      class: 'hover:shadow-level2 active:shadow-level1',\n    },\n  ],\n  defaultVariants: {\n    variant: 'elevated',\n    interactive: false,\n  },\n});\n\nexport const Card = createCard({\n  root: ({ variant, interactive }) => cardTv({ variant, interactive }),\n});\nexport type { CardProps, CardVariant } from '@m3-baseui/core';\n"]}

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

@@ -9,6 +9,9 @@ declare const carouselTv: tailwind_variants.TVReturnType<{
         'multi-browse': {
             item: string;
         };
+        uncontained: {
+            item: string;
+        };
         hero: {
             item: string;
         };
@@ -25,6 +28,9 @@ declare const carouselTv: tailwind_variants.TVReturnType<{
         'multi-browse': {
             item: string;
         };
+        uncontained: {
+            item: string;
+        };
         hero: {
             item: string;
         };
@@ -38,6 +44,9 @@ declare const carouselTv: tailwind_variants.TVReturnType<{
         'multi-browse': {
             item: string;
         };
+        uncontained: {
+            item: string;
+        };
         hero: {
             item: string;
         };
@@ -51,6 +60,9 @@ declare const carouselTv: tailwind_variants.TVReturnType<{
         'multi-browse': {
             item: string;
         };
+        uncontained: {
+            item: string;
+        };
         hero: {
             item: string;
         };
@@ -67,6 +79,9 @@ declare const carouselTv: tailwind_variants.TVReturnType<{
         'multi-browse': {
             item: string;
         };
+        uncontained: {
+            item: string;
+        };
         hero: {
             item: string;
         };
@@ -83,6 +98,9 @@ declare const carouselTv: tailwind_variants.TVReturnType<{
         'multi-browse': {
             item: string;
         };
+        uncontained: {
+            item: string;
+        };
         hero: {
             item: string;
         };
@@ -96,6 +114,9 @@ declare const carouselTv: tailwind_variants.TVReturnType<{
         'multi-browse': {
             item: string;
         };
+        uncontained: {
+            item: string;
+        };
         hero: {
             item: string;
         };

package/dist/components/carousel/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] }]
       }
     }
   }
@@ -36,13 +48,19 @@ var carouselTv = tv({
   slots: {
     root: [
       "flex gap-2 overflow-x-auto snap-x snap-mandatory scroll-smooth",
-      "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+      // Keyboard focus ring (M3: 3px secondary, 2px offset); keyboard-only.
+      "outline-none focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary",
+      // Reduced motion: jump instead of smooth-scrolling between snap cells.
+      "motion-reduce:scroll-auto"
     ],
     item: "snap-start shrink-0 overflow-hidden rounded-large"
   },
   variants: {
     variant: {
       "multi-browse": { item: "w-40 h-56" },
+      // Uniform, wider cells that scroll past the container edge.
+      uncontained: { item: "w-56 h-56" },
       hero: { item: "w-72 h-56 snap-center" },
       "full-screen": {
         // gap-0: full-screen slides fill the viewport with no inter-slide gap.

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/tv.ts","../../../src/components/carousel/carousel.ts"],"names":["baseTv"],"mappings":";;;;;AAeA,IAAM,SAAA,GAAY;AAAA,EAChB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,EAAA,GAAS,CAAC,OAAA,EAAS,MAAA,KAC9BA,KAAO,OAAA,EAAS;AAAA,EACd,GAAG,MAAA;AAAA,EACH,aAAA,EAAe;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa;AAAA,QACX,WAAA,EAAa,CAAC,EAAE,IAAA,EAAM,CAAC,GAAG,SAAS,GAAG;AAAA;AACxC;AACF;AAEJ,CAAC,CAAA;;;AChCI,IAAM,aAAa,EAAA,CAAG;AAAA,EAC3B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,gEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,cAAA,EAAgB,EAAE,IAAA,EAAM,WAAA,EAAY;AAAA,MACpC,IAAA,EAAM,EAAE,IAAA,EAAM,uBAAA,EAAwB;AAAA,MACtC,aAAA,EAAe;AAAA;AAAA,QAEb,IAAA,EAAM,gEAAA;AAAA,QACN,IAAA,EAAM;AAAA;AACR;AACF,GACF;AAAA,EACA,eAAA,EAAiB,EAAE,OAAA,EAAS,cAAA;AAC9B,CAAC;AAEM,IAAM,QAAA,GAAW,cAAA,CAAe,CAAC,OAAA,KAAY;AAClD,EAAA,MAAM,CAAA,GAAI,UAAA,CAAW,EAAE,OAAA,EAAS,CAAA;AAChC,EAAA,OAAO,EAAE,MAAM,CAAA,CAAE,IAAA,IAAQ,IAAA,EAAM,CAAA,CAAE,MAAK,EAAE;AAC1C,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 * carousel.ts — tailwind-variants slots for the M3 Carousel.\n *\n * Root is a scroll-snap scroller (hidden scrollbar); items are snap-aligned,\n * `large`-radius cells. `multi-browse` and `hero` scroll horizontally (hero\n * items are wider and centre-snap); `full-screen` stacks full-size items\n * vertically. Same DOM as the VE build.\n */\nimport { createCarousel } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const carouselTv = tv({\n  slots: {\n    root: [\n      'flex gap-2 overflow-x-auto snap-x snap-mandatory scroll-smooth',\n      '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',\n    ],\n    item: 'snap-start shrink-0 overflow-hidden rounded-large',\n  },\n  variants: {\n    variant: {\n      'multi-browse': { item: 'w-40 h-56' },\n      hero: { item: 'w-72 h-56 snap-center' },\n      'full-screen': {\n        // gap-0: full-screen slides fill the viewport with no inter-slide gap.\n        root: 'flex-col gap-0 overflow-x-hidden overflow-y-auto snap-y h-full',\n        item: 'w-full h-full snap-center',\n      },\n    },\n  },\n  defaultVariants: { variant: 'multi-browse' },\n});\n\nexport const Carousel = createCarousel((variant) => {\n  const s = carouselTv({ variant });\n  return { root: s.root(), item: s.item() };\n});\nexport type { CarouselVariant } from '@m3-baseui/core';\n"]}
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/carousel/carousel.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;;;AClDI,IAAM,aAAa,EAAA,CAAG;AAAA,EAC3B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,gEAAA;AAAA,MACA,sDAAA;AAAA;AAAA,MAEA,yGAAA;AAAA;AAAA,MAEA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,cAAA,EAAgB,EAAE,IAAA,EAAM,WAAA,EAAY;AAAA;AAAA,MAEpC,WAAA,EAAa,EAAE,IAAA,EAAM,WAAA,EAAY;AAAA,MACjC,IAAA,EAAM,EAAE,IAAA,EAAM,uBAAA,EAAwB;AAAA,MACtC,aAAA,EAAe;AAAA;AAAA,QAEb,IAAA,EAAM,gEAAA;AAAA,QACN,IAAA,EAAM;AAAA;AACR;AACF,GACF;AAAA,EACA,eAAA,EAAiB,EAAE,OAAA,EAAS,cAAA;AAC9B,CAAC;AAEM,IAAM,QAAA,GAAW,cAAA,CAAe,CAAC,OAAA,KAAY;AAClD,EAAA,MAAM,CAAA,GAAI,UAAA,CAAW,EAAE,OAAA,EAAS,CAAA;AAChC,EAAA,OAAO,EAAE,MAAM,CAAA,CAAE,IAAA,IAAQ,IAAA,EAAM,CAAA,CAAE,MAAK,EAAE;AAC1C,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 * carousel.ts — tailwind-variants slots for the M3 Carousel.\n *\n * Root is a scroll-snap scroller (hidden scrollbar) that is keyboard-focusable:\n * a 3px secondary focus-visible ring makes that focus visible (WCAG 2.4.7), and\n * `motion-reduce:scroll-auto` drops the smooth snap animation under\n * `prefers-reduced-motion`. Items are snap-aligned, `large`-radius cells.\n * `multi-browse`, `uncontained`, and `hero` scroll horizontally (hero items are\n * wider and centre-snap; uncontained items are uniform and flow past the edge);\n * `full-screen` stacks full-size items vertically. Same DOM as the VE build.\n */\nimport { createCarousel } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const carouselTv = tv({\n  slots: {\n    root: [\n      'flex gap-2 overflow-x-auto snap-x snap-mandatory scroll-smooth',\n      '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',\n      // Keyboard focus ring (M3: 3px secondary, 2px offset); keyboard-only.\n      'outline-none focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n      // Reduced motion: jump instead of smooth-scrolling between snap cells.\n      'motion-reduce:scroll-auto',\n    ],\n    item: 'snap-start shrink-0 overflow-hidden rounded-large',\n  },\n  variants: {\n    variant: {\n      'multi-browse': { item: 'w-40 h-56' },\n      // Uniform, wider cells that scroll past the container edge.\n      uncontained: { item: 'w-56 h-56' },\n      hero: { item: 'w-72 h-56 snap-center' },\n      'full-screen': {\n        // gap-0: full-screen slides fill the viewport with no inter-slide gap.\n        root: 'flex-col gap-0 overflow-x-hidden overflow-y-auto snap-y h-full',\n        item: 'w-full h-full snap-center',\n      },\n    },\n  },\n  defaultVariants: { variant: 'multi-browse' },\n});\n\nexport const Carousel = createCarousel((variant) => {\n  const s = carouselTv({ variant });\n  return { root: s.root(), item: s.item() };\n});\nexport type { CarouselVariant } from '@m3-baseui/core';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/tv.ts","../../../src/components/date-picker/date-picker.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 * date-picker.ts — Tailwind classes for the M3 Date picker.\n *\n * The month-grid Calendar plus its two surfaces: a docked Popover\n * (surface-container-high, elevation 2, large corners) and a modal Dialog\n * (surface-container-high, elevation 3, extra-large corners). Day cells carry a\n * circular `before:` state layer keyed to hover; the selected day fills with\n * primary. Same DOM + ripple as the VE build.\n */\nimport { createDatePicker } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const datePickerTv = tv({\n  slots: {\n    calendar: ['w-[328px] max-w-full p-3 text-on-surface'],\n    header: ['flex items-center justify-between gap-2 h-12 pl-3 pr-1'],\n    navButton: [\n      'relative inline-flex 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      'disabled:text-on-surface/[0.38] disabled:before:opacity-0 disabled:pointer-events-none',\n    ],\n    monthLabel: [\n      'relative inline-flex items-center gap-1 h-9 px-3 rounded-full overflow-hidden',\n      'text-label-large text-on-surface-variant cursor-pointer 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      '[&>svg]:transition-transform data-[view=years]:[&>svg]:rotate-180',\n    ],\n    grid: ['mt-2 border-collapse', '[&_td]:p-0 [&_td]:text-center'],\n    weekdays: [''],\n    weekday: ['size-12 font-normal text-body-large text-on-surface-variant'],\n    day: [\n      'relative inline-flex items-center justify-center size-12 rounded-full overflow-hidden',\n      'text-body-large text-on-surface cursor-pointer outline-none',\n      'before:absolute before:inset-0 before:rounded-full 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      // today: 1px primary outline ring\n      'data-[today]:ring-1 data-[today]:ring-inset data-[today]:ring-primary',\n      // selected: primary fill, on-primary label, no state layer tint shift\n      'data-[selected]:bg-primary data-[selected]:text-on-primary',\n      'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n    ],\n    // weeks render as 7-col rows; force grid layout on each row\n    yearGrid: ['grid grid-cols-3 gap-2 max-h-[280px] overflow-y-auto px-3 py-2'],\n    yearButton: [\n      'relative inline-flex items-center justify-center h-9 rounded-full overflow-hidden',\n      'text-label-large text-on-surface-variant cursor-pointer 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      'data-[selected]:bg-primary data-[selected]:text-on-primary',\n    ],\n\n    field: [\n      'inline-flex items-center gap-1 h-14 pl-4 pr-1 min-w-[200px]',\n      'bg-surface-container-highest text-on-surface rounded-t-extra-small',\n      'border-b border-on-surface-variant',\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    fieldIcon: [\n      'relative inline-flex 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      'bg-surface-container-high text-on-surface rounded-large 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    ],\n\n    modalBackdrop: [\n      'fixed inset-0 z-40 bg-scrim/32',\n      'transition-opacity duration-200 ease-standard',\n      'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0',\n    ],\n    modalPopup: [\n      'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',\n      'w-[min(360px,calc(100vw-48px))] max-h-[calc(100vh-48px)] overflow-auto',\n      'bg-surface-container-high text-on-surface rounded-extra-large shadow-level3',\n      'flex flex-col',\n      'origin-[var(--transform-origin)] transition-[opacity,transform] duration-200 ease-emphasized',\n      'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n      'data-[ending-style]:opacity-0 data-[ending-style]:scale-95',\n      'focus:outline-none',\n    ],\n    modalHeader: ['px-6 pt-4 text-label-medium text-on-surface-variant m-0'],\n    modalHeadline: ['px-6 pt-1 pb-4 text-headline-large text-on-surface m-0'],\n    modalActions: ['flex justify-end gap-2 px-6 pb-4 pt-2'],\n  },\n});\n\nconst dp = datePickerTv();\nexport const DatePicker: ReturnType<typeof createDatePicker> = createDatePicker({\n  calendar: dp.calendar(),\n  header: dp.header(),\n  navButton: dp.navButton(),\n  monthLabel: dp.monthLabel(),\n  grid: dp.grid(),\n  weekdays: dp.weekdays(),\n  weekday: dp.weekday(),\n  day: dp.day(),\n  yearGrid: dp.yearGrid(),\n  yearButton: dp.yearButton(),\n  field: dp.field(),\n  input: dp.input(),\n  fieldIcon: dp.fieldIcon(),\n  popup: dp.popup(),\n  modalBackdrop: dp.modalBackdrop(),\n  modalPopup: dp.modalPopup(),\n  modalHeader: dp.modalHeader(),\n  modalHeadline: dp.modalHeadline(),\n  modalActions: dp.modalActions(),\n});\n"]}
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/date-picker/date-picker.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 * date-picker.ts — Tailwind classes for the M3 Date picker.\n *\n * The month-grid Calendar plus its two surfaces: a docked Popover\n * (surface-container-high, elevation 2, large corners) and a modal Dialog\n * (surface-container-high, elevation 3, extra-large corners). Day cells carry a\n * circular `before:` state layer keyed to hover; the selected day fills with\n * primary. Same DOM + ripple as the VE build.\n */\nimport { createDatePicker } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const datePickerTv = tv({\n  slots: {\n    calendar: ['w-[328px] max-w-full p-3 text-on-surface'],\n    header: ['flex items-center justify-between gap-2 h-12 pl-3 pr-1'],\n    navButton: [\n      'relative inline-flex 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      'disabled:text-on-surface/[0.38] disabled:before:opacity-0 disabled:pointer-events-none',\n    ],\n    monthLabel: [\n      'relative inline-flex items-center gap-1 h-9 px-3 rounded-full overflow-hidden',\n      'text-label-large text-on-surface-variant cursor-pointer 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      '[&>svg]:transition-transform data-[view=years]:[&>svg]:rotate-180',\n    ],\n    grid: ['mt-2 border-collapse', '[&_td]:p-0 [&_td]:text-center'],\n    weekdays: [''],\n    weekday: ['size-12 font-normal text-body-large text-on-surface-variant'],\n    day: [\n      'relative inline-flex items-center justify-center size-12 rounded-full overflow-hidden',\n      'text-body-large text-on-surface cursor-pointer outline-none',\n      'before:absolute before:inset-0 before:rounded-full 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      // today: 1px primary outline ring\n      'data-[today]:ring-1 data-[today]:ring-inset data-[today]:ring-primary',\n      // selected: primary fill, on-primary label, no state layer tint shift\n      'data-[selected]:bg-primary data-[selected]:text-on-primary',\n      'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n    ],\n    // weeks render as 7-col rows; force grid layout on each row\n    yearGrid: ['grid grid-cols-3 gap-2 max-h-[280px] overflow-y-auto px-3 py-2'],\n    yearButton: [\n      'relative inline-flex items-center justify-center h-9 rounded-full overflow-hidden',\n      'text-label-large text-on-surface-variant cursor-pointer 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      'data-[selected]:bg-primary data-[selected]:text-on-primary',\n    ],\n\n    field: [\n      'inline-flex items-center gap-1 h-14 pl-4 pr-1 min-w-[200px]',\n      'bg-surface-container-highest text-on-surface rounded-t-extra-small',\n      'border-b border-on-surface-variant',\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    fieldIcon: [\n      'relative inline-flex 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      'bg-surface-container-high text-on-surface rounded-large 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    ],\n\n    modalBackdrop: [\n      'fixed inset-0 z-40 bg-scrim/32',\n      'transition-opacity duration-200 ease-standard',\n      'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0',\n    ],\n    modalPopup: [\n      'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',\n      'w-[min(360px,calc(100vw-48px))] max-h-[calc(100vh-48px)] overflow-auto',\n      'bg-surface-container-high text-on-surface rounded-extra-large shadow-level3',\n      'flex flex-col',\n      'origin-[var(--transform-origin)] transition-[opacity,transform] duration-200 ease-emphasized',\n      'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n      'data-[ending-style]:opacity-0 data-[ending-style]:scale-95',\n      'focus:outline-none',\n    ],\n    modalHeader: ['px-6 pt-4 text-label-medium text-on-surface-variant m-0'],\n    modalHeadline: ['px-6 pt-1 pb-4 text-headline-large text-on-surface m-0'],\n    modalActions: ['flex justify-end gap-2 px-6 pb-4 pt-2'],\n  },\n});\n\nconst dp = datePickerTv();\nexport const DatePicker: ReturnType<typeof createDatePicker> = createDatePicker({\n  calendar: dp.calendar(),\n  header: dp.header(),\n  navButton: dp.navButton(),\n  monthLabel: dp.monthLabel(),\n  grid: dp.grid(),\n  weekdays: dp.weekdays(),\n  weekday: dp.weekday(),\n  day: dp.day(),\n  yearGrid: dp.yearGrid(),\n  yearButton: dp.yearButton(),\n  field: dp.field(),\n  input: dp.input(),\n  fieldIcon: dp.fieldIcon(),\n  popup: dp.popup(),\n  modalBackdrop: dp.modalBackdrop(),\n  modalPopup: dp.modalPopup(),\n  modalHeader: dp.modalHeader(),\n  modalHeadline: dp.modalHeadline(),\n  modalActions: dp.modalActions(),\n});\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/tv.ts","../../../src/components/dialog/dialog.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,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,QAAA,EAAU;AAAA,MACR,gCAAA;AAAA,MACA,+CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,sFAAA;AAAA,MACA,8FAAA;AAAA;AAAA,MAEA;AAAA,KACF;AAAA;AAAA;AAAA,IAGA,MAAA,EAAQ;AAAA,MACN,4CAAA;AAAA,MACA;AAAA,KACF;AAAA;AAAA,IAEA,IAAA,EAAM,CAAC,wCAAwC,CAAA;AAAA,IAC/C,KAAA,EAAO,CAAC,yCAAyC,CAAA;AAAA,IACjD,WAAA,EAAa,CAAC,8CAA8C,CAAA;AAAA;AAAA,IAE5D,OAAA,EAAS,CAAC,sDAAsD,CAAA;AAAA;AAAA;AAAA,IAGhE,OAAA,EAAS,CAAC,0CAA0C,CAAA;AAAA,IACpD,KAAA,EAAO,CAAC,aAAa;AAAA,GACvB;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAA,EAAY;AAAA,MACV,KAAA,EAAO;AAAA,QACL,KAAA,EAAO;AAAA,UACL,oDAAA;AAAA,UACA,wEAAA;AAAA,UACA,uEAAA;AAAA,UACA,gEAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,KAAA,EAAO;AAAA,UACL,8DAAA;AAAA,UACA;AAAA;AACF;AACF;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,UAAA,EAAY;AAAA;AAEhB,CAAC;AAED,IAAM,IAAI,QAAA,EAAS;AACZ,IAAM,SAAS,YAAA,CAAa;AAAA,EACjC,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,KAAA,EAAO,CAAC,EAAE,UAAA,EAAW,KAAM,SAAS,EAAE,UAAA,EAAY,CAAA,CAAE,KAAA,EAAM;AAAA,EAC1D,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,EACjB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,WAAA,EAAa,EAAE,WAAA,EAAY;AAAA,EAC3B,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,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 * dialog.ts — Tailwind classes for the M3 Dialog (basic + fullscreen).\n *\n * Scrim backdrop + a surface popup with an emphasized fade/scale transition off\n * Base UI's data-[starting-style] / data-[ending-style] attributes. The basic\n * variant is a centered surface-container-high card (extra-large corners,\n * elevation 3, 280–560dp wide); the `fullscreen` variant is an edge-to-edge\n * `surface` with a header row + divider. An optional centered hero icon\n * (`data-slot=\"dialog-icon\"`) center-aligns the headline/supporting text.\n */\nimport { createDialog } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const dialogTv = tv({\n  slots: {\n    backdrop: [\n      'fixed inset-0 z-40 bg-scrim/32',\n      'transition-opacity duration-200 ease-standard',\n      'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0',\n    ],\n    popup: [\n      'fixed z-50 box-border overflow-auto flex flex-col text-on-surface focus:outline-none',\n      'origin-[var(--transform-origin)] transition-[opacity,transform] duration-200 ease-emphasized',\n      // Icon present → center the headline + supporting text (M3 hero icon).\n      'has-[[data-slot=dialog-icon]]:text-center',\n    ],\n    // Fullscreen header row: leading close icon + title (grows, but shrinks +\n    // ellipsizes instead of pushing the trailing action off-screen) + action.\n    header: [\n      'flex items-center gap-2 px-2 h-14 shrink-0',\n      '[&>*:nth-child(2)]:grow [&>*:nth-child(2)]:min-w-0 [&>*:nth-child(2)]:overflow-hidden [&>*:nth-child(2)]:text-ellipsis [&>*:nth-child(2)]:whitespace-nowrap',\n    ],\n    // Centered 24dp hero icon in the secondary color.\n    icon: ['inline-flex self-center text-secondary'],\n    title: ['text-headline-small text-on-surface m-0'],\n    description: ['text-body-medium text-on-surface-variant m-0'],\n    // 1dp outline-variant rule under the fullscreen header.\n    divider: ['h-px w-full bg-outline-variant shrink-0 m-0 border-0'],\n    // End-aligned action row: 8dp between buttons; the popup gap (16dp) + mt-2\n    // (8dp) totals the 24dp M3 spacing above the actions.\n    actions: ['flex justify-end items-center gap-2 mt-2'],\n    close: ['inline-flex'],\n  },\n  variants: {\n    fullscreen: {\n      false: {\n        popup: [\n          'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',\n          'w-[min(560px,calc(100vw-48px))] min-w-[280px] max-h-[calc(100vh-48px)]',\n          'p-6 gap-4 rounded-extra-large bg-surface-container-high shadow-level3',\n          'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n          'data-[ending-style]:opacity-0 data-[ending-style]:scale-95',\n        ],\n      },\n      true: {\n        popup: [\n          'inset-0 w-screen h-screen max-w-none rounded-none bg-surface',\n          'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0',\n        ],\n      },\n    },\n  },\n  defaultVariants: {\n    fullscreen: false,\n  },\n});\n\nconst d = dialogTv();\nexport const Dialog = createDialog({\n  backdrop: d.backdrop(),\n  popup: ({ fullscreen }) => dialogTv({ fullscreen }).popup(),\n  header: d.header(),\n  icon: d.icon(),\n  title: d.title(),\n  description: d.description(),\n  divider: d.divider(),\n  actions: d.actions(),\n  close: d.close(),\n});\n"]}
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/dialog/dialog.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;;;ACnDI,IAAM,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,QAAA,EAAU;AAAA,MACR,gCAAA;AAAA,MACA,+CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,sFAAA;AAAA,MACA,8FAAA;AAAA;AAAA,MAEA;AAAA,KACF;AAAA;AAAA;AAAA,IAGA,MAAA,EAAQ;AAAA,MACN,4CAAA;AAAA,MACA;AAAA,KACF;AAAA;AAAA,IAEA,IAAA,EAAM,CAAC,wCAAwC,CAAA;AAAA,IAC/C,KAAA,EAAO,CAAC,yCAAyC,CAAA;AAAA,IACjD,WAAA,EAAa,CAAC,8CAA8C,CAAA;AAAA;AAAA,IAE5D,OAAA,EAAS,CAAC,sDAAsD,CAAA;AAAA;AAAA;AAAA,IAGhE,OAAA,EAAS,CAAC,0CAA0C,CAAA;AAAA,IACpD,KAAA,EAAO,CAAC,aAAa;AAAA,GACvB;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAA,EAAY;AAAA,MACV,KAAA,EAAO;AAAA,QACL,KAAA,EAAO;AAAA,UACL,oDAAA;AAAA,UACA,wEAAA;AAAA,UACA,uEAAA;AAAA,UACA,gEAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,KAAA,EAAO;AAAA,UACL,8DAAA;AAAA,UACA;AAAA;AACF;AACF;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,UAAA,EAAY;AAAA;AAEhB,CAAC;AAED,IAAM,IAAI,QAAA,EAAS;AACZ,IAAM,SAAS,YAAA,CAAa;AAAA,EACjC,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,KAAA,EAAO,CAAC,EAAE,UAAA,EAAW,KAAM,SAAS,EAAE,UAAA,EAAY,CAAA,CAAE,KAAA,EAAM;AAAA,EAC1D,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,EACjB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,WAAA,EAAa,EAAE,WAAA,EAAY;AAAA,EAC3B,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,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 * dialog.ts — Tailwind classes for the M3 Dialog (basic + fullscreen).\n *\n * Scrim backdrop + a surface popup with an emphasized fade/scale transition off\n * Base UI's data-[starting-style] / data-[ending-style] attributes. The basic\n * variant is a centered surface-container-high card (extra-large corners,\n * elevation 3, 280–560dp wide); the `fullscreen` variant is an edge-to-edge\n * `surface` with a header row + divider. An optional centered hero icon\n * (`data-slot=\"dialog-icon\"`) center-aligns the headline/supporting text.\n */\nimport { createDialog } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const dialogTv = tv({\n  slots: {\n    backdrop: [\n      'fixed inset-0 z-40 bg-scrim/32',\n      'transition-opacity duration-200 ease-standard',\n      'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0',\n    ],\n    popup: [\n      'fixed z-50 box-border overflow-auto flex flex-col text-on-surface focus:outline-none',\n      'origin-[var(--transform-origin)] transition-[opacity,transform] duration-200 ease-emphasized',\n      // Icon present → center the headline + supporting text (M3 hero icon).\n      'has-[[data-slot=dialog-icon]]:text-center',\n    ],\n    // Fullscreen header row: leading close icon + title (grows, but shrinks +\n    // ellipsizes instead of pushing the trailing action off-screen) + action.\n    header: [\n      'flex items-center gap-2 px-2 h-14 shrink-0',\n      '[&>*:nth-child(2)]:grow [&>*:nth-child(2)]:min-w-0 [&>*:nth-child(2)]:overflow-hidden [&>*:nth-child(2)]:text-ellipsis [&>*:nth-child(2)]:whitespace-nowrap',\n    ],\n    // Centered 24dp hero icon in the secondary color.\n    icon: ['inline-flex self-center text-secondary'],\n    title: ['text-headline-small text-on-surface m-0'],\n    description: ['text-body-medium text-on-surface-variant m-0'],\n    // 1dp outline-variant rule under the fullscreen header.\n    divider: ['h-px w-full bg-outline-variant shrink-0 m-0 border-0'],\n    // End-aligned action row: 8dp between buttons; the popup gap (16dp) + mt-2\n    // (8dp) totals the 24dp M3 spacing above the actions.\n    actions: ['flex justify-end items-center gap-2 mt-2'],\n    close: ['inline-flex'],\n  },\n  variants: {\n    fullscreen: {\n      false: {\n        popup: [\n          'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',\n          'w-[min(560px,calc(100vw-48px))] min-w-[280px] max-h-[calc(100vh-48px)]',\n          'p-6 gap-4 rounded-extra-large bg-surface-container-high shadow-level3',\n          'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n          'data-[ending-style]:opacity-0 data-[ending-style]:scale-95',\n        ],\n      },\n      true: {\n        popup: [\n          'inset-0 w-screen h-screen max-w-none rounded-none bg-surface',\n          'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0',\n        ],\n      },\n    },\n  },\n  defaultVariants: {\n    fullscreen: false,\n  },\n});\n\nconst d = dialogTv();\nexport const Dialog = createDialog({\n  backdrop: d.backdrop(),\n  popup: ({ fullscreen }) => dialogTv({ fullscreen }).popup(),\n  header: d.header(),\n  icon: d.icon(),\n  title: d.title(),\n  description: d.description(),\n  divider: d.divider(),\n  actions: d.actions(),\n  close: d.close(),\n});\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/tv.ts","../../../src/components/fab/fab.ts","../../../src/components/fab-menu/fab-menu.ts"],"names":["baseTv","tv"],"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;AC7BI,IAAM,QAAQC,IAAAA,CAAG;AAAA,EACtB,IAAA,EAAM;AAAA,IACJ,6EAAA;AAAA,IACA,kDAAA;AAAA,IACA,mCAAA;AAAA,IACA,8CAAA;AAAA,IACA,4IAAA;AAAA,IACA,kDAAA;AAAA,IACA,0DAAA;AAAA,IACA,qDAAA;AAAA,IACA,6DAAA;AAAA;AAAA;AAAA,IAGA,6EAAA;AAAA,IACA,uDAAA;AAAA,IACA,kGAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,QAAA,EAAU;AAAA;AAAA;AAAA,IAGR,MAAM,EAAE,KAAA,EAAO,IAAI,MAAA,EAAQ,EAAA,EAAI,OAAO,EAAA,EAAG;AAAA,IACzC,OAAA,EAAS,EAAE,QAAA,EAAU,EAAA,EAAI,UAAU,EAAA,EAAG;AAAA,IACtC,KAAA,EAAO;AAAA,MACL,OAAA,EAAS,gDAAA;AAAA,MACT,SAAA,EAAW,oDAAA;AAAA,MACX,QAAA,EAAU;AAAA;AACZ,GACF;AAAA,EACA,gBAAA,EAAkB;AAAA;AAAA,IAEhB,EAAE,IAAA,EAAM,OAAA,EAAS,OAAA,EAAS,UAAA,EAAY,OAAO,sCAAA,EAAuC;AAAA;AAAA,IACpF;AAAA,MACE,IAAA,EAAM,QAAA;AAAA,MACN,OAAA,EAAS,UAAA;AAAA,MACT,KAAA,EAAO;AAAA;AAAA,KACT;AAAA,IACA,EAAE,IAAA,EAAM,OAAA,EAAS,OAAA,EAAS,UAAA,EAAY,OAAO,4CAAA,EAA6C;AAAA;AAAA;AAAA;AAAA;AAAA,IAI1F;AAAA,MACE,IAAA,EAAM,OAAA;AAAA,MACN,OAAA,EAAS,UAAA;AAAA,MACT,KAAA,EAAO;AAAA;AAAA,KACT;AAAA,IACA;AAAA,MACE,IAAA,EAAM,QAAA;AAAA,MACN,OAAA,EAAS,UAAA;AAAA,MACT,KAAA,EACE;AAAA;AAAA,KACJ;AAAA,IACA;AAAA,MACE,IAAA,EAAM,OAAA;AAAA,MACN,OAAA,EAAS,UAAA;AAAA,MACT,KAAA,EAAO;AAAA;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,OAAA;AAAA,IACN,OAAA,EAAS,UAAA;AAAA,IACT,KAAA,EAAO;AAAA;AAEX,CAAC,CAAA;AAEkB,SAAA,CAAU,CAAC,EAAE,MAAM,KAAA,EAAO,OAAA,EAAQ,KAAM,KAAA,CAAM,EAAE,IAAA,EAAM,KAAA,EAAO,OAAA,EAAS,CAAC;;;ACjEnF,IAAM,YAAY,EAAA,CAAG;AAAA,EAC1B,KAAA,EAAO;AAAA,IACL,KAAA,EAAO;AAAA,MACL,2DAAA;AAAA,MACA,4FAAA;AAAA,MACA,gEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,8EAAA;AAAA,MACA,wEAAA;AAAA,MACA,gFAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,+DAAA;AAAA,MACA,qDAAA;AAAA;AAAA,MAEA,0FAAA;AAAA;AAAA;AAAA,MAGA,kGAAA;AAAA,MACA;AAAA;AACF,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA,MACL,OAAA,EAAS,EAAE,IAAA,EAAM,gDAAA,EAAiD;AAAA,MAClE,SAAA,EAAW,EAAE,IAAA,EAAM,oDAAA,EAAqD;AAAA,MACxE,QAAA,EAAU,EAAE,IAAA,EAAM,kDAAA;AAAmD;AACvE,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,KAAA,EAAO;AAAA;AAEX,CAAC;AAEM,IAAM,OAAA,GAAU,aAAA,CAAc,CAAC,EAAE,IAAA,EAAM,KAAA,EAAM,KAAM,KAAA,CAAM,EAAE,IAAA,EAAM,KAAA,EAAO,CAAA,EAAG;AAAA,EAChF,KAAA,EAAO,SAAA,EAAU,CAAE,KAAA,EAAM;AAAA,EACzB,IAAA,EAAM,CAAC,KAAA,KAAU,SAAA,CAAU,EAAE,KAAA,EAAO,EAAE,IAAA;AACxC,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 * fab.ts — tailwind-variants for the M3 (Expressive) FAB.\n *\n * Three sizes (small 56 / medium 80 / large 96 dp) × two variants (standard\n * icon-only square, extended icon + label pill) × three container colors\n * (primary / secondary / tertiary). Elevation level3 (level4 on hover) and a\n * currentColor state-layer `::before`. The size×variant geometry (container,\n * corner, icon, padding, label typescale) is resolved via compoundVariants so\n * every M3 combination maps to exact dp values. The pointer ripple is added by\n * the factory. Same DOM as the VE build.\n */\nimport { createFab } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const fabTv = tv({\n  base: [\n    'relative inline-flex items-center justify-center box-border overflow-hidden',\n    'border-0 cursor-pointer select-none outline-none',\n    'shadow-level3 hover:shadow-level4',\n    'transition-shadow 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]:before:opacity-[var(--md-sys-state-pressed)]',\n    // M3 discourages disabled FABs (material-web removed the state). When native\n    // disabled is used, apply the same container/label tokens as filled buttons.\n    'disabled:pointer-events-none disabled:shadow-none disabled:before:opacity-0',\n    'disabled:bg-on-surface/12 disabled:text-on-surface/38',\n    'data-[disabled]:pointer-events-none data-[disabled]:shadow-none data-[disabled]:before:opacity-0',\n    'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38',\n  ],\n  variants: {\n    // Geometry is set by compoundVariants (size × variant); these keys exist so\n    // the resolver can accept them.\n    size: { small: '', medium: '', large: '' },\n    variant: { standard: '', extended: '' },\n    color: {\n      primary: 'bg-primary-container text-on-primary-container',\n      secondary: 'bg-secondary-container text-on-secondary-container',\n      tertiary: 'bg-tertiary-container text-on-tertiary-container',\n    },\n  },\n  compoundVariants: [\n    // ---- Standard (icon-only square): container / corner / icon ----\n    { size: 'small', variant: 'standard', class: 'size-14 rounded-large [&_svg]:size-6' }, // 56 / 16 / 24\n    {\n      size: 'medium',\n      variant: 'standard',\n      class: 'size-20 rounded-large-increased [&_svg]:size-7', // 80 / 20 / 28\n    },\n    { size: 'large', variant: 'standard', class: 'size-24 rounded-extra-large [&_svg]:size-8' }, // 96 / 28 / 32\n    // ---- Extended (icon + label pill): height / corner / icon / padding / gap / label ----\n    // `min-w-*` keeps the pill affordance for short / text-only labels (wider\n    // than tall), matching the pre-Expressive extended FAB which guarded this.\n    {\n      size: 'small',\n      variant: 'extended',\n      class: 'h-14 min-w-20 px-4 gap-2 rounded-large text-title-medium [&_svg]:size-6', // 56 / 16 / 24 / 16 / 8\n    },\n    {\n      size: 'medium',\n      variant: 'extended',\n      class:\n        'h-20 min-w-28 px-[26px] gap-4 rounded-large-increased text-title-large [&_svg]:size-7', // 80 / 20 / 28 / 26 / 16\n    },\n    {\n      size: 'large',\n      variant: 'extended',\n      class: 'h-24 min-w-32 px-7 gap-5 rounded-extra-large text-headline-small [&_svg]:size-8', // 96 / 28 / 32 / 28 / 20\n    },\n  ],\n  defaultVariants: {\n    size: 'small',\n    variant: 'standard',\n    color: 'primary',\n  },\n});\n\nexport const Fab = createFab(({ size, color, variant }) => fabTv({ size, color, variant }));\nexport type { FabProps, FabSize, FabVariant, FabColor } from '@m3-baseui/core';\n","/**\n * fab-menu.ts — tailwind-variants for the M3 (Expressive) FAB menu.\n *\n * The popup stacks the actions in a right-aligned column (4dp between items) with\n * the M3 menu enter/exit motion; each item is a 56dp full-corner pill (elevation\n * level3, level4 on hover) with a currentColor state-layer `::before`, a 24dp\n * leading icon slot, 24dp leading/trailing padding, an 8dp icon-label gap and a\n * title-medium label. The trigger reuses the FAB resolver. Same DOM + ripple as\n * the VE build.\n */\nimport { createFabMenu } from '@m3-baseui/core';\nimport { tv } from '../../tv';\nimport { fabTv } from '../fab/fab';\n\nexport const fabMenuTv = tv({\n  slots: {\n    popup: [\n      'flex flex-col items-end gap-1 bg-transparent outline-none',\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    ],\n    item: [\n      'relative inline-flex items-center gap-2 h-14 px-6 overflow-hidden box-border',\n      'cursor-pointer select-none outline-none rounded-full text-title-medium',\n      'shadow-level3 hover:shadow-level4 transition-shadow 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      'data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n      // M3 leading icon (24dp).\n      '[&_[data-slot=fab-menu-leading]]:inline-flex [&_[data-slot=fab-menu-leading]>svg]:size-6',\n      // M3 discourages disabled FABs; when used, match the filled-button tokens\n      // (per-token, not a blanket opacity) and suppress the state layer.\n      'data-[disabled]:pointer-events-none data-[disabled]:shadow-none data-[disabled]:before:opacity-0',\n      'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38',\n    ],\n  },\n  variants: {\n    color: {\n      primary: { item: 'bg-primary-container text-on-primary-container' },\n      secondary: { item: 'bg-secondary-container text-on-secondary-container' },\n      tertiary: { item: 'bg-tertiary-container text-on-tertiary-container' },\n    },\n  },\n  defaultVariants: {\n    color: 'primary',\n  },\n});\n\nexport const FabMenu = createFabMenu(({ size, color }) => fabTv({ size, color }), {\n  popup: fabMenuTv().popup(),\n  item: (color) => fabMenuTv({ color }).item(),\n});\n\nexport type { FabMenuTriggerProps, FabMenuItemProps } from '@m3-baseui/core';\n"]}
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/fab/fab.ts","../../../src/components/fab-menu/fab-menu.ts"],"names":["baseTv","tv"],"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 * fab.ts — tailwind-variants for the M3 (Expressive) FAB.\n *\n * Three sizes (small 56 / medium 80 / large 96 dp) × two variants (standard\n * icon-only square, extended icon + label pill) × three container colors\n * (primary / secondary / tertiary). Elevation level3 (level4 on hover) and a\n * currentColor state-layer `::before`. The size×variant geometry (container,\n * corner, icon, padding, label typescale) is resolved via compoundVariants so\n * every M3 combination maps to exact dp values. The pointer ripple is added by\n * the factory. Same DOM as the VE build.\n */\nimport { createFab } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const fabTv = tv({\n  base: [\n    'relative inline-flex items-center justify-center box-border overflow-hidden',\n    'border-0 cursor-pointer select-none outline-none',\n    'shadow-level3 hover:shadow-level4',\n    'transition-shadow 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]:before:opacity-[var(--md-sys-state-pressed)]',\n    // M3 discourages disabled FABs (material-web removed the state). When native\n    // disabled is used, apply the same container/label tokens as filled buttons.\n    'disabled:pointer-events-none disabled:shadow-none disabled:before:opacity-0',\n    'disabled:bg-on-surface/12 disabled:text-on-surface/38',\n    'data-[disabled]:pointer-events-none data-[disabled]:shadow-none data-[disabled]:before:opacity-0',\n    'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38',\n  ],\n  variants: {\n    // Geometry is set by compoundVariants (size × variant); these keys exist so\n    // the resolver can accept them.\n    size: { small: '', medium: '', large: '' },\n    variant: { standard: '', extended: '' },\n    color: {\n      primary: 'bg-primary-container text-on-primary-container',\n      secondary: 'bg-secondary-container text-on-secondary-container',\n      tertiary: 'bg-tertiary-container text-on-tertiary-container',\n    },\n  },\n  compoundVariants: [\n    // ---- Standard (icon-only square): container / corner / icon ----\n    { size: 'small', variant: 'standard', class: 'size-14 rounded-large [&_svg]:size-6' }, // 56 / 16 / 24\n    {\n      size: 'medium',\n      variant: 'standard',\n      class: 'size-20 rounded-large-increased [&_svg]:size-7', // 80 / 20 / 28\n    },\n    { size: 'large', variant: 'standard', class: 'size-24 rounded-extra-large [&_svg]:size-8' }, // 96 / 28 / 32\n    // ---- Extended (icon + label pill): height / corner / icon / padding / gap / label ----\n    // `min-w-*` keeps the pill affordance for short / text-only labels (wider\n    // than tall), matching the pre-Expressive extended FAB which guarded this.\n    {\n      size: 'small',\n      variant: 'extended',\n      class: 'h-14 min-w-20 px-4 gap-2 rounded-large text-title-medium [&_svg]:size-6', // 56 / 16 / 24 / 16 / 8\n    },\n    {\n      size: 'medium',\n      variant: 'extended',\n      class:\n        'h-20 min-w-28 px-[26px] gap-4 rounded-large-increased text-title-large [&_svg]:size-7', // 80 / 20 / 28 / 26 / 16\n    },\n    {\n      size: 'large',\n      variant: 'extended',\n      class: 'h-24 min-w-32 px-7 gap-5 rounded-extra-large text-headline-small [&_svg]:size-8', // 96 / 28 / 32 / 28 / 20\n    },\n  ],\n  defaultVariants: {\n    size: 'small',\n    variant: 'standard',\n    color: 'primary',\n  },\n});\n\nexport const Fab = createFab(({ size, color, variant }) => fabTv({ size, color, variant }));\nexport type { FabProps, FabSize, FabVariant, FabColor } from '@m3-baseui/core';\n","/**\n * fab-menu.ts — tailwind-variants for the M3 (Expressive) FAB menu.\n *\n * The popup stacks the actions in a right-aligned column (4dp between items) with\n * the M3 menu enter/exit motion; each item is a 56dp full-corner pill (elevation\n * level3, level4 on hover) with a currentColor state-layer `::before`, a 24dp\n * leading icon slot, 24dp leading/trailing padding, an 8dp icon-label gap and a\n * title-medium label. The trigger reuses the FAB resolver. Same DOM + ripple as\n * the VE build.\n */\nimport { createFabMenu } from '@m3-baseui/core';\nimport { tv } from '../../tv';\nimport { fabTv } from '../fab/fab';\n\nexport const fabMenuTv = tv({\n  slots: {\n    popup: [\n      'flex flex-col items-end gap-1 bg-transparent outline-none',\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    ],\n    item: [\n      'relative inline-flex items-center gap-2 h-14 px-6 overflow-hidden box-border',\n      'cursor-pointer select-none outline-none rounded-full text-title-medium',\n      'shadow-level3 hover:shadow-level4 transition-shadow 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      'data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n      // M3 leading icon (24dp).\n      '[&_[data-slot=fab-menu-leading]]:inline-flex [&_[data-slot=fab-menu-leading]>svg]:size-6',\n      // M3 discourages disabled FABs; when used, match the filled-button tokens\n      // (per-token, not a blanket opacity) and suppress the state layer.\n      'data-[disabled]:pointer-events-none data-[disabled]:shadow-none data-[disabled]:before:opacity-0',\n      'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38',\n    ],\n  },\n  variants: {\n    color: {\n      primary: { item: 'bg-primary-container text-on-primary-container' },\n      secondary: { item: 'bg-secondary-container text-on-secondary-container' },\n      tertiary: { item: 'bg-tertiary-container text-on-tertiary-container' },\n    },\n  },\n  defaultVariants: {\n    color: 'primary',\n  },\n});\n\nexport const FabMenu = createFabMenu(({ size, color }) => fabTv({ size, color }), {\n  popup: fabMenuTv().popup(),\n  item: (color) => fabMenuTv({ color }).item(),\n});\n\nexport type { FabMenuTriggerProps, FabMenuItemProps } from '@m3-baseui/core';\n"]}

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

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

package/dist/components/item/index.js

@@ -21,12 +21,24 @@ var TYPESCALE = [
   "label-medium",
   "label-small"
 ];
+var SHAPE = [
+  "none",
+  "extra-small",
+  "small",
+  "medium",
+  "large",
+  "large-increased",
+  "extra-large",
+  "extra-large-increased",
+  "full"
+];
 var tv = (options, config) => tv$1(options, {
   ...config,
   twMergeConfig: {
     extend: {
       classGroups: {
-        "font-size": [{ text: [...TYPESCALE] }]
+        "font-size": [{ text: [...TYPESCALE] }],
+        rounded: [{ rounded: [...SHAPE] }]
       }
     }
   }

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

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

package/dist/components/list/index.js

@@ -21,12 +21,24 @@ var TYPESCALE = [
   "label-medium",
   "label-small"
 ];
+var SHAPE = [
+  "none",
+  "extra-small",
+  "small",
+  "medium",
+  "large",
+  "large-increased",
+  "extra-large",
+  "extra-large-increased",
+  "full"
+];
 var tv = (options, config) => tv$1(options, {
   ...config,
   twMergeConfig: {
     extend: {
       classGroups: {
-        "font-size": [{ text: [...TYPESCALE] }]
+        "font-size": [{ text: [...TYPESCALE] }],
+        rounded: [{ rounded: [...SHAPE] }]
       }
     }
   }