@sellmate/design-system 1.17.0 → 1.19.0

package/dist/cjs/sd-dropdown-button.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-DXm0PH2A.js');
 var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
 var sdButton_config = require('./sd-button.config-eTAJM2iW.js');
-var system = require('./system-CdAyz3ej.js');
+var system = require('./system-MjrAugX-.js');
 
 class DropdownManager {
     static instance;
@@ -143,6 +143,13 @@ const DROPDOWN_CHEVRON_ICON_SIZE = {
     sm: 12,
     md: 16,
 };
+// 버튼 자체의 min-width (px). split 여부에 따라 chevron 버튼이 추가되므로 별도 값을 지정.
+// TODO: 디자인 토큰으로 관리될 때 대체 예정
+const DROPDOWN_BUTTON_MIN_WIDTH = {
+    xs: { default: 44, split: 60 },
+    sm: { default: 70, split: 76 },
+    md: { default: 100, split: 106 },
+};
 const DROPDOWN_DISABLED_BACKGROUND = sdButton_config.buttonTokens.button.bg.disabled;
 const DROPDOWN_DISABLED_TEXT = sdButton_config.buttonTokens.button.text.disabled;
 const DROPDOWN_DISABLED_ICON = sdButton_config.buttonTokens.button.icon.disabled;
@@ -171,6 +178,7 @@ const SdDropdownButton = class extends BaseDropdownEvent {
     isAnimatingOut = false;
     itemIndex = -1;
     triggerRef;
+    splitContainerRef;
     menuRef;
     closeAnimationTimer;
     click;
@@ -349,10 +357,11 @@ const SdDropdownButton = class extends BaseDropdownEvent {
         return classes.join(' ');
     }
     renderDropdown(preset) {
-        if ((!this.isOpen && !this.isAnimatingOut) || !this.triggerRef)
+        const anchorRef = this.split ? this.splitContainerRef : this.triggerRef;
+        if ((!this.isOpen && !this.isAnimatingOut) || !anchorRef)
             return null;
-        return (index.h("sd-portal", { open: this.isOpen, parentRef: this.triggerRef, onSdClose: this.closeDropdown }, index.h("div", { style: { position: 'absolute', width: '0px', height: '0px' } }, index.h("div", { class: "sd-dropdown-button__menu", role: "menu", ref: el => (this.menuRef = el), style: {
-                '--sd-dropdown-button-menu-min-width': `${this.triggerRef.offsetWidth}px`,
+        return (index.h("sd-portal", { open: this.isOpen, parentRef: anchorRef, onSdClose: this.closeDropdown }, index.h("div", { class: "sd-dropdown-button__menu", role: "menu", ref: el => (this.menuRef = el), style: {
+                '--sd-dropdown-button-menu-min-width': `${anchorRef.offsetWidth}px`,
                 '--sd-dropdown-button-menu-item-color': PRESET_MENU_ITEM_COLORS[preset],
                 '--sd-dropdown-button-menu-item-active-bg': PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS[preset],
                 '--sd-dropdown-button-menu-item-active-color': PRESET_MENU_ITEM_ACTIVE_COLORS[preset],
@@ -366,7 +375,7 @@ const SdDropdownButton = class extends BaseDropdownEvent {
                         this.itemIndex = index$1;
                     }
                 } }, item.icon && (index.h("sd-icon", { class: "sd-dropdown-button__menu-item-icon", name: item.icon, size: 12, color: "var(--sd-dropdown-button-menu-item-current-color)" })), index.h("span", { class: "sd-dropdown-button__menu-item-label", innerHTML: sanitizeInlineHtml.sanitizeInlineHtml(item.label) })));
-        })))));
+        }))));
     }
     renderChevron(size) {
         const iconName = this.split ? 'etc' : 'caretDown';
@@ -378,10 +387,11 @@ const SdDropdownButton = class extends BaseDropdownEvent {
     render() {
         const { config, preset } = this.resolvedConfig;
         const triggerStyle = this.getTriggerStyle(config, preset);
+        const minWidth = DROPDOWN_BUTTON_MIN_WIDTH[config.size];
         if (this.split) {
-            return (index.h("div", { class: "sd-dropdown-button sd-dropdown-button--split" }, index.h("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen, 'label'), disabled: this.disabled, onClick: this.handleButtonClick, style: triggerStyle }, index.h("span", { class: "sd-dropdown-button__trigger-label" }, this.label)), index.h("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen, 'chevron'), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), "aria-label": "dropdown toggle", onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: triggerStyle }, this.renderChevron(config.size)), this.renderDropdown(preset)));
+            return (index.h("div", { class: "sd-dropdown-button sd-dropdown-button--split", ref: el => (this.splitContainerRef = el), style: { minWidth: `${minWidth.split}px` } }, index.h("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen, 'label'), disabled: this.disabled, onClick: this.handleButtonClick, style: triggerStyle }, index.h("span", { class: "sd-dropdown-button__trigger-label" }, this.label)), index.h("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen, 'chevron'), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), "aria-label": "dropdown toggle", onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: triggerStyle }, this.renderChevron(config.size)), this.renderDropdown(preset)));
         }
-        return (index.h("div", { class: "sd-dropdown-button" }, index.h("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: triggerStyle }, index.h("span", { class: "sd-dropdown-button__trigger-label" }, this.label), this.renderChevron(config.size)), this.renderDropdown(preset)));
+        return (index.h("div", { class: "sd-dropdown-button" }, index.h("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: { ...triggerStyle, minWidth: `${minWidth.default}px` } }, index.h("span", { class: "sd-dropdown-button__trigger-label" }, this.label), this.renderChevron(config.size)), this.renderDropdown(preset)));
     }
     static get watchers() { return {
         "isOpen": [{

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

@@ -216,21 +216,21 @@ const SdField = class {
                     : {}),
             }
             : {};
-        return (index.h("div", { key: 'a04858364c6b9afceedba2f5d7ee0e289a6b6782', class: {
+        return (index.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 } }, index.h("div", { key: '898f5af4d213745257b2666cbea56db591792054', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: '488ab5c290258d0139f677319f21a55bb6c63876', class: "sd-field__main", style: this.width !== '' && this.width !== 0
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, index.h("div", { key: 'e5c4a8aad05afb40f3eccc492135b2b968ffc646', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.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',
                 }
-                : {} }, index.h("div", { key: 'db8c388dd2c4743a287f7567cde4015cafed1d95', class: {
+                : {} }, index.h("div", { key: 'be69d7e48d90dda0872ffc43c2a1b4044e99ac00', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': addon !== '',
-            } }, addon && (index.h("div", { key: '1049369f52322fb1a4f1b4baf50b1e4ef2e9e59e', class: "sd-field__addon" }, this.icon && (index.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)), index.h("slot", { key: 'deee9ef5d166ab4d17451ad9d013b3b9d3d7aebe' })), this.errorMsg !== '' || this.errorMessage !== '' ? (index.h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && index.h("div", { class: "sd-field__hint" }, this.hint))))));
+            } }, addon && (index.h("div", { key: '2c631ac0f8b9001cf6344908cf8cbcdf182cc1a7', class: "sd-field__addon" }, this.icon && (index.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)), index.h("slot", { key: '693f20c529e5f2ea84d381e59327392edb7b4c15' })), this.errorMsg !== '' || this.errorMessage !== '' ? (index.h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && index.h("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (label == null || label === '')
@@ -400,7 +400,7 @@ const SdFloatingPopover = class {
         }
     }
     render() {
-        return index.h("slot", { key: '7931b1b9ee17e2de64a7fa87658ec7d4501f7ecd' });
+        return index.h("slot", { key: 'f20806555ad198c33a62ec938ea7b77200fa1585' });
     }
 };
 SdFloatingPopover.style = sdFloatingPortalCss();
@@ -562,7 +562,7 @@ const SdTooltip = class {
         const bodyHTML = this.message && this.message.length > 0
             ? this.message.map(line => `<div>${line}</div>`).join('')
             : this.slotContentHTML;
-        return (index.h(index.Fragment, { key: 'f00448f29503fd9adba06c7213123db1cebd4fbb' }, index.h("div", { key: '07bd69c34c0e70e1feba5a836a0a68e27c5bae19', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (index.h("slot", { name: "anchor" })) : hasLabel ? (index.h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (index.h("sd-floating-portal", { key: '5d0bb60a23c2684b554b7ccfd0950f403b52271c', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, index.h("div", { key: '71c3e01f0f053c3e0fd5cfd2ca7ea293f84dab5f', ref: el => (this.menuEl = el), class: {
+        return (index.h(index.Fragment, { key: 'c0d000057ed61fe7b6b4d92bc0df5e0c6d42d714' }, index.h("div", { key: '4ae084008ddec50e912fa81efbe3adbe0428d7ea', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (index.h("slot", { name: "anchor" })) : hasLabel ? (index.h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (index.h("sd-floating-portal", { key: 'd5a8718b4e4556b989e5439b89296a259d99c636', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, index.h("div", { key: 'e81f2704ddbc90a19c1e8dd0c4660c4b057ca895', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
@@ -570,7 +570,7 @@ const SdTooltip = class {
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, index.h("i", { key: 'afdcd221a431225919ef813eeda9c00cbf791842', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '9722c8b78eda399d00d760bf09bf588aed5ff049' })), index.h("div", { key: 'befe12ad984ca7d902ce9da41199045687fd1057', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (index.h("sd-ghost-button", { key: 'b5dad91a49447251f69676c1ff9084c096d1b28f', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
+            }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, index.h("i", { key: '735cfb9956644542afb3b9f65aea127c37d756b2', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '53bac0c98b652b580b53b206d3da77deac0eea77' })), index.h("div", { key: '50c55e606002225363364ca6b5238a55a25374ba', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (index.h("sd-ghost-button", { key: '7ab15f030aef1ecda2a3be0c08af2c7ab4992f1c', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
     }
 };
 SdTooltip.style = sdTooltipCss();

package/dist/cjs/sd-ghost-button_2.cjs.entry.js

@@ -388,7 +388,7 @@ const SdTag = class {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (index.h("span", { key: 'f5dd5e267ffdde104f36ec7f19390357dbf03610', class: "sd-tag", style: {
+        return (index.h("span", { key: 'b4d86dee7290a74d73fd27a9a4133c5c0ef9b750', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -398,7 +398,7 @@ const SdTag = class {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: '53c649171b1bba53bf71bbf8f382c0678f1a3a6f', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: '490c703ca9ce3d0516b1da89fec18045a750d715', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
 };
 SdTag.style = sdTagCss();

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DXm0PH2A.js');
-var system = require('./system-CdAyz3ej.js');
+var system = require('./system-MjrAugX-.js');
 var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
 
 const guide = {

package/dist/cjs/sd-key-value-table.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DXm0PH2A.js');
-var system = require('./system-CdAyz3ej.js');
+var system = require('./system-MjrAugX-.js');
 var component_table = require('./component.table-DIxmbGBT.js');
 
 const t = component_table.tableTokens.table;
@@ -9,8 +9,8 @@ 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),
+    thPaddingX: Number(t.header.paddingX),
+    padding: Number(t.keyValue.body.padding),
     helpIconSize: 16,
     requiredIconSize: 12,
     gap: Number(t.header.gap),
@@ -31,7 +31,7 @@ const KEY_VALUE_TABLE_COLORS = {
 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),
@@ -39,7 +39,7 @@ const KEY_VALUE_TABLE_TYPOGRAPHY = {
     tdLineHeight: Number(t.body.typography.lineHeight),
 };
 
-const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--use-top{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__search-panel{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:var(--sd-kvt-padding-y) 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)}sd-key-value-table .sd-key-value-table{width:100%;table-layout:fixed;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);border-collapse:separate;border-spacing:0;overflow:hidden}sd-key-value-table .sd-key-value-table.sd-key-value-table--use-top{border-top-left-radius:0;border-top-right-radius:0}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);box-sizing:border-box;vertical-align:middle;text-align:left;font-weight:normal;border-top:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__th,sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__td{border-top:0}sd-key-value-table .sd-key-value-table__th{width:var(--sd-kvt-th-width);background:var(--sd-kvt-th-bg);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__th-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sd-kvt-gap);width:100%;height:100%}sd-key-value-table .sd-key-value-table__label{display:inline-flex;align-items:center;gap:var(--sd-kvt-label-gap);font-family:var(--sd-kvt-label-font-family);font-size:var(--sd-kvt-label-font-size);font-weight:var(--sd-kvt-label-font-weight);line-height:var(--sd-kvt-label-line-height);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__required{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__help{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__td{background:var(--sd-kvt-td-bg);color:var(--sd-kvt-td-color)}sd-key-value-table .sd-key-value-table__td-inner{display:flex;align-items:center;width:100%;height:100%}sd-key-value-table .sd-key-value-table__td-inner>slot{display:block;flex:1 1 auto;min-width:0}sd-key-value-table .sd-key-value-table__td-inner sd-input,sd-key-value-table .sd-key-value-table__td-inner sd-textarea,sd-key-value-table .sd-key-value-table__td-inner sd-number-input,sd-key-value-table .sd-key-value-table__td-inner sd-select,sd-key-value-table .sd-key-value-table__td-inner sd-date-picker,sd-key-value-table .sd-key-value-table__td-inner sd-date-range-picker,sd-key-value-table .sd-key-value-table__td-inner sd-file-picker{width:100%}sd-key-value-table .sd-key-value-table__text{font-family:var(--sd-kvt-td-font-family);font-size:var(--sd-kvt-td-font-size);font-weight:var(--sd-kvt-td-font-weight);line-height:var(--sd-kvt-td-line-height);color:var(--sd-kvt-td-color)}`;
+const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-usetop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__search-panel{display:flex;align-items:center;justify-content:center;flex:0 0 auto;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)}sd-key-value-table .sd-key-value-table{width:100%;table-layout:fixed;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);border-collapse:separate;border-spacing:0;overflow:hidden}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-usetop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__th,sd-key-value-table .sd-key-value-table__td{height:var(--sd-kvt-row-height);box-sizing:border-box;vertical-align:middle;text-align:left;font-weight:normal;border-top:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__th,sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__td{border-top:0}sd-key-value-table .sd-key-value-table__th{padding:var(--sd-kvt-padding) var(--sd-kvt-th-padding-x);width:var(--sd-kvt-th-width);background:var(--sd-kvt-th-bg);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__th-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sd-kvt-gap);width:100%;height:100%}sd-key-value-table .sd-key-value-table__label{display:inline-flex;align-items:center;gap:var(--sd-kvt-label-gap);font-family:var(--sd-kvt-label-font-family);font-size:var(--sd-kvt-label-font-size);font-weight:var(--sd-kvt-label-font-weight);line-height:var(--sd-kvt-label-line-height);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__required{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__help{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__td{padding:var(--sd-kvt-padding);background:var(--sd-kvt-td-bg);color:var(--sd-kvt-td-color)}sd-key-value-table .sd-key-value-table__td-inner{display:flex;align-items:center;width:100%;height:100%}sd-key-value-table .sd-key-value-table__td-inner>slot{display:block;flex:1 1 auto;min-width:0}sd-key-value-table .sd-key-value-table__td-inner sd-input,sd-key-value-table .sd-key-value-table__td-inner sd-textarea,sd-key-value-table .sd-key-value-table__td-inner sd-number-input,sd-key-value-table .sd-key-value-table__td-inner sd-select,sd-key-value-table .sd-key-value-table__td-inner sd-date-picker,sd-key-value-table .sd-key-value-table__td-inner sd-date-range-picker,sd-key-value-table .sd-key-value-table__td-inner sd-file-picker{width:100%}sd-key-value-table .sd-key-value-table__text{font-family:var(--sd-kvt-td-font-family);font-size:var(--sd-kvt-td-font-size);font-weight:var(--sd-kvt-td-font-weight);line-height:var(--sd-kvt-td-line-height);color:var(--sd-kvt-td-color)}`;
 
 const SdKeyValueTable = class {
     constructor(hostRef) {
@@ -57,10 +57,12 @@ const SdKeyValueTable = class {
      */
     search = false;
     /**
-     * true이면 테이블 상단 border-radius를 0으로 처리.
-     * 다른 요소(헤더, 탭 등) 하단에 붙여 쓸 때 사용.
+     * 테이블 border-radius 제어.
+     * - 'default': 전체 radius 적용
+     * - 'usetop': 상단 radius 0 (헤더·탭 등 하단에 붙여 쓸 때)
+     * - 'full': 상하단 모두 radius 0 (요소 사이에 끼워 쓸 때)
      */
-    useTop = false;
+    radius = 'default';
     change;
     searchEvent;
     emit = (name, value) => {
@@ -147,6 +149,28 @@ const SdKeyValueTable = class {
         });
         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;
@@ -157,7 +181,8 @@ const SdKeyValueTable = class {
         else if (Array.isArray(field.thClass)) {
             field.thClass.forEach(cls => (classObj[cls] = true));
         }
-        return (index.h("th", { key: `th-${r}-${c}`, class: classObj, style: field.thStyle, scope: "row", rowSpan: thRowSpan, colSpan: thColSpan }, index.h("div", { class: "sd-key-value-table__th-inner" }, index.h("span", { class: "sd-key-value-table__label" }, field.label, field.required && (index.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 (index.h("th", { key: `th-${r}-${c}`, class: classObj, style: thStyle, scope: "row", rowSpan: thRowSpan, colSpan: thColSpan }, index.h("div", { class: "sd-key-value-table__th-inner" }, index.h("span", { class: "sd-key-value-table__label" }, field.label, field.required && (index.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;
@@ -185,8 +210,8 @@ const SdKeyValueTable = class {
             '--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-th-padding-x': `${KEY_VALUE_TABLE_LAYOUT.thPaddingX}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`,
@@ -212,7 +237,8 @@ const SdKeyValueTable = class {
         const maxCols = this.computeMaxCols(autoSkip);
         const tableEl = (index.h("table", { class: {
                 'sd-key-value-table': true,
-                'sd-key-value-table--use-top': this.useTop,
+                'sd-key-value-table--radius-usetop': this.radius === 'usetop',
+                'sd-key-value-table--radius-full': this.radius === 'full',
             }, style: cssVars }, index.h("colgroup", null, Array.from({ length: maxCols }, (_, i) => {
             if (i % 2 !== 0)
                 return index.h("col", { key: `col-${i}` });
@@ -236,7 +262,8 @@ const SdKeyValueTable = class {
             return tableEl;
         return (index.h("div", { class: {
                 'sd-key-value-table__wrapper': true,
-                'sd-key-value-table__wrapper--use-top': this.useTop,
+                'sd-key-value-table__wrapper--radius-usetop': this.radius === 'usetop',
+                'sd-key-value-table__wrapper--radius-full': this.radius === 'full',
             }, style: cssVars }, tableEl, index.h("div", { class: "sd-key-value-table__search-panel" }, index.h("sd-button", { label: "\uAC80\uC0C9", name: "neutral_outline_md", onSdClick: this.handleSearchClick }))));
     }
 };

package/dist/cjs/sd-linear-progress.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-DXm0PH2A.js');
 var component_progress = require('./component.progress-Bmg3vAAy.js');
-var system = require('./system-CdAyz3ej.js');
+var system = require('./system-MjrAugX-.js');
 
 const LINEAR_PROGRESS_COLORS = {
     track: component_progress.progressTokens.progress.color.track,
@@ -49,7 +49,7 @@ const SdLinearProgress = class {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (index.h(index.Host, { key: '49452751b0aaf5e6b49d809272620cf4b198ecc1', style: hostStyle }, index.h("div", { key: 'aec62dae8fa8d4a9d6e64e305fadc63836a1fef6', class: 'sd-linear-progress__track' }, index.h("div", { key: '0f7cce4cf0ebe6ce40cc127ab8b91fdaf88440cc', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (index.h("span", { key: 'af2f415ba6cc27c209eed2ff38b02ce58f81a861', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (index.h("span", { key: '2c21c62faf93ee809ae6fa098f7bf88e20447ca8', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && index.h("span", { key: '571c78db5fc8d7a6e4db2ed78e8c75c8be953e2f', class: 'sd-linear-progress__label' }, this.label)));
+        return (index.h(index.Host, { key: '26b1e15732e289a9a37a6d3dbea24aec1ab60ffd', style: hostStyle }, index.h("div", { key: '5162d60390656286b56f6a96fd4b3932f399412a', class: 'sd-linear-progress__track' }, index.h("div", { key: 'a46b815f935b243e4b7f8988af65167e3f87b554', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (index.h("span", { key: 'bc91914addd5addb84c7684a1f862033950905fc', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (index.h("span", { key: 'c62cdc59464823286ff42fc7e97a7a255a2beeb4', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && index.h("span", { key: '4c7c280885c8411329f99c3fe04f5ede8b1f0708', class: 'sd-linear-progress__label' }, this.label)));
     }
 };
 SdLinearProgress.style = sdLinearProgressCss();

package/dist/cjs/sd-loading-container.cjs.entry.js

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

package/dist/cjs/sd-modal-container.cjs.entry.js

@@ -117,7 +117,14 @@ const SdModalContainer = class {
         });
     }
     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/cjs/sd-pagination_4.cjs.entry.js

@@ -2,9 +2,9 @@
 
 var index = require('./index-DXm0PH2A.js');
 var constants = require('./constants-DJRV1upE.js');
-var sdTable_config = require('./sd-table.config-BjJW74Zx.js');
+var sdTable_config = require('./sd-table.config-B7MuRLoR.js');
 require('./component.table-DIxmbGBT.js');
-require('./system-CdAyz3ej.js');
+require('./system-MjrAugX-.js');
 
 const pagination = {
 	height: "24",
@@ -154,13 +154,13 @@ const SdPagination = class {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (index.h("div", { key: 'abfac6b075ce59ac37f747bf15729bf3879b1749', class: {
+        return (index.h("div", { key: 'c1925f0f312cf5c18f08f158efb599e5b6f0d503', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, index.h("div", { key: '6c8a3eb2ad708649054068a671cf156fe154fae3', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "sd-pagination__info" }, index.h("span", { class: "sd-pagination__current" }, this.currentPage), index.h("span", { class: "sd-pagination__divider" }, "/"), index.h("span", { class: "sd-pagination__last" }, this.lastPage))) : (index.h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+            }, style: cssVars }, index.h("div", { key: '1f22be76697820bf455cea5476efa84a09d03c44', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "sd-pagination__info" }, index.h("span", { class: "sd-pagination__current" }, this.currentPage), index.h("span", { class: "sd-pagination__divider" }, "/"), index.h("span", { class: "sd-pagination__last" }, this.lastPage))) : (index.h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (index.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))))), index.h("div", { key: 'f0013d0057e6addb6a7fae39ebddd2c4f7af5bd0', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), index.h("div", { key: 'b85b00b637152d5071db0652b6682541fbfd6ab5', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss();
@@ -215,9 +215,9 @@ const SdTbody = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'bc05db24c914d72f0480e0d6d9b594e21cf03153', slot: `${this.tableId}-body` }, index.h("tbody", { key: 'ba4eb8fcbc184bcd245f47093ca5acfacc3aebf3', class: { tbody: true } }, [
+        return (index.h(index.Host, { key: '1f9dba3a06233de0457c6fe7d2df39e0e406fb30', slot: `${this.tableId}-body` }, index.h("tbody", { key: '758d795512ff546ec23863a1b9a0940f5d0f445a', class: { tbody: true } }, [
             this.topSpacerHeight > 0 && (index.h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
-            index.h("slot", { key: '3c9d25b226dfb20b044a718416d3cdda13eff798' }),
+            index.h("slot", { key: 'cd9755c4f082478b1e75a6efcf9b4e7a9a9767b4' }),
             this.bottomSpacerHeight > 0 && (index.h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
         ])));
     }
@@ -392,16 +392,16 @@ const SdThead = class {
             '--table-border-color': sdTable_config.TABLE_BORDER.color,
             '--table-border-width': `${sdTable_config.TABLE_BORDER.width}px`,
         };
-        return (index.h(index.Host, { key: '822abd0e5ff71d9e55b6478d56c9277009983deb', slot: `${this.tableId}-head`, style: headStyle }, index.h("thead", { key: '7c690c49eb0d9be48637b8a6e92287fac22bf377', class: {
+        return (index.h(index.Host, { key: '1e352d3996dc6cd60acd20c22c8c426edabaa9ea', slot: `${this.tableId}-head`, style: headStyle }, index.h("thead", { key: 'd76dbdd5b03096197fe09d69c198ab3a5892106c', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, index.h("tr", { key: '81c64bb5b06d7e8525ebceaf6a229034e90f7a48', class: "tr" }, this._selectable && (index.h("th", { key: 'fe00535fb5cd54d053c17b3d3a6fa8869d483b8b', class: {
+            } }, index.h("tr", { key: 'fb0c1f8ff93ddb8682b07e9b4f55eaf56b1be41a', class: "tr" }, this._selectable && (index.h("th", { key: 'a53b9771dbec3ef7f3888bf9fc9393c683356c50', class: {
                 'th': true,
                 'th--selected': true,
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, index.h("sd-checkbox", { key: 'de1a3ddf9b3df06d8cc9b85431c31ff84b7b8218', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), index.h("div", { key: 'afe516ce212b24abcb075b6e6eb661ffcb6ce297', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (index.h("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, index.h("sd-checkbox", { key: '8dc233b34b68a5daca91a60364ec8faffeb4b21d', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), index.h("div", { key: 'bfc496c2468f3f81c1db4ffe70584a9229bd3512', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (index.h("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DXm0PH2A.js');
-var system = require('./system-CdAyz3ej.js');
+var system = require('./system-MjrAugX-.js');
 
 const popup$1 = {
 	header: {
@@ -105,7 +105,7 @@ const SdPopup = class {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (index.h("div", { key: 'ea933af50e1ad1a29cf8d73ce70222e2f44c0bb5', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, index.h("header", { key: '50f1773d911175182888a98a0759b8d3d8829d2f', class: "sd-popup__header" }, index.h("h2", { key: '4e21a73a6e26388c6b1c814a91ee8a79bf57c576', class: "sd-popup__title" }, this.popupTitle)), index.h("div", { key: 'dd6ace33c6d8b3e20c0c85c95580efbf8ad6747c', class: "sd-popup__body" }, index.h("slot", { key: 'e40fbea5b93016131df544f32b74676d2892204e' })), this.useFooter && (index.h("footer", { key: '96b27f465a804859a15e9105fcd64c7205bc2143', class: "sd-popup__footer" }, index.h("div", { key: '6715ba330610850ea235ddde5f2da00584204286', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, index.h("slot", { key: '092aca3ad212b7218ce4ba247b78b7b45d9e4299', name: "footer-left" })), index.h("sd-button", { key: '290cd49879cc4868be69ceb60567eab57b5f26fe', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (index.h("div", { key: 'a978706454e3964818cc96b3a583880b952c2533', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, index.h("header", { key: '1164fc29d4040d51b74ebc45fedc4fd19038e900', class: "sd-popup__header" }, index.h("h2", { key: '6ac1ea61e52f952f3bea4c4149222b4ff43b61db', class: "sd-popup__title" }, this.popupTitle)), index.h("div", { key: 'fe8cebfc5ea513ae07e3a2987a8c7d9b36ed26e9', class: "sd-popup__body" }, index.h("slot", { key: 'f7ce06ae60cc8af6dbae2b24db4fd6b00e13d365' })), this.useFooter && (index.h("footer", { key: '84251ae1e48522fcf47d0081c9c0689e5fb236a6', class: "sd-popup__footer" }, index.h("div", { key: 'c7d4a8546bd185c812a98569cc3b2a818cbb2963', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, index.h("slot", { key: '474e09481472b96ff4eacc66502aa06987b463b8', name: "footer-left" })), index.h("sd-button", { key: '2b23204ffad997f022dd06b772433ceb69950d04', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
     }
 };
 SdPopup.style = sdPopupCss();

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

@@ -55,7 +55,7 @@ const SdPortal = class {
     createWrapper() {
         this.wrapper = document.createElement('div');
         Object.assign(this.wrapper.style, {
-            position: 'absolute',
+            position: 'fixed',
             top: '0',
             left: '0',
             zIndex: (this.zIndex ?? 998).toString(),
@@ -129,13 +129,13 @@ const SdPortal = class {
             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;
             }
@@ -143,10 +143,10 @@ const SdPortal = class {
                 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;
             }
@@ -213,21 +213,25 @@ const SdPortal = class {
         }
         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 index.h("slot", { key: 'f7b160cb574608fa16f6edd27d259b85787e6144' });
+        return index.h("slot", { key: '22e09896836d017f33a9c6b92772a00fc85f8997' });
     }
     static get watchers() { return {
         "open": [{

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

@@ -1,8 +1,9 @@
 'use strict';
 
 var index = require('./index-DXm0PH2A.js');
-var sdSelect_config = require('./sd-select.config-DrJ4LNVz.js');
+var sdSelect_config = require('./sd-select.config-C9Ohe1QA.js');
 var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
+require('./component.listItem-Bnh0r_CA.js');
 
 const sdSelectListItemCss = () => `sd-select-list-item{display:block}sd-select-list-item .sd-select-list-item{display:flex;align-items:center;gap:var(--list-item-gap);padding:var(--list-item-padding-y) var(--list-item-padding-right) var(--list-item-padding-y) var(--list-item-padding-left);font-size:var(--list-item-font-size);line-height:var(--list-item-line-height);font-weight:var(--list-item-font-weight);background:var(--list-item-bg);color:var(--list-item-color);cursor:default;user-select:none}sd-select-list-item .sd-select-list-item--selectable{cursor:pointer}sd-select-list-item .sd-select-list-item--depth1-group{border-top:var(--list-item-border-top);font-weight:700}sd-select-list-item .sd-select-list-item--depth2-group{font-weight:500}sd-select-list-item .sd-select-list-item--focused.sd-select-list-item--selectable:not(.sd-select-list-item--disabled){background:var(--list-item-bg-hover);color:var(--list-item-color-hover)}sd-select-list-item .sd-select-list-item--selected:not(.sd-select-list-item--group){font-weight:var(--list-item-font-weight-selected);color:var(--list-item-color-selected)}sd-select-list-item .sd-select-list-item--selected.sd-select-list-item--focused{color:var(--list-item-color-hover)}sd-select-list-item .sd-select-list-item--disabled{color:var(--list-item-color-disabled);cursor:not-allowed}sd-select-list-item .sd-select-list-item__label{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-list-item .sd-select-list-item__count{flex-shrink:0;font-weight:500;color:var(--list-item-color-disabled)}sd-select-list-item .sd-select-list-item--group.sd-select-list-item--focused .sd-select-list-item__count{color:#ffffff}sd-select-list-item .sd-select-list-item__checkbox{flex-shrink:0}`;
 
@@ -80,7 +81,7 @@ const SdSelectListItem = class {
         return (
         // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        index.h("div", { key: '55ebe094653cb89d5c70916c3e0a2f4ccb5551f8', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        index.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,
@@ -90,7 +91,7 @@ const SdSelectListItem = class {
                 '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 && (index.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 })), sdSelect_config.isHtmlLabel(this.option.label) ? (index.h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.option.label)) })) : (index.h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (index.h("span", { key: '89750bc08c03915b738da390f4255e7451aa9d6d', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.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 })), sdSelect_config.isHtmlLabel(this.option.label) ? (index.h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.option.label)) })) : (index.h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (index.h("span", { key: 'ac34372d921afcb3eba0a51bed3dd70b4e8f1d0f', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
 };
 SdSelectListItem.style = sdSelectListItemCss();
@@ -143,15 +144,15 @@ const SdSelectListItemSearch = class {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (index.h("div", { key: '6cf78c7d616dc21a7a6e806c184322d12cacb50d', class: {
+        return (index.h("div", { key: '6250cee5611a36f6c5fb317d7d24abeae1ed142f', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, index.h("div", { key: 'dd9fa44fed1f3ec7a222dacaa710cdf32ddbe6fc', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: '2d65a81b7b6160ac4e93016adea0da43d5d01ec8', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.h("input", { key: '0d5c4bb09778518aa17a210a2d1a9eb620a1dd7b', ref: el => {
+            } }, index.h("div", { key: 'fa48adb1406c8922b61083a19cc270f02ddab100', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: '868519f09dc11fc4e9bde7a1148ce5ce666dd851', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.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() }), index.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() }), index.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' }, index.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' }, index.h("sd-icon", { key: '57b4af6446a565b6e1e95153e8553b1c3c363a33', name: "close", size: 12, color: "#888888" })))));
     }
 };
 SdSelectListItemSearch.style = sdSelectListItemSearchCss();