@sellmate/design-system 1.9.0 → 1.10.0

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

@@ -27,7 +27,7 @@ export class SdCircleProgress {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (h(Host, { key: '9a4424e79b095c240b2dd53c8655b9a4cccaf581', style: hostStyle }, h("svg", { key: '37ca87d4c4aa6ab6b84a4301225d775f1998c0c1', 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: '372f7031310dddba431323b0527c273311a498e3', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: 'def6ff7573e4c4a08648f35f7cb545d6b8064f6d', 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: '13d6345672fdafaf6a1e1eef9f5987179a99c3ae', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: 'c42e2fa2826284017e530e967975e45277ae9ee3', class: "sd-circle-progress__label" }, this.label)));
+        return (h(Host, { key: '46d74c0edb5a5e8cd0472c83efc45a0efaf353b4', style: hostStyle }, h("svg", { key: '34117c89eb180370a215807e614ad08f4f72b517', 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: '08ac6f011b6a4b6744ddcf437b1e0a5b96abfc6e', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '5ae0a53ce10bd5a8b2f316ebd00d3ee28c4336d6', 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: 'fd52ee1947d41b2117c9ea6e4cc9a448799342e3', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: 'a58776c4ef67eb900eba97ff4fed138c8f5e8452', 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

@@ -73,9 +73,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: 'c41a58f13b95da7f1f0aea3620abf239dcb116b6', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'bdc1bc374934c2f9745f567b4e6ffd55ec3675ce', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: 'ff16ebde448157e657eb74e1b0c5f4a331cf396a', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: 'd718b2ae6f6e92f8c77ec821b78924ffbe267d12', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'a3909abde84c4d6987c9036a705cba4aa7d01ea6', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '29a4bf80ab75d973544c0a29c87133c9ef8a5aab', 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: '93eb2c75728cf26969a229a876f9217b4e00c63a', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (h("div", { key: '4d3ce0662b2d860a4ed6ae3c8177ae75dae4fb92', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: '7c406d59c2470b610a187bf45aa5cd4ab5c6b26b', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '10e3d2c8a87a728df4e3f3be7dfab96475738e2b', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '9cc844c8cefb2fd0dc96871b55fc1c7c6e41c526', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'bbaa81a02c067d66c4cc19cf805b7a6939231311', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '31734f096eee6e6a9be770eafa43066c8e763608', 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: 'a10838fb7c7081fdaa85cdaa33f92ef30c00a888', 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: '730fd073ade9b8788de77d36fc4aeddd0b304c07', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), h("div", { key: '059fd87fb39b8e2976fcb671c7dd78310324119f', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: '6b320645505c099783a4a6704e96e9261054c7dc', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: 'd6a4554a7db861ae7afc610a629591224946d990', 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: '540f3bb73aa61a1a2a041eba9a22a198c7772914', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), h("div", { key: '1944aeb4d140c779d0af1304160a86c5056335a8', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: 'efd463686d98e9d2edc3e1cd7b4f54d8da4fef56', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: 'b9033fb98acf3de36b7fb3e1969ccf5a7becef39', 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

@@ -33,7 +33,7 @@ export class SdDatePickerTrigger {
                 ? DATEPICKER_COLORS.icon.disabled
                 : DATEPICKER_COLORS.icon.default,
         };
-        return (h("div", { key: '8a41444172b2d9aa54fa6efe09c4440705d55e06', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (h("div", { key: '87ada0414ffc6404b27cf4a41ba7c9cb9903f498', 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 => {
@@ -41,7 +41,7 @@ export class SdDatePickerTrigger {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, h("sd-icon", { key: '74613a1b65814a1f73d00c67d7c1f01019961511', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '118733548ddee2bc20ccdc92785ada3bbc765303', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            } }, h("sd-icon", { key: 'e8eee3ed97ab7344e7658b7b22bc91f11aa0b068', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: 'ea25a13a72d00ca31fcddaf0183b520175ef7d93', 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

@@ -93,9 +93,9 @@ export class SdDatePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (h("sd-field", { key: '12d77a181caa4a6a9125db8a5c823149386ee059', 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: '2abc775817955caf06dd721d7b91c65d1bfd54de', class: "sd-date-picker", ref: el => {
+        return (h("sd-field", { key: 'baa957e5534b6587da2ef067ecad4a0934693800', 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: '652f9f5c6bd5c6ee58f3c89eee45325a98234ac0', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: 'c8c041a503785e35ac4a14d902eeef0a20fa2dd7', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '2c3bf831068ca090247fa4494fac6c2ce3b20e81', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: '52df44d23b85540cbca17c352aba5568ff43685d', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: '7b0f81badbcf7ca283afd274b4572e4a6eaa590b', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '65fbe892e4cdd9d643b5000d69220b5e28972902', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: 'e9187264f336295907f1d5574810df4a07a0f114', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get is() { return "sd-date-picker"; }
     static get originalStyleUrls() {

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

@@ -239,7 +239,7 @@ export class SdDateRangePickerCalendar {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (h(Fragment, { key: 'a9e5bc8198cfda50227069661812341e7a19b21d' }, h("div", { key: 'a2c5bf6ae806fc24f421cb6b52323f4e92bfc255', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '2575175fa3537e010e1c7d573428d5c8ebfae488', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: 'bd43ac98b88665dbe85804c8b6345c19dca7d9fa', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (h(Fragment, { key: '91ba95cf0786d59363ac6b72e9c8f91d1802feee' }, h("div", { key: '98f66737a15e5c3129dd20f674736115a4fad42e', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: 'd9f326b485864484ed786cb172d3bd33136987ea', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: 'df7d835ac0da6788f08c7963ed04ed98b7fd6091', 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: '92e9f5ef8d6d382e1e2a62f3421feaf1bc27aab7', style: hostStyle }, h("hr", { key: '40827e6308a258e6de4a438c53d4de9465a6d0a1', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
+        return (h(Host, { key: '8282aae8e5cd26630c54f4347cd26f544672d15d', style: hostStyle }, h("hr", { key: '94df7dc7465b05ecad6527da2c008a4ff503f034', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
     }
     static get is() { return "sd-divider"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.config.js

@@ -1,6 +1,6 @@
 import buttonTokens from "../../tokens/generated/component.button.json";
 import systemTokens from "../../tokens/generated/system.json";
-import { BUTTON_CONFIG, PRESET_BORDER_COLORS as BUTTON_PRESET_BORDER_COLORS, PRESET_CONTENT_COLORS as BUTTON_PRESET_CONTENT_COLORS, PRESET_HOVER_BACKGROUNDS as BUTTON_PRESET_HOVER_BACKGROUNDS, getPresetName, } from "../sd-button/sd-button.config";
+import { BUTTON_CONFIG, PRESET_BORDER_COLORS as BUTTON_PRESET_BORDER_COLORS, PRESET_TEXT_COLORS as BUTTON_PRESET_TEXT_COLORS, PRESET_ICON_COLORS as BUTTON_PRESET_ICON_COLORS, PRESET_HOVER_BACKGROUNDS as BUTTON_PRESET_HOVER_BACKGROUNDS, getPresetName, } from "../sd-button/sd-button.config";
 // lazy IIFE 로 평가를 한 단계 안으로 옮겨 ban-side-effects 룰의 top-level call 검출을 회피한다.
 // (런타임 동작은 동일하다 — 모듈 로딩 시점에 한 번 실행됨.)
 export const DROPDOWN_BUTTON_CONFIG = (() => {
@@ -8,7 +8,8 @@ export const DROPDOWN_BUTTON_CONFIG = (() => {
     return Object.fromEntries(names.map(name => [name, BUTTON_CONFIG[name]]));
 })();
 export const PRESET_HOVER_BACKGROUNDS = BUTTON_PRESET_HOVER_BACKGROUNDS;
-export const PRESET_CONTENT_COLORS = BUTTON_PRESET_CONTENT_COLORS;
+export const PRESET_TEXT_COLORS = BUTTON_PRESET_TEXT_COLORS;
+export const PRESET_ICON_COLORS = BUTTON_PRESET_ICON_COLORS;
 export const PRESET_BORDER_COLORS = BUTTON_PRESET_BORDER_COLORS;
 export const PRESET_DIVIDER_COLORS = {
     primary: buttonTokens.button.dropdown.brand.strong.split,

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

@@ -21,11 +21,14 @@ sd-dropdown-button {
   --sd-dropdown-button-bg-hover: #004177;
   --sd-dropdown-button-border: transparent;
   --sd-dropdown-button-content: #FFFFFF;
+  --sd-dropdown-button-icon: var(--sd-dropdown-button-content);
   --sd-dropdown-button-current-content: var(--sd-dropdown-button-content);
+  --sd-dropdown-button-current-icon: var(--sd-dropdown-button-icon);
   --sd-dropdown-button-divider: #006AC1;
   --sd-dropdown-button-accent: #0075FF;
   --sd-dropdown-button-disabled-bg: var(--sd-button-button-bg-disabled, #E1E1E1);
   --sd-dropdown-button-disabled-content: var(--sd-button-button-text-disabled, #888888);
+  --sd-dropdown-button-disabled-icon: var(--sd-button-button-icon-disabled, #BBBBBB);
   --sd-dropdown-button-disabled-border: var(--sd-button-button-border-disabled, #CCCCCC);
   display: inline-flex;
   align-items: stretch;
@@ -94,6 +97,7 @@ sd-dropdown-button {
   border-color: var(--sd-dropdown-button-disabled-border);
   background: var(--sd-dropdown-button-disabled-bg);
   --sd-dropdown-button-current-content: var(--sd-dropdown-button-disabled-content);
+  --sd-dropdown-button-current-icon: var(--sd-dropdown-button-disabled-icon);
   cursor: not-allowed;
 }
 

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

@@ -2,7 +2,7 @@ import { h, } from "@stencil/core";
 import { BaseDropdownEvent } from "../../utils/base-dropdown-event";
 import { sanitizeInlineHtml } from "../../utils/html/sanitize-inline-html";
 import { BUTTON_FOCUS_RING_COLOR } from "../sd-button/sd-button.config";
-import { DROPDOWN_BUTTON_CONFIG, DROPDOWN_CHEVRON_ICON_SIZE, DROPDOWN_DISABLED_BACKGROUND, DROPDOWN_DISABLED_BORDER, DROPDOWN_DISABLED_TEXT, getDropdownButtonPreset, isDropdownButtonName, PRESET_BORDER_COLORS, PRESET_CONTENT_COLORS, PRESET_DIVIDER_COLORS, PRESET_HOVER_BACKGROUNDS, PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS, PRESET_MENU_ITEM_ACTIVE_COLORS, PRESET_MENU_ITEM_COLORS, } from "./sd-dropdown-button.config";
+import { DROPDOWN_BUTTON_CONFIG, DROPDOWN_CHEVRON_ICON_SIZE, DROPDOWN_DISABLED_BACKGROUND, DROPDOWN_DISABLED_BORDER, DROPDOWN_DISABLED_ICON, DROPDOWN_DISABLED_TEXT, getDropdownButtonPreset, isDropdownButtonName, PRESET_BORDER_COLORS, PRESET_TEXT_COLORS, PRESET_ICON_COLORS, PRESET_DIVIDER_COLORS, PRESET_HOVER_BACKGROUNDS, PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS, PRESET_MENU_ITEM_ACTIVE_COLORS, PRESET_MENU_ITEM_COLORS, } from "./sd-dropdown-button.config";
 export class SdDropdownButton extends BaseDropdownEvent {
     constructor() {
         super();
@@ -175,11 +175,13 @@ export class SdDropdownButton extends BaseDropdownEvent {
             '--sd-dropdown-button-bg': config.color,
             '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
             '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
-            '--sd-dropdown-button-content': PRESET_CONTENT_COLORS[preset],
+            '--sd-dropdown-button-content': PRESET_TEXT_COLORS[preset],
+            '--sd-dropdown-button-icon': PRESET_ICON_COLORS[preset],
             '--sd-dropdown-button-divider': PRESET_DIVIDER_COLORS[preset],
             '--sd-dropdown-button-accent': BUTTON_FOCUS_RING_COLOR,
             '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
             '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
+            '--sd-dropdown-button-disabled-icon': DROPDOWN_DISABLED_ICON,
             '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
         };
     }
@@ -218,7 +220,7 @@ export class SdDropdownButton extends BaseDropdownEvent {
         return (h("span", { class: {
                 'sd-dropdown-button__trigger-icon': true,
                 'sd-dropdown-button__trigger-icon--open': this.isOpen && !this.split,
-            }, "aria-hidden": "true" }, h("sd-icon", { name: iconName, size: DROPDOWN_CHEVRON_ICON_SIZE[size], color: "var(--sd-dropdown-button-current-content)" })));
+            }, "aria-hidden": "true" }, h("sd-icon", { name: iconName, size: DROPDOWN_CHEVRON_ICON_SIZE[size], color: "var(--sd-dropdown-button-current-icon)" })));
     }
     render() {
         const { config, preset } = this.resolvedConfig;

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

@@ -10,6 +10,7 @@ const FORM_PARENT_TAGS = [
     'sd-file-picker',
     'sd-date-picker',
     'sd-date-range-picker',
+    'sd-chip-input',
 ];
 export class SdField {
     el;
@@ -172,21 +173,21 @@ export class SdField {
                     : {}),
             }
             : {};
-        return (h("div", { key: 'c6d4bc9d09982d65c31596319569590df9b994b1', class: {
+        return (h("div", { key: 'b2a4122378dd725d8b392b89ae44669f097ff767', class: {
                 'sd-field': true,
                 'sd-field--has-label': this.label !== '',
                 'sd-field--has-addon': addon !== '',
                 [this.fieldStatus]: this.fieldStatus !== '',
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, h("div", { key: '24f3e7702b3d3be42f8236988e1d64e26a31840e', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '7c45edce014adee7e2eb91296779896d9fd9fcc3', class: "sd-field__main", style: this.width !== '' && this.width !== 0
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, h("div", { key: 'ae6ead740a745248f89a3b9049480954091f5991', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '42699ddc5eb366d035986274dcf3ae7c17396e9c', class: "sd-field__main", style: this.width !== '' && this.width !== 0
                 ? {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, h("div", { key: '13c99702bf11e4ff76332141a9eaff93185882d3', class: {
+                : {} }, h("div", { key: 'f8c058d44411d27997e90bf3627a4b905f1a6112', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': addon !== '',
-            } }, addon && (h("div", { key: '461170360e26e24051fab4507a22e932f5a37244', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: 'c8b63273a253da7911e5d8a6f57143a9cc909853', 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: '3c4a72a6152c50d525df972a2a4c4d6840240116' })), 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: '86592d8a5046853eef3392e598c23d6348313e56', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: '147082f30f173615e9a4253e99eabae868960f6f', 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: 'a91c7c8ab0075f0cc1d2169b201bf37900872b99' })), 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

@@ -153,7 +153,7 @@ export class SdFloatingPopover {
         }
     }
     render() {
-        return h("slot", { key: 'df97046860db0225724f9768428063a3390c5f6e' });
+        return h("slot", { key: '7153fca24fbba922c0dd667bc3bf2314a551f750' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {

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

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

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

@@ -5,6 +5,7 @@ export class SdGhostButton {
     size = 'sm';
     intent = 'default';
     ariaLabel = '';
+    tooltipLabel = '';
     disabled = false;
     click;
     hasWarnedMissingAriaLabel = false;
@@ -12,6 +13,7 @@ export class SdGhostButton {
         this.size ??= 'sm';
         this.intent ??= 'default';
         this.ariaLabel ??= '';
+        this.tooltipLabel ??= '';
     }
     handleClick = (event) => {
         if (this.disabled) {
@@ -42,16 +44,19 @@ export class SdGhostButton {
             ? GHOST_BUTTON_DISABLED_COLORS[intent]
             : GHOST_BUTTON_CONTENT_COLORS[intent];
         const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
-        return (h("button", { key: '7bf9f8b8d487be0b66a969668308fd451faeb442', class: {
+        const tooltipLabel = (this.tooltipLabel ?? '').trim();
+        const hasTooltip = tooltipLabel.length > 0;
+        return (h("button", { key: 'fafdeaa60205f0190cc592ac8fdacbf140e28d6c', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
+                'sd-ghost-button--with-tooltip': hasTooltip,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-ghost-button-size': `${sizeConfig.size}px`,
                 '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[size]}px`,
                 '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("sd-icon", { key: '4b6b05d186f8c38d2f05415fa24960349dd6c453', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick }, hasTooltip && (h("span", { key: '57425145ccc76a0bf960377cb13ba06e37195fa3', class: "sd-ghost-button__tooltip", "aria-hidden": "true" }, h("sd-tag", { key: '9d097c96d701431ac92aa7fb305c418bb570bc16', name: "square_xs_grey", label: tooltipLabel }))), h("sd-icon", { key: '4b186b2fd33c70f4b47a2c736a53e1ac37bc2ebc', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
     static get is() { return "sd-ghost-button"; }
     static get originalStyleUrls() {
@@ -164,6 +169,26 @@ export class SdGhostButton {
                 "attribute": "aria-label",
                 "defaultValue": "''"
             },
+            "tooltipLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip-label",
+                "defaultValue": "''"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -112,12 +112,12 @@ export class SdInput {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (h("sd-field", { key: '184bd0b614071b1c26d0ef3588db8eea1ac519cb', 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: '599d757b62bd61be0ba5c2dde2e1030b4d6f2973', class: "sd-input__content" }, h("slot", { key: '8b71b1449225e51cbab4204e34c077d83101e09e', name: "prefix" }), h("input", { key: 'ed48cf8544adc9e3475229b03129ace0af0e6d4e', 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: 'f084df7c3174756111c6eeb824202e26273d369a', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '62f87c780b971ef43ec9bd15ae47d1f773ec18ca', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: 'fce402fae267b5700501e44935f23bebc28efb62', 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: 'f7d8f95cf5ee38a7aa2e44940ba39b9eb001064c', class: "sd-input__content" }, h("slot", { key: '23f1f770a268a0798293420ce0df9e5cc94e07b2', name: "prefix" }), h("input", { key: 'b8c041cc4a8761cf1cf93a8d1af139cd7720d2d8', 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: '5a288d50726b21c156da480937b9759e6c76d33a', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: 'b5315624a6fd5fdcb70526b1abea4fbac83641c1', 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: '83f511acdc0db74f6d7745e4a47c731f9bcf9bb5', 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: '5ae70d65c531db0bc57d17f85c328a275f7aab2b', 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

@@ -28,7 +28,7 @@ export class SdLinearProgress {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (h(Host, { key: '41d89c01b35a6edba09a3ef9f848458d284d491a', style: hostStyle }, h("div", { key: '79d7490c934437aa0075e39aea0f352dec61eae0', class: 'sd-linear-progress__track' }, h("div", { key: 'd6743f9b4f5a086e11a368989fd0f52a10bdc2ef', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (h("span", { key: '2d013c7cdf438e069d00c6fcddfca12ff55490e6', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (h("span", { key: '4f473a670cab7b0d104f9c455c28e415d5863a86', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '6581d326a1d05413587b44715613a4d878e4f658', class: 'sd-linear-progress__label' }, this.label)));
+        return (h(Host, { key: '49452751b0aaf5e6b49d809272620cf4b198ecc1', style: hostStyle }, h("div", { key: 'aec62dae8fa8d4a9d6e64e305fadc63836a1fef6', class: 'sd-linear-progress__track' }, h("div", { key: '0f7cce4cf0ebe6ce40cc127ab8b91fdaf88440cc', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (h("span", { key: 'af2f415ba6cc27c209eed2ff38b02ce58f81a861', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (h("span", { key: '2c21c62faf93ee809ae6fa098f7bf88e20447ca8', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '571c78db5fc8d7a6e4db2ed78e8c75c8be953e2f', class: 'sd-linear-progress__label' }, this.label)));
     }
     static get is() { return "sd-linear-progress"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-loading-container/sd-loading-container.js

@@ -10,10 +10,10 @@ export class SdLoadingContainer {
         this.visible = false;
     }
     render() {
-        return (h("div", { key: '99c6d9e798862f41142f246f371a357cd604aa44', class: {
+        return (h("div", { key: '314f23e9da2ec850d62b4d4e347055669841c1fe', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: 'b836c7d283113e57d0947a178035591521dc8ee2', class: "sd-loading-container__backdrop" }), h("div", { key: '02f1ae9b17eedb29f24d0170c65ef4217f38a5b5', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '3d9c1b33693e823c4c55967d00a63eff8a2a805e', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: '46c060f444506a9771507b09fd0867f763a95680', class: "sd-loading-container__message" }, this.message)))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '541eb68218969c73e52bc8cbdb79171ee0ba908e', class: "sd-loading-container__backdrop" }), h("div", { key: '95192e0c936419248c46a57acb4c5ab63465a2f5', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '5584a90aa595d3eaffc3597604a9dc359b22bcaf', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: 'e9dc0afbe43a318d7e776dd2f0bafa68ebe8536e', class: "sd-loading-container__message" }, this.message)))));
     }
     static get is() { return "sd-loading-container"; }
     static get originalStyleUrls() {

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

@@ -46,7 +46,7 @@ export class SdLoadingModal {
             '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
             '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
         };
-        return (h(Host, { key: 'e1161a16a56cddedc8e4bb76370bdf456d90e15a', style: hostStyle }, h("div", { key: 'e01979e4636465afa4b960ffdb9722f645386dca', class: "sd-loading-modal" }, h("div", { key: '1c1ecc05d20f58084c0d6f8048b17cd84f446edb', 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: '6793b86562b67699c59fd83fb0d6ee7378f6d991', 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: '75036f7d88be636987de2fe999c00d338fa352d5', class: "sd-loading-modal__button" }, h("sd-button", { key: '91f30470702df2be7256d451cc80d27e86510d2e', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (h(Host, { key: '17636253239532d90e596f20d84795fe2e65508d', style: hostStyle }, h("div", { key: '2f925afceca4102049d7876ab4d1e33fa1ef5ef7', class: "sd-loading-modal" }, h("div", { key: '0598cff340210ca9ec5e28fb1992cbbc1b8e5a06', 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: '3d699238c19ee66fd3afc72194133a865501cc08', 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: 'd454a168360cd23a3e71482d67ee81d8eabdec58', class: "sd-loading-modal__button" }, h("sd-button", { key: '0aa26dc830d1c4827f2ee0ca0bfdf4bb8cd2c9f5', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
     static get is() { return "sd-loading-modal"; }
     static get originalStyleUrls() {

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

@@ -275,15 +275,15 @@ export class SdNumberInput {
             '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
             '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
         };
-        return (h("sd-field", { key: '36525cd069e57fc9177e25065381f722d1afa66e', 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: '47e0981ffcd5dd5182fa5586fda0014be865da9e', class: {
+        return (h("sd-field", { key: '53c6935bbf98ed1eb0f28d6bed675ea369b0b2bc', 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: '8f0da8b179cd3946d625ab6b525a2ffd614a5333', class: {
                 'sd-number-input__content': true,
                 'sd-number-input__content--no-stepper': !this.useButton,
-            } }, this.useButton && (h("button", { key: '7f5afc1ded2c889ccf7d689f4ee058cb171571d9', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'fd980fd4e568feaaebb19621ca837201bea519dd', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+            } }, this.useButton && (h("button", { key: '1be42c16d5e671c567d4768f505c2c17c50f1b60', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'dc074328208c8da2ee43ea2cb03dbc838b7d46c9', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: '2af6450d437cc765697e0bb4c8a0fcb58a9abd2f', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: '21396363bd0e08f1639cd5a56b0bb7d5c9acd6c1', 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: '84896d40d79e936480052ab45d618cd73550ee87', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: 'f2c8995b6c059c2a4130018b2ff0c7eabcd7abfb', 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: 'd3cd84cd41e0161cfe0b13ed44b412991e498a92', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: '0a1fdf262b953ce79515ab9771d3177560e11eed', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '5ffd93512d528309a9051d01f59bb31f1b1f9bb8', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && h("span", { key: 'd6b1ca9f5991f1b2382dd4a35ae4f20832192e3c', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: '56a59f94ca27e8ef4255cabdd5fe003c602bb8d6', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '1b8fca91e893b5ade47ed63db4d4d54933c94e53', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }

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

@@ -83,13 +83,13 @@ export class SdPagination {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (h("div", { key: '36a334a05ade253a6345e82d57647a4bab0c94cf', class: {
+        return (h("div", { key: 'abfac6b075ce59ac37f747bf15729bf3879b1749', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, h("div", { key: '50963e0cdf4da3078020207c0115ccebfe1881d6', 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: '6c8a3eb2ad708649054068a671cf156fe154fae3', 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: 'a0d0b565cd2b5108c997888b2536ee740b167367', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: 'f0013d0057e6addb6a7fae39ebddd2c4f7af5bd0', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {

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

@@ -36,7 +36,7 @@ export class SdPopup {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (h("div", { key: '77379698e76b000368df2d2b7345010cde3df7ba', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: 'e00d2292b718bfd21e491a09e5ea8c18fbb1a2c8', class: "sd-popup__header" }, h("h2", { key: 'b8bac8f58f7f916a3b6fe40a66d21318da45d4d3', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: '56e5b653539752b9fd0fa4694f7342914cd7abc6', class: "sd-popup__body" }, h("slot", { key: '183fafa8179a3350817ec6e3dea12281860f7639' })), this.useFooter && (h("footer", { key: 'd1b7fe2d67e5f3ad3b3f8e20408271fdaab86d93', class: "sd-popup__footer" }, h("div", { key: '7cc5d0bd9d314942d8d5f982f1f459c56fde4bc0', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: 'ffb52c9d679e4ddf9e50e012f8a9aa02b0cb1f95', name: "footer-left" })), h("sd-button", { key: '3ab8061bf4119a9351921a41c3d9cb942c00b5d1', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (h("div", { key: 'ea933af50e1ad1a29cf8d73ce70222e2f44c0bb5', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: '50f1773d911175182888a98a0759b8d3d8829d2f', class: "sd-popup__header" }, h("h2", { key: '4e21a73a6e26388c6b1c814a91ee8a79bf57c576', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'dd6ace33c6d8b3e20c0c85c95580efbf8ad6747c', class: "sd-popup__body" }, h("slot", { key: 'e40fbea5b93016131df544f32b74676d2892204e' })), this.useFooter && (h("footer", { key: '96b27f465a804859a15e9105fcd64c7205bc2143', class: "sd-popup__footer" }, h("div", { key: '6715ba330610850ea235ddde5f2da00584204286', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '092aca3ad212b7218ce4ba247b78b7b45d9e4299', name: "footer-left" })), h("sd-button", { key: '290cd49879cc4868be69ceb60567eab57b5f26fe', ...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

@@ -220,7 +220,7 @@ export class SdPortal {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '87fb9bf3f15d09321c6c02a1f7b4ed9084516a04' });
+        return h("slot", { key: 'f7b160cb574608fa16f6edd27d259b85787e6144' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {

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

@@ -71,7 +71,7 @@ export class SdSelectListItem {
         return (
         // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        h("div", { key: 'f85ad121abc818e1a46d4a8d69621b62d4d42197', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        h("div", { key: '55ebe094653cb89d5c70916c3e0a2f4ccb5551f8', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
                 'sd-select-list-item': true,
                 'sd-select-list-item--group': isGroup,
                 'sd-select-list-item--depth1-group': isDepth1Group,
@@ -81,7 +81,7 @@ export class SdSelectListItem {
                 'sd-select-list-item--focused': this.isFocused,
                 'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '1ba65cfb53d1f41b71081608a331171e30763213', 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: '22b1552a6fc6c60e3c985b38bf6874067efc5ec0', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: 'f636931bc20264db98e521b11b819610cda764cd', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), 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: '89750bc08c03915b738da390f4255e7451aa9d6d', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
     static get is() { return "sd-select-list-item"; }
     static get originalStyleUrls() {

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

@@ -41,15 +41,15 @@ export class SdSelectListItemSearch {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (h("div", { key: 'fed22be7a3156cd526c006a256434c93cbb34b78', class: {
+        return (h("div", { key: '6cf78c7d616dc21a7a6e806c184322d12cacb50d', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: '27dd47fc17ad02da989febef2c05f32e0310f8cf', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: 'd6cda28af6d9100f03c7378ca3e435bb0d7813eb', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: 'fc3a77a9dd1171b4ef6a66c4cc27f7dfd00ac611', ref: el => {
+            } }, h("div", { key: 'dd9fa44fed1f3ec7a222dacaa710cdf32ddbe6fc', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '2d65a81b7b6160ac4e93016adea0da43d5d01ec8', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '0d5c4bb09778518aa17a210a2d1a9eb620a1dd7b', 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: '3173d3ab47f961bc2277f729089d26656bdbdf19', 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: 'e9708437f310788bf8b9a4d358dea9b83cc88ed8', 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: '18285bbf608ea53a44f35a608d1c2bb7abc11697', name: "close", size: 12, color: "#888888" })))));
+            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: 'ed8b1c93809f823205f357b059a8b556e0278b1c', name: "close", size: 12, color: "#888888" })))));
     }
     static get is() { return "sd-select-list-item-search"; }
     static get originalStyleUrls() {

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

@@ -351,9 +351,9 @@ export class SdSelectListbox {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (h("div", { key: 'e0547836378ca809ba48bad194a9ff307af5e23f', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: 'e561d5f372f1fcbf31c3bde8042e9bcd06bac0e1', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '851fb60b4063da678bcf1c3ae127f248be0c0bfe', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (h("div", { key: '6c2cbad13f8aaa8c0552068c7cbc35a147bee77d', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '052d783e27e2458aa397c77fe891dad4a440f09e', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: 'bba95f3c4475d01a65562ba079c8666e3325195d', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (h("sd-select-list-item", { key: 'a88151c3f15a35de5b9bc7b7dd4e9e7658fb18de', 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: '2f55bbacbed71952903599db0739773176ac55fd', 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

@@ -43,7 +43,7 @@ export class SdSelectTrigger {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (h("div", { key: '463a86e25dbed4aaa8a785f26c5441828e9265d4', ref: el => {
+        return (h("div", { key: 'b5a4f750c00889d0d9b985211063fc6b20bc2e38', 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,
@@ -54,7 +54,7 @@ export class SdSelectTrigger {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '0067809554f428497ee1324307cf613f03ce7f6a', 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: '425163158c134c003f75165f1af0b2a5add62bb6', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: 'be0b61c0550618602ef016504fa1672f7520fa93', 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: '9d60c3eeae54ce6ed9609534e3530d0349d1a3ff', 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

@@ -253,15 +253,15 @@ export class SdSelect {
                 this.closeDropdown();
             },
         };
-        return (h("sd-field", { key: '4ce9951b423a779ce291dcb674cd9c9afce7c0ee', 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: 'd3c3175067494715963592806a150bebadd8970c', 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: 'd100c33179cb3eadbdd5e6bbd6ca7425424df717', class: "sd-select", ref: el => {
+            } }, h("div", { key: 'c291b661a968375c341d26ac48f7ff7fd4947e3e', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-trigger", { key: 'e1e577f92cb5d5817e0c5bf92a959de505176bb2', ref: el => {
+            } }, h("sd-select-trigger", { key: '45da184f72f989d9c6be05479fec7a616f168ddf', 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: 'fc85f29e40eec288cbf8432417b012e8d1a9503f', ...portalProps }, h("sd-select-listbox", { key: '0232651347600d021bcbe89636dcdf27e31e9b5f', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: 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: 'bd7a612cf9ef74e157336a8de0170cebb61074dc', ...portalProps }, h("sd-select-listbox", { key: '8117fab3ef6b2f5f77e74a234c6b21dfc2549df1', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: 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

@@ -40,7 +40,7 @@ export class SdSwitch {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (h("label", { key: '7862eed6e08c9837c50cb2a8b3ad018d9aa614e0', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'cabab7d30e2edc9bd5f295dad96e5945ef6f0a1e', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: 'ad78625af9b6ae95e46636269748ebd00f3553e3', class: "sd-switch__track" }, h("div", { key: '55b0daaf2f5fc048f38b5d52adad55786b16843e', class: "sd-switch__knob" })), this.label && h("span", { key: '99dcdf1afbbedc253469fb06392eb27532acac80', class: "sd-switch__label" }, this.label)));
+        return (h("label", { key: '54ebe92b29a80537e2e4380ffe096a252f883d10', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'd18abbbf293434f07ae7dfa18b983b47cac1b774', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '76fef910e632b541c0b33c508e6001529df5614f', class: "sd-switch__track" }, h("div", { key: 'a66f4ecca5787f00febe19216a93ec62916e0541', class: "sd-switch__knob" })), this.label && h("span", { key: '948d2b7afc6e171ee329752cb85f8e361f6bbed8', class: "sd-switch__label" }, this.label)));
     }
     static get is() { return "sd-switch"; }
     static get originalStyleUrls() {