@windmorph/react 0.0.0-stage → 0.1.1

package/dist/components/search/SearchBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.js","names":["Overlay"],"sources":["../../../src/components/search/SearchBar.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type ComponentProps,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n} from 'react';\nimport { useReducedMotion } from 'motion/react';\nimport {\n  mergeProps,\n  mergeRefs,\n  useDialog,\n  useFocusRing,\n  useModalOverlay,\n  useObjectRef,\n} from 'react-aria';\nimport { useOverlayTriggerState, type OverlayTriggerState } from 'react-stately';\nimport { useControlledState } from 'react-stately/useControlledState';\nimport { Overlay } from '../../primitives/Overlay';\nimport { usePresence } from '../../primitives/use-presence';\nimport { cn } from '../../utils/cn';\nimport {\n  pickDescriptionAria,\n  splitRootProps,\n  type WrapperRootDOMProps,\n} from '../../utils/root-props';\nimport { ButtonContext, standardIconButtons } from '../button/ButtonContext';\nimport { COMPACT_WINDOW, useMediaQuery } from '../date-picker/use-media-query';\nimport { searchBarStyles } from './search-styles';\n\n/** Set by `SearchAppBar` for the search bar inside it. */\nexport const SearchAppBarContext = createContext<{ scrolled: boolean } | null>(null);\n\n/** What a search bar's icons can depend on. */\nexport interface SearchBarIconState {\n  expanded: boolean;\n  /** Collapses the search view, e.g. from a back button. */\n  collapse: () => void;\n  /**\n   * The view in effect (`auto` resolved for the window), so a back button can show in the\n   * full-screen view only.\n   */\n  view: 'docked' | 'full-screen';\n}\n\ntype SearchBarIcon = ReactNode | ((state: SearchBarIconState) => ReactNode);\n\nexport interface SearchBarClassNames {\n  /** The outer container, merged with `className`. */\n  root?: string;\n  /** The pill around the icons and the input (collapsed and expanded). */\n  field?: string;\n  /** The text input (collapsed and expanded). */\n  input?: string;\n  /** The leading icon slot. */\n  leading?: string;\n  /** The trailing icon slot. */\n  trailing?: string;\n  /** The scrim behind the docked view. */\n  scrim?: string;\n  /** The expanded view: the docked panel or the full-screen surface. */\n  view?: string;\n  /** The expanded content: the docked dropdown or the full-screen content area. */\n  content?: string;\n}\n\ntype Naming =\n  | {\n      /** Accessible name for the search bar and its input. Required unless `aria-labelledby` is set. */\n      'aria-label': string;\n    }\n  | {\n      /** The id of the element that names the search bar and its input. Required unless `aria-label` is set. */\n      'aria-labelledby': string;\n    };\n\n/**\n * Attributes for the search inputs, e.g. `aria-keyshortcuts`, `aria-describedby`,\n * `enterKeyHint`, `autoComplete`, `spellCheck`, `inputMode` or event handlers. The bar owns\n * its value, name, role and popup state, so those keys are left out; an `id` or `name`\n * would be duplicated, since the bar renders a second input while expanded.\n */\nexport type SearchBarInputProps = Omit<\n  ComponentProps<'input'>,\n  | 'ref'\n  | 'id'\n  | 'name'\n  | 'type'\n  | 'role'\n  | 'value'\n  | 'defaultValue'\n  | 'onChange'\n  | 'placeholder'\n  | 'className'\n  | 'children'\n  | 'dangerouslySetInnerHTML'\n  | 'inert'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-expanded'\n  | 'aria-haspopup'\n  | 'aria-controls'\n  | 'aria-hidden'\n> & {\n  [data: `data-${string}`]: string | number | boolean | undefined;\n};\n\ninterface SearchBarOwnProps extends WrapperRootDOMProps {\n  /** The root element's id. */\n  id?: string;\n  /**\n   * The ids of elements that describe the search, for both inputs (the bar's and the open\n   * view's), before any `inputProps['aria-describedby']`.\n   */\n  'aria-describedby'?: string;\n  /** The id of an element with more details about the search, for both inputs. */\n  'aria-details'?: string;\n  /** Controlled query. */\n  value?: string;\n  /** Initial query when uncontrolled. @default \"\" */\n  defaultValue?: string;\n  /** Called with the query as it changes. */\n  onChange?: (value: string) => void;\n  /**\n   * Called with the query when the user presses Enter (the keyboard's search action) in the\n   * open search view. Enter in the collapsed bar opens the view.\n   */\n  onSubmit?: (value: string) => void;\n  /** Controlled expansion of the search view. */\n  expanded?: boolean;\n  /** Whether the search view starts expanded (uncontrolled). @default false */\n  defaultExpanded?: boolean;\n  /** Called when the search view expands or collapses. */\n  onExpandedChange?: (expanded: boolean) => void;\n  /**\n   * How the bar expands: `docked`, a dropdown below it over a scrim; `full-screen`, a view\n   * that fills the window; `auto`, full screen on compact windows (below 600px wide) and\n   * docked on larger ones, as M3 recommends (\"Full-screen layout: Default for compact\n   * breakpoints\"; docked is \"Best for medium and expanded windows\"). It follows the window\n   * as it resizes.\n   * @default \"auto\"\n   */\n  view?: SearchBarView;\n  /** Hint text shown in the empty input, e.g. \"Search mail\". */\n  placeholder?: string;\n  /** Leading icon, e.g. a search icon, or a back button while expanded. */\n  leadingIcon?: SearchBarIcon;\n  /**\n   * Trailing content: one or two icon buttons (e.g. voice search and a clear button), or an\n   * avatar (an `img`, drawn at 30px) with up to one icon button (M3).\n   */\n  trailingIcon?: SearchBarIcon;\n  /**\n   * Centre the placeholder and the query while the bar is collapsed (M3's search app bar\n   * supports centred text). @default \"start\"\n   */\n  textAlign?: 'start' | 'center';\n  /**\n   * What screen readers hear when the suggestions or results change while the view is open\n   * (M3: \"the screen reader must announce the change\"), e.g. \"5 results\". Announced\n   * politely whenever it changes.\n   */\n  resultsAnnouncement?: string;\n  /**\n   * The expanded content: suggestions or results, usually a list. ↓ from the input moves\n   * focus into it.\n   */\n  children?: ReactNode;\n  /** The input element (collapsed, or expanded while the view is open). */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * Attributes for both inputs, the collapsed one and the expanded view's. They replace the\n   * bar's defaults (`enterKeyHint=\"search\"`, `autoComplete=\"off\"`, `spellCheck={false}`);\n   * event handlers run before the bar's own, and the bar's role, name, value and popup state\n   * always win.\n   */\n  inputProps?: SearchBarInputProps;\n  /** Ref to the root `<div>` element. */\n  ref?: Ref<HTMLDivElement>;\n  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */\n  className?: string;\n  /** Inline styles for the root element. */\n  style?: CSSProperties;\n  /** Classes for each part, by slot. */\n  classNames?: SearchBarClassNames;\n  /** `data-*` attributes, like the other DOM attributes, go to the root. */\n  [data: `data-${string}`]: string | number | boolean | undefined;\n}\n\nexport type SearchBarProps = SearchBarOwnProps & Naming;\n\n/** How a {@link SearchBar} expands. */\nexport type SearchBarView = 'auto' | 'docked' | 'full-screen';\n\ninterface BarRect {\n  top: number;\n  left: number;\n  right: number;\n  bottom: number;\n  width: number;\n  height: number;\n  rtl: boolean;\n}\n\n/** How far the docked field widens on each side when focused (24dp → 12dp margins). */\nconst FOCUSED_GROWTH = 12;\n/** The search bar's maximum width (M3). */\nconst MAX_WIDTH = 720;\n/** The focused search bar's height (M3: \"Search bar container Height 56dp\"). */\nconst FIELD_HEIGHT = 56;\n\nconst FOCUSABLE =\n  'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * M3 Expressive search bar: a 56px pill that expands into a search view, either a dropdown\n * below the bar (docked) or a full-screen view, holding suggestions or results. Pressing\n * the bar, typing into it or ↓ expands it; Escape, a press outside or `collapse()` closes it.\n *\n * @example\n * <SearchBar aria-label=\"Search mail\" placeholder=\"Search mail\" leadingIcon={<SearchIcon />}\n *   value={query} onChange={setQuery} onSubmit={search}>\n *   <SuggestionList … />\n * </SearchBar>\n */\nexport function SearchBar(props: SearchBarProps) {\n  const {\n    value,\n    defaultValue,\n    onChange,\n    onSubmit,\n    expanded,\n    defaultExpanded,\n    onExpandedChange,\n    view: requestedView = 'auto',\n    placeholder,\n    leadingIcon,\n    trailingIcon,\n    textAlign = 'start',\n    resultsAnnouncement,\n    children,\n    inputRef,\n    inputProps: consumerInputProps,\n    ref,\n    className,\n    style,\n    classNames,\n    ...rest\n  } = props;\n  const { 'aria-label': label, 'aria-labelledby': labelledBy } = props as {\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n  };\n  // The server and the first client render see a docked view, so hydration matches.\n  const compact = useMediaQuery(COMPACT_WINDOW);\n  const view = requestedView === 'auto' ? (compact ? 'full-screen' : 'docked') : requestedView;\n  const [query, setQuery] = useControlledState(value, defaultValue ?? '', onChange);\n  const state = useOverlayTriggerState({\n    isOpen: expanded,\n    defaultOpen: defaultExpanded,\n    onOpenChange: onExpandedChange,\n  });\n  const appBar = useContext(SearchAppBarContext);\n  const rootRef = useObjectRef(ref);\n  const [rect, setRect] = useState<BarRect | null>(null);\n  // The views grow from the bar as `--m3-search-progress` runs; under reduced motion they\n  // only fade (the scrim, or the full-screen view).\n  const reduceMotion = useReducedMotion();\n  const { isPresent, isExiting, exitProps } = usePresence(\n    state.isOpen,\n    reduceMotion ? 'opacity' : '--m3-search-progress',\n  );\n\n  // As the view starts leaving, focus goes back at once to what had it when the view opened\n  // (WAI-ARIA: a closing dialog returns focus to what opened it), not when the view unmounts\n  // ~450ms later: typing meanwhile reaches the bar, which opens the view again (2026-10-17).\n  // That's the bar's input when the bar opened it, and whatever had focus when an app's\n  // shortcut did (a link stays focused after ⌘K and Escape); the bar's input otherwise.\n  const collapsedRef = useRef<HTMLInputElement>(null);\n  const collapsedInputRef = useMemo(\n    () => mergeRefs(collapsedRef, isPresent ? undefined : inputRef),\n    [isPresent, inputRef],\n  );\n  // Read before the view's input takes focus (a passive effect) and before React Aria's\n  // focus scope would restore it on unmount, which this hand-over replaces.\n  const restoreRef = useRef<HTMLElement | null>(null);\n  useLayoutEffect(() => {\n    const doc = collapsedRef.current?.ownerDocument;\n    if (!state.isOpen || !doc) return;\n    const active = doc.activeElement;\n    restoreRef.current = active instanceof HTMLElement && active !== doc.body ? active : null;\n  }, [state.isOpen]);\n  useEffect(() => {\n    const collapsed = collapsedRef.current;\n    if (!isExiting || !collapsed) return;\n    // Only from inside the leaving view: a press outside that moved focus elsewhere keeps it.\n    if (!collapsed.ownerDocument.activeElement?.closest('[data-exiting]')) return;\n    const previous = restoreRef.current;\n    const target =\n      previous?.isConnected && !previous.closest('[data-exiting]') ? previous : collapsed;\n    target.focus({ preventScroll: true });\n  }, [isExiting]);\n\n  // The expanded view starts from the bar's bounds; measure them when it opens.\n  useLayoutEffect(() => {\n    const root = rootRef.current;\n    if (!state.isOpen || !root) return;\n    const box = root.getBoundingClientRect();\n    setRect({\n      top: box.top,\n      left: box.left,\n      right: box.right,\n      bottom: box.bottom,\n      width: box.width,\n      height: box.height,\n      rtl: getComputedStyle(root).direction === 'rtl',\n    });\n  }, [state.isOpen, rootRef]);\n\n  const iconState: SearchBarIconState = { expanded: state.isOpen, collapse: state.close, view };\n  const leading = typeof leadingIcon === 'function' ? leadingIcon(iconState) : leadingIcon;\n  const trailing = typeof trailingIcon === 'function' ? trailingIcon(iconState) : trailingIcon;\n  const styles = searchBarStyles({\n    inAppBar: appBar != null,\n    hasLeading: leading != null,\n    hasTrailing: trailing != null,\n  });\n  const { root: data, rest: own } = splitRootProps(rest, { wrapper: true });\n  // The naming attributes describe the inputs, as `aria-label` names them.\n  const { 'aria-describedby': describedBy, 'aria-details': details } = own;\n  const describedByInput =\n    [describedBy, consumerInputProps?.['aria-describedby']].filter(Boolean).join(' ') || undefined;\n  // In an app bar the collapsed field is `surface-container`; the expanded view's field\n  // keeps the search view's own `surface-container-high`.\n  const collapsedTone = appBar ? (appBar.scrolled ? 'scrolled' : 'appBar') : 'default';\n\n  const field = (input: ReactNode, tone: 'default' | 'appBar' | 'scrolled') => (\n    <SearchField\n      className={searchBarStyles({ tone }).field({ class: classNames?.field })}\n      leading={\n        leading != null && (\n          <span data-slot=\"leading\" className={styles.leading({ class: classNames?.leading })}>\n            {leading}\n          </span>\n        )\n      }\n      trailing={\n        trailing != null && (\n          <span data-slot=\"trailing\" className={styles.trailing({ class: classNames?.trailing })}>\n            {trailing}\n          </span>\n        )\n      }\n    >\n      {input}\n    </SearchField>\n  );\n\n  // The consumer's attributes replace the defaults; the bar's own keys always win, and\n  // `mergeProps` chains event handlers (the consumer's first).\n  const sharedInputProps = (handlers: ComponentProps<'input'>): ComponentProps<'input'> => ({\n    ...mergeProps(\n      {\n        enterKeyHint: 'search',\n        autoComplete: 'off',\n        spellCheck: false,\n        'aria-details': details,\n        ...pickDescriptionAria(own),\n      },\n      consumerInputProps,\n      { 'aria-describedby': describedByInput },\n      handlers,\n    ),\n    id: undefined,\n    name: undefined,\n    role: undefined,\n    type: 'search',\n    value: query,\n    placeholder,\n    'aria-label': label,\n    'aria-labelledby': label == null ? labelledBy : undefined,\n  });\n  const inputClass = (align: 'start' | 'center') =>\n    searchBarStyles({\n      hasLeading: leading != null,\n      hasTrailing: trailing != null,\n      textAlign: align,\n    }).input({ class: classNames?.input });\n\n  const submitOnEnter = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Enter' && !event.nativeEvent.isComposing) {\n      event.preventDefault();\n      onSubmit?.(query);\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <div\n      {...data}\n      id={(own as { id?: string }).id}\n      ref={rootRef}\n      style={style}\n      data-expanded={state.isOpen || undefined}\n      data-view={view}\n      className={styles.root({ class: cn(classNames?.root, className) })}\n    >\n      {field(\n        <input\n          {...sharedInputProps({\n            onChange: (event: ChangeEvent<HTMLInputElement>) => {\n              const next = event.target.value;\n              // Compose expands the bar as the user types into it.\n              if (next.length > query.length) state.open();\n              setQuery(next);\n            },\n            onClick: state.open,\n            // Enter and ↓ open the search view, as a click does (Compose expands the bar\n            // as its field takes focus); the query is submitted from the open view.\n            onKeyDown: (event) => {\n              const enter = event.key === 'Enter' && !event.nativeEvent.isComposing;\n              if (enter || event.key === 'ArrowDown') {\n                event.preventDefault();\n                state.open();\n              }\n            },\n          })}\n          data-slot=\"input\"\n          className={inputClass(textAlign)}\n          // The consumer's `inputRef` follows whichever input is live.\n          ref={collapsedInputRef}\n          // Live again as soon as the view starts leaving: a press or typing on the bar\n          // while the view leaves (its parts take no presses) opens it again from where it\n          // is, instead of being swallowed for the ~450ms of the exit (2026-10-17).\n          inert={state.isOpen}\n          aria-hidden={state.isOpen || undefined}\n          // A combobox whose popup is the search view's dialog (ARIA 1.2).\n          role=\"combobox\"\n          aria-expanded={state.isOpen}\n          aria-haspopup=\"dialog\"\n        />,\n        collapsedTone,\n      )}\n      {isPresent && rect && (\n        <Overlay exiting={isExiting}>\n          <SearchView\n            view={view}\n            state={state}\n            rect={rect}\n            animateHeight={!reduceMotion}\n            isExiting={isExiting}\n            exitProps={exitProps}\n            label={label}\n            labelledBy={labelledBy}\n            classNames={classNames}\n            styles={styles}\n            resultsAnnouncement={resultsAnnouncement}\n            field={(contentRef) =>\n              field(\n                <ExpandedInput\n                  {...sharedInputProps({\n                    onChange: (event) => setQuery(event.target.value),\n                    onKeyDown: (event) => {\n                      // M3: once results are queried, the query stays visible but not\n                      // focused; focus moves to the results.\n                      if (submitOnEnter(event)) {\n                        contentRef.current?.focus();\n                        return;\n                      }\n                      if (event.key === 'ArrowDown') {\n                        const first = contentRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n                        if (first) {\n                          event.preventDefault();\n                          first.focus();\n                        }\n                      }\n                    },\n                  })}\n                  data-slot=\"input\"\n                  className={inputClass('start')}\n                  inputRef={inputRef}\n                  open={state.isOpen}\n                />,\n                'default',\n              )\n            }\n          >\n            {children}\n          </SearchView>\n        </Overlay>\n      )}\n    </div>\n  );\n}\n\nfunction SearchField({\n  className,\n  leading,\n  trailing,\n  children,\n}: {\n  className: string;\n  leading: ReactNode;\n  trailing: ReactNode;\n  children: ReactNode;\n}) {\n  // The pill shows the inset focus ring while its input has keyboard focus.\n  const { isFocusVisible, focusProps } = useFocusRing({ within: true, isTextInput: true });\n  return (\n    <div\n      {...focusProps}\n      data-tokens=\"md-comp-search-bar\"\n      data-focus-visible={isFocusVisible || undefined}\n      className={className}\n    >\n      {/* Icon buttons in a search bar are standard (M3), not the filled default. */}\n      <ButtonContext value={standardIconButtons}>\n        {leading}\n        {children}\n        {trailing}\n      </ButtonContext>\n    </div>\n  );\n}\n\nfunction ExpandedInput({\n  inputRef,\n  open,\n  ...props\n}: Omit<ComponentProps<'input'>, 'ref'> & {\n  inputRef?: Ref<HTMLInputElement>;\n  /** The view is open (not leaving): reopened while leaving, the input takes focus again. */\n  open: boolean;\n}) {\n  const ref = useObjectRef(inputRef);\n  // Take focus when the view opens, with the caret after the query.\n  useEffect(() => {\n    const input = ref.current;\n    if (!input || !open) return;\n    input.focus({ preventScroll: true });\n    input.setSelectionRange(input.value.length, input.value.length);\n  }, [ref, open]);\n  return <input {...props} ref={ref} />;\n}\n\nfunction SearchView({\n  view,\n  state,\n  rect,\n  animateHeight,\n  isExiting,\n  exitProps,\n  label,\n  labelledBy,\n  classNames,\n  styles,\n  field,\n  resultsAnnouncement,\n  children,\n}: {\n  view: 'docked' | 'full-screen';\n  state: OverlayTriggerState;\n  rect: BarRect;\n  /** Whether the dropdown's height follows its content on a spring (not under reduced motion). */\n  animateHeight: boolean;\n  isExiting: boolean;\n  exitProps: ReturnType<typeof usePresence>['exitProps'];\n  label?: string;\n  labelledBy?: string;\n  classNames?: SearchBarClassNames;\n  styles: ReturnType<typeof searchBarStyles>;\n  field: (contentRef: RefObject<HTMLDivElement | null>) => ReactNode;\n  resultsAnnouncement?: string;\n  children: ReactNode;\n}) {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const contentSizeRef = useRef<HTMLDivElement>(null);\n  useContentHeight(\n    contentRef,\n    contentSizeRef,\n    view === 'docked' && animateHeight && children != null,\n  );\n  const { modalProps, underlayProps } = useModalOverlay(\n    { isDismissable: !isExiting },\n    state,\n    panelRef,\n  );\n  const { dialogProps } = useDialog(\n    { 'aria-label': label, 'aria-labelledby': label == null ? labelledBy : undefined },\n    panelRef,\n  );\n  const exiting = isExiting || undefined;\n  const panelProps = mergeProps(modalProps, dialogProps, { tabIndex: -1 });\n\n  if (view === 'full-screen') {\n    const vars = {\n      '--m3-search-top': `${rect.top}px`,\n      '--m3-search-left': `${rect.left}px`,\n      '--m3-search-right': `${window.innerWidth - rect.right}px`,\n      '--m3-search-bottom': `${window.innerHeight - rect.bottom}px`,\n      '--m3-search-start': `${rect.rtl ? window.innerWidth - rect.right : rect.left}px`,\n      '--m3-search-width': `${rect.width}px`,\n      '--m3-search-height': `${rect.height}px`,\n    } as CSSProperties;\n    return (\n      <div\n        {...panelProps}\n        {...exitProps}\n        ref={panelRef}\n        style={vars}\n        data-tokens=\"md-comp-search-view\"\n        data-view=\"full-screen\"\n        data-exiting={exiting}\n        className={styles.fullScreenPanel({ class: classNames?.view })}\n      >\n        <div data-exiting={exiting} className={styles.fullScreenHeader()}>\n          {field(contentRef)}\n        </div>\n        <div\n          ref={contentRef}\n          tabIndex={-1}\n          data-exiting={exiting}\n          className={styles.fullScreenContent({ class: classNames?.content })}\n        >\n          {children}\n        </div>\n        <LiveStatus message={resultsAnnouncement} />\n      </div>\n    );\n  }\n  // The docked field widens by 12px on each side (M3 Expressive: margins 24dp → 12dp),\n  // staying within the window and, unless the bar is wider already, 720px.\n  const width = Math.min(rect.width + 2 * FOCUSED_GROWTH, Math.max(rect.width, MAX_WIDTH));\n  const grow = (width - rect.width) / 2;\n  const left = Math.max(0, Math.min(rect.left - grow, window.innerWidth - width));\n  // The focused field is 56px whatever the collapsed bar's height (a consumer `h-*`),\n  // centred on the bar and kept within the window.\n  const top = Math.max(0, rect.top + (rect.height - FIELD_HEIGHT) / 2);\n  // The panel morphs from the bar's bounds by these deltas (`dockedPanel`).\n  const dockedVars = {\n    '--m3-search-top': `${rect.top}px`,\n    '--m3-search-left': `${rect.left}px`,\n    '--m3-search-width': `${rect.width}px`,\n    '--m3-search-height': `${rect.height}px`,\n    '--m3-search-dx': `${left - rect.left}px`,\n    '--m3-search-dy': `${top - rect.top}px`,\n    '--m3-search-dw': `${Math.min(width, window.innerWidth) - rect.width}px`,\n    '--m3-search-dh': `${FIELD_HEIGHT - rect.height}px`,\n  } as CSSProperties;\n\n  return (\n    <>\n      {/* Presence ends on the scrim's fade under reduced motion, else on the panel's motion. */}\n      <div\n        {...exitProps}\n        aria-hidden=\"true\"\n        data-exiting={exiting}\n        className={styles.scrim({ class: classNames?.scrim })}\n      />\n      <div {...underlayProps} data-exiting={exiting} className={styles.underlay()}>\n        <div\n          {...panelProps}\n          {...exitProps}\n          ref={panelRef}\n          style={dockedVars}\n          data-exiting={exiting}\n          className={styles.dockedPanel({ class: classNames?.view })}\n        >\n          <div className={styles.dockedHeader()}>{field(contentRef)}</div>\n          {children != null && (\n            <div\n              ref={contentRef}\n              tabIndex={-1}\n              data-tokens=\"md-comp-search-view\"\n              data-view=\"docked\"\n              data-exiting={exiting}\n              className={styles.dropdown({ class: classNames?.content })}\n            >\n              {/* Measured, so the dropdown's height can follow it (`useContentHeight`). */}\n              <div ref={contentSizeRef} className=\"flow-root\">\n                {children}\n              </div>\n            </div>\n          )}\n          <LiveStatus message={resultsAnnouncement} />\n        </div>\n      </div>\n    </>\n  );\n}\n\n/**\n * Keeps `--m3-search-content-height` on the dropdown at its content's height (plus the\n * dropdown's own padding and borders), so the dropdown's height animates as the results\n * change instead of jumping. While that height animates the dropdown doesn't scroll\n * (`data-resizing`), so a scrollbar never flashes in and rewraps the content.\n */\nfunction useContentHeight(\n  dropdownRef: RefObject<HTMLDivElement | null>,\n  contentRef: RefObject<HTMLDivElement | null>,\n  enabled: boolean,\n) {\n  useLayoutEffect(() => {\n    const dropdown = dropdownRef.current;\n    const content = contentRef.current;\n    if (!enabled || !dropdown || !content) return;\n    let measured = Number.NaN;\n    const measure = () => {\n      const style = getComputedStyle(dropdown);\n      const frame =\n        parseFloat(style.paddingTop) +\n        parseFloat(style.paddingBottom) +\n        parseFloat(style.borderTopWidth) +\n        parseFloat(style.borderBottomWidth);\n      const height = content.getBoundingClientRect().height + frame;\n      // The content's box shifts by a fraction of a pixel as the panel moves; only a real\n      // change of size restarts the height's spring.\n      if (Math.abs(height - measured) < 0.5) return;\n      measured = height;\n      dropdown.style.setProperty('--m3-search-content-height', `${height}px`);\n    };\n    const resizing = (on: boolean) => (event: TransitionEvent) => {\n      if (event.target !== dropdown || event.propertyName !== 'height') return;\n      if (on) dropdown.dataset.resizing = '';\n      else delete dropdown.dataset.resizing;\n    };\n    const start = resizing(true);\n    const end = resizing(false);\n    measure();\n    dropdown.addEventListener('transitionrun', start);\n    dropdown.addEventListener('transitionend', end);\n    dropdown.addEventListener('transitioncancel', end);\n    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure);\n    observer?.observe(content);\n    return () => {\n      observer?.disconnect();\n      dropdown.removeEventListener('transitionrun', start);\n      dropdown.removeEventListener('transitionend', end);\n      dropdown.removeEventListener('transitioncancel', end);\n      dropdown.style.removeProperty('--m3-search-content-height');\n      delete dropdown.dataset.resizing;\n    };\n  }, [dropdownRef, contentRef, enabled]);\n}\n\n/**\n * A polite live region inside the search view. It starts empty and takes the message a\n * moment later, so the first one is announced too, and again whenever it changes.\n */\nfunction LiveStatus({ message }: { message?: string }) {\n  const [text, setText] = useState('');\n  useEffect(() => {\n    const timer = setTimeout(() => setText(message ?? ''), 150);\n    return () => clearTimeout(timer);\n  }, [message]);\n  return (\n    <div role=\"status\" className=\"sr-only\">\n      {text}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/search/search-styles.d.ts

@@ -0,0 +1,243 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/search/search-styles.d.ts
+/** Variant definitions for {@link SearchBar}; extend them to add variants. */
+export declare const searchBarStyles: import("tailwind-variants").TVReturnType<{
+  /**
+   * Inside a search app bar the bar fills the free space up to 312px, then grows to half
+   * of it (M3), up to 720px.
+   */
+  inAppBar: {
+    true: {
+      root: string;
+    };
+    false: {};
+  };
+  hasLeading: {
+    true: {
+      input: string;
+    };
+    false: {
+      input: string;
+    };
+  };
+  hasTrailing: {
+    true: {
+      input: string;
+    };
+    false: {
+      input: string;
+    };
+  };
+  /**
+   * Container colour: the bar's own; in a search app bar `surface-container`, and one
+   * step higher than the bar once content scrolls under it.
+   */
+  tone: {
+    default: {
+      field: string;
+    };
+    appBar: {
+      field: string;
+    };
+    scrolled: {
+      field: string;
+    };
+  };
+  /** Centre the placeholder and the query while the bar is collapsed. */
+  textAlign: {
+    start: {};
+    center: {
+      input: string;
+    };
+  };
+}, {
+  root: string;
+  field: string[];
+  leading: string;
+  trailing: string[];
+  input: string[];
+  scrim: string[];
+  dockedPanel: string[];
+  underlay: string;
+  dockedHeader: string;
+  dropdown: string[];
+  fullScreenPanel: string[];
+  fullScreenHeader: string[];
+  fullScreenContent: string[];
+}, undefined, {
+  /**
+   * Inside a search app bar the bar fills the free space up to 312px, then grows to half
+   * of it (M3), up to 720px.
+   */
+  inAppBar: {
+    true: {
+      root: string;
+    };
+    false: {};
+  };
+  hasLeading: {
+    true: {
+      input: string;
+    };
+    false: {
+      input: string;
+    };
+  };
+  hasTrailing: {
+    true: {
+      input: string;
+    };
+    false: {
+      input: string;
+    };
+  };
+  /**
+   * Container colour: the bar's own; in a search app bar `surface-container`, and one
+   * step higher than the bar once content scrolls under it.
+   */
+  tone: {
+    default: {
+      field: string;
+    };
+    appBar: {
+      field: string;
+    };
+    scrolled: {
+      field: string;
+    };
+  };
+  /** Centre the placeholder and the query while the bar is collapsed. */
+  textAlign: {
+    start: {};
+    center: {
+      input: string;
+    };
+  };
+}, {
+  root: string;
+  field: string[];
+  leading: string;
+  trailing: string[];
+  input: string[];
+  scrim: string[];
+  dockedPanel: string[];
+  underlay: string;
+  dockedHeader: string;
+  dropdown: string[];
+  fullScreenPanel: string[];
+  fullScreenHeader: string[];
+  fullScreenContent: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+  /**
+   * Inside a search app bar the bar fills the free space up to 312px, then grows to half
+   * of it (M3), up to 720px.
+   */
+  inAppBar: {
+    true: {
+      root: string;
+    };
+    false: {};
+  };
+  hasLeading: {
+    true: {
+      input: string;
+    };
+    false: {
+      input: string;
+    };
+  };
+  hasTrailing: {
+    true: {
+      input: string;
+    };
+    false: {
+      input: string;
+    };
+  };
+  /**
+   * Container colour: the bar's own; in a search app bar `surface-container`, and one
+   * step higher than the bar once content scrolls under it.
+   */
+  tone: {
+    default: {
+      field: string;
+    };
+    appBar: {
+      field: string;
+    };
+    scrolled: {
+      field: string;
+    };
+  };
+  /** Centre the placeholder and the query while the bar is collapsed. */
+  textAlign: {
+    start: {};
+    center: {
+      input: string;
+    };
+  };
+}, {
+  root: string;
+  field: string[];
+  leading: string;
+  trailing: string[];
+  input: string[];
+  scrim: string[];
+  dockedPanel: string[];
+  underlay: string;
+  dockedHeader: string;
+  dropdown: string[];
+  fullScreenPanel: string[];
+  fullScreenHeader: string[];
+  fullScreenContent: string[];
+}>>;
+/** Variant definitions for {@link SearchAppBar}. */
+export declare const searchAppBarStyles: import("tailwind-variants").TVReturnType<{
+  scrolling: {
+    true: {
+      root: string;
+    };
+    false: {};
+  };
+}, {
+  root: string[];
+  navigation: string;
+  search: string;
+  actions: string;
+}, undefined, {
+  scrolling: {
+    true: {
+      root: string;
+    };
+    false: {};
+  };
+}, {
+  root: string[];
+  navigation: string;
+  search: string;
+  actions: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  scrolling: {
+    true: {
+      root: string;
+    };
+    false: {};
+  };
+}, {
+  root: string[];
+  navigation: string;
+  search: string;
+  actions: string;
+}>>;
+/**
+ * The variants of {@link searchBarStyles}, for building on its styles. They are the recipe's keys, not
+ * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.
+ */
+export type SearchBarStyleProps = VariantProps<typeof searchBarStyles>;
+/**
+ * The variants of {@link searchAppBarStyles}, for building on its styles. They are the recipe's keys, not
+ * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.
+ */
+export type SearchAppBarStyleProps = VariantProps<typeof searchAppBarStyles>;
+//#endregion
+//# sourceMappingURL=search-styles.d.ts.map

package/dist/components/search/search-styles.js

@@ -0,0 +1,143 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/search/search-styles.ts
+const contentFade = ["opacity-100 starting:opacity-0 data-exiting:opacity-0", "[transition-delay:0s,50ms] data-exiting:[transition-delay:0s,0s]"];
+/** Variant definitions for {@link SearchBar}; extend them to add variants. */
+const searchBarStyles = tv({
+	slots: {
+		root: "flex h-[56px] w-[360px] max-w-[min(720px,100%)] shrink-0",
+		field: ["focus-ring-inset flex h-full w-full min-w-0 items-center rounded-[var(--_md-comp-search-bar-container-shape)] text-on-surface", "forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]"],
+		leading: "ms-[4px] flex size-[48px] shrink-0 items-center justify-center text-[color:var(--_md-comp-search-bar-leading-icon-color)] [--md-comp-icon-button-icon-color:currentColor] [&>svg]:size-[24px]",
+		trailing: ["me-[4px] flex h-[48px] min-w-[48px] shrink-0 items-center justify-center gap-[8px] px-[4px] text-[color:var(--_md-comp-search-bar-trailing-icon-color)] [--md-comp-icon-button-icon-color:currentColor]", "[&>svg]:size-[24px] [&>img]:size-[30px] [&>img]:rounded-full"],
+		input: [
+			"h-full min-w-0 flex-1 bg-transparent text-body-large text-[color:var(--_md-comp-search-bar-input-text-color)] caret-primary outline-none",
+			"placeholder:text-on-surface-variant",
+			"[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none"
+		],
+		scrim: [
+			"fixed inset-0 z-(--md-sys-z-scrim) bg-scrim/32 opacity-100 data-exiting:pointer-events-none",
+			"[transition-property:opacity]",
+			"[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]",
+			"starting:opacity-0 data-exiting:opacity-0"
+		],
+		dockedPanel: [
+			"fixed z-(--md-sys-z-sheet) flex flex-col outline-none data-exiting:pointer-events-none",
+			"[--m3-search-progress:1] [--m3-search-p:max(0,var(--m3-search-progress))]",
+			"motion-safe:starting:[--m3-search-progress:0] motion-safe:data-exiting:[--m3-search-progress:0]",
+			"top-[calc(var(--m3-search-top)_+_var(--m3-search-p)_*_var(--m3-search-dy))]",
+			"left-[calc(var(--m3-search-left)_+_var(--m3-search-p)_*_var(--m3-search-dx))]",
+			"w-[calc(var(--m3-search-width)_+_var(--m3-search-p)_*_var(--m3-search-dw))]",
+			"[transition-property:--m3-search-progress]",
+			"[transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]"
+		],
+		underlay: "fixed inset-0 z-(--md-sys-z-sheet) data-exiting:pointer-events-none",
+		dockedHeader: "flex h-[calc(var(--m3-search-height)_+_var(--m3-search-p)_*_var(--m3-search-dh))] shrink-0",
+		dropdown: [
+			"mt-[2px] overflow-y-auto overscroll-contain data-resizing:overflow-y-hidden data-exiting:pointer-events-none",
+			"min-h-[min(182px,calc(66.67dvh-58px))] max-h-[calc(66.67dvh-58px)]",
+			"h-[clamp(min(182px,calc(66.67dvh_-_58px)),var(--m3-search-content-height),calc(66.67dvh_-_58px))]",
+			"rounded-[var(--_md-comp-search-view-docked-container-shape)] bg-[var(--_md-comp-search-view-container-color)] text-on-surface",
+			"forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]",
+			"translate-y-0 motion-safe:starting:-translate-y-1/2 motion-safe:data-exiting:-translate-y-1/2",
+			"[transition-property:translate,opacity,height]",
+			"[transition-duration:var(--md-sys-motion-spring-spatial-default-duration),100ms,var(--md-sys-motion-spring-spatial-default-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing),cubic-bezier(0.3,0,1,1),var(--md-sys-motion-spring-spatial-default-easing)]",
+			"data-exiting:[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),100ms,var(--md-sys-motion-spring-spatial-fast-duration)]",
+			"data-exiting:[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),cubic-bezier(0,0,0,1),var(--md-sys-motion-spring-spatial-fast-easing)]",
+			...contentFade
+		],
+		fullScreenPanel: [
+			"fixed inset-0 z-(--md-sys-z-sheet) bg-[var(--_md-comp-search-view-container-color)] text-on-surface outline-none data-exiting:pointer-events-none",
+			"[--m3-search-progress:1] [--m3-search-p:clamp(0,var(--m3-search-progress),1)]",
+			"motion-safe:starting:[--m3-search-progress:0] motion-safe:data-exiting:[--m3-search-progress:0]",
+			"[clip-path:inset(calc((1_-_var(--m3-search-p))_*_var(--m3-search-top))_calc((1_-_var(--m3-search-p))_*_var(--m3-search-right))_calc((1_-_var(--m3-search-p))_*_var(--m3-search-bottom))_calc((1_-_var(--m3-search-p))_*_var(--m3-search-left))_round_calc((1_-_var(--m3-search-p))_*_28px))]",
+			"motion-safe:[transition-property:--m3-search-progress]",
+			"motion-safe:[transition-duration:var(--md-sys-motion-spring-spatial-slow-duration)]",
+			"motion-safe:[transition-timing-function:var(--md-sys-motion-spring-spatial-slow-easing)]",
+			"motion-safe:data-exiting:[transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]",
+			"motion-safe:data-exiting:[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]",
+			"motion-reduce:starting:opacity-0 motion-reduce:data-exiting:opacity-0",
+			"motion-reduce:[transition-property:opacity]",
+			"motion-reduce:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)]",
+			"motion-reduce:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]"
+		],
+		fullScreenHeader: [
+			"absolute",
+			"start-[calc(var(--m3-search-start)_+_var(--m3-search-p)_*_(16px_-_var(--m3-search-start)))]",
+			"top-[calc(var(--m3-search-top)_+_var(--m3-search-p)_*_(8px_-_var(--m3-search-top)))]",
+			"w-[calc(var(--m3-search-width)_+_var(--m3-search-p)_*_(100%_-_32px_-_var(--m3-search-width)))]",
+			"h-[calc(var(--m3-search-height)_+_var(--m3-search-p)_*_(56px_-_var(--m3-search-height)))]"
+		],
+		fullScreenContent: [
+			"absolute inset-x-0 top-[72px] bottom-0 overflow-y-auto overscroll-contain",
+			"[transition-property:opacity] [transition-duration:100ms]",
+			"[transition-timing-function:cubic-bezier(0.3,0,1,1)]",
+			"data-exiting:[transition-timing-function:cubic-bezier(0,0,0,1)]",
+			...contentFade
+		]
+	},
+	variants: {
+		/**
+		* Inside a search app bar the bar fills the free space up to 312px, then grows to half
+		* of it (M3), up to 720px.
+		*/
+		inAppBar: {
+			true: { root: "w-[max(min(100%,312px),50%)]" },
+			false: {}
+		},
+		hasLeading: {
+			true: { input: "ps-[4px]" },
+			false: { input: "ps-[16px]" }
+		},
+		hasTrailing: {
+			true: { input: "pe-[4px]" },
+			false: { input: "pe-[16px]" }
+		},
+		/**
+		* Container colour: the bar's own; in a search app bar `surface-container`, and one
+		* step higher than the bar once content scrolls under it.
+		*/
+		tone: {
+			default: { field: "bg-[var(--_md-comp-search-bar-container-color)]" },
+			appBar: { field: "bg-surface-container" },
+			scrolled: { field: "bg-surface-container-highest" }
+		},
+		/** Centre the placeholder and the query while the bar is collapsed. */
+		textAlign: {
+			start: {},
+			center: { input: "text-center" }
+		}
+	},
+	defaultVariants: {
+		inAppBar: false,
+		hasLeading: false,
+		hasTrailing: false,
+		tone: "default",
+		textAlign: "start"
+	}
+});
+/** Variant definitions for {@link SearchAppBar}. */
+const searchAppBarStyles = tv({
+	slots: {
+		root: [
+			"flex min-h-[64px] w-full items-center text-on-surface",
+			"bg-[var(--_md-comp-app-bar-container-color)] data-scrolled:bg-[var(--_md-comp-app-bar-on-scroll-container-color)]",
+			"[transition-property:background-color]",
+			"[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]"
+		],
+		navigation: "flex shrink-0 items-center ps-[8px] pe-[4px] text-[color:var(--_md-comp-app-bar-leading-icon-color)] [--md-comp-icon-button-icon-color:currentColor]",
+		search: "flex min-w-0 flex-1 justify-center ps-[8px] pe-[8px] pt-[4px] pb-[4px]",
+		actions: "flex shrink-0 items-center gap-[8px] ps-[4px] pe-[8px] text-[color:var(--_md-comp-app-bar-trailing-icon-color)] [--md-comp-icon-button-icon-color:currentColor]"
+	},
+	variants: { scrolling: {
+		true: { root: "sticky top-(--m3-app-bar-offset) z-(--md-sys-z-sticky)" },
+		false: {}
+	} },
+	defaultVariants: { scrolling: false }
+});
+//#endregion
+export { searchAppBarStyles, searchBarStyles };
+
+//# sourceMappingURL=search-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"search-styles.js","names":[],"sources":["../../../src/components/search/search-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow Compose Material 3 (SearchBar.kt: SearchBar, AppBarWithSearch,\n * ExpandedDockedSearchBarWithGap, ExpandedFullScreenSearchBar, SearchBarDefaults.InputField;\n * SearchBar / SearchView tokens).\n *\n * Field: 56px, full corners, `surface-container-high`, 360px wide by default and at most\n * 720px. Input and placeholder `body-large`, `on-surface` / `on-surface-variant`. Icons sit\n * in 48px boxes shifted 4px inwards (leading `on-surface`, trailing `on-surface-variant`);\n * the text keeps 4px from the leading and trailing tap targets (the spec's \"Leading icon and\n * label padding (from tap target): 4dp\" and \"Label and trailing icon padding\"; Compose's\n * code leaves none), so it starts 56px in after a leading icon, 16px without one.\n *\n * Docked (with gap): the expanded field, 56px tall whatever the collapsed bar's height\n * (M3's focused search bar container), sits centred over the collapsed one and widens by 12px on\n * each side (M3 Expressive: the margins change from 24dp to 12dp when focused). It morphs from\n * the bar's bounds (position and size) on the default spatial spring and back on the same\n * spring floored at the bar, so it lands on the bar exactly; a dropdown 2px below it (12px corners,\n * `surface-container-high`; with the bar, at least 240px and at most 2/3 of the window\n * tall, per the M3 spec) slides down from half its height on the default spatial spring\n * (fast spatial back) while its content fades in over 100ms after 50ms, and its height follows\n * the results on the default spatial spring; a 32% scrim covers the page.\n *\n * Full screen, in M3 Expressive's contained style: a `surface-container-low` surface grows\n * from the bar's bounds (28px corners) to the whole window on the slow spatial spring\n * (default spatial back), clamped so nothing overshoots; the field keeps its\n * `surface-container-high` pill and moves and grows from the bar to the top, 8px down and\n * 16px from each side, and the content starts 72px down.\n *\n * In a search app bar the field is `surface-container` (`surface-container-highest` once\n * content scrolls under the bar) and fills the free space up to 312px, then half of it,\n * at most 720px (M3 app bar guidelines).\n *\n * The field's colours and corners come from the search bar's component tokens and the\n * views' from the search view's (`search-tokens.ts`, `--md-comp-search-bar-*` and\n * `--md-comp-search-view-*`); the pill, the dropdown and the full-screen view carry\n * `data-tokens`. The search app bar reads the app bar's tokens (`app-bar-tokens.ts`). A\n * consumer class still wins in `cn()`.\n *\n * Every class is written out in full so Tailwind can find it.\n */\n\nconst contentFade = [\n  'opacity-100 starting:opacity-0 data-exiting:opacity-0',\n  // Compose: fade in over 100ms after 50ms (standard accelerate), out over 100ms.\n  '[transition-delay:0s,50ms] data-exiting:[transition-delay:0s,0s]',\n];\n\n/** Variant definitions for {@link SearchBar}; extend them to add variants. */\nexport const searchBarStyles = tv({\n  slots: {\n    // The bar's height is set here alone (56px, Compose's); a consumer `h-*` resizes it.\n    root: 'flex h-[56px] w-[360px] max-w-[min(720px,100%)] shrink-0',\n    // The pill holding the icons and the input fills the bar.\n    // Keyboard focus in the input draws Compose's inset focus ring around the pill.\n    // Forced colours drop the pill's colour: a system-colour border keeps its edge.\n    field: [\n      'focus-ring-inset flex h-full w-full min-w-0 items-center rounded-[var(--_md-comp-search-bar-container-shape)] text-on-surface',\n      'forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n    ],\n    // Icon buttons in the slots take the slot's colour (and so its icon colour token), as\n    // in the app bar's slots: Compose colours the search bar's and view's leading icon\n    // `on-surface` and trailing icons `on-surface-variant`, buttons included.\n    leading:\n      'ms-[4px] flex size-[48px] shrink-0 items-center justify-center text-[color:var(--_md-comp-search-bar-leading-icon-color)] [--md-comp-icon-button-icon-color:currentColor] [&>svg]:size-[24px]',\n    // One or two trailing icon buttons, or an avatar (30px) and an icon button (M3). Two\n    // 40px buttons sit 8px apart inside 4px of padding, so their 48px targets meet edge to\n    // edge within the slot (a single one is centred in 48px, as before).\n    trailing: [\n      'me-[4px] flex h-[48px] min-w-[48px] shrink-0 items-center justify-center gap-[8px] px-[4px] text-[color:var(--_md-comp-search-bar-trailing-icon-color)] [--md-comp-icon-button-icon-color:currentColor]',\n      '[&>svg]:size-[24px] [&>img]:size-[30px] [&>img]:rounded-full',\n    ],\n    input: [\n      'h-full min-w-0 flex-1 bg-transparent text-body-large text-[color:var(--_md-comp-search-bar-input-text-color)] caret-primary outline-none',\n      'placeholder:text-on-surface-variant',\n      '[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none',\n    ],\n    scrim: [\n      'fixed inset-0 z-(--md-sys-z-scrim) bg-scrim/32 opacity-100 data-exiting:pointer-events-none',\n      '[transition-property:opacity]',\n      '[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]',\n      'starting:opacity-0 data-exiting:opacity-0',\n    ],\n    /*\n     * Docked view: the panel sits over the collapsed bar and morphs from the bar's bounds\n     * (`--m3-search-left/top/width/height`) to the focused field's (the `-dx/-dy/-dw/-dh`\n     * deltas) as `--m3-search-progress` runs 0 → 1, as Compose lerps the layout with its\n     * search bar state's progress. `--m3-search-p` is that progress floored at 0 (Compose's\n     * `coerceAtLeast(0f)`): the spring may overshoot past the focused bounds on the way in,\n     * but never past the bar's on the way back, so the field lands on the bar exactly.\n     * Reduced motion: the progress stays at 1, so the field is at its focused size at once.\n     */\n    dockedPanel: [\n      // Leaving, the view takes no presses: the spring's tail runs on after the field has\n      // landed on the bar, and a press there ran a suggestion of the invisible dropdown.\n      'fixed z-(--md-sys-z-sheet) flex flex-col outline-none data-exiting:pointer-events-none',\n      '[--m3-search-progress:1] [--m3-search-p:max(0,var(--m3-search-progress))]',\n      'motion-safe:starting:[--m3-search-progress:0] motion-safe:data-exiting:[--m3-search-progress:0]',\n      'top-[calc(var(--m3-search-top)_+_var(--m3-search-p)_*_var(--m3-search-dy))]',\n      'left-[calc(var(--m3-search-left)_+_var(--m3-search-p)_*_var(--m3-search-dx))]',\n      'w-[calc(var(--m3-search-width)_+_var(--m3-search-p)_*_var(--m3-search-dw))]',\n      // Both ways on the default spatial spring (Compose's collapse spec).\n      '[transition-property:--m3-search-progress]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]',\n    ],\n    // The focused field is 56px (M3), even when the collapsed bar is resized; it grows from\n    // the bar's height with the panel.\n    // The full-window layer the docked view sits in (React Aria's underlay).\n    underlay: 'fixed inset-0 z-(--md-sys-z-sheet) data-exiting:pointer-events-none',\n    dockedHeader:\n      'flex h-[calc(var(--m3-search-height)_+_var(--m3-search-p)_*_var(--m3-search-dh))] shrink-0',\n    dropdown: [\n      'mt-[2px] overflow-y-auto overscroll-contain data-resizing:overflow-y-hidden data-exiting:pointer-events-none',\n      // 58px is the field and the gap above the dropdown.\n      'min-h-[min(182px,calc(66.67dvh-58px))] max-h-[calc(66.67dvh-58px)]',\n      // The height follows the content (`--m3-search-content-height`, measured) within those\n      // bounds, so it animates as the results change. Without the measurement (before\n      // hydration, or under reduced motion) it's `auto`.\n      'h-[clamp(min(182px,calc(66.67dvh_-_58px)),var(--m3-search-content-height),calc(66.67dvh_-_58px))]',\n      'rounded-[var(--_md-comp-search-view-docked-container-shape)] bg-[var(--_md-comp-search-view-container-color)] text-on-surface',\n      'forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n      // Reduced motion: it only fades.\n      'translate-y-0 motion-safe:starting:-translate-y-1/2 motion-safe:data-exiting:-translate-y-1/2',\n      // The delays below cycle, so the height (third) starts at once like the slide.\n      '[transition-property:translate,opacity,height]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-default-duration),100ms,var(--md-sys-motion-spring-spatial-default-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing),cubic-bezier(0.3,0,1,1),var(--md-sys-motion-spring-spatial-default-easing)]',\n      'data-exiting:[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),100ms,var(--md-sys-motion-spring-spatial-fast-duration)]',\n      'data-exiting:[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),cubic-bezier(0,0,0,1),var(--md-sys-motion-spring-spatial-fast-easing)]',\n      ...contentFade,\n    ],\n    /*\n     * Full-screen view: the surface grows from the bar's bounds to the window as\n     * `--m3-search-progress` runs 0 → 1, through a clip (nothing is transformed). Compose\n     * clamps the full-screen progress to 0..1 (`coerceIn`), so `--m3-search-p` is clamped too:\n     * the clip and the field never overshoot the window's or the bar's bounds.\n     */\n    fullScreenPanel: [\n      'fixed inset-0 z-(--md-sys-z-sheet) bg-[var(--_md-comp-search-view-container-color)] text-on-surface outline-none data-exiting:pointer-events-none',\n      '[--m3-search-progress:1] [--m3-search-p:clamp(0,var(--m3-search-progress),1)]',\n      'motion-safe:starting:[--m3-search-progress:0] motion-safe:data-exiting:[--m3-search-progress:0]',\n      '[clip-path:inset(calc((1_-_var(--m3-search-p))_*_var(--m3-search-top))_calc((1_-_var(--m3-search-p))_*_var(--m3-search-right))_calc((1_-_var(--m3-search-p))_*_var(--m3-search-bottom))_calc((1_-_var(--m3-search-p))_*_var(--m3-search-left))_round_calc((1_-_var(--m3-search-p))_*_28px))]',\n      'motion-safe:[transition-property:--m3-search-progress]',\n      'motion-safe:[transition-duration:var(--md-sys-motion-spring-spatial-slow-duration)]',\n      'motion-safe:[transition-timing-function:var(--md-sys-motion-spring-spatial-slow-easing)]',\n      'motion-safe:data-exiting:[transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]',\n      'motion-safe:data-exiting:[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]',\n      // Reduced motion: the view fades in and out over the window instead of growing.\n      'motion-reduce:starting:opacity-0 motion-reduce:data-exiting:opacity-0',\n      'motion-reduce:[transition-property:opacity]',\n      'motion-reduce:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)]',\n      'motion-reduce:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]',\n    ],\n    // Compose's full-screen field is 56px whatever the bar's size, 8px down and 16px from each\n    // side; it moves and grows there from the bar's bounds with the surface.\n    fullScreenHeader: [\n      'absolute',\n      'start-[calc(var(--m3-search-start)_+_var(--m3-search-p)_*_(16px_-_var(--m3-search-start)))]',\n      'top-[calc(var(--m3-search-top)_+_var(--m3-search-p)_*_(8px_-_var(--m3-search-top)))]',\n      'w-[calc(var(--m3-search-width)_+_var(--m3-search-p)_*_(100%_-_32px_-_var(--m3-search-width)))]',\n      'h-[calc(var(--m3-search-height)_+_var(--m3-search-p)_*_(56px_-_var(--m3-search-height)))]',\n    ],\n    fullScreenContent: [\n      'absolute inset-x-0 top-[72px] bottom-0 overflow-y-auto overscroll-contain',\n      '[transition-property:opacity] [transition-duration:100ms]',\n      '[transition-timing-function:cubic-bezier(0.3,0,1,1)]',\n      'data-exiting:[transition-timing-function:cubic-bezier(0,0,0,1)]',\n      ...contentFade,\n    ],\n  },\n  variants: {\n    /**\n     * Inside a search app bar the bar fills the free space up to 312px, then grows to half\n     * of it (M3), up to 720px.\n     */\n    inAppBar: { true: { root: 'w-[max(min(100%,312px),50%)]' }, false: {} },\n    // 4px from a tap target (M3), else 16px from the pill's edge.\n    hasLeading: { true: { input: 'ps-[4px]' }, false: { input: 'ps-[16px]' } },\n    hasTrailing: { true: { input: 'pe-[4px]' }, false: { input: 'pe-[16px]' } },\n    /**\n     * Container colour: the bar's own; in a search app bar `surface-container`, and one\n     * step higher than the bar once content scrolls under it.\n     */\n    tone: {\n      default: { field: 'bg-[var(--_md-comp-search-bar-container-color)]' },\n      appBar: { field: 'bg-surface-container' },\n      scrolled: { field: 'bg-surface-container-highest' },\n    },\n    /** Centre the placeholder and the query while the bar is collapsed. */\n    textAlign: { start: {}, center: { input: 'text-center' } },\n  },\n  defaultVariants: {\n    inAppBar: false,\n    hasLeading: false,\n    hasTrailing: false,\n    tone: 'default',\n    textAlign: 'start',\n  },\n});\n\n/** Variant definitions for {@link SearchAppBar}. */\nexport const searchAppBarStyles = tv({\n  slots: {\n    root: [\n      'flex min-h-[64px] w-full items-center text-on-surface',\n      'bg-[var(--_md-comp-app-bar-container-color)] data-scrolled:bg-[var(--_md-comp-app-bar-on-scroll-container-color)]',\n      '[transition-property:background-color]',\n      '[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]',\n    ],\n    // Icon buttons take each slot's content colour.\n    navigation:\n      'flex shrink-0 items-center ps-[8px] pe-[4px] text-[color:var(--_md-comp-app-bar-leading-icon-color)] [--md-comp-icon-button-icon-color:currentColor]',\n    // Centres the search bar in the free space, 8px from its neighbours and 4px vertically.\n    search: 'flex min-w-0 flex-1 justify-center ps-[8px] pe-[8px] pt-[4px] pb-[4px]',\n    actions:\n      'flex shrink-0 items-center gap-[8px] ps-[4px] pe-[8px] text-[color:var(--_md-comp-app-bar-trailing-icon-color)] [--md-comp-icon-button-icon-color:currentColor]',\n  },\n  variants: {\n    scrolling: {\n      true: { root: 'sticky top-(--m3-app-bar-offset) z-(--md-sys-z-sticky)' },\n      false: {},\n    },\n  },\n  defaultVariants: { scrolling: false },\n});\n\n/**\n * The variants of {@link searchBarStyles}, 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 SearchBarStyleProps = VariantProps<typeof searchBarStyles>;\n/**\n * The variants of {@link searchAppBarStyles}, 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 SearchAppBarStyleProps = VariantProps<typeof searchAppBarStyles>;\n"],"mappings":";;AA2CA,MAAM,cAAc,CAClB,yDAEA,kEACF;;AAGA,MAAa,kBAAkB,GAAG;CAChC,OAAO;EAEL,MAAM;EAIN,OAAO,CACL,iIACA,mFACF;EAIA,SACE;EAIF,UAAU,CACR,2MACA,8DACF;EACA,OAAO;GACL;GACA;GACA;EACF;EACA,OAAO;GACL;GACA;GACA;GACA;GACA;EACF;EAUA,aAAa;GAGX;GACA;GACA;GACA;GACA;GACA;GAEA;GACA;GACA;EACF;EAIA,UAAU;EACV,cACE;EACF,UAAU;GACR;GAEA;GAIA;GACA;GACA;GAEA;GAEA;GACA;GACA;GACA;GACA;GACA,GAAG;EACL;EAOA,iBAAiB;GACf;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;EACF;EAGA,kBAAkB;GAChB;GACA;GACA;GACA;GACA;EACF;EACA,mBAAmB;GACjB;GACA;GACA;GACA;GACA,GAAG;EACL;CACF;CACA,UAAU;;;;;EAKR,UAAU;GAAE,MAAM,EAAE,MAAM,+BAA+B;GAAG,OAAO,CAAC;EAAE;EAEtE,YAAY;GAAE,MAAM,EAAE,OAAO,WAAW;GAAG,OAAO,EAAE,OAAO,YAAY;EAAE;EACzE,aAAa;GAAE,MAAM,EAAE,OAAO,WAAW;GAAG,OAAO,EAAE,OAAO,YAAY;EAAE;;;;;EAK1E,MAAM;GACJ,SAAS,EAAE,OAAO,kDAAkD;GACpE,QAAQ,EAAE,OAAO,uBAAuB;GACxC,UAAU,EAAE,OAAO,+BAA+B;EACpD;;EAEA,WAAW;GAAE,OAAO,CAAC;GAAG,QAAQ,EAAE,OAAO,cAAc;EAAE;CAC3D;CACA,iBAAiB;EACf,UAAU;EACV,YAAY;EACZ,aAAa;EACb,MAAM;EACN,WAAW;CACb;AACF,CAAC;;AAGD,MAAa,qBAAqB,GAAG;CACnC,OAAO;EACL,MAAM;GACJ;GACA;GACA;GACA;GACA;EACF;EAEA,YACE;EAEF,QAAQ;EACR,SACE;CACJ;CACA,UAAU,EACR,WAAW;EACT,MAAM,EAAE,MAAM,yDAAyD;EACvE,OAAO,CAAC;CACV,EACF;CACA,iBAAiB,EAAE,WAAW,MAAM;AACtC,CAAC"}

package/dist/components/search/search-tokens.d.ts

@@ -0,0 +1,9 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/search/search-tokens.d.ts
+/** The tokens of {@link SearchBar}'s field: `--md-comp-search-bar-<part>`. */
+export declare const searchBarTokenSet: ComponentTokenSet<"container-color" | "container-shape" | "input-text-color" | "leading-icon-color" | "trailing-icon-color">;
+/** The tokens of {@link SearchBar}'s expanded view: `--md-comp-search-view-<part>`. */
+export declare const searchViewTokenSet: ComponentTokenSet<"container-color" | "docked-container-shape">;
+//#endregion
+//# sourceMappingURL=search-tokens.d.ts.map

package/dist/components/search/search-tokens.js

@@ -0,0 +1,70 @@
+import { color, corner, defineComponentTokens } from "../../tokens/component.js";
+//#region src/components/search/search-tokens.ts
+/** The tokens of {@link SearchBar}'s field: `--md-comp-search-bar-<part>`. */
+const searchBarTokenSet = defineComponentTokens({
+	name: "md-comp-search-bar",
+	tokens: {
+		"container-color": {
+			value: color("surface-container-high"),
+			description: "The field.",
+			compose: "SearchBarTokens.ContainerColor",
+			paints: { property: "background-color" }
+		},
+		"container-shape": {
+			value: corner("full"),
+			description: "The corners.",
+			compose: "SearchBarTokens.ContainerShape",
+			paints: { property: "border-top-left-radius" }
+		},
+		"input-text-color": {
+			value: color("on-surface"),
+			description: "The query.",
+			compose: "SearchBarTokens.InputTextColor",
+			paints: {
+				property: "color",
+				slot: "input"
+			}
+		},
+		"leading-icon-color": {
+			value: color("on-surface"),
+			description: "The leading icon.",
+			compose: "SearchBarTokens.LeadingIconColor",
+			paints: {
+				property: "color",
+				slot: "leading"
+			}
+		},
+		"trailing-icon-color": {
+			value: color("on-surface-variant"),
+			description: "The trailing icons or avatar.",
+			compose: "SearchBarTokens.TrailingIconColor",
+			paints: {
+				property: "color",
+				slot: "trailing"
+			}
+		}
+	}
+});
+/** The tokens of {@link SearchBar}'s expanded view: `--md-comp-search-view-<part>`. */
+const searchViewTokenSet = defineComponentTokens({
+	name: "md-comp-search-view",
+	tokens: {
+		"container-color": {
+			value: color("surface-container-high"),
+			description: "The view: the docked dropdown (`surface-container-high`) or the full-screen surface (`surface-container-low`).",
+			compose: "SearchViewTokens.ContainerColor",
+			paints: { property: "background-color" }
+		},
+		"docked-container-shape": {
+			value: corner("medium"),
+			description: "The docked dropdown's corners.",
+			compose: "SearchViewTokens.DockedContainerShape",
+			paints: { property: "border-top-left-radius" }
+		}
+	},
+	states: { view: { "full-screen": { "container-color": color("surface-container-low") } } }
+});
+//#endregion
+export { searchBarTokenSet, searchViewTokenSet };
+
+//# sourceMappingURL=search-tokens.js.map

package/dist/components/search/search-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-tokens.js","names":[],"sources":["../../../src/components/search/search-tokens.ts"],"sourcesContent":["import { color, corner, defineComponentTokens } from '../../tokens/component';\n\n/*\n * The search bar's and search view's component tokens, M3's `md.comp.search-bar.*` and\n * `md.comp.search-view.*` names (checked against m3.material.io's token tables, 2026-10-14),\n * with the defaults of `search-styles.ts`.\n *\n * The bar's tokens are resolved on its pill (`data-tokens=\"md-comp-search-bar\"`), which the\n * expanded views and the searchable Select repeat. In a search app bar the pill takes the\n * app bar's colours (`surface-container`, `surface-container-highest` once content scrolls\n * under it), which stay classes. The view's tokens are resolved on the docked view's\n * dropdown and on the full-screen view (`data-view`), which differ in colour.\n */\n\n/** The tokens of {@link SearchBar}'s field: `--md-comp-search-bar-<part>`. */\nexport const searchBarTokenSet = defineComponentTokens({\n  name: 'md-comp-search-bar',\n  tokens: {\n    'container-color': {\n      value: color('surface-container-high'),\n      description: 'The field.',\n      compose: 'SearchBarTokens.ContainerColor',\n      paints: { property: 'background-color' },\n    },\n    'container-shape': {\n      value: corner('full'),\n      description: 'The corners.',\n      compose: 'SearchBarTokens.ContainerShape',\n      paints: { property: 'border-top-left-radius' },\n    },\n    'input-text-color': {\n      value: color('on-surface'),\n      description: 'The query.',\n      compose: 'SearchBarTokens.InputTextColor',\n      paints: { property: 'color', slot: 'input' },\n    },\n    'leading-icon-color': {\n      value: color('on-surface'),\n      description: 'The leading icon.',\n      compose: 'SearchBarTokens.LeadingIconColor',\n      paints: { property: 'color', slot: 'leading' },\n    },\n    'trailing-icon-color': {\n      value: color('on-surface-variant'),\n      description: 'The trailing icons or avatar.',\n      compose: 'SearchBarTokens.TrailingIconColor',\n      paints: { property: 'color', slot: 'trailing' },\n    },\n  },\n});\n\n/** The tokens of {@link SearchBar}'s expanded view: `--md-comp-search-view-<part>`. */\nexport const searchViewTokenSet = defineComponentTokens({\n  name: 'md-comp-search-view',\n  tokens: {\n    'container-color': {\n      value: color('surface-container-high'),\n      description:\n        'The view: the docked dropdown (`surface-container-high`) or the full-screen surface (`surface-container-low`).',\n      compose: 'SearchViewTokens.ContainerColor',\n      paints: { property: 'background-color' },\n    },\n    'docked-container-shape': {\n      value: corner('medium'),\n      description: \"The docked dropdown's corners.\",\n      compose: 'SearchViewTokens.DockedContainerShape',\n      paints: { property: 'border-top-left-radius' },\n    },\n  },\n  states: {\n    view: { 'full-screen': { 'container-color': color('surface-container-low') } },\n  },\n});\n"],"mappings":";;;AAeA,MAAa,oBAAoB,sBAAsB;CACrD,MAAM;CACN,QAAQ;EACN,mBAAmB;GACjB,OAAO,MAAM,wBAAwB;GACrC,aAAa;GACb,SAAS;GACT,QAAQ,EAAE,UAAU,mBAAmB;EACzC;EACA,mBAAmB;GACjB,OAAO,OAAO,MAAM;GACpB,aAAa;GACb,SAAS;GACT,QAAQ,EAAE,UAAU,yBAAyB;EAC/C;EACA,oBAAoB;GAClB,OAAO,MAAM,YAAY;GACzB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;GAAQ;EAC7C;EACA,sBAAsB;GACpB,OAAO,MAAM,YAAY;GACzB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;GAAU;EAC/C;EACA,uBAAuB;GACrB,OAAO,MAAM,oBAAoB;GACjC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;GAAW;EAChD;CACF;AACF,CAAC;;AAGD,MAAa,qBAAqB,sBAAsB;CACtD,MAAM;CACN,QAAQ;EACN,mBAAmB;GACjB,OAAO,MAAM,wBAAwB;GACrC,aACE;GACF,SAAS;GACT,QAAQ,EAAE,UAAU,mBAAmB;EACzC;EACA,0BAA0B;GACxB,OAAO,OAAO,QAAQ;GACtB,aAAa;GACb,SAAS;GACT,QAAQ,EAAE,UAAU,yBAAyB;EAC/C;CACF;CACA,QAAQ,EACN,MAAM,EAAE,eAAe,EAAE,mBAAmB,MAAM,uBAAuB,EAAE,EAAE,EAC/E;AACF,CAAC"}