@pienter/ui 0.18.0 → 0.20.0

package/CHANGELOG.md

@@ -2,6 +2,37 @@
 
 ## Unreleased
 
+## 0.20.0 - 2026-09-16
+
+### Added
+
+- `BlockEditor` takes `hint`, `emptyText` and `addLabel(typeLabel)`, the
+  three visible strings it used to hard-code in English: the reorder hint
+  above the list, the edit-mode empty message under the `empty` slot, and the
+  add-button label built from each block type's `label`. The English defaults
+  are unchanged, so a Dutch consumer can pass `Tekst toevoegen` and a Dutch
+  hint without CSS overrides or replacing the add row. The aria-only labels
+  and announcements are still English.
+
+## 0.19.0 - 2026-09-16
+
+### Added
+
+- The English accessibility text the icon-only controls and landmarks used
+  to hardcode is now a prop with that text as its default, following
+  `AppLayout`'s `skipLabel` / `drawerLabel` / `navigationLabel`, so a
+  single-language consumer can name them in its own language. `Pagination`
+  takes `label` (the `<nav>` landmark, `Pagination`), `previousLabel`
+  (`Previous page`) and `nextLabel` (`Next page`); `Breadcrumb` takes
+  `label` (`Breadcrumb`); `NumberField` takes `increaseLabel` (`Increase`)
+  and `decreaseLabel` (`Decrease`); `Table` takes `selectAllLabel`
+  (`Select all rows`), which `DataTable` forwards alongside its own
+  `selectRowLabel`, a string or a function of the row that replaces the
+  default `Select <first cell>` name; `Toast` takes `closeLabel` (`Close`),
+  and `ToastHost` takes the same `closeLabel` for every toast it renders
+  next to its existing `label` for the notifications region.
+  `PaginationFooter` has no text of its own and is unchanged.
+
 ## 0.18.0 - 2026-09-16
 
 ### Changed

package/CONVENTIONS.md

@@ -1498,8 +1498,11 @@ counts the selected values, with a Clear, joining values on the comma
 convention) and `FilterRange` (`name`, `label`, `min`, `max`, `step`; two
 NumberFields writing `<name>_min` and `<name>_max` on change). Each binds
 through `useIndexFilters` to the provided state, or to a `state` prop, and
-touches only its own names; without a state it warns and does nothing. They
-sit in the `filters` slot or anywhere the definition provides the state; a
+touches only its own names; without a state it warns and does nothing. On a
+module index they live in the `PageAside`: the definition renders them
+inside `<PageAside title="Filters">` beside `<Index :state>`, both under the
+component that created and provided the state, and the aside's content grid
+stacks them. The `filters` slot stays for a toolbar placement; elsewhere a
 column of them is a consumer grid with a spacing token for its gap. Options
 and counts are the consumer's (`CONTEXT.md`: Facet).
 

package/components/feedback/toast/Toast.vue

@@ -19,7 +19,7 @@
             v-if="dismissible"
             class="pui-toast__close"
             type="button"
-            aria-label="Close"
+            :aria-label="closeLabel"
             @click="$emit('dismiss')"
         >
             <Icon name="x" size="sm" />
@@ -48,6 +48,8 @@ const props = withDefaults(
         dismissible?: boolean;
         icon?: IconName;
         action?: { label: string };
+        /** Accessible name of the icon-only close button. */
+        closeLabel?: string;
     }>(),
     {
         tone: undefined,
@@ -55,6 +57,7 @@ const props = withDefaults(
         dismissible: true,
         icon: undefined,
         action: undefined,
+        closeLabel: 'Close',
     },
 );
 

package/components/feedback/toast/ToastHost.vue

@@ -17,11 +17,15 @@ interface Timer {
 const props = withDefaults(
     defineProps<{
         controller?: ToastController;
+        /** Accessible name of the notifications region. */
         label?: string;
+        /** Accessible name of every toast's close button. */
+        closeLabel?: string;
     }>(),
     {
         controller: () => defaultController,
         label: 'Notifications',
+        closeLabel: 'Close',
     },
 );
 const items = computed(() => props.controller.visible.value);
@@ -151,6 +155,7 @@ onBeforeUnmount(() => {
                 :dismissible="item.dismissible"
                 :icon="item.icon"
                 :action="item.action"
+                :close-label="closeLabel"
                 aria-keyshortcuts="Escape"
                 @dismiss="dismiss(item.id)"
                 @action="runAction(item)"

package/components/form/block-editor/BlockEditor.vue

@@ -24,6 +24,12 @@ const props = withDefaults(
         /** Heading level of each block title: `3` sits under a level-2 `Panel` title. */
         level?: 2 | 3 | 4 | 5 | 6;
         blockLabel?: (block: T, index: number) => string;
+        /** Label of each add button, given the block type's `label`. */
+        addLabel?: (typeLabel: string) => string;
+        /** Reorder hint shown above the list in edit mode. */
+        hint?: string;
+        /** Empty-list message in edit mode; the `empty` slot replaces it entirely. */
+        emptyText?: string;
     }>(),
     {
         disabled: false,
@@ -32,6 +38,9 @@ const props = withDefaults(
         label: 'Content blocks',
         level: 3,
         blockLabel: undefined,
+        addLabel: (typeLabel: string) => `Add ${typeLabel}`,
+        hint: 'Use the move buttons to reorder, or drag with a pointer.',
+        emptyText: 'No blocks yet. Add a block to start writing.',
     },
 );
 
@@ -317,7 +326,7 @@ onBeforeUnmount(stopDrag);
         :data-readonly="readonly ? 'true' : undefined"
     >
         <p v-if="!readonly" :id="`${id}-hint`" class="pui-block-editor__hint">
-            Use the move buttons to reorder, or drag with a pointer.
+            {{ hint }}
         </p>
         <ol
             v-if="modelValue.length"
@@ -448,9 +457,7 @@ onBeforeUnmount(stopDrag);
         </ol>
         <div v-else class="pui-block-editor__empty">
             <slot name="empty">{{
-                readonly
-                    ? 'No content blocks.'
-                    : 'No blocks yet. Add a block to start writing.'
+                readonly ? 'No content blocks.' : emptyText
             }}</slot>
         </div>
         <div v-if="!readonly" :id="`${id}-add`" class="pui-block-editor__add">
@@ -461,7 +468,7 @@ onBeforeUnmount(stopDrag);
                 size="sm"
                 :disabled="disabled"
                 @click="add(type)"
-                >Add {{ type.label }}</Button
+                >{{ addLabel(type.label) }}</Button
             >
         </div>
     </div>

package/components/form/number-field/NumberField.vue

@@ -43,7 +43,7 @@
                     type="button"
                     class="pui-number-field__step"
                     data-direction="increment"
-                    aria-label="Increase"
+                    :aria-label="increaseLabel"
                     :disabled="disabled"
                     @click="handleStep('increment')"
                 >
@@ -53,7 +53,7 @@
                     type="button"
                     class="pui-number-field__step"
                     data-direction="decrement"
-                    aria-label="Decrease"
+                    :aria-label="decreaseLabel"
                     :disabled="disabled"
                     @click="handleStep('decrement')"
                 >
@@ -100,6 +100,10 @@ const props = withDefaults(
         readonly?: boolean;
         /** The +/− buttons beside the input; off, the field is a plain number input. */
         steppers?: boolean;
+        /** Accessible name of the + stepper. */
+        increaseLabel?: string;
+        /** Accessible name of the − stepper. */
+        decreaseLabel?: string;
         hint?: string;
         errors?: string[];
         status?: 'error' | 'success';
@@ -118,6 +122,8 @@ const props = withDefaults(
         disabled: false,
         readonly: false,
         steppers: true,
+        increaseLabel: 'Increase',
+        decreaseLabel: 'Decrease',
         hint: undefined,
         errors: () => [],
         status: undefined,

package/components/layout/table/DataTable.vue

@@ -10,6 +10,7 @@
         :selectable="selectable"
         :clickable="clickable"
         :all-selected="allSelected"
+        :select-all-label="selectAllLabel"
         :label="label"
         :labelledby="labelledby"
         @toggle-all="toggleAll"
@@ -76,6 +77,10 @@ const props = withDefaults(
         selectable?: boolean;
         /** Show a pointer cursor on rows. */
         clickable?: boolean;
+        /** Accessible name of the header select-all checkbox. */
+        selectAllLabel?: string;
+        /** Accessible name of a row's checkbox; a function receives the row. Default: `Select <first cell>`, or `Select row` when that cell is empty. */
+        selectRowLabel?: string | ((row: T) => string);
         /** Which column is sorted, and how. `rows` is passed through untouched — ordering them is the consumer's job (ADR 0005). */
         sort?: SortState;
         /** Frosts and disables the body while the rows are stale, and suppresses the empty state. */
@@ -90,6 +95,8 @@ const props = withDefaults(
         selected: () => [],
         selectable: false,
         clickable: false,
+        selectAllLabel: 'Select all rows',
+        selectRowLabel: undefined,
         sort: null,
         loading: false,
         label: undefined,
@@ -112,6 +119,9 @@ function keyOf(row: T): string | number {
     return cellValue(row, props.rowKey) as string | number;
 }
 function rowLabel(row: T): string {
+    if (typeof props.selectRowLabel === 'function')
+        return props.selectRowLabel(row);
+    if (props.selectRowLabel !== undefined) return props.selectRowLabel;
     const first = props.columns[0];
     const value = first ? String(cellValue(row, first.key) ?? '').trim() : '';
     return value ? `Select ${value}` : 'Select row';

package/components/layout/table/Table.vue

@@ -27,7 +27,7 @@
                             class="pui-table__check"
                             type="checkbox"
                             :checked="allSelected"
-                            aria-label="Select all rows"
+                            :aria-label="selectAllLabel"
                             @change="emit('toggle-all')"
                         />
                     </th>
@@ -106,6 +106,8 @@ const props = withDefaults(
         clickable?: boolean;
         /** Checked state of the header select-all checkbox. */
         allSelected?: boolean;
+        /** Accessible name of the header select-all checkbox. */
+        selectAllLabel?: string;
         /** Which column is sorted, and how. Rendered, never changed here; `null` is unsorted (ADR 0005). */
         sort?: SortState;
         /** Frosts and disables the body while the rows are stale, leaving the header usable. */
@@ -119,6 +121,7 @@ const props = withDefaults(
         selectable: false,
         clickable: false,
         allSelected: false,
+        selectAllLabel: 'Select all rows',
         sort: null,
         loading: false,
         label: undefined,

package/components/navigation/breadcrumb/Breadcrumb.vue

@@ -1,5 +1,5 @@
 <template>
-    <nav aria-label="Breadcrumb" class="pui-breadcrumb">
+    <nav :aria-label="label" class="pui-breadcrumb">
         <ol class="pui-breadcrumb__trail">
             <template v-for="(item, index) in items" :key="index">
                 <li
@@ -36,9 +36,14 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{
-    items: { label: string; href?: string }[];
-}>();
+withDefaults(
+    defineProps<{
+        items: { label: string; href?: string }[];
+        /** Accessible name of the `<nav>` landmark. */
+        label?: string;
+    }>(),
+    { label: 'Breadcrumb' },
+);
 
 defineSlots<{
     link?: (scope: {

package/components/navigation/pagination/Pagination.vue

@@ -1,11 +1,11 @@
 <template>
-    <nav class="pui-pagination-nav" aria-label="Pagination">
+    <nav class="pui-pagination-nav" :aria-label="label">
         <ul class="pui-pagination">
             <li>
                 <button
                     class="pui-pagination__item"
                     :disabled="currentPage <= 1"
-                    aria-label="Previous page"
+                    :aria-label="previousLabel"
                     @click="emit('update:currentPage', currentPage - 1)"
                 >
                     <Icon name="chevron-left" size="sm" />
@@ -33,7 +33,7 @@
                 <button
                     class="pui-pagination__item"
                     :disabled="currentPage >= totalPages"
-                    aria-label="Next page"
+                    :aria-label="nextLabel"
                     @click="emit('update:currentPage', currentPage + 1)"
                 >
                     <Icon name="chevron-right" size="sm" />
@@ -52,9 +52,18 @@ const props = withDefaults(
         currentPage: number;
         totalPages: number;
         maxVisible?: number;
+        /** Accessible name of the `<nav>` landmark. */
+        label?: string;
+        /** Accessible name of the icon-only previous button. */
+        previousLabel?: string;
+        /** Accessible name of the icon-only next button. */
+        nextLabel?: string;
     }>(),
     {
         maxVisible: 5,
+        label: 'Pagination',
+        previousLabel: 'Previous page',
+        nextLabel: 'Next page',
     },
 );
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pienter/ui",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "description": "Shared Pienter UI components, styles, icons, and browser utilities.",
   "type": "module",
   "license": "MIT",