@vonage/vivid 4.31.0 → 5.1.0

package/searchable-select/index.js

@@ -1,3 +1,1025 @@
-import { r as registerSearchableSelect } from '../shared/definition45.js';
-
-registerSearchableSelect();
+import { B as V, c as z, b as E } from "../bundled/definition3.js";
+import { P, p as L } from "../bundled/definition9.js";
+import { I as M, i as I } from "../bundled/definition2.js";
+import { P as B, p as A } from "../bundled/definition15.js";
+import { V as C, O as T, D as W, a as f, n as F, o as p, h as d, c as N, d as D } from "../bundled/vivid-element.js";
+import { W as K, f as q } from "../bundled/mixins.js";
+import { s as H } from "../bundled/scrollIntoView.js";
+import { D as j, d as U } from "../bundled/delegates-aria.js";
+import { F as G } from "../bundled/form-associated.js";
+import { W as J } from "../bundled/with-error-text.js";
+import { W as Q } from "../bundled/with-success-text.js";
+import { F as X } from "../bundled/form-element.js";
+import { A as Y, a as Z, I as ee } from "../bundled/affix.js";
+import { L as R } from "../bundled/localized.js";
+import { i as te } from "../bundled/option.js";
+import { w as v } from "../bundled/when.js";
+import { r as x } from "../bundled/ref.js";
+import { s as oe } from "../bundled/slotted.js";
+import { c as w } from "../bundled/class-names.js";
+import { r as y } from "../bundled/repeat.js";
+const ae = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.fieldset:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:min(100px,40%);outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}::slotted([data-vvd-component=option][data-highlighted]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}", ie = '.base.connotation-cta{--_connotation-color-contrast: var(--vvd-option-tag-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: var(--_connotation-color-soft);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base:not(.disabled){--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% )}}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: var(--vvd-color-neutral-200);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base.disabled{--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% )}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}';
+var se = Object.defineProperty, r = (s, t, e, a) => {
+  for (var i = void 0, l = s.length - 1, g; l >= 0; l--)
+    (g = s[l]) && (i = g(t, e, i) || i);
+  return i && se(t, e, i), i;
+};
+const m = 8, le = 100, O = 10, ne = (s) => typeof s == "string";
+class n extends K(
+  J(
+    Q(
+      X(
+        j(
+          Y(R(G(C)))
+        )
+      )
+    )
+  )
+) {
+  constructor() {
+    super(...arguments), this.fixedDropdown = !1, this.open = !1, this.multiple = !1, this.externalTags = !1, this.maxLines = null, this.values = [], this.initialValues = [], this._currentSearchText = null, this._areOptionsInitialized = !1, this.#s = {
+      handleChange: (t, e) => {
+        t.selected && !this.values.includes(t.value) ? this.values = [...this.values, t.value] : !t.selected && this.values.includes(t.value) && (this.values = this.values.filter((a) => a !== t.value));
+      }
+    }, this.#t = /* @__PURE__ */ new Map(), this._filteredOptions = [], this._filteredEnabledOptions = [], this.loading = !1, this._highlightedOptionIndex = null, this._numElidedTags = 0, this._tagRows = [], this._lastTagRow = [], this.clearable = !1, this.maxSelected = null, this._slottedDisabledOptions = [], this.proxy = document.createElement("input"), this.setFormValue = (t, e) => {
+      ne(t) || super.setFormValue(t, e);
+    }, this._changeDescription = "", this.#d = new ResizeObserver(() => {
+      this.#u();
+    });
+  }
+  /**
+   * @internal
+   */
+  openChanged() {
+    this.open || this.#e(null);
+  }
+  /**
+   * @internal
+   */
+  valuesChanged() {
+    if (this._areOptionsInitialized) {
+      if (!this.multiple && this.values.length > 1) {
+        this.values = [this.values[0]];
+        return;
+      }
+      if (this.values.some((t) => !this.#p(t))) {
+        this.values = this.values.filter((t) => this.#p(t));
+        return;
+      }
+      this.value = this.values.length ? this.values[0] : "", this.#c(), this.#m(), this.$fastController.isConnected && this.#u(), this.#g();
+    }
+  }
+  #a(t) {
+    this.values = t, this.$emit("change", void 0, {
+      bubbles: !1
+    }), this.$emit("input", void 0, {
+      bubbles: !1
+    });
+  }
+  #b(t) {
+    const e = new Set(this.values), a = new Set(t);
+    this.values = [...this.values].filter((i) => a.has(i)).concat([...t].filter((i) => !e.has(i)));
+  }
+  /**
+   * @internal
+   */
+  initialValuesChanged() {
+    this.dirtyValue || (this.values = this.initialValues, this.dirtyValue = !1);
+  }
+  #p(t) {
+    return this._slottedOptions.some((e) => e.value === t);
+  }
+  /**
+   * @internal
+   */
+  valueChanged(t, e) {
+    if (super.valueChanged(t, e), !this._areOptionsInitialized)
+      return;
+    const a = this._slottedOptions.some(
+      (i) => i.value === e
+    );
+    this.values[0] !== e && (this.values = a ? [e] : []);
+  }
+  get selectedIndex() {
+    return this.values.length ? this._slottedOptions.findIndex(
+      (t) => t.value === this.values[0]
+    ) : -1;
+  }
+  set selectedIndex(t) {
+    this.value = this._slottedOptions[t]?.value ?? "";
+  }
+  get options() {
+    return [...this._slottedOptions];
+  }
+  get selectedOptions() {
+    return this._slottedOptions.filter(
+      (t) => this.values.includes(t.value)
+    );
+  }
+  /**
+   * @internal
+   */
+  _currentSearchTextChanged() {
+    this.#o(), this.$emit("search-text-change", void 0, {
+      bubbles: !1,
+      composed: !1
+    });
+  }
+  /**
+   * The current search text of the component.
+   */
+  get searchText() {
+    return this._currentSearchText ?? "";
+  }
+  /**
+   * @internal
+   */
+  get _inputValue() {
+    return this._currentSearchText ?? (!this.multiple && this.value !== "" ? this.#k(this.value) ?? "" : "");
+  }
+  /**
+   * @internal
+   */
+  _onInputInput(t) {
+    this._currentSearchText = t.target.value;
+  }
+  /**
+   * @internal
+   */
+  _onInputFocus(t) {
+    this.#o();
+  }
+  /**
+   * @internal
+   */
+  _onInputBlur(t) {
+    this.open = !1, this._currentSearchText = null, this._changeDescription = "";
+  }
+  /**
+   * @internal
+   */
+  _onInputKeydown(t) {
+    if (t.ctrlKey || t.shiftKey)
+      return !0;
+    switch (t.key) {
+      case "Enter":
+        return this.#x(), this._inputValue === "" && (this.open = !this.open), !1;
+      case "Escape":
+        this.open = !1;
+        break;
+      case "Home":
+        if (!this.open) {
+          this.open = !0;
+          break;
+        }
+        return this.#y(), !1;
+      case "End":
+        if (!this.open) {
+          this.open = !0;
+          break;
+        }
+        return this.#w(), !1;
+      case "PageUp":
+        if (!this.open) {
+          this.open = !0;
+          break;
+        }
+        return this.#$(), !1;
+      case "PageDown":
+        if (!this.open) {
+          this.open = !0;
+          break;
+        }
+        return this.#T(), !1;
+      case "ArrowUp":
+        if (!this.open) {
+          this.open = !0;
+          break;
+        }
+        return this.#O(), !1;
+      case "ArrowDown":
+        if (!this.open) {
+          this.open = !0;
+          break;
+        }
+        return this.#S(), !1;
+      case "ArrowLeft":
+        return this.multiple && this._inputValue === "" && this.values.length && !this.externalTags ? (this.#i(this.#r(this.values.length)), !1) : !0;
+      case "Backspace":
+        return this.multiple && this._inputValue === "" && this.values.length ? (this._onTagRemoved(this.values[this.values.length - 1]), !1) : !0;
+      default:
+        return this.open || (this.open = !0), !0;
+    }
+    return !0;
+  }
+  /**
+   * @internal
+   */
+  _slottedOptionsChanged(t, e) {
+    const a = !!this.querySelectorAll(":not([slot])").length;
+    if (!e.length && a)
+      return;
+    if (this._areOptionsInitialized = !0, t) {
+      this._slottedDisabledOptions = [];
+      for (const l of t)
+        T.getNotifier(l).unsubscribe(this.#s, "selected");
+    }
+    if (e)
+      for (const l of e)
+        l._displayCheckmark = !0, T.getNotifier(l).subscribe(this.#s, "selected");
+    const i = [];
+    for (const l of this._slottedOptions)
+      (l.selected || l.value === this.value || this.values.includes(l.value)) && i.push(l.value), l.disabled && this._slottedDisabledOptions.push(l);
+    this.#b(i), this.#o(), this.#c();
+  }
+  #s;
+  #m() {
+    for (const t of this._slottedOptions)
+      t.selected = this.values.includes(t.value), this.#_(t);
+  }
+  #h(t) {
+    const e = t.value;
+    let a, i = !1;
+    const l = !this.values.includes(e);
+    this.multiple ? (l ? a = [...this.values, e] : a = this.values.filter((u) => u !== e), i = !0) : (l ? (a = [e], i = !0) : a = [], this.open = !1), this.#a(a);
+    const g = l ? this.locale.searchableSelect.optionSelectedMessage(
+      t._getAccessibleName()
+    ) : this.locale.searchableSelect.optionDeselectedMessage(
+      t._getAccessibleName()
+    ), h = this.multiple && this.maxSelected && this.maxSelected >= 1 ? this.locale.searchableSelect.maxSelectedMessage(
+      this.values.length,
+      this.maxSelected
+    ) : "";
+    this._changeDescription = `${g} ${h}`, i && (this._currentSearchText = null);
+  }
+  #t;
+  #l(t) {
+    return t.querySelector('[slot="tag-icon"]');
+  }
+  /**
+   * @internal
+   */
+  _tagIconSlotName(t) {
+    return `_tag-icon-${this.values.indexOf(t)}`;
+  }
+  #_(t) {
+    if (t.selected && this.#l(t)) {
+      let e = this.#t.get(t);
+      e || (e = this.#l(t).cloneNode(!0), this.#t.set(t, e)), e.slot = this._tagIconSlotName(t.value), this.appendChild(e);
+    } else {
+      const e = this.#t.get(t);
+      e && (e.remove(), this.#t.delete(t));
+    }
+  }
+  /**
+   * @internal
+   */
+  optionFilterChanged() {
+    this.#o();
+  }
+  /**
+   * @internal
+   */
+  loadingChanged(t, e) {
+    this._changeDescription = this.locale.searchableSelect.loadingOptionsMessage, t && !e && (this._changeDescription = "");
+  }
+  #o() {
+    const t = [], e = this.optionFilter ?? ((a, i) => a.text.toLowerCase().includes(i.toLowerCase()));
+    for (const a of this._slottedOptions ?? []) {
+      a._vvdSearchText = this.searchText;
+      const i = !this.searchText || e(a, this.searchText);
+      a._isNotMatching = !i, !a.hidden && i && t.push(a);
+    }
+    this.#e(null), this._filteredOptions = t, this._filteredEnabledOptions = t.filter(
+      (a) => !a.disabled
+    );
+  }
+  #e(t) {
+    if (typeof this._highlightedOptionIndex == "number") {
+      const e = this._filteredEnabledOptions[this._highlightedOptionIndex];
+      e._highlighted = !1, e.removeAttribute("data-highlighted");
+    }
+    if (typeof t == "number" && (this._filteredEnabledOptions.length ? t = Math.max(
+      0,
+      Math.min(this._filteredEnabledOptions.length - 1, t)
+    ) : t = null), this._highlightedOptionIndex = t, typeof this._highlightedOptionIndex == "number") {
+      const e = this._filteredEnabledOptions[this._highlightedOptionIndex];
+      e._highlighted = !0, e.setAttribute("data-highlighted", ""), H(e, this._listbox, "nearest"), this._changeDescription = this.locale.searchableSelect.optionFocusedMessage(
+        e._getAccessibleName(),
+        this._highlightedOptionIndex + 1,
+        this._filteredEnabledOptions.length,
+        e.selected
+      );
+    }
+  }
+  #x() {
+    this._highlightedOptionIndex !== null && this.#h(
+      this._filteredEnabledOptions[this._highlightedOptionIndex]
+    );
+  }
+  #y() {
+    this.#e(0);
+  }
+  #w() {
+    this.#e(
+      this._filteredEnabledOptions.length - 1
+    );
+  }
+  #$() {
+    this.#e(
+      (this._highlightedOptionIndex ?? this._filteredEnabledOptions.length) - O
+    );
+  }
+  #T() {
+    this.#e(
+      (this._highlightedOptionIndex ?? -1) + O
+    );
+  }
+  #O() {
+    this.#e(
+      (this._highlightedOptionIndex ?? this._filteredEnabledOptions.length) - 1
+    );
+  }
+  #S() {
+    this.#e(
+      (this._highlightedOptionIndex ?? -1) + 1
+    );
+  }
+  // --- Tags ---
+  /**
+   * @internal
+   */
+  _tagLabelForValue(t) {
+    return this._slottedOptions.find(
+      (a) => a.value === t
+    ).label;
+  }
+  /**
+   * @internal
+   */
+  _tagConnotationForValue(t) {
+    return this._slottedOptions.find(
+      (a) => a.value === t
+    ).tagConnotation;
+  }
+  /**
+   * @internal
+   */
+  _isTagDisabled(t) {
+    const e = this._slottedOptions.find(
+      (a) => a.value === t
+    );
+    return this.disabled || e.disabled;
+  }
+  #k(t) {
+    return this._slottedOptions?.find(
+      (a) => a.value === t
+    )?.label;
+  }
+  /**
+   * @internal
+   */
+  #n(t, e, a) {
+    const i = document.createElement(this._optionTagTagName);
+    i.label = t, i.removable = e, i.style.cssText = "position: absolute; visibility: hidden;", i.hasIconPlaceholder = a, this.shadowRoot.appendChild(i);
+    const l = i.getBoundingClientRect().width;
+    return i.remove(), l;
+  }
+  #u() {
+    if (!this.multiple) {
+      this._numElidedTags = 0, this._tagRows = [], this._lastTagRow = [];
+      return;
+    }
+    if (this.externalTags) {
+      this._numElidedTags = this.values.length, this._tagRows = [], this._lastTagRow = [];
+      return;
+    }
+    const t = this._contentArea.getBoundingClientRect().width, e = [[]];
+    let a = 0, i = le, l;
+    for (l = this.values.length - 1; l >= 0; l--) {
+      const h = this.maxLines && a === this.maxLines - 1, u = this.#n(
+        this._tagLabelForValue(this.values[l]),
+        !0,
+        this.#l(this.selectedOptions[l]) !== null
+      ), o = {
+        value: this.values[l],
+        width: u
+      };
+      let c = 0;
+      if (h) {
+        const $ = l;
+        $ && (c = m + this.#n($.toString(), !1, !1));
+      }
+      if (i + m + u + c > t) {
+        if (h)
+          if (l === this.values.length - 1)
+            e[a].unshift(o), i += m + u;
+          else
+            break;
+        else
+          e.push([]), a++, e[a].unshift(o), i = u;
+        continue;
+      }
+      e[a].unshift(o), i += m + u;
+    }
+    this._numElidedTags = l + 1, e.reverse();
+    for (let h = 0; h < e.length - 1; h++) {
+      let u = e[h].map((o) => o.width).reduce((o, c) => o + c, 0) + (e[h].length - 1) * m;
+      for (h === 0 && this._numElidedTags && (u += m + this.#n(this._numElidedTags.toString(), !1, !1)); e[h + 1].length && u + m + e[h + 1][0].width <= t; ) {
+        const o = e[h + 1].shift();
+        e[h].push(o), u += m + o.width;
+      }
+    }
+    const g = e.map((h) => h.map((u) => u.value));
+    this._tagRows = g.slice(0, -1), this._lastTagRow = g.slice(-1)[0];
+  }
+  /**
+   * @internal
+   */
+  _onTagRemoved(t) {
+    this.#a(
+      this.values.filter((e) => e !== t)
+    ), this.#o();
+  }
+  /**
+   * @internal
+   */
+  _onTagKeydown(t) {
+    const e = parseInt(t.target.dataset.index);
+    switch (t.key) {
+      case "Backspace":
+      case "Delete":
+      case "Enter":
+      case " ": {
+        this._onTagRemoved(this.values[e]), W.processUpdates(), this.#i(this.#I(e));
+        break;
+      }
+      case "ArrowLeft":
+        this.#i(this.#r(e) ?? e);
+        break;
+      case "ArrowRight":
+        this.#i(this.#v(e));
+        break;
+    }
+    return !0;
+  }
+  #i(t) {
+    t === null ? this._input.focus() : this.shadowRoot.querySelector(`[data-index="${t}"]`)?.focus();
+  }
+  #r(t) {
+    if (!this.values.length)
+      return null;
+    for (let e = t - 1; e >= 0; e--)
+      if (!this._isTagDisabled(this.values[e]))
+        return e;
+    return null;
+  }
+  #v(t) {
+    if (!this.values.length)
+      return null;
+    for (let e = t + 1; e < this.values.length; e++)
+      if (!this._isTagDisabled(this.values[e]))
+        return e;
+    return null;
+  }
+  #I(t) {
+    return this.#v(t - 1) ?? this.#r(t);
+  }
+  /**
+   * @internal
+   */
+  _onListboxClick(t) {
+    if (this.disabled)
+      return;
+    const e = t.target.closest(
+      "option,[role=option],[data-vvd-component=option]"
+    );
+    e && !e.disabled && this.#h(e);
+  }
+  /**
+   * @internal
+   */
+  get _shouldShowClearButton() {
+    return this.clearable && this.values.length > 0;
+  }
+  /**
+   * @internal
+   */
+  _onClearButtonClick() {
+    this.#a(
+      this.selectedOptions.filter((t) => t.disabled).map((t) => t.value)
+    );
+  }
+  /**
+   * @internal
+   */
+  maxSelectedChanged() {
+    this.#c();
+  }
+  #c() {
+    if (!this.multiple || !this._slottedOptions || typeof this.maxSelected != "number" || this.maxSelected <= 0)
+      return;
+    const t = this._slottedOptions.filter(
+      (e) => !this._slottedDisabledOptions.includes(e)
+    );
+    if (this.values.length >= this.maxSelected) {
+      const e = t.filter(
+        (a) => !this.selectedOptions.includes(a)
+      );
+      for (const a of e)
+        a.disabled = !0;
+    } else
+      for (const e of t)
+        e.disabled = !1;
+  }
+  #f() {
+    return this.initialValues.length ? this.initialValues : this.initialValue ? [this.initialValue] : [];
+  }
+  /**
+   * @internal
+   */
+  nameChanged(t, e) {
+    super.nameChanged(t, e), this.#g();
+  }
+  #g() {
+    if (!this.name)
+      this.setFormValue(null);
+    else {
+      const t = new FormData();
+      for (const e of this.values)
+        t.append(this.name, e);
+      this.setFormValue(t);
+    }
+  }
+  /**
+   * @internal
+   */
+  formResetCallback() {
+    super.formResetCallback(), this.#a(this.#f());
+  }
+  #d;
+  /**
+   * @internal
+   */
+  _onFieldsetClick(t) {
+    this.disabled || t.defaultPrevented || (this._input.focus(), this.open = !0);
+  }
+  /**
+   * @internal
+   */
+  _onChevronClick() {
+    return this.open ? (this.open = !1, !1) : !0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.values.length || (this.values = this.#f()), this.#d.observe(this._contentArea);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.#d.disconnect();
+  }
+  /**
+   * @internal
+   */
+  validate() {
+    super.validate(this._input ?? void 0);
+  }
+  /**
+   * @internal
+   */
+  focus(t) {
+    this._input?.focus(t);
+  }
+  /**
+   * @internal
+   */
+  _onMouseDown(t) {
+    const e = t.composedPath()[0];
+    return !t.defaultPrevented && e !== this._input ? (this._input.focus(), !1) : !0;
+  }
+}
+r([
+  f
+], n.prototype, "appearance");
+r([
+  f
+], n.prototype, "shape");
+r([
+  f({ mode: "boolean", attribute: "fixed-dropdown" })
+], n.prototype, "fixedDropdown");
+r([
+  f
+], n.prototype, "placeholder");
+r([
+  f({ mode: "boolean" })
+], n.prototype, "open");
+r([
+  f({ mode: "boolean" })
+], n.prototype, "multiple");
+r([
+  f({ attribute: "external-tags", mode: "boolean" })
+], n.prototype, "externalTags");
+r([
+  f({ attribute: "max-lines", converter: F })
+], n.prototype, "maxLines");
+r([
+  p
+], n.prototype, "values");
+r([
+  p
+], n.prototype, "initialValues");
+r([
+  p
+], n.prototype, "_input");
+r([
+  p
+], n.prototype, "_currentSearchText");
+r([
+  p
+], n.prototype, "_slottedOptions");
+r([
+  p
+], n.prototype, "optionFilter");
+r([
+  p
+], n.prototype, "_filteredOptions");
+r([
+  p
+], n.prototype, "_filteredEnabledOptions");
+r([
+  f({
+    mode: "boolean"
+  })
+], n.prototype, "loading");
+r([
+  p
+], n.prototype, "_highlightedOptionIndex");
+r([
+  p
+], n.prototype, "_contentArea");
+r([
+  p
+], n.prototype, "_numElidedTags");
+r([
+  p
+], n.prototype, "_tagRows");
+r([
+  p
+], n.prototype, "_lastTagRow");
+r([
+  p
+], n.prototype, "_listbox");
+r([
+  f({ mode: "boolean" })
+], n.prototype, "clearable");
+r([
+  f({ attribute: "max-selected", converter: F })
+], n.prototype, "maxSelected");
+r([
+  p
+], n.prototype, "_slottedDisabledOptions");
+r([
+  p
+], n.prototype, "_changeDescription");
+r([
+  p
+], n.prototype, "_anchor");
+var re = Object.defineProperty, _ = (s, t, e, a) => {
+  for (var i = void 0, l = s.length - 1, g; l >= 0; l--)
+    (g = s[l]) && (i = g(t, e, i) || i);
+  return i && re(t, e, i), i;
+};
+class b extends R(C) {
+  constructor() {
+    super(...arguments), this.removable = !1, this.disabled = !1, this.hasIconPlaceholder = !1;
+  }
+  _onClickRemove() {
+    this.$emit("remove", void 0, {
+      bubbles: !1
+    });
+  }
+}
+_([
+  f
+], b.prototype, "shape");
+_([
+  p
+], b.prototype, "connotation");
+_([
+  f
+], b.prototype, "label");
+_([
+  f({ mode: "boolean" })
+], b.prototype, "removable");
+_([
+  f({ mode: "boolean" })
+], b.prototype, "disabled");
+_([
+  p
+], b.prototype, "hasIconPlaceholder");
+const ce = (s) => w(
+  ["disabled", s.disabled],
+  [`appearance-${s.appearance}`, !!s.appearance],
+  [`shape-${s.shape}`, !!s.shape],
+  ["error", !!s.errorValidationMessage],
+  ["success", !!s.successText],
+  ["has-highlighted-option", s._highlightedOptionIndex !== null]
+);
+function de() {
+  return d`
+		<label for="control" class="label" id="label"> ${(s) => s.label} </label>
+	`;
+}
+function pe() {
+  return d`
+		<span
+			id="selection-count"
+			class="selection-count"
+			aria-label="${(s) => s.locale.searchableSelect.maxSelectedMessage(
+    s.values.length,
+    s.maxSelected
+  )}"
+			>(${(s) => `${s.values.length}/${s.maxSelected}`})</span
+		>
+	`;
+}
+const S = (s, t) => {
+  const e = s.tagFor(b);
+  return d`
+		<div class="tag-wrapper">
+			<${e}
+				class="tag"
+				tabindex="-1"
+				data-index="${(a, i) => t(i).values.indexOf(a)}"
+				removable
+				:label="${(a, i) => t(i)._tagLabelForValue(a)}"
+				:shape="${(a, i) => t(i).shape}"
+				:connotation="${(a, i) => t(i)._tagConnotationForValue(a)}"
+				?disabled="${(a, i) => t(i)._isTagDisabled(a)}"
+				@remove="${(a, i) => t(i)._onTagRemoved(a)}"
+				@keydown="${(a, i) => t(i)._onTagKeydown(i.event)}"
+				@mousedown="${() => !1}">
+				<slot slot="icon" name="${(a, i) => t(i)._tagIconSlotName(a)}"></slot>
+			</${e}>
+		</div>
+	`;
+}, k = (s, t) => {
+  const e = s.tagFor(b);
+  return d`
+		<${e}
+			class="tag"
+			tabindex="-1"
+			:label="${(a, i) => t(a, i)._numElidedTags.toString()}"
+			:shape="${(a, i) => t(a, i).shape}"
+			?disabled="${(a, i) => t(a, i).disabled}"
+			@mousedown="${() => !1}">
+		</${e}>
+	`;
+};
+function he(s) {
+  const t = s.tagFor(V), e = s.tagFor(B), a = Z(s), i = z(s), l = S(s, (o) => o.parent), g = S(
+    s,
+    (o) => o.parentContext.parent
+  ), h = k(s, (o, c) => o), u = k(
+    s,
+    (o, c) => c.parent
+  );
+  return d`
+		<div
+			class="fieldset ${ce}"
+			@click="${(o, c) => o._onFieldsetClick(c.event)}"
+			${x("_anchor")}
+		>
+			${(o) => a(o.icon, ee.Slot)}
+			<div class="content-area" ${x("_contentArea")}>
+				${y(
+    (o) => o._tagRows,
+    d`
+						<div class="tag-row">
+							${v(
+      (o, c) => c.isFirst && c.parent._numElidedTags,
+      u
+    )}
+							${y((o) => o, g)}
+						</div>
+					`,
+    { positioning: !0 }
+  )}
+				<div
+					class="tag-row ${(o) => w([
+    "contains-only-input",
+    o._tagRows.length > 0 && o._lastTagRow.length === 0
+  ])}"
+				>
+					${v(
+    (o) => o._tagRows.length === 0 && o._numElidedTags,
+    h
+  )}
+					${y((o) => o._lastTagRow, l)}
+					<input
+						id="control"
+						class="control"
+						autocomplete="off"
+						aria-controls="listbox"
+						aria-describedby="${(o) => o._feedbackDescribedBy} ${(o) => o.multiple && o.maxSelected && o.maxSelected >= 1 ? "selection-count" : null}"
+						${U({
+    role: "combobox",
+    ariaAutoComplete: "list",
+    ariaHasPopup: "listbox",
+    ariaExpanded: (o) => o.open
+  })}
+						placeholder="${(o) => o.multiple && o.values.length ? "" : o.placeholder}"
+						type="text"
+						?disabled="${(o) => o.disabled}"
+						:value="${(o) => o._inputValue}"
+						@input="${(o, c) => {
+    o._onInputInput(c.event), c.event.stopPropagation();
+  }}"
+						@change="${(o, c) => {
+    c.event.stopPropagation();
+  }}"
+						@focus="${(o, c) => o._onInputFocus(c.event)}"
+						@blur="${(o, c) => o._onInputBlur(c.event)}"
+						@keydown="${(o, c) => o._onInputKeydown(c.event)}"
+						${x("_input")}
+					/>
+				</div>
+			</div>
+			<slot name="meta"></slot>
+			${v(
+    (o) => o._shouldShowClearButton,
+    d`<${t}
+					aria-label="${(o) => o.locale.searchableSelect.clearButtonLabel}"
+					@click="${(o) => o._onClearButtonClick()}"
+					@mousedown="${() => !1}"
+					?disabled="${(o) => o.disabled}"
+					:shape="${(o) => o.shape}"
+					size="super-condensed"
+					icon="close-line"
+					appearance="ghost-light"
+					tabindex="0"
+				></${t}>`
+  )}
+			<div @mousedown="${() => !1}" @click="${(o) => o._onChevronClick()}">
+				${v(
+    (o) => o.loading,
+    d`<${e} indeterminate size="-6" aria-hidden="true"></${e}>`
+  )}
+				${v((o) => !o.loading, i)}
+			</div>
+		</div>
+	`;
+}
+function ue(s) {
+  return s.open && s.fixedDropdown ? `--_searchable-select-fixed-width: ${Math.round(
+    s.getBoundingClientRect().width
+  )}px` : null;
+}
+function ve(s) {
+  const t = s.tagFor(P);
+  return d`
+		${v(
+    (e) => e.label || e.multiple && e.maxSelected && e.maxSelected >= 1,
+    d`
+				<div>
+					${v((e) => e.label, de())}
+					${v(
+      (e) => e.multiple && e.maxSelected && e.maxSelected >= 1,
+      pe()
+    )}
+				</div>
+			`
+  )}
+		<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
+			${(e) => e._changeDescription}
+		</span>
+		<div>
+			${he(s)}
+			<div class="popup-wrapper">
+				<${t}
+					:anchor="${(e) => e._anchor}"
+					:open="${(e) => e.open}"
+					class="popup"
+					placement="bottom-start"
+					style="${ue}"
+					strategy="${(e) => e.fixedDropdown ? "fixed" : "absolute"}">
+					<div
+						class="listbox"
+						role="listbox"
+						aria-multiselectable="${(e) => e.multiple}"
+						aria-required="${(e) => e.required}"
+						${x("_listbox")}
+						@click="${(e, a) => e._onListboxClick(a.event)}"
+						@mousedown="${() => !1}"
+					>
+						<slot
+							${oe({
+    filter: te,
+    flatten: !0,
+    property: "_slottedOptions"
+  })}>
+						</slot>
+						${v(
+    (e) => e._filteredOptions.length === 0,
+    d`<div class="empty-message">
+								${v(
+      (e) => e.loading,
+      d`<slot name="loading-options">
+										${(e) => e.locale.searchableSelect.loadingOptionsMessage}
+									</slot>`
+    )}
+								${v(
+      (e) => !e.loading && e.searchText === "",
+      d`<slot name="no-options">
+										${(e) => e.locale.searchableSelect.noOptionsMessage}
+									</slot>`
+    )}
+								${v(
+      (e) => !e.loading && e.searchText !== "",
+      d`<slot name="no-matches">
+										${(e) => e.locale.searchableSelect.noMatchesMessage}
+									</slot>`
+    )}
+							</div>`
+  )}
+					</div>
+				</${t}>
+			</div>
+		</div>
+	`;
+}
+const fe = (s) => {
+  const t = s.tagFor(b);
+  return d`
+		<template
+			:_optionTagTagName="${() => t}"
+			@mousedown="${(e, a) => e._onMouseDown(a.event)}"
+		>
+			<div class="control-wrapper">
+				${ve(s)} ${(e) => e._getFeedbackTemplate(s)}
+			</div>
+		</template>
+	`;
+}, ge = ({ shape: s, connotation: t, disabled: e, removable: a }) => w(
+  "base",
+  ["disabled", e],
+  ["removable", a],
+  [`shape-${s}`, !!s],
+  [`connotation-${t}`, !!t]
+);
+function be(s) {
+  return d`
+		<span
+			class="remove-button"
+			aria-label="${(t) => t.locale.searchableSelect.removeTagButtonLabel(t.label)}"
+			role="button"
+			tabindex="${(t) => t.disabled ? null : 0}"
+			@click="${(t) => t._onClickRemove()}"
+		>
+			<${s} name="close-line"></${s}>
+		</span>
+	`;
+}
+const me = (s) => {
+  const t = s.tagFor(M);
+  return d`<span class="${ge}" aria-disabled="${(e) => e.disabled}">
+		<slot name="icon" aria-hidden="true">
+			${v(
+    (e) => e.hasIconPlaceholder,
+    d`<div class="icon-placeholder"></div>`
+  )}
+		</slot>
+		${v(
+    (e) => e.label,
+    (e) => d`<span class="label">${e.label}</span>`
+  )}
+		${v((e) => e.removable, be(t))}
+	</span>`;
+}, _e = D(
+  "option-tag",
+  b,
+  me,
+  [I],
+  {
+    styles: [ie],
+    shadowOptions: {
+      delegatesFocus: !0
+    }
+  }
+), xe = D(
+  "searchable-select",
+  n,
+  fe,
+  [
+    E,
+    L,
+    I,
+    _e,
+    A,
+    q
+  ],
+  {
+    styles: ae
+  }
+), ye = N(
+  xe
+);
+ye();