@scania/tegel 1.52.0 → 1.53.0-focus-ring-beta.0

package/dist/collection/components/modal/modal.css

@@ -176,9 +176,7 @@ body {
   background-color: var(--background-elevation-layer-02);
   z-index: 1;
 }
-
-.header,
-slot[name=header]::slotted(*) {
+.header .header-text {
   font-family: var(--headline-05-font-family);
   font-size: var(--headline-05-font-size);
   line-height: var(--headline-05-line-height);
@@ -231,10 +229,7 @@ slot[name=header]::slotted(*) {
 .tds-modal-backdrop {
   box-sizing: border-box;
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   background-color: var(--tds-modal-backdrop-background);
   pointer-events: auto;
 }
@@ -257,8 +252,8 @@ button.tds-modal-close {
   cursor: pointer;
 }
 .tds-modal-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;
 }
@@ -301,10 +296,7 @@ button.tds-modal-close {
 :host {
   box-sizing: border-box;
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   padding: 0 16px;
   z-index: 700;
   pointer-events: none;

package/dist/collection/components/modal/modal.js

@@ -69,6 +69,8 @@ export class TdsModal {
                 referenceEl.addEventListener('click', this.handleReferenceElementClick);
             }
         };
+        this.headerId = `tds-modal-header-${generateUniqueId()}`;
+        this.bodyId = `tds-modal-body-${generateUniqueId()}`;
     }
     /** Shows the Modal.  */
     async showModal() {
@@ -96,7 +98,7 @@ export class TdsModal {
             this.returnFocusOnClose();
         }
     }
-    connectedCallback() {
+    initializeWithProps() {
         if (this.closable === undefined) {
             this.closable = true;
         }
@@ -111,8 +113,11 @@ export class TdsModal {
             console.warn('Tegel Modal: Missing focus origin. Please provide either a "referenceEl" or a "selector" to ensure focus returns to the element that opened the modal. If the modal is opened programmatically, this message can be ignored.');
         }
     }
+    connectedCallback() {
+        this.initializeWithProps();
+    }
     componentWillLoad() {
-        this.initializeModal();
+        this.initializeWithProps();
     }
     disconnectedCallback() {
         this.cleanupModal();
@@ -248,12 +253,11 @@ export class TdsModal {
     render() {
         const usesHeaderSlot = hasSlot('header', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        const headerId = this.header ? `tds-modal-header-${generateUniqueId()}` : undefined;
-        const bodyId = `tds-modal-body-${generateUniqueId()}`;
-        return (h(Host, { key: '47c0d4fe04b057ad1f1295336bad71e541b052ac', role: this.tdsAlertDialog, "aria-modal": "true", "aria-describedby": bodyId, "aria-labelledby": headerId, class: {
+        const hasLabel = this.header || usesHeaderSlot;
+        return (h(Host, { key: '9b6d05e3f91850245f4e5de015286ccf46acdbd4', class: {
                 show: this.isShown,
                 hide: !this.isShown,
-            }, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: 'f6500967c2aa83e740030050b5324de267ee7070', class: "tds-modal-backdrop" }), h("div", { key: '14bdaa5cef839b616355e7d5342519389a095b2d', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}`, tabindex: "-1" }, h("div", { key: 'fe10c46a52f58f1717b4e8bcb51b14cbef64cc4e', id: headerId, class: "header" }, this.header && h("div", { key: '95cf626802fe45eb54091414176e35af9eebc26e', class: "header-text" }, this.header), usesHeaderSlot && h("slot", { key: '840e065228905dff0b0aee19306c2767a44c5961', name: "header" }), this.closable && (h("button", { key: '515240253c8cf06452e6cf1e7c7cd90836ee6526', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: '5b93c45967f34e994a57fd36fe50f19e34681cec', name: "cross", size: "20px" })))), h("div", { key: 'e35ee14846aa28f1496e1a8dc5b0514b59a7c4f6', id: bodyId, class: "body" }, h("slot", { key: '828423ca3134f0f38520b4b70451b97cce84f19c', name: "body" })), usesActionsSlot && h("slot", { key: '9455e931e29bed29f10c01f7adc9555556b7f298', name: "actions" }))));
+            }, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: '628a621eb1563bdf719680119c92e84719d2d057', class: "tds-modal-backdrop" }), h("div", { key: '1835e48a649635b855c65a4238c2cb8adc496630', role: this.tdsAlertDialog, "aria-modal": "true", "aria-describedby": this.bodyId, "aria-labelledby": hasLabel ? this.headerId : undefined, class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}`, tabindex: "-1" }, h("div", { key: '49a81905f9fadefaf5407bb9c0b47eb1acdab3df', class: "header" }, this.header && (h("h1", { key: '2d61b4ab70694e4d43d7a7173345b8d65b932670', id: this.headerId, class: "header-text" }, this.header)), usesHeaderSlot && h("slot", { key: '655a49d64666a2ad7662d246f5062addf682decd', name: "header" }), this.closable && (h("button", { key: '4b694826ac8513d7ea62ff1c555092e6162b71b9', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: '02e7f0dbaa91e9dc0b4c73155bfc0c29f7510a36', name: "cross", size: "20px" })))), h("div", { key: 'ec6300db10150ccc29728501d6c435d1b13dcb83', id: this.bodyId, class: "body" }, h("slot", { key: 'b472e9edcc14a9900a614c4366d85fe7f05c5864', name: "body" })), usesActionsSlot && h("slot", { key: '8f6742f6084b93c1c44b310158340eddad3744fb', name: "actions" }))));
     }
     static get is() { return "tds-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -401,7 +405,7 @@ export class TdsModal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Controls whether the Modal is shown or not. If this is set hiding and showing\nwill be decided by this prop and will need to be controlled from the outside."
+                    "text": "Controls whether the Modal is shown or not. <br/> This prop allows the consumer of Tegel to control\nthe open/close interaction or set the modal visibility when opening the page. If it is not set, then\nthe modal has a fallback state for that interaction, defaulting to false."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/side-menu/side-menu-dropdown-list-item/side-menu-dropdown-list-item.css

@@ -89,8 +89,8 @@
   background-color: var(--tds-side-menu-item-pressed-indicator);
 }
 :host .component ::slotted(a:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
   outline-offset: -2px;
   z-index: 1;
 }

package/dist/collection/components/side-menu/side-menu-item/side-menu-item.css

@@ -42,8 +42,8 @@
 }
 :host .component ::slotted(a:focus-visible),
 :host .component ::slotted(button:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
   outline-offset: -2px;
   z-index: 1;
 }

package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.css

@@ -58,8 +58,8 @@
   cursor: pointer;
 }
 :host .tds-table__expand-control-container .tds-table__expand-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;
 }

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

@@ -16,11 +16,11 @@ export class TdsTableFooter {
         this.paginationValue = 1;
         /** Enable rows per page dropdown */
         this.rowsperpage = true;
-        /** Set available rows per page values */
+        /** Set available rows per page values. <br/> If pagination is enabled, this array must be defined and controlled by the consumer of Tegel */
         this.rowsPerPageValues = [10, 25, 50];
         /** Set rows per page dropdown open direction */
         this.rowsPerPageDropdownOpenDirection = 'auto';
-        /** Sets the number of pages. */
+        /** Sets the number of pages. <br/> If pagination is enabled, this value must be defined and controlled by the consumer of Tegel. */
         this.pages = 0;
         /** <b>Client override</b> Used to set the column span of the footer. Use as fallback if the automatic count of columns fails. */
         this.cols = null;
@@ -35,7 +35,6 @@ export class TdsTableFooter {
         this.lastCorrectValue = 1;
         this.tableId = '';
         this.horizontalScrollWidth = null;
-        this.rowsPerPageValue = this.rowsPerPageValues[0];
         this.emitTdsPagination = () => {
             if (this.rowsperpage) {
                 this.tdsPagination.emit({
@@ -128,6 +127,9 @@ export class TdsTableFooter {
             var _a;
             this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
         });
+        if (!this.rowsPerPageValue) {
+            this.rowsPerPageValue = this.rowsPerPageValues[0];
+        }
         this.storeLastCorrectValue(this.paginationValue);
         /** Get the number of columns. */
         const numberOfColumns = (_c = (_b = (_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('tds-table-header')) === null || _b === void 0 ? void 0 : _b.childElementCount) !== null && _c !== void 0 ? _c : 0;
@@ -165,11 +167,14 @@ export class TdsTableFooter {
         this.emitTdsPagination();
         this.storeLastCorrectValue(this.paginationValue);
     }
-    rowsPerPageChange(event) {
-        this.rowsPerPageValue = parseInt(event.detail.value);
-        if (this.paginationValue > this.pages) {
+    pagesChange(newValue) {
+        if (this.paginationValue > newValue) {
             this.paginationValue = this.pages;
+            this.emitTdsPagination();
         }
+    }
+    rowsPerPageChange(event) {
+        this.rowsPerPageValue = parseInt(event.detail.value);
         this.emitTdsPagination();
     }
     getStyles() {
@@ -181,14 +186,14 @@ export class TdsTableFooter {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'b9b2a655adbdac509705cf06f8b2cdc0e3b9a0ae', class: {
+        return (h(Host, { key: '482894dd95553b594dd56671a1b8a38960f5c690', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, h("tr", { key: 'd6f7af8c3ad70cdae194eb633313f815b8cc400a', class: "tds-table__footer-row" }, h("td", { key: '1e5bd029e2cb154e8c4eb61a566311166b4b135f', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '60abf7e8650298f0ec56bc48fc72488c3786e674', class: "tds-table__pagination" }, h("div", { key: 'aa3d9e8d9124efd479811b1e9c5e26437f798c54', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '1f6ed9da5ca83748e507ce0f5193abaf5e36c213', class: "rows-per-page" }, h("p", { key: '8319a28772407a09752e5aa0646db4f83f2ce926' }, "Rows per page"), h("tds-dropdown", { key: 'cc7596459725ebd14500179a5e15f80404df41e0', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event), openDirection: this.rowsPerPageDropdownOpenDirection }, this.rowsPerPageValues.map((value) => (h("tds-dropdown-option", { value: `${value}` }, value))))))), h("div", { key: '3b7d98daceb0b48ceda16618914033c69eca0e10', class: "tds-table__page-selector" }, h("input", { key: 'd050a2fdf9c4cb49447ab84eaa5b4da60339ff53', ref: (element) => {
+            }, style: this.getStyles() }, h("tr", { key: 'cc0be5953fda3cc32cf88956d511473944a7b13a', class: "tds-table__footer-row" }, h("td", { key: 'f647d4ef2979a980e70b9f142626196fdf72d170', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: 'a998711732c8085557ce0759b309e19b469ae665', class: "tds-table__pagination" }, h("div", { key: '0455ce54c5ec1f535cf6f85f6e039d24ae6dcd23', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: 'b9ca320cfb96935deb4171d12c7a0062fd08cd54', class: "rows-per-page" }, h("p", { key: '289cdf00f94fc228672b5e82f22ffebb5315ec3c' }, "Rows per page"), h("tds-dropdown", { key: 'dbc0a944294d509f1b4e87a221db63e8461a810a', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", tdsAriaLabel: "Select rows per page", defaultValue: `${this.rowsPerPageValue}`, onTdsChange: (event) => this.rowsPerPageChange(event), openDirection: this.rowsPerPageDropdownOpenDirection }, this.rowsPerPageValues.map((value) => (h("tds-dropdown-option", { value: `${value}` }, value))))))), h("div", { key: 'dfb4f5119d13fc42269568f506f81e3e6a9b46bd', class: "tds-table__page-selector" }, h("input", { key: '75be207207ff0e5bcb9a89a8f3611c54c8b7aa24', ref: (element) => {
                 if (element) {
                     this.inputElement = element;
                 }
-            }, class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { key: 'fa177ca38fd59d80de9f75eb64e27d516b99bf18', class: "tds-table__footer-text" }, "of ", h("span", { key: 'e15b05026a1ae3e0b5f01e6f3604cf2d88ed0cbb' }, this.pages), " pages"), h("button", { key: '12b29edbd391eb68dea8bc7439f4cc154f81ed47', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: 'b365b40363e6036e0e7500d121e8af86ea7f9097', name: "skip_backwards", size: "20px" })), h("button", { key: '6458ce6240499c1d801506756c6bdda25893bea3', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '9a0f4b8696d5437758a9b255b9e5abb4db40e9f1', name: "chevron_left", size: "20px" })), h("button", { key: '9672939723a0359217578ddd9055d2c269b201ec', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: 'f84e8a062daebddafef3f58e17015df1a741eca0', name: "chevron_right", size: "20px" })), h("button", { key: '9d00d09e9bf6b59664faa828ec85e3a43b3b17e2', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '815192910a462e07046048d84bbddb5cf2f850ba', name: "skip_forward", size: "20px" })))))))));
+            }, class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { key: '391644af3ab2c48f89167745c717fdf95ef542f1', class: "tds-table__footer-text" }, "of ", h("span", { key: 'b69a412fe7e0e9b63f9608633d5b8b539d697453' }, this.pages), " pages"), h("button", { key: '8828b14195d9b20c6fdeb35791be15d8514de4f7', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: '59eea824cda8abbd9f02438d86b55da75c43f84b', name: "skip_backwards", size: "20px" })), h("button", { key: 'a64a857b6bc6002e72370604d3d601f19d212c21', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '6000b40ebb29c0e93b05111aef80c90aea6a9066', name: "chevron_left", size: "20px" })), h("button", { key: '758935d7d58ce2be8c8ba31f1e1c2505fa454ea8', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: '4b39306ecc009aa9974916def328bcfbbfd7bfdc', name: "chevron_right", size: "20px" })), h("button", { key: '208e9276568873de41d5e38d1000056c5999e233', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: 'f394d9f7bfe31df460765dbaf3de069ba2913436', name: "skip_forward", size: "20px" })))))))));
     }
     static get is() { return "tds-table-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -276,7 +281,7 @@ export class TdsTableFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set available rows per page values"
+                    "text": "Set available rows per page values. <br/> If pagination is enabled, this array must be defined and controlled by the consumer of Tegel"
                 },
                 "getter": false,
                 "setter": false,
@@ -314,7 +319,7 @@ export class TdsTableFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Sets the number of pages."
+                    "text": "Sets the number of pages. <br/> If pagination is enabled, this value must be defined and controlled by the consumer of Tegel."
                 },
                 "getter": false,
                 "setter": false,
@@ -341,6 +346,25 @@ export class TdsTableFooter {
                 "reflect": true,
                 "attribute": "cols",
                 "defaultValue": "null"
+            },
+            "rowsPerPageValue": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the number of rows that should appear per page. <br/> If pagination is enabled, this value must be defined and controlled by the consumer of Tegel. <br/> Otherwise, it will default to the first element of the \"rowsPerPageValues\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows-per-page-value"
             }
         };
     }
@@ -352,8 +376,7 @@ export class TdsTableFooter {
             "expandableRows": {},
             "lastCorrectValue": {},
             "tableId": {},
-            "horizontalScrollWidth": {},
-            "rowsPerPageValue": {}
+            "horizontalScrollWidth": {}
         };
     }
     static get events() {
@@ -385,6 +408,9 @@ export class TdsTableFooter {
             }, {
                 "propName": "expandableRows",
                 "methodName": "updateColumnsNumber"
+            }, {
+                "propName": "pages",
+                "methodName": "pagesChange"
             }];
     }
     static get listeners() {

package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.css

@@ -22,8 +22,8 @@
   border: none;
 }
 :host ::slotted(*:focus-within)::before {
-  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;
   content: "";

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

@@ -55,8 +55,8 @@
 }
 :host .scroll-right-button:focus-within::before,
 :host .scroll-left-button:focus-within::before {
-  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;
   content: "";

package/dist/collection/components/tabs/inline-tabs/inline-tab/inline-tab.css

@@ -30,8 +30,8 @@
   top: 3px;
   bottom: 3px;
   outline: 2px solid var(--tds-blue-400);
-  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;
 }

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

@@ -72,8 +72,8 @@
   content: "";
   position: absolute;
   inset: 3px;
-  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;
 }

package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-tab.css

@@ -28,8 +28,8 @@
   right: 0;
   top: 3px;
   bottom: 3px;
-  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;
 }

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

@@ -72,8 +72,8 @@
   content: "";
   position: absolute;
   inset: 3px;
-  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;
 }

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

@@ -1,8 +1,9 @@
+/* Typography Usage mixins */
 :host {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
-  border-radius: 4px;
+  border-radius: var(--tds-tag-border-radius);
   background-color: var(--tds-tag-neutral-background);
   color: var(--tds-tag-neutral-color);
   gap: 4px;
@@ -14,22 +15,36 @@
   padding: 4px;
 }
 :host.sm {
-  border-radius: 2px;
+  border-radius: var(--tds-tag-border-radius);
   padding: 2px 4px;
-  font: var(--tds-detail-05);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
 }
 :host.success {
   background-color: var(--tds-tag-success-background);
   color: var(--tds-tag-success-color);
 }
+:host.success [slot=prefix] {
+  color: var(--tds-tag-success-icon-color);
+}
 :host.warning {
   background-color: var(--tds-tag-warning-background);
   color: var(--tds-tag-warning-color);
 }
+:host.warning [slot=prefix] {
+  color: var(--tds-tag-warning-icon-color);
+}
 :host.new {
   background-color: var(--tds-tag-new-background);
   color: var(--tds-tag-new-color);
 }
+:host.new [slot=prefix] {
+  color: var(--tds-tag-new-icon-color);
+}
 :host.neutral {
   background-color: var(--tds-tag-neutral-background);
   color: var(--tds-tag-neutral-color);
@@ -38,10 +53,16 @@
   background-color: var(--tds-tag-information-background);
   color: var(--tds-tag-information-color);
 }
+:host.information [slot=prefix] {
+  color: var(--tds-tag-information-icon-color);
+}
 :host.error {
   background-color: var(--tds-tag-error-background);
   color: var(--tds-tag-error-color);
 }
+:host.error [slot=prefix] {
+  color: var(--tds-tag-error-icon-color);
+}
 
 .tds-tag__content {
   display: flex;

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/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/toast/toast.css

@@ -50,8 +50,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;
 }

package/dist/collection/components/tooltip/tooltip.css

@@ -1,16 +1,21 @@
+/* Typography Usage mixins */
 :host {
   position: absolute;
 }
 
 .tds-tooltip {
   box-sizing: border-box;
-  font: var(--tds-detail-05);
-  letter-spacing: var(--tds-detail-05-ls);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
   color: var(--tds-tooltip-color);
   background-color: var(--tds-tooltip-background);
-  border-radius: 4px;
+  border-radius: var(--tds-tooltip-border-radius);
   padding: 8px;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   white-space: normal;
   max-width: 192px;
   z-index: 900;
@@ -22,16 +27,16 @@
   box-sizing: border-box;
 }
 .tds-tooltip.tds-tooltip-top-left {
-  border-radius: 0 4px 4px;
+  border-radius: var(--tds-tooltip-border-radius-none) var(--tds-tooltip-border-radius) var(--tds-tooltip-border-radius);
 }
 .tds-tooltip.tds-tooltip-top-right {
-  border-radius: 4px 0 4px 4px;
+  border-radius: var(--tds-tooltip-border-radius) var(--tds-tooltip-border-radius-none) var(--tds-tooltip-border-radius) var(--tds-tooltip-border-radius);
 }
 .tds-tooltip.tds-tooltip-bottom-right {
-  border-radius: 4px 4px 0;
+  border-radius: var(--tds-tooltip-border-radius) var(--tds-tooltip-border-radius) var(--tds-tooltip-border-radius-none);
 }
 .tds-tooltip.tds-tooltip-bottom-left {
-  border-radius: 4px 4px 4px 0;
+  border-radius: var(--tds-tooltip-border-radius) var(--tds-tooltip-border-radius) var(--tds-tooltip-border-radius) var(--tds-tooltip-border-radius-none);
 }
 
 .tds-tooltip-show {