@noxlovette/material 0.5.1 → 0.6.0

package/dist/components/containers/side-sheet/types.d.ts

@@ -3,22 +3,50 @@ import type { Snippet } from 'svelte';
  * Props for the SideSheet component.
  */
 export interface SideSheetProps {
+    /** The title at the top of the sheet. It also names the sheet for assistive technology. */
+    headline: string;
+    /** The sheet's content. It scrolls inside the sheet, with 24dp padding. */
+    children: Snippet;
     /**
-     * The title displayed at the top of the side sheet.
+     * Buttons pinned to the bottom of the sheet, e.g. Save and Cancel. Left-aligned, most
+     * important first.
      */
-    headline: string;
+    actions?: Snippet;
     /**
-     * The content of the side sheet.
+     * - `modal`: in front of the app above a scrim, blocking everything else until it's closed
+     *   (close button, Esc, or a scrim tap). Use it on compact and medium windows, or when the
+     *   content needs full attention.
+     * - `standard`: part of the layout. Place it as the last child of a full-height row; the
+     *   content beside it reflows as it opens and closes, and stays usable.
+     * @default 'modal'
      */
-    children: Snippet;
+    variant?: 'modal' | 'standard';
     /**
-     * Whether the sheet is shown. Bind it (`bind:open`) so the sheet can play its exit animation
-     * before unmounting.
+     * Whether the sheet is shown. Bind it (`bind:open`) so the sheet can close itself and play
+     * its exit animation.
      * @default true
      */
     open?: boolean;
     /**
-     * Called when the user dismisses the sheet (close button, Esc, backdrop click).
+     * Sheet width in px. M3 sizes side sheets at 256dp and never wider than 400dp; wider values
+     * are capped at 400.
+     * @default 256
+     */
+    width?: number;
+    /** Floats the sheet 16dp from the window edges with 16dp corners all round. */
+    detached?: boolean;
+    /**
+     * Draws the optional dividers: along a docked standard sheet's inner edge, and above the
+     * actions.
+     * @default true
+     */
+    divider?: boolean;
+    /**
+     * Shows a back button before the headline, for sheets that navigate within themselves. Called
+     * when it's activated.
      */
+    onback?: () => void;
+    /** Called when the user closes the sheet (close button, Esc, or a scrim tap). */
     close?: () => void;
+    class?: string;
 }

package/dist/components/date/DateField.stories.svelte

@@ -4,6 +4,7 @@
 
   const { Story } = defineMeta({
     title: 'Date/DateField',
+    tags: ['autodocs'],
     component: DateField,
     argTypes: {
       label: { control: 'text' },
@@ -24,14 +25,14 @@
 
 <Story name="Playground">
   {#snippet template(args)}
-    <div class="max-w-sm p-6">
+    <div class="p-spacing-300 max-w-sm">
       <DateField {...args} />
     </div>
   {/snippet}
 </Story>
 
 <Story name="Outlined 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">
     <DateField variant="outlined" label="Default" />
     <DateField variant="outlined" label="Required" required />
     <DateField variant="outlined" label="Error" error>
@@ -44,7 +45,7 @@
 </Story>
 
 <Story name="Filled 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">
     <DateField variant="filled" label="Default" />
     <DateField variant="filled" label="Required" required />
     <DateField variant="filled" label="Error" error>

package/dist/components/date/DateField.svelte

@@ -85,6 +85,7 @@ Changing the visible month slides the grid with the M3 lateral transition (see c
       <DatePicker.Trigger>
         {#snippet child({ props })}
           <ButtonIcon
+            variant="standard"
             {...props}
             {disabled}
             class={cls.trailingIcon()}
@@ -121,12 +122,20 @@ Changing the visible month slides the grid with the M3 lateral transition (see c
                   <div class={calendar.nav()}>
                     <DatePicker.PrevButton>
                       {#snippet child({ props })}
-                        <ButtonIcon {...props} iconProps={{ name: 'chevron_left' }} />
+                        <ButtonIcon
+                          variant="standard"
+                          {...props}
+                          iconProps={{ name: 'chevron_left' }}
+                        />
                       {/snippet}
                     </DatePicker.PrevButton>
                     <DatePicker.NextButton>
                       {#snippet child({ props })}
-                        <ButtonIcon {...props} iconProps={{ name: 'chevron_right' }} />
+                        <ButtonIcon
+                          variant="standard"
+                          {...props}
+                          iconProps={{ name: 'chevron_right' }}
+                        />
                       {/snippet}
                     </DatePicker.NextButton>
                   </div>

package/dist/components/date/DateRangeField.stories.svelte

@@ -4,6 +4,7 @@
 
   const { Story } = defineMeta({
     title: 'Date/DateRangeField',
+    tags: ['autodocs'],
     component: DateRangeField,
     argTypes: {
       variant: { control: 'select', options: ['filled', 'outlined'] },
@@ -22,14 +23,14 @@
 
 <Story name="Playground">
   {#snippet template(args)}
-    <div class="max-w-sm p-6">
+    <div class="p-spacing-300 max-w-sm">
       <DateRangeField {...args} />
     </div>
   {/snippet}
 </Story>
 
 <Story name="Outlined 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">
     <DateRangeField variant="outlined" />
     <DateRangeField variant="outlined" error>
       {#snippet supportingText()}
@@ -41,7 +42,7 @@
 </Story>
 
 <Story name="Filled 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">
     <DateRangeField variant="filled" />
     <DateRangeField variant="filled" error>
       {#snippet supportingText()}

package/dist/components/date/DateRangeField.svelte

@@ -55,7 +55,7 @@ Changing the visible month slides the grid with the M3 lateral transition (see c
       id={`${id}-${type}`}
     >
       {#snippet children({ segments })}
-        <div class="flex w-full pt-4 tabular-nums">
+        <div class="pt-spacing-200 flex w-full tabular-nums">
           {#each segments as { part, value: segment }}
             <DateRangePicker.Segment
               {part}
@@ -102,6 +102,7 @@ Changing the visible month slides the grid with the M3 lateral transition (see c
       <DateRangePicker.Trigger>
         {#snippet child({ props })}
           <ButtonIcon
+            variant="standard"
             {...props}
             {disabled}
             class={cls.trailingIcon()}
@@ -130,12 +131,20 @@ Changing the visible month slides the grid with the M3 lateral transition (see c
                   <div class={calendar.nav()}>
                     <DateRangePicker.PrevButton>
                       {#snippet child({ props })}
-                        <ButtonIcon {...props} iconProps={{ name: 'chevron_left' }} />
+                        <ButtonIcon
+                          variant="standard"
+                          {...props}
+                          iconProps={{ name: 'chevron_left' }}
+                        />
                       {/snippet}
                     </DateRangePicker.PrevButton>
                     <DateRangePicker.NextButton>
                       {#snippet child({ props })}
-                        <ButtonIcon {...props} iconProps={{ name: 'chevron_right' }} />
+                        <ButtonIcon
+                          variant="standard"
+                          {...props}
+                          iconProps={{ name: 'chevron_right' }}
+                        />
                       {/snippet}
                     </DateRangePicker.NextButton>
                   </div>

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

@@ -228,17 +228,17 @@ export declare const dateField: import("tailwind-variants").TVReturnType<{
 /** Segments of the typed date (`DatePicker.Segment` / `DateRangePicker.Segment`). */
 export declare const dateSegment: import("tailwind-variants").TVReturnType<{
     part: {
-        literal: "text-md-sys-color-on-surface-variant px-0";
+        literal: "text-md-sys-color-on-surface-variant px-spacing-0";
         value: "\n        text-md-sys-color-on-surface\n        aria-[valuetext=Empty]:text-md-sys-color-on-surface-variant\n        hover:bg-md-sys-color-on-surface/8\n        focus:bg-md-sys-color-primary-container focus:text-md-sys-color-on-primary-container\n      ";
     };
-}, undefined, "\n    rounded-xs px-0.5 py-0.5 select-none cursor-default outline-none\n    transition-colors md-sys-motion-fast-effects\n  ", {
+}, undefined, "\n    rounded-xs px-spacing-25 py-spacing-25 select-none cursor-default outline-none\n    transition-colors md-sys-motion-fast-effects\n  ", {
     part: {
-        literal: "text-md-sys-color-on-surface-variant px-0";
+        literal: "text-md-sys-color-on-surface-variant px-spacing-0";
         value: "\n        text-md-sys-color-on-surface\n        aria-[valuetext=Empty]:text-md-sys-color-on-surface-variant\n        hover:bg-md-sys-color-on-surface/8\n        focus:bg-md-sys-color-primary-container focus:text-md-sys-color-on-primary-container\n      ";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     part: {
-        literal: "text-md-sys-color-on-surface-variant px-0";
+        literal: "text-md-sys-color-on-surface-variant px-spacing-0";
         value: "\n        text-md-sys-color-on-surface\n        aria-[valuetext=Empty]:text-md-sys-color-on-surface-variant\n        hover:bg-md-sys-color-on-surface/8\n        focus:bg-md-sys-color-primary-container focus:text-md-sys-color-on-primary-container\n      ";
     };
 }, undefined>>;
@@ -251,12 +251,12 @@ export declare const dateCalendar: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             grid?: import("tailwind-variants").ClassValue;
+            row?: import("tailwind-variants").ClassValue;
             surface?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
             nav?: import("tailwind-variants").ClassValue;
             cell?: import("tailwind-variants").ClassValue;
             heading?: import("tailwind-variants").ClassValue;
-            row?: import("tailwind-variants").ClassValue;
             weekday?: import("tailwind-variants").ClassValue;
             day?: import("tailwind-variants").ClassValue;
         };
@@ -265,12 +265,12 @@ export declare const dateCalendar: import("tailwind-variants").TVReturnType<{
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             grid?: import("tailwind-variants").ClassValue;
+            row?: import("tailwind-variants").ClassValue;
             surface?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
             nav?: import("tailwind-variants").ClassValue;
             cell?: import("tailwind-variants").ClassValue;
             heading?: import("tailwind-variants").ClassValue;
-            row?: import("tailwind-variants").ClassValue;
             weekday?: import("tailwind-variants").ClassValue;
             day?: import("tailwind-variants").ClassValue;
         };
@@ -289,12 +289,12 @@ export declare const dateCalendar: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             grid?: import("tailwind-variants").ClassValue;
+            row?: import("tailwind-variants").ClassValue;
             surface?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
             nav?: import("tailwind-variants").ClassValue;
             cell?: import("tailwind-variants").ClassValue;
             heading?: import("tailwind-variants").ClassValue;
-            row?: import("tailwind-variants").ClassValue;
             weekday?: import("tailwind-variants").ClassValue;
             day?: import("tailwind-variants").ClassValue;
         };

package/dist/components/date/theme.js

@@ -2,10 +2,10 @@ import { tv } from 'tailwind-variants';
 export const dateRangeField = tv({
     slots: {
         base: `
-			group w-full h-14 relative flex items-center
+			group w-full h-spacing-700 relative flex items-center
 		`,
         inputWrapper: `
-			relative flex-1 px-4 h-full flex items-center
+			relative flex-1 px-spacing-200 h-full flex items-center
 		`,
         input: `
 			bg-transparent outline-none flex items-center
@@ -13,19 +13,19 @@ export const dateRangeField = tv({
 			disabled:text-md-sys-color-on-surface/38 w-full
 		`,
         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
-      group-data-[invalid]:text-md-sys-color-error ml-3 text-[24px]
+      group-data-[invalid]:text-md-sys-color-error ml-spacing-150 text-[24px]
     `,
         trailingIcon: `
-      mr-1 shrink-0 text-md-sys-color-on-surface-variant
+      mr-spacing-50 shrink-0 text-md-sys-color-on-surface-variant
       group-data-[invalid]:text-md-sys-color-error
     `,
         separator: `
 			text-md-sys-color-on-surface-variant select-none shrink-0
 		`,
         label: `
-			absolute left-4 top-1.5
+			absolute left-spacing-200 top-spacing-75
 			md-sys-typescale-body-small
 			text-md-sys-color-on-surface-variant
 			pointer-events-none
@@ -34,13 +34,13 @@ export const dateRangeField = tv({
 			z-20
 		`,
         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
 		`,
         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
 		`
@@ -50,7 +50,7 @@ export const dateRangeField = tv({
             filled: {
                 base: `
           bg-md-sys-color-surface-container-highest rounded-t-xs
-          after:absolute after:bottom-0 after:left-0 after:right-0
+          after:absolute after:bottom-spacing-0 after:left-spacing-0 after:right-spacing-0
           state-layer before:rounded-xs hover:before:bg-md-sys-color-on-surface/8
           after:h-px after:bg-md-sys-color-on-surface-variant
           after:transition-[height,background-color] after:md-sys-motion-fast-spatial
@@ -108,10 +108,10 @@ export const dateRangeField = tv({
 export const dateField = tv({
     slots: {
         base: `
-				group w-full h-14 relative flex items-center justify-between
+				group w-full h-spacing-700 relative flex items-center justify-between
 			`,
         inputWrapper: `
-			relative flex-1 px-4 h-full flex items-center
+			relative flex-1 px-spacing-200 h-full flex items-center
 		`,
         input: `
 				w-full bg-transparent outline-none
@@ -122,16 +122,16 @@ export const dateField = tv({
 			flex w-full flex-col tabular-nums
 		`,
         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
-      group-data-[invalid]:text-md-sys-color-error ml-3 text-[24px]
+      group-data-[invalid]:text-md-sys-color-error ml-spacing-150 text-[24px]
     `,
         trailingIcon: `
-      mr-1 shrink-0 text-md-sys-color-on-surface-variant
+      mr-spacing-50 shrink-0 text-md-sys-color-on-surface-variant
       group-data-[invalid]:text-md-sys-color-error
     `,
         label: `
-			absolute left-4 top-1.5
+			absolute left-spacing-200 top-spacing-75
 			md-sys-typescale-body-small
 			text-md-sys-color-on-surface-variant
 			pointer-events-none
@@ -140,18 +140,18 @@ export const dateField = tv({
 			z-20
 		`,
         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
 		`,
         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-[5px] left-0 right-0 bottom-0 m-0 px-2
+      absolute -top-[5px] left-spacing-0 right-spacing-0 bottom-spacing-0 m-spacing-0 px-spacing-100
       pointer-events-none rounded-xs border border-md-sys-color-outline
       transition-colors md-sys-motion-fast-effects
 
@@ -163,7 +163,7 @@ export const dateField = tv({
       whitespace-nowrap md-sys-typescale-body-small
     `,
         legendLabel: `
-      px-1
+      px-spacing-50
     `
     },
     variants: {
@@ -171,7 +171,7 @@ export const dateField = tv({
             filled: {
                 base: `
           bg-md-sys-color-surface-container-highest rounded-t-xs
-          after:absolute after:bottom-0 after:left-0 after:right-0
+          after:absolute after:bottom-spacing-0 after:left-spacing-0 after:right-spacing-0
           state-layer before:rounded-xs hover:before:bg-md-sys-color-on-surface/8
           after:h-px after:bg-md-sys-color-on-surface-variant
           after:transition-[height,background-color] after:md-sys-motion-fast-spatial
@@ -180,11 +180,11 @@ export const dateField = tv({
           disabled:bg-md-sys-color-on-surface/4
           disabled:after:bg-md-sys-color-on-surface/12
         `,
-                segments: 'pt-4'
+                segments: 'pt-spacing-200'
             },
             outlined: {
                 label: `
-          top-0 -translate-y-1/2
+          top-spacing-0 -translate-y-1/2
         `
             }
         },
@@ -217,12 +217,12 @@ export const dateField = tv({
 /** Segments of the typed date (`DatePicker.Segment` / `DateRangePicker.Segment`). */
 export const dateSegment = tv({
     base: `
-    rounded-xs px-0.5 py-0.5 select-none cursor-default outline-none
+    rounded-xs px-spacing-25 py-spacing-25 select-none cursor-default outline-none
     transition-colors md-sys-motion-fast-effects
   `,
     variants: {
         part: {
-            literal: 'text-md-sys-color-on-surface-variant px-0',
+            literal: 'text-md-sys-color-on-surface-variant px-spacing-0',
             value: `
         text-md-sys-color-on-surface
         aria-[valuetext=Empty]:text-md-sys-color-on-surface-variant
@@ -243,12 +243,12 @@ export const dateSegment = tv({
 export const dateCalendar = tv({
     slots: {
         surface: `
-      w-90 rounded-lg px-3 pb-3
+      w-90 rounded-lg px-spacing-150 pb-spacing-150
       bg-md-sys-color-surface-container-high shadow-elevation-3
       text-md-sys-color-on-surface
     `,
         header: `
-      flex h-14 items-center justify-between pl-4 pr-1
+      flex h-spacing-700 items-center justify-between pl-spacing-200 pr-spacing-50
     `,
         heading: `
       md-sys-typescale-label-large text-md-sys-color-on-surface-variant
@@ -263,15 +263,15 @@ export const dateCalendar = tv({
       flex w-full
     `,
         weekday: `
-      flex size-12 items-center justify-center
-      md-sys-typescale-body-large font-normal text-md-sys-color-on-surface
+      flex size-spacing-600 items-center justify-center
+      md-sys-typescale-body-large text-md-sys-color-on-surface
     `,
         /* The range band runs behind every day in the range. On the endpoints it covers only the inner
            half, so it meets the selected circle instead of sticking out past it. A one-day range has
            no band. */
         cell: `
-      relative flex size-12 items-center justify-center p-0
-      before:absolute before:inset-x-0 before:h-10 before:bg-md-sys-color-secondary-container
+      relative flex size-spacing-600 items-center justify-center p-spacing-0
+      before:absolute before:inset-x-spacing-0 before:h-spacing-500 before:bg-md-sys-color-secondary-container
       before:opacity-0 before:transition-opacity before:md-sys-motion-fast-effects
       data-range-middle:before:opacity-100
       data-highlighted:before:opacity-100
@@ -281,7 +281,7 @@ export const dateCalendar = tv({
       data-outside-month:before:opacity-0
     `,
         day: `
-      relative flex size-10 items-center justify-center rounded-full
+      relative flex size-spacing-500 items-center justify-center rounded-full
       md-sys-typescale-body-large text-md-sys-color-on-surface
       cursor-pointer outline-none
       transition-colors md-sys-motion-fast-effects

package/dist/components/forms/checkbox/Checkbox.mdx

@@ -0,0 +1,35 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as CheckboxStories from './Checkbox.stories.svelte';
+
+<Meta of={CheckboxStories} />
+
+<Title />
+
+<Subtitle>
+  Checkboxes let users select one or more items from a list, or turn a single item on or off.
+</Subtitle>
+
+[M3 spec](https://m3.material.io/components/checkbox/specs) ·
+`import { Checkbox } from '@noxlovette/material';`
+
+<Canvas of={CheckboxStories.Playground} />
+
+<Controls of={CheckboxStories.Playground} />
+
+## States
+
+Bind `checked` for the value. Bind `indeterminate` for a "select all" checkbox whose list is
+only partly selected; it wins over `checked` while set. `error` marks the control invalid.
+
+```svelte
+<Checkbox labelText="Accept terms and conditions" bind:checked={accepted} />
+```
+
+<Canvas of={CheckboxStories.States} />
+
+## Accessibility
+
+- **Label.** `labelText` is required and tied to the control by id, so clicking the text toggles
+  the checkbox too.
+- **Target size.** The state layer extends the target well past the 18dp box, to 48dp.
+- **Keyboard.** Space toggles; focus draws the M3 focus indicator.

package/dist/components/forms/checkbox/Checkbox.stories.svelte

@@ -24,14 +24,14 @@
 
 <Story name="Playground">
   {#snippet template(args)}
-    <div class="p-6">
+    <div class="p-spacing-300">
       <Checkbox {...args} />
     </div>
   {/snippet}
 </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">
     <Checkbox labelText="Unchecked" checked={false} />
     <Checkbox labelText="Checked" checked={true} />
     <Checkbox labelText="Indeterminate" indeterminate={true} />

package/dist/components/forms/checkbox/Checkbox.svelte

@@ -28,7 +28,7 @@ Checkboxes let users select one or more items from a list, or turn an item on or
   const cls = $derived(checkbox({ state, error, disabled }));
 </script>
 
-<div class="flex cursor-pointer items-center space-x-3">
+<div class="space-x-spacing-150 flex cursor-pointer items-center">
   <Checkbox.Root
     bind:checked
     bind:indeterminate

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

@@ -1,12 +1,12 @@
 import { tv } from 'tailwind-variants';
 export const checkbox = tv({
     slots: {
-        root: 'group inline-flex min-h-10 select-none items-start gap-3 text-md-sys-color-on-surface min-h-4.5 cursor-pointer',
+        root: 'group inline-flex min-h-spacing-500 select-none items-start gap-spacing-150 text-md-sys-color-on-surface min-h-4.5 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',
-        checkIcon: 'pointer-events-none absolute inset-0 m-auto size-3.5 text-md-sys-color-on-primary opacity-0 scale-75',
-        indeterminateIcon: 'pointer-events-none absolute inset-0 m-auto block h-0.5 w-3 rounded-full bg-md-sys-color-on-primary opacity-0 scale-75',
+        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'
     },
     variants: {

package/dist/components/forms/command/Command.stories.svelte

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

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

@@ -2,14 +2,14 @@ import { tv } from 'tailwind-variants';
 export const command = tv({
     slots: {
         base: 'flex h-full w-full flex-col overflow-hidden rounded-2xl bg-md-sys-color-surface-container-high text-md-sys-color-on-surface shadow-elevation-3 ring-1 ring-md-sys-color-outline/20',
-        inputWrapper: 'flex items-center border-b border-md-sys-color-outline-variant px-4',
-        inputIcon: 'mr-3 h-5 w-5 shrink-0 text-md-sys-color-on-surface-variant',
-        input: 'flex h-12 w-full rounded-md bg-transparent py-3 md-sys-typescale-body-large outline-none placeholder:text-md-sys-color-on-surface-variant disabled:cursor-not-allowed disabled:opacity-50',
-        list: 'max-h-[300px] overflow-y-auto overflow-x-hidden p-2 scrollbar-thin scrollbar-thumb-md-sys-color-outline-variant scrollbar-track-transparent',
-        empty: 'py-6 text-center md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
-        group: 'overflow-hidden p-1 text-md-sys-color-on-surface-variant [&_[data-command-group-heading]]:px-3 [&_[data-command-group-heading]]:py-2 [&_[data-command-group-heading]]:md-sys-typescale-label-medium [&_[data-command-group-heading]]:text-md-sys-color-on-surface-variant',
-        separator: '-mx-1 h-px bg-md-sys-color-outline-variant',
-        item: 'relative flex cursor-default select-none items-center rounded-lg px-3 py-3 md-sys-typescale-body-medium outline-none data-[selected=true]:bg-md-sys-color-secondary-container data-[selected=true]:text-md-sys-color-on-secondary-container data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 transition-colors md-sys-motion-fast-effects',
-        itemIcon: 'mr-3 h-5 w-5 shrink-0'
+        inputWrapper: 'flex items-center border-b border-md-sys-color-outline-variant px-spacing-200',
+        inputIcon: 'mr-spacing-150 h-spacing-250 w-spacing-250 shrink-0 text-md-sys-color-on-surface-variant',
+        input: 'flex h-spacing-600 w-full rounded-md bg-transparent py-spacing-150 md-sys-typescale-body-large outline-none placeholder:text-md-sys-color-on-surface-variant disabled:cursor-not-allowed disabled:opacity-50',
+        list: 'max-h-[300px] overflow-y-auto overflow-x-hidden p-spacing-100 scrollbar-thin scrollbar-thumb-md-sys-color-outline-variant scrollbar-track-transparent',
+        empty: 'py-spacing-300 text-center md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
+        group: 'overflow-hidden p-spacing-50 text-md-sys-color-on-surface-variant [&_[data-command-group-heading]]:px-spacing-150 [&_[data-command-group-heading]]:py-spacing-100 [&_[data-command-group-heading]]:md-sys-typescale-label-medium [&_[data-command-group-heading]]:text-md-sys-color-on-surface-variant',
+        separator: '-mx-spacing-50 h-px bg-md-sys-color-outline-variant',
+        item: 'relative flex cursor-default select-none items-center rounded-lg px-spacing-150 py-spacing-150 md-sys-typescale-body-medium outline-none data-[selected=true]:bg-md-sys-color-secondary-container data-[selected=true]:text-md-sys-color-on-secondary-container data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 transition-colors md-sys-motion-fast-effects',
+        itemIcon: 'mr-spacing-150 h-spacing-250 w-spacing-250 shrink-0'
     }
 });

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

@@ -1,15 +1,15 @@
 import { tv } from 'tailwind-variants';
 export const pinInput = tv({
     slots: {
-        root: 'flex flex-col gap-2',
+        root: 'flex flex-col gap-spacing-100',
         label: 'md-sys-typescale-label-large text-md-sys-color-on-surface-variant',
-        container: 'flex items-center gap-2',
+        container: 'flex items-center gap-spacing-100',
         cell: `
-      relative flex h-14 w-12 items-center justify-center
+      relative flex h-spacing-700 w-spacing-600 items-center justify-center
       bg-md-sys-color-surface-container-highest rounded-t-xs
       md-sys-typescale-headline-small text-md-sys-color-on-surface
       transition-colors md-sys-motion-fast-effects
-      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
       data-[focus]:after:bg-md-sys-color-primary data-[focus]:after:h-[2px]
       data-[placeholder]:text-md-sys-color-on-surface-variant/38

package/dist/components/forms/radio-group/RadioGroup.svelte

@@ -49,7 +49,7 @@ Radio buttons let users select one option from a set.
           <div class={itemCls.outerRing()}></div>
           <div class={itemCls.innerDot()}></div>
         </div>
-        <div class="flex flex-col gap-0.5 text-left">
+        <div class="gap-spacing-25 flex flex-col text-left">
           <span class={itemCls.label()}>{item.label}</span>
           {#if item.supportingText}
             <span class={itemCls.supporting()}>{item.supportingText}</span>

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

@@ -2,18 +2,18 @@ import { tv } from 'tailwind-variants';
 export const radioGroup = tv({
     slots: {
         root: 'flex',
-        item: 'inline-flex min-h-10 cursor-pointer select-none items-center gap-3 text-md-sys-color-on-surface',
+        item: 'inline-flex min-h-spacing-500 cursor-pointer select-none items-center gap-spacing-150 text-md-sys-color-on-surface',
         indicator: 'relative inline-flex  size-[20px] shrink-0',
         control: 'relative layer-container absolute -inset-[10px] rounded-full text-md-sys-color-on-surface-variant state-layer before:rounded-full',
-        outerRing: 'absolute inset-0 rounded-full border-2 border-md-sys-color-outline transition-colors md-sys-motion-fast-effects',
-        innerDot: 'absolute inset-0 m-auto size-2.5 scale-0 rounded-full bg-md-sys-color-on-primary-container transition-transform md-sys-motion-fast-spatial',
+        outerRing: 'absolute inset-spacing-0 rounded-full border-2 border-md-sys-color-outline transition-colors md-sys-motion-fast-effects',
+        innerDot: 'absolute inset-spacing-0 m-auto size-spacing-125 scale-0 rounded-full bg-md-sys-color-on-primary-container transition-transform md-sys-motion-fast-spatial',
         label: 'md-sys-typescale-body-large text-md-sys-color-on-surface',
         supporting: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant'
     },
     variants: {
         orientation: {
-            vertical: { root: 'flex-col gap-1' },
-            horizontal: { root: 'flex-row flex-wrap gap-6' }
+            vertical: { root: 'flex-col gap-spacing-50' },
+            horizontal: { root: 'flex-row flex-wrap gap-spacing-300' }
         },
         checked: {
             true: {