@hashicorp/design-system-components 1.8.1 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,70 @@
 # @hashicorp/design-system-components
 
+## 2.1.0
+
+### Minor Changes
+
+- [#1258](https://github.com/hashicorp/design-system/pull/1258) [`3466d2279`](https://github.com/hashicorp/design-system/commit/3466d2279191504442029976a4e18d3ca99015bf) Thanks [@MelSumner](https://github.com/MelSumner)! - Adds Hds::ApplicationState component
+
+### Patch Changes
+
+- [#1291](https://github.com/hashicorp/design-system/pull/1291) [`b2c21a86e`](https://github.com/hashicorp/design-system/commit/b2c21a86ee681d53e728fa5c52192b9003762ea9) Thanks [@didoo](https://github.com/didoo)! - Fixed missing inset shadow for `TextInput`, `Textarea`, `Checkbox`, `Radio`, `PowerSelect` overrides
+
+## 2.0.0
+
+### Major Changes
+
+- [#1185](https://github.com/hashicorp/design-system/pull/1185) [`a883e7fd7`](https://github.com/hashicorp/design-system/commit/a883e7fd763ae7a93ecc5ef3d49ed0230b48ea11) Thanks [@alex-ju](https://github.com/alex-ju)! - Add `Checkmark`, `Checkbox` and `Radio` as `Hds::Dropdown::ListItem`s
+
+  Rename `Hds::Dropdown::ListItem` internal CSS classes as follows:
+
+  - `hds-dropdown-list-item--copy-item` → `hds-dropdown-list-item--variant-copy-item`
+  - `hds-dropdown-list-item--description` → `hds-dropdown-list-item--variant-description`
+  - `hds-dropdown-list-item--generic` → `hds-dropdown-list-item--variant-generic`
+  - `hds-dropdown-list-item--interactive` → `hds-dropdown-list-item--variant-interactive`
+  - `hds-dropdown-list-item--separator` → `hds-dropdown-list-item--variant-separator`
+  - `hds-dropdown-list-item--title` → `hds-dropdown-list-item--variant-title`
+
+  **Note:** If test assertions are relying on these class names, tests will fail. If extensions/overrides have been applied to these classes, they will suffer visual changes.
+
+- [#1212](https://github.com/hashicorp/design-system/pull/1212) [`6e79216a8`](https://github.com/hashicorp/design-system/commit/6e79216a880ae140cce15f1dc6494f0aeca8e0b8) Thanks [@alex-ju](https://github.com/alex-ju)! - Add `Hds::Dropdown::Header` and `Hds::Dropdown::Footer` as generic blocks to `Hds::Dropdown`
+
+  Rename `Hds::Dropdown` internal CSS class `hds-dropdown-list` → `hds-dropdown__list`
+
+  The `hds-dropdown__list` element is now wrapped in a `hds-dropdown__content` element to accommodate the new header and footer elements. As a result, the following modifiers will be applied to the wrapper element.
+
+  - `hds-dropdown-list--fixed-width` → `hds-dropdown__content--fixed-width`
+  - `hds-dropdown-list--position-left` → `hds-dropdown__content--position-left`
+  - `hds-dropdown-list--position-right` → `hds-dropdown__content--position-right`
+
+  **Note:** If test assertions are relying on these class names, tests will fail. If extensions/overrides have been applied to these classes, they will suffer visual changes.
+
+- [#1266](https://github.com/hashicorp/design-system/pull/1266) [`082842b59`](https://github.com/hashicorp/design-system/commit/082842b59321f843c4955e4cdaf2ce2674a8913d) Thanks [@alex-ju](https://github.com/alex-ju)! - Add `@icon`, `@count`, `@badge` and `@badgeCount` to `Dropdown::Toggle::Button`
+
+  `Hds::Dropdown::Toggle::Button` and `Hds::Dropdown::Toggle::Icon` now share the chevron element. As a result, we renamed internal CSS classes as follows:
+
+  - `hds-button__text` → `hds-dropdown-toggle-button__text`
+  - `hds-button__icon` → `hds-dropdown-toggle-chevron`
+
+  The icon element within `Hds::Dropdown::Toggle::Icon` no longer has the `hds-dropdown-toggle-icon__chevron` class and it's currently wrapped in the `hds-dropdown-toggle-chevron` container, similar to `Hds::Dropdown::Toggle::Button`.
+
+  The `Hds::Dropdown::Toggle::Icon` now has a solid border, for consistency with `Hds::Dropdown::Toggle::Button` and the secondary style of `Hds::Button`.
+
+  **Note:** If test assertions are relying on these class names, tests will fail. If extensions/overrides have been applied to these classes, they will suffer visual changes.
+
+### Minor Changes
+
+- [#1276](https://github.com/hashicorp/design-system/pull/1276) [`5ad29412d`](https://github.com/hashicorp/design-system/commit/5ad29412d2edc0cc4265d3c0bbbf388e821f1cc7) Thanks [@alex-ju](https://github.com/alex-ju)! - Allow small `@size` on `Dropdown::Toggle::Icon`
+
+- [#1262](https://github.com/hashicorp/design-system/pull/1262) [`3eb78b8de`](https://github.com/hashicorp/design-system/commit/3eb78b8de7c678cff977c9d3a677c47a3216caad) Thanks [@alex-ju](https://github.com/alex-ju)! - Add new `@listPositions` for `Dropdown` as follows:
+
+  - `bottom-left`
+  - `bottom-right` (default)
+  - `top-left`
+  - `top-right`
+
+  **Note:** `left` and `right` are now deprecated and will be removed in a future major release
+
 ## 1.8.1
 
 ### Patch Changes
@@ -382,32 +447,34 @@ This release signifies the first major release of the HashiCorp Design System. M
 
 ### Minor Changes (Some Breaking)
 
-- [#217](https://github.com/hashicorp/design-system/pull/217) [`210edd17`](https://github.com/hashicorp/design-system/commit/210edd17431e6e3097260aed0df5a8902f93b7f7) Thanks [@didoo](https://github.com/didoo)! - # Interactive
+- [#217](https://github.com/hashicorp/design-system/pull/217) [`210edd17`](https://github.com/hashicorp/design-system/commit/210edd17431e6e3097260aed0df5a8902f93b7f7) Thanks [@didoo](https://github.com/didoo)!
+
+#### Interactive
 
-  - Introduced `<Hds::Interactive>` (a generic, "utility" component used internally by all the interactive elements like buttons and links)
+- Introduced `<Hds::Interactive>` (a generic, "utility" component used internally by all the interactive elements like buttons and links)
 
-  # Button
+#### Button
 
-  - updated the button API to handle also links as `<a>`/`<LinkTo/LinkToExternal>`
-    - it can be used in place of the `<Hds::Link/LinkTo::CTA>` component (see below)
-    - when the button is a link - the text is underlined for differentiation with a normal button - ⚠️ **Visual change!** - the button responds to `space` key event
-  - removed the `@type` argument from the API in favour of the `type` native attribute - 🚨 **Breaking change!**
+- updated the button API to handle also links as `<a>`/`<LinkTo/LinkToExternal>`
+  - it can be used in place of the `<Hds::Link/LinkTo::CTA>` component (see below)
+  - when the button is a link - the text is underlined for differentiation with a normal button - ⚠️ **Visual change!** - the button responds to `space` key event
+- removed the `@type` argument from the API in favour of the `type` native attribute - 🚨 **Breaking change!**
 
-  # Link/LinkTo::CTA
+#### Link/LinkTo::CTA
 
-  - removed the `<Hds::Link/LinkTo::CTA>` component, in favour of `<Hds::Button>` component (see above) - 🚨 **Breaking change!**
+- removed the `<Hds::Link/LinkTo::CTA>` component, in favour of `<Hds::Button>` component (see above) - 🚨 **Breaking change!**
 
-  # Link::Inline
+#### Link::Inline
 
-  - added the `<Hds::Link::Inline>` component (with API very similar to the `<Hds::Link::Standalone>`)
+- added the `<Hds::Link::Inline>` component (with API very similar to the `<Hds::Link::Standalone>`)
 
-  # Dropdown
+#### Dropdown
 
-  - Updated the `Dropdown::ListItem::Interactive` to use the new `<Hds::Interactive>` component
+- Updated the `Dropdown::ListItem::Interactive` to use the new `<Hds::Interactive>` component
 
-  # Alert/Toast components
+#### Alert/Toast components
 
-  - Removed the `<LinkTo::Standalone>` action (now you can use directly `<Link::Standalone>`)
+- Removed the `<LinkTo::Standalone>` action (now you can use directly `<Link::Standalone>`)
 
 ## 0.11.2
 
@@ -427,9 +494,11 @@ This release signifies the first major release of the HashiCorp Design System. M
 
 ### Minor Changes (Some Breaking)
 
-- [#245](https://github.com/hashicorp/design-system/pull/245) [`c6de1018`](https://github.com/hashicorp/design-system/commit/c6de101880ec1c21971e3775e1a21b6cb9e69757) Thanks [@didoo](https://github.com/didoo)! - - Added `Alert` component
+- [#245](https://github.com/hashicorp/design-system/pull/245) [`c6de1018`](https://github.com/hashicorp/design-system/commit/c6de101880ec1c21971e3775e1a21b6cb9e69757) Thanks [@didoo](https://github.com/didoo)!
+  - Added `Alert` component
   - Added `Toast` component
-- [#259](https://github.com/hashicorp/design-system/pull/259) [`478b3069`](https://github.com/hashicorp/design-system/commit/478b3069e800cf2ccefba9b5475c72b024e25d16) Thanks [@didoo](https://github.com/didoo)! - - removed autofocus on first item for `Disclosure` component (and as a result also for `Breadcrumb` and `Dropdown` components) (🚨 Breaking)
+- [#259](https://github.com/hashicorp/design-system/pull/259) [`478b3069`](https://github.com/hashicorp/design-system/commit/478b3069e800cf2ccefba9b5475c72b024e25d16) Thanks [@didoo](https://github.com/didoo)!
+  - removed autofocus on first item for `Disclosure` component (and as a result also for `Breadcrumb` and `Dropdown` components) (🚨 Breaking)
   - updated focus state treatment for `Dropdown` component (🚨 Breaking)
 
 ### Patch Changes

package/addon/components/hds/application-state/body.hbs

@@ -0,0 +1,13 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<div class="hds-application-state__body" ...attributes>
+  {{#if (has-block)}}
+    {{yield}}
+  {{else}}
+    <p class="hds-application-state__body-text hds-typography-body-300">
+      {{@text}}
+    </p>
+  {{/if}}
+</div>

package/addon/components/hds/application-state/footer.hbs

@@ -0,0 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<div class={{this.classNames}} ...attributes>
+  {{yield (hash Link::Standalone=(component "hds/link/standalone"))}}
+</div>

package/addon/components/hds/application-state/footer.js

@@ -0,0 +1,30 @@
+import Component from '@glimmer/component';
+
+export default class HdsApplicationStateFooterComponent extends Component {
+  /**
+   * Indicate if the footer should have a top border or not.
+   *
+   * @param hasDivider
+   * @type {boolean}
+   * @default false
+   */
+  get hasDivider() {
+    return this.args.hasDivider || 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-application-state__footer'];
+
+    // add a class based on the existence of @hasDivider argument
+    if (this.hasDivider) {
+      classes.push(`hds-application-state__footer--has-divider`);
+    }
+
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/application-state/header.hbs

@@ -0,0 +1,20 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<div class="hds-application-state__header" ...attributes>
+  {{#if @icon}}
+    <div class="hds-application-state__icon">
+      <FlightIcon @name={{@icon}} @size="24" />
+    </div>
+  {{/if}}
+  <div class="hds-application-state__title hds-typography-display-400 hds-font-weight-semibold">
+    {{@title}}
+  </div>
+  {{#if @errorCode}}
+    <div class="hds-application-state__error-code hds-typography-body-100 hds-font-weight-medium">
+      Error
+      {{@errorCode}}
+    </div>
+  {{/if}}
+</div>

package/addon/components/hds/application-state/index.hbs

@@ -0,0 +1,13 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<div class="hds-application-state" ...attributes>
+  {{yield
+    (hash
+      Header=(component "hds/application-state/header")
+      Body=(component "hds/application-state/body")
+      Footer=(component "hds/application-state/footer")
+    )
+  }}
+</div>

package/addon/components/hds/dropdown/footer.hbs

@@ -0,0 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<div class="hds-dropdown__footer {{if @hasDivider 'hds-dropdown__footer--with-divider'}}" ...attributes>
+  {{yield}}
+</div>

package/addon/components/hds/dropdown/header.hbs

@@ -0,0 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<div class="hds-dropdown__header {{if @hasDivider 'hds-dropdown__header--with-divider'}}" ...attributes>
+  {{yield}}
+</div>

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

@@ -12,18 +12,25 @@
     }}
   </:toggle>
   <:content as |c|>
-    <ul class={{this.listClassNames}} {{style width=@width}}>
-      {{yield
-        (hash
-          close=c.close
-          CopyItem=(component "hds/dropdown/list-item/copy-item")
-          Description=(component "hds/dropdown/list-item/description")
-          Generic=(component "hds/dropdown/list-item/generic")
-          Interactive=(component "hds/dropdown/list-item/interactive")
-          Separator=(component "hds/dropdown/list-item/separator")
-          Title=(component "hds/dropdown/list-item/title")
-        )
-      }}
-    </ul>
+    <div class={{this.classNames}} {{style width=@width height=@height}}>
+      {{yield (hash Header=(component "hds/dropdown/header"))}}
+      <ul class="hds-dropdown__list" {{did-insert this.didInsertList}}>
+        {{yield
+          (hash
+            close=c.close
+            Checkbox=(component "hds/dropdown/list-item/checkbox")
+            Checkmark=(component "hds/dropdown/list-item/checkmark")
+            CopyItem=(component "hds/dropdown/list-item/copy-item")
+            Description=(component "hds/dropdown/list-item/description")
+            Generic=(component "hds/dropdown/list-item/generic")
+            Interactive=(component "hds/dropdown/list-item/interactive")
+            Radio=(component "hds/dropdown/list-item/radio")
+            Separator=(component "hds/dropdown/list-item/separator")
+            Title=(component "hds/dropdown/list-item/title")
+          )
+        }}
+      </ul>
+      {{yield (hash close=c.close Footer=(component "hds/dropdown/footer"))}}
+    </div>
   </:content>
 </Hds::Disclosure>

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

@@ -4,16 +4,25 @@
  */
 
 import Component from '@glimmer/component';
+import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 
-export const DEFAULT_POSITION = 'right';
-export const POSITIONS = ['right', 'left'];
+export const DEFAULT_POSITION = 'bottom-right';
+// TODO: retire 'right' and 'left' in favor of `bottom-right` and `bottom-left` https://github.com/hashicorp/design-system/pull/1262
+export const POSITIONS = [
+  'right',
+  'left',
+  'bottom-left',
+  'bottom-right',
+  'top-left',
+  'top-right',
+];
 
 export default class HdsDropdownIndexComponent extends Component {
   /**
    * @param listPosition
    * @type {string}
-   * @default primary
+   * @default bottom-right
    * @description Determines the position of the "list"
    */
   get listPosition() {
@@ -30,21 +39,29 @@ export default class HdsDropdownIndexComponent extends Component {
   }
 
   /**
-   * Get the class names to apply to the "list"
-   * @method DropdownIndex#listClassNames
-   * @return {string} The "class" attribute to apply to the "list" element
+   * Get the class names to apply to the content
+   * @method classNames
+   * @return {string} The "class" attribute to apply to the disclosed content
    */
-  get listClassNames() {
-    let classes = ['hds-dropdown-list'];
+  get classNames() {
+    let classes = ['hds-dropdown__content'];
 
     // add a class based on the @listPosition argument
-    classes.push(`hds-dropdown-list--position-${this.listPosition}`);
+    classes.push(`hds-dropdown__content--position-${this.listPosition}`);
 
     // add a class based on the @width argument
     if (this.args.width) {
-      classes.push('hds-dropdown-list--fixed-width');
+      classes.push('hds-dropdown__content--fixed-width');
     }
 
     return classes.join(' ');
   }
+
+  @action
+  didInsertList(element) {
+    let checkmarkItems = element.querySelectorAll(`[role="option"]`);
+    if (checkmarkItems.length) {
+      element.setAttribute('role', 'listbox');
+    }
+  }
 }

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

@@ -0,0 +1,19 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<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}}
+  </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/checkbox.js

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { getElementId } from '../../form/utils/getElementId';
+
+export default class HdsDropdownListItemCheckboxComponent extends Component {
+  /**
+   * Determines the unique ID to assign to the checkbox control
+   */
+  get id() {
+    return getElementId(this);
+  }
+}

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

@@ -0,0 +1,39 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{! template-lint-disable require-context-role require-presentational-children }}
+<li class={{this.classNames}}>
+  <Hds::Interactive
+    @current-when={{@current-when}}
+    @models={{hds-link-to-models @model @models}}
+    @query={{hds-link-to-query @query}}
+    @replace={{@replace}}
+    @route={{@route}}
+    @isRouteExternal={{@isRouteExternal}}
+    @href={{@href}}
+    @isHrefExternal={{@isHrefExternal}}
+    class="hds-dropdown-list-item__interactive"
+    ...attributes
+    role="option"
+    aria-selected={{if @selected "true" "false"}}
+  >
+    {{#if @icon}}
+      <div class="hds-dropdown-list-item__interactive-icon">
+        <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
+      </div>
+    {{/if}}
+    <div class="hds-dropdown-list-item__interactive-text hds-typography-body-200 hds-font-weight-medium">
+      {{yield}}
+    </div>
+    {{#if @count}}
+      <span class="hds-dropdown-list-item__count hds-typography-body-100 hds-font-weight-medium">{{@count}}</span>
+    {{/if}}
+    <span class="hds-dropdown-list-item__checkmark">
+      {{#if @selected}}
+        <FlightIcon class="hds-dropdown-list-item__checkmark-icon" @name="check" @isInlineBlock={{false}} />
+      {{/if}}
+    </span>
+  </Hds::Interactive>
+</li>

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

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+export default class HdsDropdownListItemCheckmarkComponent extends Component {
+  /**
+   * 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-dropdown-list-item',
+      'hds-dropdown-list-item--color-action',
+      'hds-dropdown-list-item--variant-checkmark',
+    ];
+
+    // add a class based on the @selected argument
+    if (this.args.selected) {
+      classes.push('hds-dropdown-list-item--variant-checkmark-selected');
+    }
+
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/dropdown/list-item/copy-item.js

@@ -35,7 +35,7 @@ export default class HdsDropdownListItemCopyItemComponent extends Component {
   get classNames() {
     let classes = [
       'hds-dropdown-list-item',
-      'hds-dropdown-list-item--copy-item',
+      'hds-dropdown-list-item--variant-copy-item',
     ];
 
     return classes.join(' ');

package/addon/components/hds/dropdown/list-item/description.js

@@ -31,7 +31,7 @@ export default class HdsDropdownListItemDescriptionComponent extends Component {
   get classNames() {
     let classes = [
       'hds-dropdown-list-item',
-      'hds-dropdown-list-item--description',
+      'hds-dropdown-list-item--variant-description',
     ];
 
     // add classes for the typographic style

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

@@ -2,6 +2,6 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<li class="hds-dropdown-list-item hds-dropdown-list-item--generic" ...attributes>
+<li class="hds-dropdown-list-item hds-dropdown-list-item--variant-generic" ...attributes>
   {{yield}}
 </li>

package/addon/components/hds/dropdown/list-item/interactive.js

@@ -53,7 +53,7 @@ export default class HdsDropdownListItemInteractiveComponent extends Component {
   get classNames() {
     let classes = [
       'hds-dropdown-list-item',
-      'hds-dropdown-list-item--interactive',
+      'hds-dropdown-list-item--variant-interactive',
     ];
 
     // add a class based on the @color argument

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

@@ -0,0 +1,17 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<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}}
+</li>

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

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { getElementId } from '../../form/utils/getElementId';
+
+export default class HdsDropdownListItemRadioComponent extends Component {
+  /**
+   * Determines the unique ID to assign to the radio control
+   */
+  get id() {
+    return getElementId(this);
+  }
+}

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

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

package/addon/components/hds/dropdown/list-item/title.js

@@ -29,7 +29,10 @@ export default class HdsDropdownListItemTitleComponent extends Component {
    * @return {string} The "class" attribute to apply to the component.
    */
   get classNames() {
-    let classes = ['hds-dropdown-list-item', 'hds-dropdown-list-item--title'];
+    let classes = [
+      'hds-dropdown-list-item',
+      'hds-dropdown-list-item--variant-title',
+    ];
 
     // add classes for the typographic style
     classes.push('hds-typography-body-100');

package/addon/components/hds/dropdown/toggle/button.hbs

@@ -2,28 +2,37 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-{{!
-// >>>>>>>>>>> WARNING <<<<<<<<<<
-//
-// Notice: in this component we're directly using the `Hds::Button` component
-// (and adding a specialized class for the "toggle-button" variant, see below)
-// If you need to change the styling of the `Button` component, remember that this will impact also
-// this component too.
-// If instead you need to change only the styling of the `toggle-button` component, you can do it
-// in the CSS file using the specialized class declared there.
-// This is NOT a standard approach that we use in the HDS design system implementation, but it's been
-// the least worst option we could find to solve the problem of sharing the exact same style of the
-// `Button (primary)` with other components.
-}}
-
-<Hds::Button
+<button
   class={{this.classNames}}
-  @text={{this.text}}
-  @icon="chevron-down"
-  @iconPosition="trailing"
-  @color={{this.color}}
-  @size={{@size}}
   ...attributes
+  type="button"
   aria-expanded={{if @isOpen "true" "false"}}
   {{on "click" this.onClick}}
-/>
+>
+  {{#if @icon}}
+    <div class="hds-dropdown-toggle-button__icon">
+      <FlightIcon @name={{@icon}} @stretched={{true}} />
+    </div>
+  {{/if}}
+  <div class="hds-dropdown-toggle-button__text">
+    {{this.text}}
+  </div>
+  {{#if @count}}
+    <Hds::BadgeCount
+      @text={{@count}}
+      @size="small"
+      @type={{this.badgeType}}
+      class="hds-dropdown-toggle-button__count"
+    />
+  {{/if}}
+  {{#if @badge}}
+    <Hds::Badge
+      @text={{@badge}}
+      @icon={{@badgeIcon}}
+      @size="small"
+      @type={{this.badgeType}}
+      class="hds-dropdown-toggle-button__badge"
+    />
+  {{/if}}
+  <Hds::Dropdown::Toggle::Chevron />
+</button>