@hashicorp/design-system-components 1.3.2 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @hashicorp/design-system-components
 
+## 1.4.0
+
+### Minor Changes
+
+- [#631](https://github.com/hashicorp/design-system/pull/631) [`5d4b1811`](https://github.com/hashicorp/design-system/commit/5d4b1811a4bcdfe0c2205767aceead9286f5f159) Thanks [@alex-ju](https://github.com/alex-ju)! - Add `Modal` component and `DismissButton` utility component (used by `Alert`, `Toast` and `Modal`)
+
+* [#722](https://github.com/hashicorp/design-system/pull/722) [`58a52103`](https://github.com/hashicorp/design-system/commit/58a521034b0e6a2a421b4c8b79f26a431e13a83b) Thanks [@MelSumner](https://github.com/MelSumner)! - Add `Table` component
+
+### Patch Changes
+
+- [#681](https://github.com/hashicorp/design-system/pull/681) [`6f08ddd2`](https://github.com/hashicorp/design-system/commit/6f08ddd2b491ed13b60e153aa4cc13db8c3884da) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - Explicitly set `aria-selected` to `true` or `false`
+
+* [#698](https://github.com/hashicorp/design-system/pull/698) [`db8a1caf`](https://github.com/hashicorp/design-system/commit/db8a1caff4553ed3240c0260a831526fd2fe6844) Thanks [@alex-ju](https://github.com/alex-ju)! - Add `@layout` parameter to `RadioCard`
+
+* Updated dependencies [[`aeff4e02`](https://github.com/hashicorp/design-system/commit/aeff4e02e3c5c738104be326569c110dc2f79618)]:
+  - @hashicorp/ember-flight-icons@3.0.2
+
 ## 1.3.2
 
 ### Patch Changes

package/README.md

@@ -9,8 +9,9 @@ A package containing the components for the HashiCorp Design System.
 Compatibility
 ------------------------------------------------------------------------------
 
-* Ember.js v3.24 or above
-* Ember CLI v3.24 or above
+* Ember.js v3.28 or above
+  * Note: The library _should_ work with earlier versions of Ember, but we only test with Ember 3.28 and newer
+* Ember CLI v3.28 or above
 * Node.js v12 or above
 
 

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

@@ -29,8 +29,6 @@
   </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>
+    <Hds::DismissButton class="hds-alert__dismiss" {{on "click" this.onDismiss}} />
   {{/if}}
 </div>

package/addon/components/hds/dismiss-button/index.hbs

@@ -0,0 +1,3 @@
+<button class="hds-dismiss-button" type="button" aria-label="Dismiss" ...attributes>
+  <FlightIcon @name="x" @size="16" @isInlineBlock={{false}} />
+</button>

package/addon/components/hds/form/radio-card/group.hbs

@@ -18,6 +18,7 @@
           name=@name
           alignment=@alignment
           controlPosition=@controlPosition
+          layout=@layout
           extraAriaDescribedBy=F.ariaDescribedBy
         )
       )

package/addon/components/hds/form/radio-card/index.js

@@ -7,8 +7,10 @@ import { schedule } from '@ember/runloop';
 
 export const DEFAULT_CONTROL_POSITION = 'bottom';
 export const DEFAULT_ALIGNMENT = 'left';
+export const DEFAULT_LAYOUT = 'fluid';
 export const CONTROL_POSITIONS = ['bottom', 'left'];
 export const ALIGNMENTS = ['left', 'center'];
+export const LAYOUTS = ['fluid', 'fixed'];
 
 export default class HdsFormRadioCardIndexComponent extends Component {
   @tracked ariaDescribedBy = this.args.extraAriaDescribedBy;
@@ -64,6 +66,34 @@ export default class HdsFormRadioCardIndexComponent extends Component {
     return alignment;
   }
 
+  /**
+   * Sets the layout of the card within the group
+   * Accepted values: fluid, fixed
+   *
+   * @param layout
+   * @type {string}
+   * @default 'fluid'
+   */
+  get layout() {
+    let { layout = DEFAULT_LAYOUT } = this.args;
+
+    assert(
+      `@layout for "Hds::Form::RadioCard" must be one of the following: ${LAYOUTS.join(
+        ', '
+      )}; received: ${layout}`,
+      LAYOUTS.includes(layout)
+    );
+
+    // if the `@layout` is set to 'fixed' we need a `@maxWidth` value to constrain the card to
+    if (layout === 'fixed') {
+      assert(
+        `@maxWidth for "Hds::Form::RadioCard" with @layout "fixed" is required`,
+        this.args.maxWidth
+      );
+    }
+    return layout;
+  }
+
   /**
    * Get the class names to apply to the component.
    * @method classNames
@@ -85,6 +115,9 @@ export default class HdsFormRadioCardIndexComponent extends Component {
     // add a class based on the @alignment argument
     classes.push(`hds-form-radio-card--align-${this.alignment}`);
 
+    // add a class based on the @layout argument
+    classes.push(`hds-form-radio-card--layout-${this.layout}`);
+
     return classes.join(' ');
   }
 }

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

@@ -0,0 +1,3 @@
+<div class="hds-modal__body" ...attributes>
+  {{yield}}
+</div>

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

@@ -0,0 +1,3 @@
+<div class="hds-modal__footer" ...attributes>
+  {{yield (hash close=@onDismiss)}}
+</div>

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

@@ -0,0 +1,14 @@
+<div class="hds-modal__header" ...attributes>
+  {{#if @icon}}
+    <FlightIcon class="hds-modal__icon" @name={{@icon}} @size="24" @isInlineBlock={{false}} />
+  {{/if}}
+  <div class="hds-modal__title hds-typography-display-300 hds-font-weight-semibold" id={{@id}}>
+    {{#if @tagline}}
+      <div class="hds-modal__tagline hds-typography-body-100 hds-font-weight-regular">
+        {{@tagline}}
+      </div>
+    {{/if}}
+    {{yield}}
+  </div>
+  <Hds::DismissButton class="hds-modal__dismiss" {{on "click" @onDismiss}} />
+</div>

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

@@ -0,0 +1,15 @@
+{{! template-lint-disable no-invalid-interactive }}
+<dialog
+  class={{this.classNames}}
+  ...attributes
+  aria-labelledby={{this.id}}
+  {{did-insert this.didInsert}}
+  {{focus-trap isActive=this.isOpen focusTrapOptions=(hash onDeactivate=this.onDismiss clickOutsideDeactivates=true)}}
+>
+  {{yield (hash Header=(component "hds/modal/header" id=this.id onDismiss=this.onDismiss))}}
+  {{yield (hash Body=(component "hds/modal/body"))}}
+  {{yield (hash Footer=(component "hds/modal/footer" onDismiss=this.onDismiss))}}
+</dialog>
+{{#if this.isOpen}}
+  <div class="hds-modal__overlay"></div>
+{{/if}}

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

@@ -0,0 +1,144 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { assert } from '@ember/debug';
+import { getElementId } from '../form/utils/getElementId';
+import { tracked } from '@glimmer/tracking';
+
+export const DEFAULT_SIZE = 'medium';
+export const DEFAULT_COLOR = 'neutral';
+export const SIZES = ['small', 'medium', 'large'];
+export const COLORS = ['neutral', 'warning', 'critical'];
+
+export default class HdsModalIndexComponent extends Component {
+  @tracked isOpen = false;
+  @tracked isDismissDisabled = this.args.isDismissDisabled ?? false;
+
+  /**
+   * Sets the size of the modal dialog
+   * Accepted values: small, medium, large
+   *
+   * @param size
+   * @type {string}
+   * @default 'medium'
+   */
+  get size() {
+    let { size = DEFAULT_SIZE } = this.args;
+
+    assert(
+      `@size for "Hds::Modal" must be one of the following: ${SIZES.join(
+        ', '
+      )}; received: ${size}`,
+      SIZES.includes(size)
+    );
+
+    return size;
+  }
+
+  /**
+   * Sets the color of the modal dialog
+   * Accepted values: neutral, warning, critical
+   *
+   * @param color
+   * @type {string}
+   * @default 'neutral'
+   */
+  get color() {
+    let { color = DEFAULT_COLOR } = this.args;
+
+    assert(
+      `@color for "Hds::Modal" must be one of the following: ${COLORS.join(
+        ', '
+      )}; received: ${color}`,
+      COLORS.includes(color)
+    );
+
+    return color;
+  }
+
+  /**
+   * Calculates the unique ID to assign to the title
+   */
+  get id() {
+    return getElementId(this);
+  }
+
+  /**
+   * 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-modal'];
+
+    // add a class based on the @size argument
+    classes.push(`hds-modal--size-${this.size}`);
+
+    // add a class based on the @color argument
+    classes.push(`hds-modal--color-${this.color}`);
+
+    return classes.join(' ');
+  }
+
+  @action
+  didInsert(element) {
+    // Store a reference of the `<dialog>` element
+    this.element = element;
+
+    // Register `<dialog>` element for polyfilling if no native support is available
+    if (!element.showModal) {
+      Promise.all([import('dialog-polyfill'), import('dialog-polyfill-css')])
+        .then(([dialogPolyfill]) => {
+          const dialog = dialogPolyfill.default;
+          if (dialog.registerDialog) {
+            dialog.registerDialog(element);
+            // This unscoped class is defined in the dialog polyfill: https://github.com/GoogleChrome/dialog-polyfill/blob/master/dist/dialog-polyfill.css#L33
+            element.classList.add('fixed');
+          }
+        })
+        .catch({});
+    }
+
+    // Register "onClose" callback function to be called when a native 'close' event is dispatched
+    this.element.addEventListener('close', () => {
+      if (this.args.onClose && typeof this.args.onClose === 'function') {
+        this.args.onClose();
+      }
+
+      // If the dismissal of the modal is disabled, we keep the modal open/visible otherwise we mark it as closed
+      if (this.isDismissDisabled) {
+        // If, in a chain of events, the element is not attached to the DOM, the `showModal` would fail
+        // so we add this safeguard condition that checks for the `<dialog>` to have a parent
+        if (this.element.parentElement) {
+          // As there is no way to `preventDefault` on `close` events, we call the `showModal` function
+          // preserving the state of the modal dialog
+          this.element.showModal();
+        }
+      } else {
+        this.isOpen = false;
+      }
+    });
+
+    // If the modal dialog is not already open
+    if (!this.element.open) {
+      this.open();
+    }
+  }
+
+  @action
+  open() {
+    // Make modal dialog visible using the native `showModal` method
+    this.element.showModal();
+    this.isOpen = true;
+
+    // Call "onOpen" callback function
+    if (this.args.onOpen && typeof this.args.onOpen === 'function') {
+      this.args.onOpen();
+    }
+  }
+
+  @action
+  onDismiss() {
+    // Make modal dialog invisible using the native `close` method
+    this.element.close();
+  }
+}

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

@@ -0,0 +1,54 @@
+<table class={{this.classNames}} ...attributes>
+  {{#if @columns}}
+    <caption class="sr-only" aria-live="polite">{{@caption}} {{this.sortedMessageText}}</caption>
+  {{else if @caption}}
+    <caption class="sr-only">{{@caption}}</caption>
+  {{/if}}
+  <thead class="hds-table__thead">
+    {{#if @columns}}
+      <Hds::Table::Tr>
+        {{#each @columns as |column|}}
+          {{#if @sortingKeys}}
+            {{#if (includes column.key @sortingKeys)}}
+              <Hds::Table::ThSort
+                @isSorted={{eq column.key this.sortBy}}
+                @sortOrder={{this.sortOrder}}
+                @onClick={{(fn this.setSortBy column.key)}}
+              >
+                {{column.label}}
+              </Hds::Table::ThSort>
+            {{else}}
+              <Hds::Table::Th>{{column.label}}</Hds::Table::Th>
+            {{/if}}
+          {{else}}
+            <Hds::Table::ThSort
+              @isSorted={{eq column.key this.sortBy}}
+              @sortOrder={{this.sortOrder}}
+              @onClick={{(fn this.setSortBy column.key)}}
+            >
+              {{column.label}}
+            </Hds::Table::ThSort>
+          {{/if}}
+        {{/each}}
+      </Hds::Table::Tr>
+    {{else}}
+      {{yield
+        (hash Tr=(component "hds/table/tr") Th=(component "hds/table/th") ThSort=(component "hds/table/th-sort"))
+        to="head"
+      }}
+    {{/if}}
+  </thead>
+  <tbody class="hds-table__tbody">
+    {{#if @columns}}
+      {{#each (sort-by this.getSortCriteria @model) as |data|}}
+        {{yield (hash Tr=(component "hds/table/tr") Td=(component "hds/table/td") data=data) to="body"}}
+      {{/each}}
+    {{else if @model}}
+      {{#each @model as |data|}}
+        {{yield (hash Tr=(component "hds/table/tr") Td=(component "hds/table/td") data=data) to="body"}}
+      {{/each}}
+    {{else}}
+      {{yield (hash Tr=(component "hds/table/tr") Td=(component "hds/table/td")) to="body"}}
+    {{/if}}
+  </tbody>
+</table>

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

@@ -0,0 +1,106 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { assert } from '@ember/debug';
+
+const DENSITIES = ['short', 'medium', 'tall'];
+const DEFAULT_DENSITY = 'medium';
+const VALIGNMENTS = ['top', 'middle', 'bottom', 'baseline', 'sub', 'text-top'];
+const DEFAULT_VALIGN = 'top';
+
+export default class HdsTableIndexComponent extends Component {
+  @tracked sortBy = this.args.sortBy;
+  @tracked sortOrder = this.args.sortOrder || 'asc';
+  @tracked sortedMessageText = '';
+
+  get getSortCriteria() {
+    return `${this.sortBy}:${this.sortOrder}`;
+  }
+
+  /**
+   * @param isStriped
+   * @type {boolean}
+   * @default true
+   * @description Determines whether the table rows should have alternating background colors; defaults to true.
+   */
+  get isStriped() {
+    return this.args.isStriped ?? true;
+  }
+
+  /**
+   * @param density
+   * @type {string}
+   * @default 'medium'
+   * @description Determines the density of the table cells; options are "short", "medium" and "tall". If no density is defined, "medium" is used.
+   */
+  get density() {
+    let { density = DEFAULT_DENSITY } = this.args;
+
+    assert(
+      `@density for "Hds::Table" must be one of the following: ${DENSITIES.join(
+        ', '
+      )}; received: ${density}`,
+      DENSITIES.includes(density)
+    );
+
+    return density;
+  }
+
+  /**
+   * @param valign
+   * @type {string}
+   * @default 'top'
+   * @description Determines the vertical alignment of the table cells; options are all of the values accepted by the CSS "vertical-align" property: "top", "middle", "bottom", "baseline", "sub", and "text-top". If no valign is defined, "top" is used.
+   */
+  get valign() {
+    let { valign = DEFAULT_VALIGN } = this.args;
+
+    assert(
+      `@valign for "Hds::Table" must be one of the following: ${VALIGNMENTS.join(
+        ', '
+      )}; received: ${valign}`,
+      VALIGNMENTS.includes(valign)
+    );
+
+    return valign;
+  }
+
+  /**
+   * 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-table'];
+
+    // add a class based on the @isStriped argument
+    if (this.isStriped) {
+      classes.push('hds-table--striped');
+    }
+
+    // add a class based on the @density argument
+    if (this.density) {
+      classes.push(`hds-table--density-${this.density}`);
+    }
+
+    // add a class based on the @valign argument
+    if (this.valign) {
+      classes.push(`hds-table--valign-${this.valign}`);
+    }
+
+    return classes.join(' ');
+  }
+
+  @action
+  setSortBy(column) {
+    if (this.sortBy === column) {
+      //invert the sort order
+      this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
+    } else {
+      this.sortBy = column;
+      this.sortOrder = 'asc';
+    }
+    // we should allow the user to define a custom value here (e.g., for i18n) - tracked with HDS-965
+    this.sortedMessageText = `Sorted by ${this.sortBy} ${this.sortOrder}ending`;
+  }
+}

package/addon/components/hds/table/td.hbs

@@ -0,0 +1,3 @@
+<td class="hds-table__td hds-typography-body-200 hds-font-weight-regular" ...attributes>
+  {{yield}}
+</td>

package/addon/components/hds/table/th-sort.hbs

@@ -0,0 +1,8 @@
+<th scope="col" class="hds-table__th-sort" aria-sort={{this.ariaSort}} ...attributes>
+  <button type="button" {{on "click" this.onClick}}>
+    <div class="hds-table__th-sort--button-content">
+      <span class="hds-typography-body-200 hds-font-weight-semibold">{{yield}}</span>
+      <FlightIcon @name={{this.icon}} />
+    </div>
+  </button>
+</th>

package/addon/components/hds/table/th-sort.js

@@ -0,0 +1,44 @@
+import Component from '@glimmer/component';
+
+const NOOP = () => {};
+
+export default class HdsTableThSortComponent extends Component {
+  /**
+   * @param ariaSort
+   * @type {string}
+   * @private
+   * @description Sets the aria-sort attribute based on the sort order defined
+   */
+  get ariaSort() {
+    if (this.args.isSorted) {
+      return this.args.sortOrder === 'asc' ? 'ascending' : 'descending';
+    } else {
+      return undefined;
+    }
+  }
+
+  /**
+   * @param icon
+   * @type {string}
+   * @private
+   * @default swap-vertical
+   * @description Determines which icon to use based on the sort order defined
+   */
+  get icon() {
+    if (this.args.isSorted && this.args.sortOrder) {
+      return this.args.sortOrder === 'asc' ? 'arrow-up' : 'arrow-down';
+    } else {
+      return 'swap-vertical';
+    }
+  }
+
+  /**
+   * @param onClick
+   * @type {function}
+   * @default () => {}
+   */
+  get onClick() {
+    let { onClick } = this.args;
+    return onClick || NOOP;
+  }
+}

package/addon/components/hds/table/th.hbs

@@ -0,0 +1,3 @@
+<th class="hds-table__th hds-typography-body-200 hds-font-weight-semibold" ...attributes scope="col">
+  {{yield}}
+</th>

package/addon/components/hds/table/tr.hbs

@@ -0,0 +1,3 @@
+<tr class="hds-table__tr" ...attributes>
+  {{yield}}
+</tr>

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

@@ -9,7 +9,7 @@
     role="tab"
     type="button"
     id={{this.tabId}}
-    aria-selected={{this.isSelected}}
+    aria-selected={{if this.isSelected "true" "false"}}
     tabindex={{unless this.isSelected "-1"}}
     data-is-selected={{this.isInitialTab}}
     {{did-insert this.didInsertNode}}

package/app/components/hds/dismiss-button/index.js

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

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

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

package/app/components/hds/modal/footer.js

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

package/app/components/hds/modal/header.js

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

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

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

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

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

package/app/components/hds/table/td.js

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

package/app/components/hds/table/th-sort.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/table/th-sort';

package/app/components/hds/table/th.js

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

package/app/components/hds/table/tr.js

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

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

@@ -16,13 +16,16 @@
 @use "../components/button-set";
 @use "../components/card";
 @use "../components/disclosure";
+@use "../components/dismiss-button";
 @use "../components/dropdown";
 @use "../components/empty-state";
 @use "../components/form"; // multiple components
 @use "../components/icon-tile";
 @use "../components/link"; // multiple components
+@use "../components/modal";
 @use "../components/stepper";
 @use "../components/tabs";
+@use "../components/table";
 @use "../components/tag";
 @use "../components/toast";
 // END COMPONENT CSS FILES IMPORTS

package/app/styles/components/alert.scss

@@ -2,8 +2,6 @@
 // ALERT COMPONENT
 //
 
-@use "../mixins/focus-ring" as *;
-
 .hds-alert {
   display: flex;
   align-items: flex-start;
@@ -117,39 +115,14 @@
 // DISMISS
 
 .hds-alert__dismiss {
-  flex: none;
   margin-top: 2px; // for alignment with the main icon and text
   margin-left: 16px;
-  padding: 0;
-  color: var(--token-color-foreground-faint);
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
 
   .hds-alert--type-compact & {
     margin-top: 1px;
   }
-
-  &: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 {
-    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 {

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

@@ -0,0 +1,34 @@
+//
+// DISMISS-BUTTON
+//
+
+@use "../mixins/focus-ring" as *;
+
+.hds-dismiss-button {
+  flex: none;
+  padding: 0;
+  color: var(--token-color-foreground-faint);
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+
+  &:hover,
+  &.mock-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,
+  &.mock-active {
+    color: var(--token-color-foreground-secondary);
+
+    &::before {
+      background-color: rgba(#dedfe3, 0.4);
+      border: 1px solid var(--token-color-border-strong);
+    }
+  }
+}

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

@@ -15,9 +15,18 @@
   }
 
   .hds-form-radio-card {
-    flex: 1;
     margin: calc(var(--token-form-radiocard-group-gap) / 2);
   }
+
+  // LAYOUT
+
+  .hds-form-radio-card--layout-fluid {
+    flex: 1 0 0;
+  }
+
+  .hds-form-radio-card--layout-fixed {
+    flex: 1 0 100%;
+  }
 }
 
 // RadioCard

package/app/styles/components/modal.scss

@@ -0,0 +1,134 @@
+//
+// MODAL
+//
+
+.hds-modal {
+  z-index: 50;
+  flex-direction: column;
+  padding: 0;
+  background: var(--token-color-surface-primary);
+  border: none;
+  border-radius: 10px;
+  box-shadow: var(--token-surface-overlay-box-shadow);
+
+  &[open] {
+    position: fixed;
+    display: flex;
+  }
+
+  // we hide the native `::backdrop` pseudo-element in favor of using
+  // an `hds-modal__overlay` element to detect click events with more ease
+  &::backdrop {
+    display: none;
+  }
+}
+
+.hds-modal__overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 50;
+  background: var(--token-color-palette-neutral-700);
+  opacity: 0.5;
+}
+
+.hds-modal__header {
+  display: flex;
+  flex: none;
+  align-items: flex-start;
+  padding: 16px 24px;
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+.hds-modal__icon {
+  flex: none;
+  align-self: center;
+  margin-right: 16px;
+}
+
+.hds-modal__title {
+  flex-grow: 1;
+}
+
+.hds-modal__tagline {
+  margin-bottom: 4px;
+}
+
+.hds-modal__dismiss {
+  align-self: center;
+  margin-left: 16px;
+}
+
+.hds-modal__body {
+  flex: 1 1 auto;
+  padding: 24px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.hds-modal__footer {
+  flex: none;
+  padding: 16px 24px;
+  background: var(--token-color-surface-faint);
+  border-top: 1px solid var(--token-color-border-primary);
+  border-bottom-right-radius: inherit;
+  border-bottom-left-radius: inherit;
+
+  // Tertiary buttons must always be placed/aligned at the end of the row
+  .hds-button-set {
+    .hds-button--color-tertiary {
+      margin-left: auto;
+    }
+  }
+}
+
+.hds-modal--size-small {
+  width: min(400px, 95vw);
+}
+
+.hds-modal--size-medium {
+  width: min(600px, 95vw);
+}
+
+.hds-modal--size-large {
+  width: min(800px, 95vw);
+}
+
+.hds-modal--color-neutral {
+  .hds-modal__header {
+    color: var(--token-color-foreground-strong);
+    background: var(--token-color-surface-faint);
+    border-bottom: 1px solid var(--token-color-border-primary);
+  }
+
+  .hds-modal__tagline {
+    color: var(--token-color-foreground-faint);
+  }
+}
+
+.hds-modal--color-warning {
+  .hds-modal__header {
+    color: var(--token-color-foreground-warning-on-surface);
+    background: var(--token-color-surface-warning);
+    border-bottom: 1px solid var(--token-color-border-warning);
+  }
+
+  .hds-modal__tagline {
+    color: var(--token-color-foreground-warning-on-surface);
+  }
+}
+
+.hds-modal--color-critical {
+  .hds-modal__header {
+    color: var(--token-color-foreground-critical-on-surface);
+    background: var(--token-color-surface-critical);
+    border-bottom: 1px solid var(--token-color-border-critical);
+  }
+
+  .hds-modal__tagline {
+    color: var(--token-color-foreground-critical-on-surface);
+  }
+}

package/app/styles/components/table.scss

@@ -0,0 +1,177 @@
+//
+// TABLE
+//
+//
+
+@use "../mixins/focus-ring" as *;
+
+$hds-table-border-radius: 6px;
+$hds-table-border-width: 1px;
+$hds-table-inner-border-radius: $hds-table-border-radius - $hds-table-border-width;
+$hds-table-border-color: var(--token-color-border-primary);
+$hds-table-header-height: 48px;
+$hds-table-cell-padding-medium: 12px 16px;
+$hds-table-cell-padding-short: 4px 16px;
+$hds-table-cell-padding-tall: 20px 16px;
+
+.hds-table {
+  width: 100%;
+  table-layout: fixed;
+  border: $hds-table-border-width solid $hds-table-border-color;
+  border-radius: $hds-table-border-radius;
+  border-spacing: 0;
+}
+
+// TABLE HEADER
+.hds-table__thead {
+  .hds-table__tr {
+    color: var(--token-color-foreground-strong);
+    background-color: var(--token-color-surface-strong);
+
+    .hds-table__th,
+    .hds-table__th-sort {
+      height: $hds-table-header-height;
+      text-align: left;
+      border-top: none;
+      border-right: none;
+      border-bottom: $hds-table-border-width solid $hds-table-border-color;
+      border-left: none;
+    }
+
+    .hds-table__th {
+      padding: $hds-table-cell-padding-medium;
+    }
+
+    .hds-table__th-sort {
+      padding: 0;
+
+      button {
+        width: 100%;
+        height: 100%;
+        min-height: $hds-table-header-height;
+        margin: 0;
+        padding: $hds-table-cell-padding-medium;
+        text-align: inherit;
+        background-color: transparent;
+        border: 1px solid transparent;
+        border-radius: inherit;
+
+        .hds-table__th-sort--button-content {
+          display: flex; // we can't put flex on the button itself so we drop the content into its own container
+          align-items: center;
+
+          .flight-icon {
+            flex: none;
+            margin-left: 8px;
+            color: var(--token-color-foreground-action);
+          }
+        }
+
+        &:hover,
+        &.mock-hover {
+          color: var(--token-color-foreground-strong);
+          background-color: var(--token-color-palette-neutral-200);
+          cursor: pointer;
+        }
+
+        @include hds-focus-ring-with-pseudo-element($radius: inherit);
+
+        &:active,
+        &.mock-active {
+          color: var(--token-color-foreground-strong);
+          background-color: var(--token-color-palette-neutral-300);
+        }
+      }
+    }
+
+    // BORDER RADIUS: TARGET FIRST AND LAST TH ELEMENTS IN THE ROW
+    &:first-of-type {
+      th:first-child {
+        border-top-left-radius: $hds-table-inner-border-radius;
+      }
+
+      // LAST TH IN THE ROW, BORDER RADIUS
+      th:last-child {
+        border-top-right-radius: $hds-table-inner-border-radius;
+      }
+    }
+  }
+}
+
+// TABLE BODY
+
+// TABLE STRIPING ROWS
+.hds-table--striped {
+  .hds-table__tbody {
+    .hds-table__tr:nth-child(even) {
+      background-color: var(--token-color-surface-faint);
+    }
+  }
+}
+
+// TABLE DENSITY (TBODY ROW HEIGHT)
+.hds-table--density-short .hds-table__tbody td {
+  padding: $hds-table-cell-padding-short;
+}
+
+.hds-table--density-medium .hds-table__tbody td {
+  padding: $hds-table-cell-padding-medium;
+}
+
+.hds-table--density-tall .hds-table__tbody td {
+  padding: $hds-table-cell-padding-tall;
+}
+
+// TABLE CELL VERTICAL ALIGNMENT
+.hds-table--valign-top .hds-table__tbody td {
+  vertical-align: top;
+}
+
+.hds-table--valign-middle .hds-table__tbody td {
+  vertical-align: middle;
+}
+
+.hds-table--valign-bottom .hds-table__tbody td {
+  vertical-align: bottom;
+}
+
+.hds-table--valign-baseline .hds-table__tbody td {
+  vertical-align: baseline;
+}
+
+.hds-table--valign-sub .hds-table__tbody td {
+  vertical-align: sub;
+}
+
+.hds-table--valign-text-top .hds-table__tbody td {
+  vertical-align: text-top;
+}
+
+.hds-table__tbody {
+  .hds-table__tr {
+    color: var(--token-color-foreground-primary);
+    background-color: var(--token-color-surface-primary);
+
+    td {
+      border-top: none;
+      border-right: none;
+      border-bottom: $hds-table-border-width solid $hds-table-border-color;
+      border-left: none;
+    }
+
+    // BORDER RADIUS: TARGET FIRST AND LAST TD ELEMENTS IN THE LAST ROW
+    &:last-of-type {
+      td {
+        border-bottom: none;
+      }
+
+      td:first-child {
+        border-bottom-left-radius: $hds-table-inner-border-radius;
+      }
+
+      td:last-child {
+        border-bottom-right-radius: $hds-table-inner-border-radius;
+      }
+    }
+  }
+}

package/index.js

@@ -10,4 +10,15 @@ module.exports = {
   included: function (/* app */) {
     this._super.included.apply(this, arguments);
   },
+
+  options: {
+    babel: {
+      plugins: [require.resolve('ember-auto-import/babel-plugin')],
+    },
+    autoImport: {
+      alias: {
+        'dialog-polyfill-css': 'dialog-polyfill/dist/dialog-polyfill.css',
+      },
+    },
+  },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -37,12 +37,15 @@
   },
   "dependencies": {
     "@hashicorp/design-system-tokens": "^1.2.0",
-    "@hashicorp/ember-flight-icons": "^3.0.1",
+    "@hashicorp/ember-flight-icons": "^3.0.2",
+    "dialog-polyfill": "^0.5.6",
     "ember-auto-import": "^2.4.2",
     "ember-cached-decorator-polyfill": "^0.1.4",
     "ember-cli-babel": "^7.26.11",
     "ember-cli-htmlbars": "^6.1.0",
     "ember-cli-sass": "^10.0.1",
+    "ember-composable-helpers": "^4.4.1",
+    "ember-focus-trap": "^1.0.1",
     "ember-keyboard": "^8.1.0",
     "ember-named-blocks-polyfill": "^0.2.5",
     "ember-style-modifier": "^0.8.0",
@@ -55,7 +58,7 @@
     "@embroider/test-setup": "^1.8.3",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@percy/cli": "^1.12.0",
+    "@percy/cli": "^1.13.0",
     "@percy/ember": "^4.0.0",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",