@noxlovette/material 0.9.2 → 0.9.4

package/dist/components/buttons/theme.d.ts

@@ -59,24 +59,24 @@ export declare const buttonBase = "md-btn md-sys-state-focus-indicator relative
 /** Button measurements per size: height, padding, icon-label gap, label type, shape and outline. */
 export declare const buttonSizes: {
     readonly xs: {
-        readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1rem] [--btn-square:0.75rem]";
-        readonly icon: "size-spacing-250 text-[20px]";
+        readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg)] [--btn-square:var(--radius-md)]";
+        readonly icon: "size-(--text-icon-20) text-icon-20";
     };
     readonly sm: {
-        readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1.25rem] [--btn-square:0.75rem]";
-        readonly icon: "size-spacing-250 text-[20px]";
+        readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg-increased)] [--btn-square:var(--radius-md)]";
+        readonly icon: "size-(--text-icon-20) text-icon-20";
     };
     readonly md: {
-        readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:0.75rem] [--btn-round:1.75rem] [--btn-square:1rem]";
-        readonly icon: "size-spacing-300 text-[24px]";
+        readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:var(--radius-md)] [--btn-round:var(--radius-xl)] [--btn-square:var(--radius-lg)]";
+        readonly icon: "size-(--text-icon-24) text-icon-24";
     };
     readonly lg: {
-        readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:1rem] [--btn-round:3rem] [--btn-square:1.75rem]";
-        readonly icon: "size-spacing-400 text-[32px]";
+        readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--radius-xxl)] [--btn-square:var(--radius-xl)]";
+        readonly icon: "size-(--text-icon-32) text-icon-32";
     };
     readonly xl: {
-        readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:1rem] [--btn-round:4.25rem] [--btn-square:1.75rem]";
-        readonly icon: "size-spacing-500 text-[40px]";
+        readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--md-comp-button-xl-round-corner)] [--btn-square:var(--radius-xl)]";
+        readonly icon: "size-(--text-icon-40) text-icon-40";
     };
 };
 /** Resting elevation and hover lift per colour style (the text and outlined styles have none). */
@@ -103,24 +103,24 @@ export declare const button: import("tailwind-variants").TVReturnType<{
     };
     size: {
         readonly xs: {
-            readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1rem] [--btn-square:0.75rem]";
-            readonly icon: "size-spacing-250 text-[20px]";
+            readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg)] [--btn-square:var(--radius-md)]";
+            readonly icon: "size-(--text-icon-20) text-icon-20";
         };
         readonly sm: {
-            readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1.25rem] [--btn-square:0.75rem]";
-            readonly icon: "size-spacing-250 text-[20px]";
+            readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg-increased)] [--btn-square:var(--radius-md)]";
+            readonly icon: "size-(--text-icon-20) text-icon-20";
         };
         readonly md: {
-            readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:0.75rem] [--btn-round:1.75rem] [--btn-square:1rem]";
-            readonly icon: "size-spacing-300 text-[24px]";
+            readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:var(--radius-md)] [--btn-round:var(--radius-xl)] [--btn-square:var(--radius-lg)]";
+            readonly icon: "size-(--text-icon-24) text-icon-24";
         };
         readonly lg: {
-            readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:1rem] [--btn-round:3rem] [--btn-square:1.75rem]";
-            readonly icon: "size-spacing-400 text-[32px]";
+            readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--radius-xxl)] [--btn-square:var(--radius-xl)]";
+            readonly icon: "size-(--text-icon-32) text-icon-32";
         };
         readonly xl: {
-            readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:1rem] [--btn-round:4.25rem] [--btn-square:1.75rem]";
-            readonly icon: "size-spacing-500 text-[40px]";
+            readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--md-comp-button-xl-round-corner)] [--btn-square:var(--radius-xl)]";
+            readonly icon: "size-(--text-icon-40) text-icon-40";
         };
     };
     shape: {
@@ -155,24 +155,24 @@ export declare const button: import("tailwind-variants").TVReturnType<{
     };
     size: {
         readonly xs: {
-            readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1rem] [--btn-square:0.75rem]";
-            readonly icon: "size-spacing-250 text-[20px]";
+            readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg)] [--btn-square:var(--radius-md)]";
+            readonly icon: "size-(--text-icon-20) text-icon-20";
         };
         readonly sm: {
-            readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1.25rem] [--btn-square:0.75rem]";
-            readonly icon: "size-spacing-250 text-[20px]";
+            readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg-increased)] [--btn-square:var(--radius-md)]";
+            readonly icon: "size-(--text-icon-20) text-icon-20";
         };
         readonly md: {
-            readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:0.75rem] [--btn-round:1.75rem] [--btn-square:1rem]";
-            readonly icon: "size-spacing-300 text-[24px]";
+            readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:var(--radius-md)] [--btn-round:var(--radius-xl)] [--btn-square:var(--radius-lg)]";
+            readonly icon: "size-(--text-icon-24) text-icon-24";
         };
         readonly lg: {
-            readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:1rem] [--btn-round:3rem] [--btn-square:1.75rem]";
-            readonly icon: "size-spacing-400 text-[32px]";
+            readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--radius-xxl)] [--btn-square:var(--radius-xl)]";
+            readonly icon: "size-(--text-icon-32) text-icon-32";
         };
         readonly xl: {
-            readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:1rem] [--btn-round:4.25rem] [--btn-square:1.75rem]";
-            readonly icon: "size-spacing-500 text-[40px]";
+            readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--md-comp-button-xl-round-corner)] [--btn-square:var(--radius-xl)]";
+            readonly icon: "size-(--text-icon-40) text-icon-40";
         };
     };
     shape: {
@@ -207,24 +207,24 @@ export declare const button: import("tailwind-variants").TVReturnType<{
     };
     size: {
         readonly xs: {
-            readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1rem] [--btn-square:0.75rem]";
-            readonly icon: "size-spacing-250 text-[20px]";
+            readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg)] [--btn-square:var(--radius-md)]";
+            readonly icon: "size-(--text-icon-20) text-icon-20";
         };
         readonly sm: {
-            readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1.25rem] [--btn-square:0.75rem]";
-            readonly icon: "size-spacing-250 text-[20px]";
+            readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg-increased)] [--btn-square:var(--radius-md)]";
+            readonly icon: "size-(--text-icon-20) text-icon-20";
         };
         readonly md: {
-            readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:0.75rem] [--btn-round:1.75rem] [--btn-square:1rem]";
-            readonly icon: "size-spacing-300 text-[24px]";
+            readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:var(--radius-md)] [--btn-round:var(--radius-xl)] [--btn-square:var(--radius-lg)]";
+            readonly icon: "size-(--text-icon-24) text-icon-24";
         };
         readonly lg: {
-            readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:1rem] [--btn-round:3rem] [--btn-square:1.75rem]";
-            readonly icon: "size-spacing-400 text-[32px]";
+            readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--radius-xxl)] [--btn-square:var(--radius-xl)]";
+            readonly icon: "size-(--text-icon-32) text-icon-32";
         };
         readonly xl: {
-            readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:1rem] [--btn-round:4.25rem] [--btn-square:1.75rem]";
-            readonly icon: "size-spacing-500 text-[40px]";
+            readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--md-comp-button-xl-round-corner)] [--btn-square:var(--radius-xl)]";
+            readonly icon: "size-(--text-icon-40) text-icon-40";
         };
     };
     shape: {

package/dist/components/buttons/theme.js

@@ -81,24 +81,24 @@ export const buttonBase = 'md-btn md-sys-state-focus-indicator relative inline-f
 /** Button measurements per size: height, padding, icon-label gap, label type, shape and outline. */
 export const buttonSizes = {
     xs: {
-        base: 'md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1rem] [--btn-square:0.75rem]',
-        icon: 'size-spacing-250 text-[20px]'
+        base: 'md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg)] [--btn-square:var(--radius-md)]',
+        icon: 'size-(--text-icon-20) text-icon-20'
     },
     sm: {
-        base: 'md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1.25rem] [--btn-square:0.75rem]',
-        icon: 'size-spacing-250 text-[20px]'
+        base: 'md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg-increased)] [--btn-square:var(--radius-md)]',
+        icon: 'size-(--text-icon-20) text-icon-20'
     },
     md: {
-        base: 'md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:0.75rem] [--btn-round:1.75rem] [--btn-square:1rem]',
-        icon: 'size-spacing-300 text-[24px]'
+        base: 'md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:var(--radius-md)] [--btn-round:var(--radius-xl)] [--btn-square:var(--radius-lg)]',
+        icon: 'size-(--text-icon-24) text-icon-24'
     },
     lg: {
-        base: 'md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:1rem] [--btn-round:3rem] [--btn-square:1.75rem]',
-        icon: 'size-spacing-400 text-[32px]'
+        base: 'md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--radius-xxl)] [--btn-square:var(--radius-xl)]',
+        icon: 'size-(--text-icon-32) text-icon-32'
     },
     xl: {
-        base: 'md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:1rem] [--btn-round:4.25rem] [--btn-square:1.75rem]',
-        icon: 'size-spacing-500 text-[40px]'
+        base: 'md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--md-comp-button-xl-round-corner)] [--btn-square:var(--radius-xl)]',
+        icon: 'size-(--text-icon-40) text-icon-40'
     }
 };
 /** Resting elevation and hover lift per colour style (the text and outlined styles have none). */
@@ -157,24 +157,24 @@ export const buttonIcon = tv({
         },
         size: {
             xs: {
-                base: 'h-spacing-400 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1rem] [--btn-square:0.75rem]',
-                icon: 'size-spacing-250 text-[20px]'
+                base: 'h-spacing-400 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg)] [--btn-square:var(--radius-md)]',
+                icon: 'size-(--text-icon-20) text-icon-20'
             },
             sm: {
-                base: 'h-spacing-500 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1.25rem] [--btn-square:0.75rem]',
-                icon: 'size-spacing-300 text-[24px]'
+                base: 'h-spacing-500 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg-increased)] [--btn-square:var(--radius-md)]',
+                icon: 'size-(--text-icon-24) text-icon-24'
             },
             md: {
-                base: 'h-spacing-700 [--btn-outline:1px] [--btn-pressed:0.75rem] [--btn-round:1.75rem] [--btn-square:1rem]',
-                icon: 'size-spacing-300 text-[24px]'
+                base: 'h-spacing-700 [--btn-outline:1px] [--btn-pressed:var(--radius-md)] [--btn-round:var(--radius-xl)] [--btn-square:var(--radius-lg)]',
+                icon: 'size-(--text-icon-24) text-icon-24'
             },
             lg: {
-                base: 'h-24 [--btn-outline:2px] [--btn-pressed:1rem] [--btn-round:3rem] [--btn-square:1.75rem]',
-                icon: 'size-spacing-400 text-[32px]'
+                base: 'h-24 [--btn-outline:2px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--radius-xxl)] [--btn-square:var(--radius-xl)]',
+                icon: 'size-(--text-icon-32) text-icon-32'
             },
             xl: {
-                base: 'h-34 [--btn-outline:3px] [--btn-pressed:1rem] [--btn-round:4.25rem] [--btn-square:1.75rem]',
-                icon: 'size-spacing-500 text-[40px]'
+                base: 'h-34 [--btn-outline:3px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--md-comp-button-xl-round-corner)] [--btn-square:var(--radius-xl)]',
+                icon: 'size-(--text-icon-40) text-icon-40'
             }
         },
         /** Container width: the icon plus the size's narrow, default or wide leading/trailing space. */
@@ -256,21 +256,21 @@ export const fab = tv({
             /** Baseline small FAB. No longer recommended by M3; kept for dense layouts. */
             small: {
                 base: 'h-spacing-500 rounded-xl px-spacing-100',
-                icon: 'size-spacing-300 text-[24px]'
+                icon: 'size-(--text-icon-24) text-icon-24'
             },
             regular: {
                 base: 'md-sys-typescale-title-medium h-spacing-700 rounded-2xl px-spacing-200',
-                icon: 'size-spacing-300 text-[24px]',
+                icon: 'size-(--text-icon-24) text-icon-24',
                 label: 'ps-spacing-100'
             },
             medium: {
-                base: 'md-sys-typescale-title-large h-20 rounded-[1.25rem] px-[1.625rem]',
-                icon: 'size-7 text-[28px]',
+                base: 'md-sys-typescale-title-large h-20 rounded-lg-increased px-[1.625rem]',
+                icon: 'size-(--text-icon-28) text-icon-28',
                 label: 'ps-spacing-150'
             },
             large: {
-                base: 'md-sys-typescale-headline-small h-24 rounded-[1.75rem] px-[1.875rem]',
-                icon: 'size-spacing-450 text-[36px]',
+                base: 'md-sys-typescale-headline-small h-24 rounded-xl px-[1.875rem]',
+                icon: 'size-(--text-icon-36) text-icon-36',
                 label: 'ps-spacing-200'
             }
         },
@@ -281,8 +281,8 @@ export const fab = tv({
          */
         menuOpen: {
             true: {
-                base: 'justify-center px-spacing-0 size-spacing-700 rounded-[1.75rem]',
-                icon: 'size-spacing-250 text-[20px]',
+                base: 'justify-center px-spacing-0 size-spacing-700 rounded-xl',
+                icon: 'size-(--text-icon-20) text-icon-20',
                 labelTrack: 'grid-cols-[0fr]!'
             },
             false: {}
@@ -365,7 +365,7 @@ export const fabMenu = tv({
 export const fabMenuItem = tv({
     slots: {
         base: 'md-btn md-sys-state-focus-indicator md-sys-typescale-title-medium relative inline-flex h-spacing-700 shrink-0 cursor-pointer items-center gap-spacing-100 rounded-full px-spacing-300 whitespace-nowrap select-none data-disabled:cursor-not-allowed data-disabled:bg-md-sys-color-on-surface/10 data-disabled:text-md-sys-color-on-surface/38',
-        icon: 'size-spacing-300 shrink-0 text-[24px]'
+        icon: 'size-(--text-icon-24) shrink-0 text-icon-24'
     },
     variants: {
         set: {

package/dist/components/cards/theme.js

@@ -2,7 +2,7 @@ import { tv } from '../../utils/tv.js';
 export const card = tv({
     slots: {
         base: 'relative flex flex-col rounded-lg disabled:opacity-[0.38] disabled:bg-md-sys-color-surface-variant state-layer before:rounded-lg transition-shadow md-sys-motion-effects',
-        icon: 'size-spacing-300 text-[24px] text-md-sys-color-primary'
+        icon: 'size-(--text-icon-24) text-icon-24 text-md-sys-color-primary'
     },
     variants: {
         type: {

package/dist/components/chips/Chip.svelte

@@ -135,7 +135,7 @@ Chips help people enter information, make selections, filter content, or trigger
         }}
         aria-label={removeLabel}
       >
-        <Icon size="sm" name="close" class="size-[18px] text-[18px]" />
+        <Icon size="sm" name="close" class="text-icon-18 size-(--text-icon-18)" />
         <Layer />
       </button>
     {/if}

package/dist/components/chips/theme.js

@@ -23,7 +23,7 @@ export const chip = tv({
         // a 16% state layer.
         base: 'in-data-dragged:shadow-elevation-4 in-data-dragged:before:bg-current/16 state-layer md-sys-state-focus-indicator relative inline-flex h-spacing-400 max-w-max shrink-0 items-center justify-center gap-spacing-100 rounded-sm border border-transparent px-spacing-200 md-sys-typescale-label-large select-none before:rounded-sm transition-[background-color,border-color,box-shadow] md-sys-motion-effects',
         // 18dp is the chip spec's own icon size, between the 16 and 20 Icon presets.
-        icon: 'size-[18px] shrink-0 text-[18px]',
+        icon: 'size-(--text-icon-18) shrink-0 text-icon-18',
         avatar: 'size-spacing-300 shrink-0 overflow-hidden rounded-full',
         // Static, so its Layer (state layer and hit area) spans the whole chip; the remove button is
         // positioned and later in the DOM, so it stays on top.

package/dist/components/containers/bottom-sheet/theme.js

@@ -18,7 +18,7 @@ export const bottomSheet = tv({
         ],
         container: [
             'bg-md-sys-color-surface-container-low text-md-sys-color-on-surface shadow-elevation-1',
-            'flex max-h-[inherit] flex-col rounded-t-[28px] will-change-transform'
+            'flex max-h-[inherit] flex-col rounded-t-xl will-change-transform'
         ],
         handleArea: 'flex h-spacing-600 shrink-0 cursor-grab touch-none justify-center active:cursor-grabbing',
         handle: 'md-sys-state-focus-indicator flex h-spacing-600 w-spacing-600 items-center justify-center rounded-full outline-none',

package/dist/components/containers/carousel/theme.js

@@ -13,7 +13,7 @@ export const carousel = tv({
         snapPoint: 'pointer-events-none absolute top-spacing-0 h-px w-px snap-start',
         viewport: 'sticky left-spacing-0 h-full overflow-clip',
         item: [
-            'text-md-sys-color-on-surface bg-md-sys-color-surface relative block shrink-0 overflow-hidden rounded-[28px] text-start',
+            'text-md-sys-color-on-surface bg-md-sys-color-surface relative block shrink-0 overflow-hidden rounded-xl text-start',
             'md-sys-state-focus-indicator transition-shadow md-sys-motion-effects'
         ],
         content: 'h-full'

package/dist/components/containers/context-menu/theme.js

@@ -24,9 +24,9 @@ export const contextMenu = tv({
         itemContent: 'flex flex-1 flex-col gap-spacing-25 min-w-spacing-0',
         label: 'md-sys-typescale-body-large text-md-sys-color-on-surface',
         helper: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
-        icon: 'size-spacing-250 text-[20px] text-md-sys-color-on-surface-variant shrink-0',
+        icon: 'size-(--text-icon-20) text-icon-20 text-md-sys-color-on-surface-variant shrink-0',
         separator: 'my-spacing-50 h-px bg-md-sys-color-outline-variant',
-        rightSlot: 'ml-auto size-spacing-250 text-[20px] shrink-0 text-md-sys-color-on-surface-variant'
+        rightSlot: 'ml-auto size-(--text-icon-20) text-icon-20 shrink-0 text-md-sys-color-on-surface-variant'
     },
     variants: {
         selected: {

package/dist/components/containers/dialogue/theme.js

@@ -2,7 +2,7 @@ import { tv } from '../../../utils/tv.js';
 export const dialogue = tv({
     slots: {
         base: 'fixed inset-spacing-0 z-layer-modal bg-md-sys-color-scrim/32',
-        inner: 'fixed inset-spacing-0 z-layer-modal m-auto h-max w-full outline-none bg-md-sys-color-surface-container-high shadow-elevation-3 flex flex-col rounded-[28px] p-spacing-300 gap-spacing-200',
+        inner: 'fixed inset-spacing-0 z-layer-modal m-auto h-max w-full outline-none bg-md-sys-color-surface-container-high shadow-elevation-3 flex flex-col rounded-xl p-spacing-300 gap-spacing-200',
         headlineContainer: 'md-sys-typescale-headline-small text-md-sys-color-on-surface',
         supportingTextContainer: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
         buttonContainer: 'mt-spacing-100 flex items-center justify-end gap-spacing-100'

package/dist/components/containers/list/theme.d.ts

@@ -4,17 +4,17 @@ export type ListMediaVariants = VariantProps<typeof listMedia>;
 export declare const list: import("tailwind-variants").TVReturnType<{
     variant: {
         standard: "";
-        segmented: "gap-spacing-25 [&>:first-child]:[--li-top:1rem] [&>:last-child]:[--li-bottom:1rem]";
+        segmented: "gap-spacing-25 [&>:first-child]:[--li-top:var(--radius-lg)] [&>:last-child]:[--li-bottom:var(--radius-lg)]";
     };
 }, undefined, "flex w-full flex-col [--li-bottom:initial] [--li-top:initial]", {
     variant: {
         standard: "";
-        segmented: "gap-spacing-25 [&>:first-child]:[--li-top:1rem] [&>:last-child]:[--li-bottom:1rem]";
+        segmented: "gap-spacing-25 [&>:first-child]:[--li-top:var(--radius-lg)] [&>:last-child]:[--li-bottom:var(--radius-lg)]";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         standard: "";
-        segmented: "gap-spacing-25 [&>:first-child]:[--li-top:1rem] [&>:last-child]:[--li-bottom:1rem]";
+        segmented: "gap-spacing-25 [&>:first-child]:[--li-top:var(--radius-lg)] [&>:last-child]:[--li-bottom:var(--radius-lg)]";
     };
 }, undefined>>;
 export declare const listItem: import("tailwind-variants").TVReturnType<{

package/dist/components/containers/list/theme.js

@@ -19,7 +19,7 @@ export const list = tv({
         variant: {
             standard: '',
             // 2dp between segments; outer corners 16dp (md.comp.list.container.shape).
-            segmented: 'gap-spacing-25 [&>:first-child]:[--li-top:1rem] [&>:last-child]:[--li-bottom:1rem]'
+            segmented: 'gap-spacing-25 [&>:first-child]:[--li-top:var(--radius-lg)] [&>:last-child]:[--li-bottom:var(--radius-lg)]'
         }
     },
     defaultVariants: { variant: 'standard' }
@@ -28,7 +28,7 @@ export const listItem = tv({
     slots: {
         base: [
             'relative isolate flex w-full min-w-spacing-0 gap-spacing-150 ps-spacing-200 pe-spacing-200 pt-spacing-125 pb-spacing-125 text-start',
-            '[--li-shape:0.25rem] rounded-t-[var(--li-top,var(--li-shape))] rounded-b-[var(--li-bottom,var(--li-shape))]',
+            '[--li-shape:var(--radius-xs)] rounded-t-[var(--li-top,var(--li-shape))] rounded-b-[var(--li-bottom,var(--li-shape))]',
             'transition-[border-radius,background-color,color] md-sys-motion-fast-spatial',
             'text-md-sys-color-on-surface-variant'
         ],
@@ -69,17 +69,17 @@ export const listItem = tv({
             true: {
                 base: [
                     'cursor-pointer outline-none',
-                    'hover:[--li-shape:0.75rem]',
-                    'focus-visible:[--li-shape:1rem]',
+                    'hover:[--li-shape:var(--radius-md)]',
+                    'focus-visible:[--li-shape:var(--radius-lg)]',
                     'focus-visible:outline-solid focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-md-sys-color-secondary',
-                    'active:[--li-shape:1rem]'
+                    'active:[--li-shape:var(--radius-lg)]'
                 ]
             },
             false: ''
         },
         selected: {
             true: {
-                base: 'text-md-sys-color-on-secondary-container [--li-shape:1rem] hover:[--li-shape:1rem]',
+                base: 'text-md-sys-color-on-secondary-container [--li-shape:var(--radius-lg)] hover:[--li-shape:var(--radius-lg)]',
                 leading: 'text-md-sys-color-on-secondary-container',
                 overline: 'text-md-sys-color-on-secondary-container',
                 headline: 'text-md-sys-color-on-secondary-container',
@@ -104,10 +104,10 @@ export const listItem = tv({
         expanded: {
             true: {
                 // The expanded group is one 16dp container: header on top, nested items below.
-                base: '[--li-top:1rem] [--li-bottom:var(--li-shape)]',
+                base: '[--li-top:var(--radius-lg)] [--li-bottom:var(--li-shape)]',
                 expandIcon: 'rotate-180 bg-md-sys-color-surface-container',
                 region: 'grid-rows-[1fr]',
-                nested: '[&>:last-child]:[--li-bottom:1rem]'
+                nested: '[&>:last-child]:[--li-bottom:var(--radius-lg)]'
             },
             false: {
                 expandIcon: 'bg-md-sys-color-surface',

package/dist/components/containers/menu/theme.js

@@ -16,11 +16,11 @@ export const menu = tv({
       focus-visible:outline-md-sys-color-primary
       data-[disabled]:cursor-not-allowed data-[disabled]:opacity-38
     `,
-        icon: 'text-md-sys-color-on-surface-variant size-spacing-250 text-[20px] shrink-0',
-        indicator: 'size-spacing-250 text-[20px] shrink-0 text-md-sys-color-on-surface-variant',
+        icon: 'text-md-sys-color-on-surface-variant size-(--text-icon-20) text-icon-20 shrink-0',
+        indicator: 'size-(--text-icon-20) text-icon-20 shrink-0 text-md-sys-color-on-surface-variant',
         itemContent: 'flex flex-1 flex-col gap-spacing-50 text-left min-w-spacing-0',
         helper: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
-        rightSlot: 'text-md-sys-color-on-surface-variant size-spacing-250 text-[20px] shrink-0',
+        rightSlot: 'text-md-sys-color-on-surface-variant size-(--text-icon-20) text-icon-20 shrink-0',
         groupHeading: 'px-spacing-150 pt-spacing-100 pb-spacing-50 md-sys-typescale-label-medium text-md-sys-color-primary'
     },
     variants: {

package/dist/components/date/theme.js

@@ -15,7 +15,7 @@ export const dateRangeField = tv({
         leadingIcon: `
       text-md-sys-color-on-surface-variant size-spacing-300
       group-focus-within:text-md-sys-color-primary
-      group-data-[invalid]:text-md-sys-color-error ml-spacing-150 text-[24px]
+      group-data-[invalid]:text-md-sys-color-error ml-spacing-150 text-icon-24
     `,
         trailingIcon: `
       mr-spacing-50 shrink-0 text-md-sys-color-on-surface-variant
@@ -124,7 +124,7 @@ export const dateField = tv({
         leadingIcon: `
       text-md-sys-color-on-surface-variant size-spacing-300
       group-focus-within:text-md-sys-color-primary
-      group-data-[invalid]:text-md-sys-color-error ml-spacing-150 text-[24px]
+      group-data-[invalid]:text-md-sys-color-error ml-spacing-150 text-icon-24
     `,
         trailingIcon: `
       mr-spacing-50 shrink-0 text-md-sys-color-on-surface-variant

package/dist/components/forms/checkbox/theme.js

@@ -4,7 +4,7 @@ export const checkbox = tv({
         root: 'group inline-flex size-spacing-500 shrink-0 select-none items-center justify-center cursor-pointer',
         container: 'relative inline-flex size-[18px] shrink-0',
         control: 'layer-container absolute -inset-[11px] rounded-full text-md-sys-color-on-surface-variant state-layer before:rounded-full group-focus-visible:outline group-focus-visible:outline-3 group-focus-visible:outline-offset-2 group-focus-visible:outline-md-sys-color-secondary transition-colors md-sys-motion-fast-effects',
-        box: 'absolute inset-[11px] rounded-[4px] border-2 border-current bg-md-sys-color-surface transition-colors md-sys-motion-fast-effects',
+        box: 'absolute inset-[11px] rounded-xs border-2 border-current bg-md-sys-color-surface transition-colors md-sys-motion-fast-effects',
         checkIcon: 'pointer-events-none absolute inset-spacing-0 m-auto size-spacing-175 text-md-sys-color-on-primary opacity-0 scale-75',
         indeterminateIcon: 'pointer-events-none absolute inset-spacing-0 m-auto block h-spacing-25 w-spacing-150 rounded-full bg-md-sys-color-on-primary opacity-0 scale-75',
         label: 'md-sys-typescale-body-large leading-5 text-md-sys-color-on-surface cursor-pointer'

package/dist/components/forms/command/theme.js

@@ -25,7 +25,7 @@ export const commandItem = tv({
     slots: {
         base: [
             'cursor-default select-none outline-none',
-            'data-selected:[--li-shape:0.75rem] data-selected:bg-md-sys-color-on-surface/10'
+            'data-selected:[--li-shape:var(--radius-md)] data-selected:bg-md-sys-color-on-surface/10'
         ]
     },
     // The list's own surface fill is a variant, so it's replaced here, not in the base.

package/dist/components/forms/search/theme.js

@@ -38,7 +38,7 @@ export const searchView = tv({
         // keys are on gets the M3 focus indicator, drawn inside the item, and a focused item's shape.
         // `outline-solid` is load-bearing: ListItem's `outline-none` sets --tw-outline-style to none,
         // which `outline-3` reads, so without it the ring has a width and colour but no style.
-        results: 'min-h-spacing-0 overflow-y-auto overscroll-contain [&_[role=option]:not([aria-disabled=true])]:bg-transparent [&_[data-highlighted]]:outline-solid [&_[data-highlighted]]:outline-3 [&_[data-highlighted]]:-outline-offset-3 [&_[data-highlighted]]:outline-md-sys-color-secondary [&_[data-highlighted]]:[--li-shape:1rem]'
+        results: 'min-h-spacing-0 overflow-y-auto overscroll-contain [&_[role=option]:not([aria-disabled=true])]:bg-transparent [&_[data-highlighted]]:outline-solid [&_[data-highlighted]]:outline-3 [&_[data-highlighted]]:-outline-offset-3 [&_[data-highlighted]]:outline-md-sys-color-secondary [&_[data-highlighted]]:[--li-shape:var(--radius-lg)]'
     },
     variants: {
         hasTrailing: { true: '', false: { input: 'me-spacing-150' } }

package/dist/components/forms/select/theme.js

@@ -22,12 +22,12 @@ export const select = tv({
         leadingIcon: `
       text-md-sys-color-on-surface-variant size-spacing-300
       group-has-[[data-state=open]]:text-md-sys-color-primary
-      group-data-[invalid]:text-md-sys-color-error ml-spacing-150 text-[24px]
+      group-data-[invalid]:text-md-sys-color-error ml-spacing-150 text-icon-24
     `,
         dropdownIcon: `
       mr-spacing-150 text-md-sys-color-on-surface-variant size-spacing-300
       group-data-[state=open]:text-md-sys-color-primary
-      group-data-[invalid]:text-md-sys-color-error z-20 text-[24px]
+      group-data-[invalid]:text-md-sys-color-error z-20 text-icon-24
       transition-transform md-sys-motion-fast-spatial
       group-data-[state=open]:rotate-180
     `,

package/dist/components/forms/slider/theme.js

@@ -40,23 +40,23 @@ export const slider = tv({
             s: { root: '[--track:1.5rem] [--handle:2.75rem] [--outer:var(--radius-sm)]' },
             m: {
                 root: '[--track:2.5rem] [--handle:3.25rem] [--outer:var(--radius-md)]',
-                iconGlyph: 'size-spacing-300 text-[24px]'
+                iconGlyph: 'size-(--text-icon-24) text-icon-24'
             },
             l: {
                 root: '[--track:3.5rem] [--handle:4.25rem] [--outer:var(--radius-lg)]',
-                iconGlyph: 'size-spacing-300 text-[24px]'
+                iconGlyph: 'size-(--text-icon-24) text-icon-24'
             },
             xl: {
                 root: '[--track:6rem] [--handle:6.75rem] [--outer:var(--radius-xl)]',
-                iconGlyph: 'size-spacing-400 text-[32px]'
+                iconGlyph: 'size-(--text-icon-32) text-icon-32'
             }
         },
         vertical: {
             false: {
                 root: 'h-[var(--handle)] w-full min-w-40',
                 track: 'top-1/2 h-[var(--track)] -translate-y-1/2',
-                activeTrack: 'left-spacing-0 rounded-l-[var(--outer)] rounded-r-[2px]',
-                inactiveTrack: 'right-spacing-0 rounded-l-[2px] rounded-r-[var(--outer)]',
+                activeTrack: 'left-spacing-0 rounded-l-(--outer) rounded-r-(--md-comp-slider-inner-corner)',
+                inactiveTrack: 'right-spacing-0 rounded-l-(--md-comp-slider-inner-corner) rounded-r-(--outer)',
                 stop: 'top-1/2 -translate-x-1/2 -translate-y-1/2',
                 icon: 'top-1/2 -translate-y-1/2',
                 handle: 'top-spacing-0 h-full -translate-x-1/2',
@@ -65,8 +65,8 @@ export const slider = tv({
             true: {
                 root: 'h-full min-h-40 w-[var(--handle)]',
                 track: 'left-1/2 w-[var(--track)] -translate-x-1/2',
-                activeTrack: 'bottom-spacing-0 rounded-t-[2px] rounded-b-[var(--outer)]',
-                inactiveTrack: 'top-spacing-0 rounded-t-[var(--outer)] rounded-b-[2px]',
+                activeTrack: 'bottom-spacing-0 rounded-t-(--md-comp-slider-inner-corner) rounded-b-(--outer)',
+                inactiveTrack: 'top-spacing-0 rounded-t-(--outer) rounded-b-(--md-comp-slider-inner-corner)',
                 stop: 'left-1/2 -translate-x-1/2 translate-y-1/2',
                 icon: 'left-1/2 -translate-x-1/2',
                 handle: 'left-spacing-0 w-full translate-y-1/2',

package/dist/components/forms/textfield/theme.js

@@ -30,14 +30,14 @@ export const textfield = tv({
       transition-colors md-sys-motion-effects
     `,
         leadingIcon: `
-      text-md-sys-color-on-surface-variant size-spacing-300
+      text-md-sys-color-on-surface-variant size-(--text-icon-24)
       group-focus-within:text-md-sys-color-primary
-      ml-spacing-150 text-[24px]
+      ml-spacing-150 text-icon-24
     `,
         trailingIcon: `
-      mr-spacing-150 text-md-sys-color-on-surface-variant size-spacing-300
+      mr-spacing-150 text-md-sys-color-on-surface-variant size-(--text-icon-24)
       group-focus-within:text-md-sys-color-primary
-      z-20 text-[24px]
+      z-20 text-icon-24
     `,
         supportingText: `
       px-spacing-200 pt-spacing-50 flex justify-between

package/dist/components/forms/toggle-group/theme.js

@@ -14,7 +14,7 @@ export const toggleGroup = tv({
 export const toggleGroupItem = tv({
     slots: {
         base: 'layer-container state-layer relative inline-flex min-w-spacing-600 flex-1 items-center justify-center gap-spacing-100 px-spacing-200 md-sys-typescale-label-large text-md-sys-color-on-surface outline-none transition-colors md-sys-motion-fast-effects disabled:cursor-not-allowed disabled:opacity-38 [&:not(:last-child)]:border-r [&:not(:last-child)]:border-md-sys-color-outline data-[state=on]:bg-md-sys-color-secondary-container data-[state=on]:text-md-sys-color-on-secondary-container',
-        checkIcon: 'size-[18px] text-[18px]',
-        icon: 'size-[18px] text-[18px]'
+        checkIcon: 'size-(--text-icon-18) text-icon-18',
+        icon: 'size-(--text-icon-18) text-icon-18'
     }
 });