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

package/dist/organisms/Toast/toast-container.d.ts

@@ -0,0 +1,42 @@
+import { LitElement } from "lit";
+import "./toast";
+import type { ToastActionConfig, ToastType } from "./toast";
+export type ToastOptions = {
+    id?: string;
+    type?: ToastType;
+    title?: string;
+    text: string;
+    icon?: string;
+    closeable?: boolean;
+    autoDismiss?: boolean;
+    duration?: number;
+    action?: ToastActionConfig;
+};
+export declare class LogosphereToastContainer extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private visibleToasts;
+    private queuedToasts;
+    show(options: ToastOptions): string;
+    close(id: string): void;
+    clear(): void;
+    private dequeue;
+    private toToast;
+    private createId;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export declare class ToastService {
+    private static container?;
+    static show(options: ToastOptions): string;
+    static success(options: Omit<ToastOptions, "type">): string;
+    static danger(options: Omit<ToastOptions, "type">): string;
+    static warning(options: Omit<ToastOptions, "type">): string;
+    static info(options: Omit<ToastOptions, "type">): string;
+    static close(id: string): void;
+    static clear(): void;
+    private static getContainer;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "logosphere-toast-container": LogosphereToastContainer;
+    }
+}

package/dist/organisms/Toast/toast.d.ts

@@ -0,0 +1,48 @@
+import { LitElement } from "lit";
+import "../../shared/icons/ui-icon";
+import "../../atoms/Button/button";
+export type ToastType = "success" | "danger" | "warning" | "info";
+export type ToastActionConfig = {
+    okayLabel?: string;
+    cancelLabel?: string;
+    onOkay?: () => void;
+    onCancel?: () => void;
+    closeOnAction?: boolean;
+};
+export declare class LogosphereToast extends LitElement {
+    static styles: import("lit").CSSResult[];
+    type: ToastType;
+    title: string;
+    text: string;
+    icon: string;
+    closeable: boolean;
+    duration: number;
+    autoDismiss: boolean;
+    action?: ToastActionConfig;
+    private isClosing;
+    private remainingMs;
+    private startedAt;
+    private timerId?;
+    private closeTimerId?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    close(reason?: "manual" | "auto"): void;
+    private get canAutoDismiss();
+    private get resolvedTitle();
+    private get resolvedText();
+    private get resolvedIcon();
+    private get hasActions();
+    private onActionClick;
+    private clearTimer;
+    private startTimer;
+    private pauseTimer;
+    private resumeTimer;
+    private restartTimer;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "logosphere-toast": LogosphereToast;
+    }
+}

package/dist/styles/main.css

@@ -48,8 +48,8 @@
   /* ==================== SPACING ==================== */
 
   --spacing-0: 0;
+  --spacing-0-5: 0.125rem; /* 2px */
   --spacing-1: 0.25rem; /* 4px */
-  --spacing-1-5: 0.375rem; /* 6px */
   --spacing-2: 0.5rem; /* 8px */
   --spacing-3: 0.75rem; /* 12px */
   --spacing-4: 1rem; /* 16px */
@@ -76,11 +76,12 @@
   /* ==================== SHADOWS ==================== */
 
   --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
-  --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0px 4px 8px -2px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0px 12px 16px -4px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0px 20px 24px -4px rgba(0, 0, 0, 0.1), 0px 8px 8px -4px rgba(0, 0, 0, 0.04);
+  --shadow-2xl: 0px 24px 48px -12px rgba(0, 0, 0, 0.25);
+  --shadow-3xl: 0px 32px 64px -12px rgba(0, 0, 0, 0.2);
   --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
 
   /* ==================== Z-INDEX SCALE ==================== */
@@ -104,96 +105,101 @@
 
   /* Body & Layout */
   --color-body-bg: #ffffff;
-  --color-body-bg-rgb: 255, 255, 255;
-  --color-body-text: #2b2b2b;
-  --color-body-text-rgb: 43, 43, 43;
+  --color-body-color: #2b2b2b;
+  --color-body-bg-hover: #f8f8f8;
+  --color-body-bg-active: #e0e0e0;
+
 
-  /* Hovers */
-  --color-outline-hover: #7878780d;
 
-  /* Tertiary Colors */
-  --color-tertiary: #8e8e8e;
-  --color-tertiary-rgb: 142, 142, 142;
-  --color-tertiary-bg: #f8f8f8;
-  --color-tertiary-bg-rgb: 248, 248, 248;
 
   /* Emphasis */
   --color-emphasis: #000000;
-  --color-emphasis-rgb: 0, 0, 0;
+  --color-emphasis-color: #ffffff;
 
   /* Borders */
   --color-border: #e0e0e0;
-  --color-border-success: #19875424;
-  --color-border-warning: #f7c15924;
-  --color-border-danger: #da5b5b24;
-  --color-border-info: #377dff24;
-  --color-border-rgb: 229, 231, 235;
-  --color-primary-border-subtle: #f0b8bd;
-
-  /* Primary Brand Color */
-  --color-primary: #da5b5b;
-  --color-primary-rgb: 218, 88, 91;
-  --color-primary-hover: #b94d4d;
-  --color-primary-active: #aa4547;
-  --color-primary-bg-subtle: #f0b8bd;
-  --color-primary-text-emphasis: #da5b5b;
+  --color-border-subtle: #f8f9fa;
+  --color-border-emphasis: #2b2b2b;
+
+  /* Tertiary Colors */
+  --color-tertiary: #8e8e8e;
+  --color-tertiary-border: #8e8e8e;
+  --color-tertiary-border-subtle: #e0e0e0;
+
+  /* Primary Brand Color — Logo Kırmızısı */
+  --color-primary: #c8102e;
+  --color-primary-hover: #aa0e27;
+  --color-primary-active: #8c0b20;
+  --color-primary-disabled: #efb7c0;
+  --color-primary-emphasis: #8c0b20;
+  --color-primary-border: #c8102e;
+  --color-primary-border-subtle: #efb7c0;
+  --color-primary-bg: #c8102e;
+  --color-primary-bg-subtle: #f7dbe0;
 
   /* Secondary Colors */
   --color-secondary: #565656;
-  --color-secondary-rgb: 187, 187, 187;
-  --color-secondary-bg-rgb: 75, 75, 75;
-  --color-secondary-hover: #2b2b2b;
-  --color-secondary-active: #fffff;
+  --color-secondary-color: #ffffff;
+  --color-secondary-hover: #333333;
+  --color-secondary-active: #2b2b2b;
+  --color-secondary-disabled: #c6c6c6;
+  --color-secondary-emphasis: #2b2b2b;
+  --color-secondary-border: #565656;
+  --color-secondary-border-subtle: #b0b0b0;
 
   /* Success Colors */
   --color-success: #198754;
-  --color-success-rgb: #ebf7ed;
-  --color-success-hover: #125f3b24;
-  --color-success-active: #126038;
-  --color-success-bg-subtle: #ebf7ed;
-  --color-success-text-emphasis: #0e4a2e;
-  --color-success-outline-text-emphasis: #157347;
-
-  /* Purple Colors */
-  --color-purple: #3D246A;
-  --color-purple-rgb: #EDE8F4;
-  /* Danger Colors */
-  --color-danger: #b94d4d;
-  --color-danger-rgb: #b94d4d15;
-  --color-danger-hover: #99404024;
-  --color-danger-active: #8f343b;
-  --color-danger-bg-subtle: #f0b8bd;
-  --color-danger-text-emphasis: #662a2a;
-  --color-danger-outline-text-emphasis: #783232;
+  --color-success-subtle: #d1e7dd;
+  --color-success-hover: #1d754c;
+  --color-success-active: #206244;
+  --color-success-emphasis: #24503b;
+  --color-success-disabled: #a3cfbb;
+  --color-success-border: #198754;
+  --color-success-border-subtle: #a3cfbb;
 
-  /* Info Colors */
-  --color-info: #377dff24;
-  --color-info-rgb: #ebf2ff;
-  --color-info-hover: #2f64cc24;
-  --color-info-active: #2661cc;
-  --color-info-bg-subtle: #acf8ff;
-  --color-info-text-emphasis: #1e458c;
-  --color-info-outline-text-emphasis: #1e458c;
+  /* Danger Colors */
+  --color-danger: #dd4236;
+  --color-danger-subtle: #fae3e1;
+  --color-danger-hover: #c23f34;
+  --color-danger-active: #a83b33;
+  --color-danger-emphasis: #a83b33;
+  --color-danger-disabled: #f1b3af;
+  --color-danger-border: #dd4236;
 
   /* Warning Colors */
-  --color-warning: #f7c15924;
-  --color-warning-rgb: #ffedcc;
-  --color-warning-hover: #ad873e24;
-  --color-warning-active: #f3b128;
-  --color-warning-bg-subtle: #ffedcc;
-  --color-warning-text-emphasis: #886a31;
-
-  /* Gray Scale */
-  --color-gray-50: #f9fafb;
-  --color-gray-100: #f3f4f6;
-  --color-gray-200: #e5e7eb;
-  --color-gray-300: #d1d5db;
-  --color-gray-400: #9ca3af;
-  --color-gray-500: #6b7280;
-  --color-gray-600: #4b5563;
-  --color-gray-700: #374151;
-  --color-gray-800: #1f2937;
-  --color-gray-900: #111827;
+  --color-warning: #f7c159;
+  --color-warning-subtle: #fdefd5;
+  --color-warning-hover: #e3b254;
+  --color-warning-active: #e3b254;
+  --color-warning-emphasis: #9b7e44;
+  --color-warning-disabled: #fbe0ac;
+  --color-warning-border: #f7c159;
+  --color-warning-border-subtle: #fdefd5;
+
+  /* Info Colors */
+  --color-info: #377dff;
+  --color-info-subtle: #d7e5ff;
+  --color-info-hover: #3571df;
+  --color-info-active: #3364bf;
+  --color-info-emphasis: #3364bf;
+  --color-info-disabled: #afcbff;
+  --color-info-border: #377dff;
+  --color-info-border-subtle: #afcbff;
+
+  /* Commercial / Purple */
+  --color-commercial-subtle: #e2d9f3;
+  --color-commercial-emphasis: #543985;
+
+  /* Light */
+  --color-light: #f8f8f8;
+  --color-light-bg: #f8f8f8;
+  --color-light-bg-2: #f8f9fa;
+  --color-light-border-subtle: #f8f8f8;
+  --color-light-text-emphasis: #333333;
+
+  /* Dark */
+  --color-dark: #000000;
+  --color-dark-bg-subtle: #e0e0e0;
 }
 
 /* ==================== DARK THEME ==================== */
@@ -202,8 +208,8 @@
 /*    !* Body & Layout *!*/
 /*    --color-body-bg: #2b2b2b;*/
 /*    --color-body-bg-rgb: 43, 43, 43;*/
-/*    --color-body-text: #f8f8f8;*/
-/*    --color-body-text-rgb: 248, 248, 248;*/
+/*    --color-body-color: #f8f8f8;*/
+/*    --color-body-color-rgb: 248, 248, 248;*/
 
 /*    !* Secondary Colors *!*/
 /*    --color-secondary: #bbbbbb;*/
@@ -214,8 +220,8 @@
 /*    --color-secondary-outline-hover: #7878780D;*/
 
 /*    !* Tertiary Colors *!*/
-/*    --color-tertiary-bg: #3a3a3a;*/
-/*    --color-tertiary-bg-rgb: 58, 58, 58;*/
+/*    --color-tertiary: #3a3a3a;*/
+/*    --color-tertiary-rgb: 58, 58, 58;*/
 
 /*    !* Emphasis *!*/
 /*    --color-emphasis: #ffffff;*/

package/dist/text-area-Bz62kq2S.cjs

@@ -0,0 +1,51 @@
+"use strict";const i=require("lit"),t=require("lit/decorators.js"),p=require("lit/directives/live.js");require("./formfield-HIqosWPz.cjs");require("./ui-icon-BRl1UmIf.cjs");const u=".textarea__wrap{position:relative;flex:1;min-width:0}.textarea__field{display:block;width:100%;background:transparent;border:none;outline:none;font-size:14px;font-family:var(--font-family-base);font-weight:var(--font-weight-regular);line-height:1.25rem;letter-spacing:-.14px;color:var(--color-body-text);box-sizing:border-box}.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__counter{position:absolute;bottom:5px;right:18px;font-size:11px;font-weight:var(--font-weight-medium);line-height:1rem;letter-spacing:-.11px;color:var(--color-secondary);background-color:var(--color-light-bg-2);border-radius:var(--radius-sm, 4px);padding:0 var(--spacing-1);white-space:nowrap;-webkit-user-select:none;user-select:none;pointer-events:none}.textarea__wrap--no-grip .textarea__counter{right:4px}.textarea__clear-btn{border:none;background:transparent;color:var(--color-tertiary);cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;outline:none;line-height:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.textarea__clear-btn:hover{color:var(--color-body-text)}";var d=Object.defineProperty,c=Object.getOwnPropertyDescriptor,r=(n,e,a,s)=>{for(var o=s>1?void 0:s?c(e,a):e,l=n.length-1,h;l>=0;l--)(h=n[l])&&(o=(s?h(e,a,o):h(o))||o);return s&&o&&d(e,a,o),o};exports.TextArea=class extends i.LitElement{constructor(){super(...arguments),this.value="",this.placeholder="",this.name="",this.autocomplete="",this.rows=3,this.maxRows=8,this.wrap="soft",this.resize="vertical",this.autoResize=!0,this.size="default",this.variant="default",this.label="",this.helper="",this.error="",this.required=!1,this.disabled=!1,this.readonly=!1,this._internalError="",this._charCount=0,this.handleInput=e=>{const a=e.target;this.value=a.value,this._charCount=this.value.length,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._charCount=0,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,s){this._textareaElement?.setSelectionRange(e,a,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(){if(!this.autoResize||!this._textareaElement)return;const e=this._textareaElement;e.style.height="",e.style.overflow="hidden";const a=e.scrollHeight;if(a!==0){if(this.maxRows>0){const s=parseFloat(getComputedStyle(e).lineHeight)||20,o=Math.round(s*this.maxRows);if(a>=o){e.style.height=`${o}px`,e.style.overflow="auto";return}}e.style.height=`${a}px`}}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]}firstUpdated(){this._charCount=this.value.length,this.autoResize&&requestAnimationFrame(()=>this.adjustHeight())}updated(e){super.updated(e),e.has("value")&&(this._charCount=this.value.length,this.autoResize&&this.adjustHeight())}getWrapClass(){return this.autoResize||this.resize==="none"?"textarea__wrap textarea__wrap--no-grip":"textarea__wrap"}render(){const e=this.error||this._internalError,a=!!this.value&&!this.disabled&&!this.readonly,s=this.maxlength!=null,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}
+        .size=${this.size}
+        .variant=${this.variant}
+        .multiline=${!0}
+      >
+        <slot name="prefix" slot="prefix"></slot>
+        <div class="${this.getWrapClass()}">
+          <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>
+          ${s?i.html`
+            <span class="textarea__counter">${this._charCount}/${this.maxlength}</span>
+          `:i.nothing}
+        </div>
+        ${a?i.html`
+          <button
+            type="button"
+            slot="clear"
+            class="textarea__clear-btn"
+            @click=${this.handleClear}
+            tabindex="-1"
+          >
+            <ui-icon name="uil-times" size="14"></ui-icon>
+          </button>
+        `:i.nothing}
+        <slot name="suffix" slot="suffix"></slot>
+      </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,"maxRows",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: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);r([t.state()],exports.TextArea.prototype,"_charCount",2);exports.TextArea=r([t.customElement("logosphere-textarea")],exports.TextArea);

package/dist/text-area-CG0gBXni.js

@@ -0,0 +1,235 @@
+import { unsafeCSS as c, css as y, LitElement as m, nothing as n, html as u } from "lit";
+import { query as _, property as i, state as d, customElement as x } from "lit/decorators.js";
+import { live as g } from "lit/directives/live.js";
+import "./formfield-BZOK4Pkz.js";
+import "./ui-icon-CFvsDv0z.js";
+const f = ".textarea__wrap{position:relative;flex:1;min-width:0}.textarea__field{display:block;width:100%;background:transparent;border:none;outline:none;font-size:14px;font-family:var(--font-family-base);font-weight:var(--font-weight-regular);line-height:1.25rem;letter-spacing:-.14px;color:var(--color-body-text);box-sizing:border-box}.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__counter{position:absolute;bottom:5px;right:18px;font-size:11px;font-weight:var(--font-weight-medium);line-height:1rem;letter-spacing:-.11px;color:var(--color-secondary);background-color:var(--color-light-bg-2);border-radius:var(--radius-sm, 4px);padding:0 var(--spacing-1);white-space:nowrap;-webkit-user-select:none;user-select:none;pointer-events:none}.textarea__wrap--no-grip .textarea__counter{right:4px}.textarea__clear-btn{border:none;background:transparent;color:var(--color-tertiary);cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;outline:none;line-height:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.textarea__clear-btn:hover{color:var(--color-body-text)}";
+var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, r = (e, a, s, o) => {
+  for (var l = o > 1 ? void 0 : o ? b(a, s) : a, h = e.length - 1, p; h >= 0; h--)
+    (p = e[h]) && (l = (o ? p(a, s, l) : p(l)) || l);
+  return o && l && v(a, s, l), l;
+};
+let t = class extends m {
+  constructor() {
+    super(...arguments), this.value = "", this.placeholder = "", this.name = "", this.autocomplete = "", this.rows = 3, this.maxRows = 8, this.wrap = "soft", this.resize = "vertical", this.autoResize = !0, this.size = "default", this.variant = "default", this.label = "", this.helper = "", this.error = "", this.required = !1, this.disabled = !1, this.readonly = !1, this._internalError = "", this._charCount = 0, this.handleInput = (e) => {
+      const a = e.target;
+      this.value = a.value, this._charCount = this.value.length, 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._charCount = 0, 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, s) {
+    this._textareaElement?.setSelectionRange(e, a, 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() {
+    if (!this.autoResize || !this._textareaElement) return;
+    const e = this._textareaElement;
+    e.style.height = "", e.style.overflow = "hidden";
+    const a = e.scrollHeight;
+    if (a !== 0) {
+      if (this.maxRows > 0) {
+        const s = parseFloat(getComputedStyle(e).lineHeight) || 20, o = Math.round(s * this.maxRows);
+        if (a >= o) {
+          e.style.height = `${o}px`, e.style.overflow = "auto";
+          return;
+        }
+      }
+      e.style.height = `${a}px`;
+    }
+  }
+  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];
+  }
+  firstUpdated() {
+    this._charCount = this.value.length, this.autoResize && requestAnimationFrame(() => this.adjustHeight());
+  }
+  updated(e) {
+    super.updated(e), e.has("value") && (this._charCount = this.value.length, this.autoResize && this.adjustHeight());
+  }
+  getWrapClass() {
+    return this.autoResize || this.resize === "none" ? "textarea__wrap textarea__wrap--no-grip" : "textarea__wrap";
+  }
+  render() {
+    const e = this.error || this._internalError, a = !!this.value && !this.disabled && !this.readonly, s = this.maxlength != null, o = `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}
+        .size=${this.size}
+        .variant=${this.variant}
+        .multiline=${!0}
+      >
+        <slot name="prefix" slot="prefix"></slot>
+        <div class="${this.getWrapClass()}">
+          <textarea
+            class="${o}"
+            .value=${g(this.value)}
+            placeholder=${this.placeholder || n}
+            name=${this.name || n}
+            autocomplete=${this.autocomplete || n}
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            minlength=${this.minlength ?? n}
+            maxlength=${this.maxlength ?? n}
+            rows=${this.rows}
+            cols=${this.cols ?? n}
+            wrap=${this.wrap}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+            @keydown=${this.handleKeyDown}
+            @keyup=${this.handleKeyUp}
+          ></textarea>
+          ${s ? u`
+            <span class="textarea__counter">${this._charCount}/${this.maxlength}</span>
+          ` : n}
+        </div>
+        ${a ? u`
+          <button
+            type="button"
+            slot="clear"
+            class="textarea__clear-btn"
+            @click=${this.handleClear}
+            tabindex="-1"
+          >
+            <ui-icon name="uil-times" size="14"></ui-icon>
+          </button>
+        ` : n}
+        <slot name="suffix" slot="suffix"></slot>
+      </logosphere-formfield>
+    `;
+  }
+};
+t.styles = [y`${c(f)}`];
+r([
+  _("textarea")
+], t.prototype, "_textareaElement", 2);
+r([
+  i({ type: String })
+], t.prototype, "value", 2);
+r([
+  i({ type: String })
+], t.prototype, "placeholder", 2);
+r([
+  i({ type: String })
+], t.prototype, "name", 2);
+r([
+  i({ type: String })
+], t.prototype, "autocomplete", 2);
+r([
+  i({ type: Number })
+], t.prototype, "minlength", 2);
+r([
+  i({ type: Number })
+], t.prototype, "maxlength", 2);
+r([
+  i({ type: Number })
+], t.prototype, "rows", 2);
+r([
+  i({ type: Number })
+], t.prototype, "maxRows", 2);
+r([
+  i({ type: Number })
+], t.prototype, "cols", 2);
+r([
+  i({ type: String })
+], t.prototype, "wrap", 2);
+r([
+  i({ type: String })
+], t.prototype, "resize", 2);
+r([
+  i({ type: Boolean })
+], t.prototype, "autoResize", 2);
+r([
+  i({ type: String })
+], t.prototype, "size", 2);
+r([
+  i({ type: String })
+], t.prototype, "variant", 2);
+r([
+  i({ type: String })
+], t.prototype, "label", 2);
+r([
+  i({ type: String })
+], t.prototype, "helper", 2);
+r([
+  i({ type: String })
+], t.prototype, "error", 2);
+r([
+  i({ type: Boolean })
+], t.prototype, "required", 2);
+r([
+  i({ type: Boolean })
+], t.prototype, "disabled", 2);
+r([
+  i({ type: Boolean })
+], t.prototype, "readonly", 2);
+r([
+  d()
+], t.prototype, "_internalError", 2);
+r([
+  d()
+], t.prototype, "_charCount", 2);
+t = r([
+  x("logosphere-textarea")
+], t);
+export {
+  t as T
+};

package/dist/textarea.cjs

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

package/dist/textarea.js

@@ -1,4 +1,4 @@
-import { T as a } from "./text-area-Dec_k4rs.js";
+import { T as a } from "./text-area-CG0gBXni.js";
 export {
   a as TextArea
 };