@scania/tegel 1.33.0 → 1.34.0-design.tokens.beta.test.0

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

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   position: relative;
   display: table-cell;
@@ -14,23 +17,21 @@
 }
 :host [role=listitem].lg {
   padding: 0 20px;
-  font: var(--tds-detail-01);
-  letter-spacing: var(--tds-detail-01-ls);
+  font-family: var(--detail-01-font-family);
+  font-size: var(--detail-01-font-size);
+  line-height: var(--detail-01-line-height);
+  font-weight: var(--detail-01-font-weight);
+  letter-spacing: var(--detail-01-letter-spacing);
+  text-transform: var(--detail-01-text-transform);
 }
 :host [role=listitem].lg .content-container {
   height: 30px;
   min-width: 30px;
 }
-:host [role=listitem].lg .content-container tds-icon {
-  vertical-align: bottom;
-}
-:host [role=listitem].lg .content-container .index-container {
-  vertical-align: sub;
-}
 :host [role=listitem].lg.vertical::after {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-divider-line);
+  background-color: var(--stepper-divider-line);
   height: 36px;
   width: 1px;
   top: 40px;
@@ -39,25 +40,25 @@
 :host [role=listitem].lg.horizontal::after {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-divider-line);
+  background-color: var(--stepper-divider-line);
   height: 1px;
   left: calc(50% + 24px);
   right: 0;
-  top: 18px;
+  top: 16px;
 }
 :host [role=listitem].lg.horizontal::before {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-divider-line);
+  background-color: var(--stepper-divider-line);
   height: 1px;
   right: calc(50% + 24px);
   left: 0;
-  top: 18px;
+  top: 16px;
 }
 :host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::after {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-divider-line);
+  background-color: var(--stepper-divider-line);
   height: 1px;
   top: 16px;
   width: 10px;
@@ -67,7 +68,7 @@
 :host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::before {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-divider-line);
+  background-color: var(--stepper-divider-line);
   height: 1px;
   top: 16px;
   width: 10px;
@@ -76,8 +77,12 @@
 }
 :host [role=listitem].sm {
   padding: 0 20px;
-  font: var(--tds-detail-05);
-  letter-spacing: var(--tds-detail-05-ls);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
 }
 :host [role=listitem].sm .index-container {
   vertical-align: -webkit-baseline-middle;
@@ -95,7 +100,7 @@
 :host [role=listitem].sm.vertical::after {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-divider-line);
+  background-color: var(--stepper-divider-line);
   height: 20px;
   width: 1px;
   top: 34px;
@@ -104,7 +109,7 @@
 :host [role=listitem].sm.vertical::before {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-divider-line);
+  background-color: var(--stepper-divider-line);
   height: 20px;
   width: 1px;
   top: 34px;
@@ -113,7 +118,7 @@
 :host [role=listitem].sm.horizontal::after {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-divider-line);
+  background-color: var(--stepper-divider-line);
   height: 1px;
   left: calc(50% + 16px + 8px);
   right: 0;
@@ -122,7 +127,7 @@
 :host [role=listitem].sm.horizontal::before {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-divider-line);
+  background-color: var(--stepper-divider-line);
   height: 1px;
   left: 0;
   right: calc(50% + 24px);
@@ -131,7 +136,7 @@
 :host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::after {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-divider-line);
+  background-color: var(--stepper-divider-line);
   height: 1px;
   top: 13px;
   width: 10px;
@@ -141,7 +146,7 @@
 :host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::before {
   content: " ";
   position: absolute;
-  background-color: var(--tds-stepper-divider-line);
+  background-color: var(--stepper-divider-line);
   height: 1px;
   top: 13px;
   width: 10px;
@@ -149,42 +154,52 @@
   right: auto;
 }
 :host [role=listitem] .content-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
   border-radius: 100px;
-  border: 1px solid var(--tds-stepper-icon-background);
+  border-width: 1px;
+  border-style: solid;
   text-align: center;
   position: relative;
 }
 :host [role=listitem] .content-container.error {
-  border-color: var(--tds-stepper-icon-step-border-color-warning);
-  color: var(--tds-stepper-icon-step-border-color-warning);
+  border-color: var(--stepper-icon-step-border-warning);
+  color: var(--stepper-icon-step-border-warning);
 }
 :host [role=listitem] .content-container.success {
-  background-color: var(--tds-stepper-icon-step-border-color-success);
-  border-color: var(--tds-stepper-icon-step-border-color-success);
+  background-color: var(--stepper-icon-step-border-success);
+  border-color: var(--stepper-icon-step-border-success);
   color: var(--tds-white);
 }
 :host [role=listitem] .content-container.current {
-  background-color: var(--tds-stepper-background);
-  color: var(--tds-stepper-color);
+  color: var(--stepper-current-number-with-border);
 }
 :host [role=listitem] .content-container.upcoming {
-  background-color: transparent;
-  border-color: var(--tds-stepper-label-border-color-upcoming);
-  color: var(--tds-stepper-label-text-color-upcoming);
+  border-color: var(--stepper-label-border-upcoming);
+  color: var(--stepper-label-text-upcoming);
 }
 :host [role=listitem] .label {
   text-align: center;
 }
 :host [role=listitem] .label.lg {
-  font: var(--tds-detail-01);
-  letter-spacing: var(--tds-detail-01-ls);
+  font-family: var(--detail-01-font-family);
+  font-size: var(--detail-01-font-size);
+  line-height: var(--detail-01-line-height);
+  font-weight: var(--detail-01-font-weight);
+  letter-spacing: var(--detail-01-letter-spacing);
+  text-transform: var(--detail-01-text-transform);
 }
 :host [role=listitem] .label.sm {
-  font: var(--tds-detail-05);
-  letter-spacing: var(--tds-detail-05-ls);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
 }
 :host [role=listitem] .label.upcoming {
-  color: var(--tds-stepper-label-text-color-upcoming);
+  color: var(--stepper-label-text-upcoming);
   opacity: var(--tds-stepper-label-text-opacity-upcoming);
 }
 

package/dist/collection/components/stepper/stepper.css

@@ -4,10 +4,7 @@
   min-width: 100%;
 }
 :host [role=list]:not(.text-position-aside) {
-  display: table;
-  table-layout: fixed;
   width: 100%;
-  list-style: none;
 }
 :host [role=list].vertical {
   height: 100%;

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

@@ -12,9 +12,9 @@ body {
 
 :host,
 .tds-table {
+  box-sizing: border-box;
   border-collapse: collapse;
   display: table;
-  box-sizing: border-box;
 }
 :host *,
 .tds-table * {
@@ -33,18 +33,18 @@ body {
 }
 .tds-table--horizontal-scroll:hover::-webkit-scrollbar-thumb {
   border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
-  background: var(--tds-scrollbar-hover-thumb-color);
+  background: var(--color-foreground-icon-discrete);
   background-clip: padding-box;
 }
 .tds-table--horizontal-scroll::-webkit-scrollbar {
   height: var(--tds-scrollbar-height);
 }
 .tds-table--horizontal-scroll::-webkit-scrollbar-track {
-  background: var(--tds-scrollbar-track-color);
+  background: var(--color-background-layer-01);
 }
 .tds-table--horizontal-scroll::-webkit-scrollbar-thumb {
   border-radius: 40px;
-  background: var(--tds-scrollbar-thumb-color);
+  background: var(--color-foreground-icon-discrete);
   border: var(--tds-scrollbar-thumb-border-width) solid transparent;
   background-clip: padding-box;
 }

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

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host,
 tds-table-body {
   box-sizing: border-box;
@@ -7,43 +10,30 @@ tds-table-body {
 tds-table-body * {
   box-sizing: border-box;
 }
-:host .tds-table__info-message,
-tds-table-body .tds-table__info-message {
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-  display: table-cell;
-  box-sizing: border-box;
-  color: var(--tds-table-color);
-  padding: var(--tds-spacing-element-16);
-  min-width: 192px;
-  vertical-align: top;
-  background-color: transparent;
-  transition: background-color 200ms ease;
-}
 
 tds-table-body.tds-table--zebra-mode-rows-odd tds-table-body-row:nth-child(odd) {
-  background-color: var(--tds-table-zebra-mode-backround);
+  background-color: var(--table-zebra-mode);
 }
 tds-table-body.tds-table--zebra-mode-rows-odd tds-table-body-row:nth-child(odd):hover {
-  background-color: var(--tds-table-body-row-background-hover);
+  background-color: var(--table-body-row-hover);
 }
 tds-table-body.tds-table--zebra-mode-rows-even tds-table-body-row:nth-child(even) {
-  background-color: var(--tds-table-zebra-mode-backround);
+  background-color: var(--table-zebra-mode);
 }
 tds-table-body.tds-table--zebra-mode-rows-even tds-table-body-row:nth-child(even):hover {
-  background-color: var(--tds-table-body-row-background-hover);
+  background-color: var(--table-body-row-hover);
 }
 tds-table-body.tds-table--zebra-mode-columns-odd tds-body-cell:nth-child(odd) {
-  background-color: var(--tds-table-zebra-mode-backround);
+  background-color: var(--table-zebra-mode);
 }
 tds-table-body.tds-table--zebra-mode-columns-odd tds-body-cell.tds-table__body-cell--hover:nth-child(odd) {
-  background-color: var(--tds-table-body-cell-background-hover);
+  background-color: var(--table-body-cell-hover);
 }
 tds-table-body.tds-table--zebra-mode-columns-even tds-body-cell:nth-child(even) {
-  background-color: var(--tds-table-zebra-mode-backround);
+  background-color: var(--table-zebra-mode);
 }
 tds-table-body.tds-table--zebra-mode-columns-even tds-body-cell.tds-table__body-cell--hover:nth-child(even) {
-  background-color: var(--tds-table-body-cell-background-hover);
+  background-color: var(--table-body-cell-hover);
 }
 tds-table-body.tds-table--zebra-mode-columns-even tds-table-body-row:hover tds-body-cell, tds-table-body.tds-table--zebra-mode-columns-odd tds-table-body-row:hover tds-body-cell {
   background-color: transparent;

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

@@ -1,10 +1,17 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host(.tds-table__body-cell) {
   box-sizing: border-box;
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
+  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: table-cell;
   box-sizing: border-box;
-  color: var(--tds-table-color);
+  color: var(--table-text);
   padding: var(--tds-spacing-element-16);
   min-width: 192px;
   vertical-align: top;
@@ -16,7 +23,7 @@
 }
 
 :host(.tds-table__body-cell--hover) {
-  background-color: var(--tds-table-body-cell-background-hover);
+  background-color: var(--table-body-cell-hover);
 }
 
 :host(.tds-table__compact) {
@@ -24,7 +31,7 @@
 }
 
 :host(.tds-table--divider) {
-  border-right: 1px solid var(--tds-table-divider);
+  border-right: 1px solid var(--table-divider);
 }
 
 :host(.tds-table--divider:last-of-type) {

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

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   position: relative;
 }
@@ -14,7 +17,7 @@
   display: inline-block;
 }
 :host(:hover) ::slotted(input:not(:focus)) {
-  background-color: var(--tds-table-input-background-hover);
+  background-color: var(--table-input-hover);
 }
 
 tds-icon.edit-icon {
@@ -27,12 +30,16 @@ tds-icon.edit-icon {
 }
 
 ::slotted(input) {
-  box-sizing: border-box;
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
+  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);
+  color: var(--table-text);
   padding-left: var(--tds-spacing-element-16);
   padding-right: var(--tds-spacing-element-16);
-  color: var(--tds-table-color);
+  box-sizing: border-box;
   background-color: transparent;
   height: 48px;
   border-radius: 0;
@@ -43,17 +50,19 @@ tds-icon.edit-icon {
 }
 
 ::slotted(input)::placeholder {
-  color: var(--tds-table-color);
+  color: var(--table-text);
 }
 
 ::slotted(input:disabled) {
-  background-color: var(--tds-table-input-background-disabled);
+  background-color: var(--table-input-disabled);
+  color: var(--table-input-text-disabled);
+  cursor: not-allowed;
 }
 
 ::slotted(input:focus) {
-  outline: none;
-  background-color: var(--tds-table-input-background-focus);
+  background-color: var(--table-input-focus);
   border-bottom: 2px solid var(--tds-text-field-bar);
+  outline: none;
 }
 
 /* Add compact-design specific styles here */

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

@@ -85,7 +85,7 @@ export class TdsTableBodyInputWrapper {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,
-            } }, this.renderSlot ? h("slot", { onSlotchange: () => this.handleSlotChange() }) : null, this.showIcon ? (h("tds-icon", { class: "edit-icon", slot: "icon", size: "16px", name: "edit" })) : null));
+            } }, this.renderSlot && h("slot", { key: 'ef7332417d9f9c0c2e2e9f4b030b84b0f67b251a', onSlotchange: () => this.handleSlotChange() }), this.showIcon && h("tds-icon", { key: '102e26b6821c0987244a7452341865259ce5f5d7', class: "edit-icon", slot: "icon", size: "16px", name: "edit" })));
     }
     static get is() { return "tds-table-body-input-wrapper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,10 +1,10 @@
 :host(.tds-table__row) {
   box-sizing: border-box;
+  background-color: var(--table-body-row);
+  border-bottom: 1px solid var(--table-divider);
+  color: var(--table-text);
   display: table-row;
-  border-bottom: 1px solid var(--tds-table-divider);
-  background-color: var(--tds-table-body-row-background);
   transition: background-color 200ms ease;
-  color: var(--tds-table-color);
 }
 :host(.tds-table__row) * {
   box-sizing: border-box;
@@ -16,15 +16,15 @@
 }
 
 :host(.tds-table__row:hover) {
-  background-color: var(--tds-table-body-row-background-hover);
+  background-color: var(--table-body-row-hover);
 }
 
 :host(.tds-table__row--selected) {
-  background-color: var(--tds-table-body-row-background-selected);
+  background-color: var(--table-body-row-selected);
 }
 
 :host(.tds-table__row--selected:hover) {
-  background-color: var(--tds-table-body-row-background-selected-hover);
+  background-color: var(--table-body-row-selected-hover);
 }
 
 :host(.tds-table__row--hidden) {
@@ -33,7 +33,6 @@
 
 :host(.tds-table__row--expended) {
   width: 100%;
-  background-color: pink;
 }
 
 :host .tds-form-label--table {
@@ -50,7 +49,7 @@
 }
 
 :host(.tds-table--divider) .tds-table__body-cell--checkbox {
-  border-right: 1px solid var(--tds-table-divider);
+  border-right: 1px solid var(--table-divider);
 }
 
 :host(.tds-table__row--clickable) {
@@ -58,5 +57,7 @@
 }
 
 :host(.tds-table__row--clickable:focus-visible) {
-  outline: var(--focus-outline, 2px solid blue);
+  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
+  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
+  outline-offset: 1px;
 }

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

@@ -68,13 +68,13 @@ export class TdsTableBodyRow {
         }
     }
     render() {
-        return (h(Host, { key: '13b790e1c4586e110853125bb2856166f8090cc3', tabindex: this.clickable ? '0' : null, class: {
+        return (h(Host, { key: 'e9e619ee732dc9d3f3f34cc47abf84ae1d194e1d', tabindex: this.clickable ? '0' : null, class: {
                 'tds-table__row': true,
                 'tds-table__row--selected': this.selected,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table__row--clickable': this.clickable,
-            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "row" }, this.multiselect && (h("td", { key: '3a966516c5a227907f9530d047e6e1c19eb5362c', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '90811b5dd064a36dfe9363dae55376fb7b4ca78d', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '4a16bce9add5ec4b9e4119e5361d556f5ee104f9' })));
+            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "row" }, this.multiselect && (h("td", { key: 'b8be33901f5097ae612521cda831db3c5ff7334a', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '62b918b9aca497c5187a90ffbe8a91ac3b83c1f5', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '570b47dae5bae13f75b7cab00a1b8b2c51912cd5' })));
     }
     static get is() { return "tds-table-body-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,18 +7,18 @@
 }
 :host .tds-table__row,
 :host .tds-table__row-extend {
+  background-color: var(--table-body-row);
+  border-bottom: 1px solid var(--table-divider);
+  color: var(--table-text);
   display: table-row;
-  border-bottom: 1px solid var(--tds-table-divider);
-  background-color: var(--tds-table-body-row-background);
   transition: background-color 200ms ease;
-  color: var(--tds-table-color);
 }
 :host .tds-table__row--expanded {
   border-bottom: none;
 }
 :host .tds-table__row:hover,
 :host .tds-table__row-extend:hover {
-  background-color: var(--tds-table-body-row-background-hover);
+  background-color: var(--table-body-row-hover);
 }
 :host .tds-table__expand-control-container {
   display: flex;
@@ -39,10 +39,9 @@
   cursor: pointer;
 }
 :host .tds-table__expand-control-container .tds-table__expand-input:focus {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
+  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
   outline-offset: 1px;
-  z-index: 1;
 }
 :host .tds-table__expand-control-container .tds-expendable-row-icon {
   height: 16px;
@@ -55,13 +54,13 @@
   transition: background-color 200ms ease;
 }
 :host .tds-table__row-expand--expanded {
-  border-bottom: 1px solid var(--tds-table-divider);
+  border-bottom: 1px solid var(--table-divider);
 }
 :host .tds-table__row-expand .tds-table__cell-expand {
+  color: var(--table-text);
   max-width: 1px;
   overflow: auto;
   padding: 16px 16px 16px 66px;
-  color: var(--tds-table-color);
 }
 :host .tds-table__row-expand .tds-table__cell-expand--overflow-visible {
   overflow: visible;
@@ -71,13 +70,13 @@
 }
 
 :host(.tds-table__row-expand--active) .tds-table__row {
-  background-color: var(--tds-table-body-row-background-selected);
+  background-color: var(--table-body-row-selected);
 }
 :host(.tds-table__row-expand--active) .tds-table__expand-control-container .tds-expendable-row-icon {
   transform: rotate(180deg);
 }
 :host(.tds-table__row-expand--active) .tds-table__row-expand {
-  background-color: var(--tds-table-body-row-background-selected);
+  background-color: var(--table-body-row-selected);
   display: table-row;
 }
 
@@ -93,5 +92,5 @@
 }
 
 :host(.tds-table--divider) .tds-table__cell--expand {
-  border-right: 1px solid var(--tds-table-divider);
+  border-right: 1px solid var(--table-divider);
 }

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

@@ -101,26 +101,26 @@ export class TdsTableBodyRowExpandable {
         this.sendValue();
     }
     render() {
-        return (h(Host, { key: '36be80e7cd0916cb8e196f52676281fcabc1996e', class: {
+        return (h(Host, { key: 'da3c577b253c47cd33ee07d3d028efd923fdb25d', class: {
                 'tds-table__row': true,
                 'tds-table__row-expand--active': this.isExpanded,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
-            } }, h("tr", { key: '868377d055d9d66fcf1824ed811e4a56f67b79e0', id: `expandable-content-${this.rowId}`, class: {
+            } }, h("tr", { key: '7f97fa880a101483167624cfc75d522444ad0824', id: `expandable-content-${this.rowId}`, class: {
                 'tds-table__row': true,
                 'tds-table__row--expanded': this.isExpanded,
-            }, part: "row" }, h("td", { key: '059858ff5293deda48d039fdc81dd4a5d8ae6fce', class: {
+            }, part: "row" }, h("td", { key: 'e51d8a91442882c1ae412d32524fdc7d1db32714', class: {
                 'tds-table__cell-expand': true,
-            } }, h("label", { key: '6e05d93a509cb77cb3fd76f3d869b820b5d83163', class: "tds-table__expand-control-container" }, h("input", { key: 'ed7091d4dfdac43c082ee63548c7bff2e87379dd', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `expandable-content-${this.rowId}`, "aria-label": this.tdsAriaLabelExpandButton }), h("span", { key: '84622275a00b28685834e0de8552f5c7a36bc983', class: "tds-expendable-row-icon" }, h("svg", { key: '633d1030453895343295b30142410ece7f15dec3', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: 'e4d21588ca0bb6fbcd68af3a7afb48bafe180bc1', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", { key: '5c66154a24fe8d21bb6b9d91930ad7efd4cb1ec5' })), h("tr", { key: '1417c7143b8aaafbb2143557e53443cde9afcbde', class: {
+            } }, h("label", { key: '4ad4a3c78f1494f27874b305b1c04a4ed4a0bf5c', class: "tds-table__expand-control-container" }, h("input", { key: '853ffba9075c6b4e78f79fe965cb52a71b1db8dd', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `expandable-content-${this.rowId}`, "aria-label": this.tdsAriaLabelExpandButton }), h("span", { key: '870e9118534a8bd6772d3edc81ed6b58326ea56d', class: "tds-expendable-row-icon" }, h("svg", { key: 'a09133d67f9b768747da1c962e21107c0e6403c1', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '32d527f58e37c9fd797fd8437eb55dd5ae65495b', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", { key: 'd4be14761d18b718cf976749771c3252b7f3d873' })), h("tr", { key: '58c0d4956ff101d90ac48efe2fe748efa1b4d6b9', class: {
                 'tds-table__row-expand': true,
                 'tds-table__row-expand--expanded': this.isExpanded,
-            }, part: "expand-row" }, h("td", { key: 'b72d532f22b5c7c0bc7c7b23caf5887d4228b9d0', class: {
+            }, part: "expand-row" }, h("td", { key: '29264749d12132c22ec96574eaeb8d2384ad653c', class: {
                 'tds-table__cell-expand': true,
                 'tds-table__cell-expand--overflow-hidden': this.overflow === 'hidden',
                 'tds-table__cell-expand--overflow-visible': this.overflow === 'visible',
-            }, part: "expand-row-cell", colSpan: this.columnsNumber }, h("div", { key: '256a827b43a8099b9ea4e5a5a43023ff9bf0b828', style: {
+            }, part: "expand-row-cell", colSpan: this.columnsNumber }, h("div", { key: 'd11b97f03ac06b1f1d64c183619bf56e62b064e8', style: {
                 overflow: this.overflow,
-            } }, h("slot", { key: '6bbc0eeca7b7a654da9c1b7da6992aa8928e1974', name: "expand-row" }))))));
+            } }, h("slot", { key: 'c2feed89d38a97a47a0f07823ab4bca9bb8ae283', name: "expand-row" }))))));
     }
     static get is() { return "tds-table-body-row-expandable"; }
     static get encapsulation() { return "shadow"; }