@noxlovette/material 0.4.8 → 0.5.0

package/dist/components/containers/context-menu/ContextMenu.svelte

@@ -30,13 +30,12 @@ you need it (e.g. a table row):
 @see https://m3.material.io/components/menus/guidelines
 -->
 <script lang="ts">
+  import { enterExit, presence } from '../../../animation/index.js';
   import { ContextMenu as BitsContextMenu } from 'bits-ui';
   import { contextMenu } from './theme.js';
   import type { ContextMenuProps, ContextMenuDataItem } from './types.js';
   import Icon from '../../../utils/icon/Icon.svelte';
   import Divider from '../divider/Divider.svelte';
-  import { enterExit } from '../../../animation/enterExit.js';
-  import { easeEmphasizedDecel } from '../../../animation/easing.js';
 
   let {
     items = [],
@@ -75,25 +74,19 @@ you need it (e.g. a table row):
         <Icon name="chevron_right" class={theme.rightSlot()} />
       </BitsContextMenu.SubTrigger>
       <BitsContextMenu.Portal>
-        <BitsContextMenu.SubContent forceMount class={theme.content()}>
+        <BitsContextMenu.SubContent class={theme.content()}>
           {#snippet child({ wrapperProps, props, open })}
-            {#if open}
-              <div {...wrapperProps} class={wrapperProps.class as any}>
-                <div
-                  {...props}
-                  class={props.class as any}
-                  transition:enterExit={{
-                    duration: 200,
-                    easing: easeEmphasizedDecel,
-                    mode: 'scale'
-                  }}
-                >
-                  {#each item.items as subItem (subItem)}
-                    {@render MenuItem(subItem)}
-                  {/each}
-                </div>
+            <div {...wrapperProps} class={wrapperProps.class as any}>
+              <div
+                {...props}
+                class={props.class as any}
+                {@attach presence(() => open, enterExit.scale)}
+              >
+                {#each item.items as subItem (subItem)}
+                  {@render MenuItem(subItem)}
+                {/each}
               </div>
-            {/if}
+            </div>
           {/snippet}
         </BitsContextMenu.SubContent>
       </BitsContextMenu.Portal>
@@ -142,25 +135,19 @@ you need it (e.g. a table row):
   </BitsContextMenu.Trigger>
 
   <BitsContextMenu.Portal>
-    <BitsContextMenu.Content forceMount class={theme.content()}>
+    <BitsContextMenu.Content class={theme.content()}>
       {#snippet child({ wrapperProps, props, open })}
-        {#if open}
-          <div {...wrapperProps} class={wrapperProps.class as any}>
-            <div
-              {...props}
-              class={props.class as any}
-              transition:enterExit={{
-                duration: 200,
-                easing: easeEmphasizedDecel,
-                mode: 'scale'
-              }}
-            >
-              {#each items as item (item)}
-                {@render MenuItem(item)}
-              {/each}
-            </div>
+        <div {...wrapperProps} class={wrapperProps.class as any}>
+          <div
+            {...props}
+            class={props.class as any}
+            {@attach presence(() => open, enterExit.scale)}
+          >
+            {#each items as item (item)}
+              {@render MenuItem(item)}
+            {/each}
           </div>
-        {/if}
+        </div>
       {/snippet}
     </BitsContextMenu.Content>
   </BitsContextMenu.Portal>

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

@@ -9,14 +9,14 @@ export const contextMenu = tv({
         item: `
       rounded-sm relative flex w-full cursor-pointer select-none items-center gap-2
       px-3 py-2 text-left md-sys-typescale-body-large text-md-sys-color-on-surface
-      outline-none transition-colors duration-150
+      outline-none transition-colors md-sys-motion-fast-effects
       hover:bg-md-sys-color-on-surface/8 data-[highlighted]:bg-md-sys-color-on-surface/8
       data-[disabled]:cursor-not-allowed data-[disabled]:opacity-38
     `,
         subTrigger: `
       rounded-sm relative flex w-full cursor-pointer select-none items-center gap-2
       px-3 py-2 text-left md-sys-typescale-body-large text-md-sys-color-on-surface
-      outline-none transition-colors duration-150
+      outline-none transition-colors md-sys-motion-fast-effects
       hover:bg-md-sys-color-on-surface/8 data-[state=open]:bg-md-sys-color-on-surface/8
       data-[highlighted]:bg-md-sys-color-on-surface/8
       data-[disabled]:cursor-not-allowed data-[disabled]:opacity-38

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

@@ -13,8 +13,7 @@ on screen until confirmed, dismissed, or a required action has been taken.
   import { dialogue } from './theme.js';
   import type { DialogueProps } from './types.js';
   import { Dialog } from 'bits-ui';
-  import { enterExit } from '../../../animation/enterExit.js';
-  import { easeEmphasized, easeEmphasizedDecel } from '../../../animation/easing.js';
+  import { enterExit, presence } from '../../../animation/index.js';
   import { Button } from '../../buttons/index.js';
 
   let {
@@ -44,79 +43,64 @@ on screen until confirmed, dismissed, or a required action has been taken.
 
 <Dialog.Root bind:open {...rootRest}>
   <Dialog.Portal disabled={portalDisabled}>
-    <Dialog.Overlay forceMount>
+    <Dialog.Overlay>
       {#snippet child({ props, open })}
-        {#if open}
-          <div
-            {...props}
-            class={base()}
-            transition:enterExit={{
-              duration: 500,
-              easing: easeEmphasizedDecel
-            }}
-          ></div>
-        {/if}
+        <div {...props} class={base()} {@attach presence(() => open, enterExit.fade)}></div>
       {/snippet}
     </Dialog.Overlay>
-    <Dialog.Content forceMount>
+    <Dialog.Content>
       {#snippet child({ props, open: isOpen })}
-        {#if isOpen}
-          <form
-            method="POST"
-            action={confirmAction}
-            use:enhance
-            {...props}
-            {...formProps}
-            class={inner({ class: className })}
-            style:min-width={minWidth}
-            style:max-width={maxWidth}
-            transition:enterExit={{
-              duration: 500,
-              easing: easeEmphasized,
-              mode: 'dialog-m3'
-            }}
-          >
-            {#if headline}
-              <Dialog.Title class={headlineContainer()}>
-                {headline}
-              </Dialog.Title>
-            {/if}
-            {#if supportingText}
-              <Dialog.Description class={supportingTextContainer()}>
-                {supportingText}
-              </Dialog.Description>
-            {/if}
+        <form
+          method="POST"
+          action={confirmAction}
+          use:enhance
+          {...props}
+          {...formProps}
+          class={inner({ class: className })}
+          style:min-width={minWidth}
+          style:max-width={maxWidth}
+          {@attach presence(() => isOpen, enterExit.dialog)}
+        >
+          {#if headline}
+            <Dialog.Title class={headlineContainer()}>
+              {headline}
+            </Dialog.Title>
+          {/if}
+          {#if supportingText}
+            <Dialog.Description class={supportingTextContainer()}>
+              {supportingText}
+            </Dialog.Description>
+          {/if}
 
-            {#if children}
-              <div class="flex w-full flex-col gap-4">
-                {@render children()}
-              </div>
-            {/if}
+          {#if children}
+            <div class="flex w-full flex-col gap-4">
+              {@render children()}
+            </div>
+          {/if}
 
-            <div class={buttonContainer()}>
-              <Button
-                type="button"
-                variant="text"
-                data-cy="dialogue-cancel"
-                onclick={() => (open = false)}
-              >
-                {cancelText}
-              </Button>
+          <div class={buttonContainer()}>
+            <Button
+              type="button"
+              variant="text"
+              data-cy="dialogue-cancel"
+              onclick={() => (open = false)}
+            >
+              {cancelText}
+            </Button>
 
-              {#if delegateClose}
+            {#if delegateClose}
+              <Button type="submit" {disabled} {loading} data-cy="dialogue-confirm">
+                {confirmText}
+              </Button>
+            {:else}
+              <Dialog.Close>
                 <Button type="submit" {disabled} {loading} data-cy="dialogue-confirm">
                   {confirmText}
                 </Button>
-              {:else}
-                <Dialog.Close>
-                  <Button type="submit" {disabled} {loading} data-cy="dialogue-confirm">
-                    {confirmText}
-                  </Button>
-                </Dialog.Close>
-              {/if}
-            </div>
-          </form>
-        {/if}
+              </Dialog.Close>
+            {/if}
+          </div>
+        </form>
       {/snippet}
     </Dialog.Content>
   </Dialog.Portal>

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',