@threadlabs/looma 0.1.21 → 0.1.23

package/dist/{ui-badge.entry-DKBPJ7G7.js → ui-badge.entry-MZFYNBMJ.js}

@@ -2,7 +2,7 @@ import {
   Host,
   h,
   registerInstance
-} from "./chunk-FSGGPFID.js";
+} from "./chunk-GDMQKT5F.js";
 
 // dist/esm/ui-badge.entry.js
 var uiBadgeCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ui-border-default);border-radius:999px;background:var(--ui-surface-muted);color:var(--ui-text-secondary);font:inherit;font-size:0.75rem;line-height:1;padding:0.25em 0.6em;white-space:nowrap}:host([data-tone='accent']){background:var(--ui-accent-solid);border-color:var(--ui-accent-solid);color:var(--ui-text-on-accent)}:host([data-tone='danger']){background:var(--ui-danger-solid);border-color:var(--ui-danger-solid);color:var(--ui-text-on-accent)}:host([data-tone='success']){background:var(--ui-success-solid);border-color:var(--ui-success-solid);color:var(--ui-text-on-accent)}:host([data-tone='warning']){background:var(--ui-warning-solid);border-color:var(--ui-warning-solid);color:var(--ui-text-primary)}:host([data-tone='info']){background:var(--ui-info-solid);border-color:var(--ui-info-solid);color:var(--ui-text-on-accent)}:host([data-variant='subtle'][data-tone='accent']){background:var(--ui-accent-soft);border-color:var(--ui-accent-soft);color:var(--ui-accent-solid)}:host([data-variant='subtle'][data-tone='danger']){background:var(--ui-danger-soft);border-color:var(--ui-danger-soft);color:var(--ui-danger-solid)}:host([data-variant='subtle'][data-tone='success']){background:var(--ui-success-soft);border-color:var(--ui-success-soft);color:var(--ui-success-solid)}:host([data-variant='subtle'][data-tone='warning']){background:var(--ui-warning-soft);border-color:var(--ui-warning-soft);color:var(--ui-warning-solid)}:host([data-variant='subtle'][data-tone='info']){background:var(--ui-info-soft);border-color:var(--ui-info-soft);color:var(--ui-info-solid)}`;

package/dist/ui-button.entry-7UXMUGHN.js

@@ -0,0 +1,80 @@
+import {
+  isActivationKey
+} from "./chunk-UL7UIUJZ.js";
+import {
+  Host,
+  getElement,
+  h,
+  registerInstance
+} from "./chunk-GDMQKT5F.js";
+
+// dist/esm/ui-button.entry.js
+var uiButtonCss = () => `:host{display:inline-flex;vertical-align:middle;color:var(--ui-action-secondary-text, var(--ui-text-primary))}:host([data-variant='solid']){color:var(--ui-action-primary-text, var(--ui-text-on-accent))}:host([data-variant='outline']) ::slotted(button),::slotted(button){appearance:none;min-block-size:var(--ui-button-min-block-size, 2.5rem);border:1px solid var(--ui-control-border, var(--ui-border-default));border-radius:var(--ui-button-radius, var(--ui-radius-2));background:var(--ui-action-secondary-surface, var(--ui-surface-default));color:inherit;font:inherit;font-weight:var(--ui-font-medium, 500);line-height:var(--ui-line-height-tight);padding:var(--ui-space-2) var(--ui-space-3);cursor:pointer;transition:background-color var(--ui-motion-fast) var(--ui-motion-ease),     border-color var(--ui-motion-fast) var(--ui-motion-ease),     color var(--ui-motion-fast) var(--ui-motion-ease),     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease);margin:0}:host([data-size='sm']) ::slotted(button){padding:var(--ui-space-1) var(--ui-space-2);font-size:0.875rem}:host([data-size='lg']) ::slotted(button){min-block-size:var(--ui-control-min-block-size, 2.75rem);padding:var(--ui-space-3) var(--ui-space-4);font-size:1rem}::slotted(button:hover:enabled){background:var(--ui-action-secondary-surface-hover, var(--ui-surface-muted));border-color:var(--ui-control-border-hover, var(--ui-border-strong))}::slotted(button:active:enabled){background:var(--ui-surface-subtle)}:host([data-variant='solid']) ::slotted(button){border-color:var(--ui-action-primary-surface, var(--ui-accent-solid));background:var(--ui-action-primary-surface, var(--ui-accent-solid));color:var(--ui-action-primary-text, var(--ui-text-on-accent));box-shadow:var(--ui-button-solid-shadow, inset 0 1px rgb(255 255 255 / 0.16), var(--ui-shadow-xs))}:host([data-variant='solid']) ::slotted(button:hover:enabled){background:var(--ui-action-primary-surface-hover, var(--ui-accent-hover));border-color:var(--ui-action-primary-surface-hover, var(--ui-accent-hover));box-shadow:var(--ui-shadow-sm);transform:translateY(-1px)}:host([data-variant='solid']) ::slotted(button:active:enabled){background:var(--ui-action-primary-surface-active, var(--ui-accent-active));border-color:var(--ui-action-primary-surface-active, var(--ui-accent-active));box-shadow:none;transform:translateY(0)}:host([data-variant='destructive']) ::slotted(button){border-color:var(--ui-danger-solid);background:var(--ui-danger-solid);color:var(--ui-text-on-accent);box-shadow:var(--ui-button-destructive-shadow, inset 0 1px rgb(255 255 255 / 0.14), var(--ui-shadow-xs))}:host([data-variant='destructive']) ::slotted(button:hover:enabled){background:var(--ui-danger-hover);border-color:var(--ui-danger-hover);box-shadow:var(--ui-shadow-sm);transform:translateY(-1px)}:host([data-variant='destructive']) ::slotted(button:active:enabled){box-shadow:none;transform:translateY(0)}:host([data-variant='ghost']) ::slotted(button){border-color:transparent;background:transparent}:host([data-variant='ghost']) ::slotted(button:hover:enabled){background:var(--ui-surface-muted);border-color:transparent}:host([data-variant='ghost']) ::slotted(button:active:enabled){background:var(--ui-surface-subtle);border-color:transparent}::slotted(button:focus-visible){outline:2px solid var(--ui-focus-ring);outline-offset:2px}:host([data-disabled='true']),:host([disabled]){opacity:0.6;cursor:not-allowed}::slotted(button:disabled){cursor:not-allowed}`;
+var UIButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  get host() {
+    return getElement(this);
+  }
+  variant = "outline";
+  size;
+  disabled = false;
+  slotRef;
+  syncToButton() {
+    const btn = this.getButton();
+    if (!btn)
+      return;
+    if (this.size) {
+      this.host.dataset.size = this.size;
+    } else {
+      delete this.host.dataset.size;
+    }
+    if (this.disabled) {
+      this.host.dataset.disabled = "true";
+    } else {
+      delete this.host.dataset.disabled;
+    }
+    this.host.dataset.variant = this.variant;
+    btn.disabled = this.disabled;
+  }
+  componentDidLoad() {
+    this.slotRef?.addEventListener("slotchange", () => this.syncToButton());
+    this.syncToButton();
+  }
+  componentDidUpdate() {
+    this.syncToButton();
+  }
+  getButton() {
+    const slot = this.host.shadowRoot?.querySelector("slot");
+    const nodes = slot?.assignedElements() ?? Array.from(this.host.children);
+    return nodes.find((el) => el.tagName === "BUTTON") ?? null;
+  }
+  onKeydown = (e) => {
+    const btn = this.getButton();
+    if (btn || this.disabled || !isActivationKey(e))
+      return;
+    e.preventDefault();
+    this.host.click();
+  };
+  render() {
+    return h(Host, { key: "9c8d479fe7f1873a447048944513648bac132d52", "data-size": this.size || void 0, "data-variant": this.variant, "data-disabled": this.disabled ? "true" : void 0, onKeyDown: this.onKeydown }, h("slot", { key: "741f48e7efd42262834992c07c4685d3e929d91c", ref: (el) => this.slotRef = el }));
+  }
+  static get watchers() {
+    return {
+      "variant": [{
+        "syncToButton": 0
+      }],
+      "size": [{
+        "syncToButton": 0
+      }],
+      "disabled": [{
+        "syncToButton": 0
+      }]
+    };
+  }
+};
+UIButton.style = uiButtonCss();
+export {
+  UIButton as ui_button
+};

package/dist/{ui-checkbox.entry-QJTO2U6Z.js → ui-checkbox.entry-DMZJB3RE.js}

@@ -7,7 +7,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-FSGGPFID.js";
+} from "./chunk-GDMQKT5F.js";
 
 // dist/esm/ui-checkbox.entry.js
 var uiCheckboxCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ui-space-2);color:var(--ui-text-primary)}:host([aria-disabled='true']),:host([data-disabled='true']){opacity:0.6;cursor:not-allowed}::slotted(input[type='checkbox']){accent-color:var(--ui-accent-solid);width:1.125em;height:1.125em;cursor:pointer}::slotted(input[type='checkbox']:focus-visible){outline:2px solid var(--ui-accent-solid);outline-offset:2px}`;

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

@@ -0,0 +1,553 @@
+import {
+  closeOverlay,
+  openOverlay
+} from "./chunk-TL4FIE7X.js";
+import {
+  createAnchoredSurface
+} from "./chunk-YHXJC5M5.js";
+import {
+  Host,
+  createEvent,
+  getElement,
+  h,
+  registerInstance
+} from "./chunk-GDMQKT5F.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}}`;
+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");
+  }
+  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 = /* @__PURE__ */ new Map();
+  awaitingLabel = null;
+  proposedChange;
+  formattedRaw;
+  formattedWith;
+  componentWillLoad() {
+    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.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";
+      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();
+      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 = /* @__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() {
+    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;
+    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 (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: 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;
+  }
+  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: "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}` : 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: "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();
+    } }, "\xD7"), 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 || 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: "38a3aa6b2ffae30e6f81e1f89d10c9966dd31b10", 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: "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\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
+};