@hashicorp/design-system-components 4.14.0 → 4.16.0

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

@@ -4,10 +4,13 @@
  * 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-border-radius-x-small: 3px;
+  --token-border-radius-small: 5px;
+  --token-border-radius-medium: 6px;
+  --token-border-radius-large: 8px;
   --token-color-palette-blue-500: #1c345f;
   --token-color-palette-blue-400: #0046d1;
   --token-color-palette-blue-300: #0c56e9;
@@ -182,11 +185,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 +200,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 +263,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 +298,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 +325,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 +395,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 +566,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 +580,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 +621,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 +632,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);
@@ -814,7 +813,7 @@
 .hds-accordion-item--type-card {
   --hds-accordion-item-focus-ring-offset: 0;
   background: var(--token-color-surface-primary);
-  border-radius: 6px;
+  border-radius: var(--token-border-radius-medium);
 }
 .hds-accordion-item--type-card.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static) {
   box-shadow: var(--token-surface-mid-box-shadow);
@@ -908,7 +907,7 @@
   font-family: var(--token-typography-font-stack-text);
   text-decoration: none;
   border: 1px solid transparent;
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
   outline-style: solid;
   outline-color: transparent;
   isolation: isolate;
@@ -928,7 +927,7 @@
   left: -4px;
   z-index: -1;
   border: 3px solid transparent;
-  border-radius: 8px;
+  border-radius: calc(var(--token-border-radius-small) + 3px);
   content: "";
 }
 .hds-accordion-item__button--parent-contains-interactive:hover, .hds-accordion-item__button--parent-contains-interactive.mock-hover {
@@ -980,6 +979,320 @@
   border-bottom: none;
 }
 
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+.hds-advanced-table {
+  display: grid;
+  align-items: center;
+  width: 100%;
+  border-radius: var(--token-border-radius-medium);
+  border-spacing: 0;
+}
+
+.hds-advanced-table,
+.hds-advanced-table__th,
+.hds-advanced-table__td {
+  border: calc(1px / 2) solid var(--token-color-border-primary);
+}
+
+.hds-advanced-table__thead {
+  display: grid;
+  grid-column: 1/-1;
+  grid-template-columns: subgrid;
+}
+.hds-advanced-table__thead .hds-advanced-table__tr {
+  display: contents;
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th {
+  align-content: center;
+  height: 100%;
+  padding: 14px 16px 13px 16px;
+  color: var(--token-color-foreground-strong);
+  text-align: left;
+  background-color: var(--token-color-surface-strong);
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th:focus, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th.mock-hover {
+  position: relative;
+  outline-style: solid;
+  outline-color: transparent;
+  isolation: isolate;
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th:focus::before, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th.mock-hover::before {
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  z-index: -1;
+  border-radius: 5px;
+  content: "";
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th:focus:focus::before, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th:focus.mock-focus::before, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th.mock-hover:focus::before, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th.mock-hover.mock-focus::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th:focus:focus:not(:focus-visible)::before, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th.mock-hover:focus:not(:focus-visible)::before {
+  box-shadow: none;
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th:focus:focus-visible::before, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th.mock-hover:focus-visible::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th:focus:focus:active::before, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th:focus.mock-focus.mock-active::before, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th.mock-hover:focus:active::before, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th.mock-hover.mock-focus.mock-active::before {
+  box-shadow: none;
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th--align-center,
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__td--align-center {
+  text-align: center;
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th--align-center .hds-advanced-table__th-content,
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__td--align-center .hds-advanced-table__th-content {
+  justify-content: center;
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th--align-right,
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__td--align-right {
+  text-align: right;
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th--align-right .hds-advanced-table__th-content,
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__td--align-right .hds-advanced-table__th-content {
+  justify-content: flex-end;
+}
+.hds-advanced-table__thead .hds-advanced-table__tr:first-of-type .hds-advanced-table__th:first-child {
+  border-top-left-radius: calc(var(--token-border-radius-medium) - 1px);
+}
+.hds-advanced-table__thead .hds-advanced-table__tr:first-of-type .hds-advanced-table__th:last-child {
+  border-top-right-radius: calc(var(--token-border-radius-medium) - 1px);
+}
+.hds-advanced-table__thead.hds-advanced-table__thead--sticky {
+  position: sticky;
+  top: -1px;
+  background-color: var(--token-color-surface-strong);
+  border-bottom: calc(3px - 1px / 2) solid var(--token-color-border-primary);
+}
+.hds-advanced-table__thead.hds-advanced-table__thead--sticky.hds-advanced-table__thead--is-pinned {
+  border-top: calc(1px / 2 + 1px) solid var(--token-color-border-primary);
+  border-bottom: 3px solid var(--token-color-border-primary);
+}
+.hds-advanced-table__thead.hds-advanced-table__thead--sticky.hds-advanced-table__thead--is-pinned .hds-advanced-table__tr:first-of-type .hds-advanced-table__th:first-child {
+  border-top-left-radius: 0;
+}
+.hds-advanced-table__thead.hds-advanced-table__thead--sticky.hds-advanced-table__thead--is-pinned .hds-advanced-table__tr:first-of-type .hds-advanced-table__th:last-child {
+  border-top-right-radius: 0;
+}
+
+.hds-advanced-table__th-content {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.hds-advanced-table__th-button {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin: -2px 0;
+  padding: 0;
+  color: var(--token-color-foreground-faint);
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  position: relative;
+  outline-style: solid;
+  outline-color: transparent;
+  isolation: isolate;
+}
+.hds-advanced-table__th-button:hover, .hds-advanced-table__th-button.mock-hover {
+  color: var(--token-color-foreground-primary);
+  background-color: var(--token-color-surface-interactive);
+  border-color: var(--token-color-border-strong);
+  box-shadow: var(--token-elevation-low-box-shadow);
+  cursor: pointer;
+}
+.hds-advanced-table__th-button::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  border-radius: inherit;
+  content: "";
+}
+.hds-advanced-table__th-button:focus::before, .hds-advanced-table__th-button.mock-focus::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-advanced-table__th-button:focus:not(:focus-visible)::before {
+  box-shadow: none;
+}
+.hds-advanced-table__th-button:focus-visible::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-advanced-table__th-button:focus:active::before, .hds-advanced-table__th-button.mock-focus.mock-active::before {
+  box-shadow: none;
+}
+.hds-advanced-table__th-button:active, .hds-advanced-table__th-button.mock-active {
+  color: var(--token-color-foreground-primary);
+  background-color: var(--token-color-surface-interactive-active);
+  border-color: var(--token-color-border-strong);
+  box-shadow: none;
+}
+
+.hds-advanced-table__th-button--is-sorted {
+  color: var(--token-color-foreground-action);
+}
+.hds-advanced-table__th-button--is-sorted:hover, .hds-advanced-table__th-button--is-sorted.mock-hover {
+  color: var(--token-color-foreground-action-hover);
+}
+.hds-advanced-table__th-button--is-sorted:active, .hds-advanced-table__th-button--is-sorted.mock-active {
+  color: var(--token-color-foreground-action-active);
+}
+
+.hds-advanced-table__th-button-aria-label-hidden-segment {
+  display: none;
+}
+
+.hds-advanced-table__th-button--expand {
+  align-self: flex-start;
+}
+
+.hds-advanced-table__tbody {
+  display: grid;
+  grid-column: 1/-1;
+  grid-template-columns: subgrid;
+  align-items: center;
+}
+.hds-advanced-table__tbody .hds-advanced-table__tr {
+  display: contents;
+  color: var(--token-color-foreground-primary);
+}
+.hds-advanced-table--striped .hds-advanced-table__tbody .hds-advanced-table__tr:nth-child(even) .hds-advanced-table__th,
+.hds-advanced-table--striped .hds-advanced-table__tbody .hds-advanced-table__tr:nth-child(even) .hds-advanced-table__td {
+  background-color: var(--token-color-surface-faint);
+}
+.hds-advanced-table__tbody .hds-advanced-table__tr:last-of-type .hds-advanced-table__th:first-child,
+.hds-advanced-table__tbody .hds-advanced-table__tr:last-of-type .hds-advanced-table__td:first-child {
+  border-bottom-left-radius: calc(var(--token-border-radius-medium) - 1px);
+}
+.hds-advanced-table__tbody .hds-advanced-table__tr:last-of-type .hds-advanced-table__td:last-child {
+  border-bottom-right-radius: calc(var(--token-border-radius-medium) - 1px);
+}
+.hds-advanced-table__tbody .hds-advanced-table__th,
+.hds-advanced-table__tbody .hds-advanced-table__td {
+  display: flex;
+  gap: 8px;
+  align-content: center;
+  align-items: flex-start;
+  justify-content: flex-start;
+  height: 100%;
+  text-align: left;
+  background-color: var(--token-color-surface-primary);
+}
+.hds-advanced-table__tbody .hds-advanced-table__th:focus,
+.hds-advanced-table__tbody .hds-advanced-table__td:focus {
+  position: relative;
+  outline-style: solid;
+  outline-color: transparent;
+  isolation: isolate;
+}
+.hds-advanced-table__tbody .hds-advanced-table__th:focus::before,
+.hds-advanced-table__tbody .hds-advanced-table__td:focus::before {
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  z-index: -1;
+  border-radius: 5px;
+  content: "";
+}
+.hds-advanced-table__tbody .hds-advanced-table__th:focus:focus::before, .hds-advanced-table__tbody .hds-advanced-table__th:focus.mock-focus::before,
+.hds-advanced-table__tbody .hds-advanced-table__td:focus:focus::before,
+.hds-advanced-table__tbody .hds-advanced-table__td:focus.mock-focus::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-advanced-table__tbody .hds-advanced-table__th:focus:focus:not(:focus-visible)::before,
+.hds-advanced-table__tbody .hds-advanced-table__td:focus:focus:not(:focus-visible)::before {
+  box-shadow: none;
+}
+.hds-advanced-table__tbody .hds-advanced-table__th:focus:focus-visible::before,
+.hds-advanced-table__tbody .hds-advanced-table__td:focus:focus-visible::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-advanced-table__tbody .hds-advanced-table__th:focus:focus:active::before, .hds-advanced-table__tbody .hds-advanced-table__th:focus.mock-focus.mock-active::before,
+.hds-advanced-table__tbody .hds-advanced-table__td:focus:focus:active::before,
+.hds-advanced-table__tbody .hds-advanced-table__td:focus.mock-focus.mock-active::before {
+  box-shadow: none;
+}
+.hds-advanced-table--density-short .hds-advanced-table__tbody .hds-advanced-table__th,
+.hds-advanced-table--density-short .hds-advanced-table__tbody .hds-advanced-table__td {
+  padding: 6px 16px 5px 16px;
+}
+.hds-advanced-table--density-medium .hds-advanced-table__tbody .hds-advanced-table__th,
+.hds-advanced-table--density-medium .hds-advanced-table__tbody .hds-advanced-table__td {
+  padding: 14px 16px 13px 16px;
+}
+.hds-advanced-table--density-tall .hds-advanced-table__tbody .hds-advanced-table__th,
+.hds-advanced-table--density-tall .hds-advanced-table__tbody .hds-advanced-table__td {
+  padding: 22px 16px 21px 16px;
+}
+.hds-advanced-table__tbody .hds-advanced-table__th--align-center,
+.hds-advanced-table__tbody .hds-advanced-table__td--align-center {
+  text-align: center;
+}
+.hds-advanced-table__tbody .hds-advanced-table__th--align-center .hds-advanced-table__th-content,
+.hds-advanced-table__tbody .hds-advanced-table__td--align-center .hds-advanced-table__th-content {
+  justify-content: center;
+}
+.hds-advanced-table__tbody .hds-advanced-table__th--align-right,
+.hds-advanced-table__tbody .hds-advanced-table__td--align-right {
+  text-align: right;
+}
+.hds-advanced-table__tbody .hds-advanced-table__th--align-right .hds-advanced-table__th-content,
+.hds-advanced-table__tbody .hds-advanced-table__td--align-right .hds-advanced-table__th-content {
+  justify-content: flex-end;
+}
+.hds-advanced-table--valign-top .hds-advanced-table__tbody .hds-advanced-table__th,
+.hds-advanced-table--valign-top .hds-advanced-table__tbody .hds-advanced-table__td {
+  align-items: flex-start;
+}
+.hds-advanced-table--valign-middle .hds-advanced-table__tbody .hds-advanced-table__th,
+.hds-advanced-table--valign-middle .hds-advanced-table__tbody .hds-advanced-table__td {
+  align-items: center;
+}
+.hds-advanced-table--valign-baseline .hds-advanced-table__tbody .hds-advanced-table__th,
+.hds-advanced-table--valign-baseline .hds-advanced-table__tbody .hds-advanced-table__td {
+  /**
+    setting to center because in FlexBox, when you set align-items: baseline, it also aligns content to the top - unlike display: table-cell which aligns the content to the center
+
+    we decided as a team to match the Table behavior instead of actually setting align-items to baseline to mitigate the difference.
+  */
+  align-items: center;
+}
+.hds-advanced-table__tbody .hds-advanced-table__tr--parent-row .hds-advanced-table__th:not(:first-child),
+.hds-advanced-table__tbody .hds-advanced-table__tr--parent-row .hds-advanced-table__td:not(:first-child) {
+  border-left: 0;
+}
+.hds-advanced-table__tbody .hds-advanced-table__tr--parent-row .hds-advanced-table__th:not(:last-child),
+.hds-advanced-table__tbody .hds-advanced-table__tr--parent-row .hds-advanced-table__td:not(:last-child) {
+  border-right: 0;
+}
+
+.hds-advanced-table--nested .hds-advanced-table__tr .hds-advanced-table__th, .hds-advanced-table--nested .hds-advanced-table__tr .hds-advanced-table__td {
+  background-color: var(--token-color-surface-faint);
+}
+.hds-advanced-table--nested .hds-advanced-table__tr.hds-advanced-table__tr--parent-row .hds-advanced-table__th, .hds-advanced-table--nested .hds-advanced-table__tr.hds-advanced-table__tr--parent-row .hds-advanced-table__td {
+  background-color: var(--token-color-surface-primary);
+}
+
+.hds-advanced-table__checkbox {
+  display: block;
+  margin: 2px 0;
+}
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
@@ -1009,7 +1322,6 @@
   flex-direction: column;
   gap: 4px;
   justify-content: center;
-  color: var(--token-color-foreground-warning-on-surface);
 }
 
 .hds-alert__description {
@@ -1027,7 +1339,7 @@
   line-height: 1em;
   background-color: var(--token-color-surface-primary);
   border: 1px solid var(--token-color-palette-neutral-200);
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
 }
 .hds-alert__description a:not([class*=hds-]) {
   color: var(--token-color-foreground-strong);
@@ -1069,7 +1381,7 @@
   padding: 16px;
   border-style: solid;
   border-width: 1px;
-  border-radius: 6px;
+  border-radius: var(--token-border-radius-medium);
 }
 
 .hds-alert--type-compact .hds-alert__icon {
@@ -1427,7 +1739,7 @@
   max-width: 100%;
   vertical-align: middle;
   border: 1px solid transparent;
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
 }
 
 .hds-badge__icon {
@@ -1684,7 +1996,7 @@
   margin: 0 -4px;
   padding: 0 4px;
   color: var(--token-color-foreground-faint);
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
   text-decoration-color: transparent;
   outline-style: solid;
   outline-color: transparent;
@@ -1758,7 +2070,7 @@
   color: var(--token-color-foreground-faint);
   background-color: transparent;
   border: 1px solid transparent;
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
   outline: none;
   cursor: pointer;
   outline-style: solid;
@@ -1797,7 +2109,7 @@
   max-width: 200px;
   padding: 6px 12px;
   background-color: var(--token-color-surface-primary);
-  border-radius: 6px;
+  border-radius: var(--token-border-radius-medium);
   box-shadow: var(--token-surface-high-box-shadow);
 }
 :where(.hds-breadcrumb__truncation-content[popover]) {
@@ -1831,7 +2143,7 @@
   font-family: var(--token-typography-font-stack-text);
   text-decoration: none;
   border: 1px solid transparent;
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
   outline-style: solid;
   outline-color: transparent;
   isolation: isolate;
@@ -1871,7 +2183,7 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
   left: -4px;
   z-index: -1;
   border: 3px solid transparent;
-  border-radius: 8px;
+  border-radius: calc(var(--token-border-radius-small) + 3px);
   content: "";
 }
 
@@ -1908,7 +2220,7 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
   bottom: -6px;
   left: -6px;
   border-color: var(--token-color-focus-action-external);
-  border-radius: 10px;
+  border-radius: calc(var(--token-border-radius-small) + 3px + 2px);
 }
 .hds-button--color-primary:active, .hds-button--color-primary.mock-active {
   color: var(--token-color-foreground-high-contrast);
@@ -2105,7 +2417,7 @@ button.hds-button[href]::after {
 .hds-card__container {
   position: relative;
   background-color: #fff;
-  border-radius: 6px;
+  border-radius: var(--token-border-radius-medium);
 }
 
 .hds-card__container--level-surface-base {
@@ -2447,7 +2759,7 @@ button.hds-button[href]::after {
 }
 
 .hds-code-block--is-standalone {
-  border-radius: 6px;
+  border-radius: var(--token-border-radius-medium);
 }
 
 .hds-code-block--has-line-wrapping .hds-code-block__code,
@@ -2619,6 +2931,109 @@ button.hds-button[href]::after {
   font-style: italic;
 }
 
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+.hds-code-editor--theme-dark {
+  --hds-code-editor-color-border-strong: rgba(178, 182, 189, 40%);
+  --hds-code-editor-color-border-primary: rgba(178, 182, 189, 20%);
+  --hds-code-editor-color-foreground-primary: #d5d7db;
+  --hds-code-editor-color-foreground-faint: #878a8f;
+  --hds-code-editor-color-foreground-high-contrast: #fff;
+  --hds-code-editor-color-surface-faint: #15181e;
+  --hds-code-editor-color-surface-primary: #0D0E12;
+  --hds-code-editor-color-surface-interactive-active: #2B303C;
+}
+
+.hds-code-editor {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: var(--hds-code-editor-color-surface-primary);
+  border: 1px solid var(--hds-code-editor-color-border-strong);
+}
+.hds-code-editor.hds-code-editor--is-standalone {
+  border-radius: var(--token-border-radius-medium);
+}
+.hds-code-editor.hds-code-editor--is-full-screen {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  border: none;
+  border-radius: 0;
+}
+.hds-code-editor.hds-code-editor--is-full-screen .hds-code-editor__editor {
+  max-height: unset;
+}
+.hds-code-editor .hds-code-editor__header {
+  display: flex;
+  gap: 12px;
+  align-items: start;
+  padding: 16px;
+  background-color: var(--hds-code-editor-color-surface-faint);
+  border-bottom: 1px solid var(--hds-code-editor-color-border-primary);
+}
+.hds-code-editor .hds-code-editor__header-content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+.hds-code-editor .hds-code-editor__title {
+  color: var(--hds-code-editor-color-foreground-primary);
+}
+.hds-code-editor .hds-code-editor__title + .hds-code-editor__description {
+  margin-top: 4px;
+}
+.hds-code-editor .hds-code-editor__description {
+  color: var(--hds-code-editor-color-foreground-faint);
+}
+.hds-code-editor .hds-code-editor__title + .hds-code-editor__header-generic,
+.hds-code-editor .hds-code-editor__description + .hds-code-editor__header-generic {
+  margin-top: 12px;
+}
+.hds-code-editor .hds-code-editor__header-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.hds-code-editor .hds-code-editor__header-actions .hds-button {
+  outline-offset: 0;
+}
+.hds-code-editor .hds-code-editor__editor {
+  flex-grow: 1;
+  overflow: auto;
+}
+.hds-code-editor .hds-code-editor__loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 164px;
+  color: var(--hds-code-editor-color-foreground-primary);
+  background-color: var(--hds-code-editor-color-surface-primary);
+}
+.hds-code-editor .hds-button {
+  color: var(--hds-code-editor-color-foreground-primary);
+  background-color: var(--hds-code-editor-color-surface-faint);
+  border: 1px solid var(--hds-code-editor-color-border-strong);
+}
+.hds-code-editor .hds-button:focus, .hds-code-editor .hds-button:hover {
+  background-color: var(--hds-code-editor-color-surface-primary);
+}
+.hds-code-editor .hds-button:focus .hds-button__icon, .hds-code-editor .hds-button:hover .hds-button__icon {
+  color: var(--hds-code-editor-color-foreground-primary);
+}
+.hds-code-editor .hds-button:active {
+  background-color: var(--hds-code-editor-color-surface-interactive-active);
+}
+.hds-code-editor .hds-button .hds-button__icon {
+  color: var(--hds-code-editor-color-foreground-primary);
+}
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
@@ -2662,7 +3077,7 @@ button.hds-button[href]::after {
   padding: 6px 4px;
   text-align: left;
   border: 1px solid transparent;
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
   cursor: pointer;
 }
 .hds-copy-snippet::before {
@@ -2960,6 +3375,7 @@ button.hds-button[href]::after {
 }
 
 .hds-dropdown-toggle-icon {
+  position: relative;
   display: flex;
   gap: 2px;
   align-items: center;
@@ -2968,10 +3384,7 @@ button.hds-button[href]::after {
   color: var(--token-color-foreground-primary);
   background-color: var(--token-color-surface-faint);
   border: 1px solid var(--token-color-border-strong);
-  border-radius: 5px;
-  outline-style: solid;
-  outline-color: transparent;
-  position: relative;
+  border-radius: var(--token-border-radius-small);
   outline-style: solid;
   outline-color: transparent;
   isolation: isolate;
@@ -2980,32 +3393,31 @@ button.hds-button[href]::after {
   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: calc(var(--token-border-radius-small) + 3px);
   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);
@@ -3021,7 +3433,7 @@ button.hds-button[href]::after {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 3px;
+  border-radius: calc(var(--token-border-radius-small) - 2px);
 }
 .hds-dropdown-toggle-icon__wrapper img {
   width: 100%;
@@ -3055,7 +3467,7 @@ button.hds-button[href]::after {
   font-family: var(--token-typography-font-stack-text);
   text-decoration: none;
   border: 1px solid transparent;
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
   outline-style: solid;
   outline-color: transparent;
   isolation: isolate;
@@ -3071,7 +3483,7 @@ button.hds-button[href]::after {
   left: -4px;
   z-index: -1;
   border: 3px solid transparent;
-  border-radius: 8px;
+  border-radius: calc(var(--token-border-radius-small) + 3px);
   content: "";
 }
 .hds-dropdown-toggle-button:disabled, .hds-dropdown-toggle-button.mock-disabled, .hds-dropdown-toggle-button:disabled:focus, .hds-dropdown-toggle-button.mock-disabled:focus, .hds-dropdown-toggle-button:disabled:hover, .hds-dropdown-toggle-button.mock-disabled:hover {
@@ -3184,7 +3596,7 @@ button.hds-button[href]::after {
   bottom: -6px;
   left: -6px;
   border-color: var(--token-color-focus-action-external);
-  border-radius: 10px;
+  border-radius: calc(var(--token-border-radius-small) + 3px + 2px);
 }
 .hds-dropdown-toggle-button--color-primary:active, .hds-dropdown-toggle-button--color-primary.mock-active {
   color: var(--token-color-foreground-high-contrast);
@@ -3266,7 +3678,7 @@ button.hds-button[href]::after {
   min-width: 200px;
   max-width: 400px;
   background-color: var(--token-color-surface-primary);
-  border-radius: 6px;
+  border-radius: var(--token-border-radius-medium);
   box-shadow: var(--token-surface-high-box-shadow);
 }
 :where(.hds-dropdown__content[popover]) {
@@ -3409,7 +3821,7 @@ button.hds-button[href]::after {
   bottom: 0;
   left: 10px;
   z-index: -1;
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
   content: "";
 }
 .hds-dropdown-list-item--variant-interactive a:hover, .hds-dropdown-list-item--variant-interactive a.mock-hover,
@@ -3834,7 +4246,7 @@ button.hds-button[href]::after {
   background-position: 15px 50%;
   background-size: var(--token-form-text-input-background-image-size);
   border: 1px solid var(--token-color-border-strong);
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
   box-shadow: var(--token-elevation-low-box-shadow);
   cursor: pointer;
 }
@@ -4284,7 +4696,7 @@ button.hds-button[href]::after {
 }
 .hds-form-select[multiple] option, .hds-form-select[size] option {
   margin: 2px auto;
-  border-radius: 3px;
+  border-radius: var(--token-border-radius-x-small);
 }
 .hds-form-select[multiple] option:hover, .hds-form-select[size] option:hover {
   color: var(--token-color-foreground-action);
@@ -4997,8 +5409,7 @@ button.hds-button[href]::after {
   position: relative;
   display: flex;
   border: 1px solid transparent;
-  border-radius: 4px;
-  box-shadow: 0 1px 1px rgba(101, 106, 118, 0.05);
+  border-radius: var(--token-border-radius-medium);
 }
 
 .hds-icon-tile__icon,
@@ -5015,7 +5426,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 +5471,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 +5510,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);
 }
 
 /**
@@ -5315,7 +5713,7 @@ button.hds-button[href]::after {
   bottom: 0;
   left: -5px;
   z-index: -1;
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
   content: "";
 }
 .hds-link-standalone:focus::before, .hds-link-standalone.mock-focus::before {
@@ -5357,7 +5755,7 @@ button.hds-button[href]::after {
   max-height: 95vh;
   inset: 0;
   margin: auto;
-  border-radius: 8px;
+  border-radius: var(--token-border-radius-large);
   box-shadow: var(--token-surface-overlay-box-shadow);
 }
 .hds-modal:not([open]) {
@@ -5443,7 +5841,6 @@ button.hds-button[href]::after {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  gap: 8px;
   min-width: 0;
   max-width: 100%;
 }
@@ -5472,6 +5869,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 {
@@ -5812,7 +6212,7 @@ button.hds-button[href]::after {
   max-height: none;
   padding: 16px;
   background: var(--token-color-surface-primary);
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
   box-shadow: var(--token-surface-higher-box-shadow);
   opacity: 0;
   transition: opacity 0.3s;
@@ -6231,7 +6631,7 @@ button.hds-button[href]::after {
   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;
+  border-radius: var(--token-border-radius-small);
 }
 .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):hover, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-hover,
 .hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):hover,
@@ -6550,7 +6950,7 @@ button.hds-button[href]::after {
   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;
+  border-radius: var(--token-border-radius-small);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -6866,7 +7266,7 @@ button.hds-button[href]::after {
   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;
+  border-radius: var(--token-border-radius-x-small);
   transform: translateY(-200%);
   transition: 0.6s ease-in-out;
 }
@@ -7083,8 +7483,7 @@ button.hds-button[href]::after {
  */
 .hds-table {
   width: 100%;
-  border: 1px solid var(--token-color-border-primary);
-  border-radius: 6px;
+  border-radius: var(--token-border-radius-medium);
   border-spacing: 0;
 }
 
@@ -7092,28 +7491,19 @@ button.hds-button[href]::after {
   table-layout: fixed;
 }
 
+.hds-table,
+.hds-table__th,
+.hds-table__td {
+  border: calc(1px / 2) solid var(--token-color-border-primary);
+}
+
 .hds-table__thead .hds-table__tr {
   color: var(--token-color-foreground-strong);
   background-color: var(--token-color-surface-strong);
 }
 .hds-table__thead .hds-table__tr .hds-table__th {
-  position: relative;
   padding: 14px 16px 13px 16px;
   text-align: left;
-  border-top: none;
-  border-right: none;
-  border-bottom: 1px solid var(--token-color-border-primary);
-  border-left: none;
-}
-.hds-table__thead .hds-table__tr .hds-table__th + .hds-table__th::before {
-  position: absolute;
-  top: 6px;
-  bottom: 6px;
-  left: -1px;
-  width: 1px;
-  background-color: var(--token-color-border-primary);
-  content: "";
-  pointer-events: none;
 }
 .hds-table__thead .hds-table__tr .hds-table__th--align-center,
 .hds-table__thead .hds-table__tr .hds-table__td--align-center {
@@ -7132,10 +7522,10 @@ button.hds-button[href]::after {
   justify-content: flex-end;
 }
 .hds-table__thead .hds-table__tr:first-of-type .hds-table__th:first-child {
-  border-top-left-radius: 5px;
+  border-top-left-radius: calc(var(--token-border-radius-medium) - 1px);
 }
 .hds-table__thead .hds-table__tr:first-of-type .hds-table__th:last-child {
-  border-top-right-radius: 5px;
+  border-top-right-radius: calc(var(--token-border-radius-medium) - 1px);
 }
 
 .hds-table__th--is-selectable {
@@ -7161,7 +7551,7 @@ button.hds-button[href]::after {
   color: var(--token-color-foreground-faint);
   background-color: transparent;
   border: 1px solid transparent;
-  border-radius: 3px;
+  border-radius: var(--token-border-radius-x-small);
   position: relative;
   outline-style: solid;
   outline-color: transparent;
@@ -7224,24 +7614,16 @@ button.hds-button[href]::after {
 .hds-table--striped .hds-table__tbody .hds-table__tr:nth-child(even) {
   background-color: var(--token-color-surface-faint);
 }
-.hds-table__tbody .hds-table__tr:last-of-type .hds-table__th,
-.hds-table__tbody .hds-table__tr:last-of-type .hds-table__td {
-  border-bottom: none;
-}
 .hds-table__tbody .hds-table__tr:last-of-type .hds-table__th:first-child,
 .hds-table__tbody .hds-table__tr:last-of-type .hds-table__td:first-child {
-  border-bottom-left-radius: 5px;
+  border-bottom-left-radius: calc(var(--token-border-radius-medium) - 1px);
 }
 .hds-table__tbody .hds-table__tr:last-of-type .hds-table__td:last-child {
-  border-bottom-right-radius: 5px;
+  border-bottom-right-radius: calc(var(--token-border-radius-medium) - 1px);
 }
 .hds-table__tbody .hds-table__th,
 .hds-table__tbody .hds-table__td {
   text-align: left;
-  border-top: none;
-  border-right: none;
-  border-bottom: 1px solid var(--token-color-border-primary);
-  border-left: none;
 }
 .hds-table--density-short .hds-table__tbody .hds-table__th,
 .hds-table--density-short .hds-table__tbody .hds-table__td {
@@ -7546,6 +7928,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