@m3-baseui/react-tailwind 1.0.2 → 1.0.4

package/dist/card.js

@@ -43,6 +43,8 @@ var cardTv = tv({
     interactive: {
       true: [
         "group overflow-hidden cursor-pointer select-none text-left w-full outline-none",
+        // Animate the elevation lift/settle to match the VE box-shadow transition.
+        "transition-shadow duration-150 ease-standard",
         "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
         "hover:before:opacity-[var(--md-sys-state-hover)]",
         "focus-visible:before:opacity-[var(--md-sys-state-focus)]",

package/dist/card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tv.ts","../src/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,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":"card.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        '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/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":"card.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"]}

package/dist/checkbox.d.ts

@@ -6,16 +6,16 @@ import * as tailwind_variants from 'tailwind-variants';
 declare const checkboxTv: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
-            icon?: tailwind_variants.ClassValue;
             root?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
             indicator?: tailwind_variants.ClassValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: tailwind_variants.ClassValue | {
-            icon?: tailwind_variants.ClassValue;
             root?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
             indicator?: tailwind_variants.ClassValue;
         };
     };
@@ -26,16 +26,16 @@ declare const checkboxTv: tailwind_variants.TVReturnType<{
 }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
-            icon?: tailwind_variants.ClassValue;
             root?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
             indicator?: tailwind_variants.ClassValue;
         };
     };
 } | {}>, {
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
-            icon?: tailwind_variants.ClassValue;
             root?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
             indicator?: tailwind_variants.ClassValue;
         };
     };
@@ -50,8 +50,8 @@ declare const checkboxTv: tailwind_variants.TVReturnType<{
 }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
-            icon?: tailwind_variants.ClassValue;
             root?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
             indicator?: tailwind_variants.ClassValue;
         };
     };

package/dist/divider.js

@@ -19,7 +19,8 @@ var dividerTv = tv({
   compoundVariants: [
     { orientation: "horizontal", inset: "inset", class: "ms-4" },
     { orientation: "horizontal", inset: "middle", class: "mx-4" },
-    { orientation: "vertical", inset: "inset", class: "mt-4" },
+    // Logical block-start margin mirrors the VE recipe's `marginBlockStart`.
+    { orientation: "vertical", inset: "inset", class: "[margin-block-start:1rem]" },
     { orientation: "vertical", inset: "middle", class: "my-4" }
   ],
   defaultVariants: {

package/dist/divider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/divider.ts"],"names":[],"mappings":";;;;;AAWO,IAAM,YAAY,EAAA,CAAG;AAAA,EAC1B,IAAA,EAAM,mDAAA;AAAA,EACN,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,UAAA,EAAY,aAAA;AAAA,MACZ,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,KAAA,EAAO;AAAA,MACL,IAAA,EAAM,EAAA;AAAA,MACN,KAAA,EAAO,EAAA;AAAA,MACP,MAAA,EAAQ;AAAA;AACV,GACF;AAAA,EACA,gBAAA,EAAkB;AAAA,IAChB,EAAE,WAAA,EAAa,YAAA,EAAc,KAAA,EAAO,OAAA,EAAS,OAAO,MAAA,EAAO;AAAA,IAC3D,EAAE,WAAA,EAAa,YAAA,EAAc,KAAA,EAAO,QAAA,EAAU,OAAO,MAAA,EAAO;AAAA,IAC5D,EAAE,WAAA,EAAa,UAAA,EAAY,KAAA,EAAO,OAAA,EAAS,OAAO,MAAA,EAAO;AAAA,IACzD,EAAE,WAAA,EAAa,UAAA,EAAY,KAAA,EAAO,QAAA,EAAU,OAAO,MAAA;AAAO,GAC5D;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,WAAA,EAAa,YAAA;AAAA,IACb,KAAA,EAAO;AAAA;AAEX,CAAC;AAEM,IAAM,OAAA,GAAU,aAAA,CAAc,CAAC,EAAE,KAAA,EAAO,WAAA,EAAY,KAAM,SAAA,CAAU,EAAE,KAAA,EAAO,WAAA,EAAa,CAAC","file":"divider.js","sourcesContent":["/**\n * divider.ts — tailwind-variants for the M3 Divider.\n *\n * 1dp `outline-variant` rule. `self-stretch` fills the cross axis in flex\n * layouts; horizontal is 1dp tall, vertical 1dp wide. The inset variants add a\n * 16dp leading (`inset`) or both-ends (`middle`) margin along the main axis.\n * Same DOM + `role=\"separator\"` as the VE build.\n */\nimport { createDivider } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const dividerTv = tv({\n  base: 'shrink-0 self-stretch border-0 bg-outline-variant',\n  variants: {\n    orientation: {\n      horizontal: 'h-px w-auto',\n      vertical: 'w-px h-auto',\n    },\n    inset: {\n      full: '',\n      inset: '',\n      middle: '',\n    },\n  },\n  compoundVariants: [\n    { orientation: 'horizontal', inset: 'inset', class: 'ms-4' },\n    { orientation: 'horizontal', inset: 'middle', class: 'mx-4' },\n    { orientation: 'vertical', inset: 'inset', class: 'mt-4' },\n    { orientation: 'vertical', inset: 'middle', class: 'my-4' },\n  ],\n  defaultVariants: {\n    orientation: 'horizontal',\n    inset: 'full',\n  },\n});\n\nexport const Divider = createDivider(({ inset, orientation }) => dividerTv({ inset, orientation }));\nexport type { DividerProps, DividerInset, DividerOrientation } from '@m3-baseui/core';\n"]}
+{"version":3,"sources":["../src/divider.ts"],"names":[],"mappings":";;;;;AAWO,IAAM,YAAY,EAAA,CAAG;AAAA,EAC1B,IAAA,EAAM,mDAAA;AAAA,EACN,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,UAAA,EAAY,aAAA;AAAA,MACZ,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,KAAA,EAAO;AAAA,MACL,IAAA,EAAM,EAAA;AAAA,MACN,KAAA,EAAO,EAAA;AAAA,MACP,MAAA,EAAQ;AAAA;AACV,GACF;AAAA,EACA,gBAAA,EAAkB;AAAA,IAChB,EAAE,WAAA,EAAa,YAAA,EAAc,KAAA,EAAO,OAAA,EAAS,OAAO,MAAA,EAAO;AAAA,IAC3D,EAAE,WAAA,EAAa,YAAA,EAAc,KAAA,EAAO,QAAA,EAAU,OAAO,MAAA,EAAO;AAAA;AAAA,IAE5D,EAAE,WAAA,EAAa,UAAA,EAAY,KAAA,EAAO,OAAA,EAAS,OAAO,2BAAA,EAA4B;AAAA,IAC9E,EAAE,WAAA,EAAa,UAAA,EAAY,KAAA,EAAO,QAAA,EAAU,OAAO,MAAA;AAAO,GAC5D;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,WAAA,EAAa,YAAA;AAAA,IACb,KAAA,EAAO;AAAA;AAEX,CAAC;AAEM,IAAM,OAAA,GAAU,aAAA,CAAc,CAAC,EAAE,KAAA,EAAO,WAAA,EAAY,KAAM,SAAA,CAAU,EAAE,KAAA,EAAO,WAAA,EAAa,CAAC","file":"divider.js","sourcesContent":["/**\n * divider.ts — tailwind-variants for the M3 Divider.\n *\n * 1dp `outline-variant` rule. `self-stretch` fills the cross axis in flex\n * layouts; horizontal is 1dp tall, vertical 1dp wide. The inset variants add a\n * 16dp leading (`inset`) or both-ends (`middle`) margin along the main axis.\n * Same DOM + `role=\"separator\"` as the VE build.\n */\nimport { createDivider } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const dividerTv = tv({\n  base: 'shrink-0 self-stretch border-0 bg-outline-variant',\n  variants: {\n    orientation: {\n      horizontal: 'h-px w-auto',\n      vertical: 'w-px h-auto',\n    },\n    inset: {\n      full: '',\n      inset: '',\n      middle: '',\n    },\n  },\n  compoundVariants: [\n    { orientation: 'horizontal', inset: 'inset', class: 'ms-4' },\n    { orientation: 'horizontal', inset: 'middle', class: 'mx-4' },\n    // Logical block-start margin mirrors the VE recipe's `marginBlockStart`.\n    { orientation: 'vertical', inset: 'inset', class: '[margin-block-start:1rem]' },\n    { orientation: 'vertical', inset: 'middle', class: 'my-4' },\n  ],\n  defaultVariants: {\n    orientation: 'horizontal',\n    inset: 'full',\n  },\n});\n\nexport const Divider = createDivider(({ inset, orientation }) => dividerTv({ inset, orientation }));\nexport type { DividerProps, DividerInset, DividerOrientation } from '@m3-baseui/core';\n"]}

package/dist/index.js

@@ -620,7 +620,7 @@ var sliderTv = tv7({
       "before:size-10 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity before:duration-100",
       "hover:before:opacity-[var(--md-sys-state-hover)]",
       "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
-      "data-[dragging]:before:opacity-[var(--md-sys-state-pressed)]",
+      "data-[dragging]:before:opacity-[var(--md-sys-state-dragged)]",
       "group-data-[disabled]:bg-on-surface/[0.38]"
     ],
     value: "text-label-large text-on-surface-variant tabular-nums"
@@ -730,7 +730,8 @@ var textFieldTv = tv({
         field: [
           "rounded-t-extra-small bg-surface-container-highest",
           "border-b-2 border-outline",
-          "group-data-[focused]:border-primary group-data-[invalid]:border-error"
+          // M3 filled focus-active-indicator-height is 3dp (resting/error stay 2dp).
+          "group-data-[focused]:border-b-[3px] group-data-[focused]:border-primary group-data-[invalid]:border-error"
         ],
         input: "pt-3",
         label: [
@@ -741,7 +742,9 @@ var textFieldTv = tv({
       outlined: {
         field: [
           "rounded-extra-small border border-outline",
-          "group-data-[focused]:border-2 group-data-[focused]:border-primary group-data-[focused]:px-[15px]",
+          // M3 outlined focus-outline-width is 3dp (matches Select's trigger);
+          // padding drops 2px so content stays steady as the 1dp border grows.
+          "group-data-[focused]:border-[3px] group-data-[focused]:border-primary group-data-[focused]:px-[14px]",
           "group-data-[invalid]:border-error"
         ],
         label: [
@@ -776,7 +779,8 @@ var navigationBarTv = tv({
     item: [
       "group relative flex flex-1 flex-col items-center justify-center gap-1 px-1 pt-3 pb-4",
       "bg-transparent border-0 cursor-pointer select-none outline-none",
-      "data-[disabled]:opacity-[0.38] data-[disabled]:pointer-events-none"
+      // M3 disabled is per-token (icon + label dimmed below), not a blanket fade.
+      "data-[disabled]:pointer-events-none"
     ],
     iconWrap: "relative flex items-center justify-center w-16 h-8",
     indicator: [
@@ -786,17 +790,32 @@ var navigationBarTv = tv({
       "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
       "group-hover:before:opacity-[var(--md-sys-state-hover)]",
       "group-focus-visible:before:opacity-[var(--md-sys-state-focus)]",
-      "group-active:before:opacity-[var(--md-sys-state-pressed)]"
+      "group-active:before:opacity-[var(--md-sys-state-pressed)]",
+      // No state layer on a disabled destination.
+      "group-data-[disabled]:before:opacity-0"
     ],
     icon: [
       "relative flex items-center justify-center text-on-surface-variant",
       "transition-colors duration-150 ease-standard",
-      "group-data-[pressed]:text-on-secondary-container"
+      // Raw <svg> icons render at 24dp (Material Symbols set their own size).
+      "[&_svg]:size-6",
+      "group-data-[pressed]:text-on-secondary-container",
+      // M3 disabled: icon dims to on-surface/0.38. The item is the only `.group`,
+      // so the disabled+active override must test both attributes on that single
+      // element (`.group[data-disabled][data-pressed] &`) to outrank the equal-
+      // specificity data-[pressed] color — a stacked `group-data-*:group-data-*`
+      // would expect two nested groups and never match.
+      "group-data-[disabled]:text-on-surface/[0.38]",
+      "group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]"
     ],
     label: [
       "text-label-medium text-on-surface-variant",
       "transition-colors duration-150 ease-standard",
-      "group-data-[pressed]:text-on-surface group-data-[pressed]:font-bold"
+      "group-data-[pressed]:text-on-surface group-data-[pressed]:font-bold",
+      // M3 disabled: label dims to on-surface/0.38. Same-element override (see the
+      // icon slot) keeps a disabled+active label dimmed.
+      "group-data-[disabled]:text-on-surface/[0.38]",
+      "group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]"
     ]
   }
 });
@@ -863,7 +882,8 @@ var dividerTv = tv({
   compoundVariants: [
     { orientation: "horizontal", inset: "inset", class: "ms-4" },
     { orientation: "horizontal", inset: "middle", class: "mx-4" },
-    { orientation: "vertical", inset: "inset", class: "mt-4" },
+    // Logical block-start margin mirrors the VE recipe's `marginBlockStart`.
+    { orientation: "vertical", inset: "inset", class: "[margin-block-start:1rem]" },
     { orientation: "vertical", inset: "middle", class: "my-4" }
   ],
   defaultVariants: {
@@ -976,7 +996,7 @@ var snackbarTv = tv({
     ],
     content: "flex flex-col flex-1 min-w-0 gap-0.5",
     title: "text-body-medium",
-    description: "text-body-small opacity-90",
+    description: "text-body-medium",
     action: [
       "relative inline-flex items-center justify-center shrink-0 h-9 px-3 overflow-hidden",
       "rounded-extra-small bg-transparent border-0 cursor-pointer outline-none",
@@ -1054,6 +1074,8 @@ var cardTv = tv7({
     interactive: {
       true: [
         "group overflow-hidden cursor-pointer select-none text-left w-full outline-none",
+        // Animate the elevation lift/settle to match the VE box-shadow transition.
+        "transition-shadow duration-150 ease-standard",
         "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
         "hover:before:opacity-[var(--md-sys-state-hover)]",
         "focus-visible:before:opacity-[var(--md-sys-state-focus)]",