@hashicorp/design-system-components 2.7.1 → 2.8.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @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
@@ -16,7 +44,7 @@
   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-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`
 

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/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/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();
       }
 

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";

package/app/styles/components/accordion.scss

@@ -0,0 +1,120 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// ACCORDION
+//
+
+@use "../mixins/button" as *;
+@use "../mixins/focus-ring" as *;
+
+$accordion-item-padding: 16px;
+$accordion-item-border-radius: 6px;
+
+// ACCORDION COMPONENT (wrapper)
+
+.hds-accordion {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+// ACCORDION ITEM COMPONENT (nested child)
+
+.hds-accordion-item {
+  background: var(--token-color-surface-primary);
+  border-radius: $accordion-item-border-radius;
+
+  &.hds-accordion-item--does-not-contain-interactive {
+    box-shadow: var(--token-surface-mid-box-shadow);
+
+    &:hover,
+    &.mock-hover {
+      box-shadow: var(--token-surface-high-box-shadow);
+    }
+  }
+
+  &.hds-accordion-item--contains-interactive {
+    box-shadow: var(--token-surface-base-box-shadow);
+  }
+}
+
+// TOGGLE BLOCK
+
+.hds-accordion-item__toggle {
+  position: relative;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding:
+    $accordion-item-padding
+    $accordion-item-padding
+    $accordion-item-padding
+    12px; // by design
+}
+
+.hds-accordion-item__button {
+  padding: 0;
+
+  &:hover { cursor: pointer; }
+
+  // entire toggle area is interactive
+  &.hds-accordion-item__button--parent-does-not-contain-interactive {
+    @include hds-focus-ring-with-pseudo-element();
+    position: static;
+    margin: -1px 0;
+    color: var(--token-color-foreground-primary);
+    background: transparent;
+    border: 1px solid transparent;
+
+    // expand button target to cover entire AccordionItem Toggle block (depending on the `@containsInteractive/@parentContainsInteractive` argument)
+    &::after {
+      position: absolute;
+      display: block;
+      border-radius: $accordion-item-border-radius;
+      content: "";
+      inset: 0;
+    }
+  }
+
+  // only chevron button area is interactive
+  &.hds-accordion-item__button--parent-contains-interactive {
+    @include hds-button();
+    width: 24px;
+    height: 24px;
+
+    &:focus,
+    &.mock-focus {
+      @include hds-button-state-focus();
+    }
+
+    // `hds-button-color-secondary` determines the focus color and needs to be placed after `hds-button-state-focus`
+    @include hds-button-color-secondary();
+  }
+
+  // animate chevron icon
+  &.hds-accordion-item__button--is-open {
+    .flight-icon-chevron-down {
+      transform: rotate(-180deg);
+    }
+  }
+
+  .flight-icon-chevron-down {
+    @media (prefers-reduced-motion: no-preference) {
+      transition: transform 0.3s;
+    }
+  }
+}
+
+// Consumer added content that appears next to the chevron button:
+.hds-accordion-item__toggle-content {
+  flex: 1;
+}
+
+// CONTENT BLOCK
+
+.hds-accordion-item__content {
+  padding: 4px $accordion-item-padding $accordion-item-padding $accordion-item-padding;
+}

package/app/styles/components/alert.scss

@@ -40,24 +40,9 @@
   gap: 4px;
   justify-content: center;
   color: var(--token-color-foreground-warning-on-surface);
-  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-alert--type-compact & {
-    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-alert__title {
-  font-weight: var(--token-typography-font-weight-semibold);
 }
 
 .hds-alert__description {
-  color: var(--token-color-foreground-primary);
-  font-weight: var(--token-typography-font-weight-regular);
   word-break: break-word;
 
   // we add very basic styling for elements that may be injected via the "description" string

package/app/styles/components/disclosure-primitive.scss

@@ -9,5 +9,4 @@
 
 .hds-disclosure-primitive {
   position: relative;
-  width: fit-content;
 }

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

@@ -15,6 +15,7 @@
 @use "./group";
 @use "./indicator";
 @use "./checkbox";
+@use "./masked-input";
 @use "./radio";
 @use "./radio-card";
 @use "./select";

package/app/styles/components/form/masked-input.scss

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// MASKED-INPUT
+//
+
+$hds-form-masked-input-button-size: 24px;
+
+.hds-form-masked-input {
+  position: relative;
+  width: 100%;
+
+  .hds-form-masked-input__control {
+    padding-right: calc(var(--token-form-control-padding) + $hds-form-masked-input-button-size);
+  }
+}
+
+.hds-form-masked-input--is-masked {
+  .hds-form-masked-input__control {
+    -webkit-text-security: disc;
+  }
+}
+
+.hds-form-masked-input--is-not-masked {
+  .hds-form-masked-input__control {
+    -webkit-text-security: none;
+  }
+}
+
+// notice: by design, for this button we don't apply a custom style for the focused state
+// but we rely on the standard outlined styling provided by the browser
+.hds-form-masked-input__toggle-button {
+  position: absolute;
+  top: calc(var(--token-form-control-padding) - var(--token-form-control-border-width));
+  right: calc(var(--token-form-control-padding) - var(--token-form-control-border-width));
+  width: $hds-form-masked-input-button-size;
+  height: $hds-form-masked-input-button-size;
+  padding: 2px;
+  color: var(--token-color-foreground-primary);
+  background-color: transparent;
+  border-color: transparent;
+  cursor: pointer;
+}

package/app/styles/components/form/text-input.scss

@@ -141,5 +141,10 @@
       // stylelint-disable-next-line property-no-vendor-prefix
       -webkit-appearance: none;
     }
+
+    // IS LOADING
+    &.hds-form-text-input--is-loading {
+      background-image: var(--token-form-text-input-background-image-data-url-search-loading);
+    }
   }
 }

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

@@ -48,9 +48,9 @@
   // READONLY
 
   &:read-only {
-    color: var(--token-form-control-disabled-foreground-color);
+    color: var(--token-form-control-readonly-foreground-color);
     background-color: var(--token-form-control-readonly-surface-color);
-    border-color: var(--token-form-control-disabled-border-color);
+    border-color: var(--token-form-control-readonly-border-color);
     box-shadow: none;
   }
 

package/app/styles/components/page-header.scss

@@ -8,6 +8,9 @@
 //
 
 .hds-page-header {
+  // `container-type: inline-size` creates a new stacking context; to control the position of Page Header content on the z-axis
+  // we set this element to `relative` to allow consumers to define the `z-index` value that works in their context
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 16px;

package/app/styles/components/reveal.scss

@@ -7,6 +7,8 @@
 // REVEAL COMPONENT
 //
 
+.hds-reveal { width: fit-content; }
+
 .hds-reveal__toggle-button {
   // overriding some styles of the tertiary button, per design specs
   min-height: 1.75rem; // 28px, Override default so padding difference will be visible

package/app/styles/mixins/_button.scss

@@ -40,6 +40,12 @@ $size-props: (
   align-items: center;
   justify-content: center;
   width: auto;
+  // notice: we set the font-weight of the button text to "regular" (on purpose)
+  // because of the antialising of the browser that renders the text quite different
+  // from what it looks like in Figma, so we prefer to have them visually similar
+  // even if they differ in their internal implementation (in Figma the font-weight is medium/500)
+  // for more context about this decision: https://hashicorp.atlassian.net/browse/HDS-2099
+  font-weight: var(--token-typography-font-weight-regular);
   font-family: var(--token-typography-font-stack-text);
   text-decoration: none;
   border: $hds-button-border-width solid transparent; // We need this to be transparent for a11y

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "2.7.1",
+  "version": "2.8.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -35,12 +35,13 @@
     "test:ember": "ember test",
     "test:ember-compatibility": "ember try:each",
     "test:ember:percy": "percy exec ember test",
-    "test:a11y": "ENABLE_A11Y_AUDIT=true ember test"
+    "test:a11y": "ENABLE_A11Y_AUDIT=true ember test --server",
+    "test:a11y-report": "ENABLE_A11Y_MIDDLEWARE_REPORTER=true ember test"
   },
   "dependencies": {
     "@ember/render-modifiers": "^2.0.5",
-    "@hashicorp/design-system-tokens": "^1.5.0",
-    "@hashicorp/ember-flight-icons": "^3.0.6",
+    "@hashicorp/design-system-tokens": "^1.6.0",
+    "@hashicorp/ember-flight-icons": "^3.0.7",
     "dialog-polyfill": "^0.5.6",
     "ember-a11y-refocus": "^3.0.2",
     "ember-auto-import": "^2.6.3",