refactor: 💡 push error class down from field wrapper element

addons/rose/addon/components/rose/form/helper-text.stories.mdx

@@ -17,12 +17,14 @@ by form fields and should not be used directly.
 ```
 
 <Preview>
-  <Story name="Basic Form Errors">{{
+  <Story name="HelperText">{{
     template: hbs`
-      <Rose::Form::HelperText>
+      <Rose::Form::HelperText @error={{this.error}}>
         Helper text
       </Rose::Form::HelperText>
     `,
-    context: {},
+    context: {
+      error: boolean('error', false)
+    },
   }}</Story>
 </Preview>

addons/rose/addon/components/rose/form/label.stories.mdx

@@ -19,9 +19,12 @@ and should not be used directly.
 <Preview>
   <Story name="Form Label">{{
     template: hbs`
-      <Rose::Form::Label @for="my-field-id">
+      <Rose::Form::Label @for="my-field-id" @error={{this.error}}>
         Form Label
       </Rose::Form::Label>
-    `
+    `,
+    context: {
+      error: boolean('error', false)
+    },
   }}</Story>
 </Preview>

addons/rose/addon/styles/rose/components/form/_helper-text.scss

@@ -6,4 +6,8 @@
   display: block;
   color: var(--ui-gray);
   margin-bottom: sizing.rems(xxs);
+
+  &.error {
+    color: var(--failure);
+  }
 }

addons/rose/addon/styles/rose/components/form/_input.scss

@@ -3,19 +3,6 @@
 
 .rose-form-input {
   margin-bottom: sizing.rems(m);
-
-  &.error {
-    color: var(--failure);
-
-    .rose-form-helper-text {
-      color: currentColor;
-    }
-
-    .rose-form-input-field {
-      color: currentColor;
-      border-color: currentColor;
-    }
-  }
 }
 
 .rose-form-input-field {
@@ -31,6 +18,11 @@
   box-shadow: inset 0px 3px 1px
     rgba(var(--stark-components), var(--opacity-4));
 
+  &.error {
+    color: var(--failure);
+    border-color: currentColor;
+  }
+
   &:not(:disabled):not([readonly]) {
     &:hover {
       border-color: var(--ui-gray);

addons/rose/addon/styles/rose/components/form/_label.scss

@@ -5,4 +5,8 @@
   @include type.type(s, semibold);
   display: block;
   margin-bottom: sizing.rems(xxs);
+
+  &.error {
+    color: var(--failure);
+  }
 }

addons/rose/addon/styles/rose/components/form/_select.scss

@@ -3,19 +3,6 @@
 
 .rose-form-select {
   margin-bottom: sizing.rems(m);
-
-  &.error {
-    color: var(--failure);
-
-    .rose-form-helper-text {
-      color: currentColor;
-    }
-
-    .rose-form-select-field {
-      color: currentColor;
-      border-color: currentColor;
-    }
-  }
 }
 
 .rose-form-select-field {
@@ -37,6 +24,11 @@
     no-repeat right sizing.rems(xs) center;
   background-size: sizing.rems(l);
 
+  &.error {
+    color: var(--failure);
+    border-color: currentColor;
+  }
+
   &:not(:disabled) {
     &:hover {
       border-color: var(--ui-gray-subtler-1);

addons/rose/addon/templates/components/rose/form/helper-text.hbs

@@ -1,5 +1,5 @@
 <span
-  class="rose-form-helper-text"
+  class="rose-form-helper-text{{if @error " error"}}"
   id={{@id}}
   ...attributes
 >

addons/rose/addon/templates/components/rose/form/input.hbs

@@ -1,30 +1,29 @@
-<div class="rose-form-input{{if @error " error"}}">
+<div class="rose-form-input">
 
-  <Rose::Form::Label @for={{this.id}}>{{@label}}</Rose::Form::Label>
+  <Rose::Form::Label @for={{this.id}} @error={{@error}}>
+    {{@label}}
+  </Rose::Form::Label>
 
   {{#if @helperText}}
-    <Rose::Form::HelperText @id="helper-text-{{this.id}}">
+    <Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}}>
       {{@helperText}}
     </Rose::Form::HelperText>
   {{/if}}
 
-  {{!--
-    - refactor errors styles so that error classes appear on individual atoms
-      instead of on the parent wrapper (since the wrapper won't exist in cases
-      where the atoms are yielded, such as for use within a list
-      or other custom use cases)
-  --}}
   <Rose::Form::Input::Input
     ...attributes
+    class="{{if @error "error"}}"
     @id={{this.id}}
-    @disabled={{@disabled}}
     @name={{@name}}
-    @type={{@type}}
     @value={{@value}}
+    @type={{@type}}
+    @disabled={{@disabled}}
     @aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
 
   {{yield (hash
-    errors=(component 'rose/form/errors' id=(concat 'errors-' this.id))
+    errors=(component 'rose/form/errors'
+      id=(concat 'errors-' this.id)
+    )
   )}}
 
 </div>

addons/rose/addon/templates/components/rose/form/label.hbs

@@ -1,3 +1,7 @@
-<label class="rose-form-label" for={{@for}} ...attributes>
+<label
+  class="rose-form-label{{if @error " error"}}"
+  for={{@for}}
+  ...attributes
+>
   {{yield}}
 </label>

addons/rose/addon/templates/components/rose/form/select.hbs

@@ -1,9 +1,11 @@
-<div class="rose-form-select{{if @error " error"}}">
+<div class="rose-form-select">
 
-  <Rose::Form::Label @for={{this.id}}>{{@label}}</Rose::Form::Label>
+  <Rose::Form::Label @for={{this.id}} @error={{@error}}>
+    {{@label}}
+  </Rose::Form::Label>
 
   {{#if @helperText}}
-    <Rose::Form::HelperText @id="helper-text-{{this.id}}">
+    <Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}}>
       {{@helperText}}
     </Rose::Form::HelperText>
   {{/if}}
@@ -17,6 +19,7 @@
       onChange=@onChange
       helperText=@helperText
       error=@error
+      aria-describedby=(concat (if @helperText (concat 'helper-text-' this.id)) (if @error (concat ' errors-' this.id)))
     )
     errors=(component 'rose/form/errors' id=(concat 'errors-' this.id))
   )}}

addons/rose/addon/templates/components/rose/form/select/select.hbs

@@ -1,11 +1,12 @@
 <XSelect
-  class="rose-form-select-field"
+  ...attributes
+  class="rose-form-select-field{{if @error " error"}}"
   id={{@id}}
   name={{@name}}
   disabled={{@disabled}}
   @value={{@value}}
   @onChange={{@onChange}}
-  aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}"
+  aria-describedby={{@aria-describedby}}
   as |xs|
 >
   {{yield xs}}

addons/rose/addon/templates/components/rose/form/textarea.hbs

@@ -1,20 +1,22 @@
-<div class="rose-form-input{{if @error " error"}}">
+<div class="rose-form-input">
 
-  <Rose::Form::Label @for={{this.id}}>{{@label}}</Rose::Form::Label>
+  <Rose::Form::Label @for={{this.id}} @error={{@error}}>
+    {{@label}}
+  </Rose::Form::Label>
 
   {{#if @helperText}}
-    <Rose::Form::HelperText @id="helper-text-{{this.id}}">
+    <Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}}>
       {{@helperText}}
     </Rose::Form::HelperText>
   {{/if}}
 
   <Rose::Form::Textarea::Textarea
     ...attributes
-    class="rose-form-input-field"
+    class="{{if @error "error"}}"
     @id={{this.id}}
     @name={{@name}}
-    @disabled={{@disabled}}
     @value={{@value}}
+    @disabled={{@disabled}}
     @aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
 
   {{yield (hash