@sellmate/design-system 1.0.54 → 1.0.56

package/hydrate/index.mjs

@@ -4803,6 +4803,10 @@ const ACTION_MODAL_TITLE = {
 
 const sdActionModalCss = () => `sd-action-modal{display:block;width:fit-content;min-width:520px}sd-action-modal .sd-action-modal{position:relative;display:flex;flex-direction:column;border-radius:var(--sd-action-modal-radius);background:var(--sd-action-modal-bg);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);overflow:hidden}sd-action-modal .sd-action-modal__header{display:flex;align-items:center;gap:var(--sd-action-modal-header-gap);padding:var(--sd-action-modal-header-padding-y) calc(var(--sd-action-modal-header-padding-x) + 20px) var(--sd-action-modal-header-padding-y) var(--sd-action-modal-header-padding-x)}sd-action-modal .sd-action-modal__title{margin:0;color:var(--sd-action-modal-title-color);font-family:var(--sd-action-modal-title-font-family);font-weight:var(--sd-action-modal-title-font-weight);font-size:var(--sd-action-modal-title-font-size);line-height:var(--sd-action-modal-title-line-height);white-space:nowrap}sd-action-modal .sd-action-modal__header-sub{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px}sd-action-modal .sd-action-modal__header-sub:empty{display:none}sd-action-modal .sd-action-modal__close{position:absolute;top:16px;right:16px;cursor:pointer}sd-action-modal .sd-action-modal__body{flex:1 1 auto;min-height:0;padding:0 var(--sd-action-modal-body-padding-x) var(--sd-action-modal-body-padding-bottom);overflow:auto}sd-action-modal .sd-action-modal__footer{display:flex;align-items:center;gap:var(--sd-action-modal-footer-gap);padding:var(--sd-action-modal-footer-padding-y) var(--sd-action-modal-footer-padding-x);background:var(--sd-action-modal-footer-bg);border-top:1px solid var(--sd-action-modal-footer-border)}sd-action-modal .sd-action-modal__footer>sd-button-v2{margin-left:auto}sd-action-modal .sd-action-modal__footer-sub{display:flex;align-items:center;gap:8px;min-width:0}sd-action-modal .sd-action-modal__footer-sub:empty{display:none}`;
 
+const DEFAULT_BUTTON_PROPS = {
+    name: 'primary_md',
+    label: '확인',
+};
 class SdActionModal {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -4810,7 +4814,7 @@ class SdActionModal {
         this.ok = createEvent(this, "sdOk", 7);
     }
     modalTitle = '';
-    buttonLabel = '확인';
+    buttonProps = {};
     close;
     ok;
     render() {
@@ -4833,7 +4837,7 @@ class SdActionModal {
             '--sd-action-modal-title-font-size': `${ACTION_MODAL_TITLE.fontSize}px`,
             '--sd-action-modal-title-line-height': `${ACTION_MODAL_TITLE.lineHeight}px`,
         };
-        return (hAsync("div", { key: 'c8d2ab2b26ed09c4e7af102d5c63bd15bea93556', class: "sd-action-modal", style: cssVars }, hAsync("header", { key: '0a2b8ed31201b01570002fc22acd721bfca7cb94', class: "sd-action-modal__header" }, hAsync("h2", { key: '434595ee377242447556598a9e60e94fb776f8a3', class: "sd-action-modal__title" }, this.modalTitle), hAsync("div", { key: 'e60988af90d0abc16508144cb45e2334e096539c', class: "sd-action-modal__header-sub" }, hAsync("slot", { key: '74aabd257bfcbc1458446d8712df399573cecca7', name: "header-sub-title" })), hAsync("sd-ghost-button", { key: 'b4937b9d686047ae8e9bfcd12413dbf42f4e90ad', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: '9a0a7b4927a4edb4252f843dd1bd71037dbb94dd', class: "sd-action-modal__body" }, hAsync("slot", { key: 'cc92c17e415edf18f990d633fbdaf70dd757da72', name: "body" })), hAsync("footer", { key: '35ff49a26c607430e0bd0553aa6d350cbd6e9423', class: "sd-action-modal__footer" }, hAsync("div", { key: 'cd346a4a7195ad262f2298b512dfac5b3cabff2f', class: "sd-action-modal__footer-sub" }, hAsync("slot", { key: '207c68c831e06e05cc2d17c3ac93aefd47ed9b28', name: "bottom-sub-content" })), hAsync("sd-button-v2", { key: 'f2de8110262e9bc403a3d65ba9324c3b9a6225c9', name: "primary_md", label: this.buttonLabel, onSdClick: () => this.ok.emit() }))));
+        return (hAsync("div", { key: '8b3199bfcb78121b72a97e0d15bb032757080706', class: "sd-action-modal", style: cssVars }, hAsync("header", { key: '26075ddc7f0a6d96c5457483faa1dcce945058a1', class: "sd-action-modal__header" }, hAsync("h2", { key: 'a207d1f211ac8826d425d9c1ff84f08037967d2b', class: "sd-action-modal__title" }, this.modalTitle), hAsync("div", { key: 'aaef21b786dd110066d5cbfaa2824f87ef705e13', class: "sd-action-modal__header-sub" }, hAsync("slot", { key: 'cfbb60575a14e3f297d7c97da59039e9fd0bcb7a', name: "header-sub-title" })), hAsync("sd-ghost-button", { key: '368a6c44add48953beaa8809184813179075d022', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: '51e25fa037d7a23a5c3aea434b2d73ddc0bf3552', class: "sd-action-modal__body" }, hAsync("slot", { key: '32454a97a41a1dd1402f112292c347f02cfd5186', name: "body" })), hAsync("footer", { key: '639a174a8451bb4ece0339c6aeb81b20d31933fd', class: "sd-action-modal__footer" }, hAsync("div", { key: '0da91c9254a9e69e8ef5effb3123e098bdfb0fcb', class: "sd-action-modal__footer-sub" }, hAsync("slot", { key: '9c19df37ea9f20353440595b32b304e40dfcfb28', name: "bottom-sub-content" })), hAsync("sd-button-v2", { key: '6fa6a31e3147f4457a4d2021394ed18994831147', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() }))));
     }
     static get style() { return sdActionModalCss(); }
     static get cmpMeta() { return {
@@ -4841,7 +4845,7 @@ class SdActionModal {
         "$tagName$": "sd-action-modal",
         "$members$": {
             "modalTitle": [1, "modal-title"],
-            "buttonLabel": [1, "button-label"]
+            "buttonProps": [16]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -4916,6 +4920,7 @@ const input = {
 	sm: {
 		height: "28",
 		paddingX: "12",
+		paddingY: "4",
 		gap: "8",
 		radius: "4",
 		typography: {
@@ -4933,7 +4938,11 @@ const input = {
 			fontSize: "16",
 			lineHeight: "26"}
 	},
+	border: {
+		"default": "#AAAAAA"},
 	bg: {
+		"default": "#FFFFFF",
+		disabled: "#E1E1E1",
 		barcode: "#FAFAA1"
 	},
 	text: {
@@ -4942,7 +4951,11 @@ const input = {
 		disabled: "#888888"},
 	icon: {
 		"default": "#888888"
-	}};
+	},
+	resizer: {
+		color: "#AAAAAA"
+	}
+};
 var inputTokens = {
 	input: input
 };
@@ -5566,7 +5579,7 @@ class SdButton {
         const buttonClasses = this.getButtonClasses();
         // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)
         const resolvedColor = resolveColor(this.color);
-        return (hAsync("button", { key: '079f66bd47a67c5e7cf95ff6b0b6a10aa84697d5', class: `${buttonClasses} ${this.sdClass}`, type: this.type, disabled: this.disabled, style: { '--button-color': resolvedColor }, onClick: this.handleClick }, hAsync("div", { key: '78c7b1b6b7828fe93c5a2752fbaf41b0b8c17cb2', class: "sd-button__content" }, this.icon && (hAsync("sd-icon", { key: '3f0afbeec89e0064f404d4967870516c87f35ac2', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ?? ICON_SIZES[this.size], color: this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor) })), this.label && hAsync("div", { key: '319ac39031f4118489d88eec50eb590067422f87', class: "sd-button__label" }, this.label), this.iconRight && (hAsync("sd-icon", { key: '3e25e709e39ffbaceec0863c4fc5c54b8d34d5e1', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor })))));
+        return (hAsync("button", { key: '3afd0a3392bc11cd49b8a8d76f0c92b158652822', class: `${buttonClasses} ${this.sdClass}`, type: this.type, disabled: this.disabled, style: { '--button-color': resolvedColor }, onClick: this.handleClick }, hAsync("div", { key: 'f9741b8f6c5f119f4d54ebd65c2745cd61667c89', class: "sd-button__content" }, this.icon && (hAsync("sd-icon", { key: 'f2a969c8fe4c127951d426c3ffa61c22cd566b1a', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ?? ICON_SIZES[this.size], color: this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor) })), this.label && hAsync("div", { key: 'ce542bb75ad0175a6d3e8bd81d0aeddbbbed0bf5', class: "sd-button__label" }, this.label), this.iconRight && (hAsync("sd-icon", { key: '04c7bc061777823a7ac6c91945a2f56caac0eb77', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor })))));
     }
     static get style() { return sdButtonCss(); }
     static get cmpMeta() { return {
@@ -6009,13 +6022,13 @@ class SdCalendar {
     }
     render() {
         const allEventNames = this.getAllEventNames();
-        return (hAsync("div", { key: '149ca9ae588a7bd2d70ecf1bf13cc639c99f7da9', class: "sd-calendar" }, hAsync("div", { key: '65f58d53fbaf35cee16007bad0b5e56dd208393e', class: "sd-calendar__header" }, hAsync("div", { key: '76709fd094edaece5ede720a983d1103801ba76d', class: "year-nav" }, hAsync("button", { key: '6d46cfa4cb1d12507ba7570cb6c0bb88bcba3402', type: "button", name: "prev-year", title: "Previous Year", onClick: () => {
+        return (hAsync("div", { key: '9a286709cd9891c60f3a9e3f96bbb10febf7f69c', class: "sd-calendar" }, hAsync("div", { key: 'cb52cef3371662e7fda7c4226c22aa1c01c7d4c1', class: "sd-calendar__header" }, hAsync("div", { key: '7e1cf45b0a75c0cc44f0b1b126017049a8af2b1d', class: "year-nav" }, hAsync("button", { key: '0edb0d7be512fdc36e5c3382c47e47cef04d75c8', type: "button", name: "prev-year", title: "Previous Year", onClick: () => {
                 this.currentYear = this.currentYear - 1;
                 this.viewChange.emit({ year: this.currentYear, month: this.currentMonth });
-            } }, hAsync("sd-icon", { key: '1319ec1fa0f2533a5d02853cb7638b1f1c10e050', name: "arrowLeft", size: "12", color: "grey_45" })), hAsync("span", { key: '678b705cd95dc499975e071f1607f26bdd50c36d', class: "year-nav__current" }, this.currentYear), hAsync("button", { key: '1f5c3a0cd6108da5ed1beb10bd6af4ea5f22cf4c', type: "button", name: "next-year", title: "Next Year", onClick: () => {
+            } }, hAsync("sd-icon", { key: 'e336280d87d459615721cc03d75b2d02d1c87ee0', name: "arrowLeft", size: "12", color: "grey_45" })), hAsync("span", { key: 'a9d9de8ef82508f0d6e998e434ecc5dcc6f84017', class: "year-nav__current" }, this.currentYear), hAsync("button", { key: '4d0d76f89442baf209628ca1708d092776ed4606', type: "button", name: "next-year", title: "Next Year", onClick: () => {
                 this.currentYear = this.currentYear + 1;
                 this.viewChange.emit({ year: this.currentYear, month: this.currentMonth });
-            } }, hAsync("sd-icon", { key: '9dff93aef0996c3679a6a8c93c0fce1ea390f4aa', name: "arrowRight", size: "12", color: "grey_45" }))), hAsync("div", { key: '9a6840420da580096fbf24d2c4df656114e23e6e', class: "month-nav" }, hAsync("button", { key: '94bf7598e5b80d6deb407f607034ed6e9f88151f', type: "button", name: "prev-month", title: "Previous Month", onClick: () => this.handleUpdateMonth('prev') }, hAsync("sd-icon", { key: '4ab19da5f6a12bf37b3c4d9aac4e2283762799e8', name: "arrowLeft", size: "12", color: "grey_45" })), hAsync("span", { key: 'c207959595c107cae05a7cbe1d169357b063a29d', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), hAsync("button", { key: 'fe319c8b26d9259bcba2b1f251bb827977e6afdc', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, hAsync("sd-icon", { key: 'af5bb1c06058b6ce22c8d7ffacace2f558bdb013', name: "arrowRight", size: "12", color: "grey_45" })))), hAsync("div", { key: 'ca66c0d7744970364f7d5e11e61014471df3325b', class: "sd-calendar__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("div", { key: day, class: "day" }, day)))), hAsync("div", { key: '9d42c252b8b42754aedc64156ec1dbe45200cef0', class: { 'sd-calendar__body': true, 'sd-calendar__body--has-events': !!this.events } }, [
+            } }, hAsync("sd-icon", { key: '065c391f62e7ba33631b61c84f032224e594f476', name: "arrowRight", size: "12", color: "grey_45" }))), hAsync("div", { key: '36de2a57b793f67a73d4125fb6574b4235d0cdf7', class: "month-nav" }, hAsync("button", { key: '99d67577999e4304ec5c414af6ec35711570e7de', type: "button", name: "prev-month", title: "Previous Month", onClick: () => this.handleUpdateMonth('prev') }, hAsync("sd-icon", { key: '2c04f97d92580d3392d6ee94b239999d889ecdab', name: "arrowLeft", size: "12", color: "grey_45" })), hAsync("span", { key: '4e2ad881df27eafa93544a1cd17e4ad0deb70cc6', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), hAsync("button", { key: 'fa365a20c253047bb51e02495b537d7404cbdda7', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, hAsync("sd-icon", { key: '0aecbf5c466465dd5674d8e69972ba1b08360305', name: "arrowRight", size: "12", color: "grey_45" })))), hAsync("div", { key: 'b60e5105e1a4ab2b44dda037645be75604d92df7', class: "sd-calendar__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("div", { key: day, class: "day" }, day)))), hAsync("div", { key: '4f60a19754da1a707569887d909a7b01163d07b8', class: { 'sd-calendar__body': true, 'sd-calendar__body--has-events': !!this.events } }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,
@@ -6026,7 +6039,7 @@ class SdCalendar {
             return (hAsync("div", { class: "sd-calendar__cell", key: `${day}_${idx}` }, hAsync("sd-date-box", { date: !day ? '' : Number(day), selected: this.value === formattedDate, isToday: today === formattedDate, disabled: !day ? true : this.isDisabledDate(formattedDate), onClick: !this.isDisabledDate(formattedDate) && day
                     ? () => this.handleDateClick(Number(day))
                     : undefined }), this.events && (hAsync("div", { class: "sd-calendar__dots" }, uniqueEvents.map(eventName => (hAsync("span", { key: eventName, class: "sd-calendar__dot", style: { backgroundColor: this.getEventColor(eventName) } })))))));
-        })), allEventNames.length > 0 && (hAsync("div", { key: 'dac97204484b1def1fd3d73939ef64ef6969bce2', class: "sd-calendar__legend" }, allEventNames.map(name => (hAsync("div", { key: name, class: "sd-calendar__legend-item" }, hAsync("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: this.getEventColor(name) } }), hAsync("span", { class: "sd-calendar__legend-label" }, name))))))));
+        })), allEventNames.length > 0 && (hAsync("div", { key: '97d41f2a28b76d97568d50cb029ff8a5eaa13f9e', class: "sd-calendar__legend" }, allEventNames.map(name => (hAsync("div", { key: name, class: "sd-calendar__legend-item" }, hAsync("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: this.getEventColor(name) } }), hAsync("span", { class: "sd-calendar__legend-label" }, name))))))));
     }
     static get watchers() { return {
         "value": [{
@@ -6249,7 +6262,7 @@ class SdCheckbox {
             '--sd-checkbox-disabled-bg': CHECKBOX_COLORS.disabled.bg,
             '--sd-checkbox-disabled-border': CHECKBOX_COLORS.disabled.border,
         };
-        return (hAsync("label", { key: 'b343ac293abfb6a7834cccc597cd30e56e3a161c', class: this.checkboxClasses, style: cssVars }, hAsync("input", { key: '89d3c5ec214af16680f2111e5e85fcb228ff2223', type: "checkbox", ref: el => { this.inputEl = el; }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), hAsync("div", { key: '8eef48a269cbbf8c479d60a53996b09cc4aa8f20', class: "sd-checkbox__bg" }, this.isChecked !== false ? (hAsync("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled ? CHECKBOX_COLORS.checked.iconDisabled : CHECKBOX_COLORS.checked.icon })) : null), this.label && hAsync("span", { key: '43bf36ec3a3890f68ef699dbb73b48eb6a98451d', class: "sd-checkbox__label" }, this.label)));
+        return (hAsync("label", { key: '4c92d46aab587f6e03f27d2a6356eca268141737', class: this.checkboxClasses, style: cssVars }, hAsync("input", { key: '22934eecb45213964374042e999ee0102fe3ae07', type: "checkbox", ref: el => { this.inputEl = el; }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), hAsync("div", { key: 'fc18ccbcfe3403a1b8c1df6adc161d8b70ef7b5c', class: "sd-checkbox__bg" }, this.isChecked !== false ? (hAsync("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled ? CHECKBOX_COLORS.checked.iconDisabled : CHECKBOX_COLORS.checked.icon })) : null), this.label && hAsync("span", { key: 'eb0d41a18406991affce5ea81f303e1a64d5b9c1', class: "sd-checkbox__label" }, this.label)));
     }
     static get watchers() { return {
         "value": [{
@@ -6426,7 +6439,7 @@ class SdDateBox {
         this.mouseOver?.emit(this.date);
     }
     render() {
-        return (hAsync("div", { key: 'b14dd7c9806828807cdfc232420a30c816ffbeb2', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (hAsync("div", { key: '0c1e27245a3589ed493b26ad17cfe1b7c64c0be3', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-date-box': true,
                 'sd-hoverable': !this.disabled || !this.selected || this.type === '',
                 'sd-date-box--disabled': this.disabled,
@@ -6437,7 +6450,7 @@ class SdDateBox {
                 'sd-date-box--in-range': this.inRange,
                 'sd-date-box--type-start': this.type === 'start',
                 'sd-date-box--type-end': this.type === 'end',
-            }, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, hAsync("div", { key: 'acb1a2d51d018913e39f8fd1fc54ab85c4ce6957', class: "sd-date-box__content" }, hAsync("div", { key: '8c9445e4268cd254d76297ac1e775697d889f721', class: "sd-date-box__label" }, this.date))));
+            }, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, hAsync("div", { key: 'c40b8e120298ca356ce2016f9b9dc72df703c6fe', class: "sd-date-box__content" }, hAsync("div", { key: '7edd94f83506397683620166322c1ab6095fedec', class: "sd-date-box__label" }, this.date))));
     }
     static get style() { return sdDateBoxCss(); }
     static get cmpMeta() { return {
@@ -7846,7 +7859,7 @@ class SdForm {
         this.submitSuccess.emit();
     }
     render() {
-        return (hAsync("form", { key: '2a72e0fb172294913a22560311e8dfcc4b151968', onSubmit: e => this.onSubmit(e), class: this.formClass }, hAsync("slot", { key: 'd0bd0c7f915e10c7fd9aa36af68b2020035a43d4' })));
+        return (hAsync("form", { key: '82112bf33b4b3090d45f2be051a4586ef81ce413', onSubmit: e => this.onSubmit(e), class: this.formClass }, hAsync("slot", { key: '56ab994680c225eb8b09b16b1a6a2bb789f470c7' })));
     }
     static get cmpMeta() { return {
         "$flags$": 772,
@@ -10102,7 +10115,7 @@ class SdRadio {
     }
     render() {
         const isSelected = String(this.val) === String(this.value);
-        return (hAsync("div", { key: 'e9d7875b19c108505e7dfd455432102c8035097f', "aria-label": String(this.val) || 'radio option', "aria-checked": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: this.getRadioClasses() }, hAsync("label", { key: `radio-${this.val}` }, hAsync("input", { key: 'cc0aa88287000b77c2329bba2371e9e4404f8203', type: "radio", name: String(this.val), value: String(this.val), checked: isSelected, disabled: this.disabled, onInput: () => this.handleRadioChange() }), this.val != null && (hAsync("span", { key: 'b2a371ef8bc4ccc57ffbbc6acc22bf4b9c391fc1', class: "sd-radio-group__label" }, this.label || String(this.val))))));
+        return (hAsync("div", { key: '7db77e527fe79fcc55c81c7d827d0cc8026214cd', "aria-label": String(this.val) || 'radio option', "aria-checked": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: this.getRadioClasses() }, hAsync("label", { key: `radio-${this.val}` }, hAsync("input", { key: 'b8f3d5f83c2ee12d7e447d2b6cf8512fcde086ef', type: "radio", name: String(this.val), value: String(this.val), checked: isSelected, disabled: this.disabled, onInput: () => this.handleRadioChange() }), this.val != null && (hAsync("span", { key: '43e56a21cab0dd9a5dbc57174dd7f309f8152660', class: "sd-radio-group__label" }, this.label || String(this.val))))));
     }
     static get style() { return sdRadioCss(); }
     static get cmpMeta() { return {
@@ -10163,7 +10176,7 @@ class SdRadioButtonGroup {
     }
     groupName = this.name || `sd-radio-button-group-${crypto.randomUUID()}`;
     render() {
-        return (hAsync("div", { key: '419d62e718ddcecb4a901f4c4bc98b560c8c4f01', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
+        return (hAsync("div", { key: '4a1f76b1f53f07f7a062d4a0ce8bf44a47c5366b', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (hAsync("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, hAsync("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && hAsync("span", { class: "sd-radio-button-group__label" }, option.label)));
@@ -10215,7 +10228,7 @@ class SdRadioGroup {
         return classes.join(' ');
     }
     render() {
-        return (hAsync("div", { key: '82979426bafc24b48858588ad186dfe069616883', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
+        return (hAsync("div", { key: 'd2296269f2d47fd35c5ad2653bdb0048be14836d', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
             return (hAsync("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
         })));
     }
@@ -10409,7 +10422,7 @@ class SdSelect extends BaseDropdownEvent {
         }
     };
     render() {
-        return (hAsync("sd-field", { key: 'f7cd0c34188712a30389d07bde7edc7875e9923b', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: '460a8a23247e24a02bd25470105598914029e205', class: {
+        return (hAsync("sd-field", { key: '94b1ba70718a366048ba4287b28f88bd42b12ee1', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: 'feaa2f25ebdf8aa919490bdf0cba88e30a9de33d', class: {
                 'sd-select': true,
                 'sd-select--disabled': this.disabled,
                 'sd-select--error': !!this.error,
@@ -11652,7 +11665,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
         });
     }
     render() {
-        return (hAsync("sd-field", { key: '350c7b2df807166a1439a2151f0f168385adac4a', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: 'cce989263e1c7dcb38216e734aabe6eea643676a', class: {
+        return (hAsync("sd-field", { key: 'b0b3eeacc1dc3244a17c91c81adc8cd79df74bf3', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: '7738287fc12ce54623d20797e70b885ba643501e', class: {
                 'sd-select-multiple-group': true,
                 'sd-select-multiple-group--open': this.isOpen,
                 'sd-select-multiple-group--disabled': this.disabled,
@@ -13699,16 +13712,16 @@ class SdTable {
         return (hAsync("td", { key: `virtual-${position}-spacer-${rowIdx}`, class: "sd-table__virtual-spacer", style: this.getSpacerCellStyle(spacerWidth), "aria-hidden": "true" }, hAsync("div", { class: "sd-table__skeleton-cell" })));
     }
     render() {
-        return (hAsync(Fragment, { key: 'f3e4930d36d080fd546dddc1e80190b831e93012' }, hAsync("div", { key: 'ad2f798951631319190d93f83e25b87f871e58de', class: "sd-table__wrapper", style: {
+        return (hAsync(Fragment, { key: '51c6e388c76a39b791e54e350d28a7ee7dd58b9e' }, hAsync("div", { key: '8d43403b53e16173c559f6636bd5b74f3640b770', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, hAsync("div", { key: 'c4b6d4080f1416d1c88ab1413c66848bdafe9019', class: "sd-table__container", style: {
+            } }, hAsync("div", { key: '43d8dba10880816cb414b1df24493d5617e31bec', class: "sd-table__container", style: {
                 '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, hAsync("div", { key: '3aacc27970b0c6d8b700063c0af7c57175e2cb22', class: {
+            } }, hAsync("div", { key: 'a5c9e235a77dad5d3b061951e489ceafaee2d7a6', class: {
                 'sd-table__middle': true,
                 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
                 'sd-table__middle--loading': this.isLoading,
-            } }, this.isLoading && (hAsync("div", { key: '25fca304a4e8ebf43aeeff20de3e3446d25e1ffb', class: "sd-table__middle--loading__spinner" }, hAsync("sd-loading-spinner", { key: '48b0adad60cf422b884557b53097c28a4f0b8879' }))), hAsync("table", { key: 'ec4328a1f43c865de642cc5814fbdef6a374b7e3', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (hAsync("div", { key: 'ba362ecb9fb8134a15ff3d0a3b8e6a523e94166a', class: "sd-table__bottom" }, hAsync("div", { key: 'ca5c2e0b19a1e301ac159588436ef24eecfb6365', class: "sd-table__no-data" }, hAsync("slot", { key: '68564a60a05833ba87743212d7189eef6e179fb4', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (hAsync("div", { key: '88c3c7362234c20a60f6437ecd79d4c75b2caa6e', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: 'c3c8c435fcb752f2b1139981bb764cf4dfb153ab', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: '03801039397a31321e5af96c2bd2d2900151240e', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
+            } }, this.isLoading && (hAsync("div", { key: 'b2fd19d29cb053e5747a1ff55ff109e5e154a8e0', class: "sd-table__middle--loading__spinner" }, hAsync("sd-loading-spinner", { key: '2f16c480b25032a9547ecdca61ce1c3838eab7ba' }))), hAsync("table", { key: 'ece092ed1ecb20a7ea7b131f8f6a4954b5bad1e3', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (hAsync("div", { key: '076839c1e278879a01bfae3c42b62565b30796f7', class: "sd-table__bottom" }, hAsync("div", { key: 'e3dd7080da396abb350d31f7125f4a6f04c2f31b', class: "sd-table__no-data" }, hAsync("slot", { key: '81181ee58a7cb9ec8c89fa0e6cf37ef50e22f019', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (hAsync("div", { key: '14e4653021886d3d7241806429ff02430c5ff09f', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: 'e266a9bffeaf7ba012945e0866928cee7b8220d4', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: '5ef017820acdcca279c9e1b46b79b4ba44b7dfca', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
     }
     static get watchers() { return {
         "columns": [{
@@ -13829,7 +13842,7 @@ class SdTabs {
         return `square_${this.size}_${color}`;
     }
     render() {
-        return (hAsync("div", { key: '74a25ee4311c84e79f4918b884385f27d6af6313', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
+        return (hAsync("div", { key: '826e7c3a694d1243506fe8361553d476e21e71fb', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
             const badgeName = this.getBadgeName(tab);
             return (hAsync("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, hAsync("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && hAsync("sd-tag", { name: badgeName, label: tab.badge.toString() })));
         })));
@@ -14155,7 +14168,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 +14193,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 +14232,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 +14257,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 +14308,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 +14398,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 +14653,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 +14728,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 +14784,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 +14912,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.56",
  "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-17429476.entry.js

@@ -1 +0,0 @@
-import{r as a,c as d,h as o}from"./p-DsU722JF.js";import{m as t}from"./p-mO5GcwI3.js";const{modal:e}=t,i=e.action,s={radius:Number(e.radius),bg:e.bg,headerPaddingX:Number(i.header.paddingX),headerPaddingY:Number(i.header.paddingY),headerGap:Number(i.header.gap),bodyPaddingX:Number(i.body.paddingX),bodyPaddingBottom:Number(i.body.paddingBottom),footerPaddingX:Number(i.footer.paddingX),footerPaddingY:Number(i.footer.paddingY),footerGap:Number(i.footer.gap),footerBg:i.footer.bg,footerBorder:i.footer.border},n={color:i.title.color,fontFamily:i.title.typography.fontFamily,fontWeight:i.title.typography.fontWeight,fontSize:Number(i.title.typography.fontSize),lineHeight:Number(i.title.typography.lineHeight)},l=class{constructor(o){a(this,o),this.close=d(this,"sdClose",7),this.ok=d(this,"sdOk",7)}modalTitle="";buttonLabel="확인";close;ok;render(){return o("div",{key:"c8d2ab2b26ed09c4e7af102d5c63bd15bea93556",class:"sd-action-modal",style:{"--sd-action-modal-radius":`${s.radius}px`,"--sd-action-modal-bg":s.bg,"--sd-action-modal-header-padding-x":`${s.headerPaddingX}px`,"--sd-action-modal-header-padding-y":`${s.headerPaddingY}px`,"--sd-action-modal-header-gap":`${s.headerGap}px`,"--sd-action-modal-body-padding-x":`${s.bodyPaddingX}px`,"--sd-action-modal-body-padding-bottom":`${s.bodyPaddingBottom}px`,"--sd-action-modal-footer-padding-x":`${s.footerPaddingX}px`,"--sd-action-modal-footer-padding-y":`${s.footerPaddingY}px`,"--sd-action-modal-footer-gap":`${s.footerGap}px`,"--sd-action-modal-footer-bg":s.footerBg,"--sd-action-modal-footer-border":s.footerBorder,"--sd-action-modal-title-color":n.color,"--sd-action-modal-title-font-family":n.fontFamily,"--sd-action-modal-title-font-weight":n.fontWeight,"--sd-action-modal-title-font-size":`${n.fontSize}px`,"--sd-action-modal-title-line-height":`${n.lineHeight}px`}},o("header",{key:"0a2b8ed31201b01570002fc22acd721bfca7cb94",class:"sd-action-modal__header"},o("h2",{key:"434595ee377242447556598a9e60e94fb776f8a3",class:"sd-action-modal__title"},this.modalTitle),o("div",{key:"e60988af90d0abc16508144cb45e2334e096539c",class:"sd-action-modal__header-sub"},o("slot",{key:"74aabd257bfcbc1458446d8712df399573cecca7",name:"header-sub-title"})),o("sd-ghost-button",{key:"b4937b9d686047ae8e9bfcd12413dbf42f4e90ad",class:"sd-action-modal__close",icon:"close",ariaLabel:"close",onClick:()=>this.close.emit()})),o("div",{key:"9a0a7b4927a4edb4252f843dd1bd71037dbb94dd",class:"sd-action-modal__body"},o("slot",{key:"cc92c17e415edf18f990d633fbdaf70dd757da72",name:"body"})),o("footer",{key:"35ff49a26c607430e0bd0553aa6d350cbd6e9423",class:"sd-action-modal__footer"},o("div",{key:"cd346a4a7195ad262f2298b512dfac5b3cabff2f",class:"sd-action-modal__footer-sub"},o("slot",{key:"207c68c831e06e05cc2d17c3ac93aefd47ed9b28",name:"bottom-sub-content"})),o("sd-button-v2",{key:"f2de8110262e9bc403a3d65ba9324c3b9a6225c9",name:"primary_md",label:this.buttonLabel,onSdClick:()=>this.ok.emit()})))}};l.style="sd-action-modal{display:block;width:fit-content;min-width:520px}sd-action-modal .sd-action-modal{position:relative;display:flex;flex-direction:column;border-radius:var(--sd-action-modal-radius);background:var(--sd-action-modal-bg);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);overflow:hidden}sd-action-modal .sd-action-modal__header{display:flex;align-items:center;gap:var(--sd-action-modal-header-gap);padding:var(--sd-action-modal-header-padding-y) calc(var(--sd-action-modal-header-padding-x) + 20px) var(--sd-action-modal-header-padding-y) var(--sd-action-modal-header-padding-x)}sd-action-modal .sd-action-modal__title{margin:0;color:var(--sd-action-modal-title-color);font-family:var(--sd-action-modal-title-font-family);font-weight:var(--sd-action-modal-title-font-weight);font-size:var(--sd-action-modal-title-font-size);line-height:var(--sd-action-modal-title-line-height);white-space:nowrap}sd-action-modal .sd-action-modal__header-sub{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px}sd-action-modal .sd-action-modal__header-sub:empty{display:none}sd-action-modal .sd-action-modal__close{position:absolute;top:16px;right:16px;cursor:pointer}sd-action-modal .sd-action-modal__body{flex:1 1 auto;min-height:0;padding:0 var(--sd-action-modal-body-padding-x) var(--sd-action-modal-body-padding-bottom);overflow:auto}sd-action-modal .sd-action-modal__footer{display:flex;align-items:center;gap:var(--sd-action-modal-footer-gap);padding:var(--sd-action-modal-footer-padding-y) var(--sd-action-modal-footer-padding-x);background:var(--sd-action-modal-footer-bg);border-top:1px solid var(--sd-action-modal-footer-border)}sd-action-modal .sd-action-modal__footer>sd-button-v2{margin-left:auto}sd-action-modal .sd-action-modal__footer-sub{display:flex;align-items:center;gap:8px;min-width:0}sd-action-modal .sd-action-modal__footer-sub:empty{display:none}";export{l as sd_action_modal}

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}