@hashicorp/design-system-components 0.12.7 → 0.12.10

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @hashicorp/design-system-components
 
+## 0.12.10
+
+### Patch Changes
+
+- [#428](https://github.com/hashicorp/design-system/pull/428) [`599dca97`](https://github.com/hashicorp/design-system/commit/599dca971fba57b613f9a17588ebe0e569aafe4c) Thanks [@didoo](https://github.com/didoo)! - Fixed issue with "disabled" visual state for "Hds::Button" when is a link
+
+## 0.12.9
+
+### Patch Changes
+
+- [#418](https://github.com/hashicorp/design-system/pull/418) [`981e2bd9`](https://github.com/hashicorp/design-system/commit/981e2bd99d29398a40274d390d1885ebfcd85133) Thanks [@alex-ju](https://github.com/alex-ju)! - Determine an accessible name for `alertdialog` alerts #418
+
+* [#416](https://github.com/hashicorp/design-system/pull/416) [`824e53d1`](https://github.com/hashicorp/design-system/commit/824e53d11678a5bb2544add3d9d1b2a93f9c42c1) Thanks [@alex-ju](https://github.com/alex-ju)! - Remove stray aria-describedby in alert component
+
+- [#415](https://github.com/hashicorp/design-system/pull/415) [`c6842109`](https://github.com/hashicorp/design-system/commit/c68421094991b2d62832cb346b4cf23eca1049e4) Thanks [@didoo](https://github.com/didoo)! - Added `@levelHover` and `@levelActive` arguments to `Card::Container` component
+
+## 0.12.8
+
+### Patch Changes
+
+- [#400](https://github.com/hashicorp/design-system/pull/400) [`d87d622b`](https://github.com/hashicorp/design-system/commit/d87d622b0f1f8829a0d5e6a48cfcd8ad8ff6f425) Thanks [@alex-ju](https://github.com/alex-ju)! - Determine alert component's role based on the presence of interactive elements
+
 ## 0.12.7
 
 ### Patch Changes

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

@@ -1,4 +1,11 @@
-<div class={{this.classNames}} role="alert" aria-live="polite" ...attributes>
+<div
+  class={{this.classNames}}
+  role={{this.role}}
+  aria-live="polite"
+  aria-labelledby={{this.ariaLabelledBy}}
+  {{did-insert this.didInsert}}
+  ...attributes
+>
   {{#if this.icon}}
     <div class="hds-alert__icon">
       <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} @isInlineBlock={{false}} />

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

@@ -1,5 +1,8 @@
 import Component from '@glimmer/component';
+import { action } from '@ember/object';
 import { assert } from '@ember/debug';
+import { guidFor } from '@ember/object/internals';
+import { tracked } from '@glimmer/tracking';
 
 export const TYPES = ['page', 'inline', 'compact'];
 export const DEFAULT_COLOR = 'neutral';
@@ -18,7 +21,14 @@ export const MAPPING_COLORS_TO_ICONS = {
   critical: 'alert-diamond',
 };
 
+const CONTENT_ELEMENT_SELECTOR = '.hds-alert__content';
+const TITLE_ELEMENT_SELECTOR = '.hds-alert__title';
+const DESCRIPTION_ELEMENT_SELECTOR = '.hds-alert__description';
+
 export default class HdsAlertIndexComponent extends Component {
+  @tracked role = 'alert';
+  @tracked ariaLabelledBy;
+
   constructor() {
     super(...arguments);
 
@@ -125,4 +135,25 @@ export default class HdsAlertIndexComponent extends Component {
 
     return classes.join(' ');
   }
+
+  @action
+  didInsert(element) {
+    let actions = element.querySelectorAll(
+      `${CONTENT_ELEMENT_SELECTOR} button, ${CONTENT_ELEMENT_SELECTOR} a`
+    );
+    if (actions.length) {
+      this.role = 'alertdialog';
+    }
+
+    // `alertdialog` must have an accessible name so we use either the
+    // title or the description as label for the alert
+    let label =
+      element.querySelector(TITLE_ELEMENT_SELECTOR) ||
+      element.querySelector(DESCRIPTION_ELEMENT_SELECTOR);
+    if (label) {
+      let labelId = label.getAttribute('id') || guidFor(element);
+      label.setAttribute('id', labelId);
+      this.ariaLabelledBy = labelId;
+    }
+  }
 }

package/addon/components/hds/card/container.js

@@ -21,7 +21,7 @@ export default class HdsCardContainerComponent extends Component {
     let { level = DEFAULT_LEVEL } = this.args;
 
     assert(
-      `@level for "Hds::CardContainer" must be one of the following: ${LEVELS.join(
+      `@level for "Hds::Card::Container" must be one of the following: ${LEVELS.join(
         ', '
       )}, received: ${level}`,
       LEVELS.includes(level)
@@ -30,6 +30,50 @@ export default class HdsCardContainerComponent extends Component {
     return level;
   }
 
+  /**
+   * Sets the "elevation" level for the component on ":hover" state
+   * Accepted values: base, mid, high
+   *
+   * @param levelHover
+   * @type {string}
+   */
+  get levelHover() {
+    let { levelHover } = this.args;
+
+    if (levelHover) {
+      assert(
+        `@levelHover for "Hds::Card::Container" must be one of the following: ${LEVELS.join(
+          ', '
+        )}, received: ${levelHover}`,
+        LEVELS.includes(levelHover)
+      );
+    }
+
+    return levelHover;
+  }
+
+  /**
+   * Sets the "elevation" level for the component on ":active" state
+   * Accepted values: base, mid, high
+   *
+   * @param levelActive
+   * @type {string}
+   */
+  get levelActive() {
+    let { levelActive } = this.args;
+
+    if (levelActive) {
+      assert(
+        `@levelActive for "Hds::Card::Container" must be one of the following: ${LEVELS.join(
+          ', '
+        )}, received: ${levelActive}`,
+        LEVELS.includes(levelActive)
+      );
+    }
+
+    return levelActive;
+  }
+
   /**
    * Sets the background for the component
    * Accepted values: neutral-primary, neutral-secondary
@@ -42,7 +86,7 @@ export default class HdsCardContainerComponent extends Component {
     let { background = DEFAULT_BACKGROUND } = this.args;
 
     assert(
-      `@background for "Hds::CardContainer" must be one of the following: ${BACKGROUNDS.join(
+      `@background for "Hds::Card::Container" must be one of the following: ${BACKGROUNDS.join(
         ', '
       )}, received: ${background}`,
       BACKGROUNDS.includes(background)
@@ -63,7 +107,7 @@ export default class HdsCardContainerComponent extends Component {
     let { overflow = DEFAULT_OVERFLOW } = this.args;
 
     assert(
-      `@overflow for "Hds::CardContainer" must be one of the following: ${OVERFLOWS.join(
+      `@overflow for "Hds::Card::Container" must be one of the following: ${OVERFLOWS.join(
         ', '
       )}, received: ${overflow}`,
       OVERFLOWS.includes(overflow)
@@ -80,10 +124,26 @@ export default class HdsCardContainerComponent extends Component {
   get classNames() {
     let classes = ['hds-card__container'];
 
-    // add an "elevation" class helper based on the @level and @hasBorder arguments
+    // add "elevation" classes based on the @level and @hasBorder arguments
     classes.push(
-      `hds-${this.args.hasBorder ? 'surface' : 'elevation'}-${this.level}`
+      `hds-card__container--level-${
+        this.args.hasBorder ? 'surface' : 'elevation'
+      }-${this.level}`
     );
+    if (this.levelHover) {
+      classes.push(
+        `hds-card__container--hover-level-${
+          this.args.hasBorder ? 'surface' : 'elevation'
+        }-${this.levelHover}`
+      );
+    }
+    if (this.levelActive) {
+      classes.push(
+        `hds-card__container--active-level-${
+          this.args.hasBorder ? 'surface' : 'elevation'
+        }-${this.levelActive}`
+      );
+    }
 
     // add a class based on the @background argument
     classes.push(`hds-card__container--background-${this.background}`);

package/addon/components/hds/form/toggle/group.hbs

@@ -0,0 +1,7 @@
+<Hds::Form::Fieldset @layout={{@layout}} ...attributes as |F|>
+  {{! Notice: the order of the elements is not relevant here, because it's controlled at "Hds::Form::Fieldset" component level }}
+  {{yield (hash Legend=F.Legend HelperText=F.HelperText Error=F.Error)}}
+  <F.Control>
+    {{yield (hash Toggle::Field=(component "hds/form/toggle/field" contextualClass="hds-form-group__control-field"))}}
+  </F.Control>
+</Hds::Form::Fieldset>

package/app/components/hds/form/toggle/group.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/toggle/group';

package/app/styles/components/button.scss

@@ -32,6 +32,11 @@ $hds-button-focus-border-width: 3px;
   }
 
   // This covers all of the browsers and focus scenarios (due to the custom focus design).
+  //
+  // IMPORTANT: we need to use also the [disabled] selector because if the "disabled" attribute is applied to a "Button as link",
+  // the ":disabled" pseudo-selector is not applied to the element in the browser (rightly) because a link can't be disabled
+  // but from the product perspective there may be use cases where they need to have a "Button as link" that looks disabled anyway
+  //
   &:disabled,
   &[disabled],
   &.mock-disabled,
@@ -257,6 +262,11 @@ $size-props: (
     }
   }
 
+  //
+  // IMPORTANT: we need to use also the [disabled] selector because if the "disabled" attribute is applied to a "Button as link",
+  // the ":disabled" pseudo-selector is not applied to the element in the browser (rightly) because a link can't be disabled
+  // but from the product perspective there may be use cases where they need to have a "Button as link" that looks disabled anyway
+  //
   &:disabled,
   &[disabled],
   &.mock-disabled,

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

@@ -6,6 +6,7 @@
 //
 
 
+$hds-card-container-style: ( 'surface', 'elevation' );
 $hds-card-container-levels: ( 'base', 'mid', 'high' );
 
 $hds-card-container-border-radius: 6px;
@@ -16,6 +17,30 @@ $hds-card-container-border-radius: 6px;
   position: relative;
 }
 
+// LEVEL (elevation style as "drop" + "border" shadow effects)
+
+@each $style in $hds-card-container-style {
+  // IMPORTANT: we need to keep separate loops, because we want the "hover" state
+  // to override the "rest" state, and the "active" state to override the "hover" state
+  // so the order of the declaration matters, they need to be one group after another group
+  @each $level in $hds-card-container-levels {
+    .hds-card__container--level-#{$style}-#{$level} {
+      box-shadow: var(--token-#{$style}-#{$level}-box-shadow);
+    }
+  }
+  @each $level in $hds-card-container-levels {
+    .hds-card__container--hover-level-#{$style}-#{$level}:hover,
+    .hds-card__container--hover-level-#{$style}-#{$level}.mock-hover {
+      box-shadow: var(--token-#{$style}-#{$level}-box-shadow);
+    }
+  }
+  @each $level in $hds-card-container-levels {
+    .hds-card__container--active-level-#{$style}-#{$level}:active,
+    .hds-card__container--active-level-#{$style}-#{$level}.mock-active {
+      box-shadow: var(--token-#{$style}-#{$level}-box-shadow);
+    }
+  }
+}
 
 // BACKGROUND
 

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

@@ -56,18 +56,8 @@ $hds-form-checkbox-control-border-radius: 3px;
   &.mock-focus:checked,
   &.mock-focus:not(:checked) {
     border-color: var(--token-color-palette-blue-400);
-    outline: 2px solid var(--token-color-focus-action-external);
-    outline-offset: 0px;
-  }
-
-  // active
-
-  &:active:not(:checked),
-  &.mock-active:not(:checked),
-  &:active:checked,
-  &.mock-active:checked {
-    background-color: var(--token-color-palette-blue-400);
-    border-color: var(--token-color-palette-blue-400);
+    outline: 3px solid var(--token-color-focus-action-external);
+    outline-offset: 1px;
   }
 
   // INVALID
@@ -90,14 +80,6 @@ $hds-form-checkbox-control-border-radius: 3px;
     border-color: var(--token-color-palette-red-400);
   }
 
-  &.hds-form-checkbox--is-invalid:active:not(:checked),
-  &.hds-form-checkbox--is-invalid.mock-active:not(:checked),
-  &.hds-form-checkbox--is-invalid:active:checked,
-  &.hds-form-checkbox--is-invalid.mock-active:checked {
-    background-color: var(--token-color-palette-red-400);
-    border-color: var(--token-color-palette-red-400);
-  }
-
   // DISABLED
 
   &:disabled:not(:checked),
@@ -109,5 +91,6 @@ $hds-form-checkbox-control-border-radius: 3px;
     box-shadow: none;
     // notice: the "tick" color is hardcoded here!
     background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e");
+    cursor: not-allowed;
   }
 }

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

@@ -11,7 +11,6 @@
 }
 
 .hds-form-error__icon {
-  color: var(--token-color-foreground-critical-on-surface);
   flex: none;
   height: 14px;
   margin: 2px 8px 2px 0;

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

@@ -18,7 +18,7 @@
 
 .hds-form-group__control-fields-wrapper {
   // when the group contains a "legend", we reduce the visual weight of the "label"
-  .hds-form-group__legend + & {
+  .hds-form-group__legend ~ & {
     .hds-form-label {
       font-weight: var(--token-typography-font-weight-regular);
     }

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

@@ -55,18 +55,8 @@ $hds-form-radio-control-size: 16px;
   &.mock-focus:checked,
   &.mock-focus:not(:checked) {
     border-color: var(--token-color-palette-blue-400);
-    outline: 2px solid var(--token-color-focus-action-external);
-    outline-offset: 0px;
-  }
-
-  // active
-
-  &:active:not(:checked),
-  &.mock-active:not(:checked),
-  &:active:checked,
-  &.mock-active:checked {
-    background-color: var(--token-color-palette-blue-400);
-    border-color: var(--token-color-palette-blue-400);
+    outline: 3px solid var(--token-color-focus-action-external);
+    outline-offset: 1px;
   }
 
   // INVALID
@@ -89,20 +79,14 @@ $hds-form-radio-control-size: 16px;
     border-color: var(--token-color-palette-red-400);
   }
 
-  &.hds-form-radio--is-invalid:active:not(:checked),
-  &.hds-form-radio--is-invalid.mock-active:not(:checked),
-  &.hds-form-radio--is-invalid:active:checked,
-  &.hds-form-radio--is-invalid.mock-active:checked {
-    background-color: var(--token-color-palette-red-400);
-    border-color: var(--token-color-palette-red-400);
-  }
-
   // DISABLED
 
   &:disabled:not(:checked),
   &.hds-form-checkbox--is-invalid:disabled:not(:checked) {
     background-color: var(--token-color-surface-strong);
     border-color: var(--token-color-border-primary);
+    box-shadow: none;
+    cursor: not-allowed;
   }
   &:disabled:checked,
   &.hds-form-checkbox--is-invalid:disabled:checked {
@@ -111,5 +95,6 @@ $hds-form-radio-control-size: 16px;
     box-shadow: none;
     // notice: the "dot" color is hardcoded here!
     background-image: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23656a76'/%3e%3c/svg%3e");
+    cursor: not-allowed;
   }
 }

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

@@ -9,12 +9,8 @@
 .hds-form-select {
   border: 1px solid var(--token-color-palette-neutral-400);
   border-radius: 5px;
-  box-shadow: var(--hds-elevation-inset-box-shadow);
-  color: var(--token-color-foreground-primary);
-  font-family: var(--token-typography-body-200-font-family);
-  font-size: var(--token-typography-body-200-font-size);
-  line-height: var(--token-typography-body-200-line-height);
-  padding: 7px;
+  color: var(--token-color-foreground-strong);
+  padding: 7px; // we have to take into account the border
   max-width: 100%;
 
   // STATUS
@@ -30,26 +26,33 @@
   &.mock-focus {
     border-color: var(--token-color-focus-action-internal);
     // TODO: Safari doesn't apply a rounded border
-    outline: 2px solid var(--token-color-focus-action-external);
+    outline: 3px solid var(--token-color-focus-action-external);
     outline-offset: 0px;
   }
 
-  &:active,
-  &.mock-active {
-    background-color: var(--token-color-surface-interactive-disabled);
-    border-color: var(--token-color-border-primary);
-  }
-
   // DISABLED
 
   &:disabled {
     background-color: var(--token-color-surface-strong);
     border-color: var(--token-color-border-primary);
+    cursor: not-allowed;
   }
 
   // INVALID
 
   &.hds-form-select--is-invalid {
-    border-color: var(--token-color-foreground-critical);
+    border-color: #C00005; // TODO convert to form-controls design token
+
+    &:hover,
+    &.mock-hover {
+      border-color: #940004; // TODO convert to form-controls design token
+    }
+
+    // TODO add handling of focus-visible
+    &:focus,
+    &.mock-focus {
+      border-color: var(--token-color-focus-critical-internal);
+      outline-color: var(--token-color-focus-critical-external);
+    }
   }
 }

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

@@ -7,14 +7,12 @@
 // "BASE" CONTROL
 
 .hds-form-text-input {
+  background-color: var(--token-color-surface-primary);
   border: 1px solid var(--token-color-palette-neutral-400);
   border-radius: 5px;
   box-shadow: var(--hds-elevation-inset-box-shadow);
-  color: var(--token-color-foreground-primary);
-  font-family: var(--token-typography-body-200-font-family);
-  font-size: var(--token-typography-body-200-font-size);
-  line-height: var(--token-typography-body-200-line-height);
-  padding: 7px;
+  color: var(--token-color-foreground-strong);
+  padding: 7px; // we have to take into account the border
   width: 100%;
   max-width: 100%;
 
@@ -37,35 +35,46 @@
   &.mock-focus {
     border-color: var(--token-color-focus-action-internal);
     // TODO: Safari doesn't apply a rounded border
-    outline: 2px solid var(--token-color-focus-action-external);
+    outline: 3px solid var(--token-color-focus-action-external);
     outline-offset: 0px;
   }
 
-  &:active,
-  &.mock-active {
-    border-color: var(--token-color-focus-action-internal);
-  }
-
   // READONLY
 
   &:read-only,
   &[readonly] {
     background-color: var(--token-color-surface-strong);
     border-color: var(--token-color-palette-neutral-400);
+    box-shadow: none;
+    color: var(--token-color-foreground-primary);
   }
 
   // DISABLED
 
-  &:disabled,
-  &[disabled] {
+  &:disabled {
     background-color: var(--token-color-surface-interactive-disabled);
     border-color: var(--token-color-border-primary);
+    box-shadow: none;
+    color: var(--token-color-foreground-disabled);
+    cursor: not-allowed;
   }
 
   // INVALID
 
   &.hds-form-text-input--is-invalid {
-    border-color: var(--token-color-foreground-critical);
+    border-color: #C00005; // TODO convert to form-controls design token
+
+    &:hover,
+    &.mock-hover {
+      border-color: #940004; // TODO convert to form-controls design token
+    }
+
+    // TODO add handling of focus-visible
+    &:focus,
+    &.mock-focus {
+      border-color: var(--token-color-focus-critical-internal);
+      outline-color: var(--token-color-focus-critical-external);
+    }
   }
 }
 
@@ -84,7 +93,6 @@
     width: initial;
 
     // show the native icon dimmed if disabled (hidden in Chrome)
-    &[disabled]::-webkit-calendar-picker-indicator,
     &:disabled::-webkit-calendar-picker-indicator {
         visibility: visible;
         opacity: 0.5;

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

@@ -7,14 +7,12 @@
 // "BASE" CONTROL
 
 .hds-form-textarea {
+  background-color: var(--token-color-surface-primary);
   border: 1px solid var(--token-color-palette-neutral-400);
   border-radius: 5px;
   box-shadow: var(--hds-elevation-inset-box-shadow);
-  color: var(--token-color-foreground-primary);
-  font-family: var(--token-typography-body-200-font-family);
-  font-size: var(--token-typography-body-200-font-size);
-  line-height: var(--token-typography-body-200-line-height);
-  padding: 4px 8px;
+  color: var(--token-color-foreground-strong);
+  padding: 3px 7px; // we have to take into account the border
   resize: vertical;
   width: 100%;
   max-width: 100%;
@@ -38,34 +36,45 @@
   &.mock-focus {
     border-color: var(--token-color-focus-action-internal);
     // TODO: Safari doesn't apply a rounded border
-    outline: 2px solid var(--token-color-focus-action-external);
+    outline: 3px solid var(--token-color-focus-action-external);
     outline-offset: 0px;
   }
 
-  &:active,
-  &.mock-active {
-    border-color: var(--token-color-focus-action-internal);
-  }
-
   // READONLY
 
   &:read-only,
   &[readonly] {
     background-color: var(--token-color-surface-strong);
     border-color: var(--token-color-palette-neutral-400);
+    box-shadow: none;
+    color: var(--token-color-foreground-primary);
   }
 
   // DISABLED
 
-  &:disabled,
-  &[disabled] {
+  &:disabled {
     background-color: var(--token-color-surface-interactive-disabled);
     border-color: var(--token-color-border-primary);
+    box-shadow: none;
+    color: var(--token-color-foreground-disabled);
+    cursor: not-allowed;
   }
 
   // INVALID
 
   &.hds-form-textarea--is-invalid {
-    border-color: var(--token-color-foreground-critical);
+    border-color: #C00005; // TODO convert to form-controls design token
+
+    &:hover,
+    &.mock-hover {
+      border-color: #940004; // TODO convert to form-controls design token
+    }
+
+    // TODO add handling of focus-visible
+    &:focus,
+    &.mock-focus {
+      border-color: var(--token-color-focus-critical-internal);
+      outline-color: var(--token-color-focus-critical-external);
+    }
   }
 }

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

@@ -38,6 +38,10 @@ $hds-form-toggle-border-radius: math.div($hds-form-toggle-control-height, 2);
   right: 0;
   top: 0;
   z-index: 1;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
 }
 
 // facade (visible)
@@ -74,8 +78,8 @@ $hds-form-toggle-border-radius: math.div($hds-form-toggle-control-height, 2);
   // used for the focus
 
   &::before {
-    $border-width: 2px;
-    $shift: $border-width + 1px; // we need to take in account also the border width of the parent
+    $border-width: 3px;
+    $shift: $border-width + 2px; // we need to take in account also the border width of the parent
     border-radius: $hds-form-toggle-border-radius + $border-width;
     border-width: $border-width;
     bottom: -$shift;
@@ -133,16 +137,6 @@ $hds-form-toggle-border-radius: math.div($hds-form-toggle-control-height, 2);
     }
   }
 
-  // active
-
-  :active:not(:checked) + &,
-  .mock-active:not(:checked) + &,
-  :active:checked + &,
-  .mock-active:checked + & {
-    background-color: var(--token-color-palette-blue-400);
-    --border-color: var(--token-color-palette-blue-400);
-  }
-
   // INVALID
 
   .hds-form-toggle--is-invalid :not(:checked) + & {
@@ -163,14 +157,6 @@ $hds-form-toggle-border-radius: math.div($hds-form-toggle-control-height, 2);
     background-color: var(--token-color-palette-red-400);
   }
 
-  .hds-form-toggle--is-invalid :active:not(:checked) + &,
-  .hds-form-toggle--is-invalid .mock-active:not(:checked) + &,
-  .hds-form-toggle--is-invalid :active:checked + &,
-  .hds-form-toggle--is-invalid .mock-active:checked + & {
-    background-color: var(--token-color-palette-red-400);
-    --border-color: var(--token-color-palette-red-400);
-  }
-
   // DISABLED
 
   :disabled:not(:checked) + &,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.12.7",
+  "version": "0.12.10",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -50,7 +50,7 @@
     "@embroider/test-setup": "^1.5.0",
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
-    "@percy/cli": "^1.3.1",
+    "@percy/cli": "^1.5.1",
     "@percy/ember": "^3.0.0",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",