@logosphere-ui/core 0.0.0-alpha.2

package/dist/combobox-BJbI-Tgi.js

@@ -0,0 +1,268 @@
+import { LitElement as b, nothing as n, html as r, unsafeCSS as u, css as m } from "lit";
+import { property as l, state as d, customElement as _ } from "lit/decorators.js";
+const f = '.combobox{display:flex;flex-direction:column;gap:var(--spacing-1);font-family:var(--font-family-base);width:100%}.combobox__label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-body-text)}.combobox__label--required:after{content:" *";color:var(--color-primary)}.combobox__readonly{border:none;background:transparent;font-size:var(--font-size-sm);color:var(--color-body-text);padding:0;outline:none;font-family:var(--font-family-base)}.combobox__wrapper{position:relative;width:100%}.combobox__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--spacing-1) var(--spacing-3);border:1px solid var(--color-border);border-radius:var(--radius-base);background-color:var(--color-body-bg);cursor:pointer;overflow:hidden;font-size:var(--font-size-sm);color:var(--color-body-text);transition:border-color var(--transition-speed-fast) var(--transition-timing);box-sizing:border-box}.combobox__trigger--default{height:32px}.combobox__trigger--large{height:40px;font-size:var(--font-size-base)}.combobox__trigger--open{border-color:var(--color-secondary-hover)}.combobox__trigger--readonly{cursor:default;background-color:var(--color-tertiary-bg);color:var(--color-tertiary)}.combobox__trigger--readonly .combobox__chevron{opacity:.3}.combobox__placeholder{color:var(--color-tertiary);font-size:var(--font-size-sm);flex:1}.combobox__single-value{flex:1;font-size:var(--font-size-sm);color:var(--color-body-text)}.combobox__chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--color-tertiary);flex-shrink:0;transition:transform var(--transition-speed-fast) var(--transition-timing)}.combobox__chevron--open{transform:rotate(180deg)}.combobox__tags{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-1);flex:1;overflow:hidden}.combobox__tag{display:inline-flex;align-items:center;gap:var(--spacing-1);padding:0 var(--spacing-2);background-color:var(--color-tertiary-bg);border-radius:var(--radius-sm);font-size:var(--font-size-xs);color:var(--color-body-text);white-space:nowrap}.combobox__tag-remove{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:var(--color-tertiary);line-height:1;transition:color var(--transition-speed-fast) var(--transition-timing)}.combobox__tag-remove:hover{color:var(--color-body-text)}.combobox__clear{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:var(--color-secondary);line-height:1;flex-shrink:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.combobox__clear:hover{color:var(--color-body-text)}.combobox__filter-input{flex:1;border:none;outline:none;background:transparent;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);min-width:0;padding:0;cursor:text}.combobox__filter-input::placeholder{color:var(--color-tertiary)}.combobox__filter-input--inline{flex:1;min-width:60px}.combobox__trigger--multi-filter{flex-wrap:wrap;height:auto;min-height:32px;gap:var(--spacing-1);padding:var(--spacing-1) var(--spacing-3)}.combobox__trigger--large.combobox__trigger--multi-filter{min-height:40px}.combobox__dropdown{position:absolute;top:calc(100% + var(--spacing-1));left:0;width:100%;background-color:var(--color-body-bg);border:1px solid var(--color-border);border-radius:var(--radius-base);box-shadow:var(--shadow-base);z-index:var(--z-index-dropdown);overflow:hidden}.combobox__search{width:100%;padding:var(--spacing-1-5) var(--spacing-3);border:none;border-bottom:1px solid var(--color-border);font-size:var(--font-size-sm);color:var(--color-body-text);font-family:var(--font-family-base);outline:none;box-sizing:border-box;background-color:var(--color-body-bg)}.combobox__search::placeholder{color:var(--color-tertiary)}.combobox__list{max-height:208px;overflow-y:auto}.combobox__item{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-1-5) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-body-text);cursor:pointer;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.combobox__item:hover,.combobox__item--selected,.combobox__item--focused{background-color:var(--color-tertiary-bg)}.combobox__empty{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-tertiary);text-align:center}';
+var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (e, o, s, c) => {
+  for (var a = c > 1 ? void 0 : c ? x(o, s) : o, p = e.length - 1, h; p >= 0; p--)
+    (h = e[p]) && (a = (c ? h(o, s, a) : h(a)) || a);
+  return c && a && g(o, s, a), a;
+};
+let t = class extends b {
+  constructor() {
+    super(...arguments), this.inputId = "combo-" + Math.random().toString(36).substring(2), this.label = "", this.placeholder = "Seçim yapınız", this.required = !1, this.readOnly = !1, this.multiple = !1, this.filterable = !1, this.optionLabel = "label", this.optionValue = "value", this.emptyMessage = "Sonuç yok", this.items = [], this.size = "default", this.selected = [], this.inputValue = "", this.isOpen = !1, this.focusedIndex = -1, this._filteredItems = [], this._handleOutsideClick = (e) => {
+      e.composedPath().includes(this) || this._closeDropdown();
+    }, this._handleKeydown = (e) => {
+      if (!this.readOnly)
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault(), this.isOpen ? this.focusedIndex = Math.min(this.focusedIndex + 1, this._filteredItems.length - 1) : (this.isOpen = !0, this.focusedIndex = 0), this._scrollFocusedIntoView();
+            break;
+          case "ArrowUp":
+            e.preventDefault(), this.isOpen && (this.focusedIndex = Math.max(this.focusedIndex - 1, 0), this._scrollFocusedIntoView());
+            break;
+          case "Enter":
+            e.preventDefault(), this.isOpen ? this.focusedIndex >= 0 && this.focusedIndex < this._filteredItems.length && this._selectItem(this._filteredItems[this.focusedIndex], e) : (this.isOpen = !0, this.focusedIndex = 0);
+            break;
+          case "Escape":
+            e.preventDefault(), this._closeDropdown();
+            break;
+        }
+    }, this._removeTag = (e, o) => {
+      o.stopPropagation(), this.setSelected(
+        this.selected.filter((s) => s[this.optionValue] !== e[this.optionValue])
+      );
+    }, this._clearSelection = (e) => {
+      e.stopPropagation(), this.setSelected([]), this.inputValue = "";
+    }, this._onFilterFocus = () => {
+      this.inputValue = "", this.isOpen = !0, this.focusedIndex = 0;
+    }, this._onFilterInput = (e) => {
+      this.inputValue = e.target.value, this.focusedIndex = 0, this.isOpen || (this.isOpen = !0);
+    }, this._stopPropagation = (e) => e.stopPropagation(), this._onTriggerClick = () => {
+      this.readOnly || (this.filterable && !this.multiple ? this._focusFilterInput() : this.isOpen = !this.isOpen);
+    };
+  }
+  // ==================== LIFECYCLE ====================
+  willUpdate(e) {
+    if (e.has("items") || e.has("inputValue") || e.has("optionLabel")) {
+      const o = this.inputValue.toLocaleLowerCase();
+      this._filteredItems = this.items.filter(
+        (s) => String(s[this.optionLabel] ?? "").toLocaleLowerCase().includes(o)
+      );
+    }
+  }
+  updated(e) {
+    e.has("isOpen") && this.isOpen && this.filterable && this.multiple && this.shadowRoot?.querySelector(".combobox__search")?.focus();
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._handleOutsideClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick);
+  }
+  // ==================== HELPERS ====================
+  _closeDropdown() {
+    this.isOpen = !1, this.focusedIndex = -1, this.filterable && (this.inputValue = "");
+  }
+  get _filterDisplayValue() {
+    return this.isOpen ? this.inputValue : !this.multiple && this.selected.length ? String(this.selected[0][this.optionLabel]) : "";
+  }
+  _focusFilterInput() {
+    this.updateComplete.then(() => {
+      this.shadowRoot?.querySelector(".combobox__filter-input")?.focus();
+    });
+  }
+  _scrollFocusedIntoView() {
+    this.updateComplete.then(() => {
+      this.shadowRoot?.querySelectorAll(".combobox__item")?.[this.focusedIndex]?.scrollIntoView({ block: "nearest" });
+    });
+  }
+  // ==================== SELECTION ====================
+  selectedItems() {
+    return this.selected;
+  }
+  isSelected(e) {
+    return this.selected.some((o) => o[this.optionValue] === e[this.optionValue]);
+  }
+  _selectItem(e, o) {
+    o.stopPropagation();
+    let s;
+    this.multiple ? s = this.isSelected(e) ? this.selected.filter((c) => c[this.optionValue] !== e[this.optionValue]) : [...this.selected, e] : (s = [e], this.isOpen = !1, this.filterable && (this.inputValue = "")), this.setSelected(s);
+  }
+  setSelected(e) {
+    this.selected = e, this.dispatchEvent(new CustomEvent("selected", { detail: { selected: e }, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: { value: e }, bubbles: !0, composed: !0 }));
+  }
+  // ==================== RENDER PARTS ====================
+  _renderTagList() {
+    return r`
+      <div class="combobox__tags">
+        ${this.selected.map((e) => r`
+          <span class="combobox__tag">
+            ${e[this.optionLabel]}
+            ${this.readOnly ? n : r`
+              <button
+                class="combobox__tag-remove"
+                @click=${(o) => this._removeTag(e, o)}
+                aria-label="Remove"
+              >
+                <ui-icon name="uil-times" size="12"></ui-icon>
+              </button>
+            `}
+          </span>
+        `)}
+      </div>
+    `;
+  }
+  _renderTriggerContent() {
+    return this.filterable && !this.multiple ? r`
+        <input
+          class="combobox__filter-input"
+          type="text"
+          .value=${this._filterDisplayValue}
+          placeholder=${this.placeholder}
+          ?disabled=${this.readOnly}
+          @focus=${this._onFilterFocus}
+          @input=${this._onFilterInput}
+          @keydown=${this._handleKeydown}
+          @click=${this._stopPropagation}
+        />
+        ${!this.readOnly && this.selected.length ? r`
+          <button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
+            <ui-icon name="uil-times" size="14"></ui-icon>
+          </button>
+        ` : n}
+      ` : this.multiple && this.selected.length ? this._renderTagList() : !this.multiple && this.selected.length ? r`
+        <span class="combobox__single-value">${this.selected[0][this.optionLabel]}</span>
+        ${this.readOnly ? n : r`
+          <button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
+            <ui-icon name="uil-times" size="14"></ui-icon>
+          </button>
+        `}
+      ` : r`<span class="combobox__placeholder">${this.placeholder}</span>`;
+  }
+  _renderDropdown() {
+    return this.isOpen ? r`
+      <div class="combobox__dropdown">
+        ${this.filterable && this.multiple ? r`
+          <input
+            class="combobox__search"
+            type="text"
+            placeholder=${this.placeholder}
+            .value=${this.inputValue}
+            @input=${this._onFilterInput}
+            @keydown=${this._handleKeydown}
+            @click=${this._stopPropagation}
+          />
+        ` : n}
+
+        <div class="combobox__list">
+          ${this._filteredItems.length === 0 ? r`<div class="combobox__empty">${this.emptyMessage}</div>` : this._filteredItems.map((e, o) => r`
+                <div
+                  class="combobox__item
+                    ${!this.multiple && this.isSelected(e) ? "combobox__item--selected" : ""}
+                    ${o === this.focusedIndex ? "combobox__item--focused" : ""}"
+                  @click=${(s) => this._selectItem(e, s)}
+                  @mouseenter=${() => {
+      this.focusedIndex = o;
+    }}
+                >
+                  ${this.multiple ? r`
+                    <logosphere-checkbox
+                      .checked=${this.isSelected(e)}
+                      .value=${e[this.optionValue]}
+                      @click=${this._stopPropagation}
+                    ></logosphere-checkbox>
+                  ` : n}
+                  ${e[this.optionLabel]}
+                </div>
+              `)}
+        </div>
+      </div>
+    ` : n;
+  }
+  // ==================== MAIN RENDER ====================
+  render() {
+    const e = [
+      "combobox__label",
+      this.required && !this.readOnly ? "combobox__label--required" : ""
+    ].filter(Boolean).join(" "), o = [
+      "combobox__trigger",
+      `combobox__trigger--${this.size}`,
+      this.readOnly ? "combobox__trigger--readonly" : "",
+      !this.readOnly && this.isOpen ? "combobox__trigger--open" : ""
+    ].filter(Boolean).join(" ");
+    return r`
+      <div class="combobox">
+        ${this.label ? r`
+          <label for="${this.inputId}" class="${e}">${this.label}</label>
+        ` : n}
+
+        <div class="combobox__wrapper">
+          <div
+            class="${o}"
+            tabindex="${this.readOnly || this.filterable ? -1 : 0}"
+            @click=${this._onTriggerClick}
+            @keydown=${this.filterable ? n : this._handleKeydown}
+          >
+            ${this._renderTriggerContent()}
+            <span class="combobox__chevron ${this.isOpen ? "combobox__chevron--open" : ""}">
+              <ui-icon name="uil-angle-down" size="16"></ui-icon>
+            </span>
+          </div>
+
+          ${this._renderDropdown()}
+        </div>
+      </div>
+    `;
+  }
+};
+t.styles = [m`${u(f)}`];
+i([
+  l({ type: String })
+], t.prototype, "label", 2);
+i([
+  l({ type: String })
+], t.prototype, "placeholder", 2);
+i([
+  l({ type: Boolean })
+], t.prototype, "required", 2);
+i([
+  l({ type: Boolean })
+], t.prototype, "readOnly", 2);
+i([
+  l({ type: Boolean })
+], t.prototype, "multiple", 2);
+i([
+  l({ type: Boolean })
+], t.prototype, "filterable", 2);
+i([
+  l({ type: String })
+], t.prototype, "optionLabel", 2);
+i([
+  l({ type: String })
+], t.prototype, "optionValue", 2);
+i([
+  l({ type: String })
+], t.prototype, "emptyMessage", 2);
+i([
+  l({ type: Array })
+], t.prototype, "items", 2);
+i([
+  l({ type: String })
+], t.prototype, "size", 2);
+i([
+  d()
+], t.prototype, "selected", 2);
+i([
+  d()
+], t.prototype, "inputValue", 2);
+i([
+  d()
+], t.prototype, "isOpen", 2);
+i([
+  d()
+], t.prototype, "focusedIndex", 2);
+t = i([
+  _("logosphere-combobox")
+], t);
+export {
+  t as C
+};

package/dist/combobox-pmE7bgEL.cjs

@@ -0,0 +1,99 @@
+"use strict";const o=require("lit"),i=require("lit/decorators.js"),p='.combobox{display:flex;flex-direction:column;gap:var(--spacing-1);font-family:var(--font-family-base);width:100%}.combobox__label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-body-text)}.combobox__label--required:after{content:" *";color:var(--color-primary)}.combobox__readonly{border:none;background:transparent;font-size:var(--font-size-sm);color:var(--color-body-text);padding:0;outline:none;font-family:var(--font-family-base)}.combobox__wrapper{position:relative;width:100%}.combobox__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--spacing-1) var(--spacing-3);border:1px solid var(--color-border);border-radius:var(--radius-base);background-color:var(--color-body-bg);cursor:pointer;overflow:hidden;font-size:var(--font-size-sm);color:var(--color-body-text);transition:border-color var(--transition-speed-fast) var(--transition-timing);box-sizing:border-box}.combobox__trigger--default{height:32px}.combobox__trigger--large{height:40px;font-size:var(--font-size-base)}.combobox__trigger--open{border-color:var(--color-secondary-hover)}.combobox__trigger--readonly{cursor:default;background-color:var(--color-tertiary-bg);color:var(--color-tertiary)}.combobox__trigger--readonly .combobox__chevron{opacity:.3}.combobox__placeholder{color:var(--color-tertiary);font-size:var(--font-size-sm);flex:1}.combobox__single-value{flex:1;font-size:var(--font-size-sm);color:var(--color-body-text)}.combobox__chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--color-tertiary);flex-shrink:0;transition:transform var(--transition-speed-fast) var(--transition-timing)}.combobox__chevron--open{transform:rotate(180deg)}.combobox__tags{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-1);flex:1;overflow:hidden}.combobox__tag{display:inline-flex;align-items:center;gap:var(--spacing-1);padding:0 var(--spacing-2);background-color:var(--color-tertiary-bg);border-radius:var(--radius-sm);font-size:var(--font-size-xs);color:var(--color-body-text);white-space:nowrap}.combobox__tag-remove{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:var(--color-tertiary);line-height:1;transition:color var(--transition-speed-fast) var(--transition-timing)}.combobox__tag-remove:hover{color:var(--color-body-text)}.combobox__clear{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:var(--color-secondary);line-height:1;flex-shrink:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.combobox__clear:hover{color:var(--color-body-text)}.combobox__filter-input{flex:1;border:none;outline:none;background:transparent;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);min-width:0;padding:0;cursor:text}.combobox__filter-input::placeholder{color:var(--color-tertiary)}.combobox__filter-input--inline{flex:1;min-width:60px}.combobox__trigger--multi-filter{flex-wrap:wrap;height:auto;min-height:32px;gap:var(--spacing-1);padding:var(--spacing-1) var(--spacing-3)}.combobox__trigger--large.combobox__trigger--multi-filter{min-height:40px}.combobox__dropdown{position:absolute;top:calc(100% + var(--spacing-1));left:0;width:100%;background-color:var(--color-body-bg);border:1px solid var(--color-border);border-radius:var(--radius-base);box-shadow:var(--shadow-base);z-index:var(--z-index-dropdown);overflow:hidden}.combobox__search{width:100%;padding:var(--spacing-1-5) var(--spacing-3);border:none;border-bottom:1px solid var(--color-border);font-size:var(--font-size-sm);color:var(--color-body-text);font-family:var(--font-family-base);outline:none;box-sizing:border-box;background-color:var(--color-body-bg)}.combobox__search::placeholder{color:var(--color-tertiary)}.combobox__list{max-height:208px;overflow-y:auto}.combobox__item{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-1-5) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-body-text);cursor:pointer;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.combobox__item:hover,.combobox__item--selected,.combobox__item--focused{background-color:var(--color-tertiary-bg)}.combobox__empty{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-tertiary);text-align:center}';var b=Object.defineProperty,d=Object.getOwnPropertyDescriptor,r=(n,e,t,s)=>{for(var l=s>1?void 0:s?d(e,t):e,a=n.length-1,c;a>=0;a--)(c=n[a])&&(l=(s?c(e,t,l):c(l))||l);return s&&l&&b(e,t,l),l};exports.Combobox=class extends o.LitElement{constructor(){super(...arguments),this.inputId="combo-"+Math.random().toString(36).substring(2),this.label="",this.placeholder="Seçim yapınız",this.required=!1,this.readOnly=!1,this.multiple=!1,this.filterable=!1,this.optionLabel="label",this.optionValue="value",this.emptyMessage="Sonuç yok",this.items=[],this.size="default",this.selected=[],this.inputValue="",this.isOpen=!1,this.focusedIndex=-1,this._filteredItems=[],this._handleOutsideClick=e=>{e.composedPath().includes(this)||this._closeDropdown()},this._handleKeydown=e=>{if(!this.readOnly)switch(e.key){case"ArrowDown":e.preventDefault(),this.isOpen?this.focusedIndex=Math.min(this.focusedIndex+1,this._filteredItems.length-1):(this.isOpen=!0,this.focusedIndex=0),this._scrollFocusedIntoView();break;case"ArrowUp":e.preventDefault(),this.isOpen&&(this.focusedIndex=Math.max(this.focusedIndex-1,0),this._scrollFocusedIntoView());break;case"Enter":e.preventDefault(),this.isOpen?this.focusedIndex>=0&&this.focusedIndex<this._filteredItems.length&&this._selectItem(this._filteredItems[this.focusedIndex],e):(this.isOpen=!0,this.focusedIndex=0);break;case"Escape":e.preventDefault(),this._closeDropdown();break}},this._removeTag=(e,t)=>{t.stopPropagation(),this.setSelected(this.selected.filter(s=>s[this.optionValue]!==e[this.optionValue]))},this._clearSelection=e=>{e.stopPropagation(),this.setSelected([]),this.inputValue=""},this._onFilterFocus=()=>{this.inputValue="",this.isOpen=!0,this.focusedIndex=0},this._onFilterInput=e=>{this.inputValue=e.target.value,this.focusedIndex=0,this.isOpen||(this.isOpen=!0)},this._stopPropagation=e=>e.stopPropagation(),this._onTriggerClick=()=>{this.readOnly||(this.filterable&&!this.multiple?this._focusFilterInput():this.isOpen=!this.isOpen)}}willUpdate(e){if(e.has("items")||e.has("inputValue")||e.has("optionLabel")){const t=this.inputValue.toLocaleLowerCase();this._filteredItems=this.items.filter(s=>String(s[this.optionLabel]??"").toLocaleLowerCase().includes(t))}}updated(e){e.has("isOpen")&&this.isOpen&&this.filterable&&this.multiple&&this.shadowRoot?.querySelector(".combobox__search")?.focus()}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick)}_closeDropdown(){this.isOpen=!1,this.focusedIndex=-1,this.filterable&&(this.inputValue="")}get _filterDisplayValue(){return this.isOpen?this.inputValue:!this.multiple&&this.selected.length?String(this.selected[0][this.optionLabel]):""}_focusFilterInput(){this.updateComplete.then(()=>{this.shadowRoot?.querySelector(".combobox__filter-input")?.focus()})}_scrollFocusedIntoView(){this.updateComplete.then(()=>{this.shadowRoot?.querySelectorAll(".combobox__item")?.[this.focusedIndex]?.scrollIntoView({block:"nearest"})})}selectedItems(){return this.selected}isSelected(e){return this.selected.some(t=>t[this.optionValue]===e[this.optionValue])}_selectItem(e,t){t.stopPropagation();let s;this.multiple?s=this.isSelected(e)?this.selected.filter(l=>l[this.optionValue]!==e[this.optionValue]):[...this.selected,e]:(s=[e],this.isOpen=!1,this.filterable&&(this.inputValue="")),this.setSelected(s)}setSelected(e){this.selected=e,this.dispatchEvent(new CustomEvent("selected",{detail:{selected:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{value:e},bubbles:!0,composed:!0}))}_renderTagList(){return o.html`
+      <div class="combobox__tags">
+        ${this.selected.map(e=>o.html`
+          <span class="combobox__tag">
+            ${e[this.optionLabel]}
+            ${this.readOnly?o.nothing:o.html`
+              <button
+                class="combobox__tag-remove"
+                @click=${t=>this._removeTag(e,t)}
+                aria-label="Remove"
+              >
+                <ui-icon name="uil-times" size="12"></ui-icon>
+              </button>
+            `}
+          </span>
+        `)}
+      </div>
+    `}_renderTriggerContent(){return this.filterable&&!this.multiple?o.html`
+        <input
+          class="combobox__filter-input"
+          type="text"
+          .value=${this._filterDisplayValue}
+          placeholder=${this.placeholder}
+          ?disabled=${this.readOnly}
+          @focus=${this._onFilterFocus}
+          @input=${this._onFilterInput}
+          @keydown=${this._handleKeydown}
+          @click=${this._stopPropagation}
+        />
+        ${!this.readOnly&&this.selected.length?o.html`
+          <button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
+            <ui-icon name="uil-times" size="14"></ui-icon>
+          </button>
+        `:o.nothing}
+      `:this.multiple&&this.selected.length?this._renderTagList():!this.multiple&&this.selected.length?o.html`
+        <span class="combobox__single-value">${this.selected[0][this.optionLabel]}</span>
+        ${this.readOnly?o.nothing:o.html`
+          <button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
+            <ui-icon name="uil-times" size="14"></ui-icon>
+          </button>
+        `}
+      `:o.html`<span class="combobox__placeholder">${this.placeholder}</span>`}_renderDropdown(){return this.isOpen?o.html`
+      <div class="combobox__dropdown">
+        ${this.filterable&&this.multiple?o.html`
+          <input
+            class="combobox__search"
+            type="text"
+            placeholder=${this.placeholder}
+            .value=${this.inputValue}
+            @input=${this._onFilterInput}
+            @keydown=${this._handleKeydown}
+            @click=${this._stopPropagation}
+          />
+        `:o.nothing}
+
+        <div class="combobox__list">
+          ${this._filteredItems.length===0?o.html`<div class="combobox__empty">${this.emptyMessage}</div>`:this._filteredItems.map((e,t)=>o.html`
+                <div
+                  class="combobox__item
+                    ${!this.multiple&&this.isSelected(e)?"combobox__item--selected":""}
+                    ${t===this.focusedIndex?"combobox__item--focused":""}"
+                  @click=${s=>this._selectItem(e,s)}
+                  @mouseenter=${()=>{this.focusedIndex=t}}
+                >
+                  ${this.multiple?o.html`
+                    <logosphere-checkbox
+                      .checked=${this.isSelected(e)}
+                      .value=${e[this.optionValue]}
+                      @click=${this._stopPropagation}
+                    ></logosphere-checkbox>
+                  `:o.nothing}
+                  ${e[this.optionLabel]}
+                </div>
+              `)}
+        </div>
+      </div>
+    `:o.nothing}render(){const e=["combobox__label",this.required&&!this.readOnly?"combobox__label--required":""].filter(Boolean).join(" "),t=["combobox__trigger",`combobox__trigger--${this.size}`,this.readOnly?"combobox__trigger--readonly":"",!this.readOnly&&this.isOpen?"combobox__trigger--open":""].filter(Boolean).join(" ");return o.html`
+      <div class="combobox">
+        ${this.label?o.html`
+          <label for="${this.inputId}" class="${e}">${this.label}</label>
+        `:o.nothing}
+
+        <div class="combobox__wrapper">
+          <div
+            class="${t}"
+            tabindex="${this.readOnly||this.filterable?-1:0}"
+            @click=${this._onTriggerClick}
+            @keydown=${this.filterable?o.nothing:this._handleKeydown}
+          >
+            ${this._renderTriggerContent()}
+            <span class="combobox__chevron ${this.isOpen?"combobox__chevron--open":""}">
+              <ui-icon name="uil-angle-down" size="16"></ui-icon>
+            </span>
+          </div>
+
+          ${this._renderDropdown()}
+        </div>
+      </div>
+    `}};exports.Combobox.styles=[o.css`${o.unsafeCSS(p)}`];r([i.property({type:String})],exports.Combobox.prototype,"label",2);r([i.property({type:String})],exports.Combobox.prototype,"placeholder",2);r([i.property({type:Boolean})],exports.Combobox.prototype,"required",2);r([i.property({type:Boolean})],exports.Combobox.prototype,"readOnly",2);r([i.property({type:Boolean})],exports.Combobox.prototype,"multiple",2);r([i.property({type:Boolean})],exports.Combobox.prototype,"filterable",2);r([i.property({type:String})],exports.Combobox.prototype,"optionLabel",2);r([i.property({type:String})],exports.Combobox.prototype,"optionValue",2);r([i.property({type:String})],exports.Combobox.prototype,"emptyMessage",2);r([i.property({type:Array})],exports.Combobox.prototype,"items",2);r([i.property({type:String})],exports.Combobox.prototype,"size",2);r([i.state()],exports.Combobox.prototype,"selected",2);r([i.state()],exports.Combobox.prototype,"inputValue",2);r([i.state()],exports.Combobox.prototype,"isOpen",2);r([i.state()],exports.Combobox.prototype,"focusedIndex",2);exports.Combobox=r([i.customElement("logosphere-combobox")],exports.Combobox);

package/dist/combobox.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./combobox-pmE7bgEL.cjs");Object.defineProperty(exports,"Combobox",{enumerable:!0,get:()=>e.Combobox});

package/dist/combobox.js

@@ -0,0 +1,4 @@
+import { C as m } from "./combobox-BJbI-Tgi.js";
+export {
+  m as Combobox
+};