feat: 🎸 add inline aligntment support to checkbox and radio

addons/rose/addon/components/rose/form/checkbox/index.hbs

@@ -1,4 +1,4 @@
-<div class="rose-form-checkbox{{if @error " error"}}">
+<div class="rose-form-checkbox{{if @error " error"}} {{if @inline "inline"}}">
 
   <Input
     ...attributes

addons/rose/addon/components/rose/form/radio/group/index.hbs

@@ -1,3 +1,5 @@
+<div class="{{if @inline 'radio-group-inline'}}">
 {{yield (hash
   radio=(component 'rose/form/radio/radio' name=@name selectedValue=@selectedValue disabled=@disabled changed=@changed)
 )}}
+</div>

addons/rose/addon/components/rose/form/radio/radio/index.hbs

@@ -1,8 +1,8 @@
-<div class="rose-form-radio{{if @error " error"}}">
+<div class="rose-form-radio{{if @error " error"}} {{if @inline "inline"}}">
 
   <RadioButton
     ...attributes
-    @radioClass="rose-form-radio-field"
+    @radioClass="rose-form-radio-field" 
     @radioId={{this.id}}
     type="radio"
     disabled={{@disabled}}

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

@@ -2,6 +2,10 @@
 @use '../../utilities/type';
 
 .rose-form-checkbox {
+  &.inline {
+    display: inline-block;
+    margin-right: sizing.rems(s);
+  }
   @include type.type(m);
   position: relative;
   margin-bottom: sizing.rems(m);

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

@@ -21,6 +21,12 @@ $radio-svg: (
 );
 
 $data-svg-prefix: 'data:image/svg+xml;utf-8,';
+.radio-group-inline {
+  display: flex;
+  .rose-form-radio {
+    margin-right: sizing.rems(s);
+  }
+}
 
 .rose-form-radio {
   @include type.type(m);