@logosphere-ui/core 0.0.0-alpha.5 → 0.0.0-alpha.50

package/dist/tab-BKdN4xAz.js

@@ -1,176 +0,0 @@
-import { LitElement as p, nothing as c, html as r, unsafeCSS as f, css as v } from "lit";
-import { property as b, state as h, query as _, customElement as u } from "lit/decorators.js";
-const y = ".tab{width:100%;font-family:var(--font-family-base)}.tab__list{display:flex;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid var(--color-border);scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.tab__list::-webkit-scrollbar{display:none}.tab__button{display:inline-flex;flex-direction:row;align-items:center;gap:var(--spacing-2);padding:var(--spacing-3) var(--spacing-4);min-width:120px;position:relative;cursor:pointer;border:none;border-bottom:2px solid transparent;background:transparent;font-family:var(--font-family-base);white-space:nowrap;transition:background-color var(--transition-speed-base) var(--transition-timing),border-color var(--transition-speed-base) var(--transition-timing)}.tab__button:hover:not(.tab__button--disabled):not(.tab__button--active){background-color:var(--color-tertiary-bg)}.tab__button--active{border-bottom-color:var(--color-primary)}.tab__button--disabled{cursor:not-allowed;opacity:.4;pointer-events:none}.tab__icon{font-size:var(--font-size-xl);flex-shrink:0;color:inherit;line-height:1}.tab__content{display:flex;flex-direction:column;align-items:flex-start}.tab__label{font-weight:var(--font-weight-medium);font-size:var(--font-size-sm);color:var(--color-body-text)}.tab__label--inactive{color:var(--color-tertiary)}.tab__description{font-size:var(--font-size-xs);text-align:left;color:var(--color-tertiary)}.tab__description--active{color:var(--color-secondary)}.tab__panel{padding:var(--spacing-4);outline:none}.tab__panel--hidden{display:none}";
-var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (e, i, t, a) => {
-  for (var s = a > 1 ? void 0 : a ? w(i, t) : i, l = e.length - 1, d; l >= 0; l--)
-    (d = e[l]) && (s = (a ? d(i, t, s) : d(s)) || s);
-  return a && s && g(i, t, s), s;
-};
-let o = class extends p {
-  constructor() {
-    super(...arguments), this.tabs = [], this.activeTab = "", this.lazy = !0, this.variant = "default", this._focusedIndex = 0, this._renderedTabs = /* @__PURE__ */ new Set();
-  }
-  connectedCallback() {
-    super.connectedCallback(), !this.activeTab && this.tabs.length > 0 && (this.activeTab = this.tabs[0].id);
-  }
-  willUpdate(e) {
-    if (super.willUpdate(e), e.has("activeTab") && this.activeTab) {
-      this._renderedTabs.add(this.activeTab);
-      const i = this.tabs.findIndex((t) => t.id === this.activeTab);
-      i !== -1 && (this._focusedIndex = i);
-    }
-    e.has("tabs") && this.tabs.length > 0 && (this.tabs.some((t) => t.id === this.activeTab) || (this.activeTab = this.tabs[0].id), this._focusedIndex = this.tabs.findIndex((t) => t.id === this.activeTab));
-  }
-  // ==================== EVENTS ====================
-  handleTabClick(e, i) {
-    if (i) return;
-    const t = this.activeTab;
-    this.activeTab = e, this._focusedIndex = this.tabs.findIndex((a) => a.id === e), this.dispatchEvent(
-      new CustomEvent("tab-change", {
-        detail: { oldTab: t, newTab: e },
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleKeyDown(e) {
-    const { tabs: i } = this;
-    if (i.filter((s) => !s.disabled).length === 0) return;
-    let t = this._focusedIndex;
-    const a = this._focusedIndex;
-    switch (e.key) {
-      case "ArrowLeft":
-        e.preventDefault();
-        do
-          t = t > 0 ? t - 1 : i.length - 1;
-        while (i[t]?.disabled && t !== a);
-        break;
-      case "ArrowRight":
-        e.preventDefault();
-        do
-          t = t < i.length - 1 ? t + 1 : 0;
-        while (i[t]?.disabled && t !== a);
-        break;
-      case "Home":
-        for (e.preventDefault(), t = 0; i[t]?.disabled && t < i.length - 1; ) t++;
-        break;
-      case "End":
-        for (e.preventDefault(), t = i.length - 1; i[t]?.disabled && t > 0; ) t--;
-        break;
-      default:
-        return;
-    }
-    if (t !== this._focusedIndex && !i[t]?.disabled) {
-      const s = this.activeTab;
-      this._focusedIndex = t, this.activeTab = i[t].id, this.updateComplete.then(() => {
-        this.shadowRoot?.querySelector(
-          `[role="tab"][data-tab-id="${i[t].id}"]`
-        )?.focus();
-      }), this.dispatchEvent(
-        new CustomEvent("tab-change", {
-          detail: { oldTab: s, newTab: i[t].id },
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    }
-  }
-  scrollTabIntoView(e) {
-    this.updateComplete.then(() => {
-      const i = this.shadowRoot?.querySelector(
-        `[role="tab"][data-tab-id="${e}"]`
-      );
-      if (i && this.tablist) {
-        const t = this.tablist.getBoundingClientRect(), a = i.getBoundingClientRect();
-        a.left < t.left ? this.tablist.scrollLeft -= t.left - a.left + 16 : a.right > t.right && (this.tablist.scrollLeft += a.right - t.right + 16);
-      }
-    });
-  }
-  // ==================== RENDER ====================
-  renderTabButton(e, i) {
-    const t = this.activeTab === e.id, a = this._focusedIndex === i, s = [
-      "tab__button",
-      t ? "tab__button--active" : "",
-      e.disabled ? "tab__button--disabled" : ""
-    ].filter(Boolean).join(" "), l = ["tab__label", t ? "" : "tab__label--inactive"].filter(Boolean).join(" "), d = ["tab__description", t ? "tab__description--active" : ""].filter(Boolean).join(" ");
-    return r`
-      <button
-        role="tab"
-        class=${s}
-        data-tab-id=${e.id}
-        aria-selected=${t ? "true" : "false"}
-        aria-controls="panel-${e.id}"
-        tabindex=${t || a ? "0" : "-1"}
-        ?disabled=${e.disabled}
-        @click=${() => this.handleTabClick(e.id, e.disabled)}
-        @focus=${() => this.scrollTabIntoView(e.id)}
-      >
-        ${e.icon ? r`<i class="${e.icon} tab__icon"></i>` : c}
-        <div class="tab__content">
-          <span class=${l}>${e.label}</span>
-          ${e.description ? r`<span class=${d}>${e.description}</span>` : c}
-        </div>
-      </button>
-    `;
-  }
-  renderTabPanel(e) {
-    const i = this.activeTab === e.id;
-    if (!(!this.lazy || this._renderedTabs.has(e.id))) return c;
-    const a = ["tab__panel", i ? "" : "tab__panel--hidden"].filter(Boolean).join(" ");
-    return r`
-      <div
-        role="tabpanel"
-        id="panel-${e.id}"
-        aria-labelledby="tab-${e.id}"
-        class=${a}
-        tabindex="0"
-      >
-        <slot name=${`panel-${e.id}`}>
-          ${typeof e.content == "string" ? r`${e.content}` : c}
-        </slot>
-      </div>
-    `;
-  }
-  render() {
-    return r`
-      <div class="tab">
-        <div role="tablist" aria-label="Tabs" class="tab__list" @keydown=${this.handleKeyDown}>
-          ${this.tabs.map((e, i) => this.renderTabButton(e, i))}
-        </div>
-        <div class="tab__panels">${this.tabs.map((e) => this.renderTabPanel(e))}</div>
-      </div>
-    `;
-  }
-};
-o.styles = [
-  v`
-      ${f(y)}
-    `
-];
-n([
-  b({ type: Array })
-], o.prototype, "tabs", 2);
-n([
-  b({ type: String })
-], o.prototype, "activeTab", 2);
-n([
-  b({ type: Boolean })
-], o.prototype, "lazy", 2);
-n([
-  b({ type: String })
-], o.prototype, "variant", 2);
-n([
-  h()
-], o.prototype, "_focusedIndex", 2);
-n([
-  h()
-], o.prototype, "_renderedTabs", 2);
-n([
-  _('[role="tablist"]')
-], o.prototype, "tablist", 2);
-o = n([
-  u("logosphere-tab")
-], o);
-export {
-  o as L
-};

package/dist/tab-DcjAlXzU.cjs

@@ -1,40 +0,0 @@
-"use strict";const s=require("lit"),n=require("lit/decorators.js"),c=".tab{width:100%;font-family:var(--font-family-base)}.tab__list{display:flex;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid var(--color-border);scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.tab__list::-webkit-scrollbar{display:none}.tab__button{display:inline-flex;flex-direction:row;align-items:center;gap:var(--spacing-2);padding:var(--spacing-3) var(--spacing-4);min-width:120px;position:relative;cursor:pointer;border:none;border-bottom:2px solid transparent;background:transparent;font-family:var(--font-family-base);white-space:nowrap;transition:background-color var(--transition-speed-base) var(--transition-timing),border-color var(--transition-speed-base) var(--transition-timing)}.tab__button:hover:not(.tab__button--disabled):not(.tab__button--active){background-color:var(--color-tertiary-bg)}.tab__button--active{border-bottom-color:var(--color-primary)}.tab__button--disabled{cursor:not-allowed;opacity:.4;pointer-events:none}.tab__icon{font-size:var(--font-size-xl);flex-shrink:0;color:inherit;line-height:1}.tab__content{display:flex;flex-direction:column;align-items:flex-start}.tab__label{font-weight:var(--font-weight-medium);font-size:var(--font-size-sm);color:var(--color-body-text)}.tab__label--inactive{color:var(--color-tertiary)}.tab__description{font-size:var(--font-size-xs);text-align:left;color:var(--color-tertiary)}.tab__description--active{color:var(--color-secondary)}.tab__panel{padding:var(--spacing-4);outline:none}.tab__panel--hidden{display:none}";var h=Object.defineProperty,p=Object.getOwnPropertyDescriptor,r=(d,e,a,t)=>{for(var i=t>1?void 0:t?p(e,a):e,o=d.length-1,l;o>=0;o--)(l=d[o])&&(i=(t?l(e,a,i):l(i))||i);return t&&i&&h(e,a,i),i};exports.LogosphereTab=class extends s.LitElement{constructor(){super(...arguments),this.tabs=[],this.activeTab="",this.lazy=!0,this.variant="default",this._focusedIndex=0,this._renderedTabs=new Set}connectedCallback(){super.connectedCallback(),!this.activeTab&&this.tabs.length>0&&(this.activeTab=this.tabs[0].id)}willUpdate(e){if(super.willUpdate(e),e.has("activeTab")&&this.activeTab){this._renderedTabs.add(this.activeTab);const a=this.tabs.findIndex(t=>t.id===this.activeTab);a!==-1&&(this._focusedIndex=a)}e.has("tabs")&&this.tabs.length>0&&(this.tabs.some(t=>t.id===this.activeTab)||(this.activeTab=this.tabs[0].id),this._focusedIndex=this.tabs.findIndex(t=>t.id===this.activeTab))}handleTabClick(e,a){if(a)return;const t=this.activeTab;this.activeTab=e,this._focusedIndex=this.tabs.findIndex(i=>i.id===e),this.dispatchEvent(new CustomEvent("tab-change",{detail:{oldTab:t,newTab:e},bubbles:!0,composed:!0}))}handleKeyDown(e){const{tabs:a}=this;if(a.filter(o=>!o.disabled).length===0)return;let t=this._focusedIndex;const i=this._focusedIndex;switch(e.key){case"ArrowLeft":e.preventDefault();do t=t>0?t-1:a.length-1;while(a[t]?.disabled&&t!==i);break;case"ArrowRight":e.preventDefault();do t=t<a.length-1?t+1:0;while(a[t]?.disabled&&t!==i);break;case"Home":for(e.preventDefault(),t=0;a[t]?.disabled&&t<a.length-1;)t++;break;case"End":for(e.preventDefault(),t=a.length-1;a[t]?.disabled&&t>0;)t--;break;default:return}if(t!==this._focusedIndex&&!a[t]?.disabled){const o=this.activeTab;this._focusedIndex=t,this.activeTab=a[t].id,this.updateComplete.then(()=>{this.shadowRoot?.querySelector(`[role="tab"][data-tab-id="${a[t].id}"]`)?.focus()}),this.dispatchEvent(new CustomEvent("tab-change",{detail:{oldTab:o,newTab:a[t].id},bubbles:!0,composed:!0}))}}scrollTabIntoView(e){this.updateComplete.then(()=>{const a=this.shadowRoot?.querySelector(`[role="tab"][data-tab-id="${e}"]`);if(a&&this.tablist){const t=this.tablist.getBoundingClientRect(),i=a.getBoundingClientRect();i.left<t.left?this.tablist.scrollLeft-=t.left-i.left+16:i.right>t.right&&(this.tablist.scrollLeft+=i.right-t.right+16)}})}renderTabButton(e,a){const t=this.activeTab===e.id,i=this._focusedIndex===a,o=["tab__button",t?"tab__button--active":"",e.disabled?"tab__button--disabled":""].filter(Boolean).join(" "),l=["tab__label",t?"":"tab__label--inactive"].filter(Boolean).join(" "),b=["tab__description",t?"tab__description--active":""].filter(Boolean).join(" ");return s.html`
-      <button
-        role="tab"
-        class=${o}
-        data-tab-id=${e.id}
-        aria-selected=${t?"true":"false"}
-        aria-controls="panel-${e.id}"
-        tabindex=${t||i?"0":"-1"}
-        ?disabled=${e.disabled}
-        @click=${()=>this.handleTabClick(e.id,e.disabled)}
-        @focus=${()=>this.scrollTabIntoView(e.id)}
-      >
-        ${e.icon?s.html`<i class="${e.icon} tab__icon"></i>`:s.nothing}
-        <div class="tab__content">
-          <span class=${l}>${e.label}</span>
-          ${e.description?s.html`<span class=${b}>${e.description}</span>`:s.nothing}
-        </div>
-      </button>
-    `}renderTabPanel(e){const a=this.activeTab===e.id;if(!(!this.lazy||this._renderedTabs.has(e.id)))return s.nothing;const i=["tab__panel",a?"":"tab__panel--hidden"].filter(Boolean).join(" ");return s.html`
-      <div
-        role="tabpanel"
-        id="panel-${e.id}"
-        aria-labelledby="tab-${e.id}"
-        class=${i}
-        tabindex="0"
-      >
-        <slot name=${`panel-${e.id}`}>
-          ${typeof e.content=="string"?s.html`${e.content}`:s.nothing}
-        </slot>
-      </div>
-    `}render(){return s.html`
-      <div class="tab">
-        <div role="tablist" aria-label="Tabs" class="tab__list" @keydown=${this.handleKeyDown}>
-          ${this.tabs.map((e,a)=>this.renderTabButton(e,a))}
-        </div>
-        <div class="tab__panels">${this.tabs.map(e=>this.renderTabPanel(e))}</div>
-      </div>
-    `}};exports.LogosphereTab.styles=[s.css`
-      ${s.unsafeCSS(c)}
-    `];r([n.property({type:Array})],exports.LogosphereTab.prototype,"tabs",2);r([n.property({type:String})],exports.LogosphereTab.prototype,"activeTab",2);r([n.property({type:Boolean})],exports.LogosphereTab.prototype,"lazy",2);r([n.property({type:String})],exports.LogosphereTab.prototype,"variant",2);r([n.state()],exports.LogosphereTab.prototype,"_focusedIndex",2);r([n.state()],exports.LogosphereTab.prototype,"_renderedTabs",2);r([n.query('[role="tablist"]')],exports.LogosphereTab.prototype,"tablist",2);exports.LogosphereTab=r([n.customElement("logosphere-tab")],exports.LogosphereTab);

package/dist/text-area-BkHdLnZj.cjs

@@ -1,44 +0,0 @@
-"use strict";const i=require("lit"),t=require("lit/decorators.js"),p=require("lit/directives/live.js"),u=".textarea__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}.textarea__field::placeholder{color:var(--color-tertiary)}.textarea__field:disabled{cursor:not-allowed}.textarea__field--resize-none{resize:none}.textarea__field--resize-vertical{resize:vertical}.textarea__field--resize-horizontal{resize:horizontal}.textarea__field--resize-both{resize:both}.textarea__field--auto-resize{resize:none;overflow:hidden}.textarea__clear-btn{border:none;background:transparent;color:var(--color-gray-400);cursor:pointer;padding:0;display:inline-flex;align-items:flex-start;align-self:flex-start;margin-top:var(--spacing-1);outline:none;flex-shrink:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.textarea__clear-btn:hover{color:var(--color-gray-600)}";var d=Object.defineProperty,y=Object.getOwnPropertyDescriptor,r=(l,e,a,o)=>{for(var s=o>1?void 0:o?y(e,a):e,n=l.length-1,h;n>=0;n--)(h=l[n])&&(s=(o?h(e,a,s):h(s))||s);return o&&s&&d(e,a,s),s};exports.TextArea=class extends i.LitElement{constructor(){super(...arguments),this.value="",this.placeholder="",this.name="",this.autocomplete="",this.rows=3,this.wrap="soft",this.resize="vertical",this.autoResize=!1,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 a=e.target;this.value=a.value,this.autoResize&&this.adjustHeight(),this._internalError&&(this._internalError="",this._textareaElement.setCustomValidity("")),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:this.value,originalEvent:e}}))},this.handleChange=e=>{const a=e.target;this.value=a.value,a.checkValidity()||(this._internalError=a.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._textareaElement&&(this._textareaElement.value="",this.autoResize&&this.adjustHeight()),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:"",originalEvent:null}}))}}get textareaElement(){return this._textareaElement}focus(){this._textareaElement?.focus()}blur(){this._textareaElement?.blur()}select(){this._textareaElement?.select()}setSelectionRange(e,a,o){this._textareaElement?.setSelectionRange(e,a,o)}checkValidity(){return this._textareaElement?.checkValidity()??!0}reportValidity(){return this._textareaElement?.reportValidity()??!0}setCustomValidity(e){this._textareaElement?.setCustomValidity(e),this._internalError=e,this.requestUpdate()}adjustHeight(){!this.autoResize||!this._textareaElement||(this._textareaElement.style.height="auto",this._textareaElement.style.height=`${this._textareaElement.scrollHeight}px`)}updated(e){super.updated(e),e.has("value")&&this.autoResize&&this.adjustHeight()}getResizeClass(){return this.autoResize?"textarea__field--auto-resize":{none:"textarea__field--resize-none",vertical:"textarea__field--resize-vertical",horizontal:"textarea__field--resize-horizontal",both:"textarea__field--resize-both"}[this.resize]}render(){const e=this.error||this._internalError,a=this.showClear&&this.value&&!this.disabled&&!this.readonly,o=`textarea__field ${this.getResizeClass()}`;return i.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}
-      >
-        <textarea
-          class="${o}"
-          .value=${p.live(this.value)}
-          placeholder=${this.placeholder||i.nothing}
-          name=${this.name||i.nothing}
-          autocomplete=${this.autocomplete||i.nothing}
-          ?required=${this.required}
-          ?disabled=${this.disabled}
-          ?readonly=${this.readonly}
-          minlength=${this.minlength??i.nothing}
-          maxlength=${this.maxlength??i.nothing}
-          rows=${this.rows}
-          cols=${this.cols??i.nothing}
-          wrap=${this.wrap}
-          @input=${this.handleInput}
-          @change=${this.handleChange}
-          @keydown=${this.handleKeyDown}
-          @keyup=${this.handleKeyUp}
-        ></textarea>
-        ${a?i.html`
-          <button
-            type="button"
-            slot="suffix"
-            class="textarea__clear-btn"
-            @click=${this.handleClear}
-            tabindex="-1"
-          >
-            <ui-icon name="uil-times" size="14"></ui-icon>
-          </button>
-        `:i.nothing}
-      </logosphere-formfield>
-    `}};exports.TextArea.styles=[i.css`${i.unsafeCSS(u)}`];r([t.query("textarea")],exports.TextArea.prototype,"_textareaElement",2);r([t.property({type:String})],exports.TextArea.prototype,"value",2);r([t.property({type:String})],exports.TextArea.prototype,"placeholder",2);r([t.property({type:String})],exports.TextArea.prototype,"name",2);r([t.property({type:String})],exports.TextArea.prototype,"autocomplete",2);r([t.property({type:Number})],exports.TextArea.prototype,"minlength",2);r([t.property({type:Number})],exports.TextArea.prototype,"maxlength",2);r([t.property({type:Number})],exports.TextArea.prototype,"rows",2);r([t.property({type:Number})],exports.TextArea.prototype,"cols",2);r([t.property({type:String})],exports.TextArea.prototype,"wrap",2);r([t.property({type:String})],exports.TextArea.prototype,"resize",2);r([t.property({type:Boolean})],exports.TextArea.prototype,"autoResize",2);r([t.property({type:String})],exports.TextArea.prototype,"size",2);r([t.property({type:String})],exports.TextArea.prototype,"variant",2);r([t.property({type:Boolean})],exports.TextArea.prototype,"showClear",2);r([t.property({type:String})],exports.TextArea.prototype,"label",2);r([t.property({type:String})],exports.TextArea.prototype,"helper",2);r([t.property({type:String})],exports.TextArea.prototype,"error",2);r([t.property({type:Boolean})],exports.TextArea.prototype,"required",2);r([t.property({type:Boolean})],exports.TextArea.prototype,"disabled",2);r([t.property({type:Boolean})],exports.TextArea.prototype,"readonly",2);r([t.state()],exports.TextArea.prototype,"_internalError",2);exports.TextArea=r([t.customElement("logosphere-textarea")],exports.TextArea);

package/dist/text-area-CC24lj8v.js

@@ -1,204 +0,0 @@
-import { LitElement as d, nothing as l, html as u, unsafeCSS as y, css as c } from "lit";
-import { query as m, property as a, state as _, customElement as v } from "lit/decorators.js";
-import { live as f } from "lit/directives/live.js";
-const b = ".textarea__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}.textarea__field::placeholder{color:var(--color-tertiary)}.textarea__field:disabled{cursor:not-allowed}.textarea__field--resize-none{resize:none}.textarea__field--resize-vertical{resize:vertical}.textarea__field--resize-horizontal{resize:horizontal}.textarea__field--resize-both{resize:both}.textarea__field--auto-resize{resize:none;overflow:hidden}.textarea__clear-btn{border:none;background:transparent;color:var(--color-gray-400);cursor:pointer;padding:0;display:inline-flex;align-items:flex-start;align-self:flex-start;margin-top:var(--spacing-1);outline:none;flex-shrink:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.textarea__clear-btn:hover{color:var(--color-gray-600)}";
-var x = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (e, i, s, n) => {
-  for (var o = n > 1 ? void 0 : n ? g(i, s) : i, h = e.length - 1, p; h >= 0; h--)
-    (p = e[h]) && (o = (n ? p(i, s, o) : p(o)) || o);
-  return n && o && x(i, s, o), o;
-};
-let t = class extends d {
-  constructor() {
-    super(...arguments), this.value = "", this.placeholder = "", this.name = "", this.autocomplete = "", this.rows = 3, this.wrap = "soft", this.resize = "vertical", this.autoResize = !1, 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 i = e.target;
-      this.value = i.value, this.autoResize && this.adjustHeight(), this._internalError && (this._internalError = "", this._textareaElement.setCustomValidity("")), this.dispatchEvent(new CustomEvent("input", {
-        bubbles: !0,
-        composed: !0,
-        detail: { value: this.value, originalEvent: e }
-      }));
-    }, this.handleChange = (e) => {
-      const i = e.target;
-      this.value = i.value, i.checkValidity() || (this._internalError = i.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._textareaElement && (this._textareaElement.value = "", this.autoResize && this.adjustHeight()), this.dispatchEvent(new CustomEvent("clear", { bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("input", {
-        bubbles: !0,
-        composed: !0,
-        detail: { value: "", originalEvent: null }
-      }));
-    };
-  }
-  get textareaElement() {
-    return this._textareaElement;
-  }
-  focus() {
-    this._textareaElement?.focus();
-  }
-  blur() {
-    this._textareaElement?.blur();
-  }
-  select() {
-    this._textareaElement?.select();
-  }
-  setSelectionRange(e, i, s) {
-    this._textareaElement?.setSelectionRange(e, i, s);
-  }
-  checkValidity() {
-    return this._textareaElement?.checkValidity() ?? !0;
-  }
-  reportValidity() {
-    return this._textareaElement?.reportValidity() ?? !0;
-  }
-  setCustomValidity(e) {
-    this._textareaElement?.setCustomValidity(e), this._internalError = e, this.requestUpdate();
-  }
-  adjustHeight() {
-    !this.autoResize || !this._textareaElement || (this._textareaElement.style.height = "auto", this._textareaElement.style.height = `${this._textareaElement.scrollHeight}px`);
-  }
-  updated(e) {
-    super.updated(e), e.has("value") && this.autoResize && this.adjustHeight();
-  }
-  getResizeClass() {
-    return this.autoResize ? "textarea__field--auto-resize" : {
-      none: "textarea__field--resize-none",
-      vertical: "textarea__field--resize-vertical",
-      horizontal: "textarea__field--resize-horizontal",
-      both: "textarea__field--resize-both"
-    }[this.resize];
-  }
-  render() {
-    const e = this.error || this._internalError, i = this.showClear && this.value && !this.disabled && !this.readonly, s = `textarea__field ${this.getResizeClass()}`;
-    return u`
-      <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}
-      >
-        <textarea
-          class="${s}"
-          .value=${f(this.value)}
-          placeholder=${this.placeholder || l}
-          name=${this.name || l}
-          autocomplete=${this.autocomplete || l}
-          ?required=${this.required}
-          ?disabled=${this.disabled}
-          ?readonly=${this.readonly}
-          minlength=${this.minlength ?? l}
-          maxlength=${this.maxlength ?? l}
-          rows=${this.rows}
-          cols=${this.cols ?? l}
-          wrap=${this.wrap}
-          @input=${this.handleInput}
-          @change=${this.handleChange}
-          @keydown=${this.handleKeyDown}
-          @keyup=${this.handleKeyUp}
-        ></textarea>
-        ${i ? u`
-          <button
-            type="button"
-            slot="suffix"
-            class="textarea__clear-btn"
-            @click=${this.handleClear}
-            tabindex="-1"
-          >
-            <ui-icon name="uil-times" size="14"></ui-icon>
-          </button>
-        ` : l}
-      </logosphere-formfield>
-    `;
-  }
-};
-t.styles = [c`${y(b)}`];
-r([
-  m("textarea")
-], t.prototype, "_textareaElement", 2);
-r([
-  a({ type: String })
-], t.prototype, "value", 2);
-r([
-  a({ type: String })
-], t.prototype, "placeholder", 2);
-r([
-  a({ type: String })
-], t.prototype, "name", 2);
-r([
-  a({ type: String })
-], t.prototype, "autocomplete", 2);
-r([
-  a({ type: Number })
-], t.prototype, "minlength", 2);
-r([
-  a({ type: Number })
-], t.prototype, "maxlength", 2);
-r([
-  a({ type: Number })
-], t.prototype, "rows", 2);
-r([
-  a({ type: Number })
-], t.prototype, "cols", 2);
-r([
-  a({ type: String })
-], t.prototype, "wrap", 2);
-r([
-  a({ type: String })
-], t.prototype, "resize", 2);
-r([
-  a({ type: Boolean })
-], t.prototype, "autoResize", 2);
-r([
-  a({ type: String })
-], t.prototype, "size", 2);
-r([
-  a({ type: String })
-], t.prototype, "variant", 2);
-r([
-  a({ type: Boolean })
-], t.prototype, "showClear", 2);
-r([
-  a({ type: String })
-], t.prototype, "label", 2);
-r([
-  a({ type: String })
-], t.prototype, "helper", 2);
-r([
-  a({ type: String })
-], t.prototype, "error", 2);
-r([
-  a({ type: Boolean })
-], t.prototype, "required", 2);
-r([
-  a({ type: Boolean })
-], t.prototype, "disabled", 2);
-r([
-  a({ type: Boolean })
-], t.prototype, "readonly", 2);
-r([
-  _()
-], t.prototype, "_internalError", 2);
-t = r([
-  v("logosphere-textarea")
-], t);
-export {
-  t as T
-};