@noxlovette/material 0.7.1 → 0.8.0

package/claude-skill/material-design/references/motion-guide.md

@@ -58,7 +58,7 @@ Spatial springs overshoot by design (fast spatial most, at damping ratio 0.6); e
 | ----------------------------------------------------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Enter and exit** — a surface appears/leaves within the screen   | `presence(() => open, enterExit.<preset>)`                   | Attachment. Presets: `fade`, `scale` (menus/popovers/tooltips — sets `transform-origin` to bits-ui's anchor side, so never add an `origin-*` class), `slideUp` (snackbar), `dialog`, `sideSheet`, `bottomSheet`. Interruptible: reopening mid-exit retargets from the current value with velocity.                                                                                                                                              |
 | Same, outside bits-ui (element must stay mounted during its exit) | `new Presence(() => open)`                                   | `{#if p.mounted}<div {@attach p.attach(enterExit.x)}>`. Construct during component init. Used by Snackbar, SideSheet, BottomSheet.                                                                                                                                                                                                                                                                                                              |
-| **Container transform** — card → detail, FAB → sheet              | `containerTransform(update, { from, to })`                   | Motion `animateView()` (View Transition API). `update` swaps the DOM (`async () => { open = true; await tick(); }`); `to` may be a selector for an element that only exists after the update.                                                                                                                                                                                                                                                   |
+| **Container transform** — card → detail, search bar → view        | `containerTransform(update, { from, to })`                   | Motion `animateView()` (View Transition API). `update` swaps the DOM (`async () => { open = true; await tick(); }`); `to` may be a selector for an element that only exists after the update.                                                                                                                                                                                                                                                   |
 | **Forward and backward** — hierarchy levels, wizard steps         | `sharedAxis(update, { target, axis, direction })`            | `axis: 'x' \| 'y' \| 'z'`, `direction: 'forward' \| 'backward'`. `target` is the persistent region whose content changes; omit for the whole page.                                                                                                                                                                                                                                                                                              |
 | **Lateral** — peer screens (tabs, carousels)                      | `lateral(update, { target, direction, axis })`               | Edge-to-edge slide, no fade, along the axis the peers are laid out on: `axis: 'y'` for vertical tabs, a vertical carousel or a top-to-bottom stepper (`forward` = next, pushing up from below). Never on a vertical nav list: that's a drawer, so top level.                                                                                                                                                                                    |
 | **Top level** — unrelated destinations (navigation bar)           | `fadeThrough(update, { target })`                            | Old fades out, new fades in scaling from 92%. The `target` region swaps its box instantly (no slide or resize, so a scroll reset doesn't glide). In SvelteKit, call it from `onNavigate` in the root layout, skip hash-only changes, and fade only the region whose content changed: `main` between rail/navbar destinations, a section's content pane between pages of a nav that stays on screen (the showcase site's root layout does both). |
@@ -71,14 +71,14 @@ Spatial springs overshoot by design (fast spatial most, at damping ratio 0.6); e
 
 A pattern belongs in a component only when that component owns both states of the change. When the content that changes lives outside the component (a route, an app screen), the app applies the pattern, not the library. Keep this table in sync when a component gains or loses one of these patterns; each primitive's JSDoc in `src/lib/animation/` repeats its own row.
 
-| Pattern                  | Built into (must use it)                                                                                                                                                       | Left to the app                                                                                                |
-| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- |
-| **Enter and exit**       | Dialogue, BottomSheet, SideSheet, Menu, MenuSub, ContextMenu, Popover, Tooltip, LinkPreview, Select, FABMenu, SplitButton, Snackbar, DateField/DateRangeField/TimeField popups | —                                                                                                              |
-| **Lateral**              | TabHolder (switching content panels); DateField/DateRangeField (changing the visible month, via `date/calendarMotion.ts`)                                                      | Navigation (`href`) tabs: the route change is the app's                                                        |
-| **Container transform**  | FAB → its `surface` (`FAB.svelte`: a clip-path and colour morph on Motion, not `containerTransform`)                                                                           | Card → detail, Carousel item → detail. `Search` has no search view to expand into; add it here if one is built |
-| **Forward and backward** | —                                                                                                                                                                              | Hierarchy levels, wizard steps                                                                                 |
-| **Top level**            | —                                                                                                                                                                              | Page changes from `Navbar`/`Rail`: they don't own the content region                                           |
-| **Skeleton loaders**     | —                                                                                                                                                                              | Placeholders for data the app loads                                                                            |
+| Pattern                  | Built into (must use it)                                                                                                                                                              | Left to the app                                                      |
+| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
+| **Enter and exit**       | Dialogue, BottomSheet, SideSheet, Menu, MenuSub, ContextMenu, Popover, Tooltip, LinkPreview, Select, FABMenu, SplitButton, Snackbar, DateField/DateRangeField/TimeField popups        | —                                                                    |
+| **Lateral**              | TabHolder (switching content panels); DateField/DateRangeField (changing the visible month, via `date/calendarMotion.ts`)                                                             | Navigation (`href`) tabs: the route change is the app's              |
+| **Container transform**  | FAB → its `surface` (`FAB.svelte`: a clip-path and colour morph on Motion, not `containerTransform`); `Search` / search `AppBar` bar → `SearchView` (`containerTransform`, both ways) | Card → detail, Carousel item → detail                                |
+| **Forward and backward** | —                                                                                                                                                                                     | Hierarchy levels, wizard steps                                       |
+| **Top level**            | —                                                                                                                                                                                     | Page changes from `Navbar`/`Rail`: they don't own the content region |
+| **Skeleton loaders**     | —                                                                                                                                                                                     | Placeholders for data the app loads                                  |
 
 A new component that mounts a surface must use enter/exit; one that pages between peer views (a stepper of equal steps) must use lateral. `Carousel` is not a pager: its motion is the scroll itself, items resizing through keylines. Opening a tapped item into its detail is a container transform the app applies.
 

package/dist/animation/containerTransform.d.ts

@@ -8,31 +8,4 @@ export interface ContainerTransformOptions {
     /** Spring for the bounds/shape morph. `slowSpatial` suits full-screen expansions. */
     spring?: SpringToken;
 }
-/**
- * M3 container transform: one container morphs its bounds, shape and color into another while
- * the outgoing content fades out and the incoming content fades in on top.
- * https://m3.material.io/styles/motion/transitions/transition-patterns#container-transform
- *
- * The most dramatic pattern (https://m3.material.io/styles/motion/transitions/applying-transitions).
- * Use it for hero moments, shallow expand → collapse hierarchies and seamless element-to-element
- * connections. Don't use it in deep hierarchies or utility-focused navigation, where it becomes
- * excessive. Use `sharedAxis` there. Keep `spring` at `spatial`/`slowSpatial`, never the bouncy
- * `fastSpatial`.
- *
- * Built on Motion's `animateView()` (View Transition API), so `from` and `to` never have to be in
- * the DOM at the same time — `update` swaps one for the other. Browsers without the API just run
- * `update`. A second call while one is running is queued, not interrupted.
- *
- * Not built into any component. FAB → sheet is the FAB's own morph (a clip-path on Motion, in
- * `FAB.svelte`), because M3 keeps that container opaque and changes its colour, which a
- * snapshot cross-fade can't. Card → detail is the app's own navigation, and `Search` is a plain
- * field with no search view to expand into.
- *
- * ```ts
- * containerTransform(
- *   async () => { expanded = true; await tick(); },
- *   { from: cardEl, to: '[data-detail]' }
- * );
- * ```
- */
 export declare const containerTransform: (update: () => void | Promise<void>, { from, to, spring }: ContainerTransformOptions) => import("motion-dom").ViewTransitionBuilder;

package/dist/animation/containerTransform.js

@@ -2,8 +2,9 @@ import { animateView } from 'motion';
 import { prefersReducedMotion } from './reducedMotion.js';
 import { springTokens, springTransition } from './spring.js';
 /**
- * M3 container transform: one container morphs its bounds, shape and color into another while
- * the outgoing content fades out and the incoming content fades in on top.
+ * M3 container transform: one container morphs its bounds, shape and color into another. The
+ * incoming state is drawn underneath at full opacity from the start and the outgoing one fades
+ * out on top of it, so the morph ends exactly as the page looks and never shows through.
  * https://m3.material.io/styles/motion/transitions/transition-patterns#container-transform
  *
  * The most dramatic pattern (https://m3.material.io/styles/motion/transitions/applying-transitions).
@@ -16,10 +17,10 @@ import { springTokens, springTransition } from './spring.js';
  * the DOM at the same time — `update` swaps one for the other. Browsers without the API just run
  * `update`. A second call while one is running is queued, not interrupted.
  *
- * Not built into any component. FAB → sheet is the FAB's own morph (a clip-path on Motion, in
- * `FAB.svelte`), because M3 keeps that container opaque and changes its colour, which a
- * snapshot cross-fade can't. Card → detail is the app's own navigation, and `Search` is a plain
- * field with no search view to expand into.
+ * Built into `SearchView`: the search bar (`Search`, or a search `AppBar`) grows into the search
+ * view and back. FAB → sheet is the FAB's own morph (a clip-path on Motion, in `FAB.svelte`),
+ * because M3 keeps that container opaque and changes its colour, which a snapshot cross-fade
+ * can't. Card → detail is the app's own navigation.
  *
  * ```ts
  * containerTransform(
@@ -28,12 +29,42 @@ import { springTokens, springTransition } from './spring.js';
  * );
  * ```
  */
+const FILL = '--md-container-transform-color';
+const resolve = (target) => typeof target === 'string'
+    ? document.querySelector(target)
+    : target instanceof Element
+        ? target
+        : null;
+const TRANSPARENT = new Set(['transparent', 'rgba(0, 0, 0, 0)']);
+/*
+  The destination's own background, if it has one. A container made of separate surfaces on a
+  transparent wrapper (the docked search view's bar and results) gets no fill: its opaque
+  incoming snapshot already covers what it should, and a flat fill would paper over the gaps
+  between its surfaces until the transition ends, then pop.
+*/
+const fillOf = (target) => {
+    const colour = target ? getComputedStyle(target).backgroundColor : '';
+    return colour && !TRANSPARENT.has(colour) ? colour : 'transparent';
+};
 export const containerTransform = (update, { from, to, spring = springTokens.spatial }) => {
-    const builder = animateView(update, springTransition(spring)).add(from, to);
+    // The incoming snapshot is opaque wherever the destination is, and the outgoing one fades off
+    // it (motion.css layers them), so nothing behind shows through. The fill (motion.css) covers
+    // the rest of a destination with its own background, e.g. a full-screen view's area below the
+    // incoming snapshot's top as the bar grows. Only the transition's group reads the property,
+    // and it's rewritten before each new snapshot, so it's left in place afterwards.
+    const root = document.documentElement;
+    const updateAndFill = async () => {
+        await update();
+        root.style.setProperty(FILL, fillOf(resolve(to)));
+    };
+    // The class lets motion.css keep both snapshots at their width, clipped by the container.
+    const builder = animateView(updateAndFill, springTransition(spring))
+        .add(from, to)
+        .class('md-container-transform');
     // Reduced motion: the container doesn't grow; its two states just crossfade in place.
     if (prefersReducedMotion())
         builder.layout({ duration: 0 });
     return builder
-        .old({ opacity: [1, 0] }, springTransition(springTokens.fastEffects))
-        .new({ opacity: [0, 1] }, { ...springTransition(springTokens.effects), delay: 0.05 });
+        .old({ opacity: [1, 0] }, springTransition(springTokens.effects))
+        .new({ opacity: [1, 1] }, springTransition(springTokens.effects));
 };

package/dist/components/containers/popover/theme.d.ts

@@ -3,20 +3,20 @@ export type PopoverVariants = VariantProps<typeof popover>;
 export declare const popover: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
-            title?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
             body?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
             close?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
-            title?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
             body?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
             close?: import("tailwind-variants").ClassValue;
         };
     };
@@ -29,10 +29,10 @@ export declare const popover: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
-            title?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
             body?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
             close?: import("tailwind-variants").ClassValue;
         };
     };

package/dist/components/forms/checkbox/Checkbox.svelte

@@ -28,7 +28,7 @@ Checkboxes let users select one or more items from a list, or turn an item on or
   const cls = $derived(checkbox({ state, error, disabled }));
 </script>
 
-<div class="space-x-spacing-150 flex cursor-pointer items-center">
+<div class="gap-spacing-50 flex cursor-pointer items-center">
   <Checkbox.Root
     bind:checked
     bind:indeterminate

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

@@ -21,10 +21,6 @@ export declare const checkbox: import("tailwind-variants").TVReturnType<{
             supporting: string;
         };
     };
-    align: {
-        start: "items-start";
-        center: "items-center";
-    };
     disabled: {
         true: {
             root: string;
@@ -66,10 +62,6 @@ export declare const checkbox: import("tailwind-variants").TVReturnType<{
             supporting: string;
         };
     };
-    align: {
-        start: "items-start";
-        center: "items-center";
-    };
     disabled: {
         true: {
             root: string;
@@ -111,10 +103,6 @@ export declare const checkbox: import("tailwind-variants").TVReturnType<{
             supporting: string;
         };
     };
-    align: {
-        start: "items-start";
-        center: "items-center";
-    };
     disabled: {
         true: {
             root: string;

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

@@ -1,7 +1,7 @@
 import { tv } from '../../../utils/tv.js';
 export const checkbox = tv({
     slots: {
-        root: 'group inline-flex min-h-spacing-500 select-none items-start gap-spacing-150 text-md-sys-color-on-surface cursor-pointer',
+        root: 'group inline-flex size-spacing-500 shrink-0 select-none items-center justify-center cursor-pointer',
         container: 'relative inline-flex size-[18px] shrink-0',
         control: 'layer-container absolute -inset-[11px] rounded-full text-md-sys-color-on-surface-variant state-layer before:rounded-full group-focus-visible:outline group-focus-visible:outline-3 group-focus-visible:outline-offset-2 group-focus-visible:outline-md-sys-color-secondary transition-colors md-sys-motion-fast-effects',
         box: 'absolute inset-[11px] rounded-[4px] border-2 border-current bg-md-sys-color-surface transition-colors md-sys-motion-fast-effects',
@@ -31,10 +31,6 @@ export const checkbox = tv({
                 supporting: 'text-md-sys-color-error'
             }
         },
-        align: {
-            start: 'items-start',
-            center: 'items-center'
-        },
         disabled: {
             true: {
                 root: 'cursor-not-allowed',
@@ -84,7 +80,6 @@ export const checkbox = tv({
         }
     ],
     defaultVariants: {
-        state: 'unchecked',
-        align: 'start'
+        state: 'unchecked'
     }
 });

package/dist/components/forms/search/Search.mdx

@@ -5,21 +5,22 @@ import * as SearchStories from './Search.stories.svelte';
 
 <Title />
 
-<Subtitle>The search bar lets users enter a query to find information in an app.</Subtitle>
+<Subtitle>
+  Search lets users enter a query and pick from suggestions and results in a search view.
+</Subtitle>
 
 [M3 spec](https://m3.material.io/components/search/specs) ·
-`import { Search } from '@noxlovette/material';`
+`import { Search, SearchView } from '@noxlovette/material';`
 
 <Canvas of={SearchStories.Playground} />
 
 <Controls of={SearchStories.Playground} />
 
-## Search bar, not search view
+## Search bar
 
-This is M3's search bar: a 56dp, fully rounded `surface-container-high` field with a leading
-search icon. It's a different thing from the full-screen search view, and from a filled text
-field. Once there's a value, a clear button appears at the end. Other native `<input>` attributes
-pass straight through to the input.
+M3's search bar is a 56dp, fully rounded `surface-container-high` field with a leading search
+icon. It's a different thing from a filled text field. Once there's a value, a clear button
+appears at the end. Other native `<input>` attributes pass straight through to the input.
 
 ```svelte
 <Search placeholder="Search" bind:value={query} />
@@ -27,7 +28,65 @@ pass straight through to the input.
 
 <Canvas of={SearchStories.WithActions} />
 
-For a search field inside a top app bar, use `AppBar`'s `search` prop instead.
+For a search field inside a top app bar, use `AppBar`'s `search` prop instead. It opens the same
+search view when you give it `searchResults`.
+
+## Search view
+
+M3 treats search as a bar plus a view. Pass `results` and clicking or typing in the bar opens the
+search view, where the suggestions and results go. The view is empty until you fill it: spread the
+snippet's argument onto a `List`, and give each item `role="option"`.
+
+```svelte
+<Search placeholder="Search" bind:value={query} bind:open results={suggestions} />
+
+{#snippet suggestions(listbox)}
+  <List {...listbox}>
+    {#each matches as item (item)}
+      <ListItem role="option" asChild headline={item} onclick={() => pick(item)} />
+    {/each}
+  </List>
+{/snippet}
+```
+
+Picking a result is up to you: set the value and `open = false` in the item's `onclick`.
+
+<Canvas of={SearchStories.SearchView} />
+
+### Layouts
+
+`layout` takes `'fullScreen' | 'docked'`, one value or one per window tier. The default,
+`{ small: 'fullScreen', medium: 'docked' }`, follows M3: full-screen on compact windows, docked
+from medium up. The switch is made in CSS, so there's no flash on load.
+
+| Layout      | Container                                                        | Bar                                                               |
+| ----------- | ---------------------------------------------------------------- | ----------------------------------------------------------------- |
+| Full-screen | The whole window, `surface-container-low`, 0 radius              | 56dp, circular, `surface-container-high`, 12dp from the sides     |
+| Docked      | Results 2dp below the bar, 12dp radius, `surface-container-high` | The search bar widened in place: its margins go from 24dp to 12dp |
+
+The docked view is 360–720dp wide and 240dp to ⅔ of the window tall. In both layouts the bar's
+leading icon becomes a back button, a clear button appears once there's a query, and `trailing`
+actions (a mic, say) stay in the bar.
+
+<Canvas of={SearchStories.FullScreen} />
+
+<Canvas of={SearchStories.Docked} />
+
+### Motion
+
+Opening is an M3 [container transform](https://m3.material.io/styles/motion/transitions/transition-patterns#container-transform):
+the bar grows into the view on the `spatial` spring. Back, Esc and a click outside reverse it.
+Under reduced motion the two crossfade in place. Browsers without the View Transition API switch
+straight to the view.
+
+### Your own bar
+
+`SearchView` is exported for bars you build yourself. Pass the bar element as `anchor`, and open
+the view on click or typing, not on focus: closing hands focus back to the bar.
+
+```svelte
+<SearchView bind:open bind:value anchor={barEl} results={suggestions} />
+```
 
 ## Accessibility
 
@@ -36,3 +95,12 @@ For a search field inside a top app bar, use `AppBar`'s `search` prop instead.
 - **Clear button.** A 48dp `type="button"` labelled by `clearLabel` (default "Clear search"). It
   never submits a form and returns focus to the input.
 - **Focus.** Keyboard focus draws the M3 focus indicator around the bar.
+- **Opening.** With `results`, the bar's input has `aria-haspopup="dialog"` and `aria-expanded`.
+  Click, typing or ↓ opens the view; focus alone doesn't.
+- **Search view.** A bits-ui `Dialog`: focus moves into the view's field and stays in the view,
+  the page doesn't scroll, and Esc or the back button (`backLabel`, default "Back") closes it and
+  returns focus to the bar. The view is named by `resultsLabel` (default: the placeholder).
+- **Suggestions.** The view's field is a `combobox` over the `listbox` you render. ↑/↓ move
+  through the `role="option"` items (wrapping, skipping disabled ones) via
+  `aria-activedescendant`, so focus stays in the field while typing; Enter picks the highlighted
+  one. The highlighted item gets the M3 focus indicator.

package/dist/components/forms/search/Search.stories.svelte

@@ -2,6 +2,10 @@
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import Search from './Search.svelte';
   import ButtonIcon from '../../buttons/ButtonIcon.svelte';
+  import List from '../../containers/list/List.svelte';
+  import ListItem from '../../containers/list/ListItem.svelte';
+  import { Icon } from '../../../utils/index.js';
+  import type { SearchResultsProps } from './types.js';
 
   const { Story } = defineMeta({
     title: 'Forms/Search',
@@ -17,6 +21,51 @@
   });
 </script>
 
+<script lang="ts">
+  const recent = ['Material Design 3', 'Container transform', 'Search view specs'];
+  const topics = [
+    'Buttons',
+    'Cards',
+    'Chips',
+    'Dialogs',
+    'Lists',
+    'Menus',
+    'Navigation rail',
+    'Search',
+    'Sheets',
+    'Sliders',
+    'Snackbar',
+    'Tabs',
+    'Text fields'
+  ];
+
+  let query = $state('');
+  let open = $state(false);
+  let picked = $state('');
+
+  const matches = $derived(
+    query ? topics.filter((t) => t.toLowerCase().includes(query.toLowerCase())) : recent
+  );
+
+  const pick = (item: string) => {
+    picked = item;
+    query = item;
+    open = false;
+  };
+</script>
+
+{#snippet suggestions(listbox: SearchResultsProps)}
+  <List {...listbox}>
+    {#each matches as item (item)}
+      <ListItem role="option" asChild headline={item} onclick={() => pick(item)}>
+        {#snippet leading()}
+          <Icon name={query ? 'search' : 'history'} size="sm" />
+        {/snippet}
+      </ListItem>
+    {/each}
+  </List>
+{/snippet}
+
 <Story name="Playground">
   {#snippet template(args)}
     <div class="p-spacing-300 max-w-md">
@@ -49,3 +98,61 @@
     <Search value="query" leadingIconProps={null} placeholder="No leading icon" />
   </div>
 </Story>
+
+<!--
+  Click or type in the bar. The view is full-screen below the medium window class and docked from
+  it up: resize the viewport to see both. Arrow keys move through the suggestions; Enter picks one.
+-->
+<Story
+  name="Search view"
+  asChild
+  parameters={{
+    layout: 'fullscreen',
+    docs: { story: { inline: false, height: '560px' } }
+  }}
+>
+  <div class="gap-spacing-200 p-spacing-300 flex min-h-dvh flex-col items-center">
+    <Search placeholder="Search components" bind:value={query} bind:open results={suggestions}>
+      {#snippet trailing()}
+        <ButtonIcon variant="standard" iconProps={{ name: 'mic' }} aria-label="Voice search" />
+      {/snippet}
+    </Search>
+    <p class="md-sys-typescale-body-medium text-md-sys-color-on-surface-variant">
+      {picked ? `Picked: ${picked}` : 'Nothing picked yet'}
+    </p>
+  </div>
+</Story>
+
+<Story
+  name="Full-screen"
+  asChild
+  parameters={{
+    layout: 'fullscreen',
+    viewport: { defaultViewport: 'mobile1' },
+    docs: { story: { inline: false, height: '560px' } }
+  }}
+>
+  <div class="p-spacing-300 flex min-h-dvh flex-col items-center">
+    <Search
+      placeholder="Search components"
+      bind:value={query}
+      layout="fullScreen"
+      results={suggestions}
+    />
+  </div>
+</Story>
+
+<Story
+  name="Docked"
+  asChild
+  parameters={{ layout: 'fullscreen', docs: { story: { inline: false, height: '560px' } } }}
+>
+  <div class="p-spacing-300 flex min-h-dvh flex-col items-center">
+    <Search
+      placeholder="Search components"
+      bind:value={query}
+      layout="docked"
+      results={suggestions}
+    />
+  </div>
+</Story>

package/dist/components/forms/search/Search.stories.svelte.d.ts

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

package/dist/components/forms/search/Search.svelte

@@ -4,6 +4,9 @@ Material 3 Search Bar (contained, M3 Expressive).
 
 Search bars allow users to enter a query to find specific information within an app.
 
+Give it `results` and the bar opens a search view (`SearchView`) when clicked or typed in:
+full-screen on compact windows, docked from medium up, with a container transform between them.
+
 @see https://m3.material.io/components/search/specs
 -->
 <script lang="ts">
@@ -12,6 +15,7 @@ Search bars allow users to enter a query to find specific information within an
   import type { SearchProps } from './types.js';
   import { Icon } from '../../../utils/index.js';
   import ButtonIcon from '../../buttons/ButtonIcon.svelte';
+  import SearchView from './SearchView.svelte';
 
   const uid = $props.id();
 
@@ -24,6 +28,11 @@ Search bars allow users to enter a query to find specific information within an
     trailingIconProps = { name: 'close' },
     leadingIconProps = { name: 'search' },
     clearLabel = 'Clear search',
+    open = $bindable(false),
+    results,
+    layout,
+    backLabel,
+    resultsLabel,
     class: className,
     id = uid,
     trailingClick = () => {
@@ -33,6 +42,34 @@ Search bars allow users to enter a query to find specific information within an
     ...restProps
   }: SearchProps = $props();
 
+  let bar = $state<HTMLElement>();
+
+  // With a search view, clicking the bar, typing in it or pressing ↓ opens the view. Not focus:
+  // closing the view hands focus back here, which must not reopen it.
+  const opener = $derived(
+    results
+      ? {
+          'aria-haspopup': 'dialog' as const,
+          'aria-expanded': open,
+          onclick: (e: MouseEvent & { currentTarget: HTMLInputElement }) => {
+            restProps.onclick?.(e);
+            if (!e.defaultPrevented) open = true;
+          },
+          oninput: (e: Event & { currentTarget: HTMLInputElement }) => {
+            restProps.oninput?.(e);
+            if (!e.defaultPrevented) open = true;
+          },
+          onkeydown: (e: KeyboardEvent & { currentTarget: HTMLInputElement }) => {
+            restProps.onkeydown?.(e);
+            if (!e.defaultPrevented && e.key === 'ArrowDown') {
+              e.preventDefault();
+              open = true;
+            }
+          }
+        }
+      : {}
+  );
+
   const showClear = $derived(!!trailingIconProps && !!value);
 
   const s = $derived(
@@ -43,7 +80,7 @@ Search bars allow users to enter a query to find specific information within an
   );
 </script>
 
-<label for={id} class={s.base({ class: clsx(className) })}>
+<label for={id} class={s.base({ class: clsx(className) })} bind:this={bar}>
   {#if leading}
     <span class={s.leading()}>{@render leading()}</span>
   {:else if leadingIconProps}
@@ -51,8 +88,9 @@ Search bars allow users to enter a query to find specific information within an
   {/if}
   <input
     {...restProps}
+    {...opener}
     {id}
-    {placeholder}
+    placeholder={placeholder ?? undefined}
     bind:this={elementRef}
     bind:value
     type="search"
@@ -73,3 +111,18 @@ Search bars allow users to enter a query to find specific information within an
     </span>
   {/if}
 </label>
+
+{#if results}
+  <SearchView
+    bind:open
+    bind:value
+    anchor={bar}
+    {results}
+    {layout}
+    placeholder={placeholder ?? undefined}
+    {backLabel}
+    {resultsLabel}
+    {clearLabel}
+    {trailing}
+  />
+{/if}

package/dist/components/forms/search/Search.svelte.d.ts

@@ -4,8 +4,11 @@ import type { SearchProps } from './types.js';
  *
  * Search bars allow users to enter a query to find specific information within an app.
  *
+ * Give it `results` and the bar opens a search view (`SearchView`) when clicked or typed in:
+ * full-screen on compact windows, docked from medium up, with a container transform between them.
+ *
  * @see https://m3.material.io/components/search/specs
  */
-declare const Search: import("svelte").Component<SearchProps, {}, "value" | "elementRef">;
+declare const Search: import("svelte").Component<SearchProps, {}, "value" | "open" | "elementRef">;
 type Search = ReturnType<typeof Search>;
 export default Search;