@windmorph/react 0.0.0-stage → 0.1.1

package/dist/components/app-bar/use-app-bar-scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-app-bar-scroll.js","names":[],"sources":["../../../src/components/app-bar/use-app-bar-scroll.ts"],"sourcesContent":["'use client';\n\nimport { cubicBezier, useReducedMotion } from 'motion/react';\nimport { useEffect, useState, type RefObject } from 'react';\nimport { hasVisibleFocusWithin } from '../../utils/focus-visible';\n\n/** How a top app bar responds to the content scrolling under it (Compose's scroll behaviours). */\nexport type TopAppBarScrollBehavior = 'pinned' | 'enter-always' | 'exit-until-collapsed';\n\n/** Compose's `TopTitleAlphaEasing` for the collapsed title of a two-row bar. */\nconst topTitleAlpha = cubicBezier(0.8, 0, 0.8, 0.15);\n/** Compose's `FastOutLinearInEasing`, used to blend the container colour. */\nconst fastOutLinearIn = cubicBezier(0.4, 0, 1, 1);\n\ninterface AppBarScrollOptions {\n  behavior: TopAppBarScrollBehavior | undefined;\n  rootRef: RefObject<HTMLElement | null>;\n  /** The part of the bar that collapses: the expanded row, or the whole single-row bar. */\n  collapsibleRef: RefObject<HTMLElement | null>;\n  scrollRef?: RefObject<HTMLElement | null>;\n  twoRows: boolean;\n}\n\nexport interface AppBarScrollState {\n  /** Content is scrolled under the bar. */\n  scrolled: boolean;\n  /** A two-row bar is more than half collapsed (its collapsed title is the one announced). */\n  collapsed: boolean;\n}\n\n/**\n * Ports Compose's top app bar scroll behaviours to page scrolling. The bar's offset\n * (Compose's `heightOffset`, 0 down to minus the collapsible height) is written to\n * `--m3-app-bar-offset`, which the sticky bar uses as its `top`, so the bar moves without\n * changing its layout height and the content below never shifts. Colour and title alphas\n * are written as custom properties too, so scrolling causes no React renders.\n *\n * - `pinned`: the bar stays; only its colour responds, switching once content is under it\n *   (a two-row bar too, keeping its expanded title).\n * - `enter-always`: scrolling down hides the bar, any scroll up brings it back. A two-row\n *   bar first collapses to its top row, which then hides and comes back on scroll up, but\n *   stays small until the page is back at the top (M3).\n * - `exit-until-collapsed`: scrolling down collapses it; it expands only near the top.\n *\n * Under reduced motion an `enter-always` bar never leaves the screen, like a navigation bar\n * that hides on scroll (architecture §6): a single-row bar stays put and a two-row bar only\n * collapses with the scroll, as `exit-until-collapsed` does.\n *\n * A bar scrolled fully off screen is `inert`, so Tab skips its hidden controls and screen\n * readers leave them out; it's restored as the bar comes back. While keyboard focus is in\n * the bar it stays on screen (M3: people should \"maintain access to app bar actions when\n * the content is scrolled\"; WCAG 2.4.11 Focus Not Obscured), and focusing a partly hidden\n * bar brings it back.\n */\nexport function useAppBarScroll({\n  behavior: requested,\n  rootRef,\n  collapsibleRef,\n  scrollRef,\n  twoRows,\n}: AppBarScrollOptions): AppBarScrollState {\n  const [state, setState] = useState<AppBarScrollState>({ scrolled: false, collapsed: false });\n  const reducedMotion = useReducedMotion() ?? false;\n  const behavior: TopAppBarScrollBehavior | undefined =\n    requested === 'enter-always' && reducedMotion\n      ? twoRows\n        ? 'exit-until-collapsed'\n        : 'pinned'\n      : requested;\n\n  useEffect(() => {\n    const root = rootRef.current;\n    if (!behavior || !root) return;\n    const scroller = scrollRef?.current;\n    const target: HTMLElement | Window = scroller ?? window;\n    const position = () => Math.max(0, scroller ? scroller.scrollTop : window.scrollY);\n\n    let last = position();\n    let offset = 0;\n    /** A two-row `enter-always` bar's top-row offset: 0 (shown) to minus its height. */\n    let hide = 0;\n    let frame = 0;\n    let current: AppBarScrollState = { scrolled: false, collapsed: false };\n    let hidden = false;\n\n    const update = () => {\n      frame = 0;\n      const scroll = position();\n      const previous = last;\n      last = scroll;\n      // The collapsible height, measured each time so wrapped titles and resizes count.\n      const limit = collapsibleRef.current?.offsetHeight ?? 0;\n      const focused = hasVisibleFocusWithin(root);\n      let collapse = 0;\n      if (behavior === 'pinned') {\n        offset = 0;\n      } else if (twoRows) {\n        // The expanded row collapses with the scroll and expands only near the top.\n        collapse = -Math.min(scroll, limit);\n        if (behavior === 'enter-always') {\n          // Past that, the top row follows each scroll delta: hidden going down, back going up.\n          const rowHeight = root.offsetHeight - limit;\n          const beyond = Math.max(scroll, limit) - Math.max(previous, limit);\n          hide = focused ? 0 : Math.min(0, Math.max(-rowHeight, hide - beyond));\n        }\n        offset = collapse + hide;\n      } else if (behavior === 'enter-always') {\n        offset = focused ? 0 : Math.min(0, Math.max(-limit, offset - (scroll - previous)));\n      } else {\n        // A single-row bar collapses away entirely; a two-row bar keeps its top row.\n        offset = focused && !twoRows ? 0 : -Math.min(scroll, limit);\n      }\n      const fraction = limit > 0 ? -(twoRows ? collapse : offset) / limit : 0;\n\n      root.style.setProperty('--m3-app-bar-offset', `${offset}px`);\n      // How far the expanded row has slid up under the top row: it's clipped there, as\n      // Compose clips the expanded title to the shrinking bar, so it never shows through a\n      // see-through top row (`scrolledColor=\"transparent\"`).\n      if (twoRows) root.style.setProperty('--m3-app-bar-collapse', `${-collapse}px`);\n      const height = root.offsetHeight;\n      const offScreen = height > 0 && -offset >= height - 0.5;\n      if (offScreen !== hidden) {\n        hidden = offScreen;\n        root.toggleAttribute('inert', offScreen);\n      }\n      // A pinned bar never collapses, so a two-row one fills like a single row (M3: app bars\n      // \"fill with a contrasting color on scroll\").\n      if (twoRows && behavior !== 'pinned') {\n        root.style.setProperty('--m3-app-bar-scrolled', `${fastOutLinearIn(fraction) * 100}%`);\n        root.style.setProperty('--m3-app-bar-top-alpha', String(topTitleAlpha(fraction)));\n        root.style.setProperty('--m3-app-bar-bottom-alpha', String(1 - fraction));\n      } else {\n        root.style.setProperty('--m3-app-bar-scrolled', scroll > 0 ? '100%' : '0%');\n        if (twoRows) {\n          root.style.setProperty('--m3-app-bar-top-alpha', '0');\n          root.style.setProperty('--m3-app-bar-bottom-alpha', '1');\n        }\n      }\n      const next = { scrolled: scroll > 0, collapsed: twoRows && fraction >= 0.5 };\n      if (next.scrolled !== current.scrolled || next.collapsed !== current.collapsed) {\n        current = next;\n        setState(next);\n      }\n    };\n    const onScroll = () => {\n      if (!frame) frame = requestAnimationFrame(update);\n    };\n\n    update();\n    target.addEventListener('scroll', onScroll, { passive: true });\n    // Keyboard focus landing in a partly hidden bar brings it back.\n    root.addEventListener('focusin', onScroll);\n    return () => {\n      target.removeEventListener('scroll', onScroll);\n      root.removeEventListener('focusin', onScroll);\n      cancelAnimationFrame(frame);\n      if (hidden) root.removeAttribute('inert');\n      for (const name of [\n        '--m3-app-bar-offset',\n        '--m3-app-bar-collapse',\n        '--m3-app-bar-scrolled',\n        '--m3-app-bar-top-alpha',\n        '--m3-app-bar-bottom-alpha',\n      ])\n        root.style.removeProperty(name);\n    };\n  }, [behavior, rootRef, collapsibleRef, scrollRef, twoRows]);\n\n  return behavior ? state : { scrolled: false, collapsed: false };\n}\n"],"mappings":";;;;;;AAUA,MAAM,gBAAgB,YAAY,IAAK,GAAG,IAAK,GAAI;;AAEnD,MAAM,kBAAkB,YAAY,IAAK,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;AA0ChD,SAAgB,gBAAgB,EAC9B,UAAU,WACV,SACA,gBACA,WACA,WACyC;CACzC,MAAM,CAAC,OAAO,YAAY,SAA4B;EAAE,UAAU;EAAO,WAAW;CAAM,CAAC;CAC3F,MAAM,gBAAgB,iBAAiB,KAAK;CAC5C,MAAM,WACJ,cAAc,kBAAkB,gBAC5B,UACE,yBACA,WACF;CAEN,gBAAgB;EACd,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,YAAY,CAAC,MAAM;EACxB,MAAM,WAAW,WAAW;EAC5B,MAAM,SAA+B,YAAY;EACjD,MAAM,iBAAiB,KAAK,IAAI,GAAG,WAAW,SAAS,YAAY,OAAO,OAAO;EAEjF,IAAI,OAAO,SAAS;EACpB,IAAI,SAAS;;EAEb,IAAI,OAAO;EACX,IAAI,QAAQ;EACZ,IAAI,UAA6B;GAAE,UAAU;GAAO,WAAW;EAAM;EACrE,IAAI,SAAS;EAEb,MAAM,eAAe;GACnB,QAAQ;GACR,MAAM,SAAS,SAAS;GACxB,MAAM,WAAW;GACjB,OAAO;GAEP,MAAM,QAAQ,eAAe,SAAS,gBAAgB;GACtD,MAAM,UAAU,sBAAsB,IAAI;GAC1C,IAAI,WAAW;GACf,IAAI,aAAa,UACf,SAAS;QACJ,IAAI,SAAS;IAElB,WAAW,CAAC,KAAK,IAAI,QAAQ,KAAK;IAClC,IAAI,aAAa,gBAAgB;KAE/B,MAAM,YAAY,KAAK,eAAe;KACtC,MAAM,SAAS,KAAK,IAAI,QAAQ,KAAK,IAAI,KAAK,IAAI,UAAU,KAAK;KACjE,OAAO,UAAU,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,CAAC,WAAW,OAAO,MAAM,CAAC;IACtE;IACA,SAAS,WAAW;GACtB,OAAO,IAAI,aAAa,gBACtB,SAAS,UAAU,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,CAAC,OAAO,UAAU,SAAS,SAAS,CAAC;QAGjF,SAAS,WAAW,CAAC,UAAU,IAAI,CAAC,KAAK,IAAI,QAAQ,KAAK;GAE5D,MAAM,WAAW,QAAQ,IAAI,EAAE,UAAU,WAAW,UAAU,QAAQ;GAEtE,KAAK,MAAM,YAAY,uBAAuB,GAAG,OAAO,GAAG;GAI3D,IAAI,SAAS,KAAK,MAAM,YAAY,yBAAyB,GAAG,CAAC,SAAS,GAAG;GAC7E,MAAM,SAAS,KAAK;GACpB,MAAM,YAAY,SAAS,KAAK,CAAC,UAAU,SAAS;GACpD,IAAI,cAAc,QAAQ;IACxB,SAAS;IACT,KAAK,gBAAgB,SAAS,SAAS;GACzC;GAGA,IAAI,WAAW,aAAa,UAAU;IACpC,KAAK,MAAM,YAAY,yBAAyB,GAAG,gBAAgB,QAAQ,IAAI,IAAI,EAAE;IACrF,KAAK,MAAM,YAAY,0BAA0B,OAAO,cAAc,QAAQ,CAAC,CAAC;IAChF,KAAK,MAAM,YAAY,6BAA6B,OAAO,IAAI,QAAQ,CAAC;GAC1E,OAAO;IACL,KAAK,MAAM,YAAY,yBAAyB,SAAS,IAAI,SAAS,IAAI;IAC1E,IAAI,SAAS;KACX,KAAK,MAAM,YAAY,0BAA0B,GAAG;KACpD,KAAK,MAAM,YAAY,6BAA6B,GAAG;IACzD;GACF;GACA,MAAM,OAAO;IAAE,UAAU,SAAS;IAAG,WAAW,WAAW,YAAY;GAAI;GAC3E,IAAI,KAAK,aAAa,QAAQ,YAAY,KAAK,cAAc,QAAQ,WAAW;IAC9E,UAAU;IACV,SAAS,IAAI;GACf;EACF;EACA,MAAM,iBAAiB;GACrB,IAAI,CAAC,OAAO,QAAQ,sBAAsB,MAAM;EAClD;EAEA,OAAO;EACP,OAAO,iBAAiB,UAAU,UAAU,EAAE,SAAS,KAAK,CAAC;EAE7D,KAAK,iBAAiB,WAAW,QAAQ;EACzC,aAAa;GACX,OAAO,oBAAoB,UAAU,QAAQ;GAC7C,KAAK,oBAAoB,WAAW,QAAQ;GAC5C,qBAAqB,KAAK;GAC1B,IAAI,QAAQ,KAAK,gBAAgB,OAAO;GACxC,KAAK,MAAM,QAAQ;IACjB;IACA;IACA;IACA;IACA;GACF,GACE,KAAK,MAAM,eAAe,IAAI;EAClC;CACF,GAAG;EAAC;EAAU;EAAS;EAAgB;EAAW;CAAO,CAAC;CAE1D,OAAO,WAAW,QAAQ;EAAE,UAAU;EAAO,WAAW;CAAM;AAChE"}

package/dist/components/autocomplete/Autocomplete.d.ts

@@ -0,0 +1,142 @@
+import { Density } from "../../tokens/density.js";
+import { WrapperRootDOMProps } from "../../utils/root-props.js";
+import { TextFieldVariant } from "../text-field/text-field-styles.js";
+import { FieldShellClassNames } from "../select/field-shell.js";
+import { OptionListClassNames } from "../select/option-list.js";
+import { AriaAttributes, CSSProperties, ReactNode, Ref } from "react";
+import { AriaComboBoxOptions } from "react-aria";
+import { Key as AutocompleteKey } from "react-stately";
+import { ComboBoxProps, SelectionMode } from "react-stately/useComboBoxState";
+//#region src/components/autocomplete/Autocomplete.d.ts
+/** Words the Autocomplete shows or announces; override them for other languages. */
+export interface AutocompleteLabels {
+  /** Shown when no option matches what was typed. @default "No results" */
+  noResults: string;
+  /** The loading indicator's name. @default "Loading options" */
+  loading: string;
+  /** The arrow button's name. @default "Show options" */
+  showOptions: string;
+  /** A chip's remove button; the chip's text follows it ("Remove London"). @default "Remove" */
+  remove: string;
+  /** With `clearable`: the clear button's name. @default "Clear" */
+  clear: string;
+  /** The error icon's name (M3: "Error"). @default "Error" */
+  error: string;
+}
+export interface AutocompleteClassNames extends FieldShellClassNames, OptionListClassNames {
+  /** The text `<input>`. */
+  input?: string;
+  /** With `selectionMode="multiple"`: each chosen option's input chip. */
+  chip?: string;
+  /** With `clearable`: the clear button. */
+  clear?: string;
+}
+/** React Aria props this API names the library's way (`disabled`, `readOnly`…), or leaves out. */
+type RenamedProps = 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'label' | 'description' | 'validationState' | 'allowsCustomValue' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange';
+export type AutocompleteProps<T extends object, M extends SelectionMode = 'single'> = Omit<ComboBoxProps<T, M>, RenamedProps> & Pick<AriaComboBoxOptions<T, M>, 'id' | 'name' | 'form'> & Omit<WrapperRootDOMProps, keyof ComboBoxProps<T, M>> & {
+  /** The `<input>`'s id, for a `<label for>` or an error summary's link. */
+  id?: string;
+  /** The container style, as `TextField`'s: a filled surface or an outline. @default "filled" */
+  variant?: TextFieldVariant;
+  /**
+   * Free text: whatever is typed stays as the field's text when no option matches, instead
+   * of returning to the chosen option's. @default false
+   */
+  allowCustomValue?: boolean;
+  /**
+   * Web density, `0` to `-3`: each step takes 4px off the field (56px at 0, 44px at -3) and
+   * off its menu's options (44px at 0, 32px at -3). Left out, it 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;
+  /** The field's label. Give `aria-label` instead when there's no visible label. */
+  label?: ReactNode;
+  /** Accessible name when there's no visible label. */
+  'aria-label'?: string;
+  /** Shown in the empty input. With a `label`, it appears once the label floats (on focus). */
+  placeholder?: string;
+  /**
+   * Helper text below the field. Replaced visually by the error when invalid, and shown in
+   * the error colour while the field is invalid.
+   */
+  supportingText?: ReactNode;
+  /** Marks the field invalid (in addition to `validate` and `required`). */
+  invalid?: boolean;
+  /** A value is required: adds the `*` to the label and validates on submit. */
+  required?: boolean;
+  /** Disables the field: it can't be focused or edited. @default false */
+  disabled?: boolean;
+  /** The value can be read and copied but not changed; the menu doesn't open. @default false */
+  readOnly?: boolean;
+  /**
+   * Read as `invalid` when that's left out, for a form library that sets the attribute, so
+   * the field shows its error state as well as announcing it.
+   */
+  'aria-invalid'?: AriaAttributes['aria-invalid'];
+  /** Read as `required` when that's left out, for a form library that sets the attribute. */
+  'aria-required'?: AriaAttributes['aria-required'];
+  /** Read as `readOnly` when that's left out, for a form library that sets the attribute. */
+  'aria-readonly'?: AriaAttributes['aria-readonly'];
+  /** Decorative icon at the start, in a 48px box. */
+  leadingIcon?: ReactNode;
+  /**
+   * The icon shown before the arrow while the field is invalid (M3 strongly recommends one).
+   * Defaults to Material Symbols `error`, named by `labels.error`; `false` turns it off.
+   */
+  errorIcon?: ReactNode | false;
+  /**
+   * A clear button (M3's clear icon) that appears while there's typed text and empties it,
+   * and a single choice with it. It's skipped by Tab, since the text can be deleted from
+   * the keyboard.
+   * @default false
+   */
+  clearable?: boolean;
+  /**
+   * With `selectionMode="multiple"`, the most options that can be chosen; the rest show as
+   * disabled until one is removed.
+   */
+  maxSelections?: number;
+  /**
+   * Shows a loading indicator in the list, e.g. while options load for what was typed.
+   * The indicator's code loads when it first shows, and ahead of that when the field is
+   * hovered or focused while this prop is set at all, so pass `loading={false}` (rather than
+   * leaving it out) on a field that loads options.
+   */
+  loading?: boolean;
+  /**
+   * Whether an option matches what was typed. Defaults to a match anywhere in its text,
+   * ignoring case and accents ("zurich" finds "Zürich"). Not used with controlled `items`.
+   */
+  filter?: (textValue: string, inputValue: string) => boolean;
+  /** Words the Autocomplete shows or announces, for other languages. */
+  labels?: Partial<AutocompleteLabels>;
+  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */
+  className?: string;
+  /** Classes for each part, by slot. */
+  classNames?: AutocompleteClassNames;
+  /** Inline styles for the root element. */
+  style?: CSSProperties;
+  /** Ref to the root `<div>` element. Use `inputRef` for the input itself. */
+  ref?: Ref<HTMLDivElement>;
+  /** Ref to the text `<input>`, e.g. for form libraries. */
+  inputRef?: Ref<HTMLInputElement>;
+};
+/**
+ * M3 exposed dropdown menu, editable (Compose's `ExposedDropdownMenuBox` with a
+ * `PrimaryEditable` anchor): type in the field and the menu below shows the matching
+ * options. Single or multiple selection (chosen options as M3 input chips in the field),
+ * accent-insensitive filtering by default, options loaded from a server through `items`,
+ * `onInputChange` and `loading`, and free text with `allowCustomValue` (React Aria
+ * `useComboBox`).
+ *
+ * @example
+ * <Autocomplete label="City" defaultItems={cities}>
+ *   {(city) => <AutocompleteItem key={city.id}>{city.name}</AutocompleteItem>}
+ * </Autocomplete>
+ */
+export declare function Autocomplete<T extends object, M extends SelectionMode = 'single'>(props: AutocompleteProps<T, M>): import("react").JSX.Element;
+//#endregion
+export type { AutocompleteKey };
+//# sourceMappingURL=Autocomplete.d.ts.map

package/dist/components/autocomplete/Autocomplete.js

@@ -0,0 +1,284 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { TouchTarget } from "../../primitives/TouchTarget.js";
+import { usePreloadLoadingIndicator } from "../loading-indicator/lazy-loading-indicator.js";
+import { FOCUSABLE_DISABLED_OPTIONS } from "../../utils/focusable-disabled.js";
+import { assertCollectionChildren } from "../../utils/assert-collection-children.js";
+import { ariaFlag, pickDescriptionAria, splitRootProps } from "../../utils/root-props.js";
+import { InputChip } from "../chip/Chip.js";
+import { renderedDescription } from "../../utils/rendered-description.js";
+import { matchesSearch } from "../../utils/search.js";
+import { DropdownArrow, FieldShell, fieldState } from "../select/field-shell.js";
+import { OptionList, OptionPopover } from "../select/option-list.js";
+import { useSelectionCap } from "../select/selection-cap.js";
+import { useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ListKeyboardDelegate, mergeProps, useButton, useComboBox, useFocusRing, useHover, useObjectRef } from "react-aria";
+import { useComboBoxState } from "react-stately/useComboBoxState";
+//#region src/components/autocomplete/Autocomplete.tsx
+/** Elements that keep their own presses; a press anywhere else on the field opens it. */
+const INTERACTIVE = "input, textarea, button, a, [role=\"button\"]";
+const DEFAULT_LABELS = {
+	noResults: "No results",
+	loading: "Loading options",
+	showOptions: "Show options",
+	remove: "Remove",
+	clear: "Clear",
+	error: "Error"
+};
+/** 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" })
+});
+/**
+* The arrow's press moves focus to the input (React Aria does it on a touch press) without
+* scrolling the page: a press on a field partly off-screen scrolled it into view
+* (2026-10-15). The input's `focus` asks for `preventScroll` only while the press runs.
+*/
+function withFocusInPlace(input, run) {
+	if (!input) return run();
+	input.focus = (options) => HTMLElement.prototype.focus.call(input, {
+		...options,
+		preventScroll: true
+	});
+	try {
+		run();
+	} finally {
+		Reflect.deleteProperty(input, "focus");
+	}
+}
+/**
+* M3 exposed dropdown menu, editable (Compose's `ExposedDropdownMenuBox` with a
+* `PrimaryEditable` anchor): type in the field and the menu below shows the matching
+* options. Single or multiple selection (chosen options as M3 input chips in the field),
+* accent-insensitive filtering by default, options loaded from a server through `items`,
+* `onInputChange` and `loading`, and free text with `allowCustomValue` (React Aria
+* `useComboBox`).
+*
+* @example
+* <Autocomplete label="City" defaultItems={cities}>
+*   {(city) => <AutocompleteItem key={city.id}>{city.name}</AutocompleteItem>}
+* </Autocomplete>
+*/
+function Autocomplete(props) {
+	const { variant = "filled", density, label, placeholder, supportingText, invalid: invalidProp, required: requiredProp, disabled = false, readOnly: readOnlyProp, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-readonly": ariaReadonly, leadingIcon, errorIcon, clearable = false, maxSelections, loading, labels: labelsProp, className, classNames, style, ref, inputRef: inputRefProp, errorMessage, filter, allowCustomValue, ...otherProps } = props;
+	if (typeof props.children !== "function") assertCollectionChildren(props.children, "Autocomplete", "AutocompleteItem and AutocompleteSection elements");
+	const { root: rootData, rest } = splitRootProps(otherProps, { wrapper: true });
+	const invalid = invalidProp ?? ariaFlag(ariaInvalid);
+	const required = requiredProp ?? ariaFlag(ariaRequired);
+	const readOnly = readOnlyProp ?? ariaFlag(ariaReadonly) ?? false;
+	const labels = {
+		...DEFAULT_LABELS,
+		...labelsProp
+	};
+	const stately = rest;
+	const multiple = stately.selectionMode === "multiple";
+	const cap = useSelectionCap({
+		multiple,
+		maxSelections,
+		value: stately.value,
+		defaultValue: stately.defaultValue,
+		onChange: stately.onChange
+	});
+	const inputRef = useObjectRef(inputRefProp);
+	const buttonRef = useRef(null);
+	const listBoxRef = useRef(null);
+	const popoverRef = useRef(null);
+	const containerRef = useRef(null);
+	usePreloadLoadingIndicator(containerRef, loading !== void 0);
+	const ariaProps = {
+		...stately,
+		...cap.valueProps,
+		label,
+		description: supportingText,
+		errorMessage,
+		isInvalid: invalid,
+		isRequired: required,
+		isDisabled: disabled,
+		isReadOnly: readOnly,
+		allowsCustomValue: allowCustomValue,
+		shouldFocusWrap: true,
+		placeholder,
+		inputRef,
+		buttonRef,
+		listBoxRef,
+		popoverRef
+	};
+	const state = useComboBoxState({
+		...ariaProps,
+		...FOCUSABLE_DISABLED_OPTIONS,
+		defaultFilter: filter ?? matchesSearch,
+		allowsEmptyCollection: true
+	});
+	const { collection } = state;
+	const { disabledKeys } = state.selectionManager;
+	const keyboardDelegate = useMemo(() => new ListKeyboardDelegate({
+		collection,
+		disabledKeys,
+		disabledBehavior: "selection",
+		ref: listBoxRef
+	}), [collection, disabledKeys]);
+	const { buttonProps, inputProps, listBoxProps, labelProps, valueProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails } = useComboBox({
+		...ariaProps,
+		keyboardDelegate
+	}, state);
+	const arrowPress = buttonProps.onPress;
+	const { buttonProps: arrowProps } = useButton({
+		...buttonProps,
+		onPress: arrowPress && ((event) => withFocusInPlace(inputRef.current, () => arrowPress(event)))
+	}, buttonRef);
+	const fingerOnArrowRef = useRef(false);
+	const { focusProps, isFocused } = useFocusRing({
+		within: true,
+		isTextInput: true
+	});
+	const { hoverProps, isHovered } = useHover({ isDisabled: disabled });
+	const chips = multiple ? state.selectedItems : [];
+	const removeChip = (key) => state.selectionManager.toggleSelection(key);
+	const onKeyDown = (event) => {
+		const last = chips.at(-1);
+		if (event.key === "Backspace" && state.inputValue === "" && last && !readOnly) {
+			event.preventDefault();
+			removeChip(last.key);
+		}
+	};
+	const openOnPress = () => {
+		if (!state.isOpen && !disabled && !readOnly && ariaProps.menuTrigger !== "manual") state.open(null, "manual");
+	};
+	const focused = isFocused || state.isOpen;
+	const floated = focused || state.inputValue !== "" || chips.length > 0;
+	const showClear = clearable && state.inputValue !== "" && !disabled && !readOnly;
+	const clear = () => {
+		if (!multiple) state.setValue(null);
+		state.setInputValue("");
+		inputRef.current?.focus({ preventScroll: true });
+	};
+	const resolvedError = typeof errorMessage === "function" ? errorMessage({
+		isInvalid,
+		validationErrors,
+		validationDetails
+	}) : errorMessage ?? validationErrors.join(" ");
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FieldShell, {
+		variant,
+		density,
+		label,
+		labelProps,
+		required,
+		state: fieldState({
+			disabled,
+			invalid: isInvalid,
+			focused,
+			hovered: isHovered
+		}),
+		floated,
+		open: state.isOpen,
+		leadingIcon,
+		errorIcon,
+		errorIconLabel: labels.error,
+		readOnly,
+		trailing: /* @__PURE__ */ jsxs("button", {
+			...arrowProps,
+			onPointerDown: (event) => {
+				fingerOnArrowRef.current = event.pointerType !== "mouse";
+				if (!fingerOnArrowRef.current) return arrowProps.onPointerDown?.(event);
+				event.preventDefault();
+			},
+			onPointerCancel: () => {
+				fingerOnArrowRef.current = false;
+			},
+			onClick: (event) => {
+				if (!fingerOnArrowRef.current) return arrowProps.onClick?.(event);
+				fingerOnArrowRef.current = false;
+				inputRef.current?.focus({ preventScroll: true });
+				if (!disabled && !readOnly) state.toggle(null, "manual");
+			},
+			ref: buttonRef,
+			"aria-label": labels.showOptions,
+			className: "relative flex size-[40px] items-center justify-center rounded-corner-full outline-none state-layer focus-ring [&>svg]:size-[24px]",
+			children: [/* @__PURE__ */ jsx(TouchTarget, {}), /* @__PURE__ */ jsx(DropdownArrow, { open: state.isOpen })]
+		}),
+		trailingAction: showClear ? /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			tabIndex: -1,
+			"aria-label": labels.clear,
+			onPointerDown: (event) => event.preventDefault(),
+			onClick: clear,
+			className: cn("relative flex size-[40px] items-center justify-center rounded-corner-full text-on-surface-variant outline-none state-layer [&>svg]:size-[24px]", classNames?.clear),
+			children: [/* @__PURE__ */ jsx(TouchTarget, {}), /* @__PURE__ */ jsx(ClearIcon, {})]
+		}) : null,
+		supportingText,
+		descriptionProps,
+		errorText: resolvedError,
+		errorMessageProps,
+		showError: isInvalid && Boolean(resolvedError),
+		containerRef,
+		containerProps: mergeProps(hoverProps, focusProps),
+		onContainerPointerDown: (event) => {
+			const target = event.target;
+			if (event.currentTarget.contains(target) && !target.closest(INTERACTIVE) && !disabled) {
+				event.preventDefault();
+				inputRef.current?.focus({ preventScroll: true });
+				openOnPress();
+			}
+		},
+		rootProps: rootData,
+		rootRef: ref,
+		className,
+		classNames,
+		style,
+		multiline: multiple,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("flex min-w-0 flex-1 flex-wrap items-center gap-[8px]", multiple && chips.length > 0 && !(variant === "filled" && label !== void 0 && label !== null) && "-my-[4px]"),
+			children: [chips.map((item) => /* @__PURE__ */ jsx(InputChip, {
+				density: 0,
+				onRemove: () => removeChip(item.key),
+				labels: { remove: labels.remove },
+				disabled: disabled || readOnly,
+				className: classNames?.chip,
+				children: item.textValue
+			}, item.key)), /* @__PURE__ */ jsx("input", {
+				...pickDescriptionAria(rest),
+				...inputProps,
+				"aria-describedby": renderedDescription(inputProps["aria-describedby"], [
+					!supportingText && descriptionProps.id,
+					!(isInvalid && resolvedError) && errorMessageProps.id,
+					valueProps.id
+				]),
+				onKeyDown: (event) => {
+					onKeyDown(event);
+					inputProps.onKeyDown?.(event);
+				},
+				onClick: (event) => {
+					inputProps.onClick?.(event);
+					openOnPress();
+				},
+				ref: inputRef,
+				className: cn("min-w-[48px] flex-1 bg-transparent p-0 text-body-large outline-none", "text-[color:var(--_md-comp-text-field-input-text-color)]", "caret-[color:var(--_md-comp-text-field-caret-color)]", "placeholder:text-on-surface-variant placeholder:opacity-100", label ? "placeholder:opacity-0 placeholder:transition-opacity group-data-floated/field:placeholder:opacity-100 placeholder:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)] placeholder:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]" : "", "group-data-invalid/field:caret-error group-data-[field-state=disabled]/field:text-on-surface/38", classNames?.input)
+			})]
+		})
+	}), /* @__PURE__ */ jsx(OptionPopover, {
+		state,
+		triggerRef: containerRef,
+		popoverRef,
+		nonModal: true,
+		density,
+		children: /* @__PURE__ */ jsx(OptionList, {
+			animateFiltering: true,
+			listBoxProps,
+			state,
+			listBoxRef,
+			emptyLabel: labels.noResults,
+			loading,
+			loadingLabel: labels.loading,
+			isBlocked: cap.isBlocked,
+			classNames
+		})
+	})] });
+}
+//#endregion
+export { Autocomplete };
+
+//# sourceMappingURL=Autocomplete.js.map

package/dist/components/autocomplete/Autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.js","names":[],"sources":["../../../src/components/autocomplete/Autocomplete.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useMemo,\n  useRef,\n  type AriaAttributes,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {\n  mergeProps,\n  useButton,\n  useComboBox,\n  useFocusRing,\n  useHover,\n  useObjectRef,\n  ListKeyboardDelegate,\n  type AriaComboBoxOptions,\n} from 'react-aria';\nimport {\n  useComboBoxState,\n  type ComboBoxProps,\n  type ComboBoxStateOptions,\n  type SelectionMode,\n} from 'react-stately/useComboBoxState';\nimport { TouchTarget } from '../../primitives/TouchTarget';\nimport { assertCollectionChildren } from '../../utils/assert-collection-children';\nimport type { Density } from '../../tokens/density';\nimport { cn } from '../../utils/cn';\nimport { renderedDescription } from '../../utils/rendered-description';\nimport { matchesSearch } from '../../utils/search';\nimport {\n  ariaFlag,\n  pickDescriptionAria,\n  splitRootProps,\n  type WrapperRootDOMProps,\n} from '../../utils/root-props';\nimport { usePreloadLoadingIndicator } from '../loading-indicator/lazy-loading-indicator';\nimport { InputChip } from '../chip/Chip';\nimport {\n  DropdownArrow,\n  FieldShell,\n  fieldState,\n  type FieldShellClassNames,\n} from '../select/field-shell';\nimport {\n  FOCUSABLE_DISABLED_OPTIONS,\n  OptionList,\n  OptionPopover,\n  type OptionListClassNames,\n} from '../select/option-list';\nimport { useSelectionCap } from '../select/selection-cap';\nimport type { TextFieldVariant } from '../text-field/text-field-styles';\n\n/** Words the Autocomplete shows or announces; override them for other languages. */\nexport interface AutocompleteLabels {\n  /** Shown when no option matches what was typed. @default \"No results\" */\n  noResults: string;\n  /** The loading indicator's name. @default \"Loading options\" */\n  loading: string;\n  /** The arrow button's name. @default \"Show options\" */\n  showOptions: string;\n  /** A chip's remove button; the chip's text follows it (\"Remove London\"). @default \"Remove\" */\n  remove: string;\n  /** With `clearable`: the clear button's name. @default \"Clear\" */\n  clear: string;\n  /** The error icon's name (M3: \"Error\"). @default \"Error\" */\n  error: string;\n}\n\n/** Elements that keep their own presses; a press anywhere else on the field opens it. */\nconst INTERACTIVE = 'input, textarea, button, a, [role=\"button\"]';\n\nconst DEFAULT_LABELS: AutocompleteLabels = {\n  noResults: 'No results',\n  loading: 'Loading options',\n  showOptions: 'Show options',\n  remove: 'Remove',\n  clear: 'Clear',\n  error: 'Error',\n};\n\nexport interface AutocompleteClassNames extends FieldShellClassNames, OptionListClassNames {\n  /** The text `<input>`. */\n  input?: string;\n  /** With `selectionMode=\"multiple\"`: each chosen option's input chip. */\n  chip?: string;\n  /** With `clearable`: the clear button. */\n  clear?: string;\n}\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\n/** React Aria props this API names the library's way (`disabled`, `readOnly`…), or leaves out. */\ntype RenamedProps =\n  | 'isDisabled'\n  | 'isRequired'\n  | 'isInvalid'\n  | 'isReadOnly'\n  | 'label'\n  | 'description'\n  | 'validationState'\n  | 'allowsCustomValue'\n  // React Stately's deprecated single-selection API; `value` / `defaultValue` / `onChange` replace it.\n  | 'selectedKey'\n  | 'defaultSelectedKey'\n  | 'onSelectionChange';\n\nexport type AutocompleteProps<T extends object, M extends SelectionMode = 'single'> = Omit<\n  ComboBoxProps<T, M>,\n  RenamedProps\n> &\n  Pick<AriaComboBoxOptions<T, M>, 'id' | 'name' | 'form'> &\n  Omit<WrapperRootDOMProps, keyof ComboBoxProps<T, M>> & {\n    /** The `<input>`'s id, for a `<label for>` or an error summary's link. */\n    id?: string;\n    /** The container style, as `TextField`'s: a filled surface or an outline. @default \"filled\" */\n    variant?: TextFieldVariant;\n    /**\n     * Free text: whatever is typed stays as the field's text when no option matches, instead\n     * of returning to the chosen option's. @default false\n     */\n    allowCustomValue?: boolean;\n    /**\n     * Web density, `0` to `-3`: each step takes 4px off the field (56px at 0, 44px at -3) and\n     * off its menu's options (44px at 0, 32px at -3). Left out, it takes the density of the\n     * nearest `ThemeProvider` or `ThemeScope`. M3 asks for density to be the reader's choice\n     * rather than a default, so prefer setting it there, from a setting.\n     * @default 0\n     */\n    density?: Density;\n    /** The field's label. Give `aria-label` instead when there's no visible label. */\n    label?: ReactNode;\n    /** Accessible name when there's no visible label. */\n    'aria-label'?: string;\n    /** Shown in the empty input. With a `label`, it appears once the label floats (on focus). */\n    placeholder?: string;\n    /**\n     * Helper text below the field. Replaced visually by the error when invalid, and shown in\n     * the error colour while the field is invalid.\n     */\n    supportingText?: ReactNode;\n    /** Marks the field invalid (in addition to `validate` and `required`). */\n    invalid?: boolean;\n    /** A value is required: adds the `*` to the label and validates on submit. */\n    required?: boolean;\n    /** Disables the field: it can't be focused or edited. @default false */\n    disabled?: boolean;\n    /** The value can be read and copied but not changed; the menu doesn't open. @default false */\n    readOnly?: boolean;\n    /**\n     * Read as `invalid` when that's left out, for a form library that sets the attribute, so\n     * the field shows its error state as well as announcing it.\n     */\n    'aria-invalid'?: AriaAttributes['aria-invalid'];\n    /** Read as `required` when that's left out, for a form library that sets the attribute. */\n    'aria-required'?: AriaAttributes['aria-required'];\n    /** Read as `readOnly` when that's left out, for a form library that sets the attribute. */\n    'aria-readonly'?: AriaAttributes['aria-readonly'];\n    /** Decorative icon at the start, in a 48px box. */\n    leadingIcon?: ReactNode;\n    /**\n     * The icon shown before the arrow while the field is invalid (M3 strongly recommends one).\n     * Defaults to Material Symbols `error`, named by `labels.error`; `false` turns it off.\n     */\n    errorIcon?: ReactNode | false;\n    /**\n     * A clear button (M3's clear icon) that appears while there's typed text and empties it,\n     * and a single choice with it. It's skipped by Tab, since the text can be deleted from\n     * the keyboard.\n     * @default false\n     */\n    clearable?: boolean;\n    /**\n     * With `selectionMode=\"multiple\"`, the most options that can be chosen; the rest show as\n     * disabled until one is removed.\n     */\n    maxSelections?: number;\n    /**\n     * Shows a loading indicator in the list, e.g. while options load for what was typed.\n     * The indicator's code loads when it first shows, and ahead of that when the field is\n     * hovered or focused while this prop is set at all, so pass `loading={false}` (rather than\n     * leaving it out) on a field that loads options.\n     */\n    loading?: boolean;\n    /**\n     * Whether an option matches what was typed. Defaults to a match anywhere in its text,\n     * ignoring case and accents (\"zurich\" finds \"Zürich\"). Not used with controlled `items`.\n     */\n    filter?: (textValue: string, inputValue: string) => boolean;\n    /** Words the Autocomplete shows or announces, for other languages. */\n    labels?: Partial<AutocompleteLabels>;\n    /** Classes for the root element, merged with `classNames.root`; consumer classes win. */\n    className?: string;\n    /** Classes for each part, by slot. */\n    classNames?: AutocompleteClassNames;\n    /** Inline styles for the root element. */\n    style?: CSSProperties;\n    /** Ref to the root `<div>` element. Use `inputRef` for the input itself. */\n    ref?: Ref<HTMLDivElement>;\n    /** Ref to the text `<input>`, e.g. for form libraries. */\n    inputRef?: Ref<HTMLInputElement>;\n  };\n\n/**\n * The arrow's press moves focus to the input (React Aria does it on a touch press) without\n * scrolling the page: a press on a field partly off-screen scrolled it into view\n * (2026-10-15). The input's `focus` asks for `preventScroll` only while the press runs.\n */\nfunction withFocusInPlace(input: HTMLInputElement | null, run: () => void) {\n  if (!input) return run();\n  input.focus = (options) =>\n    HTMLElement.prototype.focus.call(input, { ...options, preventScroll: true });\n  try {\n    run();\n  } finally {\n    Reflect.deleteProperty(input, 'focus');\n  }\n}\n\n/**\n * M3 exposed dropdown menu, editable (Compose's `ExposedDropdownMenuBox` with a\n * `PrimaryEditable` anchor): type in the field and the menu below shows the matching\n * options. Single or multiple selection (chosen options as M3 input chips in the field),\n * accent-insensitive filtering by default, options loaded from a server through `items`,\n * `onInputChange` and `loading`, and free text with `allowCustomValue` (React Aria\n * `useComboBox`).\n *\n * @example\n * <Autocomplete label=\"City\" defaultItems={cities}>\n *   {(city) => <AutocompleteItem key={city.id}>{city.name}</AutocompleteItem>}\n * </Autocomplete>\n */\nexport function Autocomplete<T extends object, M extends SelectionMode = 'single'>(\n  props: AutocompleteProps<T, M>,\n) {\n  const {\n    variant = 'filled',\n    density,\n    label,\n    placeholder,\n    supportingText,\n    invalid: invalidProp,\n    required: requiredProp,\n    disabled = false,\n    readOnly: readOnlyProp,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n    'aria-readonly': ariaReadonly,\n    leadingIcon,\n    errorIcon,\n    clearable = false,\n    maxSelections,\n    loading,\n    labels: labelsProp,\n    className,\n    classNames,\n    style,\n    ref,\n    inputRef: inputRefProp,\n    errorMessage,\n    filter,\n    allowCustomValue,\n    ...otherProps\n  } = props;\n  // Items given as elements (not `items` with a render function) must come from a client.\n  if (typeof props.children !== 'function') {\n    assertCollectionChildren(\n      props.children,\n      'Autocomplete',\n      'AutocompleteItem and AutocompleteSection elements',\n    );\n  }\n  const { root: rootData, rest } = splitRootProps(otherProps, { wrapper: true });\n  const invalid = invalidProp ?? ariaFlag(ariaInvalid);\n  const required = requiredProp ?? ariaFlag(ariaRequired);\n  const readOnly = readOnlyProp ?? ariaFlag(ariaReadonly) ?? false;\n  const labels = { ...DEFAULT_LABELS, ...labelsProp };\n  const stately = rest as Omit<ComboBoxProps<T, M>, RenamedProps>;\n  const multiple = stately.selectionMode === 'multiple';\n  const cap = useSelectionCap({\n    multiple,\n    maxSelections,\n    value: stately.value,\n    defaultValue: stately.defaultValue,\n    onChange: stately.onChange,\n  });\n\n  const inputRef = useObjectRef(inputRefProp);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const listBoxRef = useRef<HTMLUListElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  // A field that takes `loading` (it loads options) preloads the indicator on hover or focus.\n  usePreloadLoadingIndicator(containerRef, loading !== undefined);\n\n  const ariaProps = {\n    ...stately,\n    ...cap.valueProps,\n    label,\n    description: supportingText,\n    errorMessage,\n    isInvalid: invalid,\n    isRequired: required,\n    isDisabled: disabled,\n    isReadOnly: readOnly,\n    allowsCustomValue: allowCustomValue,\n    // The arrow keys wrap at the ends of the list, as in menus and lists.\n    shouldFocusWrap: true,\n    placeholder,\n    inputRef,\n    buttonRef,\n    listBoxRef,\n    popoverRef,\n  } as AriaComboBoxOptions<T, M>;\n\n  const state = useComboBoxState<T, M>({\n    ...(ariaProps as unknown as ComboBoxStateOptions<T, M>),\n    ...FOCUSABLE_DISABLED_OPTIONS,\n    defaultFilter: filter ?? matchesSearch,\n    allowsEmptyCollection: true,\n  });\n  const { collection } = state;\n  const { disabledKeys } = state.selectionManager;\n  const keyboardDelegate = useMemo(\n    () =>\n      new ListKeyboardDelegate({\n        collection,\n        disabledKeys,\n        disabledBehavior: 'selection',\n        ref: listBoxRef,\n      }),\n    [collection, disabledKeys],\n  );\n  const {\n    buttonProps,\n    inputProps,\n    listBoxProps,\n    labelProps,\n    valueProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails,\n  } = useComboBox<T, M>(\n    {\n      ...ariaProps,\n      // The input's arrow keys reach disabled options too (M3: they \"can receive focus\").\n      keyboardDelegate,\n    },\n    state,\n  );\n  const arrowPress = buttonProps.onPress;\n  const { buttonProps: arrowProps } = useButton(\n    {\n      ...buttonProps,\n      onPress:\n        arrowPress && ((event) => withFocusInPlace(inputRef.current, () => arrowPress(event))),\n    },\n    buttonRef,\n  );\n  // A touch on the arrow, opening the list on its click (see the arrow's handlers).\n  const fingerOnArrowRef = useRef(false);\n  const { focusProps, isFocused } = useFocusRing({ within: true, isTextInput: true });\n  const { hoverProps, isHovered } = useHover({ isDisabled: disabled });\n\n  const chips = multiple ? state.selectedItems : [];\n  const removeChip = (key: string | number) => state.selectionManager.toggleSelection(key);\n  // Backspace in an empty input removes the last chip, as in other chip inputs.\n  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    const last = chips.at(-1);\n    if (event.key === 'Backspace' && state.inputValue === '' && last && !readOnly) {\n      event.preventDefault();\n      removeChip(last.key);\n    }\n  };\n\n  // M3: \"A menu should open when a person … Selects an element, such as … a text field\", as\n  // Compose's editable anchor opens on press. A press on the input or the field opens the\n  // whole list, as the arrow does; keyboard focus alone doesn't (unless `menuTrigger=\"focus\"`),\n  // and `menuTrigger=\"manual\"` leaves opening to the arrow and the arrow keys.\n  const openOnPress = () => {\n    if (!state.isOpen && !disabled && !readOnly && ariaProps.menuTrigger !== 'manual') {\n      state.open(null, 'manual');\n    }\n  };\n\n  const focused = isFocused || state.isOpen;\n  const floated = focused || state.inputValue !== '' || chips.length > 0;\n  const showClear = clearable && state.inputValue !== '' && !disabled && !readOnly;\n  const clear = () => {\n    if (!multiple) state.setValue(null);\n    state.setInputValue('');\n    // Back to the input in the same field, without scrolling the page (2026-10-15).\n    inputRef.current?.focus({ preventScroll: true });\n  };\n  const resolvedError =\n    typeof errorMessage === 'function'\n      ? errorMessage({ isInvalid, validationErrors, validationDetails })\n      : (errorMessage ?? validationErrors.join(' '));\n\n  return (\n    <>\n      <FieldShell\n        variant={variant}\n        density={density}\n        label={label}\n        labelProps={labelProps}\n        required={required}\n        state={fieldState({ disabled, invalid: isInvalid, focused, hovered: isHovered })}\n        floated={floated}\n        open={state.isOpen}\n        leadingIcon={leadingIcon}\n        errorIcon={errorIcon}\n        errorIconLabel={labels.error}\n        readOnly={readOnly}\n        trailing={\n          <button\n            {...arrowProps}\n            // A finger opens the list on the click, with focus in the input. React Aria's\n            // touch press never ended here in Chrome (the list stayed closed), and the mouse\n            // events a tap emulates focused the arrow, out of the Tab order (2026-10-17). So a\n            // touch keeps both away from the arrow; the mouse and the keyboard keep React\n            // Aria's press, which opens on the press start.\n            onPointerDown={(event) => {\n              fingerOnArrowRef.current = event.pointerType !== 'mouse';\n              if (!fingerOnArrowRef.current) return arrowProps.onPointerDown?.(event);\n              event.preventDefault();\n            }}\n            onPointerCancel={() => {\n              fingerOnArrowRef.current = false;\n            }}\n            onClick={(event) => {\n              if (!fingerOnArrowRef.current) return arrowProps.onClick?.(event);\n              fingerOnArrowRef.current = false;\n              inputRef.current?.focus({ preventScroll: true });\n              if (!disabled && !readOnly) state.toggle(null, 'manual');\n            }}\n            ref={buttonRef}\n            aria-label={labels.showOptions}\n            className=\"relative flex size-[40px] items-center justify-center rounded-corner-full outline-none state-layer focus-ring [&>svg]:size-[24px]\"\n          >\n            <TouchTarget />\n            <DropdownArrow open={state.isOpen} />\n          </button>\n        }\n        trailingAction={\n          showClear ? (\n            <button\n              type=\"button\"\n              tabIndex={-1}\n              aria-label={labels.clear}\n              // Keeps focus (and the open menu) in the input.\n              onPointerDown={(event) => event.preventDefault()}\n              onClick={clear}\n              className={cn(\n                'relative flex size-[40px] items-center justify-center rounded-corner-full text-on-surface-variant outline-none state-layer [&>svg]:size-[24px]',\n                classNames?.clear,\n              )}\n            >\n              <TouchTarget />\n              <ClearIcon />\n            </button>\n          ) : null\n        }\n        supportingText={supportingText}\n        descriptionProps={descriptionProps}\n        errorText={resolvedError}\n        errorMessageProps={errorMessageProps}\n        showError={isInvalid && Boolean(resolvedError)}\n        containerRef={containerRef}\n        containerProps={mergeProps(hoverProps, focusProps)}\n        onContainerPointerDown={(event) => {\n          // A press anywhere on the field (its padding, a chip's label, the space between\n          // chips) puts the caret in the input and opens the menu, as TextField and Select\n          // react to the whole field. The input opens on its own click, and the buttons (the\n          // arrow, clear, a chip's remove) keep their own presses. Presses in the menu reach\n          // here through React's tree from its portal, and are left alone.\n          const target = event.target as Element;\n          if (event.currentTarget.contains(target) && !target.closest(INTERACTIVE) && !disabled) {\n            event.preventDefault();\n            // The field is where the press landed: the page never scrolls to it (2026-10-15).\n            inputRef.current?.focus({ preventScroll: true });\n            openOnPress();\n          }\n        }}\n        rootProps={rootData}\n        rootRef={ref}\n        className={className}\n        classNames={classNames}\n        style={style}\n        multiline={multiple}\n      >\n        <div\n          className={cn(\n            'flex min-w-0 flex-1 flex-wrap items-center gap-[8px]',\n            // A row of 32px input chips fits the 56px container (12px above and below), so a\n            // first chip doesn't make the field taller and each further row adds 40px. A filled\n            // field's floated label takes the top 24px, so there the row stays below it.\n            multiple &&\n              chips.length > 0 &&\n              !(variant === 'filled' && label !== undefined && label !== null) &&\n              '-my-[4px]',\n          )}\n        >\n          {chips.map((item) => (\n            <InputChip\n              key={item.key}\n              // The field's own density sets its padding around one 32px row of chips, so the\n              // chips keep their size (the field's height is what density changes here).\n              density={0}\n              onRemove={() => removeChip(item.key)}\n              labels={{ remove: labels.remove }}\n              disabled={disabled || readOnly}\n              className={classNames?.chip}\n            >\n              {item.textValue}\n            </InputChip>\n          ))}\n          <input\n            {...pickDescriptionAria(rest)}\n            {...inputProps}\n            aria-describedby={renderedDescription(inputProps['aria-describedby'], [\n              !supportingText && descriptionProps.id,\n              !(isInvalid && resolvedError) && errorMessageProps.id,\n              // React Aria's element for the chosen values, which the chips show instead.\n              valueProps.id,\n            ])}\n            onKeyDown={(event) => {\n              onKeyDown(event);\n              inputProps.onKeyDown?.(event);\n            }}\n            onClick={(event) => {\n              inputProps.onClick?.(event);\n              openOnPress();\n            }}\n            ref={inputRef}\n            className={cn(\n              // A zero flex basis with a 48px minimum: the input shares the chips' last row\n              // while 48px are left there, and wraps to a row of its own only below that.\n              'min-w-[48px] flex-1 bg-transparent p-0 text-body-large outline-none',\n              'text-[color:var(--_md-comp-text-field-input-text-color)]',\n              'caret-[color:var(--_md-comp-text-field-caret-color)]',\n              'placeholder:text-on-surface-variant placeholder:opacity-100',\n              label\n                ? 'placeholder:opacity-0 placeholder:transition-opacity group-data-floated/field:placeholder:opacity-100 placeholder:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)] placeholder:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]'\n                : '',\n              'group-data-invalid/field:caret-error group-data-[field-state=disabled]/field:text-on-surface/38',\n              classNames?.input,\n            )}\n          />\n        </div>\n      </FieldShell>\n      <OptionPopover\n        state={state}\n        triggerRef={containerRef}\n        popoverRef={popoverRef}\n        nonModal\n        density={density}\n      >\n        <OptionList\n          animateFiltering\n          listBoxProps={listBoxProps}\n          state={state}\n          listBoxRef={listBoxRef}\n          emptyLabel={labels.noResults}\n          loading={loading}\n          loadingLabel={labels.loading}\n          isBlocked={cap.isBlocked}\n          classNames={classNames}\n        />\n      </OptionPopover>\n    </>\n  );\n}\n\nexport type { Key as AutocompleteKey } from 'react-stately';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAyEA,MAAM,cAAc;AAEpB,MAAM,iBAAqC;CACzC,WAAW;CACX,SAAS;CACT,aAAa;CACb,QAAQ;CACR,OAAO;CACP,OAAO;AACT;;AAYA,MAAM,kBACJ,oBAAC,OAAD;CAAK,SAAQ;CAAiB,MAAK;CAAe,eAAY;CAC5D,UAAA,oBAAC,QAAD,EAAM,GAAE,oGAAqG,CAAA;AAC1G,CAAA;;;;;;AAuHP,SAAS,iBAAiB,OAAgC,KAAiB;CACzE,IAAI,CAAC,OAAO,OAAO,IAAI;CACvB,MAAM,SAAS,YACb,YAAY,UAAU,MAAM,KAAK,OAAO;EAAE,GAAG;EAAS,eAAe;CAAK,CAAC;CAC7E,IAAI;EACF,IAAI;CACN,UAAU;EACR,QAAQ,eAAe,OAAO,OAAO;CACvC;AACF;;;;;;;;;;;;;;AAeA,SAAgB,aACd,OACA;CACA,MAAM,EACJ,UAAU,UACV,SACA,OACA,aACA,gBACA,SAAS,aACT,UAAU,cACV,WAAW,OACX,UAAU,cACV,gBAAgB,aAChB,iBAAiB,cACjB,iBAAiB,cACjB,aACA,WACA,YAAY,OACZ,eACA,SACA,QAAQ,YACR,WACA,YACA,OACA,KACA,UAAU,cACV,cACA,QACA,kBACA,GAAG,eACD;CAEJ,IAAI,OAAO,MAAM,aAAa,YAC5B,yBACE,MAAM,UACN,gBACA,mDACF;CAEF,MAAM,EAAE,MAAM,UAAU,SAAS,eAAe,YAAY,EAAE,SAAS,KAAK,CAAC;CAC7E,MAAM,UAAU,eAAe,SAAS,WAAW;CACnD,MAAM,WAAW,gBAAgB,SAAS,YAAY;CACtD,MAAM,WAAW,gBAAgB,SAAS,YAAY,KAAK;CAC3D,MAAM,SAAS;EAAE,GAAG;EAAgB,GAAG;CAAW;CAClD,MAAM,UAAU;CAChB,MAAM,WAAW,QAAQ,kBAAkB;CAC3C,MAAM,MAAM,gBAAgB;EAC1B;EACA;EACA,OAAO,QAAQ;EACf,cAAc,QAAQ;EACtB,UAAU,QAAQ;CACpB,CAAC;CAED,MAAM,WAAW,aAAa,YAAY;CAC1C,MAAM,YAAY,OAA0B,IAAI;CAChD,MAAM,aAAa,OAAyB,IAAI;CAChD,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,eAAe,OAAuB,IAAI;CAEhD,2BAA2B,cAAc,YAAY,KAAA,CAAS;CAE9D,MAAM,YAAY;EAChB,GAAG;EACH,GAAG,IAAI;EACP;EACA,aAAa;EACb;EACA,WAAW;EACX,YAAY;EACZ,YAAY;EACZ,YAAY;EACZ,mBAAmB;EAEnB,iBAAiB;EACjB;EACA;EACA;EACA;EACA;CACF;CAEA,MAAM,QAAQ,iBAAuB;EACnC,GAAI;EACJ,GAAG;EACH,eAAe,UAAU;EACzB,uBAAuB;CACzB,CAAC;CACD,MAAM,EAAE,eAAe;CACvB,MAAM,EAAE,iBAAiB,MAAM;CAC/B,MAAM,mBAAmB,cAErB,IAAI,qBAAqB;EACvB;EACA;EACA,kBAAkB;EAClB,KAAK;CACP,CAAC,GACH,CAAC,YAAY,YAAY,CAC3B;CACA,MAAM,EACJ,aACA,YACA,cACA,YACA,YACA,kBACA,mBACA,WACA,kBACA,sBACE,YACF;EACE,GAAG;EAEH;CACF,GACA,KACF;CACA,MAAM,aAAa,YAAY;CAC/B,MAAM,EAAE,aAAa,eAAe,UAClC;EACE,GAAG;EACH,SACE,gBAAgB,UAAU,iBAAiB,SAAS,eAAe,WAAW,KAAK,CAAC;CACxF,GACA,SACF;CAEA,MAAM,mBAAmB,OAAO,KAAK;CACrC,MAAM,EAAE,YAAY,cAAc,aAAa;EAAE,QAAQ;EAAM,aAAa;CAAK,CAAC;CAClF,MAAM,EAAE,YAAY,cAAc,SAAS,EAAE,YAAY,SAAS,CAAC;CAEnE,MAAM,QAAQ,WAAW,MAAM,gBAAgB,CAAC;CAChD,MAAM,cAAc,QAAyB,MAAM,iBAAiB,gBAAgB,GAAG;CAEvF,MAAM,aAAa,UAA2C;EAC5D,MAAM,OAAO,MAAM,GAAG,EAAE;EACxB,IAAI,MAAM,QAAQ,eAAe,MAAM,eAAe,MAAM,QAAQ,CAAC,UAAU;GAC7E,MAAM,eAAe;GACrB,WAAW,KAAK,GAAG;EACrB;CACF;CAMA,MAAM,oBAAoB;EACxB,IAAI,CAAC,MAAM,UAAU,CAAC,YAAY,CAAC,YAAY,UAAU,gBAAgB,UACvE,MAAM,KAAK,MAAM,QAAQ;CAE7B;CAEA,MAAM,UAAU,aAAa,MAAM;CACnC,MAAM,UAAU,WAAW,MAAM,eAAe,MAAM,MAAM,SAAS;CACrE,MAAM,YAAY,aAAa,MAAM,eAAe,MAAM,CAAC,YAAY,CAAC;CACxE,MAAM,cAAc;EAClB,IAAI,CAAC,UAAU,MAAM,SAAS,IAAI;EAClC,MAAM,cAAc,EAAE;EAEtB,SAAS,SAAS,MAAM,EAAE,eAAe,KAAK,CAAC;CACjD;CACA,MAAM,gBACJ,OAAO,iBAAiB,aACpB,aAAa;EAAE;EAAW;EAAkB;CAAkB,CAAC,IAC9D,gBAAgB,iBAAiB,KAAK,GAAG;CAEhD,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,YAAD;EACW;EACA;EACF;EACK;EACF;EACV,OAAO,WAAW;GAAE;GAAU,SAAS;GAAW;GAAS,SAAS;EAAU,CAAC;EACtE;EACT,MAAM,MAAM;EACC;EACF;EACX,gBAAgB,OAAO;EACb;EACV,UACE,qBAAC,UAAD;GACE,GAAI;GAMJ,gBAAgB,UAAU;IACxB,iBAAiB,UAAU,MAAM,gBAAgB;IACjD,IAAI,CAAC,iBAAiB,SAAS,OAAO,WAAW,gBAAgB,KAAK;IACtE,MAAM,eAAe;GACvB;GACA,uBAAuB;IACrB,iBAAiB,UAAU;GAC7B;GACA,UAAU,UAAU;IAClB,IAAI,CAAC,iBAAiB,SAAS,OAAO,WAAW,UAAU,KAAK;IAChE,iBAAiB,UAAU;IAC3B,SAAS,SAAS,MAAM,EAAE,eAAe,KAAK,CAAC;IAC/C,IAAI,CAAC,YAAY,CAAC,UAAU,MAAM,OAAO,MAAM,QAAQ;GACzD;GACA,KAAK;GACL,cAAY,OAAO;GACnB,WAAU;GAvBZ,UAAA,CAyBE,oBAAC,aAAD,CAAc,CAAA,GACd,oBAAC,eAAD,EAAe,MAAM,MAAM,OAAS,CAAA,CAC9B;;EAEV,gBACE,YACE,qBAAC,UAAD;GACE,MAAK;GACL,UAAU;GACV,cAAY,OAAO;GAEnB,gBAAgB,UAAU,MAAM,eAAe;GAC/C,SAAS;GACT,WAAW,GACT,kJACA,YAAY,KACd;GAVF,UAAA,CAYE,oBAAC,aAAD,CAAc,CAAA,GACd,oBAAC,WAAD,CAAY,CAAA,CACN;EACN,CAAA,IAAA;EAEU;EACE;EAClB,WAAW;EACQ;EACnB,WAAW,aAAa,QAAQ,aAAa;EAC/B;EACd,gBAAgB,WAAW,YAAY,UAAU;EACjD,yBAAyB,UAAU;GAMjC,MAAM,SAAS,MAAM;GACrB,IAAI,MAAM,cAAc,SAAS,MAAM,KAAK,CAAC,OAAO,QAAQ,WAAW,KAAK,CAAC,UAAU;IACrF,MAAM,eAAe;IAErB,SAAS,SAAS,MAAM,EAAE,eAAe,KAAK,CAAC;IAC/C,YAAY;GACd;EACF;EACA,WAAW;EACX,SAAS;EACE;EACC;EACL;EACP,WAAW;EAEX,UAAA,qBAAC,OAAD;GACE,WAAW,GACT,wDAIA,YACE,MAAM,SAAS,KACf,EAAE,YAAY,YAAY,UAAU,KAAA,KAAa,UAAU,SAC3D,WACJ;GAVF,UAAA,CAYG,MAAM,KAAK,SACV,oBAAC,WAAD;IAIE,SAAS;IACT,gBAAgB,WAAW,KAAK,GAAG;IACnC,QAAQ,EAAE,QAAQ,OAAO,OAAO;IAChC,UAAU,YAAY;IACtB,WAAW,YAAY;IAEtB,UAAA,KAAK;GACG,GAVJ,KAAK,GAUD,CACZ,GACD,oBAAC,SAAD;IACE,GAAI,oBAAoB,IAAI;IAC5B,GAAI;IACJ,oBAAkB,oBAAoB,WAAW,qBAAqB;KACpE,CAAC,kBAAkB,iBAAiB;KACpC,EAAE,aAAa,kBAAkB,kBAAkB;KAEnD,WAAW;IACb,CAAC;IACD,YAAY,UAAU;KACpB,UAAU,KAAK;KACf,WAAW,YAAY,KAAK;IAC9B;IACA,UAAU,UAAU;KAClB,WAAW,UAAU,KAAK;KAC1B,YAAY;IACd;IACA,KAAK;IACL,WAAW,GAGT,uEACA,4DACA,wDACA,+DACA,QACI,uRACA,IACJ,mGACA,YAAY,KACd;GACD,CAAA,CACE;;CACK,CAAA,GACZ,oBAAC,eAAD;EACS;EACP,YAAY;EACA;EACZ,UAAA;EACS;EAET,UAAA,oBAAC,YAAD;GACE,kBAAA;GACc;GACP;GACK;GACZ,YAAY,OAAO;GACV;GACT,cAAc,OAAO;GACrB,WAAW,IAAI;GACH;EACb,CAAA;CACY,CAAA,CACf,EAAA,CAAA;AAEN"}

package/dist/components/badge/Badge.d.ts

@@ -0,0 +1,71 @@
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/components/badge/Badge.d.ts
+/** Words a {@link Badge} announces. */
+export interface BadgeLabels {
+  /** What a small badge (a dot) announces. @default "New notification" */
+  newNotification: string;
+}
+export interface BadgeClassNames {
+  /** The badge itself: the dot, or the large badge's container. */
+  root?: string;
+  /** The large badge's text, which truncates at the badge's maximum width. */
+  label?: string;
+}
+export interface BadgeProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {
+  /**
+   * A count or a short label (large badge); leave it out for the small dot. Numbers are
+   * formatted for the locale and capped at `max` ("999+"). M3 allows four characters,
+   * including the "+"; text badges stop at 34px wide and truncate longer text.
+   */
+  children?: ReactNode;
+  /** The highest count shown; larger counts show as `max` + "+". @default 999 */
+  max?: number;
+  /**
+   * What assistive tech reads instead of the visible content, e.g. "3 unread messages".
+   * Without it, a large badge reads its content and a small one `labels.newNotification`.
+   */
+  label?: string;
+  /** Words the badge announces, with English defaults. */
+  labels?: Partial<BadgeLabels>;
+  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */
+  classNames?: BadgeClassNames;
+}
+/**
+ * M3 badge: a small 6px dot, or a large 16px badge holding a count or a short label, in
+ * `error` colours. Place it on an icon with {@link BadgedBox}. It is announced: a count is
+ * read, a dot reads "New notification" (`labels`), and `label` replaces either.
+ *
+ * @example
+ * <Badge />
+ * <Badge>{3}</Badge>
+ * <Badge max={99}>{120}</Badge> // "99+"
+ */
+export declare function Badge({ children, max, label, labels, classNames, className, ...rest }: BadgeProps): import("react").JSX.Element;
+export interface BadgedBoxClassNames {
+  /** The wrapper that positions the badge over its anchor. */
+  root?: string;
+  /** The wrapper around the anchor (`children`). */
+  anchor?: string;
+}
+export interface BadgedBoxProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {
+  /** The badge, a {@link Badge}. */
+  badge: ReactElement<BadgeProps>;
+  /** The anchor, usually an icon. */
+  children: ReactNode;
+  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */
+  classNames?: BadgedBoxClassNames;
+}
+/**
+ * Places a badge at the top end of its anchor (Compose's `BadgedBox`), e.g. on an icon.
+ * The badge's announcement is part of the text around it; an anchor named with its own
+ * `aria-label` should say what the badge means.
+ *
+ * @example
+ * <IconButton
+ *   aria-label="Messages, 3 unread"
+ *   icon={<BadgedBox badge={<Badge>{3}</Badge>}><MailIcon /></BadgedBox>}
+ * />
+ */
+export declare function BadgedBox({ badge, children, classNames, className, ...rest }: BadgedBoxProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Badge.d.ts.map