@pienter/ui 0.21.0 → 0.23.0

package/CHANGELOG.md

@@ -2,6 +2,53 @@
 
 ## Unreleased
 
+## 0.23.0 - 2026-09-16
+### Added
+
+- `SelectButton` (`@pienter/ui/components/SelectButton.vue`), a native
+  `<select>` dressed as a Button for chrome such as a header toolbar: `label`
+  (required, becomes the `aria-label` and is never rendered, as on
+  `IconButton`), `options`, `modelValue` with `update:modelValue`, `name`,
+  `disabled`, and Button's own `variant` and `size` unions and defaults, so
+  a `sm` `ghost` picker sits beside a `sm` `ghost` Button at the same height,
+  padding, colours and focus ring. The root is a `.pui-btn` mix and the
+  select lies invisibly over it, so the whole button opens the native picker
+  and keyboard and screen-reader behaviour stay the browser's. The form
+  `Select` is deliberately unchanged: it keeps no `size` prop and no hidden
+  label, so forms stay one consistent scaffold.
+
+## 0.22.0 - 2026-09-16
+### Added
+
+- `RecordForm` tracks whether the record has unsaved edits. `baseline` is
+  the last saved state; without one the first `modelValue` the form sees
+  stands in, so a create form is clean until the first edit. `dirty` is a
+  structural comparison of `modelValue` against that baseline
+  (`isEqualRecord` in `utils/cms`, so key order does not matter), always
+  `false` in `readonly` mode, emitted as `update:dirty` for `v-model:dirty`
+  and exposed on the component instance. Consumers set `baseline` to a clone
+  of the model after load and after a successful save, before navigating.
+- `useUnsavedChanges(dirty)` (`@pienter/ui/composables/useUnsavedChanges`)
+  turns that flag into a leave guard: while dirty, `beforeunload` has the
+  browser confirm a reload or tab close, and a vue-router `onBeforeRouteLeave`
+  guard asks through `confirmLeave()`, which resolves `true` at once when
+  clean and otherwise raises `pending` until `resolve(leave)` answers it. The
+  consumer binds `pending` to an `AlertDialog` and answers with
+  `resolve(true)` on confirm, `resolve(false)` on cancel; a second question
+  while one is pending shares its promise. Requires the optional `vue-router`
+  peer dependency, like `useUrlTab`.
+## 0.21.1 - 2026-09-16
+### Fixed
+
+- `Sidebar` marks one entry `aria-current="page"` instead of every entry on
+  the current path. On `/pages/create` the "All pages" link (`/pages`), its
+  group row and "New page" (`/pages/create`) all reported themselves as the
+  current page, so a screen reader heard three current pages and both links
+  wore the brand wash. The hierarchical match is unchanged — it still
+  drives a group's `data-active` and expand-on-mount — but `aria-current` now
+  goes only to the longest matching href, and when a group row and one of its
+  child links share that href the link wins.
+
 ## 0.21.0 - 2026-09-16
 
 ### Added

package/CONVENTIONS.md

@@ -503,6 +503,17 @@ isActive(activeHref, itemHref):
 descendant items (recursively) is active. Sidebar uses this to expand
 the matching group on mount and to highlight the group header.
 
+**Rendering rule** (2026-09-16, issue #54): the match algorithm above is
+unchanged and still answers "is this item on the current page's path?"
+for every item. What it does _not_ decide is which entry renders
+`aria-current="page"`: that goes to the single longest matching href
+across the whole tree (`resolveCurrentHref`), so on `/pages/create` only
+"New page" (`/pages/create`) is current, while "All pages" (`/pages`) and
+its group keep their hierarchical match for `data-active` and
+expand-on-mount. When a group's own `href` and one of its direct child
+links share that longest href, the link is current and the group toggle
+is not.
+
 **Edge cases — out of scope for v1**, documented for future:
 
 - Trailing slashes are NOT normalized (`/admin/members/` vs
@@ -1294,6 +1305,7 @@ follow the shape of an existing one.
 | RadioGroup        | [`components/form/radio-group/AUDIT.md`](./components/form/radio-group/AUDIT.md)           |
 | Segmented         | [`components/form/select/AUDIT.md`](./components/form/select/AUDIT.md)                     |
 | Select            | [`components/form/select/AUDIT.md`](./components/form/select/AUDIT.md)                     |
+| SelectButton      | [`components/action/select-button/AUDIT.md`](./components/action/select-button/AUDIT.md)   |
 | Separator         | [`components/layout/separator/AUDIT.md`](./components/layout/separator/AUDIT.md)           |
 | Sheet             | [`components/overlay/sheet/AUDIT.md`](./components/overlay/sheet/AUDIT.md)                 |
 | Sidebar           | [`components/navigation/sidebar/AUDIT.md`](./components/navigation/sidebar/AUDIT.md)       |

package/components/action/select-button/SelectButton.vue

@@ -0,0 +1,71 @@
+<template>
+    <span
+        class="pui-btn pui-select-btn"
+        :data-variant="variant"
+        :data-size="size"
+    >
+        <span class="pui-select-btn__label" aria-hidden="true">
+            <span
+                v-for="opt in options"
+                :key="opt.value"
+                class="pui-select-btn__option"
+                :data-state="opt.value === modelValue ? 'selected' : undefined"
+                >{{ opt.label }}</span
+            >
+        </span>
+        <span class="pui-btn__icon" aria-hidden="true">
+            <Icon name="chevron-down" size="sm" />
+        </span>
+        <select
+            v-bind="$attrs"
+            class="pui-select-btn__control"
+            :name="name"
+            :disabled="disabled"
+            :value="modelValue"
+            :aria-label="label"
+            @change="onChange"
+        >
+            <option v-for="opt in options" :key="opt.value" :value="opt.value">
+                {{ opt.label }}
+            </option>
+        </select>
+    </span>
+</template>
+
+<script setup lang="ts">
+import Icon from '../../display/icon/Icon.vue';
+
+defineOptions({ inheritAttrs: false });
+
+withDefaults(
+    defineProps<{
+        /** Accessible name for the control (required — the label is never rendered). */
+        label: string;
+        modelValue?: string;
+        options: { value: string; label: string }[];
+        name?: string;
+        disabled?: boolean;
+        variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'link';
+        size?: 'sm' | 'md';
+    }>(),
+    {
+        modelValue: undefined,
+        name: undefined,
+        disabled: false,
+        variant: 'secondary',
+        size: 'md',
+    },
+);
+
+const emit = defineEmits<{
+    'update:modelValue': [value: string];
+}>();
+
+function onChange(event: Event): void {
+    emit('update:modelValue', (event.target as HTMLSelectElement).value);
+}
+</script>
+
+<style>
+@import './select-button.css';
+</style>

package/components/action/select-button/select-button.css

@@ -0,0 +1,45 @@
+@layer components {
+    /* The block is a `.pui-btn` mix: button.css draws the box, this file only
+       lays the native select over it as the hit area and focus target. */
+    .pui-select-btn {
+        /* the select is transparent, so the wrapper wears its ring */
+        &:has(.pui-select-btn__control:focus-visible) {
+            outline: var(--outline-width) solid
+                var(--btn-ring, var(--border-clr-strong));
+            outline-offset: var(--outline-offset);
+        }
+
+        /* a span never matches :disabled; no pointer events keeps the shared hover and active rules off */
+        &:has(.pui-select-btn__control:disabled) {
+            opacity: var(--opacity-disabled);
+            pointer-events: none;
+        }
+
+        /* every option label stacked in one cell holds the widest width, as a native select does */
+        .pui-select-btn__label {
+            display: inline-grid;
+        }
+
+        .pui-select-btn__option {
+            grid-area: 1 / 1;
+            visibility: hidden;
+
+            &[data-state='selected'] {
+                visibility: visible;
+            }
+        }
+
+        .pui-select-btn__control {
+            position: absolute;
+            inset: 0;
+            inline-size: 100%;
+            block-size: 100%;
+            margin: 0;
+            padding: 0;
+            border: 0;
+            appearance: none;
+            opacity: 0;
+            cursor: pointer;
+        }
+    }
+}

package/components/form/record-form/RecordForm.vue

@@ -3,12 +3,13 @@ export type { RecordFormField } from './types.js';
 </script>
 
 <script setup lang="ts" generic="T extends object">
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 import Button from '../../action/button/Button.vue';
 import Form from '../form/Form.vue';
 import RecordFields from './RecordFields.vue';
 import {
     cloneRecord,
+    isEqualRecord,
     type ValidationIssue,
     type ValuePath,
 } from '../../../utils/cms/index.js';
@@ -19,6 +20,8 @@ const props = withDefaults(
     defineProps<{
         /** Caller-owned write payload; every supplied property is retained. */
         modelValue: T;
+        /** Last saved state `dirty` compares against; defaults to the first `modelValue` seen. */
+        baseline?: T;
         fields: readonly RecordFormField[];
         issues?: readonly ValidationIssue[];
         errors?: string[];
@@ -29,6 +32,7 @@ const props = withDefaults(
         statusMessage?: string;
     }>(),
     {
+        baseline: undefined,
         issues: () => [],
         errors: () => [],
         busy: false,
@@ -40,10 +44,20 @@ const props = withDefaults(
 
 const emit = defineEmits<{
     'update:modelValue': [value: T];
+    'update:dirty': [value: boolean];
     'field-change': [path: ValuePath];
     submit: [value: T];
 }>();
 
+const initial = cloneRecord(props.modelValue);
+const dirty = computed(
+    () =>
+        !props.readonly &&
+        !isEqualRecord(props.modelValue, props.baseline ?? initial),
+);
+watch(dirty, (value) => emit('update:dirty', value), { immediate: true });
+defineExpose({ dirty });
+
 const fieldErrors = computed(() =>
     Object.fromEntries(
         props.fields.map((field) => [

package/components/navigation/sidebar/Sidebar.vue

@@ -70,6 +70,7 @@ import {
     computeSubmenuPosition,
     deriveGroupKey,
     isSubmenuActive,
+    resolveCurrentHref,
     SUBMENU_CLOSE_DELAY,
     type SubmenuPosition,
 } from '../../../utils/navigation/sidebar.js';
@@ -266,8 +267,16 @@ function onEntryEnter(topLevelKey: string | null): void {
     if (!pinned.value) scheduleClose();
 }
 
+const currentHref = computed(() =>
+    resolveCurrentHref(
+        [...props.topItems, ...props.bottomItems],
+        props.activeHref,
+    ),
+);
+
 provide(SIDEBAR_CONTEXT, {
     activeHref: computed(() => props.activeHref),
+    currentHref,
     expandedKeys,
     openKey,
     submenuActive,

package/components/navigation/sidebar/SidebarMenuItem.vue

@@ -110,7 +110,6 @@ import { generateId } from '../../../utils/a11y/id.js';
 import {
     deriveGroupKey,
     groupContainsActive,
-    isHrefActive,
 } from '../../../utils/navigation/sidebar.js';
 import { SIDEBAR_CONTEXT } from './context.js';
 import type { SidebarItem } from './types.js';
@@ -144,13 +143,15 @@ const ownKey = computed(() =>
 );
 
 const isCurrent = computed(() => {
-    const href =
-        props.item.type === 'link'
-            ? props.item.href
-            : props.item.type === 'group'
-              ? props.item.href
-              : undefined;
-    return href !== undefined && isHrefActive(ctx.activeHref.value, href);
+    if (props.item.type === 'section') return false;
+    const href = props.item.href;
+    if (href === undefined || href !== ctx.currentHref.value) return false;
+    // A group whose own child link repeats its href: the link is the page.
+    if (props.item.type === 'group')
+        return !props.item.items.some(
+            (child) => child.type === 'link' && child.href === href,
+        );
+    return true;
 });
 
 const containsCurrent = computed(

package/components/navigation/sidebar/context.ts

@@ -4,6 +4,8 @@ import type { SubmenuPosition } from '../../../utils/navigation/sidebar.js';
 /** What `Sidebar.vue` hands down to the recursive `SidebarMenuItem`. */
 export interface SidebarContext {
     activeHref: ComputedRef<string | null>;
+    /** The one href that renders `aria-current`; see `resolveCurrentHref`. */
+    currentHref: ComputedRef<string | undefined>;
     expandedKeys: Ref<Set<string>>;
     /** Group key whose collapsed-rail flyout is open, or null. */
     openKey: Ref<string | null>;

package/composables/useUnsavedChanges.ts

@@ -0,0 +1,57 @@
+import { ref, toValue, type MaybeRefOrGetter, type Ref } from 'vue';
+import { onBeforeRouteLeave } from 'vue-router';
+import { useWindowListener } from './useEventListener.js';
+
+export interface UnsavedChanges {
+    /** `true` while a leave is waiting on an answer. Bind to `AlertDialog`'s `open`. */
+    pending: Ref<boolean>;
+    /** Resolves `true` at once when clean; otherwise asks and resolves with the answer. */
+    confirmLeave: () => Promise<boolean>;
+    /** Answers the pending question: `resolve(true)` on confirm, `resolve(false)` on cancel. */
+    resolve: (leave: boolean) => void;
+}
+
+/**
+ * Guards a dirty form against leaving unsaved. Bind `dirty` to `RecordForm`'s
+ * `v-model:dirty`. While dirty, a `beforeunload` listener has the browser confirm
+ * a reload or tab close, and a route-leave guard asks through `confirmLeave()`,
+ * which the consumer answers from an `AlertDialog` bound to `pending` and
+ * `resolve`. One question at a time: a second `confirmLeave()` while pending
+ * returns the same promise. Requires the optional `vue-router` peer dependency.
+ */
+export function useUnsavedChanges(
+    dirty: MaybeRefOrGetter<boolean>,
+): UnsavedChanges {
+    const pending = ref(false);
+    let question: {
+        promise: Promise<boolean>;
+        settle: (leave: boolean) => void;
+    } | null = null;
+
+    useWindowListener('beforeunload', (event) => {
+        if (toValue(dirty)) event.preventDefault();
+    });
+
+    function confirmLeave(): Promise<boolean> {
+        if (!toValue(dirty)) return Promise.resolve(true);
+        if (question) return question.promise;
+        let settle!: (leave: boolean) => void;
+        const promise = new Promise<boolean>((resolve) => {
+            settle = resolve;
+        });
+        question = { promise, settle };
+        pending.value = true;
+        return promise;
+    }
+
+    function resolve(leave: boolean): void {
+        const current = question;
+        question = null;
+        pending.value = false;
+        current?.settle(leave);
+    }
+
+    onBeforeRouteLeave(() => confirmLeave());
+
+    return { pending, confirmLeave, resolve };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pienter/ui",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "description": "Shared Pienter UI components, styles, icons, and browser utilities.",
   "type": "module",
   "license": "MIT",
@@ -29,6 +29,7 @@
     "./styles/*": "./styles/*",
     "./components/Button.vue": "./components/action/button/Button.vue",
     "./components/IconButton.vue": "./components/action/button/IconButton.vue",
+    "./components/SelectButton.vue": "./components/action/select-button/SelectButton.vue",
     "./components/Toggle.vue": "./components/action/toggle/Toggle.vue",
     "./components/ToggleGroup.vue": "./components/action/toggle-group/ToggleGroup.vue",
     "./components/Avatar.vue": "./components/display/avatar/Avatar.vue",
@@ -92,6 +93,7 @@
     "./composables/usePopover": "./composables/usePopover.ts",
     "./composables/useUrlSort": "./composables/useUrlSort.ts",
     "./composables/useUrlTab": "./composables/useUrlTab.ts",
+    "./composables/useUnsavedChanges": "./composables/useUnsavedChanges.ts",
     "./icons": "./icons/index.ts",
     "./icons/*": "./icons/*",
     "./utils": "./utils/index.ts",

package/utils/cms/index.ts

@@ -222,6 +222,36 @@ export function cloneRecord<T>(record: T): T {
     return JSON.parse(JSON.stringify(record)) as T;
 }
 
+/** Structural equality of two JSON-shaped records; key order and `undefined` properties do not count. */
+export function isEqualRecord(a: unknown, b: unknown): boolean {
+    if (a === b) return true;
+    if (
+        a === null ||
+        b === null ||
+        typeof a !== 'object' ||
+        typeof b !== 'object' ||
+        Array.isArray(a) !== Array.isArray(b)
+    )
+        return false;
+    if (Array.isArray(a) && Array.isArray(b))
+        return (
+            a.length === b.length &&
+            a.every((item, index) => isEqualRecord(item, b[index]))
+        );
+    const left = a as Record<string, unknown>;
+    const right = b as Record<string, unknown>;
+    const keys = Object.keys(left).filter((key) => left[key] !== undefined);
+    const other = Object.keys(right).filter((key) => right[key] !== undefined);
+    return (
+        keys.length === other.length &&
+        keys.every(
+            (key) =>
+                Object.hasOwn(right, key) &&
+                isEqualRecord(left[key], right[key]),
+        )
+    );
+}
+
 export function readPath(record: unknown, path: ValuePath): unknown {
     let value = record;
     for (const key of path) {

package/utils/navigation/sidebar.ts

@@ -90,8 +90,35 @@ export function groupContainsActive(
     });
 }
 
+/**
+ * The single href that renders `aria-current="page"`: the longest one the
+ * current page matches, so `/pages/create` lights up "New page" and not
+ * "All pages" (`/pages`) as well. See CONVENTIONS.md § Rendering rule.
+ */
+export function resolveCurrentHref(
+    items: readonly SidebarItemLike[],
+    activeHref: string | null | undefined,
+): string | undefined {
+    let current: string | undefined;
+    const visit = (list: readonly SidebarItemLike[]): void => {
+        for (const item of list) {
+            if (item.type === 'section') continue;
+            const href = item.href;
+            if (
+                href !== undefined &&
+                isHrefActive(activeHref, href) &&
+                (current === undefined || href.length > current.length)
+            )
+                current = href;
+            if (item.type === 'group') visit(item.items);
+        }
+    };
+    visit(items);
+    return current;
+}
+
 /** The part of `SidebarItem` these primitives read; avoids a component import. */
 export type SidebarItemLike =
     | { type: 'link'; href: string }
-    | { type: 'group'; items: readonly SidebarItemLike[] }
+    | { type: 'group'; href?: string; items: readonly SidebarItemLike[] }
     | { type: 'section' };