@noxlovette/material 0.5.0 → 0.6.0

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

@@ -1,6 +1,8 @@
 import { tv } from 'tailwind-variants';
 /**
  * M3 Expressive slider: an active and an inactive track separated from a bar handle by a 6dp gap.
+ * Per-size tokens (track / handle / outer corner / inset icon): XS 16/44/8/–, S 24/44/8/–,
+ * M 40/52/12/24, L 56/68/16/24, XL 96/108/28/32. The value indicator sits 12dp above the handle.
  * Track/handle positions are set inline by `Slider.svelte` from one animated value; these slots
  * only carry size, shape and color.
  *
@@ -12,22 +14,22 @@ export const slider = tv({
         track: 'pointer-events-none absolute',
         activeTrack: 'bg-md-sys-color-primary group-data-[disabled]:bg-md-sys-color-on-surface/38',
         inactiveTrack: 'bg-md-sys-color-secondary-container group-data-[disabled]:bg-md-sys-color-on-surface/12',
-        stop: 'pointer-events-none absolute size-1 rounded-full',
+        stop: 'pointer-events-none absolute size-spacing-50 rounded-full',
         stopOnActive: 'bg-md-sys-color-on-primary group-data-[disabled]:bg-md-sys-color-inverse-on-surface',
         stopOnInactive: 'bg-md-sys-color-on-secondary-container group-data-[disabled]:bg-md-sys-color-on-surface/38',
-        icon: 'pointer-events-none absolute',
+        icon: 'pointer-events-none absolute flex',
+        iconGlyph: '',
         iconOnActive: 'text-md-sys-color-on-primary',
         iconOnInactive: 'text-md-sys-color-on-secondary-container',
         handle: `
       absolute rounded-full bg-md-sys-color-primary outline-none
-      transition-[width,height] md-sys-motion-fast-spatial
       focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-md-sys-color-secondary
       group-data-[disabled]:bg-md-sys-color-on-surface/38
     `,
         value: `
-      pointer-events-none absolute z-10 flex min-w-12 items-center justify-center rounded-full
-      bg-md-sys-color-inverse-surface px-4 py-3
-      md-sys-typescale-label-large text-md-sys-color-inverse-on-surface
+      pointer-events-none absolute z-10 flex min-w-spacing-600 items-center justify-center rounded-full
+      bg-md-sys-color-inverse-surface px-spacing-200 py-spacing-150
+      md-sys-typescale-body-medium tracking-[0.5px] text-md-sys-color-inverse-on-surface
       opacity-0 transition-opacity md-sys-motion-effects
       group-has-[[data-slider-thumb]:focus-visible]:opacity-100
     `
@@ -36,30 +38,39 @@ export const slider = tv({
         size: {
             xs: { root: '[--track:1rem] [--handle:2.75rem] [--outer:var(--radius-sm)]' },
             s: { root: '[--track:1.5rem] [--handle:2.75rem] [--outer:var(--radius-sm)]' },
-            m: { root: '[--track:2.5rem] [--handle:3.25rem] [--outer:var(--radius-md)]' },
-            l: { root: '[--track:3.5rem] [--handle:4.25rem] [--outer:var(--radius-lg)]' },
-            xl: { root: '[--track:6rem] [--handle:6.75rem] [--outer:var(--radius-xl)]' }
+            m: {
+                root: '[--track:2.5rem] [--handle:3.25rem] [--outer:var(--radius-md)]',
+                iconGlyph: 'size-spacing-300 text-[24px]'
+            },
+            l: {
+                root: '[--track:3.5rem] [--handle:4.25rem] [--outer:var(--radius-lg)]',
+                iconGlyph: 'size-spacing-300 text-[24px]'
+            },
+            xl: {
+                root: '[--track:6rem] [--handle:6.75rem] [--outer:var(--radius-xl)]',
+                iconGlyph: 'size-spacing-400 text-[32px]'
+            }
         },
         vertical: {
             false: {
                 root: 'h-[var(--handle)] w-full min-w-40',
                 track: 'top-1/2 h-[var(--track)] -translate-y-1/2',
-                activeTrack: 'left-0 rounded-l-[var(--outer)] rounded-r-[2px]',
-                inactiveTrack: 'right-0 rounded-l-[2px] rounded-r-[var(--outer)]',
+                activeTrack: 'left-spacing-0 rounded-l-[var(--outer)] rounded-r-[2px]',
+                inactiveTrack: 'right-spacing-0 rounded-l-[2px] rounded-r-[var(--outer)]',
                 stop: 'top-1/2 -translate-x-1/2 -translate-y-1/2',
                 icon: 'top-1/2 -translate-y-1/2',
-                handle: 'top-0 h-full w-1 -translate-x-1/2 data-[active]:w-0.5',
-                value: 'bottom-[calc(100%+4px)] -translate-x-1/2'
+                handle: 'top-spacing-0 h-full -translate-x-1/2',
+                value: 'bottom-[calc(100%+12px)] -translate-x-1/2'
             },
             true: {
                 root: 'h-full min-h-40 w-[var(--handle)]',
                 track: 'left-1/2 w-[var(--track)] -translate-x-1/2',
-                activeTrack: 'bottom-0 rounded-t-[2px] rounded-b-[var(--outer)]',
-                inactiveTrack: 'top-0 rounded-t-[var(--outer)] rounded-b-[2px]',
+                activeTrack: 'bottom-spacing-0 rounded-t-[2px] rounded-b-[var(--outer)]',
+                inactiveTrack: 'top-spacing-0 rounded-t-[var(--outer)] rounded-b-[2px]',
                 stop: 'left-1/2 -translate-x-1/2 translate-y-1/2',
                 icon: 'left-1/2 -translate-x-1/2',
-                handle: 'left-0 h-1 w-full translate-y-1/2 data-[active]:h-0.5',
-                value: 'left-[calc(100%+4px)] translate-y-1/2'
+                handle: 'left-spacing-0 w-full translate-y-1/2',
+                value: 'left-[calc(100%+12px)] translate-y-1/2'
             }
         },
         active: {

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

@@ -30,11 +30,12 @@ export type SliderProps = Omit<SliderVariants, 'active'> & Omit<HTMLAttributes<H
      */
     showValue?: boolean;
     /**
-     * Props for the leading icon.
+     * Props for the leading inset icon. M3 only defines inset icons for sizes `m`, `l` and `xl`
+     * (24dp, or 32dp on XL); it is ignored on `xs` and `s`.
      */
     leadingIconProps?: IconProps;
     /**
-     * Props for the trailing icon.
+     * Props for the trailing inset icon. Only rendered on sizes `m`, `l` and `xl`.
      */
     trailingIconProps?: IconProps;
     /**

package/dist/components/forms/switch/Switch.mdx

@@ -0,0 +1,38 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as SwitchStories from './Switch.stories.svelte';
+
+<Meta of={SwitchStories} />
+
+<Title />
+
+<Subtitle>Switches toggle a single setting on or off.</Subtitle>
+
+[M3 spec](https://m3.material.io/components/switch/specs) ·
+`import { Switch } from '@noxlovette/material';`
+
+<Canvas of={SwitchStories.Playground} />
+
+<Controls of={SwitchStories.Playground} />
+
+## Icons
+
+`icons` controls the thumb icon: `checked` (the default) shows a check only when on, `both`
+shows a check when on and a close icon when off, and `none` shows a plain thumb. Showing icons
+gives a signal that doesn't depend on color alone.
+
+<Canvas of={SwitchStories.IconModes} />
+
+## Dragging
+
+Besides click and tap, the thumb can be dragged: moving it more than 16px toward the other side
+flips the state, like a native mobile switch.
+
+```svelte
+<Switch bind:checked={notifications} />
+```
+
+## Accessibility
+
+- **Role.** The control is a `role="switch"` from bits-ui; Space and Enter toggle it.
+- **Label.** The switch has no built-in label. Wrap it in a `<label>` with visible text, or give
+  it an `aria-label`.

package/dist/components/forms/switch/Switch.stories.svelte

@@ -23,14 +23,14 @@
 
 <Story name="Playground">
   {#snippet template(args)}
-    <div class="p-6">
+    <div class="p-spacing-300">
       <Switch {...args} />
     </div>
   {/snippet}
 </Story>
 
 <Story name="Icon Modes" asChild>
-  <div class="flex flex-col gap-4 p-6">
+  <div class="gap-spacing-200 p-spacing-300 flex flex-col">
     <Switch checked icons="checked" />
     <Switch checked icons="both" />
     <Switch checked icons="none" />
@@ -38,7 +38,7 @@
 </Story>
 
 <Story name="States" asChild>
-  <div class="flex flex-col gap-4 p-6">
+  <div class="gap-spacing-200 p-spacing-300 flex flex-col">
     <Switch checked={false} />
     <Switch checked={true} />
     <Switch checked={false} disabled />

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

@@ -5,10 +5,10 @@ import { tv } from 'tailwind-variants';
 // Hover  — 40dp state layer ring around thumb
 export const toggle = tv({
     slots: {
-        root: 'group relative inline-flex h-8 w-[3.25rem] shrink-0 [print-color-adjust:exact]',
+        root: 'group relative inline-flex h-spacing-400 w-[3.25rem] shrink-0 [print-color-adjust:exact]',
         // The input IS the track — styled as the pill background
         input: [
-            'absolute inset-0 m-0 h-full w-full appearance-none rounded-full',
+            'absolute inset-spacing-0 m-spacing-0 h-full w-full appearance-none rounded-full',
             'border-2 border-md-sys-color-outline bg-md-sys-color-surface-container-highest',
             'group-data-[state=checked]:border-md-sys-color-primary group-data-[state=checked]:bg-md-sys-color-primary',
             'group-data-[disabled]:cursor-not-allowed',
@@ -18,7 +18,7 @@ export const toggle = tv({
         ].join(' '),
         // Thumb — absolute over track
         handle: [
-            'pointer-events-none absolute left-2 top-1/2 flex h-4 w-4 -translate-y-1/2',
+            'pointer-events-none absolute left-spacing-100 top-1/2 flex h-spacing-200 w-spacing-200 -translate-y-1/2',
             'items-center justify-center rounded-full relative',
             'bg-md-sys-color-outline',
             'transition-[left,transform,background-color] md-sys-motion-fast-spatial',
@@ -36,17 +36,17 @@ export const toggle = tv({
         ].join(' '),
         // State layer ring around thumb
         hover: [
-            'pointer-events-none absolute left-4 top-1/2 h-12 w-12',
+            'pointer-events-none absolute left-spacing-200 top-1/2 h-spacing-600 w-spacing-600',
             '-translate-x-1/2 -translate-y-1/2 rounded-full',
             'transition-[left,background-color] md-sys-motion-fast-spatial',
-            'group-data-[state=checked]:left-9',
+            'group-data-[state=checked]:left-spacing-450',
             'group-data-[disabled]:hidden',
             'group-hover:bg-md-sys-color-on-surface/8',
             'group-data-[state=checked]:group-hover:bg-md-sys-color-primary/8'
         ].join(' '),
         // Icon inside thumb - shared base (sized via size="xs" prop on Icon, not here)
         icon: [
-            'absolute inset-0 m-auto pointer-events-none flex items-center justify-center',
+            'absolute inset-spacing-0 m-auto pointer-events-none flex items-center justify-center',
             'opacity-0 transition-opacity md-sys-motion-fast-effects shrink-0'
         ].join(' '),
         // Specific icon states - colour matches M3 spec for each thumb background

package/dist/components/forms/textfield/Textfield.mdx

@@ -0,0 +1,53 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as TextfieldStories from './Textfield.stories.svelte';
+
+<Meta of={TextfieldStories} />
+
+<Title />
+
+<Subtitle>Text fields let users enter and edit text.</Subtitle>
+
+[M3 spec](https://m3.material.io/components/text-fields/specs) ·
+`import { Textfield } from '@noxlovette/material';`
+
+<Canvas of={TextfieldStories.Playground} />
+
+<Controls of={TextfieldStories.Playground} />
+
+## Outlined or filled
+
+`variant` defaults to `outlined`: a bordered field whose floating label opens a gap in the border.
+`filled` has a container and a bottom indicator line, and carries more emphasis. Use outlined in
+busy surroundings (over an image, in dense forms) or next to a filled field that should stand
+out.
+
+<Canvas of={TextfieldStories.Outlined} />
+
+The `label` starts inside the field and floats up on focus or once there's a value.
+
+```svelte
+<Textfield label="Email" bind:value={email} required>
+  {#snippet supportingText()}
+    We'll never share your email.
+  {/snippet}
+</Textfield>
+```
+
+## Icons and supporting text
+
+`leadingIconProps` and `trailingIconProps` add icons (a trailing icon is a good place for a clear
+button). The `supportingText` snippet renders helper or error text below the field. Other native
+`<input>` attributes (`type`, `maxlength`, `autocomplete`…) pass through to the input.
+
+<Canvas of={TextfieldStories.WithIcons} />
+
+<Canvas of={TextfieldStories.CharacterLimit} />
+
+## Accessibility
+
+- **Label.** The floating label is a real `<label for>` tied to the input's id (generated when you
+  don't pass one), not an `aria-label`.
+- **Errors.** `error` sets `aria-invalid`. Say what's wrong in `supportingText`, not just with
+  color.
+- **Required.** `required` sets `required` and `aria-required`, and shows an asterisk that screen
+  readers skip.

package/dist/components/forms/textfield/Textfield.stories.svelte

@@ -26,14 +26,14 @@
 
 <Story name="Playground">
   {#snippet template(args)}
-    <div class="max-w-sm p-6">
+    <div class="p-spacing-300 max-w-sm">
       <Textfield {...args} />
     </div>
   {/snippet}
 </Story>
 
 <Story name="With Supporting Text" asChild>
-  <div class="max-w-sm p-6">
+  <div class="p-spacing-300 max-w-sm">
     <Textfield label="Email">
       {#snippet supportingText()}
         We'll never share your email.
@@ -43,7 +43,7 @@
 </Story>
 
 <Story name="With Icons" asChild>
-  <div class="max-w-sm p-6">
+  <div class="p-spacing-300 max-w-sm">
     <Textfield
       label="Search"
       leadingIconProps={{ name: 'search' }}
@@ -53,7 +53,7 @@
 </Story>
 
 <Story name="Character Limit" asChild>
-  <div class="max-w-sm p-6">
+  <div class="p-spacing-300 max-w-sm">
     <Textfield label="Bio" characterLimit={80} value="">
       {#snippet supportingText()}
         Keep it short.
@@ -63,7 +63,7 @@
 </Story>
 
 <Story name="States" asChild>
-  <div class="flex max-w-sm flex-col gap-6 p-6">
+  <div class="gap-spacing-300 p-spacing-300 flex max-w-sm flex-col">
     <Textfield label="Default" />
     <Textfield label="Required" required />
     <Textfield label="Error" error value="Invalid value">
@@ -76,7 +76,7 @@
 </Story>
 
 <Story name="Outlined" asChild>
-  <div class="flex max-w-sm flex-col gap-6 p-6">
+  <div class="gap-spacing-300 p-spacing-300 flex max-w-sm flex-col">
     <Textfield variant="outlined" label="Default" />
     <Textfield variant="outlined" label="With value" value="Hello" />
     <Textfield variant="outlined" label="Required" required />

package/dist/components/forms/textfield/Textfield.svelte

@@ -70,6 +70,7 @@ Text fields allow users to enter and edit text.
       {@render trailingIcon()}
     {:else if trailingIconProps}
       <ButtonIcon
+        variant="standard"
         type="button"
         onclick={trailingOnClick}
         class={cls.trailingIcon()}

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

@@ -4,6 +4,7 @@ export declare const textfield: import("tailwind-variants").TVReturnType<{
     variant: {
         filled: {
             base: string;
+            input: string;
             label: string;
         };
         outlined: {
@@ -45,6 +46,7 @@ export declare const textfield: import("tailwind-variants").TVReturnType<{
     variant: {
         filled: {
             base: string;
+            input: string;
             label: string;
         };
         outlined: {
@@ -86,6 +88,7 @@ export declare const textfield: import("tailwind-variants").TVReturnType<{
     variant: {
         filled: {
             base: string;
+            input: string;
             label: string;
         };
         outlined: {

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

@@ -2,20 +2,20 @@ import { tv } from 'tailwind-variants';
 export const textfield = tv({
     slots: {
         base: `
-      group relative w-full h-14 flex items-center
+      group relative w-full h-spacing-700 flex items-center
     `,
         /* Stretches to the full field height so the label floats relative to the field's top edge,
            not the input's. */
         inputWrapper: `
-      relative flex-1 self-stretch flex items-center px-4
+      relative flex-1 self-stretch flex items-center px-spacing-200
     `,
         input: `
-      peer w-full pt-4 bg-transparent outline-none
+      peer w-full bg-transparent outline-none
       md-sys-typescale-body-large text-md-sys-color-on-surface
       disabled:text-md-sys-color-on-surface/38
     `,
         label: `
-      absolute left-4 top-1/2 -translate-y-1/2
+      absolute left-spacing-200 top-1/2 -translate-y-1/2
       md-sys-typescale-body-large
       text-md-sys-color-on-surface-variant
       pointer-events-none
@@ -24,28 +24,28 @@ export const textfield = tv({
       peer-focus:text-md-sys-color-primary
     `,
         requiredAsterisk: `
-      ml-0.5
+      ml-spacing-25
       text-md-sys-color-error
       group-focus-within:text-md-sys-color-primary
       transition-colors md-sys-motion-effects
     `,
         leadingIcon: `
-      text-md-sys-color-on-surface-variant size-6
+      text-md-sys-color-on-surface-variant size-spacing-300
       group-focus-within:text-md-sys-color-primary
-      ml-3 text-[24px]
+      ml-spacing-150 text-[24px]
     `,
         trailingIcon: `
-      mr-3 text-md-sys-color-on-surface-variant size-6
+      mr-spacing-150 text-md-sys-color-on-surface-variant size-spacing-300
       group-focus-within:text-md-sys-color-primary
       z-20 text-[24px]
     `,
         supportingText: `
-      px-4 pt-1 flex justify-between
+      px-spacing-200 pt-spacing-50 flex justify-between
       md-sys-typescale-body-small
       text-md-sys-color-on-surface-variant
     `,
         fieldset: `
-      absolute -top-2 left-0 right-0 bottom-0 m-0 px-3
+      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
 
@@ -61,16 +61,16 @@ export const textfield = tv({
       group-has-[input:not(:placeholder-shown)]:max-w-full
     `,
         legendLabel: `
-      px-1
+      px-spacing-50
     `
     },
     variants: {
         variant: {
             filled: {
                 base: `
-          px-0 bg-md-sys-color-surface-container-highest
+          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-0 after:left-0 after:right-0 after:h-px after:bg-md-sys-color-on-surface-variant
+          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
@@ -78,15 +78,18 @@ export const textfield = tv({
           disabled:bg-md-sys-color-on-surface/4
           disabled:after:bg-md-sys-color-on-surface/12
         `,
+                /* Room for the label floated inside the container. Outlined labels float into the border
+                   notch instead, so their input stays vertically centered. */
+                input: 'pt-spacing-200',
                 label: `
-          peer-focus:top-2 peer-focus:md-sys-typescale-body-small peer-focus:translate-y-0
-          peer-not-placeholder-shown:top-2 peer-not-placeholder-shown:md-sys-typescale-body-small peer-not-placeholder-shown:translate-y-0
+          peer-focus:top-spacing-100 peer-focus:md-sys-typescale-body-small peer-focus:translate-y-spacing-0
+          peer-not-placeholder-shown:top-spacing-100 peer-not-placeholder-shown:md-sys-typescale-body-small peer-not-placeholder-shown:translate-y-spacing-0
         `
             },
             outlined: {
                 label: `
-          peer-focus:top-0 peer-focus:md-sys-typescale-body-small peer-focus:-translate-y-1/2
-          peer-not-placeholder-shown:top-0 peer-not-placeholder-shown:md-sys-typescale-body-small peer-not-placeholder-shown:-translate-y-1/2
+          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
         `
             }
         },
@@ -117,12 +120,12 @@ export const textfield = tv({
     compoundVariants: [
         {
             /* M3: an outlined label floats back to the field's start edge, over the leading icon, into
-               the notch. The wrapper starts after the icon (ml-3 + size-6 = 36px), so -20px puts the
+               the notch. The wrapper starts after the icon (ml-spacing-150 + size-spacing-300 = 36px), so -20px puts the
                label at 16px from the field's edge. */
             variant: 'outlined',
             leadingIcon: true,
             class: {
-                label: 'peer-focus:-left-5 peer-not-placeholder-shown:-left-5'
+                label: 'peer-focus:-left-spacing-250 peer-not-placeholder-shown:-left-spacing-250'
             }
         }
     ],

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

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const toggleGroup = tv({
     slots: {
-        root: 'inline-flex h-10 overflow-hidden rounded-full border border-md-sys-color-outline'
+        root: 'inline-flex h-spacing-500 overflow-hidden rounded-full border border-md-sys-color-outline'
     },
     variants: {
         orientation: {
@@ -13,7 +13,7 @@ export const toggleGroup = tv({
 });
 export const toggleGroupItem = tv({
     slots: {
-        base: 'layer-container state-layer relative inline-flex min-w-12 flex-1 items-center justify-center gap-2 px-4 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',
+        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]'
     }

package/dist/components/forms/tooltip/Tooltip.stories.svelte

@@ -10,6 +10,7 @@
 
   const { Story } = defineMeta({
     title: 'Forms/Tooltip',
+    tags: ['autodocs'],
     component: Tooltip
   });
 </script>

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

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const tooltip = tv({
     slots: {
-        base: 'min-w-60 py-3 px-4  shadow-elevation-2 rounded-md relative z-[100] pointer-events-auto',
+        base: 'min-w-60 py-spacing-150 px-spacing-200  shadow-elevation-2 rounded-md relative z-[100] pointer-events-auto',
         subhead: '',
         supportingText: '',
         textContainer: '',
@@ -10,10 +10,10 @@ export const tooltip = tv({
     variants: {
         variant: {
             rich: {
-                base: 'flex flex-col gap-3'
+                base: 'flex flex-col gap-spacing-150'
             },
             snack: {
-                base: 'inline-flex min-w-0 max-w-50 bg-md-sys-color-inverse-surface text-md-sys-color-inverse-on-surface md-sys-typescale-body-small px-3 py-2 shadow-elevation-3 before:rounded-md',
+                base: 'inline-flex min-w-spacing-0 max-w-50 bg-md-sys-color-inverse-surface text-md-sys-color-inverse-on-surface md-sys-typescale-body-small px-spacing-150 py-spacing-100 shadow-elevation-3 before:rounded-md',
                 supportingText: 'text-md-sys-color-inverse-on-surface md-sys-typescale-body-small',
                 textContainer: ''
             }

package/dist/components/misc/Avatar.stories.svelte

@@ -4,6 +4,7 @@
 
   const { Story } = defineMeta({
     title: 'Misc/Avatar',
+    tags: ['autodocs'],
     component: Avatar,
     argTypes: {
       size: { control: 'select', options: ['sm', 'md', 'lg'] },
@@ -24,7 +25,7 @@
 </Story>
 
 <Story name="Sizes" asChild>
-  <div class="flex items-end gap-4">
+  <div class="gap-spacing-200 flex items-end">
     <Avatar size="sm" seed="small" />
     <Avatar size="md" seed="medium" />
     <Avatar size="lg" seed="large" />
@@ -32,7 +33,7 @@
 </Story>
 
 <Story name="Generated Fallback" asChild>
-  <div class="flex items-end gap-4">
+  <div class="gap-spacing-200 flex items-end">
     <Avatar seed="alice" />
     <Avatar seed="bob" />
     <Avatar seed="carol" />
@@ -40,7 +41,7 @@
 </Story>
 
 <Story name="With Image" asChild>
-  <div class="flex items-end gap-4">
+  <div class="gap-spacing-200 flex items-end">
     <Avatar src="https://picsum.photos/seed/ogonek-1/200" alt="Sample user" />
     <Avatar
       src="https://this-url-does-not-resolve.example/broken.jpg"
@@ -55,7 +56,7 @@
 </Story>
 
 <Story name="Animated" asChild>
-  <div class="flex items-end gap-4">
+  <div class="gap-spacing-200 flex items-end">
     <Avatar seed="alice" dicebearStyle="gaze" tags={['animation']} />
     <Avatar seed="bob" dicebearStyle="shapes" tags={['animation']} />
     <Avatar seed="carol" dicebearStyle="blobs" tags={['animation']} />

package/dist/components/misc/ThemeSettings.svelte

@@ -37,37 +37,37 @@
   }
 </script>
 
-<div class="flex w-full flex-col gap-6">
+<div class="gap-spacing-300 flex w-full flex-col">
   <!-- Source Color -->
-  <div class="flex flex-col gap-2">
+  <div class="gap-spacing-100 flex flex-col">
     <Title size="medium">Source Color</Title>
-    <div class="flex items-center gap-4">
+    <div class="gap-spacing-200 flex items-center">
       <input
         type="color"
         bind:value={themeState.sourceColor}
-        class="size-10 cursor-pointer bg-transparent"
+        class="size-spacing-500 cursor-pointer bg-transparent"
       />
       <Body size="medium">{themeState.sourceColor}</Body>
     </div>
-    <div class="mt-2 flex flex-col gap-1">
+    <div class="mt-spacing-100 gap-spacing-50 flex flex-col">
       <Body size="medium">Or extract from image:</Body>
       <input
         type="file"
         accept="image/*"
         onchange={handleImageUpload}
-        class="file:bg-md-sys-color-primary-container file:text-md-sys-color-on-primary-container hover:file:bg-md-sys-color-primary-container/80 md-sys-typescale-body-medium file:md-sys-typescale-label-large file:mr-4 file:rounded-full file:border-0 file:px-4 file:py-2"
+        class="file:bg-md-sys-color-primary-container file:text-md-sys-color-on-primary-container hover:file:bg-md-sys-color-primary-container/80 md-sys-typescale-body-medium file:md-sys-typescale-label-large file:mr-spacing-200 file:px-spacing-200 file:py-spacing-100 file:rounded-full file:border-0"
       />
     </div>
   </div>
 
   <!-- Scheme -->
-  <div class="flex flex-col gap-2">
+  <div class="gap-spacing-100 flex flex-col">
     <Title size="medium">Scheme</Title>
     <RadioGroup items={schemeItems} bind:value={themeState.scheme as any} orientation="vertical" />
   </div>
 
   <!-- Contrast -->
-  <div class="flex flex-col gap-2">
+  <div class="gap-spacing-100 flex flex-col">
     <Title size="medium">Contrast</Title>
     <RadioGroup
       items={contrastItems}
@@ -77,7 +77,7 @@
   </div>
 
   <!-- Variant -->
-  <div class="flex flex-col gap-2">
+  <div class="gap-spacing-100 flex flex-col">
     <Title size="medium">Variant</Title>
     <RadioGroup
       items={variantItems}

package/dist/components/misc/ThemeSwitcher.svelte

@@ -6,14 +6,14 @@
   let open = $state(false);
 </script>
 
-<div class="fixed right-4 bottom-4 z-50 hidden md:block">
+<div class="right-spacing-200 bottom-spacing-200 fixed z-50 hidden md:block">
   <Popover bind:open title="Theme Settings" side="top" align="end" sideOffset={16}>
     {#snippet trigger(triggerProps)}
-      <FAB iconProps={{ name: 'palette' }} config="primary" {...triggerProps} />
+      <FAB iconProps={{ name: 'palette' }} {...triggerProps} />
     {/snippet}
 
     <div
-      class="scrollbar-thumb-md-sys-color-outline-variant hover:scrollbar-thumb-md-sys-color-outline flex max-h-[80vh] w-72 scrollbar-thin flex-col overflow-y-auto p-4"
+      class="scrollbar-thumb-md-sys-color-outline-variant hover:scrollbar-thumb-md-sys-color-outline p-spacing-200 flex max-h-[80vh] w-72 scrollbar-thin flex-col overflow-y-auto"
     >
       <ThemeSettings />
     </div>