@sellmate/design-system 1.18.0 → 1.20.0

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

@@ -93,9 +93,9 @@ export class SdDatePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (h("sd-field", { key: '9e1e5cb7419027db803248a657d0d134be049637', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'fbd9adeaa08d19cac34b045aba2b3fbb8d4adc8c', class: "sd-date-picker", ref: el => {
+        return (h("sd-field", { key: 'cbd8e081f56fb2fb53854cd0937fe24e5d6d9b97', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'e7798ec50f7d22628a17a953ac87882160248de4', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: 'd51161c4b1eedcfd90832c9b6d049559ff5df08b', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'd6588d3991eff39eb717d4211b38d68f093aace5', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: '0dc6a8074fcfa63630aab7f0b126caa9f4c7b234', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: 'ce203f70a001f9caa9071fb667d9bf58f57748ec', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'c5f875bc826fa1f899205cfefe2db57da3dd34b4', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: '8626faebafac8201979e02c444279124c3261b67', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get is() { return "sd-date-picker"; }
     static get originalStyleUrls() {

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

@@ -239,7 +239,7 @@ export class SdDateRangePickerCalendar {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (h(Fragment, { key: '71f25effececd0b83d9b33201230dc615ba87a30' }, h("div", { key: 'f075474fb0be9f8e8562a013532b3cdbaadee069', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '4dfa1d65b971f7d80f0799482c8ce41522200a94', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '20149f97a5115115cc49894383ca7f989ba2b904', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (h(Fragment, { key: 'd46df258093b5c57d1b958efb7e52cabd4cb1eb4' }, h("div", { key: '04fc01524115d9b57462ad1eaf9281fe1c63dd84', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '91428a1dd98b7a9c534b28a9cd683f35935dfee2', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '26d4f7e3391c50340e0f45f018b02d11ad7bd23b', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
     }
     static get is() { return "sd-date-range-picker-calendar"; }
     static get originalStyleUrls() {

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

@@ -7,7 +7,7 @@ export class SdDivider {
         const hostStyle = {
             '--sd-divider-color': DIVIDER_COLORS.default,
         };
-        return (h(Host, { key: '886ca68599a925678d7c598daeff3bf653db513d', style: hostStyle }, h("hr", { key: 'e213413f041cda5d18a74f8c0225c840d92f7dac', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
+        return (h(Host, { key: 'd7adb8181071f7e6b1c2238c5512c332a0c9bafb', style: hostStyle }, h("hr", { key: '8d376fce5cced248a573ffb189931ce613ef79b7', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
     }
     static get is() { return "sd-divider"; }
     static get originalStyleUrls() {

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

@@ -182,21 +182,21 @@ export class SdField {
                     : {}),
             }
             : {};
-        return (h("div", { key: '9edafceb24a4fcde7cfb966f421bfb73f1b07617', class: {
+        return (h("div", { key: '76a1a2f41cafb2a665415f4e6e7bd9561aacb57f', 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: 'e5c4a8aad05afb40f3eccc492135b2b968ffc646', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'e88d62a979eaab9f6794c851813e5f56c3c5c4ac', class: "sd-field__main", style: this.width !== '' && this.width !== 0
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: 'b4219a5e3e80ead00b0cb67d6c5c8a1b25e59f57', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '91dd10be9bf9fe70615d6f4f0ee00601cab5ee4a', 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: 'be69d7e48d90dda0872ffc43c2a1b4044e99ac00', class: {
+                : {} }, h("div", { key: 'd15df53ff3d76ab9f9bd5e6ffe55f98b53c1211a', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': addon !== '',
-            } }, 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))))));
+            } }, addon && (h("div", { key: 'fa65e5f352e20ae9f533bdf93d95b2d2f3ec4d7b', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: '5c6d67ca4a72191622d14727567b8bca0975dcee', 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: 'c4f4e9392b3e6df8bba7a0f9e39bb3847ccf5931' })), 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: 'f20806555ad198c33a62ec938ea7b77200fa1585' });
+        return h("slot", { key: '77829bed54180a72d233738d1f82d9996ae29cae' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {

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

@@ -42,23 +42,8 @@ sd-ghost-button {
   cursor: not-allowed;
 }
 
-.sd-ghost-button__tooltip {
-  position: absolute;
-  left: 50%;
-  bottom: calc(100% + 4px);
-  transform: translateX(-50%) translateY(4px);
-  z-index: 1;
+.sd-ghost-button__tooltip-inner {
   display: inline-flex;
   white-space: nowrap;
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
-}
-
-.sd-ghost-button--with-tooltip:hover:not(.sd-ghost-button--disabled) .sd-ghost-button__tooltip,
-.sd-ghost-button--with-tooltip:focus-visible:not(.sd-ghost-button--disabled) .sd-ghost-button__tooltip {
-  opacity: 1;
-  visibility: visible;
-  transform: translateX(-50%) translateY(0);
+  transform: translateX(-50%);
 }

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

@@ -5,15 +5,16 @@ export class SdGhostButton {
     size = 'sm';
     intent = 'default';
     ariaLabel = '';
-    tooltipLabel = '';
+    tooltipText;
     disabled = false;
+    hostEl;
+    isTooltipOpen = false;
     click;
     hasWarnedMissingAriaLabel = false;
     componentWillLoad() {
         this.size ??= 'sm';
         this.intent ??= 'default';
         this.ariaLabel ??= '';
-        this.tooltipLabel ??= '';
     }
     handleClick = (event) => {
         if (this.disabled) {
@@ -22,6 +23,10 @@ export class SdGhostButton {
         }
         this.click.emit(event);
     };
+    handleMouseEnter = () => { this.isTooltipOpen = true; };
+    handleMouseLeave = () => { this.isTooltipOpen = false; };
+    handleFocus = () => { this.isTooltipOpen = true; };
+    handleBlur = () => { this.isTooltipOpen = false; };
     componentWillRender() {
         this.warnIfMissingAriaLabel();
     }
@@ -44,19 +49,18 @@ export class SdGhostButton {
             ? GHOST_BUTTON_DISABLED_COLORS[intent]
             : GHOST_BUTTON_CONTENT_COLORS[intent];
         const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
-        const tooltipLabel = (this.tooltipLabel ?? '').trim();
-        const hasTooltip = tooltipLabel.length > 0;
-        return (h("button", { key: 'fafdeaa60205f0190cc592ac8fdacbf140e28d6c', class: {
+        const tooltipText = (this.tooltipText ?? '').trim();
+        const hasTooltip = tooltipText.length > 0;
+        return (h("button", { key: '59b95275f6acd737d4b0d5c2187e1d40b3a6543f', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
-                'sd-ghost-button--with-tooltip': hasTooltip,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-ghost-button-size': `${sizeConfig.size}px`,
                 '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[size]}px`,
                 '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, hasTooltip && (h("span", { key: '57425145ccc76a0bf960377cb13ba06e37195fa3', class: "sd-ghost-button__tooltip", "aria-hidden": "true" }, h("sd-tag", { key: '9d097c96d701431ac92aa7fb305c418bb570bc16', name: "square_xs_grey", label: tooltipLabel }))), h("sd-icon", { key: '4b186b2fd33c70f4b47a2c736a53e1ac37bc2ebc', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && !this.disabled && (h("sd-portal", { key: 'd8ca94b6a931208c2c56eb2dbfee843935c6b666', parentRef: this.hostEl, open: true, offset: [sizeConfig.size / 2, 4], placement: "top" }, h("div", { key: '450d5dc528ad4eeb4a2a0d2920fe4553ab3f91f8', class: "sd-ghost-button__tooltip-inner", "aria-hidden": "true" }, h("sd-tag", { key: 'cc25d0e2794d3d4dc418b0c0aa1a57e4b76b56e1', name: "square_xs_grey", label: tooltipText })))), h("sd-icon", { key: 'bf9bf8bcc779011635fd34566ec7320d76f8d16b', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
     static get is() { return "sd-ghost-button"; }
     static get originalStyleUrls() {
@@ -169,16 +173,16 @@ export class SdGhostButton {
                 "attribute": "aria-label",
                 "defaultValue": "''"
             },
-            "tooltipLabel": {
+            "tooltipText": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -186,8 +190,7 @@ export class SdGhostButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "tooltip-label",
-                "defaultValue": "''"
+                "attribute": "tooltip-text"
             },
             "disabled": {
                 "type": "boolean",
@@ -211,6 +214,11 @@ export class SdGhostButton {
             }
         };
     }
+    static get states() {
+        return {
+            "isTooltipOpen": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "click",
@@ -234,4 +242,5 @@ export class SdGhostButton {
                 }
             }];
     }
+    static get elementRef() { return "hostEl"; }
 }

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: '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 () => {
+        return (h("sd-field", { key: 'bc95e469a741a7130b07b5e2ecbc3ce9a7d1799d', 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: '63661c1e1202e729bbcaedcf83d8b034a7bf2e0b', class: "sd-input__content" }, h("slot", { key: '6c17e53e77c0e6751deb664b67b7daa471bd08cc', name: "prefix" }), h("input", { key: '1572e700b110b8d98b62ef30e72a17974288473c', 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: '728316a43a96d7859849ef522c06a405f7d668b5', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: 'ec89154a98d603db8eccc5db786d3330b33713ab', 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: '70c596ef0072bf369bd59e2c58d0a6f8c6fd1b11', 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: '8dd3e79ffa2bf731850e94b9a0752aeebf13aff6', 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,6 +5,7 @@ export const KEY_VALUE_TABLE_LAYOUT = {
     rowHeight: Number(t.keyValue.height),
     thWidth: 120,
     borderRadius: Number(t.radius),
+    thPaddingX: Number(t.header.paddingX),
     padding: Number(t.keyValue.body.padding),
     helpIconSize: 16,
     requiredIconSize: 12,

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

@@ -14,10 +14,13 @@ sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table {
   border: 0;
   border-radius: 0;
 }
-sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--use-top {
+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;
@@ -36,13 +39,15 @@ sd-key-value-table .sd-key-value-table {
   border-spacing: 0;
   overflow: hidden;
 }
-sd-key-value-table .sd-key-value-table.sd-key-value-table--use-top {
+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);
-  padding: var(--sd-kvt-padding);
   box-sizing: border-box;
   vertical-align: middle;
   text-align: left;
@@ -54,6 +59,7 @@ sd-key-value-table .sd-key-value-table tbody > tr:first-child > .sd-key-value-ta
   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);
@@ -87,6 +93,7 @@ sd-key-value-table .sd-key-value-table__help {
   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);
 }

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

@@ -11,10 +11,12 @@ export class SdKeyValueTable {
      */
     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) => {
@@ -162,6 +164,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-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`,
@@ -188,7 +191,8 @@ export class SdKeyValueTable {
         const maxCols = this.computeMaxCols(autoSkip);
         const tableEl = (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 }, h("colgroup", null, Array.from({ length: maxCols }, (_, i) => {
             if (i % 2 !== 0)
                 return h("col", { key: `col-${i}` });
@@ -212,7 +216,8 @@ export class SdKeyValueTable {
             return tableEl;
         return (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, h("div", { class: "sd-key-value-table__search-panel" }, h("sd-button", { label: "\uAC80\uC0C9", name: "neutral_outline_md", onSdClick: this.handleSearchClick }))));
     }
     static get is() { return "sd-key-value-table"; }
@@ -273,25 +278,25 @@ export class SdKeyValueTable {
                 "attribute": "search",
                 "defaultValue": "false"
             },
-            "useTop": {
-                "type": "boolean",
+            "radius": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "'default' | 'useTop' | 'full'",
+                    "resolved": "\"default\" | \"full\" | \"useTop\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "true\uC774\uBA74 \uD14C\uC774\uBE14 \uC0C1\uB2E8 border-radius\uB97C 0\uC73C\uB85C \uCC98\uB9AC.\n\uB2E4\uB978 \uC694\uC18C(\uD5E4\uB354, \uD0ED \uB4F1) \uD558\uB2E8\uC5D0 \uBD99\uC5EC \uC4F8 \uB54C \uC0AC\uC6A9."
+                    "text": "\uD14C\uC774\uBE14 border-radius \uC81C\uC5B4.\n- 'default': \uC804\uCCB4 radius \uC801\uC6A9\n- 'useTop': \uC0C1\uB2E8 radius 0 (\uD5E4\uB354\u00B7\uD0ED \uB4F1 \uD558\uB2E8\uC5D0 \uBD99\uC5EC \uC4F8 \uB54C)\n- 'full': \uC0C1\uD558\uB2E8 \uBAA8\uB450 radius 0 (\uC694\uC18C \uC0AC\uC774\uC5D0 \uB07C\uC6CC \uC4F8 \uB54C)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "use-top",
-                "defaultValue": "false"
+                "attribute": "radius",
+                "defaultValue": "'default'"
             }
         };
     }

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: '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)));
+        return (h(Host, { key: '1e6aa9c81d3e9516a2f986d3f209df005de38f48', style: hostStyle }, h("div", { key: '06115d6245603c7ae54d892a23074f34db203592', class: 'sd-linear-progress__track' }, h("div", { key: '353549cb3c885cef86f114830599f375bfad8e50', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (h("span", { key: '61afec063cd8f6ccaca27217fe7b599926245192', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (h("span", { key: 'fec238b0a6c73e06db3e53c019319a21b62e2836', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '668f63765b78c1047e3b850f3a17d6b2a1b9bfd4', 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: '2ad17acec76cfb7ceba0629f055600a7240a67e8', class: {
+        return (h("div", { key: '6525405e4edafd9257be9887cca824a436b2807c', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "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)))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: 'd5f1e1e3df8b704d4a5dabe8cf7b50cc07a2699a', class: "sd-loading-container__backdrop" }), h("div", { key: '40dce62049e04a997b982ab65b47a755b6e917c7', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '9cb7a1ed52433f2d0982ceef1a298b1367a99dd4', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: 'bc581b692122ef5553e4e8eb99056b89257eb6d9', 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: '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 }))))));
+        return (h(Host, { key: '12e8bb40871556dddad6bf3e9daa1703f3a29fc3', style: hostStyle }, h("div", { key: 'b1f0282746a8a4ceabd120a1c366b836edb805c1', class: "sd-loading-modal" }, h("div", { key: '496c034608b3d31557f154f77aa7cb7c2cb9558a', 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: 'e0a57ee49f6fe46680a8e2393a00014edd76d36f', 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: 'bd0c91c279a7cd4d58a18f7bfd6e8c345ae00fcf', class: "sd-loading-modal__button" }, h("sd-button", { key: '0d03006a668333de256b2142efc9d0c374bfef45', 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-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: '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: {
+        return (h("sd-field", { key: 'f322e07238237b4b609fbc3cd819cf2856eb3e63', 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: '8e4e7561a8b42b4a8b2e1f9559f7409d17f32c14', class: {
                 'sd-number-input__content': true,
                 'sd-number-input__content--no-stepper': !this.useButton,
-            } }, 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()
+            } }, this.useButton && (h("button", { key: '642a5ce069d0af6347ecdbbb32c67ce2d8967cf4', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'd321af0b38dc8771ca58b52d079fe440551b4efc', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : 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: {
+                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: '5b84c95d1e4e8e151c9c71b8ff6513185e97dbf4', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: '0580882231474e80471085e7d91748943caf2f73', 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: '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()
+            } }), this.inputSuffix && h("span", { key: 'd24110a5913272b0379f36823507c3c6ea4102be', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: '2bcf9b96f875322b269630f14bbec6c64d55f042', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '809fb4ae2f33c4812bf329abc7dc1a9f78e9dd81', 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: 'c1925f0f312cf5c18f08f158efb599e5b6f0d503', class: {
+        return (h("div", { key: '8a2219bbc3a17951ed66501e7246f230f0495e74', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, 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: {
+            }, style: cssVars }, h("div", { key: '7e9ddb98aff7506fc3b6053d84c1be211e3d1ff7', 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: 'b85b00b637152d5071db0652b6682541fbfd6ab5', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '937554ea8d3ae71da85e2c1f49d82c99658141f0', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {

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: '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() })))));
+        return (h("div", { key: 'fd14b75d27d3006978ceae9287486d9716bbbf5a', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: 'ac0222dc9512b99cd1d1b4684b9775cd462f39fa', class: "sd-popup__header" }, h("h2", { key: 'a11bea9fac5828161090d09d06d6e1c54c390392', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'ced8961a853cdf014d602c235cfc839a648fb19e', class: "sd-popup__body" }, h("slot", { key: '142807fd74e8b32a31ffb7ed8f3dfdcb07a6a1ba' })), this.useFooter && (h("footer", { key: '35a6b42e82ec13890b4fa56bda5b9781adeff229', class: "sd-popup__footer" }, h("div", { key: '44b2471e0f302bd001fdf1e1d72485dff4af094f', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: 'd1c8e29b60eb7ce86639e336c99a48a67437103a', name: "footer-left" })), h("sd-button", { key: '67b0a8530cae73e344cdae2ac0cb48fa3bdf4827', ...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

@@ -7,6 +7,7 @@ export class SdPortal {
     viewportPadding = 0;
     zIndex = 998;
     open = false;
+    placement = 'bottom';
     close;
     container;
     wrapper;
@@ -122,10 +123,20 @@ 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 + offset[1];
+            const preferTop = (this.placement ?? 'bottom') === 'top';
+            let top;
             let left = parentRect.left + offset[0];
-            if (availableBelow < wrapperRect.height && availableAbove > availableBelow) {
+            if (preferTop) {
                 top = parentRect.top - wrapperRect.height - offset[1];
+                if (availableAbove < wrapperRect.height && availableBelow > availableAbove) {
+                    top = parentRect.bottom + offset[1];
+                }
+            }
+            else {
+                top = parentRect.bottom + offset[1];
+                if (availableBelow < wrapperRect.height && availableAbove > availableBelow) {
+                    top = parentRect.top - wrapperRect.height - offset[1];
+                }
             }
             const minTop = viewportPadding;
             const maxTop = viewport.height - viewportPadding - wrapperRect.height;
@@ -224,7 +235,7 @@ export class SdPortal {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '22e09896836d017f33a9c6b92772a00fc85f8997' });
+        return h("slot", { key: '911d01b26a26a4bb4d7c4a15b51755acb9615c3a' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {
@@ -354,6 +365,26 @@ export class SdPortal {
                 "reflect": false,
                 "attribute": "open",
                 "defaultValue": "false"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'bottom'",
+                    "resolved": "\"bottom\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottom'"
             }
         };
     }

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: 'c964b0cf5b064c74a7e063be21350bca8124d77d', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        h("div", { key: '4322a04d65e4b2e1d82d0a6b09fdf6a57cce79ca', 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: '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, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '47ae4bbe3c2fd960dcee0f1157ae8003dc45f205', 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: 'c89ba1e3ef52a1809d1252aaee5a18c40ff7cd61', 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: '6250cee5611a36f6c5fb317d7d24abeae1ed142f', class: {
+        return (h("div", { key: '94215143f5e47887943c726147739cdb1a9fcbf7', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, 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 => {
+            } }, h("div", { key: '0ff422b93d0e15f2425ef760706ae0e6e2cb79f6', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: 'cc3468339c8b76103b67182309fa3aa2baf24380', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: 'acc468ede845d0f5890c7908311443ea2aa156cf', 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: 'e70e4c0af6e11f89d2893ae5bb28887a0ed8a5ee', 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: 'b1f1539aea4eb76458794dcb041e53c7af7b91e2', 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: '57b4af6446a565b6e1e95153e8553b1c3c363a33', name: "close", size: 12, color: "#888888" })))));
+            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: 'a137986e0c801a6cf95e279edeb6a9b21cf00170', 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

@@ -351,9 +351,9 @@ export class SdSelectListbox {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        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 => {
+        return (h("div", { key: '77f3df8e7105f08340cf46ee0ce146d48b927228', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: 'bd79903b4799e6a074895e0ea2b0987a4775a8e0', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '08c5e0a70837025d62b08d85b0f5044b826dc133', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, 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) })))))));
+            } }, this.showSelectAll && (h("sd-select-list-item", { key: '918c481cc05f4839d6a133e68a90c68ddfac5fba', 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"; }