@abgov/web-components 1.0.0-alpha.102 → 1.0.0-alpha.104

package/web-components.es.js

@@ -901,7 +901,7 @@ function create_else_block$4(ctx) {
 	};
 }
 
-// (12:2) {#if url}
+// (18:4) {#if url}
 function create_if_block$j(ctx) {
 	let a;
 	let img0;
@@ -954,10 +954,12 @@ function create_if_block$j(ctx) {
 	};
 }
 
-function create_fragment$E(ctx) {
+function create_fragment$F(ctx) {
+	let div2;
 	let div1;
 	let t;
 	let div0;
+	let div2_style_value;
 
 	function select_block_type(ctx, dirty) {
 		if (/*url*/ ctx[1]) return create_if_block$j;
@@ -969,17 +971,21 @@ function create_fragment$E(ctx) {
 
 	return {
 		c() {
+			div2 = element("div");
 			div1 = element("div");
 			if_block.c();
 			t = space();
 			div0 = element("div");
 			div0.innerHTML = `<slot></slot>`;
 			this.c = noop;
-			attr(div1, "class", "app-header");
-			attr(div1, "data-testid", /*testid*/ ctx[2]);
+			attr(div1, "class", "content");
+			attr(div2, "class", "app-header");
+			attr(div2, "data-testid", /*testid*/ ctx[2]);
+			attr(div2, "style", div2_style_value = `--max-content-width: ${/*maxcontentwidth*/ ctx[3] || "var(--layout-max-content-width)"}`);
 		},
 		m(target, anchor) {
-			insert(target, div1, anchor);
+			insert(target, div2, anchor);
+			append(div2, div1);
 			if_block.m(div1, null);
 			append(div1, t);
 			append(div1, div0);
@@ -998,36 +1004,42 @@ function create_fragment$E(ctx) {
 			}
 
 			if (dirty & /*testid*/ 4) {
-				attr(div1, "data-testid", /*testid*/ ctx[2]);
+				attr(div2, "data-testid", /*testid*/ ctx[2]);
+			}
+
+			if (dirty & /*maxcontentwidth*/ 8 && div2_style_value !== (div2_style_value = `--max-content-width: ${/*maxcontentwidth*/ ctx[3] || "var(--layout-max-content-width)"}`)) {
+				attr(div2, "style", div2_style_value);
 			}
 		},
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(div1);
+			if (detaching) detach(div2);
 			if_block.d();
 		}
 	};
 }
 
-function instance$z($$self, $$props, $$invalidate) {
+function instance$A($$self, $$props, $$invalidate) {
 	let { heading = "" } = $$props;
 	let { url = "" } = $$props;
 	let { testid = "" } = $$props;
+	let { maxcontentwidth = "" } = $$props;
 
 	$$self.$$set = $$props => {
 		if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
 		if ('url' in $$props) $$invalidate(1, url = $$props.url);
 		if ('testid' in $$props) $$invalidate(2, testid = $$props.testid);
+		if ('maxcontentwidth' in $$props) $$invalidate(3, maxcontentwidth = $$props.maxcontentwidth);
 	};
 
-	return [heading, url, testid];
+	return [heading, url, testid, maxcontentwidth];
 }
 
 class AppHeader extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.app-header{display:flex;align-items:center;justify-content:space-between;margin:0 auto;padding:1rem 1.5rem;border-bottom:1px solid var(--color-gray-100)}@media(max-width: 640px){.app-header{padding:1rem 1rem}}.app-link{display:flex;align-items:center;text-decoration:none;color:inherit}.title{margin-left:0.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.image-desktop{display:none}.image-mobile{display:block}@media(min-width: 768px){.image-desktop{display:block}.image-mobile{display:none}.title{margin-left:1.75rem}.image-desktop{display:block}.image-mobile{display:none}}</style>`;
+		this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box;font-family:var(--font-family)}.app-header{margin:0 auto;border-bottom:1px solid var(--color-gray-100)}@media(max-width: 640px){.app-header{padding:1rem 1rem}}.content{margin:0 auto;width:min(var(--max-content-width), 100%);display:flex;align-items:center;justify-content:space-between}@media(min-width: 640px){.content{padding:2rem 1.5rem}}.app-link{display:flex;align-items:center;text-decoration:none;color:inherit}.title{margin-left:0.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.image-desktop{display:none}.image-mobile{display:block}@media(min-width: 640px){.image-desktop{display:block}.image-mobile{display:none}.title{margin-left:1.75rem}.image-desktop{display:block}.image-mobile{display:none}}</style>`;
 
 		init(
 			this,
@@ -1036,10 +1048,15 @@ class AppHeader extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$z,
-			create_fragment$E,
+			instance$A,
+			create_fragment$F,
 			safe_not_equal,
-			{ heading: 0, url: 1, testid: 2 },
+			{
+				heading: 0,
+				url: 1,
+				testid: 2,
+				maxcontentwidth: 3
+			},
 			null
 		);
 
@@ -1056,7 +1073,7 @@ class AppHeader extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["heading", "url", "testid"];
+		return ["heading", "url", "testid", "maxcontentwidth"];
 	}
 
 	get heading() {
@@ -1085,6 +1102,15 @@ class AppHeader extends SvelteElement {
 		this.$$set({ testid });
 		flush();
 	}
+
+	get maxcontentwidth() {
+		return this.$$.ctx[3];
+	}
+
+	set maxcontentwidth(maxcontentwidth) {
+		this.$$set({ maxcontentwidth });
+		flush();
+	}
 }
 
 customElements.define("goa-app-header", AppHeader);
@@ -1168,7 +1194,7 @@ function create_if_block$i(ctx) {
 	};
 }
 
-function create_fragment$D(ctx) {
+function create_fragment$E(ctx) {
 	let div;
 	let t;
 	let div_class_value;
@@ -1248,7 +1274,7 @@ function create_fragment$D(ctx) {
 	};
 }
 
-function instance$y($$self, $$props, $$invalidate) {
+function instance$z($$self, $$props, $$invalidate) {
 	let showIcon;
 	let iconType;
 	let { type } = $$props;
@@ -1303,8 +1329,8 @@ class Badge extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$y,
-			create_fragment$D,
+			instance$z,
+			create_fragment$E,
 			safe_not_equal,
 			{ type: 0, testid: 1, icon: 5, content: 2 },
 			null
@@ -1367,7 +1393,7 @@ customElements.define("goa-badge", Badge);
 
 /* libs/web-components/src/components/button-group/ButtonGroup.svelte generated by Svelte v3.49.0 */
 
-function create_fragment$C(ctx) {
+function create_fragment$D(ctx) {
 	let div;
 	let slot;
 
@@ -1400,7 +1426,7 @@ function create_fragment$C(ctx) {
 	};
 }
 
-function instance$x($$self, $$props, $$invalidate) {
+function instance$y($$self, $$props, $$invalidate) {
 	let { gap = "medium" } = $$props;
 	let { alignment } = $$props;
 
@@ -1424,8 +1450,8 @@ class ButtonGroup extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$x,
-			create_fragment$C,
+			instance$y,
+			create_fragment$D,
 			safe_not_equal,
 			{ gap: 0, alignment: 1 },
 			null
@@ -1622,7 +1648,7 @@ function create_if_block_1$a(ctx) {
 	};
 }
 
-function create_fragment$B(ctx) {
+function create_fragment$C(ctx) {
 	let button;
 	let button_class_value;
 	let mounted;
@@ -1705,7 +1731,7 @@ function clickHandler(e) {
 	e.stopPropagation();
 }
 
-function instance$w($$self, $$props, $$invalidate) {
+function instance$x($$self, $$props, $$invalidate) {
 	let isDisabled;
 	let isButtonDark;
 	const BUTTON_TYPES = ["primary", "submit", "secondary", "tertiary", "start"];
@@ -1794,8 +1820,8 @@ class Button extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$w,
-			create_fragment$B,
+			instance$x,
+			create_fragment$C,
 			safe_not_equal,
 			{
 				type: 0,
@@ -1923,7 +1949,7 @@ function create_if_block$g(ctx) {
 	};
 }
 
-function create_fragment$A(ctx) {
+function create_fragment$B(ctx) {
 	let div;
 	let span0;
 	let goa_icon;
@@ -2002,7 +2028,7 @@ function create_fragment$A(ctx) {
 	};
 }
 
-function instance$v($$self, $$props, $$invalidate) {
+function instance$w($$self, $$props, $$invalidate) {
 	let iconType;
 	let { type } = $$props;
 	let { heading = "" } = $$props;
@@ -2043,8 +2069,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,
 			{ type: 0, heading: 1, testid: 2 },
 			null
@@ -2098,7 +2124,7 @@ customElements.define("goa-callout", Callout);
 
 /* libs/web-components/src/components/card-actions/CardActions.svelte generated by Svelte v3.49.0 */
 
-function create_fragment$z(ctx) {
+function create_fragment$A(ctx) {
 	let goa_card_content;
 
 	return {
@@ -2131,7 +2157,7 @@ class CardActions extends SvelteElement {
 				customElement: true
 			},
 			null,
-			create_fragment$z,
+			create_fragment$A,
 			safe_not_equal,
 			{},
 			null
@@ -2149,7 +2175,7 @@ customElements.define("goa-card-actions", CardActions);
 
 /* libs/web-components/src/components/card-content/CardContent.svelte generated by Svelte v3.49.0 */
 
-function create_fragment$y(ctx) {
+function create_fragment$z(ctx) {
 	let div;
 
 	return {
@@ -2184,7 +2210,7 @@ class CardContent extends SvelteElement {
 				customElement: true
 			},
 			null,
-			create_fragment$y,
+			create_fragment$z,
 			safe_not_equal,
 			{},
 			null
@@ -2202,7 +2228,7 @@ customElements.define("goa-card-content", CardContent);
 
 /* libs/web-components/src/components/card-group/CardGroup.svelte generated by Svelte v3.49.0 */
 
-function create_fragment$x(ctx) {
+function create_fragment$y(ctx) {
 	let div;
 
 	return {
@@ -2237,7 +2263,7 @@ class CardGroup extends SvelteElement {
 				customElement: true
 			},
 			null,
-			create_fragment$x,
+			create_fragment$y,
 			safe_not_equal,
 			{},
 			null
@@ -2255,7 +2281,7 @@ customElements.define("goa-card-group", CardGroup);
 
 /* libs/web-components/src/components/card-image/CardImage.svelte generated by Svelte v3.49.0 */
 
-function create_fragment$w(ctx) {
+function create_fragment$x(ctx) {
 	let div;
 
 	return {
@@ -2288,7 +2314,7 @@ function create_fragment$w(ctx) {
 	};
 }
 
-function instance$u($$self, $$props, $$invalidate) {
+function instance$v($$self, $$props, $$invalidate) {
 	let { src } = $$props;
 	let { height = "100%" } = $$props;
 
@@ -2312,8 +2338,8 @@ class CardImage extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$u,
-			create_fragment$w,
+			instance$v,
+			create_fragment$x,
 			safe_not_equal,
 			{ src: 0, height: 1 },
 			null
@@ -2358,7 +2384,7 @@ customElements.define("goa-card-image", CardImage);
 
 /* libs/web-components/src/components/card/Card.svelte generated by Svelte v3.49.0 */
 
-function create_fragment$v(ctx) {
+function create_fragment$w(ctx) {
 	let div;
 	let slot;
 	let div_style_value;
@@ -2398,7 +2424,7 @@ function create_fragment$v(ctx) {
 	};
 }
 
-function instance$t($$self, $$props, $$invalidate) {
+function instance$u($$self, $$props, $$invalidate) {
 	let { elevation = 0 } = $$props;
 	let { width = 320 } = $$props;
 	let { testId = "" } = $$props;
@@ -2426,8 +2452,8 @@ 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, testId: 2 },
 			null
@@ -2531,7 +2557,7 @@ function create_if_block$f(ctx) {
 	};
 }
 
-function create_fragment$u(ctx) {
+function create_fragment$v(ctx) {
 	let label;
 	let div0;
 	let input;
@@ -2664,7 +2690,7 @@ function create_fragment$u(ctx) {
 	};
 }
 
-function instance$s($$self, $$props, $$invalidate) {
+function instance$t($$self, $$props, $$invalidate) {
 	let isDisabled;
 	let isError;
 	let isChecked;
@@ -2749,8 +2775,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,
@@ -2916,7 +2942,7 @@ function create_if_block$e(ctx) {
 	};
 }
 
-function create_fragment$t(ctx) {
+function create_fragment$u(ctx) {
 	let div1;
 	let t0;
 	let div0;
@@ -3016,7 +3042,7 @@ function create_fragment$t(ctx) {
 	};
 }
 
-function instance$r($$self, $$props, $$invalidate) {
+function instance$s($$self, $$props, $$invalidate) {
 	let { leadingicon = null } = $$props;
 	let { error = "false" } = $$props;
 	let { deletable = "false" } = $$props;
@@ -3095,8 +3121,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,
 			{
 				leadingicon: 0,
@@ -3533,7 +3559,7 @@ function create_if_block_2$6(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$d(ctx);
@@ -3589,7 +3615,7 @@ function create_fragment$s(ctx) {
 	};
 }
 
-function instance$q($$self, $$props, $$invalidate) {
+function instance$r($$self, $$props, $$invalidate) {
 	let isVisible;
 	let { variant = "inline" } = $$props;
 	let { size = "large" } = $$props;
@@ -3645,8 +3671,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,
@@ -3724,7 +3750,7 @@ customElements.define("goa-circular-progress", CircularProgress);
 
 /* libs/web-components/src/components/container/Container.svelte generated by Svelte v3.49.0 */
 
-function create_fragment$r(ctx) {
+function create_fragment$s(ctx) {
 	let div3;
 	let header;
 	let div0;
@@ -3795,7 +3821,7 @@ function create_fragment$r(ctx) {
 	};
 }
 
-function instance$p($$self, $$props, $$invalidate) {
+function instance$q($$self, $$props, $$invalidate) {
 	let _colored;
 	let { type = 'non-interactive' } = $$props;
 	let { colored = "false" } = $$props;
@@ -3830,8 +3856,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,
@@ -3985,7 +4011,7 @@ function get_each_context$4(ctx, list, i) {
 	return child_ctx;
 }
 
-// (198:2) {#if isMenuVisible}
+// (201:2) {#if isMenuVisible}
 function create_if_block$c(ctx) {
 	let div;
 	let div_data_testid_value;
@@ -4019,13 +4045,14 @@ function create_if_block$c(ctx) {
 	};
 }
 
-// (239:4) {#each options as option, index}
+// (242:4) {#each options as option, index}
 function create_each_block$4(ctx) {
 	let li;
 	let t_value = (/*option*/ ctx[39].label || /*option*/ ctx[39].value) + "";
 	let t;
 	let li_id_value;
 	let li_aria_label_value;
+	let li_aria_selected_value;
 	let li_data_testid_value;
 	let li_data_index_value;
 	let li_style_value;
@@ -4041,11 +4068,16 @@ function create_each_block$4(ctx) {
 			li = element("li");
 			t = text(t_value);
 			attr(li, "id", li_id_value = /*option*/ ctx[39].label);
-			attr(li, "aria-label", li_aria_label_value = /*option*/ ctx[39].label || /*option*/ ctx[39].value);
 			attr(li, "role", "option");
+			attr(li, "aria-label", li_aria_label_value = /*option*/ ctx[39].label || /*option*/ ctx[39].value);
+
+			attr(li, "aria-selected", li_aria_selected_value = /*_values*/ ctx[9].includes(/*option*/ ctx[39].value)
+			? "true"
+			: "false");
+
+			attr(li, "class", "goa-dropdown-option");
 			attr(li, "data-testid", li_data_testid_value = `${/*option*/ ctx[39].value}-dropdown-item`);
 			attr(li, "data-index", li_data_index_value = /*index*/ ctx[41]);
-			attr(li, "class", "goa-dropdown-option");
 			attr(li, "style", li_style_value = `display: ${"block"}`);
 			toggle_class(li, "goa-dropdown-option--disabled", false);
 			toggle_class(li, "goa-dropdown-option--tabbed", /*index*/ ctx[41] === /*highlightedIndex*/ ctx[13]);
@@ -4072,6 +4104,12 @@ function create_each_block$4(ctx) {
 				attr(li, "aria-label", li_aria_label_value);
 			}
 
+			if (dirty[0] & /*_values, options*/ 1536 && li_aria_selected_value !== (li_aria_selected_value = /*_values*/ ctx[9].includes(/*option*/ ctx[39].value)
+			? "true"
+			: "false")) {
+				attr(li, "aria-selected", li_aria_selected_value);
+			}
+
 			if (dirty[0] & /*options*/ 1024 && li_data_testid_value !== (li_data_testid_value = `${/*option*/ ctx[39].value}-dropdown-item`)) {
 				attr(li, "data-testid", li_data_testid_value);
 			}
@@ -4092,7 +4130,7 @@ function create_each_block$4(ctx) {
 	};
 }
 
-function create_fragment$q(ctx) {
+function create_fragment$r(ctx) {
 	let div1;
 	let t0;
 	let div0;
@@ -4233,7 +4271,7 @@ function create_fragment$q(ctx) {
 				attr(div0, "data-testid", div0_data_testid_value);
 			}
 
-			if (dirty[0] & /*options, highlightedIndex, _values, onSelect*/ 534016) {
+			if (dirty[0] & /*options, _values, highlightedIndex, onSelect*/ 534016) {
 				each_value = /*options*/ ctx[10];
 				let i;
 
@@ -4292,7 +4330,7 @@ function create_fragment$q(ctx) {
 
 const MAX_HEIGHT = "300px";
 
-function instance$o($$self, $$props, $$invalidate) {
+function instance$p($$self, $$props, $$invalidate) {
 	let _disabled;
 	let _multiselect;
 	let { name } = $$props;
@@ -4436,7 +4474,7 @@ function instance$o($$self, $$props, $$invalidate) {
 	}
 
 	// Event handlers
-	function onSelect(val, label) {
+	function onSelect(val, label, close) {
 		if (_disabled) return;
 		$$invalidate(11, selectedLabel = label);
 
@@ -4458,7 +4496,9 @@ function instance$o($$self, $$props, $$invalidate) {
 				}));
 		}
 
-		closeMenu();
+		if (close) {
+			closeMenu();
+		}
 	}
 
 	const onInputKeyDown = e => {
@@ -4483,20 +4523,22 @@ function instance$o($$self, $$props, $$invalidate) {
 	function onMenuKeyDown(e) {
 		switch (e.key) {
 			case "ArrowUp":
-				if (highlightedIndex === 0) {
-					$$invalidate(13, highlightedIndex = options.length - 1);
-				} else {
+				if (highlightedIndex > 0) {
 					$$invalidate(13, highlightedIndex--, highlightedIndex);
+					onSelect(options[highlightedIndex].value, options[highlightedIndex].label, false);
 				}
 				e.preventDefault();
 				break;
 			case "ArrowDown":
-				$$invalidate(13, highlightedIndex = (highlightedIndex + 1) % options.length);
+				if (highlightedIndex < options.length - 1) {
+					$$invalidate(13, highlightedIndex++, highlightedIndex);
+					onSelect(options[highlightedIndex].value, options[highlightedIndex].label, false);
+				}
 				e.preventDefault();
 				break;
 			case "Tab":
 			case "Enter":
-				onSelect(options[highlightedIndex].value, options[highlightedIndex].label);
+				closeMenu();
 				e.preventDefault();
 				break;
 			case "Escape":
@@ -4510,7 +4552,7 @@ function instance$o($$self, $$props, $$invalidate) {
 		$$invalidate(13, highlightedIndex = Number(e.target.dataset.index));
 	}
 
-	const click_handler = option => onSelect(option.value, option.label);
+	const click_handler = option => onSelect(option.value, option.label, true);
 
 	function ul_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
@@ -4591,8 +4633,8 @@ class Dropdown extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$o,
-			create_fragment$q,
+			instance$p,
+			create_fragment$r,
 			safe_not_equal,
 			{
 				name: 0,
@@ -4743,7 +4785,7 @@ customElements.define("goa-dropdown", Dropdown);
 
 /* libs/web-components/src/components/dropdown/DropdownItem.svelte generated by Svelte v3.49.0 */
 
-function create_fragment$p(ctx) {
+function create_fragment$q(ctx) {
 	return {
 		c() {
 			this.c = noop;
@@ -4756,7 +4798,7 @@ function create_fragment$p(ctx) {
 	};
 }
 
-function instance$n($$self, $$props, $$invalidate) {
+function instance$o($$self, $$props, $$invalidate) {
 	let { name = "" } = $$props;
 	let { value = "" } = $$props;
 	let { label = "" } = $$props;
@@ -4803,8 +4845,8 @@ class DropdownItem extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$n,
-			create_fragment$p,
+			instance$o,
+			create_fragment$q,
 			safe_not_equal,
 			{ name: 0, value: 1, label: 2 },
 			null
@@ -4858,7 +4900,7 @@ customElements.define("goa-dropdown-item", DropdownItem);
 
 /* libs/web-components/src/components/flex-column/FlexColumn.svelte generated by Svelte v3.49.0 */
 
-function create_fragment$o(ctx) {
+function create_fragment$p(ctx) {
 	let div;
 	let slot;
 
@@ -4887,7 +4929,7 @@ function create_fragment$o(ctx) {
 	};
 }
 
-function instance$m($$self, $$props, $$invalidate) {
+function instance$n($$self, $$props, $$invalidate) {
 	let _gap;
 	let { gap = "" } = $$props;
 
@@ -4920,8 +4962,8 @@ class FlexColumn extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$m,
-			create_fragment$o,
+			instance$n,
+			create_fragment$p,
 			safe_not_equal,
 			{ gap: 1 },
 			null
@@ -4957,7 +4999,7 @@ customElements.define("goa-flex-col", FlexColumn);
 
 /* libs/web-components/src/components/flex-row/FlexRow.svelte generated by Svelte v3.49.0 */
 
-function create_fragment$n(ctx) {
+function create_fragment$o(ctx) {
 	let div;
 	let slot;
 
@@ -4986,7 +5028,7 @@ function create_fragment$n(ctx) {
 	};
 }
 
-function instance$l($$self, $$props, $$invalidate) {
+function instance$m($$self, $$props, $$invalidate) {
 	let _gap;
 	let { gap = "" } = $$props;
 
@@ -5019,8 +5061,8 @@ class FlexRow extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$l,
-			create_fragment$n,
+			instance$m,
+			create_fragment$o,
 			safe_not_equal,
 			{ gap: 1 },
 			null
@@ -5056,7 +5098,7 @@ customElements.define("goa-flex-row", FlexRow);
 
 /* libs/web-components/src/components/focus-trap/FocusTrap.svelte generated by Svelte v3.49.0 */
 
-function create_fragment$m(ctx) {
+function create_fragment$n(ctx) {
 	let div;
 
 	return {
@@ -5102,7 +5144,7 @@ function isFocusable(element) {
 	}
 }
 
-function instance$k($$self, $$props, $$invalidate) {
+function instance$l($$self, $$props, $$invalidate) {
 	let isActive;
 	let { active } = $$props;
 	let ignoreFocusChanges = false;
@@ -5278,8 +5320,8 @@ class FocusTrap extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$k,
-			create_fragment$m,
+			instance$l,
+			create_fragment$n,
 			safe_not_equal,
 			{ active: 1 },
 			null
@@ -5354,7 +5396,7 @@ function create_each_block$3(ctx) {
 	};
 }
 
-function create_fragment$l(ctx) {
+function create_fragment$m(ctx) {
 	let section;
 	let div;
 	let t;
@@ -5427,7 +5469,7 @@ function create_fragment$l(ctx) {
 	};
 }
 
-function instance$j($$self, $$props, $$invalidate) {
+function instance$k($$self, $$props, $$invalidate) {
 	let rootEl;
 	let children = [];
 
@@ -5471,8 +5513,8 @@ class FooterMetaSection extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$j,
-			create_fragment$l,
+			instance$k,
+			create_fragment$m,
 			safe_not_equal,
 			{},
 			null
@@ -5562,7 +5604,7 @@ function create_each_block$2(ctx) {
 	};
 }
 
-function create_fragment$k(ctx) {
+function create_fragment$l(ctx) {
 	let section;
 	let t0;
 	let div;
@@ -5677,7 +5719,7 @@ function create_fragment$k(ctx) {
 	};
 }
 
-function instance$i($$self, $$props, $$invalidate) {
+function instance$j($$self, $$props, $$invalidate) {
 	let { name = "" } = $$props;
 	let { maxcolumncount = 1 } = $$props;
 	let rootEl;
@@ -5742,8 +5784,8 @@ class FooterNavSection extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$i,
-			create_fragment$k,
+			instance$j,
+			create_fragment$l,
 			safe_not_equal,
 			{ name: 0, maxcolumncount: 1 },
 			null
@@ -5805,7 +5847,8 @@ function create_if_block$a(ctx) {
 	};
 }
 
-function create_fragment$j(ctx) {
+function create_fragment$k(ctx) {
+	let div5;
 	let div4;
 	let div0;
 	let t0;
@@ -5817,10 +5860,12 @@ function create_fragment$j(ctx) {
 	let a0;
 	let t3;
 	let a1;
-	let if_block = /*navLinks*/ ctx[1]?.length && create_if_block$a();
+	let div5_style_value;
+	let if_block = /*navLinks*/ ctx[2]?.length && create_if_block$a();
 
 	return {
 		c() {
+			div5 = element("div");
 			div4 = element("div");
 			div0 = element("div");
 			div0.innerHTML = `<slot name="nav"></slot>`;
@@ -5836,7 +5881,7 @@ function create_fragment$j(ctx) {
 			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[3]} Government of Alberta`;
+			a1.textContent = `© ${/*year*/ ctx[4]} Government of Alberta`;
 			this.c = noop;
 			attr(div0, "class", "nav-links");
 			attr(div1, "class", "meta-links");
@@ -5844,13 +5889,16 @@ function create_fragment$j(ctx) {
 			attr(a1, "href", "https://alberta.ca");
 			attr(a1, "class", "goa-copyright");
 			attr(div2, "class", "abgov");
-			toggle_class(div2, "with-meta-links", /*metaLinks*/ ctx[2]?.length);
+			toggle_class(div2, "with-meta-links", /*metaLinks*/ ctx[3]?.length);
 			attr(div3, "class", "meta-section");
-			toggle_class(div3, "with-meta-links", /*metaLinks*/ ctx[2]?.length);
-			attr(div4, "class", "app-footer");
+			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] || "var(--layout-max-content-width)"}`);
 		},
 		m(target, anchor) {
-			insert(target, div4, anchor);
+			insert(target, div5, anchor);
+			append(div5, div4);
 			append(div4, div0);
 			append(div4, t0);
 			if (if_block) if_block.m(div4, null);
@@ -5862,10 +5910,10 @@ function create_fragment$j(ctx) {
 			append(div2, a0);
 			append(div2, t3);
 			append(div2, a1);
-			/*div4_binding*/ ctx[4](div4);
+			/*div5_binding*/ ctx[5](div5);
 		},
 		p(ctx, [dirty]) {
-			if (/*navLinks*/ ctx[1]?.length) {
+			if (/*navLinks*/ ctx[2]?.length) {
 				if (if_block) ; else {
 					if_block = create_if_block$a();
 					if_block.c();
@@ -5876,25 +5924,30 @@ function create_fragment$j(ctx) {
 				if_block = null;
 			}
 
-			if (dirty & /*metaLinks*/ 4) {
-				toggle_class(div2, "with-meta-links", /*metaLinks*/ ctx[2]?.length);
+			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 & /*metaLinks*/ 4) {
-				toggle_class(div3, "with-meta-links", /*metaLinks*/ ctx[2]?.length);
+			if (dirty & /*maxcontentwidth*/ 1 && div5_style_value !== (div5_style_value = `--max-content-width: ${/*maxcontentwidth*/ ctx[0] || "var(--layout-max-content-width)"}`)) {
+				attr(div5, "style", div5_style_value);
 			}
 		},
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(div4);
+			if (detaching) detach(div5);
 			if (if_block) if_block.d();
-			/*div4_binding*/ ctx[4](null);
+			/*div5_binding*/ ctx[5](null);
 		}
 	};
 }
 
-function instance$h($$self, $$props, $$invalidate) {
+function instance$i($$self, $$props, $$invalidate) {
+	let { maxcontentwidth = "" } = $$props;
 	let rootEl;
 	let navLinks;
 	let metaLinks;
@@ -5904,24 +5957,28 @@ function instance$h($$self, $$props, $$invalidate) {
 		await tick();
 		const navSlot = rootEl.querySelector("slot[name=nav]");
 		const metaSlot = rootEl.querySelector("slot[name=meta]");
-		$$invalidate(1, navLinks = navSlot.assignedElements());
-		$$invalidate(2, metaLinks = metaSlot.assignedElements());
+		$$invalidate(2, navLinks = navSlot.assignedElements());
+		$$invalidate(3, metaLinks = metaSlot.assignedElements());
 	});
 
-	function div4_binding($$value) {
+	function div5_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			rootEl = $$value;
-			$$invalidate(0, rootEl);
+			$$invalidate(1, rootEl);
 		});
 	}
 
-	return [rootEl, navLinks, metaLinks, year, div4_binding];
+	$$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>.app-footer{background-color:var(--color-gray-100);padding:2rem;border-top:2px solid var(--color-gray-200);border-bottom:1rem solid var(--goa-color-brand)}.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>`;
+		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), 100vw)}@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,
@@ -5930,10 +5987,10 @@ class Footer extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$h,
-			create_fragment$j,
+			instance$i,
+			create_fragment$k,
 			safe_not_equal,
-			{},
+			{ maxcontentwidth: 0 },
 			null
 		);
 
@@ -5941,8 +5998,26 @@ class Footer extends SvelteElement {
 			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);
@@ -6056,7 +6131,7 @@ function create_if_block$9(ctx) {
 	};
 }
 
-function create_fragment$i(ctx) {
+function create_fragment$j(ctx) {
 	let div1;
 	let t0;
 	let div0;
@@ -6142,7 +6217,7 @@ function create_fragment$i(ctx) {
 	};
 }
 
-function instance$g($$self, $$props, $$invalidate) {
+function instance$h($$self, $$props, $$invalidate) {
 	let isOptional;
 	let { label = "" } = $$props;
 	let { helptext = "" } = $$props;
@@ -6177,8 +6252,8 @@ class FormItem extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$g,
-			create_fragment$i,
+			instance$h,
+			create_fragment$j,
 			safe_not_equal,
 			{
 				label: 0,
@@ -6246,7 +6321,7 @@ customElements.define("goa-form-item", FormItem);
 
 /* libs/web-components/src/components/hero-banner/HeroBanner.svelte generated by Svelte v3.49.0 */
 
-function create_fragment$h(ctx) {
+function create_fragment$i(ctx) {
 	let div1;
 	let goa_page_block;
 	let h1;
@@ -6304,7 +6379,7 @@ function create_fragment$h(ctx) {
 	};
 }
 
-function instance$f($$self, $$props, $$invalidate) {
+function instance$g($$self, $$props, $$invalidate) {
 	let { heading } = $$props;
 	let { backgroundurl } = $$props;
 
@@ -6328,8 +6403,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, backgroundurl: 1 },
 			null
@@ -6374,7 +6449,7 @@ customElements.define("goa-hero-banner", HeroBanner);
 
 /* libs/web-components/src/components/icon-button/IconButton.svelte generated by Svelte v3.49.0 */
 
-function create_fragment$g(ctx) {
+function create_fragment$h(ctx) {
 	let button;
 	let goa_icon;
 	let mounted;
@@ -6460,7 +6535,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;
@@ -6536,8 +6611,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,
 			{
 				type: 0,
@@ -6682,7 +6757,7 @@ function create_if_block$8(ctx) {
 	};
 }
 
-function create_fragment$f(ctx) {
+function create_fragment$g(ctx) {
 	let div;
 	let div_data_testid_value;
 	let div_style_value;
@@ -6754,7 +6829,7 @@ function create_fragment$f(ctx) {
 	};
 }
 
-function instance$d($$self, $$props, $$invalidate) {
+function instance$e($$self, $$props, $$invalidate) {
 	let isInverted;
 	let _size;
 	let { type } = $$props;
@@ -6817,8 +6892,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,
 			{
 				type: 0,
@@ -7177,7 +7252,7 @@ function create_if_block_1$5(ctx) {
 	};
 }
 
-function create_fragment$e(ctx) {
+function create_fragment$f(ctx) {
 	let div1;
 	let div0;
 	let t0;
@@ -7451,7 +7526,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;
@@ -7618,8 +7693,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,
@@ -8058,7 +8133,7 @@ function create_if_block$6(ctx) {
 	};
 }
 
-function create_fragment$d(ctx) {
+function create_fragment$e(ctx) {
 	let header;
 	let t0;
 	let show_if = ["alpha", "beta"].includes(/*type*/ ctx[0]);
@@ -8149,7 +8224,7 @@ function capitalize(val) {
 	return val[0].toUpperCase() + val.slice(1);
 }
 
-function instance$b($$self, $$props, $$invalidate) {
+function instance$c($$self, $$props, $$invalidate) {
 	let { type } = $$props;
 	let { version } = $$props;
 	let { feedbackurl } = $$props;
@@ -8175,8 +8250,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
@@ -8520,7 +8595,7 @@ function create_if_block_1$3(ctx) {
 	};
 }
 
-function create_fragment$c(ctx) {
+function create_fragment$d(ctx) {
 	let if_block_anchor;
 	let current;
 	let if_block = /*isOpen*/ ctx[5] && create_if_block$5(ctx);
@@ -8576,7 +8651,7 @@ function create_fragment$c(ctx) {
 	};
 }
 
-function instance$a($$self, $$props, $$invalidate) {
+function instance$b($$self, $$props, $$invalidate) {
 	let isClosable;
 	let isScrollable;
 	let isOpen;
@@ -8657,8 +8732,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,
@@ -8830,7 +8905,7 @@ function create_if_block$4(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$4(ctx);
@@ -8886,7 +8961,7 @@ function create_fragment$b(ctx) {
 	};
 }
 
-function instance$9($$self, $$props, $$invalidate) {
+function instance$a($$self, $$props, $$invalidate) {
 	let iconType;
 	let { type } = $$props;
 	let show = true;
@@ -8926,8 +9001,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
@@ -8968,7 +9043,7 @@ function isValidDimension(value) {
 
 /* libs/web-components/src/components/page-block/PageBlock.svelte generated by Svelte v3.49.0 */
 
-function create_fragment$a(ctx) {
+function create_fragment$b(ctx) {
 	let div;
 	let slot;
 	let div_style_value;
@@ -8998,7 +9073,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;
@@ -9037,8 +9112,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
@@ -9193,7 +9268,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;
@@ -9262,7 +9337,7 @@ function create_fragment$9(ctx) {
 	};
 }
 
-function instance$7($$self, $$props, $$invalidate) {
+function instance$8($$self, $$props, $$invalidate) {
 	let isDisabled;
 	let { name } = $$props;
 	let { value } = $$props;
@@ -9377,8 +9452,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,
@@ -9466,7 +9541,7 @@ customElements.define("goa-radio-group", RadioGroup);
 
 /* libs/web-components/src/components/radio-group/RadioItem.svelte generated by Svelte v3.49.0 */
 
-function create_fragment$8(ctx) {
+function create_fragment$9(ctx) {
 	return {
 		c() {
 			this.c = noop;
@@ -9479,7 +9554,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;
@@ -9533,8 +9608,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
@@ -9588,7 +9663,7 @@ customElements.define("goa-radio-item", RadioItem);
 
 /* libs/web-components/src/components/scrollable/Scrollable.svelte generated by Svelte v3.49.0 */
 
-function create_fragment$7(ctx) {
+function create_fragment$8(ctx) {
 	let div;
 	let slot;
 	let div_style_value;
@@ -9635,7 +9710,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;
@@ -9663,8 +9738,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,
@@ -10072,7 +10147,7 @@ function create_each_block(ctx) {
 	};
 }
 
-function create_fragment$6(ctx) {
+function create_fragment$7(ctx) {
 	let current_block_type_index;
 	let if_block;
 	let if_block_anchor;
@@ -10144,7 +10219,7 @@ function create_fragment$6(ctx) {
 	};
 }
 
-function instance$4($$self, $$props, $$invalidate) {
+function instance$5($$self, $$props, $$invalidate) {
 	let { width = 320 } = $$props;
 	let { size = 1 } = $$props;
 	let { linecount = 3 } = $$props;
@@ -10172,8 +10247,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,
 			{ width: 0, size: 1, linecount: 2, type: 3 },
 			null
@@ -10444,7 +10519,7 @@ function create_if_block$2(ctx) {
 	};
 }
 
-function create_fragment$5(ctx) {
+function create_fragment$6(ctx) {
 	let if_block_anchor;
 	let if_block = /*ready*/ ctx[6] && create_if_block$2(ctx);
 
@@ -10481,7 +10556,7 @@ function create_fragment$5(ctx) {
 	};
 }
 
-function instance$3($$self, $$props, $$invalidate) {
+function instance$4($$self, $$props, $$invalidate) {
 	let diameter;
 	let strokewidth;
 	let radius;
@@ -10600,8 +10675,8 @@ class Spinner extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$3,
-			create_fragment$5,
+			instance$4,
+			create_fragment$6,
 			safe_not_equal,
 			{
 				size: 10,
@@ -10772,7 +10847,7 @@ function create_if_block_1$1(ctx) {
 	};
 }
 
-function create_fragment$4(ctx) {
+function create_fragment$5(ctx) {
 	let div;
 	let textarea;
 	let textarea_aria_label_value;
@@ -10883,7 +10958,7 @@ function create_fragment$4(ctx) {
 	};
 }
 
-function instance$2($$self, $$props, $$invalidate) {
+function instance$3($$self, $$props, $$invalidate) {
 	let isError;
 	let isDisabled;
 	let isReadonly;
@@ -10985,8 +11060,8 @@ class TextArea extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$2,
-			create_fragment$4,
+			instance$3,
+			create_fragment$5,
 			safe_not_equal,
 			{
 				name: 0,
@@ -11145,6 +11220,135 @@ class TextArea extends SvelteElement {
 
 customElements.define("goa-textarea", TextArea);
 
+/* libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte generated by Svelte v3.49.0 */
+
+function create_fragment$4(ctx) {
+	let div;
+	let header;
+	let t0;
+	let section;
+	let t2;
+	let footer;
+	let div_style_value;
+
+	return {
+		c() {
+			div = element("div");
+			header = element("header");
+			header.innerHTML = `<slot name="header"></slot>`;
+			t0 = space();
+			section = element("section");
+
+			section.innerHTML = `<nav class="nav"><slot name="nav"></slot></nav> 
+
+    <main><slot></slot></main>`;
+
+			t2 = space();
+			footer = element("footer");
+			footer.innerHTML = `<slot name="footer"></slot>`;
+			this.c = noop;
+			attr(header, "class", "header");
+			attr(section, "class", "content");
+			attr(footer, "class", "footer");
+			attr(div, "class", "page");
+
+			attr(div, "style", div_style_value = `
+    --max-content-width: ${/*maxcontentwidth*/ ctx[1] || "var(--layout-max-content-width)"};
+    --nav-column-width: ${/*navcolumnwidth*/ ctx[0] || "var(--layout-nav-column-width)"};
+  `);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, header);
+			append(div, t0);
+			append(div, section);
+			append(div, t2);
+			append(div, footer);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*maxcontentwidth, navcolumnwidth*/ 3 && div_style_value !== (div_style_value = `
+    --max-content-width: ${/*maxcontentwidth*/ ctx[1] || "var(--layout-max-content-width)"};
+    --nav-column-width: ${/*navcolumnwidth*/ ctx[0] || "var(--layout-nav-column-width)"};
+  `)) {
+				attr(div, "style", div_style_value);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+function instance$2($$self, $$props, $$invalidate) {
+	let { navcolumnwidth = "" } = $$props;
+	let { maxcontentwidth = "" } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('navcolumnwidth' in $$props) $$invalidate(0, navcolumnwidth = $$props.navcolumnwidth);
+		if ('maxcontentwidth' in $$props) $$invalidate(1, maxcontentwidth = $$props.maxcontentwidth);
+	};
+
+	return [navcolumnwidth, maxcontentwidth];
+}
+
+class TwoColumnLayout extends SvelteElement {
+	constructor(options) {
+		super();
+		this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.page{height:100vh;display:flex;flex-direction:column;position:relative}.content{flex:1 1 auto;position:relative;display:flex;flex-direction:column;gap:2rem}.header,.footer{flex:0 0 auto}main{flex:1 1 auto;padding:0 1rem}.nav{padding:0 1rem;transition:transform 200ms ease-in-out;background-color:var(--color-white)}.nav>*{display:block;padding:0.5rem 0}@media(min-width: 640px){.page{gap:2rem}.content{display:flex;flex-direction:row;justify-content:center;width:min(var(--max-content-width), 100vw);margin:0 auto}.nav{padding:0 2rem}main{padding-right:2rem}}@media(min-width: 1300px){main{padding-right:4.5rem}}@media(min-width: 640px){.nav{transform:translateX(0);flex:0 0 var(--nav-column-width)}}</style>`;
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance$2,
+			create_fragment$4,
+			safe_not_equal,
+			{ navcolumnwidth: 0, maxcontentwidth: 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 ["navcolumnwidth", "maxcontentwidth"];
+	}
+
+	get navcolumnwidth() {
+		return this.$$.ctx[0];
+	}
+
+	set navcolumnwidth(navcolumnwidth) {
+		this.$$set({ navcolumnwidth });
+		flush();
+	}
+
+	get maxcontentwidth() {
+		return this.$$.ctx[1];
+	}
+
+	set maxcontentwidth(maxcontentwidth) {
+		this.$$set({ maxcontentwidth });
+		flush();
+	}
+}
+
+customElements.define("goa-two-column-layout", TwoColumnLayout);
+
 /* libs/web-components/src/layouts/FullScreenNavbarLayout.svelte generated by Svelte v3.49.0 */
 
 function create_fragment$3(ctx) {