@noxlovette/material 0.5.0 → 0.6.0

package/dist/components/misc/theme.js

@@ -9,16 +9,16 @@ export const avatar = tv({
     variants: {
         size: {
             xxs: {
-                root: 'size-5'
+                root: 'size-spacing-250'
             },
             xs: {
-                root: 'size-8'
+                root: 'size-spacing-400'
             },
             sm: {
-                root: 'size-12'
+                root: 'size-spacing-600'
             },
             md: {
-                root: 'size-18'
+                root: 'size-spacing-900'
             },
             lg: {
                 root: 'size-24'

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

@@ -0,0 +1,71 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as AppBarStories from './AppBar.stories.svelte';
+import * as BreadcrumbStories from '../breadcrumb/Breadcrumb.stories.svelte';
+
+<Meta of={AppBarStories} />
+
+<Title />
+
+<Subtitle>Top app bars show the screen's title, navigation, and actions.</Subtitle>
+
+[M3 spec](https://m3.material.io/components/app-bars/specs) ·
+`import { AppBar } from '@noxlovette/material';`
+
+<Canvas of={AppBarStories.Playground} />
+
+<Controls of={AppBarStories.Playground} />
+
+## Two kinds of bar
+
+The props form a union, so the bar is one of two kinds:
+
+- **Titled bar.** Pass `title`. `size` is `small` (64dp, one line), or the Expressive `medium` or
+  `large` flexible bars, whose headline wraps and grows. `size` is responsive: pass
+  `{ small: 'small', large: 'large' }` to grow the bar on wider windows. The switch happens in CSS,
+  so server rendering needs no JS.
+- **Search bar.** Pass `search` (the hint text) instead. The bar is always 64dp. `title` then
+  becomes a screen-reader-only heading.
+
+<Canvas of={AppBarStories.MediumFlexible} />
+
+<Canvas of={AppBarStories.Search} />
+
+## Placement
+
+The bar is fixed at the top at every window size. Pass `ghost` to render a same-height spacer
+after it, so page content doesn't start underneath. The bar also publishes its height as
+`--appbar-height` on the root element. `Pane`/`PaneGrid` read it to shrink their `min-height`, so
+nothing needs wiring. Next to a `Rail`, pass the bar's height to the rail's `railTop`.
+
+```svelte
+<AppBar title="Inbox" ghost>
+  {#snippet trailing()}
+    <ButtonIcon variant="standard" iconProps={{ name: 'search' }} />
+    <ButtonIcon variant="standard" iconProps={{ name: 'more_vert' }} />
+  {/snippet}
+</AppBar>
+```
+
+## Scroll color
+
+The bar switches to its on-scroll color once the page scrolls more than 10px. If content scrolls
+inside a container instead (a `Pane`, say), pass that element as `scrollContainer`.
+
+<Canvas of={AppBarStories.ScrollContainer} />
+
+## Breadcrumbs
+
+`children` renders in a full-width row below the title, which is where a `Breadcrumb` goes. M3
+has no breadcrumb pattern, so `Breadcrumb` uses `label-large` crumbs separated by chevrons. The
+current page uses the emphasized `label-large` and is always static text with
+`aria-current="page"`. `color` sets the current crumb's color and the links' hover color.
+
+<Canvas of={BreadcrumbStories.InAppBar} />
+
+## Accessibility
+
+- **Landmark.** The bar renders a `<nav>`, which assistive tech announces as a landmark.
+- **Heading.** The title is the page's `<h1>`. On a search bar it stays an `<h1>`, hidden
+  visually. Don't render a second `<h1>` on the page.
+- **Back button.** `showBack` renders a labelled back button that calls `onback`, or
+  `history.back()` by default.

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

@@ -13,23 +13,31 @@
     argTypes: {
       title: { control: 'text' },
       subtitle: { control: 'text' },
+      size: { control: 'inline-radio', options: ['small', 'medium', 'large'] },
+      align: { control: 'inline-radio', options: ['start', 'center'] },
       showBack: { control: 'boolean' },
       ghost: { control: 'boolean' }
     },
     args: {
       title: 'Inbox',
+      size: 'small',
+      align: 'start',
       showBack: false,
       ghost: true
     }
   });
 </script>
 
+<script lang="ts">
+  let scroller = $state<HTMLElement | null>(null);
+</script>
+
 <Story name="Playground">
   {#snippet template(args)}
     <AppBar {...args}>
       {#snippet trailing()}
-        <ButtonIcon variant="text" iconProps={{ name: 'search' }} />
-        <ButtonIcon variant="text" iconProps={{ name: 'more_vert' }} />
+        <ButtonIcon variant="standard" iconProps={{ name: 'search' }} />
+        <ButtonIcon variant="standard" iconProps={{ name: 'more_vert' }} />
       {/snippet}
     </AppBar>
   {/snippet}
@@ -38,12 +46,94 @@
 <Story
   name="With Back and Subtitle"
   args={{ title: 'Draft', subtitle: '3 recipients', showBack: true }}
+>
+  {#snippet template(args)}
+    <AppBar {...args} />
+  {/snippet}
+</Story>
+
+<Story name="Medium flexible" args={{ title: 'Travel plans', size: 'medium', showBack: true }}>
+  {#snippet template(args)}
+    <AppBar {...args}>
+      {#snippet trailing()}
+        <ButtonIcon variant="standard" iconProps={{ name: 'search' }} />
+        <ButtonIcon variant="standard" iconProps={{ name: 'more_vert' }} />
+      {/snippet}
+    </AppBar>
+  {/snippet}
+</Story>
+
+<Story
+  name="Large flexible"
+  args={{ title: 'Travel plans', subtitle: '3 upcoming trips', size: 'large', showBack: true }}
 >
+  {#snippet template(args)}
+    <AppBar {...args}>
+      {#snippet trailing()}
+        <ButtonIcon variant="standard" iconProps={{ name: 'more_vert' }} />
+      {/snippet}
+    </AppBar>
+  {/snippet}
+</Story>
+
+<Story name="Centered" args={{ title: 'Product', align: 'center' }}>
   {#snippet template(args)}
     <AppBar {...args}>
       {#snippet leading()}
-        <ButtonIcon variant="text" iconProps={{ name: 'arrow_back' }} />
+        <ButtonIcon variant="standard" iconProps={{ name: 'menu' }} aria-label="Menu" />
+      {/snippet}
+      {#snippet trailing()}
+        <ButtonIcon
+          variant="standard"
+          iconProps={{ name: 'account_circle' }}
+          aria-label="Account"
+        />
       {/snippet}
     </AppBar>
   {/snippet}
 </Story>
+
+<Story
+  name="Responsive size"
+  args={{
+    title: 'Travel plans',
+    subtitle: 'Resize the viewport',
+    size: { small: 'small', medium: 'medium', large: 'large' }
+  }}
+  parameters={{ viewport: { defaultViewport: 'responsive' } }}
+>
+  {#snippet template(args)}
+    <AppBar {...args} showBack>
+      {#snippet trailing()}
+        <ButtonIcon variant="standard" iconProps={{ name: 'more_vert' }} aria-label="More" />
+      {/snippet}
+    </AppBar>
+  {/snippet}
+</Story>
+
+<Story name="Search" asChild>
+  <AppBar search="Search products" title="Products">
+    {#snippet leading()}
+      <ButtonIcon variant="standard" iconProps={{ name: 'menu' }} aria-label="Menu" />
+    {/snippet}
+    {#snippet searchTrailing()}
+      <ButtonIcon variant="standard" iconProps={{ name: 'mic' }} aria-label="Voice search" />
+    {/snippet}
+    {#snippet trailing()}
+      <ButtonIcon variant="standard" iconProps={{ name: 'account_circle' }} aria-label="Account" />
+    {/snippet}
+  </AppBar>
+</Story>
+
+<Story name="Scroll container" asChild>
+  <div bind:this={scroller} class="h-[480px] overflow-y-auto">
+    <AppBar title="Scroll this box" scrollContainer={scroller} ghost />
+    {#each { length: 40 } as _, i (i)}
+      <p
+        class="md-sys-typescale-body-large text-md-sys-color-on-surface px-spacing-200 py-spacing-100"
+      >
+        Row {i + 1}
+      </p>
+    {/each}
+  </div>
+</Story>

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

@@ -1,19 +1,4 @@
 import AppBar from './AppBar.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 AppBar: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AppBar = InstanceType<typeof AppBar>;
+declare const AppBar: import("svelte").Component<Record<string, never>, {}, "">;
+type AppBar = ReturnType<typeof AppBar>;
 export default AppBar;

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;
 }>>;