pith-ui 0.0.0-stage → 0.1.0

package/dist/primitives.js

@@ -0,0 +1,741 @@
+import { Generation, Lifetime, setControlPending } from './core.js';
+import { element, focusableElements, iconElement, setText, uniqueId } from './dom.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 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);
+        }
+    };
+    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(); } };
+}
+export function createIconButton(options) {
+    const block = createButton(options);
+    const update = block.update;
+    block.update = state => {
+        update(state);
+        block.element.classList.add('pui-icon-button');
+        block.element.setAttribute('aria-label', state.label);
+        block.element.querySelector('span')?.classList.add('pui-sr-only');
+    };
+    block.update(options);
+    return block;
+}
+export function createTextAction(options) {
+    const block = createButton(options);
+    const update = block.update;
+    block.update = state => { update(state); block.element.classList.add('pui-text-action'); };
+    block.update(options);
+    return block;
+}
+export function createIcon(state) {
+    const root = element('span', 'pui-icon-display');
+    let currentName = '';
+    const update = (next) => {
+        if (next.name !== currentName) {
+            currentName = next.name;
+            root.replaceChildren(iconElement(next.name));
+        }
+        root.classList.toggle('pui-icon-small', next.size === 'small');
+        if (next.label) {
+            root.setAttribute('role', 'img');
+            root.setAttribute('aria-label', next.label);
+            root.removeAttribute('aria-hidden');
+        }
+        else {
+            root.removeAttribute('role');
+            root.removeAttribute('aria-label');
+            root.setAttribute('aria-hidden', 'true');
+        }
+    };
+    update(state);
+    return { element: root, update, destroy() { } };
+}
+export function createDivider(state = {}) {
+    const root = element('div', 'pui-divider');
+    root.setAttribute('role', 'separator');
+    const update = (next) => { setText(root, next.label); if (next.label)
+        root.setAttribute('aria-label', next.label);
+    else
+        root.removeAttribute('aria-label'); };
+    update(state);
+    return { element: root, update, destroy() { } };
+}
+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);
+        }
+    };
+    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'); };
+    update(options);
+    return { element: root, update, destroy() { } };
+}
+export function createScrollArea(options) {
+    const root = element('div', 'pui-scroll-area', options.content);
+    root.tabIndex = 0;
+    root.setAttribute('role', 'region');
+    const update = (state) => { root.setAttribute('aria-label', state.label); root.dataset.size = state.size ?? 'medium'; };
+    update(options);
+    return { element: root, update, destroy() { } };
+}
+export function createField(options) {
+    const root = element('div', 'pui-field');
+    const label = element('label', 'pui-field-label');
+    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 update = (state) => {
+        setText(label, `${state.label}${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() { } };
+}
+function textControl(options, type) {
+    const control = type === 'textarea' ? element('textarea') : element('input');
+    if (control instanceof HTMLInputElement) {
+        control.type = type === 'textarea' ? 'text' : type;
+        if (options.min != null)
+            control.min = String(options.min);
+        if (options.max != null)
+            control.max = String(options.max);
+        if (options.step != null)
+            control.step = String(options.step);
+    }
+    if (options.autocomplete)
+        control.setAttribute('autocomplete', options.autocomplete);
+    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 update = (state) => {
+        field.update(state);
+        control.placeholder = state.placeholder ?? '';
+        control.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(); } };
+}
+export const createTextInput = (options) => textControl(options, 'text');
+export const createSearchInput = (options) => textControl(options, 'search');
+export const createNumberInput = (options) => textControl(options, 'number');
+export const createTextArea = (options) => textControl(options, 'textarea');
+export function createSecretInput(options) {
+    const block = textControl({ ...options, autocomplete: options.autocomplete ?? 'off' }, 'password');
+    const control = block.control;
+    const toggle = createTextAction({ label: 'Show', onAction() {
+            const show = control.type === 'password';
+            control.type = show ? 'text' : 'password';
+            toggle.update({ label: show ? 'Hide' : 'Show', disabled: control.disabled });
+            toggle.element.setAttribute('aria-pressed', String(show));
+        } });
+    toggle.element.setAttribute('aria-controls', control.id);
+    toggle.element.setAttribute('aria-pressed', 'false');
+    block.element.append(toggle.element);
+    const update = block.update;
+    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(); };
+    return block;
+}
+export function createSelect(options) {
+    const control = element('select');
+    control.multiple = !!options.multiple;
+    if (options.size)
+        control.size = options.size;
+    const field = createField({ ...options, control });
+    const life = new Lifetime();
+    let signature = '';
+    const update = (state) => {
+        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);
+        }
+    };
+    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(); } };
+}
+export function createCheckbox(options) {
+    const control = element('input');
+    control.type = 'checkbox';
+    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 update = (state) => {
+        setText(caption, state.label);
+        setText(description, state.description);
+        description.hidden = !state.description;
+        control.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(); } };
+}
+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() { } };
+}
+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); };
+    update(state);
+    return { element: root, update, destroy() { } };
+}
+export function createProgress(state) {
+    const control = element('progress');
+    const label = element('span');
+    const root = element('label', 'pui-progress', label, control);
+    const update = (next) => {
+        setText(label, next.label);
+        control.max = next.max && next.max > 0 ? next.max : 100;
+        if (next.value == null)
+            control.removeAttribute('value');
+        else
+            control.value = Math.max(0, Math.min(next.value, control.max));
+    };
+    update(state);
+    return { element: root, update, destroy() { } };
+}
+export function createFormSection(options) {
+    const title = element('h3');
+    const description = element('p', 'pui-muted');
+    const root = element('section', 'pui-form-section', title, description);
+    if (options.content)
+        root.append(options.content);
+    const update = (state) => { setText(title, state.title); setText(description, state.description); description.hidden = !state.description; };
+    update(options);
+    return { element: root, update, destroy() { } };
+}
+export function createActions(options = {}) {
+    const root = element('div', 'pui-actions');
+    root.append(...(options.children ?? []));
+    const update = (state) => { root.dataset.align = state.align ?? 'end'; };
+    update(options);
+    return { element: root, update, destroy() { } };
+}
+export function createDisclosure(options) {
+    const root = element('details', 'pui-disclosure');
+    const summary = element('summary');
+    const title = element('span');
+    const description = element('small', 'pui-muted');
+    summary.append(title, description);
+    root.append(summary, element('div', 'pui-disclosure-content', options.content));
+    root.open = !!options.open;
+    let disabled = !!options.disabled;
+    const life = new Lifetime();
+    life.listen(root, 'toggle', (() => options.onToggle?.(root.open)));
+    life.listen(summary, 'click', (event => { if (disabled)
+        event.preventDefault(); }));
+    const update = (state) => {
+        setText(title, state.title);
+        setText(description, state.description);
+        description.hidden = !state.description;
+        disabled = !!state.disabled;
+        summary.setAttribute('aria-disabled', String(disabled));
+    };
+    update(options);
+    return { element: root, update, setOpen(open) { root.open = open; }, isOpen: () => root.open, destroy() { life.destroy(); } };
+}
+export function createListRow(options) {
+    const title = element('div', 'pui-list-row-title');
+    const description = element('div', 'pui-muted');
+    const meta = element('small', 'pui-muted');
+    const glyph = element('span', 'pui-list-row-icon');
+    const root = element('div', 'pui-list-row', glyph, element('div', 'pui-list-row-body', title, description), meta);
+    if (options.actions)
+        root.append(options.actions);
+    let iconName = '';
+    const update = (state) => {
+        setText(title, state.title);
+        setText(description, state.description);
+        description.hidden = !state.description;
+        setText(meta, state.meta);
+        meta.hidden = !state.meta;
+        root.classList.toggle('pui-selected', !!state.selected);
+        if (iconName !== (state.icon ?? '')) {
+            iconName = state.icon ?? '';
+            glyph.replaceChildren(...(state.icon ? [iconElement(state.icon)] : []));
+        }
+        glyph.hidden = !state.icon;
+    };
+    update(options);
+    return { element: root, update, destroy() { } };
+}
+export function createCollectionState(options) {
+    const message = createNotice({ message: '' });
+    const content = element('div', 'pui-collection-content');
+    if (options.content)
+        content.append(options.content);
+    const retry = createButton({ label: options.retryLabel ?? 'Retry', onAction: options.onRetry });
+    const root = element('section', 'pui-collection', message.element, retry.element, content);
+    const update = (state) => {
+        root.dataset.state = state.status;
+        root.setAttribute('aria-busy', String(state.status === 'loading'));
+        message.update({ message: state.message ?? ({ ready: '', loading: 'Loading…', empty: 'Nothing here yet.', error: 'Could not load this content.' }[state.status]), tone: state.status === 'error' ? 'error' : 'info' });
+        content.hidden = state.status !== 'ready';
+        retry.element.hidden = state.status !== 'error' || !options.onRetry;
+        retry.update({ label: state.retryLabel ?? 'Retry' });
+    };
+    update(options);
+    return { element: root, update, destroy() { retry.destroy(); message.destroy(); } };
+}
+export function createDialog(options) {
+    const root = options.dialog ?? element('dialog');
+    root.classList.add('pui-dialog');
+    const title = element('h2');
+    title.id = uniqueId('pui-dialog-title');
+    root.setAttribute('aria-labelledby', title.id);
+    const description = element('p', 'pui-muted');
+    description.id = uniqueId('pui-dialog-description');
+    const eyebrow = element('span', 'pui-eyebrow');
+    const close = createIconButton({ label: `Close ${options.title}`, icon: 'close', onAction() { if (!state.closeDisabled)
+            root.close(); } });
+    const heading = element('header', 'pui-dialog-heading', element('div', '', eyebrow, title, description), close.element);
+    const body = element('div', 'pui-dialog-body');
+    if (options.content)
+        body.append(options.content);
+    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;
+        setText(title, next.title);
+        setText(description, next.description);
+        description.hidden = !next.description;
+        setText(eyebrow, next.eyebrow);
+        eyebrow.hidden = !next.eyebrow;
+        if (next.description)
+            root.setAttribute('aria-describedby', description.id);
+        else
+            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;
+    }));
+    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(); },
+        destroy() { if (disposed)
+            return; disposed = true; if (root.open)
+            root.close(); life.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
+    // description/error/number/secret machinery. Both paths use the same control CSS.
+    const control = element('textarea', 'pui-control');
+    control.rows = 8;
+    control.id = options.ids?.control ?? uniqueId('pui-input');
+    const label = element('label', 'pui-field-label', options.label ?? 'Message');
+    label.htmlFor = control.id;
+    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 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);
+    const ids = options.ids;
+    if (ids?.form)
+        form.id = ids.form;
+    if (ids?.submit)
+        submit.element.id = ids.submit;
+    if (ids?.error)
+        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?.(); } });
+    if (ids?.title) {
+        dialog.element.querySelector('h2').id = ids.title;
+        dialog.element.setAttribute('aria-labelledby', ids.title);
+    }
+    const update = (next) => {
+        state = next;
+        dialog.update(next);
+        setText(note, next.note);
+        note.hidden = !next.note;
+        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;
+    };
+    life.listen(control, 'input', () => options.onInput?.(control.value));
+    life.listen(form, 'submit', (event => {
+        event.preventDefault();
+        if (pending || state.pending || state.disabled || submit.element.disabled || !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;
+            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);
+        } });
+    }));
+    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;
+            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(); } };
+}
+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 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)
+        form.id = options.ids.form;
+    if (options.ids?.error)
+        error.element.id = options.ids.error;
+    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?.(); } });
+    if (options.ids?.title) {
+        dialog.element.querySelector('h2').id = options.ids.title;
+        dialog.element.setAttribute('aria-labelledby', options.ids.title);
+    }
+    let currentMessage;
+    const update = (next) => {
+        state = next;
+        dialog.update(next);
+        if (next.message !== currentMessage) {
+            currentMessage = next.message;
+            if (next.message instanceof Node)
+                message.replaceChildren(next.message);
+            else
+                setText(message, next.message);
+        }
+        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) });
+    };
+    life.listen(form, 'submit', (event => { event.preventDefault(); void run(); }));
+    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(); } };
+}
+export function createPopover(options) {
+    let open = false;
+    let state = options;
+    const trigger = createButton({ label: options.label, onAction() { if (open)
+            close();
+        else
+            show(); } });
+    const panel = element('div', 'pui-popover-panel', options.content);
+    panel.hidden = true;
+    panel.id = uniqueId('pui-popover');
+    panel.setAttribute('role', 'region');
+    panel.setAttribute('aria-label', options.label);
+    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 update = (next) => { state = next; trigger.update(next); panel.setAttribute('aria-label', next.label); if (next.disabled)
+        close(); };
+    update(options);
+    return { element: root, trigger: trigger.element, panel, update, open: show, close, isOpen: () => open,
+        destroy() { close(); life.destroy(); trigger.destroy(); } };
+}
+export function createMenu(options) {
+    const content = element('div', 'pui-menu');
+    content.setAttribute('role', 'menu');
+    const blocks = new Map();
+    let items = options.items;
+    const popover = createPopover({ label: options.label, content, disabled: options.disabled });
+    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 () => {
+                        const current = items.find(candidate => candidate.id === item.id);
+                        if (!current || current.disabled)
+                            return;
+                        const result = await current.onAction();
+                        if (!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);
+        }
+    };
+    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();
+        }
+    }));
+    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();
+    }));
+    update(options);
+    return { ...popover, update, destroy() { life.destroy(); popover.destroy(); for (const block of blocks.values())
+            block.destroy(); } };
+}
+//# sourceMappingURL=primitives.js.map