@hashicorp/design-system-components 3.4.0 → 3.5.0

package/CHANGELOG.md

@@ -1,5 +1,69 @@
 # @hashicorp/design-system-components
 
+## 3.5.0
+
+### Minor Changes
+
+`IconTile` - updated component adding support for `vault-radar` product
+
+<small class="doc-whats-new-changelog-metadata">[#1904](https://github.com/hashicorp/design-system/pull/1904)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+### Patch Changes
+
+`SideNav::List::Title`, `SideNav::List::BackLink`, `SideNav::List::Link`: fixed issue with long text strings without spaces not wrapping
+
+<small class="doc-whats-new-changelog-metadata">[#1899](https://github.com/hashicorp/design-system/pull/1899)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+Added `hds-` prefix to Sass variables for component styles (where missing).
+
+<small class="doc-whats-new-changelog-metadata">[#1903](https://github.com/hashicorp/design-system/pull/1903)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+`Tabs` - removed `@cached` decorator and the associated `ember-cached-decorator-polyfill`
+
+<small class="doc-whats-new-changelog-metadata">[#1905](https://github.com/hashicorp/design-system/pull/1905)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+`CodeBlock` - Fixed the default token color in the syntax highlighting theme.
+
+<small class="doc-whats-new-changelog-metadata">[#1893](https://github.com/hashicorp/design-system/pull/1893)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+**🔄 Updated dependencies:**
+
+- @hashicorp/design-system-tokens@1.10.0
+- @hashicorp/ember-flight-icons@4.0.6
+
+## 3.4.1
+
+### Patch Changes
+
+`Modal` - Removed `close` event listener on destroy
+`Flyout` - Removed `close` event listener on destroy
+
+<small class="doc-whats-new-changelog-metadata">[#1887](https://github.com/hashicorp/design-system/pull/1887)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+`CodeBlock` - Fixed issues with dynamic content, compile warning, and line number alignment
+
+<small class="doc-whats-new-changelog-metadata">[#1853](https://github.com/hashicorp/design-system/pull/1853)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+`SegmentedGroup` - Fixed issue with border-radius of single child element being overridden
+
+<small class="doc-whats-new-changelog-metadata">[#1892](https://github.com/hashicorp/design-system/pull/1892)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
 ## 3.4.0
 
 ### Minor Changes
@@ -18,7 +82,7 @@
 
 ### Patch Changes
 
-`Hds::AppFooter` - Changed visual alignment from right-aligned to centered.
+`AppFooter` - Changed visual alignment from right-aligned to centered.
 
 <small class="doc-whats-new-changelog-metadata">[#1867](https://github.com/hashicorp/design-system/pull/1867)</small>
 
@@ -56,11 +120,11 @@
 
 ### Minor Changes
 
-`Hds::Form::CharacterCount` - Added new component
-`Hds::Form::Field` - Added `CharacterCount` contextual component
-`Hds::Form::MaskedInput::Field` - Added `CharacterCount` contextual component
-`Hds::Form::TextInput::Field` - Added `CharacterCount` contextual component
-`Hds::Form::Textarea::Field` - Added `CharacterCount` contextual component
+`Form::CharacterCount` - Added new component
+`Form::Field` - Added `CharacterCount` contextual component
+`Form::MaskedInput::Field` - Added `CharacterCount` contextual component
+`Form::TextInput::Field` - Added `CharacterCount` contextual component
+`Form::Textarea::Field` - Added `CharacterCount` contextual component
 
 <small class="doc-whats-new-changelog-metadata">[#1802](https://github.com/hashicorp/design-system/pull/1802)</small>
 
@@ -68,11 +132,11 @@
 
 ### Patch Changes
 
-`Button` - updated DOM structure to contain only `span` elements
+`Button` - Updated DOM structure to contain only `span` elements
 
-`Dropdown` - updated button elements DOM structure to contain only `span` elements
+`Dropdown` - Updated button elements DOM structure to contain only `span` elements
 
-`Link::Standalone` - updated DOM structure to contain only `span` elements
+`Link::Standalone` - Updated DOM structure to contain only `span` elements
 
 <small class="doc-whats-new-changelog-metadata">[#1840](https://github.com/hashicorp/design-system/pull/1840)</small>
 
@@ -88,9 +152,9 @@
 
 <div class="doc-whats-new-changelog-separator"></div>
 
-`Hds::Table` - updated `@columns` object to support `isVisuallyHidden` argument
+`Table` - Updated `@columns` object to support `isVisuallyHidden` argument
 
-- `Hds::Table::Th` - updated to support `isVisuallyHidden` argument
+- `Table::Th` - Updated to support `isVisuallyHidden` argument
 
 <small class="doc-whats-new-changelog-metadata">[#1819](https://github.com/hashicorp/design-system/pull/1819)</small>
 
@@ -199,7 +263,7 @@ Upgraded the following dependencies:
 
 ### Patch Changes
 
-explicitly added `ember-element-helper` as dependency for the `components` package
+Explicitly added `ember-element-helper` as dependency for the `components` package
 
 <small class="doc-whats-new-changelog-metadata">[#1751](https://github.com/hashicorp/design-system/pull/1751)</small>
 
@@ -217,33 +281,33 @@ explicitly added `ember-element-helper` as dependency for the `components` packa
 
 ### Major Changes
 
-Drop support for Node 14
+Dropped support for Node 14
 
 <small class="doc-whats-new-changelog-metadata">[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
 
 <div class="doc-whats-new-changelog-separator"></div>
 
-`Hds::Form::VisibilityToggle` - Added component as a form base element
+`Form::VisibilityToggle` - Added component as a form base element
 
-`Hds::Form::TextInput::Field` - Added `Hds::Form::VisibilityToggle` to password inputs (controlled via `@hasVisibilityToggle` - Notice that this is set to be visible by default now)
+`Form::TextInput::Field` - Added `Form::VisibilityToggle` to password inputs (controlled via `@hasVisibilityToggle` - Notice that this is set to be visible by default now)
 
-`Hds::Form::MaskedInput` - Refactored to use `Hds::Form::VisibilityToggle`
+`Form::MaskedInput` - Refactored to use `Form::VisibilityToggle`
 
-`Hds::Form::MaskedInput` - Renamed `@isMasked` to `@isContentMasked`
+`Form::MaskedInput` - Renamed `@isMasked` to `@isContentMasked`
 
 To migrate:
 
-- in `Hds::Form::MaskedInput` instances replace `@isMasked` arguments with `@isContentMasked`
+- in `Form::MaskedInput` instances replace `@isMasked` arguments with `@isContentMasked`
 
 <small class="doc-whats-new-changelog-metadata">[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
 
 <div class="doc-whats-new-changelog-separator"></div>
 
-`Hds::Dropdown` – Removed `@listPosition` `left` and `right` (use `bottom-left` and `bottom-right`, respectively).
+`Dropdown` – Removed `@listPosition` `left` and `right` (use `bottom-left` and `bottom-right`, respectively).
 
 To migrate:
 
-- in `Hds::Dropdown` instances:
+- in `Dropdown` instances:
   - replace `@listPosition="left"` with `@listPosition="bottom-left"`
   - replace `@listPosition="right"` with `@listPosition="bottom-right"`
 
@@ -255,7 +319,7 @@ To migrate:
 
 To migrate:
 
-- rename all the `extraBefore/After` instances yielded within the `<Hds::SideNav>` component to `ExtraBefore/After`
+- rename all the `extraBefore/After` instances yielded within the `SideNav` component to `ExtraBefore/After`
 
 <small class="doc-whats-new-changelog-metadata">[#1634](https://github.com/hashicorp/design-system/pull/1634)</small>
 

package/addon/components/hds/code-block/index.hbs

@@ -9,19 +9,16 @@
     {{~yield (hash Description=(component "hds/code-block/description"))~}}
   </div>
   <div class="hds-code-block__body">
+    {{! content within pre tag is whitespace-sensitive; do not add new lines! }}
     <pre
       class="hds-code-block__code"
       {{style maxHeight=@maxHeight}}
       data-line={{@highlightLines}}
       id={{this.preCodeId}}
       tabindex="0"
-    >
-      {{~! ~}}
-      <code {{did-insert this.setPrismCode}} {{did-update this.setPrismCode this.code @language}}>
+    ><code {{did-insert this.setPrismCode}} {{did-update this.setPrismCode this.code @language}}>
         {{~this.prismCode~}}
-      </code>
-      {{~! ~}}
-    </pre>
+      </code></pre>
 
     {{#if @hasCopyButton}}
       <Hds::CodeBlock::CopyButton @targetToCopy="#{{this.preCodeId}}" aria-describedby={{this.preCodeId}} />

package/addon/components/hds/code-block/index.js

@@ -7,6 +7,7 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { assert } from '@ember/debug';
+import { next, schedule } from '@ember/runloop';
 import { htmlSafe } from '@ember/template';
 import { guidFor } from '@ember/object/internals';
 
@@ -107,27 +108,30 @@ export default class HdsCodeBlockIndexComponent extends Component {
     const grammar = Prism.languages[language];
 
     if (code) {
-      if (language && grammar) {
-        this.prismCode = htmlSafe(Prism.highlight(code, grammar, language));
-      } else {
-        this.prismCode = htmlSafe(Prism.util.encode(code));
-      }
-
-      // Force prism-line-numbers plugin initialization, required for Prism.highlight usage
-      // See https://github.com/PrismJS/prism/issues/1234
-      Prism.hooks.run('complete', {
-        code,
-        element,
+      next(() => {
+        if (language && grammar) {
+          this.prismCode = htmlSafe(Prism.highlight(code, grammar, language));
+        } else {
+          this.prismCode = htmlSafe(Prism.util.encode(code));
+        }
+
+        // Force prism-line-numbers plugin initialization, required for Prism.highlight usage
+        // See https://github.com/PrismJS/prism/issues/1234
+        Prism.hooks.run('complete', {
+          code,
+          element,
+        });
+
+        // Force prism-line-highlight plugin initialization
+        // Context: https://github.com/hashicorp/design-system/pull/1749#discussion_r1374288785
+        if (this.args.highlightLines) {
+          // we need to delay re-evaluating the context for prism-line-highlight for as much as possible, and `afterRender` is the 'latest' we can use in the component lifecycle
+          schedule('afterRender', () => {
+            // we piggy-back on the plugin's `resize` event listener to trigger a new call of the `highlightLines` function: https://github.com/PrismJS/prism/blob/master/plugins/line-highlight/prism-line-highlight.js#L337
+            if (window) window.dispatchEvent(new Event('resize'));
+          });
+        }
       });
-
-      // Force prism-line-highlight plugin initialization
-      // Context: https://github.com/hashicorp/design-system/pull/1749#discussion_r1374288785
-      if (this.args.highlightLines) {
-        setTimeout(() => {
-          // we piggy-back on the plugin's `resize` event listener to trigger a new call of the `highlightLines` function: https://github.com/PrismJS/prism/blob/master/plugins/line-highlight/prism-line-highlight.js#L337
-          if (window) window.dispatchEvent(new Event('resize'));
-        }, 100);
-      }
     }
   }
 

package/addon/components/hds/flyout/index.hbs

@@ -7,6 +7,7 @@
   ...attributes
   aria-labelledby={{this.id}}
   {{did-insert this.didInsert}}
+  {{will-destroy this.willDestroyNode}}
   {{focus-trap isActive=this.isOpen focusTrapOptions=(hash onDeactivate=this.onDismiss clickOutsideDeactivates=true)}}
 >
   {{yield (hash Header=(component "hds/flyout/header" id=this.id onDismiss=this.onDismiss))}}

package/addon/components/hds/flyout/index.js

@@ -67,6 +67,14 @@ export default class HdsFlyoutIndexComponent extends Component {
     return classes.join(' ');
   }
 
+  @action registerOnCloseCallback() {
+    if (this.args.onClose && typeof this.args.onClose === 'function') {
+      this.args.onClose();
+    }
+
+    this.isOpen = false;
+  }
+
   @action
   didInsert(element) {
     // Store references of `<dialog>` and `<body>` elements
@@ -94,13 +102,7 @@ export default class HdsFlyoutIndexComponent extends Component {
     }
 
     // Register "onClose" callback function to be called when a native 'close' event is dispatched
-    this.element.addEventListener('close', () => {
-      if (this.args.onClose && typeof this.args.onClose === 'function') {
-        this.args.onClose();
-      }
-
-      this.isOpen = false;
-    });
+    this.element.addEventListener('close', this.registerOnCloseCallback, true);
 
     // If the flyout dialog is not already open
     if (!this.element.open) {
@@ -108,6 +110,17 @@ export default class HdsFlyoutIndexComponent extends Component {
     }
   }
 
+  @action
+  willDestroyNode() {
+    if (this.element) {
+      this.element.removeEventListener(
+        'close',
+        this.registerOnCloseCallback,
+        true
+      );
+    }
+  }
+
   @action
   open() {
     // Make flyout dialog visible using the native `showModal` method

package/addon/components/hds/icon-tile/index.js

@@ -19,6 +19,7 @@ export const PRODUCTS = [
   'vagrant',
   'vault',
   'vault-secrets',
+  'vault-radar',
   'waypoint',
 ];
 export const COLORS = ['neutral', ...PRODUCTS];

package/addon/components/hds/modal/index.hbs

@@ -7,6 +7,7 @@
   ...attributes
   aria-labelledby={{this.id}}
   {{did-insert this.didInsert}}
+  {{will-destroy this.willDestroyNode}}
   {{focus-trap isActive=this.isOpen focusTrapOptions=(hash onDeactivate=this.onDismiss clickOutsideDeactivates=true)}}
 >
   {{yield (hash Header=(component "hds/modal/header" id=this.id onDismiss=this.onDismiss))}}

package/addon/components/hds/modal/index.js

@@ -93,6 +93,29 @@ export default class HdsModalIndexComponent extends Component {
     return classes.join(' ');
   }
 
+  @action registerOnCloseCallback() {
+    if (
+      !this.isDismissDisabled &&
+      this.args.onClose &&
+      typeof this.args.onClose === 'function'
+    ) {
+      this.args.onClose();
+    }
+
+    // If the dismissal of the modal is disabled, we keep the modal open/visible otherwise we mark it as closed
+    if (this.isDismissDisabled) {
+      // If, in a chain of events, the element is not attached to the DOM, the `showModal` would fail
+      // so we add this safeguard condition that checks for the `<dialog>` to have a parent
+      if (this.element.parentElement) {
+        // As there is no way to `preventDefault` on `close` events, we call the `showModal` function
+        // preserving the state of the modal dialog
+        this.element.showModal();
+      }
+    } else {
+      this.isOpen = false;
+    }
+  }
+
   @action
   didInsert(element) {
     // Store references of `<dialog>` and `<body>` elements
@@ -120,28 +143,7 @@ export default class HdsModalIndexComponent extends Component {
     }
 
     // Register "onClose" callback function to be called when a native 'close' event is dispatched
-    this.element.addEventListener('close', () => {
-      if (
-        !this.isDismissDisabled &&
-        this.args.onClose &&
-        typeof this.args.onClose === 'function'
-      ) {
-        this.args.onClose();
-      }
-
-      // If the dismissal of the modal is disabled, we keep the modal open/visible otherwise we mark it as closed
-      if (this.isDismissDisabled) {
-        // If, in a chain of events, the element is not attached to the DOM, the `showModal` would fail
-        // so we add this safeguard condition that checks for the `<dialog>` to have a parent
-        if (this.element.parentElement) {
-          // As there is no way to `preventDefault` on `close` events, we call the `showModal` function
-          // preserving the state of the modal dialog
-          this.element.showModal();
-        }
-      } else {
-        this.isOpen = false;
-      }
-    });
+    this.element.addEventListener('close', this.registerOnCloseCallback, true);
 
     // If the modal dialog is not already open
     if (!this.element.open) {
@@ -149,6 +151,17 @@ export default class HdsModalIndexComponent extends Component {
     }
   }
 
+  @action
+  willDestroyNode() {
+    if (this.element) {
+      this.element.removeEventListener(
+        'close',
+        this.registerOnCloseCallback,
+        true
+      );
+    }
+  }
+
   @action
   open() {
     // Make modal dialog visible using the native `showModal` method

package/addon/components/hds/tabs/panel.js

@@ -4,7 +4,6 @@
  */
 
 import Component from '@glimmer/component';
-import { cached } from '@glimmer/tracking';
 import { guidFor } from '@ember/object/internals';
 import { action } from '@ember/object';
 
@@ -15,7 +14,6 @@ export default class HdsTabsPanelComponent extends Component {
    */
   panelId = 'panel-' + guidFor(this);
 
-  @cached
   get nodeIndex() {
     return this.args.panelIds
       ? this.args.panelIds.indexOf(this.panelId)

package/addon/components/hds/tabs/tab.js

@@ -4,7 +4,6 @@
  */
 
 import Component from '@glimmer/component';
-import { cached } from '@glimmer/tracking';
 import { guidFor } from '@ember/object/internals';
 import { action } from '@ember/object';
 
@@ -15,7 +14,6 @@ export default class HdsTabsTabComponent extends Component {
    */
   tabId = 'tab-' + guidFor(this);
 
-  @cached
   get nodeIndex() {
     return this.args.tabIds ? this.args.tabIds.indexOf(this.tabId) : undefined;
   }

package/app/styles/components/accordion.scss

@@ -10,8 +10,8 @@
 @use "../mixins/button" as *;
 @use "../mixins/focus-ring" as *;
 
-$accordion-item-padding: 16px;
-$accordion-item-border-radius: 6px;
+$hds-accordion-item-padding: 16px;
+$hds-accordion-item-border-radius: 6px;
 
 // ACCORDION COMPONENT (wrapper)
 
@@ -25,7 +25,7 @@ $accordion-item-border-radius: 6px;
 
 .hds-accordion-item {
   background: var(--token-color-surface-primary);
-  border-radius: $accordion-item-border-radius;
+  border-radius: $hds-accordion-item-border-radius;
 
   &.hds-accordion-item--does-not-contain-interactive {
     box-shadow: var(--token-surface-mid-box-shadow);
@@ -49,9 +49,9 @@ $accordion-item-border-radius: 6px;
   gap: 12px;
   align-items: center;
   padding:
-    $accordion-item-padding
-    $accordion-item-padding
-    $accordion-item-padding
+    $hds-accordion-item-padding
+    $hds-accordion-item-padding
+    $hds-accordion-item-padding
     12px; // by design
 }
 
@@ -73,7 +73,7 @@ $accordion-item-border-radius: 6px;
     &::after {
       position: absolute;
       display: block;
-      border-radius: $accordion-item-border-radius;
+      border-radius: $hds-accordion-item-border-radius;
       content: "";
       inset: 0;
     }
@@ -116,5 +116,5 @@ $accordion-item-border-radius: 6px;
 // CONTENT BLOCK
 
 .hds-accordion-item__content {
-  padding: 4px $accordion-item-padding $accordion-item-padding $accordion-item-padding;
+  padding: 4px $hds-accordion-item-padding $hds-accordion-item-padding $hds-accordion-item-padding;
 }

package/app/styles/components/app-footer.scss

@@ -7,13 +7,13 @@
 // app-footer
 //
 
-$app-footer-gap: 24px;
-$app-footer-icon-text-gap: 6px;
+$hds-app-footer-gap: 24px;
+$hds-app-footer-icon-text-gap: 6px;
 
 .hds-app-footer {
   display: flex;
   flex-wrap: wrap;
-  gap: $app-footer-gap;
+  gap: $hds-app-footer-gap;
   justify-content: center;
   padding: 24px;
   color: var(--app-footer-foreground-color);
@@ -29,7 +29,7 @@ $app-footer-icon-text-gap: 6px;
 .hds-app-footer__legal-links {
   display: flex;
   flex-wrap: wrap;
-  gap: $app-footer-gap;
+  gap: $hds-app-footer-gap;
   align-items: center;
   justify-content: center;
   width: fit-content;
@@ -42,7 +42,7 @@ $app-footer-icon-text-gap: 6px;
 .hds-app-footer__status-link {
   // custom spacing for the status link (internally is using the "AppFooter::Link")
   // Note: we increase specificity because otherwise is overwritten by the order of imports of components scss files
-  &.hds-link-inline--icon-leading > .hds-link-inline__icon { margin-right: $app-footer-icon-text-gap; }
+  &.hds-link-inline--icon-leading > .hds-link-inline__icon { margin-right: $hds-app-footer-icon-text-gap; }
 
   .flight-icon {
     fill: var(--hds-app-footer-status-icon-color, currentColor);
@@ -98,7 +98,7 @@ $app-footer-icon-text-gap: 6px;
 
 .hds-app-footer__copyright {
   display: flex;
-  gap: $app-footer-icon-text-gap;
+  gap: $hds-app-footer-icon-text-gap;
   align-items: center;
   color: var(--app-footer-copyright-text-color);
 

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

@@ -26,7 +26,7 @@ $hds-badge-count-border-width: 1px;
 // SIZE
 
 // these values later may come from the design tokens
-$size-props: (
+$hds-badge-count-size-props: (
   "small": (
     "font-size": 0.8125rem, // 13px
     "height": 1.25rem,
@@ -52,11 +52,11 @@ $size-props: (
 
 @each $size in $hds-badge-count-sizes {
   .hds-badge-count--size-#{$size} {
-    min-height: map-get($size-props, $size, "height");
-    padding: calc(#{map-get($size-props, $size, "padding-vertical")} - #{$hds-badge-count-border-width}) calc(#{map-get($size-props, $size, "padding-horizontal")} - #{$hds-badge-count-border-width});
-    font-size: map-get($size-props, $size, "font-size");
-    line-height: map-get($size-props, $size, "line-height");
-    border-radius: math.div(map-get($size-props, $size, "height"), 2);
+    min-height: map-get($hds-badge-count-size-props, $size, "height");
+    padding: calc(#{map-get($hds-badge-count-size-props, $size, "padding-vertical")} - #{$hds-badge-count-border-width}) calc(#{map-get($hds-badge-count-size-props, $size, "padding-horizontal")} - #{$hds-badge-count-border-width});
+    font-size: map-get($hds-badge-count-size-props, $size, "font-size");
+    line-height: map-get($hds-badge-count-size-props, $size, "line-height");
+    border-radius: math.div(map-get($hds-badge-count-size-props, $size, "height"), 2);
   }
 }
 

package/app/styles/components/badge.scss

@@ -37,7 +37,7 @@ $hds-badge-border-width: 1px;
 // SIZE
 
 // these values later may come from the design tokens
-$size-props: (
+$hds-badge-size-props: (
   "small": (
     "font-size": 0.8125rem, // 13px
     "gap": 0.25rem,
@@ -69,18 +69,18 @@ $size-props: (
 
 @each $size in $hds-badge-sizes {
   .hds-badge--size-#{$size} {
-    gap: map-get($size-props, $size, "gap");
-    min-height: map-get($size-props, $size, "height");
-    padding: calc(#{map-get($size-props, $size, "padding-vertical")} - #{$hds-badge-border-width}) calc(#{map-get($size-props, $size, "padding-horizontal")} - #{$hds-badge-border-width});
+    gap: map-get($hds-badge-size-props, $size, "gap");
+    min-height: map-get($hds-badge-size-props, $size, "height");
+    padding: calc(#{map-get($hds-badge-size-props, $size, "padding-vertical")} - #{$hds-badge-border-width}) calc(#{map-get($hds-badge-size-props, $size, "padding-horizontal")} - #{$hds-badge-border-width});
 
     .hds-badge__icon {
-      width: map-get($size-props, $size, "icon-size");
-      height: map-get($size-props, $size, "icon-size");
+      width: map-get($hds-badge-size-props, $size, "icon-size");
+      height: map-get($hds-badge-size-props, $size, "icon-size");
     }
 
     .hds-badge__text {
-      font-size: map-get($size-props, $size, "font-size");
-      line-height: map-get($size-props, $size, "line-height");
+      font-size: map-get($hds-badge-size-props, $size, "font-size");
+      line-height: map-get($hds-badge-size-props, $size, "line-height");
     }
   }
 }

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

@@ -14,8 +14,8 @@
 @import "theme";
 
 // DIMENSIONS
-$code-block-line-numbers-width: 49px; // 3em ≈ 49px
-$code-block-code-padding: 16px;
+$hds-code-block-line-numbers-width: 49px; // 3em ≈ 49px
+$hds-code-block-code-padding: 16px;
 
 // CODE-BLOCK PARENT/WRAPPER
 
@@ -73,7 +73,7 @@ $code-block-code-padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 4px;
-  padding: 8px $code-block-code-padding;
+  padding: 8px $hds-code-block-code-padding;
   background-color: var(--hds-code-block-color-surface-faint);
   border-bottom: 1px solid var(--hds-code-block-color-border-primary);
   border-top-left-radius: inherit;
@@ -128,10 +128,10 @@ $code-block-code-padding: 16px;
   @include hds-focus-ring-basic();
   display: block;
   margin: 0;
-  padding: $code-block-code-padding;
+  padding: $hds-code-block-code-padding;
   overflow: auto;
   font-size: 0.8125rem;
-  font-family: var(--hds-typography-code-200);
+  font-family: var(--token-typography-code-200-font-family);
   border-radius: inherit;
 
   ::selection {
@@ -191,16 +191,16 @@ $code-block-code-padding: 16px;
     .hds-code-block__code {
       position: relative;
       // reserve space for line numbers
-      padding-left: calc(#{$code-block-line-numbers-width} + #{$code-block-code-padding});
+      padding-left: calc(#{$hds-code-block-line-numbers-width} + #{$hds-code-block-code-padding});
     }
 
     .line-numbers-rows {
       position: absolute;
       top: 0;
       left: 0;
-      min-width: $code-block-line-numbers-width;
+      min-width: $hds-code-block-line-numbers-width;
       min-height: 100%;
-      padding: $code-block-code-padding 0;
+      padding: $hds-code-block-code-padding 0;
       border-right: 1px solid var(--hds-code-block-color-border-primary);
       user-select: none;
       pointer-events: none;
@@ -211,7 +211,7 @@ $code-block-code-padding: 16px;
 
         &::before {
           display: block;
-          padding-right: $code-block-code-padding;
+          padding-right: $hds-code-block-code-padding;
           text-align: right;
           content: counter(linenumber);
         }

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

@@ -50,7 +50,7 @@
 
   // Syntax highlighting tokens:
   // general ----
-  --hds-code-block-color-token: var(--hds-code-block-color-green);
+  --hds-code-block-color-token: var(--hds-code-block-color-foreground-primary);
   // specific ----
   --hds-code-block-color-atrule: var(--hds-code-block-color-blue);
   --hds-code-block-color-code-block-attr-name: var(--hds-code-block-color-blue);

package/app/styles/components/form/toggle.scss

@@ -88,17 +88,17 @@
 
   &::before {
     // notice: to avoid too many nested calc() operation, we have decided to compute directly the values in Sass
-    $outline-width: 3px;
-    $outline-offset: 1px;
-    $shift: $outline-width + $outline-offset + 1px; // here 1px refers to "--token-form-radio-border-width"
+    $hds-outline-width: 3px;
+    $hds-outline-offset: 1px;
+    $hds-shift: $hds-outline-width + $hds-outline-offset + 1px; // here 1px refers to "--token-form-radio-border-width"
     position: absolute;
-    top: -$shift;
-    right: -$shift;
-    bottom: -$shift;
-    left: -$shift;
+    top: -$hds-shift;
+    right: -$hds-shift;
+    bottom: -$hds-shift;
+    left: -$hds-shift;
     margin: auto;
-    border-width: $outline-width;
-    border-radius: calc(var(--token-form-toggle-height) / 2 + $outline-width + $outline-offset);
+    border-width: $hds-outline-width;
+    border-radius: calc(var(--token-form-toggle-height) / 2 + $hds-outline-width + $hds-outline-offset);
     content: "";
   }
 
@@ -116,8 +116,8 @@
     background-color: var(--token-form-control-checked-surface-color-default);
 
     &::after {
-      $translation: calc(var(--token-form-toggle-width) - var(--token-form-toggle-thumb-size));
-      transform: translate3d($translation, 0, 0);
+      $hds-translation: calc(var(--token-form-toggle-width) - var(--token-form-toggle-thumb-size));
+      transform: translate3d($hds-translation, 0, 0);
     }
   }
 

package/app/styles/components/icon-tile.scss

@@ -9,7 +9,7 @@
 
 $hds-icon-tile-sizes: ( "small", "medium", "large" );
 $hds-icon-tile-types: ( "object","resource","logo" );
-$hds-icon-tile-colors-products: ( "boundary", "consul", "hcp", "nomad", "packer", "terraform", "vagrant", "vault", "vault-secrets", "waypoint" );
+$hds-icon-tile-colors-products: ( "boundary", "consul", "hcp", "nomad", "packer", "terraform", "vagrant", "vault", "vault-secrets", "vault-radar", "waypoint" );
 $hds-icon-tile-border-width: 1px;
 $hds-icon-tile-box-shadow: 0 1px 1px rgba(#656a76, 0.05);
 
@@ -48,7 +48,7 @@ $hds-icon-tile-box-shadow: 0 1px 1px rgba(#656a76, 0.05);
 // SIZE
 
 // these values later may come from the design tokens
-$size-props: (
+$hds-icon-tile-size-props: (
   "small": (
     "size": 1.75rem, // 28px
     "border-radius": 5px,
@@ -80,29 +80,29 @@ $size-props: (
 
 @each $size in $hds-icon-tile-sizes {
   .hds-icon-tile--size-#{$size} {
-    width: map-get($size-props, $size, "size");
-    height: map-get($size-props, $size, "size");
-    border-radius: map-get($size-props, $size, "border-radius");
+    width: map-get($hds-icon-tile-size-props, $size, "size");
+    height: map-get($hds-icon-tile-size-props, $size, "size");
+    border-radius: map-get($hds-icon-tile-size-props, $size, "border-radius");
 
     .hds-icon-tile__icon {
-      width: map-get($size-props, $size, "icon-size");
-      height: map-get($size-props, $size, "icon-size");
+      width: map-get($hds-icon-tile-size-props, $size, "icon-size");
+      height: map-get($hds-icon-tile-size-props, $size, "icon-size");
     }
 
     .hds-icon-tile__logo {
-      width: map-get($size-props, $size, "logo-size");
-      height: map-get($size-props, $size, "logo-size");
+      width: map-get($hds-icon-tile-size-props, $size, "logo-size");
+      height: map-get($hds-icon-tile-size-props, $size, "logo-size");
     }
 
     .hds-icon-tile__extra {
-      width: map-get($size-props, $size, "extra-size");
-      height: map-get($size-props, $size, "extra-size");
-      border-radius: map-get($size-props, $size, "extra-border-radius");
+      width: map-get($hds-icon-tile-size-props, $size, "extra-size");
+      height: map-get($hds-icon-tile-size-props, $size, "extra-size");
+      border-radius: map-get($hds-icon-tile-size-props, $size, "extra-border-radius");
     }
 
     .hds-icon-tile__extra-icon {
-      width: map-get($size-props, $size, "extra-icon-size");
-      height: map-get($size-props, $size, "extra-icon-size");
+      width: map-get($hds-icon-tile-size-props, $size, "extra-icon-size");
+      height: map-get($hds-icon-tile-size-props, $size, "extra-icon-size");
     }
   }
 }

package/app/styles/components/link/standalone.scss

@@ -46,7 +46,7 @@ $hds-link-standalone-border-width: 1px;
 // SIZE
 
 // these values later may come from the design tokens
-$size-props: (
+$hds-link-standalone-size-props: (
   "small": (
     "font-size": 0.8125rem, // 13px;
     "icon-size": 0.75rem, // 12px
@@ -67,13 +67,13 @@ $size-props: (
 @each $size in $hds-link-standalone-sizes {
   .hds-link-standalone--size-#{$size} {
     .hds-link-standalone__icon {
-      width: map-get($size-props, $size, "icon-size");
-      height: map-get($size-props, $size, "icon-size");
+      width: map-get($hds-link-standalone-size-props, $size, "icon-size");
+      height: map-get($hds-link-standalone-size-props, $size, "icon-size");
     }
 
     .hds-link-standalone__text {
-      font-size: map-get($size-props, $size, "font-size");
-      line-height: map-get($size-props, $size, "line-height");
+      font-size: map-get($hds-link-standalone-size-props, $size, "font-size");
+      line-height: map-get($hds-link-standalone-size-props, $size, "line-height");
     }
   }
 }
@@ -139,19 +139,19 @@ $hds-link-standalone-focus-shift: 4px;
 .hds-link-standalone {
   // the position absolute of an element is computed from the inside of the border of the container
   // so we have to take in account the border width of the pseudo-element container itself
-  $shift: $hds-link-standalone-focus-shift + $hds-link-standalone-border-width;
+  $hds-shift: $hds-link-standalone-focus-shift + $hds-link-standalone-border-width;
   // for visual/optical balance we add an extra 2px to the "shift" near the text (opposite the icon)
-  $shift-extra: $shift + 2px;
+  $hds-shift-extra: $hds-shift + 2px;
 
   // notice: this is used not only for the focus, but also to increase the clickable area
-  @include hds-focus-ring-with-pseudo-element($right: -$shift, $left: -$shift, $radius: $hds-link-standalone-focus-border-radius);
+  @include hds-focus-ring-with-pseudo-element($right: -$hds-shift, $left: -$hds-shift, $radius: $hds-link-standalone-focus-border-radius);
 
   // we need to override a couple of values for better visual alignment
   &.hds-link-standalone--icon-position-leading::before {
-    right: -$shift-extra;
+    right: -$hds-shift-extra;
   }
 
   &.hds-link-standalone--icon-position-trailing::before {
-    left: -$shift-extra;
+    left: -$hds-shift-extra;
   }
 }

package/app/styles/components/pagination.scss

@@ -12,7 +12,7 @@
 // custom breakpoint for the pagination, swapping between horizontal and stacked layout
 // notice: the value is based on where the component layout potentially breaks down
 
-$pagination-layout-breakpoint: 1000px;
+$hds-pagination-layout-breakpoint: 1000px;
 
 
 // * Pagination Parent (wrapper) component
@@ -26,7 +26,7 @@ $pagination-layout-breakpoint: 1000px;
   align-items: center;
   margin: 0 auto;
 
-  @media screen and (max-width: $pagination-layout-breakpoint) {
+  @media screen and (max-width: $hds-pagination-layout-breakpoint) {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
@@ -38,7 +38,7 @@ $pagination-layout-breakpoint: 1000px;
     justify-self: flex-start;
     margin-right: var(--token-pagination-child-spacing-horizontal);
 
-    @media screen and (max-width: $pagination-layout-breakpoint) {
+    @media screen and (max-width: $hds-pagination-layout-breakpoint) {
       margin-top: var(--token-pagination-child-spacing-vertical);
       margin-left: var(--token-pagination-child-spacing-horizontal);
     }
@@ -47,7 +47,7 @@ $pagination-layout-breakpoint: 1000px;
   .hds-pagination-nav {
     grid-area: nav;
 
-    @media screen and (max-width: $pagination-layout-breakpoint) {
+    @media screen and (max-width: $hds-pagination-layout-breakpoint) {
       justify-content: center;
       order: -1;
       // Force nav to occupy a full row so other components will wrap:
@@ -60,7 +60,7 @@ $pagination-layout-breakpoint: 1000px;
     justify-self: flex-end;
     margin-left: var(--token-pagination-child-spacing-horizontal);
 
-    @media screen and (max-width: $pagination-layout-breakpoint) {
+    @media screen and (max-width: $hds-pagination-layout-breakpoint) {
       margin-top: var(--token-pagination-child-spacing-vertical);
       margin-right: var(--token-pagination-child-spacing-horizontal);
     }

package/app/styles/components/segmented-group.scss

@@ -14,7 +14,7 @@
   > .hds-dropdown,
   > .hds-form-select,
   > .hds-form-text-input {
-    &:first-child {
+    &:first-child:not(:only-child) {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
 
@@ -26,7 +26,7 @@
       }
     }
 
-    &:last-child {
+    &:last-child:not(:only-child) {
       margin-left: -1px;
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
@@ -39,7 +39,7 @@
       }
     }
 
-    &:not(:first-child, :last-child) {
+    &:not(:first-child, :last-child, :only-child) {
       margin-left: -1px;
       border-radius: 0;
 

package/app/styles/components/side-nav/content.scss

@@ -40,12 +40,11 @@
 // (LIST) TITLE
 
 .hds-side-nav__list-title {
-  display: flex;
-  align-items: center;
   min-height: var(--token-side-nav-body-list-item-height);
   margin-top: var(--token-side-nav-body-list-margin-vertical);
   padding: 9px var(--token-side-nav-body-list-item-padding-horizontal); // 8px = (min-height - body-100-line-height) / 2
   color: var(--token-side-nav-color-foreground-faint);
+  overflow-wrap: break-word;
 
   // Remove margin from title at top of all list-items & lists
   .hds-side-nav__list-wrapper:first-child .hds-side-nav__list-item:first-child > & {
@@ -53,7 +52,6 @@
   }
 }
 
-
 // LIST (root elements)
 
 .hds-side-nav__list-wrapper, // <nav> element
@@ -147,8 +145,11 @@
 // LIST ITEM > INNER ELEMENTS
 
 .hds-side-nav__list-item-text {
+  min-width: 0;
+  max-width: 100%;
   color: var(--token-side-nav-color-foreground-primary);
   text-align: left;
+  overflow-wrap: break-word;
 }
 
 .hds-side-nav__list-item-icon-leading {

package/app/styles/components/stepper/step-indicator.scss

@@ -52,7 +52,7 @@ $hds-stepper-indicator-step-size: 24px;
 // Non-interactive (default)
 
 // Non-interactive props that correspond with status
-$non-interactive-props: (
+$hds-stepper-indicator-step-non-interactive-props: (
   "incomplete": (
     "text-color": var(--token-color-foreground-strong),
     "fill-color": var(--token-color-surface-faint),
@@ -79,12 +79,12 @@ $non-interactive-props: (
   // For each status of the non-interactive variant, set the text color, svg fill, and svg stroke colors based on $non-interactive-props
   .hds-stepper-indicator-step--status-#{$status} {
     .hds-stepper-indicator-step__status {
-      color: map-get($non-interactive-props, $status, "text-color");
+      color: map-get($hds-stepper-indicator-step-non-interactive-props, $status, "text-color");
     }
 
     .hds-stepper-indicator-step__svg-hexagon path {
-      fill: map-get($non-interactive-props, $status, "fill-color");
-      stroke: map-get($non-interactive-props, $status, "stroke-color");
+      fill: map-get($hds-stepper-indicator-step-non-interactive-props, $status, "fill-color");
+      stroke: map-get($hds-stepper-indicator-step-non-interactive-props, $status, "stroke-color");
     }
   }
 }
@@ -92,7 +92,7 @@ $non-interactive-props: (
 // Interactive
 
 // Determine states/status and corresponding styles
-$status-props: (
+$hds-stepper-indicator-step-status-props: (
   "incomplete": (
     "text-color-default": var(--token-color-foreground-primary),
     "fill-color-default": var(--token-color-surface-interactive),
@@ -135,27 +135,27 @@ $status-props: (
   cursor: pointer;
 
   @each $status in $hds-stepper-indicator-step-statuses {
-    // For each status set the text, svg fill, and svg stroke color based on $status-props
+    // For each status set the text, svg fill, and svg stroke color based on $hds-stepper-indicator-step-status-props
     &.hds-stepper-indicator-step--status-#{$status} {
       .hds-stepper-indicator-step__status {
-        color: map-get($status-props, $status, "text-color-default");
+        color: map-get($hds-stepper-indicator-step-status-props, $status, "text-color-default");
       }
 
       .hds-stepper-indicator-step__svg-hexagon path {
-        fill: map-get($status-props, $status, "fill-color-default");
-        stroke: map-get($status-props, $status, "stroke-color-default");
+        fill: map-get($hds-stepper-indicator-step-status-props, $status, "fill-color-default");
+        stroke: map-get($hds-stepper-indicator-step-status-props, $status, "stroke-color-default");
       }
 
       &:hover,
       &.mock-hover {
         .hds-stepper-indicator-step__status {
-          color: map-get($status-props, $status, "text-color-hover");
+          color: map-get($hds-stepper-indicator-step-status-props, $status, "text-color-hover");
         }
 
         .hds-stepper-indicator-step__svg-hexagon {
           path {
-            fill: map-get($status-props, $status, "fill-color-hover");
-            stroke: map-get($status-props, $status, "stroke-color-hover");
+            fill: map-get($hds-stepper-indicator-step-status-props, $status, "fill-color-hover");
+            stroke: map-get($hds-stepper-indicator-step-status-props, $status, "stroke-color-hover");
           }
         }
       }
@@ -163,13 +163,13 @@ $status-props: (
       &:active,
       &.mock-active {
         .hds-stepper-indicator-step__status {
-          color: map-get($status-props, $status, "text-color-active");
+          color: map-get($hds-stepper-indicator-step-status-props, $status, "text-color-active");
         }
 
         .hds-stepper-indicator-step__svg-hexagon {
           path {
-            fill: map-get($status-props, $status, "fill-color-active");
-            stroke: map-get($status-props, $status, "stroke-color-active");
+            fill: map-get($hds-stepper-indicator-step-status-props, $status, "fill-color-active");
+            stroke: map-get($hds-stepper-indicator-step-status-props, $status, "stroke-color-active");
           }
         }
       }

package/app/styles/components/stepper/task-indicator.scss

@@ -11,7 +11,7 @@ $hds-stepper-indicator-task-statuses: ( "incomplete", "progress", "processing",
 $hds-stepper-indicator-task-size: 16px;
 
 // Determine states and corresponding styles
-$status-props: (
+$hds-stepper-indicator-task-status-props: (
   "incomplete": (
     "color-default": var(--token-color-palette-neutral-300),
     "color-hover": var(--token-color-palette-blue-300),
@@ -54,18 +54,18 @@ $status-props: (
   cursor: pointer;
 
   @each $status in $hds-stepper-indicator-task-statuses {
-    // For each status set the icon color based on the $status-props
+    // For each status set the icon color based on the $hds-stepper-indicator-task-status-props
     &.hds-stepper-indicator-task--status-#{$status} {
-      color: map-get($status-props, $status, "color-default");
+      color: map-get($hds-stepper-indicator-task-status-props, $status, "color-default");
 
       &:hover,
       &.mock-hover {
-        color: map-get($status-props, $status, "color-hover");
+        color: map-get($hds-stepper-indicator-task-status-props, $status, "color-hover");
       }
 
       &:active,
       &.mock-active {
-        color: map-get($status-props, $status, "color-active");
+        color: map-get($hds-stepper-indicator-task-status-props, $status, "color-active");
       }
     }
   }

package/app/styles/mixins/_button.scss

@@ -9,7 +9,7 @@ $hds-button-border-width: 1px;
 $hds-button-focus-border-width: 3px;
 
 // these values later may come from the design tokens
-$size-props: (
+$hds-button-size-props: (
   "small": (
     "font-size": 0.8125rem, // 13px;
     "line-height": 0.875rem, // 14px - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)
@@ -273,24 +273,24 @@ $size-props: (
 @mixin hds-button-size-classes($blockName) {
   @each $size in $hds-button-sizes {
     .#{$blockName}--size-#{$size} {
-      min-height: map-get($size-props, $size, "min-height");
-      padding: map-get($size-props, $size, "padding-vertical") map-get($size-props, $size, "padding-horizontal");
+      min-height: map-get($hds-button-size-props, $size, "min-height");
+      padding: map-get($hds-button-size-props, $size, "padding-vertical") map-get($hds-button-size-props, $size, "padding-horizontal");
 
       .#{$blockName}__icon {
-        width: map-get($size-props, $size, "icon-size");
-        height: map-get($size-props, $size, "icon-size");
+        width: map-get($hds-button-size-props, $size, "icon-size");
+        height: map-get($hds-button-size-props, $size, "icon-size");
       }
 
       .#{$blockName}__text {
-        font-size: map-get($size-props, $size, "font-size");
-        line-height: map-get($size-props, $size, "line-height");
+        font-size: map-get($hds-button-size-props, $size, "font-size");
+        line-height: map-get($hds-button-size-props, $size, "line-height");
       }
 
       &.#{$blockName}--is-icon-only {
         // overrides to have the icon-only button squared
-        min-width: map-get($size-props, $size, "min-height");
-        padding-right: map-get($size-props, $size, "padding-vertical");
-        padding-left: map-get($size-props, $size, "padding-vertical");
+        min-width: map-get($hds-button-size-props, $size, "min-height");
+        padding-right: map-get($hds-button-size-props, $size, "padding-vertical");
+        padding-left: map-get($hds-button-size-props, $size, "padding-vertical");
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -43,12 +43,11 @@
     "@ember/render-modifiers": "^2.0.5",
     "@ember/string": "^3.1.1",
     "@ember/test-waiters": "^3.1.0",
-    "@hashicorp/design-system-tokens": "^1.9.0",
-    "@hashicorp/ember-flight-icons": "^4.0.5",
+    "@hashicorp/design-system-tokens": "^1.10.0",
+    "@hashicorp/ember-flight-icons": "^4.0.6",
     "dialog-polyfill": "^0.5.6",
     "ember-a11y-refocus": "^3.0.2",
     "ember-auto-import": "^2.6.3",
-    "ember-cached-decorator-polyfill": "^1.0.2",
     "ember-cli-babel": "^8.2.0",
     "ember-cli-htmlbars": "^6.3.0",
     "ember-cli-sass": "^11.0.1",