@sellmate/design-system 1.0.54 → 1.0.55

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
 };
@@ -14157,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) {
@@ -14168,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;
@@ -14191,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;
@@ -14207,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": [{
@@ -14260,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$": "-",
@@ -14334,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 {
@@ -14589,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: () => {
@@ -14664,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 {
@@ -14720,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 {
@@ -14848,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 {

package/hydrate/index.mjs

@@ -4916,6 +4916,7 @@ const input = {
 	sm: {
 		height: "28",
 		paddingX: "12",
+		paddingY: "4",
 		gap: "8",
 		radius: "4",
 		typography: {
@@ -4933,7 +4934,11 @@ const input = {
 			fontSize: "16",
 			lineHeight: "26"}
 	},
+	border: {
+		"default": "#AAAAAA"},
 	bg: {
+		"default": "#FFFFFF",
+		disabled: "#E1E1E1",
 		barcode: "#FAFAA1"
 	},
 	text: {
@@ -4942,7 +4947,11 @@ const input = {
 		disabled: "#888888"},
 	icon: {
 		"default": "#888888"
-	}};
+	},
+	resizer: {
+		color: "#AAAAAA"
+	}
+};
 var inputTokens = {
 	input: input
 };
@@ -14155,7 +14164,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) {
@@ -14166,17 +14189,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;
@@ -14189,12 +14228,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;
@@ -14205,44 +14253,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": [{
@@ -14258,18 +14304,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$": "-",
@@ -14332,10 +14394,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 {
@@ -14587,7 +14649,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: () => {
@@ -14662,7 +14724,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 {
@@ -14718,7 +14780,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 {
@@ -14846,14 +14908,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 {

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sellmate/design-system",
- "version": "1.0.54",
+ "version": "1.0.55",
  "description": "Sellmate Design System - Web Components Library built with Stencil",
  "keywords": [
   "web-components",

package/dist/components/p-BGovA1BG.js

@@ -1 +0,0 @@
-var e={input:{sm:{height:"28",paddingX:"12",gap:"8",radius:"4",typography:{fontWeight:"400",fontSize:"12",lineHeight:"20"}},md:{height:"36",paddingX:"16",gap:"12",radius:"6",typography:{fontWeight:"400",fontSize:"16",lineHeight:"26"}},bg:{barcode:"#FAFAA1"},text:{default:"#222222",placeholder:"#AAAAAA",disabled:"#888888"},icon:{default:"#888888"}}};export{e as i}

package/dist/components/p-Ck-2jtzb.js

@@ -1 +0,0 @@
-import{p as t,H as s,c as e,h as o,t as a}from"./p-D-pFdq6g.js";import{d as n}from"./p-B3CfLqLu.js";import{d as c}from"./p-DSYw-7RA.js";var d={bg:"#07284A",content:"#FFFFFF"},i={bg:"#FB4444",content:"#FFFFFF"},r={bg:"#FFC700",content:"#222222"},l={bg:"#00973C",content:"#FFFFFF"},b={bg:"#005CC9",content:"#FFFFFF"};const p={default:{bg:d.bg,content:d.content},danger:{bg:i.bg,content:i.content},caution:{bg:r.bg,content:r.content},complete:{bg:l.bg,content:l.content},accent:{bg:b.bg,content:b.content}},f={iconSize:"16"},g=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.close=e(this,"sdClose",7)}icon;message;link;linkLabel;useClose=!1;type="default";close;render(){const t=p[this.type]??p.default,s=Number(f.iconSize);return o("div",{key:"630fa227d71315f8e0e61bb19d0f37ca8363b856",style:{"--sd-toast-bg":t.bg,"--sd-toast-text":t.content}},o("div",{key:"49fd9cb53f3c12aa372b44191ccd9f09cc159deb",class:"sd-toast",role:"status","aria-live":"polite","aria-atomic":"true"},this.icon&&o("div",{key:"c57ccceb89350863b19f00b7d725c20ddde33789",class:"sd-toast__icon"},o("sd-icon",{key:"f17a78f7e326005117d69dddcb03e8c0a1443efe",name:this.icon,size:s,color:t.content})),o("div",{key:"713c2c40003b17f29c6921826b4ef3a68d201761",class:"sd-toast__content"},o("span",{key:"50e48da188d6ab805d7cce55705be5da19207724",class:"sd-toast__message"},this.message)),this.link&&o("a",{key:"f04fa2c7386cfb1655bfcfd76e6c1dcb1c5c1ea4",href:this.link,class:"sd-toast__link",target:"_blank",rel:"noopener noreferrer"},this.linkLabel||this.link),this.useClose&&o("sd-ghost-button",{key:"994248033b0d762693a9bacded1454ae1b66c770",class:"sd-toast__close",icon:"close",ariaLabel:"close",size:"xs",onClick:()=>this.close.emit()})))}static get style(){return"sd-toast{display:block;width:fit-content;height:fit-content}sd-toast .sd-toast{display:flex;width:fit-content;align-items:center;gap:var(--sd-toast-gap, 16px);padding:var(--sd-toast-padding-y, 12px) var(--sd-toast-padding-x, 24px);border-radius:var(--sd-toast-radius, 8px);background-color:var(--sd-toast-bg);color:var(--sd-toast-text);box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}sd-toast .sd-toast__icon{display:flex;align-items:center;flex-shrink:0}sd-toast .sd-toast__content{display:flex;flex:1}sd-toast .sd-toast__message{font-size:14px;line-height:24px;font-weight:700;white-space:nowrap}sd-toast .sd-toast__link{font-size:14px;line-height:24px;font-weight:700;color:var(--sd-toast-text);text-decoration:underline;cursor:pointer;transition:opacity 0.2s ease;margin-left:4px}sd-toast .sd-toast__link:hover{opacity:0.8}sd-toast .sd-toast__button{flex-shrink:0}sd-toast .sd-toast__button button{color:var(--button-text-color, inherit) !important}sd-toast .sd-toast__close{flex-shrink:0}"}},[512,"sd-toast",{icon:[1],message:[1],link:[1],linkLabel:[1,"link-label"],useClose:[4,"use-close"],type:[1]}]);function h(){"undefined"!=typeof customElements&&["sd-toast","sd-ghost-button","sd-icon"].forEach((t=>{switch(t){case"sd-toast":customElements.get(a(t))||customElements.define(a(t),g);break;case"sd-ghost-button":customElements.get(a(t))||n();break;case"sd-icon":customElements.get(a(t))||c()}}))}export{g as S,h as d}

package/dist/design-system/p-52d6d7b5.entry.js

@@ -1 +0,0 @@
-import{r as t,c as e,g as a,h as s}from"./p-DsU722JF.js";const r=class{constructor(a){t(this,a),this.input=e(this,"sdUpdate",7),this.focus=e(this,"sdFocus",7),this.blur=e(this,"sdBlur",7)}get host(){return a(this)}value=null;name;disabled=!1;autoFocus=!1;textareaClass="";helpText;maxLength;placeholder="입력해 주세요.";internalValue=null;focused=!1;hovered=!1;nativeEl=void 0;input;focus;blur;valueChanged(t){this.internalValue=t}internalValueChanged(t){t!==this.value&&(this.value=t,this.input?.emit(this.value))}async sdFocus(){this.nativeEl?.focus()}async getNativeElement(){return this.nativeEl||null}componentWillLoad(){null!=this.value&&(this.internalValue=this.value)}componentDidLoad(){this.autoFocus&&this.nativeEl?.focus()}handleInput(t){this.internalValue=t.target.value}handleFocus(t,e){this.focused="focus"===t,"blur"===t?this.blur?.emit(e):this.focus?.emit(e)}getTextareaStatus(){return this.disabled?"sd-textarea--disabled":this.hovered?"sd-textarea--hovered":this.focused?"sd-textarea--focused":""}getMaxLengthCounter(){return void 0===this.maxLength?null:`${(this.internalValue||"").length}/${this.maxLength}`}hasFooter(){return void 0!==this.helpText||void 0!==this.maxLength}render(){const t=this.getMaxLengthCounter();return s("div",{key:"05fa25ff5bc2a8a0927fbc5301c1404a92e26d5c",class:{"sd-textarea":!0,[this.getTextareaStatus()]:!0},onMouseEnter:()=>this.hovered=!0,onMouseLeave:()=>this.hovered=!1},s("div",{key:"a15fabde4ef35369129cb638aa0a680f4c8e231c",class:"sd-textarea__content"},s("textarea",{key:"1967728740bfa9b749040eefbd813116f281db91",name:this.name,ref:t=>this.nativeEl=t,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:t=>this.handleFocus("focus",t),onBlur:t=>this.handleFocus("blur",t)})),this.hasFooter()&&s("div",{key:"ad466295bab42461aeb7a29e81ca147cc473cbea",class:"sd-textarea__footer"},void 0!==this.helpText&&s("span",{key:"d3ad4c9ae5e16114b2b1216ae643c5a53b7bd02a",class:"sd-textarea__help-text"},this.helpText),null!==t&&s("span",{key:"bd8ee146625f96e4b19b15247ca72a3b0816d2a9",class:"sd-textarea__counter"},t)))}static get watchers(){return{value:[{valueChanged:0}],internalValue:[{internalValueChanged:0}]}}};r.style="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}";export{r as sd_textarea}

package/dist/design-system/p-BGovA1BG.js

@@ -1 +0,0 @@
-var e={input:{sm:{height:"28",paddingX:"12",gap:"8",radius:"4",typography:{fontWeight:"400",fontSize:"12",lineHeight:"20"}},md:{height:"36",paddingX:"16",gap:"12",radius:"6",typography:{fontWeight:"400",fontSize:"16",lineHeight:"26"}},bg:{barcode:"#FAFAA1"},text:{default:"#222222",placeholder:"#AAAAAA",disabled:"#888888"},icon:{default:"#888888"}}};export{e as i}