@noxlovette/material 0.4.8 → 0.5.1

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

@@ -4,11 +4,17 @@ Material 3 Slider.
 
 Sliders allow users to make selections from a range of values.
 
+The handle follows the pointer 1:1 while dragged; any other change (a keyboard step, a click on
+the track, a new `value` from outside) springs to it on the fast spatial spring.
+
 @see https://m3.material.io/components/sliders/overview
 -->
 <script lang="ts">
   import { Slider } from 'bits-ui';
   import clsx from 'clsx';
+  import type { Attachment } from 'svelte/attachments';
+  import { springTokens } from '../../../animation/spring.js';
+  import { SpringValue } from '../../../animation/springValue.svelte.js';
   import { Icon } from '../../../utils/index.js';
   import { slider } from './theme.js';
   import type { SliderProps } from './types.js';
@@ -26,58 +32,120 @@ Sliders allow users to make selections from a range of values.
     stops = false,
     endStops = true,
     vertical = false,
-    format = (n: number) => {
-      return n.toFixed(0);
-    },
+    format = (n: number) => n.toFixed(0),
     class: className,
     dir,
     id,
     ...extra
   }: SliderProps = $props();
 
-  const {
-    root,
-    leadingIcon,
-    leadingIconPop,
-    trailingIcon,
-    trailingIconPop,
-    trackFill,
-    trackRest,
-    stopBase,
-    stopFill,
-    stopRest,
-    handle: handleCls,
-    value: valueCls
-  } = $derived(slider({ size, vertical }));
-
-  const sliderDir = $derived(dir === null || dir === 'auto' ? undefined : dir);
-  const sliderId = $derived(id === null ? undefined : id);
+  /* M3 slider geometry, in px. */
+  const HANDLE_PX = 4;
+  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;
 
-  let offsetWidth = $state(600);
-  let offsetHeight = $state(600);
-  let inlineSize = $derived(vertical ? offsetHeight : offsetWidth);
+  const iconSize = $derived(size === 'xl' ? 'lg' : 'md');
+  const iconPx = $derived(size === 'xl' ? 40 : 24);
 
+  const stepValue = $derived(typeof step === 'number' ? step : undefined);
   const range = $derived(max - min);
-  const handlePosition = $derived((value - min) / (range || 1));
-  const stopList = $derived.by(() => {
-    const output: number[] = [];
-    const add = (stopValue: number) => {
-      if (leadingIconProps && stopValue == 0) return;
-      if (trailingIconProps && stopValue == 1) return;
-      output.push(stopValue);
+  const toFraction = (v: number) => (range > 0 ? (v - min) / range : 0);
+
+  /* ---- motion ---------------------------------------------------------------------------- */
+
+  /*
+    A press that jumps the value (a click on the track) springs; once the pointer moves while
+    pressed, the handle is being dragged and tracks it directly.
+  */
+  let dragging = $state(false);
+
+  const trackDrag: Attachment<HTMLElement> = (node) => {
+    const move = () => (dragging = true);
+    const release = () => {
+      dragging = false;
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', release);
+      window.removeEventListener('pointercancel', release);
+    };
+    const press = () => {
+      if (disabled) return;
+      window.addEventListener('pointermove', move);
+      window.addEventListener('pointerup', release);
+      window.addEventListener('pointercancel', release);
+    };
+    node.addEventListener('pointerdown', press);
+    return () => {
+      node.removeEventListener('pointerdown', press);
+      release();
     };
+  };
 
-    if (stops && typeof step == 'number' && range > 0) {
-      for (let i = 0; i <= range; i += step) add(i / range);
-    }
-    if (endStops && !output.includes(1)) {
-      add(1);
-    }
+  /** The rendered position as a 0–1 fraction; springs towards `value` unless dragging. */
+  const fraction = new SpringValue(
+    () => toFraction(value),
+    springTokens.fastSpatial,
+    () => dragging
+  );
 
-    return output;
+  /* The spring may overshoot the ends; the track can't. */
+  const pos = $derived(Math.min(1, Math.max(0, fraction.current)));
+
+  /* ---- geometry -------------------------------------------------------------------------- */
+
+  let trackWidth = $state(0);
+  let trackHeight = $state(0);
+  const length = $derived(vertical ? trackHeight : trackWidth);
+
+  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. */
+  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 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))`
+  );
+
+  /* Stops sit inset by half the track thickness so the end stops land in the rounded caps. */
+  const stopList = $derived.by(() => {
+    const output: number[] = [];
+    if (stops && stepValue && range > 0) {
+      for (let v = min; v <= max; v += stepValue) output.push(toFraction(v));
+    } else if (endStops) {
+      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;
+    });
   });
 
-  const stepValue = $derived(typeof step === 'number' ? step : undefined);
+  /* 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 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
+  );
+  const trailingOffset = $derived(
+    trailingOnInactive
+      ? length - ICON_PADDING_PX - iconPx
+      : centerPx - HANDLE_PX / 2 - GAP_PX - ICON_PADDING_PX - iconPx
+  );
+
+  const sliderDir = $derived(dir === null || dir === 'auto' ? undefined : dir);
+  const sliderId = $derived(id === null ? undefined : id);
 </script>
 
 <Slider.Root
@@ -93,109 +161,59 @@ Sliders allow users to make selections from a range of values.
   {...extra}
 >
   {#snippet child({ props })}
+    {@const cls = slider({ size, vertical, active: dragging })}
     <div
       {...props}
-      class={root({ class: clsx(className) })}
-      style="--handle: {handlePosition - 0.5}; {props.style ?? ''}"
+      class={cls.root({ class: clsx(className) })}
+      bind:clientWidth={trackWidth}
+      bind:clientHeight={trackHeight}
+      {@attach trackDrag}
     >
-      <div
-        class="pointer-events-none absolute inset-0"
-        bind:offsetWidth
-        bind:offsetHeight
-        aria-hidden="true"
-      ></div>
-
-      <div
-        class={trackFill({
-          class: clsx(
-            vertical &&
-              '[clip-path:inset(calc(100%-var(--handle-left))_0_0_0_round_var(--m3-slider-track-in-shape)_var(--m3-slider-track-in-shape)_var(--track-radius)_var(--track-radius))]'
-          )
-        })}
-      >
-        {#each stopList as stop}
-          <div
-            class={clsx(
-              stopBase(),
-              stopFill(),
-              vertical ? '-translate-x-1/2 translate-y-1/2' : '-translate-x-1/2 -translate-y-1/2'
-            )}
-            style:--x={stop - 0.5}
-          ></div>
-        {/each}
-      </div>
-
-      <div
-        class={trackRest({
-          class: clsx(
-            vertical &&
-              '[clip-path:inset(0_0_var(--handle-right)_0_round_var(--track-radius)_var(--track-radius)_var(--m3-slider-track-in-shape)_var(--m3-slider-track-in-shape))]'
-          )
-        })}
-      >
-        {#each stopList as stop}
-          <div
-            class={clsx(
-              stopBase(),
-              stopRest(),
-              vertical ? '-translate-x-1/2 translate-y-1/2' : '-translate-x-1/2 -translate-y-1/2'
-            )}
-            style:--x={stop - 0.5}
-          ></div>
-        {/each}
-      </div>
+      <div class={cls.track({ class: cls.activeTrack() })} style={activeStyle}></div>
+      <div class={cls.track({ class: cls.inactiveTrack() })} style={inactiveStyle}></div>
+
+      {#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)))"
+        ></div>
+      {/each}
 
       {#if leadingIconProps}
-        <Icon
-          class={leadingIcon({
-            class: clsx(
-              leadingIconProps.class,
-              inlineSize * handlePosition < (size == 'xl' ? 48 : 40) && leadingIconPop(),
-              vertical && 'translate-x-[-50%] translate-y-0'
-            )
-          })}
-          {...leadingIconProps}
-        />
+        <span
+          class={cls.icon({ class: leadingOnActive ? cls.iconOnActive() : cls.iconOnInactive() })}
+          style="{start}: {leadingOffset}px"
+        >
+          <Icon size={iconSize} {...leadingIconProps} />
+        </span>
       {/if}
       {#if trailingIconProps}
-        <Icon
-          class={trailingIcon({
-            class: clsx(
-              trailingIconProps.class,
-              inlineSize * (1 - handlePosition) < (size == 'xl' ? 48 : 40) && trailingIconPop(),
-              vertical && 'translate-x-[-50%] translate-y-0'
-            )
+        <span
+          class={cls.icon({
+            class: trailingOnInactive ? cls.iconOnInactive() : cls.iconOnActive()
           })}
-          {...trailingIconProps}
-        />
+          style="{start}: {trailingOffset}px"
+        >
+          <Icon size={iconSize} {...trailingIconProps} />
+        </span>
       {/if}
 
-      <Slider.Thumb
-        index={0}
-        class={handleCls({
-          class: clsx(vertical ? 'translate-y-1/2' : '-translate-x-1/2')
-        })}
-      />
+      <Slider.Thumb index={0}>
+        {#snippet child({ props: thumbProps, active })}
+          <div
+            {...thumbProps}
+            class={cls.handle()}
+            data-active={active || undefined}
+            style="{start}: {center(pos)}"
+          ></div>
+        {/snippet}
+      </Slider.Thumb>
 
       {#if showValue}
-        <div
-          class={valueCls({
-            class: clsx(vertical ? 'translate-x-0 translate-y-1/2 rotate-90' : '-translate-x-1/2')
-          })}
-        >
+        <div class={cls.value()} style="{start}: {center(pos)}" aria-hidden="true">
           {format(value)}
         </div>
       {/if}
     </div>
   {/snippet}
 </Slider.Root>
-
-<style>
-  @layer tokens {
-    :root {
-      --m3-slider-track-out-shape: 0.5rem;
-      --m3-slider-track-in-shape: 0.125rem;
-      --m3-slider-handle-shape: calc(infinity * 1px);
-    }
-  }
-</style>

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

@@ -5,6 +5,9 @@ import type { SliderProps } from './types.js';
  *
  * Sliders allow users to make selections from a range of values.
  *
+ * The handle follows the pointer 1:1 while dragged; any other change (a keyboard step, a click on
+ * the track, a new `value` from outside) springs to it on the fast spatial spring.
+ *
  * @see https://m3.material.io/components/sliders/overview
  */
 declare const Slider: import("svelte").Component<SliderProps, {}, "value">;

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

@@ -1,77 +1,183 @@
 import { type VariantProps } from 'tailwind-variants';
+/**
+ * M3 Expressive slider: an active and an inactive track separated from a bar handle by a 6dp gap.
+ * Track/handle positions are set inline by `Slider.svelte` from one animated value; these slots
+ * only carry size, shape and color.
+ *
+ * https://m3.material.io/components/sliders/specs
+ */
 export declare const slider: import("tailwind-variants").TVReturnType<{
     size: {
-        xs: "[--track-height:1rem] [--handle-height:2.75rem] [--track-radius:var(--m3-shape-small)] [--icon-size:0]";
-        s: "[--track-height:1.5rem] [--handle-height:2.75rem] [--track-radius:var(--m3-shape-small)] [--icon-size:0]";
-        m: "[--track-height:2.5rem] [--handle-height:3.25rem] [--track-radius:var(--m3-shape-medium)] [--icon-size:1.5rem]";
-        l: "[--track-height:3.5rem] [--handle-height:4.25rem] [--track-radius:var(--m3-shape-large)] [--icon-size:1.5rem]";
-        xl: "[--track-height:6rem] [--handle-height:6.75rem] [--track-radius:var(--m3-shape-extra-large)] [--icon-size:2rem]";
+        xs: {
+            root: string;
+        };
+        s: {
+            root: string;
+        };
+        m: {
+            root: string;
+        };
+        l: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
     };
     vertical: {
-        true: "[writing-mode:sideways-lr]";
+        false: {
+            root: string;
+            track: string;
+            activeTrack: string;
+            inactiveTrack: string;
+            stop: string;
+            icon: string;
+            handle: string;
+            value: string;
+        };
+        true: {
+            root: string;
+            track: string;
+            activeTrack: string;
+            inactiveTrack: string;
+            stop: string;
+            icon: string;
+            handle: string;
+            value: string;
+        };
+    };
+    active: {
+        true: {
+            value: string;
+        };
     };
 }, {
     root: string;
-    input: string;
-    leadingIcon: string;
-    leadingIconPop: string;
-    trailingIcon: string;
-    trailingIconPop: string;
-    trackFill: string;
-    trackRest: string;
-    stopBase: string;
-    stopFill: string;
-    stopRest: string;
+    track: string;
+    activeTrack: string;
+    inactiveTrack: string;
+    stop: string;
+    stopOnActive: string;
+    stopOnInactive: string;
+    icon: string;
+    iconOnActive: string;
+    iconOnInactive: string;
     handle: string;
     value: string;
 }, undefined, {
     size: {
-        xs: "[--track-height:1rem] [--handle-height:2.75rem] [--track-radius:var(--m3-shape-small)] [--icon-size:0]";
-        s: "[--track-height:1.5rem] [--handle-height:2.75rem] [--track-radius:var(--m3-shape-small)] [--icon-size:0]";
-        m: "[--track-height:2.5rem] [--handle-height:3.25rem] [--track-radius:var(--m3-shape-medium)] [--icon-size:1.5rem]";
-        l: "[--track-height:3.5rem] [--handle-height:4.25rem] [--track-radius:var(--m3-shape-large)] [--icon-size:1.5rem]";
-        xl: "[--track-height:6rem] [--handle-height:6.75rem] [--track-radius:var(--m3-shape-extra-large)] [--icon-size:2rem]";
+        xs: {
+            root: string;
+        };
+        s: {
+            root: string;
+        };
+        m: {
+            root: string;
+        };
+        l: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
     };
     vertical: {
-        true: "[writing-mode:sideways-lr]";
+        false: {
+            root: string;
+            track: string;
+            activeTrack: string;
+            inactiveTrack: string;
+            stop: string;
+            icon: string;
+            handle: string;
+            value: string;
+        };
+        true: {
+            root: string;
+            track: string;
+            activeTrack: string;
+            inactiveTrack: string;
+            stop: string;
+            icon: string;
+            handle: string;
+            value: string;
+        };
+    };
+    active: {
+        true: {
+            value: string;
+        };
     };
 }, {
     root: string;
-    input: string;
-    leadingIcon: string;
-    leadingIconPop: string;
-    trailingIcon: string;
-    trailingIconPop: string;
-    trackFill: string;
-    trackRest: string;
-    stopBase: string;
-    stopFill: string;
-    stopRest: string;
+    track: string;
+    activeTrack: string;
+    inactiveTrack: string;
+    stop: string;
+    stopOnActive: string;
+    stopOnInactive: string;
+    icon: string;
+    iconOnActive: string;
+    iconOnInactive: string;
     handle: string;
     value: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        xs: "[--track-height:1rem] [--handle-height:2.75rem] [--track-radius:var(--m3-shape-small)] [--icon-size:0]";
-        s: "[--track-height:1.5rem] [--handle-height:2.75rem] [--track-radius:var(--m3-shape-small)] [--icon-size:0]";
-        m: "[--track-height:2.5rem] [--handle-height:3.25rem] [--track-radius:var(--m3-shape-medium)] [--icon-size:1.5rem]";
-        l: "[--track-height:3.5rem] [--handle-height:4.25rem] [--track-radius:var(--m3-shape-large)] [--icon-size:1.5rem]";
-        xl: "[--track-height:6rem] [--handle-height:6.75rem] [--track-radius:var(--m3-shape-extra-large)] [--icon-size:2rem]";
+        xs: {
+            root: string;
+        };
+        s: {
+            root: string;
+        };
+        m: {
+            root: string;
+        };
+        l: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
     };
     vertical: {
-        true: "[writing-mode:sideways-lr]";
+        false: {
+            root: string;
+            track: string;
+            activeTrack: string;
+            inactiveTrack: string;
+            stop: string;
+            icon: string;
+            handle: string;
+            value: string;
+        };
+        true: {
+            root: string;
+            track: string;
+            activeTrack: string;
+            inactiveTrack: string;
+            stop: string;
+            icon: string;
+            handle: string;
+            value: string;
+        };
+    };
+    active: {
+        true: {
+            value: string;
+        };
     };
 }, {
     root: string;
-    input: string;
-    leadingIcon: string;
-    leadingIconPop: string;
-    trailingIcon: string;
-    trailingIconPop: string;
-    trackFill: string;
-    trackRest: string;
-    stopBase: string;
-    stopFill: string;
-    stopRest: string;
+    track: string;
+    activeTrack: string;
+    inactiveTrack: string;
+    stop: string;
+    stopOnActive: string;
+    stopOnInactive: string;
+    icon: string;
+    iconOnActive: string;
+    iconOnInactive: string;
     handle: string;
     value: string;
 }>>;

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

@@ -1,33 +1,73 @@
 import { tv } from 'tailwind-variants';
+/**
+ * M3 Expressive slider: an active and an inactive track separated from a bar handle by a 6dp gap.
+ * Track/handle positions are set inline by `Slider.svelte` from one animated value; these slots
+ * only carry size, shape and color.
+ *
+ * https://m3.material.io/components/sliders/specs
+ */
 export const slider = tv({
     slots: {
-        root: 'slider-root group relative block min-w-40 [block-size:var(--handle-height)] [print-color-adjust:exact] [--m3-slider-track-out-shape:0.5rem] [--m3-slider-track-in-shape:0.125rem] [--m3-slider-handle-shape:var(--m3-shape-full)] [--functional-width:calc(100%-2*(0.25rem+0.125rem))] [--handle-left:calc(50%+var(--functional-width)*var(--handle)-0.125rem-0.375rem)] [--handle-center:calc(50%+var(--functional-width)*var(--handle))] [--handle-right:calc(50%+var(--functional-width)*var(--handle)+0.125rem+0.375rem)] cursor-pointer data-[disabled]:cursor-not-allowed',
-        input: 'peer absolute left-1/2 [inline-size:calc(var(--functional-width)+1rem)] [block-size:100%] -translate-x-1/2 appearance-none opacity-0 m-0 enabled:cursor-pointer',
-        leadingIcon: 'absolute top-1/2 left-1 h-[var(--icon-size)] w-[var(--icon-size)] -translate-y-1/2 text-[var(--m3c-secondary-container)] pointer-events-none',
-        leadingIconPop: 'left-[var(--handle-right)] text-[var(--m3c-primary)]',
-        trailingIcon: 'absolute top-1/2 right-1 h-[var(--icon-size)] w-[var(--icon-size)] -translate-y-1/2 text-[var(--m3c-primary)] pointer-events-none',
-        trailingIconPop: 'right-[calc(100%-var(--handle-left))] text-[var(--m3c-secondary-container)]',
-        trackFill: 'absolute inset-x-0 [inset-block:calc((var(--handle-height)-var(--track-height))/2)] pointer-events-none bg-[var(--m3c-primary)] [clip-path:inset(0_calc(100%-var(--handle-left))_0_0_round_var(--track-radius)_var(--m3-slider-track-in-shape)_var(--m3-slider-track-in-shape)_var(--track-radius))] group-data-[disabled]:bg-[--translucent(var(--m3c-on-surface),0.38)] [@media(forced-colors:active)]:bg-[selecteditem] group-data-[disabled]:[@media(forced-colors:active)]:bg-[canvastext]',
-        trackRest: 'absolute inset-x-0 [inset-block:calc((var(--handle-height)-var(--track-height))/2)] pointer-events-none bg-[var(--m3c-secondary-container)] [clip-path:inset(0_0_0_var(--handle-right)_round_var(--m3-slider-track-in-shape)_var(--track-radius)_var(--track-radius)_var(--m3-slider-track-in-shape))] group-data-[disabled]:bg-[--translucent(var(--m3c-on-surface),0.12)] [@media(forced-colors:active)]:bg-[canvastext] group-data-[disabled]:[@media(forced-colors:active)]:bg-[graytext]',
-        stopBase: 'absolute top-1/2 h-1 w-1 rounded-full [inset-inline-start:calc(50%+(100%-0.5rem-0.25rem)*var(--x))] pointer-events-none',
-        stopFill: 'bg-[var(--m3c-on-primary)] group-data-[disabled]:bg-[var(--m3c-inverse-on-surface)]',
-        stopRest: 'bg-[var(--m3c-primary)] group-data-[disabled]:bg-[--translucent(var(--m3c-on-surface),0.38)]',
-        handle: 'absolute inset-y-0 left-[var(--handle-center)] w-1 rounded-[1.25rem] bg-[var(--m3c-primary)] pointer-events-none group-focus-within:outline group-focus-within:outline-[4px] group-focus-within:outline-[var(--m3c-on-secondary-container)] group-focus-within:outline-offset-[5px] group-focus-within:z-[2] group-focus-within:w-0.5 group-active:w-0.5 group-data-[disabled]:bg-[--translucent(var(--m3c-on-surface),0.38)] [@media(forced-colors:active)]:bg-[selecteditem] group-data-[disabled]:[@media(forced-colors:active)]:bg-[graytext]',
-        value: 'absolute flex min-w-12 items-center justify-center rounded-[var(--m3-slider-handle-shape)] bg-[var(--m3c-inverse-surface)] px-4 py-3 text-[var(--m3c-inverse-on-surface)] md-sys-typescale-label-large [inset-inline-start:var(--handle-center)] [inset-block-end:calc(var(--handle-height)+4px)] opacity-0 pointer-events-none select-none z-[1] group-hover:opacity-100 group-focus-within:opacity-100 group-active:opacity-100 [@media(forced-colors:active)]:border-2 [@media(forced-colors:active)]:border-[selecteditem] [@media(forced-colors:active)]:overflow-hidden'
+        root: 'group relative flex shrink-0 cursor-pointer touch-none select-none data-[disabled]:cursor-not-allowed',
+        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',
+        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',
+        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
+      opacity-0 transition-opacity md-sys-motion-effects
+      group-has-[[data-slider-thumb]:focus-visible]:opacity-100
+    `
     },
     variants: {
         size: {
-            xs: '[--track-height:1rem] [--handle-height:2.75rem] [--track-radius:var(--m3-shape-small)] [--icon-size:0]',
-            s: '[--track-height:1.5rem] [--handle-height:2.75rem] [--track-radius:var(--m3-shape-small)] [--icon-size:0]',
-            m: '[--track-height:2.5rem] [--handle-height:3.25rem] [--track-radius:var(--m3-shape-medium)] [--icon-size:1.5rem]',
-            l: '[--track-height:3.5rem] [--handle-height:4.25rem] [--track-radius:var(--m3-shape-large)] [--icon-size:1.5rem]',
-            xl: '[--track-height:6rem] [--handle-height:6.75rem] [--track-radius:var(--m3-shape-extra-large)] [--icon-size:2rem]'
+            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)]' }
         },
         vertical: {
-            true: '[writing-mode:sideways-lr]'
+            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)]',
+                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'
+            },
+            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]',
+                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'
+            }
+        },
+        active: {
+            true: { value: 'opacity-100' }
         }
     },
     defaultVariants: {
-        size: 'xs'
+        size: 'xs',
+        vertical: false
     }
 });