@hashicorp/design-system-components 2.7.0 → 2.8.0

package/CHANGELOG.md

@@ -1,5 +1,70 @@
 # @hashicorp/design-system-components
 
+## 2.8.0
+
+### Minor Changes
+
+- [#1492](https://github.com/hashicorp/design-system/pull/1492) [`a17e5b2ac`](https://github.com/hashicorp/design-system/commit/a17e5b2acf66493ccbb68a623a3b7ba2fd5ab5a8) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - `Card` - Updated default value of `@overflow` argument to `"visible"` to address an area of consumer confusion and better support the most common use cases.
+
+  Technically, this is a breaking change as it will require consumers relying upon the previous `hidden` default value to now manually set the value. The result of not setting the a `"hidden"` value can cause square edges of some images to "stick out" and overlap the rounded corners of the Card itself. We considered this to be a fairly minor, low-impact issue however which would not affect functionality or usability.
+
+- [#1452](https://github.com/hashicorp/design-system/pull/1452) [`c277d0366`](https://github.com/hashicorp/design-system/commit/c277d036673cf572c00ebf5b8b35b424c0b057fd) Thanks [@alex-ju](https://github.com/alex-ju)! - `Form::TextInput` - Add loading state on "search" type
+
+- [#1468](https://github.com/hashicorp/design-system/pull/1468) [`b0a766ccf`](https://github.com/hashicorp/design-system/commit/b0a766ccf5357dd6f0e8dfb68d8c1ee823e76b50) Thanks [@alex-ju](https://github.com/alex-ju)! - Added `MaskedInput` component for forms
+
+- [#1423](https://github.com/hashicorp/design-system/pull/1423) [`5ac340c8c`](https://github.com/hashicorp/design-system/commit/5ac340c8c3a3adab388704067578cf419e2e2f10) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - Add new `Accordion` component
+
+### Patch Changes
+
+- [#1466](https://github.com/hashicorp/design-system/pull/1466) [`cdda7ae8e`](https://github.com/hashicorp/design-system/commit/cdda7ae8eaf553bd32ec9e3944edf08fe352caf4) Thanks [@alex-ju](https://github.com/alex-ju)! - `Hds::PageHeader` – Set position to 'relative'
+
+- [#1470](https://github.com/hashicorp/design-system/pull/1470) [`0ea2ccfd0`](https://github.com/hashicorp/design-system/commit/0ea2ccfd0303149014de768c715ebb53dffe6c4c) Thanks [@alex-ju](https://github.com/alex-ju)! - `Hds::Textarea` – Fix border and text color for readonly state
+
+- [#1456](https://github.com/hashicorp/design-system/pull/1456) [`b4237e73b`](https://github.com/hashicorp/design-system/commit/b4237e73b3701d94e92556ad0108b8a38bef312d) Thanks [@alex-ju](https://github.com/alex-ju)! - `Hds::Modal` – Prevent `onClose` callback function invocation when `isDismissDisabled` is `true`
+
+- [#1469](https://github.com/hashicorp/design-system/pull/1469) [`ef98ed4ed`](https://github.com/hashicorp/design-system/commit/ef98ed4ed188520fd69a0090ab93d7d0c44e634c) Thanks [@didoo](https://github.com/didoo)! - Set the `font-weight` of the `button` mixin explicitly to `regular` instead of relying on inheritance (components using this mixin: `Button`, `Dropdown::ToggleButton` and soon `Accordion`) - No visual difference expected
+
+- Updated dependencies [[`b2ec25b39`](https://github.com/hashicorp/design-system/commit/b2ec25b399ba9aad5f8ae0b1f18a1bef9a6543e0)]:
+  - @hashicorp/design-system-tokens@1.6.0
+  - @hashicorp/ember-flight-icons@3.0.7
+
+## 2.7.1
+
+### Patch Changes
+
+- [#1438](https://github.com/hashicorp/design-system/pull/1438) [`ae852e7f8`](https://github.com/hashicorp/design-system/commit/ae852e7f83da72c62ee7791f89ac5c4a9e6bc7c6) Thanks [@didoo](https://github.com/didoo)! - `TooltipButton` - added `text-align: inherit` to the "button" element
+
+- [#1444](https://github.com/hashicorp/design-system/pull/1444) [`5a4d036e1`](https://github.com/hashicorp/design-system/commit/5a4d036e1dd349dfde1b1f8e278d332fac7abe7e) Thanks [@MelSumner](https://github.com/MelSumner)! - Internal accessibility tweaks for dropdown component
+
+- [#1395](https://github.com/hashicorp/design-system/pull/1395) [`e6e0c22c5`](https://github.com/hashicorp/design-system/commit/e6e0c22c538e381f4a97428dc35cf1295ce6ae21) Thanks [@alex-ju](https://github.com/alex-ju)! - Upgraded Ember.js to latest stable release 4.12, including upgrades to:
+
+  - `ember-auto-import` from `2.6.0` to `2.6.3`
+  - `ember-cli-htmlbars` from `6.1.0` to `6.2.0`
+
+  Upgraded the following dependencies:
+
+  - `ember-focus-trap` from `1.0.1` to `1.0.2`
+  - `ember-keyboard` from `8.1.0` to `8.2.0`
+  - `ember-truth-helpers` from `3.0.0` to `3.1.1`
+  - `sass` from `1.58.3` to `1.62.1`
+
+  Shifted our supported version of Node.js from `12.* || 14.* || >= 16` to `14.* || 16.* || >= 18`
+
+- [#1425](https://github.com/hashicorp/design-system/pull/1425) [`921aa03b9`](https://github.com/hashicorp/design-system/commit/921aa03b95f56da21e794ee62ecc96019f5c4bb7) Thanks [@didoo](https://github.com/didoo)! - `Table` - Set `min-height` instead of `height` for the table head cells + Updated the cells' internal padding to align with the design specs in Figma
+
+- [#1433](https://github.com/hashicorp/design-system/pull/1433) [`9aa5291d1`](https://github.com/hashicorp/design-system/commit/9aa5291d187bc867baf7c069c9dd17856cb5f79f) Thanks [@didoo](https://github.com/didoo)! - - Updated CSS code of components to use flex `gap`
+
+  - Fixed an issue with `Hds::Sidenav::Link` that was generating an empty node
+
+  This will lead to a minimal visual impact on some edge cases of `Alert/Toast` (multiple description items) and `SideNav` (text + generic content)
+
+- [#1426](https://github.com/hashicorp/design-system/pull/1426) [`1f8886a2d`](https://github.com/hashicorp/design-system/commit/1f8886a2d5117d74a0dddd4bca4a09d9fcedc8da) Thanks [@MelSumner](https://github.com/MelSumner)! - Style tweaks to standalone link
+
+- [#1434](https://github.com/hashicorp/design-system/pull/1434) [`eadefc4bd`](https://github.com/hashicorp/design-system/commit/eadefc4bdb4e5fd6c110a7be1d7d9aa720695678) Thanks [@alex-ju](https://github.com/alex-ju)! - Fix scroll management on `Modal` and `Flyout` resulting in stray `style` attribute on `<body>` element
+
+- Updated dependencies [[`e6e0c22c5`](https://github.com/hashicorp/design-system/commit/e6e0c22c538e381f4a97428dc35cf1295ce6ae21)]:
+  - @hashicorp/ember-flight-icons@3.0.6
+
 ## 2.7.0
 
 ### Minor Changes

package/HOW-TO-TEST-A-COMPONENT-IN-CLOUD-UI.md

@@ -77,3 +77,24 @@ You can override every dependency declared in the engines' `package.json` files
 Once done run `yarn install` to use the "remote" version of the package, update the `node_modules` and the `yarn.lock` file.
 
 **IMPORTANT**: the way in which yarn works in this case is that it resolves in a hash referencing a commit in `yarn.lock`; so if you make changes to the branch, they’re not reflected in the local `node_modules` unless you change the hash manually in the `yarn.lock` to point to another commit, and re-run the `yarn install` command.
+
+#### What to do if `yarn start ***` in Cloud UI complains about the different version number
+
+There are cases in which the "start" command in Cloud UI will fail with an error similar to this:
+```
+Missing yarn packages: 
+Package: @hashicorp/design-system-components
+  * Specified: ^2.7.1
+  * Installed: 2.6.0
+
+Run `yarn` to install missing dependencies.
+```
+
+Running `yarn install` again will not solve the problem because the issue is with the version of the `@hashicorp/design-system-components` package declared in the `package.json` files in Cloud UI that differs from the one in the overriding package.
+
+In this case you have two options:
+
+- you can rebase your branch on `main` so that your branch uses the latest version of `@hashicorp/design-system-components` (which is likely the one used in Cloud UI too)
+- if the one in Cloud UI is not the latest, you have to "trick" Cloud UI and replace the existing version with the one used in your branch (use a find & replace in all the `package.json` files)
+
+With both options, you will have to re-run the `yarn install` command.

package/NEW-COMPONENT-CHECKLIST.md

@@ -108,6 +108,7 @@ The engineering checklist has six parts: creating the feature branch, component
   - [ ] try not to repeat tests (i.e., don't have to test all sizes, all colors, etc.)
   - [ ] test all accessibility attributes
   - [ ] test assertions
+  - [ ] run the accessibility automation tests (`yarn test:a11y --filter="COMPONENT-NAME"`)
 - [ ] **documentation**
   - create component page `ember generate route components/COMPONENT_NAME --dummy`
   - add link to `templates/index.hbs` page

package/README.md

@@ -11,7 +11,7 @@ Compatibility
 
 * Ember.js v3.28 or above
 * Ember CLI v3.28 or above
-* Node.js v12 or above
+* Node.js v14 or above
 
 
 Installation

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

@@ -0,0 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<div class="hds-accordion" ...attributes>
+  {{yield (hash Item=(component "hds/accordion/item"))}}
+</div>

package/addon/components/hds/accordion/item/button.hbs

@@ -0,0 +1,11 @@
+<button
+  class={{this.classNames}}
+  type="button"
+  {{on "click" @onClickToggle}}
+  aria-controls={{@contentId}}
+  aria-expanded={{if @isOpen "true" "false"}}
+  aria-label={{@ariaLabel}}
+  ...attributes
+>
+  <FlightIcon @name="chevron-down" @size="24" @isInlineBlock={{false}} />
+</button>

package/addon/components/hds/accordion/item/button.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+export default class HdsAccordionItemButtonComponent extends Component {
+  /**
+   * Get the class names to apply to the component.
+   * @method ItemButton#classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-accordion-item__button'];
+
+    // add a class based on the @isOpen argument
+    if (this.args.isOpen) {
+      classes.push('hds-accordion-item__button--is-open');
+    }
+
+    if (this.args.parentContainsInteractive === false) {
+      classes.push(
+        'hds-accordion-item__button--parent-does-not-contain-interactive'
+      );
+    } else {
+      classes.push('hds-accordion-item__button--parent-contains-interactive');
+    }
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/accordion/item/index.hbs

@@ -0,0 +1,25 @@
+<Hds::DisclosurePrimitive class={{this.classNames}} @isOpen={{@isOpen}} ...attributes>
+  <:toggle as |t|>
+    <div class="hds-accordion-item__toggle">
+      <Hds::Accordion::Item::Button
+        @isOpen={{t.isOpen}}
+        @onClickToggle={{t.onClickToggle}}
+        @contentId={{this.contentId}}
+        @ariaLabel={{this.ariaLabel}}
+        @parentContainsInteractive={{this.containsInteractive}}
+      />
+
+      <div
+        class="hds-accordion-item__toggle-content hds-typography-display-200 hds-foreground-strong hds-font-weight-semibold"
+      >
+        {{yield to="toggle"}}
+      </div>
+    </div>
+  </:toggle>
+
+  <:content>
+    <div class="hds-accordion-item__content hds-typography-body-200 hds-foreground-primary" id={{this.contentId}}>
+      {{yield to="content"}}
+    </div>
+  </:content>
+</Hds::DisclosurePrimitive>

package/addon/components/hds/accordion/item/index.js

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { guidFor } from '@ember/object/internals';
+
+export default class HdsAccordionItemIndexComponent extends Component {
+  /**
+   * Generates a unique ID for the Content
+   *
+   * @param contentId
+   */
+  contentId = 'content-' + guidFor(this);
+
+  /**
+   * @param ariaLabel
+   * @type {string}
+   * @default 'Toggle display'
+   */
+  get ariaLabel() {
+    return this.args.ariaLabel ?? 'Toggle display';
+  }
+
+  /**
+   * @param containsInteractive
+   * @type {boolean}
+   * @default false
+   */
+  get containsInteractive() {
+    return this.args.containsInteractive ?? false;
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-accordion-item'];
+
+    // add a class based on the @isOpen argument
+    if (this.args.isOpen) {
+      classes.push('hds-accordion-item--is-open');
+    }
+
+    if (this.containsInteractive) {
+      // Entire accordion item including the chevron is interactive:
+      classes.push('hds-accordion-item--contains-interactive');
+    } else {
+      // Only chevron is interactive:
+      classes.push('hds-accordion-item--does-not-contain-interactive');
+    }
+
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/alert/description.hbs

@@ -2,4 +2,4 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<div class="hds-alert__description" ...attributes>{{yield}}</div>
+<div class="hds-alert__description hds-font-weight-regular hds-foreground-primary" ...attributes>{{yield}}</div>

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

@@ -17,7 +17,7 @@
   {{/if}}
 
   <div class="hds-alert__content">
-    <div class="hds-alert__text">
+    <div class="hds-alert__text {{if (eq @type 'compact') 'hds-typography-body-100' 'hds-typography-body-200'}}">
       {{yield (hash Title=(component "hds/alert/title"))}}
       {{yield (hash Description=(component "hds/alert/description"))}}
     </div>

package/addon/components/hds/alert/title.hbs

@@ -2,4 +2,4 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<div class="hds-alert__title" ...attributes>{{yield}}</div>
+<div class="hds-alert__title hds-font-weight-semibold" ...attributes>{{yield}}</div>

package/addon/components/hds/card/container.js

@@ -8,7 +8,7 @@ import { assert } from '@ember/debug';
 
 export const DEFAULT_LEVEL = 'base';
 export const DEFAULT_BACKGROUND = 'neutral-primary';
-export const DEFAULT_OVERFLOW = 'hidden';
+export const DEFAULT_OVERFLOW = 'visible';
 export const LEVELS = ['base', 'mid', 'high'];
 export const BACKGROUNDS = ['neutral-primary', 'neutral-secondary'];
 export const OVERFLOWS = ['hidden', 'visible'];
@@ -106,7 +106,7 @@ export default class HdsCardContainerComponent extends Component {
    *
    * @param overflow
    * @type {string}
-   * @default 'hidden'
+   * @default 'visible'
    */
   get overflow() {
     let { overflow = DEFAULT_OVERFLOW } = this.args;

package/addon/components/hds/dropdown/list-item/checkmark.hbs

@@ -3,8 +3,8 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
-{{! template-lint-disable require-context-role require-presentational-children }}
-<li class={{this.classNames}}>
+{{! template-lint-disable no-invalid-role require-context-role require-presentational-children }}
+<li class={{this.classNames}} role="none">
   <Hds::Interactive
     @current-when={{@current-when}}
     @models={{hds-link-to-models @model @models}}
@@ -37,4 +37,4 @@
     </span>
   </Hds::Interactive>
 </li>
-{{! template-lint-enable require-context-role require-presentational-children }}
+{{! template-lint-enable no-invalid-role require-context-role require-presentational-children }}

package/addon/components/hds/dropdown/list-item/separator.hbs

@@ -2,4 +2,9 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<li class="hds-dropdown-list-item hds-dropdown-list-item--variant-separator" role="separator" ...attributes></li>
+<li
+  class="hds-dropdown-list-item hds-dropdown-list-item--variant-separator"
+  aria-hidden="true"
+  role="separator"
+  ...attributes
+></li>

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

@@ -121,7 +121,14 @@ export default class HdsFlyoutIndexComponent extends Component {
 
     // Reset page `overflow` property
     if (this.body) {
-      this.body.style.setProperty('overflow', this.bodyInitialOverflowValue);
+      this.body.style.removeProperty('overflow');
+      if (this.bodyInitialOverflowValue === '') {
+        if (this.body.style.length === 0) {
+          this.body.removeAttribute('style');
+        }
+      } else {
+        this.body.style.setProperty('overflow', this.bodyInitialOverflowValue);
+      }
     }
   }
 }

package/addon/components/hds/form/masked-input/base.hbs

@@ -0,0 +1,34 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<div class={{this.classNames}} {{style width=@width}}>
+  {{#if @isMultiline}}
+    <Hds::Form::Textarea::Base
+      class="hds-form-masked-input__control"
+      @value={{@value}}
+      @isInvalid={{@isInvalid}}
+      @height={{@height}}
+      id={{this.id}}
+      ...attributes
+    />
+  {{else}}
+    <Hds::Form::TextInput::Base
+      class="hds-form-masked-input__control"
+      @value={{@value}}
+      @isInvalid={{@isInvalid}}
+      id={{this.id}}
+      ...attributes
+    />
+  {{/if}}
+  <button
+    class="hds-form-masked-input__toggle-button"
+    type="button"
+    aria-label={{this.ariaLabel}}
+    aria-controls={{this.id}}
+    {{on "click" this.onClickToggle}}
+  >
+    <FlightIcon @name={{if this.isMasked "eye" "eye-off"}} @size="16" @isInlineBlock={{false}} />
+    <span class="sr-only" aria-live="polite">{{this.ariaMessageText}}</span>
+  </button>
+</div>

package/addon/components/hds/form/masked-input/base.js

@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { getElementId } from '@hashicorp/design-system-components/utils/hds-get-element-id';
+
+export default class HdsFormMaskedInputBaseComponent extends Component {
+  @tracked isMasked = this.args.isMasked ?? true;
+
+  @action
+  onClickToggle() {
+    this.isMasked = !this.isMasked;
+  }
+
+  /**
+   * Calculates the unique ID to assign to the form control
+   */
+  get id() {
+    return getElementId(this);
+  }
+
+  /**
+   * @param ariaLabel
+   * @type {string}
+   * @default 'Show masked content'
+   */
+  get ariaLabel() {
+    if (this.args.ariaLabel) {
+      return this.args.ariaLabel;
+    } else if (this.isMasked) {
+      return 'Show masked content';
+    } else {
+      return 'Hide masked content';
+    }
+  }
+
+  /**
+   * @param ariaMessageText
+   * @type {string}
+   * @default ''
+   */
+  get ariaMessageText() {
+    if (this.args.ariaMessageText) {
+      return this.args.ariaMessageText;
+    } else if (this.isMasked) {
+      return 'Input content is now hidden';
+    } else {
+      return 'Input content is now visible';
+    }
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-form-masked-input'];
+
+    if (this.isMasked) {
+      classes.push(`hds-form-masked-input--is-masked`);
+    } else {
+      classes.push(`hds-form-masked-input--is-not-masked`);
+    }
+
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/form/masked-input/field.hbs

@@ -0,0 +1,30 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<Hds::Form::Field
+  @layout="vertical"
+  @extraAriaDescribedBy={{@extraAriaDescribedBy}}
+  @isRequired={{@isRequired}}
+  @isOptional={{@isOptional}}
+  @id={{@id}}
+  as |F|
+>
+  {{! Notice: the order of the elements is not relevant here, because is controlled at "Hds::Form::Field" component level }}
+  {{yield (hash Label=F.Label isRequired=F.isRequired isOptional=F.isOptional)}}
+  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
+  <F.Control>
+    <Hds::Form::MaskedInput::Base
+      @isMultiline={{@isMultiline}}
+      @isMasked={{@isMasked}}
+      @value={{@value}}
+      @isInvalid={{@isInvalid}}
+      @width={{@width}}
+      @height={{@height}}
+      @id={{F.id}}
+      required={{@isRequired}}
+      ...attributes
+      aria-describedby={{F.ariaDescribedBy}}
+    />
+  </F.Control>
+</Hds::Form::Field>

package/addon/components/hds/form/text-input/base.js

@@ -14,9 +14,9 @@ export const TYPES = [
   'email',
   'password',
   'url',
-  'search',
   'date',
   'time',
+  'search',
 ];
 
 export default class HdsFormTextInputBaseComponent extends Component {
@@ -56,6 +56,11 @@ export default class HdsFormTextInputBaseComponent extends Component {
       classes.push(`hds-form-text-input--is-invalid`);
     }
 
+    // add a class based on the @isLoading argument
+    if (this.args.isLoading) {
+      classes.push(`hds-form-text-input--is-loading`);
+    }
+
     return classes.join(' ');
   }
 }

package/addon/components/hds/form/text-input/field.hbs

@@ -19,6 +19,7 @@
       @value={{@value}}
       @isInvalid={{@isInvalid}}
       @width={{@width}}
+      @isLoading={{@isLoading}}
       required={{@isRequired}}
       ...attributes
       id={{F.id}}

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

@@ -112,7 +112,11 @@ 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.args.onClose && typeof this.args.onClose === 'function') {
+      if (
+        !this.isDismissDisabled &&
+        this.args.onClose &&
+        typeof this.args.onClose === 'function'
+      ) {
         this.args.onClose();
       }
 
@@ -158,7 +162,14 @@ export default class HdsModalIndexComponent extends Component {
 
     // Reset page `overflow` property
     if (this.body) {
-      this.body.style.setProperty('overflow', this.bodyInitialOverflowValue);
+      this.body.style.removeProperty('overflow');
+      if (this.bodyInitialOverflowValue === '') {
+        if (this.body.style.length === 0) {
+          this.body.removeAttribute('style');
+        }
+      } else {
+        this.body.style.setProperty('overflow', this.bodyInitialOverflowValue);
+      }
     }
   }
 }

package/addon/components/hds/side-nav/list/link.hbs

@@ -20,9 +20,11 @@
       <FlightIcon class="hds-side-nav__list-item-icon-leading" @name={{@icon}} />
     {{/if}}
 
-    <span class="hds-side-nav__list-item-text hds-typography-body-200 hds-font-weight-medium">
-      {{@text}}
-    </span>
+    {{#if @text}}
+      <span class="hds-side-nav__list-item-text hds-typography-body-200 hds-font-weight-medium">
+        {{@text}}
+      </span>
+    {{/if}}
 
     {{#if @count}}
       <Hds::BadgeCount @text={{@count}} @type="inverted" @size="small" />

package/app/components/hds/accordion/index.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/accordion/index';

package/app/components/hds/accordion/item/button.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/accordion/item/button';

package/app/components/hds/accordion/item/index.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/accordion/item/index';

package/app/components/hds/form/masked-input/base.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/form/masked-input/base';

package/app/components/hds/form/masked-input/field.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/form/masked-input/field';

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

@@ -12,6 +12,7 @@
 
 // Notice: this list can be automatically edited by the Ember blueprint, please don't remove the start/end comments
 // START COMPONENTS CSS FILES IMPORTS
+@use "../components/accordion";
 @use "../components/alert";
 @use "../components/app-frame";
 @use "../components/application-state";