@threadlabs/looma 0.2.5 → 0.2.6

package/dist/ui-combobox.entry-25Z4MN7N.js

@@ -1,717 +0,0 @@
-import {
-  closeOverlay,
-  openOverlay
-} from "./chunk-TL4FIE7X.js";
-import {
-  createAnchoredSurface
-} from "./chunk-D5WRORG6.js";
-import {
-  Host,
-  createEvent,
-  getElement,
-  h,
-  registerInstance
-} from "./chunk-24OTMNIU.js";
-
-// dist/esm/ui-combobox.entry.js
-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") ? void 0 : output, issues };
-}
-var 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}}:host([multiple]) .field{flex-wrap:wrap;align-items:center;gap:var(--ui-space-1);min-block-size:var(--ui-multi-combobox-min-block-size, 2.5rem);padding:var(--ui-space-1)}:host([multiple]) input{flex:1 0 var(--ui-multi-combobox-input-min-inline-size, 5rem);width:auto;min-block-size:1.75rem;padding:var(--ui-space-0-5) var(--ui-space-1)}.items{display:contents}.item{appearance:none;display:inline-flex;min-inline-size:0;max-inline-size:min(100%, var(--ui-multi-combobox-item-max-inline-size, 12rem));overflow:hidden;padding:0;border:0;border-radius:var(--ui-radius-1);background:transparent;color:inherit;font:inherit;cursor:default}.item>slot{display:block;min-inline-size:0;max-inline-size:100%;overflow:hidden}.item>slot::slotted(*){min-inline-size:0;max-inline-size:100%}.item:focus-visible{outline:2px solid var(--ui-focus-ring);outline-offset:1px}.item:disabled{opacity:.6}`;
-var 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");
-    this.addItem = createEvent(this, "add-item");
-    this.removeItem = createEvent(this, "remove-item");
-    this.createItem = createEvent(this, "create-item");
-  }
-  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.
-   * With `multiple`, this is the controlled list of selected items instead.
-   */
-  value;
-  defaultValue;
-  /** Render selected values as removable chips before the cursor. `value` becomes the item list. */
-  multiple = false;
-  /** Characters that commit the current query and leave the input ready for the next item (multiple only). */
-  tokenSeparators = [];
-  /** 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;
-  /** Single mode: the ComboboxChange. Multiple mode: the full current item list on any change. */
-  valueChange;
-  freeEntry;
-  createEntry;
-  dependencyInvalidate;
-  validationChange;
-  /** Supplies the current result rows for framework-owned rich slots. */
-  optionsChange;
-  /** Multiple mode: a suggestion or exact-match token was committed as a new item. */
-  addItem;
-  /** Multiple mode: a selected item was removed via chip keyboard controls. */
-  removeItem;
-  /** Multiple mode: an unmatched query was submitted for creation. */
-  createItem;
-  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 = /* @__PURE__ */ new Map();
-  awaitingLabel = null;
-  proposedChange;
-  formattedRaw;
-  formattedWith;
-  /** Multiple mode: the controlled selected items (from `value`). Empty otherwise. */
-  get items() {
-    return this.multiple && Array.isArray(this.value) ? this.value : [];
-  }
-  get selectedValues() {
-    return new Set(this.items.map((item) => item.value));
-  }
-  componentWillLoad() {
-    if (this.multiple) {
-      this.selected = null;
-      this.raw = this.query ?? this.defaultQuery;
-      this.display = this.raw;
-      this.initialRaw = this.raw;
-      this.applyServerIssues();
-      return;
-    }
-    this.selected = this.value !== void 0 ? this.value : this.defaultValue ?? null;
-    this.raw = this.query ?? this.defaultQuery;
-    if (this.query === void 0 && !this.raw && this.selected !== null) {
-      this.raw = this.config.options?.find((row) => row.value === this.selected)?.label ?? this.selected;
-    }
-    if (this.query === void 0 && 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 = void 0;
-  }
-  setupSurface() {
-    if (!this.surface && this.popup && this.field)
-      this.surface = createAnchoredSurface(this.popup, { anchor: this.field, placement: "bottom-start" });
-  }
-  syncValue() {
-    if (this.multiple || this.value === void 0)
-      return;
-    this.selected = this.value;
-    if (this.query === void 0) {
-      const proposal = this.proposedChange;
-      const option = this.config.options?.find((row) => row.value === this.selected) ?? (this.selected === null ? void 0 : 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 = void 0;
-      }
-      this.awaitingLabel = !option && this.selected !== null ? this.selected : null;
-    }
-    this.resetValidation();
-  }
-  syncQuery() {
-    if (this.query === void 0 || this.query === this.raw)
-      return;
-    if (this.value === void 0 && this.proposedChange?.query !== this.query)
-      this.selected = null;
-    this.awaitingLabel = null;
-    this.formattedRaw = void 0;
-    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";
-      if (this.multiple) {
-        if (policy === "clear")
-          this.setMultiQuery("", "programmatic");
-      } else {
-        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 = void 0;
-    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 ? void 0 : this.knownOptions.get(this.selected);
-      if (this.query === void 0 && this.awaitingLabel === this.selected && selectedOption) {
-        this.raw = selectedOption.label;
-        this.display = this.raw;
-        this.awaitingLabel = null;
-        this.formattedRaw = void 0;
-        this.resetValidation();
-      }
-      const ids = /* @__PURE__ */ new Set();
-      const selected = this.multiple ? this.selectedValues : void 0;
-      this.rows = options.filter((option) => {
-        if (ids.has(option.id))
-          return false;
-        ids.add(option.id);
-        if (this.fullSet)
-          return true;
-        if (selected)
-          return !selected.has(option.value) && (config.filter ? config.filter(option, query, config.context) : option.label.toLocaleLowerCase().includes(query.toLocaleLowerCase()));
-        return config.filter ? config.filter(option, query, config.context) : config.provider ? true : option.label.toLocaleLowerCase().includes(query.toLocaleLowerCase());
-      });
-      const groups = /* @__PURE__ */ 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() {
-    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()));
-  }
-  format(timing) {
-    if ((this.config.formatOn ?? "blur") !== timing || !this.input)
-      return;
-    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) => {
-    if (this.composing || event.isComposing)
-      return;
-    this.awaitingLabel = null;
-    this.formattedRaw = void 0;
-    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 !== void 0 && this.query !== this.raw)
-        this.syncQuery();
-    });
-  };
-  commit(value, query, option, kind, trigger) {
-    this.awaitingLabel = null;
-    const queryChanged = query !== this.raw;
-    if (this.value === void 0)
-      this.selected = value;
-    if (this.query === void 0 && queryChanged) {
-      this.raw = query;
-      this.display = query;
-      this.formattedRaw = void 0;
-    }
-    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);
-    queueMicrotask(() => {
-      if (this.proposedChange !== proposal)
-        return;
-      if (this.value !== void 0 && this.value !== proposal.value)
-        this.syncValue();
-      if (this.query !== void 0 && this.query !== proposal.query) {
-        if (this.value === void 0) {
-          this.selected = null;
-          this.resetValidation();
-        }
-        this.syncQuery();
-      }
-      this.proposedChange = void 0;
-    });
-  }
-  choose(index, trigger) {
-    const option = this.rows[index];
-    if (option?.disabled)
-      return;
-    if (this.multiple) {
-      if (option)
-        this.addSelectedItem(option, trigger);
-      else if (this.canCreate && index === this.rows.length)
-        this.createSelectedItem(this.raw.trim(), trigger);
-      else
-        return;
-      this.setMultiQuery("", trigger);
-      this.close();
-      this.input?.focus();
-      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());
-  }
-  // --- Multiple-mode helpers ---------------------------------------------
-  emitItems(items) {
-    this.valueChange.emit(items);
-  }
-  setMultiQuery(query, trigger) {
-    if (this.query === void 0) {
-      this.raw = query;
-      this.display = query;
-      this.formattedRaw = void 0;
-    }
-    if (this.input)
-      this.input.value = query;
-    this.queryChange.emit({ query, display: query, trigger });
-  }
-  addSelectedItem(option, trigger) {
-    this.addItem.emit({ item: option, index: this.items.length, trigger });
-    this.emitItems([...this.items, option]);
-  }
-  createSelectedItem(query, trigger) {
-    if (!query)
-      return;
-    this.createItem.emit({ query, trigger });
-  }
-  commitQuery(trigger) {
-    const query = this.raw.trim();
-    if (!query)
-      return;
-    const normalized = query.toLocaleLowerCase();
-    const option = this.rows.find((row) => row.label.trim().toLocaleLowerCase() === normalized);
-    if (option) {
-      this.setMultiQuery("", trigger);
-      this.addSelectedItem(option, trigger);
-    } else if (this.config.allowCreate) {
-      this.setMultiQuery("", trigger);
-      this.createSelectedItem(query, trigger);
-    }
-  }
-  removeItemAt(index, trigger) {
-    const item = this.items[index];
-    if (!item || item.disabled || this.disabled || this.readOnly)
-      return;
-    this.removeItem.emit({ item, index, trigger });
-    this.emitItems(this.items.filter((_, position) => position !== index));
-    requestAnimationFrame(() => {
-      const buttons = this.host.shadowRoot?.querySelectorAll('[part="item"]') ?? [];
-      const next = buttons[Math.min(index, buttons.length - 1)] ?? buttons[index - 1];
-      if (next && next.dataset.value !== item.value)
-        next.focus();
-      else
-        void this.focusInput();
-    });
-  }
-  focusItem(index) {
-    this.host.shadowRoot?.querySelectorAll('[part="item"]')[index]?.focus();
-  }
-  onItemKeyDown = (event, index) => {
-    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
-      return;
-    if (event.key === "ArrowLeft") {
-      event.preventDefault();
-      event.stopPropagation();
-      this.focusItem(Math.max(0, index - 1));
-    } else if (event.key === "ArrowRight") {
-      event.preventDefault();
-      event.stopPropagation();
-      if (index === this.items.length - 1)
-        void this.focusInput();
-      else
-        this.focusItem(index + 1);
-    } else if (event.key === "Backspace" || event.key === "Delete") {
-      event.preventDefault();
-      event.stopPropagation();
-      this.removeItemAt(index, "keyboard");
-    }
-  };
-  handleMultipleKeydown(event) {
-    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
-      return false;
-    if (this.tokenSeparators.includes(event.key)) {
-      event.preventDefault();
-      event.stopPropagation();
-      this.commitQuery("keyboard");
-      return true;
-    }
-    if (this.raw || (this.input?.selectionStart ?? 0) > 0)
-      return false;
-    if (event.key === "ArrowLeft" && this.items.length) {
-      event.preventDefault();
-      this.focusItem(this.items.length - 1);
-      return true;
-    }
-    if (event.key === "Backspace" && this.items.length) {
-      event.preventDefault();
-      this.removeItemAt(this.items.length - 1, "keyboard");
-      return true;
-    }
-    return false;
-  }
-  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 (this.multiple && this.handleMultipleKeydown(event))
-      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.multiple && 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: void 0 };
-    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 = void 0;
-      if (!run.signal.aborted && this.alive)
-        this.setValidation(result);
-    } catch {
-    }
-    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(" ") || void 0;
-    const status = this.loading ? "Loading suggestions\u2026" : this.lookupError || (this.expanded ? `${this.rows.length} suggestions available.` : "");
-    const groups = [...new Set(this.rows.map((row) => row.group ?? ""))];
-    return h(Host, { key: "fc4c0192d3be88d8c0199ae1bcca44232bd22351", "data-size": this.size, "data-validation": this.validation.status, onFocusout: this.onFocusOut }, h("label", { key: "bdd0d244c6ef448978fa77aac3a2d3b71d713553", htmlFor: "input", part: "label", class: this.labelVisibility === "sr-only" ? "sr-only" : void 0 }, this.label, this.required ? " *" : ""), h("div", { key: "afb3972aab52171a3b25ede863c31059e56f5d91", class: "field", part: "field", ref: (element) => this.field = element, onClick: (event) => {
-      if (!event.composedPath().some((node) => node instanceof HTMLButtonElement))
-        this.input?.focus();
-    } }, h("slot", { key: "65e4e201d6c11cd2638e392e1298662de7ba4d57", name: "start" }), this.multiple && h("div", { key: "b80b5b85fa0540139b9756fcc494aef9df245c15", class: "items", role: "group", "aria-label": `Selected ${this.label}` }, this.items.map((item, index) => h("button", { type: "button", part: "item", class: "item", "data-value": item.value, tabIndex: -1, disabled: this.disabled || this.readOnly || item.disabled, "aria-label": `${item.label}, press Delete or Backspace to remove`, onKeyDown: (event) => this.onItemKeyDown(event, index) }, h("slot", { name: `item-${item.id}` }, h("ui-chip", { appearance: "pill" }, item.label))))), h("input", { key: "64f76055ae412cc87119270eec10c69000a72563", 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}` : void 0, "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 || void 0, 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: "eac4c18dadcea92065af4ecd871d925ef1248d47", 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();
-    } }, "\xD7"), this.help && h("button", { key: "9a559d49a495ead3dbf159f170c594e0aaa0d0d0", id: "help", type: "button", part: "affordance", "aria-label": `Help for ${this.label}`, disabled: this.disabled }, h("span", { key: "73940e568b976f85399d5baa5e247a4a606d0039", "aria-hidden": "true" }, "?")), this.disclosure && h("button", { key: "30dd6746ffb121888a4c4fb6df54720906badf78", 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: "7d3b10a765ee0a6c40d7b0b49e98c676a5837944", "aria-hidden": "true" }, "\u2304"))), this.help && h("ui-tooltip", { key: "efff00f45dc281b727789eb2aa84ff772bb5c925", id: "help-text", for: "help", toggleOnClick: true, onOpen: () => this.helpOpen = true, onClose: () => this.helpOpen = false }, this.help), h("div", { key: "770bc12b873026b571bd3ae2a80416e8af52b8d4", class: "popup", part: "popup", hidden: !this.expanded, ref: (element) => this.popup = element }, h("div", { key: "ed48c8dd8b672a577d567ca5e795b8a53fde2761", 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 || void 0 }, 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 ? "" : void 0, 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: "43215f449bbccde407ef818cee473f69870f6f8c", id: `option-${this.rows.length}`, role: "option", "aria-selected": "false", class: "option", part: "option", "data-active": this.active === this.rows.length ? "" : void 0, onPointerDown: (event) => event.preventDefault(), onClick: () => this.choose(this.rows.length, "pointer") }, h("slot", { key: "3ff70ff3ab8e24afc369a26e8474e7d1220ed6eb", 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("slot", { key: "8b1fbd4f5c372393d294d8c218ae1785e6b0334f", name: "footer" })), h("div", { key: "18e68687f04e35535edee363683523ce6bbb0291", id: "validation", class: "message", part: "validation", hidden: !this.validation.issues.length }, this.validation.issues.map((issue) => h("div", null, issue.message))), h("div", { key: "e4a7db06abcfaf08b8ac592107531a13ef3a5897", class: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" }, status, " ", this.validation.status === "pending" ? "Checking value\u2026" : 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
-};