@logosphere-ui/core 0.0.0-alpha.2

package/dist/input-ByllRq9M.js

@@ -0,0 +1,192 @@
+import { LitElement as d, nothing as o, html as u, unsafeCSS as y, css as c } from "lit";
+import { query as m, property as r, state as b, customElement as v } from "lit/decorators.js";
+import { l as g } from "./live-WTVSYE2F.js";
+const _ = ".input__field{width:100%;background:transparent;border:none;outline:none;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);box-sizing:border-box;line-height:1.5}.input__field::placeholder{color:var(--color-tertiary)}.input__field:disabled{cursor:not-allowed}.input__field--default{height:16px}.input__field--large{height:24px}.input__clear-btn{border:none;background:transparent;color:var(--color-gray-400);cursor:pointer;padding:0;display:inline-flex;align-items:center;outline:none;flex-shrink:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.input__clear-btn:hover{color:var(--color-gray-600)}";
+var f = Object.defineProperty, E = Object.getOwnPropertyDescriptor, e = (i, n, l, a) => {
+  for (var s = a > 1 ? void 0 : a ? E(n, l) : n, p = i.length - 1, h; p >= 0; p--)
+    (h = i[p]) && (s = (a ? h(n, l, s) : h(s)) || s);
+  return a && s && f(n, l, s), s;
+};
+let t = class extends d {
+  constructor() {
+    super(...arguments), this.value = "", this.type = "text", this.placeholder = "", this.name = "", this.autocomplete = "", this.pattern = "", this.size = "default", this.variant = "default", this.showClear = !1, this.label = "", this.helper = "", this.error = "", this.required = !1, this.disabled = !1, this.readonly = !1, this._internalError = "", this.handleInput = (i) => {
+      const n = i.target;
+      this.value = n.value, this._internalError && (this._internalError = "", this._inputElement.setCustomValidity("")), this.dispatchEvent(new CustomEvent("input", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: this.value, originalEvent: i }
+      }));
+    }, this.handleChange = (i) => {
+      const n = i.target;
+      this.value = n.value, n.checkValidity() || (this._internalError = n.validationMessage), this.dispatchEvent(new CustomEvent("change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: this.value, originalEvent: i }
+      }));
+    }, this.handleKeyDown = (i) => {
+      this.dispatchEvent(new CustomEvent("keydown", {
+        bubbles: !0,
+        composed: !0,
+        detail: { key: i.key, originalEvent: i }
+      }));
+    }, this.handleKeyUp = (i) => {
+      this.dispatchEvent(new CustomEvent("keyup", {
+        bubbles: !0,
+        composed: !0,
+        detail: { key: i.key, originalEvent: i }
+      }));
+    }, this.handleClear = () => {
+      this.value = "", this._inputElement && (this._inputElement.value = ""), this.dispatchEvent(new CustomEvent("clear", { bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("input", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: "", originalEvent: null }
+      }));
+    };
+  }
+  get inputElement() {
+    return this._inputElement;
+  }
+  focus() {
+    this._inputElement?.focus();
+  }
+  blur() {
+    this._inputElement?.blur();
+  }
+  select() {
+    this._inputElement?.select();
+  }
+  setSelectionRange(i, n, l) {
+    this._inputElement?.setSelectionRange(i, n, l);
+  }
+  checkValidity() {
+    return this._inputElement?.checkValidity() ?? !0;
+  }
+  reportValidity() {
+    return this._inputElement?.reportValidity() ?? !0;
+  }
+  setCustomValidity(i) {
+    this._inputElement?.setCustomValidity(i), this._internalError = i, this.requestUpdate();
+  }
+  render() {
+    const i = this.error || this._internalError, n = this.showClear && this.value && !this.disabled && !this.readonly, l = `input__field input__field--${this.size}`;
+    return u`
+      <logosphere-formfield
+        .label=${this.label}
+        .helper=${this.helper}
+        .error=${i}
+        .required=${this.required}
+        .disabled=${this.disabled}
+        .readonly=${this.readonly}
+        .placeholder=${this.placeholder}
+        .size=${this.size}
+        .variant=${this.variant}
+      >
+        <input
+          class="${l}"
+          type=${this.type}
+          .value=${g(this.value)}
+          placeholder=${this.placeholder || o}
+          name=${this.name || o}
+          autocomplete=${this.autocomplete || o}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          minlength=${this.minlength ?? o}
+          maxlength=${this.maxlength ?? o}
+          pattern=${this.pattern || o}
+          min=${this.min ?? o}
+          max=${this.max ?? o}
+          step=${this.step ?? o}
+          @input=${this.handleInput}
+          @change=${this.handleChange}
+          @keydown=${this.handleKeyDown}
+          @keyup=${this.handleKeyUp}
+        />
+        ${n ? u`
+          <button
+            type="button"
+            slot="suffix"
+            class="input__clear-btn"
+            @click=${this.handleClear}
+            tabindex="-1"
+          >
+            <ui-icon name="uil-times" size="14"></ui-icon>
+          </button>
+        ` : o}
+      </logosphere-formfield>
+    `;
+  }
+};
+t.styles = [c`${y(_)}`];
+e([
+  m("input")
+], t.prototype, "_inputElement", 2);
+e([
+  r({ type: String })
+], t.prototype, "value", 2);
+e([
+  r({ type: String })
+], t.prototype, "type", 2);
+e([
+  r({ type: String })
+], t.prototype, "placeholder", 2);
+e([
+  r({ type: String })
+], t.prototype, "name", 2);
+e([
+  r({ type: String })
+], t.prototype, "autocomplete", 2);
+e([
+  r({ type: Number })
+], t.prototype, "minlength", 2);
+e([
+  r({ type: Number })
+], t.prototype, "maxlength", 2);
+e([
+  r({ type: String })
+], t.prototype, "pattern", 2);
+e([
+  r({ type: Number })
+], t.prototype, "min", 2);
+e([
+  r({ type: Number })
+], t.prototype, "max", 2);
+e([
+  r({ type: Number })
+], t.prototype, "step", 2);
+e([
+  r({ type: String })
+], t.prototype, "size", 2);
+e([
+  r({ type: String })
+], t.prototype, "variant", 2);
+e([
+  r({ type: Boolean })
+], t.prototype, "showClear", 2);
+e([
+  r({ type: String })
+], t.prototype, "label", 2);
+e([
+  r({ type: String })
+], t.prototype, "helper", 2);
+e([
+  r({ type: String })
+], t.prototype, "error", 2);
+e([
+  r({ type: Boolean })
+], t.prototype, "required", 2);
+e([
+  r({ type: Boolean })
+], t.prototype, "disabled", 2);
+e([
+  r({ type: Boolean })
+], t.prototype, "readonly", 2);
+e([
+  b()
+], t.prototype, "_internalError", 2);
+t = e([
+  v("logosphere-input")
+], t);
+export {
+  t as L
+};

package/dist/input-DsIOQPGV.cjs

@@ -0,0 +1,46 @@
+"use strict";const o=require("lit"),t=require("lit/decorators.js"),h=require("./live-BX-yBGvT.cjs"),u=".input__field{width:100%;background:transparent;border:none;outline:none;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);box-sizing:border-box;line-height:1.5}.input__field::placeholder{color:var(--color-tertiary)}.input__field:disabled{cursor:not-allowed}.input__field--default{height:16px}.input__field--large{height:24px}.input__clear-btn{border:none;background:transparent;color:var(--color-gray-400);cursor:pointer;padding:0;display:inline-flex;align-items:center;outline:none;flex-shrink:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.input__clear-btn:hover{color:var(--color-gray-600)}";var y=Object.defineProperty,d=Object.getOwnPropertyDescriptor,r=(s,e,n,i)=>{for(var p=i>1?void 0:i?d(e,n):e,l=s.length-1,a;l>=0;l--)(a=s[l])&&(p=(i?a(e,n,p):a(p))||p);return i&&p&&y(e,n,p),p};exports.LogosphereInput=class extends o.LitElement{constructor(){super(...arguments),this.value="",this.type="text",this.placeholder="",this.name="",this.autocomplete="",this.pattern="",this.size="default",this.variant="default",this.showClear=!1,this.label="",this.helper="",this.error="",this.required=!1,this.disabled=!1,this.readonly=!1,this._internalError="",this.handleInput=e=>{const n=e.target;this.value=n.value,this._internalError&&(this._internalError="",this._inputElement.setCustomValidity("")),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:this.value,originalEvent:e}}))},this.handleChange=e=>{const n=e.target;this.value=n.value,n.checkValidity()||(this._internalError=n.validationMessage),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value,originalEvent:e}}))},this.handleKeyDown=e=>{this.dispatchEvent(new CustomEvent("keydown",{bubbles:!0,composed:!0,detail:{key:e.key,originalEvent:e}}))},this.handleKeyUp=e=>{this.dispatchEvent(new CustomEvent("keyup",{bubbles:!0,composed:!0,detail:{key:e.key,originalEvent:e}}))},this.handleClear=()=>{this.value="",this._inputElement&&(this._inputElement.value=""),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:"",originalEvent:null}}))}}get inputElement(){return this._inputElement}focus(){this._inputElement?.focus()}blur(){this._inputElement?.blur()}select(){this._inputElement?.select()}setSelectionRange(e,n,i){this._inputElement?.setSelectionRange(e,n,i)}checkValidity(){return this._inputElement?.checkValidity()??!0}reportValidity(){return this._inputElement?.reportValidity()??!0}setCustomValidity(e){this._inputElement?.setCustomValidity(e),this._internalError=e,this.requestUpdate()}render(){const e=this.error||this._internalError,n=this.showClear&&this.value&&!this.disabled&&!this.readonly,i=`input__field input__field--${this.size}`;return o.html`
+      <logosphere-formfield
+        .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}
+      >
+        <input
+          class="${i}"
+          type=${this.type}
+          .value=${h.l(this.value)}
+          placeholder=${this.placeholder||o.nothing}
+          name=${this.name||o.nothing}
+          autocomplete=${this.autocomplete||o.nothing}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          minlength=${this.minlength??o.nothing}
+          maxlength=${this.maxlength??o.nothing}
+          pattern=${this.pattern||o.nothing}
+          min=${this.min??o.nothing}
+          max=${this.max??o.nothing}
+          step=${this.step??o.nothing}
+          @input=${this.handleInput}
+          @change=${this.handleChange}
+          @keydown=${this.handleKeyDown}
+          @keyup=${this.handleKeyUp}
+        />
+        ${n?o.html`
+          <button
+            type="button"
+            slot="suffix"
+            class="input__clear-btn"
+            @click=${this.handleClear}
+            tabindex="-1"
+          >
+            <ui-icon name="uil-times" size="14"></ui-icon>
+          </button>
+        `:o.nothing}
+      </logosphere-formfield>
+    `}};exports.LogosphereInput.styles=[o.css`${o.unsafeCSS(u)}`];r([t.query("input")],exports.LogosphereInput.prototype,"_inputElement",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"value",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"type",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"placeholder",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"name",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"autocomplete",2);r([t.property({type:Number})],exports.LogosphereInput.prototype,"minlength",2);r([t.property({type:Number})],exports.LogosphereInput.prototype,"maxlength",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"pattern",2);r([t.property({type:Number})],exports.LogosphereInput.prototype,"min",2);r([t.property({type:Number})],exports.LogosphereInput.prototype,"max",2);r([t.property({type:Number})],exports.LogosphereInput.prototype,"step",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"size",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"variant",2);r([t.property({type:Boolean})],exports.LogosphereInput.prototype,"showClear",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"label",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"helper",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"error",2);r([t.property({type:Boolean})],exports.LogosphereInput.prototype,"required",2);r([t.property({type:Boolean})],exports.LogosphereInput.prototype,"disabled",2);r([t.property({type:Boolean})],exports.LogosphereInput.prototype,"readonly",2);r([t.state()],exports.LogosphereInput.prototype,"_internalError",2);exports.LogosphereInput=r([t.customElement("logosphere-input")],exports.LogosphereInput);

package/dist/input.cjs

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

package/dist/input.js

@@ -0,0 +1,4 @@
+import { L as p } from "./input-ByllRq9M.js";
+export {
+  p as LogosphereInput
+};

package/dist/live-BX-yBGvT.cjs

@@ -0,0 +1 @@
+"use strict";const t=require("./directive-ekjitgzi.cjs");const s=e=>e.strings===void 0,o={},T=(e,r=o)=>e._$AH=r;const l=t.e(class extends t.i{constructor(e){if(super(e),e.type!==t.t.PROPERTY&&e.type!==t.t.ATTRIBUTE&&e.type!==t.t.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!s(e))throw Error("`live` bindings can only contain a single expression")}render(e){return e}update(e,[r]){if(r===t.E||r===t.A)return r;const n=e.element,i=e.name;if(e.type===t.t.PROPERTY){if(r===n[i])return t.E}else if(e.type===t.t.BOOLEAN_ATTRIBUTE){if(!!r===n.hasAttribute(i))return t.E}else if(e.type===t.t.ATTRIBUTE&&n.getAttribute(i)===r+"")return t.E;return T(e),r}});exports.l=l;

package/dist/live-WTVSYE2F.js

@@ -0,0 +1,24 @@
+import { e as s, i as T, t, E as n, A as l } from "./directive-Z_rhNYWK.js";
+const p = (e) => e.strings === void 0, u = {}, E = (e, r = u) => e._$AH = r;
+const A = s(class extends T {
+  constructor(e) {
+    if (super(e), e.type !== t.PROPERTY && e.type !== t.ATTRIBUTE && e.type !== t.BOOLEAN_ATTRIBUTE) throw Error("The `live` directive is not allowed on child or event bindings");
+    if (!p(e)) throw Error("`live` bindings can only contain a single expression");
+  }
+  render(e) {
+    return e;
+  }
+  update(e, [r]) {
+    if (r === n || r === l) return r;
+    const i = e.element, o = e.name;
+    if (e.type === t.PROPERTY) {
+      if (r === i[o]) return n;
+    } else if (e.type === t.BOOLEAN_ATTRIBUTE) {
+      if (!!r === i.hasAttribute(o)) return n;
+    } else if (e.type === t.ATTRIBUTE && i.getAttribute(o) === r + "") return n;
+    return E(e), r;
+  }
+});
+export {
+  A as l
+};

package/dist/modal-Bfc6WQSL.js

@@ -0,0 +1,110 @@
+import { LitElement as p, html as r, unsafeCSS as h, css as m } from "lit";
+import { property as n, customElement as f } from "lit/decorators.js";
+const u = ".modal__backdrop{position:fixed;inset:0;z-index:var(--z-index-modal-backdrop);display:flex;align-items:center;justify-content:center;background-color:#00000080;padding:var(--spacing-4);font-family:var(--font-family-base)}.modal__dialog{width:100%;max-width:720px;border-radius:var(--radius-lg);border:1px solid var(--color-border);overflow:hidden;box-shadow:var(--shadow-xl);background-color:var(--color-body-bg);display:grid;grid-template-rows:auto 1fr auto}.modal__header{padding:var(--spacing-4) var(--spacing-4) var(--spacing-2);border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:var(--spacing-2)}.modal__header-content{flex:1;min-width:0}.modal__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-body-text);margin:0}.modal__body{padding:var(--spacing-4)}.modal__footer{padding:var(--spacing-4);display:flex;flex-wrap:wrap;gap:var(--spacing-3);justify-content:flex-end;border-top:1px solid var(--color-border)}";
+var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, t = (e, s, i, l) => {
+  for (var a = l > 1 ? void 0 : l ? g(s, i) : s, d = e.length - 1, c; d >= 0; d--)
+    (c = e[d]) && (a = (l ? c(s, i, a) : c(a)) || a);
+  return l && a && v(s, i, a), a;
+};
+let o = class extends p {
+  constructor() {
+    super(...arguments), this.open = !1, this.title = "", this.closeOnEsc = !0, this.closeOnBackdrop = !0, this.showBack = !1, this.showClose = !1, this.hasFooterContent = !1, this.onKeyDown = (e) => {
+      this.open && this.closeOnEsc && e.key === "Escape" && this.setOpen(!1);
+    }, this.onBackdropClick = (e) => {
+      if (!this.closeOnBackdrop) return;
+      const s = this.shadowRoot?.querySelector(".__modal-content");
+      s && !s.contains(e.target) && this.setOpen(!1);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("keydown", this.onKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("keydown", this.onKeyDown);
+  }
+  openModal() {
+    this.setOpen(!0);
+  }
+  closeModal() {
+    this.setOpen(!1);
+  }
+  setOpen(e) {
+    this.open !== e && (this.open = e, this.dispatchEvent(new CustomEvent(e ? "modal-open" : "modal-close", { bubbles: !0 })));
+  }
+  checkFooterContent() {
+    const e = this.shadowRoot?.querySelector('slot[name="footer"]');
+    e && (this.hasFooterContent = e.assignedNodes().length > 0);
+  }
+  updated(e) {
+    super.updated(e), this.checkFooterContent();
+  }
+  render() {
+    return this.open ? r`
+      <div
+        class="modal__backdrop"
+        role="presentation"
+        aria-hidden="false"
+        @mousedown=${this.onBackdropClick}
+      >
+        <div
+          class="__modal-content modal__dialog"
+          role="dialog"
+          aria-modal="true"
+        >
+          ${this.showBack || this.showClose ? r`
+            <div class="modal__header">
+              ${this.showBack ? r`
+                <logosphere-button variant="text" size="sm" @click=${() => this.setOpen(!1)}>←</logosphere-button>
+              ` : ""}
+              <div class="modal__header-content">
+                ${this.title ? r`<h2 class="modal__title">${this.title}</h2>` : ""}
+                <slot name="header"></slot>
+              </div>
+              ${this.showClose ? r`
+                <logosphere-button variant="text" size="sm" @click=${() => this.setOpen(!1)}>×</logosphere-button>
+              ` : ""}
+            </div>
+          ` : ""}
+
+          <div class="modal__body">
+            <slot></slot>
+          </div>
+
+          ${this.hasFooterContent ? r`
+            <div class="modal__footer">
+              <slot name="footer"></slot>
+            </div>
+          ` : ""}
+        </div>
+      </div>
+    ` : r``;
+  }
+};
+o.styles = [m`${h(u)}`];
+t([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "open", 2);
+t([
+  n({ type: String })
+], o.prototype, "title", 2);
+t([
+  n({ type: Boolean })
+], o.prototype, "closeOnEsc", 2);
+t([
+  n({ type: Boolean })
+], o.prototype, "closeOnBackdrop", 2);
+t([
+  n({ type: Boolean })
+], o.prototype, "showBack", 2);
+t([
+  n({ type: Boolean })
+], o.prototype, "showClose", 2);
+t([
+  n({ type: Boolean, state: !0 })
+], o.prototype, "hasFooterContent", 2);
+o = t([
+  f("logosphere-modal")
+], o);
+export {
+  o as M
+};

package/dist/modal-DQ8VFL-P.cjs

@@ -0,0 +1,39 @@
+"use strict";const e=require("lit"),t=require("lit/decorators.js"),p=".modal__backdrop{position:fixed;inset:0;z-index:var(--z-index-modal-backdrop);display:flex;align-items:center;justify-content:center;background-color:#00000080;padding:var(--spacing-4);font-family:var(--font-family-base)}.modal__dialog{width:100%;max-width:720px;border-radius:var(--radius-lg);border:1px solid var(--color-border);overflow:hidden;box-shadow:var(--shadow-xl);background-color:var(--color-body-bg);display:grid;grid-template-rows:auto 1fr auto}.modal__header{padding:var(--spacing-4) var(--spacing-4) var(--spacing-2);border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:var(--spacing-2)}.modal__header-content{flex:1;min-width:0}.modal__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-body-text);margin:0}.modal__body{padding:var(--spacing-4)}.modal__footer{padding:var(--spacing-4);display:flex;flex-wrap:wrap;gap:var(--spacing-3);justify-content:flex-end;border-top:1px solid var(--color-border)}";var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,s=(n,o,r,l)=>{for(var a=l>1?void 0:l?h(o,r):o,i=n.length-1,d;i>=0;i--)(d=n[i])&&(a=(l?d(o,r,a):d(a))||a);return l&&a&&c(o,r,a),a};exports.Modal=class extends e.LitElement{constructor(){super(...arguments),this.open=!1,this.title="",this.closeOnEsc=!0,this.closeOnBackdrop=!0,this.showBack=!1,this.showClose=!1,this.hasFooterContent=!1,this.onKeyDown=o=>{this.open&&this.closeOnEsc&&o.key==="Escape"&&this.setOpen(!1)},this.onBackdropClick=o=>{if(!this.closeOnBackdrop)return;const r=this.shadowRoot?.querySelector(".__modal-content");r&&!r.contains(o.target)&&this.setOpen(!1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.onKeyDown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.onKeyDown)}openModal(){this.setOpen(!0)}closeModal(){this.setOpen(!1)}setOpen(o){this.open!==o&&(this.open=o,this.dispatchEvent(new CustomEvent(o?"modal-open":"modal-close",{bubbles:!0})))}checkFooterContent(){const o=this.shadowRoot?.querySelector('slot[name="footer"]');o&&(this.hasFooterContent=o.assignedNodes().length>0)}updated(o){super.updated(o),this.checkFooterContent()}render(){return this.open?e.html`
+      <div
+        class="modal__backdrop"
+        role="presentation"
+        aria-hidden="false"
+        @mousedown=${this.onBackdropClick}
+      >
+        <div
+          class="__modal-content modal__dialog"
+          role="dialog"
+          aria-modal="true"
+        >
+          ${this.showBack||this.showClose?e.html`
+            <div class="modal__header">
+              ${this.showBack?e.html`
+                <logosphere-button variant="text" size="sm" @click=${()=>this.setOpen(!1)}>←</logosphere-button>
+              `:""}
+              <div class="modal__header-content">
+                ${this.title?e.html`<h2 class="modal__title">${this.title}</h2>`:""}
+                <slot name="header"></slot>
+              </div>
+              ${this.showClose?e.html`
+                <logosphere-button variant="text" size="sm" @click=${()=>this.setOpen(!1)}>×</logosphere-button>
+              `:""}
+            </div>
+          `:""}
+
+          <div class="modal__body">
+            <slot></slot>
+          </div>
+
+          ${this.hasFooterContent?e.html`
+            <div class="modal__footer">
+              <slot name="footer"></slot>
+            </div>
+          `:""}
+        </div>
+      </div>
+    `:e.html``}};exports.Modal.styles=[e.css`${e.unsafeCSS(p)}`];s([t.property({type:Boolean,reflect:!0})],exports.Modal.prototype,"open",2);s([t.property({type:String})],exports.Modal.prototype,"title",2);s([t.property({type:Boolean})],exports.Modal.prototype,"closeOnEsc",2);s([t.property({type:Boolean})],exports.Modal.prototype,"closeOnBackdrop",2);s([t.property({type:Boolean})],exports.Modal.prototype,"showBack",2);s([t.property({type:Boolean})],exports.Modal.prototype,"showClose",2);s([t.property({type:Boolean,state:!0})],exports.Modal.prototype,"hasFooterContent",2);exports.Modal=s([t.customElement("logosphere-modal")],exports.Modal);

package/dist/modal.cjs

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

package/dist/modal.js

@@ -0,0 +1,4 @@
+import { M as r } from "./modal-Bfc6WQSL.js";
+export {
+  r as Modal
+};

package/dist/molecules/Breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from "lit";
+export declare class Breadcrumb extends LitElement {
+    static styles: import("lit").CSSResult[];
+    items: {
+        label: string;
+        href?: string;
+        active?: boolean;
+    }[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/molecules/Breadcrumb/index.d.ts

@@ -0,0 +1 @@
+export * from "./breadcrumb";

package/dist/molecules/Card/card.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from "lit";
+import "../../atoms/Button/button";
+export declare class Card extends LitElement {
+    static styles: import("lit").CSSResult[];
+    title: string;
+    description: string;
+    header: boolean;
+    footer: boolean;
+    onOk?: () => void;
+    onCancel?: () => void;
+    okLabel: string;
+    cancelLabel: string;
+    private handleOk;
+    private handleCancel;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/molecules/Card/index.d.ts

@@ -0,0 +1 @@
+export * from "./card";

package/dist/molecules/Input/index.d.ts

@@ -0,0 +1,2 @@
+export { LogosphereInput } from "./input.js";
+export type { InputType, InputSize, InputVariant } from "./input.js";

package/dist/molecules/Input/input.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from "lit";
+import "../../atoms/FormField/formfield.js";
+import "../../shared/icons/ui-icon.js";
+export type InputType = "text" | "password" | "email" | "number" | "tel" | "url" | "search" | "date" | "time" | "datetime-local" | "month" | "week";
+export type InputSize = "default" | "large";
+export type InputVariant = "default" | "subtle";
+export declare class LogosphereInput extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private _inputElement;
+    value: string;
+    type: InputType;
+    placeholder: string;
+    name: string;
+    autocomplete: string;
+    minlength?: number;
+    maxlength?: number;
+    pattern: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    size: InputSize;
+    variant: InputVariant;
+    showClear: boolean;
+    label: string;
+    helper: string;
+    error: string;
+    required: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    private _internalError;
+    get inputElement(): HTMLInputElement;
+    focus(): void;
+    blur(): void;
+    select(): void;
+    setSelectionRange(start: number, end: number, direction?: "forward" | "backward" | "none"): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+    private handleInput;
+    private handleChange;
+    private handleKeyDown;
+    private handleKeyUp;
+    private handleClear;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "logosphere-input": LogosphereInput;
+    }
+}

package/dist/molecules/Popover/index.d.ts

@@ -0,0 +1 @@
+export * from "./popover";

package/dist/molecules/Popover/popover.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from "lit";
+import { type Placement } from "@popperjs/core";
+export type PopoverTrigger = "click" | "hover" | "both";
+export declare class Popover extends LitElement {
+    static styles: import("lit").CSSResult[];
+    title: string;
+    trigger: PopoverTrigger;
+    placement: Placement;
+    offset: number;
+    open: boolean;
+    closeOnOutsideClick: boolean;
+    private triggerElement;
+    private popperElement?;
+    private popperArrowElement?;
+    private popperInstance?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProps: Map<string | number | symbol, unknown>): void;
+    private handleDocumentClick;
+    private setOpen;
+    private toggle;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private updatePopper;
+    private getPopperModifiers;
+    private destroyPopper;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "logosphere-popover": Popover;
+    }
+}

package/dist/molecules/Textarea/index.d.ts

@@ -0,0 +1 @@
+export * from "./text-area";

package/dist/molecules/Textarea/text-area.d.ts

@@ -0,0 +1,49 @@
+import { LitElement } from "lit";
+import type { PropertyValues } from "lit";
+import "../../atoms/FormField/formfield.js";
+import "../../shared/icons/ui-icon.js";
+export type TextareaSize = "default" | "large";
+export type TextareaVariant = "default" | "subtle";
+export type TextareaResize = "none" | "vertical" | "horizontal" | "both";
+export declare class TextArea extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private _textareaElement;
+    value: string;
+    placeholder: string;
+    name: string;
+    autocomplete: string;
+    minlength?: number;
+    maxlength?: number;
+    rows: number;
+    cols?: number;
+    wrap: "soft" | "hard";
+    resize: TextareaResize;
+    autoResize: boolean;
+    size: TextareaSize;
+    variant: TextareaVariant;
+    showClear: boolean;
+    label: string;
+    helper: string;
+    error: string;
+    required: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    private _internalError;
+    get textareaElement(): HTMLTextAreaElement;
+    focus(): void;
+    blur(): void;
+    select(): void;
+    setSelectionRange(start: number, end: number, direction?: "forward" | "backward" | "none"): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+    private adjustHeight;
+    private handleInput;
+    private handleChange;
+    private handleKeyDown;
+    private handleKeyUp;
+    private handleClear;
+    updated(changedProperties: PropertyValues): void;
+    private getResizeClass;
+    render(): import("lit-html").TemplateResult<1>;
+}