@sellmate/design-system 1.31.0 → 1.33.0

package/dist/cjs/sd-expansion-item.cjs.entry.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var index = require('./index-PIjvNamO.js');
+
+const expansionItem = {
+	title: {
+		paddingX: "16",
+		paddingY: {
+			normal: "8",
+			dense: "4"
+		},
+		gap: "12"}};
+var expansionItemTokens = {
+	expansionItem: expansionItem
+};
+
+const EXPANSION_ITEM = expansionItemTokens.expansionItem;
+
+const sdExpansionItemCss = () => `sd-expansion-item{display:block}.sd-expansion-item{overflow:hidden;background:var(--cmp-expansionItem-title-bg-default, #fff)}.sd-expansion-item__header{display:flex;width:100%;min-height:40px;align-items:center;justify-content:space-between;gap:var(--sd-expansion-item-gap);padding:var(--sd-expansion-item-padding-y) var(--sd-expansion-item-padding-x);padding-left:calc(var(--sd-expansion-item-padding-x) + var(--sd-expansion-item-indent));border:0;border-bottom:0;background:transparent;color:var(--sys-color-fg-primary, #222);font:700 14px/24px "Pretendard Variable", sans-serif;text-align:left;cursor:pointer}.sd-expansion-item__header:hover:not(:disabled){background:var(--cmp-expansionItem-title-bg-hover, #f9f9f9)}.sd-expansion-item__header:focus-visible{outline:2px solid var(--sys-color-border-accent, #0075ff);outline-offset:-2px}.sd-expansion-item--expanded .sd-expansion-item__header{border-bottom:1px solid var(--cmp-expansionItem-title-border, #e1e1e1)}.sd-expansion-item--dense .sd-expansion-item__header{min-height:32px}.sd-expansion-item--expanded .sd-expansion-item__header{background:var(--cmp-expansionItem-title-bg-expanded, #eff6ff);color:var(--cmp-expansionItem-title-text-expanded, #005cc9)}.sd-expansion-item--expanded .sd-expansion-item__header:hover:not(:disabled){background:var(--cmp-expansionItem-title-bg-expanded, #eff6ff)}.sd-expansion-item--disabled .sd-expansion-item__header{color:var(--sys-color-disabled-text, #888);cursor:not-allowed}.sd-expansion-item__body{background:var(--cmp-expansionItem-body-bg, #fff)}.sd-expansion-item__content{padding:var(--cmp-expansionItem-body-padding, 16px)}.sd-expansion-item__title{display:flex;min-width:0;flex:1;flex-direction:column}`;
+
+const SdExpansionItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.toggle = index.createEvent(this, "sdToggle", 7);
+    }
+    /** 헤더에 표시할 텍스트 */
+    title = '';
+    /** 펼침 상태 */
+    expanded = false;
+    /** compact 높이 사용 여부 */
+    dense = false;
+    /** 중첩 단계 (1~3) */
+    depth = 1;
+    hasBody = false;
+    /** body 내부 패딩 사용 여부 */
+    bodyPadding = true;
+    /** 토글 비활성화 여부 */
+    disabled = false;
+    /** 펼침 상태 변경 시 발생합니다. */
+    toggle;
+    handleToggle = () => {
+        if (this.disabled)
+            return;
+        this.expanded = !this.expanded;
+        this.toggle.emit(this.expanded);
+    };
+    handleSlotChange = (event) => {
+        const slot = event.target;
+        this.hasBody = slot.assignedNodes({ flatten: true }).some(node => node.nodeType === Node.ELEMENT_NODE || (node.textContent ?? '').trim() !== '');
+    };
+    render() {
+        const contentId = `sd-expansion-item-content-${this.title.replace(/\W+/g, '-').toLowerCase() || 'content'}`;
+        return (index.h("div", { key: 'd9914623cb545eb9782dd9f99aba586525a8db34', class: {
+                'sd-expansion-item': true,
+                'sd-expansion-item--dense': this.dense,
+                'sd-expansion-item--expanded': this.expanded,
+                'sd-expansion-item--disabled': this.disabled,
+            } }, index.h("button", { key: 'fc5b2f42015c3cf717653dc541e41a7dee526bfa', class: "sd-expansion-item__header", style: {
+                '--sd-expansion-item-padding-x': `${EXPANSION_ITEM.title.paddingX}px`,
+                '--sd-expansion-item-padding-y': `${this.dense ? EXPANSION_ITEM.title.paddingY.dense : EXPANSION_ITEM.title.paddingY.normal}px`,
+                '--sd-expansion-item-gap': `${EXPANSION_ITEM.title.gap}px`,
+                '--sd-expansion-item-indent': `${(this.depth - 1) * 32}px`,
+            }, type: "button", disabled: this.disabled, "aria-expanded": this.expanded ? 'true' : 'false', "aria-controls": contentId, onClick: this.handleToggle }, this.hasBody && index.h("sd-icon", { key: '754d7c535b20fad28f1b8efaedfa7efa44ea39d6', name: this.expanded ? 'caretUp' : 'caretDown', size: "12" }), index.h("slot", { key: '2d958b7cb20bab23861a548e45376214cc6ee50e', name: "leading" }), index.h("span", { key: '0b61cddfdebec252d8b7e22cd2586d475978fbeb', class: "sd-expansion-item__title" }, index.h("slot", { key: 'd8bf71d9589d2c642bf914bfe1bc5212559dd787', name: "title" }, this.title)), index.h("slot", { key: 'f1bf03fb094cab7e3f4c7bca41e10ea906b3e628', name: "trailing" })), index.h("div", { key: 'ff12f0643b1bdb098e2d7312f963ede03e857913', id: contentId, class: "sd-expansion-item__body", hidden: !this.expanded }, index.h("div", { key: '635b91b1ff04957b015fd81ed4ab0d84d56a793e', class: { 'sd-expansion-item__content': this.bodyPadding } }, index.h("slot", { key: '1f3937ffde6f83db745e6d362ddc2bb95a959ad5', onSlotchange: this.handleSlotChange })))));
+    }
+};
+SdExpansionItem.style = sdExpansionItemCss();
+
+exports.sd_expansion_item = SdExpansionItem;

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
-var component_field = require('./component.field-C7it8cZm.js');
-var tooltipArrow = require('./tooltipArrow-BlrFItn5.js');
+var index = require('./index-PIjvNamO.js');
+var component_field = require('./component.field-TjxaMQMn.js');
+var tooltipArrow = require('./tooltipArrow-BUV7X2B8.js');
 
 const FIELD_ADDON_ALIGN_MAP = {
     start: 'flex-start',
@@ -30,7 +30,7 @@ const FIELD_LABEL_SIZE_MAP = {
     },
 };
 
-const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--readonly .sd-field__wrapper .sd-field__control{background-color:var(--sd-system-color-field-bg-read-only);color:var(--sd-system-color-field-text-read-only)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;flex-shrink:0;width:var(--sd-field-label-width, auto);height:var(--sd-field-label-height);margin-right:var(--sd-field-label-margin-right)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;justify-content:var(--sd-field-addon-justify, flex-start);white-space:nowrap;box-sizing:border-box;flex-shrink:0;width:var(--sd-field-addon-width, auto);padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px)}sd-field .sd-field--multiline .sd-field__wrapper .sd-field__control{height:auto;min-height:var(--sd-field-wrapper-height)}sd-field .sd-field__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled):not(.sd-field--readonly) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus:not(.sd-field--readonly) .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--borderless .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--borderless.sd-field--error .sd-field__wrapper .sd-field__control:not(:hover),sd-field .sd-field.sd-field--borderless.sd-field--pass .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--borderless:not(.sd-field--disabled):not(.sd-field--readonly) .sd-field__wrapper .sd-field__control:hover,sd-field .sd-field.sd-field--borderless.sd-field--focus:not(.sd-field--readonly) .sd-field__wrapper .sd-field__control{border-color:transparent !important;background:transparent !important;box-shadow:none !important}sd-field .sd-field .sd-field__error-message{color:var(--sd-field-error-message-color);font-size:var(--sd-field-error-message-font-size);line-height:var(--sd-field-error-message-line-height);margin-top:var(--sd-field-message-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-field-hint-color);font-size:var(--sd-field-hint-font-size);line-height:var(--sd-field-hint-line-height);margin-top:var(--sd-field-message-gap)}`;
+const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field.sd-field-host--hug{display:flex;width:fit-content;max-width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--readonly .sd-field__wrapper .sd-field__control{background-color:var(--sd-system-color-field-bg-read-only);color:var(--sd-system-color-field-text-read-only)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;flex-shrink:0;width:var(--sd-field-label-width, auto);height:var(--sd-field-label-height);margin-right:var(--sd-field-label-margin-right)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;justify-content:var(--sd-field-addon-justify, flex-start);white-space:nowrap;box-sizing:border-box;flex-shrink:0;width:var(--sd-field-addon-width, auto);padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px)}sd-field .sd-field--multiline .sd-field__wrapper .sd-field__control{height:auto;min-height:var(--sd-field-wrapper-height)}sd-field .sd-field__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__main--fixed{flex:0 1 auto}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled):not(.sd-field--readonly) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus:not(.sd-field--readonly) .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--borderless .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--borderless.sd-field--error .sd-field__wrapper .sd-field__control:not(:hover),sd-field .sd-field.sd-field--borderless.sd-field--pass .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--borderless:not(.sd-field--disabled):not(.sd-field--readonly) .sd-field__wrapper .sd-field__control:hover,sd-field .sd-field.sd-field--borderless.sd-field--focus:not(.sd-field--readonly) .sd-field__wrapper .sd-field__control{border-color:transparent !important;background:transparent !important;box-shadow:none !important}sd-field .sd-field .sd-field__error-message{color:var(--sd-field-error-message-color);font-size:var(--sd-field-error-message-font-size);line-height:var(--sd-field-error-message-line-height);margin-top:var(--sd-field-message-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-field-hint-color);font-size:var(--sd-field-hint-font-size);line-height:var(--sd-field-hint-line-height);margin-top:var(--sd-field-message-gap)}`;
 
 const FORM_PARENT_TAGS = [
     'sd-input',
@@ -70,7 +70,11 @@ const SdField = class {
     hint = '';
     /** 에러 메시지 */
     errorMessage = '';
-    /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
+    /**
+     * 필드 너비 (숫자면 px, 문자열이면 그대로 적용).
+     * 지정하면 필드가 부모 폭을 다 먹지 않고 (레이블 + width) 만큼만 차지한다.
+     * 다른 요소와 나란히 놓으려면 부모를 flex 로 두면 된다.
+     */
     width = '';
     /** 필드 크기 */
     size = 'sm';
@@ -202,6 +206,11 @@ const SdField = class {
     }
     render() {
         const addon = this.addonLabel;
+        // width 가 지정되면 호스트가 부모 폭을 다 먹지 않고 (label + width) 만큼만 hug 한다.
+        const hasWidth = this.width !== '' && this.width !== 0 && this.width !== undefined;
+        const widthStyle = hasWidth
+            ? { width: typeof this.width === 'number' ? `${this.width}px` : String(this.width) }
+            : {};
         const addonTokens = component_field.fieldTokens.field.addonLabel;
         const size = this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm';
         const labelTokens = FIELD_LABEL_SIZE_MAP[size];
@@ -257,20 +266,18 @@ const SdField = class {
                     : {}),
             }
             : {};
-        return (index.h("div", { key: 'd29e49fe9ecf467f0c1ed443524fac2648dc9da4', class: {
+        return (index.h(index.Host, { key: '1a9732da019834d223e497e263fc6c5c98b117de', class: { 'sd-field-host--hug': hasWidth } }, index.h("div", { key: '875872a3a781335c0109f3221f8c6a46c6f0e5f8', class: {
                 'sd-field': true,
                 'sd-field--has-label': this.label !== '',
                 'sd-field--has-addon': addon !== '',
                 'sd-field--multiline': this.multiline,
                 'sd-field--borderless': this.borderless,
                 [this.fieldStatus]: this.fieldStatus !== '',
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, index.h("div", { key: '396173067f4a8ce38ea8ea9f5a6b9d76303b16fa', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: '3e4aab5e10cf52f116aabfe1a8d36a806eb03af4', class: "sd-field__main" }, index.h("div", { key: 'edbe4443387935e2b51469339284024429f1f0d3', class: {
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, index.h("div", { key: 'd72d11850cd82c920412b2d8ab8d2eb87b6b1c07', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: '8182b5023ccd43964b3a2a838088b254f1435a8e', class: { 'sd-field__main': true, 'sd-field__main--fixed': hasWidth }, style: widthStyle }, index.h("div", { key: 'fd0324d231bdf3877a44cdbff12e29c4fcc95fb5', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': addon !== '',
-            }, style: this.width !== '' && this.width !== 0
-                ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width }
-                : {} }, addon && (index.h("div", { key: '7ac28abf5f37b7ada42b16f81227afb5c7f8d656', class: "sd-field__addon" }, this.icon && (index.h("sd-icon", { key: 'd995424c6f620b090006cdbcf8645d2ff822e802', 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: 'd105a65b5c926b5db9dd1d68239c0a2015739aba' })), 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: '0ed9f83d5d1be42107f0d8d873694c0283c81f71', class: "sd-field__addon" }, this.icon && (index.h("sd-icon", { key: 'ee553842c50e4170b835dc7af1d98e02d1f821cb', 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: '05952088edba5a354150b9b1cf5238ce5c911f3e' })), 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 === '')
@@ -461,7 +468,7 @@ const SdFloatingPopover = class {
         }
     }
     render() {
-        return index.h("slot", { key: 'f45790ba4fc45aef991a54b409acc2791342fcdf' });
+        return index.h("slot", { key: '3bb6b4021e838211556f8d64f1714094ce53ef9c' });
     }
 };
 SdFloatingPopover.style = sdFloatingPortalCss();
@@ -622,7 +629,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: 'bdac226a4c4363e4461619b197584742e670f0dc' }, index.h("div", { key: '3455977839562a69f8ee0a8b008e197b62944eac', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, this.isAnchorMode ? (index.h("slot", { name: "anchor" })) : (index.h("sd-icon", { name: icon, size: this.iconSize ?? 12, color: color, "aria-label": this.ariaLabel || undefined, class: "sd-tooltip" }))), this.showTooltip && (index.h("sd-floating-portal", { key: '787d1240ed16df1d56d82449e8130376cc45cfa0', parentRef: this.triggerEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, index.h("div", { key: 'e8c6139f815f837b5ada7eb4d8d95a7ae47293a6', ref: el => (this.menuEl = el), class: {
+        return (index.h(index.Fragment, { key: '8e5afa1bf102cc80a55236285f2078db9e3e6d71' }, index.h("div", { key: '8b495516f54380b2dc26a38ef079042f84be80f9', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, this.isAnchorMode ? (index.h("slot", { name: "anchor" })) : (index.h("sd-icon", { name: icon, size: this.iconSize ?? 12, color: color, "aria-label": this.ariaLabel || undefined, class: "sd-tooltip" }))), this.showTooltip && (index.h("sd-floating-portal", { key: '40361756093a60edb946a0677dde60be0b816629', parentRef: this.triggerEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, index.h("div", { key: '2d8ee914d5805b63c5490afaffb86537c9aba363', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
@@ -630,7 +637,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: 'b845e04d76578972d651bf62e5580571c187367f', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '8d4dbba5fb8134ccfa4282e2344142d3427a8d1e' })), index.h("div", { key: '3d532c9ff232c51bde05543b24ce619c6ab34c9c', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (index.h("sd-ghost-button", { key: '53eb0fd00f2713451e201bb47f8b211b39287a43', 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: 'b0a78b609bee555faed3ed1ebe231b0df11fe0fd', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'fb490ceb86d93c34d775fff88b0afa4a1f0a93af' })), index.h("div", { key: '15262700844de3bf7112384f008dca8f02bdf12b', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (index.h("sd-ghost-button", { key: '611a3b913f281659b4564024d813994b4d7a4c3d', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
     }
 };
 SdTooltip.style = sdTooltipCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
+var index = require('./index-PIjvNamO.js');
 
 const SdForm = class {
     constructor(hostRef) {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
+var index = require('./index-PIjvNamO.js');
 
 const ghostButton = {
 	xxs: {

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
-var system = require('./system-B4KkVpu2.js');
+var index = require('./index-PIjvNamO.js');
+var system = require('./system-BGCBFBcM.js');
 var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
 
 const guide = {
@@ -52,7 +52,8 @@ const guide = {
 			body: {
 				fontWeight: "400",
 				fontSize: "12",
-				lineHeight: "20"},
+				lineHeight: "20"
+			},
 			color: "#222222"
 		},
 		icon: "#00973C",

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
-var system = require('./system-B4KkVpu2.js');
+var index = require('./index-PIjvNamO.js');
+var system = require('./system-BGCBFBcM.js');
 
 const table = {
 	header: {

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
+var index = require('./index-PIjvNamO.js');
 var component_progress = require('./component.progress-DimGJZAd.js');
-var system = require('./system-B4KkVpu2.js');
+var system = require('./system-BGCBFBcM.js');
 
 const LINEAR_PROGRESS_COLORS = {
     track: component_progress.progressTokens.progress.color.track,
@@ -52,7 +52,7 @@ const SdLinearProgress = class {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (index.h(index.Host, { key: 'bb8b4b933b609a42d1c342b7b480d32a48527321', style: hostStyle }, index.h("div", { key: 'd127baf4c4cf49d5c6e04ada72636c9d3fd81733', class: "sd-linear-progress__track" }, index.h("div", { key: '6251da38b070cf9f064b22ed1ecb694da41f63ec', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (index.h("span", { key: '7b15d0383e4cc391a22e4fc7e2a85bc6cd076f80', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (index.h("span", { key: '8755f23a83aede79a141a14b73337eacca0fc10d', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && index.h("span", { key: 'c874dd1ca0cb86c90a84c318790639c0f4283255', class: "sd-linear-progress__label" }, this.label)));
+        return (index.h(index.Host, { key: 'ebed80a75ed922c7a51fac5ee6e76a708476c2a5', style: hostStyle }, index.h("div", { key: '31867c35250dbb0131071d96af50eee5fc6c286d', class: "sd-linear-progress__track" }, index.h("div", { key: '379bcb00908b9c47ecb6661a0e0351deb3f5f0d8', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (index.h("span", { key: 'badb47b8d0ae486988b1f3ac40960dbb7c68ef80', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (index.h("span", { key: '0a884b1e3cdf262b7b22a2f7c2593bd4b2028d0a', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && index.h("span", { key: 'fd4fce63d80521cfa1b5a0c64d610dd4a7d7f701', class: "sd-linear-progress__label" }, this.label)));
     }
 };
 SdLinearProgress.style = sdLinearProgressCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
+var index = require('./index-PIjvNamO.js');
 
 const sdLoadingContainerCss = () => `sd-loading-container .sd-loading-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--sd-loading-container-z-index, 999);opacity:0;visibility:hidden;transition:opacity 0.2s ease, visibility 0s linear 0.2s;pointer-events:none}sd-loading-container .sd-loading-container--visible{opacity:1;visibility:visible;transition:opacity 0.2s ease, visibility 0s linear 0s;pointer-events:auto}sd-loading-container .sd-loading-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4)}sd-loading-container .sd-loading-container__content{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}sd-loading-container .sd-loading-container__message{margin:0;color:#ffffff;font-size:14px;font-weight:500;line-height:22px;text-align:center;max-width:400px;word-break:keep-all}`;
 
@@ -40,10 +40,10 @@ const SdLoadingContainer = class {
         this.prevBodyOverflow = null;
     }
     render() {
-        return (index.h("div", { key: 'c7821d4c50651217e48f424cbdfb9a32006afda4', class: {
+        return (index.h("div", { key: '2b2f22bf65020005652698c748c6f809e966c6c5', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, index.h("div", { key: 'f7674699f3dd15edd74fc3224203b59ad2a96735', class: "sd-loading-container__backdrop" }), index.h("div", { key: 'cd361e1a1f470109298459cc2872be104e382015', class: "sd-loading-container__content" }, index.h("sd-circle-progress", { key: 'c856a1e9ab203040dd8bf0d01dbdf151718aaa3e', indeterminate: true, type: "inverse" }), this.message && index.h("p", { key: '8af15dba086fb024b652db5f776d384f00fd9cf7', class: "sd-loading-container__message" }, this.message))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, index.h("div", { key: 'c2eb1da1c4e702ad318a79f952c0afaeca61cbb8', class: "sd-loading-container__backdrop" }), index.h("div", { key: '6f9640f155cd62cd49428999f4d13edead099108', class: "sd-loading-container__content" }, index.h("sd-circle-progress", { key: 'ff891f62d4534b0ce6367bc5a2972eda5fe41792', indeterminate: true, type: "inverse" }), this.message && index.h("p", { key: 'f353e27e3d8d087f60ca6c34c80e6f488f1f5ec6', class: "sd-loading-container__message" }, this.message))));
     }
 };
 SdLoadingContainer.style = sdLoadingContainerCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
+var index = require('./index-PIjvNamO.js');
 var modalStack = require('./modal-stack-DucFLON7.js');
 
 const sdModalContainerCss = () => `sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 997);pointer-events:none}sd-modal-container .sd-modal-container__layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out;pointer-events:none}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1;pointer-events:auto}sd-modal-container .sd-modal-container__modal{position:relative;z-index:1;opacity:0;transform:scale(0);pointer-events:auto;transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}`;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
+var index = require('./index-PIjvNamO.js');
 
 const pagination = {
 	height: "24",
@@ -159,13 +159,13 @@ const SdPagination = class {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (index.h("div", { key: '0b5a2e9aec83e6f6a8de3426e57b3f9a53623652', class: {
+        return (index.h("div", { key: '9ed057ae1af69f0703c7191f5f3367806d2a3081', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, index.h("div", { key: 'aa53d0366ae4678950ecd3917fd0d7011dd9608d', 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: '7808a3b793aeb0dafc3fb04b6b16ea0fc0a0beb9', 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: '1aa72933c849af4fc886cc4e5f8962710c6c40bf', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), index.h("div", { key: 'be54a6060c5811bd8b3853fb6b1f6f1b124a5856', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss();

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
-var tooltipArrow = require('./tooltipArrow-BlrFItn5.js');
+var index = require('./index-PIjvNamO.js');
+var tooltipArrow = require('./tooltipArrow-BUV7X2B8.js');
 
 const popover = {
 	"default": {
@@ -165,10 +165,10 @@ const SdPopover = class {
         const typeConfig = POPOVER_TYPE_CONFIG[this.type ?? 'default'] ?? POPOVER_TYPE_CONFIG.default;
         const menuClassName = this.menuClassName ?? '';
         const hasLeftLink = this.leftLinkLabel !== undefined && this.leftLinkLabel !== '';
-        return (index.h(index.Fragment, { key: '16cc231907c02de80749163ce4b639303e969f4a' }, this.triggerHTML !== '' ? (
+        return (index.h(index.Fragment, { key: 'f0849060d410a5ef747e7da4f0287456a465fc06' }, this.triggerHTML !== '' ? (
         // 사용자가 넘긴 slot="trigger" 콘텐츠를 감싸 클릭을 전달하는 래퍼(키보드 상호작용은 내부 트리거가 담당)
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-        index.h("span", { ref: el => (this.triggerEl = el), class: "sd-popover", "aria-label": this.ariaLabel || undefined, innerHTML: this.triggerHTML, onClick: () => this.setOpen(!this.isOpen) })) : (index.h("sd-icon", { ref: el => (this.triggerEl = el), name: this.icon ?? 'helpOutline', size: this.iconSize ?? 12, color: this.color ?? '#01BB4B', class: "sd-popover", "aria-label": this.ariaLabel || undefined, onClick: () => this.setOpen(!this.isOpen) })), this.isOpen && (index.h("sd-floating-portal", { key: 'c59ec7fb1b7ea137b95542f7e8f775c6bd837975', parentRef: this.triggerEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, index.h("div", { key: '97e68e0246997a0a73beb3e984331daa57161e8e', class: {
+        index.h("span", { ref: el => (this.triggerEl = el), class: "sd-popover", "aria-label": this.ariaLabel || undefined, innerHTML: this.triggerHTML, onClick: () => this.setOpen(!this.isOpen) })) : (index.h("sd-icon", { ref: el => (this.triggerEl = el), name: this.icon ?? 'helpOutline', size: this.iconSize ?? 12, color: this.color ?? '#01BB4B', class: "sd-popover", "aria-label": this.ariaLabel || undefined, onClick: () => this.setOpen(!this.isOpen) })), this.isOpen && (index.h("sd-floating-portal", { key: 'ac56aff939de31ac2c0c3d4fdb84795ea2d93794', parentRef: this.triggerEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, index.h("div", { key: '4a909c45f386c87b47202f366dcf29ec9c65e579', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${placement}`]: true,
@@ -176,15 +176,15 @@ const SdPopover = class {
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.description,
-            } }, index.h("i", { key: 'b96d7dc623a1fab61ee84f612c68c9f7bbac7405', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '92c6e5ef1258d6e99f744c75cef7ee3dd26d0367' })), index.h("div", { key: '9c9f3cfcc8a3d60e5282a5f6f2653e2cce17cf56', class: "sd-floating-menu__content" }, this.menuTitle && (index.h("div", { key: '044ae6b271fbf0cede0b4983e074d56882d5f50f', class: "sd-floating-menu__title", style: {
+            } }, index.h("i", { key: '577c0547175d2a9780b06ec5acc111e5f1f86fa2', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'c13302edc4af665fcfaaf191efb8e50bc7aaf847' })), index.h("div", { key: '30ec8cb2c957a99884437cc7e696518ca6865f3f', class: "sd-floating-menu__content" }, this.menuTitle && (index.h("div", { key: '12ccc7ca3b48d989d48905c83883a67e89571b7c', class: "sd-floating-menu__title", style: {
                 color: typeConfig.title,
                 display: 'flex',
                 alignItems: 'center',
                 gap: `${POPOVER_TITLE_GAP}px`,
-            } }, this.titleIcon && (index.h("sd-icon", { key: '360cf55b73ee395191836ee13a2d492460059f4a', name: this.titleIcon, size: Number(POPOVER_TITLE_ICON_SIZE), color: typeConfig.title })), index.h("span", { key: '5cc44d0806971433b42c41e48a48e7ea8cc2c975' }, this.menuTitle))), this.slotContentHTML && (index.h("div", { key: 'a5343a56938c0d6d5d5fd07fb83b7ccee4e81cf0', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), index.h("div", { key: '1f6a0f46b2b6b5f08a0d453cae2a868f93015ac7', class: {
+            } }, this.titleIcon && (index.h("sd-icon", { key: '164a41e2d4c14b715eb4387f1af0a61389faefcc', name: this.titleIcon, size: Number(POPOVER_TITLE_ICON_SIZE), color: typeConfig.title })), index.h("span", { key: '8128f3c7b098434c4405e63e6dff453f1d03706c' }, this.menuTitle))), this.slotContentHTML && (index.h("div", { key: '1647bab6f71a8a9cdcf24a5d84119bb49ad94d59', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), index.h("div", { key: '01e3b60765a680517ddf2331c2e606bcf2b8c1ee', class: {
                 'sd-floating-menu__buttons': true,
                 'sd-floating-menu__buttons--with-link': hasLeftLink,
-            } }, hasLeftLink && (index.h("sd-text-link", { key: '5ec7502837f7417266810769885e2318c80ad986', class: "sd-floating-menu__left-link", style: { '--sd-text-link-color': typeConfig.subAction }, label: this.leftLinkLabel, onSdClick: () => this.leftLinkClick.emit() })), index.h("sd-button", { key: '3d9df22cd0b65add5cd18b3750888248dc235408', name: typeConfig.buttonName, label: this.buttonLabel, ariaLabel: this.buttonLabel || 'confirm', onSdClick: () => this.buttonClick.emit() }))), index.h("sd-ghost-button", { key: '7e1ca491a2539b52ded454aca8afd26a92dc2ef6', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
+            } }, hasLeftLink && (index.h("sd-text-link", { key: 'a23b8c584d949011cbee5aa3f53b54e5b3bc7a40', class: "sd-floating-menu__left-link", style: { '--sd-text-link-color': typeConfig.subAction }, label: this.leftLinkLabel, onSdClick: () => this.leftLinkClick.emit() })), index.h("sd-button", { key: '7369617d40af365fa8f54b62cbec68e3121c2d23', name: typeConfig.buttonName, label: this.buttonLabel, ariaLabel: this.buttonLabel || 'confirm', onSdClick: () => this.buttonClick.emit() }))), index.h("sd-ghost-button", { key: 'ef95a47efa7b7ea73b6b56a2fbb13880132773a8', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
     }
 };
 SdPopover.style = sdPopoverCss();

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
+var index = require('./index-PIjvNamO.js');
 var component_overlay = require('./component.overlay-CBhFnzM2.js');
-var system = require('./system-B4KkVpu2.js');
+var system = require('./system-BGCBFBcM.js');
 
 const popup$1 = {
 	header: {
@@ -58,7 +58,7 @@ const POPUP_FOOTER = {
     shadow: `${shadowSpreadMd.x}px ${shadowSpreadMd.y}px ${shadowSpreadMd.blur}px ${shadowSpreadMd.spread}px ${shadowSpreadMd.color}`,
 };
 
-const sdPopupCss = () => `sd-popup{display:block;width:100%;height:100%}sd-popup .sd-popup{display:flex;flex-direction:column;width:100%;height:100%;background:var(--sd-popup-bg);overflow:hidden;box-sizing:border-box}sd-popup .sd-popup__header{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:100%;height:var(--sd-popup-header-height);padding:var(--sd-popup-header-padding-y) var(--sd-popup-header-padding-x);background:var(--sd-popup-header-bg);box-sizing:border-box}sd-popup .sd-popup__title{margin:0;color:var(--sd-popup-header-title-color);font-family:var(--sd-popup-header-font-family);font-weight:var(--sd-popup-header-font-weight);font-size:var(--sd-popup-header-font-size);line-height:var(--sd-popup-header-line-height);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-popup .sd-popup__body{flex:1 1 auto;min-height:0;overflow:auto}sd-popup .sd-popup__footer{display:flex;align-items:center;flex-shrink:0;width:100%;height:var(--sd-popup-footer-height);padding:var(--sd-popup-footer-padding-y) var(--sd-popup-footer-padding-x);gap:var(--sd-popup-footer-gap);background:var(--sd-popup-footer-bg);box-shadow:var(--sd-popup-footer-shadow);box-sizing:border-box;position:relative;z-index:1}sd-popup .sd-popup__footer-slot{display:flex;align-items:center;height:var(--sd-popup-footer-slot-height)}sd-popup .sd-popup__footer-slot--left{justify-content:flex-start;flex:1 1 auto;min-width:0}sd-popup .sd-popup__footer-slot:empty{display:none}sd-popup .sd-popup__submit{flex-shrink:0;margin-left:auto}`;
+const sdPopupCss = () => `sd-popup{display:block;width:100%;height:100%}sd-popup .sd-popup{display:flex;flex-direction:column;width:100%;height:100%;background:var(--sd-popup-bg);overflow:hidden;box-sizing:border-box}sd-popup .sd-popup__header{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:100%;height:var(--sd-popup-header-height);padding:var(--sd-popup-header-padding-y) var(--sd-popup-header-padding-x);background:var(--sd-popup-header-bg);box-sizing:border-box}sd-popup .sd-popup__title{margin:0;color:var(--sd-popup-header-title-color);font-family:var(--sd-popup-header-font-family);font-weight:var(--sd-popup-header-font-weight);font-size:var(--sd-popup-header-font-size);line-height:var(--sd-popup-header-line-height);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-popup .sd-popup__body{flex:1 1 auto;min-height:0;overflow:auto}sd-popup .sd-popup__body::-webkit-scrollbar{width:12px;height:12px;background:transparent}sd-popup .sd-popup__body::-webkit-scrollbar-track{background:transparent}sd-popup .sd-popup__body::-webkit-scrollbar-thumb{background-color:#CCCCCC;border:2px solid transparent;border-radius:8px;background-clip:padding-box}@supports not selector(::-webkit-scrollbar){sd-popup .sd-popup__body{scrollbar-width:thin;scrollbar-color:#CCCCCC transparent}}sd-popup .sd-popup__body::-webkit-scrollbar,sd-popup .sd-popup__body::-webkit-scrollbar-track{background:#F6F6F6}@supports not selector(::-webkit-scrollbar){sd-popup .sd-popup__body{scrollbar-color:#CCCCCC #F6F6F6}}sd-popup .sd-popup__body::-webkit-scrollbar-track:vertical{border-left:1px solid #E1E1E1}sd-popup .sd-popup__body::-webkit-scrollbar-track:horizontal{border-top:1px solid #E1E1E1}sd-popup .sd-popup__body::-webkit-scrollbar-thumb:vertical{border-left-width:3px}sd-popup .sd-popup__body::-webkit-scrollbar-thumb:horizontal{border-top-width:3px}sd-popup .sd-popup__footer{display:flex;align-items:center;flex-shrink:0;width:100%;height:var(--sd-popup-footer-height);padding:var(--sd-popup-footer-padding-y) var(--sd-popup-footer-padding-x);gap:var(--sd-popup-footer-gap);background:var(--sd-popup-footer-bg);box-shadow:var(--sd-popup-footer-shadow);box-sizing:border-box;position:relative;z-index:1}sd-popup .sd-popup__footer-slot{display:flex;align-items:center;height:var(--sd-popup-footer-slot-height)}sd-popup .sd-popup__footer-slot--left{justify-content:flex-start;flex:1 1 auto;min-width:0}sd-popup .sd-popup__footer-slot:empty{display:none}sd-popup .sd-popup__submit{flex-shrink:0;margin-left:auto}`;
 
 const DEFAULT_SUBMIT_BUTTON_PROPS = {
     name: 'primary_md',
@@ -104,7 +104,7 @@ const SdPopup = class {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (index.h("div", { key: '1b8dc171a7b0dea5216aa63425ccc72ae80e3a3e', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, index.h("header", { key: '1ae57ef360ad124a2afac3340258dce481bb7bc7', class: "sd-popup__header" }, index.h("h2", { key: '3d0cc0df6ba901b4dc9e0917103e57d6279cde31', class: "sd-popup__title" }, this.popupTitle)), index.h("div", { key: 'a0fee226ac513744243d6f78ddce6125170700da', class: "sd-popup__body" }, index.h("slot", { key: '55c5f94dff5413810f2c4648c9684e520db7268b' })), this.useFooter && (index.h("footer", { key: 'f8f0dc3751324ac5976aef55bec974341db036c1', class: "sd-popup__footer" }, index.h("div", { key: 'ea2f7e63c857d135eeffd7c2a43b171619067161', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, index.h("slot", { key: '0d56c0c25e1e10f6900af0f632c7bb339b736032', name: "footer-left" })), index.h("sd-button", { key: 'd334174cd98be32856a6f3b1b3348ca2ebea3cdd', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (index.h("div", { key: 'e899263de5d4302c9a58c8e22ca1366abcd43587', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, index.h("header", { key: '53e061eec94ad45d381fb15e94dff0f690a20223', class: "sd-popup__header" }, index.h("h2", { key: '39fcc038b4e903fcb4d86ec6e0e70d73873138e9', class: "sd-popup__title" }, this.popupTitle)), index.h("div", { key: 'df51ca67e7107f8b221500613d97d823cf94bb8a', class: "sd-popup__body" }, index.h("slot", { key: 'cbeeddd919167af08e67b9d15fe90099b40a7725' })), this.useFooter && (index.h("footer", { key: '8811d33320a3034b38f11628bced2aa7dc07df80', class: "sd-popup__footer" }, index.h("div", { key: 'c58051284ec4d304ec49782f1ef05a9e6622888a', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, index.h("slot", { key: '4b5bdf0dd89940af008ffc09f527c19afdcb8f84', name: "footer-left" })), index.h("sd-button", { key: '7257231b31aa62b47af221bc5899ba3960c8c2af', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
     }
 };
 SdPopup.style = sdPopupCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
+var index = require('./index-PIjvNamO.js');
 
 const radioButton = {
 	xs: {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
+var index = require('./index-PIjvNamO.js');
 
 const radio = {
 	size: "16",
@@ -10,9 +10,11 @@ const radio = {
 		"default": {
 			fontWeight: "400",
 			fontSize: "12",
-			lineHeight: "20"},
+			lineHeight: "20"
+		},
 		selected: {
-			fontWeight: "500"}
+			fontWeight: "500"
+		}
 	},
 	bg: {
 		"default": "#FFFFFF",

package/dist/cjs/sd-scroll-area.cjs.entry.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var index = require('./index-PIjvNamO.js');
+var system = require('./system-BGCBFBcM.js');
+
+const SCROLL_AREA_COLORS = {
+    border: system.systemTokens.color.border.default,
+};
+
+const sdScrollAreaCss = () => `sd-scroll-area{display:block;min-width:0;min-height:0}.sd-scroll-area__viewport{width:100%;height:100%}.sd-scroll-area__viewport::-webkit-scrollbar{width:12px;height:12px;background:transparent}.sd-scroll-area__viewport::-webkit-scrollbar-track{background:transparent}.sd-scroll-area__viewport::-webkit-scrollbar-thumb{background-color:#CCCCCC;border:2px solid transparent;border-radius:8px;background-clip:padding-box}@supports not selector(::-webkit-scrollbar){.sd-scroll-area__viewport{scrollbar-width:thin;scrollbar-color:#CCCCCC transparent}}.sd-scroll-area__viewport--bg::-webkit-scrollbar,.sd-scroll-area__viewport--bg::-webkit-scrollbar-track{background:#F6F6F6}@supports not selector(::-webkit-scrollbar){.sd-scroll-area__viewport--bg{scrollbar-color:#CCCCCC #F6F6F6}}.sd-scroll-area__viewport--bordered::-webkit-scrollbar-track:vertical{border-left:1px solid var(--sd-scroll-area-border-color)}.sd-scroll-area__viewport--bordered::-webkit-scrollbar-track:horizontal{border-top:1px solid var(--sd-scroll-area-border-color)}.sd-scroll-area__viewport--bordered::-webkit-scrollbar-thumb:vertical{border-left-width:3px}.sd-scroll-area__viewport--bordered::-webkit-scrollbar-thumb:horizontal{border-top-width:3px}.sd-scroll-area__viewport--vertical{overflow-x:hidden;overflow-y:auto}.sd-scroll-area__viewport--horizontal{overflow-x:auto;overflow-y:hidden}.sd-scroll-area__viewport--both{overflow:auto}`;
+
+const SdScrollArea = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** 스크롤 방향. vertical=세로만, horizontal=가로만, both=양방향 */
+    axis = 'both';
+    /** true면 스크롤바 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다. */
+    background = false;
+    /** true면 스크롤바와 콘텐츠 사이에 1px 구분선을 그린다. 컨테이너 테두리가 아니다. */
+    bordered = false;
+    /** viewport 최대 높이 (예: '400px'). 비우면 호스트 크기를 따른다. */
+    maxHeight = '';
+    /** viewport 최대 너비 (예: '480px'). 비우면 호스트 크기를 따른다. */
+    maxWidth = '';
+    render() {
+        const viewportStyle = {
+            '--sd-scroll-area-border-color': SCROLL_AREA_COLORS.border,
+        };
+        if (this.maxHeight !== '')
+            viewportStyle.maxHeight = this.maxHeight;
+        if (this.maxWidth !== '')
+            viewportStyle.maxWidth = this.maxWidth;
+        return (index.h(index.Host, { key: '238d7d1221187a0c679b486e7f2dd61fa902bc94' }, index.h("div", { key: 'cfe4d56bdc5c8749f84fa42990eab6b872bc9e10', class: {
+                'sd-scroll-area__viewport': true,
+                [`sd-scroll-area__viewport--${this.axis}`]: true,
+                'sd-scroll-area__viewport--bg': this.background,
+                'sd-scroll-area__viewport--bordered': this.bordered,
+            }, style: viewportStyle }, index.h("slot", { key: 'be9fbcce4477fd96a485af314f561cbd538faac4' }))));
+    }
+};
+SdScrollArea.style = sdScrollAreaCss();
+
+exports.sd_scroll_area = SdScrollArea;

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
-var component_listItem = require('./component.listItem-cAO_ppOz.js');
+var index = require('./index-PIjvNamO.js');
+var component_listItem = require('./component.listItem-CfZSDrA7.js');
 var component_listBox = require('./component.listBox-MHAv4Yy7.js');
 var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
 
@@ -12,7 +12,8 @@ const select = {
 		typography: {
 			fontWeight: "400",
 			fontSize: "12",
-			lineHeight: "20"}},
+			lineHeight: "20"
+		}},
 	icon: {
 		"default": "#888888",
 		disabled: "#BBBBBB"
@@ -213,7 +214,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: '4fff470052d5d02cddf204f33df24247e087a55d', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        index.h("div", { key: '20492e7ba882ac768bee279fe1506e69186ec958', 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,
@@ -223,7 +224,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: '45649f31743eac574560399b07c9ba94d7185013', 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) ? (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: '2e2c1dca85ed4be38cf8435df86f8ea4b7273673', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: '1b413ea873fb41380928bbc1de435242966e8649', 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) ? (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: 'b6b97fcfc49794b61ec27e48680a0168ce895a6b', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
 };
 SdSelectListItem.style = sdSelectListItemCss();
@@ -280,20 +281,20 @@ const SdSelectListItemSearch = class {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (index.h("div", { key: '3231c0ea91e678a71cac6a1c5805fa255a96deb2', class: {
+        return (index.h("div", { key: 'e461ae14d90896bf0abfbe357b0d8068c25b439b', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, index.h("div", { key: 'f25df864ea6bbe2db7c0ca8e1abc0645f11b12f3', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: '494d5b964543e3a595629c02ef7b61b492d26eed', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.h("input", { key: '475b925b7987d98fb0a46d6b63a0a9edd2db00ae', ref: el => {
+            } }, index.h("div", { key: '870b68748e166f56fbf921ab6431e165c397278c', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: '0252b5648c10042ce7b7db6af880f00a0f81f50a', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.h("input", { key: '5154a2d317f66d4722dfcd4f9ae8a87a3e9d651f', 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: '26fa161589df77bea51e4568bfd2d501008a0846', 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: 'a6d7e8ee24139325d66ff0e987d6b1140ea88ea7', 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: 'aca5037c9dbc171f201cc02e7a2d00f49e6e6397', 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: '03a33242101dbe710cb3c3327b6f2c695d76baab', name: "close", size: 12, color: "#888888" })))));
     }
 };
 SdSelectListItemSearch.style = sdSelectListItemSearchCss();
 
-const sdSelectListboxCss = () => `:host{display:block}:host .sd-select-listbox{display:flex;flex-direction:column;width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden;outline:none}:host .sd-select-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:0}:host .sd-select-listbox__list::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}:host .sd-select-listbox__list::-webkit-scrollbar:horizontal{height:8px}:host .sd-select-listbox__list::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}:host .sd-select-listbox__list::-webkit-scrollbar-track{background-color:#E5E5E5}:host .sd-select-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
+const sdSelectListboxCss = () => `:host{display:block}:host .sd-select-listbox{display:flex;flex-direction:column;width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden;outline:none}:host .sd-select-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:0}:host .sd-select-listbox__list::-webkit-scrollbar{width:12px;height:12px;background:transparent}:host .sd-select-listbox__list::-webkit-scrollbar-track{background:transparent}:host .sd-select-listbox__list::-webkit-scrollbar-thumb{background-color:#CCCCCC;border:2px solid transparent;border-radius:8px;background-clip:padding-box}@supports not selector(::-webkit-scrollbar){:host .sd-select-listbox__list{scrollbar-width:thin;scrollbar-color:#CCCCCC transparent}}:host .sd-select-listbox__list::-webkit-scrollbar,:host .sd-select-listbox__list::-webkit-scrollbar-track{background:#F6F6F6}@supports not selector(::-webkit-scrollbar){:host .sd-select-listbox__list{scrollbar-color:#CCCCCC #F6F6F6}}:host .sd-select-listbox__list::-webkit-scrollbar-track:vertical{border-left:1px solid #E1E1E1}:host .sd-select-listbox__list::-webkit-scrollbar-track:horizontal{border-top:1px solid #E1E1E1}:host .sd-select-listbox__list::-webkit-scrollbar-thumb:vertical{border-left-width:3px}:host .sd-select-listbox__list::-webkit-scrollbar-thumb:horizontal{border-top-width:3px}:host .sd-select-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
 
 const SdSelectListbox = class {
     constructor(hostRef) {
@@ -660,9 +661,9 @@ const SdSelectListbox = class {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (index.h("div", { key: '1686c9749284be82edcf4eaf9c4741e1be3920d4', class: "sd-select-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-list-item-search", { key: '934e1bf38324bda71e0c4c956fd8ad82eb9c4f46', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '33ec8b142a0f60b329fcd58bc8952d3577c92f83', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (index.h("div", { key: 'c336ef386ead6881694925cc3e1fb1cd99e92037', class: "sd-select-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-list-item-search", { key: '9b8db37fbd34b71e2206e6919c122fa2666a68f9', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '5e02d3d337dd337c2029c50a7582abd0dbaafd33', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (index.h("sd-select-list-item", { key: '46d1f11884ed2fa9a55144fbf0633cb78f2f8ec3', 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 ? (index.h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.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 && (index.h("sd-select-list-item", { key: '955b332da48d42a76637827e966568af3b495b39', 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 ? (index.h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.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 watchers() { return {
         "searchKeyword": [{
@@ -730,7 +731,7 @@ const SdSelectTrigger = class {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (index.h("div", { key: '3e5b42da3a391f52f597594ccf9ebf9e9b236ccc', ref: el => {
+        return (index.h("div", { key: 'e69f1033d563735330a3ca334bed2cdadbff8b64', ref: el => {
                 this.triggerEl = el;
             }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
                 'sd-select-trigger': true,
@@ -741,7 +742,7 @@ const SdSelectTrigger = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: '56938d493425d54b2c69840014b0354674fcf9d6', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (index.h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.displayText)) })) : (index.h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), index.h("sd-icon", { key: '90e7df2f8bd416ccd1545c78c79f02746c119db3', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: 'e64c73dbafbbcf4b4f487669cc7fc2513e68b371', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (index.h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.displayText)) })) : (index.h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), index.h("sd-icon", { key: '7607b8286ac5b9ee0d04c3b89153372d225093d9', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-trigger__icon': true,
                 'sd-select-trigger__icon--open': this.isOpen,
             } }))));