react-material-expressive 1.0.0 → 1.1.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, CSSProperties, MouseEventHandler, ComponentProps, MouseEvent } from 'react';
+import { ReactNode, CSSProperties, MouseEventHandler, ComponentProps, MouseEvent, ElementType } from 'react';
 
 /**
  * Structural type of a statically imported image (matches the object shape
@@ -446,6 +446,76 @@ interface ChipsProps extends ComponentProps<"button"> {
  */
 declare function Chips({ avatar, children, className, disabled, elevated, labels, leftElement, onRemove, rightElement, selected, text, type, variant, ...props }: ChipsProps): react.JSX.Element;
 
+interface ComboboxOption {
+    disabled?: boolean;
+    /** Display text; becomes the input's text when selected. Defaults to value. */
+    label?: string;
+    value: string;
+}
+interface ComboboxLabels {
+    /** aria-label for the clear button. Default "Clear". */
+    clear?: string;
+    /** Status row shown when there are no options. Default "No results". */
+    empty?: string;
+    /** Status row shown while options load. Default "Loading…". */
+    loading?: string;
+}
+interface ComboboxBaseProps extends Omit<ComponentProps<"input">, "defaultValue" | "onChange" | "size" | "value"> {
+    /** Class for the wrapper. */
+    className?: string;
+    /** Show a trailing clear button when the input has text (default true). */
+    clearable?: boolean;
+    /** Uncontrolled initial selected value. */
+    defaultValue?: string;
+    disabled?: boolean;
+    error?: boolean;
+    errorText?: ReactNode;
+    id?: string;
+    inputClassName?: string;
+    /** Floating label. */
+    label?: string;
+    /** Accessible names for the chrome. */
+    labels?: ComboboxLabels;
+    /** Leading icon (24px box; the field pads 48 on that side). */
+    leftElement?: ReactNode;
+    /** Class for the portaled listbox surface. */
+    listboxClassName?: string;
+    /** Consumer signals an in-flight async fetch (shows a status row). */
+    loading?: boolean;
+    /** Posts the selected value in native forms via a hidden input. */
+    name?: string;
+    /** Fires with the selected option value, or "" when cleared. */
+    onChange?: (value: string) => void;
+    /** Fires when the consumer should re-query (debounce on your side). */
+    onInputChange?: (query: string) => void;
+    /** Already-filtered options. The library does NOT fetch or filter. */
+    options: ComboboxOption[];
+    supportingText?: ReactNode;
+    /** Controlled selected value. */
+    value?: string;
+}
+
+type ComboboxFilledProps = ComboboxBaseProps;
+/**
+ * M3 filled combobox: the filled text field anatomy (height 56, shape small on
+ * the top corners, surface-container-highest, floating label, active
+ * indicator) over an ARIA combobox `<input>` with a portaled listbox. Options
+ * are consumer-controlled for async search — type to fire `onInputChange`,
+ * then feed the already-filtered `options` back in. Controllable via `value` +
+ * `onChange`.
+ */
+declare function ComboboxFilled({ className, clearable, defaultValue, disabled, error, errorText, id, inputClassName, label, labels, leftElement, listboxClassName, loading, name, onChange, onInputChange, options, supportingText, value: valueProp, ...inputProps }: ComboboxFilledProps): react.JSX.Element;
+
+type ComboboxOutlinedProps = ComboboxBaseProps;
+/**
+ * M3 outlined combobox: the outlined text field anatomy (height 56, shape
+ * small, fieldset/legend label notch) over an ARIA combobox `<input>` with a
+ * portaled listbox. Options are consumer-controlled for async search — type
+ * to fire `onInputChange`, then feed the already-filtered `options` back in.
+ * Controllable via `value` + `onChange`.
+ */
+declare function ComboboxOutlined({ className, clearable, defaultValue, disabled, error, errorText, id, inputClassName, label, labels, leftElement, listboxClassName, loading, name, onChange, onInputChange, options, supportingText, value: valueProp, ...inputProps }: ComboboxOutlinedProps): react.JSX.Element;
+
 interface TextContainerProps {
     children?: ReactNode;
     className?: string;
@@ -556,11 +626,14 @@ interface DatePickerDockedLabels extends CalendarLabels {
 }
 interface DatePickerDockedProps {
     className?: string;
+    error?: boolean;
+    errorText?: ReactNode;
     labels?: DatePickerDockedLabels;
     locale?: string;
     max?: Date | null;
     min?: Date | null;
     onChange?: (date: Date | null) => void;
+    supportingText?: ReactNode;
     value?: Date | null;
     weekStartsOn?: number;
 }
@@ -568,7 +641,7 @@ interface DatePickerDockedProps {
  * M3 docked date picker: an outlined field with a calendar icon that opens
  * a dropdown calendar anchored below it. Selection commits immediately.
  */
-declare function DatePickerDocked({ className, labels, locale, max, min, onChange, value, weekStartsOn, }: DatePickerDockedProps): react.JSX.Element;
+declare function DatePickerDocked({ className, error, errorText, labels, locale, max, min, onChange, supportingText, value, weekStartsOn, }: DatePickerDockedProps): react.JSX.Element;
 
 type DateRange = [Date | null, Date | null];
 interface DateRangePickerLabels extends CalendarLabels {
@@ -1153,18 +1226,26 @@ interface SearchItemProps {
 declare function SearchItem({ children, className, label, leftElement, onClick, rightElement, }: SearchItemProps): react.JSX.Element;
 
 interface SearchInputLabels {
+    /** Clear-button aria-label. Default "Clear". */
+    clear?: string;
     /** Input placeholder. Default "Search". */
     placeholder?: string;
 }
 interface SearchInputProps extends Omit<ComponentProps<"input">, "placeholder" | "size"> {
     /** Class for the wrapper. */
     className?: string;
+    /** Render a clear (×) button in the trailing slot when the input has a
+     *  value (unless `rightElement` is set). Default false. */
+    clearable?: boolean;
     inputClassName?: string;
-    /** Customizable text (input placeholder). */
+    /** Customizable text (placeholder, clear-button name). */
     labels?: SearchInputLabels;
     /** Leading slot (56px box), e.g. a search icon or back button. */
     leftElement?: ReactNode;
-    /** Trailing slot (56px box), e.g. an avatar or mic icon. */
+    /** Called after the clear button empties the input. */
+    onClear?: () => void;
+    /** Trailing slot (56px box), e.g. an avatar or mic icon. Takes precedence
+     *  over the clear button. */
     rightElement?: ReactNode;
 }
 /**
@@ -1172,9 +1253,11 @@ interface SearchInputProps extends Omit<ComponentProps<"input">, "placeholder" |
  * (search bars do not float labels). Transparent background — the `Search`
  * wrapper provides the container color and shape. Leading icon = on-surface
  * (the search icon is the primary affordance per the search-bar token set);
- * trailing icon/avatar = on-surface-variant.
+ * trailing icon/avatar = on-surface-variant. With `clearable`, a trailing
+ * clear button appears while there is a value (controllable or uncontrolled)
+ * and the inconsistent native `type=search` clear is hidden.
  */
-declare function SearchInput({ className, inputClassName, labels, leftElement, rightElement, ...inputProps }: SearchInputProps): react.JSX.Element;
+declare function SearchInput({ className, clearable, defaultValue, inputClassName, labels, leftElement, onChange, onClear, rightElement, value: valueProp, ...inputProps }: SearchInputProps): react.JSX.Element;
 
 interface SearchProps {
     /** The search bar content (usually a SearchInput). */
@@ -2032,19 +2115,37 @@ interface SwitchProps extends Omit<ComponentProps<"input">, "type" | "size" | "c
 declare function Switch({ checked: checkedProp, className, defaultChecked, disabled, icon, label, onChange, uncheckedIcon, ...inputProps }: SwitchProps): react.JSX.Element;
 
 interface TextElementProps {
+    /** Wrapper element, used only when more than one slot is rendered. Default
+     *  "div". With a single slot there is no wrapper — the text element is
+     *  rendered directly (semantic HTML; see the docs). */
+    as?: ElementType;
     /** Supporting text (body-medium, on-surface-variant). */
     body?: ReactNode;
+    /** Element for the body slot. Default "p". */
+    bodyAs?: ElementType;
     bodyStyle?: string;
     className?: string;
     /** Overline label (label-medium, on-surface-variant). */
     label?: ReactNode;
+    /** Element for the label slot. Default "p". */
+    labelAs?: ElementType;
     labelStyle?: string;
     /** Main text (title-medium, on-surface). */
     title?: ReactNode;
+    /** Element for the title slot. Default "h2" — set per heading hierarchy
+     *  (M3 a11y: heading level follows content, not visual style). */
+    titleAs?: ElementType;
     titleStyle?: string;
 }
-/** Label / title / body text stack using the M3 type scale. */
-declare function TextElement({ body, bodyStyle, className, label, labelStyle, title, titleStyle, }: TextElementProps): react.JSX.Element;
+/**
+ * Label / title / body text stack on the M3 type scale. Each slot renders only
+ * when provided and its element is polymorphic (`labelAs`/`titleAs`/`bodyAs`,
+ * defaulting to p/h2/p). With a single slot the element is rendered **directly**
+ * — no wrapper `<div>` — so e.g. a lone title is a bare `<h2>` (`className`
+ * applies to it). With two or more slots they are stacked in the `as` wrapper
+ * (default "div").
+ */
+declare function TextElement({ as: Wrapper, body, bodyAs: Body, bodyStyle, className, label, labelAs: Label, labelStyle, title, titleAs: Title, titleStyle, }: TextElementProps): react.JSX.Element | null;
 
 interface ContainerProps {
     children?: ReactNode;
@@ -2065,4 +2166,4 @@ interface SectionProps {
 /** Responsive content section: column on small screens, row on large. */
 declare function Section({ children, className }: SectionProps): react.JSX.Element;
 
-export { Amount, type AmountLabels, type AmountProps, type AppBarRowProps, Avatar, type AvatarProps, AvatarStack, type AvatarStackItem, type AvatarStackProps, Badge, type BadgeProps, Blob, type BlobProps, BottomSheet, type BottomSheetProps, type BusinessItemProps, Button, ButtonGroup, ButtonGroupConnected, type ButtonGroupConnectedProps, type ButtonGroupProps, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, type CardVariant, Checkbox, type CheckboxProps, Chips, type ChipsLabels, type ChipsProps, type ChipsVariant, Circle, type CircleLabels, type CircleProps, type CollapsingAppBarProps, Container, type ContainerProps, DatePicker, type DatePickerDockedLabels, type DatePickerDockedProps, type DatePickerLabels, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerLabels, type DateRangePickerProps, Dialog, type DialogBodyProps, type DialogFooterProps, type DialogHeaderProps, type DialogProps, Divider, type DividerProps, DockedToolbar, type DockedToolbarProps, DotBadge, type DotBadgeProps, Dropdown, type MenuItemProps as DropdownItemProps, type DropdownProps, ExtendedFAB, type ExtendedFABProps, type ExtendedFABVariant, FAB, FABMenu, type FABMenuItemProps, type FABMenuLabels, type FABMenuProps, type FABMenuVariant, type FABProps, type FABSize, type FABVariant, FloatingToolbar, type FloatingToolbarFabPosition, type FloatingToolbarProps, Gallery, type GalleryProps, Icon, IconButton, type IconButtonProps, type IconButtonShape, type IconButtonSize, type IconButtonVariant, type IconButtonWidth, type IconProps, type ImageRowProps, Img, type ImgProps, InputFilled, type InputFilledProps, InputOutlined, type InputOutlinedProps, LinkBox, type LinkBoxProps, LinkContainer, type LinkContainerProps, List, type ListItemProps, type ListProps, Loading, LoadingIndicator, type LoadingIndicatorLabels, type LoadingIndicatorProps, type LoadingLabels, type LoadingProps, MaterialSymbol, type MaterialSymbolProps, MediaFrame, type MediaFrameProps, Menu, type MenuDividerProps, type MenuGroupProps, type MenuItemProps, type MenuLabelProps, type MenuProps, type MenuSubProps, type NavBarItemProps, type NavRailItemProps, NavigationBar, type NavigationBarProps, NavigationRail, type NavigationRailLabels, type NavigationRailProps, OnIconBadge, type OnIconBadgeProps, OverflowMenu, type MenuItemProps as OverflowMenuItemProps, type OverflowMenuProps, PerspectiveCard, type PerspectiveCardProps, PerspectiveImage, type PerspectiveImageProps, Progress, type ProgressLabels, type ProgressProps, Radio, type RadioProps, Search, SearchInput, type SearchInputLabels, type SearchInputProps, type SearchItemProps, type SearchProps, Section, type SectionProps, SelectFilled, type SelectFilledProps, type SelectOption, SelectOutlined, type SelectOutlinedProps, SideSheet, type SideSheetLabels, type SideSheetProps, Slider, SliderDual, type SliderDualLabels, type SliderDualProps, type SliderDualValue, type SliderLabels, type SliderProps, Snackbar, type SnackbarLabels, type SnackbarProps, SnackbarWrapper, type SnackbarWrapperProps, SplitButton, type SplitButtonLabels, type SplitButtonProps, type SplitButtonVariant, Stories, type StoriesProps, Switch, type SwitchProps, type TabItem, Table, type TableBodyProps, type TableCellProps, type TableHeadProps, type TableHeaderCellProps, type TableProps, type TableRowProps, TabsPrimary, type TabsPrimaryProps, TabsSecondary, type TabsSecondaryProps, type TextContainerProps, TextElement, type TextElementProps, TextFieldFilled, type TextFieldFilledProps, TextFieldOutlined, type TextFieldOutlinedProps, TimePicker, type TimePickerLabels, type TimePickerProps, type TimeValue, ToggleTheme, type ToggleThemeLabels, ToggleThemeMenu, type ToggleThemeMenuItem, type ToggleThemeMenuLabels, type ToggleThemeMenuProps, type ToggleThemeProps, Tooltip, type TooltipProps, TopAppBar, type TopAppBarProps, type UserItemProps, Video, type VideoProps };
+export { Amount, type AmountLabels, type AmountProps, type AppBarRowProps, Avatar, type AvatarProps, AvatarStack, type AvatarStackItem, type AvatarStackProps, Badge, type BadgeProps, Blob, type BlobProps, BottomSheet, type BottomSheetProps, type BusinessItemProps, Button, ButtonGroup, ButtonGroupConnected, type ButtonGroupConnectedProps, type ButtonGroupProps, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, type CardVariant, Checkbox, type CheckboxProps, Chips, type ChipsLabels, type ChipsProps, type ChipsVariant, Circle, type CircleLabels, type CircleProps, type CollapsingAppBarProps, ComboboxFilled, type ComboboxFilledProps, type ComboboxLabels, type ComboboxOption, ComboboxOutlined, type ComboboxOutlinedProps, Container, type ContainerProps, DatePicker, type DatePickerDockedLabels, type DatePickerDockedProps, type DatePickerLabels, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerLabels, type DateRangePickerProps, Dialog, type DialogBodyProps, type DialogFooterProps, type DialogHeaderProps, type DialogProps, Divider, type DividerProps, DockedToolbar, type DockedToolbarProps, DotBadge, type DotBadgeProps, Dropdown, type MenuItemProps as DropdownItemProps, type DropdownProps, ExtendedFAB, type ExtendedFABProps, type ExtendedFABVariant, FAB, FABMenu, type FABMenuItemProps, type FABMenuLabels, type FABMenuProps, type FABMenuVariant, type FABProps, type FABSize, type FABVariant, FloatingToolbar, type FloatingToolbarFabPosition, type FloatingToolbarProps, Gallery, type GalleryProps, Icon, IconButton, type IconButtonProps, type IconButtonShape, type IconButtonSize, type IconButtonVariant, type IconButtonWidth, type IconProps, type ImageRowProps, Img, type ImgProps, InputFilled, type InputFilledProps, InputOutlined, type InputOutlinedProps, LinkBox, type LinkBoxProps, LinkContainer, type LinkContainerProps, List, type ListItemProps, type ListProps, Loading, LoadingIndicator, type LoadingIndicatorLabels, type LoadingIndicatorProps, type LoadingLabels, type LoadingProps, MaterialSymbol, type MaterialSymbolProps, MediaFrame, type MediaFrameProps, Menu, type MenuDividerProps, type MenuGroupProps, type MenuItemProps, type MenuLabelProps, type MenuProps, type MenuSubProps, type NavBarItemProps, type NavRailItemProps, NavigationBar, type NavigationBarProps, NavigationRail, type NavigationRailLabels, type NavigationRailProps, OnIconBadge, type OnIconBadgeProps, OverflowMenu, type MenuItemProps as OverflowMenuItemProps, type OverflowMenuProps, PerspectiveCard, type PerspectiveCardProps, PerspectiveImage, type PerspectiveImageProps, Progress, type ProgressLabels, type ProgressProps, Radio, type RadioProps, Search, SearchInput, type SearchInputLabels, type SearchInputProps, type SearchItemProps, type SearchProps, Section, type SectionProps, SelectFilled, type SelectFilledProps, type SelectOption, SelectOutlined, type SelectOutlinedProps, SideSheet, type SideSheetLabels, type SideSheetProps, Slider, SliderDual, type SliderDualLabels, type SliderDualProps, type SliderDualValue, type SliderLabels, type SliderProps, Snackbar, type SnackbarLabels, type SnackbarProps, SnackbarWrapper, type SnackbarWrapperProps, SplitButton, type SplitButtonLabels, type SplitButtonProps, type SplitButtonVariant, Stories, type StoriesProps, Switch, type SwitchProps, type TabItem, Table, type TableBodyProps, type TableCellProps, type TableHeadProps, type TableHeaderCellProps, type TableProps, type TableRowProps, TabsPrimary, type TabsPrimaryProps, TabsSecondary, type TabsSecondaryProps, type TextContainerProps, TextElement, type TextElementProps, TextFieldFilled, type TextFieldFilledProps, TextFieldOutlined, type TextFieldOutlinedProps, TimePicker, type TimePickerLabels, type TimePickerProps, type TimeValue, ToggleTheme, type ToggleThemeLabels, ToggleThemeMenu, type ToggleThemeMenuItem, type ToggleThemeMenuLabels, type ToggleThemeMenuProps, type ToggleThemeProps, Tooltip, type TooltipProps, TopAppBar, type TopAppBarProps, type UserItemProps, Video, type VideoProps };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, CSSProperties, MouseEventHandler, ComponentProps, MouseEvent } from 'react';
+import { ReactNode, CSSProperties, MouseEventHandler, ComponentProps, MouseEvent, ElementType } from 'react';
 
 /**
  * Structural type of a statically imported image (matches the object shape
@@ -446,6 +446,76 @@ interface ChipsProps extends ComponentProps<"button"> {
  */
 declare function Chips({ avatar, children, className, disabled, elevated, labels, leftElement, onRemove, rightElement, selected, text, type, variant, ...props }: ChipsProps): react.JSX.Element;
 
+interface ComboboxOption {
+    disabled?: boolean;
+    /** Display text; becomes the input's text when selected. Defaults to value. */
+    label?: string;
+    value: string;
+}
+interface ComboboxLabels {
+    /** aria-label for the clear button. Default "Clear". */
+    clear?: string;
+    /** Status row shown when there are no options. Default "No results". */
+    empty?: string;
+    /** Status row shown while options load. Default "Loading…". */
+    loading?: string;
+}
+interface ComboboxBaseProps extends Omit<ComponentProps<"input">, "defaultValue" | "onChange" | "size" | "value"> {
+    /** Class for the wrapper. */
+    className?: string;
+    /** Show a trailing clear button when the input has text (default true). */
+    clearable?: boolean;
+    /** Uncontrolled initial selected value. */
+    defaultValue?: string;
+    disabled?: boolean;
+    error?: boolean;
+    errorText?: ReactNode;
+    id?: string;
+    inputClassName?: string;
+    /** Floating label. */
+    label?: string;
+    /** Accessible names for the chrome. */
+    labels?: ComboboxLabels;
+    /** Leading icon (24px box; the field pads 48 on that side). */
+    leftElement?: ReactNode;
+    /** Class for the portaled listbox surface. */
+    listboxClassName?: string;
+    /** Consumer signals an in-flight async fetch (shows a status row). */
+    loading?: boolean;
+    /** Posts the selected value in native forms via a hidden input. */
+    name?: string;
+    /** Fires with the selected option value, or "" when cleared. */
+    onChange?: (value: string) => void;
+    /** Fires when the consumer should re-query (debounce on your side). */
+    onInputChange?: (query: string) => void;
+    /** Already-filtered options. The library does NOT fetch or filter. */
+    options: ComboboxOption[];
+    supportingText?: ReactNode;
+    /** Controlled selected value. */
+    value?: string;
+}
+
+type ComboboxFilledProps = ComboboxBaseProps;
+/**
+ * M3 filled combobox: the filled text field anatomy (height 56, shape small on
+ * the top corners, surface-container-highest, floating label, active
+ * indicator) over an ARIA combobox `<input>` with a portaled listbox. Options
+ * are consumer-controlled for async search — type to fire `onInputChange`,
+ * then feed the already-filtered `options` back in. Controllable via `value` +
+ * `onChange`.
+ */
+declare function ComboboxFilled({ className, clearable, defaultValue, disabled, error, errorText, id, inputClassName, label, labels, leftElement, listboxClassName, loading, name, onChange, onInputChange, options, supportingText, value: valueProp, ...inputProps }: ComboboxFilledProps): react.JSX.Element;
+
+type ComboboxOutlinedProps = ComboboxBaseProps;
+/**
+ * M3 outlined combobox: the outlined text field anatomy (height 56, shape
+ * small, fieldset/legend label notch) over an ARIA combobox `<input>` with a
+ * portaled listbox. Options are consumer-controlled for async search — type
+ * to fire `onInputChange`, then feed the already-filtered `options` back in.
+ * Controllable via `value` + `onChange`.
+ */
+declare function ComboboxOutlined({ className, clearable, defaultValue, disabled, error, errorText, id, inputClassName, label, labels, leftElement, listboxClassName, loading, name, onChange, onInputChange, options, supportingText, value: valueProp, ...inputProps }: ComboboxOutlinedProps): react.JSX.Element;
+
 interface TextContainerProps {
     children?: ReactNode;
     className?: string;
@@ -556,11 +626,14 @@ interface DatePickerDockedLabels extends CalendarLabels {
 }
 interface DatePickerDockedProps {
     className?: string;
+    error?: boolean;
+    errorText?: ReactNode;
     labels?: DatePickerDockedLabels;
     locale?: string;
     max?: Date | null;
     min?: Date | null;
     onChange?: (date: Date | null) => void;
+    supportingText?: ReactNode;
     value?: Date | null;
     weekStartsOn?: number;
 }
@@ -568,7 +641,7 @@ interface DatePickerDockedProps {
  * M3 docked date picker: an outlined field with a calendar icon that opens
  * a dropdown calendar anchored below it. Selection commits immediately.
  */
-declare function DatePickerDocked({ className, labels, locale, max, min, onChange, value, weekStartsOn, }: DatePickerDockedProps): react.JSX.Element;
+declare function DatePickerDocked({ className, error, errorText, labels, locale, max, min, onChange, supportingText, value, weekStartsOn, }: DatePickerDockedProps): react.JSX.Element;
 
 type DateRange = [Date | null, Date | null];
 interface DateRangePickerLabels extends CalendarLabels {
@@ -1153,18 +1226,26 @@ interface SearchItemProps {
 declare function SearchItem({ children, className, label, leftElement, onClick, rightElement, }: SearchItemProps): react.JSX.Element;
 
 interface SearchInputLabels {
+    /** Clear-button aria-label. Default "Clear". */
+    clear?: string;
     /** Input placeholder. Default "Search". */
     placeholder?: string;
 }
 interface SearchInputProps extends Omit<ComponentProps<"input">, "placeholder" | "size"> {
     /** Class for the wrapper. */
     className?: string;
+    /** Render a clear (×) button in the trailing slot when the input has a
+     *  value (unless `rightElement` is set). Default false. */
+    clearable?: boolean;
     inputClassName?: string;
-    /** Customizable text (input placeholder). */
+    /** Customizable text (placeholder, clear-button name). */
     labels?: SearchInputLabels;
     /** Leading slot (56px box), e.g. a search icon or back button. */
     leftElement?: ReactNode;
-    /** Trailing slot (56px box), e.g. an avatar or mic icon. */
+    /** Called after the clear button empties the input. */
+    onClear?: () => void;
+    /** Trailing slot (56px box), e.g. an avatar or mic icon. Takes precedence
+     *  over the clear button. */
     rightElement?: ReactNode;
 }
 /**
@@ -1172,9 +1253,11 @@ interface SearchInputProps extends Omit<ComponentProps<"input">, "placeholder" |
  * (search bars do not float labels). Transparent background — the `Search`
  * wrapper provides the container color and shape. Leading icon = on-surface
  * (the search icon is the primary affordance per the search-bar token set);
- * trailing icon/avatar = on-surface-variant.
+ * trailing icon/avatar = on-surface-variant. With `clearable`, a trailing
+ * clear button appears while there is a value (controllable or uncontrolled)
+ * and the inconsistent native `type=search` clear is hidden.
  */
-declare function SearchInput({ className, inputClassName, labels, leftElement, rightElement, ...inputProps }: SearchInputProps): react.JSX.Element;
+declare function SearchInput({ className, clearable, defaultValue, inputClassName, labels, leftElement, onChange, onClear, rightElement, value: valueProp, ...inputProps }: SearchInputProps): react.JSX.Element;
 
 interface SearchProps {
     /** The search bar content (usually a SearchInput). */
@@ -2032,19 +2115,37 @@ interface SwitchProps extends Omit<ComponentProps<"input">, "type" | "size" | "c
 declare function Switch({ checked: checkedProp, className, defaultChecked, disabled, icon, label, onChange, uncheckedIcon, ...inputProps }: SwitchProps): react.JSX.Element;
 
 interface TextElementProps {
+    /** Wrapper element, used only when more than one slot is rendered. Default
+     *  "div". With a single slot there is no wrapper — the text element is
+     *  rendered directly (semantic HTML; see the docs). */
+    as?: ElementType;
     /** Supporting text (body-medium, on-surface-variant). */
     body?: ReactNode;
+    /** Element for the body slot. Default "p". */
+    bodyAs?: ElementType;
     bodyStyle?: string;
     className?: string;
     /** Overline label (label-medium, on-surface-variant). */
     label?: ReactNode;
+    /** Element for the label slot. Default "p". */
+    labelAs?: ElementType;
     labelStyle?: string;
     /** Main text (title-medium, on-surface). */
     title?: ReactNode;
+    /** Element for the title slot. Default "h2" — set per heading hierarchy
+     *  (M3 a11y: heading level follows content, not visual style). */
+    titleAs?: ElementType;
     titleStyle?: string;
 }
-/** Label / title / body text stack using the M3 type scale. */
-declare function TextElement({ body, bodyStyle, className, label, labelStyle, title, titleStyle, }: TextElementProps): react.JSX.Element;
+/**
+ * Label / title / body text stack on the M3 type scale. Each slot renders only
+ * when provided and its element is polymorphic (`labelAs`/`titleAs`/`bodyAs`,
+ * defaulting to p/h2/p). With a single slot the element is rendered **directly**
+ * — no wrapper `<div>` — so e.g. a lone title is a bare `<h2>` (`className`
+ * applies to it). With two or more slots they are stacked in the `as` wrapper
+ * (default "div").
+ */
+declare function TextElement({ as: Wrapper, body, bodyAs: Body, bodyStyle, className, label, labelAs: Label, labelStyle, title, titleAs: Title, titleStyle, }: TextElementProps): react.JSX.Element | null;
 
 interface ContainerProps {
     children?: ReactNode;
@@ -2065,4 +2166,4 @@ interface SectionProps {
 /** Responsive content section: column on small screens, row on large. */
 declare function Section({ children, className }: SectionProps): react.JSX.Element;
 
-export { Amount, type AmountLabels, type AmountProps, type AppBarRowProps, Avatar, type AvatarProps, AvatarStack, type AvatarStackItem, type AvatarStackProps, Badge, type BadgeProps, Blob, type BlobProps, BottomSheet, type BottomSheetProps, type BusinessItemProps, Button, ButtonGroup, ButtonGroupConnected, type ButtonGroupConnectedProps, type ButtonGroupProps, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, type CardVariant, Checkbox, type CheckboxProps, Chips, type ChipsLabels, type ChipsProps, type ChipsVariant, Circle, type CircleLabels, type CircleProps, type CollapsingAppBarProps, Container, type ContainerProps, DatePicker, type DatePickerDockedLabels, type DatePickerDockedProps, type DatePickerLabels, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerLabels, type DateRangePickerProps, Dialog, type DialogBodyProps, type DialogFooterProps, type DialogHeaderProps, type DialogProps, Divider, type DividerProps, DockedToolbar, type DockedToolbarProps, DotBadge, type DotBadgeProps, Dropdown, type MenuItemProps as DropdownItemProps, type DropdownProps, ExtendedFAB, type ExtendedFABProps, type ExtendedFABVariant, FAB, FABMenu, type FABMenuItemProps, type FABMenuLabels, type FABMenuProps, type FABMenuVariant, type FABProps, type FABSize, type FABVariant, FloatingToolbar, type FloatingToolbarFabPosition, type FloatingToolbarProps, Gallery, type GalleryProps, Icon, IconButton, type IconButtonProps, type IconButtonShape, type IconButtonSize, type IconButtonVariant, type IconButtonWidth, type IconProps, type ImageRowProps, Img, type ImgProps, InputFilled, type InputFilledProps, InputOutlined, type InputOutlinedProps, LinkBox, type LinkBoxProps, LinkContainer, type LinkContainerProps, List, type ListItemProps, type ListProps, Loading, LoadingIndicator, type LoadingIndicatorLabels, type LoadingIndicatorProps, type LoadingLabels, type LoadingProps, MaterialSymbol, type MaterialSymbolProps, MediaFrame, type MediaFrameProps, Menu, type MenuDividerProps, type MenuGroupProps, type MenuItemProps, type MenuLabelProps, type MenuProps, type MenuSubProps, type NavBarItemProps, type NavRailItemProps, NavigationBar, type NavigationBarProps, NavigationRail, type NavigationRailLabels, type NavigationRailProps, OnIconBadge, type OnIconBadgeProps, OverflowMenu, type MenuItemProps as OverflowMenuItemProps, type OverflowMenuProps, PerspectiveCard, type PerspectiveCardProps, PerspectiveImage, type PerspectiveImageProps, Progress, type ProgressLabels, type ProgressProps, Radio, type RadioProps, Search, SearchInput, type SearchInputLabels, type SearchInputProps, type SearchItemProps, type SearchProps, Section, type SectionProps, SelectFilled, type SelectFilledProps, type SelectOption, SelectOutlined, type SelectOutlinedProps, SideSheet, type SideSheetLabels, type SideSheetProps, Slider, SliderDual, type SliderDualLabels, type SliderDualProps, type SliderDualValue, type SliderLabels, type SliderProps, Snackbar, type SnackbarLabels, type SnackbarProps, SnackbarWrapper, type SnackbarWrapperProps, SplitButton, type SplitButtonLabels, type SplitButtonProps, type SplitButtonVariant, Stories, type StoriesProps, Switch, type SwitchProps, type TabItem, Table, type TableBodyProps, type TableCellProps, type TableHeadProps, type TableHeaderCellProps, type TableProps, type TableRowProps, TabsPrimary, type TabsPrimaryProps, TabsSecondary, type TabsSecondaryProps, type TextContainerProps, TextElement, type TextElementProps, TextFieldFilled, type TextFieldFilledProps, TextFieldOutlined, type TextFieldOutlinedProps, TimePicker, type TimePickerLabels, type TimePickerProps, type TimeValue, ToggleTheme, type ToggleThemeLabels, ToggleThemeMenu, type ToggleThemeMenuItem, type ToggleThemeMenuLabels, type ToggleThemeMenuProps, type ToggleThemeProps, Tooltip, type TooltipProps, TopAppBar, type TopAppBarProps, type UserItemProps, Video, type VideoProps };
+export { Amount, type AmountLabels, type AmountProps, type AppBarRowProps, Avatar, type AvatarProps, AvatarStack, type AvatarStackItem, type AvatarStackProps, Badge, type BadgeProps, Blob, type BlobProps, BottomSheet, type BottomSheetProps, type BusinessItemProps, Button, ButtonGroup, ButtonGroupConnected, type ButtonGroupConnectedProps, type ButtonGroupProps, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, type CardVariant, Checkbox, type CheckboxProps, Chips, type ChipsLabels, type ChipsProps, type ChipsVariant, Circle, type CircleLabels, type CircleProps, type CollapsingAppBarProps, ComboboxFilled, type ComboboxFilledProps, type ComboboxLabels, type ComboboxOption, ComboboxOutlined, type ComboboxOutlinedProps, Container, type ContainerProps, DatePicker, type DatePickerDockedLabels, type DatePickerDockedProps, type DatePickerLabels, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerLabels, type DateRangePickerProps, Dialog, type DialogBodyProps, type DialogFooterProps, type DialogHeaderProps, type DialogProps, Divider, type DividerProps, DockedToolbar, type DockedToolbarProps, DotBadge, type DotBadgeProps, Dropdown, type MenuItemProps as DropdownItemProps, type DropdownProps, ExtendedFAB, type ExtendedFABProps, type ExtendedFABVariant, FAB, FABMenu, type FABMenuItemProps, type FABMenuLabels, type FABMenuProps, type FABMenuVariant, type FABProps, type FABSize, type FABVariant, FloatingToolbar, type FloatingToolbarFabPosition, type FloatingToolbarProps, Gallery, type GalleryProps, Icon, IconButton, type IconButtonProps, type IconButtonShape, type IconButtonSize, type IconButtonVariant, type IconButtonWidth, type IconProps, type ImageRowProps, Img, type ImgProps, InputFilled, type InputFilledProps, InputOutlined, type InputOutlinedProps, LinkBox, type LinkBoxProps, LinkContainer, type LinkContainerProps, List, type ListItemProps, type ListProps, Loading, LoadingIndicator, type LoadingIndicatorLabels, type LoadingIndicatorProps, type LoadingLabels, type LoadingProps, MaterialSymbol, type MaterialSymbolProps, MediaFrame, type MediaFrameProps, Menu, type MenuDividerProps, type MenuGroupProps, type MenuItemProps, type MenuLabelProps, type MenuProps, type MenuSubProps, type NavBarItemProps, type NavRailItemProps, NavigationBar, type NavigationBarProps, NavigationRail, type NavigationRailLabels, type NavigationRailProps, OnIconBadge, type OnIconBadgeProps, OverflowMenu, type MenuItemProps as OverflowMenuItemProps, type OverflowMenuProps, PerspectiveCard, type PerspectiveCardProps, PerspectiveImage, type PerspectiveImageProps, Progress, type ProgressLabels, type ProgressProps, Radio, type RadioProps, Search, SearchInput, type SearchInputLabels, type SearchInputProps, type SearchItemProps, type SearchProps, Section, type SectionProps, SelectFilled, type SelectFilledProps, type SelectOption, SelectOutlined, type SelectOutlinedProps, SideSheet, type SideSheetLabels, type SideSheetProps, Slider, SliderDual, type SliderDualLabels, type SliderDualProps, type SliderDualValue, type SliderLabels, type SliderProps, Snackbar, type SnackbarLabels, type SnackbarProps, SnackbarWrapper, type SnackbarWrapperProps, SplitButton, type SplitButtonLabels, type SplitButtonProps, type SplitButtonVariant, Stories, type StoriesProps, Switch, type SwitchProps, type TabItem, Table, type TableBodyProps, type TableCellProps, type TableHeadProps, type TableHeaderCellProps, type TableProps, type TableRowProps, TabsPrimary, type TabsPrimaryProps, TabsSecondary, type TabsSecondaryProps, type TextContainerProps, TextElement, type TextElementProps, TextFieldFilled, type TextFieldFilledProps, TextFieldOutlined, type TextFieldOutlinedProps, TimePicker, type TimePickerLabels, type TimePickerProps, type TimeValue, ToggleTheme, type ToggleThemeLabels, ToggleThemeMenu, type ToggleThemeMenuItem, type ToggleThemeMenuLabels, type ToggleThemeMenuProps, type ToggleThemeProps, Tooltip, type TooltipProps, TopAppBar, type TopAppBarProps, type UserItemProps, Video, type VideoProps };