@noxlovette/material 0.4.8 → 0.5.1

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;

package/dist/components/time/TimeField.svelte

@@ -6,15 +6,16 @@ It combines a Material 3 Textfield with a TimepickerInput for intuitive time sel
 @see https://m3.material.io/components/time-pickers/overview
 -->
 <script lang="ts">
+  import { enterExit, presence } from '../../animation/index.js';
   import type { HTMLInputAttributes } from 'svelte/elements';
   import Textfield from '../forms/textfield/Textfield.svelte';
   import TimepickerInput from './TimepickerInput.svelte';
-  import { clickOutside, positionFloating } from '../../actions/index.js';
-  import { enterExit } from '../../animation/enterExit.js';
-  import { easeEmphasizedDecel, easeEmphasizedAccel } from '../../animation/easing.js';
+  import { Popover } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { TimepickerLabels } from './types.js';
 
   let {
-    label = 'Время',
+    label = 'Time',
     value = $bindable(),
     required = false,
     disabled = false,
@@ -22,6 +23,8 @@ It combines a Material 3 Textfield with a TimepickerInput for intuitive time sel
     datePickerTitle = 'Pick date',
     name,
     leadingIconProps,
+    supportingText,
+    pickerLabels,
     ...restProps
   }: {
     /** The label for the text field. */
@@ -40,6 +43,10 @@ It combines a Material 3 Textfield with a TimepickerInput for intuitive time sel
     datePickerTitle?: string;
     /** Props for the leading icon. */
     leadingIconProps?: any;
+    /** Supporting text under the field. */
+    supportingText?: Snippet;
+    /** Headline, input and button strings for the picker overlay (English by default). */
+    pickerLabels?: TimepickerLabels;
   } & HTMLInputAttributes = $props();
 
   const id = $props.id();
@@ -48,64 +55,64 @@ It combines a Material 3 Textfield with a TimepickerInput for intuitive time sel
   let anchorEl = $state<HTMLDivElement>();
 </script>
 
-<div
-  class="relative w-full"
-  bind:this={anchorEl}
-  use:clickOutside={() => {
-    picker = false;
-  }}
->
-  <Textfield
-    id={id as string}
-    {label}
-    {value}
-    {name}
-    {disabled}
-    {error}
-    {leadingIconProps}
-    class="pointer-events-none"
-    trailingIconProps={{ name: 'timer' }}
-    trailingOnClick={() => !disabled && (picker = !picker)}
-    {...restProps as any}
-  >
-    {#snippet supportingText()}
-      ЧЧ-ММ
-    {/snippet}
-  </Textfield>
+<Popover.Root bind:open={picker}>
+  <div class="relative w-full" bind:this={anchorEl}>
+    <Textfield
+      id={id as string}
+      {label}
+      {value}
+      {name}
+      {disabled}
+      {error}
+      {leadingIconProps}
+      class="pointer-events-none"
+      trailingIconProps={{ name: 'schedule' }}
+      trailingOnClick={() => !disabled && (picker = !picker)}
+      {supportingText}
+      {...restProps as any}
+    />
 
-  <button
-    {disabled}
-    title="time-overlay"
-    class="absolute inset-0 cursor-pointer disabled:cursor-not-allowed"
-    type="button"
-    onclick={() => !disabled && (picker = !picker)}
-    data-cy="calendar-time-toggle"
-  ></button>
+    <Popover.Trigger {disabled}>
+      {#snippet child({ props })}
+        <button
+          {...props}
+          title="time-overlay"
+          class="absolute inset-0 cursor-pointer disabled:cursor-not-allowed"
+          type="button"
+          data-cy="calendar-time-toggle"
+        ></button>
+      {/snippet}
+    </Popover.Trigger>
+  </div>
 
-  {#if picker}
-    <div
-      class="picker"
-      use:positionFloating={{ anchor: anchorEl, offset: 12 }}
-      in:enterExit={{
-        duration: 200,
-        easing: easeEmphasizedDecel,
-        mode: 'scale'
-      }}
-      out:enterExit={{
-        duration: 150,
-        easing: easeEmphasizedAccel,
-        mode: 'scale'
-      }}
-      style="transform-origin: top center;"
+  <Popover.Portal>
+    <Popover.Content
+      customAnchor={anchorEl}
+      side="bottom"
+      align="start"
+      sideOffset={12}
+      collisionPadding={8}
+      class="z-100"
     >
-      <TimepickerInput time={value} close={() => (picker = false)} setTime={(t) => (value = t)} />
-    </div>
-  {/if}
-</div>
-
-<style>
-  .picker {
-    z-index: 1;
-    position: absolute;
-  }
-</style>
+      {#snippet child({ wrapperProps, props, open })}
+        <div {...wrapperProps}>
+          <div
+            {...props}
+            class={[
+              props.class,
+              'max-h-(--bits-floating-available-height) min-w-(--bits-floating-anchor-width) overflow-auto'
+            ]}
+            {@attach presence(() => open, enterExit.scale)}
+          >
+            <TimepickerInput
+              {...pickerLabels}
+              time={value}
+              close={() => (picker = false)}
+              setTime={(t) => (value = t)}
+            />
+          </div>
+        </div>
+      {/snippet}
+    </Popover.Content>
+  </Popover.Portal>
+</Popover.Root>

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

@@ -1,4 +1,6 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+import type { TimepickerLabels } from './types.js';
 type $$ComponentProps = {
     /** The label for the text field. */
     label?: string;
@@ -16,6 +18,10 @@ type $$ComponentProps = {
     datePickerTitle?: string;
     /** Props for the leading icon. */
     leadingIconProps?: any;
+    /** Supporting text under the field. */
+    supportingText?: Snippet;
+    /** Headline, input and button strings for the picker overlay (English by default). */
+    pickerLabels?: TimepickerLabels;
 } & HTMLInputAttributes;
 /**
  * TimeField component provides a text input that opens a Timepicker overlay when interacted with.

package/dist/components/time/TimepickerInput.svelte

@@ -15,7 +15,11 @@ It follows the Material 3 design for time input pickers.
   import { ButtonIcon } from '../buttons/index.js';
 
   const {
-    label = 'Введите время',
+    label = 'Enter time',
+    hourLabel = 'Hour',
+    minuteLabel = 'Minute',
+    cancelText = 'Cancel',
+    confirmText = 'OK',
     time = '09:41',
     close,
     setTime,
@@ -48,7 +52,7 @@ It follows the Material 3 design for time input pickers.
                   {value}
                 </TimeField.Segment>
                 <p class={cls.timeInputSupportingText()}>
-                  {part === 'hour' ? 'Часы' : 'Минуты'}
+                  {part === 'hour' ? hourLabel : minuteLabel}
                 </p>
               </div>
             {/if}
@@ -61,7 +65,7 @@ It follows the Material 3 design for time input pickers.
   <div class={cls.buttonDiv()}>
     <ButtonIcon type="button" iconProps={{ name: 'schedule' }} />
     <div>
-      <Button variant="text" type="button" onclick={() => close()}>Отмена</Button>
+      <Button variant="text" type="button" onclick={() => close()}>{cancelText}</Button>
       <Button
         variant="text"
         type="button"
@@ -69,7 +73,7 @@ It follows the Material 3 design for time input pickers.
           setTime(output);
           close();
         }}
-        data-cy="calendar-time-confirm">Готово</Button
+        data-cy="calendar-time-confirm">{confirmText}</Button
       >
     </div>
   </div>

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

@@ -9,9 +9,17 @@ import type { TimepickerVariants } from './theme.js';
 export type TimepickerProps = TimepickerVariants & HTMLAttributes<HTMLInputElement> & {
     /**
      * The label displayed at the top of the timepicker.
-     * @default 'Введите время'
+     * @default 'Enter time'
      */
     label?: string;
+    /** Supporting text under the hour input. @default 'Hour' */
+    hourLabel?: string;
+    /** Supporting text under the minute input. @default 'Minute' */
+    minuteLabel?: string;
+    /** Label of the dismiss button. @default 'Cancel' */
+    cancelText?: string;
+    /** Label of the confirm button. @default 'OK' */
+    confirmText?: string;
     /**
      * The current time value in HH:MM format.
      * @default '09:41'
@@ -32,3 +40,5 @@ export type TimepickerProps = TimepickerVariants & HTMLAttributes<HTMLInputEleme
      */
     setTime: (time: string) => void;
 };
+/** The TimepickerInput strings a TimeField forwards to its picker overlay. */
+export type TimepickerLabels = Partial<Pick<TimepickerProps, 'label' | 'hourLabel' | 'minuteLabel' | 'cancelText' | 'confirmText'>>;

package/dist/components/toolbar/theme.js

@@ -48,7 +48,7 @@ export const toolbar = tv({
 });
 export const toolbarButton = tv({
     slots: {
-        base: 'layer-container state-layer before:rounded-full relative inline-flex size-10 items-center justify-center rounded-full outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-38',
+        base: 'layer-container state-layer before:rounded-full relative inline-flex size-10 items-center justify-center rounded-full outline-none transition-colors md-sys-motion-fast-effects disabled:cursor-not-allowed disabled:opacity-38',
         icon: 'size-5 text-[20px]'
     },
     variants: {
@@ -61,7 +61,7 @@ export const toolbarButton = tv({
 });
 export const toolbarGroupItem = tv({
     slots: {
-        base: 'layer-container state-layer before:rounded-full relative inline-flex size-10 items-center justify-center rounded-full outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-38',
+        base: 'layer-container state-layer before:rounded-full relative inline-flex size-10 items-center justify-center rounded-full outline-none transition-colors md-sys-motion-fast-effects disabled:cursor-not-allowed disabled:opacity-38',
         icon: 'size-5 text-[20px]'
     },
     variants: {