@noxlovette/material 0.4.8 → 0.5.1

package/dist/components/containers/link-preview/LinkPreview.svelte

@@ -5,11 +5,11 @@ Link Previews display a preview of a link's content when hovered.
 @see https://bits-ui.com/docs/components/link-preview
 -->
 <script lang="ts">
+  import { enterExit, presence } from '../../../animation/index.js';
   import { LinkPreview } from 'bits-ui';
   import clsx from 'clsx';
   import { linkPreview } from './theme.js';
   import type { LinkPreviewProps } from './types.js';
-  import { enterExit, easeEmphasizedDecel, easeEmphasizedAccel } from '../../../animation/index.js';
   import { Layer } from '../../../utils/index.js';
 
   let {
@@ -33,31 +33,20 @@ Link Previews display a preview of a link's content when hovered.
   </LinkPreview.Trigger>
 
   <LinkPreview.Portal>
-    <LinkPreview.Content forceMount {side} {align} {sideOffset}>
+    <LinkPreview.Content {side} {align} {sideOffset}>
       {#snippet child({ wrapperProps, props, open: isOpen })}
-        {#if isOpen}
-          <div {...wrapperProps}>
-            <div
-              {...props}
-              class={base({ class: clsx(className) })}
-              in:enterExit={{
-                duration: 200,
-                easing: easeEmphasizedDecel,
-                mode: 'scale'
-              }}
-              out:enterExit={{
-                duration: 150,
-                easing: easeEmphasizedAccel,
-                mode: 'scale'
-              }}
-            >
-              <Layer />
-              <div class={content()}>
-                {@render children()}
-              </div>
+        <div {...wrapperProps}>
+          <div
+            {...props}
+            class={base({ class: clsx(className) })}
+            {@attach presence(() => isOpen, enterExit.scale)}
+          >
+            <Layer />
+            <div class={content()}>
+              {@render children()}
             </div>
           </div>
-        {/if}
+        </div>
       {/snippet}
     </LinkPreview.Content>
   </LinkPreview.Portal>

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

@@ -3,15 +3,15 @@ export type LinkPreviewVariants = VariantProps<typeof linkPreview>;
 export declare const linkPreview: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
             content?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
             content?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -20,8 +20,8 @@ export declare const linkPreview: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
             content?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {

package/dist/components/containers/menu/Menu.svelte

@@ -16,11 +16,10 @@ Contrast with `MenuItem` (a single interactive row inside the panel) and
 @see https://m3.material.io/components/menus/guidelines
 -->
 <script lang="ts">
+  import { enterExit, presence } from '../../../animation/index.js';
   import { DropdownMenu } from 'bits-ui';
   import clsx from 'clsx';
   import Button from '../../buttons/Button.svelte';
-  import { enterExit } from '../../../animation/enterExit.js';
-  import { easeEmphasizedDecel } from '../../../animation/easing.js';
   import type { MenuProps } from './types.js';
 
   let {
@@ -45,27 +44,21 @@ Contrast with `MenuItem` (a single interactive row inside the panel) and
   </DropdownMenu.Trigger>
 
   <DropdownMenu.Portal>
-    <DropdownMenu.Content forceMount {align} sideOffset={4} class="z-100">
+    <DropdownMenu.Content {align} sideOffset={4} class="z-100">
       {#snippet child({ wrapperProps, props, open: isOpen })}
-        {#if isOpen}
-          <div {...wrapperProps} class={wrapperProps.class as any}>
-            <div
-              {...props}
-              class={clsx(
-                'bg-md-sys-color-surface-container-high shadow-elevation-3 ring-md-sys-color-outline/10 max-w-sm min-w-48 gap-1 overflow-y-auto rounded-lg px-2 py-1',
-                props.class as any,
-                contentClass
-              )}
-              transition:enterExit={{
-                duration: 200,
-                easing: easeEmphasizedDecel,
-                mode: 'scale'
-              }}
-            >
-              {@render children()}
-            </div>
+        <div {...wrapperProps} class={wrapperProps.class as any}>
+          <div
+            {...props}
+            class={clsx(
+              'bg-md-sys-color-surface-container-high shadow-elevation-3 ring-md-sys-color-outline/10 max-w-sm min-w-48 gap-1 overflow-y-auto rounded-lg px-2 py-1',
+              props.class as any,
+              contentClass
+            )}
+            {@attach presence(() => isOpen, enterExit.scale)}
+          >
+            {@render children()}
           </div>
-        {/if}
+        </div>
       {/snippet}
     </DropdownMenu.Content>
   </DropdownMenu.Portal>

package/dist/components/containers/menu/MenuSub.svelte

@@ -25,13 +25,12 @@ trigger row (`iconProps`/`helper`/`children` label) behaves like a
 @see https://m3.material.io/components/menus/guidelines
 -->
 <script lang="ts">
+  import { enterExit, presence } from '../../../animation/index.js';
   import { DropdownMenu } from 'bits-ui';
   import clsx from 'clsx';
   import Icon from '../../../utils/icon/Icon.svelte';
   import Layer from '../../../utils/Layer.svelte';
   import { menu as menuCls } from './theme.js';
-  import { enterExit } from '../../../animation/enterExit.js';
-  import { easeEmphasizedDecel } from '../../../animation/easing.js';
   import type { MenuSubProps } from './types.js';
 
   let {
@@ -68,23 +67,17 @@ trigger row (`iconProps`/`helper`/`children` label) behaves like a
   </DropdownMenu.SubTrigger>
 
   <DropdownMenu.Portal>
-    <DropdownMenu.SubContent forceMount sideOffset={4} class="z-100">
+    <DropdownMenu.SubContent sideOffset={4} class="z-100">
       {#snippet child({ wrapperProps, props, open: isOpen })}
-        {#if isOpen}
-          <div {...wrapperProps} class={wrapperProps.class as any}>
-            <div
-              {...props}
-              class={clsx(cls.content(), props.class as any, submenuClass)}
-              transition:enterExit={{
-                duration: 200,
-                easing: easeEmphasizedDecel,
-                mode: 'scale'
-              }}
-            >
-              {@render submenu()}
-            </div>
+        <div {...wrapperProps} class={wrapperProps.class as any}>
+          <div
+            {...props}
+            class={clsx(cls.content(), props.class as any, submenuClass)}
+            {@attach presence(() => isOpen, enterExit.scale)}
+          >
+            {@render submenu()}
           </div>
-        {/if}
+        </div>
       {/snippet}
     </DropdownMenu.SubContent>
   </DropdownMenu.Portal>

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

@@ -27,9 +27,11 @@ the pane itself stays `position: fixed` and doesn't move with either.
 <script lang="ts">
   import clsx from 'clsx';
   import { onMount } from 'svelte';
+  import { animate, type AnimationPlaybackControls } from 'motion';
+  import { springTokens, springTransition } from '../../../animation/spring.js';
   import { Icon, Layer } from '../../../utils/index.js';
   import { ButtonIcon } from '../../buttons/index.js';
-  import { clickOutside } from '../../../actions/index.js';
+  import { clickOutside } from '../../../attachments/index.js';
   import { draggablePane, type ResizeEdge } from './theme.js';
   import { dragPositions } from './dragStore.svelte.js';
   import type { DraggablePaneProps } from './types.js';
@@ -269,7 +271,10 @@ the pane itself stays `position: fixed` and doesn't move with either.
     persist();
 
     window.addEventListener('resize', recomputeBounds);
-    return () => window.removeEventListener('resize', recomputeBounds);
+    return () => {
+      window.removeEventListener('resize', recomputeBounds);
+      stopSettle();
+    };
   });
 
   // `bounds` can be an element that resizes or scrolls independently of the
@@ -301,28 +306,106 @@ the pane itself stays `position: fixed` and doesn't move with either.
     }
   });
 
+  /*
+    Expressive drag: the pane tracks the pointer 1:1 (direct manipulation never lags behind a
+    spring), rubber-bands past `bounds` instead of hitting a wall, and on release springs back
+    inside on the fast spatial spring, carrying the pointer's velocity. Keyboard nudges glide on
+    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;
+  /** Where the running spring is headed; undefined once it's done or stopped. */
+  let settleTarget: { x: number; y: number } | undefined;
+
+  function stopSettle() {
+    settleX?.stop();
+    settleY?.stop();
+    settleTarget = undefined;
+  }
+
+  /** Springs the pane to `target` (clamped), starting with `velocity` px/s. */
+  function settleTo(targetX: number, targetY: number, velocity = { x: 0, y: 0 }) {
+    stopSettle();
+    const next = clamp(targetX, targetY);
+    const fromX = x ?? initialX;
+    const fromY = y ?? initialY;
+    settleTarget = next;
+    settleX = animate(fromX, next.x, {
+      ...SETTLE_SPRING,
+      velocity: velocity.x,
+      onUpdate: (value) => (x = value),
+      onComplete: () => (settleTarget = undefined)
+    });
+    settleY = animate(fromY, next.y, {
+      ...SETTLE_SPRING,
+      velocity: velocity.y,
+      onUpdate: (value) => (y = value)
+    });
+    // Persist the resting position up front — the spring only animates towards it.
+    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;
-    moveTo(originX + (event.clientX - dragStartX), originY + (event.clientY - dragStartY));
+    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());
   }
 
   const NUDGE = 8;
@@ -339,7 +422,9 @@ the pane itself stays `position: fixed` and doesn't move with either.
     const delta = deltas[event.key];
     if (!delta) return;
     event.preventDefault();
-    moveTo((x ?? initialX) + delta[0], (y ?? initialY) + delta[1]);
+    // Retargets a running nudge, so holding an arrow key glides instead of stepping.
+    const from = settleTarget ?? clamp(x ?? initialX, y ?? initialY);
+    settleTo(from.x + delta[0], from.y + delta[1]);
   }
 
   let resizeStartClientX = 0;
@@ -440,7 +525,7 @@ the pane itself stays `position: fixed` and doesn't move with either.
     {style}
     role="group"
     aria-label={title}
-    use:clickOutside={() => onClickOutside?.()}
+    {@attach onClickOutside && clickOutside(onClickOutside)}
     {...rest}
   >
     <div

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

@@ -24,6 +24,6 @@ import type { DraggablePaneProps } from './types.js';
  * element resizes or scrolls (itself or via any scrolling ancestor), since
  * the pane itself stays `position: fixed` and doesn't move with either.
  */
-declare const DraggablePane: import("svelte").Component<DraggablePaneProps, {}, "x" | "y" | "width" | "height" | "collapsed">;
+declare const DraggablePane: import("svelte").Component<DraggablePaneProps, {}, "height" | "width" | "x" | "y" | "collapsed">;
 type DraggablePane = ReturnType<typeof DraggablePane>;
 export default DraggablePane;

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

@@ -117,7 +117,7 @@ export const pane = tv({
 export const paneHandle = tv({
     slots: {
         base: 'group relative flex shrink-0 w-3 self-stretch cursor-col-resize touch-none items-center justify-center rounded-full bg-transparent hover:bg-md-sys-color-outline/20',
-        grip: 'rounded-full transition-[background-color,height,width] duration-150'
+        grip: 'rounded-full transition-[background-color,height,width] md-sys-motion-fast-spatial'
     },
     variants: {
         dragging: {
@@ -135,7 +135,7 @@ export const paneHandle = tv({
 });
 export const draggablePane = tv({
     slots: {
-        base: 'fixed z-[100] flex min-w-72 flex-col rounded-md bg-md-sys-color-surface-container-highest shadow-elevation-3',
+        base: 'fixed z-[100] flex min-w-72 flex-col rounded-md bg-md-sys-color-surface-container-highest shadow-elevation-3 transition-shadow md-sys-motion-effects',
         headerBar: 'relative flex shrink-0 items-center gap-2 rounded-t-2xl px-3 py-2 touch-none select-none md-sys-state-focus-indicator',
         grip: 'shrink-0 text-md-sys-color-on-surface-variant',
         headline: 'flex-1 truncate md-sys-typescale-title-small text-md-sys-color-on-surface',

package/dist/components/containers/popover/Popover.svelte

@@ -5,11 +5,11 @@ Popovers display rich content in a non-modal overlay anchored to a trigger eleme
 @see https://m3.material.io/components/dialogs/overview (non-modal surface variant)
 -->
 <script lang="ts">
+  import { enterExit, presence } from '../../../animation/index.js';
   import { Popover } from 'bits-ui';
   import clsx from 'clsx';
   import { popover } from './theme.js';
   import type { PopoverProps } from './types.js';
-  import { enterExit, easeEmphasizedDecel, easeEmphasizedAccel } from '../../../animation/index.js';
   import ButtonIcon from '../../buttons/ButtonIcon.svelte';
   import Title from '../../typography/title/Title.svelte';
   let {
@@ -35,49 +35,38 @@ Popovers display rich content in a non-modal overlay anchored to a trigger eleme
   </Popover.Trigger>
 
   <Popover.Portal>
-    <Popover.Content forceMount {side} {align} {sideOffset}>
+    <Popover.Content {side} {align} {sideOffset}>
       {#snippet child({ wrapperProps, props, open: isOpen })}
-        {#if isOpen}
-          <div {...wrapperProps} class={wrapperProps.class as any}>
-            <div
-              {...props}
-              class={base({ class: clsx(className, props.class as any) })}
-              in:enterExit={{
-                duration: 200,
-                easing: easeEmphasizedDecel,
-                mode: 'scale'
-              }}
-              out:enterExit={{
-                duration: 150,
-                easing: easeEmphasizedAccel,
-                mode: 'scale'
-              }}
-            >
-              {#if title || showClose}
-                <div class={header()}>
-                  {#if title}
-                    <Title class={titleCls()}>{title}</Title>
-                  {/if}
-                  {#if showClose}
-                    <Popover.Close>
-                      {#snippet child({ props: closeProps })}
-                        <div class={close()}>
-                          <ButtonIcon
-                            {...closeProps}
-                            iconProps={{ name: 'close' }}
-                            variant="text"
-                            size="sm"
-                          />
-                        </div>
-                      {/snippet}
-                    </Popover.Close>
-                  {/if}
-                </div>
-              {/if}
-              {@render children()}
-            </div>
+        <div {...wrapperProps} class={wrapperProps.class as any}>
+          <div
+            {...props}
+            class={base({ class: clsx(className, props.class as any) })}
+            {@attach presence(() => isOpen, enterExit.scale)}
+          >
+            {#if title || showClose}
+              <div class={header()}>
+                {#if title}
+                  <Title class={titleCls()}>{title}</Title>
+                {/if}
+                {#if showClose}
+                  <Popover.Close>
+                    {#snippet child({ props: closeProps })}
+                      <div class={close()}>
+                        <ButtonIcon
+                          {...closeProps}
+                          iconProps={{ name: 'close' }}
+                          variant="text"
+                          size="sm"
+                        />
+                      </div>
+                    {/snippet}
+                  </Popover.Close>
+                {/if}
+              </div>
+            {/if}
+            {@render children()}
           </div>
-        {/if}
+        </div>
       {/snippet}
     </Popover.Content>
   </Popover.Portal>

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

@@ -3,21 +3,21 @@ export type PopoverVariants = VariantProps<typeof popover>;
 export declare const popover: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
+            title?: import("tailwind-variants").ClassValue;
             close?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
             body?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
-            title?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
+            title?: import("tailwind-variants").ClassValue;
             close?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
             body?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
-            title?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -29,11 +29,11 @@ export declare const popover: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
+            title?: import("tailwind-variants").ClassValue;
             close?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
             body?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
-            title?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {

package/dist/components/containers/scroll-area/theme.js

@@ -3,8 +3,8 @@ export const scrollArea = tv({
     slots: {
         root: 'relative overflow-hidden',
         viewport: 'size-full rounded-[inherit]',
-        scrollbar: 'flex touch-none select-none transition-colors duration-150 ease-out',
-        thumb: 'relative flex-1 rounded-full bg-md-sys-color-outline-variant hover:bg-md-sys-color-secondary active:bg-md-sys-color-secondary transition-colors duration-150',
+        scrollbar: 'flex touch-none select-none transition-colors md-sys-motion-fast-effects',
+        thumb: 'relative flex-1 rounded-full bg-md-sys-color-outline-variant hover:bg-md-sys-color-secondary active:bg-md-sys-color-secondary transition-colors md-sys-motion-fast-effects',
         corner: 'bg-md-sys-color-surface-container-highest'
     },
     variants: {

package/dist/components/containers/side-sheet/SideSheet.stories.svelte

@@ -1,9 +1,6 @@
 <!--
-  SideSheet has no `open` prop of its own — mounting it calls the native <dialog>'s showModal()
-  immediately, so visibility is controlled by conditionally rendering the component
-  ({#if open}<SideSheet ...>{/if}), same as BottomSheet. `close` is a required callback the
-  sheet invokes on Esc or backdrop click — the consumer is expected to flip its own `open` flag
-  to false in response.
+  SideSheet is controlled with `bind:open`: it dismisses itself (close button, Esc, backdrop
+  click) by setting `open` to false, and stays mounted until its exit animation finishes.
 -->
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -31,16 +28,14 @@
   {#snippet template(args)}
     <div class="p-6">
       <Button onclick={() => (playgroundOpen = true)}>Show side sheet</Button>
-      {#if playgroundOpen}
-        <SideSheet headline={args.headline} close={() => (playgroundOpen = false)}>
-          <div class="flex flex-col gap-3 px-6 pb-6">
-            <Body class="text-md-sys-color-on-surface-variant">
-              Supplementary content and actions, anchored to the edge of the screen while the main
-              content stays visible.
-            </Body>
-          </div>
-        </SideSheet>
-      {/if}
+      <SideSheet headline={args.headline} bind:open={playgroundOpen}>
+        <div class="flex flex-col gap-3 px-6 pb-6">
+          <Body class="text-md-sys-color-on-surface-variant">
+            Supplementary content and actions, anchored to the edge of the screen while the main
+            content stays visible.
+          </Body>
+        </div>
+      </SideSheet>
     </div>
   {/snippet}
 </Story>