@ahrowe/ui 0.31.0 → 0.32.0

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/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,5 @@ 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`.

package/docs/ColorPicker.md

@@ -50,3 +50,5 @@ 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`.

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';

package/docs/EmptyState.md

@@ -28,3 +28,5 @@ 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`.

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`.

package/docs/Modal.md

@@ -71,3 +71,5 @@ A sheet-presented Modal takes 90% of the screen height rather than the 70% a men
 The panel also takes the full native `div` attribute set (`id`, `role`, `aria-*`, `data-*`, …). Pass `aria-label` when using `hideHeader`, since there is then no title to label the dialog with.
 
 **Slots:** `container` `backdrop` `modal` `header` `title` `closeButton` `body`
+
+**Labels:** `close` — 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: `ModalLabels`.

package/docs/MultiSelect.md

@@ -28,10 +28,10 @@ const [value, setValue] = useState<MultiSelectValue[]>([]);
 <MultiSelect items={items} defaultValue={['apple']} onChange={(value) => console.log(value)} />
 
 // Searchable, for a list too long to scan
-<MultiSelect items={countries} searchable searchPlaceholder="Filter countries…" />
+<MultiSelect items={countries} searchable labels={{ searchPlaceholder: 'Filter countries…' }} />
 
 // Tag entry: type a value that isn't in `items` and pick the "add" row
-<MultiSelect items={commonTags} allowCustomValues createLabel={(value) => `Neu: ${value}`} />
+<MultiSelect items={commonTags} allowCustomValues labels={{ create: (value) => `Neu: ${value }}`} />
 
 // Cap the selection — unselected options disable once the cap is reached
 <MultiSelect items={items} maxSelected={3} />
@@ -72,9 +72,9 @@ import { Presentation } from '@ahrowe/ui';
 | `placeholder` | `string` | Shown while nothing is selected. With a `label`, it fades in only after the label has finished floating clear |
 | `searchable` | `boolean` | Show a search box in the panel (default `false`) |
 | `allowCustomValues` | `boolean` | Let the user add a value not in `items`. Implies `searchable` |
-| `createLabel` | `(value: string) => string` | Label for the add row (default `Add "…"`) |
-| `searchPlaceholder` | `string` | Placeholder for that box (default `'Search…'`) |
-| `emptyLabel` | `string` | Shown when nothing matches (default `'No matches'`) |
+| `labels.create` | `(value: string) => string` | Label for the add row (default `Add "…"`) |
+| `labels.searchPlaceholder` | `string` | Placeholder for that box (default `'Search…'`) |
+| `labels.empty` | `string` | Shown when nothing matches (default `'No matches'`) |
 | `maxSelected` | `number` | Cap the selection; unselected options disable at the cap |
 | `clearable` | `boolean` | Show the clear-all button (default `true`) |
 | `disabled` | `boolean` | Dims the field and blocks interaction |
@@ -98,3 +98,5 @@ import { Presentation } from '@ahrowe/ui';
 **Global defaults:** adopts `ConfigProvider`, e.g. `defaultProps={{ MultiSelect: { searchable: true } }}`. See [ConfigProvider.md](ConfigProvider.md).
 
 **Slots:** `root` `label` `fieldset` `control` `values` `chip` `placeholder` `clearButton` `icon` `panel` `search` `options` `option` `optionCheck` `optionLabel` `empty`
+
+**Labels:** `clearSelection` `create(value)` `searchPlaceholder` `empty` — 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: `MultiSelectLabels`.

package/docs/NumberInput.md

@@ -74,8 +74,8 @@ const priceValidator = new FormValidator<number | undefined>(undefined, [Validat
 | `min` | `number` | Lower bound — see the note below |
 | `max` | `number` | Upper bound — see the note below |
 | `arrowsLayout` | `'auto' \| 'stacked' \| 'split'` | Stepper layout. Default: `'auto'` |
-| `increaseLabel` | `string` | Accessible name for the increase button. Default: `'Increase'` |
-| `decreaseLabel` | `string` | Accessible name for the decrease button. Default: `'Decrease'` |
+| `labels.increase` | `string` | Accessible name for the increase button. Default: `'Increase'` |
+| `labels.decrease` | `string` | Accessible name for the decrease button. Default: `'Decrease'` |
 
 **Steppers (`showArrows`):** two layouts, picked by `arrowsLayout`:
 
@@ -124,3 +124,5 @@ const qty = new FormValidator<number | undefined>(undefined, [inRange(10, 100)])
 ```
 
 **Mobile keyboard layout:** shows the numeric on-screen keyboard automatically (`inputMode="numeric"` when `decimalScale={0}`, `"decimal"` otherwise, so a decimal separator key is available whenever fractional values are allowed). Pass `inputMode` directly to override.
+
+**Labels:** `increase` `decrease` — 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: `NumberInputLabels`.

package/docs/OtpInput.md

@@ -91,6 +91,8 @@ const codeValidator = new FormValidator('', [Validators.required(), Validators.m
 
 **Slots:** `root` `label` `inputs` `input` `separator`
 
+**Labels:** `field` `digit(position, length)` — 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: `OtpInputLabels`.
+
 ## Sizing
 
 The code boxes, the digit inside them, the gaps and the separator all scale with the theme's text, so the field stays in proportion with its label.

package/docs/Pagination.md

@@ -70,3 +70,5 @@ const [page, setPage] = useState(1);
 **Global defaults:** adopts `ConfigProvider`, e.g. `defaultProps={{ Pagination: { showEdges: true } }}`. See [ConfigProvider.md](ConfigProvider.md).
 
 **Slots:** `root` `item` `control` `ellipsis`
+
+**Labels:** `goToPage(page)` `first` `previous` `next` `last` — 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: `PaginationLabels`.

package/docs/RoomDrawer.md

@@ -373,3 +373,5 @@ The previous `RoomDrawer` had no data contract at all: `RoomDrawerProps` was `{
 - Removing a corner was a double-click, which was undiscoverable and impossible on touch. Select it and press `Delete` instead.
 
 **Slots:** `root` `toolbar` `toolButton` `toolIcon` `viewControls` `viewButton` `zoomLabel` `canvasWrapper` `canvas` `grid` `rooms` `roomFill` `roomLabel` `walls` `wallBody` `openings` `opening` `overlay` `measureLine` `floorBar` `floorTab` `inspector` `inspectorLabel` `inspectorField` `hint`
+
+**Labels:** every string the drawer's own chrome renders, including `tools`, `storeyHeightHint` and `sillHeightHint`. Type: `RoomDrawerLabels`.

package/docs/SplitButton.md

@@ -79,3 +79,5 @@ import { ButtonStyleType } from '@ahrowe/ui';
 **Global defaults:** adopts `ConfigProvider`, e.g. `defaultProps={{ SplitButton: { styleType: ButtonStyleType.Default } }}`. See [ConfigProvider.md](ConfigProvider.md).
 
 **Slots:** `root` `primaryButton` `triggerButton` `menu` `menuItem`
+
+**Labels:** `moreActions` — 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: `SplitButtonLabels`.

package/docs/Timer.md

@@ -140,6 +140,8 @@ function Example() {
 
 **Slots:** `root` `ringWrapper` `ringSvg` `ringTrack` `ringProgress` `ripples` `ripple` `display` `time` `label` `controls` `addButton` `removeButton` `pauseButton` `cancelButton`
 
+**Labels:** `cancel` — 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: `TimerLabels`.
+
 ## Sizing
 
 The ring follows the theme's text size, because the readout inside it does: `--timer-size` falls back to `10em`, i.e. 160px at a 16px base, and the gaps and padding around it are `em` too. The `size` prop still wins where it is given.

package/docs/Toast.md

@@ -75,6 +75,8 @@ showToast('Done', {
 
 **Slots:** `root` `icon` `content` `closeButton` `progressBar`
 
+**Labels:** `close` — the dismiss button's screen-reader name. Set it on `ToastProvider` for the whole app (`labels={{ close: 'Schließen' }}`), or per toast through the `showToast` options. Type: `ToastLabels`.
+
 ## Sizing
 
 A toast is sized and spaced by its font: the padding, the gap, the body copy, the icon, the close button, the variant accent bar and the progress bar all scale with the theme's text, as does the gap between stacked toasts.

package/docs/Tree.md

@@ -62,7 +62,7 @@ import { faWarehouse } from '@fortawesome/free-solid-svg-icons';
 | `toggleIcon` | `IconDefinition \| ReactElement` | Toggle icon, rotated 90° when open (default a right chevron) |
 | `height` | `number \| string` | Windows the rows through `VirtualList` at this viewport height |
 | `estimatedRowHeight` | `number` | Row height for the windowed renderer (default `32`) |
-| `emptyLabel` | `string` | Shown when `nodes` is empty (default `'Nothing here'`) |
+| `labels.empty` | `string` | Shown when `nodes` is empty (default `'Nothing here'`) |
 | `disabled` | `boolean` | Dims the tree and blocks interaction |
 | `aria-label` | `string` | Accessible name for the tree (default `'Tree'`) |
 
@@ -93,3 +93,5 @@ Two things change in that mode. Rows must be a uniform height, so size them with
 **Global defaults:** adopts `ConfigProvider`, e.g. `defaultProps={{ Tree: { indent: 30 } }}`. See [ConfigProvider.md](ConfigProvider.md).
 
 **Slots:** `root` `node` `toggle` `icon` `label` `empty`
+
+**Labels:** `empty` — 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: `TreeLabels`.

package/docs/VirtualList.md

@@ -144,7 +144,6 @@ const columns: VirtualListColumn<User>[] = [
 | `resizableColumns` | `boolean` | Let the user drag column edges to resize (see **Column resizing**) |
 | `columnWidths` | `Record<string, number>` | Controlled column widths in px, keyed by column key |
 | `onColumnWidthsChange` | `(widths) => void` | Called with the full width map after every resize or auto-fit |
-| `resetColumnWidthsLabel` | `ReactNode` | Text of the gear-menu reset entry (default `'Reset column widths'`) |
 | `showColumnToggle` | `boolean` | Show gear button to show/hide columns (default `true` when columns present) |
 | `visibleColumnKeys` | `string[]` | Controlled visible column keys |
 | `onVisibleColumnsChange` | `(keys) => void` | Column visibility change callback |
@@ -199,7 +198,7 @@ const [sort, setSort] = useState<VirtualListSort | null>(null);
 - **Keyboard**: `Alt` plus the arrow keys on the focused header cell, 10px a press (`Alt+Shift` for 1px). `Alt+Home` goes to the column's minimum, `Alt+End` auto-fits. The strip itself is a mouse affordance and is not a tab stop.
 - **Undo it**: once anything has been resized, the gear menu grows a **Reset column widths** entry, and the same thing is on the imperative handle as `resetColumnWidths()`. Both also clear the saved widths.
 
-That entry is the only text this component renders of its own, so it is the only string a localised app has to pass: `resetColumnWidthsLabel="Spaltenbreiten zurücksetzen"`. Everything else in the table comes from your columns and cells.
+Its text, like every other string the table renders of its own, is set through `labels` (see below): `labels={{ resetColumnWidths: 'Spaltenbreiten zurücksetzen' }}`.
 
 ```tsx
 <VirtualList
@@ -366,4 +365,6 @@ This needs the list to have a **bounded height** (the default `height="100%"` in
 
 **Slots:** `root` `header` `headerCell` `headerSort` `sortIcon` `resizeHandle` `headerToggle` `togglePopover` `toggleItem` `toggleReset` `body` `row` `cell` `selectCell` `activeRow` `loadingIndicator` `dropIndicator` `columnChip`
 
+**Labels:** `selectRow` `selectAllRows` `toggleColumns` `columnsHidden(count)` `resetColumnWidths` — 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: `VirtualListLabels`.
+
 **In-row popovers:** Rows support inline popover content that overflows the row's bottom edge — e.g. a `Dropdown`, `InputDropdown`, `Tooltip`, or `FloatingMenu` whose list opens below its trigger. All four render their popover through a `BodyEnd` portal and track their trigger's position directly, so they always escape row/cell clipping and paint above the rows below, regardless of focus — no special CSS is needed on the row or cell for this. Cells still clip their own content by default (ellipsis / neighbour-spill guard); that's unaffected. This works in both list mode (`renderRow`) and table mode (`columns`). Stop the row's click handler from firing when interacting with the control (`onClick={(e) => e.stopPropagation()}` on the cell) if the row is also selectable.

package/docs/Wizard.md

@@ -26,8 +26,7 @@ const [step, setStep] = useState(0);
 />
 
 <ActionButtons
-  submitLabel={step < STEPS.length - 1 ? 'Next' : 'Finish'}
-  cancelLabel={step > 0 ? 'Back' : 'Cancel'}
+  labels={{ submit: step < STEPS.length - 1 ? 'Next' : 'Finish', cancel: step > 0 ? 'Back' : 'Cancel' }}
   onSubmit={() => step < STEPS.length - 1 ? setStep(step + 1) : handleFinish()}
   onClose={() => step > 0 ? setStep(step - 1) : handleCancel()}
 />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahrowe/ui",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "description": "A React UI component library with theming, CSS Modules, and TypeScript support",
   "keywords": [
     "components",