@logosphere-ui/core 0.0.0-alpha.24 → 0.0.0-alpha.25

package/dist/{datepicker-SwKsdw3S.js → datepicker-DZsZdSCv.js}

@@ -2,9 +2,9 @@ import { unsafeCSS as c, css as g, LitElement as f, nothing as _, html as d } fr
 import { property as a, state as l, query as u, customElement as m } from "lit/decorators.js";
 import { live as y } from "lit/directives/live.js";
 import { createPopper as b } from "@popperjs/core";
-import "./formfield-CNh4mBSs.js";
-import { s as v, D as E } from "./calendar-WZ_GQvnn.js";
-import "./ui-icon-Bys4HYSQ.js";
+import "./formfield-BZOK4Pkz.js";
+import { s as v, D as E } from "./calendar-BiJlAmA6.js";
+import "./ui-icon-CFvsDv0z.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.cjs

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

package/dist/datepicker.js

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

package/dist/{drawer-DVINJB4a.js → drawer-D_qOdapq.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 _ } 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)}";
+import "./ui-icon-CFvsDv0z.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-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 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);

package/dist/drawer-s1BLy2Xe.cjs

@@ -0,0 +1,25 @@
+"use strict";const l=require("lit"),i=require("lit/decorators.js");require("./ui-icon-BRl1UmIf.cjs");const c=":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 p=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&&p(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(c)}`];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.cjs

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

package/dist/drawer.js

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

package/dist/{formfield-CNh4mBSs.js → formfield-BZOK4Pkz.js}

@@ -1,14 +1,14 @@
-import { unsafeCSS as h, css as _, LitElement as u, html as n } from "lit";
-import { property as i, state as f, customElement as p } from "lit/decorators.js";
-const m = ":host{display:block}.formfield{position:relative;font-family:var(--font-family-base)}.formfield__label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-body-text);margin-bottom:var(--spacing-2)}.formfield__required{color:var(--color-danger);margin-left:var(--spacing-1)}.formfield__container{position:relative;display:flex;align-items:center;box-sizing:border-box;border-radius:var(--radius-base);border:1px solid var(--color-border);padding:0 var(--spacing-2) 0 var(--spacing-3);background-color:var(--color-body-bg);cursor:text;transition:border-color var(--transition-speed-base) var(--transition-timing),background-color var(--transition-speed-base) var(--transition-timing)}.formfield__container--cursor-text{cursor:text}.formfield__container--cursor-pointer{cursor:pointer}.formfield__container--cursor-default{cursor:default}.formfield__container--default{min-height:32px}.formfield__container--large{min-height:40px}.formfield__container--focused{border-color:var(--color-secondary-hover);background-color:var(--color-body-bg)}.formfield__container--hovered:not(.formfield__container--focused):not(.formfield__container--error):not(.formfield__container--disabled){background-color:var(--color-tertiary-bg)}.formfield__container--error{border-color:var(--color-danger);background-color:var(--color-danger-bg-subtle)}.formfield__container--disabled{background-color:var(--color-tertiary-bg);opacity:.4;cursor:not-allowed}.formfield__container--subtle:not(.formfield__container--focused):not(.formfield__container--error){border-color:transparent}.formfield__input-area{flex:1;min-width:0;display:flex;align-items:center}.formfield__prefix,.formfield__clear,.formfield__suffix{display:flex;align-items:center;flex-shrink:0;align-self:stretch}.formfield__prefix{margin-right:var(--spacing-2)}.formfield__clear,.formfield__suffix{margin-left:var(--spacing-2)}.formfield__container--has-prefix .formfield__prefix{border-right:1px solid var(--color-border);padding-right:var(--spacing-2)}.formfield__container--has-suffix .formfield__suffix{border-left:1px solid var(--color-border);padding-left:var(--spacing-2)}.formfield__prefix:empty,.formfield__clear:empty,.formfield__suffix:empty{display:none}.formfield__helper{font-size:var(--font-size-sm);color:var(--color-tertiary);margin-top:var(--spacing-1)}.formfield__error{font-size:var(--font-size-sm);color:var(--color-danger);margin-top:var(--spacing-1)}::slotted(input),::slotted(textarea){width:100%;border:none;outline:none;background:transparent;font-size:14px;line-height:1.5}::slotted(input:disabled),::slotted(textarea:disabled){cursor:not-allowed}";
-var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (e, r, l, a) => {
-  for (var s = a > 1 ? void 0 : a ? v(r, l) : r, d = e.length - 1, c; d >= 0; d--)
-    (c = e[d]) && (s = (a ? c(r, l, s) : c(s)) || s);
-  return a && s && g(r, l, s), s;
+import { unsafeCSS as h, css as p, LitElement as _, html as n } from "lit";
+import { property as i, state as f, customElement as u } from "lit/decorators.js";
+const m = ":host{display:block}.formfield{position:relative;font-family:var(--font-family-base)}.formfield__label{display:block;font-size:12px;line-height:1.125rem;letter-spacing:-.12px;font-weight:var(--font-weight-medium);color:var(--color-tertiary);margin-bottom:var(--spacing-1)}.formfield__required{color:var(--color-danger);margin-left:var(--spacing-1)}.formfield__container{position:relative;display:flex;align-items:center;box-sizing:border-box;border-radius:var(--radius-base);border:1px solid var(--color-border);padding:0 var(--spacing-2) 0 var(--spacing-3);background-color:var(--color-body-bg);cursor:text;transition:border-color var(--transition-speed-base) var(--transition-timing),background-color var(--transition-speed-base) var(--transition-timing)}.formfield__container--cursor-text{cursor:text}.formfield__container--cursor-pointer{cursor:pointer}.formfield__container--cursor-default{cursor:default}.formfield__container--default{min-height:32px}.formfield__container--large{min-height:40px}.formfield__container--multiline{align-items:flex-start;min-height:64px;padding-top:var(--spacing-2);padding-bottom:var(--spacing-2)}.formfield__container--hovered:not(.formfield__container--focused):not(.formfield__container--error):not(.formfield__container--disabled){background-color:var(--color-tertiary-bg)}.formfield__container--focused{border-color:var(--color-body-text);background-color:var(--color-body-bg)}.formfield__container--error{border-color:var(--color-danger)}.formfield__container--disabled{background-color:var(--color-body-bg);opacity:.4;cursor:not-allowed;pointer-events:none}.formfield__container--subtle:not(.formfield__container--focused):not(.formfield__container--error){border-color:transparent;background-color:var(--color-tertiary-bg)}.formfield__input-area{flex:1;min-width:0;display:flex;align-items:center}.formfield__container--multiline .formfield__input-area{align-items:flex-start;align-self:stretch}.formfield__prefix,.formfield__clear,.formfield__suffix{display:flex;align-items:center;flex-shrink:0;align-self:stretch}.formfield__container--multiline .formfield__clear,.formfield__container--multiline .formfield__suffix{align-items:flex-start}.formfield__prefix{margin-right:var(--spacing-2)}.formfield__clear,.formfield__suffix{margin-left:var(--spacing-2)}.formfield__container--has-prefix .formfield__prefix{border-right:1px solid var(--color-border);padding-right:var(--spacing-2)}.formfield__container--has-suffix .formfield__suffix{border-left:1px solid var(--color-border);padding-left:var(--spacing-2)}.formfield__prefix:empty,.formfield__clear:empty,.formfield__suffix:empty{display:none}.formfield__helper{font-size:11px;line-height:1rem;letter-spacing:-.11px;font-weight:var(--font-weight-regular);color:var(--color-tertiary);margin-top:var(--spacing-1)}.formfield__error{font-size:11px;line-height:1rem;letter-spacing:-.11px;font-weight:var(--font-weight-regular);color:var(--color-danger);margin-top:var(--spacing-1)}::slotted(input),::slotted(textarea){width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;line-height:1.25rem;letter-spacing:-.14px;color:var(--color-body-text)}::slotted(input:disabled),::slotted(textarea:disabled){cursor:not-allowed}";
+var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (e, r, s, a) => {
+  for (var l = a > 1 ? void 0 : a ? v(r, s) : r, d = e.length - 1, c; d >= 0; d--)
+    (c = e[d]) && (l = (a ? c(r, s, l) : c(l)) || l);
+  return a && l && g(r, s, l), l;
 };
-let t = class extends u {
+let t = class extends _ {
   constructor() {
-    super(...arguments), this.label = "", this.helper = "", this.error = "", this.placeholder = "", this.size = "default", this.variant = "default", this.cursor = "text", this.required = !1, this.disabled = !1, this.readonly = !1, this._focused = !1, this._hovered = !1, this._hasPrefix = !1, this._hasSuffix = !1, this.handleSlotFocus = (e) => {
+    super(...arguments), this.label = "", this.helper = "", this.error = "", this.placeholder = "", this.size = "default", this.variant = "default", this.cursor = "text", this.required = !1, this.disabled = !1, this.readonly = !1, this.multiline = !1, this.forceFocused = !1, this._focused = !1, this._hovered = !1, this._hasPrefix = !1, this._hasSuffix = !1, this.handleSlotFocus = (e) => {
       const r = e.target;
       ["INPUT", "TEXTAREA", "SELECT"].includes(r.tagName) && (this._focused = !0, this.dispatchEvent(new CustomEvent("field-focus", {
         bubbles: !0,
@@ -29,7 +29,7 @@ let t = class extends u {
     }, this.handleContainerClick = (e) => {
       const r = e.target;
       if (["INPUT", "TEXTAREA", "SELECT", "BUTTON"].includes(r.tagName)) return;
-      this.shadowRoot?.querySelector("slot:not([name])")?.assignedElements({ flatten: !0 }).find((s) => ["INPUT", "TEXTAREA", "SELECT"].includes(s.tagName))?.focus();
+      this.shadowRoot?.querySelector("slot:not([name])")?.assignedElements({ flatten: !0 }).find((l) => ["INPUT", "TEXTAREA", "SELECT"].includes(l.tagName))?.focus();
     }, this.handlePrefixSlotChange = (e) => {
       const r = e.target;
       this._hasPrefix = r.assignedElements({ flatten: !0 }).length > 0;
@@ -49,17 +49,18 @@ let t = class extends u {
     super.disconnectedCallback(), this.removeEventListener("focus", this.handleSlotFocus, !0), this.removeEventListener("blur", this.handleSlotBlur, !0);
   }
   render() {
-    const e = !!this.error, r = !e && !!this.helper, l = [
+    const e = !!this.error, r = !e && !!this.helper, s = [
       "formfield__container",
       `formfield__container--${this.size}`,
       `formfield__container--cursor-${this.cursor}`,
       this._hasPrefix ? "formfield__container--has-prefix" : "",
       this._hasSuffix ? "formfield__container--has-suffix" : "",
       e ? "formfield__container--error" : "",
-      this._focused ? "formfield__container--focused" : "",
+      this._focused || this.forceFocused ? "formfield__container--focused" : "",
       this._hovered ? "formfield__container--hovered" : "",
       this.disabled ? "formfield__container--disabled" : "",
-      this.variant === "subtle" ? "formfield__container--subtle" : ""
+      this.variant === "subtle" ? "formfield__container--subtle" : "",
+      this.multiline ? "formfield__container--multiline" : ""
     ].filter(Boolean).join(" ");
     return n`
       <div class="formfield">
@@ -71,7 +72,7 @@ let t = class extends u {
         ` : ""}
 
         <div
-          class="${l}"
+          class="${s}"
           @mouseenter=${this.handleMouseEnter}
           @mouseleave=${this.handleMouseLeave}
           @click=${this.handleContainerClick}
@@ -96,7 +97,7 @@ let t = class extends u {
     `;
   }
 };
-t.styles = [_`${h(m)}`];
+t.styles = [p`${h(m)}`];
 o([
   i({ type: String })
 ], t.prototype, "label", 2);
@@ -127,6 +128,12 @@ o([
 o([
   i({ type: Boolean })
 ], t.prototype, "readonly", 2);
+o([
+  i({ type: Boolean })
+], t.prototype, "multiline", 2);
+o([
+  i({ type: Boolean })
+], t.prototype, "forceFocused", 2);
 o([
   f()
 ], t.prototype, "_focused", 2);
@@ -140,7 +147,7 @@ o([
   f()
 ], t.prototype, "_hasSuffix", 2);
 t = o([
-  p("logosphere-formfield")
+  u("logosphere-formfield")
 ], t);
 export {
   t as F

package/dist/formfield-HIqosWPz.cjs

@@ -0,0 +1,33 @@
+"use strict";const l=require("lit"),t=require("lit/decorators.js"),d=":host{display:block}.formfield{position:relative;font-family:var(--font-family-base)}.formfield__label{display:block;font-size:12px;line-height:1.125rem;letter-spacing:-.12px;font-weight:var(--font-weight-medium);color:var(--color-tertiary);margin-bottom:var(--spacing-1)}.formfield__required{color:var(--color-danger);margin-left:var(--spacing-1)}.formfield__container{position:relative;display:flex;align-items:center;box-sizing:border-box;border-radius:var(--radius-base);border:1px solid var(--color-border);padding:0 var(--spacing-2) 0 var(--spacing-3);background-color:var(--color-body-bg);cursor:text;transition:border-color var(--transition-speed-base) var(--transition-timing),background-color var(--transition-speed-base) var(--transition-timing)}.formfield__container--cursor-text{cursor:text}.formfield__container--cursor-pointer{cursor:pointer}.formfield__container--cursor-default{cursor:default}.formfield__container--default{min-height:32px}.formfield__container--large{min-height:40px}.formfield__container--multiline{align-items:flex-start;min-height:64px;padding-top:var(--spacing-2);padding-bottom:var(--spacing-2)}.formfield__container--hovered:not(.formfield__container--focused):not(.formfield__container--error):not(.formfield__container--disabled){background-color:var(--color-tertiary-bg)}.formfield__container--focused{border-color:var(--color-body-text);background-color:var(--color-body-bg)}.formfield__container--error{border-color:var(--color-danger)}.formfield__container--disabled{background-color:var(--color-body-bg);opacity:.4;cursor:not-allowed;pointer-events:none}.formfield__container--subtle:not(.formfield__container--focused):not(.formfield__container--error){border-color:transparent;background-color:var(--color-tertiary-bg)}.formfield__input-area{flex:1;min-width:0;display:flex;align-items:center}.formfield__container--multiline .formfield__input-area{align-items:flex-start;align-self:stretch}.formfield__prefix,.formfield__clear,.formfield__suffix{display:flex;align-items:center;flex-shrink:0;align-self:stretch}.formfield__container--multiline .formfield__clear,.formfield__container--multiline .formfield__suffix{align-items:flex-start}.formfield__prefix{margin-right:var(--spacing-2)}.formfield__clear,.formfield__suffix{margin-left:var(--spacing-2)}.formfield__container--has-prefix .formfield__prefix{border-right:1px solid var(--color-border);padding-right:var(--spacing-2)}.formfield__container--has-suffix .formfield__suffix{border-left:1px solid var(--color-border);padding-left:var(--spacing-2)}.formfield__prefix:empty,.formfield__clear:empty,.formfield__suffix:empty{display:none}.formfield__helper{font-size:11px;line-height:1rem;letter-spacing:-.11px;font-weight:var(--font-weight-regular);color:var(--color-tertiary);margin-top:var(--spacing-1)}.formfield__error{font-size:11px;line-height:1rem;letter-spacing:-.11px;font-weight:var(--font-weight-regular);color:var(--color-danger);margin-top:var(--spacing-1)}::slotted(input),::slotted(textarea){width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;line-height:1.25rem;letter-spacing:-.14px;color:var(--color-body-text)}::slotted(input:disabled),::slotted(textarea:disabled){cursor:not-allowed}";var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,o=(n,e,r,s)=>{for(var i=s>1?void 0:s?h(e,r):e,a=n.length-1,f;a>=0;a--)(f=n[a])&&(i=(s?f(e,r,i):f(i))||i);return s&&i&&c(e,r,i),i};exports.FormField=class extends l.LitElement{constructor(){super(...arguments),this.label="",this.helper="",this.error="",this.placeholder="",this.size="default",this.variant="default",this.cursor="text",this.required=!1,this.disabled=!1,this.readonly=!1,this.multiline=!1,this.forceFocused=!1,this._focused=!1,this._hovered=!1,this._hasPrefix=!1,this._hasSuffix=!1,this.handleSlotFocus=e=>{const r=e.target;["INPUT","TEXTAREA","SELECT"].includes(r.tagName)&&(this._focused=!0,this.dispatchEvent(new CustomEvent("field-focus",{bubbles:!0,composed:!0,detail:{originalEvent:e}})))},this.handleSlotBlur=e=>{const r=e.target;["INPUT","TEXTAREA","SELECT"].includes(r.tagName)&&(this._focused=!1,this.dispatchEvent(new CustomEvent("field-blur",{bubbles:!0,composed:!0,detail:{originalEvent:e}})))},this.handleMouseEnter=()=>{this._hovered=!0},this.handleMouseLeave=()=>{this._hovered=!1},this.handleContainerClick=e=>{const r=e.target;if(["INPUT","TEXTAREA","SELECT","BUTTON"].includes(r.tagName))return;this.shadowRoot?.querySelector("slot:not([name])")?.assignedElements({flatten:!0}).find(a=>["INPUT","TEXTAREA","SELECT"].includes(a.tagName))?.focus()},this.handlePrefixSlotChange=e=>{const r=e.target;this._hasPrefix=r.assignedElements({flatten:!0}).length>0},this.handleSuffixSlotChange=e=>{const r=e.target;this._hasSuffix=r.assignedElements({flatten:!0}).length>0}}connectedCallback(){super.connectedCallback(),this.addEventListener("focus",this.handleSlotFocus,!0),this.addEventListener("blur",this.handleSlotBlur,!0)}firstUpdated(){const e=this.shadowRoot?.querySelector('slot[name="prefix"]'),r=this.shadowRoot?.querySelector('slot[name="suffix"]');e&&(this._hasPrefix=e.assignedElements({flatten:!0}).length>0),r&&(this._hasSuffix=r.assignedElements({flatten:!0}).length>0)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focus",this.handleSlotFocus,!0),this.removeEventListener("blur",this.handleSlotBlur,!0)}render(){const e=!!this.error,r=!e&&!!this.helper,s=["formfield__container",`formfield__container--${this.size}`,`formfield__container--cursor-${this.cursor}`,this._hasPrefix?"formfield__container--has-prefix":"",this._hasSuffix?"formfield__container--has-suffix":"",e?"formfield__container--error":"",this._focused||this.forceFocused?"formfield__container--focused":"",this._hovered?"formfield__container--hovered":"",this.disabled?"formfield__container--disabled":"",this.variant==="subtle"?"formfield__container--subtle":"",this.multiline?"formfield__container--multiline":""].filter(Boolean).join(" ");return l.html`
+      <div class="formfield">
+        ${this.label?l.html`
+          <label class="formfield__label">
+            ${this.label}
+            ${this.required?l.html`<span class="formfield__required">*</span>`:""}
+          </label>
+        `:""}
+
+        <div
+          class="${s}"
+          @mouseenter=${this.handleMouseEnter}
+          @mouseleave=${this.handleMouseLeave}
+          @click=${this.handleContainerClick}
+        >
+          <div class="formfield__prefix">
+            <slot name="prefix" @slotchange=${this.handlePrefixSlotChange}></slot>
+          </div>
+          <div class="formfield__input-area">
+            <slot></slot>
+          </div>
+          <div class="formfield__clear">
+            <slot name="clear"></slot>
+          </div>
+          <div class="formfield__suffix">
+            <slot name="suffix" @slotchange=${this.handleSuffixSlotChange}></slot>
+          </div>
+        </div>
+
+        ${r?l.html`<div class="formfield__helper">${this.helper}</div>`:""}
+        ${e?l.html`<div class="formfield__error">${this.error}</div>`:""}
+      </div>
+    `}};exports.FormField.styles=[l.css`${l.unsafeCSS(d)}`];o([t.property({type:String})],exports.FormField.prototype,"label",2);o([t.property({type:String})],exports.FormField.prototype,"helper",2);o([t.property({type:String})],exports.FormField.prototype,"error",2);o([t.property({type:String})],exports.FormField.prototype,"placeholder",2);o([t.property({type:String})],exports.FormField.prototype,"size",2);o([t.property({type:String})],exports.FormField.prototype,"variant",2);o([t.property({type:String})],exports.FormField.prototype,"cursor",2);o([t.property({type:Boolean})],exports.FormField.prototype,"required",2);o([t.property({type:Boolean})],exports.FormField.prototype,"disabled",2);o([t.property({type:Boolean})],exports.FormField.prototype,"readonly",2);o([t.property({type:Boolean})],exports.FormField.prototype,"multiline",2);o([t.property({type:Boolean})],exports.FormField.prototype,"forceFocused",2);o([t.state()],exports.FormField.prototype,"_focused",2);o([t.state()],exports.FormField.prototype,"_hovered",2);o([t.state()],exports.FormField.prototype,"_hasPrefix",2);o([t.state()],exports.FormField.prototype,"_hasSuffix",2);exports.FormField=o([t.customElement("logosphere-formfield")],exports.FormField);

package/dist/formfield.cjs

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

package/dist/formfield.js

@@ -1,4 +1,4 @@
-import { F } from "./formfield-CNh4mBSs.js";
+import { F } from "./formfield-BZOK4Pkz.js";
 export {
   F as FormField
 };

package/dist/index.cjs

@@ -1 +1,119 @@
-"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-C6OHJuya.cjs"),i=require("./popover-C2p5Pmts.cjs"),d=require("./text-area-CZDdxbrN.cjs"),p=require("./chatbot-DjFe2_HE.cjs"),g=require("./calendar-LMn1ZF3N.cjs"),l=require("./combobox-D5X75iH0.cjs"),m=require("./datepicker-CwDDA6np.cjs"),s=require("./drawer-BvcPd5nz.cjs"),f=require("./download-manager-BSIMTGaK.cjs"),e=require("./leftmenu-BSb9rGg4.cjs"),P=require("./modal-3-TNUICH.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});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./button-BryTzF74.cjs"),h=require("./badge-DXBwR32c.cjs"),_=require("./checkbox-CdDTRdKV.cjs"),m=require("./formfield-HIqosWPz.cjs"),b=require("./switch-Rnnn10bn.cjs"),g=require("./breadcrumb-Cop-B1J7.cjs"),v=require("./card-C8G9YXhU.cjs"),f=require("./input-DgGaco-Y.cjs"),y=require("./popover-C2p5Pmts.cjs"),k=require("./text-area-Bz62kq2S.cjs"),a=require("lit"),t=require("lit/decorators.js"),P=require("@popperjs/core");require("./ui-icon-BRl1UmIf.cjs");const x=require("./chatbot-BfzuCerB.cjs"),$=require("./calendar-D5W-t26J.cjs"),O=require("./combobox-BrANDiaM.cjs"),w=require("./datepicker-CxKs90IQ.cjs"),S=require("./drawer-s1BLy2Xe.cjs"),T=require("./download-manager-BSIMTGaK.cjs"),u=require("./leftmenu-BSVpwbyD.cjs"),j=require("./modal-3-TNUICH.cjs"),l=require("./toast-container-DsEbVrT7.cjs"),C=require("./tab-DcjAlXzU.cjs"),q=require("./tree-menu-BZEOD4_f.cjs"),M=":host{display:block;width:100%}.timepicker__reference{display:block;width:100%}.timepicker__trigger{border:none;background:transparent;color:var(--color-tertiary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;height:100%;min-height:32px;outline:none;border-radius:0 var(--radius-base) var(--radius-base) 0;transition:color var(--transition-speed-fast) var(--transition-timing),background-color var(--transition-speed-fast) var(--transition-timing)}.timepicker__trigger:hover{color:var(--color-body-text);background-color:var(--color-body-bg-hover)}.timepicker__trigger--active{color:var(--color-body-text)}.timepicker__trigger:disabled{pointer-events:none;opacity:.4}.timepicker__popup[popover]{position:fixed;inset:unset;margin:0;padding:0;border:none;width:240px;background-color:var(--color-body-bg);border-radius:12px;box-shadow:0 4px 16px #7878783d;overflow:hidden;z-index:var(--z-index-dropdown, 1000)}.timepicker__spinner{display:flex;flex-direction:row;align-items:stretch;padding:var(--spacing-1) var(--spacing-2)}.timepicker__col{flex:1;display:flex;flex-direction:column;padding:0px var(--spacing-5)}.timepicker__col--left{align-items:flex-start}.timepicker__col--right{align-items:flex-end}.timepicker__col--sep{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--spacing-1)}.timepicker__spin-btn{height:32px;display:flex;align-items:center;justify-content:center;border:none;padding:var(--spacing-2);background:transparent;color:var(--color-secondary);border-radius:var(--radius-base);cursor:pointer;outline:none;box-sizing:border-box;transition:background-color var(--transition-speed-fast) var(--transition-timing),color var(--transition-speed-fast) var(--transition-timing)}.timepicker__spin-btn:hover{background-color:var(--color-body-bg-hover);color:var(--color-body-text)}.timepicker__spin-btn:active{background-color:var(--color-body-bg-active)}.timepicker__time-unit{height:32px;display:flex;align-items:center;justify-content:center;font-size:14px;font-family:var(--font-family-base);font-weight:var(--font-weight-regular);line-height:1.25rem;letter-spacing:-.14px;color:var(--color-body-text);text-align:center;box-sizing:border-box;padding:var(--spacing-2)}.timepicker__colon{height:32px;display:flex;align-items:center;justify-content:center;font-size:16px;font-family:var(--font-family-base);font-weight:var(--font-weight-medium);color:var(--color-secondary)}.timepicker__actions{display:flex;align-items:center;padding:var(--spacing-2);border-top:1px solid var(--color-border);gap:var(--spacing-1)}.timepicker__action-btn{flex:1 0 0;min-width:0;height:32px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--color-secondary);border-radius:var(--radius-full);cursor:pointer;padding:var(--spacing-2);outline:none;transition:background-color var(--transition-speed-fast) var(--transition-timing),color var(--transition-speed-fast) var(--transition-timing)}.timepicker__action-btn:hover{background-color:var(--color-body-bg-hover);color:var(--color-body-text)}.timepicker__action-btn:active{background-color:var(--color-body-bg-active)}";var L=Object.defineProperty,z=Object.getOwnPropertyDescriptor,i=(p,e,r,n)=>{for(var o=n>1?void 0:n?z(e,r):e,s=p.length-1,c;s>=0;s--)(c=p[s])&&(o=(n?c(e,r,o):c(o))||o);return n&&o&&L(e,r,o),o};exports.TimePicker=class extends a.LitElement{constructor(){super(...arguments),this.value="",this.label="",this.helper="",this.error="",this.placeholder="__:__",this.required=!1,this.disabled=!1,this.readonly=!1,this.size="default",this.variant="default",this._isOpen=!1,this._hour=0,this._minute=0,this._handleOutsideClick=e=>{this._isOpen&&!e.composedPath().includes(this)&&(this._isOpen=!1)},this._handleInputChange=e=>{e.stopPropagation();const r=e.detail?.value??"";if(/^\d{2}:\d{2}$/.test(r)){const[n,o]=this._parseValue(r);this._hour=n,this._minute=o;const s=`${this._pad(n)}:${this._pad(o)}`;this.value=s,this._emit(s)}},this._handleInputClear=e=>{e.stopPropagation(),this.value="",this._hour=0,this._minute=0,this._emit(""),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})),this._isOpen=!1},this._incrementHour=()=>{this._hour=(this._hour+1)%24,this._syncValue()},this._decrementHour=()=>{this._hour=(this._hour-1+24)%24,this._syncValue()},this._incrementMinute=()=>{this._minute=(this._minute+1)%60,this._syncValue()},this._decrementMinute=()=>{this._minute=(this._minute-1+60)%60,this._syncValue()}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick),this._destroyPopper()}willUpdate(e){if(e.has("value")&&/^\d{1,2}:\d{2}$/.test(this.value)){const[r,n]=this._parseValue(this.value);this._hour=r,this._minute=n}}updated(e){e.has("_isOpen")&&(this._isOpen?this.updateComplete.then(()=>{this._showPopover(),this._updatePopper()}):(this._hidePopover(),this._destroyPopper()))}_parseValue(e){const r=e.match(/^(\d{1,2}):(\d{2})$/);return r?[Math.min(23,Math.max(0,parseInt(r[1],10))),Math.min(59,Math.max(0,parseInt(r[2],10)))]:[0,0]}_pad(e){return String(e).padStart(2,"0")}_updatePopper(){!this._referenceEl||!this._popupEl||(this._popperInstance=P.createPopper(this._referenceEl,this._popupEl,{placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[0,4]}},{name:"flip",options:{fallbackPlacements:["top-start"]}},{name:"preventOverflow",options:{boundary:document.documentElement,padding:8}}]}))}_destroyPopper(){this._popperInstance?.destroy(),this._popperInstance=void 0}_showPopover(){this._popupEl?.showPopover?.()}_hidePopover(){const e=this._popupEl;try{e?.hidePopover?.()}catch{}}_togglePopup(){if(!(this.disabled||this.readonly))if(this._isOpen)this._isOpen=!1;else{const[e,r]=this._parseValue(this.value);this._hour=e,this._minute=r,this._isOpen=!0}}_clearValue(e){e?.stopPropagation(),this.value="",this._hour=0,this._minute=0,this._emit(""),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})),this._isOpen=!1}_setNow(){const e=new Date;this._hour=e.getHours(),this._minute=e.getMinutes(),this._syncValue()}_emit(e){this.onChange?.(e),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:e}}))}_syncValue(){const e=`${this._pad(this._hour)}:${this._pad(this._minute)}`;this.value=e,this._emit(e)}_startSpin(e){e(),this._spinInterval=setInterval(e,120)}_stopSpin(){clearInterval(this._spinInterval),this._spinInterval=void 0}_renderPopup(){return a.html`
+      <div data-timepicker-popup popover="manual" class="timepicker__popup">
+        <div class="timepicker__spinner">
+          <!-- Sol sütun: saat -->
+          <div class="timepicker__col timepicker__col--left">
+            <button
+              class="timepicker__spin-btn"
+              @mousedown=${()=>this._startSpin(this._incrementHour)}
+              @mouseup=${this._stopSpin}
+              @mouseleave=${this._stopSpin}
+              @touchstart=${e=>{e.preventDefault(),this._startSpin(this._incrementHour)}}
+              @touchend=${this._stopSpin}
+              tabindex="-1"
+              aria-label="Saat artır"
+            ><ui-icon name="uil-arrow-up" size="16"></ui-icon></button>
+            <div class="timepicker__time-unit">${this._pad(this._hour)}</div>
+            <button
+              class="timepicker__spin-btn"
+              @mousedown=${()=>this._startSpin(this._decrementHour)}
+              @mouseup=${this._stopSpin}
+              @mouseleave=${this._stopSpin}
+              @touchstart=${e=>{e.preventDefault(),this._startSpin(this._decrementHour)}}
+              @touchend=${this._stopSpin}
+              tabindex="-1"
+              aria-label="Saat azalt"
+            ><ui-icon name="uil-arrow-down" size="16"></ui-icon></button>
+          </div>
+
+          <!-- Orta sütun: iki nokta -->
+          <div class="timepicker__col timepicker__col--sep">
+            <div class="timepicker__colon">:</div>
+          </div>
+
+          <!-- Sağ sütun: dakika -->
+          <div class="timepicker__col timepicker__col--right">
+            <button
+              class="timepicker__spin-btn"
+              @mousedown=${()=>this._startSpin(this._incrementMinute)}
+              @mouseup=${this._stopSpin}
+              @mouseleave=${this._stopSpin}
+              @touchstart=${e=>{e.preventDefault(),this._startSpin(this._incrementMinute)}}
+              @touchend=${this._stopSpin}
+              tabindex="-1"
+              aria-label="Dakika artır"
+            ><ui-icon name="uil-arrow-up" size="16"></ui-icon></button>
+            <div class="timepicker__time-unit">${this._pad(this._minute)}</div>
+            <button
+              class="timepicker__spin-btn"
+              @mousedown=${()=>this._startSpin(this._decrementMinute)}
+              @mouseup=${this._stopSpin}
+              @mouseleave=${this._stopSpin}
+              @touchstart=${e=>{e.preventDefault(),this._startSpin(this._decrementMinute)}}
+              @touchend=${this._stopSpin}
+              tabindex="-1"
+              aria-label="Dakika azalt"
+            ><ui-icon name="uil-arrow-down" size="16"></ui-icon></button>
+          </div>
+        </div>
+
+        <!-- Action buttons -->
+        <div class="timepicker__actions">
+          <button
+            class="timepicker__action-btn"
+            @click=${this._setNow}
+            title="Şu anki saati seç"
+          >
+            <ui-icon name="uil-calendar-alt" size="16"></ui-icon>
+          </button>
+          <button
+            class="timepicker__action-btn"
+            @click=${()=>this._clearValue()}
+            title="Temizle"
+          >
+            <ui-icon name="uil-trash" size="16"></ui-icon>
+          </button>
+          <button
+            class="timepicker__action-btn"
+            @click=${()=>{this._isOpen=!1}}
+            title="Kapat"
+          >
+            <ui-icon name="uil-times" size="16"></ui-icon>
+          </button>
+        </div>
+      </div>
+    `}render(){return a.html`
+      <div class="timepicker__reference">
+        <logosphere-input
+          .label=${this.label}
+          .helper=${this.helper}
+          .error=${this.error}
+          .required=${this.required}
+          .disabled=${this.disabled}
+          .readonly=${this.readonly}
+          .size=${this.size}
+          .variant=${this.variant}
+          .placeholder=${this.placeholder}
+          .value=${this.value}
+          mask="00:00"
+          @input=${this._handleInputChange}
+          @clear=${this._handleInputClear}
+          @change=${e=>e.stopPropagation()}
+        >
+          <button
+            slot="suffix"
+            type="button"
+            class="timepicker__trigger ${this._isOpen?"timepicker__trigger--active":""}"
+            @click=${this._togglePopup}
+            ?disabled=${this.disabled}
+            tabindex=${this.disabled?"-1":"0"}
+            aria-label="Saat seç"
+            aria-expanded=${this._isOpen?"true":"false"}
+          >
+            <ui-icon name="uil-clock" size="16"></ui-icon>
+          </button>
+        </logosphere-input>
+      </div>
+
+      ${this._renderPopup()}
+    `}};exports.TimePicker.styles=[a.css`${a.unsafeCSS(M)}`];i([t.property({type:String})],exports.TimePicker.prototype,"value",2);i([t.property({type:String})],exports.TimePicker.prototype,"label",2);i([t.property({type:String})],exports.TimePicker.prototype,"helper",2);i([t.property({type:String})],exports.TimePicker.prototype,"error",2);i([t.property({type:String})],exports.TimePicker.prototype,"placeholder",2);i([t.property({type:Boolean})],exports.TimePicker.prototype,"required",2);i([t.property({type:Boolean})],exports.TimePicker.prototype,"disabled",2);i([t.property({type:Boolean})],exports.TimePicker.prototype,"readonly",2);i([t.property({type:String})],exports.TimePicker.prototype,"size",2);i([t.property({type:String})],exports.TimePicker.prototype,"variant",2);i([t.property({attribute:!1})],exports.TimePicker.prototype,"onChange",2);i([t.state()],exports.TimePicker.prototype,"_isOpen",2);i([t.state()],exports.TimePicker.prototype,"_hour",2);i([t.state()],exports.TimePicker.prototype,"_minute",2);i([t.query(".timepicker__reference")],exports.TimePicker.prototype,"_referenceEl",2);i([t.query("[data-timepicker-popup]")],exports.TimePicker.prototype,"_popupEl",2);exports.TimePicker=i([t.customElement("logosphere-timepicker")],exports.TimePicker);Object.defineProperty(exports,"Button",{enumerable:!0,get:()=>d.Button});Object.defineProperty(exports,"LogosphereBadge",{enumerable:!0,get:()=>h.LogosphereBadge});Object.defineProperty(exports,"Checkbox",{enumerable:!0,get:()=>_.Checkbox});Object.defineProperty(exports,"FormField",{enumerable:!0,get:()=>m.FormField});Object.defineProperty(exports,"Switch",{enumerable:!0,get:()=>b.Switch});Object.defineProperty(exports,"Breadcrumb",{enumerable:!0,get:()=>g.Breadcrumb});Object.defineProperty(exports,"Card",{enumerable:!0,get:()=>v.Card});Object.defineProperty(exports,"LogosphereInput",{enumerable:!0,get:()=>f.LogosphereInput});Object.defineProperty(exports,"Popover",{enumerable:!0,get:()=>y.Popover});Object.defineProperty(exports,"TextArea",{enumerable:!0,get:()=>k.TextArea});Object.defineProperty(exports,"LogosphereChatBot",{enumerable:!0,get:()=>x.LogosphereChatBot});Object.defineProperty(exports,"LogosphereCalendar",{enumerable:!0,get:()=>$.LogosphereCalendar});Object.defineProperty(exports,"Combobox",{enumerable:!0,get:()=>O.Combobox});Object.defineProperty(exports,"LogosphereDatePicker",{enumerable:!0,get:()=>w.LogosphereDatePicker});Object.defineProperty(exports,"Drawer",{enumerable:!0,get:()=>S.Drawer});Object.defineProperty(exports,"DownloadManager",{enumerable:!0,get:()=>T.DownloadManager});Object.defineProperty(exports,"LeftMenu",{enumerable:!0,get:()=>u.LeftMenu});Object.defineProperty(exports,"LeftMenuItemElement",{enumerable:!0,get:()=>u.LeftMenuItemElement});Object.defineProperty(exports,"Modal",{enumerable:!0,get:()=>j.Modal});Object.defineProperty(exports,"LogosphereToast",{enumerable:!0,get:()=>l.LogosphereToast});Object.defineProperty(exports,"LogosphereToastContainer",{enumerable:!0,get:()=>l.LogosphereToastContainer});exports.ToastService=l.ToastService;Object.defineProperty(exports,"LogosphereTab",{enumerable:!0,get:()=>C.LogosphereTab});Object.defineProperty(exports,"TreeMenu",{enumerable:!0,get:()=>q.TreeMenu});

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export * from "./molecules/Card/index.js";
 export * from "./molecules/Input/index.js";
 export * from "./molecules/Popover/index.js";
 export * from "./molecules/Textarea/index.js";
+export * from "./molecules/TimePicker/index.js";
 export * from "./organisms/Chatbot/index.js";
 export * from "./organisms/Calendar/index.js";
 export * from "./organisms/Combobox/index.js";
@@ -16,5 +17,6 @@ export * from "./organisms/Drawer/index.js";
 export * from "./organisms/DownloadManager/index.js";
 export * from "./organisms/LeftMenu/index.js";
 export * from "./organisms/Modal/index.js";
+export * from "./organisms/Toast/index.js";
 export * from "./organisms/Tab/index.js";
 export * from "./organisms/TreeMenu/index.js";