@noxlovette/material 0.6.1 → 0.7.0

package/dist/components/chips/theme.js

@@ -1,72 +1,163 @@
 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/app/theme.d.ts

@@ -1,3 +1,3 @@
 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 '../../../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/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

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

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

@@ -7,6 +7,11 @@ import { tv } from '../../../utils/tv.js';
   `List` sets `--li-top`/`--li-bottom` to 16dp on its first/last child, so the list's outer
   corners stay 16dp while the inner ones morph. Custom properties inherit, so this reaches an item
   through its `<li>`; each `<ul>` resets both so nested lists start clean.
+
+  Selection: the selected fill is its own element rather than the item's background. When one
+  item loses the selection and another gains it in the same update (a nav list following the
+  route, a single-select list), the fill springs from where the old one was drawn to the new
+  item, like the tab indicator, instead of blinking out and in.
 */
 export const list = tv({
     base: 'flex w-full flex-col [--li-bottom:initial] [--li-top:initial]',
@@ -22,11 +27,14 @@ export const list = tv({
 export const listItem = tv({
     slots: {
         base: [
-            'relative flex w-full min-w-spacing-0 gap-spacing-150 ps-spacing-200 pe-spacing-200 pt-spacing-125 pb-spacing-125 text-start',
+            'relative isolate flex w-full min-w-spacing-0 gap-spacing-150 ps-spacing-200 pe-spacing-200 pt-spacing-125 pb-spacing-125 text-start',
             '[--li-shape:0.25rem] rounded-t-[var(--li-top,var(--li-shape))] rounded-b-[var(--li-bottom,var(--li-shape))]',
             'transition-[border-radius,background-color,color] md-sys-motion-fast-spatial',
             'text-md-sys-color-on-surface-variant'
         ],
+        /* The selected fill, under the item's content and state layer, in the item's shape. When the
+           selection moves within a List it springs over from the previous item (ListItem.svelte). */
+        selection: 'pointer-events-none absolute inset-spacing-0 -z-10 rounded-[inherit] bg-md-sys-color-secondary-container',
         leading: 'flex shrink-0 items-center text-md-sys-color-on-surface-variant',
         body: 'flex min-w-spacing-0 flex-1 flex-col justify-center',
         overline: 'md-sys-typescale-label-small line-clamp-1 text-md-sys-color-on-surface-variant',
@@ -71,7 +79,7 @@ export const listItem = tv({
         },
         selected: {
             true: {
-                base: 'bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container [--li-shape:1rem] hover:[--li-shape:1rem]',
+                base: 'text-md-sys-color-on-secondary-container [--li-shape:1rem] hover:[--li-shape:1rem]',
                 leading: 'text-md-sys-color-on-secondary-container',
                 overline: 'text-md-sys-color-on-secondary-container',
                 headline: 'text-md-sys-color-on-secondary-container',

package/dist/components/containers/pane/DraggablePane.svelte

@@ -31,7 +31,7 @@ the pane itself stays `position: fixed` and doesn't move with either.
   import { springTokens, springTransition } from '../../../animation/spring.js';
   import { Icon, Layer } from '../../../utils/index.js';
   import { ButtonIcon } from '../../buttons/index.js';
-  import { clickOutside } from '../../../attachments/index.js';
+  import { clickOutside, drag, resist } from '../../../attachments/index.js';
   import { draggablePane, type ResizeEdge } from './theme.js';
   import { dragPositions } from './dragStore.svelte.js';
   import type { DraggablePaneProps } from './types.js';
@@ -313,11 +313,6 @@ the pane itself stays `position: fixed` and doesn't move with either.
     the same spring. Grabbing the pane mid-spring stops it where it is.
   */
   const SETTLE_SPRING = springTransition(springTokens.fastSpatial);
-  /* Share of the overshoot still applied at the edge, shrinking the further it's pulled. The
-     UIScrollView rubber-band constant — M3 has no token for this; tune by eye. */
-  const RUBBER_BAND = 0.55;
-  /* Pointer samples older than this don't count towards the release velocity. */
-  const VELOCITY_WINDOW_MS = 100;
 
   let settleX: AnimationPlaybackControls | undefined;
   let settleY: AnimationPlaybackControls | undefined;
@@ -352,61 +347,31 @@ the pane itself stays `position: fixed` and doesn't move with either.
     if (persistKey) dragPositions.set(persistKey, { x: next.x, y: next.y, width, height });
   }
 
-  /** Resisted overshoot: the further past the edge, the less the pane follows. */
-  function rubberBand(overshoot: number, limit: number) {
-    return (1 - 1 / ((overshoot * RUBBER_BAND) / limit + 1)) * limit;
-  }
-
-  function resist(value: number, min: number, max: number, size: number) {
-    if (value < min) return min - rubberBand(min - value, size);
-    if (value > max) return max + rubberBand(value - max, size);
-    return value;
-  }
-
-  let dragStartX = 0;
-  let dragStartY = 0;
   let originX = 0;
   let originY = 0;
-  let samples: { x: number; y: number; t: number }[] = [];
-
-  function startDrag(event: PointerEvent) {
-    if (disableDrag) return;
-    stopSettle();
-    dragging = true;
-    dragStartX = event.clientX;
-    dragStartY = event.clientY;
-    originX = x ?? initialX;
-    originY = y ?? initialY;
-    samples = [{ x: event.clientX, y: event.clientY, t: event.timeStamp }];
-    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
-  }
 
-  function moveDrag(event: PointerEvent) {
-    if (!dragging) return;
-    const rawX = originX + (event.clientX - dragStartX);
-    const rawY = originY + (event.clientY - dragStartY);
-    const rect = boundsRect();
-    const { x: minX, y: minY } = clamp(-Infinity, -Infinity);
-    const { x: maxX, y: maxY } = clamp(Infinity, Infinity);
-    x = resist(rawX, minX, maxX, rect.right - rect.left);
-    y = resist(rawY, minY, maxY, rect.bottom - rect.top);
-    samples.push({ x: event.clientX, y: event.clientY, t: event.timeStamp });
-    samples = samples.filter((sample) => event.timeStamp - sample.t <= VELOCITY_WINDOW_MS);
-  }
-
-  function releaseVelocity() {
-    const first = samples[0];
-    const last = samples[samples.length - 1];
-    const seconds = first && last ? (last.t - first.t) / 1000 : 0;
-    if (!seconds) return { x: 0, y: 0 };
-    return { x: (last.x - first.x) / seconds, y: (last.y - first.y) / seconds };
-  }
-
-  function endDrag() {
-    if (!dragging) return;
-    dragging = false;
-    settleTo(x ?? initialX, y ?? initialY, releaseVelocity());
-  }
+  // Pointer plumbing (capture, release velocity) and the rubber-band come from the shared drag
+  // attachment; this only positions the pane.
+  const dragPane = drag(() => ({
+    disabled: disableDrag,
+    onStart: () => {
+      stopSettle();
+      dragging = true;
+      originX = x ?? initialX;
+      originY = y ?? initialY;
+    },
+    onMove: (offset) => {
+      const rect = boundsRect();
+      const { x: minX, y: minY } = clamp(-Infinity, -Infinity);
+      const { x: maxX, y: maxY } = clamp(Infinity, Infinity);
+      x = resist(originX + offset.x, minX, maxX, rect.right - rect.left);
+      y = resist(originY + offset.y, minY, maxY, rect.bottom - rect.top);
+    },
+    onEnd: (velocity) => {
+      dragging = false;
+      settleTo(x ?? initialX, y ?? initialY, velocity);
+    }
+  }));
 
   const NUDGE = 8;
 
@@ -453,7 +418,7 @@ the pane itself stays `position: fixed` and doesn't move with either.
   // every move rather than accumulated via `event.movementX`/`movementY` —
   // the latter isn't reliably populated across every input path (some
   // synthetic/automated drag sequences leave it 0), which would silently
-  // drop the resize. Matches `moveDrag`'s baseline-delta approach.
+  // drop the resize. The drag attachment works from a fixed baseline the same way.
   function moveResize(event: PointerEvent) {
     if (!resizeDir) return;
     applyResize(
@@ -534,10 +499,7 @@ the pane itself stays `position: fixed` and doesn't move with either.
       tabindex={disableDrag ? undefined : 0}
       aria-label={disableDrag ? undefined : title ? `Drag to move ${title}` : 'Drag to move'}
       aria-keyshortcuts={disableDrag ? undefined : 'ArrowUp ArrowDown ArrowLeft ArrowRight'}
-      onpointerdown={disableDrag ? undefined : startDrag}
-      onpointermove={disableDrag ? undefined : moveDrag}
-      onpointerup={disableDrag ? undefined : endDrag}
-      onpointercancel={disableDrag ? undefined : endDrag}
+      {@attach dragPane}
       onkeydown={disableDrag ? undefined : onKeydown}
     >
       {#if !disableDrag}

package/dist/components/containers/pane/Pane.svelte

@@ -76,7 +76,7 @@ the document root yourself to get the same behavior.
 
   const style = $derived(
     clsx(
-      !flexible && `width: ${shown}px; flex-basis: ${shown}px;`,
+      !flexible && `width: ${shown}px; --pane-basis: ${shown}px;`,
       sticky && `--pane-sticky-top: ${stickyTop}px;`
     )
   );