@noxlovette/material 0.4.8 → 0.5.0

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

@@ -3,12 +3,12 @@ export type CommandVariants = VariantProps<typeof command>;
 export declare const command: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
+            item?: import("tailwind-variants").ClassValue;
             input?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
             group?: import("tailwind-variants").ClassValue;
             list?: import("tailwind-variants").ClassValue;
             separator?: import("tailwind-variants").ClassValue;
-            item?: import("tailwind-variants").ClassValue;
             inputWrapper?: import("tailwind-variants").ClassValue;
             inputIcon?: import("tailwind-variants").ClassValue;
             empty?: import("tailwind-variants").ClassValue;
@@ -18,12 +18,12 @@ export declare const command: import("tailwind-variants").TVReturnType<{
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
+            item?: import("tailwind-variants").ClassValue;
             input?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
             group?: import("tailwind-variants").ClassValue;
             list?: import("tailwind-variants").ClassValue;
             separator?: import("tailwind-variants").ClassValue;
-            item?: import("tailwind-variants").ClassValue;
             inputWrapper?: import("tailwind-variants").ClassValue;
             inputIcon?: import("tailwind-variants").ClassValue;
             empty?: import("tailwind-variants").ClassValue;
@@ -44,12 +44,12 @@ export declare const command: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
+            item?: import("tailwind-variants").ClassValue;
             input?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
             group?: import("tailwind-variants").ClassValue;
             list?: import("tailwind-variants").ClassValue;
             separator?: import("tailwind-variants").ClassValue;
-            item?: import("tailwind-variants").ClassValue;
             inputWrapper?: import("tailwind-variants").ClassValue;
             inputIcon?: import("tailwind-variants").ClassValue;
             empty?: import("tailwind-variants").ClassValue;

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

@@ -9,7 +9,7 @@ export const command = tv({
         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',
+        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'
     }
 });

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

@@ -8,9 +8,9 @@ export const pinInput = tv({
       relative flex h-14 w-12 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-all duration-200
+      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:transition-[height,background-color] after:duration-200
+      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/theme.js

@@ -5,8 +5,8 @@ export const radioGroup = tv({
         item: 'inline-flex min-h-10 cursor-pointer select-none items-center gap-3 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',
-        innerDot: 'absolute inset-0 m-auto size-2.5 scale-0 rounded-full bg-md-sys-color-on-primary-container transition-transform duration-[350ms] [transition-timing-function:var(--md-sys-motion-timing-function-fast-spatial)]',
+        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',
         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'
     },

package/dist/components/forms/select/Select.svelte

@@ -8,13 +8,12 @@ Powered by bits-ui for accessibility and behavior.
 @see https://m3.material.io/components/menus/overview
 -->
 <script lang="ts">
+  import { enterExit, presence } from '../../../animation/index.js';
   import { Select } from 'bits-ui';
   import { select as selectCls } from './theme.js';
   import { Icon } from '../../../utils/index.js';
   import type { SelectProps } from './types.js';
   import clsx from 'clsx';
-  import { enterExit } from '../../../animation/enterExit.js';
-  import { easeEmphasized } from '../../../animation/easing.js';
 
   let {
     value = $bindable(),
@@ -66,7 +65,6 @@ Powered by bits-ui for accessibility and behavior.
 
         <Select.Portal disabled={portalDisabled}>
           <Select.Content
-            forceMount
             class={cls.content({ class: clsx('z-[100]', contentProps?.class) })}
             sideOffset={4}
             align="start"
@@ -74,58 +72,48 @@ Powered by bits-ui for accessibility and behavior.
           >
             {#snippet child({ wrapperProps, props, open })}
               <div {...wrapperProps} class={clsx('z-[100]', wrapperProps.class as any)}>
-                {#if open}
-                  <div
-                    {...props}
-                    class={clsx('relative flex flex-col outline-none', props.class as any)}
-                    transition:enterExit={{
-                      duration: 200,
-                      easing: easeEmphasized,
-                      mode: 'scale'
-                    }}
-                    style:width="var(--bits-select-anchor-width)"
-                    style:max-width="min(calc(100vw - 32px), 560px)"
-                  >
-                    <Select.Viewport class="w-full">
-                      {#each options as item, i (i)}
-                        {#if item.type === 'group'}
-                          <Select.Group>
-                            {#if item.heading}
-                              <Select.GroupHeading class={cls.groupLabel()}>
-                                {item.heading}
-                              </Select.GroupHeading>
+                <div
+                  {...props}
+                  class={clsx('relative flex flex-col outline-none', props.class as any)}
+                  {@attach presence(() => open, enterExit.scale)}
+                  style:width="var(--bits-select-anchor-width)"
+                  style:max-width="min(calc(100vw - 32px), 560px)"
+                >
+                  <Select.Viewport class="w-full">
+                    {#each options as item, i (i)}
+                      {#if item.type === 'group'}
+                        <Select.Group>
+                          {#if item.heading}
+                            <Select.GroupHeading class={cls.groupLabel()}>
+                              {item.heading}
+                            </Select.GroupHeading>
+                          {/if}
+                          {#each item.items as innerItem, j (j)}
+                            {#if innerItem.type !== 'group'}
+                              <Select.Item {...innerItem} class={cls.item()}>
+                                {#snippet children({ selected })}
+                                  <span class="flex-1 truncate">{innerItem.label}</span>
+                                  {#if selected}
+                                    <Icon aria-hidden="true" name="check" class="size-5 shrink-0" />
+                                  {/if}
+                                {/snippet}
+                              </Select.Item>
                             {/if}
-                            {#each item.items as innerItem, j (j)}
-                              {#if innerItem.type !== 'group'}
-                                <Select.Item {...innerItem} class={cls.item()}>
-                                  {#snippet children({ selected })}
-                                    <span class="flex-1 truncate">{innerItem.label}</span>
-                                    {#if selected}
-                                      <Icon
-                                        aria-hidden="true"
-                                        name="check"
-                                        class="size-5 shrink-0"
-                                      />
-                                    {/if}
-                                  {/snippet}
-                                </Select.Item>
-                              {/if}
-                            {/each}
-                          </Select.Group>
-                        {:else}
-                          <Select.Item {...item} class={cls.item()}>
-                            {#snippet children({ selected })}
-                              <span class="flex-1 truncate">{item.label}</span>
-                              {#if selected}
-                                <Icon aria-hidden="true" name="check" class="size-5 shrink-0" />
-                              {/if}
-                            {/snippet}
-                          </Select.Item>
-                        {/if}
-                      {/each}
-                    </Select.Viewport>
-                  </div>
-                {/if}
+                          {/each}
+                        </Select.Group>
+                      {:else}
+                        <Select.Item {...item} class={cls.item()}>
+                          {#snippet children({ selected })}
+                            <span class="flex-1 truncate">{item.label}</span>
+                            {#if selected}
+                              <Icon aria-hidden="true" name="check" class="size-5 shrink-0" />
+                            {/if}
+                          {/snippet}
+                        </Select.Item>
+                      {/if}
+                    {/each}
+                  </Select.Viewport>
+                </div>
               </div>
             {/snippet}
           </Select.Content>

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

@@ -28,7 +28,7 @@ export const select = tv({
       mr-3 text-md-sys-color-on-surface-variant size-6
       group-data-[state=open]:text-md-sys-color-primary
       group-data-[invalid]:text-md-sys-color-error z-20 text-[24px]
-      transition-transform duration-200
+      transition-transform md-sys-motion-fast-spatial
       group-data-[state=open]:rotate-180
     `,
         content: `
@@ -45,7 +45,7 @@ export const select = tv({
       data-[selected]:bg-md-sys-color-secondary-container
       data-[selected]:text-md-sys-color-on-secondary-container
       data-[disabled]:cursor-not-allowed data-[disabled]:opacity-38
-      transition-colors duration-150
+      transition-colors md-sys-motion-fast-effects
     `,
         groupLabel: `
       px-3 pt-2 pb-1 md-sys-typescale-label-medium
@@ -68,7 +68,7 @@ export const select = tv({
           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:transition-[height,background-color] after:duration-200
+          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
           has-[[data-state=open]]:after:h-[2px]
@@ -79,7 +79,7 @@ export const select = tv({
             outlined: {
                 base: `
           rounded-xs border border-md-sys-color-outline
-          transition-colors duration-150
+          transition-colors md-sys-motion-fast-effects
           hover:border-md-sys-color-on-surface
           has-[[data-state=open]]:border-2 has-[[data-state=open]]:border-md-sys-color-primary
         `

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">;