@boostdev/design-system-components 2.7.1 → 2.11.0

package/dist/index.d.cts

@@ -43,6 +43,10 @@ declare function Badge({ children, variant, className, ...rest }: BadgeProps): r
 
 interface BreadcrumbItem {
     label: string;
+    /**
+     * Destination URL. Optional even for non-last items: an item without
+     * `href` renders as non-interactive text instead of an unusable link.
+     */
     href?: string;
 }
 interface BreadcrumbProps extends WithClassName, HTMLAttributes<HTMLElement> {
@@ -59,7 +63,11 @@ interface CollapsibleProps extends WithClassName, Omit<HTMLAttributes<HTMLDetail
     open?: boolean;
     /** Uncontrolled initial open state */
     defaultOpen?: boolean;
-    /** Called after each toggle with the new open state */
+    /**
+     * Called on toggle with the new open state. When `open` is controlled,
+     * this reports the requested next state instead of applying it — update
+     * `open` in response to actually expand or collapse the panel.
+     */
     onToggle?: (open: boolean) => void;
     /**
      * Groups multiple Collapsible elements so only one is open at a time
@@ -69,14 +77,50 @@ interface CollapsibleProps extends WithClassName, Omit<HTMLAttributes<HTMLDetail
 }
 declare function Collapsible({ summary, children, open, defaultOpen, onToggle, name, className, ...rest }: Readonly<CollapsibleProps>): react_jsx_runtime.JSX.Element;
 
+type PageBy$1 = 'months' | 'single';
 interface CalendarProps extends WithClassName, Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
     value?: Date;
     defaultValue?: Date;
     min?: Date;
     max?: Date;
+    months?: number;
+    pageBy?: PageBy$1;
+    firstDayOfWeek?: number;
+    locale?: string;
+    isDateDisallowed?: (date: Date) => boolean;
+    formatWeekday?: (date: Date) => string;
+    formatMonth?: (date: Date) => string;
+    formatDay?: (date: Date) => string;
+    labels?: {
+        previousMonth?: string;
+        nextMonth?: string;
+    };
     onChange?: (date: Date) => void;
 }
-declare function Calendar({ value, defaultValue, min, max, onChange, className, ...rest }: Readonly<CalendarProps>): react_jsx_runtime.JSX.Element;
+declare function Calendar({ value, defaultValue, min, max, months, pageBy, firstDayOfWeek, locale, isDateDisallowed, formatWeekday, formatMonth, formatDay, labels, onChange, className, ...rest }: Readonly<CalendarProps>): react_jsx_runtime.JSX.Element;
+
+type PageBy = 'months' | 'single';
+interface CalendarRangeProps extends WithClassName, Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+    value?: [Date, Date];
+    defaultValue?: [Date, Date];
+    min?: Date;
+    max?: Date;
+    months?: number;
+    pageBy?: PageBy;
+    firstDayOfWeek?: number;
+    locale?: string;
+    isDateDisallowed?: (date: Date) => boolean;
+    formatWeekday?: (date: Date) => string;
+    formatMonth?: (date: Date) => string;
+    formatDay?: (date: Date) => string;
+    labels?: {
+        previousMonth?: string;
+        nextMonth?: string;
+    };
+    onChange?: (range: [Date, Date]) => void;
+    onRangeStart?: (date: Date) => void;
+}
+declare function CalendarRange({ value, defaultValue, min, max, months, pageBy, firstDayOfWeek, locale, isDateDisallowed, formatWeekday, formatMonth, formatDay, labels, onChange, onRangeStart, className, ...rest }: Readonly<CalendarRangeProps>): react_jsx_runtime.JSX.Element;
 
 interface CarouselProps extends WithClassName, HTMLAttributes<HTMLElement> {
     items: ReactNode[];
@@ -107,7 +151,7 @@ declare function Link<T extends ElementType = 'a'>({ as, children, variant, exte
 interface LoadingProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
     size?: 'small' | 'medium' | 'large';
 }
-declare function Loading({ size, className, ...rest }: LoadingProps): react_jsx_runtime.JSX.Element;
+declare function Loading({ size, className, 'aria-label': ariaLabel, ...rest }: LoadingProps): react_jsx_runtime.JSX.Element;
 
 interface NotificationBannerProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
     variant?: 'info' | 'success' | 'warning' | 'error';
@@ -158,17 +202,28 @@ interface TableColumn<Row> {
     key: string;
     header: ReactNode;
     sortable?: boolean;
+    /**
+     * Accessible label for the sort button, used instead of stringifying `header`.
+     * Required for a reliable accessible name when `header` is not plain text
+     * (e.g. an icon or custom ReactNode) — otherwise the button falls back to
+     * its visible text content.
+     */
+    sortLabel?: string;
     render?: (row: Row) => ReactNode;
 }
-interface TableProps<Row extends Record<string, unknown>> extends WithClassName {
+interface TableProps<Row extends Record<string, unknown>> extends WithClassName, HTMLAttributes<HTMLDivElement> {
     columns: TableColumn<Row>[];
     rows: Row[];
     caption?: string;
     sortKey?: string;
     sortDirection?: 'asc' | 'desc';
     onSort?: (key: string, direction: 'asc' | 'desc') => void;
+    /**
+     * Derives a stable React key per row. Defaults to the row index when omitted.
+     */
+    rowKey?: (row: Row, index: number) => string;
 }
-declare function Table<Row extends Record<string, unknown>>({ columns, rows, caption, sortKey, sortDirection, onSort, className, }: Readonly<TableProps<Row>>): react_jsx_runtime.JSX.Element;
+declare function Table<Row extends Record<string, unknown>>({ columns, rows, caption, sortKey, sortDirection, onSort, rowKey, className, ...rest }: Readonly<TableProps<Row>>): react_jsx_runtime.JSX.Element;
 
 interface TabItem {
     id: string;
@@ -305,7 +360,7 @@ interface RatingProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
 }
 declare function Rating({ value, max, className, ...rest }: RatingProps): react_jsx_runtime.JSX.Element;
 
-type ToastVariant = 'success' | 'error' | 'info';
+type ToastVariant = 'success' | 'error' | 'info' | 'warning';
 interface ToastContextType {
     showToast: (message: string, variant: ToastVariant) => void;
 }
@@ -352,9 +407,8 @@ declare function Combobox({ label, name, options, placeholder, value, onChange,
  * Layout variants for FieldGroup.
  *
  * - `horizontal` (default) — fields flow into a row, each claiming at least
- *   `--fieldGroup_min-field-width`. When the container's inline-size is too
- *   narrow to fit the row, a CSS container query collapses the layout to a
- *   single column.
+ *   `--fieldGroup_min-field-width`. When the FieldGroup's own inline-size is
+ *   too narrow to fit the row, the layout collapses to a single column.
  * - `vertical` — fields always stack one per row.
  */
 type FieldGroupVariant = 'horizontal' | 'vertical';
@@ -369,8 +423,8 @@ interface FieldGroupProps extends WithClassName, FieldsetHTMLAttributes<HTMLFiel
 }
 /**
  * `FieldGroup` semantically groups related form fields under a single
- * `<fieldset>` and lays them out either horizontally (with container-query
- * fallback to vertical) or vertically.
+ * `<fieldset>` and lays them out either horizontally (collapsing to a
+ * single column when the FieldGroup itself is too narrow) or vertically.
  */
 declare function FieldGroup({ variant, legend, children, className, style, ...rest }: Readonly<FieldGroupProps>): react_jsx_runtime.JSX.Element;
 
@@ -391,11 +445,15 @@ interface FormInputProps extends WithClassName, Omit<InputHTMLAttributes<HTMLInp
     label: ReactNode;
     name: string;
     type?: Exclude<HTMLInputTypeAttribute, 'checkbox' | 'radio' | 'file'>;
+    /**
+     * @deprecated Use the native `aria-label` attribute instead. Kept working for backwards
+     * compatibility; will be removed in a later major.
+     */
     ariaLabel?: string;
     error?: string;
     hint?: string;
 }
-declare function FormInput({ label, name, ariaLabel, error, hint, className, required, ...props }: FormInputProps): react_jsx_runtime.JSX.Element;
+declare function FormInput({ label, name, ariaLabel, error, hint, className, required, 'aria-label': nativeAriaLabel, ...props }: FormInputProps): react_jsx_runtime.JSX.Element;
 
 interface NumberInputProps extends WithClassName, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     label: string;
@@ -409,8 +467,12 @@ interface NumberInputProps extends WithClassName, Omit<HTMLAttributes<HTMLDivEle
     error?: string;
     hint?: string;
     onChange?: (value: number) => void;
+    /** Accessible label for the decrement (−) stepper button. Defaults to `'Decrease'`. */
+    decreaseLabel?: string;
+    /** Accessible label for the increment (+) stepper button. Defaults to `'Increase'`. */
+    increaseLabel?: string;
 }
-declare function NumberInput({ label, name, value, defaultValue, min, max, step, disabled, error, hint, onChange, className, ...rest }: Readonly<NumberInputProps>): react_jsx_runtime.JSX.Element;
+declare function NumberInput({ label, name, value, defaultValue, min, max, step, disabled, error, hint, onChange, className, decreaseLabel, increaseLabel, ...rest }: Readonly<NumberInputProps>): react_jsx_runtime.JSX.Element;
 
 interface RadioProps extends WithClassName, Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
     label: ReactNode;
@@ -419,7 +481,7 @@ interface RadioProps extends WithClassName, Omit<InputHTMLAttributes<HTMLInputEl
     error?: string;
     hint?: string;
 }
-declare function Radio({ label, name, description, error, hint, className, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
+declare function Radio({ label, name, description, error, hint, className, id: consumerId, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
 
 interface RadioGroupProps extends WithClassName, FieldsetHTMLAttributes<HTMLFieldSetElement> {
     legend: string;
@@ -456,7 +518,7 @@ interface SelectProps extends WithClassName, Omit<SelectHTMLAttributes<HTMLSelec
     error?: string;
     hint?: string;
 }
-declare function Select({ label, name, options, placeholder, error, hint, className, required, ...props }: Readonly<SelectProps>): react_jsx_runtime.JSX.Element;
+declare function Select({ label, name, options, placeholder, error, hint, className, required, id, value, defaultValue, ...rest }: Readonly<SelectProps>): react_jsx_runtime.JSX.Element;
 
 interface SliderProps extends WithClassName, Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
     label: string;
@@ -485,7 +547,7 @@ interface TextareaProps extends WithClassName, TextareaHTMLAttributes<HTMLTextAr
     error?: string;
     hint?: string;
 }
-declare function Textarea({ label, name, error, hint, className, required, ...props }: Readonly<TextareaProps>): react_jsx_runtime.JSX.Element;
+declare function Textarea({ label, name, error, hint, className, required, id: idProp, ...props }: Readonly<TextareaProps>): react_jsx_runtime.JSX.Element;
 
 interface ButtonContainerProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
     variant?: 'flow' | 'card' | 'modal' | 'content';
@@ -500,13 +562,13 @@ declare const ButtonGroup: typeof ButtonContainer;
  */
 type ButtonGroupProps = ButtonContainerProps;
 
-type CardOwnProps = WithClassName & {
+type CardOwnProps<C extends ElementType> = WithClassName & {
     variant?: 'default' | 'elevated' | 'outlined';
     padding?: 'none' | 'small' | 'medium' | 'large' | 'extra-large';
     textAlign?: 'start' | 'center' | 'end';
-    as?: ElementType;
+    as?: C;
 };
-type CardProps<C extends ElementType = 'div'> = CardOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof CardOwnProps>;
+type CardProps<C extends ElementType = 'div'> = CardOwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof CardOwnProps<C>>;
 declare function Card<C extends ElementType = 'div'>({ children, className, variant, padding, textAlign, as, onClick, ...rest }: CardProps<C>): react_jsx_runtime.JSX.Element;
 
 type GridItemSpanValue = 'full' | 'three-quarters' | 'two-thirds' | 'half' | 'one-third' | 'one-quarter' | 'auto' | number;
@@ -519,18 +581,18 @@ declare const GridItemSpan: {
     readonly oneQuarter: "one-quarter";
     readonly auto: "auto";
 };
-type GridItemOwnProps = WithClassName & {
+type GridItemOwnProps<C extends ElementType> = WithClassName & {
     columnSpan?: GridItemSpanValue;
     rowSpan?: number;
     startColumn?: number;
     endColumn?: number;
-    as?: ElementType;
+    as?: C;
 };
-type GridItemProps<C extends ElementType = 'div'> = GridItemOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof GridItemOwnProps>;
+type GridItemProps<C extends ElementType = 'div'> = GridItemOwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof GridItemOwnProps<C>>;
 declare function GridItem<C extends ElementType = 'div'>({ children, className, columnSpan, rowSpan, startColumn, endColumn, as, style, ...rest }: GridItemProps<C>): react_jsx_runtime.JSX.Element;
 
 type GridVariant = 'main' | 'page' | 'funnel' | 'custom';
-type GridOwnProps = WithClassName & {
+type GridOwnProps<C extends ElementType> = WithClassName & {
     variant?: GridVariant;
     columns?: number;
     isCentered?: boolean;
@@ -564,9 +626,9 @@ type GridOwnProps = WithClassName & {
      * you've confirmed the auto-tuner is wrong for your case.
      */
     masonryRowUnitPx?: number;
-    as?: ElementType;
+    as?: C;
 };
-type GridProps<C extends ElementType = 'div'> = GridOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof GridOwnProps>;
+type GridProps<C extends ElementType = 'div'> = GridOwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof GridOwnProps<C>>;
 declare function Grid<C extends ElementType = 'div'>({ children, className, variant, columns, isCentered, isMasonry, autoSpanMedia, masonryPreferredColumnSpan, masonryRowUnitPx, as, style, ...rest }: GridProps<C>): react_jsx_runtime.JSX.Element;
 
 type IntrinsicElement = keyof JSX.IntrinsicElements;
@@ -584,4 +646,4 @@ interface IconWrapperProps extends WithClassName, HTMLAttributes<HTMLDivElement>
 }
 declare function IconWrapper({ children, className, ...rest }: IconWrapperProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonContainer, type ButtonContainerProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, Card, Carousel, Checkbox, CheckboxGroup, type CheckboxGroupProps, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, Command, type CommandItem, type DescriptionItem, DescriptionList, Dialog, Drawer, DropdownMenu, type DropdownMenuItem, FieldGroup, type FieldGroupProps, type FieldGroupVariant, FileInput, FormInput, Grid, GridItem, GridItemSpan, type GridItemSpanValue, type GridVariant, IconWrapper, type IconWrapperProps, Link, Loading, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, RadioGroup, type RadioGroupProps, Rating, SectionHeader, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, Separator, Skeleton, SkipLink, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, ToastProvider, Tooltip, Typography, type WithClassName, useToast };
+export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonContainer, type ButtonContainerProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, CalendarRange, Card, Carousel, Checkbox, CheckboxGroup, type CheckboxGroupProps, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, Command, type CommandItem, type CommandProps, type DescriptionItem, DescriptionList, Dialog, type DialogProps, Drawer, type DrawerProps, DropdownMenu, type DropdownMenuItem, type DropdownMenuProps, FieldGroup, type FieldGroupProps, type FieldGroupVariant, FileInput, FormInput, Grid, GridItem, GridItemSpan, type GridItemSpanValue, type GridVariant, IconWrapper, type IconWrapperProps, Link, Loading, NotificationBanner, NumberInput, Pagination, Popover, type PopoverProps, Progress, ProgressCircle, Radio, RadioGroup, type RadioGroupProps, Rating, type RatingProps, SectionHeader, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, Separator, Skeleton, SkipLink, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, ToastProvider, Tooltip, Typography, type WithClassName, useToast };

package/dist/index.d.ts

@@ -43,6 +43,10 @@ declare function Badge({ children, variant, className, ...rest }: BadgeProps): r
 
 interface BreadcrumbItem {
     label: string;
+    /**
+     * Destination URL. Optional even for non-last items: an item without
+     * `href` renders as non-interactive text instead of an unusable link.
+     */
     href?: string;
 }
 interface BreadcrumbProps extends WithClassName, HTMLAttributes<HTMLElement> {
@@ -59,7 +63,11 @@ interface CollapsibleProps extends WithClassName, Omit<HTMLAttributes<HTMLDetail
     open?: boolean;
     /** Uncontrolled initial open state */
     defaultOpen?: boolean;
-    /** Called after each toggle with the new open state */
+    /**
+     * Called on toggle with the new open state. When `open` is controlled,
+     * this reports the requested next state instead of applying it — update
+     * `open` in response to actually expand or collapse the panel.
+     */
     onToggle?: (open: boolean) => void;
     /**
      * Groups multiple Collapsible elements so only one is open at a time
@@ -69,14 +77,50 @@ interface CollapsibleProps extends WithClassName, Omit<HTMLAttributes<HTMLDetail
 }
 declare function Collapsible({ summary, children, open, defaultOpen, onToggle, name, className, ...rest }: Readonly<CollapsibleProps>): react_jsx_runtime.JSX.Element;
 
+type PageBy$1 = 'months' | 'single';
 interface CalendarProps extends WithClassName, Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
     value?: Date;
     defaultValue?: Date;
     min?: Date;
     max?: Date;
+    months?: number;
+    pageBy?: PageBy$1;
+    firstDayOfWeek?: number;
+    locale?: string;
+    isDateDisallowed?: (date: Date) => boolean;
+    formatWeekday?: (date: Date) => string;
+    formatMonth?: (date: Date) => string;
+    formatDay?: (date: Date) => string;
+    labels?: {
+        previousMonth?: string;
+        nextMonth?: string;
+    };
     onChange?: (date: Date) => void;
 }
-declare function Calendar({ value, defaultValue, min, max, onChange, className, ...rest }: Readonly<CalendarProps>): react_jsx_runtime.JSX.Element;
+declare function Calendar({ value, defaultValue, min, max, months, pageBy, firstDayOfWeek, locale, isDateDisallowed, formatWeekday, formatMonth, formatDay, labels, onChange, className, ...rest }: Readonly<CalendarProps>): react_jsx_runtime.JSX.Element;
+
+type PageBy = 'months' | 'single';
+interface CalendarRangeProps extends WithClassName, Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+    value?: [Date, Date];
+    defaultValue?: [Date, Date];
+    min?: Date;
+    max?: Date;
+    months?: number;
+    pageBy?: PageBy;
+    firstDayOfWeek?: number;
+    locale?: string;
+    isDateDisallowed?: (date: Date) => boolean;
+    formatWeekday?: (date: Date) => string;
+    formatMonth?: (date: Date) => string;
+    formatDay?: (date: Date) => string;
+    labels?: {
+        previousMonth?: string;
+        nextMonth?: string;
+    };
+    onChange?: (range: [Date, Date]) => void;
+    onRangeStart?: (date: Date) => void;
+}
+declare function CalendarRange({ value, defaultValue, min, max, months, pageBy, firstDayOfWeek, locale, isDateDisallowed, formatWeekday, formatMonth, formatDay, labels, onChange, onRangeStart, className, ...rest }: Readonly<CalendarRangeProps>): react_jsx_runtime.JSX.Element;
 
 interface CarouselProps extends WithClassName, HTMLAttributes<HTMLElement> {
     items: ReactNode[];
@@ -107,7 +151,7 @@ declare function Link<T extends ElementType = 'a'>({ as, children, variant, exte
 interface LoadingProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
     size?: 'small' | 'medium' | 'large';
 }
-declare function Loading({ size, className, ...rest }: LoadingProps): react_jsx_runtime.JSX.Element;
+declare function Loading({ size, className, 'aria-label': ariaLabel, ...rest }: LoadingProps): react_jsx_runtime.JSX.Element;
 
 interface NotificationBannerProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
     variant?: 'info' | 'success' | 'warning' | 'error';
@@ -158,17 +202,28 @@ interface TableColumn<Row> {
     key: string;
     header: ReactNode;
     sortable?: boolean;
+    /**
+     * Accessible label for the sort button, used instead of stringifying `header`.
+     * Required for a reliable accessible name when `header` is not plain text
+     * (e.g. an icon or custom ReactNode) — otherwise the button falls back to
+     * its visible text content.
+     */
+    sortLabel?: string;
     render?: (row: Row) => ReactNode;
 }
-interface TableProps<Row extends Record<string, unknown>> extends WithClassName {
+interface TableProps<Row extends Record<string, unknown>> extends WithClassName, HTMLAttributes<HTMLDivElement> {
     columns: TableColumn<Row>[];
     rows: Row[];
     caption?: string;
     sortKey?: string;
     sortDirection?: 'asc' | 'desc';
     onSort?: (key: string, direction: 'asc' | 'desc') => void;
+    /**
+     * Derives a stable React key per row. Defaults to the row index when omitted.
+     */
+    rowKey?: (row: Row, index: number) => string;
 }
-declare function Table<Row extends Record<string, unknown>>({ columns, rows, caption, sortKey, sortDirection, onSort, className, }: Readonly<TableProps<Row>>): react_jsx_runtime.JSX.Element;
+declare function Table<Row extends Record<string, unknown>>({ columns, rows, caption, sortKey, sortDirection, onSort, rowKey, className, ...rest }: Readonly<TableProps<Row>>): react_jsx_runtime.JSX.Element;
 
 interface TabItem {
     id: string;
@@ -305,7 +360,7 @@ interface RatingProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
 }
 declare function Rating({ value, max, className, ...rest }: RatingProps): react_jsx_runtime.JSX.Element;
 
-type ToastVariant = 'success' | 'error' | 'info';
+type ToastVariant = 'success' | 'error' | 'info' | 'warning';
 interface ToastContextType {
     showToast: (message: string, variant: ToastVariant) => void;
 }
@@ -352,9 +407,8 @@ declare function Combobox({ label, name, options, placeholder, value, onChange,
  * Layout variants for FieldGroup.
  *
  * - `horizontal` (default) — fields flow into a row, each claiming at least
- *   `--fieldGroup_min-field-width`. When the container's inline-size is too
- *   narrow to fit the row, a CSS container query collapses the layout to a
- *   single column.
+ *   `--fieldGroup_min-field-width`. When the FieldGroup's own inline-size is
+ *   too narrow to fit the row, the layout collapses to a single column.
  * - `vertical` — fields always stack one per row.
  */
 type FieldGroupVariant = 'horizontal' | 'vertical';
@@ -369,8 +423,8 @@ interface FieldGroupProps extends WithClassName, FieldsetHTMLAttributes<HTMLFiel
 }
 /**
  * `FieldGroup` semantically groups related form fields under a single
- * `<fieldset>` and lays them out either horizontally (with container-query
- * fallback to vertical) or vertically.
+ * `<fieldset>` and lays them out either horizontally (collapsing to a
+ * single column when the FieldGroup itself is too narrow) or vertically.
  */
 declare function FieldGroup({ variant, legend, children, className, style, ...rest }: Readonly<FieldGroupProps>): react_jsx_runtime.JSX.Element;
 
@@ -391,11 +445,15 @@ interface FormInputProps extends WithClassName, Omit<InputHTMLAttributes<HTMLInp
     label: ReactNode;
     name: string;
     type?: Exclude<HTMLInputTypeAttribute, 'checkbox' | 'radio' | 'file'>;
+    /**
+     * @deprecated Use the native `aria-label` attribute instead. Kept working for backwards
+     * compatibility; will be removed in a later major.
+     */
     ariaLabel?: string;
     error?: string;
     hint?: string;
 }
-declare function FormInput({ label, name, ariaLabel, error, hint, className, required, ...props }: FormInputProps): react_jsx_runtime.JSX.Element;
+declare function FormInput({ label, name, ariaLabel, error, hint, className, required, 'aria-label': nativeAriaLabel, ...props }: FormInputProps): react_jsx_runtime.JSX.Element;
 
 interface NumberInputProps extends WithClassName, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     label: string;
@@ -409,8 +467,12 @@ interface NumberInputProps extends WithClassName, Omit<HTMLAttributes<HTMLDivEle
     error?: string;
     hint?: string;
     onChange?: (value: number) => void;
+    /** Accessible label for the decrement (−) stepper button. Defaults to `'Decrease'`. */
+    decreaseLabel?: string;
+    /** Accessible label for the increment (+) stepper button. Defaults to `'Increase'`. */
+    increaseLabel?: string;
 }
-declare function NumberInput({ label, name, value, defaultValue, min, max, step, disabled, error, hint, onChange, className, ...rest }: Readonly<NumberInputProps>): react_jsx_runtime.JSX.Element;
+declare function NumberInput({ label, name, value, defaultValue, min, max, step, disabled, error, hint, onChange, className, decreaseLabel, increaseLabel, ...rest }: Readonly<NumberInputProps>): react_jsx_runtime.JSX.Element;
 
 interface RadioProps extends WithClassName, Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
     label: ReactNode;
@@ -419,7 +481,7 @@ interface RadioProps extends WithClassName, Omit<InputHTMLAttributes<HTMLInputEl
     error?: string;
     hint?: string;
 }
-declare function Radio({ label, name, description, error, hint, className, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
+declare function Radio({ label, name, description, error, hint, className, id: consumerId, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
 
 interface RadioGroupProps extends WithClassName, FieldsetHTMLAttributes<HTMLFieldSetElement> {
     legend: string;
@@ -456,7 +518,7 @@ interface SelectProps extends WithClassName, Omit<SelectHTMLAttributes<HTMLSelec
     error?: string;
     hint?: string;
 }
-declare function Select({ label, name, options, placeholder, error, hint, className, required, ...props }: Readonly<SelectProps>): react_jsx_runtime.JSX.Element;
+declare function Select({ label, name, options, placeholder, error, hint, className, required, id, value, defaultValue, ...rest }: Readonly<SelectProps>): react_jsx_runtime.JSX.Element;
 
 interface SliderProps extends WithClassName, Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
     label: string;
@@ -485,7 +547,7 @@ interface TextareaProps extends WithClassName, TextareaHTMLAttributes<HTMLTextAr
     error?: string;
     hint?: string;
 }
-declare function Textarea({ label, name, error, hint, className, required, ...props }: Readonly<TextareaProps>): react_jsx_runtime.JSX.Element;
+declare function Textarea({ label, name, error, hint, className, required, id: idProp, ...props }: Readonly<TextareaProps>): react_jsx_runtime.JSX.Element;
 
 interface ButtonContainerProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
     variant?: 'flow' | 'card' | 'modal' | 'content';
@@ -500,13 +562,13 @@ declare const ButtonGroup: typeof ButtonContainer;
  */
 type ButtonGroupProps = ButtonContainerProps;
 
-type CardOwnProps = WithClassName & {
+type CardOwnProps<C extends ElementType> = WithClassName & {
     variant?: 'default' | 'elevated' | 'outlined';
     padding?: 'none' | 'small' | 'medium' | 'large' | 'extra-large';
     textAlign?: 'start' | 'center' | 'end';
-    as?: ElementType;
+    as?: C;
 };
-type CardProps<C extends ElementType = 'div'> = CardOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof CardOwnProps>;
+type CardProps<C extends ElementType = 'div'> = CardOwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof CardOwnProps<C>>;
 declare function Card<C extends ElementType = 'div'>({ children, className, variant, padding, textAlign, as, onClick, ...rest }: CardProps<C>): react_jsx_runtime.JSX.Element;
 
 type GridItemSpanValue = 'full' | 'three-quarters' | 'two-thirds' | 'half' | 'one-third' | 'one-quarter' | 'auto' | number;
@@ -519,18 +581,18 @@ declare const GridItemSpan: {
     readonly oneQuarter: "one-quarter";
     readonly auto: "auto";
 };
-type GridItemOwnProps = WithClassName & {
+type GridItemOwnProps<C extends ElementType> = WithClassName & {
     columnSpan?: GridItemSpanValue;
     rowSpan?: number;
     startColumn?: number;
     endColumn?: number;
-    as?: ElementType;
+    as?: C;
 };
-type GridItemProps<C extends ElementType = 'div'> = GridItemOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof GridItemOwnProps>;
+type GridItemProps<C extends ElementType = 'div'> = GridItemOwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof GridItemOwnProps<C>>;
 declare function GridItem<C extends ElementType = 'div'>({ children, className, columnSpan, rowSpan, startColumn, endColumn, as, style, ...rest }: GridItemProps<C>): react_jsx_runtime.JSX.Element;
 
 type GridVariant = 'main' | 'page' | 'funnel' | 'custom';
-type GridOwnProps = WithClassName & {
+type GridOwnProps<C extends ElementType> = WithClassName & {
     variant?: GridVariant;
     columns?: number;
     isCentered?: boolean;
@@ -564,9 +626,9 @@ type GridOwnProps = WithClassName & {
      * you've confirmed the auto-tuner is wrong for your case.
      */
     masonryRowUnitPx?: number;
-    as?: ElementType;
+    as?: C;
 };
-type GridProps<C extends ElementType = 'div'> = GridOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof GridOwnProps>;
+type GridProps<C extends ElementType = 'div'> = GridOwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof GridOwnProps<C>>;
 declare function Grid<C extends ElementType = 'div'>({ children, className, variant, columns, isCentered, isMasonry, autoSpanMedia, masonryPreferredColumnSpan, masonryRowUnitPx, as, style, ...rest }: GridProps<C>): react_jsx_runtime.JSX.Element;
 
 type IntrinsicElement = keyof JSX.IntrinsicElements;
@@ -584,4 +646,4 @@ interface IconWrapperProps extends WithClassName, HTMLAttributes<HTMLDivElement>
 }
 declare function IconWrapper({ children, className, ...rest }: IconWrapperProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonContainer, type ButtonContainerProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, Card, Carousel, Checkbox, CheckboxGroup, type CheckboxGroupProps, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, Command, type CommandItem, type DescriptionItem, DescriptionList, Dialog, Drawer, DropdownMenu, type DropdownMenuItem, FieldGroup, type FieldGroupProps, type FieldGroupVariant, FileInput, FormInput, Grid, GridItem, GridItemSpan, type GridItemSpanValue, type GridVariant, IconWrapper, type IconWrapperProps, Link, Loading, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, RadioGroup, type RadioGroupProps, Rating, SectionHeader, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, Separator, Skeleton, SkipLink, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, ToastProvider, Tooltip, Typography, type WithClassName, useToast };
+export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonContainer, type ButtonContainerProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, CalendarRange, Card, Carousel, Checkbox, CheckboxGroup, type CheckboxGroupProps, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, Command, type CommandItem, type CommandProps, type DescriptionItem, DescriptionList, Dialog, type DialogProps, Drawer, type DrawerProps, DropdownMenu, type DropdownMenuItem, type DropdownMenuProps, FieldGroup, type FieldGroupProps, type FieldGroupVariant, FileInput, FormInput, Grid, GridItem, GridItemSpan, type GridItemSpanValue, type GridVariant, IconWrapper, type IconWrapperProps, Link, Loading, NotificationBanner, NumberInput, Pagination, Popover, type PopoverProps, Progress, ProgressCircle, Radio, RadioGroup, type RadioGroupProps, Rating, type RatingProps, SectionHeader, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, Separator, Skeleton, SkipLink, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, ToastProvider, Tooltip, Typography, type WithClassName, useToast };