@sellmate/design-system 1.0.53 → 1.0.55

package/dist/types/components.d.ts

@@ -672,6 +672,10 @@ export namespace Components {
           * @default false
          */
         "autoFocus": boolean;
+        /**
+          * @default ''
+         */
+        "autocomplete": string;
         /**
           * @default false
          */
@@ -680,6 +684,7 @@ export namespace Components {
           * @default false
          */
         "disabled": boolean;
+        "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
         /**
           * @default false
          */
@@ -712,6 +717,7 @@ export namespace Components {
           * @default {}
          */
         "inputStyle": { [key: string]: string };
+        "inputmode"?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
         /**
           * @default ''
          */
@@ -724,6 +730,8 @@ export namespace Components {
           * @default null
          */
         "labelTooltipProps": SdTooltipProps | null;
+        "maxlength"?: number;
+        "minlength"?: number;
         /**
           * @default '입력해 주세요.'
          */
@@ -745,6 +753,10 @@ export namespace Components {
           * @default 'sm'
          */
         "size": InputSize;
+        /**
+          * @default false
+         */
+        "spellcheck": boolean;
         "status"?: 'default' | 'pass' | 'error';
         /**
           * @default 'text'
@@ -1766,6 +1778,10 @@ export namespace Components {
         "useArrow": boolean;
     }
     interface SdTextarea {
+        /**
+          * @default ''
+         */
+        "addonLabel": string;
         /**
           * @default false
          */
@@ -1774,23 +1790,82 @@ export namespace Components {
           * @default false
          */
         "disabled": boolean;
-        "getNativeElement": () => Promise<HTMLTextAreaElement | null>;
-        "helpText"?: string;
+        /**
+          * @default false
+         */
+        "error": boolean;
+        /**
+          * @default ''
+         */
+        "errorMessage": string;
+        /**
+          * @default false
+         */
+        "focused": boolean;
+        /**
+          * @default ''
+         */
+        "hint": string;
+        /**
+          * @default false
+         */
+        "hovered": boolean;
+        /**
+          * @default undefined
+         */
+        "icon"?: IconProps;
+        /**
+          * @default ''
+         */
+        "label"?: string;
+        /**
+          * @default ''
+         */
+        "labelTooltip": string;
+        /**
+          * @default null
+         */
+        "labelTooltipProps": SdTooltipProps | null;
         "maxLength"?: number;
-        "name"?: string;
         /**
           * @default '입력해 주세요.'
          */
         "placeholder": string;
+        /**
+          * @default false
+         */
+        "readonly": boolean;
+        "rows"?: number;
+        /**
+          * @default []
+         */
+        "rules"?: Rule[];
         "sdFocus": () => Promise<void>;
+        "sdGetNativeElement": () => Promise<HTMLTextAreaElement | null>;
+        "sdReset": () => Promise<void>;
+        "sdResetValidate": () => Promise<void>;
+        "sdValidate": () => Promise<void>;
+        /**
+          * @default false
+         */
+        "spellcheck": boolean;
+        "status"?: 'default' | 'pass' | 'error';
         /**
           * @default ''
          */
         "textareaClass": string;
+        /**
+          * @default {}
+         */
+        "textareaStyle": { [key: string]: string };
         /**
           * @default null
          */
         "value"?: string | null;
+        /**
+          * @default ''
+         */
+        "width": string | number;
     }
     interface SdToast {
         "icon"?: IconName;
@@ -3598,6 +3673,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "autoFocus"?: boolean;
+        /**
+          * @default ''
+         */
+        "autocomplete"?: string;
         /**
           * @default false
          */
@@ -3606,6 +3685,7 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
         /**
           * @default false
          */
@@ -3638,6 +3718,7 @@ declare namespace LocalJSX {
           * @default {}
          */
         "inputStyle"?: { [key: string]: string };
+        "inputmode"?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
         /**
           * @default ''
          */
@@ -3650,6 +3731,8 @@ declare namespace LocalJSX {
           * @default null
          */
         "labelTooltipProps"?: SdTooltipProps | null;
+        "maxlength"?: number;
+        "minlength"?: number;
         "onSdBlur"?: (event: SdInputCustomEvent<Event>) => void;
         "onSdFocus"?: (event: SdInputCustomEvent<Event>) => void;
         "onSdUpdate"?: (event: SdInputCustomEvent<string | number | null>) => void;
@@ -3669,6 +3752,10 @@ declare namespace LocalJSX {
           * @default 'sm'
          */
         "size"?: InputSize;
+        /**
+          * @default false
+         */
+        "spellcheck"?: boolean;
         "status"?: 'default' | 'pass' | 'error';
         /**
           * @default 'text'
@@ -4705,6 +4792,10 @@ declare namespace LocalJSX {
         "useArrow"?: boolean;
     }
     interface SdTextarea {
+        /**
+          * @default ''
+         */
+        "addonLabel"?: string;
         /**
           * @default false
          */
@@ -4713,9 +4804,43 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
-        "helpText"?: string;
+        /**
+          * @default false
+         */
+        "error"?: boolean;
+        /**
+          * @default ''
+         */
+        "errorMessage"?: string;
+        /**
+          * @default false
+         */
+        "focused"?: boolean;
+        /**
+          * @default ''
+         */
+        "hint"?: string;
+        /**
+          * @default false
+         */
+        "hovered"?: boolean;
+        /**
+          * @default undefined
+         */
+        "icon"?: IconProps;
+        /**
+          * @default ''
+         */
+        "label"?: string;
+        /**
+          * @default ''
+         */
+        "labelTooltip"?: string;
+        /**
+          * @default null
+         */
+        "labelTooltipProps"?: SdTooltipProps | null;
         "maxLength"?: number;
-        "name"?: string;
         "onSdBlur"?: (event: SdTextareaCustomEvent<Event>) => void;
         "onSdFocus"?: (event: SdTextareaCustomEvent<Event>) => void;
         "onSdUpdate"?: (event: SdTextareaCustomEvent<string | null>) => void;
@@ -4723,14 +4848,36 @@ declare namespace LocalJSX {
           * @default '입력해 주세요.'
          */
         "placeholder"?: string;
+        /**
+          * @default false
+         */
+        "readonly"?: boolean;
+        "rows"?: number;
+        /**
+          * @default []
+         */
+        "rules"?: Rule[];
+        /**
+          * @default false
+         */
+        "spellcheck"?: boolean;
+        "status"?: 'default' | 'pass' | 'error';
         /**
           * @default ''
          */
         "textareaClass"?: string;
+        /**
+          * @default {}
+         */
+        "textareaStyle"?: { [key: string]: string };
         /**
           * @default null
          */
         "value"?: string | null;
+        /**
+          * @default ''
+         */
+        "width"?: string | number;
     }
     interface SdToast {
         "icon"?: IconName;
@@ -5021,6 +5168,12 @@ declare namespace LocalJSX {
         "clearable": boolean;
         "width": string;
         "autoFocus": boolean;
+        "autocomplete": string;
+        "maxlength": number;
+        "minlength": number;
+        "inputmode": 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+        "enterkeyhint": 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+        "spellcheck": boolean;
         "status": 'default' | 'pass' | 'error';
         "hint": string;
         "errorMessage": string;
@@ -5277,13 +5430,24 @@ declare namespace LocalJSX {
     }
     interface SdTextareaAttributes {
         "value": string | null;
-        "name": string;
+        "placeholder": string;
         "disabled": boolean;
+        "readonly": boolean;
         "autoFocus": boolean;
         "textareaClass": string;
-        "helpText": string;
         "maxLength": number;
-        "placeholder": string;
+        "rows": number;
+        "spellcheck": boolean;
+        "width": string;
+        "label": string;
+        "addonLabel": string;
+        "hint": string;
+        "errorMessage": string;
+        "labelTooltip": string;
+        "error": boolean;
+        "status": 'default' | 'pass' | 'error';
+        "focused": boolean;
+        "hovered": boolean;
     }
     interface SdToastAttributes {
         "icon": IconName;

package/hydrate/index.js

@@ -4918,6 +4918,7 @@ const input = {
 	sm: {
 		height: "28",
 		paddingX: "12",
+		paddingY: "4",
 		gap: "8",
 		radius: "4",
 		typography: {
@@ -4935,7 +4936,11 @@ const input = {
 			fontSize: "16",
 			lineHeight: "26"}
 	},
+	border: {
+		"default": "#AAAAAA"},
 	bg: {
+		"default": "#FFFFFF",
+		disabled: "#E1E1E1",
 		barcode: "#FAFAA1"
 	},
 	text: {
@@ -4944,7 +4949,11 @@ const input = {
 		disabled: "#888888"},
 	icon: {
 		"default": "#888888"
-	}};
+	},
+	resizer: {
+		color: "#AAAAAA"
+	}
+};
 var inputTokens = {
 	input: input
 };
@@ -8685,6 +8694,12 @@ class SdInput {
     width = '';
     rules = [];
     autoFocus = false;
+    autocomplete = '';
+    maxlength;
+    minlength;
+    inputmode;
+    enterkeyhint;
+    spellcheck = false;
     status;
     hint = '';
     errorMessage = '';
@@ -8776,12 +8791,12 @@ class SdInput {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (hAsync("sd-field", { key: '942bba44bffb9c047ce07c07c9cefd02b6b50e62', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '67b37ad7d802c11f9fc1bb372371040a267b9fb9', class: "sd-input__content" }, hAsync("slot", { key: '0068eac35163a12efe74288eb7a0871bf1bbbf81', name: "prefix" }), hAsync("input", { key: '5c48d3c102ff8cb01a98a60a2128bdd5422aa032', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: 'faa652d843aaba6229961566590ea564604fd183', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (hAsync("sd-ghost-button", { key: '2935121a60b1cdbb2d1fdfc83d29fdad5da796c3', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (hAsync("sd-field", { key: 'd5f554784340cbb9246165fb15124098e4f7165b', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '02225d57c5bd17dbe78c680f243ad3a9a4ab3b5d', class: "sd-input__content" }, hAsync("slot", { key: '1011876ea9726e62a19047b28a82932e43762436', name: "prefix" }), hAsync("input", { key: '10f4c594382aa002ba09a0012979ff930154fc7a', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '007d15357a81f13ab4db5ddf237110b9d1f1728b', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (hAsync("sd-ghost-button", { key: '92dfd40117cccdb48ebfc0056aa9e093546bbf6b', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '800f789b3cff3b8b32fe2c048f8fabe332f69d66', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: 'a4bef720b55a94a4a6ada002f4a2ffd1d0f8da24', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled)
                     return;
                 this.passwordVisible = !this.passwordVisible;
@@ -8810,6 +8825,12 @@ class SdInput {
             "width": [8],
             "rules": [16],
             "autoFocus": [4, "auto-focus"],
+            "autocomplete": [1],
+            "maxlength": [2],
+            "minlength": [2],
+            "inputmode": [1],
+            "enterkeyhint": [1],
+            "spellcheck": [4],
             "status": [1],
             "hint": [1],
             "errorMessage": [1, "error-message"],
@@ -14145,7 +14166,21 @@ class SdTextLink {
     }; }
 }
 
-const sdTextareaCss = () => `sd-textarea{display:block}sd-textarea .sd-textarea{display:flex;flex-direction:column;color:#333333;font-size:12px;line-height:20px}sd-textarea .sd-textarea .sd-textarea__content{width:100%;display:flex;border:1px solid #AAAAAA;border-radius:4px;background:white}sd-textarea .sd-textarea .sd-textarea__content .sd-textarea__native{width:100%;min-height:100px;border:none;outline:none;background:transparent;padding:4px 8px;font-family:inherit;font-size:12px;line-height:20px;color:#333333;resize:vertical}sd-textarea .sd-textarea .sd-textarea__content .sd-textarea__native::placeholder{color:#AAAAAA}sd-textarea .sd-textarea--hovered .sd-textarea__content,sd-textarea .sd-textarea--focused .sd-textarea__content{border-color:#0075FF;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}sd-textarea .sd-textarea--disabled{cursor:not-allowed !important;box-shadow:none !important}sd-textarea .sd-textarea--disabled .sd-textarea__content{background:#EEEEEE !important;border:1px solid #CCCCCC !important;color:#888888 !important}sd-textarea .sd-textarea--disabled .sd-textarea__content .sd-textarea__native{cursor:not-allowed !important;color:#888888 !important}sd-textarea .sd-textarea .sd-textarea__footer{display:flex;justify-content:space-between;align-items:center;margin-top:4px;font-size:12px;line-height:20px}sd-textarea .sd-textarea .sd-textarea__help-text{font-size:12px;line-height:20px;font-weight:400;color:#222222}sd-textarea .sd-textarea .sd-textarea__counter{color:#CCCCCC;margin-left:auto}`;
+const TEXTAREA_TOKENS = {
+    paddingX: inputTokens.input.sm.paddingX,
+    paddingY: inputTokens.input.sm.paddingY,
+    radius: inputTokens.input.sm.radius,
+    fontSize: inputTokens.input.sm.typography.fontSize,
+    lineHeight: inputTokens.input.sm.typography.lineHeight,
+    fontWeight: inputTokens.input.sm.typography.fontWeight};
+const TEXTAREA_COLORS = {
+    text: inputTokens.input.text,
+    bg: inputTokens.input.bg,
+    border: inputTokens.input.border,
+    resizer: inputTokens.input.resizer,
+};
+
+const sdTextareaCss = () => `sd-textarea{display:inline-flex}sd-textarea .sd-textarea__content{width:100%;display:flex}sd-textarea .sd-textarea__content .sd-textarea__native{width:100%;min-height:100px;border:none;outline:none;background:transparent;padding:var(--sd-textarea-padding-y) var(--sd-textarea-padding-x);font-family:inherit;font-size:var(--sd-textarea-font-size);line-height:var(--sd-textarea-line-height);font-weight:var(--sd-textarea-font-weight);color:var(--sd-textarea-text-color);resize:vertical}sd-textarea .sd-textarea__content .sd-textarea__native::placeholder{color:var(--sd-textarea-placeholder-color)}sd-textarea .sd-textarea__content .sd-textarea__native:disabled{cursor:not-allowed;color:var(--sd-textarea-disabled-color)}`;
 
 class SdTextarea {
     constructor(hostRef) {
@@ -14156,17 +14191,33 @@ class SdTextarea {
     }
     get host() { return getElement(this); }
     value = null;
-    name;
+    placeholder = '입력해 주세요.';
     disabled = false;
+    readonly = false;
     autoFocus = false;
     textareaClass = '';
-    helpText;
+    textareaStyle = {};
     maxLength;
-    placeholder = '입력해 주세요.';
-    internalValue = null;
+    rows;
+    spellcheck = false;
+    width = '';
+    // props - sd-field
+    label = '';
+    addonLabel = '';
+    hint = '';
+    errorMessage = '';
+    icon = undefined;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    rules = [];
+    error = false;
+    status;
     focused = false;
     hovered = false;
+    internalValue = null;
     nativeEl = undefined;
+    formField;
+    name = nanoid();
     input;
     focus;
     blur;
@@ -14179,12 +14230,21 @@ class SdTextarea {
             this.input?.emit(this.value);
         }
     }
-    async sdFocus() {
-        this.nativeEl?.focus();
-    }
-    async getNativeElement() {
+    async sdGetNativeElement() {
         return this.nativeEl || null;
     }
+    async sdValidate() {
+        this.formField?.sdValidate();
+    }
+    async sdReset() {
+        this.formField?.sdReset();
+    }
+    async sdResetValidate() {
+        this.formField?.sdResetValidation();
+    }
+    async sdFocus() {
+        this.formField?.sdFocus();
+    }
     componentWillLoad() {
         if (this.value !== null && this.value !== undefined) {
             this.internalValue = this.value;
@@ -14195,44 +14255,42 @@ class SdTextarea {
             this.nativeEl?.focus();
         }
     }
-    handleInput(event) {
+    handleInput = (event) => {
         const target = event.target;
         this.internalValue = target.value;
-    }
-    handleFocus(type, event) {
+    };
+    handleFocus = async (type, event) => {
         this.focused = type === 'focus';
         if (type === 'blur') {
+            if (this.rules && this.rules.length > 0) {
+                await this.formField?.sdValidate();
+            }
             this.blur?.emit(event);
         }
         else {
             this.focus?.emit(event);
         }
-    }
-    getTextareaStatus() {
-        if (this.disabled)
-            return 'sd-textarea--disabled';
-        if (this.hovered)
-            return 'sd-textarea--hovered';
-        if (this.focused)
-            return 'sd-textarea--focused';
-        return '';
-    }
-    getMaxLengthCounter() {
-        if (this.maxLength === undefined) {
-            return null;
-        }
-        const currentLength = (this.internalValue || '').length;
-        return `${currentLength}/${this.maxLength}`;
-    }
-    hasFooter() {
-        return this.helpText !== undefined || this.maxLength !== undefined;
-    }
+    };
     render() {
-        const maxLengthCounter = this.getMaxLengthCounter();
-        return (hAsync("div", { key: '05fa25ff5bc2a8a0927fbc5301c1404a92e26d5c', class: {
-                'sd-textarea': true,
-                [this.getTextareaStatus()]: true,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: 'a15fabde4ef35369129cb638aa0a680f4c8e231c', class: "sd-textarea__content" }, hAsync("textarea", { key: '1967728740bfa9b749040eefbd813116f281db91', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (hAsync("div", { key: 'ad466295bab42461aeb7a29e81ca147cc473cbea', class: "sd-textarea__footer" }, this.helpText !== undefined && hAsync("span", { key: 'd3ad4c9ae5e16114b2b1216ae643c5a53b7bd02a', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && hAsync("span", { key: 'bd8ee146625f96e4b19b15247ca72a3b0816d2a9', class: "sd-textarea__counter" }, maxLengthCounter)))));
+        const cssVars = {
+            '--sd-textarea-font-size': `${TEXTAREA_TOKENS.fontSize}px`,
+            '--sd-textarea-line-height': `${TEXTAREA_TOKENS.lineHeight}px`,
+            '--sd-textarea-font-weight': TEXTAREA_TOKENS.fontWeight,
+            '--sd-textarea-padding-x': `${TEXTAREA_TOKENS.paddingX}px`,
+            '--sd-textarea-padding-y': `${TEXTAREA_TOKENS.paddingY}px`,
+            '--sd-textarea-radius': `${TEXTAREA_TOKENS.radius}px`,
+            '--sd-textarea-text-color': TEXTAREA_COLORS.text.default,
+            '--sd-textarea-placeholder-color': TEXTAREA_COLORS.text.placeholder,
+            '--sd-textarea-disabled-color': TEXTAREA_COLORS.text.disabled,
+            '--sd-textarea-bg-color': TEXTAREA_COLORS.bg.default,
+            '--sd-textarea-disabled-bg-color': TEXTAREA_COLORS.bg.disabled,
+            '--sd-textarea-border-color': TEXTAREA_COLORS.border.default,
+            '--sd-textarea-resizer-color': TEXTAREA_COLORS.resizer.color,
+            // sd-field 시스템 변수 override (textarea는 고정 높이가 아닌 auto)
+            '--sd-system-size-field-sm-height': 'auto',
+            '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
+        };
+        return (hAsync("sd-field", { key: '390028112d84c22766c6e00fa3625312b8096629', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '026ec0293049da167e7dbab5d3a28593d5e6b291', class: "sd-textarea__content" }, hAsync("textarea", { key: 'd30b5e1bc61535c1c350f09bf2ea289f0b09001b', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
     }
     static get watchers() { return {
         "value": [{
@@ -14248,18 +14306,34 @@ class SdTextarea {
         "$tagName$": "sd-textarea",
         "$members$": {
             "value": [1025],
-            "name": [1],
+            "placeholder": [1],
             "disabled": [4],
+            "readonly": [4],
             "autoFocus": [4, "auto-focus"],
             "textareaClass": [1, "textarea-class"],
-            "helpText": [1, "help-text"],
+            "textareaStyle": [16],
             "maxLength": [2, "max-length"],
-            "placeholder": [1],
+            "rows": [2],
+            "spellcheck": [4],
+            "width": [8],
+            "label": [1],
+            "addonLabel": [1, "addon-label"],
+            "hint": [1],
+            "errorMessage": [1, "error-message"],
+            "icon": [16],
+            "labelTooltip": [1, "label-tooltip"],
+            "labelTooltipProps": [16],
+            "rules": [16],
+            "error": [1028],
+            "status": [1],
+            "focused": [1028],
+            "hovered": [1028],
             "internalValue": [32],
-            "focused": [32],
-            "hovered": [32],
-            "sdFocus": [64],
-            "getNativeElement": [64]
+            "sdGetNativeElement": [64],
+            "sdValidate": [64],
+            "sdReset": [64],
+            "sdResetValidate": [64],
+            "sdFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -14322,10 +14396,10 @@ class SdToast {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (hAsync("div", { key: '630fa227d71315f8e0e61bb19d0f37ca8363b856', style: {
+        return (hAsync("div", { key: 'cb42937774233de10872edb8414db88f03868eb3', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, hAsync("div", { key: '49fd9cb53f3c12aa372b44191ccd9f09cc159deb', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: 'c57ccceb89350863b19f00b7d725c20ddde33789', class: "sd-toast__icon" }, hAsync("sd-icon", { key: 'f17a78f7e326005117d69dddcb03e8c0a1443efe', name: this.icon, size: iconSize, color: typeConfig.content }))), hAsync("div", { key: '713c2c40003b17f29c6921826b4ef3a68d201761', class: "sd-toast__content" }, hAsync("span", { key: '50e48da188d6ab805d7cce55705be5da19207724', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: 'f04fa2c7386cfb1655bfcfd76e6c1dcb1c5c1ea4', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (hAsync("sd-ghost-button", { key: '994248033b0d762693a9bacded1454ae1b66c770', class: "sd-toast__close", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, hAsync("div", { key: 'e58b3335c4d7c450ef3686c53138636502c4e0f3', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '62e42c814ab2f15d563b3f75c4e9dd3e559318a0', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '3e346baecd3207ee817ba843427ed2076fd7cc7c', name: this.icon, size: iconSize, color: typeConfig.content }))), hAsync("div", { key: '700c7127a1d59409103b5ceb917e584020078736', class: "sd-toast__content" }, hAsync("span", { key: 'd4165f0e324048edcb2492f3050795d26ce1fc86', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: 'f87089865b4e4fd5b488185478c453641920ac92', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (hAsync("sd-ghost-button", { key: '33de3a35d1532cd15215751996827a462a7b8cad', class: "sd-toast__close", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
     static get style() { return sdToastCss(); }
     static get cmpMeta() { return {
@@ -14577,7 +14651,7 @@ class SdToastContainer {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (hAsync("div", { key: '857b7a794e3dd945d706744519456ad033672760', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (hAsync("div", { key: '7d2c4a095a0762710024c4c102ce49c7c7163368', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {
@@ -14652,7 +14726,7 @@ class SdToggle {
         this.change.emit(newValue);
     };
     render() {
-        return (hAsync("label", { key: '2a50a4c8bd89f40db18b78ad5e5ed5885596f0d0', "aria-label": this.label || 'toggle', class: this.toggleClasses }, hAsync("input", { key: 'cfdea2ecd3d5946f3b4264d05da09af6e82ca4cd', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && hAsync("span", { key: 'f27cc85d92d47649f31e096ba09894c85a934c52', class: "sd-toggle__label" }, this.label), hAsync("div", { key: '4a19cae7fdc7e3b12e03281e31b8b3a2a4cfc88b', class: "sd-toggle__track" }, hAsync("div", { key: 'e99a72c39e20e8ea6b4d2df14e74c592b3b0eb22', class: "sd-toggle__thumb" }))));
+        return (hAsync("label", { key: '9f4cf71a2aab588deb68d8e6908f0988ddbacb90', "aria-label": this.label || 'toggle', class: this.toggleClasses }, hAsync("input", { key: '6d1279761ea384a233bff234c549030709fd4ea3', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && hAsync("span", { key: '7ecd96f5e2c48fda17ed0086ab3cc8bc1caab458', class: "sd-toggle__label" }, this.label), hAsync("div", { key: '26f4d468e4ff0c4473e2ce00b7e69a855a249a96', class: "sd-toggle__track" }, hAsync("div", { key: '3a7f4019197cfa23dc268ee95308e60d7159ba28', class: "sd-toggle__thumb" }))));
     }
     static get style() { return sdToggleCss(); }
     static get cmpMeta() { return {
@@ -14708,7 +14782,7 @@ class SdToggleButton {
         this.change.emit(newValue);
     };
     render() {
-        return (hAsync("label", { key: '964590e261c212de41cae1cbb6e7e2054182d1f6', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, hAsync("input", { key: 'f1bfd190408a6e2899cdcd1d66688b94a8d2ecc0', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (hAsync("label", { key: '9d98201d5ab361d0d2d5c8c61ce1e5b129f4d588', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, hAsync("input", { key: 'a745715a752bf99a94ab01d8c07c87d0f507a8ef', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
     static get style() { return sdToggleButtonCss(); }
     static get cmpMeta() { return {
@@ -14836,14 +14910,14 @@ class SdTooltip {
         const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
         const divTrigger = trigger === 'hover' ? hoverTrigger : this.label ? {} : { onClick: toggleTooltip };
         const buttonClickTrigger = trigger === 'click' && this.label ? { onSdClick: toggleTooltip } : {};
-        return (hAsync(Fragment, { key: '45662c35d1eb8cd1f23e0c62646a02fd244fee13' }, hAsync("div", { key: '7f04bfcc31aecad132ce95eeb1a6d936f79189ee', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '95c16d600733dca5f40d06b222b422bd48ddb2dd', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '84b63cb44fbe9e7a81e033acde6be32b72ed24ba', ref: el => (this.menuEl = el), class: {
+        return (hAsync(Fragment, { key: '2e854c5a056af93e65460500da199ddd763de777' }, hAsync("div", { key: 'aa5e250e4d371c4a54401d367fdf647cefb6aecc', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: 'f94aa0d5730b7f585f943b60bf39e4248d0b695e', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '76ece6c53c4daad54a13950b616bb7edd0827f81', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: 'c05e9ecb128e780f3596e8e17b6796255e21b61e', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: 'fa56346eb836456d4a646cd2d3959e2c4c98c2d7' })), hAsync("div", { key: '926e918d55db0f79e5e776b341fe4d0d6b0bf574', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: '4beed6bf9afbccd072c2c8ab9885d7a8bde99284', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: 'e73b4c9085c57f40410ecc0a7ec758019418899e' })), hAsync("div", { key: '8dcd58077836c846fafb948dbf0c77e149987818', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
     static get style() { return sdTooltipCss(); }
     static get cmpMeta() { return {