@abgov/web-components 1.0.0-alpha.11 → 1.0.0-alpha.15

package/web-components.es.js

@@ -755,7 +755,7 @@ if (typeof HTMLElement === 'function') {
 
 /* libs/web-components/src/components/page-block/PageBlock.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$v(ctx) {
+function create_fragment$w(ctx) {
 	let div;
 
 	return {
@@ -790,7 +790,7 @@ class PageBlock extends SvelteElement {
 				customElement: true
 			},
 			null,
-			create_fragment$v,
+			create_fragment$w,
 			safe_not_equal,
 			{},
 			null
@@ -808,7 +808,7 @@ customElements.define("goa-page-block", PageBlock);
 
 /* libs/web-components/src/components/app-header/AppHeader.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$u(ctx) {
+function create_fragment$v(ctx) {
 	let goa_page_block;
 	let div1;
 	let a;
@@ -882,7 +882,7 @@ function create_fragment$u(ctx) {
 	};
 }
 
-function instance$q($$self, $$props, $$invalidate) {
+function instance$r($$self, $$props, $$invalidate) {
 	let { url } = $$props;
 	let { title } = $$props;
 	let { testid = "" } = $$props;
@@ -908,8 +908,8 @@ class AppHeader extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$q,
-			create_fragment$u,
+			instance$r,
+			create_fragment$v,
 			safe_not_equal,
 			{ url: 0, title: 1, testid: 2 },
 			null
@@ -996,7 +996,7 @@ function create_else_block$4(ctx) {
 }
 
 // (35:2) {#if showIcon}
-function create_if_block_1$8(ctx) {
+function create_if_block_1$9(ctx) {
 	let goa_icon;
 
 	return {
@@ -1020,7 +1020,7 @@ function create_if_block_1$8(ctx) {
 }
 
 // (40:2) {#if content}
-function create_if_block$b(ctx) {
+function create_if_block$c(ctx) {
 	let div;
 	let t;
 
@@ -1043,19 +1043,19 @@ function create_if_block$b(ctx) {
 	};
 }
 
-function create_fragment$t(ctx) {
+function create_fragment$u(ctx) {
 	let div;
 	let t;
 	let div_class_value;
 
 	function select_block_type(ctx, dirty) {
-		if (/*showIcon*/ ctx[4]) return create_if_block_1$8;
+		if (/*showIcon*/ ctx[4]) return create_if_block_1$9;
 		return create_else_block$4;
 	}
 
 	let current_block_type = select_block_type(ctx);
 	let if_block0 = current_block_type(ctx);
-	let if_block1 = /*content*/ ctx[2] && create_if_block$b(ctx);
+	let if_block1 = /*content*/ ctx[2] && create_if_block$c(ctx);
 
 	return {
 		c() {
@@ -1092,7 +1092,7 @@ function create_fragment$t(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block$b(ctx);
+					if_block1 = create_if_block$c(ctx);
 					if_block1.c();
 					if_block1.m(div, null);
 				}
@@ -1123,7 +1123,7 @@ function create_fragment$t(ctx) {
 	};
 }
 
-function instance$p($$self, $$props, $$invalidate) {
+function instance$q($$self, $$props, $$invalidate) {
 	let showIcon;
 	let iconType;
 	let { type } = $$props;
@@ -1173,8 +1173,8 @@ class Badge extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$p,
-			create_fragment$t,
+			instance$q,
+			create_fragment$u,
 			safe_not_equal,
 			{ type: 0, testid: 1, icon: 5, content: 2 },
 			null
@@ -1237,7 +1237,7 @@ customElements.define("goa-badge", Badge);
 
 /* libs/web-components/src/components/button/Button.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$s(ctx) {
+function create_fragment$t(ctx) {
 	let button;
 	let slot;
 	let button_class_value;
@@ -1295,7 +1295,7 @@ function clickHandler(e) {
 	e.stopPropagation();
 }
 
-function instance$o($$self, $$props, $$invalidate) {
+function instance$p($$self, $$props, $$invalidate) {
 	let isDisabled;
 	let { type = "primary" } = $$props;
 	let { size = "medium" } = $$props;
@@ -1339,8 +1339,8 @@ class Button extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$o,
-			create_fragment$s,
+			instance$p,
+			create_fragment$t,
 			safe_not_equal,
 			{
 				type: 0,
@@ -1428,7 +1428,7 @@ customElements.define("goa-button", Button);
 
 /* libs/web-components/src/components/button-group/ButtonGroup.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$r(ctx) {
+function create_fragment$s(ctx) {
 	let div;
 	let slot;
 
@@ -1461,7 +1461,7 @@ function create_fragment$r(ctx) {
 	};
 }
 
-function instance$n($$self, $$props, $$invalidate) {
+function instance$o($$self, $$props, $$invalidate) {
 	let { gap = "medium" } = $$props;
 	let { alignment } = $$props;
 
@@ -1485,8 +1485,8 @@ class ButtonGroup extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$n,
-			create_fragment$r,
+			instance$o,
+			create_fragment$s,
 			safe_not_equal,
 			{ gap: 0, alignment: 1 },
 			null
@@ -1531,7 +1531,7 @@ customElements.define("goa-button-group", ButtonGroup);
 
 /* libs/web-components/src/components/callout/Callout.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$q(ctx) {
+function create_fragment$r(ctx) {
 	let div;
 	let span0;
 	let goa_icon;
@@ -1596,7 +1596,7 @@ function create_fragment$q(ctx) {
 	};
 }
 
-function instance$m($$self, $$props, $$invalidate) {
+function instance$n($$self, $$props, $$invalidate) {
 	let iconType;
 	let { type } = $$props;
 	let { title } = $$props;
@@ -1637,8 +1637,8 @@ class Callout extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$m,
-			create_fragment$q,
+			instance$n,
+			create_fragment$r,
 			safe_not_equal,
 			{ type: 0, title: 1, testId: 2 },
 			null
@@ -1692,7 +1692,7 @@ customElements.define("goa-callout", Callout);
 
 /* libs/web-components/src/components/card/Card.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$p(ctx) {
+function create_fragment$q(ctx) {
 	let div;
 	let slot;
 	let div_style_value;
@@ -1732,7 +1732,7 @@ function create_fragment$p(ctx) {
 	};
 }
 
-function instance$l($$self, $$props, $$invalidate) {
+function instance$m($$self, $$props, $$invalidate) {
 	let { elevation = 0 } = $$props;
 	let { width = 320 } = $$props;
 	let { testId = "" } = $$props;
@@ -1760,8 +1760,8 @@ class Card extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$l,
-			create_fragment$p,
+			instance$m,
+			create_fragment$q,
 			safe_not_equal,
 			{ elevation: 0, width: 1, testId: 2 },
 			null
@@ -1815,7 +1815,7 @@ customElements.define("goa-card", Card);
 
 /* libs/web-components/src/components/card-actions/CardActions.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$o(ctx) {
+function create_fragment$p(ctx) {
 	let goa_card_content;
 
 	return {
@@ -1848,7 +1848,7 @@ class CardActions extends SvelteElement {
 				customElement: true
 			},
 			null,
-			create_fragment$o,
+			create_fragment$p,
 			safe_not_equal,
 			{},
 			null
@@ -1866,7 +1866,7 @@ customElements.define("goa-card-actions", CardActions);
 
 /* libs/web-components/src/components/card-content/CardContent.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$n(ctx) {
+function create_fragment$o(ctx) {
 	let div;
 
 	return {
@@ -1901,7 +1901,7 @@ class CardContent extends SvelteElement {
 				customElement: true
 			},
 			null,
-			create_fragment$n,
+			create_fragment$o,
 			safe_not_equal,
 			{},
 			null
@@ -1919,7 +1919,7 @@ customElements.define("goa-card-content", CardContent);
 
 /* libs/web-components/src/components/card-group/CardGroup.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$m(ctx) {
+function create_fragment$n(ctx) {
 	let div;
 
 	return {
@@ -1954,7 +1954,7 @@ class CardGroup extends SvelteElement {
 				customElement: true
 			},
 			null,
-			create_fragment$m,
+			create_fragment$n,
 			safe_not_equal,
 			{},
 			null
@@ -1972,7 +1972,7 @@ customElements.define("goa-card-group", CardGroup);
 
 /* libs/web-components/src/components/card-image/CardImage.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$l(ctx) {
+function create_fragment$m(ctx) {
 	let div;
 
 	return {
@@ -2005,7 +2005,7 @@ function create_fragment$l(ctx) {
 	};
 }
 
-function instance$k($$self, $$props, $$invalidate) {
+function instance$l($$self, $$props, $$invalidate) {
 	let { src } = $$props;
 	let { height = "100%" } = $$props;
 
@@ -2029,8 +2029,8 @@ class CardImage extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$k,
-			create_fragment$l,
+			instance$l,
+			create_fragment$m,
 			safe_not_equal,
 			{ src: 0, height: 1 },
 			null
@@ -2075,11 +2075,11 @@ customElements.define("goa-card-image", CardImage);
 
 /* libs/web-components/src/components/checkbox/Checkbox.svelte generated by Svelte v3.44.3 */
 
-function create_if_block$a(ctx) {
+function create_if_block$b(ctx) {
 	let if_block_anchor;
 
 	function select_block_type(ctx, dirty) {
-		if (/*isIndeterminate*/ ctx[4]) return create_if_block_1$7;
+		if (/*isIndeterminate*/ ctx[4]) return create_if_block_1$8;
 		return create_else_block$3;
 	}
 
@@ -2138,7 +2138,7 @@ function create_else_block$3(ctx) {
 }
 
 // (50:6) {#if isIndeterminate}
-function create_if_block_1$7(ctx) {
+function create_if_block_1$8(ctx) {
 	let svg;
 	let rect;
 
@@ -2162,7 +2162,7 @@ function create_if_block_1$7(ctx) {
 	};
 }
 
-function create_fragment$k(ctx) {
+function create_fragment$l(ctx) {
 	let label;
 	let div0;
 	let input;
@@ -2174,7 +2174,7 @@ function create_fragment$k(ctx) {
 	let t2;
 	let mounted;
 	let dispose;
-	let if_block = /*isChecked*/ ctx[3] && create_if_block$a(ctx);
+	let if_block = /*isChecked*/ ctx[3] && create_if_block$b(ctx);
 
 	return {
 		c() {
@@ -2244,7 +2244,7 @@ function create_fragment$k(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$a(ctx);
+					if_block = create_if_block$b(ctx);
 					if_block.c();
 					if_block.m(div0, null);
 				}
@@ -2282,7 +2282,7 @@ function create_fragment$k(ctx) {
 	};
 }
 
-function instance$j($$self, $$props, $$invalidate) {
+function instance$k($$self, $$props, $$invalidate) {
 	let id;
 	let isDisabled;
 	let isError;
@@ -2375,8 +2375,8 @@ class Checkbox extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$j,
-			create_fragment$k,
+			instance$k,
+			create_fragment$l,
 			safe_not_equal,
 			{
 				name: 0,
@@ -2474,7 +2474,7 @@ customElements.define("goa-checkbox", Checkbox);
 
 /* libs/web-components/src/components/container/Container.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$j(ctx) {
+function create_fragment$k(ctx) {
 	let div3;
 	let header;
 	let div0;
@@ -2530,7 +2530,7 @@ function create_fragment$j(ctx) {
 	};
 }
 
-function instance$i($$self, $$props, $$invalidate) {
+function instance$j($$self, $$props, $$invalidate) {
 	let { variant = 'default' } = $$props;
 	let { headingsize = 'large' } = $$props;
 
@@ -2545,7 +2545,7 @@ function instance$i($$self, $$props, $$invalidate) {
 class Container extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);padding-left:1.5rem;padding-right:1.5rem}.content{padding:1.5rem;border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--default header{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-black)}.goa-container--primary header{background-color:var(--goa-color-brand);border-color:var(--goa-color-brand);color:var(--color-white)}.goa-container--info header{background-color:var(--goa-color-status-info);border-color:var(--goa-color-status-info);color:var(--color-white)}.goa-container--error header{background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);color:var(--color-white)}.goa-container--success header{background-color:var(--goa-color-status-success);border-color:var(--goa-color-status-success);color:var(--color-white)}.goa-container--warning header{background-color:var(--goa-color-status-warning);border-color:var(--goa-color-status-warning);color:var(--color-white)}.heading--large{padding:0.5rem 1.5rem;max-height:4rem}.heading--large .title{line-height:2rem}.heading--small{height:0.5rem}.heading--none{display:none}.heading--none~.content{border-top:1px solid var(--color-gray-200);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.heading--small .title,.heading--small .actions{display:none}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);padding-left:1.5rem;padding-right:1.5rem}.content{padding:1.5rem;border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--default header{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-black)}.goa-container--primary header{background-color:var(--goa-color-brand);border-color:var(--goa-color-brand);color:var(--color-white)}.goa-container--info header{background-color:var(--goa-color-status-info);border-color:var(--goa-color-status-info);color:var(--color-white)}.goa-container--error header{background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);color:var(--color-white)}.goa-container--success header{background-color:var(--goa-color-status-success);border-color:var(--goa-color-status-success);color:var(--color-white)}.goa-container--warning header{background-color:var(--goa-color-status-warning);border-color:var(--goa-color-status-warning);color:var(--color-white)}.heading--large{padding:0.5rem 1.5rem;max-height:4rem;min-height:1rem}.heading--large .title{line-height:2rem}.heading--small{height:0.5rem}.heading--none{display:none}.heading--none~.content{border-top:1px solid var(--color-gray-200);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.heading--small .title,.heading--small .actions{display:none}.actions{display:flex;align-items:center}</style>`;
 
 		init(
 			this,
@@ -2554,8 +2554,8 @@ class Container extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$i,
-			create_fragment$j,
+			instance$j,
+			create_fragment$k,
 			safe_not_equal,
 			{ variant: 0, headingsize: 1 },
 			null
@@ -2752,13 +2752,13 @@ function create_if_block_2$5(ctx) {
 }
 
 // (155:4) {#if isMenuVisible}
-function create_if_block$9(ctx) {
+function create_if_block$a(ctx) {
 	let div;
 	let t;
 	let ul;
 	let slot;
 	let ul_style_value;
-	let if_block = /*isAutoComplete*/ ctx[9] && create_if_block_1$6(ctx);
+	let if_block = /*isAutoComplete*/ ctx[9] && create_if_block_1$7(ctx);
 
 	return {
 		c() {
@@ -2783,7 +2783,7 @@ function create_if_block$9(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block_1$6(ctx);
+					if_block = create_if_block_1$7(ctx);
 					if_block.c();
 					if_block.m(div, t);
 				}
@@ -2804,7 +2804,7 @@ function create_if_block$9(ctx) {
 }
 
 // (158:8) {#if isAutoComplete}
-function create_if_block_1$6(ctx) {
+function create_if_block_1$7(ctx) {
 	let goa_input;
 	let goa_input_trailingicon_value;
 
@@ -2843,14 +2843,14 @@ function create_if_block_1$6(ctx) {
 	};
 }
 
-function create_fragment$i(ctx) {
+function create_fragment$j(ctx) {
 	let div1;
 	let t0;
 	let div0;
 	let t1;
 	let if_block0 = /*isMenuVisible*/ ctx[5] && create_if_block_3$3(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$9(ctx);
+	let if_block2 = /*isMenuVisible*/ ctx[5] && create_if_block$a(ctx);
 
 	return {
 		c() {
@@ -2905,7 +2905,7 @@ function create_fragment$i(ctx) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
-					if_block2 = create_if_block$9(ctx);
+					if_block2 = create_if_block$a(ctx);
 					if_block2.c();
 					if_block2.m(div0, null);
 				}
@@ -2928,7 +2928,7 @@ function create_fragment$i(ctx) {
 
 const MAX_HEIGHT = 300;
 
-function instance$h($$self, $$props, $$invalidate) {
+function instance$i($$self, $$props, $$invalidate) {
 	let isMultiSelect;
 	let isDisabled;
 	let isAutoComplete;
@@ -3165,8 +3165,8 @@ class Dropdown extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$h,
-			create_fragment$i,
+			instance$i,
+			create_fragment$j,
 			safe_not_equal,
 			{
 				name: 0,
@@ -3283,7 +3283,7 @@ customElements.define("goa-dropdown", Dropdown);
 
 /* libs/web-components/src/components/dropdown-item/DropdownItem.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$h(ctx) {
+function create_fragment$i(ctx) {
 	let li;
 	let raw_value = (/*filteredLabel*/ ctx[2] || /*label*/ ctx[0]) + "";
 	let li_style_value;
@@ -3337,7 +3337,7 @@ function create_fragment$h(ctx) {
 	};
 }
 
-function instance$g($$self, $$props, $$invalidate) {
+function instance$h($$self, $$props, $$invalidate) {
 	let isSelected;
 	let isDisabled;
 	let isHidden;
@@ -3508,8 +3508,8 @@ class DropdownItem extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$g,
-			create_fragment$h,
+			instance$h,
+			create_fragment$i,
 			safe_not_equal,
 			{
 				name: 8,
@@ -3607,7 +3607,7 @@ customElements.define("goa-dropdown-item", DropdownItem);
 
 /* libs/web-components/src/components/flex-row/FlexRow.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$g(ctx) {
+function create_fragment$h(ctx) {
 	let div;
 	let slot;
 
@@ -3636,7 +3636,7 @@ function create_fragment$g(ctx) {
 	};
 }
 
-function instance$f($$self, $$props, $$invalidate) {
+function instance$g($$self, $$props, $$invalidate) {
 	let _gap;
 	let { gap = "" } = $$props;
 
@@ -3669,8 +3669,8 @@ class FlexRow extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$f,
-			create_fragment$g,
+			instance$g,
+			create_fragment$h,
 			safe_not_equal,
 			{ gap: 1 },
 			null
@@ -3770,7 +3770,7 @@ function create_if_block_3$2(ctx) {
 }
 
 // (26:2) {#if error}
-function create_if_block_1$5(ctx) {
+function create_if_block_1$6(ctx) {
 	let div;
 	let t;
 
@@ -3794,7 +3794,7 @@ function create_if_block_1$5(ctx) {
 }
 
 // (29:2) {#if helptext}
-function create_if_block$8(ctx) {
+function create_if_block$9(ctx) {
 	let div;
 	let t;
 
@@ -3817,15 +3817,15 @@ function create_if_block$8(ctx) {
 	};
 }
 
-function create_fragment$f(ctx) {
+function create_fragment$g(ctx) {
 	let div1;
 	let t0;
 	let div0;
 	let t1;
 	let t2;
 	let if_block0 = /*label*/ ctx[3] && create_if_block_2$4(ctx);
-	let if_block1 = /*error*/ ctx[2] && create_if_block_1$5(ctx);
-	let if_block2 = /*helptext*/ ctx[0] && create_if_block$8(ctx);
+	let if_block1 = /*error*/ ctx[2] && create_if_block_1$6(ctx);
+	let if_block2 = /*helptext*/ ctx[0] && create_if_block$9(ctx);
 
 	return {
 		c() {
@@ -3870,7 +3870,7 @@ function create_fragment$f(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block_1$5(ctx);
+					if_block1 = create_if_block_1$6(ctx);
 					if_block1.c();
 					if_block1.m(div1, t2);
 				}
@@ -3883,7 +3883,7 @@ function create_fragment$f(ctx) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
-					if_block2 = create_if_block$8(ctx);
+					if_block2 = create_if_block$9(ctx);
 					if_block2.c();
 					if_block2.m(div1, null);
 				}
@@ -3903,7 +3903,7 @@ function create_fragment$f(ctx) {
 	};
 }
 
-function instance$e($$self, $$props, $$invalidate) {
+function instance$f($$self, $$props, $$invalidate) {
 	let isOptional;
 	let { helptext = "" } = $$props;
 	let { name = "" } = $$props;
@@ -3940,8 +3940,8 @@ class FormItem extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$e,
-			create_fragment$f,
+			instance$f,
+			create_fragment$g,
 			safe_not_equal,
 			{
 				helptext: 0,
@@ -4019,7 +4019,7 @@ customElements.define("goa-form-item", FormItem);
 
 /* libs/web-components/src/components/hero-banner/HeroBanner.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$e(ctx) {
+function create_fragment$f(ctx) {
 	let div1;
 	let goa_page_block;
 	let h1;
@@ -4076,7 +4076,7 @@ function create_fragment$e(ctx) {
 	};
 }
 
-function instance$d($$self, $$props, $$invalidate) {
+function instance$e($$self, $$props, $$invalidate) {
 	let { title } = $$props;
 	let { backgroundurl } = $$props;
 
@@ -4100,8 +4100,8 @@ class HeroBanner extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$d,
-			create_fragment$e,
+			instance$e,
+			create_fragment$f,
 			safe_not_equal,
 			{ title: 0, backgroundurl: 1 },
 			null
@@ -4146,7 +4146,7 @@ customElements.define("goa-hero-banner", HeroBanner);
 
 /* libs/web-components/src/components/icon/Icon.svelte generated by Svelte v3.44.3 */
 
-function create_if_block$7(ctx) {
+function create_if_block$8(ctx) {
 	let ion_icon;
 	let ion_icon_style_value;
 	let ion_icon_name_value;
@@ -4180,11 +4180,11 @@ function create_if_block$7(ctx) {
 	};
 }
 
-function create_fragment$d(ctx) {
+function create_fragment$e(ctx) {
 	let div;
 	let div_data_testid_value;
 	let div_style_value;
-	let if_block = /*type*/ ctx[0] && create_if_block$7(ctx);
+	let if_block = /*type*/ ctx[0] && create_if_block$8(ctx);
 
 	return {
 		c() {
@@ -4205,7 +4205,7 @@ function create_fragment$d(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$7(ctx);
+					if_block = create_if_block$8(ctx);
 					if_block.c();
 					if_block.m(div, null);
 				}
@@ -4235,7 +4235,7 @@ function create_fragment$d(ctx) {
 	};
 }
 
-function instance$c($$self, $$props, $$invalidate) {
+function instance$d($$self, $$props, $$invalidate) {
 	let isInverted;
 	let _size;
 	let { type } = $$props;
@@ -4279,8 +4279,8 @@ class Icon extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$c,
-			create_fragment$d,
+			instance$d,
+			create_fragment$e,
 			safe_not_equal,
 			{ type: 0, size: 4, theme: 1, inverted: 5 },
 			null
@@ -4343,7 +4343,7 @@ customElements.define("goa-icon", Icon);
 
 /* libs/web-components/src/components/icon-button/IconButton.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$c(ctx) {
+function create_fragment$d(ctx) {
 	let button;
 	let goa_icon;
 	let mounted;
@@ -4424,7 +4424,7 @@ function handleClick(e) {
 	e.target.dispatchEvent(new CustomEvent("_click", { composed: true, detail: { event: e } }));
 }
 
-function instance$b($$self, $$props, $$invalidate) {
+function instance$c($$self, $$props, $$invalidate) {
 	let css;
 	let isDisabled;
 	let isInverted;
@@ -4500,8 +4500,8 @@ class IconButton extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$b,
-			create_fragment$c,
+			instance$c,
+			create_fragment$d,
 			safe_not_equal,
 			{
 				type: 0,
@@ -4626,6 +4626,7 @@ function create_if_block_2$3(ctx) {
 		c() {
 			div = element("div");
 			goa_icon = element("goa-icon");
+			set_custom_element_data(goa_icon, "data-testid", "leading-icon");
 			set_custom_element_data(goa_icon, "type", /*leadingicon*/ ctx[5]);
 			attr(div, "class", "goa-input-leading-icon");
 		},
@@ -4644,8 +4645,8 @@ function create_if_block_2$3(ctx) {
 	};
 }
 
-// (67:2) {#if trailingicon && !handlesTrailingIconClicks}
-function create_if_block_1$4(ctx) {
+// (72:2) {#if trailingicon && !handlesTrailingIconClick}
+function create_if_block_1$5(ctx) {
 	let div;
 	let goa_icon;
 
@@ -4653,6 +4654,7 @@ function create_if_block_1$4(ctx) {
 		c() {
 			div = element("div");
 			goa_icon = element("goa-icon");
+			set_custom_element_data(goa_icon, "data-testid", "trailing-icon");
 			set_custom_element_data(goa_icon, "size", "medium");
 			set_custom_element_data(goa_icon, "type", /*trailingicon*/ ctx[6]);
 			attr(div, "class", "goa-input-trailing-icon");
@@ -4672,11 +4674,10 @@ function create_if_block_1$4(ctx) {
 	};
 }
 
-// (73:2) {#if trailingicon && handlesTrailingIconClicks}
-function create_if_block$6(ctx) {
+// (78:2) {#if trailingicon && handlesTrailingIconClick}
+function create_if_block$7(ctx) {
 	let div;
 	let goa_icon_button;
-	let goa_icon_button_testid_value;
 	let mounted;
 	let dispose;
 
@@ -4684,11 +4685,11 @@ function create_if_block$6(ctx) {
 		c() {
 			div = element("div");
 			goa_icon_button = element("goa-icon-button");
-			set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[9]);
+			set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[10]);
 			set_custom_element_data(goa_icon_button, "variant", "nocolor");
 			set_custom_element_data(goa_icon_button, "size", "medium");
 			set_custom_element_data(goa_icon_button, "type", /*trailingicon*/ ctx[6]);
-			set_custom_element_data(goa_icon_button, "testid", goa_icon_button_testid_value = `${/*name*/ ctx[1]}-input-trailing-button`);
+			set_custom_element_data(goa_icon_button, "data-testid", "trailing-icon-button");
 			attr(div, "class", "goa-input-trailing-icon");
 		},
 		m(target, anchor) {
@@ -4701,17 +4702,13 @@ function create_if_block$6(ctx) {
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty & /*isDisabled*/ 512) {
-				set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[9]);
+			if (dirty & /*isDisabled*/ 1024) {
+				set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[10]);
 			}
 
 			if (dirty & /*trailingicon*/ 64) {
 				set_custom_element_data(goa_icon_button, "type", /*trailingicon*/ ctx[6]);
 			}
-
-			if (dirty & /*name*/ 2 && goa_icon_button_testid_value !== (goa_icon_button_testid_value = `${/*name*/ ctx[1]}-input-trailing-button`)) {
-				set_custom_element_data(goa_icon_button, "testid", goa_icon_button_testid_value);
-			}
 		},
 		d(detaching) {
 			if (detaching) detach(div);
@@ -4721,7 +4718,7 @@ function create_if_block$6(ctx) {
 	};
 }
 
-function create_fragment$b(ctx) {
+function create_fragment$c(ctx) {
 	let div;
 	let t0;
 	let input;
@@ -4732,8 +4729,8 @@ function create_fragment$b(ctx) {
 	let mounted;
 	let dispose;
 	let if_block0 = /*leadingicon*/ ctx[5] && create_if_block_2$3(ctx);
-	let if_block1 = /*trailingicon*/ ctx[6] && !/*handlesTrailingIconClicks*/ ctx[12] && create_if_block_1$4(ctx);
-	let if_block2 = /*trailingicon*/ ctx[6] && /*handlesTrailingIconClicks*/ ctx[12] && create_if_block$6(ctx);
+	let if_block1 = /*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[13] && create_if_block_1$5(ctx);
+	let if_block2 = /*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[13] && create_if_block$7(ctx);
 
 	return {
 		c() {
@@ -4748,27 +4745,35 @@ function create_fragment$b(ctx) {
 			this.c = noop;
 			attr(input, "id", /*id*/ ctx[3]);
 			attr(input, "class", input_class_value = `input--${/*variant*/ ctx[7]}`);
-			input.readOnly = /*isReadonly*/ ctx[11];
-			input.disabled = /*isDisabled*/ ctx[9];
+			input.readOnly = /*isReadonly*/ ctx[12];
+			input.disabled = /*isDisabled*/ ctx[10];
+			attr(input, "data-testid", /*testid*/ ctx[8]);
+			attr(input, "name", /*name*/ ctx[1]);
 			attr(input, "type", /*type*/ ctx[0]);
 			input.value = /*value*/ ctx[2];
 			attr(input, "placeholder", /*placeholder*/ ctx[4]);
-			attr(div, "class", div_class_value = `goa-input ${/*isDisabled*/ ctx[9] ? "goa-input--disabled" : ""}`);
-			toggle_class(div, "error", /*isError*/ ctx[10]);
+
+			attr(div, "class", div_class_value = `
+    goa-input ${/*isDisabled*/ ctx[10] ? "goa-input--disabled" : ""}
+    variant--${/*variant*/ ctx[7]}
+    type--${/*type*/ ctx[0]}
+  `);
+
+			toggle_class(div, "error", /*isError*/ ctx[11]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
 			if (if_block0) if_block0.m(div, null);
 			append(div, t0);
 			append(div, input);
-			/*input_binding*/ ctx[20](input);
+			/*input_binding*/ ctx[21](input);
 			append(div, t1);
 			if (if_block1) if_block1.m(div, null);
 			append(div, t2);
 			if (if_block2) if_block2.m(div, null);
 
 			if (!mounted) {
-				dispose = listen(input, "keyup", /*onKeyUp*/ ctx[13]);
+				dispose = listen(input, "keyup", /*onKeyUp*/ ctx[14]);
 				mounted = true;
 			}
 		},
@@ -4794,12 +4799,20 @@ function create_fragment$b(ctx) {
 				attr(input, "class", input_class_value);
 			}
 
-			if (dirty & /*isReadonly*/ 2048) {
-				input.readOnly = /*isReadonly*/ ctx[11];
+			if (dirty & /*isReadonly*/ 4096) {
+				input.readOnly = /*isReadonly*/ ctx[12];
 			}
 
-			if (dirty & /*isDisabled*/ 512) {
-				input.disabled = /*isDisabled*/ ctx[9];
+			if (dirty & /*isDisabled*/ 1024) {
+				input.disabled = /*isDisabled*/ ctx[10];
+			}
+
+			if (dirty & /*testid*/ 256) {
+				attr(input, "data-testid", /*testid*/ ctx[8]);
+			}
+
+			if (dirty & /*name*/ 2) {
+				attr(input, "name", /*name*/ ctx[1]);
 			}
 
 			if (dirty & /*type*/ 1) {
@@ -4814,11 +4827,11 @@ function create_fragment$b(ctx) {
 				attr(input, "placeholder", /*placeholder*/ ctx[4]);
 			}
 
-			if (/*trailingicon*/ ctx[6] && !/*handlesTrailingIconClicks*/ ctx[12]) {
+			if (/*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[13]) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block_1$4(ctx);
+					if_block1 = create_if_block_1$5(ctx);
 					if_block1.c();
 					if_block1.m(div, t2);
 				}
@@ -4827,11 +4840,11 @@ function create_fragment$b(ctx) {
 				if_block1 = null;
 			}
 
-			if (/*trailingicon*/ ctx[6] && /*handlesTrailingIconClicks*/ ctx[12]) {
+			if (/*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[13]) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
-					if_block2 = create_if_block$6(ctx);
+					if_block2 = create_if_block$7(ctx);
 					if_block2.c();
 					if_block2.m(div, null);
 				}
@@ -4840,12 +4853,16 @@ function create_fragment$b(ctx) {
 				if_block2 = null;
 			}
 
-			if (dirty & /*isDisabled*/ 512 && div_class_value !== (div_class_value = `goa-input ${/*isDisabled*/ ctx[9] ? "goa-input--disabled" : ""}`)) {
+			if (dirty & /*isDisabled, variant, type*/ 1153 && div_class_value !== (div_class_value = `
+    goa-input ${/*isDisabled*/ ctx[10] ? "goa-input--disabled" : ""}
+    variant--${/*variant*/ ctx[7]}
+    type--${/*type*/ ctx[0]}
+  `)) {
 				attr(div, "class", div_class_value);
 			}
 
-			if (dirty & /*isDisabled, isError*/ 1536) {
-				toggle_class(div, "error", /*isError*/ ctx[10]);
+			if (dirty & /*isDisabled, variant, type, isError*/ 3201) {
+				toggle_class(div, "error", /*isError*/ ctx[11]);
 			}
 		},
 		i: noop,
@@ -4853,7 +4870,7 @@ function create_fragment$b(ctx) {
 		d(detaching) {
 			if (detaching) detach(div);
 			if (if_block0) if_block0.d();
-			/*input_binding*/ ctx[20](null);
+			/*input_binding*/ ctx[21](null);
 			if (if_block1) if_block1.d();
 			if (if_block2) if_block2.d();
 			mounted = false;
@@ -4866,8 +4883,8 @@ function doClick() {
 	this.dispatchEvent(new CustomEvent("_trailingIconClick", { composed: true }));
 }
 
-function instance$a($$self, $$props, $$invalidate) {
-	let handlesTrailingIconClicks;
+function instance$b($$self, $$props, $$invalidate) {
+	let handlesTrailingIconClick;
 	let isFocused;
 	let isReadonly;
 	let isError;
@@ -4880,17 +4897,14 @@ function instance$a($$self, $$props, $$invalidate) {
 	let { leadingicon = null } = $$props;
 	let { trailingicon = null } = $$props;
 	let { variant = "goa" } = $$props;
-	let { disabled } = $$props;
-	let { handletrailingiconclick } = $$props;
-	let { focused } = $$props;
-	let { readonly } = $$props;
-	let { error } = $$props;
+	let { disabled = "false" } = $$props;
+	let { handletrailingiconclick = "false" } = $$props;
+	let { focused = "false" } = $$props;
+	let { readonly = "false" } = $$props;
+	let { error = "false" } = $$props;
+	let { testid = "" } = $$props;
 	let inputEl;
 
-	onMount(async () => {
-		await tick();
-	});
-
 	function onKeyUp(e) {
 		e.target.dispatchEvent(new CustomEvent("_change",
 		{
@@ -4909,7 +4923,7 @@ function instance$a($$self, $$props, $$invalidate) {
 	function input_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			inputEl = $$value;
-			$$invalidate(8, inputEl);
+			$$invalidate(9, inputEl);
 		});
 	}
 
@@ -4922,39 +4936,38 @@ function instance$a($$self, $$props, $$invalidate) {
 		if ('leadingicon' in $$props) $$invalidate(5, leadingicon = $$props.leadingicon);
 		if ('trailingicon' in $$props) $$invalidate(6, trailingicon = $$props.trailingicon);
 		if ('variant' in $$props) $$invalidate(7, variant = $$props.variant);
-		if ('disabled' in $$props) $$invalidate(14, disabled = $$props.disabled);
-		if ('handletrailingiconclick' in $$props) $$invalidate(15, handletrailingiconclick = $$props.handletrailingiconclick);
-		if ('focused' in $$props) $$invalidate(16, focused = $$props.focused);
-		if ('readonly' in $$props) $$invalidate(17, readonly = $$props.readonly);
-		if ('error' in $$props) $$invalidate(18, error = $$props.error);
+		if ('disabled' in $$props) $$invalidate(15, disabled = $$props.disabled);
+		if ('handletrailingiconclick' in $$props) $$invalidate(16, handletrailingiconclick = $$props.handletrailingiconclick);
+		if ('focused' in $$props) $$invalidate(17, focused = $$props.focused);
+		if ('readonly' in $$props) $$invalidate(18, readonly = $$props.readonly);
+		if ('error' in $$props) $$invalidate(19, error = $$props.error);
+		if ('testid' in $$props) $$invalidate(8, testid = $$props.testid);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*handletrailingiconclick*/ 32768) {
-			$$invalidate(12, handlesTrailingIconClicks = toBoolean(handletrailingiconclick));
+		if ($$self.$$.dirty & /*handletrailingiconclick*/ 65536) {
+			$$invalidate(13, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
 		}
 
-		if ($$self.$$.dirty & /*focused*/ 65536) {
-			$$invalidate(19, isFocused = toBoolean(focused));
+		if ($$self.$$.dirty & /*focused*/ 131072) {
+			$$invalidate(20, isFocused = toBoolean(focused));
 		}
 
-		if ($$self.$$.dirty & /*readonly*/ 131072) {
-			$$invalidate(11, isReadonly = toBoolean(readonly));
+		if ($$self.$$.dirty & /*readonly*/ 262144) {
+			$$invalidate(12, isReadonly = toBoolean(readonly));
 		}
 
-		if ($$self.$$.dirty & /*error*/ 262144) {
-			$$invalidate(10, isError = toBoolean(error));
+		if ($$self.$$.dirty & /*error*/ 524288) {
+			$$invalidate(11, isError = toBoolean(error));
 		}
 
-		if ($$self.$$.dirty & /*disabled*/ 16384) {
-			$$invalidate(9, isDisabled = toBoolean(disabled));
+		if ($$self.$$.dirty & /*disabled*/ 32768) {
+			$$invalidate(10, isDisabled = toBoolean(disabled));
 		}
 
-		if ($$self.$$.dirty & /*isFocused, inputEl*/ 524544) {
-			if (isFocused) {
-				inputEl === null || inputEl === void 0
-				? void 0
-				: inputEl.focus();
+		if ($$self.$$.dirty & /*isFocused, inputEl*/ 1049088) {
+			if (isFocused && inputEl) {
+				setTimeout(() => inputEl.focus(), 1);
 			}
 		}
 	};
@@ -4968,11 +4981,12 @@ function instance$a($$self, $$props, $$invalidate) {
 		leadingicon,
 		trailingicon,
 		variant,
+		testid,
 		inputEl,
 		isDisabled,
 		isError,
 		isReadonly,
-		handlesTrailingIconClicks,
+		handlesTrailingIconClick,
 		onKeyUp,
 		disabled,
 		handletrailingiconclick,
@@ -4987,7 +5001,7 @@ function instance$a($$self, $$props, $$invalidate) {
 class Input extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.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:3px;background:white;color:var(--color-black, #ccc);padding:var(--input-padding, 0.5rem) 0.5rem;display:flex;align-items:center}.goa-input input[readonly]{cursor:pointer}.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--highlight)}.goa-input:disabled{border-color:var(--color-gray-500)}.goa-input:disabled:hover{border-color:var(--color-gray-500)}.goa-input:disabled:focus{box-shadow:none}.goa-input-leading-icon{line-height:18px;padding:0.5rem}.goa-input-trailing-icon{display:flex;align-items:center}.goa-input-trailing-icon>.goa-icon-button{margin-right:-0.5rem}input{display:block;width:100%;font-size:var(--input-font-size)}.goa-input-leading-icon~input{padding-left:0}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled{opacity:0.5;cursor:default;border-color:var(--color-black)}.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{border-color:var(--color-black);cursor:default;box-shadow:none}.goa-input--disabled input:hover{cursor:default !important}input.input--goa{display:block;border:none;flex:1 1 auto}.goa-input .input--bare{border:none}.goa-state--error .goa-input{border:2px solid var(--goa-color-status-emergency)}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-status-emergency-dark)}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.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:3px;background:white;color:var(--color-black, #ccc);padding:var(--input-padding, 0.5rem) 0.5rem;display:flex;align-items:center}.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--highlight)}.goa-input:disabled{border-color:var(--color-gray-500)}.goa-input:disabled:hover{border-color:var(--color-gray-500)}.goa-input:disabled:focus{box-shadow:none}.goa-input input[readonly]{cursor:pointer}.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{line-height:18px}.goa-input-trailing-icon{display:flex;align-items:center}.goa-input-trailing-icon>.goa-icon-button{margin-right:-0.5rem}input{display:block;width:100%;font-size:var(--input-font-size)}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled{opacity:0.5;cursor:default;border-color:var(--color-black)}.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{border-color:var(--color-black);cursor:default;box-shadow:none}.goa-input--disabled input:hover{cursor:default !important}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}.goa-state--error .goa-input{border:2px solid var(--goa-color-status-emergency)}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-status-emergency-dark)}</style>`;
 
 		init(
 			this,
@@ -4996,8 +5010,8 @@ class Input extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$a,
-			create_fragment$b,
+			instance$b,
+			create_fragment$c,
 			safe_not_equal,
 			{
 				type: 0,
@@ -5008,11 +5022,12 @@ class Input extends SvelteElement {
 				leadingicon: 5,
 				trailingicon: 6,
 				variant: 7,
-				disabled: 14,
-				handletrailingiconclick: 15,
-				focused: 16,
-				readonly: 17,
-				error: 18
+				disabled: 15,
+				handletrailingiconclick: 16,
+				focused: 17,
+				readonly: 18,
+				error: 19,
+				testid: 8
 			},
 			null
 		);
@@ -5043,7 +5058,8 @@ class Input extends SvelteElement {
 			"handletrailingiconclick",
 			"focused",
 			"readonly",
-			"error"
+			"error",
+			"testid"
 		];
 	}
 
@@ -5120,7 +5136,7 @@ class Input extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[14];
+		return this.$$.ctx[15];
 	}
 
 	set disabled(disabled) {
@@ -5129,7 +5145,7 @@ class Input extends SvelteElement {
 	}
 
 	get handletrailingiconclick() {
-		return this.$$.ctx[15];
+		return this.$$.ctx[16];
 	}
 
 	set handletrailingiconclick(handletrailingiconclick) {
@@ -5138,7 +5154,7 @@ class Input extends SvelteElement {
 	}
 
 	get focused() {
-		return this.$$.ctx[16];
+		return this.$$.ctx[17];
 	}
 
 	set focused(focused) {
@@ -5147,7 +5163,7 @@ class Input extends SvelteElement {
 	}
 
 	get readonly() {
-		return this.$$.ctx[17];
+		return this.$$.ctx[18];
 	}
 
 	set readonly(readonly) {
@@ -5156,13 +5172,22 @@ class Input extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[18];
+		return this.$$.ctx[19];
 	}
 
 	set error(error) {
 		this.$$set({ error });
 		flush();
 	}
+
+	get testid() {
+		return this.$$.ctx[8];
+	}
+
+	set testid(testid) {
+		this.$$set({ testid });
+		flush();
+	}
 }
 
 customElements.define("goa-input", Input);
@@ -5244,7 +5269,7 @@ function noScroll(node, opts) {
 
 /* libs/web-components/src/components/modal/Modal.svelte generated by Svelte v3.44.3 */
 
-function create_if_block$5(ctx) {
+function create_if_block$6(ctx) {
 	let div4;
 	let div0;
 	let t0;
@@ -5268,7 +5293,7 @@ function create_if_block$5(ctx) {
 	let if_block1 = /*isClosable*/ ctx[4] && create_if_block_2$2();
 
 	function select_block_type(ctx, dirty) {
-		if (/*isScrollable*/ ctx[3]) return create_if_block_1$3;
+		if (/*isScrollable*/ ctx[3]) return create_if_block_1$4;
 		return create_else_block$2;
 	}
 
@@ -5481,7 +5506,7 @@ function create_else_block$2(ctx) {
 }
 
 // (47:8) {#if isScrollable}
-function create_if_block_1$3(ctx) {
+function create_if_block_1$4(ctx) {
 	let goa_scrollable;
 
 	return {
@@ -5501,10 +5526,10 @@ function create_if_block_1$3(ctx) {
 	};
 }
 
-function create_fragment$a(ctx) {
+function create_fragment$b(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*isOpen*/ ctx[1] && create_if_block$5(ctx);
+	let if_block = /*isOpen*/ ctx[1] && create_if_block$6(ctx);
 
 	return {
 		c() {
@@ -5526,7 +5551,7 @@ function create_fragment$a(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$5(ctx);
+					if_block = create_if_block$6(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -5562,7 +5587,7 @@ function close(e) {
 	e.stopPropagation();
 }
 
-function instance$9($$self, $$props, $$invalidate) {
+function instance$a($$self, $$props, $$invalidate) {
 	let isClosable;
 	let isScrollable;
 	let isOpen;
@@ -5626,8 +5651,8 @@ class Modal extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$9,
-			create_fragment$a,
+			instance$a,
+			create_fragment$b,
 			safe_not_equal,
 			{
 				title: 0,
@@ -5695,7 +5720,7 @@ customElements.define("goa-modal", Modal);
 
 /* libs/web-components/src/components/notification/Notification.svelte generated by Svelte v3.44.3 */
 
-function create_if_block$4(ctx) {
+function create_if_block$5(ctx) {
 	let div3;
 	let div0;
 	let goa_icon;
@@ -5779,10 +5804,10 @@ function create_if_block$4(ctx) {
 	};
 }
 
-function create_fragment$9(ctx) {
+function create_fragment$a(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*show*/ ctx[1] && create_if_block$4(ctx);
+	let if_block = /*show*/ ctx[1] && create_if_block$5(ctx);
 
 	return {
 		c() {
@@ -5804,7 +5829,7 @@ function create_fragment$9(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$4(ctx);
+					if_block = create_if_block$5(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -5835,7 +5860,7 @@ function create_fragment$9(ctx) {
 	};
 }
 
-function instance$8($$self, $$props, $$invalidate) {
+function instance$9($$self, $$props, $$invalidate) {
 	let iconType;
 	let { type } = $$props;
 	let show = true;
@@ -5875,8 +5900,8 @@ class Notification extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$8,
-			create_fragment$9,
+			instance$9,
+			create_fragment$a,
 			safe_not_equal,
 			{ type: 0 },
 			null
@@ -5912,7 +5937,7 @@ customElements.define("goa-notification", Notification);
 
 /* libs/web-components/src/layouts/PageLayout.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$8(ctx) {
+function create_fragment$9(ctx) {
 	let div;
 
 	return {
@@ -5947,7 +5972,7 @@ class PageLayout extends SvelteElement {
 				customElement: true
 			},
 			null,
-			create_fragment$8,
+			create_fragment$9,
 			safe_not_equal,
 			{},
 			null
@@ -5965,12 +5990,12 @@ customElements.define("goa-page-layout", PageLayout);
 
 /* libs/web-components/src/components/page-loader/PageLoader.svelte generated by Svelte v3.44.3 */
 
-function create_if_block$3(ctx) {
+function create_if_block$4(ctx) {
 	let current_block_type_index;
 	let if_block;
 	let if_block_anchor;
 	let current;
-	const if_block_creators = [create_if_block_1$2, create_else_block$1];
+	const if_block_creators = [create_if_block_1$3, create_else_block$1];
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
@@ -6095,7 +6120,7 @@ function create_else_block$1(ctx) {
 }
 
 // (20:2) {#if fullscreen}
-function create_if_block_1$2(ctx) {
+function create_if_block_1$3(ctx) {
 	let div;
 	let goa_spinner;
 	let goa_spinner_progress_value;
@@ -6228,10 +6253,10 @@ function create_if_block_2$1(ctx) {
 	};
 }
 
-function create_fragment$7(ctx) {
+function create_fragment$8(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*ready*/ ctx[3] && create_if_block$3(ctx);
+	let if_block = /*ready*/ ctx[3] && create_if_block$4(ctx);
 
 	return {
 		c() {
@@ -6253,7 +6278,7 @@ function create_fragment$7(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$3(ctx);
+					if_block = create_if_block$4(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -6284,7 +6309,7 @@ function create_fragment$7(ctx) {
 	};
 }
 
-function instance$7($$self, $$props, $$invalidate) {
+function instance$8($$self, $$props, $$invalidate) {
 	let isVisible;
 	let fullscreen;
 	let inline;
@@ -6346,8 +6371,8 @@ class PageLoader extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$7,
-			create_fragment$7,
+			instance$8,
+			create_fragment$8,
 			safe_not_equal,
 			{
 				type: 0,
@@ -6427,7 +6452,7 @@ const messageChannel = writable({});
 
 /* libs/web-components/src/components/radio-group/RadioGroup.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$6(ctx) {
+function create_fragment$7(ctx) {
 	let div1;
 	let div0;
 	let slot;
@@ -6461,7 +6486,7 @@ function create_fragment$6(ctx) {
 	};
 }
 
-function instance$6($$self, $$props, $$invalidate) {
+function instance$7($$self, $$props, $$invalidate) {
 	let isDisabled;
 	let { name } = $$props;
 	let { value } = $$props;
@@ -6571,8 +6596,8 @@ class RadioGroup extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$6,
-			create_fragment$6,
+			instance$7,
+			create_fragment$7,
 			safe_not_equal,
 			{
 				name: 3,
@@ -6650,7 +6675,7 @@ customElements.define("goa-radio-group", RadioGroup);
 
 /* libs/web-components/src/components/radio-item/RadioItem.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$5(ctx) {
+function create_fragment$6(ctx) {
 	let label_1;
 	let input;
 	let t0;
@@ -6736,7 +6761,7 @@ function create_fragment$5(ctx) {
 	};
 }
 
-function instance$5($$self, $$props, $$invalidate) {
+function instance$6($$self, $$props, $$invalidate) {
 	let { value } = $$props;
 	let { label } = $$props;
 	let { name } = $$props;
@@ -6799,8 +6824,8 @@ class RadioItem extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$5,
-			create_fragment$5,
+			instance$6,
+			create_fragment$6,
 			safe_not_equal,
 			{ value: 0, label: 1, name: 2 },
 			null
@@ -6854,7 +6879,7 @@ customElements.define("goa-radio-item", RadioItem);
 
 /* libs/web-components/src/components/scrollable/Scrollable.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$4(ctx) {
+function create_fragment$5(ctx) {
 	let div;
 	let slot;
 	let div_style_value;
@@ -6901,7 +6926,7 @@ function create_fragment$4(ctx) {
 	};
 }
 
-function instance$4($$self, $$props, $$invalidate) {
+function instance$5($$self, $$props, $$invalidate) {
 	let { direction = "vertical" } = $$props;
 	let { hpadding = 0 } = $$props;
 	let { vpadding = 0 } = $$props;
@@ -6929,8 +6954,8 @@ class Scrollable extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$4,
-			create_fragment$4,
+			instance$5,
+			create_fragment$5,
 			safe_not_equal,
 			{
 				direction: 0,
@@ -7005,6 +7030,7 @@ function create_if_block_2(ctx) {
 		c() {
 			div = element("div");
 			div.innerHTML = `An official site of the <a href="https://www.alberta.ca/index.aspx" class="web-link">Alberta Government</a>`;
+			attr(div, "data-testid", "level");
 			attr(div, "class", "site-text service-level--live");
 		},
 		m(target, anchor) {
@@ -7017,7 +7043,7 @@ function create_if_block_2(ctx) {
 }
 
 // (16:2) {#if level !== "live"}
-function create_if_block_1$1(ctx) {
+function create_if_block_1$2(ctx) {
 	let div0;
 	let t0;
 	let div0_class_value;
@@ -7030,7 +7056,8 @@ function create_if_block_1$1(ctx) {
 			t0 = text(/*level*/ ctx[0]);
 			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`;
+			div1.innerHTML = `This is a new <a href="https://www.alberta.ca/index.aspx" class="web-link">Alberta Government</a> service`;
+			attr(div0, "data-testid", "level");
 			attr(div0, "class", div0_class_value = "service-level service-level--" + /*level*/ ctx[0]?.toLowerCase());
 			attr(div1, "class", "site-text");
 		},
@@ -7055,8 +7082,8 @@ function create_if_block_1$1(ctx) {
 	};
 }
 
-// (24:2) {#if version}
-function create_if_block$2(ctx) {
+// (25:2) {#if version}
+function create_if_block$3(ctx) {
 	let div;
 	let t;
 
@@ -7064,6 +7091,7 @@ function create_if_block$2(ctx) {
 		c() {
 			div = element("div");
 			t = text(/*version*/ ctx[1]);
+			attr(div, "data-testid", "version");
 			attr(div, "class", "version");
 		},
 		m(target, anchor) {
@@ -7079,15 +7107,15 @@ function create_if_block$2(ctx) {
 	};
 }
 
-function create_fragment$3(ctx) {
+function create_fragment$4(ctx) {
 	let header;
 	let t0;
 	let t1;
 	let div;
 	let t2;
 	let if_block0 = /*level*/ ctx[0] === "live" && create_if_block_2();
-	let if_block1 = /*level*/ ctx[0] !== "live" && create_if_block_1$1(ctx);
-	let if_block2 = /*version*/ ctx[1] && create_if_block$2(ctx);
+	let if_block1 = /*level*/ ctx[0] !== "live" && create_if_block_1$2(ctx);
+	let if_block2 = /*version*/ ctx[1] && create_if_block$3(ctx);
 
 	return {
 		c() {
@@ -7129,7 +7157,7 @@ function create_fragment$3(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block_1$1(ctx);
+					if_block1 = create_if_block_1$2(ctx);
 					if_block1.c();
 					if_block1.m(header, t1);
 				}
@@ -7142,7 +7170,7 @@ function create_fragment$3(ctx) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
-					if_block2 = create_if_block$2(ctx);
+					if_block2 = create_if_block$3(ctx);
 					if_block2.c();
 					if_block2.m(header, null);
 				}
@@ -7162,7 +7190,7 @@ function create_fragment$3(ctx) {
 	};
 }
 
-function instance$3($$self, $$props, $$invalidate) {
+function instance$4($$self, $$props, $$invalidate) {
 	let { level } = $$props;
 	let { version } = $$props;
 
@@ -7177,7 +7205,7 @@ function instance$3($$self, $$props, $$invalidate) {
 class ServiceLevelHeader extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-official-site-header{display:flex;font-size:var(--fs-xs);background-color:var(--color-gray-100);align-items:center;justify-content:space-between}.spacer{flex:1 1 auto}.version{padding-right:1rem;opacity:0.5}.service-level{font-weight:bold;padding:0 0.5rem}.service-level--alpha{background-color:var(--color-orange);color:var(--color-black)}.service-level--beta{background-color:var(--goa-color-primary-dark);color:var(--color-white)}.site-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-black);padding-left:0.5rem}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-official-site-header{display:flex;font-size:var(--fs-xs);background-color:var(--color-gray-100);align-items:center;justify-content:space-between;height:1.5rem}.spacer{flex:1 1 auto}.version{padding-right:1rem;opacity:0.5}.service-level{font-weight:bold;padding:0 0.5rem;height:100%;display:flex;align-items:center}.service-level--alpha{background-color:var(--goa-color-interactive--highlight);color:var(--color-black)}.service-level--beta{background-color:var(--goa-color-primary-dark);color:var(--color-white)}.site-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-black);padding-left:0.5rem}</style>`;
 
 		init(
 			this,
@@ -7186,8 +7214,8 @@ class ServiceLevelHeader extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$3,
-			create_fragment$3,
+			instance$4,
+			create_fragment$4,
 			safe_not_equal,
 			{ level: 0, version: 1 },
 			null
@@ -7258,7 +7286,7 @@ function create_else_block(ctx) {
 }
 
 // (20:29) 
-function create_if_block_1(ctx) {
+function create_if_block_1$1(ctx) {
 	let div2;
 	let div0;
 	let skeleton0;
@@ -7348,7 +7376,7 @@ function create_if_block_1(ctx) {
 }
 
 // (10:0) {#if type === "card"}
-function create_if_block$1(ctx) {
+function create_if_block$2(ctx) {
 	let div1;
 	let skeleton0;
 	let t0;
@@ -7467,12 +7495,12 @@ function create_if_block$1(ctx) {
 	};
 }
 
-function create_fragment$2(ctx) {
+function create_fragment$3(ctx) {
 	let current_block_type_index;
 	let if_block;
 	let if_block_anchor;
 	let current;
-	const if_block_creators = [create_if_block$1, create_if_block_1, create_else_block];
+	const if_block_creators = [create_if_block$2, create_if_block_1$1, create_else_block];
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
@@ -7538,7 +7566,7 @@ function create_fragment$2(ctx) {
 	};
 }
 
-function instance$2($$self, $$props, $$invalidate) {
+function instance$3($$self, $$props, $$invalidate) {
 	let { width = 320 } = $$props;
 	let { size = 1 } = $$props;
 	let { type } = $$props;
@@ -7564,8 +7592,8 @@ class Skeleton extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$2,
-			create_fragment$2,
+			instance$3,
+			create_fragment$3,
 			safe_not_equal,
 			{ width: 0, size: 1, type: 2 },
 			null
@@ -7718,7 +7746,7 @@ function tweened(value, defaults = {}) {
 
 /* libs/web-components/src/components/spinner/Spinner.svelte generated by Svelte v3.44.3 */
 
-function create_if_block(ctx) {
+function create_if_block$1(ctx) {
 	let svg;
 	let circle;
 	let circle_stroke_value;
@@ -7822,9 +7850,9 @@ function create_if_block(ctx) {
 	};
 }
 
-function create_fragment$1(ctx) {
+function create_fragment$2(ctx) {
 	let if_block_anchor;
-	let if_block = /*ready*/ ctx[5] && create_if_block(ctx);
+	let if_block = /*ready*/ ctx[5] && create_if_block$1(ctx);
 
 	return {
 		c() {
@@ -7841,7 +7869,7 @@ function create_fragment$1(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block(ctx);
+					if_block = create_if_block$1(ctx);
 					if_block.c();
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
 				}
@@ -7859,7 +7887,7 @@ function create_fragment$1(ctx) {
 	};
 }
 
-function instance$1($$self, $$props, $$invalidate) {
+function instance$2($$self, $$props, $$invalidate) {
 	let diameter;
 	let strokewidth;
 	let radius;
@@ -7969,8 +7997,8 @@ class Spinner extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$1,
-			create_fragment$1,
+			instance$2,
+			create_fragment$2,
 			safe_not_equal,
 			{
 				size: 9,
@@ -8038,7 +8066,7 @@ customElements.define("goa-spinner", Spinner);
 
 /* libs/web-components/src/components/text-area/TextArea.svelte generated by Svelte v3.44.3 */
 
-function create_fragment(ctx) {
+function create_fragment$1(ctx) {
 	let textarea;
 	let textarea_value_value;
 	let textarea_rows_value;
@@ -8095,7 +8123,7 @@ function create_fragment(ctx) {
 	};
 }
 
-function instance($$self, $$props, $$invalidate) {
+function instance$1($$self, $$props, $$invalidate) {
 	let isDisabled;
 	let { name } = $$props;
 	let { value } = $$props;
@@ -8147,8 +8175,8 @@ class TextArea extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance,
-			create_fragment,
+			instance$1,
+			create_fragment$1,
 			safe_not_equal,
 			{
 				name: 0,
@@ -8224,4 +8252,235 @@ class TextArea extends SvelteElement {
 
 customElements.define("goa-textarea", TextArea);
 
-export { AppHeader as GoAAppHeader, Badge as GoABadge, Button as GoAButton, ButtonGroup as GoAButtonGroup, Callout as GoACallout, Card as GoACard, CardActions as GoACardActions, CardContent as GoACardContent, CardGroup as GoACardGroup, CardImage as GoACardImage, Checkbox as GoACheckbox, Container as GoAContainer, Dropdown as GoADropdown, DropdownItem as GoADropdownItem, FlexRow as GoAFlexRow, FormItem as GoAFormItem, HeroBanner as GoAHeroBanner, Icon as GoAIcon, IconButton as GoAIconButton, Input as GoAInput, Modal as GoAModal, Notification as GoANotification, PageBlock as GoAPageBlock, PageLayout as GoAPageLayout, PageLoader as GoAPageLoader, RadioGroup as GoARadioGroup, RadioItem as GoARadioItem, Scrollable as GoAScrollable, ServiceLevelHeader as GoAServiceLevelHeader, Skeleton as GoASkeleton, Spinner as GoASpinner, TextArea as GoATextArea };
+/* libs/web-components/src/components/container/ContainerWrapper.test.svelte generated by Svelte v3.44.3 */
+
+function create_if_block_1(ctx) {
+	let div;
+	let t;
+
+	return {
+		c() {
+			div = element("div");
+			t = text(/*title*/ ctx[0]);
+			attr(div, "slot", "title");
+			attr(div, "class", "title");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*title*/ 1) set_data(t, /*title*/ ctx[0]);
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+// (16:2) {#if actions}
+function create_if_block(ctx) {
+	let div;
+
+	return {
+		c() {
+			div = element("div");
+			attr(div, "class", "actions");
+			attr(div, "slot", "actions");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			div.innerHTML = /*actions*/ ctx[1];
+		},
+		p(ctx, dirty) {
+			if (dirty & /*actions*/ 2) div.innerHTML = /*actions*/ ctx[1];		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let goa_container;
+	let t0;
+	let t1;
+	let div;
+	let if_block0 = /*title*/ ctx[0] && create_if_block_1(ctx);
+	let if_block1 = /*actions*/ ctx[1] && create_if_block(ctx);
+
+	return {
+		c() {
+			goa_container = element("goa-container");
+			if (if_block0) if_block0.c();
+			t0 = space();
+			if (if_block1) if_block1.c();
+			t1 = space();
+			div = element("div");
+			this.c = noop;
+			attr(div, "class", "content");
+			attr(div, "slot", "");
+			set_custom_element_data(goa_container, "variant", /*variant*/ ctx[3]);
+			set_custom_element_data(goa_container, "headingsize", /*headingsize*/ ctx[4]);
+		},
+		m(target, anchor) {
+			insert(target, goa_container, anchor);
+			if (if_block0) if_block0.m(goa_container, null);
+			append(goa_container, t0);
+			if (if_block1) if_block1.m(goa_container, null);
+			append(goa_container, t1);
+			append(goa_container, div);
+			div.innerHTML = /*content*/ ctx[2];
+		},
+		p(ctx, [dirty]) {
+			if (/*title*/ ctx[0]) {
+				if (if_block0) {
+					if_block0.p(ctx, dirty);
+				} else {
+					if_block0 = create_if_block_1(ctx);
+					if_block0.c();
+					if_block0.m(goa_container, t0);
+				}
+			} else if (if_block0) {
+				if_block0.d(1);
+				if_block0 = null;
+			}
+
+			if (/*actions*/ ctx[1]) {
+				if (if_block1) {
+					if_block1.p(ctx, dirty);
+				} else {
+					if_block1 = create_if_block(ctx);
+					if_block1.c();
+					if_block1.m(goa_container, t1);
+				}
+			} else if (if_block1) {
+				if_block1.d(1);
+				if_block1 = null;
+			}
+
+			if (dirty & /*content*/ 4) div.innerHTML = /*content*/ ctx[2];
+			if (dirty & /*variant*/ 8) {
+				set_custom_element_data(goa_container, "variant", /*variant*/ ctx[3]);
+			}
+
+			if (dirty & /*headingsize*/ 16) {
+				set_custom_element_data(goa_container, "headingsize", /*headingsize*/ ctx[4]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(goa_container);
+			if (if_block0) if_block0.d();
+			if (if_block1) if_block1.d();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { title } = $$props;
+	let { actions = "" } = $$props;
+	let { content } = $$props;
+	let { variant = "default" } = $$props;
+	let { headingsize = "large" } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('title' in $$props) $$invalidate(0, title = $$props.title);
+		if ('actions' in $$props) $$invalidate(1, actions = $$props.actions);
+		if ('content' in $$props) $$invalidate(2, content = $$props.content);
+		if ('variant' in $$props) $$invalidate(3, variant = $$props.variant);
+		if ('headingsize' in $$props) $$invalidate(4, headingsize = $$props.headingsize);
+	};
+
+	return [title, actions, content, variant, headingsize];
+}
+
+class ContainerWrapper_test extends SvelteElement {
+	constructor(options) {
+		super();
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				title: 0,
+				actions: 1,
+				content: 2,
+				variant: 3,
+				headingsize: 4
+			},
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return ["title", "actions", "content", "variant", "headingsize"];
+	}
+
+	get title() {
+		return this.$$.ctx[0];
+	}
+
+	set title(title) {
+		this.$$set({ title });
+		flush();
+	}
+
+	get actions() {
+		return this.$$.ctx[1];
+	}
+
+	set actions(actions) {
+		this.$$set({ actions });
+		flush();
+	}
+
+	get content() {
+		return this.$$.ctx[2];
+	}
+
+	set content(content) {
+		this.$$set({ content });
+		flush();
+	}
+
+	get variant() {
+		return this.$$.ctx[3];
+	}
+
+	set variant(variant) {
+		this.$$set({ variant });
+		flush();
+	}
+
+	get headingsize() {
+		return this.$$.ctx[4];
+	}
+
+	set headingsize(headingsize) {
+		this.$$set({ headingsize });
+		flush();
+	}
+}
+
+customElements.define("test-container", ContainerWrapper_test);
+
+export { ContainerWrapper_test as ContainerWrapper, AppHeader as GoAAppHeader, Badge as GoABadge, Button as GoAButton, ButtonGroup as GoAButtonGroup, Callout as GoACallout, Card as GoACard, CardActions as GoACardActions, CardContent as GoACardContent, CardGroup as GoACardGroup, CardImage as GoACardImage, Checkbox as GoACheckbox, Container as GoAContainer, Dropdown as GoADropdown, DropdownItem as GoADropdownItem, FlexRow as GoAFlexRow, FormItem as GoAFormItem, HeroBanner as GoAHeroBanner, Icon as GoAIcon, IconButton as GoAIconButton, Input as GoAInput, Modal as GoAModal, Notification as GoANotification, PageBlock as GoAPageBlock, PageLayout as GoAPageLayout, PageLoader as GoAPageLoader, RadioGroup as GoARadioGroup, RadioItem as GoARadioItem, Scrollable as GoAScrollable, ServiceLevelHeader as GoAServiceLevelHeader, Skeleton as GoASkeleton, Spinner as GoASpinner, TextArea as GoATextArea };