@hashicorp/design-system-components 4.15.0 → 4.16.0

package/dist/styles/components/rich-tooltip.scss

@@ -138,7 +138,7 @@
   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);
 
   // fade-in animation (we can't do fade-out because `isOpen` removes the content of the bubble immediately from the DOM)

package/dist/styles/components/side-nav/a11y-refocus.scss

@@ -19,7 +19,7 @@
     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;
 

package/dist/styles/components/table.scss

@@ -10,9 +10,9 @@
 
 @use "../mixins/focus-ring" as *;
 
-$hds-table-border-radius: 6px;
+$hds-table-border-radius: var(--token-border-radius-medium);
 $hds-table-border-width: 1px;
-$hds-table-inner-border-radius: $hds-table-border-radius - $hds-table-border-width;
+$hds-table-inner-border-radius: calc(#{$hds-table-border-radius} - #{$hds-table-border-width});
 $hds-table-border-color: var(--token-color-border-primary);
 $hds-table-header-height: 48px;
 $hds-table-cell-padding-medium: 14px 16px 13px 16px; // the 1px difference is to account for the bottom border
@@ -24,7 +24,6 @@ $hds-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px difference is to a
 
 .hds-table {
   width: 100%;
-  border: $hds-table-border-width solid $hds-table-border-color;
   border-radius: $hds-table-border-radius;
   border-spacing: 0;
 }
@@ -36,6 +35,13 @@ $hds-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px difference is to a
   table-layout: fixed;
 }
 
+// table border
+
+.hds-table, 
+.hds-table__th, 
+.hds-table__td {
+  border: calc(#{$hds-table-border-width} / 2) solid $hds-table-border-color;
+}
 
 // ----------------------------------------------------------------
 
@@ -47,26 +53,8 @@ $hds-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px difference is to a
     background-color: var(--token-color-surface-strong);
 
     .hds-table__th {
-      position: relative;
       padding: $hds-table-cell-padding-medium;
       text-align: left;
-      border-top: none;
-      border-right: none;
-      border-bottom: $hds-table-border-width solid $hds-table-border-color;
-      border-left: none;
-
-      // border between two cells (we emulate a cell border slightly detached from the top/bottom borders)
-
-      + .hds-table__th::before {
-        position: absolute;
-        top: 6px;
-        bottom: 6px;
-        left: -1px; // we need to offset the border by 1px to render a right border of the previous cell
-        width: 1px;
-        background-color: $hds-table-border-color;
-        content: "";
-        pointer-events: none;
-      }
     }
 
     // horizontal alignment
@@ -128,7 +116,7 @@ $hds-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px difference is to a
   color: var(--token-color-foreground-faint);
   background-color: transparent;
   border: 1px solid transparent;
-  border-radius: 3px;
+  border-radius: var(--token-border-radius-x-small);
 
   &:hover,
   &.mock-hover {
@@ -187,11 +175,6 @@ $hds-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px difference is to a
     // border radius: target first th (scope of row) and td, and last td elements in the last row
 
     &:last-of-type {
-      .hds-table__th,
-      .hds-table__td {
-        border-bottom: none;
-      }
-
       .hds-table__th:first-child,
       .hds-table__td:first-child {
         border-bottom-left-radius: $hds-table-inner-border-radius;
@@ -207,10 +190,6 @@ $hds-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px difference is to a
   .hds-table__th,
   .hds-table__td {
     text-align: left;
-    border-top: none;
-    border-right: none;
-    border-bottom: $hds-table-border-width solid $hds-table-border-color;
-    border-left: none;
 
     // density
 
@@ -225,9 +204,7 @@ $hds-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px difference is to a
     .hds-table--density-tall & {
       padding: $hds-table-cell-padding-tall;
     }
-
   }
-
   // horizontal alignment
 
   .hds-table__th--align-center,

package/dist/styles/mixins/_button.scss

@@ -6,7 +6,7 @@
 @use "sass:map";
 
 $hds-button-sizes: ( "small", "medium", "large" );
-$hds-button-border-radius: 5px;
+$hds-button-border-radius: var(--token-border-radius-small);
 $hds-button-border-width: 1px;
 $hds-button-focus-border-width: 3px;
 
@@ -86,7 +86,7 @@ $hds-button-size-props: (
     left: -$shift;
     z-index: -1;
     border: $hds-button-focus-border-width solid transparent;
-    border-radius: $hds-button-border-radius + $hds-button-focus-border-width;
+    border-radius: calc(#{$hds-button-border-radius} + #{$hds-button-focus-border-width});
     content: "";
   }
 }
@@ -121,7 +121,7 @@ $hds-button-size-props: (
       bottom: -$shift;
       left: -$shift;
       border-color: var(--token-color-focus-action-external);
-      border-radius: $hds-button-border-radius + $hds-button-focus-border-width + 2px;
+      border-radius: calc(#{$hds-button-border-radius} + #{$hds-button-focus-border-width} + 2px);
     }
   }
 

package/dist/utils/hds-aria-described-by.js

@@ -1,4 +1,4 @@
-import { a as _defineProperty, _ as _applyDecoratedDescriptor, b as _initializerDefineProperty } from '../_rollupPluginBabelHelpers-81503waH.js';
+import { a as _defineProperty, _ as _applyDecoratedDescriptor, b as _initializerDefineProperty } from '../_rollupPluginBabelHelpers-C_TsMG3M.js';
 import { tracked } from '@glimmer/tracking';
 import { scheduleOnce } from '@ember/runloop';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "4.15.0",
+  "version": "4.16.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -27,7 +27,7 @@
     "lint": "concurrently \"yarn:lint:*(!fix)\" --names \"lint:\"",
     "lint:fix": "concurrently \"yarn:lint:*:fix\" --names \"fix:\"",
     "lint:css": "stylelint \"src/styles/**/*.scss\"",
-    "lint:css:fix": "concurrently \"yarn:lint:css -- --fix\"",
+    "lint:css:fix": "concurrently \"yarn:lint:css --fix\"",
     "lint:types": "glint",
     "lint:hbs": "ember-template-lint .",
     "lint:hbs:fix": "ember-template-lint . --fix",
@@ -35,80 +35,90 @@
     "lint:js:fix": "eslint . --fix"
   },
   "dependencies": {
-    "@ember/render-modifiers": "^2.0.5",
+    "@codemirror/commands": "^6.8.0",
+    "@codemirror/lang-go": "^6.0.1",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-sql": "^6.8.0",
+    "@codemirror/lang-yaml": "^6.1.2",
+    "@codemirror/language": "^6.10.3",
+    "@codemirror/legacy-modes": "^6.4.2",
+    "@codemirror/state": "^6.5.0",
+    "@codemirror/view": "^6.36.2",
+    "@ember/render-modifiers": "^2.1.0",
     "@ember/string": "^3.1.1",
     "@ember/test-waiters": "^3.1.0",
-    "@embroider/addon-shim": "^1.8.7",
+    "@embroider/addon-shim": "^1.9.0",
     "@floating-ui/dom": "^1.6.12",
-    "@hashicorp/design-system-tokens": "^2.2.2",
-    "@hashicorp/flight-icons": "^3.8.0",
-    "clipboard-polyfill": "^4.1.0",
-    "decorator-transforms": "^1.1.0",
-    "ember-a11y-refocus": "^4.1.3",
+    "@hashicorp/design-system-tokens": "^2.3.0",
+    "@hashicorp/flight-icons": "^3.9.0",
+    "clipboard-polyfill": "^4.1.1",
+    "codemirror-lang-hcl": "^0.0.0-beta.2",
+    "decorator-transforms": "^1.2.1",
+    "ember-a11y-refocus": "^4.1.4",
     "ember-cli-sass": "^11.0.1",
     "ember-composable-helpers": "^5.0.0",
     "ember-concurrency": "^4.0.2",
-    "ember-element-helper": "^0.8.5",
-    "ember-focus-trap": "^1.1.0",
+    "ember-element-helper": "^0.8.6",
+    "ember-focus-trap": "^1.1.1",
     "ember-get-config": "^2.1.1",
-    "ember-modifier": "^4.1.0",
-    "ember-power-select": "^8.2.0",
+    "ember-modifier": "^4.2.0",
+    "ember-power-select": "^8.6.2",
     "ember-stargate": "^0.4.3",
     "ember-style-modifier": "^4.4.0",
     "ember-truth-helpers": "^4.0.3",
     "luxon": "^2.3.2 || ^3.4.2",
     "prismjs": "^1.29.0",
-    "sass": "^1.69.5",
+    "sass": "^1.83.0",
+    "tabbable": "^6.2.0",
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.7",
-    "@babel/plugin-proposal-decorators": "^7.24.1",
-    "@babel/plugin-transform-class-properties": "^7.24.1",
-    "@babel/plugin-transform-private-methods": "^7.24.1",
-    "@babel/plugin-transform-typescript": "^7.23.6",
-    "@babel/runtime": "^7.24.5",
-    "@ember/test-helpers": "^3.3.0",
+    "@babel/core": "^7.26.0",
+    "@babel/plugin-proposal-decorators": "^7.25.9",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-private-methods": "^7.25.9",
+    "@babel/plugin-transform-typescript": "^7.26.3",
+    "@babel/runtime": "^7.26.0",
+    "@ember/test-helpers": "^4.0.4",
     "@embroider/addon-dev": "^4.3.1",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@glint/core": "^1.4.0",
+    "@glint/core": "^1.5.0",
     "@glint/environment-ember-loose": "^1.4.0",
-    "@glint/template": "^1.4.0",
+    "@glint/template": "^1.5.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@tsconfig/ember": "^3.0.8",
-    "@types/ember-qunit": "^6.1.1",
-    "@types/ember-resolver": "^9.0.0",
+    "@types/ember-qunit": "^6.1.3",
+    "@types/ember-resolver": "^9.0.2",
     "@types/ember__destroyable": "^4.0.5",
-    "@types/luxon": "^3.2.0",
-    "@types/prismjs": "^1.26.4",
-    "@types/qunit": "^2.19.10",
+    "@types/luxon": "^3.4.2",
+    "@types/prismjs": "^1.26.5",
+    "@types/qunit": "^2.19.12",
     "@types/rsvp": "^4.0.9",
-    "@typescript-eslint/eslint-plugin": "^8.5.0",
-    "@typescript-eslint/parser": "^8.5.0",
-    "babel-plugin-ember-template-compilation": "^2.2.4",
-    "concurrently": "^8.2.2",
-    "ember-basic-dropdown": "^8.1.0",
-    "ember-source": "~5.9.0",
+    "@typescript-eslint/eslint-plugin": "^8.18.1",
+    "@typescript-eslint/parser": "^8.18.1",
+    "babel-plugin-ember-template-compilation": "^2.3.0",
+    "concurrently": "^9.1.0",
+    "ember-basic-dropdown": "^8.4.0",
     "ember-template-lint": "^6.0.0",
     "ember-template-lint-plugin-prettier": "^5.0.0",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-ember": "^12.2.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^17.7.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-qunit": "^8.1.1",
-    "postcss": "^8.4.47",
-    "prettier": "^3.3.2",
-    "rollup": "^4.22.4",
+    "eslint-plugin-ember": "^12.3.3",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-n": "^17.15.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-qunit": "^8.1.2",
+    "postcss": "^8.4.49",
+    "prettier": "^3.4.2",
+    "rollup": "^4.28.1",
     "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-scss": "^4.0.0",
+    "rollup-plugin-scss": "^4.0.1",
     "rollup-plugin-ts": "^3.4.5",
-    "stylelint": "^16.3.1",
+    "stylelint": "^16.12.0",
     "stylelint-config-rational-order": "^0.1.2",
-    "stylelint-config-standard-scss": "^13.1.0",
-    "typescript": "^5.4.5"
+    "stylelint-config-standard-scss": "^14.0.0",
+    "typescript": "^5.7.2"
   },
   "peerDependencies": {
     "ember-source": "^3.28.0 || ^4.0.0 || ^5.3.0"
@@ -124,6 +134,17 @@
       "./components/hds/accordion/index.js": "./dist/_app_/components/hds/accordion/index.js",
       "./components/hds/accordion/item/button.js": "./dist/_app_/components/hds/accordion/item/button.js",
       "./components/hds/accordion/item/index.js": "./dist/_app_/components/hds/accordion/item/index.js",
+      "./components/hds/advanced-table/expandable-tr-group.js": "./dist/_app_/components/hds/advanced-table/expandable-tr-group.js",
+      "./components/hds/advanced-table/helpers.js": "./dist/_app_/components/hds/advanced-table/helpers.js",
+      "./components/hds/advanced-table/index.js": "./dist/_app_/components/hds/advanced-table/index.js",
+      "./components/hds/advanced-table/td.js": "./dist/_app_/components/hds/advanced-table/td.js",
+      "./components/hds/advanced-table/th-button-expand.js": "./dist/_app_/components/hds/advanced-table/th-button-expand.js",
+      "./components/hds/advanced-table/th-button-sort.js": "./dist/_app_/components/hds/advanced-table/th-button-sort.js",
+      "./components/hds/advanced-table/th-button-tooltip.js": "./dist/_app_/components/hds/advanced-table/th-button-tooltip.js",
+      "./components/hds/advanced-table/th-selectable.js": "./dist/_app_/components/hds/advanced-table/th-selectable.js",
+      "./components/hds/advanced-table/th-sort.js": "./dist/_app_/components/hds/advanced-table/th-sort.js",
+      "./components/hds/advanced-table/th.js": "./dist/_app_/components/hds/advanced-table/th.js",
+      "./components/hds/advanced-table/tr.js": "./dist/_app_/components/hds/advanced-table/tr.js",
       "./components/hds/alert/description.js": "./dist/_app_/components/hds/alert/description.js",
       "./components/hds/alert/index.js": "./dist/_app_/components/hds/alert/index.js",
       "./components/hds/alert/title.js": "./dist/_app_/components/hds/alert/title.js",
@@ -156,6 +177,11 @@
       "./components/hds/code-block/description.js": "./dist/_app_/components/hds/code-block/description.js",
       "./components/hds/code-block/index.js": "./dist/_app_/components/hds/code-block/index.js",
       "./components/hds/code-block/title.js": "./dist/_app_/components/hds/code-block/title.js",
+      "./components/hds/code-editor/description.js": "./dist/_app_/components/hds/code-editor/description.js",
+      "./components/hds/code-editor/full-screen-button.js": "./dist/_app_/components/hds/code-editor/full-screen-button.js",
+      "./components/hds/code-editor/generic.js": "./dist/_app_/components/hds/code-editor/generic.js",
+      "./components/hds/code-editor/index.js": "./dist/_app_/components/hds/code-editor/index.js",
+      "./components/hds/code-editor/title.js": "./dist/_app_/components/hds/code-editor/title.js",
       "./components/hds/copy/button/index.js": "./dist/_app_/components/hds/copy/button/index.js",
       "./components/hds/copy/snippet/index.js": "./dist/_app_/components/hds/copy/snippet/index.js",
       "./components/hds/dialog-primitive/body.js": "./dist/_app_/components/hds/dialog-primitive/body.js",
@@ -301,6 +327,12 @@
       "./instance-initializers/load-sprite.js": "./dist/_app_/instance-initializers/load-sprite.js",
       "./modifiers/hds-anchored-position.js": "./dist/_app_/modifiers/hds-anchored-position.js",
       "./modifiers/hds-clipboard.js": "./dist/_app_/modifiers/hds-clipboard.js",
+      "./modifiers/hds-code-editor.js": "./dist/_app_/modifiers/hds-code-editor.js",
+      "./modifiers/hds-code-editor/highlight-styles/hds-dark-highlight-style.js": "./dist/_app_/modifiers/hds-code-editor/highlight-styles/hds-dark-highlight-style.js",
+      "./modifiers/hds-code-editor/languages/sentinel.js": "./dist/_app_/modifiers/hds-code-editor/languages/sentinel.js",
+      "./modifiers/hds-code-editor/palettes/hds-dark-palette.js": "./dist/_app_/modifiers/hds-code-editor/palettes/hds-dark-palette.js",
+      "./modifiers/hds-code-editor/themes/hds-dark-theme.js": "./dist/_app_/modifiers/hds-code-editor/themes/hds-dark-theme.js",
+      "./modifiers/hds-code-editor/types.js": "./dist/_app_/modifiers/hds-code-editor/types.js",
       "./modifiers/hds-register-event.js": "./dist/_app_/modifiers/hds-register-event.js",
       "./modifiers/hds-tooltip.js": "./dist/_app_/modifiers/hds-tooltip.js",
       "./services/hds-time.js": "./dist/_app_/services/hds-time.js"
@@ -330,6 +362,6 @@
     "dist"
   ],
   "engines": {
-    "node": "16.* || >= 18"
+    "node": ">= 18"
   }
 }

package/dist/_rollupPluginBabelHelpers-81503waH.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_rollupPluginBabelHelpers-81503waH.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}