@sellmate/design-system 1.0.63 → 1.0.65

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

@@ -67,6 +67,7 @@ const SdInput = class {
     hovered = false;
     // props - label
     label = '';
+    labelWidth = '';
     icon = undefined;
     labelTooltip = '';
     labelTooltipProps = null;
@@ -148,12 +149,12 @@ const SdInput = class {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (index.h("sd-field", { key: 'a96aaa54fe54c9d9ee5ab31537e1b6fb7b612c8f', 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, 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 }, index.h("label", { key: 'd806549d41156ab414d04664e6887075ef97f307', class: "sd-input__content" }, index.h("slot", { key: '29f447128f6211792742a252d1ea087b5a5b413e', name: "prefix" }), index.h("input", { key: 'e1870c7573268e97eac820d7508e134c13c32b40', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), index.h("slot", { key: 'f12b87b5d30878a55e1224abf789b924c1fd3a0c', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (index.h("sd-ghost-button", { key: 'dad4be5dc6e8239dedc094fe0eb02a2587dd9f9c', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (index.h("sd-field", { key: 'a72ce8674fb761de7cd188e99cc19d5f3731a899', name: this.name, label: this.label, labelWidth: this.labelWidth, 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, 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 }, index.h("label", { key: 'e5cbdbc2b233bda57488ead19401d277891301ae', class: "sd-input__content" }, index.h("slot", { key: 'a327005770df94ef61f2e08071e77407a24b7b5c', name: "prefix" }), index.h("input", { key: '36301cd586151b8c607e14715b26fca467f68c13', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), index.h("slot", { key: '532e201860db0709572502aa4275fc9251e1aeb1', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (index.h("sd-ghost-button", { key: 'cc6132852c65f0597cbe25751c7246b1cdad3096', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (index.h("sd-ghost-button", { key: '71c5cf7565ad13f08173fc10e828ddf5f8f546b8', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (index.h("sd-ghost-button", { key: 'fd3d567346cf5771ec28c73f15cdf0db15835766', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled)
                     return;
                 this.passwordVisible = !this.passwordVisible;

package/dist/cjs/sd-number-input.cjs.entry.js

@@ -124,6 +124,7 @@ const SdNumberInput = class {
     useDecimal = false;
     value = null;
     label;
+    labelWidth = '';
     addonLabel = '';
     placeholder = '입력해 주세요.';
     disabled = false;
@@ -383,12 +384,12 @@ const SdNumberInput = class {
             '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
             '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
         };
-        return (index.h("sd-field", { key: 'e05cc16f4dde4fd82d11a811b578723af2f5b092', 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, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: 'db4f02b5f882acfe481698745ca374874643efbd', class: "sd-number-input__content" }, this.useButton && (index.h("button", { key: 'c83df0e915849792427b2f3609937bb0b62aae15', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: 'b7ea0704c9d114b5e1b8eca29a408efb5e532b7e', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+        return (index.h("sd-field", { key: 'f81b01b27960130cbf6b37a29fc0ddc11750768e', name: this.name, label: this.label, labelWidth: this.labelWidth, 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, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: '0f9b5a0b966c7d51d5913c61a585ff789fa4973f', class: "sd-number-input__content" }, this.useButton && (index.h("button", { key: 'b037ee3062253bf229f9639dd04c7475657fabb6', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: '39a9f73a15008a481e758e663e027cd4f6454146', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (index.h("span", { key: '57ed4229c30d52b6925ebaccd816cd8496ab60c0', class: "sd-number-input__prefix" }, this.inputPrefix)), index.h("input", { key: 'b018a810ca085218beb7acbba0187543c8369236', 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 && (index.h("span", { key: '050334ce25bb767e7f11dca886d4aeecaa1ed3dc', class: "sd-number-input__prefix" }, this.inputPrefix)), index.h("input", { key: 'a72697d136eeee52ef23fee6ee2017b6dd37e54c', 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 && (index.h("span", { key: '5db549a3cc81b98123cdec69b866b25d961f210f', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (index.h("button", { key: '8b0b8c4ba46cf1cc5fba21f7fa8c113ca215b265', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: '77012f79ba5a3a5550af844149bb35fa1e165533', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && (index.h("span", { key: '845202622b3377add18782d96d0af0c49caf95ec', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (index.h("button", { key: '208c976c1b755bec0cd7efb5ceacb3e07dce3a7d', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: 'fe9848c8f044d01378dc183a80d3f81eb56a67f9', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }

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

@@ -108,6 +108,7 @@ const SdSelectV2 = class {
     dropdownHeight = '260px';
     disabled = false;
     label = '';
+    labelWidth = '';
     addonLabel = '';
     error = false;
     hint = '';
@@ -301,13 +302,13 @@ const SdSelectV2 = class {
                 this.closeDropdown();
             },
         };
-        return (index.h("sd-field", { key: 'b2a7f6ff2b4844069703400d68e9e736689d130a', name: this.fieldName || this.internalName, 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (index.h("sd-field", { key: 'c9f08598c8f9852ab4000f056621dfef238e16de', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, index.h("div", { key: 'f832e4df90c6874c56e1f0ec5b109a7a77f3d0d1', class: "sd-select-v2", ref: el => {
+            } }, index.h("div", { key: '302103a425963e5d577b01ad179d5af82e6f30b1', class: "sd-select-v2", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-select-v2-trigger", { key: '9f2eaff8ca1ece8bec8fe635372e961a42ec0f80', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '2b8c31b66ac81a51dbd7657d5bbeeeaeb3ff0c83', ...portalProps }, index.h("sd-select-v2-listbox", { key: '8d16190fff39d403c74966e197c09afb55e9b9f8', 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) })))));
+            } }, index.h("sd-select-v2-trigger", { key: 'a22bca400e5d10ee29e569da04d36b9291a1dade', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '0df4ad35bb284298708a0c1e11ce0e3c28d16ed8', ...portalProps }, index.h("sd-select-v2-listbox", { key: '90c18612d553342be091a30e05194bab91407c76', 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) })))));
     }
     static get watchers() { return {
         "isOpen": [{

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

@@ -12,7 +12,7 @@ const SdPortal = class {
     parentRef = null;
     offset = [0, 4];
     viewportPadding = 0;
-    zIndex = 9999;
+    zIndex = 10000;
     open = false;
     close;
     container;
@@ -58,7 +58,7 @@ const SdPortal = class {
             position: 'absolute',
             top: '0',
             left: '0',
-            zIndex: (this.zIndex ?? 9999).toString(),
+            zIndex: (this.zIndex ?? 10000).toString(),
             opacity: '0',
             transition: 'opacity 0.15s ease-out',
             boxSizing: 'border-box',
@@ -227,7 +227,7 @@ const SdPortal = class {
         this.close.emit();
     }
     render() {
-        return index.h("slot", { key: 'e9862350592ae8ea0741b4639a94e288f0b302f2' });
+        return index.h("slot", { key: '7213237baa73430dbf3d01aeb6f7a3e5fe173ecb' });
     }
     static get watchers() { return {
         "open": [{

package/dist/cjs/sd-select-group.cjs.entry.js

@@ -28,6 +28,7 @@ const SdSelectGroup = class extends baseDropdownEvent.BaseDropdownEvent {
     searchable = false;
     // props - label
     label = '';
+    labelWidth = '';
     addonLabel = '';
     icon = undefined;
     labelTooltip = '';
@@ -275,7 +276,7 @@ const SdSelectGroup = class extends baseDropdownEvent.BaseDropdownEvent {
         });
     }
     render() {
-        return (index.h("sd-field", { key: 'b1b62a2e99fda1f0fbc4f8b3ede5af95a9ed09aa', 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), style: { '--field-width': this.width || '200px' } }, index.h("div", { key: '91f30fd84c70010030813f2d0cd9e86939e185d7', class: {
+        return (index.h("sd-field", { key: '1e6a0f9947f5d137bb65844fe666c07b4eefb2f7', label: this.label, labelWidth: this.labelWidth, 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), style: { '--field-width': this.width || '200px' } }, index.h("div", { key: '62dcd2f37c2eda0e51f2e77de36ece6ab592c4ce', class: {
                 'sd-select-group': true,
                 'sd-select-group--open': this.isOpen,
                 'sd-select-group--disabled': this.disabled,

package/dist/cjs/sd-select-multiple-group.cjs.entry.js

@@ -31,6 +31,7 @@ const SdSelectMultipleGroup = class extends baseDropdownEvent.BaseDropdownEvent
     allCheckOptionLabel = '전체';
     // props - label
     label = '';
+    labelWidth = '';
     icon = undefined;
     labelTooltip = '';
     labelTooltipProps = null;
@@ -397,7 +398,7 @@ const SdSelectMultipleGroup = class extends baseDropdownEvent.BaseDropdownEvent
         });
     }
     render() {
-        return (index.h("sd-field", { key: '3cc9e5b2f1062e216a0dd738dff6918084c5e3b4', 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' } }, index.h("div", { key: '60be94c561be252d6cc822e6be60a5e31390a15f', class: {
+        return (index.h("sd-field", { key: 'e7d00571a19a83e8d243d0c4f7433d931d4a2304', label: this.label, labelWidth: this.labelWidth, 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' } }, index.h("div", { key: '8c7288d853fed5bb829f1ef90af5e96a512c11b3', class: {
                 'sd-select-multiple-group': true,
                 'sd-select-multiple-group--open': this.isOpen,
                 'sd-select-multiple-group--disabled': this.disabled,

package/dist/cjs/sd-select-multiple.cjs.entry.js

@@ -31,6 +31,7 @@ const SdSelectMultiple = class extends baseDropdownEvent.BaseDropdownEvent {
     useCheckbox = false;
     // props - label
     label = '';
+    labelWidth = '';
     icon = undefined;
     labelTooltip = '';
     labelTooltipProps = null;
@@ -155,7 +156,7 @@ const SdSelectMultiple = class extends baseDropdownEvent.BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (index.h("sd-field", { key: 'e372aab1dafc730f22c6d58cbd39d651e65a66dc', 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) }, index.h("div", { key: 'a73dc6abd9a05f888c39d2176f72275a329ccae0', class: {
+        return (index.h("sd-field", { key: 'f5dda40563661955aa194d841ca89628afd496cb', label: this.label, labelWidth: this.labelWidth, 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) }, index.h("div", { key: '81541d9adabfea7c3af1c22ed419036f56e1a353', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,

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

@@ -28,6 +28,7 @@ const SdSelect = class extends baseDropdownEvent.BaseDropdownEvent {
     searchable = false;
     // props - label
     label = '';
+    labelWidth = '';
     addonLabel = '';
     icon = undefined;
     labelTooltip = '';
@@ -146,7 +147,7 @@ const SdSelect = class extends baseDropdownEvent.BaseDropdownEvent {
         }
     };
     render() {
-        return (index.h("sd-field", { key: '33f8a4e75ab20389213be5643f479b806e8e78c3', 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) }, index.h("div", { key: '148f21e1a19cf4f4b9e61b4192d631d85dbc57a4', class: {
+        return (index.h("sd-field", { key: 'd96961fe4c425c3f0fcb1c2f438c8b70c510b632', label: this.label, labelWidth: this.labelWidth, 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) }, index.h("div", { key: '0113ffb76ea79cbe3b77dff85d8186a5b994e7b6', class: {
                 'sd-select': true,
                 'sd-select--disabled': this.disabled,
                 'sd-select--error': !!this.error,

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

@@ -41,6 +41,7 @@ const SdTextarea = class {
     width = '';
     // props - sd-field
     label = '';
+    labelWidth = '';
     addonLabel = '';
     hint = '';
     errorMessage = '';
@@ -128,7 +129,7 @@ const SdTextarea = class {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (index.h("sd-field", { key: '4525a68094b0655721c1d8679ee32bc041cf9677', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: '8a7724f1ff423b44dd9017f0446cfeb1220fda95', class: "sd-textarea__content" }, index.h("textarea", { key: '3eb2bafbbd31cd36ba5626aa9e0069d24d4634ec', 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 (index.h("sd-field", { key: '6b2360f01a356db14659e1ebc53d8c4d8c4f671f', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: 'f43279ee861d3502c9130f1de0c47cba61ad0866', class: "sd-textarea__content" }, index.h("textarea", { key: '0600b577417019ae36a0daba637168ebc5685220', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
     }
     static get watchers() { return {
         "value": [{

package/dist/collection/components/sd-action-modal/sd-action-modal.css

@@ -1,12 +1,12 @@
 sd-action-modal {
   display: block;
-  width: fit-content;
-  min-width: 520px;
 }
 sd-action-modal .sd-action-modal {
   position: relative;
   display: flex;
   flex-direction: column;
+  width: fit-content;
+  min-width: 520px;
   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);
@@ -15,6 +15,7 @@ sd-action-modal .sd-action-modal {
 sd-action-modal .sd-action-modal__header {
   display: flex;
   align-items: center;
+  flex-shrink: 0;
   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);
 }
@@ -52,6 +53,7 @@ sd-action-modal .sd-action-modal__body {
 sd-action-modal .sd-action-modal__footer {
   display: flex;
   align-items: center;
+  flex-shrink: 0;
   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);

package/dist/collection/components/sd-action-modal/sd-action-modal.js

@@ -7,6 +7,8 @@ const DEFAULT_BUTTON_PROPS = {
 export class SdActionModal {
     modalTitle = '';
     buttonProps = {};
+    width;
+    height;
     close;
     ok;
     render() {
@@ -29,7 +31,15 @@ export 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 (h("div", { key: 'b306dc102137e9b76faeeb19587dce32d670163c', class: "sd-action-modal", style: cssVars }, h("header", { key: 'e6b9699e9943d1f4001b4cd23f99975474c3e86e', class: "sd-action-modal__header" }, h("h2", { key: '4d30b98d01a191e4bdc3fb1ff772483dfd3a8397', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: 'f1083fe5c2643d09dc4bad4c50064ffda2db65ab', class: "sd-action-modal__header-sub" }, h("slot", { key: 'a11c9a13ae11569226ac11fb4be6b782667defeb', name: "header-sub-title" })), h("sd-ghost-button", { key: 'e8a76ecd5d1388a79ac19705d634f40c05e6c2fc', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: 'eb615713a8fbfdd1c40c805e3146fc8341686c72', class: "sd-action-modal__body" }, h("slot", { key: 'd56a3331bc2e94748f150c11dba9e5bd1fad8043', name: "body" })), h("footer", { key: 'd80ad9de537846b01f79588e363bb40e76c64fba', class: "sd-action-modal__footer" }, h("div", { key: '49187df32a64d18b2492995a80ce49df02e9303e', class: "sd-action-modal__footer-sub" }, h("slot", { key: 'd73e66710152c0718d7cab6bbcbd1ab2cebf1f87', name: "bottom-sub-content" })), h("sd-button-v2", { key: '03d2f2a0fa6960983c46e47460f623dfd42811a3', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() }))));
+        const sizeStyle = {};
+        if (this.width != null && this.width !== '') {
+            sizeStyle.width = typeof this.width === 'number' ? `${this.width}px` : this.width;
+            sizeStyle.minWidth = '0';
+        }
+        if (this.height != null && this.height !== '') {
+            sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
+        }
+        return (h("div", { key: '566cba5061dbc13229ab2b51375cc4008f472343', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, h("header", { key: 'fe396d5a90282deb3a9b42be4f451ee89648d20a', class: "sd-action-modal__header" }, h("h2", { key: '7086fd3acf6be20d244f1c493d0f2669fb65dd01', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: '90a7ae7d6a0a5c22921912e705ebfdee721e7e4a', class: "sd-action-modal__header-sub" }, h("slot", { key: '74daa609d40f22dc825ea2a4a68e6d51d0db1f75', name: "header-sub-title" })), h("sd-ghost-button", { key: '1d38b1374172f7a060ef3781079d301ae1fea84a', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: '657659d94d24581c6f33b8ab6d5dd74260cf22ad', class: "sd-action-modal__body" }, h("slot", { key: '6f05c054e98537c43a78b72e14351092266933b2', name: "body" })), h("footer", { key: 'dbd38be86c98e556039baa97ef2d84c48839e687', class: "sd-action-modal__footer" }, h("div", { key: '268dfd29463453b9db4976145469f5045f2be16d', class: "sd-action-modal__footer-sub" }, h("slot", { key: '38c76ecba8652c32807be076a898db75f87ea8f9', name: "bottom-sub-content" })), h("sd-button-v2", { key: '5b4a651bbd35412b9b02bed7709d0bc27792811e', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() }))));
     }
     static get is() { return "sd-action-modal"; }
     static get originalStyleUrls() {
@@ -88,6 +98,44 @@ export class SdActionModal {
                 "getter": false,
                 "setter": false,
                 "defaultValue": "{}"
+            },
+            "width": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
+            },
+            "height": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height"
             }
         };
     }

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

@@ -22,6 +22,7 @@ export class SdBarcodeInput {
     hovered = false;
     // props - label
     label = '';
+    labelWidth = '';
     icon = undefined;
     labelTooltip = '';
     labelTooltipProps = null;
@@ -100,7 +101,7 @@ export class SdBarcodeInput {
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
             '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
         };
-        return (h("sd-field", { key: 'ea17ae1c54890e57be4f582b3e993f370646b81a', 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, 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 }, h("label", { key: 'c96462ac8db261a31681744585a4f396b6561abb', class: "sd-barcode-input__content" }, h("slot", { key: 'fde26b71059c79ef6911ab7a185bacda19b2800a', name: "prefix" }), h("input", { key: 'a015944a0396a2fc3ab1c1ea401f79f25a260764', 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 }), h("slot", { key: '45958b98d96ad527cfb9b59491e48e6f5c75e990', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: '7bf3f5e3ffcb35def3576e5f07d2af6392ce0c59', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: 'bba439856e0cbaedc7b54411dac904f9c845b50c', name: this.name, label: this.label, labelWidth: this.labelWidth, 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, 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 }, h("label", { key: '8553cfb4b5ef9535608abc1f2987ce08970c318a', class: "sd-barcode-input__content" }, h("slot", { key: '93db2b38e8d674230f48e3b9496a7221d8477da6', name: "prefix" }), h("input", { key: '30997bea593052322a2d29fc1e517b00cf19b1fb', 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 }), h("slot", { key: '690daa6c1daa6058713ee09b0efe976557cde3ab', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: '8ab4e45a23d1b06dc415d969e25ed5ea59540643', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';
@@ -491,6 +492,26 @@ export class SdBarcodeInput {
                 "attribute": "label",
                 "defaultValue": "''"
             },
+            "labelWidth": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-width",
+                "defaultValue": "''"
+            },
             "icon": {
                 "type": "unknown",
                 "mutable": false,

package/dist/collection/components/sd-date-picker/sd-date-picker.js

@@ -12,6 +12,7 @@ export class SdDatePicker {
     width = '';
     // sd-field 공통 props
     label = '';
+    labelWidth = '';
     addonLabel = '';
     hint = '';
     errorMessage = '';
@@ -91,9 +92,9 @@ export class SdDatePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (h("sd-field", { key: 'cfbaa89a7e07ff2d8994f3e8faa16bc55decce0f', name: this.fieldName || this.internalName, 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, 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 }, h("div", { key: '674cc78bc3a3cda15a1cff07c36d0d5adbcfa2ef', class: "sd-date-picker", ref: el => {
+        return (h("sd-field", { key: '693c0c75e6b0a9ee8323f4be7ec101592e586372', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, 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, 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 }, h("div", { key: 'ea7f506f0163119fac0c660ef1bef5781780a118', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: '1491cea4ff657631b3dc197fa39981c2c4df96c7', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '9a759a3470bc077a52efbd4718cf11f3b67ef477', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-picker-calendar", { key: 'a14a447fbf28d95173eca5fae3baa73319c0bc37', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: '0109eb0326655018bc02cc373e766ffdada85ff0', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '65a628af43ae036a752f3511341fd8c9c82303a1', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-picker-calendar", { key: '21f574fc9551f9aaccfcb5d49a81952dbba72d7a', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get is() { return "sd-date-picker"; }
     static get originalStyleUrls() {
@@ -252,6 +253,26 @@ export class SdDatePicker {
                 "attribute": "label",
                 "defaultValue": "''"
             },
+            "labelWidth": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-width",
+                "defaultValue": "''"
+            },
             "addonLabel": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js

@@ -13,6 +13,7 @@ export class SdDateRangePicker {
     width = '';
     // sd-field 공통 props
     label = '';
+    labelWidth = '';
     addonLabel = '';
     hint = '';
     errorMessage = '';
@@ -97,9 +98,9 @@ export class SdDateRangePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (h("sd-field", { key: 'c3ce7e19d317939c193b6d1481b78ce599b0ffb1', name: this.fieldName || this.internalName, 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, 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 }, h("div", { key: 'a3b48e2f79359620aabe01cfb32ac6a066acf567', class: "sd-date-range-picker", ref: el => {
+        return (h("sd-field", { key: '95ec666c91635d6b6b749d660b4495b7ebe48e6a', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, 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, 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 }, h("div", { key: '3051fda66e94d51208347ae2053173570d5f1ca9', class: "sd-date-range-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: '3b2a963d29e93fe2ef82d1cd466ebd079c31ee30', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '5e51463ffdaf21c67a796b8a4418a287b48f7528', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-range-picker-calendar", { key: '820176f7e03e9aab97e8b1f7752a535385918e46', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: '71693b5a4cec562169d9427a4e19aed4d8b19a45', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '75b9f1c1ebdabcd1c1a33cad51189ba132274bb1', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-range-picker-calendar", { key: 'f158eead4f44bc452bf102b3324721df84fc3b0c', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get is() { return "sd-date-range-picker"; }
     static get originalStyleUrls() {
@@ -281,6 +282,26 @@ export class SdDateRangePicker {
                 "attribute": "label",
                 "defaultValue": "''"
             },
+            "labelWidth": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-width",
+                "defaultValue": "''"
+            },
             "addonLabel": {
                 "type": "string",
                 "mutable": false,

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

@@ -29,11 +29,14 @@ sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control {
 sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label {
   display: flex;
   align-items: center;
+  flex-shrink: 0;
+  width: var(--sd-field-label-width, auto);
   height: var(--sd-field-label-height);
   margin-right: var(--sd-field-label-margin-right);
 }
 sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon {
   margin-right: var(--sd-field-label-gap);
+  flex-shrink: 0;
 }
 sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text {
   font-size: var(--sd-field-label-font-size);
@@ -41,9 +44,13 @@ sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text {
   font-weight: var(--sd-field-label-font-weight);
   color: var(--sd-system-color-field-text-default);
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
 }
 sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip {
   margin-left: var(--sd-field-label-gap);
+  flex-shrink: 0;
 }
 sd-field .sd-field--has-addon .sd-field__control .sd-field__addon {
   display: flex;

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

@@ -29,6 +29,7 @@ export class SdField {
     size = 'sm';
     // props - label
     label = '';
+    labelWidth = '';
     addonLabel = '';
     icon = undefined;
     labelTooltip = '';
@@ -141,6 +142,11 @@ export class SdField {
                 '--sd-field-label-font-size': `${labelTokens.fontSize}px`,
                 '--sd-field-label-line-height': `${labelTokens.lineHeight}px`,
                 '--sd-field-label-font-weight': labelTokens.fontWeight,
+                ...(this.labelWidth
+                    ? {
+                        '--sd-field-label-width': typeof this.labelWidth === 'number' ? `${this.labelWidth}px` : this.labelWidth,
+                    }
+                    : {}),
             }
             : {};
         const addonCssVars = addon
@@ -157,20 +163,20 @@ export class SdField {
                 '--sd-field-addon-border-width': `${addonTokens.border.width}px`,
             }
             : {};
-        return (h("div", { key: '72ffdb42c88b90eb60637b10c1330dc509ece812', class: {
+        return (h("div", { key: 'f12b2e13ac8152d1e688f903a60a8fa670e99065', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-addon': !!addon,
                 [this.fieldStatus]: !!this.fieldStatus,
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, h("div", { key: 'fb5d90aea5a4988ec58984b4a85ed609f032549e', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'c0372be3a39ca1d6cebfe5e765d120751e39d03e', class: "sd-field__main", style: this.width
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, h("div", { key: '79f7a40b5e1ee95bb9075b0855e22261cd8adc6a', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '54b5bbfbe18df48c40cc30ec3d6761ccd8e446cc', class: "sd-field__main", style: this.width
                 ? {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, h("div", { key: 'd203154db0eef4e73908d78ba3667710c51b6595', class: {
+                : {} }, h("div", { key: '39542908287175ade4d6e0f1acd2cb1f03c9e2a1', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': !!addon,
-            } }, addon && h("div", { key: '851b996010c4f0402df8b6bfe9ced0c8444bc591', class: "sd-field__addon" }, addon), h("slot", { key: '081b95a99090c3c1d2d28170500ac7be15452876' })), this.errorMsg || this.errorMessage ? (h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && h("div", { class: "sd-field__hint" }, this.hint))))));
+            } }, addon && h("div", { key: '236650de53d1d1951f26586aa0d22f0f267fc411', class: "sd-field__addon" }, addon), h("slot", { key: '41df3dca21aa68d3324617891f2555f1c488a61b' })), this.errorMsg || this.errorMessage ? (h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && h("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (!label)
@@ -441,6 +447,26 @@ export class SdField {
                 "attribute": "label",
                 "defaultValue": "''"
             },
+            "labelWidth": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-width",
+                "defaultValue": "''"
+            },
             "addonLabel": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/sd-file-picker/sd-file-picker.js

@@ -14,6 +14,7 @@ export class SdFilePicker {
     // sd-field 패스스루 props
     name = '';
     label = '';
+    labelWidth = '';
     addonLabel = '';
     hint = '';
     errorMessage = '';
@@ -176,7 +177,7 @@ export class SdFilePicker {
                     'sd-file-picker--inline-disabled': this.disabled,
                 }, style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content));
         }
-        return (h("sd-field", { 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 }, content));
+        return (h("sd-field", { name: this.name, label: this.label, labelWidth: this.labelWidth, 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 }, content));
     }
     static get is() { return "sd-file-picker"; }
     static get originalStyleUrls() {
@@ -410,6 +411,26 @@ export class SdFilePicker {
                 "attribute": "label",
                 "defaultValue": "''"
             },
+            "labelWidth": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-width",
+                "defaultValue": "''"
+            },
             "addonLabel": {
                 "type": "string",
                 "mutable": false,