@logosphere-ui/core 0.0.0-alpha.42 → 0.0.0-alpha.45

package/dist/collapse-CbRE8ABx.cjs

@@ -0,0 +1,47 @@
+"use strict";const t=require("lit"),s=require("lit/decorators.js");require("./ui-icon-DWl7I5BQ.cjs");const c=":host{display:block}.collapse{font-family:var(--font-family-base);background-color:var(--color-body-bg);overflow:hidden}.collapse--full{border:1px solid var(--color-border);border-radius:var(--radius-base)}.collapse--bottom{border-bottom:1px solid var(--color-border);border-radius:0}.collapse__header{display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-4) var(--spacing-4);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--transition-speed-fast) var(--transition-timing);outline:none}.collapse--small .collapse__header{padding:var(--spacing-2) var(--spacing-4)}.collapse--full .collapse__header{border-radius:calc(var(--radius-base) - 1px)}.collapse--full.collapse--expanded .collapse__header{border-radius:calc(var(--radius-base) - 1px) calc(var(--radius-base) - 1px) 0 0}.collapse--full .collapse__header:hover:not(.collapse--disabled .collapse__header){background-color:var(--color-body-bg-hover)}.collapse--bottom .collapse__header:hover:not(.collapse--disabled .collapse__header){background-color:var(--color-body-bg-hover)}.collapse__header:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;border-radius:calc(var(--radius-base) - 1px)}.collapse__title{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);line-height:1.2;letter-spacing:-.16px;color:var(--color-body-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.collapse__header-extra:empty{display:none}.collapse__header-extra{display:flex;align-items:center;gap:var(--spacing-2);flex-shrink:0}.collapse__header-spacer{flex:1}.collapse__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-secondary);transition:transform var(--transition-speed-base) var(--transition-timing)}.collapse__icon--expanded{transform:rotate(180deg)}.collapse__body{height:0;overflow:hidden;transition:height var(--transition-speed-slow) var(--transition-timing)}.collapse__body-inner{padding:0 var(--spacing-4) var(--spacing-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-body-color)}.collapse--bottom .collapse__body-inner{padding-top:var(--spacing-2)}.collapse--disabled .collapse__header{cursor:not-allowed;pointer-events:none}.collapse--disabled .collapse__title,.collapse--disabled .collapse__icon{color:var(--color-secondary-disabled)}.collapse--disabled.collapse--full{border-color:var(--color-secondary-disabled);background-color:var(--color-light-bg)}.collapse--disabled.collapse--bottom{border-bottom-color:var(--color-secondary-disabled);background-color:transparent}";var h=Object.defineProperty,b=Object.getOwnPropertyDescriptor,a=(i,e,o,r)=>{for(var l=r>1?void 0:r?b(e,o):e,d=i.length-1,p;d>=0;d--)(p=i[d])&&(l=(r?p(e,o,l):p(l))||l);return r&&l&&h(e,o,l),l};const n=typeof requestAnimationFrame<"u"?requestAnimationFrame.bind(window):i=>setTimeout(()=>i(Date.now()),16);exports.Collapse=class extends t.LitElement{constructor(){super(...arguments),this.title="",this.expanded=!1,this.disabled=!1,this.iconPosition="right",this.border="full",this.size="default"}_toggle(){this.disabled||(this.expanded=!this.expanded,this.dispatchEvent(new CustomEvent("toggle",{detail:{expanded:this.expanded},bubbles:!0,composed:!0})))}_onKeydown(e){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this._toggle())}_lockHeightForClose(){const e=this._body;if(!e)return;const o=e.getBoundingClientRect().height;e.style.height=`${o}px`,e.style.overflow="hidden"}willUpdate(e){super.willUpdate(e),e.has("expanded")&&!this.expanded&&this._lockHeightForClose()}updated(e){if(super.updated(e),!e.has("expanded")||!this._body||!this._inner)return;const o=this._body,r=this._inner;this.expanded?(o.style.height="0px",o.style.overflow="hidden",n(()=>{n(()=>{o.style.height=`${r.scrollHeight}px`,o.addEventListener("transitionend",function l(){o.style.height="auto",o.style.overflow="",o.removeEventListener("transitionend",l)},{once:!0})})})):(o.getBoundingClientRect(),n(()=>{n(()=>{o.style.height="0px"})}))}_renderIcon(){return t.html`
+      <span class="collapse__icon ${this.expanded?"collapse__icon--expanded":""}">
+        <ui-icon name="uil-angle-down" size="22"></ui-icon>
+      </span>
+    `}render(){return t.html`
+      <div
+        class="collapse
+               collapse--${this.border}
+               collapse--${this.size}
+               ${this.expanded?"collapse--expanded":""}
+               ${this.disabled?"collapse--disabled":""}"
+      >
+        <!-- Header -->
+        <div
+          class="collapse__header"
+          role="button"
+          tabindex=${this.disabled?"-1":"0"}
+          aria-expanded=${this.expanded?"true":"false"}
+          aria-disabled=${this.disabled?"true":t.nothing}
+          @click=${this._toggle}
+          @keydown=${this._onKeydown}
+        >
+          ${this.iconPosition==="left"?this._renderIcon():t.nothing}
+
+          <div class="collapse__title">
+            <slot name="title">${this.title}</slot>
+          </div>
+
+          <div class="collapse__header-extra">
+            <slot name="extra"></slot>
+          </div>
+
+          <!-- pushes extra to title side, icon stays at far right -->
+          <span class="collapse__header-spacer"></span>
+
+          ${this.iconPosition==="right"?this._renderIcon():t.nothing}
+        </div>
+
+        <!-- Body (animated) -->
+        <div class="collapse__body ${this.expanded?"collapse__body--visible":""}">
+          <div class="collapse__body-inner">
+            <!-- slot="body" for explicit usage; default slot as fallback -->
+            <slot name="body"><slot></slot></slot>
+          </div>
+        </div>
+      </div>
+    `}};exports.Collapse.styles=[t.css`${t.unsafeCSS(c)}`];a([s.property({type:String})],exports.Collapse.prototype,"title",2);a([s.property({type:Boolean,reflect:!0})],exports.Collapse.prototype,"expanded",2);a([s.property({type:Boolean,reflect:!0})],exports.Collapse.prototype,"disabled",2);a([s.property({type:String})],exports.Collapse.prototype,"iconPosition",2);a([s.property({type:String})],exports.Collapse.prototype,"border",2);a([s.property({type:String})],exports.Collapse.prototype,"size",2);a([s.query(".collapse__body-inner")],exports.Collapse.prototype,"_inner",2);a([s.query(".collapse__body")],exports.Collapse.prototype,"_body",2);exports.Collapse=a([s.customElement("logosphere-collapse")],exports.Collapse);

package/dist/collapse-DY6SJ9jS.js

@@ -0,0 +1,141 @@
+import { unsafeCSS as _, css as v, LitElement as g, html as h, nothing as p } from "lit";
+import { property as r, query as b, customElement as u } from "lit/decorators.js";
+import "./ui-icon-BeR-PaPg.js";
+const y = ":host{display:block}.collapse{font-family:var(--font-family-base);background-color:var(--color-body-bg);overflow:hidden}.collapse--full{border:1px solid var(--color-border);border-radius:var(--radius-base)}.collapse--bottom{border-bottom:1px solid var(--color-border);border-radius:0}.collapse__header{display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-4) var(--spacing-4);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--transition-speed-fast) var(--transition-timing);outline:none}.collapse--small .collapse__header{padding:var(--spacing-2) var(--spacing-4)}.collapse--full .collapse__header{border-radius:calc(var(--radius-base) - 1px)}.collapse--full.collapse--expanded .collapse__header{border-radius:calc(var(--radius-base) - 1px) calc(var(--radius-base) - 1px) 0 0}.collapse--full .collapse__header:hover:not(.collapse--disabled .collapse__header){background-color:var(--color-body-bg-hover)}.collapse--bottom .collapse__header:hover:not(.collapse--disabled .collapse__header){background-color:var(--color-body-bg-hover)}.collapse__header:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;border-radius:calc(var(--radius-base) - 1px)}.collapse__title{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);line-height:1.2;letter-spacing:-.16px;color:var(--color-body-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.collapse__header-extra:empty{display:none}.collapse__header-extra{display:flex;align-items:center;gap:var(--spacing-2);flex-shrink:0}.collapse__header-spacer{flex:1}.collapse__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-secondary);transition:transform var(--transition-speed-base) var(--transition-timing)}.collapse__icon--expanded{transform:rotate(180deg)}.collapse__body{height:0;overflow:hidden;transition:height var(--transition-speed-slow) var(--transition-timing)}.collapse__body-inner{padding:0 var(--spacing-4) var(--spacing-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-body-color)}.collapse--bottom .collapse__body-inner{padding-top:var(--spacing-2)}.collapse--disabled .collapse__header{cursor:not-allowed;pointer-events:none}.collapse--disabled .collapse__title,.collapse--disabled .collapse__icon{color:var(--color-secondary-disabled)}.collapse--disabled.collapse--full{border-color:var(--color-secondary-disabled);background-color:var(--color-light-bg)}.collapse--disabled.collapse--bottom{border-bottom-color:var(--color-secondary-disabled);background-color:transparent}";
+var f = Object.defineProperty, x = Object.getOwnPropertyDescriptor, t = (e, o, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? x(o, i) : o, d = e.length - 1, c; d >= 0; d--)
+    (c = e[d]) && (s = (a ? c(o, i, s) : c(s)) || s);
+  return a && s && f(o, i, s), s;
+};
+const n = typeof requestAnimationFrame < "u" ? requestAnimationFrame.bind(window) : (e) => setTimeout(() => e(Date.now()), 16);
+let l = class extends g {
+  constructor() {
+    super(...arguments), this.title = "", this.expanded = !1, this.disabled = !1, this.iconPosition = "right", this.border = "full", this.size = "default";
+  }
+  // ── Toggle ────────────────────────────────────────────────────────────────
+  _toggle() {
+    this.disabled || (this.expanded = !this.expanded, this.dispatchEvent(
+      new CustomEvent("toggle", {
+        detail: { expanded: this.expanded },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  _onKeydown(e) {
+    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._toggle());
+  }
+  // ── Animated height ───────────────────────────────────────────────────────
+  /**
+   * CLOSING: Called inside willUpdate — BEFORE Lit re-renders — so we can
+   * capture and lock the current height before the CSS class is removed.
+   */
+  _lockHeightForClose() {
+    const e = this._body;
+    if (!e) return;
+    const o = e.getBoundingClientRect().height;
+    e.style.height = `${o}px`, e.style.overflow = "hidden";
+  }
+  willUpdate(e) {
+    super.willUpdate(e), e.has("expanded") && !this.expanded && this._lockHeightForClose();
+  }
+  updated(e) {
+    if (super.updated(e), !e.has("expanded") || !this._body || !this._inner) return;
+    const o = this._body, i = this._inner;
+    this.expanded ? (o.style.height = "0px", o.style.overflow = "hidden", n(() => {
+      n(() => {
+        o.style.height = `${i.scrollHeight}px`, o.addEventListener("transitionend", function a() {
+          o.style.height = "auto", o.style.overflow = "", o.removeEventListener("transitionend", a);
+        }, { once: !0 });
+      });
+    })) : (o.getBoundingClientRect(), n(() => {
+      n(() => {
+        o.style.height = "0px";
+      });
+    }));
+  }
+  // ── Render ────────────────────────────────────────────────────────────────
+  _renderIcon() {
+    return h`
+      <span class="collapse__icon ${this.expanded ? "collapse__icon--expanded" : ""}">
+        <ui-icon name="uil-angle-down" size="22"></ui-icon>
+      </span>
+    `;
+  }
+  render() {
+    return h`
+      <div
+        class="collapse
+               collapse--${this.border}
+               collapse--${this.size}
+               ${this.expanded ? "collapse--expanded" : ""}
+               ${this.disabled ? "collapse--disabled" : ""}"
+      >
+        <!-- Header -->
+        <div
+          class="collapse__header"
+          role="button"
+          tabindex=${this.disabled ? "-1" : "0"}
+          aria-expanded=${this.expanded ? "true" : "false"}
+          aria-disabled=${this.disabled ? "true" : p}
+          @click=${this._toggle}
+          @keydown=${this._onKeydown}
+        >
+          ${this.iconPosition === "left" ? this._renderIcon() : p}
+
+          <div class="collapse__title">
+            <slot name="title">${this.title}</slot>
+          </div>
+
+          <div class="collapse__header-extra">
+            <slot name="extra"></slot>
+          </div>
+
+          <!-- pushes extra to title side, icon stays at far right -->
+          <span class="collapse__header-spacer"></span>
+
+          ${this.iconPosition === "right" ? this._renderIcon() : p}
+        </div>
+
+        <!-- Body (animated) -->
+        <div class="collapse__body ${this.expanded ? "collapse__body--visible" : ""}">
+          <div class="collapse__body-inner">
+            <!-- slot="body" for explicit usage; default slot as fallback -->
+            <slot name="body"><slot></slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+l.styles = [v`${_(y)}`];
+t([
+  r({ type: String })
+], l.prototype, "title", 2);
+t([
+  r({ type: Boolean, reflect: !0 })
+], l.prototype, "expanded", 2);
+t([
+  r({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled", 2);
+t([
+  r({ type: String })
+], l.prototype, "iconPosition", 2);
+t([
+  r({ type: String })
+], l.prototype, "border", 2);
+t([
+  r({ type: String })
+], l.prototype, "size", 2);
+t([
+  b(".collapse__body-inner")
+], l.prototype, "_inner", 2);
+t([
+  b(".collapse__body")
+], l.prototype, "_body", 2);
+l = t([
+  u("logosphere-collapse")
+], l);
+export {
+  l as C
+};

package/dist/collapse.cjs

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

package/dist/collapse.js

@@ -0,0 +1,4 @@
+import { C as e } from "./collapse-DY6SJ9jS.js";
+export {
+  e as Collapse
+};

package/dist/combobox-BAa3UAQs.cjs

@@ -0,0 +1,113 @@
+"use strict";const r=require("lit"),o=require("lit/decorators.js"),b=require("@popperjs/core");require("./badge-CKSG_MyA.cjs");require("./checkbox-BAbPDN6x.cjs");require("./formfield-JXiv9mvJ.cjs");require("./ui-icon-DWl7I5BQ.cjs");const u=':host{display:block}.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%;box-sizing:border-box;padding-right:16px;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(--combobox-tag-bg, var(--color-light));border-radius:var(--radius-sm);font-size:var(--font-size-xs);color:var(--combobox-tag-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(--combobox-clear-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__group--titled+.combobox__group--titled:before{content:"";display:block;margin:var(--spacing-2) 0;border-top:1px solid var(--color-border)}.combobox__group-title{margin-top:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3) var(--spacing-2);font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);color:var(--color-tertiary)}.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 m=Object.defineProperty,_=Object.getOwnPropertyDescriptor,i=(d,e,t,s)=>{for(var n=s>1?void 0:s?_(e,t):e,l=d.length-1,p;l>=0;l--)(p=d[l])&&(n=(s?p(e,t,n):p(n))||n);return s&&n&&m(e,t,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._pendingValue=void 0,this.isOpen=!1,this.focusedIndex=-1,this._filteredItems=[],this._filteredGroups=[],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,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.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 t=e.composedPath();if(!(t.some(l=>{const p=l?.classList;return p?.contains("combobox__trigger")||p?.contains("combobox__chevron")})||t.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()}}}get value(){return this.multiple?this.selected.map(e=>e[this.optionValue]):this.selected[0]?.[this.optionValue]}set value(e){this._pendingValue=e,this._applyPendingValue(),this.requestUpdate()}_applyPendingValue(){if(this._pendingValue===void 0||!this.items.length)return;const e=this.multiple?Array.isArray(this._pendingValue)?this._pendingValue:[this._pendingValue]:[this._pendingValue];this.selected=this.items.filter(t=>e.includes(t[this.optionValue])),this._pendingValue=void 0}willUpdate(e){if(e.has("items")&&this._applyPendingValue(),e.has("items")||e.has("inputValue")||e.has("optionLabel")){const t=this.inputValue.toLocaleLowerCase(),s=a=>a.filter(c=>String(c[this.optionLabel]??"").toLocaleLowerCase().includes(t)),n=[];let l=[];const p=()=>{const a=s(l);a.length&&n.push({label:"",items:a}),l=[]};this.items.forEach(a=>{const c=this._getGroupItems(a);if(!c){l=[...l,a];return}p();const h=s(c);h.length&&n.push({label:this._getGroupLabel(a),items:h})}),p(),this._filteredGroups=n,this._filteredItems=this._filteredGroups.flatMap(a=>a.items)}}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"})})}_getGroupItems(e){if(Array.isArray(e.options))return e.options;if(Array.isArray(e.items))return e.items}_getGroupLabel(e){return String(e.label??e.title??e.name??e[this.optionLabel]??"")}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(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._pendingValue=void 0,this.dispatchEvent(new CustomEvent("selected",{detail:{selected:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{value:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("lgsChange",{bubbles:!0,composed:!0,detail:{value:this.multiple?e.map(t=>t[this.optionValue]):e[0]?.[this.optionValue],selected:e}}))}_renderTagList(){return r.html`
+      <div class="combobox__tags">
+        ${this.selected.map(e=>r.html`
+            <logosphere-badge
+              variant="default"
+              text=${String(e[this.optionLabel])}
+              ?closeable=${!this.readOnly}
+              @close=${t=>this._removeTag(e,t)}
+            ></logosphere-badge>
+          `)}
+      </div>
+    `}_renderItemContent(e,t){return this.itemRenderer?this.itemRenderer(e,{index:t,selected:this.isSelected(e),focused:t===this.focusedIndex,multiple:this.multiple}):e[this.optionLabel]}_renderTriggerContent(){return this.filterable&&!this.multiple?r.html`
+        <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?r.html`
+              <button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
+                <ui-icon name="uil-times" size="14"></ui-icon>
+              </button>
+            `:r.nothing}
+      `:this.multiple&&this.selected.length?this._renderTagList():!this.multiple&&this.selected.length?r.html`
+        <span class="combobox__single-value">${this.selected[0][this.optionLabel]}</span>
+        ${this.clearable&&!this.readOnly?r.html`
+              <button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
+                <ui-icon name="uil-times" size="14"></ui-icon>
+              </button>
+            `:r.nothing}
+      `:r.html`<span class="combobox__placeholder">${this.placeholder}</span>`}_renderDropdown(){let e=0;return r.html`
+      <div data-combobox-popper popover="manual" class="combobox__dropdown">
+        ${this.filterable&&this.multiple?r.html`
+              <input
+                class="combobox__search"
+                type="text"
+                placeholder=${this.placeholder}
+                .value=${this.inputValue}
+                @input=${this._onFilterInput}
+                @keydown=${this._handleKeydown}
+                @click=${this._stopPropagation}
+              />
+            `:r.nothing}
+
+        <div class="combobox__list">
+          ${this._filteredItems.length===0?r.html`<div class="combobox__empty">${this.emptyMessage}</div>`:this._filteredGroups.map(t=>r.html`
+                  <div class="combobox__group ${t.label?"combobox__group--titled":""}">
+                    ${t.label?r.html`<div class="combobox__group-title">${t.label}</div>`:r.nothing}
+                    ${t.items.map(s=>{const n=e++;return r.html`
+                        <div
+                          class="combobox__item
+                          ${!this.multiple&&this.isSelected(s)?"combobox__item--selected":""}
+                          ${n===this.focusedIndex?"combobox__item--focused":""}"
+                          @click=${l=>this._selectItem(s,l)}
+                          @mouseenter=${()=>{this.focusedIndex=n}}
+                        >
+                          ${this.multiple?r.html`
+                                <logosphere-checkbox
+                                  .checked=${this.isSelected(s)}
+                                  .value=${s[this.optionValue]}
+                                  @click=${this._stopPropagation}
+                                ></logosphere-checkbox>
+                              `:r.nothing}
+                          ${this._renderItemContent(s,n)}
+                        </div>
+                      `})}
+                  </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(),t=this._dropdownElement;if(!this.isOpen||!e||!t||!this.isConnected)return;const s=Math.round(e.getBoundingClientRect().width);if(t.style.width=`${s}px`,this._popperInstance){this._popperInstance.setOptions({placement:"bottom-start",strategy:"fixed",modifiers:this._getPopperModifiers()}),this._popperInstance.update();return}this._popperInstance=b.createPopper(e,t,{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}
+          .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?r.nothing: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>
+    `}};exports.Combobox.styles=[r.css`
+      ${r.unsafeCSS(u)}
+    `];i([o.property({type:String})],exports.Combobox.prototype,"label",2);i([o.property({type:String})],exports.Combobox.prototype,"helper",2);i([o.property({type:String})],exports.Combobox.prototype,"error",2);i([o.property({type:String})],exports.Combobox.prototype,"placeholder",2);i([o.property({type:Boolean})],exports.Combobox.prototype,"required",2);i([o.property({type:Boolean})],exports.Combobox.prototype,"disabled",2);i([o.property({type:Boolean})],exports.Combobox.prototype,"readOnly",2);i([o.property({type:String})],exports.Combobox.prototype,"variant",2);i([o.property({type:Boolean})],exports.Combobox.prototype,"multiple",2);i([o.property({type:Boolean})],exports.Combobox.prototype,"filterable",2);i([o.property({type:String})],exports.Combobox.prototype,"optionLabel",2);i([o.property({type:String})],exports.Combobox.prototype,"optionValue",2);i([o.property({type:String})],exports.Combobox.prototype,"emptyMessage",2);i([o.property({type:Array})],exports.Combobox.prototype,"items",2);i([o.property({attribute:!1})],exports.Combobox.prototype,"itemRenderer",2);i([o.property({type:String})],exports.Combobox.prototype,"size",2);i([o.property({type:Boolean})],exports.Combobox.prototype,"clearable",2);i([o.state()],exports.Combobox.prototype,"selected",2);i([o.state()],exports.Combobox.prototype,"inputValue",2);i([o.property({attribute:!1})],exports.Combobox.prototype,"value",1);i([o.state()],exports.Combobox.prototype,"isOpen",2);i([o.state()],exports.Combobox.prototype,"focusedIndex",2);i([o.query(".combobox__wrapper")],exports.Combobox.prototype,"_referenceElement",2);i([o.query("logosphere-formfield")],exports.Combobox.prototype,"_formFieldElement",2);i([o.query("[data-combobox-popper]")],exports.Combobox.prototype,"_dropdownElement",2);exports.Combobox=i([o.customElement("logosphere-combobox")],exports.Combobox);

package/dist/{combobox-jak7Ac1m.js → combobox-BR05Tgfd.js}

@@ -1,11 +1,11 @@
 import { unsafeCSS as _, css as f, LitElement as g, html as a, nothing as d } from "lit";
 import { property as n, state as b, query as u, customElement as x } from "lit/decorators.js";
 import { createPopper as v } from "@popperjs/core";
-import "./badge-DsDxWEHx.js";
-import "./checkbox-CX0LgsWP.js";
-import "./formfield-O327HYt0.js";
-import "./ui-icon-BMJNdIOq.js";
-const y = '.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__group--titled+.combobox__group--titled:before{content:"";display:block;margin:var(--spacing-2) 0;border-top:1px solid var(--color-border)}.combobox__group-title{margin-top:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3) var(--spacing-2);font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);color:var(--color-tertiary)}.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}';
+import "./badge-BhINg1p5.js";
+import "./checkbox-CTfbav6M.js";
+import "./formfield-ss2mFweu.js";
+import "./ui-icon-BeR-PaPg.js";
+const y = ':host{display:block}.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%;box-sizing:border-box;padding-right:16px;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(--combobox-tag-bg, var(--color-light));border-radius:var(--radius-sm);font-size:var(--font-size-xs);color:var(--combobox-tag-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(--combobox-clear-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__group--titled+.combobox__group--titled:before{content:"";display:block;margin:var(--spacing-2) 0;border-top:1px solid var(--color-border)}.combobox__group-title{margin-top:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3) var(--spacing-2);font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);color:var(--color-tertiary)}.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 w = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (e, t, r, l) => {
   for (var s = l > 1 ? void 0 : l ? $(t, r) : t, p = e.length - 1, c; p >= 0; p--)
     (c = e[p]) && (s = (l ? c(t, r, s) : c(s)) || s);
@@ -13,7 +13,7 @@ var w = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (e, t, r
 };
 let o = class extends g {
   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._filteredGroups = [], this._handleOutsideClick = (e) => {
+    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._pendingValue = void 0, this.isOpen = !1, this.focusedIndex = -1, this._filteredItems = [], this._filteredGroups = [], this._handleOutsideClick = (e) => {
       e.composedPath().includes(this) || this._closeDropdown();
     }, this._handleKeydown = (e) => {
       if (!(this.readOnly || this.disabled))
@@ -68,9 +68,20 @@ let o = class extends g {
       }
     };
   }
+  get value() {
+    return this.multiple ? this.selected.map((e) => e[this.optionValue]) : this.selected[0]?.[this.optionValue];
+  }
+  set value(e) {
+    this._pendingValue = e, this._applyPendingValue(), this.requestUpdate();
+  }
+  _applyPendingValue() {
+    if (this._pendingValue === void 0 || !this.items.length) return;
+    const e = this.multiple ? Array.isArray(this._pendingValue) ? this._pendingValue : [this._pendingValue] : [this._pendingValue];
+    this.selected = this.items.filter((t) => e.includes(t[this.optionValue])), this._pendingValue = void 0;
+  }
   // ==================== LIFECYCLE ====================
   willUpdate(e) {
-    if (e.has("items") || e.has("inputValue") || e.has("optionLabel")) {
+    if (e.has("items") && this._applyPendingValue(), e.has("items") || e.has("inputValue") || e.has("optionLabel")) {
       const t = this.inputValue.toLocaleLowerCase(), r = (c) => c.filter(
         (h) => String(h[this.optionLabel] ?? "").toLocaleLowerCase().includes(t)
       ), l = [];
@@ -146,10 +157,19 @@ let o = class extends g {
     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);
   }
   setSelected(e) {
-    this.selected = e, this.dispatchEvent(
+    this.selected = e, this._pendingValue = void 0, this.dispatchEvent(
       new CustomEvent("selected", { detail: { selected: e }, bubbles: !0, composed: !0 })
     ), this.dispatchEvent(
       new CustomEvent("change", { detail: { value: e }, bubbles: !0, composed: !0 })
+    ), this.dispatchEvent(
+      new CustomEvent("lgsChange", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          value: this.multiple ? e.map((t) => t[this.optionValue]) : e[0]?.[this.optionValue],
+          selected: e
+        }
+      })
     );
   }
   // ==================== RENDER PARTS ====================
@@ -414,6 +434,9 @@ i([
 i([
   b()
 ], o.prototype, "inputValue", 2);
+i([
+  n({ attribute: !1 })
+], o.prototype, "value", 1);
 i([
   b()
 ], o.prototype, "isOpen", 2);

package/dist/combobox.cjs

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

package/dist/combobox.js

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