@sellmate/design-system 1.0.49 → 1.0.50

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

@@ -73,7 +73,7 @@ const SdSelectV2ListItem = class {
         if (isDepth1Group) {
             cssVars['--list-item-border-top'] = `${sdSelectV2_config.LIST_ITEM_COLORS.depth1.borderWidth}px solid ${sdSelectV2_config.LIST_ITEM_COLORS.depth1.border}`;
         }
-        return (index.h("div", { key: 'c84ff08d801e2775edfb55e30e11b3ec37c3e0e1', class: {
+        return (index.h("div", { key: '5c11caeeb2a5d8e13f47098adb32af0d771a9b00', class: {
                 'sd-select-v2-list-item': true,
                 'sd-select-v2-list-item--group': isGroup,
                 'sd-select-v2-list-item--depth1-group': isDepth1Group,
@@ -83,7 +83,7 @@ const SdSelectV2ListItem = class {
                 'sd-select-v2-list-item--focused': this.isFocused,
                 'sd-select-v2-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-v2-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: '96423d573fd7cbd158196d114ae6c81a371c2fd7', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), index.h("span", { key: '4745f1f61994b31b2b84fb651eb47974e9cb5f0e', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (index.h("span", { key: '311244150b27e9aa50d4ab790bacca3552af43ae', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: 'fe911e3eb7b3ce57a1c6ff88007c9322070712b5', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), index.h("span", { key: 'c2fcc803ca012f6a1f708b8a959e2dc5e724ae65', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (index.h("span", { key: 'efd3d5c4328e0b0f3dfc8176e93f80c8d73cf3b4', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
 };
 SdSelectV2ListItem.style = sdSelectV2ListItemCss();
@@ -136,12 +136,12 @@ const SdSelectV2ListItemSearch = class {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (index.h("div", { key: 'c09115eed7c6fc796f80aa965b64dec18caf6c49', class: {
+        return (index.h("div", { key: '76aabf7d27484909131a5a019b091a9162cf579e', class: {
                 'sd-select-v2-list-item-search': true,
                 'sd-select-v2-list-item-search--scrolled': this.isScrolled,
-            } }, index.h("div", { key: 'd5d4132740768db4b1e9df4f7e4e7085f5fbe408', class: "sd-select-v2-list-item-search__inner" }, index.h("sd-icon", { key: '428d646550ed6d3488a493f1614ba4211611c945', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), index.h("input", { key: '5fb8aea3be8de6cf81cee48667d552b8a3bd47dd', ref: el => {
+            } }, index.h("div", { key: 'add67bf72a66f391e59d5b36a0132c8ce3104a72', class: "sd-select-v2-list-item-search__inner" }, index.h("sd-icon", { key: '631a0335fac05e7188132a2c04adcab70b4f8e0f', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), index.h("input", { key: '206ea8ce226bf5a9a39da20643dec26682752f56', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), this.searchText && (index.h("button", { key: '64178df4690ea5736c554f13d7613f172fb7ff9a', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, index.h("sd-icon", { key: '4143f22fbfd890a39ee7149dfbc4c46e07ba259b', name: "close", size: 12, color: "#888888" }))))));
+            }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), this.searchText && (index.h("button", { key: '6d1aa5a22f358da1f702c1a4c44acf561bdc2d5f', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, index.h("sd-icon", { key: 'a1ec717b949e539bf32701a604e098ffa4c9e783', name: "close", size: 12, color: "#888888" }))))));
     }
 };
 SdSelectV2ListItemSearch.style = sdSelectV2ListItemSearchCss();

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

@@ -292,7 +292,7 @@ const SdSelectV2Listbox = class {
             '--listbox-radius': `${sdSelectV2_config.LIST_BOX_LAYOUT.radius}px`,
             '--listbox-padding-bottom': `${sdSelectV2_config.LIST_BOX_LAYOUT.paddingBottom}px`,
         };
-        return (index.h("div", { key: 'b6a2e5bdc338bceb6fff14fb4dd1dff7aa5ef8d4', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-v2-list-item-search", { key: '70698ce176c33401a5846a078e56b1f20332881c', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: 'b8106d8003dde8476b119cdde89fe4ddcaab2611', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (index.h("div", { key: '7728feee63a4e282220abfefcf79a0225255d3e0', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-v2-list-item-search", { key: '0c2cbd8ba7ec612307a94962bae3d07655ec6554', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: 'e0b594dbc86e9dee867fd9573fc84228f5cb48ec', 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" }, sdSelectV2_config.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) })))))));
     }
@@ -338,11 +338,11 @@ const SdSelectV2Trigger = class {
                 ? sdSelectV2_config.SELECT_COLORS.icon.disabled
                 : sdSelectV2_config.SELECT_COLORS.icon.default,
         };
-        return (index.h("div", { key: 'bc824455fa516812712fe2c3f5858a7afe64340a', class: {
+        return (index.h("div", { key: 'c26c6817d3df7db251e3043e44504b70a6232dd1', 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: 'bf7bae47cc19b07d76dcadf118f8490a40a7b635', class: "sd-select-v2-trigger__content" }, index.h("span", { key: '89799c367a752c6a7403ed20801e5dc87c9f3426', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), index.h("sd-icon", { key: 'dac0037a8c2f3d475795786b642f7cd725358fa4', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, style: cssVars, onClick: this.handleClick }, index.h("div", { key: '2c99a628d315f1bfe999429f816a21ea62dab6ae', class: "sd-select-v2-trigger__content" }, index.h("span", { key: 'fd9ccefa586982ac1695a3f16cf83bc3d1e11719', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), index.h("sd-icon", { key: '1c7e82fb106945a537931726795d3440e71714c8', 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-v2.cjs.entry.js

@@ -216,13 +216,13 @@ const SdSelectV2 = class {
                 this.closeDropdown();
             },
         };
-        return (index.h("sd-field", { key: '94a50bd86ecb1fdaab2e5edd816f123f985bb5e1', name: this.fieldName || this.internalName, label: this.label, addonLabel: this.addonLabel, 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: '4a2253174ec791043f98ecca8703670b8423beaf', name: this.fieldName || this.internalName, label: this.label, addonLabel: this.addonLabel, 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: '6986034ffd38602b111724ea998199d88bbed270', class: "sd-select-v2", ref: el => {
+            } }, index.h("div", { key: 'a1cf728f0d8f133ed5766c5f9adb3a955e8927ca', class: "sd-select-v2", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-select-v2-trigger", { key: '3af08facaebc0ec5b99ced0bb93cf8daea3367cb', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '6fa4284cdd6d69d02a93e2e18423a7029122e58f', ...portalProps }, index.h("sd-select-v2-listbox", { key: '323f811ace6ee59c1d7b15ae7fa497a49b1d2f17', 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: 'b939f8fe711b253b00a094a9c60f4f67892b166f', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '9a50037ca13cd754f820d6f2f6052f9c4928feb7', ...portalProps }, index.h("sd-select-v2-listbox", { key: 'e6e5b14376647bf4204bab2b65f6468b85b768c1', 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-tabs.cjs.entry.js

@@ -23,7 +23,6 @@ const SdTabs = class {
         this.value = newValue;
     }
     handleTabClick = (tabValue) => {
-        this.value = tabValue;
         this.value = tabValue;
         this.update.emit(tabValue);
     };
@@ -49,9 +48,9 @@ const SdTabs = class {
         return `square_${this.size}_${color}`;
     }
     render() {
-        return (index.h("div", { key: 'c179db82ee130f4ccbdca7cb1af7b156ad174df8', class: this.getContainerClasses() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: '74a25ee4311c84e79f4918b884385f27d6af6313', 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() }))));
+            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() })));
         })));
     }
     static get watchers() { return {

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

@@ -171,7 +171,7 @@ const SdTag = class {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (index.h("span", { key: 'e2ea10f2795e7cb481108903609785d490046539', class: "sd-tag", style: {
+        return (index.h("span", { key: '1cfaeb97f648f8929cdaf6bd5650e400f47cb207', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -181,7 +181,7 @@ const SdTag = class {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: '129b9791f345e368de9d19afef62f740435dd07f', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: 'c858d07e4b33f9d142a7d2719399374c37785fe3', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
 };
 SdTag.style = sdTagCss();

package/dist/cjs/sd-text-link.cjs.entry.js

@@ -86,16 +86,16 @@ const SdTextLink = class {
             '--sd-text-link-text-decoration': typo.textDecoration,
             '--sd-text-link-color': contentColor,
         };
-        return (index.h("span", { key: 'e93a2744e49a267f4b775793e0e18f0c223a03dd', class: {
+        return (index.h("span", { key: '518661e48081a4c128667608ebda9a1dca1b19c0', class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.icon && (index.h("sd-icon", { key: '3f39510caef0cec81ba23340e25f920389886b69', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: 'ad0cac3fda5be82e5f0d2d9e7822b2bf82d2d4ee', class: "sd-text-link__label" }, this.label), this.useArrow && (index.h("span", { key: '2ecdfdb83f62468ff36f6da1b96caf53b2302bbf', class: "sd-text-link__arrow", style: {
+            }, style: cssVars, onClick: this.handleClick }, this.icon && (index.h("sd-icon", { key: 'b73b19f38036987ab312e8ce9960280fa863a44e', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: 'a61877f0c9740259fa81344b41f43de50d76d582', class: "sd-text-link__label" }, this.label), this.useArrow && (index.h("span", { key: '2887c482820bff0dcbd3e753f979b242b765e5b9', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, index.h("sd-icon", { key: '92140c5c4fffc70af27894cd4f1a6bab80e6f64c', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, index.h("sd-icon", { key: 'da303224cde569553d8eca8e6215761640ea2470', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

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

@@ -86,10 +86,10 @@ const SdTextarea = class {
     }
     render() {
         const maxLengthCounter = this.getMaxLengthCounter();
-        return (index.h("div", { key: '623b3d8085c36cc4ea9de4e5b7c775d1a83eb73c', class: {
+        return (index.h("div", { key: 'cd47db7305c089848a3385932945a99cd3932ebb', class: {
                 'sd-textarea': true,
                 [this.getTextareaStatus()]: true,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("div", { key: '9947ecb8ddaede40977ab421603ac987853617f6', class: "sd-textarea__content" }, index.h("textarea", { key: '8373ccc78b85abf84b09af3953b15a145bf5e747', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (index.h("div", { key: '7392aabb95444be4f95605c6d342dcf68c2b09e2', class: "sd-textarea__footer" }, this.helpText !== undefined && index.h("span", { key: '0ace2ab4995f183184d6f1ed9f4c2ee77f30614c', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && index.h("span", { key: '6b029c0b183d80ad3c838ef666ce2461679b3ce2', class: "sd-textarea__counter" }, maxLengthCounter)))));
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("div", { key: '2768eed1797ecc42e3e9d7a15416f93fa8eb211f', class: "sd-textarea__content" }, index.h("textarea", { key: '91af1337c1209d9798728912a7eae52acf02b6ca', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (index.h("div", { key: '9d4e2e72a87beb9e95009c8824165f136e2b194c', class: "sd-textarea__footer" }, this.helpText !== undefined && index.h("span", { key: 'e420045dbb4cd253125594ea7230818281aa920f', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && index.h("span", { key: '3658f7f91c21e301f0fe5b69226a6380d500fbca', class: "sd-textarea__counter" }, maxLengthCounter)))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -40,7 +40,7 @@ const TOAST_LAYOUT = {
     iconSize: toastTokens.toast.icon,
 };
 
-const sdToastCss = () => `sd-toast{display:block;width:fit-content;height:fit-content}sd-toast .sd-toast{display:flex;width:fit-content;align-items:center;gap:var(--sd-toast-gap, 16px);padding:var(--sd-toast-padding-y, 12px) var(--sd-toast-padding-x, 24px);border-radius:var(--sd-toast-radius, 8px);background-color:var(--sd-toast-bg);color:var(--sd-toast-text);box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}sd-toast .sd-toast__icon{display:flex;align-items:center;flex-shrink:0}sd-toast .sd-toast__content{display:flex;flex:1}sd-toast .sd-toast__message{font-size:14px;line-height:24px;font-weight:700;white-space:nowrap}sd-toast .sd-toast__link{font-size:14px;line-height:24px;font-weight:700;color:var(--sd-toast-text);text-decoration:underline;cursor:pointer;transition:opacity 0.2s ease;margin-left:4px}sd-toast .sd-toast__link:hover{opacity:0.8}sd-toast .sd-toast__button{flex-shrink:0}sd-toast .sd-toast__button button{color:var(--button-text-color, inherit) !important}sd-toast .sd-toast__close{display:flex;align-items:center;justify-content:center;padding:4px;background-color:transparent;border:none;cursor:pointer;transition:opacity 0.2s ease;flex-shrink:0}sd-toast .sd-toast__close:hover{opacity:0.7}sd-toast .sd-toast__close:active{opacity:0.5}`;
+const sdToastCss = () => `sd-toast{display:block;width:fit-content;height:fit-content}sd-toast .sd-toast{display:flex;width:fit-content;align-items:center;gap:var(--sd-toast-gap, 16px);padding:var(--sd-toast-padding-y, 12px) var(--sd-toast-padding-x, 24px);border-radius:var(--sd-toast-radius, 8px);background-color:var(--sd-toast-bg);color:var(--sd-toast-text);box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}sd-toast .sd-toast__icon{display:flex;align-items:center;flex-shrink:0}sd-toast .sd-toast__content{display:flex;flex:1}sd-toast .sd-toast__message{font-size:14px;line-height:24px;font-weight:700;white-space:nowrap}sd-toast .sd-toast__link{font-size:14px;line-height:24px;font-weight:700;color:var(--sd-toast-text);text-decoration:underline;cursor:pointer;transition:opacity 0.2s ease;margin-left:4px}sd-toast .sd-toast__link:hover{opacity:0.8}sd-toast .sd-toast__button{flex-shrink:0}sd-toast .sd-toast__button button{color:var(--button-text-color, inherit) !important}sd-toast .sd-toast__close{flex-shrink:0}`;
 
 const SdToast = class {
     constructor(hostRef) {
@@ -57,10 +57,10 @@ const SdToast = class {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (index.h("div", { key: '02f7aaf208dabe0d4ed07816038379c865073296', style: {
+        return (index.h("div", { key: '9f9332b868ad1ae09854a6eeb7dc0935d412147c', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, index.h("div", { key: 'b6273da0052dc663dc97c71705b8378ce9f73922', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '569b0afaeade5d5ec41218e1927a247df6beffc1', class: "sd-toast__icon" }, index.h("sd-icon", { key: 'b7e2113a36f3af91adaadbe1f87c39cef37c01fd', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: 'af6e8c9e5db30cbf5a1be3f0958470101935dde2', class: "sd-toast__content" }, index.h("span", { key: 'f6459b3d086f7675b37e922f9f4bc8ae6a257197', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: 'd3c000b69d039850b65c35836c0246d91290c111', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("button", { key: 'c9d75b733730fe6af6aa49b3780d1c9a894b7408', type: "button", class: "sd-toast__close", onClick: () => this.close.emit(), "aria-label": "Close", title: "Close" }, index.h("sd-icon", { key: '170643bc8fecd2f275202d28f2873ddb71918bbc', name: "close", size: iconSize, color: typeConfig.content }))))));
+            } }, index.h("div", { key: '762ac3406fd9d98dc4583244de6744f1e2c6eec6', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '8f7f2ce05c5e0f26b5d4af17284cc67ae35c9677', class: "sd-toast__icon" }, index.h("sd-icon", { key: '456de7bdf8b1ed1c11ec35d73b7b78ee7fd2c9d8', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: 'a4feb91f9a79023413f01f79e2012dc9f9af0d3b', class: "sd-toast__content" }, index.h("span", { key: '091acd520b42f2cd2d0ae199ea540ce9d3a3f59f', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: 'f1738019a27b9f6f98c17183c7acdcbee9f6e00e', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("sd-ghost-button", { key: '8cfb8c54a20d71fdc17f9bf8ba5fe6d6ce028ed3', class: "sd-toast__close", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

package/dist/collection/collection-manifest.json

@@ -25,6 +25,7 @@
     "components/sd-field/sd-field.js",
     "components/sd-file-picker/sd-file-picker.js",
     "components/sd-floating-portal/sd-floating-portal.js",
+    "components/sd-ghost-button/sd-ghost-button.js",
     "components/sd-guide/sd-guide.js",
     "components/sd-icon/sd-icon.js",
     "components/sd-input/sd-input.js",

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

@@ -22,5 +22,3 @@ export const ACTION_MODAL_TITLE = {
     fontSize: Number(action.title.typography.fontSize),
     lineHeight: Number(action.title.typography.lineHeight),
 };
-export const CLOSE_ICON_SIZE = Number(modal.close.size);
-export const CLOSE_ICON_COLOR = modal.close.color;

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { ACTION_MODAL_LAYOUT, ACTION_MODAL_TITLE, CLOSE_ICON_SIZE, CLOSE_ICON_COLOR, } from "./sd-action-modal.config";
+import { ACTION_MODAL_LAYOUT, ACTION_MODAL_TITLE } from "./sd-action-modal.config";
 export class SdActionModal {
     modalTitle = '';
     buttonLabel = '확인';
@@ -25,7 +25,7 @@ export class SdActionModal {
             '--sd-action-modal-title-font-size': `${ACTION_MODAL_TITLE.fontSize}px`,
             '--sd-action-modal-title-line-height': `${ACTION_MODAL_TITLE.lineHeight}px`,
         };
-        return (h("div", { key: '15fc49f34b906f21a0939a1fab37270132392f24', class: "sd-action-modal", style: cssVars }, h("header", { key: '7c9f30b1a021cee5ec72b8aa034baa2c84dd43e0', class: "sd-action-modal__header" }, h("h2", { key: '413fc21c9b3ff23ecb90a7b4f7897a1fc80656bc', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: '4a1edc0dffd575bb6e9e438174c492b5d86ec94e', class: "sd-action-modal__header-sub" }, h("slot", { key: '633669925cf29bf0e3a189e5afb321e19310a2b1', name: "header-sub-title" })), h("sd-icon", { key: 'c4a59612d10ee42adb62148935ebdfb7fa6ac9cd', class: "sd-action-modal__close", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() })), h("div", { key: 'ddeaf5f1945f3aff28a3a0e2c9d26daf019dc60e', class: "sd-action-modal__body" }, h("slot", { key: '2ea7b49a2368744372ab92ff6539920eb4894654', name: "body" })), h("footer", { key: '4804e5b8137fe99abb4aaae06a427d1aaed0e50f', class: "sd-action-modal__footer" }, h("div", { key: 'affd8bd4bf14e9b50ea59fd632d07b494c7888c4', class: "sd-action-modal__footer-sub" }, h("slot", { key: '59458e4be9131e3e4fb200e4688fe2a46f8874c8', name: "bottom-sub-content" })), h("sd-button-v2", { key: 'fde6ccdeef52199d4b657ec9dea3fa193315961c', name: "primary_md", label: this.buttonLabel, onSdClick: () => this.ok.emit() }))));
+        return (h("div", { key: 'c8d2ab2b26ed09c4e7af102d5c63bd15bea93556', class: "sd-action-modal", style: cssVars }, h("header", { key: '0a2b8ed31201b01570002fc22acd721bfca7cb94', class: "sd-action-modal__header" }, h("h2", { key: '434595ee377242447556598a9e60e94fb776f8a3', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: 'e60988af90d0abc16508144cb45e2334e096539c', class: "sd-action-modal__header-sub" }, h("slot", { key: '74aabd257bfcbc1458446d8712df399573cecca7', name: "header-sub-title" })), h("sd-ghost-button", { key: 'b4937b9d686047ae8e9bfcd12413dbf42f4e90ad', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: '9a0a7b4927a4edb4252f843dd1bd71037dbb94dd', class: "sd-action-modal__body" }, h("slot", { key: 'cc92c17e415edf18f990d633fbdaf70dd757da72', name: "body" })), h("footer", { key: '35ff49a26c607430e0bd0553aa6d350cbd6e9423', class: "sd-action-modal__footer" }, h("div", { key: 'cd346a4a7195ad262f2298b512dfac5b3cabff2f', class: "sd-action-modal__footer-sub" }, h("slot", { key: '207c68c831e06e05cc2d17c3ac93aefd47ed9b28', name: "bottom-sub-content" })), h("sd-button-v2", { key: 'f2de8110262e9bc403a3d65ba9324c3b9a6225c9', name: "primary_md", label: this.buttonLabel, onSdClick: () => this.ok.emit() }))));
     }
     static get is() { return "sd-action-modal"; }
     static get originalStyleUrls() {

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

@@ -1,5 +1,4 @@
 import inputTokens from "../../tokens/generated/component.textinput.json";
-import systemTokens from "../../tokens/generated/system.json";
 const sm = inputTokens.input.sm;
 const md = inputTokens.input.md;
 export const BARCODE_INPUT_SIZE_MAP = {
@@ -28,7 +27,3 @@ export const BARCODE_INPUT_COLORS = {
     text: inputTokens.input.text,
     icon: inputTokens.input.icon,
 };
-export const BARCODE_INPUT_ICON = {
-    frameSize: Number(inputTokens.input.size.icon),
-    iconSize: Number(systemTokens.size.field.icon),
-};

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

@@ -17,8 +17,8 @@ input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
   -webkit-text-fill-color: #000;
-  -webkit-box-shadow: 0 0 0px 1000px #FAFAA1 inset;
-  box-shadow: 0 0 0px 1000px #FAFAA1 inset;
+  -webkit-box-shadow: 0 0 0px 1000px #fafaa1 inset;
+  box-shadow: 0 0 0px 1000px #fafaa1 inset;
   transition: background-color 5000s ease-in-out 0s;
 }
 
@@ -27,8 +27,8 @@ input:autofill:hover,
 input:autofill:focus,
 input:autofill:active {
   -webkit-text-fill-color: #000;
-  -webkit-box-shadow: 0 0 0px 1000px #FAFAA1 inset;
-  box-shadow: 0 0 0px 1000px #FAFAA1 inset;
+  -webkit-box-shadow: 0 0 0px 1000px #fafaa1 inset;
+  box-shadow: 0 0 0px 1000px #fafaa1 inset;
   transition: background-color 5000s ease-in-out 0s;
 }
 
@@ -68,5 +68,8 @@ sd-barcode-input .sd-barcode-input__content .sd-barcode-input__native::placehold
 }
 sd-barcode-input .sd-barcode-input__content .sd-barcode-input__clear-icon {
   flex-shrink: 0;
-  cursor: pointer;
+}
+sd-barcode-input .sd-barcode-input__content .sd-barcode-input__native[disabled] ~ .sd-barcode-input__clear-icon {
+  cursor: not-allowed;
+  pointer-events: none;
 }

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

@@ -1,6 +1,6 @@
 import { h, } from "@stencil/core";
 import { nanoid } from "nanoid/non-secure";
-import { BARCODE_INPUT_SIZE_MAP, BARCODE_INPUT_COLORS, BARCODE_INPUT_ICON } from "./sd-barcode-input.config";
+import { BARCODE_INPUT_SIZE_MAP, BARCODE_INPUT_COLORS, } from "./sd-barcode-input.config";
 export class SdBarcodeInput {
     host;
     value = null;
@@ -100,7 +100,9 @@ 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: 'bf8a16c74a275b660b36fd7959ed77c08c067fe6', name: this.name, label: this.label, addonLabel: this.addonLabel, 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, 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: '473ec98ef476f19a2d027682ccb36fd7904d8f1e', class: "sd-barcode-input__content" }, h("slot", { key: '45eb8852eb187d485af88b8f5a8552d37cb1159c', name: "prefix" }), h("input", { key: 'f521c19dbd8bab3bab44cca8dc71b04b3dcf2798', 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: 'b97b9fe1448b4bae027df77b2507e63680b9aef8', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '232f35a0a749b640027bace2b614e45b81bd8ea3', name: "close", color: BARCODE_INPUT_COLORS.icon.default, size: BARCODE_INPUT_ICON.iconSize, class: "sd-barcode-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '9987023d28947334836b6b0b0c5f493eab91c59c', name: this.name, label: this.label, addonLabel: this.addonLabel, 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, 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: 'a3b70f106f4d05a82b9da0fda0c1450fef5a4bd4', class: "sd-barcode-input__content" }, h("slot", { key: '5c6aa9b488ca414d191b538bca0bbcc1aca6cf75', name: "prefix" }), h("input", { key: '94133a24b1ba1e691584a27c5ddd13ded76ff462', 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: '04d64be5bd466b68423e44caab9cc513610bef92', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: '052388d8e79b249752a6668db221af140b3eea1f', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
+                if (this.disabled)
+                    return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
             } })))));

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

@@ -2,10 +2,10 @@ import { h } from "@stencil/core";
 import buttonTokens from "../../tokens/generated/component.button.json";
 import { resolveColor } from "../../utils/color";
 const ICON_SIZES = {
-    xs: Number(buttonTokens.size.xs.icon),
-    sm: Number(buttonTokens.size.sm.icon),
-    md: Number(buttonTokens.size.md.icon),
-    lg: Number(buttonTokens.size.lg.icon),
+    xs: Number(buttonTokens.xs.icon),
+    sm: Number(buttonTokens.sm.icon),
+    md: Number(buttonTokens.md.icon),
+    lg: Number(buttonTokens.lg.icon),
 };
 export class SdButton {
     el;
@@ -51,7 +51,7 @@ export class SdButton {
         const buttonClasses = this.getButtonClasses();
         // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)
         const resolvedColor = resolveColor(this.color);
-        return (h("button", { key: 'b1436c0cdf0267446df9cd022df68a8a6c349ca5', class: `${buttonClasses} ${this.sdClass}`, type: this.type, disabled: this.disabled, style: { '--button-color': resolvedColor }, onClick: this.handleClick }, h("div", { key: '70f9450410dbc7b2603679cda397bc8f211928b1', class: "sd-button__content" }, this.icon && (h("sd-icon", { key: 'ab09632262d175e8dc9a31df4e673470d128b274', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ?? ICON_SIZES[this.size], color: this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor) })), this.label && h("div", { key: 'c33e565c9108996ab4a3d84b5beaf1d8acbd5700', class: "sd-button__label" }, this.label), this.iconRight && (h("sd-icon", { key: '112a9649b77e7eb67198d0bf7bf407e9f7f71cd5', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor })))));
+        return (h("button", { key: '079f66bd47a67c5e7cf95ff6b0b6a10aa84697d5', class: `${buttonClasses} ${this.sdClass}`, type: this.type, disabled: this.disabled, style: { '--button-color': resolvedColor }, onClick: this.handleClick }, h("div", { key: '78c7b1b6b7828fe93c5a2752fbaf41b0b8c17cb2', class: "sd-button__content" }, this.icon && (h("sd-icon", { key: '3f0afbeec89e0064f404d4967870516c87f35ac2', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ?? ICON_SIZES[this.size], color: this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor) })), this.label && h("div", { key: '319ac39031f4118489d88eec50eb590067422f87', class: "sd-button__label" }, this.label), this.iconRight && (h("sd-icon", { key: '3e25e709e39ffbaceec0863c4fc5c54b8d34d5e1', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor })))));
     }
     static get is() { return "sd-button"; }
     static get originalStyleUrls() {

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

@@ -131,10 +131,10 @@ export const BUTTON_CONFIG = {
     },
 };
 export const BUTTON_ICON_SIZES = {
-    xs: Number(buttonTokens.size.xs.icon),
-    sm: Number(buttonTokens.size.sm.icon),
-    md: Number(buttonTokens.size.md.icon),
-    lg: Number(buttonTokens.size.lg.icon),
+    xs: Number(buttonTokens.xs.icon),
+    sm: Number(buttonTokens.sm.icon),
+    md: Number(buttonTokens.md.icon),
+    lg: Number(buttonTokens.lg.icon),
 };
 export const PRESET_HOVER_BACKGROUNDS = {
     primary: buttonTokens.brand.strong.bg.hover,

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

@@ -15,6 +15,4 @@ export const CONFIRM_MODAL_ICON_COLOR = {
     default: '',
 };
 export const TITLE_ICON_SIZE = Number(modalTokens.modal.confirm.title.icon);
-export const CLOSE_ICON_SIZE = Number(modalTokens.modal.close.size);
-export const CLOSE_ICON_COLOR = modalTokens.modal.close.color;
 export const SUB_BUTTON_PRESET = 'neutral_outline_md';

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

@@ -12,9 +12,8 @@ sd-confirm-modal .sd-confirm-modal {
 }
 sd-confirm-modal .sd-confirm-modal__close-button {
   position: absolute;
-  top: 16px;
-  right: 16px;
-  cursor: pointer;
+  top: 12px;
+  right: 12px;
 }
 sd-confirm-modal .sd-confirm-modal__icon {
   display: block;

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { CONFIRM_MODAL_ICON_MAP, CONFIRM_MODAL_ICON_COLOR, CONFIRM_MODAL_DEFAULT_BUTTON, TITLE_ICON_SIZE, CLOSE_ICON_SIZE, CLOSE_ICON_COLOR, SUB_BUTTON_PRESET, } from "./sd-confirm-modal.config";
+import { CONFIRM_MODAL_ICON_MAP, CONFIRM_MODAL_ICON_COLOR, CONFIRM_MODAL_DEFAULT_BUTTON, TITLE_ICON_SIZE, SUB_BUTTON_PRESET, } from "./sd-confirm-modal.config";
 export class SdConfirmModal {
     el;
     hasSlottedContent = false;
@@ -67,9 +67,9 @@ export class SdConfirmModal {
     render() {
         const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
-        return (h("div", { key: '7f4965b642b3963fd3d0614b3e8b3fae8e8ae179', class: "sd-confirm-modal" }, h("sd-icon", { key: '4c2479d3afbc4c900dc4d329a8aaa04b6f520bb3', class: "sd-confirm-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: 'ec3f165135429b8a409e304bedff32897bd6566a', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: 'd2aae4878396d9bd714db26847ecad677e7a4cfb', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: '76b9c1fcfaae36edbd56c4d494013829456def98', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '636b0c6ce6bcba2722fae64ed582d90ce4f25367', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: '1000f4f7e2674025ce3d220461828ab95e28eea8', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (h("div", { key: '8c4e6a948ffb27ea597dfc9d200b689c2667404a', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: '4acc52151149bdaf882e097fc12cae7ea10303c4', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '95ba699cf46bb6eaefdca98f37b45eef38e3e8b2', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: 'bb58b92c976751935ba4984f46a41edf0ee7ecb9', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: 'eccfb9b1f1c87e75a4a768802720b5f3468f167a', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '4c318650406ed9e75cc584ad3262d3782425fe31', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: 'f19744c657f73883ecafcbddc6b69e055e4694ec', 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, label: this.tagLabel }), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '3c6c0141dc0807725b92e824ccdedf3609d46484', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: 'fc73a08c85231570f72a9899ffee5cbd0c8882ba', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: 'dcbf92525246d05e57896340c3ef5761a574a08f', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button-v2", { key: '146c0b3c0183773ba03c2bde150add46618f181b', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
+            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '32cdf1a8ad4289cde89c13d1d250bc93f9392c73', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: '1ced06b3bbc49593b9709fad227adcc3119e895b', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: 'cc7f45c6e6d3e0f925f581eff030e20dc0c40163', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button-v2", { key: '78d55d4d0f2e2aae9d2692bbc142cf74d8d1795b', 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-file-picker/sd-file-picker.js

@@ -39,6 +39,8 @@ export class SdFilePicker {
         this.update?.emit(this.value);
     };
     handleClear = (event) => {
+        if (this.disabled)
+            return;
         event.stopPropagation();
         const clearedValue = this.multiple ? [] : null;
         this.value = clearedValue;
@@ -91,15 +93,15 @@ export class SdFilePicker {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (h("div", { key: '70152265f5fc43ddcda4318545698a58ee116b67', class: {
+        return (h("div", { key: 'b30f68abd7b5954ed60843fb436963306b3c9d58', class: {
                 'sd-file-picker': true,
                 [this.getStatusClass()]: true,
                 'sd-file-picker--inline': this.inline,
-            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: '138e570a3660e8e79790da78a1527ff6eed8d313', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { key: '1d81730bd5fd82dda6e73ae86a62e9c4c0e0470a', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '4a433e8403beb6e953cd64726306df16e7560daa', ref: el => (this.fileNamesRef = el), class: {
+            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: '6b0432850bc995ced5a87d2db33d5c669bb9f53d', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { key: 'bf0efeaf7aac37cc8fed9a1f6dca8179be053506', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '7b8cdf49421b152f1cc14360a93b0b8a088e6125', ref: el => (this.fileNamesRef = el), class: {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: 'be2c64f7d28d6fe5c4146508f1544a3bb9fa6c8f', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '42659b157f11b26d7abd740b4a3761ad3dbf0b0a', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (h("sd-ghost-button", { key: '73386aa53e838065297d444310a33e32e0cb7c8a', icon: "close", size: "xxs", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '54b4337797351ba86b391a020fa5260e807ff27e', class: "sd-file-picker__tooltip" }, displayText))));
     }
     static get is() { return "sd-file-picker"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-floating-portal/sd-floating-portal.css

@@ -148,10 +148,6 @@
   position: absolute;
   top: 12px;
   right: 12px;
-  padding: 0;
-  background: none;
-  border: none;
-  cursor: pointer;
 }
 
 @keyframes sd-floating-fade-out {

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

@@ -0,0 +1,37 @@
+import ghostButtonTokens from "../../tokens/generated/component.ghostButton.json";
+export const GHOST_BUTTON_FOCUS_RING_COLOR = '#0075FF';
+export const GHOST_BUTTON_SIZES = {
+    xxs: {
+        size: Number(ghostButtonTokens.ghostButton.xxs.size),
+        icon: Number(ghostButtonTokens.ghostButton.xxs.icon),
+    },
+    xs: {
+        size: Number(ghostButtonTokens.ghostButton.xs.size),
+        icon: Number(ghostButtonTokens.ghostButton.xs.icon),
+    },
+    sm: {
+        size: Number(ghostButtonTokens.ghostButton.sm.size),
+        icon: Number(ghostButtonTokens.ghostButton.sm.icon),
+    },
+    md: {
+        size: Number(ghostButtonTokens.ghostButton.md.size),
+        icon: Number(ghostButtonTokens.ghostButton.md.icon),
+    },
+    lg: {
+        size: Number(ghostButtonTokens.ghostButton.lg.size),
+        icon: Number(ghostButtonTokens.ghostButton.lg.icon),
+    },
+};
+export const GHOST_BUTTON_RADIUS = Number(ghostButtonTokens.ghostButton.radius);
+export const GHOST_BUTTON_HOVER_OPACITY = ghostButtonTokens.ghostButton.hover.opacity;
+export const GHOST_BUTTON_CONTENT_COLORS = {
+    default: ghostButtonTokens.ghostButton.default.content,
+    danger: ghostButtonTokens.ghostButton.danger.content,
+    action: ghostButtonTokens.ghostButton.action.content,
+};
+export const GHOST_BUTTON_HOVER_BG_COLORS = {
+    default: ghostButtonTokens.ghostButton.default.hover.bg,
+    danger: ghostButtonTokens.ghostButton.danger.hover.bg,
+    action: ghostButtonTokens.ghostButton.action.hover.bg,
+};
+export const GHOST_BUTTON_DISABLED_ICON = ghostButtonTokens.ghostButton.icon.disabled;

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

@@ -0,0 +1,43 @@
+sd-ghost-button {
+  display: inline-flex;
+  width: fit-content;
+  height: fit-content;
+}
+
+.sd-ghost-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sd-ghost-button-size);
+  height: var(--sd-ghost-button-size);
+  padding: 0;
+  border: none;
+  border-radius: var(--sd-ghost-button-radius);
+  background: transparent;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition: box-shadow 0.2s ease;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.sd-ghost-button::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: var(--sd-ghost-button-hover-bg);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  pointer-events: none;
+}
+.sd-ghost-button:hover:not(.sd-ghost-button--disabled)::before {
+  opacity: var(--sd-ghost-button-hover-opacity);
+}
+.sd-ghost-button:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 2px var(--sd-ghost-button-accent);
+}
+.sd-ghost-button--disabled {
+  cursor: not-allowed;
+}