@aiworker/sdk 1.24.0

package/dist/ui/button.js

@@ -0,0 +1,49 @@
+import { button, ensureStyle, setText } from "./dom.js";
+import { UI_CSS } from "./style.js";
+const ring = () => {
+    const spinner = document.createElement('span');
+    spinner.className = 'oc-sdk-spinner-ring';
+    spinner.setAttribute('aria-hidden', 'true');
+    return spinner;
+};
+export const mountButton = (root, initial) => {
+    ensureStyle(UI_CSS);
+    let props = initial;
+    const node = button('oc-sdk oc-sdk-btn');
+    const spinner = ring();
+    const label = document.createElement('span');
+    node.append(label);
+    root.append(node);
+    const paint = () => {
+        node.dataset.variant = props.variant ?? 'default';
+        node.dataset.size = props.size ?? 'default';
+        node.disabled = Boolean(props.disabled) || Boolean(props.loading);
+        node.dataset.loading = props.loading ? 'true' : 'false';
+        node.setAttribute('aria-busy', props.loading ? 'true' : 'false');
+        if (props.loading && spinner.parentNode !== node) {
+            node.prepend(spinner);
+        }
+        else if (!props.loading && spinner.parentNode === node) {
+            spinner.remove();
+        }
+        setText(label, props.label);
+    };
+    const onClick = () => {
+        if (props.disabled || props.loading) {
+            return;
+        }
+        props.onClick();
+    };
+    node.addEventListener('click', onClick);
+    paint();
+    return {
+        update: (next) => {
+            props = { ...props, ...next };
+            paint();
+        },
+        dispose: () => {
+            node.removeEventListener('click', onClick);
+            node.remove();
+        },
+    };
+};

package/dist/ui/checkbox.d.ts

@@ -0,0 +1,12 @@
+import { type Handle } from './dom.ts';
+export type CheckboxProps = {
+    label: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    /** Muted line under the label. */
+    description?: string;
+};
+export type CheckboxHandle = Handle<CheckboxProps>;
+export declare const mountCheckbox: (root: Element, initial: CheckboxProps) => CheckboxHandle;
+export declare const mountSwitch: (root: Element, initial: CheckboxProps) => CheckboxHandle;

package/dist/ui/checkbox.js

@@ -0,0 +1,45 @@
+import { button, el, ensureStyle, setText } from "./dom.js";
+import { icon } from "./icons.js";
+import { UI_CSS } from "./style.js";
+const mountToggle = (root, initial, role) => {
+    ensureStyle(UI_CSS);
+    let props = initial;
+    const node = button('oc-sdk oc-sdk-check');
+    node.setAttribute('role', role);
+    const control = el('span', role === 'switch' ? 'oc-sdk-check-thumb' : 'oc-sdk-check-box');
+    if (role === 'checkbox') {
+        control.append(icon('check', 12));
+    }
+    const text = el('span', 'oc-sdk-check-text');
+    const label = el('span', 'oc-sdk-check-label');
+    const description = el('span', 'oc-sdk-check-desc');
+    text.append(label, description);
+    node.append(control, text);
+    root.append(node);
+    const paint = () => {
+        node.setAttribute('aria-checked', props.checked ? 'true' : 'false');
+        node.disabled = Boolean(props.disabled);
+        setText(label, props.label);
+        setText(description, props.description);
+        description.hidden = !props.description;
+    };
+    const onClick = () => {
+        if (!props.disabled) {
+            props.onChange(!props.checked);
+        }
+    };
+    node.addEventListener('click', onClick);
+    paint();
+    return {
+        update: (next) => {
+            props = { ...props, ...next };
+            paint();
+        },
+        dispose: () => {
+            node.removeEventListener('click', onClick);
+            node.remove();
+        },
+    };
+};
+export const mountCheckbox = (root, initial) => (mountToggle(root, initial, 'checkbox'));
+export const mountSwitch = (root, initial) => (mountToggle(root, initial, 'switch'));

package/dist/ui/dom.d.ts

@@ -0,0 +1,15 @@
+/** Every mount returns this. `update` merges props and repaints; `dispose` removes the node and every listener. */
+export type Handle<P> = {
+    update: (next: Partial<P>) => void;
+    dispose: () => void;
+};
+export declare const clearNode: (node: Element) => void;
+export declare const ensureStyle: (css: string) => void;
+export declare const el: <K extends keyof HTMLElementTagNameMap>(tag: K, className?: string) => HTMLElementTagNameMap[K];
+export declare const button: (className: string) => HTMLButtonElement;
+/** Writes text only when it changed so a repaint does not disturb selection or layout. */
+export declare const setText: (node: Element, text: string | null | undefined) => void;
+/** Sets or removes an attribute depending on whether a value is present. */
+export declare const setAttr: (node: Element, name: string, value: string | null | undefined) => void;
+/** Runs `handler` on a pointer press outside `node`. Returns the disposer. */
+export declare const onOutsideClick: (node: Element, handler: () => void) => (() => void);

package/dist/ui/dom.js

@@ -0,0 +1,60 @@
+const STYLE_ID = 'oc-sdk-ui-style';
+export const clearNode = (node) => {
+    while (node.firstChild) {
+        node.removeChild(node.firstChild);
+    }
+};
+export const ensureStyle = (css) => {
+    const existing = document.getElementById(STYLE_ID);
+    if (existing instanceof HTMLStyleElement) {
+        if (existing.textContent !== css) {
+            existing.textContent = css;
+        }
+        return;
+    }
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = css;
+    document.head.appendChild(style);
+};
+export const el = (tag, className) => {
+    const node = document.createElement(tag);
+    if (className) {
+        node.className = className;
+    }
+    return node;
+};
+export const button = (className) => {
+    const node = el('button', className);
+    node.type = 'button';
+    return node;
+};
+/** Writes text only when it changed so a repaint does not disturb selection or layout. */
+export const setText = (node, text) => {
+    const next = text ?? '';
+    if (node.textContent !== next) {
+        node.textContent = next;
+    }
+};
+/** Sets or removes an attribute depending on whether a value is present. */
+export const setAttr = (node, name, value) => {
+    if (value === undefined || value === null || value === '') {
+        node.removeAttribute(name);
+    }
+    else if (node.getAttribute(name) !== value) {
+        node.setAttribute(name, value);
+    }
+};
+/** Runs `handler` on a pointer press outside `node`. Returns the disposer. */
+export const onOutsideClick = (node, handler) => {
+    const listener = (event) => {
+        if (event.target instanceof Node && node.contains(event.target)) {
+            return;
+        }
+        handler();
+    };
+    document.addEventListener('pointerdown', listener, true);
+    return () => {
+        document.removeEventListener('pointerdown', listener, true);
+    };
+};

package/dist/ui/empty.d.ts

@@ -0,0 +1,11 @@
+import { type Handle } from './dom.ts';
+export type EmptyProps = {
+    title: string;
+    body?: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+};
+export type EmptyHandle = Handle<EmptyProps>;
+export declare const mountEmpty: (root: Element, initial: EmptyProps) => EmptyHandle;

package/dist/ui/empty.js

@@ -0,0 +1,44 @@
+import { mountButton } from "./button.js";
+import { el, ensureStyle, setText } from "./dom.js";
+import { UI_CSS } from "./style.js";
+export const mountEmpty = (root, initial) => {
+    ensureStyle(UI_CSS);
+    let props = initial;
+    const shell = el('div', 'oc-sdk oc-sdk-empty');
+    const title = el('h2', 'oc-sdk-empty-title');
+    const body = el('p', 'oc-sdk-empty-body');
+    const slot = el('div', 'oc-sdk-empty-action');
+    shell.append(title, body, slot);
+    root.append(shell);
+    let action = null;
+    const paint = () => {
+        setText(title, props.title);
+        setText(body, props.body);
+        body.hidden = !props.body;
+        slot.hidden = !props.action;
+        if (!props.action) {
+            action?.dispose();
+            action = null;
+            return;
+        }
+        const next = { label: props.action.label, onClick: props.action.onClick };
+        if (action) {
+            action.update(next);
+        }
+        else {
+            action = mountButton(slot, { ...next, variant: 'outline', size: 'sm' });
+        }
+    };
+    paint();
+    return {
+        update: (next) => {
+            props = { ...props, ...next };
+            paint();
+        },
+        dispose: () => {
+            action?.dispose();
+            action = null;
+            shell.remove();
+        },
+    };
+};

package/dist/ui/field.d.ts

@@ -0,0 +1,18 @@
+import { type Handle } from './dom.ts';
+export type TextFieldProps = {
+    label?: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    password?: boolean;
+    multiline?: boolean;
+    rows?: number;
+    disabled?: boolean;
+    /** Error text. Turns the ring red and replaces `helper`. */
+    error?: string;
+    helper?: string;
+    /** Monospace input, for tokens and identifiers. */
+    mono?: boolean;
+};
+export type TextFieldHandle = Handle<TextFieldProps>;
+export declare const mountTextField: (root: Element, initial: TextFieldProps) => TextFieldHandle;

package/dist/ui/field.js

@@ -0,0 +1,49 @@
+import { el, ensureStyle, setAttr, setText } from "./dom.js";
+import { UI_CSS } from "./style.js";
+export const mountTextField = (root, initial) => {
+    ensureStyle(UI_CSS);
+    let props = initial;
+    const field = el('label', 'oc-sdk oc-sdk-field');
+    const caption = el('span', 'oc-sdk-field-label');
+    const input = props.multiline ? el('textarea', 'oc-sdk-input') : el('input', 'oc-sdk-input');
+    const note = el('span', 'oc-sdk-field-note');
+    field.append(caption, input, note);
+    root.append(field);
+    const paint = () => {
+        setText(caption, props.label);
+        caption.hidden = !props.label;
+        if (input instanceof HTMLInputElement) {
+            input.type = props.password ? 'password' : 'text';
+        }
+        else {
+            input.rows = props.rows ?? 3;
+        }
+        if (input.value !== props.value) {
+            input.value = props.value;
+        }
+        input.disabled = Boolean(props.disabled);
+        setAttr(input, 'placeholder', props.placeholder);
+        input.dataset.mono = props.mono ? 'true' : 'false';
+        const invalid = Boolean(props.error);
+        field.dataset.invalid = invalid ? 'true' : 'false';
+        input.setAttribute('aria-invalid', invalid ? 'true' : 'false');
+        const text = props.error ?? props.helper ?? '';
+        setText(note, text);
+        note.hidden = text === '';
+    };
+    const onInput = () => {
+        props.onChange(input.value);
+    };
+    input.addEventListener('input', onInput);
+    paint();
+    return {
+        update: (next) => {
+            props = { ...props, ...next };
+            paint();
+        },
+        dispose: () => {
+            input.removeEventListener('input', onInput);
+            field.remove();
+        },
+    };
+};

package/dist/ui/icons.d.ts

@@ -0,0 +1,10 @@
+/** Remixicon outlines. Add a shape only when a primitive paints it. */
+declare const ICON_PATH: {
+    readonly search: "M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z";
+    readonly chevron: "M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z";
+    readonly check: "M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z";
+    readonly close: "M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z";
+};
+type IconName = keyof typeof ICON_PATH;
+export declare const icon: (name: IconName, size: number, className?: string) => SVGSVGElement;
+export {};

package/dist/ui/icons.js

@@ -0,0 +1,23 @@
+const SVG_NS = 'http://www.w3.org/2000/svg';
+/** Remixicon outlines. Add a shape only when a primitive paints it. */
+const ICON_PATH = {
+    search: 'M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z',
+    chevron: 'M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z',
+    check: 'M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z',
+    close: 'M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z',
+};
+export const icon = (name, size, className) => {
+    const node = document.createElementNS(SVG_NS, 'svg');
+    node.setAttribute('viewBox', '0 0 24 24');
+    node.setAttribute('width', String(size));
+    node.setAttribute('height', String(size));
+    node.setAttribute('aria-hidden', 'true');
+    node.setAttribute('fill', 'currentColor');
+    if (className) {
+        node.setAttribute('class', className);
+    }
+    const path = document.createElementNS(SVG_NS, 'path');
+    path.setAttribute('d', ICON_PATH[name]);
+    node.append(path);
+    return node;
+};

package/dist/ui/index.d.ts

@@ -0,0 +1,35 @@
+export { applyHostReady, applyHostTheme } from './theme.ts';
+export type { ThemeRoot } from './theme.ts';
+export type { Handle } from './dom.ts';
+export { mountButton } from './button.ts';
+export type { ButtonHandle, ButtonProps, ButtonSize, ButtonVariant } from './button.ts';
+export { mountTextField } from './field.ts';
+export type { TextFieldHandle, TextFieldProps } from './field.ts';
+export { mountSearchField } from './search.ts';
+export type { SearchFieldHandle, SearchFieldProps } from './search.ts';
+export { filterSelectOptions, mountSelect } from './select.ts';
+export type { SelectHandle, SelectOption, SelectProps } from './select.ts';
+export { mountCheckbox, mountSwitch } from './checkbox.ts';
+export type { CheckboxHandle, CheckboxProps } from './checkbox.ts';
+export { mountTabs } from './tabs.ts';
+export type { TabItem, TabsHandle, TabsProps } from './tabs.ts';
+export { mountBadge } from './badge.ts';
+export type { BadgeHandle, BadgeProps, Tone } from './badge.ts';
+export { mountList } from './list.ts';
+export type { ListHandle, ListItem, ListProps } from './list.ts';
+export { moveListSelection, navigationKey } from './navigation.ts';
+export type { NavigableItem, NavigationKey } from './navigation.ts';
+export { mountEmpty } from './empty.ts';
+export type { EmptyHandle, EmptyProps } from './empty.ts';
+export { mountSpinner } from './spinner.ts';
+export type { SpinnerHandle, SpinnerProps } from './spinner.ts';
+export { mountBanner } from './banner.ts';
+export type { BannerHandle, BannerProps, BannerTone } from './banner.ts';
+export { mountSeparator } from './separator.ts';
+export type { SeparatorHandle, SeparatorProps } from './separator.ts';
+export { mountProgress } from './progress.ts';
+export type { ProgressHandle, ProgressProps } from './progress.ts';
+export { mountMenu } from './menu.ts';
+export type { MenuHandle, MenuItem, MenuProps } from './menu.ts';
+export { mountText, splitTextMedia } from './text.ts';
+export type { TextHandle, TextPart, TextProps } from './text.ts';

package/dist/ui/index.js

@@ -0,0 +1,17 @@
+export { applyHostReady, applyHostTheme } from "./theme.js";
+export { mountButton } from "./button.js";
+export { mountTextField } from "./field.js";
+export { mountSearchField } from "./search.js";
+export { filterSelectOptions, mountSelect } from "./select.js";
+export { mountCheckbox, mountSwitch } from "./checkbox.js";
+export { mountTabs } from "./tabs.js";
+export { mountBadge } from "./badge.js";
+export { mountList } from "./list.js";
+export { moveListSelection, navigationKey } from "./navigation.js";
+export { mountEmpty } from "./empty.js";
+export { mountSpinner } from "./spinner.js";
+export { mountBanner } from "./banner.js";
+export { mountSeparator } from "./separator.js";
+export { mountProgress } from "./progress.js";
+export { mountMenu } from "./menu.js";
+export { mountText, splitTextMedia } from "./text.js";

package/dist/ui/list.d.ts

@@ -0,0 +1,26 @@
+import { type Tone } from './badge.ts';
+import { type Handle } from './dom.ts';
+export type ListItem = {
+    id: string;
+    title: string;
+    /** Micro muted line under the title. */
+    subtitle?: string;
+    /** Fixed-width mono text before the title, like an issue key. */
+    leading?: string;
+    /** Muted tabular text at the right, like a date or count. */
+    meta?: string;
+    badge?: {
+        label: string;
+        tone?: Tone;
+    };
+    disabled?: boolean;
+};
+export type ListProps = {
+    items: ListItem[];
+    selectedId?: string | null;
+    onSelect: (id: string) => void;
+    emptyText?: string;
+    ariaLabel?: string;
+};
+export type ListHandle = Handle<ListProps>;
+export declare const mountList: (root: Element, initial: ListProps) => ListHandle;

package/dist/ui/list.js

@@ -0,0 +1,90 @@
+import { applyTone } from "./badge.js";
+import { button, clearNode, el, ensureStyle, setAttr } from "./dom.js";
+import { moveListSelection, navigationKey } from "./navigation.js";
+import { UI_CSS } from "./style.js";
+let listCount = 0;
+export const mountList = (root, initial) => {
+    ensureStyle(UI_CSS);
+    let props = initial;
+    const uid = `oc-sdk-list-${listCount += 1}`;
+    const list = el('div', 'oc-sdk oc-sdk-list');
+    list.setAttribute('role', 'listbox');
+    list.tabIndex = 0;
+    root.append(list);
+    let activeId = null;
+    const rowId = (id) => `${uid}-${id}`;
+    const setActive = (id) => {
+        activeId = id;
+        for (const row of Array.from(list.children)) {
+            if (row instanceof HTMLElement) {
+                row.dataset.active = row.id === rowId(id ?? '') ? 'true' : 'false';
+            }
+        }
+        setAttr(list, 'aria-activedescendant', id ? rowId(id) : null);
+        list.querySelector('[data-active="true"]')?.scrollIntoView({ block: 'nearest' });
+    };
+    const span = (className, text) => {
+        const node = el('span', className);
+        node.textContent = text;
+        return node;
+    };
+    const paint = () => {
+        clearNode(list);
+        setAttr(list, 'aria-label', props.ariaLabel);
+        if (props.items.length === 0) {
+            list.append(span('oc-sdk-list-empty', props.emptyText ?? 'Nothing here'));
+            setActive(null);
+            return;
+        }
+        for (const item of props.items) {
+            const row = button('oc-sdk-row');
+            row.id = rowId(item.id);
+            row.setAttribute('role', 'option');
+            row.setAttribute('aria-selected', item.id === props.selectedId ? 'true' : 'false');
+            row.disabled = Boolean(item.disabled);
+            row.tabIndex = -1;
+            if (item.leading)
+                row.append(span('oc-sdk-row-lead', item.leading));
+            const main = el('span', 'oc-sdk-row-main');
+            main.append(span('oc-sdk-row-title', item.title));
+            if (item.subtitle)
+                main.append(span('oc-sdk-row-sub', item.subtitle));
+            row.append(main);
+            if (item.badge) {
+                const badge = span('oc-sdk-badge', item.badge.label);
+                applyTone(badge, item.badge.tone);
+                row.append(badge);
+            }
+            if (item.meta)
+                row.append(span('oc-sdk-row-meta', item.meta));
+            row.addEventListener('click', () => props.onSelect(item.id));
+            list.append(row);
+        }
+        const stillThere = props.items.some((item) => item.id === activeId && !item.disabled);
+        setActive(stillThere ? activeId : props.selectedId ?? null);
+    };
+    const onKeyDown = (event) => {
+        const step = navigationKey(event);
+        if (step) {
+            event.preventDefault();
+            setActive(moveListSelection(props.items, activeId, step));
+            return;
+        }
+        if ((event.key === 'Enter' || event.key === ' ') && activeId) {
+            event.preventDefault();
+            props.onSelect(activeId);
+        }
+    };
+    list.addEventListener('keydown', onKeyDown);
+    paint();
+    return {
+        update: (next) => {
+            props = { ...props, ...next };
+            paint();
+        },
+        dispose: () => {
+            list.removeEventListener('keydown', onKeyDown);
+            list.remove();
+        },
+    };
+};

package/dist/ui/menu.d.ts

@@ -0,0 +1,20 @@
+import { type ButtonSize, type ButtonVariant } from './button.ts';
+import { type Handle } from './dom.ts';
+export type MenuItem = {
+    id: string;
+    label: string;
+    destructive?: boolean;
+    disabled?: boolean;
+} | {
+    separator: true;
+};
+export type MenuProps = {
+    /** Trigger button label. */
+    label: string;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    items: MenuItem[];
+    onSelect: (id: string) => void;
+};
+export type MenuHandle = Handle<MenuProps>;
+export declare const mountMenu: (root: Element, initial: MenuProps) => MenuHandle;

package/dist/ui/menu.js

@@ -0,0 +1,115 @@
+import { mountButton } from "./button.js";
+import { clearNode, el, ensureStyle } from "./dom.js";
+import { moveListSelection, navigationKey } from "./navigation.js";
+import { createOption, highlightOption } from "./option.js";
+import { openPopup } from "./popup.js";
+import { UI_CSS } from "./style.js";
+const actions = (items) => (items.filter((item) => !('separator' in item)));
+let menuCount = 0;
+export const mountMenu = (root, initial) => {
+    ensureStyle(UI_CSS);
+    let props = initial;
+    const uid = `oc-sdk-menu-${menuCount += 1}`;
+    const wrap = el('div', 'oc-sdk oc-sdk-menu');
+    root.append(wrap);
+    const popup = el('div', 'oc-sdk oc-sdk-popup');
+    popup.setAttribute('role', 'menu');
+    popup.tabIndex = -1;
+    let closePopup = null;
+    let activeId = null;
+    const trigger = mountButton(wrap, {
+        label: props.label,
+        variant: props.variant,
+        size: props.size,
+        onClick: () => {
+            if (closePopup)
+                close();
+            else
+                open();
+        },
+    });
+    const triggerNode = wrap.querySelector('button');
+    triggerNode?.setAttribute('aria-haspopup', 'menu');
+    const setActive = (id) => {
+        activeId = id;
+        highlightOption(popup, popup, uid, id);
+    };
+    const paintItems = () => {
+        clearNode(popup);
+        for (const item of props.items) {
+            if ('separator' in item) {
+                const line = el('div', 'oc-sdk-separator');
+                line.dataset.labeled = 'false';
+                popup.append(line);
+                continue;
+            }
+            popup.append(createOption(uid, 'menuitem', item, {
+                hover: () => setActive(item.id),
+                pick: () => pick(item.id),
+            }));
+        }
+        setActive(actions(props.items).some((item) => item.id === activeId) ? activeId : null);
+    };
+    const close = () => {
+        // Removing a focused row fires `focusout` synchronously from inside the disposer, and
+        // that handler calls `close` again. Clearing the slot first makes the re-entry a no-op
+        // instead of a second `popup.remove()` that throws before the pick reaches `onChange`.
+        const dispose = closePopup;
+        closePopup = null;
+        dispose?.();
+        activeId = null;
+        triggerNode?.setAttribute('aria-expanded', 'false');
+    };
+    const open = () => {
+        if (closePopup || !triggerNode) {
+            return;
+        }
+        paintItems();
+        closePopup = openPopup(wrap, triggerNode, popup, close);
+        triggerNode.setAttribute('aria-expanded', 'true');
+        popup.focus();
+    };
+    const pick = (id) => {
+        close();
+        triggerNode?.focus();
+        props.onSelect(id);
+    };
+    const onPopupKey = (event) => {
+        const step = navigationKey(event);
+        if (step) {
+            event.preventDefault();
+            setActive(moveListSelection(actions(props.items), activeId, step));
+        }
+        else if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            if (activeId)
+                pick(activeId);
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            close();
+            triggerNode?.focus();
+        }
+    };
+    const onFocusOut = (event) => {
+        if (closePopup && !(event.relatedTarget instanceof Node && wrap.contains(event.relatedTarget)))
+            close();
+    };
+    popup.addEventListener('keydown', onPopupKey);
+    wrap.addEventListener('focusout', onFocusOut);
+    return {
+        update: (next) => {
+            props = { ...props, ...next };
+            trigger.update({ label: props.label, variant: props.variant, size: props.size });
+            if (closePopup)
+                paintItems();
+        },
+        dispose: () => {
+            close();
+            popup.removeEventListener('keydown', onPopupKey);
+            wrap.removeEventListener('focusout', onFocusOut);
+            trigger.dispose();
+            wrap.remove();
+        },
+    };
+};