@threadlabs/looma 0.1.21 → 0.1.23

package/dist/esm/ui-combobox.entry.js

@@ -0,0 +1,539 @@
+import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-8BGiMGQ0.js';
+import { a as createAnchoredSurface } from './positioning-Bu0dmLBE.js';
+import { c as closeOverlay, o as openOverlay } from './manager-C-0syqXZ.js';
+
+/** Formatting is additive: every original character must survive in order.
+ * Normalization belongs to submitted output, never the visible editing buffer. */
+function formatEditingValue(raw, selection, format) {
+    const unchanged = { display: raw, selection };
+    if (!format)
+        return unchanged;
+    let result;
+    try {
+        result = format(raw, selection);
+    }
+    catch {
+        return unchanged;
+    }
+    if (!result)
+        return unchanged;
+    const characters = Array.from(raw);
+    let cursor = 0;
+    for (const character of result.display)
+        if (character === characters[cursor])
+            cursor += 1;
+    if (!Number.isInteger(result.selection.start) || !Number.isInteger(result.selection.end) || cursor !== characters.length || result.selection.start < 0 || result.selection.end < result.selection.start
+        || result.selection.end > result.display.length)
+        return unchanged;
+    return result;
+}
+async function validateField(request, config) {
+    let output = request.raw;
+    let issues = [];
+    const check = () => request.signal.throwIfAborted();
+    try {
+        check();
+        if (config.parse)
+            output = await config.parse(request.raw, request);
+        check();
+        if (config.schema) {
+            const result = await config.schema['~standard'].validate(output);
+            check();
+            if (result.issues)
+                issues = result.issues;
+            else if ('value' in result)
+                output = result.value;
+        }
+        if (!issues.some(issue => issue.severity !== 'warning')) {
+            if (config.normalize)
+                output = await config.normalize(output, request);
+            check();
+            if (config.validator) {
+                const result = await config.validator(output, request);
+                check();
+                issues = [...issues, ...(result.issues ?? [])];
+                if ('output' in result)
+                    output = result.output;
+            }
+        }
+    }
+    catch (error) {
+        check();
+        issues = [{ message: error instanceof Error ? error.message : 'Unable to validate this value.' }];
+    }
+    issues = [...issues, ...(config.issues ?? [])];
+    return { output: issues.some(issue => issue.severity !== 'warning') ? undefined : output, issues };
+}
+
+const uiComboboxCss = () => `:host{display:grid;gap:var(--ui-space-1);min-inline-size:0;color:var(--ui-text-primary);font:inherit}label{color:var(--ui-field-label-color, var(--ui-text-primary));font-size:var(--ui-field-label-size, 0.875rem);font-weight:var(--ui-field-label-weight, 500)}.field{display:flex;min-inline-size:0;border:1px solid var(--ui-control-border, var(--ui-border-default));border-radius:var(--ui-radius-2);background:var(--ui-control-surface, var(--ui-surface-default))}.field:focus-within{border-color:var(--ui-control-focus, var(--ui-focus-ring));outline:2px solid var(--ui-control-focus, var(--ui-focus-ring));outline-offset:1px}input{appearance:none;width:100%;min-inline-size:0;min-block-size:var(--ui-control-min-block-size, 2.75rem);box-sizing:border-box;border:0;border-radius:inherit;background:transparent;color:inherit;font:inherit;line-height:var(--ui-line-height-md);padding:var(--ui-space-2) var(--ui-space-3);margin:0;outline:none}:host([data-size='sm']) input{min-block-size:var(--ui-field-compact-size, 2rem);padding:var(--ui-space-1) var(--ui-space-2)}button{appearance:none;border:0;border-radius:var(--ui-radius-2);background:transparent;color:var(--ui-field-affordance-color, var(--ui-text-secondary));font:inherit;font-weight:var(--ui-field-affordance-weight, 400);min-inline-size:2rem;padding:var(--ui-space-1);cursor:pointer}button:hover:enabled{background:var(--ui-surface-muted);color:var(--ui-text-primary)}button:focus-visible{outline:2px solid var(--ui-focus-ring);outline-offset:-3px}input:disabled,button:disabled{color:var(--ui-text-muted);cursor:not-allowed}.field:has(input:disabled){background:var(--ui-control-surface-disabled, var(--ui-surface-muted))}:host([data-validation='error']) .field{border-color:var(--ui-danger-solid, var(--ui-accent-active))}.popup{box-sizing:border-box;min-inline-size:12rem;max-inline-size:calc(100vw - 1rem);max-block-size:var(--ui-combobox-max-block-size, 18rem);overflow:auto;margin:0;padding:var(--ui-space-1);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-elevated);color:var(--ui-text-primary);box-shadow:var(--ui-shadow-md)}[hidden]{display:none !important}.option{padding:var(--ui-space-2) var(--ui-space-3);border-radius:var(--ui-radius-1);cursor:pointer;overflow-wrap:anywhere}.option:hover,.option[data-active]{background:var(--ui-surface-muted);outline:1px solid var(--ui-focus-ring);outline-offset:-1px}.option[aria-disabled='true']{color:var(--ui-text-muted);cursor:not-allowed}.primary{display:block;color:var(--ui-option-primary-color, var(--ui-text-primary));font-weight:var(--ui-option-primary-weight, 500)}.secondary{display:block;color:var(--ui-option-secondary-color, var(--ui-text-secondary));font-weight:var(--ui-option-secondary-weight, 400);font-size:var(--ui-font-size-sm)}.message,.group{color:var(--ui-field-message-color, var(--ui-text-secondary));font-weight:var(--ui-field-message-weight, 400);font-size:var(--ui-font-size-sm);line-height:var(--ui-line-height-md);overflow-wrap:anywhere}.group,.popup .message{padding:var(--ui-space-2) var(--ui-space-3)}.sr-only{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media (pointer: coarse){button{min-inline-size:2.75rem;min-block-size:2.75rem}}@media (forced-colors: active){.field,.popup{border-color:CanvasText}.option[data-active]{outline-color:Highlight}}`;
+
+const UICombobox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.queryChange = createEvent(this, "query-change");
+        this.valueChange = createEvent(this, "value-change");
+        this.freeEntry = createEvent(this, "free-entry");
+        this.createEntry = createEvent(this, "create-entry");
+        this.dependencyInvalidate = createEvent(this, "dependency-invalidate");
+        this.validationChange = createEvent(this, "validation-change");
+        this.optionsChange = createEvent(this, "options-change");
+    }
+    get host() { return getElement(this); }
+    /** Accessible visible label, associated with the native text input. */
+    label = '';
+    placeholder = '';
+    name = '';
+    /** Controlled canonical value. Undefined selects uncontrolled mode; null means no selection. */
+    value;
+    defaultValue;
+    /** Controlled raw editing text; independent of canonical selection. */
+    query;
+    defaultQuery = '';
+    /** Immutable configuration; replace the object/context when dependencies change. */
+    config = {};
+    disabled = false;
+    readOnly = false;
+    required = false;
+    size = 'md';
+    disclosure = false;
+    clearable = false;
+    /** Optional description shown by the connected question-mark button. */
+    help = '';
+    queryChange;
+    valueChange;
+    freeEntry;
+    createEntry;
+    dependencyInvalidate;
+    validationChange;
+    /** Supplies the current result rows for framework-owned rich slots. */
+    optionsChange;
+    raw = '';
+    display = '';
+    selected = null;
+    expanded = false;
+    rows = [];
+    active = -1;
+    loading = false;
+    helpOpen = false;
+    lookupError = '';
+    validation = { status: 'pristine', touched: false, dirty: false, issues: [] };
+    input;
+    popup;
+    field;
+    surface;
+    lookup;
+    validationRun;
+    lookupTimer;
+    composing = false;
+    initialRaw = '';
+    overlayId = `ui-combobox-${Math.random().toString(36).slice(2)}`;
+    alive = false;
+    fullSet = false;
+    knownOptions = new Map();
+    awaitingLabel = null;
+    proposedChange;
+    formattedRaw;
+    formattedWith;
+    componentWillLoad() {
+        this.selected = this.value !== undefined ? this.value : this.defaultValue ?? null;
+        this.raw = this.query ?? this.defaultQuery;
+        if (this.query === undefined && !this.raw && this.selected !== null) {
+            this.raw = this.config.options?.find(row => row.value === this.selected)?.label ?? this.selected;
+        }
+        if (this.query === undefined && this.selected !== null && this.raw === this.selected)
+            this.awaitingLabel = this.selected;
+        this.display = this.raw;
+        this.initialRaw = this.raw;
+        this.applyServerIssues();
+    }
+    connectedCallback() { this.alive = true; this.setupSurface(); }
+    componentDidLoad() { this.setupSurface(); }
+    componentDidUpdate() {
+        if (this.input && !this.composing && this.input.value !== this.display)
+            this.input.value = this.display;
+        if (this.expanded)
+            this.surface?.refresh();
+    }
+    disconnectedCallback() {
+        this.alive = false;
+        this.close();
+        this.validationRun?.abort();
+        this.surface?.destroy();
+        this.surface = undefined;
+    }
+    setupSurface() {
+        if (!this.surface && this.popup && this.field)
+            this.surface = createAnchoredSurface(this.popup, { anchor: this.field, placement: 'bottom-start' });
+    }
+    syncValue() {
+        if (this.value === undefined)
+            return;
+        this.selected = this.value;
+        if (this.query === undefined) {
+            const proposal = this.proposedChange;
+            const option = this.config.options?.find(row => row.value === this.selected)
+                ?? (this.selected === null ? undefined : this.knownOptions.get(this.selected));
+            const nextRaw = proposal?.value === this.selected ? proposal.query : option?.label ?? this.selected ?? '';
+            if (proposal?.value !== this.selected || nextRaw !== this.raw) {
+                this.raw = nextRaw;
+                this.display = this.raw;
+                this.formattedRaw = undefined;
+            }
+            this.awaitingLabel = !option && this.selected !== null ? this.selected : null;
+        }
+        this.resetValidation();
+    }
+    syncQuery() {
+        if (this.query === undefined || this.query === this.raw)
+            return;
+        // Only a selection proposal's query echo retains an uncontrolled identity.
+        // Other owner text replacements are edits, just like native input.
+        if (this.value === undefined && this.proposedChange?.query !== this.query)
+            this.selected = null;
+        this.awaitingLabel = null;
+        this.formattedRaw = undefined;
+        this.raw = this.query;
+        this.display = this.raw;
+        this.resetValidation();
+        if (this.expanded)
+            this.search('input');
+    }
+    syncDisabled() {
+        if (this.disabled || this.readOnly) {
+            this.close();
+            this.resetValidation();
+        }
+    }
+    syncConfig(next, previous) {
+        this.validationRun?.abort();
+        if (next.provider !== previous?.provider || next.context !== previous?.context)
+            this.knownOptions.clear();
+        if (next.context !== previous?.context) {
+            this.close();
+            const policy = next.invalidation ?? 'retain-query';
+            const value = policy === 'retain' ? this.selected : null;
+            const query = policy === 'clear' ? '' : this.raw;
+            this.commit(value, query, null, 'invalidation', 'programmatic');
+            this.validation = { status: 'pristine', touched: false, dirty: this.raw !== this.initialRaw, issues: [] };
+        }
+        this.applyServerIssues();
+        if (this.expanded)
+            this.search('context');
+    }
+    applyServerIssues() {
+        const issues = this.config.issues ?? [];
+        if (issues.length)
+            this.setValidation({ issues }, this.validation.touched);
+        else
+            this.resetValidation();
+    }
+    resetValidation() {
+        this.validationRun?.abort();
+        this.validation = { status: 'pristine', touched: this.validation.touched, dirty: this.raw !== this.initialRaw, issues: [] };
+        this.validationChange?.emit(this.validation);
+    }
+    cancelLookup() {
+        clearTimeout(this.lookupTimer);
+        this.lookup?.abort();
+        this.lookup = undefined;
+        this.loading = false;
+    }
+    close() {
+        this.expanded = false;
+        this.active = -1;
+        this.cancelLookup();
+        this.surface?.hide();
+        closeOverlay(this.overlayId);
+    }
+    open(reason = 'input') {
+        if (this.disabled || this.readOnly)
+            return;
+        this.expanded = true;
+        if (this.popup && this.field)
+            this.popup.style.minWidth = `${this.field.getBoundingClientRect().width}px`;
+        this.surface?.show();
+        openOverlay({ id: this.overlayId, element: this.popup, relatedElements: [this.host], modal: false,
+            requestClose: () => this.close() });
+        this.search(reason);
+    }
+    search(reason) {
+        this.cancelLookup();
+        this.fullSet = reason === 'disclosure';
+        this.active = -1;
+        this.lookupError = '';
+        const config = this.config;
+        const query = this.fullSet ? '' : this.raw;
+        const controller = new AbortController();
+        this.lookup = controller;
+        const apply = (options) => {
+            if (controller.signal.aborted || !this.alive)
+                return;
+            for (const option of options)
+                this.knownOptions.set(option.value, option);
+            const selectedOption = this.selected === null ? undefined : this.knownOptions.get(this.selected);
+            if (this.query === undefined && this.awaitingLabel === this.selected && selectedOption) {
+                this.raw = selectedOption.label;
+                this.display = this.raw;
+                this.awaitingLabel = null;
+                this.formattedRaw = undefined;
+                this.resetValidation();
+            }
+            const ids = new Set();
+            this.rows = options.filter(option => {
+                if (ids.has(option.id))
+                    return false;
+                ids.add(option.id);
+                return this.fullSet || (config.filter ? config.filter(option, query, config.context)
+                    : config.provider ? true : option.label.toLocaleLowerCase().includes(query.toLocaleLowerCase()));
+            });
+            const groups = new Map();
+            for (const row of this.rows) {
+                const group = row.group ?? '';
+                if (!groups.has(group))
+                    groups.set(group, []);
+                groups.get(group).push(row);
+            }
+            this.rows = [...groups.values()].flat();
+            this.loading = false;
+            this.optionsChange.emit(this.rows);
+        };
+        if (!config.provider) {
+            apply(config.options ?? []);
+            return;
+        }
+        this.rows = [];
+        this.loading = true;
+        this.lookupTimer = setTimeout(async () => {
+            try {
+                apply(await config.provider({ query, context: config.context, signal: controller.signal, reason }));
+            }
+            catch (error) {
+                if (controller.signal.aborted || !this.alive)
+                    return;
+                this.loading = false;
+                this.lookupError = error instanceof Error ? error.message : 'Unable to load suggestions.';
+            }
+        }, reason === 'disclosure' ? 0 : Math.max(0, config.debounce ?? 200));
+    }
+    get canCreate() {
+        return Boolean(this.config.allowCreate && this.raw.trim() && !this.loading && !this.lookupError
+            && !this.rows.some(row => row.label.toLocaleLowerCase() === this.raw.toLocaleLowerCase()));
+    }
+    format(timing) {
+        if ((this.config.formatOn ?? 'blur') !== timing || !this.input)
+            return;
+        // Selection is now in display coordinates; do not map it as raw a second time.
+        if (this.formattedRaw === this.raw && this.formattedWith === this.config.format)
+            return;
+        const result = formatEditingValue(this.raw, {
+            start: this.input.selectionStart ?? this.raw.length, end: this.input.selectionEnd ?? this.raw.length,
+            direction: this.input.selectionDirection ?? 'none',
+        }, this.config.format);
+        this.formattedRaw = this.raw;
+        this.formattedWith = this.config.format;
+        this.display = result.display;
+        if (this.input.value !== result.display) {
+            this.input.value = result.display;
+            this.input.setSelectionRange(result.selection.start, result.selection.end, result.selection.direction);
+        }
+    }
+    onInput = (event) => {
+        // Composition updates remain entirely native until compositionend.
+        if (this.composing || event.isComposing)
+            return;
+        this.awaitingLabel = null;
+        this.formattedRaw = undefined;
+        this.raw = this.input.value;
+        this.display = this.raw;
+        this.resetValidation();
+        this.format('input');
+        this.queryChange.emit({ query: this.raw, display: this.display, trigger: 'keyboard' });
+        if (this.selected !== null)
+            this.commit(null, this.raw, null, 'clear', 'keyboard');
+        this.open();
+        if (this.config.validateOn === 'input')
+            void this.validate();
+        queueMicrotask(() => {
+            if (this.query !== undefined && this.query !== this.raw)
+                this.syncQuery();
+        });
+    };
+    commit(value, query, option, kind, trigger) {
+        this.awaitingLabel = null;
+        const queryChanged = query !== this.raw;
+        if (this.value === undefined)
+            this.selected = value;
+        if (this.query === undefined && queryChanged) {
+            this.raw = query;
+            this.display = query;
+            this.formattedRaw = undefined;
+        }
+        this.resetValidation();
+        const detail = { value, query, option, kind, trigger };
+        const proposal = { value, query };
+        this.proposedChange = proposal;
+        this.valueChange.emit(detail);
+        if (queryChanged)
+            this.queryChange.emit({ query, display: query, trigger });
+        if (kind === 'create')
+            this.createEntry.emit(detail);
+        if (kind === 'free-entry')
+            this.freeEntry.emit(detail);
+        if (kind === 'invalidation')
+            this.dependencyInvalidate.emit(detail);
+        // Settle after all owner notifications (including Vue's queued update).
+        // A retained prop does not fire a Stencil watcher, so rejection must be
+        // reconciled explicitly while the proposal still identifies an edit echo.
+        queueMicrotask(() => {
+            if (this.proposedChange !== proposal)
+                return;
+            if (this.value !== undefined && this.value !== proposal.value)
+                this.syncValue();
+            if (this.query !== undefined && this.query !== proposal.query) {
+                if (this.value === undefined) {
+                    this.selected = null;
+                    this.resetValidation();
+                }
+                this.syncQuery();
+            }
+            this.proposedChange = undefined;
+        });
+    }
+    choose(index, trigger) {
+        const option = this.rows[index];
+        if (option?.disabled)
+            return;
+        if (option)
+            this.commit(option.value, option.label, option, 'selection', trigger);
+        else if (this.canCreate && index === this.rows.length)
+            this.commit(null, this.raw, null, 'create', trigger);
+        else
+            return;
+        this.close();
+        this.input?.focus();
+        if (this.config.validateOn !== 'submit')
+            queueMicrotask(() => void this.validate());
+    }
+    move(key) {
+        const indices = this.rows.flatMap((row, index) => row.disabled ? [] : [index]);
+        if (this.canCreate)
+            indices.push(this.rows.length);
+        if (!indices.length)
+            return;
+        const current = indices.indexOf(this.active);
+        const next = key === 'Home' ? 0 : key === 'End' ? indices.length - 1
+            : key === 'ArrowDown' ? Math.min(current + 1, indices.length - 1)
+                : current < 0 ? indices.length - 1 : Math.max(0, current - 1);
+        this.active = indices[next];
+        requestAnimationFrame(() => this.host.shadowRoot?.getElementById(`option-${this.active}`)?.scrollIntoView({ block: 'nearest' }));
+    }
+    onKeydown = (event) => {
+        if (this.composing || event.isComposing || this.disabled || this.readOnly)
+            return;
+        if (event.key === 'Escape' && this.expanded) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.close();
+            return;
+        }
+        if (event.key === 'Tab') {
+            this.close();
+            return;
+        }
+        if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+            return;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            if (!this.expanded)
+                this.open('disclosure');
+            this.move(event.key);
+        }
+        else if ((event.key === 'Home' || event.key === 'End') && this.expanded && this.active >= 0) {
+            event.preventDefault();
+            this.move(event.key);
+        }
+        else if (event.key === 'Enter' && this.expanded) {
+            if (this.active >= 0) {
+                event.preventDefault();
+                this.choose(this.active, 'keyboard');
+            }
+            else if (this.config.allowFreeText) {
+                event.preventDefault();
+                this.commit(null, this.raw, null, 'free-entry', 'keyboard');
+                this.close();
+            }
+        }
+    };
+    onFocusOut = (event) => {
+        if (event.relatedTarget instanceof Node && this.host.shadowRoot?.contains(event.relatedTarget))
+            return;
+        this.close();
+        this.format('blur');
+        this.validation = { ...this.validation, touched: true };
+        if (this.config.allowFreeText && this.selected === null)
+            this.commit(null, this.raw, null, 'free-entry', 'keyboard');
+        if ((this.config.validateOn ?? 'blur') === 'blur')
+            void this.validate();
+    };
+    setValidation(result, touched = this.validation.touched) {
+        const blocking = result.issues.some(issue => issue.severity !== 'warning');
+        this.validation = { status: blocking ? 'error' : result.issues.length ? 'warning' : 'valid',
+            touched, dirty: this.raw !== this.initialRaw, ...result };
+        this.validationChange?.emit(this.validation);
+    }
+    /** Validate for submission. Caller submits only non-pending, non-error output. */
+    async validate() {
+        this.validationRun?.abort();
+        const run = new AbortController();
+        this.validationRun = run;
+        this.validation = { ...this.validation, status: 'pending', output: undefined };
+        this.validationChange.emit(this.validation);
+        try {
+            const result = await validateField({ raw: this.raw, value: this.selected, context: this.config.context, signal: run.signal }, this.config);
+            if (this.required && !this.raw.trim())
+                result.issues = [...result.issues, { message: 'A value is required.' }];
+            else if (this.raw && this.selected === null && !this.config.allowFreeText && !this.config.allowCreate)
+                result.issues = [...result.issues, { message: 'Choose a suggestion.' }];
+            if (result.issues.some(issue => issue.severity !== 'warning'))
+                result.output = undefined;
+            if (!run.signal.aborted && this.alive)
+                this.setValidation(result);
+        }
+        catch { /* Aborted work never becomes current field state. */ }
+        return this.validation;
+    }
+    render() {
+        const description = [this.helpOpen ? 'help-text' : '', this.validation.issues.length ? 'validation' : ''].filter(Boolean).join(' ') || undefined;
+        const status = this.loading ? 'Loading suggestions…' : this.lookupError || (this.expanded ? `${this.rows.length} suggestions available.` : '');
+        const groups = [...new Set(this.rows.map(row => row.group ?? ''))];
+        return h(Host, { key: '2378bfd8473852642fef21898f4a756eb3b092ba', "data-size": this.size, "data-validation": this.validation.status, onFocusout: this.onFocusOut }, h("label", { key: '7aba65aeb336d490ddeaf5db9bba9db8ab8b9dbb', htmlFor: "input", part: "label" }, this.label, this.required ? ' *' : ''), h("div", { key: 'ee87156259d0fe1e2e56c4b36667e8daf5e1e2c1', class: "field", part: "field", ref: element => this.field = element }, h("input", { key: '35c5b85ff9a4bcba9bddaf85ff1f118a94aa077b', id: "input", ref: element => this.input = element, role: "combobox", "aria-autocomplete": "list", "aria-expanded": String(this.expanded), "aria-controls": "listbox", "aria-activedescendant": this.expanded && this.active >= 0 ? `option-${this.active}` : undefined, "aria-describedby": description, "aria-invalid": String(this.validation.status === 'error'), "aria-busy": String(this.validation.status === 'pending'), value: this.display, placeholder: this.placeholder, name: this.name || undefined, disabled: this.disabled, readOnly: this.readOnly, required: this.required, autoComplete: "off", part: "input", onInput: this.onInput, onKeyDown: this.onKeydown, onCompositionstart: () => this.composing = true, onCompositionend: () => { this.composing = false; this.onInput(new InputEvent('input')); } }), this.clearable && h("button", { key: '74e4f44836b751ab5e9f794a39b480602e0c106d', type: "button", part: "affordance", "aria-label": `Clear ${this.label}`, disabled: this.disabled || this.readOnly, onClick: () => { this.commit(null, '', null, 'clear', 'pointer'); this.close(); this.input?.focus(); } }, "\u00D7"), this.help && h("button", { key: 'c870ced139fb22baa50a1795ab78f14c38647d34', id: "help", type: "button", part: "affordance", "aria-label": `Help for ${this.label}`, disabled: this.disabled }, h("span", { key: 'ba3dc5128c1941b21b53a5ba78a27017b3df5ec8', "aria-hidden": "true" }, "?")), this.disclosure && h("button", { key: 'eced588e3fa7958dd6185173faaef01219c30243', type: "button", part: "affordance", "aria-label": `Suggestions for ${this.label}`, "aria-controls": "listbox", "aria-expanded": String(this.expanded), disabled: this.disabled || this.readOnly, onClick: () => {
+                if (this.expanded)
+                    this.close();
+                else
+                    this.open('disclosure');
+                this.input?.focus();
+            } }, h("span", { key: '7cb9f7f2bb15246dcdd2348ea0ca656d1d0c8c33', "aria-hidden": "true" }, "\u2304"))), this.help && h("ui-tooltip", { key: 'b1b5d42ca457f9b951758bb5e816c8dbbcd1087d', id: "help-text", for: "help", toggleOnClick: true, onOpen: () => this.helpOpen = true, onClose: () => this.helpOpen = false }, this.help), h("div", { key: '9eca2df66c72917e6bfda21205c2a4ef97dd91d5', class: "popup", part: "popup", hidden: !this.expanded, ref: element => this.popup = element }, h("div", { key: '641e1f137c9cfef5d08ec99f6178e59487a20bf1', id: "listbox", role: "listbox", "aria-label": `${this.label} suggestions`, "aria-busy": String(this.loading) }, groups.map(group => h("div", { role: group ? 'group' : 'presentation', "aria-label": group || undefined }, group && h("div", { class: "group", part: "group" }, group), this.rows.map((row, index) => (row.group ?? '') !== group ? null : h("div", { id: `option-${index}`, role: "option", "aria-selected": String(this.selected === row.value), "aria-disabled": String(Boolean(row.disabled)), "data-active": this.active === index ? '' : undefined, part: "option", class: "option", onPointerDown: event => event.preventDefault(), onClick: () => this.choose(index, 'pointer') }, h("slot", { name: `option-${row.id}` }, h("span", { class: "primary", part: "option-primary" }, row.label), row.description && h("span", { class: "secondary", part: "option-secondary" }, row.description)))))), this.canCreate && h("div", { key: '38a3aa6b2ffae30e6f81e1f89d10c9966dd31b10', id: `option-${this.rows.length}`, role: "option", "aria-selected": "false", class: "option", part: "option", "data-active": this.active === this.rows.length ? '' : undefined, onPointerDown: event => event.preventDefault(), onClick: () => this.choose(this.rows.length, 'pointer') }, h("slot", { key: 'dd3e895ef363f6d30a0c25e4b5092a8feacc63e5', name: "create" }, "Create \u201C", this.raw, "\u201D"))), this.loading ? h("div", { class: "message" }, h("slot", { name: "loading" }, "Loading suggestions\u2026"))
+            : this.lookupError ? h("div", { class: "message" }, h("slot", { name: "error" }, this.lookupError))
+                : !this.rows.length && !this.canCreate ? h("div", { class: "message" }, h("slot", { name: "empty" }, "No suggestions.")) : null), h("div", { key: '9cf12a8fde7d9cfb9e2d2a77669ac4708c7fded6', id: "validation", class: "message", part: "validation", hidden: !this.validation.issues.length }, this.validation.issues.map(issue => h("div", null, issue.message))), h("div", { key: '1c7b1d3f658e500cbf5f5004a76a39511cc79c49', class: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" }, status, " ", this.validation.status === 'pending' ? 'Checking value…' : this.validation.issues.map(issue => issue.message).join(' ')));
+    }
+    static get watchers() { return {
+        "value": [{
+                "syncValue": 0
+            }],
+        "query": [{
+                "syncQuery": 0
+            }],
+        "disabled": [{
+                "syncDisabled": 0
+            }],
+        "readOnly": [{
+                "syncDisabled": 0
+            }],
+        "config": [{
+                "syncConfig": 0
+            }]
+    }; }
+};
+UICombobox.style = uiComboboxCss();
+
+export { UICombobox as ui_combobox };

package/dist/esm/ui-context-menu.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
-import { o as openOverlay, c as closeOverlay, r as requestTopOverlayClose } from './manager-PM9a74r7.js';
+import { r as registerInstance, g as getElement, h, H as Host } from './index-8BGiMGQ0.js';
+import { o as openOverlay, c as closeOverlay, r as requestTopOverlayClose } from './manager-C-0syqXZ.js';
 import { d as dispatchDetail } from './events-JwSoedEO.js';
 import { a as createAnchoredSurface } from './positioning-Bu0dmLBE.js';
 
@@ -218,7 +218,7 @@ const UIContextMenu = class {
         this.closeMenu('action', 'pointer');
     };
     render() {
-        return (h(Host, { key: '4db0d5b55ead41925aa682b1e383b5735b49bf56', "data-open": this.internalOpen ? '' : undefined, "data-focus-trigger": this.internalOpen ? this.focusTrigger : undefined, onKeyDown: this.onKeydown, onClick: this.onItemClick }, h("slot", { key: '462925d53db169c13e485789ae91e28b0abd3e40', name: "trigger" }), h("div", { key: 'cac8f3b11c4872d38e976f210ce9a43fd854b335', class: "menu", "data-open": this.internalOpen ? '' : undefined }, h("ui-menu", { key: 'ba50f74e11466da2240f7568479d5d10a614b394', open: this.internalOpen }, h("slot", { key: '1fcb45bf124e2377ac6c7fc236d2babf0d9e3bae' })))));
+        return (h(Host, { key: '641dd3aba6120cf4187f4503c64029eaf307dc4f', "data-open": this.internalOpen ? '' : undefined, "data-focus-trigger": this.internalOpen ? this.focusTrigger : undefined, onKeyDown: this.onKeydown, onClick: this.onItemClick }, h("slot", { key: '3f550349f9537b951b50a8c291f1951dd5a3b723', name: "trigger" }), h("div", { key: 'a612523f054986122638722340d8135c44a85399', class: "menu", "data-open": this.internalOpen ? '' : undefined }, h("ui-menu", { key: '0711879d09900183e938d8942abb8b9032812a5f', open: this.internalOpen }, h("slot", { key: '8e088dd20a48d8fb81126f2dd020abb886e86e22' })))));
     }
     static get watchers() { return {
         "open": [{

package/dist/esm/ui-dialog.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
-import { o as openOverlay, c as closeOverlay, r as requestTopOverlayClose } from './manager-PM9a74r7.js';
+import { r as registerInstance, g as getElement, h, H as Host } from './index-8BGiMGQ0.js';
+import { o as openOverlay, c as closeOverlay, r as requestTopOverlayClose } from './manager-C-0syqXZ.js';
 import { d as dispatchDetail } from './events-JwSoedEO.js';
 
 const uiDialogCss = () => `:host{display:block}:host:not([data-open]){display:none}:host dialog{--ui-dialog-duration:var(--ui-motion-base);--ui-dialog-viewport-gap:var(--ui-space-4, 1rem);position:fixed;inset:0;inline-size:min(     calc(100% - (var(--ui-dialog-viewport-gap) * 2)),     var(--ui-dialog-max-width, 440px)   );max-inline-size:none;max-block-size:calc(100dvh - (var(--ui-dialog-viewport-gap) * 2));margin:auto;padding:var(--ui-space-4);overflow:auto;background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-dialog);box-shadow:var(--ui-shadow-dialog);visibility:hidden;pointer-events:none;opacity:0;transform:scale(0.96);transition:opacity var(--ui-dialog-duration) var(--ui-motion-ease),     transform var(--ui-dialog-duration) var(--ui-motion-ease),     visibility var(--ui-dialog-duration),     display var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete,     overlay var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete}:host dialog[open]{visibility:visible;pointer-events:auto;opacity:1;transform:scale(1);animation:ui-dialog-enter var(--ui-dialog-duration) var(--ui-motion-ease)}@keyframes ui-dialog-enter{from{opacity:0;transform:scale(0.96)}}:host dialog::backdrop{background-color:transparent;transition:background-color var(--ui-dialog-duration) var(--ui-motion-ease),     display var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete,     overlay var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete}:host dialog[open]::backdrop{background-color:var(--ui-overlay-backdrop);animation:ui-dialog-backdrop-enter var(--ui-dialog-duration) var(--ui-motion-ease)}@keyframes ui-dialog-backdrop-enter{from{background-color:transparent}}`;
@@ -77,7 +77,7 @@ const UIDialog = class {
         }
     };
     render() {
-        return (h(Host, { key: 'c10f9063a1c2677caff3b8d1f26b37bf25978a77', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("dialog", { key: 'a7111bd363cab94f394cca526bf34ea8081e5228', ref: (el) => (this.dialogRef = el), open: this.internalOpen, "aria-label": this.label }, h("slot", { key: 'b0a9699fe0be09e331cfea81b6bbeaec11d48956' }))));
+        return (h(Host, { key: '6e88afd3a595ab0eed3d82a046ffb15e1e167cdb', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("dialog", { key: '420e4d8de66245a5818a1284adb23a536ebcd907', ref: (el) => (this.dialogRef = el), open: this.internalOpen, "aria-label": this.label }, h("slot", { key: '10604688504f013f79b7a6ed5f9ed36bc9c6b48b' }))));
     }
     static get watchers() { return {
         "open": [{

package/dist/esm/ui-disclosure.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
+import { r as registerInstance, g as getElement, h, H as Host } from './index-8BGiMGQ0.js';
 import { c as createId } from './id-hgBUJRDa.js';
 import { d as dispatchDetail, e as eventToTrigger, i as isActivationKey } from './events-JwSoedEO.js';
 
@@ -91,7 +91,7 @@ const UIDisclosure = class {
         this.setOpen(!this.internalOpen, { reason: 'action', trigger: 'keyboard' });
     };
     render() {
-        return (h(Host, { key: '7fbc83614f8e988a43d1baac0379a6dc8826b1d5' }, h("slot", { key: '6ef33ca7bce5c4d83ab65642f52a9d17febb794d' })));
+        return (h(Host, { key: '3905d2d78a2d3d4ef36b582ba0f426be8e5e0f5e' }, h("slot", { key: '18547ff56457b73319264bba981f994fb947dffb' })));
     }
     static get watchers() { return {
         "open": [{

package/dist/esm/ui-floating-action-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-CEeiinfk.js';
+import { r as registerInstance, h, H as Host } from './index-8BGiMGQ0.js';
 
 const uiFloatingActionButtonCss = () => `:host{position:fixed;inset-block-end:calc(     var(--ui-floating-action-button-bottom, var(--ui-space-6, 1.5rem)) + env(safe-area-inset-bottom)   );inset-inline-end:max(     var(--ui-floating-action-button-inline-end, var(--ui-space-5, 1.25rem)),     env(safe-area-inset-right)   );inline-size:var(--ui-floating-action-button-size, 56px);block-size:var(--ui-floating-action-button-size, 56px);display:inline-flex;z-index:var(--ui-floating-action-button-z-index, 100)}button{appearance:none;inline-size:100%;block-size:100%;border:none;border-radius:999px;margin:0;padding:0;display:inline-flex;align-items:center;justify-content:center;background:var(--ui-floating-action-button-bg, var(--ui-accent-solid));color:var(--ui-floating-action-button-color, var(--ui-text-on-accent));box-shadow:var(     --ui-floating-action-button-shadow,     0 4px 12px color-mix(in srgb, var(--ui-accent-solid) 40%, transparent)   );cursor:pointer;transition:background-color var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),     transform var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),     box-shadow var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease)}button:hover:enabled{background:var(--ui-floating-action-button-hover-bg, var(--ui-accent-hover));box-shadow:var(     --ui-floating-action-button-hover-shadow,     0 6px 16px color-mix(in srgb, var(--ui-accent-solid) 50%, transparent)   )}button:active:enabled{transform:scale(var(--ui-floating-action-button-active-scale, 0.94))}button:focus-visible{outline:2px solid var(--ui-focus-ring);outline-offset:2px}button:disabled,:host([disabled]){opacity:0.6;cursor:not-allowed}::slotted(svg){inline-size:var(--ui-floating-action-button-icon-size, 24px);block-size:var(--ui-floating-action-button-icon-size, 24px);flex-shrink:0}@media (min-width: 768px){:host([mobile-only]){display:none}}`;
 
@@ -10,7 +10,7 @@ const UIFloatingActionButton = class {
     mobileOnly = false;
     label = '';
     render() {
-        return (h(Host, { key: '6f67f3967cf8883005f6c56747db515db5ebe1d0', "data-disabled": this.disabled ? '' : undefined }, h("button", { key: 'deebb9261221c144b30bc3e41790158fc339cd14', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, h("slot", { key: '3b045b69a4508c84dd5b7c8b3df0e6f3eded1c13' }))));
+        return (h(Host, { key: 'c9a7d8c9b6d6608566b21621a73d939f372c830d', "data-disabled": this.disabled ? '' : undefined }, h("button", { key: '8eddccaf6be2f028bc02df967038843120045b84', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, h("slot", { key: '0ea12efb9cb8ecec06238066827a734fb3b01e1e' }))));
     }
 };
 UIFloatingActionButton.style = uiFloatingActionButtonCss();

package/dist/esm/ui-form-field.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
+import { r as registerInstance, g as getElement, h, H as Host } from './index-8BGiMGQ0.js';
 import { c as createId } from './id-hgBUJRDa.js';
 
-const uiFormFieldCss = () => `:host{display:grid;gap:var(--ui-space-2);color:var(--ui-text-primary)}::slotted(label){color:var(--ui-text-secondary);font-size:0.95rem}::slotted([data-slot='help']){color:var(--ui-text-muted);font-size:0.875rem}::slotted([data-slot='error']),::slotted([role='alert']){color:var(--ui-accent-active);font-size:0.875rem}`;
+const uiFormFieldCss = () => `:host{display:grid;gap:var(--ui-space-2);min-inline-size:0;align-content:start;color:var(--ui-text-primary)}::slotted(label){color:var(--ui-text-secondary);font-size:0.95rem}::slotted([data-slot='help']){min-block-size:var(--ui-form-field-help-min-block-size, 0);color:var(--ui-text-muted);font-size:0.875rem;line-height:var(--ui-line-height-md)}::slotted([data-slot='error']),::slotted([role='alert']){color:var(--ui-accent-active);font-size:0.875rem}`;
 
 const UIFormField = class {
     constructor(hostRef) {
@@ -49,7 +49,7 @@ const UIFormField = class {
         input.setAttribute('aria-invalid', this.invalid ? 'true' : 'false');
     }
     render() {
-        return (h(Host, { key: 'c0a01ac28a7dd0e0b285e4b9f9763ef536a83a2e', "data-invalid": this.invalid ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-required": this.required ? '' : undefined }, h("slot", { key: 'b09be4482299d866a0651393e269299dedb0cbf4' })));
+        return (h(Host, { key: 'cdd06c6b16ac56f3547e64e7888d8766243392db', "data-invalid": this.invalid ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-required": this.required ? '' : undefined }, h("slot", { key: '7d545673a3485f8beee01b13ab56185b98ba8856' })));
     }
 };
 UIFormField.style = uiFormFieldCss();