@hashicorp/design-system-components 4.13.1 → 4.14.0

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

@@ -5,7 +5,7 @@
  */
 /**
  * Do not edit directly
- * Generated on Tue, 27 Aug 2024 16:41:13 GMT
+ * Generated on Fri, 20 Sep 2024 19:02:21 GMT
  */
 :root {
   --token-color-palette-blue-500: #1c345f;
@@ -271,6 +271,30 @@
   --token-app-header-height: 60px;
   --token-app-header-home-link-size: 36px;
   --token-app-header-logo-size: 28px;
+  --token-app-side-nav-wrapper-border-width: 1px;
+  --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200);
+  --token-app-side-nav-wrapper-padding-horizontal: 16px;
+  --token-app-side-nav-wrapper-padding-vertical: 16px;
+  --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px;
+  --token-app-side-nav-wrapper-padding-vertical-minimized: 22px;
+  --token-app-side-nav-toggle-button-border-radius: 5px;
+  --token-app-side-nav-header-home-link-padding: 4px;
+  --token-app-side-nav-header-home-link-logo-size: 48px;
+  --token-app-side-nav-header-home-link-logo-size-minimized: 32px;
+  --token-app-side-nav-header-actions-spacing: 8px;
+  --token-app-side-nav-body-list-margin-vertical: 24px;
+  --token-app-side-nav-body-list-item-height: 36px;
+  --token-app-side-nav-body-list-item-padding-horizontal: 8px;
+  --token-app-side-nav-body-list-item-padding-vertical: 4px;
+  --token-app-side-nav-body-list-item-spacing-vertical: 2px;
+  --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px;
+  --token-app-side-nav-body-list-item-border-radius: 5px;
+  --token-app-side-nav-color-foreground-primary: var(--token-color-foreground-primary);
+  --token-app-side-nav-color-foreground-strong: var(--token-color-foreground-primary);
+  --token-app-side-nav-color-foreground-faint: var(--token-color-foreground-faint);
+  --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint);
+  --token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover);
+  --token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300);
   --token-pagination-nav-control-height: 36px;
   --token-pagination-nav-control-padding-horizontal: 12px;
   --token-pagination-nav-control-focus-inset: 4px;
@@ -369,7 +393,7 @@
 
 /**
  * Do not edit directly
- * Generated on Tue, 27 Aug 2024 16:41:13 GMT
+ * Generated on Fri, 20 Sep 2024 19:02:21 GMT
  */
 .hds-border-primary {
   border: 1px solid var(--token-color-border-primary);
@@ -541,7 +565,7 @@
 
 /**
  * Do not edit directly
- * Generated on Tue, 27 Aug 2024 16:41:13 GMT
+ * Generated on Fri, 20 Sep 2024 19:02:21 GMT
  */
 .hds-elevation-high {
   box-shadow: var(--token-elevation-high-box-shadow);
@@ -597,7 +621,7 @@
 
 /**
  * Do not edit directly
- * Generated on Tue, 27 Aug 2024 16:41:13 GMT
+ * Generated on Fri, 20 Sep 2024 19:02:21 GMT
  */
 .hds-focus-ring-action-box-shadow {
   box-shadow: var(--token-focus-ring-action-box-shadow);
@@ -609,7 +633,7 @@
 
 /**
  * Do not edit directly
- * Generated on Tue, 27 Aug 2024 16:41:13 GMT
+ * Generated on Fri, 20 Sep 2024 19:02:21 GMT
  */
 .hds-font-family-sans-display {
   font-family: var(--token-typography-font-stack-display);
@@ -1317,294 +1341,6 @@
   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;
-  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 .ember-a11y-refocus-skip-link {
-  top: 10px;
-  left: 10px;
-  z-index: 20;
-  width: max-content;
-  padding: 2px 10px 4px;
-  color: var(--token-color-foreground-action);
-  font-size: var(--token-typography-display-200-font-size);
-  font-family: var(--token-typography-display-200-font-family);
-  line-height: var(--token-typography-display-200-line-height);
-  background-color: var(--token-color-surface-faint);
-  border-radius: 3px;
-  transform: translateY(-200%);
-  transition: 0.6s ease-in-out;
-}
-.hds-app-header .ember-a11y-refocus-skip-link:focus {
-  transform: translateY(0);
-}
-.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 {
-  flex-wrap: wrap;
-  align-content: flex-start;
-  padding: 16px;
-  overflow: auto;
-  background: var(--token-color-palette-neutral-700);
-}
-.hds-app-header.hds-app-header--is-mobile.hds-app-header--menu-is-closed .hds-app-header__actions {
-  display: none;
-}
-.hds-app-header.hds-app-header--is-mobile.hds-app-header--menu-is-open .hds-app-header__actions {
-  height: calc(100vh - var(--token-app-header-height));
-}
-.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:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *),
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *),
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *) {
-  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:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):hover, .hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-hover,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):hover,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-hover,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):hover,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).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:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus, .hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).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:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, .hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).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:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus::before, .hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus::before, .hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus::before, .hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus::before,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus::before,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus::before,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus::before,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus::before,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus::before,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus::before,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus::before,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus::before {
-  box-shadow: var(--token-focus-ring-action-box-shadow);
-}
-.hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before, .hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:not(:focus-visible)::before,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:not(:focus-visible)::before,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:not(:focus-visible)::before {
-  box-shadow: none;
-}
-.hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus-visible::before, .hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus-visible::before,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus-visible::before,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus-visible::before,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus-visible::before,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus-visible::before {
-  box-shadow: var(--token-focus-ring-action-box-shadow);
-}
-.hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:active::before, .hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus.mock-active::before, .hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:active::before, .hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus.mock-active::before,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:active::before,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus.mock-active::before,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:active::before,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus.mock-active::before,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:active::before,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus.mock-focus.mock-active::before,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus:focus:active::before,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus.mock-focus.mock-active::before {
-  box-shadow: none;
-}
-.hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before, .hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-focus::before,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus::before,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).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:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):focus:focus:not(:focus-visible)::before {
-  box-shadow: var(--token-focus-ring-action-box-shadow);
-}
-.hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):active, .hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-active,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):active,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-active,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):active,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).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:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled, .hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled], .hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled, .hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:focus, .hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:focus, .hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:focus, .hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:hover, .hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:hover, .hds-app-header .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:hover,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled],
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:focus,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:focus,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:focus,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:hover,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:hover,
-.hds-app-header .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:hover,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled],
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:focus,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:focus,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-disabled:focus,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):disabled:hover,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *)[disabled]:hover,
-.hds-app-header .hds-dropdown-toggle-icon:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).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-frame:has(.hds-side-nav--is-not-minimized) .hds-app-header--is-mobile .hds-button,
-.hds-app-frame:has(.hds-side-nav--is-not-minimized) .hds-app-header--is-mobile .hds-dropdown-toggle-button,
-.hds-app-frame:has(.hds-side-nav--is-not-minimized) .hds-app-header--is-mobile .hds-dropdown-toggle-icon,
-.hds-app-frame:has(.hds-side-nav--is-not-minimized) .hds-app-header--is-mobile .hds-app-header__home-link {
-  color: var(--token-color-foreground-disabled);
-  background-color: var(--token-color-palette-neutral-600);
-  border-color: var(--token-color-palette-neutral-500);
-  pointer-events: none;
-}
-
-.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
@@ -3416,6 +3152,10 @@ button.hds-button[href]::after {
 .hds-dropdown-toggle-button--size-small {
   padding-right: 0.375rem;
 }
+.hds-dropdown-toggle-button--size-small .hds-dropdown-toggle-chevron .hds-icon {
+  width: 12px;
+  height: 12px;
+}
 
 .hds-dropdown-toggle-button--size-medium {
   padding-right: 0.5625rem;
@@ -6385,6 +6125,10 @@ button.hds-button[href]::after {
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
  */
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
 .hds-side-nav-header {
   display: flex;
   align-items: center;
@@ -6889,6 +6633,10 @@ button.hds-button[href]::after {
 
 .hds-side-nav__content-panel {
   padding: 0 var(--token-side-nav-wrapper-padding-horizontal);
+  overflow: hidden;
+}
+.hds-side-nav__content-panel[aria-hidden=true] {
+  max-height: 0;
 }
 
 .hds-side-nav__list-title {

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

@@ -16,7 +16,8 @@
 @use "../components/alert";
 @use "../components/app-footer";
 @use "../components/app-frame";
-@use "../components/app-header";
+// @use "../components/app-header";
+// @use "../components/app-side-nav";
 @use "../components/application-state";
 @use "../components/badge";
 @use "../components/badge-count";

package/dist/styles/components/app-side-nav/content.scss

@@ -0,0 +1,182 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// SIDE-NAV > CONTENT (PORTALS + LISTS OF ITEMS/LINKS)
+//
+
+@use "../../mixins/focus-ring" as *;
+
+
+// PANELS (wrappers used in conjunction with the portal elements)
+
+.hds-app-side-nav__content {
+  // we use this trick (increasing the container size here, and reducing it at single panel level)
+  // to have the panels width match the sidebar extended width (it's used in the animated sliding of the panels)
+  margin: 0 calc(var(--token-app-side-nav-wrapper-padding-horizontal) * -1);
+
+  // we hide the content when the SideNav is collapsed to prevent the vertical scrollbar from being visible
+  // when the scrollbar is set to be always visible or a mouse or trackpad force it to be always visible.
+  // ideally we would use `display: none` but doing so would disable the fade-in transition when expanding
+  .hds-app-side-nav--is-minimized & {
+    height: 0;
+    overflow: hidden;
+  }
+}
+
+.hds-app-side-nav__content-panels {
+  // see https://codepen.io/didoo/pen/YzOeRPr
+  display: grid;
+  grid-template-columns: repeat(5, var(--hds-app-side-nav-width-expanded));
+  width: 100%;
+}
+
+.hds-app-side-nav__content-panel {
+  padding: 0 var(--token-app-side-nav-wrapper-padding-horizontal);
+  overflow: hidden; // the panel itself does not need to be scrollable
+
+  &[aria-hidden="true"] {
+    max-height: 0; // prevents hidden panels from causing scrolling
+  }
+}
+
+// (LIST) TITLE
+
+.hds-app-side-nav__list-title {
+  min-height: var(--token-app-side-nav-body-list-item-height);
+  margin-top: var(--token-app-side-nav-body-list-margin-vertical);
+  padding: 9px var(--token-app-side-nav-body-list-item-padding-horizontal); // 8px = (min-height - body-100-line-height) / 2
+  color: var(--token-app-side-nav-color-foreground-faint);
+  overflow-wrap: break-word;
+
+  // Remove margin from title at top of all list-items & lists
+  .hds-app-side-nav__list-wrapper:first-child .hds-app-side-nav__list-item:first-child > & {
+    margin-top: 0;
+  }
+}
+
+// LIST (root elements)
+
+.hds-app-side-nav__list-wrapper, // <nav> element
+.hds-app-side-nav__list {        // <ul> element
+  margin: 0;
+  padding: 0;
+}
+
+
+// ITEM (generic container)
+
+.hds-app-side-nav__list-item { // <li> element
+  position: relative; // for the "active" state indicator
+  list-style-type: none;
+
+  & + & {
+    margin-top: var(--token-app-side-nav-body-list-item-spacing-vertical);
+  }
+}
+
+.hds-app-side-nav__list-item-link { // <a>/<button> element (via Hds::Interactive)
+  display: flex;
+  gap: var(--token-app-side-nav-body-list-item-content-spacing-horizontal);
+  align-items: center;
+  width: 100%;
+  min-height: var(--token-app-side-nav-body-list-item-height);
+  padding: var(--token-app-side-nav-body-list-item-padding-vertical) var(--token-app-side-nav-body-list-item-padding-horizontal);
+  color: var(--token-app-side-nav-color-foreground-primary);
+  text-decoration: none;
+  // "Link" could render as an HTML button element so this overrides the default border style in that case:
+  border-color: transparent;
+  border-radius: var(--token-app-side-nav-body-list-item-border-radius);
+
+  // :Focus
+  &:focus,
+  &.mock-focus {
+    @include hds-focus-ring-with-pseudo-element();
+  }
+
+  // :Hover
+  &:hover,
+  &.mock-hover {
+    background: var(--token-app-side-nav-color-surface-interactive-hover);
+    border-color: transparent;
+
+    .hds-app-side-nav__list-item-text,
+    .hds-app-side-nav__list-item-icon-leading,
+    .hds-app-side-nav__list-item-icon-trailing {
+      color: var(--token-app-side-nav-color-foreground-strong);
+    }
+  }
+
+  // :Active
+  &:active,
+  &.mock-active {
+    background: var(--token-color-surface-interactive-active);
+  }
+
+  // ".Active" (current page) link
+  // NOTICE: this is necessary to mitigate the flickering of the link when clicked (expecially noticeable with a badge)
+  // For details see: https://github.com/hashicorp/design-system/pull/1328
+  // &:hover:focus, // This is causing issues with :active state styles not applying, refactored to apply to "active" class
+  // notice: this ".active" extra class is used to match the corresponding `active` class assigned automatically
+  // by the `<LinkTo>` Ember component (when the link is "current), so that consumers get it for free if they want
+  // otherwise they can use the `@isActive` argument to set this visual state directly
+  // Important: This element does not doing anything when interacted with so should not change color according to state
+  &.active,
+  &.active:hover:focus {
+    background: var(--token-color-surface-strong);
+
+    // indicator bar
+    &::after {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: calc(var(--token-app-side-nav-wrapper-padding-horizontal) * -1);
+      width: 4px;
+      background: var(--token-color-foreground-action);
+      border-radius: 0 2px 2px 0;
+      content: "";
+    }
+
+    .hds-app-side-nav__list-item-text,
+    .hds-app-side-nav__list-item-icon-leading,
+    .hds-app-side-nav__list-item-icon-trailing {
+      color: var(--token-color-foreground-action);
+    }
+  }
+}
+
+// special override for the "back-link" element (no visible active state, by design)
+.hds-app-side-nav__list-item-link--back-link {
+  &:active,
+  &.mock-active {
+    background: var(--token-app-side-nav-color-surface-primary);
+
+    .hds-app-side-nav__list-item-text,
+    .hds-app-side-nav__list-item-icon-leading,
+    .hds-app-side-nav__list-item-icon-trailing {
+      color: var(--token-app-side-nav-color-foreground-primary);
+    }
+  }
+}
+
+
+// LIST ITEM > INNER ELEMENTS
+
+.hds-app-side-nav__list-item-text {
+  min-width: 0;
+  max-width: 100%;
+  color: var(--token-color-foreground-strong);
+  text-align: left;
+  overflow-wrap: break-word;
+}
+
+.hds-app-side-nav__list-item-icon-leading {
+  flex: none;
+}
+
+.hds-app-side-nav__list-item-icon-trailing {
+  flex: none;
+  margin-left: auto;
+}

package/dist/styles/components/app-side-nav/index.scss

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+@use "./vars.scss";
+@use "./main.scss";
+@use "./content.scss";
+@use "./toggle-button.scss";