diff --git a/packages/components/addon/components/hds/dropdown/list-item/copy-item.hbs b/packages/components/addon/components/hds/dropdown/list-item/copy-item.hbs
index d1cc4f8ff8..35f77a9c41 100644
--- a/packages/components/addon/components/hds/dropdown/list-item/copy-item.hbs
+++ b/packages/components/addon/components/hds/dropdown/list-item/copy-item.hbs
@@ -4,11 +4,7 @@
       class="hds-dropdown-list-item__copy-item-title hds-typography-body-100 hds-font-weight-semibold"
     >{{@copyItemTitle}}</div>
   {{/if}}
-  <button
-    type="button"
-    class="{{if @state (concat 'is-' @state)}} {{if this.isSuccess 'is-success'}}"
-    {{on "click" this.copyCode}}
-  >
+  <button type="button" class="{{if this.isSuccess 'is-success'}}" {{on "click" this.copyCode}}>
     <div class="hds-dropdown-list-item__copy-item-text hds-typography-code-100">
       {{this.text}}
     </div>
diff --git a/packages/components/addon/components/hds/dropdown/list-item/interactive.hbs b/packages/components/addon/components/hds/dropdown/list-item/interactive.hbs
index 2329862bb3..832b7a521e 100644
--- a/packages/components/addon/components/hds/dropdown/list-item/interactive.hbs
+++ b/packages/components/addon/components/hds/dropdown/list-item/interactive.hbs
@@ -1,7 +1,6 @@
 <li class={{this.classNames}}>
   {{#if @route}}
     <LinkTo
-      class="{{if @state (concat 'is-' @state)}}"
       @current-when={{@current-when}}
       @models={{hds-link-to-models @model @models}}
       @query={{hds-link-to-query @query}}
@@ -19,7 +18,7 @@
       </div>
     </LinkTo>
   {{else if @href}}
-    <a target="_blank" rel="noopener noreferrer" href={{@href}} class="{{if @state (concat 'is-' @state)}}">
+    <a target="_blank" rel="noopener noreferrer" href={{@href}}>
       {{#if @icon}}
         <div class="hds-dropdown-list-item__interactive-icon">
           <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
@@ -30,7 +29,7 @@
       </div>
     </a>
   {{else}}
-    <button class="{{if @state (concat 'is-' @state)}}" type="button" ...attributes>
+    <button type="button" ...attributes>
       {{#if @icon}}
         <div class="hds-dropdown-list-item__interactive-icon">
           <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
diff --git a/packages/components/app/styles/components/button.scss b/packages/components/app/styles/components/button.scss
index c5e194f051..437cd31a8d 100644
--- a/packages/components/app/styles/components/button.scss
+++ b/packages/components/app/styles/components/button.scss
@@ -29,13 +29,13 @@ $hds-button-focus-border-width: 3px;
   // This covers all of the browsers and focus scenarios (due to the custom focus design).
   &:disabled,
   &[disabled],
-  &.is-disabled,
+  &.mock-disabled,
   &:disabled:focus,
   &[disabled]:focus,
-  &.is-disabled:focus,
+  &.mock-disabled:focus,
   &:disabled:hover,
   &[disabled]:hover,
-  &.is-disabled:hover {
+  &.mock-disabled:hover {
     background-color: var(--token-color-surface-faint);
     border-color: var(--token-color-border-primary);
     box-shadow: none;
@@ -57,7 +57,7 @@ $hds-button-focus-border-width: 3px;
   }
 
   &:focus,
-  &.is-focus {
+  &.mock-focus {
     box-shadow: none;
 
     &::before {
@@ -145,7 +145,7 @@ $size-props: (
   color: var(--token-color-foreground-high-contrast);
 
   &:hover,
-  &.is-hover {
+  &.mock-hover {
     background-color: var(--token-color-palette-blue-300);
     border-color: var(--token-color-palette-blue-400);
     color: var(--token-color-foreground-high-contrast);
@@ -153,7 +153,7 @@ $size-props: (
   }
 
   &:focus,
-  &.is-focus {
+  &.mock-focus {
     background-color: var(--token-color-palette-blue-200);
     border-color: var(--token-color-focus-action-internal);
     color: var(--token-color-foreground-high-contrast);
@@ -172,7 +172,7 @@ $size-props: (
   }
 
   &:active,
-  &.is-active {
+  &.mock-active {
     background-color: var(--token-color-palette-blue-400);
     border-color: var(--token-color-palette-blue-400);
     box-shadow: none;
@@ -190,7 +190,7 @@ $size-props: (
   color: var(--token-color-foreground-primary);
 
   &:hover,
-  &.is-hover {
+  &.mock-hover {
     background-color: var(--token-color-surface-primary);
     border-color: var(--token-color-border-strong);
     color: var(--token-color-foreground-primary);
@@ -198,7 +198,7 @@ $size-props: (
   }
 
   &:focus,
-  &.is-focus {
+  &.mock-focus {
     background-color: var(--token-color-surface-faint);
     border-color: var(--token-color-focus-action-internal);
     color: var(--token-color-foreground-primary);
@@ -208,7 +208,7 @@ $size-props: (
   }
 
   &:active,
-  &.is-active {
+  &.mock-active {
     background-color: var(--token-color-surface-interactive-active);
     border-color: var(--token-color-border-strong);
     box-shadow: none;
@@ -225,7 +225,7 @@ $size-props: (
   color: var(--token-color-foreground-action);
 
   &:hover,
-  &.is-hover {
+  &.mock-hover {
     background-color: var(--token-color-surface-primary);
     border-color: var(--token-color-border-strong);
     color: var(--token-color-foreground-action-hover);
@@ -233,7 +233,7 @@ $size-props: (
   }
 
   &:focus,
-  &.is-focus {
+  &.mock-focus {
     border-color: var(--token-color-focus-action-internal);
     color: var(--token-color-foreground-action);
     &::before {
@@ -242,7 +242,7 @@ $size-props: (
   }
 
   &:active,
-  &.is-active {
+  &.mock-active {
     background-color: var(--token-color-surface-interactive-active);
     border-color: var(--token-color-border-strong);
     box-shadow: none;
@@ -254,13 +254,13 @@ $size-props: (
 
   &:disabled,
   &[disabled],
-  &.is-disabled,
+  &.mock-disabled,
   &:disabled:focus,
   &[disabled]:focus,
-  &.is-disabled:focus,
+  &.mock-disabled:focus,
   &:disabled:hover,
   &[disabled]:hover,
-  &.is-disabled:hover {
+  &.mock-disabled:hover {
     background-color: transparent;
     border-color: transparent;
 
@@ -277,7 +277,7 @@ $size-props: (
   color: var(--token-color-foreground-critical-on-surface);
 
   &:hover,
-  &.is-hover {
+  &.mock-hover {
     background-color: var(--token-color-palette-red-300);
     border-color: var(--token-color-palette-red-400);
     color: var(--token-color-foreground-high-contrast);
@@ -285,7 +285,7 @@ $size-props: (
   }
 
   &:focus,
-  &.is-focus {
+  &.mock-focus {
     background-color: var(--token-color-surface-critical);
     border-color: var(--token-color-focus-critical-internal);
     color: var(--token-color-foreground-critical-on-surface);
@@ -295,7 +295,7 @@ $size-props: (
   }
 
   &:active,
-  &.is-active {
+  &.mock-active {
     background-color: var(--token-color-palette-red-400);
     border-color: var(--token-color-palette-red-400);
     box-shadow: none;
diff --git a/packages/components/app/styles/components/dropdown.scss b/packages/components/app/styles/components/dropdown.scss
index 41c09dc728..bf968160f0 100644
--- a/packages/components/app/styles/components/dropdown.scss
+++ b/packages/components/app/styles/components/dropdown.scss
@@ -40,7 +40,7 @@ $hds-dropdown-toggle-border-radius: 5px;
   padding: 1px;
 
   &:hover,
-  &.is-hover {
+  &.mock-hover {
     background-color: var(--token-color-surface-interactive);
     border-color: var(--token-color-border-strong);
     cursor: pointer;
@@ -49,7 +49,7 @@ $hds-dropdown-toggle-border-radius: 5px;
   @include hds-focus-ring-with-pseudo-element($top: -1px, $right: -1px, $bottom: -1px, $left: -1px, $radius: $hds-dropdown-toggle-border-radius);
 
   &:active,
-  &.is-active {
+  &.mock-active {
     background-color: var(--token-color-surface-interactive-active);
     border-color: var(--token-color-border-strong);
   }
@@ -166,7 +166,7 @@ $hds-dropdown-toggle-border-radius: 5px;
     width: 100%;
 
     &:hover,
-    &.is-hover {
+    &.mock-hover {
       background-color: var(--token-color-surface-interactive-hover);
       cursor: pointer;
     }
@@ -174,18 +174,18 @@ $hds-dropdown-toggle-border-radius: 5px;
     @include hds-focus-ring-basic();
 
     &:focus,
-    &.is-focus {
+    &.mock-focus {
       //TODO this focus is just way too complex
       background-color:  var(--token-color-surface-action);
       border-color: var(--token-color-focus-action-internal);
     }
 
     &:active,
-    &.is-active {
+    &.mock-active {
       background-color: var(--token-color-surface-interactive-active);
     }
 
-    &.is-success {
+    &.mock-success {
       background-color: var(--token-color-surface-success);
       border-color: var(--token-color-border-success);
 
@@ -275,7 +275,7 @@ $hds-dropdown-toggle-border-radius: 5px;
     // and define their values in the color variants below
 
     &:hover,
-    &.is-hover {
+    &.mock-hover {
       color: var(--current-color-hover);
       &::before {
         background-color: currentColor;
@@ -284,7 +284,7 @@ $hds-dropdown-toggle-border-radius: 5px;
 
     // default focus for browsers that still rely on ":focus"
     &:focus,
-    &.is-focus {
+    &.mock-focus {
       color: var(--current-color-focus);
       &::after {
         background-color: var(--current-background-color);
@@ -312,7 +312,7 @@ $hds-dropdown-toggle-border-radius: 5px;
     // remove the focus ring on "active + focused" state (by design)
     &:focus:active,
     &:focus-visible:active,
-    &.is-focus.is-active {
+    &.mock-focus.mock-active {
       &::after {
         background-color: var(--current-background-color);
         box-shadow: none;
@@ -321,7 +321,7 @@ $hds-dropdown-toggle-border-radius: 5px;
     }
 
     &:active,
-    &.is-active {
+    &.mock-active {
       color: var(--current-color-active);
       &::before {
         background-color: currentColor;
diff --git a/packages/components/app/styles/mixins/_focus-ring.scss b/packages/components/app/styles/mixins/_focus-ring.scss
index 0c09493ba5..f5d775f43d 100644
--- a/packages/components/app/styles/mixins/_focus-ring.scss
+++ b/packages/components/app/styles/mixins/_focus-ring.scss
@@ -8,7 +8,8 @@
 
   // default focus for browsers that still rely on ":focus"
   &:focus,
-  &.is-focus {
+  &.is-focus,
+  &.mock-focus {
     box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
   }
   // undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles
@@ -21,7 +22,8 @@
   }
   // remove the focus ring on "active + focused" state (by design)
   &:focus:active,
-  &.is-focus.is-active {
+  &.is-focus.is-active,
+  &.mock-focus.is-active {
     box-shadow: none;
   }
 }
@@ -45,7 +47,8 @@
 
   // default focus for browsers that still rely on ":focus"
   &:focus,
-  &.is-focus {
+  &.is-focus,
+  &.mock-focus {
     &::before {
       box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
     }
@@ -64,7 +67,8 @@
   }
   // remove the focus ring on "active + focused" state (by design)
   &:focus:active,
-  &.is-focus.is-active {
+  &.is-focus.is-active,
+  &.mock-focus.is-active {
     &::before {
       box-shadow: none;
     }
diff --git a/packages/components/tests/dummy/app/controllers/components.js b/packages/components/tests/dummy/app/controllers/components.js
new file mode 100644
index 0000000000..fb466da9e9
--- /dev/null
+++ b/packages/components/tests/dummy/app/controllers/components.js
@@ -0,0 +1,37 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { scheduleOnce } from '@ember/runloop';
+
+function replaceMockStates() {
+  document.querySelectorAll('[mock-state-value]').forEach((element) => {
+    let targets;
+    if (element.attributes['mock-state-selector']) {
+      targets = element.querySelectorAll(
+        element.attributes['mock-state-selector'].value
+      );
+    } else {
+      targets = [element];
+    }
+    const states = element.attributes['mock-state-value'].value.split('+');
+    const classes = states.map((state) => `mock-${state.trim()}`);
+    targets.forEach((target) => {
+      target.classList.add(...classes);
+    });
+  });
+}
+export default class ComponentsController extends Controller {
+  @service router;
+
+  constructor() {
+    super(...arguments);
+    this.router.on('routeDidChange', this, 'routeDidChange');
+  }
+
+  routeDidChange() {
+    scheduleOnce('afterRender', this, replaceMockStates);
+  }
+
+  willDestroy() {
+    this.router.off('routeDidChange', this, 'routeDidChange');
+  }
+}
diff --git a/packages/components/tests/dummy/app/templates/components/button.hbs b/packages/components/tests/dummy/app/templates/components/button.hbs
index 81854a2ec5..dff9bfbf6a 100644
--- a/packages/components/tests/dummy/app/templates/components/button.hbs
+++ b/packages/components/tests/dummy/app/templates/components/button.hbs
@@ -344,7 +344,13 @@
           <div>
             <span class="dummy-text-small">{{capitalize size}}/{{state}}:</span>
             <br />
-            <Hds::Button @icon="plus" @text={{capitalize state}} @size={{size}} @color={{color}} class="is-{{state}}" />
+            <Hds::Button
+              @icon="plus"
+              @text={{capitalize state}}
+              @size={{size}}
+              @color={{color}}
+              mock-state-value={{state}}
+            />
           </div>
         {{/each}}
       {{/each}}
@@ -358,7 +364,7 @@
               @text={{capitalize state}}
               @color={{color}}
               @isFullWidth={{true}}
-              class="is-{{state}}"
+              mock-state-value={{state}}
             />
           </div>
         {{/each}}
diff --git a/packages/components/tests/dummy/app/templates/components/dropdown.hbs b/packages/components/tests/dummy/app/templates/components/dropdown.hbs
index 053144bd40..026515a794 100644
--- a/packages/components/tests/dummy/app/templates/components/dropdown.hbs
+++ b/packages/components/tests/dummy/app/templates/components/dropdown.hbs
@@ -860,7 +860,7 @@
         <div>
           <span class="dummy-text-small">{{color}}/{{state}}:</span>
           <br />
-          <Hds::Dropdown::Toggle::Button @text={{capitalize state}} @color={{color}} class="is-{{state}}" />
+          <Hds::Dropdown::Toggle::Button @text={{capitalize state}} @color={{color}} mock-state-value={{state}} />
         </div>
       {{/each}}
       <div>
@@ -878,7 +878,7 @@
           @icon="more-horizontal"
           @text="overflow menu"
           @hasChevron={{false}}
-          class="is-{{state}}"
+          mock-state-value={{state}}
         />
       </div>
     {{/each}}
@@ -897,7 +897,7 @@
       <div>
         <span class="dummy-text-small">icon+chevron/{{state}}:</span>
         <br />
-        <Hds::Dropdown::Toggle::Icon @icon="user" @text={{state}} class="is-{{state}}" />
+        <Hds::Dropdown::Toggle::Icon @icon="user" @text={{state}} mock-state-value={{state}} />
       </div>
     {{/each}}
     <div>
@@ -910,7 +910,7 @@
       <div>
         <span class="dummy-text-small">avatar+chevron/{{state}}:</span>
         <br />
-        <Hds::Dropdown::Toggle::Icon @text={{state}} @imageSrc="/assets/images/avatar.png" class="is-{{state}}" />
+        <Hds::Dropdown::Toggle::Icon @text={{state}} @imageSrc="/assets/images/avatar.png" mock-state-value={{state}} />
       </div>
     {{/each}}
     <div>
@@ -1020,7 +1020,7 @@
     <div class="dummy-dropdown-list-items-base-sample">
       <ul class="hds-dropdown-list">
         {{#each @model.ITEM_STATES as |state|}}
-          <Hds::Dropdown::ListItem::Interactive @text={{state}} @color={{color}} @state={{state}} />
+          <Hds::Dropdown::ListItem::Interactive @text={{state}} @color={{color}} mock-state-value={{state}} />
         {{/each}}
       </ul>
       <ul class="hds-dropdown-list">
@@ -1029,7 +1029,7 @@
             @icon={{if (eq color "critical") "trash" "settings"}}
             @text="{{state}} with icon"
             @color={{color}}
-            @state={{state}}
+            mock-state-value={{state}}
           />
         {{/each}}
       </ul>
@@ -1039,7 +1039,7 @@
             @icon={{if (eq color "critical") "trash" "settings"}}
             @text="{{state}} with a longer text string that may wrap since max-width is defined on the container"
             @color={{color}}
-            @state={{state}}
+            mock-state-value={{state}}
           />
         {{/each}}
       </ul>
@@ -1083,12 +1083,17 @@
     {{! template-lint-disable no-inline-styles }}
     <ul class="hds-dropdown-list" style="width: 250px">
       {{#each @model.ITEM_STATES as |state|}}
-        <Hds::Dropdown::ListItem::CopyItem @text="{{state}}: 91ee1e8ef65b337f0e70d793f456c71d" @state={{state}} />
+        <Hds::Dropdown::ListItem::CopyItem
+          @text="{{state}}: 91ee1e8ef65b337f0e70d793f456c71d"
+          mock-state-value={{state}}
+          mock-state-selector="button"
+        />
       {{/each}}
       <Hds::Dropdown::ListItem::CopyItem
         @text="success: 91ee1e8ef65b337f0e70d793f456c71d91ee1e8ef65b337f0e70d793f456c71d91ee1e8ef65b337f0e70d793f456c71d"
-        @state="success"
         @isSuccess="true"
+        mock-state-value="success"
+        mock-state-selector="button"
       />
     </ul>
     {{! template-lint-enable no-inline-styles }}
diff --git a/packages/components/tests/dummy/app/templates/components/link-to/cta.hbs b/packages/components/tests/dummy/app/templates/components/link-to/cta.hbs
index e2ef9a1249..a3448015ab 100644
--- a/packages/components/tests/dummy/app/templates/components/link-to/cta.hbs
+++ b/packages/components/tests/dummy/app/templates/components/link-to/cta.hbs
@@ -278,8 +278,8 @@
             @icon="plus"
             @text={{capitalize state}}
             @size={{size}}
-            class="is-{{state}}"
             @route="components.link-to.cta"
+            mock-state-value={{state}}
           />
         </div>
       {{/each}}
@@ -292,8 +292,8 @@
           @icon="plus"
           @text={{capitalize state}}
           @isFullWidth={{true}}
-          class="is-{{state}}"
           @route="components.link-to.cta"
+          mock-state-value={{state}}
         />
       </div>
     {{/each}}
diff --git a/packages/components/tests/dummy/app/templates/components/link/cta.hbs b/packages/components/tests/dummy/app/templates/components/link/cta.hbs
index 946ad1ac13..c424112b51 100644
--- a/packages/components/tests/dummy/app/templates/components/link/cta.hbs
+++ b/packages/components/tests/dummy/app/templates/components/link/cta.hbs
@@ -256,7 +256,7 @@
         <div>
           <span class="dummy-text-small">{{capitalize size}}/{{state}}:</span>
           <br />
-          <Hds::Link::Cta @icon="plus" @text={{capitalize state}} @size={{size}} class="is-{{state}}" href="#" />
+          <Hds::Link::Cta @icon="plus" @text={{capitalize state}} @size={{size}} href="#" mock-state-value={{state}} />
         </div>
       {{/each}}
     {{/each}}
@@ -264,7 +264,13 @@
       <div>
         <span class="dummy-text-small">Full width/{{state}}:</span>
         <br />
-        <Hds::Link::Cta @icon="plus" @text={{capitalize state}} @isFullWidth={{true}} class="is-{{state}}" href="#" />
+        <Hds::Link::Cta
+          @icon="plus"
+          @text={{capitalize state}}
+          @isFullWidth={{true}}
+          href="#"
+          mock-state-value={{state}}
+        />
       </div>
     {{/each}}
   </div>