@noxlovette/material 0.6.0 → 0.7.0

package/dist/components/chips/theme.js

@@ -1,72 +1,163 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../utils/tv.js';
+/*
+  Values from the M3 chip tokens (md.comp.{assist,filter,input,suggestion}-chip.*):
+  https://m3.material.io/components/chips/specs
+
+  - 32dp tall, 8dp corners, label-large. Padding is 16dp on each side, 8dp on a side that holds an
+    icon, and 4dp before an avatar; 8dp between elements. Icons are 18dp, avatars a 24dp circle.
+  - The 1dp outline is a border, so it sits inside the 32dp and stays visible (and darkens) while
+    the separate focus indicator is showing.
+  - Disabled: flat chips lose their fill-less outline to on-surface/12; elevated and selected
+    containers turn on-surface/12 with no shadow; label and icons are on-surface/38.
+
+  Chip doesn't use md-component-button-base: its disabled fill would paint flat chips, which M3
+  leaves unfilled.
+
+  An input chip is a container holding two sibling buttons, the primary `action` and the remove
+  button, since one can't nest inside the other. The container keeps the look (and shows the focus
+  indicator while the action has focus); the action carries the padding, and its state layer covers the whole chip.
+*/
 export const chip = tv({
     slots: {
-        base: 'md-component-button-base group inline-flex h-spacing-400 max-w-max items-center justify-center gap-spacing-100 rounded-sm before:rounded-sm px-spacing-200 md-sys-typescale-label-large',
-        icon: 'shrink-0',
+        // in-data-dragged: M3's dragged state, set by ChipGroup on the chip's slot: 8dp elevation and
+        // a 16% state layer.
+        base: 'in-data-dragged:shadow-elevation-4 in-data-dragged:before:bg-current/16 state-layer md-sys-state-focus-indicator relative inline-flex h-spacing-400 max-w-max shrink-0 items-center justify-center gap-spacing-100 rounded-sm border border-transparent px-spacing-200 md-sys-typescale-label-large select-none before:rounded-sm transition-[background-color,border-color,box-shadow] md-sys-motion-effects',
+        // 18dp is the chip spec's own icon size, between the 16 and 20 Icon presets.
+        icon: 'size-[18px] shrink-0 text-[18px]',
+        avatar: 'size-spacing-300 shrink-0 overflow-hidden rounded-full',
+        // Static, so its Layer (state layer and hit area) spans the whole chip; the remove button is
+        // positioned and later in the DOM, so it stays on top.
+        action: 'static flex h-full min-w-spacing-0 cursor-pointer items-center gap-spacing-100 self-stretch rounded-sm px-spacing-200 outline-none disabled:cursor-not-allowed',
         label: '',
-        trailing: 'relative -mr-spacing-100 ml-spacing-50 inline-flex size-[18px] shrink-0 items-center justify-center rounded-full',
-        checkIcon: 'size-spacing-200 shrink-0'
+        // 18dp glyph with a 48dp touch target around it (::after).
+        trailing: "relative inline-flex size-[18px] shrink-0 cursor-pointer items-center justify-center rounded-full after:absolute after:top-1/2 after:left-1/2 after:size-spacing-600 after:-translate-1/2 after:content-['']",
+        checkIcon: 'size-[18px] shrink-0'
     },
     variants: {
         variant: {
-            assist: '',
-            filter: '',
-            input: '',
-            suggestion: ''
+            assist: { base: 'text-md-sys-color-on-surface', icon: 'text-md-sys-color-primary' },
+            filter: { base: 'text-md-sys-color-on-surface-variant' },
+            input: { base: 'text-md-sys-color-on-surface-variant' },
+            suggestion: {
+                base: 'text-md-sys-color-on-surface-variant',
+                icon: 'text-md-sys-color-primary'
+            }
         },
         elevated: {
-            true: '',
+            true: { base: 'shadow-elevation-1 hover:shadow-elevation-2' },
             false: ''
         },
         selected: {
-            true: '',
+            true: {
+                base: 'bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container'
+            },
+            false: ''
+        },
+        leading: {
+            none: '',
+            icon: { base: 'pl-spacing-100', action: 'pl-spacing-100' },
+            avatar: { base: 'pl-spacing-50', action: 'pl-spacing-50' }
+        },
+        /** A trailing icon: the filter chip's `trailingIconProps`, or the input chip's remove button. */
+        trailing: {
+            true: { base: 'pr-spacing-100', action: 'pr-spacing-100' },
             false: ''
         },
         disabled: {
-            true: '',
+            true: {
+                base: 'text-md-sys-color-on-surface/38 shadow-none hover:shadow-none',
+                icon: 'text-md-sys-color-on-surface/38',
+                avatar: 'opacity-38',
+                trailing: 'text-md-sys-color-on-surface/38',
+                checkIcon: 'text-md-sys-color-on-surface/38'
+            },
             false: ''
         }
     },
     compoundVariants: [
+        // Flat, unselected: no fill, outline-variant border that darkens on focus.
         {
             elevated: false,
             selected: false,
+            // The spec keeps a dragged flat chip unfilled, but one floating over its neighbours needs an
+            // opaque container, so it takes the elevated chip's.
             class: {
-                base: 'bg-md-sys-color-surface text-md-sys-color-on-surface-variant outline outline-md-sys-color-outline-variant'
+                base: 'border-md-sys-color-outline-variant focus-visible:border-md-sys-color-on-surface-variant in-data-dragged:bg-md-sys-color-surface-container-low'
             }
         },
         {
-            elevated: true,
-            selected: false,
+            variant: 'assist',
+            elevated: false,
+            class: { base: 'focus-visible:border-md-sys-color-on-surface' }
+        },
+        { elevated: true, selected: false, class: { base: 'bg-md-sys-color-surface-container-low' } },
+        // A flat selected filter chip lifts on hover.
+        {
+            variant: 'filter',
+            elevated: false,
+            selected: true,
+            class: { base: 'hover:shadow-elevation-1' }
+        },
+        // Unselected filter icons are primary; selected ones inherit on-secondary-container.
+        { variant: 'filter', selected: false, class: { icon: 'text-md-sys-color-primary' } },
+        // Input chips are the reverse: on-surface-variant, primary once selected.
+        { variant: 'input', selected: true, class: { icon: 'text-md-sys-color-primary' } },
+        // The input chip's container has no padding of its own before the action, and needs the
+        // focus indicator (and darker border) while the action is focused.
+        {
+            variant: 'input',
             class: {
-                base: 'bg-md-sys-color-surface-container-low text-md-sys-color-on-surface-variant shadow-elevation-1 hover:shadow-elevation-2'
+                base: 'pl-spacing-0 has-[[data-chip-action]:focus-visible]:outline-3 has-[[data-chip-action]:focus-visible]:outline-offset-2 has-[[data-chip-action]:focus-visible]:outline-md-sys-color-secondary has-[[data-chip-action]:focus-visible]:outline-solid'
             }
         },
+        { variant: 'input', trailing: false, class: { base: 'pr-spacing-0' } },
         {
-            selected: true,
+            variant: 'input',
+            elevated: false,
+            selected: false,
             class: {
-                base: 'bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container'
+                base: 'has-[[data-chip-action]:focus-visible]:border-md-sys-color-on-surface-variant'
             }
         },
         {
-            variant: 'assist',
+            disabled: true,
+            elevated: false,
             selected: false,
-            class: { icon: 'text-md-sys-color-primary' }
+            class: { base: 'border-md-sys-color-on-surface/12' }
         },
         {
             disabled: true,
-            class: {
-                base: 'cursor-not-allowed bg-md-sys-color-on-surface/10 text-md-sys-color-on-surface/38 outline-md-sys-color-on-surface/12 hover:shadow-elevation-1',
-                icon: 'text-md-sys-color-on-surface/38',
-                trailing: 'text-md-sys-color-on-surface/38 pointer-events-none',
-                checkIcon: 'text-md-sys-color-on-surface/38'
-            }
+            elevated: true,
+            class: { base: 'bg-md-sys-color-on-surface/12' }
+        },
+        {
+            disabled: true,
+            selected: true,
+            class: { base: 'bg-md-sys-color-on-surface/12 text-md-sys-color-on-surface/38' }
         }
     ],
     defaultVariants: {
         variant: 'assist',
         elevated: false,
         selected: false,
+        leading: 'none',
+        trailing: false,
         disabled: false
     }
 });
+/** Layout of a set of chips: 8dp apart, wrapping onto new lines. */
+export const chipGroup = tv({
+    slots: {
+        base: 'relative flex flex-wrap gap-spacing-100',
+        // Its own stacking context only while dragged, so the chip floats over its neighbours.
+        item: 'relative flex touch-manipulation data-dragged:z-10 data-dragged:cursor-grabbing',
+        hint: 'sr-only',
+        live: 'sr-only'
+    },
+    variants: {
+        reorderable: {
+            true: { item: 'cursor-grab select-none [-webkit-touch-callout:none]' },
+            false: ''
+        }
+    }
+});

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

@@ -26,18 +26,52 @@ export type ChipProps = ChipVariants & AnchorButtonAttributes & {
     disabled?: boolean;
     /** Configuration for the leading icon. */
     iconProps?: IconProps;
+    /**
+     * Filter chips only: a trailing icon, e.g. `arrow_drop_down` on a chip that opens a menu.
+     */
+    trailingIconProps?: IconProps;
     /**
      * Custom leading content (e.g. an avatar image) rendered instead of `iconProps`.
      * Typically used by 'input' chips to represent a contact or entity.
      */
     avatar?: Snippet;
     /**
-     * Called when the trailing remove icon is activated.
-     * Providing this renders the trailing remove affordance on 'input' chips.
+     * Called when the trailing remove icon is activated, or on Backspace/Delete while the chip
+     * has focus. Providing this renders the trailing remove affordance on 'input' chips. Move
+     * focus to a neighbouring chip (or the input) afterwards, or it falls back to the page.
      */
     onRemove?: () => void;
+    /**
+     * Accessible name of the input chip's remove button. Name the item, e.g. `Remove Ada`.
+     * @default 'Remove'
+     */
+    removeLabel?: string;
     /** The label content of the chip. */
     children: Snippet;
     /** The `formaction` attribute for the chip when used in a form. */
     formaction?: string;
 };
+export type ChipGroupProps<T> = {
+    /** The items, one chip each. With `reorderable`, dragging rewrites their order. Bindable. */
+    items: T[];
+    /** A stable, unique key per item. */
+    key: (item: T) => string;
+    /** Renders one item's `Chip`. */
+    chip: Snippet<[item: T, index: number]>;
+    /**
+     * Lets people reorder the chips: drag one (on touch, press and hold first), or focus one and
+     * press Alt+Arrow. The dragged chip takes M3's dragged state and its neighbours make room.
+     * @default false
+     */
+    reorderable?: boolean;
+    /** Called with the new order after a drag or a keyboard move. */
+    onReorder?: (items: T[]) => void;
+    /**
+     * The item's name in the announcement after a move ("Ada, moved to 2 of 5"). Defaults to its
+     * `key`.
+     */
+    itemLabel?: (item: T) => string;
+    /** Accessible name of the group. */
+    'aria-label'?: string;
+    class?: string;
+};

package/dist/components/containers/action-rail/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type ActionRailVariants = VariantProps<typeof actionRail>;
 export declare const actionRail: import("tailwind-variants").TVReturnType<{
     anchor: {

package/dist/components/containers/action-rail/theme.js

@@ -1,7 +1,7 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const actionRail = tv({
     slots: {
-        base: 'z-30 flex flex-col items-center justify-center right-spacing-0'
+        base: 'z-layer-bar flex flex-col items-center justify-center right-spacing-0'
     },
     variants: {
         anchor: {

package/dist/components/containers/app/theme.d.ts

@@ -1,3 +1,3 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type AppVariants = VariantProps<typeof app>;
-export declare const app: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "bg-md-sys-color-surface-container text-md-sys-color-on-background min-h-dvh caret-md-sys-color-primary selection:bg-md-sys-color-primary-container selection:text-md-sys-color-on-primary-container relative min-h-dvh pt-[env(safe-area-inset-top)] pr-[env(safe-area-inset-right)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] antialiased", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
+export declare const app: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "md-app bg-md-sys-color-surface-container text-md-sys-color-on-background min-h-dvh caret-md-sys-color-primary selection:bg-md-sys-color-primary-container selection:text-md-sys-color-on-primary-container relative min-h-dvh pt-[env(safe-area-inset-top)] pr-[env(safe-area-inset-right)] pb-[env(safe-area-inset-bottom)] pl-[calc(env(safe-area-inset-left)+var(--md-rail-inset,0px))] antialiased", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;

package/dist/components/containers/app/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const app = tv({
-    base: 'bg-md-sys-color-surface-container text-md-sys-color-on-background min-h-dvh caret-md-sys-color-primary selection:bg-md-sys-color-primary-container selection:text-md-sys-color-on-primary-container relative min-h-dvh pt-[env(safe-area-inset-top)] pr-[env(safe-area-inset-right)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] antialiased'
+    base: 'md-app bg-md-sys-color-surface-container text-md-sys-color-on-background min-h-dvh caret-md-sys-color-primary selection:bg-md-sys-color-primary-container selection:text-md-sys-color-on-primary-container relative min-h-dvh pt-[env(safe-area-inset-top)] pr-[env(safe-area-inset-right)] pb-[env(safe-area-inset-bottom)] pl-[calc(env(safe-area-inset-left)+var(--md-rail-inset,0px))] antialiased'
 });

package/dist/components/containers/bottom-sheet/BottomSheet.stories.svelte

@@ -23,7 +23,7 @@
     { name: 'download', label: 'Download' },
     { name: 'edit', label: 'Rename' },
     { name: 'delete', label: 'Move to trash' }
-  ];
+  ] as const;
 </script>
 
 <script lang="ts">

package/dist/components/containers/bottom-sheet/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type BottomSheetVariants = VariantProps<typeof bottomSheet>;
 export declare const bottomSheet: import("tailwind-variants").TVReturnType<{
     variant: {

package/dist/components/containers/bottom-sheet/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 /*
   M3 bottom sheet (https://m3.material.io/components/bottom-sheets/specs): `surface-container-low`
   at elevation 1, 28dp top corners. Full window width up to 640dp; past 640dp it keeps 56dp side
@@ -11,7 +11,7 @@ import { tv } from 'tailwind-variants';
 export const bottomSheet = tv({
     slots: {
         base: [
-            'fixed inset-x-spacing-0 top-auto bottom-spacing-0 z-40 mx-auto mt-auto mb-spacing-0 p-spacing-0',
+            'fixed inset-x-spacing-0 top-auto bottom-spacing-0 z-layer-sheet mx-auto mt-auto mb-spacing-0 p-spacing-0',
             'w-full max-w-160 sm:w-[calc(100%-7rem)]',
             'max-h-[calc(100dvh-4.5rem)] sm:max-h-[calc(100dvh-3.5rem)]',
             'overflow-visible bg-transparent outline-none'

package/dist/components/containers/carousel/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type CarouselVariants = VariantProps<typeof carousel>;
 export declare const carousel: import("tailwind-variants").TVReturnType<{
     layout: {

package/dist/components/containers/carousel/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 /*
   M3 carousel (https://m3.material.io/components/carousel/specs): 28dp items on `surface`, 8dp
   apart. Multi-browse and hero layouts pad 16dp on both sides and 8dp top/bottom; uncontained

package/dist/components/containers/context-menu/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type ContextMenuVariants = VariantProps<typeof contextMenu>;
 export declare const contextMenu: import("tailwind-variants").TVReturnType<{
     selected: {

package/dist/components/containers/context-menu/theme.js

@@ -1,8 +1,8 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const contextMenu = tv({
     slots: {
         content: `
-      z-[100] min-w-48 max-w-sm gap-spacing-50 overflow-y-auto rounded-lg
+      z-layer-popup min-w-48 max-w-sm gap-spacing-50 overflow-y-auto rounded-lg
       bg-md-sys-color-surface-container-high px-spacing-100 py-spacing-50
       shadow-elevation-3 ring-md-sys-color-outline/10
     `,

package/dist/components/containers/dialogue/Dialogue.svelte

@@ -22,7 +22,7 @@ on screen until confirmed, dismissed, or a required action has been taken.
     headline,
     supportingText,
     confirmText,
-    cancelText = 'Отмена',
+    cancelText = 'Cancel',
     confirmAction,
     loading = false,
     portalDisabled = false,

package/dist/components/containers/dialogue/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type DialogueVariants = VariantProps<typeof dialogue>;
 export declare const dialogue: import("tailwind-variants").TVReturnType<{
     [key: string]: {

package/dist/components/containers/dialogue/theme.js

@@ -1,8 +1,8 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const dialogue = tv({
     slots: {
-        base: 'fixed inset-spacing-0 z-40 bg-md-sys-color-scrim/32',
-        inner: 'fixed inset-spacing-0 z-50 m-auto h-max w-full outline-none bg-md-sys-color-surface-container-high shadow-elevation-3 flex flex-col rounded-[28px] p-spacing-300 gap-spacing-200',
+        base: 'fixed inset-spacing-0 z-layer-modal bg-md-sys-color-scrim/32',
+        inner: 'fixed inset-spacing-0 z-layer-modal m-auto h-max w-full outline-none bg-md-sys-color-surface-container-high shadow-elevation-3 flex flex-col rounded-[28px] p-spacing-300 gap-spacing-200',
         headlineContainer: 'md-sys-typescale-headline-small text-md-sys-color-on-surface',
         supportingTextContainer: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
         buttonContainer: 'mt-spacing-100 flex items-center justify-end gap-spacing-100'

package/dist/components/containers/dialogue/types.d.ts

@@ -18,7 +18,7 @@ export type DialogueProps = DialogueVariants & Dialog.RootProps & {
     headline?: string;
     /** The label for the confirmation button. */
     confirmText: string;
-    /** The label for the cancel button. Defaults to 'Отмена'. */
+    /** The label for the cancel button. Defaults to 'Cancel'. */
     cancelText?: string;
     /**
      * Optional additional content to be rendered between the supporting text

package/dist/components/containers/divider/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type HrVariants = VariantProps<typeof hr>;
 export declare const hr: import("tailwind-variants").TVReturnType<{
     orientation: {

package/dist/components/containers/divider/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const hr = tv({
     base: 'bg-md-sys-color-outline-variant',
     variants: {

package/dist/components/containers/link-preview/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type LinkPreviewVariants = VariantProps<typeof linkPreview>;
 export declare const linkPreview: import("tailwind-variants").TVReturnType<{
     [key: string]: {

package/dist/components/containers/link-preview/theme.js

@@ -1,7 +1,7 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const linkPreview = tv({
     slots: {
-        base: 'relative z-[100] min-w-48 max-w-sm rounded-2xl bg-md-sys-color-surface-container-high p-spacing-200 shadow-elevation-3 ring-1 ring-md-sys-color-outline/20 overflow-hidden',
+        base: 'relative z-layer-popup min-w-48 max-w-sm rounded-2xl bg-md-sys-color-surface-container-high p-spacing-200 shadow-elevation-3 ring-1 ring-md-sys-color-outline/20 overflow-hidden',
         content: 'flex flex-col gap-spacing-100'
     }
 });

package/dist/components/containers/list/List.svelte

@@ -6,13 +6,19 @@
 
   let { variant = 'standard', class: className, children, ...restProps }: ListProps = $props();
 
+  let element = $state<HTMLElement>();
+
   setListContext({
     get variant() {
       return variant;
-    }
+    },
+    get element() {
+      return element;
+    },
+    from: null
   });
 </script>
 
-<ul class={list({ variant, class: clsx(className) })} {...restProps}>
+<ul bind:this={element} class={list({ variant, class: clsx(className) })} {...restProps}>
   {@render children?.()}
 </ul>

package/dist/components/containers/list/ListItem.mdx

@@ -91,6 +91,12 @@ chevron, `aria-expanded` and `aria-controls`. The nested items are `inert` while
 content to 38%. Hover, focus and press tints come from the shared state layer. The keyboard focus
 ring is drawn inside the item, so segments don't overlap.
 
+When the selection moves inside one `List` (a nav list following the route, a single-select
+list), the fill travels: it springs from where the old one was drawn to the newly selected item,
+up or down, on the `spatial` spring. It passes over the items in between, and a selection that
+moves again mid-flight picks up from where the fill is. When several items change at once, or
+under reduced motion, the fill just appears on the selected item.
+
 <Canvas of={ListStories.Disabled} />
 
 ## Where this differs from the tokens

package/dist/components/containers/list/ListItem.svelte

@@ -2,7 +2,10 @@
   import { Icon, Layer } from '../../../utils/index.js';
   import clsx from 'clsx';
   import { listItem } from './theme.js';
-  import { getListContext } from './context.js';
+  import { getListContext, type SelectionRect } from './context.js';
+  import { untrack } from 'svelte';
+  import { animate, type AnimationPlaybackControlsWithThen } from 'motion';
+  import { springTokens, springTransition } from '../../../animation/spring.js';
   import type { ListitemProps } from './types.js';
   import Badge from '../../badge/Badge.svelte';
 
@@ -53,6 +56,71 @@
     })
   );
 
+  /*
+    The selected fill travels. Before an update, the item losing the selection leaves where its
+    fill is drawn (mid-flight too) in the List's context; after it, the item gaining the
+    selection springs its new fill over from there, on spatial: a sizeable move, and part of a
+    navigation, so no fastSpatial bounce. Without a List, or with several items selected or
+    deselected at once, the fill just appears where it belongs. Reduced motion skips the ride.
+  */
+  const showFill = $derived(!!selected && !disabled);
+  let fill = $state<HTMLElement>();
+  let travelling = $state(false);
+  let wasShown = untrack(() => showFill);
+  let ride: AnimationPlaybackControlsWithThen | undefined;
+
+  const measure = (el: HTMLElement): SelectionRect | null => {
+    const box = ctx?.element?.getBoundingClientRect();
+    if (!box) return null;
+    const r = el.getBoundingClientRect();
+    return {
+      top: r.top - box.top,
+      bottom: r.bottom - box.top,
+      left: r.left - box.left,
+      right: r.right - box.left
+    };
+  };
+
+  $effect.pre(() => {
+    const shown = showFill;
+    untrack(() => {
+      if (!wasShown || shown || !ctx || !fill) return;
+      ctx.from = measure(fill);
+      ride?.stop();
+      travelling = false;
+      // Only for this update: a deselect with no select after it leaves nothing behind.
+      queueMicrotask(() => (ctx.from = null));
+    });
+  });
+
+  $effect(() => {
+    const shown = showFill;
+    untrack(() => {
+      const gained = shown && !wasShown;
+      wasShown = shown;
+      const from = ctx?.from;
+      if (!gained || !from || !fill) return;
+      ctx!.from = null;
+      const to = measure(fill);
+      if (!to || matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+      // Above the items it passes over, which are the item's siblings.
+      travelling = true;
+      ride = animate(
+        fill,
+        {
+          top: [`${from.top - to.top}px`, '0px'],
+          bottom: [`${to.bottom - from.bottom}px`, '0px'],
+          left: [`${from.left - to.left}px`, '0px'],
+          right: [`${to.right - from.right}px`, '0px']
+        },
+        springTransition(springTokens.spatial)
+      );
+      ride.then(() => (travelling = false));
+    });
+  });
+
+  $effect(() => () => ride?.stop());
+
   const attrs = $derived.by(() => {
     const { label: _, href, onclick, ...extra } = rest;
     const a: Record<string, unknown> = { ...extra };
@@ -81,6 +149,9 @@
 </script>
 
 {#snippet content()}
+  {#if showFill}
+    <span bind:this={fill} class={cls.selection()} aria-hidden="true"></span>
+  {/if}
   {#if interactive}
     <Layer />
   {/if}
@@ -121,7 +192,11 @@
 {/snippet}
 
 {#snippet item()}
-  <svelte:element this={tag} class={cls.base({ class: clsx(className) })} {...attrs}>
+  <svelte:element
+    this={tag}
+    class={cls.base({ class: clsx(className, travelling && 'z-10') })}
+    {...attrs}
+  >
     {@render content()}
   </svelte:element>
   {#if children}

package/dist/components/containers/list/context.d.ts

@@ -1,5 +1,19 @@
+/** Where the outgoing selection was drawn, relative to the list's box. */
+export type SelectionRect = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
 type ListContext = {
     readonly variant: 'standard' | 'segmented';
+    /** The list's own element, which selection rects are measured against. */
+    readonly element: HTMLElement | undefined;
+    /**
+     * Handed from the item losing the selection to the one gaining it within one update, so the
+     * selected fill travels between them. Cleared once that update settles.
+     */
+    from: SelectionRect | null;
 };
 export declare const setListContext: (ctx: ListContext) => ListContext;
 export declare const getListContext: () => ListContext | undefined;

package/dist/components/containers/list/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type ListVariants = VariantProps<typeof list>;
 export type ListMediaVariants = VariantProps<typeof listMedia>;
 export declare const list: import("tailwind-variants").TVReturnType<{
@@ -85,6 +85,7 @@ export declare const listItem: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string[];
+    selection: string;
     leading: string;
     body: string;
     overline: string;
@@ -165,6 +166,7 @@ export declare const listItem: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string[];
+    selection: string;
     leading: string;
     body: string;
     overline: string;
@@ -245,6 +247,7 @@ export declare const listItem: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string[];
+    selection: string;
     leading: string;
     body: string;
     overline: string;
@@ -327,6 +330,7 @@ export declare const listiem: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string[];
+    selection: string;
     leading: string;
     body: string;
     overline: string;
@@ -407,6 +411,7 @@ export declare const listiem: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string[];
+    selection: string;
     leading: string;
     body: string;
     overline: string;
@@ -487,6 +492,7 @@ export declare const listiem: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string[];
+    selection: string;
     leading: string;
     body: string;
     overline: string;