npm - @hashicorp/design-system-components - Versions diffs - 6.2.0 → 6.2.1 - Mend

@hashicorp/design-system-components 6.2.0 → 6.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (748) hide show

package/dist/styles/@hashicorp/design-system-components.css CHANGED Viewed

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /**
- * Copyright IBM Corp. 2021, 2025
+ * Copyright IBM Corp. 2021, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 /**
@@ -371,7 +371,7 @@
 }
 /**
- * Copyright (c) HashiCorp, Inc.
+ * Copyright IBM Corp. 2021, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 /**
@@ -730,6 +730,10 @@
   padding: 0;
 }
+/**
+ * Copyright IBM Corp. 2021, 2026
+ * SPDX-License-Identifier: MPL-2.0
+ */
 #ember-a11y-refocus-nav-message {
   position: absolute;
   width: 1px;
@@ -759,7 +763,7 @@
 }
 /**
- * Copyright (c) HashiCorp, Inc.
+ * Copyright IBM Corp. 2021, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 /**
@@ -1000,7 +1004,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 /**
- * Copyright IBM Corp. 2021, 2025
+ * Copyright IBM Corp. 2021, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 .hds-advanced-table__container {
@@ -2078,7 +2082,7 @@
 }
 /**
- * Copyright IBM Corp. 2021, 2025
+ * Copyright IBM Corp. 2021, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 /**
@@ -2086,7 +2090,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 /**
- * Copyright IBM Corp. 2021, 2025
+ * Copyright IBM Corp. 2021, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 .hds-app-header {
@@ -2342,7 +2346,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 /**
- * Copyright IBM Corp. 2021, 2025
+ * Copyright IBM Corp. 2021, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 :root {
@@ -2440,7 +2444,7 @@
 }
 /**
- * Copyright IBM Corp. 2021, 2025
+ * Copyright IBM Corp. 2021, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 .hds-app-side-nav__content {
@@ -2978,7 +2982,7 @@
 }
 /**
- * Copyright IBM Corp. 2021, 2025
+ * Copyright IBM Corp. 2021, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 .hds-breadcrumb {
@@ -3558,7 +3562,7 @@ button.hds-button[href]::after {
 }
 /**
- * Copyright IBM Corp. 2021, 2025
+ * Copyright IBM Corp. 2021, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 /**
@@ -4056,7 +4060,7 @@ button.hds-button[href]::after {
 }
 /**
- * Copyright IBM Corp. 2021, 2025
+ * Copyright IBM Corp. 2021, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 /**
@@ -5066,6 +5070,9 @@ button.hds-button[href]::after {
   flex: 1;
   text-align: left;
 }
+.hds-dropdown-list-item__interactive-text .hds-badge {
+  vertical-align: bottom;
+}
 .hds-dropdown-list-item--color-action a,
 .hds-dropdown-list-item--color-action button {
@@ -5189,7 +5196,7 @@ button.hds-button[href]::after {
 }
 /**
- * Copyright (c) HashiCorp, Inc.
+ * Copyright IBM Corp. 2021, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 .hds-filter-bar {
@@ -5407,7 +5414,7 @@ button.hds-button[href]::after {
 }
 /**
- * Copyright IBM Corp. 2021, 2025
+ * Copyright IBM Corp. 2021, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 .hds-flyout {
@@ -7310,7 +7317,7 @@ button.hds-button[href]::after {
  * SPDX-License-Identifier: MPL-2.0
  */
 /**
- * Copyright IBM Corp. 2021, 2025
+ * Copyright IBM Corp. 2021, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 .hds-layout-grid {
@@ -8415,7 +8422,7 @@ button.hds-button[href]::after {
  * SPDX-License-Identifier: MPL-2.0
  */
 /**
- * Copyright IBM Corp. 2021, 2025
+ * Copyright IBM Corp. 2021, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 /**
@@ -8663,15 +8670,9 @@ button.hds-button[href]::after {
 .hds-stepper-nav--interactive .hds-stepper-nav__progress-bar::after {
   background-color: var(--token-color-palette-blue-200);
 }
-.hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-title,
-.hds-stepper-nav--interactive .hds-stepper-nav__step--active .hds-stepper-nav__step-title {
+.hds-stepper-nav--interactive .hds-stepper-nav__step--active .hds-stepper-nav__step-button .hds-stepper-nav__step-title {
   color: var(--token-color-foreground-action);
 }
-.hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-title {
-  text-decoration: underline;
-  text-decoration-skip-ink: none;
-  text-underline-position: from-font;
-}
 .hds-stepper-nav--interactive .hds-stepper-nav__step--active .hds-stepper-nav__step-button {
   position: relative;
   outline-style: solid;
@@ -8700,233 +8701,238 @@ button.hds-button[href]::after {
 .hds-stepper-nav--interactive .hds-stepper-nav__step--active .hds-stepper-nav__step-button:focus:active::before, .hds-stepper-nav--interactive .hds-stepper-nav__step--active .hds-stepper-nav__step-button.mock-focus.mock-active::before {
   box-shadow: none;
 }
-.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button {
+.hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button {
+  cursor: pointer;
+}
+.hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button .hds-stepper-nav__step-title {
+  color: var(--token-color-foreground-action);
+  text-decoration: underline;
+  text-decoration-skip-ink: none;
+  text-underline-position: from-font;
+}
+.hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button:hover, .hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-hover {
+  background-color: var(--token-color-surface-interactive-hover);
+}
+.hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button:hover .hds-stepper-nav__step-title, .hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-hover .hds-stepper-nav__step-title {
+  color: var(--token-color-foreground-action-hover);
+}
+.hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button {
   position: relative;
   outline-style: solid;
   outline-color: transparent;
   isolation: isolate;
 }
-.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button::before {
+.hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button::before {
   position: absolute;
   top: -3px;
   right: -1px;
   bottom: -1px;
   left: -1px;
   z-index: -1;
-  border-radius: 0 0 6px 6px;
+  border-radius: 0 0 var(--token-border-radius-medium) var(--token-border-radius-medium);
   content: "";
 }
-.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:focus::before, .hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-focus::before {
+.hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button:focus::before, .hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-focus::before {
   box-shadow: var(--token-focus-ring-action-box-shadow);
 }
-.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:focus:not(:focus-visible)::before {
+.hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button:focus:not(:focus-visible)::before {
   box-shadow: none;
 }
-.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:focus-visible::before {
+.hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button:focus-visible::before {
   box-shadow: var(--token-focus-ring-action-box-shadow);
 }
-.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:focus:active::before, .hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-focus.mock-active::before {
+.hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button:focus:active::before, .hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-focus.mock-active::before {
   box-shadow: none;
 }
-.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button {
-  cursor: pointer;
-}
-.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:hover, .hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-hover {
-  background-color: var(--token-color-surface-interactive-hover);
-}
-.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:hover .hds-stepper-nav__step-title, .hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-hover .hds-stepper-nav__step-title {
-  color: var(--token-color-foreground-action-hover);
-}
-.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:active, .hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-active {
+.hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button:active, .hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-active {
   background-color: var(--token-color-surface-interactive-active);
 }
-.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:active .hds-stepper-nav__step-title, .hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-active .hds-stepper-nav__step-title {
+.hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button:active .hds-stepper-nav__step-title, .hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-active .hds-stepper-nav__step-title {
   color: var(--token-color-foreground-action-active);
 }
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-incomplete.hds-stepper-indicator-step,
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-incomplete.hds-stepper-indicator-step {
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-incomplete.hds-stepper-indicator-step,
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-incomplete.hds-stepper-indicator-step {
   cursor: default;
 }
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__status,
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__status {
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__status,
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__status {
   color: var(--token-color-foreground-primary);
 }
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__svg-hexagon path,
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__svg-hexagon path {
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__svg-hexagon path,
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__svg-hexagon path {
   fill: var(--token-color-surface-interactive);
   stroke: var(--token-color-border-strong);
 }
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-incomplete.hds-stepper-indicator-step,
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-incomplete.hds-stepper-indicator-step {
-  cursor: pointer;
-}
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__svg-hexagon path,
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__svg-hexagon path {
-  fill: var(--token-color-surface-interactive-hover);
-}
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-incomplete.hds-stepper-indicator-step,
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-incomplete.hds-stepper-indicator-step {
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-incomplete.hds-stepper-indicator-step,
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-incomplete.hds-stepper-indicator-step {
   cursor: default;
 }
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__status,
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__status {
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__status,
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__status {
   color: var(--token-color-foreground-primary);
 }
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__svg-hexagon path,
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__svg-hexagon path {
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__svg-hexagon path,
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__svg-hexagon path {
   fill: var(--token-color-surface-interactive);
   stroke: var(--token-color-border-strong);
 }
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-incomplete.hds-stepper-indicator-step,
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-incomplete.hds-stepper-indicator-step {
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-incomplete.hds-stepper-indicator-step,
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-incomplete.hds-stepper-indicator-step {
+  cursor: pointer;
+}
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__svg-hexagon path,
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__svg-hexagon path {
+  fill: var(--token-color-surface-interactive-hover);
+}
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-incomplete.hds-stepper-indicator-step,
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-incomplete.hds-stepper-indicator-step {
   cursor: pointer;
 }
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__svg-hexagon path,
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__svg-hexagon path {
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__svg-hexagon path,
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__svg-hexagon path {
   fill: var(--token-color-surface-interactive-active);
 }
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-progress.hds-stepper-indicator-step,
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-progress.hds-stepper-indicator-step {
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-progress.hds-stepper-indicator-step,
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-progress.hds-stepper-indicator-step {
   cursor: default;
 }
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__status,
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__status {
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__status,
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__status {
   color: var(--token-color-foreground-high-contrast);
 }
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__svg-hexagon path,
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__svg-hexagon path {
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__svg-hexagon path,
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__svg-hexagon path {
   fill: var(--token-color-palette-blue-200);
   stroke: var(--token-color-palette-blue-300);
 }
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-progress.hds-stepper-indicator-step,
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-progress.hds-stepper-indicator-step {
-  cursor: pointer;
-}
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__svg-hexagon path,
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__svg-hexagon path {
-  fill: var(--token-color-palette-blue-300);
-  stroke: var(--token-color-palette-blue-400);
-}
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-progress.hds-stepper-indicator-step,
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-progress.hds-stepper-indicator-step {
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-progress.hds-stepper-indicator-step,
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-progress.hds-stepper-indicator-step {
   cursor: default;
 }
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__status,
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__status {
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__status,
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__status {
   color: var(--token-color-foreground-high-contrast);
 }
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__svg-hexagon path,
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__svg-hexagon path {
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__svg-hexagon path,
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__svg-hexagon path {
   fill: var(--token-color-palette-blue-200);
   stroke: var(--token-color-palette-blue-300);
 }
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-progress.hds-stepper-indicator-step,
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-progress.hds-stepper-indicator-step {
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-progress.hds-stepper-indicator-step,
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-progress.hds-stepper-indicator-step {
   cursor: pointer;
 }
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__svg-hexagon path,
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__svg-hexagon path {
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__svg-hexagon path,
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__svg-hexagon path {
+  fill: var(--token-color-palette-blue-300);
+  stroke: var(--token-color-palette-blue-400);
+}
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-progress.hds-stepper-indicator-step,
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-progress.hds-stepper-indicator-step {
+  cursor: pointer;
+}
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__svg-hexagon path,
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__svg-hexagon path {
   fill: var(--token-color-palette-blue-400);
   stroke: var(--token-color-palette-blue-400);
 }
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-processing.hds-stepper-indicator-step,
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-processing.hds-stepper-indicator-step {
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-processing.hds-stepper-indicator-step,
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-processing.hds-stepper-indicator-step {
   cursor: default;
 }
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__status,
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__status {
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__status,
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__status {
   color: var(--token-color-foreground-high-contrast);
 }
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__svg-hexagon path,
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__svg-hexagon path {
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__svg-hexagon path,
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__svg-hexagon path {
   fill: var(--token-color-palette-blue-200);
   stroke: var(--token-color-palette-blue-300);
 }
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-processing.hds-stepper-indicator-step,
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-processing.hds-stepper-indicator-step {
-  cursor: pointer;
-}
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__svg-hexagon path,
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__svg-hexagon path {
-  fill: var(--token-color-palette-blue-300);
-  stroke: var(--token-color-palette-blue-400);
-}
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-processing.hds-stepper-indicator-step,
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-processing.hds-stepper-indicator-step {
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-processing.hds-stepper-indicator-step,
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-processing.hds-stepper-indicator-step {
   cursor: default;
 }
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__status,
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__status {
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__status,
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__status {
   color: var(--token-color-foreground-high-contrast);
 }
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__svg-hexagon path,
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__svg-hexagon path {
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__svg-hexagon path,
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__svg-hexagon path {
   fill: var(--token-color-palette-blue-200);
   stroke: var(--token-color-palette-blue-300);
 }
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-processing.hds-stepper-indicator-step,
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-processing.hds-stepper-indicator-step {
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-processing.hds-stepper-indicator-step,
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-processing.hds-stepper-indicator-step {
   cursor: pointer;
 }
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__svg-hexagon path,
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__svg-hexagon path {
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__svg-hexagon path,
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__svg-hexagon path {
+  fill: var(--token-color-palette-blue-300);
+  stroke: var(--token-color-palette-blue-400);
+}
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-processing.hds-stepper-indicator-step,
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-processing.hds-stepper-indicator-step {
+  cursor: pointer;
+}
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__svg-hexagon path,
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__svg-hexagon path {
   fill: var(--token-color-palette-blue-400);
   stroke: var(--token-color-palette-blue-400);
 }
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-complete.hds-stepper-indicator-step,
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-complete.hds-stepper-indicator-step {
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-complete.hds-stepper-indicator-step,
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-complete.hds-stepper-indicator-step {
   cursor: default;
 }
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__status,
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__status {
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__status,
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__status {
   color: var(--token-color-palette-blue-200);
 }
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__svg-hexagon path,
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__svg-hexagon path {
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__svg-hexagon path,
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__svg-hexagon path {
   fill: var(--token-color-surface-action);
   stroke: var(--token-color-palette-blue-300);
 }
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-complete.hds-stepper-indicator-step,
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-complete.hds-stepper-indicator-step {
-  cursor: pointer;
-}
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__status,
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__status {
-  color: var(--token-color-palette-blue-300);
-}
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__svg-hexagon path,
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__svg-hexagon path {
-  fill: var(--token-color-palette-blue-100);
-  stroke: var(--token-color-palette-blue-400);
-}
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-complete.hds-stepper-indicator-step,
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-complete.hds-stepper-indicator-step {
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-complete.hds-stepper-indicator-step,
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-complete.hds-stepper-indicator-step {
   cursor: default;
 }
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__status,
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__status {
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__status,
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__status {
   color: var(--token-color-palette-blue-200);
 }
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__svg-hexagon path,
-.hds-stepper-nav__step--nav-interactive .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__svg-hexagon path {
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__svg-hexagon path,
+.hds-stepper-nav--interactive .hds-stepper-nav__step .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__svg-hexagon path {
   fill: var(--token-color-surface-action);
   stroke: var(--token-color-palette-blue-300);
 }
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-complete.hds-stepper-indicator-step,
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-complete.hds-stepper-indicator-step {
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-complete.hds-stepper-indicator-step,
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-complete.hds-stepper-indicator-step {
+  cursor: pointer;
+}
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__status,
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__status {
+  color: var(--token-color-palette-blue-300);
+}
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button:hover .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__svg-hexagon path,
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-hover .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__svg-hexagon path {
+  fill: var(--token-color-palette-blue-100);
+  stroke: var(--token-color-palette-blue-400);
+}
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-complete.hds-stepper-indicator-step,
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-complete.hds-stepper-indicator-step {
   cursor: pointer;
 }
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__status,
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__status {
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__status,
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__status {
   color: var(--token-color-palette-blue-400);
 }
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__svg-hexagon path,
-.hds-stepper-nav__step--nav-interactive.hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__svg-hexagon path {
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button:active .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__svg-hexagon path,
+.hds-stepper-nav--interactive .hds-stepper-nav__step.hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-active .hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__svg-hexagon path {
   fill: var(--token-color-palette-blue-100);
   stroke: var(--token-color-palette-blue-400);
 }
@@ -8955,14 +8961,14 @@ button.hds-button[href]::after {
     margin-top: 4px;
     padding: 0;
   }
-  .hds-stepper-nav--interactive .hds-stepper-nav__step--interactive .hds-stepper-nav__step-button,
+  .hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button,
   .hds-stepper-nav--interactive .hds-stepper-nav__step--active .hds-stepper-nav__step-button {
     position: relative;
     outline-style: solid;
     outline-color: transparent;
     isolation: isolate;
   }
-  .hds-stepper-nav--interactive .hds-stepper-nav__step--interactive .hds-stepper-nav__step-button::before,
+  .hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button::before,
   .hds-stepper-nav--interactive .hds-stepper-nav__step--active .hds-stepper-nav__step-button::before {
     position: absolute;
     top: -1px;
@@ -8973,20 +8979,20 @@ button.hds-button[href]::after {
     border-radius: 0;
     content: "";
   }
-  .hds-stepper-nav--interactive .hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:focus::before, .hds-stepper-nav--interactive .hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-focus::before,
+  .hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button:focus::before, .hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-focus::before,
   .hds-stepper-nav--interactive .hds-stepper-nav__step--active .hds-stepper-nav__step-button:focus::before,
   .hds-stepper-nav--interactive .hds-stepper-nav__step--active .hds-stepper-nav__step-button.mock-focus::before {
     box-shadow: var(--token-focus-ring-action-box-shadow);
   }
-  .hds-stepper-nav--interactive .hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:focus:not(:focus-visible)::before,
+  .hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button:focus:not(:focus-visible)::before,
   .hds-stepper-nav--interactive .hds-stepper-nav__step--active .hds-stepper-nav__step-button:focus:not(:focus-visible)::before {
     box-shadow: none;
   }
-  .hds-stepper-nav--interactive .hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:focus-visible::before,
+  .hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button:focus-visible::before,
   .hds-stepper-nav--interactive .hds-stepper-nav__step--active .hds-stepper-nav__step-button:focus-visible::before {
     box-shadow: var(--token-focus-ring-action-box-shadow);
   }
-  .hds-stepper-nav--interactive .hds-stepper-nav__step--interactive .hds-stepper-nav__step-button:focus:active::before, .hds-stepper-nav--interactive .hds-stepper-nav__step--interactive .hds-stepper-nav__step-button.mock-focus.mock-active::before,
+  .hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button:focus:active::before, .hds-stepper-nav--interactive .hds-stepper-nav__step--complete .hds-stepper-nav__step-button.mock-focus.mock-active::before,
   .hds-stepper-nav--interactive .hds-stepper-nav__step--active .hds-stepper-nav__step-button:focus:active::before,
   .hds-stepper-nav--interactive .hds-stepper-nav__step--active .hds-stepper-nav__step-button.mock-focus.mock-active::before {
     box-shadow: none;
@@ -8998,7 +9004,7 @@ button.hds-button[href]::after {
   }
 }
 /**
- * Copyright IBM Corp. 2021, 2025
+ * Copyright IBM Corp. 2021, 2026
  * SPDX-License-Identifier: MPL-2.0
  */
 /**