@sellmate/design-system 1.26.0 → 1.26.1

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

@@ -37,6 +37,8 @@ export class SdChipInput {
     recommendedItems = [];
     /** 추천 항목 로딩 중 여부 */
     loadingRecommendedItems = false;
+    /** 자동완성 드롭다운 최소 너비 (숫자면 px, 문자열이면 그대로 적용. 없으면 입력 필드 너비를 사용) */
+    autocompleteMinWidth;
     // sd-field props
     /** 레이블 텍스트 */
     label = '';
@@ -67,6 +69,7 @@ export class SdChipInput {
     inputEl;
     formField;
     chipInputRef;
+    fieldRef;
     get value() {
         return this.internalValues;
     }
@@ -386,13 +389,11 @@ export class SdChipInput {
             this.inputValue === '' &&
             !this.suppressRecommendations &&
             (recommendedItems.length > 0 || this.loadingRecommendedItems);
-        const showDropdown = showAutocomplete || showRecommendations;
-        const dropdownItems = showAutocomplete ? suggestions : recommendedItems;
-        const isDropdownLoading = showAutocomplete
-            ? this.loadingSuggestions && suggestions.length === 0
-            : this.loadingRecommendedItems && recommendedItems.length === 0;
-        const suggestionBoxStyle = {
-            width: `${this.chipInputRef?.offsetWidth ?? 0}px`,
+        const isAutocompleteLoading = showAutocomplete && this.loadingSuggestions && suggestions.length === 0;
+        const isRecommendationLoading = showRecommendations && this.loadingRecommendedItems && recommendedItems.length === 0;
+        const autocompleteListItems = showAutocomplete ? suggestions : [];
+        const recommendationListItems = showRecommendations ? recommendedItems : [];
+        const suggestionBoxBaseStyle = {
             display: 'flex',
             flexDirection: 'column',
             boxSizing: 'border-box',
@@ -405,6 +406,22 @@ export class SdChipInput {
             overflowX: 'hidden',
             outline: 'none',
         };
+        // 추천리스트는 입력창 전체 너비를 기준으로 노출된다.
+        const suggestionBoxStyle = {
+            ...suggestionBoxBaseStyle,
+            width: `${this.chipInputRef?.offsetWidth ?? 0}px`,
+        };
+        // 자동완성은 입력 중인 칩(필드) 기준으로 노출되며, 최소 너비를 유지한 채 텍스트 길이에 따라 늘어난다.
+        const autocompleteMinWidth = this.autocompleteMinWidth != null
+            ? typeof this.autocompleteMinWidth === 'number'
+                ? `${this.autocompleteMinWidth}px`
+                : this.autocompleteMinWidth
+            : `${this.fieldRef?.offsetWidth ?? 0}px`;
+        const autocompleteBoxStyle = {
+            ...suggestionBoxBaseStyle,
+            width: 'max-content',
+            minWidth: autocompleteMinWidth,
+        };
         const suggestionItemStyle = {
             display: 'flex',
             flexShrink: '0',
@@ -431,38 +448,20 @@ export class SdChipInput {
             fontFamily: CHIP_INPUT_SUGGESTIONS.itemFontFamily,
             color: CHIP_INPUT_SUGGESTIONS.emptyColor,
         };
-        return (h("sd-field", { key: '5f654a66d1ba404b156c0fabcebd5006d033f67a', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: [this.duplicateRule, ...(this.rules ?? [])], error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: 'c1b4648298f16f4d7ee5b4ef8b75da7ae380c70d', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (h("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (h("div", { key: 'b838efe46b7b62be09c3ac5acc8c3d522d2859bf', class: {
+        return (h("sd-field", { key: 'c5f94bcc3343549d225d8310e98d424bd74471e5', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: [this.duplicateRule, ...(this.rules ?? [])], error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: '40a0d8d08b33ff454eae29e815afd0378b93d927', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (h("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (h("div", { key: 'c40b423a77272adaded79c3bc45af2084ef76ecf', class: {
                 'sd-chip-input__field': true,
                 'sd-chip-input__field--filled': this.inputValue !== '',
                 'sd-chip-input__field--empty': this.inputValue === '' && this.internalValues.length > 0 && !this.focused,
-            }, "data-value": this.inputValue !== ''
+            }, ref: el => (this.fieldRef = el), "data-value": this.inputValue !== ''
                 ? this.inputValue
                 : this.internalValues.length === 0
                     ? this.placeholder
-                    : '' }, h("input", { key: '6d29024fd020e9a7e2ff2c68eb64aa6b1790f7c5', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (
+                    : '' }, h("input", { key: '05ff9dc453577cb53a6284b9d064ef3e572bbc83', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-        h("div", { key: 'e816bb2bab75cb2f2862913d3e18b4c8ea6e3d1b', class: "sd-chip-input__reset",
+        h("div", { key: 'f2e5336974905e3b7672567b29ad4f902ed2bcdf', class: "sd-chip-input__reset",
             // 리셋 버튼 클릭 시 input blur → portal unmount → refocus → 새 portal mount로
             // 두 wrapper가 body에 잠깐 겹치는 타이밍 이슈를 방지한다.
-            onMouseDown: e => e.preventDefault() }, this.inputValue === '' && h("span", { key: '1c53892f50b7f7c3ce2bdb681dc745b5922bef48', class: "sd-chip-input__divider" }), this.maxCount != null && (h("span", { key: '07efa515dce065f89642966da96cb4c4b90d6da9', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (h("sd-text-link", { key: 'a021bbe5ec6e0a74b58b758ec33088be7c2bbb00', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), h("sd-portal", { key: '3b6b9044053fca449a225d68125a25796e4b3e20', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, h("div", { key: '9095dc0dfb4755b430910f6b5c43196f0aa24501', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (h("div", { key: '82aa5105a054a76ca3d8da78ef519bd8fc78f122', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), showRecommendations ? (h("div", { style: {
-                display: 'flex',
-                flexWrap: 'wrap',
-                gap: '8px',
-                padding: '12px',
-            } }, recommendedItems.map((item, i) => {
-            const isSelected = (this.internalValues ?? []).includes(item);
-            const isActive = i === this.activeSuggestionIndex && !isSelected;
-            return (h("div", { key: item, role: "option", tabIndex: -1, "aria-selected": isSelected || isActive, "aria-disabled": isSelected ? 'true' : undefined, style: {
-                    cursor: isSelected ? 'default' : 'pointer',
-                    borderRadius: '999px',
-                    outline: isActive ? '2px solid #0075FF' : undefined,
-                    outlineOffset: '1px',
-                }, onMouseDown: e => {
-                    e.preventDefault();
-                    if (!isSelected)
-                        this.addChip(item);
-                } }, h("sd-chip", { value: item, disabled: isSelected, editable: false, showRemove: false })));
-        }))) : (dropdownItems.map((item, i) => {
+            onMouseDown: e => e.preventDefault() }, this.inputValue === '' && h("span", { key: '65f0bcd6086029ab9637dd6c7a64524478c11e76', class: "sd-chip-input__divider" }), this.maxCount != null && (h("span", { key: 'd4702a86e9f1ca03bf74937dfb9e0c822e9722bf', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (h("sd-text-link", { key: '70a5d27129e37e49d8d8d7f92b6ad9471575fa71', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), h("sd-portal", { key: '24e9ac9124c514debc6df00ed663c20ac0f92bf7', class: "sd-chip-input__autocomplete-portal", open: showAutocomplete, parentRef: this.fieldRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, h("div", { key: 'd0e7697fc7a8a754d6b1ce6a34c205bbc7630a81', class: "sd-chip-input__suggestions sd-chip-input__suggestions--autocomplete", role: "listbox", style: autocompleteBoxStyle }, isAutocompleteLoading && (h("div", { key: '2709073f6174ede46b5d9e4d0c72f9b2dc207c54', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), autocompleteListItems.map((item, i) => {
             const isSelected = (this.internalValues ?? []).includes(item);
             const isActive = i === this.activeSuggestionIndex && !isSelected;
             return (h("div", { key: item, class: {
@@ -488,6 +487,24 @@ export class SdChipInput {
                     if (!isSelected)
                         this.addChip(item);
                 } }, h("span", { style: { flex: '1' } }, item), isSelected && (h("sd-icon", { name: "check", size: "12", style: { color: '#0075FF', flexShrink: '0' } }))));
+        }))), h("sd-portal", { key: '96424b38ffe1ec646b48fdea0b65cdb9dbc2caf7', class: "sd-chip-input__recommendation-portal", open: showRecommendations, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, h("div", { key: '2ae809c5d03b662e98252768ac3f7ac44730dbb7', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isRecommendationLoading && (h("div", { key: '3dbf23b89e923762c0ee092f9f5f724a043bd3a6', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), h("div", { key: 'ebbccb03b333bed84a88d1ca10f0e4e142211582', style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: '8px',
+                padding: '12px',
+            } }, recommendationListItems.map((item, i) => {
+            const isSelected = (this.internalValues ?? []).includes(item);
+            const isActive = i === this.activeSuggestionIndex && !isSelected;
+            return (h("div", { key: item, role: "option", tabIndex: -1, "aria-selected": isSelected || isActive, "aria-disabled": isSelected ? 'true' : undefined, style: {
+                    cursor: isSelected ? 'default' : 'pointer',
+                    borderRadius: '999px',
+                    outline: isActive ? '2px solid #0075FF' : undefined,
+                    outlineOffset: '1px',
+                }, onMouseDown: e => {
+                    e.preventDefault();
+                    if (!isSelected)
+                        this.addChip(item);
+                } }, h("sd-chip", { value: item, disabled: isSelected, editable: false, showRemove: false })));
         })))))));
     }
     static get is() { return "sd-chip-input"; }
@@ -823,6 +840,25 @@ export class SdChipInput {
                 "attribute": "loading-recommended-items",
                 "defaultValue": "false"
             },
+            "autocompleteMinWidth": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC790\uB3D9\uC644\uC131 \uB4DC\uB86D\uB2E4\uC6B4 \uCD5C\uC18C \uB108\uBE44 (\uC22B\uC790\uBA74 px, \uBB38\uC790\uC5F4\uC774\uBA74 \uADF8\uB300\uB85C \uC801\uC6A9. \uC5C6\uC73C\uBA74 \uC785\uB825 \uD544\uB4DC \uB108\uBE44\uB97C \uC0AC\uC6A9)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete-min-width"
+            },
             "label": {
                 "type": "string",
                 "mutable": false,

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

@@ -31,7 +31,7 @@ export class SdCircleProgress {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (h(Host, { key: 'b5b95509acbc4ce797cb30163e9e732cb4497ccc', style: hostStyle }, h("svg", { key: 'dc0ad68b03996e71c5d60fbc98a5ee017dcf1442', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '48f479dfe00730a41fc4020c2c4c42e14c54c42e', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '2d2a54ff75db11c87e21a7953d3580832e4511be', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: '8c393fe080a5d893bdbb90670bdba0cf76a285f6', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: '2bbad3b1a3ab35696b62e97c9627a152ae8f7bf6', class: "sd-circle-progress__label" }, this.label)));
+        return (h(Host, { key: '49f42179ae3f58775dda407b2a0fe3ad01baf2b8', style: hostStyle }, h("svg", { key: 'f2bcc5ae953409481b823fc7dd754f1e68bc47d8', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '1dbbe8d19a29cd271c8fa483497ca085ee10831f', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '86e6514b2986e5574a78e15e0e3299d8cde858cc', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: '38d0dfc1f810acbe086852b24d83af2d4f707f2a', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: 'b10ae78d8b3894b89f0096bea66773006bf526e9', class: "sd-circle-progress__label" }, this.label)));
     }
     static get is() { return "sd-circle-progress"; }
     static get originalStyleUrls() {

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

@@ -88,9 +88,9 @@ export class SdConfirmModal {
         const type = this.resolvedType;
         const iconName = CONFIRM_MODAL_ICON_MAP[type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
-        return (h("div", { key: 'e8fcb4879a5a9f2b3bf41753e4cc511e710db1f6', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'a8595db97066963534d0ee5529f39481ed1e6c27', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '3b5cf4842176f6c039ecb64ec7942e7cb5a6f1ac', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '6f7032707292e71e0f8adc655ce88487c08e1b8d', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'e21c66301b368ffd989063aaf9826e023de71925', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '3965561001b0520f491cac833bba3cfe92d7a200', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (h("div", { key: 'dc2c38a945493e42d451e4fa3d3ebaa6dca75e4a', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (h("div", { key: '396bef971efaab6638586fa1a067eae54c1897f4', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: '4716168808371f4515bf763e77198386fc9fe7cf', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '1ab7ca2c5262374a0823a8e5c501758433c25051', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: 'a190f975d27153e4d928c95395f13ecd8ba0667a', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'da7821097377b7a9781df87ae40b2439a103ff9b', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: 'ced23315888ad43b3d91b8bb5388b77e517dd52a', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (h("div", { key: '5bdbe145bdb6639ebe582e7295f413a4b1990c15', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: 'ae35e60d69047547d159a452b838c8fc57a3e1a4', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), h("div", { key: '3bd41c58539faade80e61fac6a91a4ab318bbe88', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: '177fba6b79a23c80b1037d3af4872c58a598aa33', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: 'b332d980d9236c584ebca47f89fc2d9b217c0bfd', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
+            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: 'e99adc95c95be16945407d54833164908aad0b50', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), h("div", { key: '20a6660323e1d9f4ee096f0c07bf0596f5a2445a', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: '73141dd6fc6f703bff11e71ca9820cf3e1045466', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: 'bed2d910b4b35d59897e14222f86f20a7e8c3bde', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
     }
     static get is() { return "sd-confirm-modal"; }
     static get originalStyleUrls() {

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

@@ -38,7 +38,7 @@ export class SdDatePickerTrigger {
                 ? DATEPICKER_COLORS.icon.disabled
                 : DATEPICKER_COLORS.icon.default,
         };
-        return (h("div", { key: '4fdd8662a0a0d36261df4390c39797c7ac9e8862', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (h("div", { key: '6fbd05e53170cb323d3db5fe5fb7bf17e03f3af9', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-date-picker-trigger': true,
                 'sd-date-picker-trigger--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -46,7 +46,7 @@ export class SdDatePickerTrigger {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, h("sd-icon", { key: '8d855539cdaf82758a17766bba710e61aa211c70', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '49cbf18d44ec0dc09251d12b933ef0e841393e11', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            } }, h("sd-icon", { key: '60e23369acd45ae6a74b076c08309644a10aceb3', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '5db37f4d71914215e4ae4236791dd3e0eda10c96', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
     }
     static get is() { return "sd-date-picker-trigger"; }
     static get originalStyleUrls() {

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

@@ -116,9 +116,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: 'ffb39c09ac88e10d083eea775c1bc01532c625bc', 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: 'c9501fc3a0b2f0df85b78887c23d41737f95dff1', class: "sd-date-picker", ref: el => {
+        return (h("sd-field", { key: '4359c9ce80bfc919088774a4458c730c427aa3f5', 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: '638f4e59c9a7c5c841428c424181b3d2320857eb', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: 'b09f91b2c5433913d85116498d582cfa631a8534', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '8f15c254eef196212499746da68d7cdd52bfc338', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: '3939d9444c6674b0aaa54aaec186ba6fbd988bf4', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: 'cbfe2bee0fdea1f089860cf3a7da9b7e35327c87', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'a348437c5f9f53180cc7f74d5b275e4f3fbedea6', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: '7dd08053b3a24d25e6149d4bc751c75eff94f752', 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

@@ -244,7 +244,7 @@ export class SdDateRangePickerCalendar {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (h(Fragment, { key: '9f94444bf58cdf5e1f25b377b1cb7bfac7fde4e9' }, h("div", { key: '1a516f6effa60cc84f22441dbc705fd06508002a', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '7318074e2146d3b7be635a3e80ee62ec956ff200', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: 'dc40b470c2ece3cad43bac1e3446d6fe0d139966', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (h(Fragment, { key: '4502cc08eb9df7c24cdc9f22564fb2a4a0b2736e' }, h("div", { key: '9da4356920cbce83c548a4c5f40cb2af9e36a257', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: 'a8117206cd3d9368a86f4cc307037461c1314aad', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '0f6cbaf53781429b3de08aa992a45f2c26444625', 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: 'db5c3c41114485dc464c548d4a9f62a07092b448', style: hostStyle }, h("hr", { key: 'dbc8aed5991da3e99573997d8a1de7d227baefd8', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
+        return (h(Host, { key: '73be9d4cc38b230e4cff7f8ebcdc81bd2d56e0e7', style: hostStyle }, h("hr", { key: 'a4da09faca453df8cb6ea3ed00609d4e0c238a7a', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
     }
     static get is() { return "sd-divider"; }
     static get originalStyleUrls() {

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

@@ -205,18 +205,18 @@ export class SdField {
                     : {}),
             }
             : {};
-        return (h("div", { key: '3f7d253e821031efe998686ba750b5d79f093dfb', class: {
+        return (h("div", { key: '7673ab0d94a03bcfa42381c961e749cd083d7af0', 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: '2dcfb4712b65514ee05f4d3f769d3395916a0bbe', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '2e6279e9a977a1afe7417f87a7947e60f6a057c0', class: "sd-field__main" }, h("div", { key: 'abf3959ccabdd36b8e57f925bc7ef288dde0dbf0', class: {
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: '00c5056105b72f143a8c4249b8cd3b6a60fb6d1d', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'e99461246fa8ceadaf7a43f1c62c474caa160972', class: "sd-field__main" }, h("div", { key: '6bf754d3a167b1ca4f23d2e1d260643e278e85f6', 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 && (h("div", { key: '1f338c8324a0a8a49fed5a7f8a6a3496b99d1eca', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: '7c1d23f99ea181642fba65678b5fdb26ba4721b4', 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: 'dab3ba9002d7c9ff9726b1a242b11473eccc99dc' })), 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: '2d9acde5ecaeb32a94e1ba33c408160a2f2da46f', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: 'a0916124710c29478feffef96efdaffe599d4bc7', 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: '2e4690a4678ca40deb9e023baae24a44fd4da959' })), 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

@@ -173,7 +173,7 @@ export class SdFloatingPopover {
         }
     }
     render() {
-        return h("slot", { key: 'cadee10f344de11650330995b0de9a342babe1e3' });
+        return h("slot", { key: '56deedcae378d170d9debca4cf1a07599f31dfc5' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {

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

@@ -152,12 +152,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: 'c160e40525cd64a14964363ce8da30ba4e327378', 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: '8c9c4048bdb1e919d12949db0568ac8419ee1724', class: "sd-input__content" }, h("slot", { key: '87ad6a20a39b0328bb70e8beee1439cd7dd11c45', name: "prefix" }), h("input", { key: '651123773cc7c525eb3c9951db260796b1f3ccc9', 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: '6565cc41b71fbe07724b10aba6bdac9f478cd8e9', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '2fb785d07ab27fb4de6f6d7179bd8d66e6041fe7', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: 'b29a9d582bd8993bd5c31c70bab02ff553f2e167', 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: '1a6ad118628ab8cb9282953c618ca61898cf241a', class: "sd-input__content" }, h("slot", { key: '4de06d36b71ce2cad70a735e7620c2d320973962', name: "prefix" }), h("input", { key: '11c448201927a769c56fd1500ba8dd164d1b695a', 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: '4ac88a21df8e2feaa67a68cab9fca4e24985d17d', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '0985e2ed631ee746793563a22d766545a34d1562', 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: 'f447711ee4082283e8cd130c4bfe3d0ff22e3970', 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: '16300e673a9c93209c403ec788217ba301c1d2e6', 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-linear-progress/sd-linear-progress.js

@@ -31,7 +31,7 @@ export class SdLinearProgress {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (h(Host, { key: 'cb460a4f0b5716eb067b7c5ddedb93bc2d3ba0b3', style: hostStyle }, h("div", { key: 'e135bed6a1ee332a60f9d56fe472922df0235189', class: "sd-linear-progress__track" }, h("div", { key: 'd4639603633b2b5a47ef907c136ca6b48a023524', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (h("span", { key: 'ec6864d38e770504e6112a86e088e95c0d6dc9dc', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (h("span", { key: 'd7657671095fa0d5b88e1723656ac6e2eab1dfff', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && h("span", { key: 'b7780eb3e698c42313d63083f733354404357429', class: "sd-linear-progress__label" }, this.label)));
+        return (h(Host, { key: '2c2024fc61418c73913dc0333ddef93e667fa6f0', style: hostStyle }, h("div", { key: '44fac7a5a5795451ab8fc7c5538161cb974c3b4f', class: "sd-linear-progress__track" }, h("div", { key: '050f19c7c2ae6f14f744a1a33f933b97d9d5d448', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (h("span", { key: '70233788c6f8b5d89ec1123e40cc97c89a9d20c4', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (h("span", { key: 'f2df0a4d96ca1224b902a360f4f1ef4856405ed6', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '00d72060f073ad6e046d7c68f248df6622f87088', 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

@@ -12,10 +12,10 @@ export class SdLoadingContainer {
         this.visible = false;
     }
     render() {
-        return (h("div", { key: 'e5ed85a0b5467ce92d3b31324752285f3d6a40f9', class: {
+        return (h("div", { key: 'be8150fa2321621b2761f886fe96dc4a9177de64', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '80f6425043b106aedfc8110fbd1511fbf32eb283', class: "sd-loading-container__backdrop" }), h("div", { key: 'e8a24b8a9eb4986a08d903fa3ed54d1a4048d4d6', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '9b37b330ef551f75c78974ccae1d8fd3edfbb898', indeterminate: true, type: "inverse" }), this.message && h("p", { key: '1be0b6565528d0415b5e43c2b16729ac707ed9e8', class: "sd-loading-container__message" }, this.message))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '268f97c036ab8a15c465469ee467aa6a962e9bf0', class: "sd-loading-container__backdrop" }), h("div", { key: 'e7f8fcbffdfe462890706e896a476de7f734166e', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '60e52996e7ba895a0375f344431e721c8bd34753', indeterminate: true, type: "inverse" }), this.message && h("p", { key: 'c7cbf5b183a22a3b9f693bb427057d3fa9611724', 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

@@ -54,7 +54,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: '2283ab10ad01f45488a9cc8d6cf7727606b405e9', style: hostStyle }, h("div", { key: '18e367ecf8dfd716c41a1936c6a44b22ad25a601', class: "sd-loading-modal" }, h("div", { key: '149ac117d0645c35e9d9e6b7dcac7103aa4aa554', 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: 'c30f2f115d448e0489d93ee5e8a0fb8e5347926a', 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: '8db7230e3fb62c525db9cf6f5fa5781dcb44dad9', class: "sd-loading-modal__button" }, h("sd-button", { key: 'faf1ceccaa5009d589e727349b17c7c5080e3c48', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (h(Host, { key: '9656d6f5adb9fdad989f9f5ecae7917c3bac76db', style: hostStyle }, h("div", { key: '15ed3e3d53785d66d1bdbbfe7391ba63572aff3b', class: "sd-loading-modal" }, h("div", { key: '27a949450dd9bd2e68320a3bf6d3ce1c671a3f37', 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: '258def7abc8017fea2d22ca19fc2c4f82943c5b2', 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: '6bce1bdc0661f468f4e58935bb38d1a0bb76b9ad', class: "sd-loading-modal__button" }, h("sd-button", { key: 'b7e37e71fff646701fe9afc0df925709bac14835', 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

@@ -314,15 +314,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: 'c2047618e4efff7023d390f95efa349af0eb52af', 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: '2e4dc263460e89763a5794499aef1cd7c9dbc267', class: {
+        return (h("sd-field", { key: '581504f245674e1644f672aa77dd22f710a3c766', 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: 'f17872e37d0b0369061deb508d44ce7ae4943c5b', class: {
                 'sd-number-input__content': true,
                 'sd-number-input__content--no-stepper': !this.useButton,
-            } }, this.useButton && (h("button", { key: 'ce1e5d01421763c4ba77887ad823ddc63578b462', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '819664ac86d1813c3850e863412c9334195786f2', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+            } }, this.useButton && (h("button", { key: 'b513ee5c44e2475ab751dae3a333e95405c9a319', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '172dcff1a3559008183bed32c30ec02d98c12664', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: 'bb7355f2ace27bbd93cf506c2d973651d74d6d88', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: '8c8ee1d3e4b9ef5b89b00189bd138c32a7bcbe48', 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: '24d631ea8330ed6e90f2aa77e46707867ff57539', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: 'ed0c70a534f1f6e246a407073aee9efa3a222b01', 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: '8da77f4901166b778544d51b9a88a7990aa15ba1', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: '251cce12749955262b112d80ebd15298944bd079', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '5ef30dba0f14baadca36fd651ca09e780ff9be7c', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && h("span", { key: '7129df3b5cf544301cadaf5111e98ddcf3e7a340', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: 'd5cb9acd77be94e494fb4af3b78001cd22dbfe3c', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'dba88711bda7f5522425d96187bce402c8516fff', 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

@@ -87,13 +87,13 @@ export class SdPagination {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (h("div", { key: '8cdda030c6ffa1a4f3358a5877da3b76293bae39', class: {
+        return (h("div", { key: '1ab90aa479a2ec1985a79efbcb48f0453ce670a9', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, h("div", { key: '34569687e67dec4b218ef6d3da01e21b19176284', 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: 'd5e9fdd9f221536f5eb404095b2b6d052aaa6a9e', 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: 'a222ff48f10bce574ad9ef928d66d99696f6923b', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: 'a48d39b7db769a39f58e4b399aa7bb1d15748934', 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

@@ -40,7 +40,7 @@ export class SdPopup {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (h("div", { key: 'bc5ca3d1f4bc9c340245262f891612cb3cebcbca', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: 'd061ed390b7ee14c70f7f1515a1ca240090f51b1', class: "sd-popup__header" }, h("h2", { key: '9fcc3683714d5160d77df1d099de3f7152ce0a8d', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'e2943e318cc283d27d385fab001e673740c0c5bd', class: "sd-popup__body" }, h("slot", { key: '9b846412c09cae14f1f93364606cf6db91a11112' })), this.useFooter && (h("footer", { key: '9ad29d21e6d63d628474551a3000615690436937', class: "sd-popup__footer" }, h("div", { key: '039359244691aa35d0589f6d842398b88715fdd8', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '0c29f4aba59e40b7435eb9693d2d47fa7d4ea7da', name: "footer-left" })), h("sd-button", { key: '5c79526dfdde154fb50deab79730376e17445831', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (h("div", { key: '5593e53ba5d8c098c3a3fea4a4ca20769457e322', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: 'e940d310e28c6b5ec34cc46b1a0aa3c8d7c37aed', class: "sd-popup__header" }, h("h2", { key: '367b21377987bb85ff453d05f314ac2cd76ac6be', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: '58c31c4d783cf957a6e84bc17f63a2ccb188c1e0', class: "sd-popup__body" }, h("slot", { key: '712ccc5b1e2e3ba24757e8a0d258b8af40a1dcc8' })), this.useFooter && (h("footer", { key: 'ff34ebe19afaceb1594726296245ec2a12ce2eec', class: "sd-popup__footer" }, h("div", { key: 'cfefab877abd29701e17ed7381ace27db0198ab6', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '2947626fed14fba3778ddede7e1c8a868b7aba4a', name: "footer-left" })), h("sd-button", { key: 'ed0b0d43812d5d2ca28993b0f8ff2363684a9016', ...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

@@ -268,7 +268,7 @@ export class SdPortal {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '0b01050e7c1ab2b648bf1118aec27140ff1aed4c' });
+        return h("slot", { key: '623ee5423b145701ba9dd801d44874214f7a76e3' });
     }
     static get is() { return "sd-portal"; }
     static get styles() { return ":host { display: none !important; }"; }

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

@@ -78,7 +78,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: '42f9e69d39035fedce11095a2d5be95795831241', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        h("div", { key: 'ffd420e1d1a6ff395ed3fff94cbaba66f71644ac', 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,
@@ -88,7 +88,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: '655cf931840a15545c1afdd4aeb2044c7ae24c0a', 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: '5461f3861a093d25e866cd94e603a4b6017fd701', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '4bc492e2021f255cb87344bd0498023b50d89c8a', 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: '34a7671fa3f6ec1bff7c302f02bb4bfd7a113ce5', 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

@@ -45,15 +45,15 @@ export class SdSelectListItemSearch {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (h("div", { key: 'eeeabfcd97514124434c4c6c61d219d2230e7a1e', class: {
+        return (h("div", { key: 'e18205c606d8a47de3cd98be6ddad0c9a1ed4f5a', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: 'a378a2745db91faf00a5fa00105fb152f8b6f59e', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '08681aab44c7a30a5f4a36cdf7a8ec58fdbb6cf4', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '0e75fdbfdab69b3f0bd9146d97915926200ba2c0', ref: el => {
+            } }, h("div", { key: '220a830db70628b4a240d19791db5090c6112cbf', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: 'f7680be3c49045f318887a2cd955e84ee4ea6646', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '94face3b593e33db6230ede587de77e5cb158774', 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: 'a45bba91cce1700bab677e4528ab6df79e08547f', 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: '38f9de8c7ebf98aea2ef03ce9ddbb03cb9f29f81', 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: 'e5c01644bf8b6651d6ec312b18f77d79cc61f455', name: "close", size: 12, color: "#888888" })))));
+            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: 'fe32e9e44afbaa0f7ad07db665022839facbaf83', 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

@@ -361,9 +361,9 @@ export class SdSelectListbox {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (h("div", { key: '86caa4b3d4fbc3bcc6214ffe8596f62b6595b2e0', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '7a4f2cf77da2af673c7c11836cf1152f8cf55c2d', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '243c0be0b5898754a35adbce89d9f72671e39a3a', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (h("div", { key: 'bb8c7f22a164d29e30d2f9da7740883daef4fc27', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: 'ac1b06b12ec20d2b9d57ca3b4074b3752b5da5e1', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '2c7735e7098090762f573d63c2673d6face702c1', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (h("sd-select-list-item", { key: 'eef122310c6a45ed876af8cd578b86d1f27a68d3', 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: '5377511fd55f0d34056ad64707265dd2cc86afc4', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
     }
     static get is() { return "sd-select-listbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,7 +51,7 @@ export class SdSelectTrigger {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (h("div", { key: '0c3e197cd8a238a979ee6d794a607e07585b2025', ref: el => {
+        return (h("div", { key: 'b2f140907d6e4454a3adfb9d3dd9babd9058c178', 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,
@@ -62,7 +62,7 @@ export class SdSelectTrigger {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '4c068fb6a6784bde01669b7a5ad30d91dc358dd3', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), h("sd-icon", { key: '7172c372c2864574ca6ab0f726a0af091a3d0110', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '6803bc50c5f62dce1b1e9d874559f8ca5fca7b75', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), h("sd-icon", { key: '397264b3179fb6699c1ee5454f76ac9d0779488c', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-trigger__icon': true,
                 'sd-select-trigger__icon--open': this.isOpen,
             } }))));

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

@@ -283,15 +283,15 @@ export class SdSelect {
                 this.closeDropdown();
             },
         };
-        return (h("sd-field", { key: 'dd5f5142ec0a6ba80a67b544543c592c4492246b', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (h("sd-field", { key: '0864fe68a337d4bab526fa61570e856c8eff6d1c', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, h("div", { key: '2069d25c1739610ee4bf8652da9a10bc149b0bc3', class: "sd-select", ref: el => {
+            } }, h("div", { key: '781819ed75f47395e96fd6808766e6bb8c246fa5', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-trigger", { key: 'b9b332bee38e449802be1b6a2c4b02a8243aa220', ref: el => {
+            } }, h("sd-select-trigger", { key: '8cebad98f0cd4b333954a55857aec3fbb6f3d283', ref: el => {
                 this.triggerComponentRef = el;
-            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'fba3b55ec6c0d7fa9afe2d0ac8d41ba85ad62e6b', ...portalProps }, h("sd-select-listbox", { key: 'ad505ebdcb6a2f27083520877e42eccf4aeacbc3', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'fe68f0b01256e1c1d3200f9f5fd17c2adf97f0e0', ...portalProps }, h("sd-select-listbox", { key: '98368524ef06a6d752f2313756a89ae6e8c05955', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get is() { return "sd-select"; }
     static get originalStyleUrls() {

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

@@ -45,7 +45,7 @@ export class SdSwitch {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (h("label", { key: '1c1ad8fff6d40b4e58f36f1238efe0e1d92ac391', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'c93a0da431b173fa705d5ffef018e605c625cb2a', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '03483ff7893a072b4778230d9d1be3b737537d53', class: "sd-switch__track" }, h("div", { key: '0db9dc3442e77b327fe1c6544e4c320d71389ca6', class: "sd-switch__knob" })), this.label && h("span", { key: '35f6aad85d20458d364ea84aaabcf518b9c8983c', class: "sd-switch__label" }, this.label)));
+        return (h("label", { key: 'ae476f0bb6600cdb10bafd1a06ced3e60d50a2f6', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: '765320376e0cd0ec82b980a264b979c381907f75', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: 'f00db86513aa3da5c17a5a7e13d5928806a6fc0a', class: "sd-switch__track" }, h("div", { key: '12f2f817acace26a8cbfc9075e0319f3e5c2ada4', class: "sd-switch__knob" })), this.label && h("span", { key: '24598221b90e8ea9504ff80a464a10e3e5310e98', class: "sd-switch__label" }, this.label)));
     }
     static get is() { return "sd-switch"; }
     static get originalStyleUrls() {