@windmorph/react 0.2.1 → 0.2.3

package/dist/components/toolbar/toolbar-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar-styles.js","names":[],"sources":["../../../src/components/toolbar/toolbar-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow the M3 Expressive spec and its tokens (the FloatingToolbar / DockedToolbar\n * token files), with Compose Material 3's FloatingToolbar.kt and AppBar.kt's\n * FlexibleBottomAppBar as the recipe.\n *\n * Docked: 64px, `surface-container`, square corners, no elevation, 16px at each end; items\n * sit 32px apart in the centre (the default) or spread out (space-between, for compact\n * windows).\n *\n * Floating: at least 64px across, full corners, 8px padding, `surface-container` (standard)\n * or `primary-container` (vibrant), level 1 by default (M3: floating toolbars have\n * elevation by default). Content is `on-surface-variant` (standard, the icon-button role)\n * or `on-primary-container` (vibrant). Compose's icon buttons take up 48px of layout while\n * ours take 40px (the 48px touch target is overlaid), so every content group adds 4px at\n * its ends and 8px between items, which reproduces Compose's spacing for icon buttons.\n * Leading / trailing content expands on the fast spatial spring and collapses on the fast\n * effects curve, its box's width (or height) in px between 0 and the content's measured\n * size, so the root's size follows it without transforms. Collapsed content stays in the tab order and\n * the accessibility tree, clipped to nothing, and focusing it expands the toolbar.\n *\n * Exiting on scroll (`visible={false}`): the toolbar slides off its edge on the fast\n * spatial spring (a `transform` set only while hidden, so it composes with Tailwind's\n * `translate-*` utilities); reduced motion fades it instead.\n *\n * With a FAB: the toolbar is level 1 expanded and level 0 collapsed, 8px from the FAB.\n * Collapsing shrinks the toolbar's width to 0 towards the FAB while the FAB grows from 56px\n * to 80px; the component keeps its expanded size, as Compose's layout does.\n *\n * Container colours and the floating toolbar's corners come from the component tokens\n * (`toolbar-tokens.ts`, `--md-comp-toolbar-docked-*` and `--md-comp-toolbar-floating-*`):\n * the roots carry `data-tokens`, the floating one also `data-color`. A consumer class still\n * wins in `cn()`.\n *\n * Every class is written out in full so Tailwind can find it.\n */\n\nconst spatialFast = [\n  '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]',\n  '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]',\n];\n\n/** The root's exit-on-scroll motion; each edge variant sets the hidden transform. */\nconst exitMotion = [\n  'data-hidden:invisible motion-reduce:data-hidden:opacity-0 motion-reduce:data-hidden:[transform:none]',\n  '[transition-property:transform,opacity,visibility]',\n  '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration),max(var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration))]',\n  '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),linear]',\n];\n\n/** Where a hidden toolbar goes: past its edge plus the 24px margin of a vertical toolbar. */\nconst exitEdges = {\n  bottom: { root: 'data-hidden:[transform:translateY(calc(100%+24px))]' },\n  top: { root: 'data-hidden:[transform:translateY(calc(-100%-24px))]' },\n  start: {\n    root: 'data-hidden:[transform:translateX(calc(-100%-24px))] rtl:data-hidden:[transform:translateX(calc(100%+24px))]',\n  },\n  end: {\n    root: 'data-hidden:[transform:translateX(calc(100%+24px))] rtl:data-hidden:[transform:translateX(calc(-100%-24px))]',\n  },\n} as const;\n\n/** Variant definitions for {@link DockedToolbar}; extend them to add variants. */\nexport const dockedToolbarStyles = tv({\n  slots: {\n    root: [\n      'flex h-[64px] w-full items-center bg-[var(--_md-comp-toolbar-docked-container-color)] ps-[16px] pe-[16px]',\n      // Forced colours paint the container as Canvas: a CanvasText line marks its top edge\n      // against the page (2026-10-15).\n      'forced-colors:border-t forced-colors:border-solid forced-colors:border-[CanvasText]',\n      ...exitMotion,\n      'data-hidden:[transform:translateY(100%)]',\n    ],\n  },\n  variants: {\n    arrangement: {\n      'space-between': { root: 'justify-between' },\n      centered: { root: 'justify-center gap-[32px]' },\n    },\n    // As the floating toolbar's (2026-10-15): vibrant is primary-container (its own token,\n    // scoped by `data-color`, 2026-10-17), and standard icon buttons take its content colour.\n    color: {\n      standard: { root: 'text-on-surface-variant' },\n      vibrant: {\n        root: 'text-on-primary-container [--md-comp-icon-button-icon-color:currentColor]',\n      },\n    },\n  },\n  defaultVariants: { arrangement: 'centered', color: 'standard' },\n});\n\n/** Variant definitions for {@link FloatingToolbar}; extend them to add colour styles. */\nexport const floatingToolbarStyles = tv({\n  slots: {\n    // Collapsing and expanding resize its parts in place, so none of them is ever the\n    // browser's scroll anchor (which would scroll the page to follow it). The root itself\n    // may be: its start edge stays put while it resizes, whereas excluding it hands the\n    // anchor to the content after it, which moves by the whole change (2026-10-15).\n    root: [\n      'inline-flex shrink-0 items-center justify-center [overflow-anchor:auto] **:[overflow-anchor:none]',\n      ...exitMotion,\n    ],\n    // A group of items (main, leading or trailing content).\n    items: 'flex shrink-0 items-center',\n    collapsibleItems: '',\n    // Collapsible leading / trailing content: a box that animates its width (or height) in\n    // px between 0 and the content's measured size (2026-10-17, as Compose's\n    // `expandHorizontally`), so expanding shows the spatial spring's overshoot, which a\n    // 0fr ↔ 1fr track couldn't. Collapsing uses the effects spring, which doesn't\n    // overshoot, because a size can't overshoot below 0 and would bounce back open by a\n    // pixel or two. Before it is measured (on the server) the box takes the content's\n    // natural size, or 0 collapsed. Collapsed content stays focusable and in the\n    // accessibility tree.\n    collapse: [\n      'flex shrink-0',\n      '[transition-property:width,height]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing)]',\n      'data-collapsed:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]',\n      // The content itself changed size (a web font arriving): follow it at once.\n      'data-resized:[transition-duration:0s]',\n    ],\n    // Clips the content horizontally (or vertically) while it collapses, leaving room for\n    // focus rings and touch targets on the other axis. Once the track has closed (a delay\n    // as long as the collapse) it clips everything, so no sliver stays visible.\n    clip: [\n      'flex min-h-0 min-w-0 data-collapsed:[clip-path:inset(50%)]',\n      '[transition-property:clip-path] [transition-duration:0s]',\n      'data-collapsed:[transition-delay:var(--md-sys-motion-spring-effects-fast-duration)]',\n      // Under reduced motion the track closes at once, and so does the clip.\n      'motion-reduce:data-collapsed:[transition-delay:0s]',\n    ],\n    // FAB layout: the toolbar's slot keeps the expanded width while the surface shrinks,\n    // collapsing on the effects spring for the same reason as `collapse`.\n    toolbarSlot: 'flex shrink-0',\n    surface: [\n      'overflow-hidden rounded-[var(--_md-comp-toolbar-floating-container-shape)] opacity-100',\n      // Forced colours drop the container and its shadow: a 1px CanvasText boundary instead,\n      // as menus and FABs (2026-10-15).\n      'forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n      'data-collapsed:opacity-0 data-collapsed:shadow-elevation-0',\n      'data-resized:[transition-duration:0s]',\n      // Width, height and shadow move on the spatial spring; the surface also fades on the\n      // fast effects spring, so the last pixels of a collapse never show as a thin line.\n      // Collapsed, it stays focusable and in the accessibility tree, clipped to nothing.\n      '[transition-property:width,height,box-shadow,opacity]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]',\n      'data-collapsed:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]',\n    ],\n    content: 'flex items-center',\n    fabSlot: 'flex shrink-0 items-center',\n    fabBox: [\n      'flex size-[56px] shrink-0 data-collapsed:size-[80px]',\n      '[transition-property:width,height]',\n      ...spatialFast,\n    ],\n  },\n  variants: {\n    orientation: {\n      horizontal: {\n        root: 'min-h-[64px] flex-row',\n        items: 'flex-row gap-[8px] ps-[4px] pe-[4px]',\n        // Collapsible content keeps its natural width while its box closes (it's measured).\n        collapsibleItems: 'w-max shrink-0',\n        collapse: 'data-collapsed:w-0',\n        clip: 'w-full flex-row [clip-path:inset(-12px_-2px)]',\n        toolbarSlot: 'h-[64px] w-(--m3-toolbar-size) flex-row',\n        surface: 'h-[64px] w-(--m3-toolbar-size) shrink-0 data-collapsed:w-0',\n        content: 'h-full w-max flex-row gap-[8px] ps-[12px] pe-[12px]',\n        fabSlot: 'w-[56px] flex-row',\n      },\n      vertical: {\n        root: 'min-w-[64px] flex-col',\n        items: 'flex-col gap-[8px] pt-[4px] pb-[4px]',\n        collapsibleItems: 'h-max shrink-0',\n        collapse: 'flex-col data-collapsed:h-0',\n        clip: 'h-full flex-col [clip-path:inset(-2px_-12px)]',\n        toolbarSlot: 'h-(--m3-toolbar-size) w-[64px] flex-col',\n        surface: 'h-(--m3-toolbar-size) w-[64px] shrink-0 data-collapsed:h-0',\n        content: 'h-max w-full flex-col gap-[8px] pt-[12px] pb-[12px]',\n        fabSlot: 'h-[56px] flex-col',\n      },\n    },\n    color: {\n      standard: { root: 'text-on-surface-variant' },\n      // Standard and outlined icon buttons take the vibrant content colour.\n      vibrant: {\n        root: 'text-on-primary-container [--md-comp-icon-button-icon-color:currentColor]',\n      },\n    },\n    /** Level 1 by default; turn it off over visually distinct content. */\n    elevated: { true: {}, false: {} },\n    exitEdge: exitEdges,\n    /** Paints the container on the root (no FAB) or on the toolbar surface (with a FAB). */\n    hasFab: {\n      false: {\n        root: [\n          'rounded-[var(--_md-comp-toolbar-floating-container-shape)] bg-[var(--_md-comp-toolbar-floating-container-color)] p-[8px]',\n          'forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n        ],\n      },\n      true: {\n        root: 'gap-[8px]',\n        surface: 'bg-[var(--_md-comp-toolbar-floating-container-color)]',\n      },\n    },\n    /** The side of the toolbar the FAB sits on (logical: start / top or end / bottom). */\n    fabAt: {\n      start: { toolbarSlot: 'justify-start', fabSlot: 'justify-start' },\n      end: { toolbarSlot: 'justify-end', fabSlot: 'justify-end' },\n    },\n  },\n  compoundVariants: [\n    { hasFab: false, elevated: true, class: { root: 'shadow-elevation-1' } },\n    // With a FAB, the toolbar's own surface is level 1 expanded and level 0 collapsed.\n    { hasFab: true, elevated: true, class: { surface: 'shadow-elevation-1' } },\n    // Fixed at the FAB's largest size, as Compose's layout: the FAB's spring overshoot\n    // (80 → 82px) spills over the edges instead of resizing the root and moving the page.\n    { hasFab: true, orientation: 'horizontal', class: { root: 'h-[80px]' } },\n    { hasFab: true, orientation: 'vertical', class: { root: 'w-[80px]' } },\n    // The FAB comes first visually but after the toolbar in reading order, as in Compose.\n    {\n      hasFab: true,\n      fabAt: 'start',\n      orientation: 'horizontal',\n      class: { root: 'flex-row-reverse' },\n    },\n    { hasFab: true, fabAt: 'start', orientation: 'vertical', class: { root: 'flex-col-reverse' } },\n  ],\n  defaultVariants: {\n    orientation: 'horizontal',\n    color: 'standard',\n    elevated: true,\n    exitEdge: 'bottom',\n    hasFab: false,\n    fabAt: 'end',\n  },\n});\n\n/**\n * Collapsing content is anchored like Compose's AnimatedVisibility: horizontally, leading\n * content expands from the start and shrinks towards the end (trailing: the reverse);\n * vertically, leading content stays at the bottom and trailing content at the top.\n */\nexport const toolbarCollapseAnchor = tv({\n  base: '',\n  variants: {\n    slot: { leading: '', trailing: '' },\n    orientation: { horizontal: '', vertical: '' },\n  },\n  compoundVariants: [\n    {\n      slot: 'leading',\n      orientation: 'horizontal',\n      class: 'justify-start data-collapsed:justify-end',\n    },\n    {\n      slot: 'trailing',\n      orientation: 'horizontal',\n      class: 'justify-end data-collapsed:justify-start',\n    },\n    { slot: 'leading', orientation: 'vertical', class: 'justify-end' },\n    { slot: 'trailing', orientation: 'vertical', class: 'justify-start' },\n  ],\n});\n\n/** Variant definitions for {@link ToolbarFab}. */\nexport const toolbarFabStyles = tv({\n  slots: {\n    root: [\n      'inline-flex size-full cursor-pointer items-center justify-center select-none',\n      'rounded-[var(--_md-comp-toolbar-floating-fab-container-shape)]',\n      'bg-[var(--_md-comp-toolbar-floating-fab-container-color)] text-[color:var(--_md-comp-toolbar-floating-fab-icon-color)]',\n      'state-layer focus-ring container-motion',\n      'forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n    ],\n    icon: 'inline-flex size-[24px] shrink-0 items-center justify-center [&>svg]:size-full',\n  },\n  variants: {\n    // The colours come from the FAB's tokens (`toolbarFabTokenSet`), picked by `data-color`.\n    color: { standard: {}, vibrant: {} },\n    /**\n     * Like `Fab`: level 2 (Compose's toolbar FAB: hover 3, pressed 2), level 1 (hover 2,\n     * pressed 1), or level 0 for a flat FAB. The hover level never applies while pressed.\n     */\n    elevation: {\n      default: { root: 'shadow-elevation-2 data-hovered:not-data-pressed:shadow-elevation-3' },\n      lowered: { root: 'shadow-elevation-1 data-hovered:not-data-pressed:shadow-elevation-2' },\n      flat: { root: 'shadow-elevation-0' },\n    },\n  },\n  defaultVariants: { color: 'standard', elevation: 'default' },\n});\n\n/**\n * The variants of {@link dockedToolbarStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type DockedToolbarStyleProps = VariantProps<typeof dockedToolbarStyles>;\nexport type DockedToolbarArrangement = NonNullable<DockedToolbarStyleProps['arrangement']>;\nexport type DockedToolbarColor = NonNullable<DockedToolbarStyleProps['color']>;\n/**\n * The variants of {@link floatingToolbarStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type FloatingToolbarStyleProps = VariantProps<typeof floatingToolbarStyles>;\nexport type FloatingToolbarColor = NonNullable<FloatingToolbarStyleProps['color']>;\nexport type ToolbarOrientation = NonNullable<FloatingToolbarStyleProps['orientation']>;\nexport type ToolbarExitEdge = NonNullable<FloatingToolbarStyleProps['exitEdge']>;\n"],"mappings":"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"}
+{"version":3,"file":"toolbar-styles.js","names":[],"sources":["../../../src/components/toolbar/toolbar-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow the M3 Expressive spec and its tokens (the FloatingToolbar / DockedToolbar\n * token files), with Compose Material 3's FloatingToolbar.kt and AppBar.kt's\n * FlexibleBottomAppBar as the recipe.\n *\n * Docked: 64px, `surface-container`, square corners, no elevation, 16px at each end; items\n * sit 32px apart in the centre (the default) or spread out (space-between, for compact\n * windows).\n *\n * Floating: at least 64px across, full corners, 8px padding, `surface-container` (standard)\n * or `primary-container` (vibrant), level 1 by default (M3: floating toolbars have\n * elevation by default). Content is `on-surface-variant` (standard, the icon-button role)\n * or `on-primary-container` (vibrant). Compose's icon buttons take up 48px of layout while\n * ours take 40px (the 48px touch target is overlaid), so every content group adds 4px at\n * its ends and 8px between items, which reproduces Compose's spacing for icon buttons.\n * Leading / trailing content expands on the fast spatial spring and collapses on the fast\n * effects curve, its box's width (or height) in px between 0 and the content's measured\n * size, so the root's size follows it without transforms. Collapsed content stays in the tab order and\n * the accessibility tree, clipped to nothing, and focusing it expands the toolbar.\n *\n * Exiting on scroll (`visible={false}`): the toolbar slides off its edge on the fast\n * spatial spring (a `transform` set only while hidden, so it composes with Tailwind's\n * `translate-*` utilities); reduced motion fades it instead.\n *\n * With a FAB: the toolbar is level 1 expanded and level 0 collapsed, 8px from the FAB.\n * Collapsing shrinks the toolbar's width to 0 towards the FAB while the FAB grows from 56px\n * to 80px; the component keeps its expanded size, as Compose's layout does.\n *\n * Container colours and the floating toolbar's corners come from the component tokens\n * (`toolbar-tokens.ts`, `--md-comp-toolbar-docked-*` and `--md-comp-toolbar-floating-*`):\n * the roots carry `data-tokens`, the floating one also `data-color`. A consumer class still\n * wins in `cn()`.\n *\n * Every class is written out in full so Tailwind can find it.\n */\n\nconst spatialFast = [\n  '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]',\n  '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]',\n];\n\n/** The root's exit-on-scroll motion; each edge variant sets the hidden transform. */\nconst exitMotion = [\n  'data-hidden:invisible motion-reduce:data-hidden:opacity-0 motion-reduce:data-hidden:[transform:none]',\n  '[transition-property:transform,opacity,visibility]',\n  '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration),max(var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration))]',\n  '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),linear]',\n];\n\n/** Where a hidden toolbar goes: past its edge plus the 24px margin of a vertical toolbar. */\nconst exitEdges = {\n  bottom: { root: 'data-hidden:[transform:translateY(calc(100%+24px))]' },\n  top: { root: 'data-hidden:[transform:translateY(calc(-100%-24px))]' },\n  start: {\n    root: 'data-hidden:[transform:translateX(calc(-100%-24px))] rtl:data-hidden:[transform:translateX(calc(100%+24px))]',\n  },\n  end: {\n    root: 'data-hidden:[transform:translateX(calc(100%+24px))] rtl:data-hidden:[transform:translateX(calc(-100%-24px))]',\n  },\n} as const;\n\n/** Variant definitions for {@link DockedToolbar}; extend them to add variants. */\nexport const dockedToolbarStyles = tv({\n  slots: {\n    root: [\n      'flex h-[64px] w-full items-center bg-[var(--_md-comp-toolbar-docked-container-color)] ps-[16px] pe-[16px]',\n      // Forced colours paint the container as Canvas: a CanvasText line marks its top edge\n      // against the page (2026-10-15).\n      'forced-colors:border-t forced-colors:border-solid forced-colors:border-[CanvasText]',\n      ...exitMotion,\n      'data-hidden:[transform:translateY(100%)]',\n    ],\n  },\n  variants: {\n    arrangement: {\n      'space-between': { root: 'justify-between' },\n      centered: { root: 'justify-center gap-[32px]' },\n    },\n    // As the floating toolbar's (2026-10-15): vibrant is primary-container (its own token,\n    // scoped by `data-color`, 2026-10-17), and standard icon buttons take its content colour.\n    color: {\n      standard: { root: 'text-on-surface-variant' },\n      vibrant: {\n        root: 'text-on-primary-container [--md-comp-icon-button-icon-color:currentColor]',\n      },\n    },\n  },\n  defaultVariants: { arrangement: 'centered', color: 'standard' },\n});\n\n/** Variant definitions for {@link FloatingToolbar}; extend them to add colour styles. */\nexport const floatingToolbarStyles = tv({\n  slots: {\n    // Collapsing and expanding resize its parts in place, so none of them is ever the\n    // browser's scroll anchor (which would scroll the page to follow it). The root itself\n    // may be: its start edge stays put while it resizes, whereas excluding it hands the\n    // anchor to the content after it, which moves by the whole change (2026-10-15).\n    root: [\n      'inline-flex shrink-0 items-center justify-center [overflow-anchor:auto] **:[overflow-anchor:none]',\n      ...exitMotion,\n    ],\n    // A group of items (main, leading or trailing content).\n    items: 'flex shrink-0 items-center',\n    collapsibleItems: '',\n    // Collapsible leading / trailing content: a box that animates its width (or height) in\n    // px between 0 and the content's measured size (2026-10-17, as Compose's\n    // `expandHorizontally`), so expanding shows the spatial spring's overshoot, which a\n    // 0fr ↔ 1fr track couldn't. Collapsing uses the effects spring, which doesn't\n    // overshoot, because a size can't overshoot below 0 and would bounce back open by a\n    // pixel or two. Before it is measured (on the server) the box takes the content's\n    // natural size, or 0 collapsed. Collapsed content stays focusable and in the\n    // accessibility tree.\n    collapse: [\n      'flex shrink-0',\n      '[transition-property:width,height]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing)]',\n      'data-collapsed:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]',\n      // The content itself changed size (a web font arriving): follow it at once.\n      'data-resized:[transition-duration:0s]',\n    ],\n    // Clips the content horizontally (or vertically) while it collapses, leaving room for\n    // focus rings and touch targets on the other axis. Once the track has closed (a delay\n    // as long as the collapse) it clips everything, so no sliver stays visible.\n    clip: [\n      'flex min-h-0 min-w-0 data-collapsed:[clip-path:inset(50%)]',\n      '[transition-property:clip-path] [transition-duration:0s]',\n      'data-collapsed:[transition-delay:var(--md-sys-motion-spring-effects-fast-duration)]',\n      // Under reduced motion the track closes at once, and so does the clip.\n      'motion-reduce:data-collapsed:[transition-delay:0s]',\n    ],\n    // FAB layout: the toolbar's slot keeps the expanded width while the surface shrinks,\n    // collapsing on the effects spring for the same reason as `collapse`.\n    toolbarSlot: 'flex shrink-0',\n    surface: [\n      'overflow-hidden rounded-[var(--_md-comp-toolbar-floating-container-shape)] opacity-100',\n      // Forced colours drop the container and its shadow: a 1px CanvasText boundary instead,\n      // as menus and FABs (2026-10-15).\n      'forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n      'data-collapsed:opacity-0 data-collapsed:shadow-elevation-0',\n      'data-resized:[transition-duration:0s]',\n      // Width, height and shadow move on the spatial spring; the surface also fades on the\n      // fast effects spring, so the last pixels of a collapse never show as a thin line.\n      // Collapsed, it stays focusable and in the accessibility tree, clipped to nothing.\n      '[transition-property:width,height,box-shadow,opacity]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]',\n      'data-collapsed:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]',\n    ],\n    content: 'flex items-center',\n    fabSlot: 'flex shrink-0 items-center',\n    fabBox: [\n      'flex size-[56px] shrink-0 data-collapsed:size-[80px]',\n      '[transition-property:width,height]',\n      ...spatialFast,\n    ],\n  },\n  variants: {\n    orientation: {\n      horizontal: {\n        root: 'min-h-[64px] flex-row',\n        items: 'flex-row gap-[8px] ps-[4px] pe-[4px]',\n        // Collapsible content keeps its natural width while its box closes (it's measured).\n        collapsibleItems: 'w-max shrink-0',\n        // Clipped on its axis while collapsed: the clip slot's `clip-path` hides the content\n        // but leaves it in the scrollable area, so a collapsed toolbar by the window's edge\n        // scrolled the page sideways (right to left, its leading content past the start edge).\n        collapse: 'data-collapsed:w-0 data-collapsed:overflow-x-clip',\n        clip: 'w-full flex-row [clip-path:inset(-12px_-2px)]',\n        toolbarSlot: 'h-[64px] w-(--m3-toolbar-size) flex-row',\n        surface: 'h-[64px] w-(--m3-toolbar-size) shrink-0 data-collapsed:w-0',\n        content: 'h-full w-max flex-row gap-[8px] ps-[12px] pe-[12px]',\n        fabSlot: 'w-[56px] flex-row',\n      },\n      vertical: {\n        root: 'min-w-[64px] flex-col',\n        items: 'flex-col gap-[8px] pt-[4px] pb-[4px]',\n        collapsibleItems: 'h-max shrink-0',\n        collapse: 'flex-col data-collapsed:h-0 data-collapsed:overflow-y-clip',\n        clip: 'h-full flex-col [clip-path:inset(-2px_-12px)]',\n        toolbarSlot: 'h-(--m3-toolbar-size) w-[64px] flex-col',\n        surface: 'h-(--m3-toolbar-size) w-[64px] shrink-0 data-collapsed:h-0',\n        content: 'h-max w-full flex-col gap-[8px] pt-[12px] pb-[12px]',\n        fabSlot: 'h-[56px] flex-col',\n      },\n    },\n    color: {\n      standard: { root: 'text-on-surface-variant' },\n      // Standard and outlined icon buttons take the vibrant content colour.\n      vibrant: {\n        root: 'text-on-primary-container [--md-comp-icon-button-icon-color:currentColor]',\n      },\n    },\n    /** Level 1 by default; turn it off over visually distinct content. */\n    elevated: { true: {}, false: {} },\n    exitEdge: exitEdges,\n    /** Paints the container on the root (no FAB) or on the toolbar surface (with a FAB). */\n    hasFab: {\n      false: {\n        root: [\n          'rounded-[var(--_md-comp-toolbar-floating-container-shape)] bg-[var(--_md-comp-toolbar-floating-container-color)] p-[8px]',\n          'forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n        ],\n      },\n      true: {\n        root: 'gap-[8px]',\n        surface: 'bg-[var(--_md-comp-toolbar-floating-container-color)]',\n      },\n    },\n    /** The side of the toolbar the FAB sits on (logical: start / top or end / bottom). */\n    fabAt: {\n      start: { toolbarSlot: 'justify-start', fabSlot: 'justify-start' },\n      end: { toolbarSlot: 'justify-end', fabSlot: 'justify-end' },\n    },\n  },\n  compoundVariants: [\n    { hasFab: false, elevated: true, class: { root: 'shadow-elevation-1' } },\n    // With a FAB, the toolbar's own surface is level 1 expanded and level 0 collapsed.\n    { hasFab: true, elevated: true, class: { surface: 'shadow-elevation-1' } },\n    // Fixed at the FAB's largest size, as Compose's layout: the FAB's spring overshoot\n    // (80 → 82px) spills over the edges instead of resizing the root and moving the page.\n    { hasFab: true, orientation: 'horizontal', class: { root: 'h-[80px]' } },\n    { hasFab: true, orientation: 'vertical', class: { root: 'w-[80px]' } },\n    // The FAB comes first visually but after the toolbar in reading order, as in Compose.\n    {\n      hasFab: true,\n      fabAt: 'start',\n      orientation: 'horizontal',\n      class: { root: 'flex-row-reverse' },\n    },\n    { hasFab: true, fabAt: 'start', orientation: 'vertical', class: { root: 'flex-col-reverse' } },\n  ],\n  defaultVariants: {\n    orientation: 'horizontal',\n    color: 'standard',\n    elevated: true,\n    exitEdge: 'bottom',\n    hasFab: false,\n    fabAt: 'end',\n  },\n});\n\n/**\n * Collapsing content is anchored like Compose's AnimatedVisibility: horizontally, leading\n * content expands from the start and shrinks towards the end (trailing: the reverse);\n * vertically, leading content stays at the bottom and trailing content at the top.\n */\nexport const toolbarCollapseAnchor = tv({\n  base: '',\n  variants: {\n    slot: { leading: '', trailing: '' },\n    orientation: { horizontal: '', vertical: '' },\n  },\n  compoundVariants: [\n    {\n      slot: 'leading',\n      orientation: 'horizontal',\n      class: 'justify-start data-collapsed:justify-end',\n    },\n    {\n      slot: 'trailing',\n      orientation: 'horizontal',\n      class: 'justify-end data-collapsed:justify-start',\n    },\n    { slot: 'leading', orientation: 'vertical', class: 'justify-end' },\n    { slot: 'trailing', orientation: 'vertical', class: 'justify-start' },\n  ],\n});\n\n/** Variant definitions for {@link ToolbarFab}. */\nexport const toolbarFabStyles = tv({\n  slots: {\n    root: [\n      'inline-flex size-full cursor-pointer items-center justify-center select-none',\n      'rounded-[var(--_md-comp-toolbar-floating-fab-container-shape)]',\n      'bg-[var(--_md-comp-toolbar-floating-fab-container-color)] text-[color:var(--_md-comp-toolbar-floating-fab-icon-color)]',\n      'state-layer focus-ring container-motion',\n      'forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n    ],\n    icon: 'inline-flex size-[24px] shrink-0 items-center justify-center [&>svg]:size-full',\n  },\n  variants: {\n    // The colours come from the FAB's tokens (`toolbarFabTokenSet`), picked by `data-color`.\n    color: { standard: {}, vibrant: {} },\n    /**\n     * Like `Fab`: level 2 (Compose's toolbar FAB: hover 3, pressed 2), level 1 (hover 2,\n     * pressed 1), or level 0 for a flat FAB. The hover level never applies while pressed.\n     */\n    elevation: {\n      default: { root: 'shadow-elevation-2 data-hovered:not-data-pressed:shadow-elevation-3' },\n      lowered: { root: 'shadow-elevation-1 data-hovered:not-data-pressed:shadow-elevation-2' },\n      flat: { root: 'shadow-elevation-0' },\n    },\n  },\n  defaultVariants: { color: 'standard', elevation: 'default' },\n});\n\n/**\n * The variants of {@link dockedToolbarStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type DockedToolbarStyleProps = VariantProps<typeof dockedToolbarStyles>;\nexport type DockedToolbarArrangement = NonNullable<DockedToolbarStyleProps['arrangement']>;\nexport type DockedToolbarColor = NonNullable<DockedToolbarStyleProps['color']>;\n/**\n * The variants of {@link floatingToolbarStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type FloatingToolbarStyleProps = VariantProps<typeof floatingToolbarStyles>;\nexport type FloatingToolbarColor = NonNullable<FloatingToolbarStyleProps['color']>;\nexport type ToolbarOrientation = NonNullable<FloatingToolbarStyleProps['orientation']>;\nexport type ToolbarExitEdge = NonNullable<FloatingToolbarStyleProps['exitEdge']>;\n"],"mappings":";;AAsCA,MAAM,cAAc,CAClB,2EACA,8EACF;;AAGA,MAAM,aAAa;CACjB;CACA;CACA;CACA;AACF;;AAGA,MAAM,YAAY;CAChB,QAAQ,EAAE,MAAM,sDAAsD;CACtE,KAAK,EAAE,MAAM,uDAAuD;CACpE,OAAO,EACL,MAAM,+GACR;CACA,KAAK,EACH,MAAM,+GACR;AACF;;AAGA,MAAa,sBAAsB,GAAG;CACpC,OAAO,EACL,MAAM;EACJ;EAGA;EACA,GAAG;EACH;CACF,EACF;CACA,UAAU;EACR,aAAa;GACX,iBAAiB,EAAE,MAAM,kBAAkB;GAC3C,UAAU,EAAE,MAAM,4BAA4B;EAChD;EAGA,OAAO;GACL,UAAU,EAAE,MAAM,0BAA0B;GAC5C,SAAS,EACP,MAAM,4EACR;EACF;CACF;CACA,iBAAiB;EAAE,aAAa;EAAY,OAAO;CAAW;AAChE,CAAC;;AAGD,MAAa,wBAAwB,GAAG;CACtC,OAAO;EAKL,MAAM,CACJ,qGACA,GAAG,UACL;EAEA,OAAO;EACP,kBAAkB;EASlB,UAAU;GACR;GACA;GACA;GACA;GACA;GAEA;EACF;EAIA,MAAM;GACJ;GACA;GACA;GAEA;EACF;EAGA,aAAa;EACb,SAAS;GACP;GAGA;GACA;GACA;GAIA;GACA;GACA;GACA;EACF;EACA,SAAS;EACT,SAAS;EACT,QAAQ;GACN;GACA;GACA,GAAG;EACL;CACF;CACA,UAAU;EACR,aAAa;GACX,YAAY;IACV,MAAM;IACN,OAAO;IAEP,kBAAkB;IAIlB,UAAU;IACV,MAAM;IACN,aAAa;IACb,SAAS;IACT,SAAS;IACT,SAAS;GACX;GACA,UAAU;IACR,MAAM;IACN,OAAO;IACP,kBAAkB;IAClB,UAAU;IACV,MAAM;IACN,aAAa;IACb,SAAS;IACT,SAAS;IACT,SAAS;GACX;EACF;EACA,OAAO;GACL,UAAU,EAAE,MAAM,0BAA0B;GAE5C,SAAS,EACP,MAAM,4EACR;EACF;;EAEA,UAAU;GAAE,MAAM,CAAC;GAAG,OAAO,CAAC;EAAE;EAChC,UAAU;;EAEV,QAAQ;GACN,OAAO,EACL,MAAM,CACJ,4HACA,mFACF,EACF;GACA,MAAM;IACJ,MAAM;IACN,SAAS;GACX;EACF;;EAEA,OAAO;GACL,OAAO;IAAE,aAAa;IAAiB,SAAS;GAAgB;GAChE,KAAK;IAAE,aAAa;IAAe,SAAS;GAAc;EAC5D;CACF;CACA,kBAAkB;EAChB;GAAE,QAAQ;GAAO,UAAU;GAAM,OAAO,EAAE,MAAM,qBAAqB;EAAE;EAEvE;GAAE,QAAQ;GAAM,UAAU;GAAM,OAAO,EAAE,SAAS,qBAAqB;EAAE;EAGzE;GAAE,QAAQ;GAAM,aAAa;GAAc,OAAO,EAAE,MAAM,WAAW;EAAE;EACvE;GAAE,QAAQ;GAAM,aAAa;GAAY,OAAO,EAAE,MAAM,WAAW;EAAE;EAErE;GACE,QAAQ;GACR,OAAO;GACP,aAAa;GACb,OAAO,EAAE,MAAM,mBAAmB;EACpC;EACA;GAAE,QAAQ;GAAM,OAAO;GAAS,aAAa;GAAY,OAAO,EAAE,MAAM,mBAAmB;EAAE;CAC/F;CACA,iBAAiB;EACf,aAAa;EACb,OAAO;EACP,UAAU;EACV,UAAU;EACV,QAAQ;EACR,OAAO;CACT;AACF,CAAC;;;;;;AAOD,MAAa,wBAAwB,GAAG;CACtC,MAAM;CACN,UAAU;EACR,MAAM;GAAE,SAAS;GAAI,UAAU;EAAG;EAClC,aAAa;GAAE,YAAY;GAAI,UAAU;EAAG;CAC9C;CACA,kBAAkB;EAChB;GACE,MAAM;GACN,aAAa;GACb,OAAO;EACT;EACA;GACE,MAAM;GACN,aAAa;GACb,OAAO;EACT;EACA;GAAE,MAAM;GAAW,aAAa;GAAY,OAAO;EAAc;EACjE;GAAE,MAAM;GAAY,aAAa;GAAY,OAAO;EAAgB;CACtE;AACF,CAAC;;AAGD,MAAa,mBAAmB,GAAG;CACjC,OAAO;EACL,MAAM;GACJ;GACA;GACA;GACA;GACA;EACF;EACA,MAAM;CACR;CACA,UAAU;EAER,OAAO;GAAE,UAAU,CAAC;GAAG,SAAS,CAAC;EAAE;;;;;EAKnC,WAAW;GACT,SAAS,EAAE,MAAM,sEAAsE;GACvF,SAAS,EAAE,MAAM,sEAAsE;GACvF,MAAM,EAAE,MAAM,qBAAqB;EACrC;CACF;CACA,iBAAiB;EAAE,OAAO;EAAY,WAAW;CAAU;AAC7D,CAAC"}

package/dist/index.d.ts

@@ -107,7 +107,8 @@ import { TopAppBar, TopAppBarClassNames, TopAppBarProps, TopAppBarScrolledColor
 import { appBarTokenSet } from "./components/app-bar/app-bar-tokens.js";
 import { SearchBar, SearchBarClassNames, SearchBarIconState, SearchBarInputProps, SearchBarProps, SearchBarView } from "./components/search/SearchBar.js";
 import { SearchAppBar, SearchAppBarClassNames, SearchAppBarProps } from "./components/search/SearchAppBar.js";
-import { SearchAppBarStyleProps, SearchBarStyleProps, searchAppBarStyles, searchBarStyles } from "./components/search/search-styles.js";
+import { SearchField, SearchFieldClassNames, SearchFieldInputProps, SearchFieldLabels, SearchFieldProps } from "./components/search/SearchField.js";
+import { SearchAppBarStyleProps, SearchBarStyleProps, SearchFieldStyleProps, searchAppBarStyles, searchBarStyles, searchFieldStyles } from "./components/search/search-styles.js";
 import { searchBarTokenSet, searchViewTokenSet } from "./components/search/search-tokens.js";
 import { DividerInset, DividerOrientation, DividerStyleProps, dividerStyles, labeledDividerStyles } from "./components/divider/divider-styles.js";
 import { Divider, DividerProps, LabeledDivider, LabeledDividerClassNames, LabeledDividerProps } from "./components/divider/Divider.js";
@@ -141,4 +142,4 @@ import { TimeField, TimeFieldClassNames, TimeFieldLabels, TimeFieldProps } from
 import { TimePickerStyleProps, timePickerStyles } from "./components/time-picker/time-picker-styles.js";
 import { timePickerTokenSet } from "./components/time-picker/time-picker-tokens.js";
 import { Time, parseTime } from "@internationalized/date";
-export { AssistChip, type AssistChipProps, Autocomplete, type AutocompleteClassNames, AutocompleteItem, type AutocompleteKey, type AutocompleteLabels, type AutocompleteProps, AutocompleteSection, BREAKPOINTS, BREAKPOINT_NAMES, BUILT_IN_THEMES, BUILT_IN_THEME_NAMES, Badge, type BadgeClassNames, type BadgeLabels, type BadgeProps, type BadgeStyleProps, BadgedBox, type BadgedBoxClassNames, type BadgedBoxProps, BottomSheet, type BottomSheetClassNames, type BottomSheetDetent, type BottomSheetLabels, type BottomSheetProps, type BottomSheetStyleProps, BreakpointName, BuiltInThemeName, Button, type ButtonActionProps, type ButtonClassNames, ButtonContext, type ButtonContextValue, ButtonGroup, type ButtonGroupClassNames, type ButtonGroupLabels, type ButtonGroupProps, type ButtonGroupSelectionMode, type ButtonGroupVariant, type ButtonLabels, type ButtonLinkProps, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonStyleProps, type ButtonToggleProps, type ButtonVariant, COLOR_MODES, COLOR_ROLES, CONTRAST_LEVELS, CONTRAST_LEVEL_NAMES, CORNERS, CORNER_NAMES, CUSTOM_COLORS, CUSTOM_COLOR_ROLES, Card, type CardActionProps, type CardLinkProps, type CardProps, type CardStaticProps, type CardStyleProps, type CardVariant, Carousel, type CarouselClassNames, type CarouselProps, type CarouselStyleProps, Checkbox, type CheckboxClassNames, type CheckboxProps, type CheckboxStyleProps, type ChipClassNames, type ChipLabels, type ChipOutline, ChipSet, type ChipSetClassNames, type ChipSetLayout, type ChipSetProps, type ChipStyleProps, CircularProgressIndicator, type CircularProgressIndicatorClassNames, type CircularProgressIndicatorProps, type CircularProgressStyleProps, type ClosedBy, ColorMode, ColorRole, type ComponentToken, type ComponentTokenScope, type ComponentTokenSet, ContextMenuTrigger, type ContextMenuTriggerProps, ContrastLevel, CornerName, type CreateThemeOptions, CustomColorName, DEFAULT_CUSTOM_COLORS, DEFAULT_DENSITY, DEFAULT_MOTION_SCHEME, DEFAULT_STORAGE_KEY, DEFAULT_THEME, DEFAULT_THEME_STATE, DENSITIES, DateField, type DateFieldClassNames, type DateFieldLabels, type DateFieldProps, type DateInputLabels, DatePicker, type DatePickerClassNames, type DatePickerLabels, type DatePickerProps, type DatePickerStyleProps, type DateRange, DateRangePicker, type DateRangePickerClassNames, type DateRangePickerProps, Density, Dialog, DialogActions, type DialogActionsProps, type DialogClassNames, DialogContent, type DialogContentProps, type DialogFullScreen, DialogHeader, type DialogHeaderClassNames, type DialogHeaderLabels, type DialogHeaderProps, type DialogOrigin, type DialogPlacement, type DialogProps, type DialogRenderProps, type DialogStyleProps, DialogTitle, type DialogTitleProps, type DialogTransition, DialogTrigger, type DialogTriggerProps, Divider, type DividerInset, type DividerOrientation, type DividerProps, type DividerStyleProps, DockedToolbar, type DockedToolbarArrangement, type DockedToolbarClassNames, type DockedToolbarColor, type DockedToolbarProps, type DockedToolbarStyleProps, ELEVATION_LEVELS, ELEVATION_LEVEL_NAMES, ElevationLevel, ExtendedFab, type ExtendedFabClassNames, type ExtendedFabProps, type ExtendedFabSize, type ExtendedFabStyleProps, FOCUS_INDICATOR, Fab, type FabClassNames, type FabColor, type FabElevation, FabMenu, type FabMenuClassNames, type FabMenuColor, FabMenuItem, type FabMenuItemClassNames, type FabMenuItemProps, type FabMenuPresentation, type FabMenuProps, type FabMenuSize, type FabMenuStyleProps, type FabProps, type FabSize, type FabStyleProps, FilterChip, type FilterChipClassNames, type FilterChipProps, FloatingToolbar, type FloatingToolbarClassNames, type FloatingToolbarColor, type FloatingToolbarProps, type FloatingToolbarStyleProps, IconButton, type IconButtonActionProps, type IconButtonClassNames, type IconButtonLinkProps, type IconButtonProps, type IconButtonStyleProps, type IconButtonToggleProps, type IconButtonVariant, type IconButtonWidth, type IconTransition, InputChip, type InputChipClassNames, type InputChipProps, LEGACY_DURATIONS, LEGACY_EASINGS, LabeledDivider, type LabeledDividerClassNames, type LabeledDividerProps, type LineLimit, LinearProgressIndicator, type LinearProgressIndicatorClassNames, type LinearProgressIndicatorProps, type LinearProgressStyleProps, List, type ListClassNames, type ListDividers, ListItem, ListItemAvatar, type ListItemAvatarProps, ListItemImage, type ListItemImageProps, type ListItemProps, ListItemVideo, type ListItemVideoProps, type ListProps, ListSection, type ListSectionProps, type ListStyleProps, type ListVariant, LoadingIndicator, type LoadingIndicatorClassNames, type LoadingIndicatorProps, type LoadingIndicatorStyleProps, type LoadingIndicatorVariant, MOTION_SCHEMES, Menu, type MenuClassNames, MenuGroup, type MenuGroupProps, MenuItem, type MenuItemProps, type Key as MenuKey, type MenuLabels, type MenuLayout, type MenuPlacement, type MenuPresentation, type MenuProps, type MenuStyleProps, MenuTrigger, type MenuTriggerProps, type MenuVariant, MotionScheme, MotionSpring, type NavItemClassNames, type NavItemLayout, NavigationBar, type NavigationBarArrangement, type NavigationBarClassNames, NavigationBarItem, type NavigationBarItemProps, type NavigationBarProps, type NavigationBarStyleProps, NavigationRail, type NavigationRailClassNames, NavigationRailItem, type NavigationRailItemProps, type NavigationRailProps, type NavigationRailState, type OptionItemProps, OptionPopover, type OptionSectionProps, PALETTE_NAMES, PaletteName, PaletteSource, PickerDialog, type PickerDialogClassNames, type PickerDialogLabels, type PickerDialogProps, type PublicComponentToken, PullToRefresh, type PullToRefreshClassNames, type PullToRefreshLabels, type PullToRefreshProps, Radio, type RadioClassNames, RadioGroup, type RadioGroupClassNames, type RadioGroupProps, type RadioGroupStyleProps, type RadioProps, type RadioStyleProps, RangeSlider, type RangeSliderLabels, type RangeSliderProps, ResolvedColorMode, RichTooltip, type RichTooltipClassNames, type RichTooltipProps, type RichTooltipStyleProps, RichTooltipTrigger, type RichTooltipTriggerProps, SCHEME_VARIANTS, SHADOW_AMBIENT_OPACITY, SHADOW_KEY_OPACITY, SPRINGS, SPRING_FAMILIES, SPRING_SPEEDS, SPRING_TOKEN_NAMES, STATE_OPACITIES, SchemeVariant, SearchAppBar, type SearchAppBarClassNames, type SearchAppBarProps, type SearchAppBarStyleProps, SearchBar, type SearchBarClassNames, type SearchBarIconState, type SearchBarInputProps, type SearchBarProps, type SearchBarStyleProps, type SearchBarView, Select, type SelectClassNames, SelectItem, type SelectKey, type SelectLabels, type SelectPresentation, type SelectProps, SelectSection, type SelectedOption, SheetTrigger, type SheetTriggerProps, type ShowSnackbarOptions, SideSheet, type SideSheetClassNames, type SideSheetLabels, type SideSheetProps, type SideSheetStyleProps, Slider, type SliderClassNames, type SliderOrientation, type SliderProps, type SliderSize, type SliderStyleProps, Snackbar, type SnackbarClassNames, type SnackbarData, type SnackbarDuration, SnackbarHost, type SnackbarHostProps, SnackbarHostState, type SnackbarLabels, type SnackbarProps, type SnackbarResult, type SnackbarStyleProps, type SnackbarVisuals, SplitButton, type SplitButtonClassNames, type SplitButtonLabels, type SplitButtonProps, type SplitButtonSize, type SplitButtonStyleProps, type SplitButtonVariant, SpringFamily, SpringSpeed, SpringToken, StateName, SubmenuTrigger, type SubmenuTriggerProps, SuggestionChip, type SuggestionChipProps, Switch, type SwitchClassNames, type SwitchProps, type SwitchStyleProps, TYPEFACES, TYPE_ROLES, TYPE_SCALE, Tab, type TabProps, Tabs, type TabsClassNames, type TabsProps, type TabsStyleProps, type TabsVariant, TextField, type TextFieldClassNames, type TextFieldLabels, type TextFieldProps, type TextFieldStyleProps, type TextFieldVariant, type ThemeContextValue, type ThemeDefinition, ThemePalettes, ThemeProvider, type ThemeProviderProps, ThemeScope, type ThemeScopeProps, ThemeScript, type ThemeScriptProps, ThemeSeed, type ThemeState, type ThemeStorage, Time, TimeField, type TimeFieldClassNames, type TimeFieldLabels, type TimeFieldProps, TimePicker, type TimePickerClassNames, type TimePickerLabels, type TimePickerMode, TimePickerModeToggle, type TimePickerModeToggleProps, type TimePickerProps, type TimePickerStyleProps, ToggleGroupStateContext, type TokenPaints, type TokenValue, type ToolbarExitEdge, ToolbarFab, type ToolbarFabClassNames, type ToolbarFabProps, type ToolbarOrientation, type ToolbarScrollExitOptions, type ToolbarScrollExpansionOptions, Tooltip, type TooltipClassNames, type TooltipPlacement, TooltipPlacementContext, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, TopAppBar, type TopAppBarClassNames, type TopAppBarProps, type TopAppBarScrollBehavior, type TopAppBarScrolledColor, type TopAppBarStyleProps, type TopAppBarTitleAlign, type TopAppBarVariant, TypeRole, TypeStyle, Typeface, type VariantProps, ZIndexName, Z_INDEX, appBarTokenSet, assistChipTokenSet, badgeStyles, badgeTokenSet, badgedBoxStyles, bottomSheetStyles, bottomSheetTokenSet, buttonGroupStyles, buttonStyles, buttonTokenSet, buttonVariantClasses, cardStyles, cardTokenSet, carouselStyles, carouselTokenSet, checkboxStyles, checkboxTokenSet, chipSetStyles, chipStyles, circularProgressStyles, cn, color, colorAt, componentTokenList, componentTokensCss, corner, createTheme, datePickerStyles, datePickerTokenSet, defineComponentTokens, densityAttribute, dialogStyles, dialogTokenSet, dividerStyles, dividerTokenSet, dockedDatePickerStyles, dockedToolbarStyles, dockedToolbarTokenSet, elevation, extendedFabStyles, extendedFabTokenSet, fabMenuStyles, fabMenuTokenSet, fabStyles, fabTokenSet, filterChipTokenSet, floatingToolbarStyles, floatingToolbarTokenSet, getM3Spring, getThemeScriptSource, iconButtonStyles, iconButtonTokenSet, inputChipTokenSet, isComponentTokenSet, isDensity, labeledDividerStyles, linearProgressStyles, listMediaStyles, listStyles, listTokenSet, loadingIndicatorStyles, loadingIndicatorTokenSet, matchesSearch, menuStyles, menuTokenSet, navBarTokenSet, navItemStyles, navRailTokenSet, navigationBarStyles, navigationRailStyles, normalizeSearch, parseThemeState, parseTime, pickerDialogStyles, plainTooltipTokenSet, progressIndicatorTokenSet, pullToRefreshStyles, px, radioGroupStyles, radioStyles, radioTokenSet, richTooltipStyles, richTooltipTokenSet, searchAppBarStyles, searchBarStyles, searchBarTokenSet, searchViewTokenSet, serializeThemeState, sideSheetStyles, sideSheetTokenSet, sliderStyles, sliderTokenSet, snackbarHostStyles, snackbarStyles, snackbarTokenSet, splitButtonStyles, splitButtonTokenSet, spring, springPosition, springSettleDuration, springToLinearEasing, suggestionChipTokenSet, switchStyles, switchTokenSet, tabsStyles, tabsTokenSet, textFieldStyles, textFieldTokenSet, themeAttributes, timePickerStyles, timePickerTokenSet, toMotionSpring, toolbarFabStyles, toolbarFabTokenSet, tooltipStyles, topAppBarStyles, tv, twMergeConfig, typeTokens, typescale, useM3Spring, useNavigationRail, useSnackbarHostState, useTheme, useThemeScope, useTimePickerRoom, useToolbarScrollExit, useToolbarScrollExpansion };
+export { AssistChip, type AssistChipProps, Autocomplete, type AutocompleteClassNames, AutocompleteItem, type AutocompleteKey, type AutocompleteLabels, type AutocompleteProps, AutocompleteSection, BREAKPOINTS, BREAKPOINT_NAMES, BUILT_IN_THEMES, BUILT_IN_THEME_NAMES, Badge, type BadgeClassNames, type BadgeLabels, type BadgeProps, type BadgeStyleProps, BadgedBox, type BadgedBoxClassNames, type BadgedBoxProps, BottomSheet, type BottomSheetClassNames, type BottomSheetDetent, type BottomSheetLabels, type BottomSheetProps, type BottomSheetStyleProps, BreakpointName, BuiltInThemeName, Button, type ButtonActionProps, type ButtonClassNames, ButtonContext, type ButtonContextValue, ButtonGroup, type ButtonGroupClassNames, type ButtonGroupLabels, type ButtonGroupProps, type ButtonGroupSelectionMode, type ButtonGroupVariant, type ButtonLabels, type ButtonLinkProps, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonStyleProps, type ButtonToggleProps, type ButtonVariant, COLOR_MODES, COLOR_ROLES, CONTRAST_LEVELS, CONTRAST_LEVEL_NAMES, CORNERS, CORNER_NAMES, CUSTOM_COLORS, CUSTOM_COLOR_ROLES, Card, type CardActionProps, type CardLinkProps, type CardProps, type CardStaticProps, type CardStyleProps, type CardVariant, Carousel, type CarouselClassNames, type CarouselProps, type CarouselStyleProps, Checkbox, type CheckboxClassNames, type CheckboxProps, type CheckboxStyleProps, type ChipClassNames, type ChipLabels, type ChipOutline, ChipSet, type ChipSetClassNames, type ChipSetLayout, type ChipSetProps, type ChipStyleProps, CircularProgressIndicator, type CircularProgressIndicatorClassNames, type CircularProgressIndicatorProps, type CircularProgressStyleProps, type ClosedBy, ColorMode, ColorRole, type ComponentToken, type ComponentTokenScope, type ComponentTokenSet, ContextMenuTrigger, type ContextMenuTriggerProps, ContrastLevel, CornerName, type CreateThemeOptions, CustomColorName, DEFAULT_CUSTOM_COLORS, DEFAULT_DENSITY, DEFAULT_MOTION_SCHEME, DEFAULT_STORAGE_KEY, DEFAULT_THEME, DEFAULT_THEME_STATE, DENSITIES, DateField, type DateFieldClassNames, type DateFieldLabels, type DateFieldProps, type DateInputLabels, DatePicker, type DatePickerClassNames, type DatePickerLabels, type DatePickerProps, type DatePickerStyleProps, type DateRange, DateRangePicker, type DateRangePickerClassNames, type DateRangePickerProps, Density, Dialog, DialogActions, type DialogActionsProps, type DialogClassNames, DialogContent, type DialogContentProps, type DialogFullScreen, DialogHeader, type DialogHeaderClassNames, type DialogHeaderLabels, type DialogHeaderProps, type DialogOrigin, type DialogPlacement, type DialogProps, type DialogRenderProps, type DialogStyleProps, DialogTitle, type DialogTitleProps, type DialogTransition, DialogTrigger, type DialogTriggerProps, Divider, type DividerInset, type DividerOrientation, type DividerProps, type DividerStyleProps, DockedToolbar, type DockedToolbarArrangement, type DockedToolbarClassNames, type DockedToolbarColor, type DockedToolbarProps, type DockedToolbarStyleProps, ELEVATION_LEVELS, ELEVATION_LEVEL_NAMES, ElevationLevel, ExtendedFab, type ExtendedFabClassNames, type ExtendedFabProps, type ExtendedFabSize, type ExtendedFabStyleProps, FOCUS_INDICATOR, Fab, type FabClassNames, type FabColor, type FabElevation, FabMenu, type FabMenuClassNames, type FabMenuColor, FabMenuItem, type FabMenuItemClassNames, type FabMenuItemProps, type FabMenuPresentation, type FabMenuProps, type FabMenuSize, type FabMenuStyleProps, type FabProps, type FabSize, type FabStyleProps, FilterChip, type FilterChipClassNames, type FilterChipProps, FloatingToolbar, type FloatingToolbarClassNames, type FloatingToolbarColor, type FloatingToolbarProps, type FloatingToolbarStyleProps, IconButton, type IconButtonActionProps, type IconButtonClassNames, type IconButtonLinkProps, type IconButtonProps, type IconButtonStyleProps, type IconButtonToggleProps, type IconButtonVariant, type IconButtonWidth, type IconTransition, InputChip, type InputChipClassNames, type InputChipProps, LEGACY_DURATIONS, LEGACY_EASINGS, LabeledDivider, type LabeledDividerClassNames, type LabeledDividerProps, type LineLimit, LinearProgressIndicator, type LinearProgressIndicatorClassNames, type LinearProgressIndicatorProps, type LinearProgressStyleProps, List, type ListClassNames, type ListDividers, ListItem, ListItemAvatar, type ListItemAvatarProps, ListItemImage, type ListItemImageProps, type ListItemProps, ListItemVideo, type ListItemVideoProps, type ListProps, ListSection, type ListSectionProps, type ListStyleProps, type ListVariant, LoadingIndicator, type LoadingIndicatorClassNames, type LoadingIndicatorProps, type LoadingIndicatorStyleProps, type LoadingIndicatorVariant, MOTION_SCHEMES, Menu, type MenuClassNames, MenuGroup, type MenuGroupProps, MenuItem, type MenuItemProps, type Key as MenuKey, type MenuLabels, type MenuLayout, type MenuPlacement, type MenuPresentation, type MenuProps, type MenuStyleProps, MenuTrigger, type MenuTriggerProps, type MenuVariant, MotionScheme, MotionSpring, type NavItemClassNames, type NavItemLayout, NavigationBar, type NavigationBarArrangement, type NavigationBarClassNames, NavigationBarItem, type NavigationBarItemProps, type NavigationBarProps, type NavigationBarStyleProps, NavigationRail, type NavigationRailClassNames, NavigationRailItem, type NavigationRailItemProps, type NavigationRailProps, type NavigationRailState, type OptionItemProps, OptionPopover, type OptionSectionProps, PALETTE_NAMES, PaletteName, PaletteSource, PickerDialog, type PickerDialogClassNames, type PickerDialogLabels, type PickerDialogProps, type PublicComponentToken, PullToRefresh, type PullToRefreshClassNames, type PullToRefreshLabels, type PullToRefreshProps, Radio, type RadioClassNames, RadioGroup, type RadioGroupClassNames, type RadioGroupProps, type RadioGroupStyleProps, type RadioProps, type RadioStyleProps, RangeSlider, type RangeSliderLabels, type RangeSliderProps, ResolvedColorMode, RichTooltip, type RichTooltipClassNames, type RichTooltipProps, type RichTooltipStyleProps, RichTooltipTrigger, type RichTooltipTriggerProps, SCHEME_VARIANTS, SHADOW_AMBIENT_OPACITY, SHADOW_KEY_OPACITY, SPRINGS, SPRING_FAMILIES, SPRING_SPEEDS, SPRING_TOKEN_NAMES, STATE_OPACITIES, SchemeVariant, SearchAppBar, type SearchAppBarClassNames, type SearchAppBarProps, type SearchAppBarStyleProps, SearchBar, type SearchBarClassNames, type SearchBarIconState, type SearchBarInputProps, type SearchBarProps, type SearchBarStyleProps, type SearchBarView, SearchField, type SearchFieldClassNames, type SearchFieldInputProps, type SearchFieldLabels, type SearchFieldProps, type SearchFieldStyleProps, Select, type SelectClassNames, SelectItem, type SelectKey, type SelectLabels, type SelectPresentation, type SelectProps, SelectSection, type SelectedOption, SheetTrigger, type SheetTriggerProps, type ShowSnackbarOptions, SideSheet, type SideSheetClassNames, type SideSheetLabels, type SideSheetProps, type SideSheetStyleProps, Slider, type SliderClassNames, type SliderOrientation, type SliderProps, type SliderSize, type SliderStyleProps, Snackbar, type SnackbarClassNames, type SnackbarData, type SnackbarDuration, SnackbarHost, type SnackbarHostProps, SnackbarHostState, type SnackbarLabels, type SnackbarProps, type SnackbarResult, type SnackbarStyleProps, type SnackbarVisuals, SplitButton, type SplitButtonClassNames, type SplitButtonLabels, type SplitButtonProps, type SplitButtonSize, type SplitButtonStyleProps, type SplitButtonVariant, SpringFamily, SpringSpeed, SpringToken, StateName, SubmenuTrigger, type SubmenuTriggerProps, SuggestionChip, type SuggestionChipProps, Switch, type SwitchClassNames, type SwitchProps, type SwitchStyleProps, TYPEFACES, TYPE_ROLES, TYPE_SCALE, Tab, type TabProps, Tabs, type TabsClassNames, type TabsProps, type TabsStyleProps, type TabsVariant, TextField, type TextFieldClassNames, type TextFieldLabels, type TextFieldProps, type TextFieldStyleProps, type TextFieldVariant, type ThemeContextValue, type ThemeDefinition, ThemePalettes, ThemeProvider, type ThemeProviderProps, ThemeScope, type ThemeScopeProps, ThemeScript, type ThemeScriptProps, ThemeSeed, type ThemeState, type ThemeStorage, Time, TimeField, type TimeFieldClassNames, type TimeFieldLabels, type TimeFieldProps, TimePicker, type TimePickerClassNames, type TimePickerLabels, type TimePickerMode, TimePickerModeToggle, type TimePickerModeToggleProps, type TimePickerProps, type TimePickerStyleProps, ToggleGroupStateContext, type TokenPaints, type TokenValue, type ToolbarExitEdge, ToolbarFab, type ToolbarFabClassNames, type ToolbarFabProps, type ToolbarOrientation, type ToolbarScrollExitOptions, type ToolbarScrollExpansionOptions, Tooltip, type TooltipClassNames, type TooltipPlacement, TooltipPlacementContext, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, TopAppBar, type TopAppBarClassNames, type TopAppBarProps, type TopAppBarScrollBehavior, type TopAppBarScrolledColor, type TopAppBarStyleProps, type TopAppBarTitleAlign, type TopAppBarVariant, TypeRole, TypeStyle, Typeface, type VariantProps, ZIndexName, Z_INDEX, appBarTokenSet, assistChipTokenSet, badgeStyles, badgeTokenSet, badgedBoxStyles, bottomSheetStyles, bottomSheetTokenSet, buttonGroupStyles, buttonStyles, buttonTokenSet, buttonVariantClasses, cardStyles, cardTokenSet, carouselStyles, carouselTokenSet, checkboxStyles, checkboxTokenSet, chipSetStyles, chipStyles, circularProgressStyles, cn, color, colorAt, componentTokenList, componentTokensCss, corner, createTheme, datePickerStyles, datePickerTokenSet, defineComponentTokens, densityAttribute, dialogStyles, dialogTokenSet, dividerStyles, dividerTokenSet, dockedDatePickerStyles, dockedToolbarStyles, dockedToolbarTokenSet, elevation, extendedFabStyles, extendedFabTokenSet, fabMenuStyles, fabMenuTokenSet, fabStyles, fabTokenSet, filterChipTokenSet, floatingToolbarStyles, floatingToolbarTokenSet, getM3Spring, getThemeScriptSource, iconButtonStyles, iconButtonTokenSet, inputChipTokenSet, isComponentTokenSet, isDensity, labeledDividerStyles, linearProgressStyles, listMediaStyles, listStyles, listTokenSet, loadingIndicatorStyles, loadingIndicatorTokenSet, matchesSearch, menuStyles, menuTokenSet, navBarTokenSet, navItemStyles, navRailTokenSet, navigationBarStyles, navigationRailStyles, normalizeSearch, parseThemeState, parseTime, pickerDialogStyles, plainTooltipTokenSet, progressIndicatorTokenSet, pullToRefreshStyles, px, radioGroupStyles, radioStyles, radioTokenSet, richTooltipStyles, richTooltipTokenSet, searchAppBarStyles, searchBarStyles, searchBarTokenSet, searchFieldStyles, searchViewTokenSet, serializeThemeState, sideSheetStyles, sideSheetTokenSet, sliderStyles, sliderTokenSet, snackbarHostStyles, snackbarStyles, snackbarTokenSet, splitButtonStyles, splitButtonTokenSet, spring, springPosition, springSettleDuration, springToLinearEasing, suggestionChipTokenSet, switchStyles, switchTokenSet, tabsStyles, tabsTokenSet, textFieldStyles, textFieldTokenSet, themeAttributes, timePickerStyles, timePickerTokenSet, toMotionSpring, toolbarFabStyles, toolbarFabTokenSet, tooltipStyles, topAppBarStyles, tv, twMergeConfig, typeTokens, typescale, useM3Spring, useNavigationRail, useSnackbarHostState, useTheme, useThemeScope, useTimePickerRoom, useToolbarScrollExit, useToolbarScrollExpansion };

package/dist/index.js

@@ -80,7 +80,7 @@ import { textFieldStyles } from "./components/text-field/text-field-styles.js";
 import { TextField } from "./components/text-field/TextField.js";
 import { matchesSearch, normalizeSearch } from "./utils/search.js";
 import { AutocompleteItem, AutocompleteSection, OptionPopover, SelectItem, SelectSection } from "./components/select/option-list.js";
-import { searchAppBarStyles, searchBarStyles } from "./components/search/search-styles.js";
+import { searchAppBarStyles, searchBarStyles, searchFieldStyles } from "./components/search/search-styles.js";
 import { Select } from "./components/select/Select.js";
 import { Autocomplete } from "./components/autocomplete/Autocomplete.js";
 import { textFieldTokenSet } from "./components/text-field/text-field-tokens.js";
@@ -106,6 +106,7 @@ import { TopAppBar } from "./components/app-bar/TopAppBar.js";
 import { appBarTokenSet } from "./components/app-bar/app-bar-tokens.js";
 import { SearchBar } from "./components/search/SearchBar.js";
 import { SearchAppBar } from "./components/search/SearchAppBar.js";
+import { SearchField } from "./components/search/SearchField.js";
 import { searchBarTokenSet, searchViewTokenSet } from "./components/search/search-tokens.js";
 import { dividerTokenSet } from "./components/divider/divider-tokens.js";
 import { badgeTokenSet } from "./components/badge/badge-tokens.js";
@@ -135,4 +136,4 @@ import { TimePicker, TimePickerModeToggle, useTimePickerRoom } from "./component
 import { TimeField } from "./components/time-picker/TimeField.js";
 import { timePickerTokenSet } from "./components/time-picker/time-picker-tokens.js";
 import { Time, parseTime } from "@internationalized/date";
-export { AssistChip, Autocomplete, AutocompleteItem, AutocompleteSection, BREAKPOINTS, BREAKPOINT_NAMES, BUILT_IN_THEMES, BUILT_IN_THEME_NAMES, Badge, BadgedBox, BottomSheet, Button, ButtonContext, ButtonGroup, COLOR_MODES, COLOR_ROLES, CONTRAST_LEVELS, CONTRAST_LEVEL_NAMES, CORNERS, CORNER_NAMES, CUSTOM_COLORS, CUSTOM_COLOR_ROLES, Card, Carousel, Checkbox, ChipSet, CircularProgressIndicator, ContextMenuTrigger, DEFAULT_CUSTOM_COLORS, DEFAULT_DENSITY, DEFAULT_MOTION_SCHEME, DEFAULT_STORAGE_KEY, DEFAULT_THEME, DEFAULT_THEME_STATE, DENSITIES, DateField, DatePicker, DateRangePicker, Dialog, DialogActions, DialogContent, DialogHeader, DialogTitle, DialogTrigger, Divider, DockedToolbar, ELEVATION_LEVELS, ELEVATION_LEVEL_NAMES, ExtendedFab, FOCUS_INDICATOR, Fab, FabMenu, FabMenuItem, FilterChip, FloatingToolbar, IconButton, InputChip, LEGACY_DURATIONS, LEGACY_EASINGS, LabeledDivider, LinearProgressIndicator, List, ListItem, ListItemAvatar, ListItemImage, ListItemVideo, ListSection, LoadingIndicator, MOTION_SCHEMES, Menu, MenuGroup, MenuItem, MenuTrigger, NavigationBar, NavigationBarItem, NavigationRail, NavigationRailItem, OptionPopover, PALETTE_NAMES, PickerDialog, PullToRefresh, Radio, RadioGroup, RangeSlider, RichTooltip, RichTooltipTrigger, SCHEME_VARIANTS, SHADOW_AMBIENT_OPACITY, SHADOW_KEY_OPACITY, SPRINGS, SPRING_FAMILIES, SPRING_SPEEDS, SPRING_TOKEN_NAMES, STATE_OPACITIES, SearchAppBar, SearchBar, Select, SelectItem, SelectSection, SheetTrigger, SideSheet, Slider, Snackbar, SnackbarHost, SnackbarHostState, SplitButton, SubmenuTrigger, SuggestionChip, Switch, TYPEFACES, TYPE_ROLES, TYPE_SCALE, Tab, Tabs, TextField, ThemeProvider, ThemeScope, ThemeScript, Time, TimeField, TimePicker, TimePickerModeToggle, ToggleGroupStateContext, ToolbarFab, Tooltip, TooltipPlacementContext, TooltipTrigger, TopAppBar, Z_INDEX, appBarTokenSet, assistChipTokenSet, badgeStyles, badgeTokenSet, badgedBoxStyles, bottomSheetStyles, bottomSheetTokenSet, buttonGroupStyles, buttonStyles, buttonTokenSet, buttonVariantClasses, cardStyles, cardTokenSet, carouselStyles, carouselTokenSet, checkboxStyles, checkboxTokenSet, chipSetStyles, chipStyles, circularProgressStyles, cn, color, colorAt, componentTokenList, componentTokensCss, corner, createTheme, datePickerStyles, datePickerTokenSet, defineComponentTokens, densityAttribute, dialogStyles, dialogTokenSet, dividerStyles, dividerTokenSet, dockedDatePickerStyles, dockedToolbarStyles, dockedToolbarTokenSet, elevation, extendedFabStyles, extendedFabTokenSet, fabMenuStyles, fabMenuTokenSet, fabStyles, fabTokenSet, filterChipTokenSet, floatingToolbarStyles, floatingToolbarTokenSet, getM3Spring, getThemeScriptSource, iconButtonStyles, iconButtonTokenSet, inputChipTokenSet, isComponentTokenSet, isDensity, labeledDividerStyles, linearProgressStyles, listMediaStyles, listStyles, listTokenSet, loadingIndicatorStyles, loadingIndicatorTokenSet, matchesSearch, menuStyles, menuTokenSet, navBarTokenSet, navItemStyles, navRailTokenSet, navigationBarStyles, navigationRailStyles, normalizeSearch, parseThemeState, parseTime, pickerDialogStyles, plainTooltipTokenSet, progressIndicatorTokenSet, pullToRefreshStyles, px, radioGroupStyles, radioStyles, radioTokenSet, richTooltipStyles, richTooltipTokenSet, searchAppBarStyles, searchBarStyles, searchBarTokenSet, searchViewTokenSet, serializeThemeState, sideSheetStyles, sideSheetTokenSet, sliderStyles, sliderTokenSet, snackbarHostStyles, snackbarStyles, snackbarTokenSet, splitButtonStyles, splitButtonTokenSet, spring, springPosition, springSettleDuration, springToLinearEasing, suggestionChipTokenSet, switchStyles, switchTokenSet, tabsStyles, tabsTokenSet, textFieldStyles, textFieldTokenSet, themeAttributes, timePickerStyles, timePickerTokenSet, toMotionSpring, toolbarFabStyles, toolbarFabTokenSet, tooltipStyles, topAppBarStyles, tv, twMergeConfig, typeTokens, typescale, useM3Spring, useNavigationRail, useSnackbarHostState, useTheme, useThemeScope, useTimePickerRoom, useToolbarScrollExit, useToolbarScrollExpansion };
+export { AssistChip, Autocomplete, AutocompleteItem, AutocompleteSection, BREAKPOINTS, BREAKPOINT_NAMES, BUILT_IN_THEMES, BUILT_IN_THEME_NAMES, Badge, BadgedBox, BottomSheet, Button, ButtonContext, ButtonGroup, COLOR_MODES, COLOR_ROLES, CONTRAST_LEVELS, CONTRAST_LEVEL_NAMES, CORNERS, CORNER_NAMES, CUSTOM_COLORS, CUSTOM_COLOR_ROLES, Card, Carousel, Checkbox, ChipSet, CircularProgressIndicator, ContextMenuTrigger, DEFAULT_CUSTOM_COLORS, DEFAULT_DENSITY, DEFAULT_MOTION_SCHEME, DEFAULT_STORAGE_KEY, DEFAULT_THEME, DEFAULT_THEME_STATE, DENSITIES, DateField, DatePicker, DateRangePicker, Dialog, DialogActions, DialogContent, DialogHeader, DialogTitle, DialogTrigger, Divider, DockedToolbar, ELEVATION_LEVELS, ELEVATION_LEVEL_NAMES, ExtendedFab, FOCUS_INDICATOR, Fab, FabMenu, FabMenuItem, FilterChip, FloatingToolbar, IconButton, InputChip, LEGACY_DURATIONS, LEGACY_EASINGS, LabeledDivider, LinearProgressIndicator, List, ListItem, ListItemAvatar, ListItemImage, ListItemVideo, ListSection, LoadingIndicator, MOTION_SCHEMES, Menu, MenuGroup, MenuItem, MenuTrigger, NavigationBar, NavigationBarItem, NavigationRail, NavigationRailItem, OptionPopover, PALETTE_NAMES, PickerDialog, PullToRefresh, Radio, RadioGroup, RangeSlider, RichTooltip, RichTooltipTrigger, SCHEME_VARIANTS, SHADOW_AMBIENT_OPACITY, SHADOW_KEY_OPACITY, SPRINGS, SPRING_FAMILIES, SPRING_SPEEDS, SPRING_TOKEN_NAMES, STATE_OPACITIES, SearchAppBar, SearchBar, SearchField, Select, SelectItem, SelectSection, SheetTrigger, SideSheet, Slider, Snackbar, SnackbarHost, SnackbarHostState, SplitButton, SubmenuTrigger, SuggestionChip, Switch, TYPEFACES, TYPE_ROLES, TYPE_SCALE, Tab, Tabs, TextField, ThemeProvider, ThemeScope, ThemeScript, Time, TimeField, TimePicker, TimePickerModeToggle, ToggleGroupStateContext, ToolbarFab, Tooltip, TooltipPlacementContext, TooltipTrigger, TopAppBar, Z_INDEX, appBarTokenSet, assistChipTokenSet, badgeStyles, badgeTokenSet, badgedBoxStyles, bottomSheetStyles, bottomSheetTokenSet, buttonGroupStyles, buttonStyles, buttonTokenSet, buttonVariantClasses, cardStyles, cardTokenSet, carouselStyles, carouselTokenSet, checkboxStyles, checkboxTokenSet, chipSetStyles, chipStyles, circularProgressStyles, cn, color, colorAt, componentTokenList, componentTokensCss, corner, createTheme, datePickerStyles, datePickerTokenSet, defineComponentTokens, densityAttribute, dialogStyles, dialogTokenSet, dividerStyles, dividerTokenSet, dockedDatePickerStyles, dockedToolbarStyles, dockedToolbarTokenSet, elevation, extendedFabStyles, extendedFabTokenSet, fabMenuStyles, fabMenuTokenSet, fabStyles, fabTokenSet, filterChipTokenSet, floatingToolbarStyles, floatingToolbarTokenSet, getM3Spring, getThemeScriptSource, iconButtonStyles, iconButtonTokenSet, inputChipTokenSet, isComponentTokenSet, isDensity, labeledDividerStyles, linearProgressStyles, listMediaStyles, listStyles, listTokenSet, loadingIndicatorStyles, loadingIndicatorTokenSet, matchesSearch, menuStyles, menuTokenSet, navBarTokenSet, navItemStyles, navRailTokenSet, navigationBarStyles, navigationRailStyles, normalizeSearch, parseThemeState, parseTime, pickerDialogStyles, plainTooltipTokenSet, progressIndicatorTokenSet, pullToRefreshStyles, px, radioGroupStyles, radioStyles, radioTokenSet, richTooltipStyles, richTooltipTokenSet, searchAppBarStyles, searchBarStyles, searchBarTokenSet, searchFieldStyles, searchViewTokenSet, serializeThemeState, sideSheetStyles, sideSheetTokenSet, sliderStyles, sliderTokenSet, snackbarHostStyles, snackbarStyles, snackbarTokenSet, splitButtonStyles, splitButtonTokenSet, spring, springPosition, springSettleDuration, springToLinearEasing, suggestionChipTokenSet, switchStyles, switchTokenSet, tabsStyles, tabsTokenSet, textFieldStyles, textFieldTokenSet, themeAttributes, timePickerStyles, timePickerTokenSet, toMotionSpring, toolbarFabStyles, toolbarFabTokenSet, tooltipStyles, topAppBarStyles, tv, twMergeConfig, typeTokens, typescale, useM3Spring, useNavigationRail, useSnackbarHostState, useTheme, useThemeScope, useTimePickerRoom, useToolbarScrollExit, useToolbarScrollExpansion };

package/dist/primitives/use-m3-interaction.js

@@ -15,18 +15,22 @@ const RIPPLE_START = {
 * one is still growing or fading. The ripple's animated properties are pinned to their start
 * values with their transitions off and flushed to style, then released: they transition
 * from this press's start to whatever the state layer's rules say (growing if
-* `data-rippling` is on, or once it turns on). Only the ripple's transitions are switched
-* off: the component's own (`--m3-transition-property`, such as a running corner morph) keep
-* running, so a quick second press doesn't make the corners jump.
+* `data-rippling` is on, or once it turns on). They're pinned with no duration or delay, not by
+* leaving them out of `transition-property`: a running transition whose property drops out of
+* the list is cancelled and jumps to its end, as did a corner morph on a quick second press
+* and a width an app animates through `className` (2026-11-10). A running transition keeps its
+* own timing when the durations change, so nothing else is touched.
 */
 function restartRipple(element) {
 	const { style } = element;
-	const transitionProperty = style.transitionProperty;
-	style.transitionProperty = "var(--m3-transition-property, --m3-none)";
+	const { transitionDuration, transitionDelay } = style;
+	style.transitionDuration = "0s";
+	style.transitionDelay = "0s";
 	for (const [name, value] of Object.entries(RIPPLE_START)) style.setProperty(name, value);
 	getComputedStyle(element).getPropertyValue("--m3-ripple-x");
 	for (const name of Object.keys(RIPPLE_START)) style.removeProperty(name);
-	style.transitionProperty = transitionProperty;
+	style.transitionDuration = transitionDuration;
+	style.transitionDelay = transitionDelay;
 }
 /**
 * Positions a new ripple at the press point (Compose `RippleAnimation`): it grows from 30%

package/dist/primitives/use-m3-interaction.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-m3-interaction.js","names":[],"sources":["../../src/primitives/use-m3-interaction.ts"],"sourcesContent":["'use client';\n\nimport { mergeProps, useFocusRing, useHover, usePress, type PressEvents } from 'react-aria';\nimport {\n  useEffect,\n  useState,\n  type DOMAttributes,\n  type KeyboardEvent,\n  type PointerEvent,\n  type RefObject,\n} from 'react';\n\nexport interface M3InteractionOptions extends PressEvents {\n  isDisabled?: boolean;\n  isSelected?: boolean;\n  isDragged?: boolean;\n  /**\n   * Pressed state from another React Aria hook (e.g. `useButton`). When provided,\n   * this hook does not attach its own press handling.\n   */\n  isPressed?: boolean;\n  /** Treat focus inside the element as focus on the element (e.g. text fields). */\n  within?: boolean;\n  /** Whether the element is a text input; focus is then always visible. */\n  isTextInput?: boolean;\n  autoFocus?: boolean;\n}\n\nexport interface M3InteractionState {\n  isHovered: boolean;\n  isPressed: boolean;\n  isFocused: boolean;\n  isFocusVisible: boolean;\n}\n\n/** `data-*` attributes read by the `state-layer` and `focus-ring` utilities. */\nexport interface M3InteractionDataAttributes {\n  'data-hovered'?: true;\n  'data-pressed'?: true;\n  /** The ripple is showing: from press start until release, but at least 225ms. */\n  'data-rippling'?: true;\n  'data-focused'?: true;\n  'data-focus-visible'?: true;\n  'data-disabled'?: true;\n  'data-selected'?: true;\n  'data-dragged'?: true;\n}\n\nexport interface M3InteractionResult {\n  /** Event handlers to spread on the interactive element. */\n  interactionProps: DOMAttributes<HTMLElement>;\n  dataAttributes: M3InteractionDataAttributes;\n  state: M3InteractionState;\n}\n\nconst flag = (value: boolean | undefined): true | undefined => (value ? true : undefined);\n\n/** Compose `RippleAnimation`: the radius grows (and the centre travels) over 225ms. */\nexport const RIPPLE_GROW_MS = 225;\n\n/** The ripple's animated properties, pinned at the start of a new ripple. */\nconst RIPPLE_START = {\n  '--m3-ripple-opacity': '0',\n  '--m3-ripple-radius': 'var(--m3-ripple-start, 0px)',\n  '--m3-ripple-x': 'var(--m3-ripple-origin-x, 50%)',\n  '--m3-ripple-y': 'var(--m3-ripple-origin-y, 50%)',\n} as const;\n\n/**\n * Starts a fresh ripple on `element`, as Compose does for every press, even while the last\n * one is still growing or fading. The ripple's animated properties are pinned to their start\n * values with their transitions off and flushed to style, then released: they transition\n * from this press's start to whatever the state layer's rules say (growing if\n * `data-rippling` is on, or once it turns on). Only the ripple's transitions are switched\n * off: the component's own (`--m3-transition-property`, such as a running corner morph) keep\n * running, so a quick second press doesn't make the corners jump.\n */\nexport function restartRipple(element: HTMLElement) {\n  const { style } = element;\n  const transitionProperty = style.transitionProperty;\n  style.transitionProperty = 'var(--m3-transition-property, --m3-none)';\n  for (const [name, value] of Object.entries(RIPPLE_START)) style.setProperty(name, value);\n  getComputedStyle(element).getPropertyValue('--m3-ripple-x');\n  for (const name of Object.keys(RIPPLE_START)) style.removeProperty(name);\n  style.transitionProperty = transitionProperty;\n}\n\n/**\n * Positions a new ripple at the press point (Compose `RippleAnimation`): it grows from 30%\n * of the element's longer side to half its diagonal plus 10px while its centre moves to the\n * middle. Without a point (a key press) it starts in the middle. For a state layer on a\n * child of the pressed element (a navigation item's pill), pass that child.\n */\nexport function setRippleOrigin(element: HTMLElement, clientX?: number, clientY?: number) {\n  const rect = element.getBoundingClientRect();\n  const x = clientX === undefined ? rect.width / 2 : clientX - rect.left;\n  const y = clientY === undefined ? rect.height / 2 : clientY - rect.top;\n  const { style } = element;\n  style.setProperty('--m3-ripple-origin-x', `${x}px`);\n  style.setProperty('--m3-ripple-origin-y', `${y}px`);\n  style.setProperty('--m3-ripple-center-x', `${rect.width / 2}px`);\n  style.setProperty('--m3-ripple-center-y', `${rect.height / 2}px`);\n  style.setProperty('--m3-ripple-start', `${Math.max(rect.width, rect.height) * 0.3}px`);\n  style.setProperty(\n    '--m3-ripple-size',\n    `${Math.ceil(Math.hypot(rect.width, rect.height) / 2 + 10)}px`,\n  );\n  restartRipple(element);\n}\n\n/**\n * Flags a press that starts while the element's corner morph is still running\n * (`data-rapid-press`). M3's buttons note that the web can use \"a modified motion curve to\n * avoid resonant effects from overlapping animations\": the `container-motion` utility then\n * morphs on the fast effects spring, which doesn't overshoot, instead of the fast spatial\n * one. The attribute is set on the element directly, before React renders the press, so\n * the morph that press starts already uses the modified curve. Call it before anything\n * that resets the element's transitions (such as `restartRipple`).\n */\nexport function markRapidPress(element: HTMLElement) {\n  const morphing =\n    typeof element.getAnimations === 'function' &&\n    element\n      .getAnimations()\n      .some(\n        (animation) =>\n          animation instanceof CSSTransition &&\n          animation.transitionProperty.endsWith('radius') &&\n          animation.playState === 'running',\n      );\n  element.toggleAttribute('data-rapid-press', morphing);\n}\n\n/**\n * Whether a ripple should be showing. Compose always finishes a ripple's 225ms growth\n * before fading it out, so a quick tap still reaches the edges: this stays true from press\n * start until release, but for at least 225ms.\n */\nexport function useRippleHold(isPressed: boolean): boolean {\n  const [wasPressed, setWasPressed] = useState(isPressed);\n  const [held, setHeld] = useState(false);\n  const [presses, setPresses] = useState(0);\n  // Adjust state while rendering when a press starts (no effect, no extra paint).\n  if (isPressed !== wasPressed) {\n    setWasPressed(isPressed);\n    if (isPressed) {\n      setHeld(true);\n      setPresses((n) => n + 1);\n    }\n  }\n  useEffect(() => {\n    if (!held) return;\n    const timer = setTimeout(() => setHeld(false), RIPPLE_GROW_MS);\n    return () => clearTimeout(timer);\n  }, [held, presses]);\n  return isPressed || held;\n}\n\n/**\n * M3 interaction states for any element: hover, press, focus-visible, selected,\n * dragged and disabled, exposed as `data-*` attributes, plus the ripple origin.\n * Pair with the `state-layer` and `focus-ring` utilities, which paint the state\n * layer and ripple as background layers on the element itself (no child nodes).\n */\nexport function useM3Interaction(\n  options: M3InteractionOptions,\n  ref: RefObject<HTMLElement | null>,\n): M3InteractionResult {\n  const {\n    isDisabled,\n    isSelected,\n    isDragged,\n    within,\n    isTextInput,\n    autoFocus,\n    onPress,\n    onPressStart,\n    onPressEnd,\n    onPressChange,\n    onPressUp,\n    onClick,\n  } = options;\n  const hasExternalPress = options.isPressed !== undefined;\n\n  // Only `usePress`'s own options: it spreads any others onto the props it returns, so this\n  // hook's options (`isDragged`, `within` …) would reach the DOM as unknown attributes.\n  const { pressProps, isPressed: isOwnPressed } = usePress({\n    onPress,\n    onPressStart,\n    onPressEnd,\n    onPressChange,\n    onPressUp,\n    onClick,\n    ref,\n    isDisabled: isDisabled || hasExternalPress,\n  });\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  const { focusProps, isFocused, isFocusVisible } = useFocusRing({\n    within,\n    isTextInput,\n    autoFocus,\n  });\n\n  const isPressed = hasExternalPress ? Boolean(options.isPressed) : isOwnPressed;\n  const isRippling = useRippleHold(isPressed && !isDisabled);\n\n  const rippleProps: DOMAttributes<HTMLElement> = {\n    onPointerDown: (event: PointerEvent<HTMLElement>) => {\n      if (!isDisabled && event.button === 0) {\n        markRapidPress(event.currentTarget);\n        setRippleOrigin(event.currentTarget, event.clientX, event.clientY);\n      }\n    },\n    onKeyDown: (event: KeyboardEvent<HTMLElement>) => {\n      if (!isDisabled && (event.key === 'Enter' || event.key === ' ')) {\n        markRapidPress(event.currentTarget);\n        setRippleOrigin(event.currentTarget);\n      }\n    },\n  };\n\n  return {\n    interactionProps: mergeProps(\n      hasExternalPress ? {} : pressProps,\n      hoverProps,\n      focusProps,\n      rippleProps,\n    ),\n    dataAttributes: {\n      'data-hovered': flag(isHovered && !isDisabled),\n      'data-pressed': flag(isPressed && !isDisabled),\n      'data-rippling': flag(isRippling),\n      'data-focused': flag(isFocused),\n      'data-focus-visible': flag(isFocusVisible),\n      'data-disabled': flag(isDisabled),\n      'data-selected': flag(isSelected),\n      'data-dragged': flag(isDragged),\n    },\n    state: { isHovered, isPressed, isFocused, isFocusVisible },\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-m3-interaction.js","names":[],"sources":["../../src/primitives/use-m3-interaction.ts"],"sourcesContent":["'use client';\n\nimport { mergeProps, useFocusRing, useHover, usePress, type PressEvents } from 'react-aria';\nimport {\n  useEffect,\n  useState,\n  type DOMAttributes,\n  type KeyboardEvent,\n  type PointerEvent,\n  type RefObject,\n} from 'react';\n\nexport interface M3InteractionOptions extends PressEvents {\n  isDisabled?: boolean;\n  isSelected?: boolean;\n  isDragged?: boolean;\n  /**\n   * Pressed state from another React Aria hook (e.g. `useButton`). When provided,\n   * this hook does not attach its own press handling.\n   */\n  isPressed?: boolean;\n  /** Treat focus inside the element as focus on the element (e.g. text fields). */\n  within?: boolean;\n  /** Whether the element is a text input; focus is then always visible. */\n  isTextInput?: boolean;\n  autoFocus?: boolean;\n}\n\nexport interface M3InteractionState {\n  isHovered: boolean;\n  isPressed: boolean;\n  isFocused: boolean;\n  isFocusVisible: boolean;\n}\n\n/** `data-*` attributes read by the `state-layer` and `focus-ring` utilities. */\nexport interface M3InteractionDataAttributes {\n  'data-hovered'?: true;\n  'data-pressed'?: true;\n  /** The ripple is showing: from press start until release, but at least 225ms. */\n  'data-rippling'?: true;\n  'data-focused'?: true;\n  'data-focus-visible'?: true;\n  'data-disabled'?: true;\n  'data-selected'?: true;\n  'data-dragged'?: true;\n}\n\nexport interface M3InteractionResult {\n  /** Event handlers to spread on the interactive element. */\n  interactionProps: DOMAttributes<HTMLElement>;\n  dataAttributes: M3InteractionDataAttributes;\n  state: M3InteractionState;\n}\n\nconst flag = (value: boolean | undefined): true | undefined => (value ? true : undefined);\n\n/** Compose `RippleAnimation`: the radius grows (and the centre travels) over 225ms. */\nexport const RIPPLE_GROW_MS = 225;\n\n/** The ripple's animated properties, pinned at the start of a new ripple. */\nconst RIPPLE_START = {\n  '--m3-ripple-opacity': '0',\n  '--m3-ripple-radius': 'var(--m3-ripple-start, 0px)',\n  '--m3-ripple-x': 'var(--m3-ripple-origin-x, 50%)',\n  '--m3-ripple-y': 'var(--m3-ripple-origin-y, 50%)',\n} as const;\n\n/**\n * Starts a fresh ripple on `element`, as Compose does for every press, even while the last\n * one is still growing or fading. The ripple's animated properties are pinned to their start\n * values with their transitions off and flushed to style, then released: they transition\n * from this press's start to whatever the state layer's rules say (growing if\n * `data-rippling` is on, or once it turns on). They're pinned with no duration or delay, not by\n * leaving them out of `transition-property`: a running transition whose property drops out of\n * the list is cancelled and jumps to its end, as did a corner morph on a quick second press\n * and a width an app animates through `className` (2026-11-10). A running transition keeps its\n * own timing when the durations change, so nothing else is touched.\n */\nexport function restartRipple(element: HTMLElement) {\n  const { style } = element;\n  const { transitionDuration, transitionDelay } = style;\n  style.transitionDuration = '0s';\n  style.transitionDelay = '0s';\n  for (const [name, value] of Object.entries(RIPPLE_START)) style.setProperty(name, value);\n  getComputedStyle(element).getPropertyValue('--m3-ripple-x');\n  for (const name of Object.keys(RIPPLE_START)) style.removeProperty(name);\n  style.transitionDuration = transitionDuration;\n  style.transitionDelay = transitionDelay;\n}\n\n/**\n * Positions a new ripple at the press point (Compose `RippleAnimation`): it grows from 30%\n * of the element's longer side to half its diagonal plus 10px while its centre moves to the\n * middle. Without a point (a key press) it starts in the middle. For a state layer on a\n * child of the pressed element (a navigation item's pill), pass that child.\n */\nexport function setRippleOrigin(element: HTMLElement, clientX?: number, clientY?: number) {\n  const rect = element.getBoundingClientRect();\n  const x = clientX === undefined ? rect.width / 2 : clientX - rect.left;\n  const y = clientY === undefined ? rect.height / 2 : clientY - rect.top;\n  const { style } = element;\n  style.setProperty('--m3-ripple-origin-x', `${x}px`);\n  style.setProperty('--m3-ripple-origin-y', `${y}px`);\n  style.setProperty('--m3-ripple-center-x', `${rect.width / 2}px`);\n  style.setProperty('--m3-ripple-center-y', `${rect.height / 2}px`);\n  style.setProperty('--m3-ripple-start', `${Math.max(rect.width, rect.height) * 0.3}px`);\n  style.setProperty(\n    '--m3-ripple-size',\n    `${Math.ceil(Math.hypot(rect.width, rect.height) / 2 + 10)}px`,\n  );\n  restartRipple(element);\n}\n\n/**\n * Flags a press that starts while the element's corner morph is still running\n * (`data-rapid-press`). M3's buttons note that the web can use \"a modified motion curve to\n * avoid resonant effects from overlapping animations\": the `container-motion` utility then\n * morphs on the fast effects spring, which doesn't overshoot, instead of the fast spatial\n * one. The attribute is set on the element directly, before React renders the press, so\n * the morph that press starts already uses the modified curve. Call it before anything\n * that resets the element's transitions (such as `restartRipple`).\n */\nexport function markRapidPress(element: HTMLElement) {\n  const morphing =\n    typeof element.getAnimations === 'function' &&\n    element\n      .getAnimations()\n      .some(\n        (animation) =>\n          animation instanceof CSSTransition &&\n          animation.transitionProperty.endsWith('radius') &&\n          animation.playState === 'running',\n      );\n  element.toggleAttribute('data-rapid-press', morphing);\n}\n\n/**\n * Whether a ripple should be showing. Compose always finishes a ripple's 225ms growth\n * before fading it out, so a quick tap still reaches the edges: this stays true from press\n * start until release, but for at least 225ms.\n */\nexport function useRippleHold(isPressed: boolean): boolean {\n  const [wasPressed, setWasPressed] = useState(isPressed);\n  const [held, setHeld] = useState(false);\n  const [presses, setPresses] = useState(0);\n  // Adjust state while rendering when a press starts (no effect, no extra paint).\n  if (isPressed !== wasPressed) {\n    setWasPressed(isPressed);\n    if (isPressed) {\n      setHeld(true);\n      setPresses((n) => n + 1);\n    }\n  }\n  useEffect(() => {\n    if (!held) return;\n    const timer = setTimeout(() => setHeld(false), RIPPLE_GROW_MS);\n    return () => clearTimeout(timer);\n  }, [held, presses]);\n  return isPressed || held;\n}\n\n/**\n * M3 interaction states for any element: hover, press, focus-visible, selected,\n * dragged and disabled, exposed as `data-*` attributes, plus the ripple origin.\n * Pair with the `state-layer` and `focus-ring` utilities, which paint the state\n * layer and ripple as background layers on the element itself (no child nodes).\n */\nexport function useM3Interaction(\n  options: M3InteractionOptions,\n  ref: RefObject<HTMLElement | null>,\n): M3InteractionResult {\n  const {\n    isDisabled,\n    isSelected,\n    isDragged,\n    within,\n    isTextInput,\n    autoFocus,\n    onPress,\n    onPressStart,\n    onPressEnd,\n    onPressChange,\n    onPressUp,\n    onClick,\n  } = options;\n  const hasExternalPress = options.isPressed !== undefined;\n\n  // Only `usePress`'s own options: it spreads any others onto the props it returns, so this\n  // hook's options (`isDragged`, `within` …) would reach the DOM as unknown attributes.\n  const { pressProps, isPressed: isOwnPressed } = usePress({\n    onPress,\n    onPressStart,\n    onPressEnd,\n    onPressChange,\n    onPressUp,\n    onClick,\n    ref,\n    isDisabled: isDisabled || hasExternalPress,\n  });\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  const { focusProps, isFocused, isFocusVisible } = useFocusRing({\n    within,\n    isTextInput,\n    autoFocus,\n  });\n\n  const isPressed = hasExternalPress ? Boolean(options.isPressed) : isOwnPressed;\n  const isRippling = useRippleHold(isPressed && !isDisabled);\n\n  const rippleProps: DOMAttributes<HTMLElement> = {\n    onPointerDown: (event: PointerEvent<HTMLElement>) => {\n      if (!isDisabled && event.button === 0) {\n        markRapidPress(event.currentTarget);\n        setRippleOrigin(event.currentTarget, event.clientX, event.clientY);\n      }\n    },\n    onKeyDown: (event: KeyboardEvent<HTMLElement>) => {\n      if (!isDisabled && (event.key === 'Enter' || event.key === ' ')) {\n        markRapidPress(event.currentTarget);\n        setRippleOrigin(event.currentTarget);\n      }\n    },\n  };\n\n  return {\n    interactionProps: mergeProps(\n      hasExternalPress ? {} : pressProps,\n      hoverProps,\n      focusProps,\n      rippleProps,\n    ),\n    dataAttributes: {\n      'data-hovered': flag(isHovered && !isDisabled),\n      'data-pressed': flag(isPressed && !isDisabled),\n      'data-rippling': flag(isRippling),\n      'data-focused': flag(isFocused),\n      'data-focus-visible': flag(isFocusVisible),\n      'data-disabled': flag(isDisabled),\n      'data-selected': flag(isSelected),\n      'data-dragged': flag(isDragged),\n    },\n    state: { isHovered, isPressed, isFocused, isFocusVisible },\n  };\n}\n"],"mappings":"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"}

package/dist/styles/generated/components.css

@@ -405,6 +405,11 @@
   --_md-comp-list-list-item-leading-icon-color: var(--md-comp-list-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant));
   --_md-comp-list-list-item-trailing-icon-color: var(--md-comp-list-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant));
   --_md-comp-list-list-item-selected-container-color: var(--md-comp-list-list-item-selected-container-color, var(--md-sys-color-secondary-container));
+  --_md-comp-list-list-item-selected-label-text-color: var(--md-comp-list-list-item-selected-label-text-color, var(--md-sys-color-on-secondary-container));
+  --_md-comp-list-list-item-selected-supporting-text-color: var(--md-comp-list-list-item-selected-supporting-text-color, var(--md-sys-color-on-secondary-container));
+  --_md-comp-list-list-item-selected-overline-color: var(--md-comp-list-list-item-selected-overline-color, var(--md-sys-color-on-secondary-container));
+  --_md-comp-list-list-item-selected-leading-icon-color: var(--md-comp-list-list-item-selected-leading-icon-color, var(--md-sys-color-on-secondary-container));
+  --_md-comp-list-list-item-selected-trailing-icon-color: var(--md-comp-list-list-item-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container));
 }
 
 :where([data-tokens~="md-comp-list"][data-variant="standard"]) {

package/dist/styles/utilities.css

@@ -147,18 +147,30 @@
         transparent
       )
     );
-  /* After the ripple: fade it out, then reset its radius and centre once it is invisible. */
+  /*
+   * After the ripple: fade it out, then reset its radius and centre once it is invisible. The
+   * states below change only these variables, never the transition itself, so an app's own
+   * transition through `className` (one class, which wins over this one at rest) keeps its
+   * timing while the element is pressed too (2026-11-10).
+   */
+  --m3-ripple-fade-duration: 150ms;
+  --m3-ripple-grow-duration: 0s;
+  --m3-ripple-grow-delay: 150ms;
+  --m3-ripple-grow-easing: linear;
   /* Components append their own transitions through the --m3-transition-* lists. */
   transition-property:
     --m3-state-opacity, --m3-ripple-opacity, --m3-ripple-radius, --m3-ripple-x, --m3-ripple-y,
     var(--m3-transition-property, --m3-none);
   transition-duration:
-    var(--md-sys-motion-spring-effects-fast-duration), 150ms, 0s, 0s, 0s,
+    var(--md-sys-motion-spring-effects-fast-duration), var(--m3-ripple-fade-duration),
+    var(--m3-ripple-grow-duration), var(--m3-ripple-grow-duration), var(--m3-ripple-grow-duration),
     var(--m3-transition-duration, 0s);
-  transition-delay: 0s, 0s, 150ms, 150ms, 150ms, var(--m3-transition-delay, 0s);
+  transition-delay:
+    0s, 0s, var(--m3-ripple-grow-delay), var(--m3-ripple-grow-delay), var(--m3-ripple-grow-delay),
+    var(--m3-transition-delay, 0s);
   transition-timing-function:
-    var(--md-sys-motion-spring-effects-fast-easing), linear, linear, linear, linear,
-    var(--m3-transition-easing, linear);
+    var(--md-sys-motion-spring-effects-fast-easing), linear, var(--m3-ripple-grow-easing), linear,
+    linear, var(--m3-transition-easing, linear);
 
   &[data-hovered] {
     --m3-state-opacity: var(--md-sys-state-hover-state-layer-opacity);
@@ -181,13 +193,10 @@
     --m3-ripple-radius: var(--m3-ripple-size, 0px);
     --m3-ripple-x: var(--m3-ripple-center-x, 50%);
     --m3-ripple-y: var(--m3-ripple-center-y, 50%);
-    transition-duration:
-      var(--md-sys-motion-spring-effects-fast-duration), 75ms, 225ms, 225ms, 225ms,
-      var(--m3-transition-duration, 0s);
-    transition-delay: 0s, 0s, 0s, 0s, 0s, var(--m3-transition-delay, 0s);
-    transition-timing-function:
-      var(--md-sys-motion-spring-effects-fast-easing), linear, cubic-bezier(0.4, 0, 0.2, 1), linear,
-      linear, var(--m3-transition-easing, linear);
+    --m3-ripple-fade-duration: 75ms;
+    --m3-ripple-grow-duration: 225ms;
+    --m3-ripple-grow-delay: 0s;
+    --m3-ripple-grow-easing: cubic-bezier(0.4, 0, 0.2, 1);
   }
   &[data-disabled] {
     --m3-state-opacity: 0;
@@ -197,9 +206,7 @@
   /* Reduced motion: the ripple appears at full size where it ends, with no growth or travel. */
   @media (prefers-reduced-motion: reduce) {
     &[data-rippling] {
-      transition-duration:
-        var(--md-sys-motion-spring-effects-fast-duration), 75ms, 0s, 0s, 0s,
-        var(--m3-transition-duration, 0s);
+      --m3-ripple-grow-duration: 0s;
     }
   }
 }