@sellmate/design-system 1.0.25 → 1.0.27

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

@@ -68,12 +68,12 @@ export class SdPagination {
         }
     }
     render() {
-        return (h("div", { key: '8ab0a0f2dfb17154eaba138aa0688606500be296', class: this.paginationClasses }, h("div", { key: '04b985f2d3e06ef35b18d6d375021499f36952f1', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (h("div", { key: '3113faf5d75fa4a13e267653cae820035270e652', class: this.paginationClasses }, h("div", { key: 'a770afe37da389511bbfda99324e7794ffa299f5', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: 'c2ef87605487622bed06cac8d13d180f4af23e76', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '7e3842b531373d6485ae8912addea1aa531ca891', class: "append-btns" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {

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

@@ -1,5 +1,6 @@
 import { Fragment, h } from "@stencil/core";
 import { TooltipArrow } from "../assets/tooltipArrow";
+import popoverTokens from "../../tokens/generated/component.popover.json";
 export class SdPopover {
     el;
     show = false;
@@ -30,11 +31,14 @@ export class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: 'fae8880113285544053957bb096c6618dfddc7ec' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-floating-portal", { key: '45323134dcbce4014492dde03c1416deda339ee1', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'c662820224d2c90bb806d2ac010cc95a53308b3a', class: {
+        return (h(Fragment, { key: '4a9b669a48afd220b6f7cca0512704ffca7c853a' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-floating-portal", { key: '3a3a95c0ced8d5cc03c1c00a71455804b4ee2337', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '45b78e84b9d6716b16c02868aadc0e03268d0d17', class: {
                 'sd-floating-menu': true,
+                'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: '55bc21085df77a027d252d5c3ef6d665207c71f6', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'a9bb570b87481c0fe897e65ada655537dd4b8724' })), h("div", { key: '5f28d241157a9f5481fc7fa4e48fd00fac1def5a', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: 'cc1dcbe2703dca70004159aa9fe8b18b122d8dbc', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: 'f7b72df569c2dce9e6c85bcd9509e38ac9cbbb80', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'd01d2bc92e79454d747b2fd976bfeb431d4d90fe', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '9cf8cbd72d5bec64636b778ea0642d56c3229590', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '6df940385a9472e73b408cc51c647c98c95a9af7', name: "close", size: "12", color: "gery_55" }))))))));
+            }, style: {
+                '--sd-floating-bg': popoverTokens.popover.bg,
+            } }, h("i", { key: 'dc459621c518762345e42fe201e25c18b00f71db', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '77b20a4f795453eba89230433204e43696d1572e' })), h("div", { key: '645010d9749bf039a15a3edb6ca8bac72b53a152', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '9c84f5ccf7353dca3c6e6978647c845832003361', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: 'd081317a32b5e5304d03deef7b3bcb441e4839c9', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'cf09426459cabbe4443608c9e5edda9e45c394f9', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '0677f61f7faa27e10b39b5cce2e22a3eda15dc87', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '71e254dbc9b34f98e0bc41c378d33c733ce6b582', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
     }
     static get is() { return "sd-popover"; }
     static get originalStyleUrls() {

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

@@ -45,7 +45,7 @@ export class SdPortal {
         this.wrapper = document.createElement('div');
         Object.assign(this.wrapper.style, {
             position: 'absolute',
-            zIndex: this.zIndex.toString(),
+            zIndex: (this.zIndex ?? 9999).toString(),
             transition: 'opacity 0.4s',
         });
         this.container.appendChild(this.wrapper);
@@ -89,21 +89,22 @@ export class SdPortal {
                 width: window.innerWidth,
                 height: window.innerHeight,
             };
-            let top = parentRect.bottom + window.scrollY + this.offset[1];
-            let left = parentRect.left + window.scrollX + this.offset[0];
+            const offset = this.offset ?? [0, 4];
+            let top = parentRect.bottom + window.scrollY + offset[1];
+            let left = parentRect.left + window.scrollX + offset[0];
             // 화면 상하단 넘어갈 시 반전
-            if (parentRect.bottom + wrapperRect.height + this.offset[1] > viewport.height) {
-                top = parentRect.top + window.scrollY - wrapperRect.height - this.offset[1];
+            if (parentRect.bottom + wrapperRect.height + offset[1] > viewport.height) {
+                top = parentRect.top + window.scrollY - wrapperRect.height - offset[1];
             }
             if (top < window.scrollY) {
-                top = parentRect.bottom + window.scrollY + this.offset[1];
+                top = parentRect.bottom + window.scrollY + offset[1];
             }
             // 화면 좌우측 넘어갈 시 반전
-            if (parentRect.left + wrapperRect.width + this.offset[0] > viewport.width) {
-                left = parentRect.right + window.scrollX - wrapperRect.width - this.offset[0];
+            if (parentRect.left + wrapperRect.width + offset[0] > viewport.width) {
+                left = parentRect.right + window.scrollX - wrapperRect.width - offset[0];
             }
             if (left < 0) {
-                left = this.offset[0];
+                left = offset[0];
             }
             this.wrapper.style.top = `${top}px`;
             this.wrapper.style.left = `${left}px`;
@@ -177,7 +178,7 @@ export class SdPortal {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: 'ceaa6bed28e3b1bd1a539091434fd7acee6a0e4b' });
+        return h("slot", { key: '5fe94d224d2a647a1e7cb3fed1a42073b45a2525' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {

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

@@ -33,10 +33,10 @@ export class SdProgress {
         return this.statusColor[this.progressStatus];
     }
     render() {
-        return (h("div", { key: 'a9b7c4a0bb44f7455ea21f632d3ec8edbcc97522', style: {
+        return (h("div", { key: '43da9dac67e760bfe53b8db11c27eef7ef0d8b3b', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: 'ff0dfde8b43315883d2e4f17aa5e426fb6bf54ee', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: 'af4b1c44f655546fede8ad548bddc6afb7810d2b', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, h("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));

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

@@ -23,7 +23,7 @@ export class SdRadio {
         this.update.emit(this.value);
     }
     render() {
-        return (h("div", { key: 'e741533dcd0e3b51ed3ee5db0524f7a53fcb38fb', "aria-label": this.val || 'radio option', "aria-checked": String(this.val) === String(this.value) ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: this.getRadioClasses() }, h("label", { key: `radio-${this.val}` }, h("input", { key: '52156b763ae108d34dea926987aae73c5996f980', type: "radio", name: this.val, value: String(this.val), checked: String(this.val) === String(this.value), disabled: this.disabled, onInput: ({ detail }) => this.handleRadioChange(detail) }), this.val && h("span", { key: '148a63e8861da5639f5655afd6cbf63637348fc5', class: "sd-radio-group__label" }, this.label || this.val))));
+        return (h("div", { key: '4044958bc2fd4812508ffc65b3cc42bc1091470a', "aria-label": this.val || 'radio option', "aria-checked": String(this.val) === String(this.value) ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: this.getRadioClasses() }, h("label", { key: `radio-${this.val}` }, h("input", { key: 'f7ee60381c34f4e9fe22c90c1a982a14d1b87880', type: "radio", name: this.val, value: String(this.val), checked: String(this.val) === String(this.value), disabled: this.disabled, onInput: ({ detail }) => this.handleRadioChange(detail) }), this.val && h("span", { key: '276b647bdc90f33443f0aa98a0a056be5b7eaa5d', class: "sd-radio-group__label" }, this.label || this.val))));
     }
     static get is() { return "sd-radio"; }
     static get originalStyleUrls() {

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

@@ -36,7 +36,7 @@ export class SdRadioButtonGroup {
     }
     groupName = this.name || `sd-radio-button-group-${crypto.randomUUID()}`;
     render() {
-        return (h("div", { key: '97d7659b99c889fc9b6788f4cb9558e4c6305365', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map(option => {
+        return (h("div", { key: 'b29629556f8d8922e601feede89bd77bd783ded6', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map(option => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-button-group__label" }, option.label)));

package/dist/collection/components/sd-radio-group/sd-radio-group.js

@@ -20,7 +20,7 @@ export class SdRadioGroup {
         return classes.join(' ');
     }
     render() {
-        return (h("div", { key: '80b1a8d67acac65ffc753ababa5e48e80cacdfc2', class: this.getGroupClasses(), role: "radiogroup" }, this.radioOptions.map(option => {
+        return (h("div", { key: '4f24a03003b9e21a7e7da81d70ab95a04551b694', class: this.getGroupClasses(), role: "radiogroup" }, this.radioOptions.map(option => {
             return (h("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: this.value, label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
         })));
     }

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

@@ -144,10 +144,10 @@ export class SdSelectDropdown {
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (h("div", { key: '5e56cf091a3c3d510bf932933c33a8c3d85e23ef', class: {
+        return (h("div", { key: 'ff55e2e133114accc2641a0025bdcf551eda3511', class: {
                 'sd-select-dropdown': true,
                 'sd-select-dropdown--ready': this.isDropdownReady,
-            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: 'd965a2a5f31507fb6dca30968edf6334d42b4160', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
+            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: 'bfcee14aa06a9a259dd8e67013ed1074c1f9c318', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
     }
     static get is() { return "sd-select-dropdown"; }
     static get originalStyleUrls() {

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

@@ -24,7 +24,7 @@ export class SdSelectOption {
         }
     };
     render() {
-        return (h("div", { key: '2f88e7ffe5bce12bc3f352d47d0ebed51a1c69ac', class: {
+        return (h("div", { key: 'a4fcca24b0bdde4f4665585c6cede84bd3b64d59', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,

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

@@ -16,17 +16,17 @@ export class SdSelectSearchInput {
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (h("div", { key: 'da5faa18fac3c974dcfef4050efe580edcb1bb42', class: {
+        return (h("div", { key: 'b19a029ef82d876c984c1f827d7a0f29bb823f5d', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: 'c469ef89d7600626b19ecd94416849825736ff9f', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
+            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: '8e27f40e1b507f0c5cb2d4bde48750cd0089a9da', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
                 this.searchInput.emit(String(event?.detail));
             }, onSdFocus: () => {
                 this.searchFocus.emit();
             }, onKeyDown: event => {
                 if (event.code === 'Enter')
                     event.stopPropagation();
-            } }, h("sd-icon", { key: '478a6adda3b53aabf614028bd57a8f987f93cdb6', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, h("sd-icon", { key: '2b38a07cbc0bb0d7dd020ece45f18bdff4c262e5', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
     static get is() { return "sd-select-search-input"; }
     static get originalStyleUrls() {

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

@@ -136,7 +136,7 @@ export class SdSelect extends BaseDropdownEvent {
         }
     };
     render() {
-        return (h("sd-field", { key: 'ad737ef5facfd4f2c8dfdbfc2c97010aa82ba39e', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: 'ecff910f0d0d6b02f29c2f21a4264b1a573a9170', class: {
+        return (h("sd-field", { key: '331489106e60e2304ef08ab8bb9e0b92f883c14f', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: '790254f507e924fcb7a32620a2c0ea264f49a9ae', class: {
                 'sd-select': true,
                 'sd-select--disabled': this.disabled,
                 'sd-select--error': !!this.error,
@@ -464,8 +464,8 @@ export class SdSelect extends BaseDropdownEvent {
                     "references": {
                         "SdTooltipProps": {
                             "location": "import",
-                            "path": "../sd-tooltip/sd-tooltip",
-                            "id": "src/components/sd-tooltip/sd-tooltip.tsx::SdTooltipProps",
+                            "path": "../sd-tooltip/sd-tooltip.config",
+                            "id": "src/components/sd-tooltip/sd-tooltip.config.ts::SdTooltipProps",
                             "referenceLocation": "SdTooltipProps"
                         }
                     }

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

@@ -145,7 +145,7 @@ export class SdSelectMultiple extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (h("sd-field", { key: '9395a273b4205854e6fd7e96f26f93c201e6e959', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: '451758e8c90b79e7ddb3b35226d28ee4a43a3832', class: {
+        return (h("sd-field", { key: 'e445d2c3f80d78be0e74b1f54371eb27d9c316e8', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: '9fad0ed744cafb9e1e5f16ee413f36edd8f2c1f3', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,

package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.js

@@ -389,7 +389,7 @@ export class SdSelectMultipleGroup extends BaseDropdownEvent {
         });
     }
     render() {
-        return (h("sd-field", { key: 'edcc86b68474b668acce13cd04cf2e75cdc3e5cc', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: '13b3366af18b65ac30a9e1a9a295c486351f585e', class: {
+        return (h("sd-field", { key: '85f8cf143482bb054d2ce3c15c2028213c877daf', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: '8c92a916b26f1e4935cefc3772ec655f1cd31083', class: {
                 'sd-select-multiple-group': true,
                 'sd-select-multiple-group--open': this.isOpen,
                 'sd-select-multiple-group--disabled': this.disabled,
@@ -776,8 +776,8 @@ export class SdSelectMultipleGroup extends BaseDropdownEvent {
                     "references": {
                         "SdTooltipProps": {
                             "location": "import",
-                            "path": "../sd-tooltip/sd-tooltip",
-                            "id": "src/components/sd-tooltip/sd-tooltip.tsx::SdTooltipProps",
+                            "path": "../sd-tooltip/sd-tooltip.config",
+                            "id": "src/components/sd-tooltip/sd-tooltip.config.ts::SdTooltipProps",
                             "referenceLocation": "SdTooltipProps"
                         }
                     }

package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js

@@ -39,7 +39,7 @@ export class SdSelectOptionGroup {
         }
     };
     render() {
-        return (h("div", { key: '7581caff61d1257d653b6f58b8d76c21225b3cc5', class: {
+        return (h("div", { key: '8e88aacd2c3122a563fcf78bcbe9731b6a29d8c5', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -48,10 +48,10 @@ export class SdSelectOptionGroup {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: 'ddb33f6afaa6bc6d6dd3dc494f6ec74b9c023a42', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '14f2c7fc347718d2909e5006bf2500a9a51b0a66', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: 'be4bc7f2867ea5c86505bc9284ac3de46f7077f9', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '00063ab3a6f1d4f44671ac82dd05524968bec668', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: '99415ed662cc2f8f29d31e3811eb4496f8fcac47', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'a3c7dc6455a94ecd4587f8b13b4d1f10e3b58819', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: '802c908d44bf1c0db5d64bf4c8d4bab4ebe2b87c', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'efd26a2d6e4e2662410de3755b70a2a2585ad0c4', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get is() { return "sd-select-option-group"; }
     static get originalStyleUrls() {

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

@@ -759,16 +759,16 @@ export class SdTable {
         return (h("td", { key: `virtual-${position}-spacer-${rowIdx}`, class: "sd-table__virtual-spacer", style: this.getSpacerCellStyle(spacerWidth), "aria-hidden": "true" }, h("div", { class: "sd-table__skeleton-cell" })));
     }
     render() {
-        return (h(Fragment, { key: 'd5568bc96a6ec0e973eda494deacceef6ec4bce9' }, h("div", { key: '8ec11dd8a4e0cd9f32a9dccd345711e64d10043a', class: "sd-table__wrapper", style: {
+        return (h(Fragment, { key: '882ded3f26849b023ade24914d2d88b7278a9d4a' }, h("div", { key: 'cdaaaed9dbda39eae701e2cbfa9f22fbcdc86cf1', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, h("div", { key: 'f96bbc29c77f6aaa46467d375a8a457938a27e13', class: "sd-table__container", style: {
+            } }, h("div", { key: '818b1f6f742861fe8515b2fd8bb826bbe357100f', class: "sd-table__container", style: {
                 '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, h("div", { key: 'fe66db102a053e90ffe02d26a28ac225e90f1ea3', class: {
+            } }, h("div", { key: 'b9fd1c56e1ab374ee7da80a82e1b96a2f1584eea', class: {
                 'sd-table__middle': true,
                 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
                 'sd-table__middle--loading': this.isLoading,
-            } }, this.isLoading && (h("div", { key: '0851750dd88030f05e413bbdb6a7911bbc259d00', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: '557674426413df32198427509c8f50921b268212' }))), h("table", { key: 'f04e1c387e34523c3a77137b82457ace6aeeb74b', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (h("div", { key: 'aca217244defe434eb44cea583e1b2d7b17431ef', class: "sd-table__bottom" }, h("div", { key: '19a1049a467f9aec618324b0268803ddfa52e0d5', class: "sd-table__no-data" }, h("slot", { key: 'a2170c15879dc9124eb41985e902c0119b5e45c1', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '6a12ce1409f35ff6ec9dd737829b4678b2ce2920', class: "sd-table__pagination" }, h("sd-pagination", { key: 'cec76c2c6f7dc276565e17f25ed42ea2f1578b02', 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", { key: 'f868e4f6fc8f67e00d25914b189a82d342cc767a', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
+            } }, this.isLoading && (h("div", { key: '30521e8896081a62ea96391bf7bc7f20103fc3ed', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: 'db184565e08194d4f6a35da66aa011f0b7641d8a' }))), h("table", { key: 'c8585073a95c0391c14db74d54242998a648437d', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (h("div", { key: '27d8471253fe0a1e6ee8637ed8aecaf1ce9071c2', class: "sd-table__bottom" }, h("div", { key: 'c35591b39ff87a55d38f9b0cb2b91fbd54081f0b', class: "sd-table__no-data" }, h("slot", { key: '0af141458219896bd93dbc7a195389d4a40cf654', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '981becdef62a000bd6d338428fa1e20b5205c77e', class: "sd-table__pagination" }, h("sd-pagination", { key: '47f042431c47d7dcdb3acfb2e4687d8c8e66ba6c', 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", { key: '0f9edc63cf7e119c9dc1e343ec043c28b36ee83d', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
     }
     static get is() { return "sd-table"; }
     static get originalStyleUrls() {

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

@@ -40,7 +40,7 @@ export class SdTabs {
         return `square_${this.size}_${color}`;
     }
     render() {
-        return (h("div", { key: 'bc86d4c1775bed6c2d323c9446e2c50631afed7c', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: 'c7e6f8385e395a8adc7605ce4a7ae32c25f83829', class: this.getContainerClasses() }, 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() }))));
         })));

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

@@ -1,5 +1,6 @@
+import tagTokens from "../../tokens/generated/component.tag.json";
 export const TAG_SHAPES = ['square', 'pill'];
-export const TAG_SIZES = ['sm', 'md', 'lg'];
+export const TAG_SIZES = ['xs', 'sm', 'md'];
 export const TAG_COLORS = [
     'grey',
     'red',
@@ -11,48 +12,51 @@ export const TAG_COLORS = [
     'indigo',
 ];
 const TAG_COLOR_CONFIG = {
-    grey: { background: '#EEEEEE', content: '#737373', icon: '#737373' },
-    red: { background: '#FCEFEF', content: '#FB4444', icon: '#FB4444' },
-    orange: { background: '#FEF1EA', content: '#FF6B00', icon: '#FF6B00' },
-    yellow: { background: '#FFF7DD', content: '#916C0D', icon: '#CA9611' },
-    green: { background: '#E8F9EF', content: '#00973C', icon: '#12B553' },
-    blue: { background: '#E6F1FF', content: '#0075FF', icon: '#0075FF' },
-    darkblue: { background: '#EAF5FE', content: '#006AC1', icon: '#006AC1' },
-    indigo: { background: '#EFF6FF', content: '#004290', icon: '#004290' },
+    grey: { background: tagTokens.tag.grey.content, content: tagTokens.tag.grey.bg, icon: tagTokens.tag.grey.bg },
+    red: { background: tagTokens.tag.red.content, content: tagTokens.tag.red.bg, icon: tagTokens.tag.red.bg },
+    orange: { background: tagTokens.tag.orange.content, content: tagTokens.tag.orange.bg, icon: tagTokens.tag.orange.bg },
+    yellow: { background: tagTokens.tag.yellow.content, content: tagTokens.tag.yellow.bg, icon: tagTokens.tag.yellow.bg },
+    green: { background: tagTokens.tag.green.content, content: tagTokens.tag.green.bg, icon: tagTokens.tag.green.bg },
+    blue: { background: tagTokens.tag.blue.content, content: tagTokens.tag.blue.bg, icon: tagTokens.tag.blue.bg },
+    darkblue: { background: tagTokens.tag.darkblue.content, content: tagTokens.tag.darkblue.bg, icon: tagTokens.tag.darkblue.bg },
+    indigo: { background: tagTokens.tag.indigo.content, content: tagTokens.tag.indigo.bg, icon: tagTokens.tag.indigo.bg },
 };
 const SQUARE_SIZE_CONFIG = {
-    sm: {
-        height: '20px',
-        paddingX: '6px',
-        gap: '4px',
-        fontSize: '11px',
-        fontWeight: '500',
-        iconSize: 12,
+    xs: {
+        height: `${tagTokens.tag.xs.paddingX ? Number(tagTokens.tag.xs.typography.lineHeight) + Number(tagTokens.tag.xs.paddingX) : 20}px`,
+        paddingX: `${tagTokens.tag.xs.paddingX}px`,
+        gap: `${tagTokens.tag.xs.gap}px`,
+        fontSize: `${tagTokens.tag.xs.typography.fontSize}px`,
+        fontWeight: tagTokens.tag.xs.typography.fontWeight,
+        lineHeight: `${tagTokens.tag.xs.typography.lineHeight}px`,
+        iconSize: Number(tagTokens.tag.xs.icon),
         radius: '4px',
     },
-    md: {
-        height: '24px',
-        paddingX: '8px',
-        gap: '4px',
-        fontSize: '12px',
-        fontWeight: '700',
-        iconSize: 16,
+    sm: {
+        height: `${tagTokens.tag.sm.paddingX ? Number(tagTokens.tag.sm.typography.lineHeight) + Number(tagTokens.tag.sm.paddingX) : 24}px`,
+        paddingX: `${tagTokens.tag.sm.paddingX}px`,
+        gap: `${tagTokens.tag.sm.gap}px`,
+        fontSize: `${tagTokens.tag.sm.typography.fontSize}px`,
+        fontWeight: tagTokens.tag.sm.typography.fontWeight,
+        lineHeight: `${tagTokens.tag.sm.typography.lineHeight}px`,
+        iconSize: Number(tagTokens.tag.sm.icon),
         radius: '4px',
     },
-    lg: {
-        height: '28px',
-        paddingX: '10px',
-        gap: '4px',
-        fontSize: '14px',
-        fontWeight: '700',
-        iconSize: 16,
+    md: {
+        height: `${tagTokens.tag.md.paddingX ? Number(tagTokens.tag.md.typography.lineHeight) + Number(tagTokens.tag.md.paddingX) : 28}px`,
+        paddingX: `${tagTokens.tag.md.paddingX}px`,
+        gap: `${tagTokens.tag.md.gap}px`,
+        fontSize: `${tagTokens.tag.md.typography.fontSize}px`,
+        fontWeight: tagTokens.tag.md.typography.fontWeight,
+        lineHeight: `${tagTokens.tag.md.typography.lineHeight}px`,
+        iconSize: Number(tagTokens.tag.md.icon),
         radius: '5px',
     },
 };
 const PILL_SIZE_CONFIG = {
+    xs: { ...SQUARE_SIZE_CONFIG.xs, radius: '999px' },
     sm: { ...SQUARE_SIZE_CONFIG.sm, radius: '999px' },
     md: { ...SQUARE_SIZE_CONFIG.md, radius: '999px' },
-    lg: { ...SQUARE_SIZE_CONFIG.lg, radius: '999px' },
 };
 export const TAG_CONFIG = Object.fromEntries(TAG_SHAPES.flatMap(shape => TAG_SIZES.flatMap(size => TAG_COLORS.map(color => {
     const sizeConfig = shape === 'square' ? SQUARE_SIZE_CONFIG[size] : PILL_SIZE_CONFIG[size];

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

@@ -34,5 +34,5 @@ sd-tag {
   min-width: 0;
   font-size: var(--sd-tag-font-size, 12px);
   font-weight: var(--sd-tag-font-weight, 700);
-  line-height: 1;
+  line-height: var(--sd-tag-line-height, 20px);
 }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { TAG_CONFIG, isTagName } from "./sd-tag.config";
 export class SdTag {
-    name = 'square_md_grey';
+    name = 'square_sm_grey';
     label = '';
     icon;
     isLeft = true;
@@ -19,7 +19,7 @@ export class SdTag {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (h("span", { key: '5f9ee005b146997dd13bb3e6a06680ff8574bd14', class: "sd-tag", style: {
+        return (h("span", { key: 'c1c80bafa32e7c658780a8c214de97b9a7099697', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -27,8 +27,9 @@ export class SdTag {
                 '--sd-tag-gap': config.gap,
                 '--sd-tag-font-size': config.fontSize,
                 '--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: 'b123ab6ac015db640e4dc3edc5e2cf90ec5e0ecf', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '6a0d9ec74319a7cefd0ceae96ffed32c717000bb', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
     static get is() { return "sd-tag"; }
     static get originalStyleUrls() {
@@ -48,7 +49,7 @@ export class SdTag {
                 "mutable": false,
                 "complexType": {
                     "original": "TagName",
-                    "resolved": "\"pill_lg_blue\" | \"pill_lg_darkblue\" | \"pill_lg_green\" | \"pill_lg_grey\" | \"pill_lg_indigo\" | \"pill_lg_orange\" | \"pill_lg_red\" | \"pill_lg_yellow\" | \"pill_md_blue\" | \"pill_md_darkblue\" | \"pill_md_green\" | \"pill_md_grey\" | \"pill_md_indigo\" | \"pill_md_orange\" | \"pill_md_red\" | \"pill_md_yellow\" | \"pill_sm_blue\" | \"pill_sm_darkblue\" | \"pill_sm_green\" | \"pill_sm_grey\" | \"pill_sm_indigo\" | \"pill_sm_orange\" | \"pill_sm_red\" | \"pill_sm_yellow\" | \"square_lg_blue\" | \"square_lg_darkblue\" | \"square_lg_green\" | \"square_lg_grey\" | \"square_lg_indigo\" | \"square_lg_orange\" | \"square_lg_red\" | \"square_lg_yellow\" | \"square_md_blue\" | \"square_md_darkblue\" | \"square_md_green\" | \"square_md_grey\" | \"square_md_indigo\" | \"square_md_orange\" | \"square_md_red\" | \"square_md_yellow\" | \"square_sm_blue\" | \"square_sm_darkblue\" | \"square_sm_green\" | \"square_sm_grey\" | \"square_sm_indigo\" | \"square_sm_orange\" | \"square_sm_red\" | \"square_sm_yellow\"",
+                    "resolved": "\"pill_md_blue\" | \"pill_md_darkblue\" | \"pill_md_green\" | \"pill_md_grey\" | \"pill_md_indigo\" | \"pill_md_orange\" | \"pill_md_red\" | \"pill_md_yellow\" | \"pill_sm_blue\" | \"pill_sm_darkblue\" | \"pill_sm_green\" | \"pill_sm_grey\" | \"pill_sm_indigo\" | \"pill_sm_orange\" | \"pill_sm_red\" | \"pill_sm_yellow\" | \"pill_xs_blue\" | \"pill_xs_darkblue\" | \"pill_xs_green\" | \"pill_xs_grey\" | \"pill_xs_indigo\" | \"pill_xs_orange\" | \"pill_xs_red\" | \"pill_xs_yellow\" | \"square_md_blue\" | \"square_md_darkblue\" | \"square_md_green\" | \"square_md_grey\" | \"square_md_indigo\" | \"square_md_orange\" | \"square_md_red\" | \"square_md_yellow\" | \"square_sm_blue\" | \"square_sm_darkblue\" | \"square_sm_green\" | \"square_sm_grey\" | \"square_sm_indigo\" | \"square_sm_orange\" | \"square_sm_red\" | \"square_sm_yellow\" | \"square_xs_blue\" | \"square_xs_darkblue\" | \"square_xs_green\" | \"square_xs_grey\" | \"square_xs_indigo\" | \"square_xs_orange\" | \"square_xs_red\" | \"square_xs_yellow\"",
                     "references": {
                         "TagName": {
                             "location": "import",
@@ -68,7 +69,7 @@ export class SdTag {
                 "setter": false,
                 "reflect": false,
                 "attribute": "name",
-                "defaultValue": "'square_md_grey'"
+                "defaultValue": "'square_sm_grey'"
             },
             "label": {
                 "type": "string",

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

@@ -75,10 +75,10 @@ export class SdTextarea {
     }
     render() {
         const maxLengthCounter = this.getMaxLengthCounter();
-        return (h("div", { key: '5f087de7fd28e3f5fa3315c37b8974e7f5878149', class: {
+        return (h("div", { key: 'b8d0496866829b85f6678f648ccc944d57b45378', class: {
                 'sd-textarea': true,
                 [this.getTextareaStatus()]: true,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: 'fb9e5c4e98cadbf1a694bce4f9fed498bdc8e7cd', class: "sd-textarea__content" }, h("textarea", { key: 'b0414813c34a127becd94ec6fc2e516c375d8eea', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (h("div", { key: 'fe3f278f3a7d438f8fce8ca4043e00ec0220efd6', class: "sd-textarea__footer" }, this.helpText !== undefined && h("span", { key: '16d15de3ff1e49de16b67088d52f7f2848f2e283', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && h("span", { key: '84b4adbd09b7af30dbc68b5f3e6473e97fe4c76e', class: "sd-textarea__counter" }, maxLengthCounter)))));
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: 'b43d91b1c7381a2b6c7a0ab1437e43e32396419c', class: "sd-textarea__content" }, h("textarea", { key: '9b77710a8344db09172f57212c55db6a70ec96f2', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (h("div", { key: '67056ceb0778d11a607cfc1de9de9440c98bd165', class: "sd-textarea__footer" }, this.helpText !== undefined && h("span", { key: 'bcdb6b7991cae0e68a21f04a53299952602e5039', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && h("span", { key: '526ff7bcd19688f086ef1f129008b4849a8d3491', class: "sd-textarea__counter" }, maxLengthCounter)))));
     }
     static get is() { return "sd-textarea"; }
     static get originalStyleUrls() {

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

@@ -39,10 +39,10 @@ export class SdToast {
             background: resolveColor(colorTokens.background),
             text: resolveColor(colorTokens.text),
         };
-        return (h("div", { key: '16579a21c0eec78e609b0cf82fcf2d040b8b3388', style: {
+        return (h("div", { key: '0e0643ca708f95b8b357a1e146343948366ca727', style: {
                 '--sd-toast-bg': colors.background,
                 '--sd-toast-text': colors.text,
-            } }, h("div", { key: '108e47983e1ad99ed462a4fa00c29aa9e3393b8b', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'd034c9aaafc272d51de96de6ccefe49208aba7e3', class: "sd-toast__icon" }, h("sd-icon", { key: '14b97c4cbe7134f67d919abcf4e10cf673dd909d', name: this.icon, size: 16, color: colors.text }))), h("div", { key: '1cecb89bdb19742a7df04625e8f070cd2c207b5e', class: "sd-toast__content" }, h("span", { key: '1daf2a2bea963b7b68c580b30c4c8fa2f3a26c8f', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '8f7961c2c14806aa1323e378f57d74e47614772c', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '89cba5e58ff368aea05130b799d903d4cf85b120', class: `sd-toast__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onSdClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor('grey_95') } : {} })), this.useClose && (h("button", { key: '0e7fc0737824b61166cbff82a410948ca1745842', type: "button", class: "sd-toast__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, h("sd-icon", { key: '82d203f6eb584cb04566e8f3b1bd7a86ca50bba4', name: "close", size: 12, color: colors.text }))))));
+            } }, h("div", { key: '366f178360029706f54bc44cc95d2807c374318e', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'c110b274a1929970bc818c8a41040b26656ba27e', class: "sd-toast__icon" }, h("sd-icon", { key: '7e71e2878f18c66d7ac4aa07d1e96eff74bea074', name: this.icon, size: 16, color: colors.text }))), h("div", { key: 'b1a3a86d65724b8bbe1ab131e289379451ea7ec4', class: "sd-toast__content" }, h("span", { key: '56ac68520c8be2541528c7ff3242d634f036aec0', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '5e93140dea3082f869a1263d0cb0574690173cc8', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '79e472c5f4b31e3df155bcf621a5b83345a62788', class: `sd-toast__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onSdClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor('grey_95') } : {} })), this.useClose && (h("button", { key: 'fb3f5666b04fedf20b81235bb34c1c2d793aa1fa', type: "button", class: "sd-toast__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, h("sd-icon", { key: 'dff68640b8f90dba0e2ee77c743e304bd5b80859', name: "close", size: 12, color: colors.text }))))));
     }
     static get is() { return "sd-toast"; }
     static get originalStyleUrls() {

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

@@ -28,7 +28,7 @@ export class SdToggle {
         this.change.emit(newValue);
     };
     render() {
-        return (h("label", { key: '9a8a0221e093040e446bc193f682070aa1f95c6c', "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: '4a2e3c626bfa4e439676cc40df619bd284d0178a', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: '1eecfd810c17610604d6cf93c6f664690f17ff6a', class: "sd-toggle__label" }, this.label), h("div", { key: '9f082e2f6036e338f2afb6fb719b4ff8d3a01d99', class: "sd-toggle__track" }, h("div", { key: '1d8b1bd11b05091a368c681ead7e79a0e453d510', class: "sd-toggle__thumb" }))));
+        return (h("label", { key: '1b2a644cdf09cb16d77ecfe38be28b0fdcbf592a', "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: '1f1f09c157fe0d8cab0dd5b45caa51b6418cf80f', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: '0aedb28652224b3a51bd13b912d2d85a4adbaa12', class: "sd-toggle__label" }, this.label), h("div", { key: 'af31fa9a84bae6c4bb97e339f5a26678f1a951e7', class: "sd-toggle__track" }, h("div", { key: 'cade31468c32d0179d4db0473e66c89d8ac4119c', class: "sd-toggle__thumb" }))));
     }
     static get is() { return "sd-toggle"; }
     static get originalStyleUrls() {

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

@@ -32,7 +32,7 @@ export class SdToggleButton {
         this.change.emit(newValue);
     };
     render() {
-        return (h("label", { key: '174a62904591e559232574d207ff4ad9c0113ad8', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, h("input", { key: '7bbd96a0563a8cadcfb7ab9d8e1fb3767508d6bf', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: '765e1ec1a8ca7d55a1c8000044168c39032c649d', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, h("input", { key: 'f3ea12b098b9bd5d50c626a3b0611457e580387c', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
     static get is() { return "sd-toggle-button"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,7 @@
+import tooltipTokens from "../../tokens/generated/component.tooltip.json";
+export const TOOLTIP_TYPE_CONFIG = {
+    default: { bg: tooltipTokens.tooltip.default.bg, content: tooltipTokens.tooltip.default.content },
+    danger: { bg: tooltipTokens.tooltip.danger.bg, content: tooltipTokens.tooltip.danger.content },
+    warning: { bg: tooltipTokens.tooltip.warning.bg, content: tooltipTokens.tooltip.warning.content },
+    accent: { bg: tooltipTokens.tooltip.accent.bg, content: tooltipTokens.tooltip.accent.content },
+};