@hashicorp/design-system-components 4.2.0 → 4.3.0

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

@@ -2130,7 +2130,7 @@ button.hds-button[href]::after {
   --hds-code-block-color-boolean: var(--hds-code-block-color-purple);
   --hds-code-block-color-builtin: var(--hds-code-block-color-orange);
   --hds-code-block-color-char: var(--hds-code-block-color-orange);
-  --hds-code-block-color-class-name: var(--hds-code-block-color-green);
+  --hds-code-block-color-class-name: var(--hds-code-block-color-blue);
   --hds-code-block-color-comment: var(--hds-code-block-color-foreground-faint);
   --hds-code-block-color-control: var(--hds-code-block-color-cyan);
   --hds-code-block-color-constant: var(--hds-code-block-color-purple);
@@ -3261,9 +3261,16 @@ button.hds-button[href]::after {
 .hds-dropdown-list-item__interactive-icon {
   display: block;
   margin-top: 2px;
+}
+
+.hds-dropdown-list-item__interactive-icon--leading {
   margin-right: 8px;
 }
 
+.hds-dropdown-list-item__interactive-icon--trailing {
+  margin-left: 8px;
+}
+
 .hds-dropdown-list-item__interactive-text {
   display: block;
   flex: 1;
@@ -4101,6 +4108,365 @@ button.hds-button[href]::after {
   font-style: normal;
 }
 
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+.hds-form-super-select {
+  width: 100%;
+}
+
+.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger,
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger {
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+  min-height: 36px;
+  padding-top: 4px;
+  padding-right: calc(var(--token-form-control-padding) + 24px);
+  padding-bottom: 4px;
+  padding-left: 11px;
+  color: var(--token-form-control-base-foreground-value-color);
+  line-height: var(--token-typography-body-200-line-height);
+  background-color: var(--token-form-control-base-surface-color-default);
+  background-image: var(--token-form-select-background-image-data-url);
+  background-repeat: no-repeat;
+  background-position: right var(--token-form-select-background-image-position-right-x) center, top var(--token-form-select-background-image-position-top-y) left 20px;
+  background-size: var(--token-form-select-background-image-size) var(--token-form-select-background-image-size);
+  border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
+  border-radius: var(--token-form-control-border-radius);
+  box-shadow: var(--token-elevation-low-box-shadow);
+}
+.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger:hover, .hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger.mock-hover,
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger:hover,
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger.mock-hover {
+  border-color: var(--token-form-control-base-border-color-hover);
+}
+.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger:focus, .hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger.mock-focus,
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger:focus,
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger.mock-focus {
+  border-color: var(--token-color-focus-action-internal);
+  outline: 3px solid var(--token-color-focus-action-external);
+  outline-offset: 0;
+}
+.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger[aria-expanded=true].ember-basic-dropdown-trigger--in-place,
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger[aria-expanded=true].ember-basic-dropdown-trigger--in-place {
+  border-radius: var(--token-form-control-border-radius);
+}
+.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger .ember-power-select-status-icon,
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger .ember-power-select-status-icon {
+  display: none;
+}
+.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger .ember-power-select-placeholder,
+.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger .ember-power-select-selected-item,
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger .ember-power-select-placeholder,
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger .ember-power-select-selected-item {
+  flex: 1;
+  margin-left: 0;
+}
+.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger .ember-power-select-placeholder,
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger .ember-power-select-placeholder {
+  color: var(--token-form-control-base-foreground-placeholder-color);
+}
+.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger[aria-disabled=true],
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger[aria-disabled=true] {
+  color: var(--token-form-control-disabled-foreground-color);
+  background-color: var(--token-form-control-disabled-surface-color);
+  background-image: var(--token-form-select-background-image-data-url-disabled);
+  border-color: var(--token-form-control-disabled-border-color);
+  box-shadow: none;
+  cursor: not-allowed;
+  opacity: 1;
+}
+.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-trigger[aria-disabled=true] .ember-power-select-selected-item,
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger[aria-disabled=true] .ember-power-select-selected-item {
+  opacity: inherit;
+}
+.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-content {
+  max-width: var(--hds-form-super-select-dropdown-max-width, none);
+  margin: 0;
+  border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
+  border-radius: var(--token-form-control-border-radius);
+}
+.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-content.ember-basic-dropdown-content--in-place {
+  box-shadow: var(--token-elevation-high-box-shadow), var(--token-elevation-high-box-shadow);
+}
+.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-content.ember-basic-dropdown-content--below {
+  margin-top: 4px;
+}
+.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-content.ember-basic-dropdown-content--above {
+  top: unset !important;
+  bottom: 100%;
+  margin-bottom: 4px;
+}
+.hds-form-super-select .ember-basic-dropdown .ember-basic-dropdown-content > .ember-power-select-options > .hds-form-super-select__option-group:first-child::before {
+  display: none;
+}
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-options {
+  padding: 3px 0;
+}
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-options .ember-power-select-options {
+  padding: 0;
+}
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-option {
+  position: relative;
+  min-height: 36px;
+  padding: 7px 7px 7px 39px;
+  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);
+  overflow-wrap: break-word;
+  border: none;
+}
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-option + .ember-power-select-option {
+  margin-top: 8px;
+}
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-option[aria-current=true] {
+  color: var(--token-form-control-base-foreground-value-color);
+  background-color: var(--token-form-control-base-surface-color-default);
+}
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-option[aria-selected=true] {
+  background-color: var(--token-form-control-base-surface-color-default);
+}
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-option[aria-current=true], .hds-form-super-select .ember-basic-dropdown .ember-power-select-option:hover, .hds-form-super-select .ember-basic-dropdown .ember-power-select-option.mock-hover {
+  border: none;
+}
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-option[aria-current=true]::after, .hds-form-super-select .ember-basic-dropdown .ember-power-select-option:hover::after, .hds-form-super-select .ember-basic-dropdown .ember-power-select-option.mock-hover::after {
+  position: absolute;
+  top: 6px;
+  bottom: 6px;
+  left: 3px;
+  width: 2px;
+  background-color: var(--token-color-foreground-action-hover);
+  border-radius: 500px;
+  content: "";
+}
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-option:active::after, .hds-form-super-select .ember-basic-dropdown .ember-power-select-option.mock-active::after {
+  background-color: var(--token-color-foreground-action-active);
+}
+.hds-form-super-select .ember-basic-dropdown .hds-form-super-select__option-group:first-child .hds-form-super-select__option-group-title {
+  margin-top: 0;
+}
+.hds-form-super-select .ember-basic-dropdown .hds-form-super-select__option-group::before {
+  display: block;
+  height: 5px;
+  margin: 7px 5px 9px 5px;
+  border-bottom: 1px solid var(--token-color-border-primary);
+  content: "";
+}
+.hds-form-super-select .ember-basic-dropdown .hds-form-super-select__option-group .hds-form-super-select__option-group {
+  padding-left: 16px;
+}
+.hds-form-super-select .ember-basic-dropdown .hds-form-super-select__option-group .hds-form-super-select__option-group:first-child::before {
+  display: none;
+}
+.hds-form-super-select .ember-basic-dropdown .hds-form-super-select__option-group-title {
+  margin: 8px 0;
+  padding: 6px 7px 2px 15px;
+}
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-search {
+  margin-bottom: 3px;
+  padding: 11px 11px 0 11px;
+  border-radius: var(--token-form-control-border-radius);
+}
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-search-input {
+  width: 100%;
+  min-height: 36px;
+  padding: var(--token-form-control-padding);
+  color: var(--token-form-control-base-foreground-value-color);
+  font-size: var(--token-typography-body-200-font-size);
+  font-family: var(--token-typography-body-200-font-family);
+  line-height: 1rem;
+  background-color: var(--token-form-control-base-surface-color-default);
+  border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
+  border-radius: var(--token-form-control-border-radius);
+  box-shadow: var(--token-elevation-inset-box-shadow);
+}
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-search-input::placeholder {
+  color: var(--token-form-control-base-foreground-placeholder-color);
+}
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-search-input:hover, .hds-form-super-select .ember-basic-dropdown .ember-power-select-search-input.mock-hover {
+  border-color: var(--token-form-control-base-border-color-hover);
+}
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-search-input:focus, .hds-form-super-select .ember-basic-dropdown .ember-power-select-search-input.mock-focus {
+  border-color: var(--token-color-focus-action-internal);
+  outline: 3px solid var(--token-color-focus-action-external);
+  outline-offset: 0;
+}
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-search-input[type=search] {
+  padding-left: calc(var(--token-form-control-padding) + 24px);
+  background-image: var(--token-form-text-input-background-image-data-url-search);
+  background-repeat: no-repeat;
+  background-position: var(--token-form-text-input-background-image-position-x) 50%;
+  background-size: var(--token-form-text-input-background-image-size);
+}
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-search-input[type=search]::-webkit-search-cancel-button {
+  width: var(--token-form-text-input-background-image-size);
+  height: var(--token-form-text-input-background-image-size);
+  background-image: var(--token-form-text-input-background-image-data-url-search-cancel);
+  background-position: center center;
+  background-size: var(--token-form-text-input-background-image-size);
+  appearance: none;
+}
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-multiple-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  min-width: 0;
+  list-style: none;
+}
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-multiple-option {
+  float: none;
+  min-width: 0;
+  margin: 0;
+  padding: 3px 10px 5px 10px;
+  font-size: var(--token-typography-body-100-font-size);
+  font-family: var(--token-typography-body-100-font-family);
+  line-height: 1rem;
+  vertical-align: middle;
+  overflow-wrap: break-word;
+  background-color: var(--token-color-surface-interactive);
+  border: 1px solid var(--token-color-border-strong);
+  border-radius: 50px;
+}
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-multiple-remove-btn {
+  display: none;
+}
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger-multiple-input {
+  color: var(--token-form-control-base-foreground-value-color);
+  font-size: var(--token-typography-body-200-font-size);
+  font-family: var(--token-typography-body-200-font-family);
+}
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-trigger-multiple-input::-webkit-search-cancel-button {
+  width: var(--token-form-text-input-background-image-size);
+  height: var(--token-form-text-input-background-image-size);
+  background-image: var(--token-form-text-input-background-image-data-url-search-cancel);
+  background-position: center center;
+  background-size: var(--token-form-text-input-background-image-size);
+  cursor: pointer;
+  -webkit-appearance: none;
+}
+
+.hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-basic-dropdown-trigger,
+.hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-power-select-trigger {
+  border-color: var(--token-form-control-invalid-border-color-default);
+}
+.hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-basic-dropdown-trigger:hover, .hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-basic-dropdown-trigger.mock-hover,
+.hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-power-select-trigger:hover,
+.hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-power-select-trigger.mock-hover {
+  border-color: var(--token-form-control-invalid-border-color-hover);
+}
+.hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-basic-dropdown-trigger:focus, .hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-basic-dropdown-trigger.mock-focus,
+.hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-power-select-trigger:focus,
+.hds-form-super-select.hds-form-super-select--is-invalid .ember-basic-dropdown .ember-power-select-trigger.mock-focus {
+  border-color: var(--token-color-focus-critical-internal);
+  outline-color: var(--token-color-focus-critical-external);
+}
+
+.hds-form-super-select.hds-form-super-select--show-only-selected .ember-basic-dropdown .ember-power-select-option:not([aria-selected=true]) {
+  display: none;
+}
+
+.hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message) {
+  background-repeat: no-repeat;
+  background-position: 15px 10px;
+  background-size: var(--token-form-select-background-image-size) var(--token-form-select-background-image-size);
+}
+.hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true]:not([aria-disabled=true]) {
+  color: var(--token-color-foreground-action);
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.78 4.28a.75.75 0 00-1.06-1.06l-7.97 7.97-3.47-3.47a.75.75 0 00-1.06 1.06l4 4a.75.75 0 001.06 0l8.5-8.5z' fill='%231060ff'/%3E%3C/svg%3E");
+}
+.hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-current=true], .hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message):hover, .hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message).mock-hover {
+  color: var(--token-color-foreground-action-hover);
+}
+.hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message):active, .hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message).mock-active {
+  color: var(--token-color-foreground-action-active);
+}
+.hds-form-super-select-single .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true][aria-disabled=true] {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.7803 4.28033C15.0732 3.98744 15.0732 3.51256 14.7803 3.21967C14.4874 2.92678 14.0126 2.92678 13.7197 3.21967L5.75 11.1893L2.28033 7.71967C1.98744 7.42678 1.51256 7.42678 1.21967 7.71967C0.926777 8.01256 0.926777 8.48744 1.21967 8.78033L5.21967 12.7803C5.51256 13.0732 5.98744 13.0732 6.28033 12.7803L14.7803 4.28033Z' fill='%238C909C'/%3E%3C/svg%3E");
+}
+
+.hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message) {
+  position: relative;
+}
+.hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)::before {
+  position: absolute;
+  top: 9px;
+  left: 15px;
+  display: block;
+  width: var(--token-form-checkbox-size);
+  height: var(--token-form-checkbox-size);
+  background-position: center center;
+  background-size: var(--token-form-checkbox-background-image-size) var(--token-form-checkbox-background-image-size);
+  border-style: solid;
+  border-width: var(--token-form-checkbox-border-width);
+  border-radius: var(--token-form-checkbox-border-radius);
+  cursor: pointer;
+  content: "";
+}
+.hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message):not([aria-selected=true])::before {
+  background-color: var(--token-form-control-base-surface-color-default);
+  border-color: var(--token-form-control-base-border-color-default);
+  box-shadow: var(--token-elevation-inset-box-shadow);
+}
+.hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-current=true]::before, .hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message):hover:not([aria-selected=true])::before, .hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message).mock-hover:not([aria-selected=true])::before {
+  background-color: var(--token-form-control-base-surface-color-hover);
+  border-color: var(--token-form-control-base-border-color-hover);
+}
+.hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-disabled=true]:not([aria-selected=true])::before {
+  background-color: var(--token-form-control-disabled-surface-color);
+  border-color: var(--token-form-control-disabled-border-color);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+.hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true]:not([aria-disabled=true])::before {
+  background-color: var(--token-form-control-checked-surface-color-default);
+  background-image: var(--token-form-checkbox-background-image-data-url);
+  border-color: var(--token-form-control-checked-border-color-default);
+}
+.hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true][aria-current=true]::before, .hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true]:hover[aria-selected=true]::before, .hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true].mock-hover[aria-selected=true]::before {
+  background-color: var(--token-form-control-checked-border-color-default);
+  border-color: var(--token-form-control-checked-border-color-hover);
+}
+.hds-form-super-select-multiple .ember-basic-dropdown .ember-power-select-option:not(.ember-power-select-option--no-matches-message)[aria-selected=true][aria-disabled=true]::before {
+  background-color: var(--token-form-control-disabled-surface-color);
+  background-image: var(--token-form-checkbox-background-image-data-url-disabled);
+  border-color: var(--token-form-control-disabled-border-color);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-option--no-matches-message {
+  padding-left: 12px;
+  cursor: inherit;
+}
+.hds-form-super-select .ember-basic-dropdown .ember-power-select-option--no-matches-message::after {
+  display: none;
+}
+
+.hds-form-super-select__after-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  padding: 8px 12px;
+  background-color: var(--token-color-surface-strong);
+  border-top: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
+}
+
+.hds-form-super-select__result-count {
+  margin-left: auto;
+}
+
+.hds-form-super-select__no-options-selected {
+  min-height: 36px;
+  padding: 4px 15px 10px;
+}
+
+.hds-form-super-select--dropdown-content-auto-width .ember-power-select-dropdown.ember-basic-dropdown-content {
+  width: auto;
+}
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
@@ -5147,6 +5513,201 @@ button.hds-button[href]::after {
   margin-top: 4px;
 }
 
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+.hds-rich-tooltip {
+  display: contents;
+}
+
+:where(.hds-rich-tooltip__toggle) {
+  width: fit-content;
+  height: fit-content;
+  margin: 0;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+  background-color: inherit;
+  border: none;
+  cursor: pointer;
+}
+
+.hds-rich-tooltip__toggle {
+  --text-color: var(--token-color-foreground-strong);
+  --icon-color: var(--token-color-foreground-strong);
+  position: relative;
+  outline-style: solid;
+  outline-color: transparent;
+  isolation: isolate;
+}
+.hds-rich-tooltip__toggle:hover, .hds-rich-tooltip__toggle.mock-hover {
+  --text-color: var(--token-color-foreground-primary);
+  --icon-color: var(--token-color-foreground-primary);
+}
+.hds-rich-tooltip__toggle:active, .hds-rich-tooltip__toggle.mock-active {
+  --text-color: var(--token-color-foreground-faint);
+  --icon-color: var(--token-color-foreground-faint);
+}
+.hds-rich-tooltip__toggle::before {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  bottom: -2px;
+  left: -2px;
+  z-index: -1;
+  border-radius: 5px;
+  content: "";
+}
+.hds-rich-tooltip__toggle:focus::before, .hds-rich-tooltip__toggle.mock-focus::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-rich-tooltip__toggle:focus:not(:focus-visible)::before {
+  box-shadow: none;
+}
+.hds-rich-tooltip__toggle:focus-visible::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-rich-tooltip__toggle:focus:active::before, .hds-rich-tooltip__toggle.mock-focus.mock-active::before {
+  box-shadow: none;
+}
+
+.hds-rich-tooltip__toggle-text {
+  color: var(--text-color);
+  text-decoration: underline dotted;
+}
+
+.hds-rich-tooltip__toggle-icon {
+  flex: none;
+  width: 1em;
+  height: 1em;
+  color: var(--icon-color);
+}
+.hds-rich-tooltip__toggle-icon:first-child:not(:only-child) {
+  margin-right: 0.25rem;
+}
+.hds-rich-tooltip__toggle-icon:last-child:not(:only-child) {
+  margin-left: 0.25rem;
+}
+
+:where(.hds-rich-tooltip__toggle--is-inline) {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: bottom;
+}
+:where(.hds-rich-tooltip__toggle--is-inline):has(.hds-rich-tooltip__toggle-icon:only-child) {
+  vertical-align: middle;
+}
+
+:where(.hds-rich-tooltip__toggle--is-block) {
+  display: flex;
+  align-items: center;
+}
+
+.hds-rich-tooltip__toggle--size-small {
+  font-weight: var(--token-typography-font-weight-regular);
+  font-size: var(--token-typography-body-100-font-size);
+  font-family: var(--token-typography-body-100-font-family);
+  line-height: var(--token-typography-body-100-line-height);
+}
+
+.hds-rich-tooltip__toggle--size-medium {
+  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);
+}
+
+.hds-rich-tooltip__toggle--size-large {
+  font-weight: var(--token-typography-font-weight-regular);
+  font-size: var(--token-typography-body-300-font-size);
+  font-family: var(--token-typography-body-300-font-family);
+  line-height: var(--token-typography-body-300-line-height);
+}
+
+.hds-rich-tooltip__bubble {
+  position: relative;
+  width: fit-content;
+  max-width: var(--token-tooltip-max-width);
+  height: fit-content;
+  max-height: none;
+  padding: 16px;
+  background: var(--token-color-surface-primary);
+  border-radius: 5px;
+  box-shadow: var(--token-surface-higher-box-shadow);
+  opacity: 0;
+  transition: opacity 0.3s;
+  will-change: opacity;
+}
+:where(.hds-rich-tooltip__bubble[popover]) {
+  width: fit-content;
+  height: fit-content;
+  margin: 0;
+  padding: 0;
+  overflow: visible;
+  color: inherit;
+  background: none;
+  border: none;
+  inset: 0;
+}
+
+.hds-rich-tooltip__bubble-arrow {
+  position: absolute;
+  z-index: 1;
+  display: block;
+  width: 20px;
+  height: 20px;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><path fill="%23fff" d="M9.056 11.607.398 20h19.091l-8.37-8.393S10.69 11 10.089 11c-.602 0-1.032.608-1.032.608Z"/><path fill="%23656A76" fill-opacity=".2" fill-rule="evenodd" d="M9.359 11.308 1.423 19H0l8.674-8.417.342.362-.342-.362v-.001l.002-.001.003-.003.007-.007a1.622 1.622 0 0 1 .103-.087c.066-.053.16-.122.277-.191.224-.134.571-.293.977-.293a2.158 2.158 0 0 1 1.374.492 1.658 1.658 0 0 1 .107.098l.004.004L20 19h-1.518l-7.665-7.707-.004-.003-.002-.002a1.069 1.069 0 0 0-.18-.131 1.167 1.167 0 0 0-.588-.157.958.958 0 0 0-.47.153 1.527 1.527 0 0 0-.208.15l-.006.005Z" clip-rule="evenodd"/></svg>') no-repeat 0 0/20px 20px;
+  pointer-events: none;
+}
+.hds-rich-tooltip__bubble-arrow[data-hds-anchored-arrow-placement^=top] {
+  bottom: -20px;
+  transform: rotate(180deg);
+}
+.hds-rich-tooltip__bubble-arrow[data-hds-anchored-arrow-placement^=right] {
+  left: -20px;
+  transform: rotate(-90deg);
+}
+.hds-rich-tooltip__bubble-arrow[data-hds-anchored-arrow-placement^=bottom] {
+  top: -20px;
+  transform: rotate(0deg);
+}
+.hds-rich-tooltip__bubble-arrow[data-hds-anchored-arrow-placement^=left] {
+  right: -20px;
+  transform: rotate(90deg);
+}
+
+.hds-rich-tooltip__bubble-inner-content {
+  all: initial;
+  display: contents;
+  box-sizing: border-box;
+}
+.hds-rich-tooltip__bubble-inner-content *,
+.hds-rich-tooltip__bubble-inner-content *::before,
+.hds-rich-tooltip__bubble-inner-content *::after {
+  box-sizing: inherit;
+}
+
+/* clean-css ignore:start */
+.hds-rich-tooltip__bubble[popover]:popover-open {
+  opacity: 1;
+}
+@starting-style {
+  .hds-rich-tooltip__bubble[popover]:popover-open {
+    opacity: 0;
+  }
+}
+.hds-rich-tooltip__bubble[popover].\:popover-open {
+  opacity: 1;
+}
+@starting-style {
+  .hds-rich-tooltip__bubble[popover].\:popover-open {
+    opacity: 0;
+  }
+}
+
+/* clean-css ignore:end */
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
@@ -6261,6 +6822,7 @@ button.hds-button[href]::after {
   margin: 0;
   padding: 0;
   overflow-x: auto;
+  isolation: isolate;
   -webkit-overflow-scrolling: touch;
 }
 
@@ -6338,7 +6900,7 @@ button.hds-button[href]::after {
   right: 0;
   bottom: 0;
   left: var(--indicator-left-pos, 0);
-  z-index: 10;
+  z-index: 1;
   display: block;
   width: var(--indicator-width, 0);
   height: var(--token-tabs-indicator-height);
@@ -6578,7 +7140,7 @@ button.hds-button[href]::after {
 .tippy-box[data-theme~=hds] .tippy-content {
   position: relative;
   z-index: 1;
-  max-width: var(--token-tooltip-max-width);
+  max-width: calc(var(--token-tooltip-max-width) - 2 * var(--token-tooltip-padding-horizontal));
   white-space: normal;
   text-align: left;
 }

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

@@ -40,6 +40,7 @@
 @use "../components/page-header";
 @use "../components/pagination";
 @use "../components/reveal";
+@use "../components/rich-tooltip";
 @use "../components/segmented-group";
 @use "../components/separator";
 @use "../components/side-nav";

package/dist/styles/@hashicorp/design-system-power-select-overrides.scss

@@ -120,7 +120,6 @@
       &:focus,
       &.mock-focus {
         border-color: var(--token-color-focus-action-internal);
-        // Notice: Safari doesn't apply a rounded border
         outline: 3px solid var(--token-color-focus-action-external);
         outline-offset: 0;
       }

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

@@ -58,7 +58,7 @@
   --hds-code-block-color-boolean: var(--hds-code-block-color-purple);
   --hds-code-block-color-builtin: var(--hds-code-block-color-orange);
   --hds-code-block-color-char: var(--hds-code-block-color-orange);
-  --hds-code-block-color-class-name: var(--hds-code-block-color-green);
+  --hds-code-block-color-class-name: var(--hds-code-block-color-blue);
   --hds-code-block-color-comment: var(--hds-code-block-color-foreground-faint);
   --hds-code-block-color-control: var(--hds-code-block-color-cyan);
   --hds-code-block-color-constant: var(--hds-code-block-color-purple);

package/dist/styles/components/dropdown.scss

@@ -411,9 +411,16 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
 .hds-dropdown-list-item__interactive-icon {
   display: block;
   margin-top: 2px;
+}
+
+.hds-dropdown-list-item__interactive-icon--leading {
   margin-right: 8px;
 }
 
+.hds-dropdown-list-item__interactive-icon--trailing {
+  margin-left: 8px;
+}
+
 .hds-dropdown-list-item__interactive-text {
   display: block;
   flex: 1;

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

@@ -21,6 +21,7 @@
 @use "./radio";
 @use "./radio-card";
 @use "./select";
+@use "./super-select";
 @use "./text-input";
 @use "./textarea";
 @use "./toggle";

package/dist/styles/components/form/select.scss

@@ -38,7 +38,6 @@
   &:focus,
   &.mock-focus {
     border-color: var(--token-color-focus-action-internal);
-    // Notice: Safari doesn't apply a rounded border
     outline: 3px solid var(--token-color-focus-action-external);
     outline-offset: 0;
   }