@sellmate/design-system 1.0.59 → 1.0.61

package/dist/cjs/{sd-select-v2.config-BJXi4hMP.js → sd-select-v2.config-7xBJQhvx.js}

@@ -56,11 +56,11 @@ var listItemTokens = {
 	listItem: listItem
 };
 
-const paddingBottom = "4";
-const radius = "4";
+const listBox = {
+	radius: "4"};
 var listBoxTokens = {
-	paddingBottom: paddingBottom,
-	radius: radius};
+	listBox: listBox
+};
 
 // ── Select Trigger Tokens ──
 const SELECT_LAYOUT = {
@@ -117,8 +117,7 @@ const LIST_ITEM_COLORS = {
     }};
 // ── ListBox Tokens ──
 const LIST_BOX_LAYOUT = {
-    radius: listBoxTokens.radius,
-    paddingBottom: listBoxTokens.paddingBottom,
+    radius: listBoxTokens.listBox.radius,
 };
 // ── Constants ──
 const SEARCH_THRESHOLD = 11;

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

@@ -770,16 +770,16 @@ const SdTable = class {
         return (index.h("td", { key: `virtual-${position}-spacer-${rowIdx}`, class: "sd-table__virtual-spacer", style: this.getSpacerCellStyle(spacerWidth), "aria-hidden": "true" }, index.h("div", { class: "sd-table__skeleton-cell" })));
     }
     render() {
-        return (index.h(index.Fragment, { key: 'f3e4930d36d080fd546dddc1e80190b831e93012' }, index.h("div", { key: 'ad2f798951631319190d93f83e25b87f871e58de', class: "sd-table__wrapper", style: {
+        return (index.h(index.Fragment, { key: 'cc7236bc2511f0b7c6bd31610e005c558e4dda81' }, index.h("div", { key: 'c78feb1d4ba89c8340660405598c8892d660078d', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, index.h("div", { key: 'c4b6d4080f1416d1c88ab1413c66848bdafe9019', class: "sd-table__container", style: {
+            } }, index.h("div", { key: 'e127e5e51cfa1b930a79d031ff4fbffac3cf8b69', class: "sd-table__container", style: {
                 '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, index.h("div", { key: '3aacc27970b0c6d8b700063c0af7c57175e2cb22', class: {
+            } }, index.h("div", { key: 'ea47affe622b7f7c98b9c044db73f275a9c7b8ba', class: {
                 'sd-table__middle': true,
                 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
                 'sd-table__middle--loading': this.isLoading,
-            } }, this.isLoading && (index.h("div", { key: '25fca304a4e8ebf43aeeff20de3e3446d25e1ffb', class: "sd-table__middle--loading__spinner" }, index.h("sd-loading-spinner", { key: '48b0adad60cf422b884557b53097c28a4f0b8879' }))), index.h("table", { key: 'ec4328a1f43c865de642cc5814fbdef6a374b7e3', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (index.h("div", { key: 'ba362ecb9fb8134a15ff3d0a3b8e6a523e94166a', class: "sd-table__bottom" }, index.h("div", { key: 'ca5c2e0b19a1e301ac159588436ef24eecfb6365', class: "sd-table__no-data" }, index.h("slot", { key: '68564a60a05833ba87743212d7189eef6e179fb4', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (index.h("div", { key: '88c3c7362234c20a60f6437ecd79d4c75b2caa6e', class: "sd-table__pagination" }, index.h("sd-pagination", { key: 'c3c8c435fcb752f2b1139981bb764cf4dfb153ab', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: '03801039397a31321e5af96c2bd2d2900151240e', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
+            } }, this.isLoading && (index.h("div", { key: '52c9d3a0b83bf786980cb6561b39234d3f1697ad', class: "sd-table__middle--loading__spinner" }, index.h("sd-loading-spinner", { key: '60d8f10a4f35e509969190ab23713057f9fb1efb' }))), index.h("table", { key: 'fd25840b4aeddd456d97c7397541da58c8d0aed9', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (index.h("div", { key: '5d1ed19126eb328a78ff50e701392b0d18208030', class: "sd-table__bottom" }, index.h("div", { key: 'e3cc512088e0bf7f6ec9699c1ce948910d621e45', class: "sd-table__no-data" }, index.h("slot", { key: 'a5285e5d607a66a6e9f7993c6a82dc9bd6d53a08', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (index.h("div", { key: '1a57bf7960624ebfd80005cd320d0d29ed7b6123', class: "sd-table__pagination" }, index.h("sd-pagination", { key: 'dbc457c10036556928c3503ef84b8bfc29849342', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: '6a0bdf472ed0dfca4c57725635c50bf1a375f11c', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
     }
     static get watchers() { return {
         "columns": [{

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

@@ -45,10 +45,10 @@ const SdTabs = class {
     }
     getBadgeName(tab) {
         const color = this.isTabSelected(tab) ? 'blue' : 'grey';
-        return `square_${this.size}_${color}`;
+        return `square_xs_${color}`;
     }
     render() {
-        return (index.h("div", { key: '74a25ee4311c84e79f4918b884385f27d6af6313', class: this.getContainerClasses() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: '4fee168f0120b757d480e2dfa66fdbec3d9fd45d', class: this.getContainerClasses() }, this.tabs.map((tab, index$1) => {
             const badgeName = this.getBadgeName(tab);
             return (index.h("div", { key: `tab-${index$1}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, index.h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && index.h("sd-tag", { name: badgeName, label: tab.badge.toString() })));
         })));

package/dist/cjs/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: '0a1fe7d5e6a3fcdf3a392e1e8d16032139116c7e', class: "sd-tag", style: {
+        return (index.h("span", { key: 'acfc91bdd46c2f0fc53b066d6c6b9de94068c492', 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: '405deaf8fa66c9ea703035211ff2274d2dc78884', 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: '8d7f7f40c4eb55687f2c7ebe66fba04c3846c0e2', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
 };
 SdTag.style = sdTagCss();

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

@@ -75,16 +75,16 @@ const SdTextLink = class {
             '--sd-text-link-text-decoration': typo.textDecoration,
             // '--sd-text-link-color': contentColor,
         };
-        return (index.h("span", { key: 'bd6850cf5749760dd3ff021d7cf902313d684f66', class: {
+        return (index.h("span", { key: 'b20b183974df13a11812d3f3c16abd2456dd0eb5', class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.icon && (index.h("sd-icon", { key: '9ec2424e482f2dc8e528c72c5bcdcaf17cc9cee0', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: 'babc8b94040286764a005393b807bf0abded0181', class: labelClassName }, this.label), this.useArrow && (index.h("span", { key: '4b219e46326e3900316321a619c620132c5434a6', class: "sd-text-link__arrow", style: {
+            }, style: cssVars, onClick: this.handleClick }, this.icon && (index.h("sd-icon", { key: '581390418ffdd23767838b6f4777fa36cac3ec89', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: 'a733650304df4c66bb1a0f54cc0554538263830d', class: labelClassName }, this.label), this.useArrow && (index.h("span", { key: '1437e31870f22bcb13146cc8f2652f3b8d7fa57a', 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: '7c06ce3757b35b01bc3c70f1a078fd8c0ea6df83', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, index.h("sd-icon", { key: '17a886109c8e5f72daf5f1f8baa4e185161c934d', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

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

@@ -2,20 +2,20 @@
 
 var index = require('./index-BQt-JC6r.js');
 var index$1 = require('./index-BUvXpPc3.js');
-var component_textinput = require('./component.textinput-BWW8c3OY.js');
+var component_textinput = require('./component.textinput-C4SsDjA1.js');
 
 const TEXTAREA_TOKENS = {
-    paddingX: component_textinput.inputTokens.input.sm.paddingX,
-    paddingY: component_textinput.inputTokens.input.sm.paddingY,
-    radius: component_textinput.inputTokens.input.sm.radius,
-    fontSize: component_textinput.inputTokens.input.sm.typography.fontSize,
-    lineHeight: component_textinput.inputTokens.input.sm.typography.lineHeight,
-    fontWeight: component_textinput.inputTokens.input.sm.typography.fontWeight};
+    paddingX: component_textinput.inputTokens.textinput.sm.paddingX,
+    paddingY: component_textinput.inputTokens.textinput.sm.paddingY,
+    radius: component_textinput.inputTokens.textinput.sm.radius,
+    fontSize: component_textinput.inputTokens.textinput.sm.typography.fontSize,
+    lineHeight: component_textinput.inputTokens.textinput.sm.typography.lineHeight,
+    fontWeight: component_textinput.inputTokens.textinput.sm.typography.fontWeight};
 const TEXTAREA_COLORS = {
-    text: component_textinput.inputTokens.input.text,
-    bg: component_textinput.inputTokens.input.bg,
-    border: component_textinput.inputTokens.input.border,
-    resizer: component_textinput.inputTokens.input.resizer,
+    text: component_textinput.inputTokens.textinput.text,
+    bg: component_textinput.inputTokens.textinput.bg,
+    border: component_textinput.inputTokens.textinput.border,
+    resizer: component_textinput.inputTokens.textinput.resizer,
 };
 
 const sdTextareaCss = () => `sd-textarea{display:inline-flex}sd-textarea .sd-textarea__content{width:100%;display:flex}sd-textarea .sd-textarea__content .sd-textarea__native{width:100%;min-height:100px;border:none;outline:none;background:transparent;padding:var(--sd-textarea-padding-y) var(--sd-textarea-padding-x);font-family:inherit;font-size:var(--sd-textarea-font-size);line-height:var(--sd-textarea-line-height);font-weight:var(--sd-textarea-font-weight);color:var(--sd-textarea-text-color);resize:vertical}sd-textarea .sd-textarea__content .sd-textarea__native::placeholder{color:var(--sd-textarea-placeholder-color)}sd-textarea .sd-textarea__content .sd-textarea__native:disabled{cursor:not-allowed;color:var(--sd-textarea-disabled-color)}`;
@@ -128,7 +128,7 @@ const SdTextarea = class {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (index.h("sd-field", { key: '390028112d84c22766c6e00fa3625312b8096629', 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 }, index.h("div", { key: '026ec0293049da167e7dbab5d3a28593d5e6b291', class: "sd-textarea__content" }, index.h("textarea", { key: 'd30b5e1bc61535c1c350f09bf2ea289f0b09001b', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
+        return (index.h("sd-field", { key: 'ea611c76e2550f996cfe8848aa880d070325f133', 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 }, index.h("div", { key: '90dbe39c0dd4eb8e6dfbf15afb8d04925d1c767b', class: "sd-textarea__content" }, index.h("textarea", { key: '9026a4837b4b7bba8bc8237ad3c1f516b9dda267', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -234,7 +234,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (index.h("div", { key: '7d2c4a095a0762710024c4c102ce49c7c7163368', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: '18ef06077ee49165d6237dbd4fff06e8c1997bcb', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -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: 'cb42937774233de10872edb8414db88f03868eb3', style: {
+        return (index.h("div", { key: '2a054f05ab63f450e7b0dc1d3816dc9cfca149d0', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, index.h("div", { key: 'e58b3335c4d7c450ef3686c53138636502c4e0f3', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '62e42c814ab2f15d563b3f75c4e9dd3e559318a0', class: "sd-toast__icon" }, index.h("sd-icon", { key: '3e346baecd3207ee817ba843427ed2076fd7cc7c', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: '700c7127a1d59409103b5ceb917e584020078736', class: "sd-toast__content" }, index.h("span", { key: 'd4165f0e324048edcb2492f3050795d26ce1fc86', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: 'f87089865b4e4fd5b488185478c453641920ac92', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("sd-ghost-button", { key: '33de3a35d1532cd15215751996827a462a7b8cad', class: "sd-toast__close", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, index.h("div", { key: 'e9ebafe293282a8df041b343e83ccbcca0f15919', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'ebd56ba5d1aea16453a8e90be0ab1d7be8ccd579', class: "sd-toast__icon" }, index.h("sd-icon", { key: 'd01746c69004c6697209f76a88baba467bf290db', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: '962d70832f11496be43a60415aa435a9094c3fef', class: "sd-toast__content" }, index.h("span", { key: 'fd868607134f556980c67f22c2e55d9819fbfb99', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '72feff87a7e2f0a7726ed293e14203ae1c82d80f', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("sd-ghost-button", { key: 'f98218ceb7d1a339065219a35bef7db4125ea30b', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

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

@@ -41,7 +41,7 @@ const SdToggleButton = class {
         this.change.emit(newValue);
     };
     render() {
-        return (index.h("label", { key: '9d98201d5ab361d0d2d5c8c61ce1e5b129f4d588', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: 'a745715a752bf99a94ab01d8c07c87d0f507a8ef', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: '0e933c52b633eec101beec8aa6ec888dc6bc3448', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: '833e7c26895e310cb6322b7231345f76f0a409dc', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggleButton.style = sdToggleButtonCss();

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

@@ -37,7 +37,7 @@ const SdToggle = class {
         this.change.emit(newValue);
     };
     render() {
-        return (index.h("label", { key: '9f4cf71a2aab588deb68d8e6908f0988ddbacb90', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: '6d1279761ea384a233bff234c549030709fd4ea3', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: '7ecd96f5e2c48fda17ed0086ab3cc8bc1caab458', class: "sd-toggle__label" }, this.label), index.h("div", { key: '26f4d468e4ff0c4473e2ce00b7e69a855a249a96', class: "sd-toggle__track" }, index.h("div", { key: '3a7f4019197cfa23dc268ee95308e60d7159ba28', class: "sd-toggle__thumb" }))));
+        return (index.h("label", { key: 'ca08050cdbbb4e5e7e615f72411be5bff93955d8', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: 'abdae5d4dc59fc121ded9cc0800f68d3996d4e50', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: '37d23f59f877100c53deace3c6c70b441df5748c', class: "sd-toggle__label" }, this.label), index.h("div", { key: '545f76c3c1e63198f6dc80bdf6bf44f6840082b2', class: "sd-toggle__track" }, index.h("div", { key: '4142b2e46b93cf1d5f86cb1b5a4490c0e6a03a05', class: "sd-toggle__thumb" }))));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/collection/collection-manifest.json

@@ -4,6 +4,7 @@
     "components/sd-calendar/sd-calendar.js",
     "components/sd-checkbox/sd-checkbox.js",
     "components/sd-date-box/sd-date-box.js",
+    "components/sd-date-range-picker/sd-date-range-picker.js",
     "components/sd-form/sd-form.js",
     "components/sd-radio/sd-radio.js",
     "components/sd-radio-button-group/sd-radio-button-group.js",
@@ -19,7 +20,9 @@
     "components/sd-card/sd-card.js",
     "components/sd-confirm-modal/sd-confirm-modal.js",
     "components/sd-date-picker/sd-date-picker.js",
-    "components/sd-date-range-picker/sd-date-range-picker.js",
+    "components/sd-date-picker/sd-date-picker-calendar/sd-date-picker-calendar.js",
+    "components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js",
+    "components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.js",
     "components/sd-portal/sd-portal.js",
     "components/sd-dropdown-button/sd-dropdown-button.js",
     "components/sd-field/sd-field.js",

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

@@ -29,7 +29,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: 'b306dc102137e9b76faeeb19587dce32d670163c', class: "sd-action-modal", style: cssVars }, h("header", { key: 'e6b9699e9943d1f4001b4cd23f99975474c3e86e', class: "sd-action-modal__header" }, h("h2", { key: '4d30b98d01a191e4bdc3fb1ff772483dfd3a8397', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: 'f1083fe5c2643d09dc4bad4c50064ffda2db65ab', class: "sd-action-modal__header-sub" }, h("slot", { key: 'a11c9a13ae11569226ac11fb4be6b782667defeb', name: "header-sub-title" })), h("sd-ghost-button", { key: 'e8a76ecd5d1388a79ac19705d634f40c05e6c2fc', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: 'eb615713a8fbfdd1c40c805e3146fc8341686c72', class: "sd-action-modal__body" }, h("slot", { key: 'd56a3331bc2e94748f150c11dba9e5bd1fad8043', name: "body" })), h("footer", { key: 'd80ad9de537846b01f79588e363bb40e76c64fba', class: "sd-action-modal__footer" }, h("div", { key: '49187df32a64d18b2492995a80ce49df02e9303e', class: "sd-action-modal__footer-sub" }, h("slot", { key: 'd73e66710152c0718d7cab6bbcbd1ab2cebf1f87', name: "bottom-sub-content" })), h("sd-button-v2", { key: '03d2f2a0fa6960983c46e47460f623dfd42811a3', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() }))));
+        return (h("div", { key: 'a49f78c558f14d89b18569388c9f63899b2d8584', class: "sd-action-modal", style: cssVars }, h("header", { key: 'b03ed5b4eed300a78711eae2b7491e46340c4f61', class: "sd-action-modal__header" }, h("h2", { key: '05a21b4f9fb2be6149c46de6f3a2f1ea6e33e95d', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: '641524d22a46c5da6c8ed1265a4f6bf311be4603', class: "sd-action-modal__header-sub" }, h("slot", { key: 'b45fc41c0d895beadcd67314d56fb36f361f24b6', name: "header-sub-title" })), h("sd-ghost-button", { key: 'aaeb806bab195f18cfa9c7af87c47ca8e63a6716', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: '248af7a4bb179a9077a54534cb7c590eacde29fb', class: "sd-action-modal__body" }, h("slot", { key: 'af91ab4ad191c29ed3e72e05e6265d48781ed2e9', name: "body" })), h("footer", { key: '938ccf2283d70a152c598c03e62af8ff17192f74', class: "sd-action-modal__footer" }, h("div", { key: '28e18ee211a61cec38259459d9deb3a80e99d4ff', class: "sd-action-modal__footer-sub" }, h("slot", { key: 'e3f2cafeb9978cb46f94c09692a924544cf1630a', name: "bottom-sub-content" })), h("sd-button-v2", { key: '765bc516e06d757c728f5d68b371c07061be61e0', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() }))));
     }
     static get is() { return "sd-action-modal"; }
     static get originalStyleUrls() {

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

@@ -5,7 +5,7 @@ export class SdBadge {
     label = '';
     render() {
         const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
-        return (h("div", { key: '7535760a065f5b0afa35d58c6f3017cacb31f507', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '1a42bf60039e469b0676b0266f9cbde168e8c27e', class: "sd-badge__dot" }), h("div", { key: '2296c4187b5222849dbe0472d19669376b53350f', class: "sd-badge__label" }, this.label)));
+        return (h("div", { key: 'ba4351faddf17a489fd4419e265d11279734a475', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '84fbfecbd5ae7fd68941817891b91b68aee1d9e2', class: "sd-badge__dot" }), h("div", { key: 'ef53189b37a82d8daa3cce3b6cd9052d8352c8e7', class: "sd-badge__label" }, this.label)));
     }
     static get is() { return "sd-badge"; }
     static get originalStyleUrls() {

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

@@ -1,6 +1,6 @@
 import inputTokens from "../../tokens/generated/component.textinput.json";
-const sm = inputTokens.input.sm;
-const md = inputTokens.input.md;
+const sm = inputTokens.textinput.sm;
+const md = inputTokens.textinput.md;
 export const BARCODE_INPUT_SIZE_MAP = {
     sm: {
         height: sm.height,
@@ -22,8 +22,8 @@ export const BARCODE_INPUT_SIZE_MAP = {
     },
 };
 export const BARCODE_INPUT_COLORS = {
-    border: inputTokens.input.border,
-    bg: inputTokens.input.bg,
-    text: inputTokens.input.text,
-    icon: inputTokens.input.icon,
+    border: inputTokens.textinput.border,
+    bg: inputTokens.textinput.bg,
+    text: inputTokens.textinput.text,
+    icon: inputTokens.textinput.icon,
 };

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

@@ -100,7 +100,7 @@ export class SdBarcodeInput {
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
             '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
         };
-        return (h("sd-field", { key: '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 () => {
+        return (h("sd-field", { key: 'b9f59f804f48888086fb49e46e4bcbacaff57205', 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: 'eebe928e88c814817d172688af675b753db96d0b', class: "sd-barcode-input__content" }, h("slot", { key: '5046c4bf4010d4ccbbb91d42e1c83f28674c19e5', name: "prefix" }), h("input", { key: '0887d9587d834624e6a756299d00383a3ffd44b5', 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: 'c5140b914ea57234ed6babf26265cc7556f48e15', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: '45862d80442c826152bf5a8ac01e598a1222de42', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';

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

@@ -16,7 +16,7 @@ sd-button {
   --sd-button-icon-only-size: var(--sd-button-height);
   text-decoration: none;
   cursor: pointer;
-  border-radius: var(--sd-button-radius-default, 4px);
+  border-radius: var(--sd-button-radius-sm, 4px);
   transition: all 0.2s ease-in-out;
   position: relative;
   overflow: hidden;

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.xs.icon),
-    sm: Number(buttonTokens.sm.icon),
-    md: Number(buttonTokens.md.icon),
-    lg: Number(buttonTokens.lg.icon),
+    xs: Number(buttonTokens.button.xs.icon),
+    sm: Number(buttonTokens.button.sm.icon),
+    md: Number(buttonTokens.button.md.icon),
+    lg: Number(buttonTokens.button.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: '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 })))));
+        return (h("button", { key: 'b18b0e46ec5a26e35fd0c782c975c1e3f94c7bea', class: `${buttonClasses} ${this.sdClass}`, type: this.type, disabled: this.disabled, style: { '--button-color': resolvedColor }, onClick: this.handleClick }, h("div", { key: '3364b81ca9323e88b56ccde7783417416ecec4a0', class: "sd-button__content" }, this.icon && (h("sd-icon", { key: 'dbe12d21483f50cab4e7284fc340e5b02ec6578d', 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: '793b3ef70ff8fbe7a043baf3b00097ab0c3bb59b', class: "sd-button__label" }, this.label), this.iconRight && (h("sd-icon", { key: '9b35739d4c18c38f9487c806d4becc312146bed4', 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

@@ -1,12 +1,12 @@
 import buttonTokens from "../../tokens/generated/component.button.json";
 export const BUTTON_FOCUS_RING_COLOR = '#0075FF';
 const PRESET_DEFAULT_COLORS = {
-    primary: buttonTokens.brand.strong.bg.default,
-    secondary: buttonTokens.brand.subtle.bg.default,
-    primary_outline: buttonTokens.brand.outline.bg.default,
-    neutral_outline: buttonTokens.neutral.outline.bg.default,
-    danger: buttonTokens.danger.strong.bg.default,
-    danger_outline: buttonTokens.danger.outline.bg.default,
+    primary: buttonTokens.button.brand.strong.bg.default,
+    secondary: buttonTokens.button.brand.subtle.bg.default,
+    primary_outline: buttonTokens.button.brand.outline.bg.default,
+    neutral_outline: buttonTokens.button.neutral.outline.bg.default,
+    danger: buttonTokens.button.danger.strong.bg.default,
+    danger_outline: buttonTokens.button.danger.outline.bg.default,
 };
 export const BUTTON_CONFIG = {
     primary_xs: {
@@ -131,37 +131,37 @@ export const BUTTON_CONFIG = {
     },
 };
 export const BUTTON_ICON_SIZES = {
-    xs: Number(buttonTokens.xs.icon),
-    sm: Number(buttonTokens.sm.icon),
-    md: Number(buttonTokens.md.icon),
-    lg: Number(buttonTokens.lg.icon),
+    xs: Number(buttonTokens.button.xs.icon),
+    sm: Number(buttonTokens.button.sm.icon),
+    md: Number(buttonTokens.button.md.icon),
+    lg: Number(buttonTokens.button.lg.icon),
 };
 export const PRESET_HOVER_BACKGROUNDS = {
-    primary: buttonTokens.brand.strong.bg.hover,
-    secondary: buttonTokens.brand.subtle.bg.hover,
-    primary_outline: buttonTokens.brand.outline.bg.hover,
-    neutral_outline: buttonTokens.neutral.outline.bg.hover,
-    danger: buttonTokens.danger.strong.bg.hover,
-    danger_outline: buttonTokens.danger.outline.bg.hover,
+    primary: buttonTokens.button.brand.strong.bg.hover,
+    secondary: buttonTokens.button.brand.subtle.bg.hover,
+    primary_outline: buttonTokens.button.brand.outline.bg.hover,
+    neutral_outline: buttonTokens.button.neutral.outline.bg.hover,
+    danger: buttonTokens.button.danger.strong.bg.hover,
+    danger_outline: buttonTokens.button.danger.outline.bg.hover,
 };
 export const PRESET_CONTENT_COLORS = {
-    primary: buttonTokens.brand.strong.content,
-    secondary: buttonTokens.brand.subtle.content,
-    primary_outline: buttonTokens.brand.outline.content,
-    neutral_outline: buttonTokens.neutral.outline.content,
-    danger: buttonTokens.danger.strong.content,
-    danger_outline: buttonTokens.danger.outline.content,
+    primary: buttonTokens.button.brand.strong.content,
+    secondary: buttonTokens.button.brand.subtle.content,
+    primary_outline: buttonTokens.button.brand.outline.content,
+    neutral_outline: buttonTokens.button.neutral.outline.content,
+    danger: buttonTokens.button.danger.strong.content,
+    danger_outline: buttonTokens.button.danger.outline.content,
 };
 export const PRESET_BORDER_COLORS = {
     primary: 'transparent',
     secondary: 'transparent',
-    primary_outline: buttonTokens.brand.outline.border,
-    neutral_outline: buttonTokens.neutral.outline.border,
+    primary_outline: buttonTokens.button.brand.outline.border,
+    neutral_outline: buttonTokens.button.neutral.outline.border,
     danger: 'transparent',
-    danger_outline: buttonTokens.danger.outline.border,
+    danger_outline: buttonTokens.button.danger.outline.border,
 };
-export const DISABLED_TEXT = buttonTokens.text.disabled;
-export const DISABLED_ICON = buttonTokens.icon.disabled;
+export const DISABLED_TEXT = buttonTokens.button.text.disabled;
+export const DISABLED_ICON = buttonTokens.button.icon.disabled;
 const SIZE_SUFFIX_PATTERN = /_(xs|sm|md|lg)$/;
 export const isButtonV2Name = (value) => value in BUTTON_CONFIG;
 export const getPresetName = (value) => value.replace(SIZE_SUFFIX_PATTERN, '');

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

@@ -27,7 +27,7 @@ sd-button-v2 {
   min-width: var(--sd-button-v2-min-width, auto);
   padding: 0 var(--sd-button-v2-padding-x);
   border: var(--sd-button-border-width-default, 1px) solid var(--sd-button-v2-border);
-  border-radius: var(--sd-button-radius-default, 4px);
+  border-radius: var(--sd-button-radius-sm, 4px);
   background: var(--sd-button-v2-bg);
   color: var(--sd-button-v2-current-content);
   cursor: pointer;
@@ -57,7 +57,7 @@ sd-button-v2 {
   --sd-button-v2-font-size: var(--sd-button-xs-typography-font-size, 12px);
   --sd-button-v2-font-weight: var(--sd-button-xs-typography-font-weight, 500);
   --sd-button-v2-text-decoration: var(--sd-button-xs-typography-text-decoration, none);
-  --sd-button-v2-label-min-width: var(--sd-button-label-xs-min-width, auto);
+  --sd-button-v2-label-min-width: var(--sd-button-label-xs-min-width, 36px);
   --sd-button-v2-icon-only-size: var(--sd-button-icon-only-xs-width, var(--sd-button-v2-height));
 }
 .sd-button-v2--sm {
@@ -68,7 +68,7 @@ sd-button-v2 {
   --sd-button-v2-font-size: var(--sd-button-sm-typography-font-size, 12px);
   --sd-button-v2-font-weight: var(--sd-button-sm-typography-font-weight, 500);
   --sd-button-v2-text-decoration: var(--sd-button-sm-typography-text-decoration, none);
-  --sd-button-v2-label-min-width: var(--sd-button-label-sm-min-width, auto);
+  --sd-button-v2-label-min-width: var(--sd-button-label-sm-min-width, 70px);
   --sd-button-v2-icon-only-size: var(--sd-button-icon-only-sm-width, var(--sd-button-v2-height));
 }
 .sd-button-v2--md {
@@ -79,8 +79,9 @@ sd-button-v2 {
   --sd-button-v2-font-size: var(--sd-button-md-typography-font-size, 16px);
   --sd-button-v2-font-weight: var(--sd-button-md-typography-font-weight, 500);
   --sd-button-v2-text-decoration: var(--sd-button-md-typography-text-decoration, none);
-  --sd-button-v2-label-min-width: var(--sd-button-label-md-min-width, auto);
+  --sd-button-v2-label-min-width: var(--sd-button-label-md-min-width, 100px);
   --sd-button-v2-icon-only-size: var(--sd-button-icon-only-md-width, var(--sd-button-v2-height));
+  border-radius: var(--sd-button-radius-md, 6px);
 }
 .sd-button-v2--lg {
   --sd-button-v2-height: var(--sd-button-lg-height, 62px);
@@ -90,8 +91,9 @@ sd-button-v2 {
   --sd-button-v2-font-size: var(--sd-button-lg-typography-font-size, 18px);
   --sd-button-v2-font-weight: var(--sd-button-lg-typography-font-weight, 500);
   --sd-button-v2-text-decoration: var(--sd-button-lg-typography-text-decoration, none);
-  --sd-button-v2-label-min-width: var(--sd-button-label-lg-min-width, auto);
+  --sd-button-v2-label-min-width: var(--sd-button-label-lg-min-width, 120px);
   --sd-button-v2-icon-only-size: var(--sd-button-icon-only-lg-width, var(--sd-button-v2-height));
+  border-radius: var(--sd-button-radius-md, 6px);
 }
 .sd-button-v2--has-label {
   --sd-button-v2-min-width: var(--sd-button-v2-label-min-width, auto);

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

@@ -61,13 +61,13 @@ export class SdButtonV2 {
         const hasLabel = Boolean(this.label);
         const iconOnly = !this.label && Boolean(this.icon);
         const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
-        return (h("button", { key: '3ab72bde2ff033ba8bd23b1f419b3a2f879b9476', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
+        return (h("button", { key: 'b61c65948aacc951a46fb4d6cce8e4df715c5ae5', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-button-v2-bg': config.variant === 'primary' ? config.color : '#FFFFFF',
                 '--sd-button-v2-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-button-v2-border': PRESET_BORDER_COLORS[preset],
                 '--sd-button-v2-content': PRESET_CONTENT_COLORS[preset],
                 '--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("span", { key: 'acc839b6b89aef8065b7b5942167a0509496b689', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: '0e8f758d3e0a40f6e021efd90e5cf86d52f18a27', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })), this.label && h("span", { key: '24ee2337a5b3e2a6df5053978e29428b3503849f', class: "sd-button-v2__label" }, this.label))));
+            }, onClick: this.handleClick }, h("span", { key: 'bdfe42f07909dee43ddd596eccc73eb0de7b59fd', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: 'ec6b33b19f26f9732d969dd351f578706de37016', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })), this.label && h("span", { key: '1eebf5dacec105472215f2a1e33052c13366b40b', class: "sd-button-v2__label" }, this.label))));
     }
     static get is() { return "sd-button-v2"; }
     static get originalStyleUrls() {

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

@@ -3,7 +3,7 @@ export class SdCard {
     bordered = false;
     sdClass = '';
     render() {
-        return (h(Fragment, { key: 'baaae6d4953d94fbc20cbd3762af5c63dd16ec97' }, h("div", { key: '3505306be16d71a4eec5b479326d277294c64c66', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'f63c4a21b91cc398acb255a85d039f0d82c55857' }))));
+        return (h(Fragment, { key: '1097b68c59997cb041057ff7b77330275c52f7c7' }, h("div", { key: 'a6eb3be04f9bcad7f712c0f28ff9750ebfd5697a', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'c2b5ae153d520f4078bb6e7ab4cd41f83eb32ad3' }))));
     }
     static get is() { return "sd-card"; }
     static get originalStyleUrls() {

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

@@ -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: '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 => {
+        return (h("div", { key: '5a81aa943cbaf554e665b5030c1c46e6aedc0a38', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'd4d48c22ce5cd3895adb6e48688907f7c9d4202a', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: 'da157d4699b67cb75d25ee8d5da6694e13b874e4', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '4362cd4581cec25b4fd9b88206cc21f5ffa68ca9', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: '2169cdc63bc9affb0149e50f0fb94d08ec371bf5', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '3f51315daed6bf8bce81137d8621c26b1960dac3', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: '5826cd4b28b8b4c38f28bea030a43f32a2a4203e', 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: '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() }))));
+            } })) : (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: 'a28bacaafc973b8b5d8be998c49d4b203f7ecc19', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: '791db1eb69ba9ef56fa0298d7539cde55b08e2ac', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: '08407e3d972c6828f58020be94aa81a93f5e0e8c', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button-v2", { key: '6ef6528e54d2fe81ad96a546512a8a49b17f67d5', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
     }
     static get is() { return "sd-confirm-modal"; }
     static get originalStyleUrls() {