@scania/tegel 1.34.0-multibrand-beta.6 → 1.35.0-console-warnings.beta.0

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

@@ -27,8 +27,6 @@ export class TdsSlider {
         this.value = '0';
         this.min = '0';
         this.max = '100';
-        this.state = 'default';
-        this.modeVariant = null;
         this.ticks = '0';
         this.showTickNumbers = false;
         this.tooltip = false;
@@ -403,34 +401,30 @@ export class TdsSlider {
     }
     render() {
         const ariaLabel = this.readOnly ? this.tdsReadOnlyAriaLabel : this.label || this.tdsAriaLabel;
-        return (h("div", { key: '715e34fce10a8431f444f4e31600a43a691760a9', class: {
+        return (h("div", { key: 'b4dd7706df0be052f0028a5f8ba6b6158f403b13', class: {
                 'tds-slider-wrapper': true,
                 'read-only': this.readOnly,
-                'slider-default': this.state === 'default',
-                'slider-success': this.state === 'success',
-                'slider-primary': this.modeVariant === 'primary',
-                'slider-secondary': this.modeVariant === 'secondary',
-            } }, h("input", { key: 'bbb03b06fb9ee3c9d15f7888907eeb1df2e1812c', 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: '5d3f484389748702214078aa29c425959cefc699', class: "sr-only", "aria-live": "assertive", ref: (el) => {
+            } }, h("input", { key: '672c2aaa6dfee6489cd5e764ef151728c2af10fc', 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: '8c7200436a9ef6524a3b2d554a2556bda8cc6afd', class: "sr-only", "aria-live": "assertive", ref: (el) => {
                 this.ariaLiveElement = el;
-            } }), h("div", { key: '0084722a4767cf16b16af7b845b0990c66a68152', class: {
+            } }), h("div", { key: '1ce8e7ddccd19ca15733683768900c8fcde514d3', 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: '436d227707358c9459e87437f1a6152a8690521b', id: `${this.sliderId}-label`, class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: 'd95bd64d13310a061699e5c462d0b7c1d4fe8fb6', class: "tds-slider__input-values" }, h("div", { key: 'dcdc740f99194c02629c98f44b6b38f81d63704f', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: 'd9a9495e45681cd5974ac1bbfed4690a9026db40', class: "tds-slider__controls" }, h("div", { key: 'a856d6150e600f767a5de856583a191f5bd9978c', 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: '70f49886c665c70f568011dca856615b31b5b175', name: "minus", size: "16px" })))), h("div", { key: '65bea558bd5451e7cd83764443307e710aac0608', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: 'a6f63b8e0d6ee9a1c72417dff877a94176ca7879', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '0a47b1b774438f3af9f815f91f0338651490a739', 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: '6be0fedd7c9fabea6bd6021d5ab4796e269c5002', class: "tds-slider__track", ref: (el) => {
+            }, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: '54616f1cb5e4c13541f6f5fa700ddf4b1c4a9493', id: `${this.sliderId}-label`, class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: 'f6b8283409e9fb74ebf5fe89af5d88c29fde904d', class: "tds-slider__input-values" }, h("div", { key: '30532947c70dc8e0612fea3c01c25a5e86dacfca', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '6c001b8caba4a396bb9f4f4f3ba7b9ee6ca36f84', class: "tds-slider__controls" }, h("div", { key: '7a5804b789f84a4cd749c21d0ecc4b73bf7bae09', 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: '41db4dc1a8fda4972303fd48400078035648ca5c', name: "minus", size: "16px" })))), h("div", { key: 'f3cb2039ec4245b1d5c58bb819675381c4490197', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: '38bf8ca015894f3a42a0e9e33800cc7f0ff9c8d5', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '6a5aaa5d652d55f23db24b1b531664d125fc2a23', 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: '0c99475a8bdb1fdec04358421ec34630111a63b8', 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: 'd21c081bdc2519364297e81afb4dc42570924108', class: "tds-slider__track-fill", ref: (el) => {
+            } }, h("div", { key: 'd3ece50db5fbc17e4ebbf4272faa17fcf201dccf', class: "tds-slider__track-fill", ref: (el) => {
                 this.trackFillElement = el;
-            } }), h("div", { key: 'd5889d39ac0dd7dd0db2d121a4f006f5dab0b820', class: "tds-slider__thumb", ref: (el) => {
+            } }), h("div", { key: 'c304176e6a240820418d80aa8bfad35fbbdaf0f4', 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: 'b5f7e229f9b8ac62903b47c8c78e4892952c687a', class: "tds-slider__value" }, this.value, h("svg", { key: '0c017b4600c7a1d43d093f34a45728f0325f357a', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '7621d32d782565d97dd760391ba13048b25cd064', 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: '959efc065763750af541bcd2bc5427d4f2615d1e', 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: '7c46c4f8b3cc3bf3aeae7c841a2f38e7b3d1dfbb', class: "tds-slider__value" }, this.value, h("svg", { key: '871a05a8fc1560c8e94071172c57563d63e10f22', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0c99295a2049b3aac5d0472880e63acc4318fa07', 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: 'bf42f5b512d3041a88bd8cc420a5a4aaeb875e49', class: "tds-slider__thumb-inner", ref: (el) => {
                 this.thumbInnerElement = el;
-            } })))), this.useInput && (h("div", { key: '93429de6f4b06b34d46b5897c36be2daa0c944e9', class: "tds-slider__input-values" }, h("div", { key: 'da03b4b36ddf882c0f07d1f6ff15ab1d7b8aadc7', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: 'fc90336048ed2b9f98b8afe7ffa8f9b193817cb5', class: "tds-slider__input-field-wrapper" }, h("input", { key: '93be2292f0b6285f1bb57699d80913ba07f9d267', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, "aria-label": this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max, step: this.step })))), this.useControls && (h("div", { key: '9dfbe87c4bdbc632cff5b093d81f68fd9629a6eb', class: "tds-slider__controls" }, h("div", { key: 'b78da8c73e51773e0b00c86cbd3143d543b272ca', 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: '9f2d1d93a14c1c10f7c7317283aec3a66e5818b1', name: "plus", size: "16px" })))))));
+            } })))), this.useInput && (h("div", { key: '9a1ed941f13b84e738500921b12aeb21ace2464c', class: "tds-slider__input-values" }, h("div", { key: '2bdf5b0fb2687075b2fc12ce931859d2f26a0685', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '480825ddccd550527ac18f046c6a8ce26baaba87', class: "tds-slider__input-field-wrapper" }, h("input", { key: '94a1446990ea0ae3955e8db9f0119e4a0ec71970', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, "aria-label": this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max, step: this.step })))), this.useControls && (h("div", { key: 'b7415e621df023ffe0eca844d9970454d01c72ce', class: "tds-slider__controls" }, h("div", { key: '044a984a7212d56f8c1bcb5709608d90677d7647', 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: '0b6410f7fb4af32681c3f49f29c9696e871bfd5a', name: "plus", size: "16px" })))))));
     }
     static get is() { return "tds-slider"; }
     static get originalStyleUrls() {
@@ -517,42 +511,6 @@ export class TdsSlider {
                 "reflect": false,
                 "defaultValue": "'100'"
             },
-            "state": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'default' | 'success'",
-                    "resolved": "\"default\" | \"success\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "State of input"
-                },
-                "attribute": "state",
-                "reflect": false,
-                "defaultValue": "'default'"
-            },
-            "modeVariant": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'primary' | 'secondary'",
-                    "resolved": "\"primary\" | \"secondary\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Mode variant of the Slider"
-                },
-                "attribute": "mode-variant",
-                "reflect": false,
-                "defaultValue": "null"
-            },
             "ticks": {
                 "type": "string",
                 "mutable": false,

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

@@ -1,3 +1,44 @@
+/* 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;
@@ -6,52 +47,42 @@
   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(--radius) * 2);
-  height: calc(var(--radius) * 2);
+  width: calc(var(--spinner-radius) * 2);
+  height: calc(var(--spinner-radius) * 2);
   transform: scale(-1, 1) rotate(-90deg);
-  /* Generate size variants */
 }
 .tds-spinner-svg-xs {
-  --radius: 8px;
-  --stroke-width: 3px;
-  --animation-speed: 1.8s;
+  --spinner-radius: var(--spinner-radius-xs);
+  --spinner-stroke-width: var(--spinner-stroke-width-xs);
+  --spinner-animation-speed: var(--spinner-speed);
 }
 .tds-spinner-svg-sm {
-  --radius: 12px;
-  --stroke-width: 4px;
-  --animation-speed: 1.8s;
+  --spinner-radius: var(--spinner-radius-sm);
+  --spinner-stroke-width: var(--spinner-stroke-width-sm);
+  --spinner-animation-speed: var(--spinner-speed);
 }
 .tds-spinner-svg-md {
-  --radius: 26px;
-  --stroke-width: 6px;
-  --animation-speed: 1.8s;
+  --spinner-radius: var(--spinner-radius-md);
+  --spinner-stroke-width: var(--spinner-stroke-width-md);
+  --spinner-animation-speed: var(--spinner-speed);
 }
 .tds-spinner-svg-lg {
-  --radius: 42px;
-  --stroke-width: 8px;
-  --animation-speed: 2s;
+  --spinner-radius: var(--spinner-radius-lg);
+  --spinner-stroke-width: var(--spinner-stroke-width-lg);
+  --spinner-animation-speed: var(--spinner-speed-lg);
 }
 
 .tds-spinner-circle {
-  /* 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);
+  cx: var(--spinner-radius);
+  cy: var(--spinner-radius);
+  r: calc(var(--spinner-radius) - var(--spinner-stroke-width) / 2);
   fill: none;
-  /* Stroke configuration */
-  --stroke-dash: calc((2 * var(--PI)) * var(--radius));
-  stroke-dasharray: var(--stroke-dash);
-  stroke-width: var(--stroke-width);
-  /* Color variants */
+  --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;
 }
 .tds-spinner-circle-standard {
   stroke: var(--spinner-background);
@@ -62,9 +93,9 @@
 
 @keyframes dash {
   from {
-    stroke-dashoffset: calc(-1 * var(--stroke-dash));
+    stroke-dashoffset: calc(-1 * var(--spinner-stroke-dash));
   }
   to {
-    stroke-dashoffset: var(--stroke-dash);
+    stroke-dashoffset: var(--spinner-stroke-dash);
   }
 }

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

@@ -1,14 +1,13 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 export class TdsSpinner {
     constructor() {
         this.size = 'lg';
         this.variant = 'standard';
     }
     render() {
-        return (h(Host, { key: 'bf2c551b6aae9bb2c6b8c67154fd8a81bb331c6e', "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { key: 'ddfe38e85892d3bd72d56dd6c9483f22d164e415', class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { key: 'e2ba6926fdb28d085bdd0f0a23170fc5fb908e9e', class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
+        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}` }))));
     }
     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,6 +1,3 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 :host {
   position: relative;
   display: table-cell;
@@ -17,21 +14,23 @@
 }
 :host [role=listitem].lg {
   padding: 0 20px;
-  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);
+  font: var(--tds-detail-01);
+  letter-spacing: var(--tds-detail-01-ls);
 }
 :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(--stepper-divider-line);
+  background-color: var(--tds-stepper-divider-line);
   height: 36px;
   width: 1px;
   top: 40px;
@@ -40,25 +39,25 @@
 :host [role=listitem].lg.horizontal::after {
   content: " ";
   position: absolute;
-  background-color: var(--stepper-divider-line);
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   left: calc(50% + 24px);
   right: 0;
-  top: 16px;
+  top: 18px;
 }
 :host [role=listitem].lg.horizontal::before {
   content: " ";
   position: absolute;
-  background-color: var(--stepper-divider-line);
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   right: calc(50% + 24px);
   left: 0;
-  top: 16px;
+  top: 18px;
 }
 :host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::after {
   content: " ";
   position: absolute;
-  background-color: var(--stepper-divider-line);
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   top: 16px;
   width: 10px;
@@ -68,7 +67,7 @@
 :host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::before {
   content: " ";
   position: absolute;
-  background-color: var(--stepper-divider-line);
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   top: 16px;
   width: 10px;
@@ -77,12 +76,8 @@
 }
 :host [role=listitem].sm {
   padding: 0 20px;
-  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);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
 }
 :host [role=listitem].sm .index-container {
   vertical-align: -webkit-baseline-middle;
@@ -100,7 +95,7 @@
 :host [role=listitem].sm.vertical::after {
   content: " ";
   position: absolute;
-  background-color: var(--stepper-divider-line);
+  background-color: var(--tds-stepper-divider-line);
   height: 20px;
   width: 1px;
   top: 34px;
@@ -109,7 +104,7 @@
 :host [role=listitem].sm.vertical::before {
   content: " ";
   position: absolute;
-  background-color: var(--stepper-divider-line);
+  background-color: var(--tds-stepper-divider-line);
   height: 20px;
   width: 1px;
   top: 34px;
@@ -118,7 +113,7 @@
 :host [role=listitem].sm.horizontal::after {
   content: " ";
   position: absolute;
-  background-color: var(--stepper-divider-line);
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   left: calc(50% + 16px + 8px);
   right: 0;
@@ -127,7 +122,7 @@
 :host [role=listitem].sm.horizontal::before {
   content: " ";
   position: absolute;
-  background-color: var(--stepper-divider-line);
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   left: 0;
   right: calc(50% + 24px);
@@ -136,7 +131,7 @@
 :host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::after {
   content: " ";
   position: absolute;
-  background-color: var(--stepper-divider-line);
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   top: 13px;
   width: 10px;
@@ -146,7 +141,7 @@
 :host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::before {
   content: " ";
   position: absolute;
-  background-color: var(--stepper-divider-line);
+  background-color: var(--tds-stepper-divider-line);
   height: 1px;
   top: 13px;
   width: 10px;
@@ -154,52 +149,42 @@
   right: auto;
 }
 :host [role=listitem] .content-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
   border-radius: 100px;
-  border-width: 1px;
-  border-style: solid;
+  border: 1px solid var(--tds-stepper-icon-background);
   text-align: center;
   position: relative;
 }
 :host [role=listitem] .content-container.error {
-  border-color: var(--stepper-icon-step-border-warning);
-  color: var(--stepper-icon-step-border-warning);
+  border-color: var(--tds-stepper-icon-step-border-color-warning);
+  color: var(--tds-stepper-icon-step-border-color-warning);
 }
 :host [role=listitem] .content-container.success {
-  background-color: var(--stepper-icon-step-border-success);
-  border-color: var(--stepper-icon-step-border-success);
+  background-color: var(--tds-stepper-icon-step-border-color-success);
+  border-color: var(--tds-stepper-icon-step-border-color-success);
   color: var(--tds-white);
 }
 :host [role=listitem] .content-container.current {
-  color: var(--stepper-current-number-with-border);
+  background-color: var(--tds-stepper-background);
+  color: var(--tds-stepper-color);
 }
 :host [role=listitem] .content-container.upcoming {
-  border-color: var(--stepper-label-border-upcoming);
-  color: var(--stepper-label-text-upcoming);
+  background-color: transparent;
+  border-color: var(--tds-stepper-label-border-color-upcoming);
+  color: var(--tds-stepper-label-text-color-upcoming);
 }
 :host [role=listitem] .label {
   text-align: center;
 }
 :host [role=listitem] .label.lg {
-  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);
+  font: var(--tds-detail-01);
+  letter-spacing: var(--tds-detail-01-ls);
 }
 :host [role=listitem] .label.sm {
-  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);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
 }
 :host [role=listitem] .label.upcoming {
-  color: var(--stepper-label-text-upcoming);
+  color: var(--tds-stepper-label-text-color-upcoming);
   opacity: var(--tds-stepper-label-text-opacity-upcoming);
 }
 

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

@@ -4,7 +4,10 @@
   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(--color-foreground-icon-discrete);
+  background: var(--tds-scrollbar-hover-thumb-color);
   background-clip: padding-box;
 }
 .tds-table--horizontal-scroll::-webkit-scrollbar {
   height: var(--tds-scrollbar-height);
 }
 .tds-table--horizontal-scroll::-webkit-scrollbar-track {
-  background: var(--color-background-layer-01);
+  background: var(--tds-scrollbar-track-color);
 }
 .tds-table--horizontal-scroll::-webkit-scrollbar-thumb {
   border-radius: 40px;
-  background: var(--color-foreground-icon-discrete);
+  background: var(--tds-scrollbar-thumb-color);
   border: var(--tds-scrollbar-thumb-border-width) solid transparent;
   background-clip: padding-box;
 }

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

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