@noxlovette/material 0.3.2 → 0.4.0

package/dist/components/misc/dicebearStyles.js

@@ -0,0 +1,169 @@
+import { OptionsDescriptor, Style } from '@dicebear/core';
+/**
+ * Every style shipped by `@dicebear/styles` (v10). Kept as the single source of
+ * truth for the `DicebearStyle` type in `types.ts` — extend this list first when
+ * DiceBear adds a new style, everything else derives from it.
+ */
+export const DICEBEAR_STYLES = [
+    'adventurer',
+    'adventurer-neutral',
+    'avataaars',
+    'avataaars-neutral',
+    'big-ears',
+    'big-ears-neutral',
+    'big-smile',
+    'blobs',
+    'bottts',
+    'bottts-neutral',
+    'cameo',
+    'clay',
+    'constellation',
+    'critters',
+    'croodles',
+    'croodles-neutral',
+    'cutouts',
+    'disco',
+    'dylan',
+    'fun-emoji',
+    'gaze',
+    'glass',
+    'glyphs',
+    'icons',
+    'identicon',
+    'initial-face',
+    'initials',
+    'landscape',
+    'line-face',
+    'loops',
+    'lorelei',
+    'lorelei-neutral',
+    'marbles',
+    'micah',
+    'miniavs',
+    'moods',
+    'notionists',
+    'notionists-neutral',
+    'open-peeps',
+    'patchwork',
+    'personas',
+    'pixel-art',
+    'pixel-art-neutral',
+    'pixelbot',
+    'planets',
+    'rings',
+    'shadows',
+    'shape-grid',
+    'shapes',
+    'slice',
+    'sprouts',
+    'squircles',
+    'stack',
+    'stripes',
+    'thumbs',
+    'toon-head',
+    'triangles',
+    'voxel-art',
+    'voxel-bot',
+    'waves',
+    'weave'
+];
+/**
+ * One dynamic `import()` per style, written out literally (not a template
+ * expression) so every bundler — Vite, Rollup, webpack, esbuild — can
+ * statically analyze and code-split each style into its own lazily-loaded
+ * chunk. A generated/templated import here would defeat that analysis.
+ */
+// Not annotated with an explicit `StyleDefinition` return type: TS widens the enum-like string
+// literals inside each imported JSON module (e.g. element `type`) to `string`, which doesn't
+// structurally satisfy `StyleDefinition`'s literal unions. `Style` is happy to accept the
+// as-imported shape directly (it validates the real JSON against DiceBear's schema at runtime).
+const styleLoaders = {
+    adventurer: () => import('@dicebear/styles/adventurer.json'),
+    'adventurer-neutral': () => import('@dicebear/styles/adventurer-neutral.json'),
+    avataaars: () => import('@dicebear/styles/avataaars.json'),
+    'avataaars-neutral': () => import('@dicebear/styles/avataaars-neutral.json'),
+    'big-ears': () => import('@dicebear/styles/big-ears.json'),
+    'big-ears-neutral': () => import('@dicebear/styles/big-ears-neutral.json'),
+    'big-smile': () => import('@dicebear/styles/big-smile.json'),
+    blobs: () => import('@dicebear/styles/blobs.json'),
+    bottts: () => import('@dicebear/styles/bottts.json'),
+    'bottts-neutral': () => import('@dicebear/styles/bottts-neutral.json'),
+    cameo: () => import('@dicebear/styles/cameo.json'),
+    clay: () => import('@dicebear/styles/clay.json'),
+    constellation: () => import('@dicebear/styles/constellation.json'),
+    critters: () => import('@dicebear/styles/critters.json'),
+    croodles: () => import('@dicebear/styles/croodles.json'),
+    'croodles-neutral': () => import('@dicebear/styles/croodles-neutral.json'),
+    cutouts: () => import('@dicebear/styles/cutouts.json'),
+    disco: () => import('@dicebear/styles/disco.json'),
+    dylan: () => import('@dicebear/styles/dylan.json'),
+    'fun-emoji': () => import('@dicebear/styles/fun-emoji.json'),
+    gaze: () => import('@dicebear/styles/gaze.json'),
+    glass: () => import('@dicebear/styles/glass.json'),
+    glyphs: () => import('@dicebear/styles/glyphs.json'),
+    icons: () => import('@dicebear/styles/icons.json'),
+    identicon: () => import('@dicebear/styles/identicon.json'),
+    'initial-face': () => import('@dicebear/styles/initial-face.json'),
+    initials: () => import('@dicebear/styles/initials.json'),
+    landscape: () => import('@dicebear/styles/landscape.json'),
+    'line-face': () => import('@dicebear/styles/line-face.json'),
+    loops: () => import('@dicebear/styles/loops.json'),
+    lorelei: () => import('@dicebear/styles/lorelei.json'),
+    'lorelei-neutral': () => import('@dicebear/styles/lorelei-neutral.json'),
+    marbles: () => import('@dicebear/styles/marbles.json'),
+    micah: () => import('@dicebear/styles/micah.json'),
+    miniavs: () => import('@dicebear/styles/miniavs.json'),
+    moods: () => import('@dicebear/styles/moods.json'),
+    notionists: () => import('@dicebear/styles/notionists.json'),
+    'notionists-neutral': () => import('@dicebear/styles/notionists-neutral.json'),
+    'open-peeps': () => import('@dicebear/styles/open-peeps.json'),
+    patchwork: () => import('@dicebear/styles/patchwork.json'),
+    personas: () => import('@dicebear/styles/personas.json'),
+    'pixel-art': () => import('@dicebear/styles/pixel-art.json'),
+    'pixel-art-neutral': () => import('@dicebear/styles/pixel-art-neutral.json'),
+    pixelbot: () => import('@dicebear/styles/pixelbot.json'),
+    planets: () => import('@dicebear/styles/planets.json'),
+    rings: () => import('@dicebear/styles/rings.json'),
+    shadows: () => import('@dicebear/styles/shadows.json'),
+    'shape-grid': () => import('@dicebear/styles/shape-grid.json'),
+    shapes: () => import('@dicebear/styles/shapes.json'),
+    slice: () => import('@dicebear/styles/slice.json'),
+    sprouts: () => import('@dicebear/styles/sprouts.json'),
+    squircles: () => import('@dicebear/styles/squircles.json'),
+    stack: () => import('@dicebear/styles/stack.json'),
+    stripes: () => import('@dicebear/styles/stripes.json'),
+    thumbs: () => import('@dicebear/styles/thumbs.json'),
+    'toon-head': () => import('@dicebear/styles/toon-head.json'),
+    triangles: () => import('@dicebear/styles/triangles.json'),
+    'voxel-art': () => import('@dicebear/styles/voxel-art.json'),
+    'voxel-bot': () => import('@dicebear/styles/voxel-bot.json'),
+    waves: () => import('@dicebear/styles/waves.json'),
+    weave: () => import('@dicebear/styles/weave.json')
+};
+const styleCache = new Map();
+/** Lazily imports and validates a style definition, caching the resulting `Style` instance. */
+export function loadDicebearStyle(name) {
+    let cached = styleCache.get(name);
+    if (!cached) {
+        cached = styleLoaders[name]().then((mod) => new Style(mod.default));
+        styleCache.set(name, cached);
+    }
+    return cached;
+}
+const descriptorCache = new Map();
+/** Lazily builds the `OptionsDescriptor` JSON for a style, describing every option it accepts. */
+export function loadDicebearOptionsDescriptor(name) {
+    let cached = descriptorCache.get(name);
+    if (!cached) {
+        cached = loadDicebearStyle(name).then((style) => new OptionsDescriptor(style).toJSON());
+        descriptorCache.set(name, cached);
+    }
+    return cached;
+}
+/** Turns a style name like `big-ears-neutral` into `Big Ears Neutral`. */
+export function formatDicebearStyleLabel(name) {
+    return name
+        .split('-')
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join(' ');
+}

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

@@ -1,3 +1,6 @@
+export * from './DicebearAvatarBuilder.js';
+export * from './dicebearStyles.js';
+export * from './materialAvatarPalette.js';
 export * from './theme.js';
 export * from './types.js';
 export { default as Avatar } from './Avatar.svelte';

package/dist/components/misc/index.js

@@ -1,5 +1,8 @@
 // THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
 // re-export TS/JS modules from this folder
+export * from './DicebearAvatarBuilder.js';
+export * from './dicebearStyles.js';
+export * from './materialAvatarPalette.js';
 export * from './theme.js';
 export * from './types.js';
 // default exports for components in this folder

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

@@ -0,0 +1,6 @@
+/**
+ * Reads the current app's resolved container-tier color tokens as hex strings, for use as
+ * DiceBear's `backgroundColor` option. Falls back to a neutral default outside the browser
+ * (SSR) or before the theme stylesheet has painted.
+ */
+export declare function getMaterialAvatarPalette(): string[];

package/dist/components/misc/materialAvatarPalette.js

@@ -0,0 +1,44 @@
+/**
+ * Container-tier M3 color roles (see `styles/theme/*.css`) used as a generated avatar's
+ * background. Deliberately NOT a fixed hex list: every consuming app picks its own source
+ * color (`ThemeConfig.sourceColor` in `theme.svelte.ts`), which the M3 dynamic color
+ * algorithm expands into these tokens as real `--color-md-sys-color-*` custom properties on
+ * `:root` — reading them live is what makes the avatar match that app's actual palette
+ * instead of this library's own hardcoded pastel.
+ */
+const CONTAINER_TOKENS = [
+    '--color-md-sys-color-primary-container',
+    '--color-md-sys-color-secondary-container',
+    '--color-md-sys-color-tertiary-container',
+    '--color-md-sys-color-error-container',
+    '--color-md-sys-color-surface-container-highest'
+];
+/** Used server-side, or if a token hasn't been painted yet (styles not loaded). */
+const FALLBACK_PALETTE = ['e9ddff', 'e8def8', 'ffd9e3', 'ffdad6', 'e6e0e9'];
+/** Converts the `rgb(r g b)` (or `rgb(r, g, b)`) format these tokens are always defined in to hex. */
+function rgbStringToHex(value) {
+    const channels = value.match(/\d+(?:\.\d+)?/g);
+    if (!channels || channels.length < 3)
+        return undefined;
+    return channels
+        .slice(0, 3)
+        .map((n) => Math.round(Math.max(0, Math.min(255, parseFloat(n))))
+        .toString(16)
+        .padStart(2, '0'))
+        .join('');
+}
+/**
+ * Reads the current app's resolved container-tier color tokens as hex strings, for use as
+ * DiceBear's `backgroundColor` option. Falls back to a neutral default outside the browser
+ * (SSR) or before the theme stylesheet has painted.
+ */
+export function getMaterialAvatarPalette() {
+    if (typeof window === 'undefined')
+        return FALLBACK_PALETTE;
+    const styles = getComputedStyle(document.documentElement);
+    const palette = CONTAINER_TOKENS.map((token) => {
+        const raw = styles.getPropertyValue(token).trim();
+        return raw ? rgbStringToHex(raw) : undefined;
+    }).filter((hex) => Boolean(hex));
+    return palette.length > 0 ? palette : FALLBACK_PALETTE;
+}

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

@@ -1,5 +1,11 @@
 export declare const avatar: import("tailwind-variants").TVReturnType<{
     size: {
+        xxs: {
+            root: string;
+        };
+        xs: {
+            root: string;
+        };
         sm: {
             root: string;
         };
@@ -17,6 +23,12 @@ export declare const avatar: import("tailwind-variants").TVReturnType<{
     button: string;
 }, undefined, {
     size: {
+        xxs: {
+            root: string;
+        };
+        xs: {
+            root: string;
+        };
         sm: {
             root: string;
         };
@@ -32,8 +44,14 @@ export declare const avatar: import("tailwind-variants").TVReturnType<{
     image: string;
     fallback: string;
     button: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     size: {
+        xxs: {
+            root: string;
+        };
+        xs: {
+            root: string;
+        };
         sm: {
             root: string;
         };
@@ -49,4 +67,4 @@ export declare const avatar: import("tailwind-variants").TVReturnType<{
     image: string;
     fallback: string;
     button: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

package/dist/components/misc/theme.js

@@ -3,11 +3,17 @@ export const avatar = tv({
     slots: {
         root: 'relative flex aspect-square shrink-0 items-center justify-center overflow-hidden rounded-full',
         image: 'h-full w-full object-cover',
-        fallback: 'flex h-full w-full items-center justify-center rounded-full bg-surface-container-highest',
-        button: 'relative rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary'
+        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'
     },
     variants: {
         size: {
+            xxs: {
+                root: 'size-5'
+            },
+            xs: {
+                root: 'size-8'
+            },
             sm: {
                 root: 'size-12'
             },
@@ -20,6 +26,6 @@ export const avatar = tv({
         }
     },
     defaultVariants: {
-        size: 'lg'
+        size: 'md'
     }
 });

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

@@ -1,9 +1,13 @@
 import type { Avatar as AvatarPrimitive } from 'bits-ui';
 import type { VariantProps } from 'tailwind-variants';
+import type { DicebearStyleName } from './dicebearStyles.js';
 import type { avatar } from './theme.js';
 export type AvatarVariants = VariantProps<typeof avatar>;
-/** Dicebear (https://www.dicebear.com) avatar styles available for the generated fallback avatar. */
-export type DicebearStyle = 'shapes' | 'adventurer' | 'adventurer-neutral' | 'avataaars' | 'avataaars-neutral' | 'big-ears' | 'big-ears-neutral' | 'big-smile' | 'bottts' | 'bottts-neutral' | 'croodles' | 'croodles-neutral' | 'dylan' | 'fun-emoji' | 'glass' | 'icons' | 'identicon' | 'initials' | 'lorelei' | 'lorelei-neutral' | 'micah' | 'miniavs' | 'notionists' | 'notionists-neutral' | 'open-peeps' | 'personas' | 'pixel-art' | 'pixel-art-neutral' | 'rings' | 'thumbs';
+/**
+ * Dicebear (https://www.dicebear.com) avatar styles available for the generated fallback
+ * avatar. Derived from `DICEBEAR_STYLES` in `dicebearStyles.ts` — extend the list there.
+ */
+export type DicebearStyle = DicebearStyleName;
 export type AvatarProps = AvatarPrimitive.RootProps & {
     /** The URL of the avatar image. If null or undefined, a generated avatar will be used. */
     src?: string | null;
@@ -13,6 +17,20 @@ export type AvatarProps = AvatarPrimitive.RootProps & {
     seed?: string;
     /** The Dicebear style used for the generated fallback avatar. @default 'shapes' */
     dicebearStyle?: DicebearStyle;
+    /**
+     * Hex background colors (no `#`) for the generated fallback avatar. Defaults to the
+     * current app's own M3 container-tier tokens (`getMaterialAvatarPalette()`), read live
+     * from CSS custom properties — every app's tokens differ since they derive from that
+     * app's own chosen source color, so the fallback isn't a fixed palette.
+     */
+    backgroundColor?: string[];
+    /**
+     * DiceBear variant tags for the generated fallback avatar, e.g. `['animation']` to opt a
+     * 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
+     */
+    tags?: string[];
     /** 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.stories.svelte

@@ -7,7 +7,7 @@
     title: 'Navigation/App Bar',
     component: AppBar,
     parameters: {
-      // AppBar is the mobile top bar (md:hidden) — preview it at a mobile viewport.
+      // AppBar is fixed across all screen sizes — preview it at a mobile viewport.
       viewport: { defaultViewport: 'mobile1' }
     },
     argTypes: {

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

@@ -5,6 +5,11 @@ Material 3 App Bar.
 Top app bars provide content and actions related to the current screen.
 They’re used for branding, screen titles, navigation, and actions.
 
+Publishes its measured height as `--appbar-height` on the document root, so any
+`Pane`/`PaneGrid` on the page (`full`, the default) shrinks its `min-height` by
+that amount with no props or wiring on either side — see Pane.svelte's doc
+comment.
+
 @see https://m3.material.io/components/top-app-bar/overview
 -->
 <script lang="ts">
@@ -19,6 +24,7 @@ They’re used for branding, screen titles, navigation, and actions.
     trailing,
     leading,
     class: className,
+    rowClass,
     showBack,
     ghost = false,
     ...rest
@@ -26,12 +32,15 @@ They’re used for branding, screen titles, navigation, and actions.
 
   let scrollY = $state(0);
   let scrolled = $derived(scrollY > 10);
+  let barHeight = $state(64);
 
   const noTrailing = $derived(!trailing);
   const noLeading = $derived(!leading || !showBack);
 
   const {
     base,
+    row,
+    childrenRow,
     ghost: ghostCls,
     title: titleCLs,
     textContainer,
@@ -40,26 +49,48 @@ They’re used for branding, screen titles, navigation, and actions.
     trailing: trailingCls
   } = $derived(appbar({ scrolled, noLeading, noTrailing }));
   const navClass = $derived(base({ class: clsx(className) }));
+  const rowFull = $derived(row({ class: clsx(rowClass) }));
+
+  function trackHeight(node: HTMLElement) {
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      barHeight = entry?.contentRect.height ?? barHeight;
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }
+
+  $effect(() => {
+    document.documentElement.style.setProperty('--appbar-height', `${barHeight}px`);
+    return () => document.documentElement.style.removeProperty('--appbar-height');
+  });
 </script>
 
 <svelte:window bind:scrollY />
 
-<nav {...rest} class={navClass}>
-  <div class={leadingCls()}>
-    {@render leading?.()}
-  </div>
-  <div class={textContainer()}>
-    <h1 class={titleCLs()}>
-      {title}
-    </h1>
-    {#if subtitle}
-      <p class={subtitleCls()}>{subtitle}</p>
-    {/if}
-  </div>
-  <div class={trailingCls()}>
-    {@render trailing?.()}
+<nav {...rest} class={navClass} {@attach trackHeight}>
+  <div class={rowFull}>
+    <div class={leadingCls()}>
+      {@render leading?.()}
+    </div>
+    <div class={textContainer()}>
+      <h1 class={titleCLs()}>
+        {title}
+      </h1>
+      {#if subtitle}
+        <p class={subtitleCls()}>{subtitle}</p>
+      {/if}
+    </div>
+    <div class={trailingCls()}>
+      {@render trailing?.()}
+    </div>
   </div>
+  {#if children}
+    <div class={childrenRow()}>
+      {@render children()}
+    </div>
+  {/if}
 </nav>
 {#if ghost}
-  <div class={ghostCls()} aria-hidden="true"></div>
+  <div class={ghostCls()} style="height: {barHeight}px" aria-hidden="true"></div>
 {/if}

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

@@ -5,6 +5,11 @@ import type { AppBarProps } from './types.js';
  * Top app bars provide content and actions related to the current screen.
  * They’re used for branding, screen titles, navigation, and actions.
  *
+ * Publishes its measured height as `--appbar-height` on the document root, so any
+ * `Pane`/`PaneGrid` on the page (`full`, the default) shrinks its `min-height` by
+ * that amount with no props or wiring on either side — see Pane.svelte's doc
+ * comment.
+ *
  * @see https://m3.material.io/components/top-app-bar/overview
  */
 declare const AppBar: import("svelte").Component<AppBarProps, {}, "">;

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

@@ -10,23 +10,25 @@ export declare const appbar: import("tailwind-variants").TVReturnType<{
         };
     };
     searchContainer: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
     noTrailing: {
         true: {
             textContainer: string;
         };
-        false: string;
+        false: "";
     };
     noLeading: {
         true: {
             textContainer: string;
         };
-        false: string;
+        false: "";
     };
 }, {
     base: string;
+    row: string;
+    childrenRow: string;
     ghost: string;
     textContainer: string;
     title: string;
@@ -43,30 +45,32 @@ export declare const appbar: import("tailwind-variants").TVReturnType<{
         };
     };
     searchContainer: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
     noTrailing: {
         true: {
             textContainer: string;
         };
-        false: string;
+        false: "";
     };
     noLeading: {
         true: {
             textContainer: string;
         };
-        false: string;
+        false: "";
     };
 }, {
     base: string;
+    row: string;
+    childrenRow: string;
     ghost: string;
     textContainer: string;
     title: string;
     subtitle: string;
     leading: string;
     trailing: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     scrolled: {
         true: {
             base: string;
@@ -76,27 +80,29 @@ export declare const appbar: import("tailwind-variants").TVReturnType<{
         };
     };
     searchContainer: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
     noTrailing: {
         true: {
             textContainer: string;
         };
-        false: string;
+        false: "";
     };
     noLeading: {
         true: {
             textContainer: string;
         };
-        false: string;
+        false: "";
     };
 }, {
     base: string;
+    row: string;
+    childrenRow: string;
     ghost: string;
     textContainer: string;
     title: string;
     subtitle: string;
     leading: string;
     trailing: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

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

@@ -1,18 +1,22 @@
 import { tv } from 'tailwind-variants';
 export const appbar = tv({
     slots: {
-        base: 'h-16 py-1 fixed top-0 left-0 w-full md:hidden flex z-40 items-center justify-between',
-        ghost: 'h-16 w-full shrink-0 md:hidden pointer-events-none',
+        base: 'fixed top-0 left-0 w-full flex flex-col z-30',
+        row: 'h-16 py-1 flex w-full items-center justify-between',
+        childrenRow: 'w-full px-2 pb-2',
+        ghost: 'w-full shrink-0 pointer-events-none',
         textContainer: 'flex flex-col items-start gap-0.5 grow',
         title: 'text-md-sys-color-on-surface md-sys-typescale-title-large line-clamp-1   capitalize ',
         subtitle: 'text-md-sys-color-on-surface-variant md-sys-typescale-label-medium',
         leading: 'text-md-sys-color-on-surface ml-0.5',
-        trailing: 'text-md-sys-color-on-surface-variant mr-4'
+        trailing: 'text-md-sys-color-on-surface-variant mr-4 md:mr-6 lg:mr-8'
     },
     variants: {
         scrolled: {
-            true: { base: 'shadow-elevation-2 bg-md-sys-color-surface-container' },
-            false: { base: 'shadow-elevation-0 bg-md-sys-color-surface' }
+            true: { base: 'shadow-elevation-1 bg-md-sys-color-surface-container' },
+            false: {
+                base: 'shadow-elevation-0 bg-md-sys-color-surface md:bg-md-sys-color-surface-container'
+            }
         },
         searchContainer: {
             true: '',
@@ -20,13 +24,13 @@ export const appbar = tv({
         },
         noTrailing: {
             true: {
-                textContainer: 'pr-2'
+                textContainer: 'pr-4 md:pr-6 lg:pr-8'
             },
             false: ''
         },
         noLeading: {
             true: {
-                textContainer: 'pl-6'
+                textContainer: 'pl-4 md:pl-6 lg:pl-8'
             },
             false: ''
         }

package/dist/components/nav/appbar/types.d.ts

@@ -5,7 +5,7 @@ import type { AppbarVariants } from './theme.js';
  * Props for the AppBar component.
  */
 export type AppBarProps = AppbarVariants & HTMLAttributes<HTMLElementTagNameMap['nav']> & {
-    /** The content to be rendered inside the app bar. */
+    /** Extra content rendered in a full-width row below the title, e.g. a Breadcrumb trail. */
     children?: Snippet;
     /** The main title of the app bar. */
     title: string;
@@ -19,4 +19,6 @@ export type AppBarProps = AppbarVariants & HTMLAttributes<HTMLElementTagNameMap[
     showBack?: boolean;
     /** Renders an invisible same-height spacer after the fixed bar so page content isn't obscured. */
     ghost?: boolean;
+    /** Additional classes passed onto the row element */
+    rowClass?: string;
 };