@ahrowe/ui 0.31.0 → 0.33.0

package/dist/types/common/multiSelect/multiSelect.types.d.ts

@@ -11,6 +11,17 @@ export interface MultiSelectItem {
     disabled?: boolean;
 }
 export type MultiSelectSlots = 'root' | 'label' | 'fieldset' | 'control' | 'values' | 'chip' | 'placeholder' | 'clearButton' | 'icon' | 'panel' | 'search' | 'options' | 'option' | 'optionCheck' | 'optionLabel' | 'empty';
+/** Text MultiSelect renders of its own, for translating it. */
+export interface MultiSelectLabels {
+    /** Button that empties the selection, read out by screen readers. */
+    clearSelection?: string;
+    /** Entry that creates a value from what was typed (default `Add "<value>"`). */
+    create?: (value: string) => string;
+    /** Placeholder in the search field (default `Search…`). */
+    searchPlaceholder?: string;
+    /** Shown when nothing matches the search (default `No matches`). */
+    empty?: string;
+}
 export interface MultiSelectProps extends Omit<HtmlProps<HTMLDivElement>, 'onChange' | 'value' | 'defaultValue'> {
     /** The selectable options. */
     items: MultiSelectItem[];
@@ -34,12 +45,6 @@ export interface MultiSelectProps extends Omit<HtmlProps<HTMLDivElement>, 'onCha
      * value becomes its own key, so `onChange` reports it as a plain string.
      */
     allowCustomValues?: boolean;
-    /** Label for the row that adds a typed value (default `Add "…"`). */
-    createLabel?: (value: string) => string;
-    /** Placeholder for the search box (default `'Search…'`). */
-    searchPlaceholder?: string;
-    /** Text shown in the panel when no option matches (default `'No matches'`). */
-    emptyLabel?: string;
     /** Cap the number of selections. Unselected options disable once the cap is reached. */
     maxSelected?: number;
     /** Show a button that clears the whole selection (default `true`). */
@@ -59,4 +64,6 @@ export interface MultiSelectProps extends Omit<HtmlProps<HTMLDivElement>, 'onCha
     style?: CSSProperties;
     classNames?: SlotClassNames<MultiSelectSlots>;
     styles?: SlotStyles<MultiSelectSlots>;
+    /** Overrides the text MultiSelect renders of its own. Merged per key. */
+    labels?: MultiSelectLabels;
 }

package/dist/types/common/numberInput/numberInput.types.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { NumericFormatProps } from 'react-number-format';
 import { FormValidator } from '../../services/formValidation';
+import { SlotClassNames, SlotStyles } from '../types/slots.types';
 /**
  * How the stepper buttons are laid out.
  *
@@ -10,6 +11,14 @@ import { FormValidator } from '../../services/formValidation';
  * - `auto` — `split` on a coarse (touch) pointer, `stacked` otherwise.
  */
 export type NumberInputArrowsLayout = 'auto' | 'stacked' | 'split';
+/** Text NumberInput renders of its own, for translating it. */
+export interface NumberInputLabels {
+    /** The step-up button, read out by screen readers (default `Increase`). */
+    increase?: string;
+    /** The step-down button, read out by screen readers (default `Decrease`). */
+    decrease?: string;
+}
+export type NumberInputSlots = 'root' | 'input' | 'arrows' | 'increaseButton' | 'decreaseButton';
 export interface NumberInputProps extends Omit<NumericFormatProps, 'onValueChange' | 'value' | 'customInput' | 'onChange' | 'step' | 'onKeyDown' | 'min' | 'max'> {
     value?: number | string;
     onChange?: (value: number | undefined) => void;
@@ -52,10 +61,14 @@ export interface NumberInputProps extends Omit<NumericFormatProps, 'onValueChang
     /** Stepper layout. Default `'auto'`. */
     arrowsLayout?: NumberInputArrowsLayout;
     /** Accessible name for the increase button. Default `'Increase'`. */
-    increaseLabel?: string;
     /** Accessible name for the decrease button. Default `'Decrease'`. */
-    decreaseLabel?: string;
     readOnly?: boolean;
     isRequired?: boolean;
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Overrides the text NumberInput renders of its own. Merged per key. */
+    labels?: NumberInputLabels;
+    /** Classes for the inner elements. See `NumberInputSlots`. */
+    classNames?: SlotClassNames<NumberInputSlots>;
+    /** Inline styles for the inner elements. See `NumberInputSlots`. */
+    styles?: SlotStyles<NumberInputSlots>;
 }

package/dist/types/common/otpInput/otpInput.types.d.ts

@@ -8,6 +8,13 @@ export declare enum OtpInputCharset {
     /** Letters and digits. */
     Alphanumeric = "alphanumeric"
 }
+/** Text OtpInput renders of its own, for translating it. */
+export interface OtpInputLabels {
+    /** The group of boxes, used when no `label` is given. */
+    field?: string;
+    /** One box, given its 1-based position and how many there are. */
+    digit?: (position: number, length: number) => string;
+}
 export interface OtpInputProps extends Omit<HtmlProps, 'onChange'> {
     /** Number of character boxes. Default 6. */
     length?: number;
@@ -46,4 +53,6 @@ export interface OtpInputProps extends Omit<HtmlProps, 'onChange'> {
     style?: React.CSSProperties;
     classNames?: SlotClassNames<OtpInputSlots>;
     styles?: SlotStyles<OtpInputSlots>;
+    /** Overrides the text OtpInput renders of its own. Merged per key. */
+    labels?: OtpInputLabels;
 }

package/dist/types/common/pagination/pagination.types.d.ts

@@ -2,6 +2,19 @@ import { CSSProperties } from 'react';
 import { IconContent } from '../types/icon.types';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 export type PaginationSlots = 'root' | 'item' | 'control' | 'ellipsis';
+/** Text Pagination renders of its own, for translating it. */
+export interface PaginationLabels {
+    /** One page button, given its number. */
+    goToPage?: (page: number) => string;
+    /** Jump to the first page. */
+    first?: string;
+    /** Step back one page. */
+    previous?: string;
+    /** Step forward one page. */
+    next?: string;
+    /** Jump to the last page. */
+    last?: string;
+}
 export interface PaginationProps extends Omit<HtmlProps<HTMLElement>, 'onChange'> {
     /** Total number of pages. Nothing renders below `1`. */
     total: number;
@@ -27,4 +40,6 @@ export interface PaginationProps extends Omit<HtmlProps<HTMLElement>, 'onChange'
     style?: CSSProperties;
     classNames?: SlotClassNames<PaginationSlots>;
     styles?: SlotStyles<PaginationSlots>;
+    /** Overrides the text Pagination renders of its own. Merged per key. */
+    labels?: PaginationLabels;
 }

package/dist/types/common/progressBar/progressBar.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
 import { ProgressBarProps } from './progressBar.types';
 export declare function getContrastColor(hexColor: string): string;
-declare function ProgressBar({ className, total, progress, style, ...rest }: ProgressBarProps): ReactElement;
+declare function ProgressBar({ className, total, progress, style, classNames, styles: slotStyles, ...rest }: ProgressBarProps): ReactElement;
 export default ProgressBar;

package/dist/types/common/progressBar/progressBar.types.d.ts

@@ -1,13 +1,18 @@
-import { HtmlProps } from '../types/slots.types';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 export interface Progress {
     amount: number;
     label?: string;
     color?: string;
     class?: string;
 }
+export type ProgressBarSlots = 'root' | 'fill' | 'label';
 export interface ProgressBarProps extends HtmlProps {
     className?: string | undefined;
     total?: number;
     progress?: number | Progress | Progress[];
     style?: React.CSSProperties | undefined;
+    /** Classes for the inner elements. See `ProgressBarSlots`. */
+    classNames?: SlotClassNames<ProgressBarSlots>;
+    /** Inline styles for the inner elements. See `ProgressBarSlots`. */
+    styles?: SlotStyles<ProgressBarSlots>;
 }

package/dist/types/common/roomDrawer/roomDrawer.types.d.ts

@@ -29,6 +29,12 @@ export interface RoomDrawerChangeMeta {
 }
 /** Every string the drawer's own chrome renders, for localisation. */
 export interface RoomDrawerLabels {
+    /** The toolbar, read out by screen readers. */
+    tools?: string;
+    /** Tooltip on the storey height field. */
+    storeyHeightHint?: string;
+    /** Tooltip on an opening's sill height field. */
+    sillHeightHint?: string;
     select?: string;
     wall?: string;
     rect?: string;

package/dist/types/common/searchInput/searchInput.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { SearchInputProps } from './searchInput.types';
-export default function SearchInput({ value, onChange, onDebounce, placeholder, label, debounceMs, totalAmount, showAmount, className, width, ...rest }: SearchInputProps): ReactElement;
+export default function SearchInput({ value, onChange, onDebounce, placeholder, label, debounceMs, totalAmount, showAmount, className, width, style, classNames, styles: slotStyles, labels, ...rest }: SearchInputProps): ReactElement;

package/dist/types/common/searchInput/searchInput.types.d.ts

@@ -1,4 +1,10 @@
-import { HtmlProps } from '../types/slots.types';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
+export type SearchInputSlots = 'root' | 'input' | 'resultCount';
+/** Text SearchInput renders of its own, for translating it. */
+export interface SearchInputLabels {
+    /** The result count, given the number (default `12 results`). */
+    results?: (count: number) => string;
+}
 export interface SearchInputProps extends Omit<HtmlProps, 'onChange'> {
     value: string;
     onChange: (value: string) => void;
@@ -10,4 +16,10 @@ export interface SearchInputProps extends Omit<HtmlProps, 'onChange'> {
     showAmount?: boolean;
     className?: string;
     width?: number | string;
+    /** Classes for the inner elements. See `SearchInputSlots`. */
+    classNames?: SlotClassNames<SearchInputSlots>;
+    /** Inline styles for the inner elements. See `SearchInputSlots`. */
+    styles?: SlotStyles<SearchInputSlots>;
+    /** Overrides the text SearchInput renders of its own. Merged per key. */
+    labels?: SearchInputLabels;
 }

package/dist/types/common/splitButton/splitButton.types.d.ts

@@ -11,6 +11,11 @@ export interface SplitButtonAction {
     icon?: IconContent;
 }
 export type SplitButtonSlots = 'root' | 'primaryButton' | 'triggerButton' | 'menu' | 'menuItem';
+/** Text SplitButton renders of its own, for translating it. */
+export interface SplitButtonLabels {
+    /** The button opening the menu, read out by screen readers. */
+    moreActions?: string;
+}
 export interface SplitButtonProps extends HtmlProps {
     children?: ReactNode;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void> | void;
@@ -25,4 +30,6 @@ export interface SplitButtonProps extends HtmlProps {
     style?: CSSProperties;
     classNames?: SlotClassNames<SplitButtonSlots>;
     styles?: SlotStyles<SplitButtonSlots>;
+    /** Overrides the text SplitButton renders of its own. Merged per key. */
+    labels?: SplitButtonLabels;
 }

package/dist/types/common/timer/timer.types.d.ts

@@ -22,6 +22,11 @@ export interface TimerHandle {
     /** Current remaining time in ms, read synchronously. */
     getRemainingMs: () => number;
 }
+/** Text Timer renders of its own, for translating it. */
+export interface TimerLabels {
+    /** Tooltip on the cancel button. */
+    cancel?: string;
+}
 export interface TimerProps extends HtmlProps {
     /** Starting duration in seconds. Changing this prop while mounted resets the timer to the new duration. */
     durationSeconds: number;
@@ -98,4 +103,6 @@ export interface TimerProps extends HtmlProps {
     style?: CSSProperties;
     classNames?: SlotClassNames<TimerSlots>;
     styles?: SlotStyles<TimerSlots>;
+    /** Overrides the text Timer renders of its own. Merged per key. */
+    labels?: TimerLabels;
 }

package/dist/types/common/toast/toast.d.ts

@@ -1,9 +1,11 @@
 import { default as React } from 'react';
-import { ToastItem } from './toast.types';
+import { ToastItem, ToastLabels } from './toast.types';
 interface ToastProps {
     item: ToastItem;
     isBottom: boolean;
     onDismiss: (id: string) => void;
+    /** Already resolved by the provider: defaults, provider, then this toast's own. */
+    labels: Required<ToastLabels>;
 }
-declare function Toast({ item, isBottom, onDismiss }: ToastProps): React.JSX.Element;
+declare function Toast({ item, isBottom, onDismiss, labels }: ToastProps): React.JSX.Element;
 export default Toast;

package/dist/types/common/toast/toast.types.d.ts

@@ -3,6 +3,11 @@ import { SlotClassNames, SlotStyles } from '../types/slots.types';
 export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
 export type ToastType = 'default' | 'info' | 'success' | 'error' | 'warn';
 export type ToastSlots = 'root' | 'icon' | 'content' | 'closeButton' | 'progressBar';
+/** Text Toast renders of its own, for translating it. */
+export interface ToastLabels {
+    /** The dismiss button, read out by screen readers. */
+    close?: string;
+}
 export interface ToastContextConfig {
     position?: ToastPosition;
     /** Duration in ms. 0 = persistent. */
@@ -13,6 +18,11 @@ export interface ToastContextConfig {
     allowStacking?: boolean;
     /** Pause the auto-dismiss timer while the toast is hovered or focused. */
     pauseOnHover?: boolean;
+    /**
+     * Overrides the text a toast renders of its own. Set on `ToastProvider` for
+     * the whole app, or per toast through `showToast` options.
+     */
+    labels?: ToastLabels;
 }
 export interface ToastOptions extends ToastContextConfig {
     type?: ToastType;
@@ -22,7 +32,7 @@ export interface ToastOptions extends ToastContextConfig {
 export interface ToastProviderProps extends ToastContextConfig {
     children: ReactNode;
 }
-export interface ToastItem {
+export interface ToastItem extends Pick<ToastOptions, 'labels'> {
     id: string;
     content: ReactNode;
     options: ResolvedToastOptions;

package/dist/types/common/toast/toastProvider.d.ts

@@ -3,6 +3,6 @@ import { ToastContextConfig } from './toast.types';
 interface ToastProviderProps extends ToastContextConfig {
     children: ReactNode;
 }
-declare function ToastProvider({ children, position, duration, showRemainingTime, showCloseButton, allowStacking, pauseOnHover, }: ToastProviderProps): React.JSX.Element;
+declare function ToastProvider({ children, position, duration, showRemainingTime, showCloseButton, allowStacking, pauseOnHover, labels, }: ToastProviderProps): React.JSX.Element;
 export default ToastProvider;
 export type { ToastProviderProps };

package/dist/types/common/tree/tree.types.d.ts

@@ -25,6 +25,11 @@ export interface FlatTreeNode {
     posInSet: number;
 }
 export type TreeSlots = 'root' | 'node' | 'toggle' | 'icon' | 'label' | 'empty';
+/** Text Tree renders of its own, for translating it. */
+export interface TreeLabels {
+    /** Shown when `nodes` is empty (default `Nothing here`). */
+    empty?: string;
+}
 export interface TreeProps extends Omit<HtmlProps<HTMLDivElement>, 'onSelect'> {
     nodes: TreeNode[];
     /** Controlled set of expanded branch keys. Omit for uncontrolled. */
@@ -51,12 +56,12 @@ export interface TreeProps extends Omit<HtmlProps<HTMLDivElement>, 'onSelect'> {
     height?: number | string;
     /** Row height used by the windowed renderer before measurement (default `32`). */
     estimatedRowHeight?: number;
-    /** Shown when `nodes` is empty (default `'Nothing here'`). */
-    emptyLabel?: string;
     disabled?: boolean;
     'aria-label'?: string;
     className?: string;
     style?: CSSProperties;
     classNames?: SlotClassNames<TreeSlots>;
     styles?: SlotStyles<TreeSlots>;
+    /** Overrides the text Tree renders of its own. Merged per key. */
+    labels?: TreeLabels;
 }

package/dist/types/common/virtualList/virtualList.types.d.ts

@@ -116,6 +116,19 @@ export interface TreeDropTarget {
      */
     position: TreeDropPosition;
 }
+/** Text VirtualList renders of its own, for translating it. */
+export interface VirtualListLabels {
+    /** A row's select checkbox, read out by screen readers. */
+    selectRow?: string;
+    /** The header's select-all checkbox, read out by screen readers. */
+    selectAllRows?: string;
+    /** The gear that opens the column menu, read out by screen readers. */
+    toggleColumns?: string;
+    /** The badge on the gear, given how many columns the user has hidden. */
+    columnsHidden?: (count: number) => string;
+    /** The entry in the column menu that undoes the user's column widths. */
+    resetColumnWidths?: ReactNode;
+}
 export interface VirtualListProps<T> extends HtmlProps {
     items: T[];
     /** Render function for list mode (no columns). Ignored when `columns` is provided. */
@@ -210,12 +223,8 @@ export interface VirtualListProps<T> extends HtmlProps {
     resizableColumns?: boolean;
     /** Controlled column widths in px, keyed by column key. */
     columnWidths?: Record<string, number>;
-    /**
-     * Text of the gear-menu entry that undoes the user's column widths (default
-     * `'Reset column widths'`). The only text this component renders itself, so
-     * it is also the only one a localised app has to pass.
-     */
-    resetColumnWidthsLabel?: ReactNode;
+    /** Overrides the text VirtualList renders of its own. Merged per key. */
+    labels?: VirtualListLabels;
     /** Called with the full width map whenever the user resizes or auto-fits a column. */
     onColumnWidthsChange?: (widths: Record<string, number>) => void;
     /** Show the gear column-toggle button in the header. Default: true when columns present. */

package/dist/types/common/virtualList/virtualListHeader.d.ts

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 import { UseColumnsResult } from './useColumns';
 import { UseColumnResizeResult } from './useColumnResize';
 import { SlotClassNames, SlotStyles } from '../types/slots.types';
-import { VirtualListColumn, VirtualListSlots, VirtualListSort } from './virtualList.types';
+import { VirtualListColumn, VirtualListLabels, VirtualListSlots, VirtualListSort } from './virtualList.types';
 interface VirtualListHeaderProps<T> {
     headerRef: React.RefObject<HTMLDivElement | null>;
     /** Every column, including hidden ones: the toggle menu lists them all. */
@@ -15,7 +15,7 @@ interface VirtualListHeaderProps<T> {
     allSelected: boolean;
     someSelected: boolean;
     onSelectAll: () => void;
-    resetColumnWidthsLabel: React.ReactNode;
+    labels: Required<VirtualListLabels>;
     classNames?: SlotClassNames<VirtualListSlots>;
     styles?: SlotStyles<VirtualListSlots>;
 }
@@ -31,5 +31,5 @@ interface VirtualListHeaderProps<T> {
  * keys resizes, Alt+Home and Alt+End take the column to its minimum or to its
  * content width.
  */
-declare function VirtualListHeader<T>({ headerRef, columns, cols, resize, sort, onSort, multiSelect, allSelected, someSelected, onSelectAll, resetColumnWidthsLabel, classNames, styles: slotStyles, }: VirtualListHeaderProps<T>): React.JSX.Element;
+declare function VirtualListHeader<T>({ headerRef, columns, cols, resize, sort, onSort, multiSelect, allSelected, someSelected, onSelectAll, labels, classNames, styles: slotStyles, }: VirtualListHeaderProps<T>): React.JSX.Element;
 export default VirtualListHeader;

package/docs/ActionButtons.md

@@ -10,8 +10,7 @@
 import { ActionButtons, ButtonStyleType } from '@ahrowe/ui';
 
 <ActionButtons
-  submitLabel="Save"
-  cancelLabel="Discard"
+  labels={{ submit: 'Save', cancel: 'Discard' }}
   onSubmit={handleSave}
   onClose={handleClose}
   isSubmitButtonLoading={isSaving}
@@ -19,7 +18,7 @@ import { ActionButtons, ButtonStyleType } from '@ahrowe/ui';
 
 // Destructive action
 <ActionButtons
-  submitLabel="Delete"
+  labels={{ submit: 'Delete' }}
   submitButtonStyle={ButtonStyleType.Delete}
   onSubmit={handleDelete}
   onClose={onClose}
@@ -27,7 +26,7 @@ import { ActionButtons, ButtonStyleType } from '@ahrowe/ui';
 
 // Stacked, full-width buttons, a common mobile default
 <ActionButtons
-  submitLabel="Save"
+  labels={{ submit: 'Save' }}
   onSubmit={handleSave}
   onClose={handleClose}
   stackButtons
@@ -40,8 +39,8 @@ import { ActionButtons, ButtonStyleType } from '@ahrowe/ui';
 |------|------|-------------|
 | `onSubmit` | `() => void` | Primary button click |
 | `onClose` | `() => void` | Secondary button click |
-| `submitLabel` | `ReactNode \| string` | Primary button label |
-| `cancelLabel` | `ReactNode \| string` | Secondary button label |
+| `labels.submit` | `ReactNode \| string` | Primary button label |
+| `labels.cancel` | `ReactNode \| string` | Secondary button label |
 | `submitButtonStyle` | `ButtonStyleType` | `Primary` (default), `Delete`, `Default` |
 | `isSubmitButtonLoading` | `boolean` | Shows spinner on primary button |
 | `isSubmitButtonDisabled` | `boolean` | |
@@ -53,3 +52,5 @@ import { ActionButtons, ButtonStyleType } from '@ahrowe/ui';
 | `stackButtons` | `boolean` | Stack the buttons vertically, each stretched to full width (default `false`). A common mobile default, easy to set globally via `ConfigProvider` |
 
 **Slots:** `root` `submitButton` `cancelButton`
+
+**Labels:** `submit` `cancel` — the text this component renders of its own. Pass `labels` to override any of them, on the component or app-wide through `ConfigProvider`; keys merge individually. Type: `ActionButtonsLabels`.

package/docs/Alert.md

@@ -65,6 +65,8 @@ import { faRocket } from '@fortawesome/free-solid-svg-icons';
 
 **Slots:** `root` `icon` `content` `title` `description` `closeButton`
 
+**Labels:** `dismiss` — the text this component renders of its own. Pass `labels` to override any of them, on the component or app-wide through `ConfigProvider`; they merge per key. Type: `AlertLabels`.
+
 ## Sizing
 
 Every length in an alert is `em`, so the padding, the icon, the close button and the accent bar keep their ratios to the body copy at any base font.

package/docs/Breadcrumb.md

@@ -106,3 +106,5 @@ function Example() {
 **Global defaults:** adopts `ConfigProvider`, e.g. `defaultProps={{ Breadcrumb: { separator: '/' } }}`. See [ConfigProvider.md](ConfigProvider.md).
 
 **Slots:** `root` `list` `item` `link` `icon` `separator` `current` `ellipsis` `hiddenList` `hiddenItem`
+
+**Labels:** `showHidden` — the text this component renders of its own. Pass `labels` to override any of them, on the component or app-wide through `ConfigProvider`; they merge per key. Type: `BreadcrumbLabels`.

package/docs/Card.md

@@ -82,3 +82,5 @@ All sub-components are optional — use only what you need. Stacked sub-componen
 Card is spaced by its font: the padding, the header's gap and thumbnail, the gap between title and subtitle, and the action row all scale with the theme's text size. The title is `1.125em` — 18px at a 16px base — rather than a fixed size, so it stays proportional to the body text beneath it.
 
 `CardMedia` bleeds to the card's edges with a negative margin that has to stay equal to the padding, so change the two together.
+
+**Slots:** `root` `content`

package/docs/Carousel.md

@@ -103,3 +103,5 @@ Slides announce themselves as the panel each dot controls, or as "slide 2 of 5"
 **Global defaults:** adopts `ConfigProvider`, e.g. `defaultProps={{ Carousel: { autoPlay: true } }}`. See [ConfigProvider.md](ConfigProvider.md).
 
 **Slots:** `root` `track` `slide` `prevButton` `nextButton` `dots` `dot`
+
+**Labels:** `previous` `next` `slides` `goToSlide(slide)` — the text this component renders of its own. Pass `labels` to override any of them, on the component or app-wide through `ConfigProvider`; they merge per key. Type: `CarouselLabels`.

package/docs/Chip.md

@@ -56,7 +56,7 @@ import { Chip, ChipContainer, ChipStyleType } from '@ahrowe/ui';
 | `text` | `string` | Chip label |
 | `styleType` | `ChipStyleType` | Colour variant (default `Default`) |
 | `thumbnail` | `string` | Avatar image URL |
-| `removeLabel` | `string` | Accessible name for the remove button. Default: `'Remove'` |
+| `labels.remove` | `string` | Accessible name for the remove button. Default: `'Remove'` |
 | `showRemoveIcon` | `boolean` | Show × icon |
 | `onRemove` | `() => void` | Remove button handler |
 | `onClick` | `() => void` | Makes chip clickable |
@@ -66,3 +66,7 @@ import { Chip, ChipContainer, ChipStyleType } from '@ahrowe/ui';
 | Prop | Type | Description |
 |------|------|-------------|
 | `inline` | `boolean` | Inline layout (default wraps) |
+
+**Labels:** `remove` — the text this component renders of its own. Pass `labels` to override any of them, on the component or app-wide through `ConfigProvider`; keys merge individually. Type: `ChipLabels`.
+
+**Slots:** `root` `inner` `thumbnail` `text` `removeIcon`

package/docs/ColorPicker.md

@@ -50,3 +50,7 @@ Parsing uses the browser's own colour engine, which means it needs a DOM with a
 The inline swatch tracks the theme's text size, since it sits beside a label: `--swatch-size` falls back to `2em`, i.e. 32px at a 16px base, and the gap, the hex overlay and the transparency checkerboard scale with it.
 
 The picker panel deliberately does not. It is a floating control surface with its own fixed layout — a saturation area, sliders and a hex field — and it holds together at a large base font rather than needing to grow with it.
+
+**Labels:** `pickFromScreen` — the text this component renders of its own. Pass `labels` to override any of them, on the component or app-wide through `ConfigProvider`; they merge per key. Type: `ColorPickerLabels`.
+
+**Slots:** `root` `swatch` `panel` `gradient` `hueSlider` `alphaSlider` `hexInput` `eyeDropper`

package/docs/ConfigProvider.md

@@ -114,3 +114,26 @@ Each entry is a `Partial<...Props>`, so any of that component's props can be def
 `Textarea`, `NumberInput`, and `DatePicker` are built on top of `Input`, so they **also** inherit `Input` defaults for the props they forward to it. Their own component-keyed defaults take precedence for props they handle themselves. Example: with `Input: { alwaysFloatLabel: true }` set, every `Textarea` / `NumberInput` / `DatePicker` floats its label too, without needing a separate entry.
 
 The `ComponentDefaults` type is the source of truth for which keys are currently supported — more components adopt it over time.
+
+## Translating the components
+
+Every string a component renders of its own is set through its `labels` prop, and a `ConfigProvider` sets them for the whole app at once:
+
+```tsx
+<ConfigProvider
+  defaultProps={{
+    Alert: { labels: { dismiss: 'Schließen' } },
+    Modal: { labels: { close: 'Schließen' } },
+    Pagination: { labels: { goToPage: (page) => `Zu Seite ${page}` } },
+    VirtualList: { labels: { selectRow: 'Zeile auswählen', selectAllRows: 'Alle Zeilen auswählen' } },
+  }}
+>
+  <App />
+</ConfigProvider>
+```
+
+**Labels merge per key**, unlike every other default here. An instance that overrides one string keeps the provider's translations for the rest, so `<Alert labels={{ dismiss: 'Weg damit' }} />` under the provider above does not lose anything else Alert might have been given. Anything the component does not produce itself, a `title`, a column `label`, a button's children, is already yours and never appears in `labels`.
+
+`ColorPicker` and `VirtualList` appear in `ComponentDefaults` with their labels only: the first is configured elsewhere, the second has generic props that a per-key default map cannot express. `Toast` is not there at all, because `ToastProvider` is already its app-wide configuration and carries `labels` itself.
+
+Each component's doc lists its own keys under **Labels:**.

package/docs/ConfirmModal.md

@@ -38,9 +38,9 @@ const [isOpen, setIsOpen] = useState(false);
 | `content` | `ReactNode` | Dialog body |
 | `onConfirm` | `() => void \| Promise<void>` | Called when user confirms |
 | `onClose` | `(didSubmit: boolean) => void` | Called on both confirm and cancel |
-| `submitLabel` | `string` | Confirm button label (default `'Confirm'`) |
+| `labels.submit` | `string` | Confirm button label (default `'Confirm'`) |
 | `isDelete` | `boolean` | Render the confirm button with the destructive (delete) style |
-| `actionButtonsProps` | `ActionButtonsProps` | Overrides passed through to the underlying `ActionButtons` (wins over `submitLabel` / `isDelete`) |
+| `actionButtonsProps` | `ActionButtonsProps` | Overrides passed through to the underlying `ActionButtons` (wins over `labels.submit` / `isDelete`) |
 | `children` | `ReactNode` | Alternative to `content` prop |
 
 **Destructive action:**
@@ -51,16 +51,18 @@ const [isOpen, setIsOpen] = useState(false);
   title="Delete item?"
   content="This action cannot be undone."
   isDelete
-  submitLabel="Delete"
+  labels={{ submit: 'Delete' }}
   onConfirm={async () => { await deleteItem(); }}
   onClose={() => setIsOpen(false)}
 />
 ```
 
-**Global defaults:** `ConfirmModal` supports `ConfigProvider` — set a default `submitLabel` (or any other prop) app-wide:
+**Global defaults:** `ConfirmModal` supports `ConfigProvider` — set a default `labels.submit` (or any other prop) app-wide:
 
 ```tsx
-<ConfigProvider defaultProps={{ ConfirmModal: { submitLabel: 'OK' } }}>
+<ConfigProvider defaultProps={{ ConfirmModal: { labels: { submit: 'OK' } } }}>
   <App />
 </ConfigProvider>
 ```
+
+**Labels:** `submit` `cancel` — the text this component renders of its own. Pass `labels` to override any of them, on the component or app-wide through `ConfigProvider`; keys merge individually. Type: `ConfirmModalLabels`.

package/docs/DatePicker.md

@@ -6,7 +6,8 @@
 
 **Keyboard:** the day grid uses a roving tab stop (the selected day, or today, or the 1st — one Tab reaches it, not every day individually); arrow keys move by day (`←`/`→`) or by week (`↑`/`↓`), crossing into the adjacent month automatically when they run past the edge, and Enter/Space selects the focused day.
 
-**Import:** `import { DatePicker } from '@ahrowe/ui'`
+**Import:** `import { DatePicker } from '@ahrowe/ui'`  
+**Types:** `import type { DatePickerProps } from '@ahrowe/ui'`
 
 ```tsx
 import { DatePicker, FormValidator } from '@ahrowe/ui';
@@ -79,3 +80,7 @@ const dateValidator = new FormValidator<Date | null>(null);
 | `showClearButton` | `boolean` | Show a clear/reset button |
 | `startDate` | `Date` | Range highlight start |
 | `endDate` | `Date` | Range highlight end |
+
+**Slots:** `root` `input` `header` `monthDropdown` `yearDropdown` `calendar` `clearButton`
+
+The root also takes the full native attribute set (`id`, `data-*`, `aria-*`, `title`, event handlers). `onChange` and `onSelect` report a `Date`, so the native handlers of those names are not available.

package/docs/Drawer.md

@@ -62,3 +62,5 @@ function Example() {
 - It's an **inline** element with `height: 100%` and a `width` transition — place it in a flex/grid layout next to your main content; it doesn't overlay.
 - When `openedWidth` is omitted, the open width tracks the content's `scrollWidth` via a `ResizeObserver`, so it grows/shrinks with dynamic content.
 - For a full-screen overlay dialog instead, use `Modal`; for a collapsing scroll header, see `Overscroll`.
+
+**Slots:** `root` `content` `inner`

package/docs/Dropdown.md

@@ -65,3 +65,5 @@ const statusValidator = new FormValidator('', [Validators.required()]);
 The list is rendered through a portal and tracks the trigger across scroll, so it always escapes clipping ancestors (cards, scroll containers, virtualized lists). It flips to open upward automatically when there's no room below, and shifts horizontally to stay within the viewport when the trigger sits near the left or right edge of the screen. It hides (without closing) if the trigger itself scrolls behind a clipping ancestor, reappearing once it's back in view. It also re-measures when its own content changes size while open, so a list that shrinks (e.g. filtered down to fewer entries) stays anchored to the trigger instead of hanging above it.
 
 **Bottom sheet:** `presentation={Presentation.Sheet}` drops the anchoring entirely and pins the list to the bottom of the screen instead, full width up to 560px, behind a backdrop, scrolling internally past 70% of the viewport height and lifting itself above an open on-screen keyboard, shrinking to fit the space that leaves rather than running off the top of the screen. Tapping the backdrop closes the list without also pressing whatever sits behind it. It is the same list with the same keyboard handling, so selection, highlighting and infinite scroll are unchanged. `Presentation.Auto` does that only when the pointer is coarse *and* the screen is under 768px wide. The default is `Presentation.Default`. A whole app can opt in with `<ConfigProvider defaultProps={{ Dropdown: { presentation: Presentation.Auto } }}>`, or for every sheet-capable component at once with `<ConfigProvider presentation={Presentation.Auto}>` — see [ConfigProvider.md](ConfigProvider.md).
+
+**Slots:** `root` `label` `field` `control` `icon` `placeholder` `list` `option`

package/docs/EmptyState.md

@@ -28,3 +28,7 @@ import { faInbox } from '@fortawesome/free-solid-svg-icons';
 | `icon` | `IconDefinition \| ReactElement` | Icon shown above the message — FontAwesome icon or any React element |
 | `children` | `ReactNode` | Message body (defaults to `"No entries available"`) |
 | `className` | `string` | Root element class |
+
+**Labels:** `empty` — the text this component renders of its own. Pass `labels` to override it, on the component or app-wide through `ConfigProvider`; keys merge individually. Type: `EmptyStateLabels`.
+
+**Slots:** `root` `icon` `text`

package/docs/Fab.md

@@ -57,3 +57,5 @@ import { faPlus, faPen, faCamera } from '@fortawesome/free-solid-svg-icons';
 ```
 
 `--fab-icon-size` is independent of `--fab-size`, so enlarging the button does not enlarge the glyph; set both. It applies to the speed-dial entries as well as the main button.
+
+**Slots:** `root` `backdrop` `button` `icon` `menu` `menuEntry` `menuEntryLabel`

package/docs/FormValidatorGroup.md

@@ -38,7 +38,7 @@ function ProfileForm({ user, onSaved }) {
       <Input label="Name"  formValidator={form.group.name} />
       <Input label="Email" type={InputType.Email} formValidator={form.group.email} />
       <ActionButtons
-        submitLabel="Save"
+        labels={{ submit: 'Save' }}
         onSubmit={form.submit}
         isSubmitButtonLoading={form.isSubmitting}
         isSubmitButtonDisabled={!form.isDirty}

package/docs/Input.md

@@ -125,6 +125,8 @@ The stored value is the formatted one, spaces included, so strip them before a l
 
 **Slots:** `label` `container` `input` `suffix` `upperRightLabel` `fieldset`
 
+**Labels:** `clear` `clearSearch` `showPassword` `hidePassword` — the text this component renders of its own. Pass `labels` to override any of them, on the component or app-wide through `ConfigProvider`; they merge per key. Type: `InputLabels`.
+
 ## Browser autofill
 
 `autoComplete` is the plain HTML attribute and is passed straight through — use `'one-time-code'`, `'new-password'`, `'street-address'` and the rest as you would on a bare `<input>`. Input does **not** set it: autofill and password managers are usability and accessibility features, and a plain field has no suggestion list of its own for them to collide with.

package/docs/KlipyPicker.md

@@ -41,3 +41,5 @@ import { KlipyPicker } from '@ahrowe/ui';
 | `selected` | `string \| null` | Currently selected GIF id (for visual highlight) |
 | `onSelect` | `(preview: KlipyResult \| null) => void \| Promise<void>` | Fires when a GIF is picked; `null` when cleared |
 | `className` | `string` | Root element class |
+
+**Labels:** `search` — the text this component renders of its own. Pass `labels` to override it, on the component or app-wide through `ConfigProvider`; keys merge individually. Type: `KlipyPickerLabels`.