@noxlovette/material 0.5.0 → 0.6.0

package/dist/components/date/theme.js

@@ -2,10 +2,10 @@ import { tv } from 'tailwind-variants';
 export const dateRangeField = tv({
     slots: {
         base: `
-			group w-full h-14 relative flex items-center
+			group w-full h-spacing-700 relative flex items-center
 		`,
         inputWrapper: `
-			relative flex-1 px-4 h-full flex items-center
+			relative flex-1 px-spacing-200 h-full flex items-center
 		`,
         input: `
 			bg-transparent outline-none flex items-center
@@ -13,19 +13,19 @@ export const dateRangeField = tv({
 			disabled:text-md-sys-color-on-surface/38 w-full
 		`,
         leadingIcon: `
-      text-md-sys-color-on-surface-variant size-6
+      text-md-sys-color-on-surface-variant size-spacing-300
       group-focus-within:text-md-sys-color-primary
-      group-data-[invalid]:text-md-sys-color-error ml-3 text-[24px]
+      group-data-[invalid]:text-md-sys-color-error ml-spacing-150 text-[24px]
     `,
         trailingIcon: `
-      mr-1 shrink-0 text-md-sys-color-on-surface-variant
+      mr-spacing-50 shrink-0 text-md-sys-color-on-surface-variant
       group-data-[invalid]:text-md-sys-color-error
     `,
         separator: `
 			text-md-sys-color-on-surface-variant select-none shrink-0
 		`,
         label: `
-			absolute left-4 top-1.5
+			absolute left-spacing-200 top-spacing-75
 			md-sys-typescale-body-small
 			text-md-sys-color-on-surface-variant
 			pointer-events-none
@@ -34,13 +34,13 @@ export const dateRangeField = tv({
 			z-20
 		`,
         requiredAsterisk: `
-			ml-0.5
+			ml-spacing-25
 			text-md-sys-color-error
 			group-focus-within:text-md-sys-color-primary
 			transition-colors md-sys-motion-effects
 		`,
         supportingText: `
-			px-4 pt-1 flex justify-between
+			px-spacing-200 pt-spacing-50 flex justify-between
 			md-sys-typescale-body-small
 			text-md-sys-color-on-surface-variant
 		`
@@ -50,7 +50,7 @@ export const dateRangeField = tv({
             filled: {
                 base: `
           bg-md-sys-color-surface-container-highest rounded-t-xs
-          after:absolute after:bottom-0 after:left-0 after:right-0
+          after:absolute after:bottom-spacing-0 after:left-spacing-0 after:right-spacing-0
           state-layer before:rounded-xs hover:before:bg-md-sys-color-on-surface/8
           after:h-px after:bg-md-sys-color-on-surface-variant
           after:transition-[height,background-color] after:md-sys-motion-fast-spatial
@@ -108,10 +108,10 @@ export const dateRangeField = tv({
 export const dateField = tv({
     slots: {
         base: `
-				group w-full h-14 relative flex items-center justify-between
+				group w-full h-spacing-700 relative flex items-center justify-between
 			`,
         inputWrapper: `
-			relative flex-1 px-4 h-full flex items-center
+			relative flex-1 px-spacing-200 h-full flex items-center
 		`,
         input: `
 				w-full bg-transparent outline-none
@@ -122,16 +122,16 @@ export const dateField = tv({
 			flex w-full flex-col tabular-nums
 		`,
         leadingIcon: `
-      text-md-sys-color-on-surface-variant size-6
+      text-md-sys-color-on-surface-variant size-spacing-300
       group-focus-within:text-md-sys-color-primary
-      group-data-[invalid]:text-md-sys-color-error ml-3 text-[24px]
+      group-data-[invalid]:text-md-sys-color-error ml-spacing-150 text-[24px]
     `,
         trailingIcon: `
-      mr-1 shrink-0 text-md-sys-color-on-surface-variant
+      mr-spacing-50 shrink-0 text-md-sys-color-on-surface-variant
       group-data-[invalid]:text-md-sys-color-error
     `,
         label: `
-			absolute left-4 top-1.5
+			absolute left-spacing-200 top-spacing-75
 			md-sys-typescale-body-small
 			text-md-sys-color-on-surface-variant
 			pointer-events-none
@@ -140,18 +140,18 @@ export const dateField = tv({
 			z-20
 		`,
         requiredAsterisk: `
-			ml-0.5
+			ml-spacing-25
 			text-md-sys-color-error
 			group-focus-within:text-md-sys-color-primary
 			transition-colors md-sys-motion-effects
 		`,
         supportingText: `
-			px-4 pt-1 flex justify-between
+			px-spacing-200 pt-spacing-50 flex justify-between
 			md-sys-typescale-body-small
 			text-md-sys-color-on-surface-variant
 		`,
         fieldset: `
-      absolute -top-[5px] left-0 right-0 bottom-0 m-0 px-2
+      absolute -top-[5px] left-spacing-0 right-spacing-0 bottom-spacing-0 m-spacing-0 px-spacing-100
       pointer-events-none rounded-xs border border-md-sys-color-outline
       transition-colors md-sys-motion-fast-effects
 
@@ -163,7 +163,7 @@ export const dateField = tv({
       whitespace-nowrap md-sys-typescale-body-small
     `,
         legendLabel: `
-      px-1
+      px-spacing-50
     `
     },
     variants: {
@@ -171,7 +171,7 @@ export const dateField = tv({
             filled: {
                 base: `
           bg-md-sys-color-surface-container-highest rounded-t-xs
-          after:absolute after:bottom-0 after:left-0 after:right-0
+          after:absolute after:bottom-spacing-0 after:left-spacing-0 after:right-spacing-0
           state-layer before:rounded-xs hover:before:bg-md-sys-color-on-surface/8
           after:h-px after:bg-md-sys-color-on-surface-variant
           after:transition-[height,background-color] after:md-sys-motion-fast-spatial
@@ -180,11 +180,11 @@ export const dateField = tv({
           disabled:bg-md-sys-color-on-surface/4
           disabled:after:bg-md-sys-color-on-surface/12
         `,
-                segments: 'pt-4'
+                segments: 'pt-spacing-200'
             },
             outlined: {
                 label: `
-          top-0 -translate-y-1/2
+          top-spacing-0 -translate-y-1/2
         `
             }
         },
@@ -217,12 +217,12 @@ export const dateField = tv({
 /** Segments of the typed date (`DatePicker.Segment` / `DateRangePicker.Segment`). */
 export const dateSegment = tv({
     base: `
-    rounded-xs px-0.5 py-0.5 select-none cursor-default outline-none
+    rounded-xs px-spacing-25 py-spacing-25 select-none cursor-default outline-none
     transition-colors md-sys-motion-fast-effects
   `,
     variants: {
         part: {
-            literal: 'text-md-sys-color-on-surface-variant px-0',
+            literal: 'text-md-sys-color-on-surface-variant px-spacing-0',
             value: `
         text-md-sys-color-on-surface
         aria-[valuetext=Empty]:text-md-sys-color-on-surface-variant
@@ -243,12 +243,12 @@ export const dateSegment = tv({
 export const dateCalendar = tv({
     slots: {
         surface: `
-      w-90 rounded-lg px-3 pb-3
+      w-90 rounded-lg px-spacing-150 pb-spacing-150
       bg-md-sys-color-surface-container-high shadow-elevation-3
       text-md-sys-color-on-surface
     `,
         header: `
-      flex h-14 items-center justify-between pl-4 pr-1
+      flex h-spacing-700 items-center justify-between pl-spacing-200 pr-spacing-50
     `,
         heading: `
       md-sys-typescale-label-large text-md-sys-color-on-surface-variant
@@ -263,21 +263,25 @@ export const dateCalendar = tv({
       flex w-full
     `,
         weekday: `
-      flex size-12 items-center justify-center
+      flex size-spacing-600 items-center justify-center
       md-sys-typescale-body-large text-md-sys-color-on-surface
     `,
+        /* The range band runs behind every day in the range. On the endpoints it covers only the inner
+           half, so it meets the selected circle instead of sticking out past it. A one-day range has
+           no band. */
         cell: `
-      relative flex size-12 items-center justify-center p-0
-      before:absolute before:inset-x-0 before:h-10 before:bg-md-sys-color-secondary-container
+      relative flex size-spacing-600 items-center justify-center p-spacing-0
+      before:absolute before:inset-x-spacing-0 before:h-spacing-500 before:bg-md-sys-color-secondary-container
       before:opacity-0 before:transition-opacity before:md-sys-motion-fast-effects
       data-range-middle:before:opacity-100
       data-highlighted:before:opacity-100
+      data-range-start:before:opacity-100 data-range-end:before:opacity-100
       data-range-start:before:left-1/2 data-range-end:before:right-1/2
       data-range-start:data-range-end:before:opacity-0
       data-outside-month:before:opacity-0
     `,
         day: `
-      relative flex size-10 items-center justify-center rounded-full
+      relative flex size-spacing-500 items-center justify-center rounded-full
       md-sys-typescale-body-large text-md-sys-color-on-surface
       cursor-pointer outline-none
       transition-colors md-sys-motion-fast-effects

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

@@ -0,0 +1,35 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as CheckboxStories from './Checkbox.stories.svelte';
+
+<Meta of={CheckboxStories} />
+
+<Title />
+
+<Subtitle>
+  Checkboxes let users select one or more items from a list, or turn a single item on or off.
+</Subtitle>
+
+[M3 spec](https://m3.material.io/components/checkbox/specs) ·
+`import { Checkbox } from '@noxlovette/material';`
+
+<Canvas of={CheckboxStories.Playground} />
+
+<Controls of={CheckboxStories.Playground} />
+
+## States
+
+Bind `checked` for the value. Bind `indeterminate` for a "select all" checkbox whose list is
+only partly selected; it wins over `checked` while set. `error` marks the control invalid.
+
+```svelte
+<Checkbox labelText="Accept terms and conditions" bind:checked={accepted} />
+```
+
+<Canvas of={CheckboxStories.States} />
+
+## Accessibility
+
+- **Label.** `labelText` is required and tied to the control by id, so clicking the text toggles
+  the checkbox too.
+- **Target size.** The state layer extends the target well past the 18dp box, to 48dp.
+- **Keyboard.** Space toggles; focus draws the M3 focus indicator.

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

@@ -24,14 +24,14 @@
 
 <Story name="Playground">
   {#snippet template(args)}
-    <div class="p-6">
+    <div class="p-spacing-300">
       <Checkbox {...args} />
     </div>
   {/snippet}
 </Story>
 
 <Story name="States" asChild>
-  <div class="flex flex-col gap-4 p-6">
+  <div class="gap-spacing-200 p-spacing-300 flex flex-col">
     <Checkbox labelText="Unchecked" checked={false} />
     <Checkbox labelText="Checked" checked={true} />
     <Checkbox labelText="Indeterminate" indeterminate={true} />

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="flex cursor-pointer items-center space-x-3">
+<div class="space-x-spacing-150 flex cursor-pointer items-center">
   <Checkbox.Root
     bind:checked
     bind:indeterminate

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

@@ -1,12 +1,12 @@
 import { tv } from 'tailwind-variants';
 export const checkbox = tv({
     slots: {
-        root: 'group inline-flex min-h-10 select-none items-start gap-3 text-md-sys-color-on-surface min-h-4.5 cursor-pointer',
+        root: 'group inline-flex min-h-spacing-500 select-none items-start gap-spacing-150 text-md-sys-color-on-surface min-h-4.5 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',
-        checkIcon: 'pointer-events-none absolute inset-0 m-auto size-3.5 text-md-sys-color-on-primary opacity-0 scale-75',
-        indeterminateIcon: 'pointer-events-none absolute inset-0 m-auto block h-0.5 w-3 rounded-full bg-md-sys-color-on-primary opacity-0 scale-75',
+        checkIcon: 'pointer-events-none absolute inset-spacing-0 m-auto size-spacing-175 text-md-sys-color-on-primary opacity-0 scale-75',
+        indeterminateIcon: 'pointer-events-none absolute inset-spacing-0 m-auto block h-spacing-25 w-spacing-150 rounded-full bg-md-sys-color-on-primary opacity-0 scale-75',
         label: 'md-sys-typescale-body-large leading-5 text-md-sys-color-on-surface cursor-pointer'
     },
     variants: {

package/dist/components/forms/command/Command.stories.svelte

@@ -14,6 +14,7 @@
 
   const { Story } = defineMeta({
     title: 'Forms/Command',
+    tags: ['autodocs'],
     component: Command
   });
 </script>

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

@@ -2,14 +2,14 @@ import { tv } from 'tailwind-variants';
 export const command = tv({
     slots: {
         base: 'flex h-full w-full flex-col overflow-hidden rounded-2xl bg-md-sys-color-surface-container-high text-md-sys-color-on-surface shadow-elevation-3 ring-1 ring-md-sys-color-outline/20',
-        inputWrapper: 'flex items-center border-b border-md-sys-color-outline-variant px-4',
-        inputIcon: 'mr-3 h-5 w-5 shrink-0 text-md-sys-color-on-surface-variant',
-        input: 'flex h-12 w-full rounded-md bg-transparent py-3 md-sys-typescale-body-large outline-none placeholder:text-md-sys-color-on-surface-variant disabled:cursor-not-allowed disabled:opacity-50',
-        list: 'max-h-[300px] overflow-y-auto overflow-x-hidden p-2 scrollbar-thin scrollbar-thumb-md-sys-color-outline-variant scrollbar-track-transparent',
-        empty: 'py-6 text-center md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
-        group: 'overflow-hidden p-1 text-md-sys-color-on-surface-variant [&_[data-command-group-heading]]:px-3 [&_[data-command-group-heading]]:py-2 [&_[data-command-group-heading]]:md-sys-typescale-label-medium [&_[data-command-group-heading]]:text-md-sys-color-on-surface-variant',
-        separator: '-mx-1 h-px bg-md-sys-color-outline-variant',
-        item: 'relative flex cursor-default select-none items-center rounded-lg px-3 py-3 md-sys-typescale-body-medium outline-none data-[selected=true]:bg-md-sys-color-secondary-container data-[selected=true]:text-md-sys-color-on-secondary-container data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 transition-colors md-sys-motion-fast-effects',
-        itemIcon: 'mr-3 h-5 w-5 shrink-0'
+        inputWrapper: 'flex items-center border-b border-md-sys-color-outline-variant px-spacing-200',
+        inputIcon: 'mr-spacing-150 h-spacing-250 w-spacing-250 shrink-0 text-md-sys-color-on-surface-variant',
+        input: 'flex h-spacing-600 w-full rounded-md bg-transparent py-spacing-150 md-sys-typescale-body-large outline-none placeholder:text-md-sys-color-on-surface-variant disabled:cursor-not-allowed disabled:opacity-50',
+        list: 'max-h-[300px] overflow-y-auto overflow-x-hidden p-spacing-100 scrollbar-thin scrollbar-thumb-md-sys-color-outline-variant scrollbar-track-transparent',
+        empty: 'py-spacing-300 text-center md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
+        group: 'overflow-hidden p-spacing-50 text-md-sys-color-on-surface-variant [&_[data-command-group-heading]]:px-spacing-150 [&_[data-command-group-heading]]:py-spacing-100 [&_[data-command-group-heading]]:md-sys-typescale-label-medium [&_[data-command-group-heading]]:text-md-sys-color-on-surface-variant',
+        separator: '-mx-spacing-50 h-px bg-md-sys-color-outline-variant',
+        item: 'relative flex cursor-default select-none items-center rounded-lg px-spacing-150 py-spacing-150 md-sys-typescale-body-medium outline-none data-[selected=true]:bg-md-sys-color-secondary-container data-[selected=true]:text-md-sys-color-on-secondary-container data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 transition-colors md-sys-motion-fast-effects',
+        itemIcon: 'mr-spacing-150 h-spacing-250 w-spacing-250 shrink-0'
     }
 });

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

@@ -1,15 +1,15 @@
 import { tv } from 'tailwind-variants';
 export const pinInput = tv({
     slots: {
-        root: 'flex flex-col gap-2',
+        root: 'flex flex-col gap-spacing-100',
         label: 'md-sys-typescale-label-large text-md-sys-color-on-surface-variant',
-        container: 'flex items-center gap-2',
+        container: 'flex items-center gap-spacing-100',
         cell: `
-      relative flex h-14 w-12 items-center justify-center
+      relative flex h-spacing-700 w-spacing-600 items-center justify-center
       bg-md-sys-color-surface-container-highest rounded-t-xs
       md-sys-typescale-headline-small text-md-sys-color-on-surface
       transition-colors md-sys-motion-fast-effects
-      after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-md-sys-color-on-surface-variant
+      after:absolute after:bottom-spacing-0 after:left-spacing-0 after:right-spacing-0 after:h-px after:bg-md-sys-color-on-surface-variant
       after:transition-[height,background-color] after:md-sys-motion-fast-spatial
       data-[focus]:after:bg-md-sys-color-primary data-[focus]:after:h-[2px]
       data-[placeholder]:text-md-sys-color-on-surface-variant/38

package/dist/components/forms/radio-group/RadioGroup.svelte

@@ -49,7 +49,7 @@ Radio buttons let users select one option from a set.
           <div class={itemCls.outerRing()}></div>
           <div class={itemCls.innerDot()}></div>
         </div>
-        <div class="flex flex-col gap-0.5 text-left">
+        <div class="gap-spacing-25 flex flex-col text-left">
           <span class={itemCls.label()}>{item.label}</span>
           {#if item.supportingText}
             <span class={itemCls.supporting()}>{item.supportingText}</span>

package/dist/components/forms/radio-group/theme.js

@@ -2,18 +2,18 @@ import { tv } from 'tailwind-variants';
 export const radioGroup = tv({
     slots: {
         root: 'flex',
-        item: 'inline-flex min-h-10 cursor-pointer select-none items-center gap-3 text-md-sys-color-on-surface',
+        item: 'inline-flex min-h-spacing-500 cursor-pointer select-none items-center gap-spacing-150 text-md-sys-color-on-surface',
         indicator: 'relative inline-flex  size-[20px] shrink-0',
         control: 'relative layer-container absolute -inset-[10px] rounded-full text-md-sys-color-on-surface-variant state-layer before:rounded-full',
-        outerRing: 'absolute inset-0 rounded-full border-2 border-md-sys-color-outline transition-colors md-sys-motion-fast-effects',
-        innerDot: 'absolute inset-0 m-auto size-2.5 scale-0 rounded-full bg-md-sys-color-on-primary-container transition-transform md-sys-motion-fast-spatial',
+        outerRing: 'absolute inset-spacing-0 rounded-full border-2 border-md-sys-color-outline transition-colors md-sys-motion-fast-effects',
+        innerDot: 'absolute inset-spacing-0 m-auto size-spacing-125 scale-0 rounded-full bg-md-sys-color-on-primary-container transition-transform md-sys-motion-fast-spatial',
         label: 'md-sys-typescale-body-large text-md-sys-color-on-surface',
         supporting: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant'
     },
     variants: {
         orientation: {
-            vertical: { root: 'flex-col gap-1' },
-            horizontal: { root: 'flex-row flex-wrap gap-6' }
+            vertical: { root: 'flex-col gap-spacing-50' },
+            horizontal: { root: 'flex-row flex-wrap gap-spacing-300' }
         },
         checked: {
             true: {

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

@@ -0,0 +1,38 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as SearchStories from './Search.stories.svelte';
+
+<Meta of={SearchStories} />
+
+<Title />
+
+<Subtitle>The search bar lets users enter a query to find information in an app.</Subtitle>
+
+[M3 spec](https://m3.material.io/components/search/specs) ·
+`import { Search } from '@noxlovette/material';`
+
+<Canvas of={SearchStories.Playground} />
+
+<Controls of={SearchStories.Playground} />
+
+## Search bar, not search view
+
+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.
+
+```svelte
+<Search placeholder="Search" bind:value={query} />
+```
+
+<Canvas of={SearchStories.WithActions} />
+
+For a search field inside a top app bar, use `AppBar`'s `search` prop instead.
+
+## Accessibility
+
+- **Label.** The `type="search"` input sits inside a `<label>` with its own id, so the whole bar
+  is a target and several bars can share a page.
+- **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.

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

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import Search from './Search.svelte';
+  import ButtonIcon from '../../buttons/ButtonIcon.svelte';
 
   const { Story } = defineMeta({
     title: 'Forms/Search',
@@ -18,24 +19,33 @@
 
 <Story name="Playground">
   {#snippet template(args)}
-    <div class="max-w-md p-6">
+    <div class="p-spacing-300 max-w-md">
       <Search {...args} />
     </div>
   {/snippet}
 </Story>
 
 <Story name="With Value" asChild>
-  <div class="max-w-md p-6">
+  <div class="p-spacing-300 max-w-md">
     <Search value="Material Design" />
   </div>
 </Story>
 
-<Story name="Custom Icons" asChild>
-  <div class="max-w-md p-6">
-    <Search
-      value="query"
-      leadingIconProps={{ name: 'search' }}
-      trailingIconProps={{ name: 'mic' }}
-    />
+<Story name="With actions" asChild>
+  <div class="gap-spacing-200 p-spacing-300 flex max-w-md flex-col">
+    <Search>
+      {#snippet leading()}
+        <ButtonIcon variant="standard" iconProps={{ name: 'menu' }} aria-label="Menu" />
+      {/snippet}
+      {#snippet trailing()}
+        <ButtonIcon variant="standard" iconProps={{ name: 'mic' }} aria-label="Voice search" />
+        <ButtonIcon
+          variant="standard"
+          iconProps={{ name: 'account_circle' }}
+          aria-label="Account"
+        />
+      {/snippet}
+    </Search>
+    <Search value="query" leadingIconProps={null} placeholder="No leading icon" />
   </div>
 </Story>

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

@@ -1,52 +1,75 @@
 <!--
 @component
-Material 3 Search Bar.
+Material 3 Search Bar (contained, M3 Expressive).
 
 Search bars allow users to enter a query to find specific information within an app.
 
-@see https://m3.material.io/components/search/overview
+@see https://m3.material.io/components/search/specs
 -->
 <script lang="ts">
   import { search } from './theme.js';
   import clsx from 'clsx';
   import type { SearchProps } from './types.js';
   import { Icon } from '../../../utils/index.js';
+  import ButtonIcon from '../../buttons/ButtonIcon.svelte';
+
+  const uid = $props.id();
 
   let {
-    children,
-    placeholder = 'Поиск',
+    placeholder = 'Search',
     value = $bindable(),
     elementRef = $bindable(),
+    leading,
+    trailing,
     trailingIconProps = { name: 'close' },
     leadingIconProps = { name: 'search' },
+    clearLabel = 'Clear search',
     class: className,
+    id = uid,
     trailingClick = () => {
       value = '';
+      elementRef?.focus();
     },
     ...restProps
   }: SearchProps = $props();
 
-  const { base, leadingIcon, trailingIcon, input } = $derived(search());
+  const showClear = $derived(!!trailingIconProps && !!value);
+
+  const s = $derived(
+    search({
+      hasLeading: !!leading || !!leadingIconProps,
+      hasTrailing: !!trailing || showClear
+    })
+  );
 </script>
 
-<label for="search" class={base({ class: clsx(className) })}>
-  {#if leadingIconProps}
-    <Icon {...leadingIconProps} class={leadingIcon()} />
+<label for={id} class={s.base({ class: clsx(className) })}>
+  {#if leading}
+    <span class={s.leading()}>{@render leading()}</span>
+  {:else if leadingIconProps}
+    <span class={s.leadingIcon()} aria-hidden="true"><Icon {...leadingIconProps} /></span>
   {/if}
   <input
-    id="search"
     {...restProps}
+    {id}
     {placeholder}
     bind:this={elementRef}
     bind:value
-    type="text"
-    class={input()}
-    oncancel={() => (value = undefined)}
+    type="search"
+    class={s.input()}
   />
-
-  {#if trailingIconProps && value}
-    <button onclick={trailingClick} class="z-10">
-      <Icon {...trailingIconProps} class={trailingIcon()} />
-    </button>
+  {#if showClear || trailing}
+    <span class={s.trailing()}>
+      {#if showClear}
+        <ButtonIcon
+          variant="standard"
+          type="button"
+          iconProps={trailingIconProps!}
+          aria-label={clearLabel}
+          onclick={trailingClick}
+        />
+      {/if}
+      {@render trailing?.()}
+    </span>
   {/if}
 </label>

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

@@ -1,10 +1,10 @@
 import type { SearchProps } from './types.js';
 /**
- * Material 3 Search Bar.
+ * Material 3 Search Bar (contained, M3 Expressive).
  *
  * Search bars allow users to enter a query to find specific information within an app.
  *
- * @see https://m3.material.io/components/search/overview
+ * @see https://m3.material.io/components/search/specs
  */
 declare const Search: import("svelte").Component<SearchProps, {}, "value" | "elementRef">;
 type Search = ReturnType<typeof Search>;

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

@@ -1,33 +1,66 @@
 import { type VariantProps } from 'tailwind-variants';
 export type SearchVariants = VariantProps<typeof search>;
+/**
+ * M3 Expressive contained search bar (https://m3.material.io/components/search/specs):
+ * 56dp, circular, surface-container-high, flat. 48dp leading/trailing targets at a 4dp inset,
+ * 4dp between the leading element and the label, 0 between trailing actions; 16dp at an edge
+ * with no action. Hover 8% / pressed 10% on-surface; focus 3dp secondary outline, 2dp offset.
+ */
 export declare const search: import("tailwind-variants").TVReturnType<{
-    shadow: {
-        true: "shadow-elevation-3";
-        false: "";
+    hasLeading: {
+        true: "";
+        false: {
+            input: string;
+        };
+    };
+    hasTrailing: {
+        true: "";
+        false: {
+            input: string;
+        };
     };
 }, {
     base: string;
+    leading: string;
     leadingIcon: string;
-    trailingIcon: string;
     input: string;
+    trailing: string;
 }, undefined, {
-    shadow: {
-        true: "shadow-elevation-3";
-        false: "";
+    hasLeading: {
+        true: "";
+        false: {
+            input: string;
+        };
+    };
+    hasTrailing: {
+        true: "";
+        false: {
+            input: string;
+        };
     };
 }, {
     base: string;
+    leading: string;
     leadingIcon: string;
-    trailingIcon: string;
     input: string;
+    trailing: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
-    shadow: {
-        true: "shadow-elevation-3";
-        false: "";
+    hasLeading: {
+        true: "";
+        false: {
+            input: string;
+        };
+    };
+    hasTrailing: {
+        true: "";
+        false: {
+            input: string;
+        };
     };
 }, {
     base: string;
+    leading: string;
     leadingIcon: string;
-    trailingIcon: string;
     input: string;
+    trailing: string;
 }>>;