@sellmate/design-system 1.0.63 → 1.0.65

package/hydrate/index.js

@@ -5402,7 +5402,7 @@ const ACTION_MODAL_TITLE = {
     lineHeight: Number(action.title.typography.lineHeight),
 };
 
-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 sdActionModalCss = () => `sd-action-modal{display:block}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);overflow:hidden}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)}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;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);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',
@@ -5416,6 +5416,8 @@ class SdActionModal {
     }
     modalTitle = '';
     buttonProps = {};
+    width;
+    height;
     close;
     ok;
     render() {
@@ -5438,7 +5440,15 @@ 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: 'b306dc102137e9b76faeeb19587dce32d670163c', class: "sd-action-modal", style: cssVars }, hAsync("header", { key: 'e6b9699e9943d1f4001b4cd23f99975474c3e86e', class: "sd-action-modal__header" }, hAsync("h2", { key: '4d30b98d01a191e4bdc3fb1ff772483dfd3a8397', class: "sd-action-modal__title" }, this.modalTitle), hAsync("div", { key: 'f1083fe5c2643d09dc4bad4c50064ffda2db65ab', class: "sd-action-modal__header-sub" }, hAsync("slot", { key: 'a11c9a13ae11569226ac11fb4be6b782667defeb', name: "header-sub-title" })), hAsync("sd-ghost-button", { key: 'e8a76ecd5d1388a79ac19705d634f40c05e6c2fc', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: 'eb615713a8fbfdd1c40c805e3146fc8341686c72', class: "sd-action-modal__body" }, hAsync("slot", { key: 'd56a3331bc2e94748f150c11dba9e5bd1fad8043', name: "body" })), hAsync("footer", { key: 'd80ad9de537846b01f79588e363bb40e76c64fba', class: "sd-action-modal__footer" }, hAsync("div", { key: '49187df32a64d18b2492995a80ce49df02e9303e', class: "sd-action-modal__footer-sub" }, hAsync("slot", { key: 'd73e66710152c0718d7cab6bbcbd1ab2cebf1f87', name: "bottom-sub-content" })), hAsync("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 (hAsync("div", { key: '566cba5061dbc13229ab2b51375cc4008f472343', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, hAsync("header", { key: 'fe396d5a90282deb3a9b42be4f451ee89648d20a', class: "sd-action-modal__header" }, hAsync("h2", { key: '7086fd3acf6be20d244f1c493d0f2669fb65dd01', class: "sd-action-modal__title" }, this.modalTitle), hAsync("div", { key: '90a7ae7d6a0a5c22921912e705ebfdee721e7e4a', class: "sd-action-modal__header-sub" }, hAsync("slot", { key: '74daa609d40f22dc825ea2a4a68e6d51d0db1f75', name: "header-sub-title" })), hAsync("sd-ghost-button", { key: '1d38b1374172f7a060ef3781079d301ae1fea84a', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: '657659d94d24581c6f33b8ab6d5dd74260cf22ad', class: "sd-action-modal__body" }, hAsync("slot", { key: '6f05c054e98537c43a78b72e14351092266933b2', name: "body" })), hAsync("footer", { key: 'dbd38be86c98e556039baa97ef2d84c48839e687', class: "sd-action-modal__footer" }, hAsync("div", { key: '268dfd29463453b9db4976145469f5045f2be16d', class: "sd-action-modal__footer-sub" }, hAsync("slot", { key: '38c76ecba8652c32807be076a898db75f87ea8f9', name: "bottom-sub-content" })), hAsync("sd-button-v2", { key: '5b4a651bbd35412b9b02bed7709d0bc27792811e', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() }))));
     }
     static get style() { return sdActionModalCss(); }
     static get cmpMeta() { return {
@@ -5446,7 +5456,9 @@ class SdActionModal {
         "$tagName$": "sd-action-modal",
         "$members$": {
             "modalTitle": [1, "modal-title"],
-            "buttonProps": [16]
+            "buttonProps": [16],
+            "width": [8],
+            "height": [8]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -5618,6 +5630,7 @@ class SdBarcodeInput {
     hovered = false;
     // props - label
     label = '';
+    labelWidth = '';
     icon = undefined;
     labelTooltip = '';
     labelTooltipProps = null;
@@ -5696,7 +5709,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: '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 }, hAsync("label", { key: 'c96462ac8db261a31681744585a4f396b6561abb', class: "sd-barcode-input__content" }, hAsync("slot", { key: 'fde26b71059c79ef6911ab7a185bacda19b2800a', name: "prefix" }), hAsync("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 }), hAsync("slot", { key: '45958b98d96ad527cfb9b59491e48e6f5c75e990', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-ghost-button", { key: '7bf3f5e3ffcb35def3576e5f07d2af6392ce0c59', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
+        return (hAsync("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 }, hAsync("label", { key: '8553cfb4b5ef9535608abc1f2987ce08970c318a', class: "sd-barcode-input__content" }, hAsync("slot", { key: '93db2b38e8d674230f48e3b9496a7221d8477da6', name: "prefix" }), hAsync("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 }), hAsync("slot", { key: '690daa6c1daa6058713ee09b0efe976557cde3ab', name: "suffix" }), this.clearable && this.internalValue && (hAsync("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 = '';
@@ -5734,6 +5747,7 @@ class SdBarcodeInput {
             "focused": [1028],
             "hovered": [1028],
             "label": [1],
+            "labelWidth": [8, "label-width"],
             "icon": [16],
             "labelTooltip": [1, "label-tooltip"],
             "labelTooltipProps": [16],
@@ -7346,6 +7360,7 @@ class SdDatePicker {
     width = '';
     // sd-field 공통 props
     label = '';
+    labelWidth = '';
     addonLabel = '';
     hint = '';
     errorMessage = '';
@@ -7425,9 +7440,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: '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 }, hAsync("div", { key: '674cc78bc3a3cda15a1cff07c36d0d5adbcfa2ef', class: "sd-date-picker", ref: el => {
+        return (hAsync("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 }, hAsync("div", { key: 'ea7f506f0163119fac0c660ef1bef5781780a118', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, hAsync("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) && (hAsync("sd-portal", { key: '9a759a3470bc077a52efbd4718cf11f3b67ef477', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-picker-calendar", { key: 'a14a447fbf28d95173eca5fae3baa73319c0bc37', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, hAsync("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) && (hAsync("sd-portal", { key: '65a628af43ae036a752f3511341fd8c9c82303a1', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-picker-calendar", { key: '21f574fc9551f9aaccfcb5d49a81952dbba72d7a', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -7446,6 +7461,7 @@ class SdDatePicker {
             "disabled": [516],
             "width": [8],
             "label": [1],
+            "labelWidth": [8, "label-width"],
             "addonLabel": [1, "addon-label"],
             "hint": [1],
             "errorMessage": [1, "error-message"],
@@ -7725,6 +7741,7 @@ class SdDateRangePicker {
     width = '';
     // sd-field 공통 props
     label = '';
+    labelWidth = '';
     addonLabel = '';
     hint = '';
     errorMessage = '';
@@ -7809,9 +7826,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: '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 }, hAsync("div", { key: 'a3b48e2f79359620aabe01cfb32ac6a066acf567', class: "sd-date-range-picker", ref: el => {
+        return (hAsync("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 }, hAsync("div", { key: '3051fda66e94d51208347ae2053173570d5f1ca9', class: "sd-date-range-picker", ref: el => {
                 this.triggerRef = el;
-            } }, hAsync("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) && (hAsync("sd-portal", { key: '5e51463ffdaf21c67a796b8a4418a287b48f7528', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-range-picker-calendar", { key: '820176f7e03e9aab97e8b1f7752a535385918e46', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, hAsync("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) && (hAsync("sd-portal", { key: '75b9f1c1ebdabcd1c1a33cad51189ba132274bb1', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-range-picker-calendar", { key: 'f158eead4f44bc452bf102b3324721df84fc3b0c', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -7831,6 +7848,7 @@ class SdDateRangePicker {
             "disabled": [516],
             "width": [8],
             "label": [1],
+            "labelWidth": [8, "label-width"],
             "addonLabel": [1, "addon-label"],
             "hint": [1],
             "errorMessage": [1, "error-message"],
@@ -8569,7 +8587,7 @@ const FIELD_LABEL_SIZE_MAP = {
     },
 };
 
-const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;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)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap)}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;white-space:nowrap;padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px)}sd-field .sd-field__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field .sd-field__error-message{color:var(--sd-textinput-textinput-text-error-message);font-size:var(--sd-textinput-textinput-error-message-typography-font-size);line-height:var(--sd-textinput-textinput-error-message-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-textinput-textinput-text-hint);font-size:var(--sd-textinput-textinput-hint-typography-font-size);line-height:var(--sd-textinput-textinput-hint-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}`;
+const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}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);line-height:var(--sd-field-label-line-height);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;gap:var(--sd-field-addon-gap);align-items:center;white-space:nowrap;padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px)}sd-field .sd-field__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field .sd-field__error-message{color:var(--sd-textinput-textinput-text-error-message);font-size:var(--sd-textinput-textinput-error-message-typography-font-size);line-height:var(--sd-textinput-textinput-error-message-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-textinput-textinput-text-hint);font-size:var(--sd-textinput-textinput-hint-typography-font-size);line-height:var(--sd-textinput-textinput-hint-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}`;
 
 const FORM_PARENT_TAGS = [
     'sd-select',
@@ -8602,6 +8620,7 @@ class SdField {
     size = 'sm';
     // props - label
     label = '';
+    labelWidth = '';
     addonLabel = '';
     icon = undefined;
     labelTooltip = '';
@@ -8714,6 +8733,11 @@ 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
@@ -8730,20 +8754,20 @@ class SdField {
                 '--sd-field-addon-border-width': `${addonTokens.border.width}px`,
             }
             : {};
-        return (hAsync("div", { key: '72ffdb42c88b90eb60637b10c1330dc509ece812', class: {
+        return (hAsync("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 } }, hAsync("div", { key: 'fb5d90aea5a4988ec58984b4a85ed609f032549e', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: 'c0372be3a39ca1d6cebfe5e765d120751e39d03e', class: "sd-field__main", style: this.width
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: '79f7a40b5e1ee95bb9075b0855e22261cd8adc6a', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '54b5bbfbe18df48c40cc30ec3d6761ccd8e446cc', class: "sd-field__main", style: this.width
                 ? {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, hAsync("div", { key: 'd203154db0eef4e73908d78ba3667710c51b6595', class: {
+                : {} }, hAsync("div", { key: '39542908287175ade4d6e0f1acd2cb1f03c9e2a1', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': !!addon,
-            } }, addon && hAsync("div", { key: '851b996010c4f0402df8b6bfe9ced0c8444bc591', class: "sd-field__addon" }, addon), hAsync("slot", { key: '081b95a99090c3c1d2d28170500ac7be15452876' })), this.errorMsg || this.errorMessage ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
+            } }, addon && hAsync("div", { key: '236650de53d1d1951f26586aa0d22f0f267fc411', class: "sd-field__addon" }, addon), hAsync("slot", { key: '41df3dca21aa68d3324617891f2555f1c488a61b' })), this.errorMsg || this.errorMessage ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (!label)
@@ -8767,6 +8791,7 @@ class SdField {
             "width": [8],
             "size": [513],
             "label": [1],
+            "labelWidth": [8, "label-width"],
             "addonLabel": [1, "addon-label"],
             "icon": [16],
             "labelTooltip": [1, "label-tooltip"],
@@ -8847,6 +8872,7 @@ class SdFilePicker {
     // sd-field 패스스루 props
     name = '';
     label = '';
+    labelWidth = '';
     addonLabel = '';
     hint = '';
     errorMessage = '';
@@ -9009,7 +9035,7 @@ class SdFilePicker {
                     'sd-file-picker--inline-disabled': this.disabled,
                 }, style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content));
         }
-        return (hAsync("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 (hAsync("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 watchers() { return {
         "value": [{
@@ -9032,6 +9058,7 @@ class SdFilePicker {
             "maxFiles": [8, "max-files"],
             "name": [1],
             "label": [1],
+            "labelWidth": [8, "label-width"],
             "addonLabel": [1, "addon-label"],
             "hint": [1],
             "errorMessage": [1, "error-message"],
@@ -9067,7 +9094,7 @@ class SdFloatingPopover {
     to = 'body';
     parentRef = null;
     offset = [0, 0];
-    zIndex = 9999;
+    zIndex = 10000;
     placement = 'bottom';
     open = false;
     close;
@@ -9125,7 +9152,7 @@ class SdFloatingPopover {
         this.wrapper = document.createElement('div');
         Object.assign(this.wrapper.style, {
             position: 'absolute',
-            zIndex: (this.zIndex ?? 9999).toString(),
+            zIndex: (this.zIndex ?? 10000).toString(),
             transition: 'opacity 0.4s',
             top: '-9999px',
             left: '-9999px',
@@ -9207,7 +9234,7 @@ class SdFloatingPopover {
         this.close.emit();
     }
     render() {
-        return hAsync("slot", { key: '4f7cf13fe78e7d4e906a2cda47de4258d9ceda74' });
+        return hAsync("slot", { key: '4dafb853b2a82e541f59056d2fedf08a6fa040ba' });
     }
     static get style() { return sdFloatingPortalCss(); }
     static get cmpMeta() { return {
@@ -10169,6 +10196,7 @@ class SdInput {
     hovered = false;
     // props - label
     label = '';
+    labelWidth = '';
     icon = undefined;
     labelTooltip = '';
     labelTooltipProps = null;
@@ -10250,12 +10278,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: '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 }, hAsync("label", { key: 'd806549d41156ab414d04664e6887075ef97f307', class: "sd-input__content" }, hAsync("slot", { key: '29f447128f6211792742a252d1ea087b5a5b413e', name: "prefix" }), hAsync("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 }), hAsync("slot", { key: 'f12b87b5d30878a55e1224abf789b924c1fd3a0c', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (hAsync("sd-ghost-button", { key: 'dad4be5dc6e8239dedc094fe0eb02a2587dd9f9c', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (hAsync("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 }, hAsync("label", { key: 'e5cbdbc2b233bda57488ead19401d277891301ae', class: "sd-input__content" }, hAsync("slot", { key: 'a327005770df94ef61f2e08071e77407a24b7b5c', name: "prefix" }), hAsync("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 }), hAsync("slot", { key: '532e201860db0709572502aa4275fc9251e1aeb1', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (hAsync("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' && (hAsync("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' && (hAsync("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;
@@ -10299,6 +10327,7 @@ class SdInput {
             "focused": [1028],
             "hovered": [1028],
             "label": [1],
+            "labelWidth": [8, "label-width"],
             "icon": [16],
             "labelTooltip": [1, "label-tooltip"],
             "labelTooltipProps": [16],
@@ -10875,6 +10904,7 @@ class SdNumberInput {
     useDecimal = false;
     value = null;
     label;
+    labelWidth = '';
     addonLabel = '';
     placeholder = '입력해 주세요.';
     disabled = false;
@@ -11134,12 +11164,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: '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 }, hAsync("div", { key: 'db4f02b5f882acfe481698745ca374874643efbd', class: "sd-number-input__content" }, this.useButton && (hAsync("button", { key: 'c83df0e915849792427b2f3609937bb0b62aae15', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'b7ea0704c9d114b5e1b8eca29a408efb5e532b7e', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+        return (hAsync("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 }, hAsync("div", { key: '0f9b5a0b966c7d51d5913c61a585ff789fa4973f', class: "sd-number-input__content" }, this.useButton && (hAsync("button", { key: 'b037ee3062253bf229f9639dd04c7475657fabb6', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '39a9f73a15008a481e758e663e027cd4f6454146', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (hAsync("span", { key: '57ed4229c30d52b6925ebaccd816cd8496ab60c0', class: "sd-number-input__prefix" }, this.inputPrefix)), hAsync("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 && (hAsync("span", { key: '050334ce25bb767e7f11dca886d4aeecaa1ed3dc', class: "sd-number-input__prefix" }, this.inputPrefix)), hAsync("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 && (hAsync("span", { key: '5db549a3cc81b98123cdec69b866b25d961f210f', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (hAsync("button", { key: '8b0b8c4ba46cf1cc5fba21f7fa8c113ca215b265', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '77012f79ba5a3a5550af844149bb35fa1e165533', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && (hAsync("span", { key: '845202622b3377add18782d96d0af0c49caf95ec', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (hAsync("button", { key: '208c976c1b755bec0cd7efb5ceacb3e07dce3a7d', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'fe9848c8f044d01378dc183a80d3f81eb56a67f9', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }
@@ -11164,6 +11194,7 @@ class SdNumberInput {
             "useDecimal": [4, "use-decimal"],
             "value": [1032],
             "label": [1],
+            "labelWidth": [8, "label-width"],
             "addonLabel": [1, "addon-label"],
             "placeholder": [1],
             "disabled": [4],
@@ -11399,7 +11430,7 @@ class SdPortal {
     parentRef = null;
     offset = [0, 4];
     viewportPadding = 0;
-    zIndex = 9999;
+    zIndex = 10000;
     open = false;
     close;
     container;
@@ -11445,7 +11476,7 @@ class SdPortal {
             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',
@@ -11614,7 +11645,7 @@ class SdPortal {
         this.close.emit();
     }
     render() {
-        return hAsync("slot", { key: 'e9862350592ae8ea0741b4639a94e288f0b302f2' });
+        return hAsync("slot", { key: '7213237baa73430dbf3d01aeb6f7a3e5fe173ecb' });
     }
     static get watchers() { return {
         "open": [{
@@ -12155,6 +12186,7 @@ class SdSelect extends BaseDropdownEvent {
     searchable = false;
     // props - label
     label = '';
+    labelWidth = '';
     addonLabel = '';
     icon = undefined;
     labelTooltip = '';
@@ -12273,7 +12305,7 @@ class SdSelect extends BaseDropdownEvent {
         }
     };
     render() {
-        return (hAsync("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) }, hAsync("div", { key: '148f21e1a19cf4f4b9e61b4192d631d85dbc57a4', class: {
+        return (hAsync("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) }, hAsync("div", { key: '0113ffb76ea79cbe3b77dff85d8186a5b994e7b6', class: {
                 'sd-select': true,
                 'sd-select--disabled': this.disabled,
                 'sd-select--error': !!this.error,
@@ -12316,6 +12348,7 @@ class SdSelect extends BaseDropdownEvent {
             "clearable": [4],
             "searchable": [4],
             "label": [1],
+            "labelWidth": [8, "label-width"],
             "addonLabel": [1, "addon-label"],
             "icon": [16],
             "labelTooltip": [1, "label-tooltip"],
@@ -12558,6 +12591,7 @@ class SdSelectGroup extends BaseDropdownEvent {
     searchable = false;
     // props - label
     label = '';
+    labelWidth = '';
     addonLabel = '';
     icon = undefined;
     labelTooltip = '';
@@ -12805,7 +12839,7 @@ class SdSelectGroup extends BaseDropdownEvent {
         });
     }
     render() {
-        return (hAsync("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' } }, hAsync("div", { key: '91f30fd84c70010030813f2d0cd9e86939e185d7', class: {
+        return (hAsync("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' } }, hAsync("div", { key: '62dcd2f37c2eda0e51f2e77de36ece6ab592c4ce', class: {
                 'sd-select-group': true,
                 'sd-select-group--open': this.isOpen,
                 'sd-select-group--disabled': this.disabled,
@@ -12870,6 +12904,7 @@ class SdSelectGroup extends BaseDropdownEvent {
             "clearable": [4],
             "searchable": [4],
             "label": [1],
+            "labelWidth": [8, "label-width"],
             "addonLabel": [1, "addon-label"],
             "icon": [16],
             "labelTooltip": [1, "label-tooltip"],
@@ -12929,6 +12964,7 @@ class SdSelectMultiple extends BaseDropdownEvent {
     useCheckbox = false;
     // props - label
     label = '';
+    labelWidth = '';
     icon = undefined;
     labelTooltip = '';
     labelTooltipProps = null;
@@ -13053,7 +13089,7 @@ class SdSelectMultiple extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (hAsync("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) }, hAsync("div", { key: 'a73dc6abd9a05f888c39d2176f72275a329ccae0', class: {
+        return (hAsync("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) }, hAsync("div", { key: '81541d9adabfea7c3af1c22ed419036f56e1a353', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
@@ -13100,6 +13136,7 @@ class SdSelectMultiple extends BaseDropdownEvent {
             "useAll": [4, "use-all"],
             "useCheckbox": [4, "use-checkbox"],
             "label": [1],
+            "labelWidth": [8, "label-width"],
             "icon": [16],
             "labelTooltip": [1, "label-tooltip"],
             "labelTooltipProps": [16],
@@ -13150,6 +13187,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
     allCheckOptionLabel = '전체';
     // props - label
     label = '';
+    labelWidth = '';
     icon = undefined;
     labelTooltip = '';
     labelTooltipProps = null;
@@ -13516,7 +13554,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
         });
     }
     render() {
-        return (hAsync("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' } }, hAsync("div", { key: '60be94c561be252d6cc822e6be60a5e31390a15f', class: {
+        return (hAsync("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' } }, hAsync("div", { key: '8c7288d853fed5bb829f1ef90af5e96a512c11b3', class: {
                 'sd-select-multiple-group': true,
                 'sd-select-multiple-group--open': this.isOpen,
                 'sd-select-multiple-group--disabled': this.disabled,
@@ -13589,6 +13627,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
             "allCheckedLabel": [1, "all-checked-label"],
             "allCheckOptionLabel": [1, "all-check-option-label"],
             "label": [1],
+            "labelWidth": [8, "label-width"],
             "icon": [16],
             "labelTooltip": [1, "label-tooltip"],
             "labelTooltipProps": [16],
@@ -13844,6 +13883,7 @@ class SdSelectV2 {
     dropdownHeight = '260px';
     disabled = false;
     label = '';
+    labelWidth = '';
     addonLabel = '';
     error = false;
     hint = '';
@@ -14037,13 +14077,13 @@ class SdSelectV2 {
                 this.closeDropdown();
             },
         };
-        return (hAsync("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 (hAsync("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;
-            } }, hAsync("div", { key: 'f832e4df90c6874c56e1f0ec5b109a7a77f3d0d1', class: "sd-select-v2", ref: el => {
+            } }, hAsync("div", { key: '302103a425963e5d577b01ad179d5af82e6f30b1', class: "sd-select-v2", ref: el => {
                 this.triggerRef = el;
-            } }, hAsync("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) && (hAsync("sd-portal", { key: '2b8c31b66ac81a51dbd7657d5bbeeeaeb3ff0c83', ...portalProps }, hAsync("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) })))));
+            } }, hAsync("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) && (hAsync("sd-portal", { key: '0df4ad35bb284298708a0c1e11ce0e3c28d16ed8', ...portalProps }, hAsync("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": [{
@@ -14063,6 +14103,7 @@ class SdSelectV2 {
             "dropdownHeight": [1, "dropdown-height"],
             "disabled": [4],
             "label": [1],
+            "labelWidth": [8, "label-width"],
             "addonLabel": [1, "addon-label"],
             "error": [1028],
             "hint": [1],
@@ -16103,6 +16144,7 @@ class SdTextarea {
     width = '';
     // props - sd-field
     label = '';
+    labelWidth = '';
     addonLabel = '';
     hint = '';
     errorMessage = '';
@@ -16190,7 +16232,7 @@ class SdTextarea {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (hAsync("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 }, hAsync("div", { key: '8a7724f1ff423b44dd9017f0446cfeb1220fda95', class: "sd-textarea__content" }, hAsync("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 (hAsync("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 }, hAsync("div", { key: 'f43279ee861d3502c9130f1de0c47cba61ad0866', class: "sd-textarea__content" }, hAsync("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": [{
@@ -16217,6 +16259,7 @@ class SdTextarea {
             "spellcheck": [4],
             "width": [8],
             "label": [1],
+            "labelWidth": [8, "label-width"],
             "addonLabel": [1, "addon-label"],
             "hint": [1],
             "errorMessage": [1, "error-message"],