@hashicorp/design-system-components 1.2.0 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @hashicorp/design-system-components
 
+## 1.3.1
+
+### Patch Changes
+
+- [#663](https://github.com/hashicorp/design-system/pull/663) [`1397d52c`](https://github.com/hashicorp/design-system/commit/1397d52c4405bb768b8cf0e7db2e0503d48f8f00) Thanks [@nfagerlund](https://github.com/nfagerlund)! - Tabs::Panel: Regress modern helper syntax for 3.24 compatibility
+
+## 1.3.0
+
+### Minor Changes
+
+- [#548](https://github.com/hashicorp/design-system/pull/548) [`5d1e2cb4`](https://github.com/hashicorp/design-system/commit/5d1e2cb4f953bfbe55ae1fa8a675903712a66a1c) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - Add new Tabs component
+
+### Patch Changes
+
+- [#618](https://github.com/hashicorp/design-system/pull/618) [`11d39410`](https://github.com/hashicorp/design-system/commit/11d39410c40725ff34a291e17eac3f8f8321c659) Thanks [@alex-ju](https://github.com/alex-ju)! - Update `ember` to `4.7.0`
+
+* [#660](https://github.com/hashicorp/design-system/pull/660) [`4d0826a6`](https://github.com/hashicorp/design-system/commit/4d0826a6df220031b36f4918c5c5365012672c27) Thanks [@alex-ju](https://github.com/alex-ju)! - Update the `Hds::Button` style when rendered as a link
+
+- [#638](https://github.com/hashicorp/design-system/pull/638) [`90182235`](https://github.com/hashicorp/design-system/commit/901822353453e98c914c8d57e523d64b32a23f75) Thanks [@Dhaulagiri](https://github.com/Dhaulagiri)! - explicitly add ember-style-modifiers as a dependency
+
+* [#636](https://github.com/hashicorp/design-system/pull/636) [`27a283a5`](https://github.com/hashicorp/design-system/commit/27a283a52c2828b32c282401f91df9bd929f9dda) Thanks [@Dhaulagiri](https://github.com/Dhaulagiri)! - Add copyright notice to license file
+
+* Updated dependencies [[`a079992f`](https://github.com/hashicorp/design-system/commit/a079992fbbed11812fcf4cdd4409a00fa2d246f1), [`11d39410`](https://github.com/hashicorp/design-system/commit/11d39410c40725ff34a291e17eac3f8f8321c659), [`27a283a5`](https://github.com/hashicorp/design-system/commit/27a283a52c2828b32c282401f91df9bd929f9dda), [`ecbe26df`](https://github.com/hashicorp/design-system/commit/ecbe26df6bdbaf7b4f00c70d016eead0da9168f0)]:
+  - @hashicorp/design-system-tokens@1.2.0
+  - @hashicorp/ember-flight-icons@3.0.1
+
 ## 1.2.0
 
 ### Minor Changes

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

@@ -0,0 +1,54 @@
+# How to test a component in Cloud UI
+
+To test a new component (or a component that has been modified) using your local environment as source for the `@hashicorp/design-system-components` package, you have to follow a few steps.
+
+## Prepare the Cloud UI project
+
+For simplicity, you will need three CLI/terminal windows/tabs opened.
+
+In in the first terminal window go the folder containing your local version of the https://github.com/hashicorp/cloud-ui/ codebase:
+
+- go to the root of the project
+  - eg. `cd ~/path-to/your-local/hashicorp/cloud-ui`
+- run `rm -fr node_modules/` to start from a blank slate
+- run `yarn` to make sure all the packages are installed
+
+## Replace the installed `@hashicorp/design-system-components` package in Cloud UI with the local one
+
+In the second terminal window:
+
+- run `cd ~/path-to/your-local/hashicorp/cloud-ui/node_modules/@hashicorp` to go in the folder containing the `@hashicorp` packages
+- run `ls -la` to check that the folder `design-system-components` is present
+- run `rm -fr design-system-components` to remove (recursively) the folder with the published version of the `@hashicorp/design-system-components` package
+
+Now you have to create a symlink between the folder containing your local code for the `design-system-components` and the folder you have just removed:
+
+In the third terminal window:
+
+- go in the folder containing the https://github.com/hashicorp/design-system codebase
+  - eg. `cd ~/path-to/your-local/hashicorp/design-system/packages/components/`
+- run `pwd` and copy the full path to this folder
+  - eg. `/Users/mynamesurname/src/hashicorp/design-system/packages/components`
+
+Go back to the second terminal window:
+
+- run `pwd` and make sure you're still in the `node_modules/@hashicorp` folder of the Cloud UI repo
+- run `ln -s [full-path-to-your-local-components-folder] design-system-components` to create a symbolic link [**IMPORTANT**: you need to set `design-system-components` and not just `components` as target folder name, because that's the name expected by `yarn` (same as the folder you deleted one moment ago)]
+  - eg. `ln -s /Users/mynamesurname/src/hashicorp/design-system/packages/components design-system-components`
+
+**IMPORTANT**: if you have a new version of the design tokens package that needs to be included as well for your component to work, you will need to do the same process to symlink the local folder of the **compiled** design tokens with the one expected in the Cloud UI `node_modules` folder
+
+- eg. `rm -fr design-system-tokens` + `ln -s /Users/mynamesurname/src/hashicorp/design-system/packages/tokens design-system-tokens`
+
+In the first terminal window (you should be be in the Cloud UI root):
+- run `yarn start` to launch the compilation of the Cloud UI project and start the local webserver
+- visit the URL that appears in the command line at the end of the build (typically http://localhost:4200/ but you can specify a different port using the command `yarn start --port NNNN`)
+
+Everything should work and you should be able to do whatever you need to do in the Cloud UI codebase using your local HDS components (eg testing a new component, or checking the impact of a change in an existing one).
+
+**Don't forget**: once you've finished, it is better to reset the state of the Cloud UI project, to make sure that if you're doing some other tests not involving HDS components, you're using the actual code that a user will see in production:
+
+- go to the `node_modules/@hashicorp` folder of the Cloud UI repo
+- run `rm design-system-components` (no need for the `-fr` option, it's a symlink file not a folder)
+- go to the root of the Cloud UI project
+- run `yarn` to reinstall all the missing packages (including `@hashicorp/design-system-components` from NPM)

package/LICENSE.md

@@ -1,3 +1,5 @@
+Copyright (c) 2021 HashiCorp, Inc
+
 Mozilla Public License Version 2.0
 ==================================
 

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

@@ -0,0 +1,33 @@
+{{! template-lint-disable no-invalid-role }}
+<div class="hds-tabs" {{did-insert this.didInsert}} ...attributes>
+  <div class="hds-tabs__tablist-wrapper">
+    <ul class="hds-tabs__tablist" role="tablist">
+      {{yield
+        (hash
+          Tab=(component
+            "hds/tabs/tab"
+            didInsertNode=this.didInsertTab
+            tabIds=this.tabIds
+            panelIds=this.panelIds
+            selectedTabIndex=this.selectedTabIndex
+            onClick=this.onClick
+            onKeyUp=this.onKeyUp
+          )
+        )
+      }}
+      <li class="hds-tabs__tab-indicator" role="presentation"></li>
+    </ul>
+  </div>
+
+  {{yield
+    (hash
+      Panel=(component
+        "hds/tabs/panel"
+        didInsertNode=this.didInsertPanel
+        tabIds=this.tabIds
+        panelIds=this.panelIds
+        selectedTabIndex=this.selectedTabIndex
+      )
+    )
+  }}
+</div>

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

@@ -0,0 +1,107 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { assert } from '@ember/debug';
+
+export default class HdsTabsIndexComponent extends Component {
+  @tracked tabNodes = [];
+  @tracked tabIds = [];
+  @tracked panelNodes = [];
+  @tracked panelIds = [];
+  @tracked selectedTabIndex;
+
+  @action
+  didInsert() {
+    // default starting tab index
+    let initialTabIndex = 0;
+    let selectedCount = 0;
+
+    this.tabNodes.forEach((tabElement, index) => {
+      if (tabElement.hasAttribute('data-is-selected')) {
+        initialTabIndex = index;
+        selectedCount++;
+      }
+    });
+    this.selectedTabIndex = initialTabIndex;
+    this.setTabIndicator(initialTabIndex);
+
+    assert('Only one tab may use isSelected argument', selectedCount <= 1);
+
+    assert(
+      'The number of Tabs must be equal to the number of Panels',
+      this.tabNodes.length === this.panelNodes.length
+    );
+  }
+
+  @action
+  didInsertTab(element) {
+    this.tabNodes = [...this.tabNodes, element];
+    this.tabIds = [...this.tabIds, element.id];
+  }
+
+  @action
+  didInsertPanel(panelId, element) {
+    this.panelNodes = [...this.panelNodes, element];
+    this.panelIds = [...this.panelIds, panelId];
+  }
+
+  @action
+  onClick(tabIndex, event) {
+    this.selectedTabIndex = tabIndex;
+    this.setTabIndicator(tabIndex);
+
+    // Scroll Tab into view if it's out of view
+    this.tabNodes[tabIndex].parentNode.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'nearest',
+    });
+
+    // invoke the callback function if it's provided as argument
+    if (typeof this.args.onClickTab === 'function') {
+      this.args.onClickTab(event);
+    }
+  }
+
+  @action
+  onKeyUp(tabIndex, e) {
+    const leftArrow = 37;
+    const rightArrow = 39;
+    const enterKey = 13;
+    const spaceKey = 32;
+
+    if (e.keyCode === rightArrow) {
+      const nextTabIndex = (tabIndex + 1) % this.tabIds.length;
+      this.focusTab(nextTabIndex, e);
+    } else if (e.keyCode === leftArrow) {
+      const prevTabIndex =
+        (tabIndex + this.tabIds.length - 1) % this.tabIds.length;
+      this.focusTab(prevTabIndex, e);
+    } else if (e.keyCode === enterKey || e.keyCode === spaceKey) {
+      this.selectedTabIndex = tabIndex;
+    }
+  }
+
+  // Focus tab for keyboard & mouse navigation:
+  focusTab(tabIndex, e) {
+    e.preventDefault();
+    this.tabNodes[tabIndex].focus();
+  }
+
+  setSelectedPanelFocus(tabIndex, e) {
+    e.preventDefault();
+    this.panelNodes[tabIndex].focus();
+  }
+
+  setTabIndicator(tabIndex) {
+    const tabElem = this.tabNodes[tabIndex];
+    const tabsParentElem = tabElem.closest('.hds-tabs');
+
+    const tabLeftPos = tabElem.parentNode.offsetLeft;
+    const tabWidth = tabElem.parentNode.offsetWidth;
+
+    // Set CSS custom properties for indicator
+    tabsParentElem.style.setProperty('--indicator-left-pos', tabLeftPos + 'px');
+    tabsParentElem.style.setProperty('--indicator-width', tabWidth + 'px');
+  }
+}

package/addon/components/hds/tabs/panel.hbs

@@ -0,0 +1,11 @@
+<section
+  class="hds-tabs__panel"
+  ...attributes
+  role="tabpanel"
+  aria-labelledby={{this.tabId}}
+  id={{this.panelId}}
+  hidden={{not this.isSelected}}
+  {{did-insert this.didInsertNode}}
+>
+  {{yield}}
+</section>

package/addon/components/hds/tabs/panel.js

@@ -0,0 +1,40 @@
+import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
+import { guidFor } from '@ember/object/internals';
+import { action } from '@ember/object';
+
+export default class HdsTabsIndexComponent extends Component {
+  /**
+   * Generates a unique ID for the Panel
+   *
+   * @param panelId
+   */
+  panelId = 'panel-' + guidFor(this);
+
+  @cached
+  get nodeIndex() {
+    return this.args.panelIds
+      ? this.args.panelIds.indexOf(this.panelId)
+      : undefined;
+  }
+
+  get tabId() {
+    return this.nodeIndex !== undefined
+      ? this.args.tabIds[this.nodeIndex]
+      : undefined;
+  }
+
+  get isSelected() {
+    return this.nodeIndex === this.args.selectedTabIndex;
+  }
+
+  @action
+  didInsertNode(element) {
+    let { didInsertNode } = this.args;
+
+    if (typeof didInsertNode === 'function') {
+      this.elementId = element.id;
+      didInsertNode(this.elementId, ...arguments);
+    }
+  }
+}

package/addon/components/hds/tabs/tab.hbs

@@ -0,0 +1,25 @@
+{{! template-lint-disable require-context-role no-invalid-role }}
+<li class={{this.classNames}} ...attributes role="presentation">
+  {{#if @icon}}
+    <FlightIcon @name={{@icon}} class="hds-tabs__tab-icon" />
+  {{/if}}
+
+  <button
+    class="hds-tabs__tab-button hds-typography-body-200 hds-font-weight-medium"
+    role="tab"
+    type="button"
+    id={{this.tabId}}
+    aria-selected={{this.isSelected}}
+    tabindex={{unless this.isSelected "-1"}}
+    data-is-selected={{this.isInitialTab}}
+    {{did-insert this.didInsertNode}}
+    {{on "click" this.onClick}}
+    {{on "keyup" this.onKeyUp}}
+  >
+    {{yield}}
+  </button>
+
+  {{#if @count}}
+    <Hds::BadgeCount @text={{@count}} @size="small" class="hds-tabs__tab-count" />
+  {{/if}}
+</li>

package/addon/components/hds/tabs/tab.js

@@ -0,0 +1,88 @@
+import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
+import { guidFor } from '@ember/object/internals';
+import { action } from '@ember/object';
+
+export default class HdsTabsIndexComponent extends Component {
+  /**
+   * Generates a unique ID for the Tab
+   *
+   * @param tabId
+   */
+  tabId = 'tab-' + guidFor(this);
+
+  @cached
+  get nodeIndex() {
+    return this.args.tabIds ? this.args.tabIds.indexOf(this.tabId) : undefined;
+  }
+
+  get panelId() {
+    return this.nodeIndex !== undefined
+      ? this.args.panelIds[this.nodeIndex]
+      : undefined;
+  }
+
+  /**
+   * @param isSelected
+   * @type {boolean}
+   * @default false (1st tab is selected by default)
+   * @description Determines if the tab is the selected tab
+   */
+  get isSelected() {
+    return (
+      this.nodeIndex !== undefined &&
+      this.nodeIndex === this.args.selectedTabIndex
+    );
+  }
+
+  get isInitialTab() {
+    let { isSelected } = this.args;
+    return isSelected;
+  }
+
+  @action
+  didInsertNode() {
+    let { didInsertNode } = this.args;
+
+    if (typeof didInsertNode === 'function') {
+      didInsertNode(...arguments);
+    }
+  }
+
+  @action
+  onClick() {
+    let { onClick } = this.args;
+
+    if (typeof onClick === 'function') {
+      onClick(this.nodeIndex, ...arguments);
+    } else {
+      return false;
+    }
+  }
+
+  @action
+  onKeyUp() {
+    let { onKeyUp } = this.args;
+
+    if (typeof onKeyUp === 'function') {
+      onKeyUp(this.nodeIndex, ...arguments);
+    } else {
+      return 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-tabs__tab'];
+
+    if (this.isSelected) {
+      classes.push(`hds-tabs__tab--is-selected`);
+    }
+
+    return classes.join(' ');
+  }
+}

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

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

package/app/components/hds/tabs/panel.js

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

package/app/components/hds/tabs/tab.js

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

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

@@ -20,9 +20,9 @@
 @use "../components/empty-state";
 @use "../components/form"; // multiple components
 @use "../components/icon-tile";
-@use "../components/link/inline";
-@use "../components/link/standalone";
+@use "../components/link"; // multiple components
 @use "../components/stepper";
+@use "../components/tabs";
 @use "../components/tag";
 @use "../components/toast";
 // END COMPONENT CSS FILES IMPORTS

package/app/styles/components/alert.scss

@@ -1,8 +1,5 @@
 //
-// ALERT
-//
-// properties within each class are sorted alphabetically
-//
+// ALERT COMPONENT
 //
 
 @use "../mixins/focus-ring" as *;

package/app/styles/components/avatar.scss

@@ -1,7 +1,5 @@
 //
-// AVATAR
-//
-// properties within each class are sorted alphabetically
+// AVATAR COMPONENT
 //
 
 .hds-avatar {

package/app/styles/components/badge-count.scss

@@ -1,7 +1,5 @@
 //
-// BADGE-COUNT
-//
-// properties within each class are sorted alphabetically
+// BADGE-COUNT COMPONENT
 //
 
 @use "sass:math";

package/app/styles/components/badge.scss

@@ -1,8 +1,5 @@
 //
-// BADGE
-//
-// properties within each class are sorted alphabetically
-//
+// BADGE COMPONENT
 //
 
 $hds-badge-types: ( "flat","inverted","outlined" );

package/app/styles/components/breadcrumb.scss

@@ -1,10 +1,8 @@
 //
-// BREADCRUMB
+// BREADCRUMB COMPONENT
 //
-// properties within each class are sorted alphabetically
 // notice: pseudo-classes for the states *must* follow the order link > visited > hover > focus > active
 //
-//
 
 @use "../mixins/focus-ring" as *;
 

package/app/styles/components/button-set.scss

@@ -1,7 +1,5 @@
 //
-// BUTTON-SET
-//
-// properties within each class are sorted alphabetically
+// BUTTON-SET COMPONENT
 //
 
 .hds-button-set {

package/app/styles/components/button.scss

@@ -1,10 +1,8 @@
 //
 // BUTTON COMPONENT
 //
-// properties within each class are sorted alphabetically
 // notice: pseudo-classes for the states *must* follow the order link > visited > hover > focus > active
 //
-//
 
 $hds-button-sizes: ( "small", "medium", "large" );
 $hds-button-border-radius: 5px;
@@ -19,6 +17,7 @@ $hds-button-focus-border-width: 3px;
   justify-content: center;
   width: auto;
   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
   border-radius: $hds-button-border-radius;
   outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
@@ -28,6 +27,16 @@ $hds-button-focus-border-width: 3px;
   // the <a> element behaves differently than a <button>
   @at-root a#{&} {
     width: fit-content;
+
+    // for more background on the use of underlining as defined below read the following document: https://docs.google.com/document/d/1acLxdRqmy92vQ8ArShPxoBFmAV0StsbZrqEic6MVt20
+    &:hover,
+    &:focus,
+    &:active,
+    &.mock-hover,
+    &.mock-focus,
+    &.mock-active {
+      text-decoration: underline;
+    }
   }
 
   // This covers all of the browsers and focus scenarios (due to the custom focus design).

package/app/styles/components/card/container.scss

@@ -1,10 +1,6 @@
 //
 // CARD COMPONENT > CONTAINER
 //
-// properties within each class are sorted alphabetically
-//
-//
-
 
 $hds-card-container-style: ( "surface", "elevation" );
 $hds-card-container-levels: ( "base", "mid", "high" );

package/app/styles/components/disclosure.scss

@@ -1,8 +1,6 @@
 //
 // DISCLOSURE COMPONENT
 //
-// properties within each class are sorted alphabetically
-//
 
 .hds-disclosure {
   position: relative;

package/app/styles/components/dropdown.scss

@@ -14,10 +14,8 @@
 //
 // DROPDOWN COMPONENT
 //
-// properties within each class are sorted alphabetically
 // notice: pseudo-classes for the states *must* follow the order link > visited > hover > focus > active
 //
-//
 
 @use "../mixins/focus-ring" as *;
 

package/app/styles/components/empty-state.scss

@@ -1,3 +1,7 @@
+//
+// EMPTY-STATE COMPONENT
+//
+
 .hds-empty-state {
   display: block;
   max-width: 40ch;

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

@@ -1,8 +1,6 @@
 //
 // FORM > CHECKBOX
 //
-// properties within each class are sorted alphabetically
-//
 
 
 // "BASE" CONTROL

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

@@ -1,8 +1,6 @@
 //
 // FORM > ERROR
 //
-// properties within each class are sorted alphabetically
-//
 
 .hds-form-error {
   display: flex;

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

@@ -1,8 +1,6 @@
 //
 // FORM > FIELD
 //
-// properties within each class are sorted alphabetically
-//
 
 
 // "VERTICAL" LAYOUT

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

@@ -1,8 +1,6 @@
 //
 // FORM > GROUP
 //
-// properties within each class are sorted alphabetically
-//
 
 .hds-form-group { // notice: this is a <fieldset> element
   display: block;

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

@@ -1,8 +1,6 @@
 //
 // FORM > HELPER-TEXT
 //
-// properties within each class are sorted alphabetically
-//
 
 .hds-form-helper-text {
   display: block;

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

@@ -1,8 +1,6 @@
 //
 // FORM > INDICATOR
 //
-// properties within each class are sorted alphabetically
-//
 
 // Used for the 'optional' indicator
 .hds-form-indicator--optional {

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

@@ -1,8 +1,6 @@
 //
 // FORM > LABEL
 //
-// properties within each class are sorted alphabetically
-//
 
 .hds-form-label {
   display: block;

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

@@ -1,8 +1,6 @@
 //
 // FORM > LEGEND
 //
-// properties within each class are sorted alphabetically
-//
 
 .hds-form-legend {
   display: block;

package/app/styles/components/form/radio-card.scss

@@ -1,4 +1,7 @@
+//
 // FORM > RADIO-CARD
+//
+
 
 // RadioCard Group
 

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

@@ -1,8 +1,6 @@
 //
 // FORM > RADIO
 //
-// properties within each class are sorted alphabetically
-//
 
 
 // "BASE" CONTROL

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

@@ -1,8 +1,7 @@
 //
 // FORM > SELECT
 //
-// properties within each class are sorted alphabetically
-//
+
 
 // "BASE" CONTROL
 

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

@@ -1,8 +1,7 @@
 //
 // FORM > TEXT-INPUT
 //
-// properties within each class are sorted alphabetically
-//
+
 
 // "BASE" CONTROL
 

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

@@ -1,8 +1,7 @@
 //
 // FORM > TEXTAREA
 //
-// properties within each class are sorted alphabetically
-//
+
 
 // "BASE" CONTROL
 

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

@@ -1,8 +1,6 @@
 //
 // FORM > TOGGLE
 //
-// properties within each class are sorted alphabetically
-//
 
 
 // "BASE" CONTROL

package/app/styles/components/icon-tile.scss

@@ -1,8 +1,5 @@
 //
-// ICON-TILE
-//
-// properties within each class are sorted alphabetically
-//
+// ICON-TILE COMPONENT
 //
 
 $hds-icon-tile-sizes: ( "small", "medium", "large" );

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

@@ -0,0 +1,2 @@
+@use "./inline.scss";
+@use "./standalone.scss";

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

@@ -1,11 +1,9 @@
 //
 // LINK > INLINE COMPONENT
 //
-// properties within each class are sorted alphabetically
 // notice: pseudo-classes for the states *must* follow the order link > visited > focus > hover > active
 // see https://github.com/hashicorp/design-system-components/issues/132
 //
-//
 
 .hds-link-inline {
   border-radius: 2px; // this is used by the outline too

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

@@ -1,10 +1,8 @@
 //
 // LINK > STANDALONE COMPONENT
 //
-// properties within each class are sorted alphabetically
 // notice: pseudo-classes for the states *must* follow the order link > visited > hover > focus > active
 //
-//
 
 @use "../../mixins/focus-ring" as *;
 

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

@@ -1,8 +1,6 @@
 //
 // STEPPER > INDICATOR > STEP
 //
-// properties within each class are sorted alphabetically
-//
 
 $hds-stepper-indicator-step-statuses: ( "incomplete", "progress", "processing", "complete" );
 $hds-stepper-indicator-step-size: 24px;

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

@@ -1,8 +1,6 @@
 //
 // STEPPER > INDICATOR > TASK
 //
-// properties within each class are sorted alphabetically
-//
 
 $hds-stepper-indicator-task-statuses: ( "incomplete", "progress", "processing", "complete" );
 $hds-stepper-indicator-task-size: 16px;

package/app/styles/components/tabs.scss

@@ -0,0 +1,113 @@
+//
+// TABS
+//
+
+@use "../mixins/focus-ring" as *;
+
+// Sub-components:
+.hds-tabs__tablist-wrapper {
+  position: relative;
+
+  // bottom gray border:
+  &::before {
+    position: absolute;
+    right: 0;
+    bottom: calc((var(--token-tabs-indicator-height) - var(--token-tabs-divider-height)) / 2);
+    left: 0;
+    display: block;
+    border-top: var(--token-tabs-divider-height) solid var(--token-color-border-primary);
+    content: "";
+  }
+}
+
+.hds-tabs__tablist {
+  position: relative;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.hds-tabs__tab {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--token-tabs-tab-height);
+  margin: 0;
+  padding: var(--token-tabs-tab-padding-vertical) var(--token-tabs-tab-padding-horizontal);
+  color: var(--token-color-foreground-primary);
+  white-space: nowrap;
+  text-decoration: none;
+  list-style: none;
+
+  &:hover,
+  &.mock-hover {
+    color: var(--token-color-foreground-action);
+  }
+
+  &.hds-tabs__tab--is-selected {
+    color: var(--token-color-foreground-action);
+
+    &:hover {
+      color: var(--token-color-foreground-action-hover);
+
+      & ~ .hds-tabs__tab-indicator {
+        background: var(--token-color-foreground-action-hover);
+      }
+    }
+  }
+}
+
+.hds-tabs__tab-button {
+  @include hds-focus-ring-with-pseudo-element(
+    $top: var(--token-tabs-tab-focus-inset),
+    $right: var(--token-tabs-tab-focus-inset),
+    $bottom: var(--token-tabs-tab-focus-inset),
+    $left: var(--token-tabs-tab-focus-inset),
+  );
+
+  position: static;
+  padding: 0;
+  color: inherit;
+  background-color: transparent;
+  border: none;
+  border-radius: var(--token-tabs-tab-border-radius);
+  cursor: pointer;
+
+  // Expand click target area
+  &::after {
+    position: absolute;
+    content: "";
+    inset: 0;
+  }
+}
+
+.hds-tabs__tab-icon {
+  margin-right: var(--token-tabs-tab-gutter);
+}
+
+.hds-tabs__tab-count {
+  margin-left: var(--token-tabs-tab-gutter);
+}
+
+.hds-tabs__tab-indicator {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  // notice: this custom prop is set dynamically via JavaScript
+  left: var(--indicator-left-pos);
+  z-index: 10;
+  display: block;
+  // notice: this custom prop is set dynamically via JavaScript
+  width: var(--indicator-width);
+  height: var(--token-tabs-indicator-height);
+  background-color: var(--token-color-foreground-action);
+  border-radius: var(--token-tabs-indicator-height);
+
+  @media screen and (prefers-reduced-motion: no-preference) {
+    transition-timing-function: var(--token-tabs-indicator-transition-function);
+    transition-duration: var(--token-tabs-indicator-transition-duration);
+    transition-property: left, width;
+  }
+}

package/app/styles/components/tag.scss

@@ -1,9 +1,6 @@
 //
 // TAG COMPONENT
 //
-// properties within each class are sorted alphabetically
-//
-//
 
 @use "../mixins/focus-ring" as *;
 

package/app/styles/components/toast.scss

@@ -1,8 +1,5 @@
 //
-// TOAST
-//
-// properties within each class are sorted alphabetically
-//
+// TOAST COMPONENT
 //
 
 .hds-toast {

package/blueprints/hds-component/files/app/styles/components/__name__.scss

@@ -1,6 +1,4 @@
 //
 // <%= folderizedModuleName %>
 //
-// properties within each class are sorted alphabetically
-//
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -36,32 +36,34 @@
     "test:ember:percy": "percy exec ember test"
   },
   "dependencies": {
-    "@hashicorp/design-system-tokens": "^1.1.0",
-    "@hashicorp/ember-flight-icons": "^3.0.0",
-    "ember-auto-import": "^2.4.1",
+    "@hashicorp/design-system-tokens": "^1.2.0",
+    "@hashicorp/ember-flight-icons": "^3.0.1",
+    "ember-auto-import": "^2.4.2",
+    "ember-cached-decorator-polyfill": "^0.1.4",
     "ember-cli-babel": "^7.26.11",
-    "ember-cli-htmlbars": "^6.0.1",
+    "ember-cli-htmlbars": "^6.1.0",
     "ember-cli-sass": "^10.0.1",
     "ember-keyboard": "^8.1.0",
     "ember-named-blocks-polyfill": "^0.2.5",
+    "ember-style-modifier": "^0.8.0",
     "ember-truth-helpers": "^3.0.0",
     "sass": "^1.43.4"
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
-    "@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.10.4",
+    "@ember/test-helpers": "^2.8.1",
+    "@embroider/test-setup": "^1.8.3",
+    "@glimmer/component": "^1.1.2",
+    "@glimmer/tracking": "^1.1.2",
+    "@percy/cli": "^1.12.0",
     "@percy/ember": "^4.0.0",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
     "ember-a11y-refocus": "^2.1.0",
     "ember-a11y-testing": "^5.0.0",
-    "ember-cli": "~4.3.0",
+    "ember-cli": "~4.7.0",
     "ember-cli-clipboard": "^0.16.0",
-    "ember-cli-dependency-checker": "^3.3.0",
+    "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-deprecation-workflow": "^2.1.0",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-sri": "^2.1.1",
@@ -69,36 +71,32 @@
     "ember-cli-terser": "^4.0.2",
     "ember-concurrency": "^2.2.0",
     "ember-disable-prototype-extensions": "^1.1.3",
-    "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.2",
     "ember-page-title": "^7.0.0",
     "ember-power-select": "^6.0.0",
     "ember-prism": "^0.12.0",
     "ember-qunit": "^5.1.5",
     "ember-resolver": "^8.0.3",
-    "ember-source": "~4.3.0",
+    "ember-source": "~4.7.0",
     "ember-source-channel-url": "^3.0.0",
-    "ember-style-modifier": "^0.8.0",
-    "ember-template-lint": "^4.3.0",
+    "ember-template-lint": "^4.14.0",
     "ember-template-lint-plugin-prettier": "^4.0.0",
     "ember-try": "^2.0.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-ember": "^10.5.9",
+    "eslint-plugin-ember": "^11.0.6",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-qunit": "^7.2.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-qunit": "^7.3.1",
     "loader.js": "^4.7.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.6.1",
-    "qunit": "^2.18.0",
+    "prettier": "^2.7.1",
+    "qunit": "^2.19.1",
     "qunit-dom": "^2.0.0",
     "stylelint": "^14.11.0",
-    "stylelint-config-prettier-scss": "0.0.1",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard-scss": "^5.0.0",
-    "stylelint-prettier": "^2.0.0",
-    "webpack": "^5.70.0"
+    "webpack": "^5.74.0"
   },
   "engines": {
     "node": "12.* || 14.* || >= 16"