@hashicorp/design-system-components 2.10.0 → 2.12.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @hashicorp/design-system-components
 
+## 2.12.0
+
+### Minor Changes
+
+- [#1640](https://github.com/hashicorp/design-system/pull/1640) [`8001667d2`](https://github.com/hashicorp/design-system/commit/8001667d2b0b549b5c2743ebaa4b50b58344a87f) Thanks [@didoo](https://github.com/didoo)! - `Design tokens` - Added color tokens for “Vault Secrets” product
+
+  `IconTile` - updated component to include `vault-secrets` product option
+
+### Patch Changes
+
+- [#1615](https://github.com/hashicorp/design-system/pull/1615) [`d5d4402b2`](https://github.com/hashicorp/design-system/commit/d5d4402b2b7529d60ac693babc2a9187f8fbad36) Thanks [@didoo](https://github.com/didoo)! - `Text` - Removed leftover `console.log` from code
+
+- [#1618](https://github.com/hashicorp/design-system/pull/1618) [`4e31014d5`](https://github.com/hashicorp/design-system/commit/4e31014d503d4b71e6b70b11ba750b75c0cb2d37) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - Refactor the layout of the `Dropdown` checkbox and radio inputs to make the gap between the inputs and the associated text, as well as the icon and count, clickable.
+
+- [#1617](https://github.com/hashicorp/design-system/pull/1617) [`214f66e9e`](https://github.com/hashicorp/design-system/commit/214f66e9e8818da87e6d514b3808b40a0b7e56f5) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - Change font-weight of `Hds::Link::Standalone` from 500 to 400 to match font-weight of `Hds::Button`.
+
+- [#1628](https://github.com/hashicorp/design-system/pull/1628) [`cc15349d3`](https://github.com/hashicorp/design-system/commit/cc15349d31c698d89540897570f76a5f2dc670ce) Thanks [@didoo](https://github.com/didoo)! - `Stepper` - removed some CSS declarations that were not used/applied
+
+- Updated dependencies [[`8001667d2`](https://github.com/hashicorp/design-system/commit/8001667d2b0b549b5c2743ebaa4b50b58344a87f)]:
+  - @hashicorp/design-system-tokens@1.8.0
+  - @hashicorp/ember-flight-icons@3.1.2
+
+## 2.11.0
+
+### Minor Changes
+
+- [#1490](https://github.com/hashicorp/design-system/pull/1490) [`4dafcb7d7`](https://github.com/hashicorp/design-system/commit/4dafcb7d7568027c495cb92d01026359a040507a) Thanks [@didoo](https://github.com/didoo)! - `Hds::Text` - Added new `Text` component
+
+- [#1587](https://github.com/hashicorp/design-system/pull/1587) [`57e7a42cb`](https://github.com/hashicorp/design-system/commit/57e7a42cb8353af83d8be5be0a318f951b00d3e3) Thanks [@alex-ju](https://github.com/alex-ju)! - `Hds::Form::MaskedInput` - Add `hasCopyButton` argument
+
+### Patch Changes
+
+- [#1577](https://github.com/hashicorp/design-system/pull/1577) [`8aa9a5889`](https://github.com/hashicorp/design-system/commit/8aa9a5889cf14fc28100a462dfd42754a3bdb42b) Thanks [@DingoEatingFuzz](https://github.com/DingoEatingFuzz)! - Remove aria-hidden from the "optional" span in Form::Indicator
+
+- [#1606](https://github.com/hashicorp/design-system/pull/1606) [`7ac4526db`](https://github.com/hashicorp/design-system/commit/7ac4526dbddda6bea0e6e9f542addc5c97914fa8) Thanks [@Dhaulagiri](https://github.com/Dhaulagiri)! - Remove `ember-named-blocks-polyfill` as all consumers of HDS are on Ember 3.25 or later now. This can be installed locally if it is still needed.
+
+- [#1576](https://github.com/hashicorp/design-system/pull/1576) [`e16c88ba9`](https://github.com/hashicorp/design-system/commit/e16c88ba959dcd0b186fd823fc3fccacf39674e8) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - `Alert`, `Toast`: Fixed an issue with anchor tag color styles within Description that had been overriding `Hds::Link` color; changed the default color for HTML links within Description to "neutral" to better align with existing guidance for links in the actions and improve accessible contrast.
+
+- Updated dependencies []:
+  - @hashicorp/ember-flight-icons@3.1.1
+
 ## 2.10.0
 
 ### Minor Changes

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

@@ -4,16 +4,17 @@
 }}
 
 <li class="hds-dropdown-list-item hds-dropdown-list-item--variant-checkbox">
-  <Hds::Form::Checkbox::Base class="hds-dropdown-list-item__control" id={{this.id}} @value={{@value}} ...attributes />
-  {{#if @icon}}
-    <div class="hds-dropdown-list-item__icon">
-      <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
-    </div>
-  {{/if}}
   <label class="hds-dropdown-list-item__label hds-typography-body-200" for={{this.id}}>
-    {{yield}}
+    <Hds::Form::Checkbox::Base class="hds-dropdown-list-item__control" id={{this.id}} @value={{@value}} ...attributes />
+    {{#if @icon}}
+      <span class="hds-dropdown-list-item__icon">
+        <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
+      </span>
+    {{/if}}
+    <span class="hds-dropdown-list-item__text-content">{{yield}}</span>
+
+    {{#if @count}}
+      <span class="hds-dropdown-list-item__count hds-typography-body-100 hds-font-weight-medium">{{@count}}</span>
+    {{/if}}
   </label>
-  {{#if @count}}
-    <span class="hds-dropdown-list-item__count hds-typography-body-100 hds-font-weight-medium">{{@count}}</span>
-  {{/if}}
 </li>

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

@@ -4,14 +4,17 @@
 }}
 
 <li class="hds-dropdown-list-item hds-dropdown-list-item--variant-radio">
-  <Hds::Form::Radio::Base class="hds-dropdown-list-item__control" id={{this.id}} @value={{@value}} ...attributes />
-  {{#if @icon}}
-    <div class="hds-dropdown-list-item__icon">
-      <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
-    </div>
-  {{/if}}
-  <label class="hds-dropdown-list-item__label hds-typography-body-200" for={{this.id}}>{{yield}}</label>
-  {{#if @count}}
-    <span class="hds-dropdown-list-item__count hds-typography-body-100 hds-font-weight-medium">{{@count}}</span>
-  {{/if}}
+  <label class="hds-dropdown-list-item__label hds-typography-body-200" for={{this.id}}>
+    <Hds::Form::Radio::Base class="hds-dropdown-list-item__control" id={{this.id}} @value={{@value}} ...attributes />
+    {{#if @icon}}
+      <div class="hds-dropdown-list-item__icon">
+        <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
+      </div>
+    {{/if}}
+    <span class="hds-dropdown-list-item__text-content">{{yield}}</span>
+
+    {{#if @count}}
+      <span class="hds-dropdown-list-item__count hds-typography-body-100 hds-font-weight-medium">{{@count}}</span>
+    {{/if}}
+  </label>
 </li>

package/addon/components/hds/form/indicator/index.hbs

@@ -3,7 +3,7 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 {{#if @isOptional}}
-  <span aria-hidden="true" class={{this.classNames}}>(Optional)</span>
+  <span class={{this.classNames}}>(Optional)</span>
 {{/if}}
 {{#if @isRequired}}
   &nbsp;<Hds::Badge aria-hidden="true" class={{this.classNames}} @size="small" @color="neutral" @text="Required" />

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

@@ -31,4 +31,12 @@
     <FlightIcon @name={{if this.isMasked "eye" "eye-off"}} @size="16" @isInlineBlock={{false}} />
     <span class="sr-only" aria-live="polite">{{this.ariaMessageText}}</span>
   </button>
+  {{#if @hasCopyButton}}
+    <Hds::Copy::Button
+      class="hds-form-masked-input__copy-button"
+      @text={{this.copyButtonText}}
+      @isIconOnly={{true}}
+      @textToCopy="{{@value}}"
+    />
+  {{/if}}
 </div>

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

@@ -41,7 +41,7 @@ export default class HdsFormMaskedInputBaseComponent extends Component {
   /**
    * @param ariaMessageText
    * @type {string}
-   * @default ''
+   * @default 'Input content is now hidden'
    */
   get ariaMessageText() {
     if (this.args.ariaMessageText) {
@@ -53,6 +53,19 @@ export default class HdsFormMaskedInputBaseComponent extends Component {
     }
   }
 
+  /**
+   * @param copyButtonText
+   * @type {string}
+   * @default 'Copy masked content'
+   */
+  get copyButtonText() {
+    if (this.args.copyButtonText) {
+      return this.args.copyButtonText;
+    } else {
+      return 'Copy masked content';
+    }
+  }
+
   /**
    * Get the class names to apply to the component.
    * @method classNames

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

@@ -15,6 +15,7 @@
   {{yield (hash HelperText=F.HelperText Error=F.Error)}}
   <F.Control>
     <Hds::Form::MaskedInput::Base
+      @hasCopyButton={{@hasCopyButton}}
       @isMultiline={{@isMultiline}}
       @isMasked={{@isMasked}}
       @value={{@value}}

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

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

package/addon/components/hds/text/body.hbs

@@ -0,0 +1,14 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<Hds::Text
+  @group="body"
+  @size={{this.size}}
+  @weight={{this.weight}}
+  @align={{@align}}
+  @color={{@color}}
+  @tag={{@tag}}
+  ...attributes
+>{{yield}}</Hds::Text>

package/addon/components/hds/text/body.js

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+// notice: only some combinations of size + font-weight are allowed (per design specs)
+// see: https://www.figma.com/file/oQsMzMMnynfPWpMEt91OpH/HDS-Product---Foundations?node-id=1262%3A9192
+
+export const DEFAULT_SIZE = '200';
+export const AVAILABLE_SIZES = [300, 200, 100];
+
+export const DEFAULT_WEIGHT = 'regular';
+export const AVAILABLE_WEIGHTS_PER_SIZE = {
+  300: ['regular', 'medium', 'semibold'],
+  200: ['regular', 'medium', 'semibold'],
+  100: ['regular', 'medium', 'semibold'],
+};
+
+export default class HdsTextBodyComponent extends Component {
+  /**
+   * Sets the "size" for the text
+   * Accepted values: see AVAILABLE_SIZES
+   *
+   * @type {string}
+   *
+   * @param size
+   */
+  get size() {
+    let { size = DEFAULT_SIZE } = this.args;
+
+    // let's be a bit forgiving with the consumers
+    if (typeof size === 'string') {
+      size = parseInt(size, 10);
+    }
+
+    assert(
+      `@size for "Hds::Text::Body" must be one of the following: ${AVAILABLE_SIZES.join(
+        ', '
+      )}; received: ${size}`,
+      AVAILABLE_SIZES.includes(size)
+    );
+
+    return size;
+  }
+
+  /**
+   * Sets the "weight" for the text
+   * Accepted values: see AVAILABLE_WEIGHTS_PER_SIZE
+   *
+   * @type {string}
+   *
+   * @param variant
+   */
+  get weight() {
+    let { weight = DEFAULT_WEIGHT } = this.args;
+
+    const availableWeights = AVAILABLE_WEIGHTS_PER_SIZE[this.size];
+
+    assert(
+      `@weight for "Hds::Text::Body" with @size=${
+        this.size
+      } must be one of the following: ${availableWeights.join(
+        ', '
+      )}; received: ${weight}`,
+      availableWeights.includes(weight)
+    );
+
+    return weight;
+  }
+}

package/addon/components/hds/text/code.hbs

@@ -0,0 +1,14 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<Hds::Text
+  @group="code"
+  @size={{this.size}}
+  @weight={{this.weight}}
+  @align={{@align}}
+  @color={{@color}}
+  @tag={{@tag}}
+  ...attributes
+>{{yield}}</Hds::Text>

package/addon/components/hds/text/code.js

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+// notice: only some combinations of size + font-weight are allowed (per design specs)
+// see: https://www.figma.com/file/oQsMzMMnynfPWpMEt91OpH/HDS-Product---Foundations?node-id=1262%3A9192
+
+export const DEFAULT_SIZE = '200';
+export const AVAILABLE_SIZES = [300, 200, 100];
+
+export const DEFAULT_WEIGHT = 'regular';
+export const AVAILABLE_WEIGHTS_PER_SIZE = {
+  300: ['regular', 'bold'],
+  200: ['regular', 'bold'],
+  100: ['regular', 'bold'],
+};
+
+export default class HdsTextCodeComponent extends Component {
+  /**
+   * Sets the "size" for the text
+   * Accepted values: see AVAILABLE_SIZES
+   *
+   * @type {string}
+   *
+   * @param size
+   */
+  get size() {
+    let { size = DEFAULT_SIZE } = this.args;
+
+    // let's be a bit forgiving with the consumers
+    if (typeof size === 'string') {
+      size = parseInt(size, 10);
+    }
+
+    assert(
+      `@size for "Hds::Text::Code" must be one of the following: ${AVAILABLE_SIZES.join(
+        ', '
+      )}; received: ${size}`,
+      AVAILABLE_SIZES.includes(size)
+    );
+
+    return size;
+  }
+
+  /**
+   * Sets the "weight" for the text
+   * Accepted values: see AVAILABLE_WEIGHTS_PER_SIZE
+   *
+   * @type {string}
+   *
+   * @param variant
+   */
+  get weight() {
+    let { weight = DEFAULT_WEIGHT } = this.args;
+
+    const availableWeights = AVAILABLE_WEIGHTS_PER_SIZE[this.size];
+
+    assert(
+      `@weight for "Hds::Text::Code" with @size=${
+        this.size
+      } must be one of the following: ${availableWeights.join(
+        ', '
+      )}; received: ${weight}`,
+      availableWeights.includes(weight)
+    );
+
+    return weight;
+  }
+}

package/addon/components/hds/text/display.hbs

@@ -0,0 +1,14 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<Hds::Text
+  @group="display"
+  @size={{this.size}}
+  @weight={{this.weight}}
+  @align={{@align}}
+  @color={{@color}}
+  @tag={{@tag}}
+  ...attributes
+>{{yield}}</Hds::Text>

package/addon/components/hds/text/display.js

@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+// notice: only some combinations of size + font-weight are allowed (per design specs)
+// see: https://www.figma.com/file/oQsMzMMnynfPWpMEt91OpH/HDS-Product---Foundations?node-id=1262%3A9192
+
+export const DEFAULT_SIZE = '200';
+export const AVAILABLE_SIZES = [500, 400, 300, 200, 100];
+
+export const DEFAULT_WEIGHTS_PER_SIZE = {
+  500: ['bold'],
+  400: ['semibold'],
+  300: ['semibold'],
+  200: ['semibold'],
+  100: ['medium'],
+};
+export const AVAILABLE_WEIGHTS_PER_SIZE = {
+  500: ['bold'],
+  400: ['medium', 'semibold', 'bold'],
+  300: ['medium', 'semibold', 'bold'],
+  200: ['semibold'],
+  100: ['medium'],
+};
+
+export default class HdsTextDisplayComponent extends Component {
+  /**
+   * Sets the "size" for the text
+   * Accepted values: see AVAILABLE_SIZES
+   *
+   * @type {string}
+   *
+   * @param size
+   */
+  get size() {
+    let { size = DEFAULT_SIZE } = this.args;
+
+    // let's be a bit forgiving with the consumers
+    if (typeof size === 'string') {
+      size = parseInt(size, 10);
+    }
+
+    assert(
+      `@size for "Hds::Text::Display" must be one of the following: ${AVAILABLE_SIZES.join(
+        ', '
+      )}; received: ${size}`,
+      AVAILABLE_SIZES.includes(size)
+    );
+
+    return size;
+  }
+
+  /**
+   * Sets the "weight" for the text
+   * Accepted values: see AVAILABLE_WEIGHTS_PER_SIZE
+   *
+   * @type {string}
+   *
+   * @param variant
+   */
+  get weight() {
+    let { weight } = this.args;
+
+    if (weight) {
+      const availableWeights = AVAILABLE_WEIGHTS_PER_SIZE[this.size];
+      assert(
+        `@weight for "Hds::Text::Display" with @size=${
+          this.size
+        } must be one of the following: ${availableWeights.join(
+          ', '
+        )}; received: ${weight}`,
+        availableWeights.includes(weight)
+      );
+    } else {
+      // use the default (first item in the array)
+      weight = DEFAULT_WEIGHTS_PER_SIZE[this.size];
+    }
+
+    return weight;
+  }
+}

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

@@ -0,0 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{#let (element this.componentTag) as |Tag|}}
+  <Tag class={{this.classNames}} {{style color=this.customColor}} ...attributes>{{yield}}</Tag>
+{{/let}}

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

@@ -0,0 +1,146 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const AVAILABLE_ALIGNS = ['left', 'center', 'right'];
+
+export const AVAILABLE_COLORS = [
+  'primary',
+  'strong',
+  'faint',
+  'disabled',
+  'high-contrast',
+  'action',
+  'action-hover',
+  'action-active',
+  'highlight',
+  'highlight-on-surface',
+  'highlight-high-contrast',
+  'success',
+  'success-on-surface',
+  'success-high-contrast',
+  'warning',
+  'warning-on-surface',
+  'warning-high-contrast',
+  'critical',
+  'critical-on-surface',
+  'critical-high-contrast',
+];
+
+export default class HdsTextIndexComponent extends Component {
+  /**
+   * Get a tag to render based on the `@tag` argument passed or the value of `this.size` (via mapping)
+   *
+   * @method #componentTag
+   * @return {string} The html tag to use in the dynamic render of the component
+   */
+  get componentTag() {
+    let { tag = 'span' } = this.args;
+
+    return tag;
+  }
+
+  /**
+   * Sets the "variant" (style) for the text
+   * Accepted values: see AVAILABLE_VARIANTS
+   *
+   * @type {string}
+   *
+   * @param variant
+   */
+  get variant() {
+    let { group, size } = this.args;
+
+    // notice: for performance reasons we don't do any other extra check on these values
+    // we assume they've already been validated by the "parent" components
+    return `${group}-${size}`;
+  }
+
+  /**
+   * Sets the alignment of the text
+   * Accepted values: see AVAILABLE_ALIGNS
+   *
+   * @param align
+   * @type {string}
+   */
+  get align() {
+    let { align } = this.args;
+
+    if (align) {
+      assert(
+        `@align for "Hds::Text" must be one of the following: ${AVAILABLE_ALIGNS.join(
+          ', '
+        )}; received: ${align}`,
+        AVAILABLE_ALIGNS.includes(align)
+      );
+    }
+
+    return align;
+  }
+
+  /**
+   * Sets the color of the text as pre-defined value
+   * Accepted values: see AVAILABLE_COLORS
+   *
+   * @param color
+   * @type {string}
+   */
+  get predefinedColor() {
+    let { color } = this.args;
+
+    if (AVAILABLE_COLORS.includes(color)) {
+      return color;
+    } else {
+      return undefined;
+    }
+  }
+
+  /**
+   * Sets the color of the text as custom value (via inline style)
+   *
+   * @param color
+   * @type {string}
+   */
+  get customColor() {
+    let { color } = this.args;
+
+    if (!AVAILABLE_COLORS.includes(color)) {
+      return color;
+    } else {
+      return undefined;
+    }
+  }
+
+  /**
+   * 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-text'];
+
+    // add a (helper) class based on the "group + size" variant
+    classes.push(`hds-typography-${this.variant}`);
+
+    // add a (helper) class based on the @weight argument
+    if (this.args.weight) {
+      classes.push(`hds-font-weight-${this.args.weight}`);
+    }
+
+    // add a class based on the @align argument
+    if (this.align) {
+      classes.push(`hds-text--align-${this.align}`);
+    }
+
+    // add a (helper) class based on the @color argument (if pre-defined)
+    if (this.predefinedColor) {
+      classes.push(`hds-foreground-${this.predefinedColor}`);
+    }
+
+    return classes.join(' ');
+  }
+}

package/app/components/hds/text/body.js

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

package/app/components/hds/text/code.js

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

package/app/components/hds/text/display.js

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

package/app/components/hds/text/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/text/index';

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

@@ -43,6 +43,7 @@
 @use "../components/table";
 @use "../components/tabs";
 @use "../components/tag";
+@use "../components/text";
 @use "../components/toast";
 @use "../components/tooltip";
 // END COMPONENT CSS FILES IMPORTS

package/app/styles/components/alert.scss

@@ -63,9 +63,9 @@
     border-radius: 5px;
   }
 
-  // Notice: in the future this may become a "Link::Inline" component (for now we declare directly the same styles here)
-  a {
-    color: var(--token-color-foreground-action);
+  // Default styling for bare HTML links not using HDS::Link components
+  a:not([class*="hds-"]) {
+    color: var(--token-color-foreground-strong);
 
     &:focus,
     &:focus-visible {
@@ -75,11 +75,11 @@
     }
 
     &:hover {
-      color: var(--token-color-foreground-action-hover);
+      color: var(--token-color-foreground-primary);
     }
 
     &:active {
-      color: var(--token-color-foreground-action-active);
+      color: var(--token-color-foreground-faint);
     }
   }
 }

package/app/styles/components/dropdown.scss

@@ -530,15 +530,17 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
     margin-top: 2px;
     margin-right: 8px;
 
-    &[disabled] ~ .hds-dropdown-list-item__label,
     &[disabled] ~ .hds-dropdown-list-item__icon,
-    &[disabled] ~ .hds-dropdown-list-item__count {
+    &[disabled] ~ .hds-dropdown-list-item__count,
+    &[disabled] ~ .hds-dropdown-list-item__text-content {
       color: var(--token-color-foreground-disabled);
     }
   }
 
   .hds-dropdown-list-item__label {
+    display: flex;
     flex-grow: 1;
+    align-items: flex-start;
     color: var(--token-color-foreground-primary);
   }
 
@@ -551,7 +553,8 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
 
 // COUNT
 .hds-dropdown-list-item__count {
-  margin-left: 8px;
+  margin-left: auto;
+  padding-left: 8px;
   color: var(--token-color-foreground-faint);
   line-height: 20px; // replicating the resulted height of the list item
 }

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

@@ -11,9 +11,13 @@ $hds-form-masked-input-button-size: 24px;
 
 .hds-form-masked-input {
   position: relative;
+  display: grid;
+  grid-template-areas: "input copy-button";
+  grid-template-columns: 1fr auto;
   width: 100%;
 
   .hds-form-masked-input__control {
+    grid-area: input;
     padding-right: calc(var(--token-form-control-padding) + $hds-form-masked-input-button-size);
   }
 }
@@ -36,6 +40,7 @@ $hds-form-masked-input-button-size: 24px;
   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));
+  grid-area: input;
   width: $hds-form-masked-input-button-size;
   height: $hds-form-masked-input-button-size;
   padding: 2px;
@@ -44,3 +49,9 @@ $hds-form-masked-input-button-size: 24px;
   border-color: transparent;
   cursor: pointer;
 }
+
+.hds-form-masked-input__copy-button {
+  grid-area: copy-button;
+  align-self: flex-start;
+  margin-left: 8px;
+}

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", "waypoint" );
+$hds-icon-tile-colors-products: ( "boundary", "consul", "hcp", "nomad", "packer", "terraform", "vagrant", "vault", "vault-secrets", "waypoint" );
 $hds-icon-tile-border-width: 1px;
 $hds-icon-tile-box-shadow: 0 1px 1px rgba(#656a76, 0.05);
 

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

@@ -21,7 +21,7 @@ $hds-link-standalone-border-width: 1px;
   align-items: center;
   justify-content: center;
   width: fit-content;
-  font-weight: var(--token-typography-font-weight-medium);
+  font-weight: var(--token-typography-font-weight-regular);
   font-family: var(--token-typography-font-stack-text);
   background-color: transparent; // needs to exist for a11y
   border: $hds-link-standalone-border-width solid transparent; // needs to exist AND be transparent for a11y

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

@@ -21,11 +21,6 @@ $hds-stepper-indicator-step-size: 24px;
   width: 100%;
   height: 100%;
   filter: drop-shadow(0 1px 1px rgba(101, 106, 118, 5%));
-
-  path {
-    fill: --status-fill-color;
-    stroke: --status-stroke-color;
-  }
 }
 
 .hds-stepper-indicator-step__status {
@@ -42,13 +37,11 @@ $hds-stepper-indicator-step-size: 24px;
 .hds-stepper-indicator-step__icon {
   width: 12px;
   height: 12px;
-  color: --status-text-color;
 }
 
 .hds-stepper-indicator-step__text {
   width: 20px;
   overflow: hidden;
-  color: --status-text-color;
   font-weight: var(--token-typography-font-weight-medium);
   font-size: 0.8125rem;
   font-family: var(--token-typography-font-stack-text);

package/app/styles/components/text.scss

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// TEXT
+//
+
+// .hds-text {}
+
+// ALIGNMENT
+
+.hds-text--align-left {
+  text-align: left;
+}
+
+.hds-text--align-center {
+  text-align: center;
+}
+
+.hds-text--align-right {
+  text-align: right;
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "2.10.0",
+  "version": "2.12.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -41,8 +41,8 @@
   "dependencies": {
     "@ember/render-modifiers": "^2.0.5",
     "@ember/test-waiters": "^3.0.2",
-    "@hashicorp/design-system-tokens": "^1.7.0",
-    "@hashicorp/ember-flight-icons": "^3.1.0",
+    "@hashicorp/design-system-tokens": "^1.8.0",
+    "@hashicorp/ember-flight-icons": "^3.1.2",
     "dialog-polyfill": "^0.5.6",
     "ember-a11y-refocus": "^3.0.2",
     "ember-auto-import": "^2.6.3",
@@ -54,7 +54,6 @@
     "ember-composable-helpers": "^4.5.0",
     "ember-focus-trap": "^1.0.2",
     "ember-keyboard": "^8.2.0",
-    "ember-named-blocks-polyfill": "^0.2.5",
     "ember-stargate": "^0.4.3",
     "ember-style-modifier": "^3.0.1",
     "ember-truth-helpers": "^3.1.1",