@noxlovette/material 0.4.8 → 0.5.0

package/dist/components/nav/rail/theme.js

@@ -1,9 +1,9 @@
 import { tv } from 'tailwind-variants';
 export const rail = tv({
     slots: {
-        base: 'py-12 hidden bg-md-sys-color-surface-container z-40 flex-col md:flex gap-6 transition-[width,padding,background-color] duration-[var(--md-sys-motion-duration-spatial)] ease-[var(--md-sys-motion-timing-function-emphasized)]',
+        base: 'py-12 hidden bg-md-sys-color-surface-container z-40 flex-col md:flex gap-6 transition-[width,padding,background-color] md-sys-motion-spatial',
         items: 'flex flex-col gap-3 pt-6 scrollbar-none w-full overflow-x-hidden',
-        ghost: 'hidden md:block shrink-0 transition-[width] duration-[var(--md-sys-motion-duration-spatial)] ease-[var(--md-sys-motion-timing-function-emphasized)]',
+        ghost: 'hidden md:block shrink-0 transition-[width] md-sys-motion-spatial',
         scrim: 'hidden md:block lg:hidden inset-0'
     },
     variants: {
@@ -41,11 +41,11 @@ export const rail = tv({
 });
 export const railElement = tv({
     slots: {
-        base: 'group relative z-30 flex w-full transition-all duration-[var(--md-sys-motion-duration-spatial)] ease-[var(--md-sys-motion-timing-function-emphasized)]',
-        content: 'flex items-center min-w-0 rounded-full gap-0.5 py-1.5 transition-all duration-[var(--md-sys-motion-duration-spatial)] ease-[var(--md-sys-motion-timing-function-emphasized)]',
-        iconContainer: 'relative rounded-full items-center justify-center inline-flex transition-all duration-[var(--md-sys-motion-duration-spatial)] ease-[var(--md-sys-motion-timing-function-emphasized)]',
-        icon: 'text-[24px] transition-all duration-[var(--md-sys-motion-duration-spatial)] ease-[var(--md-sys-motion-timing-function-emphasized)]',
-        label: 'transition-all duration-[var(--md-sys-motion-duration-spatial)] ease-[var(--md-sys-motion-timing-function-emphasized)] whitespace-nowrap'
+        base: 'group relative z-30 flex w-full transition-all md-sys-motion-spatial',
+        content: 'flex items-center min-w-0 rounded-full gap-0.5 py-1.5 transition-all md-sys-motion-spatial',
+        iconContainer: 'relative rounded-full items-center justify-center inline-flex transition-all md-sys-motion-spatial',
+        icon: 'text-[24px] transition-all md-sys-motion-spatial',
+        label: 'transition-all md-sys-motion-spatial whitespace-nowrap'
     },
     variants: {
         active: {

package/dist/components/nav/tabs/theme.js

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 export const tabHolder = tv({
     slots: {
         base: 'relative flex w-full bg-md-sys-color-surface',
-        bar: 'absolute bottom-0 h-[3px] rounded-t-full bg-md-sys-color-primary transition-transform duration-200 ease-out'
+        bar: 'absolute bottom-0 h-[3px] rounded-t-full bg-md-sys-color-primary transition-transform md-sys-motion-fast-spatial'
     },
     variants: {
         rounded: {

package/dist/components/progress/CircularProgress.svelte

@@ -2,10 +2,18 @@
 @component
 Material 3 Circular Progress Indicator.
 
+Determinate: the arc springs to each new `percent` on the slow effects spring (critically damped,
+so progress never visibly runs backwards), with a gap separating it from the track.
+Indeterminate: the arc's head and tail take turns springing ahead, so it grows, shrinks and
+travels around the circle.
+
 @see https://m3.material.io/components/progress-indicators/overview#circular-progress-indicators
 -->
 <script lang="ts">
   import { Progress } from 'bits-ui';
+  import { animate, type AnimationPlaybackControls } from 'motion';
+  import { springTokens, springTransition } from '../../animation/spring.js';
+  import { SpringValue } from '../../animation/springValue.svelte.js';
 
   let {
     percent,
@@ -20,8 +28,69 @@ Material 3 Circular Progress Indicator.
     thickness?: number;
   } = $props();
 
-  let r = $derived(size / 2 - thickness / 2);
-  let circumference = $derived(Math.PI * r * 2);
+  /* M3: 4dp between the indicator and the track, measured between the rounded caps. */
+  const GAP_PX = 4;
+  /* Indeterminate arc lengths it grows to and shrinks back to. Not M3 values: tune by eye. */
+  const MIN_SWEEP_DEG = 20;
+  const MAX_SWEEP_DEG = 270;
+
+  const r = $derived(size / 2 - thickness / 2);
+  const circumference = $derived(Math.PI * r * 2);
+  /* Round caps overhang each end by half the stroke; the gap sits between those caps. */
+  const gapDeg = $derived((((GAP_PX + thickness) / r) * 180) / Math.PI);
+
+  const shown = new SpringValue(() => percent ?? 0, springTokens.slowEffects);
+
+  let head = $state(0);
+  let tail = $state(0);
+
+  $effect(() => {
+    if (percent != null) return;
+    let running = true;
+    let controls: AnimationPlaybackControls | undefined;
+    const spring = springTransition(springTokens.spatial);
+
+    (async () => {
+      let h = 0;
+      let t = 0;
+      while (running) {
+        controls = animate(h, t + MAX_SWEEP_DEG, { ...spring, onUpdate: (v) => (head = v) });
+        await controls;
+        h = t + MAX_SWEEP_DEG;
+        if (!running) break;
+        controls = animate(t, h - MIN_SWEEP_DEG, { ...spring, onUpdate: (v) => (tail = v) });
+        await controls;
+        t = h - MIN_SWEEP_DEG;
+      }
+    })();
+
+    return () => {
+      running = false;
+      controls?.stop();
+    };
+  });
+
+  /** An arc from `fromDeg`, `sweepDeg` long, as stroke-dash values (0° = 12 o'clock). */
+  const arc = (fromDeg: number, sweepDeg: number) => ({
+    dasharray: `${(Math.max(0, sweepDeg) / 360) * circumference} ${circumference}`,
+    dashoffset: (-(fromDeg % 360) / 360) * circumference,
+    // A zero-length dash with round caps still paints a dot.
+    opacity: sweepDeg > 0.5 ? 1 : 0
+  });
+
+  const from = $derived(percent != null ? 0 : tail);
+  const sweep = $derived(percent != null ? (shown.current / 100) * 360 : head - tail);
+
+  const indicator = $derived(arc(from, sweep));
+  /* The track fills the rest of the circle, keeping a gap either side of the indicator. M3 draws
+     no track while indeterminate. */
+  const track = $derived(
+    percent == null
+      ? arc(0, 0)
+      : indicator.opacity
+        ? arc(from + sweep + gapDeg, 360 - sweep - gapDeg * 2)
+        : arc(0, 360)
+  );
 </script>
 
 <Progress.Root value={percent ?? null} max={100} data-cy="m3-circular-progress">
@@ -40,6 +109,10 @@ Material 3 Circular Progress Indicator.
         {r}
         stroke="var(--color-md-sys-color-secondary-container)"
         stroke-width={thickness}
+        stroke-dasharray={track.dasharray}
+        stroke-dashoffset={track.dashoffset}
+        opacity={track.opacity}
+        stroke-linecap="round"
         fill="none"
       />
       <circle
@@ -48,8 +121,9 @@ Material 3 Circular Progress Indicator.
         {r}
         stroke="var(--color-md-sys-color-primary)"
         stroke-width={thickness}
-        stroke-dasharray="{circumference} {circumference}"
-        stroke-dashoffset={(percent != null ? (percent / -100) * circumference : 0) + circumference}
+        stroke-dasharray={indicator.dasharray}
+        stroke-dashoffset={indicator.dashoffset}
+        opacity={indicator.opacity}
         stroke-linecap="round"
         fill="none"
       />

package/dist/components/progress/CircularProgress.svelte.d.ts

@@ -9,6 +9,11 @@ type $$ComponentProps = {
 /**
  * Material 3 Circular Progress Indicator.
  *
+ * Determinate: the arc springs to each new `percent` on the slow effects spring (critically damped,
+ * so progress never visibly runs backwards), with a gap separating it from the track.
+ * Indeterminate: the arc's head and tail take turns springing ahead, so it grows, shrinks and
+ * travels around the circle.
+ *
  * @see https://m3.material.io/components/progress-indicators/overview#circular-progress-indicators
  */
 declare const CircularProgress: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/progress/LinearProgress.svelte

@@ -2,12 +2,20 @@
 @component
 Material 3 Linear Progress Indicator.
 
+Determinate: the bar springs to each new `percent` on the slow effects spring (critically damped,
+so progress never visibly runs backwards). Indeterminate: the bar's head and tail spring across
+the track on springs of different stiffness, so it stretches out and catches up on every pass.
+The track always keeps a gap either side of the bar.
+
 @see https://m3.material.io/components/progress-indicators/overview#linear-progress-indicators
 -->
 <script lang="ts">
   import clsx from 'clsx';
   import { tv } from 'tailwind-variants';
   import { Progress } from 'bits-ui';
+  import { animate, type AnimationPlaybackControls } from 'motion';
+  import { springTokens, springTransition } from '../../animation/spring.js';
+  import { SpringValue } from '../../animation/springValue.svelte.js';
 
   let {
     percent,
@@ -21,15 +29,58 @@ Material 3 Linear Progress Indicator.
     class?: string;
   } = $props();
 
+  /* M3: 4dp between the indicator and the track. */
+  const GAP_PX = 4;
+
   const linearProgress = tv({
     slots: {
-      container: 'flex gap-1',
-      fill: 'bg-md-sys-color-primary rounded-full shrink',
-      track: 'bg-md-sys-color-secondary-container rounded-full grow'
+      container: 'relative overflow-hidden',
+      segment: 'absolute inset-y-0 rounded-full',
+      bar: 'bg-md-sys-color-primary',
+      track: 'bg-md-sys-color-secondary-container'
     }
   });
 
-  const { container, fill, track } = linearProgress();
+  const { container, segment, bar, track } = linearProgress();
+
+  const shown = new SpringValue(() => (percent ?? 0) / 100, springTokens.slowEffects);
+
+  /* Indeterminate pass: the head leads on the spatial spring, the tail trails on the slower one. */
+  let head = $state(0);
+  let tail = $state(0);
+
+  $effect(() => {
+    if (percent != null) return;
+    let running = true;
+    let controls: AnimationPlaybackControls[] = [];
+
+    (async () => {
+      while (running) {
+        head = 0;
+        tail = 0;
+        controls = [
+          animate(0, 1, {
+            ...springTransition(springTokens.spatial),
+            onUpdate: (v) => (head = v)
+          }),
+          animate(0, 1, {
+            ...springTransition(springTokens.slowSpatial),
+            onUpdate: (v) => (tail = v)
+          })
+        ];
+        await Promise.all(controls);
+      }
+    })();
+
+    return () => {
+      running = false;
+      controls.forEach((c) => c.stop());
+    };
+  });
+
+  const clamp01 = (v: number) => Math.min(1, Math.max(0, v));
+  const start = $derived(percent != null ? 0 : clamp01(tail));
+  const end = $derived(percent != null ? clamp01(shown.current) : clamp01(head));
 </script>
 
 <Progress.Root
@@ -39,8 +90,20 @@ Material 3 Linear Progress Indicator.
   style="height: {height / 16}rem"
   data-cy="m3-linear-progress"
 >
-  {#if percent != null}
-    <div class={fill()} style:width="{percent}%"></div>
+  {#if start > 0}
+    <div
+      class={segment({ class: track() })}
+      style="left: 0; width: max(0px, calc({start} * 100% - {GAP_PX}px))"
+    ></div>
+  {/if}
+  {#if end > start}
+    <div
+      class={segment({ class: bar() })}
+      style="left: calc({start} * 100%); width: calc({end - start} * 100%)"
+    ></div>
   {/if}
-  <div class={track()}></div>
+  <div
+    class={segment({ class: track() })}
+    style="right: 0; width: max(0px, calc({1 - end} * 100% - {end > start ? GAP_PX : 0}px))"
+  ></div>
 </Progress.Root>

package/dist/components/progress/LinearProgress.svelte.d.ts

@@ -8,6 +8,11 @@ type $$ComponentProps = {
 /**
  * Material 3 Linear Progress Indicator.
  *
+ * Determinate: the bar springs to each new `percent` on the slow effects spring (critically damped,
+ * so progress never visibly runs backwards). Indeterminate: the bar's head and tail spring across
+ * the track on springs of different stiffness, so it stretches out and catches up on every pass.
+ * The track always keeps a gap either side of the bar.
+ *
  * @see https://m3.material.io/components/progress-indicators/overview#linear-progress-indicators
  */
 declare const LinearProgress: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/progress/WavyLinearProgress.svelte

@@ -2,11 +2,17 @@
 @component
 Wavy linear progress indicator — a custom M3-inspired variant.
 
+The wave travels continuously; the filled length springs to each new `percent` on the slow
+effects spring (critically damped, so progress never visibly runs backwards).
+
 @see https://m3.material.io/components/progress-indicators/overview
 -->
 <script lang="ts">
   import { Progress } from 'bits-ui';
-  import { linear, trackOpacity } from './_wavy.js';
+  import { animate } from 'motion';
+  import { springTokens } from '../../animation/spring.js';
+  import { SpringValue } from '../../animation/springValue.svelte.js';
+  import { linear, trackOpacity, WAVE_PERIOD_MS } from './_wavy.js';
 
   let {
     width = 600,
@@ -26,10 +32,28 @@ Wavy linear progress indicator — a custom M3-inspired variant.
     class?: string;
   } = $props();
 
+  const shown = new SpringValue(() => percent ?? 0, springTokens.slowEffects);
+
+  /* The wave's phase: a travelling wave moves at constant speed, one wavelength per period. */
+  let time = $state(0);
+  $effect(() => {
+    const controls = animate(0, WAVE_PERIOD_MS, {
+      duration: WAVE_PERIOD_MS / 1000,
+      ease: 'linear',
+      repeat: Infinity,
+      onUpdate: (v) => (time = v)
+    });
+    return () => controls.stop();
+  });
+
   let left = $derived(thickness * 0.5);
   let right = $derived(width - thickness * 0.5);
-  let percentX = $derived(percent != null ? (percent / 100) * (right - left) + left : left);
-  let wavePath = $derived(linear(height / 2 - thickness / 2, height / 2, left, percentX, 0));
+  let percentX = $derived(
+    percent != null
+      ? (Math.min(100, Math.max(0, shown.current)) / 100) * (right - left) + left
+      : left
+  );
+  let wavePath = $derived(linear(height / 2 - thickness / 2, height / 2, left, percentX, time));
 </script>
 
 <Progress.Root value={percent ?? null} max={100}>

package/dist/components/progress/WavyLinearProgress.svelte.d.ts

@@ -12,6 +12,9 @@ type $$ComponentProps = {
 /**
  * Wavy linear progress indicator — a custom M3-inspired variant.
  *
+ * The wave travels continuously; the filled length springs to each new `percent` on the slow
+ * effects spring (critically damped, so progress never visibly runs backwards).
+ *
  * @see https://m3.material.io/components/progress-indicators/overview
  */
 declare const WavyLinearProgress: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/progress/_wavy.d.ts

@@ -1,2 +1,4 @@
+/** One full wave cycle, in ms. */
+export declare const WAVE_PERIOD_MS = 1000;
 export declare const linear: (amp: number, center: number, from: number, to: number, time: number, cutoffTo?: number) => string;
 export declare const trackOpacity: (right: number, x: number) => number;

package/dist/components/progress/_wavy.js

@@ -1,4 +1,6 @@
-const frequencyT = (Math.PI * 2) / 1000;
+/** One full wave cycle, in ms. */
+export const WAVE_PERIOD_MS = 1000;
+const frequencyT = (Math.PI * 2) / WAVE_PERIOD_MS;
 const frequencyX = (Math.PI * 2) / 40;
 const round2 = (x) => Math.round(x * 100) / 100;
 const round1 = (x) => Math.round(x * 10) / 10;

package/dist/components/snackbar/Snackbar.svelte

@@ -9,8 +9,7 @@ Snackbars provide brief messages about app processes at the bottom of the screen
   import type { SnackBarProps } from './types.js';
   import Icon from '../../utils/icon/Icon.svelte';
   import { Layer } from '../../utils/index.js';
-  import { enterExit } from '../../animation/enterExit.js';
-  import { easeEmphasizedDecel, easeEmphasizedAccel } from '../../animation/easing.js';
+  import { enterExit, Presence } from '../../animation/index.js';
 
   let {
     message = $bindable(''),
@@ -49,6 +48,12 @@ Snackbars provide brief messages about app processes at the bottom of the screen
     };
   });
 
+  const snack = new Presence(() => Boolean(message) && !dismissed);
+
+  // Dismissing clears `message`; keep rendering the last one while the exit animation plays.
+  let lastMessage: SnackBarProps['message'] = '';
+  const shownMessage = $derived.by(() => (message ? (lastMessage = message) : lastMessage));
+
   const {
     base,
     icon,
@@ -58,27 +63,18 @@ Snackbars provide brief messages about app processes at the bottom of the screen
   } = $derived(snackbar({ fixed }));
 </script>
 
-{#if message && !dismissed}
+{#if snack.mounted}
   <div
     class={base()}
     data-cy="m3-snackbar"
     {...restProps}
-    in:enterExit={{
-      duration: 400,
-      easing: easeEmphasizedDecel,
-      mode: 'slide-up'
-    }}
-    out:enterExit={{
-      duration: 200,
-      easing: easeEmphasizedAccel,
-      mode: 'slide-up'
-    }}
+    {@attach snack.attach(enterExit.slideUp)}
   >
-    {#if typeof message === 'string'}
-      <p class={supportingText()}>{message}</p>
-    {:else}
+    {#if typeof shownMessage === 'string'}
+      <p class={supportingText()}>{shownMessage}</p>
+    {:else if shownMessage}
       <p class={supportingText()}>
-        {@render message()}
+        {@render shownMessage()}
       </p>
     {/if}
 

package/dist/components/table/TableBody.svelte

@@ -1,30 +1,17 @@
 <!--
 @component
-Wraps the data rows of a Table. Rows are keyboard-navigable by default: Tab/Shift+Tab
-stop on the table once (roving tabindex), and ArrowUp/ArrowDown or k/j move focus
-between rows. Set `navigable={false}` to opt a purely presentational table out.
+Wraps the data rows of a Table.
 -->
 <script lang="ts">
   import type { TableBodyProps } from './types.js';
   import { table } from './theme.js';
-  import { rovingFocusGroup } from '../../actions/index.js';
   import clsx from 'clsx';
 
-  let {
-    children,
-    navigable = true,
-    loop = false,
-    class: className,
-    ...restProps
-  }: TableBodyProps = $props();
+  let { children, class: className, ...restProps }: TableBodyProps = $props();
 
   const { body } = table();
 </script>
 
-<tbody
-  class={body({ class: clsx(className) })}
-  use:rovingFocusGroup={{ candidateSelector: '[data-table-row]', loop, enabled: navigable }}
-  {...restProps}
->
+<tbody class={body({ class: clsx(className) })} {...restProps}>
   {@render children()}
 </tbody>

package/dist/components/table/TableBody.svelte.d.ts

@@ -1,9 +1,5 @@
 import type { TableBodyProps } from './types.js';
-/**
- * Wraps the data rows of a Table. Rows are keyboard-navigable by default: Tab/Shift+Tab
- * stop on the table once (roving tabindex), and ArrowUp/ArrowDown or k/j move focus
- * between rows. Set `navigable={false}` to opt a purely presentational table out.
- */
+/** Wraps the data rows of a Table. */
 declare const TableBody: import("svelte").Component<TableBodyProps, {}, "">;
 type TableBody = ReturnType<typeof TableBody>;
 export default TableBody;

package/dist/components/table/TableHeader.svelte

@@ -30,7 +30,7 @@ and `sortDirection` props. Defaults to `scope="col"`.
     {#if sortable}
       <span
         class={[
-          'transition-[opacity,transform] duration-200',
+          'md-sys-motion-fast-spatial transition-[opacity,transform]',
           sorted ? 'opacity-100' : 'opacity-0 group-hover:opacity-40',
           sortDirection === 'desc' ? 'rotate-180' : 'rotate-0'
         ].join(' ')}

package/dist/components/table/theme.js

@@ -5,7 +5,7 @@ export const table = tv({
         head: '',
         body: '[&_tr:last-child]:border-b-0',
         foot: 'border-t border-md-sys-color-outline-variant',
-        row: 'border-b border-md-sys-color-outline-variant transition-colors focus-visible:outline focus-visible:-outline-offset-2 focus-visible:outline-md-sys-color-primary',
+        row: 'border-b border-md-sys-color-outline-variant transition-colors md-sys-motion-fast-effects focus-visible:outline focus-visible:-outline-offset-2 focus-visible:outline-md-sys-color-primary',
         cell: 'px-4 py-3 align-middle',
         header: 'px-4 py-4 align-middle md-sys-typescale-label-large text-md-sys-color-on-surface font-medium whitespace-nowrap'
     },

package/dist/components/table/types.d.ts

@@ -13,13 +13,6 @@ export type TableHeadProps = HTMLAttributes<HTMLTableSectionElement> & {
 };
 export type TableBodyProps = HTMLAttributes<HTMLTableSectionElement> & {
     children: Snippet;
-    /**
-     * Make rows keyboard-navigable: roving tabindex so Tab/Shift+Tab stop on the table
-     * once, and ArrowUp/ArrowDown (or k/j) move focus between rows. Default `true`.
-     */
-    navigable?: boolean;
-    /** Loop focus from the last row back to the first (and vice versa). Default `false`. */
-    loop?: boolean;
 };
 export type TableFootProps = HTMLAttributes<HTMLTableSectionElement> & {
     children: Snippet;

package/dist/components/time/TimeField.stories.svelte

@@ -0,0 +1,41 @@
+<!--
+  TimeField anchors its TimepickerInput overlay to the whole field via a bits-ui Popover
+  (`customAnchor`), so the panel is portaled, flips above the field when there's no room below,
+  and dismisses on outside click / Escape.
+-->
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import TimeField from './TimeField.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Time/TimeField',
+    component: TimeField,
+    argTypes: {
+      label: { control: 'text' },
+      disabled: { control: 'boolean' },
+      error: { control: 'boolean' },
+      required: { control: 'boolean' }
+    },
+    args: {
+      label: 'Time',
+      value: '09:30',
+      disabled: false,
+      error: false,
+      required: false
+    }
+  });
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <div class="max-w-xs p-8">
+      <TimeField {...args} />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Near Bottom Edge" asChild>
+  <div class="flex min-h-dvh max-w-xs flex-col justify-end p-8">
+    <TimeField label="Time" value="18:45" />
+  </div>
+</Story>

package/dist/components/time/TimeField.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import TimeField from './TimeField.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const TimeField: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TimeField = InstanceType<typeof TimeField>;
+export default TimeField;