@scania/tegel 1.53.0 → 1.54.0

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

@@ -64,12 +64,12 @@ export class TdsTableBody {
         }
     }
     render() {
-        return (h(Host, { key: 'adce986c270e066e38b0ec79e7d33e6db616c2a2', "data-selected-rows": this.multiselectArrayJSON, class: {
+        return (h(Host, { key: '60769d20b1be88e96358e43d627188860b85f580', "data-selected-rows": this.multiselectArrayJSON, class: {
                 'tds-table--zebra-mode-rows-odd': this.zebraMode === 'rows-odd',
                 'tds-table--zebra-mode-rows-even': this.zebraMode === 'rows-even',
                 'tds-table--zebra-mode-columns-odd': this.zebraMode === 'columns-odd',
                 'tds-table--zebra-mode-columns-even': this.zebraMode === 'columns-even',
-            } }, h("slot", { key: '52a8e58d426fe4997808baadf591be93d260f701' })));
+            } }, h("slot", { key: '7f2451f49224792b663dacc60f66f33d2e9e70de' })));
     }
     static get is() { return "tds-table-body"; }
     static get originalStyleUrls() {

package/dist/collection/components/table/table-body-cell/table-body-cell.js

@@ -23,7 +23,7 @@ export class TdsTableBodyCell {
             event.detail.changed
                 .filter((changedProp) => relevantTableProps.includes(changedProp))
                 .forEach((changedProp) => {
-                if (typeof this[changedProp] === 'undefined') {
+                if (!(changedProp in this)) {
                     throw new Error(`Table prop is not supported: ${changedProp}`);
                 }
                 this[changedProp] = event.detail[changedProp];
@@ -82,13 +82,13 @@ export class TdsTableBodyCell {
             // Conditionally set padding style
             padding: paddingStyle,
         };
-        return (h(Host, { key: '1b2e629f6e69dc781b31a858762a310cde81283a', class: {
+        return (h(Host, { key: '2cd26f5d02b28c1ecfdc85449ba9ada8bdf659d1', class: {
                 'tds-table__body-cell': true,
                 'tds-table__body-cell--hover': this.activeSorting,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--no-min-width': this.noMinWidth,
-            } }, h("td", { key: '809dfc0ebb81dfb243bdfad230263d5c899baaee', style: dynamicStyles, colSpan: this.colSpan, rowSpan: this.rowSpan }, this.cellValue, h("slot", { key: '1e2286ec6f5d982d3e2dc0ec82451689b585c360' }))));
+            } }, h("td", { key: 'b92b6d629c144ec689439501b6d3349c5781addf', style: dynamicStyles, colSpan: this.colSpan, rowSpan: this.rowSpan }, this.cellValue, h("slot", { key: 'eacfe800394785849f4e5460a8590367cd4d9bce' }))));
     }
     static get is() { return "tds-body-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -241,7 +241,7 @@ export class TdsTableBodyCell {
     static get elementRef() { return "host"; }
     static get listeners() {
         return [{
-                "name": "internalTdsPropChange",
+                "name": "internalTdsTablePropChange",
                 "method": "internalTdsPropChangeListener",
                 "target": "body",
                 "capture": false,

package/dist/collection/components/table/table-body-input-wrapper/table-body-input-wrapper.js

@@ -82,7 +82,7 @@ export class TdsTableBodyInputWrapper {
         }
     }
     render() {
-        return (h(Host, { key: '8dc24acf73acb59732dcd490d792545a63679d2a', class: {
+        return (h(Host, { key: '1a61abe1ae33890adae2565298086fe3d55f0cf0', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,

package/dist/collection/components/table/table-body-row/table-body-row.js

@@ -74,13 +74,13 @@ export class TdsTableBodyRow {
         }
     }
     render() {
-        return (h(Host, { key: 'f4e5c9acd820b468b93bbd83100695c56dca306c', tabindex: this.clickable ? '0' : null, class: {
+        return (h(Host, { key: '2d1a875e4fcc34fd35edbc2379bb333344da26f6', tabindex: this.clickable ? '0' : null, class: {
                 'tds-table__row': true,
                 'tds-table__row--selected': this.selected,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table__row--clickable': this.clickable,
-            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "row" }, this.multiselect && (h("td", { key: '6c51cf7b6d7656912de72231b55c66534e0b1f41', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '3f33bb0e7acb689e1034869df00c810dee30a296', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '8944284b39ffa3b26e3f83e73a8fd98402bde105' })));
+            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "row" }, this.multiselect && (h("td", { key: '454c4ebce72cc16c4bd0ea1d3ae57a6f1c9a6f7f', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: 'dfdc49c6156339ded9cd1ec0d0660d561334508e', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '823f0be11a3c370a08439cecc0725485bf7ca20c' })));
     }
     static get is() { return "tds-table-body-row"; }
     static get encapsulation() { return "shadow"; }

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-body-row-expandable/table-body-row-expandable.js

@@ -138,27 +138,27 @@ export class TdsTableBodyRowExpandable {
     }
     render() {
         var _a;
-        return (h(Host, { key: '4cb9b9ae686cff6a0c9f7a73a2eb72eb4444859a', class: {
+        return (h(Host, { key: '4a19eecaddbe092c48da935ad1c9f3763f6c1bbf', class: {
                 'tds-table__row': true,
                 'tds-table__row-expand--active': this.isExpanded,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
-            } }, h("tr", { key: 'd9df910f8c230d7a0289c887a6a9cea5af569d9d', id: `expandable-content-${this.rowId}`, class: {
+            } }, h("tr", { key: '6724479fd5086ffd1d3f445c93fae3552f58cd08', id: `expandable-content-${this.rowId}`, class: {
                 'tds-table__row': true,
                 'tds-table__row--expanded': this.isExpanded,
                 'tds-table__row--selected': this.selected,
-            }, part: "row" }, this.multiselect && (h("td", { key: 'e7b76c0efb3fc1c6700980e0d48a681458eacd6f', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: 'e707b13211b328beb76ffe78ff874bbd863483ee', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("td", { key: '6150b96c6b00407685d8f059c083bbd159a27938', class: {
+            }, part: "row" }, this.multiselect && (h("td", { key: '6ff69b0dae005b397c56ed1eb354ad854ae5c007', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '525f6c830cfb5540659788f160fb385021d2d61a', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("td", { key: '1cc72fefa3ddf8faa7c92d51016ea3284b5e0ade', class: {
                 'tds-table__cell-expand': true,
-            } }, h("label", { key: '78df3bcaf49fb79d37d958a94645f6eaffbcdfba', class: "tds-table__expand-control-container" }, h("input", { key: '93a7d13ac6fd8a43e02ca67abadbcf1f37230cf8', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `expandable-content-${this.rowId}`, "aria-label": this.tdsAriaLabelExpandButton }), h("span", { key: '4e9399e6e6520e24a6f40cf0a4853f436c18bd9c', class: "tds-expendable-row-icon" }, h("svg", { key: 'cde3749b3716a1b96e0f93fe6d140f2e0d1a5174', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '98803ddb93a854f0734a080641bd19c6983f63ea', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", { key: 'f821c49713d75972ce698c199da7b20eae103530' })), h("tr", { key: '1ffedd81c1410d80f31be60737d401a8622d104a', class: {
+            } }, h("label", { key: 'd508a4cb105d5c7b6a25c842ee9c17d9bcc711d9', class: "tds-table__expand-control-container" }, h("input", { key: '02309a59872696a39bc14dc569353f6718ca72de', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `expandable-content-${this.rowId}`, "aria-label": this.tdsAriaLabelExpandButton }), h("span", { key: '048779f2625c0a7af929a450dedca38bad96ff1b', class: "tds-expendable-row-icon" }, h("svg", { key: '8ce707e13f806d2de2c9b2dae7b41366f49e7676', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '1d093d47b272fa218ab556a962ed34b5388128ce', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", { key: '5805b8699723c5ba1d1911bac9f83651b8f79503' })), h("tr", { key: '087e3a6f608f647d51087dc0952e6a24c631520b', class: {
                 'tds-table__row-expand': true,
                 'tds-table__row-expand--expanded': this.isExpanded,
-            }, part: "expand-row" }, h("td", { key: '2d1f4ef38dcea38e4154ea4a788404c9b44f0b9a', class: {
+            }, part: "expand-row" }, h("td", { key: 'd561520155d374db9e4c255a48ed5fb24c7f2718', class: {
                 'tds-table__cell-expand': true,
                 'tds-table__cell-expand--overflow-hidden': this.overflow === 'hidden',
                 'tds-table__cell-expand--overflow-visible': this.overflow === 'visible',
-            }, part: "expand-row-cell", colSpan: (_a = this.columnsNumber) !== null && _a !== void 0 ? _a : undefined }, h("div", { key: 'ab809e98c84bc5c3bc5c1233ec20b18c80e569b7', style: {
+            }, part: "expand-row-cell", colSpan: (_a = this.columnsNumber) !== null && _a !== void 0 ? _a : undefined }, h("div", { key: 'f8e443b5141f451fd389ab995b3a8aa3ed44df70', style: {
                 overflow: this.overflow,
-            } }, h("slot", { key: '0a540ac54a7b6e5c1d1567e5178a0bd624b76d2f', name: "expand-row" }))))));
+            } }, h("slot", { key: '2c37f0136cab3b87307c16d55062f4aebc623e55', name: "expand-row" }))))));
     }
     static get is() { return "tds-table-body-row-expandable"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,12 +14,18 @@ export class TdsTableFooter {
         this.pagination = false;
         /** Sets the pagination number. */
         this.paginationValue = 1;
+        /** Set pagination label. Use {pages} as placeholder for the total number of pages. */
+        this.paginationLabel = 'of {pages} pages';
         /** Enable rows per page dropdown */
         this.rowsperpage = true;
+        /** Set rows per page label. */
+        this.rowsPerPageLabel = 'Rows per page';
         /** 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';
+        /** Set rows per page dropdown aria label. */
+        this.rowsPerPageDropdownAriaLabel = 'Select rows per page';
         /** 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. */
@@ -184,16 +190,24 @@ export class TdsTableFooter {
         }
         return styles;
     }
+    renderPaginationLabel() {
+        const pagesPlaceholder = '{pages}';
+        const paginationLabelParts = this.paginationLabel.split(pagesPlaceholder);
+        if (paginationLabelParts.length === 1) {
+            return this.paginationLabel;
+        }
+        return paginationLabelParts.flatMap((part, index) => index === paginationLabelParts.length - 1 ? [part] : [part, h("span", null, this.pages)]);
+    }
     render() {
         var _a;
-        return (h(Host, { key: '482894dd95553b594dd56671a1b8a38960f5c690', class: {
+        return (h(Host, { key: '8dc06e9c565e608dd02bf74a0328b515aaea31c2', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, 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) => {
+            }, style: this.getStyles() }, h("tr", { key: '1a64b9023acc03204ad4219fd986b106334ff6e6', class: "tds-table__footer-row" }, h("td", { key: '815d2a7aaf4c98035fc0b1bdb4b7b7668f4a5e83', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '65dbb8f0ffd41242553775c6e42fff5c626d0017', class: "tds-table__pagination" }, h("div", { key: 'de880d869b550d94ab543dcb3182b354ce09cc45', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '481589d46734bed1e77037003169d12373e6e169', class: "rows-per-page" }, h("p", { key: 'f054474b89ddb6cd3245b215c9095f445582f6a9' }, this.rowsPerPageLabel), h("tds-dropdown", { key: '066a6f324de1a0c83f9e15350b133e8de14f8259', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", tdsAriaLabel: this.rowsPerPageDropdownAriaLabel, 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: '598f908e641e97a7d02681e57534817a063b1bd8', class: "tds-table__page-selector" }, h("input", { key: '5cca773b5720451a74716aaa4be370285d9b34a5', 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: '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" })))))))));
+            }, 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: '2fc916ca072a1f109408025f34e55efec40aa661', class: "tds-table__footer-text" }, this.renderPaginationLabel()), h("button", { key: '843fbd54ec2f77f4b4a494ed93ba6fa82ba169e7', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: '1f79a5af16a33b6635cd1533ac9852852bd6e6d6', name: "skip_backwards", size: "20px" })), h("button", { key: '3b7c30d4f1c167001bc42bde4523436aa807e501', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '79cbe3606b633611e63cffc674f2552c496479ef', name: "chevron_left", size: "20px" })), h("button", { key: '7251a8abc9628336696267c8a7c9296f078c3304', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: 'e06b07d0aca6cfb3a053391ac92f0950b6d9dc30', name: "chevron_right", size: "20px" })), h("button", { key: 'f843cd3597e7419c174919254e28f5b94b9d184f', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '5d217d4ff8ae825e1ac5cd31416b56dc04a323b3', name: "skip_forward", size: "20px" })))))))));
     }
     static get is() { return "tds-table-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -249,6 +263,26 @@ export class TdsTableFooter {
                 "attribute": "pagination-value",
                 "defaultValue": "1"
             },
+            "paginationLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set pagination label. Use {pages} as placeholder for the total number of pages."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "pagination-label",
+                "defaultValue": "'of {pages} pages'"
+            },
             "rowsperpage": {
                 "type": "boolean",
                 "mutable": false,
@@ -269,6 +303,26 @@ export class TdsTableFooter {
                 "attribute": "rowsperpage",
                 "defaultValue": "true"
             },
+            "rowsPerPageLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set rows per page label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "rows-per-page-label",
+                "defaultValue": "'Rows per page'"
+            },
             "rowsPerPageValues": {
                 "type": "unknown",
                 "mutable": false,
@@ -307,6 +361,26 @@ export class TdsTableFooter {
                 "attribute": "rows-per-page-dropdown-open-direction",
                 "defaultValue": "'auto'"
             },
+            "rowsPerPageDropdownAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set rows per page dropdown aria label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "rows-per-page-dropdown-aria-label",
+                "defaultValue": "'Select rows per page'"
+            },
             "pages": {
                 "type": "number",
                 "mutable": false,

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

@@ -90,11 +90,11 @@ export class TdsTableHeaderRow {
         });
     }
     render() {
-        return (h(Host, { key: '081f1f38317966710af212df1f9ce7c0abe5e43d', class: {
+        return (h(Host, { key: '3fd3b267495c342977831ff9733b1ac671e605c5', class: {
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
-            } }, h("tr", { key: 'd7d544ea5dd7d54c7599797fd22f5dcc610740d9' }, this.multiselect && (h("th", { key: 'de1d90c31d0bea8c277a748c4f9a5cda5251cb2f', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '3e62bed00d239585d752e76f522f656f796084f5', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '0500722422e1512430fd01050fac00bfa5d0f165', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '6b71efdaec2bd25f3a28077f90c42dc5bc950339', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '32f0040445889329eabd3f2084890721d1799636' }))));
+            } }, h("tr", { key: 'f4ee401353ff0882aa3f9785721a44845c13ea2e' }, this.multiselect && (h("th", { key: '1a72135d5fbcc84c73aee71f6d6cf563dcef00a8', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: 'beff818341bb016234d1b2ce312c950f8be7938d', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '796c809f3238345667e724c9a416fd807cf8b218', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: 'd22a9cf5c6d23de55c184c7bec8972732ab32d49', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '8e4ff0efe17956fb9ef8bf0a21e18bcd660515da' }))));
     }
     static get is() { return "tds-table-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table-header-cell/table-header-cell.js

@@ -5,6 +5,7 @@ const relevantTableProps = [
     'compactDesign',
     'noMinWidth',
     'verticalDividers',
+    'sortColumnKey',
 ];
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the cell contents.
@@ -67,11 +68,14 @@ export class TdsTableHeaderCell {
             event.detail.changed
                 .filter((changedProp) => relevantTableProps.includes(changedProp))
                 .forEach((changedProp) => {
-                if (typeof this[changedProp] === 'undefined') {
+                if (!(changedProp in this)) {
                     throw new Error(`Table prop is not supported: ${changedProp}`);
                 }
                 this[changedProp] = event.detail[changedProp];
             });
+            if (event.detail.changed.some((changedProp) => changedProp === 'sortColumnKey' || changedProp === 'sortDirection')) {
+                this.syncSortingStateFromTable();
+            }
         }
     }
     updateOptionsContent(event) {
@@ -96,6 +100,21 @@ export class TdsTableHeaderCell {
             var _a;
             this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
         });
+        this.syncSortingStateFromTable();
+    }
+    isSortDirection(sortDirection) {
+        return sortDirection === 'asc' || sortDirection === 'desc';
+    }
+    syncSortingStateFromTable() {
+        var _a;
+        const sortDirection = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.sortDirection;
+        if (!this.sortColumnKey || !this.isSortDirection(sortDirection)) {
+            this.sortedByMyKey = false;
+            this.sortingDirection = undefined;
+            return;
+        }
+        this.sortedByMyKey = this.sortable && this.cellKey === this.sortColumnKey;
+        this.sortingDirection = this.sortedByMyKey ? sortDirection : undefined;
     }
     componentWillRender() {
         // if text alignment matches any of the acceptable values, use it. Otherwise, set "left" as default
@@ -118,7 +137,7 @@ export class TdsTableHeaderCell {
         return 'none';
     }
     render() {
-        return (h(Host, { key: '3cb5c70f8d022f7caf0cc84a23313f72d7549427', class: {
+        return (h(Host, { key: 'fa26adb6bbc2221337613d4e0cdbd9d356c97a36', class: {
                 'tds-table__header-cell': true,
                 'tds-table__header-cell--sortable': this.sortable,
                 'tds-table__header-cell--is-sorted': this.sortedByMyKey,
@@ -129,7 +148,7 @@ export class TdsTableHeaderCell {
                 'tds-table--extra-column': this.multiselect || this.expandableRows,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
                 'tds-table--no-padding': this.disablePadding,
-            } }, h("th", { key: 'cb916b84ae682283c32d733c3522bb42e686609b', style: { minWidth: this.customWidth }, onMouseOver: () => this.onHeadCellHover(this.cellKey), onFocus: () => this.onHeadCellHover(this.cellKey), onMouseLeave: () => this.onHeadCellHover(''), onBlur: () => this.onHeadCellHover(''), "aria-sort": this.getAriaSort(), colSpan: this.colSpan, rowSpan: this.rowSpan }, this.headerCellContent())));
+            } }, h("th", { key: '93d822a9b0c7fb7ef5a45a2440057afc8a8bd962', style: { minWidth: this.customWidth }, onMouseOver: () => this.onHeadCellHover(this.cellKey), onFocus: () => this.onHeadCellHover(this.cellKey), onMouseLeave: () => this.onHeadCellHover(''), onBlur: () => this.onHeadCellHover(''), "aria-sort": this.getAriaSort(), colSpan: this.colSpan, rowSpan: this.rowSpan }, this.headerCellContent())));
     }
     static get is() { return "tds-header-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -340,7 +359,8 @@ export class TdsTableHeaderCell {
             "multiselect": {},
             "enableToolbarDesign": {},
             "tableId": {},
-            "expandableRows": {}
+            "expandableRows": {},
+            "sortColumnKey": {}
         };
     }
     static get events() {
@@ -418,7 +438,7 @@ export class TdsTableHeaderCell {
     static get elementRef() { return "host"; }
     static get listeners() {
         return [{
-                "name": "internalTdsPropChange",
+                "name": "internalTdsTablePropChange",
                 "method": "internalTdsPropChangeListener",
                 "target": "body",
                 "capture": false,

package/dist/collection/components/table/table-header-input-wrapper/table-header-input-wrapper.js

@@ -64,7 +64,7 @@ export class TdsTableHeaderInputWrapper {
         }
     }
     render() {
-        return (h(Host, { key: '43bff4694595b6b6355ca05af951b9a31f27ee35', class: {
+        return (h(Host, { key: '524d664d605a1cefb1fc700cf62a31976e85de2c', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,

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

@@ -73,10 +73,10 @@ export class TdsTableToolbar {
         return styles;
     }
     render() {
-        return (h(Host, { key: 'b98524b265ec24c7204f78fdba7298806488c5cd', class: {
+        return (h(Host, { key: '82de92eb66d3592648321ec69f571a7f8562870d', class: {
                 'tds-table--compact': this.compactDesign,
                 'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: '474eb3d4623e98f69094a9d5c6942fa2bef05fd2', class: "tds-table__upper-bar-flex" }, h("div", { key: 'f616780361cc2101ddb2e0e9d112cd596f4a91ed', class: "tds-table__actionbar-left" }, this.tableTitle && (h("caption", { key: '0a8a2e7330352f0c8bce0f29f43f6f5bb7a4204a', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), h("slot", { key: 'fe7312c205337614665ac25824bfd27c7d9cadc8', name: "start" })), h("div", { key: '95af8f20377ecc20417a8e51dd1e2e619c1eeb21', class: "tds-table__actionbar" }, this.filter && (h("div", { key: '798d8ff8fe3008f09018c095c8b07e2a6df17aa7', class: "tds-table__searchbar" }, h("input", { key: 'e152dc0fcbb47e181788ebbe57ac751332d5cb4c', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: 'fc6a824134d9a41b1aa6864238e0ad37793003ac', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '8ed3d82df541b903c9b6d8e36e172ce15c2d5f54', name: "search", size: "20px" })))), h("slot", { key: 'de8d5e9242b9bb1de8a8254cd08fdd41eb76a5e5', name: "end" })))));
+            }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: '87aff8f8230e0289217e9b4ba276fd90adeed20d', class: "tds-table__upper-bar-flex" }, h("div", { key: 'c4cd83ece587f591ac7532580cd6d52f82be3cf6', class: "tds-table__actionbar-left" }, this.tableTitle && (h("caption", { key: '5305f59a0e6c97dded2cf07fe78738d829ea862e', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), h("slot", { key: 'c76b2d1bd6dcc3ae00cbe8ebc217e3de2b77a16e', name: "start" })), h("div", { key: 'f06062c8f1c11ff05d41aa6b2a5811899036b240', class: "tds-table__actionbar" }, this.filter && (h("div", { key: '0b59c9b54861d4c02a5ec0861d52120f834f1208', class: "tds-table__searchbar" }, h("input", { key: '6b06fb4aa86958c44c7fc8d1eeaa5bd895e52b82', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: '3ee299d71b855f904b8b478d8d58e058aefd66b8', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '7beaa148dfa57c227534c5015a2c6ccd924bb921', name: "search", size: "20px" })))), h("slot", { key: '0d88dc478526afcfe25dc56b9d3b8426c48ba8a7', name: "end" })))));
     }
     static get is() { return "tds-table-toolbar"; }
     static get encapsulation() { return "shadow"; }

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-tab/folder-tab.js

@@ -35,10 +35,10 @@ export class TdsFolderTab {
         }
     }
     render() {
-        return (h(Host, { key: '5d7bdff1bc18639ce28722cf817d45e2819291fe', "aria-selected": this.selected }, h("div", { key: '82fb790518a8d3f6c9427c3dd3cbd804fb54ad4f', class: {
+        return (h(Host, { key: '5b4c8d2ab085c9be43403c2330ffb1dfd187cd08', "aria-selected": this.selected }, h("div", { key: 'dadda798fcce1cc0dc47ebbf50ce1c9b439052ab', class: {
                 selected: this.selected,
                 disabled: this.disabled,
-            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: 'fdd78b5c0c9852e587c18d8c5870e00975b62896' }))));
+            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '4b4a1ee2671fb5b298588a74c44b056bb58081d5' }))));
     }
     static get is() { return "tds-folder-tab"; }
     static get encapsulation() { return "shadow"; }

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/folder-tabs/folder-tabs.js

@@ -45,7 +45,7 @@ export class TdsFolderTabs {
         };
         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({
@@ -60,7 +60,6 @@ export class TdsFolderTabs {
                 };
                 item.addEventListener('click', clickHandler);
                 this.clickHandlers.set(item, clickHandler); // Store the handler in WeakMap
-                return item;
             });
         };
         this.removeEventListenerFromTabs = () => {
@@ -178,9 +177,9 @@ export class TdsFolderTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: 'c012eb13a3d87fd700f5aeebda39b5eab29ef867', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'ebee1cf15b1c7425fb675cceedfdbdedacdf7057', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '5a514ad6fbd392b08496a09a20598ef5475094c8', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'fa544277ee2adb5b4cda82972e4027cf411fa9d1', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: 'f91db438a2374acc0569bccb5895b0061816cdb2', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '497c2b7709f37f12d6c507f9ef4a55851bcfad78', name: "chevron_left", size: "20px" })), h("slot", { key: '1b8be04cceec4793fffac9cf26ba603dd578299d', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '210096e3f848f40fc3a976bfbeb76f623e06c2bc', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'c1235de0754f7df8418b1609a713e2766be059bd', name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: 'cb2b3bb4d4bc420c4a916e6731c226bc3ebd8c6b', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '2cfece96b48343b5caa87952457439932e178eda', name: "chevron_left", size: "20px" })), h("slot", { key: '2813c0254fd9a8fbce52e4c1d27b8eb344314137', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '08e2612873a7311ff35a0fecc1e72bb020a30cf3', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'd90995179f38202e249a889ce9e909d9218184e0', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-folder-tabs"; }
     static get encapsulation() { return "shadow"; }

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-tab/inline-tab.js

@@ -31,11 +31,11 @@ export class TdsInlineTab {
         }
     }
     render() {
-        return (h(Host, { key: 'c7bb79b69d733103faad0e36f7967123a2323ebd', "aria-selected": this.selected }, h("div", { key: '5b03665929273d87f3fb584e8a44937f81ccf20f', class: {
+        return (h(Host, { key: 'cddeb55abe1eca0ffeb7bbd3e8b773868aacea9a', "aria-selected": this.selected }, h("div", { key: 'e53a5dd3857c24301858678735f18e398f3e44c4', class: {
                 'inline-tab-item': true,
                 'selected': this.selected,
                 'disabled': this.disabled,
-            } }, h("slot", { key: '360210a7e2c66fde62d4531aef7894b82d9f5605' }))));
+            } }, h("slot", { key: 'bebb2c7a36479a9f2139420c7b6aafa89b1d03e7' }))));
     }
     static get is() { return "tds-inline-tab"; }
     static get encapsulation() { return "shadow"; }

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/inline-tabs/inline-tabs.js

@@ -46,7 +46,7 @@ export class TdsInlineTabs {
         };
         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 TdsInlineTabs {
                 };
                 item.addEventListener('click', clickHandler);
                 this.clickHandlers.set(item, clickHandler); // Store the handler in WeakMap
-                return item;
             });
         };
         this.removeEventListenerFromTabs = () => {
@@ -179,9 +178,9 @@ export class TdsInlineTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: 'b4d7b5c75a8e81e49fdb392580852077a44ebe0c', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}`, style: { '--padding-left': `${this.leftPadding}px` } }, h("div", { key: '3be2477f0c9f24987aa9b0ca5c43c05fb19a32e3', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '38532db9803b29ef6de96f338c14c35b4205b5d7', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}`, style: { '--padding-left': `${this.leftPadding}px` } }, h("div", { key: 'd093194a98d9c92223bd5db6419ad90a984d9238', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: 'e6252b0e4bd02809a09db1183fe7dbea91103cbf', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'd4ce2393b25f728ac2de1702d144f612902dc330', name: "chevron_left", size: "20px" })), h("slot", { key: 'd079e254442795f81737b5552ce5ce177683c9fb', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '5e3db06d48f3109550974ba0675aef8367373df7', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: 'cd00e5c5ad1b757104d5c3f7338a45c9243eb25d', name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: '24a52205d7b5bd708397a26ad9749cfd8b121262', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '28006de41f8488e74711b6dfd82ebb29507d78c8', name: "chevron_left", size: "20px" })), h("slot", { key: '7f8cea1755acf76a987d716fe293585f936c4bfa', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'bacebe334ce63ff55cdb38ef5ab32b88fef72151', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: 'c0f5a5ed3ad7c2ebcb059d01542a7b6c69ac6529', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-inline-tabs"; }
     static get encapsulation() { return "shadow"; }

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-tab/navigation-tab.js

@@ -31,8 +31,8 @@ export class TdsNavigationTab {
         }
     }
     render() {
-        return (h(Host, { key: '3fb20c6c5e5839eafbd7acc8e63d9b9ffeb531bd' }, h("div", { key: 'c04745d7b4bb9dc4efb3aa17a27f57a3219ac0d0', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
-           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '2bdb886f7e601878878f77a1ee6e68f3b34a25e9' }))));
+        return (h(Host, { key: '7a5504183a5719b59900c52e6193755245e6caf9' }, h("div", { key: '5c514ced6f952df12067c414396ce2b8398c6cb9', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
+           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '382acd34bdd7a3a7be15fb539978be51c5040482' }))));
     }
     static get is() { return "tds-navigation-tab"; }
     static get encapsulation() { return "shadow"; }

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;
 }