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

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

@@ -1,19 +1,19 @@
-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 { 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-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;
+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}';
+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);
+  return l && s && w(t, r, s), s;
 };
-let t = class extends _ {
+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._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.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))
@@ -31,8 +31,8 @@ let t = class extends _ {
             e.preventDefault(), this._closeDropdown();
             break;
         }
-    }, this._removeTag = (e, o) => {
-      o.stopPropagation(), this.setSelected(
+    }, this._removeTag = (e, t) => {
+      t.stopPropagation(), this.setSelected(
         this.selected.filter((r) => r[this.optionValue] !== e[this.optionValue])
       );
     }, this._clearSelection = (e) => {
@@ -45,12 +45,12 @@ let t = class extends _ {
       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")
+      const t = e.composedPath();
+      if (!(t.some((s) => {
+        const p = s?.classList;
+        return p?.contains("combobox__trigger") || p?.contains("combobox__chevron");
+      }) || t.some(
+        (s) => s?.classList?.contains("combobox__dropdown")
       ))) {
         if (this.filterable && !this.multiple) {
           this.isOpen = !0, this._focusFilterInput();
@@ -71,10 +71,27 @@ let t = class extends _ {
   // ==================== 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)
-      );
+      const t = this.inputValue.toLocaleLowerCase(), r = (c) => c.filter(
+        (h) => String(h[this.optionLabel] ?? "").toLocaleLowerCase().includes(t)
+      ), l = [];
+      let s = [];
+      const p = () => {
+        const c = r(s);
+        c.length && l.push({ label: "", items: c }), s = [];
+      };
+      this.items.forEach((c) => {
+        const h = this._getGroupItems(c);
+        if (!h) {
+          s = [...s, c];
+          return;
+        }
+        p();
+        const m = r(h);
+        m.length && l.push({
+          label: this._getGroupLabel(c),
+          items: m
+        });
+      }), p(), this._filteredGroups = l, this._filteredItems = this._filteredGroups.flatMap((c) => c.items);
     }
   }
   updated(e) {
@@ -109,17 +126,24 @@ let t = class extends _ {
       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] ?? "");
+  }
   // ==================== SELECTION ====================
   selectedItems() {
     return this.selected;
   }
   isSelected(e) {
-    return this.selected.some((o) => o[this.optionValue] === e[this.optionValue]);
+    return this.selected.some((t) => t[this.optionValue] === e[this.optionValue]);
   }
-  _selectItem(e, o) {
-    o.stopPropagation();
+  _selectItem(e, t) {
+    t.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);
+    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(
@@ -130,23 +154,31 @@ let t = class extends _ {
   }
   // ==================== RENDER PARTS ====================
   _renderTagList() {
-    return n`
+    return a`
       <div class="combobox__tags">
         ${this.selected.map(
-      (e) => n`
+      (e) => a`
             <logosphere-badge
               variant="default"
               text=${String(e[this.optionLabel])}
               ?closeable=${!this.readOnly}
-              @close=${(o) => this._removeTag(e, o)}
+              @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 ? n`
+    return this.filterable && !this.multiple ? a`
         <input
           class="combobox__filter-input"
           type="text"
@@ -158,24 +190,25 @@ let t = class extends _ {
           @keydown=${this._handleKeydown}
           @click=${this._stopPropagation}
         />
-        ${this.clearable && !this.readOnly && this.selected.length ? n`
+        ${this.clearable && !this.readOnly && this.selected.length ? a`
               <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`
+            ` : d}
+      ` : this.multiple && this.selected.length ? this._renderTagList() : !this.multiple && this.selected.length ? a`
         <span class="combobox__single-value">${this.selected[0][this.optionLabel]}</span>
-        ${this.clearable && !this.readOnly ? n`
+        ${this.clearable && !this.readOnly ? a`
               <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>`;
+            ` : d}
+      ` : a`<span class="combobox__placeholder">${this.placeholder}</span>`;
   }
   _renderDropdown() {
-    return n`
+    let e = 0;
+    return a`
       <div data-combobox-popper popover="manual" class="combobox__dropdown">
-        ${this.filterable && this.multiple ? n`
+        ${this.filterable && this.multiple ? a`
               <input
                 class="combobox__search"
                 type="text"
@@ -185,28 +218,36 @@ let t = class extends _ {
                 @keydown=${this._handleKeydown}
                 @click=${this._stopPropagation}
               />
-            ` : p}
+            ` : d}
 
         <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]}
+          ${this._filteredItems.length === 0 ? a`<div class="combobox__empty">${this.emptyMessage}</div>` : this._filteredGroups.map(
+      (t) => a`
+                  <div class="combobox__group ${t.label ? "combobox__group--titled" : ""}">
+                    ${t.label ? a`<div class="combobox__group-title">${t.label}</div>` : d}
+                    ${t.items.map((r) => {
+        const l = e++;
+        return a`
+                        <div
+                          class="combobox__item
+                          ${!this.multiple && this.isSelected(r) ? "combobox__item--selected" : ""}
+                          ${l === this.focusedIndex ? "combobox__item--focused" : ""}"
+                          @click=${(s) => this._selectItem(r, s)}
+                          @mouseenter=${() => {
+          this.focusedIndex = l;
+        }}
+                        >
+                          ${this.multiple ? a`
+                                <logosphere-checkbox
+                                  .checked=${this.isSelected(r)}
+                                  .value=${r[this.optionValue]}
+                                  @click=${this._stopPropagation}
+                                ></logosphere-checkbox>
+                              ` : d}
+                          ${this._renderItemContent(r, l)}
+                        </div>
+                      `;
+      })}
                   </div>
                 `
     )}
@@ -233,10 +274,10 @@ let t = class extends _ {
     ) ?? this._referenceElement;
   }
   _updatePopper() {
-    const e = this._getPopperReferenceElement(), o = this._dropdownElement;
-    if (!this.isOpen || !e || !o || !this.isConnected) return;
+    const e = this._getPopperReferenceElement(), t = this._dropdownElement;
+    if (!this.isOpen || !e || !t || !this.isConnected) return;
     const r = Math.round(e.getBoundingClientRect().width);
-    if (o.style.width = `${r}px`, this._popperInstance) {
+    if (t.style.width = `${r}px`, this._popperInstance) {
       this._popperInstance.setOptions({
         placement: "bottom-start",
         strategy: "fixed",
@@ -244,7 +285,7 @@ let t = class extends _ {
       }), this._popperInstance.update();
       return;
     }
-    this._popperInstance = g(e, o, {
+    this._popperInstance = v(e, t, {
       placement: "bottom-start",
       strategy: "fixed",
       modifiers: this._getPopperModifiers()
@@ -273,7 +314,7 @@ let t = class extends _ {
       !this.readOnly && !this.disabled && this.isOpen ? "combobox__trigger--open" : "",
       this.clearable ? "" : "combobox__trigger--not-clearable"
     ].filter(Boolean).join(" ");
-    return n`
+    return a`
       <div class="combobox">
         <logosphere-formfield
           .label=${this.label}
@@ -293,7 +334,7 @@ let t = class extends _ {
               class="${e}"
               tabindex="${this.readOnly || this.filterable || this.disabled ? -1 : 0}"
               @click=${this._onTriggerClick}
-              @keydown=${this.filterable ? p : this._handleKeydown}
+              @keydown=${this.filterable ? d : this._handleKeydown}
             >
               ${this._renderTriggerContent()}
             </div>
@@ -311,83 +352,86 @@ let t = class extends _ {
     `;
   }
 };
-t.styles = [
-  m`
-      ${u(x)}
+o.styles = [
+  f`
+      ${_(y)}
     `
 ];
 i([
-  s({ type: String })
-], t.prototype, "label", 2);
+  n({ type: String })
+], o.prototype, "label", 2);
+i([
+  n({ type: String })
+], o.prototype, "helper", 2);
 i([
-  s({ type: String })
-], t.prototype, "helper", 2);
+  n({ type: String })
+], o.prototype, "error", 2);
 i([
-  s({ type: String })
-], t.prototype, "error", 2);
+  n({ type: String })
+], o.prototype, "placeholder", 2);
 i([
-  s({ type: String })
-], t.prototype, "placeholder", 2);
+  n({ type: Boolean })
+], o.prototype, "required", 2);
 i([
-  s({ type: Boolean })
-], t.prototype, "required", 2);
+  n({ type: Boolean })
+], o.prototype, "disabled", 2);
 i([
-  s({ type: Boolean })
-], t.prototype, "disabled", 2);
+  n({ type: Boolean })
+], o.prototype, "readOnly", 2);
 i([
-  s({ type: Boolean })
-], t.prototype, "readOnly", 2);
+  n({ type: String })
+], o.prototype, "variant", 2);
 i([
-  s({ type: String })
-], t.prototype, "variant", 2);
+  n({ type: Boolean })
+], o.prototype, "multiple", 2);
 i([
-  s({ type: Boolean })
-], t.prototype, "multiple", 2);
+  n({ type: Boolean })
+], o.prototype, "filterable", 2);
 i([
-  s({ type: Boolean })
-], t.prototype, "filterable", 2);
+  n({ type: String })
+], o.prototype, "optionLabel", 2);
 i([
-  s({ type: String })
-], t.prototype, "optionLabel", 2);
+  n({ type: String })
+], o.prototype, "optionValue", 2);
 i([
-  s({ type: String })
-], t.prototype, "optionValue", 2);
+  n({ type: String })
+], o.prototype, "emptyMessage", 2);
 i([
-  s({ type: String })
-], t.prototype, "emptyMessage", 2);
+  n({ type: Array })
+], o.prototype, "items", 2);
 i([
-  s({ type: Array })
-], t.prototype, "items", 2);
+  n({ attribute: !1 })
+], o.prototype, "itemRenderer", 2);
 i([
-  s({ type: String })
-], t.prototype, "size", 2);
+  n({ type: String })
+], o.prototype, "size", 2);
 i([
-  s({ type: Boolean })
-], t.prototype, "clearable", 2);
+  n({ type: Boolean })
+], o.prototype, "clearable", 2);
 i([
-  d()
-], t.prototype, "selected", 2);
+  b()
+], o.prototype, "selected", 2);
 i([
-  d()
-], t.prototype, "inputValue", 2);
+  b()
+], o.prototype, "inputValue", 2);
 i([
-  d()
-], t.prototype, "isOpen", 2);
+  b()
+], o.prototype, "isOpen", 2);
 i([
-  d()
-], t.prototype, "focusedIndex", 2);
+  b()
+], o.prototype, "focusedIndex", 2);
 i([
-  b(".combobox__wrapper")
-], t.prototype, "_referenceElement", 2);
+  u(".combobox__wrapper")
+], o.prototype, "_referenceElement", 2);
 i([
-  b("logosphere-formfield")
-], t.prototype, "_formFieldElement", 2);
+  u("logosphere-formfield")
+], o.prototype, "_formFieldElement", 2);
 i([
-  b("[data-combobox-popper]")
-], t.prototype, "_dropdownElement", 2);
-t = i([
-  f("logosphere-combobox")
-], t);
+  u("[data-combobox-popper]")
+], o.prototype, "_dropdownElement", 2);
+o = i([
+  x("logosphere-combobox")
+], o);
 export {
-  t as C
+  o as C
 };

package/dist/combobox.cjs

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

package/dist/combobox.js

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

package/dist/{datepicker-tJbIvNpy.js → datepicker-BgysIOZI.js}

@@ -3,8 +3,8 @@ import { property as a, state as l, query as u, customElement as m } from "lit/d
 import { live as y } from "lit/directives/live.js";
 import { createPopper as b } from "@popperjs/core";
 import "./formfield-O327HYt0.js";
-import { s as v, D as E } from "./calendar-B7bSuIt4.js";
-import "./ui-icon-Ctn4nGFa.js";
+import { s as v, D as E } from "./calendar-CZ_IN2TF.js";
+import "./ui-icon-BMJNdIOq.js";
 import D from "dayjs";
 const S = ".dp{display:block;position:relative;width:100%;font-family:var(--font-family-base)}.dp__field,.dp__reference{width:100%}.dp__input{width:100%;border:none;outline:none;background:transparent;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);line-height:1.5}.dp__input::placeholder{color:var(--color-tertiary)}.dp__input:disabled{cursor:not-allowed}.dp__icon-btn{border:none;background:transparent;color:var(--color-gray-400);cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;line-height:1;transition:color var(--transition-speed-fast) var(--transition-timing)}.dp__icon-btn_suffix{padding-right:var(--spacing-1)}.dp__icon-btn:hover{color:var(--color-gray-600)}.dp__icon-btn:disabled{cursor:not-allowed;opacity:.5}.dp__popup{background-color:var(--color-body-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);z-index:var(--z-index-dropdown);padding:var(--spacing-4);box-sizing:border-box;overflow:hidden;max-height:calc(100vh - 16px)}";
 var C = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (t, e, n, s) => {

package/dist/{datepicker-BCNJROwD.cjs → datepicker-DOBmbxlo.cjs}

@@ -1,4 +1,4 @@
-"use strict";const s=require("lit"),r=require("lit/decorators.js"),d=require("lit/directives/live.js"),u=require("@popperjs/core");require("./formfield-CRcyUMvQ.cjs");const h=require("./calendar-DtpJBtpq.cjs");require("./ui-icon-jKyMV1zp.cjs");const _=require("dayjs"),c=".dp{display:block;position:relative;width:100%;font-family:var(--font-family-base)}.dp__field,.dp__reference{width:100%}.dp__input{width:100%;border:none;outline:none;background:transparent;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);line-height:1.5}.dp__input::placeholder{color:var(--color-tertiary)}.dp__input:disabled{cursor:not-allowed}.dp__icon-btn{border:none;background:transparent;color:var(--color-gray-400);cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;line-height:1;transition:color var(--transition-speed-fast) var(--transition-timing)}.dp__icon-btn_suffix{padding-right:var(--spacing-1)}.dp__icon-btn:hover{color:var(--color-gray-600)}.dp__icon-btn:disabled{cursor:not-allowed;opacity:.5}.dp__popup{background-color:var(--color-body-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);z-index:var(--z-index-dropdown);padding:var(--spacing-4);box-sizing:border-box;overflow:hidden;max-height:calc(100vh - 16px)}";var g=Object.defineProperty,f=Object.getOwnPropertyDescriptor,i=(p,e,t,a)=>{for(var n=a>1?void 0:a?f(e,t):e,o=p.length-1,l;o>=0;o--)(l=p[o])&&(n=(a?l(e,t,n):l(n))||n);return a&&n&&g(e,t,n),n};let y=0;const m=()=>`dp-${++y}`;exports.LogosphereDatePicker=class extends s.LitElement{constructor(){super(...arguments),this.value=null,this.min=null,this.max=null,this.required=!1,this.disabled=!1,this.readonly=!1,this.expandFactor=1.05,this.placeholder="GG/AA/YYYY veya GG.AA.YYYY",this.label="",this.helper="",this.error="",this.size="default",this.variant="default",this.rangeMode=!1,this.disabledDays=[],this.rangeStart=null,this.rangeEnd=null,this._open=!1,this._rangeStart=null,this._rangeEnd=null,this._hasError=!1,this._errorMsg="",this._inputDraft=null,this._errorTimer=null,this.inputId=m(),this._outsideClick=e=>{this._open&&(e.composedPath().includes(this)||(this._parseAndSetDate(),this._toggleOpen(!1)))},this._openDropdown=()=>{this._toggleOpen(!0)},this._onBlur=()=>{this._parseAndSetDate()}}willUpdate(e){e.has("rangeStart")&&(this._rangeStart=this.rangeStart),e.has("rangeEnd")&&(this._rangeEnd=this.rangeEnd),e.has("value")&&!this._isInputFocused()&&(this._inputDraft=null)}connectedCallback(){super.connectedCallback(),window.addEventListener("click",this._outsideClick,!0)}disconnectedCallback(){window.removeEventListener("click",this._outsideClick,!0),this._destroyPopper(),this._errorTimer&&clearTimeout(this._errorTimer),super.disconnectedCallback()}updated(e){if(super.updated(e),e.has("_open")){this._open?this._updatePopper():this._destroyPopper();return}this._open&&this._updatePopper()}_safeDay(e){return h.safeDay(e)}_isInputFocused(){return this.shadowRoot?.activeElement===this._inputElement}_withinBounds(e){const t=this._safeDay(this.min),a=this._safeDay(this.max);return!(t&&e.isBefore(t,"day")||a&&e.isAfter(a,"day")||this.disabledDays.includes(e.day()))}_displayValue(){if(this.rangeMode&&this._rangeStart&&this._rangeEnd){const t=this._safeDay(this._rangeStart),a=this._safeDay(this._rangeEnd);if(t&&a)return`${t.format("DD/MM/YYYY")} - ${a.format("DD/MM/YYYY")}`}const e=this._safeDay(this.value);return e?e.format("DD/MM/YYYY"):""}_inputValue(){return this._inputDraft??this._displayValue()}_emitChange(e){this.value=e,this.dispatchEvent(new CustomEvent("change",{detail:{value:e}})),this.onChange?.(e)}_emitRangeChange(){if(!this._rangeStart||!this._rangeEnd)return;const e={start:this._rangeStart,end:this._rangeEnd};this.dispatchEvent(new CustomEvent("rangeChange",{detail:e})),this.onRangeChange?.(e)}_showInputError(e){this._errorTimer&&clearTimeout(this._errorTimer),this._hasError=!0,this._errorMsg=e,this._errorTimer=setTimeout(()=>this._clearInputError(),3e3)}_clearInputError(){this._hasError=!1,this._errorMsg="",this._errorTimer&&(clearTimeout(this._errorTimer),this._errorTimer=null)}_toggleOpen(e){if(this.disabled)return;const t=e??!this._open;this._open=t,t&&this.updateComplete.then(()=>this._updatePopper())}_onInput(e){const t=e.target.value;this._inputDraft=t,t.trim()||(this._emitChange(null),this.rangeMode&&(this._rangeStart=null,this._rangeEnd=null)),this._clearInputError()}_parseSingleDate(e){for(const t of h.DATE_FORMATS){const a=_(e,t,!0);if(a.isValid())return a}return this._safeDay(e)}_parseRangeInput(e){const t=e.split(/\s+-\s+/);if(t.length!==2)return null;const a=this._parseSingleDate(t[0].trim()),n=this._parseSingleDate(t[1].trim());return!a||!n?null:a.isAfter(n,"day")?{start:n,end:a}:{start:a,end:n}}_onKeydown(e){(e.key==="Tab"||e.key==="Enter")&&this._parseAndSetDate()}_parseAndSetDate(){const e=this._inputElement;if(!e)return;const t=e.value.trim();if(!t){if(this.rangeMode&&this._rangeStart&&!this._rangeEnd)return;this._emitChange(null),this.rangeMode&&(this._rangeStart=null,this._rangeEnd=null),this._inputDraft=null;return}if(this.rangeMode){const n=this._parseRangeInput(t);if(n){if(this._withinBounds(n.start)&&this._withinBounds(n.end)){this._rangeStart=n.start.format("YYYY-MM-DD"),this._rangeEnd=n.end.format("YYYY-MM-DD"),this._inputDraft=null,this._clearInputError(),this._emitRangeChange();return}this._showInputError("Seçilen aralık sınırlar dışında.");return}const o=this._parseSingleDate(t);if(o&&this._withinBounds(o)){this._rangeStart=o.format("YYYY-MM-DD"),this._rangeEnd=null,this._inputDraft=null,this._clearInputError();return}this._showInputError("Geçersiz aralık formatı. Örnek: 19/09/2025 - 25/09/2025");return}const a=this._parseSingleDate(t);a&&this._withinBounds(a)?(this._emitChange(a.format("YYYY-MM-DD")),this._inputDraft=null,this._clearInputError()):this._showInputError("Geçersiz tarih formatı. Örnek: 19/09/2025")}_updatePopper(){if(!this._open||!this.isConnected)return;const e=this._referenceElement,t=this._popupElement;if(!e||!t)return;const a=Math.max(270,Math.round(e.getBoundingClientRect().width*(this.expandFactor||1)));if(t.style.width=`${a}px`,this._popperInstance){this._popperInstance.setOptions({placement:"bottom",strategy:"fixed",modifiers:this._getPopperModifiers()}),this._popperInstance.update();return}this._popperInstance=u.createPopper(e,t,{placement:"bottom",strategy:"fixed",modifiers:this._getPopperModifiers()})}_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","right-end","left-end"]}}]}_destroyPopper(){this._popperInstance&&(this._popperInstance.destroy(),this._popperInstance=void 0)}_handleCalendarChange(e){this._emitChange(e.detail.value),this._inputDraft=null,this._toggleOpen(!1)}_handleCalendarRangeChange(e){this._rangeStart=e.detail.start,this._rangeEnd=e.detail.end,this._inputDraft=null,this._emitRangeChange(),this._toggleOpen(!1)}_handleCalendarStateChange(e){this._rangeStart=e.detail.rangeStart,this._rangeEnd=e.detail.rangeEnd}_handleSuffixClick(e){e.stopPropagation(),this._openDropdown(),this._inputElement?.focus()}_handleClearClick(e){e.stopPropagation(),this._emitChange(null),this._rangeStart=null,this._rangeEnd=null,this._inputDraft=null,this._clearInputError(),this._inputElement?.focus()}render(){const e=this.error||(this._hasError?this._errorMsg:""),t=!!this._displayValue();return s.html`
+"use strict";const s=require("lit"),r=require("lit/decorators.js"),d=require("lit/directives/live.js"),u=require("@popperjs/core");require("./formfield-CRcyUMvQ.cjs");const h=require("./calendar-CIgyrv3U.cjs");require("./ui-icon-DIucAQC_.cjs");const _=require("dayjs"),c=".dp{display:block;position:relative;width:100%;font-family:var(--font-family-base)}.dp__field,.dp__reference{width:100%}.dp__input{width:100%;border:none;outline:none;background:transparent;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);line-height:1.5}.dp__input::placeholder{color:var(--color-tertiary)}.dp__input:disabled{cursor:not-allowed}.dp__icon-btn{border:none;background:transparent;color:var(--color-gray-400);cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;line-height:1;transition:color var(--transition-speed-fast) var(--transition-timing)}.dp__icon-btn_suffix{padding-right:var(--spacing-1)}.dp__icon-btn:hover{color:var(--color-gray-600)}.dp__icon-btn:disabled{cursor:not-allowed;opacity:.5}.dp__popup{background-color:var(--color-body-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);z-index:var(--z-index-dropdown);padding:var(--spacing-4);box-sizing:border-box;overflow:hidden;max-height:calc(100vh - 16px)}";var g=Object.defineProperty,f=Object.getOwnPropertyDescriptor,i=(p,e,t,a)=>{for(var n=a>1?void 0:a?f(e,t):e,o=p.length-1,l;o>=0;o--)(l=p[o])&&(n=(a?l(e,t,n):l(n))||n);return a&&n&&g(e,t,n),n};let y=0;const m=()=>`dp-${++y}`;exports.LogosphereDatePicker=class extends s.LitElement{constructor(){super(...arguments),this.value=null,this.min=null,this.max=null,this.required=!1,this.disabled=!1,this.readonly=!1,this.expandFactor=1.05,this.placeholder="GG/AA/YYYY veya GG.AA.YYYY",this.label="",this.helper="",this.error="",this.size="default",this.variant="default",this.rangeMode=!1,this.disabledDays=[],this.rangeStart=null,this.rangeEnd=null,this._open=!1,this._rangeStart=null,this._rangeEnd=null,this._hasError=!1,this._errorMsg="",this._inputDraft=null,this._errorTimer=null,this.inputId=m(),this._outsideClick=e=>{this._open&&(e.composedPath().includes(this)||(this._parseAndSetDate(),this._toggleOpen(!1)))},this._openDropdown=()=>{this._toggleOpen(!0)},this._onBlur=()=>{this._parseAndSetDate()}}willUpdate(e){e.has("rangeStart")&&(this._rangeStart=this.rangeStart),e.has("rangeEnd")&&(this._rangeEnd=this.rangeEnd),e.has("value")&&!this._isInputFocused()&&(this._inputDraft=null)}connectedCallback(){super.connectedCallback(),window.addEventListener("click",this._outsideClick,!0)}disconnectedCallback(){window.removeEventListener("click",this._outsideClick,!0),this._destroyPopper(),this._errorTimer&&clearTimeout(this._errorTimer),super.disconnectedCallback()}updated(e){if(super.updated(e),e.has("_open")){this._open?this._updatePopper():this._destroyPopper();return}this._open&&this._updatePopper()}_safeDay(e){return h.safeDay(e)}_isInputFocused(){return this.shadowRoot?.activeElement===this._inputElement}_withinBounds(e){const t=this._safeDay(this.min),a=this._safeDay(this.max);return!(t&&e.isBefore(t,"day")||a&&e.isAfter(a,"day")||this.disabledDays.includes(e.day()))}_displayValue(){if(this.rangeMode&&this._rangeStart&&this._rangeEnd){const t=this._safeDay(this._rangeStart),a=this._safeDay(this._rangeEnd);if(t&&a)return`${t.format("DD/MM/YYYY")} - ${a.format("DD/MM/YYYY")}`}const e=this._safeDay(this.value);return e?e.format("DD/MM/YYYY"):""}_inputValue(){return this._inputDraft??this._displayValue()}_emitChange(e){this.value=e,this.dispatchEvent(new CustomEvent("change",{detail:{value:e}})),this.onChange?.(e)}_emitRangeChange(){if(!this._rangeStart||!this._rangeEnd)return;const e={start:this._rangeStart,end:this._rangeEnd};this.dispatchEvent(new CustomEvent("rangeChange",{detail:e})),this.onRangeChange?.(e)}_showInputError(e){this._errorTimer&&clearTimeout(this._errorTimer),this._hasError=!0,this._errorMsg=e,this._errorTimer=setTimeout(()=>this._clearInputError(),3e3)}_clearInputError(){this._hasError=!1,this._errorMsg="",this._errorTimer&&(clearTimeout(this._errorTimer),this._errorTimer=null)}_toggleOpen(e){if(this.disabled)return;const t=e??!this._open;this._open=t,t&&this.updateComplete.then(()=>this._updatePopper())}_onInput(e){const t=e.target.value;this._inputDraft=t,t.trim()||(this._emitChange(null),this.rangeMode&&(this._rangeStart=null,this._rangeEnd=null)),this._clearInputError()}_parseSingleDate(e){for(const t of h.DATE_FORMATS){const a=_(e,t,!0);if(a.isValid())return a}return this._safeDay(e)}_parseRangeInput(e){const t=e.split(/\s+-\s+/);if(t.length!==2)return null;const a=this._parseSingleDate(t[0].trim()),n=this._parseSingleDate(t[1].trim());return!a||!n?null:a.isAfter(n,"day")?{start:n,end:a}:{start:a,end:n}}_onKeydown(e){(e.key==="Tab"||e.key==="Enter")&&this._parseAndSetDate()}_parseAndSetDate(){const e=this._inputElement;if(!e)return;const t=e.value.trim();if(!t){if(this.rangeMode&&this._rangeStart&&!this._rangeEnd)return;this._emitChange(null),this.rangeMode&&(this._rangeStart=null,this._rangeEnd=null),this._inputDraft=null;return}if(this.rangeMode){const n=this._parseRangeInput(t);if(n){if(this._withinBounds(n.start)&&this._withinBounds(n.end)){this._rangeStart=n.start.format("YYYY-MM-DD"),this._rangeEnd=n.end.format("YYYY-MM-DD"),this._inputDraft=null,this._clearInputError(),this._emitRangeChange();return}this._showInputError("Seçilen aralık sınırlar dışında.");return}const o=this._parseSingleDate(t);if(o&&this._withinBounds(o)){this._rangeStart=o.format("YYYY-MM-DD"),this._rangeEnd=null,this._inputDraft=null,this._clearInputError();return}this._showInputError("Geçersiz aralık formatı. Örnek: 19/09/2025 - 25/09/2025");return}const a=this._parseSingleDate(t);a&&this._withinBounds(a)?(this._emitChange(a.format("YYYY-MM-DD")),this._inputDraft=null,this._clearInputError()):this._showInputError("Geçersiz tarih formatı. Örnek: 19/09/2025")}_updatePopper(){if(!this._open||!this.isConnected)return;const e=this._referenceElement,t=this._popupElement;if(!e||!t)return;const a=Math.max(270,Math.round(e.getBoundingClientRect().width*(this.expandFactor||1)));if(t.style.width=`${a}px`,this._popperInstance){this._popperInstance.setOptions({placement:"bottom",strategy:"fixed",modifiers:this._getPopperModifiers()}),this._popperInstance.update();return}this._popperInstance=u.createPopper(e,t,{placement:"bottom",strategy:"fixed",modifiers:this._getPopperModifiers()})}_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","right-end","left-end"]}}]}_destroyPopper(){this._popperInstance&&(this._popperInstance.destroy(),this._popperInstance=void 0)}_handleCalendarChange(e){this._emitChange(e.detail.value),this._inputDraft=null,this._toggleOpen(!1)}_handleCalendarRangeChange(e){this._rangeStart=e.detail.start,this._rangeEnd=e.detail.end,this._inputDraft=null,this._emitRangeChange(),this._toggleOpen(!1)}_handleCalendarStateChange(e){this._rangeStart=e.detail.rangeStart,this._rangeEnd=e.detail.rangeEnd}_handleSuffixClick(e){e.stopPropagation(),this._openDropdown(),this._inputElement?.focus()}_handleClearClick(e){e.stopPropagation(),this._emitChange(null),this._rangeStart=null,this._rangeEnd=null,this._inputDraft=null,this._clearInputError(),this._inputElement?.focus()}render(){const e=this.error||(this._hasError?this._errorMsg:""),t=!!this._displayValue();return s.html`
       <div class="dp">
         <div class="dp__reference">
           <logosphere-formfield

package/dist/datepicker.cjs

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

package/dist/datepicker.js

@@ -1,4 +1,4 @@
-import { L as r } from "./datepicker-tJbIvNpy.js";
+import { L as r } from "./datepicker-BgysIOZI.js";
 export {
   r as LogosphereDatePicker
 };

package/dist/{drawer-g6mHdpjF.cjs → drawer-3nyjAkcS.cjs}

@@ -1,4 +1,4 @@
-"use strict";const l=require("lit"),i=require("lit/decorators.js");require("./button-DRZ4sG4T.cjs");require("./ui-icon-jKyMV1zp.cjs");const p=":host{display:block}.drawer{position:relative;font-family:var(--font-family-base)}.drawer__trigger{display:inline-flex}.drawer__panel{position:fixed;top:0;bottom:0;width:var(--drawer-width, 360px);max-width:min(100vw,var(--drawer-width, 360px));background:var(--color-body-bg);border-left:1px solid var(--color-border);box-shadow:var(--shadow-lg);z-index:var(--z-index-modal);display:flex;flex-direction:column;pointer-events:none;opacity:0;transition:transform var(--transition-speed-slow) var(--transition-timing),opacity var(--transition-speed-slow) linear}.drawer__panel--right{right:0;transform:translate(100%)}.drawer__panel--left{left:0;transform:translate(-100%);border-left:none;border-right:1px solid var(--color-border)}.drawer__panel--open{transform:translate(0);pointer-events:auto;opacity:1}.drawer__header{padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-2)}.drawer__title{margin:0;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-body-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer__close{width:28px;height:28px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-body-bg);display:inline-flex;align-items:center;justify-content:center;color:var(--color-body-color);cursor:pointer}.drawer__close:hover{background:var(--color-tertiary)}.drawer__body{flex:1;overflow:auto;padding:var(--spacing-4)}";var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,s=(d,e,t,r)=>{for(var o=r>1?void 0:r?h(e,t):e,a=d.length-1,n;a>=0;a--)(n=d[a])&&(o=(r?n(e,t,o):n(o))||o);return r&&o&&c(e,t,o),o};exports.Drawer=class extends l.LitElement{constructor(){super(...arguments),this.open=!1,this.title="",this.position="right",this.width=360,this.closeOnEsc=!0,this.containerSelector="",this._frameStyle="",this._onKeyDown=e=>{!this.open||!this.closeOnEsc||(e.key==="Escape"||e.key==="Esc")&&this._setOpen(!1)},this._onTriggerClick=()=>this._setOpen(!0),this._onCloseClick=()=>this._setOpen(!1),this._syncFrame=()=>{const e=this._resolveContainer().getBoundingClientRect(),t=Math.max(0,e.top),r=Math.max(0,window.innerHeight-e.bottom),o=Math.max(0,e.left),a=Math.max(0,window.innerWidth-e.right),n=Math.max(0,e.width);this._frameStyle=this.position==="right"?`top:${t}px;bottom:${r}px;right:${a}px;max-width:${n}px;`:`top:${t}px;bottom:${r}px;left:${o}px;max-width:${n}px;`}}connectedCallback(){super.connectedCallback(),window.addEventListener("keydown",this._onKeyDown,!0),window.addEventListener("resize",this._syncFrame),window.addEventListener("scroll",this._syncFrame,!0),this.updateComplete.then(()=>this._syncFrame())}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this._onKeyDown,!0),window.removeEventListener("resize",this._syncFrame),window.removeEventListener("scroll",this._syncFrame,!0)}updated(e){(e.has("open")||e.has("position")||e.has("width")||e.has("containerSelector"))&&this._syncFrame()}openDrawer(){this._setOpen(!0)}closeDrawer(){this._setOpen(!1)}_setOpen(e){this.open!==e&&(this.open=e,this.dispatchEvent(new CustomEvent(e?"drawer-open":"drawer-close",{bubbles:!0,composed:!0})))}_resolveContainer(){if(this.containerSelector){const e=this.getRootNode();if("querySelector"in e){const r=e.querySelector(this.containerSelector);if(r)return r}const t=document.querySelector(this.containerSelector);if(t)return t}return this.parentElement??this}render(){return l.html`
+"use strict";const l=require("lit"),i=require("lit/decorators.js");require("./button-DRZ4sG4T.cjs");require("./ui-icon-DIucAQC_.cjs");const p=":host{display:block}.drawer{position:relative;font-family:var(--font-family-base)}.drawer__trigger{display:inline-flex}.drawer__panel{position:fixed;top:0;bottom:0;width:var(--drawer-width, 360px);max-width:min(100vw,var(--drawer-width, 360px));background:var(--color-body-bg);border-left:1px solid var(--color-border);box-shadow:var(--shadow-lg);z-index:var(--z-index-modal);display:flex;flex-direction:column;pointer-events:none;opacity:0;transition:transform var(--transition-speed-slow) var(--transition-timing),opacity var(--transition-speed-slow) linear}.drawer__panel--right{right:0;transform:translate(100%)}.drawer__panel--left{left:0;transform:translate(-100%);border-left:none;border-right:1px solid var(--color-border)}.drawer__panel--open{transform:translate(0);pointer-events:auto;opacity:1}.drawer__header{padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-2)}.drawer__title{margin:0;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-body-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer__close{width:28px;height:28px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-body-bg);display:inline-flex;align-items:center;justify-content:center;color:var(--color-body-color);cursor:pointer}.drawer__close:hover{background:var(--color-tertiary)}.drawer__body{flex:1;overflow:auto;padding:var(--spacing-4)}";var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,s=(d,e,t,r)=>{for(var o=r>1?void 0:r?h(e,t):e,a=d.length-1,n;a>=0;a--)(n=d[a])&&(o=(r?n(e,t,o):n(o))||o);return r&&o&&c(e,t,o),o};exports.Drawer=class extends l.LitElement{constructor(){super(...arguments),this.open=!1,this.title="",this.position="right",this.width=360,this.closeOnEsc=!0,this.containerSelector="",this._frameStyle="",this._onKeyDown=e=>{!this.open||!this.closeOnEsc||(e.key==="Escape"||e.key==="Esc")&&this._setOpen(!1)},this._onTriggerClick=()=>this._setOpen(!0),this._onCloseClick=()=>this._setOpen(!1),this._syncFrame=()=>{const e=this._resolveContainer().getBoundingClientRect(),t=Math.max(0,e.top),r=Math.max(0,window.innerHeight-e.bottom),o=Math.max(0,e.left),a=Math.max(0,window.innerWidth-e.right),n=Math.max(0,e.width);this._frameStyle=this.position==="right"?`top:${t}px;bottom:${r}px;right:${a}px;max-width:${n}px;`:`top:${t}px;bottom:${r}px;left:${o}px;max-width:${n}px;`}}connectedCallback(){super.connectedCallback(),window.addEventListener("keydown",this._onKeyDown,!0),window.addEventListener("resize",this._syncFrame),window.addEventListener("scroll",this._syncFrame,!0),this.updateComplete.then(()=>this._syncFrame())}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this._onKeyDown,!0),window.removeEventListener("resize",this._syncFrame),window.removeEventListener("scroll",this._syncFrame,!0)}updated(e){(e.has("open")||e.has("position")||e.has("width")||e.has("containerSelector"))&&this._syncFrame()}openDrawer(){this._setOpen(!0)}closeDrawer(){this._setOpen(!1)}_setOpen(e){this.open!==e&&(this.open=e,this.dispatchEvent(new CustomEvent(e?"drawer-open":"drawer-close",{bubbles:!0,composed:!0})))}_resolveContainer(){if(this.containerSelector){const e=this.getRootNode();if("querySelector"in e){const r=e.querySelector(this.containerSelector);if(r)return r}const t=document.querySelector(this.containerSelector);if(t)return t}return this.parentElement??this}render(){return l.html`
       <div class="drawer">
         <div class="drawer__trigger" @click=${this._onTriggerClick}>
           <slot name="trigger"></slot>
@@ -29,4 +29,4 @@
           </div>
         </aside>
       </div>
-    `}};exports.Drawer.styles=[l.css`${l.unsafeCSS(p)}`];s([i.property({type:Boolean,reflect:!0})],exports.Drawer.prototype,"open",2);s([i.property({type:String})],exports.Drawer.prototype,"title",2);s([i.property({type:String})],exports.Drawer.prototype,"position",2);s([i.property({type:Number})],exports.Drawer.prototype,"width",2);s([i.property({type:Boolean})],exports.Drawer.prototype,"closeOnEsc",2);s([i.property({type:String})],exports.Drawer.prototype,"containerSelector",2);exports.Drawer=s([i.customElement("logosphere-drawer")],exports.Drawer);
+    `}};exports.Drawer.styles=[l.css`${l.unsafeCSS(p)}`];s([i.property({type:Boolean,reflect:!0})],exports.Drawer.prototype,"open",2);s([i.property({type:String,attribute:"drawer-title"})],exports.Drawer.prototype,"title",2);s([i.property({type:String})],exports.Drawer.prototype,"position",2);s([i.property({type:Number})],exports.Drawer.prototype,"width",2);s([i.property({type:Boolean})],exports.Drawer.prototype,"closeOnEsc",2);s([i.property({type:String})],exports.Drawer.prototype,"containerSelector",2);exports.Drawer=s([i.customElement("logosphere-drawer")],exports.Drawer);

package/dist/{drawer-CRB8UUAo.js → drawer-CE9zzllI.js}

@@ -1,7 +1,7 @@
 import { unsafeCSS as c, css as p, LitElement as h, html as w } from "lit";
 import { property as l, customElement as m } from "lit/decorators.js";
 import "./button-Uu9oaieg.js";
-import "./ui-icon-Ctn4nGFa.js";
+import "./ui-icon-BMJNdIOq.js";
 const _ = ":host{display:block}.drawer{position:relative;font-family:var(--font-family-base)}.drawer__trigger{display:inline-flex}.drawer__panel{position:fixed;top:0;bottom:0;width:var(--drawer-width, 360px);max-width:min(100vw,var(--drawer-width, 360px));background:var(--color-body-bg);border-left:1px solid var(--color-border);box-shadow:var(--shadow-lg);z-index:var(--z-index-modal);display:flex;flex-direction:column;pointer-events:none;opacity:0;transition:transform var(--transition-speed-slow) var(--transition-timing),opacity var(--transition-speed-slow) linear}.drawer__panel--right{right:0;transform:translate(100%)}.drawer__panel--left{left:0;transform:translate(-100%);border-left:none;border-right:1px solid var(--color-border)}.drawer__panel--open{transform:translate(0);pointer-events:auto;opacity:1}.drawer__header{padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-2)}.drawer__title{margin:0;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-body-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer__close{width:28px;height:28px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-body-bg);display:inline-flex;align-items:center;justify-content:center;color:var(--color-body-color);cursor:pointer}.drawer__close:hover{background:var(--color-tertiary)}.drawer__body{flex:1;overflow:auto;padding:var(--spacing-4)}";
 var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, n = (e, t, r, s) => {
   for (var o = s > 1 ? void 0 : s ? f(t, r) : t, a = e.length - 1, d; a >= 0; a--)
@@ -92,7 +92,7 @@ n([
   l({ type: Boolean, reflect: !0 })
 ], i.prototype, "open", 2);
 n([
-  l({ type: String })
+  l({ type: String, attribute: "drawer-title" })
 ], i.prototype, "title", 2);
 n([
   l({ type: String })

package/dist/drawer.cjs

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

package/dist/drawer.js

@@ -1,4 +1,4 @@
-import { D as e } from "./drawer-CRB8UUAo.js";
+import { D as e } from "./drawer-CE9zzllI.js";
 export {
   e as Drawer
 };