@noxlovette/material 0.6.0 → 0.7.0

package/dist/components/nav/rail/RailItem.svelte

@@ -2,17 +2,23 @@
 @component
 Material 3 Navigation Rail Item.
 
-A single destination within a navigation rail.
-In mobile (navbar) mode the same item renders as a bottom-bar tab.
+A single destination within a navigation rail. Collapsed, the label sits under the icon;
+expanded, beside it inside the active indicator, and it moves between the two as the rail
+springs. The active icon fills, per M3's icon guidance.
 -->
 <script lang="ts">
   import { page } from '$app/state';
-  import { getContext } from 'svelte';
+  import { base } from '$app/paths';
+  import { getContext, untrack } from 'svelte';
+  import { animate, type AnimationPlaybackControls } from 'motion';
+  import { springTokens, springTransition } from '../../../animation/spring.js';
   import type { RailItemProps } from './types.js';
   import { railElement } from './theme.js';
-  import { Icon, Layer } from '../../../utils/index.js';
+  import { Icon } from '../../../utils/index.js';
   import Badge from '../../badge/Badge.svelte';
   import { NavigationMenu } from 'bits-ui';
+  import clsx from 'clsx';
+  import { isCurrentRoute } from '../currentRoute.js';
 
   let {
     href = '/',
@@ -27,12 +33,12 @@ In mobile (navbar) mode the same item renders as a bottom-bar tab.
     ...rest
   }: RailItemProps = $props();
 
-  const railCtx = getContext<{ collapsed: boolean } | undefined>('rail');
-  const railModeCtx = getContext<{ mobile: boolean } | undefined>('railMode');
-  const isMobile = $derived(railModeCtx?.mobile ?? false);
-
-  // Mobile items always render in collapsed (icon+label stacked) layout
-  const collapsed = $derived(isMobile ? true : (collapsedProp ?? railCtx?.collapsed ?? true));
+  const railCtx = getContext<{ collapsed: boolean; progress: number } | undefined>('rail');
+  /* The rail's expand progress (0–1); a `collapsed` prop pins this item to an end state. */
+  const progress = $derived(
+    collapsedProp !== undefined ? (collapsedProp ? 0 : 1) : (railCtx?.progress ?? 0)
+  );
+  const layout = $derived(progress < 0.5 ? 'top' : 'start');
 
   const isDisabled = $derived(!!disabled);
   const target = $derived(!isDisabled && external ? '_blank' : undefined);
@@ -40,49 +46,45 @@ In mobile (navbar) mode the same item renders as a bottom-bar tab.
   const hrefValue = $derived(isDisabled ? undefined : href);
   const ariaDisabled = $derived(isDisabled ? true : undefined);
   const tabIndex = $derived(isDisabled ? -1 : undefined);
-  const hrefPathname = $derived.by(() => {
-    try {
-      return new URL(href).pathname;
-    } catch {
-      return href;
-    }
-  });
-  const isActive = $derived(
-    selected ||
-      page.url.pathname === hrefPathname ||
-      (hrefPathname !== '/' && page.url.pathname.startsWith(hrefPathname + '/'))
-  );
-  const {
-    base,
-    content,
-    icon,
-    iconContainer,
-    label: labelClass
-  } = $derived(
-    railElement({
-      active: isActive,
-      expanded: !collapsed,
-      disabled: isDisabled,
-      mobile: isMobile
-    })
-  );
-  const rootClass = $derived([base(), className].filter(Boolean).join(' '));
+  const isActive = $derived(selected || isCurrentRoute(href, page.url, base));
+  const styles = $derived(railElement({ active: isActive, layout, disabled: isDisabled }));
 
-  const itemClass = $derived(
-    isMobile
-      ? 'flex h-full flex-1 justify-center'
-      : ['flex w-full items-center', collapsed && 'justify-center'].filter(Boolean).join(' ')
-  );
+  /*
+    The selected fill's size, 0 to 1, on fastSpatial: selecting grows it from the indicator's
+    centre out to its edges, deselecting shrinks it back (it may overshoot a little, as the
+    spring does). SSR and reduced motion render the end state.
+  */
+  let selection = $state(untrack(() => (isActive ? 1 : 0)));
+  let selectionSpring: AnimationPlaybackControls | undefined;
+  $effect(() => {
+    const target = isActive ? 1 : 0;
+    untrack(() => {
+      if (selection === target) return;
+      selectionSpring?.stop();
+      if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
+        selection = target;
+        return;
+      }
+      selectionSpring = animate(selection, target, {
+        ...springTransition(springTokens.fastSpatial),
+        onUpdate: (v) => (selection = v)
+      });
+    });
+    return () => selectionSpring?.stop();
+  });
 
-  function handleClick(event: MouseEvent) {
+  // Placed after {...rest}, so it forwards a consumer's onclick instead of replacing it.
+  function handleClick(event: MouseEvent & { currentTarget: HTMLAnchorElement }) {
     if (isDisabled) {
       event.preventDefault();
       event.stopPropagation();
+      return;
     }
+    rest.onclick?.(event);
   }
 </script>
 
-<NavigationMenu.Item class={itemClass}>
+<NavigationMenu.Item class="flex w-full">
   <NavigationMenu.Link active={isActive} href={hrefValue}>
     {#snippet child({ props })}
       <a
@@ -94,29 +96,84 @@ In mobile (navbar) mode the same item renders as a bottom-bar tab.
         aria-disabled={ariaDisabled}
         tabindex={tabIndex}
         onclick={handleClick}
-        class={rootClass}
+        class={styles.base({ class: clsx(className) })}
+        data-layout={layout}
+        style:--rail-p={collapsedProp !== undefined ? progress : undefined}
+        style:--rail-sel={selection}
       >
-        <div class={content()}>
-          <div class={iconContainer()}>
-            <Layer />
-            <!-- Badge offsets are measured from the icon's corner, not the indicator's. -->
-            <span class="relative inline-flex">
-              <Icon
-                {...iconProps}
-                class={icon()}
-                wght={isActive ? 600 : 400}
-                fill={isActive ? 1 : 0}
-              />
-              {#if badge}
-                <Badge size={badge === -1 ? 'sm' : 'lg'} number={badge} />
-              {/if}
-            </span>
-          </div>
-          <p class={labelClass()}>
-            {label}
-          </p>
-        </div>
+        <span class={styles.sizer()}>
+          <span class={styles.measure()} aria-hidden="true">{label}</span>
+          <span class={styles.indicator()}>
+            <span class={styles.fill()}></span>
+          </span>
+          <!-- Badge offsets are measured from the icon's corner, not the indicator's. -->
+          <span class={styles.icon()}>
+            <Icon {...iconProps} fill={isActive ? 1 : 0} />
+            {#if badge}
+              <Badge size={badge === -1 ? 'sm' : 'lg'} number={badge} />
+            {/if}
+          </span>
+          <span class={styles.label()}>{label}</span>
+        </span>
       </a>
     {/snippet}
   </NavigationMenu.Link>
 </NavigationMenu.Item>
+
+<style>
+  /*
+    Geometry, interpolated on --rail-p (the rail's expand progress, 0 collapsed to 1 expanded)
+    after Compose's AnimatedNavigationItem. The indicator stays anchored 20dp in and the icon
+    keeps its x, so nothing moves sideways; only the label changes sides, while invisible.
+    Coordinates are inside the sizer, which starts 20dp in and is as wide as the expanded pill.
+  */
+  .rail-item {
+    /* 64dp (6 + 32 + 4 + 16 label + 6) → 56dp */
+    height: calc(var(--spacing-spacing-800) - var(--spacing-spacing-100) * var(--rail-p, 0));
+  }
+
+  .rail-indicator {
+    /* 56×32, 6dp down → the full pill, 56dp tall */
+    top: calc(var(--spacing-spacing-75) * (1 - var(--rail-p, 0)));
+    width: calc(
+      var(--spacing-spacing-700) + (100% - var(--spacing-spacing-700)) * var(--rail-p, 0)
+    );
+    height: calc(var(--spacing-spacing-400) + var(--spacing-spacing-300) * var(--rail-p, 0));
+  }
+
+  /* Grows from the centre: full height, width and opacity on --rail-sel. */
+  .rail-fill {
+    inset-block: 0;
+    left: 50%;
+    width: calc(100% * var(--rail-sel, 0));
+    translate: -50% 0;
+    opacity: var(--rail-sel, 0);
+  }
+
+  .rail-icon {
+    /* 4dp into the indicator → centred in the 56dp pill */
+    top: calc(var(--spacing-spacing-125) + var(--spacing-spacing-75) * var(--rail-p, 0));
+  }
+
+  .rail-label {
+    /* Fades out to nothing at the halfway point and back in: 4(p − ½)². */
+    opacity: calc(4 * (var(--rail-p, 0) - 0.5) * (var(--rail-p, 0) - 0.5));
+  }
+
+  /* Under the indicator, centred on it. */
+  .rail-item[data-layout='top'] .rail-label {
+    top: calc(var(--spacing-spacing-75) + var(--spacing-spacing-400) + var(--spacing-spacing-50));
+    left: calc(var(--spacing-spacing-700) / 2);
+    translate: -50% 0;
+  }
+
+  /* Beside the icon, 8dp after it, sliding in from the left as it fades back. */
+  .rail-item[data-layout='start'] .rail-label {
+    top: 50%;
+    left: calc(
+      (var(--spacing-spacing-600) + var(--spacing-spacing-250)) * var(--rail-p, 0) -
+        var(--spacing-spacing-250)
+    );
+    translate: 0 -50%;
+  }
+</style>

package/dist/components/nav/rail/RailItem.svelte.d.ts

@@ -2,8 +2,9 @@ import type { RailItemProps } from './types.js';
 /**
  * Material 3 Navigation Rail Item.
  *
- * A single destination within a navigation rail.
- * In mobile (navbar) mode the same item renders as a bottom-bar tab.
+ * A single destination within a navigation rail. Collapsed, the label sits under the icon;
+ * expanded, beside it inside the active indicator, and it moves between the two as the rail
+ * springs. The active icon fills, per M3's icon guidance.
  */
 declare const RailItem: import("svelte").Component<RailItemProps, {}, "">;
 type RailItem = ReturnType<typeof RailItem>;

package/dist/components/nav/rail/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type RailVariants = VariantProps<typeof rail>;
 export type RailItemVariants = VariantProps<typeof railElement>;
 export declare const rail: import("tailwind-variants").TVReturnType<{
@@ -15,14 +15,19 @@ export declare const rail: import("tailwind-variants").TVReturnType<{
     expanded: {
         true: {
             base: string;
-            ghost: string;
+            scrim: string;
         };
         false: {
             base: string;
-            items: string;
-            ghost: string;
+            scrim: string;
         };
     };
+    header: {
+        true: {
+            nav: string;
+        };
+        false: {};
+    };
     rounded: {
         true: {
             base: string;
@@ -31,6 +36,9 @@ export declare const rail: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string;
+    header: string;
+    menu: string;
+    nav: string;
     items: string;
     ghost: string;
     scrim: string;
@@ -48,14 +56,19 @@ export declare const rail: import("tailwind-variants").TVReturnType<{
     expanded: {
         true: {
             base: string;
-            ghost: string;
+            scrim: string;
         };
         false: {
             base: string;
-            items: string;
-            ghost: string;
+            scrim: string;
         };
     };
+    header: {
+        true: {
+            nav: string;
+        };
+        false: {};
+    };
     rounded: {
         true: {
             base: string;
@@ -64,6 +77,9 @@ export declare const rail: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string;
+    header: string;
+    menu: string;
+    nav: string;
     items: string;
     ghost: string;
     scrim: string;
@@ -81,14 +97,19 @@ export declare const rail: import("tailwind-variants").TVReturnType<{
     expanded: {
         true: {
             base: string;
-            ghost: string;
+            scrim: string;
         };
         false: {
             base: string;
-            items: string;
-            ghost: string;
+            scrim: string;
         };
     };
+    header: {
+        true: {
+            nav: string;
+        };
+        false: {};
+    };
     rounded: {
         true: {
             base: string;
@@ -97,6 +118,9 @@ export declare const rail: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string;
+    header: string;
+    menu: string;
+    nav: string;
     items: string;
     ghost: string;
     scrim: string;
@@ -104,26 +128,18 @@ export declare const rail: import("tailwind-variants").TVReturnType<{
 export declare const railElement: import("tailwind-variants").TVReturnType<{
     active: {
         true: {
-            content: string;
-            label: string;
-            iconContainer: string;
+            icon: string;
         };
         false: {
-            content: string;
-            iconContainer: string;
+            icon: string;
+            label: string;
         };
     };
-    expanded: {
-        true: {
-            base: string;
-            content: string;
-            iconContainer: string;
+    layout: {
+        top: {
             label: string;
         };
-        false: {
-            base: string;
-            content: string;
-            iconContainer: string;
+        start: {
             label: string;
         };
     };
@@ -131,46 +147,33 @@ export declare const railElement: import("tailwind-variants").TVReturnType<{
         true: {
             base: string;
         };
-    };
-    mobile: {
-        true: {
-            base: string;
-            content: string;
-            iconContainer: string;
-            icon: string;
-            label: string;
+        false: {
+            indicator: string;
         };
-        false: {};
     };
 }, {
     base: string;
-    content: string;
-    iconContainer: string;
+    sizer: string;
+    measure: string;
+    indicator: string;
+    fill: string;
     icon: string;
     label: string;
 }, undefined, {
     active: {
         true: {
-            content: string;
-            label: string;
-            iconContainer: string;
+            icon: string;
         };
         false: {
-            content: string;
-            iconContainer: string;
+            icon: string;
+            label: string;
         };
     };
-    expanded: {
-        true: {
-            base: string;
-            content: string;
-            iconContainer: string;
+    layout: {
+        top: {
             label: string;
         };
-        false: {
-            base: string;
-            content: string;
-            iconContainer: string;
+        start: {
             label: string;
         };
     };
@@ -178,46 +181,33 @@ export declare const railElement: import("tailwind-variants").TVReturnType<{
         true: {
             base: string;
         };
-    };
-    mobile: {
-        true: {
-            base: string;
-            content: string;
-            iconContainer: string;
-            icon: string;
-            label: string;
+        false: {
+            indicator: string;
         };
-        false: {};
     };
 }, {
     base: string;
-    content: string;
-    iconContainer: string;
+    sizer: string;
+    measure: string;
+    indicator: string;
+    fill: string;
     icon: string;
     label: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
     active: {
         true: {
-            content: string;
-            label: string;
-            iconContainer: string;
+            icon: string;
         };
         false: {
-            content: string;
-            iconContainer: string;
+            icon: string;
+            label: string;
         };
     };
-    expanded: {
-        true: {
-            base: string;
-            content: string;
-            iconContainer: string;
+    layout: {
+        top: {
             label: string;
         };
-        false: {
-            base: string;
-            content: string;
-            iconContainer: string;
+        start: {
             label: string;
         };
     };
@@ -225,21 +215,16 @@ export declare const railElement: import("tailwind-variants").TVReturnType<{
         true: {
             base: string;
         };
-    };
-    mobile: {
-        true: {
-            base: string;
-            content: string;
-            iconContainer: string;
-            icon: string;
-            label: string;
+        false: {
+            indicator: string;
         };
-        false: {};
     };
 }, {
     base: string;
-    content: string;
-    iconContainer: string;
+    sizer: string;
+    measure: string;
+    indicator: string;
+    fill: string;
     icon: string;
     label: string;
 }>>;