@ahrowe/ui 0.31.0 → 0.33.0

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,9 @@ 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`.
+
+**Slots:** `root` `input` `arrows` `increaseButton` `decreaseButton`
+
+With `arrowsLayout='split'` the root is the group around the two buttons and the field; otherwise it is the field itself.

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/ProgressBar.md

@@ -58,3 +58,5 @@ const theme: Theme = {
 // Or one-off via style
 <ProgressBar progress={60} style={{ '--progress-bar-track-color': '#2a2a2a' } as React.CSSProperties} />
 ```
+
+**Slots:** `root` `fill` `label`

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/SearchInput.md

@@ -55,3 +55,7 @@ import { SearchInput } from '@ahrowe/ui';
 | `showAmount` | `boolean` | Show the result count line (default `true`) |
 | `width` | `number \| string` | Fixed width for the wrapper |
 | `className` | `string` | Root wrapper class |
+
+**Slots:** `root` `input` `resultCount`
+
+**Labels:** `results(count)` — the line under the field (default `12 results`). Pass `labels` to override it, on the component or app-wide through `ConfigProvider`. Type: `SearchInputLabels`.

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.33.0",
   "description": "A React UI component library with theming, CSS Modules, and TypeScript support",
   "keywords": [
     "components",