pith-ui 0.1.0 → 0.1.4

package/dist/primitives.js

@@ -1,64 +1,22 @@
-import { Generation, Lifetime, setControlPending } from './core.js';
-import { element, focusableElements, iconElement, setText, uniqueId } from './dom.js';
+import { Generation, Lifetime } from './core.js';
+import { element, iconElement, setText, uniqueId } from './dom.js';
+import { adoptAction, adoptActionLayout, adoptFeedback, adoptNativeControl, reconcileSelectOptions } from './foundations.js';
+import { installAnchoredSurface, installDialogLifecycle, installMenuNavigation } from './surface.js';
+import { reconcileKeyed } from './reconcile.js';
+import { createOperation } from './operation.js';
 export function createButton(options) {
     const node = element('button', 'pui-button');
     node.type = options.type ?? 'button';
     const caption = element('span');
     node.append(caption);
-    const life = new Lifetime();
-    const generation = new Generation();
-    let state = options;
-    let localPending = false;
-    let currentIcon = '';
-    let glyph;
+    const action = adoptAction(node, { caption, onAction: options.onAction, onError: options.onError });
     const update = (next) => {
-        state = next;
-        setText(caption, next.label);
-        node.className = `pui-button pui-${next.intent ?? 'neutral'} pui-${next.density ?? 'normal'}`;
-        node.disabled = !!(next.disabled || next.pending || localPending);
-        setControlPending(node, !!(next.pending || localPending));
-        node.setAttribute('aria-busy', String(!!(next.pending || localPending)));
-        node.title = next.title ?? '';
-        if (currentIcon !== (next.icon ?? '')) {
-            glyph?.remove();
-            currentIcon = next.icon ?? '';
-            glyph = next.icon ? iconElement(next.icon) : undefined;
-            if (glyph)
-                node.prepend(glyph);
-        }
+        action.update({ ...next, intent: next.intent ?? 'neutral', density: next.density ?? 'normal',
+            disabled: !!next.disabled, pending: !!next.pending, title: next.title ?? '', icon: next.icon ?? '',
+            appearance: next.appearance ?? 'standard' });
     };
-    life.listen(node, 'click', (() => {
-        if (!options.onAction || node.disabled)
-            return;
-        const seq = generation.next();
-        localPending = true;
-        update(state);
-        const complete = (result) => {
-            if (generation.current(seq) && result && !result.ok)
-                options.onError?.(result.error);
-        };
-        const failed = (error) => { if (generation.current(seq))
-            options.onError?.(error instanceof Error ? error.message : String(error)); };
-        const finish = () => { if (generation.current(seq)) {
-            localPending = false;
-            update(state);
-        } };
-        try {
-            const result = options.onAction();
-            if (result && 'then' in result)
-                void result.then(complete).catch(failed).finally(finish);
-            else {
-                complete(result);
-                finish();
-            }
-        }
-        catch (error) {
-            failed(error);
-            finish();
-        }
-    }));
     update(options);
-    return { element: node, update, destroy() { generation.destroy(); life.destroy(); } };
+    return { element: node, update, destroy() { action.destroy(); } };
 }
 export function createIconButton(options) {
     const block = createButton(options);
@@ -116,35 +74,21 @@ export function createKeyValue(options) {
     const root = element('dl', 'pui-key-value');
     const rows = new Map();
     const update = (state) => {
-        const keep = new Set(state.items.map(item => item.key));
-        for (const [key, row] of rows)
-            if (!keep.has(key)) {
-                row.node.remove();
-                rows.delete(key);
-            }
-        for (const item of state.items) {
-            let row = rows.get(item.key);
-            if (!row) {
-                const label = element('dt');
-                const value = element('dd');
-                row = { node: element('div', '', label, value), label, value };
-                rows.set(item.key, row);
-            }
-            setText(row.label, item.label);
-            setText(row.value, item.value);
-            root.append(row.node);
-        }
+        reconcileKeyed(root, rows, state.items, { key: item => item.key, element: row => row.node,
+            create() { const label = element('dt'), value = element('dd'); return { node: element('div', '', label, value), label, value }; },
+            update(row, item) { setText(row.label, item.label); setText(row.value, item.value); }, destroy() { },
+        });
     };
     update(options);
     return { element: root, update, destroy() { rows.clear(); } };
 }
 export function createToolbar(options) {
     const root = element('div', 'pui-toolbar');
-    root.setAttribute('role', 'group');
     root.append(...(options.children ?? []));
-    const update = (state) => { root.setAttribute('aria-label', state.label); root.classList.toggle('pui-compact', state.density === 'compact'); };
+    const layout = adoptActionLayout(root, 'toolbar');
+    const update = (state) => { layout.update({ ...state, density: state.density ?? 'normal' }); };
     update(options);
-    return { element: root, update, destroy() { } };
+    return { element: root, update, destroy() { layout.destroy(); } };
 }
 export function createScrollArea(options) {
     const root = element('div', 'pui-scroll-area', options.content);
@@ -160,33 +104,19 @@ export function createField(options) {
     const description = element('div', 'pui-field-description');
     const error = element('div', 'pui-field-error');
     const control = options.control;
-    if (!control.id)
-        control.id = uniqueId('pui-input');
-    label.htmlFor = control.id;
     description.id = uniqueId('pui-description');
     error.id = uniqueId('pui-error');
-    error.setAttribute('role', 'alert');
     control.classList.add('pui-control');
     root.append(label, control, description, error);
+    const field = adoptNativeControl(control, { label, description, error });
     const update = (state) => {
-        setText(label, `${state.label}${state.required ? ' *' : ''}`);
+        field.update({ ...state, label: `${state.label}${state.required ? ' *' : ''}`,
+            description: state.description ?? '', error: state.error ?? '', disabled: !!state.disabled, required: !!state.required });
         label.hidden = !state.label;
-        setText(description, state.description);
-        description.hidden = !state.description;
-        setText(error, state.error);
-        error.hidden = !state.error;
-        control.disabled = !!state.disabled;
-        control.required = !!state.required;
-        control.setAttribute('aria-invalid', String(!!state.error));
-        const describedBy = [state.description ? description.id : '', state.error ? error.id : ''].filter(Boolean).join(' ');
-        if (describedBy)
-            control.setAttribute('aria-describedby', describedBy);
-        else
-            control.removeAttribute('aria-describedby');
         root.classList.toggle('pui-invalid', !!state.error);
     };
     update(options);
-    return { element: root, control, update, destroy() { } };
+    return { element: root, control, update, destroy() { field.destroy(); } };
 }
 function textControl(options, type) {
     const control = type === 'textarea' ? element('textarea') : element('input');
@@ -201,22 +131,19 @@ function textControl(options, type) {
     }
     if (options.autocomplete)
         control.setAttribute('autocomplete', options.autocomplete);
+    control.defaultValue = options.value ?? '';
     control.value = options.value ?? '';
     const field = createField({ ...options, control });
-    const life = new Lifetime();
-    life.listen(control, 'input', (event => options.onInput?.(control.value, event)));
-    life.listen(control, 'change', (event => options.onChange?.(control.value, event)));
+    const input = adoptNativeControl(control, { onInput: options.onInput, onChange: options.onChange });
     const update = (state) => {
         field.update(state);
-        control.placeholder = state.placeholder ?? '';
-        control.readOnly = !!state.readOnly;
+        input.update({ placeholder: state.placeholder ?? '', readOnly: !!state.readOnly });
         control.classList.toggle('pui-compact', state.density === 'compact');
     };
     update(options);
-    return { element: field.element, control, update, getValue: () => control.value,
-        reset(value) { if (control.value !== value)
-            control.value = value; }, focus() { control.focus(); },
-        destroy() { life.destroy(); field.destroy(); } };
+    return { element: field.element, control, update, getValue: input.getValue,
+        reset: input.reset, focus: input.focus,
+        destroy() { input.destroy(); field.destroy(); } };
 }
 export const createTextInput = (options) => textControl(options, 'text');
 export const createSearchInput = (options) => textControl(options, 'search');
@@ -238,6 +165,7 @@ export function createSecretInput(options) {
     block.update = state => { update(state); toggle.update({ label: control.type === 'password' ? 'Show' : 'Hide', disabled: state.disabled }); };
     const destroy = block.destroy;
     block.destroy = () => { destroy(); toggle.destroy(); };
+    block.update(options);
     return block;
 }
 export function createSelect(options) {
@@ -246,67 +174,79 @@ export function createSelect(options) {
     if (options.size)
         control.size = options.size;
     const field = createField({ ...options, control });
-    const life = new Lifetime();
+    let disposed = false;
+    const getValues = () => [...control.selectedOptions].map(option => option.value);
+    const input = adoptNativeControl(control, { onChange: () => { options.onChange?.(control.value); options.onValuesChange?.(getValues()); } });
+    const resetValues = (values) => {
+        if (disposed)
+            return;
+        if (!control.multiple) {
+            input.reset(values[0] ?? '');
+            return;
+        }
+        const selected = new Set(values);
+        for (const option of control.options)
+            option.selected = selected.has(option.value);
+        input.update({});
+    };
     let signature = '';
     const update = (state) => {
+        if (disposed)
+            return;
         field.update(state);
         control.classList.toggle('pui-compact', state.density === 'compact');
         const next = JSON.stringify(state.options);
         if (next !== signature) {
             signature = next;
-            const selected = new Set([...control.selectedOptions].map(option => option.value));
-            const nodes = state.options.map(item => {
-                const option = element('option', '', item.label);
-                option.value = item.value;
-                option.disabled = !!item.disabled;
-                option.selected = selected.has(item.value);
-                return option;
-            });
-            control.replaceChildren(...nodes);
+            reconcileSelectOptions(control, state.options);
+            if (!control.multiple && control.selectedIndex < 0)
+                control.selectedIndex = [...control.options].findIndex(option => !option.disabled);
         }
+        input.update({});
     };
-    life.listen(control, 'change', (() => options.onChange?.(control.value)));
     update(options);
-    if (options.value != null)
-        control.value = options.value;
-    return { element: field.element, control, update, getValue: () => control.value,
-        reset(value) { control.value = value; }, focus() { control.focus(); }, destroy() { life.destroy(); } };
+    const initial = options.values ?? (options.value == null ? undefined : [options.value]);
+    if (initial) {
+        const selected = new Set(control.multiple ? initial : initial.slice(0, 1));
+        for (const option of control.options)
+            option.defaultSelected = selected.has(option.value);
+        resetValues(initial);
+    }
+    return { element: field.element, control, update, getValue: input.getValue, getValues,
+        reset: input.reset, resetValues, focus: input.focus, destroy() { if (disposed)
+            return; disposed = true; input.destroy(); field.destroy(); } };
 }
 export function createCheckbox(options) {
     const control = element('input');
     control.type = 'checkbox';
+    control.defaultChecked = !!options.checked;
     control.checked = !!options.checked;
     const caption = element('span');
     const description = element('small');
     const root = element('label', 'pui-checkbox', control, element('span', '', caption, description));
-    const life = new Lifetime();
+    const input = adoptNativeControl(control, { onChange: () => options.onChange?.(control.checked) });
     const update = (state) => {
         setText(caption, state.label);
         setText(description, state.description);
         description.hidden = !state.description;
-        control.disabled = !!state.disabled;
+        input.update({ disabled: !!state.disabled });
     };
-    life.listen(control, 'change', (() => options.onChange?.(control.checked)));
     update(options);
-    return { element: root, control, update, getValue: () => control.checked,
-        reset(value) { control.checked = value; }, focus() { control.focus(); }, destroy() { life.destroy(); } };
+    return { element: root, control, update, getValue: input.getChecked,
+        reset: input.reset, focus: input.focus, destroy() { input.destroy(); } };
 }
 export function createNotice(state) {
     const root = element('div', 'pui-notice');
-    const update = (next) => {
-        root.className = `pui-notice pui-notice-${next.tone ?? 'info'}`;
-        root.setAttribute('role', next.tone === 'error' || next.tone === 'warning' ? 'alert' : 'status');
-        root.hidden = !next.message;
-        setText(root, next.message);
-    };
-    update(state);
-    return { element: root, update, destroy() { } };
+    const notice = adoptFeedback(root, { presentation: 'notice' });
+    notice.update(state);
+    return notice;
 }
 export function createStatus(state) {
     const root = element('span', 'pui-status');
-    const update = (next) => { root.className = `pui-status pui-status-${next.tone ?? 'neutral'}`; setText(root, next.label); };
+    const status = adoptFeedback(root, { presentation: 'status', autoHide: false });
+    const update = (next) => { status.update({ message: next.label, tone: next.tone }); };
     update(state);
-    return { element: root, update, destroy() { } };
+    return { element: root, update, destroy() { status.destroy(); } };
 }
 export function createProgress(state) {
     const control = element('progress');
@@ -336,9 +276,10 @@ export function createFormSection(options) {
 export function createActions(options = {}) {
     const root = element('div', 'pui-actions');
     root.append(...(options.children ?? []));
-    const update = (state) => { root.dataset.align = state.align ?? 'end'; };
+    const layout = adoptActionLayout(root, 'actions');
+    const update = (state) => { layout.update({ align: state.align ?? 'end' }); };
     update(options);
-    return { element: root, update, destroy() { } };
+    return { element: root, update, destroy() { layout.destroy(); } };
 }
 export function createDisclosure(options) {
     const root = element('details', 'pui-disclosure');
@@ -424,9 +365,7 @@ export function createDialog(options) {
     root.replaceChildren(heading, body);
     if (options.actions)
         root.append(options.actions);
-    const life = new Lifetime();
     let state = options;
-    let previousFocus = null;
     let disposed = false;
     const update = (next) => {
         state = next;
@@ -441,39 +380,14 @@ export function createDialog(options) {
             root.removeAttribute('aria-describedby');
         close.update({ label: `Close ${next.title}`, icon: 'close', disabled: next.closeDisabled });
     };
-    life.listen(root, 'cancel', (event => { if (state.closeDisabled)
-        event.preventDefault(); }));
-    life.listen(root, 'click', (event => {
-        if (!options.closeOnBackdrop || state.closeDisabled || event.target !== root)
-            return;
-        const pointer = event;
-        const rect = root.getBoundingClientRect();
-        if (pointer.clientX < rect.left || pointer.clientX > rect.right || pointer.clientY < rect.top || pointer.clientY > rect.bottom)
-            root.close();
-    }));
-    life.listen(root, 'close', (() => {
-        // Native close events are queued; an old close must not affect a reopened dialog.
-        if (root.open)
-            return;
-        options.onClose?.();
-        if (previousFocus?.isConnected)
-            previousFocus.focus({ preventScroll: true });
-        previousFocus = null;
-    }));
+    const surface = installDialogLifecycle(root, { closeOnBackdrop: options.closeOnBackdrop ?? !!options.dialog,
+        canClose: () => !state.closeDisabled, onClose: options.onClose });
     update(options);
     return { element: root, body, update,
-        open() {
-            if (disposed || root.open)
-                return;
-            previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-            if (!root.isConnected)
-                document.body.append(root);
-            root.showModal();
-        }, close() { if (root.open)
-            root.close(); },
+        open() { if (!disposed)
+            surface.open(); }, close() { surface.close(); },
         destroy() { if (disposed)
-            return; disposed = true; if (root.open)
-            root.close(); life.destroy(); close.destroy(); root.remove(); } };
+            return; disposed = true; surface.close(); surface.destroy(); close.destroy(); root.remove(); } };
 }
 export function createTextEditDialog(options = {}) {
     // The editor has one form-level error, so it does not need the general field's
@@ -483,10 +397,12 @@ export function createTextEditDialog(options = {}) {
     control.id = options.ids?.control ?? uniqueId('pui-input');
     const label = element('label', 'pui-field-label', options.label ?? 'Message');
     label.htmlFor = control.id;
+    const input = adoptNativeControl(control, { label, onInput: value => options.onInput?.(value) });
     const field = element('div', 'pui-field', label, control);
     const note = element('p', 'pui-muted');
     const error = createNotice({ message: '', tone: 'error' });
-    const cancel = createButton({ label: 'Cancel', onAction() { dialog.close(); } });
+    const cancel = createButton({ label: 'Cancel', onAction() { if (!state.closeDisabled)
+            dialog.close(); } });
     const submit = createButton({ label: options.submitLabel ?? 'Save', intent: 'primary', type: 'submit' });
     const actions = createActions({ children: [cancel.element, submit.element] });
     const form = element('form', 'pui-text-edit', field, note, error.element, actions.element);
@@ -499,11 +415,10 @@ export function createTextEditDialog(options = {}) {
         error.element.id = ids.error;
     if (ids?.cancel)
         cancel.element.id = ids.cancel;
-    const generation = new Generation();
     const life = new Lifetime();
     let pending = false;
     let state = { title: options.title ?? 'Edit message', ...options };
-    const dialog = createDialog({ ...state, dialog: options.dialog, content: form, onClose() { generation.invalidate(); pending = false; update(state); options.onClose?.(); } });
+    const dialog = createDialog({ ...state, dialog: options.dialog, content: form, onClose() { operation.invalidate(); options.onClose?.(); } });
     if (ids?.title) {
         dialog.element.querySelector('h2').id = ids.title;
         dialog.element.setAttribute('aria-labelledby', ids.title);
@@ -513,83 +428,50 @@ export function createTextEditDialog(options = {}) {
         dialog.update(next);
         setText(note, next.note);
         note.hidden = !next.note;
+        cancel.update({ label: 'Cancel', disabled: !!next.closeDisabled });
         error.update({ message: next.error ?? '', tone: 'error' });
         submit.update({ label: next.submitLabel ?? options.submitLabel ?? 'Save', intent: 'primary', disabled: next.disabled, pending: !!(next.pending || pending) });
-        control.disabled = !!next.inputDisabled;
+        input.update({ disabled: !!next.inputDisabled });
     };
-    life.listen(control, 'input', () => options.onInput?.(control.value));
+    const operation = createOperation({
+        unavailable: () => !!(state.pending || state.disabled || submit.element.disabled || !dialog.element.open),
+        onPending(value) { pending = value; update(state); },
+        onError(error) { if (dialog.element.open)
+            update({ ...state, error }); },
+    });
     life.listen(form, 'submit', (event => {
         event.preventDefault();
-        if (pending || state.pending || state.disabled || submit.element.disabled || !options.onSubmit)
+        if (!options.onSubmit)
             return;
-        const seq = generation.next();
         const value = control.value;
-        pending = true;
-        update(state);
-        void Promise.resolve().then(() => options.onSubmit(value)).then(result => {
-            if (!generation.current(seq) || !dialog.element.open)
-                return;
+        operation.run(() => options.onSubmit(value), result => { if (dialog.element.open) {
             if (result.ok)
                 dialog.close();
-            else {
-                state = { ...state, error: result.error };
-            }
-        }).catch((reason) => {
-            if (generation.current(seq))
-                state = { ...state, error: reason instanceof Error ? reason.message : String(reason) };
-        }).finally(() => { if (generation.current(seq)) {
-            pending = false;
-            update(state);
+            else
+                update({ ...state, error: result.error });
         } });
     }));
     update(state);
     return { element: dialog.element, control, submitButton: submit.element, update,
-        open(input) {
-            generation.invalidate();
-            pending = false;
-            update({ ...state, error: '', title: input.title ?? options.title ?? 'Edit message', description: input.description ?? options.description, note: input.note ?? options.note });
-            control.value = input.value;
+        open(target) {
+            operation.invalidate();
+            update({ ...state, error: '', title: target.title ?? options.title ?? 'Edit message', description: target.description ?? options.description, note: target.note ?? options.note });
+            input.reset(target.value);
             dialog.open();
-            control.focus();
-        }, close() { generation.invalidate(); dialog.close(); }, getValue: () => control.value, focus() { control.focus(); },
-        destroy() { generation.destroy(); life.destroy(); dialog.destroy(); cancel.destroy(); submit.destroy(); } };
+            input.focus();
+        }, close() { operation.invalidate(); dialog.close(); }, getValue: input.getValue, focus: input.focus,
+        destroy() { operation.destroy(); life.destroy(); input.destroy(); dialog.destroy(); cancel.destroy(); submit.destroy(); } };
 }
 export function createConfirmDialog(options) {
     const message = element('p', 'pui-modal-description');
     const hint = element('p', 'pui-field-hint');
     const error = createNotice({ message: '', tone: 'error' });
-    const generation = new Generation();
     let state = options;
     let pending = false;
-    const cancel = createButton({ label: 'Cancel', onAction() { dialog.close(); } });
+    const cancel = createButton({ label: 'Cancel', onAction() { if (!state.closeDisabled)
+            dialog.close(); } });
     const confirm = createButton({ label: options.confirmLabel ?? 'Remove', intent: 'danger', type: 'submit' });
     const life = new Lifetime();
-    const run = async () => {
-        if (pending || state.disabled || state.pending || confirm.element.disabled || options.unavailable?.())
-            return;
-        const seq = generation.next();
-        pending = true;
-        update(state);
-        try {
-            const result = await options.onConfirm();
-            if (!generation.current(seq) || !dialog.element.open)
-                return;
-            if (result.ok)
-                dialog.close();
-            else
-                state = { ...state, error: result.error };
-        }
-        catch (reason) {
-            if (generation.current(seq))
-                state = { ...state, error: reason instanceof Error ? reason.message : String(reason) };
-        }
-        finally {
-            if (generation.current(seq)) {
-                pending = false;
-                update(state);
-            }
-        }
-    };
     const actions = createActions({ children: [cancel.element, confirm.element] });
     const form = element('form', 'pui-confirm', message, hint, error.element, actions.element);
     if (options.ids?.form)
@@ -599,7 +481,7 @@ export function createConfirmDialog(options) {
     if (options.ids?.cancel)
         cancel.element.id = options.ids.cancel;
     const dialog = createDialog({ ...options, content: form,
-        onClose() { generation.invalidate(); pending = false; update(state); options.onClose?.(); } });
+        onClose() { operation.invalidate(); options.onClose?.(); } });
     if (options.ids?.title) {
         dialog.element.querySelector('h2').id = options.ids.title;
         dialog.element.setAttribute('aria-labelledby', options.ids.title);
@@ -608,6 +490,7 @@ export function createConfirmDialog(options) {
     const update = (next) => {
         state = next;
         dialog.update(next);
+        cancel.update({ label: 'Cancel', disabled: !!next.closeDisabled });
         if (next.message !== currentMessage) {
             currentMessage = next.message;
             if (next.message instanceof Node)
@@ -618,20 +501,30 @@ export function createConfirmDialog(options) {
         setText(hint, next.hint);
         hint.hidden = !next.hint;
         error.update({ message: next.error ?? '', tone: 'error' });
-        confirm.update({ label: next.confirmLabel ?? 'Remove', intent: 'danger', disabled: next.disabled, pending: !!(next.pending || pending) });
+        confirm.update({ label: next.confirmLabel ?? 'Remove', intent: 'danger', disabled: !!(next.disabled || options.unavailable?.()), pending: !!(next.pending || pending) });
     };
-    life.listen(form, 'submit', (event => { event.preventDefault(); void run(); }));
+    const operation = createOperation({
+        unavailable: () => !!(state.disabled || state.pending || confirm.element.disabled || options.unavailable?.() || !dialog.element.open),
+        onPending(value) { pending = value; update(state); },
+        onError(error) { if (dialog.element.open)
+            update({ ...state, error }); },
+    });
+    life.listen(form, 'submit', (event => { event.preventDefault(); operation.run(options.onConfirm, result => { if (dialog.element.open) {
+        if (result.ok)
+            dialog.close();
+        else
+            update({ ...state, error: result.error });
+    } }); }));
     update(options);
-    return { element: dialog.element, confirmButton: confirm.element, cancelButton: cancel.element, update, open(next) { generation.invalidate(); pending = false; update({ ...(next ?? state), error: '' }); dialog.open(); cancel.element.focus(); },
-        close() { generation.invalidate(); dialog.close(); }, destroy() { generation.destroy(); life.destroy(); dialog.destroy(); confirm.destroy(); cancel.destroy(); } };
+    return { element: dialog.element, confirmButton: confirm.element, cancelButton: cancel.element, update, open(next) { operation.invalidate(); update({ ...(next ?? state), error: '' }); dialog.open(); cancel.element.focus(); },
+        close() { operation.invalidate(); dialog.close(); }, refreshAvailability() { update(state); }, destroy() { operation.destroy(); life.destroy(); dialog.destroy(); confirm.destroy(); cancel.destroy(); } };
 }
 export function createPopover(options) {
-    let open = false;
     let state = options;
-    const trigger = createButton({ label: options.label, onAction() { if (open)
-            close();
+    const trigger = createButton({ label: options.label, onAction() { if (surface.isOpen())
+            surface.close();
         else
-            show(); } });
+            surface.open(); } });
     const panel = element('div', 'pui-popover-panel', options.content);
     panel.hidden = true;
     panel.id = uniqueId('pui-popover');
@@ -640,102 +533,72 @@ export function createPopover(options) {
     trigger.element.setAttribute('aria-controls', panel.id);
     trigger.element.setAttribute('aria-expanded', 'false');
     const root = element('div', 'pui-popover', trigger.element, panel);
-    const life = new Lifetime();
-    function close(restoreFocus = false) {
-        if (!open)
-            return;
-        open = false;
-        panel.hidden = true;
-        trigger.element.setAttribute('aria-expanded', 'false');
-        options.onToggle?.(false);
-        if (restoreFocus && trigger.element.isConnected)
-            trigger.element.focus();
-    }
-    function show() {
-        if (state.disabled || open)
-            return;
-        open = true;
-        panel.hidden = false;
-        trigger.element.setAttribute('aria-expanded', 'true');
-        options.onToggle?.(true);
-    }
-    life.listen(document, 'pointerdown', (event => { if (open && event.target instanceof Node && !root.contains(event.target))
-        close(); }));
-    life.listen(root, 'keydown', (event => { if (open && event.key === 'Escape') {
-        event.preventDefault();
-        event.stopPropagation();
-        close(true);
-    } }));
-    life.listen(root, 'focusout', (() => { queueMicrotask(() => { if (open && !root.contains(document.activeElement))
-        close(); }); }));
+    const surface = installAnchoredSurface({ trigger: trigger.element, panel, canOpen: () => !state.disabled, onToggle: options.onToggle });
     const update = (next) => { state = next; trigger.update(next); panel.setAttribute('aria-label', next.label); if (next.disabled)
-        close(); };
+        surface.close(); };
     update(options);
-    return { element: root, trigger: trigger.element, panel, update, open: show, close, isOpen: () => open,
-        destroy() { close(); life.destroy(); trigger.destroy(); } };
+    return { element: root, trigger: trigger.element, panel, update, open: surface.open, close: surface.close, isOpen: surface.isOpen,
+        destroy() { surface.destroy(); trigger.destroy(); } };
 }
 export function createMenu(options) {
     const content = element('div', 'pui-menu');
     content.setAttribute('role', 'menu');
+    content.tabIndex = -1;
     const blocks = new Map();
     let items = options.items;
-    const popover = createPopover({ label: options.label, content, disabled: options.disabled });
+    const session = new Generation();
+    const feedback = createNotice({ message: '', tone: 'error' });
+    const menuBody = element('div', '', content, feedback.element);
+    const popover = createPopover({ label: options.label, content: menuBody, disabled: options.disabled, onToggle() { session.invalidate(); feedback.update({ message: '', tone: 'error' }); } });
     popover.trigger.setAttribute('aria-haspopup', 'menu');
     const life = new Lifetime();
     const update = (state) => {
         items = state.items;
         popover.update(state);
-        const keep = new Set(state.items.map(item => item.id));
-        for (const [id, block] of blocks)
-            if (!keep.has(id)) {
-                block.destroy();
-                block.element.remove();
-                blocks.delete(id);
-            }
-        for (const item of state.items) {
-            let block = blocks.get(item.id);
-            if (!block) {
-                block = createButton({ ...item, onAction: async () => {
+        reconcileKeyed(content, blocks, state.items, { key: item => item.id, element: block => block.element,
+            create(item) {
+                let sequence = 0;
+                return createButton({ ...item, onAction: async () => {
                         const current = items.find(candidate => candidate.id === item.id);
-                        if (!current || current.disabled)
+                        if (!current || current.disabled || !popover.isOpen())
                             return;
+                        // Pending disables the action button. Keep focus inside its menu so
+                        // focus-out dismissal cannot discard the eventual result feedback.
+                        content.focus({ preventScroll: true });
+                        sequence = session.next();
+                        feedback.update({ message: '', tone: 'error' });
                         const result = await current.onAction();
-                        if (!result || result.ok)
+                        if (session.current(sequence) && blocks.has(item.id) && popover.isOpen() && (!result || result.ok))
                             popover.close();
                         return result;
-                    } });
-                blocks.set(item.id, block);
-            }
-            block.update(item);
-            block.element.setAttribute('role', item.checked == null ? 'menuitem' : 'menuitemcheckbox');
-            if (item.checked != null)
-                block.element.setAttribute('aria-checked', String(item.checked));
-            else
-                block.element.removeAttribute('aria-checked');
-            content.append(block.element);
-        }
+                    }, onError(message) { if (session.current(sequence) && popover.isOpen()) {
+                        feedback.update({ message, tone: 'error' });
+                        options.onError?.(message);
+                    } } });
+            },
+            update(block, item) {
+                block.update(item);
+                block.element.setAttribute('role', item.checked == null ? 'menuitem' : 'menuitemcheckbox');
+                if (item.checked != null)
+                    block.element.setAttribute('aria-checked', String(item.checked));
+                else
+                    block.element.removeAttribute('aria-checked');
+            }, destroy: block => block.destroy(),
+        });
     };
     life.listen(popover.trigger, 'keydown', (event => {
         const key = event.key;
         if (key === 'ArrowDown' || key === 'ArrowUp') {
             event.preventDefault();
             popover.open();
-            const targets = focusableElements(content);
-            (key === 'ArrowDown' ? targets[0] : targets.at(-1))?.focus();
+            navigation.focus(key === 'ArrowUp' ? 'last' : 'first');
         }
     }));
-    life.listen(content, 'keydown', (event => {
-        const key = event.key;
-        if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(key))
-            return;
-        event.preventDefault();
-        const targets = focusableElements(content);
-        const index = targets.indexOf(document.activeElement);
-        const next = key === 'Home' ? 0 : key === 'End' ? targets.length - 1 : (index + (key === 'ArrowUp' ? -1 : 1) + targets.length) % targets.length;
-        targets[next]?.focus();
-    }));
+    const navigation = installMenuNavigation(content, { trigger: popover.trigger, isOpen: popover.isOpen,
+        onDismiss(restoreFocus) { popover.close(); if (restoreFocus)
+            popover.trigger.focus(); } });
     update(options);
-    return { ...popover, update, destroy() { life.destroy(); popover.destroy(); for (const block of blocks.values())
-            block.destroy(); } };
+    return { ...popover, update, destroy() { session.destroy(); navigation.destroy(); life.destroy(); popover.destroy(); feedback.destroy(); for (const block of blocks.values())
+            block.destroy(); blocks.clear(); } };
 }
 //# sourceMappingURL=primitives.js.map