@noxlovette/material 0.4.7 → 0.5.0

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
     }
 });

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

@@ -4,7 +4,7 @@ import type { SliderVariants } from './theme.js';
 /**
  * Props for the Slider component.
  */
-export type SliderProps = SliderVariants & Omit<HTMLAttributes<HTMLSpanElement>, 'size' | 'value'> & {
+export type SliderProps = Omit<SliderVariants, 'active'> & Omit<HTMLAttributes<HTMLSpanElement>, 'size' | 'value'> & {
     /**
      * The current value of the slider.
      */

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

@@ -14,14 +14,14 @@ export const toggle = tv({
             'group-data-[disabled]:cursor-not-allowed',
             'group-data-[disabled]:border-md-sys-color-on-surface/12 group-data-[disabled]:bg-md-sys-color-surface-container-highest',
             'group-data-[state=checked]:group-data-[disabled]:border-transparent group-data-[state=checked]:group-data-[disabled]:bg-md-sys-color-on-surface/12',
-            'transition-colors duration-200'
+            'transition-colors md-sys-motion-effects'
         ].join(' '),
         // Thumb — absolute over track
         handle: [
             'pointer-events-none absolute left-2 top-1/2 flex h-4 w-4 -translate-y-1/2',
             'items-center justify-center rounded-full relative',
             'bg-md-sys-color-outline',
-            'transition-[left,transform,background-color] duration-200 ease-in-out',
+            'transition-[left,transform,background-color] md-sys-motion-fast-spatial',
             // checked: move right + scale up + on-primary color
             'group-data-[state=checked]:left-[1.75rem] group-data-[state=checked]:scale-[1.5] group-data-[state=checked]:bg-md-sys-color-on-primary',
             // disabled
@@ -38,7 +38,7 @@ export const toggle = tv({
         hover: [
             'pointer-events-none absolute left-4 top-1/2 h-12 w-12',
             '-translate-x-1/2 -translate-y-1/2 rounded-full',
-            'transition-[left,background-color] duration-200',
+            'transition-[left,background-color] md-sys-motion-fast-spatial',
             'group-data-[state=checked]:left-9',
             'group-data-[disabled]:hidden',
             'group-hover:bg-md-sys-color-on-surface/8',
@@ -47,7 +47,7 @@ export const toggle = tv({
         // Icon inside thumb - shared base (sized via size="xs" prop on Icon, not here)
         icon: [
             'absolute inset-0 m-auto pointer-events-none flex items-center justify-center',
-            'opacity-0 transition-opacity duration-150 shrink-0'
+            'opacity-0 transition-opacity md-sys-motion-fast-effects shrink-0'
         ].join(' '),
         // Specific icon states - colour matches M3 spec for each thumb background
         iconChecked: [

package/dist/components/forms/textfield/Textfield.svelte

@@ -34,7 +34,7 @@ Text fields allow users to enter and edit text.
     ...restProps
   }: TextfieldProps = $props();
 
-  const cls = $derived(textfield({ disabled, error, variant }));
+  const cls = $derived(textfield({ disabled, error, variant, leadingIcon: !!leadingIconProps }));
 
   const inputProps = $derived({
     id,

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

@@ -20,6 +20,9 @@ export declare const textfield: import("tailwind-variants").TVReturnType<{
             fieldset: string;
         };
     };
+    leadingIcon: {
+        true: {};
+    };
     disabled: {
         true: {
             base: string;
@@ -58,6 +61,9 @@ export declare const textfield: import("tailwind-variants").TVReturnType<{
             fieldset: string;
         };
     };
+    leadingIcon: {
+        true: {};
+    };
     disabled: {
         true: {
             base: string;
@@ -96,6 +102,9 @@ export declare const textfield: import("tailwind-variants").TVReturnType<{
             fieldset: string;
         };
     };
+    leadingIcon: {
+        true: {};
+    };
     disabled: {
         true: {
             base: string;

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

@@ -4,8 +4,10 @@ export const textfield = tv({
         base: `
       group relative w-full h-14 flex items-center
     `,
+        /* Stretches to the full field height so the label floats relative to the field's top edge,
+           not the input's. */
         inputWrapper: `
-      relative flex-1 px-4
+      relative flex-1 self-stretch flex items-center px-4
     `,
         input: `
       peer w-full pt-4 bg-transparent outline-none
@@ -17,7 +19,7 @@ export const textfield = tv({
       md-sys-typescale-body-large
       text-md-sys-color-on-surface-variant
       pointer-events-none
-      transition-[top,font-size,line-height,color,transform] duration-200 ease-in-out
+      transition-[top,left,font-size,line-height,color,transform] md-sys-motion-fast-spatial
 
       peer-focus:text-md-sys-color-primary
     `,
@@ -25,7 +27,7 @@ export const textfield = tv({
       ml-0.5
       text-md-sys-color-error
       group-focus-within:text-md-sys-color-primary
-      transition-colors duration-200
+      transition-colors md-sys-motion-effects
     `,
         leadingIcon: `
       text-md-sys-color-on-surface-variant size-6
@@ -43,9 +45,9 @@ export const textfield = tv({
       text-md-sys-color-on-surface-variant
     `,
         fieldset: `
-      absolute -top-[5px] left-0 right-0 bottom-0 m-0 px-2
+      absolute -top-2 left-0 right-0 bottom-0 m-0 px-3
       pointer-events-none rounded-xs border border-md-sys-color-outline
-      transition-colors duration-150
+      transition-colors md-sys-motion-fast-effects
 
       group-hover:border-md-sys-color-on-surface
       group-focus-within:border-2 group-focus-within:border-md-sys-color-primary
@@ -53,7 +55,7 @@ export const textfield = tv({
         legend: `
       invisible float-none block h-auto max-w-[0.01px] overflow-hidden
       whitespace-nowrap md-sys-typescale-body-small
-      transition-[max-width] duration-150 ease-in-out
+      transition-[max-width] md-sys-motion-fast-spatial
 
       group-focus-within:max-w-full
       group-has-[input:not(:placeholder-shown)]:max-w-full
@@ -69,7 +71,7 @@ export const textfield = tv({
           px-0 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
           focus-within:after:bg-md-sys-color-primary
           focus-within:after:h-[2px]
@@ -77,8 +79,8 @@ export const textfield = tv({
           disabled:after:bg-md-sys-color-on-surface/12
         `,
                 label: `
-          peer-focus:top-1.5 peer-focus:md-sys-typescale-body-small peer-focus:-translate-y-1
-          peer-not-placeholder-shown:top-1.5 peer-not-placeholder-shown:md-sys-typescale-body-small peer-not-placeholder-shown:-translate-y-1
+          peer-focus:top-2 peer-focus:md-sys-typescale-body-small peer-focus:translate-y-0
+          peer-not-placeholder-shown:top-2 peer-not-placeholder-shown:md-sys-typescale-body-small peer-not-placeholder-shown:translate-y-0
         `
             },
             outlined: {
@@ -102,6 +104,9 @@ export const textfield = tv({
         `
             }
         },
+        leadingIcon: {
+            true: {}
+        },
         disabled: {
             true: {
                 base: 'cursor-not-allowed opacity-60',
@@ -109,6 +114,18 @@ export const textfield = tv({
             }
         }
     },
+    compoundVariants: [
+        {
+            /* M3: an outlined label floats back to the field's start edge, over the leading icon, into
+               the notch. The wrapper starts after the icon (ml-3 + size-6 = 36px), so -20px puts the
+               label at 16px from the field's edge. */
+            variant: 'outlined',
+            leadingIcon: true,
+            class: {
+                label: 'peer-focus:-left-5 peer-not-placeholder-shown:-left-5'
+            }
+        }
+    ],
     defaultVariants: {
         variant: 'outlined'
     }

package/dist/components/forms/toggle-group/theme.js

@@ -13,7 +13,7 @@ export const toggleGroup = tv({
 });
 export const toggleGroupItem = tv({
     slots: {
-        base: 'layer-container state-layer relative inline-flex min-w-12 flex-1 items-center justify-center gap-2 px-4 md-sys-typescale-label-large text-md-sys-color-on-surface outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-38 [&:not(:last-child)]:border-r [&:not(:last-child)]:border-md-sys-color-outline data-[state=on]:bg-md-sys-color-secondary-container data-[state=on]:text-md-sys-color-on-secondary-container',
+        base: 'layer-container state-layer relative inline-flex min-w-12 flex-1 items-center justify-center gap-2 px-4 md-sys-typescale-label-large text-md-sys-color-on-surface outline-none transition-colors md-sys-motion-fast-effects disabled:cursor-not-allowed disabled:opacity-38 [&:not(:last-child)]:border-r [&:not(:last-child)]:border-md-sys-color-outline data-[state=on]:bg-md-sys-color-secondary-container data-[state=on]:text-md-sys-color-on-secondary-container',
         checkIcon: 'size-[18px] text-[18px]',
         icon: 'size-[18px] text-[18px]'
     }

package/dist/components/forms/tooltip/Tooltip.svelte

@@ -13,7 +13,7 @@ Plain tooltips are used for simple labels, while rich tooltips can contain forma
   import { tooltip } from './theme.js';
   import type { TooltipProps } from './types.js';
   import { Tooltip } from 'bits-ui';
-  import { enterExit, easeEmphasizedDecel, easeEmphasizedAccel } from '../../../animation/index.js';
+  import { enterExit, presence } from '../../../animation/index.js';
 
   let {
     subhead,
@@ -66,43 +66,32 @@ Plain tooltips are used for simple labels, while rich tooltips can contain forma
     {/if}
 
     {#if hasTooltipContent}
-      <Tooltip.Content {...contentProps} forceMount>
+      <Tooltip.Content {...contentProps}>
         {#snippet child({ wrapperProps, props, open })}
-          {#if open}
-            <div {...wrapperProps} class={wrapperProps.class as any}>
-              <div
-                {...props}
-                class={clsx(baseCls, props.class as any)}
-                in:enterExit={{
-                  duration: variant === 'rich' ? 200 : 150,
-                  easing: easeEmphasizedDecel,
-                  mode: 'scale'
-                }}
-                out:enterExit={{
-                  duration: variant === 'rich' ? 150 : 75,
-                  easing: easeEmphasizedAccel,
-                  mode: 'scale'
-                }}
-              >
-                {#if variant === 'rich'}
-                  <Layer />
-                  {#if subhead}
-                    <Title size="small" class={subheadCls()}>
-                      {subhead}
-                    </Title>
-                  {/if}
-                  <Body class={supportingTextCls()}>
-                    {supportingText}
-                  </Body>
-                  {@render children?.()}
-                {:else if supportingText}
-                  <Body class={supportingTextCls()}>
-                    {supportingText}
-                  </Body>
+          <div {...wrapperProps} class={wrapperProps.class as any}>
+            <div
+              {...props}
+              class={clsx(baseCls, props.class as any)}
+              {@attach presence(() => open, enterExit.scale)}
+            >
+              {#if variant === 'rich'}
+                <Layer />
+                {#if subhead}
+                  <Title size="small" class={subheadCls()}>
+                    {subhead}
+                  </Title>
                 {/if}
-              </div>
+                <Body class={supportingTextCls()}>
+                  {supportingText}
+                </Body>
+                {@render children?.()}
+              {:else if supportingText}
+                <Body class={supportingTextCls()}>
+                  {supportingText}
+                </Body>
+              {/if}
             </div>
-          {/if}
+          </div>
         {/snippet}
       </Tooltip.Content>
     {/if}

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

@@ -4,7 +4,7 @@ export const breadcrumb = tv({
         base: 'flex',
         list: 'flex flex-wrap items-center gap-1',
         item: 'flex items-center gap-1',
-        link: 'md-sys-typescale-label-large text-md-sys-color-on-surface-variant md-sys-state-focus-indicator relative inline-flex min-h-12 items-center rounded-full px-3 transition-colors',
+        link: 'md-sys-typescale-label-large text-md-sys-color-on-surface-variant md-sys-state-focus-indicator relative inline-flex min-h-12 items-center rounded-full px-3 transition-colors md-sys-motion-fast-effects',
         text: 'md-sys-typescale-label-large text-md-sys-color-on-surface-variant px-1 py-0.5',
         current: 'md-sys-typescale-label-large font-bold px-1 py-0.5',
         separator: 'text-md-sys-color-on-surface-variant inline-flex shrink-0'

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

@@ -9,9 +9,9 @@ export const navbar = tv({
 });
 export const navitem = tv({
     slots: {
-        base: 'group relative flex flex-1 flex-col items-center justify-center min-w-0 max-w-[168px] h-full transition-colors',
+        base: 'group relative flex flex-1 flex-col items-center justify-center min-w-0 max-w-[168px] h-full transition-colors md-sys-motion-fast-effects',
         content: 'flex flex-col items-center justify-center gap-1 w-full',
-        iconContainer: 'relative flex items-center justify-center h-8 w-16 rounded-full transition-colors duration-200 ease-in-out',
+        iconContainer: 'relative flex items-center justify-center h-8 w-16 rounded-full transition-colors md-sys-motion-effects',
         icon: 'text-[24px] size-6',
         label: 'md-sys-typescale-label-medium truncate w-full text-center'
     },

package/dist/components/nav/rail/Rail.svelte

@@ -8,7 +8,7 @@ On mobile (< md) it automatically renders as a bottom navigation bar.
 @see https://m3.material.io/components/navigation-rail/overview
 -->
 <script lang="ts">
-  import { clickOutside } from '../../../actions/index.js';
+  import { clickOutside } from '../../../attachments/index.js';
   import clsx from 'clsx';
   import { setContext, untrack } from 'svelte';
   import type { RailProps } from './types';
@@ -62,9 +62,7 @@ On mobile (< md) it automatically renders as a bottom navigation bar.
   class={railBaseClass}
   style={cssVars}
   data-expanded={expanded}
-  use:clickOutside={() => {
-    if (expanded) collapsed = true;
-  }}
+  {@attach expanded && clickOutside(() => (collapsed = true))}
 >
   {#if expandable}
     <ButtonIcon
@@ -91,7 +89,8 @@ On mobile (< md) it automatically renders as a bottom navigation bar.
     pointer-events: none;
     background-color: transparent;
     z-index: -1;
-    transition: opacity 200ms ease;
+    transition: opacity var(--md-sys-motion-duration-effects-spring)
+      var(--md-sys-motion-timing-function-effects-spring);
   }
 
   .rail-scrim[data-expanded='true'] {