@scania/tegel 1.53.0 → 1.54.0

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

@@ -17,10 +17,10 @@ body {
 .tds-modal {
   box-sizing: border-box;
   box-shadow: var(--tds-modal-box-shadow);
-  background-color: var(--background-elevation-layer-02);
+  background-color: var(--tds-modal-background);
   margin: auto;
   position: relative;
-  border-radius: var(--radius-narrow);
+  border-radius: var(--tds-modal-border-radius);
   max-height: 85vh;
   overflow-y: auto;
   pointer-events: auto;
@@ -30,6 +30,7 @@ body {
 }
 .tds-modal:hover::-webkit-scrollbar-thumb {
   border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
+  border-radius: var(--tds-scrollbar-hover-thumb-border-radius);
   background-clip: padding-box;
 }
 .tds-modal::-webkit-scrollbar {
@@ -39,7 +40,7 @@ body {
   background: var(--tds-scrollbar-track-color);
 }
 .tds-modal::-webkit-scrollbar-thumb {
-  border-radius: 40px;
+  border-radius: var(--tds-scrollbar-thumb-border-radius);
   background: var(--tds-scrollbar-thumb-color);
   border: var(--tds-scrollbar-thumb-border-width) solid transparent;
   background-clip: padding-box;
@@ -73,13 +74,13 @@ body {
   bottom: -1px;
   left: 0;
   right: 0;
-  background-color: var(--background-elevation-layer-02);
+  background-color: var(--tds-modal-background);
   padding: 24px 16px 16px;
   display: flex;
   gap: 16px;
 }
 .tds-modal__actions-static slot[name=actions] {
-  background-color: var(--background-elevation-layer-02);
+  background-color: var(--tds-modal-background);
   display: flex;
   gap: 16px;
   padding: 24px 16px 16px;
@@ -173,7 +174,7 @@ body {
   padding: 16px;
   position: sticky;
   top: 0;
-  background-color: var(--background-elevation-layer-02);
+  background-color: var(--tds-modal-background);
   z-index: 1;
 }
 .header .header-text {
@@ -183,7 +184,7 @@ body {
   font-weight: var(--headline-05-font-weight);
   letter-spacing: var(--headline-05-letter-spacing);
   text-transform: var(--headline-05-text-transform);
-  color: var(--foreground-text-strong);
+  color: var(--tds-modal-text-color);
   margin: 0;
   flex: 1;
 }
@@ -195,12 +196,13 @@ body {
   font-weight: var(--body-01-font-weight);
   letter-spacing: var(--body-01-letter-spacing);
   text-transform: var(--body-01-text-transform);
-  color: var(--foreground-text-strong);
+  color: var(--tds-modal-body-text-color);
   overflow-y: visible;
   padding: 0 16px 16px;
 }
 .body:hover::-webkit-scrollbar-thumb {
   border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
+  border-radius: var(--tds-scrollbar-hover-thumb-border-radius);
   background-clip: padding-box;
 }
 .body::-webkit-scrollbar {
@@ -210,7 +212,7 @@ body {
   background: var(--tds-scrollbar-track-color);
 }
 .body::-webkit-scrollbar-thumb {
-  border-radius: 40px;
+  border-radius: var(--tds-scrollbar-thumb-border-radius);
   background: var(--tds-scrollbar-thumb-color);
   border: var(--tds-scrollbar-thumb-border-width) solid transparent;
   background-clip: padding-box;
@@ -248,12 +250,12 @@ button.tds-modal-close {
 .tds-modal-close {
   display: inline-block;
   height: auto;
-  color: var(--foreground-text-strong);
+  color: var(--tds-modal-text-color);
   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;
 }
@@ -285,7 +287,7 @@ button.tds-modal-close {
   }
 }
 .tds-modal-close-btn svg {
-  fill: var(--foreground-text-strong);
+  fill: var(--tds-modal-icon-color);
 }
 
 .tds-modal-overflow {

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

@@ -254,10 +254,10 @@ export class TdsModal {
         const usesHeaderSlot = hasSlot('header', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
         const hasLabel = this.header || usesHeaderSlot;
-        return (h(Host, { key: '9b6d05e3f91850245f4e5de015286ccf46acdbd4', class: {
+        return (h(Host, { key: '20741ea474c8b88e25a59068cd10100261d63451', class: {
                 show: this.isShown,
                 hide: !this.isShown,
-            }, 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" }))));
+            }, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: '2c6c1c5320497a3ed90bbc46a9d9ca3ed914d4e6', class: "tds-modal-backdrop" }), h("div", { key: '659497b7a21b93ba848057156b1a3067f5d78794', 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: 'd037cdebcd50b2f7c3f55b5df8e0ed68a7be012d', class: "header" }, this.header && (h("h1", { key: '8afef0fc7e08b2539ad52d6ca5ca642c453a62d9', id: this.headerId, class: "header-text" }, this.header)), usesHeaderSlot && h("slot", { key: '61452661a701b7bf009ffc742a06e67153c49b5d', name: "header" }), this.closable && (h("button", { key: 'e463fc6163130169a07e4a6862c54f77b71c708e', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: '7d2a6bbba2250ff93a22e3df4fcffc85d4393d9d', name: "cross", size: "20px" })))), h("div", { key: 'a20383b91b69484dbe33b7359fd0ac54b4f6e542', id: this.bodyId, class: "body" }, h("slot", { key: '0372c76d89764c5dac0facca7c70599b982447de', name: "body" })), usesActionsSlot && h("slot", { key: 'e1aff202176a07dff1d70e9cca4ba93d4de9ed73', name: "actions" }))));
     }
     static get is() { return "tds-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,14 +38,14 @@ export class TdsPopoverCanvas {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'bfab646964c673386c09f964c5119348bf7fd868', class: {
+        return (h(Host, { key: '56d63ac8d00f859fce3f2eb8d5a3845701ff7f07', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, h("tds-popover-core", Object.assign({ key: '503a2debd5aa19107b2e958490263fdd699d4bf0', role: this.tdsAlertDialog }, this.inheritedAttributes, { class: {
+            } }, h("tds-popover-core", Object.assign({ key: '228c7c29df9f6a4058518d9d2a12b199acf2c89e', role: this.tdsAlertDialog }, this.inheritedAttributes, { class: {
                 'tds-popover-canvas': true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
             }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, modifiers: this.modifiers, trigger: 'click', ref: (el) => {
                 this.childRef = el;
-            }, defaultShow: this.defaultShow, animation: this.animation }), h("div", { key: '15ded176e4c3d6dc4c78a6ac4a34c2988444cace' }, h("slot", { key: '8221b5be15db24110562977cf7280302ac406de3' })))));
+            }, defaultShow: this.defaultShow, animation: this.animation }), h("div", { key: 'd38e0821b9c629af860ae1523d6babaa3401747b' }, h("slot", { key: 'a5c8a84c29c1293dea5b99bea34c6a72122c15f0' })))));
     }
     static get is() { return "tds-popover-canvas"; }
     static get encapsulation() { return "scoped"; }

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

@@ -236,7 +236,7 @@ export class TdsPopoverCore {
             'tds-animation-exit-fade': !this.isShown && this.animation === 'fade',
         };
         const classList = generateClassList(classes);
-        return (h(Host, { key: 'fdf71a3d32da460b0361bac28483955805e448db', role: this.host.getAttribute('role'), class: classList, id: `tds-popover-core-${this.uuid}` }, h("slot", { key: 'd2b28bcc7f618edcf5c6acac39806b24e31538b0' })));
+        return (h(Host, { key: '66b8fca6df92885f68b18ce426235de71a283bdf', role: this.host.getAttribute('role'), class: classList, id: `tds-popover-core-${this.uuid}` }, h("slot", { key: '57ff15f7fe4f5404cdac9c58cf5e4f074054b690' })));
     }
     static get is() { return "tds-popover-core"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/popover-menu/popover-menu-item/popover-menu-item.js

@@ -5,10 +5,10 @@ export class TdsPopoverMenuItem {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: 'd9c07d0eddc8991d88566d050a6642dfd712b1e2', role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: 'd2d32632e70b207dff4bc0d6616e17abaff6f3a8', class: {
+        return (h(Host, { key: '4430006568263a71e6e1d1430bae39e41632a9a1', role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: '0e93bdfe29a0b9cf40450f0509004529c029d8ed', class: {
                 wrapper: true,
                 disabled: this.disabled,
-            } }, h("slot", { key: '725c727348687e663e6225837a2a135d177b6d4a' }))));
+            } }, h("slot", { key: 'b7e7f60a411dcb6e1dfc9869ab71963981b509c8' }))));
     }
     static get is() { return "tds-popover-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,15 +36,15 @@ export class TdsPopoverMenu {
     }
     render() {
         var _a;
-        return (h(Host, { key: '64ec6f8414b86992f27ff31ec121691a95473803', class: {
+        return (h(Host, { key: 'e71360b2b92f4e3169d6cfb44ed38d2fe58bc0b0', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, h("tds-popover-core", { key: '258d5feba20e366b690fb0b168686cd7525cfd7c', class: {
+            } }, h("tds-popover-core", { key: '654e0e5a910573029f358e1b8b32e439b775d089', class: {
                 'tds-popover-menu': true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
                 'fluid-width': this.fluidWidth,
             }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, ref: (el) => {
                 this.childRef = el;
-            }, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: 'fad95fd95dcfff966690a5617421b06de8c5ebc6', role: "menu" }, h("slot", { key: 'ae26c985ac08249cfca316afdce6e870be3650e4' })))));
+            }, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: '4c51db7d403f1797f6d101a5a0af11b54ab20c23', role: "menu" }, h("slot", { key: '953b09a826b6fb5a5b8537b07eb383737f5232f1' })))));
     }
     static get is() { return "tds-popover-menu"; }
     static get encapsulation() { return "scoped"; }

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

@@ -27,10 +27,10 @@ export class TdsRadioButton {
         }
     }
     render() {
-        return (h("div", { key: 'a3229a9edf154a3e32b78e0733ad5a62becef457', class: "tds-radio-button" }, h("input", { key: 'a71bb9cc727bf29e9926fe5c862bda5e5bfeeccd', ref: (inputEl) => {
+        return (h("div", { key: 'bfa799e8b8659e2a7262b239bdcc2535776fc9b3', class: "tds-radio-button" }, h("input", { key: '5f0b88e6e2d1af55fb8c47edfd378e422bf9a38c', ref: (inputEl) => {
                 if (inputEl)
                     this.inputElement = inputEl;
-            }, "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange(), tabIndex: this.tdsTabIndex }), h("label", { key: '485aa7388b35ad21ef70e1c7b57f68fcd01d3f75', htmlFor: this.radioId }, h("slot", { key: '429a9107b3a39af5aa731116e1961821a90852f4', name: "label" }))));
+            }, "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange(), tabIndex: this.tdsTabIndex }), h("label", { key: '345dc77a437f9e4bd9936fadf8c774c5aa56fd5b', htmlFor: this.radioId }, h("slot", { key: 'a5828506e8b5f408a0873cdcb9a57a68f27b0351', name: "label" }))));
     }
     static get is() { return "tds-radio-button"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/side-menu/side-menu-close-button/side-menu-close-button.js

@@ -12,7 +12,7 @@ export class TdsSideMenuCloseButton {
         const sideMenuEl = this.host.closest('tds-side-menu');
         const sideMenuId = sideMenuEl ? sideMenuEl.id : '';
         const buttonProps = Object.assign(Object.assign(Object.assign({ 'aria-label': 'Close' }, (sideMenuId && { 'aria-controls': sideMenuId })), inheritAriaAttributes(this.host)), { 'onClick': TdsSideMenuCloseButton.handleClick });
-        return (h(Host, { key: '3f7eef53ce8d066635998152e1684bd8a0034bbb' }, h("button", Object.assign({ key: '71029ead3db82331818f75bc165f4aaa85de4db3' }, buttonProps), h("tds-icon", { key: 'eb93cbf265c4a57f02a1457e65379c872bd442f5', name: "cross", size: "20px", svgTitle: "Cross" }))));
+        return (h(Host, { key: 'a80081722122221e86fa54f3813cc0c07d786cac' }, h("button", Object.assign({ key: 'a992413c973d0288aafda2ac7f4ea803597ec58d' }, buttonProps), h("tds-icon", { key: 'f94e646b7106e5c85766fa9d6ecec523f97e75ee', name: "cross", size: "20px", svgTitle: "Cross" }))));
     }
     static get is() { return "tds-side-menu-close-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu-collapse-button/side-menu-collapse-button.js

@@ -29,12 +29,12 @@ export class TdsSideMenuCollapseButton {
         this.collapsed = !!((_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed);
     }
     render() {
-        return (h(Host, { key: 'af4793f3c8b8c5cc028ebcc26ddbfcc33ae1471e' }, h("div", { key: '2f1b46a087dce36ca41171f93643c1f6216aeac7', class: {
+        return (h(Host, { key: '59f91f966f40d58d3681e3c5b33dbfc967395855' }, h("div", { key: 'affa1128cba719622182b54cea5bac8a38533078', class: {
                 'wrapper': true,
                 'state-collapsed': this.collapsed,
-            } }, h("tds-side-menu-item", { key: '17de6280d2f2e695592d4e44b5918c3860d3fe80', class: { button: true } }, h("button", { key: '6d9fdaa1c0006305e1ff1388311e94b5868bbc3f', type: "button", "aria-expanded": !this.collapsed ? 'true' : 'false', onClick: () => {
+            } }, h("tds-side-menu-item", { key: '8db28ce899b50691ee207e646cf3aeaa110776d3', class: { button: true } }, h("button", { key: 'e115958e959fcf5eee38432cf6ea273c336b9385', type: "button", "aria-expanded": !this.collapsed ? 'true' : 'false', onClick: () => {
                 this.handleClick();
-            } }, h("svg", { key: 'ad898232c2d2965b08eb2a44d19d65c0039ff298', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '5f6e67ff24fa04d193efebadec616feb6c0d6683', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), !this.collapsed && h("slot", { key: '3793bcbed80fac4010820fbfd6752083e74a93d7' }))))));
+            } }, h("svg", { key: '87abc0c869f4724a23c1f7773f552040a0b55d9c', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '24b1125910d89627e206b9cd66eab1729a378970', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), !this.collapsed && h("slot", { key: 'c8f86c70c764bba8c3275838c9da69ef37e20719' }))))));
     }
     static get is() { return "tds-side-menu-collapse-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu-dropdown/side-menu-dropdown.js

@@ -62,13 +62,13 @@ export class TdsSideMenuDropdown {
         this.open = this.defaultOpen;
     }
     render() {
-        return (h(Host, { key: '50c612a2b879888b42b82ec240278387ffda56df' }, h("div", { key: '23d34aac941bee3c0f7e7453b8648dfaceb5fafd', class: {
+        return (h(Host, { key: '3b981429fcffc3beeaf27fc02749c1f91e2ad0a7' }, h("div", { key: 'fa903821594e9455976a95a106567ce201fff460', class: {
                 'wrapper': true,
                 'state-open': this.getIsOpenState(),
                 'state-collapsed': this.collapsed,
-            } }, h("tds-side-menu-item", { key: '6cb6ef033a8a01bb2baf0b1350499130774a848d', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
+            } }, h("tds-side-menu-item", { key: '7311dba31c07faf5e3ab6e8fbe43098e3cd4729e', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
                 this.open = !this.open;
-            }, "aria-expanded": this.getIsOpenState() ? 'true' : 'false' }, h("button", { key: '1fa2e1851fdf25882eec6e4cb6e6900b5fdbfa6b' }, h("slot", { key: '06288061e3bb3ccd7124352d66bbcca3614e86bc', name: "icon" }), !this.collapsed && (h(Fragment, { key: 'bcd4934b4760634a04694f46d22bb09c4f7cb71e' }, this.buttonLabel, h("slot", { key: 'e2891dc859881c40b9577e07535f0c84c2d0f5a7', name: "label" }), h("tds-icon", { key: 'fa3257d02ad80e08485fe731915b76ba0241e976', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Chevron Down" }))))), h("div", { key: 'a708a6796fec8851df925da395e011a90e3da118', class: "menu", tabindex: this.collapsed ? '0' : undefined }, this.collapsed && (h("h3", { key: '5efc24406b5933e512bafd39e5aee55c1e342403', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: 'bfa6381aeb8b9d5ce937d6687d9f8eb08166aa37', name: "label" }))), h("slot", { key: '3d8266b0e0b37a00f389a0cd126920bac15f9532' })))));
+            }, "aria-expanded": this.getIsOpenState() ? 'true' : 'false' }, h("button", { key: 'cdce10537cd846ef7bee33f13ed582d7a39d6784' }, h("slot", { key: '9bb1ea14f3420971368e20e2483d75d23510cecf', name: "icon" }), !this.collapsed && (h(Fragment, { key: '0b3af3ca2a2634c2d03d454a03d293e49d77dd2f' }, this.buttonLabel, h("slot", { key: '7d73d0a257727105e1277655490857f6fddf8ad3', name: "label" }), h("tds-icon", { key: 'f6e4df62b16bf9311c440c20bd23511747994b16', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Chevron Down" }))))), h("div", { key: 'fb2c087d9cd78f65e3bfa5855c6225b37678c8aa', class: "menu", tabindex: this.collapsed ? '0' : undefined }, this.collapsed && (h("h3", { key: '54839ed4efcbe4f8d47427f2060fd28c1ed44024', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: 'd46bcd0a83719e0726c7a154344fccaa7f7a930c', name: "label" }))), h("slot", { key: '17e538b327856f34df06abff4038b702a28c8407' })))));
     }
     static get is() { return "tds-side-menu-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu-dropdown-list/side-menu-dropdown-list.js

@@ -15,9 +15,9 @@ export class TdsSideMenuDropdownList {
         this.collapsed = !!((_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed);
     }
     render() {
-        return (h(Host, { key: 'be6eed63bf245e92c16a6ff6eae4df18dbaf66fa', role: "list", "aria-expanded": !this.collapsed ? 'true' : 'false' }, h("div", { key: '40ea53b550c7d0b73cc678f0a10fa144f4dd67f1', class: {
+        return (h(Host, { key: 'd985f058553315e92f7954d3f78938a2f0f409fb', role: "list", "aria-expanded": !this.collapsed ? 'true' : 'false' }, h("div", { key: '9509f0eb97e2c69e6ea8c5aac4369557967de871', class: {
                 'state-collapsed': this.collapsed,
-            } }, h("slot", { key: '73460a96d9b3e4ebacaf6ac5f21061c091eed16e' }))));
+            } }, h("slot", { key: 'c893832f1bdb8556dd856ce3ef02e53174b216a3' }))));
     }
     static get is() { return "tds-side-menu-dropdown-list"; }
     static get encapsulation() { return "shadow"; }

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-dropdown-list-item/side-menu-dropdown-list-item.js

@@ -38,13 +38,13 @@ export class TdsSideMenuDropdownListItem {
         }
     }
     render() {
-        return (h(Host, { key: '4eae7681164a0f704d68968ad5de8891a85ed00f', role: "listitem" }, h("div", { key: 'c379c94a80baf76e17ced30f79b261f601f6947b', class: {
+        return (h(Host, { key: '389c5c54a7ea7c93b693a0b26999c61eea342c29', role: "listitem" }, h("div", { key: '8602175fba3ef6e2b63105f6eb98228e616e279f', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-dropdown-has-icon': this.dropdownHasIcon,
                 'component-dropdown-has-user': this.dropdownHasUser,
                 'component-collapsed': this.collapsed,
-            } }, h("slot", { key: 'a0d00e60086cc058eebbb0a48bb69cc77159f689' }))));
+            } }, h("slot", { key: '015bbc6eed42e13af47829d5b794412140de3f7d' }))));
     }
     static get is() { return "tds-side-menu-dropdown-list-item"; }
     static get encapsulation() { return "shadow"; }

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/side-menu/side-menu-item/side-menu-item.js

@@ -78,13 +78,13 @@ export class TdsSideMenuItem {
         this.updateHasUserComponent();
     }
     render() {
-        return (h(Host, { key: '8c8308b82ed3a2f9161c155310d30746a873b797' }, h("div", { key: '1ee193c4e152bd02a7fd38c3bc173cfcab074e60', class: {
+        return (h(Host, { key: 'a3d78ce2c19b640d7040f30bc40d8c3ddeb48713' }, h("div", { key: '4f468a980cba48b02e5acae58905afbafc5d9304', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-active': this.active,
                 'component-collapsed': this.collapsed,
                 'component-has-user': this.hasUserComponent,
-            } }, h("slot", { key: '4abf87af30fb22e159a2874b499b756097ff821f' }))));
+            } }, h("slot", { key: 'f260f260f7914d3a4cb983d66da4729e40cb458e' }))));
     }
     static get is() { return "tds-side-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu-overlay/side-menu-overlay.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class TdsSideMenuOverlay {
     render() {
-        return (h(Host, { key: '693cd7bcfce973514588c8dfc0539842ace940f9' }, h("div", { key: 'c28a261eec2eac0fe59cae512b32262ed5da4388' })));
+        return (h(Host, { key: '9411dd666b13dd136817d7e68479288f2e02cbc0' }, h("div", { key: '2275c980cfa9c5de70bfacd5447e718ecfeb301c' })));
     }
     static get is() { return "tds-side-menu-overlay"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu-user/side-menu-user.js

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  * */
 export class TdsSideMenuUser {
     render() {
-        return (h(Host, { key: '85fe09b4f6ac3b7d99da2d6256c758900329653a' }, h("tds-side-menu-user-image", { key: '236bce6eb1c8c09b7eb8473cdf9d62e882cf4e12', src: this.imgSrc, alt: this.imgAlt }, h("slot", { key: '1cf9eca61491dd7f8a4d7a63e3eaeb6e6f64e625', name: "image" })), h("tds-side-menu-user-label", { key: '0f202ad7a287f3c3eae6c87bc7880fd03a183969', heading: this.heading, subheading: this.subheading })));
+        return (h(Host, { key: 'ac72381d5a600698ac717ef744c229193363e242' }, h("tds-side-menu-user-image", { key: '030471a55c8b9025db44465a25909e41cb3afee7', src: this.imgSrc, alt: this.imgAlt }, h("slot", { key: '06f493b819882f1dbdcf75955ddee998f4899572', name: "image" })), h("tds-side-menu-user-label", { key: '9a4a6cafebdca7d879a02522d84825f2454b3cf6', heading: this.heading, subheading: this.subheading })));
     }
     static get is() { return "tds-side-menu-user"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu-user-image/side-menu-user-image.js

@@ -8,7 +8,7 @@ import { h, Host } from "@stencil/core";
  * */
 export class TdsSideMenuUserImage {
     render() {
-        return (h(Host, { key: 'f78e0b98c33d88edc6bb504885337549b8cebe60' }, h("slot", { key: 'ece4fa7ee4c13ff527e1eb2651572588a314e44a' }), this.src && h("img", { key: 'ab7e321744f5a62ab536ba5e1c3777d2da7d697d', src: this.src, alt: this.alt })));
+        return (h(Host, { key: '1d8f78a011fcd03634ba078d81e92a5e46e30af5' }, h("slot", { key: '351a67a342ccf1b8d4cb3d742b31a82b898292ab' }), this.src && h("img", { key: 'a760e7d8fec23ee93f00774f06d89f1ee76caf27', src: this.src, alt: this.alt })));
     }
     static get is() { return "tds-side-menu-user-image"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu-user-label/side-menu-user-label.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class TdsSideMenuUserLabel {
     render() {
-        return (h(Host, { key: 'ac320a04f923e14ed85b18f685221ba7fbcb0256' }, this.heading, this.subheading && h("div", { key: '23446674db52cb9543c4840adba225303a061e27', class: "subheading" }, this.subheading)));
+        return (h(Host, { key: 'b1d35aa06395d95164b290bb01650f3e8d89309c' }, this.heading, this.subheading && h("div", { key: '61bc8288b0f2e91c2ab3431f64ce43cc673d7d02', class: "subheading" }, this.subheading)));
     }
     static get is() { return "tds-side-menu-user-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -125,6 +125,7 @@ aside .tds-side-menu-wrapper {
 }
 aside .tds-side-menu-wrapper:hover::-webkit-scrollbar-thumb {
   border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
+  border-radius: var(--tds-scrollbar-hover-thumb-border-radius);
   background-clip: padding-box;
 }
 aside .tds-side-menu-wrapper::-webkit-scrollbar {
@@ -134,7 +135,7 @@ aside .tds-side-menu-wrapper::-webkit-scrollbar-track {
   background: var(--tds-scrollbar-track-color);
 }
 aside .tds-side-menu-wrapper::-webkit-scrollbar-thumb {
-  border-radius: 40px;
+  border-radius: var(--tds-scrollbar-thumb-border-radius);
   background: var(--tds-scrollbar-thumb-color);
   border: var(--tds-scrollbar-thumb-border-width) solid transparent;
   background-clip: padding-box;

package/dist/collection/components/slider/slider.js

@@ -459,30 +459,30 @@ export class TdsSlider {
     }
     render() {
         const ariaLabel = this.readOnly ? this.tdsReadOnlyAriaLabel : this.label || this.tdsAriaLabel;
-        return (h("div", { key: '8b3642548f48ff352395b4d3ebdf84abf464b51d', class: {
+        return (h("div", { key: '6e6e00002da855b43067454de0a55af6802bdad0', class: {
                 'tds-slider-wrapper': true,
                 'read-only': this.readOnly,
-            } }, h("input", { key: '9f35e897044114dd9a5c97a66e9a335d4c09975d', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled }), h("div", { key: '74fe5f97050ae8fa970d0d2d00145a1f20b9d728', class: "sr-only", "aria-live": "assertive", ref: (el) => {
+            } }, h("input", { key: '4d7f1b28864c9cca7c3183f4531aac19917f0fa9', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled }), h("div", { key: '6bac81bc86f6d00f5961211ec401689e67f5a720', class: "sr-only", "aria-live": "assertive", ref: (el) => {
                 this.ariaLiveElement = el;
-            } }), h("div", { key: '2af5ddfcb4cceb921ca8299438b6bc9b40bf1dd6', class: {
+            } }), h("div", { key: '7d4ac685ad9f519eb6007ba1ef4bc6ab9ff58a9b', class: {
                 'tds-slider': true,
                 'disabled': this.disabled,
                 'tds-slider-small': this.useSmall,
             }, ref: (el) => {
                 this.wrapperElement = el;
-            }, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: '7461b0e104ee03cf51c9e84ab8af06df78b6b12b', id: `${this.sliderId}-label`, class: { offset: this.showTickNumbers } }, this.label), this.useInput && (h("div", { key: 'ce065240c807cf75544efd3ecc2c5b1b45e0b987', class: "tds-slider__input-values" }, h("div", { key: 'ac8b1a0d7cd44e079e7739e9697912a7f8c65c62', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: 'e85dfafe22e306fa8f9c2a0ee2c094caa0937abf', class: "tds-slider__controls" }, h("div", { key: 'b21861744b1ba29cc6d5566d2d466c507b55f54e', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event), role: "button", "aria-label": "Decrease value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: 'b31ed68e1b5a96d85951c928abf4dae472889050', name: "minus", size: "16px" })))), h("div", { key: 'b4c46afe353a403e2f2ebb35e40bad3946f83e23', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: '0c4662ea24810f52b6415f4bf205e1dff4250d7c', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '39f70859eecd83a4f962288e7d06f61719260297', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: '9f6214318aaaec0c792a94b3241dbcd9ce321130', class: "tds-slider__track", ref: (el) => {
+            }, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: '5338721c62889199ee0ecad2632eac2fd37485d0', id: `${this.sliderId}-label`, class: { offset: this.showTickNumbers } }, this.label), this.useInput && (h("div", { key: '5ee4f8ac092f9ea0aa5f687b98e294955fe062c1', class: "tds-slider__input-values" }, h("div", { key: '97e64f78a68451a2186372264e3e1503954bb67c', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '89c03fd539fdcd689f7d76e1ed9beb8188e61f69', class: "tds-slider__controls" }, h("div", { key: '82c8b4780f47925918a16cc11e4bf7a37b9de687', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event), role: "button", "aria-label": "Decrease value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: 'e190b8ec6e617ea516a022d55e8075c4eb796507', name: "minus", size: "16px" })))), h("div", { key: '5b4f71b02daa36e964df0af18124217f217fce78', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: '1d6d917ab5107a47852a16988f621b62e57a5795', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '133fd1ed3c566377f524b683a15aaa831aa03f40', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: '40f727734b17f3933e0f7bc179354e205534af8d', class: "tds-slider__track", ref: (el) => {
                 this.trackElement = el;
             }, tabindex: this.disabled ? '-1' : '0', role: "presentation", onFocus: () => {
                 if (this.thumbElement) {
                     this.thumbElement.focus();
                 }
-            } }, h("div", { key: 'd70dbc3e02dda21538a1c709ee9fb94bf1517766', class: "tds-slider__track-fill", ref: (el) => {
+            } }, h("div", { key: 'b6b56223be25e8493e0884c5fb2f4ef786fb4a87', class: "tds-slider__track-fill", ref: (el) => {
                 this.trackFillElement = el;
-            } }), h("div", { key: 'aa5ceb99150a8387e9b01becd054e3beee185955', class: "tds-slider__thumb", ref: (el) => {
+            } }), h("div", { key: '74890de4d56ca2fa851212adeccb745c48b7b659', class: "tds-slider__thumb", ref: (el) => {
                 this.thumbElement = el;
-            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb(), role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} of ${this.max}`, "aria-labelledby": `${this.sliderId}-label`, "aria-grabbed": this.thumbGrabbed ? 'true' : 'false', "aria-label": ariaLabel, tabindex: this.disabled ? '-1' : '0' }, this.tooltip && (h("div", { key: 'b1b3ecfbedd63039e66aabc10db98b7b25c04b6d', class: "tds-slider__value" }, this.value, h("svg", { key: '80e22bbb6b56c85f754c7cfae63f21d7adb7eb56', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '4ce11c849ba43904f2d2d1540bb60c12a1e695ee', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: '44205e90c8ff3e6506e155a66b6ce53aa191f25e', class: "tds-slider__thumb-inner", ref: (el) => {
+            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb(), role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} of ${this.max}`, "aria-labelledby": `${this.sliderId}-label`, "aria-grabbed": this.thumbGrabbed ? 'true' : 'false', "aria-label": ariaLabel, tabindex: this.disabled ? '-1' : '0' }, this.tooltip && (h("div", { key: 'a02dff8e8707d5a0d42882b9eb30c94d65c004fe', class: "tds-slider__value" }, this.value, h("svg", { key: '026cecebd18db87d4fbeb942c223e83ce2c5a21b', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f31a00952f88e45747cfd0dc7353f4a484846afc', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: '6fcb3b1bf4dfa6fb081008680f3944736cfce6eb', class: "tds-slider__thumb-inner", ref: (el) => {
                 this.thumbInnerElement = el;
-            } })))), this.useInput && (h("div", { key: '099b5dfac47680c3a2d882273856689d9bdd3953', class: "tds-slider__input-values" }, h("div", { key: '68f0c9d23bbadfe61a7edcb8ab38ed7a22b3a7b1', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '481a52db19f0bc035c43a252e005e5304a27bf9e', class: "tds-slider__input-field-wrapper" }, h("tds-text-field", { key: '5361928ed0dcf9cb5cb873a0b769ea0af76c809c', noMinWidth: true, size: "sm", type: "number", value: this.value, min: this.min, max: this.max, readOnly: this.readOnly, disabled: this.disabled, onTdsChange: (e) => console.log(e), tdsAriaLabel: this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onTdsBlur: (event) => this.updateSliderValueFromTextField(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event) })))), this.useControls && (h("div", { key: 'abaa88dc33a0193360999df8ba6fe04569ff12aa', class: "tds-slider__controls" }, h("div", { key: '294ebb18d08ea797ee481f38f2b8c7f57b368ce2', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event), role: "button", "aria-label": "Increase value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '637b1f5eb5744749b534be62848c2a5f33a20475', name: "plus", size: "16px" })))))));
+            } })))), this.useInput && (h("div", { key: 'c0b0dc771ccf46a5d5d119a0b3c44f5bceef6ad4', class: "tds-slider__input-values" }, h("div", { key: '20a61bcb6e157416c42fe6fd54b32c2e10da09cc', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '8c983dc792027814e7e27c41c2e507333ea6afba', class: "tds-slider__input-field-wrapper" }, h("tds-text-field", { key: '6309046324fa52c8d4ade33dd3450eef5b2aa04b', noMinWidth: true, size: "sm", type: "number", value: this.value, min: this.min, max: this.max, readOnly: this.readOnly, disabled: this.disabled, onTdsChange: (e) => console.log(e), tdsAriaLabel: this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onTdsBlur: (event) => this.updateSliderValueFromTextField(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event) })))), this.useControls && (h("div", { key: '4f410440b2e830bfac5f908b563dbfc061e28519', class: "tds-slider__controls" }, h("div", { key: 'a3f1215891059fa3c83b499ba5597aa1758d0906', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event), role: "button", "aria-label": "Increase value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '0e5323b7f52360b34943580113386f408dd6d57e', name: "plus", size: "16px" })))))));
     }
     static get is() { return "tds-slider"; }
     static get originalStyleUrls() {

package/dist/collection/components/spinner/spinner.js

@@ -7,7 +7,7 @@ export class TdsSpinner {
         this.variant = 'standard';
     }
     render() {
-        return (h("div", { key: '6bc92547f2513496d52ff297e0edc981c5dd7d89', "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { key: '4997ea9dffe315deb470c76df65a3da2a5e576a0', class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { key: '90dd9b3586801519aa62977c27099306f587db6e', class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
+        return (h("div", { key: '2c2007a71f25d2a5dcd5ca10b2481ff1543c4429', "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { key: 'c463a22e2322b03cfb14e3dc20c7c8d010182d38', class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { key: 'd4705e28049e64a6b230ecdb245ea5238c1b8b51', class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
     }
     static get is() { return "tds-spinner"; }
     static get originalStyleUrls() {

package/dist/collection/components/stepper/step/step.js

@@ -37,7 +37,7 @@ export class TdsStep {
         }
     }
     render() {
-        return (h(Host, { key: 'c76b0023f433c881360b9a98ad96d0a163a0d99d' }, h("div", { key: 'ea169fe4d94d0b33e36eb52ffeb2e08982c2704c', role: "listitem", "aria-disabled": this.state === 'upcoming' ? 'true' : 'false', "aria-current": this.tdsAriaCurrent, tabIndex: -1, "aria-label": `Step ${this.index}: ${this.state}`, class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: 'c6f3f8f2d0ba7b2c4ed15abc45551bacf69e36b0', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { "aria-hidden": "true", svgTitle: `tds-step-icon-${this.stepperId}`, class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { "aria-hidden": "true", class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: '9ff61949c0de2d74962a6a10e46915bd5484b282', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: '6c13e8acd45be0e104207b8daaa9ef64ec1453ee', name: "label" }))))));
+        return (h(Host, { key: 'afc9e25f7fca169a9ccb2241eb374b87c1b0ff5b' }, h("div", { key: '3bb5727f75e1c9a44e3033dfcaf511d093d1e085', role: "listitem", "aria-disabled": this.state === 'upcoming' ? 'true' : 'false', "aria-current": this.tdsAriaCurrent, tabIndex: -1, "aria-label": `Step ${this.index}: ${this.state}`, class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: 'c4f8eb7bd7039f14a7e374bb62fc8fd74f5aeeb8', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { "aria-hidden": "true", svgTitle: `tds-step-icon-${this.stepperId}`, class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { "aria-hidden": "true", class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: 'aca563c692e3602ddd3b5d80cc63085077139a87', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: 'ed85239ef9c383e2a251f7cef4931da2348a8975', name: "label" }))))));
     }
     static get is() { return "tds-step"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table/table.css

@@ -34,6 +34,7 @@ body {
 }
 .tds-table--horizontal-scroll:hover::-webkit-scrollbar-thumb {
   border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
+  border-radius: var(--tds-scrollbar-hover-thumb-border-radius);
   background-clip: padding-box;
 }
 .tds-table--horizontal-scroll::-webkit-scrollbar {
@@ -43,7 +44,7 @@ body {
   background: var(--tds-scrollbar-track-color);
 }
 .tds-table--horizontal-scroll::-webkit-scrollbar-thumb {
-  border-radius: 40px;
+  border-radius: var(--tds-scrollbar-thumb-border-radius);
   background: var(--tds-scrollbar-thumb-color);
   border: var(--tds-scrollbar-thumb-border-width) solid transparent;
   background-clip: padding-box;

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

@@ -99,6 +99,12 @@ export class TdsTable {
     widthChanged(newValue) {
         this.emitInternalTdsPropChange('horizontalScrollWidth', newValue);
     }
+    sortColumnKeyChanged(newValue) {
+        this.emitInternalTdsPropChange('sortColumnKey', newValue);
+    }
+    sortDirectionChanged(newValue) {
+        this.emitInternalTdsPropChange('sortDirection', newValue);
+    }
     componentWillRender() {
         if (this.horizontalScrollWidth) {
             const closestTable = this.host.closest('tds-table');
@@ -111,11 +117,11 @@ export class TdsTable {
         }
     }
     render() {
-        return (h(Host, { key: '22e1189b298e2af0346a3a04126eed47528f1169', class: {
+        return (h(Host, { key: '47161a1c4f313bce7e9cdeb2207ecf136006264c', class: {
                 'tds-table--responsive': this.responsive,
                 'tds-mode-variant-primary': this.modeVariant === 'primary',
                 'tds-mode-variant-secondary': this.modeVariant === 'secondary',
-            } }, h("table", { key: '9a756d4799eba3dc75b6a7d5cb75c53a21509949', style: this.getStyles(), class: {
+            } }, h("table", { key: '69a097a8fe81a082bdc7c310e098be3a317b5a8f', style: this.getStyles(), class: {
                 'tds-table': true,
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
@@ -126,7 +132,7 @@ export class TdsTable {
                 'tds-table--horizontal-scroll-toolbar-compact': this.enableHorizontalScrollToolbarDesign && this.compactDesign,
                 'tds-table--horizontal-scroll-footer': this.enableHorizontalScrollFooterDesign && !this.compactDesign,
                 'tds-table--horizontal-scroll-footer-compact': this.enableHorizontalScrollFooterDesign && this.compactDesign,
-            } }, h("slot", { key: '2f0e653f4d44b8ada5933ab2389338b92ed48493' }))));
+            } }, h("slot", { key: '3fe0095ee6eee6b50ac084417fab921791da0e84' }))));
     }
     static get is() { return "tds-table"; }
     static get encapsulation() { return "shadow"; }
@@ -321,6 +327,50 @@ export class TdsTable {
                 "attribute": "horizontal-scroll-width",
                 "defaultValue": "null"
             },
+            "sortColumnKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Column key for the currently sorted column."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "sort-column-key"
+            },
+            "sortDirection": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SortDirection",
+                    "resolved": "\"asc\" | \"desc\" | undefined",
+                    "references": {
+                        "SortDirection": {
+                            "location": "local",
+                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/table/table/table.tsx",
+                            "id": "src/components/table/table/table.tsx::SortDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Current sorting direction for the column set by sortColumnKey."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "sort-direction"
+            },
             "tableId": {
                 "type": "string",
                 "mutable": false,
@@ -443,6 +493,12 @@ export class TdsTable {
             }, {
                 "propName": "horizontalScrollWidth",
                 "methodName": "widthChanged"
+            }, {
+                "propName": "sortColumnKey",
+                "methodName": "sortColumnKeyChanged"
+            }, {
+                "propName": "sortDirection",
+                "methodName": "sortDirectionChanged"
             }];
     }
 }