@noxlovette/material 0.9.0 → 0.9.1

package/dist/animation/presence.svelte.js

@@ -27,12 +27,14 @@ const fromTo = (from, to) => Object.fromEntries(Object.entries(to).map(([key, va
 export const presence = (isOpen, transition, onExitComplete) => (node) => {
     let controls;
     let started = false;
+    let settleTimer;
     if (transition.origin)
         node.style.transformOrigin = transition.origin;
     $effect(() => {
         const open = isOpen();
         untrack(() => {
             const { hidden, shown, exited = hidden, enter, exit } = transition;
+            clearTimeout(settleTimer);
             if (open) {
                 controls = animate(node, started ? shown : fromTo(hidden, shown), enter);
             }
@@ -42,11 +44,45 @@ export const presence = (isOpen, transition, onExitComplete) => (node) => {
                     if (controls === current)
                         onExitComplete?.();
                 });
+                settleTimer = setTimeout(() => {
+                    if (controls === current)
+                        settle(node);
+                }, exitDeadline(current));
             }
             started = true;
         });
     });
-    return () => controls?.stop();
+    return () => {
+        clearTimeout(settleTimer);
+        controls?.stop();
+    };
+};
+/*
+  bits-ui unmounts its content only once every animation on it has settled, and `Presence` once
+  Motion's exit resolves. On touch devices a closed menu was reported staying mounted, one per
+  open, stacking up (#53): some animation on the node never settled. So once the exit has had its
+  time, whatever is still running or paused there is finished (or cancelled, if it can't be),
+  which settles bits-ui's wait and the exit's promise.
+*/
+const EXIT_DEADLINE_MARGIN_MS = 150;
+const EXIT_DEADLINE_FALLBACK_MS = 1000;
+const exitDeadline = (controls) => {
+    const seconds = controls.duration;
+    return Number.isFinite(seconds) && seconds > 0
+        ? seconds * 1000 + EXIT_DEADLINE_MARGIN_MS
+        : EXIT_DEADLINE_FALLBACK_MS;
+};
+const settle = (node) => {
+    for (const animation of node.getAnimations?.() ?? []) {
+        if (animation.playState === 'finished')
+            continue;
+        try {
+            animation.finish();
+        }
+        catch {
+            animation.cancel();
+        }
+    }
 };
 /**
  * Keeps an element mounted until its exit animation finishes — the Motion replacement for a

package/dist/animation/sharedAxisTransition.d.ts

@@ -64,7 +64,8 @@ export declare const lateral: (update: () => void | Promise<void>, { target, axi
  * instead of `lateral` there.
  *
  * Not built into `Navbar`/`Rail`: they don't own the content region that changes, so the app wraps
- * its own route change in this.
+ * its own route change in this. They, the AppBar and a docked Toolbar stay still and on top while
+ * it runs; give a fixed floating Toolbar or FAB the `md-vt-persist` class for the same (motion.css).
  *
  * The `target` region swaps its box instantly instead of sliding or resizing to the new page's:
  * that movement would be exactly the spatial connection this pattern avoids, and after a

package/dist/animation/sharedAxisTransition.js

@@ -2,8 +2,25 @@ import { animateView } from 'motion';
 import { prefersReducedMotion } from './reducedMotion.js';
 import { springTokens, springTransition } from './spring.js';
 const SHARED_AXIS_OFFSET_PX = 30;
+/* While a navigation transition runs, `.md-vt-persist` chrome (Navbar, Rail, AppBar, …) gets
+   its own static layer above the page's (motion.css). Counted, since transitions queue. */
+const NAVIGATING = 'md-navigation-transition';
+let navigating = 0;
+const markNavigating = (builder) => {
+    const root = document.documentElement;
+    navigating++;
+    root.classList.add(NAVIGATING);
+    new Promise((resolve, reject) => builder.then ? builder.then(resolve, reject) : resolve(undefined))
+        .then((animation) => animation?.finished)
+        .catch(() => { })
+        .finally(() => {
+        if (--navigating === 0)
+            root.classList.remove(NAVIGATING);
+    });
+};
 const view = (update, target, spring) => {
     const builder = animateView(update, springTransition(spring));
+    markNavigating(builder);
     return target ? builder.add(target) : builder;
 };
 /* Outgoing content clears quickly; incoming content waits a beat so the two never overlap fully.
@@ -117,7 +134,8 @@ export const lateral = (update, { target, axis = 'x', direction = 'forward', spr
  * instead of `lateral` there.
  *
  * Not built into `Navbar`/`Rail`: they don't own the content region that changes, so the app wraps
- * its own route change in this.
+ * its own route change in this. They, the AppBar and a docked Toolbar stay still and on top while
+ * it runs; give a fixed floating Toolbar or FAB the `md-vt-persist` class for the same (motion.css).
  *
  * The `target` region swaps its box instantly instead of sliding or resizing to the new page's:
  * that movement would be exactly the spatial connection this pattern avoids, and after a

package/dist/components/buttons/FAB.svelte

@@ -343,7 +343,10 @@ Floating action buttons (FABs) help people take primary actions.
         surfaceOpen && 'invisible',
         // In its footprint, pinned to the top trailing corner the close button shares.
         withMenu &&
-          neverExpanded && ['col-start-1 row-start-1 self-start justify-self-end', footprint[size]],
+          neverExpanded && [
+            'col-start-1 row-start-1 self-start justify-self-end',
+            !open && footprint[size]
+          ],
         className
       )
     })}

package/dist/components/buttons/theme.d.ts

@@ -443,7 +443,8 @@ export declare const fab: import("tailwind-variants").TVReturnType<{
     };
     /**
      * The FAB menu's open state: the FAB becomes the round close button, label shut. Its size and
-     * corners spring to 56dp round in FAB.svelte.
+     * corners spring to 56dp round in FAB.svelte; the classes hold that box once the spring
+     * settles, so the button can't fall back to its content width (#49: a 24×56 pill).
      */
     menuOpen: {
         true: {
@@ -509,7 +510,8 @@ export declare const fab: import("tailwind-variants").TVReturnType<{
     };
     /**
      * The FAB menu's open state: the FAB becomes the round close button, label shut. Its size and
-     * corners spring to 56dp round in FAB.svelte.
+     * corners spring to 56dp round in FAB.svelte; the classes hold that box once the spring
+     * settles, so the button can't fall back to its content width (#49: a 24×56 pill).
      */
     menuOpen: {
         true: {
@@ -575,7 +577,8 @@ export declare const fab: import("tailwind-variants").TVReturnType<{
     };
     /**
      * The FAB menu's open state: the FAB becomes the round close button, label shut. Its size and
-     * corners spring to 56dp round in FAB.svelte.
+     * corners spring to 56dp round in FAB.svelte; the classes hold that box once the spring
+     * settles, so the button can't fall back to its content width (#49: a 24×56 pill).
      */
     menuOpen: {
         true: {

package/dist/components/buttons/theme.js

@@ -276,11 +276,12 @@ export const fab = tv({
         },
         /**
          * The FAB menu's open state: the FAB becomes the round close button, label shut. Its size and
-         * corners spring to 56dp round in FAB.svelte.
+         * corners spring to 56dp round in FAB.svelte; the classes hold that box once the spring
+         * settles, so the button can't fall back to its content width (#49: a 24×56 pill).
          */
         menuOpen: {
             true: {
-                base: 'justify-center px-spacing-0',
+                base: 'justify-center px-spacing-0 size-spacing-700 rounded-[1.75rem]',
                 icon: 'size-spacing-250 text-[20px]',
                 labelTrack: 'grid-cols-[0fr]!'
             },

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

@@ -2,7 +2,7 @@ import { tv } from '../../../utils/tv.js';
 export const contextMenu = tv({
     slots: {
         content: `
-      z-layer-popup min-w-48 max-w-sm gap-spacing-50 overflow-y-auto rounded-lg
+      z-layer-popup outline-none 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
     `,
@@ -10,14 +10,14 @@ export const contextMenu = tv({
       rounded-sm relative flex w-full cursor-pointer select-none items-center gap-spacing-100
       px-spacing-150 py-spacing-100 text-left md-sys-typescale-body-large text-md-sys-color-on-surface
       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-[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-spacing-100
       px-spacing-150 py-spacing-100 text-left md-sys-typescale-body-large text-md-sys-color-on-surface
       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-[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
     `,
@@ -36,7 +36,7 @@ export const contextMenu = tv({
         },
         color: {
             error: {
-                item: 'text-md-sys-color-error hover:bg-md-sys-color-error/8 data-[highlighted]:bg-md-sys-color-error/8',
+                item: 'text-md-sys-color-error data-[highlighted]:bg-md-sys-color-error/8',
                 icon: 'text-md-sys-color-error'
             }
         }

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

@@ -20,6 +20,7 @@ Contrast with `MenuItem` (a single interactive row inside the panel) and
   import { DropdownMenu } from 'bits-ui';
   import clsx from 'clsx';
   import Button from '../../buttons/Button.svelte';
+  import { menu } from './theme.js';
   import type { MenuProps } from './types.js';
 
   let {
@@ -49,11 +50,7 @@ Contrast with `MenuItem` (a single interactive row inside the panel) and
         <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 gap-spacing-50 px-spacing-100 py-spacing-50 max-w-sm min-w-48 overflow-y-auto rounded-lg',
-              props.class as any,
-              contentClass
-            )}
+            class={clsx(menu().content(), props.class as any, contentClass)}
             {@attach presence(() => isOpen, enterExit.scale)}
           >
             {@render children()}

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

@@ -4,12 +4,14 @@ export const menu = tv({
         content: `
       bg-md-sys-color-surface-container-high shadow-elevation-3
       ring-md-sys-color-outline/10 max-w-sm min-w-48 gap-spacing-50
-      overflow-y-auto rounded-lg px-spacing-100 py-spacing-50
+      overflow-y-auto rounded-lg px-spacing-100 py-spacing-50 outline-none
     `,
+        // No `hover:` fill: bits-ui sets `data-highlighted` on mouse hover already,
+        // and a `:hover` tint sticks to the last-tapped row on touch screens (#48).
         item: `
       rounded-sm h-11 relative flex w-full cursor-pointer items-center gap-spacing-100 px-spacing-150 py-spacing-100
       md-sys-typescale-body-medium whitespace-nowrap text-md-sys-color-on-surface
-      hover:bg-md-sys-color-on-surface/8 data-[highlighted]:bg-md-sys-color-on-surface/8
+      data-[highlighted]:bg-md-sys-color-on-surface/8
       focus-visible:outline-2 focus-visible:outline-offset-2
       focus-visible:outline-md-sys-color-primary
       data-[disabled]:cursor-not-allowed data-[disabled]:opacity-38

package/dist/components/forms/search/SearchView.svelte

@@ -9,7 +9,8 @@ open a view from a bar of your own, passing that bar as `anchor`.
   from 24dp to 12dp) with results in a container 2dp below. `layout` takes one per window tier and
   defaults to full-screen on compact windows, docked from medium up. Switched in CSS.
 - **Motion.** Opening and closing are an M3 container transform between the bar and the view, on
-  the `spatial` spring; a crossfade under reduced motion.
+  the `spatial` spring; a crossfade under reduced motion. Following a result link closes it at
+  once, leaving the route change to the app's own transition.
 - **Behavior.** A bits-ui `Dialog`: focus stays in the view, the page doesn't scroll, and Esc, the
   back button or a click outside closes it. The field is a combobox over the `results` listbox:
   arrow keys move through the `role="option"` items and Enter picks one. Enter with no item
@@ -58,11 +59,19 @@ open a view from a bar of your own, passing that bar as `anchor`.
   let shown = $state(untrack(() => open));
   let view = $state<HTMLElement>();
   let busy = false;
+  // Closing because a result link was followed: no transform, and focus doesn't go back to the bar.
+  let leaving = false;
+
+  const detached = (target: HTMLElement | string | undefined) =>
+    !target || (typeof target !== 'string' && !target.isConnected);
 
   const sync = () => {
     if (busy || open === shown) return;
     const opening = open;
-    if (opening) measure();
+    if (opening) {
+      leaving = false;
+      measure();
+    }
     const update = async () => {
       // The view takes the bar's place: hidden, the bar isn't left behind in the page's snapshot
       // (a second, static bar under the morph). Shown again first on close, so focus can return.
@@ -77,8 +86,18 @@ open a view from a bar of your own, passing that bar as `anchor`.
       busy = false;
       sync();
     };
-    if (!from || !to) update().then(settle, settle);
-    else containerTransform(update, { from, to }).then(settle, settle);
+    // Without both ends on the page (the bar unmounted by a navigation) there is nothing to morph
+    // between; a transform that can't start must still close the view, or the Dialog keeps the
+    // page locked (#51).
+    if ((leaving && !opening) || detached(from) || detached(to)) {
+      update().then(settle, settle);
+      return;
+    }
+    try {
+      containerTransform(update, { from: from!, to: to! }).then(settle, settle);
+    } catch {
+      update().then(settle, settle);
+    }
   };
 
   $effect(() => {
@@ -185,10 +204,37 @@ open a view from a bar of your own, passing that bar as `anchor`.
   // Back to the bar's field. The bar opens on click or typing, never on focus, so this is safe.
   function focusBar(e: Event) {
     e.preventDefault();
+    // Following a result: the page is changing, and focusing a field would raise the keyboard.
+    if (leaving) {
+      leaving = false;
+      return;
+    }
     const field = anchor instanceof HTMLInputElement ? anchor : anchor?.querySelector('input');
     field?.focus();
   }
 
+  /*
+    Picking a result that is a link navigates away, so the view closes at once instead of morphing
+    back into a bar that's about to leave. A morph there would run alongside the route's own view
+    transition and, if the bar's page unmounts, never finish (#51). The click still reaches the
+    link, since the view unmounts only after this event. New-tab and download clicks keep it open.
+  */
+  $effect(() => {
+    const el = resultsEl;
+    if (!el) return;
+    const onclick = (e: MouseEvent) => {
+      if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
+        return;
+      const link = (e.target as Element | null)?.closest?.('a[href]');
+      if (!(link instanceof HTMLAnchorElement) || !el.contains(link)) return;
+      if ((link.target && link.target !== '_self') || link.hasAttribute('download')) return;
+      leaving = true;
+      open = false;
+    };
+    el.addEventListener('click', onclick);
+    return () => el.removeEventListener('click', onclick);
+  });
+
   function clear() {
     value = '';
     inputRef?.focus();

package/dist/components/forms/search/SearchView.svelte.d.ts

@@ -9,7 +9,8 @@ import type { SearchViewProps } from './types.js';
  * from 24dp to 12dp) with results in a container 2dp below. `layout` takes one per window tier and
  * defaults to full-screen on compact windows, docked from medium up. Switched in CSS.
  * - **Motion.** Opening and closing are an M3 container transform between the bar and the view, on
- * the `spatial` spring; a crossfade under reduced motion.
+ * the `spatial` spring; a crossfade under reduced motion. Following a result link closes it at
+ * once, leaving the route change to the app's own transition.
  * - **Behavior.** A bits-ui `Dialog`: focus stays in the view, the page doesn't scroll, and Esc, the
  * back button or a click outside closes it. The field is a combobox over the `results` listbox:
  * arrow keys move through the `role="option"` items and Enter picks one. Enter with no item

package/dist/components/nav/appbar/theme.js

@@ -122,7 +122,7 @@ export function appbarSize(size, hasSubtitle) {
 export const appbar = tv({
     slots: {
         // Starts beside a viewport-anchored Rail (styles/components.css), which runs full height.
-        base: 'fixed top-spacing-0 left-(--md-rail-inset) right-spacing-0 flex flex-col z-layer-bar transition-colors md-sys-motion-effects',
+        base: 'md-vt-persist fixed top-spacing-0 left-(--md-rail-inset) right-spacing-0 flex flex-col z-layer-bar transition-colors md-sys-motion-effects',
         row: 'grid w-full items-center px-spacing-50',
         childrenRow: 'w-full px-spacing-100 pb-spacing-100',
         ghost: 'w-full shrink-0 pointer-events-none',

package/dist/components/nav/navbar/theme.js

@@ -1,7 +1,7 @@
 import { tv } from '../../../utils/tv.js';
 export const navbar = tv({
     slots: {
-        base: 'shadow-elevation-2 bg-md-sys-color-surface-container z-layer-bar flex h-20 fixed bottom-spacing-0 w-full left-spacing-0 justify-around py-spacing-150 md:hidden',
+        base: 'md-vt-persist shadow-elevation-2 bg-md-sys-color-surface-container z-layer-bar flex h-20 fixed bottom-spacing-0 w-full left-spacing-0 justify-around py-spacing-150 md:hidden',
         items: 'flex justify-around w-full',
         fab: 'bottom-24 right-spacing-200 absolute',
         ghost: 'h-20 w-full shrink-0 md:hidden pointer-events-none'

package/dist/components/nav/rail/theme.js

@@ -34,7 +34,7 @@ export const rail = tv({
     variants: {
         anchor: {
             viewport: {
-                base: 'fixed top-[var(--rail-top,0px)] bottom-spacing-0 left-spacing-0',
+                base: 'md-vt-persist fixed top-[var(--rail-top,0px)] bottom-spacing-0 left-spacing-0',
                 scrim: 'fixed'
             },
             parent: {

package/dist/components/toolbar/theme.js

@@ -33,7 +33,10 @@ export const toolbar = tv({
         },
         variant: {
             floating: { root: 'inline-flex', segment: 'rounded-full shadow-elevation-1' },
-            docked: { root: 'fixed left-spacing-0 z-layer-bar w-full', segment: 'w-full rounded-none' }
+            docked: {
+                root: 'md-vt-persist fixed left-spacing-0 z-layer-bar w-full',
+                segment: 'w-full rounded-none'
+            }
         },
         color: {
             standard: { segment: 'bg-md-sys-color-surface-container' },

package/dist/styles/motion.css

@@ -371,3 +371,29 @@
   background-color: var(--md-container-transform-color, transparent);
   box-shadow: var(--md-container-transform-shadow, none);
 }
+
+/*
+  App chrome stays put through navigation transitions (#50). Motion's `animateView` puts the
+  `target` region (or the root) in its own layer, and the whole `::view-transition` tree paints
+  over the live page, so a fixed bar outside `main` was covered by `main`'s snapshots and a fixed
+  toolbar or FAB inside it faded and scaled with the page. `md-vt-persist` lifts an element
+  into its own layer that is drawn above the page's and never animates: the old snapshot is
+  hidden and the new one is the live element.
+
+  Scoped to the navigation helpers (sharedAxis, lateral, fadeThrough), which set
+  `md-navigation-transition` on the root while they run, so a container transform (the search
+  view) still grows over the Navbar instead of under it. Built into Navbar, viewport-anchored
+  Rail, AppBar and docked Toolbar; add the class to an app-positioned floating Toolbar or FAB.
+  Browsers without `match-element` fall back to the old behaviour.
+*/
+:root.md-navigation-transition .md-vt-persist {
+  view-transition-name: match-element;
+  view-transition-class: md-persist;
+}
+::view-transition-group(*.md-persist),
+::view-transition-new(*.md-persist) {
+  animation: none !important;
+}
+::view-transition-old(*.md-persist) {
+  display: none;
+}

package/dist/utils/Layer.svelte

@@ -194,7 +194,9 @@
       :global(input:disabled + .layer-container) > .tint,
       :global(:disabled) > .tint
     ) {
-      @media (hover: hover) {
+      /* pointer: fine too — some touch phones report hover: hover, and a
+         tapped element keeps :hover until the next tap elsewhere (#48). */
+      @media (hover: hover) and (pointer: fine) {
         &:is(:global(:hover) > .tint, :global(:active) > .tint) {
           opacity: 0.08;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "type": "module",
   "description": "A Material Design 3 component library for Svelte, built on Bits UI.",
   "keywords": [