@hashicorp/design-system-components 4.7.0 → 4.9.0

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

@@ -5,7 +5,7 @@
  */
 /**
  * Do not edit directly
- * Generated on Thu, 08 Feb 2024 22:22:41 GMT
+ * Generated on Wed, 24 Jul 2024 00:26:23 GMT
  */
 :root {
   --token-color-palette-blue-500: #1c345f;
@@ -268,6 +268,9 @@
   --token-form-toggle-transition-duration: 0.2s;
   --token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15);
   --token-form-toggle-thumb-size: 16px;
+  --token-app-header-height: 60px;
+  --token-app-header-home-link-size: 36px;
+  --token-app-header-logo-size: 28px;
   --token-pagination-nav-control-height: 36px;
   --token-pagination-nav-control-padding-horizontal: 12px;
   --token-pagination-nav-control-focus-inset: 4px;
@@ -366,7 +369,7 @@
 
 /**
  * Do not edit directly
- * Generated on Thu, 08 Feb 2024 22:22:41 GMT
+ * Generated on Wed, 24 Jul 2024 00:26:23 GMT
  */
 .hds-border-primary {
   border: 1px solid var(--token-color-border-primary);
@@ -538,7 +541,7 @@
 
 /**
  * Do not edit directly
- * Generated on Thu, 08 Feb 2024 22:22:41 GMT
+ * Generated on Wed, 24 Jul 2024 00:26:23 GMT
  */
 .hds-elevation-high {
   box-shadow: var(--token-elevation-high-box-shadow);
@@ -594,7 +597,7 @@
 
 /**
  * Do not edit directly
- * Generated on Thu, 08 Feb 2024 22:22:41 GMT
+ * Generated on Wed, 24 Jul 2024 00:26:23 GMT
  */
 .hds-focus-ring-action-box-shadow {
   box-shadow: var(--token-focus-ring-action-box-shadow);
@@ -606,7 +609,7 @@
 
 /**
  * Do not edit directly
- * Generated on Thu, 08 Feb 2024 22:22:41 GMT
+ * Generated on Wed, 24 Jul 2024 00:26:23 GMT
  */
 .hds-font-family-sans-display {
   font-family: var(--token-typography-font-stack-display);
@@ -1299,11 +1302,20 @@
   grid-template-columns: auto 1fr;
   min-height: 100vh;
 }
+.hds-app-frame:has(.hds-side-nav--is-not-minimized) .hds-app-header--is-mobile {
+  pointer-events: none;
+}
 
 .hds-app-frame__header {
   z-index: 7;
   grid-area: header;
 }
+.hds-app-frame__header:has(.hds-app-header) {
+  position: sticky;
+  top: 0;
+  right: 0;
+  left: 0;
+}
 
 .hds-app-frame__sidebar {
   z-index: 6;
@@ -1331,46 +1343,336 @@
   display: none;
 }
 
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+.hds-app-header {
+  position: relative;
+  z-index: 20;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--token-app-header-height);
+  padding: 12px 16px 11px 16px;
+  color: var(--token-color-foreground-high-contrast);
+  background: var(--token-color-palette-neutral-700);
+  border-bottom: 1px solid var(--token-color-palette-neutral-500);
+}
+.hds-app-header.hds-app-header--is-desktop .hds-app-header__global-actions {
+  margin-right: auto;
+}
+.hds-app-header.hds-app-header--is-mobile .hds-app-header__actions {
+  position: absolute;
+  top: calc(100% + 1px);
+  right: 0;
+  left: 0;
+}
+.hds-app-header.hds-app-header--is-mobile .hds-app-header__actions-content {
+  flex-wrap: wrap;
+  align-content: flex-start;
+  height: calc(100vh - var(--token-app-header-height));
+  padding: 16px;
+  overflow: auto;
+  background: var(--token-color-palette-neutral-700);
+}
+.hds-app-header.hds-app-header--is-mobile .hds-app-header__global-actions,
+.hds-app-header.hds-app-header--is-mobile .hds-app-header__global-actions .hds-dropdown,
+.hds-app-header.hds-app-header--is-mobile .hds-app-header__global-actions .hds-dropdown-toggle-button {
+  width: 100%;
+}
+.hds-app-header .hds-app-header__global-actions,
+.hds-app-header .hds-app-header__utility-actions {
+  display: flex;
+  gap: inherit;
+}
+.hds-app-header .hds-button,
+.hds-app-header .hds-dropdown-toggle-button,
+.hds-app-header .hds-dropdown-toggle-icon {
+  border: 1px solid transparent;
+  cursor: pointer;
+  border-color: var(--token-color-palette-neutral-500);
+  color: var(--token-color-foreground-high-contrast);
+  background-color: var(--token-color-palette-neutral-700);
+  border-radius: 5px;
+}
+.hds-app-header .hds-button:hover, .hds-app-header .hds-button.mock-hover,
+.hds-app-header .hds-dropdown-toggle-button:hover,
+.hds-app-header .hds-dropdown-toggle-button.mock-hover,
+.hds-app-header .hds-dropdown-toggle-icon:hover,
+.hds-app-header .hds-dropdown-toggle-icon.mock-hover {
+  border-color: var(--token-color-palette-neutral-500);
+  color: var(--token-color-foreground-high-contrast);
+  background-color: var(--token-color-palette-neutral-600);
+}
+.hds-app-header .hds-button:focus, .hds-app-header .hds-button.mock-focus,
+.hds-app-header .hds-dropdown-toggle-button:focus,
+.hds-app-header .hds-dropdown-toggle-button.mock-focus,
+.hds-app-header .hds-dropdown-toggle-icon:focus,
+.hds-app-header .hds-dropdown-toggle-icon.mock-focus {
+  position: relative;
+  outline-style: solid;
+  outline-color: transparent;
+  isolation: isolate;
+  color: var(--token-color-foreground-high-contrast);
+  background-color: var(--token-color-palette-neutral-700);
+  border-color: var(--token-color-focus-action-internal);
+}
+.hds-app-header .hds-button:focus::before, .hds-app-header .hds-button.mock-focus::before,
+.hds-app-header .hds-dropdown-toggle-button:focus::before,
+.hds-app-header .hds-dropdown-toggle-button.mock-focus::before,
+.hds-app-header .hds-dropdown-toggle-icon:focus::before,
+.hds-app-header .hds-dropdown-toggle-icon.mock-focus::before {
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  z-index: -1;
+  border-radius: 5px;
+  content: "";
+}
+.hds-app-header .hds-button:focus:focus::before, .hds-app-header .hds-button:focus.mock-focus::before, .hds-app-header .hds-button.mock-focus:focus::before, .hds-app-header .hds-button.mock-focus.mock-focus::before,
+.hds-app-header .hds-dropdown-toggle-button:focus:focus::before,
+.hds-app-header .hds-dropdown-toggle-button:focus.mock-focus::before,
+.hds-app-header .hds-dropdown-toggle-button.mock-focus:focus::before,
+.hds-app-header .hds-dropdown-toggle-button.mock-focus.mock-focus::before,
+.hds-app-header .hds-dropdown-toggle-icon:focus:focus::before,
+.hds-app-header .hds-dropdown-toggle-icon:focus.mock-focus::before,
+.hds-app-header .hds-dropdown-toggle-icon.mock-focus:focus::before,
+.hds-app-header .hds-dropdown-toggle-icon.mock-focus.mock-focus::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-app-header .hds-button:focus:focus:not(:focus-visible)::before, .hds-app-header .hds-button.mock-focus:focus:not(:focus-visible)::before,
+.hds-app-header .hds-dropdown-toggle-button:focus:focus:not(:focus-visible)::before,
+.hds-app-header .hds-dropdown-toggle-button.mock-focus:focus:not(:focus-visible)::before,
+.hds-app-header .hds-dropdown-toggle-icon:focus:focus:not(:focus-visible)::before,
+.hds-app-header .hds-dropdown-toggle-icon.mock-focus:focus:not(:focus-visible)::before {
+  box-shadow: none;
+}
+.hds-app-header .hds-button:focus:focus-visible::before, .hds-app-header .hds-button.mock-focus:focus-visible::before,
+.hds-app-header .hds-dropdown-toggle-button:focus:focus-visible::before,
+.hds-app-header .hds-dropdown-toggle-button.mock-focus:focus-visible::before,
+.hds-app-header .hds-dropdown-toggle-icon:focus:focus-visible::before,
+.hds-app-header .hds-dropdown-toggle-icon.mock-focus:focus-visible::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-app-header .hds-button:focus:focus:active::before, .hds-app-header .hds-button:focus.mock-focus.mock-active::before, .hds-app-header .hds-button.mock-focus:focus:active::before, .hds-app-header .hds-button.mock-focus.mock-focus.mock-active::before,
+.hds-app-header .hds-dropdown-toggle-button:focus:focus:active::before,
+.hds-app-header .hds-dropdown-toggle-button:focus.mock-focus.mock-active::before,
+.hds-app-header .hds-dropdown-toggle-button.mock-focus:focus:active::before,
+.hds-app-header .hds-dropdown-toggle-button.mock-focus.mock-focus.mock-active::before,
+.hds-app-header .hds-dropdown-toggle-icon:focus:focus:active::before,
+.hds-app-header .hds-dropdown-toggle-icon:focus.mock-focus.mock-active::before,
+.hds-app-header .hds-dropdown-toggle-icon.mock-focus:focus:active::before,
+.hds-app-header .hds-dropdown-toggle-icon.mock-focus.mock-focus.mock-active::before {
+  box-shadow: none;
+}
+.hds-app-header .hds-button:focus::before, .hds-app-header .hds-button.mock-focus::before,
+.hds-app-header .hds-dropdown-toggle-button:focus::before,
+.hds-app-header .hds-dropdown-toggle-button.mock-focus::before,
+.hds-app-header .hds-dropdown-toggle-icon:focus::before,
+.hds-app-header .hds-dropdown-toggle-icon.mock-focus::before {
+  color: var(--token-color-foreground-high-contrast);
+  border: none;
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-app-header .hds-button:focus:focus:not(:focus-visible)::before,
+.hds-app-header .hds-dropdown-toggle-button:focus:focus:not(:focus-visible)::before,
+.hds-app-header .hds-dropdown-toggle-icon:focus:focus:not(:focus-visible)::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-app-header .hds-button:active, .hds-app-header .hds-button.mock-active,
+.hds-app-header .hds-dropdown-toggle-button:active,
+.hds-app-header .hds-dropdown-toggle-button.mock-active,
+.hds-app-header .hds-dropdown-toggle-icon:active,
+.hds-app-header .hds-dropdown-toggle-icon.mock-active {
+  color: var(--token-color-foreground-high-contrast);
+  background-color: var(--token-color-palette-neutral-500);
+  border-color: var(--token-color-palette-neutral-400);
+}
+.hds-app-header .hds-button:disabled, .hds-app-header .hds-button[disabled], .hds-app-header .hds-button.mock-disabled, .hds-app-header .hds-button:disabled:focus, .hds-app-header .hds-button[disabled]:focus, .hds-app-header .hds-button.mock-disabled:focus, .hds-app-header .hds-button:disabled:hover, .hds-app-header .hds-button[disabled]:hover, .hds-app-header .hds-button.mock-disabled:hover,
+.hds-app-header .hds-dropdown-toggle-button:disabled,
+.hds-app-header .hds-dropdown-toggle-button[disabled],
+.hds-app-header .hds-dropdown-toggle-button.mock-disabled,
+.hds-app-header .hds-dropdown-toggle-button:disabled:focus,
+.hds-app-header .hds-dropdown-toggle-button[disabled]:focus,
+.hds-app-header .hds-dropdown-toggle-button.mock-disabled:focus,
+.hds-app-header .hds-dropdown-toggle-button:disabled:hover,
+.hds-app-header .hds-dropdown-toggle-button[disabled]:hover,
+.hds-app-header .hds-dropdown-toggle-button.mock-disabled:hover,
+.hds-app-header .hds-dropdown-toggle-icon:disabled,
+.hds-app-header .hds-dropdown-toggle-icon[disabled],
+.hds-app-header .hds-dropdown-toggle-icon.mock-disabled,
+.hds-app-header .hds-dropdown-toggle-icon:disabled:focus,
+.hds-app-header .hds-dropdown-toggle-icon[disabled]:focus,
+.hds-app-header .hds-dropdown-toggle-icon.mock-disabled:focus,
+.hds-app-header .hds-dropdown-toggle-icon:disabled:hover,
+.hds-app-header .hds-dropdown-toggle-icon[disabled]:hover,
+.hds-app-header .hds-dropdown-toggle-icon.mock-disabled:hover {
+  color: var(--token-color-foreground-disabled);
+  background-color: var(--token-color-palette-neutral-600);
+  border-color: var(--token-color-palette-neutral-500);
+}
+
+.hds-app-header__home-link {
+  border: 1px solid transparent;
+  cursor: pointer;
+  color: var(--token-color-foreground-high-contrast);
+  background-color: var(--token-color-palette-neutral-700);
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--token-app-header-home-link-size);
+  height: var(--token-app-header-home-link-size);
+}
+.hds-app-header__home-link:hover, .hds-app-header__home-link.mock-hover {
+  color: var(--token-color-foreground-high-contrast);
+  background-color: var(--token-color-palette-neutral-600);
+}
+.hds-app-header__home-link:focus, .hds-app-header__home-link.mock-focus {
+  position: relative;
+  outline-style: solid;
+  outline-color: transparent;
+  isolation: isolate;
+  color: var(--token-color-foreground-high-contrast);
+  background-color: var(--token-color-palette-neutral-700);
+}
+.hds-app-header__home-link:focus::before, .hds-app-header__home-link.mock-focus::before {
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  z-index: -1;
+  border-radius: 5px;
+  content: "";
+}
+.hds-app-header__home-link:focus:focus::before, .hds-app-header__home-link:focus.mock-focus::before, .hds-app-header__home-link.mock-focus:focus::before, .hds-app-header__home-link.mock-focus.mock-focus::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-app-header__home-link:focus:focus:not(:focus-visible)::before, .hds-app-header__home-link.mock-focus:focus:not(:focus-visible)::before {
+  box-shadow: none;
+}
+.hds-app-header__home-link:focus:focus-visible::before, .hds-app-header__home-link.mock-focus:focus-visible::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-app-header__home-link:focus:focus:active::before, .hds-app-header__home-link:focus.mock-focus.mock-active::before, .hds-app-header__home-link.mock-focus:focus:active::before, .hds-app-header__home-link.mock-focus.mock-focus.mock-active::before {
+  box-shadow: none;
+}
+.hds-app-header__home-link:focus::before, .hds-app-header__home-link.mock-focus::before {
+  color: var(--token-color-foreground-high-contrast);
+  border: none;
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-app-header__home-link:focus:focus:not(:focus-visible)::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-app-header__home-link:active, .hds-app-header__home-link.mock-active {
+  color: var(--token-color-foreground-high-contrast);
+  background-color: var(--token-color-palette-neutral-500);
+}
+.hds-app-header__home-link:disabled, .hds-app-header__home-link[disabled], .hds-app-header__home-link.mock-disabled, .hds-app-header__home-link:disabled:focus, .hds-app-header__home-link[disabled]:focus, .hds-app-header__home-link.mock-disabled:focus, .hds-app-header__home-link:disabled:hover, .hds-app-header__home-link[disabled]:hover, .hds-app-header__home-link.mock-disabled:hover {
+  color: var(--token-color-foreground-disabled);
+  background-color: var(--token-color-palette-neutral-600);
+  border-color: var(--token-color-palette-neutral-500);
+}
+.hds-app-header__home-link svg {
+  width: var(--token-app-header-logo-size);
+  height: var(--token-app-header-logo-size);
+}
+
+.hds-app-header__actions-content,
+.hds-app-header__actions {
+  display: flex;
+  flex: 1;
+  gap: inherit;
+}
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
  */
 .hds-application-state {
-  width: 19.5rem;
-  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  width: fit-content;
   margin: 0 auto;
 }
+.hds-application-state.hds-application-state--align-center {
+  align-items: center;
+  text-align: center;
+}
+.hds-application-state.hds-application-state--align-center .hds-application-state__header,
+.hds-application-state.hds-application-state--align-center .hds-application-state__body,
+.hds-application-state.hds-application-state--align-center .hds-application-state__footer {
+  width: auto;
+}
+
+.hds-application-state__media {
+  margin-bottom: 32px;
+}
+.hds-application-state__media > * {
+  display: block;
+  max-width: 100%;
+}
 
 .hds-application-state__header {
   display: grid;
+  grid-template-areas: "error error" "icon title";
   grid-template-columns: min-content 1fr;
-  align-items: start;
-  color: var(--token-color-foreground-faint);
+  align-items: center;
+  width: 100%;
+  max-width: 480px;
+  color: var(--token-color-foreground-strong);
+}
+
+.hds-application-state__error-code {
+  grid-area: error;
+  margin-bottom: 4px;
 }
 
 .hds-application-state__icon {
+  grid-area: icon;
   margin-right: 8px;
   padding-top: 4px;
 }
 
-.hds-application-state__title,
-.hds-application-state__error-code {
-  grid-column-start: 2;
+.hds-application-state__title {
+  grid-row: 2;
+  font-weight: var(--token-typography-font-weight-semibold);
+}
+.hds-application-state__title:not(.hds-application-state__icon + .hds-application-state__title) {
+  grid-column: icon/title;
 }
 
 .hds-application-state__body {
-  padding: 12px 0;
-  color: var(--token-color-foreground-faint);
+  width: 100%;
+  max-width: 480px;
+  margin: 12px 0 0;
+  color: var(--token-color-foreground-primary);
 }
 
 .hds-application-state__footer {
   display: flex;
-  gap: 8px;
-  justify-content: space-between;
+  gap: 16px;
+  width: 100%;
+  max-width: 480px;
+  margin-top: 24px;
 }
-.hds-application-state__footer.hds-application-state__footer--has-divider {
-  padding: 12px 0;
-  border-top: 1px solid var(--token-color-border-strong);
+.hds-application-state__footer > :nth-child(3) {
+  margin-left: auto;
 }
 
 /**
@@ -4853,6 +5155,46 @@ button.hds-button[href]::after {
   cursor: pointer;
 }
 
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+.hds-icon {
+  display: block;
+}
+
+.hds-icon--is-inline {
+  display: inline-block;
+}
+
+@keyframes hds-icon-animation-rotation {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.hds-icon--animation-loading {
+  animation: hds-icon-animation-rotation 9s linear infinite;
+}
+
+.hds-icon--animation-running {
+  animation: hds-icon-animation-rotation 9s linear infinite;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .hds-icon--animation-loading {
+    animation-duration: 0.7s;
+  }
+  .hds-icon--animation-running {
+    animation-duration: 1s;
+  }
+}
+.flight-sprite-container {
+  position: absolute;
+  width: 0;
+  height: 0;
+  visibility: hidden;
+}
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
@@ -5888,6 +6230,14 @@ button.hds-button[href]::after {
   min-height: 100vh;
   isolation: isolate;
 }
+.hds-side-nav.hds-side-nav--with-app-header {
+  top: var(--token-app-header-height);
+  height: calc(100vh - var(--token-app-header-height));
+  min-height: calc(100vh - var(--token-app-header-height));
+}
+.hds-side-nav.hds-side-nav--is-headerless {
+  --hds-app-sidenav-width-minimized: 16px;
+}
 .hds-side-nav.hds-side-nav--is-responsive {
   transition: width var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing);
 }
@@ -5947,6 +6297,9 @@ button.hds-button[href]::after {
   padding-right: var(--token-side-nav-wrapper-padding-horizontal-minimized);
   padding-left: var(--token-side-nav-wrapper-padding-horizontal-minimized);
 }
+.hds-side-nav__wrapper-header:empty {
+  padding: 0;
+}
 
 .hds-side-nav__wrapper-body {
   flex: 1;
@@ -5958,6 +6311,10 @@ button.hds-button[href]::after {
 .hds-side-nav__wrapper-footer {
   padding: var(--token-side-nav-wrapper-padding-vertical) var(--token-side-nav-wrapper-padding-horizontal);
 }
+.hds-side-nav__wrapper-footer:empty {
+  min-height: var(--token-side-nav-wrapper-padding-horizontal);
+  padding: 0;
+}
 
 .hds-side-nav--is-minimized .hds-side-nav-hide-when-minimized {
   visibility: hidden !important;
@@ -5973,6 +6330,10 @@ button.hds-button[href]::after {
   pointer-events: none;
 }
 
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
@@ -5998,21 +6359,27 @@ button.hds-button[href]::after {
 }
 
 .hds-side-nav__home-link {
+  border: 1px solid transparent;
+  cursor: pointer;
   color: var(--token-side-nav-color-foreground-strong);
   background-color: transparent;
-  border: 1px solid transparent;
   border-radius: var(--token-side-nav-body-list-item-border-radius);
-  cursor: pointer;
   display: block;
   width: 100%;
   height: 100%;
   padding: calc(var(--token-side-nav-header-home-link-padding) - 1px);
 }
+.hds-side-nav__home-link:hover, .hds-side-nav__home-link.mock-hover {
+  color: var(--token-side-nav-color-foreground-strong);
+  background-color: var(--token-side-nav-color-surface-interactive-hover);
+}
 .hds-side-nav__home-link:focus, .hds-side-nav__home-link.mock-focus {
   position: relative;
   outline-style: solid;
   outline-color: transparent;
   isolation: isolate;
+  color: var(--token-color-foreground-high-contrast);
+  background-color: var(--token-color-palette-neutral-700);
 }
 .hds-side-nav__home-link:focus::before, .hds-side-nav__home-link.mock-focus::before {
   position: absolute;
@@ -6036,13 +6403,22 @@ button.hds-button[href]::after {
 .hds-side-nav__home-link:focus:focus:active::before, .hds-side-nav__home-link:focus.mock-focus.mock-active::before, .hds-side-nav__home-link.mock-focus:focus:active::before, .hds-side-nav__home-link.mock-focus.mock-focus.mock-active::before {
   box-shadow: none;
 }
-.hds-side-nav__home-link:hover, .hds-side-nav__home-link.mock-hover {
-  color: var(--token-side-nav-color-foreground-strong);
-  background: var(--token-side-nav-color-surface-interactive-hover);
+.hds-side-nav__home-link:focus::before, .hds-side-nav__home-link.mock-focus::before {
+  color: var(--token-color-foreground-high-contrast);
+  border: none;
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-side-nav__home-link:focus:focus:not(:focus-visible)::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
 }
 .hds-side-nav__home-link:active, .hds-side-nav__home-link.mock-active {
   color: var(--token-side-nav-color-foreground-strong);
-  background: var(--token-side-nav-color-surface-interactive-active);
+  background-color: var(--token-side-nav-color-surface-interactive-active);
+}
+.hds-side-nav__home-link:disabled, .hds-side-nav__home-link[disabled], .hds-side-nav__home-link.mock-disabled, .hds-side-nav__home-link:disabled:focus, .hds-side-nav__home-link[disabled]:focus, .hds-side-nav__home-link.mock-disabled:focus, .hds-side-nav__home-link:disabled:hover, .hds-side-nav__home-link[disabled]:hover, .hds-side-nav__home-link.mock-disabled:hover {
+  color: var(--token-color-foreground-disabled);
+  background-color: var(--token-color-palette-neutral-600);
+  border-color: var(--token-color-palette-neutral-500);
 }
 
 .hds-side-nav-header__actions-container {
@@ -6050,26 +6426,85 @@ button.hds-button[href]::after {
   gap: var(--token-side-nav-header-actions-spacing);
 }
 
+.hds-side-nav__dropdown .hds-button,
+.hds-side-nav__dropdown .hds-dropdown-toggle-button,
 .hds-side-nav__dropdown .hds-dropdown-toggle-icon,
-.hds-side-nav__dropdown .hds-dropdown-toggle-button {
-  color: var(--token-side-nav-color-foreground-strong);
-  background-color: transparent;
+.hds-side-nav .hds-button,
+.hds-side-nav .hds-dropdown-toggle-button,
+.hds-side-nav .hds-dropdown-toggle-icon,
+.hds-side-nav-header .hds-button,
+.hds-side-nav-header .hds-dropdown-toggle-button,
+.hds-side-nav-header .hds-dropdown-toggle-icon {
   border: 1px solid transparent;
-  border-radius: var(--token-side-nav-body-list-item-border-radius);
   cursor: pointer;
   border-color: var(--token-color-palette-neutral-500);
+  color: var(--token-color-foreground-high-contrast);
+  background-color: var(--token-color-palette-neutral-700);
+  border-radius: 5px;
+}
+.hds-side-nav__dropdown .hds-button:hover, .hds-side-nav__dropdown .hds-button.mock-hover,
+.hds-side-nav__dropdown .hds-dropdown-toggle-button:hover,
+.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-hover,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon:hover,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-hover,
+.hds-side-nav .hds-button:hover,
+.hds-side-nav .hds-button.mock-hover,
+.hds-side-nav .hds-dropdown-toggle-button:hover,
+.hds-side-nav .hds-dropdown-toggle-button.mock-hover,
+.hds-side-nav .hds-dropdown-toggle-icon:hover,
+.hds-side-nav .hds-dropdown-toggle-icon.mock-hover,
+.hds-side-nav-header .hds-button:hover,
+.hds-side-nav-header .hds-button.mock-hover,
+.hds-side-nav-header .hds-dropdown-toggle-button:hover,
+.hds-side-nav-header .hds-dropdown-toggle-button.mock-hover,
+.hds-side-nav-header .hds-dropdown-toggle-icon:hover,
+.hds-side-nav-header .hds-dropdown-toggle-icon.mock-hover {
+  border-color: var(--token-color-palette-neutral-500);
+  color: var(--token-color-foreground-high-contrast);
+  background-color: var(--token-color-palette-neutral-600);
 }
-.hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus, .hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus,
+.hds-side-nav__dropdown .hds-button:focus, .hds-side-nav__dropdown .hds-button.mock-focus,
 .hds-side-nav__dropdown .hds-dropdown-toggle-button:focus,
-.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-focus {
+.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-focus,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus,
+.hds-side-nav .hds-button:focus,
+.hds-side-nav .hds-button.mock-focus,
+.hds-side-nav .hds-dropdown-toggle-button:focus,
+.hds-side-nav .hds-dropdown-toggle-button.mock-focus,
+.hds-side-nav .hds-dropdown-toggle-icon:focus,
+.hds-side-nav .hds-dropdown-toggle-icon.mock-focus,
+.hds-side-nav-header .hds-button:focus,
+.hds-side-nav-header .hds-button.mock-focus,
+.hds-side-nav-header .hds-dropdown-toggle-button:focus,
+.hds-side-nav-header .hds-dropdown-toggle-button.mock-focus,
+.hds-side-nav-header .hds-dropdown-toggle-icon:focus,
+.hds-side-nav-header .hds-dropdown-toggle-icon.mock-focus {
   position: relative;
   outline-style: solid;
   outline-color: transparent;
   isolation: isolate;
+  color: var(--token-color-foreground-high-contrast);
+  background-color: var(--token-color-palette-neutral-700);
+  border-color: var(--token-color-focus-action-internal);
 }
-.hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus::before, .hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus::before,
+.hds-side-nav__dropdown .hds-button:focus::before, .hds-side-nav__dropdown .hds-button.mock-focus::before,
 .hds-side-nav__dropdown .hds-dropdown-toggle-button:focus::before,
-.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-focus::before {
+.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-focus::before,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus::before,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus::before,
+.hds-side-nav .hds-button:focus::before,
+.hds-side-nav .hds-button.mock-focus::before,
+.hds-side-nav .hds-dropdown-toggle-button:focus::before,
+.hds-side-nav .hds-dropdown-toggle-button.mock-focus::before,
+.hds-side-nav .hds-dropdown-toggle-icon:focus::before,
+.hds-side-nav .hds-dropdown-toggle-icon.mock-focus::before,
+.hds-side-nav-header .hds-button:focus::before,
+.hds-side-nav-header .hds-button.mock-focus::before,
+.hds-side-nav-header .hds-dropdown-toggle-button:focus::before,
+.hds-side-nav-header .hds-dropdown-toggle-button.mock-focus::before,
+.hds-side-nav-header .hds-dropdown-toggle-icon:focus::before,
+.hds-side-nav-header .hds-dropdown-toggle-icon.mock-focus::before {
   position: absolute;
   top: -1px;
   right: -1px;
@@ -6079,51 +6514,252 @@ button.hds-button[href]::after {
   border-radius: 5px;
   content: "";
 }
-.hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus:focus::before, .hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus.mock-focus::before, .hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus:focus::before, .hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus.mock-focus::before,
+.hds-side-nav__dropdown .hds-button:focus:focus::before, .hds-side-nav__dropdown .hds-button:focus.mock-focus::before, .hds-side-nav__dropdown .hds-button.mock-focus:focus::before, .hds-side-nav__dropdown .hds-button.mock-focus.mock-focus::before,
 .hds-side-nav__dropdown .hds-dropdown-toggle-button:focus:focus::before,
 .hds-side-nav__dropdown .hds-dropdown-toggle-button:focus.mock-focus::before,
 .hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-focus:focus::before,
-.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-focus.mock-focus::before {
+.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-focus.mock-focus::before,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus:focus::before,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus.mock-focus::before,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus:focus::before,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus.mock-focus::before,
+.hds-side-nav .hds-button:focus:focus::before,
+.hds-side-nav .hds-button:focus.mock-focus::before,
+.hds-side-nav .hds-button.mock-focus:focus::before,
+.hds-side-nav .hds-button.mock-focus.mock-focus::before,
+.hds-side-nav .hds-dropdown-toggle-button:focus:focus::before,
+.hds-side-nav .hds-dropdown-toggle-button:focus.mock-focus::before,
+.hds-side-nav .hds-dropdown-toggle-button.mock-focus:focus::before,
+.hds-side-nav .hds-dropdown-toggle-button.mock-focus.mock-focus::before,
+.hds-side-nav .hds-dropdown-toggle-icon:focus:focus::before,
+.hds-side-nav .hds-dropdown-toggle-icon:focus.mock-focus::before,
+.hds-side-nav .hds-dropdown-toggle-icon.mock-focus:focus::before,
+.hds-side-nav .hds-dropdown-toggle-icon.mock-focus.mock-focus::before,
+.hds-side-nav-header .hds-button:focus:focus::before,
+.hds-side-nav-header .hds-button:focus.mock-focus::before,
+.hds-side-nav-header .hds-button.mock-focus:focus::before,
+.hds-side-nav-header .hds-button.mock-focus.mock-focus::before,
+.hds-side-nav-header .hds-dropdown-toggle-button:focus:focus::before,
+.hds-side-nav-header .hds-dropdown-toggle-button:focus.mock-focus::before,
+.hds-side-nav-header .hds-dropdown-toggle-button.mock-focus:focus::before,
+.hds-side-nav-header .hds-dropdown-toggle-button.mock-focus.mock-focus::before,
+.hds-side-nav-header .hds-dropdown-toggle-icon:focus:focus::before,
+.hds-side-nav-header .hds-dropdown-toggle-icon:focus.mock-focus::before,
+.hds-side-nav-header .hds-dropdown-toggle-icon.mock-focus:focus::before,
+.hds-side-nav-header .hds-dropdown-toggle-icon.mock-focus.mock-focus::before {
   box-shadow: var(--token-focus-ring-action-box-shadow);
 }
-.hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus:focus:not(:focus-visible)::before, .hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus:focus:not(:focus-visible)::before,
+.hds-side-nav__dropdown .hds-button:focus:focus:not(:focus-visible)::before, .hds-side-nav__dropdown .hds-button.mock-focus:focus:not(:focus-visible)::before,
 .hds-side-nav__dropdown .hds-dropdown-toggle-button:focus:focus:not(:focus-visible)::before,
-.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-focus:focus:not(:focus-visible)::before {
+.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-focus:focus:not(:focus-visible)::before,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus:focus:not(:focus-visible)::before,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus:focus:not(:focus-visible)::before,
+.hds-side-nav .hds-button:focus:focus:not(:focus-visible)::before,
+.hds-side-nav .hds-button.mock-focus:focus:not(:focus-visible)::before,
+.hds-side-nav .hds-dropdown-toggle-button:focus:focus:not(:focus-visible)::before,
+.hds-side-nav .hds-dropdown-toggle-button.mock-focus:focus:not(:focus-visible)::before,
+.hds-side-nav .hds-dropdown-toggle-icon:focus:focus:not(:focus-visible)::before,
+.hds-side-nav .hds-dropdown-toggle-icon.mock-focus:focus:not(:focus-visible)::before,
+.hds-side-nav-header .hds-button:focus:focus:not(:focus-visible)::before,
+.hds-side-nav-header .hds-button.mock-focus:focus:not(:focus-visible)::before,
+.hds-side-nav-header .hds-dropdown-toggle-button:focus:focus:not(:focus-visible)::before,
+.hds-side-nav-header .hds-dropdown-toggle-button.mock-focus:focus:not(:focus-visible)::before,
+.hds-side-nav-header .hds-dropdown-toggle-icon:focus:focus:not(:focus-visible)::before,
+.hds-side-nav-header .hds-dropdown-toggle-icon.mock-focus:focus:not(:focus-visible)::before {
   box-shadow: none;
 }
-.hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus:focus-visible::before, .hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus:focus-visible::before,
+.hds-side-nav__dropdown .hds-button:focus:focus-visible::before, .hds-side-nav__dropdown .hds-button.mock-focus:focus-visible::before,
 .hds-side-nav__dropdown .hds-dropdown-toggle-button:focus:focus-visible::before,
-.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-focus:focus-visible::before {
+.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-focus:focus-visible::before,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus:focus-visible::before,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus:focus-visible::before,
+.hds-side-nav .hds-button:focus:focus-visible::before,
+.hds-side-nav .hds-button.mock-focus:focus-visible::before,
+.hds-side-nav .hds-dropdown-toggle-button:focus:focus-visible::before,
+.hds-side-nav .hds-dropdown-toggle-button.mock-focus:focus-visible::before,
+.hds-side-nav .hds-dropdown-toggle-icon:focus:focus-visible::before,
+.hds-side-nav .hds-dropdown-toggle-icon.mock-focus:focus-visible::before,
+.hds-side-nav-header .hds-button:focus:focus-visible::before,
+.hds-side-nav-header .hds-button.mock-focus:focus-visible::before,
+.hds-side-nav-header .hds-dropdown-toggle-button:focus:focus-visible::before,
+.hds-side-nav-header .hds-dropdown-toggle-button.mock-focus:focus-visible::before,
+.hds-side-nav-header .hds-dropdown-toggle-icon:focus:focus-visible::before,
+.hds-side-nav-header .hds-dropdown-toggle-icon.mock-focus:focus-visible::before {
   box-shadow: var(--token-focus-ring-action-box-shadow);
 }
-.hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus:focus:active::before, .hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus.mock-focus.mock-active::before, .hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus:focus:active::before, .hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus.mock-focus.mock-active::before,
+.hds-side-nav__dropdown .hds-button:focus:focus:active::before, .hds-side-nav__dropdown .hds-button:focus.mock-focus.mock-active::before, .hds-side-nav__dropdown .hds-button.mock-focus:focus:active::before, .hds-side-nav__dropdown .hds-button.mock-focus.mock-focus.mock-active::before,
 .hds-side-nav__dropdown .hds-dropdown-toggle-button:focus:focus:active::before,
 .hds-side-nav__dropdown .hds-dropdown-toggle-button:focus.mock-focus.mock-active::before,
 .hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-focus:focus:active::before,
-.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-focus.mock-focus.mock-active::before {
+.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-focus.mock-focus.mock-active::before,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus:focus:active::before,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus.mock-focus.mock-active::before,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus:focus:active::before,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus.mock-focus.mock-active::before,
+.hds-side-nav .hds-button:focus:focus:active::before,
+.hds-side-nav .hds-button:focus.mock-focus.mock-active::before,
+.hds-side-nav .hds-button.mock-focus:focus:active::before,
+.hds-side-nav .hds-button.mock-focus.mock-focus.mock-active::before,
+.hds-side-nav .hds-dropdown-toggle-button:focus:focus:active::before,
+.hds-side-nav .hds-dropdown-toggle-button:focus.mock-focus.mock-active::before,
+.hds-side-nav .hds-dropdown-toggle-button.mock-focus:focus:active::before,
+.hds-side-nav .hds-dropdown-toggle-button.mock-focus.mock-focus.mock-active::before,
+.hds-side-nav .hds-dropdown-toggle-icon:focus:focus:active::before,
+.hds-side-nav .hds-dropdown-toggle-icon:focus.mock-focus.mock-active::before,
+.hds-side-nav .hds-dropdown-toggle-icon.mock-focus:focus:active::before,
+.hds-side-nav .hds-dropdown-toggle-icon.mock-focus.mock-focus.mock-active::before,
+.hds-side-nav-header .hds-button:focus:focus:active::before,
+.hds-side-nav-header .hds-button:focus.mock-focus.mock-active::before,
+.hds-side-nav-header .hds-button.mock-focus:focus:active::before,
+.hds-side-nav-header .hds-button.mock-focus.mock-focus.mock-active::before,
+.hds-side-nav-header .hds-dropdown-toggle-button:focus:focus:active::before,
+.hds-side-nav-header .hds-dropdown-toggle-button:focus.mock-focus.mock-active::before,
+.hds-side-nav-header .hds-dropdown-toggle-button.mock-focus:focus:active::before,
+.hds-side-nav-header .hds-dropdown-toggle-button.mock-focus.mock-focus.mock-active::before,
+.hds-side-nav-header .hds-dropdown-toggle-icon:focus:focus:active::before,
+.hds-side-nav-header .hds-dropdown-toggle-icon:focus.mock-focus.mock-active::before,
+.hds-side-nav-header .hds-dropdown-toggle-icon.mock-focus:focus:active::before,
+.hds-side-nav-header .hds-dropdown-toggle-icon.mock-focus.mock-focus.mock-active::before {
   box-shadow: none;
 }
-.hds-side-nav__dropdown .hds-dropdown-toggle-icon:hover, .hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-hover,
-.hds-side-nav__dropdown .hds-dropdown-toggle-button:hover,
-.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-hover {
-  color: var(--token-side-nav-color-foreground-strong);
-  background: var(--token-side-nav-color-surface-interactive-hover);
+.hds-side-nav__dropdown .hds-button:focus::before, .hds-side-nav__dropdown .hds-button.mock-focus::before,
+.hds-side-nav__dropdown .hds-dropdown-toggle-button:focus::before,
+.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-focus::before,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus::before,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus::before,
+.hds-side-nav .hds-button:focus::before,
+.hds-side-nav .hds-button.mock-focus::before,
+.hds-side-nav .hds-dropdown-toggle-button:focus::before,
+.hds-side-nav .hds-dropdown-toggle-button.mock-focus::before,
+.hds-side-nav .hds-dropdown-toggle-icon:focus::before,
+.hds-side-nav .hds-dropdown-toggle-icon.mock-focus::before,
+.hds-side-nav-header .hds-button:focus::before,
+.hds-side-nav-header .hds-button.mock-focus::before,
+.hds-side-nav-header .hds-dropdown-toggle-button:focus::before,
+.hds-side-nav-header .hds-dropdown-toggle-button.mock-focus::before,
+.hds-side-nav-header .hds-dropdown-toggle-icon:focus::before,
+.hds-side-nav-header .hds-dropdown-toggle-icon.mock-focus::before {
+  color: var(--token-color-foreground-high-contrast);
+  border: none;
+  box-shadow: var(--token-focus-ring-action-box-shadow);
 }
-.hds-side-nav__dropdown .hds-dropdown-toggle-icon:active, .hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-active,
+.hds-side-nav__dropdown .hds-button:focus:focus:not(:focus-visible)::before,
+.hds-side-nav__dropdown .hds-dropdown-toggle-button:focus:focus:not(:focus-visible)::before,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus:focus:not(:focus-visible)::before,
+.hds-side-nav .hds-button:focus:focus:not(:focus-visible)::before,
+.hds-side-nav .hds-dropdown-toggle-button:focus:focus:not(:focus-visible)::before,
+.hds-side-nav .hds-dropdown-toggle-icon:focus:focus:not(:focus-visible)::before,
+.hds-side-nav-header .hds-button:focus:focus:not(:focus-visible)::before,
+.hds-side-nav-header .hds-dropdown-toggle-button:focus:focus:not(:focus-visible)::before,
+.hds-side-nav-header .hds-dropdown-toggle-icon:focus:focus:not(:focus-visible)::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-side-nav__dropdown .hds-button:active, .hds-side-nav__dropdown .hds-button.mock-active,
 .hds-side-nav__dropdown .hds-dropdown-toggle-button:active,
-.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-active {
-  color: var(--token-side-nav-color-foreground-strong);
-  background: var(--token-side-nav-color-surface-interactive-active);
+.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-active,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon:active,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-active,
+.hds-side-nav .hds-button:active,
+.hds-side-nav .hds-button.mock-active,
+.hds-side-nav .hds-dropdown-toggle-button:active,
+.hds-side-nav .hds-dropdown-toggle-button.mock-active,
+.hds-side-nav .hds-dropdown-toggle-icon:active,
+.hds-side-nav .hds-dropdown-toggle-icon.mock-active,
+.hds-side-nav-header .hds-button:active,
+.hds-side-nav-header .hds-button.mock-active,
+.hds-side-nav-header .hds-dropdown-toggle-button:active,
+.hds-side-nav-header .hds-dropdown-toggle-button.mock-active,
+.hds-side-nav-header .hds-dropdown-toggle-icon:active,
+.hds-side-nav-header .hds-dropdown-toggle-icon.mock-active {
+  color: var(--token-color-foreground-high-contrast);
+  background-color: var(--token-color-palette-neutral-500);
   border-color: var(--token-color-palette-neutral-400);
 }
+.hds-side-nav__dropdown .hds-button:disabled, .hds-side-nav__dropdown .hds-button[disabled], .hds-side-nav__dropdown .hds-button.mock-disabled, .hds-side-nav__dropdown .hds-button:disabled:focus, .hds-side-nav__dropdown .hds-button[disabled]:focus, .hds-side-nav__dropdown .hds-button.mock-disabled:focus, .hds-side-nav__dropdown .hds-button:disabled:hover, .hds-side-nav__dropdown .hds-button[disabled]:hover, .hds-side-nav__dropdown .hds-button.mock-disabled:hover,
+.hds-side-nav__dropdown .hds-dropdown-toggle-button:disabled,
+.hds-side-nav__dropdown .hds-dropdown-toggle-button[disabled],
+.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-disabled,
+.hds-side-nav__dropdown .hds-dropdown-toggle-button:disabled:focus,
+.hds-side-nav__dropdown .hds-dropdown-toggle-button[disabled]:focus,
+.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-disabled:focus,
+.hds-side-nav__dropdown .hds-dropdown-toggle-button:disabled:hover,
+.hds-side-nav__dropdown .hds-dropdown-toggle-button[disabled]:hover,
+.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-disabled:hover,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon:disabled,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon[disabled],
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-disabled,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon:disabled:focus,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon[disabled]:focus,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-disabled:focus,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon:disabled:hover,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon[disabled]:hover,
+.hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-disabled:hover,
+.hds-side-nav .hds-button:disabled,
+.hds-side-nav .hds-button[disabled],
+.hds-side-nav .hds-button.mock-disabled,
+.hds-side-nav .hds-button:disabled:focus,
+.hds-side-nav .hds-button[disabled]:focus,
+.hds-side-nav .hds-button.mock-disabled:focus,
+.hds-side-nav .hds-button:disabled:hover,
+.hds-side-nav .hds-button[disabled]:hover,
+.hds-side-nav .hds-button.mock-disabled:hover,
+.hds-side-nav .hds-dropdown-toggle-button:disabled,
+.hds-side-nav .hds-dropdown-toggle-button[disabled],
+.hds-side-nav .hds-dropdown-toggle-button.mock-disabled,
+.hds-side-nav .hds-dropdown-toggle-button:disabled:focus,
+.hds-side-nav .hds-dropdown-toggle-button[disabled]:focus,
+.hds-side-nav .hds-dropdown-toggle-button.mock-disabled:focus,
+.hds-side-nav .hds-dropdown-toggle-button:disabled:hover,
+.hds-side-nav .hds-dropdown-toggle-button[disabled]:hover,
+.hds-side-nav .hds-dropdown-toggle-button.mock-disabled:hover,
+.hds-side-nav .hds-dropdown-toggle-icon:disabled,
+.hds-side-nav .hds-dropdown-toggle-icon[disabled],
+.hds-side-nav .hds-dropdown-toggle-icon.mock-disabled,
+.hds-side-nav .hds-dropdown-toggle-icon:disabled:focus,
+.hds-side-nav .hds-dropdown-toggle-icon[disabled]:focus,
+.hds-side-nav .hds-dropdown-toggle-icon.mock-disabled:focus,
+.hds-side-nav .hds-dropdown-toggle-icon:disabled:hover,
+.hds-side-nav .hds-dropdown-toggle-icon[disabled]:hover,
+.hds-side-nav .hds-dropdown-toggle-icon.mock-disabled:hover,
+.hds-side-nav-header .hds-button:disabled,
+.hds-side-nav-header .hds-button[disabled],
+.hds-side-nav-header .hds-button.mock-disabled,
+.hds-side-nav-header .hds-button:disabled:focus,
+.hds-side-nav-header .hds-button[disabled]:focus,
+.hds-side-nav-header .hds-button.mock-disabled:focus,
+.hds-side-nav-header .hds-button:disabled:hover,
+.hds-side-nav-header .hds-button[disabled]:hover,
+.hds-side-nav-header .hds-button.mock-disabled:hover,
+.hds-side-nav-header .hds-dropdown-toggle-button:disabled,
+.hds-side-nav-header .hds-dropdown-toggle-button[disabled],
+.hds-side-nav-header .hds-dropdown-toggle-button.mock-disabled,
+.hds-side-nav-header .hds-dropdown-toggle-button:disabled:focus,
+.hds-side-nav-header .hds-dropdown-toggle-button[disabled]:focus,
+.hds-side-nav-header .hds-dropdown-toggle-button.mock-disabled:focus,
+.hds-side-nav-header .hds-dropdown-toggle-button:disabled:hover,
+.hds-side-nav-header .hds-dropdown-toggle-button[disabled]:hover,
+.hds-side-nav-header .hds-dropdown-toggle-button.mock-disabled:hover,
+.hds-side-nav-header .hds-dropdown-toggle-icon:disabled,
+.hds-side-nav-header .hds-dropdown-toggle-icon[disabled],
+.hds-side-nav-header .hds-dropdown-toggle-icon.mock-disabled,
+.hds-side-nav-header .hds-dropdown-toggle-icon:disabled:focus,
+.hds-side-nav-header .hds-dropdown-toggle-icon[disabled]:focus,
+.hds-side-nav-header .hds-dropdown-toggle-icon.mock-disabled:focus,
+.hds-side-nav-header .hds-dropdown-toggle-icon:disabled:hover,
+.hds-side-nav-header .hds-dropdown-toggle-icon[disabled]:hover,
+.hds-side-nav-header .hds-dropdown-toggle-icon.mock-disabled:hover {
+  color: var(--token-color-foreground-disabled);
+  background-color: var(--token-color-palette-neutral-600);
+  border-color: var(--token-color-palette-neutral-500);
+}
 
 .hds-side-nav__icon-button {
-  color: var(--token-side-nav-color-foreground-strong);
-  background-color: transparent;
   border: 1px solid transparent;
-  border-radius: var(--token-side-nav-body-list-item-border-radius);
   cursor: pointer;
   border-color: var(--token-color-palette-neutral-500);
+  color: var(--token-color-foreground-high-contrast);
+  background-color: var(--token-color-palette-neutral-700);
+  border-radius: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -6131,11 +6767,19 @@ button.hds-button[href]::after {
   height: 36px;
   padding: 5px;
 }
+.hds-side-nav__icon-button:hover, .hds-side-nav__icon-button.mock-hover {
+  border-color: var(--token-color-palette-neutral-500);
+  color: var(--token-color-foreground-high-contrast);
+  background-color: var(--token-color-palette-neutral-600);
+}
 .hds-side-nav__icon-button:focus, .hds-side-nav__icon-button.mock-focus {
   position: relative;
   outline-style: solid;
   outline-color: transparent;
   isolation: isolate;
+  color: var(--token-color-foreground-high-contrast);
+  background-color: var(--token-color-palette-neutral-700);
+  border-color: var(--token-color-focus-action-internal);
 }
 .hds-side-nav__icon-button:focus::before, .hds-side-nav__icon-button.mock-focus::before {
   position: absolute;
@@ -6159,15 +6803,24 @@ button.hds-button[href]::after {
 .hds-side-nav__icon-button:focus:focus:active::before, .hds-side-nav__icon-button:focus.mock-focus.mock-active::before, .hds-side-nav__icon-button.mock-focus:focus:active::before, .hds-side-nav__icon-button.mock-focus.mock-focus.mock-active::before {
   box-shadow: none;
 }
-.hds-side-nav__icon-button:hover, .hds-side-nav__icon-button.mock-hover {
-  color: var(--token-side-nav-color-foreground-strong);
-  background: var(--token-side-nav-color-surface-interactive-hover);
+.hds-side-nav__icon-button:focus::before, .hds-side-nav__icon-button.mock-focus::before {
+  color: var(--token-color-foreground-high-contrast);
+  border: none;
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-side-nav__icon-button:focus:focus:not(:focus-visible)::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
 }
 .hds-side-nav__icon-button:active, .hds-side-nav__icon-button.mock-active {
-  color: var(--token-side-nav-color-foreground-strong);
-  background: var(--token-side-nav-color-surface-interactive-active);
+  color: var(--token-color-foreground-high-contrast);
+  background-color: var(--token-color-palette-neutral-500);
   border-color: var(--token-color-palette-neutral-400);
 }
+.hds-side-nav__icon-button:disabled, .hds-side-nav__icon-button[disabled], .hds-side-nav__icon-button.mock-disabled, .hds-side-nav__icon-button:disabled:focus, .hds-side-nav__icon-button[disabled]:focus, .hds-side-nav__icon-button.mock-disabled:focus, .hds-side-nav__icon-button:disabled:hover, .hds-side-nav__icon-button[disabled]:hover, .hds-side-nav__icon-button.mock-disabled:hover {
+  color: var(--token-color-foreground-disabled);
+  background-color: var(--token-color-palette-neutral-600);
+  border-color: var(--token-color-palette-neutral-500);
+}
 
 /**
  * Copyright (c) HashiCorp, Inc.
@@ -6399,6 +7052,9 @@ button.hds-button[href]::after {
 .hds-side-nav--is-minimized .hds-side-nav__toggle-button {
   transform: translateX(var(--hds-app-sidenav-width-minimized));
 }
+.hds-side-nav:has(.hds-side-nav__wrapper-header:empty) .hds-side-nav__toggle-button {
+  top: var(--token-side-nav-wrapper-padding-vertical);
+}
 
 /**
  * Copyright (c) HashiCorp, Inc.