@noxlovette/material 0.6.1 → 0.7.1

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

@@ -92,11 +92,22 @@ const marginClasses = {
         xl: 'xl:m-spacing-400'
     }
 };
+/*
+  A pane's flex-basis is its size along the grid's axis, so it depends on the direction. Each
+  Pane publishes the basis it wants in a row as --pane-basis (0 for a flexible pane, so flexible
+  siblings share the free space; its px width for a fixed one), and each tier here applies it to
+  the children: that basis in a row, `auto` in a column, where panes stack at their content
+  height. A basis of 0 in a column made a flexible pane exactly as tall as its min-height, with
+  the rest of its content clipped. The `*:` classes beat the Pane's own `basis-*`.
+*/
 const directionClasses = {
-    small: { row: 'flex-row', column: 'flex-col' },
-    medium: { row: 'md:flex-row', column: 'md:flex-col' },
-    large: { row: 'lg:flex-row', column: 'lg:flex-col' },
-    extraLarge: { row: 'xl:flex-row', column: 'xl:flex-col' }
+    small: { row: 'flex-row *:basis-(--pane-basis)', column: 'flex-col *:basis-auto' },
+    medium: { row: 'md:flex-row md:*:basis-(--pane-basis)', column: 'md:flex-col md:*:basis-auto' },
+    large: { row: 'lg:flex-row lg:*:basis-(--pane-basis)', column: 'lg:flex-col lg:*:basis-auto' },
+    extraLarge: {
+        row: 'xl:flex-row xl:*:basis-(--pane-basis)',
+        column: 'xl:flex-col xl:*:basis-auto'
+    }
 };
 const visibleFromClasses = {
     small: '',
@@ -167,9 +178,10 @@ export const pane = tv({
             lg: { content: 'gap-spacing-200' },
             xl: { content: 'gap-spacing-300' }
         },
+        // The basis outside a PaneGrid; inside one, the grid's direction sets it from --pane-basis.
         flexible: {
-            true: { base: 'min-w-spacing-0 grow basis-spacing-0' },
-            false: { base: 'shrink-0' }
+            true: { base: 'min-w-spacing-0 grow basis-spacing-0 [--pane-basis:0px]' },
+            false: { base: 'shrink-0 basis-(--pane-basis)' }
         },
         sticky: {
             true: {
@@ -178,6 +190,20 @@ export const pane = tv({
             false: ''
         }
     },
+    compoundVariants: [
+        /*
+          A full pane is a page that scrolls with the window, so its content ends 72dp (a 56dp FAB
+          plus its 16dp margin) above the pane's bottom edge instead of on the preset's bottom
+          padding. The last line can then scroll clear of a FAB (M3: keep a FAB from covering
+          content at the end of a scroll) and doesn't finish flush against the window edge. Each
+          tier restates it, since the presets set `md:py-*`/`lg:py-*`.
+        */
+        {
+            full: true,
+            padding: ['sm', 'md', 'lg'],
+            class: { content: 'pb-spacing-900 md:pb-spacing-900 lg:pb-spacing-900' }
+        }
+    ],
     defaultVariants: {
         rounded: true,
         flexible: true

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

@@ -4,20 +4,20 @@ 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;
+            close?: 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;
+            close?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -30,10 +30,10 @@ 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;
+            close?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {

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

@@ -251,10 +251,10 @@ export declare const dateCalendar: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             grid?: import("tailwind-variants").ClassValue;
-            row?: import("tailwind-variants").ClassValue;
-            surface?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
             nav?: import("tailwind-variants").ClassValue;
+            row?: import("tailwind-variants").ClassValue;
+            surface?: import("tailwind-variants").ClassValue;
             cell?: import("tailwind-variants").ClassValue;
             heading?: import("tailwind-variants").ClassValue;
             weekday?: import("tailwind-variants").ClassValue;
@@ -265,10 +265,10 @@ export declare const dateCalendar: import("tailwind-variants").TVReturnType<{
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             grid?: import("tailwind-variants").ClassValue;
-            row?: import("tailwind-variants").ClassValue;
-            surface?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
             nav?: import("tailwind-variants").ClassValue;
+            row?: import("tailwind-variants").ClassValue;
+            surface?: import("tailwind-variants").ClassValue;
             cell?: import("tailwind-variants").ClassValue;
             heading?: import("tailwind-variants").ClassValue;
             weekday?: import("tailwind-variants").ClassValue;
@@ -289,10 +289,10 @@ export declare const dateCalendar: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             grid?: import("tailwind-variants").ClassValue;
-            row?: import("tailwind-variants").ClassValue;
-            surface?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
             nav?: import("tailwind-variants").ClassValue;
+            row?: import("tailwind-variants").ClassValue;
+            surface?: import("tailwind-variants").ClassValue;
             cell?: import("tailwind-variants").ClassValue;
             heading?: import("tailwind-variants").ClassValue;
             weekday?: import("tailwind-variants").ClassValue;

package/dist/components/forms/checkbox/theme.js

@@ -1,7 +1,7 @@
 import { tv } from '../../../utils/tv.js';
 export const checkbox = tv({
     slots: {
-        root: 'group inline-flex min-h-spacing-500 select-none items-start gap-spacing-150 text-md-sys-color-on-surface min-h-4.5 cursor-pointer',
+        root: 'group inline-flex min-h-spacing-500 select-none items-start gap-spacing-150 text-md-sys-color-on-surface cursor-pointer',
         container: 'relative inline-flex size-[18px] shrink-0',
         control: 'layer-container absolute -inset-[11px] rounded-full text-md-sys-color-on-surface-variant state-layer before:rounded-full group-focus-visible:outline group-focus-visible:outline-3 group-focus-visible:outline-offset-2 group-focus-visible:outline-md-sys-color-secondary transition-colors md-sys-motion-fast-effects',
         box: 'absolute inset-[11px] rounded-[4px] border-2 border-current bg-md-sys-color-surface transition-colors md-sys-motion-fast-effects',

package/dist/components/forms/command/theme.d.ts

@@ -4,8 +4,8 @@ export declare const command: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             item?: import("tailwind-variants").ClassValue;
-            input?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
             group?: import("tailwind-variants").ClassValue;
             list?: import("tailwind-variants").ClassValue;
             separator?: import("tailwind-variants").ClassValue;
@@ -19,8 +19,8 @@ export declare const command: import("tailwind-variants").TVReturnType<{
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             item?: import("tailwind-variants").ClassValue;
-            input?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
             group?: import("tailwind-variants").ClassValue;
             list?: import("tailwind-variants").ClassValue;
             separator?: import("tailwind-variants").ClassValue;
@@ -45,8 +45,8 @@ export declare const command: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             item?: import("tailwind-variants").ClassValue;
-            input?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
             group?: import("tailwind-variants").ClassValue;
             list?: import("tailwind-variants").ClassValue;
             separator?: import("tailwind-variants").ClassValue;

package/dist/components/misc/Avatar.stories.svelte

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import Avatar from './Avatar.svelte';
+  import { shapeNames } from '../../animation/shapeMorph.svelte.js';
 
   const { Story } = defineMeta({
     title: 'Misc/Avatar',
@@ -9,18 +10,34 @@
     argTypes: {
       size: { control: 'select', options: ['sm', 'md', 'lg'] },
       seed: { control: 'text' },
-      dicebearStyle: { control: 'text' }
+      dicebearStyle: { control: 'text' },
+      shape: { control: 'select', options: shapeNames },
+      spin: { control: 'inline-radio', options: ['none', 'clockwise', 'counterclockwise'] }
     },
     args: {
       size: 'lg',
-      seed: 'ogonek'
+      seed: 'ogonek',
+      shape: 'circle',
+      spin: 'none'
     }
   });
 </script>
 
+<script lang="ts">
+  const morphShapes = ['circle', 'sunny', 'fourSidedCookie', 'pentagon', 'flower'] as const;
+  let morphIndex = $state(0);
+  const morphShape = $derived(morphShapes[morphIndex % morphShapes.length]);
+</script>
+
 <Story name="Playground">
   {#snippet template(args)}
-    <Avatar size={args.size} seed={args.seed} dicebearStyle={args.dicebearStyle} />
+    <Avatar
+      size={args.size}
+      seed={args.seed}
+      dicebearStyle={args.dicebearStyle}
+      shape={args.shape}
+      spin={args.spin}
+    />
   {/snippet}
 </Story>
 
@@ -55,10 +72,42 @@
   <Avatar seed="clickable" onclick={() => console.log('Avatar clicked')} />
 </Story>
 
-<Story name="Animated" asChild>
+<Story name="Styles" asChild>
+  <!-- gaze with the animation tag is the default; ['!animation'] forces the still variant. -->
   <div class="gap-spacing-200 flex items-end">
-    <Avatar seed="alice" dicebearStyle="gaze" tags={['animation']} />
-    <Avatar seed="bob" dicebearStyle="shapes" tags={['animation']} />
-    <Avatar seed="carol" dicebearStyle="blobs" tags={['animation']} />
+    <Avatar seed="alice" />
+    <Avatar seed="alice" tags={['!animation']} />
+    <Avatar seed="bob" dicebearStyle="shapes" />
+    <Avatar seed="carol" dicebearStyle="blobs" />
+  </div>
+</Story>
+
+<Story name="Shapes" asChild>
+  <div class="gap-spacing-200 grid grid-cols-5 sm:grid-cols-7">
+    {#each shapeNames as name (name)}
+      <Avatar size="md" seed={name} shape={name} title={name} />
+    {/each}
+  </div>
+</Story>
+
+<Story name="Shape morph" asChild>
+  <div class="gap-spacing-200 flex items-center">
+    <Avatar seed="morph" shape={morphShape} onclick={() => morphIndex++} />
+    <span class="md-sys-typescale-body-medium text-md-sys-color-on-surface-variant">
+      Click the avatar: {morphShape}
+    </span>
+  </div>
+</Story>
+
+<Story name="Spin" asChild>
+  <div class="gap-spacing-200 flex items-end">
+    <Avatar seed="clockwise" shape="sunny" spin="clockwise" />
+    <Avatar seed="counter" shape="eightLeafClover" spin="counterclockwise" />
+    <Avatar
+      seed="burst"
+      shape="softBurst"
+      spin="clockwise"
+      src="https://picsum.photos/seed/ogonek-2/200"
+    />
   </div>
 </Story>

package/dist/components/misc/Avatar.stories.svelte.d.ts

@@ -1,19 +1,4 @@
 import Avatar from './Avatar.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Avatar: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Avatar = InstanceType<typeof Avatar>;
+declare const Avatar: import("svelte").Component<Record<string, never>, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
 export default Avatar;

package/dist/components/misc/Avatar.svelte

@@ -2,11 +2,53 @@
 @component
 Avatars can be used to represent people or objects.
 
+The avatar is cut to one of the M3 Expressive shapes (`shape`, a circle by default), morphing on
+`fastSpatial` when the shape changes. `spin` turns the shape at a constant speed, clockwise or
+counterclockwise, while the picture inside stays upright.
+
 @see https://m3.material.io/components/avatars/overview
+@see https://m3.material.io/styles/shape
 -->
+<script module lang="ts">
+  import { animate } from 'motion';
+  import { prefersReducedMotion } from '../../animation/reducedMotion.js';
+
+  /*
+    One full turn of a spinning shape. A constant, linear spin has no spring to take from the
+    motion tokens, like the loading indicator's global rotation (4.666s a turn); an avatar is
+    decoration beside content, not a progress signal, so it turns about three times slower.
+  */
+  const SPIN_TURN_S = 14;
+
+  /*
+    The shapes sit in a 48 × 48 box with the circle spanning 8..40, so this maps the circle onto
+    the avatar's bounding box (clip-path objectBoundingBox units are 0..1). Wider shapes
+    (clamshell, the bursts) run to the avatar's edges.
+  */
+  const FIT = 'scale(0.03125) translate(-8 -8)';
+
+  /** Turns the clip path around the shape's centre; never under reduced motion (decorative). */
+  const spinClip = (path: SVGPathElement, direction: 'clockwise' | 'counterclockwise') => {
+    if (prefersReducedMotion()) return;
+    const sign = direction === 'clockwise' ? 1 : -1;
+    const controls = animate(0, 360, {
+      duration: SPIN_TURN_S,
+      ease: 'linear',
+      repeat: Infinity,
+      onUpdate: (deg) => path.setAttribute('transform', `${FIT} rotate(${sign * deg} 24 24)`)
+    });
+    return () => {
+      controls.stop();
+      path.setAttribute('transform', FIT);
+    };
+  };
+</script>
+
 <script lang="ts">
+  import { untrack } from 'svelte';
   import { Avatar as AvatarPrimitive } from 'bits-ui';
   import { Layer } from '../../utils/index.js';
+  import { animatableShapesSmall, shapeMorph } from '../../animation/shapeMorph.svelte.js';
   import { avatar } from './theme.js';
   import { DicebearAvatarBuilder } from './DicebearAvatarBuilder.js';
   import { getMaterialAvatarPalette } from './materialAvatarPalette.js';
@@ -16,9 +58,11 @@ Avatars can be used to represent people or objects.
     src,
     alt = 'User avatar',
     seed = 'ogonek',
-    dicebearStyle = 'shapes',
+    dicebearStyle = 'gaze',
     backgroundColor,
-    tags,
+    tags = ['animation'],
+    shape = 'circle',
+    spin = 'none',
     size = 'lg',
     loadingStatus = $bindable('loading'),
     class: className,
@@ -34,20 +78,25 @@ Avatars can be used to represent people or objects.
     lg: 96
   } as const;
 
+  const uid = $props.id();
+  const clipId = `m3-avatar-${uid}`;
+  // Rendered into the markup so SSR draws the shape; later changes morph from here.
+  const initialShape = untrack(() => animatableShapesSmall[shape]);
+
   let generatedAvatar = $state('');
 
   $effect(() => {
     const sizePx = sizeMap[size ?? 'lg'] ?? 96;
     const currentSeed = seed;
-    const currentStyle = dicebearStyle ?? 'shapes';
+    const currentStyle = dicebearStyle ?? 'gaze';
     const palette = backgroundColor ?? getMaterialAvatarPalette();
     const currentTags = tags;
     let cancelled = false;
 
+    // Square: the clip path gives the avatar its shape.
     const builder = new DicebearAvatarBuilder(currentStyle)
       .seed(currentSeed)
       .size(sizePx)
-      .borderRadius(50)
       .background(palette);
 
     if (currentTags) builder.tags(currentTags);
@@ -62,15 +111,33 @@ Avatars can be used to represent people or objects.
     };
   });
 
-  const { root, image, fallback, button } = $derived(avatar({ size }));
+  const { root, image, fallback, button, clip } = $derived(avatar({ size }));
 
   const rootClasses = $derived(root({ class: className }));
 </script>
 
+<svg class={clip()} aria-hidden="true">
+  <clipPath id={clipId} clipPathUnits="objectBoundingBox">
+    <path
+      d={initialShape}
+      transform={FIT}
+      {@attach shapeMorph(() => animatableShapesSmall[shape])}
+      {@attach (path: SVGPathElement) => (spin === 'none' ? undefined : spinClip(path, spin))}
+    />
+  </clipPath>
+</svg>
+
 {#if onclick}
   <button class={button({ class: rootClasses })} {onclick} type="button" data-cy="m3-avatar">
-    <Layer />
-    <AvatarPrimitive.Root {...rest} bind:loadingStatus class="h-full w-full">
+    <!-- The state layer sits inside the clipped root, so hover and press take the shape too. -->
+    <AvatarPrimitive.Root
+      {...rest}
+      bind:loadingStatus
+      class="relative h-full w-full"
+      style="clip-path: url(#{clipId})"
+      data-shape={shape}
+    >
+      <Layer />
       {#if src}
         <AvatarPrimitive.Image {src} {alt} class={image()} />
       {/if}
@@ -82,7 +149,14 @@ Avatars can be used to represent people or objects.
     </AvatarPrimitive.Root>
   </button>
 {:else}
-  <AvatarPrimitive.Root {...rest} bind:loadingStatus class={rootClasses} data-cy="m3-avatar">
+  <AvatarPrimitive.Root
+    {...rest}
+    bind:loadingStatus
+    class={rootClasses}
+    style="clip-path: url(#{clipId})"
+    data-cy="m3-avatar"
+    data-shape={shape}
+  >
     {#if src}
       <AvatarPrimitive.Image {src} {alt} class={image()} />
     {/if}

package/dist/components/misc/Avatar.svelte.d.ts

@@ -2,7 +2,12 @@ import type { AvatarProps } from './types.js';
 /**
  * Avatars can be used to represent people or objects.
  *
+ * The avatar is cut to one of the M3 Expressive shapes (`shape`, a circle by default), morphing on
+ * `fastSpatial` when the shape changes. `spin` turns the shape at a constant speed, clockwise or
+ * counterclockwise, while the picture inside stays upright.
+ *
  * @see https://m3.material.io/components/avatars/overview
+ * @see https://m3.material.io/styles/shape
  */
 declare const Avatar: import("svelte").Component<AvatarProps, {}, "loadingStatus">;
 type Avatar = ReturnType<typeof Avatar>;

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

@@ -21,6 +21,8 @@ export declare const avatar: import("tailwind-variants").TVReturnType<{
     image: string;
     fallback: string;
     button: string;
+    /** The zero-size SVG holding the shape's clip path. */
+    clip: string;
 }, undefined, {
     size: {
         xxs: {
@@ -44,6 +46,8 @@ export declare const avatar: import("tailwind-variants").TVReturnType<{
     image: string;
     fallback: string;
     button: string;
+    /** The zero-size SVG holding the shape's clip path. */
+    clip: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
     size: {
         xxs: {
@@ -67,4 +71,6 @@ export declare const avatar: import("tailwind-variants").TVReturnType<{
     image: string;
     fallback: string;
     button: string;
+    /** The zero-size SVG holding the shape's clip path. */
+    clip: string;
 }>>;

package/dist/components/misc/theme.js

@@ -1,10 +1,12 @@
 import { tv } from '../../utils/tv.js';
 export const avatar = tv({
     slots: {
-        root: 'relative flex aspect-square shrink-0 items-center justify-center overflow-hidden rounded-full',
+        root: 'relative flex aspect-square shrink-0 items-center justify-center overflow-hidden',
         image: 'h-full w-full object-cover',
-        fallback: 'flex h-full w-full items-center justify-center rounded-full bg-md-sys-color-surface-container-highest',
-        button: 'relative rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-md-sys-color-primary'
+        fallback: 'flex h-full w-full items-center justify-center bg-md-sys-color-surface-container-highest',
+        button: 'relative rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-md-sys-color-primary',
+        /** The zero-size SVG holding the shape's clip path. */
+        clip: 'pointer-events-none absolute size-spacing-0 overflow-hidden'
     },
     variants: {
         size: {

package/dist/components/misc/types.d.ts

@@ -1,3 +1,4 @@
+import type { ShapeName } from '../../animation/shapeMorph.svelte.js';
 import type { Avatar as AvatarPrimitive } from 'bits-ui';
 import type { VariantProps } from 'tailwind-variants';
 import type { DicebearStyleName } from './dicebearStyles.js';
@@ -15,7 +16,7 @@ export type AvatarProps = AvatarPrimitive.RootProps & {
     alt?: string;
     /** The seed for the generated avatar if no src is provided. */
     seed?: string;
-    /** The Dicebear style used for the generated fallback avatar. @default 'shapes' */
+    /** The Dicebear style used for the generated fallback avatar. @default 'gaze' */
     dicebearStyle?: DicebearStyle;
     /**
      * Hex background colors (no `#`) for the generated fallback avatar. Defaults to the
@@ -29,8 +30,23 @@ export type AvatarProps = AvatarPrimitive.RootProps & {
      * supporting style (`gaze`, `shapes`, `blobs`, …) into its animated variants, or
      * `['!animation']` to force the static one. A no-op for styles without that tag.
      * @see https://www.dicebear.com/guides/filter-variants-with-tags
+     * @default ['animation']
      */
     tags?: string[];
+    /**
+     * The M3 Expressive shape the avatar is cut to (`shapeNames` lists all 35). Changing it morphs
+     * the outline on the `fastSpatial` spring; under reduced motion it swaps instantly.
+     * @see https://m3.material.io/styles/shape
+     * @default 'circle'
+     */
+    shape?: ShapeName;
+    /**
+     * Turns the shape at a constant speed, one turn every 14s. Only the outline turns; the
+     * picture stays upright. Decorative, so reduced motion keeps it still. A circle looks the
+     * same at every angle, so pair this with another `shape`.
+     * @default 'none'
+     */
+    spin?: 'none' | 'clockwise' | 'counterclockwise';
     /** The loading status of the avatar image. */
     loadingStatus?: 'loading' | 'loaded' | 'error';
     /** Callback for when the avatar is clicked. If provided, the avatar is wrapped in a button. */

package/dist/components/nav/appbar/AppBar.svelte

@@ -17,6 +17,9 @@ Publishes its measured height as `--appbar-height` on the document root, so any
 that amount with no props or wiring on either side — see Pane.svelte's doc
 comment.
 
+A `ButtonIcon` anywhere inside it defaults to `variant="standard"`, per M3; pass
+`variant` to override.
+
 @see https://m3.material.io/components/app-bars/specs
 -->
 <script lang="ts">
@@ -24,6 +27,7 @@ comment.
   import type { AppBarProps } from './types.js';
   import clsx from 'clsx';
   import ButtonIcon from '../../buttons/ButtonIcon.svelte';
+  import { setButtonIconVariant } from '../../buttons/context.js';
 
   let {
     children,
@@ -48,6 +52,10 @@ comment.
     ...rest
   }: AppBarProps = $props();
 
+  // M3 app bar icon buttons are standard (no container); a filled one over-emphasizes a back or
+  // action button. Applies to buttons passed in `leading`/`trailing`/`children` too.
+  setButtonIconVariant('standard');
+
   let scrolled = $state(false);
   let barHeight = $state(64);
 

package/dist/components/nav/appbar/AppBar.svelte.d.ts

@@ -17,6 +17,9 @@ import type { AppBarProps } from './types.js';
  * that amount with no props or wiring on either side — see Pane.svelte's doc
  * comment.
  *
+ * A `ButtonIcon` anywhere inside it defaults to `variant="standard"`, per M3; pass
+ * `variant` to override.
+ *
  * @see https://m3.material.io/components/app-bars/specs
  */
 declare const AppBar: import("svelte").Component<AppBarProps, {}, "query">;

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

@@ -121,7 +121,8 @@ export function appbarSize(size, hasSubtitle) {
 }
 export const appbar = tv({
     slots: {
-        base: 'fixed top-spacing-0 left-spacing-0 w-full flex flex-col z-layer-bar transition-colors md-sys-motion-effects',
+        // 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',
         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',
@@ -140,12 +141,23 @@ export const appbar = tv({
             // 1fr side columns centre a small bar's title on the bar, not between uneven button groups.
             center: { row: 'grid-cols-[1fr_auto_1fr]', textContainer: 'items-center text-center' }
         },
+        /*
+          From medium up, a Pane rounds its top corners (md:rounded-t-*) and sits as a surface card
+          on the App's surface-container, beside a surface-container Rail. The bar is part of that
+          chrome there, so it stays surface-container whether scrolled or not: a surface bar
+          would read as a strip glued over the card, with the App's colour showing through the
+          pane's corners beneath it. Below medium the pane is flat and full-bleed, so the bar keeps
+          M3's surface → surface-container on-scroll change.
+        */
         scrolled: {
             true: {
                 base: 'bg-md-sys-color-surface-container',
                 search: 'bg-md-sys-color-surface-container-highest'
             },
-            false: { base: 'bg-md-sys-color-surface', search: 'bg-md-sys-color-surface-container' }
+            false: {
+                base: 'bg-md-sys-color-surface md:bg-md-sys-color-surface-container',
+                search: 'bg-md-sys-color-surface-container md:bg-md-sys-color-surface-container-highest'
+            }
         },
         // Search app bar: the search container fills the text column, 8dp from the buttons.
         searchContainer: {

package/dist/components/nav/currentRoute.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Whether a destination's `href` is the page at `url` or one of its descendants, for marking
+ * the current rail/navbar destination.
+ *
+ * The href resolves against the page, so a relative one works and one on another origin (a
+ * Storybook link on its own port, an external site) never matches, even when its path does.
+ * An in-page anchor (`#…`) is never a destination. A destination's own path matches its
+ * sub-pages too (`/guides` for `/guides/icons`), except the app's root (`/`, or SvelteKit's `base`
+ * path when the app is served from a sub-path), which would match everything.
+ */
+export declare function isCurrentRoute(href: string, url: URL, root?: string): boolean;

package/dist/components/nav/currentRoute.js

@@ -0,0 +1,28 @@
+/**
+ * Whether a destination's `href` is the page at `url` or one of its descendants, for marking
+ * the current rail/navbar destination.
+ *
+ * The href resolves against the page, so a relative one works and one on another origin (a
+ * Storybook link on its own port, an external site) never matches, even when its path does.
+ * An in-page anchor (`#…`) is never a destination. A destination's own path matches its
+ * sub-pages too (`/guides` for `/guides/icons`), except the app's root (`/`, or SvelteKit's `base`
+ * path when the app is served from a sub-path), which would match everything.
+ */
+export function isCurrentRoute(href, url, root = '/') {
+    if (!href || href.startsWith('#'))
+        return false;
+    let target;
+    try {
+        target = new URL(href, url);
+    }
+    catch {
+        return false;
+    }
+    if (target.origin !== url.origin)
+        return false;
+    const trim = (path) => (path.length > 1 ? path.replace(/\/+$/, '') : path);
+    const path = trim(target.pathname);
+    const current = trim(url.pathname);
+    const isRoot = path === '/' || path === trim(root || '/');
+    return current === path || (!isRoot && current.startsWith(path + '/'));
+}