@sellmate/design-system 1.0.72 → 1.0.74

package/hydrate/index.js

@@ -5711,7 +5711,7 @@ class SdBarcodeInput {
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
             '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
         };
-        return (hAsync("sd-field", { key: 'b1f0cde9ef54653ee1c71cda192b1bdfaf483c56', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, 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, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '41429c5f9218b80374c859725973463a89d6395c', class: "sd-barcode-input__content" }, hAsync("slot", { key: '55408b20fe1ed73cce03068ed21b019f106cb730', name: "prefix" }), hAsync("input", { key: '96a99d5319f15691da47b0f16218cfed6009bf5e', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '10b108a25cedd0f5ec6c7184bf7b776c96106b08', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-ghost-button", { key: 'bdf086a67e29d90e4e91fd40530ab29063c5a180', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
+        return (hAsync("sd-field", { key: 'c537aef39f971023f90d7d0d7ad6cb6819b06b48', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, 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, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '2ca7874dd2d9965f3246746a6f0311ce6cc6fe8e', class: "sd-barcode-input__content" }, hAsync("slot", { key: 'dfed2f18620c5ee6902e1f2083b2e046190ad852', name: "prefix" }), hAsync("input", { key: '80dbd54234b7a1b0db8ae8b3165653f63e8c9039', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: 'd0b0c22126506e16b23ce9cce1a280366d7d4f4c', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-ghost-button", { key: '41ae6b492877ca5c3aa1083372878c9c41f694e3', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';
@@ -5755,6 +5755,7 @@ class SdBarcodeInput {
             "labelTooltip": [1, "label-tooltip"],
             "labelTooltipProps": [16],
             "inputStyle": [16],
+            "name": [1],
             "internalValue": [32],
             "sdGetNativeElement": [64],
             "sdValidate": [64],
@@ -7743,7 +7744,6 @@ class SdDatePicker {
     addonAlign = 'start';
     hint = '';
     errorMessage = '';
-    fieldName = '';
     rules = [];
     error = false;
     icon = undefined;
@@ -7758,7 +7758,7 @@ class SdDatePicker {
     triggerRef;
     formField;
     closeAnimationTimer;
-    internalName = nanoid$1();
+    name = nanoid$1();
     watchIsOpen(newValue) {
         this.focused = newValue;
     }
@@ -7819,9 +7819,9 @@ class SdDatePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (hAsync("sd-field", { key: 'f301bd573e88d05c4588642370f062415698b9d6', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, 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: '0f572527494a711f01248c8978392ee4cf53cfef', class: "sd-date-picker", ref: el => {
+        return (hAsync("sd-field", { key: '97dcd4d3065ba7c0fa587b3d533dcda82b87c188', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, 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: '9c0a6874eb6fbf3e8a928048f189d3b139e385df', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, hAsync("sd-date-picker-trigger", { key: '303a3412997821494c667d09c3aa1f11d47c9c1f', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'd9002fc84bd35af41393ddfd86f091d109f3f8bb', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-picker-calendar", { key: 'e4081f0764cc3c4c706caf09f93b5ec5d596f042', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, hAsync("sd-date-picker-trigger", { key: 'e54065e86cb36c8abed1041a2d13edcbba861d8f', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '96c2aa277f54315ac2f6e29b861ebb94b3cc4f75', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-picker-calendar", { key: 'ea2513fb3d150a53895b6f657a7a6acc5541045f', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -7845,12 +7845,12 @@ class SdDatePicker {
             "addonAlign": [1, "addon-align"],
             "hint": [1],
             "errorMessage": [1, "error-message"],
-            "fieldName": [1, "field-name"],
             "rules": [16],
             "error": [1028],
             "icon": [16],
             "labelTooltip": [1, "label-tooltip"],
             "labelTooltipProps": [16],
+            "name": [1],
             "isOpen": [32],
             "isAnimatingOut": [32],
             "focused": [32],
@@ -8126,7 +8126,6 @@ class SdDateRangePicker {
     addonAlign = 'start';
     hint = '';
     errorMessage = '';
-    fieldName = '';
     rules = [];
     error = false;
     icon = undefined;
@@ -8141,7 +8140,7 @@ class SdDateRangePicker {
     triggerRef;
     formField;
     closeAnimationTimer;
-    internalName = nanoid$1();
+    name = nanoid$1();
     watchIsOpen(newValue) {
         this.focused = newValue;
     }
@@ -8207,9 +8206,9 @@ class SdDateRangePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (hAsync("sd-field", { key: '34c4d9ef2ba50f951fc6b6b09215e750ac61cd87', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, 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: 'c92ab61d144c893077a9c81922ac24eff93314dd', class: "sd-date-range-picker", ref: el => {
+        return (hAsync("sd-field", { key: '221d930a7243334d00b281724d3c204159e721a4', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, 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: '6bc1723f00169bb31cc1a153824fc8bbea6caf98', class: "sd-date-range-picker", ref: el => {
                 this.triggerRef = el;
-            } }, hAsync("sd-date-picker-trigger", { key: '487b8a1af6e8dee063d70ffc030c314037741d74', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'f22c979943cebcc82e8d4d9f86037621e8c3983a', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-range-picker-calendar", { key: 'c19548d0074556f90c740b6ba35338ea4d41dd18', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, hAsync("sd-date-picker-trigger", { key: 'd1805fe995410ecfce8ca7854cfac5055474d44a', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '22f42d9941e315d598233939a010034138e5bcbb', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-range-picker-calendar", { key: '192a66291e9f318c4bba267b98a427fd0819b1be', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -8234,12 +8233,12 @@ class SdDateRangePicker {
             "addonAlign": [1, "addon-align"],
             "hint": [1],
             "errorMessage": [1, "error-message"],
-            "fieldName": [1, "field-name"],
             "rules": [16],
             "error": [1028],
             "icon": [16],
             "labelTooltip": [1, "label-tooltip"],
             "labelTooltipProps": [16],
+            "name": [1],
             "isOpen": [32],
             "isAnimatingOut": [32],
             "focused": [32],
@@ -9254,7 +9253,7 @@ class SdFilePicker {
     maxTotalSize;
     maxFiles;
     // sd-field 패스스루 props
-    name = '';
+    name = nanoid$1();
     label = '';
     labelWidth = '';
     addonLabel = '';
@@ -9695,22 +9694,19 @@ class SdForm {
         }
         this.fields = this.fields.filter(field => field !== fieldOrName);
     }
-    async sdValidate() {
-        const fieldValidationResults = await Promise.all(this.fields.map(async (field) => {
-            const valid = await field.sdValidate();
-            return {
-                field,
-                valid,
-            };
-        }));
-        const isInValid = fieldValidationResults.find(result => {
-            return !result.valid;
-        });
-        if (isInValid) {
-            isInValid.field.sdFocus();
-            isInValid.field.sdScrollIntoView?.();
+    async runValidation() {
+        const results = await Promise.all(this.fields.map(async (field) => ({ field, valid: await field.sdValidate() })));
+        const invalidFields = results.filter(r => !r.valid).map(r => r.field);
+        if (invalidFields.length > 0) {
+            const first = invalidFields[0];
+            first.sdFocus();
+            first.sdScrollIntoView?.();
         }
-        return !isInValid;
+        return { valid: invalidFields.length === 0, invalidFields };
+    }
+    async sdValidate() {
+        const { valid } = await this.runValidation();
+        return valid;
     }
     async sdReset() {
         this.fields.forEach(f => f.sdReset());
@@ -9720,15 +9716,15 @@ class SdForm {
     }
     async onSubmit(e) {
         e.preventDefault();
-        const valid = await this.sdValidate();
+        const { valid, invalidFields } = await this.runValidation();
         if (!valid) {
-            this.sdValidationError.emit();
+            this.sdValidationError.emit({ names: invalidFields.map(f => f.name) });
             return;
         }
         this.sdSubmit.emit();
     }
     render() {
-        return (hAsync("form", { key: 'f8276276d117709062f263c1ebbf814f398ed06d', onSubmit: e => this.onSubmit(e), class: this.formClass }, hAsync("slot", { key: '24a4bd4c3140c89b49d6763113068ce1fb03cc6e' })));
+        return (hAsync("form", { key: 'c3fafb4169bddbd6911914ebc694a977fa11b511', onSubmit: e => this.onSubmit(e), class: this.formClass }, hAsync("slot", { key: '5be1d23c35c052fdf5d8fb961fa931074eb59ee6' })));
     }
     static get cmpMeta() { return {
         "$flags$": 772,
@@ -10820,12 +10816,12 @@ class SdInput {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (hAsync("sd-field", { key: '89ec87626ee611a233cfd6673471bfb856bf9c7b', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, 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, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '092ec9af34a505e2be74f35e3bf48002067b860f', class: "sd-input__content" }, hAsync("slot", { key: 'cd3ae3cdda60df770ce690f7af7201e1e04515a1', name: "prefix" }), hAsync("input", { key: 'bcce3bdab7fad50c38c3c1a7841dcaf6fbe2c735', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '6491b3ccdc5a9a993980d4a3668b0c62fc28e064', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (hAsync("sd-ghost-button", { key: 'e24bfdd0706bb6cb05b3a6e6edce7e9bbf79df38', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (hAsync("sd-field", { key: 'ff73dfa4d23c7bf1a29f853d50e0d31bddb094ea', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, 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, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '0a986cccfbd55984a51676cbf5393634819e766d', class: "sd-input__content" }, hAsync("slot", { key: '068bfd70601f3b191a51bb45ac02679acf99a069', name: "prefix" }), hAsync("input", { key: '54dbd7b7e4bffcfa25b9d68800fb334c0dfa0da0', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: 'c0e03839176c6612eb8b0532bce3341de3db90c3', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (hAsync("sd-ghost-button", { key: '0019f58900c721c52216f7686b8b198f855c76ec', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '561ec06be116aa1c083dd82414f43a284307053b', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '63dbd526a1a9e67bd41483211bf9a005dc0dc93f', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled)
                     return;
                 this.passwordVisible = !this.passwordVisible;
@@ -10875,6 +10871,7 @@ class SdInput {
             "labelTooltip": [1, "label-tooltip"],
             "labelTooltipProps": [16],
             "inputStyle": [16],
+            "name": [1],
             "internalValue": [32],
             "passwordVisible": [32],
             "sdGetNativeElement": [64],
@@ -11851,12 +11848,12 @@ class SdNumberInput {
             '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
             '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
         };
-        return (hAsync("sd-field", { key: '04aea42c0e7ae2c81a50d0fbb106d5834d42f7c3', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, 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, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '8089ebd24ce12922d73c5f7909d3ef1d944e99d3', class: "sd-number-input__content" }, this.useButton && (hAsync("button", { key: '27b630b4e12ba8f107b8c1053ab89f39b5df966f', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'b916a9f5f4c2579b9d3c3365790b29eb98f55c84', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+        return (hAsync("sd-field", { key: 'a62a0abbef4e817173d3e627d61c36523c2db81a', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, 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, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'd395366da25ef5ab333e4b314093a89e41519786', class: "sd-number-input__content" }, this.useButton && (hAsync("button", { key: 'eb97c4c29165e6237064bbce54ea2031c756fe12', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '7cd260e4356d320825a75350982174446b40e15c', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (hAsync("span", { key: '6e669bfdd4cf68d9ca6182748cd9e60db9ae36f2', class: "sd-number-input__prefix" }, this.inputPrefix)), hAsync("input", { key: '0fe251f87da94d35d50986ec8381b8e9df85d70e', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (hAsync("span", { key: 'a25c707b127f63239dbb92be5e9d569e1be58005', class: "sd-number-input__prefix" }, this.inputPrefix)), hAsync("input", { key: '0dc0864a4434122a717041028c732aa5d370f65c', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 textAlign: this.useButton ? 'center' : 'right',
                 ...this.inputStyle,
-            } }), this.inputSuffix && (hAsync("span", { key: '0842beeb5d5834909909b5120af69cdbe3fac299', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (hAsync("button", { key: 'dd2706a9882164812d65fe35e05e5865bb4fc4c8', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '578b0030421db07da89717039ae9773d537db5e6', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && (hAsync("span", { key: 'd31337cdacceb84ee6347a2c38210ad491667d2c', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (hAsync("button", { key: '217fcbc2b75e76adb0ed969a719e632b5eb74b27', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '48ff6d0417aadcd975a6863a0003e63ca525cdfd', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }
@@ -11900,6 +11897,7 @@ class SdNumberInput {
             "error": [1028],
             "focused": [1028],
             "hovered": [1028],
+            "name": [1],
             "internalValue": [32],
             "displayValue": [32],
             "sdValidate": [64],
@@ -13056,7 +13054,7 @@ class SdSelect extends BaseDropdownEvent {
         }
     };
     render() {
-        return (hAsync("sd-field", { key: '6939161d0edb5eabca307b3883e02a53a29e66c4', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, addonAlign: this.addonAlign, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: 'a57d17cb3ff775c724f3a6c13025c04e031de45f', class: {
+        return (hAsync("sd-field", { key: '28b4667a386236c2486af08f636ede3dc6c41f91', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, addonAlign: this.addonAlign, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: 'ccee78ca4a773c521634e4054ce3b3d8e9713362', class: {
                 'sd-select': true,
                 'sd-select--disabled': this.disabled,
                 'sd-select--error': !!this.error,
@@ -13108,6 +13106,7 @@ class SdSelect extends BaseDropdownEvent {
             "rules": [16],
             "error": [4],
             "optionRenderer": [16],
+            "name": [1],
             "isOpen": [32],
             "itemIndex": [32],
             "isScrolled": [32],
@@ -13592,7 +13591,7 @@ class SdSelectGroup extends BaseDropdownEvent {
         });
     }
     render() {
-        return (hAsync("sd-field", { key: 'd4d80ad428cc1eb5a1d6878354c213bd25ea944a', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, addonAlign: this.addonAlign, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: '1f9a8c1c9e34635ce7c1f91fc8d456b84a668c63', class: {
+        return (hAsync("sd-field", { key: 'aa5470eaba6489d6eb380996eeb0c0c985e20fbf', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, addonAlign: this.addonAlign, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: '90d4cc0bde3240be6a8406c9ea6c82c2fdad3482', class: {
                 'sd-select-group': true,
                 'sd-select-group--open': this.isOpen,
                 'sd-select-group--disabled': this.disabled,
@@ -13671,6 +13670,7 @@ class SdSelectGroup extends BaseDropdownEvent {
             "optionStyle": [16],
             "labelStyle": [16],
             "optionRenderer": [16],
+            "name": [1],
             "filteredOptions": [32],
             "isOpen": [32],
             "searchText": [32],
@@ -14629,7 +14629,7 @@ class SdSelectV2 {
     static PORTAL_OFFSET_Y = 4;
     static CLOSE_ANIMATION_DURATION = 150;
     get el() { return getElement(this); }
-    name = 'default';
+    type = 'default';
     value = null;
     options = [];
     placeholder = '선택';
@@ -14643,7 +14643,6 @@ class SdSelectV2 {
     error = false;
     hint = '';
     errorMessage = '';
-    fieldName = '';
     rules = [];
     icon = undefined;
     labelTooltip = '';
@@ -14678,14 +14677,14 @@ class SdSelectV2 {
     triggerRef;
     triggerComponentRef;
     closeAnimationTimer;
-    internalName = nanoid$1();
+    name = nanoid$1();
     triggerHasFocus = false;
     watchIsOpen(newValue) {
         this.syncFocusedState(newValue);
         this.dropDownShow.emit({ isOpen: newValue });
     }
     get isMulti() {
-        return this.name === 'multi' || this.name === 'multi_depth';
+        return this.type === 'multi' || this.type === 'multi_depth';
     }
     get displayText() {
         if (this.isMulti) {
@@ -14861,15 +14860,15 @@ class SdSelectV2 {
                 this.closeDropdown();
             },
         };
-        return (hAsync("sd-field", { key: '183d00eba196e665b851fd45d0bbdcfe9ed3a7a5', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (hAsync("sd-field", { key: '76b432c04fa0f9fca70e63e9c7d16ed768fc9dd1', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, hAsync("div", { key: '304b37a0c04af29f77d7cd26c2b95abcdba4e373', class: "sd-select-v2", ref: el => {
+            } }, hAsync("div", { key: 'dba3a313b7e0171a441540877aacdc7d5c2e7f04', class: "sd-select-v2", ref: el => {
                 this.triggerRef = el;
-            } }, hAsync("sd-select-v2-trigger", { key: '7e146d8b5b08da4703c5e5ba65c6930ca0e8addd', ref: el => {
+            } }, hAsync("sd-select-v2-trigger", { key: '7790357558f174eb70b15ed72574f738b062c479', ref: el => {
                 this.triggerComponentRef = el;
-            }, displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '97039b0f6efe8000494b388152b8e8ae99a77b23', ...portalProps }, hAsync("sd-select-v2-listbox", { key: 'aafdb2097795bebe1fdf45183cc70ee588a776e6', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            }, displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '672f3583b24e363b74d184d13866ee19a78b04d9', ...portalProps }, hAsync("sd-select-v2-listbox", { key: 'f71d95ad06c74356e4d5ce94da7e720c002390b6', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -14881,7 +14880,7 @@ class SdSelectV2 {
         "$flags$": 512,
         "$tagName$": "sd-select-v2",
         "$members$": {
-            "name": [1],
+            "type": [1],
             "value": [1032],
             "options": [16],
             "placeholder": [1],
@@ -14895,13 +14894,13 @@ class SdSelectV2 {
             "error": [1028],
             "hint": [1],
             "errorMessage": [1, "error-message"],
-            "fieldName": [1, "field-name"],
             "rules": [16],
             "icon": [16],
             "labelTooltip": [1, "label-tooltip"],
             "labelTooltipProps": [16],
             "emitValue": [4, "emit-value"],
             "width": [8],
+            "name": [1],
             "isOpen": [32],
             "isAnimatingOut": [32],
             "triggerWidth": [32],
@@ -15264,7 +15263,7 @@ class SdSelectV2Listbox {
         registerInstance(this, hostRef);
         this.optionSelect = createEvent(this, "sdOptionSelect", 7);
     }
-    name = 'default';
+    type = 'default';
     options = [];
     value = null;
     emitValue = false;
@@ -15280,10 +15279,10 @@ class SdSelectV2Listbox {
     keydownAttached = false;
     suppressHover = false;
     get isDepth() {
-        return this.name === 'default_depth' || this.name === 'multi_depth';
+        return this.type === 'default_depth' || this.type === 'multi_depth';
     }
     get isMulti() {
-        return this.name === 'multi' || this.name === 'multi_depth';
+        return this.type === 'multi' || this.type === 'multi_depth';
     }
     get showSearch() {
         const count = this.isDepth ? countLeaves(this.options) : this.options.length;
@@ -15565,7 +15564,7 @@ class SdSelectV2Listbox {
         "$flags$": 521,
         "$tagName$": "sd-select-v2-listbox",
         "$members$": {
-            "name": [1],
+            "type": [1],
             "options": [16],
             "value": [8],
             "emitValue": [4, "emit-value"],
@@ -17192,7 +17191,7 @@ class SdTextarea {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (hAsync("sd-field", { key: '1f0a9119fae56ef1fc7c558635e042239644ec22', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, 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: '8ef4635e280dd8dc2c0b7c0e7c3feef5b1c66c40', class: "sd-textarea__content" }, hAsync("textarea", { key: 'd9e2a569cbe36cb8f4c812eec19f375e41f70108', 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 }))));
+        return (hAsync("sd-field", { key: '345a70f335ee103a4e45c75e17559359beec01c9', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, 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: 'dc09d61d06f3cefb15dce980e293a266fdf3d79d', class: "sd-textarea__content" }, hAsync("textarea", { key: '085de248d7376e0d19d3588bc836bd5ad17cb335', 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": [{
@@ -17232,6 +17231,7 @@ class SdTextarea {
             "status": [1],
             "focused": [1028],
             "hovered": [1028],
+            "name": [1],
             "internalValue": [32],
             "sdGetNativeElement": [64],
             "sdValidate": [64],