@hashicorp/design-system-components 4.6.0 → 4.8.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;
 }
 
 /**
@@ -2709,6 +3011,103 @@ button.hds-button[href]::after {
   text-overflow: ellipsis;
 }
 
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+:where(.hds-dialog-primitive__wrapper) {
+  all: unset;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background: var(--token-color-surface-primary);
+}
+
+.hds-dialog-primitive__wrapper-header {
+  flex: none;
+  background: var(--token-color-surface-faint);
+  border-bottom: 1px solid var(--token-color-border-primary);
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+.hds-dialog-primitive__wrapper-header:not(:has(> *)) {
+  display: none;
+}
+
+.hds-dialog-primitive__wrapper-body {
+  flex: 1 1 auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.hds-dialog-primitive__wrapper-footer {
+  flex: none;
+  border-top: 1px solid var(--token-color-border-primary);
+  border-bottom-right-radius: inherit;
+  border-bottom-left-radius: inherit;
+}
+.hds-dialog-primitive__wrapper-footer:not(:has(> *)) {
+  display: none;
+}
+
+.hds-dialog-primitive__header {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+  padding: 16px 24px;
+  color: var(--token-color-foreground-strong);
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+.hds-dialog-primitive__icon {
+  flex: none;
+  align-self: center;
+}
+
+.hds-dialog-primitive__title {
+  flex-grow: 1;
+}
+
+.hds-dialog-primitive__tagline {
+  margin-bottom: 4px;
+  color: var(--token-color-foreground-faint);
+}
+
+.hds-dialog-primitive__dismiss {
+  align-self: flex-start;
+}
+
+.hds-dialog-primitive__description {
+  padding: 0 24px 16px;
+}
+
+.hds-dialog-primitive__body {
+  padding: 24px;
+}
+
+.hds-dialog-primitive__footer {
+  padding: 16px 24px;
+  background: var(--token-color-surface-faint);
+  border-bottom-right-radius: inherit;
+  border-bottom-left-radius: inherit;
+}
+.hds-dialog-primitive__footer .hds-button-set .hds-button--color-tertiary {
+  margin-left: auto;
+}
+
+.hds-dialog-primitive__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 49;
+  background: var(--token-color-palette-neutral-700);
+  opacity: 0.5;
+}
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
@@ -3475,83 +3874,22 @@ button.hds-button[href]::after {
  * SPDX-License-Identifier: MPL-2.0
  */
 .hds-flyout {
+  position: fixed;
   z-index: 49;
-  flex-direction: column;
+  inset: 0;
   height: 100vh;
   max-height: 100vh;
-  margin: 0;
-  padding: 0;
   background: var(--token-color-surface-primary);
   border: none;
   box-shadow: 0 2px 3px 0 rgba(59, 61, 69, 0.2509803922), 0 12px 24px 0 rgba(59, 61, 69, 0.3490196078);
 }
-.hds-flyout[open] {
-  position: fixed;
-  display: flex;
+.hds-flyout:not([open]) {
+  display: none;
 }
 .hds-flyout::backdrop {
   display: none;
 }
 
-.hds-flyout__overlay {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 49;
-  background: var(--token-color-palette-neutral-700);
-  opacity: 0.5;
-}
-
-.hds-flyout__header {
-  display: flex;
-  flex: none;
-  gap: 16px;
-  align-items: flex-start;
-  padding: 16px 24px;
-  color: var(--token-color-foreground-strong);
-}
-
-.hds-flyout__icon {
-  flex: none;
-  align-self: center;
-}
-
-.hds-flyout__title {
-  flex-grow: 1;
-}
-
-.hds-flyout__tagline {
-  margin-bottom: 4px;
-}
-
-.hds-flyout__dismiss {
-  align-self: center;
-}
-
-.hds-flyout__description {
-  padding: 0 24px 16px;
-}
-
-.hds-flyout__body {
-  flex: 1 1 auto;
-  padding: 24px;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  border-top: 1px solid var(--token-color-border-primary);
-}
-
-.hds-flyout__footer {
-  flex: none;
-  padding: 16px 24px;
-  background: var(--token-color-surface-faint);
-  border-top: 1px solid var(--token-color-border-primary);
-}
-.hds-flyout__footer .hds-button-set .hds-button--color-tertiary {
-  margin-left: auto;
-}
-
 .hds-flyout--size-medium {
   width: min(480px, calc(100vw - var(--hds-app-sidenav-width-minimized) / 2));
   max-width: calc(100vw - var(--hds-app-sidenav-width-minimized) / 2);
@@ -4603,17 +4941,17 @@ button.hds-button[href]::after {
   right: calc(var(--token-form-control-padding) - var(--token-form-control-border-width));
 }
 
-.hds-form-text-input[type=date], .hds-form-text-input[type=time], .hds-form-text-input[type=datetime-local] {
+.hds-form-text-input[type=date], .hds-form-text-input[type=time], .hds-form-text-input[type=datetime-local], .hds-form-text-input[type=month], .hds-form-text-input[type=week] {
   width: initial;
 }
-.hds-form-text-input[type=date]:disabled::-webkit-calendar-picker-indicator, .hds-form-text-input[type=time]:disabled::-webkit-calendar-picker-indicator, .hds-form-text-input[type=datetime-local]:disabled::-webkit-calendar-picker-indicator {
+.hds-form-text-input[type=date]:disabled::-webkit-calendar-picker-indicator, .hds-form-text-input[type=time]:disabled::-webkit-calendar-picker-indicator, .hds-form-text-input[type=datetime-local]:disabled::-webkit-calendar-picker-indicator, .hds-form-text-input[type=month]:disabled::-webkit-calendar-picker-indicator, .hds-form-text-input[type=week]:disabled::-webkit-calendar-picker-indicator {
   visibility: visible;
   opacity: 0.5;
 }
-.hds-form-text-input[type=date][readonly]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=time][readonly]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=datetime-local][readonly]::-webkit-calendar-picker-indicator {
+.hds-form-text-input[type=date][readonly]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=time][readonly]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=datetime-local][readonly]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=month][readonly]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=week][readonly]::-webkit-calendar-picker-indicator {
   visibility: visible;
 }
-.hds-form-text-input[type=date]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=datetime-local]::-webkit-calendar-picker-indicator {
+.hds-form-text-input[type=date]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=datetime-local]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=month]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=week]::-webkit-calendar-picker-indicator {
   background-image: var(--token-form-text-input-background-image-data-url-date);
   background-position: center center;
   background-size: var(--token-form-text-input-background-image-size);
@@ -5179,79 +5517,22 @@ button.hds-button[href]::after {
  * SPDX-License-Identifier: MPL-2.0
  */
 .hds-modal {
+  position: fixed;
   z-index: 50;
-  flex-direction: column;
-  padding: 0;
-  background: var(--token-color-surface-primary);
-  border: none;
+  height: fit-content;
+  max-height: 95vh;
+  inset: 0;
+  margin: auto;
   border-radius: 8px;
   box-shadow: var(--token-surface-overlay-box-shadow);
 }
-.hds-modal[open] {
-  position: fixed;
-  display: flex;
+.hds-modal:not([open]) {
+  display: none;
 }
 .hds-modal::backdrop {
   display: none;
 }
 
-.hds-modal__overlay {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 50;
-  background: var(--token-color-palette-neutral-700);
-  opacity: 0.5;
-}
-
-.hds-modal__header {
-  display: flex;
-  flex: none;
-  gap: 16px;
-  align-items: flex-start;
-  padding: 16px 24px;
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-}
-
-.hds-modal__icon {
-  flex: none;
-  align-self: center;
-}
-
-.hds-modal__title {
-  flex-grow: 1;
-}
-
-.hds-modal__tagline {
-  margin-bottom: 4px;
-}
-
-.hds-modal__dismiss {
-  align-self: center;
-}
-
-.hds-modal__body {
-  flex: 1 1 auto;
-  padding: 24px;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-}
-
-.hds-modal__footer {
-  flex: none;
-  padding: 16px 24px;
-  background: var(--token-color-surface-faint);
-  border-top: 1px solid var(--token-color-border-primary);
-  border-bottom-right-radius: inherit;
-  border-bottom-left-radius: inherit;
-}
-.hds-modal__footer .hds-button-set .hds-button--color-tertiary {
-  margin-left: auto;
-}
-
 .hds-modal--size-small {
   width: min(400px, 95vw);
 }
@@ -5264,30 +5545,21 @@ button.hds-button[href]::after {
   width: min(800px, 95vw);
 }
 
-.hds-modal--color-neutral .hds-modal__header {
-  color: var(--token-color-foreground-strong);
-  background: var(--token-color-surface-faint);
-  border-bottom: 1px solid var(--token-color-border-primary);
-}
-.hds-modal--color-neutral .hds-modal__tagline {
-  color: var(--token-color-foreground-faint);
-}
-
-.hds-modal--color-warning .hds-modal__header {
-  color: var(--token-color-foreground-warning-on-surface);
+.hds-modal--color-warning .hds-dialog-primitive__wrapper-header {
   background: var(--token-color-surface-warning);
   border-bottom: 1px solid var(--token-color-border-warning);
 }
-.hds-modal--color-warning .hds-modal__tagline {
+.hds-modal--color-warning .hds-dialog-primitive__header,
+.hds-modal--color-warning .hds-dialog-primitive__tagline {
   color: var(--token-color-foreground-warning-on-surface);
 }
 
-.hds-modal--color-critical .hds-modal__header {
-  color: var(--token-color-foreground-critical-on-surface);
+.hds-modal--color-critical .hds-dialog-primitive__wrapper-header {
   background: var(--token-color-surface-critical);
   border-bottom: 1px solid var(--token-color-border-critical);
 }
-.hds-modal--color-critical .hds-modal__tagline {
+.hds-modal--color-critical .hds-dialog-primitive__header,
+.hds-modal--color-critical .hds-dialog-primitive__tagline {
   color: var(--token-color-foreground-critical-on-surface);
 }
 
@@ -5918,6 +6190,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);
 }
@@ -5977,6 +6257,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;
@@ -5988,6 +6271,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;
@@ -6003,6 +6290,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
@@ -6028,21 +6319,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;
@@ -6066,13 +6363,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 {
@@ -6080,26 +6386,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-dropdown-toggle-icon:focus, .hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus,
+.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-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;
@@ -6109,51 +6474,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;
@@ -6161,11 +6727,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;
@@ -6189,15 +6763,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.
@@ -6429,6 +7012,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.