@noxlovette/material 0.5.1 → 0.6.1

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

@@ -0,0 +1,72 @@
+import { tv } from '../../../utils/tv.js';
+/*
+  M3 side sheet (https://m3.material.io/components/side-sheets/specs). Full height, 256dp wide by
+  default and never wider than 400dp. 24dp start/end padding (16dp before a back button), 12dp
+  between the header's elements, `title-large` headline in `on-surface-variant`. Bottom actions
+  sit 16dp below a divider and 24dp above the bottom edge.
+
+  - Standard: `surface`, elevation 0, square, an `outline-variant` divider along its inner edge.
+    It sits in the layout and the content beside it reflows as it opens.
+  - Modal: `surface-container-low`, elevation 1, 16dp corners on its inner side, above a scrim.
+  - Detached (either): 16dp from the window edges, 16dp corners all round.
+
+  The header's icon buttons are 40dp around a 24dp icon; `-m-spacing-100` lines the icons (not the
+  buttons) up with the padding, as the spec measures it.
+*/
+export const sideSheet = tv({
+    slots: {
+        base: 'p-spacing-0',
+        container: 'flex h-full flex-col overflow-hidden',
+        header: 'flex shrink-0 items-center gap-spacing-150 ps-spacing-300 pe-spacing-300 pt-spacing-300',
+        iconButton: '-m-spacing-100 shrink-0',
+        headline: 'md-sys-typescale-title-large text-md-sys-color-on-surface-variant min-w-spacing-0 flex-1',
+        body: 'min-h-spacing-0 flex-1 overflow-y-auto overscroll-contain px-spacing-300 py-spacing-300',
+        actions: 'flex min-h-spacing-900 shrink-0 items-center justify-start gap-spacing-100 px-spacing-300 pt-spacing-200 pb-spacing-300'
+    },
+    variants: {
+        variant: {
+            modal: {
+                base: [
+                    'fixed inset-y-spacing-0 start-auto end-spacing-0 m-spacing-0 h-dvh max-h-none w-full overflow-visible bg-transparent outline-none',
+                    'backdrop:bg-md-sys-color-scrim/32 backdrop:transition-[background-color] backdrop:md-sys-motion-effects',
+                    'starting:backdrop:bg-transparent data-[state=closed]:pointer-events-none data-[state=closed]:backdrop:bg-transparent'
+                ],
+                container: 'bg-md-sys-color-surface-container-low text-md-sys-color-on-surface shadow-elevation-1 rounded-s-2xl'
+            },
+            standard: {
+                // The wrapper animates its width, so the content beside it reflows; the sheet itself
+                // keeps its width and stays pinned to the wrapper's end edge, so it appears to slide in.
+                base: 'md-sys-motion-spatial relative h-full shrink-0 overflow-clip transition-[width]',
+                container: 'bg-md-sys-color-surface text-md-sys-color-on-surface absolute inset-y-spacing-0 end-spacing-0'
+            }
+        },
+        detached: {
+            true: { container: 'rounded-2xl' },
+            false: {}
+        },
+        divider: { true: {}, false: {} },
+        back: { true: { header: 'ps-spacing-200' }, false: {} }
+    },
+    compoundVariants: [
+        {
+            variant: 'modal',
+            detached: true,
+            class: {
+                base: 'inset-y-spacing-200 end-spacing-200 h-[calc(100dvh-2rem)] max-w-[calc(100%-2rem)]'
+            }
+        },
+        { variant: 'modal', detached: false, class: { base: 'max-w-full' } },
+        {
+            variant: 'standard',
+            detached: true,
+            class: { container: 'inset-y-spacing-200 end-spacing-200' }
+        },
+        {
+            variant: 'standard',
+            detached: false,
+            divider: true,
+            class: { container: 'border-md-sys-color-outline-variant border-s' }
+        }
+    ],
+    defaultVariants: { variant: 'modal', detached: false, divider: true, back: false }
+});

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../utils/tv.js';
 export type DateFieldVariants = VariantProps<typeof dateField>;
 export type DateRangeFieldVariants = VariantProps<typeof dateRangeField>;
 export declare const dateRangeField: import("tailwind-variants").TVReturnType<{
@@ -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

@@ -1,11 +1,11 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../utils/tv.js';
 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.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export declare const checkbox: import("tailwind-variants").TVReturnType<{
     state: {
         unchecked: {};

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

@@ -1,12 +1,12 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 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.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type CommandVariants = VariantProps<typeof command>;
 export declare const command: import("tailwind-variants").TVReturnType<{
     [key: string]: {