@noxlovette/material 0.7.0 → 0.8.0

package/dist/components/forms/search/types.d.ts

@@ -1,10 +1,78 @@
 import type { IconProps } from '../../../utils/index.js';
 import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
+import type { Responsive } from '../../containers/pane/theme.js';
+/**
+ * Where the search view puts its suggestions and results
+ * (https://m3.material.io/components/search/guidelines).
+ * - `fullScreen`: the view covers the window; for compact windows.
+ * - `docked`: the bar widens in place and results open in a container below it.
+ */
+export type SearchLayout = 'fullScreen' | 'docked';
+/**
+ * Handed to the `results` snippet. Spread it onto the `List` that holds the suggestions, and give
+ * each item `role="option"`, so the field can drive it as a combobox.
+ *
+ * ```svelte
+ * {#snippet results(listbox)}
+ *   <List {...listbox}>
+ *     <ListItem role="option" asChild headline="Material" onclick={pick} />
+ *   </List>
+ * {/snippet}
+ * ```
+ */
+export interface SearchResultsProps {
+    id: string;
+    role: 'listbox';
+    'aria-label': string;
+}
+/** Props shared by the search view and the components that open it. */
+export interface SearchViewOptions {
+    /**
+     * Suggestions and results, shown in the search view. Setting it gives the bar a search view,
+     * opened by clicking or typing in the bar.
+     */
+    results?: Snippet<[SearchResultsProps]>;
+    /**
+     * The search view's layout, one value or one per window tier.
+     * @default { small: 'fullScreen', medium: 'docked' }
+     */
+    layout?: Responsive<SearchLayout>;
+    /** Accessible label for the back button that closes the search view. */
+    backLabel?: string;
+    /** Accessible name of the search view and its suggestion list. Defaults to the placeholder. */
+    resultsLabel?: string;
+}
+/**
+ * Props for the SearchView component.
+ */
+export interface SearchViewProps extends Omit<SearchViewOptions, 'results'> {
+    /** Whether the view is open. Opening and closing morph between `anchor` and the view. */
+    open?: boolean;
+    /** The search query, shared with the bar that opened the view. */
+    value?: string | null;
+    /**
+     * The search bar the view opens from: the container transform starts there, the docked layout
+     * is placed over it, and focus returns to its input on close.
+     */
+    anchor: HTMLElement | undefined;
+    /** Suggestions and results. */
+    results: Snippet<[SearchResultsProps]>;
+    /** Hint text in the view's field. */
+    placeholder?: string;
+    /** Actions after the clear button in the view's bar, e.g. a mic icon button. */
+    trailing?: Snippet;
+    /** Accessible label for the clear button. */
+    clearLabel?: string;
+    /** Extra props for the view's `<input>`. */
+    inputProps?: HTMLInputAttributes;
+    /** Reference to the view's `<input>` while it is open. */
+    inputRef?: HTMLInputElement;
+}
 /**
  * Props for the Search component.
  */
-export interface SearchProps extends Omit<HTMLInputAttributes, 'size'> {
+export interface SearchProps extends Omit<HTMLInputAttributes, 'size' | 'results'>, SearchViewOptions {
     /**
      * The current value of the search input.
      */
@@ -13,12 +81,17 @@ export interface SearchProps extends Omit<HTMLInputAttributes, 'size'> {
      * Reference to the HTML input element.
      */
     elementRef?: HTMLInputElement;
+    /**
+     * Whether the search view is open. Only has an effect with `results`.
+     */
+    open?: boolean;
     /**
      * A leading action, e.g. a menu or back icon button. Replaces the leading icon.
      */
     leading?: Snippet;
     /**
-     * Trailing actions and/or an avatar, e.g. a mic icon button. Rendered after the clear button.
+     * Trailing actions and/or an avatar, e.g. a mic icon button. Rendered after the clear button,
+     * in the bar and in the search view.
      */
     trailing?: Snippet;
     /**

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

@@ -24,12 +24,16 @@ The props form a union, so the bar is one of two kinds:
   `{ 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.
+  becomes a screen-reader-only heading. Per M3, selecting the field should open the search view:
+  pass `searchResults` (and optionally `bind:searchOpen`, `searchLayout`) and it opens the same
+  view as `Search`, with a container transform from the field. See Forms/Search for the view.
 
 <Canvas of={AppBarStories.MediumFlexible} />
 
 <Canvas of={AppBarStories.Search} />
 
+<Canvas of={AppBarStories.SearchView} />
+
 ## Placement
 
 The bar is fixed at the top at every window size. Pass `ghost` to render a same-height spacer

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

@@ -2,6 +2,8 @@
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import AppBar from './AppBar.svelte';
   import ButtonIcon from '../../buttons/ButtonIcon.svelte';
+  import List from '../../containers/list/List.svelte';
+  import ListItem from '../../containers/list/ListItem.svelte';
 
   const { Story } = defineMeta({
     title: 'Navigation/App Bar',
@@ -30,6 +32,11 @@
 
 <script lang="ts">
   let scroller = $state<HTMLElement | null>(null);
+
+  const products = ['Headphones', 'Keyboard', 'Laptop stand', 'Monitor', 'Mouse', 'Webcam'];
+  let query = $state('');
+  let searchOpen = $state(false);
+  const found = $derived(products.filter((p) => p.toLowerCase().includes(query.toLowerCase())));
 </script>
 
 <Story name="Playground">
@@ -125,6 +132,37 @@
   </AppBar>
 </Story>
 
+<!-- Selecting the search field opens the search view: full-screen here, docked from medium up. -->
+<Story
+  name="Search view"
+  asChild
+  parameters={{ docs: { story: { inline: false, height: '560px' } } }}
+>
+  <AppBar search="Search products" title="Products" bind:query bind:searchOpen ghost>
+    {#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 searchResults(listbox)}
+      <List {...listbox}>
+        {#each found as product (product)}
+          <ListItem
+            role="option"
+            asChild
+            headline={product}
+            onclick={() => {
+              query = product;
+              searchOpen = false;
+            }}
+          />
+        {/each}
+      </List>
+    {/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 />

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

@@ -8,7 +8,8 @@ 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.
+`align="center"` centres the title. Setting `search` makes it a search app bar; add
+`searchResults` and selecting the field opens the search view, as with `Search`.
 
 The bar takes its on-scroll color once `scrollContainer` (default: the page) scrolls.
 
@@ -17,6 +18,9 @@ Publishes its measured height as `--appbar-height` on the document root, so any
 that amount with no props or wiring on either side — see Pane.svelte's doc
 comment.
 
+A `ButtonIcon` anywhere inside it defaults to `variant="standard"`, per M3; pass
+`variant` to override.
+
 @see https://m3.material.io/components/app-bars/specs
 -->
 <script lang="ts">
@@ -24,6 +28,8 @@ comment.
   import type { AppBarProps } from './types.js';
   import clsx from 'clsx';
   import ButtonIcon from '../../buttons/ButtonIcon.svelte';
+  import { setButtonIconVariant } from '../../buttons/context.js';
+  import SearchView from '../../forms/search/SearchView.svelte';
 
   let {
     children,
@@ -43,11 +49,18 @@ comment.
     query = $bindable(''),
     searchProps,
     searchTrailing,
+    searchResults,
+    searchOpen = $bindable(false),
+    searchLayout,
     scrollContainer,
     ghost = false,
     ...rest
   }: AppBarProps = $props();
 
+  // M3 app bar icon buttons are standard (no container); a filled one over-emphasizes a back or
+  // action button. Applies to buttons passed in `leading`/`trailing`/`children` too.
+  setButtonIconVariant('standard');
+
   let scrolled = $state(false);
   let barHeight = $state(64);
 
@@ -61,6 +74,33 @@ comment.
   });
 
   const isSearch = $derived(search !== undefined);
+
+  let searchBar = $state<HTMLElement>();
+
+  // Same as Search: click, typing or ↓ opens the view; focus alone doesn't.
+  const opener = $derived(
+    searchResults
+      ? {
+          'aria-haspopup': 'dialog' as const,
+          'aria-expanded': searchOpen,
+          onclick: (e: MouseEvent & { currentTarget: HTMLInputElement }) => {
+            searchProps?.onclick?.(e);
+            if (!e.defaultPrevented) searchOpen = true;
+          },
+          oninput: (e: Event & { currentTarget: HTMLInputElement }) => {
+            searchProps?.oninput?.(e);
+            if (!e.defaultPrevented) searchOpen = true;
+          },
+          onkeydown: (e: KeyboardEvent & { currentTarget: HTMLInputElement }) => {
+            searchProps?.onkeydown?.(e);
+            if (!e.defaultPrevented && e.key === 'ArrowDown') {
+              e.preventDefault();
+              searchOpen = true;
+            }
+          }
+        }
+      : {}
+  );
   const noLeading = $derived(!leading && !showBack);
 
   const s = $derived(
@@ -110,10 +150,11 @@ comment.
         {#if title}
           <h1 {...titleProps} class={clsx('sr-only', titleProps?.class)}>{title}</h1>
         {/if}
-        <label class={s.search()}>
+        <label class={s.search()} bind:this={searchBar}>
           <input
             type="search"
             {...searchProps}
+            {...opener}
             placeholder={search}
             aria-label={searchProps?.['aria-label'] ?? search}
             bind:value={query}
@@ -148,6 +189,18 @@ comment.
   {/if}
 </nav>
 
+{#if isSearch && searchResults}
+  <SearchView
+    bind:open={searchOpen}
+    bind:value={query}
+    anchor={searchBar}
+    results={searchResults}
+    layout={searchLayout}
+    placeholder={search}
+    trailing={searchTrailing}
+  />
+{/if}
+
 {#if ghost}
   <div class={s.ghost()} style="height: {barHeight}px" aria-hidden="true"></div>
 {/if}

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

@@ -8,7 +8,8 @@ import type { AppBarProps } from './types.js';
  * 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.
+ * `align="center"` centres the title. Setting `search` makes it a search app bar; add
+ * `searchResults` and selecting the field opens the search view, as with `Search`.
  *
  * The bar takes its on-scroll color once `scrollContainer` (default: the page) scrolls.
  *
@@ -17,8 +18,11 @@ import type { AppBarProps } from './types.js';
  * that amount with no props or wiring on either side — see Pane.svelte's doc
  * comment.
  *
+ * A `ButtonIcon` anywhere inside it defaults to `variant="standard"`, per M3; pass
+ * `variant` to override.
+ *
  * @see https://m3.material.io/components/app-bars/specs
  */
-declare const AppBar: import("svelte").Component<AppBarProps, {}, "query">;
+declare const AppBar: import("svelte").Component<AppBarProps, {}, "query" | "searchOpen">;
 type AppBar = ReturnType<typeof AppBar>;
 export default AppBar;

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

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

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

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
 import type { Responsive } from '../../containers/pane/theme.js';
+import type { SearchLayout, SearchResultsProps } from '../../forms/search/types.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. */
@@ -43,6 +44,9 @@ export type TitleAppBarProps = AppBarBaseProps & {
     query?: never;
     searchProps?: never;
     searchTrailing?: never;
+    searchResults?: never;
+    searchOpen?: never;
+    searchLayout?: never;
 };
 /** A search app bar: a search field in place of the title, always 64dp. */
 export type SearchAppBarProps = AppBarBaseProps & {
@@ -54,8 +58,21 @@ export type SearchAppBarProps = AppBarBaseProps & {
     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. */
+    /** An action inside the search field, e.g. a mic icon button. Also shown in the search view. */
     searchTrailing?: Snippet;
+    /**
+     * Suggestions and results. Setting it gives the bar a search view (`SearchView`), opened by
+     * clicking or typing in the field. Spread the snippet's argument onto a `List` of
+     * `role="option"` items.
+     */
+    searchResults?: Snippet<[SearchResultsProps]>;
+    /** Whether the search view is open. Only has an effect with `searchResults`. */
+    searchOpen?: boolean;
+    /**
+     * The search view's layout, one value or one per window tier.
+     * @default { small: 'fullScreen', medium: 'docked' }
+     */
+    searchLayout?: Responsive<SearchLayout>;
     size?: never;
 };
 /**

package/dist/components/table/theme.js

@@ -1,7 +1,9 @@
 import { tv } from '../../utils/tv.js';
 export const table = tv({
     slots: {
-        root: 'w-full border-collapse text-left md-sys-typescale-body-medium text-md-sys-color-on-surface',
+        // `isolate` scopes the sticky head's z-10 to the table, so it only covers the rows
+        // scrolling beneath it and never app bars, menus or sheets outside the table.
+        root: 'isolate w-full border-collapse text-left md-sys-typescale-body-medium text-md-sys-color-on-surface',
         head: '',
         body: '[&_tr:last-child]:border-b-0',
         foot: 'border-t border-md-sys-color-outline-variant',

package/dist/styles/components.css

@@ -11,6 +11,12 @@
   --md-comp-nav-rail-expanded-top-space: 2.75rem; /* 44dp */
   --md-comp-nav-rail-expanded-container-width-minimum: 13.75rem; /* 220dp */
   --md-comp-nav-rail-expanded-container-width-maximum: 22.5rem; /* 360dp */
+
+  /* Search view, contained style, docked layout: https://m3.material.io/components/search/specs */
+  --md-comp-search-view-contained-docked-container-width-minimum: 22.5rem; /* 360dp */
+  --md-comp-search-view-contained-docked-container-width-maximum: 45rem; /* 720dp */
+  --md-comp-search-view-contained-docked-container-height-minimum: 15rem; /* 240dp */
+  --md-comp-search-view-contained-docked-container-height-maximum: calc(100dvh * 2 / 3);
 }
 
 /*

package/dist/styles/motion.css

@@ -331,3 +331,38 @@
   transition-duration: var(--md-sys-motion-duration-slow-effects-spring);
   transition-timing-function: var(--md-sys-motion-timing-function-slow-effects-spring);
 }
+
+/*
+  Container transform (animation/containerTransform.ts): both snapshots keep their own width and
+  sit at the container's top, clipped by it as it grows or shrinks. Motion's crop would otherwise
+  `object-fit: cover` them, which blows a short bar's snapshot up to the height of a full view.
+  Motion injects its per-name rule at runtime, after this sheet and at the same specificity, so
+  these need `!important` to win.
+*/
+::view-transition-old(.md-container-transform),
+::view-transition-new(.md-container-transform) {
+  top: 0 !important;
+  width: 100% !important;
+  height: auto !important;
+  object-fit: fill !important;
+}
+
+/*
+  Outgoing on top, fading off the incoming snapshot underneath, which stays opaque. Normal
+  blending: the browser runs `plus-lighter` on the pair as an animation, which only
+  `!important` outranks, and adding the outgoing bar onto the opaque view flashed it white.
+  The incoming snapshot also drops the browser's default fade-in.
+*/
+::view-transition-old(.md-container-transform) {
+  z-index: 1;
+  mix-blend-mode: normal !important;
+}
+::view-transition-new(.md-container-transform) {
+  mix-blend-mode: normal !important;
+  animation-name: none !important;
+}
+
+/* Filled with the destination's own background while it morphs (set by containerTransform). */
+::view-transition-group(.md-container-transform) {
+  background-color: var(--md-container-transform-color, transparent);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "type": "module",
   "description": "A Material Design 3 component library for Svelte, built on Bits UI.",
   "keywords": [