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

package/dist/{combobox-CTqEZUg6.js → combobox-CFF30L-n.js}

@@ -1,15 +1,15 @@
-import { unsafeCSS as u, css as m, LitElement as _, html as n, nothing as c } from "lit";
-import { property as s, state as p, query as b, customElement as f } from "lit/decorators.js";
+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-g6kl2jGR.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, o = (e, i, r, l) => {
-  for (var a = l > 1 ? void 0 : l ? y(i, r) : i, d = e.length - 1, h; d >= 0; d--)
-    (h = e[d]) && (a = (l ? h(i, r, a) : h(a)) || a);
-  return l && a && v(i, r, a), a;
+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() {
@@ -31,8 +31,8 @@ let t = class extends _ {
             e.preventDefault(), this._closeDropdown();
             break;
         }
-    }, this._removeTag = (e, i) => {
-      i.stopPropagation(), this.setSelected(
+    }, this._removeTag = (e, o) => {
+      o.stopPropagation(), this.setSelected(
         this.selected.filter((r) => r[this.optionValue] !== e[this.optionValue])
       );
     }, this._clearSelection = (e) => {
@@ -41,10 +41,15 @@ let t = class extends _ {
       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 = (e) => {
-      e.stopPropagation(), !(this.readOnly || this.disabled) && (this.filterable && !this.multiple ? this._focusFilterInput() : this.isOpen = !this.isOpen);
+    }, 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 || e.composedPath().some(
+      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) {
@@ -53,8 +58,8 @@ let t = class extends _ {
         }
         this.isOpen = !this.isOpen;
       }
-    }, this._onChevronClick = (e) => {
-      if (e.stopPropagation(), !(this.readOnly || this.disabled)) {
+    }, this._onChevronClick = () => {
+      if (!(this.readOnly || this.disabled)) {
         if (this.isOpen) {
           this._closeDropdown();
           return;
@@ -66,9 +71,9 @@ let t = class extends _ {
   // ==================== LIFECYCLE ====================
   willUpdate(e) {
     if (e.has("items") || e.has("inputValue") || e.has("optionLabel")) {
-      const i = this.inputValue.toLocaleLowerCase();
+      const o = this.inputValue.toLocaleLowerCase();
       this._filteredItems = this.items.filter(
-        (r) => String(r[this.optionLabel] ?? "").toLocaleLowerCase().includes(i)
+        (r) => String(r[this.optionLabel] ?? "").toLocaleLowerCase().includes(o)
       );
     }
   }
@@ -109,12 +114,12 @@ let t = class extends _ {
     return this.selected;
   }
   isSelected(e) {
-    return this.selected.some((i) => i[this.optionValue] === e[this.optionValue]);
+    return this.selected.some((o) => o[this.optionValue] === e[this.optionValue]);
   }
-  _selectItem(e, i) {
-    i.stopPropagation();
+  _selectItem(e, o) {
+    o.stopPropagation();
     let r;
-    this.multiple ? r = this.isSelected(e) ? this.selected.filter((l) => l[this.optionValue] !== e[this.optionValue]) : [...this.selected, e] : (r = [e], this.isOpen = !1, this.filterable && (this.inputValue = "")), this.setSelected(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(
@@ -133,7 +138,7 @@ let t = class extends _ {
               variant="default"
               text=${String(e[this.optionLabel])}
               ?closeable=${!this.readOnly}
-              @close=${(i) => this._removeTag(e, i)}
+              @close=${(o) => this._removeTag(e, o)}
             ></logosphere-badge>
           `
     )}
@@ -157,14 +162,14 @@ let t = class extends _ {
               <button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
                 <ui-icon name="uil-times" size="14"></ui-icon>
               </button>
-            ` : c}
+            ` : 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>
-            ` : c}
+            ` : p}
       ` : n`<span class="combobox__placeholder">${this.placeholder}</span>`;
   }
   _renderDropdown() {
@@ -180,18 +185,18 @@ let t = class extends _ {
                 @keydown=${this._handleKeydown}
                 @click=${this._stopPropagation}
               />
-            ` : c}
+            ` : p}
 
         <div class="combobox__list">
           ${this._filteredItems.length === 0 ? n`<div class="combobox__empty">${this.emptyMessage}</div>` : this._filteredItems.map(
-      (e, i) => n`
+      (e, o) => n`
                   <div
                     class="combobox__item
                     ${!this.multiple && this.isSelected(e) ? "combobox__item--selected" : ""}
-                    ${i === this.focusedIndex ? "combobox__item--focused" : ""}"
+                    ${o === this.focusedIndex ? "combobox__item--focused" : ""}"
                     @click=${(r) => this._selectItem(e, r)}
                     @mouseenter=${() => {
-        this.focusedIndex = i;
+        this.focusedIndex = o;
       }}
                   >
                     ${this.multiple ? n`
@@ -200,7 +205,7 @@ let t = class extends _ {
                             .value=${e[this.optionValue]}
                             @click=${this._stopPropagation}
                           ></logosphere-checkbox>
-                        ` : c}
+                        ` : p}
                     ${e[this.optionLabel]}
                   </div>
                 `
@@ -228,10 +233,10 @@ let t = class extends _ {
     ) ?? this._referenceElement;
   }
   _updatePopper() {
-    const e = this._getPopperReferenceElement(), i = this._dropdownElement;
-    if (!this.isOpen || !e || !i || !this.isConnected) return;
+    const e = this._getPopperReferenceElement(), o = this._dropdownElement;
+    if (!this.isOpen || !e || !o || !this.isConnected) return;
     const r = Math.round(e.getBoundingClientRect().width);
-    if (i.style.width = `${r}px`, this._popperInstance) {
+    if (o.style.width = `${r}px`, this._popperInstance) {
       this._popperInstance.setOptions({
         placement: "bottom-start",
         strategy: "fixed",
@@ -239,7 +244,7 @@ let t = class extends _ {
       }), this._popperInstance.update();
       return;
     }
-    this._popperInstance = g(e, i, {
+    this._popperInstance = g(e, o, {
       placement: "bottom-start",
       strategy: "fixed",
       modifiers: this._getPopperModifiers()
@@ -280,6 +285,7 @@ let t = class extends _ {
           .readonly=${this.readOnly}
           .size=${this.size}
           .variant=${this.variant}
+          .forceFocused=${this.isOpen}
           @click=${this._onFieldClick}
         >
           <div class="combobox__wrapper">
@@ -287,7 +293,7 @@ let t = class extends _ {
               class="${e}"
               tabindex="${this.readOnly || this.filterable || this.disabled ? -1 : 0}"
               @click=${this._onTriggerClick}
-              @keydown=${this.filterable ? c : this._handleKeydown}
+              @keydown=${this.filterable ? p : this._handleKeydown}
             >
               ${this._renderTriggerContent()}
             </div>
@@ -310,76 +316,76 @@ t.styles = [
       ${u(x)}
     `
 ];
-o([
+i([
   s({ type: String })
 ], t.prototype, "label", 2);
-o([
+i([
   s({ type: String })
 ], t.prototype, "helper", 2);
-o([
+i([
   s({ type: String })
 ], t.prototype, "error", 2);
-o([
+i([
   s({ type: String })
 ], t.prototype, "placeholder", 2);
-o([
+i([
   s({ type: Boolean })
 ], t.prototype, "required", 2);
-o([
+i([
   s({ type: Boolean })
 ], t.prototype, "disabled", 2);
-o([
+i([
   s({ type: Boolean })
 ], t.prototype, "readOnly", 2);
-o([
+i([
   s({ type: String })
 ], t.prototype, "variant", 2);
-o([
+i([
   s({ type: Boolean })
 ], t.prototype, "multiple", 2);
-o([
+i([
   s({ type: Boolean })
 ], t.prototype, "filterable", 2);
-o([
+i([
   s({ type: String })
 ], t.prototype, "optionLabel", 2);
-o([
+i([
   s({ type: String })
 ], t.prototype, "optionValue", 2);
-o([
+i([
   s({ type: String })
 ], t.prototype, "emptyMessage", 2);
-o([
+i([
   s({ type: Array })
 ], t.prototype, "items", 2);
-o([
+i([
   s({ type: String })
 ], t.prototype, "size", 2);
-o([
+i([
   s({ type: Boolean })
 ], t.prototype, "clearable", 2);
-o([
-  p()
+i([
+  d()
 ], t.prototype, "selected", 2);
-o([
-  p()
+i([
+  d()
 ], t.prototype, "inputValue", 2);
-o([
-  p()
+i([
+  d()
 ], t.prototype, "isOpen", 2);
-o([
-  p()
+i([
+  d()
 ], t.prototype, "focusedIndex", 2);
-o([
+i([
   b(".combobox__wrapper")
 ], t.prototype, "_referenceElement", 2);
-o([
+i([
   b("logosphere-formfield")
 ], t.prototype, "_formFieldElement", 2);
-o([
+i([
   b("[data-combobox-popper]")
 ], t.prototype, "_dropdownElement", 2);
-t = o([
+t = i([
   f("logosphere-combobox")
 ], t);
 export {

package/dist/{combobox-BV4AKTqp.cjs → combobox-s7NFPAd3.cjs}

@@ -1,4 +1,4 @@
-"use strict";const r=require("lit"),o=require("lit/decorators.js"),c=require("@popperjs/core");require("./badge-COTtd1jh.cjs");require("./checkbox-CdDTRdKV.cjs");require("./formfield-CRcyUMvQ.cjs");require("./ui-icon-jKyMV1zp.cjs");const d='.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 h=Object.defineProperty,b=Object.getOwnPropertyDescriptor,t=(l,e,i,s)=>{for(var n=s>1?void 0:s?b(e,i):e,a=l.length-1,p;a>=0;a--)(p=l[a])&&(n=(s?p(e,i,n):p(n))||n);return s&&n&&h(e,i,n),n};exports.Combobox=class extends r.LitElement{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,i)=>{i.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.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=e=>{e.stopPropagation(),!(this.readOnly||this.disabled)&&(this.filterable&&!this.multiple?this._focusFilterInput():this.isOpen=!this.isOpen)},this._onFieldClick=e=>{if(!(this.readOnly||this.disabled||e.composedPath().some(n=>n?.classList?.contains("combobox__dropdown")))){if(this.filterable&&!this.multiple){this.isOpen=!0,this._focusFilterInput();return}this.isOpen=!this.isOpen}},this._onChevronClick=e=>{if(e.stopPropagation(),!(this.readOnly||this.disabled)){if(this.isOpen){this._closeDropdown();return}this.isOpen=!0,this.filterable&&!this.multiple&&this._focusFilterInput()}}}willUpdate(e){if(e.has("items")||e.has("inputValue")||e.has("optionLabel")){const i=this.inputValue.toLocaleLowerCase();this._filteredItems=this.items.filter(s=>String(s[this.optionLabel]??"").toLocaleLowerCase().includes(i))}}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()}_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(i=>i[this.optionValue]===e[this.optionValue])}_selectItem(e,i){i.stopPropagation();let s;this.multiple?s=this.isSelected(e)?this.selected.filter(n=>n[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 r.html`
+"use strict";const r=require("lit"),o=require("lit/decorators.js"),p=require("@popperjs/core");require("./badge-COTtd1jh.cjs");require("./checkbox-DpbKHANK.cjs");require("./formfield-CRcyUMvQ.cjs");require("./ui-icon-jKyMV1zp.cjs");const d='.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 h=Object.defineProperty,b=Object.getOwnPropertyDescriptor,t=(c,e,i,s)=>{for(var n=s>1?void 0:s?b(e,i):e,l=c.length-1,a;l>=0;l--)(a=c[l])&&(n=(s?a(e,i,n):a(n))||n);return s&&n&&h(e,i,n),n};exports.Combobox=class extends r.LitElement{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,i)=>{i.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.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 i=e.composedPath();if(!(i.some(l=>{const a=l?.classList;return a?.contains("combobox__trigger")||a?.contains("combobox__chevron")})||i.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()}}}willUpdate(e){if(e.has("items")||e.has("inputValue")||e.has("optionLabel")){const i=this.inputValue.toLocaleLowerCase();this._filteredItems=this.items.filter(s=>String(s[this.optionLabel]??"").toLocaleLowerCase().includes(i))}}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()}_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(i=>i[this.optionValue]===e[this.optionValue])}_selectItem(e,i){i.stopPropagation();let s;this.multiple?s=this.isSelected(e)?this.selected.filter(n=>n[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 r.html`
       <div class="combobox__tags">
         ${this.selected.map(e=>r.html`
             <logosphere-badge
@@ -68,7 +68,7 @@
                 `)}
         </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(),i=this._dropdownElement;if(!this.isOpen||!e||!i||!this.isConnected)return;const s=Math.round(e.getBoundingClientRect().width);if(i.style.width=`${s}px`,this._popperInstance){this._popperInstance.setOptions({placement:"bottom-start",strategy:"fixed",modifiers:this._getPopperModifiers()}),this._popperInstance.update();return}this._popperInstance=c.createPopper(e,i,{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{}}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 r.html`
+    `}_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(),i=this._dropdownElement;if(!this.isOpen||!e||!i||!this.isConnected)return;const s=Math.round(e.getBoundingClientRect().width);if(i.style.width=`${s}px`,this._popperInstance){this._popperInstance.setOptions({placement:"bottom-start",strategy:"fixed",modifiers:this._getPopperModifiers()}),this._popperInstance.update();return}this._popperInstance=p.createPopper(e,i,{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{}}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 r.html`
       <div class="combobox">
         <logosphere-formfield
           .label=${this.label}
@@ -80,6 +80,7 @@
           .readonly=${this.readOnly}
           .size=${this.size}
           .variant=${this.variant}
+          .forceFocused=${this.isOpen}
           @click=${this._onFieldClick}
         >
           <div class="combobox__wrapper">

package/dist/combobox.cjs

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

package/dist/combobox.js

@@ -1,4 +1,4 @@
-import { C as m } from "./combobox-CTqEZUg6.js";
+import { C as m } from "./combobox-CFF30L-n.js";
 export {
   m as Combobox
 };