@hashicorp/design-system-components 0.12.10 → 0.12.13

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @hashicorp/design-system-components
 
+## 0.12.13
+
+### Patch Changes
+
+- [#461](https://github.com/hashicorp/design-system/pull/461) [`71465b37`](https://github.com/hashicorp/design-system/commit/71465b377b5ff4f47eca2bcfb096df9f082b23cb) Thanks [@alex-ju](https://github.com/alex-ju)! - Fix computation error on disclosure (take 2)
+
+## 0.12.12
+
+### Patch Changes
+
+- [#456](https://github.com/hashicorp/design-system/pull/456) [`d0634a62`](https://github.com/hashicorp/design-system/commit/d0634a622b50c18d713afdc2fdb97a8e7a4df6af) Thanks [@alex-ju](https://github.com/alex-ju)! - Fix computation error on disclosure utility
+
+## 0.12.11
+
+### Patch Changes
+
+- [#426](https://github.com/hashicorp/design-system/pull/426) [`ff236b25`](https://github.com/hashicorp/design-system/commit/ff236b2530dae122c011abf88baf2059a7871427) Thanks [@didoo](https://github.com/didoo)! - Updated font-weight to "medium" for "Badge" and "BadgeCount" components
+
 ## 0.12.10
 
 ### Patch Changes

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

@@ -1,11 +1,11 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { schedule } from '@ember/runloop';
 
 export default class HdsDisclosureComponent extends Component {
   @tracked isOpen; // notice: if in the future we need to add a "@isOpen" prop to control the status from outside (eg to have the Disclosure opened on render) just add  "this.args.isOpen" here to initalize the variable
   @tracked toggleRef;
-  @tracked isToggleClicked;
 
   @action
   didInsert(element) {
@@ -43,12 +43,13 @@ export default class HdsDisclosureComponent extends Component {
 
   @action
   close() {
-    if (this.isOpen) {
+    // we schedule this afterRender to avoid an error in tests caused by updating `isOpen` multiple times in the same computation
+    schedule('afterRender', () => {
       this.isOpen = false;
-    }
-    // we call the "onClose" callback if it exists (and is a function)
-    if (this.args.onClose && typeof this.args.onClose === 'function') {
-      this.args.onClose();
-    }
+      // we call the "onClose" callback if it exists (and is a function)
+      if (this.args.onClose && typeof this.args.onClose === 'function') {
+        this.args.onClose();
+      }
+    });
   }
 }

package/addon/components/hds/form/checkbox/base.hbs

@@ -1 +1 @@
-<input type="checkbox" class={{this.classNames}} ...attributes value={{@value}} />
+<input type="checkbox" class="hds-form-checkbox" ...attributes value={{@value}} />

package/addon/components/hds/form/checkbox/field.hbs

@@ -10,10 +10,10 @@
     <Hds::Form::Checkbox::Base
       class="hds-form-field__control"
       @value={{@value}}
-      @isInvalid={{@isInvalid}}
       ...attributes
       id={{F.id}}
       aria-describedby={{F.ariaDescribedBy}}
+      required={{@isRequired}}
     />
   </F.Control>
 </Hds::Form::Field>

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

@@ -1,9 +1,14 @@
-<Hds::Form::Fieldset @layout={{@layout}} ...attributes as |F|>
+<Hds::Form::Fieldset @layout={{@layout}} @isRequired={{@isRequired}} @isOptional={{@isOptional}} ...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)}}
+  {{yield (hash Legend=F.Legend isRequired=F.isRequired isOptional=F.isOptional)}}
+  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
   <F.Control>
     {{yield
-      (hash Checkbox::Field=(component "hds/form/checkbox/field" contextualClass="hds-form-group__control-field"))
+      (hash
+        Checkbox::Field=(component
+          "hds/form/checkbox/field" contextualClass="hds-form-group__control-field" isRequired=@isRequired
+        )
+      )
     }}
   </F.Control>
 </Hds::Form::Fieldset>

package/addon/components/hds/form/field/index.hbs

@@ -1,5 +1,15 @@
 <div class={{this.classNames}} ...attributes>
-  {{yield (hash Label=(component "hds/form/label" controlId=this.id contextualClass="hds-form-field__label"))}}
+  {{yield
+    (hash
+      Label=(component
+        "hds/form/label"
+        controlId=this.id
+        isRequired=this.isRequired
+        isOptional=this.isOptional
+        contextualClass="hds-form-field__label"
+      )
+    )
+  }}
   {{yield
     (hash
       HelperText=(component

package/addon/components/hds/form/field/index.js

@@ -63,4 +63,22 @@ export default class HdsFormFieldIndexComponent extends Component {
 
     return classes.join(' ');
   }
+
+  /**
+   * @param isRequired
+   * @type {boolean}
+   * @default false
+   */
+  get isRequired() {
+    return this.args.isRequired || false;
+  }
+
+  /**
+   * @param isOptional
+   * @type {boolean}
+   * @default false
+   */
+  get isOptional() {
+    return this.args.isOptional || false;
+  }
 }

package/addon/components/hds/form/fieldset/index.hbs

@@ -1,5 +1,11 @@
 <fieldset class={{this.classNames}} id={{this.id}} ...attributes aria-describedby={{this.ariaDescribedBy}}>
-  {{yield (hash Legend=(component "hds/form/legend" contextualClass="hds-form-group__legend"))}}
+  {{yield
+    (hash
+      Legend=(component
+        "hds/form/legend" isRequired=this.isRequired isOptional=this.isOptional contextualClass="hds-form-group__legend"
+      )
+    )
+  }}
   {{yield
     (hash
       HelperText=(component

package/addon/components/hds/form/fieldset/index.js

@@ -46,4 +46,22 @@ export default class HdsFormFieldsetIndexComponent extends Component {
 
     return classes.join(' ');
   }
+
+  /**
+   * @param isRequired
+   * @type {boolean}
+   * @default false
+   */
+  get isRequired() {
+    return this.args.isRequired || false;
+  }
+
+  /**
+   * @param isOptional
+   * @type {boolean}
+   * @default false
+   */
+  get isOptional() {
+    return this.args.isOptional || false;
+  }
 }

package/addon/components/hds/form/indicator/index.hbs

@@ -0,0 +1,6 @@
+{{#if @isOptional}}
+  <span class="hds-form-indicator hds-form-indicator--optional">(Optional)</span>
+{{/if}}
+{{#if @isRequired}}
+  <Hds::Badge class="hds-form-indicator" @size="small" @color="neutral" @text="Required" />
+{{/if}}

package/addon/components/hds/form/label/index.hbs

@@ -1,3 +1,4 @@
 <label class={{this.classNames}} for={{@controlId}} ...attributes>
   {{yield}}
+  <Hds::Form::Indicator @isRequired={{@isRequired}} @isOptional={{@isOptional}} />
 </label>

package/addon/components/hds/form/legend/index.hbs

@@ -1,3 +1,4 @@
 <legend class={{this.classNames}} ...attributes>
   {{yield}}
+  <Hds::Form::Indicator @isRequired={{@isRequired}} @isOptional={{@isOptional}} />
 </legend>

package/addon/components/hds/form/radio/base.hbs

@@ -1 +1 @@
-<input type="radio" class={{this.classNames}} ...attributes value={{@value}} />
+<input type="radio" class="hds-form-radio" ...attributes value={{@value}} />

package/addon/components/hds/form/radio/field.hbs

@@ -10,10 +10,10 @@
     <Hds::Form::Radio::Base
       class="hds-form-field__control"
       @value={{@value}}
-      @isInvalid={{@isInvalid}}
       ...attributes
       id={{F.id}}
       aria-describedby={{F.ariaDescribedBy}}
+      required={{@isRequired}}
     />
   </F.Control>
 </Hds::Form::Field>

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

@@ -1,7 +1,14 @@
-<Hds::Form::Fieldset @layout={{@layout}} ...attributes as |F|>
+<Hds::Form::Fieldset @layout={{@layout}} @isRequired={{@isRequired}} @isOptional={{@isOptional}} ...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)}}
+  {{yield (hash Legend=F.Legend isRequired=F.isRequired isOptional=F.isOptional)}}
+  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
   <F.Control>
-    {{yield (hash Radio::Field=(component "hds/form/radio/field" contextualClass="hds-form-group__control-field"))}}
+    {{yield
+      (hash
+        Radio::Field=(component
+          "hds/form/radio/field" contextualClass="hds-form-group__control-field" isRequired=@isRequired
+        )
+      )
+    }}
   </F.Control>
 </Hds::Form::Fieldset>

package/addon/components/hds/form/select/field.hbs

@@ -1,6 +1,13 @@
-<Hds::Form::Field @layout="vertical" @extraAriaDescribedBy={{@extraAriaDescribedBy}} as |F|>
+<Hds::Form::Field
+  @layout="vertical"
+  @extraAriaDescribedBy={{@extraAriaDescribedBy}}
+  @isRequired={{@isRequired}}
+  @isOptional={{@isOptional}}
+  as |F|
+>
   {{! Notice: the order of the elements is not relevant here, because is controlled at "Hds::Form::Field" component level }}
-  {{yield (hash Label=F.Label HelperText=F.HelperText Error=F.Error)}}
+  {{yield (hash Label=F.Label isRequired=F.isRequired isOptional=F.isOptional)}}
+  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
   <F.Control>
     <Hds::Form::Select::Base
       class="hds-form-field__control"
@@ -10,6 +17,7 @@
       ...attributes
       id={{F.id}}
       aria-describedby={{F.ariaDescribedBy}}
+      required={{@isRequired}}
       as |S|
     >
       {{yield (hash Options=S.Options)}}

package/addon/components/hds/form/text-input/field.hbs

@@ -1,6 +1,13 @@
-<Hds::Form::Field @layout="vertical" @extraAriaDescribedBy={{@extraAriaDescribedBy}} as |F|>
+<Hds::Form::Field
+  @layout="vertical"
+  @extraAriaDescribedBy={{@extraAriaDescribedBy}}
+  @isRequired={{@isRequired}}
+  @isOptional={{@isOptional}}
+  as |F|
+>
   {{! Notice: the order of the elements is not relevant here, because is controlled at "Hds::Form::Field" component level }}
-  {{yield (hash Label=F.Label HelperText=F.HelperText Error=F.Error)}}
+  {{yield (hash Label=F.Label isRequired=F.isRequired isOptional=F.isOptional)}}
+  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
   <F.Control>
     <Hds::Form::TextInput::Base
       class="hds-form-field__control"
@@ -11,6 +18,7 @@
       ...attributes
       id={{F.id}}
       aria-describedby={{F.ariaDescribedBy}}
+      required={{@isRequired}}
     />
   </F.Control>
 </Hds::Form::Field>

package/addon/components/hds/form/textarea/base.hbs

@@ -1,2 +1,2 @@
 {{! Notice: this is not the native HTML <textarea> but the Ember component <Textarea> }}
-<Textarea class={{this.classNames}} {{style width=@width}} ...attributes @value={{@value}} />
+<Textarea class={{this.classNames}} {{style width=@width height=@height}} rows="4" ...attributes @value={{@value}} />

package/addon/components/hds/form/textarea/field.hbs

@@ -1,15 +1,24 @@
-<Hds::Form::Field @layout="vertical" @extraAriaDescribedBy={{@extraAriaDescribedBy}} as |F|>
+<Hds::Form::Field
+  @layout="vertical"
+  @extraAriaDescribedBy={{@extraAriaDescribedBy}}
+  @isRequired={{@isRequired}}
+  @isOptional={{@isOptional}}
+  as |F|
+>
   {{! Notice: the order of the elements is not relevant here, because is controlled at "Hds::Form::Field" component level }}
-  {{yield (hash Label=F.Label HelperText=F.HelperText Error=F.Error)}}
+  {{yield (hash Label=F.Label isRequired=F.isRequired isOptional=F.isOptional)}}
+  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
   <F.Control>
     <Hds::Form::Textarea::Base
       class="hds-form-field__control"
       @value={{@value}}
       @isInvalid={{@isInvalid}}
       @width={{@width}}
+      @height={{@height}}
       ...attributes
       id={{F.id}}
       aria-describedby={{F.ariaDescribedBy}}
+      required={{@isRequired}}
     />
   </F.Control>
 </Hds::Form::Field>

package/addon/components/hds/form/toggle/base.js

@@ -9,11 +9,6 @@ export default class HdsFormToggleBaseComponent extends Component {
   get classNames() {
     let classes = ['hds-form-toggle'];
 
-    // add a class based on the @isInvalid argument
-    if (this.args.isInvalid) {
-      classes.push(`hds-form-toggle--is-invalid`);
-    }
-
     // add a class based on the @_wrapperClass argument
     // we need to use this special argument to pass a class to the wrapping element, because the ...attributes is applied to the control
     // notice: this will *not* be documented for public use

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

@@ -11,10 +11,10 @@
       {{! template-lint-disable no-capital-arguments }}
       @_wrapperClass="hds-form-field__control"
       @value={{@value}}
-      @isInvalid={{@isInvalid}}
       ...attributes
       id={{F.id}}
       aria-describedby={{F.ariaDescribedBy}}
+      required={{@isRequired}}
     />
   </F.Control>
 </Hds::Form::Field>

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

@@ -1,7 +1,14 @@
-<Hds::Form::Fieldset @layout={{@layout}} ...attributes as |F|>
+<Hds::Form::Fieldset @layout={{@layout}} @isRequired={{@isRequired}} @isOptional={{@isOptional}} ...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)}}
+  {{yield (hash Legend=F.Legend isRequired=F.isRequired isOptional=F.isOptional)}}
+  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
   <F.Control>
-    {{yield (hash Toggle::Field=(component "hds/form/toggle/field" contextualClass="hds-form-group__control-field"))}}
+    {{yield
+      (hash
+        Toggle::Field=(component
+          "hds/form/toggle/field" contextualClass="hds-form-group__control-field" isRequired=@isRequired
+        )
+      )
+    }}
   </F.Control>
 </Hds::Form::Fieldset>

package/app/components/hds/form/indicator/index.js

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

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

@@ -17,6 +17,7 @@ $hds-badge-count-border-width: 1px;
   border: $hds-badge-count-border-width solid transparent;
   display: inline-flex;
   font-family: var(--token-typography-font-stack-text);
+  font-weight: var(--token-typography-font-weight-medium);
   max-width: 100%;
 }
 

package/app/styles/components/badge.scss

@@ -29,6 +29,7 @@
 .hds-badge__text {
   flex: 1 0 0;
   font-family: var(--token-typography-font-stack-text);
+  font-weight: var(--token-typography-font-weight-medium);
 }
 
 
@@ -143,4 +144,4 @@ $size-props: (
       color: var(--token-color-foreground-#{$color});
     }
   }
-}
+}

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

@@ -0,0 +1,41 @@
+//
+// FORM > TOKENS
+//
+// TODO: this will be removed once we define the correct component-level tokens for the "form controls" component
+//
+
+:root {
+  // INPUT / DEFAULT
+  --token-form-control-foreground-color-default: var(--token-color-foreground-strong);
+  --token-form-control-background-color-default: var(--token-color-surface-interactive);
+  --token-form-control-background-color-default-hover: var(--token-color-surface-interactive-hover);
+  --token-form-control-border-color-default: #8c909c;
+  --token-form-control-border-color-default-hover: #656a76;
+  // INPUT / CHECKED
+  --token-form-control-background-color-checked: #1060FF;
+  --token-form-control-background-color-checked-hover: #0C56E9;
+  --token-form-control-border-color-checked: #0C56E9;
+  --token-form-control-border-color-checked-hover: #0046D1;
+  // INPUT / READONLY
+  --token-form-control-foreground-color-readonly: var(--token-color-foreground-primary);
+  --token-form-control-background-color-readonly: var(--token-color-surface-strong);
+  --token-form-control-border-color-readonly: var(--token-color-border-faint);
+  // INPUT / DISABLED
+  --token-form-control-foreground-color-disabled: var(--token-color-foreground-disabled);
+  --token-form-control-background-color-disabled: var(--token-color-surface-interactive-disabled);
+  --token-form-control-border-color-disabled: var(--token-color-border-primary);
+  // INPUT / INVALID
+  --token-form-control-foreground-color-critical: var(--token-color-foreground-critical-on-surface);
+  --token-form-control-border-color-critical: #c00005;
+  --token-form-control-border-color-critical-hover: #940004;
+  // INPUT / PLACEHOLDER
+  --token-form-control-placeholder-color: var(--token-color-foreground-faint);
+  // INPUT / BORDER SIZING
+  --token-form-control-border-radius: 5px;
+  // LABEL/HELPER-TEXT
+  --token-form-label-foreground-color: var(--token-color-foreground-strong);
+  --token-form-helper-text-foreground-color: var(--token-color-foreground-faint);
+  // CHECKBOX
+  --token-form-checkbox-size: 16px;
+  --token-form-checkbox-border-radius: 3px;
+}

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

@@ -4,8 +4,6 @@
 // properties within each class are sorted alphabetically
 //
 
-$hds-form-checkbox-control-size: 16px;
-$hds-form-checkbox-control-border-radius: 3px;
 
 // "BASE" CONTROL
 
@@ -13,27 +11,27 @@ $hds-form-checkbox-control-border-radius: 3px;
   appearance: none;
   background-position: center center;
   background-size: 12px 12px;
-  border-radius: $hds-form-checkbox-control-border-radius;
+  border-radius: var(--token-form-checkbox-border-radius);
   border-style: solid;
   border-width: 1px;
   cursor: pointer;
-  height: $hds-form-checkbox-control-size;
+  height: var(--token-form-checkbox-size);
   margin: 0;
   padding: 0;
-  width: $hds-form-checkbox-control-size;
+  width: var(--token-form-checkbox-size);
 
   // STATUS
 
   // base (default)
 
   &:not(:checked) {
-    background-color: var(--token-color-surface-primary);
-    border-color: var(--token-color-palette-neutral-400);
+    background-color: var(--token-form-control-background-color-default);
+    border-color: var(--token-form-control-border-color-default);
     box-shadow: var(--hds-elevation-inset-box-shadow);
   }
   &:checked {
-    background-color: var(--token-color-palette-blue-200);
-    border-color: var(--token-color-palette-blue-300);
+    background-color: var(--token-form-control-background-color-checked);
+    border-color: var(--token-form-control-border-color-checked);
     // 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='%23FFF'/%3e%3c/svg%3e");
   }
@@ -42,52 +40,41 @@ $hds-form-checkbox-control-border-radius: 3px;
 
   &:hover:not(:checked),
   &.mock-hover:not(:checked) {
-    border-color: var(--token-color-palette-neutral-500);
+    background-color: var(--token-form-control-background-color-default-hover);
+    border-color: var(--token-form-control-border-color-default-hover);
   }
   &:hover:checked,
   &.mock-hover:checked {
-    background-color: var(--token-color-palette-blue-300);
-    border-color: var(--token-color-palette-blue-400);
+    background-color: var(--token-form-control-background-color-checked-hover);
+    border-color: var(--token-form-control-border-color-checked-hover);
   }
 
-  // focus (same for all the states)
+  // focus
+
   &:focus:not(:checked),
-  &:focus:checked,
-  &.mock-focus:checked,
   &.mock-focus:not(:checked) {
-    border-color: var(--token-color-palette-blue-400);
+    border-color: var(--token-form-control-border-color-default);
     outline: 3px solid var(--token-color-focus-action-external);
     outline-offset: 1px;
   }
-
-  // INVALID
-
-  &.hds-form-checkbox--is-invalid:not(:checked) {
-    border-color: var(--token-color-palette-red-300);
-  }
-  &.hds-form-checkbox--is-invalid:checked {
-    background-color: var(--token-color-palette-red-200);
-    border-color: var(--token-color-palette-red-300);
-  }
-
-  &.hds-form-checkbox--is-invalid:hover:not(:checked),
-  &.hds-form-checkbox--is-invalid.mock-hover:not(:checked) {
-    border-color: var(--token-color-palette-red-400);
-  }
-  &.hds-form-checkbox--is-invalid:hover:checked,
-  &.hds-form-checkbox--is-invalid.mock-hover:checked {
-    background-color: var(--token-color-palette-red-300);
-    border-color: var(--token-color-palette-red-400);
+  &:focus:checked,
+  &.mock-focus:checked {
+    border-color: var(--token-form-control-border-color-checked);
+    outline: 3px solid var(--token-color-focus-action-external);
+    outline-offset: 1px;
   }
 
   // DISABLED
 
-  &:disabled:not(:checked),
-  &:disabled:checked,
-  &.hds-form-checkbox--is-invalid:disabled:not(:checked),
-  &.hds-form-checkbox--is-invalid:disabled:checked {
-    background-color: var(--token-color-surface-strong);
-    border-color: var(--token-color-border-primary);
+  &:disabled:not(:checked) {
+    background-color: var(--token-form-control-background-color-disabled);
+    border-color: var(--token-form-control-border-color-disabled);
+    box-shadow: none;
+    cursor: not-allowed;
+  }
+  &:disabled:checked {
+    background-color: var(--token-form-control-background-color-disabled);
+    border-color: var(--token-form-control-border-color-disabled);
     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");

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

@@ -6,7 +6,7 @@
 
 .hds-form-error {
   align-items: flex-start;
-  color: var(--token-color-foreground-critical-on-surface);
+  color: var(--token-form-control-foreground-color-critical);
   display: flex;
 }
 

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

@@ -27,7 +27,7 @@
 
 .hds-form-group--layout-vertical {
   .hds-form-group__control-field + .hds-form-group__control-field {
-    margin-top: 16px;
+    margin-top: 12px;
   }
 }
 

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

@@ -5,6 +5,6 @@
 //
 
 .hds-form-helper-text {
-  color: var(--token-color-foreground-faint);
+  color: var(--token-form-helper-text-foreground-color);
   display: block;
 }

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

@@ -2,6 +2,8 @@
 // FORM > INDEX
 //
 
+// TODO/TEMP: this will be replaced with proper tokens later
+@use "./_tokens";
 
 @use "./label";
 @use "./helper-text";
@@ -9,6 +11,7 @@
 @use "./field";
 @use "./legend";
 @use "./group";
+@use "./indicator";
 
 @use "./checkbox";
 @use "./radio";

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

@@ -0,0 +1,15 @@
+//
+// FORM > INDICATOR
+//
+// properties within each class are sorted alphabetically
+//
+
+// Used for the 'optional' indicator
+.hds-form-indicator--optional {
+  color: var(--token-color-foreground-faint);
+  font-family: var(--token-typography-font-stack-text);
+  font-size: var(--token-typography-body-100-font-size);
+  font-weight: var(--token-typography-font-weight-regular);
+  // notice: here we're using the same line-height as the label/legend text to have the right vertical alignment
+  line-height: var(--token-typography-body-200-font-size);
+}

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

@@ -5,8 +5,16 @@
 //
 
 .hds-form-label {
-  color: var(--token-color-foreground-strong);
+  color: var(--token-form-label-foreground-color);
   display: block;
   max-width: 100%;
   width: max-content; // to avoid it extends the full width of the parent container, leading to invisible interactive area
+
+  // if a "badge" element (included the 'required' indicator) is child of the label
+  // we need to make sure that it correctly aligns with the label text because the
+  // "Hds::Badge" component has "vertical-align: middle" applied to it
+  // and this mess up the vertical alignment (increasing the container's height too)
+  .hds-badge {
+    vertical-align: initial;
+  }
 }

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

@@ -5,6 +5,14 @@
 //
 
 .hds-form-legend {
-  color: var(--token-color-foreground-strong);
+  color: var(--token-form-label-foreground-color); // same color as "label"
   display: block;
+
+  // if a "badge" element (included the 'required' indicator) is child of the legend
+  // we need to make sure that it correctly aligns with the legend text because the
+  // "Hds::Badge" component has "vertical-align: middle" applied to it
+  // and this mess up the vertical alignment (increasing the container's height too)
+  .hds-badge {
+    vertical-align: initial;
+  }
 }

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

@@ -4,7 +4,6 @@
 // properties within each class are sorted alphabetically
 //
 
-$hds-form-radio-control-size: 16px;
 
 // "BASE" CONTROL
 
@@ -16,23 +15,23 @@ $hds-form-radio-control-size: 16px;
   border-style: solid;
   border-width: 1px;
   cursor: pointer;
-  height: $hds-form-radio-control-size;
+  height: var(--token-form-checkbox-size); // same as checkbox
   margin: 0;
   padding: 0;
-  width: $hds-form-radio-control-size;
+  width: var(--token-form-checkbox-size);
 
   // STATUS
 
   // base (default)
 
   &:not(:checked) {
-    background-color: var(--token-color-surface-primary);
-    border-color: var(--token-color-palette-neutral-400);
+    background-color: var(--token-form-control-background-color-default);
+    border-color: var(--token-form-control-border-color-default);
     box-shadow: var(--hds-elevation-inset-box-shadow);
   }
   &:checked {
-    background-color: var(--token-color-palette-blue-200);
-    border-color: var(--token-color-palette-blue-300);
+    background-color: var(--token-form-control-background-color-checked);
+    border-color: var(--token-form-control-border-color-checked);
     // 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='%23ffffff'/%3e%3c/svg%3e");
   }
@@ -41,60 +40,44 @@ $hds-form-radio-control-size: 16px;
 
   &:hover:not(:checked),
   &.mock-hover:not(:checked) {
-    border-color: var(--token-color-palette-neutral-500);
+    background-color: var(--token-form-control-background-color-default-hover);
+    border-color: var(--token-form-control-border-color-default-hover);
   }
   &:hover:checked,
   &.mock-hover:checked {
-    background-color: var(--token-color-palette-blue-300);
-    border-color: var(--token-color-palette-blue-400);
+    background-color: var(--token-form-control-background-color-checked-hover);
+    border-color: var(--token-form-control-border-color-checked-hover);
   }
 
-  // focus (same for all the states)
+  // focus
+
   &:focus:not(:checked),
-  &:focus:checked,
-  &.mock-focus:checked,
   &.mock-focus:not(:checked) {
-    border-color: var(--token-color-palette-blue-400);
+    border-color: var(--token-form-control-border-color-default);;
     outline: 3px solid var(--token-color-focus-action-external);
     outline-offset: 1px;
   }
-
-  // INVALID
-
-  &.hds-form-radio--is-invalid:not(:checked) {
-    border-color: var(--token-color-palette-red-300);
-  }
-  &.hds-form-radio--is-invalid:checked {
-    background-color: var(--token-color-palette-red-200);
-    border-color: var(--token-color-palette-red-300);
-  }
-
-  &.hds-form-radio--is-invalid:hover:not(:checked),
-  &.hds-form-radio--is-invalid.mock-hover:not(:checked) {
-    border-color: var(--token-color-palette-red-400);
-  }
-  &.hds-form-radio--is-invalid:hover:checked,
-  &.hds-form-radio--is-invalid.mock-hover:checked {
-    background-color: var(--token-color-palette-red-300);
-    border-color: var(--token-color-palette-red-400);
+  &:focus:checked,
+  &.mock-focus:checked {
+    border-color: var(--token-form-control-border-color-checked);
+    outline: 3px solid var(--token-color-focus-action-external);
+    outline-offset: 1px;
   }
 
   // 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);
+  &:disabled:not(:checked) {
+    background-color: var(--token-form-control-background-color-disabled);
+    border-color: var(--token-form-control-border-color-disabled);
     box-shadow: none;
     cursor: not-allowed;
   }
-  &:disabled:checked,
-  &.hds-form-checkbox--is-invalid:disabled:checked {
-    background-color: var(--token-color-surface-strong);
-    border-color: var(--token-color-border-primary);
+  &:disabled:checked {
+    background-color: var(--token-form-control-background-color-disabled);
+    border-color: var(--token-form-control-border-color-disabled);
     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");
+    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='%238C909C'/%3e%3c/svg%3e");
     cursor: not-allowed;
   }
 }

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

@@ -7,25 +7,34 @@
 // "BASE" CONTROL
 
 .hds-form-select {
-  border: 1px solid var(--token-color-palette-neutral-400);
-  border-radius: 5px;
-  color: var(--token-color-foreground-strong);
-  padding: 7px; // we have to take into account the border
+  appearance: none;
+  background-color: var(--token-form-control-background-color-default);
+  // notice: the icon color is hardcoded here!
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E");
+  background-position: right 7px top 9px; // we have to take into account the border
+  background-repeat: no-repeat;
+  background-size: 16px;
+  border: 1px solid var(--token-form-control-border-color-default);
+  border-radius: var(--token-form-control-border-radius);
+  color: var(--token-form-control-foreground-color-default);
+  box-shadow: var(--token-elevation-low-box-shadow);
+  padding: 7px 31px 7px 7px; // we have to take into account the border - 32px is to have space for the icon
   max-width: 100%;
 
+
   // STATUS
 
   &:hover,
   &.mock-hover {
-    border-color: var(--token-color-palette-neutral-500);
+    border-color: var(--token-form-control-border-color-default-hover);
   }
 
   // focus (same for all the states)
-  // TODO add handling of focus-visible
+
   &:focus,
   &.mock-focus {
     border-color: var(--token-color-focus-action-internal);
-    // TODO: Safari doesn't apply a rounded border
+    // Notice: Safari doesn't apply a rounded border
     outline: 3px solid var(--token-color-focus-action-external);
     outline-offset: 0px;
   }
@@ -33,22 +42,25 @@
   // DISABLED
 
   &:disabled {
-    background-color: var(--token-color-surface-strong);
-    border-color: var(--token-color-border-primary);
+    // notice: the icon color is hardcoded here!
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E");
+    background-color: var(--token-form-control-background-color-disabled);
+    border-color: var(--token-form-control-border-color-disabled);
+    color: var(--token-form-control-foreground-color-disabled);
     cursor: not-allowed;
+    box-shadow: none;
   }
 
   // INVALID
 
   &.hds-form-select--is-invalid {
-    border-color: #C00005; // TODO convert to form-controls design token
+    border-color: var(--token-form-control-border-color-critical);
 
     &:hover,
     &.mock-hover {
-      border-color: #940004; // TODO convert to form-controls design token
+      border-color: var(--token-form-control-border-color-critical-hover);
     }
 
-    // TODO add handling of focus-visible
     &:focus,
     &.mock-focus {
       border-color: var(--token-color-focus-critical-internal);

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

@@ -7,11 +7,11 @@
 // "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;
+  background-color: var(--token-form-control-background-color-default);
+  border: 1px solid var(--token-form-control-border-color-default);
+  border-radius: var(--token-form-control-border-radius);
   box-shadow: var(--hds-elevation-inset-box-shadow);
-  color: var(--token-color-foreground-strong);
+  color: var(--token-form-control-foreground-color-default);
   padding: 7px; // we have to take into account the border
   width: 100%;
   max-width: 100%;
@@ -19,57 +19,55 @@
   // PLACEHOLDER
 
   ::placeholder {
-    color: var(--token-color-foreground-faint);
+    color: var(--token-form-control-placeholder-color);
   }
 
   // STATUS
 
   &:hover,
   &.mock-hover {
-    border-color: var(--token-color-palette-neutral-500);
+    border-color: var(--token-form-control-border-color-default-hover);
   }
 
   // focus (same for all the states)
-  // TODO add handling of focus-visible
+
   &:focus,
   &.mock-focus {
     border-color: var(--token-color-focus-action-internal);
-    // TODO: Safari doesn't apply a rounded border
+    // Notice: Safari doesn't apply a rounded border
     outline: 3px solid var(--token-color-focus-action-external);
     outline-offset: 0px;
   }
 
   // READONLY
 
-  &:read-only,
-  &[readonly] {
-    background-color: var(--token-color-surface-strong);
-    border-color: var(--token-color-palette-neutral-400);
+  &:read-only {
+    background-color: var(--token-form-control-background-color-readonly);
+    border-color: var(--token-form-control-border-color-readonly);
     box-shadow: none;
-    color: var(--token-color-foreground-primary);
+    color: var(--token-form-control-foreground-color-readonly);
   }
 
   // DISABLED
 
   &:disabled {
-    background-color: var(--token-color-surface-interactive-disabled);
-    border-color: var(--token-color-border-primary);
+    background-color: var(--token-form-control-background-color-disabled);
+    border-color: var(--token-form-control-border-color-disabled);
     box-shadow: none;
-    color: var(--token-color-foreground-disabled);
+    color: var(--token-form-control-foreground-color-disabled);
     cursor: not-allowed;
   }
 
   // INVALID
 
   &.hds-form-text-input--is-invalid {
-    border-color: #C00005; // TODO convert to form-controls design token
+    border-color: var(--token-form-control-border-color-critical);
 
     &:hover,
     &.mock-hover {
-      border-color: #940004; // TODO convert to form-controls design token
+      border-color: var(--token-form-control-border-color-critical-hover);
     }
 
-    // TODO add handling of focus-visible
     &:focus,
     &.mock-focus {
       border-color: var(--token-color-focus-critical-internal);
@@ -94,13 +92,14 @@
 
     // show the native icon dimmed if disabled (hidden in Chrome)
     &:disabled::-webkit-calendar-picker-indicator {
-        visibility: visible;
-        opacity: 0.5;
+      visibility: visible;
+      opacity: 0.5;
     }
 
     // show the icon if readonly
+    // notice: don't change the "[readonly]" selector to ":readonly" because it's needed to overwrite the specificity in Chrome
     &[readonly]::-webkit-calendar-picker-indicator {
-        visibility: visible;
+      visibility: visible;
     }
   }
 

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

@@ -7,12 +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;
+  background-color: var(--token-form-control-background-color-default);
+  border: 1px solid var(--token-form-control-border-color-default);
+  border-radius: var(--token-form-control-border-radius);
   box-shadow: var(--hds-elevation-inset-box-shadow);
-  color: var(--token-color-foreground-strong);
-  padding: 3px 7px; // we have to take into account the border
+  color: var(--token-form-control-foreground-color-default);
+  padding: 7px; // we have to take into account the border
   resize: vertical;
   width: 100%;
   max-width: 100%;
@@ -20,57 +20,55 @@
   // PLACEHOLDER
 
   ::placeholder {
-    color: var(--token-color-foreground-faint);
+    color: var(--token-form-control-placeholder-color);
   }
 
   // STATUS
 
   &:hover,
   &.mock-hover {
-    border-color: var(--token-color-palette-neutral-500);
+    border-color: var(--token-form-control-border-color-default-hover);
   }
 
   // focus (same for all the states)
-  // TODO add handling of focus-visible
+
   &:focus,
   &.mock-focus {
     border-color: var(--token-color-focus-action-internal);
-    // TODO: Safari doesn't apply a rounded border
+    // Notice: Safari doesn't apply a rounded border
     outline: 3px solid var(--token-color-focus-action-external);
     outline-offset: 0px;
   }
 
   // READONLY
 
-  &:read-only,
-  &[readonly] {
-    background-color: var(--token-color-surface-strong);
-    border-color: var(--token-color-palette-neutral-400);
+  &:read-only {
+    background-color: var(--token-form-control-background-color-readonly);
+    border-color: var(--token-form-control-border-color-readonly);
     box-shadow: none;
-    color: var(--token-color-foreground-primary);
+    color: var(--token-form-control-foreground-color-readonly);
   }
 
   // DISABLED
 
   &:disabled {
-    background-color: var(--token-color-surface-interactive-disabled);
-    border-color: var(--token-color-border-primary);
+    background-color: var(--token-form-control-background-color-disabled);
+    border-color: var(--token-form-control-border-color-disabled);
     box-shadow: none;
-    color: var(--token-color-foreground-disabled);
+    color: var(--token-form-control-foreground-color-disabled);
     cursor: not-allowed;
   }
 
   // INVALID
 
   &.hds-form-textarea--is-invalid {
-    border-color: #C00005; // TODO convert to form-controls design token
+    border-color: var(--token-form-control-border-color-critical);
 
     &:hover,
     &.mock-hover {
-      border-color: #940004; // TODO convert to form-controls design token
+      border-color: var(--token-form-control-border-color-critical-hover);
     }
 
-    // TODO add handling of focus-visible
     &:focus,
     &.mock-focus {
       border-color: var(--token-color-focus-critical-internal);

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

@@ -7,7 +7,7 @@
 @use "sass:math";
 
 $hds-form-toggle-control-width: 32px;
-$hds-form-toggle-control-height: 16px;
+$hds-form-toggle-control-height: 16px; // for the other controls we use "--token-form-checkbox-size" but in this case we need a Sass variable to do math operations on it
 $hds-form-toggle-border-radius: math.div($hds-form-toggle-control-height, 2);
 
 // "BASE" CONTROL
@@ -71,7 +71,7 @@ $hds-form-toggle-border-radius: math.div($hds-form-toggle-control-height, 2);
     left: -1px;
     position: absolute;
     transform: translate3d(0, 0, 0);
-    transition: transform 0.2s cubic-bezier(0.34, 1.61, 0.7, 1), border-color 0.2s ease-in;
+    transition: transform 0.2s cubic-bezier(0.68, -0.2, 0.265, 1.15), border-color 0.2s ease-in;
     top: -1px;
   }
 
@@ -96,12 +96,12 @@ $hds-form-toggle-border-radius: math.div($hds-form-toggle-control-height, 2);
   // base (default)
 
   :not(:checked) + & {
-    --border-color: var(--token-color-palette-neutral-400);
-    background-color: var(--token-color-surface-primary);
+    --border-color: var(--token-form-control-border-color-default);
+    background-color: var(--token-color-surface-strong); // not like the other controls!
   }
   :checked + & {
-    --border-color: var(--token-color-palette-blue-300);
-    background-color: var(--token-color-palette-blue-200);
+    --border-color: var(--token-form-control-border-color-checked);
+    background-color: var(--token-form-control-background-color-checked);
     // 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='%23FFF'/%3e%3c/svg%3e");
 
@@ -115,56 +115,41 @@ $hds-form-toggle-border-radius: math.div($hds-form-toggle-control-height, 2);
 
   :hover:not(:checked) + &,
   .mock-hover:not(:checked) + & {
-    --border-color: var(--token-color-palette-neutral-500);
+    --border-color: var(--token-form-control-border-color-default-hover);
   }
   :hover:checked + &,
   .mock-hover:checked + & {
-    --border-color: var(--token-color-palette-blue-400);
-    background-color: var(--token-color-palette-blue-300);
+    --border-color: var(--token-form-control-border-color-checked-hover);
+    background-color: var(--token-form-control-background-color-checked-hover);
   }
 
   // focus (same for all the states)
 
   :focus:not(:checked) + &,
-  :focus:checked + &,
-  .mock-focus:not(:checked) + &,
-  .mock-focus:checked + & {
-    --border-color: var(--token-color-palette-blue-400);
+  .mock-focus:not(:checked) + & {
+    --border-color: var(--token-form-control-border-color-default);
 
     &::before {
       border-style: solid;
       border-color: var( --token-color-focus-action-external);
     }
   }
+  :focus:checked + &,
+  .mock-focus:checked + & {
+    --border-color: var(--token-form-control-border-color-checked);
 
-  // INVALID
-
-  .hds-form-toggle--is-invalid :not(:checked) + & {
-    --border-color: var(--token-color-palette-red-300);
-  }
-  .hds-form-toggle--is-invalid :checked + & {
-    background-color: var(--token-color-palette-red-200);
-    --border-color: var(--token-color-palette-red-300);
-  }
-
-  .hds-form-toggle--is-invalid :hover:not(:checked) + &,
-  .hds-form-toggle--is-invalid .mock-hover:not(:checked) + & {
-    --border-color: var(--token-color-palette-red-400);
-  }
-  .hds-form-toggle--is-invalid :hover:checked + &,
-  .hds-form-toggle--is-invalid .mock-hover:checked + & {
-    --border-color: var(--token-color-palette-red-300);
-    background-color: var(--token-color-palette-red-400);
+    &::before {
+      border-style: solid;
+      border-color: var( --token-color-focus-action-external);
+    }
   }
 
   // DISABLED
 
   :disabled:not(:checked) + &,
-  :disabled:checked + &,
-  .hds-form-toggle--is-invalid :disabled:not(:checked) + &,
-  .hds-form-toggle--is-invalid :disabled:checked + & {
-    background-color: var(--token-color-surface-strong);
-    --border-color: var(--token-color-border-primary);
+  :disabled:checked + & {
+    background-color: var(--token-form-control-background-color-disabled);
+    --border-color: var(--token-form-control-border-color-disabled);
     // 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");
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.12.10",
+  "version": "0.12.13",
   "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.5.1",
+    "@percy/cli": "^1.6.1",
     "@percy/ember": "^3.0.0",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",

package/addon/components/hds/form/checkbox/base.js

@@ -1,19 +0,0 @@
-import Component from '@glimmer/component';
-
-export default class HdsFormCheckboxBaseComponent extends Component {
-  /**
-   * Get the class names to apply to the component.
-   * @method classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
-  get classNames() {
-    let classes = ['hds-form-checkbox'];
-
-    // add a class based on the @isInvalid argument
-    if (this.args.isInvalid) {
-      classes.push(`hds-form-checkbox--is-invalid`);
-    }
-
-    return classes.join(' ');
-  }
-}

package/addon/components/hds/form/radio/base.js

@@ -1,19 +0,0 @@
-import Component from '@glimmer/component';
-
-export default class HdsFormRadioBaseComponent extends Component {
-  /**
-   * Get the class names to apply to the component.
-   * @method classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
-  get classNames() {
-    let classes = ['hds-form-radio'];
-
-    // add a class based on the @isInvalid argument
-    if (this.args.isInvalid) {
-      classes.push(`hds-form-radio--is-invalid`);
-    }
-
-    return classes.join(' ');
-  }
-}