@dynamic-framework/ui-react 2.10.0 → 2.11.0

package/dist/types/components/DAlert/DAlert.d.ts

@@ -1,18 +1,32 @@
 import type { PropsWithChildren } from 'react';
-import type { BaseProps, ComponentStateColor } from '../interface';
+import type { BaseProps, ComponentStateColor, LiveRegionRole } from '../interface';
 type Props = BaseProps & PropsWithChildren<{
     id?: string;
     color?: ComponentStateColor;
+    /**
+     * `alert` (default) interrupts the screen reader, for critical errors.
+     * `status` announces without interrupting, for dynamic non-critical
+     * messages. `none` renders no role, for static content already on screen.
+     */
+    role?: LiveRegionRole;
     icon?: string;
+    /**
+     * Renders the leading icon. Set to `false` for an alert without icon, such
+     * as an informative block inside a form where the icon competes with the
+     * content. When `true`, `icon` falls back to the one mapped to `color`.
+     */
+    showIcon?: boolean;
     iconFamilyClass?: string;
     iconFamilyPrefix?: string;
     iconMaterialStyle?: boolean;
     showClose?: boolean;
+    /** Accessible name of the close button. */
+    closeAriaLabel?: string;
     iconClose?: string;
     iconCloseFamilyClass?: string;
     iconCloseFamilyPrefix?: string;
     iconCloseMaterialStyle?: boolean;
     onClose?: () => void;
 }>;
-export default function DAlert({ color, icon: iconProp, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, iconClose: iconCloseProp, iconCloseFamilyClass, iconCloseFamilyPrefix, iconCloseMaterialStyle, showClose, onClose, children, id, className, style, dataAttributes, }: Props): import("react").JSX.Element;
+export default function DAlert({ color, role, icon: iconProp, showIcon, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, iconClose: iconCloseProp, iconCloseFamilyClass, iconCloseFamilyPrefix, iconCloseMaterialStyle, showClose, closeAriaLabel, onClose, children, id, className, style, dataAttributes, }: Props): import("react").JSX.Element;
 export {};

package/dist/types/components/DButtonIcon/DButtonIcon.d.ts

@@ -1,8 +1,16 @@
 import type { MouseEvent } from 'react';
+import type { ResponsiveProp } from '../../hooks/useResponsiveProp';
 import type { BaseProps, ButtonVariant, ComponentColor, ComponentSize, FamilyIconProps, InputState } from '../interface';
 type Props = BaseProps & FamilyIconProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     icon: string;
     size?: ComponentSize;
+    /**
+     * Size of the icon glyph, forwarded to `DIcon` (e.g. `"1.5rem"`, or a
+     * responsive object such as `{ xs: '1rem', lg: '2rem' }`, which follows
+     * viewport changes). Without it the glyph follows the button's font size,
+     * which changes with `size`.
+     */
+    iconSize?: string | ResponsiveProp;
     variant?: ButtonVariant;
     color?: ComponentColor;
     state?: InputState;
@@ -14,5 +22,5 @@ type Props = BaseProps & FamilyIconProps & React.ButtonHTMLAttributes<HTMLButton
     rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
     onClick?: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
 };
-export default function DButtonIcon({ id, icon, size, className, variant, state, loadingAriaLabel, iconMaterialStyle, disabled, color, loading, href, target, rel, stopPropagationEnabled, style, iconFamilyClass, iconFamilyPrefix, dataAttributes, onClick, 'aria-label': ariaLabelProp, ...rest }: Props): import("react").JSX.Element;
+export default function DButtonIcon({ id, icon, size, iconSize, className, variant, state, loadingAriaLabel, iconMaterialStyle, disabled, color, loading, href, target, rel, stopPropagationEnabled, style, iconFamilyClass, iconFamilyPrefix, dataAttributes, onClick, 'aria-label': ariaLabelProp, ...rest }: Props): import("react").JSX.Element;
 export {};

package/dist/types/components/DDataStateWrapper/DDataStateWrapper.d.ts

@@ -6,16 +6,41 @@ export type DDataStateMessages = {
     error?: string;
     retry?: string;
 };
-type DDataStateWrapperProps<T> = {
+type DDataStateWrapperBaseProps = {
     isLoading: boolean;
     isError: boolean;
-    data: T[] | undefined;
     onRetry?: () => void;
     messages?: DDataStateMessages;
     renderLoading?: Renderable;
     renderEmpty?: Renderable;
     renderError?: Renderable;
+};
+/** A collection: empty when it has no items. */
+export type DDataStateWrapperListProps<T> = DDataStateWrapperBaseProps & {
+    /**
+     * A collection; empty when it has no items. For a single resource, pass the
+     * object itself: that overload is typed by `DDataStateWrapperSingleProps`.
+     */
+    data: T[] | undefined;
+    /** Receives the array. */
     children: (data: T[]) => ReactNode;
 };
-export default function DDataStateWrapper<T>({ isLoading, isError, data, onRetry, messages, renderLoading, renderEmpty, renderError, children, }: DDataStateWrapperProps<T>): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
-export {};
+/**
+ * A single resource (an entity detail, a summary, a config object): empty when
+ * it is `null` or `undefined`. The render prop receives the same object.
+ */
+export type DDataStateWrapperSingleProps<T> = DDataStateWrapperBaseProps & {
+    /** A single resource; empty when it is `null` or `undefined`. */
+    data: T | null | undefined;
+    /** Receives the object itself. */
+    children: (data: T) => ReactNode;
+};
+/**
+ * Renders the loading, error, empty or success state of fetched data, in that
+ * order of precedence. `data` is either a collection (empty with no items) or a
+ * single resource (empty when `null`/`undefined`); `children` gets it back with
+ * the same shape.
+ */
+declare function DDataStateWrapper<T>(props: DDataStateWrapperListProps<T>): ReactNode;
+declare function DDataStateWrapper<T>(props: DDataStateWrapperSingleProps<T>): ReactNode;
+export default DDataStateWrapper;

package/dist/types/components/DDataStateWrapper/index.d.ts

@@ -2,5 +2,5 @@ import DDataStateWrapper from './DDataStateWrapper';
 export { EmptyState } from './components/EmptyState';
 export { ErrorState } from './components/ErrorState';
 export { LoadingState } from './components/LoadingState';
-export type { DDataStateMessages } from './DDataStateWrapper';
+export type { DDataStateMessages, DDataStateWrapperListProps, DDataStateWrapperSingleProps, } from './DDataStateWrapper';
 export default DDataStateWrapper;

package/dist/types/components/DErrorBoundary/DErrorBoundary.d.ts

@@ -7,5 +7,10 @@ export type DErrorBoundaryProps = PropsWithChildren<{
     resetKeys?: unknown[];
     onReset?: () => void;
     onError?: (error: unknown, info: ErrorInfo) => void;
+    /** Texts of the default fallback. Ignored when `fallback` is provided. */
+    messages?: {
+        error?: string;
+        retry?: string;
+    };
 }>;
-export default function DErrorBoundary({ name, fallback, resetKeys, onReset, onError, children, }: DErrorBoundaryProps): import("react").JSX.Element;
+export default function DErrorBoundary({ name, fallback, resetKeys, onReset, onError, messages, children, }: DErrorBoundaryProps): import("react").JSX.Element;

package/dist/types/components/DErrorBoundary/components/DefaultErrorBoundary.d.ts

@@ -2,6 +2,8 @@
 import { FallbackProps } from 'react-error-boundary';
 type Props = {
     resetErrorBoundary: FallbackProps['resetErrorBoundary'];
+    message?: string;
+    retryMessage?: string;
 };
-export default function DefaultErrorBoundary({ resetErrorBoundary }: Props): import("react").JSX.Element;
+export default function DefaultErrorBoundary({ resetErrorBoundary, message, retryMessage, }: Props): import("react").JSX.Element;
 export {};

package/dist/types/components/DInput/DInput.d.ts

@@ -1,8 +1,17 @@
 import type { ReactNode } from 'react';
 import type { BaseProps, ComponentSize, EndIconProps, FamilyIconProps, StartIconProps } from '../interface';
-declare const ForwardedDInput: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "label" | "invalid" | "value" | "onChange" | "size" | keyof BaseProps | keyof FamilyIconProps | keyof StartIconProps | keyof EndIconProps | "loading" | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "readonly" | "onIconStartClick" | "onIconEndClick"> & BaseProps & FamilyIconProps & StartIconProps & EndIconProps & {
+declare const ForwardedDInput: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange" | "value">, "label" | "onChange" | "invalid" | "value" | "size" | "floatingLabel" | keyof BaseProps | keyof FamilyIconProps | keyof StartIconProps | keyof EndIconProps | "loading" | "hint" | "valid" | "inputStart" | "inputEnd" | "readonly" | "onIconStartClick" | "onIconEndClick"> & BaseProps & FamilyIconProps & StartIconProps & EndIconProps & {
     value?: string | undefined;
-    label?: string | undefined;
+    /**
+     * The label of the control. Any node is accepted, so it can carry a link, an
+     * info trigger or other markup — the terms-and-conditions pattern.
+     *
+     * Text doubles as the control's accessible name. A richer label does not, so
+     * pass `aria-label` alongside it; a development-only warning says so when it
+     * is missing. A rich label also does not fit `floatingLabel`, whose layout
+     * animates a single line of text.
+     */
+    label?: ReactNode;
     loading?: boolean | undefined;
     hint?: string | undefined;
     size?: ComponentSize | undefined;

package/dist/types/components/DInputCheck/DInputCheck.d.ts

@@ -1,12 +1,37 @@
-import type { ChangeEvent, ComponentPropsWithoutRef } from 'react';
+import type { ChangeEvent, ComponentPropsWithoutRef, ReactNode } from 'react';
 import type { BaseProps, InputCheckType } from '../interface';
 type Props = ComponentPropsWithoutRef<'input'> & BaseProps & {
     id?: string;
     type: InputCheckType;
     name?: string;
-    label?: string;
+    /**
+     * The label of the control. Any node is accepted, so it can carry a link, an
+     * info trigger or other markup — the terms-and-conditions pattern.
+     *
+     * Text doubles as the control's accessible name. A richer label does not, so
+     * pass `ariaLabel` alongside it; a development-only warning says so when it
+     * is missing.
+     */
+    label?: ReactNode;
+    /**
+     * Accessible name of the control, needed when `label` is not plain text.
+     * Without it the name becomes whatever the label subtree computes to, which
+     * for a label carrying a link or an icon reads as the wrong name or as none.
+     */
     ariaLabel?: string;
+    /**
+     * Checked state of the control.
+     *
+     * Passed together with `onChange` the control is fully controlled: when the
+     * parent rejects a change the DOM snaps back to this value.
+     *
+     * Passed on its own it is taken as the starting value and the control keeps
+     * toggling by itself — the historical behaviour. Prefer `defaultChecked` for
+     * that, it says so out loud.
+     */
     checked?: boolean;
+    /** Starting checked state for uncontrolled usage. */
+    defaultChecked?: boolean;
     inputClassName?: string;
     disabled?: boolean;
     invalid?: boolean;
@@ -17,5 +42,5 @@ type Props = ComponentPropsWithoutRef<'input'> & BaseProps & {
     value?: string;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 };
-export default function DInputCheck({ id: idProp, type, name, label, ariaLabel, checked, disabled, invalid, valid, indeterminate, inputClassName, value, hint, onChange, className, style, dataAttributes, ...props }: Props): import("react").JSX.Element;
+export default function DInputCheck({ id: idProp, type, name, label, ariaLabel, checked, defaultChecked, disabled, invalid, valid, indeterminate, inputClassName, value, hint, onChange, className, style, dataAttributes, ...props }: Props): import("react").JSX.Element;
 export {};

package/dist/types/components/DInputCounter/DInputCounter.d.ts

@@ -1,13 +1,25 @@
 /// <reference types="react" />
 type NonDInputProps = {
+    /**
+     * Current value of the counter.
+     *
+     * Passed together with `onChange` the counter is fully controlled: when the
+     * parent rejects a change the counter snaps back to this value.
+     *
+     * Passed on its own it is taken as the starting value and the counter keeps
+     * counting by itself — the historical behaviour. Prefer `defaultValue` for
+     * that, it says so out loud.
+     */
     value?: number;
+    /** Starting value for uncontrolled usage; falls back to `minValue`. */
+    defaultValue?: number;
     minValue: number;
     maxValue: number;
     onChange?: (value?: number) => void;
 };
-declare const ForwardedDInputCounter: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "label" | "invalid" | "value" | "onChange" | "size" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | "loading" | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "readonly" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
+declare const ForwardedDInputCounter: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange" | "value">, "label" | "onChange" | "invalid" | "value" | "size" | "floatingLabel" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | "loading" | "hint" | "valid" | "inputStart" | "inputEnd" | "readonly" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
     value?: string | undefined;
-    label?: string | undefined;
+    label?: import("react").ReactNode;
     loading?: boolean | undefined;
     hint?: string | undefined;
     size?: import("../interface").ComponentSize | undefined;
@@ -20,5 +32,5 @@ declare const ForwardedDInputCounter: import("react").ForwardRefExoticComponent<
     onChange?: ((value: string) => void) | undefined;
     onIconStartClick?: ((value?: string | undefined) => void) | undefined;
     onIconEndClick?: ((value?: string | undefined) => void) | undefined;
-} & import("react").RefAttributes<HTMLInputElement>, "ref">, "value" | "onChange" | "type" | "validIcon" | "invalidIcon">, keyof NonDInputProps> & NonDInputProps & import("react").RefAttributes<HTMLInputElement>>;
+} & import("react").RefAttributes<HTMLInputElement>, "ref">, "onChange" | "value" | "type" | "validIcon" | "invalidIcon">, keyof NonDInputProps> & NonDInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export default ForwardedDInputCounter;

package/dist/types/components/DInputCurrency/DInputCurrency.d.ts

@@ -3,12 +3,19 @@ type NonDInputProps = {
     value?: number;
     minValue?: number;
     maxValue?: number;
+    /**
+     * When `true` (default) a value outside `minValue`/`maxValue` is brought
+     * into range on mount, when it changes and on blur, and `onChange` receives
+     * the clamped number. When `false` the entered value is kept and the input
+     * is marked invalid while it is out of range, unless `invalid` is set.
+     */
+    clamp?: boolean;
     currencyCode?: string;
     onChange?: (value?: number) => void;
 };
-declare const ForwardedDInputCurrency: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "label" | "invalid" | "value" | "onChange" | "size" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | "loading" | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "readonly" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
+declare const ForwardedDInputCurrency: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange" | "value">, "label" | "onChange" | "invalid" | "value" | "size" | "floatingLabel" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | "loading" | "hint" | "valid" | "inputStart" | "inputEnd" | "readonly" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
     value?: string | undefined;
-    label?: string | undefined;
+    label?: import("react").ReactNode;
     loading?: boolean | undefined;
     hint?: string | undefined;
     size?: import("../interface").ComponentSize | undefined;
@@ -21,5 +28,5 @@ declare const ForwardedDInputCurrency: import("react").ForwardRefExoticComponent
     onChange?: ((value: string) => void) | undefined;
     onIconStartClick?: ((value?: string | undefined) => void) | undefined;
     onIconEndClick?: ((value?: string | undefined) => void) | undefined;
-} & import("react").RefAttributes<HTMLInputElement>, "ref">, "value" | "onChange" | "type">, keyof NonDInputProps> & NonDInputProps & import("react").RefAttributes<HTMLInputElement>>;
+} & import("react").RefAttributes<HTMLInputElement>, "ref">, "onChange" | "value" | "type">, keyof NonDInputProps> & NonDInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export default ForwardedDInputCurrency;

package/dist/types/components/DInputPhone/DInputPhone.d.ts

@@ -7,9 +7,18 @@ type OnChangeType = {
     country: ParsedCountry;
     isValid: boolean;
 };
-declare const ForwardedDInputPhone: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "pattern" | "value" | "inputMode" | "onChange" | "onWheel" | "type">, "label" | "invalid" | "value" | "onChange" | "size" | keyof BaseProps | keyof FamilyIconProps | keyof EndIconProps | "loading" | "hint" | "valid" | "floatingLabel" | "inputEnd" | "onIconEndClick" | "countrySelectorProps" | "filteredCountries" | "defaultCountry"> & BaseProps & FamilyIconProps & EndIconProps & {
+declare const ForwardedDInputPhone: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "pattern" | "inputMode" | "onChange" | "onWheel" | "value" | "type">, "label" | "onChange" | "invalid" | "value" | "size" | "floatingLabel" | keyof BaseProps | keyof FamilyIconProps | keyof EndIconProps | "loading" | "hint" | "valid" | "inputEnd" | "onIconEndClick" | "countrySelectorProps" | "filteredCountries" | "defaultCountry"> & BaseProps & FamilyIconProps & EndIconProps & {
     value?: string | undefined;
-    label?: string | undefined;
+    /**
+     * The label of the control. Any node is accepted, so it can carry a link, an
+     * info trigger or other markup.
+     *
+     * Text doubles as the control's accessible name. A richer label does not, so
+     * pass `aria-label` alongside it; a development-only warning says so when it
+     * is missing. A rich label also does not fit `floatingLabel`, whose layout
+     * animates a single line of text.
+     */
+    label?: ReactNode;
     loading?: boolean | undefined;
     hint?: string | undefined;
     size?: ComponentSize | undefined;

package/dist/types/components/DInputPin/DInputPin.d.ts

@@ -1,8 +1,13 @@
-/// <reference types="react" />
+import type { ReactNode } from 'react';
 import type { BaseProps, FamilyIconProps, PinInputMode, PinInputType } from '../interface';
 type Props = BaseProps & FamilyIconProps & {
     id?: string;
-    label?: string;
+    /**
+     * Visible label of the group. Each character input carries its own
+     * `aria-label`, so this never acts as the accessible name and a non-text
+     * label does not warn here the way it does on the other inputs.
+     */
+    label?: ReactNode;
     placeholder?: string;
     type?: PinInputType;
     disabled?: boolean;
@@ -15,6 +20,11 @@ type Props = BaseProps & FamilyIconProps & {
     invalid?: boolean;
     valid?: boolean;
     onChange?: (value: string) => void;
+    /**
+     * Accessible name given to every character input, suffixed with its position
+     * — "Pin character number 2 of 4". Each input is named on its own, which is
+     * why `label` never acts as the accessible name here.
+     */
     'aria-label'?: string;
 };
 export default function DInputPin({ id: idProp, label, placeholder, type, disabled, loading, secret, characters, innerInputMode, hint, invalid, valid, className, style, dataAttributes, onChange, 'aria-label': ariaLabel, }: Props): import("react").JSX.Element;

package/dist/types/components/DInputRange/DInputRange.d.ts

@@ -1,7 +1,20 @@
-/// <reference types="react" />
+import type { ReactNode } from 'react';
 import type { BaseProps } from '../interface';
 declare const ForwardedDInputRange: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type">, "label" | "ariaLabel" | keyof BaseProps | "filledValue"> & BaseProps & {
-    label?: string | undefined;
+    /**
+     * The label of the control. Any node is accepted, so it can carry a link, an
+     * info trigger or other markup.
+     *
+     * Text doubles as the control's accessible name. A richer label does not, so
+     * pass `ariaLabel` alongside it; a development-only warning says so when it
+     * is missing.
+     */
+    label?: ReactNode;
+    /**
+     * Accessible name of the control, needed when `label` is not plain text.
+     * Without it the name becomes whatever the label subtree computes to, which
+     * for a label carrying a link or an icon reads as the wrong name or as none.
+     */
     ariaLabel?: string | undefined;
     filledValue?: boolean | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/types/components/DInputSelect/DInputSelect.d.ts

@@ -1,4 +1,4 @@
-import type { FocusEvent, MouseEvent } from 'react';
+import type { FocusEvent, MouseEvent, ReactNode } from 'react';
 import type { BaseProps, ComponentSize, EndIconProps, FamilyIconProps, StartIconProps } from '../interface';
 export type DefaultOption = {
     value: string | number;
@@ -7,7 +7,22 @@ export type DefaultOption = {
 export type Props<T> = BaseProps & FamilyIconProps & StartIconProps & EndIconProps & {
     id?: string;
     name?: string;
-    label?: string;
+    /**
+     * The label of the control. Any node is accepted, so it can carry a link, an
+     * info trigger or other markup.
+     *
+     * Text doubles as the control's accessible name. A richer label does not, so
+     * pass `ariaLabel` alongside it; a development-only warning says so when it
+     * is missing. A rich label also does not fit `floatingLabel`, whose layout
+     * animates a single line of text.
+     */
+    label?: ReactNode;
+    /**
+     * Accessible name of the control, needed when `label` is not plain text.
+     * Without it the name becomes whatever the label subtree computes to, which
+     * for a label carrying a link or an icon reads as the wrong name or as none.
+     */
+    ariaLabel?: string;
     disabled?: boolean;
     loading?: boolean;
     invalid?: boolean;
@@ -24,4 +39,4 @@ export type Props<T> = BaseProps & FamilyIconProps & StartIconProps & EndIconPro
     valueExtractor?: (item: T) => string | number;
     labelExtractor?: (item: T) => string;
 };
-export default function DInputSelect<T extends object = DefaultOption>({ id: idProp, name, label, className, style, options, disabled, loading, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, hint, value, size, floatingLabel, invalid, valid, dataAttributes, valueExtractor, labelExtractor, onChange, onBlur, onIconStartClick, onIconEndClick, }: Props<T>): import("react").JSX.Element;
+export default function DInputSelect<T extends object = DefaultOption>({ id: idProp, name, label, ariaLabel, className, style, options, disabled, loading, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, hint, value, size, floatingLabel, invalid, valid, dataAttributes, valueExtractor, labelExtractor, onChange, onBlur, onIconStartClick, onIconEndClick, }: Props<T>): import("react").JSX.Element;

package/dist/types/components/DInputSwitch/DInputSwitch.d.ts

@@ -1,11 +1,36 @@
-/// <reference types="react" />
+import type { ReactNode } from 'react';
 import type { BaseProps } from '../interface';
 type Props = BaseProps & {
     id?: string;
-    label?: string;
+    /**
+     * The label of the control. Any node is accepted, so it can carry a link, an
+     * info trigger or other markup.
+     *
+     * Text doubles as the control's accessible name. A richer label does not, so
+     * pass `ariaLabel` alongside it; a development-only warning says so when it
+     * is missing.
+     */
+    label?: ReactNode;
+    /**
+     * Accessible name of the control, needed when `label` is not plain text.
+     * Without it the name becomes whatever the label subtree computes to, which
+     * for a label carrying a link or an icon reads as the wrong name or as none.
+     */
     ariaLabel?: string;
     name?: string;
+    /**
+     * Checked state of the switch.
+     *
+     * Passed together with `onChange` the switch is fully controlled: when the
+     * parent rejects a change the switch snaps back to this value.
+     *
+     * Passed on its own it is taken as the starting value and the switch keeps
+     * toggling by itself — the historical behaviour. Prefer `defaultChecked` for
+     * that, it says so out loud.
+     */
     checked?: boolean;
+    /** Starting checked state for uncontrolled usage. */
+    defaultChecked?: boolean;
     disabled?: boolean;
     inputClassName?: string;
     invalid?: boolean;
@@ -14,5 +39,5 @@ type Props = BaseProps & {
     readonly?: boolean;
     onChange?: (isChecked: boolean) => void;
 };
-export default function DInputSwitch({ id: idProp, label, ariaLabel, name, checked, disabled, invalid, valid, hint, readonly, className, style, dataAttributes, inputClassName, onChange, }: Props): import("react").JSX.Element;
+export default function DInputSwitch({ id: idProp, label, ariaLabel, name, checked, defaultChecked, disabled, invalid, valid, hint, readonly, className, style, dataAttributes, inputClassName, onChange, }: Props): import("react").JSX.Element;
 export {};

package/dist/types/components/DListGroup/DListGroup.d.ts

@@ -6,8 +6,19 @@ type Props = BaseProps & PropsWithChildren<{
     numbered?: boolean;
     flush?: boolean;
     horizontal?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    /**
+     * Accessible name of the list, so screen readers can tell it apart from
+     * other lists on the page (e.g. "Recent movements"). Ignored when
+     * `ariaLabelledBy` is set.
+     */
+    ariaLabel?: string;
+    /**
+     * Id of a visible element that names the list, such as the heading above
+     * it. When set, `aria-label` is not rendered.
+     */
+    ariaLabelledBy?: string;
 }>;
-declare function DListGroup({ as, numbered, flush, horizontal, children, className, style, dataAttributes, }: Props): import("react").JSX.Element;
+declare function DListGroup({ as, numbered, flush, horizontal, ariaLabel, ariaLabelledBy, children, className, style, dataAttributes, }: Props): import("react").JSX.Element;
 declare const _default: typeof DListGroup & {
     Item: typeof DListGroupItem;
 };

package/dist/types/components/DListGroup/ListGroupContext.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+/**
+ * Element the enclosing `DListGroup` renders, so each `DListGroupItem` can
+ * check that its own element is valid content for it. `undefined` outside a
+ * `DListGroup`.
+ */
+declare const ListGroupContext: import("react").Context<"div" | "ol" | "ul" | undefined>;
+export default ListGroupContext;

package/dist/types/components/DListGroup/components/DListGroupItem.d.ts

@@ -4,10 +4,15 @@ type Props = BaseProps & StartIconProps & EndIconProps & PropsWithChildren<{
     as?: 'li' | 'a' | 'button';
     action?: boolean;
     active?: boolean;
+    /**
+     * Value of `aria-current` while the item is `active`: `'page'` for the
+     * current page of a navigation, `'step'` for the current step of a flow.
+     */
+    ariaCurrent?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true';
     disabled?: boolean;
     href?: string;
     onClick?: () => void;
     color?: ComponentColor;
 }>;
-export default function DListGroupItem({ as, action: actionProp, active, disabled, href, onClick, color, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartMaterialStyle, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndMaterialStyle, children, className, style, dataAttributes, }: Props): import("react").JSX.Element;
+export default function DListGroupItem({ as, action: actionProp, active, ariaCurrent, disabled, href, onClick, color, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartMaterialStyle, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndMaterialStyle, children, className, style, dataAttributes, }: Props): import("react").JSX.Element;
 export {};

package/dist/types/components/DListGroup/components/warnInvalidListMarkup.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Warns, once per combination and only outside production builds, that a
+ * `DListGroupItem` renders an element its `DListGroup` container can't hold.
+ *
+ * Links and buttons inside a <ul>/<ol> are wrapped in an <li>, so the only
+ * invalid pair left is a plain item (an <li>) inside `as="div"`: an <li>
+ * outside of any list. It doesn't fail visibly, which is why it's reported.
+ *
+ * The `process.env.NODE_ENV` guard at the call site is what bundlers
+ * constant-fold, so the whole call — and this module — drops out of a
+ * consumer's production bundle.
+ */
+export default function warnInvalidListMarkup(container: 'div', item: 'li'): void;

package/dist/types/components/DPasswordStrengthMeter/DPasswordStrengthMeter.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { ReactNode } from 'react';
 import type { BaseProps } from '../interface';
 export type ValidationMessages = {
     number: string;
@@ -10,7 +10,22 @@ export type ValidationMessages = {
 export type ValidationCheck = 'uppercase' | 'lowercase' | 'number' | 'specialChar';
 type Props = BaseProps & {
     id?: string;
-    label?: string;
+    /**
+     * The label of the password field. Any node is accepted, so it can carry a
+     * link or an info trigger.
+     *
+     * Text doubles as the control's accessible name. A richer label does not, so
+     * pass `aria-label` alongside it; a development-only warning says so when it
+     * is missing.
+     */
+    label?: ReactNode;
+    /**
+     * Accessible name of the password field. Spelled as the native attribute
+     * because it is forwarded straight to the nested input, which is also the
+     * component the development-only naming warning comes from — so the advice it
+     * gives names a prop this component accepts.
+     */
+    'aria-label'?: string;
     placeholder?: string;
     value?: string;
     name?: string;
@@ -21,5 +36,5 @@ type Props = BaseProps & {
     onChange?: (value: string) => void;
     readonly?: boolean;
 };
-export default function DPasswordStrengthMeter({ id, label, placeholder, value, name, disabled, invalid, validationMessages, enabledChecks, className, style, dataAttributes, onChange, readonly, }: Props): import("react").JSX.Element;
+export default function DPasswordStrengthMeter({ id, label, 'aria-label': ariaLabel, placeholder, value, name, disabled, invalid, validationMessages, enabledChecks, className, style, dataAttributes, onChange, readonly, }: Props): import("react").JSX.Element;
 export {};

package/dist/types/components/DProgress/DProgress.d.ts

@@ -7,6 +7,18 @@ type Props = BaseProps & {
     hideCurrentValue?: boolean;
     enableStripedAnimation?: boolean;
     height?: string | number;
+    /**
+     * Accessible name of the bar. Describe what progresses (e.g. "Upload
+     * progress"), not the role. Defaults to `'Progress bar'` when neither this
+     * nor `ariaLabelledBy` is set.
+     */
+    ariaLabel?: string;
+    /**
+     * Id of a visible element that names the bar, for a title rendered next to
+     * it. When set, `aria-label` is not rendered, so `ariaLabel` and the default
+     * name are ignored.
+     */
+    ariaLabelledBy?: string;
 };
-export default function DProgress({ className, style, currentValue, minValue, maxValue, hideCurrentValue, enableStripedAnimation, height, dataAttributes, }: Props): import("react").JSX.Element;
+export default function DProgress({ className, style, currentValue, minValue, maxValue, hideCurrentValue, enableStripedAnimation, height, ariaLabel, ariaLabelledBy, dataAttributes, }: Props): import("react").JSX.Element;
 export {};

package/dist/types/components/DSelect/DSelect.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { ReactNode } from 'react';
 import type { Props as SelectProps, GroupBase } from 'react-select';
 import DSelectOptionCheck from './components/DSelectOptionCheck';
 import DSelectOptionIcon from './components/DSelectOptionIcon';
@@ -13,7 +13,27 @@ import DSelectSingleValueEmojiText from './components/DSelectSingleValueEmojiTex
 import DSelectPlaceholder from './components/DSelectPlaceholder';
 import type { BaseProps, EndIconProps, FamilyIconProps, StartIconProps } from '../interface';
 type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = BaseProps & FamilyIconProps & StartIconProps & EndIconProps & Omit<SelectProps<Option, IsMulti, Group>, 'isDisabled' | 'isClearable' | 'isLoading' | 'isRtl' | 'isSearchable' | 'isMulti'> & {
-    label?: string;
+    /**
+     * The label of the control. Any node is accepted, so it can carry a link, an
+     * info trigger or other markup.
+     *
+     * Text doubles as the control's accessible name. A richer label does not, so
+     * pass `ariaLabel`, or `aria-labelledby` pointing at a text element, alongside
+     * it; a development-only warning says so when both are missing. A rich label
+     * also does not fit `floatingLabel`, whose layout animates a single line of
+     * text.
+     */
+    label?: ReactNode;
+    /**
+     * Accessible name of the control. It outranks the `label` in the accessible
+     * name computation, so use it to name a control with a non-text label or to
+     * replace the name a text label gives.
+     *
+     * Without a `label` or an `aria-labelledby` it falls back to a generic
+     * string, so an unlabelled select is never nameless. With either there is no
+     * fallback: a generic `aria-label` would override the label and make every
+     * select announce the same name.
+     */
     ariaLabel?: string;
     hint?: string;
     invalid?: boolean;
@@ -29,7 +49,7 @@ type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = B
     searchable?: SelectProps<Option, IsMulti, Group>['isSearchable'];
     multi?: SelectProps<Option, IsMulti, Group>['isMulti'];
 };
-declare function DSelect<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id: idProp, className, style, label, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, menuWithMaxContent, disabled, clearable, loading, floatingLabel, rtl, searchable, multi, components, defaultValue, placeholder, onIconStartClick, onIconEndClick, dataAttributes, ariaLabel, ...props }: Props<Option, IsMulti, Group>): import("react").JSX.Element;
+declare function DSelect<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id: idProp, inputId: inputIdProp, className, style, label, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, menuWithMaxContent, disabled, clearable, loading, floatingLabel, rtl, searchable, multi, components, defaultValue, placeholder, onIconStartClick, onIconEndClick, dataAttributes, ariaLabel, ariaLiveMessages, ...props }: Props<Option, IsMulti, Group>): import("react").JSX.Element;
 declare const _default: typeof DSelect & {
     OptionCheck: typeof DSelectOptionCheck;
     OptionIcon: typeof DSelectOptionIcon;

package/dist/types/components/DSelect/createAriaGuidance.d.ts

@@ -0,0 +1,21 @@
+import type { AriaGuidanceProps } from 'react-select';
+type Names = {
+    /** The `aria-labelledby` that reaches the input, if any. */
+    labelledBy?: string;
+    /** The text of the visible `label`, if it is text. */
+    label?: string;
+};
+/**
+ * Builds react-select's `guidance` live message around the control's name.
+ *
+ * react-select announces "<aria-label> is focused" on the first focus of the
+ * input, falling back to "Select" when there is no `aria-label`. Neither a text
+ * `label` nor `aria-labelledby` reaches that message, so the announcement would
+ * disagree with the name assistive technology exposes.
+ *
+ * The name follows the accessible name precedence: `aria-labelledby`, then
+ * `aria-label`, then the `<label>`. react-select does not export its default
+ * messages, so this mirrors them for every context and only swaps the name.
+ */
+export default function createAriaGuidance({ labelledBy, label }: Names): ({ "aria-label": ariaLabel, context, isSearchable, isMulti, tabSelectsValue, isInitialFocus, }: AriaGuidanceProps) => string;
+export {};