@logosphere-ui/core 0.0.0-alpha.38 → 0.0.0-alpha.40

package/dist/checkbox-CX0LgsWP.js

@@ -1,148 +0,0 @@
-import { unsafeCSS as b, css as k, LitElement as u, nothing as h, html as a } from "lit";
-import { property as n, state as f, customElement as v } from "lit/decorators.js";
-import { ref as p } from "lit/directives/ref.js";
-const m = '.checkbox-wrapper{display:inline-flex;align-items:center;gap:var(--spacing-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-base)}.checkbox-wrapper--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.checkbox-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.checkbox-control{box-sizing:border-box;width:16px;height:16px;flex-shrink:0;position:relative;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-body-bg);transition:background-color var(--transition-speed-fast) var(--transition-timing),border-color var(--transition-speed-fast) var(--transition-timing)}.checkbox-control--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-control--checked:after{content:"";position:absolute;top:50%;left:50%;width:9px;height:5px;border-left:2px solid #ffffff;border-bottom:2px solid #ffffff;transform:translate(-50%,-65%) rotate(-45deg)}.checkbox-control--indeterminate{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-control--indeterminate:after{content:"";position:absolute;top:50%;left:50%;width:8px;height:2px;background-color:#fff;border-radius:1px;transform:translate(-50%,-50%)}.checkbox-label{font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-body-text)}.radio-control{box-sizing:border-box;width:16px;height:16px;flex-shrink:0;position:relative;border:1.5px solid var(--color-border);border-radius:var(--radius-full);background-color:var(--color-body-bg);transition:background-color var(--transition-speed-fast) var(--transition-timing),border-color var(--transition-speed-fast) var(--transition-timing)}.checkbox-wrapper:hover .radio-control{border-color:var(--color-border-emphasis);background-color:var(--color-body-bg-hover)}.radio-control--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-wrapper:hover .radio-control--checked{background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}.radio-control--checked:after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:var(--radius-full);background-color:#fff;transform:translate(-50%,-50%)}.checkbox-wrapper--disabled .radio-control--checked{background-color:var(--color-primary-disabled);border-color:var(--color-primary-disabled)}.switch-wrapper{display:inline-flex;align-items:center;gap:var(--spacing-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-base)}.switch-wrapper--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.switch-track{width:36px;height:20px;flex-shrink:0;border-radius:var(--radius-full);background-color:var(--color-border);position:relative;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.switch-track--checked{background-color:var(--color-primary)}.switch-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:var(--radius-full);background-color:#fff;box-shadow:var(--shadow-xs);transition:transform var(--transition-speed-fast) var(--transition-timing)}.switch-track--checked .switch-thumb{transform:translate(16px)}';
-var x = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (e, t, c, s) => {
-  for (var i = s > 1 ? void 0 : s ? g(t, c) : t, l = e.length - 1, d; l >= 0; l--)
-    (d = e[l]) && (i = (s ? d(t, c, i) : d(i)) || i);
-  return s && i && x(t, c, i), i;
-};
-let r = class extends u {
-  constructor() {
-    super(...arguments), this.label = "", this.value = "", this.checked = !1, this.type = "checkbox", this.disabled = !1, this.indeterminate = !1, this.internalChecked = !1;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.internalChecked = this.checked;
-  }
-  firstUpdated() {
-    this.setIndeterminate();
-  }
-  updated(e) {
-    e.has("indeterminate") && this.setIndeterminate(), e.has("checked") && (this.internalChecked = this.checked);
-  }
-  setIndeterminate() {
-    this.inputElement && (this.inputElement.indeterminate = this.indeterminate);
-  }
-  toggleChecked() {
-    if (!this.disabled) {
-      if (this.type === "radio") {
-        if (this.internalChecked) return;
-        this.internalChecked = !0;
-      } else this.indeterminate ? (this.indeterminate = !1, this.internalChecked = !0) : this.internalChecked = !this.internalChecked;
-      this.dispatchEvent(
-        new CustomEvent("lgsChange", {
-          detail: {
-            checked: this.internalChecked,
-            indeterminate: this.indeterminate,
-            value: this.value
-          },
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    }
-  }
-  renderCheckbox() {
-    const e = [
-      "checkbox-control",
-      this.internalChecked ? "checkbox-control--checked" : "",
-      this.indeterminate ? "checkbox-control--indeterminate" : ""
-    ].filter(Boolean).join(" ");
-    return a`
-      <div
-        class="checkbox-wrapper ${this.disabled ? "checkbox-wrapper--disabled" : ""}"
-        @click=${this.toggleChecked}
-      >
-        <input
-          type="checkbox"
-          class="checkbox-input"
-          .checked=${this.internalChecked}
-          ?disabled=${this.disabled}
-          .value=${this.value}
-          ${p((t) => this.inputElement = t)}
-        />
-        <span class="${e}"></span>
-        ${this.label ? a`<span class="checkbox-label">${this.label}</span>` : h}
-      </div>
-    `;
-  }
-  renderRadio() {
-    const e = [
-      "radio-control",
-      this.internalChecked ? "radio-control--checked" : ""
-    ].filter(Boolean).join(" ");
-    return a`
-      <div
-        class="checkbox-wrapper ${this.disabled ? "checkbox-wrapper--disabled" : ""}"
-        @click=${this.toggleChecked}
-      >
-        <input
-          type="radio"
-          class="checkbox-input"
-          .checked=${this.internalChecked}
-          ?disabled=${this.disabled}
-          .value=${this.value}
-          ${p((t) => this.inputElement = t)}
-        />
-        <span class="${e}"></span>
-        ${this.label ? a`<span class="checkbox-label">${this.label}</span>` : h}
-      </div>
-    `;
-  }
-  renderSwitch() {
-    return a`
-      <div
-        class="switch-wrapper ${this.disabled ? "switch-wrapper--disabled" : ""}"
-        @click=${this.toggleChecked}
-      >
-        <input
-          type="checkbox"
-          class="checkbox-input"
-          .checked=${this.internalChecked}
-          ?disabled=${this.disabled}
-          .value=${this.value}
-          ${p((e) => this.inputElement = e)}
-        />
-        <div class="switch-track ${this.internalChecked ? "switch-track--checked" : ""}">
-          <div class="switch-thumb"></div>
-        </div>
-        ${this.label ? a`<span class="checkbox-label">${this.label}</span>` : h}
-      </div>
-    `;
-  }
-  render() {
-    return this.type === "switch" ? this.renderSwitch() : this.type === "radio" ? this.renderRadio() : this.renderCheckbox();
-  }
-};
-r.styles = [
-  k`
-      ${b(m)}
-    `
-];
-o([
-  n({ type: String })
-], r.prototype, "label", 2);
-o([
-  n({ type: String })
-], r.prototype, "value", 2);
-o([
-  n({ type: Boolean })
-], r.prototype, "checked", 2);
-o([
-  n({ type: String })
-], r.prototype, "type", 2);
-o([
-  n({ type: Boolean })
-], r.prototype, "disabled", 2);
-o([
-  n({ type: Boolean })
-], r.prototype, "indeterminate", 2);
-o([
-  f()
-], r.prototype, "internalChecked", 2);
-r = o([
-  v("logosphere-checkbox")
-], r);
-export {
-  r as C
-};

package/dist/checkbox-DpbKHANK.cjs

@@ -1,53 +0,0 @@
-"use strict";const r=require("lit"),t=require("lit/decorators.js"),h=require("lit/directives/ref.js"),d='.checkbox-wrapper{display:inline-flex;align-items:center;gap:var(--spacing-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-base)}.checkbox-wrapper--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.checkbox-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.checkbox-control{box-sizing:border-box;width:16px;height:16px;flex-shrink:0;position:relative;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-body-bg);transition:background-color var(--transition-speed-fast) var(--transition-timing),border-color var(--transition-speed-fast) var(--transition-timing)}.checkbox-control--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-control--checked:after{content:"";position:absolute;top:50%;left:50%;width:9px;height:5px;border-left:2px solid #ffffff;border-bottom:2px solid #ffffff;transform:translate(-50%,-65%) rotate(-45deg)}.checkbox-control--indeterminate{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-control--indeterminate:after{content:"";position:absolute;top:50%;left:50%;width:8px;height:2px;background-color:#fff;border-radius:1px;transform:translate(-50%,-50%)}.checkbox-label{font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-body-text)}.radio-control{box-sizing:border-box;width:16px;height:16px;flex-shrink:0;position:relative;border:1.5px solid var(--color-border);border-radius:var(--radius-full);background-color:var(--color-body-bg);transition:background-color var(--transition-speed-fast) var(--transition-timing),border-color var(--transition-speed-fast) var(--transition-timing)}.checkbox-wrapper:hover .radio-control{border-color:var(--color-border-emphasis);background-color:var(--color-body-bg-hover)}.radio-control--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-wrapper:hover .radio-control--checked{background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}.radio-control--checked:after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:var(--radius-full);background-color:#fff;transform:translate(-50%,-50%)}.checkbox-wrapper--disabled .radio-control--checked{background-color:var(--color-primary-disabled);border-color:var(--color-primary-disabled)}.switch-wrapper{display:inline-flex;align-items:center;gap:var(--spacing-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-base)}.switch-wrapper--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.switch-track{width:36px;height:20px;flex-shrink:0;border-radius:var(--radius-full);background-color:var(--color-border);position:relative;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.switch-track--checked{background-color:var(--color-primary)}.switch-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:var(--radius-full);background-color:#fff;box-shadow:var(--shadow-xs);transition:transform var(--transition-speed-fast) var(--transition-timing)}.switch-track--checked .switch-thumb{transform:translate(16px)}';var p=Object.defineProperty,b=Object.getOwnPropertyDescriptor,o=(n,e,i,c)=>{for(var a=c>1?void 0:c?b(e,i):e,s=n.length-1,l;s>=0;s--)(l=n[s])&&(a=(c?l(e,i,a):l(a))||a);return c&&a&&p(e,i,a),a};exports.Checkbox=class extends r.LitElement{constructor(){super(...arguments),this.label="",this.value="",this.checked=!1,this.type="checkbox",this.disabled=!1,this.indeterminate=!1,this.internalChecked=!1}connectedCallback(){super.connectedCallback(),this.internalChecked=this.checked}firstUpdated(){this.setIndeterminate()}updated(e){e.has("indeterminate")&&this.setIndeterminate(),e.has("checked")&&(this.internalChecked=this.checked)}setIndeterminate(){this.inputElement&&(this.inputElement.indeterminate=this.indeterminate)}toggleChecked(){if(!this.disabled){if(this.type==="radio"){if(this.internalChecked)return;this.internalChecked=!0}else this.indeterminate?(this.indeterminate=!1,this.internalChecked=!0):this.internalChecked=!this.internalChecked;this.dispatchEvent(new CustomEvent("lgsChange",{detail:{checked:this.internalChecked,indeterminate:this.indeterminate,value:this.value},bubbles:!0,composed:!0}))}}renderCheckbox(){const e=["checkbox-control",this.internalChecked?"checkbox-control--checked":"",this.indeterminate?"checkbox-control--indeterminate":""].filter(Boolean).join(" ");return r.html`
-      <div
-        class="checkbox-wrapper ${this.disabled?"checkbox-wrapper--disabled":""}"
-        @click=${this.toggleChecked}
-      >
-        <input
-          type="checkbox"
-          class="checkbox-input"
-          .checked=${this.internalChecked}
-          ?disabled=${this.disabled}
-          .value=${this.value}
-          ${h.ref(i=>this.inputElement=i)}
-        />
-        <span class="${e}"></span>
-        ${this.label?r.html`<span class="checkbox-label">${this.label}</span>`:r.nothing}
-      </div>
-    `}renderRadio(){const e=["radio-control",this.internalChecked?"radio-control--checked":""].filter(Boolean).join(" ");return r.html`
-      <div
-        class="checkbox-wrapper ${this.disabled?"checkbox-wrapper--disabled":""}"
-        @click=${this.toggleChecked}
-      >
-        <input
-          type="radio"
-          class="checkbox-input"
-          .checked=${this.internalChecked}
-          ?disabled=${this.disabled}
-          .value=${this.value}
-          ${h.ref(i=>this.inputElement=i)}
-        />
-        <span class="${e}"></span>
-        ${this.label?r.html`<span class="checkbox-label">${this.label}</span>`:r.nothing}
-      </div>
-    `}renderSwitch(){return r.html`
-      <div
-        class="switch-wrapper ${this.disabled?"switch-wrapper--disabled":""}"
-        @click=${this.toggleChecked}
-      >
-        <input
-          type="checkbox"
-          class="checkbox-input"
-          .checked=${this.internalChecked}
-          ?disabled=${this.disabled}
-          .value=${this.value}
-          ${h.ref(e=>this.inputElement=e)}
-        />
-        <div class="switch-track ${this.internalChecked?"switch-track--checked":""}">
-          <div class="switch-thumb"></div>
-        </div>
-        ${this.label?r.html`<span class="checkbox-label">${this.label}</span>`:r.nothing}
-      </div>
-    `}render(){return this.type==="switch"?this.renderSwitch():this.type==="radio"?this.renderRadio():this.renderCheckbox()}};exports.Checkbox.styles=[r.css`
-      ${r.unsafeCSS(d)}
-    `];o([t.property({type:String})],exports.Checkbox.prototype,"label",2);o([t.property({type:String})],exports.Checkbox.prototype,"value",2);o([t.property({type:Boolean})],exports.Checkbox.prototype,"checked",2);o([t.property({type:String})],exports.Checkbox.prototype,"type",2);o([t.property({type:Boolean})],exports.Checkbox.prototype,"disabled",2);o([t.property({type:Boolean})],exports.Checkbox.prototype,"indeterminate",2);o([t.state()],exports.Checkbox.prototype,"internalChecked",2);exports.Checkbox=o([t.customElement("logosphere-checkbox")],exports.Checkbox);

package/dist/combobox-CFF30L-n.js

@@ -1,393 +0,0 @@
-import { unsafeCSS as u, css as m, LitElement as _, html as n, nothing as p } from "lit";
-import { property as s, state as d, query as b, customElement as f } from "lit/decorators.js";
-import { createPopper as g } from "@popperjs/core";
-import "./badge-BJqUgXZD.js";
-import "./checkbox-CX0LgsWP.js";
-import "./formfield-O327HYt0.js";
-import "./ui-icon-Ctn4nGFa.js";
-const x = '.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%;cursor:pointer}.combobox__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--spacing-2);padding:0;border:none;border-radius:0;background-color:transparent;cursor:pointer;overflow:hidden;font-size:var(--font-size-sm);color:var(--color-body-text);transition:color var(--transition-speed-fast) var(--transition-timing);box-sizing:border-box}.combobox__trigger--default{min-height:20px}.combobox__trigger--large{min-height:24px;font-size:var(--font-size-base)}.combobox__trigger--open{color:var(--color-body-text)}.combobox__trigger--readonly{cursor:default;color:var(--color-tertiary)}.combobox__trigger--disabled{cursor:not-allowed;color:var(--color-tertiary)}.combobox__trigger--readonly .combobox__chevron,.combobox__trigger--disabled .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__trigger--not-clearable .combobox__single-value,.combobox__trigger--not-clearable .combobox__placeholder{padding-right:24px}.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);position:absolute;right:var(--spacing-3)}.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:var(--spacing-1) var(--spacing-2);background-color:var(--color-light);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 12px 0 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:disabled{cursor:not-allowed}.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[popover]{position:fixed;inset:unset;margin:0;padding:0;border:none}.combobox__dropdown{width:auto;background-color:var(--color-body-bg);border:1px solid var(--color-border);border-radius:var(--radius-base);box-shadow:var(--shadow-sm);z-index:var(--z-index-dropdown);overflow:hidden}.combobox__search{width:100%;padding:var(--spacing-2) 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-2) 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-light)}.combobox__empty{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-tertiary);text-align:center}';
-var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (e, o, r, a) => {
-  for (var l = a > 1 ? void 0 : a ? y(o, r) : o, c = e.length - 1, h; c >= 0; c--)
-    (h = e[c]) && (l = (a ? h(o, r, l) : h(l)) || l);
-  return a && l && v(o, r, l), l;
-};
-let t = class extends _ {
-  constructor() {
-    super(...arguments), this.inputId = "combo-" + Math.random().toString(36).substring(2), this.label = "", this.helper = "", this.error = "", this.placeholder = "Seçim yapınız", this.required = !1, this.disabled = !1, this.readOnly = !1, this.variant = "default", this.multiple = !1, this.filterable = !1, this.optionLabel = "label", this.optionValue = "value", this.emptyMessage = "Sonuç yok", this.items = [], this.size = "default", this.clearable = !0, 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 || this.disabled))
-        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((r) => r[this.optionValue] !== e[this.optionValue])
-      );
-    }, this._clearSelection = (e) => {
-      e.stopPropagation(), this.setSelected([]), this.inputValue = "";
-    }, this._onFilterFocus = () => {
-      this.readOnly || this.disabled || (this.inputValue = "", this.isOpen = !0, this.focusedIndex = 0);
-    }, this._onFilterInput = (e) => {
-      this.readOnly || this.disabled || (this.inputValue = e.target.value, this.focusedIndex = 0, this.isOpen || (this.isOpen = !0));
-    }, this._stopPropagation = (e) => e.stopPropagation(), this._onTriggerClick = () => {
-      this.readOnly || this.disabled || (this.filterable && !this.multiple ? this._focusFilterInput() : this.isOpen = !this.isOpen);
-    }, this._onFieldClick = (e) => {
-      if (this.readOnly || this.disabled) return;
-      const o = e.composedPath();
-      if (!(o.some((l) => {
-        const c = l?.classList;
-        return c?.contains("combobox__trigger") || c?.contains("combobox__chevron");
-      }) || o.some(
-        (l) => l?.classList?.contains("combobox__dropdown")
-      ))) {
-        if (this.filterable && !this.multiple) {
-          this.isOpen = !0, this._focusFilterInput();
-          return;
-        }
-        this.isOpen = !this.isOpen;
-      }
-    }, this._onChevronClick = () => {
-      if (!(this.readOnly || this.disabled)) {
-        if (this.isOpen) {
-          this._closeDropdown();
-          return;
-        }
-        this.isOpen = !0, this.filterable && !this.multiple && this._focusFilterInput();
-      }
-    };
-  }
-  // ==================== LIFECYCLE ====================
-  willUpdate(e) {
-    if (e.has("items") || e.has("inputValue") || e.has("optionLabel")) {
-      const o = this.inputValue.toLocaleLowerCase();
-      this._filteredItems = this.items.filter(
-        (r) => String(r[this.optionLabel] ?? "").toLocaleLowerCase().includes(o)
-      );
-    }
-  }
-  updated(e) {
-    if (e.has("isOpen") && this.isOpen && this.filterable && this.multiple && this.shadowRoot?.querySelector(".combobox__search")?.focus(), e.has("isOpen")) {
-      this.isOpen ? this.updateComplete.then(() => {
-        this._showPopover(), this._updatePopper();
-      }) : (this._hidePopover(), this._destroyPopper());
-      return;
-    }
-    this.isOpen && this._updatePopper();
-  }
-  connectedCallback() {
-    super.connectedCallback(), document.addEventListener("click", this._handleOutsideClick);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick), this._destroyPopper();
-  }
-  // ==================== 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 r;
-    this.multiple ? r = this.isSelected(e) ? this.selected.filter((a) => a[this.optionValue] !== e[this.optionValue]) : [...this.selected, e] : (r = [e], this.isOpen = !1, this.filterable && (this.inputValue = "")), this.setSelected(r);
-  }
-  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 n`
-      <div class="combobox__tags">
-        ${this.selected.map(
-      (e) => n`
-            <logosphere-badge
-              variant="default"
-              text=${String(e[this.optionLabel])}
-              ?closeable=${!this.readOnly}
-              @close=${(o) => this._removeTag(e, o)}
-            ></logosphere-badge>
-          `
-    )}
-      </div>
-    `;
-  }
-  _renderTriggerContent() {
-    return this.filterable && !this.multiple ? n`
-        <input
-          class="combobox__filter-input"
-          type="text"
-          .value=${this._filterDisplayValue}
-          placeholder=${this.placeholder}
-          ?disabled=${this.readOnly || this.disabled}
-          @focus=${this._onFilterFocus}
-          @input=${this._onFilterInput}
-          @keydown=${this._handleKeydown}
-          @click=${this._stopPropagation}
-        />
-        ${this.clearable && !this.readOnly && this.selected.length ? n`
-              <button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
-                <ui-icon name="uil-times" size="14"></ui-icon>
-              </button>
-            ` : p}
-      ` : this.multiple && this.selected.length ? this._renderTagList() : !this.multiple && this.selected.length ? n`
-        <span class="combobox__single-value">${this.selected[0][this.optionLabel]}</span>
-        ${this.clearable && !this.readOnly ? n`
-              <button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
-                <ui-icon name="uil-times" size="14"></ui-icon>
-              </button>
-            ` : p}
-      ` : n`<span class="combobox__placeholder">${this.placeholder}</span>`;
-  }
-  _renderDropdown() {
-    return n`
-      <div data-combobox-popper popover="manual" class="combobox__dropdown">
-        ${this.filterable && this.multiple ? n`
-              <input
-                class="combobox__search"
-                type="text"
-                placeholder=${this.placeholder}
-                .value=${this.inputValue}
-                @input=${this._onFilterInput}
-                @keydown=${this._handleKeydown}
-                @click=${this._stopPropagation}
-              />
-            ` : p}
-
-        <div class="combobox__list">
-          ${this._filteredItems.length === 0 ? n`<div class="combobox__empty">${this.emptyMessage}</div>` : this._filteredItems.map(
-      (e, o) => n`
-                  <div
-                    class="combobox__item
-                    ${!this.multiple && this.isSelected(e) ? "combobox__item--selected" : ""}
-                    ${o === this.focusedIndex ? "combobox__item--focused" : ""}"
-                    @click=${(r) => this._selectItem(e, r)}
-                    @mouseenter=${() => {
-        this.focusedIndex = o;
-      }}
-                  >
-                    ${this.multiple ? n`
-                          <logosphere-checkbox
-                            .checked=${this.isSelected(e)}
-                            .value=${e[this.optionValue]}
-                            @click=${this._stopPropagation}
-                          ></logosphere-checkbox>
-                        ` : p}
-                    ${e[this.optionLabel]}
-                  </div>
-                `
-    )}
-        </div>
-      </div>
-    `;
-  }
-  _getPopperModifiers() {
-    return [
-      { name: "offset", options: { offset: [0, 8] } },
-      { name: "preventOverflow", options: { padding: 8 } },
-      {
-        name: "flip",
-        options: {
-          padding: 8,
-          fallbackPlacements: ["top-start", "right-start", "left-start", "bottom-end", "top-end"]
-        }
-      }
-    ];
-  }
-  _getPopperReferenceElement() {
-    return this._formFieldElement?.shadowRoot?.querySelector(
-      ".formfield__container"
-    ) ?? this._referenceElement;
-  }
-  _updatePopper() {
-    const e = this._getPopperReferenceElement(), o = this._dropdownElement;
-    if (!this.isOpen || !e || !o || !this.isConnected) return;
-    const r = Math.round(e.getBoundingClientRect().width);
-    if (o.style.width = `${r}px`, this._popperInstance) {
-      this._popperInstance.setOptions({
-        placement: "bottom-start",
-        strategy: "fixed",
-        modifiers: this._getPopperModifiers()
-      }), this._popperInstance.update();
-      return;
-    }
-    this._popperInstance = g(e, o, {
-      placement: "bottom-start",
-      strategy: "fixed",
-      modifiers: this._getPopperModifiers()
-    });
-  }
-  _destroyPopper() {
-    this._popperInstance && (this._popperInstance.destroy(), this._popperInstance = void 0);
-  }
-  _showPopover() {
-    this._dropdownElement?.showPopover?.();
-  }
-  _hidePopover() {
-    const e = this._dropdownElement;
-    try {
-      e?.hidePopover?.();
-    } catch {
-    }
-  }
-  // ==================== MAIN RENDER ====================
-  render() {
-    const e = [
-      "combobox__trigger",
-      `combobox__trigger--${this.size}`,
-      this.disabled ? "combobox__trigger--disabled" : "",
-      this.readOnly ? "combobox__trigger--readonly" : "",
-      !this.readOnly && !this.disabled && this.isOpen ? "combobox__trigger--open" : "",
-      this.clearable ? "" : "combobox__trigger--not-clearable"
-    ].filter(Boolean).join(" ");
-    return n`
-      <div class="combobox">
-        <logosphere-formfield
-          .label=${this.label}
-          .helper=${this.helper}
-          .error=${this.error}
-          cursor="pointer"
-          .required=${this.required}
-          .disabled=${this.disabled}
-          .readonly=${this.readOnly}
-          .size=${this.size}
-          .variant=${this.variant}
-          .forceFocused=${this.isOpen}
-          @click=${this._onFieldClick}
-        >
-          <div class="combobox__wrapper">
-            <div
-              class="${e}"
-              tabindex="${this.readOnly || this.filterable || this.disabled ? -1 : 0}"
-              @click=${this._onTriggerClick}
-              @keydown=${this.filterable ? p : this._handleKeydown}
-            >
-              ${this._renderTriggerContent()}
-            </div>
-
-            ${this._renderDropdown()}
-          </div>
-          <span
-            class="combobox__chevron ${this.isOpen ? "combobox__chevron--open" : ""}"
-            @click=${this._onChevronClick}
-          >
-            <ui-icon name="uil-angle-down" size="16"></ui-icon>
-          </span>
-        </logosphere-formfield>
-      </div>
-    `;
-  }
-};
-t.styles = [
-  m`
-      ${u(x)}
-    `
-];
-i([
-  s({ type: String })
-], t.prototype, "label", 2);
-i([
-  s({ type: String })
-], t.prototype, "helper", 2);
-i([
-  s({ type: String })
-], t.prototype, "error", 2);
-i([
-  s({ type: String })
-], t.prototype, "placeholder", 2);
-i([
-  s({ type: Boolean })
-], t.prototype, "required", 2);
-i([
-  s({ type: Boolean })
-], t.prototype, "disabled", 2);
-i([
-  s({ type: Boolean })
-], t.prototype, "readOnly", 2);
-i([
-  s({ type: String })
-], t.prototype, "variant", 2);
-i([
-  s({ type: Boolean })
-], t.prototype, "multiple", 2);
-i([
-  s({ type: Boolean })
-], t.prototype, "filterable", 2);
-i([
-  s({ type: String })
-], t.prototype, "optionLabel", 2);
-i([
-  s({ type: String })
-], t.prototype, "optionValue", 2);
-i([
-  s({ type: String })
-], t.prototype, "emptyMessage", 2);
-i([
-  s({ type: Array })
-], t.prototype, "items", 2);
-i([
-  s({ type: String })
-], t.prototype, "size", 2);
-i([
-  s({ type: Boolean })
-], t.prototype, "clearable", 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);
-i([
-  b(".combobox__wrapper")
-], t.prototype, "_referenceElement", 2);
-i([
-  b("logosphere-formfield")
-], t.prototype, "_formFieldElement", 2);
-i([
-  b("[data-combobox-popper]")
-], t.prototype, "_dropdownElement", 2);
-t = i([
-  f("logosphere-combobox")
-], t);
-export {
-  t as C
-};