@pienter/ui 0.19.0 → 0.20.1

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 ## Unreleased
 
+## 0.20.1 - 2026-09-16
+
+### Fixed
+
+- `Select` shows its empty option again after the model clears from a value
+  no option carries. A single-value `FilterSelect` fed
+  `filter[status]=draft,published` selected nothing, and when Clear all set
+  the model to `''` the control stayed blank: a `<select>` with no selection
+  already reads `''`, so Vue saw nothing to write. The control now syncs the
+  native value itself after every model change. An unknown value still
+  selects nothing; only the way back is fixed.
+
+## 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

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/select/Select.vue

@@ -18,6 +18,7 @@
             <select
                 v-bind="$attrs"
                 :id="inputId"
+                ref="controlRef"
                 class="pui-select__control"
                 :name="name"
                 :required="required"
@@ -58,7 +59,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { generateId } from '../../../utils/a11y/id.js';
 import Icon from '../../display/icon/Icon.vue';
 
@@ -106,6 +107,20 @@ const inputId = props.id ?? generateId('select');
 const hintId = `${inputId}-hint`;
 const errorsId = `${inputId}-errors`;
 
+const controlRef = ref<HTMLSelectElement | null>(null);
+
+// Vue skips the write when `el.value` already reads the new value, which it does for '' while nothing is selected.
+watch(
+    () => props.modelValue,
+    (value) => {
+        const el = controlRef.value;
+        if (!el) return;
+        const next = value ?? '';
+        if (el.selectedIndex === -1 || el.value !== next) el.value = next;
+    },
+    { flush: 'post' },
+);
+
 const hasErrors = computed(() => props.errors.length > 0);
 
 const computedStatus = computed(() => {

package/package.json

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