@windmorph/react 0.2.0 → 0.2.2

package/dist/components/text-field/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":[],"sources":["../../../src/components/text-field/TextField.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useId,\n  useLayoutEffect,\n  type AriaAttributes,\n  type CSSProperties,\n  type MouseEvent,\n  type PointerEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {\n  mergeProps,\n  useFocusRing,\n  useHover,\n  useObjectRef,\n  useTextField,\n  type AriaTextFieldOptions,\n  type AriaTextFieldProps,\n} from 'react-aria';\nimport { useControlledState } from 'react-stately/useControlledState';\nimport {\n  CharacterCounter,\n  ErrorText,\n  FieldErrorIcon,\n  FieldLabel,\n  SupportingText,\n} from '../../primitives/Field';\nimport { densityAttribute, type Density } from '../../tokens/density';\nimport { cn } from '../../utils/cn';\nimport { renderedDescription } from '../../utils/rendered-description';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\nimport { pickWidgetAria, splitRootProps, type WrapperRootDOMProps } from '../../utils/root-props';\nimport { textFieldStyles, type TextFieldVariant } from './text-field-styles';\n\nexport interface TextFieldClassNames {\n  /** The root element, merged with `className`. */\n  root?: string;\n  /** The filled or outlined container around the label, input and icons. */\n  container?: string;\n  /** The floating label. */\n  label?: string;\n  /** The `<input>` or `<textarea>`. */\n  input?: string;\n  /** The leading icon's 48px box. */\n  leadingIcon?: string;\n  /** The trailing icon's 48px box. */\n  trailingIcon?: string;\n  /** The prefix text before the input. */\n  prefix?: string;\n  /** The suffix text after the input. */\n  suffix?: string;\n  /** The helper text below the field. */\n  supportingText?: string;\n  /** The error message below the field. */\n  errorText?: string;\n  /** The character counter below the field. */\n  counter?: string;\n  /** The built-in error icon. */\n  errorIcon?: string;\n  /** The outlined field's border (a `<fieldset>`, notched for the floated label). */\n  outline?: string;\n  /** The filled field's active indicator, the line along the container's bottom. */\n  activeIndicator?: string;\n}\n\n/** Words the text field announces; override them for other languages. */\nexport interface TextFieldLabels {\n  /** The error icon's name (M3: \"Error\"). @default \"Error\" */\n  error: string;\n  /**\n   * What screen readers hear for the character counter (M3 calls it the \"character count\").\n   * @default (count, max) => `Character count: ${count} of ${max}`\n   */\n  characterCount: (count: number, max: number) => string;\n}\n\nconst DEFAULT_LABELS: TextFieldLabels = {\n  error: 'Error',\n  characterCount: (count, max) => `Character count: ${count} of ${max}`,\n};\n\n/** Input types the browser draws its own format in when empty, which a resting label would cover. */\nconst FORMAT_SHOWING_TYPES = new Set(['date', 'time', 'datetime-local', 'month', 'week']);\n\ntype FieldState = 'disabled' | 'error-focus' | 'error-hover' | 'error' | 'focus' | 'hover' | 'rest';\n\n/** Props React Aria names with an `is` prefix; we use the HTML-style names instead. */\ntype RenamedAriaProps =\n  | 'isDisabled'\n  | 'isReadOnly'\n  | 'isRequired'\n  | 'isInvalid'\n  | 'label'\n  | 'description'\n  | 'inputElementType'\n  | 'value'\n  | 'defaultValue'\n  | 'onChange'\n  // Left out: the deprecated `validationState` (`invalid` replaces it) and React Aria's\n  // `excludeFromTabOrder` (`tabIndex={-1}` covers the rare case).\n  | 'validationState'\n  | 'excludeFromTabOrder';\n\ninterface TextFieldOwnProps\n  extends\n    Omit<AriaTextFieldProps<HTMLInputElement>, RenamedAriaProps>,\n    Omit<WrapperRootDOMProps, keyof AriaTextFieldProps<HTMLInputElement>>,\n    // The attributes that describe the input go to it, with React Aria's `aria-controls`,\n    // `aria-haspopup`, `aria-autocomplete` and `aria-activedescendant`: a field that opens its\n    // own suggestions can say so.\n    Pick<\n      AriaAttributes,\n      | 'aria-expanded'\n      | 'aria-required'\n      | 'aria-invalid'\n      | 'aria-readonly'\n      | 'aria-multiline'\n      | 'aria-placeholder'\n    > {\n  /** The `<input>`'s (or `<textarea>`'s) id, for a `<label for>` or an error summary's link. */\n  id?: string;\n  /** The container style: a filled surface or an outline. @default \"filled\" */\n  variant?: TextFieldVariant;\n  /**\n   * Web density, `0` to `-3`: each step takes 4px off the container (56px at 0, 44px at -3).\n   * Left out, the field takes the density of the nearest `ThemeProvider` or `ThemeScope`. M3\n   * asks for density to be the reader's choice rather than a default, so prefer setting it\n   * there, from a setting.\n   * @default 0\n   */\n  density?: Density;\n  /** The text, when controlled. */\n  value?: string;\n  /** The initial text, when uncontrolled. @default \"\" */\n  defaultValue?: string;\n  /** Called with the new text on every change. */\n  onChange?: (value: string) => void;\n  /**\n   * Helper text below the field. Replaced visually by the error message when invalid, and\n   * shown in the error colour while the field is invalid.\n   */\n  supportingText?: ReactNode;\n  /**\n   * Shows the supporting text only while the field has focus (M3 allows it \"persistently\n   * visible or visible only on focus\"). Its space is kept, and screen readers always get it.\n   * @default false\n   */\n  supportingTextOnFocus?: boolean;\n  /** Marks the field invalid (in addition to `validate` and native constraints). */\n  invalid?: boolean;\n  /** A value is required: adds the `*` to the label and native `required` validation. */\n  required?: boolean;\n  /** Disables the field: it can't be focused or edited. @default false */\n  disabled?: boolean;\n  /**\n   * The value can be read and copied but not changed. M3 styles it as a regular field and\n   * asks for it to be \"clearly labeled as read-only\", e.g. in the supporting text. The root\n   * gets `data-readonly`.\n   * @default false\n   */\n  readOnly?: boolean;\n  /** Decorative icon at the start, in a 48px box. */\n  leadingIcon?: ReactNode;\n  /**\n   * Icon or icon button at the end (e.g. clear, visibility toggle), in a 48px box. It takes\n   * the place of the error icon.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The icon shown at the end while the field is invalid and has no `trailingIcon` (M3\n   * strongly recommends one). Defaults to Material Symbols `error`, named by `labels.error`;\n   * `false` turns it off.\n   */\n  errorIcon?: ReactNode | false;\n  /** Text before the input, e.g. \"$\". Shown once the label floats. */\n  prefix?: ReactNode;\n  /**\n   * What screen readers hear for the prefix, e.g. \"US dollars\" for \"$\". The prefix is in the\n   * input's description either way; without this, its visible text is read.\n   */\n  prefixLabel?: string;\n  /** Text after the input, e.g. \"kg\". Shown once the label floats. */\n  suffix?: ReactNode;\n  /** What screen readers hear for the suffix, e.g. \"kilograms\" for \"kg\". */\n  suffixLabel?: string;\n  /**\n   * Renders a `<textarea>`. By default it's an M3 text area: a fixed height of `rows` lines\n   * that scrolls vertically, which M3 recommends over growing fields on the web.\n   * @default false\n   */\n  multiline?: boolean;\n  /**\n   * With `multiline`: grow with the content from `rows` up to `maxRows` (M3's multi-line\n   * field) instead of keeping a fixed height.\n   * @default false\n   */\n  autoGrow?: boolean;\n  /** Visible lines of a multiline field. @default 4, or 1 with autoGrow */\n  rows?: number;\n  /** With `autoGrow`: lines after which the field scrolls instead of growing. */\n  maxRows?: number;\n  /** Shows `count/maxLength` below the field. Defaults to `true` when `maxLength` is set. */\n  counter?: boolean;\n  /** Words the field announces, for other languages. */\n  labels?: Partial<TextFieldLabels>;\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?: TextFieldClassNames;\n  /** Inline styles for the root element. */\n  style?: CSSProperties;\n  /** The root element. Use `inputRef` for the input itself. */\n  ref?: Ref<HTMLDivElement>;\n  /** The `<input>` (or `<textarea>` when multiline), e.g. for form libraries. */\n  inputRef?: Ref<HTMLInputElement | HTMLTextAreaElement>;\n}\n\n/** A visible label, or an accessible name for fields without one. */\ntype TextFieldLabel =\n  | {\n      /** The visible label, which floats above the input once it has focus or a value. */\n      label: ReactNode;\n    }\n  | {\n      label?: undefined;\n      /** Accessible name when there's no visible label. */\n      'aria-label': string;\n    }\n  | {\n      label?: undefined;\n      /** The id of the element that names the field, when there's no visible label. */\n      'aria-labelledby': string;\n    };\n\nexport type TextFieldProps = TextFieldOwnProps & TextFieldLabel;\n\nconst INTERACTIVE = 'input, textarea, button, a, [role=\"button\"]';\n\n/**\n * M3 text field: filled or outlined, with a floating label, leading / trailing icons,\n * prefix and suffix, supporting text, error message and icon, character counter, and a\n * multiline form (a fixed-height text area, or a growing field with `autoGrow`). Built on React Aria `useTextField`, so labelling,\n * descriptions, `validate` and native constraints work as in React Aria.\n *\n * `className` and `style` go on the root; `inputRef` reaches the input.\n *\n * @example\n * <TextField label=\"Email\" type=\"email\" required supportingText=\"We never share it.\" />\n * <TextField variant=\"outlined\" label=\"Price\" prefix=\"$\" inputMode=\"decimal\" />\n */\nexport function TextField(props: TextFieldProps) {\n  const {\n    variant = 'filled',\n    density,\n    label,\n    value: valueProp,\n    defaultValue,\n    onChange,\n    supportingText,\n    supportingTextOnFocus = false,\n    errorMessage,\n    invalid,\n    required,\n    disabled = false,\n    readOnly,\n    leadingIcon,\n    trailingIcon,\n    errorIcon,\n    prefix,\n    prefixLabel,\n    suffix,\n    suffixLabel,\n    multiline = false,\n    autoGrow = false,\n    rows = autoGrow ? 1 : 4,\n    maxRows,\n    counter,\n    labels: labelsProp,\n    className,\n    classNames,\n    style,\n    ref,\n    inputRef,\n    ...otherProps\n  } = props;\n\n  // `data-*` attributes and the root's DOM attributes describe the component, so they go on the\n  // root with `className`; everything else (the input's ARIA, attributes and events) goes to\n  // the input via React Aria.\n  const { root: rootData, rest: ariaProps } = splitRootProps(otherProps, { wrapper: true });\n  const labels = { ...DEFAULT_LABELS, ...labelsProp };\n  const prefixId = useId();\n  const suffixId = useId();\n  const counterId = useId();\n\n  const [value, setValue] = useControlledState(valueProp, defaultValue ?? '', onChange);\n  const domInputRef = useObjectRef(inputRef as Ref<HTMLInputElement>);\n  const {\n    labelProps,\n    inputProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails,\n  } = useTextField(\n    {\n      ...ariaProps,\n      label,\n      description: supportingText,\n      errorMessage,\n      value,\n      onChange: setValue,\n      isInvalid: invalid,\n      isRequired: required,\n      isDisabled: disabled,\n      isReadOnly: readOnly,\n      inputElementType: multiline ? 'textarea' : 'input',\n    } as AriaTextFieldOptions<'input' | 'textarea'>,\n    domInputRef,\n  );\n  const { focusProps, isFocused } = useFocusRing({ isTextInput: true });\n  const { hoverProps, isHovered } = useHover({ isDisabled: disabled });\n\n  const growing = multiline && autoGrow;\n  // Grow a multiline field with its content, up to maxRows.\n  useLayoutEffect(() => {\n    const element = domInputRef.current as HTMLTextAreaElement | null;\n    if (!growing || !element) return;\n    element.style.height = 'auto';\n    const lineHeight = Number.parseFloat(getComputedStyle(element).lineHeight) || 24;\n    const max = maxRows ? lineHeight * maxRows : Number.POSITIVE_INFINITY;\n    element.style.height = `${Math.min(element.scrollHeight, max)}px`;\n    element.style.overflowY = element.scrollHeight > max ? 'auto' : 'hidden';\n  }, [value, growing, maxRows, domInputRef]);\n\n  const hasLabel = label !== undefined && label !== null;\n  const floated =\n    hasLabel && (isFocused || value.length > 0 || FORMAT_SHOWING_TYPES.has(ariaProps.type ?? ''));\n  const state: FieldState = disabled\n    ? 'disabled'\n    : isInvalid\n      ? isFocused\n        ? 'error-focus'\n        : isHovered\n          ? 'error-hover'\n          : 'error'\n      : isFocused\n        ? 'focus'\n        : isHovered\n          ? 'hover'\n          : 'rest';\n\n  const resolvedError =\n    typeof errorMessage === 'function'\n      ? errorMessage({ isInvalid, validationErrors, validationDetails })\n      : (errorMessage ?? validationErrors.join(' '));\n  const showError = isInvalid && Boolean(resolvedError);\n  const maxLength = ariaProps.maxLength;\n  const showCounter = maxLength !== undefined && counter !== false;\n  const showErrorIcon = isInvalid && !trailingIcon && errorIcon !== false;\n\n  const styles = textFieldStyles({\n    variant,\n    hasLabel,\n    hasLeadingIcon: Boolean(leadingIcon),\n    hasTrailingIcon: Boolean(trailingIcon) || showErrorIcon,\n    multiline,\n    fixedHeight: multiline && !autoGrow,\n    supportingTextOnFocus,\n  });\n  // The affixes and the counter join React Aria's description (supporting text, then error).\n  const describedBy =\n    [\n      prefix ? prefixId : null,\n      suffix ? suffixId : null,\n      renderedDescription(inputProps['aria-describedby'], [\n        !supportingText && descriptionProps.id,\n        !showError && errorMessageProps.id,\n      ]),\n      showCounter ? counterId : null,\n    ]\n      .filter(Boolean)\n      .join(' ') || undefined;\n\n  // Pressing the container (not an icon button) focuses the input, like Compose.\n  const focusInput = (event: PointerEvent<HTMLDivElement>) => {\n    if ((event.target as Element).closest(INTERACTIVE) || disabled) return;\n    event.preventDefault();\n    // The field is where the press landed: the page never scrolls to it (2026-10-15).\n    domInputRef.current?.focus({ preventScroll: true });\n  };\n  // Chrome's touch adjustment can send a tap's pointer events to the input while the mouse\n  // events it emulates, and the click, land on the padding beside it, so the input never\n  // takes focus (2026-10-17). A click on the field that leaves the input unfocused focuses it.\n  // The mouse never needs it: its press on the padding already focused the input.\n  const focusInputOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    const target = event.target as Element;\n    if (\n      (event.nativeEvent as globalThis.PointerEvent).pointerType === 'mouse' ||\n      !event.currentTarget.contains(target) ||\n      target.closest(INTERACTIVE) ||\n      disabled ||\n      document.activeElement === domInputRef.current\n    ) {\n      return;\n    }\n    domInputRef.current?.focus({ preventScroll: true });\n  };\n\n  // Part of the accessible name, as M3 asks (\"The accessibility label must include the\n  // asterisk\"); the copy in the outline's notch is hidden with the fieldset.\n  const requiredMark = required ? ' *' : null;\n  const Input = multiline ? 'textarea' : 'input';\n\n  return (\n    <div\n      {...rootData}\n      ref={ref}\n      style={style}\n      className={styles.root({ class: cn(classNames?.root, className) })}\n      data-tokens={mergeDataTokens('md-comp-text-field', rootData)}\n      data-variant={variant}\n      {...densityAttribute(density)}\n      data-field-state={state}\n      data-focused={isFocused || undefined}\n      data-hovered={(isHovered && !disabled) || undefined}\n      data-invalid={isInvalid || undefined}\n      data-disabled={disabled || undefined}\n      data-readonly={readOnly || undefined}\n      data-floated={floated || undefined}\n    >\n      <div\n        {...hoverProps}\n        onPointerDown={focusInput}\n        onClick={focusInputOnClick}\n        data-slot=\"container\"\n        className={styles.container({ class: classNames?.container })}\n      >\n        {variant === 'outlined' && (\n          <fieldset\n            aria-hidden=\"true\"\n            data-slot=\"outline\"\n            className={styles.outline({ class: classNames?.outline })}\n          >\n            {hasLabel && (\n              <legend className={styles.notch()}>\n                <span className={styles.notchClip()}>\n                  <span className={styles.notchText()}>\n                    {label}\n                    {requiredMark}\n                  </span>\n                </span>\n              </legend>\n            )}\n          </fieldset>\n        )}\n        {leadingIcon && (\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"leading-icon\"\n            className={styles.icon({ class: cn(styles.leadingIcon(), classNames?.leadingIcon) })}\n          >\n            {leadingIcon}\n          </span>\n        )}\n        <div className={styles.field()}>\n          {prefix && (\n            <span\n              id={prefixId}\n              className={styles.affix({ class: cn(styles.prefix(), classNames?.prefix) })}\n            >\n              <Affix text={prefix} label={prefixLabel} />\n            </span>\n          )}\n          <Input\n            {...(mergeProps(inputProps, pickWidgetAria(ariaProps), focusProps) as object)}\n            aria-describedby={describedBy}\n            ref={domInputRef as Ref<never>}\n            data-slot=\"input\"\n            rows={multiline ? rows : undefined}\n            className={styles.input({ class: classNames?.input })}\n          />\n          {suffix && (\n            <span\n              id={suffixId}\n              className={styles.affix({ class: cn(styles.suffix(), classNames?.suffix) })}\n            >\n              <Affix text={suffix} label={suffixLabel} />\n            </span>\n          )}\n        </div>\n        {trailingIcon ? (\n          <span\n            data-slot=\"trailing-icon\"\n            className={styles.icon({\n              class: cn(styles.trailingIcon(), classNames?.trailingIcon),\n            })}\n          >\n            {trailingIcon}\n          </span>\n        ) : showErrorIcon ? (\n          <span className={styles.icon({ class: styles.trailingIcon() })}>\n            <FieldErrorIcon\n              label={labels.error}\n              icon={errorIcon}\n              className={styles.errorIcon({ class: classNames?.errorIcon })}\n            />\n          </span>\n        ) : null}\n        {hasLabel && (\n          <FieldLabel\n            {...labelProps}\n            data-slot=\"label\"\n            className={styles.label({ class: classNames?.label })}\n          >\n            {label}\n            {requiredMark}\n          </FieldLabel>\n        )}\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"active-indicator\"\n          className={styles.indicator({ class: classNames?.activeIndicator })}\n        />\n      </div>\n      {(supportingText || showError || showCounter) && (\n        <div className={styles.supporting()}>\n          {supportingText && (\n            <SupportingText\n              {...descriptionProps}\n              data-slot=\"supporting-text\"\n              className={cn(\n                styles.supportingText({\n                  class: cn(styles.supportingTextColor(), classNames?.supportingText),\n                }),\n                showError && 'sr-only',\n              )}\n            >\n              {supportingText}\n            </SupportingText>\n          )}\n          {showError && (\n            <ErrorText\n              {...errorMessageProps}\n              className={styles.supportingText({\n                supportingTextOnFocus: false,\n                class: classNames?.errorText,\n              })}\n            >\n              {resolvedError}\n            </ErrorText>\n          )}\n          {showCounter && (\n            <CharacterCounter\n              id={counterId}\n              count={value.length}\n              max={maxLength}\n              label={labels.characterCount(value.length, maxLength)}\n              className={styles.counter({ class: classNames?.counter })}\n            />\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** An affix's visible text, read as its `label` when there is one. */\nfunction Affix({ text, label }: { text: ReactNode; label: string | undefined }) {\n  if (label === undefined) return text;\n  return (\n    <>\n      <span aria-hidden=\"true\">{text}</span>\n      <span className=\"sr-only\">{label}</span>\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"TextField.js","names":[],"sources":["../../../src/components/text-field/TextField.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useId,\n  useLayoutEffect,\n  type AriaAttributes,\n  type CSSProperties,\n  type MouseEvent,\n  type PointerEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {\n  mergeProps,\n  useFocusRing,\n  useHover,\n  useObjectRef,\n  useTextField,\n  type AriaTextFieldOptions,\n  type AriaTextFieldProps,\n} from 'react-aria';\nimport { useControlledState } from 'react-stately/useControlledState';\nimport {\n  CharacterCounter,\n  ErrorText,\n  FieldErrorIcon,\n  FieldLabel,\n  SupportingText,\n} from '../../primitives/Field';\nimport { densityAttribute, type Density } from '../../tokens/density';\nimport { cn } from '../../utils/cn';\nimport { renderedDescription } from '../../utils/rendered-description';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\nimport { pickWidgetAria, splitRootProps, type WrapperRootDOMProps } from '../../utils/root-props';\nimport { textFieldStyles, type TextFieldVariant } from './text-field-styles';\n\nexport interface TextFieldClassNames {\n  /** The root element, merged with `className`. */\n  root?: string;\n  /** The filled or outlined container around the label, input and icons. */\n  container?: string;\n  /** The floating label. */\n  label?: string;\n  /** The `<input>` or `<textarea>`. */\n  input?: string;\n  /** The leading icon's 48px box. */\n  leadingIcon?: string;\n  /** The trailing icon's 48px box. */\n  trailingIcon?: string;\n  /** The prefix text before the input. */\n  prefix?: string;\n  /** The suffix text after the input. */\n  suffix?: string;\n  /** The helper text below the field. */\n  supportingText?: string;\n  /** The error message below the field. */\n  errorText?: string;\n  /** The character counter below the field. */\n  counter?: string;\n  /** The built-in error icon. */\n  errorIcon?: string;\n  /** The outlined field's border (a `<fieldset>`, notched for the floated label). */\n  outline?: string;\n  /** The filled field's active indicator, the line along the container's bottom. */\n  activeIndicator?: string;\n}\n\n/** Words the text field announces; override them for other languages. */\nexport interface TextFieldLabels {\n  /** The error icon's name (M3: \"Error\"). @default \"Error\" */\n  error: string;\n  /**\n   * What screen readers hear for the character counter (M3 calls it the \"character count\").\n   * @default (count, max) => `Character count: ${count} of ${max}`\n   */\n  characterCount: (count: number, max: number) => string;\n}\n\nconst DEFAULT_LABELS: TextFieldLabels = {\n  error: 'Error',\n  characterCount: (count, max) => `Character count: ${count} of ${max}`,\n};\n\n/** Input types the browser draws its own format in when empty, which a resting label would cover. */\nconst FORMAT_SHOWING_TYPES = new Set(['date', 'time', 'datetime-local', 'month', 'week']);\n\ntype FieldState = 'disabled' | 'error-focus' | 'error-hover' | 'error' | 'focus' | 'hover' | 'rest';\n\n/** Props React Aria names with an `is` prefix; we use the HTML-style names instead. */\ntype RenamedAriaProps =\n  | 'isDisabled'\n  | 'isReadOnly'\n  | 'isRequired'\n  | 'isInvalid'\n  | 'label'\n  | 'description'\n  | 'inputElementType'\n  | 'value'\n  | 'defaultValue'\n  | 'onChange'\n  // Left out: the deprecated `validationState` (`invalid` replaces it) and React Aria's\n  // `excludeFromTabOrder` (`tabIndex={-1}` covers the rare case).\n  | 'validationState'\n  | 'excludeFromTabOrder';\n\ninterface TextFieldOwnProps\n  extends\n    Omit<AriaTextFieldProps<HTMLInputElement>, RenamedAriaProps>,\n    Omit<WrapperRootDOMProps, keyof AriaTextFieldProps<HTMLInputElement>>,\n    // The attributes that describe the input go to it, with React Aria's `aria-controls`,\n    // `aria-haspopup`, `aria-autocomplete` and `aria-activedescendant`: a field that opens its\n    // own suggestions can say so.\n    Pick<\n      AriaAttributes,\n      | 'aria-expanded'\n      | 'aria-required'\n      | 'aria-invalid'\n      | 'aria-readonly'\n      | 'aria-multiline'\n      | 'aria-placeholder'\n    > {\n  /** The `<input>`'s (or `<textarea>`'s) id, for a `<label for>` or an error summary's link. */\n  id?: string;\n  /** The container style: a filled surface or an outline. @default \"filled\" */\n  variant?: TextFieldVariant;\n  /**\n   * Web density, `0` to `-3`: each step takes 4px off the container (56px at 0, 44px at -3).\n   * Left out, the field takes the density of the nearest `ThemeProvider` or `ThemeScope`. M3\n   * asks for density to be the reader's choice rather than a default, so prefer setting it\n   * there, from a setting.\n   * @default 0\n   */\n  density?: Density;\n  /** The text, when controlled. */\n  value?: string;\n  /** The initial text, when uncontrolled. @default \"\" */\n  defaultValue?: string;\n  /** Called with the new text on every change. */\n  onChange?: (value: string) => void;\n  /**\n   * Helper text below the field. Replaced visually by the error message when invalid, and\n   * shown in the error colour while the field is invalid.\n   */\n  supportingText?: ReactNode;\n  /**\n   * Shows the supporting text only while the field has focus (M3 allows it \"persistently\n   * visible or visible only on focus\"). Its space is kept, and screen readers always get it.\n   * @default false\n   */\n  supportingTextOnFocus?: boolean;\n  /** Marks the field invalid (in addition to `validate` and native constraints). */\n  invalid?: boolean;\n  /** A value is required: adds the `*` to the label and native `required` validation. */\n  required?: boolean;\n  /** Disables the field: it can't be focused or edited. @default false */\n  disabled?: boolean;\n  /**\n   * The value can be read and copied but not changed. M3 styles it as a regular field and\n   * asks for it to be \"clearly labeled as read-only\", e.g. in the supporting text. The root\n   * gets `data-readonly`.\n   * @default false\n   */\n  readOnly?: boolean;\n  /** Decorative icon at the start, in a 48px box. */\n  leadingIcon?: ReactNode;\n  /**\n   * Icon or icon button at the end (e.g. clear, visibility toggle), in a 48px box. It takes\n   * the place of the error icon.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The icon shown at the end while the field is invalid and has no `trailingIcon` (M3\n   * strongly recommends one). Defaults to Material Symbols `error`, named by `labels.error`;\n   * `false` turns it off.\n   */\n  errorIcon?: ReactNode | false;\n  /** Text before the input, e.g. \"$\". Shown once the label floats. */\n  prefix?: ReactNode;\n  /**\n   * What screen readers hear for the prefix, e.g. \"US dollars\" for \"$\". The prefix is in the\n   * input's description either way; without this, its visible text is read.\n   */\n  prefixLabel?: string;\n  /** Text after the input, e.g. \"kg\". Shown once the label floats. */\n  suffix?: ReactNode;\n  /** What screen readers hear for the suffix, e.g. \"kilograms\" for \"kg\". */\n  suffixLabel?: string;\n  /**\n   * Renders a `<textarea>`. By default it's an M3 text area: a fixed height of `rows` lines\n   * that scrolls vertically, which M3 recommends over growing fields on the web.\n   * @default false\n   */\n  multiline?: boolean;\n  /**\n   * With `multiline`: grow with the content from `rows` up to `maxRows` (M3's multi-line\n   * field) instead of keeping a fixed height.\n   * @default false\n   */\n  autoGrow?: boolean;\n  /** Visible lines of a multiline field. @default 4, or 1 with autoGrow */\n  rows?: number;\n  /** With `autoGrow`: lines after which the field scrolls instead of growing. */\n  maxRows?: number;\n  /** Shows `count/maxLength` below the field. Defaults to `true` when `maxLength` is set. */\n  counter?: boolean;\n  /** Words the field announces, for other languages. */\n  labels?: Partial<TextFieldLabels>;\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?: TextFieldClassNames;\n  /** Inline styles for the root element. */\n  style?: CSSProperties;\n  /** The root element. Use `inputRef` for the input itself. */\n  ref?: Ref<HTMLDivElement>;\n  /** The `<input>` (or `<textarea>` when multiline), e.g. for form libraries. */\n  inputRef?: Ref<HTMLInputElement | HTMLTextAreaElement>;\n}\n\n/** A visible label, or an accessible name for fields without one. */\ntype TextFieldLabel =\n  | {\n      /** The visible label, which floats above the input once it has focus or a value. */\n      label: ReactNode;\n    }\n  | {\n      label?: undefined;\n      /** Accessible name when there's no visible label. */\n      'aria-label': string;\n    }\n  | {\n      label?: undefined;\n      /** The id of the element that names the field, when there's no visible label. */\n      'aria-labelledby': string;\n    };\n\nexport type TextFieldProps = TextFieldOwnProps & TextFieldLabel;\n\nconst INTERACTIVE = 'input, textarea, button, a, [role=\"button\"]';\n\n/**\n * M3 text field: filled or outlined, with a floating label, leading / trailing icons,\n * prefix and suffix, supporting text, error message and icon, character counter, and a\n * multiline form (a fixed-height text area, or a growing field with `autoGrow`). Built on React Aria `useTextField`, so labelling,\n * descriptions, `validate` and native constraints work as in React Aria.\n *\n * `className` and `style` go on the root; `inputRef` reaches the input.\n *\n * @example\n * <TextField label=\"Email\" type=\"email\" required supportingText=\"We never share it.\" />\n * <TextField variant=\"outlined\" label=\"Price\" prefix=\"$\" inputMode=\"decimal\" />\n */\nexport function TextField(props: TextFieldProps) {\n  const {\n    variant = 'filled',\n    density,\n    label,\n    value: valueProp,\n    defaultValue,\n    onChange,\n    supportingText,\n    supportingTextOnFocus = false,\n    errorMessage,\n    invalid,\n    required,\n    disabled = false,\n    readOnly,\n    leadingIcon,\n    trailingIcon,\n    errorIcon,\n    prefix,\n    prefixLabel,\n    suffix,\n    suffixLabel,\n    multiline = false,\n    autoGrow = false,\n    rows = autoGrow ? 1 : 4,\n    maxRows,\n    counter,\n    labels: labelsProp,\n    className,\n    classNames,\n    style,\n    ref,\n    inputRef,\n    ...otherProps\n  } = props;\n\n  // `data-*` attributes and the root's DOM attributes describe the component, so they go on the\n  // root with `className`; everything else (the input's ARIA, attributes and events) goes to\n  // the input via React Aria.\n  const { root: rootData, rest: ariaProps } = splitRootProps(otherProps, { wrapper: true });\n  const labels = { ...DEFAULT_LABELS, ...labelsProp };\n  const prefixId = useId();\n  const suffixId = useId();\n  const counterId = useId();\n\n  const [value, setValue] = useControlledState(valueProp, defaultValue ?? '', onChange);\n  const domInputRef = useObjectRef(inputRef as Ref<HTMLInputElement>);\n  const {\n    labelProps,\n    inputProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails,\n  } = useTextField(\n    {\n      ...ariaProps,\n      label,\n      description: supportingText,\n      errorMessage,\n      value,\n      onChange: setValue,\n      isInvalid: invalid,\n      isRequired: required,\n      isDisabled: disabled,\n      isReadOnly: readOnly,\n      inputElementType: multiline ? 'textarea' : 'input',\n    } as AriaTextFieldOptions<'input' | 'textarea'>,\n    domInputRef,\n  );\n  const { focusProps, isFocused } = useFocusRing({ isTextInput: true });\n  const { hoverProps, isHovered } = useHover({ isDisabled: disabled });\n\n  const growing = multiline && autoGrow;\n  // Grow a multiline field with its content, up to maxRows.\n  useLayoutEffect(() => {\n    const element = domInputRef.current as HTMLTextAreaElement | null;\n    if (!growing || !element) return;\n    const fit = () => {\n      element.style.height = 'auto';\n      const lineHeight = Number.parseFloat(getComputedStyle(element).lineHeight) || 24;\n      const max = maxRows ? lineHeight * maxRows : Number.POSITIVE_INFINITY;\n      element.style.height = `${Math.min(element.scrollHeight, max)}px`;\n      element.style.overflowY = element.scrollHeight > max ? 'auto' : 'hidden';\n    };\n    if (element.getClientRects().length > 0 || typeof ResizeObserver === 'undefined') {\n      fit();\n      return;\n    }\n    // Out of sight (`display: none` above it: a closed tab or panel), it has no height to read,\n    // and set to its 0px it stayed invisible once shown. It keeps its rows until it shows.\n    element.style.height = '';\n    const observer = new ResizeObserver(() => {\n      if (element.getClientRects().length === 0) return;\n      observer.disconnect();\n      fit();\n    });\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [value, growing, maxRows, domInputRef]);\n\n  const hasLabel = label !== undefined && label !== null;\n  const floated =\n    hasLabel && (isFocused || value.length > 0 || FORMAT_SHOWING_TYPES.has(ariaProps.type ?? ''));\n  const state: FieldState = disabled\n    ? 'disabled'\n    : isInvalid\n      ? isFocused\n        ? 'error-focus'\n        : isHovered\n          ? 'error-hover'\n          : 'error'\n      : isFocused\n        ? 'focus'\n        : isHovered\n          ? 'hover'\n          : 'rest';\n\n  const resolvedError =\n    typeof errorMessage === 'function'\n      ? errorMessage({ isInvalid, validationErrors, validationDetails })\n      : (errorMessage ?? validationErrors.join(' '));\n  const showError = isInvalid && Boolean(resolvedError);\n  const maxLength = ariaProps.maxLength;\n  const showCounter = maxLength !== undefined && counter !== false;\n  const showErrorIcon = isInvalid && !trailingIcon && errorIcon !== false;\n\n  const styles = textFieldStyles({\n    variant,\n    hasLabel,\n    hasLeadingIcon: Boolean(leadingIcon),\n    hasTrailingIcon: Boolean(trailingIcon) || showErrorIcon,\n    multiline,\n    fixedHeight: multiline && !autoGrow,\n    supportingTextOnFocus,\n  });\n  // The affixes and the counter join React Aria's description (supporting text, then error).\n  const describedBy =\n    [\n      prefix ? prefixId : null,\n      suffix ? suffixId : null,\n      renderedDescription(inputProps['aria-describedby'], [\n        !supportingText && descriptionProps.id,\n        !showError && errorMessageProps.id,\n      ]),\n      showCounter ? counterId : null,\n    ]\n      .filter(Boolean)\n      .join(' ') || undefined;\n\n  // Pressing the container (not an icon button) focuses the input, like Compose.\n  const focusInput = (event: PointerEvent<HTMLDivElement>) => {\n    if ((event.target as Element).closest(INTERACTIVE) || disabled) return;\n    event.preventDefault();\n    // The field is where the press landed: the page never scrolls to it (2026-10-15).\n    domInputRef.current?.focus({ preventScroll: true });\n  };\n  // Chrome's touch adjustment can send a tap's pointer events to the input while the mouse\n  // events it emulates, and the click, land on the padding beside it, so the input never\n  // takes focus (2026-10-17). A click on the field that leaves the input unfocused focuses it.\n  // The mouse never needs it: its press on the padding already focused the input.\n  const focusInputOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    const target = event.target as Element;\n    if (\n      (event.nativeEvent as globalThis.PointerEvent).pointerType === 'mouse' ||\n      !event.currentTarget.contains(target) ||\n      target.closest(INTERACTIVE) ||\n      disabled ||\n      document.activeElement === domInputRef.current\n    ) {\n      return;\n    }\n    domInputRef.current?.focus({ preventScroll: true });\n  };\n\n  // Part of the accessible name, as M3 asks (\"The accessibility label must include the\n  // asterisk\"); the copy in the outline's notch is hidden with the fieldset.\n  const requiredMark = required ? ' *' : null;\n  const Input = multiline ? 'textarea' : 'input';\n\n  return (\n    <div\n      {...rootData}\n      ref={ref}\n      style={style}\n      className={styles.root({ class: cn(classNames?.root, className) })}\n      data-tokens={mergeDataTokens('md-comp-text-field', rootData)}\n      data-variant={variant}\n      {...densityAttribute(density)}\n      data-field-state={state}\n      data-focused={isFocused || undefined}\n      data-hovered={(isHovered && !disabled) || undefined}\n      data-invalid={isInvalid || undefined}\n      data-disabled={disabled || undefined}\n      data-readonly={readOnly || undefined}\n      data-floated={floated || undefined}\n    >\n      <div\n        {...hoverProps}\n        onPointerDown={focusInput}\n        onClick={focusInputOnClick}\n        data-slot=\"container\"\n        className={styles.container({ class: classNames?.container })}\n      >\n        {variant === 'outlined' && (\n          <fieldset\n            aria-hidden=\"true\"\n            data-slot=\"outline\"\n            className={styles.outline({ class: classNames?.outline })}\n          >\n            {hasLabel && (\n              <legend className={styles.notch()}>\n                <span className={styles.notchClip()}>\n                  <span className={styles.notchText()}>\n                    {label}\n                    {requiredMark}\n                  </span>\n                </span>\n              </legend>\n            )}\n          </fieldset>\n        )}\n        {leadingIcon && (\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"leading-icon\"\n            className={styles.icon({ class: cn(styles.leadingIcon(), classNames?.leadingIcon) })}\n          >\n            {leadingIcon}\n          </span>\n        )}\n        <div className={styles.field()}>\n          {prefix && (\n            <span\n              id={prefixId}\n              className={styles.affix({ class: cn(styles.prefix(), classNames?.prefix) })}\n            >\n              <Affix text={prefix} label={prefixLabel} />\n            </span>\n          )}\n          <Input\n            {...(mergeProps(inputProps, pickWidgetAria(ariaProps), focusProps) as object)}\n            aria-describedby={describedBy}\n            ref={domInputRef as Ref<never>}\n            data-slot=\"input\"\n            rows={multiline ? rows : undefined}\n            className={styles.input({ class: classNames?.input })}\n          />\n          {suffix && (\n            <span\n              id={suffixId}\n              className={styles.affix({ class: cn(styles.suffix(), classNames?.suffix) })}\n            >\n              <Affix text={suffix} label={suffixLabel} />\n            </span>\n          )}\n        </div>\n        {trailingIcon ? (\n          <span\n            data-slot=\"trailing-icon\"\n            className={styles.icon({\n              class: cn(styles.trailingIcon(), classNames?.trailingIcon),\n            })}\n          >\n            {trailingIcon}\n          </span>\n        ) : showErrorIcon ? (\n          <span className={styles.icon({ class: styles.trailingIcon() })}>\n            <FieldErrorIcon\n              label={labels.error}\n              icon={errorIcon}\n              className={styles.errorIcon({ class: classNames?.errorIcon })}\n            />\n          </span>\n        ) : null}\n        {hasLabel && (\n          <FieldLabel\n            {...labelProps}\n            data-slot=\"label\"\n            className={styles.label({ class: classNames?.label })}\n          >\n            {label}\n            {requiredMark}\n          </FieldLabel>\n        )}\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"active-indicator\"\n          className={styles.indicator({ class: classNames?.activeIndicator })}\n        />\n      </div>\n      {(supportingText || showError || showCounter) && (\n        <div className={styles.supporting()}>\n          {supportingText && (\n            <SupportingText\n              {...descriptionProps}\n              data-slot=\"supporting-text\"\n              className={cn(\n                styles.supportingText({\n                  class: cn(styles.supportingTextColor(), classNames?.supportingText),\n                }),\n                showError && 'sr-only',\n              )}\n            >\n              {supportingText}\n            </SupportingText>\n          )}\n          {showError && (\n            <ErrorText\n              {...errorMessageProps}\n              className={styles.supportingText({\n                supportingTextOnFocus: false,\n                class: classNames?.errorText,\n              })}\n            >\n              {resolvedError}\n            </ErrorText>\n          )}\n          {showCounter && (\n            <CharacterCounter\n              id={counterId}\n              count={value.length}\n              max={maxLength}\n              label={labels.characterCount(value.length, maxLength)}\n              className={styles.counter({ class: classNames?.counter })}\n            />\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** An affix's visible text, read as its `label` when there is one. */\nfunction Affix({ text, label }: { text: ReactNode; label: string | undefined }) {\n  if (label === undefined) return text;\n  return (\n    <>\n      <span aria-hidden=\"true\">{text}</span>\n      <span className=\"sr-only\">{label}</span>\n    </>\n  );\n}\n"],"mappings":"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"}

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

@@ -83,7 +83,7 @@ const floatingToolbarStyles = tv({
 				root: "min-h-[64px] flex-row",
 				items: "flex-row gap-[8px] ps-[4px] pe-[4px]",
 				collapsibleItems: "w-max shrink-0",
-				collapse: "data-collapsed:w-0",
+				collapse: "data-collapsed:w-0 data-collapsed:overflow-x-clip",
 				clip: "w-full flex-row [clip-path:inset(-12px_-2px)]",
 				toolbarSlot: "h-[64px] w-(--m3-toolbar-size) flex-row",
 				surface: "h-[64px] w-(--m3-toolbar-size) shrink-0 data-collapsed:w-0",
@@ -94,7 +94,7 @@ const floatingToolbarStyles = tv({
 				root: "min-w-[64px] flex-col",
 				items: "flex-col gap-[8px] pt-[4px] pb-[4px]",
 				collapsibleItems: "h-max shrink-0",
-				collapse: "flex-col data-collapsed:h-0",
+				collapse: "flex-col data-collapsed:h-0 data-collapsed:overflow-y-clip",
 				clip: "h-full flex-col [clip-path:inset(-2px_-12px)]",
 				toolbarSlot: "h-(--m3-toolbar-size) w-[64px] flex-col",
 				surface: "h-(--m3-toolbar-size) w-[64px] shrink-0 data-collapsed:h-0",

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

@@ -1 +1 @@
-{"version":3,"file":"toolbar-styles.js","names":[],"sources":["../../../src/components/toolbar/toolbar-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow the M3 Expressive spec and its tokens (the FloatingToolbar / DockedToolbar\n * token files), with Compose Material 3's FloatingToolbar.kt and AppBar.kt's\n * FlexibleBottomAppBar as the recipe.\n *\n * Docked: 64px, `surface-container`, square corners, no elevation, 16px at each end; items\n * sit 32px apart in the centre (the default) or spread out (space-between, for compact\n * windows).\n *\n * Floating: at least 64px across, full corners, 8px padding, `surface-container` (standard)\n * or `primary-container` (vibrant), level 1 by default (M3: floating toolbars have\n * elevation by default). Content is `on-surface-variant` (standard, the icon-button role)\n * or `on-primary-container` (vibrant). Compose's icon buttons take up 48px of layout while\n * ours take 40px (the 48px touch target is overlaid), so every content group adds 4px at\n * its ends and 8px between items, which reproduces Compose's spacing for icon buttons.\n * Leading / trailing content expands on the fast spatial spring and collapses on the fast\n * effects curve, its box's width (or height) in px between 0 and the content's measured\n * size, so the root's size follows it without transforms. Collapsed content stays in the tab order and\n * the accessibility tree, clipped to nothing, and focusing it expands the toolbar.\n *\n * Exiting on scroll (`visible={false}`): the toolbar slides off its edge on the fast\n * spatial spring (a `transform` set only while hidden, so it composes with Tailwind's\n * `translate-*` utilities); reduced motion fades it instead.\n *\n * With a FAB: the toolbar is level 1 expanded and level 0 collapsed, 8px from the FAB.\n * Collapsing shrinks the toolbar's width to 0 towards the FAB while the FAB grows from 56px\n * to 80px; the component keeps its expanded size, as Compose's layout does.\n *\n * Container colours and the floating toolbar's corners come from the component tokens\n * (`toolbar-tokens.ts`, `--md-comp-toolbar-docked-*` and `--md-comp-toolbar-floating-*`):\n * the roots carry `data-tokens`, the floating one also `data-color`. A consumer class still\n * wins in `cn()`.\n *\n * Every class is written out in full so Tailwind can find it.\n */\n\nconst spatialFast = [\n  '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]',\n  '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]',\n];\n\n/** The root's exit-on-scroll motion; each edge variant sets the hidden transform. */\nconst exitMotion = [\n  'data-hidden:invisible motion-reduce:data-hidden:opacity-0 motion-reduce:data-hidden:[transform:none]',\n  '[transition-property:transform,opacity,visibility]',\n  '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration),max(var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration))]',\n  '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),linear]',\n];\n\n/** Where a hidden toolbar goes: past its edge plus the 24px margin of a vertical toolbar. */\nconst exitEdges = {\n  bottom: { root: 'data-hidden:[transform:translateY(calc(100%+24px))]' },\n  top: { root: 'data-hidden:[transform:translateY(calc(-100%-24px))]' },\n  start: {\n    root: 'data-hidden:[transform:translateX(calc(-100%-24px))] rtl:data-hidden:[transform:translateX(calc(100%+24px))]',\n  },\n  end: {\n    root: 'data-hidden:[transform:translateX(calc(100%+24px))] rtl:data-hidden:[transform:translateX(calc(-100%-24px))]',\n  },\n} as const;\n\n/** Variant definitions for {@link DockedToolbar}; extend them to add variants. */\nexport const dockedToolbarStyles = tv({\n  slots: {\n    root: [\n      'flex h-[64px] w-full items-center bg-[var(--_md-comp-toolbar-docked-container-color)] ps-[16px] pe-[16px]',\n      // Forced colours paint the container as Canvas: a CanvasText line marks its top edge\n      // against the page (2026-10-15).\n      'forced-colors:border-t forced-colors:border-solid forced-colors:border-[CanvasText]',\n      ...exitMotion,\n      'data-hidden:[transform:translateY(100%)]',\n    ],\n  },\n  variants: {\n    arrangement: {\n      'space-between': { root: 'justify-between' },\n      centered: { root: 'justify-center gap-[32px]' },\n    },\n    // As the floating toolbar's (2026-10-15): vibrant is primary-container (its own token,\n    // scoped by `data-color`, 2026-10-17), and standard icon buttons take its content colour.\n    color: {\n      standard: { root: 'text-on-surface-variant' },\n      vibrant: {\n        root: 'text-on-primary-container [--md-comp-icon-button-icon-color:currentColor]',\n      },\n    },\n  },\n  defaultVariants: { arrangement: 'centered', color: 'standard' },\n});\n\n/** Variant definitions for {@link FloatingToolbar}; extend them to add colour styles. */\nexport const floatingToolbarStyles = tv({\n  slots: {\n    // Collapsing and expanding resize its parts in place, so none of them is ever the\n    // browser's scroll anchor (which would scroll the page to follow it). The root itself\n    // may be: its start edge stays put while it resizes, whereas excluding it hands the\n    // anchor to the content after it, which moves by the whole change (2026-10-15).\n    root: [\n      'inline-flex shrink-0 items-center justify-center [overflow-anchor:auto] **:[overflow-anchor:none]',\n      ...exitMotion,\n    ],\n    // A group of items (main, leading or trailing content).\n    items: 'flex shrink-0 items-center',\n    collapsibleItems: '',\n    // Collapsible leading / trailing content: a box that animates its width (or height) in\n    // px between 0 and the content's measured size (2026-10-17, as Compose's\n    // `expandHorizontally`), so expanding shows the spatial spring's overshoot, which a\n    // 0fr ↔ 1fr track couldn't. Collapsing uses the effects spring, which doesn't\n    // overshoot, because a size can't overshoot below 0 and would bounce back open by a\n    // pixel or two. Before it is measured (on the server) the box takes the content's\n    // natural size, or 0 collapsed. Collapsed content stays focusable and in the\n    // accessibility tree.\n    collapse: [\n      'flex shrink-0',\n      '[transition-property:width,height]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing)]',\n      'data-collapsed:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]',\n      // The content itself changed size (a web font arriving): follow it at once.\n      'data-resized:[transition-duration:0s]',\n    ],\n    // Clips the content horizontally (or vertically) while it collapses, leaving room for\n    // focus rings and touch targets on the other axis. Once the track has closed (a delay\n    // as long as the collapse) it clips everything, so no sliver stays visible.\n    clip: [\n      'flex min-h-0 min-w-0 data-collapsed:[clip-path:inset(50%)]',\n      '[transition-property:clip-path] [transition-duration:0s]',\n      'data-collapsed:[transition-delay:var(--md-sys-motion-spring-effects-fast-duration)]',\n      // Under reduced motion the track closes at once, and so does the clip.\n      'motion-reduce:data-collapsed:[transition-delay:0s]',\n    ],\n    // FAB layout: the toolbar's slot keeps the expanded width while the surface shrinks,\n    // collapsing on the effects spring for the same reason as `collapse`.\n    toolbarSlot: 'flex shrink-0',\n    surface: [\n      'overflow-hidden rounded-[var(--_md-comp-toolbar-floating-container-shape)] opacity-100',\n      // Forced colours drop the container and its shadow: a 1px CanvasText boundary instead,\n      // as menus and FABs (2026-10-15).\n      'forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n      'data-collapsed:opacity-0 data-collapsed:shadow-elevation-0',\n      'data-resized:[transition-duration:0s]',\n      // Width, height and shadow move on the spatial spring; the surface also fades on the\n      // fast effects spring, so the last pixels of a collapse never show as a thin line.\n      // Collapsed, it stays focusable and in the accessibility tree, clipped to nothing.\n      '[transition-property:width,height,box-shadow,opacity]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]',\n      'data-collapsed:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]',\n    ],\n    content: 'flex items-center',\n    fabSlot: 'flex shrink-0 items-center',\n    fabBox: [\n      'flex size-[56px] shrink-0 data-collapsed:size-[80px]',\n      '[transition-property:width,height]',\n      ...spatialFast,\n    ],\n  },\n  variants: {\n    orientation: {\n      horizontal: {\n        root: 'min-h-[64px] flex-row',\n        items: 'flex-row gap-[8px] ps-[4px] pe-[4px]',\n        // Collapsible content keeps its natural width while its box closes (it's measured).\n        collapsibleItems: 'w-max shrink-0',\n        collapse: 'data-collapsed:w-0',\n        clip: 'w-full flex-row [clip-path:inset(-12px_-2px)]',\n        toolbarSlot: 'h-[64px] w-(--m3-toolbar-size) flex-row',\n        surface: 'h-[64px] w-(--m3-toolbar-size) shrink-0 data-collapsed:w-0',\n        content: 'h-full w-max flex-row gap-[8px] ps-[12px] pe-[12px]',\n        fabSlot: 'w-[56px] flex-row',\n      },\n      vertical: {\n        root: 'min-w-[64px] flex-col',\n        items: 'flex-col gap-[8px] pt-[4px] pb-[4px]',\n        collapsibleItems: 'h-max shrink-0',\n        collapse: 'flex-col data-collapsed:h-0',\n        clip: 'h-full flex-col [clip-path:inset(-2px_-12px)]',\n        toolbarSlot: 'h-(--m3-toolbar-size) w-[64px] flex-col',\n        surface: 'h-(--m3-toolbar-size) w-[64px] shrink-0 data-collapsed:h-0',\n        content: 'h-max w-full flex-col gap-[8px] pt-[12px] pb-[12px]',\n        fabSlot: 'h-[56px] flex-col',\n      },\n    },\n    color: {\n      standard: { root: 'text-on-surface-variant' },\n      // Standard and outlined icon buttons take the vibrant content colour.\n      vibrant: {\n        root: 'text-on-primary-container [--md-comp-icon-button-icon-color:currentColor]',\n      },\n    },\n    /** Level 1 by default; turn it off over visually distinct content. */\n    elevated: { true: {}, false: {} },\n    exitEdge: exitEdges,\n    /** Paints the container on the root (no FAB) or on the toolbar surface (with a FAB). */\n    hasFab: {\n      false: {\n        root: [\n          'rounded-[var(--_md-comp-toolbar-floating-container-shape)] bg-[var(--_md-comp-toolbar-floating-container-color)] p-[8px]',\n          'forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n        ],\n      },\n      true: {\n        root: 'gap-[8px]',\n        surface: 'bg-[var(--_md-comp-toolbar-floating-container-color)]',\n      },\n    },\n    /** The side of the toolbar the FAB sits on (logical: start / top or end / bottom). */\n    fabAt: {\n      start: { toolbarSlot: 'justify-start', fabSlot: 'justify-start' },\n      end: { toolbarSlot: 'justify-end', fabSlot: 'justify-end' },\n    },\n  },\n  compoundVariants: [\n    { hasFab: false, elevated: true, class: { root: 'shadow-elevation-1' } },\n    // With a FAB, the toolbar's own surface is level 1 expanded and level 0 collapsed.\n    { hasFab: true, elevated: true, class: { surface: 'shadow-elevation-1' } },\n    // Fixed at the FAB's largest size, as Compose's layout: the FAB's spring overshoot\n    // (80 → 82px) spills over the edges instead of resizing the root and moving the page.\n    { hasFab: true, orientation: 'horizontal', class: { root: 'h-[80px]' } },\n    { hasFab: true, orientation: 'vertical', class: { root: 'w-[80px]' } },\n    // The FAB comes first visually but after the toolbar in reading order, as in Compose.\n    {\n      hasFab: true,\n      fabAt: 'start',\n      orientation: 'horizontal',\n      class: { root: 'flex-row-reverse' },\n    },\n    { hasFab: true, fabAt: 'start', orientation: 'vertical', class: { root: 'flex-col-reverse' } },\n  ],\n  defaultVariants: {\n    orientation: 'horizontal',\n    color: 'standard',\n    elevated: true,\n    exitEdge: 'bottom',\n    hasFab: false,\n    fabAt: 'end',\n  },\n});\n\n/**\n * Collapsing content is anchored like Compose's AnimatedVisibility: horizontally, leading\n * content expands from the start and shrinks towards the end (trailing: the reverse);\n * vertically, leading content stays at the bottom and trailing content at the top.\n */\nexport const toolbarCollapseAnchor = tv({\n  base: '',\n  variants: {\n    slot: { leading: '', trailing: '' },\n    orientation: { horizontal: '', vertical: '' },\n  },\n  compoundVariants: [\n    {\n      slot: 'leading',\n      orientation: 'horizontal',\n      class: 'justify-start data-collapsed:justify-end',\n    },\n    {\n      slot: 'trailing',\n      orientation: 'horizontal',\n      class: 'justify-end data-collapsed:justify-start',\n    },\n    { slot: 'leading', orientation: 'vertical', class: 'justify-end' },\n    { slot: 'trailing', orientation: 'vertical', class: 'justify-start' },\n  ],\n});\n\n/** Variant definitions for {@link ToolbarFab}. */\nexport const toolbarFabStyles = tv({\n  slots: {\n    root: [\n      'inline-flex size-full cursor-pointer items-center justify-center select-none',\n      'rounded-[var(--_md-comp-toolbar-floating-fab-container-shape)]',\n      'bg-[var(--_md-comp-toolbar-floating-fab-container-color)] text-[color:var(--_md-comp-toolbar-floating-fab-icon-color)]',\n      'state-layer focus-ring container-motion',\n      'forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n    ],\n    icon: 'inline-flex size-[24px] shrink-0 items-center justify-center [&>svg]:size-full',\n  },\n  variants: {\n    // The colours come from the FAB's tokens (`toolbarFabTokenSet`), picked by `data-color`.\n    color: { standard: {}, vibrant: {} },\n    /**\n     * Like `Fab`: level 2 (Compose's toolbar FAB: hover 3, pressed 2), level 1 (hover 2,\n     * pressed 1), or level 0 for a flat FAB. The hover level never applies while pressed.\n     */\n    elevation: {\n      default: { root: 'shadow-elevation-2 data-hovered:not-data-pressed:shadow-elevation-3' },\n      lowered: { root: 'shadow-elevation-1 data-hovered:not-data-pressed:shadow-elevation-2' },\n      flat: { root: 'shadow-elevation-0' },\n    },\n  },\n  defaultVariants: { color: 'standard', elevation: 'default' },\n});\n\n/**\n * The variants of {@link dockedToolbarStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type DockedToolbarStyleProps = VariantProps<typeof dockedToolbarStyles>;\nexport type DockedToolbarArrangement = NonNullable<DockedToolbarStyleProps['arrangement']>;\nexport type DockedToolbarColor = NonNullable<DockedToolbarStyleProps['color']>;\n/**\n * The variants of {@link floatingToolbarStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type FloatingToolbarStyleProps = VariantProps<typeof floatingToolbarStyles>;\nexport type FloatingToolbarColor = NonNullable<FloatingToolbarStyleProps['color']>;\nexport type ToolbarOrientation = NonNullable<FloatingToolbarStyleProps['orientation']>;\nexport type ToolbarExitEdge = NonNullable<FloatingToolbarStyleProps['exitEdge']>;\n"],"mappings":"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"}
+{"version":3,"file":"toolbar-styles.js","names":[],"sources":["../../../src/components/toolbar/toolbar-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow the M3 Expressive spec and its tokens (the FloatingToolbar / DockedToolbar\n * token files), with Compose Material 3's FloatingToolbar.kt and AppBar.kt's\n * FlexibleBottomAppBar as the recipe.\n *\n * Docked: 64px, `surface-container`, square corners, no elevation, 16px at each end; items\n * sit 32px apart in the centre (the default) or spread out (space-between, for compact\n * windows).\n *\n * Floating: at least 64px across, full corners, 8px padding, `surface-container` (standard)\n * or `primary-container` (vibrant), level 1 by default (M3: floating toolbars have\n * elevation by default). Content is `on-surface-variant` (standard, the icon-button role)\n * or `on-primary-container` (vibrant). Compose's icon buttons take up 48px of layout while\n * ours take 40px (the 48px touch target is overlaid), so every content group adds 4px at\n * its ends and 8px between items, which reproduces Compose's spacing for icon buttons.\n * Leading / trailing content expands on the fast spatial spring and collapses on the fast\n * effects curve, its box's width (or height) in px between 0 and the content's measured\n * size, so the root's size follows it without transforms. Collapsed content stays in the tab order and\n * the accessibility tree, clipped to nothing, and focusing it expands the toolbar.\n *\n * Exiting on scroll (`visible={false}`): the toolbar slides off its edge on the fast\n * spatial spring (a `transform` set only while hidden, so it composes with Tailwind's\n * `translate-*` utilities); reduced motion fades it instead.\n *\n * With a FAB: the toolbar is level 1 expanded and level 0 collapsed, 8px from the FAB.\n * Collapsing shrinks the toolbar's width to 0 towards the FAB while the FAB grows from 56px\n * to 80px; the component keeps its expanded size, as Compose's layout does.\n *\n * Container colours and the floating toolbar's corners come from the component tokens\n * (`toolbar-tokens.ts`, `--md-comp-toolbar-docked-*` and `--md-comp-toolbar-floating-*`):\n * the roots carry `data-tokens`, the floating one also `data-color`. A consumer class still\n * wins in `cn()`.\n *\n * Every class is written out in full so Tailwind can find it.\n */\n\nconst spatialFast = [\n  '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]',\n  '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]',\n];\n\n/** The root's exit-on-scroll motion; each edge variant sets the hidden transform. */\nconst exitMotion = [\n  'data-hidden:invisible motion-reduce:data-hidden:opacity-0 motion-reduce:data-hidden:[transform:none]',\n  '[transition-property:transform,opacity,visibility]',\n  '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration),max(var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration))]',\n  '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),linear]',\n];\n\n/** Where a hidden toolbar goes: past its edge plus the 24px margin of a vertical toolbar. */\nconst exitEdges = {\n  bottom: { root: 'data-hidden:[transform:translateY(calc(100%+24px))]' },\n  top: { root: 'data-hidden:[transform:translateY(calc(-100%-24px))]' },\n  start: {\n    root: 'data-hidden:[transform:translateX(calc(-100%-24px))] rtl:data-hidden:[transform:translateX(calc(100%+24px))]',\n  },\n  end: {\n    root: 'data-hidden:[transform:translateX(calc(100%+24px))] rtl:data-hidden:[transform:translateX(calc(-100%-24px))]',\n  },\n} as const;\n\n/** Variant definitions for {@link DockedToolbar}; extend them to add variants. */\nexport const dockedToolbarStyles = tv({\n  slots: {\n    root: [\n      'flex h-[64px] w-full items-center bg-[var(--_md-comp-toolbar-docked-container-color)] ps-[16px] pe-[16px]',\n      // Forced colours paint the container as Canvas: a CanvasText line marks its top edge\n      // against the page (2026-10-15).\n      'forced-colors:border-t forced-colors:border-solid forced-colors:border-[CanvasText]',\n      ...exitMotion,\n      'data-hidden:[transform:translateY(100%)]',\n    ],\n  },\n  variants: {\n    arrangement: {\n      'space-between': { root: 'justify-between' },\n      centered: { root: 'justify-center gap-[32px]' },\n    },\n    // As the floating toolbar's (2026-10-15): vibrant is primary-container (its own token,\n    // scoped by `data-color`, 2026-10-17), and standard icon buttons take its content colour.\n    color: {\n      standard: { root: 'text-on-surface-variant' },\n      vibrant: {\n        root: 'text-on-primary-container [--md-comp-icon-button-icon-color:currentColor]',\n      },\n    },\n  },\n  defaultVariants: { arrangement: 'centered', color: 'standard' },\n});\n\n/** Variant definitions for {@link FloatingToolbar}; extend them to add colour styles. */\nexport const floatingToolbarStyles = tv({\n  slots: {\n    // Collapsing and expanding resize its parts in place, so none of them is ever the\n    // browser's scroll anchor (which would scroll the page to follow it). The root itself\n    // may be: its start edge stays put while it resizes, whereas excluding it hands the\n    // anchor to the content after it, which moves by the whole change (2026-10-15).\n    root: [\n      'inline-flex shrink-0 items-center justify-center [overflow-anchor:auto] **:[overflow-anchor:none]',\n      ...exitMotion,\n    ],\n    // A group of items (main, leading or trailing content).\n    items: 'flex shrink-0 items-center',\n    collapsibleItems: '',\n    // Collapsible leading / trailing content: a box that animates its width (or height) in\n    // px between 0 and the content's measured size (2026-10-17, as Compose's\n    // `expandHorizontally`), so expanding shows the spatial spring's overshoot, which a\n    // 0fr ↔ 1fr track couldn't. Collapsing uses the effects spring, which doesn't\n    // overshoot, because a size can't overshoot below 0 and would bounce back open by a\n    // pixel or two. Before it is measured (on the server) the box takes the content's\n    // natural size, or 0 collapsed. Collapsed content stays focusable and in the\n    // accessibility tree.\n    collapse: [\n      'flex shrink-0',\n      '[transition-property:width,height]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing)]',\n      'data-collapsed:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]',\n      // The content itself changed size (a web font arriving): follow it at once.\n      'data-resized:[transition-duration:0s]',\n    ],\n    // Clips the content horizontally (or vertically) while it collapses, leaving room for\n    // focus rings and touch targets on the other axis. Once the track has closed (a delay\n    // as long as the collapse) it clips everything, so no sliver stays visible.\n    clip: [\n      'flex min-h-0 min-w-0 data-collapsed:[clip-path:inset(50%)]',\n      '[transition-property:clip-path] [transition-duration:0s]',\n      'data-collapsed:[transition-delay:var(--md-sys-motion-spring-effects-fast-duration)]',\n      // Under reduced motion the track closes at once, and so does the clip.\n      'motion-reduce:data-collapsed:[transition-delay:0s]',\n    ],\n    // FAB layout: the toolbar's slot keeps the expanded width while the surface shrinks,\n    // collapsing on the effects spring for the same reason as `collapse`.\n    toolbarSlot: 'flex shrink-0',\n    surface: [\n      'overflow-hidden rounded-[var(--_md-comp-toolbar-floating-container-shape)] opacity-100',\n      // Forced colours drop the container and its shadow: a 1px CanvasText boundary instead,\n      // as menus and FABs (2026-10-15).\n      'forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n      'data-collapsed:opacity-0 data-collapsed:shadow-elevation-0',\n      'data-resized:[transition-duration:0s]',\n      // Width, height and shadow move on the spatial spring; the surface also fades on the\n      // fast effects spring, so the last pixels of a collapse never show as a thin line.\n      // Collapsed, it stays focusable and in the accessibility tree, clipped to nothing.\n      '[transition-property:width,height,box-shadow,opacity]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]',\n      'data-collapsed:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]',\n    ],\n    content: 'flex items-center',\n    fabSlot: 'flex shrink-0 items-center',\n    fabBox: [\n      'flex size-[56px] shrink-0 data-collapsed:size-[80px]',\n      '[transition-property:width,height]',\n      ...spatialFast,\n    ],\n  },\n  variants: {\n    orientation: {\n      horizontal: {\n        root: 'min-h-[64px] flex-row',\n        items: 'flex-row gap-[8px] ps-[4px] pe-[4px]',\n        // Collapsible content keeps its natural width while its box closes (it's measured).\n        collapsibleItems: 'w-max shrink-0',\n        // Clipped on its axis while collapsed: the clip slot's `clip-path` hides the content\n        // but leaves it in the scrollable area, so a collapsed toolbar by the window's edge\n        // scrolled the page sideways (right to left, its leading content past the start edge).\n        collapse: 'data-collapsed:w-0 data-collapsed:overflow-x-clip',\n        clip: 'w-full flex-row [clip-path:inset(-12px_-2px)]',\n        toolbarSlot: 'h-[64px] w-(--m3-toolbar-size) flex-row',\n        surface: 'h-[64px] w-(--m3-toolbar-size) shrink-0 data-collapsed:w-0',\n        content: 'h-full w-max flex-row gap-[8px] ps-[12px] pe-[12px]',\n        fabSlot: 'w-[56px] flex-row',\n      },\n      vertical: {\n        root: 'min-w-[64px] flex-col',\n        items: 'flex-col gap-[8px] pt-[4px] pb-[4px]',\n        collapsibleItems: 'h-max shrink-0',\n        collapse: 'flex-col data-collapsed:h-0 data-collapsed:overflow-y-clip',\n        clip: 'h-full flex-col [clip-path:inset(-2px_-12px)]',\n        toolbarSlot: 'h-(--m3-toolbar-size) w-[64px] flex-col',\n        surface: 'h-(--m3-toolbar-size) w-[64px] shrink-0 data-collapsed:h-0',\n        content: 'h-max w-full flex-col gap-[8px] pt-[12px] pb-[12px]',\n        fabSlot: 'h-[56px] flex-col',\n      },\n    },\n    color: {\n      standard: { root: 'text-on-surface-variant' },\n      // Standard and outlined icon buttons take the vibrant content colour.\n      vibrant: {\n        root: 'text-on-primary-container [--md-comp-icon-button-icon-color:currentColor]',\n      },\n    },\n    /** Level 1 by default; turn it off over visually distinct content. */\n    elevated: { true: {}, false: {} },\n    exitEdge: exitEdges,\n    /** Paints the container on the root (no FAB) or on the toolbar surface (with a FAB). */\n    hasFab: {\n      false: {\n        root: [\n          'rounded-[var(--_md-comp-toolbar-floating-container-shape)] bg-[var(--_md-comp-toolbar-floating-container-color)] p-[8px]',\n          'forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n        ],\n      },\n      true: {\n        root: 'gap-[8px]',\n        surface: 'bg-[var(--_md-comp-toolbar-floating-container-color)]',\n      },\n    },\n    /** The side of the toolbar the FAB sits on (logical: start / top or end / bottom). */\n    fabAt: {\n      start: { toolbarSlot: 'justify-start', fabSlot: 'justify-start' },\n      end: { toolbarSlot: 'justify-end', fabSlot: 'justify-end' },\n    },\n  },\n  compoundVariants: [\n    { hasFab: false, elevated: true, class: { root: 'shadow-elevation-1' } },\n    // With a FAB, the toolbar's own surface is level 1 expanded and level 0 collapsed.\n    { hasFab: true, elevated: true, class: { surface: 'shadow-elevation-1' } },\n    // Fixed at the FAB's largest size, as Compose's layout: the FAB's spring overshoot\n    // (80 → 82px) spills over the edges instead of resizing the root and moving the page.\n    { hasFab: true, orientation: 'horizontal', class: { root: 'h-[80px]' } },\n    { hasFab: true, orientation: 'vertical', class: { root: 'w-[80px]' } },\n    // The FAB comes first visually but after the toolbar in reading order, as in Compose.\n    {\n      hasFab: true,\n      fabAt: 'start',\n      orientation: 'horizontal',\n      class: { root: 'flex-row-reverse' },\n    },\n    { hasFab: true, fabAt: 'start', orientation: 'vertical', class: { root: 'flex-col-reverse' } },\n  ],\n  defaultVariants: {\n    orientation: 'horizontal',\n    color: 'standard',\n    elevated: true,\n    exitEdge: 'bottom',\n    hasFab: false,\n    fabAt: 'end',\n  },\n});\n\n/**\n * Collapsing content is anchored like Compose's AnimatedVisibility: horizontally, leading\n * content expands from the start and shrinks towards the end (trailing: the reverse);\n * vertically, leading content stays at the bottom and trailing content at the top.\n */\nexport const toolbarCollapseAnchor = tv({\n  base: '',\n  variants: {\n    slot: { leading: '', trailing: '' },\n    orientation: { horizontal: '', vertical: '' },\n  },\n  compoundVariants: [\n    {\n      slot: 'leading',\n      orientation: 'horizontal',\n      class: 'justify-start data-collapsed:justify-end',\n    },\n    {\n      slot: 'trailing',\n      orientation: 'horizontal',\n      class: 'justify-end data-collapsed:justify-start',\n    },\n    { slot: 'leading', orientation: 'vertical', class: 'justify-end' },\n    { slot: 'trailing', orientation: 'vertical', class: 'justify-start' },\n  ],\n});\n\n/** Variant definitions for {@link ToolbarFab}. */\nexport const toolbarFabStyles = tv({\n  slots: {\n    root: [\n      'inline-flex size-full cursor-pointer items-center justify-center select-none',\n      'rounded-[var(--_md-comp-toolbar-floating-fab-container-shape)]',\n      'bg-[var(--_md-comp-toolbar-floating-fab-container-color)] text-[color:var(--_md-comp-toolbar-floating-fab-icon-color)]',\n      'state-layer focus-ring container-motion',\n      'forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n    ],\n    icon: 'inline-flex size-[24px] shrink-0 items-center justify-center [&>svg]:size-full',\n  },\n  variants: {\n    // The colours come from the FAB's tokens (`toolbarFabTokenSet`), picked by `data-color`.\n    color: { standard: {}, vibrant: {} },\n    /**\n     * Like `Fab`: level 2 (Compose's toolbar FAB: hover 3, pressed 2), level 1 (hover 2,\n     * pressed 1), or level 0 for a flat FAB. The hover level never applies while pressed.\n     */\n    elevation: {\n      default: { root: 'shadow-elevation-2 data-hovered:not-data-pressed:shadow-elevation-3' },\n      lowered: { root: 'shadow-elevation-1 data-hovered:not-data-pressed:shadow-elevation-2' },\n      flat: { root: 'shadow-elevation-0' },\n    },\n  },\n  defaultVariants: { color: 'standard', elevation: 'default' },\n});\n\n/**\n * The variants of {@link dockedToolbarStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type DockedToolbarStyleProps = VariantProps<typeof dockedToolbarStyles>;\nexport type DockedToolbarArrangement = NonNullable<DockedToolbarStyleProps['arrangement']>;\nexport type DockedToolbarColor = NonNullable<DockedToolbarStyleProps['color']>;\n/**\n * The variants of {@link floatingToolbarStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type FloatingToolbarStyleProps = VariantProps<typeof floatingToolbarStyles>;\nexport type FloatingToolbarColor = NonNullable<FloatingToolbarStyleProps['color']>;\nexport type ToolbarOrientation = NonNullable<FloatingToolbarStyleProps['orientation']>;\nexport type ToolbarExitEdge = NonNullable<FloatingToolbarStyleProps['exitEdge']>;\n"],"mappings":"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"}

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

@@ -4,6 +4,6 @@ import "../../index.js";
 /** The tokens of {@link Tooltip}: `--md-comp-plain-tooltip-<part>`. */
 export declare const plainTooltipTokenSet: ComponentTokenSet<"container-color" | "container-shape" | "supporting-text-color">;
 /** The tokens of {@link RichTooltip}: `--md-comp-rich-tooltip-<part>`. */
-export declare const richTooltipTokenSet: ComponentTokenSet<"container-color" | "container-elevation" | "container-shape" | "supporting-text-color" | "subhead-color">;
+export declare const richTooltipTokenSet: ComponentTokenSet<"container-color" | "container-shape" | "supporting-text-color" | "container-elevation" | "subhead-color">;
 //#endregion
 //# sourceMappingURL=tooltip-tokens.d.ts.map

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/primitives/ButtonBase.js

@@ -136,6 +136,7 @@ function LinkBase({ ref, href, ...props }) {
 		...pendingAttributes(pending, domRest),
 		...element,
 		href: disabled ? void 0 : href,
+		...disabled && dom.role === void 0 && { role: "link" },
 		ref: domRef,
 		children: render(children, false)
 	});

package/dist/primitives/ButtonBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.js","names":[],"sources":["../../src/primitives/ButtonBase.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  type RefObject,\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {\n  mergeProps,\n  mergeRefs,\n  useButton,\n  useLink,\n  useObjectRef,\n  useToggleButton,\n  useToggleButtonGroupItem,\n  type PressEvents,\n} from 'react-aria';\nimport { useToggleState, type ToggleGroupState } from 'react-stately';\nimport { TriggerContext, type TriggerContextValue } from './TriggerContext';\nimport { useM3Interaction } from './use-m3-interaction';\n\n/**\n * Selection state of an enclosing toggle group (e.g. a connected `ButtonGroup`). Toggle\n * buttons with a `value` inside it are selected through the group instead of on their own.\n */\nexport const ToggleGroupStateContext = createContext<ToggleGroupState | null>(null);\n\ntype PressHandlers = Pick<\n  PressEvents,\n  'onPress' | 'onPressStart' | 'onPressEnd' | 'onPressChange' | 'onPressUp'\n> & {\n  /** Don't move focus to the element on press (set by menu triggers). @default false */\n  preventFocusOnPress?: boolean;\n};\n\nexport interface ButtonBaseRenderState {\n  isSelected: boolean;\n}\n\ninterface ButtonBaseCommonProps extends PressHandlers {\n  /** Disables the element: it can't be pressed or focused, and shows the disabled style. @default false */\n  disabled?: boolean;\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  /**\n   * The element is being dragged (e.g. a card picked up to move it): sets `data-dragged`\n   * for the dragged state layer. A consumer's own `data-dragged` attribute counts too.\n   * @default false\n   */\n  dragged?: boolean;\n  /** Content, or a function of the selection state (e.g. to swap a toggle's icon). */\n  children?: ReactNode | ((state: ButtonBaseRenderState) => ReactNode);\n}\n\n/**\n * The pending state `Button` and `IconButton` build on. It isn't part of the other props types,\n * so components that extend them (FABs, chips, cards) don't inherit it; pass it to `ButtonBase`\n * alongside them.\n */\nexport interface ButtonBasePendingProps {\n  /**\n   * An action started by the element is running: presses are blocked (`onPress`, `onClick`,\n   * Enter and Space do nothing, no hover or pressed state), but the element stays focusable and\n   * in the Tab order, unlike `disabled`. Sets `aria-disabled=\"true\"` and `data-pending`; a\n   * submit button renders `type=\"button\"` meanwhile, so the form isn't submitted again, and a\n   * link keeps its `href` with its navigation prevented. `disabled` wins when both are set.\n   * A toggle ignores it.\n   * @default false\n   */\n  pending?: boolean;\n}\n\ntype OwnKeys = keyof ButtonBaseCommonProps | 'color';\n\nexport interface ButtonBaseActionProps\n  extends ButtonBaseCommonProps, Omit<ComponentPropsWithoutRef<'button'>, OwnKeys> {\n  /** Ref to the root `<button>` element. */\n  ref?: Ref<HTMLButtonElement>;\n  /** The element rendered: a native `<button>`. @default \"button\" */\n  as?: 'button';\n  /**\n   * The value a submit button sends with its form, under its `name`. On a toggle (`toggle`)\n   * it's a `string` naming the button in a selection group instead, required to take part in\n   * the group's selection.\n   */\n  value?: ComponentPropsWithoutRef<'button'>['value'];\n  /** Renders a link (`<a>`) instead of a button. */\n  href?: undefined;\n  /** Makes the button a toggle (`aria-pressed`) with `selected` and `onSelectedChange`. @default false */\n  toggle?: false;\n}\n\n/**\n * A `div` with `role=\"button\"`, for pressable containers whose content a `<button>` may\n * not hold (headings, images, block layout), such as clickable cards.\n */\nexport interface ButtonBaseDivActionProps\n  extends ButtonBaseCommonProps, Omit<ComponentPropsWithoutRef<'div'>, OwnKeys> {\n  /** Ref to the root `<div>` element. */\n  ref?: Ref<HTMLDivElement>;\n  /** Renders a `div` with `role=\"button\"`, for content a `<button>` may not hold. */\n  as: 'div';\n  /** Renders a link (`<a>`) instead of a button. */\n  href?: undefined;\n  /** Makes the button a toggle (`aria-pressed`) with `selected` and `onSelectedChange`. @default false */\n  toggle?: false;\n}\n\nexport interface ButtonBaseLinkProps\n  extends ButtonBaseCommonProps, Omit<ComponentPropsWithoutRef<'a'>, OwnKeys | 'href'> {\n  /** Ref to the root `<a>` element. */\n  ref?: Ref<HTMLAnchorElement>;\n  /** Renders a link. Navigation goes through React Aria's `RouterProvider` when one is set. */\n  href: string;\n  /** Makes the button a toggle (`aria-pressed`) with `selected` and `onSelectedChange`. @default false */\n  toggle?: false;\n}\n\nexport interface ButtonBaseToggleProps\n  extends\n    ButtonBaseCommonProps,\n    Omit<ComponentPropsWithoutRef<'button'>, OwnKeys | 'aria-pressed' | 'onChange'> {\n  /** Ref to the root `<button>` element. */\n  ref?: Ref<HTMLButtonElement>;\n  /** Renders a link (`<a>`) instead of a button. */\n  href?: undefined;\n  /** Makes the button a toggle (`aria-pressed`). */\n  toggle: true;\n  /** Identifies the button in a selection group; required to take part in its selection. */\n  value?: string;\n  /** Controlled selection. Ignored inside a selection group. */\n  selected?: boolean;\n  /** Initial selection when uncontrolled. */\n  defaultSelected?: boolean;\n  /** Called with the new selection when the user toggles the button. */\n  onSelectedChange?: (selected: boolean) => void;\n}\n\nexport type ButtonBaseProps =\n  ButtonBaseActionProps | ButtonBaseDivActionProps | ButtonBaseLinkProps | ButtonBaseToggleProps;\n\nfunction splitProps<T extends ButtonBaseCommonProps & { pending?: boolean }>(props: T) {\n  const {\n    disabled = false,\n    pending: pendingProp = false,\n    className,\n    style,\n    children,\n    onPress,\n    onPressStart,\n    onPressEnd,\n    onPressChange,\n    onPressUp,\n    preventFocusOnPress,\n    dragged,\n    ...dom\n  } = props;\n  const consumerDragged = (dom as Record<string, unknown>)['data-dragged'];\n  // `disabled` wins: a disabled element is natively disabled even while its action runs.\n  const pending = pendingProp && !disabled;\n  return {\n    disabled,\n    pending,\n    /** Presses, hover and the pressed state are off: disabled, or pending. */\n    blocked: disabled || pending,\n    // Our `data-*` attributes are spread last, so a consumer's `data-dragged` feeds the state.\n    isDragged:\n      dragged ??\n      (consumerDragged !== undefined && consumerDragged !== false && consumerDragged !== 'false'),\n    element: { className, style },\n    children,\n    // React Aria options, not DOM attributes: they go to the press hooks.\n    press: { onPress, onPressStart, onPressEnd, onPressChange, onPressUp, preventFocusOnPress },\n    dom,\n  };\n}\n\n/**\n * While a submit button is pending it renders `type=\"button\"`, but a form left without a submit\n * button still submits on Enter in its only field (HTML's implicit submission). This stops a\n * submission with no submitter (or this button) before it reaches React or the browser, so\n * Enter doesn't send the form again; another submit button of the form still works.\n */\nfunction useBlockImplicitSubmit(ref: RefObject<HTMLElement | null>, enabled: boolean) {\n  useEffect(() => {\n    const button = ref.current;\n    const form = button instanceof HTMLButtonElement ? button.form : null;\n    if (!enabled || !form) return;\n    const block = (event: Event) => {\n      // A plain `Event` (no `submitter`) counts as implicit too.\n      const submitter = (event as Partial<SubmitEvent>).submitter;\n      if (submitter && submitter !== button) return;\n      event.preventDefault();\n      event.stopPropagation();\n    };\n    form.addEventListener('submit', block, true);\n    return () => form.removeEventListener('submit', block, true);\n  }, [ref, enabled]);\n}\n\n/** A pending element ignores clicks: a consumer's `onClick` is left out while it waits. */\nfunction withoutClickWhilePending<T extends { onClick?: unknown }>(dom: T, pending: boolean) {\n  if (!pending) return dom;\n  const { onClick: _onClick, ...rest } = dom;\n  return rest;\n}\n\n/**\n * What a pending element changes on top of the blocked hooks' props (React Aria's pending\n * `Button`): it stays focusable (React Aria's `isDisabled` would make a `<button>` natively\n * disabled and drop its tab stop), says it's unavailable with `aria-disabled`, and keeps the\n * enabled look (`data-disabled` only for `disabled`).\n */\nfunction pendingAttributes(pending: boolean, dom: { tabIndex?: number }) {\n  return pending\n    ? {\n        disabled: undefined,\n        tabIndex: dom.tabIndex ?? 0,\n        'aria-disabled': true as const,\n        'data-disabled': undefined,\n        'data-pending': true as const,\n      }\n    : {};\n}\n\nconst render = (children: ButtonBaseCommonProps['children'], isSelected: boolean) =>\n  typeof children === 'function' ? children({ isSelected }) : children;\n\nfunction ActionBase(\n  props: (ButtonBaseActionProps | ButtonBaseDivActionProps) & ButtonBasePendingProps,\n) {\n  const { ref, as: elementType = 'button', ...rest } = props;\n  const type =\n    elementType === 'button' ? ((rest as ButtonBaseActionProps).type ?? 'button') : undefined;\n  const { pending, blocked, isDragged, element, children, press, dom } = splitProps(rest);\n  const domRest = withoutClickWhilePending(dom, pending);\n  const domRef = useObjectRef(ref as Ref<HTMLElement>);\n  const { buttonProps, isPressed } = useButton(\n    { ...press, type, isDisabled: blocked, elementType },\n    domRef,\n  );\n  const { interactionProps, dataAttributes } = useM3Interaction(\n    { isDisabled: blocked, isPressed, isDragged },\n    domRef,\n  );\n  useBlockImplicitSubmit(domRef, pending && type === 'submit');\n  const elementProps = {\n    ...mergeProps(domRest, buttonProps, interactionProps),\n    ...dataAttributes,\n    ...pendingAttributes(pending, domRest),\n    // Enter in a form's field would submit it again through a pending submit button.\n    ...(pending && type === 'submit' ? { type: 'button' as const } : {}),\n    ...element,\n  };\n  return elementType === 'div' ? (\n    <div {...elementProps} ref={domRef as Ref<HTMLDivElement>}>\n      {render(children, false)}\n    </div>\n  ) : (\n    <button {...elementProps} ref={domRef as Ref<HTMLButtonElement>}>\n      {render(children, false)}\n    </button>\n  );\n}\n\nfunction LinkBase({ ref, href, ...props }: ButtonBaseLinkProps & ButtonBasePendingProps) {\n  const { disabled, pending, blocked, isDragged, element, children, press, dom } =\n    splitProps(props);\n  const domRest = withoutClickWhilePending(dom, pending);\n  const domRef = useObjectRef(ref);\n  const { linkProps, isPressed } = useLink(\n    // While blocked, the press hook prevents a click's navigation.\n    { ...press, href, isDisabled: blocked, elementType: 'a' },\n    domRef,\n  );\n  const { interactionProps, dataAttributes } = useM3Interaction(\n    { isDisabled: blocked, isPressed, isDragged },\n    domRef,\n  );\n  return (\n    <a\n      {...mergeProps(domRest, linkProps, interactionProps)}\n      {...dataAttributes}\n      {...pendingAttributes(pending, domRest)}\n      {...element}\n      // A pending link stays a link (role and tab stop); only a disabled one drops `href`.\n      href={disabled ? undefined : href}\n      ref={domRef}\n    >\n      {render(children, false)}\n    </a>\n  );\n}\n\nfunction ToggleBase({\n  ref,\n  type = 'button',\n  selected,\n  defaultSelected,\n  onSelectedChange,\n  toggle,\n  ...props\n}: ButtonBaseToggleProps) {\n  const { disabled, isDragged, element, children, press, dom } = splitProps(props);\n  const domRef = useObjectRef(ref);\n  const options = {\n    ...press,\n    type,\n    isDisabled: disabled,\n    isSelected: selected,\n    defaultSelected,\n    onChange: onSelectedChange,\n    elementType: 'button' as const,\n  };\n  const state = useToggleState(options);\n  const { buttonProps, isPressed, isSelected } = useToggleButton(options, state, domRef);\n  const { interactionProps, dataAttributes } = useM3Interaction(\n    { isDisabled: disabled, isPressed, isSelected, isDragged },\n    domRef,\n  );\n  return (\n    <button\n      {...mergeProps(dom, buttonProps, interactionProps)}\n      {...dataAttributes}\n      {...element}\n      ref={domRef}\n    >\n      {render(children, isSelected)}\n    </button>\n  );\n}\n\nfunction GroupItemBase({\n  ref,\n  type = 'button',\n  value,\n  state,\n  ...props\n}: Omit<ButtonBaseToggleProps, 'selected' | 'defaultSelected' | 'onSelectedChange' | 'toggle'> & {\n  value: string;\n  state: ToggleGroupState;\n}) {\n  const { disabled, isDragged, element, children, press, dom } = splitProps(props);\n  const domRef = useObjectRef(ref);\n  const { buttonProps, isPressed, isSelected } = useToggleButtonGroupItem(\n    { ...press, id: value, isDisabled: disabled, elementType: 'button' },\n    state,\n    domRef,\n  );\n  const { interactionProps, dataAttributes } = useM3Interaction(\n    { isDisabled: disabled || state.isDisabled, isPressed, isSelected, isDragged },\n    domRef,\n  );\n  return (\n    <button\n      {...mergeProps(dom, buttonProps, interactionProps)}\n      {...dataAttributes}\n      {...element}\n      type={type}\n      value={value}\n      ref={domRef}\n    >\n      {render(children, isSelected)}\n    </button>\n  );\n}\n\nfunction withTrigger(\n  props: ButtonBaseProps,\n  { ref: triggerRef, ...trigger }: TriggerContextValue,\n): ButtonBaseProps {\n  const merged = mergeProps(trigger, props) as ButtonBaseProps;\n  return {\n    ...merged,\n    ref: mergeRefs(props.ref as Ref<HTMLElement>, triggerRef as Ref<HTMLElement>),\n  } as ButtonBaseProps;\n}\n\n/**\n * Unstyled button behaviour shared by every button-like component: a `<button>`, a\n * link (`href`) or a toggle (`toggle`), with React Aria press, focus and keyboard\n * handling, and the M3 interaction `data-*` attributes and ripple origin from\n * `useM3Interaction`. DOM props pass through; `className` and `style` go on the element.\n * `pending` blocks presses but keeps focus (see {@link ButtonBasePendingProps}).\n */\nexport function ButtonBase(ownProps: ButtonBaseProps & ButtonBasePendingProps) {\n  const groupState = useContext(ToggleGroupStateContext);\n  const trigger = useContext(TriggerContext);\n  // An enclosing overlay trigger adds its press handler (chained), ARIA attributes and ref.\n  const props = trigger ? withTrigger(ownProps, trigger) : ownProps;\n  if (props.href !== undefined) return <LinkBase {...props} />;\n  if (props.toggle) {\n    if (groupState && props.value !== undefined) {\n      const { selected, defaultSelected, onSelectedChange, toggle, value, ...item } = props;\n      if (\n        process.env.NODE_ENV !== 'production' &&\n        (selected !== undefined || defaultSelected !== undefined || onSelectedChange)\n      ) {\n        console.warn(\n          `[@windmorph/react] Toggle \"${value}\" is inside a selection group; use the group's selectedKeys instead of selected / onSelectedChange.`,\n        );\n      }\n      return <GroupItemBase {...item} value={value} state={groupState} />;\n    }\n    return <ToggleBase {...props} />;\n  }\n  return <ActionBase {...props} />;\n}\n"],"mappings":"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"}
+{"version":3,"file":"ButtonBase.js","names":[],"sources":["../../src/primitives/ButtonBase.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  type RefObject,\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {\n  mergeProps,\n  mergeRefs,\n  useButton,\n  useLink,\n  useObjectRef,\n  useToggleButton,\n  useToggleButtonGroupItem,\n  type PressEvents,\n} from 'react-aria';\nimport { useToggleState, type ToggleGroupState } from 'react-stately';\nimport { TriggerContext, type TriggerContextValue } from './TriggerContext';\nimport { useM3Interaction } from './use-m3-interaction';\n\n/**\n * Selection state of an enclosing toggle group (e.g. a connected `ButtonGroup`). Toggle\n * buttons with a `value` inside it are selected through the group instead of on their own.\n */\nexport const ToggleGroupStateContext = createContext<ToggleGroupState | null>(null);\n\ntype PressHandlers = Pick<\n  PressEvents,\n  'onPress' | 'onPressStart' | 'onPressEnd' | 'onPressChange' | 'onPressUp'\n> & {\n  /** Don't move focus to the element on press (set by menu triggers). @default false */\n  preventFocusOnPress?: boolean;\n};\n\nexport interface ButtonBaseRenderState {\n  isSelected: boolean;\n}\n\ninterface ButtonBaseCommonProps extends PressHandlers {\n  /** Disables the element: it can't be pressed or focused, and shows the disabled style. @default false */\n  disabled?: boolean;\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  /**\n   * The element is being dragged (e.g. a card picked up to move it): sets `data-dragged`\n   * for the dragged state layer. A consumer's own `data-dragged` attribute counts too.\n   * @default false\n   */\n  dragged?: boolean;\n  /** Content, or a function of the selection state (e.g. to swap a toggle's icon). */\n  children?: ReactNode | ((state: ButtonBaseRenderState) => ReactNode);\n}\n\n/**\n * The pending state `Button` and `IconButton` build on. It isn't part of the other props types,\n * so components that extend them (FABs, chips, cards) don't inherit it; pass it to `ButtonBase`\n * alongside them.\n */\nexport interface ButtonBasePendingProps {\n  /**\n   * An action started by the element is running: presses are blocked (`onPress`, `onClick`,\n   * Enter and Space do nothing, no hover or pressed state), but the element stays focusable and\n   * in the Tab order, unlike `disabled`. Sets `aria-disabled=\"true\"` and `data-pending`; a\n   * submit button renders `type=\"button\"` meanwhile, so the form isn't submitted again, and a\n   * link keeps its `href` with its navigation prevented. `disabled` wins when both are set.\n   * A toggle ignores it.\n   * @default false\n   */\n  pending?: boolean;\n}\n\ntype OwnKeys = keyof ButtonBaseCommonProps | 'color';\n\nexport interface ButtonBaseActionProps\n  extends ButtonBaseCommonProps, Omit<ComponentPropsWithoutRef<'button'>, OwnKeys> {\n  /** Ref to the root `<button>` element. */\n  ref?: Ref<HTMLButtonElement>;\n  /** The element rendered: a native `<button>`. @default \"button\" */\n  as?: 'button';\n  /**\n   * The value a submit button sends with its form, under its `name`. On a toggle (`toggle`)\n   * it's a `string` naming the button in a selection group instead, required to take part in\n   * the group's selection.\n   */\n  value?: ComponentPropsWithoutRef<'button'>['value'];\n  /** Renders a link (`<a>`) instead of a button. */\n  href?: undefined;\n  /** Makes the button a toggle (`aria-pressed`) with `selected` and `onSelectedChange`. @default false */\n  toggle?: false;\n}\n\n/**\n * A `div` with `role=\"button\"`, for pressable containers whose content a `<button>` may\n * not hold (headings, images, block layout), such as clickable cards.\n */\nexport interface ButtonBaseDivActionProps\n  extends ButtonBaseCommonProps, Omit<ComponentPropsWithoutRef<'div'>, OwnKeys> {\n  /** Ref to the root `<div>` element. */\n  ref?: Ref<HTMLDivElement>;\n  /** Renders a `div` with `role=\"button\"`, for content a `<button>` may not hold. */\n  as: 'div';\n  /** Renders a link (`<a>`) instead of a button. */\n  href?: undefined;\n  /** Makes the button a toggle (`aria-pressed`) with `selected` and `onSelectedChange`. @default false */\n  toggle?: false;\n}\n\nexport interface ButtonBaseLinkProps\n  extends ButtonBaseCommonProps, Omit<ComponentPropsWithoutRef<'a'>, OwnKeys | 'href'> {\n  /** Ref to the root `<a>` element. */\n  ref?: Ref<HTMLAnchorElement>;\n  /** Renders a link. Navigation goes through React Aria's `RouterProvider` when one is set. */\n  href: string;\n  /** Makes the button a toggle (`aria-pressed`) with `selected` and `onSelectedChange`. @default false */\n  toggle?: false;\n}\n\nexport interface ButtonBaseToggleProps\n  extends\n    ButtonBaseCommonProps,\n    Omit<ComponentPropsWithoutRef<'button'>, OwnKeys | 'aria-pressed' | 'onChange'> {\n  /** Ref to the root `<button>` element. */\n  ref?: Ref<HTMLButtonElement>;\n  /** Renders a link (`<a>`) instead of a button. */\n  href?: undefined;\n  /** Makes the button a toggle (`aria-pressed`). */\n  toggle: true;\n  /** Identifies the button in a selection group; required to take part in its selection. */\n  value?: string;\n  /** Controlled selection. Ignored inside a selection group. */\n  selected?: boolean;\n  /** Initial selection when uncontrolled. */\n  defaultSelected?: boolean;\n  /** Called with the new selection when the user toggles the button. */\n  onSelectedChange?: (selected: boolean) => void;\n}\n\nexport type ButtonBaseProps =\n  ButtonBaseActionProps | ButtonBaseDivActionProps | ButtonBaseLinkProps | ButtonBaseToggleProps;\n\nfunction splitProps<T extends ButtonBaseCommonProps & { pending?: boolean }>(props: T) {\n  const {\n    disabled = false,\n    pending: pendingProp = false,\n    className,\n    style,\n    children,\n    onPress,\n    onPressStart,\n    onPressEnd,\n    onPressChange,\n    onPressUp,\n    preventFocusOnPress,\n    dragged,\n    ...dom\n  } = props;\n  const consumerDragged = (dom as Record<string, unknown>)['data-dragged'];\n  // `disabled` wins: a disabled element is natively disabled even while its action runs.\n  const pending = pendingProp && !disabled;\n  return {\n    disabled,\n    pending,\n    /** Presses, hover and the pressed state are off: disabled, or pending. */\n    blocked: disabled || pending,\n    // Our `data-*` attributes are spread last, so a consumer's `data-dragged` feeds the state.\n    isDragged:\n      dragged ??\n      (consumerDragged !== undefined && consumerDragged !== false && consumerDragged !== 'false'),\n    element: { className, style },\n    children,\n    // React Aria options, not DOM attributes: they go to the press hooks.\n    press: { onPress, onPressStart, onPressEnd, onPressChange, onPressUp, preventFocusOnPress },\n    dom,\n  };\n}\n\n/**\n * While a submit button is pending it renders `type=\"button\"`, but a form left without a submit\n * button still submits on Enter in its only field (HTML's implicit submission). This stops a\n * submission with no submitter (or this button) before it reaches React or the browser, so\n * Enter doesn't send the form again; another submit button of the form still works.\n */\nfunction useBlockImplicitSubmit(ref: RefObject<HTMLElement | null>, enabled: boolean) {\n  useEffect(() => {\n    const button = ref.current;\n    const form = button instanceof HTMLButtonElement ? button.form : null;\n    if (!enabled || !form) return;\n    const block = (event: Event) => {\n      // A plain `Event` (no `submitter`) counts as implicit too.\n      const submitter = (event as Partial<SubmitEvent>).submitter;\n      if (submitter && submitter !== button) return;\n      event.preventDefault();\n      event.stopPropagation();\n    };\n    form.addEventListener('submit', block, true);\n    return () => form.removeEventListener('submit', block, true);\n  }, [ref, enabled]);\n}\n\n/** A pending element ignores clicks: a consumer's `onClick` is left out while it waits. */\nfunction withoutClickWhilePending<T extends { onClick?: unknown }>(dom: T, pending: boolean) {\n  if (!pending) return dom;\n  const { onClick: _onClick, ...rest } = dom;\n  return rest;\n}\n\n/**\n * What a pending element changes on top of the blocked hooks' props (React Aria's pending\n * `Button`): it stays focusable (React Aria's `isDisabled` would make a `<button>` natively\n * disabled and drop its tab stop), says it's unavailable with `aria-disabled`, and keeps the\n * enabled look (`data-disabled` only for `disabled`).\n */\nfunction pendingAttributes(pending: boolean, dom: { tabIndex?: number }) {\n  return pending\n    ? {\n        disabled: undefined,\n        tabIndex: dom.tabIndex ?? 0,\n        'aria-disabled': true as const,\n        'data-disabled': undefined,\n        'data-pending': true as const,\n      }\n    : {};\n}\n\nconst render = (children: ButtonBaseCommonProps['children'], isSelected: boolean) =>\n  typeof children === 'function' ? children({ isSelected }) : children;\n\nfunction ActionBase(\n  props: (ButtonBaseActionProps | ButtonBaseDivActionProps) & ButtonBasePendingProps,\n) {\n  const { ref, as: elementType = 'button', ...rest } = props;\n  const type =\n    elementType === 'button' ? ((rest as ButtonBaseActionProps).type ?? 'button') : undefined;\n  const { pending, blocked, isDragged, element, children, press, dom } = splitProps(rest);\n  const domRest = withoutClickWhilePending(dom, pending);\n  const domRef = useObjectRef(ref as Ref<HTMLElement>);\n  const { buttonProps, isPressed } = useButton(\n    { ...press, type, isDisabled: blocked, elementType },\n    domRef,\n  );\n  const { interactionProps, dataAttributes } = useM3Interaction(\n    { isDisabled: blocked, isPressed, isDragged },\n    domRef,\n  );\n  useBlockImplicitSubmit(domRef, pending && type === 'submit');\n  const elementProps = {\n    ...mergeProps(domRest, buttonProps, interactionProps),\n    ...dataAttributes,\n    ...pendingAttributes(pending, domRest),\n    // Enter in a form's field would submit it again through a pending submit button.\n    ...(pending && type === 'submit' ? { type: 'button' as const } : {}),\n    ...element,\n  };\n  return elementType === 'div' ? (\n    <div {...elementProps} ref={domRef as Ref<HTMLDivElement>}>\n      {render(children, false)}\n    </div>\n  ) : (\n    <button {...elementProps} ref={domRef as Ref<HTMLButtonElement>}>\n      {render(children, false)}\n    </button>\n  );\n}\n\nfunction LinkBase({ ref, href, ...props }: ButtonBaseLinkProps & ButtonBasePendingProps) {\n  const { disabled, pending, blocked, isDragged, element, children, press, dom } =\n    splitProps(props);\n  const domRest = withoutClickWhilePending(dom, pending);\n  const domRef = useObjectRef(ref);\n  const { linkProps, isPressed } = useLink(\n    // While blocked, the press hook prevents a click's navigation.\n    { ...press, href, isDisabled: blocked, elementType: 'a' },\n    domRef,\n  );\n  const { interactionProps, dataAttributes } = useM3Interaction(\n    { isDisabled: blocked, isPressed, isDragged },\n    domRef,\n  );\n  return (\n    <a\n      {...mergeProps(domRest, linkProps, interactionProps)}\n      {...dataAttributes}\n      {...pendingAttributes(pending, domRest)}\n      {...element}\n      // A pending link stays a link (role and tab stop); only a disabled one drops `href`, and\n      // keeps the role an `a` loses without one, so it can still be named.\n      href={disabled ? undefined : href}\n      {...(disabled && dom.role === undefined && { role: 'link' })}\n      ref={domRef}\n    >\n      {render(children, false)}\n    </a>\n  );\n}\n\nfunction ToggleBase({\n  ref,\n  type = 'button',\n  selected,\n  defaultSelected,\n  onSelectedChange,\n  toggle,\n  ...props\n}: ButtonBaseToggleProps) {\n  const { disabled, isDragged, element, children, press, dom } = splitProps(props);\n  const domRef = useObjectRef(ref);\n  const options = {\n    ...press,\n    type,\n    isDisabled: disabled,\n    isSelected: selected,\n    defaultSelected,\n    onChange: onSelectedChange,\n    elementType: 'button' as const,\n  };\n  const state = useToggleState(options);\n  const { buttonProps, isPressed, isSelected } = useToggleButton(options, state, domRef);\n  const { interactionProps, dataAttributes } = useM3Interaction(\n    { isDisabled: disabled, isPressed, isSelected, isDragged },\n    domRef,\n  );\n  return (\n    <button\n      {...mergeProps(dom, buttonProps, interactionProps)}\n      {...dataAttributes}\n      {...element}\n      ref={domRef}\n    >\n      {render(children, isSelected)}\n    </button>\n  );\n}\n\nfunction GroupItemBase({\n  ref,\n  type = 'button',\n  value,\n  state,\n  ...props\n}: Omit<ButtonBaseToggleProps, 'selected' | 'defaultSelected' | 'onSelectedChange' | 'toggle'> & {\n  value: string;\n  state: ToggleGroupState;\n}) {\n  const { disabled, isDragged, element, children, press, dom } = splitProps(props);\n  const domRef = useObjectRef(ref);\n  const { buttonProps, isPressed, isSelected } = useToggleButtonGroupItem(\n    { ...press, id: value, isDisabled: disabled, elementType: 'button' },\n    state,\n    domRef,\n  );\n  const { interactionProps, dataAttributes } = useM3Interaction(\n    { isDisabled: disabled || state.isDisabled, isPressed, isSelected, isDragged },\n    domRef,\n  );\n  return (\n    <button\n      {...mergeProps(dom, buttonProps, interactionProps)}\n      {...dataAttributes}\n      {...element}\n      type={type}\n      value={value}\n      ref={domRef}\n    >\n      {render(children, isSelected)}\n    </button>\n  );\n}\n\nfunction withTrigger(\n  props: ButtonBaseProps,\n  { ref: triggerRef, ...trigger }: TriggerContextValue,\n): ButtonBaseProps {\n  const merged = mergeProps(trigger, props) as ButtonBaseProps;\n  return {\n    ...merged,\n    ref: mergeRefs(props.ref as Ref<HTMLElement>, triggerRef as Ref<HTMLElement>),\n  } as ButtonBaseProps;\n}\n\n/**\n * Unstyled button behaviour shared by every button-like component: a `<button>`, a\n * link (`href`) or a toggle (`toggle`), with React Aria press, focus and keyboard\n * handling, and the M3 interaction `data-*` attributes and ripple origin from\n * `useM3Interaction`. DOM props pass through; `className` and `style` go on the element.\n * `pending` blocks presses but keeps focus (see {@link ButtonBasePendingProps}).\n */\nexport function ButtonBase(ownProps: ButtonBaseProps & ButtonBasePendingProps) {\n  const groupState = useContext(ToggleGroupStateContext);\n  const trigger = useContext(TriggerContext);\n  // An enclosing overlay trigger adds its press handler (chained), ARIA attributes and ref.\n  const props = trigger ? withTrigger(ownProps, trigger) : ownProps;\n  if (props.href !== undefined) return <LinkBase {...props} />;\n  if (props.toggle) {\n    if (groupState && props.value !== undefined) {\n      const { selected, defaultSelected, onSelectedChange, toggle, value, ...item } = props;\n      if (\n        process.env.NODE_ENV !== 'production' &&\n        (selected !== undefined || defaultSelected !== undefined || onSelectedChange)\n      ) {\n        console.warn(\n          `[@windmorph/react] Toggle \"${value}\" is inside a selection group; use the group's selectedKeys instead of selected / onSelectedChange.`,\n        );\n      }\n      return <GroupItemBase {...item} value={value} state={groupState} />;\n    }\n    return <ToggleBase {...props} />;\n  }\n  return <ActionBase {...props} />;\n}\n"],"mappings":";;;;;;;;;;;;AA8BA,MAAa,0BAA0B,cAAuC,IAAI;AAsHlF,SAAS,WAAoE,OAAU;CACrF,MAAM,EACJ,WAAW,OACX,SAAS,cAAc,OACvB,WACA,OACA,UACA,SACA,cACA,YACA,eACA,WACA,qBACA,SACA,GAAG,QACD;CACJ,MAAM,kBAAmB,IAAgC;CAEzD,MAAM,UAAU,eAAe,CAAC;CAChC,OAAO;EACL;EACA;;EAEA,SAAS,YAAY;EAErB,WACE,YACC,oBAAoB,KAAA,KAAa,oBAAoB,SAAS,oBAAoB;EACrF,SAAS;GAAE;GAAW;EAAM;EAC5B;EAEA,OAAO;GAAE;GAAS;GAAc;GAAY;GAAe;GAAW;EAAoB;EAC1F;CACF;AACF;;;;;;;AAQA,SAAS,uBAAuB,KAAoC,SAAkB;CACpF,gBAAgB;EACd,MAAM,SAAS,IAAI;EACnB,MAAM,OAAO,kBAAkB,oBAAoB,OAAO,OAAO;EACjE,IAAI,CAAC,WAAW,CAAC,MAAM;EACvB,MAAM,SAAS,UAAiB;GAE9B,MAAM,YAAa,MAA+B;GAClD,IAAI,aAAa,cAAc,QAAQ;GACvC,MAAM,eAAe;GACrB,MAAM,gBAAgB;EACxB;EACA,KAAK,iBAAiB,UAAU,OAAO,IAAI;EAC3C,aAAa,KAAK,oBAAoB,UAAU,OAAO,IAAI;CAC7D,GAAG,CAAC,KAAK,OAAO,CAAC;AACnB;;AAGA,SAAS,yBAA0D,KAAQ,SAAkB;CAC3F,IAAI,CAAC,SAAS,OAAO;CACrB,MAAM,EAAE,SAAS,UAAU,GAAG,SAAS;CACvC,OAAO;AACT;;;;;;;AAQA,SAAS,kBAAkB,SAAkB,KAA4B;CACvE,OAAO,UACH;EACE,UAAU,KAAA;EACV,UAAU,IAAI,YAAY;EAC1B,iBAAiB;EACjB,iBAAiB,KAAA;EACjB,gBAAgB;CAClB,IACA,CAAC;AACP;AAEA,MAAM,UAAU,UAA6C,eAC3D,OAAO,aAAa,aAAa,SAAS,EAAE,WAAW,CAAC,IAAI;AAE9D,SAAS,WACP,OACA;CACA,MAAM,EAAE,KAAK,IAAI,cAAc,UAAU,GAAG,SAAS;CACrD,MAAM,OACJ,gBAAgB,WAAa,KAA+B,QAAQ,WAAY,KAAA;CAClF,MAAM,EAAE,SAAS,SAAS,WAAW,SAAS,UAAU,OAAO,QAAQ,WAAW,IAAI;CACtF,MAAM,UAAU,yBAAyB,KAAK,OAAO;CACrD,MAAM,SAAS,aAAa,GAAuB;CACnD,MAAM,EAAE,aAAa,cAAc,UACjC;EAAE,GAAG;EAAO;EAAM,YAAY;EAAS;CAAY,GACnD,MACF;CACA,MAAM,EAAE,kBAAkB,mBAAmB,iBAC3C;EAAE,YAAY;EAAS;EAAW;CAAU,GAC5C,MACF;CACA,uBAAuB,QAAQ,WAAW,SAAS,QAAQ;CAC3D,MAAM,eAAe;EACnB,GAAG,WAAW,SAAS,aAAa,gBAAgB;EACpD,GAAG;EACH,GAAG,kBAAkB,SAAS,OAAO;EAErC,GAAI,WAAW,SAAS,WAAW,EAAE,MAAM,SAAkB,IAAI,CAAC;EAClE,GAAG;CACL;CACA,OAAO,gBAAgB,QACrB,oBAAC,OAAD;EAAK,GAAI;EAAc,KAAK;EACzB,UAAA,OAAO,UAAU,KAAK;CACpB,CAAA,IAEL,oBAAC,UAAD;EAAQ,GAAI;EAAc,KAAK;EAC5B,UAAA,OAAO,UAAU,KAAK;CACjB,CAAA;AAEZ;AAEA,SAAS,SAAS,EAAE,KAAK,MAAM,GAAG,SAAuD;CACvF,MAAM,EAAE,UAAU,SAAS,SAAS,WAAW,SAAS,UAAU,OAAO,QACvE,WAAW,KAAK;CAClB,MAAM,UAAU,yBAAyB,KAAK,OAAO;CACrD,MAAM,SAAS,aAAa,GAAG;CAC/B,MAAM,EAAE,WAAW,cAAc,QAE/B;EAAE,GAAG;EAAO;EAAM,YAAY;EAAS,aAAa;CAAI,GACxD,MACF;CACA,MAAM,EAAE,kBAAkB,mBAAmB,iBAC3C;EAAE,YAAY;EAAS;EAAW;CAAU,GAC5C,MACF;CACA,OACE,oBAAC,KAAD;EACE,GAAI,WAAW,SAAS,WAAW,gBAAgB;EACnD,GAAI;EACJ,GAAI,kBAAkB,SAAS,OAAO;EACtC,GAAI;EAGJ,MAAM,WAAW,KAAA,IAAY;EAC7B,GAAK,YAAY,IAAI,SAAS,KAAA,KAAa,EAAE,MAAM,OAAO;EAC1D,KAAK;EAEJ,UAAA,OAAO,UAAU,KAAK;CACtB,CAAA;AAEP;AAEA,SAAS,WAAW,EAClB,KACA,OAAO,UACP,UACA,iBACA,kBACA,QACA,GAAG,SACqB;CACxB,MAAM,EAAE,UAAU,WAAW,SAAS,UAAU,OAAO,QAAQ,WAAW,KAAK;CAC/E,MAAM,SAAS,aAAa,GAAG;CAC/B,MAAM,UAAU;EACd,GAAG;EACH;EACA,YAAY;EACZ,YAAY;EACZ;EACA,UAAU;EACV,aAAa;CACf;CACA,MAAM,QAAQ,eAAe,OAAO;CACpC,MAAM,EAAE,aAAa,WAAW,eAAe,gBAAgB,SAAS,OAAO,MAAM;CACrF,MAAM,EAAE,kBAAkB,mBAAmB,iBAC3C;EAAE,YAAY;EAAU;EAAW;EAAY;CAAU,GACzD,MACF;CACA,OACE,oBAAC,UAAD;EACE,GAAI,WAAW,KAAK,aAAa,gBAAgB;EACjD,GAAI;EACJ,GAAI;EACJ,KAAK;EAEJ,UAAA,OAAO,UAAU,UAAU;CACtB,CAAA;AAEZ;AAEA,SAAS,cAAc,EACrB,KACA,OAAO,UACP,OACA,OACA,GAAG,SAIF;CACD,MAAM,EAAE,UAAU,WAAW,SAAS,UAAU,OAAO,QAAQ,WAAW,KAAK;CAC/E,MAAM,SAAS,aAAa,GAAG;CAC/B,MAAM,EAAE,aAAa,WAAW,eAAe,yBAC7C;EAAE,GAAG;EAAO,IAAI;EAAO,YAAY;EAAU,aAAa;CAAS,GACnE,OACA,MACF;CACA,MAAM,EAAE,kBAAkB,mBAAmB,iBAC3C;EAAE,YAAY,YAAY,MAAM;EAAY;EAAW;EAAY;CAAU,GAC7E,MACF;CACA,OACE,oBAAC,UAAD;EACE,GAAI,WAAW,KAAK,aAAa,gBAAgB;EACjD,GAAI;EACJ,GAAI;EACE;EACC;EACP,KAAK;EAEJ,UAAA,OAAO,UAAU,UAAU;CACtB,CAAA;AAEZ;AAEA,SAAS,YACP,OACA,EAAE,KAAK,YAAY,GAAG,WACL;CAEjB,OAAO;EACL,GAFa,WAAW,SAAS,KAEzB;EACR,KAAK,UAAU,MAAM,KAAyB,UAA8B;CAC9E;AACF;;;;;;;;AASA,SAAgB,WAAW,UAAoD;CAC7E,MAAM,aAAa,WAAW,uBAAuB;CACrD,MAAM,UAAU,WAAW,cAAc;CAEzC,MAAM,QAAQ,UAAU,YAAY,UAAU,OAAO,IAAI;CACzD,IAAI,MAAM,SAAS,KAAA,GAAW,OAAO,oBAAC,UAAD,EAAU,GAAI,MAAQ,CAAA;CAC3D,IAAI,MAAM,QAAQ;EAChB,IAAI,cAAc,MAAM,UAAU,KAAA,GAAW;GAC3C,MAAM,EAAE,UAAU,iBAAiB,kBAAkB,QAAQ,OAAO,GAAG,SAAS;GAChF,IACE,QAAQ,IAAI,aAAa,iBACxB,aAAa,KAAA,KAAa,oBAAoB,KAAA,KAAa,mBAE5D,QAAQ,KACN,8BAA8B,MAAM,oGACtC;GAEF,OAAO,oBAAC,eAAD;IAAe,GAAI;IAAa;IAAO,OAAO;GAAa,CAAA;EACpE;EACA,OAAO,oBAAC,YAAD,EAAY,GAAI,MAAQ,CAAA;CACjC;CACA,OAAO,oBAAC,YAAD,EAAY,GAAI,MAAQ,CAAA;AACjC"}

package/dist/styles/generated/components.css

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

package/dist/styles/utilities.css

@@ -281,3 +281,11 @@
 [data-overlay-placement] {
   inset: auto;
 }
+
+/* While ThemeProvider changes the colours: a control's fade is for its hover and press. */
+[data-wm-theme-changing],
+[data-wm-theme-changing] *,
+[data-wm-theme-changing] *::before,
+[data-wm-theme-changing] *::after {
+  transition: none !important;
+}