@threadlabs/looma 0.1.27 → 0.2.0

package/dist/cjs/ui-chip_2.cjs.entry.js

@@ -1,8 +1,10 @@
 'use strict';
 
 var index = require('./index-BHG9Rpil.js');
-var positioning = require('./positioning-i0WrCAdF.js');
 var manager = require('./manager-Ce25WRtl.js');
+var events = require('./events-TcQIzpNv.js');
+var controlledState = require('./controlled-state-BFya8rAX.js');
+var positioning = require('./positioning-D5q9DM-0.js');
 
 const uiChipCss = () => `:host{--ui-chip-surface:var(--ui-surface-subtle);--ui-chip-text:var(--ui-text-secondary);--ui-chip-border:var(--ui-border-default);--ui-chip-font-size:var(--ui-font-size-xs);--ui-chip-font-weight:var(--ui-font-normal);--ui-chip-line-height:var(--ui-line-height-tight);--ui-chip-padding-block:var(--ui-space-0-5);--ui-chip-padding-inline:var(--ui-space-2);--ui-chip-notch:var(--ui-space-1);display:inline-flex;min-width:0;max-width:100%}:host([data-size='sm']){--ui-chip-font-size:var(--ui-font-size-sm)}.chip__surface{display:inline-flex;align-items:center;box-sizing:border-box;min-width:0;max-width:100%;padding:var(--ui-chip-padding-block) var(--ui-chip-padding-inline);border:1px solid var(--ui-chip-border);background:var(--ui-chip-surface);color:var(--ui-chip-text) !important;font-family:var(--ui-font-family-sans) !important;font-size:var(--ui-chip-font-size) !important;font-weight:var(--ui-chip-font-weight) !important;line-height:var(--ui-chip-line-height) !important}.chip__label{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([data-appearance='pill']) .chip__surface{border-radius:var(--ui-radius-round)}:host([data-appearance='tag']) .chip__surface{border:0;padding-inline-end:calc(var(--ui-chip-padding-inline) + var(--ui-chip-notch));clip-path:polygon(0 0, calc(100% - var(--ui-chip-notch)) 0, 100% 50%, calc(100% - var(--ui-chip-notch)) 100%, 0 100%)}`;
 
@@ -20,547 +22,237 @@ const UIChip = class {
 };
 UIChip.style = uiChipCss();
 
-/** 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 uiTooltipCss = () => `:host{position:fixed;inset:auto;margin:0;display:inline-block;box-sizing:border-box;padding:0;border:0;border-radius:0;background:transparent;opacity:0;transform:translateY(4px);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}.tooltip__surface{box-sizing:border-box;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-elevated);color:var(--ui-text-primary);padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-size-sm);box-shadow:var(--ui-shadow-md)}:host(:popover-open){opacity:1;transform:translateY(0)}@starting-style{:host(:popover-open){opacity:0;transform:translateY(4px)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host{transition:none}}`;
 
-const UICombobox = class {
+const UITooltip = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.queryChange = index.createEvent(this, "query-change");
-        this.valueChange = index.createEvent(this, "value-change");
-        this.freeEntry = index.createEvent(this, "free-entry");
-        this.createEntry = index.createEvent(this, "create-entry");
-        this.dependencyInvalidate = index.createEvent(this, "dependency-invalidate");
-        this.validationChange = index.createEvent(this, "validation-change");
-        this.optionsChange = index.createEvent(this, "options-change");
+        this.opened = index.createEvent(this, "open");
+        this.closed = index.createEvent(this, "close");
     }
     get host() { return index.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';
-    /** Keep the native label accessible while allowing compact composed controls. */
-    labelVisibility = 'visible';
-    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;
+    for = '';
+    /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
+    open;
+    defaultOpen = false;
+    placement = 'top-start';
+    /** Pointer hover intent delay in milliseconds. Keyboard focus is immediate. */
+    showDelay = 500;
+    /** Pointer leave grace period in milliseconds. */
+    hideDelay = 100;
+    /** Click or tap pins the description; activate again to dismiss. */
+    toggleOnClick = false;
+    pinned = false;
+    focused = false;
+    opened;
+    closed;
+    internalOpen = false;
+    overlayId = `ui-tooltip-${Math.random().toString(36).slice(2, 11)}`;
+    trigger = null;
+    surface = null;
+    showTimer = null;
+    hideTimer = null;
+    syncFromProp() {
+        this.clearTimers();
+        if (controlledState.isControlled(this.open))
+            this.internalOpen = this.open;
+    }
+    resetSurface() {
+        this.syncTrigger();
+        this.setupSurface();
+        this.syncOverlay();
+    }
+    syncOverlay() {
+        if (this.internalOpen) {
+            this.surface?.show();
+            manager.openOverlay({
+                id: this.overlayId,
+                modal: false,
+                element: this.host,
+                relatedElements: this.trigger ? [this.trigger] : undefined,
+                dismissible: true,
+                requestClose: (reason, trigger) => this.handleRequestClose(reason, trigger),
+            });
+        }
+        else {
+            this.surface?.hide();
+            manager.closeOverlay(this.overlayId);
         }
-        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(); }
+    componentDidLoad() {
+        if (!this.host.id)
+            this.host.id = this.overlayId;
+        this.internalOpen = controlledState.controlledOrDefault(this.open, this.defaultOpen);
+        this.syncTrigger();
+        this.setupSurface();
+        this.host.addEventListener('pointerenter', this.onSurfaceEnter);
+        this.host.addEventListener('pointerleave', this.onTriggerLeave);
+        this.syncOverlay();
+    }
     componentDidUpdate() {
-        if (this.input && !this.composing && this.input.value !== this.display)
-            this.input.value = this.display;
-        if (this.expanded)
-            this.surface?.refresh();
+        this.syncTrigger();
     }
     disconnectedCallback() {
-        this.alive = false;
-        this.close();
-        this.validationRun?.abort();
+        this.clearTimers();
+        this.detachTriggerListeners();
         this.surface?.destroy();
-        this.surface = undefined;
+        this.surface = null;
+        this.host.removeEventListener('pointerenter', this.onSurfaceEnter);
+        this.host.removeEventListener('pointerleave', this.onTriggerLeave);
+        manager.closeOverlay(this.overlayId);
+    }
+    syncTrigger() {
+        const next = this.for
+            ? this.host.getRootNode().getElementById(this.for)
+            : this.host.previousElementSibling;
+        if (next === this.trigger)
+            return;
+        this.detachTriggerListeners();
+        this.trigger = next;
+        this.attachTriggerListeners();
+        this.surface?.setAnchor(next);
     }
     setupSurface() {
-        if (!this.surface && this.popup && this.field)
-            this.surface = positioning.createAnchoredSurface(this.popup, { anchor: this.field, placement: 'bottom-start' });
+        this.surface?.destroy();
+        this.surface = positioning.createAnchoredSurface(this.host, {
+            anchor: this.trigger,
+            placement: this.placement,
+        });
     }
-    syncValue() {
-        if (this.value === undefined)
+    attachTriggerListeners() {
+        this.detachTriggerListeners();
+        if (!this.trigger)
             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();
+        const ids = new Set((this.trigger.getAttribute('aria-describedby') || '').split(/\s+/).filter(Boolean));
+        ids.add(this.host.id);
+        this.trigger.setAttribute('aria-describedby', [...ids].join(' '));
+        this.trigger.addEventListener('click', this.onTriggerClick);
+        this.trigger.addEventListener('keydown', this.onTriggerKeydown);
+        this.trigger.addEventListener('pointerenter', this.onTriggerEnter);
+        this.trigger.addEventListener('pointerleave', this.onTriggerLeave);
+        this.trigger.addEventListener('focusin', this.onTriggerFocusIn);
+        this.trigger.addEventListener('focusout', this.onTriggerFocusOut);
     }
-    syncQuery() {
-        if (this.query === undefined || this.query === this.raw)
+    detachTriggerListeners() {
+        if (!this.trigger)
             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);
+        const ids = (this.trigger.getAttribute('aria-describedby') || '').split(/\s+/).filter(id => id && id !== this.host.id);
+        if (ids.length)
+            this.trigger.setAttribute('aria-describedby', ids.join(' '));
         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();
-        manager.closeOverlay(this.overlayId);
+            this.trigger.removeAttribute('aria-describedby');
+        this.trigger.removeEventListener('click', this.onTriggerClick);
+        this.trigger.removeEventListener('keydown', this.onTriggerKeydown);
+        this.trigger.removeEventListener('pointerenter', this.onTriggerEnter);
+        this.trigger.removeEventListener('pointerleave', this.onTriggerLeave);
+        this.trigger.removeEventListener('focusin', this.onTriggerFocusIn);
+        this.trigger.removeEventListener('focusout', this.onTriggerFocusOut);
     }
-    open(reason = 'input') {
-        if (this.disabled || this.readOnly)
+    clearShowTimer() {
+        if (this.showTimer === null)
             return;
-        this.expanded = true;
-        if (this.popup && this.field)
-            this.popup.style.minWidth = `${this.field.getBoundingClientRect().width}px`;
-        this.surface?.show();
-        manager.openOverlay({ id: this.overlayId, element: this.popup, relatedElements: [this.host], modal: false,
-            requestClose: () => this.close() });
-        this.search(reason);
+        clearTimeout(this.showTimer);
+        this.showTimer = null;
     }
-    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 ?? []);
+    clearHideTimer() {
+        if (this.hideTimer === null)
             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));
+        clearTimeout(this.hideTimer);
+        this.hideTimer = null;
     }
-    get canCreate() {
-        const candidates = this.config.options ? [...this.config.options, ...this.rows] : this.rows;
-        return Boolean(this.config.allowCreate && this.raw.trim() && !this.loading && !this.lookupError
-            && !candidates.some(row => row.label.toLocaleLowerCase() === this.raw.toLocaleLowerCase()));
+    clearTimers() {
+        this.clearShowTimer();
+        this.clearHideTimer();
     }
-    format(timing) {
-        if ((this.config.formatOn ?? 'blur') !== timing || !this.input)
+    setInteractionOpen(nextOpen, trigger) {
+        if (this.internalOpen === nextOpen)
             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;
+        if (!controlledState.isControlled(this.open))
+            this.internalOpen = nextOpen;
+        events.dispatchDetail(this.host, nextOpen ? 'open' : 'close', {
+            open: nextOpen,
+            reason: 'action',
+            trigger,
         });
     }
-    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
+    onSurfaceEnter = () => this.clearHideTimer();
+    onTriggerClick = (event) => {
+        if (!this.toggleOnClick)
             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();
+        this.clearTimers();
+        this.pinned = !this.pinned;
+        this.setInteractionOpen(this.pinned, event.detail === 0 ? 'keyboard' : 'pointer');
+    };
+    onTriggerKeydown = (event) => {
+        if (event.key === 'Escape')
+            this.clearTimers();
+    };
+    onTriggerEnter = (event) => {
+        if (event.pointerType === 'touch')
             return;
-        }
-        if (event.key === 'Tab') {
-            this.close();
+        this.clearHideTimer();
+        if (this.internalOpen || this.showTimer !== null)
             return;
-        }
-        if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+        this.showTimer = setTimeout(() => {
+            this.showTimer = null;
+            this.setInteractionOpen(true, 'pointer');
+        }, Math.max(0, this.showDelay));
+    };
+    onTriggerLeave = () => {
+        this.clearShowTimer();
+        if (this.focused || this.pinned || !this.internalOpen || this.hideTimer !== null)
             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();
-            }
-        }
+        this.hideTimer = setTimeout(() => {
+            this.hideTimer = null;
+            this.setInteractionOpen(false, 'pointer');
+        }, Math.max(0, this.hideDelay));
+    };
+    onTriggerFocusIn = () => {
+        this.focused = true;
+        this.clearTimers();
+        this.setInteractionOpen(true, 'keyboard');
     };
-    onFocusOut = (event) => {
-        if (event.relatedTarget instanceof Node && this.host.shadowRoot?.contains(event.relatedTarget))
+    onTriggerFocusOut = (e) => {
+        const related = e.relatedTarget;
+        if (related && this.host.contains(related))
             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();
+        this.focused = false;
+        this.pinned = false;
+        this.clearTimers();
+        this.setInteractionOpen(false, 'keyboard');
     };
-    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);
+    handleRequestClose(reason, trigger) {
+        if (reason === 'escape' || (reason === 'light-dismiss' && this.toggleOnClick)) {
+            this.pinned = false;
+            this.clearTimers();
+            if (!controlledState.isControlled(this.open))
+                this.internalOpen = false;
+            events.dispatchDetail(this.host, 'close', {
+                open: false,
+                reason,
+                trigger: trigger,
+            });
         }
-        catch { /* Aborted work never becomes current field state. */ }
-        return this.validation;
     }
-    /** Focus the native editing input from a composed control. */
-    async focusInput() { this.input?.focus(); }
     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 index.h(index.Host, { key: '1f00d9a83729d9c2147ced7e5006b928d1b5e51d', "data-size": this.size, "data-validation": this.validation.status, onFocusout: this.onFocusOut }, index.h("label", { key: '10353b147cc68ef1d67be0988849af1527fcf9ba', htmlFor: "input", part: "label", class: this.labelVisibility === 'sr-only' ? 'sr-only' : undefined }, this.label, this.required ? ' *' : ''), index.h("div", { key: '74bb53137d9343add37c22f3ac503eccf41807a9', class: "field", part: "field", ref: element => this.field = element, onClick: event => {
-                if (!event.composedPath().some(node => node instanceof HTMLButtonElement))
-                    this.input?.focus();
-            } }, index.h("slot", { key: '24c26916365013faa4a78bd4fe0d01f6c129c703', name: "start" }), index.h("input", { key: '835d19e66ec4a24c1a83f43bbc256fa2a9e3332f', 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 && index.h("button", { key: '326c1e24d3c417c3a72acd8234a53937b388ba79', 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 && index.h("button", { key: '6aeb62dc2935eb95670caa1d2028c0931dc362b2', id: "help", type: "button", part: "affordance", "aria-label": `Help for ${this.label}`, disabled: this.disabled }, index.h("span", { key: '9317be0fbb0c1bbb91061be69f38037a97a4c36b', "aria-hidden": "true" }, "?")), this.disclosure && index.h("button", { key: '1cd2a0ea92df1144ff2297fcf64df7b3d0f4713a', 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();
-            } }, index.h("span", { key: '0188b2d0e8cc7b7ff4d1a2175a0ff0b47d9c7d98', "aria-hidden": "true" }, "\u2304"))), this.help && index.h("ui-tooltip", { key: 'e09fd35274c3e1fa6e408850d72f7a07c2bb4baf', id: "help-text", for: "help", toggleOnClick: true, onOpen: () => this.helpOpen = true, onClose: () => this.helpOpen = false }, this.help), index.h("div", { key: 'ddf83a5944dd03fc7eb580b81fcf291e06c03601', class: "popup", part: "popup", hidden: !this.expanded, ref: element => this.popup = element }, index.h("div", { key: '1d73de1dabb6eaa95af12f2af88dac74e3f163ea', id: "listbox", role: "listbox", "aria-label": `${this.label} suggestions`, "aria-busy": String(this.loading) }, groups.map(group => index.h("div", { role: group ? 'group' : 'presentation', "aria-label": group || undefined }, group && index.h("div", { class: "group", part: "group" }, group), this.rows.map((row, index$1) => (row.group ?? '') !== group ? null : index.h("div", { id: `option-${index$1}`, role: "option", "aria-selected": String(this.selected === row.value), "aria-disabled": String(Boolean(row.disabled)), "data-active": this.active === index$1 ? '' : undefined, part: "option", class: "option", onPointerDown: event => event.preventDefault(), onClick: () => this.choose(index$1, 'pointer') }, index.h("slot", { name: `option-${row.id}` }, index.h("span", { class: "primary", part: "option-primary" }, row.label), row.description && index.h("span", { class: "secondary", part: "option-secondary" }, row.description)))))), this.canCreate && index.h("div", { key: 'a0aaafa2f4ff79efa954ed780f3a7bd81d4b2ecd', 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') }, index.h("slot", { key: '53a6706fc2c26097948b08cf0a7ee6040e37fe57', name: "create" }, "Create \u201C", this.raw, "\u201D"))), this.loading ? index.h("div", { class: "message" }, index.h("slot", { name: "loading" }, "Loading suggestions\u2026"))
-            : this.lookupError ? index.h("div", { class: "message" }, index.h("slot", { name: "error" }, this.lookupError))
-                : !this.rows.length && !this.canCreate ? index.h("div", { class: "message" }, index.h("slot", { name: "empty" }, "No suggestions.")) : null, index.h("slot", { key: '7997a0233a3c1a560b820c846645405ec4ceec1d', name: "footer" })), index.h("div", { key: '9143eb79141f5f3660a63f7a2471d1eecd8e9332', id: "validation", class: "message", part: "validation", hidden: !this.validation.issues.length }, this.validation.issues.map(issue => index.h("div", null, issue.message))), index.h("div", { key: '21f310613b058f528f8c4df329864fd8a2a94b55', 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(' ')));
+        return (index.h(index.Host, { key: 'fd4d81febd147b846aca66e94f25d56f14b171dc', role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? '' : undefined }, index.h("div", { key: 'd31ac8c0e087becd7e60459f2cd894a9b15e95fa', class: "tooltip__surface" }, index.h("slot", { key: '06e7aac9b6992a9cf0f92c9d356b97d18fb2da8b' }))));
     }
     static get watchers() { return {
-        "value": [{
-                "syncValue": 0
-            }],
-        "query": [{
-                "syncQuery": 0
+        "open": [{
+                "syncFromProp": 0
             }],
-        "disabled": [{
-                "syncDisabled": 0
+        "for": [{
+                "resetSurface": 0
             }],
-        "readOnly": [{
-                "syncDisabled": 0
+        "placement": [{
+                "resetSurface": 0
             }],
-        "config": [{
-                "syncConfig": 0
+        "internalOpen": [{
+                "syncOverlay": 0
             }]
     }; }
 };
-UICombobox.style = uiComboboxCss();
+UITooltip.style = uiTooltipCss();
 
 exports.ui_chip = UIChip;
-exports.ui_combobox = UICombobox;
+exports.ui_tooltip = UITooltip;