@noxlovette/material 0.5.1 → 0.6.0

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

@@ -5,17 +5,25 @@ 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.
 
+Sizes: `small` (64dp, one line) and the Expressive `medium`/`large` flexible bars, whose
+headline block wraps and grows. `size` also takes one value per breakpoint
+(`{ small: 'small', large: 'large' }`), switched in CSS so server rendering needs no JS.
+`align="center"` centres the title. Setting `search` makes it a search app bar.
+
+The bar takes its on-scroll color once `scrollContainer` (default: the page) scrolls.
+
 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
+@see https://m3.material.io/components/app-bars/specs
 -->
 <script lang="ts">
-  import { appbar } from './theme.js';
+  import { appbar, appbarSize } from './theme.js';
   import type { AppBarProps } from './types.js';
   import clsx from 'clsx';
+  import ButtonIcon from '../../buttons/ButtonIcon.svelte';
 
   let {
     children,
@@ -27,31 +35,46 @@ comment.
     leading,
     class: className,
     rowClass,
-    showBack,
+    showBack = false,
+    onback = () => history.back(),
+    size = 'small',
+    align = 'start',
+    search,
+    query = $bindable(''),
+    searchProps,
+    searchTrailing,
+    scrollContainer,
     ghost = false,
     ...rest
   }: AppBarProps = $props();
 
-  let scrollY = $state(0);
-  let scrolled = $derived(scrollY > 10);
+  let scrolled = $state(false);
   let barHeight = $state(64);
 
-  const noTrailing = $derived(!trailing);
-  const noLeading = $derived(!leading || !showBack);
+  $effect(() => {
+    const target = scrollContainer ?? window;
+    const read = () =>
+      (scrolled = (scrollContainer ? scrollContainer.scrollTop : window.scrollY) > 10);
+    read();
+    target.addEventListener('scroll', read, { passive: true });
+    return () => target.removeEventListener('scroll', read);
+  });
+
+  const isSearch = $derived(search !== undefined);
+  const noLeading = $derived(!leading && !showBack);
 
-  const {
-    base,
-    row,
-    childrenRow,
-    ghost: ghostCls,
-    title: titleCLs,
-    textContainer,
-    subtitle: subtitleCls,
-    leading: leadingCls,
-    trailing: trailingCls
-  } = $derived(appbar({ scrolled, noLeading, noTrailing }));
-  const navClass = $derived(base({ class: clsx(className) }));
-  const rowFull = $derived(row({ class: clsx(rowClass) }));
+  const s = $derived(
+    appbar({
+      align: isSearch ? 'start' : align,
+      scrolled,
+      searchContainer: isSearch,
+      hasSearchTrailing: !!searchTrailing,
+      noLeading,
+      noTrailing: !trailing
+    })
+  );
+  // Search app bars are always the small, 64dp bar.
+  const sized = $derived(appbarSize(isSearch ? 'small' : size, !!subtitle));
 
   function trackHeight(node: HTMLElement) {
     const observer = new ResizeObserver((entries) => {
@@ -68,33 +91,63 @@ comment.
   });
 </script>
 
-<svelte:window bind:scrollY />
-
-<nav {...rest} class={navClass} {@attach trackHeight}>
-  <div class={rowFull}>
-    <div class={leadingCls()}>
-      {@render leading?.()}
+<nav {...rest} class={s.base({ class: clsx(className) })} {@attach trackHeight}>
+  <div class={s.row({ class: clsx(sized.row, rowClass) })}>
+    <div class={s.leading()}>
+      {#if leading}
+        {@render leading()}
+      {:else if showBack}
+        <ButtonIcon
+          variant="standard"
+          iconProps={{ name: 'arrow_back' }}
+          aria-label="Back"
+          onclick={onback}
+        />
+      {/if}
     </div>
-    <div class={textContainer()}>
-      <h1 class={titleCLs({ class: clsx(titleProps?.class) })} {...titleProps}>
-        {title}
-      </h1>
-      {#if subtitle}
-        <p class={subtitleCls({ class: clsx(subtitleProps?.class) })} {...subtitleProps}>
-          {subtitle}
-        </p>
+    <div class={s.textContainer({ class: sized.textContainer })}>
+      {#if isSearch}
+        {#if title}
+          <h1 {...titleProps} class={clsx('sr-only', titleProps?.class)}>{title}</h1>
+        {/if}
+        <label class={s.search()}>
+          <input
+            type="search"
+            {...searchProps}
+            placeholder={search}
+            aria-label={searchProps?.['aria-label'] ?? search}
+            bind:value={query}
+            class={s.searchInput({ class: clsx(searchProps?.class) })}
+          />
+          {#if searchTrailing}
+            <span class={s.searchTrailing()}>{@render searchTrailing()}</span>
+          {/if}
+        </label>
+      {:else}
+        <h1 {...titleProps} class={s.title({ class: clsx(sized.title, titleProps?.class) })}>
+          {title}
+        </h1>
+        {#if subtitle}
+          <p
+            {...subtitleProps}
+            class={s.subtitle({ class: clsx(sized.subtitle, subtitleProps?.class) })}
+          >
+            {subtitle}
+          </p>
+        {/if}
       {/if}
     </div>
-    <div class={trailingCls()}>
+    <div class={s.trailing()}>
       {@render trailing?.()}
     </div>
   </div>
   {#if children}
-    <div class={childrenRow()}>
+    <div class={s.childrenRow()}>
       {@render children()}
     </div>
   {/if}
 </nav>
+
 {#if ghost}
-  <div class={ghostCls()} style="height: {barHeight}px" aria-hidden="true"></div>
+  <div class={s.ghost()} style="height: {barHeight}px" aria-hidden="true"></div>
 {/if}

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

@@ -5,13 +5,20 @@ 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.
  *
+ * Sizes: `small` (64dp, one line) and the Expressive `medium`/`large` flexible bars, whose
+ * headline block wraps and grows. `size` also takes one value per breakpoint
+ * (`{ small: 'small', large: 'large' }`), switched in CSS so server rendering needs no JS.
+ * `align="center"` centres the title. Setting `search` makes it a search app bar.
+ *
+ * The bar takes its on-scroll color once `scrollContainer` (default: the page) scrolls.
+ *
  * 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
+ * @see https://m3.material.io/components/app-bars/specs
  */
-declare const AppBar: import("svelte").Component<AppBarProps, {}, "">;
+declare const AppBar: import("svelte").Component<AppBarProps, {}, "query">;
 type AppBar = ReturnType<typeof AppBar>;
 export default AppBar;

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

@@ -1,30 +1,54 @@
 import { type VariantProps } from 'tailwind-variants';
+import type { Breakpoint } from '../../containers/pane/theme.js';
 export type AppbarVariants = VariantProps<typeof appbar>;
+export type AppBarSize = 'small' | 'medium' | 'large';
+/**
+ * Resolves `size` (one value, or one per breakpoint like `PaneGrid`'s props) into per-slot
+ * classes. Sizes cascade upward from the smallest breakpoint given, like Tailwind prefixes.
+ */
+export declare function appbarSize(size: AppBarSize | Partial<Record<Breakpoint, AppBarSize>>, hasSubtitle: boolean): Record<'row' | 'textContainer' | 'title' | 'subtitle', string>;
 export declare const appbar: import("tailwind-variants").TVReturnType<{
+    align: {
+        start: {
+            row: string;
+            textContainer: string;
+        };
+        center: {
+            row: string;
+            textContainer: string;
+        };
+    };
     scrolled: {
         true: {
             base: string;
+            search: string;
         };
         false: {
             base: string;
+            search: string;
         };
     };
     searchContainer: {
-        true: "";
-        false: "";
-    };
-    noTrailing: {
         true: {
+            row: string;
             textContainer: string;
         };
         false: "";
     };
-    noLeading: {
+    hasSearchTrailing: {
         true: {
-            textContainer: string;
+            search: string;
         };
         false: "";
     };
+    noTrailing: {
+        true: "";
+        false: "";
+    };
+    noLeading: {
+        true: "";
+        false: "";
+    };
 }, {
     base: string;
     row: string;
@@ -35,31 +59,51 @@ export declare const appbar: import("tailwind-variants").TVReturnType<{
     subtitle: string;
     leading: string;
     trailing: string;
+    search: string;
+    searchInput: string;
+    searchTrailing: string;
 }, undefined, {
+    align: {
+        start: {
+            row: string;
+            textContainer: string;
+        };
+        center: {
+            row: string;
+            textContainer: string;
+        };
+    };
     scrolled: {
         true: {
             base: string;
+            search: string;
         };
         false: {
             base: string;
+            search: string;
         };
     };
     searchContainer: {
-        true: "";
-        false: "";
-    };
-    noTrailing: {
         true: {
+            row: string;
             textContainer: string;
         };
         false: "";
     };
-    noLeading: {
+    hasSearchTrailing: {
         true: {
-            textContainer: string;
+            search: string;
         };
         false: "";
     };
+    noTrailing: {
+        true: "";
+        false: "";
+    };
+    noLeading: {
+        true: "";
+        false: "";
+    };
 }, {
     base: string;
     row: string;
@@ -70,31 +114,51 @@ export declare const appbar: import("tailwind-variants").TVReturnType<{
     subtitle: string;
     leading: string;
     trailing: string;
+    search: string;
+    searchInput: string;
+    searchTrailing: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
+    align: {
+        start: {
+            row: string;
+            textContainer: string;
+        };
+        center: {
+            row: string;
+            textContainer: string;
+        };
+    };
     scrolled: {
         true: {
             base: string;
+            search: string;
         };
         false: {
             base: string;
+            search: string;
         };
     };
     searchContainer: {
-        true: "";
-        false: "";
-    };
-    noTrailing: {
         true: {
+            row: string;
             textContainer: string;
         };
         false: "";
     };
-    noLeading: {
+    hasSearchTrailing: {
         true: {
-            textContainer: string;
+            search: string;
         };
         false: "";
     };
+    noTrailing: {
+        true: "";
+        false: "";
+    };
+    noLeading: {
+        true: "";
+        false: "";
+    };
 }, {
     base: string;
     row: string;
@@ -105,4 +169,7 @@ export declare const appbar: import("tailwind-variants").TVReturnType<{
     subtitle: string;
     leading: string;
     trailing: string;
+    search: string;
+    searchInput: string;
+    searchTrailing: string;
 }>>;

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

@@ -1,38 +1,174 @@
 import { tv } from 'tailwind-variants';
+/*
+  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:
+  - small: 64dp, one row, title between the buttons.
+  - medium/large flexible: an actions row (8dp top, 48dp) above a headline block spanning all
+    columns (16dp inset, 12dp bottom) that wraps and grows; min height 112/120dp, or 136/152dp
+    with a subtitle.
+  4dp container padding and 0 gap between 48dp icon buttons throughout. Every class below is a
+  literal so the Tailwind scanner sees it; `appbarSize` picks them per breakpoint.
+*/
+const sizeClasses = {
+    small: {
+        small: {
+            row: 'grid-rows-[4rem] pt-spacing-0 min-h-spacing-800',
+            rowSubtitle: '',
+            textContainer: 'col-start-2 col-span-1 row-start-1 self-center ps-(--lead) pe-(--trail) pt-spacing-0 pb-spacing-0',
+            title: 'md-sys-typescale-title-large line-clamp-1',
+            subtitle: 'md-sys-typescale-label-medium line-clamp-1'
+        },
+        medium: {
+            row: 'grid-rows-[3rem_1fr] pt-spacing-100 min-h-28',
+            rowSubtitle: 'min-h-34',
+            textContainer: 'col-start-1 col-span-3 row-start-2 self-end ps-spacing-200 pe-spacing-200 pt-spacing-50 pb-spacing-150',
+            title: 'md-sys-typescale-headline-medium line-clamp-none',
+            subtitle: 'md-sys-typescale-title-small line-clamp-none'
+        },
+        large: {
+            row: 'grid-rows-[3rem_1fr] pt-spacing-100 min-h-30',
+            rowSubtitle: 'min-h-38',
+            textContainer: 'col-start-1 col-span-3 row-start-2 self-end ps-spacing-200 pe-spacing-200 pt-spacing-50 pb-spacing-150',
+            title: 'md-sys-typescale-display-small line-clamp-none',
+            subtitle: 'md-sys-typescale-title-medium line-clamp-none'
+        }
+    },
+    medium: {
+        small: {
+            row: 'md:grid-rows-[4rem] md:pt-spacing-0 md:min-h-spacing-800',
+            rowSubtitle: '',
+            textContainer: 'md:col-start-2 md:col-span-1 md:row-start-1 md:self-center md:ps-(--lead) md:pe-(--trail) md:pt-spacing-0 md:pb-spacing-0',
+            title: 'md:md-sys-typescale-title-large md:line-clamp-1',
+            subtitle: 'md:md-sys-typescale-label-medium md:line-clamp-1'
+        },
+        medium: {
+            row: 'md:grid-rows-[3rem_1fr] md:pt-spacing-100 md:min-h-28',
+            rowSubtitle: 'md:min-h-34',
+            textContainer: 'md:col-start-1 md:col-span-3 md:row-start-2 md:self-end md:ps-spacing-200 md:pe-spacing-200 md:pt-spacing-50 md:pb-spacing-150',
+            title: 'md:md-sys-typescale-headline-medium md:line-clamp-none',
+            subtitle: 'md:md-sys-typescale-title-small md:line-clamp-none'
+        },
+        large: {
+            row: 'md:grid-rows-[3rem_1fr] md:pt-spacing-100 md:min-h-30',
+            rowSubtitle: 'md:min-h-38',
+            textContainer: 'md:col-start-1 md:col-span-3 md:row-start-2 md:self-end md:ps-spacing-200 md:pe-spacing-200 md:pt-spacing-50 md:pb-spacing-150',
+            title: 'md:md-sys-typescale-display-small md:line-clamp-none',
+            subtitle: 'md:md-sys-typescale-title-medium md:line-clamp-none'
+        }
+    },
+    large: {
+        small: {
+            row: 'lg:grid-rows-[4rem] lg:pt-spacing-0 lg:min-h-spacing-800',
+            rowSubtitle: '',
+            textContainer: 'lg:col-start-2 lg:col-span-1 lg:row-start-1 lg:self-center lg:ps-(--lead) lg:pe-(--trail) lg:pt-spacing-0 lg:pb-spacing-0',
+            title: 'lg:md-sys-typescale-title-large lg:line-clamp-1',
+            subtitle: 'lg:md-sys-typescale-label-medium lg:line-clamp-1'
+        },
+        medium: {
+            row: 'lg:grid-rows-[3rem_1fr] lg:pt-spacing-100 lg:min-h-28',
+            rowSubtitle: 'lg:min-h-34',
+            textContainer: 'lg:col-start-1 lg:col-span-3 lg:row-start-2 lg:self-end lg:ps-spacing-200 lg:pe-spacing-200 lg:pt-spacing-50 lg:pb-spacing-150',
+            title: 'lg:md-sys-typescale-headline-medium lg:line-clamp-none',
+            subtitle: 'lg:md-sys-typescale-title-small lg:line-clamp-none'
+        },
+        large: {
+            row: 'lg:grid-rows-[3rem_1fr] lg:pt-spacing-100 lg:min-h-30',
+            rowSubtitle: 'lg:min-h-38',
+            textContainer: 'lg:col-start-1 lg:col-span-3 lg:row-start-2 lg:self-end lg:ps-spacing-200 lg:pe-spacing-200 lg:pt-spacing-50 lg:pb-spacing-150',
+            title: 'lg:md-sys-typescale-display-small lg:line-clamp-none',
+            subtitle: 'lg:md-sys-typescale-title-medium lg:line-clamp-none'
+        }
+    },
+    extraLarge: {
+        small: {
+            row: 'xl:grid-rows-[4rem] xl:pt-spacing-0 xl:min-h-spacing-800',
+            rowSubtitle: '',
+            textContainer: 'xl:col-start-2 xl:col-span-1 xl:row-start-1 xl:self-center xl:ps-(--lead) xl:pe-(--trail) xl:pt-spacing-0 xl:pb-spacing-0',
+            title: 'xl:md-sys-typescale-title-large xl:line-clamp-1',
+            subtitle: 'xl:md-sys-typescale-label-medium xl:line-clamp-1'
+        },
+        medium: {
+            row: 'xl:grid-rows-[3rem_1fr] xl:pt-spacing-100 xl:min-h-28',
+            rowSubtitle: 'xl:min-h-34',
+            textContainer: 'xl:col-start-1 xl:col-span-3 xl:row-start-2 xl:self-end xl:ps-spacing-200 xl:pe-spacing-200 xl:pt-spacing-50 xl:pb-spacing-150',
+            title: 'xl:md-sys-typescale-headline-medium xl:line-clamp-none',
+            subtitle: 'xl:md-sys-typescale-title-small xl:line-clamp-none'
+        },
+        large: {
+            row: 'xl:grid-rows-[3rem_1fr] xl:pt-spacing-100 xl:min-h-30',
+            rowSubtitle: 'xl:min-h-38',
+            textContainer: 'xl:col-start-1 xl:col-span-3 xl:row-start-2 xl:self-end xl:ps-spacing-200 xl:pe-spacing-200 xl:pt-spacing-50 xl:pb-spacing-150',
+            title: 'xl:md-sys-typescale-display-small xl:line-clamp-none',
+            subtitle: 'xl:md-sys-typescale-title-medium xl:line-clamp-none'
+        }
+    }
+};
+/**
+ * Resolves `size` (one value, or one per breakpoint like `PaneGrid`'s props) into per-slot
+ * classes. Sizes cascade upward from the smallest breakpoint given, like Tailwind prefixes.
+ */
+export function appbarSize(size, hasSubtitle) {
+    const tiers = typeof size === 'string' ? { small: size } : { small: 'small', ...size };
+    const pick = (slot) => Object.entries(tiers)
+        .map(([bp, s]) => sizeClasses[bp][s][slot])
+        .join(' ');
+    return {
+        row: `${pick('row')} ${hasSubtitle ? pick('rowSubtitle') : ''}`,
+        textContainer: pick('textContainer'),
+        title: pick('title'),
+        subtitle: pick('subtitle')
+    };
+}
 export const appbar = tv({
     slots: {
-        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',
+        base: 'fixed top-spacing-0 left-spacing-0 w-full flex flex-col z-30 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',
-        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 md:mr-6 lg:mr-8'
+        textContainer: 'flex min-w-spacing-0 flex-col gap-spacing-25 [--lead:0.25rem] [--trail:0.25rem]',
+        title: 'text-md-sys-color-on-surface',
+        subtitle: 'text-md-sys-color-on-surface-variant',
+        leading: 'text-md-sys-color-on-surface col-start-1 row-start-1 flex shrink-0 items-center justify-self-start',
+        trailing: 'text-md-sys-color-on-surface-variant col-start-3 row-start-1 flex shrink-0 items-center justify-self-end',
+        search: 'state-layer relative flex h-spacing-700 w-full min-w-spacing-0 cursor-text items-center rounded-full ps-spacing-200 pe-spacing-200 transition-colors md-sys-motion-effects before:rounded-full hover:before:bg-md-sys-color-on-surface/8 focus-within:outline-3 focus-within:outline-offset-2 focus-within:outline-md-sys-color-secondary',
+        searchInput: 'md-sys-typescale-body-large text-md-sys-color-on-surface placeholder:text-md-sys-color-on-surface-variant w-full min-w-spacing-0 bg-transparent text-start outline-none placeholder-shown:text-center [&::-webkit-search-cancel-button]:hidden',
+        searchTrailing: 'text-md-sys-color-on-surface-variant flex shrink-0 items-center'
     },
     variants: {
-        scrolled: {
-            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: '',
-            false: ''
+        align: {
+            start: { row: 'grid-cols-[auto_1fr_auto]', textContainer: 'items-start text-start' },
+            // 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' }
         },
-        noTrailing: {
+        scrolled: {
             true: {
-                textContainer: 'pr-4 md:pr-6 lg:pr-8'
+                base: 'bg-md-sys-color-surface-container',
+                search: 'bg-md-sys-color-surface-container-highest'
             },
-            false: ''
+            false: { base: 'bg-md-sys-color-surface', search: 'bg-md-sys-color-surface-container' }
         },
-        noLeading: {
+        // Search app bar: the search container fills the text column, 8dp from the buttons.
+        searchContainer: {
             true: {
-                textContainer: 'pl-4 md:pl-6 lg:pl-8'
+                row: 'grid-cols-[auto_1fr_auto]',
+                textContainer: '[--lead:0.5rem] [--trail:0.5rem]'
             },
             false: ''
-        }
+        },
+        hasSearchTrailing: { true: { search: 'pe-spacing-50' }, false: '' },
+        noTrailing: { true: '', false: '' },
+        noLeading: { true: '', false: '' }
+    },
+    compoundVariants: [
+        // A title with no button beside it sits at the 16dp inset.
+        { align: 'start', noLeading: true, class: { textContainer: '[--lead:1rem]' } },
+        { align: 'start', noTrailing: true, class: { textContainer: '[--trail:1rem]' } },
+        { searchContainer: true, noLeading: true, class: { textContainer: '[--lead:0.75rem]' } },
+        { searchContainer: true, noTrailing: true, class: { textContainer: '[--trail:0.75rem]' } }
+    ],
+    defaultVariants: {
+        align: 'start',
+        scrolled: false,
+        searchContainer: false
     }
 });

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

@@ -1,14 +1,10 @@
 import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-import type { AppbarVariants } from './theme.js';
-/**
- * Props for the AppBar component.
- */
-export type AppBarProps = AppbarVariants & HTMLAttributes<HTMLElementTagNameMap['nav']> & {
+import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
+import type { Responsive } from '../../containers/pane/theme.js';
+import type { AppBarSize, AppbarVariants } from './theme.js';
+type AppBarBaseProps = Pick<AppbarVariants, 'align'> & HTMLAttributes<HTMLElementTagNameMap['nav']> & {
     /** 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;
     /** An optional subtitle displayed below the title. */
     subtitle?: string;
     /** Additional props for the title `<h1>` element (e.g. `data-cy`). */
@@ -19,10 +15,51 @@ export type AppBarProps = AppbarVariants & HTMLAttributes<HTMLElementTagNameMap[
     leading?: Snippet;
     /** A snippet to be rendered on the right side (e.g., action icons). */
     trailing?: Snippet;
-    /** Whether to show a back button in the leading section. */
+    /** Renders a back button in the leading section (ignored when `leading` is set). */
     showBack?: boolean;
+    /** Called by the back button. Defaults to `history.back()`. */
+    onback?: () => void;
+    /**
+     * The element whose scroll switches the bar to its on-scroll color. Defaults to the page
+     * (`window`); pass a scrolling container, e.g. a `Pane`'s element, when content scrolls there.
+     */
+    scrollContainer?: HTMLElement | null;
     /** 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;
 };
+/** A titled app bar: small, or the Expressive medium/large flexible bars. */
+export type TitleAppBarProps = AppBarBaseProps & {
+    /** The main title of the app bar. */
+    title: string;
+    /**
+     * `small` (64dp, one line), `medium` or `large` (flexible, wrapping headline). Pass one per
+     * breakpoint to adapt to the window, e.g. `{ small: 'small', large: 'large' }`; tiers you
+     * leave out inherit from the one below, and below the first given tier the bar is `small`.
+     */
+    size?: Responsive<AppBarSize>;
+    search?: never;
+    query?: never;
+    searchProps?: never;
+    searchTrailing?: never;
+};
+/** A search app bar: a search field in place of the title, always 64dp. */
+export type SearchAppBarProps = AppBarBaseProps & {
+    /** Hint text in the search field. Setting it makes this a search app bar. */
+    search: string;
+    /** The search query. */
+    query?: string;
+    /** Screen title; rendered for assistive tech only. */
+    title?: string;
+    /** Props for the search `<input>`, e.g. `onfocus` to open a search view. */
+    searchProps?: HTMLInputAttributes;
+    /** An action inside the search field, e.g. a mic icon button. */
+    searchTrailing?: Snippet;
+    size?: never;
+};
+/**
+ * Props for the AppBar component.
+ */
+export type AppBarProps = TitleAppBarProps | SearchAppBarProps;
+export {};

package/dist/components/nav/breadcrumb/Breadcrumb.stories.svelte

@@ -5,6 +5,7 @@
 
   const { Story } = defineMeta({
     title: 'Navigation/Breadcrumb',
+    tags: ['autodocs'],
     component: Breadcrumb,
     argTypes: {
       color: { control: 'select', options: ['primary', 'secondary', 'tertiary', 'surface'] }