chore: 🤖 build out textarea component

addons/rose/addon/components/rose/form/input.js

@@ -2,7 +2,7 @@ import Component from '@ember/component';
 import layout from '../../../templates/components/rose/form/input';
 
 /**
- * A simple HTML `<button>` element.
+ * A simple HTML `<input>` element.
  *
  * @example
  *  <Rose::Form::Input

addons/rose/addon/components/rose/form/textarea.js

@@ -0,0 +1,20 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/form/textarea';
+
+/**
+ * A `<textarea>` element essentially identical to `Rose::Form::Input` except
+ * for the field element.
+ *
+ * @example
+ *  <Rose::Form::Textarea
+ *    @value="Text"
+ *    @label="Label"
+ *    @helperText="Helper text"
+ *    @error={{true}}
+ *    disabled={{true}}
+ *    readonly={{true}}
+ *    />
+ */
+export default Component.extend({
+  layout,
+});

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

@@ -38,6 +38,7 @@
     }
 
     &:disabled {
+      cursor: not-allowed;
       color: var(--ui-gray);
       background-color: var(--ui-gray-subtler-6);
     }

addons/rose/addon/styles/rose/variables/_sizing.scss

@@ -23,7 +23,7 @@ $size-coefficients: (
   //  4
     xxxs: 0.125,
   //  2
-    xxxxs: 0.0625 //  1,,
+    xxxxs: 0.0625 //  1,,,
 );
 
 /**

addons/rose/addon/styles/rose/variables/_typography.scss

@@ -40,7 +40,7 @@ $font-sizes: (
   // 20
     h3: sizing.size(m),
   // 16
-    button: sizing.size(m) * 0.8125 // 13,,
+    button: sizing.size(m) * 0.8125 // 13,,,
 );
 
 // Line height expressed as ratio.

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

@@ -0,0 +1,18 @@
+<div class="rose-form-input{{if @error " error"}}">
+
+  <label class="rose-form-input-label">
+    {{@label}}
+  </label>
+
+  {{#if @helperText}}
+    <span class="rose-form-input-helper-text">{{@helperText}}</span>
+  {{/if}}
+
+  <Textarea
+    ...attributes
+    class="rose-form-input-field"
+    @value={{@value}} />
+
+  {{yield}}
+
+</div>