@hashicorp/design-system-components 4.15.0 → 4.17.0

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

@@ -7,6 +7,10 @@
  * 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;
@@ -809,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);
@@ -903,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;
@@ -923,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 {
@@ -975,6 +979,324 @@
   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%;
+  font-weight: var(--token-typography-font-weight-regular);
+  font-size: var(--token-typography-body-200-font-size);
+  font-family: var(--token-typography-body-200-font-family);
+  line-height: var(--token-typography-body-200-line-height);
+  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
@@ -1021,7 +1343,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);
@@ -1063,7 +1385,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 {
@@ -1416,12 +1738,20 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 .hds-badge {
+  --token-color-surface-success: var(--token-color-palette-green-100);
+  --token-color-foreground-success-on-surface: var(--token-color-palette-green-400);
+  --token-color-surface-warning: var(--token-color-palette-amber-100);
+  --token-color-foreground-warning-on-surface: var(--token-color-palette-amber-400);
+  --token-color-surface-critical: var(--token-color-palette-red-100);
+  --token-color-foreground-critical-on-surface: var(--token-color-palette-red-400);
+  --token-color-surface-highlight: var(--token-color-palette-purple-100);
+  --token-color-foreground-highlight-on-surface: var(--token-color-palette-purple-400);
   display: inline-flex;
   align-items: center;
   max-width: 100%;
   vertical-align: middle;
   border: 1px solid transparent;
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
 }
 
 .hds-badge__icon {
@@ -1479,7 +1809,7 @@
 
 .hds-badge--color-neutral.hds-badge--type-filled {
   color: var(--token-color-foreground-primary);
-  background-color: var(--token-color-surface-strong);
+  background-color: var(--token-color-palette-neutral-200);
 }
 .hds-badge--color-neutral.hds-badge--type-inverted {
   color: var(--token-color-foreground-high-contrast);
@@ -1600,7 +1930,7 @@
 
 .hds-badge-count--color-neutral.hds-badge-count--type-filled {
   color: var(--token-color-foreground-primary);
-  background-color: var(--token-color-surface-strong);
+  background-color: var(--token-color-palette-neutral-200);
 }
 .hds-badge-count--color-neutral.hds-badge-count--type-inverted {
   color: var(--token-color-foreground-high-contrast);
@@ -1678,7 +2008,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;
@@ -1752,7 +2082,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;
@@ -1791,7 +2121,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]) {
@@ -1825,7 +2155,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;
@@ -1865,7 +2195,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: "";
 }
 
@@ -1902,7 +2232,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);
@@ -2099,7 +2429,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 {
@@ -2441,7 +2771,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,
@@ -2613,6 +2943,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
@@ -2656,7 +3089,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 {
@@ -2963,9 +3396,10 @@ 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;
+  border-radius: var(--token-border-radius-small);
   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);
@@ -2983,7 +3417,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-icon:focus::before, .hds-dropdown-toggle-icon.mock-focus::before {
@@ -3011,7 +3445,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%;
@@ -3045,7 +3479,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;
@@ -3061,7 +3495,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 {
@@ -3174,7 +3608,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);
@@ -3256,7 +3690,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]) {
@@ -3399,7 +3833,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,
@@ -3824,7 +4258,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;
 }
@@ -4274,7 +4708,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);
@@ -4987,7 +5421,7 @@ button.hds-button[href]::after {
   position: relative;
   display: flex;
   border: 1px solid transparent;
-  border-radius: 4px;
+  border-radius: var(--token-border-radius-medium);
 }
 
 .hds-icon-tile__icon,
@@ -5291,7 +5725,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 {
@@ -5333,7 +5767,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]) {
@@ -5731,7 +6165,8 @@ button.hds-button[href]::after {
 
 .hds-rich-tooltip__toggle-text {
   color: var(--text-color);
-  text-decoration: underline dotted;
+  text-decoration: underline;
+  text-decoration-style: dotted;
 }
 
 .hds-rich-tooltip__toggle-icon {
@@ -5790,7 +6225,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;
@@ -6209,7 +6644,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,
@@ -6528,7 +6963,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;
@@ -6844,7 +7279,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;
 }
@@ -7061,8 +7496,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;
 }
 
@@ -7070,28 +7504,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 {
@@ -7110,10 +7535,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 {
@@ -7139,7 +7564,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;
@@ -7202,24 +7627,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 {
@@ -7410,6 +7827,8 @@ button.hds-button[href]::after {
 .hds-tag {
   display: inline-flex;
   align-items: stretch;
+  width: fit-content;
+  max-width: 100%;
   line-height: 1rem;
   vertical-align: middle;
   background-color: var(--token-color-surface-interactive);
@@ -7436,12 +7855,23 @@ button.hds-button[href]::after {
 .hds-tag__text,
 .hds-tag__link {
   flex: 1 0 0;
+  max-width: 166px;
   padding: 3px 10px 5px 10px;
   border-radius: inherit;
 }
 
+.hds-tag__text-container {
+  display: -webkit-box;
+  overflow: hidden;
+  word-break: break-all;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+}
+
 .hds-tag__dismiss ~ .hds-tag__text,
 .hds-tag__dismiss ~ .hds-tag__link {
+  max-width: 160px;
   padding: 3px 8px 5px 6px;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
@@ -7494,6 +7924,31 @@ button.hds-button[href]::after {
   box-shadow: none;
 }
 
+.hds-tooltip-button.hds-tag__text {
+  cursor: text;
+  user-select: text;
+}
+.hds-tooltip-button.hds-tag__text:focus, .hds-tooltip-button.hds-tag__text.mock-focus {
+  outline-style: solid;
+  outline-color: transparent;
+  z-index: 1;
+}
+.hds-tooltip-button.hds-tag__text:focus:focus, .hds-tooltip-button.hds-tag__text:focus.mock-focus, .hds-tooltip-button.hds-tag__text.mock-focus:focus, .hds-tooltip-button.hds-tag__text.mock-focus.mock-focus {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-tooltip-button.hds-tag__text:focus:focus:not(:focus-visible), .hds-tooltip-button.hds-tag__text.mock-focus:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+.hds-tooltip-button.hds-tag__text:focus:focus-visible, .hds-tooltip-button.hds-tag__text.mock-focus:focus-visible {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-tooltip-button.hds-tag__text:focus:focus:active, .hds-tooltip-button.hds-tag__text:focus.mock-focus.mock-active, .hds-tooltip-button.hds-tag__text.mock-focus:focus:active, .hds-tooltip-button.hds-tag__text.mock-focus.mock-focus.mock-active {
+  box-shadow: none;
+}
+.hds-tooltip-button.hds-tag__text:focus-visible::before {
+  box-shadow: none;
+}
+
 .hds-tag--color-primary .hds-tag__link {
   color: var(--token-color-foreground-action);
 }
@@ -7533,6 +7988,11 @@ button.hds-button[href]::after {
   gap: 2px;
 }
 
+.hds-time-wrapper .hds-time {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+}
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
@@ -7622,8 +8082,43 @@ button.hds-button[href]::after {
   text-align: left;
 }
 .tippy-box[data-theme~=hds] .tippy-svg-arrow {
+  width: 16px;
+  height: 16px;
+  text-align: initial;
   fill: var(--token-tooltip-color-surface-primary);
 }
+.tippy-box[data-theme~=hds] .tippy-svg-arrow, .tippy-box[data-theme~=hds] .tippy-svg-arrow > svg {
+  position: absolute;
+}
+.tippy-box[data-theme~=hds][data-placement^=top] > .tippy-svg-arrow {
+  bottom: 0;
+}
+.tippy-box[data-theme~=hds][data-placement^=top] > .tippy-svg-arrow::after, .tippy-box[data-theme~=hds][data-placement^=top] > .tippy-svg-arrow > svg {
+  top: 16px;
+  transform: rotate(180deg);
+}
+.tippy-box[data-theme~=hds][data-placement^=bottom] > .tippy-svg-arrow {
+  top: 0;
+}
+.tippy-box[data-theme~=hds][data-placement^=bottom] > .tippy-svg-arrow > svg {
+  bottom: 16px;
+}
+.tippy-box[data-theme~=hds][data-placement^=left] > .tippy-svg-arrow {
+  right: 0;
+}
+.tippy-box[data-theme~=hds][data-placement^=left] > .tippy-svg-arrow::after, .tippy-box[data-theme~=hds][data-placement^=left] > .tippy-svg-arrow > svg {
+  top: calc(50% - 3px);
+  left: 11px;
+  transform: rotate(90deg);
+}
+.tippy-box[data-theme~=hds][data-placement^=right] > .tippy-svg-arrow {
+  left: 0;
+}
+.tippy-box[data-theme~=hds][data-placement^=right] > .tippy-svg-arrow::after, .tippy-box[data-theme~=hds][data-placement^=right] > .tippy-svg-arrow > svg {
+  top: calc(50% - 3px);
+  right: 11px;
+  transform: rotate(-90deg);
+}
 
 .sr-only {
   position: absolute !important;