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

package/react-components.umd.js

@@ -3556,7 +3556,7 @@
 	    }
 
 	  };
-	} // (66:4) {#if isIndeterminate}
+	} // (68:4) {#if isIndeterminate}
 
 
 	function create_if_block$e(ctx) {
@@ -3591,6 +3591,7 @@
 	  let div0;
 	  let input;
 	  let input_value_value;
+	  let input_aria_label_value;
 	  let t0;
 	  let t1;
 	  let div1;
@@ -3603,10 +3604,10 @@
 	  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);
@@ -3633,18 +3634,23 @@
 	      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",
@@ -3655,20 +3661,20 @@
 	      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) {
@@ -3685,7 +3691,7 @@
 	      if (!mounted) {
 	        dispose = listen(input, "change",
 	        /*onChange*/
-	        ctx[12]);
+	        ctx[13]);
 	        mounted = true;
 	      }
 	    },
@@ -3709,18 +3715,18 @@
 
 	      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 &
@@ -3731,6 +3737,16 @@
 	        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);
@@ -3743,10 +3759,10 @@
 
 	      if (dirty &
 	      /*isChecked*/
-	      256) {
+	      512) {
 	        toggle_class(div0, "goa-checkbox--selected",
 	        /*isChecked*/
-	        ctx[8]);
+	        ctx[9]);
 	      }
 
 	      if (dirty &
@@ -3773,32 +3789,32 @@
 
 	      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]);
 	      }
 	    },
 
@@ -3845,6 +3861,9 @@
 	  let {
 	    testid = ""
 	  } = $$props;
+	  let {
+	    arialabel = ""
+	  } = $$props;
 	  let {
 	    mt = null
 	  } = $$props;
@@ -3871,7 +3890,7 @@
 	    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: {
@@ -3884,42 +3903,43 @@
 
 	  $$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 {
@@ -3932,16 +3952,17 @@
 	      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) {
@@ -3957,7 +3978,7 @@
 	  }
 
 	  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() {
@@ -3972,7 +3993,7 @@
 	  }
 
 	  get checked() {
-	    return this.$$.ctx[13];
+	    return this.$$.ctx[14];
 	  }
 
 	  set checked(checked) {
@@ -4005,7 +4026,7 @@
 	  }
 
 	  get disabled() {
-	    return this.$$.ctx[14];
+	    return this.$$.ctx[15];
 	  }
 
 	  set disabled(disabled) {
@@ -4016,7 +4037,7 @@
 	  }
 
 	  get error() {
-	    return this.$$.ctx[15];
+	    return this.$$.ctx[16];
 	  }
 
 	  set error(error) {
@@ -4037,10 +4058,21 @@
 	    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
@@ -4049,7 +4081,7 @@
 	  }
 
 	  get mr() {
-	    return this.$$.ctx[5];
+	    return this.$$.ctx[6];
 	  }
 
 	  set mr(mr) {
@@ -4060,7 +4092,7 @@
 	  }
 
 	  get mb() {
-	    return this.$$.ctx[6];
+	    return this.$$.ctx[7];
 	  }
 
 	  set mb(mb) {
@@ -4071,7 +4103,7 @@
 	  }
 
 	  get ml() {
-	    return this.$$.ctx[7];
+	    return this.$$.ctx[8];
 	  }
 
 	  set ml(ml) {
@@ -10446,7 +10478,7 @@
 	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,
@@ -12229,9 +12261,9 @@
 
 	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) {
@@ -12239,15 +12271,16 @@
 	  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;
@@ -12257,9 +12290,9 @@
 	  function change_handler() {
 	    return (
 	      /*change_handler*/
-	      ctx[17](
+	      ctx[18](
 	      /*option*/
-	      ctx[19])
+	      ctx[20])
 	    );
 	  }
 
@@ -12282,27 +12315,32 @@
 	      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;
 	    },
 
@@ -12335,60 +12373,70 @@
 
 	      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]);
 	      }
 	    },
 
@@ -12411,11 +12459,11 @@
 	  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);
@@ -12436,13 +12484,13 @@
 	      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]}`);
@@ -12462,30 +12510,30 @@
 	      /*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);
 	      }
 
@@ -12518,7 +12566,7 @@
 	      /*div_binding*/
 
 
-	      ctx[18](null);
+	      ctx[19](null);
 	    }
 
 	  };
@@ -12544,6 +12592,9 @@
 	  let {
 	    testid = ""
 	  } = $$props;
+	  let {
+	    arialabel = ""
+	  } = $$props;
 	  let {
 	    mt = null
 	  } = $$props;
@@ -12584,7 +12635,7 @@
 	  function div_binding($$value) {
 	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 	      el = $$value;
-	      $$invalidate(10, el);
+	      $$invalidate(11, el);
 	    });
 	  }
 
@@ -12592,45 +12643,46 @@
 	    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 {
@@ -12647,13 +12699,14 @@
 	      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) {
@@ -12669,7 +12722,7 @@
 	  }
 
 	  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() {
@@ -12706,7 +12759,7 @@
 	  }
 
 	  get disabled() {
-	    return this.$$.ctx[13];
+	    return this.$$.ctx[14];
 	  }
 
 	  set disabled(disabled) {
@@ -12717,7 +12770,7 @@
 	  }
 
 	  get error() {
-	    return this.$$.ctx[14];
+	    return this.$$.ctx[15];
 	  }
 
 	  set error(error) {
@@ -12738,10 +12791,21 @@
 	    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
@@ -12750,7 +12814,7 @@
 	  }
 
 	  get mr() {
-	    return this.$$.ctx[5];
+	    return this.$$.ctx[6];
 	  }
 
 	  set mr(mr) {
@@ -12761,7 +12825,7 @@
 	  }
 
 	  get mb() {
-	    return this.$$.ctx[6];
+	    return this.$$.ctx[7];
 	  }
 
 	  set mb(mb) {
@@ -12772,7 +12836,7 @@
 	  }
 
 	  get ml() {
-	    return this.$$.ctx[7];
+	    return this.$$.ctx[8];
 	  }
 
 	  set ml(ml) {
@@ -14690,7 +14754,7 @@
 	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,
@@ -16245,6 +16309,7 @@
 	      text = _a.text,
 	      children = _a.children,
 	      onChange = _a.onChange,
+	      ariaLabel = _a.ariaLabel,
 	      mt = _a.mt,
 	      mr = _a.mr,
 	      mb = _a.mb,
@@ -16277,6 +16342,7 @@
 	    disabled: disabled,
 	    text: text,
 	    value: value,
+	    arialabel: ariaLabel,
 	    mt: mt,
 	    mr: mr,
 	    mb: mb,
@@ -16431,6 +16497,7 @@
 	    error: props.error,
 	    testid: props.testId,
 	    width: props.width,
+	    arialabel: props.ariaLabel,
 	    mt: props.mt,
 	    mr: props.mr,
 	    mb: props.mb,
@@ -16630,6 +16697,7 @@
 	      step = _a.step,
 	      prefix = _a.prefix,
 	      suffix = _a.suffix,
+	      ariaLabel = _a.ariaLabel,
 	      mt = _a.mt,
 	      mr = _a.mr,
 	      mb = _a.mb,
@@ -16684,6 +16752,7 @@
 	    step: step,
 	    prefix: prefix,
 	    suffix: suffix,
+	    arialabel: ariaLabel,
 	    mt: mt,
 	    mr: mr,
 	    mb: mb,
@@ -16968,6 +17037,7 @@
 	      _d = _a.error,
 	      error = _d === void 0 ? false : _d,
 	      testId = _a.testId,
+	      ariaLabel = _a.ariaLabel,
 	      mt = _a.mt,
 	      mr = _a.mr,
 	      mb = _a.mb,
@@ -17002,6 +17072,7 @@
 	    orientation: orientation,
 	    disabled: disabled,
 	    error: error,
+	    arialabel: ariaLabel,
 	    mt: mt,
 	    mr: mr,
 	    mb: mb,
@@ -17065,6 +17136,7 @@
 	      width = _a.width,
 	      testId = _a.testId,
 	      error = _a.error,
+	      ariaLabel = _a.ariaLabel,
 	      mt = _a.mt,
 	      mr = _a.mr,
 	      mb = _a.mb,
@@ -17102,6 +17174,7 @@
 	    width: width,
 	    error: error,
 	    "data-testid": testId,
+	    arialabel: ariaLabel,
 	    mt: mt,
 	    mr: mr,
 	    mb: mb,