@scania/tegel 1.56.0 → 1.58.0-memory-fix-beta.0

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

@@ -1,11 +1,17 @@
+/* Typography Usage mixins */
 .tds-radio-button {
   box-sizing: border-box;
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
   display: flex;
   align-items: center;
   margin-left: -4px;
-  font: var(--tds-detail-02);
   letter-spacing: var(--tds-detail-02-ls);
-  color: var(--tds-radio-button-color);
+  color: var(--tds-radio-button-text);
 }
 .tds-radio-button * {
   box-sizing: border-box;
@@ -17,7 +23,6 @@
   border: 0;
   width: 20px;
   height: 24px;
-  border-radius: 50%;
   position: relative;
   cursor: pointer;
   flex-shrink: 0;
@@ -25,77 +30,78 @@
 }
 .tds-radio-button .tds-form-input[type=radio] + label {
   padding: var(--tds-spacing-element-4) 0 var(--tds-spacing-element-4) 6px;
+  color: var(--tds-radio-button-text);
   cursor: pointer;
 }
 .tds-radio-button .tds-form-input[type=radio]::before, .tds-radio-button .tds-form-input[type=radio]::after {
   content: "";
   position: absolute;
-  border-radius: 50%;
   box-sizing: border-box;
+  border-radius: var(--tds-radio-button-border-radius);
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
 }
 .tds-radio-button .tds-form-input[type=radio]::before {
-  width: 20px;
-  height: 20px;
-  top: 2px;
-}
-.tds-radio-button .tds-form-input[type=radio]::after {
-  border: 1px solid var(--tds-radio-button-interaction-01);
-  background-color: var(--tds-radio-button-interaction-02);
   width: 16px;
   height: 16px;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
+  border: 1px solid var(--tds-radio-button-border);
+  background-color: var(--tds-radio-button-background);
+  box-shadow: 0 0 0 2px var(--tds-radio-button-indicator);
+  transition: box-shadow 0.2s ease-in-out;
+}
+.tds-radio-button .tds-form-input[type=radio]::after {
+  width: 6px;
+  height: 6px;
+  background-color: var(--tds-radio-button-icon-selected);
+  opacity: 0;
+  z-index: 1;
 }
 .tds-radio-button .tds-form-input[type=radio]:hover::before {
+  border-color: var(--tds-radio-button-border-hover);
   background-color: var(--tds-radio-button-background-hover);
+  box-shadow: 0 0 0 2px var(--tds-radio-button-indicator-hover);
 }
 .tds-radio-button .tds-form-input[type=radio]:focus-visible::before {
-  background-color: var(--tds-radio-button-background-focus);
-  box-shadow: 0 0 0 1px var(--tds-radio-button-background-focus);
-  animation: rb-focus var(--tds-motion-duration-moderate-02) var(--tds-motion-easing-enter) forwards;
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
+  outline-offset: 1px;
+  z-index: 1;
+  border-radius: var(--tds-radio-button-focus-ring-radius);
 }
-.tds-radio-button .tds-form-input[type=radio]:focus-visible::after {
-  outline: 1px solid var(--tds-radio-button-interaction-outline);
+.tds-radio-button .tds-form-input[type=radio]:hover + label {
+  color: var(--tds-radio-button-text-hover);
 }
-.tds-radio-button .tds-form-input[type=radio]:disabled, .tds-radio-button .tds-form-input[type=radio].disabled {
-  cursor: not-allowed;
+.tds-radio-button .tds-form-input[type=radio]:checked::before {
+  border-color: var(--tds-radio-button-border-selected);
+  background-color: var(--tds-radio-button-background-selected);
 }
-.tds-radio-button .tds-form-input[type=radio]:disabled::after, .tds-radio-button .tds-form-input[type=radio].disabled::after {
-  border-color: var(--tds-radio-button-border-color-disabled-after);
-  background-color: var(--tds-radio-button-interaction-02);
+.tds-radio-button .tds-form-input[type=radio]:checked::after {
+  background-color: var(--tds-radio-button-icon-selected);
+  opacity: 1;
 }
-.tds-radio-button .tds-form-input[type=radio]:disabled + label, .tds-radio-button .tds-form-input[type=radio].disabled + label {
-  color: var(--tds-radio-button-disabled);
+.tds-radio-button .tds-form-input[type=radio]:checked:hover::before {
+  border-color: var(--tds-radio-button-border-selected-hover);
+  background-color: var(--tds-radio-button-background-selected-hover);
+}
+.tds-radio-button .tds-form-input[type=radio]:checked:hover::after {
+  background-color: var(--tds-radio-button-icon-selected-hover);
+}
+.tds-radio-button .tds-form-input[type=radio]:disabled, .tds-radio-button .tds-form-input[type=radio].disabled {
   cursor: not-allowed;
+  opacity: var(--tds-radio-button-opacity-disabled);
 }
 .tds-radio-button .tds-form-input[type=radio]:disabled:hover::before, .tds-radio-button .tds-form-input[type=radio].disabled:hover::before {
-  display: none;
-  opacity: 1;
+  border-color: var(--tds-radio-button-border);
+  background-color: var(--tds-radio-button-background);
+  box-shadow: none;
 }
-.tds-radio-button .tds-form-input[type=radio]:checked::after {
-  border: 4px solid var(--tds-radio-button-interaction-01);
+.tds-radio-button .tds-form-input[type=radio]:disabled:checked:hover::before, .tds-radio-button .tds-form-input[type=radio].disabled:checked:hover::before {
+  border-color: var(--tds-radio-button-border-selected);
+  background-color: var(--tds-radio-button-background-selected);
 }
-.tds-radio-button .tds-form-input[type=radio]:checked:disabled:hover::before, .tds-radio-button .tds-form-input[type=radio]:checked:disabled::before, .tds-radio-button .tds-form-input[type=radio]:checked.disabled:hover::before, .tds-radio-button .tds-form-input[type=radio]:checked.disabled::before {
-  display: block;
-  background-color: transparent;
-  width: 16px;
-  height: 16px;
-  left: 2px;
-  top: 4px;
-  box-shadow: inset 0 0 0 1px var(--tds-radio-button-border-color-disabled-after);
-}
-.tds-radio-button .tds-form-input[type=radio]:checked:disabled::after, .tds-radio-button .tds-form-input[type=radio]:checked.disabled::after {
-  border: 4px solid var(--tds-radio-button-interaction-02);
-  background-color: var(--tds-radio-button-color-disabled-after);
-  clip-path: inset(1px 1px round 50%);
-}
-@keyframes rb-focus {
-  0% {
-    transform: scale(0);
-    opacity: 0;
-  }
-  100% {
-    transform: scale(1);
-  }
+.tds-radio-button .tds-form-input[type=radio]:disabled + label, .tds-radio-button .tds-form-input[type=radio].disabled + label {
+  color: var(--tds-radio-button-text);
+  opacity: var(--tds-radio-button-opacity-disabled);
+  cursor: not-allowed;
 }

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

@@ -27,10 +27,10 @@ export class TdsRadioButton {
         }
     }
     render() {
-        return (h("div", { key: 'bfa799e8b8659e2a7262b239bdcc2535776fc9b3', class: "tds-radio-button" }, h("input", { key: '5f0b88e6e2d1af55fb8c47edfd378e422bf9a38c', ref: (inputEl) => {
+        return (h("div", { key: 'c0b70960fff98ab1b47c2e3aff56f961650dee5a', class: "tds-radio-button" }, h("input", { key: 'b9af05823186970bae1050590a330490a258515f', 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: '345dc77a437f9e4bd9936fadf8c774c5aa56fd5b', htmlFor: this.radioId }, h("slot", { key: 'a5828506e8b5f408a0873cdcb9a57a68f27b0351', 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: '30a3e766adb4e71b175e5c9710b99fd65870c210', htmlFor: this.radioId }, h("slot", { key: '1b963b7d567196b65779a2eba32878c751f878c3', 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: 'a80081722122221e86fa54f3813cc0c07d786cac' }, h("button", Object.assign({ key: 'a992413c973d0288aafda2ac7f4ea803597ec58d' }, buttonProps), h("tds-icon", { key: 'f94e646b7106e5c85766fa9d6ecec523f97e75ee', name: "cross", size: "20px", svgTitle: "Cross" }))));
+        return (h(Host, { key: '3917587eda426f9883cd6530cc28f81b4649ee12' }, h("button", Object.assign({ key: '1a639b992d7e18d139bcf34fda23f89dbf5c48d9' }, buttonProps), h("tds-icon", { key: '53529b03c0f9eacfb3ab186ecc42928aa0025e08', 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

@@ -23,18 +23,18 @@ export class TdsSideMenuCollapseButton {
     collapseSideMenuEventHandler(event) {
         this.collapsed = event.detail.collapsed;
     }
-    connectedCallback() {
+    componentWillLoad() {
         var _a;
         this.sideMenuEl = this.host.closest('tds-side-menu');
         this.collapsed = !!((_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed);
     }
     render() {
-        return (h(Host, { key: '59f91f966f40d58d3681e3c5b33dbfc967395855' }, h("div", { key: 'affa1128cba719622182b54cea5bac8a38533078', class: {
+        return (h(Host, { key: '202d11bf9173174d486ef1abe727012d0d895f66' }, h("div", { key: 'b984c8a0fdefc291ec05772a896298a1e4b97a14', class: {
                 'wrapper': true,
                 'state-collapsed': this.collapsed,
-            } }, h("tds-side-menu-item", { key: '8db28ce899b50691ee207e646cf3aeaa110776d3', class: { button: true } }, h("button", { key: 'e115958e959fcf5eee38432cf6ea273c336b9385', type: "button", "aria-expanded": !this.collapsed ? 'true' : 'false', onClick: () => {
+            } }, h("tds-side-menu-item", { key: '06e84bb1d35a0ab1a3fa7956753d260a61dcc674', class: { button: true } }, h("button", { key: '9883d11884bd7125666bcbfe97eff71b0fc17732', type: "button", "aria-expanded": !this.collapsed ? 'true' : 'false', onClick: () => {
                 this.handleClick();
-            } }, 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' }))))));
+            } }, h("svg", { key: '46f8615dd2d8b59dbf0142e8c0ecfcf7eda0733e', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '39ecd0ada33775cdf33f103e730e4969cc7f52d1', "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: 'f27c9e2626e1228d70cf5e2861e7819d152d8335' }))))));
     }
     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

@@ -55,20 +55,20 @@ export class TdsSideMenuDropdown {
         var _a;
         return this.collapsed ? (_a = this.hoverState) === null || _a === void 0 ? void 0 : _a.isHovered : this.open;
     }
-    connectedCallback() {
+    componentWillLoad() {
         var _a;
         this.sideMenuEl = this.host.closest('tds-side-menu');
         this.collapsed = !!((_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed);
         this.open = this.defaultOpen;
     }
     render() {
-        return (h(Host, { key: '3b981429fcffc3beeaf27fc02749c1f91e2ad0a7' }, h("div", { key: 'fa903821594e9455976a95a106567ce201fff460', class: {
+        return (h(Host, { key: 'ce1c0afc32d974a1caf196f20d44d48624d5b234' }, h("div", { key: 'a854076c5dd113fa974d5b07ec7467eb933b124d', class: {
                 'wrapper': true,
                 'state-open': this.getIsOpenState(),
                 'state-collapsed': this.collapsed,
-            } }, h("tds-side-menu-item", { key: '7311dba31c07faf5e3ab6e8fbe43098e3cd4729e', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
+            } }, h("tds-side-menu-item", { key: '3464835b094c4fd98cad6761770ce041fe886353', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
                 this.open = !this.open;
-            }, "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' })))));
+            }, "aria-expanded": this.getIsOpenState() ? 'true' : 'false' }, h("button", { key: '291217235f306f9549a0f5b9425231802052db91' }, h("slot", { key: 'ba7131ce5bca7d007aa20965040e255fa6c25c13', name: "icon" }), !this.collapsed && (h(Fragment, { key: '46b8cb9f217c8f13b1dc9ec7d2154f6f83e68b4b' }, this.buttonLabel, h("slot", { key: '308f13824604ece519ac8c5360cbb786d9394e9e', name: "label" }), h("tds-icon", { key: 'de2e2d6b3a98b8e1305be53355514499fd77c223', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Chevron Down" }))))), h("div", { key: '183194b6ddb0f41765f7be477f318905507c64c1', class: "menu", tabindex: this.collapsed ? '0' : undefined }, this.collapsed && (h("h3", { key: 'afa41e6a713ef36d0667abda7953db6e36d473ef', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: '3f477b131787e9dec8cd634eff03b055f15021e1', name: "label" }))), h("slot", { key: 'e3fa597b180eaf321984ebda01894b47de151f1c' })))));
     }
     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

@@ -9,15 +9,15 @@ export class TdsSideMenuDropdownList {
     collapsedSideMenuEventHandler(event) {
         this.collapsed = event.detail.collapsed;
     }
-    connectedCallback() {
+    componentWillLoad() {
         var _a;
         this.sideMenuEl = this.host.closest('tds-side-menu');
         this.collapsed = !!((_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed);
     }
     render() {
-        return (h(Host, { key: 'd985f058553315e92f7954d3f78938a2f0f409fb', role: "list", "aria-expanded": !this.collapsed ? 'true' : 'false' }, h("div", { key: '9509f0eb97e2c69e6ea8c5aac4369557967de871', class: {
+        return (h(Host, { key: '085abea8cd1fffd7cbd47a9459d1eff54bde0421', role: "list", "aria-expanded": !this.collapsed ? 'true' : 'false' }, h("div", { key: '3c0f3c95b2d11c5b76dbdb6e204a0b532066690c', class: {
                 'state-collapsed': this.collapsed,
-            } }, h("slot", { key: 'c893832f1bdb8556dd856ce3ef02e53174b216a3' }))));
+            } }, h("slot", { key: 'a4fd40b183edd664be566c136016b4ea7e183613' }))));
     }
     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.js

@@ -13,7 +13,7 @@ export class TdsSideMenuDropdownListItem {
     collapseSideMenuEventHandler(event) {
         this.collapsed = event.detail.collapsed;
     }
-    connectedCallback() {
+    componentWillLoad() {
         var _a;
         this.sideMenuEl = this.host.closest('tds-side-menu');
         this.collapsed = !!((_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed);
@@ -38,13 +38,13 @@ export class TdsSideMenuDropdownListItem {
         }
     }
     render() {
-        return (h(Host, { key: '389c5c54a7ea7c93b693a0b26999c61eea342c29', role: "listitem" }, h("div", { key: '8602175fba3ef6e2b63105f6eb98228e616e279f', class: {
+        return (h(Host, { key: 'c0c87f764d1e0da5190eb01c495bcf75db9fafe0', role: "listitem" }, h("div", { key: 'b37486799e08a95589bbb05de3e75ad36ab968ef', 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: '015bbc6eed42e13af47829d5b794412140de3f7d' }))));
+            } }, h("slot", { key: 'a8d4e627e6dc3da6651e119a20d70960f78e60f5' }))));
     }
     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.js

@@ -53,7 +53,7 @@ export class TdsSideMenuItem {
             });
         }
     }
-    connectedCallback() {
+    componentWillLoad() {
         var _a;
         // closest() will return null if side-menu-item is inside a shadowRoot that
         // does not contain a side-menu. This is the case for the side-menu-dropdown.
@@ -78,13 +78,13 @@ export class TdsSideMenuItem {
         this.updateHasUserComponent();
     }
     render() {
-        return (h(Host, { key: 'a3d78ce2c19b640d7040f30bc40d8c3ddeb48713' }, h("div", { key: '4f468a980cba48b02e5acae58905afbafc5d9304', class: {
+        return (h(Host, { key: '1fcfe1981864846efadb19f86e27c65be57e87ed' }, h("div", { key: '48ab66bd93c5864704a236f7673247d91a9514ce', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-active': this.active,
                 'component-collapsed': this.collapsed,
                 'component-has-user': this.hasUserComponent,
-            } }, h("slot", { key: 'f260f260f7914d3a4cb983d66da4729e40cb458e' }))));
+            } }, h("slot", { key: 'cf85b9e0d37d4e5609185472f8cdcc262bb678a2' }))));
     }
     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: '9411dd666b13dd136817d7e68479288f2e02cbc0' }, h("div", { key: '2275c980cfa9c5de70bfacd5447e718ecfeb301c' })));
+        return (h(Host, { key: '8fcf86fe8c12b313dd06d55c76120f8d1acd5ecf' }, h("div", { key: '4a1db5461a6dfe901ffdee58a7540230cea2f292' })));
     }
     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: '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 })));
+        return (h(Host, { key: '6bf045fef0f01798a2959bb6f636935f6be51881' }, h("tds-side-menu-user-image", { key: 'f98eda6c760ac5be940efc33010979f849cb8553', src: this.imgSrc, alt: this.imgAlt }, h("slot", { key: 'a68b73ac692bbb7e5111a4d042fa256b28c0e457', name: "image" })), h("tds-side-menu-user-label", { key: '0640700db9231b96909a907edf664f0493742b7a', 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: '1d8f78a011fcd03634ba078d81e92a5e46e30af5' }, h("slot", { key: '351a67a342ccf1b8d4cb3d742b31a82b898292ab' }), this.src && h("img", { key: 'a760e7d8fec23ee93f00774f06d89f1ee76caf27', src: this.src, alt: this.alt })));
+        return (h(Host, { key: 'ed8d6e97e8fcde8ac18a6c09fbc10f98f65948cd' }, h("slot", { key: 'b64a228a8c1ab2f3fbb2bc3e61d09aa36f629c38' }), this.src && h("img", { key: 'c62bae52ccc2ba6f3d115a424fddcbd7f078bf6a', 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: 'b1d35aa06395d95164b290bb01650f3e8d89309c' }, this.heading, this.subheading && h("div", { key: '61bc8288b0f2e91c2ab3431f64ce43cc673d7d02', class: "subheading" }, this.subheading)));
+        return (h(Host, { key: 'cf2d9004a9c6dffcd4b9565ec43b9ff5918d0810' }, this.heading, this.subheading && h("div", { key: '876e4afd901483154f50cd5505895058cffa3751', 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

@@ -150,7 +150,7 @@ aside .tds-side-menu-wrapper::-webkit-scrollbar-button {
     scrollbar-width: var(--tds-scrollbar-width-standard);
   }
 }
-aside [role=navigation] {
+aside nav {
   height: 100%;
   display: flex;
   flex-direction: column;

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

@@ -41,12 +41,14 @@ export class TdsSideMenu {
             this.open = false;
         }
     }
+    componentWillLoad() {
+        this.isCollapsed = this.collapsed;
+        this.initialCollapsedState = this.collapsed;
+    }
     connectedCallback() {
         this.matchesLgBreakpointMq = window.matchMedia(`(min-width: ${GRID_LG_BREAKPOINT}px)`);
         this.matchesLgBreakpointMq.addEventListener('change', this.handleMatchesLgBreakpointChange);
         this.isMobile = !this.matchesLgBreakpointMq.matches;
-        this.isCollapsed = this.collapsed;
-        this.initialCollapsedState = this.collapsed;
     }
     componentDidLoad() {
         var _a;
@@ -157,16 +159,16 @@ export class TdsSideMenu {
         this.collapsed = event.detail.collapsed;
     }
     render() {
-        return (h(Host, { key: '4c7ef20dafaa84ba2939889e40dd245ffd683356', class: {
+        return (h(Host, { key: '0e6d2ae420036a5f8c1307617477ee43fe1eb685', class: {
                 'menu-opened': this.open,
                 'menu-persistent': this.persistent,
                 'menu-collapsed': this.collapsed,
-            }, "aria-expanded": (this.isMobile ? this.open : !this.collapsed) ? 'true' : 'false' }, h("div", { key: '515a38e098d2ede1ff846cc60176c451037a0356', class: {
+            }, "aria-expanded": (this.isMobile ? this.open : !this.collapsed) ? 'true' : 'false' }, h("div", { key: '35c9086399deac1f44eecbc9b0ca7227fcdae9ac', class: {
                 'wrapper': true,
                 'state-upper-slot-empty': this.isUpperSlotEmpty,
                 'state-open': this.open,
                 'state-closed': !this.open,
-            } }, h("slot", { key: '0e6ab143ebc6f67ee8b8ab1573c02d070ce8d64f', name: "overlay" }), h("aside", { key: 'e5bc037a75037723300bac0df3c424a7ca3597b6', class: `menu` }, h("div", { key: 'd65d5c36e1151b27d1d859cb4e7a53bb390133c0', role: "navigation" }, h("slot", { key: '70277663e55908f048e807d3d07241c530f5c60f', name: "close-button" }), h("div", { key: 'af81aa4f22189716330f1b9563148fd7adfd4ab1', class: "tds-side-menu-wrapper" }, h("ul", { key: '38f9cb307b71cbded62856926266829d531bbcec', class: `tds-side-menu-list tds-side-menu-list-upper` }, h("li", { key: '7333761276459f88d8a52e1e824f9e2c7e62a3e4' }, h("slot", { key: '4109ca83e6a124c6f251468ec28905efee2a0ef7' }))), h("ul", { key: 'e5617092ca8c634f1d03815ca47291d5238d2162', class: `tds-side-menu-list tds-side-menu-list-end` }, h("li", { key: 'cc0fd0bc724cb5f0157d15e7617fb1630408d73a' }, h("slot", { key: 'aa8b19131f05427331b02dfb8137b63d8d1b771f', name: "end" })))), h("slot", { key: 'bb232a44cc190df59e1f9b104669a15b976d8ba0', name: "sticky-end" }))))));
+            } }, h("slot", { key: '9207b4d28a26b83f2cdb9d60b256b37f58151c6d', name: "overlay" }), h("aside", { key: '24bc0d0005ceb1f914cea7067b75c0dfc699407c', class: `menu` }, h("nav", { key: 'e7e3ede2ff7fd98c96488a3055b95c6938f25613' }, h("slot", { key: '883bd0281e26da2170c2658c7712c7cef6d798bc', name: "close-button" }), h("div", { key: '97adf44a80d9675b4dba7b54071653f780eacf65', class: "tds-side-menu-wrapper" }, h("ul", { key: '11a25c032d9121994fd2c4bb566d5ef054fbfd3b', class: `tds-side-menu-list tds-side-menu-list-upper` }, h("li", { key: 'b320c1f1a232a067fd32e620d8664c552722538e' }, h("slot", { key: '46a69a7593b92ce37790410dad705aed4d4792e9' }))), h("ul", { key: '46fc5da729120ebae6a38e4783e5358e561617ad', class: `tds-side-menu-list tds-side-menu-list-end` }, h("li", { key: 'e3101bdc934c169692687020619ff50aed3a1d41' }, h("slot", { key: '29ebb94832c7cda019d7f858e3c5b2f1cb42bcae', name: "end" })))), h("slot", { key: 'b14e1d71394b8f7588fd46c02d81fe657f68354d', name: "sticky-end" }))))));
     }
     static get is() { return "tds-side-menu"; }
     static get encapsulation() { return "shadow"; }

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: '6e6e00002da855b43067454de0a55af6802bdad0', class: {
+        return (h("div", { key: '7ffbf580fea1c04431a895053e035c33c0834a1e', class: {
                 'tds-slider-wrapper': true,
                 'read-only': this.readOnly,
-            } }, 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) => {
+            } }, h("input", { key: 'a87d78358d84b3d1b0f4eb1868c7972d391024f1', 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: 'b96bfe54acc3f1accea13c0710a46e27bb34618a', class: "sr-only", "aria-live": "assertive", ref: (el) => {
                 this.ariaLiveElement = el;
-            } }), h("div", { key: '7d4ac685ad9f519eb6007ba1ef4bc6ab9ff58a9b', class: {
+            } }), h("div", { key: '21e9de5646ba3bb1be26a2ab5a73f6733e5f9314', 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: '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) => {
+            }, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: 'a2ff4200538e129f3262d1acf21a0e66fbcb3f9a', id: `${this.sliderId}-label`, class: { offset: this.showTickNumbers } }, this.label), this.useInput && (h("div", { key: '01a6dd063389b459072a9c0e06be2139af798c41', class: "tds-slider__input-values" }, h("div", { key: '3e07cd27fcbd1579f1441db9c2ce8943b79de6f5', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '3f4fea66c4a7de2aa5a634cee715c9a65dca1ada', class: "tds-slider__controls" }, h("div", { key: '20ef717773cca557b49eb905b54759b809478513', 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: 'a0f756f26801aa5551c7ca3d73eef26696cd25d8', name: "minus", size: "16px" })))), h("div", { key: '58b1a65b9d13c62d116d81384763bbf45897e9a5', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: '00046f72bfd20d59f4db4bcf4a65eda7d43c09d2', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: 'f4b33f351f24311cd7dede905ea647d0c11af08a', 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: '184fb63403cba630fed7f86d8ff9973c95788b8e', 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: 'b6b56223be25e8493e0884c5fb2f4ef786fb4a87', class: "tds-slider__track-fill", ref: (el) => {
+            } }, h("div", { key: '07c2b542ec10424a4b0c036f9a6bb88583a3b6d2', class: "tds-slider__track-fill", ref: (el) => {
                 this.trackFillElement = el;
-            } }), h("div", { key: '74890de4d56ca2fa851212adeccb745c48b7b659', class: "tds-slider__thumb", ref: (el) => {
+            } }), h("div", { key: '99ecd3a3f19999e2241e305dd65d3c3e2c4803ba', 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: '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) => {
+            }, 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: '10c3c1f789d8dba542f9729a800d99e73f465ff6', class: "tds-slider__value" }, this.value, h("svg", { key: '3111e56b641639527bab768279b0c4f13595bd90', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '6ba13ce0dcbf42fbb2e6cd40deee4d0c24257879', 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: '47e2dab4d35d7692a8295325f2b58555c93b7589', class: "tds-slider__thumb-inner", ref: (el) => {
                 this.thumbInnerElement = el;
-            } })))), 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" })))))));
+            } })))), this.useInput && (h("div", { key: '0328b897b32ecad33d7ad0ae8e665ba89916b523', class: "tds-slider__input-values" }, h("div", { key: '07bf42ea13eb0f83495842a4355c2e9ef8db0961', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '235282e1c1dd6f0a7e0d8580390e82b5f57a8a5d', class: "tds-slider__input-field-wrapper" }, h("tds-text-field", { key: '8da3f25d80324354c76ae5d152841ab2ea024d11', 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: 'f4975c655819dcaf1fd45b29894f50a53b346df2', class: "tds-slider__controls" }, h("div", { key: '0889d3ce08effd68c5e0a39a0a0bbdc0613bffb8', 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: '4387c6db0a9fc7f979f29ef268b81e59980709f6', 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: '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}` }))));
+        return (h("div", { key: '38b8d45b0a4e8afa9cdb3ad3a27945e448106140', "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { key: 'e7ca23df8f316d6e4c4325439a119472b17cfd58', class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { key: 'dfbcc10781ebf124cd7ac9a1bff4c29c2321e03a', 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: '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" }))))));
+        return (h(Host, { key: '865925b39d18bf0df869e84a9403ffbe17e84e6f' }, h("div", { key: '5817c0cda54f2cd61acf7a0db4d1f9936447fdea', 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: '894c77a0b1f338654a27a993b344b5b33c258be6', 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: 'cb662acf0d18f8a7e042635fa6453a42d3d63f5a', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: '8d6e7a8866bde497261eaaff7f4ca1bb2216f512', name: "label" }))))));
     }
     static get is() { return "tds-step"; }
     static get encapsulation() { return "shadow"; }

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

@@ -56,7 +56,7 @@ export class TdsStepper {
         });
     }
     render() {
-        return (h(Host, { key: '6639dd75f7c2e87d85165810b90608c28129f5ee' }, h("div", { key: 'def675a425fb28d4c14153278a283bf047ef3a5e', role: "list", "aria-label": this.tdsAriaLabel, class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, h("slot", { key: '5ae928f0400ca4bf419f5dc15ac4e07583c7235b' }))));
+        return (h(Host, { key: 'c85f018b73a2b1fa7e50f9a99d76d6bff03bf489' }, h("div", { key: '9c17278b4389dc5cbe86b7fd2381f89eec986f90', role: "list", "aria-label": this.tdsAriaLabel, class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, h("slot", { key: 'f9855ace74843deae265020213783331494e604c' }))));
     }
     static get is() { return "tds-stepper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -64,12 +64,12 @@ export class TdsTableBody {
         }
     }
     render() {
-        return (h(Host, { key: '60769d20b1be88e96358e43d627188860b85f580', "data-selected-rows": this.multiselectArrayJSON, class: {
+        return (h(Host, { key: '0d4190ad5c0e0336d37f7e72f8d2e738a4bdf75e', "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: '7f2451f49224792b663dacc60f66f33d2e9e70de' })));
+            } }, h("slot", { key: '4d463c79f3bde2eb562c16aa206488ac99539e2a' })));
     }
     static get is() { return "tds-table-body"; }
     static get originalStyleUrls() {

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

@@ -10,7 +10,6 @@
   color: var(--tds-table-color);
   padding: var(--tds-spacing-element-16);
   min-width: 192px;
-  vertical-align: top;
   background-color: var(--row-bg);
   transition: background-color 200ms ease;
 }

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

@@ -12,6 +12,7 @@ export class TdsTableBodyCell {
         /** Disables internal padding. Useful when passing other components to cell. */
         this.disablePadding = false;
         this.textAlignState = undefined;
+        this.verticalAlignState = undefined;
         this.activeSorting = false;
         this.verticalDividers = false;
         this.compactDesign = false;
@@ -68,8 +69,12 @@ export class TdsTableBodyCell {
         if (this.textAlign) {
             this.textAlignState = this.textAlign;
         }
+        if (this.verticalAlign) {
+            this.verticalAlignState = this.verticalAlign;
+        }
     }
     render() {
+        var _a;
         let paddingStyle = 'var(--tds-spacing-element-16)'; // Default padding
         if (this.disablePadding) {
             paddingStyle = '0';
@@ -79,16 +84,17 @@ export class TdsTableBodyCell {
         }
         const dynamicStyles = {
             textAlign: this.textAlignState,
+            verticalAlign: (_a = this.verticalAlignState) !== null && _a !== void 0 ? _a : 'top',
             // Conditionally set padding style
             padding: paddingStyle,
         };
-        return (h(Host, { key: '2cd26f5d02b28c1ecfdc85449ba9ada8bdf659d1', class: {
+        return (h(Host, { key: '1d2ca4a4c0ddef5b2721e6eae12988375d4a56bc', 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: 'b92b6d629c144ec689439501b6d3349c5781addf', style: dynamicStyles, colSpan: this.colSpan, rowSpan: this.rowSpan }, this.cellValue, h("slot", { key: 'eacfe800394785849f4e5460a8590367cd4d9bce' }))));
+            } }, h("td", { key: 'e966ef7c9c5a6dbd41be52c83e1c58185c56cd21', style: dynamicStyles, colSpan: this.colSpan, rowSpan: this.rowSpan }, this.cellValue, h("slot", { key: '04113f8a8b989ffd58b85e4a78c8e23d7da6599e' }))));
     }
     static get is() { return "tds-body-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -188,6 +194,31 @@ export class TdsTableBodyCell {
                 "reflect": true,
                 "attribute": "text-align"
             },
+            "verticalAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "VerticalAlign",
+                    "resolved": "\"bottom\" | \"middle\" | \"top\" | undefined",
+                    "references": {
+                        "VerticalAlign": {
+                            "location": "local",
+                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/table/table-body-cell/table-body-cell.tsx",
+                            "id": "src/components/table/table-body-cell/table-body-cell.tsx::VerticalAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Setting for vertical alignment in the text of the cells, default value \"top\". Accepted values are \"top\", \"bottom\", \"middle\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "vertical-align"
+            },
             "colSpan": {
                 "type": "number",
                 "mutable": false,
@@ -231,6 +262,7 @@ export class TdsTableBodyCell {
     static get states() {
         return {
             "textAlignState": {},
+            "verticalAlignState": {},
             "activeSorting": {},
             "verticalDividers": {},
             "compactDesign": {},