@noxlovette/material 0.6.0 → 0.7.0

package/dist/components/forms/toggle-group/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const toggleGroup = tv({
     slots: {
         root: 'inline-flex h-spacing-500 overflow-hidden rounded-full border border-md-sys-color-outline'

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type TooltipVariants = VariantProps<typeof tooltip>;
 export declare const tooltip: import("tailwind-variants").TVReturnType<{
     variant: {

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

@@ -1,7 +1,7 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const tooltip = tv({
     slots: {
-        base: 'min-w-60 py-spacing-150 px-spacing-200  shadow-elevation-2 rounded-md relative z-[100] pointer-events-auto',
+        base: 'min-w-60 py-spacing-150 px-spacing-200  shadow-elevation-2 rounded-md relative z-layer-popup pointer-events-auto',
         subhead: '',
         supportingText: '',
         textContainer: '',

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/ThemeSwitcher.svelte

@@ -6,7 +6,7 @@
   let open = $state(false);
 </script>
 
-<div class="right-spacing-200 bottom-spacing-200 fixed z-50 hidden md:block">
+<div class="right-spacing-200 bottom-spacing-200 z-layer-fab fixed hidden md:block">
   <Popover bind:open title="Theme Settings" side="top" align="end" sideOffset={16}>
     {#snippet trigger(triggerProps)}
       <FAB iconProps={{ name: 'palette' }} {...triggerProps} />

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 'tailwind-variants';
+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/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 import type { Breakpoint } from '../../containers/pane/theme.js';
 export type AppbarVariants = VariantProps<typeof appbar>;
 export type AppBarSize = 'small' | 'medium' | 'large';

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

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 /*
   M3 Expressive app bar (https://m3.material.io/components/app-bars/specs), laid out on one
   3-column grid (leading · text · trailing) so the size can change per breakpoint in CSS alone:
@@ -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-30 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',

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type BreadcrumbVariants = VariantProps<typeof breadcrumb>;
 export declare const breadcrumb: import("tailwind-variants").TVReturnType<{
     color: {

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

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const breadcrumb = tv({
     slots: {
         base: 'flex',

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 + '/'));
+}

package/dist/components/nav/navbar/NavbarItem.svelte

@@ -6,12 +6,14 @@ A single destination within a navigation bar.
 -->
 <script lang="ts">
   import { page } from '$app/state';
+  import { base as appBase } from '$app/paths';
   import type { NavItemProps } from './types.js';
   import { navitem } from './theme.js';
   import { Icon, Layer } 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 = '/',
@@ -23,12 +25,7 @@ A single destination within a navigation bar.
     ...rest
   }: NavItemProps = $props();
 
-  const isActive = $derived(
-    selected ||
-      page.url.pathname === href ||
-      (href !== '/' && page.url.href.startsWith(href)) ||
-      page.url.href == href
-  );
+  const isActive = $derived(selected || isCurrentRoute(href, page.url, appBase));
 
   const {
     base,

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

@@ -2,18 +2,18 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
+            fab?: import("tailwind-variants").ClassValue;
             items?: import("tailwind-variants").ClassValue;
             ghost?: import("tailwind-variants").ClassValue;
-            fab?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
+            fab?: import("tailwind-variants").ClassValue;
             items?: import("tailwind-variants").ClassValue;
             ghost?: import("tailwind-variants").ClassValue;
-            fab?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -25,9 +25,9 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
+            fab?: import("tailwind-variants").ClassValue;
             items?: import("tailwind-variants").ClassValue;
             ghost?: import("tailwind-variants").ClassValue;
-            fab?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {

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

@@ -1,7 +1,7 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const navbar = tv({
     slots: {
-        base: 'shadow-elevation-2 bg-md-sys-color-surface-container relative z-20 flex h-20 fixed bottom-spacing-0 w-full left-spacing-0 justify-around py-spacing-150 md:hidden',
+        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',
         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'