@scania/tegel 1.53.0 → 1.54.0

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

@@ -46,7 +46,7 @@ export class TdsNavigationTabs {
         };
         this.addEventListenerToTabs = () => {
             this.tabElements = Array.from(this.host.children);
-            this.tabElements.map((item, index) => {
+            this.tabElements.forEach((item, index) => {
                 const clickHandler = () => {
                     if (!item.disabled) {
                         const tdsChangeEvent = this.tdsChange.emit({
@@ -61,7 +61,6 @@ export class TdsNavigationTabs {
                 };
                 item.addEventListener('click', clickHandler);
                 this.clickHandlers.set(item, clickHandler); // Store the handler in WeakMap
-                return item;
             });
         };
         this.removeEventListenerFromTabs = () => {
@@ -179,15 +178,15 @@ export class TdsNavigationTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '15c4bdd05aa8bcac2840a3f95b380ab03698428b', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null }, style: { '--padding-left': `${this.leftPadding}px` } }, h("div", { key: '55e2cc99927d5483c94cee6b15c651d77fdbfc52', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '51abe74f3232ae4a5d6c72b812e0aa635add4b14', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null }, style: { '--padding-left': `${this.leftPadding}px` } }, h("div", { key: '451ad11eef8ce9ce0995d28ea26dcb58bf9614c8', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: 'f8ad88de0b631afc63ec51a20accb49b5d8f4334', "aria-label": this.tdsScrollLeftAriaLabel, class: {
+            } }, h("button", { key: '7a9e4b4843596a0ca08df81020cbbe1f74378709', "aria-label": this.tdsScrollLeftAriaLabel, class: {
                 'scroll-left-button': true,
                 'show': this.showLeftScroll,
-            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '19201f741465bff936960c4c6d8cb4f35317f648', name: "chevron_left", size: "20px" })), h("slot", { key: 'f54a35402ec90a5e2cccfa4b5f51f56b95882e43', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '3d4d90efd57fb27de82491aab28e7e98674ddbdf', "aria-label": this.tdsScrollRightAriaLabel, class: {
+            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'b186b2aeeef040c89a250778b644b7f19b330629', name: "chevron_left", size: "20px" })), h("slot", { key: 'fc4dbf7ab2742e9ff6c53ee744236263ba7b4545', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '8c6861920474f0159f3dee041fd4d6da60675e29', "aria-label": this.tdsScrollRightAriaLabel, class: {
                 'scroll-right-button': true,
                 'show': this.showRightScroll,
-            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '6ac4687c083d820662deea8d39b4b42cc0ab5a8d', name: "chevron_right", size: "20px" })))));
+            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '0d7e9b2ec1cf42ed65abf6d9db65a0b6e3be67a1', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-navigation-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,7 +16,7 @@ export class TdsTag {
             [`${this.size.toLowerCase()}`]: true,
             [this.variant.toLowerCase()]: true,
         });
-        return (h(Host, { key: '8a514622cb84f2315dea806ffb922e254b0b91ba', class: getTagClasses() }, h("div", { key: 'bb73048a5c82e216eeb71ab1cf9c4dc692032fea', class: "tds-tag__content" }, hasPrefixSlot && h("slot", { key: 'e0fa00414957f3d226f61702d558f64fae6d4e4c', name: "prefix" }), h("span", { key: '2b67dbbc318d329f37a4a8fa98b23eb57dc7bd63' }, this.text))));
+        return (h(Host, { key: '7abe67c0e7383f526a6f673e6729b69e7984068c', class: getTagClasses() }, h("div", { key: '86a6e76cbc01841eb729cf08e6a6c2154f13ab2c', class: "tds-tag__content" }, hasPrefixSlot && h("slot", { key: '8b0c1673b882ce4a292f800ff54c12f3028a0351', name: "prefix" }), h("span", { key: '04cb612d4977abd42c8e6bf99daf85cc19db041d' }, this.text))));
     }
     static get is() { return "tds-tag"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/text-field/text-field.css

@@ -112,7 +112,7 @@
   height: 40px;
 }
 .text-field-container:focus-within {
-  border: 2px solid var(--tds-focus-outline-color);
+  border: 2px solid var(--component--focus-ring-color-strong);
   margin: 0 -2px;
 }
 

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

@@ -110,7 +110,7 @@ export class TdsTextField {
         var _a, _b, _c, _d;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: '4fd0686a033ebdbf1385c476895db195bad7dc00', class: {
+        return (h("div", { key: 'dd9defb9a38b4cf10e8c7f57035ab8dbce251a46', class: {
                 'form-text-field': true,
                 'form-text-field-nomin': this.noMinWidth,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -128,12 +128,12 @@ export class TdsTextField {
                 'form-text-field-sm': this.size === 'sm',
                 'form-text-field-error': this.state === 'error',
                 'form-text-field-success': this.state === 'success',
-            } }, this.labelPosition === 'outside' && (h("div", { key: '8e35ace912af1b61363e021430a0e8b0ea8a163c', class: "text-field-label-outside" }, h("label", { key: '585feefbdc36b6a4201bc5c379e5f71393bad90a', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: 'f849868018e4ce4be297f98b1b64443319df21a7', onClick: () => { var _a; return (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus(); }, class: "text-field-container" }, usesPrefixSlot && (h("div", { key: 'fb824b9b90f1a350a05ccfb04af41e9c14d7de33', class: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: '6b93d807bfbb8bbd3c82d8335bca55ec9c78ed4a', class: "text-field-label-outside" }, h("label", { key: 'c625e090dfb2515f886f5b9d1ce2213e0c0fd3d4', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: 'cb96dce1a1004b7951b3fb03d3841e27e79cc5a5', onClick: () => { var _a; return (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus(); }, class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '2019699ebaa2e065e7dce91c3e0c819c4e14dd60', class: {
                 'text-field-slot-wrap-prefix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
-            } }, h("slot", { key: 'e0e067e04be232ae73b320e5129ac22677b07691', name: "prefix" }))), h("div", { key: '930a368eaedf127ed4f6b9a1057d790a3c489537', class: "text-field-input-container" }, h("input", { key: 'a5b4d370d56c90de392c7ad377b1cdbbf7945626', ref: (inputEl) => {
+            } }, h("slot", { key: '157b5ac2ab057d033030ef52e4a1ff0bb54793fe', name: "prefix" }))), h("div", { key: '92fc14cf021d3f0ec436b441d428186c0e9debb5', class: "text-field-input-container" }, h("input", { key: '18d7207722fdd7107b492d9f2ac504da8daf4c14', ref: (inputEl) => {
                 this.textInput = inputEl;
             }, class: {
                 'text-field-input': true,
@@ -149,13 +149,13 @@ export class TdsTextField {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, "aria-invalid": getAriaInvalid(this.host, this.state), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}`, required: this.required, autocomplete: this.autocomplete }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '190da96bf7ebd717750a807db70a490153a813d5', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: 'f67de945a3471235aeeb04398b42b96082b6fd3e', class: {
+            }, "aria-invalid": getAriaInvalid(this.host, this.state), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}`, required: this.required, autocomplete: this.autocomplete }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'af177c81ba112bc0070257922119204317593249', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: '363104da68171eeca7fd37e5aaff4d21dd95c54a', class: {
                 'text-field-slot-wrap-suffix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
                 'tds-u-display-none': this.readOnly,
-            } }, h("slot", { key: '3a469bf74bb3edd11f0998532c9a439a14b305b5', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '7c4095a3ab33bbdd508475f829a03171c5f32b51', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: '0d8378eef86aa5201871b8436563e0b5339b9d19', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'de5431eb6983750bd4cccd17af58bcf0a2541d1e', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: '02f2e7f86126b10049344b2b07e8c6a43618ada4', "aria-live": "assertive" }, (this.helper || ((_a = this.maxLength) !== null && _a !== void 0 ? _a : 0) > 0) && (h("div", { key: '04c6f48d0993c9787da6793f3379ef4f90d4eefd', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '83308a0fcd2cd9507592086194541a6a37733370', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '061681ecbfd4a354f4175ad2b3dfacf2c054cced', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && ((_b = this.maxLength) !== null && _b !== void 0 ? _b : 0) > 0 && (h("span", { key: '36025b5f0d44833c60984ee9a591b2e2b6734bce', class: {
+            } }, h("slot", { key: '75b9836c7f556240471edba25233c00203d8bf55', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '21e1dd37091b377c67d59b63275e12fb73b6b216', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: 'eec43023c93207cdf31a5c1f69fc32ab53b62929', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '060587e75f891223fa622e7434b59fd253216438', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: 'ff1daddf3ce6df74855ab07c75697db48ff2a13e', "aria-live": "assertive" }, (this.helper || ((_a = this.maxLength) !== null && _a !== void 0 ? _a : 0) > 0) && (h("div", { key: '7232bd2259686766672c09218f3b56b739ea78a8', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: 'f37a5292ee69c54244bc829c5b96220e0450dd08', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: 'deddd774aadb77e171d81c368dbac8ebeebd7864', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && ((_b = this.maxLength) !== null && _b !== void 0 ? _b : 0) > 0 && (h("span", { key: 'a2a9f9ee206868eb12d6ff96fc8d6e32c0bad865', class: {
                 'text-field-textcounter-divider': true,
                 'text-field-textcounter-disabled': this.disabled,
             } }, this.value === null ? 0 : (_c = this.value) === null || _c === void 0 ? void 0 : _c.length, " / ", (_d = this.maxLength) !== null && _d !== void 0 ? _d : 0)))))));

package/dist/collection/components/textarea/textarea.css

@@ -64,8 +64,8 @@
   color: var(--tds-textarea-placeholder-hover);
 }
 .textarea-input:focus {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
   border-radius: 0;

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

@@ -70,7 +70,7 @@ export class TdsTextarea {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: '09cd1df4c73550cbe10f6de7127e2835e8e8e90f', class: {
+        return (h("div", { key: '17e5f048546531899316fb6941dd56c4c0eec86b', class: {
                 'textarea-container': true,
                 'textarea-label-inside': this.labelPosition === 'inside',
                 'textarea-focus': this.focusInput,
@@ -80,7 +80,7 @@ export class TdsTextarea {
                 'textarea-data': this.value !== '',
                 [`textarea-${this.state}`]: this.state === 'error' || this.state === 'success',
                 'no-min-width': this.noMinWidth,
-            } }, this.labelPosition !== 'no-label' && (h("label", { key: '16f1f2dc1993c0056aee8bfd82de399292ea1496', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '86fcb4db0544d59bdc62f313a2ad1b7bec232456', class: "textarea-wrapper" }, h("textarea", { key: '43addcf60de1c7de4dd5fd71b2d4e448cc36d0e8', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
+            } }, this.labelPosition !== 'no-label' && (h("label", { key: '7acbaff8c9b834537667a2f00fd43bd207ec4a94', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '9e1a35a149e87ef132544bccee4ef68708a043b5', class: "textarea-wrapper" }, h("textarea", { key: '1ac5b68781eb3678b286217d4be05db6b3fed343', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
                 this.textEl = inputEl;
             }, disabled: this.disabled, readonly: !this.disabled && this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
                 if (!this.readOnly) {
@@ -90,7 +90,7 @@ export class TdsTextarea {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": getAriaInvalid(this.host, this.state), "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: '79003f45831eab0125d36f3cae8e5e94016737ab', class: "textarea-resizer-icon" }, h("svg", { key: '215bb650c9d5755fb1efc60fb8f860cbd320ff81', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'e7eee0f9e40c8000232f922f20461f898d3ee897', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: 'ee804d2983da6c42e3ce071b1e1cf1183a47500b', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '581368602f2ffcedc7af6b54c406999a731854a8', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '58de6e587437522439676f57fee5143ba28a9763', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: '0d266c48b18cb493ac1b70268bdaceb0228397d8', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: 'cbc610ddb25b27dcb9ec84357594289335edf21a', name: "error", size: "16px" })), this.helper), ((_a = this.maxLength) !== null && _a !== void 0 ? _a : 0) > 0 && (h("div", { key: 'f600283d05fad5e2ac4d14e759008021ff9a3c25', class: 'textarea-textcounter' }, this.value === null ? 0 : (_b = this.value) === null || _b === void 0 ? void 0 : _b.length, h("span", { key: '2a4d1ed0e0a6ece6d2fc0943d6f44a897f8bfcfb', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": getAriaInvalid(this.host, this.state), "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: 'bdb08af97c50672145daf0f2aebca2b3dc0b6f8f', class: "textarea-resizer-icon" }, h("svg", { key: '7239c0246d6d3b9d83cddcfeba33929c52306c46', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'eb4d0058060a9e023d664b0e4ead6932b4d0fb7c', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: 'a961358d976093ef4fcab24bd59822a19f121110', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '41b20bd51f8d597d38eff89f696f9b89a1be3c5e', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '05bb88941fb674e6d636eff3e036ded3d91b8f76', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: 'e380047364c71512ec6290ddc3acce7ccf0c4a92', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: 'ab76d1518a9bda2251eb2c9e0ea765c2039da5aa', name: "error", size: "16px" })), this.helper), ((_a = this.maxLength) !== null && _a !== void 0 ? _a : 0) > 0 && (h("div", { key: '96ec8a42970fcacc3c9a8bca8c5be24530880888', class: 'textarea-textcounter' }, this.value === null ? 0 : (_b = this.value) === null || _b === void 0 ? void 0 : _b.length, h("span", { key: '8c6d15477056e04403a611c99db97da4d3c27e6b', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
     static get is() { return "tds-textarea"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/toast/toast.css

@@ -10,28 +10,31 @@
   display: flex;
   width: 348px;
   background-color: var(--tds-toast-background-color);
-  border-radius: 4px;
+  border-radius: var(--tds-toast-border-radius);
 }
 :host .wrapper.information {
-  border-left: 4px solid var(--tds-toast-color-info);
+  border-left: var(--tds-toast-border-width) solid var(--tds-toast-color-info);
 }
 :host .wrapper.information tds-icon {
-  color: var(--tds-toast-color-info);
+  color: var(--tds-toast-icon-color-info);
 }
 :host .wrapper.success {
-  border-left: 4px solid var(--tds-toast-color-success);
+  background-color: var(--tds-toast-background-success);
+  border-left: var(--tds-toast-border-width) solid var(--tds-toast-color-success);
 }
 :host .wrapper.success tds-icon {
-  color: var(--tds-toast-color-success);
+  color: var(--tds-toast-icon-color-success);
 }
 :host .wrapper.error {
-  border-left: 4px solid var(--tds-toast-color-error);
+  background-color: var(--tds-toast-background-error);
+  border-left: var(--tds-toast-border-width) solid var(--tds-toast-color-error);
 }
 :host .wrapper.error tds-icon {
-  color: var(--tds-toast-color-error);
+  color: var(--tds-toast-icon-color-error);
 }
 :host .wrapper.warning {
-  border-left: 4px solid var(--tds-toast-color-warning);
+  background-color: var(--tds-toast-background-warning);
+  border-left: var(--tds-toast-border-width) solid var(--tds-toast-color-warning);
 }
 :host .wrapper.warning tds-icon {
   color: var(--tds-toast-icon-color-warning);
@@ -50,8 +53,8 @@
   cursor: pointer;
 }
 :host .wrapper button.close:focus {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }
@@ -95,10 +98,4 @@
 }
 :host .content .toast-bottom {
   padding-top: 12px;
-}
-:host .tds-mode-variant-primary {
-  --tds-toast-background: var(--tds-toast-background-primary);
-}
-:host .tds-mode-variant-secondary {
-  --tds-toast-background: var(--tds-toast-background-secondary);
 }

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

@@ -68,12 +68,12 @@ export class TdsToast {
         const usesHeaderSlot = hasSlot('header', this.host);
         const usesSubheaderSlot = hasSlot('subheader', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { key: '0835688f4f40b81c9117a29849b1843cdcbdbbf1', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
+        return (h(Host, { key: 'b422fc996e88e7d5d0a72d07971b29150cae7714', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
                 hide: this.hidden,
                 show: !this.hidden,
-            } }, h("div", { key: 'a57942ecd8e8603b93a2c6c762942488f1bdf572', class: `
+            } }, h("div", { key: '4a473ab10edcce6938e981e25bf1c9f152721a29', class: `
             wrapper
-            ${this.variant}` }, h("tds-icon", { key: '7d214ebc4f832028a0d4947518741801ea8d6c2a', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), h("div", { key: '5e98237b18d5b20532f9c10124db1b71514f633e', class: `content` }, h("div", { key: 'be552f6baad706519327675a83030019bdc31e01', class: "header-subheader" }, this.header && h("div", { key: '937da56fb92a01902d944633429863c8a6ebb746', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '4da7b907aaba71f0c597921332ec960e3d4658c1', name: "header" }), this.subheader && h("div", { key: '27da7407725a08b5fea764e035f0145a61f18a6c', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '8cf0036dcf12a361d436287ee108fa966c3242e3', name: "subheader" })), usesActionsSlot && (h("div", { key: '49ea6249170e0e57a5f194cd05d319ee39f8a259', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: '0152c8e793f592c594f9c964e847ff9e6968121d', name: "actions" })))), this.closable && (h("button", { key: '331a00084a268346fd7350204a666a314a200c13', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: 'a0fcd31377ce27940d7a6db1c7086791a54f548c', name: "cross", size: "20px", svgTitle: "cross" }))))));
+            ${this.variant}` }, h("tds-icon", { key: '30935de82074fbb0f980161662993939a6b6580e', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), h("div", { key: '088ead78b9d39e91062efe3bd7dc7c084b81a921', class: `content` }, h("div", { key: 'b09535d0d741057672ddfcb885d6f389acdf65c9', class: "header-subheader" }, this.header && h("div", { key: '35e54d127fb9ed18c9abed9af147c133cc99b5aa', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '3f7bf2678d673e6b85a16501b47f1fbd51bb034f', name: "header" }), this.subheader && h("div", { key: 'b419ace2f16e606db38f0c2cd59f00de1173d6c3', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: 'a26f22ac7fc1ba369750273d69d31da6a793d261', name: "subheader" })), usesActionsSlot && (h("div", { key: '99c8d320a5ea1d992b7a7a4679610cdfad679c93', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: '3b6d1833ada42234f4d88ccd47694f41cfe61642', name: "actions" })))), this.closable && (h("button", { key: 'b7817f902d836bf4b0175c9e00b5818549acbce3', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '43b8d46ea0c3747a274bdaa370fd2867dcf05133', name: "cross", size: "20px", svgTitle: "cross" }))))));
     }
     static get is() { return "tds-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -41,13 +41,13 @@ export class TdsToggle {
         this.labelSlot = this.host.querySelector("[slot='label']");
     }
     render() {
-        return (h("div", { key: '84bc1933154949cee35a800438eee3e938c70b33', class: "tds-toggle" }, this.headline && (h("div", { key: '72a2dd88cc952e4c69dd2c63a4f07039701ed9e1', class: {
+        return (h("div", { key: '53ced027584d0c53406ffd3666cc427f2c8c8151', class: "tds-toggle" }, this.headline && (h("div", { key: '9b059811d239d1c6689bd833fb029d99be011d91', class: {
                 'toggle-headline': true,
                 'disabled': this.disabled,
-            } }, this.headline)), h("input", { key: 'c1a6d43bc1580ee9d8a539da383991b415fc9a37', ref: (inputEl) => {
+            } }, this.headline)), h("input", { key: '547392983cf52e45e77b755c96bd0233a223e848', ref: (inputEl) => {
                 if (inputEl)
                     this.inputElement = inputEl;
-            }, "aria-label": this.tdsAriaLabel, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), this.labelSlot && (h("label", { key: 'a99e706b380c94f3cf4225e143ea089a6849dcd5', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: 'fe70e2b3c7da93ad09d613dbbb91047caecfef61', name: "label" })))));
+            }, "aria-label": this.tdsAriaLabel, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), this.labelSlot && (h("label", { key: 'f11d96fdbd4fa15528504b7cdc2a4d60cb04c48a', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: '38f16f00d2ffec77e1729aa03163be49d17a27db', name: "label" })))));
     }
     static get is() { return "tds-toggle"; }
     static get encapsulation() { return "scoped"; }

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

@@ -64,7 +64,7 @@ export class TdsTooltip {
     }
     render() {
         var _a;
-        return (h(Host, { key: '37b0078f12fc026bcb8c69c5bb3a8e33bbc7c20f', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: '1766cc066aead022511bf9adc94e1d5bf19fd261' }, this.inheritedAttributes, { class: {
+        return (h(Host, { key: '411cb8009557df87c9441f79463ace29ca6c9dfb', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: 'eee455fb2952a27257f7efc10d3216c199db4563' }, this.inheritedAttributes, { class: {
                 'tds-tooltip': true,
                 [`tds-tooltip-${this.border}`]: true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
@@ -73,7 +73,7 @@ export class TdsTooltip {
                 this.show = true;
             }, onInternalTdsClose: () => {
                 this.show = false;
-            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '2ee57dc01f144f19bad5296d915e120ab815e57d' }))));
+            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: 'd8e87c4d8b208cedf3d2cb2daa13145e183494f6' }))));
     }
     static get is() { return "tds-tooltip"; }
     static get encapsulation() { return "scoped"; }