agnosticui-core 2.0.0-alpha.2

package/dist/components/Combobox/core/_Combobox.js

@@ -0,0 +1,976 @@
+import { LitElement as _, css as x, nothing as h, html as l } from "lit";
+import { n as a } from "../../../property-CemaeiRl.js";
+import { r as b } from "../../../state-CovhUvdr.js";
+import { e as u } from "../../../query-BykXNUlT.js";
+import { createFormControlIds as y, buildAriaDescribedBy as w, isHorizontalLabel as f } from "../../../shared/form-control-utils.js";
+import { formControlStyles as O } from "../../../shared/form-control-styles.js";
+import "../../shared/CloseButton/CloseButton.js";
+import "../../Checkbox/core/Checkbox.js";
+import "../../Tag/core/Tag.js";
+var I = Object.defineProperty, k = Object.getOwnPropertyDescriptor, s = (m, e, t, i) => {
+  for (var r = i > 1 ? void 0 : i ? k(e, t) : e, n = m.length - 1, c; n >= 0; n--)
+    (c = m[n]) && (r = (i ? c(e, t, r) : c(r)) || r);
+  return i && r && I(e, t, r), r;
+};
+const g = class g extends _ {
+  constructor() {
+    super(), this._value = "", this.labelPosition = "top", this._open = !1, this._searchTerm = "", this._filteredOptions = [], this._activeIndex = -1, this._selectedOptions = [], this._displayLabel = "", this._comboboxId = "", this._listboxId = "", this._labelId = "", this._helpTextId = "", this._errorTextId = "", this._justSelected = !1, this._isDefaultValueInitialized = !1, this.options = [], this.placeholder = "", this.labelHidden = !1, this.noLabel = !1, this.ariaLabel = null, this.id = "", this.autocomplete = "list", this.filterMode = "startsWith", this.clearable = !1, this.disabled = !1, this.readonly = !1, this.required = !1, this.invalid = !1, this.size = "default", this.variant = "default", this.maxVisibleOptions = 10, this.closeOnSelect = !0, this.multiple = !1, this.maxOptionsVisible = 3, this.loading = !1, this.loadingText = "Loading...", this.noResultsText = "No results found";
+  }
+  get value() {
+    return this._value;
+  }
+  set value(e) {
+    const t = this._value;
+    this.multiple ? this._value = Array.isArray(e) ? e : e ? e.split(" ") : [] : this._value = Array.isArray(e) ? e.join(" ") : e, this.requestUpdate("value", t);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const e = y("combobox");
+    this._comboboxId = this.id || e.inputId, this._listboxId = `${this._comboboxId}-listbox`, this._labelId = e.labelId, this._helpTextId = e.helperId, this._errorTextId = e.errorId, this._clickOutsideHandler = (t) => {
+      if (!this._open) return;
+      t.composedPath().includes(this) || this.close();
+    }, document.addEventListener("click", this._clickOutsideHandler);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._clickOutsideHandler && document.removeEventListener("click", this._clickOutsideHandler);
+  }
+  willUpdate(e) {
+    if (super.willUpdate(e), !this._isDefaultValueInitialized && this.defaultValue && this.options.length > 0) {
+      const t = Array.isArray(this.defaultValue) ? this.defaultValue : [this.defaultValue];
+      this._selectedOptions = this.options.filter((i) => t.includes(i.value)), this._selectionChanged(), this._isDefaultValueInitialized = !0;
+      return;
+    }
+    if (e.has("value") && (this._isDefaultValueInitialized || !this.defaultValue)) {
+      const t = this.value, i = Array.isArray(t) ? t : t ? [t] : [];
+      this._selectedOptions = this.options.filter((r) => i.includes(r.value)), this._selectionChanged();
+    }
+    e.has("errorMessage") && (this.invalid = !!this.errorMessage);
+  }
+  // Public methods
+  focus() {
+    this._inputElement?.focus();
+  }
+  blur() {
+    this._inputElement?.blur();
+  }
+  open() {
+    if (this.disabled || this.readonly || this._open) return;
+    this._open = !0, this._filterOptions(), this.setAttribute("open", "");
+    const e = new CustomEvent("open", {
+      detail: { open: !0 },
+      bubbles: !0,
+      composed: !0
+    });
+    this.dispatchEvent(e), this.onOpen?.(e), this._inputElement?.setAttribute("aria-expanded", "true");
+  }
+  close() {
+    if (!this._open) return;
+    if (this._open = !1, this._activeIndex = -1, this.multiple)
+      this._searchTerm = this._displayLabel;
+    else if (!this.options.some((i) => i.label === this._searchTerm)) {
+      const i = this._selectedOptions[0];
+      i ? this._searchTerm = i.label : this._searchTerm = "";
+    }
+    this.removeAttribute("open");
+    const e = new CustomEvent("close", {
+      detail: { open: !1 },
+      bubbles: !0,
+      composed: !0
+    });
+    this.dispatchEvent(e), this.onClose?.(e), this._inputElement?.setAttribute("aria-expanded", "false"), this._inputElement?.removeAttribute("aria-activedescendant");
+  }
+  toggle() {
+    this._open ? this.close() : this.open();
+  }
+  selectOption(e) {
+    let t;
+    if (typeof e == "string") {
+      if (t = this.options.find((n) => n.value === e), !t) return;
+    } else
+      t = e;
+    if (t.disabled) return;
+    this.multiple ? (this._selectedOptions.findIndex((c) => c.value === t.value) > -1 ? this._selectedOptions = this._selectedOptions.filter((c) => c.value !== t.value) : this._selectedOptions = [...this._selectedOptions, t], this._selectionChanged()) : (this._selectedOptions = [t], this._selectionChanged(), this.closeOnSelect && this.close()), this._inputElement && (this._inputElement.value = this._searchTerm);
+    const i = new CustomEvent("select", {
+      detail: {
+        option: t,
+        value: t.value
+      },
+      bubbles: !0,
+      composed: !0
+    });
+    this.dispatchEvent(i), this.onSelect?.(i);
+    const r = new CustomEvent("change", {
+      detail: {
+        value: this.value,
+        // Use the updated value
+        option: t
+      },
+      bubbles: !0,
+      composed: !0
+    });
+    this.dispatchEvent(r), this.onChange?.(r), this._justSelected = !0, this._inputElement?.focus(), requestAnimationFrame(() => {
+      const n = this._inputElement;
+      if (n) {
+        const c = n.value.length;
+        n.setSelectionRange(c, c);
+      }
+    }), setTimeout(() => {
+      this._justSelected = !1;
+    }, 100);
+  }
+  clearSelection() {
+    this._selectedOptions = [], this._selectionChanged(), this._activeIndex = -1;
+    const e = new CustomEvent("change", {
+      detail: {
+        value: this.value,
+        option: null
+      },
+      bubbles: !0,
+      composed: !0
+    });
+    this.dispatchEvent(e), this.onChange?.(e);
+  }
+  // Private methods
+  _selectionChanged() {
+    if (this.multiple)
+      this.value = this._selectedOptions.map((e) => e.value), this._searchTerm = "";
+    else {
+      const e = this._selectedOptions[0];
+      this.value = e?.value ?? "", this._displayLabel = e?.label ?? "", this._searchTerm = this._displayLabel;
+    }
+  }
+  _renderSelectedTags() {
+    if (!this.multiple || this._selectedOptions.length === 0)
+      return h;
+    const e = this._selectedOptions.slice(0, this.maxOptionsVisible), t = this._selectedOptions.length - this.maxOptionsVisible;
+    return l`
+      <div class="combobox-tags-wrapper" part="ag-combobox-tags-wrapper">
+        ${e.map((i) => l`
+          <ag-tag
+            removable
+            .value=${i.value}
+            @tag-remove=${() => this._handleTagRemove(i)}
+          >
+            ${i.label}
+          </ag-tag>
+        `)}
+        ${t > 0 ? l`
+          <ag-tag>+${t}</ag-tag>
+        ` : h}
+      </div>
+    `;
+  }
+  _handleTagRemove(e) {
+    this._selectedOptions = this._selectedOptions.filter((t) => t.value !== e.value), this._selectionChanged(), this._inputElement?.focus();
+  }
+  _filterOptions() {
+    const e = this._searchTerm.trim();
+    if (!this.multiple && this._selectedOptions.length > 0 && e === this._selectedOptions[0].label) {
+      this._filteredOptions = this.options.slice(0, this.maxVisibleOptions), this._activeIndex !== -1 && (this._activeIndex = this.options.findIndex((r) => r.value === this._selectedOptions[0]?.value));
+      return;
+    }
+    if (!e || this.filterMode === "none") {
+      this._filteredOptions = this.options.slice(0, this.maxVisibleOptions);
+      return;
+    }
+    let t;
+    switch (this.filterMode) {
+      case "startsWith":
+        t = this._filterStartsWith(this.options, e);
+        break;
+      case "contains":
+        t = this._filterContains(this.options, e);
+        break;
+      default:
+        t = this.options;
+    }
+    this._filteredOptions = t.slice(0, this.maxVisibleOptions), this._filteredOptions.length > 0 ? (this._activeIndex = 0, this._updateAriaActivedescendant(), this._announceOption(this._filteredOptions[0])) : (this._activeIndex = -1, this._announceNoResults());
+    const i = new CustomEvent("search", {
+      detail: { searchTerm: e },
+      bubbles: !0,
+      composed: !0
+    });
+    this.dispatchEvent(i), this.onSearch?.(i);
+  }
+  _filterStartsWith(e, t) {
+    const i = t.toLowerCase();
+    return e.filter((r) => r.label.toLowerCase().startsWith(i));
+  }
+  _filterContains(e, t) {
+    const i = t.toLowerCase();
+    return e.filter((r) => r.label.toLowerCase().includes(i));
+  }
+  _handleInputChange(e) {
+    const t = e.target.value;
+    this._justSelected || t !== this._searchTerm && (this._searchTerm = t, this.multiple || (this._selectedOptions = [], this.value = ""), this._open || this.open(), this._filterOptions());
+  }
+  _handleInputKeyDown(e) {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault(), this._open ? this._updateActiveIndex(1) : (this.open(), this._filteredOptions.length > 0 && (this._activeIndex = 0, this._updateAriaActivedescendant(), this._scrollOptionIntoView(this._activeIndex), this._announceOption(this._filteredOptions[this._activeIndex])));
+        break;
+      case "ArrowUp":
+        e.preventDefault(), this._open ? this._updateActiveIndex(-1) : (this.open(), this._filteredOptions.length > 0 && (this._activeIndex = this._filteredOptions.length - 1, this._updateAriaActivedescendant(), this._scrollOptionIntoView(this._activeIndex), this._announceOption(this._filteredOptions[this._activeIndex])));
+        break;
+      case "Enter":
+        e.preventDefault(), this._open && this._activeIndex >= 0 && this._activeIndex < this._filteredOptions.length && this.selectOption(this._filteredOptions[this._activeIndex]);
+        break;
+      case "Escape":
+        e.preventDefault(), this._open ? this.close() : this._searchTerm && this.clearSelection();
+        break;
+      case "Backspace":
+        if (this.multiple && this._searchTerm === "" && this._selectedOptions.length > 0) {
+          e.preventDefault();
+          const t = this._selectedOptions[this._selectedOptions.length - 1];
+          this._selectedOptions = this._selectedOptions.slice(0, -1), this._selectionChanged();
+          const i = new CustomEvent("change", {
+            detail: {
+              value: this.value,
+              option: t
+            },
+            bubbles: !0,
+            composed: !0
+          });
+          this.dispatchEvent(i), this.onChange?.(i);
+        }
+        break;
+      case "Tab":
+        this._open && this.close();
+        break;
+      case "Home":
+        e.preventDefault(), this._inputElement && this._inputElement.setSelectionRange(0, 0), this._open && this._filteredOptions.length > 0 && (this._activeIndex = 0, this._updateAriaActivedescendant(), this._scrollOptionIntoView(this._activeIndex), this._announceOption(this._filteredOptions[this._activeIndex]));
+        break;
+      case "End":
+        if (e.preventDefault(), this._inputElement) {
+          const t = this._inputElement.value.length;
+          this._inputElement.setSelectionRange(t, t);
+        }
+        this._open && this._filteredOptions.length > 0 && (this._activeIndex = this._filteredOptions.length - 1, this._updateAriaActivedescendant(), this._scrollOptionIntoView(this._activeIndex), this._announceOption(this._filteredOptions[this._activeIndex]));
+        break;
+    }
+  }
+  _handleInputFocus(e) {
+    if (this._justSelected) {
+      this.onFocus?.(e);
+      return;
+    }
+    !this._open && !this.disabled && !this.readonly && this.open(), this.onFocus?.(e);
+  }
+  _handleInputBlur(e) {
+    this.onBlur?.(e);
+  }
+  _handleInputClick() {
+    this._open || (this._activeIndex = -1, this.open());
+  }
+  _handleOptionClick(e, t) {
+    t.preventDefault(), e.disabled || this.selectOption(e);
+  }
+  _handleToggleClick(e) {
+    e.preventDefault(), this.toggle(), this._inputElement?.focus();
+  }
+  _handleClearClick(e) {
+    e.preventDefault(), e.stopPropagation(), this.clearSelection(), this._inputElement?.focus();
+  }
+  _updateActiveIndex(e) {
+    if (this._filteredOptions.length === 0) return;
+    let t = this._activeIndex + e, i = 0;
+    const r = this._filteredOptions.length;
+    for (; i < r && (t < 0 ? t = this._filteredOptions.length - 1 : t >= this._filteredOptions.length && (t = 0), !!this._filteredOptions[t].disabled); )
+      t += e, i++;
+    i < r && !this._filteredOptions[t].disabled && (this._activeIndex = t, this._updateAriaActivedescendant(), this._scrollOptionIntoView(t), this._announceOption(this._filteredOptions[t]));
+  }
+  _updateAriaActivedescendant() {
+    if (this._activeIndex >= 0 && this._activeIndex < this._filteredOptions.length) {
+      const e = this._getOptionId(this._activeIndex);
+      this._inputElement?.setAttribute("aria-activedescendant", e);
+    } else
+      this._inputElement?.removeAttribute("aria-activedescendant");
+  }
+  _scrollOptionIntoView(e) {
+    e < 0 || e >= this._filteredOptions.length || requestAnimationFrame(() => {
+      const t = this._getOptionId(e), i = this.shadowRoot?.getElementById(t);
+      if (i && this._listboxElement) {
+        const r = this._listboxElement.getBoundingClientRect(), n = i.getBoundingClientRect();
+        n.bottom > r.bottom ? i.scrollIntoView({ block: "nearest", behavior: "smooth" }) : n.top < r.top && i.scrollIntoView({ block: "nearest", behavior: "smooth" });
+      }
+    });
+  }
+  _announceOption(e) {
+    const t = this._filteredOptions.indexOf(e), i = this._filteredOptions.length, r = `${e.label}, ${t + 1} of ${i}`;
+    this._srAnnouncer && (this._srAnnouncer.textContent = r);
+  }
+  _announceNoResults() {
+    this._srAnnouncer && (this._srAnnouncer.textContent = this.noResultsText);
+  }
+  _getOptionId(e) {
+    return `${this._listboxId}-option-${e}`;
+  }
+  _getDescribedBy() {
+    return w({
+      helperId: this._helpTextId,
+      errorId: this._errorTextId,
+      hasHelper: !!this.helpText && !this.invalid,
+      hasError: !!this.invalid && !!this.errorMessage
+    });
+  }
+  renderLabel() {
+    if (!this.label || this.noLabel) return "";
+    const e = [];
+    return f(this.labelPosition) ? (e.push("ag-form-control__label--horizontal"), e.push(`ag-form-control__label--${this.labelPosition}`)) : this.labelPosition === "bottom" && e.push(`ag-form-control__label--${this.labelPosition}`), l`
+      <label
+        id=${this._labelId}
+        for=${this._comboboxId}
+        class="ag-form-control__label ${this.labelHidden ? "ag-form-control__label--hidden" : ""} ${this.required ? "ag-form-control__label--required" : ""} ${e.join(" ")}"
+        part="ag-combobox-label"
+      >
+        ${this.label}
+      </label>
+    `;
+  }
+  render() {
+    const e = !this.noLabel && this.label, t = this._getDescribedBy(), i = f(this.labelPosition), r = l`
+
+        <div
+          class="combobox-input-wrapper"
+          part="ag-combobox-input-wrapper"
+          @click=${() => this._inputElement?.focus()}
+        >
+          ${this.multiple ? this._renderSelectedTags() : h}
+          <input
+            id=${this._comboboxId}
+            class="combobox-input"
+            part="ag-combobox-input"
+            type="text"
+            role="combobox"
+            aria-autocomplete=${this.autocomplete}
+            aria-controls=${this._listboxId}
+            aria-expanded=${this._open ? "true" : "false"}
+            aria-haspopup="listbox"
+            aria-disabled=${this.disabled ? "true" : h}
+            aria-labelledby=${e ? this._labelId : h}
+            aria-label=${this.ariaLabel || h}
+            aria-describedby=${t || h}
+            aria-invalid=${this.invalid ? "true" : "false"}
+            aria-required=${this.required ? "true" : "false"}
+            .value=${this._searchTerm}
+            placeholder=${this._selectedOptions.length > 0 && !this.multiple ? "" : this.placeholder}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            @input=${this._handleInputChange}
+            @keydown=${this._handleInputKeyDown}
+            @focus=${this._handleInputFocus}
+            @blur=${this._handleInputBlur}
+            @click=${this._handleInputClick}
+          />
+
+          ${this.clearable && this._selectedOptions.length > 0 ? l`
+            <div
+              class="combobox-clear-wrapper"
+              part="ag-combobox-clear-wrapper"
+            >
+              <ag-close-button
+                size="sm"
+                @close-button-click=${this._handleClearClick}
+              ></ag-close-button>
+            </div>
+          ` : h}
+
+          <button
+            type="button"
+            class="ag-combobox__toggle combobox-toggle-button"
+            part="ag-combobox-toggle-button"
+            aria-label="Toggle dropdown"
+            tabindex="-1"
+            ?disabled=${this.disabled}
+            @click=${this._handleToggleClick}
+          >
+            <svg
+              class="combobox-toggle-icon"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <polyline points="6 9 12 15 18 9"></polyline>
+            </svg>
+          </button>
+        </div>
+
+        <div
+          id=${this._listboxId}
+          class="combobox-listbox"
+          part="ag-combobox-listbox"
+          role="listbox"
+          aria-label=${this.label ? `${this.label} suggestions` : "Suggestions"}
+          ?hidden=${!this._open}
+        >
+          ${this.loading ? l`
+            <div class="ag-combobox__loading combobox-loading" part="ag-combobox-loading">
+              ${this.loadingText}
+            </div>
+          ` : this._filteredOptions.length === 0 ? l`
+            <div class="ag-combobox__no-results combobox-no-results" part="ag-combobox-no-results">
+              ${this.noResultsText}
+            </div>
+          ` : l`
+            ${this._filteredOptions.map((p, v) => l`
+              <div
+                id=${this._getOptionId(v)}
+                class="combobox-option ${v === this._activeIndex ? "option-active" : ""}"
+                part="ag-combobox-option"
+                role="option"
+                aria-selected=${this._selectedOptions.some((d) => d.value === p.value) ? "true" : "false"}
+                aria-disabled=${p.disabled ? "true" : "false"}
+                @click=${(d) => this._handleOptionClick(p, d)}
+              >
+                ${this.multiple ? l`
+                  <ag-checkbox
+                    .checked=${this._selectedOptions.some((d) => d.value === p.value)}
+                    .size=${this.size === "default" ? "medium" : this.size}
+                    .value=${p.value}
+                    .name=${this._comboboxId}
+                    .disabled=${p.disabled}
+                    @change=${(d) => {
+      d.stopPropagation(), this._handleOptionClick(p, d);
+    }}
+                  >
+                    ${p.label}
+                  </ag-checkbox>
+                ` : l`
+                  ${p.label}
+                `}
+              </div>
+            `)}
+          `}
+        </div>
+
+        <div
+          class="combobox-sr-announcer"
+          role="status"
+          aria-live="polite"
+          aria-atomic="true"
+        ></div>
+    `, n = this.helpText && !this.invalid ? l`<div id=${this._helpTextId} class="ag-form-control__helper">
+          ${this.helpText}
+        </div>` : "", c = this.invalid && this.errorMessage ? l`<div id=${this._errorTextId} class="ag-form-control__error">
+          ${this.errorMessage}
+        </div>` : "";
+    return i ? l`
+        <div class="ag-form-control--horizontal">
+          ${this.renderLabel()}
+          <div class="combobox-wrapper" part="ag-combobox-wrapper">
+            ${r}
+          </div>
+        </div>
+        ${n}
+        ${c}
+      ` : this.labelPosition === "bottom" ? l`
+        <div class="combobox-wrapper" part="ag-combobox-wrapper">
+          ${r}
+        </div>
+        ${n}
+        ${c}
+        ${this.renderLabel()}
+      ` : l`
+      ${this.renderLabel()}
+      <div class="combobox-wrapper" part="ag-combobox-wrapper">
+        ${r}
+      </div>
+      ${n}
+      ${c}
+    `;
+  }
+};
+g.styles = [
+  O,
+  x`
+    :host {
+      display: block;
+      position: relative;
+      --combobox-min-width: 200px;
+      --combobox-max-width: 100%;
+      --combobox-listbox-max-height: 300px;
+      --combobox-option-padding: var(--ag-space-3) var(--ag-space-4);
+      --combobox-option-selected-bg: var(--ag-blue-100);
+      --combobox-option-hover-bg: var(--ag-background-tertiary);
+      --combobox-option-focus-bg: var(--ag-blue-50);
+      --combobox-toggle-size: var(--ag-space-6);
+    }
+
+    .combobox-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ag-space-2);
+    }
+    /* Input wrapper */
+    .combobox-input-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: var(--ag-space-1);
+      padding: var(--ag-space-3) var(--ag-space-4);
+      padding-inline-end: calc(var(--combobox-toggle-size) * 2 + var(--ag-space-2) * 3);
+      font-size: var(--ag-font-size-base);
+      font-family: var(--ag-font-family-base);
+      line-height: var(--ag-line-height-base);
+      color: var(--ag-text-primary);
+      background-color: var(--ag-background-primary);
+      border: var(--ag-border-width-1) solid var(--ag-border);
+      border-radius: var(--ag-radius-md);
+      transition: border-color var(--ag-motion-fast) ease-in-out;
+      cursor: text;
+    }
+
+    .combobox-input-wrapper:focus-within {
+      border-color: var(--ag-primary);
+      box-shadow: 0 0 0 var(--ag-focus-ring-width) var(--ag-focus-ring-color);
+    }
+
+    /* Input */
+    .combobox-input {
+      flex: 1;
+      min-inline-size: 50px; /* Ensure input has a minimum width to be usable */
+      font-size: var(--ag-font-size-base);
+      font-family: var(--ag-font-family-base);
+      line-height: var(--ag-line-height-base);
+      color: var(--ag-text-primary);
+      background-color: transparent;
+      border: none;
+      outline: none;
+      padding: 0;
+    }
+
+    .combobox-input::placeholder {
+      color: var(--ag-text-tertiary);
+    }
+
+    .combobox-input:disabled {
+      cursor: not-allowed;
+    }
+
+    .combobox-input-wrapper:has(.combobox-input:disabled) {
+      background-color: var(--ag-background-disabled);
+      cursor: not-allowed;
+    }
+
+    /* Invalid state */
+    :host([invalid]) .combobox-input-wrapper {
+      border-color: var(--ag-danger);
+    }
+
+    :host([invalid]) .combobox-input-wrapper:focus-within {
+      box-shadow: 0 0 0 var(--ag-focus-ring-width) var(--ag-danger-light);
+    }
+
+    /* Toggle button */
+    .combobox-toggle-button {
+      position: absolute;
+      inset-inline-end: var(--ag-space-2);
+      top: 50%;
+      transform: translateY(-50%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--combobox-toggle-size);
+      height: var(--combobox-toggle-size);
+      padding: 0;
+      background: transparent;
+      border: none;
+      border-radius: var(--ag-radius-sm);
+      cursor: pointer;
+      color: var(--ag-text-secondary);
+      transition: background-color var(--ag-motion-fast) ease-in-out;
+    }
+
+    .combobox-toggle-button:hover:not(:disabled) {
+      background-color: var(--ag-background-tertiary);
+      color: var(--ag-text-primary);
+    }
+
+    .combobox-toggle-button:focus {
+      outline: var(--ag-focus-ring-width) solid var(--ag-focus-ring-color);
+      outline-offset: var(--ag-focus-ring-offset);
+    }
+
+    .combobox-toggle-button:disabled {
+      opacity: var(--ag-opacity-disabled);
+      cursor: not-allowed;
+    }
+
+    .combobox-clear-wrapper {
+      position: absolute;
+      inset-inline-end: calc(var(--ag-space-2) * 2 + var(--combobox-toggle-size));
+      top: 50%;
+      transform: translateY(-50%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      /* The close button itself has padding, so we might not need width/height here */
+    }
+
+    /* This wrapper is no longer needed for positioning, but can be kept for semantics if we want */
+    .combobox-tags-wrapper {
+      display: contents; /* This makes the wrapper have no effect on layout */
+    }
+
+    .combobox-tags-wrapper ag-tag {
+      pointer-events: auto; /* Re-enable clicks for tags */
+    }
+
+    .combobox-toggle-icon {
+      width: var(--ag-space-4);
+      height: var(--ag-space-4);
+      transition: transform var(--ag-motion-fast) ease-in-out;
+    }
+
+    :host([open]) .combobox-toggle-icon {
+      transform: rotate(180deg);
+    }
+
+    /* Listbox */
+    .combobox-listbox {
+      position: absolute;
+      top: calc(100% + var(--ag-space-1));
+      inset-inline: 0;
+      max-block-size: var(--combobox-listbox-max-height);
+      overflow-y: auto;
+      background-color: var(--ag-background-primary);
+      border: var(--ag-border-width-1) solid var(--ag-border);
+      border-radius: var(--ag-radius-md);
+      box-shadow: var(--ag-shadow-lg);
+      z-index: var(--ag-z-index-dropdown);
+      opacity: 0;
+      transform: translateY(-8px);
+      transition:
+        opacity var(--ag-motion-fast) ease-in-out,
+        transform var(--ag-motion-fast) ease-in-out;
+      pointer-events: none;
+    }
+
+    :host([open]) .combobox-listbox {
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: auto;
+    }
+
+    /* Option */
+    .combobox-option {
+      padding: var(--combobox-option-padding);
+      cursor: pointer;
+      color: var(--ag-text-primary);
+      transition: background-color var(--ag-motion-fast) ease-in-out;
+      position: relative;
+    }
+
+    /* Checkmark for selected option in single-select mode - drawn with ::after */
+    .combobox-option[aria-selected="true"]::after {
+      content: '';
+      position: absolute;
+      inset-inline-end: var(--ag-space-6);
+      top: 50%;
+      display: block;
+      opacity: 1;
+      transform: rotate(40deg) translateY(-50%);
+      transform-origin: center center;
+      transition: all var(--ag-motion-fast) ease-in-out;
+    }
+
+    /* Hide checkmark in multi-select mode since we use checkboxes */
+    :host([multiple]) .combobox-option[aria-selected="true"]::after {
+      display: none;
+    }
+
+    .combobox-option:hover:not([aria-disabled="true"]):not([aria-selected="true"]),
+    .combobox-option.option-active:not([aria-disabled="true"]):not([aria-selected="true"]) {
+      background-color: var(--combobox-option-hover-bg);
+      color: var(--ag-text-primary);
+    }
+
+    .combobox-option[aria-selected="true"] {
+      background-color: var(--ag-primary);
+      color: var(--ag-white);
+    }
+
+    .combobox-option[aria-selected="true"]:hover,
+    .combobox-option.option-active[aria-selected="true"] {
+      background-color: var(--ag-primary-dark);
+    }
+
+    /* For multi-select, we want the checkbox to be visible even when the option is selected */
+    .combobox-option[aria-selected="true"] ag-checkbox {
+      color: var(--ag-white);
+    }
+
+    :host([variant="monochrome"]) .combobox-option[aria-selected="true"] {
+      background-color: var(--ag-background-primary-inverted);
+      color: var(--ag-text-primary-inverted);
+    }
+
+    /* hover/active + selected gets --ag-background-secondary-inverted affordance */
+    :host([variant="monochrome"]) .combobox-option[aria-selected="true"]:hover,
+    :host([variant="monochrome"]) .combobox-option.option-active[aria-selected="true"] {
+      background-color: var(--ag-background-secondary-inverted);
+    }
+
+    :host([variant="monochrome"]) .combobox-option[aria-selected="true"] ag-checkbox {
+      color: var(--ag-white);
+      color: var(--ag-text-primary-inverted);
+    }
+
+    /* Checkmark color for monochrome variant */
+    :host([variant="monochrome"]) .combobox-option[aria-selected="true"]::after {
+      border-inline-end-color: var(--ag-text-primary-inverted);
+      border-bottom-color: var(--ag-text-primary-inverted);
+    }
+
+    .combobox-option[aria-disabled="true"] {
+      background-color: var(--ag-background-disabled);
+      cursor: not-allowed;
+      color: var(--ag-text-secondary);
+    }
+
+    /* Loading & Empty states */
+    .combobox-loading,
+    .combobox-no-results {
+      padding: var(--ag-space-4);
+      text-align: center;
+      color: var(--ag-text-secondary);
+      font-size: var(--ag-font-size-sm);
+    }
+
+    /* Screen reader only announcer */
+    .combobox-sr-announcer {
+      position: absolute !important;
+      width: 1px !important;
+      height: 1px !important;
+      padding: 0 !important;
+      margin: -1px !important;
+      overflow: hidden !important;
+      clip: rect(0, 0, 0, 0) !important;
+      white-space: nowrap !important;
+      border: 0 !important;
+    }
+
+    /* Size variants */
+    :host([size="small"]) .combobox-input-wrapper {
+      padding: var(--ag-space-2) var(--ag-space-3);
+      padding-inline-end: calc(var(--combobox-toggle-size) * 2 + var(--ag-space-2) * 3);
+    }
+
+    :host([size="small"]) .combobox-input {
+      font-size: var(--ag-font-size-sm);
+    }
+
+    :host([size="small"]) {
+      --combobox-option-padding: var(--ag-space-2) var(--ag-space-3);
+      --combobox-toggle-size: var(--ag-space-5);
+    }
+
+    /* Checkmark size for small */
+    :host([size="small"]) .combobox-option[aria-selected="true"]::after {
+      width: 4px;
+      height: 8px;
+      border-inline-end: var(--ag-border-width-2) solid var(--ag-white);
+      border-bottom: var(--ag-border-width-2) solid var(--ag-white);
+    }
+
+    /* Default/medium checkmark size */
+    .combobox-option[aria-selected="true"]::after {
+      width: 4px;
+      height: 9px;
+      border-inline-end: var(--ag-border-width-2) solid var(--ag-white);
+      border-bottom: var(--ag-border-width-2) solid var(--ag-white);
+    }
+
+    :host([size="large"]) .combobox-input-wrapper {
+      padding: var(--ag-space-4) var(--ag-space-5);
+      padding-inline-end: calc(var(--combobox-toggle-size) * 2 + var(--ag-space-2) * 3);
+    }
+
+    :host([size="large"]) .combobox-input {
+      font-size: var(--ag-font-size-lg);
+    }
+
+    :host([size="large"]) {
+      --combobox-option-padding: var(--ag-space-4) var(--ag-space-5);
+      --combobox-toggle-size: var(--ag-space-7);
+    }
+
+    /* Checkmark size for large */
+    :host([size="large"]) .combobox-option[aria-selected="true"]::after {
+      width: 5px;
+      height: 10px;
+      border-inline-end: var(--ag-border-width-2) solid var(--ag-white);
+      border-bottom: var(--ag-border-width-2) solid var(--ag-white);
+    }
+
+    /* Reduced Motion */
+    @media (prefers-reduced-motion: reduce) {
+      .combobox-input,
+      .combobox-toggle-button,
+      .combobox-toggle-icon,
+      .combobox-option,
+      .combobox-option::after,
+      .combobox-listbox {
+        transition: none !important;
+        animation: none !important;
+      }
+    }
+
+    /* High Contrast Mode */
+    @media (forced-colors: active) {
+      .combobox-option[aria-selected="true"] {
+        outline: 2px solid CanvasText;
+        outline-offset: -2px;
+      }
+
+      .combobox-option:hover {
+        outline: 2px solid Highlight;
+      }
+
+      .combobox-toggle-button {
+        border: 1px solid ButtonText;
+      }
+    }
+  `
+];
+let o = g;
+s([
+  a({ type: Array })
+], o.prototype, "options", 2);
+s([
+  a({ type: [String, Array] })
+], o.prototype, "value", 1);
+s([
+  a({ type: [String, Array], attribute: "default-value" })
+], o.prototype, "defaultValue", 2);
+s([
+  a({ type: String })
+], o.prototype, "placeholder", 2);
+s([
+  a({ type: String })
+], o.prototype, "label", 2);
+s([
+  a({ type: String, attribute: "label-position" })
+], o.prototype, "labelPosition", 2);
+s([
+  a({ type: Boolean, attribute: "label-hidden" })
+], o.prototype, "labelHidden", 2);
+s([
+  a({ type: Boolean, attribute: "no-label" })
+], o.prototype, "noLabel", 2);
+s([
+  a({ type: String, attribute: "aria-label" })
+], o.prototype, "ariaLabel", 2);
+s([
+  a({ type: String, attribute: "help-text" })
+], o.prototype, "helpText", 2);
+s([
+  a({ type: String, attribute: "error-message" })
+], o.prototype, "errorMessage", 2);
+s([
+  a({ type: String })
+], o.prototype, "id", 2);
+s([
+  a({ type: String })
+], o.prototype, "autocomplete", 2);
+s([
+  a({ type: String, attribute: "filter-mode" })
+], o.prototype, "filterMode", 2);
+s([
+  a({ type: Boolean })
+], o.prototype, "clearable", 2);
+s([
+  a({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+s([
+  a({ type: Boolean })
+], o.prototype, "readonly", 2);
+s([
+  a({ type: Boolean })
+], o.prototype, "required", 2);
+s([
+  a({ type: Boolean, reflect: !0 })
+], o.prototype, "invalid", 2);
+s([
+  a({ type: String, reflect: !0 })
+], o.prototype, "size", 2);
+s([
+  a({ type: String, reflect: !0 })
+], o.prototype, "variant", 2);
+s([
+  a({ type: Number, attribute: "max-visible-options" })
+], o.prototype, "maxVisibleOptions", 2);
+s([
+  a({ type: Boolean })
+], o.prototype, "closeOnSelect", 2);
+s([
+  a({ type: Boolean })
+], o.prototype, "multiple", 2);
+s([
+  a({ type: Number, attribute: "max-options-visible" })
+], o.prototype, "maxOptionsVisible", 2);
+s([
+  a({ type: Boolean })
+], o.prototype, "loading", 2);
+s([
+  a({ type: String, attribute: "loading-text" })
+], o.prototype, "loadingText", 2);
+s([
+  a({ type: String, attribute: "no-results-text" })
+], o.prototype, "noResultsText", 2);
+s([
+  a({ attribute: !1 })
+], o.prototype, "onChange", 2);
+s([
+  a({ attribute: !1 })
+], o.prototype, "onSelect", 2);
+s([
+  a({ attribute: !1 })
+], o.prototype, "onSearch", 2);
+s([
+  a({ attribute: !1 })
+], o.prototype, "onOpen", 2);
+s([
+  a({ attribute: !1 })
+], o.prototype, "onClose", 2);
+s([
+  a({ attribute: !1 })
+], o.prototype, "onFocus", 2);
+s([
+  a({ attribute: !1 })
+], o.prototype, "onBlur", 2);
+s([
+  b()
+], o.prototype, "_open", 2);
+s([
+  b()
+], o.prototype, "_searchTerm", 2);
+s([
+  b()
+], o.prototype, "_filteredOptions", 2);
+s([
+  b()
+], o.prototype, "_activeIndex", 2);
+s([
+  b()
+], o.prototype, "_selectedOptions", 2);
+s([
+  b()
+], o.prototype, "_displayLabel", 2);
+s([
+  u(".combobox-input")
+], o.prototype, "_inputElement", 2);
+s([
+  u(".combobox-listbox")
+], o.prototype, "_listboxElement", 2);
+s([
+  u(".combobox-sr-announcer")
+], o.prototype, "_srAnnouncer", 2);
+export {
+  o as AgCombobox
+};