@logosphere-ui/core 0.0.0-alpha.3 → 0.0.0-alpha.32

package/dist/drawer-CRB8UUAo.js

@@ -0,0 +1,114 @@
+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";
+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--)
+    (d = e[a]) && (o = (s ? d(t, r, o) : d(o)) || o);
+  return s && o && v(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), s = 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:${s}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>
+            <logosphere-button
+              variant="outline"
+              theme="secondary"
+              size="md"
+              iconOnly
+              aria-label="Close drawer"
+              @click=${this._onCloseClick}
+            >
+              <ui-icon name="uil-times" size="16"></ui-icon>
+            </logosphere-button>
+          </div>
+          <div class="drawer__body">
+            <slot></slot>
+          </div>
+        </aside>
+      </div>
+    `;
+  }
+};
+i.styles = [p`${c(_)}`];
+n([
+  l({ type: Boolean, reflect: !0 })
+], i.prototype, "open", 2);
+n([
+  l({ type: String })
+], i.prototype, "title", 2);
+n([
+  l({ type: String })
+], i.prototype, "position", 2);
+n([
+  l({ type: Number })
+], i.prototype, "width", 2);
+n([
+  l({ type: Boolean })
+], i.prototype, "closeOnEsc", 2);
+n([
+  l({ type: String })
+], i.prototype, "containerSelector", 2);
+i = n([
+  m("logosphere-drawer")
+], i);
+export {
+  i as D
+};

package/dist/drawer-g6mHdpjF.cjs

@@ -0,0 +1,32 @@
+"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`
+      <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>
+            <logosphere-button
+              variant="outline"
+              theme="secondary"
+              size="md"
+              iconOnly
+              aria-label="Close drawer"
+              @click=${this._onCloseClick}
+            >
+              <ui-icon name="uil-times" size="16"></ui-icon>
+            </logosphere-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.cjs

@@ -0,0 +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});

package/dist/drawer.js

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

package/dist/formfield-CRcyUMvQ.cjs

@@ -0,0 +1,33 @@
+"use strict";const l=require("lit"),o=require("lit/decorators.js"),f=":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(--formfield-border-radius, var(--radius-base));border-top:var(--formfield-border-top, var(--formfield-border-top-width, 1px) solid var(--formfield-border-color, var(--color-border)));border-right:var(--formfield-border-right, var(--formfield-border-right-width, 1px) solid var(--formfield-border-color, var(--color-border)));border-bottom:var(--formfield-border-bottom, var(--formfield-border-bottom-width, 1px) solid var(--formfield-border-color, var(--color-border)));border-left:var(--formfield-border-left, var(--formfield-border-left-width, 1px) solid var(--formfield-border-color, 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)}import .formfield__container--hovered:not(.formfield__container--focused):not(.formfield__container--error):not(.formfield__container--disabled){background-color:var(--color-light)}.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-light)}.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,t=(n,e,r,a)=>{for(var i=a>1?void 0:a?h(e,r):e,s=n.length-1,d;s>=0;s--)(d=n[s])&&(i=(a?d(e,r,i):d(i))||i);return a&&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(s=>["INPUT","TEXTAREA","SELECT"].includes(s.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,a=["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="${a}"
+          @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(f)}`];t([o.property({type:String})],exports.FormField.prototype,"label",2);t([o.property({type:String})],exports.FormField.prototype,"helper",2);t([o.property({type:String})],exports.FormField.prototype,"error",2);t([o.property({type:String})],exports.FormField.prototype,"placeholder",2);t([o.property({type:String})],exports.FormField.prototype,"size",2);t([o.property({type:String})],exports.FormField.prototype,"variant",2);t([o.property({type:String})],exports.FormField.prototype,"cursor",2);t([o.property({type:Boolean})],exports.FormField.prototype,"required",2);t([o.property({type:Boolean})],exports.FormField.prototype,"disabled",2);t([o.property({type:Boolean})],exports.FormField.prototype,"readonly",2);t([o.property({type:Boolean})],exports.FormField.prototype,"multiline",2);t([o.property({type:Boolean})],exports.FormField.prototype,"forceFocused",2);t([o.state()],exports.FormField.prototype,"_focused",2);t([o.state()],exports.FormField.prototype,"_hovered",2);t([o.state()],exports.FormField.prototype,"_hasPrefix",2);t([o.state()],exports.FormField.prototype,"_hasSuffix",2);exports.FormField=t([o.customElement("logosphere-formfield")],exports.FormField);

package/dist/formfield-O327HYt0.js

@@ -0,0 +1,154 @@
+import { unsafeCSS as h, css as m, LitElement as p, html as n } from "lit";
+import { property as i, state as f, customElement as _ } from "lit/decorators.js";
+const u = ":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(--formfield-border-radius, var(--radius-base));border-top:var(--formfield-border-top, var(--formfield-border-top-width, 1px) solid var(--formfield-border-color, var(--color-border)));border-right:var(--formfield-border-right, var(--formfield-border-right-width, 1px) solid var(--formfield-border-color, var(--color-border)));border-bottom:var(--formfield-border-bottom, var(--formfield-border-bottom-width, 1px) solid var(--formfield-border-color, var(--color-border)));border-left:var(--formfield-border-left, var(--formfield-border-left-width, 1px) solid var(--formfield-border-color, 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)}import .formfield__container--hovered:not(.formfield__container--focused):not(.formfield__container--error):not(.formfield__container--disabled){background-color:var(--color-light)}.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-light)}.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, t = (e, r, a, s) => {
+  for (var l = s > 1 ? void 0 : s ? v(r, a) : r, d = e.length - 1, c; d >= 0; d--)
+    (c = e[d]) && (l = (s ? c(r, a, l) : c(l)) || l);
+  return s && l && g(r, a, l), l;
+};
+let o = class extends p {
+  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((l) => ["INPUT", "TEXTAREA", "SELECT"].includes(l.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, a = [
+      "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 n`
+      <div class="formfield">
+        ${this.label ? n`
+          <label class="formfield__label">
+            ${this.label}
+            ${this.required ? n`<span class="formfield__required">*</span>` : ""}
+          </label>
+        ` : ""}
+
+        <div
+          class="${a}"
+          @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 ? n`<div class="formfield__helper">${this.helper}</div>` : ""}
+        ${e ? n`<div class="formfield__error">${this.error}</div>` : ""}
+      </div>
+    `;
+  }
+};
+o.styles = [m`${h(u)}`];
+t([
+  i({ type: String })
+], o.prototype, "label", 2);
+t([
+  i({ type: String })
+], o.prototype, "helper", 2);
+t([
+  i({ type: String })
+], o.prototype, "error", 2);
+t([
+  i({ type: String })
+], o.prototype, "placeholder", 2);
+t([
+  i({ type: String })
+], o.prototype, "size", 2);
+t([
+  i({ type: String })
+], o.prototype, "variant", 2);
+t([
+  i({ type: String })
+], o.prototype, "cursor", 2);
+t([
+  i({ type: Boolean })
+], o.prototype, "required", 2);
+t([
+  i({ type: Boolean })
+], o.prototype, "disabled", 2);
+t([
+  i({ type: Boolean })
+], o.prototype, "readonly", 2);
+t([
+  i({ type: Boolean })
+], o.prototype, "multiline", 2);
+t([
+  i({ type: Boolean })
+], o.prototype, "forceFocused", 2);
+t([
+  f()
+], o.prototype, "_focused", 2);
+t([
+  f()
+], o.prototype, "_hovered", 2);
+t([
+  f()
+], o.prototype, "_hasPrefix", 2);
+t([
+  f()
+], o.prototype, "_hasSuffix", 2);
+o = t([
+  _("logosphere-formfield")
+], o);
+export {
+  o as F
+};

package/dist/formfield.cjs

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

package/dist/formfield.js

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

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./button-CDRccsk9.cjs"),r=require("./badge-BbhaO73N.cjs"),t=require("./checkbox-CdDTRdKV.cjs"),o=require("./formfield-D_7NFFoe.cjs"),n=require("./switch-Rnnn10bn.cjs"),u=require("./breadcrumb-Cop-B1J7.cjs"),b=require("./card-n8ka8Zk-.cjs"),a=require("./input-DsIOQPGV.cjs"),c=require("./popover-C_Ob86CJ.cjs"),i=require("./text-area-DFDF5oos.cjs"),d=require("./chatbot-oRwt64d8.cjs"),p=require("./combobox-pmE7bgEL.cjs"),g=require("./datepicker-b9JGTTMx.cjs"),s=require("./download-manager-BSIMTGaK.cjs"),l=require("./modal-DQ8VFL-P.cjs"),m=require("./tab-DcjAlXzU.cjs");Object.defineProperty(exports,"Button",{enumerable:!0,get:()=>e.Button});Object.defineProperty(exports,"LogosphereBadge",{enumerable:!0,get:()=>r.LogosphereBadge});Object.defineProperty(exports,"Checkbox",{enumerable:!0,get:()=>t.Checkbox});Object.defineProperty(exports,"FormField",{enumerable:!0,get:()=>o.FormField});Object.defineProperty(exports,"Switch",{enumerable:!0,get:()=>n.Switch});Object.defineProperty(exports,"Breadcrumb",{enumerable:!0,get:()=>u.Breadcrumb});Object.defineProperty(exports,"Card",{enumerable:!0,get:()=>b.Card});Object.defineProperty(exports,"LogosphereInput",{enumerable:!0,get:()=>a.LogosphereInput});Object.defineProperty(exports,"Popover",{enumerable:!0,get:()=>c.Popover});Object.defineProperty(exports,"TextArea",{enumerable:!0,get:()=>i.TextArea});Object.defineProperty(exports,"LedsUiChatbot",{enumerable:!0,get:()=>d.LedsUiChatbot});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,"Modal",{enumerable:!0,get:()=>l.Modal});Object.defineProperty(exports,"LogosphereTab",{enumerable:!0,get:()=>m.LogosphereTab});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./button-DRZ4sG4T.cjs"),o=require("./badge-COTtd1jh.cjs"),n=require("./checkbox-CdDTRdKV.cjs"),u=require("./formfield-CRcyUMvQ.cjs"),a=require("./switch-8RGGesy5.cjs"),c=require("./breadcrumb-Cop-B1J7.cjs"),i=require("./card-BD8FkSTi.cjs"),b=require("./input-Tkm7VBBl.cjs"),d=require("./popover-DhEvLuOo.cjs"),p=require("./text-area-DCBCDtJw.cjs"),s=require("./timepicker-WxA2Uo66.cjs"),g=require("./chatbot-8etAVHNx.cjs"),m=require("./calendar-DtpJBtpq.cjs"),l=require("./combobox-BV4AKTqp.cjs"),f=require("./datepicker-BCNJROwD.cjs"),P=require("./drawer-g6mHdpjF.cjs"),h=require("./download-manager-DDeTYRPs.cjs"),r=require("./leftmenu-D0sRExqr.cjs"),y=require("./modal-DFnpqdWX.cjs"),e=require("./toast-container-B9E_mVk6.cjs"),j=require("./tab-BmrITzOL.cjs"),O=require("./tree-menu-DuJuy5pp.cjs");Object.defineProperty(exports,"Button",{enumerable:!0,get:()=>t.Button});Object.defineProperty(exports,"LogosphereBadge",{enumerable:!0,get:()=>o.LogosphereBadge});Object.defineProperty(exports,"Checkbox",{enumerable:!0,get:()=>n.Checkbox});Object.defineProperty(exports,"FormField",{enumerable:!0,get:()=>u.FormField});Object.defineProperty(exports,"Switch",{enumerable:!0,get:()=>a.Switch});Object.defineProperty(exports,"Breadcrumb",{enumerable:!0,get:()=>c.Breadcrumb});Object.defineProperty(exports,"Card",{enumerable:!0,get:()=>i.Card});Object.defineProperty(exports,"LogosphereInput",{enumerable:!0,get:()=>b.LogosphereInput});Object.defineProperty(exports,"Popover",{enumerable:!0,get:()=>d.Popover});Object.defineProperty(exports,"TextArea",{enumerable:!0,get:()=>p.TextArea});Object.defineProperty(exports,"TimePicker",{enumerable:!0,get:()=>s.TimePicker});Object.defineProperty(exports,"LogosphereChatBot",{enumerable:!0,get:()=>g.LogosphereChatBot});Object.defineProperty(exports,"LogosphereCalendar",{enumerable:!0,get:()=>m.LogosphereCalendar});Object.defineProperty(exports,"Combobox",{enumerable:!0,get:()=>l.Combobox});Object.defineProperty(exports,"LogosphereDatePicker",{enumerable:!0,get:()=>f.LogosphereDatePicker});Object.defineProperty(exports,"Drawer",{enumerable:!0,get:()=>P.Drawer});Object.defineProperty(exports,"DownloadManager",{enumerable:!0,get:()=>h.DownloadManager});Object.defineProperty(exports,"LeftMenu",{enumerable:!0,get:()=>r.LeftMenu});Object.defineProperty(exports,"LeftMenuItemElement",{enumerable:!0,get:()=>r.LeftMenuItemElement});exports.Modal=y.Modal;Object.defineProperty(exports,"LogosphereToast",{enumerable:!0,get:()=>e.LogosphereToast});Object.defineProperty(exports,"LogosphereToastContainer",{enumerable:!0,get:()=>e.LogosphereToastContainer});exports.ToastService=e.ToastService;Object.defineProperty(exports,"LogosphereTab",{enumerable:!0,get:()=>j.LogosphereTab});Object.defineProperty(exports,"TreeMenu",{enumerable:!0,get:()=>O.TreeMenu});

package/dist/index.d.ts

@@ -8,9 +8,15 @@ 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";
 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";
+export * from "./organisms/Toast/index.js";
 export * from "./organisms/Tab/index.js";
+export * from "./organisms/TreeMenu/index.js";

package/dist/index.js

@@ -1,34 +1,49 @@
-import { B as e } from "./button-C1EwOosO.js";
-import { L as t } from "./badge-DE7Tgd8Z.js";
-import { C as s } from "./checkbox-7Rb3WKGx.js";
-import { F as x } from "./formfield-d8fp9FTV.js";
-import { S as L } from "./switch-Cpl53nRW.js";
-import { B as C } from "./breadcrumb-B-4yqoJZ.js";
-import { C as h } from "./card-CUhlTJyJ.js";
-import { L as B } from "./input-ByllRq9M.js";
-import { P as i } from "./popover-D-FXdEdS.js";
-import { T as l } from "./text-area-CtZY3yLA.js";
-import { L as D } from "./chatbot-Ces7Xveb.js";
-import { C as M } from "./combobox-BJbI-Tgi.js";
-import { L as T } from "./datepicker-DFJx45C-.js";
-import { D as w } from "./download-manager-A4fOxGWJ.js";
-import { M as v } from "./modal-Bfc6WQSL.js";
-import { L as I } from "./tab-BKdN4xAz.js";
+import { B as e } from "./button-Uu9oaieg.js";
+import { L as t } from "./badge-BJqUgXZD.js";
+import { C as p } from "./checkbox-g6kl2jGR.js";
+import { F as x } from "./formfield-O327HYt0.js";
+import { S as L } from "./switch-DNqPqH-R.js";
+import { B as n } from "./breadcrumb-BB61Xt0s.js";
+import { C as g } from "./card-CAAhjIjf.js";
+import { L as d } from "./input-BUX_2G5m.js";
+import { P as c } from "./popover-BSfKsQni.js";
+import { T as B } from "./text-area-coWx4Xn-.js";
+import { T as b } from "./timepicker-rNyKCfN3.js";
+import { L as D } from "./chatbot-p4CmxSdZ.js";
+import { L as k } from "./calendar-B7bSuIt4.js";
+import { C as F } from "./combobox-CTqEZUg6.js";
+import { L as v } from "./datepicker-tJbIvNpy.js";
+import { D as A } from "./drawer-CRB8UUAo.js";
+import { D as j } from "./download-manager-BPg-6Qfg.js";
+import { L as y, a as z } from "./leftmenu-Cf2gC2J0.js";
+import { M as H } from "./modal-Cfa0imdF.js";
+import { L as K, a as N, T as O } from "./toast-container-Cb0MduXt.js";
+import { L as R } from "./tab-Ca_OyNqQ.js";
+import { T as V } from "./tree-menu-CufITiv_.js";
 export {
-  C as Breadcrumb,
+  n as Breadcrumb,
   e as Button,
-  h as Card,
-  s as Checkbox,
-  M as Combobox,
-  w as DownloadManager,
+  g as Card,
+  p as Checkbox,
+  F as Combobox,
+  j as DownloadManager,
+  A as Drawer,
   x as FormField,
-  T as LedsDatePicker,
-  D as LedsUiChatbot,
+  y as LeftMenu,
+  z as LeftMenuItemElement,
   t as LogosphereBadge,
-  B as LogosphereInput,
-  I as LogosphereTab,
-  v as Modal,
-  i as Popover,
+  k as LogosphereCalendar,
+  D as LogosphereChatBot,
+  v as LogosphereDatePicker,
+  d as LogosphereInput,
+  R as LogosphereTab,
+  K as LogosphereToast,
+  N as LogosphereToastContainer,
+  H as Modal,
+  c as Popover,
   L as Switch,
-  l as TextArea
+  B as TextArea,
+  b as TimePicker,
+  O as ToastService,
+  V as TreeMenu
 };