@abgov/react-components 4.0.0-alpha.92 → 4.0.0-alpha.94

package/react-components.esm.js

@@ -3515,7 +3515,7 @@ function create_if_block_1$8(ctx) {
     }
 
   };
-} // (66:4) {#if isIndeterminate}
+} // (68:4) {#if isIndeterminate}
 
 
 function create_if_block$e(ctx) {
@@ -3550,6 +3550,7 @@ function create_fragment$w(ctx) {
   let div0;
   let input;
   let input_value_value;
+  let input_aria_label_value;
   let t0;
   let t1;
   let div1;
@@ -3562,10 +3563,10 @@ function create_fragment$w(ctx) {
   function select_block_type(ctx, dirty) {
     if (
     /*isIndeterminate*/
-    ctx[9]) return create_if_block$e;
+    ctx[10]) return create_if_block$e;
     if (
     /*isChecked*/
-    ctx[8]) return create_if_block_1$8;
+    ctx[9]) return create_if_block_1$8;
   }
 
   let current_block_type = select_block_type(ctx);
@@ -3592,18 +3593,23 @@ function create_fragment$w(ctx) {
       ctx[0]);
       input.checked =
       /*isChecked*/
-      ctx[8];
+      ctx[9];
       input.disabled =
       /*isDisabled*/
-      ctx[11];
+      ctx[12];
       attr(input, "type", "checkbox");
       input.value = input_value_value = `${
       /*value*/
       ctx[2]}`;
+      attr(input, "aria-label", input_aria_label_value =
+      /*arialabel*/
+      ctx[4] ||
+      /*name*/
+      ctx[0]);
       attr(div0, "class", "goa-checkbox-container");
       toggle_class(div0, "goa-checkbox--selected",
       /*isChecked*/
-      ctx[8]);
+      ctx[9]);
       attr(div1, "class", "goa-checkbox-text");
       attr(div1, "data-testid", "text");
       attr(label, "data-testid",
@@ -3614,20 +3620,20 @@ function create_fragment$w(ctx) {
       ctx[0]);
       attr(label, "style", label_style_value = calculateMargin(
       /*mt*/
-      ctx[4],
-      /*mr*/
       ctx[5],
-      /*mb*/
+      /*mr*/
       ctx[6],
+      /*mb*/
+      ctx[7],
       /*ml*/
-      ctx[7]));
+      ctx[8]));
       attr(label, "class", "goa-checkbox");
       toggle_class(label, "goa-checkbox--disabled",
       /*isDisabled*/
-      ctx[11]);
+      ctx[12]);
       toggle_class(label, "goa-checkbox--error",
       /*isError*/
-      ctx[10]);
+      ctx[11]);
     },
 
     m(target, anchor) {
@@ -3644,7 +3650,7 @@ function create_fragment$w(ctx) {
       if (!mounted) {
         dispose = listen(input, "change",
         /*onChange*/
-        ctx[12]);
+        ctx[13]);
         mounted = true;
       }
     },
@@ -3668,18 +3674,18 @@ function create_fragment$w(ctx) {
 
       if (dirty &
       /*isChecked*/
-      256) {
+      512) {
         input.checked =
         /*isChecked*/
-        ctx[8];
+        ctx[9];
       }
 
       if (dirty &
       /*isDisabled*/
-      2048) {
+      4096) {
         input.disabled =
         /*isDisabled*/
-        ctx[11];
+        ctx[12];
       }
 
       if (dirty &
@@ -3690,6 +3696,16 @@ function create_fragment$w(ctx) {
         input.value = input_value_value;
       }
 
+      if (dirty &
+      /*arialabel, name*/
+      17 && input_aria_label_value !== (input_aria_label_value =
+      /*arialabel*/
+      ctx[4] ||
+      /*name*/
+      ctx[0])) {
+        attr(input, "aria-label", input_aria_label_value);
+      }
+
       if (current_block_type !== (current_block_type = select_block_type(ctx))) {
         if (if_block) if_block.d(1);
         if_block = current_block_type && current_block_type(ctx);
@@ -3702,10 +3718,10 @@ function create_fragment$w(ctx) {
 
       if (dirty &
       /*isChecked*/
-      256) {
+      512) {
         toggle_class(div0, "goa-checkbox--selected",
         /*isChecked*/
-        ctx[8]);
+        ctx[9]);
       }
 
       if (dirty &
@@ -3732,32 +3748,32 @@ function create_fragment$w(ctx) {
 
       if (dirty &
       /*mt, mr, mb, ml*/
-      240 && label_style_value !== (label_style_value = calculateMargin(
+      480 && label_style_value !== (label_style_value = calculateMargin(
       /*mt*/
-      ctx[4],
-      /*mr*/
       ctx[5],
-      /*mb*/
+      /*mr*/
       ctx[6],
+      /*mb*/
+      ctx[7],
       /*ml*/
-      ctx[7]))) {
+      ctx[8]))) {
         attr(label, "style", label_style_value);
       }
 
       if (dirty &
       /*isDisabled*/
-      2048) {
+      4096) {
         toggle_class(label, "goa-checkbox--disabled",
         /*isDisabled*/
-        ctx[11]);
+        ctx[12]);
       }
 
       if (dirty &
       /*isError*/
-      1024) {
+      2048) {
         toggle_class(label, "goa-checkbox--error",
         /*isError*/
-        ctx[10]);
+        ctx[11]);
       }
     },
 
@@ -3804,6 +3820,9 @@ function instance$u($$self, $$props, $$invalidate) {
   let {
     testid = ""
   } = $$props;
+  let {
+    arialabel = ""
+  } = $$props;
   let {
     mt = null
   } = $$props;
@@ -3830,7 +3849,7 @@ function instance$u($$self, $$props, $$invalidate) {
     const newCheckStatus = !isChecked;
     const newValue = newCheckStatus ? `${_value || "checked"}` : ""; // set the local state
 
-    $$invalidate(13, checked = fromBoolean(newCheckStatus));
+    $$invalidate(14, checked = fromBoolean(newCheckStatus));
     e.target.dispatchEvent(new CustomEvent("_change", {
       composed: true,
       detail: {
@@ -3843,42 +3862,43 @@ function instance$u($$self, $$props, $$invalidate) {
 
   $$self.$$set = $$props => {
     if ('name' in $$props) $$invalidate(0, name = $$props.name);
-    if ('checked' in $$props) $$invalidate(13, checked = $$props.checked);
+    if ('checked' in $$props) $$invalidate(14, checked = $$props.checked);
     if ('text' in $$props) $$invalidate(1, text = $$props.text);
     if ('value' in $$props) $$invalidate(2, value = $$props.value);
-    if ('disabled' in $$props) $$invalidate(14, disabled = $$props.disabled);
-    if ('error' in $$props) $$invalidate(15, error = $$props.error);
+    if ('disabled' in $$props) $$invalidate(15, disabled = $$props.disabled);
+    if ('error' in $$props) $$invalidate(16, error = $$props.error);
     if ('testid' in $$props) $$invalidate(3, testid = $$props.testid);
-    if ('mt' in $$props) $$invalidate(4, mt = $$props.mt);
-    if ('mr' in $$props) $$invalidate(5, mr = $$props.mr);
-    if ('mb' in $$props) $$invalidate(6, mb = $$props.mb);
-    if ('ml' in $$props) $$invalidate(7, ml = $$props.ml);
+    if ('arialabel' in $$props) $$invalidate(4, arialabel = $$props.arialabel);
+    if ('mt' in $$props) $$invalidate(5, mt = $$props.mt);
+    if ('mr' in $$props) $$invalidate(6, mr = $$props.mr);
+    if ('mb' in $$props) $$invalidate(7, mb = $$props.mb);
+    if ('ml' in $$props) $$invalidate(8, ml = $$props.ml);
   };
 
   $$self.$$.update = () => {
     if ($$self.$$.dirty &
     /*disabled*/
-    16384) {
+    32768) {
       // Binding
-      $$invalidate(11, isDisabled = toBoolean(disabled));
+      $$invalidate(12, isDisabled = toBoolean(disabled));
     }
 
     if ($$self.$$.dirty &
     /*error*/
-    32768) {
-      $$invalidate(10, isError = toBoolean(error));
+    65536) {
+      $$invalidate(11, isError = toBoolean(error));
     }
 
     if ($$self.$$.dirty &
     /*checked*/
-    8192) {
-      $$invalidate(8, isChecked = toBoolean(checked));
+    16384) {
+      $$invalidate(9, isChecked = toBoolean(checked));
     }
   };
 
-  $$invalidate(9, isIndeterminate = false); // Desighn review. To be built with TreeView Later
+  $$invalidate(10, isIndeterminate = false); // Desighn review. To be built with TreeView Later
 
-  return [name, text, value, testid, mt, mr, mb, ml, isChecked, isIndeterminate, isError, isDisabled, onChange, checked, disabled, error];
+  return [name, text, value, testid, arialabel, mt, mr, mb, ml, isChecked, isIndeterminate, isError, isDisabled, onChange, checked, disabled, error];
 }
 
 class Checkbox extends SvelteElement {
@@ -3891,16 +3911,17 @@ class Checkbox extends SvelteElement {
       customElement: true
     }, instance$u, create_fragment$w, safe_not_equal, {
       name: 0,
-      checked: 13,
+      checked: 14,
       text: 1,
       value: 2,
-      disabled: 14,
-      error: 15,
+      disabled: 15,
+      error: 16,
       testid: 3,
-      mt: 4,
-      mr: 5,
-      mb: 6,
-      ml: 7
+      arialabel: 4,
+      mt: 5,
+      mr: 6,
+      mb: 7,
+      ml: 8
     }, null);
 
     if (options) {
@@ -3916,7 +3937,7 @@ class Checkbox extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["name", "checked", "text", "value", "disabled", "error", "testid", "mt", "mr", "mb", "ml"];
+    return ["name", "checked", "text", "value", "disabled", "error", "testid", "arialabel", "mt", "mr", "mb", "ml"];
   }
 
   get name() {
@@ -3931,7 +3952,7 @@ class Checkbox extends SvelteElement {
   }
 
   get checked() {
-    return this.$$.ctx[13];
+    return this.$$.ctx[14];
   }
 
   set checked(checked) {
@@ -3964,7 +3985,7 @@ class Checkbox extends SvelteElement {
   }
 
   get disabled() {
-    return this.$$.ctx[14];
+    return this.$$.ctx[15];
   }
 
   set disabled(disabled) {
@@ -3975,7 +3996,7 @@ class Checkbox extends SvelteElement {
   }
 
   get error() {
-    return this.$$.ctx[15];
+    return this.$$.ctx[16];
   }
 
   set error(error) {
@@ -3996,10 +4017,21 @@ class Checkbox extends SvelteElement {
     flush();
   }
 
-  get mt() {
+  get arialabel() {
     return this.$$.ctx[4];
   }
 
+  set arialabel(arialabel) {
+    this.$$set({
+      arialabel
+    });
+    flush();
+  }
+
+  get mt() {
+    return this.$$.ctx[5];
+  }
+
   set mt(mt) {
     this.$$set({
       mt
@@ -4008,7 +4040,7 @@ class Checkbox extends SvelteElement {
   }
 
   get mr() {
-    return this.$$.ctx[5];
+    return this.$$.ctx[6];
   }
 
   set mr(mr) {
@@ -4019,7 +4051,7 @@ class Checkbox extends SvelteElement {
   }
 
   get mb() {
-    return this.$$.ctx[6];
+    return this.$$.ctx[7];
   }
 
   set mb(mb) {
@@ -4030,7 +4062,7 @@ class Checkbox extends SvelteElement {
   }
 
   get ml() {
-    return this.$$.ctx[7];
+    return this.$$.ctx[8];
   }
 
   set ml(ml) {
@@ -10401,7 +10433,7 @@ function instance$f($$self, $$props, $$invalidate) {
 class Input extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);background:white;display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto}input[type=text],input[type=date],input[type="datetime-local"],input[type=number]{font-family:var(--font-family)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix{background-color:var(--color-gray-100);padding:0 0.75rem;display:flex;align-items:center}.prefix{border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius);border-right:1px solid var(--color-gray-600)}.suffix{border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius);border-left:1px solid var(--color-gray-600)}.goa-input--disabled .prefix{border-right:1px solid var(--color-gray-200)}.goa-input--disabled .suffix{border-left:1px solid var(--color-gray-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto}input[type=text],input[type=date],input[type="datetime-local"],input[type=number]{font-family:var(--font-family)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix{background-color:var(--color-gray-100);padding:0 0.75rem;display:flex;align-items:center}.prefix{border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius);border-right:1px solid var(--color-gray-600)}.suffix{border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius);border-left:1px solid var(--color-gray-600)}.goa-input--disabled .prefix{border-right:1px solid var(--color-gray-200)}.goa-input--disabled .suffix{border-left:1px solid var(--color-gray-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
       center center no-repeat}</style>`;
     init(this, {
       target: this.shadowRoot,
@@ -12184,9 +12216,9 @@ customElements.define("goa-page-block", PageBlock);
 
 function get_each_context$1(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[19] = list[i];
+  child_ctx[20] = list[i];
   return child_ctx;
-} // (59:2) {#each options as option (option.value)}
+} // (60:2) {#each options as option (option.value)}
 
 
 function create_each_block$1(key_1, ctx) {
@@ -12194,15 +12226,16 @@ function create_each_block$1(key_1, ctx) {
   let input;
   let input_value_value;
   let input_checked_value;
+  let input_aria_label_value;
   let t0;
   let div;
   let t1;
   let span;
   let t2_value = (
   /*option*/
-  ctx[19].label ||
+  ctx[20].label ||
   /*option*/
-  ctx[19].value) + "";
+  ctx[20].value) + "";
   let t2;
   let t3;
   let label_data_testid_value;
@@ -12212,9 +12245,9 @@ function create_each_block$1(key_1, ctx) {
   function change_handler() {
     return (
       /*change_handler*/
-      ctx[17](
+      ctx[18](
       /*option*/
-      ctx[19])
+      ctx[20])
     );
   }
 
@@ -12237,27 +12270,32 @@ function create_each_block$1(key_1, ctx) {
       ctx[1]);
       input.value = input_value_value =
       /*option*/
-      ctx[19].value;
+      ctx[20].value;
       input.disabled =
       /*isDisabled*/
-      ctx[11];
+      ctx[12];
       input.checked = input_checked_value =
       /*option*/
-      ctx[19].value ===
+      ctx[20].value ===
       /*value*/
       ctx[0];
+      attr(input, "aria-label", input_aria_label_value =
+      /*arialabel*/
+      ctx[4] ||
+      /*name*/
+      ctx[1]);
       attr(div, "class", "goa-radio-icon");
       attr(span, "class", "goa-radio-label");
       attr(label, "data-testid", label_data_testid_value = "radio-option-" +
       /*option*/
-      ctx[19].value);
+      ctx[20].value);
       attr(label, "class", "goa-radio");
       toggle_class(label, "goa-radio--disabled",
       /*isDisabled*/
-      ctx[11]);
+      ctx[12]);
       toggle_class(label, "goa-radio--error",
       /*isError*/
-      ctx[9]);
+      ctx[10]);
       this.first = label;
     },
 
@@ -12290,60 +12328,70 @@ function create_each_block$1(key_1, ctx) {
 
       if (dirty &
       /*options*/
-      256 && input_value_value !== (input_value_value =
+      512 && input_value_value !== (input_value_value =
       /*option*/
-      ctx[19].value)) {
+      ctx[20].value)) {
         input.value = input_value_value;
       }
 
       if (dirty &
       /*isDisabled*/
-      2048) {
+      4096) {
         input.disabled =
         /*isDisabled*/
-        ctx[11];
+        ctx[12];
       }
 
       if (dirty &
       /*options, value*/
-      257 && input_checked_value !== (input_checked_value =
+      513 && input_checked_value !== (input_checked_value =
       /*option*/
-      ctx[19].value ===
+      ctx[20].value ===
       /*value*/
       ctx[0])) {
         input.checked = input_checked_value;
       }
 
+      if (dirty &
+      /*arialabel, name*/
+      18 && input_aria_label_value !== (input_aria_label_value =
+      /*arialabel*/
+      ctx[4] ||
+      /*name*/
+      ctx[1])) {
+        attr(input, "aria-label", input_aria_label_value);
+      }
+
       if (dirty &
       /*options*/
-      256 && t2_value !== (t2_value = (
+      512 && t2_value !== (t2_value = (
       /*option*/
-      ctx[19].label ||
+      ctx[20].label ||
       /*option*/
-      ctx[19].value) + "")) set_data(t2, t2_value);
+      ctx[20].value) + "")) set_data(t2, t2_value);
 
       if (dirty &
       /*options*/
-      256 && label_data_testid_value !== (label_data_testid_value = "radio-option-" +
+      512 && label_data_testid_value !== (label_data_testid_value = "radio-option-" +
       /*option*/
-      ctx[19].value)) {
+      ctx[20].value)) {
         attr(label, "data-testid", label_data_testid_value);
       }
 
       if (dirty &
       /*isDisabled*/
-      2048) {
+      4096) {
         toggle_class(label, "goa-radio--disabled",
         /*isDisabled*/
-        ctx[11]);
+        ctx[12]);
       }
 
       if (dirty &
       /*isError*/
-      512) {
+      1024) {
         toggle_class(label, "goa-radio--error",
         /*isError*/
-        ctx[9]);
+        ctx[10]);
       }
     },
 
@@ -12366,11 +12414,11 @@ function create_fragment$c(ctx) {
   let div_class_value;
   let each_value =
   /*options*/
-  ctx[8];
+  ctx[9];
 
   const get_key = ctx =>
   /*option*/
-  ctx[19].value;
+  ctx[20].value;
 
   for (let i = 0; i < each_value.length; i += 1) {
     let child_ctx = get_each_context$1(ctx, each_value, i);
@@ -12391,13 +12439,13 @@ function create_fragment$c(ctx) {
       this.c = noop;
       attr(div, "style", div_style_value = calculateMargin(
       /*mt*/
-      ctx[4],
-      /*mr*/
       ctx[5],
-      /*mb*/
+      /*mr*/
       ctx[6],
+      /*mb*/
+      ctx[7],
       /*ml*/
-      ctx[7]));
+      ctx[8]));
       attr(div, "class", div_class_value = `goa-radio-group--${
       /*orientation*/
       ctx[2]}`);
@@ -12417,30 +12465,30 @@ function create_fragment$c(ctx) {
       /*div_binding*/
 
 
-      ctx[18](div);
+      ctx[19](div);
     },
 
     p(ctx, [dirty]) {
       if (dirty &
-      /*options, isDisabled, isError, name, value, onChange*/
-      6915) {
+      /*options, isDisabled, isError, name, value, arialabel, onChange*/
+      13843) {
         each_value =
         /*options*/
-        ctx[8];
+        ctx[9];
         each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, destroy_block, create_each_block$1, null, get_each_context$1);
       }
 
       if (dirty &
       /*mt, mr, mb, ml*/
-      240 && div_style_value !== (div_style_value = calculateMargin(
+      480 && div_style_value !== (div_style_value = calculateMargin(
       /*mt*/
-      ctx[4],
-      /*mr*/
       ctx[5],
-      /*mb*/
+      /*mr*/
       ctx[6],
+      /*mb*/
+      ctx[7],
       /*ml*/
-      ctx[7]))) {
+      ctx[8]))) {
         attr(div, "style", div_style_value);
       }
 
@@ -12473,7 +12521,7 @@ function create_fragment$c(ctx) {
       /*div_binding*/
 
 
-      ctx[18](null);
+      ctx[19](null);
     }
 
   };
@@ -12499,6 +12547,9 @@ function instance$a($$self, $$props, $$invalidate) {
   let {
     testid = ""
   } = $$props;
+  let {
+    arialabel = ""
+  } = $$props;
   let {
     mt = null
   } = $$props;
@@ -12539,7 +12590,7 @@ function instance$a($$self, $$props, $$invalidate) {
   function div_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       el = $$value;
-      $$invalidate(10, el);
+      $$invalidate(11, el);
     });
   }
 
@@ -12547,45 +12598,46 @@ function instance$a($$self, $$props, $$invalidate) {
     if ('name' in $$props) $$invalidate(1, name = $$props.name);
     if ('value' in $$props) $$invalidate(0, value = $$props.value);
     if ('orientation' in $$props) $$invalidate(2, orientation = $$props.orientation);
-    if ('disabled' in $$props) $$invalidate(13, disabled = $$props.disabled);
-    if ('error' in $$props) $$invalidate(14, error = $$props.error);
+    if ('disabled' in $$props) $$invalidate(14, disabled = $$props.disabled);
+    if ('error' in $$props) $$invalidate(15, error = $$props.error);
     if ('testid' in $$props) $$invalidate(3, testid = $$props.testid);
-    if ('mt' in $$props) $$invalidate(4, mt = $$props.mt);
-    if ('mr' in $$props) $$invalidate(5, mr = $$props.mr);
-    if ('mb' in $$props) $$invalidate(6, mb = $$props.mb);
-    if ('ml' in $$props) $$invalidate(7, ml = $$props.ml);
+    if ('arialabel' in $$props) $$invalidate(4, arialabel = $$props.arialabel);
+    if ('mt' in $$props) $$invalidate(5, mt = $$props.mt);
+    if ('mr' in $$props) $$invalidate(6, mr = $$props.mr);
+    if ('mb' in $$props) $$invalidate(7, mb = $$props.mb);
+    if ('ml' in $$props) $$invalidate(8, ml = $$props.ml);
   };
 
   $$self.$$.update = () => {
     if ($$self.$$.dirty &
     /*disabled*/
-    8192) {
-      $$invalidate(11, isDisabled = toBoolean(disabled));
+    16384) {
+      $$invalidate(12, isDisabled = toBoolean(disabled));
     }
 
     if ($$self.$$.dirty &
     /*error*/
-    16384) {
-      $$invalidate(9, isError = toBoolean(error));
+    32768) {
+      $$invalidate(10, isError = toBoolean(error));
     }
 
     if ($$self.$$.dirty &
     /*name, isBound, ctx, options*/
-    98562) {
+    197122) {
       {
         if (name && !isBound) {
-          $$invalidate(16, isBound = true);
-          $$invalidate(15, ctx = getContext(name));
+          $$invalidate(17, isBound = true);
+          $$invalidate(16, ctx = getContext(name));
           ctx.subscribe(msg => {
             if (!msg) return;
-            $$invalidate(8, options = [...options, msg]);
+            $$invalidate(9, options = [...options, msg]);
           });
         }
       }
     }
   };
 
-  return [value, name, orientation, testid, mt, mr, mb, ml, options, isError, el, isDisabled, onChange, disabled, error, ctx, isBound, change_handler, div_binding];
+  return [value, name, orientation, testid, arialabel, mt, mr, mb, ml, options, isError, el, isDisabled, onChange, disabled, error, ctx, isBound, change_handler, div_binding];
 }
 
 class RadioGroup extends SvelteElement {
@@ -12602,13 +12654,14 @@ class RadioGroup extends SvelteElement {
       name: 1,
       value: 0,
       orientation: 2,
-      disabled: 13,
-      error: 14,
+      disabled: 14,
+      error: 15,
       testid: 3,
-      mt: 4,
-      mr: 5,
-      mb: 6,
-      ml: 7
+      arialabel: 4,
+      mt: 5,
+      mr: 6,
+      mb: 7,
+      ml: 8
     }, null);
 
     if (options) {
@@ -12624,7 +12677,7 @@ class RadioGroup extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["name", "value", "orientation", "disabled", "error", "testid", "mt", "mr", "mb", "ml"];
+    return ["name", "value", "orientation", "disabled", "error", "testid", "arialabel", "mt", "mr", "mb", "ml"];
   }
 
   get name() {
@@ -12661,7 +12714,7 @@ class RadioGroup extends SvelteElement {
   }
 
   get disabled() {
-    return this.$$.ctx[13];
+    return this.$$.ctx[14];
   }
 
   set disabled(disabled) {
@@ -12672,7 +12725,7 @@ class RadioGroup extends SvelteElement {
   }
 
   get error() {
-    return this.$$.ctx[14];
+    return this.$$.ctx[15];
   }
 
   set error(error) {
@@ -12693,10 +12746,21 @@ class RadioGroup extends SvelteElement {
     flush();
   }
 
-  get mt() {
+  get arialabel() {
     return this.$$.ctx[4];
   }
 
+  set arialabel(arialabel) {
+    this.$$set({
+      arialabel
+    });
+    flush();
+  }
+
+  get mt() {
+    return this.$$.ctx[5];
+  }
+
   set mt(mt) {
     this.$$set({
       mt
@@ -12705,7 +12769,7 @@ class RadioGroup extends SvelteElement {
   }
 
   get mr() {
-    return this.$$.ctx[5];
+    return this.$$.ctx[6];
   }
 
   set mr(mr) {
@@ -12716,7 +12780,7 @@ class RadioGroup extends SvelteElement {
   }
 
   get mb() {
-    return this.$$.ctx[6];
+    return this.$$.ctx[7];
   }
 
   set mb(mb) {
@@ -12727,7 +12791,7 @@ class RadioGroup extends SvelteElement {
   }
 
   get ml() {
-    return this.$$.ctx[7];
+    return this.$$.ctx[8];
   }
 
   set ml(ml) {
@@ -14645,7 +14709,7 @@ function instance$5($$self, $$props, $$invalidate) {
 class TextArea extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.container{position:relative;width:100%}@media(min-width: 640px){.container{max-width:var(--width)}}.goa-textarea{display:block;width:100%;box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:3px;background:var(--color-white);color:var(--color-black, #ccc);padding:var(--textarea-padding-vertical, 0.5rem) var(--textarea-padding-horizontal, 0.5rem);font-size:var(--input-font-size);font-family:var(--font-family);min-width:100%}@media(min-width: 640px){.goa-textarea{min-width:0;width:var(--width)}}.goa-textarea[readonly]{cursor:pointer}.goa-textarea:hover{border-color:var(--goa-color-interactive--hover)}.goa-textarea:active,.goa-textarea:focus,.goa-textarea:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-textarea:disabled{border-color:var(--color-gray-200)}.goa-textarea:disabled:hover{border-color:var(--color-gray-200)}.goa-textarea:disabled:focus,.goa-textarea:disabled:active{box-shadow:none}.counter{position:absolute;right:0;padding-top:0.25rem;font-size:var(--fs-sm)}.counter-error{color:var(--goa-color-interactive--error)
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.container{position:relative;width:100%}@media(min-width: 640px){.container{max-width:var(--width)}}.goa-textarea{display:block;width:100%;box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:3px;color:var(--color-black, #ccc);padding:var(--textarea-padding-vertical, 0.5rem) var(--textarea-padding-horizontal, 0.5rem);font-size:var(--input-font-size);font-family:var(--font-family);min-width:100%}@media(min-width: 640px){.goa-textarea{min-width:0;width:var(--width)}}.goa-textarea[readonly]{cursor:pointer}.goa-textarea:hover{border-color:var(--goa-color-interactive--hover)}.goa-textarea:active,.goa-textarea:focus,.goa-textarea:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-textarea:disabled,.goa-textarea:disabled:hover,.goa-textarea:disabled:active,.goa-textarea:disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.counter{position:absolute;right:0;padding-top:0.25rem;font-size:var(--fs-sm)}.counter-error{color:var(--goa-color-interactive--error)
   }.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}</style>`;
     init(this, {
       target: this.shadowRoot,
@@ -16168,6 +16232,7 @@ const GoACheckbox = ({
   text,
   children,
   onChange,
+  ariaLabel,
   mt,
   mr,
   mb,
@@ -16201,6 +16266,7 @@ const GoACheckbox = ({
     disabled: disabled,
     text: text,
     value: value,
+    arialabel: ariaLabel,
     mt: mt,
     mr: mr,
     mb: mb,
@@ -16356,6 +16422,7 @@ const GoADropdown = props => {
     error: props.error,
     testid: props.testId,
     width: props.width,
+    arialabel: props.ariaLabel,
     mt: props.mt,
     mr: props.mr,
     mb: props.mb,
@@ -16587,6 +16654,7 @@ const GoAInput = ({
   step,
   prefix,
   suffix,
+  ariaLabel,
   mt,
   mr,
   mb,
@@ -16643,6 +16711,7 @@ const GoAInput = ({
     step: step,
     prefix: prefix,
     suffix: suffix,
+    arialabel: ariaLabel,
     mt: mt,
     mr: mr,
     mb: mb,
@@ -16925,6 +16994,7 @@ const GoARadioGroup = ({
   disabled: _disabled = false,
   error: _error = false,
   testId,
+  ariaLabel,
   mt,
   mr,
   mb,
@@ -16960,6 +17030,7 @@ const GoARadioGroup = ({
     orientation: _orientation,
     disabled: _disabled,
     error: _error,
+    arialabel: ariaLabel,
     mt: mt,
     mr: mr,
     mb: mb,
@@ -17025,6 +17096,7 @@ const GoATextArea = ({
   width,
   testId,
   error,
+  ariaLabel,
   mt,
   mr,
   mb,
@@ -17064,6 +17136,7 @@ const GoATextArea = ({
     width: width,
     error: error,
     "data-testid": testId,
+    arialabel: ariaLabel,
     mt: mt,
     mr: mr,
     mb: mb,