@abgov/web-components 1.0.0-alpha.131 → 1.0.0-alpha.133

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/web-components",
-  "version": "1.0.0-alpha.131",
+  "version": "1.0.0-alpha.133",
   "description": "Government of Alberta - UI Web components",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/web-components.es.js

@@ -2902,7 +2902,7 @@ function create_if_block_1$8(ctx) {
 	};
 }
 
-// (66:4) {#if isIndeterminate}
+// (68:4) {#if isIndeterminate}
 function create_if_block$e(ctx) {
 	let svg;
 	let rect;
@@ -2933,6 +2933,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;
@@ -2943,8 +2944,8 @@ function create_fragment$w(ctx) {
 	let dispose;
 
 	function select_block_type(ctx, dirty) {
-		if (/*isIndeterminate*/ ctx[9]) return create_if_block$e;
-		if (/*isChecked*/ ctx[8]) return create_if_block_1$8;
+		if (/*isIndeterminate*/ ctx[10]) return create_if_block$e;
+		if (/*isChecked*/ ctx[9]) return create_if_block_1$8;
 	}
 
 	let current_block_type = select_block_type(ctx);
@@ -2964,20 +2965,21 @@ function create_fragment$w(ctx) {
 			this.c = noop;
 			attr(input, "id", /*name*/ ctx[0]);
 			attr(input, "name", /*name*/ ctx[0]);
-			input.checked = /*isChecked*/ ctx[8];
-			input.disabled = /*isDisabled*/ ctx[11];
+			input.checked = /*isChecked*/ ctx[9];
+			input.disabled = /*isDisabled*/ 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]);
+			toggle_class(div0, "goa-checkbox--selected", /*isChecked*/ ctx[9]);
 			attr(div1, "class", "goa-checkbox-text");
 			attr(div1, "data-testid", "text");
 			attr(label, "data-testid", /*testid*/ ctx[3]);
 			attr(label, "for", /*name*/ ctx[0]);
-			attr(label, "style", label_style_value = calculateMargin(/*mt*/ ctx[4], /*mr*/ ctx[5], /*mb*/ ctx[6], /*ml*/ ctx[7]));
+			attr(label, "style", label_style_value = calculateMargin(/*mt*/ ctx[5], /*mr*/ ctx[6], /*mb*/ ctx[7], /*ml*/ ctx[8]));
 			attr(label, "class", "goa-checkbox");
-			toggle_class(label, "goa-checkbox--disabled", /*isDisabled*/ ctx[11]);
-			toggle_class(label, "goa-checkbox--error", /*isError*/ ctx[10]);
+			toggle_class(label, "goa-checkbox--disabled", /*isDisabled*/ ctx[12]);
+			toggle_class(label, "goa-checkbox--error", /*isError*/ ctx[11]);
 		},
 		m(target, anchor) {
 			insert(target, label, anchor);
@@ -2991,7 +2993,7 @@ function create_fragment$w(ctx) {
 			append(slot, t2);
 
 			if (!mounted) {
-				dispose = listen(input, "change", /*onChange*/ ctx[12]);
+				dispose = listen(input, "change", /*onChange*/ ctx[13]);
 				mounted = true;
 			}
 		},
@@ -3004,18 +3006,22 @@ function create_fragment$w(ctx) {
 				attr(input, "name", /*name*/ ctx[0]);
 			}
 
-			if (dirty & /*isChecked*/ 256) {
-				input.checked = /*isChecked*/ ctx[8];
+			if (dirty & /*isChecked*/ 512) {
+				input.checked = /*isChecked*/ ctx[9];
 			}
 
-			if (dirty & /*isDisabled*/ 2048) {
-				input.disabled = /*isDisabled*/ ctx[11];
+			if (dirty & /*isDisabled*/ 4096) {
+				input.disabled = /*isDisabled*/ ctx[12];
 			}
 
 			if (dirty & /*value*/ 4 && input_value_value !== (input_value_value = `${/*value*/ ctx[2]}`)) {
 				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);
@@ -3026,8 +3032,8 @@ function create_fragment$w(ctx) {
 				}
 			}
 
-			if (dirty & /*isChecked*/ 256) {
-				toggle_class(div0, "goa-checkbox--selected", /*isChecked*/ ctx[8]);
+			if (dirty & /*isChecked*/ 512) {
+				toggle_class(div0, "goa-checkbox--selected", /*isChecked*/ ctx[9]);
 			}
 
 			if (dirty & /*text*/ 2) set_data(t2, /*text*/ ctx[1]);
@@ -3040,16 +3046,16 @@ function create_fragment$w(ctx) {
 				attr(label, "for", /*name*/ ctx[0]);
 			}
 
-			if (dirty & /*mt, mr, mb, ml*/ 240 && label_style_value !== (label_style_value = calculateMargin(/*mt*/ ctx[4], /*mr*/ ctx[5], /*mb*/ ctx[6], /*ml*/ ctx[7]))) {
+			if (dirty & /*mt, mr, mb, ml*/ 480 && label_style_value !== (label_style_value = calculateMargin(/*mt*/ ctx[5], /*mr*/ ctx[6], /*mb*/ ctx[7], /*ml*/ ctx[8]))) {
 				attr(label, "style", label_style_value);
 			}
 
-			if (dirty & /*isDisabled*/ 2048) {
-				toggle_class(label, "goa-checkbox--disabled", /*isDisabled*/ ctx[11]);
+			if (dirty & /*isDisabled*/ 4096) {
+				toggle_class(label, "goa-checkbox--disabled", /*isDisabled*/ ctx[12]);
 			}
 
-			if (dirty & /*isError*/ 1024) {
-				toggle_class(label, "goa-checkbox--error", /*isError*/ ctx[10]);
+			if (dirty & /*isError*/ 2048) {
+				toggle_class(label, "goa-checkbox--error", /*isError*/ ctx[11]);
 			}
 		},
 		i: noop,
@@ -3079,6 +3085,7 @@ function instance$u($$self, $$props, $$invalidate) {
 	let { disabled = "false" } = $$props;
 	let { error = "false" } = $$props;
 	let { testid = "" } = $$props;
+	let { arialabel = "" } = $$props;
 	let { mt = null } = $$props;
 	let { mr = null } = $$props;
 	let { mb = null } = $$props;
@@ -3100,7 +3107,7 @@ function instance$u($$self, $$props, $$invalidate) {
 		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",
 		{
@@ -3115,40 +3122,42 @@ 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) {
+		if ($$self.$$.dirty & /*disabled*/ 32768) {
 			// Binding
-			$$invalidate(11, isDisabled = toBoolean(disabled));
+			$$invalidate(12, isDisabled = toBoolean(disabled));
 		}
 
-		if ($$self.$$.dirty & /*error*/ 32768) {
-			$$invalidate(10, isError = toBoolean(error));
+		if ($$self.$$.dirty & /*error*/ 65536) {
+			$$invalidate(11, isError = toBoolean(error));
 		}
 
-		if ($$self.$$.dirty & /*checked*/ 8192) {
-			$$invalidate(8, isChecked = toBoolean(checked));
+		if ($$self.$$.dirty & /*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,
+		arialabel,
 		mt,
 		mr,
 		mb,
@@ -3181,16 +3190,17 @@ class Checkbox extends SvelteElement {
 			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
 		);
@@ -3216,6 +3226,7 @@ class Checkbox extends SvelteElement {
 			"disabled",
 			"error",
 			"testid",
+			"arialabel",
 			"mt",
 			"mr",
 			"mb",
@@ -3233,7 +3244,7 @@ class Checkbox extends SvelteElement {
 	}
 
 	get checked() {
-		return this.$$.ctx[13];
+		return this.$$.ctx[14];
 	}
 
 	set checked(checked) {
@@ -3260,7 +3271,7 @@ class Checkbox extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[14];
+		return this.$$.ctx[15];
 	}
 
 	set disabled(disabled) {
@@ -3269,7 +3280,7 @@ class Checkbox extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[15];
+		return this.$$.ctx[16];
 	}
 
 	set error(error) {
@@ -3286,17 +3297,26 @@ 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 });
 		flush();
 	}
 
 	get mr() {
-		return this.$$.ctx[5];
+		return this.$$.ctx[6];
 	}
 
 	set mr(mr) {
@@ -3305,7 +3325,7 @@ class Checkbox extends SvelteElement {
 	}
 
 	get mb() {
-		return this.$$.ctx[6];
+		return this.$$.ctx[7];
 	}
 
 	set mb(mb) {
@@ -3314,7 +3334,7 @@ class Checkbox extends SvelteElement {
 	}
 
 	get ml() {
-		return this.$$.ctx[7];
+		return this.$$.ctx[8];
 	}
 
 	set ml(ml) {
@@ -8404,7 +8424,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)}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);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>')
       center center no-repeat}</style>`;
 
 		init(
@@ -9974,21 +9994,22 @@ 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) {
 	let label;
 	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 || /*option*/ ctx[19].value) + "";
+	let t2_value = (/*option*/ ctx[20].label || /*option*/ ctx[20].value) + "";
 	let t2;
 	let t3;
 	let label_data_testid_value;
@@ -9996,7 +10017,7 @@ function create_each_block$1(key_1, ctx) {
 	let dispose;
 
 	function change_handler() {
-		return /*change_handler*/ ctx[17](/*option*/ ctx[19]);
+		return /*change_handler*/ ctx[18](/*option*/ ctx[20]);
 	}
 
 	return {
@@ -10013,15 +10034,16 @@ function create_each_block$1(key_1, ctx) {
 			t3 = space();
 			attr(input, "type", "radio");
 			attr(input, "name", /*name*/ ctx[1]);
-			input.value = input_value_value = /*option*/ ctx[19].value;
-			input.disabled = /*isDisabled*/ ctx[11];
-			input.checked = input_checked_value = /*option*/ ctx[19].value === /*value*/ ctx[0];
+			input.value = input_value_value = /*option*/ ctx[20].value;
+			input.disabled = /*isDisabled*/ ctx[12];
+			input.checked = input_checked_value = /*option*/ 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);
+			attr(label, "data-testid", label_data_testid_value = "radio-option-" + /*option*/ ctx[20].value);
 			attr(label, "class", "goa-radio");
-			toggle_class(label, "goa-radio--disabled", /*isDisabled*/ ctx[11]);
-			toggle_class(label, "goa-radio--error", /*isError*/ ctx[9]);
+			toggle_class(label, "goa-radio--disabled", /*isDisabled*/ ctx[12]);
+			toggle_class(label, "goa-radio--error", /*isError*/ ctx[10]);
 			this.first = label;
 		},
 		m(target, anchor) {
@@ -10046,30 +10068,34 @@ function create_each_block$1(key_1, ctx) {
 				attr(input, "name", /*name*/ ctx[1]);
 			}
 
-			if (dirty & /*options*/ 256 && input_value_value !== (input_value_value = /*option*/ ctx[19].value)) {
+			if (dirty & /*options*/ 512 && input_value_value !== (input_value_value = /*option*/ ctx[20].value)) {
 				input.value = input_value_value;
 			}
 
-			if (dirty & /*isDisabled*/ 2048) {
-				input.disabled = /*isDisabled*/ ctx[11];
+			if (dirty & /*isDisabled*/ 4096) {
+				input.disabled = /*isDisabled*/ ctx[12];
 			}
 
-			if (dirty & /*options, value*/ 257 && input_checked_value !== (input_checked_value = /*option*/ ctx[19].value === /*value*/ ctx[0])) {
+			if (dirty & /*options, value*/ 513 && input_checked_value !== (input_checked_value = /*option*/ ctx[20].value === /*value*/ ctx[0])) {
 				input.checked = input_checked_value;
 			}
 
-			if (dirty & /*options*/ 256 && t2_value !== (t2_value = (/*option*/ ctx[19].label || /*option*/ ctx[19].value) + "")) set_data(t2, t2_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*/ 512 && t2_value !== (t2_value = (/*option*/ ctx[20].label || /*option*/ ctx[20].value) + "")) set_data(t2, t2_value);
 
-			if (dirty & /*options*/ 256 && label_data_testid_value !== (label_data_testid_value = "radio-option-" + /*option*/ ctx[19].value)) {
+			if (dirty & /*options*/ 512 && label_data_testid_value !== (label_data_testid_value = "radio-option-" + /*option*/ ctx[20].value)) {
 				attr(label, "data-testid", label_data_testid_value);
 			}
 
-			if (dirty & /*isDisabled*/ 2048) {
-				toggle_class(label, "goa-radio--disabled", /*isDisabled*/ ctx[11]);
+			if (dirty & /*isDisabled*/ 4096) {
+				toggle_class(label, "goa-radio--disabled", /*isDisabled*/ ctx[12]);
 			}
 
-			if (dirty & /*isError*/ 512) {
-				toggle_class(label, "goa-radio--error", /*isError*/ ctx[9]);
+			if (dirty & /*isError*/ 1024) {
+				toggle_class(label, "goa-radio--error", /*isError*/ ctx[10]);
 			}
 		},
 		d(detaching) {
@@ -10088,8 +10114,8 @@ function create_fragment$c(ctx) {
 	let each_1_lookup = new Map();
 	let div_style_value;
 	let div_class_value;
-	let each_value = /*options*/ ctx[8];
-	const get_key = ctx => /*option*/ ctx[19].value;
+	let each_value = /*options*/ ctx[9];
+	const get_key = ctx => /*option*/ ctx[20].value;
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context$1(ctx, each_value, i);
@@ -10108,7 +10134,7 @@ function create_fragment$c(ctx) {
 			}
 
 			this.c = noop;
-			attr(div, "style", div_style_value = calculateMargin(/*mt*/ ctx[4], /*mr*/ ctx[5], /*mb*/ ctx[6], /*ml*/ ctx[7]));
+			attr(div, "style", div_style_value = calculateMargin(/*mt*/ ctx[5], /*mr*/ ctx[6], /*mb*/ ctx[7], /*ml*/ ctx[8]));
 			attr(div, "class", div_class_value = `goa-radio-group--${/*orientation*/ ctx[2]}`);
 			attr(div, "data-testid", /*testid*/ ctx[3]);
 		},
@@ -10121,15 +10147,15 @@ function create_fragment$c(ctx) {
 				each_blocks[i].m(div, null);
 			}
 
-			/*div_binding*/ ctx[18](div);
+			/*div_binding*/ ctx[19](div);
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*options, isDisabled, isError, name, value, onChange*/ 6915) {
-				each_value = /*options*/ ctx[8];
+			if (dirty & /*options, isDisabled, isError, name, value, arialabel, onChange*/ 13843) {
+				each_value = /*options*/ 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(/*mt*/ ctx[4], /*mr*/ ctx[5], /*mb*/ ctx[6], /*ml*/ ctx[7]))) {
+			if (dirty & /*mt, mr, mb, ml*/ 480 && div_style_value !== (div_style_value = calculateMargin(/*mt*/ ctx[5], /*mr*/ ctx[6], /*mb*/ ctx[7], /*ml*/ ctx[8]))) {
 				attr(div, "style", div_style_value);
 			}
 
@@ -10150,7 +10176,7 @@ function create_fragment$c(ctx) {
 				each_blocks[i].d();
 			}
 
-			/*div_binding*/ ctx[18](null);
+			/*div_binding*/ ctx[19](null);
 		}
 	};
 }
@@ -10163,6 +10189,7 @@ function instance$a($$self, $$props, $$invalidate) {
 	let { disabled = "false" } = $$props;
 	let { error = "false" } = $$props;
 	let { testid = "" } = $$props;
+	let { arialabel = "" } = $$props;
 	let { mt = null } = $$props;
 	let { mr = null } = $$props;
 	let { mb = null } = $$props;
@@ -10191,7 +10218,7 @@ function instance$a($$self, $$props, $$invalidate) {
 	function div_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			el = $$value;
-			$$invalidate(10, el);
+			$$invalidate(11, el);
 		});
 	}
 
@@ -10199,33 +10226,34 @@ 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));
+		if ($$self.$$.dirty & /*disabled*/ 16384) {
+			$$invalidate(12, isDisabled = toBoolean(disabled));
 		}
 
-		if ($$self.$$.dirty & /*error*/ 16384) {
-			$$invalidate(9, isError = toBoolean(error));
+		if ($$self.$$.dirty & /*error*/ 32768) {
+			$$invalidate(10, isError = toBoolean(error));
 		}
 
-		if ($$self.$$.dirty & /*name, isBound, ctx, options*/ 98562) {
+		if ($$self.$$.dirty & /*name, isBound, ctx, options*/ 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]);
 					});
 				}
 			}
@@ -10237,6 +10265,7 @@ function instance$a($$self, $$props, $$invalidate) {
 		name,
 		orientation,
 		testid,
+		arialabel,
 		mt,
 		mr,
 		mb,
@@ -10277,13 +10306,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
 		);
@@ -10308,6 +10338,7 @@ class RadioGroup extends SvelteElement {
 			"disabled",
 			"error",
 			"testid",
+			"arialabel",
 			"mt",
 			"mr",
 			"mb",
@@ -10343,7 +10374,7 @@ class RadioGroup extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[13];
+		return this.$$.ctx[14];
 	}
 
 	set disabled(disabled) {
@@ -10352,7 +10383,7 @@ class RadioGroup extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[14];
+		return this.$$.ctx[15];
 	}
 
 	set error(error) {
@@ -10369,17 +10400,26 @@ 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 });
 		flush();
 	}
 
 	get mr() {
-		return this.$$.ctx[5];
+		return this.$$.ctx[6];
 	}
 
 	set mr(mr) {
@@ -10388,7 +10428,7 @@ class RadioGroup extends SvelteElement {
 	}
 
 	get mb() {
-		return this.$$.ctx[6];
+		return this.$$.ctx[7];
 	}
 
 	set mb(mb) {
@@ -10397,7 +10437,7 @@ class RadioGroup extends SvelteElement {
 	}
 
 	get ml() {
-		return this.$$.ctx[7];
+		return this.$$.ctx[8];
 	}
 
 	set ml(ml) {