@noxlovette/material 0.5.1 → 0.6.1

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

@@ -1,16 +1,16 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const select = tv({
     slots: {
         root: 'relative w-full',
         base: `
-      group w-full h-14 px-0 relative flex items-center
+      group w-full h-spacing-700 px-spacing-0 relative flex items-center
     `,
         trigger: `
       group peer w-full h-full flex items-center justify-between bg-transparent outline-none
       cursor-pointer
     `,
         inputWrapper: `
-      relative flex-1 h-full px-4 flex items-center
+      relative flex-1 h-full px-spacing-200 flex items-center
     `,
         value: `
       w-full bg-transparent outline-none
@@ -20,25 +20,25 @@ export const select = tv({
       truncate text-left
     `,
         leadingIcon: `
-      text-md-sys-color-on-surface-variant size-6
+      text-md-sys-color-on-surface-variant size-spacing-300
       group-has-[[data-state=open]]:text-md-sys-color-primary
-      group-data-[invalid]:text-md-sys-color-error ml-3 text-[24px]
+      group-data-[invalid]:text-md-sys-color-error ml-spacing-150 text-[24px]
     `,
         dropdownIcon: `
-      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-data-[state=open]:text-md-sys-color-primary
       group-data-[invalid]:text-md-sys-color-error z-20 text-[24px]
       transition-transform md-sys-motion-fast-spatial
       group-data-[state=open]:rotate-180
     `,
         content: `
-      z-[100] min-w-[var(--bits-select-anchor-width)] max-h-96 overflow-y-auto
-      rounded-lg gap-1 bg-md-sys-color-surface-container-high
-      shadow-elevation-3 ring-md-sys-color-outline/10 px-2 py-1 outline-none
+      z-layer-popup min-w-[var(--bits-select-anchor-width)] max-h-96 overflow-y-auto
+      rounded-lg gap-spacing-50 bg-md-sys-color-surface-container-high
+      shadow-elevation-3 ring-md-sys-color-outline/10 px-spacing-100 py-spacing-50 outline-none
     `,
         item: `
       rounded-sm relative flex w-full cursor-pointer select-none items-center
-      px-3 py-2 outline-none
+      px-spacing-150 py-spacing-100 outline-none
       md-sys-typescale-body-large text-md-sys-color-on-surface
       hover:bg-md-sys-color-on-surface/8
       data-[highlighted]:bg-md-sys-color-on-surface/8
@@ -48,14 +48,14 @@ export const select = tv({
       transition-colors md-sys-motion-fast-effects
     `,
         groupLabel: `
-      px-3 pt-2 pb-1 md-sys-typescale-label-medium
+      px-spacing-150 pt-spacing-100 pb-spacing-50 md-sys-typescale-label-medium
       text-md-sys-color-primary
     `,
         separator: `
-      my-1 h-px bg-md-sys-color-outline-variant
+      my-spacing-50 h-px bg-md-sys-color-outline-variant
     `,
         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
       group-data-[invalid]:text-md-sys-color-error
@@ -67,7 +67,7 @@ export const select = tv({
                 base: `
           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
           has-[[data-state=open]]:after:bg-md-sys-color-primary

package/dist/components/forms/slider/Slider.mdx

@@ -0,0 +1,85 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as SliderStories from './Slider.stories.svelte';
+
+<Meta of={SliderStories} />
+
+<Title />
+
+<Subtitle>Sliders allow users to make selections from a range of values.</Subtitle>
+
+[M3 spec](https://m3.material.io/components/sliders/specs) ·
+`import { Slider } from '@noxlovette/material';`
+
+<Canvas of={SliderStories.Playground} />
+
+<Controls of={SliderStories.Playground} />
+
+This is the M3 Expressive slider. It has two tracks, active and inactive, with a 6dp gap on each
+side of a 4dp bar handle. Bind `value` to read and set it:
+
+```svelte
+<script lang="ts">
+  let volume = $state(40);
+</script>
+
+<Slider bind:value={volume} min={0} max={100} />
+```
+
+## Choosing a size
+
+`xs` is the default. Go larger when the slider is the main control on the screen, or when it needs
+inset icons.
+
+| Size | Track | Handle | Outer corner | Inset icon   |
+| ---- | ----- | ------ | ------------ | ------------ |
+| `xs` | 16dp  | 44dp   | 8dp          | —            |
+| `s`  | 24dp  | 44dp   | 8dp          | —            |
+| `m`  | 40dp  | 52dp   | 12dp         | 24dp, 6dp in |
+| `l`  | 56dp  | 68dp   | 16dp         | 24dp, 6dp in |
+| `xl` | 96dp  | 108dp  | 28dp         | 32dp, 8dp in |
+
+The corners next to the handle are always 2dp.
+
+<Canvas of={SliderStories.Sizes} />
+
+## Inset icons
+
+`leadingIconProps` and `trailingIconProps` put an icon inside the track. M3 defines inset icons
+only for `m`, `l` and `xl`, so they're ignored on `xs` and `s`. When the handle gets too close for
+the icon to fit in its track, the icon moves across the handle into the other track. It also takes
+that track's color.
+
+<Canvas of={SliderStories.WithIcons} />
+
+## Continuous or discrete
+
+Leave `step="any"` for a continuous slider. Set a numeric `step` to make it discrete, and add
+`stops` to show a 4dp stop indicator at each step. With or without `stops`, `endStops` marks the
+end of the track 4dp from its edge. Stops hide within 6dp of the handle, and wherever an inset
+icon covers them.
+
+<Canvas of={SliderStories.DiscreteWithStops} />
+
+## Value indicator
+
+With `showValue`, a 48×44dp indicator shows above the handle while it's dragged or has keyboard
+focus. It sits 12dp above the handle, on inverse-surface. Use `format` to add units or localize
+the number.
+
+## States
+
+- **Pressed and focused:** the handle narrows from 4dp to 2dp on a fast spatial spring, and the
+  6dp gaps follow its edge.
+- **Disabled:** the active track is on-surface at 38% opacity, the inactive track 12%, and the
+  handle 38%.
+
+<Canvas of={SliderStories.Disabled} />
+
+## Accessibility
+
+- **Keyboard:** the arrow keys move by one step, and Home/End jump to `min`/`max` (via bits-ui's
+  `Slider.Root`).
+- **Focus:** keyboard focus narrows the handle, draws an outline around it, and reveals the value
+  indicator.
+- **Labelling:** give the slider an accessible name, such as `aria-label="Volume"`. Inset icons
+  are decorative and don't label it.

package/dist/components/forms/slider/Slider.stories.svelte

@@ -36,14 +36,14 @@
 
 <Story name="Playground">
   {#snippet template(args)}
-    <div class="max-w-sm p-10">
+    <div class="p-spacing-500 max-w-sm">
       <Slider {...args} />
     </div>
   {/snippet}
 </Story>
 
 <Story name="Sizes" asChild>
-  <div class="flex max-w-sm flex-col gap-8 p-10">
+  <div class="gap-spacing-400 p-spacing-500 flex max-w-sm flex-col">
     <Slider value={30} size="xs" />
     <Slider value={30} size="s" />
     <Slider value={30} size="m" />
@@ -52,8 +52,8 @@
   </div>
 </Story>
 
-<Story name="With Icons" asChild>
-  <div class="max-w-sm p-10">
+<Story name="With Icons" exportName="WithIcons" asChild>
+  <div class="p-spacing-500 max-w-sm">
     <Slider
       value={60}
       size="m"
@@ -63,14 +63,14 @@
   </div>
 </Story>
 
-<Story name="Discrete With Stops" asChild>
-  <div class="max-w-sm p-10">
+<Story name="Discrete With Stops" exportName="DiscreteWithStops" asChild>
+  <div class="p-spacing-500 max-w-sm">
     <Slider value={40} step={20} stops />
   </div>
 </Story>
 
 <Story name="Disabled" asChild>
-  <div class="max-w-sm p-10">
+  <div class="p-spacing-500 max-w-sm">
     <Slider value={40} disabled />
   </div>
 </Story>

package/dist/components/forms/slider/Slider.svelte

@@ -41,13 +41,18 @@ the track, a new `value` from outside) springs to it on the fast spatial spring.
 
   /* M3 slider geometry, in px. */
   const HANDLE_PX = 4;
+  /* Pressed and focused handles narrow to 2dp. */
+  const HANDLE_NARROW_PX = 2;
   const GAP_PX = 6;
-  const ICON_PADDING_PX = 8;
-  /* Stops closer than this to the handle's center are hidden under its gap. */
-  const STOP_CLEARANCE_PX = HANDLE_PX / 2 + GAP_PX;
+  /* Stop indicators are 4dp with 4dp trailing space, so their centers sit 6dp in from each end. */
+  const STOP_INSET_PX = 6;
 
-  const iconSize = $derived(size === 'xl' ? 'lg' : 'md');
-  const iconPx = $derived(size === 'xl' ? 40 : 24);
+  /* Inset icons exist only on M, L and XL: 24dp/6dp padding, 32dp/8dp on XL. */
+  const hasIcons = $derived(size === 'm' || size === 'l' || size === 'xl');
+  const iconPx = $derived(size === 'xl' ? 32 : 24);
+  const iconPaddingPx = $derived(size === 'xl' ? 8 : 6);
+  const leadingIcon = $derived(hasIcons ? leadingIconProps : undefined);
+  const trailingIcon = $derived(hasIcons ? trailingIconProps : undefined);
 
   const stepValue = $derived(typeof step === 'number' ? step : undefined);
   const range = $derived(max - min);
@@ -60,17 +65,21 @@ the track, a new `value` from outside) springs to it on the fast spatial spring.
     pressed, the handle is being dragged and tracks it directly.
   */
   let dragging = $state(false);
+  let pressed = $state(false);
+  let focusVisible = $state(false);
 
   const trackDrag: Attachment<HTMLElement> = (node) => {
     const move = () => (dragging = true);
     const release = () => {
       dragging = false;
+      pressed = false;
       window.removeEventListener('pointermove', move);
       window.removeEventListener('pointerup', release);
       window.removeEventListener('pointercancel', release);
     };
     const press = () => {
       if (disabled) return;
+      pressed = true;
       window.addEventListener('pointermove', move);
       window.addEventListener('pointerup', release);
       window.addEventListener('pointercancel', release);
@@ -92,6 +101,15 @@ the track, a new `value` from outside) springs to it on the fast spatial spring.
   /* The spring may overshoot the ends; the track can't. */
   const pos = $derived(Math.min(1, Math.max(0, fraction.current)));
 
+  /** Handle thickness: 4dp at rest, 2dp while pressed or keyboard-focused. */
+  const handleThickness = new SpringValue(
+    () => (pressed || focusVisible ? HANDLE_NARROW_PX : HANDLE_PX),
+    springTokens.fastSpatial
+  );
+  const handlePx = $derived(Math.max(1, handleThickness.current));
+  /* The gap is measured from the handle's current edge, so it stays 6dp as the handle narrows. */
+  const clearPx = $derived(handlePx / 2 + GAP_PX);
+
   /* ---- geometry -------------------------------------------------------------------------- */
 
   let trackWidth = $state(0);
@@ -101,21 +119,19 @@ the track, a new `value` from outside) springs to it on the fast spatial spring.
   const start = $derived(vertical ? 'bottom' : 'left');
   const extent = $derived(vertical ? 'height' : 'width');
 
-  /** Handle center: travels the track inset by half a handle so it never overhangs the ends. */
+  /** Handle center: travels the track inset by half a resting handle so it never overhangs the ends. */
   const center = (f: number) => `calc(${HANDLE_PX / 2}px + ${f} * (100% - ${HANDLE_PX}px))`;
   const centerPx = $derived(HANDLE_PX / 2 + pos * (length - HANDLE_PX));
 
-  const activePx = $derived(centerPx - HANDLE_PX / 2 - GAP_PX);
-  const inactivePx = $derived(length - centerPx - HANDLE_PX / 2 - GAP_PX);
+  const activePx = $derived(centerPx - clearPx);
+  const inactivePx = $derived(length - centerPx - clearPx);
 
-  const activeStyle = $derived(
-    `${extent}: max(0px, calc(${pos} * (100% - ${HANDLE_PX}px) - ${GAP_PX}px))`
-  );
-  const inactiveStyle = $derived(
-    `${extent}: max(0px, calc(${1 - pos} * (100% - ${HANDLE_PX}px) - ${GAP_PX}px))`
-  );
+  const trackStyle = (f: number) =>
+    `${extent}: max(0px, calc(${f} * (100% - ${HANDLE_PX}px) + ${HANDLE_PX / 2 - clearPx}px))`;
+  const activeStyle = $derived(trackStyle(pos));
+  const inactiveStyle = $derived(trackStyle(1 - pos));
 
-  /* Stops sit inset by half the track thickness so the end stops land in the rounded caps. */
+  /* Stops span the track inset by STOP_INSET_PX, so the end stops keep their 4dp trailing space. */
   const stopList = $derived.by(() => {
     const output: number[] = [];
     if (stops && stepValue && range > 0) {
@@ -124,24 +140,24 @@ the track, a new `value` from outside) springs to it on the fast spatial spring.
       output.push(1);
     }
     return output.filter((s) => {
-      if (leadingIconProps && s === 0) return false;
-      if (trailingIconProps && s === 1) return false;
-      return !length || Math.abs(s - pos) * length > STOP_CLEARANCE_PX;
+      if (leadingIcon && s === 0) return false;
+      if (trailingIcon && s === 1) return false;
+      return !length || Math.abs(s - pos) * length > clearPx;
     });
   });
 
   /* Icons ride inside their track; when it gets too short they hop across the handle. */
-  const iconFits = (trackPx: number) => trackPx >= iconPx + ICON_PADDING_PX * 2;
+  const iconFits = (trackPx: number) => trackPx >= iconPx + iconPaddingPx * 2;
   const leadingOnActive = $derived(!length || iconFits(activePx));
   const trailingOnInactive = $derived(!length || iconFits(inactivePx));
 
   const leadingOffset = $derived(
-    leadingOnActive ? ICON_PADDING_PX : centerPx + HANDLE_PX / 2 + GAP_PX + ICON_PADDING_PX
+    leadingOnActive ? iconPaddingPx : centerPx + clearPx + iconPaddingPx
   );
   const trailingOffset = $derived(
     trailingOnInactive
-      ? length - ICON_PADDING_PX - iconPx
-      : centerPx - HANDLE_PX / 2 - GAP_PX - ICON_PADDING_PX - iconPx
+      ? length - iconPaddingPx - iconPx
+      : centerPx - clearPx - iconPaddingPx - iconPx
   );
 
   const sliderDir = $derived(dir === null || dir === 'auto' ? undefined : dir);
@@ -175,26 +191,26 @@ the track, a new `value` from outside) springs to it on the fast spatial spring.
       {#each stopList as s (s)}
         <div
           class={cls.stop({ class: s < pos ? cls.stopOnActive() : cls.stopOnInactive() })}
-          style="{start}: calc(var(--track) / 2 + {s} * (100% - var(--track)))"
+          style="{start}: calc({STOP_INSET_PX}px + {s} * (100% - {STOP_INSET_PX * 2}px))"
         ></div>
       {/each}
 
-      {#if leadingIconProps}
+      {#if leadingIcon}
         <span
           class={cls.icon({ class: leadingOnActive ? cls.iconOnActive() : cls.iconOnInactive() })}
           style="{start}: {leadingOffset}px"
         >
-          <Icon size={iconSize} {...leadingIconProps} />
+          <Icon {...leadingIcon} class={cls.iconGlyph({ class: clsx(leadingIcon.class) })} />
         </span>
       {/if}
-      {#if trailingIconProps}
+      {#if trailingIcon}
         <span
           class={cls.icon({
             class: trailingOnInactive ? cls.iconOnInactive() : cls.iconOnActive()
           })}
           style="{start}: {trailingOffset}px"
         >
-          <Icon size={iconSize} {...trailingIconProps} />
+          <Icon {...trailingIcon} class={cls.iconGlyph({ class: clsx(trailingIcon.class) })} />
         </span>
       {/if}
 
@@ -204,7 +220,9 @@ the track, a new `value` from outside) springs to it on the fast spatial spring.
             {...thumbProps}
             class={cls.handle()}
             data-active={active || undefined}
-            style="{start}: {center(pos)}"
+            style="{start}: {center(pos)}; {extent}: {handlePx}px"
+            onfocus={(e) => (focusVisible = e.currentTarget.matches(':focus-visible'))}
+            onblur={() => (focusVisible = false)}
           ></div>
         {/snippet}
       </Slider.Thumb>

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

@@ -1,6 +1,8 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 /**
  * 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.
  *
@@ -16,12 +18,15 @@ export declare const slider: import("tailwind-variants").TVReturnType<{
         };
         m: {
             root: string;
+            iconGlyph: string;
         };
         l: {
             root: string;
+            iconGlyph: string;
         };
         xl: {
             root: string;
+            iconGlyph: string;
         };
     };
     vertical: {
@@ -60,6 +65,7 @@ export declare const slider: import("tailwind-variants").TVReturnType<{
     stopOnActive: string;
     stopOnInactive: string;
     icon: string;
+    iconGlyph: string;
     iconOnActive: string;
     iconOnInactive: string;
     handle: string;
@@ -74,12 +80,15 @@ export declare const slider: import("tailwind-variants").TVReturnType<{
         };
         m: {
             root: string;
+            iconGlyph: string;
         };
         l: {
             root: string;
+            iconGlyph: string;
         };
         xl: {
             root: string;
+            iconGlyph: string;
         };
     };
     vertical: {
@@ -118,6 +127,7 @@ export declare const slider: import("tailwind-variants").TVReturnType<{
     stopOnActive: string;
     stopOnInactive: string;
     icon: string;
+    iconGlyph: string;
     iconOnActive: string;
     iconOnInactive: string;
     handle: string;
@@ -132,12 +142,15 @@ export declare const slider: import("tailwind-variants").TVReturnType<{
         };
         m: {
             root: string;
+            iconGlyph: string;
         };
         l: {
             root: string;
+            iconGlyph: string;
         };
         xl: {
             root: string;
+            iconGlyph: string;
         };
     };
     vertical: {
@@ -176,6 +189,7 @@ export declare const slider: import("tailwind-variants").TVReturnType<{
     stopOnActive: string;
     stopOnInactive: string;
     icon: string;
+    iconGlyph: string;
     iconOnActive: string;
     iconOnInactive: string;
     handle: string;

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

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

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