@hashicorp/design-system-components 4.14.0 → 4.15.0

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

@@ -4,8 +4,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 /**
- * Do not edit directly
- * Generated on Fri, 20 Sep 2024 19:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 :root {
   --token-color-palette-blue-500: #1c345f;
@@ -182,11 +181,11 @@
   --token-color-waypoint-gradient-primary-stop: #62d4dc;
   --token-color-waypoint-gradient-faint-start: #f6feff; /* this is the 'waypoint-50' value at 25% opacity on white */
   --token-color-waypoint-gradient-faint-stop: #e0fcff;
-  --token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
-  --token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
   --token-elevation-inset-box-shadow: inset 0px 1px 2px 1px #656a761a;
   --token-elevation-low-box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
   --token-elevation-mid-box-shadow: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633;
+  --token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
+  --token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
   --token-elevation-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
   --token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a;
   --token-surface-base-box-shadow: 0 0 0 1px #656a7633;
@@ -197,6 +196,47 @@
   --token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
   --token-focus-ring-action-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff;
   --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578;
+  --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-form-label-color: #0c0c0e;
+  --token-form-legend-color: #0c0c0e;
+  --token-form-helper-text-color: #656a76;
+  --token-form-indicator-optional-color: #656a76;
+  --token-form-error-color: #c00005;
+  --token-form-error-icon-size: 14px;
+  --token-form-checkbox-size: 16px;
+  --token-form-checkbox-border-radius: 3px;
+  --token-form-checkbox-border-width: 1px;
+  --token-form-checkbox-background-image-size: 12px;
+  --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
+  --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
+  --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
+  --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
   --token-form-control-base-foreground-value-color: #0c0c0e;
   --token-form-control-base-foreground-placeholder-color: #656a76;
   --token-form-control-base-surface-color-default: #ffffff;
@@ -219,20 +259,6 @@
   --token-form-control-padding: 7px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. */
   --token-form-control-border-radius: 5px;
   --token-form-control-border-width: 1px;
-  --token-form-label-color: #0c0c0e;
-  --token-form-legend-color: #0c0c0e;
-  --token-form-helper-text-color: #656a76;
-  --token-form-indicator-optional-color: #656a76;
-  --token-form-error-color: #c00005;
-  --token-form-error-icon-size: 14px;
-  --token-form-checkbox-size: 16px;
-  --token-form-checkbox-border-radius: 3px;
-  --token-form-checkbox-border-width: 1px;
-  --token-form-checkbox-background-image-size: 12px;
-  --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
-  --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
-  --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
-  --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
   --token-form-radio-size: 16px;
   --token-form-radio-border-width: 1px;
   --token-form-radio-background-image-size: 12px;
@@ -268,33 +294,6 @@
   --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-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;
@@ -322,7 +321,7 @@
   --token-side-nav-body-list-item-content-spacing-horizontal: 8px;
   --token-side-nav-body-list-item-border-radius: 5px;
   --token-side-nav-color-foreground-primary: #dedfe3;
-  --token-side-nav-color-foreground-strong: #fff;
+  --token-side-nav-color-foreground-strong: #ffffff;
   --token-side-nav-color-foreground-faint: #8c909c;
   --token-side-nav-color-surface-primary: #0c0c0e;
   --token-side-nav-color-surface-interactive-hover: #3b3d45;
@@ -392,8 +391,7 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Fri, 20 Sep 2024 19:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 .hds-border-primary {
   border: 1px solid var(--token-color-border-primary);
@@ -564,17 +562,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Fri, 20 Sep 2024 19:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
-.hds-elevation-high {
-  box-shadow: var(--token-elevation-high-box-shadow);
-}
-
-.hds-elevation-higher {
-  box-shadow: var(--token-elevation-higher-box-shadow);
-}
-
 .hds-elevation-inset {
   box-shadow: var(--token-elevation-inset-box-shadow);
 }
@@ -587,6 +576,14 @@
   box-shadow: var(--token-elevation-mid-box-shadow);
 }
 
+.hds-elevation-high {
+  box-shadow: var(--token-elevation-high-box-shadow);
+}
+
+.hds-elevation-higher {
+  box-shadow: var(--token-elevation-higher-box-shadow);
+}
+
 .hds-elevation-overlay {
   box-shadow: var(--token-elevation-overlay-box-shadow);
 }
@@ -620,8 +617,7 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Fri, 20 Sep 2024 19:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 .hds-focus-ring-action-box-shadow {
   box-shadow: var(--token-focus-ring-action-box-shadow);
@@ -632,8 +628,7 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Fri, 20 Sep 2024 19:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 .hds-font-family-sans-display {
   font-family: var(--token-typography-font-stack-display);
@@ -1009,7 +1004,6 @@
   flex-direction: column;
   gap: 4px;
   justify-content: center;
-  color: var(--token-color-foreground-warning-on-surface);
 }
 
 .hds-alert__description {
@@ -2960,6 +2954,7 @@ button.hds-button[href]::after {
 }
 
 .hds-dropdown-toggle-icon {
+  position: relative;
   display: flex;
   gap: 2px;
   align-items: center;
@@ -2971,41 +2966,36 @@ button.hds-button[href]::after {
   border-radius: 5px;
   outline-style: solid;
   outline-color: transparent;
-  position: relative;
-  outline-style: solid;
-  outline-color: transparent;
-  isolation: isolate;
 }
 .hds-dropdown-toggle-icon:hover, .hds-dropdown-toggle-icon.mock-hover {
   background-color: var(--token-color-surface-interactive);
   cursor: pointer;
 }
-.hds-dropdown-toggle-icon::before {
+.hds-dropdown-toggle-icon:focus, .hds-dropdown-toggle-icon.mock-focus {
+  box-shadow: none;
+  border-color: var(--token-color-focus-action-internal);
+}
+.hds-dropdown-toggle-icon:focus::before, .hds-dropdown-toggle-icon.mock-focus::before {
   position: absolute;
-  top: -1px;
-  right: -1px;
-  bottom: -1px;
-  left: -1px;
+  top: -4px;
+  right: -4px;
+  bottom: -4px;
+  left: -4px;
   z-index: -1;
-  border-radius: 5px;
+  border: 3px solid transparent;
+  border-radius: 8px;
   content: "";
 }
 .hds-dropdown-toggle-icon:focus::before, .hds-dropdown-toggle-icon.mock-focus::before {
-  box-shadow: var(--token-focus-ring-action-box-shadow);
-}
-.hds-dropdown-toggle-icon:focus:not(:focus-visible)::before {
-  box-shadow: none;
-}
-.hds-dropdown-toggle-icon:focus-visible::before {
-  box-shadow: var(--token-focus-ring-action-box-shadow);
-}
-.hds-dropdown-toggle-icon:focus:active::before, .hds-dropdown-toggle-icon.mock-focus.mock-active::before {
-  box-shadow: none;
+  border-color: var(--token-color-focus-action-external);
 }
 .hds-dropdown-toggle-icon:active, .hds-dropdown-toggle-icon.mock-active {
   background-color: var(--token-color-surface-interactive-active);
   border-color: var(--token-color-border-strong);
 }
+.hds-dropdown-toggle-icon:active::before, .hds-dropdown-toggle-icon.mock-active::before {
+  border-color: transparent;
+}
 .hds-dropdown-toggle-icon:disabled, .hds-dropdown-toggle-icon.mock-disabled {
   color: var(--token-color-foreground-disabled);
   background-color: var(--token-color-surface-faint);
@@ -4998,7 +4988,6 @@ button.hds-button[href]::after {
   display: flex;
   border: 1px solid transparent;
   border-radius: 4px;
-  box-shadow: 0 1px 1px rgba(101, 106, 118, 0.05);
 }
 
 .hds-icon-tile__icon,
@@ -5015,7 +5004,6 @@ button.hds-button[href]::after {
   box-sizing: content-box;
   background-color: var(--token-color-surface-primary);
   border: 1px solid var(--token-color-border-primary);
-  box-shadow: 0 1px 1px rgba(101, 106, 118, 0.05);
 }
 
 .hds-icon-tile__extra-icon {
@@ -5061,13 +5049,13 @@ button.hds-button[href]::after {
   height: 1.75rem;
 }
 .hds-icon-tile--size-medium .hds-icon-tile__extra {
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 1.25rem;
+  height: 1.25rem;
   border-radius: 5px;
 }
 .hds-icon-tile--size-medium .hds-icon-tile__extra-icon {
-  width: 1rem;
-  height: 1rem;
+  width: 0.75rem;
+  height: 0.75rem;
 }
 
 .hds-icon-tile--size-large {
@@ -5100,63 +5088,51 @@ button.hds-button[href]::after {
 
 .hds-icon-tile--icon.hds-icon-tile--color-neutral {
   color: var(--token-color-foreground-faint);
-  background-color: var(--token-color-surface-faint);
-  border-color: var(--token-color-border-primary);
+  background-color: var(--token-color-surface-strong);
 }
 .hds-icon-tile--icon.hds-icon-tile--color-boundary {
   color: var(--token-color-boundary-foreground);
-  background: linear-gradient(135deg, var(--token-color-boundary-gradient-faint-start) 0%, var(--token-color-boundary-gradient-faint-stop) 100%);
-  border-color: var(--token-color-boundary-border);
+  background-color: var(--token-color-boundary-surface);
 }
 .hds-icon-tile--icon.hds-icon-tile--color-consul {
   color: var(--token-color-consul-foreground);
-  background: linear-gradient(135deg, var(--token-color-consul-gradient-faint-start) 0%, var(--token-color-consul-gradient-faint-stop) 100%);
-  border-color: var(--token-color-consul-border);
+  background-color: var(--token-color-consul-surface);
 }
 .hds-icon-tile--icon.hds-icon-tile--color-hcp {
   color: var(--token-color-palette-hcp-brand);
-  background-color: var(--token-color-surface-faint);
-  border-color: var(--token-color-border-primary);
+  background-color: var(--token-color-surface-strong);
 }
 .hds-icon-tile--icon.hds-icon-tile--color-nomad {
   color: var(--token-color-nomad-foreground);
-  background: linear-gradient(135deg, var(--token-color-nomad-gradient-faint-start) 0%, var(--token-color-nomad-gradient-faint-stop) 100%);
-  border-color: var(--token-color-nomad-border);
+  background-color: var(--token-color-nomad-surface);
 }
 .hds-icon-tile--icon.hds-icon-tile--color-packer {
   color: var(--token-color-packer-foreground);
-  background: linear-gradient(135deg, var(--token-color-packer-gradient-faint-start) 0%, var(--token-color-packer-gradient-faint-stop) 100%);
-  border-color: var(--token-color-packer-border);
+  background-color: var(--token-color-packer-surface);
 }
 .hds-icon-tile--icon.hds-icon-tile--color-terraform {
   color: var(--token-color-terraform-foreground);
-  background: linear-gradient(135deg, var(--token-color-terraform-gradient-faint-start) 0%, var(--token-color-terraform-gradient-faint-stop) 100%);
-  border-color: var(--token-color-terraform-border);
+  background-color: var(--token-color-terraform-surface);
 }
 .hds-icon-tile--icon.hds-icon-tile--color-vagrant {
   color: var(--token-color-vagrant-foreground);
-  background: linear-gradient(135deg, var(--token-color-vagrant-gradient-faint-start) 0%, var(--token-color-vagrant-gradient-faint-stop) 100%);
-  border-color: var(--token-color-vagrant-border);
+  background-color: var(--token-color-vagrant-surface);
 }
 .hds-icon-tile--icon.hds-icon-tile--color-vault {
   color: var(--token-color-vault-foreground);
-  background: linear-gradient(135deg, var(--token-color-vault-gradient-faint-start) 0%, var(--token-color-vault-gradient-faint-stop) 100%);
-  border-color: var(--token-color-vault-border);
+  background-color: var(--token-color-vault-surface);
 }
 .hds-icon-tile--icon.hds-icon-tile--color-vault-secrets {
   color: var(--token-color-vault-secrets-foreground);
-  background: linear-gradient(135deg, var(--token-color-vault-secrets-gradient-faint-start) 0%, var(--token-color-vault-secrets-gradient-faint-stop) 100%);
-  border-color: var(--token-color-vault-secrets-border);
+  background-color: var(--token-color-vault-secrets-surface);
 }
 .hds-icon-tile--icon.hds-icon-tile--color-vault-radar {
   color: var(--token-color-vault-radar-foreground);
-  background: linear-gradient(135deg, var(--token-color-vault-radar-gradient-faint-start) 0%, var(--token-color-vault-radar-gradient-faint-stop) 100%);
-  border-color: var(--token-color-vault-radar-border);
+  background-color: var(--token-color-vault-radar-surface);
 }
 .hds-icon-tile--icon.hds-icon-tile--color-waypoint {
   color: var(--token-color-waypoint-foreground);
-  background: linear-gradient(135deg, var(--token-color-waypoint-gradient-faint-start) 0%, var(--token-color-waypoint-gradient-faint-stop) 100%);
-  border-color: var(--token-color-waypoint-border);
+  background-color: var(--token-color-waypoint-surface);
 }
 
 /**
@@ -5443,7 +5419,6 @@ button.hds-button[href]::after {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  gap: 8px;
   min-width: 0;
   max-width: 100%;
 }
@@ -5472,6 +5447,9 @@ button.hds-button[href]::after {
   flex-direction: column;
   gap: 4px;
 }
+.hds-page-header__metadata > *:first-child {
+  margin-top: 8px;
+}
 
 .hds-page-header__subtitle,
 .hds-page-header__description {
@@ -7546,6 +7524,15 @@ button.hds-button[href]::after {
   text-align: right;
 }
 
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+.hds-time--range {
+  display: inline-flex;
+  gap: 2px;
+}
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0

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

@@ -50,6 +50,7 @@
 @use "../components/tabs";
 @use "../components/tag";
 @use "../components/text";
+@use "../components/time";
 @use "../components/toast";
 @use "../components/tooltip";
 // END COMPONENT CSS FILES IMPORTS

package/dist/styles/components/alert.scss

@@ -39,7 +39,6 @@
   flex-direction: column;
   gap: 4px;
   justify-content: center;
-  color: var(--token-color-foreground-warning-on-surface);
 }
 
 .hds-alert__description {

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

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-@use "./vars.scss";
-@use "./main.scss";
-@use "./content.scss";
-@use "./toggle-button.scss";
+@use "./vars";
+@use "./main";
+@use "./content";
+@use "./toggle-button";

package/dist/styles/components/badge-count.scss

@@ -8,6 +8,7 @@
 //
 
 @use "sass:math";
+@use "sass:map";
 
 $hds-badge-count-types: ( "flat","inverted","outlined" );
 $hds-badge-count-sizes: ( "small", "medium", "large" );
@@ -52,11 +53,11 @@ $hds-badge-count-size-props: (
 
 @each $size in $hds-badge-count-sizes {
   .hds-badge-count--size-#{$size} {
-    min-height: map-get($hds-badge-count-size-props, $size, "height");
-    padding: calc(#{map-get($hds-badge-count-size-props, $size, "padding-vertical")} - #{$hds-badge-count-border-width}) calc(#{map-get($hds-badge-count-size-props, $size, "padding-horizontal")} - #{$hds-badge-count-border-width});
-    font-size: map-get($hds-badge-count-size-props, $size, "font-size");
-    line-height: map-get($hds-badge-count-size-props, $size, "line-height");
-    border-radius: math.div(map-get($hds-badge-count-size-props, $size, "height"), 2);
+    min-height: map.get($hds-badge-count-size-props, $size, "height");
+    padding: calc(#{map.get($hds-badge-count-size-props, $size, "padding-vertical")} - #{$hds-badge-count-border-width}) calc(#{map.get($hds-badge-count-size-props, $size, "padding-horizontal")} - #{$hds-badge-count-border-width});
+    font-size: map.get($hds-badge-count-size-props, $size, "font-size");
+    line-height: map.get($hds-badge-count-size-props, $size, "line-height");
+    border-radius: math.div(map.get($hds-badge-count-size-props, $size, "height"), 2);
   }
 }
 

package/dist/styles/components/badge.scss

@@ -7,6 +7,8 @@
 // BADGE COMPONENT
 //
 
+@use "sass:map";
+
 $hds-badge-types: ( "flat","inverted","outlined" );
 $hds-badge-colors-accents: ( "highlight", "success", "warning", "critical" );
 $hds-badge-sizes: ( "small", "medium", "large" );
@@ -87,18 +89,18 @@ $hds-badge-size-props: (
 
 @each $size in $hds-badge-sizes {
   .hds-badge--size-#{$size} {
-    gap: map-get($hds-badge-size-props, $size, "gap");
-    min-height: map-get($hds-badge-size-props, $size, "height");
-    padding: calc(#{map-get($hds-badge-size-props, $size, "padding-vertical")} - #{$hds-badge-border-width}) calc(#{map-get($hds-badge-size-props, $size, "padding-horizontal")} - #{$hds-badge-border-width});
+    gap: map.get($hds-badge-size-props, $size, "gap");
+    min-height: map.get($hds-badge-size-props, $size, "height");
+    padding: calc(#{map.get($hds-badge-size-props, $size, "padding-vertical")} - #{$hds-badge-border-width}) calc(#{map.get($hds-badge-size-props, $size, "padding-horizontal")} - #{$hds-badge-border-width});
 
     .hds-badge__icon {
-      width: map-get($hds-badge-size-props, $size, "icon-size");
-      height: map-get($hds-badge-size-props, $size, "icon-size");
+      width: map.get($hds-badge-size-props, $size, "icon-size");
+      height: map.get($hds-badge-size-props, $size, "icon-size");
     }
 
     .hds-badge__text {
-      font-size: map-get($hds-badge-size-props, $size, "font-size");
-      line-height: map-get($hds-badge-size-props, $size, "line-height");
+      font-size: map.get($hds-badge-size-props, $size, "font-size");
+      line-height: map.get($hds-badge-size-props, $size, "line-height");
     }
   }
 }
@@ -151,13 +153,13 @@ $hds-badge-size-props: (
 
     &.hds-badge--type-inverted {
       color: var(--token-color-foreground-high-contrast);
-      background-color: map-get($hds-badge-colors-props, $color, "inverted-background-color");
+      background-color: map.get($hds-badge-colors-props, $color, "inverted-background-color");
     }
 
     &.hds-badge--type-outlined {
       color: var(--token-color-foreground-#{$color});
       background-color: transparent;
-      border-color: map-get($hds-badge-colors-props, $color, "outlined-border-color");
+      border-color: map.get($hds-badge-colors-props, $color, "outlined-border-color");
     }
   }
 }

package/dist/styles/components/code-block/index.scss

@@ -11,7 +11,7 @@
 @use "../../mixins/focus-ring" as *;
 
 // Note: "theme" contains just color variables and syntax highlighting styles
-@import "theme";
+@use "theme";
 
 // DIMENSIONS
 $hds-code-block-line-numbers-width: 49px; // 3em ≈ 49px

package/dist/styles/components/copy/index.scss

@@ -3,6 +3,6 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-@use "./button.scss";
-@use "./snippet.scss";
+@use "./button";
+@use "./snippet";
 

package/dist/styles/components/dropdown.scss

@@ -28,6 +28,7 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
 // TOGGLE/ICON
 
 .hds-dropdown-toggle-icon {
+  position: relative;
   display: flex;
   gap: 2px;
   align-items: center;
@@ -48,18 +49,24 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
     cursor: pointer;
   }
 
-  @include hds-focus-ring-with-pseudo-element(
-    $top: -1px,
-    $right: -1px,
-    $bottom: -1px,
-    $left: -1px,
-    $radius: $hds-dropdown-toggle-border-radius
-  );
+  &:focus,
+  &.mock-focus {
+    @include hds-button-state-focus();
+    border-color: var(--token-color-focus-action-internal);
+
+    &::before {
+      border-color: var(--token-color-focus-action-external);
+    }
+  }
 
   &:active,
   &.mock-active {
     background-color: var(--token-color-surface-interactive-active);
     border-color: var(--token-color-border-strong);
+
+    &::before {
+      border-color: transparent;
+    }
   }
 
   &:disabled,