@windmorph/react 0.2.1 → 0.2.3

package/dist/components/search/SearchField.d.ts

@@ -0,0 +1,111 @@
+import { Density } from "../../tokens/density.js";
+import { WrapperRootDOMProps } from "../../utils/root-props.js";
+import { SearchBarInputProps } from "./SearchBar.js";
+import { CSSProperties, ReactElement, ReactNode, Ref } from "react";
+//#region src/components/search/SearchField.d.ts
+export interface SearchFieldClassNames {
+  /** The outer container, merged with `className`. */
+  root?: string;
+  /** The pill around the icons and the input. */
+  field?: string;
+  /** The text input. */
+  input?: string;
+  /** The leading icon slot. */
+  leading?: string;
+  /** The trailing slot, holding the clear button and `trailingIcon`. */
+  trailing?: string;
+  /** The clear button. */
+  clear?: string;
+}
+export interface SearchFieldLabels {
+  /** The clear button's name, also its tooltip. @default "Clear search" */
+  clear: string;
+}
+/**
+ * Attributes for the input, e.g. `aria-keyshortcuts`, `enterKeyHint`, `autoComplete`,
+ * `spellCheck`, `inputMode` or event handlers: those of {@link SearchBarInputProps}, less
+ * `disabled` and `autoFocus`, which are the field's own props.
+ */
+export type SearchFieldInputProps = Omit<SearchBarInputProps, 'disabled' | 'autoFocus'>;
+type Naming = {
+  /** The search box's accessible name. Required unless `aria-labelledby` is set. */
+  'aria-label': string;
+} | {
+  /** The id of the element that names the search box. Required unless `aria-label` is set. */
+  'aria-labelledby': string;
+};
+interface SearchFieldOwnProps extends WrapperRootDOMProps {
+  /** The input's id. */
+  id?: string;
+  /** The ids of elements that describe the search, before any `inputProps['aria-describedby']`. */
+  'aria-describedby'?: string;
+  /** The id of an element with more details about the search. */
+  'aria-details'?: string;
+  /** The id of what the search filters, e.g. a list of results. */
+  'aria-controls'?: string;
+  /** Controlled query. */
+  value?: string;
+  /** Initial query when uncontrolled. @default "" */
+  defaultValue?: string;
+  /** Called with the query as it changes, by typing, Escape or the clear button. */
+  onChange?: (value: string) => void;
+  /** Called with the query when the user presses Enter (the keyboard's search action). */
+  onSubmit?: (value: string) => void;
+  /** Hint text shown in the empty input, e.g. "Search settings". */
+  placeholder?: string;
+  /** Leading icon, usually a search icon, or a back button. */
+  leadingIcon?: ReactNode;
+  /**
+   * Trailing content after the clear button: an icon button (e.g. voice search), or an avatar
+   * (an `img`, drawn at 30px), as in the search bar.
+   */
+  trailingIcon?: ReactNode;
+  /** Replaces the clear button's icon (Material Symbols `close`). */
+  clearIcon?: ReactElement;
+  /**
+   * Web density, `0` to `-3`: each step takes 4px off the pill (56px at 0, 44px at -3), as on the
+   * other fields; icon buttons in it keep their 48px touch targets. Left out, the field takes the
+   * density of the nearest `ThemeProvider` or `ThemeScope`. M3 asks for density to be the
+   * reader's choice rather than a default, so prefer setting it there, from a setting.
+   * @default 0
+   */
+  density?: Density;
+  /** Whether the field is disabled: it takes no input and shows no clear button. */
+  disabled?: boolean;
+  /** Focus the input when the field mounts. */
+  autoFocus?: boolean;
+  /** The input element. */
+  inputRef?: Ref<HTMLInputElement>;
+  /**
+   * Attributes for the input. They replace the field's defaults (`enterKeyHint="search"`,
+   * `autoComplete="off"`, `spellCheck={false}`); event handlers run before the field's own, and
+   * its role, name, value and type always win.
+   */
+  inputProps?: SearchFieldInputProps;
+  /** Words the field shows or announces, in place of the English defaults. */
+  labels?: Partial<SearchFieldLabels>;
+  /** Ref to the root `<div>` element. */
+  ref?: Ref<HTMLDivElement>;
+  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */
+  className?: string;
+  /** Inline styles for the root element. */
+  style?: CSSProperties;
+  /** Classes for each part, by slot. */
+  classNames?: SearchFieldClassNames;
+  /** `data-*` attributes, like the other DOM attributes, go to the root. */
+  [data: `data-${string}`]: string | number | boolean | undefined;
+}
+export type SearchFieldProps = SearchFieldOwnProps & Naming;
+/**
+ * A search box that filters content in place (a settings page, a table, a list pane), drawn as
+ * the M3 search bar's 56px pill and filling its container. It never opens a search view: use
+ * `SearchBar` for suggestions or results. Escape clears the query, Enter calls `onSubmit`, and a
+ * clear button shows while there is text.
+ *
+ * @example
+ * <SearchField aria-label="Search settings" placeholder="Search settings"
+ *   leadingIcon={<SearchIcon />} value={query} onChange={setQuery} />
+ */
+export declare function SearchField(props: SearchFieldProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=SearchField.d.ts.map

package/dist/components/search/SearchField.js

@@ -0,0 +1,128 @@
+"use client";
+import { densityAttribute } from "../../tokens/density.js";
+import { cn } from "../../utils/cn.js";
+import { ButtonContext, standardIconButtons } from "../button/ButtonContext.js";
+import { IconButton } from "../icon-button/IconButton.js";
+import { pickWidgetAria, splitRootProps } from "../../utils/root-props.js";
+import { searchBarStyles, searchFieldStyles } from "./search-styles.js";
+import { SearchFieldFrame } from "./search-field-frame.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps, useObjectRef, useSearchField } from "react-aria";
+import { useControlledState } from "react-stately/useControlledState";
+//#region src/components/search/SearchField.tsx
+/** Material Symbols `close`. */
+const ClearIcon = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 -960 960 960",
+	fill: "currentColor",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" })
+});
+const DEFAULT_LABELS = { clear: "Clear search" };
+/** Presses on these keep their own behaviour; a press anywhere else on the pill focuses the input. */
+const INTERACTIVE = "input, button, a, [role=\"button\"]";
+/**
+* A search box that filters content in place (a settings page, a table, a list pane), drawn as
+* the M3 search bar's 56px pill and filling its container. It never opens a search view: use
+* `SearchBar` for suggestions or results. Escape clears the query, Enter calls `onSubmit`, and a
+* clear button shows while there is text.
+*
+* @example
+* <SearchField aria-label="Search settings" placeholder="Search settings"
+*   leadingIcon={<SearchIcon />} value={query} onChange={setQuery} />
+*/
+function SearchField(props) {
+	const { value, defaultValue, onChange, onSubmit, placeholder, leadingIcon, trailingIcon, clearIcon, density, disabled = false, autoFocus, inputRef, inputProps: consumerInputProps, labels: labelsProp, ref, className, style, classNames, ...rest } = props;
+	const labels = {
+		...DEFAULT_LABELS,
+		...labelsProp
+	};
+	const [query, setQuery] = useControlledState(value, defaultValue ?? "", onChange);
+	const objectInputRef = useObjectRef(inputRef);
+	const { root: data, rest: own } = splitRootProps(rest, { wrapper: true });
+	const { id, "aria-label": label, "aria-labelledby": labelledBy, "aria-describedby": describedBy, "aria-details": details } = own;
+	const describedByInput = [describedBy, consumerInputProps?.["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+	const { inputProps } = useSearchField({
+		id,
+		"aria-label": label,
+		"aria-labelledby": label == null ? labelledBy : void 0,
+		"aria-describedby": describedByInput,
+		"aria-details": details,
+		placeholder,
+		isDisabled: disabled,
+		autoFocus
+	}, {
+		value: query,
+		setValue: setQuery
+	}, objectInputRef);
+	const submitOnEnter = (event) => {
+		if (!onSubmit || event.key !== "Enter" || event.nativeEvent.isComposing) return;
+		event.preventDefault();
+		onSubmit(query);
+	};
+	const clear = () => {
+		setQuery("");
+		objectInputRef.current?.focus({ preventScroll: true });
+	};
+	const focusInput = (event) => {
+		if (disabled || event.button !== 0) return;
+		if (event.target.closest(INTERACTIVE)) return;
+		event.preventDefault();
+		objectInputRef.current?.focus();
+	};
+	const showClear = query !== "" && !disabled;
+	const hasTrailing = showClear || trailingIcon != null;
+	const styles = searchBarStyles({
+		hasLeading: leadingIcon != null,
+		hasTrailing,
+		disabled
+	});
+	const rootStyles = searchFieldStyles();
+	return /* @__PURE__ */ jsx("div", {
+		...data,
+		ref,
+		style,
+		...densityAttribute(density),
+		"data-disabled": disabled || void 0,
+		className: rootStyles.root({ class: cn(classNames?.root, className) }),
+		children: /* @__PURE__ */ jsx(ButtonContext, {
+			value: standardIconButtons,
+			children: /* @__PURE__ */ jsx(SearchFieldFrame, {
+				disabled,
+				onPointerDown: focusInput,
+				className: classNames?.field,
+				leading: leadingIcon != null && /* @__PURE__ */ jsx("span", {
+					"data-slot": "leading",
+					className: styles.leading({ class: cn(rootStyles.slot(), classNames?.leading) }),
+					children: leadingIcon
+				}),
+				trailing: hasTrailing && /* @__PURE__ */ jsxs("span", {
+					"data-slot": "trailing",
+					className: styles.trailing({ class: cn(rootStyles.slot(), classNames?.trailing) }),
+					children: [showClear && /* @__PURE__ */ jsx(IconButton, {
+						"aria-label": labels.clear,
+						icon: clearIcon ?? /* @__PURE__ */ jsx(ClearIcon, {}),
+						"data-slot": "clear",
+						preventFocusOnPress: true,
+						onPress: clear,
+						className: classNames?.clear
+					}), trailingIcon]
+				}),
+				children: /* @__PURE__ */ jsx("input", {
+					...mergeProps({
+						enterKeyHint: "search",
+						autoComplete: "off",
+						spellCheck: false
+					}, consumerInputProps, inputProps, pickWidgetAria(own), { onKeyDown: submitOnEnter }),
+					ref: objectInputRef,
+					"data-slot": "input",
+					className: styles.input({ class: classNames?.input })
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { SearchField };
+
+//# sourceMappingURL=SearchField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchField.js","names":[],"sources":["../../../src/components/search/SearchField.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type CSSProperties,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { mergeProps, useObjectRef, useSearchField } from 'react-aria';\nimport { useControlledState } from 'react-stately/useControlledState';\nimport { densityAttribute, type Density } from '../../tokens/density';\nimport { cn } from '../../utils/cn';\nimport { pickWidgetAria, splitRootProps, type WrapperRootDOMProps } from '../../utils/root-props';\nimport { ButtonContext, standardIconButtons } from '../button/ButtonContext';\nimport { IconButton } from '../icon-button/IconButton';\nimport type { SearchBarInputProps } from './SearchBar';\nimport { SearchFieldFrame } from './search-field-frame';\nimport { searchBarStyles, searchFieldStyles } from './search-styles';\n\n/** Material Symbols `close`. */\nconst ClearIcon = () => (\n  <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\n  </svg>\n);\n\nexport interface SearchFieldClassNames {\n  /** The outer container, merged with `className`. */\n  root?: string;\n  /** The pill around the icons and the input. */\n  field?: string;\n  /** The text input. */\n  input?: string;\n  /** The leading icon slot. */\n  leading?: string;\n  /** The trailing slot, holding the clear button and `trailingIcon`. */\n  trailing?: string;\n  /** The clear button. */\n  clear?: string;\n}\n\nexport interface SearchFieldLabels {\n  /** The clear button's name, also its tooltip. @default \"Clear search\" */\n  clear: string;\n}\n\nconst DEFAULT_LABELS: SearchFieldLabels = { clear: 'Clear search' };\n\n/**\n * Attributes for the input, e.g. `aria-keyshortcuts`, `enterKeyHint`, `autoComplete`,\n * `spellCheck`, `inputMode` or event handlers: those of {@link SearchBarInputProps}, less\n * `disabled` and `autoFocus`, which are the field's own props.\n */\nexport type SearchFieldInputProps = Omit<SearchBarInputProps, 'disabled' | 'autoFocus'>;\n\ntype Naming =\n  | {\n      /** The search box's accessible name. Required unless `aria-labelledby` is set. */\n      'aria-label': string;\n    }\n  | {\n      /** The id of the element that names the search box. Required unless `aria-label` is set. */\n      'aria-labelledby': string;\n    };\n\ninterface SearchFieldOwnProps extends WrapperRootDOMProps {\n  /** The input's id. */\n  id?: string;\n  /** The ids of elements that describe the search, before any `inputProps['aria-describedby']`. */\n  'aria-describedby'?: string;\n  /** The id of an element with more details about the search. */\n  'aria-details'?: string;\n  /** The id of what the search filters, e.g. a list of results. */\n  'aria-controls'?: string;\n  /** Controlled query. */\n  value?: string;\n  /** Initial query when uncontrolled. @default \"\" */\n  defaultValue?: string;\n  /** Called with the query as it changes, by typing, Escape or the clear button. */\n  onChange?: (value: string) => void;\n  /** Called with the query when the user presses Enter (the keyboard's search action). */\n  onSubmit?: (value: string) => void;\n  /** Hint text shown in the empty input, e.g. \"Search settings\". */\n  placeholder?: string;\n  /** Leading icon, usually a search icon, or a back button. */\n  leadingIcon?: ReactNode;\n  /**\n   * Trailing content after the clear button: an icon button (e.g. voice search), or an avatar\n   * (an `img`, drawn at 30px), as in the search bar.\n   */\n  trailingIcon?: ReactNode;\n  /** Replaces the clear button's icon (Material Symbols `close`). */\n  clearIcon?: ReactElement;\n  /**\n   * Web density, `0` to `-3`: each step takes 4px off the pill (56px at 0, 44px at -3), as on the\n   * other fields; icon buttons in it keep their 48px touch targets. Left out, the field takes the\n   * density of the nearest `ThemeProvider` or `ThemeScope`. M3 asks for density to be the\n   * reader's choice rather than a default, so prefer setting it there, from a setting.\n   * @default 0\n   */\n  density?: Density;\n  /** Whether the field is disabled: it takes no input and shows no clear button. */\n  disabled?: boolean;\n  /** Focus the input when the field mounts. */\n  autoFocus?: boolean;\n  /** The input element. */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * Attributes for the input. They replace the field's defaults (`enterKeyHint=\"search\"`,\n   * `autoComplete=\"off\"`, `spellCheck={false}`); event handlers run before the field's own, and\n   * its role, name, value and type always win.\n   */\n  inputProps?: SearchFieldInputProps;\n  /** Words the field shows or announces, in place of the English defaults. */\n  labels?: Partial<SearchFieldLabels>;\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?: SearchFieldClassNames;\n  /** `data-*` attributes, like the other DOM attributes, go to the root. */\n  [data: `data-${string}`]: string | number | boolean | undefined;\n}\n\nexport type SearchFieldProps = SearchFieldOwnProps & Naming;\n\n/** Presses on these keep their own behaviour; a press anywhere else on the pill focuses the input. */\nconst INTERACTIVE = 'input, button, a, [role=\"button\"]';\n\n/**\n * A search box that filters content in place (a settings page, a table, a list pane), drawn as\n * the M3 search bar's 56px pill and filling its container. It never opens a search view: use\n * `SearchBar` for suggestions or results. Escape clears the query, Enter calls `onSubmit`, and a\n * clear button shows while there is text.\n *\n * @example\n * <SearchField aria-label=\"Search settings\" placeholder=\"Search settings\"\n *   leadingIcon={<SearchIcon />} value={query} onChange={setQuery} />\n */\nexport function SearchField(props: SearchFieldProps) {\n  const {\n    value,\n    defaultValue,\n    onChange,\n    onSubmit,\n    placeholder,\n    leadingIcon,\n    trailingIcon,\n    clearIcon,\n    density,\n    disabled = false,\n    autoFocus,\n    inputRef,\n    inputProps: consumerInputProps,\n    labels: labelsProp,\n    ref,\n    className,\n    style,\n    classNames,\n    ...rest\n  } = props;\n  const labels = { ...DEFAULT_LABELS, ...labelsProp };\n  const [query, setQuery] = useControlledState(value, defaultValue ?? '', onChange);\n  const objectInputRef = useObjectRef(inputRef);\n  const { root: data, rest: own } = splitRootProps(rest, { wrapper: true });\n  const {\n    id,\n    'aria-label': label,\n    'aria-labelledby': labelledBy,\n    'aria-describedby': describedBy,\n    'aria-details': details,\n  } = own as {\n    id?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    'aria-describedby'?: string;\n    'aria-details'?: string;\n  };\n  const describedByInput =\n    [describedBy, consumerInputProps?.['aria-describedby']].filter(Boolean).join(' ') || undefined;\n\n  const { inputProps } = useSearchField(\n    {\n      id,\n      'aria-label': label,\n      'aria-labelledby': label == null ? labelledBy : undefined,\n      'aria-describedby': describedByInput,\n      'aria-details': details,\n      placeholder,\n      isDisabled: disabled,\n      autoFocus,\n    },\n    { value: query, setValue: setQuery },\n    objectInputRef,\n  );\n\n  // Enter submits, but not while an input method is composing (it confirms the composition).\n  const submitOnEnter = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (!onSubmit || event.key !== 'Enter' || event.nativeEvent.isComposing) return;\n    event.preventDefault();\n    onSubmit(query);\n  };\n\n  const clear = () => {\n    setQuery('');\n    // The button goes with the text, so focus stays in the input.\n    objectInputRef.current?.focus({ preventScroll: true });\n  };\n\n  // A press on the pill around the input (its padding, a decorative icon) puts the caret in it.\n  const focusInput = (event: PointerEvent<HTMLDivElement>) => {\n    if (disabled || event.button !== 0) return;\n    if ((event.target as Element).closest(INTERACTIVE)) return;\n    event.preventDefault();\n    objectInputRef.current?.focus();\n  };\n\n  const showClear = query !== '' && !disabled;\n  const hasTrailing = showClear || trailingIcon != null;\n  const styles = searchBarStyles({\n    hasLeading: leadingIcon != null,\n    hasTrailing,\n    disabled,\n  });\n  const rootStyles = searchFieldStyles();\n\n  return (\n    <div\n      {...data}\n      ref={ref}\n      style={style}\n      {...densityAttribute(density)}\n      data-disabled={disabled || undefined}\n      className={rootStyles.root({ class: cn(classNames?.root, className) })}\n    >\n      {/* Icon buttons in a search bar are standard (M3), not the filled default. */}\n      <ButtonContext value={standardIconButtons}>\n        <SearchFieldFrame\n          disabled={disabled}\n          onPointerDown={focusInput}\n          className={classNames?.field}\n          leading={\n            leadingIcon != null && (\n              <span\n                data-slot=\"leading\"\n                className={styles.leading({ class: cn(rootStyles.slot(), classNames?.leading) })}\n              >\n                {leadingIcon}\n              </span>\n            )\n          }\n          trailing={\n            hasTrailing && (\n              <span\n                data-slot=\"trailing\"\n                className={styles.trailing({ class: cn(rootStyles.slot(), classNames?.trailing) })}\n              >\n                {showClear && (\n                  <IconButton\n                    aria-label={labels.clear}\n                    icon={clearIcon ?? <ClearIcon />}\n                    data-slot=\"clear\"\n                    // A pointer press keeps focus (and a phone's keyboard) in the input.\n                    preventFocusOnPress\n                    onPress={clear}\n                    className={classNames?.clear}\n                  />\n                )}\n                {trailingIcon}\n              </span>\n            )\n          }\n        >\n          <input\n            {...mergeProps(\n              { enterKeyHint: 'search', autoComplete: 'off', spellCheck: false },\n              consumerInputProps,\n              inputProps,\n              pickWidgetAria(own),\n              { onKeyDown: submitOnEnter },\n            )}\n            ref={objectInputRef}\n            data-slot=\"input\"\n            className={styles.input({ class: classNames?.input })}\n          />\n        </SearchFieldFrame>\n      </ButtonContext>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAsBA,MAAM,kBACJ,oBAAC,OAAD;CAAK,SAAQ;CAAiB,MAAK;CAAe,eAAY;CAC5D,UAAA,oBAAC,QAAD,EAAM,GAAE,oGAAqG,CAAA;AAC1G,CAAA;AAuBP,MAAM,iBAAoC,EAAE,OAAO,eAAe;;AAoFlE,MAAM,cAAc;;;;;;;;;;;AAYpB,SAAgB,YAAY,OAAyB;CACnD,MAAM,EACJ,OACA,cACA,UACA,UACA,aACA,aACA,cACA,WACA,SACA,WAAW,OACX,WACA,UACA,YAAY,oBACZ,QAAQ,YACR,KACA,WACA,OACA,YACA,GAAG,SACD;CACJ,MAAM,SAAS;EAAE,GAAG;EAAgB,GAAG;CAAW;CAClD,MAAM,CAAC,OAAO,YAAY,mBAAmB,OAAO,gBAAgB,IAAI,QAAQ;CAChF,MAAM,iBAAiB,aAAa,QAAQ;CAC5C,MAAM,EAAE,MAAM,MAAM,MAAM,QAAQ,eAAe,MAAM,EAAE,SAAS,KAAK,CAAC;CACxE,MAAM,EACJ,IACA,cAAc,OACd,mBAAmB,YACnB,oBAAoB,aACpB,gBAAgB,YACd;CAOJ,MAAM,mBACJ,CAAC,aAAa,qBAAqB,mBAAmB,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;CAEvF,MAAM,EAAE,eAAe,eACrB;EACE;EACA,cAAc;EACd,mBAAmB,SAAS,OAAO,aAAa,KAAA;EAChD,oBAAoB;EACpB,gBAAgB;EAChB;EACA,YAAY;EACZ;CACF,GACA;EAAE,OAAO;EAAO,UAAU;CAAS,GACnC,cACF;CAGA,MAAM,iBAAiB,UAA2C;EAChE,IAAI,CAAC,YAAY,MAAM,QAAQ,WAAW,MAAM,YAAY,aAAa;EACzE,MAAM,eAAe;EACrB,SAAS,KAAK;CAChB;CAEA,MAAM,cAAc;EAClB,SAAS,EAAE;EAEX,eAAe,SAAS,MAAM,EAAE,eAAe,KAAK,CAAC;CACvD;CAGA,MAAM,cAAc,UAAwC;EAC1D,IAAI,YAAY,MAAM,WAAW,GAAG;EACpC,IAAK,MAAM,OAAmB,QAAQ,WAAW,GAAG;EACpD,MAAM,eAAe;EACrB,eAAe,SAAS,MAAM;CAChC;CAEA,MAAM,YAAY,UAAU,MAAM,CAAC;CACnC,MAAM,cAAc,aAAa,gBAAgB;CACjD,MAAM,SAAS,gBAAgB;EAC7B,YAAY,eAAe;EAC3B;EACA;CACF,CAAC;CACD,MAAM,aAAa,kBAAkB;CAErC,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACE;EACP,GAAI,iBAAiB,OAAO;EAC5B,iBAAe,YAAY,KAAA;EAC3B,WAAW,WAAW,KAAK,EAAE,OAAO,GAAG,YAAY,MAAM,SAAS,EAAE,CAAC;EAGrE,UAAA,oBAAC,eAAD;GAAe,OAAO;GACpB,UAAA,oBAAC,kBAAD;IACY;IACV,eAAe;IACf,WAAW,YAAY;IACvB,SACE,eAAe,QACb,oBAAC,QAAD;KACE,aAAU;KACV,WAAW,OAAO,QAAQ,EAAE,OAAO,GAAG,WAAW,KAAK,GAAG,YAAY,OAAO,EAAE,CAAC;KAE9E,UAAA;IACG,CAAA;IAGV,UACE,eACE,qBAAC,QAAD;KACE,aAAU;KACV,WAAW,OAAO,SAAS,EAAE,OAAO,GAAG,WAAW,KAAK,GAAG,YAAY,QAAQ,EAAE,CAAC;KAFnF,UAAA,CAIG,aACC,oBAAC,YAAD;MACE,cAAY,OAAO;MACnB,MAAM,aAAa,oBAAC,WAAD,CAAY,CAAA;MAC/B,aAAU;MAEV,qBAAA;MACA,SAAS;MACT,WAAW,YAAY;KACxB,CAAA,GAEF,YACG;;IAIV,UAAA,oBAAC,SAAD;KACE,GAAI,WACF;MAAE,cAAc;MAAU,cAAc;MAAO,YAAY;KAAM,GACjE,oBACA,YACA,eAAe,GAAG,GAClB,EAAE,WAAW,cAAc,CAC7B;KACA,KAAK;KACL,aAAU;KACV,WAAW,OAAO,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IACrD,CAAA;GACe,CAAA;EACL,CAAA;CACZ,CAAA;AAET"}

package/dist/components/search/search-field-frame.js

@@ -0,0 +1,36 @@
+"use client";
+import { searchBarStyles } from "./search-styles.js";
+import { jsxs } from "react/jsx-runtime";
+import { mergeProps, useFocusRing } from "react-aria";
+//#region src/components/search/search-field-frame.tsx
+/**
+* The M3 search bar's pill: the `md-comp-search-bar` tokens and the inset focus ring while its
+* input has keyboard focus. `SearchBar` (collapsed and in its views), `SearchField` and a
+* searchable `Select` draw it, so they can't drift; the first two wrap it in standard icon
+* buttons (`standardIconButtons`), which `Select`'s search, with none, doesn't load. Not
+* exported from the package.
+*/
+function SearchFieldFrame({ tone = "default", disabled = false, className, leading, trailing, children, ...props }) {
+	const { isFocusVisible, focusProps } = useFocusRing({
+		within: true,
+		isTextInput: true
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...mergeProps(props, focusProps),
+		"data-tokens": "md-comp-search-bar",
+		"data-focus-visible": isFocusVisible || void 0,
+		className: searchBarStyles({
+			tone,
+			disabled
+		}).field({ class: className }),
+		children: [
+			leading,
+			children,
+			trailing
+		]
+	});
+}
+//#endregion
+export { SearchFieldFrame };
+
+//# sourceMappingURL=search-field-frame.js.map

package/dist/components/search/search-field-frame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-field-frame.js","names":[],"sources":["../../../src/components/search/search-field-frame.tsx"],"sourcesContent":["'use client';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { mergeProps, useFocusRing } from 'react-aria';\nimport { searchBarStyles } from './search-styles';\n\n/** What the pill draws around its input. Internal: the search bar, `SearchField` and `Select`. */\ninterface SearchFieldFrameProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** The container colour: the search bar's own, or a search app bar's. @default \"default\" */\n  tone?: 'default' | 'appBar' | 'scrolled';\n  /** M3's disabled colours. */\n  disabled?: boolean;\n  /** The leading slot, already wrapped in its `data-slot=\"leading\"` element. */\n  leading?: ReactNode;\n  /** The trailing slot, already wrapped in its `data-slot=\"trailing\"` element. */\n  trailing?: ReactNode;\n  /** The input. */\n  children: ReactNode;\n}\n\n/**\n * The M3 search bar's pill: the `md-comp-search-bar` tokens and the inset focus ring while its\n * input has keyboard focus. `SearchBar` (collapsed and in its views), `SearchField` and a\n * searchable `Select` draw it, so they can't drift; the first two wrap it in standard icon\n * buttons (`standardIconButtons`), which `Select`'s search, with none, doesn't load. Not\n * exported from the package.\n */\nexport function SearchFieldFrame({\n  tone = 'default',\n  disabled = false,\n  className,\n  leading,\n  trailing,\n  children,\n  ...props\n}: SearchFieldFrameProps) {\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      {...mergeProps(props, focusProps)}\n      data-tokens=\"md-comp-search-bar\"\n      data-focus-visible={isFocusVisible || undefined}\n      className={searchBarStyles({ tone, disabled }).field({ class: className })}\n    >\n      {leading}\n      {children}\n      {trailing}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AA2BA,SAAgB,iBAAiB,EAC/B,OAAO,WACP,WAAW,OACX,WACA,SACA,UACA,UACA,GAAG,SACqB;CAExB,MAAM,EAAE,gBAAgB,eAAe,aAAa;EAAE,QAAQ;EAAM,aAAa;CAAK,CAAC;CACvF,OACE,qBAAC,OAAD;EACE,GAAI,WAAW,OAAO,UAAU;EAChC,eAAY;EACZ,sBAAoB,kBAAkB,KAAA;EACtC,WAAW,gBAAgB;GAAE;GAAM;EAAS,CAAC,CAAC,CAAC,MAAM,EAAE,OAAO,UAAU,CAAC;EAJ3E,UAAA;GAMG;GACA;GACA;EACE;;AAET"}

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

@@ -50,6 +50,19 @@ export declare const searchBarStyles: import("tailwind-variants").TVReturnType<{
       input: string;
     };
   };
+  /**
+   * A disabled `SearchField`: M3's disabled colours, the content `on-surface` at 38% and the
+   * container at 12%; forced colours draw it in `GrayText`.
+   */
+  disabled: {
+    true: {
+      field: string;
+      leading: string;
+      trailing: string;
+      input: string;
+    };
+    false: {};
+  };
 }, {
   root: string;
   field: string[];
@@ -113,6 +126,19 @@ export declare const searchBarStyles: import("tailwind-variants").TVReturnType<{
       input: string;
     };
   };
+  /**
+   * A disabled `SearchField`: M3's disabled colours, the content `on-surface` at 38% and the
+   * container at 12%; forced colours draw it in `GrayText`.
+   */
+  disabled: {
+    true: {
+      field: string;
+      leading: string;
+      trailing: string;
+      input: string;
+    };
+    false: {};
+  };
 }, {
   root: string;
   field: string[];
@@ -176,6 +202,19 @@ export declare const searchBarStyles: import("tailwind-variants").TVReturnType<{
       input: string;
     };
   };
+  /**
+   * A disabled `SearchField`: M3's disabled colours, the content `on-surface` at 38% and the
+   * container at 12%; forced colours draw it in `GrayText`.
+   */
+  disabled: {
+    true: {
+      field: string;
+      leading: string;
+      trailing: string;
+      input: string;
+    };
+    false: {};
+  };
 }, {
   root: string;
   field: string[];
@@ -191,6 +230,20 @@ export declare const searchBarStyles: import("tailwind-variants").TVReturnType<{
   fullScreenHeader: string[];
   fullScreenContent: string[];
 }>>;
+/**
+ * Variant definitions for {@link SearchField}'s root. Its pill and the parts in it are the search
+ * bar's ({@link searchBarStyles}), so the two can't drift.
+ */
+export declare const searchFieldStyles: import("tailwind-variants").TVReturnType<{}, {
+  root: string;
+  slot: string;
+}, undefined, {}, {
+  root: string;
+  slot: string;
+}, import("tailwind-variants").TVReturnTypeLike<{}, {
+  root: string;
+  slot: string;
+}>>;
 /** Variant definitions for {@link SearchAppBar}. */
 export declare const searchAppBarStyles: import("tailwind-variants").TVReturnType<{
   scrolling: {
@@ -239,5 +292,10 @@ export type SearchBarStyleProps = VariantProps<typeof searchBarStyles>;
  * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.
  */
 export type SearchAppBarStyleProps = VariantProps<typeof searchAppBarStyles>;
+/**
+ * The variants of {@link searchFieldStyles}, for building on its styles. They are the recipe's keys, not
+ * component props: their names follow the classes and may change.
+ */
+export type SearchFieldStyleProps = VariantProps<typeof searchFieldStyles>;
 //#endregion
 //# sourceMappingURL=search-styles.d.ts.map

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

@@ -9,8 +9,8 @@ const searchBarStyles = tv({
 		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",
+			"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 text-ellipsis",
+			"placeholder:text-on-surface-variant placeholder:text-ellipsis",
 			"[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none"
 		],
 		scrim: [
@@ -107,6 +107,19 @@ const searchBarStyles = tv({
 		textAlign: {
 			start: {},
 			center: { input: "text-center" }
+		},
+		/**
+		* A disabled `SearchField`: M3's disabled colours, the content `on-surface` at 38% and the
+		* container at 12%; forced colours draw it in `GrayText`.
+		*/
+		disabled: {
+			true: {
+				field: "bg-on-surface/12 forced-colors:border-[GrayText]",
+				leading: "text-on-surface/38 forced-colors:text-[GrayText]",
+				trailing: "text-on-surface/38 forced-colors:text-[GrayText]",
+				input: "cursor-default text-on-surface/38 placeholder:text-on-surface/38 forced-colors:text-[GrayText]"
+			},
+			false: {}
 		}
 	},
 	defaultVariants: {
@@ -114,9 +127,21 @@ const searchBarStyles = tv({
 		hasLeading: false,
 		hasTrailing: false,
 		tone: "default",
-		textAlign: "start"
+		textAlign: "start",
+		disabled: false
 	}
 });
+/**
+* Variant definitions for {@link SearchField}'s root. Its pill and the parts in it are the search
+* bar's ({@link searchBarStyles}), so the two can't drift.
+*/
+const searchFieldStyles = tv({
+	slots: {
+		root: "flex h-[calc(56px+var(--md-sys-density,0)*4px)] w-full min-w-0",
+		slot: "max-h-full"
+	},
+	variants: {}
+});
 /** Variant definitions for {@link SearchAppBar}. */
 const searchAppBarStyles = tv({
 	slots: {
@@ -138,6 +163,6 @@ const searchAppBarStyles = tv({
 	defaultVariants: { scrolling: false }
 });
 //#endregion
-export { searchAppBarStyles, searchBarStyles };
+export { searchAppBarStyles, searchBarStyles, searchFieldStyles };
 
 //# sourceMappingURL=search-styles.js.map

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

@@ -1 +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"}
+{"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    // A hint or query longer than the field ends in an ellipsis, not mid-letter (as a text\n    // field's label); the query only while the field isn't focused, since focused it scrolls.\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 text-ellipsis',\n      'placeholder:text-on-surface-variant placeholder:text-ellipsis',\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     * A disabled `SearchField`: M3's disabled colours, the content `on-surface` at 38% and the\n     * container at 12%; forced colours draw it in `GrayText`.\n     */\n    disabled: {\n      true: {\n        field: 'bg-on-surface/12 forced-colors:border-[GrayText]',\n        leading: 'text-on-surface/38 forced-colors:text-[GrayText]',\n        trailing: 'text-on-surface/38 forced-colors:text-[GrayText]',\n        input:\n          'cursor-default text-on-surface/38 placeholder:text-on-surface/38 forced-colors:text-[GrayText]',\n      },\n      false: {},\n    },\n  },\n  defaultVariants: {\n    inAppBar: false,\n    hasLeading: false,\n    hasTrailing: false,\n    tone: 'default',\n    textAlign: 'start',\n    disabled: false,\n  },\n});\n\n/**\n * Variant definitions for {@link SearchField}'s root. Its pill and the parts in it are the search\n * bar's ({@link searchBarStyles}), so the two can't drift.\n */\nexport const searchFieldStyles = tv({\n  slots: {\n    // 56px, the search bar's height, less 4px a density step (44px at -3), filling its\n    // container: it filters a page, a list or a pane in place. A consumer `w-*` or `h-*` wins.\n    root: 'flex h-[calc(56px+var(--md-sys-density,0)*4px)] w-full min-w-0',\n    // The 48px icon slots keep to a dense pill's height; their buttons keep 48px targets.\n    slot: 'max-h-full',\n  },\n  variants: {},\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/**\n * The variants of {@link searchFieldStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names follow the classes and may change.\n */\nexport type SearchFieldStyleProps = VariantProps<typeof searchFieldStyles>;\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;EAGA,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;;;;;EAKzD,UAAU;GACR,MAAM;IACJ,OAAO;IACP,SAAS;IACT,UAAU;IACV,OACE;GACJ;GACA,OAAO,CAAC;EACV;CACF;CACA,iBAAiB;EACf,UAAU;EACV,YAAY;EACZ,aAAa;EACb,MAAM;EACN,WAAW;EACX,UAAU;CACZ;AACF,CAAC;;;;;AAMD,MAAa,oBAAoB,GAAG;CAClC,OAAO;EAGL,MAAM;EAEN,MAAM;CACR;CACA,UAAU,CAAC;AACb,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/select/search-list.js

@@ -4,9 +4,10 @@ import { FOCUSABLE_DISABLED_OPTIONS } from "../../utils/focusable-disabled.js";
 import { menuStyles } from "../menu/menu-styles.js";
 import { OptionList } from "./option-list.js";
 import { searchBarStyles } from "../search/search-styles.js";
+import { SearchFieldFrame } from "../search/search-field-frame.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useAutocomplete, useFocusRing, useSearchField } from "react-aria";
+import { useAutocomplete, useSearchField } from "react-aria";
 import { useListState } from "react-stately";
 //#region src/components/select/search-list.tsx
 /** Material Symbols `search`. */
@@ -71,10 +72,6 @@ function SearchList({ listProps, search, onSearchChange, filter, autoFocusSearch
 		value: search,
 		setValue: onSearchChange
 	}, inputRef);
-	const { focusProps, isFocusVisible } = useFocusRing({
-		within: true,
-		isTextInput: true
-	});
 	useEffect(() => {
 		if (autoFocusSearch) inputRef.current?.focus();
 	}, [autoFocusSearch]);
@@ -90,26 +87,24 @@ function SearchList({ listProps, search, onSearchChange, filter, autoFocusSearch
 		className: cn("flex min-h-0 flex-col", embedded ? "flex-1" : [menu.group(), "max-h-[inherit] overflow-hidden"]),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: cn("flex h-[calc(52px+var(--md-sys-density,0)*4px)] shrink-0 pb-[4px]", embedded && "sticky top-0 z-[1] bg-[var(--_md-comp-sheet-bottom-docked-container-color)]"),
-			children: /* @__PURE__ */ jsxs("div", {
-				...focusProps,
-				"data-tokens": "md-comp-search-bar",
-				"data-focus-visible": isFocusVisible || void 0,
+			children: /* @__PURE__ */ jsx(SearchFieldFrame, {
 				onPointerDown: (event) => {
 					if (event.target !== event.currentTarget) return;
 					event.preventDefault();
 					inputRef.current?.focus();
 				},
-				className: field.field({ class: cn(denseSearchTarget, classNames?.search) }),
-				children: [/* @__PURE__ */ jsx("span", {
+				className: cn(denseSearchTarget, classNames?.search),
+				leading: /* @__PURE__ */ jsx("span", {
 					"data-slot": "leading",
 					className: field.leading({ class: "h-full" }),
 					children: /* @__PURE__ */ jsx(SearchIcon, {})
-				}), /* @__PURE__ */ jsx("input", {
+				}),
+				children: /* @__PURE__ */ jsx("input", {
 					...inputProps,
 					ref: inputRef,
 					"data-slot": "input",
 					className: field.input()
-				})]
+				})
 			})
 		}), /* @__PURE__ */ jsx(OptionList, {
 			embedded: true,