diff --git a/web-components/package.json b/web-components/package.json
index ed64b9fdb5..22665b5575 100644
--- a/web-components/package.json
+++ b/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@momentum-ui/web-components",
-  "version": "2.14.18",
+  "version": "2.14.19",
   "author": "Yana Harris",
   "license": "MIT",
   "repository": "https://github.com/momentum-design/momentum-ui.git",
diff --git a/web-components/src/[sandbox]/examples/tabs.ts b/web-components/src/[sandbox]/examples/tabs.ts
index 9119c53e6d..2f8737c3f0 100644
--- a/web-components/src/[sandbox]/examples/tabs.ts
+++ b/web-components/src/[sandbox]/examples/tabs.ts
@@ -373,7 +373,7 @@ export class TabsTemplateSandbox extends LitElement {
           Single Button Reset
         </md-toggle-switch>
         <div>
-          <md-tabs justified selected="0">
+          <md-tabs justified selected-index="0">
             <md-tab slot="tab" aria-label="entry-point">
               <span>Entry Point</span>
             </md-tab>
diff --git a/web-components/src/components/avatar/Avatar.ts b/web-components/src/components/avatar/Avatar.ts
index 26e43f80f1..02d280db58 100644
--- a/web-components/src/components/avatar/Avatar.ts
+++ b/web-components/src/components/avatar/Avatar.ts
@@ -94,7 +94,9 @@ export namespace Avatar {
     private get avatarLetterClassMap() {
       return {
         "md-decrypting": this.decrypting,
-        [`md-avatar--${this.color}`]: this.color
+        [`md-avatar--${this.color}`]: this.color,
+        "new-momentum": this.newMomentum,
+        "has-color": !!this.color
       };
     }
 
diff --git a/web-components/src/components/avatar/scss/avatar.scss b/web-components/src/components/avatar/scss/avatar.scss
index d9b6812599..12c8c8bd26 100644
--- a/web-components/src/components/avatar/scss/avatar.scss
+++ b/web-components/src/components/avatar/scss/avatar.scss
@@ -82,8 +82,13 @@
 
   .md-avatar__letter {
     @include avatar-contents-base;
-    background-color: $avatar-letter__background;
-    color: $avatar-letter__color;
+    background-color: $avatar-legacy-letter__background;
+    color: $avatar-legacy-letter__color;
+
+    &.new-momentum {
+      background-color: $avatar-letter__background;
+      color: $avatar-letter__color;
+    }
 
     md-loading {
       align-items: center;
@@ -184,6 +189,10 @@
     &.md-avatar--lime {
       background-color: var(--avatar-lime-bg-color);
     }
+
+    &.has-color {
+      color: $avatar-letter__color-text-color;
+    }
   }
 
   .md-avatar__img--hidden {
diff --git a/web-components/src/components/avatar/scss/settings.scss b/web-components/src/components/avatar/scss/settings.scss
index a28d00d649..1d299ca8fb 100644
--- a/web-components/src/components/avatar/scss/settings.scss
+++ b/web-components/src/components/avatar/scss/settings.scss
@@ -55,6 +55,11 @@ $avatar--rona__shadow--dark:
 $avatar-letter__color: var(--avatar-letter-text-color);
 $avatar-letter__background: var(--avatar-letter-bg-color);
 
+$avatar-legacy-letter__color: var(--avatar-letter-legacy-text-color, var(--avatar-letter-text-color));
+$avatar-legacy-letter__background: var(--avatar-letter-legacy-bg-color, var(--avatar-letter-bg-color));
+
+$avatar-letter__color-text-color: var(--avatar-letter-color-avatar-text-color, --avatar-letter-text-color);
+
 $avatar-icon__color: var(--avatar-icon-icon-color, $black-80);
 $avatar-icon__background: $gray-5-88;
 
diff --git a/web-components/src/components/avatar/tokens/mdv2-avatar-tokens.js b/web-components/src/components/avatar/tokens/mdv2-avatar-tokens.js
index 53c8b39bdb..ad46af2f1e 100644
--- a/web-components/src/components/avatar/tokens/mdv2-avatar-tokens.js
+++ b/web-components/src/components/avatar/tokens/mdv2-avatar-tokens.js
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
 
 const avatar = {
   prefix: "mdv2",
@@ -10,6 +11,17 @@ const avatar = {
     },
     "text-color": {
       common: "$mds-color-theme-common-text-primary-normal"
+    },
+    "legacy-bg-color": {
+      light: colors.gray[10].name,
+      dark: colors.gray[80].name
+    },
+    "legacy-text-color": {
+      light: colors.gray[90].name,
+      dark: colors.gray[10].name
+    },
+    "color-avatar-text-color": {
+      common: "$mds-color-theme-common-text-primary-normal"
     }
   },
   icon: {
diff --git a/web-components/src/components/combobox/ComboBox.test.ts b/web-components/src/components/combobox/ComboBox.test.ts
index 55e0a6ce17..74811159ce 100644
--- a/web-components/src/components/combobox/ComboBox.test.ts
+++ b/web-components/src/components/combobox/ComboBox.test.ts
@@ -1475,18 +1475,21 @@ describe("Combobox Component", () => {
       el.inputValue = "One";
       el["notifySearchResultCount"]();
       await elementUpdated(el);
-      expect(el.ariaLabelForComboBox).toEqual("Search results: 1 results found.");
+
+      const inputEl = el.shadowRoot!.querySelector("input");
+
+      expect(inputEl?.getAttribute("aria-label")).toEqual("Search results: 1 results found.");
 
       el.searchResultAriaLabel = "";
       el.ariaLabel = "Search results";
       el["notifySearchResultCount"]();
       await elementUpdated(el);
-      expect(el.ariaLabelForComboBox).toEqual("Search results, 1 results found.");
+      expect(inputEl?.getAttribute("aria-label")).toEqual("Search results, 1 results found.");
 
       el.ariaLabel = "";
       el["notifySearchResultCount"]();
       await elementUpdated(el);
-      expect(el.ariaLabelForComboBox).toEqual("ComboBox Element, 1 results found.");
+      expect(inputEl?.getAttribute("aria-label")).toEqual("ComboBox Element, 1 results found.");
     });
 
     test("should change selected option for virtual scroll", async () => {
diff --git a/web-components/src/components/combobox/ComboBox.ts b/web-components/src/components/combobox/ComboBox.ts
index 5ea8e84cca..51bc7c53e5 100644
--- a/web-components/src/components/combobox/ComboBox.ts
+++ b/web-components/src/components/combobox/ComboBox.ts
@@ -92,7 +92,8 @@ export namespace ComboBox {
 
     @property({ type: String, reflect: true }) ariaLabel = ""; // This aria-label is used by default when there is no search or list-items are displayed.
     @property({ type: String, attribute: "search-result-aria-label" }) searchResultAriaLabel = ""; // This aria-label is dynamic and used when there is search and list-items are displayed.
-    @internalProperty() ariaLabelForComboBox = ""; // This internal property is used to conditionally set aria-label.
+    @internalProperty()
+    private ariaLabelForComboBox = ""; // This internal property is used to conditionally set aria-label.
 
     @property({ type: String, attribute: "clear-aria-label" }) clearAriaLabel = "Clear";
     @property({ type: String, attribute: "arrow-aria-label" }) arrowAriaLabel = "Expand";
diff --git a/web-components/src/components/date-range-picker/DateRangePicker.test.ts b/web-components/src/components/date-range-picker/DateRangePicker.test.ts
index 9ebf82c258..ae295a3836 100644
--- a/web-components/src/components/date-range-picker/DateRangePicker.test.ts
+++ b/web-components/src/components/date-range-picker/DateRangePicker.test.ts
@@ -32,11 +32,7 @@ describe("DatePicker Component", () => {
     const firstDate = DateTime.fromObject({ month: 11, day: 15 });
     const secondDate = firstDate.plus({ days: 5 });
 
-    const el: DateRangePicker.ELEMENT = await fixture(
-      html`
-        <md-date-range-picker value={''}></md-date-range-picker>
-      `
-    );
+    const el: DateRangePicker.ELEMENT = await fixture(html` <md-date-range-picker value=""></md-date-range-picker> `);
 
     const selectFunc = jest.spyOn(el, "handleDateSelection");
     const updateFunc = jest.spyOn(el, "updateValue");
@@ -81,7 +77,7 @@ describe("DatePicker Component", () => {
     const eventSpy = jest.fn((event: CustomEvent) => {
       capturedEvent = event;
     }) as unknown as EventListener;
-    el.addEventListener('date-range-change', eventSpy as EventListener);
+    el.addEventListener("date-range-change", eventSpy as EventListener);
 
     el.handleDateSelection({ detail: { data: DateTime.fromObject({ month: 1, day: 1 }) } });
     expect(el.startDate).not.toBeUndefined();
@@ -98,12 +94,12 @@ describe("DatePicker Component", () => {
     expect(capturedEvent).not.toBeNull();
     expect(capturedEvent!.detail).toEqual({
       startDate: el.startDate,
-      endDate: el.endDate,
+      endDate: el.endDate
     });
   });
 
   describe("should handle range modification scenarios", () => {
-    const date1 =  DateTime.fromObject({ month: 11, day: 15 });
+    const date1 = DateTime.fromObject({ month: 11, day: 15 });
     const date2 = date1.plus({ days: 10 });
     const date3 = date2.plus({ days: 10 });
     const date4 = date3.plus({ days: 10 });
@@ -113,9 +109,7 @@ describe("DatePicker Component", () => {
       [date4, date3, date2, date1],
       [date2, date1, date4, date3],
       [date3, date4, date1, date2]
-      ]
-    )
-    ("should handle date selection in order %s %s %s %s", async (dateA, dateB, dateC, dateD) => {
+    ])("should handle date selection in order %s %s %s %s", async (dateA, dateB, dateC, dateD) => {
       const el = await fixtureFactory();
       expect(el.startDate).toBeUndefined();
       expect(el.endDate).toBeUndefined();
diff --git a/web-components/src/components/date-range-picker/DateRangePicker.ts b/web-components/src/components/date-range-picker/DateRangePicker.ts
index 1bc9ae0498..cfef1d4eeb 100644
--- a/web-components/src/components/date-range-picker/DateRangePicker.ts
+++ b/web-components/src/components/date-range-picker/DateRangePicker.ts
@@ -47,17 +47,14 @@ export namespace DateRangePicker {
       const selection: DateTime = e.detail.data;
       if (!this.startDate) {
         this.startDate = this.dateToSqlTranslate(selection);
-      }
-      else if (!this.endDate) {
+      } else if (!this.endDate) {
         if (selection < DateTime.fromISO(this.startDate)) {
           this.endDate = this.startDate;
           this.startDate = this.dateToSqlTranslate(selection);
-        }
-        else {
+        } else {
           this.endDate = this.dateToSqlTranslate(selection);
         }
-      }
-      else {
+      } else {
         this.startDate = this.dateToSqlTranslate(selection);
         this.endDate = undefined;
       }
@@ -70,12 +67,12 @@ export namespace DateRangePicker {
       if (!this.startDate || !this.endDate) {
         return;
       }
-      
+
       const event = new CustomEvent("date-range-change", {
         detail: {
           startDate: this.startDate,
-          endDate: this.endDate,
-        },
+          endDate: this.endDate
+        }
       });
       this.dispatchEvent(event);
     }
diff --git a/web-components/src/components/datepicker/scss/datepicker.scss b/web-components/src/components/datepicker/scss/datepicker.scss
index d20461384e..bf4d6c0a15 100644
--- a/web-components/src/components/datepicker/scss/datepicker.scss
+++ b/web-components/src/components/datepicker/scss/datepicker.scss
@@ -27,7 +27,7 @@
   }
 
   &__week {
-    height: $week-height;
+    height: $week-height;    
   }
 
   &__navigation--current-month {
@@ -44,21 +44,23 @@
   }
 
   &__day--names {
-    display: flex;
+    display: flex;    
   }
 
   &__day {
     color: var(--datepicker-default-number-color, inherit);
-    background-color: var(--datepicker-default-number-bg-color, inherit);
+    
     border-radius: 100%;
     display: inline-block;
     height: $day-button-height;
     width: $day-button-height;
+    font-weight: 400;
 
     &--names {
-      color: var(--datepicker-default-days, var(--md-secondary-text-color, $md-gray-70));
+      color: var(--datepicker-default-days, var(--md-secondary-text-color));
       display: flex;
       font-size: $day-name-font-size;
+      font-family: var(--brand-font-bold);
       justify-content: space-around;
       line-height: $day-name-line-height;
       margin: $day-name-margin;
@@ -67,7 +69,7 @@
 
     &::part(button) {
       &:hover {
-        background: var(--datepicker-default-hover-bg-color, $md-gray-70);
+        background: var(--datepicker-default-hover-bg-color);
       }
     }
 
@@ -80,7 +82,7 @@
       font-weight: 700;
 
       &::after {
-        border: var(--datepicker-selected-today-border, 1px solid var(--datepicker-range-text-color, $md-gray-100));
+        border: var(--datepicker-selected-today-border, 1px solid var(--datepicker-range-text-color));
         height: 1.8rem;
         left: 7%;
         position: absolute;
@@ -90,12 +92,12 @@
     }
 
     &--focus::part(button) {
-      background: var(--datepicker-default-number-bg-color, var(--datepicker-range-hover-bg-color, $md-gray-20));
+      background: var(--datepicker-range-hover-bg-color);
     }
 
     &--selected::part(button) {
-      background: var(--datepicker-selected-bg-color, var(--md-primary-text-color, $md-gray-100));
-      color: var(--datepicker-selected-text-color, var(--md-secondary-bg-color, $md-white));
+      background: var(--datepicker-selected-bg-color, var(--md-primary-text-color));
+      color: var(--datepicker-selected-text-color, var(--md-secondary-bg-color));
     }
 
     &--selected::part(button):hover {
@@ -119,7 +121,7 @@
     // The ::before element has a fine-tuned gradient to fill in the hoop but keep the outside edges matching the range-selected bar.
 
     &--in-range::part(button) {
-      color: var(--datepicker-range-text-color, $md-gray-100);
+      color: var(--datepicker-range-text-color);
       z-index: 10;
 
       &::before {
@@ -134,15 +136,16 @@
       }
 
       &:hover {
-        color: var(--datepicker-hover-text-color, var(--datepicker-range-text-color, $md-gray-100));
+        color: var(--datepicker-range-text-color);
       }
 
       &:active {
-        color: var(--datepicker-pressed-text-color, $md-gray-100);
+        color: var(--datepicker-pressed-text-color);
       }
 
       &:focus {
-        color: var(--datepicker-focus-text-color, var(--datepicker-range-text-color, $md-gray-100));
+        z-index: 12;
+        color: var(--datepicker-range-text-color);
 
         &::before {
           background: radial-gradient(
@@ -183,54 +186,74 @@
     }
 
     &--start-date::part(button) {
-      color: var(--md-secondary-bg-color, $md-gray-100);
+      font-family: var(--brand-font-bold);
+      color: var(--datepicker-selected-text-color, var(--md-secondary-bg-color));
+      z-index: 11 ;
+
+      &:hover {
+        color: var(--datepicker-selected-text-color, var(--md-secondary-bg-color));
+      }
+
+      &:focus {
+        color: var(--datepicker-range-text-color);
+      }
 
       &::before {
         background: radial-gradient(
-          circle at 40% center,
-          var(--md-primary-text-color, $md-gray-100) 59%,
-          rgba(0, 0, 0, 0) 50%,
+          circle at 50% center,
+          var(--datepicker-selected-bg-color) 58%,
+          transparent 50%,
           var(--datepicker-range-bg-color) 50%,
           var(--datepicker-range-bg-color) 50%
         );
         border-bottom-left-radius: 1rem;
         border-top-left-radius: 1rem;
+        width: 100%;
       }
 
       &::after {
         background: radial-gradient(
           circle at 50% center,
-          rgba(0, 0, 0, 0) 50%,
-          var(--datepicker-range-edge-bg-color, $md-gray-100) 51%,
-          var(--datepicker-range-edge-bg-color, $md-gray-100) 100%,
-          rgba(0, 0, 0, 0) 100%
+          transparent 40%,
+          var(--datepicker-range-edge-bg-color) 55%,
+          var(--datepicker-range-edge-bg-color) 100%,
+          transparent 100%
         );
         content: "";
       }
     }
 
-    &--end-date::part(button) {
-      color: var(--md-secondary-bg-color, $md-gray-100);
+    &--end-date::part(button) {      
+      font-family: var(--brand-font-bold);
+      color: var(--datepicker-selected-text-color, var(--md-secondary-bg-color));
+
+      &:hover {
+        color: var(--datepicker-selected-text-color, var(--md-secondary-bg-color));
+      }
+
+      &:focus {
+        color: var(--datepicker-range-text-color);
+      }
 
       &::before {
         background: radial-gradient(
-          circle at 47% center,
-          var(--datepicker-range-edge-bg-color, $md-gray-100) 58%,
+          circle at 50% center,
+          var(--datepicker-selected-bg-color) 58%,
           rgba(0, 0, 0, 0) 50%,
           var(--datepicker-range-bg-color) 50%,
           var(--datepicker-range-bg-color) 50%
         );
         border-bottom-right-radius: 1rem;
         border-top-right-radius: 1rem;
-        width: calc(2rem - 2px);
+        width: 100%;
       }
 
       &::after {
         background: radial-gradient(
           circle at 50% center,
-          rgba(0, 0, 0, 0) 50%,
-          var(--datepicker-range-edge-bg-color, $md-gray-100) 51%,
-          var(--datepicker-range-edge-bg-color, $md-gray-100) 100%,
+          rgba(0, 0, 0, 0) 40%,
+          var(--datepicker-range-edge-bg-color) 51%,
+          var(--datepicker-range-edge-bg-color) 100%,
           rgba(0, 0, 0, 0) 100%
         );
         content: "";
diff --git a/web-components/src/components/datepicker/tokens/lm-datepicker-tokens.js b/web-components/src/components/datepicker/tokens/lm-datepicker-tokens.js
index 9decfeedc0..00d086fb43 100644
--- a/web-components/src/components/datepicker/tokens/lm-datepicker-tokens.js
+++ b/web-components/src/components/datepicker/tokens/lm-datepicker-tokens.js
@@ -57,10 +57,6 @@ const datepicker = {
       }
     },
     edge: {
-      "text-color": {
-        light: colors.gray["05"].name,
-        dark: colors.gray[100].name
-      },
       "bg-color": {
         light: colors.gray[100].name,
         dark: colors.gray["05"].name
diff --git a/web-components/src/components/datepicker/tokens/md-datepicker-tokens.js b/web-components/src/components/datepicker/tokens/md-datepicker-tokens.js
index ecd2fe8aab..d74ee79a09 100644
--- a/web-components/src/components/datepicker/tokens/md-datepicker-tokens.js
+++ b/web-components/src/components/datepicker/tokens/md-datepicker-tokens.js
@@ -57,10 +57,6 @@ const datepicker = {
       }
     },
     edge: {
-      "text-color": {
-        light: colors.gray["05"].name,
-        dark: colors.gray[100].name
-      },
       "bg-color": {
         light: colors.gray[100].name,
         dark: colors.gray["05"].name
diff --git a/web-components/src/components/datepicker/tokens/mdv2-datepicker-tokens.js b/web-components/src/components/datepicker/tokens/mdv2-datepicker-tokens.js
index b58248e307..476a76d3bc 100644
--- a/web-components/src/components/datepicker/tokens/mdv2-datepicker-tokens.js
+++ b/web-components/src/components/datepicker/tokens/mdv2-datepicker-tokens.js
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
 
 const datepicker = {
   prefix: "mdv2",
@@ -18,10 +19,7 @@ const datepicker = {
     },
     number: {
       color: {
-        common: "$mds-color-theme-text-primary-normal"
-      },
-      "bg-color": {
-        common: "$mds-color-theme-button-secondary-normal"
+        common: "$mds-color-theme-text-secondary-normal"
       }
     },
     hover: {
@@ -69,9 +67,22 @@ const datepicker = {
     }
   },
   range: {
+    "text-color": {
+      common: "$mds-color-theme-text-primary-normal"
+    },
+    "bg-color": {
+      light: colors.gray[20].name,
+      dark: colors.gray[60].name
+    },
     hover: {
       "bg-color": {
-        common: "$mds-color-theme-button-secondary-normal"
+        light: colors.gray[30].name,
+        dark: colors.gray[70].name
+      }
+    },
+    edge: {
+      "bg-color": {
+        common: "$mds-color-theme-background-accent-normal"
       }
     }
   }
diff --git a/web-components/src/components/toggle-switch/scss/mixins.scss b/web-components/src/components/toggle-switch/scss/mixins.scss
index 7e0c094f0e..f98ad3f79f 100644
--- a/web-components/src/components/toggle-switch/scss/mixins.scss
+++ b/web-components/src/components/toggle-switch/scss/mixins.scss
@@ -1,15 +1,17 @@
 @mixin toggle-switch-vars (
-  $background-color: var(--toggle-switch-bg-color, $lm-toggle-switch-bg-color-light),
-  $background-color--hover:  var(--toggle-switch-bg-color--hover, $lm-toggle-switch-bg-color--hover-light),
-  $background-color--checked: var( --toggle-switch-bg-color--checked, $lm-toggle-switch-bg-color--checked-light),
-  $background-color--checked-hover: var(--toggle-switch-bg-color--checked-hover, $lm-toggle-switch-bg-color--checked-hover-light),
-  $background-color--disabled: var(--toggle-switch-bg-color--disabled, $lm-toggle-switch-bg-color--disabled-light),
-  $background-color--disabled-checked: var(--toggle-switch-bg-color--disabled--checked, $lm-toggle-switch-bg-color--disabled--checked-light),
-  $background-color-slider: var(--toggle-switch-slider-color, $lm-toggle-switch-slider-color-light),
-  $background-color-slider-checked: var(--toggle-switch-slider-color--checked, $background-color-slider),
-  $background-color-slider-disabled:  var(--toggle-switch-slider-color-disabled, $lm-toggle-switch-slider-color-disabled-light),
-  $background-color-slider-disabled--checked:  var(  --toggle-switch-slider-color-disabled--checked, $lm-toggle-switch-slider-color-disabled--checked-light),
-  $border-focus: var( --toggle-switch-focus, $lm-toggle-switch-focus-light)
+  $background-color: var(--toggle-switch-bg-color),
+  $background-color--hover: var(--toggle-switch-bg-color--hover),
+  $background-color--active: var(--toggle-switch-bg-color--pressed, var(--toggle-switch-bg-color--hover)),
+  $background-color--checked: var(--toggle-switch-bg-color--checked),
+  $background-color--checked-hover: var(--toggle-switch-bg-color--checked-hover),
+  $background-color--checked-active: var(--toggle-switch-bg-color--checked-pressed, var(--toggle-switch-bg-color--checked-hover)),
+  $background-color--disabled: var(--toggle-switch-bg-color--disabled),  
+  $background-color--disabled-checked: var(--toggle-switch-bg-color--disabled--checked),
+  $background-color-slider: var(--toggle-switch-slider-color),
+  $background-color-slider-checked: var(--toggle-switch-slider-color--checked),
+  $background-color-slider-disabled:  var(--toggle-switch-slider-color-disabled),
+  $background-color-slider-disabled--checked: var(--toggle-switch-slider-color-disabled--checked),
+  $border-focus: var(--toggle-switch-focus)
 ) {
   .md-toggle-switch__input {
     + .md-toggle-switch__label {
@@ -25,13 +27,19 @@
           background-color: $background-color--hover;
         }
       }
+
+      &:active {
+        .md-toggle-switch__label__container {
+          background-color: $background-color--active;
+        }
+      }
     }
 
     &:focus,
     &.focus {
       + .md-toggle-switch__label {
         .md-toggle-switch__label__container {
-          outline: 2px solid var(--md-focus-border-color, $md-blue-70);
+          outline: 2px solid var(--md-focus-border-color);
         }
       }
     }
@@ -53,6 +61,12 @@
             background-color: $background-color--checked-hover;
           }
         }
+
+        &:active {
+          .md-toggle-switch__label__container {
+            background-color: $background-color--checked-active;
+          }
+        }
       }
     }
 
@@ -67,7 +81,8 @@
             background-color: $background-color-slider-disabled;
           }
         }
-        &:hover {
+        &:hover,
+        &:active {
           .md-toggle-switch__label__container {
             background-color: $background-color--disabled;
           }
@@ -86,7 +101,8 @@
               }
             }
 
-          &:hover {
+          &:hover,
+          &:active {
             .md-toggle-switch__label__container {
               background-color: $background-color--disabled-checked;
             }
diff --git a/web-components/src/components/toggle-switch/scss/module.scss b/web-components/src/components/toggle-switch/scss/module.scss
index b2bcbeb6f9..398e7080f3 100644
--- a/web-components/src/components/toggle-switch/scss/module.scss
+++ b/web-components/src/components/toggle-switch/scss/module.scss
@@ -1,11 +1,6 @@
 @import "@/wc_scss/tools/functions/core";
 
-@import "@/wc_scss/colors/settings";
-@import "@/wc_scss/colors/settings-transparencies.scss";
 @import "@/wc_scss/settings/core";
-@import "@/wc_scss/settings/forms";
-
-@import "./vars/lm-toggle-switch-settings";
 
 @import "./settings";
 @import "./mixins";
diff --git a/web-components/src/components/toggle-switch/scss/settings.scss b/web-components/src/components/toggle-switch/scss/settings.scss
index 8e068bc0a1..e7aa315523 100644
--- a/web-components/src/components/toggle-switch/scss/settings.scss
+++ b/web-components/src/components/toggle-switch/scss/settings.scss
@@ -1,14 +1,16 @@
-$toggle-switch__size: rem-calc(20); //20px;
-$toggle-switch__size--small: rem-calc(18); //18px;
-$toggle-switch__size--smaller: rem-calc(16); //16px;
+@use "@/wc_scss/colors/settings-transparencies.scss" as color-token;
 
-$toggle-switch__width: rem-calc(40); //40px;
-$toggle-switch__height: 24px !default;
+$toggle-switch__size: rem-calc(20);
+$toggle-switch__size--small: rem-calc(18);
+$toggle-switch__size--smaller: rem-calc(16);
 
-$toggle-switch__width--small: rem-calc(36); //36px;
-$toggle-switch__height--small: rem-calc(22); //22px;
+$toggle-switch__width: rem-calc(40);
+$toggle-switch__height: rem-calc(24) !default;
 
-$toggle-switch__width--smaller: rem-calc(32); //32px;
-$toggle-switch__height--smaller: rem-calc(20); //20px;
+$toggle-switch__width--small: rem-calc(36);
+$toggle-switch__height--small: rem-calc(22);
 
-$slider-box-shadow-color: $black-16;
\ No newline at end of file
+$toggle-switch__width--smaller: rem-calc(32);
+$toggle-switch__height--smaller: rem-calc(20);
+
+$slider-box-shadow-color: color-token.$black-32;
\ No newline at end of file
diff --git a/web-components/src/components/toggle-switch/scss/toggle-switch.scss b/web-components/src/components/toggle-switch/scss/toggle-switch.scss
index db4193398f..63257f5b2b 100644
--- a/web-components/src/components/toggle-switch/scss/toggle-switch.scss
+++ b/web-components/src/components/toggle-switch/scss/toggle-switch.scss
@@ -63,7 +63,7 @@
 
         &::after {
           border-radius: 100%;          
-          box-shadow: 0 1px 2px 0 $black-32;
+          box-shadow: 0 1px 2px 0 $slider-box-shadow-color;
           content: "";
           height: $toggle-switch__size;
           left: 2px;
diff --git a/web-components/src/components/toggle-switch/tokens/lm-toggle-tokens.js b/web-components/src/components/toggle-switch/tokens/lm-toggle-tokens.js
index c99bdcf810..0bfe5d1c59 100644
--- a/web-components/src/components/toggle-switch/tokens/lm-toggle-tokens.js
+++ b/web-components/src/components/toggle-switch/tokens/lm-toggle-tokens.js
@@ -31,8 +31,10 @@ const toggleSwitch = {
   },
   slider: {
     color: {
-      light: colors.white[100].name,
-      dark: colors.white[100].name
+      common: colors.white["100"].name
+    },
+    "color--checked": {
+      common: colors.white["100"].name
     },
     "color-disabled": {
       light: colors.gray["05"].name,
diff --git a/web-components/src/components/toggle-switch/tokens/md-toggle-tokens.js b/web-components/src/components/toggle-switch/tokens/md-toggle-tokens.js
index fdca9be009..05f693ebf5 100644
--- a/web-components/src/components/toggle-switch/tokens/md-toggle-tokens.js
+++ b/web-components/src/components/toggle-switch/tokens/md-toggle-tokens.js
@@ -31,8 +31,10 @@ const toggleSwitch = {
   },
   slider: {
     color: {
-      light: colors.white["100"].name,
-      dark: colors.white["100"].name
+      common: colors.white["100"].name
+    },
+    "color--checked": {
+      common: colors.white["100"].name
     },
     "color-disabled": {
       light: colors.gray["05"].name,
diff --git a/web-components/src/components/toggle-switch/tokens/mdv2-toggle-tokens.js b/web-components/src/components/toggle-switch/tokens/mdv2-toggle-tokens.js
index f150dfc40a..d82d3f4f76 100644
--- a/web-components/src/components/toggle-switch/tokens/mdv2-toggle-tokens.js
+++ b/web-components/src/components/toggle-switch/tokens/mdv2-toggle-tokens.js
@@ -5,13 +5,16 @@ const toggleSwitch = {
   prefix: "mdv2",
   component: "toggle-switch",
   "bg-color": {
-    common: "$mds-color-theme-button-secondary-normal"
+    common: "$mds-color-theme-background-secondary-hover"
   },
   "border-color": {
     common: "$mds-color-theme-outline-input-normal"
   },
   "bg-color--hover": {
-    common: "$mds-color-theme-button-secondary-hover"
+    common: "$mds-color-theme-control-inactive-hover"
+  },
+  "bg-color--pressed": {
+    common: "$mds-color-theme-control-inactive-pressed"
   },
   "bg-color--checked": {
     common: "$mds-color-theme-control-active-normal"
@@ -19,24 +22,27 @@ const toggleSwitch = {
   "bg-color--checked-hover": {
     common: "$mds-color-theme-control-active-hover"
   },
+  "bg-color--checked-pressed": {
+    common: "$mds-color-theme-control-active-pressed"
+  },
   "bg-color--disabled": {
-    common: "$mds-color-theme-button-secondary-disabled"
+    common: "$mds-color-theme-control-active-disabled"
   },
   "bg-color--disabled--checked": {
-    common: "$mds-color-theme-button-secondary-pressed"
+    common: "$mds-color-theme-control-active-disabled"
   },
   slider: {
     color: {
-      common: "$mds-color-theme-text-primary-normal"
+      common: "$mds-color-theme-common-text-primary-normal"
     },
     "color--checked": {
-      common: "$mds-color-theme-inverted-text-primary-normal"
+      common: "$mds-color-theme-common-text-primary-normal"
     },
     "color-disabled": {
-      common: "$mds-color-theme-text-primary-disabled"
+      common: "$mds-color-theme-common-text-primary-disabled"
     },
     "color-disabled--checked": {
-      common: "$mds-color-theme-inverted-text-primary-disabled"
+      common: "$mds-color-theme-common-text-primary-disabled"
     }
   },
   focus: {
diff --git a/web-components/src/mixins/RovingTabIndexMixin.ts b/web-components/src/mixins/RovingTabIndexMixin.ts
index af29c0797e..923099fe0c 100644
--- a/web-components/src/mixins/RovingTabIndexMixin.ts
+++ b/web-components/src/mixins/RovingTabIndexMixin.ts
@@ -48,11 +48,36 @@ export const RovingTabIndexMixin = <T extends AnyConstructor<SlotableClass & Rov
   class RovingTabIndex extends SlottedMixin(base) {
     private _selected = 0;
     @property({ type: Boolean, reflect: true, attribute: "roving-prevent-focus" }) rovingPreventFocus = false;
+
+    /**
+     * @deprecated Use `selected-index` instead.
+     * The index of the currently selected element.
+     */
     @property({ type: Number, reflect: true })
     get selected() {
       return this._selected;
     }
     set selected(index: number) {
+      this.updateSelectedIndex(index);
+    }
+
+    /**
+     * The index of the currently selected element.
+     */
+    @property({ type: Number, reflect: true, attribute: "selected-index" })
+    get selectedIndex() {
+      return this._selected;
+    }
+    set selectedIndex(index: number) {
+      this.updateSelectedIndex(index);
+    }
+
+    /**
+     * Updates the selected index and manages the tabIndex of the slotted elements.
+     *
+     * @param index - The new selected index.
+     */
+    private updateSelectedIndex(index: number) {
       const oldIndex = this._selected;
 
       if (this.slotted[oldIndex]) {
diff --git a/web-components/src/wc_scss/settings/avatar.scss b/web-components/src/wc_scss/settings/avatar.scss
deleted file mode 100644
index 94762e7f0d..0000000000
--- a/web-components/src/wc_scss/settings/avatar.scss
+++ /dev/null
@@ -1,96 +0,0 @@
-$avatar__class: "md-avatar";
-
-$avatar--inactive__opacity: 0.55;
-
-$avatar__font-size: rem-calc(14);
-$avatar__size: rem-calc(40);
-$avatar__font-factor: 0.35;
-$avatar__line-height-factor: 0.5;
-
-$avatar-sizes: (xsmall, $icon-dnd_8, $icon-pto_8, $icon-handset_8, $icon-camera_12, $icon-share-screen_8, 18),
-  (small, $icon-dnd_14, $icon-pto_14, $icon-handset_14, $icon-camera_16, $icon-share-screen_14, 28),
-  (medium, $icon-dnd_20, $icon-pto_20, $icon-handset_20, $icon-camera_20, $icon-share-screen_20, 40),
-  (large, $icon-dnd_28, $icon-pto_28, $icon-handset_28, $icon-camera_26, $icon-share-screen_28, 52),
-  (xlarge, $icon-dnd_40, $icon-pto_32, $icon-handset_40, $icon-camera_32, $icon-share-screen_36, 84),
-  (18, $icon-dnd_8, $icon-pto_8, $icon-handset_8, $icon-camera_12, $icon-share-screen_8),
-  (24, $icon-dnd_12, $icon-pto_12, $icon-handset_12, $icon-camera_12, $icon-share-screen_12),
-  (28, $icon-dnd_14, $icon-pto_14, $icon-handset_14, $icon-camera_16, $icon-share-screen_14),
-  (36, $icon-dnd_18, $icon-pto_18, $icon-handset_18, $icon-camera_18, $icon-share-screen_18),
-  (40, $icon-dnd_20, $icon-pto_20, $icon-handset_20, $icon-camera_20, $icon-share-screen_20),
-  (44, $icon-dnd_24, $icon-pto_24, $icon-handset_24, $icon-camera_24, $icon-share-screen_24),
-  (52, $icon-dnd_28, $icon-pto_28, $icon-handset_28, $icon-camera_26, $icon-share-screen_28),
-  (56, $icon-dnd_28, $icon-pto_28, $icon-handset_28, $icon-camera_26, $icon-share-screen_28),
-  (72, $icon-dnd_36, $icon-pto_32, $icon-handset_36, $icon-camera_32, $icon-share-screen_36),
-  (80, $icon-dnd_40, $icon-pto_32, $icon-handset_40, $icon-camera_32, $icon-share-screen_36),
-  (84, $icon-dnd_40, $icon-pto_32, $icon-handset_40, $icon-camera_32, $icon-share-screen_36);
-
-$avatar--active__shadow:
-  inset 0 0 0 rem-calc(1) $md-green-50,
-  inset 0 0 0 rem-calc(2) $white-24;
-$avatar--active__shadow--dark:
-  inset 0 0 0 rem-calc(1) $md-green-50,
-  inset 0 0 0 rem-calc(2) $black-24;
-$avatar--engaged__shadow:
-  inset 0 0 0 rem-calc(1) $md-yellow-40,
-  inset 0 0 0 rem-calc(2) $white-24;
-$avatar--engaged__shadow--dark:
-  inset 0 0 0 rem-calc(1) $md-yellow-40,
-  inset 0 0 0 rem-calc(2) $black-24;
-$avatar--idle__shadow:
-  inset 0 0 0 rem-calc(1) var(--md-primary-seperator-color-default),
-  inset 0 0 0 rem-calc(2) $white-24;
-$avatar--idle__shadow--dark:
-  inset 0 0 0 rem-calc(1) var(--md-primary-seperator-color-default),
-  inset 0 0 0 rem-calc(2) $black-24;
-$avatar--rona__shadow:
-  inset 0 0 0 rem-calc(1) $md-red-60,
-  inset 0 0 0 rem-calc(2) $white-24;
-$avatar--rona__shadow--dark:
-  inset 0 0 0 rem-calc(1) $md-red-60,
-  inset 0 0 0 rem-calc(2) $black-24;
-
-$avatar-letter__color: $black-80;
-$avatar-letter__background: $gray-5-88;
-
-$avatar-icon__color: $black-80;
-$avatar-icon__background: $gray-5-88;
-
-$avatar-self__color: $md-theme-50;
-$avatar-self__background: $md-white-100;
-$avatar-self__border: 1px solid $black-08;
-
-$avatar-img__background: $gray-5-88;
-
-$avatar-badge__spacing: 0.14em;
-
-$avatar-failure-badge__size: 0.85em;
-$avatar-failure-badge__font-size: 0.85em;
-$avatar-failure-badge__color: $md-red-50;
-$avatar-failure-badge__background: $md-red-10;
-
-$avatar-notification-badge__size: 0.66em;
-$avatar-notification-badge__color: $md-theme-50;
-
-$avatar-bot__border-radius: 0.571em;
-$avatar-bot__font-size: 0.571em;
-$avatar-bot__line-height: 1.25em;
-$avatar-bot__padding: 0.25em 0.75em;
-$avatar-bot__background: $md-gray-70;
-$avatar-bot__color: $md-white-100;
-
-$composite-avatar__class: "md-composite-avatar";
-
-$composite-avatar--small__size: rem-calc(28);
-$composite-avatar--medium__size: rem-calc(40);
-$composite-avatar--84__size: rem-calc(84);
-$composite-avatar--large__size: rem-calc(135);
-
-$composite-avatar--small__avatar-size: rem-calc(18);
-$composite-avatar--medium__avatar-size: rem-calc(26);
-$composite-avatar--84__avatar-size: rem-calc(52);
-$composite-avatar--large__avatar-size: rem-calc(90);
-
-$composite-avatar--small__avatar-font-size: rem-calc(6);
-$composite-avatar--medium__avatar-font-size: rem-calc(9);
-$composite-avatar--84__avatar-font-size: rem-calc(18);
-$composite-avatar--large__avatar-font-size: rem-calc(31);
diff --git a/web-components/src/wc_scss/settings/forms.scss b/web-components/src/wc_scss/settings/forms.scss
index 951e3b6a99..2306836013 100644
--- a/web-components/src/wc_scss/settings/forms.scss
+++ b/web-components/src/wc_scss/settings/forms.scss
@@ -1,26 +1,29 @@
+@use "@/wc_scss/colors/settings" as color-tokens;
+@use "@/wc_scss/colors/settings-transparencies.scss" as transparent-color-token;
+
 $form-spacing: rem-calc(16) !default;
 
-$form-control__background: $black-16 !default;
-$form-control__background--checked: $md-theme-50 !default;
-$form-control__background--checked--dark: $md-theme-70 !default;
-$form-control__background--checked-hover: $md-theme-60 !default;
-$form-control__background--checked-hover--dark: $md-theme-70 !default;
-$form-control__background--checked-pressed: $md-theme-70 !default;
-$form-control__background--checked-pressed--dark: $md-theme-80 !default;
-$form-control__background--dark: $white-48 !default;
-$form-control__background--hover: $black-24 !default;
-$form-control__background--hover--dark: $white-64 !default;
-$form-control__background--pressed: $black-32 !default;
-$form-control__background--pressed--dark: $white-80 !default;
-$form-control__background-border--focus: $md-black-100 !default;
-$form-control__background-border--focus--dark: $md-white-100 !default;
-$form-control__content: $md-white-100 !default;
+$form-control__background: transparent-color-token.$black-16 !default;
+$form-control__background--checked: color-tokens.$md-theme-50 !default;
+$form-control__background--checked--dark: color-tokens.$md-theme-70 !default;
+$form-control__background--checked-hover: color-tokens.$md-theme-60 !default;
+$form-control__background--checked-hover--dark: color-tokens.$md-theme-70 !default;
+$form-control__background--checked-pressed: color-tokens.$md-theme-70 !default;
+$form-control__background--checked-pressed--dark: color-tokens.$md-theme-80 !default;
+$form-control__background--dark: transparent-color-token.$white-48 !default;
+$form-control__background--hover: transparent-color-token.$black-24 !default;
+$form-control__background--hover--dark: transparent-color-token.$white-64 !default;
+$form-control__background--pressed: transparent-color-token.$black-32 !default;
+$form-control__background--pressed--dark: transparent-color-token.$white-80 !default;
+$form-control__background-border--focus: color-tokens.$md-black-100 !default;
+$form-control__background-border--focus--dark: color-tokens.$md-white-100 !default;
+$form-control__content: color-tokens.$md-white-100 !default;
 $form-control__label: inherit !default;
-$form-control__label--dark: $md-white-100 !default;
+$form-control__label--dark: color-tokens.$md-white-100 !default;
 $form-control__opacity--disabled: 0.4 !default;
 $form-label-bottom-margin: rem-calc(4) !default;
 $form-label-font-weight: $font-weight-normal !default;
 $form-label-line-height: 1.5 !default;
 $form-label-pointer: pointer !default;
 $form-label-small-transform: capitalize !default;
-$form-section-border-color: $md-gray-20 !default;
+$form-section-border-color: color-tokens.$md-gray-20 !default;
diff --git a/web-components/src/wc_scss/themes/global--mdv2.scss b/web-components/src/wc_scss/themes/global--mdv2.scss
index 653626a75d..9386c5614c 100644
--- a/web-components/src/wc_scss/themes/global--mdv2.scss
+++ b/web-components/src/wc_scss/themes/global--mdv2.scss
@@ -36,7 +36,7 @@ $inter-medium-font: "Inter Medium", $font-family-sans-serif;
   --brand-font-weight-medium: 500;
   --brand-font-weight-bold: 700;
 
-  font-size: var(--rem-base);
+  font-size: 14px;
   font-family: var(--brand-font-regular);
   font-weight: var(--brand-font-weight-regular);
 
@@ -104,14 +104,18 @@ $inter-medium-font: "Inter Medium", $font-family-sans-serif;
   --md-dynamic-layout-button-border-color: #{$mds-color-theme-outline-button-normal};
   --md-dynamic-layout-button-inverted-border-color: #{$mds-color-theme-inverted-outline-button-normal};
 
-  --md-navigation-bg-color: transparent;
-  --md-header-bg-color: transparent;
-  --md-app-bg-color: var(--md-primary-gradient-background);
-  --md-header-bg-color: transparent;
   --md-header-separator-color: transparent;
-  --md-content-bg-color: var(--md-secondary-gradient-background);
-  --md-task-list-bg-color: transparent;
-  --md-agent-history-bg-color: transparent;
+
+  /**
+   * Temporarily disable overriding token  background colours for mdv2
+   * 
+  **/
+  //--md-header-bg-color: transparent;
+  //--md-navigation-bg-color: transparent;
+  //--md-app-bg-color: var(--md-primary-gradient-background);
+  //--md-content-bg-color: var(--md-secondary-gradient-background);
+  //--md-task-list-bg-color: transparent;//#{$mds-color-theme-inverted-outline-button-normal};
+  //--md-agent-history-bg-color: #{$mds-color-theme-inverted-outline-button-normal};
 
   --md-nav-divider-primary: linear-gradient(
     0deg,
@@ -131,14 +135,18 @@ $inter-medium-font: "Inter Medium", $font-family-sans-serif;
   --md-scrollbar-background-active-indicator: #{$mds-color-theme-scrollbar-button-pressed};
   --md-scrollbar-background-disabled-indicator: #{$mds-color-theme-scrollbar-background-secondary-normal};
 
-  --md-table-primary-bg-color: #{$mds-color-theme-background-primary-ghost};
-  --md-table-header-bg-color: #{$mds-color-theme-background-primary-ghost};
-  --md-table-header-border-bottom: 0 -1px 0 0 #{$mds-color-theme-outline-primary-normal} inset;
-  --md-table-cell-border-bottom: 1px solid #{$mds-color-theme-outline-secondary-normal};
-  --md-table-border-style: none;
-  --md-table-sub-nav-bg-color: #{$mds-color-theme-background-primary-hover};
-  --md-table-vertical-divider-color: #{$mds-color-theme-outline-secondary-normal};
-  --md-table-pinned-border-color: #{$mds-color-theme-outline-share-inactive};
+  /**
+   * Temporarily disable overriding table background colours for mdv2
+   * 
+  **/
+  // --md-table-primary-bg-color: #{$mds-color-theme-background-primary-ghost};
+  // --md-table-header-bg-color: #{$mds-color-theme-background-primary-ghost};
+  // --md-table-header-border-bottom: 0 -1px 0 0 #{$mds-color-theme-outline-primary-normal} inset;
+  // --md-table-cell-border-bottom: 1px solid #{$mds-color-theme-outline-secondary-normal};
+  // --md-table-border-style: none;
+  // --md-table-sub-nav-bg-color: #{$mds-color-theme-background-primary-hover};
+  // --md-table-vertical-divider-color: #{$mds-color-theme-outline-secondary-normal};
+  // --md-table-pinned-border-color: #{$mds-color-theme-outline-share-inactive};
 
   // Background colors can not be overwritten because they are being used by consumers in unexpected ways
   // New background colors should be introduced and these phased out