@abgov/web-components 1.0.0-alpha.26 → 1.0.0-alpha.29

package/web-components.es.js

@@ -809,7 +809,6 @@ customElements.define("goa-page-block", PageBlock);
 /* libs/web-components/src/components/app-header/AppHeader.svelte generated by Svelte v3.44.3 */
 
 function create_fragment$v(ctx) {
-	let goa_page_block;
 	let div1;
 	let a;
 	let img0;
@@ -825,7 +824,6 @@ function create_fragment$v(ctx) {
 
 	return {
 		c() {
-			goa_page_block = element("goa-page-block");
 			div1 = element("div");
 			a = element("a");
 			img0 = element("img");
@@ -851,8 +849,7 @@ function create_fragment$v(ctx) {
 			attr(div1, "data-testid", /*testid*/ ctx[2]);
 		},
 		m(target, anchor) {
-			insert(target, goa_page_block, anchor);
-			append(goa_page_block, div1);
+			insert(target, div1, anchor);
 			append(div1, a);
 			append(a, img0);
 			append(a, t0);
@@ -877,7 +874,7 @@ function create_fragment$v(ctx) {
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(goa_page_block);
+			if (detaching) detach(div1);
 		}
 	};
 }
@@ -2104,7 +2101,7 @@ function create_if_block_1$8(ctx) {
 	};
 }
 
-// (51:4) {#if isIndeterminate}
+// (50:4) {#if isIndeterminate}
 function create_if_block$b(ctx) {
 	let svg;
 	let rect;
@@ -2144,8 +2141,8 @@ function create_fragment$l(ctx) {
 	let dispose;
 
 	function select_block_type(ctx, dirty) {
-		if (/*isIndeterminate*/ ctx[6]) return create_if_block$b;
-		if (/*isChecked*/ ctx[5]) return create_if_block_1$8;
+		if (/*isIndeterminate*/ ctx[5]) return create_if_block$b;
+		if (/*isChecked*/ ctx[4]) return create_if_block_1$8;
 	}
 
 	let current_block_type = select_block_type(ctx);
@@ -2161,24 +2158,24 @@ function create_fragment$l(ctx) {
 			t1 = space();
 			div1 = element("div");
 			slot = element("slot");
-			t2 = text(/*text*/ ctx[2]);
+			t2 = text(/*text*/ ctx[1]);
 			this.c = noop;
-			attr(input, "id", /*id*/ ctx[0]);
-			attr(input, "data-testid", /*testid*/ ctx[4]);
-			attr(input, "name", /*name*/ ctx[1]);
-			input.checked = /*isChecked*/ ctx[5];
-			input.disabled = /*isDisabled*/ ctx[8];
+			attr(input, "id", /*id*/ ctx[8]);
+			attr(input, "data-testid", /*testid*/ ctx[3]);
+			attr(input, "name", /*name*/ ctx[0]);
+			input.checked = /*isChecked*/ ctx[4];
+			input.disabled = /*isDisabled*/ ctx[7];
 			attr(input, "type", "checkbox");
-			input.value = input_value_value = `${/*value*/ ctx[3]}`;
+			input.value = input_value_value = `${/*value*/ ctx[2]}`;
 			attr(div0, "class", "goa-checkbox-container");
-			toggle_class(div0, "goa-checkbox--selected", /*isChecked*/ ctx[5]);
+			toggle_class(div0, "goa-checkbox--selected", /*isChecked*/ ctx[4]);
 			attr(slot, "name", "main");
 			attr(div1, "class", "goa-checkbox-text");
 			attr(div1, "data-testid", "text");
-			attr(label, "for", /*id*/ ctx[0]);
+			attr(label, "for", /*id*/ ctx[8]);
 			attr(label, "class", "goa-checkbox");
-			toggle_class(label, "goa-checkbox--disabled", /*isDisabled*/ ctx[8]);
-			toggle_class(label, "goa-checkbox--error", /*isError*/ ctx[7]);
+			toggle_class(label, "goa-checkbox--disabled", /*isDisabled*/ ctx[7]);
+			toggle_class(label, "goa-checkbox--error", /*isError*/ ctx[6]);
 		},
 		m(target, anchor) {
 			insert(target, label, anchor);
@@ -2197,27 +2194,27 @@ function create_fragment$l(ctx) {
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*id*/ 1) {
-				attr(input, "id", /*id*/ ctx[0]);
+			if (dirty & /*id*/ 256) {
+				attr(input, "id", /*id*/ ctx[8]);
 			}
 
-			if (dirty & /*testid*/ 16) {
-				attr(input, "data-testid", /*testid*/ ctx[4]);
+			if (dirty & /*testid*/ 8) {
+				attr(input, "data-testid", /*testid*/ ctx[3]);
 			}
 
-			if (dirty & /*name*/ 2) {
-				attr(input, "name", /*name*/ ctx[1]);
+			if (dirty & /*name*/ 1) {
+				attr(input, "name", /*name*/ ctx[0]);
 			}
 
-			if (dirty & /*isChecked*/ 32) {
-				input.checked = /*isChecked*/ ctx[5];
+			if (dirty & /*isChecked*/ 16) {
+				input.checked = /*isChecked*/ ctx[4];
 			}
 
-			if (dirty & /*isDisabled*/ 256) {
-				input.disabled = /*isDisabled*/ ctx[8];
+			if (dirty & /*isDisabled*/ 128) {
+				input.disabled = /*isDisabled*/ ctx[7];
 			}
 
-			if (dirty & /*value*/ 8 && input_value_value !== (input_value_value = `${/*value*/ ctx[3]}`)) {
+			if (dirty & /*value*/ 4 && input_value_value !== (input_value_value = `${/*value*/ ctx[2]}`)) {
 				input.value = input_value_value;
 			}
 
@@ -2231,22 +2228,22 @@ function create_fragment$l(ctx) {
 				}
 			}
 
-			if (dirty & /*isChecked*/ 32) {
-				toggle_class(div0, "goa-checkbox--selected", /*isChecked*/ ctx[5]);
+			if (dirty & /*isChecked*/ 16) {
+				toggle_class(div0, "goa-checkbox--selected", /*isChecked*/ ctx[4]);
 			}
 
-			if (dirty & /*text*/ 4) set_data(t2, /*text*/ ctx[2]);
+			if (dirty & /*text*/ 2) set_data(t2, /*text*/ ctx[1]);
 
-			if (dirty & /*id*/ 1) {
-				attr(label, "for", /*id*/ ctx[0]);
+			if (dirty & /*id*/ 256) {
+				attr(label, "for", /*id*/ ctx[8]);
 			}
 
-			if (dirty & /*isDisabled*/ 256) {
-				toggle_class(label, "goa-checkbox--disabled", /*isDisabled*/ ctx[8]);
+			if (dirty & /*isDisabled*/ 128) {
+				toggle_class(label, "goa-checkbox--disabled", /*isDisabled*/ ctx[7]);
 			}
 
-			if (dirty & /*isError*/ 128) {
-				toggle_class(label, "goa-checkbox--error", /*isError*/ ctx[7]);
+			if (dirty & /*isError*/ 64) {
+				toggle_class(label, "goa-checkbox--error", /*isError*/ ctx[6]);
 			}
 		},
 		i: noop,
@@ -2265,12 +2262,12 @@ function create_fragment$l(ctx) {
 }
 
 function instance$k($$self, $$props, $$invalidate) {
+	let id;
 	let isDisabled;
 	let isError;
 	let isChecked;
 	let isIndeterminate;
 	let { name } = $$props;
-	let { id = "" } = $$props;
 	let { text = "" } = $$props;
 	let { value = "" } = $$props;
 	let { checked } = $$props;
@@ -2297,38 +2294,36 @@ function instance$k($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$set = $$props => {
-		if ('name' in $$props) $$invalidate(1, name = $$props.name);
-		if ('id' in $$props) $$invalidate(0, id = $$props.id);
-		if ('text' in $$props) $$invalidate(2, text = $$props.text);
-		if ('value' in $$props) $$invalidate(3, value = $$props.value);
+		if ('name' in $$props) $$invalidate(0, name = $$props.name);
+		if ('text' in $$props) $$invalidate(1, text = $$props.text);
+		if ('value' in $$props) $$invalidate(2, value = $$props.value);
 		if ('checked' in $$props) $$invalidate(10, checked = $$props.checked);
 		if ('disabled' in $$props) $$invalidate(11, disabled = $$props.disabled);
 		if ('error' in $$props) $$invalidate(12, error = $$props.error);
-		if ('testid' in $$props) $$invalidate(4, testid = $$props.testid);
+		if ('testid' in $$props) $$invalidate(3, testid = $$props.testid);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*id, name*/ 3) {
-			$$invalidate(0, id = id ? id : `id-${name}`);
+		if ($$self.$$.dirty & /*name*/ 1) {
+			$$invalidate(8, id = `id-${name}`);
 		}
 
 		if ($$self.$$.dirty & /*disabled*/ 2048) {
-			$$invalidate(8, isDisabled = toBoolean(disabled));
+			$$invalidate(7, isDisabled = toBoolean(disabled));
 		}
 
 		if ($$self.$$.dirty & /*error*/ 4096) {
-			$$invalidate(7, isError = toBoolean(error));
+			$$invalidate(6, isError = toBoolean(error));
 		}
 
 		if ($$self.$$.dirty & /*checked*/ 1024) {
-			$$invalidate(5, isChecked = toBoolean(checked));
+			$$invalidate(4, isChecked = toBoolean(checked));
 		}
 	};
 
-	$$invalidate(6, isIndeterminate = false); // Desighn review. To be built with TreeView Later
+	$$invalidate(5, isIndeterminate = false); // Desighn review. To be built with TreeView Later
 
 	return [
-		id,
 		name,
 		text,
 		value,
@@ -2337,6 +2332,7 @@ function instance$k($$self, $$props, $$invalidate) {
 		isIndeterminate,
 		isError,
 		isDisabled,
+		id,
 		onChange,
 		checked,
 		disabled,
@@ -2360,14 +2356,13 @@ class Checkbox extends SvelteElement {
 			create_fragment$l,
 			safe_not_equal,
 			{
-				name: 1,
-				id: 0,
-				text: 2,
-				value: 3,
+				name: 0,
+				text: 1,
+				value: 2,
 				checked: 10,
 				disabled: 11,
 				error: 12,
-				testid: 4
+				testid: 3
 			},
 			null
 		);
@@ -2385,11 +2380,11 @@ class Checkbox extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["name", "id", "text", "value", "checked", "disabled", "error", "testid"];
+		return ["name", "text", "value", "checked", "disabled", "error", "testid"];
 	}
 
 	get name() {
-		return this.$$.ctx[1];
+		return this.$$.ctx[0];
 	}
 
 	set name(name) {
@@ -2397,17 +2392,8 @@ class Checkbox extends SvelteElement {
 		flush();
 	}
 
-	get id() {
-		return this.$$.ctx[0];
-	}
-
-	set id(id) {
-		this.$$set({ id });
-		flush();
-	}
-
 	get text() {
-		return this.$$.ctx[2];
+		return this.$$.ctx[1];
 	}
 
 	set text(text) {
@@ -2416,7 +2402,7 @@ class Checkbox extends SvelteElement {
 	}
 
 	get value() {
-		return this.$$.ctx[3];
+		return this.$$.ctx[2];
 	}
 
 	set value(value) {
@@ -2452,7 +2438,7 @@ class Checkbox extends SvelteElement {
 	}
 
 	get testid() {
-		return this.$$.ctx[4];
+		return this.$$.ctx[3];
 	}
 
 	set testid(testid) {
@@ -2641,7 +2627,7 @@ const messageChannel$1 = writable({});
 
 /* libs/web-components/src/components/dropdown/Dropdown.svelte generated by Svelte v3.44.3 */
 
-function create_if_block_3$3(ctx) {
+function create_if_block_3$4(ctx) {
 	let div;
 	let div_data_testid_value;
 	let mounted;
@@ -2839,7 +2825,7 @@ function create_fragment$j(ctx) {
 	let t0;
 	let div0;
 	let t1;
-	let if_block0 = /*isMenuVisible*/ ctx[5] && create_if_block_3$3(ctx);
+	let if_block0 = /*isMenuVisible*/ ctx[5] && create_if_block_3$4(ctx);
 	let if_block1 = (!/*isMenuVisible*/ ctx[5] || !/*isAutoComplete*/ ctx[9]) && create_if_block_2$5(ctx);
 	let if_block2 = /*isMenuVisible*/ ctx[5] && create_if_block$a(ctx);
 
@@ -2870,7 +2856,7 @@ function create_fragment$j(ctx) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_3$3(ctx);
+					if_block0 = create_if_block_3$4(ctx);
 					if_block0.c();
 					if_block0.m(div1, t0);
 				}
@@ -3694,7 +3680,7 @@ function create_if_block_2$4(ctx) {
 	let label_1;
 	let t0;
 	let t1;
-	let if_block = /*isOptional*/ ctx[4] && create_if_block_3$2();
+	let if_block = /*isOptional*/ ctx[4] && create_if_block_3$3();
 
 	return {
 		c() {
@@ -3715,7 +3701,7 @@ function create_if_block_2$4(ctx) {
 
 			if (/*isOptional*/ ctx[4]) {
 				if (if_block) ; else {
-					if_block = create_if_block_3$2();
+					if_block = create_if_block_3$3();
 					if_block.c();
 					if_block.m(label_1, null);
 				}
@@ -3736,7 +3722,7 @@ function create_if_block_2$4(ctx) {
 }
 
 // (18:6) {#if isOptional}
-function create_if_block_3$2(ctx) {
+function create_if_block_3$3(ctx) {
 	let em;
 
 	return {
@@ -5272,11 +5258,11 @@ function create_if_block$6(ctx) {
 	let current;
 	let mounted;
 	let dispose;
-	let if_block0 = /*title*/ ctx[0] && create_if_block_3$1(ctx);
-	let if_block1 = /*isClosable*/ ctx[5] && create_if_block_2$2();
+	let if_block0 = /*title*/ ctx[0] && create_if_block_3$2(ctx);
+	let if_block1 = /*isClosable*/ ctx[4] && create_if_block_2$2(ctx);
 
 	function select_block_type(ctx, dirty) {
-		if (/*isScrollable*/ ctx[4]) return create_if_block_1$4;
+		if (/*isScrollable*/ ctx[5]) return create_if_block_1$4;
 		return create_else_block$2;
 	}
 
@@ -5300,10 +5286,14 @@ function create_if_block$6(ctx) {
 			t4 = space();
 			div2 = element("div");
 			div2.innerHTML = `<slot name="actions"></slot>`;
+			attr(div0, "data-testid", "modal-overlay");
 			attr(div0, "class", "modal-overlay");
+			attr(div1, "data-testid", "modal-content");
 			attr(div1, "class", "modal-content");
+			attr(div2, "data-testid", "modal-actions");
 			attr(div2, "class", "modal-actions");
 			attr(div3, "class", "modal-pane");
+			attr(div4, "data-testid", "modal");
 			attr(div4, "class", "modal");
 			attr(div4, "style", div4_style_value = "--scroll-offset: " + /*scrollOffset*/ ctx[3] + "px; " + (/*width*/ ctx[1] && `--width: ${/*width*/ ctx[1]};`) + ";");
 		},
@@ -5326,7 +5316,7 @@ function create_if_block$6(ctx) {
 
 			if (!mounted) {
 				dispose = [
-					listen(div0, "click", close),
+					listen(div0, "click", /*close*/ ctx[6]),
 					action_destroyer(noscroll_action = noScroll.call(null, div4, { enable: /*isOpen*/ ctx[2] }))
 				];
 
@@ -5338,7 +5328,7 @@ function create_if_block$6(ctx) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_3$1(ctx);
+					if_block0 = create_if_block_3$2(ctx);
 					if_block0.c();
 					if_block0.m(div3, t1);
 				}
@@ -5347,11 +5337,11 @@ function create_if_block$6(ctx) {
 				if_block0 = null;
 			}
 
-			if (/*isClosable*/ ctx[5]) {
+			if (/*isClosable*/ ctx[4]) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block_2$2();
+					if_block1 = create_if_block_2$2(ctx);
 					if_block1.c();
 					if_block1.m(div3, t2);
 				}
@@ -5413,8 +5403,8 @@ function create_if_block$6(ctx) {
 	};
 }
 
-// (45:6) {#if title}
-function create_if_block_3$1(ctx) {
+// (49:6) {#if title}
+function create_if_block_3$2(ctx) {
 	let div;
 	let t;
 
@@ -5422,6 +5412,7 @@ function create_if_block_3$1(ctx) {
 		c() {
 			div = element("div");
 			t = text(/*title*/ ctx[0]);
+			attr(div, "data-testid", "modal-title");
 			attr(div, "class", "modal-title");
 		},
 		m(target, anchor) {
@@ -5437,7 +5428,7 @@ function create_if_block_3$1(ctx) {
 	};
 }
 
-// (48:6) {#if isClosable}
+// (52:6) {#if isClosable}
 function create_if_block_2$2(ctx) {
 	let div;
 	let goa_icon_button;
@@ -5448,6 +5439,7 @@ function create_if_block_2$2(ctx) {
 		c() {
 			div = element("div");
 			goa_icon_button = element("goa-icon-button");
+			set_custom_element_data(goa_icon_button, "testid", "modal-close-button");
 			set_custom_element_data(goa_icon_button, "type", "close");
 			attr(div, "class", "modal-close");
 		},
@@ -5456,7 +5448,7 @@ function create_if_block_2$2(ctx) {
 			append(div, goa_icon_button);
 
 			if (!mounted) {
-				dispose = listen(goa_icon_button, "click", close);
+				dispose = listen(goa_icon_button, "click", /*close*/ ctx[6]);
 				mounted = true;
 			}
 		},
@@ -5469,7 +5461,7 @@ function create_if_block_2$2(ctx) {
 	};
 }
 
-// (58:8) {:else}
+// (62:8) {:else}
 function create_else_block$2(ctx) {
 	let div;
 
@@ -5488,7 +5480,7 @@ function create_else_block$2(ctx) {
 	};
 }
 
-// (54:8) {#if isScrollable}
+// (58:8) {#if isScrollable}
 function create_if_block_1$4(ctx) {
 	let goa_scrollable;
 
@@ -5565,11 +5557,6 @@ function create_fragment$b(ctx) {
 	};
 }
 
-function close(e) {
-	e.target.dispatchEvent(new CustomEvent("_close", { composed: true }));
-	e.stopPropagation();
-}
-
 function instance$a($$self, $$props, $$invalidate) {
 	let isClosable;
 	let isScrollable;
@@ -5581,24 +5568,33 @@ function instance$a($$self, $$props, $$invalidate) {
 	let { width } = $$props;
 	let scrollOffset = 0;
 
+	function close(e) {
+		if (!isClosable) {
+			return;
+		}
+
+		e.target.dispatchEvent(new CustomEvent("_close", { composed: true }));
+		e.stopPropagation();
+	}
+
 	$$self.$$set = $$props => {
 		if ('title' in $$props) $$invalidate(0, title = $$props.title);
-		if ('closable' in $$props) $$invalidate(6, closable = $$props.closable);
-		if ('scrollable' in $$props) $$invalidate(7, scrollable = $$props.scrollable);
-		if ('open' in $$props) $$invalidate(8, open = $$props.open);
+		if ('closable' in $$props) $$invalidate(7, closable = $$props.closable);
+		if ('scrollable' in $$props) $$invalidate(8, scrollable = $$props.scrollable);
+		if ('open' in $$props) $$invalidate(9, open = $$props.open);
 		if ('width' in $$props) $$invalidate(1, width = $$props.width);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*closable*/ 64) {
-			$$invalidate(5, isClosable = toBoolean(closable));
+		if ($$self.$$.dirty & /*closable*/ 128) {
+			$$invalidate(4, isClosable = toBoolean(closable));
 		}
 
-		if ($$self.$$.dirty & /*scrollable*/ 128) {
-			$$invalidate(4, isScrollable = toBoolean(scrollable));
+		if ($$self.$$.dirty & /*scrollable*/ 256) {
+			$$invalidate(5, isScrollable = toBoolean(scrollable));
 		}
 
-		if ($$self.$$.dirty & /*open*/ 256) {
+		if ($$self.$$.dirty & /*open*/ 512) {
 			$$invalidate(2, isOpen = toBoolean(open));
 		}
 
@@ -5616,8 +5612,9 @@ function instance$a($$self, $$props, $$invalidate) {
 		width,
 		isOpen,
 		scrollOffset,
-		isScrollable,
 		isClosable,
+		isScrollable,
+		close,
 		closable,
 		scrollable,
 		open
@@ -5641,9 +5638,9 @@ class Modal extends SvelteElement {
 			safe_not_equal,
 			{
 				title: 0,
-				closable: 6,
-				scrollable: 7,
-				open: 8,
+				closable: 7,
+				scrollable: 8,
+				open: 9,
 				width: 1
 			},
 			null
@@ -5675,7 +5672,7 @@ class Modal extends SvelteElement {
 	}
 
 	get closable() {
-		return this.$$.ctx[6];
+		return this.$$.ctx[7];
 	}
 
 	set closable(closable) {
@@ -5684,7 +5681,7 @@ class Modal extends SvelteElement {
 	}
 
 	get scrollable() {
-		return this.$$.ctx[7];
+		return this.$$.ctx[8];
 	}
 
 	set scrollable(scrollable) {
@@ -5693,7 +5690,7 @@ class Modal extends SvelteElement {
 	}
 
 	get open() {
-		return this.$$.ctx[8];
+		return this.$$.ctx[9];
 	}
 
 	set open(open) {
@@ -6060,7 +6057,7 @@ function create_else_block$1(ctx) {
 	let goa_spinner;
 	let goa_spinner_progress_value;
 	let t;
-	let if_block = /*message*/ ctx[1] && create_if_block_3(ctx);
+	let if_block = /*message*/ ctx[1] && create_if_block_3$1(ctx);
 
 	return {
 		c() {
@@ -6092,7 +6089,7 @@ function create_else_block$1(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block_3(ctx);
+					if_block = create_if_block_3$1(ctx);
 					if_block.c();
 					if_block.m(div, null);
 				}
@@ -6201,7 +6198,7 @@ function create_if_block_1$3(ctx) {
 }
 
 // (30:6) {#if message}
-function create_if_block_3(ctx) {
+function create_if_block_3$1(ctx) {
 	let div;
 	let t;
 
@@ -6460,23 +6457,28 @@ function create_fragment$7(ctx) {
 			slot = element("slot");
 			this.c = noop;
 			attr(div0, "class", div0_class_value = `goa-radio-group--${/*orientation*/ ctx[0]}`);
+			attr(div0, "data-testid", /*testid*/ ctx[1]);
 		},
 		m(target, anchor) {
 			insert(target, div1, anchor);
 			append(div1, div0);
 			append(div0, slot);
-			/*div0_binding*/ ctx[8](div0);
+			/*div0_binding*/ ctx[9](div0);
 		},
 		p(ctx, [dirty]) {
 			if (dirty & /*orientation*/ 1 && div0_class_value !== (div0_class_value = `goa-radio-group--${/*orientation*/ ctx[0]}`)) {
 				attr(div0, "class", div0_class_value);
 			}
+
+			if (dirty & /*testid*/ 2) {
+				attr(div0, "data-testid", /*testid*/ ctx[1]);
+			}
 		},
 		i: noop,
 		o: noop,
 		d(detaching) {
 			if (detaching) detach(div1);
-			/*div0_binding*/ ctx[8](null);
+			/*div0_binding*/ ctx[9](null);
 		}
 	};
 }
@@ -6488,6 +6490,7 @@ function instance$7($$self, $$props, $$invalidate) {
 	let { orientation = 'vertical' } = $$props;
 	let { disabled } = $$props;
 	let { error } = $$props;
+	let { testid } = $$props;
 
 	// private
 	let isError;
@@ -6513,7 +6516,7 @@ function instance$7($$self, $$props, $$invalidate) {
 			const payload = state[name].payload;
 
 			if (payload.value !== value) {
-				$$invalidate(2, value = payload.value);
+				$$invalidate(3, value = payload.value);
 
 				el.dispatchEvent(new CustomEvent('_change',
 				{
@@ -6529,26 +6532,27 @@ function instance$7($$self, $$props, $$invalidate) {
 	function div0_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			el = $$value;
-			$$invalidate(1, el);
+			$$invalidate(2, el);
 		});
 	}
 
 	$$self.$$set = $$props => {
-		if ('name' in $$props) $$invalidate(3, name = $$props.name);
-		if ('value' in $$props) $$invalidate(2, value = $$props.value);
+		if ('name' in $$props) $$invalidate(4, name = $$props.name);
+		if ('value' in $$props) $$invalidate(3, value = $$props.value);
 		if ('orientation' in $$props) $$invalidate(0, orientation = $$props.orientation);
-		if ('disabled' in $$props) $$invalidate(4, disabled = $$props.disabled);
-		if ('error' in $$props) $$invalidate(5, error = $$props.error);
+		if ('disabled' in $$props) $$invalidate(5, disabled = $$props.disabled);
+		if ('error' in $$props) $$invalidate(6, error = $$props.error);
+		if ('testid' in $$props) $$invalidate(1, testid = $$props.testid);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*disabled*/ 16) {
-			$$invalidate(7, isDisabled = toBoolean(disabled));
+		if ($$self.$$.dirty & /*disabled*/ 32) {
+			$$invalidate(8, isDisabled = toBoolean(disabled));
 		}
 
-		if ($$self.$$.dirty & /*error, name, value, isDisabled, isError*/ 236) {
+		if ($$self.$$.dirty & /*error, name, value, isDisabled, isError*/ 472) {
 			{
-				$$invalidate(6, isError = toBoolean(error));
+				$$invalidate(7, isError = toBoolean(error));
 
 				messageChannel.update(prev => {
 					return Object.assign(Object.assign({}, prev), {
@@ -6568,6 +6572,7 @@ function instance$7($$self, $$props, $$invalidate) {
 
 	return [
 		orientation,
+		testid,
 		el,
 		value,
 		name,
@@ -6595,11 +6600,12 @@ class RadioGroup extends SvelteElement {
 			create_fragment$7,
 			safe_not_equal,
 			{
-				name: 3,
-				value: 2,
+				name: 4,
+				value: 3,
 				orientation: 0,
-				disabled: 4,
-				error: 5
+				disabled: 5,
+				error: 6,
+				testid: 1
 			},
 			null
 		);
@@ -6617,11 +6623,11 @@ class RadioGroup extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["name", "value", "orientation", "disabled", "error"];
+		return ["name", "value", "orientation", "disabled", "error", "testid"];
 	}
 
 	get name() {
-		return this.$$.ctx[3];
+		return this.$$.ctx[4];
 	}
 
 	set name(name) {
@@ -6630,7 +6636,7 @@ class RadioGroup extends SvelteElement {
 	}
 
 	get value() {
-		return this.$$.ctx[2];
+		return this.$$.ctx[3];
 	}
 
 	set value(value) {
@@ -6648,7 +6654,7 @@ class RadioGroup extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[4];
+		return this.$$.ctx[5];
 	}
 
 	set disabled(disabled) {
@@ -6657,13 +6663,22 @@ class RadioGroup extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[5];
+		return this.$$.ctx[6];
 	}
 
 	set error(error) {
 		this.$$set({ error });
 		flush();
 	}
+
+	get testid() {
+		return this.$$.ctx[1];
+	}
+
+	set testid(testid) {
+		this.$$set({ testid });
+		flush();
+	}
 }
 
 customElements.define("goa-radio-group", RadioGroup);
@@ -6694,6 +6709,7 @@ function create_fragment$6(ctx) {
 			t2 = text(/*label*/ ctx[1]);
 			this.c = noop;
 			attr(input, "type", "radio");
+			attr(input, "data-testid", "radio-input");
 			attr(input, "name", /*name*/ ctx[2]);
 			input.value = /*value*/ ctx[0];
 			input.checked = /*checked*/ ctx[4];
@@ -7018,7 +7034,7 @@ customElements.define("goa-scrollable", Scrollable);
 
 /* libs/web-components/src/components/service-level-header/ServiceLevelHeader.svelte generated by Svelte v3.44.3 */
 
-function create_if_block_2(ctx) {
+function create_if_block_3(ctx) {
 	let div0;
 	let t0;
 	let div1;
@@ -7047,7 +7063,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (27:2) {#if level !== "live"}
+// (28:2) {#if level !== "live"}
 function create_if_block_1$2(ctx) {
 	let div0;
 	let t0_value = capitalize(/*level*/ ctx[0]) + "";
@@ -7055,6 +7071,10 @@ function create_if_block_1$2(ctx) {
 	let div0_class_value;
 	let t1;
 	let div1;
+	let t2;
+	let a;
+	let t4;
+	let if_block = /*feedbackurl*/ ctx[2] && create_if_block_2(ctx);
 
 	return {
 		c() {
@@ -7062,9 +7082,16 @@ function create_if_block_1$2(ctx) {
 			t0 = text(t0_value);
 			t1 = space();
 			div1 = element("div");
-			div1.innerHTML = `This is a new <a href="https://www.alberta.ca/index.aspx" class="web-link">Alberta Government</a> service`;
+			t2 = text("This is a new ");
+			a = element("a");
+			a.textContent = "Alberta Government";
+			t4 = text(" service\n      ");
+			if (if_block) if_block.c();
 			attr(div0, "data-testid", "level");
 			attr(div0, "class", div0_class_value = "service-level service-level--" + /*level*/ ctx[0]?.toLowerCase());
+			attr(a, "href", "https://www.alberta.ca/index.aspx");
+			attr(a, "class", "web-link");
+			attr(div1, "data-testid", "site-text");
 			attr(div1, "class", "site-text");
 		},
 		m(target, anchor) {
@@ -7072,6 +7099,10 @@ function create_if_block_1$2(ctx) {
 			append(div0, t0);
 			insert(target, t1, anchor);
 			insert(target, div1, anchor);
+			append(div1, t2);
+			append(div1, a);
+			append(div1, t4);
+			if (if_block) if_block.m(div1, null);
 		},
 		p(ctx, dirty) {
 			if (dirty & /*level*/ 1 && t0_value !== (t0_value = capitalize(/*level*/ ctx[0]) + "")) set_data(t0, t0_value);
@@ -7079,16 +7110,64 @@ function create_if_block_1$2(ctx) {
 			if (dirty & /*level*/ 1 && div0_class_value !== (div0_class_value = "service-level service-level--" + /*level*/ ctx[0]?.toLowerCase())) {
 				attr(div0, "class", div0_class_value);
 			}
+
+			if (/*feedbackurl*/ ctx[2]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+				} else {
+					if_block = create_if_block_2(ctx);
+					if_block.c();
+					if_block.m(div1, null);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
 		},
 		d(detaching) {
 			if (detaching) detach(div0);
 			if (detaching) detach(t1);
 			if (detaching) detach(div1);
+			if (if_block) if_block.d();
+		}
+	};
+}
+
+// (34:6) {#if feedbackurl}
+function create_if_block_2(ctx) {
+	let span;
+	let t0;
+	let a;
+	let t1;
+
+	return {
+		c() {
+			span = element("span");
+			t0 = text("— help us improve it by giving ");
+			a = element("a");
+			t1 = text("feedback");
+			attr(a, "href", /*feedbackurl*/ ctx[2]);
+			attr(a, "class", "web-link");
+			attr(span, "data-testid", "feedback");
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			append(span, t0);
+			append(span, a);
+			append(a, t1);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*feedbackurl*/ 4) {
+				attr(a, "href", /*feedbackurl*/ ctx[2]);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(span);
 		}
 	};
 }
 
-// (36:2) {#if version}
+// (40:2) {#if version}
 function create_if_block$3(ctx) {
 	let div;
 	let t;
@@ -7119,7 +7198,7 @@ function create_fragment$4(ctx) {
 	let t1;
 	let div;
 	let t2;
-	let if_block0 = /*level*/ ctx[0] === "live" && create_if_block_2();
+	let if_block0 = /*level*/ ctx[0] === "live" && create_if_block_3();
 	let if_block1 = /*level*/ ctx[0] !== "live" && create_if_block_1$2(ctx);
 	let if_block2 = /*version*/ ctx[1] && create_if_block$3(ctx);
 
@@ -7150,7 +7229,7 @@ function create_fragment$4(ctx) {
 		p(ctx, [dirty]) {
 			if (/*level*/ ctx[0] === "live") {
 				if (if_block0) ; else {
-					if_block0 = create_if_block_2();
+					if_block0 = create_if_block_3();
 					if_block0.c();
 					if_block0.m(header, t0);
 				}
@@ -7204,13 +7283,15 @@ function capitalize(val) {
 function instance$4($$self, $$props, $$invalidate) {
 	let { level } = $$props;
 	let { version } = $$props;
+	let { feedbackurl } = $$props;
 
 	$$self.$$set = $$props => {
 		if ('level' in $$props) $$invalidate(0, level = $$props.level);
 		if ('version' in $$props) $$invalidate(1, version = $$props.version);
+		if ('feedbackurl' in $$props) $$invalidate(2, feedbackurl = $$props.feedbackurl);
 	};
 
-	return [level, version];
+	return [level, version, feedbackurl];
 }
 
 class ServiceLevelHeader extends SvelteElement {
@@ -7228,7 +7309,7 @@ class ServiceLevelHeader extends SvelteElement {
 			instance$4,
 			create_fragment$4,
 			safe_not_equal,
-			{ level: 0, version: 1 },
+			{ level: 0, version: 1, feedbackurl: 2 },
 			null
 		);
 
@@ -7245,7 +7326,7 @@ class ServiceLevelHeader extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["level", "version"];
+		return ["level", "version", "feedbackurl"];
 	}
 
 	get level() {
@@ -7265,6 +7346,15 @@ class ServiceLevelHeader extends SvelteElement {
 		this.$$set({ version });
 		flush();
 	}
+
+	get feedbackurl() {
+		return this.$$.ctx[2];
+	}
+
+	set feedbackurl(feedbackurl) {
+		this.$$set({ feedbackurl });
+		flush();
+	}
 }
 
 customElements.define("goa-service-level-header", ServiceLevelHeader);