@abgov/react-components 4.0.0-alpha.54 → 4.0.0-alpha.55

package/react-components.umd.js

@@ -1101,7 +1101,7 @@
 	    }
 
 	  };
-	} // (12:2) {#if url}
+	} // (18:4) {#if url}
 
 
 	function create_if_block$j(ctx) {
@@ -1171,10 +1171,12 @@
 	  };
 	}
 
-	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 (
@@ -1187,20 +1189,26 @@
 	  let if_block = current_block_type(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",
+	      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);
@@ -1222,24 +1230,32 @@
 	      if (dirty &
 	      /*testid*/
 	      4) {
-	        attr(div1, "data-testid",
+	        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;
@@ -1249,28 +1265,33 @@
 	  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, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$z, create_fragment$E, safe_not_equal, {
+	    }, instance$A, create_fragment$F, safe_not_equal, {
 	      heading: 0,
 	      url: 1,
-	      testid: 2
+	      testid: 2,
+	      maxcontentwidth: 3
 	    }, null);
 
 	    if (options) {
@@ -1286,7 +1307,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["heading", "url", "testid"];
+	    return ["heading", "url", "testid", "maxcontentwidth"];
 	  }
 
 	  get heading() {
@@ -1322,6 +1343,17 @@
 	    flush();
 	  }
 
+	  get maxcontentwidth() {
+	    return this.$$.ctx[3];
+	  }
+
+	  set maxcontentwidth(maxcontentwidth) {
+	    this.$$set({
+	      maxcontentwidth
+	    });
+	    flush();
+	  }
+
 	}
 
 	customElements.define("goa-app-header", AppHeader);
@@ -1428,7 +1460,7 @@
 	  };
 	}
 
-	function create_fragment$D(ctx) {
+	function create_fragment$E(ctx) {
 	  let div;
 	  let t;
 	  let div_class_value;
@@ -1540,7 +1572,7 @@
 	  };
 	}
 
-	function instance$y($$self, $$props, $$invalidate) {
+	function instance$z($$self, $$props, $$invalidate) {
 	  let showIcon;
 	  let iconType;
 	  let {
@@ -1602,7 +1634,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$y, create_fragment$D, safe_not_equal, {
+	    }, instance$z, create_fragment$E, safe_not_equal, {
 	      type: 0,
 	      testid: 1,
 	      icon: 5,
@@ -1674,7 +1706,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;
 	  return {
@@ -1723,7 +1755,7 @@
 	  };
 	}
 
-	function instance$x($$self, $$props, $$invalidate) {
+	function instance$y($$self, $$props, $$invalidate) {
 	  let {
 	    gap = "medium"
 	  } = $$props;
@@ -1747,7 +1779,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$x, create_fragment$C, safe_not_equal, {
+	    }, instance$y, create_fragment$D, safe_not_equal, {
 	      gap: 0,
 	      alignment: 1
 	    }, null);
@@ -1991,7 +2023,7 @@
 	  };
 	}
 
-	function create_fragment$B(ctx) {
+	function create_fragment$C(ctx) {
 	  let button;
 	  let button_class_value;
 	  let mounted;
@@ -2125,7 +2157,7 @@
 	  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"];
@@ -2215,7 +2247,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$w, create_fragment$B, safe_not_equal, {
+	    }, instance$x, create_fragment$C, safe_not_equal, {
 	      type: 0,
 	      size: 1,
 	      variant: 2,
@@ -2354,7 +2386,7 @@
 	  };
 	}
 
-	function create_fragment$A(ctx) {
+	function create_fragment$B(ctx) {
 	  let div;
 	  let span0;
 	  let goa_icon;
@@ -2465,7 +2497,7 @@
 	  };
 	}
 
-	function instance$v($$self, $$props, $$invalidate) {
+	function instance$w($$self, $$props, $$invalidate) {
 	  let iconType;
 	  let {
 	    type
@@ -2502,7 +2534,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$v, create_fragment$A, safe_not_equal, {
+	    }, instance$w, create_fragment$B, safe_not_equal, {
 	      type: 0,
 	      heading: 1,
 	      testid: 2
@@ -2562,7 +2594,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 {
 	    c() {
@@ -2593,7 +2625,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$z, safe_not_equal, {}, null);
+	    }, null, create_fragment$A, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -2607,7 +2639,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 {
 	    c() {
@@ -2640,7 +2672,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$y, safe_not_equal, {}, null);
+	    }, null, create_fragment$z, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -2654,7 +2686,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 {
 	    c() {
@@ -2687,7 +2719,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$x, safe_not_equal, {}, null);
+	    }, null, create_fragment$y, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -2701,7 +2733,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 {
 	    c() {
@@ -2750,7 +2782,7 @@
 	  };
 	}
 
-	function instance$u($$self, $$props, $$invalidate) {
+	function instance$v($$self, $$props, $$invalidate) {
 	  let {
 	    src
 	  } = $$props;
@@ -2774,7 +2806,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$u, create_fragment$w, safe_not_equal, {
+	    }, instance$v, create_fragment$x, safe_not_equal, {
 	      src: 0,
 	      height: 1
 	    }, null);
@@ -2822,7 +2854,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;
@@ -2881,7 +2913,7 @@
 	  };
 	}
 
-	function instance$t($$self, $$props, $$invalidate) {
+	function instance$u($$self, $$props, $$invalidate) {
 	  let {
 	    elevation = 0
 	  } = $$props;
@@ -2910,7 +2942,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$t, create_fragment$v, safe_not_equal, {
+	    }, instance$u, create_fragment$w, safe_not_equal, {
 	      elevation: 0,
 	      width: 1,
 	      testId: 2
@@ -3024,7 +3056,7 @@
 	  };
 	}
 
-	function create_fragment$u(ctx) {
+	function create_fragment$v(ctx) {
 	  let label;
 	  let div0;
 	  let input;
@@ -3233,7 +3265,7 @@
 	  };
 	}
 
-	function instance$s($$self, $$props, $$invalidate) {
+	function instance$t($$self, $$props, $$invalidate) {
 	  let isDisabled;
 	  let isError;
 	  let isChecked;
@@ -3320,7 +3352,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$s, create_fragment$u, safe_not_equal, {
+	    }, instance$t, create_fragment$v, safe_not_equal, {
 	      name: 0,
 	      checked: 9,
 	      text: 1,
@@ -3518,7 +3550,7 @@
 	  };
 	}
 
-	function create_fragment$t(ctx) {
+	function create_fragment$u(ctx) {
 	  let div1;
 	  let t0;
 	  let div0;
@@ -3655,7 +3687,7 @@
 	  };
 	}
 
-	function instance$r($$self, $$props, $$invalidate) {
+	function instance$s($$self, $$props, $$invalidate) {
 	  let {
 	    leadingicon = null
 	  } = $$props;
@@ -3732,7 +3764,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$r, create_fragment$t, safe_not_equal, {
+	    }, instance$s, create_fragment$u, safe_not_equal, {
 	      leadingicon: 0,
 	      error: 7,
 	      deletable: 8,
@@ -4288,7 +4320,7 @@
 	  };
 	}
 
-	function create_fragment$s(ctx) {
+	function create_fragment$t(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
@@ -4353,7 +4385,7 @@
 	  };
 	}
 
-	function instance$q($$self, $$props, $$invalidate) {
+	function instance$r($$self, $$props, $$invalidate) {
 	  let isVisible;
 	  let {
 	    variant = "inline"
@@ -4407,7 +4439,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$q, create_fragment$s, safe_not_equal, {
+	    }, instance$r, create_fragment$t, safe_not_equal, {
 	      variant: 6,
 	      size: 7,
 	      message: 0,
@@ -4491,7 +4523,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;
@@ -4586,7 +4618,7 @@
 	  };
 	}
 
-	function instance$p($$self, $$props, $$invalidate) {
+	function instance$q($$self, $$props, $$invalidate) {
 	  let _colored;
 
 	  let {
@@ -4628,7 +4660,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$p, create_fragment$r, safe_not_equal, {
+	    }, instance$q, create_fragment$s, safe_not_equal, {
 	      type: 0,
 	      colored: 4,
 	      headingsize: 1,
@@ -4989,7 +5021,7 @@
 	  };
 	}
 
-	function create_fragment$q(ctx) {
+	function create_fragment$r(ctx) {
 	  let div1;
 	  let t0;
 	  let div0;
@@ -5306,7 +5338,7 @@
 
 	const MAX_HEIGHT = "300px";
 
-	function instance$o($$self, $$props, $$invalidate) {
+	function instance$p($$self, $$props, $$invalidate) {
 	  const showMenu = _async(function () {
 	    if (_disabled || isMenuVisible) {
 	      return;
@@ -5602,7 +5634,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$o, create_fragment$q, safe_not_equal, {
+	    }, instance$p, create_fragment$r, safe_not_equal, {
 	      name: 0,
 	      arialabel: 1,
 	      value: 20,
@@ -5758,7 +5790,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;
@@ -5772,7 +5804,7 @@
 	  };
 	}
 
-	function instance$n($$self, $$props, $$invalidate) {
+	function instance$o($$self, $$props, $$invalidate) {
 	  let {
 	    name = ""
 	  } = $$props;
@@ -5820,7 +5852,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$n, create_fragment$p, safe_not_equal, {
+	    }, instance$o, create_fragment$q, safe_not_equal, {
 	      name: 0,
 	      value: 1,
 	      label: 2
@@ -5880,7 +5912,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;
 	  return {
@@ -5919,7 +5951,7 @@
 	  };
 	}
 
-	function instance$m($$self, $$props, $$invalidate) {
+	function instance$n($$self, $$props, $$invalidate) {
 	  let _gap;
 
 	  let {
@@ -5949,7 +5981,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$m, create_fragment$o, safe_not_equal, {
+	    }, instance$n, create_fragment$p, safe_not_equal, {
 	      gap: 1
 	    }, null);
 
@@ -5985,7 +6017,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;
 	  return {
@@ -6024,7 +6056,7 @@
 	  };
 	}
 
-	function instance$l($$self, $$props, $$invalidate) {
+	function instance$m($$self, $$props, $$invalidate) {
 	  let _gap;
 
 	  let {
@@ -6054,7 +6086,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$l, create_fragment$n, safe_not_equal, {
+	    }, instance$m, create_fragment$o, safe_not_equal, {
 	      gap: 1
 	    }, null);
 
@@ -6090,7 +6122,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 {
 	    c() {
@@ -6144,7 +6176,7 @@
 	  }
 	}
 
-	function instance$k($$self, $$props, $$invalidate) {
+	function instance$l($$self, $$props, $$invalidate) {
 	  let isActive;
 	  let {
 	    active
@@ -6312,7 +6344,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$k, create_fragment$m, safe_not_equal, {
+	    }, instance$l, create_fragment$n, safe_not_equal, {
 	      active: 1
 	    }, null);
 
@@ -6402,7 +6434,7 @@
 	  };
 	}
 
-	function create_fragment$l(ctx) {
+	function create_fragment$m(ctx) {
 	  let section;
 	  let div;
 	  let t;
@@ -6490,7 +6522,7 @@
 	  };
 	}
 
-	function instance$j($$self, $$props, $$invalidate) {
+	function instance$k($$self, $$props, $$invalidate) {
 	  let rootEl;
 	  let children = [];
 	  onMount(function () {
@@ -6525,7 +6557,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$j, create_fragment$l, safe_not_equal, {}, null);
+	    }, instance$k, create_fragment$m, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -6635,7 +6667,7 @@
 	  };
 	}
 
-	function create_fragment$k(ctx) {
+	function create_fragment$l(ctx) {
 	  let section;
 	  let t0;
 	  let div;
@@ -6782,7 +6814,7 @@
 	  };
 	}
 
-	function instance$i($$self, $$props, $$invalidate) {
+	function instance$j($$self, $$props, $$invalidate) {
 	  let {
 	    name = ""
 	  } = $$props;
@@ -6840,7 +6872,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$i, create_fragment$k, safe_not_equal, {
+	    }, instance$j, create_fragment$l, safe_not_equal, {
 	      name: 0,
 	      maxcolumncount: 1
 	    }, null);
@@ -6907,9 +6939,10 @@
 	  };
 	}
 
-	function create_fragment$j(ctx) {
+	function create_fragment$k(ctx) {
 	  var _ctx$;
 
+	  let div5;
 	  let div4;
 	  let div0;
 	  let t0;
@@ -6921,13 +6954,15 @@
 	  let a0;
 	  let t3;
 	  let a1;
+	  let div5_style_value;
 	  let if_block =
 	  /*navLinks*/
-	  ((_ctx$ = ctx[1]) === null || _ctx$ === void 0 ? void 0 : _ctx$.length) && create_if_block$a();
+	  ((_ctx$ = ctx[2]) === null || _ctx$ === void 0 ? void 0 : _ctx$.length) && create_if_block$a();
 	  return {
 	    c() {
 	      var _ctx$2, _ctx$3;
 
+	      div5 = element("div");
 	      div4 = element("div");
 	      div0 = element("div");
 	      div0.innerHTML = `<slot name="nav"></slot>`;
@@ -6945,7 +6980,7 @@
 	      a1 = element("a");
 	      a1.textContent = `© ${
       /*year*/
-      ctx[3]} Government of Alberta`;
+      ctx[4]} Government of Alberta`;
 	      this.c = noop;
 	      attr(div0, "class", "nav-links");
 	      attr(div1, "class", "meta-links");
@@ -6955,16 +6990,21 @@
 	      attr(div2, "class", "abgov");
 	      toggle_class(div2, "with-meta-links",
 	      /*metaLinks*/
-	      (_ctx$2 = ctx[2]) === null || _ctx$2 === void 0 ? void 0 : _ctx$2.length);
+	      (_ctx$2 = ctx[3]) === null || _ctx$2 === void 0 ? void 0 : _ctx$2.length);
 	      attr(div3, "class", "meta-section");
 	      toggle_class(div3, "with-meta-links",
 	      /*metaLinks*/
-	      (_ctx$3 = ctx[2]) === null || _ctx$3 === void 0 ? void 0 : _ctx$3.length);
-	      attr(div4, "class", "app-footer");
+	      (_ctx$3 = ctx[3]) === null || _ctx$3 === void 0 ? void 0 : _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);
@@ -6976,9 +7016,9 @@
 	      append(div2, a0);
 	      append(div2, t3);
 	      append(div2, a1);
-	      /*div4_binding*/
+	      /*div5_binding*/
 
-	      ctx[4](div4);
+	      ctx[5](div5);
 	    },
 
 	    p(ctx, [dirty]) {
@@ -6986,7 +7026,7 @@
 
 	      if (
 	      /*navLinks*/
-	      (_ctx$4 = ctx[1]) !== null && _ctx$4 !== void 0 && _ctx$4.length) {
+	      (_ctx$4 = ctx[2]) !== null && _ctx$4 !== void 0 && _ctx$4.length) {
 	        if (if_block) ;else {
 	          if_block = create_if_block$a();
 	          if_block.c();
@@ -6999,22 +7039,30 @@
 
 	      if (dirty &
 	      /*metaLinks*/
-	      4) {
+	      8) {
 	        var _ctx$5;
 
 	        toggle_class(div2, "with-meta-links",
 	        /*metaLinks*/
-	        (_ctx$5 = ctx[2]) === null || _ctx$5 === void 0 ? void 0 : _ctx$5.length);
+	        (_ctx$5 = ctx[3]) === null || _ctx$5 === void 0 ? void 0 : _ctx$5.length);
 	      }
 
 	      if (dirty &
 	      /*metaLinks*/
-	      4) {
+	      8) {
 	        var _ctx$6;
 
 	        toggle_class(div3, "with-meta-links",
 	        /*metaLinks*/
-	        (_ctx$6 = ctx[2]) === null || _ctx$6 === void 0 ? void 0 : _ctx$6.length);
+	        (_ctx$6 = ctx[3]) === null || _ctx$6 === void 0 ? void 0 : _ctx$6.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);
 	      }
 	    },
 
@@ -7022,17 +7070,20 @@
 	    o: noop,
 
 	    d(detaching) {
-	      if (detaching) detach(div4);
+	      if (detaching) detach(div5);
 	      if (if_block) if_block.d();
-	      /*div4_binding*/
+	      /*div5_binding*/
 
-	      ctx[4](null);
+	      ctx[5](null);
 	    }
 
 	  };
 	}
 
-	function instance$h($$self, $$props, $$invalidate) {
+	function instance$i($$self, $$props, $$invalidate) {
+	  let {
+	    maxcontentwidth = ""
+	  } = $$props;
 	  let rootEl;
 	  let navLinks;
 	  let metaLinks;
@@ -7041,38 +7092,64 @@
 	    return _call(tick, function () {
 	      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, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$h, create_fragment$j, safe_not_equal, {}, null);
+	    }, 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);
@@ -7218,7 +7295,7 @@
 	  };
 	}
 
-	function create_fragment$i(ctx) {
+	function create_fragment$j(ctx) {
 	  let div1;
 	  let t0;
 	  let div0;
@@ -7320,7 +7397,7 @@
 	  };
 	}
 
-	function instance$g($$self, $$props, $$invalidate) {
+	function instance$h($$self, $$props, $$invalidate) {
 	  let isOptional;
 	  let {
 	    label = ""
@@ -7361,7 +7438,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$g, create_fragment$i, safe_not_equal, {
+	    }, instance$h, create_fragment$j, safe_not_equal, {
 	      label: 0,
 	      helptext: 1,
 	      error: 2,
@@ -7433,7 +7510,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;
@@ -7507,7 +7584,7 @@
 	  };
 	}
 
-	function instance$f($$self, $$props, $$invalidate) {
+	function instance$g($$self, $$props, $$invalidate) {
 	  let {
 	    heading
 	  } = $$props;
@@ -7531,7 +7608,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$f, create_fragment$h, safe_not_equal, {
+	    }, instance$g, create_fragment$i, safe_not_equal, {
 	      heading: 0,
 	      backgroundurl: 1
 	    }, null);
@@ -7579,7 +7656,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;
@@ -7734,7 +7811,7 @@
 	  }));
 	}
 
-	function instance$e($$self, $$props, $$invalidate) {
+	function instance$f($$self, $$props, $$invalidate) {
 	  let css;
 	  let isDisabled;
 	  let isInverted;
@@ -7819,7 +7896,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$e, create_fragment$g, safe_not_equal, {
+	    }, instance$f, create_fragment$h, safe_not_equal, {
 	      type: 0,
 	      size: 1,
 	      theme: 2,
@@ -7987,7 +8064,7 @@
 	  };
 	}
 
-	function create_fragment$f(ctx) {
+	function create_fragment$g(ctx) {
 	  let div;
 	  let div_data_testid_value;
 	  let div_style_value;
@@ -8101,7 +8178,7 @@
 	  };
 	}
 
-	function instance$d($$self, $$props, $$invalidate) {
+	function instance$e($$self, $$props, $$invalidate) {
 	  let isInverted;
 
 	  let _size;
@@ -8171,7 +8248,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$d, create_fragment$f, safe_not_equal, {
+	    }, instance$e, create_fragment$g, safe_not_equal, {
 	      type: 0,
 	      size: 8,
 	      theme: 1,
@@ -8625,7 +8702,7 @@
 	  };
 	}
 
-	function create_fragment$e(ctx) {
+	function create_fragment$f(ctx) {
 	  let div1;
 	  let div0;
 	  let t0;
@@ -9054,7 +9131,7 @@
 	  }));
 	}
 
-	function instance$c($$self, $$props, $$invalidate) {
+	function instance$d($$self, $$props, $$invalidate) {
 	  let handlesTrailingIconClick;
 	  let isFocused;
 	  let isReadonly;
@@ -9246,7 +9323,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$c, create_fragment$e, safe_not_equal, {
+	    }, instance$d, create_fragment$f, safe_not_equal, {
 	      type: 1,
 	      name: 2,
 	      value: 0,
@@ -9741,7 +9818,7 @@
 	  };
 	}
 
-	function create_fragment$d(ctx) {
+	function create_fragment$e(ctx) {
 	  let header;
 	  let t0;
 	  let show_if = ["alpha", "beta"].includes(
@@ -9850,7 +9927,7 @@
 	  return val[0].toUpperCase() + val.slice(1);
 	}
 
-	function instance$b($$self, $$props, $$invalidate) {
+	function instance$c($$self, $$props, $$invalidate) {
 	  let {
 	    type
 	  } = $$props;
@@ -9878,7 +9955,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$b, create_fragment$d, safe_not_equal, {
+	    }, instance$c, create_fragment$e, safe_not_equal, {
 	      type: 0,
 	      version: 1,
 	      feedbackurl: 2
@@ -10290,7 +10367,7 @@
 	  };
 	}
 
-	function create_fragment$c(ctx) {
+	function create_fragment$d(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
@@ -10355,7 +10432,7 @@
 	  };
 	}
 
-	function instance$a($$self, $$props, $$invalidate) {
+	function instance$b($$self, $$props, $$invalidate) {
 	  let isClosable;
 	  let isScrollable;
 	  let isOpen;
@@ -10441,7 +10518,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$a, create_fragment$c, safe_not_equal, {
+	    }, instance$b, create_fragment$d, safe_not_equal, {
 	      heading: 0,
 	      closable: 8,
 	      scrollable: 9,
@@ -10638,7 +10715,7 @@
 	  };
 	}
 
-	function create_fragment$b(ctx) {
+	function create_fragment$c(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
@@ -10703,7 +10780,7 @@
 	  };
 	}
 
-	function instance$9($$self, $$props, $$invalidate) {
+	function instance$a($$self, $$props, $$invalidate) {
 	  let iconType;
 	  let {
 	    type
@@ -10737,7 +10814,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$9, create_fragment$b, safe_not_equal, {
+	    }, instance$a, create_fragment$c, safe_not_equal, {
 	      type: 0
 	    }, null);
 
@@ -10779,7 +10856,7 @@
 	/* 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;
@@ -10819,7 +10896,7 @@
 	  };
 	}
 
-	function instance$8($$self, $$props, $$invalidate) {
+	function instance$9($$self, $$props, $$invalidate) {
 	  const Sizes = {
 	    "full": "100%"
 	  };
@@ -10860,7 +10937,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$8, create_fragment$a, safe_not_equal, {
+	    }, instance$9, create_fragment$b, safe_not_equal, {
 	      width: 1,
 	      _width: 0
 	    }, null);
@@ -11083,7 +11160,7 @@
 	  };
 	}
 
-	function create_fragment$9(ctx) {
+	function create_fragment$a(ctx) {
 	  let div;
 	  let slot;
 	  let t;
@@ -11182,7 +11259,7 @@
 	  };
 	}
 
-	function instance$7($$self, $$props, $$invalidate) {
+	function instance$8($$self, $$props, $$invalidate) {
 	  let isDisabled;
 	  let {
 	    name
@@ -11294,7 +11371,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$7, create_fragment$9, safe_not_equal, {
+	    }, instance$8, create_fragment$a, safe_not_equal, {
 	      name: 1,
 	      value: 0,
 	      orientation: 2,
@@ -11390,7 +11467,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;
@@ -11404,7 +11481,7 @@
 	  };
 	}
 
-	function instance$6($$self, $$props, $$invalidate) {
+	function instance$7($$self, $$props, $$invalidate) {
 	  let {
 	    value
 	  } = $$props;
@@ -11459,7 +11536,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$6, create_fragment$8, safe_not_equal, {
+	    }, instance$7, create_fragment$9, safe_not_equal, {
 	      value: 0,
 	      label: 1,
 	      name: 2
@@ -11519,7 +11596,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;
@@ -11587,7 +11664,7 @@
 	  };
 	}
 
-	function instance$5($$self, $$props, $$invalidate) {
+	function instance$6($$self, $$props, $$invalidate) {
 	  let {
 	    direction = "vertical"
 	  } = $$props;
@@ -11619,7 +11696,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$5, create_fragment$7, safe_not_equal, {
+	    }, instance$6, create_fragment$8, safe_not_equal, {
 	      direction: 0,
 	      hpadding: 1,
 	      vpadding: 2,
@@ -12147,7 +12224,7 @@
 	  };
 	}
 
-	function create_fragment$6(ctx) {
+	function create_fragment$7(ctx) {
 	  let current_block_type_index;
 	  let if_block;
 	  let if_block_anchor;
@@ -12228,7 +12305,7 @@
 	  };
 	}
 
-	function instance$4($$self, $$props, $$invalidate) {
+	function instance$5($$self, $$props, $$invalidate) {
 	  let {
 	    width = 320
 	  } = $$props;
@@ -12260,7 +12337,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$4, create_fragment$6, safe_not_equal, {
+	    }, instance$5, create_fragment$7, safe_not_equal, {
 	      width: 0,
 	      size: 1,
 	      linecount: 2,
@@ -12642,7 +12719,7 @@
 	  };
 	}
 
-	function create_fragment$5(ctx) {
+	function create_fragment$6(ctx) {
 	  let if_block_anchor;
 	  let if_block =
 	  /*ready*/
@@ -12687,7 +12764,7 @@
 	  };
 	}
 
-	function instance$3($$self, $$props, $$invalidate) {
+	function instance$4($$self, $$props, $$invalidate) {
 	  let diameter;
 	  let strokewidth;
 	  let radius;
@@ -12818,7 +12895,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$3, create_fragment$5, safe_not_equal, {
+	    }, instance$4, create_fragment$6, safe_not_equal, {
 	      size: 10,
 	      invert: 0,
 	      progress: 11,
@@ -13034,7 +13111,7 @@
 	  };
 	}
 
-	function create_fragment$4(ctx) {
+	function create_fragment$5(ctx) {
 	  let div;
 	  let textarea;
 	  let textarea_aria_label_value;
@@ -13218,7 +13295,7 @@
 	  };
 	}
 
-	function instance$2($$self, $$props, $$invalidate) {
+	function instance$3($$self, $$props, $$invalidate) {
 	  let isError;
 	  let isDisabled;
 	  let isReadonly;
@@ -13330,7 +13407,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$2, create_fragment$4, safe_not_equal, {
+	    }, instance$3, create_fragment$5, safe_not_equal, {
 	      name: 0,
 	      value: 1,
 	      placeholder: 2,
@@ -13496,6 +13573,148 @@
 	}
 
 	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) {
@@ -14055,10 +14274,12 @@
 	var GoAAppHeader = function GoAAppHeader(_a) {
 	  var heading = _a.heading,
 	      url = _a.url,
+	      maxContentWidth = _a.maxContentWidth,
 	      children = _a.children;
 	  return jsxRuntime.jsx("goa-app-header", __assign({
 	    heading: heading,
-	    url: url
+	    url: url,
+	    maxcontentwidth: maxContentWidth
 	  }, {
 	    children: children
 	  }), void 0);
@@ -14435,10 +14656,13 @@
 	}
 
 	function GoAAppFooter(_a) {
-	  var children = _a.children;
-	  return jsxRuntime.jsx("goa-app-footer", {
+	  var maxContentWidth = _a.maxContentWidth,
+	      children = _a.children;
+	  return jsxRuntime.jsx("goa-app-footer", __assign({
+	    maxcontentwidth: maxContentWidth
+	  }, {
 	    children: children
-	  }, void 0);
+	  }), void 0);
 	}
 
 	var GoAFormItem = function GoAFormItem(_a) {
@@ -14941,6 +15165,27 @@
 	  }, void 0);
 	};
 
+	function GoATwoColumnLayout(props) {
+	  return jsxRuntime.jsxs("goa-two-column-layout", __assign({
+	    navcolumnwidth: props.navColumnWidth,
+	    maxcontentwidth: props.maxContentWidth
+	  }, {
+	    children: [props.header && jsxRuntime.jsx("div", __assign({
+	      slot: "header"
+	    }, {
+	      children: props.header
+	    }), void 0), props.nav && jsxRuntime.jsx("div", __assign({
+	      slot: "nav"
+	    }, {
+	      children: props.nav
+	    }), void 0), props.children, props.footer && jsxRuntime.jsx("div", __assign({
+	      slot: "footer"
+	    }, {
+	      children: props.footer
+	    }), void 0)]
+	  }), void 0);
+	}
+
 	exports.GoAAppFooter = GoAAppFooter;
 	exports.GoAAppFooterMetaSection = GoAAppFooterMetaSection;
 	exports.GoAAppFooterNavSection = GoAAppFooterNavSection;
@@ -14991,6 +15236,7 @@
 	exports.GoASpinner = GoASpinner;
 	exports.GoASuccessBadge = GoASuccessBadge;
 	exports.GoATextArea = GoATextArea;
+	exports.GoATwoColumnLayout = GoATwoColumnLayout;
 
 	Object.defineProperty(exports, '__esModule', { value: true });