@noxlovette/material 0.9.3 → 0.10.0

package/dist/components/forms/textarea/theme.d.ts

@@ -0,0 +1,150 @@
+import { type VariantProps } from '../../../utils/tv.js';
+export type TextareaVariants = VariantProps<typeof textarea>;
+/**
+ * M3 defines a multi-line text field but no separate textarea spec. This keeps the text field's
+ * containers, label, notch and indicator, and changes only what a growing field has to:
+ * the container has a 56dp minimum instead of a fixed height, and the label and icons line up
+ * with the first line instead of the vertical center.
+ */
+export declare const textarea: import("tailwind-variants").TVReturnType<{
+    variant: {
+        filled: {
+            base: string;
+            inputWrapper: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            label: string;
+        };
+        outlined: {
+            inputWrapper: string;
+            label: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+            label: string;
+            supportingText: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            fieldset: string;
+        };
+    };
+    leadingIcon: {
+        true: {};
+    };
+    disabled: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            fieldset: string;
+        };
+    };
+}, {
+    base: string;
+    inputWrapper: string;
+    input: string;
+    label: string;
+    requiredAsterisk: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    supportingText: string;
+    counter: string;
+    fieldset: string;
+    legend: string;
+    legendLabel: string;
+}, undefined, {
+    variant: {
+        filled: {
+            base: string;
+            inputWrapper: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            label: string;
+        };
+        outlined: {
+            inputWrapper: string;
+            label: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+            label: string;
+            supportingText: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            fieldset: string;
+        };
+    };
+    leadingIcon: {
+        true: {};
+    };
+    disabled: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            fieldset: string;
+        };
+    };
+}, {
+    base: string;
+    inputWrapper: string;
+    input: string;
+    label: string;
+    requiredAsterisk: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    supportingText: string;
+    counter: string;
+    fieldset: string;
+    legend: string;
+    legendLabel: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        filled: {
+            base: string;
+            inputWrapper: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            label: string;
+        };
+        outlined: {
+            inputWrapper: string;
+            label: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+            label: string;
+            supportingText: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            fieldset: string;
+        };
+    };
+    leadingIcon: {
+        true: {};
+    };
+    disabled: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            fieldset: string;
+        };
+    };
+}, {
+    base: string;
+    inputWrapper: string;
+    input: string;
+    label: string;
+    requiredAsterisk: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    supportingText: string;
+    counter: string;
+    fieldset: string;
+    legend: string;
+    legendLabel: string;
+}>>;

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

@@ -0,0 +1,155 @@
+import { tv } from '../../../utils/tv.js';
+/**
+ * M3 defines a multi-line text field but no separate textarea spec. This keeps the text field's
+ * containers, label, notch and indicator, and changes only what a growing field has to:
+ * the container has a 56dp minimum instead of a fixed height, and the label and icons line up
+ * with the first line instead of the vertical center.
+ */
+export const textarea = tv({
+    slots: {
+        base: `
+      group relative w-full min-h-spacing-700 flex items-start
+    `,
+        /* The wrapper holds the vertical padding, not the textarea, so text scrolled past `maxRows`
+           is clipped at the textarea's edge instead of sliding under the floated label. */
+        inputWrapper: `
+      relative flex-1 self-stretch px-spacing-200 cursor-text
+    `,
+        input: `
+      peer block w-full bg-transparent outline-none resize-none field-sizing-content
+      md-sys-typescale-body-large text-md-sys-color-on-surface
+      disabled:text-md-sys-color-on-surface/38 disabled:cursor-not-allowed
+    `,
+        label: `
+      absolute left-spacing-200 top-spacing-200
+      md-sys-typescale-body-large
+      text-md-sys-color-on-surface-variant
+      pointer-events-none
+      transition-[top,left,font-size,line-height,color,transform] md-sys-motion-fast-spatial
+
+      peer-focus:text-md-sys-color-primary
+    `,
+        requiredAsterisk: `
+      ml-spacing-25
+      text-md-sys-color-error
+      group-focus-within:text-md-sys-color-primary
+      transition-colors md-sys-motion-effects
+    `,
+        /* On the first line of text: 16dp from the top when outlined, 24dp when filled. */
+        leadingIcon: `
+      text-md-sys-color-on-surface-variant size-(--text-icon-24)
+      group-focus-within:text-md-sys-color-primary
+      ml-spacing-150 mt-spacing-200 text-icon-24
+    `,
+        /* Sized to the 24dp glyph like Textfield's, so it takes the same offset as the leading icon. */
+        trailingIcon: `
+      mr-spacing-150 mt-spacing-200 text-md-sys-color-on-surface-variant size-(--text-icon-24)
+      group-focus-within:text-md-sys-color-primary
+      z-20 text-icon-24
+    `,
+        supportingText: `
+      px-spacing-200 pt-spacing-50 flex justify-between gap-spacing-200
+      md-sys-typescale-body-small
+      text-md-sys-color-on-surface-variant
+    `,
+        counter: `
+      ms-auto shrink-0
+    `,
+        fieldset: `
+      absolute -top-spacing-100 left-spacing-0 right-spacing-0 bottom-spacing-0 m-spacing-0 px-spacing-150
+      pointer-events-none rounded-xs border border-md-sys-color-outline
+      transition-colors md-sys-motion-fast-effects
+
+      group-hover:border-md-sys-color-on-surface
+      group-focus-within:border-2 group-focus-within:border-md-sys-color-primary
+    `,
+        legend: `
+      invisible float-none block h-auto max-w-[0.01px] overflow-hidden
+      whitespace-nowrap md-sys-typescale-body-small
+      transition-[max-width] md-sys-motion-fast-spatial
+
+      group-focus-within:max-w-full
+      group-has-[textarea:not(:placeholder-shown)]:max-w-full
+    `,
+        legendLabel: `
+      px-spacing-50
+    `
+    },
+    variants: {
+        variant: {
+            filled: {
+                base: `
+          px-spacing-0 bg-md-sys-color-surface-container-highest
+          rounded-t-xs state-layer before:rounded-xs hover:before:bg-md-sys-color-on-surface/8
+          after:absolute after:bottom-spacing-0 after:left-spacing-0 after:right-spacing-0 after:h-px after:bg-md-sys-color-on-surface-variant
+          after:transition-[height,background-color] after:md-sys-motion-fast-spatial
+          hover:after:bg-md-sys-color-on-surface
+          focus-within:after:bg-md-sys-color-primary
+          focus-within:after:h-[2px]
+        `,
+                /* 24dp above the first line leaves room for the label floated inside the container;
+                   24 + 24 + 8 = the 56dp single-line field. The resting label and the icons sit on that
+                   first line too, so the icons stay beside the text once the label floats to 8dp. */
+                inputWrapper: 'pt-spacing-300 pb-spacing-100',
+                leadingIcon: 'mt-spacing-300',
+                trailingIcon: 'mt-spacing-300',
+                label: `
+          top-spacing-300
+          peer-focus:top-spacing-100 peer-focus:md-sys-typescale-body-small
+          peer-not-placeholder-shown:top-spacing-100 peer-not-placeholder-shown:md-sys-typescale-body-small
+        `
+            },
+            outlined: {
+                inputWrapper: 'py-spacing-200',
+                label: `
+          peer-focus:top-spacing-0 peer-focus:md-sys-typescale-body-small peer-focus:-translate-y-1/2
+          peer-not-placeholder-shown:top-spacing-0 peer-not-placeholder-shown:md-sys-typescale-body-small peer-not-placeholder-shown:-translate-y-1/2
+        `
+            }
+        },
+        error: {
+            true: {
+                base: 'after:bg-md-sys-color-error focus-within:after:bg-md-sys-color-error',
+                label: 'text-md-sys-color-error peer-focus:text-md-sys-color-error',
+                supportingText: 'text-md-sys-color-error',
+                leadingIcon: 'text-md-sys-color-error',
+                trailingIcon: 'text-md-sys-color-error',
+                fieldset: `
+          border-md-sys-color-error
+          group-hover:border-md-sys-color-error
+          group-focus-within:border-md-sys-color-error
+        `
+            }
+        },
+        leadingIcon: {
+            true: {}
+        },
+        disabled: {
+            true: {
+                base: 'cursor-not-allowed opacity-60',
+                inputWrapper: 'cursor-not-allowed',
+                fieldset: 'border-md-sys-color-on-surface/12 group-hover:border-md-sys-color-on-surface/12'
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            /* Same as Textfield: the outlined label floats back over the leading icon into the notch. */
+            variant: 'outlined',
+            leadingIcon: true,
+            class: {
+                label: 'peer-focus:-left-spacing-250 peer-not-placeholder-shown:-left-spacing-250'
+            }
+        },
+        {
+            variant: 'filled',
+            disabled: true,
+            class: {
+                base: 'bg-md-sys-color-on-surface/4 after:bg-md-sys-color-on-surface/12'
+            }
+        }
+    ],
+    defaultVariants: {
+        variant: 'outlined'
+    }
+});

package/dist/components/forms/textarea/types.d.ts

@@ -0,0 +1,59 @@
+import type { IconProps } from '../../../utils/index.js';
+import type { Snippet } from 'svelte';
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+import type { TextareaVariants } from './theme.js';
+/**
+ * Props for the Textarea component.
+ */
+export type TextareaProps = TextareaVariants & Omit<HTMLTextareaAttributes, 'children' | 'value' | 'rows'> & {
+    /**
+     * The current value of the textarea.
+     */
+    value?: string | null;
+    /**
+     * The label text for the textarea.
+     */
+    label: string;
+    /**
+     * The ID for the textarea element. Auto-generated but can be replaced.
+     */
+    id?: string;
+    /**
+     * The placeholder text. Not used in M3: the label takes its place.
+     */
+    placeholder?: '';
+    /**
+     * Minimum height, in lines. The field grows with its content from here. Defaults to 3.
+     */
+    rows?: number;
+    /**
+     * Maximum height, in lines, before the content scrolls. Omit to grow without limit; set it
+     * to `rows` for a fixed-height field.
+     */
+    maxRows?: number;
+    /**
+     * Snippet for supporting text (helper or error text) displayed below the field.
+     */
+    supportingText?: Snippet;
+    /**
+     * Props for the leading icon, aligned with the first line.
+     */
+    leadingIconProps?: IconProps;
+    /**
+     * Props for the trailing icon button, aligned with the first line.
+     */
+    trailingIconProps?: IconProps;
+    /**
+     * Shows a character counter below the field. Going over it shows the error state; it does
+     * not stop typing (pass `maxlength` for a hard limit).
+     */
+    characterLimit?: number;
+    /**
+     * Callback function when the trailing icon is clicked.
+     */
+    trailingOnClick?: () => void;
+    /**
+     * Optional snippet for trailing icon override.
+     */
+    trailingIcon?: Snippet;
+};

package/dist/components/forms/textarea/types.js

@@ -0,0 +1 @@
+export {};

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'
     }
 });

package/dist/components/misc/ThemeSettings.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { RadioGroup } from '../forms/radio-group/index.js';
-  import { themeState, extractColorFromImage } from '../../utils/theme.svelte.js';
+  import { themeState, extractColorFromImage } from '../../utils/themeState.svelte.js';
   import { Title } from '../typography/title/index.js';
   import { Body } from '../typography/body/index.js';
 

package/dist/components/misc/materialAvatarPalette.js

@@ -1,7 +1,7 @@
 /**
  * Container-tier M3 color roles (see `styles/theme/*.css`) used as a generated avatar's
  * background. Deliberately NOT a fixed hex list: every consuming app picks its own source
- * color (`ThemeConfig.sourceColor` in `theme.svelte.ts`), which the M3 dynamic color
+ * color (`ThemeConfig.sourceColor` in `themeState.svelte.ts`), which the M3 dynamic color
  * algorithm expands into these tokens as real `--color-md-sys-color-*` custom properties on
  * `:root` — reading them live is what makes the avatar match that app's actual palette
  * instead of this library's own hardcoded pastel.

package/dist/components/nav/appbar/theme.js

@@ -126,7 +126,7 @@ export const appbar = tv({
         row: 'grid w-full items-center px-spacing-50',
         childrenRow: 'w-full px-spacing-100 pb-spacing-100',
         ghost: 'w-full shrink-0 pointer-events-none',
-        textContainer: 'flex min-w-spacing-0 flex-col gap-spacing-25 [--lead:0.25rem] [--trail:0.25rem]',
+        textContainer: 'flex min-w-spacing-0 flex-col gap-spacing-25 [--lead:var(--spacing-spacing-50)] [--trail:var(--spacing-spacing-50)]',
         title: 'text-md-sys-color-on-surface',
         subtitle: 'text-md-sys-color-on-surface-variant',
         leading: 'text-md-sys-color-on-surface col-start-1 row-start-1 flex shrink-0 items-center justify-self-start',
@@ -163,7 +163,7 @@ export const appbar = tv({
         searchContainer: {
             true: {
                 row: 'grid-cols-[auto_1fr_auto]',
-                textContainer: '[--lead:0.5rem] [--trail:0.5rem]'
+                textContainer: '[--lead:var(--spacing-spacing-100)] [--trail:var(--spacing-spacing-100)]'
             },
             false: ''
         },
@@ -173,10 +173,26 @@ export const appbar = tv({
     },
     compoundVariants: [
         // A title with no button beside it sits at the 16dp inset.
-        { align: 'start', noLeading: true, class: { textContainer: '[--lead:1rem]' } },
-        { align: 'start', noTrailing: true, class: { textContainer: '[--trail:1rem]' } },
-        { searchContainer: true, noLeading: true, class: { textContainer: '[--lead:0.75rem]' } },
-        { searchContainer: true, noTrailing: true, class: { textContainer: '[--trail:0.75rem]' } }
+        {
+            align: 'start',
+            noLeading: true,
+            class: { textContainer: '[--lead:var(--spacing-spacing-200)]' }
+        },
+        {
+            align: 'start',
+            noTrailing: true,
+            class: { textContainer: '[--trail:var(--spacing-spacing-200)]' }
+        },
+        {
+            searchContainer: true,
+            noLeading: true,
+            class: { textContainer: '[--lead:var(--spacing-spacing-150)]' }
+        },
+        {
+            searchContainer: true,
+            noTrailing: true,
+            class: { textContainer: '[--trail:var(--spacing-spacing-150)]' }
+        }
     ],
     defaultVariants: {
         align: 'start',

package/dist/components/nav/navbar/theme.js

@@ -12,7 +12,7 @@ export const navitem = tv({
         base: 'group relative flex flex-1 flex-col items-center justify-center min-w-spacing-0 max-w-[168px] h-full transition-colors md-sys-motion-fast-effects',
         content: 'flex flex-col items-center justify-center gap-spacing-50 w-full',
         iconContainer: 'relative flex items-center justify-center h-spacing-400 w-spacing-800 rounded-full transition-colors md-sys-motion-effects',
-        icon: 'text-[24px] size-spacing-300',
+        icon: 'text-icon-24 size-(--text-icon-24)',
         label: 'md-sys-typescale-label-medium truncate w-full text-center'
     },
     variants: {

package/dist/components/nav/tabs/theme.js

@@ -19,7 +19,7 @@ export const tab = tv({
             'data-[state=inactive]:text-md-sys-color-on-surface-variant'
         ].join(' '),
         label: 'md-sys-typescale-title-small',
-        icon: 'size-spacing-300 text-[24px]'
+        icon: 'size-(--text-icon-24) text-icon-24'
     },
     variants: {
         variant: {

package/dist/components/progress/CircularProgress.svelte

@@ -14,12 +14,14 @@ travels around the circle.
   import { animate, type AnimationPlaybackControls } from 'motion';
   import { springTokens, springTransition } from '../../animation/spring.js';
   import { SpringValue } from '../../animation/springValue.svelte.js';
+  import type { ProgressA11yProps } from './types.js';
 
   let {
     percent,
     size = 48,
-    thickness = 4
-  }: {
+    thickness = 4,
+    ...a11y
+  }: ProgressA11yProps & {
     /** The current progress percentage (0–100). Omit or pass null for indeterminate. */
     percent?: number | null;
     /** Diameter of the indicator in pixels. Defaults to 48. */
@@ -93,7 +95,7 @@ travels around the circle.
   );
 </script>
 
-<Progress.Root value={percent ?? null} max={100} data-cy="m3-circular-progress">
+<Progress.Root {...a11y} value={percent ?? null} max={100} data-cy="m3-circular-progress">
   {#snippet child({ props })}
     <svg
       {...props}

package/dist/components/progress/CircularProgress.svelte.d.ts

@@ -1,4 +1,5 @@
-type $$ComponentProps = {
+import type { ProgressA11yProps } from './types.js';
+type $$ComponentProps = ProgressA11yProps & {
     /** The current progress percentage (0–100). Omit or pass null for indeterminate. */
     percent?: number | null;
     /** Diameter of the indicator in pixels. Defaults to 48. */

package/dist/components/progress/LinearProgress.svelte

@@ -16,12 +16,14 @@ The track always keeps a gap either side of the bar.
   import { animate, type AnimationPlaybackControls } from 'motion';
   import { springTokens, springTransition } from '../../animation/spring.js';
   import { SpringValue } from '../../animation/springValue.svelte.js';
+  import type { ProgressA11yProps } from './types.js';
 
   let {
     percent,
     height = 4,
-    class: className
-  }: {
+    class: className,
+    ...a11y
+  }: ProgressA11yProps & {
     /** The current progress percentage (0–100). Omit or pass null for indeterminate. */
     percent?: number | null;
     /** Height of the bar in pixels. Defaults to 4. */
@@ -84,6 +86,7 @@ The track always keeps a gap either side of the bar.
 </script>
 
 <Progress.Root
+  {...a11y}
   value={percent ?? null}
   max={100}
   class={container({ class: clsx(className) })}

package/dist/components/progress/LinearProgress.svelte.d.ts

@@ -1,4 +1,5 @@
-type $$ComponentProps = {
+import type { ProgressA11yProps } from './types.js';
+type $$ComponentProps = ProgressA11yProps & {
     /** The current progress percentage (0–100). Omit or pass null for indeterminate. */
     percent?: number | null;
     /** Height of the bar in pixels. Defaults to 4. */

package/dist/components/progress/WavyLinearProgress.svelte

@@ -13,14 +13,16 @@ effects spring (critically damped, so progress never visibly runs backwards).
   import { springTokens } from '../../animation/spring.js';
   import { SpringValue } from '../../animation/springValue.svelte.js';
   import { linear, trackOpacity, WAVE_PERIOD_MS } from './_wavy.js';
+  import type { ProgressA11yProps } from './types.js';
 
   let {
     width = 600,
     height = 10,
     thickness = 4,
     percent,
-    class: className
-  }: {
+    class: className,
+    ...a11y
+  }: ProgressA11yProps & {
     /** Width of the SVG viewBox. */
     width?: number;
     /** Height of the SVG viewBox. */
@@ -56,7 +58,7 @@ effects spring (critically damped, so progress never visibly runs backwards).
   let wavePath = $derived(linear(height / 2 - thickness / 2, height / 2, left, percentX, time));
 </script>
 
-<Progress.Root value={percent ?? null} max={100}>
+<Progress.Root {...a11y} value={percent ?? null} max={100}>
   {#snippet child({ props })}
     <svg {...props} viewBox="0 0 {width} {height}" class={className}>
       <path

package/dist/components/progress/WavyLinearProgress.svelte.d.ts

@@ -1,4 +1,5 @@
-type $$ComponentProps = {
+import type { ProgressA11yProps } from './types.js';
+type $$ComponentProps = ProgressA11yProps & {
     /** Width of the SVG viewBox. */
     width?: number;
     /** Height of the SVG viewBox. */

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

@@ -1,4 +1,5 @@
 export * from './_wavy.js';
+export * from './types.js';
 export { default as CircularProgress } from './CircularProgress.svelte';
 export { default as LinearProgress } from './LinearProgress.svelte';
 export { default as WavyLinearProgress } from './WavyLinearProgress.svelte';

package/dist/components/progress/index.js

@@ -1,6 +1,7 @@
 // THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
 // re-export TS/JS modules from this folder
 export * from './_wavy.js';
+export * from './types.js';
 // default exports for components in this folder
 export { default as CircularProgress } from './CircularProgress.svelte';
 export { default as LinearProgress } from './LinearProgress.svelte';

package/dist/components/progress/types.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Accessible-name attributes shared by every progress indicator, forwarded to the element with
+ * `role="progressbar"`. Give each indicator a name when more than one is on screen, or when the
+ * visible label is not already associated with it.
+ */
+export type ProgressA11yProps = {
+    id?: string;
+    /** Accessible name, e.g. `"Reading comprehension"`. */
+    'aria-label'?: string;
+    /** Id of the element whose text names the indicator. */
+    'aria-labelledby'?: string;
+    /** Id of the element that describes the indicator. */
+    'aria-describedby'?: string;
+    /** Human-readable value, e.g. `"3 of 5 lessons"`. Defaults to the percentage. */
+    'aria-valuetext'?: string;
+};

package/dist/components/progress/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/snackbar/theme.js

@@ -5,7 +5,7 @@ export const snackbar = tv({
         label: 'text-md-sys-color-inverse-primary md-sys-typescale-label-large px-spacing-150 cursor-pointer ',
         actionWrapper: 'flex items-center z-40',
         supportingText: 'text-md-sys-color-inverse-on-surface md-sys-typescale-body-medium max-w-[60ch] ',
-        icon: 'size-spacing-300 text-[24px] text-md-sys-color-inverse-on-surface mr-spacing-50 ml-spacing-150'
+        icon: 'size-(--text-icon-24) text-icon-24 text-md-sys-color-inverse-on-surface mr-spacing-50 ml-spacing-150'
     },
     variants: {
         fixed: {

package/dist/components/table/TableHeader.svelte

@@ -36,7 +36,7 @@ and `sortDirection` props. Defaults to `scope="col"`.
         ].join(' ')}
         aria-hidden="true"
       >
-        <Icon name="arrow_upward" class="size-[18px] text-[18px]" />
+        <Icon name="arrow_upward" class="text-icon-18 size-(--text-icon-18)" />
       </span>
     {/if}
   </span>

package/dist/components/toolbar/theme.js

@@ -52,7 +52,7 @@ export const toolbar = tv({
 export const toolbarButton = tv({
     slots: {
         base: 'layer-container state-layer before:rounded-full relative inline-flex size-spacing-500 items-center justify-center rounded-full outline-none transition-colors md-sys-motion-fast-effects disabled:cursor-not-allowed disabled:opacity-38',
-        icon: 'size-spacing-250 text-[20px]'
+        icon: 'size-(--text-icon-20) text-icon-20'
     },
     variants: {
         color: {
@@ -65,7 +65,7 @@ export const toolbarButton = tv({
 export const toolbarGroupItem = tv({
     slots: {
         base: 'layer-container state-layer before:rounded-full relative inline-flex size-spacing-500 items-center justify-center rounded-full outline-none transition-colors md-sys-motion-fast-effects disabled:cursor-not-allowed disabled:opacity-38',
-        icon: 'size-spacing-250 text-[20px]'
+        icon: 'size-(--text-icon-20) text-icon-20'
     },
     variants: {
         color: {