@sellmate/design-system 1.16.0 → 1.18.0

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

@@ -182,21 +182,21 @@ export class SdField {
                     : {}),
             }
             : {};
-        return (h("div", { key: 'a04858364c6b9afceedba2f5d7ee0e289a6b6782', class: {
+        return (h("div", { key: '9edafceb24a4fcde7cfb966f421bfb73f1b07617', class: {
                 'sd-field': true,
                 'sd-field--has-label': this.label !== '',
                 'sd-field--has-addon': addon !== '',
                 [this.fieldStatus]: this.fieldStatus !== '',
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: '898f5af4d213745257b2666cbea56db591792054', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '488ab5c290258d0139f677319f21a55bb6c63876', class: "sd-field__main", style: this.width !== '' && this.width !== 0
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: 'e5c4a8aad05afb40f3eccc492135b2b968ffc646', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'e88d62a979eaab9f6794c851813e5f56c3c5c4ac', class: "sd-field__main", style: this.width !== '' && this.width !== 0
                 ? {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, h("div", { key: 'db8c388dd2c4743a287f7567cde4015cafed1d95', class: {
+                : {} }, h("div", { key: 'be69d7e48d90dda0872ffc43c2a1b4044e99ac00', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': addon !== '',
-            } }, addon && (h("div", { key: '1049369f52322fb1a4f1b4baf50b1e4ef2e9e59e', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: 'f0a28d9bdf97730088454c64b71b7cbc1d4dd875', name: this.icon.name, size: this.icon.size ??
-                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), h("slot", { key: 'deee9ef5d166ab4d17451ad9d013b3b9d3d7aebe' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
+            } }, addon && (h("div", { key: '2c631ac0f8b9001cf6344908cf8cbcdf182cc1a7', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: '34a49839ee200cd59c3ff5b84caf5ded2c50f7b0', name: this.icon.name, size: this.icon.size ??
+                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), h("slot", { key: '693f20c529e5f2ea84d381e59327392edb7b4c15' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (label == null || label === '')

package/dist/collection/components/sd-floating-portal/sd-floating-portal.js

@@ -152,7 +152,7 @@ export class SdFloatingPopover {
         }
     }
     render() {
-        return h("slot", { key: '7931b1b9ee17e2de64a7fa87658ec7d4501f7ecd' });
+        return h("slot", { key: 'f20806555ad198c33a62ec938ea7b77200fa1585' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-ghost-button/sd-ghost-button.js

@@ -76,7 +76,7 @@ export class SdGhostButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\"",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"bill\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"coupon\" | \"dashboard\" | \"date\" | \"delete\" | \"dot\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"launcher\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"monitor\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"shield\" | \"sidebar\" | \"star\" | \"store\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\"",
                     "references": {
                         "IconName": {
                             "location": "global",

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

@@ -48,7 +48,7 @@ export class SdIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\"",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"bill\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"coupon\" | \"dashboard\" | \"date\" | \"delete\" | \"dot\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"launcher\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"monitor\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"shield\" | \"sidebar\" | \"star\" | \"store\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\"",
                     "references": {
                         "IconName": {
                             "location": "global",

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

@@ -112,12 +112,12 @@ export class SdInput {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (h("sd-field", { key: 'fce402fae267b5700501e44935f23bebc28efb62', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, 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: 'f7d8f95cf5ee38a7aa2e44940ba39b9eb001064c', class: "sd-input__content" }, h("slot", { key: '23f1f770a268a0798293420ce0df9e5cc94e07b2', name: "prefix" }), h("input", { key: 'b8c041cc4a8761cf1cf93a8d1af139cd7720d2d8', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), 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 }), h("slot", { key: '5a288d50726b21c156da480937b9759e6c76d33a', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: 'b5315624a6fd5fdcb70526b1abea4fbac83641c1', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '64e7a3ba5e223341336248ba31e621b4416987fd', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, 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: 'b66e286c35cc14c1eb02badcaaff24b38ff0a7b3', class: "sd-input__content" }, h("slot", { key: 'dc8b900eb2b38c18b85663bc930e810be77bdbd7', name: "prefix" }), h("input", { key: '36d35464338838aaaeff6f728020241d33a493ec', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), 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 }), h("slot", { key: '4f30d4a59794c0692f367d41af4311e191c5427b', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '247da41512f20d8e562f345b08bd5bc13486734b', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled || this.readonly)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (h("sd-ghost-button", { key: '5ae70d65c531db0bc57d17f85c328a275f7aab2b', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (h("sd-ghost-button", { key: '70c596ef0072bf369bd59e2c58d0a6f8c6fd1b11', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled || this.readonly)
                     return;
                 this.passwordVisible = !this.passwordVisible;

package/dist/collection/components/sd-key-value-table/sd-key-value-table.config.js

@@ -5,8 +5,7 @@ export const KEY_VALUE_TABLE_LAYOUT = {
     rowHeight: Number(t.keyValue.height),
     thWidth: 120,
     borderRadius: Number(t.radius),
-    paddingX: Number(t.body.paddingX),
-    paddingY: Number(t.keyValue.body.padding),
+    padding: Number(t.keyValue.body.padding),
     helpIconSize: 16,
     requiredIconSize: 12,
     gap: Number(t.header.gap),
@@ -27,7 +26,7 @@ export const KEY_VALUE_TABLE_COLORS = {
 export const KEY_VALUE_TABLE_TYPOGRAPHY = {
     labelFontFamily: t.header.typography.fontFamily,
     labelFontSize: Number(t.header.typography.fontSize),
-    labelFontWeight: Number(t.header.typography.fontWeight),
+    labelFontWeight: 700,
     labelLineHeight: Number(t.header.typography.lineHeight),
     tdFontFamily: t.body.typography.fontFamily,
     tdFontSize: Number(t.body.typography.fontSize),

package/dist/collection/components/sd-key-value-table/sd-key-value-table.css

@@ -23,7 +23,7 @@ sd-key-value-table .sd-key-value-table__search-panel {
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
-  padding: var(--sd-kvt-padding-y) var(--sd-kvt-search-padding-x);
+  padding: var(--sd-kvt-padding) var(--sd-kvt-search-padding-x);
   background: var(--sd-kvt-search-bg);
   border-left: var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);
 }
@@ -42,7 +42,7 @@ sd-key-value-table .sd-key-value-table.sd-key-value-table--use-top {
 }
 sd-key-value-table .sd-key-value-table__th, sd-key-value-table .sd-key-value-table__td {
   height: var(--sd-kvt-row-height);
-  padding: var(--sd-kvt-padding-y) var(--sd-kvt-padding-x);
+  padding: var(--sd-kvt-padding);
   box-sizing: border-box;
   vertical-align: middle;
   text-align: left;

package/dist/collection/components/sd-key-value-table/sd-key-value-table.js

@@ -101,6 +101,28 @@ export class SdKeyValueTable {
         });
         return max;
     }
+    /**
+     * thStyle의 CSS 속성 값을 해당 CSS 변수로도 반영.
+     * label span이 var()로 스타일을 참조하기 때문에, 인라인 스타일만으로는 상속이 되지 않음.
+     */
+    buildThStyle(thStyle) {
+        const s = { ...thStyle };
+        if (thStyle.color != null)
+            s['--sd-kvt-th-color'] = thStyle.color;
+        if (thStyle.background != null)
+            s['--sd-kvt-th-bg'] = thStyle.background;
+        if (thStyle.backgroundColor != null)
+            s['--sd-kvt-th-bg'] = thStyle.backgroundColor;
+        if (thStyle.fontFamily != null)
+            s['--sd-kvt-label-font-family'] = thStyle.fontFamily;
+        if (thStyle.fontSize != null)
+            s['--sd-kvt-label-font-size'] = thStyle.fontSize;
+        if (thStyle.fontWeight != null)
+            s['--sd-kvt-label-font-weight'] = thStyle.fontWeight;
+        if (thStyle.lineHeight != null)
+            s['--sd-kvt-label-line-height'] = thStyle.lineHeight;
+        return s;
+    }
     renderTh(field, r, c) {
         const thRowSpan = field.thRowSpan != null && field.thRowSpan > 1 ? field.thRowSpan : undefined;
         const thColSpan = field.thColSpan != null && field.thColSpan > 1 ? field.thColSpan : undefined;
@@ -111,7 +133,8 @@ export class SdKeyValueTable {
         else if (Array.isArray(field.thClass)) {
             field.thClass.forEach(cls => (classObj[cls] = true));
         }
-        return (h("th", { key: `th-${r}-${c}`, class: classObj, style: field.thStyle, scope: "row", rowSpan: thRowSpan, colSpan: thColSpan }, h("div", { class: "sd-key-value-table__th-inner" }, h("span", { class: "sd-key-value-table__label" }, field.label, field.required && (h("sd-icon", { class: "sd-key-value-table__required", name: "star", size: KEY_VALUE_TABLE_LAYOUT.requiredIconSize, color: KEY_VALUE_TABLE_COLORS.required, label: "required" }))), field.helpText && this.renderHelpIcon(field.helpText))));
+        const thStyle = field.thStyle != null ? this.buildThStyle(field.thStyle) : undefined;
+        return (h("th", { key: `th-${r}-${c}`, class: classObj, style: thStyle, scope: "row", rowSpan: thRowSpan, colSpan: thColSpan }, h("div", { class: "sd-key-value-table__th-inner" }, h("span", { class: "sd-key-value-table__label" }, field.label, field.required && (h("sd-icon", { class: "sd-key-value-table__required", name: "star", size: KEY_VALUE_TABLE_LAYOUT.requiredIconSize, color: KEY_VALUE_TABLE_COLORS.required, label: "required" }))), field.helpText && this.renderHelpIcon(field.helpText))));
     }
     renderTd(field, r, c) {
         const tdRowSpan = field.tdRowSpan != null && field.tdRowSpan > 1 ? field.tdRowSpan : undefined;
@@ -139,8 +162,7 @@ export class SdKeyValueTable {
             '--sd-kvt-row-height': `${KEY_VALUE_TABLE_LAYOUT.rowHeight}px`,
             '--sd-kvt-th-width': `${KEY_VALUE_TABLE_LAYOUT.thWidth}px`,
             '--sd-kvt-radius': `${KEY_VALUE_TABLE_LAYOUT.borderRadius}px`,
-            '--sd-kvt-padding-x': `${KEY_VALUE_TABLE_LAYOUT.paddingX}px`,
-            '--sd-kvt-padding-y': `${KEY_VALUE_TABLE_LAYOUT.paddingY}px`,
+            '--sd-kvt-padding': `${KEY_VALUE_TABLE_LAYOUT.padding}px`,
             '--sd-kvt-gap': `${KEY_VALUE_TABLE_LAYOUT.gap}px`,
             '--sd-kvt-label-gap': `${KEY_VALUE_TABLE_LAYOUT.labelGap}px`,
             '--sd-kvt-border-width': `${KEY_VALUE_TABLE_LAYOUT.borderWidth}px`,
@@ -167,7 +189,22 @@ export class SdKeyValueTable {
         const tableEl = (h("table", { class: {
                 'sd-key-value-table': true,
                 'sd-key-value-table--use-top': this.useTop,
-            }, style: cssVars }, h("colgroup", null, Array.from({ length: maxCols }, (_, i) => (h("col", { key: `col-${i}`, style: i % 2 === 0 ? { width: `${KEY_VALUE_TABLE_LAYOUT.thWidth}px` } : undefined })))), h("tbody", null, this.fields.map((row, r) => (h("tr", { class: "sd-key-value-table__row", key: `row-${r}` }, row.map((field, c) => {
+            }, style: cssVars }, h("colgroup", null, Array.from({ length: maxCols }, (_, i) => {
+            if (i % 2 !== 0)
+                return h("col", { key: `col-${i}` });
+            const fieldIdx = i / 2;
+            const fieldThWidth = this.fields.reduce((found, row) => {
+                if (found != null)
+                    return found;
+                return row[fieldIdx]?.thWidth;
+            }, undefined);
+            const width = fieldThWidth != null
+                ? typeof fieldThWidth === 'number'
+                    ? `${fieldThWidth}px`
+                    : fieldThWidth
+                : `${KEY_VALUE_TABLE_LAYOUT.thWidth}px`;
+            return h("col", { key: `col-${i}`, style: { width } });
+        })), h("tbody", null, this.fields.map((row, r) => (h("tr", { class: "sd-key-value-table__row", key: `row-${r}` }, row.map((field, c) => {
             const showTh = !field.hideTh && !autoSkip[r][c];
             return [showTh ? this.renderTh(field, r, c) : null, this.renderTd(field, r, c)];
         })))))));

package/dist/collection/components/sd-linear-progress/sd-linear-progress.js

@@ -28,7 +28,7 @@ export class SdLinearProgress {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (h(Host, { key: '49452751b0aaf5e6b49d809272620cf4b198ecc1', style: hostStyle }, h("div", { key: 'aec62dae8fa8d4a9d6e64e305fadc63836a1fef6', class: 'sd-linear-progress__track' }, h("div", { key: '0f7cce4cf0ebe6ce40cc127ab8b91fdaf88440cc', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (h("span", { key: 'af2f415ba6cc27c209eed2ff38b02ce58f81a861', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (h("span", { key: '2c21c62faf93ee809ae6fa098f7bf88e20447ca8', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '571c78db5fc8d7a6e4db2ed78e8c75c8be953e2f', class: 'sd-linear-progress__label' }, this.label)));
+        return (h(Host, { key: '26b1e15732e289a9a37a6d3dbea24aec1ab60ffd', style: hostStyle }, h("div", { key: '5162d60390656286b56f6a96fd4b3932f399412a', class: 'sd-linear-progress__track' }, h("div", { key: 'a46b815f935b243e4b7f8988af65167e3f87b554', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (h("span", { key: 'bc91914addd5addb84c7684a1f862033950905fc', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (h("span", { key: 'c62cdc59464823286ff42fc7e97a7a255a2beeb4', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '4c7c280885c8411329f99c3fe04f5ede8b1f0708', class: 'sd-linear-progress__label' }, this.label)));
     }
     static get is() { return "sd-linear-progress"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-loading-container/sd-loading-container.js

@@ -10,10 +10,10 @@ export class SdLoadingContainer {
         this.visible = false;
     }
     render() {
-        return (h("div", { key: '314f23e9da2ec850d62b4d4e347055669841c1fe', class: {
+        return (h("div", { key: '2ad17acec76cfb7ceba0629f055600a7240a67e8', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '541eb68218969c73e52bc8cbdb79171ee0ba908e', class: "sd-loading-container__backdrop" }), h("div", { key: '95192e0c936419248c46a57acb4c5ab63465a2f5', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '5584a90aa595d3eaffc3597604a9dc359b22bcaf', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: 'e9dc0afbe43a318d7e776dd2f0bafa68ebe8536e', class: "sd-loading-container__message" }, this.message)))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '1e842f21f2990b22820974147b22d859be010683', class: "sd-loading-container__backdrop" }), h("div", { key: '4a48bafd9882a22c210dd1b2ca45efc43cc0c8da', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '8eb7377230f0e8c9c482dfc9ca1313f323895d14', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: 'af2fc52b0740ee1d2cea55b688e5b4b77e80c7e3', class: "sd-loading-container__message" }, this.message)))));
     }
     static get is() { return "sd-loading-container"; }
     static get originalStyleUrls() {

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

@@ -46,7 +46,7 @@ export class SdLoadingModal {
             '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
             '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
         };
-        return (h(Host, { key: '17636253239532d90e596f20d84795fe2e65508d', style: hostStyle }, h("div", { key: '2f925afceca4102049d7876ab4d1e33fa1ef5ef7', class: "sd-loading-modal" }, h("div", { key: '0598cff340210ca9ec5e28fb1992cbbc1b8e5a06', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (h("sd-circle-progress", { value: this.progress })) : (h("sd-circle-progress", { indeterminate: true }))) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("div", { key: '3d699238c19ee66fd3afc72194133a865501cc08', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (h("div", { key: 'd454a168360cd23a3e71482d67ee81d8eabdec58', class: "sd-loading-modal__button" }, h("sd-button", { key: '0aa26dc830d1c4827f2ee0ca0bfdf4bb8cd2c9f5', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (h(Host, { key: 'f40dcf4fa7e2ee7b4023be11be2b9361ec167610', style: hostStyle }, h("div", { key: '02bab8da4e09156340e8e9badef25755b57193d5', class: "sd-loading-modal" }, h("div", { key: '776833f7f85a5587dda59fe75e36ebb4b9109c3e', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (h("sd-circle-progress", { value: this.progress })) : (h("sd-circle-progress", { indeterminate: true }))) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("div", { key: '4bb9e434a4a2d6be6dbbe2ed4e89563bf7278c65', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (h("div", { key: '5da761513fdc38e5e646f72f75072e25d5313384', class: "sd-loading-modal__button" }, h("sd-button", { key: '2bf9beb84ab4a6c1e6793db453e04b947c432d13', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
     static get is() { return "sd-loading-modal"; }
     static get originalStyleUrls() {

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

@@ -109,7 +109,14 @@ export class SdModalContainer {
         });
     }
     attachModalEventListeners(id, modalEl) {
-        modalEl.addEventListener('sdOk', () => this.requestDismiss(id, 'confirm'));
+        modalEl.addEventListener('sdOk', () => {
+            const entry = this.entries.find(e => e.id === id);
+            if (entry?.modalRef._hasSubmit?.()) {
+                entry.modalRef._triggerSubmit?.();
+                return;
+            }
+            this.requestDismiss(id, 'confirm');
+        });
         modalEl.addEventListener('sdCancel', () => this.requestDismiss(id, 'cancel'));
         modalEl.addEventListener('sdClose', () => this.requestDismiss(id, 'close'));
     }

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

@@ -275,15 +275,15 @@ export 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 (h("sd-field", { key: '53c6935bbf98ed1eb0f28d6bed675ea369b0b2bc', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, 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("div", { key: '8f0da8b179cd3946d625ab6b525a2ffd614a5333', class: {
+        return (h("sd-field", { key: 'ad212dcbaf8e19cac070e6bdfa292ca614480fbc', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, 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("div", { key: 'b9c403df166e2f05f815ebf3851b6517b8afbd2a', class: {
                 'sd-number-input__content': true,
                 'sd-number-input__content--no-stepper': !this.useButton,
-            } }, this.useButton && (h("button", { key: '1be42c16d5e671c567d4768f505c2c17c50f1b60', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'dc074328208c8da2ee43ea2cb03dbc838b7d46c9', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+            } }, this.useButton && (h("button", { key: '206f45b19bf8dd56b65ff55fb65d760e36d80ba7', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'd39cadc9a83cf7a0170144b8734a90f71d7aa9d1', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: '84896d40d79e936480052ab45d618cd73550ee87', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: 'f2c8995b6c059c2a4130018b2ff0c7eabcd7abfb', 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 && h("span", { key: '0c97309540467d56ee3415001df7a027ba581a3d', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: '9462f0c7ac028c038894ad184c7cf052e366e48c', 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 && h("span", { key: 'd6b1ca9f5991f1b2382dd4a35ae4f20832192e3c', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: '56a59f94ca27e8ef4255cabdd5fe003c602bb8d6', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '1b8fca91e893b5ade47ed63db4d4d54933c94e53', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && h("span", { key: 'fdd4f4e680fe5de55cb68c848615ec6b00f00430', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: '8cdfcc46a010fb0f503b48c34290fd096403524a', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'ec8826370cd9d8c6054ca6ab216de6baa62d90db', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }

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

@@ -83,13 +83,13 @@ export class SdPagination {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (h("div", { key: 'abfac6b075ce59ac37f747bf15729bf3879b1749', class: {
+        return (h("div", { key: 'c1925f0f312cf5c18f08f158efb599e5b6f0d503', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, h("div", { key: '6c8a3eb2ad708649054068a671cf156fe154fae3', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+            }, style: cssVars }, h("div", { key: '1f22be76697820bf455cea5476efa84a09d03c44', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'sd-pagination__item': true,
                 'sd-pagination__item--selected': this.currentPage === n,
-            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: 'f0013d0057e6addb6a7fae39ebddd2c4f7af5bd0', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: 'b85b00b637152d5071db0652b6682541fbfd6ab5', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {

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

@@ -143,7 +143,7 @@ export class SdPopover {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\"",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"bill\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"coupon\" | \"dashboard\" | \"date\" | \"delete\" | \"dot\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"launcher\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"monitor\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"shield\" | \"sidebar\" | \"star\" | \"store\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\"",
                     "references": {
                         "IconName": {
                             "location": "global",
@@ -235,7 +235,7 @@ export class SdPopover {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"bill\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"coupon\" | \"dashboard\" | \"date\" | \"delete\" | \"dot\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"launcher\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"monitor\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"shield\" | \"sidebar\" | \"star\" | \"store\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
                     "references": {
                         "IconName": {
                             "location": "global",

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

@@ -36,7 +36,7 @@ export class SdPopup {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (h("div", { key: 'ea933af50e1ad1a29cf8d73ce70222e2f44c0bb5', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: '50f1773d911175182888a98a0759b8d3d8829d2f', class: "sd-popup__header" }, h("h2", { key: '4e21a73a6e26388c6b1c814a91ee8a79bf57c576', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'dd6ace33c6d8b3e20c0c85c95580efbf8ad6747c', class: "sd-popup__body" }, h("slot", { key: 'e40fbea5b93016131df544f32b74676d2892204e' })), this.useFooter && (h("footer", { key: '96b27f465a804859a15e9105fcd64c7205bc2143', class: "sd-popup__footer" }, h("div", { key: '6715ba330610850ea235ddde5f2da00584204286', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '092aca3ad212b7218ce4ba247b78b7b45d9e4299', name: "footer-left" })), h("sd-button", { key: '290cd49879cc4868be69ceb60567eab57b5f26fe', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (h("div", { key: 'a978706454e3964818cc96b3a583880b952c2533', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: '1164fc29d4040d51b74ebc45fedc4fd19038e900', class: "sd-popup__header" }, h("h2", { key: '6ac1ea61e52f952f3bea4c4149222b4ff43b61db', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'fe8cebfc5ea513ae07e3a2987a8c7d9b36ed26e9', class: "sd-popup__body" }, h("slot", { key: 'f7ce06ae60cc8af6dbae2b24db4fd6b00e13d365' })), this.useFooter && (h("footer", { key: '84251ae1e48522fcf47d0081c9c0689e5fb236a6', class: "sd-popup__footer" }, h("div", { key: 'c7d4a8546bd185c812a98569cc3b2a818cbb2963', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '474e09481472b96ff4eacc66502aa06987b463b8', name: "footer-left" })), h("sd-button", { key: '2b23204ffad997f022dd06b772433ceb69950d04', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
     }
     static get is() { return "sd-popup"; }
     static get originalStyleUrls() {

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

@@ -48,7 +48,7 @@ export class SdPortal {
     createWrapper() {
         this.wrapper = document.createElement('div');
         Object.assign(this.wrapper.style, {
-            position: 'absolute',
+            position: 'fixed',
             top: '0',
             left: '0',
             zIndex: (this.zIndex ?? 998).toString(),
@@ -122,13 +122,13 @@ export class SdPortal {
             const wrapperRect = this.wrapper.getBoundingClientRect();
             const availableBelow = viewport.height - parentRect.bottom - offset[1] - viewportPadding;
             const availableAbove = parentRect.top - offset[1] - viewportPadding;
-            let top = parentRect.bottom + window.scrollY + offset[1];
-            let left = parentRect.left + window.scrollX + offset[0];
+            let top = parentRect.bottom + offset[1];
+            let left = parentRect.left + offset[0];
             if (availableBelow < wrapperRect.height && availableAbove > availableBelow) {
-                top = parentRect.top + window.scrollY - wrapperRect.height - offset[1];
+                top = parentRect.top - wrapperRect.height - offset[1];
             }
-            const minTop = window.scrollY + viewportPadding;
-            const maxTop = window.scrollY + viewport.height - viewportPadding - wrapperRect.height;
+            const minTop = viewportPadding;
+            const maxTop = viewport.height - viewportPadding - wrapperRect.height;
             if (maxTop < minTop) {
                 top = minTop;
             }
@@ -136,10 +136,10 @@ export class SdPortal {
                 top = Math.min(Math.max(top, minTop), maxTop);
             }
             if (parentRect.left + wrapperRect.width + offset[0] > viewport.width - viewportPadding) {
-                left = parentRect.right + window.scrollX - wrapperRect.width - offset[0];
+                left = parentRect.right - wrapperRect.width - offset[0];
             }
-            const minLeft = window.scrollX + viewportPadding;
-            const maxLeft = window.scrollX + viewport.width - viewportPadding - wrapperRect.width;
+            const minLeft = viewportPadding;
+            const maxLeft = viewport.width - viewportPadding - wrapperRect.width;
             if (maxLeft < minLeft) {
                 left = minLeft;
             }
@@ -206,21 +206,25 @@ export class SdPortal {
         }
         return scrollParents;
     }
+    isInsideTarget(target) {
+        return !!((this.wrapper?.contains(target)) ||
+            (this.parentRef?.contains(target)));
+    }
     // 외부 클릭 감지
     handleMouseDown(e) {
-        this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target));
+        this.isInsideClick = this.isInsideTarget(e.target);
     }
     handleWindowClick(e) {
         if (this.isInsideClick) {
             this.isInsideClick = false;
             return;
         }
-        if (this.wrapper?.contains(e.target))
+        if (this.isInsideTarget(e.target))
             return;
         this.close.emit();
     }
     render() {
-        return h("slot", { key: 'f7b160cb574608fa16f6edd27d259b85787e6144' });
+        return h("slot", { key: '22e09896836d017f33a9c6b92772a00fc85f8997' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {

package/dist/collection/components/sd-select/sd-select-list-item/sd-select-list-item.js

@@ -71,7 +71,7 @@ export class SdSelectListItem {
         return (
         // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        h("div", { key: '55ebe094653cb89d5c70916c3e0a2f4ccb5551f8', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        h("div", { key: 'c964b0cf5b064c74a7e063be21350bca8124d77d', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
                 'sd-select-list-item': true,
                 'sd-select-list-item--group': isGroup,
                 'sd-select-list-item--depth1-group': isDepth1Group,
@@ -81,7 +81,7 @@ export class SdSelectListItem {
                 'sd-select-list-item--focused': this.isFocused,
                 'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: 'f636931bc20264db98e521b11b819610cda764cd', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), isHtmlLabel(this.option.label) ? (h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (h("span", { key: '89750bc08c03915b738da390f4255e7451aa9d6d', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '981e055f47aa512d18d61ae938b41942197f3088', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), isHtmlLabel(this.option.label) ? (h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (h("span", { key: 'ac34372d921afcb3eba0a51bed3dd70b4e8f1d0f', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
     static get is() { return "sd-select-list-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select/sd-select-list-item-search/sd-select-list-item-search.js

@@ -41,15 +41,15 @@ export class SdSelectListItemSearch {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (h("div", { key: '6cf78c7d616dc21a7a6e806c184322d12cacb50d', class: {
+        return (h("div", { key: '6250cee5611a36f6c5fb317d7d24abeae1ed142f', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: 'dd9fa44fed1f3ec7a222dacaa710cdf32ddbe6fc', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '2d65a81b7b6160ac4e93016adea0da43d5d01ec8', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '0d5c4bb09778518aa17a210a2d1a9eb620a1dd7b', ref: el => {
+            } }, h("div", { key: 'fa48adb1406c8922b61083a19cc270f02ddab100', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '868519f09dc11fc4e9bde7a1148ce5ce666dd851', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: 'ff946fa2f360cd21eb785d13cb91e23f18abe05c', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: 'e9708437f310788bf8b9a4d358dea9b83cc88ed8', type: "button", class: {
+            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: 'e70e4c0af6e11f89d2893ae5bb28887a0ed8a5ee', type: "button", class: {
                 'sd-select-list-item-search__clear': true,
                 'sd-select-list-item-search__clear--hidden': this.searchText === '',
-            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: 'ed8b1c93809f823205f357b059a8b556e0278b1c', name: "close", size: 12, color: "#888888" })))));
+            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: '57b4af6446a565b6e1e95153e8553b1c3c363a33', name: "close", size: 12, color: "#888888" })))));
     }
     static get is() { return "sd-select-list-item-search"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select/sd-select-listbox/sd-select-listbox.js

@@ -62,14 +62,14 @@ export class SdSelectListbox {
         return count >= SEARCH_THRESHOLD;
     }
     get filteredOptions() {
-        if (this.searchKeyword === '')
+        if (this.searchKeyword == null || this.searchKeyword === '')
             return this.options;
         if (this.isDepth)
             return filterTree(this.options, this.searchKeyword);
         const keyword = this.searchKeyword.toLowerCase();
         return this.options.filter(o => {
             const labelText = isHtmlLabel(o.label) ? extractText(o.label) : o.label;
-            return labelText.toLowerCase().includes(keyword);
+            return labelText != null && labelText.toLowerCase().includes(keyword);
         });
     }
     get isEmpty() {
@@ -351,9 +351,9 @@ export class SdSelectListbox {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (h("div", { key: '6c2cbad13f8aaa8c0552068c7cbc35a147bee77d', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '052d783e27e2458aa397c77fe891dad4a440f09e', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: 'bba95f3c4475d01a65562ba079c8666e3325195d', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (h("div", { key: 'fe30af2954ea5669f2071698e6ef9e2b26244d9b', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: 'aa7ce87d8c0c7163921445325121562603edd960', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: 'e8b5b3f73653ddc5096101f7109d427de1efa93a', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (h("sd-select-list-item", { key: '2f55bbacbed71952903599db0739773176ac55fd', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
+            } }, this.showSelectAll && (h("sd-select-list-item", { key: '7fbde730eca0b8234475b714ea38a4393425410e', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
     }
     static get is() { return "sd-select-listbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sd-select/sd-select-trigger/sd-select-trigger.js

@@ -43,7 +43,7 @@ export class SdSelectTrigger {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (h("div", { key: 'b5a4f750c00889d0d9b985211063fc6b20bc2e38', ref: el => {
+        return (h("div", { key: '0a929b8c0d68e25a64c352b5ea93b2e9c5f52611', ref: el => {
                 this.triggerEl = el;
             }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
                 'sd-select-trigger': true,
@@ -54,7 +54,7 @@ export class SdSelectTrigger {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: 'be0b61c0550618602ef016504fa1672f7520fa93', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), h("sd-icon", { key: '9d60c3eeae54ce6ed9609534e3530d0349d1a3ff', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: 'd8c91e392604c462aa9228147eb18c0b2ac13851', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), h("sd-icon", { key: '1afdcb944b30b675d4d2b31d6aeaa2ce41045d36', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-trigger__icon': true,
                 'sd-select-trigger__icon--open': this.isOpen,
             } }))));

package/dist/collection/components/sd-select/sd-select.config.js

@@ -100,10 +100,10 @@ export function countLeaves(options) {
     }, 0);
 }
 export function filterTree(options, keyword) {
-    const lowerKeyword = keyword.toLowerCase();
+    const lowerKeyword = (keyword ?? '').toLowerCase();
     return options.reduce((acc, option) => {
         const labelText = isHtmlLabel(option.label) ? extractText(option.label) : option.label;
-        const selfMatch = labelText.toLowerCase().includes(lowerKeyword);
+        const selfMatch = labelText != null && labelText.toLowerCase().includes(lowerKeyword);
         if (option.children) {
             // 그룹: 자식은 항상 추가로 필터링한다.
             // - 자식 중 일치하는 게 있으면 그 자식들만 노출

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

@@ -254,15 +254,15 @@ export class SdSelect {
                 this.closeDropdown();
             },
         };
-        return (h("sd-field", { key: '29ea3526b5ef4a6f64bac810204cb7862a184503', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (h("sd-field", { key: 'fced3680a535c60d5750908acf1226426e12182b', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, h("div", { key: 'e23ef16cf8af59d2e9dd6ee39a297c4338e0a056', class: "sd-select", ref: el => {
+            } }, h("div", { key: '38d53e92c022affd40bfc7951bbcdf7e02071446', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-trigger", { key: 'b6811644cb571bb738d604ce31b233ff76a32d16', ref: el => {
+            } }, h("sd-select-trigger", { key: '9cd9bdb89db37204f9a5c312d26277da772b1209', ref: el => {
                 this.triggerComponentRef = el;
-            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'b9b191bd7eefcb4d69be21f51740dd1cd993a3e7', ...portalProps }, h("sd-select-listbox", { key: 'f04d988c8491eeea284dc4fdce91dadfd33965f8', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '8666dc885f3dcbae13011fd312eb72b7e6c906d9', ...portalProps }, h("sd-select-listbox", { key: '04e6dba3d2837cbef68ded80bd2f89c5bbe9dc01', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get is() { return "sd-select"; }
     static get originalStyleUrls() {