@pienter/ui 0.20.0 → 0.21.0

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 ## Unreleased
 
+## 0.21.0 - 2026-09-16
+
+### Added
+
+- `BlockEditor`'s drag handle is keyboard-operable and back in the tab
+  order. Space or Enter grabs a block (`aria-pressed`, `data-state="grabbed"`),
+  ArrowUp and ArrowDown move it one step through the same reorder the move
+  buttons use, Space or Enter drops it and Escape returns it to where it was
+  grabbed; blur while grabbed cancels too. Every step emits
+  `update:modelValue`, so the page sees the block move as it does with the
+  move buttons, and each grab, step, drop and cancel is announced through the
+  shared live region. The default `hint` now describes the keyboard pattern.
+  Pointer dragging is unchanged.
+
+## 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

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

@@ -39,7 +39,7 @@ const props = withDefaults(
         level: 3,
         blockLabel: undefined,
         addLabel: (typeLabel: string) => `Add ${typeLabel}`,
-        hint: 'Use the move buttons to reorder, or drag with a pointer.',
+        hint: 'Use the move buttons to reorder, or drag with a pointer. On a drag handle, Space grabs the block, the arrow keys move it, Space drops it and Escape cancels.',
         emptyText: 'No blocks yet. Add a block to start writing.',
     },
 );
@@ -68,6 +68,9 @@ const collapsed = computed(
 );
 const dragging = ref<string>();
 const dropIndex = ref(0);
+const grabbed = ref<string>();
+let grabbedFrom = 0;
+let stepping = false;
 const items = new Map<string, HTMLElement>();
 let gesture:
     | {
@@ -160,7 +163,7 @@ function remove(key: string) {
     announce(`${title(block, index)} removed. ${remaining.length} blocks.`);
 }
 
-function move(key: string, target: number) {
+function reorder(key: string, target: number) {
     if (locked.value) return;
     const source = props.modelValue.findIndex((block) => block.id === key);
     if (
@@ -174,12 +177,116 @@ function move(key: string, target: number) {
     const block = blocks.splice(source, 1)[0]!;
     blocks.splice(target, 0, block);
     emit('update:modelValue', blocks);
+    return { block, source, blocks };
+}
+
+function move(key: string, target: number) {
+    const moved = reorder(key, target);
+    if (!moved) return;
     focusBlock(key);
     announce(
-        `${title(block, source)} moved to position ${target + 1} of ${blocks.length}.`,
+        `${title(moved.block, moved.source)} moved to position ${target + 1} of ${moved.blocks.length}.`,
+    );
+}
+
+function focusHandle(key: string) {
+    items
+        .get(key)
+        ?.querySelector<HTMLButtonElement>('.pui-block-editor__drag')
+        ?.focus({ preventScroll: true });
+}
+
+function position(key: string) {
+    const index = props.modelValue.findIndex((block) => block.id === key);
+    const block = props.modelValue[index];
+    return block
+        ? {
+              index,
+              name: title(block, index),
+              place: `position ${index + 1} of ${props.modelValue.length}`,
+          }
+        : undefined;
+}
+
+function grab(key: string) {
+    const at = position(key);
+    if (!at || props.modelValue.length < 2) return;
+    grabbed.value = key;
+    grabbedFrom = at.index;
+    announce(
+        `Grabbed ${at.name}, ${at.place}. Use arrow keys to move, Space to drop, Escape to cancel.`,
     );
 }
 
+function step(key: string, delta: -1 | 1) {
+    const at = position(key);
+    if (!at) return;
+    const target = at.index + delta;
+    if (target < 0 || target >= props.modelValue.length) {
+        announce(
+            `${at.name} cannot move further ${delta < 0 ? 'up' : 'down'}.`,
+        );
+        return;
+    }
+    // Vue moves the `<li>` in the DOM, which blurs the handle; that blur is not a cancel.
+    stepping = true;
+    reorder(key, target);
+    void nextTick(() => {
+        focusHandle(key);
+        stepping = false;
+    });
+    announce(
+        `${at.name} moved to position ${target + 1} of ${props.modelValue.length}.`,
+    );
+}
+
+function drop(key: string) {
+    const at = position(key);
+    grabbed.value = undefined;
+    if (at) announce(`Dropped ${at.name}, ${at.place}.`);
+}
+
+function cancelGrab() {
+    const key = grabbed.value;
+    if (!key) return;
+    grabbed.value = undefined;
+    stepping = true;
+    reorder(key, grabbedFrom);
+    void nextTick(() => {
+        stepping = false;
+    });
+    announce('Reordering cancelled.');
+}
+
+function handleKey(event: KeyboardEvent, key: string) {
+    if (locked.value) return;
+    const held = grabbed.value === key;
+    switch (event.key) {
+        case ' ':
+        case 'Enter':
+            event.preventDefault();
+            if (held) drop(key);
+            else grab(key);
+            return;
+        case 'ArrowUp':
+        case 'ArrowDown':
+            if (!held) return;
+            event.preventDefault();
+            step(key, event.key === 'ArrowUp' ? -1 : 1);
+            return;
+        case 'Escape':
+            if (!held) return;
+            event.preventDefault();
+            event.stopPropagation();
+            cancelGrab();
+            return;
+    }
+}
+
+function handleBlur(key: string) {
+    if (!stepping && grabbed.value === key) cancelGrab();
+}
+
 function toggle(key: string) {
     if (props.disabled) return;
     const next = new Set(collapsed.value);
@@ -240,6 +347,7 @@ function startDrag(event: PointerEvent, key: string) {
     if (locked.value || event.button !== 0 || props.modelValue.length < 2)
         return;
     stopDrag();
+    grabbed.value = undefined;
     const handle = event.currentTarget as HTMLButtonElement;
     handle.focus({ preventScroll: true });
     gesture = {
@@ -313,9 +421,22 @@ function cancelWithEscape(event: KeyboardEvent) {
 }
 
 watch(locked, (value) => {
-    if (value) stopDrag();
+    if (value) {
+        stopDrag();
+        grabbed.value = undefined;
+    }
 });
-watch(() => props.modelValue.map((block) => block.id).join('\u0000'), stopDrag);
+watch(
+    () => props.modelValue.map((block) => block.id).join('\u0000'),
+    () => {
+        stopDrag();
+        if (
+            grabbed.value &&
+            !props.modelValue.some((block) => block.id === grabbed.value)
+        )
+            grabbed.value = undefined;
+    },
+);
 onBeforeUnmount(stopDrag);
 </script>
 
@@ -343,7 +464,11 @@ onBeforeUnmount(stopDrag);
                 "
                 class="pui-block-editor__item"
                 :data-block-id="block.id"
-                :data-dragging="dragging === block.id ? 'true' : undefined"
+                :data-dragging="
+                    dragging === block.id || grabbed === block.id
+                        ? 'true'
+                        : undefined
+                "
                 :data-drop="indicator(block.id)"
             >
                 <div class="pui-block-editor__header">
@@ -351,11 +476,16 @@ onBeforeUnmount(stopDrag);
                         v-if="!readonly"
                         class="pui-block-editor__drag"
                         type="button"
-                        tabindex="-1"
                         :disabled="disabled || modelValue.length < 2"
                         :aria-label="`Drag ${title(block, index)}`"
                         :aria-describedby="`${id}-hint`"
+                        :aria-pressed="grabbed === block.id ? 'true' : 'false'"
+                        :data-state="
+                            grabbed === block.id ? 'grabbed' : undefined
+                        "
                         @pointerdown="startDrag($event, block.id)"
+                        @keydown="handleKey($event, block.id)"
+                        @blur="handleBlur(block.id)"
                     >
                         <Icon name="arrow-up-down" size="sm" />
                     </button>

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.20.0",
+  "version": "0.21.0",
   "description": "Shared Pienter UI components, styles, icons, and browser utilities.",
   "type": "module",
   "license": "MIT",