@hashicorp/design-system-components 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @hashicorp/design-system-components
 
+## 0.11.0
+
+### Minor Changes
+
+- [#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
+
+### Patch Changes
+
+- [#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)
+  - updated focus state treatment for `Dropdown` component
+
+* [#225](https://github.com/hashicorp/design-system/pull/225) [`f1f07179`](https://github.com/hashicorp/design-system/commit/f1f0717952b3e6b41676135cf00e77a6e55579ec) Thanks [@Dhaulagiri](https://github.com/Dhaulagiri)! - update to ember-keyboard@8.1.0 in packages/components
+
+- [#265](https://github.com/hashicorp/design-system/pull/265) [`79bc3e99`](https://github.com/hashicorp/design-system/commit/79bc3e99cd5cc6cb60fc82286d5726c0d0ffbd82) Thanks [@Dhaulagiri](https://github.com/Dhaulagiri)! - npx ember-cli-update@4.3.0 dependency updates
+
+* [#253](https://github.com/hashicorp/design-system/pull/253) [`21786983`](https://github.com/hashicorp/design-system/commit/21786983d4ebbb3f38a72d4d105504169bfeda78) Thanks [@MelSumner](https://github.com/MelSumner)! - bugfix for icon size in copy-item component
+
 ## 0.10.0
 
 ### Minor Changes

package/NEW-COMPONENT-CHECKLIST.md

@@ -5,13 +5,74 @@ This is the quest issue/engineering checklist for the COMPONENT_NAME Component.
 ## Pre-Flight Checklist
 Update this list and these links as appropriate.
 
-- [Component Requirement Document (CRD)](url_here): This file should exist before any code is written.
-- [FIGMA Design](url_here): Since we are trying to align the component API naming with the same terms used in the Figma file, it is likely useful to have a fairly stable Figma design before we create a component; it should definitely be finalized before the component ships, however.
-- [Design System Website](https://design-system-website.vercel.app/?path=/story/example-introduction--page) (storybook of storybooks): use for reference, to consider existing features that we might need to replicate in the component.
+- [Component Audit](https://www.figma.com/file/h3LtloARmbYVwh7z6XWHVb/Component-Audits-FY23?node-id=0%3A1): This audit should be completed by ambassadors before any work gets started.
+- [Component Requirement Document (CRD)](https://docs.google.com/document/d/1kGcdfnb_z5tVUUvkSJGQPOssNd1yl2SVyd7bqk1KXII/): This file should exist before any design explorations or code is written.
+- ["System of Systems" Storybook](https://unofficial-design-system-search.vercel.app) (storybook of storybooks): use for reference, to consider existing features that we might need to replicate in the component.
+
+
+## Design Checklist
+The design checklist has 5 parts:
+1. creating the branch
+2. design explorations and iterations
+3. documentation
+4. release
+5. testing
+
+The design process is largely cyclical, so some of these steps may need to be repeated until approval.
+
+### Component Creation
+- [ ] [create a branch](https://help.figma.com/hc/en-us/articles/360063144053-Create-branches-and-merge-changes#Create_a_branch) in the [product components ui kit](https://www.figma.com/file/noyY6dUMDYjmySpHcMjhkN/HDS-Product---Components)
+- [ ] add a new page for the component, as needed
+- [ ] copy & paste the [stickersheet template](https://www.figma.com/file/noyY6dUMDYjmySpHcMjhkN/HDS-Product---Components?node-id=2279%3A26800) found in UI Helpers to the new page
+  - [ ] update the status badge to "In progress"
+  - [ ] change "{DOC TYPE}" to "STICKERSHEET"
+  - [ ] change "{Component name}" to the name of the component
+  - [ ] delete the sunset notice
+- [ ] **design**
+  - [ ] work through design explorations, providing 2-3 visual directions based on existing [foundations](https://www.figma.com/file/oQsMzMMnynfPWpMEt91OpH/HDS-Product---Foundations?node-id=2916%3A4) and patterns, as well as the findings from the audit and requirements from the CRD
+  - [ ] review with appropriate stakeholders (typically HDS designers, engineering partner, ambassadors) and iterate
+  - [ ] review for a11y considerations and iterate, as necessary
+  - [ ] review with design leadership and iterate, as necessary
+  - [ ] once approved, build out the design as a component
+    - ensure the variant and property names align with what was discussed/decided on with your engineering partner
+  - [ ] test the component with HDS designers and iterate, as necessary
+  - [ ] sync with your engineering partner (pseudo handoff)
+    - let them know it's been design approved and discuss any remaining questions (this should be an ongoing process as well)
+- [ ] **documentation**
+  - all documentation should be contained within frames so it can be easily linked to
+  - [ ] stickersheet
+    - make sure the component instances can be easily selected and other layers are locked
+  - [ ] design guidelines
+    - when complete, lock this frame
+  - [ ] figma tips, as necessary
+    - when complete, lock this frame
+  - [ ] migration details, as necessary
+    - when complete, lock this frame
+  - [ ] let your engineering partner know that design guidelines are ready to be added to the scrappy site (they will add it themselves)
+- [ ] **release**
+  - [ ] lock and hide the components leaving only the stickersheets and docs visible, and change the header's badge to Experimental
+  - [ ] add release notes to the changelog
+  - [ ] review with situationally appropriate reviewers to get final approval
+  - [ ] merge the branch
+  - [ ] publish the ui kit
+    - Important: do not communicate this release to consumers yet! (this will be done later in the process)
+- [ ] **testing**
+  - [ ] add a new page to the [playground](https://www.figma.com/file/95YqaJF4TNV72ucXbyC7A0/Playground?node-id=302%3A10) file and prepare a frame for each ambassador to test
+    - provide a variety (basic to complex) of screenshots to recreate based on real world examples from the audit
+  - [ ] test the component with ambassadors
+  - if iterations are needed, work through the process until approved (don't forget to branch!)
+- [ ] **final release**
+  - this comes after ambassadors have tested the component in Figma and no other adjustments are needed
+  - [ ] if changes were required, follow the steps under "release" again
+  - [ ] share about the release in the slack channel [#team-design-systems](https://hashicorp.slack.com/archives/C7KTUHNUS) and let consumers know that the component is available for use in Figma
+
 
 ## Engineering Checklist
 The engineering checklist has six parts: creating the feature branch, component template, component backing class, component style, tests, and documentation.
 
+### Dependency
+- Since we are trying to align the component API naming with the same terms used in the Figma file, it is likely useful to have a fairly stable Figma design before we create a component; it should definitely be finalized before the component ships, however.
+
 ### Component Creation
 
 - [ ] create new branch from main for the component (`git checkout -b USER/COMPONENT-NAME`)

package/README.md

@@ -9,8 +9,8 @@ A package containing the components for the HashiCorp Design System.
 Compatibility
 ------------------------------------------------------------------------------
 
-* Ember.js v3.20 or above
-* Ember CLI v3.20 or above
+* Ember.js v3.24 or above
+* Ember CLI v3.24 or above
 * Node.js v12 or above
 
 

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

@@ -0,0 +1,35 @@
+<div class={{this.classNames}} role="alert" aria-live="polite" ...attributes>
+  {{#if this.icon}}
+    <div class="hds-alert__icon">
+      <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} @isInlineBlock={{false}} />
+    </div>
+  {{/if}}
+
+  <div class="hds-alert__content">
+    <div class="hds-alert__text">
+      {{#if @title}}
+        <div class="hds-alert__title">{{@title}}</div>
+      {{/if}}
+      {{#if @description}}
+        <div class="hds-alert__description">{{html-safe @description}}</div>
+      {{/if}}
+    </div>
+
+    <div class="hds-alert__actions">
+      {{yield
+        (hash
+          Button=(component "hds/button" size="small")
+          Link::Standalone=(component "hds/link/standalone" size="small")
+          LinkTo::Standalone=(component "hds/link-to/standalone" size="small")
+        )
+      }}
+    </div>
+    {{yield (hash Generic=(component "hds/yield"))}}
+  </div>
+
+  {{#if this.onDismiss}}
+    <button class="hds-alert__dismiss" type="button" aria-label="Dismiss" {{on "click" this.onDismiss}}>
+      <FlightIcon @name="x" @size="16" @isInlineBlock={{false}} />
+    </button>
+  {{/if}}
+</div>

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

@@ -0,0 +1,128 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const TYPES = ['page', 'inline', 'compact'];
+export const DEFAULT_COLOR = 'neutral';
+export const COLORS = [
+  'neutral',
+  'highlight',
+  'success',
+  'warning',
+  'critical',
+];
+export const MAPPING_COLORS_TO_ICONS = {
+  neutral: 'info',
+  highlight: 'info',
+  success: 'check-circle',
+  warning: 'alert-triangle',
+  critical: 'alert-diamond',
+};
+
+export default class HdsAlertIndexComponent extends Component {
+  constructor() {
+    super(...arguments);
+
+    assert(
+      `@type for "Hds::Alert" must be one of the following: ${TYPES.join(
+        ', '
+      )}; received: ${this.args.type}`,
+      TYPES.includes(this.args.type)
+    );
+  }
+
+  /**
+   * @param color
+   * @type {enum}
+   * @default neutral
+   * @description Determines the color scheme for the alert.
+   */
+  get color() {
+    let { color = DEFAULT_COLOR } = this.args;
+
+    assert(
+      `@color for "Hds::Alert" must be one of the following: ${COLORS.join(
+        ', '
+      )}; received: ${color}`,
+      COLORS.includes(color)
+    );
+
+    return color;
+  }
+
+  /**
+   * @param icon
+   * @type {string}
+   * @default null
+   * @description The name of the icon to be used.
+   */
+  get icon() {
+    let { icon } = this.args;
+
+    // If `icon` isn't passed, use the pre-defined one from `color`
+    if (icon === undefined) {
+      if (this.args.type === 'compact') {
+        // for the "compact" type by default we use filled icons
+        return `${MAPPING_COLORS_TO_ICONS[this.color]}-fill`;
+      } else {
+        // for all the other types by default we use outlined icons
+        return MAPPING_COLORS_TO_ICONS[this.color];
+      }
+      // If `icon` is set explicitly to false, user doesn't want any icon in the alert
+    } else if (icon === false) {
+      assert(
+        `@icon for "Hds::Alert" with @type "compact" is required`,
+        this.args.type !== 'compact'
+      );
+
+      return false;
+    } else {
+      // If a name for `icon` is passed, set FlightIcon to that name
+      return icon;
+    }
+  }
+
+  /**
+   * @param onDismiss
+   * @type {function}
+   * @default () => {}
+   */
+  get onDismiss() {
+    let { onDismiss } = this.args;
+
+    if (typeof onDismiss === 'function') {
+      return onDismiss;
+    } else {
+      return false;
+    }
+  }
+
+  /**
+   * @param iconSize
+   * @type {string}
+   * @description ensures that the correct icon size is used. Automatically calculated.
+   */
+  get iconSize() {
+    if (this.args.type === 'compact') {
+      return '16';
+    } else {
+      return '24';
+    }
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method Alert#classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-alert'];
+
+    // Add a class based on the @type argument
+    classes.push(`hds-alert--type-${this.args.type}`);
+
+    // Add a class based on the @color argument
+    classes.push(`hds-alert--color-${this.color}`);
+
+    return classes.join(' ');
+  }
+}

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

@@ -7,7 +7,7 @@
       class="hds-disclosure__content"
       {{focus-trap
         isActive=this.isActive
-        shouldSelfFocus=false
+        shouldSelfFocus=true
         focusTrapOptions=(hash clickOutsideDeactivates=this.clickOutsideDeactivates onDeactivate=this.onDeactivate)
       }}
     >

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

@@ -4,7 +4,7 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
 export default class HdsDropdownListItemCopyItemComponent extends Component {
-  @tracked isSuccess = this.args.isSuccess ?? false;
+  @tracked isSuccess = false;
 
   /**
    * @param text
@@ -37,12 +37,19 @@ export default class HdsDropdownListItemCopyItemComponent extends Component {
   }
 
   @action
-  copyCode() {
-    navigator.clipboard.writeText(this.args.text);
-    // this if statement resolves to [object Promise] so maybe some improvements
-    // could be made here
-    if (navigator.clipboard.readText()) {
+  async copyCode() {
+    // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard
+    await navigator.clipboard.writeText(this.args.text);
+    const result = await navigator.clipboard.readText();
+
+    if (result === this.args.text) {
       this.isSuccess = true;
+      // console.log(`result is ${result}`);
+
+      // make it fade back to the default state
+      setTimeout(() => {
+        this.isSuccess = false;
+      }, 1000);
     }
   }
 }

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

@@ -0,0 +1,15 @@
+<Hds::Alert
+  class="hds-toast"
+  @type="inline"
+  @color={{@color}}
+  @icon={{@icon}}
+  @title={{@title}}
+  @description={{@description}}
+  @onDismiss={{@onDismiss}}
+  ...attributes
+  as |A|
+>
+  {{yield
+    (hash Button=A.Button Link::Standalone=A.Link::Standalone LinkTo::Standalone=A.LinkTo::Standalone Generic=A.Generic)
+  }}
+</Hds::Alert>

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

@@ -0,0 +1,3 @@
+<div ...attributes>
+  {{yield}}
+</div>

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

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/alert/index';

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

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/toast/index';

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

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/yield/index';

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

@@ -5,6 +5,7 @@
 @use "helpers/focus-ring";
 @use "helpers/typography";
 
+@use "../components/alert";
 @use "../components/badge";
 @use "../components/badge-count";
 @use "../components/breadcrumb";
@@ -15,6 +16,7 @@
 @use "../components/icon-tile";
 @use "../components/link/cta";
 @use "../components/link/standalone";
+@use "../components/toast";
 
 .sr-only {
 	border: 0 !important;

package/app/styles/components/alert.scss

@@ -0,0 +1,261 @@
+//
+// ALERT
+//
+// properties within each class are sorted alphabetically
+//
+//
+
+@use "../mixins/focus-ring" as *;
+
+.hds-alert {
+  align-items: flex-start;
+  display: flex;
+}
+
+// ICON
+
+.hds-alert__icon {
+  flex: none;
+  height: 20px;
+  margin-right: 12px;
+  width: 20px;
+
+  .hds-alert--type-compact & {
+    height: 14px;
+    width: 14px;
+  }
+}
+
+// CONTENT (TEXT + ACTIONS + GENERIC)
+
+.hds-alert__content {
+  flex: 1 1 auto;
+}
+
+// TEXT (TITLE & DESCRIPTION)
+
+.hds-alert__text {
+  color: var(--token-color-foreground-warning-on-surface);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--token-typography-body-200-font-family);
+  font-size: var(--token-typography-body-200-font-size);
+  justify-content: center;
+  line-height: var(--token-typography-body-200-line-height);
+
+  .hds-alert--type-compact & {
+    font-family: var(--token-typography-body-100-font-family);
+    font-size: var(--token-typography-body-100-font-size);
+    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);
+
+  .hds-alert__title + & {
+    margin-top: 4px;
+  }
+
+  // we add very basic styling for elements that may be injected via the "description" string
+
+  strong {
+    font-weight: var(--token-typography-font-weight-semibold);
+  }
+
+  code, pre {
+    font-family: var(--token-typography-font-stack-code);
+  }
+
+  // Notice: in the future this may become a "Link::Inline" component (for now we declare the styles directly here)
+  a {
+    color: var(--token-color-foreground-action);
+    // At the moment the "focus" state is not well defined in design (the one that is in Figma does not work) so we just apply a simple color to the default outline
+    outline-color: var(--token-color-focus-action-external);
+
+    &:hover {
+      color: var(--token-color-foreground-action-hover);
+    }
+
+    &:active {
+      color: var(--token-color-foreground-action-active);
+    }
+  }
+}
+
+// ACTIONS
+
+.hds-alert__actions {
+  align-items: center;
+  display: flex;
+
+  > * {
+    margin-top: 16px;
+  }
+
+  > * + * {
+    margin-left: 8px;
+  }
+}
+
+// DISMISS
+
+.hds-alert__dismiss {
+  background-color: transparent;
+  border: none;
+  color: var(--token-color-foreground-faint);
+  cursor: pointer;
+  flex: none;
+  margin-left: 16px;
+  margin-top: 2px; // for alignment with the main icon and text
+  padding: 0;
+
+  .hds-alert--type-compact & {
+    margin-top: 1px;
+  }
+
+  &:hover,
+  &.is-hover {
+    &::before { // we re-use the pseudo-element created by the "focus-ring" mixin
+      background-color: rgba(#dedfe3, 0.4);
+    }
+  }
+
+  // notice: this is used not only for the focus, but also to increase the clickable area
+  @include hds-focus-ring-with-pseudo-element($top: -4px, $right: -4px, $bottom: -4px, $left: -4px);
+
+  &:active,
+  &.is-active {
+    color: var(--token-color-foreground-secondary);
+    &::before {
+      background-color: rgba(#dedfe3, 0.4);
+      border: 1px solid var(--token-color-border-strong);
+    }
+  }
+}
+
+
+// TYPES
+
+.hds-alert--type-page {
+  padding: 16px 48px; // by design
+}
+
+.hds-alert--type-inline {
+  border-radius: 6px;
+  border-style: solid;
+  border-width: 1px;
+  padding: 16px;
+}
+
+.hds-alert--type-compact {
+  .hds-alert__icon {
+    margin-right: 8px;
+    margin-top: 2px; // notice: the icon size for the "compact" type is 14px, not 20px, so this 2px extra are needed to reach the exact same height as the "description" text line-height
+  }
+
+  // extra safety
+  .hds-alert__title {
+    display: none;
+    & + .hds-alert__description {
+      margin-top: 0;
+    }
+  }
+}
+
+// COLORS (& TYPES)
+
+.hds-alert--color-neutral {
+
+  &.hds-alert--type-page {
+    background-color: var(--token-color-surface-faint);
+    box-shadow: 0px 1px 0px 0px var(--token-color-palette-alpha-300);
+  }
+
+  &.hds-alert--type-inline {
+    background-color: var(--token-color-surface-faint);
+    border-color: var(--token-color-border-strong); // notice: in the "neutral" color the "inline" has a slightly darker border color compared to the others to increase contrast (eg. could be used on a light gray background)
+  }
+
+  // different color by design
+  .hds-alert__icon {
+    color: var(--token-color-foreground-faint);
+  }
+
+  .hds-alert__title {
+    color: var(--token-color-foreground-primary);
+  }
+}
+
+.hds-alert--color-highlight {
+
+  &.hds-alert--type-page {
+    background-color: var(--token-color-surface-highlight);
+    box-shadow: 0px 1px 0px 0px var(--token-color-border-highlight);
+  }
+
+  &.hds-alert--type-inline {
+    background-color: var(--token-color-surface-highlight);
+    border-color: var(--token-color-border-highlight);
+  }
+
+  .hds-alert__icon, .hds-alert__title {
+    color: var(--token-color-foreground-highlight-on-surface);
+  }
+}
+
+.hds-alert--color-success {
+
+  &.hds-alert--type-page {
+    background-color: var(--token-color-surface-success);
+    box-shadow: 0px 1px 0px 0px var(--token-color-border-success);
+  }
+
+  &.hds-alert--type-inline {
+    background-color: var(--token-color-surface-success);
+    border-color: var(--token-color-border-success);
+  }
+
+  .hds-alert__icon, .hds-alert__title {
+    color: var(--token-color-foreground-success-on-surface);
+  }
+}
+
+.hds-alert--color-warning {
+
+  &.hds-alert--type-page {
+    background-color: var(--token-color-surface-warning);
+    box-shadow: 0px 1px 0px 0px var(--token-color-border-warning);
+  }
+
+  &.hds-alert--type-inline {
+    background-color: var(--token-color-surface-warning);
+    border-color: var(--token-color-border-warning);
+  }
+
+  .hds-alert__icon, .hds-alert__title {
+    color: var(--token-color-foreground-warning-on-surface);
+  }
+}
+
+.hds-alert--color-critical {
+
+  &.hds-alert--type-page {
+    background-color: var(--token-color-surface-critical);
+    box-shadow: 0px 1px 0px 0px var(--token-color-border-critical);
+  }
+
+  &.hds-alert--type-inline {
+    background-color: var(--token-color-surface-critical);
+    border-color: var(--token-color-border-critical);
+  }
+
+  .hds-alert__icon, .hds-alert__title {
+    color: var(--token-color-foreground-critical-on-surface);
+  }
+}

package/app/styles/components/dropdown.scss

@@ -205,6 +205,7 @@ $hds-dropdown-toggle-border-radius: 5px;
 
 .hds-dropdown-list-item__copy-item-icon {
   color: var(--token-color-foreground-action);
+  flex: none;
   margin-left: 8px;
 }
 
@@ -273,9 +274,18 @@ $hds-dropdown-toggle-border-radius: 5px;
     // Notice: to avoid too much duplication we define two local CSS variables
     // and define their values in the color variants below
 
+    &:hover,
+    &.is-hover {
+      color: var(--current-color-hover);
+      &::before {
+        background-color: currentColor;
+      }
+    }
+
     // default focus for browsers that still rely on ":focus"
     &:focus,
     &.is-focus {
+      color: var(--current-color-focus);
       &::after {
         background-color: var(--current-background-color);
         box-shadow: var(--current-focus-ring-box-shadow);
@@ -285,22 +295,39 @@ $hds-dropdown-toggle-border-radius: 5px;
     // undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles
     &:focus:not(:focus-visible) {
       &::after {
+        background-color: transparent;
         box-shadow: none;
       }
     }
     // set focus for browsers that support ":focus-visible"
     &:focus-visible {
+      color: var(--current-color-focus);
       &::after {
         background-color: var(--current-background-color);
         box-shadow: var(--current-focus-ring-box-shadow);
         left: 4px;
       }
     }
+
     // remove the focus ring on "active + focused" state (by design)
     &:focus:active,
+    &:focus-visible:active,
     &.is-focus.is-active {
       &::after {
+        background-color: var(--current-background-color);
         box-shadow: none;
+        left: 10px;
+      }
+    }
+
+    &:active,
+    &.is-active {
+      color: var(--current-color-active);
+      &::before {
+        background-color: currentColor;
+      }
+      &::after {
+        background-color: var(--current-background-color);
       }
     }
   }
@@ -319,30 +346,12 @@ $hds-dropdown-toggle-border-radius: 5px;
     color: var(--token-color-foreground-primary);
 
     // assign the values to the local CSS variables used above
+    --current-color-hover: var(--token-color-foreground-action-hover);
+    --current-color-focus: var(--token-color-foreground-action-active);
+    --current-color-active: var(--token-color-foreground-action-active);
     &::after {
       --current-background-color: var(--token-color-surface-action);
-      --current-focus-ring-box-shadow: var(
-        --token-focus-ring-action-box-shadow
-      );
-    }
-
-    &:hover,
-    &.is-hover {
-      color: var(--token-color-foreground-action-hover);
-      &::before {
-        background-color: currentColor;
-      }
-    }
-
-    &:active,
-    &.is-active {
-      color: var(--token-color-foreground-action-active);
-      &::before {
-        background-color: currentColor;
-      }
-      &::after {
-        background-color: var(--token-color-surface-action);
-      }
+      --current-focus-ring-box-shadow: var(--token-focus-ring-action-box-shadow);
     }
   }
 }
@@ -352,28 +361,13 @@ $hds-dropdown-toggle-border-radius: 5px;
     color: var(--token-color-foreground-critical);
 
     // assign the values to the local CSS variables used above
+    --current-color-hover: var(--token-color-palette-red-300);
+    --current-color-focus: var(--token-color-palette-red-400);
+    --current-color-active: var(--token-color-palette-red-400);
     &::after {
       --current-background-color: var(--token-color-surface-critical);
       --current-focus-ring-box-shadow: var(--token-focus-ring-critical-box-shadow);
     }
-
-    &:hover,
-    &.is-hover {
-      color: var(--token-color-palette-red-300);
-      &::before {
-        background-color: currentColor;
-      }
-    }
-    &:active,
-    &.is-active {
-      color: var(--token-color-palette-red-400);
-      &::before {
-        background-color: currentColor;
-      }
-      &::after {
-        background-color: var(--token-color-surface-critical);
-      }
-    }
   }
 }
 

package/app/styles/components/toast.scss

@@ -0,0 +1,16 @@
+//
+// TOAST
+//
+// properties within each class are sorted alphabetically
+//
+//
+
+.hds-toast {
+  // we apply an elevation to the "alert/inline" element
+  box-shadow: var(--token-elevation-higher-box-shadow);
+
+  // per design specs
+  min-width: min(360px, 80vw);
+  max-width: min(500px, 80vw);
+  width: fit-content;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -36,19 +36,19 @@
   "dependencies": {
     "@hashicorp/design-system-tokens": "^0.8.0",
     "@hashicorp/ember-flight-icons": "^2.0.5",
-    "ember-auto-import": "^2.2.3",
-    "ember-cli-babel": "^7.26.6",
-    "ember-cli-htmlbars": "^5.7.1",
+    "ember-auto-import": "^2.4.1",
+    "ember-cli-babel": "^7.26.11",
+    "ember-cli-htmlbars": "^6.0.1",
     "ember-cli-sass": "^10.0.1",
     "ember-focus-trap": "^1.0.1",
-    "ember-keyboard": "^8.0.0",
+    "ember-keyboard": "^8.1.0",
     "ember-named-blocks-polyfill": "^0.2.5",
     "sass": "^1.43.4"
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
-    "@ember/test-helpers": "^2.4.2",
-    "@embroider/test-setup": "^0.43.5",
+    "@ember/test-helpers": "^2.6.0",
+    "@embroider/test-setup": "^1.5.0",
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
     "@percy/cli": "^1.0.1",
@@ -56,9 +56,10 @@
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
     "ember-a11y-refocus": "^2.1.0",
-    "ember-cli": "~3.28.4",
-    "ember-cli-clipboard": "^0.15.0",
-    "ember-cli-dependency-checker": "^3.2.0",
+    "ember-cli": "~4.3.0",
+    "ember-cli-clipboard": "^0.16.0",
+    "ember-cli-dependency-checker": "^3.3.0",
+    "ember-cli-deprecation-workflow": "^2.1.0",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-markdown-it-templates": "^0.0.3",
     "ember-cli-sri": "^2.1.1",
@@ -68,31 +69,30 @@
     "ember-disable-prototype-extensions": "^1.1.3",
     "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.2",
-    "ember-maybe-import-regenerator": "^0.1.6",
-    "ember-page-title": "^6.2.2",
+    "ember-page-title": "^7.0.0",
     "ember-prism": "^0.12.0",
-    "ember-qunit": "^5.1.4",
-    "ember-resolver": "^8.0.2",
-    "ember-source": "~3.28.0",
+    "ember-qunit": "^5.1.5",
+    "ember-resolver": "^8.0.3",
+    "ember-source": "~4.3.0",
     "ember-source-channel-url": "^3.0.0",
     "ember-style-modifier": "^0.8.0",
-    "ember-template-lint": "^3.6.0",
-    "ember-template-lint-plugin-prettier": "^3.0.1",
+    "ember-template-lint": "^4.3.0",
+    "ember-template-lint-plugin-prettier": "^4.0.0",
     "ember-truth-helpers": "^3.0.0",
-    "ember-try": "^1.4.0",
+    "ember-try": "^2.0.0",
     "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-ember": "^10.5.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-ember": "^10.5.9",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-qunit": "^6.2.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-qunit": "^7.2.0",
     "loader.js": "^4.7.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.3.2",
-    "qunit": "^2.16.0",
-    "qunit-dom": "^1.6.0",
+    "prettier": "^2.6.1",
+    "qunit": "^2.18.0",
+    "qunit-dom": "^2.0.0",
     "version-bump-prompt": "^6.1.0",
-    "webpack": "^5.61.0"
+    "webpack": "^5.70.0"
   },
   "engines": {
     "node": "12.* || 14.* || >= 16"