@scania/tegel 1.33.0 → 1.34.0-internal-variables-demo.0

package/dist/collection/components/spinner/spinner.css

@@ -1,44 +1,3 @@
-/* Component variables aka overrides */
-:root {
-  --spinner-background-inverted: var(--tds-white);
-}
-
-:root,
-.scania,
-.scania .tds-mode-light {
-  --spinner-background: var(--tds-blue-400);
-}
-
-.scania .tds-mode-dark {
-  --spinner-background: var(--tds-blue-400);
-}
-
-.traton,
-.traton .tds-mode-light {
-  --spinner-background: rgba(0, 72, 82, 1);
-}
-
-.traton .tds-mode-dark {
-  --spinner-background: rgba(194, 191, 182, 1);
-}
-
-/* Component variables */
-:root {
-  --spinner-speed: 1.8s;
-  --spinner-speed-lg: 2s;
-  --spinner-radius-xs: 8px;
-  --spinner-radius-sm: 12px;
-  --spinner-radius-md: 26px;
-  --spinner-radius-lg: 42px;
-  --spinner-radius: var(--spinner-radius-lg);
-  --spinner-stroke-width-xs: 3px;
-  --spinner-stroke-width-sm: 4px;
-  --spinner-stroke-width-md: 6px;
-  --spinner-stroke-width-lg: 8px;
-  --spinner-stroke-width: var(--spinner-stroke-width-lg);
-  --PI: 3.14159265358979;
-}
-
 :host {
   box-sizing: border-box;
   display: block;
@@ -47,42 +6,52 @@
   box-sizing: border-box;
 }
 
+/* Size configuration */
+/* Animation mixin */
 .tds-spinner-svg {
+  --radius: var(--radius-lg);
+  --stroke-width: var(--stroke-width-lg);
+  --animation-speed: var(--speed-lg);
+  --PI: 3.14159265358979;
   display: block;
-  width: calc(var(--spinner-radius) * 2);
-  height: calc(var(--spinner-radius) * 2);
+  width: calc(var(--radius) * 2);
+  height: calc(var(--radius) * 2);
   transform: scale(-1, 1) rotate(-90deg);
+  /* Generate size variants */
 }
 .tds-spinner-svg-xs {
-  --spinner-radius: var(--spinner-radius-xs);
-  --spinner-stroke-width: var(--spinner-stroke-width-xs);
-  --spinner-animation-speed: var(--spinner-speed);
+  --radius: 8px;
+  --stroke-width: 3px;
+  --animation-speed: 1.8s;
 }
 .tds-spinner-svg-sm {
-  --spinner-radius: var(--spinner-radius-sm);
-  --spinner-stroke-width: var(--spinner-stroke-width-sm);
-  --spinner-animation-speed: var(--spinner-speed);
+  --radius: 12px;
+  --stroke-width: 4px;
+  --animation-speed: 1.8s;
 }
 .tds-spinner-svg-md {
-  --spinner-radius: var(--spinner-radius-md);
-  --spinner-stroke-width: var(--spinner-stroke-width-md);
-  --spinner-animation-speed: var(--spinner-speed);
+  --radius: 26px;
+  --stroke-width: 6px;
+  --animation-speed: 1.8s;
 }
 .tds-spinner-svg-lg {
-  --spinner-radius: var(--spinner-radius-lg);
-  --spinner-stroke-width: var(--spinner-stroke-width-lg);
-  --spinner-animation-speed: var(--spinner-speed-lg);
+  --radius: 42px;
+  --stroke-width: 8px;
+  --animation-speed: 2s;
 }
 
 .tds-spinner-circle {
-  cx: var(--spinner-radius);
-  cy: var(--spinner-radius);
-  r: calc(var(--spinner-radius) - var(--spinner-stroke-width) / 2);
+  /* Circle configuration */
+  animation: dash var(--animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
+  cx: var(--radius);
+  cy: var(--radius);
+  r: calc(var(--radius) - var(--stroke-width) / 2);
   fill: none;
-  --spinner-stroke-dash: calc((2 * var(--PI)) * var(--spinner-radius));
-  stroke-dasharray: var(--spinner-stroke-dash);
-  stroke-width: var(--spinner-stroke-width);
-  animation: dash var(--spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
+  /* Stroke configuration */
+  --stroke-dash: calc((2 * var(--PI)) * var(--radius));
+  stroke-dasharray: var(--stroke-dash);
+  stroke-width: var(--stroke-width);
+  /* Color variants */
 }
 .tds-spinner-circle-standard {
   stroke: var(--spinner-background);
@@ -93,9 +62,9 @@
 
 @keyframes dash {
   from {
-    stroke-dashoffset: calc(-1 * var(--spinner-stroke-dash));
+    stroke-dashoffset: calc(-1 * var(--stroke-dash));
   }
   to {
-    stroke-dashoffset: var(--spinner-stroke-dash);
+    stroke-dashoffset: var(--stroke-dash);
   }
 }

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

@@ -1,13 +1,14 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 export class TdsSpinner {
     constructor() {
         this.size = 'lg';
         this.variant = 'standard';
     }
     render() {
-        return (h("div", { key: 'de6aa9263fc0e7189002156e7e0f24b58a615149', "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { key: '40d43902392034b39f7497369ade14caf6259385', class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { key: 'ef94a92d9b0fe8cbf468a6dbce51ab19de071e43', class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
+        return (h(Host, { key: '258284f4a0e66ef317ebf68f1e84535bf4525b2f', "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { key: '4c5543d50a45c97f658d9328df8ed957d1e074c9', class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { key: 'ccf4e40860c20df27d693e2c613a965278ac1d6c', class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
     }
     static get is() { return "tds-spinner"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["spinner.scss"]

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/step/step.js

@@ -40,7 +40,7 @@ export class TdsStep {
         }
     }
     render() {
-        return (h(Host, { key: 'f049d976121a1179979026cd3087ad459183de06' }, h("div", { key: '1f961578e8e54ffc9e0d0c2966c86e3e32f8ddd8', 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: 'f83033e0a0761227d911ac77cac9c64c31fe4c11', 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: '83c92f388cfebe37e0fb94c81d14adc391fbbbfa', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: '1c6381a25f8af42afe54c0c8eaff4090bf14ee80', name: "label" }))))));
+        return (h(Host, { key: '63f48cb400926167cb53d6913e1b0edac574c2dc' }, h("div", { key: 'a9483ebdd03951cf1828cdac06ef86cd6b4e27ba', 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: 'a23c61ecdf87f217d94264e93318de8020e30fc7', 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: '0366447fa1a632cc011de046eaf1577c30bca23f', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: '4cc352a04e2851c9517099a974451cc75ed4d87e', name: "label" }))))));
     }
     static get is() { return "tds-step"; }
     static get encapsulation() { return "shadow"; }

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

@@ -60,12 +60,12 @@ export class TdsTableBody {
         }
     }
     render() {
-        return (h(Host, { key: '22e2e49b6db83c7c71e1e674b3dbfcb1ffd04e66', "data-selected-rows": this.multiselectArrayJSON, class: {
+        return (h(Host, { key: '1a7e07924ed9f36b8c4359789148963ab3851ae7', "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: 'deb2aa129f332b48f7b9a38b0de25c2076fd86d9' })));
+            } }, h("slot", { key: 'a8da63114252a56f50b4823baf90a9eae0eb414b' })));
     }
     static get is() { return "tds-table-body"; }
     static get originalStyleUrls() {

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

@@ -83,13 +83,13 @@ export class TdsTableBodyCell {
             // Conditionally set padding style
             padding: paddingStyle,
         };
-        return (h(Host, { key: '726912df89435650c3ad1f39729fdff7d2a497e3', class: {
+        return (h(Host, { key: '353d08afb49ccbae4a9e96212491770089670eb1', 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,
-            }, style: dynamicStyles, role: "cell" }, this.cellValue, h("slot", { key: 'ff6fb6613f29e94552916cfa75932b670e22ea80' })));
+            }, style: dynamicStyles, role: "cell" }, this.cellValue, h("slot", { key: 'f95a7ad598989fa63646a80a2cc30a46583e1f93' })));
     }
     static get is() { return "tds-body-cell"; }
     static get encapsulation() { return "shadow"; }

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

@@ -81,11 +81,11 @@ export class TdsTableBodyInputWrapper {
         }
     }
     render() {
-        return (h(Host, { key: '47496dfe7467e43cede5af53d6c30fe17c116eaf', class: {
+        return (h(Host, { key: '9fabe030017ee975b37b1d0c26adbffa092bb739', class: {
                 '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: 'bf8e229f4e82bf5cfff7f10e6a42122c55c571a3', onSlotchange: () => this.handleSlotChange() }), this.showIcon && h("tds-icon", { key: '1f03e14af874769b376c3fb3c631791d80bb8eef', class: "edit-icon", slot: "icon", size: "16px", name: "edit" })));
     }
     static get is() { return "tds-table-body-input-wrapper"; }
     static get encapsulation() { return "shadow"; }