@sellmate/design-system 1.0.71 → 1.0.72

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

@@ -288,7 +288,7 @@ export class SdSelectV2Listbox {
             '--listbox-max-height': this.maxHeight,
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (h("div", { key: '17ebae1a1589245944d7db5a05f2c011ad13e391', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (h("sd-select-v2-list-item-search", { key: '181ddd3a11ebe3b81353d66111459c7929c5af0b', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '91114e82f60a6bdeb74142d6d7abea2871e6678e', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (h("div", { key: 'd4d80ebd565436cd929961a2f9ce50adf92c124b', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (h("sd-select-v2-list-item-search", { key: 'bd549975fe6187aa7e77e718c8d2ba4a6d6e33de', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '4ac6a1512781942fef3e42d6ca32762962df1836', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
             } }, this.isEmpty ? (h("div", { class: "sd-select-v2-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (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) })))))));
     }

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

@@ -42,13 +42,13 @@ export class SdSelectV2Trigger {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (h("div", { key: 'e5c4db3cfbaa29c0af7efd0376a972dee0e9db56', ref: el => {
+        return (h("div", { key: '7c4f60c972c17b5954cbf0d0cc7ee38c8e6c16a3', ref: el => {
                 this.triggerEl = el;
             }, tabindex: this.disabled ? -1 : 0, class: {
                 'sd-select-v2-trigger': true,
                 'sd-select-v2-trigger--open': this.isOpen,
                 'sd-select-v2-trigger--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '76a946a587f6245f8a21ecbf25c5a21895f35970', class: "sd-select-v2-trigger__content" }, h("span", { key: '3224e13cc49371e7bcd8095a8b08bd62d4f8b295', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), h("sd-icon", { key: 'ea81dc671b63b14040292ed2ff4084a9c9fc6fca', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, style: cssVars, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: 'de5f5a44626fce29c5a83cf0a14dd03352d40b57', class: "sd-select-v2-trigger__content" }, h("span", { key: 'a36a013e9ef359160c2b9d24b42ee6f228aca302', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), h("sd-icon", { key: '4bfcfce96fbe2008517ee26d7802d4492292faa5', 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/collection/components/sd-select-v2/sd-select-v2.js

@@ -237,15 +237,15 @@ export class SdSelectV2 {
                 this.closeDropdown();
             },
         };
-        return (h("sd-field", { key: '8c9b5a1414bd0bb068acd53e07a61767b6904c62', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (h("sd-field", { key: '183d00eba196e665b851fd45d0bbdcfe9ed3a7a5', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, h("div", { key: '47677529c530f06cb3a35a30dd4cc9f9a34d8759', class: "sd-select-v2", ref: el => {
+            } }, h("div", { key: '304b37a0c04af29f77d7cd26c2b95abcdba4e373', class: "sd-select-v2", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-v2-trigger", { key: '3aae441a7ec1a6d8faa0f04f41881f515b641853', ref: el => {
+            } }, h("sd-select-v2-trigger", { key: '7e146d8b5b08da4703c5e5ba65c6930ca0e8addd', ref: el => {
                 this.triggerComponentRef = el;
-            }, displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '7c92db46231f4c46ce94668ac220dc7ec14ad118', ...portalProps }, h("sd-select-v2-listbox", { key: 'af3fc60a9554573e50145edeb0ea8f412116fd76', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            }, displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '97039b0f6efe8000494b388152b8e8ae99a77b23', ...portalProps }, h("sd-select-v2-listbox", { key: 'aafdb2097795bebe1fdf45183cc70ee588a776e6', 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 is() { return "sd-select-v2"; }
     static get originalStyleUrls() {

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

@@ -40,7 +40,7 @@ export class SdSwitch {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (h("label", { key: '730eacd9dbc035c76ff99396caf13b37ecc19c86', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: '2cb2e4ba617d6f9f2d86a56ac6cc134a43cd1594', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: 'b67a6243d2af4b89e433e44047da3336e87da9f9', class: "sd-switch__track" }, h("div", { key: 'a99cf1e298cd3ed474cb7f94a48332475fe68641', class: "sd-switch__knob" })), this.label && h("span", { key: '084960a8dce47c47b17f807aa46acea3a08aa53b', class: "sd-switch__label" }, this.label)));
+        return (h("label", { key: 'ac6a35d06ddd04bc94369014ff586766dd745bbb', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: '9ebc810e93c9dfa3bf7407f279dadbada579196e', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '7add76be99645d6434e95305f6318fac7da0de57', class: "sd-switch__track" }, h("div", { key: 'ed90778aa4dcd6f0853029579c36cfdb8640afcf', class: "sd-switch__knob" })), this.label && h("span", { key: '70e3ddf819e77da4c693a4853ddb7f392381964e', class: "sd-switch__label" }, this.label)));
     }
     static get is() { return "sd-switch"; }
     static get originalStyleUrls() {

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

@@ -495,24 +495,24 @@ export class SdTable {
     }
     render() {
         const resolvedTableId = this.getResolvedTableId();
-        return (h(Host, { key: 'd2a43d075579bf4ffc53949fb074afaf9987113d' }, h("div", { key: '3e6b69b3ab38281c1763ab779d66b0916b2cb295', class: "sd-table__container", style: {
+        return (h(Host, { key: '0b90643721a90b7bb59a6c31f6edeb313849b973' }, h("div", { key: 'e55fe4f476dbea4888a168861e7e6d6951d7d489', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
                 '--table-container-height': `calc(${this.height || '100%'} - ${this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0}px)`,
-            } }, h("div", { key: '60ac7f5d53cdfbb0225dd3ed57be4788e6b7ff2b', class: {
+            } }, h("div", { key: 'de18a900037a7b2f619dd22981c30ed76f5a8111', class: {
                 'sd-table__clip': true,
                 'sd-table__clip--has-pagination': !!(this.pagination &&
                     this.pagination.rowsPerPage > 0 &&
                     this.rowCount > 0 &&
                     !this.useVirtualScroll),
-            } }, h("div", { key: 'ea4144995650e283bf62de067fe792e1b7d90eb1', class: {
+            } }, h("div", { key: '028e0982d415033adaf420ee6b953241c8f3dbec', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--loading': this.isLoading,
                 'sd-table__wrapper--no-data': this.rowCount === 0 && !this.isLoading,
-            } }, this.isLoading && (h("div", { key: '36fd919bbf313d4d5a62d657223ce7e68bd7678d', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '5854fbf9090072e1caf5d4a497fe35403c4c8c21', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (h("div", { key: '210bc0045bacd05d4134f96716f74c5893c494dd', class: "sd-table__no-data" }, h("slot", { key: 'a2aabac27057d00a6352230d23a9c776a99818b5', name: "no-data" }, h("span", { key: 'd030f9abc7bc3afd8cb70433513a8875ae3eecb2' }, this.resolvedNoDataLabel)))), h("table", { key: '731208435f8e018b74f2a0670e4c4f68f4c7fd58', class: this.tableClasses }, h("slot", { key: 'd12bbe4ed17e9c0d781c50c6b4161c7bddec3480', name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }), h("slot", { key: '555d63d8f0ad56d49bcc09451b893e05cc7110cd', name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange })))), this.pagination &&
+            } }, this.isLoading && (h("div", { key: '8c9110c9c2c26cddbbed8e1f2782ecfaafd3679c', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '51b61f91b0ecebf63fe3e65b94012963f0375e5c', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (h("div", { key: '0a7a45049014869b8164b081a251218d3c814e87', class: "sd-table__no-data" }, h("slot", { key: 'd4b6219e5dcaaa22be3360f7f0f05a8b32533890', name: "no-data" }, h("span", { key: 'c76848aad8a1d3967f3cd239090e97266e46ab3e' }, this.resolvedNoDataLabel)))), h("table", { key: '2b560d112402549c7043b337d944b0de88c3ba0e', class: this.tableClasses }, h("slot", { key: '1c4583148df6a585f389c1bed0426fa4a3cb4899', name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }), h("slot", { key: 'a5d983106de61c829f9cbeb541d1908fee48468c', name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange })))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (h("div", { key: '83b1c554f574013c8a93707f99d4224c581d485c', class: "sd-table__pagination" }, h("sd-pagination", { key: '425c036f79001e4d7f012dc528d2c2ecec25ed9b', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select-v2", { key: '1c7c6ddacdd24cfa0cef627cd8ba06fe2466d415', value: this.useInternalPagination
+            !this.useVirtualScroll && (h("div", { key: '004355d84e2cfc2fd38a9d4811f14fd66dc5c21b', class: "sd-table__pagination" }, h("sd-pagination", { key: '463586c7e57782a7989962f73cb3d4e8c04f5bce', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select-v2", { key: '1f26de447da63ef0c4a24ffb49666a0687db9991', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))

package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js

@@ -41,7 +41,7 @@ export class SdTbody {
     }
     render() {
         const hasRows = this.rows.length > 0;
-        return (h(Host, { key: '82a437ddf0cb3c34877b9dbcb47b5406c20a0c0e', slot: `${this.tableId}-body` }, h("tbody", { key: '0f0257720491c781eda0479fb0c08d7dffc4f734', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
+        return (h(Host, { key: 'e4c64dbf97185bbc6eaec4b883c65dc8ebd34ece', slot: `${this.tableId}-body` }, h("tbody", { key: 'b2fb886684a5a6055d3af659bba75dd9bc801b73', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
             this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
             h("slot", null),
             this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),

package/dist/collection/components/sd-table/sd-td/sd-td.js

@@ -34,7 +34,7 @@ export class SdTd {
         }
     }
     render() {
-        return (h(Host, { key: 'c6ddb546268b573694b827509ebdfe74fff8a15a', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '0b59fb8a0cfa1ef628f50496af96aa2f39fdc89a' })));
+        return (h(Host, { key: '672c967273dac405ed4a47fa5939463265075681', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: 'c15e572fdf4a8c68fff8b69b586dfbf9f01dce1b' })));
     }
     static get is() { return "sd-td"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-table/sd-thead/sd-thead.js

@@ -128,16 +128,16 @@ export class SdThead {
         const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
         const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
         const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
-        return (h(Host, { key: '97badde9634e2e7363eace5a402fc49a587459c3', slot: `${this.tableId}-head` }, h("thead", { key: 'd1ce731f6082679d8d61f4b74ac122f28f344909', class: {
+        return (h(Host, { key: '2358499ef65d88005d03b1246604c0fd8eefdde1', slot: `${this.tableId}-head` }, h("thead", { key: '49bb43a19aeb83f3a60367b26dbb6535ebcec743', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, h("tr", { key: 'd0f8b1e8b8a7174cc9b39fabf782eddf2e2accaa', class: "tr" }, this._selectable && (h("th", { key: 'c422f5bd9f9a045785d2d91dd9e2dee6e8f91185', class: {
+            } }, h("tr", { key: 'cd6388d79e9a4a5d9edbbda05601abbbefcb1ff4', class: "tr" }, this._selectable && (h("th", { key: 'fa09e82368d45e9fb1d32838ef44e609c698609d', class: {
                 'th': true,
                 'th--selected': true,
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '32cea740457b21d4d6fd53a8f1c10b505a24a481', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '5ab4861aecfac9495101363d5bd809d077c7dbc3', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,

package/dist/collection/components/sd-table/sd-tr/sd-tr.js

@@ -123,13 +123,13 @@ export class SdTr {
         const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
         const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
         const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
-        return (h(Host, { key: '3bc910f3afa801d7824eee2e73456ef152c7dc93', style: { display: this.isVisible ? '' : 'none' } }, h("tr", { key: '93b1f4113ae63aa1c0cf79addaa9e8d15c9e8287', class: "tr" }, this._selectable && (h("td", { key: '0caba47c216126f4b7407dfe26afb9f0c75f6450', class: {
+        return (h(Host, { key: 'd6259e5c87cce0fa70f1d849e11416ad69b0cac1', style: { display: this.isVisible ? '' : 'none' } }, h("tr", { key: '90e36c39bede0e07fc1c4d90183a73ebc99b6ed8', class: "tr" }, this._selectable && (h("td", { key: '601f1747063d8e73803304abc2cd767f420f359c', class: {
                 'td': true,
                 'td--selected': true,
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '2e41b3902f489877b624266e588221698aaa8f12', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => (h("td", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '97068a623d3b7876c7e6392e3f5ed81cfc60d592', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => (h("td", { key: col.name, class: {
                 'td': true,
                 [`td--${col.align || 'left'}`]: true,
                 'sticky-left': true,

package/dist/collection/components/sd-tabs/sd-tabs.config.js

@@ -0,0 +1,49 @@
+import tabTokens from "../../tokens/generated/component.tab.json";
+export const TAB_MAIN_LAYOUT = {
+    md: {
+        height: Number(tabTokens.tab.main.md.height),
+        paddingX: Number(tabTokens.tab.main.md.paddingX),
+    },
+    lg: {
+        height: Number(tabTokens.tab.main.lg.height),
+        paddingX: Number(tabTokens.tab.main.lg.paddingX),
+    },
+    gap: Number(tabTokens.tab.main.gap),
+    containerGap: Number(tabTokens.tab.main.container.gap),
+    radius: Number(tabTokens.tab.main.radius),
+    borderWidth: Number(tabTokens.tab.main.border.width),
+};
+export const TAB_MAIN_COLORS = {
+    selected: {
+        bg: tabTokens.tab.main.selected.bg,
+        text: tabTokens.tab.main.selected.text,
+        border: tabTokens.tab.main.selected.border,
+    },
+    default: {
+        bg: tabTokens.tab.main.default.bg,
+        text: tabTokens.tab.main.default.text,
+        border: tabTokens.tab.main.default.border,
+    },
+};
+export const TAB_MAIN_TYPOGRAPHY = {
+    selected: tabTokens.tab.main.selected.typography,
+    default: tabTokens.tab.main.default.typography,
+};
+export const TAB_SUB_LAYOUT = {
+    gap: Number(tabTokens.tab.sub.gap),
+    contentGap: Number(tabTokens.tab.sub.content.gap),
+    borderWidth: Number(tabTokens.tab.sub.border.width),
+};
+export const TAB_SUB_COLORS = {
+    selected: {
+        text: tabTokens.tab.sub.selected.text,
+        line: tabTokens.tab.sub.selected.line,
+    },
+    default: {
+        text: tabTokens.tab.sub.default.text,
+    },
+};
+export const TAB_SUB_TYPOGRAPHY = {
+    selected: tabTokens.tab.sub.selected.typography,
+    default: tabTokens.tab.sub.default.typography,
+};

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

@@ -5,21 +5,28 @@ sd-tabs {
 sd-tabs .sd-tabs {
   display: flex;
   flex-direction: row;
-  gap: 4px;
-  border-bottom: 1px solid #0075FF;
+  gap: var(--sd-tabs-main-container-gap);
+  border-bottom: var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-selected-border);
+  font-family: var(--sd-tabs-main-font-family);
 }
 sd-tabs .sd-tabs__tab {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  gap: var(--sd-tabs-main-gap);
   cursor: pointer;
-  border: 1px solid #CCCCCC;
+  box-sizing: border-box;
+  height: var(--sd-tabs-main-height);
+  padding: 0 var(--sd-tabs-main-padding-x);
+  border: var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-default-border);
   border-bottom: none;
-  border-radius: 4px 4px 0 0;
-  background-color: #F6F6F6;
-  color: #888888;
-  font-weight: 400;
+  border-top-left-radius: var(--sd-tabs-main-radius);
+  border-top-right-radius: var(--sd-tabs-main-radius);
+  background-color: var(--sd-tabs-main-default-bg);
+  color: var(--sd-tabs-main-default-text);
+  font-size: var(--sd-tabs-main-font-size);
+  line-height: var(--sd-tabs-main-line-height);
+  font-weight: var(--sd-tabs-main-font-weight-default);
   transition: all 0.2s ease;
   position: relative;
   user-select: none;
@@ -29,27 +36,28 @@ sd-tabs .sd-tabs__tab::before {
   position: absolute;
   inset: 0;
   opacity: 0;
-  transition: all 0.3s;
+  transition: all 0.2s;
+  pointer-events: none;
 }
 sd-tabs .sd-tabs__tab--selected {
-  border-color: #0075FF;
-  color: #0075FF;
-  background-color: white;
+  border-color: var(--sd-tabs-main-selected-border);
+  color: var(--sd-tabs-main-selected-text);
+  background-color: var(--sd-tabs-main-selected-bg);
 }
 sd-tabs .sd-tabs__tab--selected .sd-tabs__label::before {
-  font-weight: 700;
+  font-weight: var(--sd-tabs-main-font-weight-selected);
 }
 sd-tabs .sd-tabs__tab--selected:hover::before {
-  background-color: #0075FF;
+  background-color: var(--sd-tabs-main-selected-border);
   opacity: 0.15;
 }
 sd-tabs .sd-tabs__tab--unselected:hover::before {
-  background-color: #888888;
+  background-color: var(--sd-tabs-main-default-text);
   opacity: 0.15;
 }
 sd-tabs .sd-tabs__label {
   user-select: none;
-  font-weight: 700;
+  font-weight: var(--sd-tabs-main-font-weight-selected);
   visibility: hidden;
   position: relative;
   white-space: nowrap;
@@ -59,54 +67,52 @@ sd-tabs .sd-tabs__label::before {
   visibility: visible;
   position: absolute;
   inset: 0;
-  font-weight: 400;
+  font-weight: var(--sd-tabs-main-font-weight-default);
   transition: font-weight 0.2s ease;
 }
-sd-tabs .sd-tabs--md .sd-tabs__tab {
-  padding: 12px 32px;
-  font-size: 12px;
-  line-height: 20px;
-}
-sd-tabs .sd-tabs--sm .sd-tabs__tab {
-  padding: 8px 20px;
-  font-size: 12px;
-  line-height: 16px;
-}
 sd-tabs .sd-tabs--sub {
-  gap: 32px;
+  gap: var(--sd-tabs-sub-gap);
   border-bottom: none;
+  font-family: var(--sd-tabs-sub-font-family);
 }
 sd-tabs .sd-tabs--sub .sd-tabs__tab {
+  height: auto;
+  padding: 0 0 var(--sd-tabs-sub-content-gap) 0;
   border: none;
   border-radius: 0;
   background-color: transparent;
-  color: #222222;
-  font-weight: 400;
-  padding: 0 0 2px 0;
-  position: relative;
+  color: var(--sd-tabs-sub-default-text);
+  font-size: var(--sd-tabs-sub-font-size);
+  line-height: var(--sd-tabs-sub-line-height);
+  font-weight: var(--sd-tabs-sub-font-weight-default);
 }
 sd-tabs .sd-tabs--sub .sd-tabs__tab::before {
   content: "";
   position: absolute;
-  top: 100%;
   left: 0;
   right: 0;
-  height: 1px;
+  bottom: 0;
+  height: var(--sd-tabs-sub-border-width);
   width: 100%;
-  background-color: #0075FF;
+  background-color: var(--sd-tabs-sub-selected-line);
   opacity: 0;
   transition: opacity 0.2s ease;
-}
-sd-tabs .sd-tabs--sub .sd-tabs__tab::after {
-  font-weight: 400;
+  inset: auto 0 0 0;
+  pointer-events: none;
 }
 sd-tabs .sd-tabs--sub .sd-tabs__tab--selected {
-  color: #0075FF;
+  color: var(--sd-tabs-sub-selected-text);
   background-color: transparent;
 }
 sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::before {
   opacity: 1;
 }
-sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::after {
-  font-weight: 700;
+sd-tabs .sd-tabs--sub .sd-tabs__tab--selected .sd-tabs__label::before {
+  font-weight: var(--sd-tabs-sub-font-weight-selected);
+}
+sd-tabs .sd-tabs--sub .sd-tabs__label {
+  font-weight: var(--sd-tabs-sub-font-weight-selected);
+}
+sd-tabs .sd-tabs--sub .sd-tabs__label::before {
+  font-weight: var(--sd-tabs-sub-font-weight-default);
 }

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

@@ -1,21 +1,17 @@
 import { h } from "@stencil/core";
+import { TAB_MAIN_LAYOUT, TAB_MAIN_COLORS, TAB_MAIN_TYPOGRAPHY, TAB_SUB_LAYOUT, TAB_SUB_COLORS, TAB_SUB_TYPOGRAPHY, } from "./sd-tabs.config";
 export class SdTabs {
     value;
     tabs = [];
     size = 'md';
     isSub = false;
     update;
-    componentWillLoad() {
-        if (this.value !== undefined && this.value !== null) {
-            this.value = this.value;
-        }
-    }
     valueChanged(newValue) {
         this.value = newValue;
     }
-    handleTabClick = (tabValue) => {
-        this.value = tabValue;
-        this.update.emit(tabValue);
+    handleTabClick = (tab) => {
+        this.value = tab.value;
+        this.update.emit(tab.value);
     };
     isTabSelected(tab) {
         return this.value === tab.value;
@@ -28,20 +24,52 @@ export class SdTabs {
         return classes.join(' ');
     }
     getContainerClasses() {
-        const classes = ['sd-tabs', `sd-tabs--${this.size}`];
-        if (this.isSub) {
+        const classes = ['sd-tabs', `sd-tabs--${this.size ?? 'md'}`];
+        if (this.isSub)
             classes.push('sd-tabs--sub');
-        }
         return classes.join(' ');
     }
     getBadgeName(tab) {
         const color = this.isTabSelected(tab) ? 'blue' : 'grey';
         return `square_xs_${color}`;
     }
+    buildCssVars() {
+        const mainSize = TAB_MAIN_LAYOUT[this.size ?? 'md'];
+        return {
+            '--sd-tabs-main-height': `${mainSize.height}px`,
+            '--sd-tabs-main-padding-x': `${mainSize.paddingX}px`,
+            '--sd-tabs-main-gap': `${TAB_MAIN_LAYOUT.gap}px`,
+            '--sd-tabs-main-container-gap': `${TAB_MAIN_LAYOUT.containerGap}px`,
+            '--sd-tabs-main-radius': `${TAB_MAIN_LAYOUT.radius}px`,
+            '--sd-tabs-main-border-width': `${TAB_MAIN_LAYOUT.borderWidth}px`,
+            '--sd-tabs-main-selected-bg': TAB_MAIN_COLORS.selected.bg,
+            '--sd-tabs-main-selected-text': TAB_MAIN_COLORS.selected.text,
+            '--sd-tabs-main-selected-border': TAB_MAIN_COLORS.selected.border,
+            '--sd-tabs-main-default-bg': TAB_MAIN_COLORS.default.bg,
+            '--sd-tabs-main-default-text': TAB_MAIN_COLORS.default.text,
+            '--sd-tabs-main-default-border': TAB_MAIN_COLORS.default.border,
+            '--sd-tabs-main-font-family': TAB_MAIN_TYPOGRAPHY.default.fontFamily,
+            '--sd-tabs-main-font-size': `${TAB_MAIN_TYPOGRAPHY.default.fontSize}px`,
+            '--sd-tabs-main-line-height': `${TAB_MAIN_TYPOGRAPHY.default.lineHeight}px`,
+            '--sd-tabs-main-font-weight-default': TAB_MAIN_TYPOGRAPHY.default.fontWeight,
+            '--sd-tabs-main-font-weight-selected': TAB_MAIN_TYPOGRAPHY.selected.fontWeight,
+            '--sd-tabs-sub-gap': `${TAB_SUB_LAYOUT.gap}px`,
+            '--sd-tabs-sub-content-gap': `${TAB_SUB_LAYOUT.contentGap}px`,
+            '--sd-tabs-sub-border-width': `${TAB_SUB_LAYOUT.borderWidth}px`,
+            '--sd-tabs-sub-selected-text': TAB_SUB_COLORS.selected.text,
+            '--sd-tabs-sub-selected-line': TAB_SUB_COLORS.selected.line,
+            '--sd-tabs-sub-default-text': TAB_SUB_COLORS.default.text,
+            '--sd-tabs-sub-font-family': TAB_SUB_TYPOGRAPHY.default.fontFamily,
+            '--sd-tabs-sub-font-size': `${TAB_SUB_TYPOGRAPHY.default.fontSize}px`,
+            '--sd-tabs-sub-line-height': `${TAB_SUB_TYPOGRAPHY.default.lineHeight}px`,
+            '--sd-tabs-sub-font-weight-default': TAB_SUB_TYPOGRAPHY.default.fontWeight,
+            '--sd-tabs-sub-font-weight-selected': TAB_SUB_TYPOGRAPHY.selected.fontWeight,
+        };
+    }
     render() {
-        return (h("div", { key: '85326c946694a115b466f07395872429c467d72f', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: '390edfad274caa06df38af9d04580015a1744a44', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
             const badgeName = this.getBadgeName(tab);
-            return (h("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && h("sd-tag", { name: badgeName, label: tab.badge.toString() })));
+            return (h("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab) }, h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge !== undefined && tab.badge !== null && tab.badge !== '' && (h("sd-tag", { name: badgeName, label: tab.badge.toString() }))));
         })));
     }
     static get is() { return "sd-tabs"; }
@@ -84,9 +112,10 @@ export class SdTabs {
                     "resolved": "TabOption[]",
                     "references": {
                         "TabOption": {
-                            "location": "local",
-                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-tabs/sd-tabs.tsx",
-                            "id": "src/components/sd-tabs/sd-tabs.tsx::TabOption"
+                            "location": "import",
+                            "path": "./sd-tabs.config",
+                            "id": "src/components/sd-tabs/sd-tabs.config.ts::TabOption",
+                            "referenceLocation": "TabOption"
                         }
                     }
                 },
@@ -104,9 +133,16 @@ export class SdTabs {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'sm' | 'md'",
-                    "resolved": "\"md\" | \"sm\"",
-                    "references": {}
+                    "original": "TabSize",
+                    "resolved": "\"lg\" | \"md\"",
+                    "references": {
+                        "TabSize": {
+                            "location": "import",
+                            "path": "./sd-tabs.config",
+                            "id": "src/components/sd-tabs/sd-tabs.config.ts::TabSize",
+                            "referenceLocation": "TabSize"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,

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

@@ -19,7 +19,7 @@ export class SdTag {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (h("span", { key: '3e3bf735f8d832e75f1061eac69ccd8972b9f40f', class: "sd-tag", style: {
+        return (h("span", { key: 'da19900d267d2b2f000e1790133966a7976bcded', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -29,7 +29,7 @@ export class SdTag {
                 '--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, h("span", { key: 'a06237d1d29bb64b4b830294f5385a9b9b909624', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: 'e426021988395058367872ac23658586b2895764', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
     static get is() { return "sd-tag"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-text-link/sd-text-link.js

@@ -26,16 +26,16 @@ export class SdTextLink {
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (h("span", { key: 'c485091d0a9d7f8aa946ac54d96baab50bcaa3c7', class: {
+        return (h("span", { key: '1128254cddacf5869f320ce2b788b06646f27d7f', class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.icon && (h("sd-icon", { key: '98a2df9a2ba9b5d77eb73c0989cdf38383cfcd15', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: '3c6867611e0d970855897b06f7e9368a8588ff76', class: labelClassName }, this.label), this.useArrow && (h("span", { key: '460bebf92782560d64e41b47ea9ef42b66cc08c0', class: "sd-text-link__arrow", style: {
+            }, style: cssVars, onClick: this.handleClick }, this.icon && (h("sd-icon", { key: '52c069d637a2ccf9cd4e7bd1ab3a62ea981d2e1e', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: '99a09359c75c2eb6c2e2ef6b9e3b87d92c3f7810', class: labelClassName }, this.label), this.useArrow && (h("span", { key: 'c7e77454d9d002c0e043dc71a418c65ecd60cff5', 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',
-            } }, h("sd-icon", { key: 'fee7c74359e683829ad3fa802191b651aa9e94da', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, h("sd-icon", { key: '677c88823b02084449cd2dec83cc6bd27dfb8006', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
     static get is() { return "sd-text-link"; }
     static get originalStyleUrls() {

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

@@ -105,7 +105,7 @@ export class SdTextarea {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (h("sd-field", { key: '9f456eb1b18d0d83fb40f0b6b66125d587bcb4c6', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'f201962ed64908c97d24923b62e97c33b356170a', class: "sd-textarea__content" }, h("textarea", { key: '826e4b3c4743dbf16387b68317bd09ca7c75746d', 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 (h("sd-field", { key: '1f0a9119fae56ef1fc7c558635e042239644ec22', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '8ef4635e280dd8dc2c0b7c0e7c3feef5b1c66c40', class: "sd-textarea__content" }, h("textarea", { key: 'd9e2a569cbe36cb8f4c812eec19f375e41f70108', 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 is() { return "sd-textarea"; }
     static get originalStyleUrls() {

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

@@ -11,10 +11,10 @@ export class SdToast {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (h("div", { key: 'a041d5561d09ef56f4afd722e141b0a2e3a9453f', style: {
+        return (h("div", { key: 'd4b73e2503514143f5174bc8859baf0e59c2f8da', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, h("div", { key: 'bf2a397484ec5938c0442ee0ee98f0ce00ad1ec0', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '4ea8468b31909e3aea1a293c393621e1815dea5c', class: "sd-toast__icon" }, h("sd-icon", { key: '407a0be71e36a6dca30f5cfb300f2c9ebf6b32c2', name: this.icon, size: iconSize, color: typeConfig.content }))), h("div", { key: '756ca54899ec4d6c3543f8fb1f681d09181674c9', class: "sd-toast__content" }, h("span", { key: 'f0e66dbd5e99bc3921a354ac51294a3c29fe9ea0', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '9f4a1a938b7559b03d7dd824c7f2fdbcb093e6fe', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (h("sd-ghost-button", { key: '03d64765901bc8a93f09642b09ae733fa9da0db4', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, h("div", { key: '7334daee691fb03a1005c2afac64033554489046', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '297ada835b0710bf43a936b02e53b0873b7f4af3', class: "sd-toast__icon" }, h("sd-icon", { key: 'b5bc4716df28231dc7af15db63595ae9044189b5', name: this.icon, size: iconSize, color: typeConfig.content }))), h("div", { key: 'd0239c8f8b495fbdaedad0f65a6d0a0edfaada60', class: "sd-toast__content" }, h("span", { key: 'dc70d403673bb8f99cfd91393054a86bf17e5ac2', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '1a76bcee482720693b501d3a13c54e720bbe44fc', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (h("sd-ghost-button", { key: 'a8dc3c15cabf5ca4e075e75c4fb2744dd5da4fa0', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
     static get is() { return "sd-toast"; }
     static get originalStyleUrls() {

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

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

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

@@ -45,7 +45,7 @@ export class SdToggle {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (h("label", { key: '1e0864450b0447ec08643290d1050e4d0ee0c4a4', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '7e44e8569de24839c41e8c28f579923e3a837366', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: 'fe56ffe876ccc859536ca74703e0870ad97e1668', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: 'f473fd71c03d0e4e3e8fb354753d769033f148f2', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
     static get is() { return "sd-toggle"; }
     static get originalStyleUrls() {

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

@@ -81,14 +81,14 @@ export class SdTooltip {
         const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
         const divTrigger = trigger === 'hover' ? hoverTrigger : this.label ? {} : { onClick: toggleTooltip };
         const buttonClickTrigger = trigger === 'click' && this.label ? { onSdClick: toggleTooltip } : {};
-        return (h(Fragment, { key: 'aade7a4be8e9955ca4dc437845ee8de9d212fd61' }, h("div", { key: '332c4872541bea334c1f0b6f06de8a1789dc10b8', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: '96f19d91f765020ae5663f216011e2000617c9d1', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, h("div", { key: '12c2f1fbf59dc1a790016da071805164b0426419', ref: el => (this.menuEl = el), class: {
+        return (h(Fragment, { key: 'e0211f8c80222e357d278c81582baf40ef47a8a6' }, h("div", { key: '9747aa6130dbf0d7e29bbe2d7222c22c8001c6a5', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: '7f3e8e2758ef78ca1765bd7e4ec8d6849698ff88', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, h("div", { key: '86a3a006bdcee86f16da7ebea04ff267a7f029b9', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, h("i", { key: 'f69c0cb66d5be975f60bfa7cdbd46e0283d4af2b', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '3fbc2c3baa903e80d525225ab1f1aa4b3ec6ad4b' })), h("div", { key: 'a2286ef4e9f5d6c1b1a26ea044ddf1051900c5a2', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, h("i", { key: '50268080023fc252774a7fb564bdbf6c007c115e', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '28b2948d9570157c6c40e7738498266ca8c8ec64' })), h("div", { key: 'e2057da013a2700e8614f1e8d8e5164aec8efb18', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
     static get is() { return "sd-tooltip"; }
     static get originalStyleUrls() {

package/dist/collection/components/table-test/table-test.js

@@ -71,7 +71,7 @@ export class DataTable {
         return el.innerHTML;
     }
     render() {
-        return (h("div", { key: '2aaa005ce2516e841fdace352e9d8cf2b98cbde4', class: "table-wrapper" }, h("table", { key: '3b13c885dc0cefd1c2b7de3c336d803099009063', class: { 'data-table': true, 'bordered': this.bordered, 'striped': this.striped } }, h("thead", { key: 'a866c3ce695250fc6b220044955c6fafa68f5647' }, h("tr", { key: '465974d2bd2f39114cabda226aba8645d79b4a68' }, this.columns.map(column => (h("th", { key: column.field, style: { width: column.width } }, this.renderHeaderContent(column)))))), h("tbody", { key: '4b0a96da5bf54404774fca7bb9136561ddc57170' }, this.rows.map((row, rowIndex) => (h("tr", { key: rowIndex }, this.columns.map(column => (h("td", { key: `${rowIndex}-${column.field}` }, this.renderCellContent(column, row, rowIndex))))))))), h("div", { key: '1deba9664748b1953a65b2d7badc4b2e813ab2eb', class: "templates-slot", hidden: true }, h("slot", { key: '782d4ef14b8e6068e1d96a55af5f0b16af33dc0f' }))));
+        return (h("div", { key: 'a34267f6b11cdd0dff53bfa3da62b7a47934c73b', class: "table-wrapper" }, h("table", { key: 'b23ac2cd9a785d8fc89c09a04a6aa29a63e6d2b4', class: { 'data-table': true, 'bordered': this.bordered, 'striped': this.striped } }, h("thead", { key: 'e08ff945e40f3ec6db10285840d4185d110a1dc0' }, h("tr", { key: 'ffe2e7253865f5a650611e2859f979d0204fca2a' }, this.columns.map(column => (h("th", { key: column.field, style: { width: column.width } }, this.renderHeaderContent(column)))))), h("tbody", { key: '2d47105abba4eecad71b549282650b7f2b056b4c' }, this.rows.map((row, rowIndex) => (h("tr", { key: rowIndex }, this.columns.map(column => (h("td", { key: `${rowIndex}-${column.field}` }, this.renderCellContent(column, row, rowIndex))))))))), h("div", { key: '99fe2715e69abf50f69a844e76a3ad422f5b870b', class: "templates-slot", hidden: true }, h("slot", { key: '8c56201e8edb251c5f7494e00acdc5e5fbb67d00' }))));
     }
     static get is() { return "table-test"; }
     static get encapsulation() { return "shadow"; }