@sellmate/design-system 1.0.69 → 1.0.70

package/dist/cjs/sd-date-range-picker-calendar.cjs.entry.js

@@ -267,7 +267,7 @@ const SdDateRangePickerCalendar = class {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (index.h(index.Fragment, { key: '595c17bc338f96117d87c5ac3c2b26895b9e5283' }, index.h("div", { key: '39ce76545cc612422ab5024a2838fbc9faabb9a8', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), index.h("div", { key: '21764e31a3fbcfa8de22d1f243f5739fc02c38fd', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), index.h("span", { key: '402ea75f3bf8b58d30c34238285eef7099118e28', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (index.h(index.Fragment, { key: 'e925fa935f807e22b22a2f65b4af5b2568865781' }, index.h("div", { key: 'be601b16d179d91292b58c3b70ce6a4aa4f5e59a', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), index.h("div", { key: 'e193b983a7eb75a227ea8e1d13839dcc9e875588', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), index.h("span", { key: '6f2ea95c2fd490a46ac40f6a526ca028920bc564', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -246,7 +246,7 @@ const SdDropdownButton = class extends baseDropdownEvent.BaseDropdownEvent {
     }
     render() {
         const { config, preset } = this.resolvedConfig;
-        return (index.h("div", { key: '5493b94262ecdd20a5fbb7ad2993dd473b1ae9e3', class: "sd-dropdown-button" }, index.h("button", { key: 'a64187dec0d84dce3532f8b3d7112ed6d6ae8e0d', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
+        return (index.h("div", { key: 'ce06d2b7e13cb234bb6e7393939d2ccd834801a5', class: "sd-dropdown-button" }, index.h("button", { key: '4bd3e86eec90698188a834eb35ff922dee7d1855', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
                 '--sd-dropdown-button-bg': config.color,
                 '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
@@ -256,10 +256,10 @@ const SdDropdownButton = class extends baseDropdownEvent.BaseDropdownEvent {
                 '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
                 '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
                 '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
-            } }, index.h("span", { key: '71ed27650dcb1beb1cfa4864a6449ab190f04829', class: "sd-dropdown-button__trigger-label" }, this.label), index.h("span", { key: '6c34575c0587fb288165cf0e15db52ed6b3f50db', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), index.h("span", { key: '0544b9d36657a80b5f51b9c1849d55ab7a7dbdc2', class: {
+            } }, index.h("span", { key: '2baea4f0777ec766625d4ae1fb14739aa61ca114', class: "sd-dropdown-button__trigger-label" }, this.label), index.h("span", { key: 'b37a94dd23d26a1444ddccc192b2a5ab2388bc64', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), index.h("span", { key: 'b903ff916c3ae1ab189cd08877a57940e45d8aeb', class: {
                 'sd-dropdown-button__trigger-icon': true,
                 'sd-dropdown-button__trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" }, index.h("sd-icon", { key: 'cd73a4dffbe1fc31c76fea221cd080b455bb3131', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
+            }, "aria-hidden": "true" }, index.h("sd-icon", { key: '2eac1eabd2677decb0c1cfe4f518a7da9aca60ff', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
     }
     static get watchers() { return {
         "isOpen": [{

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

@@ -155,7 +155,7 @@ const SdGhostButton = class {
             ? GHOST_BUTTON_DISABLED_COLORS[this.intent ?? 'default']
             : GHOST_BUTTON_CONTENT_COLORS[this.intent ?? 'default'];
         const accessibleName = this.ariaLabel.trim() || undefined;
-        return (index.h("button", { key: '690151271d15b4a3e07b47021f368647cc9daf62', class: {
+        return (index.h("button", { key: '4d5159cb897b6c468380f18eba1eca218d24920e', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
@@ -164,7 +164,7 @@ const SdGhostButton = class {
                 '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent ?? 'default'],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, index.h("sd-icon", { key: '9769fff9f694e7d1fa2cba94fa8e80498d0afe2e', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick }, index.h("sd-icon", { key: '0461580c901aea244a3d0e693fb94fd6354873ab', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
 };
 SdGhostButton.style = sdGhostButtonCss();

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

@@ -150,12 +150,12 @@ const SdInput = class {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (index.h("sd-field", { key: '3b607f0075786647d48ce470d40745e4d5fdcdc1', 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, 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 }, index.h("label", { key: '02902d50bbc3275860e814a5d354e83eeed72373', class: "sd-input__content" }, index.h("slot", { key: '4fb6e53a98853c67e847cdd38b8ddbb606e3f0a1', name: "prefix" }), index.h("input", { key: '291841a908b8502790f09833f1a30dc56f24ff52', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, 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 }), index.h("slot", { key: '13e21f184a9dcee81a1b6d3c11b9137a0ac7203e', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (index.h("sd-ghost-button", { key: '4e708928b8465d6e8d5c1b6f4a983a9d8c1c8784', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (index.h("sd-field", { key: '6270fb99043a06aa9a4c2ead77007e6c03adafef', 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, 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 }, index.h("label", { key: 'aaef18c323710235b41d76b26a21380cadcc6e0f', class: "sd-input__content" }, index.h("slot", { key: 'fd5d5845acf9d5351dec5af84e09d91246de8a68', name: "prefix" }), index.h("input", { key: '8b4dd1eab6488a29daec6e6dde5238b319001d5b', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, 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 }), index.h("slot", { key: '79918e68de3045b509a27d8567e095665040689b', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (index.h("sd-ghost-button", { key: 'f5358346a20830c1fef955a2bb6783156b251178', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (index.h("sd-ghost-button", { key: 'cc87104d0c9ef69659041fe233b3e432b62ed0b8', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (index.h("sd-ghost-button", { key: '77108ea21a4b9afc9e9051c98d4d49bcb571cffb', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled)
                     return;
                 this.passwordVisible = !this.passwordVisible;

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

@@ -18,10 +18,10 @@ const SdLoadingContainer = class {
         this.visible = false;
     }
     render() {
-        return (index.h("div", { key: '8236579ed01f703fb105576c2fd575b157b3aa76', class: {
+        return (index.h("div", { key: '7887102a2b03f911fad57784b3b45b12d2265ae2', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, index.h("div", { key: '176473a839add91a86d207544e9cc5862b13d04f', class: "sd-loading-container__backdrop" }), index.h("div", { key: '2776ed326caa6870a79b94079ff6e778ee560b02', class: "sd-loading-container__content" }, index.h("sd-circle-progress", { key: '6977bfd46e06e9c13492a15b5081c98446770de5', indeterminate: true, type: "inverse" }), this.message && (index.h("p", { key: '7cea458c498a4682b1d4d5f07e059ed8e4905df0', class: "sd-loading-container__message" }, this.message)))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, index.h("div", { key: '0f815029574907643be52b50a6c8be8e66ced072', class: "sd-loading-container__backdrop" }), index.h("div", { key: '9ea0faf8ed4094b3fd93a6e29c55130d58b245fe', class: "sd-loading-container__content" }, index.h("sd-circle-progress", { key: '6e89faad35f282d91098c213879c0ecf8d05a5ed', indeterminate: true, type: "inverse" }), this.message && (index.h("p", { key: '05d3128ecf91a372a426a2508535c7789aff9bc1', class: "sd-loading-container__message" }, this.message)))));
     }
 };
 SdLoadingContainer.style = sdLoadingContainerCss();

package/dist/cjs/sd-number-input.cjs.entry.js

@@ -385,12 +385,12 @@ const SdNumberInput = class {
             '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
             '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
         };
-        return (index.h("sd-field", { key: 'a9512622774c930c8b70b3d739a405e2434f22a7', 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, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: 'f068ab7a042a97dfac7aaf160508757306dddc14', class: "sd-number-input__content" }, this.useButton && (index.h("button", { key: '37341e813e7902f07c2731c708e1aadc53411653', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: '740b2715518534b0ece5aa3b3f6dfd0dfafd6368', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+        return (index.h("sd-field", { key: '85941d001afd73a10defb7f0728579ce0b8457b1', 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, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: '565de4d4a79219bc8d6e9c8f4528ec93a655c376', class: "sd-number-input__content" }, this.useButton && (index.h("button", { key: 'fa27f209b09a03121eb89959164a4a349d525d9a', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: '7f4fe23f4b0eba4a06e0153338228710365ce57f', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (index.h("span", { key: '9b16f311a1408dfc84124ec938a98b13635f6dc6', class: "sd-number-input__prefix" }, this.inputPrefix)), index.h("input", { key: '572e2a8a1d7283e3568a85ba6c1bd506c3ec4453', 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 && (index.h("span", { key: '55a96b32e383cdf8d5b253336130460275373f41', class: "sd-number-input__prefix" }, this.inputPrefix)), index.h("input", { key: 'e25faa5af70d89ae0266bd9dbf35c72276885a9b', 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 && (index.h("span", { key: '13a07217ee34c793669b061c240062805a40db60', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (index.h("button", { key: 'c3557737be6cc5dc6c5ab171bcc078cf564fb2b0', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: '530cf50331768df5be16639e46ce3f7f438ffe02', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && (index.h("span", { key: '777730846e62dd03a9193cf582908a059789b329', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (index.h("button", { key: 'ef8b471cb1d2cbd3a5b350ddbbf856e3bd104567', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: 'e2440c5a4571b69dc0e91ab0b10dffdd8242b1d8', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }

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

@@ -151,13 +151,13 @@ const SdPagination = class {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (index.h("div", { key: '1f6d3909c5c7f17701c405f058bf999020d9424e', class: {
+        return (index.h("div", { key: '2b9efc3a0340799a39e7bbfe6f3a270b7cc5f0c7', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, index.h("div", { key: '9faaf4f1033e406ecaad7ed593a1610bb7002631', 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: 'af585a4e9ad2fc25e47cb42fdcc66850d6210fd1', 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: 'c8d21679938032bee223f6dfefff3a87dc5badec', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), index.h("div", { key: '3128e19dee5f2d00fcc5603f96f323afaf2750d4', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss();
@@ -204,11 +204,29 @@ const SdSelectV2 = class {
     hovered = false;
     update;
     dropDownShow;
+    async sdFocus() {
+        if (this.disabled)
+            return;
+        await this.triggerComponentRef?.sdFocus();
+    }
+    async sdOpen() {
+        // sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
+        await new Promise(resolve => setTimeout(resolve, 0));
+        if (this.disabled || this.isOpen)
+            return;
+        this.prepareDropdownGeometry();
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+        this.isAnimatingOut = false;
+        this.isOpen = true;
+    }
     triggerRef;
+    triggerComponentRef;
     closeAnimationTimer;
     internalName = index$1.nanoid();
+    triggerHasFocus = false;
     watchIsOpen(newValue) {
-        this.focused = newValue;
+        this.syncFocusedState(newValue);
         this.dropDownShow.emit({ isOpen: newValue });
     }
     get isMulti() {
@@ -216,19 +234,19 @@ const SdSelectV2 = class {
     }
     get displayText() {
         if (this.isMulti) {
-            if (!this.value || !Array.isArray(this.value))
-                return '';
-            if (this.emitValue) {
-                const flat = this.flattenOptions(this.options);
-                return this.value
-                    .map(v => flat.find(o => o.value === v)?.label ?? '')
-                    .filter(Boolean)
-                    .join(', ');
-            }
-            const selected = this.value;
-            if (selected.length === 0)
+            if (!Array.isArray(this.value) || this.value.length === 0)
                 return '';
-            return selected.map(s => s.label).join(', ');
+            const flat = this.flattenOptions(this.options);
+            return this.value
+                .map(item => {
+                if (item != null && typeof item === 'object') {
+                    const opt = item;
+                    return opt.label ?? flat.find(o => o.value === opt.value)?.label ?? '';
+                }
+                return flat.find(o => o.value === item)?.label ?? '';
+            })
+                .filter(Boolean)
+                .join(', ');
         }
         if (this.value == null)
             return '';
@@ -303,20 +321,33 @@ const SdSelectV2 = class {
             this.isAnimatingOut = false;
         }, SdSelectV2.CLOSE_ANIMATION_DURATION);
     }
-    handleTriggerClick = () => {
+    prepareDropdownGeometry() {
         if (this.triggerRef) {
             this.triggerWidth = `${this.triggerRef.offsetWidth}px`;
         }
         this.updateDropdownViewportConstraints();
+    }
+    syncFocusedState(isOpen = this.isOpen) {
+        this.focused = isOpen || this.triggerHasFocus;
+    }
+    handleTriggerFocus = () => {
+        this.triggerHasFocus = true;
+        this.syncFocusedState();
+    };
+    handleTriggerBlur = () => {
+        this.triggerHasFocus = false;
+        this.syncFocusedState();
+    };
+    handleTriggerClick = () => {
         if (this.isOpen) {
             this.closeDropdown();
+            return;
         }
-        else {
-            if (this.closeAnimationTimer)
-                clearTimeout(this.closeAnimationTimer);
-            this.isAnimatingOut = false;
-            this.isOpen = true;
-        }
+        this.prepareDropdownGeometry();
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+        this.isAnimatingOut = false;
+        this.isOpen = true;
     };
     emitUpdate(value) {
         this.update.emit(value);
@@ -353,9 +384,7 @@ const SdSelectV2 = class {
         }
         else {
             const exists = selected.some(s => s.value === option.value);
-            newSelected = exists
-                ? selected.filter(s => s.value !== option.value)
-                : [...selected, option];
+            newSelected = exists ? selected.filter(s => s.value !== option.value) : [...selected, option];
         }
         this.value = this.toMultiValue(newSelected);
         this.emitUpdate(this.value);
@@ -377,13 +406,15 @@ const SdSelectV2 = class {
                 this.closeDropdown();
             },
         };
-        return (index.h("sd-field", { key: '6074cfea700e1f3ea03aaedb0146d7dffdaa7101', name: this.fieldName || this.internalName, 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 (index.h("sd-field", { key: '8c9b5a1414bd0bb068acd53e07a61767b6904c62', name: this.fieldName || this.internalName, 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;
-            } }, index.h("div", { key: '4840cfcf19e262903110245f88b73f3f03713624', class: "sd-select-v2", ref: el => {
+            } }, index.h("div", { key: '47677529c530f06cb3a35a30dd4cc9f9a34d8759', class: "sd-select-v2", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-select-v2-trigger", { key: '4b34dd8007864623d17c80b4e5cea02aa4db954a', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '7ec2c4ca8e32f877a894f9f766d3558c10d66596', ...portalProps }, index.h("sd-select-v2-listbox", { key: 'c804a19a142d2978d8fb4eaa33ad2a6a7028e7d3', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            } }, index.h("sd-select-v2-trigger", { key: '3aae441a7ec1a6d8faa0f04f41881f515b641853', 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) && (index.h("sd-portal", { key: '7c92db46231f4c46ce94668ac220dc7ec14ad118', ...portalProps }, index.h("sd-select-v2-listbox", { key: 'af3fc60a9554573e50145edeb0ea8f412116fd76', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get watchers() { return {
         "isOpen": [{

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

@@ -14,6 +14,7 @@ const sdPopoverCss = () => `sd-popover{position:relative;cursor:pointer;display:
 const SdPopover = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.showChange = index.createEvent(this, "sdShowChange", 7);
     }
     get el() { return index.getElement(this); }
     show = false;
@@ -28,20 +29,17 @@ const SdPopover = class {
     messages = [];
     buttons = [];
     menuClass = '';
-    noHover = true;
     useClose = false;
-    showPopover = false;
-    slotContent = '';
-    watchShowHandler(newValue) {
-        this.showPopover = newValue;
-    }
-    componentWillLoad() {
-        this.showPopover = this.show;
-        this.slotContent = this.el.innerHTML;
-    }
+    showChange;
     buttonEl;
+    setShow = (next) => {
+        if (this.show === next)
+            return;
+        this.show = next;
+        this.showChange.emit(next);
+    };
     get popoverOffset() {
-        switch (this.placement) {
+        switch (this.placement ?? 'bottom') {
             case 'top':
                 return [0, -4];
             case 'bottom':
@@ -52,24 +50,26 @@ const SdPopover = class {
                 return [4, 0];
         }
     }
-    handleClose = () => {
-        this.showPopover = false;
-    };
+    handleClose = () => this.setShow(false);
     render() {
-        return (index.h(index.Fragment, { key: '32e3a11baabd4f4fc8c570311b99b2113e4ce3b0' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (index.h("sd-floating-portal", { key: '8139e72f293319e4d5ed3fe67d4f47a03743b437', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, index.h("div", { key: 'fdb76f4a9a54be08fdf0d352ff389453840c4789', class: {
+        const placement = this.placement ?? 'bottom';
+        const color = this.color ?? '#01BB4B';
+        const icon = this.icon ?? 'helpOutline';
+        const iconSize = this.iconSize ?? 12;
+        const buttonSize = this.buttonSize ?? 'sm';
+        const buttonVariant = this.buttonVariant ?? 'primary';
+        const menuClass = this.menuClass ?? '';
+        const messages = Array.isArray(this.messages) ? this.messages : [];
+        const buttons = Array.isArray(this.buttons) ? this.buttons : [];
+        return (index.h(index.Fragment, { key: 'e576deaacba9395c5aeb76fd13baa0dc1e908d38' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: buttonSize, color: color, variant: buttonVariant, class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (index.h("sd-floating-portal", { key: '7520067b46527c22108292a659dd7e8fba85397c', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, index.h("div", { key: 'ba48632dd93359851bd87f4d55f2341653b0caab', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
-                [`sd-floating-menu--${this.placement}`]: true,
-                [this.menuClass]: !!this.menuClass,
+                [`sd-floating-menu--${placement}`]: true,
+                [menuClass]: !!menuClass,
             }, style: {
                 '--sd-floating-bg': popoverTokens.popover.bg,
-            } }, index.h("i", { key: '94cb19bdf7182cd311800ac4d3fdf49c61db75fb', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '67394b2b751c485fc7198a10d54df2659c6f222b' })), index.h("div", { key: '1d6e143a931c24f28ef68afbfe7b84e73d3288db', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: '33d47a87e6cab23131f360f7ea07809cec942ec0', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: '28006b8958d1921eefa42c6282b8e735ae3e9367', class: "sd-floating-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: '574604775790aa49591848eb5f86ca0c6735558f', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("sd-ghost-button", { key: '027260d65fc575f480ce23e081b8b80ac8a1daea', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.handleClose() })))))));
+            } }, index.h("i", { key: 'fce80e5bc6f49f5dbc1772f910eae0fb9bc09a6b', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '32aaa3b00f7ac77d47fd2bc3c968a7a4c20102c6' })), index.h("div", { key: '29b3240126412070466acee7ee1d061d235ba51e', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: '6cb5cf4531f573e93146a552b34831dc04851661', class: "sd-floating-menu__title" }, this.menuTitle), messages.length > 0 && (index.h("div", { key: 'ba15bb4efc4af37dd89b0da61539f516cc31a2f3', class: "sd-floating-menu__messages" }, messages.map((message, i) => (index.h("div", { key: `msg-${i}` }, message))))), buttons.length > 0 && (index.h("div", { key: '2656545909634d8c54e9d34155e699041b5512f5', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${buttons.length}` }, buttons.map((button, i) => (index.h("sd-button", { key: `btn-${i}`, ...button })))))), this.useClose && (index.h("sd-ghost-button", { key: '315bf10dde1b7cde5727beb101a1a1ad07966138', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose })))))));
     }
-    static get watchers() { return {
-        "show": [{
-                "watchShowHandler": 0
-            }]
-    }; }
 };
 SdPopover.style = sdPopoverCss();
 

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

@@ -227,7 +227,7 @@ const SdPortal = class {
         this.close.emit();
     }
     render() {
-        return index.h("slot", { key: '394cce939280a171c13e875eaead3fbdd0163d5b' });
+        return index.h("slot", { key: 'fa3033a01d6c8f6878c91367b9670206ab5c71d7' });
     }
     static get watchers() { return {
         "open": [{

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

@@ -170,7 +170,7 @@ const SdRadioButton = class {
             '--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
             '--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
         };
-        return (index.h("div", { key: 'f4ac83797b2661b0c2a612674911cbb0e41350a6', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
+        return (index.h("div", { key: '67c8e7ad03fb6ee4cabd06591e3e11e5d38914f0', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (index.h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, index.h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && index.h("span", { class: "sd-radio-button__label" }, option.label)));

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

@@ -31,7 +31,7 @@ const SdRadioGroup = class {
         return classes.join(' ');
     }
     render() {
-        return (index.h("div", { key: '8b01aca15ce9452921f37ba648d2d47728b84f41', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
+        return (index.h("div", { key: '5f6559df018e48958103d0a84a0f074f81bd255a', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
             return (index.h("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
         })));
     }

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

@@ -118,7 +118,7 @@ const SdRadio = class {
             '--sd-radio-disabled-dot': RADIO_COLORS.disabled.dot,
             '--sd-radio-label-color': RADIO_COLORS.label,
         };
-        return (index.h("label", { key: '2b7819249e5070a22b626530011db4a8e56194f1', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("input", { key: '233699a7c3bc13708d43ca3719f61edf53836c83', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), index.h("span", { key: 'eb665c5f8c6202b66b65b6b120f144970fba0a38', class: "sd-radio__circle" }), this.label && index.h("span", { key: '3d0db13e083bacb4cb7ace9129fcfcd61f18dfc7', class: "sd-radio__label" }, this.label)));
+        return (index.h("label", { key: '2b809f1f3ce39e6dd2429cf1c48a935500287614', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("input", { key: '1f44ab44d741ef40152318ce6fd437bb091c3cfb', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), index.h("span", { key: '941fddbb939a46afbe72c642d3b6f6f252f143f1', class: "sd-radio__circle" }), this.label && index.h("span", { key: 'e30139892e82b8da251525e3c717549a2b7522d0', class: "sd-radio__label" }, this.label)));
     }
     static get watchers() { return {
         "value": [{

package/dist/cjs/sd-select-multiple-group.cjs.entry.js

@@ -398,7 +398,7 @@ const SdSelectMultipleGroup = class extends baseDropdownEvent.BaseDropdownEvent
         });
     }
     render() {
-        return (index.h("sd-field", { key: '8e0cfc89b55809d3c5b556fc5c59077c2c952ad5', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, index.h("div", { key: '852a713b4c38c4845c407cb04801d9b0c33f0515', class: {
+        return (index.h("sd-field", { key: '4140b6529565f97fa65d81ae1462108476d52bcc', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, index.h("div", { key: '2dab2697f3e375d214b66464b0f57aa32e77757b', class: {
                 'sd-select-multiple-group': true,
                 'sd-select-multiple-group--open': this.isOpen,
                 'sd-select-multiple-group--disabled': this.disabled,

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

@@ -426,13 +426,19 @@ const SdSelectV2Listbox = class {
      * `children` is emptied by `filterTree`; in that case we fall back to the
      * full original subtree because the user has no way to deselect descendants
      * individually.
+     *
+     * disabled 항목은 사용자가 토글할 수 없으므로 leaves 집합에서 제외한다.
+     * 호출처(그룹 토글 / 카운트 / indeterminate 판정)가 모두 동일하게 "실제
+     * 토글 가능한 leaves" 만 보도록 통일한다.
      */
     collectVisibleLeaves(option) {
+        if (option.disabled)
+            return [];
         if (!option.children)
             return [option];
         if (option.children.length === 0) {
             const original = this.findOriginalOption(option.value, this.options);
-            return original ? this.collectLeaves(original) : [];
+            return original ? this.collectLeaves(original).filter(l => !l.disabled) : [];
         }
         return option.children.flatMap(child => this.collectVisibleLeaves(child));
     }
@@ -602,7 +608,7 @@ const SdSelectV2Listbox = class {
             '--listbox-max-height': this.maxHeight,
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (index.h("div", { key: 'ca3d529a4a20f394de1358cc0627c730843a8cf9', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-v2-list-item-search", { key: 'e7c421d676c6a94cc31b0df69a489818b26563e3', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: 'f3f44e6df1fc8faf71c607cc0efb0d891dcbfb3d', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (index.h("div", { key: '17ebae1a1589245944d7db5a05f2c011ad13e391', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-v2-list-item-search", { key: '181ddd3a11ebe3b81353d66111459c7929c5af0b', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '91114e82f60a6bdeb74142d6d7abea2871e6678e', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
             } }, this.isEmpty ? (index.h("div", { class: "sd-select-v2-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-v2-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
     }
@@ -620,17 +626,33 @@ const SdSelectV2Trigger = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.triggerClick = index.createEvent(this, "sdTriggerClick", 7);
+        this.triggerFocus = index.createEvent(this, "sdTriggerFocus", 7);
+        this.triggerBlur = index.createEvent(this, "sdTriggerBlur", 7);
     }
     displayText = '';
     placeholder = '선택';
     disabled = false;
     isOpen = false;
     triggerClick;
+    triggerFocus;
+    triggerBlur;
+    triggerEl;
+    async sdFocus() {
+        if (this.disabled)
+            return;
+        this.triggerEl?.focus();
+    }
     handleClick = () => {
         if (this.disabled)
             return;
         this.triggerClick.emit();
     };
+    handleFocus = () => {
+        this.triggerFocus.emit();
+    };
+    handleBlur = () => {
+        this.triggerBlur.emit();
+    };
     render() {
         const hasValue = !!this.displayText;
         const cssVars = {
@@ -648,11 +670,13 @@ const SdSelectV2Trigger = class {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (index.h("div", { key: '4b3f60a4bd00423337ebd472a628bc67f0a5d55c', class: {
+        return (index.h("div", { key: 'e5c4db3cfbaa29c0af7efd0376a972dee0e9db56', ref: el => {
+                this.triggerEl = el;
+            }, tabindex: this.disabled ? -1 : 0, class: {
                 'sd-select-v2-trigger': true,
                 'sd-select-v2-trigger--open': this.isOpen,
                 'sd-select-v2-trigger--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, index.h("div", { key: '8a6f9aa132aa6db4ba9035b3b97f91b4f29fa475', class: "sd-select-v2-trigger__content" }, index.h("span", { key: '3fb8fa054682eefc604623da9ecb906581cf1661', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), index.h("sd-icon", { key: 'c6ae918c442452018513a144a6f14613a49dedd4', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, style: cssVars, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: '76a946a587f6245f8a21ecbf25c5a21895f35970', class: "sd-select-v2-trigger__content" }, index.h("span", { key: '3224e13cc49371e7bcd8095a8b08bd62d4f8b295', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), index.h("sd-icon", { key: 'ea81dc671b63b14040292ed2ff4084a9c9fc6fca', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-v2-trigger__icon': true,
                 'sd-select-v2-trigger__icon--open': this.isOpen,
             } }))));

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

@@ -148,7 +148,7 @@ const SdSelect = class extends baseDropdownEvent.BaseDropdownEvent {
         }
     };
     render() {
-        return (index.h("sd-field", { key: 'bef5ef042c37b3abb97f8f5eafaee24d232132b7', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, addonAlign: this.addonAlign, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, index.h("div", { key: '9046ecdd771380312e7be3797ccac28d2315cfbe', class: {
+        return (index.h("sd-field", { key: '6939161d0edb5eabca307b3883e02a53a29e66c4', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, addonAlign: this.addonAlign, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, index.h("div", { key: 'a57d17cb3ff775c724f3a6c13025c04e031de45f', class: {
                 'sd-select': true,
                 'sd-select--disabled': this.disabled,
                 'sd-select--error': !!this.error,

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

@@ -48,7 +48,7 @@ const SdTabs = class {
         return `square_xs_${color}`;
     }
     render() {
-        return (index.h("div", { key: '62ace36515932f8889fc35121b6a8cf98fd9a314', class: this.getContainerClasses() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: '85326c946694a115b466f07395872429c467d72f', class: this.getContainerClasses() }, this.tabs.map((tab, index$1) => {
             const badgeName = this.getBadgeName(tab);
             return (index.h("div", { key: `tab-${index$1}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, index.h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && index.h("sd-tag", { name: badgeName, label: tab.badge.toString() })));
         })));

package/dist/cjs/table-test.cjs.entry.js

@@ -80,7 +80,7 @@ const DataTable = class {
         return el.innerHTML;
     }
     render() {
-        return (index.h("div", { key: 'eb6246d49bb46a1c2b2b9d93cff90e7c0d6788b4', class: "table-wrapper" }, index.h("table", { key: '584d752e51f252f2dd7a29868ae4300b55c47065', class: { 'data-table': true, 'bordered': this.bordered, 'striped': this.striped } }, index.h("thead", { key: 'fd35de9ad1cb79cf77ab9f7a806d2d7258d8b11b' }, index.h("tr", { key: '39a42d9fc76571aa5ef6073ec554471d5fd1b4c1' }, this.columns.map(column => (index.h("th", { key: column.field, style: { width: column.width } }, this.renderHeaderContent(column)))))), index.h("tbody", { key: '5c3a2b5853f619666b20145e0f7a221c75969071' }, this.rows.map((row, rowIndex) => (index.h("tr", { key: rowIndex }, this.columns.map(column => (index.h("td", { key: `${rowIndex}-${column.field}` }, this.renderCellContent(column, row, rowIndex))))))))), index.h("div", { key: 'bbbd15c2d1b517774340dbcdfb59338f260df21b', class: "templates-slot", hidden: true }, index.h("slot", { key: '28733f09dd4a90976d9bb60102039981c736cf87' }))));
+        return (index.h("div", { key: '2aaa005ce2516e841fdace352e9d8cf2b98cbde4', class: "table-wrapper" }, index.h("table", { key: '3b13c885dc0cefd1c2b7de3c336d803099009063', class: { 'data-table': true, 'bordered': this.bordered, 'striped': this.striped } }, index.h("thead", { key: 'a866c3ce695250fc6b220044955c6fafa68f5647' }, index.h("tr", { key: '465974d2bd2f39114cabda226aba8645d79b4a68' }, this.columns.map(column => (index.h("th", { key: column.field, style: { width: column.width } }, this.renderHeaderContent(column)))))), index.h("tbody", { key: '4b0a96da5bf54404774fca7bb9136561ddc57170' }, this.rows.map((row, rowIndex) => (index.h("tr", { key: rowIndex }, this.columns.map(column => (index.h("td", { key: `${rowIndex}-${column.field}` }, this.renderCellContent(column, row, rowIndex))))))))), index.h("div", { key: '1deba9664748b1953a65b2d7badc4b2e813ab2eb', class: "templates-slot", hidden: true }, index.h("slot", { key: '782d4ef14b8e6068e1d96a55af5f0b16af33dc0f' }))));
     }
     static get watchers() { return {
         "columns": [{

package/dist/collection/collection-manifest.json

@@ -7,6 +7,7 @@
     "components/sd-date-range-picker/sd-date-range-picker.js",
     "components/sd-form/sd-form.js",
     "components/sd-guide/sd-guide.js",
+    "components/sd-popover/sd-popover.js",
     "components/sd-radio/sd-radio.js",
     "components/sd-radio-button/sd-radio-button.js",
     "components/sd-radio-group/sd-radio-group.js",
@@ -39,7 +40,6 @@
     "components/sd-modal-container/sd-modal-container.js",
     "components/sd-number-input/sd-number-input.js",
     "components/sd-pagination/sd-pagination.js",
-    "components/sd-popover/sd-popover.js",
     "components/sd-progress/sd-progress.js",
     "components/sd-select/sd-select-dropdown/sd-select-dropdown.js",
     "components/sd-select/sd-select-option/sd-select-option.js",

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

@@ -39,7 +39,7 @@ export class SdActionModal {
         if (this.height != null && this.height !== '') {
             sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
         }
-        return (h("div", { key: '85e107137d01ef0a8fd8a839d7223c5163cb1a30', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, h("header", { key: '00d31be3a53866ecb5b72e76550c9501cdf6a106', class: "sd-action-modal__header" }, h("h2", { key: '4e4d000f6261ee2147a3d943d5aedc41afe1b30c', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: 'f6df02450472e1969f5a96822058d2384af78a8a', class: "sd-action-modal__header-sub" }, h("slot", { key: 'ffb45a725e9e3c8ee56534ba3286897eaf33b844', name: "header-sub-title" })), h("sd-ghost-button", { key: '26f68005c1b1ae18991a4da802cbfbd027af8536', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: 'ebc57d5a90530acf465fef3866d63d95e8bf8311', class: "sd-action-modal__body" }, h("slot", { key: 'a55744951a9812373adabbb7d3db8c06b25f5c72', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (h("footer", { key: '1aef0ac810ba08682c9b8cea47a48e4679a17ee0', class: "sd-action-modal__footer" }, h("div", { key: 'eeeec98e930aa71fcfdd28a1d76a842083c6a185', class: "sd-action-modal__footer-sub" }, h("slot", { key: '7015d9593c5567824f40ab4c60ca2be8ac5f5989', name: "bottom-sub-content" })), h("sd-button-v2", { key: 'c35ea44b195fd7725cb914cf3f04db9389abdfe3', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
+        return (h("div", { key: '45997c9b1e10845c4d04528911147bc1d7192dd6', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, h("header", { key: '838bfdc66c52fffb7f226a2a1eb0bdd4a2a8addc', class: "sd-action-modal__header" }, h("h2", { key: 'e17e9c7954d0217071e2c21aa030f3abcc0a584f', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: 'e81bbfa0bcabba237be8364a40a71c38a4120af1', class: "sd-action-modal__header-sub" }, h("slot", { key: 'b98817a60a874897acd209e7184690f04678a5ca', name: "header-sub-title" })), h("sd-ghost-button", { key: '3b99fd3a4f3e795e5192fe9b41de8b97a40f80d0', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: 'f499d92ecc3adeed3da427ae8bbdc0c6d7edf37b', class: "sd-action-modal__body" }, h("slot", { key: 'dd05e8f95be6aa98a84d5752c89dad9a28695601', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (h("footer", { key: '43b2338654d3a56aced7029749b0e03f0427545f', class: "sd-action-modal__footer" }, h("div", { key: '6308a79ed13017ee2c5a71d7dbf49a7da6bd775f', class: "sd-action-modal__footer-sub" }, h("slot", { key: 'f3764684c374d82a31cbd65333bb0f69eb6f2f1b', name: "bottom-sub-content" })), h("sd-button-v2", { key: '42a2b3068574b56172b0138076f49167da8e6625', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
     }
     static get is() { return "sd-action-modal"; }
     static get originalStyleUrls() {

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

@@ -5,7 +5,7 @@ export class SdBadge {
     label = '';
     render() {
         const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
-        return (h("div", { key: 'a4b84e172a57763fbef2feedaf52c1e8c219250d', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '723edda0c397241af91ccfc62d14cbfc131456cf', class: "sd-badge__dot" }), h("div", { key: '80415403bea863a62ad5d8139cfcf8951bedee49', class: "sd-badge__label" }, this.label)));
+        return (h("div", { key: '25c24499f0474cad07059347491dd38dc4f59025', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '7580873ce298cf669a198c277bd4e6812e7c4120', class: "sd-badge__dot" }), h("div", { key: '6c2b8e63a490a3f538cd98749283a5decde63ca6', class: "sd-badge__label" }, this.label)));
     }
     static get is() { return "sd-badge"; }
     static get originalStyleUrls() {

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

@@ -102,7 +102,7 @@ export class SdBarcodeInput {
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
             '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
         };
-        return (h("sd-field", { key: '876c4e2cd41e62cd5486b7dec5ca1b34d10704b9', 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, 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: 'e01920c2565e1f4487ccd516f864b9f68fa0cfd8', class: "sd-barcode-input__content" }, h("slot", { key: 'd7be8745d6b0f510a11c88e1ca629f78fbc77348', name: "prefix" }), h("input", { key: 'f214f2930fc54a0466a10ce295e46885352e0e88', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'a226a2c7ec43951ab9f048f8da25542784233e65', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: 'ff7f8853b43401f3bf4be051e69d8c459ca418aa', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '5e1e5e5ba201ea743fa83df03f7712d7141332e7', 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, 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: '4b8d82acd91c247b148d1b16f3b3c9d4e69c178f', class: "sd-barcode-input__content" }, h("slot", { key: '0fb54ff8ebca25f348f1fdbb7b29f5e391beea9e', name: "prefix" }), h("input", { key: '9c1e3fd1bfa35cc663838dc0dc737497525a8aa6', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '6e060c721546d34ce6137986ba7204df90a55f51', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: 'ded4ca906d1f25bbc80a7ba8e090eb24f507bb09', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';