diff --git a/packages/components/addon/components/hds/breadcrumb/item.hbs b/packages/components/addon/components/hds/breadcrumb/item.hbs
index 6ad08af6fa..149c77946f 100644
--- a/packages/components/addon/components/hds/breadcrumb/item.hbs
+++ b/packages/components/addon/components/hds/breadcrumb/item.hbs
@@ -10,7 +10,7 @@
     </div>
   {{else}}
     <LinkTo
-      class="hds-breadcrumb__link {{if @hover 'is-hover'}} {{if @active 'is-active'}} {{if @focus 'is-focus'}}"
+      class="hds-breadcrumb__link"
       @models={{hds-link-to-models @model @models}}
       @query={{hds-link-to-query @query}}
       @route={{@route}}
diff --git a/packages/components/addon/components/hds/breadcrumb/truncation.hbs b/packages/components/addon/components/hds/breadcrumb/truncation.hbs
index 85b923bde4..52df639258 100644
--- a/packages/components/addon/components/hds/breadcrumb/truncation.hbs
+++ b/packages/components/addon/components/hds/breadcrumb/truncation.hbs
@@ -3,10 +3,7 @@
     <:toggle as |t|>
       <button
         type="button"
-        class="hds-breadcrumb__truncation-toggle
-          {{if @hover 'is-hover'}}
-          {{if @active 'is-active'}}
-          {{if @focus 'is-focus'}}"
+        class="hds-breadcrumb__truncation-toggle"
         aria-expanded={{if t.isOpen "true" "false"}}
         {{on "click" t.onClickToggle}}
       >
diff --git a/packages/components/app/styles/components/alert.scss b/packages/components/app/styles/components/alert.scss
index 6573a77ba9..17701882e2 100644
--- a/packages/components/app/styles/components/alert.scss
+++ b/packages/components/app/styles/components/alert.scss
@@ -84,7 +84,6 @@
     color: var(--token-color-foreground-action);
 
     &:focus,
-    &.is-focus,
     &:focus-visible {
       outline: 2px solid var(--token-color-focus-action-internal);
       outline-offset: 1px;
@@ -132,8 +131,7 @@
     margin-top: 1px;
   }
 
-  &:hover,
-  &.is-hover {
+  &:hover {
     &::before { // we re-use the pseudo-element created by the "focus-ring" mixin
       background-color: rgba(#dedfe3, 0.4);
     }
@@ -142,8 +140,7 @@
   // notice: this is used not only for the focus, but also to increase the clickable area
   @include hds-focus-ring-with-pseudo-element($top: -4px, $right: -4px, $bottom: -4px, $left: -4px);
 
-  &:active,
-  &.is-active {
+  &:active {
     color: var(--token-color-foreground-secondary);
     &::before {
       background-color: rgba(#dedfe3, 0.4);
diff --git a/packages/components/app/styles/components/breadcrumb.scss b/packages/components/app/styles/components/breadcrumb.scss
index 79a8839ab3..074b8a6a46 100644
--- a/packages/components/app/styles/components/breadcrumb.scss
+++ b/packages/components/app/styles/components/breadcrumb.scss
@@ -77,7 +77,7 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
     text-decoration-color: transparent;
 
     &:hover,
-    &.is-hover {
+    &.mock-hover {
         color: var(--token-color-palette-neutral-600);
 
         > .hds-breadcrumb__text {
@@ -89,7 +89,7 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
     @include hds-focus-ring-basic();
 
     &:active,
-    &.is-active {
+    &.mock-active {
         color: var(--token-color-foreground-secondary);
 
         > .hds-breadcrumb__text {
@@ -155,7 +155,7 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
     width: $hds-breadcrumb-item-height;
 
     &:hover,
-    &.is-hover {
+    &.mock-hover {
         border-color: var(--token-color-border-strong);
         color: var(--token-color-foreground-faint);
     }
@@ -164,13 +164,13 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
     @include hds-focus-ring-basic();
 
     &:focus,
-    &.is-focus {
+    &.mock-focus {
         background-color: transparent;
         border: none; // important: we need to completely remove the border, of the inner box-shadow of the focus ring will be drawn inside the border
     }
 
     &:active,
-    &.is-active {
+    &.mock-active {
         background-color: var(--token-color-surface-interactive-active);
         border-color: var(--token-color-border-strong);
         color: var(--token-color-foreground-primary);
diff --git a/packages/components/app/styles/components/dropdown.scss b/packages/components/app/styles/components/dropdown.scss
index bf968160f0..b0abce12cf 100644
--- a/packages/components/app/styles/components/dropdown.scss
+++ b/packages/components/app/styles/components/dropdown.scss
@@ -185,7 +185,7 @@ $hds-dropdown-toggle-border-radius: 5px;
       background-color: var(--token-color-surface-interactive-active);
     }
 
-    &.mock-success {
+    &.is-success {
       background-color: var(--token-color-surface-success);
       border-color: var(--token-color-border-success);
 
diff --git a/packages/components/app/styles/mixins/_focus-ring.scss b/packages/components/app/styles/mixins/_focus-ring.scss
index f5d775f43d..d958d4c26f 100644
--- a/packages/components/app/styles/mixins/_focus-ring.scss
+++ b/packages/components/app/styles/mixins/_focus-ring.scss
@@ -8,7 +8,6 @@
 
   // default focus for browsers that still rely on ":focus"
   &:focus,
-  &.is-focus,
   &.mock-focus {
     box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
   }
@@ -22,8 +21,7 @@
   }
   // remove the focus ring on "active + focused" state (by design)
   &:focus:active,
-  &.is-focus.is-active,
-  &.mock-focus.is-active {
+  &.mock-focus.mock-active {
     box-shadow: none;
   }
 }
@@ -47,7 +45,6 @@
 
   // default focus for browsers that still rely on ":focus"
   &:focus,
-  &.is-focus,
   &.mock-focus {
     &::before {
       box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
@@ -67,8 +64,7 @@
   }
   // remove the focus ring on "active + focused" state (by design)
   &:focus:active,
-  &.is-focus.is-active,
-  &.mock-focus.is-active {
+  &.mock-focus.mock-active {
     &::before {
       box-shadow: none;
     }
diff --git a/packages/components/tests/dummy/app/templates/components/breadcrumb.hbs b/packages/components/tests/dummy/app/templates/components/breadcrumb.hbs
index 7b71cdf5fe..0193690b15 100644
--- a/packages/components/tests/dummy/app/templates/components/breadcrumb.hbs
+++ b/packages/components/tests/dummy/app/templates/components/breadcrumb.hbs
@@ -308,47 +308,47 @@
 
   <p class="dummy-paragraph">hover</p>
   <Hds::Breadcrumb>
-    <Hds::Breadcrumb::Item @text="Level one" @icon="org" @hover={{true}} />
-    <Hds::Breadcrumb::Item @text="Level two" @icon="folder" @hover={{true}} />
-    <Hds::Breadcrumb::Truncation @hover={{true}}>
+    <Hds::Breadcrumb::Item @text="Level one" @icon="org" mock-state-value="hover" mock-state-selector="a" />
+    <Hds::Breadcrumb::Item @text="Level two" @icon="folder" mock-state-value="hover" mock-state-selector="a" />
+    <Hds::Breadcrumb::Truncation mock-state-value="hover" mock-state-selector="button">
       <Hds::Breadcrumb::Item @text="Sub-level one" />
       <Hds::Breadcrumb::Item @text="Sub-level two with a very long string that we may want to trim somehow" />
       <Hds::Breadcrumb::Item @text="Sub-level with icon" @icon="org" />
       <Hds::Breadcrumb::Item @text="Another sub-level with icon" @icon="folder" />
     </Hds::Breadcrumb::Truncation>
-    <Hds::Breadcrumb::Item @text="Level four" @hover={{true}} />
-    <Hds::Breadcrumb::Item @text="Level five" @hover={{true}} />
-    <Hds::Breadcrumb::Item @text="Current" @current={{true}} @hover={{true}} />
+    <Hds::Breadcrumb::Item @text="Level four" mock-state-value="hover" mock-state-selector="a" />
+    <Hds::Breadcrumb::Item @text="Level five" mock-state-value="hover" mock-state-selector="a" />
+    <Hds::Breadcrumb::Item @text="Current" @current={{true}} mock-state-value="hover" mock-state-selector="a" />
   </Hds::Breadcrumb>
 
   <p class="dummy-paragraph">active</p>
   <Hds::Breadcrumb>
-    <Hds::Breadcrumb::Item @text="Level one" @icon="org" @active={{true}} />
-    <Hds::Breadcrumb::Item @text="Level two" @icon="folder" @active={{true}} />
-    <Hds::Breadcrumb::Truncation @active={{true}}>
+    <Hds::Breadcrumb::Item @text="Level one" @icon="org" mock-state-value="active" mock-state-selector="a" />
+    <Hds::Breadcrumb::Item @text="Level two" @icon="folder" mock-state-value="active" mock-state-selector="a" />
+    <Hds::Breadcrumb::Truncation mock-state-value="active" mock-state-selector="button">
       <Hds::Breadcrumb::Item @text="Sub-level one" />
       <Hds::Breadcrumb::Item @text="Sub-level two with a very long string that we may want to trim somehow" />
       <Hds::Breadcrumb::Item @text="Sub-level with icon" @icon="org" />
       <Hds::Breadcrumb::Item @text="Another sub-level with icon" @icon="folder" />
     </Hds::Breadcrumb::Truncation>
-    <Hds::Breadcrumb::Item @text="Level four" @active={{true}} />
-    <Hds::Breadcrumb::Item @text="Level five" @active={{true}} />
-    <Hds::Breadcrumb::Item @text="Current" @current={{true}} @active={{true}} />
+    <Hds::Breadcrumb::Item @text="Level four" mock-state-value="active" mock-state-selector="a" />
+    <Hds::Breadcrumb::Item @text="Level five" mock-state-value="active" mock-state-selector="a" />
+    <Hds::Breadcrumb::Item @text="Current" @current={{true}} mock-state-value="active" mock-state-selector="a" />
   </Hds::Breadcrumb>
 
   <p class="dummy-paragraph">focus</p>
   <Hds::Breadcrumb>
-    <Hds::Breadcrumb::Item @text="Level one" @icon="org" @focus={{true}} />
-    <Hds::Breadcrumb::Item @text="Level two" @icon="folder" @focus={{true}} />
-    <Hds::Breadcrumb::Truncation @focus={{true}}>
+    <Hds::Breadcrumb::Item @text="Level one" @icon="org" mock-state-value="focus" mock-state-selector="a" />
+    <Hds::Breadcrumb::Item @text="Level two" @icon="folder" mock-state-value="focus" mock-state-selector="a" />
+    <Hds::Breadcrumb::Truncation mock-state-value="focus" mock-state-selector="button">
       <Hds::Breadcrumb::Item @text="Sub-level one" />
       <Hds::Breadcrumb::Item @text="Sub-level two with a very long string that we may want to trim somehow" />
       <Hds::Breadcrumb::Item @text="Sub-level with icon" @icon="org" />
       <Hds::Breadcrumb::Item @text="Another sub-level with icon" @icon="folder" />
     </Hds::Breadcrumb::Truncation>
-    <Hds::Breadcrumb::Item @text="Level four" @focus={{true}} />
-    <Hds::Breadcrumb::Item @text="Level five" @focus={{true}} />
-    <Hds::Breadcrumb::Item @text="Current" @current={{true}} @focus={{true}} />
+    <Hds::Breadcrumb::Item @text="Level four" mock-state-value="focus" mock-state-selector="a" />
+    <Hds::Breadcrumb::Item @text="Level five" mock-state-value="focus" mock-state-selector="a" />
+    <Hds::Breadcrumb::Item @text="Current" @current={{true}} mock-state-value="focus" mock-state-selector="a" />
   </Hds::Breadcrumb>
 
   <h4 class="dummy-h4">Truncation options</h4>