@logosphere-ui/core 0.0.0-alpha.14 → 0.0.0-alpha.16

package/dist/datepicker-CwDDA6np.cjs

@@ -0,0 +1,85 @@
+"use strict";const s=require("lit"),r=require("lit/decorators.js"),d=require("lit/directives/live.js"),u=require("@popperjs/core");require("./formfield-BFOIEicR.cjs");const h=require("./calendar-LMn1ZF3N.cjs");require("./ui-icon-DWh1MhBa.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
+            class="dp__field"
+            .label=${this.label}
+            .helper=${this.helper}
+            .error=${e}
+            .required=${this.required}
+            .disabled=${this.disabled}
+            .readonly=${this.readonly}
+            .placeholder=${this.placeholder}
+            .size=${this.size}
+            .variant=${this.variant}
+            @click=${this._openDropdown}
+          >
+            <input
+              id=${this.inputId}
+              class="dp__input"
+              .value=${d.live(this._inputValue())}
+              ?disabled=${this.disabled}
+              ?readonly=${this.readonly}
+              placeholder=${this.placeholder}
+              aria-label="Tarih girin"
+              aria-invalid=${e?"true":"false"}
+              @focus=${this._openDropdown}
+              @input=${this._onInput}
+              @keydown=${this._onKeydown}
+              @blur=${this._onBlur}
+            />
+            ${t?s.html`
+                  <button
+                    slot="clear"
+                    class="dp__icon-btn dp__icon-btn_suffix"
+                    type="button"
+                    aria-label="Temizle"
+                    @click=${this._handleClearClick}
+                  >
+                    <ui-icon name="uil-times" size="14"></ui-icon>
+                  </button>
+                `:s.nothing}
+            <button
+              id=${this.inputId+"-ico"}
+              slot="suffix"
+              class="dp__icon-btn"
+              type="button"
+              aria-label=${this._open?"Takvimi kapat":"Takvimi aç"}
+              aria-expanded=${this._open?"true":"false"}
+              aria-haspopup="dialog"
+              @click=${this._handleSuffixClick}
+            >
+              <ui-icon name="uil-calendar" size="16"></ui-icon>
+            </button>
+          </logosphere-formfield>
+        </div>
+
+        ${this._open?s.html`
+              <div
+                data-datepicker-popper
+                class="dp__popup"
+                role="dialog"
+                aria-modal="true"
+                aria-label="Tarih seçici"
+              >
+                <logosphere-calendar
+                  .value=${this.value}
+                  .min=${this.min}
+                  .max=${this.max}
+                  .disabled=${this.disabled}
+                  .rangeMode=${this.rangeMode}
+                  .disabledDays=${this.disabledDays}
+                  .rangeStart=${this._rangeStart}
+                  .rangeEnd=${this._rangeEnd}
+                  .closable=${!0}
+                  @change=${this._handleCalendarChange}
+                  @rangeChange=${this._handleCalendarRangeChange}
+                  @calendar-state-change=${this._handleCalendarStateChange}
+                  @close-request=${()=>this._toggleOpen(!1)}
+                ></logosphere-calendar>
+              </div>
+            `:s.nothing}
+      </div>
+    `}};exports.LogosphereDatePicker.styles=[s.css`
+      ${s.unsafeCSS(c)}
+    `];i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"value",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"min",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"max",2);i([r.property({type:Boolean})],exports.LogosphereDatePicker.prototype,"required",2);i([r.property({type:Boolean})],exports.LogosphereDatePicker.prototype,"disabled",2);i([r.property({type:Boolean})],exports.LogosphereDatePicker.prototype,"readonly",2);i([r.property({type:Number})],exports.LogosphereDatePicker.prototype,"expandFactor",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"placeholder",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"label",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"helper",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"error",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"size",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"variant",2);i([r.property({type:Boolean})],exports.LogosphereDatePicker.prototype,"rangeMode",2);i([r.property({type:Array})],exports.LogosphereDatePicker.prototype,"disabledDays",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"rangeStart",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"rangeEnd",2);i([r.property({attribute:!1})],exports.LogosphereDatePicker.prototype,"onChange",2);i([r.property({attribute:!1})],exports.LogosphereDatePicker.prototype,"onRangeChange",2);i([r.state()],exports.LogosphereDatePicker.prototype,"_open",2);i([r.state()],exports.LogosphereDatePicker.prototype,"_rangeStart",2);i([r.state()],exports.LogosphereDatePicker.prototype,"_rangeEnd",2);i([r.state()],exports.LogosphereDatePicker.prototype,"_hasError",2);i([r.state()],exports.LogosphereDatePicker.prototype,"_errorMsg",2);i([r.state()],exports.LogosphereDatePicker.prototype,"_inputDraft",2);i([r.query(".dp__reference")],exports.LogosphereDatePicker.prototype,"_referenceElement",2);i([r.query("[data-datepicker-popper]")],exports.LogosphereDatePicker.prototype,"_popupElement",2);i([r.query("input")],exports.LogosphereDatePicker.prototype,"_inputElement",2);exports.LogosphereDatePicker=i([r.customElement("logosphere-datepicker")],exports.LogosphereDatePicker);

package/dist/datepicker.cjs

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

package/dist/datepicker.js

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

package/dist/drawer-BvcPd5nz.cjs

@@ -0,0 +1,25 @@
+"use strict";const l=require("lit"),i=require("lit/decorators.js");require("./ui-icon-DWh1MhBa.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-text);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-text);cursor:pointer}.drawer__close:hover{background:var(--color-tertiary-bg)}.drawer__body{flex:1;overflow:auto;padding:var(--spacing-4)}";var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,s=(d,e,r,t)=>{for(var o=t>1?void 0:t?h(e,r):e,a=d.length-1,n;a>=0;a--)(n=d[a])&&(o=(t?n(e,r,o):n(o))||o);return t&&o&&c(e,r,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(),r=Math.max(0,e.top),t=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:${r}px;bottom:${t}px;right:${a}px;max-width:${n}px;`:`top:${r}px;bottom:${t}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 t=e.querySelector(this.containerSelector);if(t)return t}const r=document.querySelector(this.containerSelector);if(r)return r}return this.parentElement??this}render(){return l.html`
+      <div class="drawer">
+        <div class="drawer__trigger" @click=${this._onTriggerClick}>
+          <slot name="trigger"></slot>
+        </div>
+
+        <aside
+          class="drawer__panel drawer__panel--${this.position} ${this.open?"drawer__panel--open":""}"
+          style=${`--drawer-width:${this.width}px;${this._frameStyle}`}
+          role="dialog"
+          aria-modal="false"
+          aria-hidden=${this.open?"false":"true"}
+        >
+          <div class="drawer__header">
+            <h3 class="drawer__title">${this.title}</h3>
+            <button class="drawer__close" type="button" aria-label="Close drawer" @click=${this._onCloseClick}>
+              <ui-icon name="uil-times" size="16"></ui-icon>
+            </button>
+          </div>
+          <div class="drawer__body">
+            <slot></slot>
+          </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);

package/dist/drawer-DVINJB4a.js

@@ -0,0 +1,106 @@
+import { unsafeCSS as c, css as p, LitElement as h, html as w } from "lit";
+import { property as l, customElement as _ } from "lit/decorators.js";
+import "./ui-icon-Bys4HYSQ.js";
+const m = ":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-text);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-text);cursor:pointer}.drawer__close:hover{background:var(--color-tertiary-bg)}.drawer__body{flex:1;overflow:auto;padding:var(--spacing-4)}";
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (e, t, r, n) => {
+  for (var o = n > 1 ? void 0 : n ? v(t, r) : t, a = e.length - 1, d; a >= 0; a--)
+    (d = e[a]) && (o = (n ? d(t, r, o) : d(o)) || o);
+  return n && o && f(t, r, o), o;
+};
+let i = class extends h {
+  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), n = Math.max(0, e.left), o = Math.max(0, window.innerWidth - e.right), a = Math.max(0, e.width);
+      this._frameStyle = this.position === "right" ? `top:${t}px;bottom:${r}px;right:${o}px;max-width:${a}px;` : `top:${t}px;bottom:${r}px;left:${n}px;max-width:${a}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 w`
+      <div class="drawer">
+        <div class="drawer__trigger" @click=${this._onTriggerClick}>
+          <slot name="trigger"></slot>
+        </div>
+
+        <aside
+          class="drawer__panel drawer__panel--${this.position} ${this.open ? "drawer__panel--open" : ""}"
+          style=${`--drawer-width:${this.width}px;${this._frameStyle}`}
+          role="dialog"
+          aria-modal="false"
+          aria-hidden=${this.open ? "false" : "true"}
+        >
+          <div class="drawer__header">
+            <h3 class="drawer__title">${this.title}</h3>
+            <button class="drawer__close" type="button" aria-label="Close drawer" @click=${this._onCloseClick}>
+              <ui-icon name="uil-times" size="16"></ui-icon>
+            </button>
+          </div>
+          <div class="drawer__body">
+            <slot></slot>
+          </div>
+        </aside>
+      </div>
+    `;
+  }
+};
+i.styles = [p`${c(m)}`];
+s([
+  l({ type: Boolean, reflect: !0 })
+], i.prototype, "open", 2);
+s([
+  l({ type: String })
+], i.prototype, "title", 2);
+s([
+  l({ type: String })
+], i.prototype, "position", 2);
+s([
+  l({ type: Number })
+], i.prototype, "width", 2);
+s([
+  l({ type: Boolean })
+], i.prototype, "closeOnEsc", 2);
+s([
+  l({ type: String })
+], i.prototype, "containerSelector", 2);
+i = s([
+  _("logosphere-drawer")
+], i);
+export {
+  i as D
+};

package/dist/drawer.cjs

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

package/dist/drawer.js

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

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./button-Bx870pUi.cjs"),t=require("./badge-7IIatiRv.cjs"),o=require("./checkbox-CdDTRdKV.cjs"),n=require("./formfield-BFOIEicR.cjs"),u=require("./switch-Rnnn10bn.cjs"),b=require("./breadcrumb-Cop-B1J7.cjs"),a=require("./card-BmW0sPDb.cjs"),c=require("./input-JpAWN-M1.cjs"),i=require("./popover-C2p5Pmts.cjs"),d=require("./text-area-CZDdxbrN.cjs"),l=require("./chatbot-CBDEFak3.cjs"),m=require("./calendar-DF3q_dcG.cjs"),p=require("./combobox-C6zoQopK.cjs"),g=require("./datepicker-BLv_G9Yb.cjs"),s=require("./download-manager-BSIMTGaK.cjs"),e=require("./leftmenu-Bgqfmoe5.cjs"),f=require("./modal-DQ8VFL-P.cjs"),P=require("./tab-DcjAlXzU.cjs"),y=require("./tree-menu-B1iwfHyd.cjs");Object.defineProperty(exports,"Button",{enumerable:!0,get:()=>r.Button});Object.defineProperty(exports,"LogosphereBadge",{enumerable:!0,get:()=>t.LogosphereBadge});Object.defineProperty(exports,"Checkbox",{enumerable:!0,get:()=>o.Checkbox});Object.defineProperty(exports,"FormField",{enumerable:!0,get:()=>n.FormField});Object.defineProperty(exports,"Switch",{enumerable:!0,get:()=>u.Switch});Object.defineProperty(exports,"Breadcrumb",{enumerable:!0,get:()=>b.Breadcrumb});Object.defineProperty(exports,"Card",{enumerable:!0,get:()=>a.Card});Object.defineProperty(exports,"LogosphereInput",{enumerable:!0,get:()=>c.LogosphereInput});Object.defineProperty(exports,"Popover",{enumerable:!0,get:()=>i.Popover});Object.defineProperty(exports,"TextArea",{enumerable:!0,get:()=>d.TextArea});Object.defineProperty(exports,"LedsUiChatbot",{enumerable:!0,get:()=>l.LedsUiChatbot});Object.defineProperty(exports,"LedsCalendar",{enumerable:!0,get:()=>m.LedsCalendar});Object.defineProperty(exports,"Combobox",{enumerable:!0,get:()=>p.Combobox});Object.defineProperty(exports,"LedsDatePicker",{enumerable:!0,get:()=>g.LedsDatePicker});Object.defineProperty(exports,"DownloadManager",{enumerable:!0,get:()=>s.DownloadManager});Object.defineProperty(exports,"LeftMenu",{enumerable:!0,get:()=>e.LeftMenu});Object.defineProperty(exports,"LeftMenuItemElement",{enumerable:!0,get:()=>e.LeftMenuItemElement});Object.defineProperty(exports,"Modal",{enumerable:!0,get:()=>f.Modal});Object.defineProperty(exports,"LogosphereTab",{enumerable:!0,get:()=>P.LogosphereTab});Object.defineProperty(exports,"TreeMenu",{enumerable:!0,get:()=>y.TreeMenu});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./button-CDRccsk9.cjs"),t=require("./badge-7IIatiRv.cjs"),o=require("./checkbox-CdDTRdKV.cjs"),n=require("./formfield-BFOIEicR.cjs"),u=require("./switch-Rnnn10bn.cjs"),a=require("./breadcrumb-Cop-B1J7.cjs"),b=require("./card-KiNHfEi2.cjs"),c=require("./input-JpAWN-M1.cjs"),i=require("./popover-C2p5Pmts.cjs"),d=require("./text-area-CZDdxbrN.cjs"),p=require("./chatbot-CIk-82Bz.cjs"),g=require("./calendar-LMn1ZF3N.cjs"),l=require("./combobox-C6zoQopK.cjs"),m=require("./datepicker-CwDDA6np.cjs"),s=require("./drawer-BvcPd5nz.cjs"),f=require("./download-manager-BSIMTGaK.cjs"),e=require("./leftmenu-DBcncBN8.cjs"),P=require("./modal-DQ8VFL-P.cjs"),y=require("./tab-DcjAlXzU.cjs"),j=require("./tree-menu-B1iwfHyd.cjs");Object.defineProperty(exports,"Button",{enumerable:!0,get:()=>r.Button});Object.defineProperty(exports,"LogosphereBadge",{enumerable:!0,get:()=>t.LogosphereBadge});Object.defineProperty(exports,"Checkbox",{enumerable:!0,get:()=>o.Checkbox});Object.defineProperty(exports,"FormField",{enumerable:!0,get:()=>n.FormField});Object.defineProperty(exports,"Switch",{enumerable:!0,get:()=>u.Switch});Object.defineProperty(exports,"Breadcrumb",{enumerable:!0,get:()=>a.Breadcrumb});Object.defineProperty(exports,"Card",{enumerable:!0,get:()=>b.Card});Object.defineProperty(exports,"LogosphereInput",{enumerable:!0,get:()=>c.LogosphereInput});Object.defineProperty(exports,"Popover",{enumerable:!0,get:()=>i.Popover});Object.defineProperty(exports,"TextArea",{enumerable:!0,get:()=>d.TextArea});Object.defineProperty(exports,"LogosphereChatBot",{enumerable:!0,get:()=>p.LogosphereChatBot});Object.defineProperty(exports,"LogosphereCalendar",{enumerable:!0,get:()=>g.LogosphereCalendar});Object.defineProperty(exports,"Combobox",{enumerable:!0,get:()=>l.Combobox});Object.defineProperty(exports,"LogosphereDatePicker",{enumerable:!0,get:()=>m.LogosphereDatePicker});Object.defineProperty(exports,"Drawer",{enumerable:!0,get:()=>s.Drawer});Object.defineProperty(exports,"DownloadManager",{enumerable:!0,get:()=>f.DownloadManager});Object.defineProperty(exports,"LeftMenu",{enumerable:!0,get:()=>e.LeftMenu});Object.defineProperty(exports,"LeftMenuItemElement",{enumerable:!0,get:()=>e.LeftMenuItemElement});Object.defineProperty(exports,"Modal",{enumerable:!0,get:()=>P.Modal});Object.defineProperty(exports,"LogosphereTab",{enumerable:!0,get:()=>y.LogosphereTab});Object.defineProperty(exports,"TreeMenu",{enumerable:!0,get:()=>j.TreeMenu});

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export * from "./organisms/Chatbot/index.js";
 export * from "./organisms/Calendar/index.js";
 export * from "./organisms/Combobox/index.js";
 export * from "./organisms/DatePicker/index.js";
+export * from "./organisms/Drawer/index.js";
 export * from "./organisms/DownloadManager/index.js";
 export * from "./organisms/LeftMenu/index.js";
 export * from "./organisms/Modal/index.js";

package/dist/index.js

@@ -1,41 +1,43 @@
-import { B as e } from "./button-BFq8AmDc.js";
+import { B as e } from "./button-BqOMevro.js";
 import { L as t } from "./badge-B2chRYGd.js";
-import { C as m } from "./checkbox-g6kl2jGR.js";
+import { C as s } from "./checkbox-g6kl2jGR.js";
 import { F as x } from "./formfield-CNh4mBSs.js";
 import { S as L } from "./switch-CG4SSjTg.js";
 import { B as n } from "./breadcrumb-BB61Xt0s.js";
-import { C as b } from "./card-D0OT4Kuq.js";
+import { C } from "./card-CNoTUaJC.js";
 import { L as u } from "./input-jmbvgWEq.js";
-import { P as g } from "./popover-CaVOXo_k.js";
-import { T as B } from "./text-area-Dec_k4rs.js";
-import { L as c } from "./chatbot-Ddl3Txqv.js";
-import { L as D } from "./calendar-WZ_GQvnn.js";
-import { C as P } from "./combobox-LBU6VHLi.js";
-import { L as w } from "./datepicker-SwKsdw3S.js";
-import { D as S } from "./download-manager-a541AYhr.js";
-import { L as A, a as E } from "./leftmenu-GsoBxkeJ.js";
-import { M as j } from "./modal-CnwRIdd8.js";
-import { L as y } from "./tab-BYU_XEhp.js";
-import { T as G } from "./tree-menu-BbX8GK_z.js";
+import { P as M } from "./popover-CaVOXo_k.js";
+import { T as l } from "./text-area-Dec_k4rs.js";
+import { L as T } from "./chatbot-Dl-WLXP3.js";
+import { L as i } from "./calendar-WZ_GQvnn.js";
+import { C as F } from "./combobox-LBU6VHLi.js";
+import { L as k } from "./datepicker-SwKsdw3S.js";
+import { D as S } from "./drawer-DVINJB4a.js";
+import { D as A } from "./download-manager-a541AYhr.js";
+import { L as j, a as q } from "./leftmenu-C-q1h_2U.js";
+import { M as z } from "./modal-CnwRIdd8.js";
+import { L as H } from "./tab-BYU_XEhp.js";
+import { T as K } from "./tree-menu-BbX8GK_z.js";
 export {
   n as Breadcrumb,
   e as Button,
-  b as Card,
-  m as Checkbox,
-  P as Combobox,
-  S as DownloadManager,
+  C as Card,
+  s as Checkbox,
+  F as Combobox,
+  A as DownloadManager,
+  S as Drawer,
   x as FormField,
-  D as LedsCalendar,
-  w as LedsDatePicker,
-  c as LedsUiChatbot,
-  A as LeftMenu,
-  E as LeftMenuItemElement,
+  j as LeftMenu,
+  q as LeftMenuItemElement,
   t as LogosphereBadge,
+  i as LogosphereCalendar,
+  T as LogosphereChatBot,
+  k as LogosphereDatePicker,
   u as LogosphereInput,
-  y as LogosphereTab,
-  j as Modal,
-  g as Popover,
+  H as LogosphereTab,
+  z as Modal,
+  M as Popover,
   L as Switch,
-  B as TextArea,
-  G as TreeMenu
+  l as TextArea,
+  K as TreeMenu
 };