@sellmate/design-system 1.0.53 → 1.0.55

package/dist/cjs/sd-input_2.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-BQt-JC6r.js');
 var index$1 = require('./index-BUvXpPc3.js');
-var component_textinput = require('./component.textinput-DIDZPtYE.js');
+var component_textinput = require('./component.textinput-BWW8c3OY.js');
 
 const sm = component_textinput.inputTokens.input.sm;
 const md = component_textinput.inputTokens.input.md;
@@ -51,6 +51,12 @@ const SdInput = class {
     width = '';
     rules = [];
     autoFocus = false;
+    autocomplete = '';
+    maxlength;
+    minlength;
+    inputmode;
+    enterkeyhint;
+    spellcheck = false;
     status;
     hint = '';
     errorMessage = '';
@@ -142,12 +148,12 @@ const SdInput = class {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (index.h("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 }, index.h("label", { key: '67b37ad7d802c11f9fc1bb372371040a267b9fb9', class: "sd-input__content" }, index.h("slot", { key: '0068eac35163a12efe74288eb7a0871bf1bbbf81', name: "prefix" }), index.h("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 }), index.h("slot", { key: 'faa652d843aaba6229961566590ea564604fd183', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (index.h("sd-ghost-button", { key: '2935121a60b1cdbb2d1fdfc83d29fdad5da796c3', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (index.h("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 }, index.h("label", { key: '02225d57c5bd17dbe78c680f243ad3a9a4ab3b5d', class: "sd-input__content" }, index.h("slot", { key: '1011876ea9726e62a19047b28a82932e43762436', name: "prefix" }), index.h("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 }), index.h("slot", { key: '007d15357a81f13ab4db5ddf237110b9d1f1728b', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (index.h("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' && (index.h("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' && (index.h("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;

package/dist/cjs/sd-textarea.cjs.entry.js

@@ -1,8 +1,24 @@
 'use strict';
 
 var index = require('./index-BQt-JC6r.js');
+var index$1 = require('./index-BUvXpPc3.js');
+var component_textinput = require('./component.textinput-BWW8c3OY.js');
 
-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: component_textinput.inputTokens.input.sm.paddingX,
+    paddingY: component_textinput.inputTokens.input.sm.paddingY,
+    radius: component_textinput.inputTokens.input.sm.radius,
+    fontSize: component_textinput.inputTokens.input.sm.typography.fontSize,
+    lineHeight: component_textinput.inputTokens.input.sm.typography.lineHeight,
+    fontWeight: component_textinput.inputTokens.input.sm.typography.fontWeight};
+const TEXTAREA_COLORS = {
+    text: component_textinput.inputTokens.input.text,
+    bg: component_textinput.inputTokens.input.bg,
+    border: component_textinput.inputTokens.input.border,
+    resizer: component_textinput.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)}`;
 
 const SdTextarea = class {
     constructor(hostRef) {
@@ -13,17 +29,33 @@ const SdTextarea = class {
     }
     get host() { return index.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 = index$1.nanoid();
     input;
     focus;
     blur;
@@ -36,12 +68,21 @@ const SdTextarea = class {
             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;
@@ -52,44 +93,42 @@ const SdTextarea = class {
             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 (index.h("div", { key: '05fa25ff5bc2a8a0927fbc5301c1404a92e26d5c', class: {
-                'sd-textarea': true,
-                [this.getTextareaStatus()]: true,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("div", { key: 'a15fabde4ef35369129cb638aa0a680f4c8e231c', class: "sd-textarea__content" }, index.h("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() && (index.h("div", { key: 'ad466295bab42461aeb7a29e81ca147cc473cbea', class: "sd-textarea__footer" }, this.helpText !== undefined && index.h("span", { key: 'd3ad4c9ae5e16114b2b1216ae643c5a53b7bd02a', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && index.h("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 (index.h("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 }, index.h("div", { key: '026ec0293049da167e7dbab5d3a28593d5e6b291', class: "sd-textarea__content" }, index.h("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": [{

package/dist/cjs/sd-toast-container.cjs.entry.js

@@ -234,7 +234,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (index.h("div", { key: '857b7a794e3dd945d706744519456ad033672760', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: '7d2c4a095a0762710024c4c102ce49c7c7163368', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

package/dist/cjs/sd-toast.cjs.entry.js

@@ -57,10 +57,10 @@ const SdToast = class {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (index.h("div", { key: '630fa227d71315f8e0e61bb19d0f37ca8363b856', style: {
+        return (index.h("div", { key: 'cb42937774233de10872edb8414db88f03868eb3', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, index.h("div", { key: '49fd9cb53f3c12aa372b44191ccd9f09cc159deb', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'c57ccceb89350863b19f00b7d725c20ddde33789', class: "sd-toast__icon" }, index.h("sd-icon", { key: 'f17a78f7e326005117d69dddcb03e8c0a1443efe', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: '713c2c40003b17f29c6921826b4ef3a68d201761', class: "sd-toast__content" }, index.h("span", { key: '50e48da188d6ab805d7cce55705be5da19207724', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: 'f04fa2c7386cfb1655bfcfd76e6c1dcb1c5c1ea4', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("sd-ghost-button", { key: '994248033b0d762693a9bacded1454ae1b66c770', class: "sd-toast__close", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, index.h("div", { key: 'e58b3335c4d7c450ef3686c53138636502c4e0f3', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '62e42c814ab2f15d563b3f75c4e9dd3e559318a0', class: "sd-toast__icon" }, index.h("sd-icon", { key: '3e346baecd3207ee817ba843427ed2076fd7cc7c', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: '700c7127a1d59409103b5ceb917e584020078736', class: "sd-toast__content" }, index.h("span", { key: 'd4165f0e324048edcb2492f3050795d26ce1fc86', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: 'f87089865b4e4fd5b488185478c453641920ac92', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("sd-ghost-button", { key: '33de3a35d1532cd15215751996827a462a7b8cad', class: "sd-toast__close", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

package/dist/cjs/sd-toggle-button.cjs.entry.js

@@ -41,7 +41,7 @@ const SdToggleButton = class {
         this.change.emit(newValue);
     };
     render() {
-        return (index.h("label", { key: '964590e261c212de41cae1cbb6e7e2054182d1f6', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: 'f1bfd190408a6e2899cdcd1d66688b94a8d2ecc0', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: '9d98201d5ab361d0d2d5c8c61ce1e5b129f4d588', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: 'a745715a752bf99a94ab01d8c07c87d0f507a8ef', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggleButton.style = sdToggleButtonCss();

package/dist/cjs/sd-toggle.cjs.entry.js

@@ -37,7 +37,7 @@ const SdToggle = class {
         this.change.emit(newValue);
     };
     render() {
-        return (index.h("label", { key: '2a50a4c8bd89f40db18b78ad5e5ed5885596f0d0', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: 'cfdea2ecd3d5946f3b4264d05da09af6e82ca4cd', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: 'f27cc85d92d47649f31e096ba09894c85a934c52', class: "sd-toggle__label" }, this.label), index.h("div", { key: '4a19cae7fdc7e3b12e03281e31b8b3a2a4cfc88b', class: "sd-toggle__track" }, index.h("div", { key: 'e99a72c39e20e8ea6b4d2df14e74c592b3b0eb22', class: "sd-toggle__thumb" }))));
+        return (index.h("label", { key: '9f4cf71a2aab588deb68d8e6908f0988ddbacb90', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: '6d1279761ea384a233bff234c549030709fd4ea3', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: '7ecd96f5e2c48fda17ed0086ab3cc8bc1caab458', class: "sd-toggle__label" }, this.label), index.h("div", { key: '26f4d468e4ff0c4473e2ce00b7e69a855a249a96', class: "sd-toggle__track" }, index.h("div", { key: '3a7f4019197cfa23dc268ee95308e60d7159ba28', class: "sd-toggle__thumb" }))));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/collection/components/sd-input/sd-input.js

@@ -13,6 +13,12 @@ export class SdInput {
     width = '';
     rules = [];
     autoFocus = false;
+    autocomplete = '';
+    maxlength;
+    minlength;
+    inputmode;
+    enterkeyhint;
+    spellcheck = false;
     status;
     hint = '';
     errorMessage = '';
@@ -104,12 +110,12 @@ export class SdInput {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (h("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 }, h("label", { key: '67b37ad7d802c11f9fc1bb372371040a267b9fb9', class: "sd-input__content" }, h("slot", { key: '0068eac35163a12efe74288eb7a0871bf1bbbf81', name: "prefix" }), h("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 }), h("slot", { key: 'faa652d843aaba6229961566590ea564604fd183', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (h("sd-ghost-button", { key: '2935121a60b1cdbb2d1fdfc83d29fdad5da796c3', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("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 }, h("label", { key: '02225d57c5bd17dbe78c680f243ad3a9a4ab3b5d', class: "sd-input__content" }, h("slot", { key: '1011876ea9726e62a19047b28a82932e43762436', name: "prefix" }), h("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 }), h("slot", { key: '007d15357a81f13ab4db5ddf237110b9d1f1728b', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (h("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' && (h("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' && (h("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;
@@ -340,6 +346,122 @@ export class SdInput {
                 "attribute": "auto-focus",
                 "defaultValue": "false"
             },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete",
+                "defaultValue": "''"
+            },
+            "maxlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "maxlength"
+            },
+            "minlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "minlength"
+            },
+            "inputmode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'",
+                    "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inputmode"
+            },
+            "enterkeyhint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'",
+                    "resolved": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enterkeyhint"
+            },
+            "spellcheck": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "spellcheck",
+                "defaultValue": "false"
+            },
             "status": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/sd-textarea/sd-textarea.config.js

@@ -0,0 +1,16 @@
+import inputTokens from "../../tokens/generated/component.textinput.json";
+export 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,
+    borderWidth: inputTokens.input.borderWidth,
+};
+export const TEXTAREA_COLORS = {
+    text: inputTokens.input.text,
+    bg: inputTokens.input.bg,
+    border: inputTokens.input.border,
+    resizer: inputTokens.input.resizer,
+};

package/dist/collection/components/sd-textarea/sd-textarea.css

@@ -1,68 +1,28 @@
 sd-textarea {
-  display: block;
+  display: inline-flex;
 }
-sd-textarea .sd-textarea {
-  display: flex;
-  flex-direction: column;
-  color: #333333;
-  font-size: 12px;
-  line-height: 20px;
-}
-sd-textarea .sd-textarea .sd-textarea__content {
+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 {
+sd-textarea .sd-textarea__content .sd-textarea__native {
   width: 100%;
   min-height: 100px;
   border: none;
   outline: none;
   background: transparent;
-  padding: 4px 8px;
+  padding: var(--sd-textarea-padding-y) var(--sd-textarea-padding-x);
   font-family: inherit;
-  font-size: 12px;
-  line-height: 20px;
-  color: #333333;
+  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 .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__content .sd-textarea__native::placeholder {
+  color: var(--sd-textarea-placeholder-color);
 }
-sd-textarea .sd-textarea .sd-textarea__counter {
-  color: #CCCCCC;
-  margin-left: auto;
+sd-textarea .sd-textarea__content .sd-textarea__native:disabled {
+  cursor: not-allowed;
+  color: var(--sd-textarea-disabled-color);
 }