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

package/react-components.esm.js

@@ -1060,7 +1060,7 @@ function create_else_block$4(ctx) {
     }
 
   };
-} // (12:2) {#if url}
+} // (18:4) {#if url}
 
 
 function create_if_block$j(ctx) {
@@ -1130,10 +1130,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 (
@@ -1146,20 +1148,26 @@ function create_fragment$E(ctx) {
   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);
@@ -1181,24 +1189,32 @@ function create_fragment$E(ctx) {
       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;
@@ -1208,28 +1224,33 @@ function instance$z($$self, $$props, $$invalidate) {
   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) {
@@ -1245,7 +1266,7 @@ class AppHeader extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["heading", "url", "testid"];
+    return ["heading", "url", "testid", "maxcontentwidth"];
   }
 
   get heading() {
@@ -1281,6 +1302,17 @@ class AppHeader extends SvelteElement {
     flush();
   }
 
+  get maxcontentwidth() {
+    return this.$$.ctx[3];
+  }
+
+  set maxcontentwidth(maxcontentwidth) {
+    this.$$set({
+      maxcontentwidth
+    });
+    flush();
+  }
+
 }
 
 customElements.define("goa-app-header", AppHeader);
@@ -1387,7 +1419,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;
@@ -1499,7 +1531,7 @@ function create_fragment$D(ctx) {
   };
 }
 
-function instance$y($$self, $$props, $$invalidate) {
+function instance$z($$self, $$props, $$invalidate) {
   let showIcon;
   let iconType;
   let {
@@ -1561,7 +1593,7 @@ class Badge extends SvelteElement {
       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,
@@ -1633,7 +1665,7 @@ class Badge extends SvelteElement {
 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 {
@@ -1682,7 +1714,7 @@ function create_fragment$C(ctx) {
   };
 }
 
-function instance$x($$self, $$props, $$invalidate) {
+function instance$y($$self, $$props, $$invalidate) {
   let {
     gap = "medium"
   } = $$props;
@@ -1706,7 +1738,7 @@ class ButtonGroup extends SvelteElement {
       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);
@@ -1950,7 +1982,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;
@@ -2084,7 +2116,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"];
@@ -2174,7 +2206,7 @@ class Button extends SvelteElement {
       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,
@@ -2313,7 +2345,7 @@ function create_if_block$g(ctx) {
   };
 }
 
-function create_fragment$A(ctx) {
+function create_fragment$B(ctx) {
   let div;
   let span0;
   let goa_icon;
@@ -2424,7 +2456,7 @@ function create_fragment$A(ctx) {
   };
 }
 
-function instance$v($$self, $$props, $$invalidate) {
+function instance$w($$self, $$props, $$invalidate) {
   let iconType;
   let {
     type
@@ -2461,7 +2493,7 @@ class Callout extends SvelteElement {
       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
@@ -2521,7 +2553,7 @@ class Callout extends SvelteElement {
 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() {
@@ -2552,7 +2584,7 @@ class CardActions extends SvelteElement {
       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) {
@@ -2566,7 +2598,7 @@ class CardActions extends SvelteElement {
 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() {
@@ -2599,7 +2631,7 @@ class CardContent extends SvelteElement {
       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) {
@@ -2613,7 +2645,7 @@ class CardContent extends SvelteElement {
 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() {
@@ -2646,7 +2678,7 @@ class CardGroup extends SvelteElement {
       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) {
@@ -2660,7 +2692,7 @@ class CardGroup extends SvelteElement {
 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() {
@@ -2709,7 +2741,7 @@ function create_fragment$w(ctx) {
   };
 }
 
-function instance$u($$self, $$props, $$invalidate) {
+function instance$v($$self, $$props, $$invalidate) {
   let {
     src
   } = $$props;
@@ -2733,7 +2765,7 @@ class CardImage extends SvelteElement {
       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);
@@ -2781,7 +2813,7 @@ class CardImage extends SvelteElement {
 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;
@@ -2840,7 +2872,7 @@ function create_fragment$v(ctx) {
   };
 }
 
-function instance$t($$self, $$props, $$invalidate) {
+function instance$u($$self, $$props, $$invalidate) {
   let {
     elevation = 0
   } = $$props;
@@ -2869,7 +2901,7 @@ class Card extends SvelteElement {
       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
@@ -2983,7 +3015,7 @@ function create_if_block$f(ctx) {
   };
 }
 
-function create_fragment$u(ctx) {
+function create_fragment$v(ctx) {
   let label;
   let div0;
   let input;
@@ -3192,7 +3224,7 @@ function create_fragment$u(ctx) {
   };
 }
 
-function instance$s($$self, $$props, $$invalidate) {
+function instance$t($$self, $$props, $$invalidate) {
   let isDisabled;
   let isError;
   let isChecked;
@@ -3279,7 +3311,7 @@ class Checkbox extends SvelteElement {
       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,
@@ -3477,7 +3509,7 @@ function create_if_block$e(ctx) {
   };
 }
 
-function create_fragment$t(ctx) {
+function create_fragment$u(ctx) {
   let div1;
   let t0;
   let div0;
@@ -3614,7 +3646,7 @@ function create_fragment$t(ctx) {
   };
 }
 
-function instance$r($$self, $$props, $$invalidate) {
+function instance$s($$self, $$props, $$invalidate) {
   let {
     leadingicon = null
   } = $$props;
@@ -3691,7 +3723,7 @@ class Chip extends SvelteElement {
       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,
@@ -4247,7 +4279,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 =
@@ -4312,7 +4344,7 @@ function create_fragment$s(ctx) {
   };
 }
 
-function instance$q($$self, $$props, $$invalidate) {
+function instance$r($$self, $$props, $$invalidate) {
   let isVisible;
   let {
     variant = "inline"
@@ -4365,7 +4397,7 @@ class CircularProgress extends SvelteElement {
       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,
@@ -4449,7 +4481,7 @@ class CircularProgress extends SvelteElement {
 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;
@@ -4544,7 +4576,7 @@ function create_fragment$r(ctx) {
   };
 }
 
-function instance$p($$self, $$props, $$invalidate) {
+function instance$q($$self, $$props, $$invalidate) {
   let _colored;
 
   let {
@@ -4586,7 +4618,7 @@ class Container extends SvelteElement {
       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,
@@ -4947,7 +4979,7 @@ function create_each_block$4(ctx) {
   };
 }
 
-function create_fragment$q(ctx) {
+function create_fragment$r(ctx) {
   let div1;
   let t0;
   let div0;
@@ -5264,7 +5296,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;
@@ -5557,7 +5589,7 @@ class Dropdown extends SvelteElement {
       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,
@@ -5713,7 +5745,7 @@ class Dropdown extends SvelteElement {
 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;
@@ -5727,7 +5759,7 @@ function create_fragment$p(ctx) {
   };
 }
 
-function instance$n($$self, $$props, $$invalidate) {
+function instance$o($$self, $$props, $$invalidate) {
   let {
     name = ""
   } = $$props;
@@ -5775,7 +5807,7 @@ class DropdownItem extends SvelteElement {
       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
@@ -5835,7 +5867,7 @@ class DropdownItem extends SvelteElement {
 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 {
@@ -5874,7 +5906,7 @@ function create_fragment$o(ctx) {
   };
 }
 
-function instance$m($$self, $$props, $$invalidate) {
+function instance$n($$self, $$props, $$invalidate) {
   let _gap;
 
   let {
@@ -5904,7 +5936,7 @@ class FlexColumn extends SvelteElement {
       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);
 
@@ -5940,7 +5972,7 @@ class FlexColumn extends SvelteElement {
 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 {
@@ -5979,7 +6011,7 @@ function create_fragment$n(ctx) {
   };
 }
 
-function instance$l($$self, $$props, $$invalidate) {
+function instance$m($$self, $$props, $$invalidate) {
   let _gap;
 
   let {
@@ -6009,7 +6041,7 @@ class FlexRow extends SvelteElement {
       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);
 
@@ -6045,7 +6077,7 @@ class FlexRow extends SvelteElement {
 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() {
@@ -6099,7 +6131,7 @@ function isFocusable(element) {
   }
 }
 
-function instance$k($$self, $$props, $$invalidate) {
+function instance$l($$self, $$props, $$invalidate) {
   let isActive;
   let {
     active
@@ -6267,7 +6299,7 @@ class FocusTrap extends SvelteElement {
       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);
 
@@ -6357,7 +6389,7 @@ function create_each_block$3(ctx) {
   };
 }
 
-function create_fragment$l(ctx) {
+function create_fragment$m(ctx) {
   let section;
   let div;
   let t;
@@ -6445,7 +6477,7 @@ function create_fragment$l(ctx) {
   };
 }
 
-function instance$j($$self, $$props, $$invalidate) {
+function instance$k($$self, $$props, $$invalidate) {
   let rootEl;
   let children = [];
   onMount(async () => {
@@ -6480,7 +6512,7 @@ class FooterMetaSection extends SvelteElement {
       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) {
@@ -6590,7 +6622,7 @@ function create_each_block$2(ctx) {
   };
 }
 
-function create_fragment$k(ctx) {
+function create_fragment$l(ctx) {
   let section;
   let t0;
   let div;
@@ -6737,7 +6769,7 @@ function create_fragment$k(ctx) {
   };
 }
 
-function instance$i($$self, $$props, $$invalidate) {
+function instance$j($$self, $$props, $$invalidate) {
   let {
     name = ""
   } = $$props;
@@ -6794,7 +6826,7 @@ class FooterNavSection extends SvelteElement {
       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);
@@ -6861,9 +6893,10 @@ function create_if_block$a(ctx) {
   };
 }
 
-function create_fragment$j(ctx) {
+function create_fragment$k(ctx) {
   var _ctx$;
 
+  let div5;
   let div4;
   let div0;
   let t0;
@@ -6875,13 +6908,15 @@ function create_fragment$j(ctx) {
   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>`;
@@ -6899,7 +6934,7 @@ function create_fragment$j(ctx) {
       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");
@@ -6909,16 +6944,21 @@ function create_fragment$j(ctx) {
       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);
@@ -6930,9 +6970,9 @@ function create_fragment$j(ctx) {
       append(div2, a0);
       append(div2, t3);
       append(div2, a1);
-      /*div4_binding*/
+      /*div5_binding*/
 
-      ctx[4](div4);
+      ctx[5](div5);
     },
 
     p(ctx, [dirty]) {
@@ -6940,7 +6980,7 @@ function create_fragment$j(ctx) {
 
       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();
@@ -6953,22 +6993,30 @@ function create_fragment$j(ctx) {
 
       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);
       }
     },
 
@@ -6976,17 +7024,20 @@ function create_fragment$j(ctx) {
     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;
@@ -6995,37 +7046,63 @@ 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, {
       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);
@@ -7171,7 +7248,7 @@ function create_if_block$9(ctx) {
   };
 }
 
-function create_fragment$i(ctx) {
+function create_fragment$j(ctx) {
   let div1;
   let t0;
   let div0;
@@ -7273,7 +7350,7 @@ function create_fragment$i(ctx) {
   };
 }
 
-function instance$g($$self, $$props, $$invalidate) {
+function instance$h($$self, $$props, $$invalidate) {
   let isOptional;
   let {
     label = ""
@@ -7314,7 +7391,7 @@ class FormItem extends SvelteElement {
       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,
@@ -7386,7 +7463,7 @@ class FormItem extends SvelteElement {
 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;
@@ -7460,7 +7537,7 @@ function create_fragment$h(ctx) {
   };
 }
 
-function instance$f($$self, $$props, $$invalidate) {
+function instance$g($$self, $$props, $$invalidate) {
   let {
     heading
   } = $$props;
@@ -7484,7 +7561,7 @@ class HeroBanner extends SvelteElement {
       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);
@@ -7532,7 +7609,7 @@ class HeroBanner extends SvelteElement {
 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;
@@ -7687,7 +7764,7 @@ function handleClick(e) {
   }));
 }
 
-function instance$e($$self, $$props, $$invalidate) {
+function instance$f($$self, $$props, $$invalidate) {
   let css;
   let isDisabled;
   let isInverted;
@@ -7772,7 +7849,7 @@ class IconButton extends SvelteElement {
       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,
@@ -7940,7 +8017,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;
@@ -8054,7 +8131,7 @@ function create_fragment$f(ctx) {
   };
 }
 
-function instance$d($$self, $$props, $$invalidate) {
+function instance$e($$self, $$props, $$invalidate) {
   let isInverted;
 
   let _size;
@@ -8124,7 +8201,7 @@ class Icon extends SvelteElement {
       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,
@@ -8578,7 +8655,7 @@ function create_if_block_1$5(ctx) {
   };
 }
 
-function create_fragment$e(ctx) {
+function create_fragment$f(ctx) {
   let div1;
   let div0;
   let t0;
@@ -9007,7 +9084,7 @@ function doClick() {
   }));
 }
 
-function instance$c($$self, $$props, $$invalidate) {
+function instance$d($$self, $$props, $$invalidate) {
   let handlesTrailingIconClick;
   let isFocused;
   let isReadonly;
@@ -9199,7 +9276,7 @@ class Input extends SvelteElement {
       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,
@@ -9694,7 +9771,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(
@@ -9803,7 +9880,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;
@@ -9831,7 +9908,7 @@ class MicrositeHeader extends SvelteElement {
       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
@@ -10243,7 +10320,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 =
@@ -10308,7 +10385,7 @@ function create_fragment$c(ctx) {
   };
 }
 
-function instance$a($$self, $$props, $$invalidate) {
+function instance$b($$self, $$props, $$invalidate) {
   let isClosable;
   let isScrollable;
   let isOpen;
@@ -10394,7 +10471,7 @@ class Modal extends SvelteElement {
       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,
@@ -10591,7 +10668,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 =
@@ -10656,7 +10733,7 @@ function create_fragment$b(ctx) {
   };
 }
 
-function instance$9($$self, $$props, $$invalidate) {
+function instance$a($$self, $$props, $$invalidate) {
   let iconType;
   let {
     type
@@ -10690,7 +10767,7 @@ class Notification extends SvelteElement {
       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);
 
@@ -10732,7 +10809,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;
@@ -10772,7 +10849,7 @@ function create_fragment$a(ctx) {
   };
 }
 
-function instance$8($$self, $$props, $$invalidate) {
+function instance$9($$self, $$props, $$invalidate) {
   const Sizes = {
     "full": "100%"
   };
@@ -10813,7 +10890,7 @@ class PageBlock extends SvelteElement {
       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);
@@ -11036,7 +11113,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;
@@ -11135,7 +11212,7 @@ function create_fragment$9(ctx) {
   };
 }
 
-function instance$7($$self, $$props, $$invalidate) {
+function instance$8($$self, $$props, $$invalidate) {
   let isDisabled;
   let {
     name
@@ -11245,7 +11322,7 @@ class RadioGroup extends SvelteElement {
       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,
@@ -11341,7 +11418,7 @@ class RadioGroup extends SvelteElement {
 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;
@@ -11355,7 +11432,7 @@ function create_fragment$8(ctx) {
   };
 }
 
-function instance$6($$self, $$props, $$invalidate) {
+function instance$7($$self, $$props, $$invalidate) {
   let {
     value
   } = $$props;
@@ -11410,7 +11487,7 @@ class RadioItem extends SvelteElement {
       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
@@ -11470,7 +11547,7 @@ class RadioItem extends SvelteElement {
 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;
@@ -11538,7 +11615,7 @@ function create_fragment$7(ctx) {
   };
 }
 
-function instance$5($$self, $$props, $$invalidate) {
+function instance$6($$self, $$props, $$invalidate) {
   let {
     direction = "vertical"
   } = $$props;
@@ -11570,7 +11647,7 @@ class Scrollable extends SvelteElement {
       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,
@@ -12098,7 +12175,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;
@@ -12179,7 +12256,7 @@ function create_fragment$6(ctx) {
   };
 }
 
-function instance$4($$self, $$props, $$invalidate) {
+function instance$5($$self, $$props, $$invalidate) {
   let {
     width = 320
   } = $$props;
@@ -12211,7 +12288,7 @@ class Skeleton extends SvelteElement {
       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,
@@ -12593,7 +12670,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*/
@@ -12638,7 +12715,7 @@ function create_fragment$5(ctx) {
   };
 }
 
-function instance$3($$self, $$props, $$invalidate) {
+function instance$4($$self, $$props, $$invalidate) {
   let diameter;
   let strokewidth;
   let radius;
@@ -12769,7 +12846,7 @@ class Spinner extends SvelteElement {
       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,
@@ -12985,7 +13062,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;
@@ -13169,7 +13246,7 @@ function create_fragment$4(ctx) {
   };
 }
 
-function instance$2($$self, $$props, $$invalidate) {
+function instance$3($$self, $$props, $$invalidate) {
   let isError;
   let isDisabled;
   let isReadonly;
@@ -13281,7 +13358,7 @@ class TextArea extends SvelteElement {
       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,
@@ -13447,6 +13524,148 @@ 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) {
@@ -13968,11 +14187,13 @@ customElements.define("goa-page", Page);
 const GoAAppHeader = ({
   heading,
   url,
+  maxContentWidth,
   children
 }) => {
   return jsx("goa-app-header", Object.assign({
     heading: heading,
-    url: url
+    url: url,
+    maxcontentwidth: maxContentWidth
   }, {
     children: children
   }), void 0);
@@ -14358,11 +14579,14 @@ function GoAAppFooterNavSection({
 }
 
 function GoAAppFooter({
+  maxContentWidth,
   children
 }) {
-  return jsx("goa-app-footer", {
+  return jsx("goa-app-footer", Object.assign({
+    maxcontentwidth: maxContentWidth
+  }, {
     children: children
-  }, void 0);
+  }), void 0);
 }
 
 const GoAFormItem = ({
@@ -14904,4 +15128,25 @@ const GoATextArea = ({
   }, void 0);
 };
 
-export { GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADivider, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexCol, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPage, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea };
+function GoATwoColumnLayout(props) {
+  return jsxs("goa-two-column-layout", Object.assign({
+    navcolumnwidth: props.navColumnWidth,
+    maxcontentwidth: props.maxContentWidth
+  }, {
+    children: [props.header && jsx("div", Object.assign({
+      slot: "header"
+    }, {
+      children: props.header
+    }), void 0), props.nav && jsx("div", Object.assign({
+      slot: "nav"
+    }, {
+      children: props.nav
+    }), void 0), props.children, props.footer && jsx("div", Object.assign({
+      slot: "footer"
+    }, {
+      children: props.footer
+    }), void 0)]
+  }), void 0);
+}
+
+export { GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADivider, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexCol, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPage, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoATwoColumnLayout };