@abgov/web-components 1.0.0-alpha.140 → 1.0.0-alpha.141

package/web-components.es.js

@@ -977,7 +977,7 @@ function create_if_block$h(ctx) {
 	};
 }
 
-function create_fragment$F(ctx) {
+function create_fragment$G(ctx) {
 	let div2;
 	let div1;
 	let t;
@@ -1043,7 +1043,7 @@ function create_fragment$F(ctx) {
 	};
 }
 
-function instance$A($$self, $$props, $$invalidate) {
+function instance$B($$self, $$props, $$invalidate) {
 	let { heading = "" } = $$props;
 	let { url = "" } = $$props;
 	let { testid = "" } = $$props;
@@ -1071,8 +1071,8 @@ class AppHeader extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$A,
-			create_fragment$F,
+			instance$B,
+			create_fragment$G,
 			safe_not_equal,
 			{
 				heading: 0,
@@ -1257,7 +1257,7 @@ function create_if_block$g(ctx) {
 	};
 }
 
-function create_fragment$E(ctx) {
+function create_fragment$F(ctx) {
 	let div;
 	let t;
 	let div_style_value;
@@ -1343,7 +1343,7 @@ function create_fragment$E(ctx) {
 	};
 }
 
-function instance$z($$self, $$props, $$invalidate) {
+function instance$A($$self, $$props, $$invalidate) {
 	let showIcon;
 	let iconType;
 	const [Types, validateType] = typeValidator("Badge type", ["success", "important", "information", "emergency", "dark", "midtone", "light"], true);
@@ -1411,8 +1411,8 @@ class Badge extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$z,
-			create_fragment$E,
+			instance$A,
+			create_fragment$F,
 			safe_not_equal,
 			{
 				type: 0,
@@ -1520,7 +1520,7 @@ customElements.define("goa-badge", Badge);
 
 /* libs/web-components/src/components/block/Block.svelte generated by Svelte v3.51.0 */
 
-function create_fragment$D(ctx) {
+function create_fragment$E(ctx) {
 	let div;
 	let slot;
 	let div_style_value;
@@ -1561,7 +1561,7 @@ function create_fragment$D(ctx) {
 	};
 }
 
-function instance$y($$self, $$props, $$invalidate) {
+function instance$z($$self, $$props, $$invalidate) {
 	let { gap = "m" } = $$props;
 	let { direction = "row" } = $$props;
 	let { alignment = "start" } = $$props;
@@ -1595,8 +1595,8 @@ class Block extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$y,
-			create_fragment$D,
+			instance$z,
+			create_fragment$E,
 			safe_not_equal,
 			{
 				gap: 0,
@@ -1692,191 +1692,6 @@ class Block extends SvelteElement {
 
 customElements.define("goa-block", Block);
 
-/* libs/web-components/src/components/button-group/ButtonGroup.svelte generated by Svelte v3.51.0 */
-
-function create_fragment$C(ctx) {
-	let div;
-	let slot;
-	let div_style_value;
-
-	return {
-		c() {
-			div = element("div");
-			slot = element("slot");
-			this.c = noop;
-			attr(div, "data-testid", /*testid*/ ctx[1]);
-			attr(div, "style", div_style_value = "" + (calculateMargin(/*mt*/ ctx[2], /*mr*/ ctx[3], /*mb*/ ctx[4], /*ml*/ ctx[5]) + "; --alignment: " + /*_alignment*/ ctx[6] + "; --gap-size: " + (/*gap*/ ctx[0] === "relaxed" ? "1rem" : "0.75rem")));
-		},
-		m(target, anchor) {
-			insert(target, div, anchor);
-			append(div, slot);
-		},
-		p(ctx, [dirty]) {
-			if (dirty & /*testid*/ 2) {
-				attr(div, "data-testid", /*testid*/ ctx[1]);
-			}
-
-			if (dirty & /*mt, mr, mb, ml, _alignment, gap*/ 125 && div_style_value !== (div_style_value = "" + (calculateMargin(/*mt*/ ctx[2], /*mr*/ ctx[3], /*mb*/ ctx[4], /*ml*/ ctx[5]) + "; --alignment: " + /*_alignment*/ ctx[6] + "; --gap-size: " + (/*gap*/ ctx[0] === "relaxed" ? "1rem" : "0.75rem")))) {
-				attr(div, "style", div_style_value);
-			}
-		},
-		i: noop,
-		o: noop,
-		d(detaching) {
-			if (detaching) detach(div);
-		}
-	};
-}
-
-function instance$x($$self, $$props, $$invalidate) {
-	let _alignment;
-	let { alignment = "start" } = $$props;
-	let { gap = "relaxed" } = $$props;
-	let { testid = "" } = $$props;
-	let { mt = null } = $$props;
-	let { mr = null } = $$props;
-	let { mb = null } = $$props;
-	let { ml = null } = $$props;
-	const [BUTTON_ALIGNMENTS, validateAlignment] = typeValidator("alignment", ["start", "end", "center"]);
-	const [GAPS, validateGap] = typeValidator("gap", ["relaxed", "compact"]);
-
-	onMount(() => {
-		validateAlignment(alignment);
-		validateGap(gap);
-	});
-
-	$$self.$$set = $$props => {
-		if ('alignment' in $$props) $$invalidate(7, alignment = $$props.alignment);
-		if ('gap' in $$props) $$invalidate(0, gap = $$props.gap);
-		if ('testid' in $$props) $$invalidate(1, testid = $$props.testid);
-		if ('mt' in $$props) $$invalidate(2, mt = $$props.mt);
-		if ('mr' in $$props) $$invalidate(3, mr = $$props.mr);
-		if ('mb' in $$props) $$invalidate(4, mb = $$props.mb);
-		if ('ml' in $$props) $$invalidate(5, ml = $$props.ml);
-	};
-
-	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*alignment*/ 128) {
-			$$invalidate(6, _alignment = ({
-				start: "flex-start",
-				end: "flex-end",
-				center: "center"
-			})[alignment]);
-		}
-	};
-
-	return [gap, testid, mt, mr, mb, ml, _alignment, alignment];
-}
-
-class ButtonGroup extends SvelteElement {
-	constructor(options) {
-		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}div{display:flex;flex-direction:row;justify-content:var(--alignment);align-items:center;flex-wrap:wrap;gap:var(--gap-size);padding:3px 0}</style>`;
-
-		init(
-			this,
-			{
-				target: this.shadowRoot,
-				props: attribute_to_object(this.attributes),
-				customElement: true
-			},
-			instance$x,
-			create_fragment$C,
-			safe_not_equal,
-			{
-				alignment: 7,
-				gap: 0,
-				testid: 1,
-				mt: 2,
-				mr: 3,
-				mb: 4,
-				ml: 5
-			},
-			null
-		);
-
-		if (options) {
-			if (options.target) {
-				insert(options.target, this, options.anchor);
-			}
-
-			if (options.props) {
-				this.$set(options.props);
-				flush();
-			}
-		}
-	}
-
-	static get observedAttributes() {
-		return ["alignment", "gap", "testid", "mt", "mr", "mb", "ml"];
-	}
-
-	get alignment() {
-		return this.$$.ctx[7];
-	}
-
-	set alignment(alignment) {
-		this.$$set({ alignment });
-		flush();
-	}
-
-	get gap() {
-		return this.$$.ctx[0];
-	}
-
-	set gap(gap) {
-		this.$$set({ gap });
-		flush();
-	}
-
-	get testid() {
-		return this.$$.ctx[1];
-	}
-
-	set testid(testid) {
-		this.$$set({ testid });
-		flush();
-	}
-
-	get mt() {
-		return this.$$.ctx[2];
-	}
-
-	set mt(mt) {
-		this.$$set({ mt });
-		flush();
-	}
-
-	get mr() {
-		return this.$$.ctx[3];
-	}
-
-	set mr(mr) {
-		this.$$set({ mr });
-		flush();
-	}
-
-	get mb() {
-		return this.$$.ctx[4];
-	}
-
-	set mb(mb) {
-		this.$$set({ mb });
-		flush();
-	}
-
-	get ml() {
-		return this.$$.ctx[5];
-	}
-
-	set ml(ml) {
-		this.$$set({ ml });
-		flush();
-	}
-}
-
-customElements.define("goa-button-group", ButtonGroup);
-
 /* libs/web-components/src/components/button/Button.svelte generated by Svelte v3.51.0 */
 
 function create_else_block$2(ctx) {
@@ -2031,7 +1846,7 @@ function create_if_block_1$9(ctx) {
 	};
 }
 
-function create_fragment$B(ctx) {
+function create_fragment$D(ctx) {
 	let button;
 	let button_class_value;
 	let button_style_value;
@@ -2124,7 +1939,7 @@ function clickHandler(e) {
 	e.stopPropagation();
 }
 
-function instance$w($$self, $$props, $$invalidate) {
+function instance$y($$self, $$props, $$invalidate) {
 	let isDisabled;
 	let isButtonDark;
 	const [Types, validateType] = typeValidator("Button type", ["primary", "submit", "secondary", "tertiary", "start"], true);
@@ -2205,8 +2020,8 @@ class Button extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$w,
-			create_fragment$B,
+			instance$y,
+			create_fragment$D,
 			safe_not_equal,
 			{
 				type: 0,
@@ -2354,39 +2169,224 @@ class Button extends SvelteElement {
 
 customElements.define("goa-button", Button);
 
-/* libs/web-components/src/components/callout/Callout.svelte generated by Svelte v3.51.0 */
+/* libs/web-components/src/components/button-group/ButtonGroup.svelte generated by Svelte v3.51.0 */
 
-function create_if_block$e(ctx) {
-	let h3;
-	let t;
+function create_fragment$C(ctx) {
+	let div;
+	let slot;
+	let div_style_value;
 
 	return {
 		c() {
-			h3 = element("h3");
-			t = text(/*heading*/ ctx[5]);
+			div = element("div");
+			slot = element("slot");
+			this.c = noop;
+			attr(div, "data-testid", /*testid*/ ctx[1]);
+			attr(div, "style", div_style_value = "" + (calculateMargin(/*mt*/ ctx[2], /*mr*/ ctx[3], /*mb*/ ctx[4], /*ml*/ ctx[5]) + "; --alignment: " + /*_alignment*/ ctx[6] + "; --gap-size: " + (/*gap*/ ctx[0] === "relaxed" ? "1rem" : "0.75rem")));
 		},
 		m(target, anchor) {
-			insert(target, h3, anchor);
-			append(h3, t);
+			insert(target, div, anchor);
+			append(div, slot);
 		},
-		p(ctx, dirty) {
-			if (dirty & /*heading*/ 32) set_data(t, /*heading*/ ctx[5]);
+		p(ctx, [dirty]) {
+			if (dirty & /*testid*/ 2) {
+				attr(div, "data-testid", /*testid*/ ctx[1]);
+			}
+
+			if (dirty & /*mt, mr, mb, ml, _alignment, gap*/ 125 && div_style_value !== (div_style_value = "" + (calculateMargin(/*mt*/ ctx[2], /*mr*/ ctx[3], /*mb*/ ctx[4], /*ml*/ ctx[5]) + "; --alignment: " + /*_alignment*/ ctx[6] + "; --gap-size: " + (/*gap*/ ctx[0] === "relaxed" ? "1rem" : "0.75rem")))) {
+				attr(div, "style", div_style_value);
+			}
 		},
+		i: noop,
+		o: noop,
 		d(detaching) {
-			if (detaching) detach(h3);
+			if (detaching) detach(div);
 		}
 	};
 }
 
-function create_fragment$A(ctx) {
-	let div;
-	let span0;
-	let goa_icon;
-	let goa_icon_inverted_value;
-	let span0_class_value;
-	let t0;
-	let span1;
-	let t1;
+function instance$x($$self, $$props, $$invalidate) {
+	let _alignment;
+	let { alignment = "start" } = $$props;
+	let { gap = "relaxed" } = $$props;
+	let { testid = "" } = $$props;
+	let { mt = null } = $$props;
+	let { mr = null } = $$props;
+	let { mb = null } = $$props;
+	let { ml = null } = $$props;
+	const [BUTTON_ALIGNMENTS, validateAlignment] = typeValidator("alignment", ["start", "end", "center"]);
+	const [GAPS, validateGap] = typeValidator("gap", ["relaxed", "compact"]);
+
+	onMount(() => {
+		validateAlignment(alignment);
+		validateGap(gap);
+	});
+
+	$$self.$$set = $$props => {
+		if ('alignment' in $$props) $$invalidate(7, alignment = $$props.alignment);
+		if ('gap' in $$props) $$invalidate(0, gap = $$props.gap);
+		if ('testid' in $$props) $$invalidate(1, testid = $$props.testid);
+		if ('mt' in $$props) $$invalidate(2, mt = $$props.mt);
+		if ('mr' in $$props) $$invalidate(3, mr = $$props.mr);
+		if ('mb' in $$props) $$invalidate(4, mb = $$props.mb);
+		if ('ml' in $$props) $$invalidate(5, ml = $$props.ml);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*alignment*/ 128) {
+			$$invalidate(6, _alignment = ({
+				start: "flex-start",
+				end: "flex-end",
+				center: "center"
+			})[alignment]);
+		}
+	};
+
+	return [gap, testid, mt, mr, mb, ml, _alignment, alignment];
+}
+
+class ButtonGroup extends SvelteElement {
+	constructor(options) {
+		super();
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}div{display:flex;flex-direction:row;justify-content:var(--alignment);align-items:center;flex-wrap:wrap;gap:var(--gap-size);padding:3px 0}</style>`;
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance$x,
+			create_fragment$C,
+			safe_not_equal,
+			{
+				alignment: 7,
+				gap: 0,
+				testid: 1,
+				mt: 2,
+				mr: 3,
+				mb: 4,
+				ml: 5
+			},
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return ["alignment", "gap", "testid", "mt", "mr", "mb", "ml"];
+	}
+
+	get alignment() {
+		return this.$$.ctx[7];
+	}
+
+	set alignment(alignment) {
+		this.$$set({ alignment });
+		flush();
+	}
+
+	get gap() {
+		return this.$$.ctx[0];
+	}
+
+	set gap(gap) {
+		this.$$set({ gap });
+		flush();
+	}
+
+	get testid() {
+		return this.$$.ctx[1];
+	}
+
+	set testid(testid) {
+		this.$$set({ testid });
+		flush();
+	}
+
+	get mt() {
+		return this.$$.ctx[2];
+	}
+
+	set mt(mt) {
+		this.$$set({ mt });
+		flush();
+	}
+
+	get mr() {
+		return this.$$.ctx[3];
+	}
+
+	set mr(mr) {
+		this.$$set({ mr });
+		flush();
+	}
+
+	get mb() {
+		return this.$$.ctx[4];
+	}
+
+	set mb(mb) {
+		this.$$set({ mb });
+		flush();
+	}
+
+	get ml() {
+		return this.$$.ctx[5];
+	}
+
+	set ml(ml) {
+		this.$$set({ ml });
+		flush();
+	}
+}
+
+customElements.define("goa-button-group", ButtonGroup);
+
+/* libs/web-components/src/components/callout/Callout.svelte generated by Svelte v3.51.0 */
+
+function create_if_block$e(ctx) {
+	let h3;
+	let t;
+
+	return {
+		c() {
+			h3 = element("h3");
+			t = text(/*heading*/ ctx[5]);
+		},
+		m(target, anchor) {
+			insert(target, h3, anchor);
+			append(h3, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*heading*/ 32) set_data(t, /*heading*/ ctx[5]);
+		},
+		d(detaching) {
+			if (detaching) detach(h3);
+		}
+	};
+}
+
+function create_fragment$B(ctx) {
+	let div;
+	let span0;
+	let goa_icon;
+	let goa_icon_inverted_value;
+	let span0_class_value;
+	let t0;
+	let span1;
+	let t1;
 	let slot;
 	let div_style_value;
 	let if_block = /*heading*/ ctx[5] && create_if_block$e(ctx);
@@ -2463,7 +2463,7 @@ function create_fragment$A(ctx) {
 	};
 }
 
-function instance$v($$self, $$props, $$invalidate) {
+function instance$w($$self, $$props, $$invalidate) {
 	let iconType;
 	const [Types, validateType] = typeValidator("Callout type", ["emergency", "important", "information", "event", "success"], true);
 	let { mt = null } = $$props;
@@ -2517,8 +2517,8 @@ class Callout extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$v,
-			create_fragment$A,
+			instance$w,
+			create_fragment$B,
 			safe_not_equal,
 			{
 				mt: 0,
@@ -2616,7 +2616,7 @@ customElements.define("goa-callout", Callout);
 
 /* libs/web-components/src/components/card-actions/CardActions.svelte generated by Svelte v3.51.0 */
 
-function create_fragment$z(ctx) {
+function create_fragment$A(ctx) {
 	let goa_card_content;
 
 	return {
@@ -2649,7 +2649,7 @@ class CardActions extends SvelteElement {
 				customElement: true
 			},
 			null,
-			create_fragment$z,
+			create_fragment$A,
 			safe_not_equal,
 			{},
 			null
@@ -2665,22 +2665,40 @@ class CardActions extends SvelteElement {
 
 customElements.define("goa-card-actions", CardActions);
 
-/* libs/web-components/src/components/card-content/CardContent.svelte generated by Svelte v3.51.0 */
+/* libs/web-components/src/components/card/Card.svelte generated by Svelte v3.51.0 */
 
-function create_fragment$y(ctx) {
+function create_fragment$z(ctx) {
 	let div;
+	let slot;
+	let div_style_value;
 
 	return {
 		c() {
 			div = element("div");
-			div.innerHTML = `<slot></slot>`;
+			slot = element("slot");
 			this.c = noop;
-			attr(div, "class", "card-content");
+			attr(div, "data-testid", /*testid*/ ctx[7]);
+			attr(div, "class", "card");
+
+			attr(div, "style", div_style_value = "--width: " + /*width*/ ctx[1] + "; --height: " + (/*height*/ ctx[2] === 'auto' ? 'auto' : '100%') + "; " + calculateMargin(/*mt*/ ctx[3], /*mr*/ ctx[4], /*mb*/ ctx[5], /*ml*/ ctx[6]) + " " + (/*elevation*/ ctx[0] === 0
+			? `border: 1px solid var(--color-gray-200);`
+			: `box-shadow: var(--shadow-${/*elevation*/ ctx[0]});`) + "");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
+			append(div, slot);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*testid*/ 128) {
+				attr(div, "data-testid", /*testid*/ ctx[7]);
+			}
+
+			if (dirty & /*width, height, mt, mr, mb, ml, elevation*/ 127 && div_style_value !== (div_style_value = "--width: " + /*width*/ ctx[1] + "; --height: " + (/*height*/ ctx[2] === 'auto' ? 'auto' : '100%') + "; " + calculateMargin(/*mt*/ ctx[3], /*mr*/ ctx[4], /*mb*/ ctx[5], /*ml*/ ctx[6]) + " " + (/*elevation*/ ctx[0] === 0
+			? `border: 1px solid var(--color-gray-200);`
+			: `box-shadow: var(--shadow-${/*elevation*/ ctx[0]});`) + "")) {
+				attr(div, "style", div_style_value);
+			}
 		},
-		p: noop,
 		i: noop,
 		o: noop,
 		d(detaching) {
@@ -2689,10 +2707,34 @@ function create_fragment$y(ctx) {
 	};
 }
 
-class CardContent extends SvelteElement {
+function instance$v($$self, $$props, $$invalidate) {
+	let { elevation = 0 } = $$props;
+	let { width = "100%" } = $$props;
+	let { height = "auto" } = $$props;
+	let { mt = null } = $$props;
+	let { mr = null } = $$props;
+	let { mb = null } = $$props;
+	let { ml = null } = $$props;
+	let { testid = "" } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('elevation' in $$props) $$invalidate(0, elevation = $$props.elevation);
+		if ('width' in $$props) $$invalidate(1, width = $$props.width);
+		if ('height' in $$props) $$invalidate(2, height = $$props.height);
+		if ('mt' in $$props) $$invalidate(3, mt = $$props.mt);
+		if ('mr' in $$props) $$invalidate(4, mr = $$props.mr);
+		if ('mb' in $$props) $$invalidate(5, mb = $$props.mb);
+		if ('ml' in $$props) $$invalidate(6, ml = $$props.ml);
+		if ('testid' in $$props) $$invalidate(7, testid = $$props.testid);
+	};
+
+	return [elevation, width, height, mt, mr, mb, ml, testid];
+}
+
+class Card extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.card-content{padding:1rem}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.card{background-color:var(--color-white);border-radius:4px;overflow:hidden;height:var(--height)}@media(min-width: 320px){.card{margin:0 auto}}</style>`;
 
 		init(
 			this,
@@ -2701,26 +2743,116 @@ class CardContent extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			null,
-			create_fragment$y,
+			instance$v,
+			create_fragment$z,
 			safe_not_equal,
-			{},
-			null
-		);
-
+			{
+				elevation: 0,
+				width: 1,
+				height: 2,
+				mt: 3,
+				mr: 4,
+				mb: 5,
+				ml: 6,
+				testid: 7
+			},
+			null
+		);
+
 		if (options) {
 			if (options.target) {
 				insert(options.target, this, options.anchor);
 			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
 		}
 	}
+
+	static get observedAttributes() {
+		return ["elevation", "width", "height", "mt", "mr", "mb", "ml", "testid"];
+	}
+
+	get elevation() {
+		return this.$$.ctx[0];
+	}
+
+	set elevation(elevation) {
+		this.$$set({ elevation });
+		flush();
+	}
+
+	get width() {
+		return this.$$.ctx[1];
+	}
+
+	set width(width) {
+		this.$$set({ width });
+		flush();
+	}
+
+	get height() {
+		return this.$$.ctx[2];
+	}
+
+	set height(height) {
+		this.$$set({ height });
+		flush();
+	}
+
+	get mt() {
+		return this.$$.ctx[3];
+	}
+
+	set mt(mt) {
+		this.$$set({ mt });
+		flush();
+	}
+
+	get mr() {
+		return this.$$.ctx[4];
+	}
+
+	set mr(mr) {
+		this.$$set({ mr });
+		flush();
+	}
+
+	get mb() {
+		return this.$$.ctx[5];
+	}
+
+	set mb(mb) {
+		this.$$set({ mb });
+		flush();
+	}
+
+	get ml() {
+		return this.$$.ctx[6];
+	}
+
+	set ml(ml) {
+		this.$$set({ ml });
+		flush();
+	}
+
+	get testid() {
+		return this.$$.ctx[7];
+	}
+
+	set testid(testid) {
+		this.$$set({ testid });
+		flush();
+	}
 }
 
-customElements.define("goa-card-content", CardContent);
+customElements.define("goa-card", Card);
 
-/* libs/web-components/src/components/card-group/CardGroup.svelte generated by Svelte v3.51.0 */
+/* libs/web-components/src/components/card-content/CardContent.svelte generated by Svelte v3.51.0 */
 
-function create_fragment$x(ctx) {
+function create_fragment$y(ctx) {
 	let div;
 
 	return {
@@ -2728,7 +2860,7 @@ function create_fragment$x(ctx) {
 			div = element("div");
 			div.innerHTML = `<slot></slot>`;
 			this.c = noop;
-			attr(div, "class", "card-group");
+			attr(div, "class", "card-content");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -2742,10 +2874,10 @@ function create_fragment$x(ctx) {
 	};
 }
 
-class CardGroup extends SvelteElement {
+class CardContent extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.card-group{display:flex;flex-wrap:wrap;justify-content:space-around;gap:1rem;width:100%}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.card-content{padding:1rem}</style>`;
 
 		init(
 			this,
@@ -2755,7 +2887,7 @@ class CardGroup extends SvelteElement {
 				customElement: true
 			},
 			null,
-			create_fragment$x,
+			create_fragment$y,
 			safe_not_equal,
 			{},
 			null
@@ -2769,34 +2901,24 @@ class CardGroup extends SvelteElement {
 	}
 }
 
-customElements.define("goa-card-group", CardGroup);
+customElements.define("goa-card-content", CardContent);
 
-/* libs/web-components/src/components/card-image/CardImage.svelte generated by Svelte v3.51.0 */
+/* libs/web-components/src/components/card-group/CardGroup.svelte generated by Svelte v3.51.0 */
 
-function create_fragment$w(ctx) {
+function create_fragment$x(ctx) {
 	let div;
 
 	return {
 		c() {
 			div = element("div");
+			div.innerHTML = `<slot></slot>`;
 			this.c = noop;
-			set_style(div, "background-image", "url(" + /*src*/ ctx[0] + ")");
-			set_style(div, "height", /*height*/ ctx[1]);
-			set_style(div, "background-size", "cover");
-			set_style(div, "background-position", "center");
+			attr(div, "class", "card-group");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
 		},
-		p(ctx, [dirty]) {
-			if (dirty & /*src*/ 1) {
-				set_style(div, "background-image", "url(" + /*src*/ ctx[0] + ")");
-			}
-
-			if (dirty & /*height*/ 2) {
-				set_style(div, "height", /*height*/ ctx[1]);
-			}
-		},
+		p: noop,
 		i: noop,
 		o: noop,
 		d(detaching) {
@@ -2805,22 +2927,10 @@ function create_fragment$w(ctx) {
 	};
 }
 
-function instance$u($$self, $$props, $$invalidate) {
-	let { src } = $$props;
-	let { height = "100%" } = $$props;
-
-	$$self.$$set = $$props => {
-		if ('src' in $$props) $$invalidate(0, src = $$props.src);
-		if ('height' in $$props) $$invalidate(1, height = $$props.height);
-	};
-
-	return [src, height];
-}
-
-class CardImage extends SvelteElement {
+class CardGroup extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.card-group{display:flex;flex-wrap:wrap;justify-content:space-around;gap:1rem;width:100%}</style>`;
 
 		init(
 			this,
@@ -2829,10 +2939,10 @@ class CardImage extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$u,
-			create_fragment$w,
+			null,
+			create_fragment$x,
 			safe_not_equal,
-			{ src: 0, height: 1 },
+			{},
 			null
 		);
 
@@ -2840,71 +2950,36 @@ class CardImage extends SvelteElement {
 			if (options.target) {
 				insert(options.target, this, options.anchor);
 			}
-
-			if (options.props) {
-				this.$set(options.props);
-				flush();
-			}
 		}
 	}
-
-	static get observedAttributes() {
-		return ["src", "height"];
-	}
-
-	get src() {
-		return this.$$.ctx[0];
-	}
-
-	set src(src) {
-		this.$$set({ src });
-		flush();
-	}
-
-	get height() {
-		return this.$$.ctx[1];
-	}
-
-	set height(height) {
-		this.$$set({ height });
-		flush();
-	}
 }
 
-customElements.define("goa-card-image", CardImage);
+customElements.define("goa-card-group", CardGroup);
 
-/* libs/web-components/src/components/card/Card.svelte generated by Svelte v3.51.0 */
+/* libs/web-components/src/components/card-image/CardImage.svelte generated by Svelte v3.51.0 */
 
-function create_fragment$v(ctx) {
+function create_fragment$w(ctx) {
 	let div;
-	let slot;
-	let div_style_value;
 
 	return {
 		c() {
 			div = element("div");
-			slot = element("slot");
 			this.c = noop;
-			attr(div, "data-testid", /*testid*/ ctx[7]);
-			attr(div, "class", "card");
-
-			attr(div, "style", div_style_value = "--width: " + /*width*/ ctx[1] + "; --height: " + (/*height*/ ctx[2] === 'auto' ? 'auto' : '100%') + "; " + calculateMargin(/*mt*/ ctx[3], /*mr*/ ctx[4], /*mb*/ ctx[5], /*ml*/ ctx[6]) + " " + (/*elevation*/ ctx[0] === 0
-			? `border: 1px solid var(--color-gray-200);`
-			: `box-shadow: var(--shadow-${/*elevation*/ ctx[0]});`) + "");
+			set_style(div, "background-image", "url(" + /*src*/ ctx[0] + ")");
+			set_style(div, "height", /*height*/ ctx[1]);
+			set_style(div, "background-size", "cover");
+			set_style(div, "background-position", "center");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
-			append(div, slot);
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*testid*/ 128) {
-				attr(div, "data-testid", /*testid*/ ctx[7]);
+			if (dirty & /*src*/ 1) {
+				set_style(div, "background-image", "url(" + /*src*/ ctx[0] + ")");
 			}
 
-			if (dirty & /*width, height, mt, mr, mb, ml, elevation*/ 127 && div_style_value !== (div_style_value = "--width: " + /*width*/ ctx[1] + "; --height: " + (/*height*/ ctx[2] === 'auto' ? 'auto' : '100%') + "; " + calculateMargin(/*mt*/ ctx[3], /*mr*/ ctx[4], /*mb*/ ctx[5], /*ml*/ ctx[6]) + " " + (/*elevation*/ ctx[0] === 0
-			? `border: 1px solid var(--color-gray-200);`
-			: `box-shadow: var(--shadow-${/*elevation*/ ctx[0]});`) + "")) {
-				attr(div, "style", div_style_value);
+			if (dirty & /*height*/ 2) {
+				set_style(div, "height", /*height*/ ctx[1]);
 			}
 		},
 		i: noop,
@@ -2915,34 +2990,22 @@ function create_fragment$v(ctx) {
 	};
 }
 
-function instance$t($$self, $$props, $$invalidate) {
-	let { elevation = 0 } = $$props;
-	let { width = "100%" } = $$props;
-	let { height = "auto" } = $$props;
-	let { mt = null } = $$props;
-	let { mr = null } = $$props;
-	let { mb = null } = $$props;
-	let { ml = null } = $$props;
-	let { testid = "" } = $$props;
+function instance$u($$self, $$props, $$invalidate) {
+	let { src } = $$props;
+	let { height = "100%" } = $$props;
 
 	$$self.$$set = $$props => {
-		if ('elevation' in $$props) $$invalidate(0, elevation = $$props.elevation);
-		if ('width' in $$props) $$invalidate(1, width = $$props.width);
-		if ('height' in $$props) $$invalidate(2, height = $$props.height);
-		if ('mt' in $$props) $$invalidate(3, mt = $$props.mt);
-		if ('mr' in $$props) $$invalidate(4, mr = $$props.mr);
-		if ('mb' in $$props) $$invalidate(5, mb = $$props.mb);
-		if ('ml' in $$props) $$invalidate(6, ml = $$props.ml);
-		if ('testid' in $$props) $$invalidate(7, testid = $$props.testid);
+		if ('src' in $$props) $$invalidate(0, src = $$props.src);
+		if ('height' in $$props) $$invalidate(1, height = $$props.height);
 	};
 
-	return [elevation, width, height, mt, mr, mb, ml, testid];
+	return [src, height];
 }
 
-class Card extends SvelteElement {
+class CardImage extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.card{background-color:var(--color-white);border-radius:4px;overflow:hidden;height:var(--height)}@media(min-width: 320px){.card{margin:0 auto}}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}</style>`;
 
 		init(
 			this,
@@ -2951,19 +3014,10 @@ class Card extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$t,
-			create_fragment$v,
+			instance$u,
+			create_fragment$w,
 			safe_not_equal,
-			{
-				elevation: 0,
-				width: 1,
-				height: 2,
-				mt: 3,
-				mr: 4,
-				mb: 5,
-				ml: 6,
-				testid: 7
-			},
+			{ src: 0, height: 1 },
 			null
 		);
 
@@ -2980,83 +3034,29 @@ class Card extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["elevation", "width", "height", "mt", "mr", "mb", "ml", "testid"];
+		return ["src", "height"];
 	}
 
-	get elevation() {
+	get src() {
 		return this.$$.ctx[0];
 	}
 
-	set elevation(elevation) {
-		this.$$set({ elevation });
-		flush();
-	}
-
-	get width() {
-		return this.$$.ctx[1];
-	}
-
-	set width(width) {
-		this.$$set({ width });
+	set src(src) {
+		this.$$set({ src });
 		flush();
 	}
 
 	get height() {
-		return this.$$.ctx[2];
+		return this.$$.ctx[1];
 	}
 
 	set height(height) {
 		this.$$set({ height });
 		flush();
 	}
-
-	get mt() {
-		return this.$$.ctx[3];
-	}
-
-	set mt(mt) {
-		this.$$set({ mt });
-		flush();
-	}
-
-	get mr() {
-		return this.$$.ctx[4];
-	}
-
-	set mr(mr) {
-		this.$$set({ mr });
-		flush();
-	}
-
-	get mb() {
-		return this.$$.ctx[5];
-	}
-
-	set mb(mb) {
-		this.$$set({ mb });
-		flush();
-	}
-
-	get ml() {
-		return this.$$.ctx[6];
-	}
-
-	set ml(ml) {
-		this.$$set({ ml });
-		flush();
-	}
-
-	get testid() {
-		return this.$$.ctx[7];
-	}
-
-	set testid(testid) {
-		this.$$set({ testid });
-		flush();
-	}
 }
 
-customElements.define("goa-card", Card);
+customElements.define("goa-card-image", CardImage);
 
 /* libs/web-components/src/components/checkbox/Checkbox.svelte generated by Svelte v3.51.0 */
 
@@ -3110,7 +3110,7 @@ function create_if_block$d(ctx) {
 	};
 }
 
-function create_fragment$u(ctx) {
+function create_fragment$v(ctx) {
 	let label;
 	let div0;
 	let input;
@@ -3255,7 +3255,7 @@ function create_fragment$u(ctx) {
 	};
 }
 
-function instance$s($$self, $$props, $$invalidate) {
+function instance$t($$self, $$props, $$invalidate) {
 	let isDisabled;
 	let isError;
 	let isChecked;
@@ -3367,8 +3367,8 @@ class Checkbox extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$s,
-			create_fragment$u,
+			instance$t,
+			create_fragment$v,
 			safe_not_equal,
 			{
 				name: 0,
@@ -3597,7 +3597,7 @@ function create_if_block$c(ctx) {
 	};
 }
 
-function create_fragment$t(ctx) {
+function create_fragment$u(ctx) {
 	let div1;
 	let t0;
 	let div0;
@@ -3712,7 +3712,7 @@ function create_fragment$t(ctx) {
 	};
 }
 
-function instance$r($$self, $$props, $$invalidate) {
+function instance$s($$self, $$props, $$invalidate) {
 	let { mt = null } = $$props;
 	let { mr = null } = $$props;
 	let { mb = null } = $$props;
@@ -3809,8 +3809,8 @@ class Chip extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$r,
-			create_fragment$t,
+			instance$s,
+			create_fragment$u,
 			safe_not_equal,
 			{
 				mt: 0,
@@ -4318,7 +4318,7 @@ function create_if_block_2$5(ctx) {
 	};
 }
 
-function create_fragment$s(ctx) {
+function create_fragment$t(ctx) {
 	let if_block_anchor;
 	let current;
 	let if_block = /*isVisible*/ ctx[5] && create_if_block$b(ctx);
@@ -4374,7 +4374,7 @@ function create_fragment$s(ctx) {
 	};
 }
 
-function instance$q($$self, $$props, $$invalidate) {
+function instance$r($$self, $$props, $$invalidate) {
 	let isVisible;
 	const [Variants, validateVariant] = typeValidator("Circular progress variant", ["fullscreen", "inline"]);
 	const [Sizes, validateSize] = typeValidator("Button size", ["small", "large"]);
@@ -4434,8 +4434,8 @@ class CircularProgress extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$q,
-			create_fragment$s,
+			instance$r,
+			create_fragment$t,
 			safe_not_equal,
 			{
 				variant: 6,
@@ -4513,7 +4513,7 @@ customElements.define("goa-circular-progress", CircularProgress);
 
 /* libs/web-components/src/components/container/Container.svelte generated by Svelte v3.51.0 */
 
-function create_fragment$r(ctx) {
+function create_fragment$s(ctx) {
 	let div3;
 	let header;
 	let div0;
@@ -4591,7 +4591,7 @@ function create_fragment$r(ctx) {
 	};
 }
 
-function instance$p($$self, $$props, $$invalidate) {
+function instance$q($$self, $$props, $$invalidate) {
 	const [Types, validateType] = typeValidator("Container type", ["interactive", "info", "error", "success", "important", "non-interactive"]);
 	const [Accents, validateAccent] = typeValidator("Container accent", ["thick", "thin", "filled"]);
 	const [Paddings, validatePadding] = typeValidator("Container padding", ["relaxed", "compact"]);
@@ -4636,8 +4636,8 @@ class Container extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$p,
-			create_fragment$r,
+			instance$q,
+			create_fragment$s,
 			safe_not_equal,
 			{
 				type: 0,
@@ -4745,7 +4745,7 @@ customElements.define("goa-container", Container);
 
 /* libs/web-components/src/components/divider/Divider.svelte generated by Svelte v3.51.0 */
 
-function create_fragment$q(ctx) {
+function create_fragment$r(ctx) {
 	let hr;
 	let hr_style_value;
 
@@ -4776,7 +4776,7 @@ function create_fragment$q(ctx) {
 	};
 }
 
-function instance$o($$self, $$props, $$invalidate) {
+function instance$p($$self, $$props, $$invalidate) {
 	let { testid = "" } = $$props;
 	let { mt = null } = $$props;
 	let { mr = null } = $$props;
@@ -4806,8 +4806,8 @@ class Divider extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$o,
-			create_fragment$q,
+			instance$p,
+			create_fragment$r,
 			safe_not_equal,
 			{ testid: 0, mt: 1, mr: 2, mb: 3, ml: 4 },
 			null
@@ -4960,6 +4960,120 @@ function deleteContext(name) {
   delete stores[name];
 }
 
+/* libs/web-components/src/components/dropdown/DropdownItem.svelte generated by Svelte v3.51.0 */
+
+function create_fragment$q(ctx) {
+	return {
+		c() {
+			this.c = noop;
+		},
+		m: noop,
+		p: noop,
+		i: noop,
+		o: noop,
+		d: noop
+	};
+}
+
+function instance$o($$self, $$props, $$invalidate) {
+	let { name = "" } = $$props;
+	let { value = "" } = $$props;
+	let { label = "" } = $$props;
+
+	// private
+	let ctx;
+
+	let isBound = false;
+
+	$$self.$$set = $$props => {
+		if ('name' in $$props) $$invalidate(0, name = $$props.name);
+		if ('value' in $$props) $$invalidate(1, value = $$props.value);
+		if ('label' in $$props) $$invalidate(2, label = $$props.label);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*isBound, name, ctx, label, value*/ 31) {
+			{
+				(async () => {
+					await tick();
+
+					if (!isBound) {
+						$$invalidate(4, isBound = true);
+						$$invalidate(3, ctx = getContext(name));
+						ctx.notify({ type: "bind", name, label, value });
+					}
+				})();
+			}
+		}
+	};
+
+	return [name, value, label, ctx, isBound];
+}
+
+class DropdownItem extends SvelteElement {
+	constructor(options) {
+		super();
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance$o,
+			create_fragment$q,
+			safe_not_equal,
+			{ name: 0, value: 1, label: 2 },
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return ["name", "value", "label"];
+	}
+
+	get name() {
+		return this.$$.ctx[0];
+	}
+
+	set name(name) {
+		this.$$set({ name });
+		flush();
+	}
+
+	get value() {
+		return this.$$.ctx[1];
+	}
+
+	set value(value) {
+		this.$$set({ value });
+		flush();
+	}
+
+	get label() {
+		return this.$$.ctx[2];
+	}
+
+	set label(label) {
+		this.$$set({ label });
+		flush();
+	}
+}
+
+customElements.define("goa-dropdown-item", DropdownItem);
+
 /* libs/web-components/src/components/dropdown/Dropdown.svelte generated by Svelte v3.51.0 */
 
 function get_each_context_1(ctx, list, i) {
@@ -5908,175 +6022,61 @@ class Dropdown extends SvelteElement {
 	}
 
 	set multiselect(multiselect) {
-		this.$$set({ multiselect });
-		flush();
-	}
-
-	get native() {
-		return this.$$.ctx[27];
-	}
-
-	set native(native) {
-		this.$$set({ native });
-		flush();
-	}
-
-	get mt() {
-		return this.$$.ctx[9];
-	}
-
-	set mt(mt) {
-		this.$$set({ mt });
-		flush();
-	}
-
-	get mr() {
-		return this.$$.ctx[10];
-	}
-
-	set mr(mr) {
-		this.$$set({ mr });
-		flush();
-	}
-
-	get mb() {
-		return this.$$.ctx[11];
-	}
-
-	set mb(mb) {
-		this.$$set({ mb });
-		flush();
-	}
-
-	get ml() {
-		return this.$$.ctx[12];
-	}
-
-	set ml(ml) {
-		this.$$set({ ml });
-		flush();
-	}
-}
-
-customElements.define("goa-dropdown", Dropdown);
-
-/* libs/web-components/src/components/dropdown/DropdownItem.svelte generated by Svelte v3.51.0 */
-
-function create_fragment$o(ctx) {
-	return {
-		c() {
-			this.c = noop;
-		},
-		m: noop,
-		p: noop,
-		i: noop,
-		o: noop,
-		d: noop
-	};
-}
-
-function instance$m($$self, $$props, $$invalidate) {
-	let { name = "" } = $$props;
-	let { value = "" } = $$props;
-	let { label = "" } = $$props;
-
-	// private
-	let ctx;
-
-	let isBound = false;
-
-	$$self.$$set = $$props => {
-		if ('name' in $$props) $$invalidate(0, name = $$props.name);
-		if ('value' in $$props) $$invalidate(1, value = $$props.value);
-		if ('label' in $$props) $$invalidate(2, label = $$props.label);
-	};
-
-	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*isBound, name, ctx, label, value*/ 31) {
-			{
-				(async () => {
-					await tick();
-
-					if (!isBound) {
-						$$invalidate(4, isBound = true);
-						$$invalidate(3, ctx = getContext(name));
-						ctx.notify({ type: "bind", name, label, value });
-					}
-				})();
-			}
-		}
-	};
-
-	return [name, value, label, ctx, isBound];
-}
-
-class DropdownItem extends SvelteElement {
-	constructor(options) {
-		super();
+		this.$$set({ multiselect });
+		flush();
+	}
 
-		init(
-			this,
-			{
-				target: this.shadowRoot,
-				props: attribute_to_object(this.attributes),
-				customElement: true
-			},
-			instance$m,
-			create_fragment$o,
-			safe_not_equal,
-			{ name: 0, value: 1, label: 2 },
-			null
-		);
+	get native() {
+		return this.$$.ctx[27];
+	}
 
-		if (options) {
-			if (options.target) {
-				insert(options.target, this, options.anchor);
-			}
+	set native(native) {
+		this.$$set({ native });
+		flush();
+	}
 
-			if (options.props) {
-				this.$set(options.props);
-				flush();
-			}
-		}
+	get mt() {
+		return this.$$.ctx[9];
 	}
 
-	static get observedAttributes() {
-		return ["name", "value", "label"];
+	set mt(mt) {
+		this.$$set({ mt });
+		flush();
 	}
 
-	get name() {
-		return this.$$.ctx[0];
+	get mr() {
+		return this.$$.ctx[10];
 	}
 
-	set name(name) {
-		this.$$set({ name });
+	set mr(mr) {
+		this.$$set({ mr });
 		flush();
 	}
 
-	get value() {
-		return this.$$.ctx[1];
+	get mb() {
+		return this.$$.ctx[11];
 	}
 
-	set value(value) {
-		this.$$set({ value });
+	set mb(mb) {
+		this.$$set({ mb });
 		flush();
 	}
 
-	get label() {
-		return this.$$.ctx[2];
+	get ml() {
+		return this.$$.ctx[12];
 	}
 
-	set label(label) {
-		this.$$set({ label });
+	set ml(ml) {
+		this.$$set({ ml });
 		flush();
 	}
 }
 
-customElements.define("goa-dropdown-item", DropdownItem);
+customElements.define("goa-dropdown", Dropdown);
 
 /* libs/web-components/src/components/focus-trap/FocusTrap.svelte generated by Svelte v3.51.0 */
 
-function create_fragment$n(ctx) {
+function create_fragment$o(ctx) {
 	let div;
 
 	return {
@@ -6129,7 +6129,7 @@ function isFocusable(element) {
 	}
 }
 
-function instance$l($$self, $$props, $$invalidate) {
+function instance$m($$self, $$props, $$invalidate) {
 	let isActive;
 	let { active } = $$props;
 	let ignoreFocusChanges = false;
@@ -6283,21 +6283,215 @@ function instance$l($$self, $$props, $$invalidate) {
 					$$invalidate(2, hasListeners = true);
 				}
 
-				if (!isActive && hasListeners) {
-					removeListeners();
-					$$invalidate(2, hasListeners = false);
-				}
-			}
-		}
+				if (!isActive && hasListeners) {
+					removeListeners();
+					$$invalidate(2, hasListeners = false);
+				}
+			}
+		}
+	};
+
+	return [element, active, hasListeners, isActive, div_binding];
+}
+
+class FocusTrap extends SvelteElement {
+	constructor(options) {
+		super();
+		this.shadowRoot.innerHTML = `<style>#root{display:inline}</style>`;
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance$m,
+			create_fragment$o,
+			safe_not_equal,
+			{ active: 1 },
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return ["active"];
+	}
+
+	get active() {
+		return this.$$.ctx[1];
+	}
+
+	set active(active) {
+		this.$$set({ active });
+		flush();
+	}
+}
+
+customElements.define("goa-focus-trap", FocusTrap);
+
+/* libs/web-components/src/components/footer/Footer.svelte generated by Svelte v3.51.0 */
+
+function create_if_block$9(ctx) {
+	let goa_divider;
+
+	return {
+		c() {
+			goa_divider = element("goa-divider");
+			set_custom_element_data(goa_divider, "spacing", "small");
+		},
+		m(target, anchor) {
+			insert(target, goa_divider, anchor);
+		},
+		d(detaching) {
+			if (detaching) detach(goa_divider);
+		}
+	};
+}
+
+function create_fragment$n(ctx) {
+	let div5;
+	let div4;
+	let div0;
+	let t0;
+	let t1;
+	let div3;
+	let div1;
+	let t2;
+	let div2;
+	let a0;
+	let t3;
+	let a1;
+	let div5_style_value;
+	let if_block = /*navLinks*/ ctx[2]?.length && create_if_block$9();
+
+	return {
+		c() {
+			div5 = element("div");
+			div4 = element("div");
+			div0 = element("div");
+			div0.innerHTML = `<slot name="nav"></slot>`;
+			t0 = space();
+			if (if_block) if_block.c();
+			t1 = space();
+			div3 = element("div");
+			div1 = element("div");
+			div1.innerHTML = `<slot name="meta"></slot>`;
+			t2 = space();
+			div2 = element("div");
+			a0 = element("a");
+			a0.innerHTML = `<img alt="GoA Logo" class="logo" src="data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; xmlns:xlink=&#39;http://www.w3.org/1999/xlink&#39; width=&#39;149.351&#39; height=&#39;42&#39; viewBox=&#39;0 0 149.351 42&#39;%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bclip-path:url(%23a);%7D.c%7Bfill:%2300aad2;%7D.d%7Bfill:%235f6a72;%7D%3C/style%3E%3CclipPath id=&#39;a&#39;%3E%3Crect class=&#39;a&#39; width=&#39;149.351&#39; height=&#39;42&#39;/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class=&#39;b&#39;%3E%3Crect class=&#39;c&#39; width=&#39;13.555&#39; height=&#39;13.555&#39; transform=&#39;translate(135.796 21.524)&#39;/%3E%3Cpath class=&#39;d&#39; d=&#39;M63.082,33.088c-1.383.138-2.835.277-4.357.346.553-4.357,2.835-10.373,5.671-9.405,1.66.553.761,5.671-1.314,9.059m-3.527,2.974a3.761,3.761,0,0,1-1.245,0,.851.851,0,0,0,.346-.692v-.553c.761,0,1.936-.138,3.389-.277a4.327,4.327,0,0,1-2.49,1.521M76.844,25.688c1.8-1.66,2.7-1.521,2.9-1.106.484.968-1.591,4.357-5.671,6.224a10.328,10.328,0,0,1,2.766-5.118m66.736,1.66c-.207-3.389-3.181-3.942-3.6-2.974-.138.346,1.106.207,1.106,2.628,0,3.942-4.011,9.129-9.129,9.129-5.532,0-6.985-4.357-7.261-6.432-.207-1.452.138-3.458-2.351-3.181-1.729.207-3.25,3.527-5.463,6.362-1.867,2.42-2.7,2.213-2.282.138.553-2.628,2.7-8.714,5.187-9.129,1.176-.207,1.591,1.8,2.075.553s.069-4.011-2.559-4.011c-1.8,0-3.942,1.936-5.74,4.08-1.521,1.936-9.336,13.416-12.656,10.927-1.521-1.176-1.383-5.878-.415-11.411,3.873-1.521,7.123-1.037,8.921-.138.9.415,1.037.346.622-.622-.553-1.452-3.665-3.734-8.575-2.7-.138,0-.207.069-.346.069.415-1.8.83-3.665,1.383-5.463.484-1.66,1.8-4.5-1.729-4.979-1.106-.207-.622.346-1.037,1.867-.692,2.766-1.521,6.362-2.144,10.028a19.745,19.745,0,0,0-7.538,8.091,38.59,38.59,0,0,0,.9-4.772,1.589,1.589,0,0,0-1.245-1.729c-.761-.207-1.729.138-2.628,1.452-2.144,3.043-4.841,7.815-8.99,9.82-2.974,1.452-4.288,0-4.357-2.282a9.869,9.869,0,0,0,1.521-.553c5.394-2.351,7.192-5.947,5.878-8.16-1.314-2.075-4.979-1.452-7.953,1.66a11.175,11.175,0,0,0-2.7,6.5c-1.245.277-2.628.484-4.219.692,2.49-4.08,2.282-9.613-1.383-10.581-4.288-1.106-6.432,3.043-7.331,6.5.346-3.873.9-7.745,1.591-11.549.346-1.66,1.452-4.5-2.075-4.979-1.106-.207-.968.346-.9,1.867.138,2.075-2.144,14.454-.968,19.848-1.521.484-2.144,1.66-.207,2.835,1.383.83,4.357,1.106,7.331-.346a9.3,9.3,0,0,0,2.766-2.144c1.8-.207,3.665-.553,5.394-.83.277,2.42,1.867,4.219,5.463,3.873,5.118-.484,9.682-6.777,11.411-9.82-.346,3.25-2.42,10.373,1.176,10.028,1.383-.138.83-.346.9-1.591.346-4.288,3.873-7.953,7.4-10.166-.622,5.256-.415,9.958,2.006,11.411,4.426,2.766,10.581-4.5,14.039-8.921-1.729,3.942-2.7,8.921-.138,9.682,3.043.9,5.463-4.219,8.3-8.091.346,2.766,2.213,7.607,9.682,7.607,8.022-.069,13.071-4.91,12.863-10.1m-108.3,8.645A66.439,66.439,0,0,1,27.4,32.534a59.168,59.168,0,0,0,6.777-2.974,54.453,54.453,0,0,0,1.106,6.432m20.4,3.873c-.069-.207-.622.069-1.106,0-1.452-.207-3.389-2.213-3.942-5.463-1.037-5.878-.415-11.687,1.314-20.332.346-1.66,1.452-4.5-2.075-5.048-1.106-.138-.553.415-.83,1.867C47.66,17.32,42.4,21.954,37.149,25.066,36.6,17.735,36.8,9.505,38.186,4.526c1.176-4.219,2.559-3.458.83-4.357s-3.734.277-5.325,3.458S24.839,23.89,13.221,35.439C7.273,41.317,1.879,38.274.842,37.375c-.9-.761-1.176.415-.138,1.591,4.772,5.256,11.826,2.282,14.384-.277,7.054-7.054,15.283-22.268,18.6-28.7a98.251,98.251,0,0,0,.277,16.874,50.129,50.129,0,0,1-8.3,3.181c-1.66.415-2.7,1.106-2.7,1.867s1.106,1.521,2.7,2.282c2.835,1.383,11.2,5.256,13.209,6.5,1.729,1.037,2.628.207,3.112-.9.692-1.452-1.176-2.282-2.974-2.766a60.545,60.545,0,0,1-1.66-9.267c4.219-2.628,8.437-6.086,10.788-10.443C47.522,20.916,46,33.3,49.873,38.482a5.451,5.451,0,0,0,4.564,2.213c.968-.069,1.383-.692,1.245-.83&#39; transform=&#39;translate(-0.038 0.124)&#39;/%3E%3C/g%3E%3C/svg%3E"/>`;
+			t3 = space();
+			a1 = element("a");
+			a1.textContent = `© ${/*year*/ ctx[4]} Government of Alberta`;
+			this.c = noop;
+			attr(div0, "class", "nav-links");
+			attr(div1, "class", "meta-links");
+			attr(a0, "href", "https://alberta.ca");
+			attr(a1, "href", "https://alberta.ca");
+			attr(a1, "class", "goa-copyright");
+			attr(div2, "class", "abgov");
+			toggle_class(div2, "with-meta-links", /*metaLinks*/ ctx[3]?.length);
+			attr(div3, "class", "meta-section");
+			toggle_class(div3, "with-meta-links", /*metaLinks*/ ctx[3]?.length);
+			attr(div4, "class", "content");
+			attr(div5, "class", "app-footer");
+			attr(div5, "style", div5_style_value = `--max-content-width: ${/*maxcontentwidth*/ ctx[0] || "100%"}`);
+		},
+		m(target, anchor) {
+			insert(target, div5, anchor);
+			append(div5, div4);
+			append(div4, div0);
+			append(div4, t0);
+			if (if_block) if_block.m(div4, null);
+			append(div4, t1);
+			append(div4, div3);
+			append(div3, div1);
+			append(div3, t2);
+			append(div3, div2);
+			append(div2, a0);
+			append(div2, t3);
+			append(div2, a1);
+			/*div5_binding*/ ctx[5](div5);
+		},
+		p(ctx, [dirty]) {
+			if (/*navLinks*/ ctx[2]?.length) {
+				if (if_block) ; else {
+					if_block = create_if_block$9();
+					if_block.c();
+					if_block.m(div4, t1);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
+
+			if (dirty & /*metaLinks*/ 8) {
+				toggle_class(div2, "with-meta-links", /*metaLinks*/ ctx[3]?.length);
+			}
+
+			if (dirty & /*metaLinks*/ 8) {
+				toggle_class(div3, "with-meta-links", /*metaLinks*/ ctx[3]?.length);
+			}
+
+			if (dirty & /*maxcontentwidth*/ 1 && div5_style_value !== (div5_style_value = `--max-content-width: ${/*maxcontentwidth*/ ctx[0] || "100%"}`)) {
+				attr(div5, "style", div5_style_value);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div5);
+			if (if_block) if_block.d();
+			/*div5_binding*/ ctx[5](null);
+		}
+	};
+}
+
+function instance$l($$self, $$props, $$invalidate) {
+	let { maxcontentwidth = "" } = $$props;
+	let rootEl;
+	let navLinks;
+	let metaLinks;
+	const year = new Date().getFullYear();
+
+	onMount(async () => {
+		await tick();
+		const navSlot = rootEl.querySelector("slot[name=nav]");
+		const metaSlot = rootEl.querySelector("slot[name=meta]");
+		$$invalidate(2, navLinks = navSlot.assignedElements());
+		$$invalidate(3, metaLinks = metaSlot.assignedElements());
+	});
+
+	function div5_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			rootEl = $$value;
+			$$invalidate(1, rootEl);
+		});
+	}
+
+	$$self.$$set = $$props => {
+		if ('maxcontentwidth' in $$props) $$invalidate(0, maxcontentwidth = $$props.maxcontentwidth);
 	};
 
-	return [element, active, hasListeners, isActive, div_binding];
+	return [maxcontentwidth, rootEl, navLinks, metaLinks, year, div5_binding];
 }
 
-class FocusTrap extends SvelteElement {
+class Footer extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>#root{display:inline}</style>`;
+		this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--color-gray-100);border-top:2px solid var(--color-gray-200);border-bottom:1rem solid var(--goa-color-brand)}.content{padding:2rem 1rem;margin:0 auto;width:min(var(--max-content-width), 100%)}@media(min-width: 640px){.content{padding:2rem 1.5rem}}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
 
 		init(
 			this,
@@ -6309,7 +6503,7 @@ class FocusTrap extends SvelteElement {
 			instance$l,
 			create_fragment$n,
 			safe_not_equal,
-			{ active: 1 },
+			{ maxcontentwidth: 0 },
 			null
 		);
 
@@ -6326,20 +6520,20 @@ class FocusTrap extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["active"];
+		return ["maxcontentwidth"];
 	}
 
-	get active() {
-		return this.$$.ctx[1];
+	get maxcontentwidth() {
+		return this.$$.ctx[0];
 	}
 
-	set active(active) {
-		this.$$set({ active });
+	set maxcontentwidth(maxcontentwidth) {
+		this.$$set({ maxcontentwidth });
 		flush();
 	}
 }
 
-customElements.define("goa-focus-trap", FocusTrap);
+customElements.define("goa-app-footer", Footer);
 
 /* libs/web-components/src/components/footer-meta-section/FooterMetaSection.svelte generated by Svelte v3.51.0 */
 
@@ -6525,7 +6719,7 @@ function get_each_context$2(ctx, list, i) {
 }
 
 // (31:2) {#if heading}
-function create_if_block$9(ctx) {
+function create_if_block$8(ctx) {
 	let div;
 	let t0;
 	let t1;
@@ -6597,7 +6791,7 @@ function create_fragment$l(ctx) {
 	let t1;
 	let ul;
 	let ul_style_value;
-	let if_block = /*heading*/ ctx[0] && create_if_block$9(ctx);
+	let if_block = /*heading*/ ctx[0] && create_if_block$8(ctx);
 	let each_value = /*children*/ ctx[3];
 	let each_blocks = [];
 
@@ -6651,7 +6845,7 @@ function create_fragment$l(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$9(ctx);
+					if_block = create_if_block$8(ctx);
 					if_block.c();
 					if_block.m(section, t0);
 				}
@@ -6804,200 +6998,6 @@ class FooterNavSection extends SvelteElement {
 
 customElements.define("goa-app-footer-nav-section", FooterNavSection);
 
-/* libs/web-components/src/components/footer/Footer.svelte generated by Svelte v3.51.0 */
-
-function create_if_block$8(ctx) {
-	let goa_divider;
-
-	return {
-		c() {
-			goa_divider = element("goa-divider");
-			set_custom_element_data(goa_divider, "spacing", "small");
-		},
-		m(target, anchor) {
-			insert(target, goa_divider, anchor);
-		},
-		d(detaching) {
-			if (detaching) detach(goa_divider);
-		}
-	};
-}
-
-function create_fragment$k(ctx) {
-	let div5;
-	let div4;
-	let div0;
-	let t0;
-	let t1;
-	let div3;
-	let div1;
-	let t2;
-	let div2;
-	let a0;
-	let t3;
-	let a1;
-	let div5_style_value;
-	let if_block = /*navLinks*/ ctx[2]?.length && create_if_block$8();
-
-	return {
-		c() {
-			div5 = element("div");
-			div4 = element("div");
-			div0 = element("div");
-			div0.innerHTML = `<slot name="nav"></slot>`;
-			t0 = space();
-			if (if_block) if_block.c();
-			t1 = space();
-			div3 = element("div");
-			div1 = element("div");
-			div1.innerHTML = `<slot name="meta"></slot>`;
-			t2 = space();
-			div2 = element("div");
-			a0 = element("a");
-			a0.innerHTML = `<img alt="GoA Logo" class="logo" src="data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; xmlns:xlink=&#39;http://www.w3.org/1999/xlink&#39; width=&#39;149.351&#39; height=&#39;42&#39; viewBox=&#39;0 0 149.351 42&#39;%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bclip-path:url(%23a);%7D.c%7Bfill:%2300aad2;%7D.d%7Bfill:%235f6a72;%7D%3C/style%3E%3CclipPath id=&#39;a&#39;%3E%3Crect class=&#39;a&#39; width=&#39;149.351&#39; height=&#39;42&#39;/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class=&#39;b&#39;%3E%3Crect class=&#39;c&#39; width=&#39;13.555&#39; height=&#39;13.555&#39; transform=&#39;translate(135.796 21.524)&#39;/%3E%3Cpath class=&#39;d&#39; d=&#39;M63.082,33.088c-1.383.138-2.835.277-4.357.346.553-4.357,2.835-10.373,5.671-9.405,1.66.553.761,5.671-1.314,9.059m-3.527,2.974a3.761,3.761,0,0,1-1.245,0,.851.851,0,0,0,.346-.692v-.553c.761,0,1.936-.138,3.389-.277a4.327,4.327,0,0,1-2.49,1.521M76.844,25.688c1.8-1.66,2.7-1.521,2.9-1.106.484.968-1.591,4.357-5.671,6.224a10.328,10.328,0,0,1,2.766-5.118m66.736,1.66c-.207-3.389-3.181-3.942-3.6-2.974-.138.346,1.106.207,1.106,2.628,0,3.942-4.011,9.129-9.129,9.129-5.532,0-6.985-4.357-7.261-6.432-.207-1.452.138-3.458-2.351-3.181-1.729.207-3.25,3.527-5.463,6.362-1.867,2.42-2.7,2.213-2.282.138.553-2.628,2.7-8.714,5.187-9.129,1.176-.207,1.591,1.8,2.075.553s.069-4.011-2.559-4.011c-1.8,0-3.942,1.936-5.74,4.08-1.521,1.936-9.336,13.416-12.656,10.927-1.521-1.176-1.383-5.878-.415-11.411,3.873-1.521,7.123-1.037,8.921-.138.9.415,1.037.346.622-.622-.553-1.452-3.665-3.734-8.575-2.7-.138,0-.207.069-.346.069.415-1.8.83-3.665,1.383-5.463.484-1.66,1.8-4.5-1.729-4.979-1.106-.207-.622.346-1.037,1.867-.692,2.766-1.521,6.362-2.144,10.028a19.745,19.745,0,0,0-7.538,8.091,38.59,38.59,0,0,0,.9-4.772,1.589,1.589,0,0,0-1.245-1.729c-.761-.207-1.729.138-2.628,1.452-2.144,3.043-4.841,7.815-8.99,9.82-2.974,1.452-4.288,0-4.357-2.282a9.869,9.869,0,0,0,1.521-.553c5.394-2.351,7.192-5.947,5.878-8.16-1.314-2.075-4.979-1.452-7.953,1.66a11.175,11.175,0,0,0-2.7,6.5c-1.245.277-2.628.484-4.219.692,2.49-4.08,2.282-9.613-1.383-10.581-4.288-1.106-6.432,3.043-7.331,6.5.346-3.873.9-7.745,1.591-11.549.346-1.66,1.452-4.5-2.075-4.979-1.106-.207-.968.346-.9,1.867.138,2.075-2.144,14.454-.968,19.848-1.521.484-2.144,1.66-.207,2.835,1.383.83,4.357,1.106,7.331-.346a9.3,9.3,0,0,0,2.766-2.144c1.8-.207,3.665-.553,5.394-.83.277,2.42,1.867,4.219,5.463,3.873,5.118-.484,9.682-6.777,11.411-9.82-.346,3.25-2.42,10.373,1.176,10.028,1.383-.138.83-.346.9-1.591.346-4.288,3.873-7.953,7.4-10.166-.622,5.256-.415,9.958,2.006,11.411,4.426,2.766,10.581-4.5,14.039-8.921-1.729,3.942-2.7,8.921-.138,9.682,3.043.9,5.463-4.219,8.3-8.091.346,2.766,2.213,7.607,9.682,7.607,8.022-.069,13.071-4.91,12.863-10.1m-108.3,8.645A66.439,66.439,0,0,1,27.4,32.534a59.168,59.168,0,0,0,6.777-2.974,54.453,54.453,0,0,0,1.106,6.432m20.4,3.873c-.069-.207-.622.069-1.106,0-1.452-.207-3.389-2.213-3.942-5.463-1.037-5.878-.415-11.687,1.314-20.332.346-1.66,1.452-4.5-2.075-5.048-1.106-.138-.553.415-.83,1.867C47.66,17.32,42.4,21.954,37.149,25.066,36.6,17.735,36.8,9.505,38.186,4.526c1.176-4.219,2.559-3.458.83-4.357s-3.734.277-5.325,3.458S24.839,23.89,13.221,35.439C7.273,41.317,1.879,38.274.842,37.375c-.9-.761-1.176.415-.138,1.591,4.772,5.256,11.826,2.282,14.384-.277,7.054-7.054,15.283-22.268,18.6-28.7a98.251,98.251,0,0,0,.277,16.874,50.129,50.129,0,0,1-8.3,3.181c-1.66.415-2.7,1.106-2.7,1.867s1.106,1.521,2.7,2.282c2.835,1.383,11.2,5.256,13.209,6.5,1.729,1.037,2.628.207,3.112-.9.692-1.452-1.176-2.282-2.974-2.766a60.545,60.545,0,0,1-1.66-9.267c4.219-2.628,8.437-6.086,10.788-10.443C47.522,20.916,46,33.3,49.873,38.482a5.451,5.451,0,0,0,4.564,2.213c.968-.069,1.383-.692,1.245-.83&#39; transform=&#39;translate(-0.038 0.124)&#39;/%3E%3C/g%3E%3C/svg%3E"/>`;
-			t3 = space();
-			a1 = element("a");
-			a1.textContent = `© ${/*year*/ ctx[4]} Government of Alberta`;
-			this.c = noop;
-			attr(div0, "class", "nav-links");
-			attr(div1, "class", "meta-links");
-			attr(a0, "href", "https://alberta.ca");
-			attr(a1, "href", "https://alberta.ca");
-			attr(a1, "class", "goa-copyright");
-			attr(div2, "class", "abgov");
-			toggle_class(div2, "with-meta-links", /*metaLinks*/ ctx[3]?.length);
-			attr(div3, "class", "meta-section");
-			toggle_class(div3, "with-meta-links", /*metaLinks*/ ctx[3]?.length);
-			attr(div4, "class", "content");
-			attr(div5, "class", "app-footer");
-			attr(div5, "style", div5_style_value = `--max-content-width: ${/*maxcontentwidth*/ ctx[0] || "100%"}`);
-		},
-		m(target, anchor) {
-			insert(target, div5, anchor);
-			append(div5, div4);
-			append(div4, div0);
-			append(div4, t0);
-			if (if_block) if_block.m(div4, null);
-			append(div4, t1);
-			append(div4, div3);
-			append(div3, div1);
-			append(div3, t2);
-			append(div3, div2);
-			append(div2, a0);
-			append(div2, t3);
-			append(div2, a1);
-			/*div5_binding*/ ctx[5](div5);
-		},
-		p(ctx, [dirty]) {
-			if (/*navLinks*/ ctx[2]?.length) {
-				if (if_block) ; else {
-					if_block = create_if_block$8();
-					if_block.c();
-					if_block.m(div4, t1);
-				}
-			} else if (if_block) {
-				if_block.d(1);
-				if_block = null;
-			}
-
-			if (dirty & /*metaLinks*/ 8) {
-				toggle_class(div2, "with-meta-links", /*metaLinks*/ ctx[3]?.length);
-			}
-
-			if (dirty & /*metaLinks*/ 8) {
-				toggle_class(div3, "with-meta-links", /*metaLinks*/ ctx[3]?.length);
-			}
-
-			if (dirty & /*maxcontentwidth*/ 1 && div5_style_value !== (div5_style_value = `--max-content-width: ${/*maxcontentwidth*/ ctx[0] || "100%"}`)) {
-				attr(div5, "style", div5_style_value);
-			}
-		},
-		i: noop,
-		o: noop,
-		d(detaching) {
-			if (detaching) detach(div5);
-			if (if_block) if_block.d();
-			/*div5_binding*/ ctx[5](null);
-		}
-	};
-}
-
-function instance$i($$self, $$props, $$invalidate) {
-	let { maxcontentwidth = "" } = $$props;
-	let rootEl;
-	let navLinks;
-	let metaLinks;
-	const year = new Date().getFullYear();
-
-	onMount(async () => {
-		await tick();
-		const navSlot = rootEl.querySelector("slot[name=nav]");
-		const metaSlot = rootEl.querySelector("slot[name=meta]");
-		$$invalidate(2, navLinks = navSlot.assignedElements());
-		$$invalidate(3, metaLinks = metaSlot.assignedElements());
-	});
-
-	function div5_binding($$value) {
-		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
-			rootEl = $$value;
-			$$invalidate(1, rootEl);
-		});
-	}
-
-	$$self.$$set = $$props => {
-		if ('maxcontentwidth' in $$props) $$invalidate(0, maxcontentwidth = $$props.maxcontentwidth);
-	};
-
-	return [maxcontentwidth, rootEl, navLinks, metaLinks, year, div5_binding];
-}
-
-class Footer extends SvelteElement {
-	constructor(options) {
-		super();
-		this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--color-gray-100);border-top:2px solid var(--color-gray-200);border-bottom:1rem solid var(--goa-color-brand)}.content{padding:2rem 1rem;margin:0 auto;width:min(var(--max-content-width), 100%)}@media(min-width: 640px){.content{padding:2rem 1.5rem}}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
-
-		init(
-			this,
-			{
-				target: this.shadowRoot,
-				props: attribute_to_object(this.attributes),
-				customElement: true
-			},
-			instance$i,
-			create_fragment$k,
-			safe_not_equal,
-			{ maxcontentwidth: 0 },
-			null
-		);
-
-		if (options) {
-			if (options.target) {
-				insert(options.target, this, options.anchor);
-			}
-
-			if (options.props) {
-				this.$set(options.props);
-				flush();
-			}
-		}
-	}
-
-	static get observedAttributes() {
-		return ["maxcontentwidth"];
-	}
-
-	get maxcontentwidth() {
-		return this.$$.ctx[0];
-	}
-
-	set maxcontentwidth(maxcontentwidth) {
-		this.$$set({ maxcontentwidth });
-		flush();
-	}
-}
-
-customElements.define("goa-app-footer", Footer);
-
 /* libs/web-components/src/components/form-item/FormItem.svelte generated by Svelte v3.51.0 */
 
 function create_if_block_2$4(ctx) {
@@ -7132,7 +7132,7 @@ function create_if_block$7(ctx) {
 	};
 }
 
-function create_fragment$j(ctx) {
+function create_fragment$k(ctx) {
 	let div1;
 	let t0;
 	let div0;
@@ -7229,7 +7229,7 @@ function create_fragment$j(ctx) {
 	};
 }
 
-function instance$h($$self, $$props, $$invalidate) {
+function instance$i($$self, $$props, $$invalidate) {
 	const [REQUIREMENT_TYPES, validateRequirementType] = typeValidator("Requirement type", ["optional", "required"], false);
 	let { testid = "" } = $$props;
 	let { mt = null } = $$props;
@@ -7272,8 +7272,8 @@ class FormItem extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$h,
-			create_fragment$j,
+			instance$i,
+			create_fragment$k,
 			safe_not_equal,
 			{
 				testid: 0,
@@ -7401,7 +7401,7 @@ customElements.define("goa-form-item", FormItem);
 
 /* libs/web-components/src/components/grid/Grid.svelte generated by Svelte v3.51.0 */
 
-function create_fragment$i(ctx) {
+function create_fragment$j(ctx) {
 	let div;
 	let slot;
 	let div_style_value;
@@ -7440,7 +7440,7 @@ function create_fragment$i(ctx) {
 	};
 }
 
-function instance$g($$self, $$props, $$invalidate) {
+function instance$h($$self, $$props, $$invalidate) {
 	let { gap = "m" } = $$props;
 	let { minchildwidth = "" } = $$props;
 	let { mt = null } = $$props;
@@ -7476,8 +7476,8 @@ class Grid extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$g,
-			create_fragment$i,
+			instance$h,
+			create_fragment$j,
 			safe_not_equal,
 			{
 				gap: 0,
@@ -7565,7 +7565,7 @@ customElements.define("goa-grid", Grid);
 
 /* libs/web-components/src/components/hero-banner/HeroBanner.svelte generated by Svelte v3.51.0 */
 
-function create_fragment$h(ctx) {
+function create_fragment$i(ctx) {
 	let div1;
 	let goa_page_block;
 	let h1;
@@ -7628,7 +7628,7 @@ function create_fragment$h(ctx) {
 	};
 }
 
-function instance$f($$self, $$props, $$invalidate) {
+function instance$g($$self, $$props, $$invalidate) {
 	let { heading } = $$props;
 	let { backgroundurl } = $$props;
 	let { minheight = "600px" } = $$props;
@@ -7654,8 +7654,8 @@ class HeroBanner extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$f,
-			create_fragment$h,
+			instance$g,
+			create_fragment$i,
 			safe_not_equal,
 			{
 				heading: 0,
@@ -7713,7 +7713,7 @@ customElements.define("goa-hero-banner", HeroBanner);
 
 /* libs/web-components/src/components/icon-button/IconButton.svelte generated by Svelte v3.51.0 */
 
-function create_fragment$g(ctx) {
+function create_fragment$h(ctx) {
 	let button;
 	let goa_icon;
 	let button_style_value;
@@ -7800,7 +7800,7 @@ function handleClick(e) {
 	e.target.dispatchEvent(new CustomEvent("_click", { composed: true, detail: { event: e } }));
 }
 
-function instance$e($$self, $$props, $$invalidate) {
+function instance$f($$self, $$props, $$invalidate) {
 	let css;
 	let isDisabled;
 	let isInverted;
@@ -7893,8 +7893,8 @@ class IconButton extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$e,
-			create_fragment$g,
+			instance$f,
+			create_fragment$h,
 			safe_not_equal,
 			{
 				icon: 0,
@@ -8083,7 +8083,7 @@ function create_if_block$6(ctx) {
 	};
 }
 
-function create_fragment$f(ctx) {
+function create_fragment$g(ctx) {
 	let div;
 	let div_style_value;
 	let if_block = /*type*/ ctx[4] && create_if_block$6(ctx);
@@ -8156,7 +8156,7 @@ function create_fragment$f(ctx) {
 	};
 }
 
-function instance$d($$self, $$props, $$invalidate) {
+function instance$e($$self, $$props, $$invalidate) {
 	let isInverted;
 	let _size;
 	let { mt = null } = $$props;
@@ -8234,8 +8234,8 @@ class Icon extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$d,
-			create_fragment$f,
+			instance$e,
+			create_fragment$g,
 			safe_not_equal,
 			{
 				mt: 0,
@@ -8545,7 +8545,7 @@ function create_if_block$5(ctx) {
 	};
 }
 
-function create_fragment$e(ctx) {
+function create_fragment$f(ctx) {
 	let div3;
 	let div2;
 	let t0;
@@ -8817,7 +8817,7 @@ function doClick() {
 	this.dispatchEvent(new CustomEvent("_trailingIconClick", { composed: true }));
 }
 
-function instance$c($$self, $$props, $$invalidate) {
+function instance$d($$self, $$props, $$invalidate) {
 	let handlesTrailingIconClick;
 	let isFocused;
 	let isReadonly;
@@ -9013,8 +9013,8 @@ class Input extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$c,
-			create_fragment$e,
+			instance$d,
+			create_fragment$f,
 			safe_not_equal,
 			{
 				type: 1,
@@ -9475,7 +9475,7 @@ function create_if_block$4(ctx) {
 	};
 }
 
-function create_fragment$d(ctx) {
+function create_fragment$e(ctx) {
 	let header;
 	let t0;
 	let show_if = ["alpha", "beta"].includes(/*type*/ ctx[0]);
@@ -9566,7 +9566,7 @@ function capitalize(val) {
 	return val[0].toUpperCase() + val.slice(1);
 }
 
-function instance$b($$self, $$props, $$invalidate) {
+function instance$c($$self, $$props, $$invalidate) {
 	const [Types, validateType] = typeValidator("Microsite header type", ["live", "alpha", "beta"], true);
 	let { type } = $$props;
 	let { version = "" } = $$props;
@@ -9597,8 +9597,8 @@ class MicrositeHeader extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$b,
-			create_fragment$d,
+			instance$c,
+			create_fragment$e,
 			safe_not_equal,
 			{ type: 0, version: 1, feedbackurl: 2 },
 			null
@@ -9980,7 +9980,7 @@ function create_if_block_1$1(ctx) {
 	};
 }
 
-function create_fragment$c(ctx) {
+function create_fragment$d(ctx) {
 	let if_block_anchor;
 	let current;
 	let if_block = /*isOpen*/ ctx[7] && create_if_block$3(ctx);
@@ -10036,7 +10036,7 @@ function create_fragment$c(ctx) {
 	};
 }
 
-function instance$a($$self, $$props, $$invalidate) {
+function instance$b($$self, $$props, $$invalidate) {
 	let isClosable;
 	let isOpen;
 	let _transitionTime;
@@ -10128,8 +10128,8 @@ class Modal extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$a,
-			create_fragment$c,
+			instance$b,
+			create_fragment$d,
 			safe_not_equal,
 			{
 				heading: 0,
@@ -10312,7 +10312,7 @@ function create_if_block$2(ctx) {
 	};
 }
 
-function create_fragment$b(ctx) {
+function create_fragment$c(ctx) {
 	let if_block_anchor;
 	let current;
 	let if_block = /*show*/ ctx[1] && create_if_block$2(ctx);
@@ -10368,7 +10368,7 @@ function create_fragment$b(ctx) {
 	};
 }
 
-function instance$9($$self, $$props, $$invalidate) {
+function instance$a($$self, $$props, $$invalidate) {
 	let iconType;
 	const [Types, validateType] = typeValidator("Notification type", ["emergency", "important", "information", "event"], true);
 	let { type = "" } = $$props;
@@ -10413,8 +10413,8 @@ class Notification extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$9,
-			create_fragment$b,
+			instance$a,
+			create_fragment$c,
 			safe_not_equal,
 			{ type: 0 },
 			null
@@ -10455,7 +10455,7 @@ function isValidDimension(value) {
 
 /* libs/web-components/src/components/page-block/PageBlock.svelte generated by Svelte v3.51.0 */
 
-function create_fragment$a(ctx) {
+function create_fragment$b(ctx) {
 	let div;
 	let slot;
 	let div_style_value;
@@ -10485,7 +10485,7 @@ function create_fragment$a(ctx) {
 	};
 }
 
-function instance$8($$self, $$props, $$invalidate) {
+function instance$9($$self, $$props, $$invalidate) {
 	const Sizes = { "full": "100%" };
 	let { width } = $$props;
 	let { _width } = $$props;
@@ -10524,8 +10524,8 @@ class PageBlock extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$8,
-			create_fragment$a,
+			instance$9,
+			create_fragment$b,
 			safe_not_equal,
 			{ width: 1, _width: 0 },
 			null
@@ -10684,7 +10684,7 @@ function create_each_block$1(key_1, ctx) {
 	};
 }
 
-function create_fragment$9(ctx) {
+function create_fragment$a(ctx) {
 	let div;
 	let slot;
 	let t;
@@ -10759,7 +10759,7 @@ function create_fragment$9(ctx) {
 	};
 }
 
-function instance$7($$self, $$props, $$invalidate) {
+function instance$8($$self, $$props, $$invalidate) {
 	let isDisabled;
 	const [Orientations, validateOrientation] = typeValidator("Radio group orientation", ["vertical", "horizontal"]);
 	let { name } = $$props;
@@ -10882,8 +10882,8 @@ class RadioGroup extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$7,
-			create_fragment$9,
+			instance$8,
+			create_fragment$a,
 			safe_not_equal,
 			{
 				name: 1,
@@ -11033,7 +11033,7 @@ customElements.define("goa-radio-group", RadioGroup);
 
 /* libs/web-components/src/components/radio-group/RadioItem.svelte generated by Svelte v3.51.0 */
 
-function create_fragment$8(ctx) {
+function create_fragment$9(ctx) {
 	return {
 		c() {
 			this.c = noop;
@@ -11046,7 +11046,7 @@ function create_fragment$8(ctx) {
 	};
 }
 
-function instance$6($$self, $$props, $$invalidate) {
+function instance$7($$self, $$props, $$invalidate) {
 	let { value } = $$props;
 	let { label } = $$props;
 	let { name } = $$props;
@@ -11089,8 +11089,8 @@ class RadioItem extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$6,
-			create_fragment$8,
+			instance$7,
+			create_fragment$9,
 			safe_not_equal,
 			{ value: 0, label: 1, name: 2 },
 			null
@@ -11144,7 +11144,7 @@ customElements.define("goa-radio-item", RadioItem);
 
 /* libs/web-components/src/components/scrollable/Scrollable.svelte generated by Svelte v3.51.0 */
 
-function create_fragment$7(ctx) {
+function create_fragment$8(ctx) {
 	let div;
 	let slot;
 	let div_style_value;
@@ -11191,7 +11191,7 @@ function create_fragment$7(ctx) {
 	};
 }
 
-function instance$5($$self, $$props, $$invalidate) {
+function instance$6($$self, $$props, $$invalidate) {
 	let { direction = "vertical" } = $$props;
 	let { hpadding = 0 } = $$props;
 	let { vpadding = 0 } = $$props;
@@ -11219,8 +11219,8 @@ class Scrollable extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$5,
-			create_fragment$7,
+			instance$6,
+			create_fragment$8,
 			safe_not_equal,
 			{
 				direction: 0,
@@ -11628,7 +11628,7 @@ function create_each_block(ctx) {
 	};
 }
 
-function create_fragment$6(ctx) {
+function create_fragment$7(ctx) {
 	let div;
 	let current_block_type_index;
 	let if_block;
@@ -11711,7 +11711,7 @@ function create_fragment$6(ctx) {
 	};
 }
 
-function instance$4($$self, $$props, $$invalidate) {
+function instance$5($$self, $$props, $$invalidate) {
 	const [Types, validateType] = typeValidator(
 		"Skeleton type",
 		[
@@ -11773,8 +11773,8 @@ class Skeleton extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$4,
-			create_fragment$6,
+			instance$5,
+			create_fragment$7,
 			safe_not_equal,
 			{
 				maxwidth: 0,
@@ -11892,7 +11892,7 @@ customElements.define("goa-skeleton", Skeleton);
 
 /* libs/web-components/src/components/spacer/Spacer.svelte generated by Svelte v3.51.0 */
 
-function create_fragment$5(ctx) {
+function create_fragment$6(ctx) {
 	let div;
 
 	return {
@@ -11914,7 +11914,7 @@ function create_fragment$5(ctx) {
 	};
 }
 
-function instance$3($$self, $$props, $$invalidate) {
+function instance$4($$self, $$props, $$invalidate) {
 	let { hspacing = "none" } = $$props;
 	let { vspacing = "none" } = $$props;
 	let rootEl;
@@ -11952,8 +11952,8 @@ class Spacer extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$3,
-			create_fragment$5,
+			instance$4,
+			create_fragment$6,
 			safe_not_equal,
 			{ hspacing: 1, vspacing: 2 },
 			null
@@ -12206,7 +12206,7 @@ function create_if_block(ctx) {
 	};
 }
 
-function create_fragment$4(ctx) {
+function create_fragment$5(ctx) {
 	let if_block_anchor;
 	let if_block = /*ready*/ ctx[6] && create_if_block(ctx);
 
@@ -12243,7 +12243,7 @@ function create_fragment$4(ctx) {
 	};
 }
 
-function instance$2($$self, $$props, $$invalidate) {
+function instance$3($$self, $$props, $$invalidate) {
 	let diameter;
 	let strokewidth;
 	let radius;
@@ -12362,8 +12362,8 @@ class Spinner extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$2,
-			create_fragment$4,
+			instance$3,
+			create_fragment$5,
 			safe_not_equal,
 			{
 				size: 10,
@@ -12429,6 +12429,212 @@ class Spinner extends SvelteElement {
 
 customElements.define("goa-spinner", Spinner);
 
+/* libs/web-components/src/components/table/Table.svelte generated by Svelte v3.51.0 */
+
+function create_fragment$4(ctx) {
+	let table;
+	let slot;
+	let t0;
+	let template;
+	let table_style_value;
+
+	return {
+		c() {
+			table = element("table");
+			slot = element("slot");
+			t0 = space();
+			template = element("template");
+
+			template.innerHTML = `<thead><tr><th></th></tr></thead> 
+    <tbody><tr><td></td></tr></tbody> 
+    <tfoot><tr><td></td></tr></tfoot>`;
+
+			this.c = noop;
+
+			attr(table, "style", table_style_value = `
+    width: ${/*width*/ ctx[0]};
+    ${calculateMargin(/*mt*/ ctx[1], /*mr*/ ctx[2], /*mb*/ ctx[3], /*ml*/ ctx[4])}
+  `);
+
+			toggle_class(table, "sticky", /*_stickyHeader*/ ctx[6]);
+		},
+		m(target, anchor) {
+			insert(target, table, anchor);
+			append(table, slot);
+			append(table, t0);
+			append(table, template);
+			/*table_binding*/ ctx[8](table);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*width, mt, mr, mb, ml*/ 31 && table_style_value !== (table_style_value = `
+    width: ${/*width*/ ctx[0]};
+    ${calculateMargin(/*mt*/ ctx[1], /*mr*/ ctx[2], /*mb*/ ctx[3], /*ml*/ ctx[4])}
+  `)) {
+				attr(table, "style", table_style_value);
+			}
+
+			if (dirty & /*_stickyHeader*/ 64) {
+				toggle_class(table, "sticky", /*_stickyHeader*/ ctx[6]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(table);
+			/*table_binding*/ ctx[8](null);
+		}
+	};
+}
+
+function instance$2($$self, $$props, $$invalidate) {
+	let _stickyHeader;
+	let { width = "" } = $$props;
+	let { stickyheader = "false" } = $$props;
+	let { mt = null } = $$props;
+	let { mr = null } = $$props;
+	let { mb = null } = $$props;
+	let { ml = null } = $$props;
+
+	// Private
+	let _rootEl;
+
+	onMount(() => {
+		const slot = _rootEl.querySelector("slot");
+
+		if (slot) {
+			// React needs to nest data in a <table>...</table>
+			const content = slot.assignedElements()[0].querySelectorAll("template table > *");
+
+			_rootEl.append(...content.length > 0 ? content : slot.assignedElements());
+		} else {
+			return [..._rootEl.children];
+		}
+	});
+
+	function table_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			_rootEl = $$value;
+			$$invalidate(5, _rootEl);
+		});
+	}
+
+	$$self.$$set = $$props => {
+		if ('width' in $$props) $$invalidate(0, width = $$props.width);
+		if ('stickyheader' in $$props) $$invalidate(7, stickyheader = $$props.stickyheader);
+		if ('mt' in $$props) $$invalidate(1, mt = $$props.mt);
+		if ('mr' in $$props) $$invalidate(2, mr = $$props.mr);
+		if ('mb' in $$props) $$invalidate(3, mb = $$props.mb);
+		if ('ml' in $$props) $$invalidate(4, ml = $$props.ml);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*stickyheader*/ 128) {
+			$$invalidate(6, _stickyHeader = toBoolean(stickyheader));
+		}
+	};
+
+	return [width, mt, mr, mb, ml, _rootEl, _stickyHeader, stickyheader, table_binding];
+}
+
+class Table extends SvelteElement {
+	constructor(options) {
+		super();
+		this.shadowRoot.innerHTML = `<style>table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{padding:1rem 1.5rem;border-bottom:1px solid var(--color-gray-200);line-height:1rem}th{background-color:var(--color-white);color:var(--goa-color-text-secondary);padding:1rem;vertical-align:middle;text-align:left;border-bottom:2px solid var(--color-gray-600)}tfoot td{background-color:var(--color-gray-100)}tfoot tr:first-child td{border-top:2px solid var(--color-gray-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance$2,
+			create_fragment$4,
+			safe_not_equal,
+			{
+				width: 0,
+				stickyheader: 7,
+				mt: 1,
+				mr: 2,
+				mb: 3,
+				ml: 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 ["width", "stickyheader", "mt", "mr", "mb", "ml"];
+	}
+
+	get width() {
+		return this.$$.ctx[0];
+	}
+
+	set width(width) {
+		this.$$set({ width });
+		flush();
+	}
+
+	get stickyheader() {
+		return this.$$.ctx[7];
+	}
+
+	set stickyheader(stickyheader) {
+		this.$$set({ stickyheader });
+		flush();
+	}
+
+	get mt() {
+		return this.$$.ctx[1];
+	}
+
+	set mt(mt) {
+		this.$$set({ mt });
+		flush();
+	}
+
+	get mr() {
+		return this.$$.ctx[2];
+	}
+
+	set mr(mr) {
+		this.$$set({ mr });
+		flush();
+	}
+
+	get mb() {
+		return this.$$.ctx[3];
+	}
+
+	set mb(mb) {
+		this.$$set({ mb });
+		flush();
+	}
+
+	get ml() {
+		return this.$$.ctx[4];
+	}
+
+	set ml(ml) {
+		this.$$set({ ml });
+		flush();
+	}
+}
+
+customElements.define("goa-table", Table);
+
 /* libs/web-components/src/components/text-area/TextArea.svelte generated by Svelte v3.51.0 */
 
 function create_fragment$3(ctx) {