@abgov/react-components 4.0.0-alpha.100 → 4.0.0-alpha.101

package/react-components.umd.js

@@ -1192,7 +1192,7 @@
 	  };
 	}
 
-	function create_fragment$F(ctx) {
+	function create_fragment$G(ctx) {
 	  let div2;
 	  let div1;
 	  let t;
@@ -1276,7 +1276,7 @@
 	  };
 	}
 
-	function instance$A($$self, $$props, $$invalidate) {
+	function instance$B($$self, $$props, $$invalidate) {
 	  let {
 	    heading = ""
 	  } = $$props;
@@ -1308,7 +1308,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$A, create_fragment$F, safe_not_equal, {
+	    }, instance$B, create_fragment$G, safe_not_equal, {
 	      heading: 0,
 	      url: 1,
 	      testid: 2,
@@ -1525,7 +1525,7 @@
 	  };
 	}
 
-	function create_fragment$E(ctx) {
+	function create_fragment$F(ctx) {
 	  let div;
 	  let t;
 	  let div_style_value;
@@ -1661,7 +1661,7 @@
 	  };
 	}
 
-	function instance$z($$self, $$props, $$invalidate) {
+	function instance$A($$self, $$props, $$invalidate) {
 	  let showIcon;
 	  let iconType;
 	  const [Types, validateType] = typeValidator("Badge type", ["success", "important", "information", "emergency", "dark", "midtone", "light"], true);
@@ -1743,7 +1743,7 @@
 	      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, {
 	      type: 0,
 	      testid: 1,
 	      content: 2,
@@ -1863,7 +1863,7 @@
 	customElements.define("goa-badge", Badge);
 	/* libs/web-components/src/components/block/Block.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$D(ctx) {
+	function create_fragment$E(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -1937,7 +1937,7 @@
 	  };
 	}
 
-	function instance$y($$self, $$props, $$invalidate) {
+	function instance$z($$self, $$props, $$invalidate) {
 	  let {
 	    gap = "m"
 	  } = $$props;
@@ -1981,7 +1981,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, {
 	      gap: 0,
 	      direction: 1,
 	      alignment: 2,
@@ -2087,394 +2087,152 @@
 	}
 
 	customElements.define("goa-block", Block);
-	/* libs/web-components/src/components/button-group/ButtonGroup.svelte generated by Svelte v3.51.0 */
+	/* libs/web-components/src/components/button/Button.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$C(ctx) {
-	  let div;
+	function create_else_block$2(ctx) {
+	  let t0;
 	  let slot;
-	  let div_style_value;
+	  let t1;
+	  let if_block1_anchor;
+	  let if_block0 =
+	  /*leadingicon*/
+	  ctx[3] && create_if_block_2$6(ctx);
+	  let if_block1 =
+	  /*trailingicon*/
+	  ctx[4] && create_if_block_1$9(ctx);
 	  return {
 	    c() {
-	      div = element("div");
+	      if (if_block0) if_block0.c();
+	      t0 = space();
 	      slot = element("slot");
-	      this.c = noop;
-	      attr(div, "data-testid",
-	      /*testid*/
-	      ctx[1]);
-	      attr(div, "style", div_style_value = "" + (calculateMargin(
-	      /*mt*/
-	      ctx[2],
-	      /*mr*/
-	      ctx[3],
-	      /*mb*/
-	      ctx[4],
-	      /*ml*/
-	      ctx[5]) + "; --alignment: " +
-	      /*_alignment*/
-	      ctx[6] + "; --gap-size: " + (
-	      /*gap*/
-	      ctx[0] === "relaxed" ? "1rem" : "0.75rem")));
+	      t1 = space();
+	      if (if_block1) if_block1.c();
+	      if_block1_anchor = empty();
+	      attr(slot, "class", "text");
 	    },
 
 	    m(target, anchor) {
-	      insert(target, div, anchor);
-	      append(div, slot);
+	      if (if_block0) if_block0.m(target, anchor);
+	      insert(target, t0, anchor);
+	      insert(target, slot, anchor);
+	      insert(target, t1, anchor);
+	      if (if_block1) if_block1.m(target, anchor);
+	      insert(target, if_block1_anchor, anchor);
 	    },
 
-	    p(ctx, [dirty]) {
-	      if (dirty &
-	      /*testid*/
-	      2) {
-	        attr(div, "data-testid",
-	        /*testid*/
-	        ctx[1]);
+	    p(ctx, dirty) {
+	      if (
+	      /*leadingicon*/
+	      ctx[3]) {
+	        if (if_block0) {
+	          if_block0.p(ctx, dirty);
+	        } else {
+	          if_block0 = create_if_block_2$6(ctx);
+	          if_block0.c();
+	          if_block0.m(t0.parentNode, t0);
+	        }
+	      } else if (if_block0) {
+	        if_block0.d(1);
+	        if_block0 = null;
 	      }
 
-	      if (dirty &
-	      /*mt, mr, mb, ml, _alignment, gap*/
-	      125 && div_style_value !== (div_style_value = "" + (calculateMargin(
-	      /*mt*/
-	      ctx[2],
-	      /*mr*/
-	      ctx[3],
-	      /*mb*/
-	      ctx[4],
-	      /*ml*/
-	      ctx[5]) + "; --alignment: " +
-	      /*_alignment*/
-	      ctx[6] + "; --gap-size: " + (
-	      /*gap*/
-	      ctx[0] === "relaxed" ? "1rem" : "0.75rem")))) {
-	        attr(div, "style", div_style_value);
+	      if (
+	      /*trailingicon*/
+	      ctx[4]) {
+	        if (if_block1) {
+	          if_block1.p(ctx, dirty);
+	        } else {
+	          if_block1 = create_if_block_1$9(ctx);
+	          if_block1.c();
+	          if_block1.m(if_block1_anchor.parentNode, if_block1_anchor);
+	        }
+	      } else if (if_block1) {
+	        if_block1.d(1);
+	        if_block1 = null;
 	      }
 	    },
 
-	    i: noop,
-	    o: noop,
-
 	    d(detaching) {
-	      if (detaching) detach(div);
+	      if (if_block0) if_block0.d(detaching);
+	      if (detaching) detach(t0);
+	      if (detaching) detach(slot);
+	      if (detaching) detach(t1);
+	      if (if_block1) if_block1.d(detaching);
+	      if (detaching) detach(if_block1_anchor);
 	    }
 
 	  };
-	}
+	} // (45:2) {#if type === "start"}
 
-	function instance$x($$self, $$props, $$invalidate) {
-	  let _alignment;
 
-	  let {
-	    alignment = "start"
-	  } = $$props;
-	  let {
-	    gap = "relaxed"
-	  } = $$props;
-	  let {
-	    testid = ""
-	  } = $$props;
-	  let {
-	    mt = null
-	  } = $$props;
-	  let {
-	    mr = null
-	  } = $$props;
-	  let {
-	    mb = null
-	  } = $$props;
-	  let {
-	    ml = null
-	  } = $$props;
-	  const [BUTTON_ALIGNMENTS, validateAlignment] = typeValidator("alignment", ["start", "end", "center"]);
-	  const [GAPS, validateGap] = typeValidator("gap", ["relaxed", "compact"]);
-	  onMount(() => {
-	    validateAlignment(alignment);
-	    validateGap(gap);
-	  });
+	function create_if_block$f(ctx) {
+	  let slot;
+	  let t;
+	  let goa_icon;
+	  return {
+	    c() {
+	      slot = element("slot");
+	      t = space();
+	      goa_icon = element("goa-icon");
+	      attr(slot, "class", "text");
+	      set_custom_element_data(goa_icon, "id", "trailing-icon");
+	      set_custom_element_data(goa_icon, "type", "arrow-forward");
+	      set_custom_element_data(goa_icon, "inverted", "true");
+	    },
 
-	  $$self.$$set = $$props => {
-	    if ('alignment' in $$props) $$invalidate(7, alignment = $$props.alignment);
-	    if ('gap' in $$props) $$invalidate(0, gap = $$props.gap);
-	    if ('testid' in $$props) $$invalidate(1, testid = $$props.testid);
-	    if ('mt' in $$props) $$invalidate(2, mt = $$props.mt);
-	    if ('mr' in $$props) $$invalidate(3, mr = $$props.mr);
-	    if ('mb' in $$props) $$invalidate(4, mb = $$props.mb);
-	    if ('ml' in $$props) $$invalidate(5, ml = $$props.ml);
-	  };
+	    m(target, anchor) {
+	      insert(target, slot, anchor);
+	      insert(target, t, anchor);
+	      insert(target, goa_icon, anchor);
+	    },
 
-	  $$self.$$.update = () => {
-	    if ($$self.$$.dirty &
-	    /*alignment*/
-	    128) {
-	      $$invalidate(6, _alignment = {
-	        start: "flex-start",
-	        end: "flex-end",
-	        center: "center"
-	      }[alignment]);
+	    p: noop,
+
+	    d(detaching) {
+	      if (detaching) detach(slot);
+	      if (detaching) detach(t);
+	      if (detaching) detach(goa_icon);
 	    }
+
 	  };
+	} // (49:4) {#if leadingicon}
 
-	  return [gap, testid, mt, mr, mb, ml, _alignment, alignment];
-	}
 
-	class ButtonGroup extends SvelteElement {
-	  constructor(options) {
-	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}div{display:flex;flex-direction:row;justify-content:var(--alignment);align-items:center;flex-wrap:wrap;gap:var(--gap-size);padding:3px 0}</style>`;
-	    init(this, {
-	      target: this.shadowRoot,
-	      props: attribute_to_object(this.attributes),
-	      customElement: true
-	    }, instance$x, create_fragment$C, safe_not_equal, {
-	      alignment: 7,
-	      gap: 0,
-	      testid: 1,
-	      mt: 2,
-	      mr: 3,
-	      mb: 4,
-	      ml: 5
-	    }, null);
+	function create_if_block_2$6(ctx) {
+	  let goa_icon;
+	  return {
+	    c() {
+	      goa_icon = element("goa-icon");
+	      set_custom_element_data(goa_icon, "id", "leading-icon");
+	      set_custom_element_data(goa_icon, "type",
+	      /*leadingicon*/
+	      ctx[3]);
+	      set_custom_element_data(goa_icon, "inverted",
+	      /*isButtonDark*/
+	      ctx[10]);
+	    },
 
-	    if (options) {
-	      if (options.target) {
-	        insert(options.target, this, options.anchor);
+	    m(target, anchor) {
+	      insert(target, goa_icon, anchor);
+	    },
+
+	    p(ctx, dirty) {
+	      if (dirty &
+	      /*leadingicon*/
+	      8) {
+	        set_custom_element_data(goa_icon, "type",
+	        /*leadingicon*/
+	        ctx[3]);
 	      }
 
-	      if (options.props) {
-	        this.$set(options.props);
-	        flush();
+	      if (dirty &
+	      /*isButtonDark*/
+	      1024) {
+	        set_custom_element_data(goa_icon, "inverted",
+	        /*isButtonDark*/
+	        ctx[10]);
 	      }
-	    }
-	  }
-
-	  static get observedAttributes() {
-	    return ["alignment", "gap", "testid", "mt", "mr", "mb", "ml"];
-	  }
-
-	  get alignment() {
-	    return this.$$.ctx[7];
-	  }
-
-	  set alignment(alignment) {
-	    this.$$set({
-	      alignment
-	    });
-	    flush();
-	  }
-
-	  get gap() {
-	    return this.$$.ctx[0];
-	  }
-
-	  set gap(gap) {
-	    this.$$set({
-	      gap
-	    });
-	    flush();
-	  }
-
-	  get testid() {
-	    return this.$$.ctx[1];
-	  }
-
-	  set testid(testid) {
-	    this.$$set({
-	      testid
-	    });
-	    flush();
-	  }
-
-	  get mt() {
-	    return this.$$.ctx[2];
-	  }
-
-	  set mt(mt) {
-	    this.$$set({
-	      mt
-	    });
-	    flush();
-	  }
-
-	  get mr() {
-	    return this.$$.ctx[3];
-	  }
-
-	  set mr(mr) {
-	    this.$$set({
-	      mr
-	    });
-	    flush();
-	  }
-
-	  get mb() {
-	    return this.$$.ctx[4];
-	  }
-
-	  set mb(mb) {
-	    this.$$set({
-	      mb
-	    });
-	    flush();
-	  }
-
-	  get ml() {
-	    return this.$$.ctx[5];
-	  }
-
-	  set ml(ml) {
-	    this.$$set({
-	      ml
-	    });
-	    flush();
-	  }
-
-	}
-
-	customElements.define("goa-button-group", ButtonGroup);
-	/* libs/web-components/src/components/button/Button.svelte generated by Svelte v3.51.0 */
-
-	function create_else_block$2(ctx) {
-	  let t0;
-	  let slot;
-	  let t1;
-	  let if_block1_anchor;
-	  let if_block0 =
-	  /*leadingicon*/
-	  ctx[3] && create_if_block_2$6(ctx);
-	  let if_block1 =
-	  /*trailingicon*/
-	  ctx[4] && create_if_block_1$9(ctx);
-	  return {
-	    c() {
-	      if (if_block0) if_block0.c();
-	      t0 = space();
-	      slot = element("slot");
-	      t1 = space();
-	      if (if_block1) if_block1.c();
-	      if_block1_anchor = empty();
-	      attr(slot, "class", "text");
-	    },
-
-	    m(target, anchor) {
-	      if (if_block0) if_block0.m(target, anchor);
-	      insert(target, t0, anchor);
-	      insert(target, slot, anchor);
-	      insert(target, t1, anchor);
-	      if (if_block1) if_block1.m(target, anchor);
-	      insert(target, if_block1_anchor, anchor);
-	    },
-
-	    p(ctx, dirty) {
-	      if (
-	      /*leadingicon*/
-	      ctx[3]) {
-	        if (if_block0) {
-	          if_block0.p(ctx, dirty);
-	        } else {
-	          if_block0 = create_if_block_2$6(ctx);
-	          if_block0.c();
-	          if_block0.m(t0.parentNode, t0);
-	        }
-	      } else if (if_block0) {
-	        if_block0.d(1);
-	        if_block0 = null;
-	      }
-
-	      if (
-	      /*trailingicon*/
-	      ctx[4]) {
-	        if (if_block1) {
-	          if_block1.p(ctx, dirty);
-	        } else {
-	          if_block1 = create_if_block_1$9(ctx);
-	          if_block1.c();
-	          if_block1.m(if_block1_anchor.parentNode, if_block1_anchor);
-	        }
-	      } else if (if_block1) {
-	        if_block1.d(1);
-	        if_block1 = null;
-	      }
-	    },
-
-	    d(detaching) {
-	      if (if_block0) if_block0.d(detaching);
-	      if (detaching) detach(t0);
-	      if (detaching) detach(slot);
-	      if (detaching) detach(t1);
-	      if (if_block1) if_block1.d(detaching);
-	      if (detaching) detach(if_block1_anchor);
-	    }
-
-	  };
-	} // (45:2) {#if type === "start"}
-
-
-	function create_if_block$f(ctx) {
-	  let slot;
-	  let t;
-	  let goa_icon;
-	  return {
-	    c() {
-	      slot = element("slot");
-	      t = space();
-	      goa_icon = element("goa-icon");
-	      attr(slot, "class", "text");
-	      set_custom_element_data(goa_icon, "id", "trailing-icon");
-	      set_custom_element_data(goa_icon, "type", "arrow-forward");
-	      set_custom_element_data(goa_icon, "inverted", "true");
-	    },
-
-	    m(target, anchor) {
-	      insert(target, slot, anchor);
-	      insert(target, t, anchor);
-	      insert(target, goa_icon, anchor);
-	    },
-
-	    p: noop,
-
-	    d(detaching) {
-	      if (detaching) detach(slot);
-	      if (detaching) detach(t);
-	      if (detaching) detach(goa_icon);
-	    }
-
-	  };
-	} // (49:4) {#if leadingicon}
-
-
-	function create_if_block_2$6(ctx) {
-	  let goa_icon;
-	  return {
-	    c() {
-	      goa_icon = element("goa-icon");
-	      set_custom_element_data(goa_icon, "id", "leading-icon");
-	      set_custom_element_data(goa_icon, "type",
-	      /*leadingicon*/
-	      ctx[3]);
-	      set_custom_element_data(goa_icon, "inverted",
-	      /*isButtonDark*/
-	      ctx[10]);
-	    },
-
-	    m(target, anchor) {
-	      insert(target, goa_icon, anchor);
-	    },
-
-	    p(ctx, dirty) {
-	      if (dirty &
-	      /*leadingicon*/
-	      8) {
-	        set_custom_element_data(goa_icon, "type",
-	        /*leadingicon*/
-	        ctx[3]);
-	      }
-
-	      if (dirty &
-	      /*isButtonDark*/
-	      1024) {
-	        set_custom_element_data(goa_icon, "inverted",
-	        /*isButtonDark*/
-	        ctx[10]);
-	      }
-	    },
+	    },
 
 	    d(detaching) {
 	      if (detaching) detach(goa_icon);
@@ -2527,7 +2285,7 @@
 	  };
 	}
 
-	function create_fragment$B(ctx) {
+	function create_fragment$D(ctx) {
 	  let button;
 	  let button_class_value;
 	  let button_style_value;
@@ -2685,7 +2443,7 @@
 	  e.stopPropagation();
 	}
 
-	function instance$w($$self, $$props, $$invalidate) {
+	function instance$y($$self, $$props, $$invalidate) {
 	  let isDisabled;
 	  let isButtonDark;
 	  const [Types, validateType] = typeValidator("Button type", ["primary", "submit", "secondary", "tertiary", "start"], true);
@@ -2772,7 +2530,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$w, create_fragment$B, safe_not_equal, {
+	    }, instance$y, create_fragment$D, safe_not_equal, {
 	      type: 0,
 	      size: 1,
 	      variant: 2,
@@ -2926,23 +2684,265 @@
 	}
 
 	customElements.define("goa-button", Button);
-	/* libs/web-components/src/components/callout/Callout.svelte generated by Svelte v3.51.0 */
+	/* libs/web-components/src/components/button-group/ButtonGroup.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block$e(ctx) {
-	  let h3;
-	  let t;
+	function create_fragment$C(ctx) {
+	  let div;
+	  let slot;
+	  let div_style_value;
 	  return {
 	    c() {
-	      h3 = element("h3");
-	      t = text(
-	      /*heading*/
-	      ctx[5]);
-	    },
-
-	    m(target, anchor) {
-	      insert(target, h3, anchor);
-	      append(h3, t);
-	    },
+	      div = element("div");
+	      slot = element("slot");
+	      this.c = noop;
+	      attr(div, "data-testid",
+	      /*testid*/
+	      ctx[1]);
+	      attr(div, "style", div_style_value = "" + (calculateMargin(
+	      /*mt*/
+	      ctx[2],
+	      /*mr*/
+	      ctx[3],
+	      /*mb*/
+	      ctx[4],
+	      /*ml*/
+	      ctx[5]) + "; --alignment: " +
+	      /*_alignment*/
+	      ctx[6] + "; --gap-size: " + (
+	      /*gap*/
+	      ctx[0] === "relaxed" ? "1rem" : "0.75rem")));
+	    },
+
+	    m(target, anchor) {
+	      insert(target, div, anchor);
+	      append(div, slot);
+	    },
+
+	    p(ctx, [dirty]) {
+	      if (dirty &
+	      /*testid*/
+	      2) {
+	        attr(div, "data-testid",
+	        /*testid*/
+	        ctx[1]);
+	      }
+
+	      if (dirty &
+	      /*mt, mr, mb, ml, _alignment, gap*/
+	      125 && div_style_value !== (div_style_value = "" + (calculateMargin(
+	      /*mt*/
+	      ctx[2],
+	      /*mr*/
+	      ctx[3],
+	      /*mb*/
+	      ctx[4],
+	      /*ml*/
+	      ctx[5]) + "; --alignment: " +
+	      /*_alignment*/
+	      ctx[6] + "; --gap-size: " + (
+	      /*gap*/
+	      ctx[0] === "relaxed" ? "1rem" : "0.75rem")))) {
+	        attr(div, "style", div_style_value);
+	      }
+	    },
+
+	    i: noop,
+	    o: noop,
+
+	    d(detaching) {
+	      if (detaching) detach(div);
+	    }
+
+	  };
+	}
+
+	function instance$x($$self, $$props, $$invalidate) {
+	  let _alignment;
+
+	  let {
+	    alignment = "start"
+	  } = $$props;
+	  let {
+	    gap = "relaxed"
+	  } = $$props;
+	  let {
+	    testid = ""
+	  } = $$props;
+	  let {
+	    mt = null
+	  } = $$props;
+	  let {
+	    mr = null
+	  } = $$props;
+	  let {
+	    mb = null
+	  } = $$props;
+	  let {
+	    ml = null
+	  } = $$props;
+	  const [BUTTON_ALIGNMENTS, validateAlignment] = typeValidator("alignment", ["start", "end", "center"]);
+	  const [GAPS, validateGap] = typeValidator("gap", ["relaxed", "compact"]);
+	  onMount(() => {
+	    validateAlignment(alignment);
+	    validateGap(gap);
+	  });
+
+	  $$self.$$set = $$props => {
+	    if ('alignment' in $$props) $$invalidate(7, alignment = $$props.alignment);
+	    if ('gap' in $$props) $$invalidate(0, gap = $$props.gap);
+	    if ('testid' in $$props) $$invalidate(1, testid = $$props.testid);
+	    if ('mt' in $$props) $$invalidate(2, mt = $$props.mt);
+	    if ('mr' in $$props) $$invalidate(3, mr = $$props.mr);
+	    if ('mb' in $$props) $$invalidate(4, mb = $$props.mb);
+	    if ('ml' in $$props) $$invalidate(5, ml = $$props.ml);
+	  };
+
+	  $$self.$$.update = () => {
+	    if ($$self.$$.dirty &
+	    /*alignment*/
+	    128) {
+	      $$invalidate(6, _alignment = {
+	        start: "flex-start",
+	        end: "flex-end",
+	        center: "center"
+	      }[alignment]);
+	    }
+	  };
+
+	  return [gap, testid, mt, mr, mb, ml, _alignment, alignment];
+	}
+
+	class ButtonGroup extends SvelteElement {
+	  constructor(options) {
+	    super();
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}div{display:flex;flex-direction:row;justify-content:var(--alignment);align-items:center;flex-wrap:wrap;gap:var(--gap-size);padding:3px 0}</style>`;
+	    init(this, {
+	      target: this.shadowRoot,
+	      props: attribute_to_object(this.attributes),
+	      customElement: true
+	    }, instance$x, create_fragment$C, safe_not_equal, {
+	      alignment: 7,
+	      gap: 0,
+	      testid: 1,
+	      mt: 2,
+	      mr: 3,
+	      mb: 4,
+	      ml: 5
+	    }, null);
+
+	    if (options) {
+	      if (options.target) {
+	        insert(options.target, this, options.anchor);
+	      }
+
+	      if (options.props) {
+	        this.$set(options.props);
+	        flush();
+	      }
+	    }
+	  }
+
+	  static get observedAttributes() {
+	    return ["alignment", "gap", "testid", "mt", "mr", "mb", "ml"];
+	  }
+
+	  get alignment() {
+	    return this.$$.ctx[7];
+	  }
+
+	  set alignment(alignment) {
+	    this.$$set({
+	      alignment
+	    });
+	    flush();
+	  }
+
+	  get gap() {
+	    return this.$$.ctx[0];
+	  }
+
+	  set gap(gap) {
+	    this.$$set({
+	      gap
+	    });
+	    flush();
+	  }
+
+	  get testid() {
+	    return this.$$.ctx[1];
+	  }
+
+	  set testid(testid) {
+	    this.$$set({
+	      testid
+	    });
+	    flush();
+	  }
+
+	  get mt() {
+	    return this.$$.ctx[2];
+	  }
+
+	  set mt(mt) {
+	    this.$$set({
+	      mt
+	    });
+	    flush();
+	  }
+
+	  get mr() {
+	    return this.$$.ctx[3];
+	  }
+
+	  set mr(mr) {
+	    this.$$set({
+	      mr
+	    });
+	    flush();
+	  }
+
+	  get mb() {
+	    return this.$$.ctx[4];
+	  }
+
+	  set mb(mb) {
+	    this.$$set({
+	      mb
+	    });
+	    flush();
+	  }
+
+	  get ml() {
+	    return this.$$.ctx[5];
+	  }
+
+	  set ml(ml) {
+	    this.$$set({
+	      ml
+	    });
+	    flush();
+	  }
+
+	}
+
+	customElements.define("goa-button-group", ButtonGroup);
+	/* libs/web-components/src/components/callout/Callout.svelte generated by Svelte v3.51.0 */
+
+	function create_if_block$e(ctx) {
+	  let h3;
+	  let t;
+	  return {
+	    c() {
+	      h3 = element("h3");
+	      t = text(
+	      /*heading*/
+	      ctx[5]);
+	    },
+
+	    m(target, anchor) {
+	      insert(target, h3, anchor);
+	      append(h3, t);
+	    },
 
 	    p(ctx, dirty) {
 	      if (dirty &
@@ -2959,7 +2959,7 @@
 	  };
 	}
 
-	function create_fragment$A(ctx) {
+	function create_fragment$B(ctx) {
 	  let div;
 	  let span0;
 	  let goa_icon;
@@ -3094,7 +3094,7 @@
 	  };
 	}
 
-	function instance$v($$self, $$props, $$invalidate) {
+	function instance$w($$self, $$props, $$invalidate) {
 	  let iconType;
 	  const [Types, validateType] = typeValidator("Callout type", ["emergency", "important", "information", "event", "success"], true);
 	  let {
@@ -3151,7 +3151,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, {
 	      mt: 0,
 	      mr: 1,
 	      mb: 2,
@@ -3259,7 +3259,7 @@
 	customElements.define("goa-callout", Callout);
 	/* libs/web-components/src/components/card-actions/CardActions.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$z(ctx) {
+	function create_fragment$A(ctx) {
 	  let goa_card_content;
 	  return {
 	    c() {
@@ -3290,7 +3290,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) {
@@ -3302,223 +3302,9 @@
 	}
 
 	customElements.define("goa-card-actions", CardActions);
-	/* libs/web-components/src/components/card-content/CardContent.svelte generated by Svelte v3.51.0 */
-
-	function create_fragment$y(ctx) {
-	  let div;
-	  return {
-	    c() {
-	      div = element("div");
-	      div.innerHTML = `<slot></slot>`;
-	      this.c = noop;
-	      attr(div, "class", "card-content");
-	    },
-
-	    m(target, anchor) {
-	      insert(target, div, anchor);
-	    },
-
-	    p: noop,
-	    i: noop,
-	    o: noop,
-
-	    d(detaching) {
-	      if (detaching) detach(div);
-	    }
-
-	  };
-	}
-
-	class CardContent extends SvelteElement {
-	  constructor(options) {
-	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.card-content{padding:1rem}</style>`;
-	    init(this, {
-	      target: this.shadowRoot,
-	      props: attribute_to_object(this.attributes),
-	      customElement: true
-	    }, null, create_fragment$y, safe_not_equal, {}, null);
-
-	    if (options) {
-	      if (options.target) {
-	        insert(options.target, this, options.anchor);
-	      }
-	    }
-	  }
-
-	}
-
-	customElements.define("goa-card-content", CardContent);
-	/* libs/web-components/src/components/card-group/CardGroup.svelte generated by Svelte v3.51.0 */
-
-	function create_fragment$x(ctx) {
-	  let div;
-	  return {
-	    c() {
-	      div = element("div");
-	      div.innerHTML = `<slot></slot>`;
-	      this.c = noop;
-	      attr(div, "class", "card-group");
-	    },
-
-	    m(target, anchor) {
-	      insert(target, div, anchor);
-	    },
-
-	    p: noop,
-	    i: noop,
-	    o: noop,
-
-	    d(detaching) {
-	      if (detaching) detach(div);
-	    }
-
-	  };
-	}
-
-	class CardGroup extends SvelteElement {
-	  constructor(options) {
-	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.card-group{display:flex;flex-wrap:wrap;justify-content:space-around;gap:1rem;width:100%}</style>`;
-	    init(this, {
-	      target: this.shadowRoot,
-	      props: attribute_to_object(this.attributes),
-	      customElement: true
-	    }, null, create_fragment$x, safe_not_equal, {}, null);
-
-	    if (options) {
-	      if (options.target) {
-	        insert(options.target, this, options.anchor);
-	      }
-	    }
-	  }
-
-	}
-
-	customElements.define("goa-card-group", CardGroup);
-	/* libs/web-components/src/components/card-image/CardImage.svelte generated by Svelte v3.51.0 */
-
-	function create_fragment$w(ctx) {
-	  let div;
-	  return {
-	    c() {
-	      div = element("div");
-	      this.c = noop;
-	      set_style(div, "background-image", "url(" +
-	      /*src*/
-	      ctx[0] + ")");
-	      set_style(div, "height",
-	      /*height*/
-	      ctx[1]);
-	      set_style(div, "background-size", "cover");
-	      set_style(div, "background-position", "center");
-	    },
-
-	    m(target, anchor) {
-	      insert(target, div, anchor);
-	    },
-
-	    p(ctx, [dirty]) {
-	      if (dirty &
-	      /*src*/
-	      1) {
-	        set_style(div, "background-image", "url(" +
-	        /*src*/
-	        ctx[0] + ")");
-	      }
-
-	      if (dirty &
-	      /*height*/
-	      2) {
-	        set_style(div, "height",
-	        /*height*/
-	        ctx[1]);
-	      }
-	    },
-
-	    i: noop,
-	    o: noop,
-
-	    d(detaching) {
-	      if (detaching) detach(div);
-	    }
-
-	  };
-	}
-
-	function instance$u($$self, $$props, $$invalidate) {
-	  let {
-	    src
-	  } = $$props;
-	  let {
-	    height = "100%"
-	  } = $$props;
-
-	  $$self.$$set = $$props => {
-	    if ('src' in $$props) $$invalidate(0, src = $$props.src);
-	    if ('height' in $$props) $$invalidate(1, height = $$props.height);
-	  };
-
-	  return [src, height];
-	}
-
-	class CardImage extends SvelteElement {
-	  constructor(options) {
-	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}</style>`;
-	    init(this, {
-	      target: this.shadowRoot,
-	      props: attribute_to_object(this.attributes),
-	      customElement: true
-	    }, instance$u, create_fragment$w, safe_not_equal, {
-	      src: 0,
-	      height: 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 ["src", "height"];
-	  }
-
-	  get src() {
-	    return this.$$.ctx[0];
-	  }
-
-	  set src(src) {
-	    this.$$set({
-	      src
-	    });
-	    flush();
-	  }
-
-	  get height() {
-	    return this.$$.ctx[1];
-	  }
-
-	  set height(height) {
-	    this.$$set({
-	      height
-	    });
-	    flush();
-	  }
-
-	}
-
-	customElements.define("goa-card-image", CardImage);
 	/* libs/web-components/src/components/card/Card.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$v(ctx) {
+	function create_fragment$z(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -3597,7 +3383,7 @@
 	  };
 	}
 
-	function instance$t($$self, $$props, $$invalidate) {
+	function instance$v($$self, $$props, $$invalidate) {
 	  let {
 	    elevation = 0
 	  } = $$props;
@@ -3645,7 +3431,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$t, create_fragment$v, safe_not_equal, {
+	    }, instance$v, create_fragment$z, safe_not_equal, {
 	      elevation: 0,
 	      width: 1,
 	      height: 2,
@@ -3763,40 +3549,254 @@
 	}
 
 	customElements.define("goa-card", Card);
-	/* libs/web-components/src/components/checkbox/Checkbox.svelte generated by Svelte v3.51.0 */
+	/* libs/web-components/src/components/card-content/CardContent.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block_1$8(ctx) {
-	  let svg;
-	  let path;
+	function create_fragment$y(ctx) {
+	  let div;
 	  return {
 	    c() {
-	      svg = svg_element("svg");
-	      path = svg_element("path");
-	      attr(path, "d", "M5.09,9.64,1.27,5.82,0,7.09l5.09,5.09L16,1.27,14.73,0Z");
-	      attr(svg, "id", "checkmark");
-	      attr(svg, "data-testid", "checkmark");
-	      attr(svg, "xmlns", "http://www.w3.org/2000/svg");
-	      attr(svg, "viewBox", "0 0 16 12.18");
+	      div = element("div");
+	      div.innerHTML = `<slot></slot>`;
+	      this.c = noop;
+	      attr(div, "class", "card-content");
 	    },
 
 	    m(target, anchor) {
-	      insert(target, svg, anchor);
-	      append(svg, path);
+	      insert(target, div, anchor);
 	    },
 
+	    p: noop,
+	    i: noop,
+	    o: noop,
+
 	    d(detaching) {
-	      if (detaching) detach(svg);
+	      if (detaching) detach(div);
 	    }
 
 	  };
-	} // (68:4) {#if isIndeterminate}
-
+	}
 
-	function create_if_block$d(ctx) {
-	  let svg;
-	  let rect;
-	  return {
-	    c() {
+	class CardContent extends SvelteElement {
+	  constructor(options) {
+	    super();
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.card-content{padding:1rem}</style>`;
+	    init(this, {
+	      target: this.shadowRoot,
+	      props: attribute_to_object(this.attributes),
+	      customElement: true
+	    }, null, create_fragment$y, safe_not_equal, {}, null);
+
+	    if (options) {
+	      if (options.target) {
+	        insert(options.target, this, options.anchor);
+	      }
+	    }
+	  }
+
+	}
+
+	customElements.define("goa-card-content", CardContent);
+	/* libs/web-components/src/components/card-group/CardGroup.svelte generated by Svelte v3.51.0 */
+
+	function create_fragment$x(ctx) {
+	  let div;
+	  return {
+	    c() {
+	      div = element("div");
+	      div.innerHTML = `<slot></slot>`;
+	      this.c = noop;
+	      attr(div, "class", "card-group");
+	    },
+
+	    m(target, anchor) {
+	      insert(target, div, anchor);
+	    },
+
+	    p: noop,
+	    i: noop,
+	    o: noop,
+
+	    d(detaching) {
+	      if (detaching) detach(div);
+	    }
+
+	  };
+	}
+
+	class CardGroup extends SvelteElement {
+	  constructor(options) {
+	    super();
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.card-group{display:flex;flex-wrap:wrap;justify-content:space-around;gap:1rem;width:100%}</style>`;
+	    init(this, {
+	      target: this.shadowRoot,
+	      props: attribute_to_object(this.attributes),
+	      customElement: true
+	    }, null, create_fragment$x, safe_not_equal, {}, null);
+
+	    if (options) {
+	      if (options.target) {
+	        insert(options.target, this, options.anchor);
+	      }
+	    }
+	  }
+
+	}
+
+	customElements.define("goa-card-group", CardGroup);
+	/* libs/web-components/src/components/card-image/CardImage.svelte generated by Svelte v3.51.0 */
+
+	function create_fragment$w(ctx) {
+	  let div;
+	  return {
+	    c() {
+	      div = element("div");
+	      this.c = noop;
+	      set_style(div, "background-image", "url(" +
+	      /*src*/
+	      ctx[0] + ")");
+	      set_style(div, "height",
+	      /*height*/
+	      ctx[1]);
+	      set_style(div, "background-size", "cover");
+	      set_style(div, "background-position", "center");
+	    },
+
+	    m(target, anchor) {
+	      insert(target, div, anchor);
+	    },
+
+	    p(ctx, [dirty]) {
+	      if (dirty &
+	      /*src*/
+	      1) {
+	        set_style(div, "background-image", "url(" +
+	        /*src*/
+	        ctx[0] + ")");
+	      }
+
+	      if (dirty &
+	      /*height*/
+	      2) {
+	        set_style(div, "height",
+	        /*height*/
+	        ctx[1]);
+	      }
+	    },
+
+	    i: noop,
+	    o: noop,
+
+	    d(detaching) {
+	      if (detaching) detach(div);
+	    }
+
+	  };
+	}
+
+	function instance$u($$self, $$props, $$invalidate) {
+	  let {
+	    src
+	  } = $$props;
+	  let {
+	    height = "100%"
+	  } = $$props;
+
+	  $$self.$$set = $$props => {
+	    if ('src' in $$props) $$invalidate(0, src = $$props.src);
+	    if ('height' in $$props) $$invalidate(1, height = $$props.height);
+	  };
+
+	  return [src, height];
+	}
+
+	class CardImage extends SvelteElement {
+	  constructor(options) {
+	    super();
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}</style>`;
+	    init(this, {
+	      target: this.shadowRoot,
+	      props: attribute_to_object(this.attributes),
+	      customElement: true
+	    }, instance$u, create_fragment$w, safe_not_equal, {
+	      src: 0,
+	      height: 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 ["src", "height"];
+	  }
+
+	  get src() {
+	    return this.$$.ctx[0];
+	  }
+
+	  set src(src) {
+	    this.$$set({
+	      src
+	    });
+	    flush();
+	  }
+
+	  get height() {
+	    return this.$$.ctx[1];
+	  }
+
+	  set height(height) {
+	    this.$$set({
+	      height
+	    });
+	    flush();
+	  }
+
+	}
+
+	customElements.define("goa-card-image", CardImage);
+	/* libs/web-components/src/components/checkbox/Checkbox.svelte generated by Svelte v3.51.0 */
+
+	function create_if_block_1$8(ctx) {
+	  let svg;
+	  let path;
+	  return {
+	    c() {
+	      svg = svg_element("svg");
+	      path = svg_element("path");
+	      attr(path, "d", "M5.09,9.64,1.27,5.82,0,7.09l5.09,5.09L16,1.27,14.73,0Z");
+	      attr(svg, "id", "checkmark");
+	      attr(svg, "data-testid", "checkmark");
+	      attr(svg, "xmlns", "http://www.w3.org/2000/svg");
+	      attr(svg, "viewBox", "0 0 16 12.18");
+	    },
+
+	    m(target, anchor) {
+	      insert(target, svg, anchor);
+	      append(svg, path);
+	    },
+
+	    d(detaching) {
+	      if (detaching) detach(svg);
+	    }
+
+	  };
+	} // (68:4) {#if isIndeterminate}
+
+
+	function create_if_block$d(ctx) {
+	  let svg;
+	  let rect;
+	  return {
+	    c() {
 	      svg = svg_element("svg");
 	      rect = svg_element("rect");
 	      attr(rect, "width", "15");
@@ -3819,7 +3819,7 @@
 	  };
 	}
 
-	function create_fragment$u(ctx) {
+	function create_fragment$v(ctx) {
 	  let label;
 	  let div0;
 	  let input;
@@ -4068,7 +4068,7 @@
 	  };
 	}
 
-	function instance$s($$self, $$props, $$invalidate) {
+	function instance$t($$self, $$props, $$invalidate) {
 	  let isDisabled;
 	  let isError;
 	  let isChecked;
@@ -4183,7 +4183,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: 14,
 	      text: 1,
@@ -4441,7 +4441,7 @@
 	  };
 	}
 
-	function create_fragment$t(ctx) {
+	function create_fragment$u(ctx) {
 	  let div1;
 	  let t0;
 	  let div0;
@@ -4623,7 +4623,7 @@
 	  };
 	}
 
-	function instance$r($$self, $$props, $$invalidate) {
+	function instance$s($$self, $$props, $$invalidate) {
 	  let {
 	    mt = null
 	  } = $$props;
@@ -4724,7 +4724,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, {
 	      mt: 0,
 	      mr: 1,
 	      mb: 2,
@@ -5352,7 +5352,7 @@
 	  };
 	}
 
-	function create_fragment$s(ctx) {
+	function create_fragment$t(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
@@ -5417,7 +5417,7 @@
 	  };
 	}
 
-	function instance$q($$self, $$props, $$invalidate) {
+	function instance$r($$self, $$props, $$invalidate) {
 	  let isVisible;
 	  const [Variants, validateVariant] = typeValidator("Circular progress variant", ["fullscreen", "inline"]);
 	  const [Sizes, validateSize] = typeValidator("Button size", ["small", "large"]);
@@ -5475,7 +5475,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,
@@ -5559,7 +5559,7 @@
 	customElements.define("goa-circular-progress", CircularProgress);
 	/* libs/web-components/src/components/container/Container.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$r(ctx) {
+	function create_fragment$s(ctx) {
 	  let div3;
 	  let header;
 	  let div0;
@@ -5684,7 +5684,7 @@
 	  };
 	}
 
-	function instance$p($$self, $$props, $$invalidate) {
+	function instance$q($$self, $$props, $$invalidate) {
 	  const [Types, validateType] = typeValidator("Container type", ["interactive", "info", "error", "success", "important", "non-interactive"]);
 	  const [Accents, validateAccent] = typeValidator("Container accent", ["thick", "thin", "filled"]);
 	  const [Paddings, validatePadding] = typeValidator("Container padding", ["relaxed", "compact"]);
@@ -5740,7 +5740,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,
 	      accent: 1,
 	      padding: 2,
@@ -5860,7 +5860,7 @@
 	customElements.define("goa-container", Container);
 	/* libs/web-components/src/components/divider/Divider.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$q(ctx) {
+	function create_fragment$r(ctx) {
 	  let hr;
 	  let hr_style_value;
 	  return {
@@ -5919,7 +5919,7 @@
 	  };
 	}
 
-	function instance$o($$self, $$props, $$invalidate) {
+	function instance$p($$self, $$props, $$invalidate) {
 	  let {
 	    testid = ""
 	  } = $$props;
@@ -5955,7 +5955,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, {
 	      testid: 0,
 	      mt: 1,
 	      mr: 2,
@@ -6146,12 +6146,139 @@
 	  if (!store) return;
 	  delete stores[name];
 	}
-	/* libs/web-components/src/components/dropdown/Dropdown.svelte generated by Svelte v3.51.0 */
+	/* libs/web-components/src/components/dropdown/DropdownItem.svelte generated by Svelte v3.51.0 */
 
 
-	function get_each_context_1(ctx, list, i) {
-	  const child_ctx = ctx.slice();
-	  child_ctx[47] = list[i];
+	function create_fragment$q(ctx) {
+	  return {
+	    c() {
+	      this.c = noop;
+	    },
+
+	    m: noop,
+	    p: noop,
+	    i: noop,
+	    o: noop,
+	    d: noop
+	  };
+	}
+
+	function instance$o($$self, $$props, $$invalidate) {
+	  let {
+	    name = ""
+	  } = $$props;
+	  let {
+	    value = ""
+	  } = $$props;
+	  let {
+	    label = ""
+	  } = $$props; // private
+
+	  let ctx;
+	  let isBound = false;
+
+	  $$self.$$set = $$props => {
+	    if ('name' in $$props) $$invalidate(0, name = $$props.name);
+	    if ('value' in $$props) $$invalidate(1, value = $$props.value);
+	    if ('label' in $$props) $$invalidate(2, label = $$props.label);
+	  };
+
+	  $$self.$$.update = () => {
+	    if ($$self.$$.dirty &
+	    /*isBound, name, ctx, label, value*/
+	    31) {
+	      {
+	        (function () {
+	          return _call(tick, function () {
+	            if (!isBound) {
+	              $$invalidate(4, isBound = true);
+	              $$invalidate(3, ctx = getContext(name));
+	              ctx.notify({
+	                type: "bind",
+	                name,
+	                label,
+	                value
+	              });
+	            }
+	          });
+	        })();
+	      }
+	    }
+	  };
+
+	  return [name, value, label, ctx, isBound];
+	}
+
+	class DropdownItem extends SvelteElement {
+	  constructor(options) {
+	    super();
+	    init(this, {
+	      target: this.shadowRoot,
+	      props: attribute_to_object(this.attributes),
+	      customElement: true
+	    }, instance$o, create_fragment$q, safe_not_equal, {
+	      name: 0,
+	      value: 1,
+	      label: 2
+	    }, null);
+
+	    if (options) {
+	      if (options.target) {
+	        insert(options.target, this, options.anchor);
+	      }
+
+	      if (options.props) {
+	        this.$set(options.props);
+	        flush();
+	      }
+	    }
+	  }
+
+	  static get observedAttributes() {
+	    return ["name", "value", "label"];
+	  }
+
+	  get name() {
+	    return this.$$.ctx[0];
+	  }
+
+	  set name(name) {
+	    this.$$set({
+	      name
+	    });
+	    flush();
+	  }
+
+	  get value() {
+	    return this.$$.ctx[1];
+	  }
+
+	  set value(value) {
+	    this.$$set({
+	      value
+	    });
+	    flush();
+	  }
+
+	  get label() {
+	    return this.$$.ctx[2];
+	  }
+
+	  set label(label) {
+	    this.$$set({
+	      label
+	    });
+	    flush();
+	  }
+
+	}
+
+	customElements.define("goa-dropdown-item", DropdownItem);
+	/* libs/web-components/src/components/dropdown/Dropdown.svelte generated by Svelte v3.51.0 */
+
+	function get_each_context_1(ctx, list, i) {
+	  const child_ctx = ctx.slice();
+	  child_ctx[47] = list[i];
 	  child_ctx[51] = i;
 	  return child_ctx;
 	}
@@ -7441,205 +7568,78 @@
 	}
 
 	customElements.define("goa-dropdown", Dropdown);
-	/* libs/web-components/src/components/dropdown/DropdownItem.svelte generated by Svelte v3.51.0 */
+	/* libs/web-components/src/components/focus-trap/FocusTrap.svelte generated by Svelte v3.51.0 */
 
 	function create_fragment$o(ctx) {
+	  let div;
 	  return {
 	    c() {
+	      div = element("div");
+	      div.innerHTML = `<slot></slot> 
+  
+  <span tabindex="0"></span>`;
 	      this.c = noop;
+	      attr(div, "id", "root");
+	    },
+
+	    m(target, anchor) {
+	      insert(target, div, anchor);
+	      /*div_binding*/
+
+	      ctx[4](div);
 	    },
 
-	    m: noop,
 	    p: noop,
 	    i: noop,
 	    o: noop,
-	    d: noop
-	  };
-	}
-
-	function instance$m($$self, $$props, $$invalidate) {
-	  let {
-	    name = ""
-	  } = $$props;
-	  let {
-	    value = ""
-	  } = $$props;
-	  let {
-	    label = ""
-	  } = $$props; // private
 
-	  let ctx;
-	  let isBound = false;
-
-	  $$self.$$set = $$props => {
-	    if ('name' in $$props) $$invalidate(0, name = $$props.name);
-	    if ('value' in $$props) $$invalidate(1, value = $$props.value);
-	    if ('label' in $$props) $$invalidate(2, label = $$props.label);
-	  };
+	    d(detaching) {
+	      if (detaching) detach(div);
+	      /*div_binding*/
 
-	  $$self.$$.update = () => {
-	    if ($$self.$$.dirty &
-	    /*isBound, name, ctx, label, value*/
-	    31) {
-	      {
-	        (function () {
-	          return _call(tick, function () {
-	            if (!isBound) {
-	              $$invalidate(4, isBound = true);
-	              $$invalidate(3, ctx = getContext(name));
-	              ctx.notify({
-	                type: "bind",
-	                name,
-	                label,
-	                value
-	              });
-	            }
-	          });
-	        })();
-	      }
+	      ctx[4](null);
 	    }
-	  };
 
-	  return [name, value, label, ctx, isBound];
+	  };
 	}
 
-	class DropdownItem extends SvelteElement {
-	  constructor(options) {
-	    super();
-	    init(this, {
-	      target: this.shadowRoot,
-	      props: attribute_to_object(this.attributes),
-	      customElement: true
-	    }, instance$m, create_fragment$o, safe_not_equal, {
-	      name: 0,
-	      value: 1,
-	      label: 2
-	    }, null);
+	function isFocusable(element) {
+	  const isTabbable = element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute('tabIndex') !== null;
+	  if (isTabbable) return true;
+	  if (element["disabled"]) return false;
 
-	    if (options) {
-	      if (options.target) {
-	        insert(options.target, this, options.anchor);
+	  switch (element.nodeName) {
+	    case 'A':
+	      {
+	        const el = element;
+	        return !!el.href && el.rel !== 'ignore';
 	      }
 
-	      if (options.props) {
-	        this.$set(options.props);
-	        flush();
+	    case 'INPUT':
+	      {
+	        const el = element;
+	        return el.type !== 'hidden' && el.type !== 'file';
 	      }
-	    }
-	  }
 
-	  static get observedAttributes() {
-	    return ["name", "value", "label"];
-	  }
+	    case 'BUTTON':
+	    case 'SELECT':
+	    case 'TEXTAREA':
+	      return true;
 
-	  get name() {
-	    return this.$$.ctx[0];
+	    default:
+	      return false;
 	  }
+	}
 
-	  set name(name) {
-	    this.$$set({
-	      name
-	    });
-	    flush();
-	  }
-
-	  get value() {
-	    return this.$$.ctx[1];
-	  }
-
-	  set value(value) {
-	    this.$$set({
-	      value
-	    });
-	    flush();
-	  }
-
-	  get label() {
-	    return this.$$.ctx[2];
-	  }
-
-	  set label(label) {
-	    this.$$set({
-	      label
-	    });
-	    flush();
-	  }
-
-	}
-
-	customElements.define("goa-dropdown-item", DropdownItem);
-	/* libs/web-components/src/components/focus-trap/FocusTrap.svelte generated by Svelte v3.51.0 */
-
-	function create_fragment$n(ctx) {
-	  let div;
-	  return {
-	    c() {
-	      div = element("div");
-	      div.innerHTML = `<slot></slot> 
-  
-  <span tabindex="0"></span>`;
-	      this.c = noop;
-	      attr(div, "id", "root");
-	    },
-
-	    m(target, anchor) {
-	      insert(target, div, anchor);
-	      /*div_binding*/
-
-	      ctx[4](div);
-	    },
-
-	    p: noop,
-	    i: noop,
-	    o: noop,
-
-	    d(detaching) {
-	      if (detaching) detach(div);
-	      /*div_binding*/
-
-	      ctx[4](null);
-	    }
-
-	  };
-	}
-
-	function isFocusable(element) {
-	  const isTabbable = element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute('tabIndex') !== null;
-	  if (isTabbable) return true;
-	  if (element["disabled"]) return false;
-
-	  switch (element.nodeName) {
-	    case 'A':
-	      {
-	        const el = element;
-	        return !!el.href && el.rel !== 'ignore';
-	      }
-
-	    case 'INPUT':
-	      {
-	        const el = element;
-	        return el.type !== 'hidden' && el.type !== 'file';
-	      }
-
-	    case 'BUTTON':
-	    case 'SELECT':
-	    case 'TEXTAREA':
-	      return true;
-
-	    default:
-	      return false;
-	  }
-	}
-
-	function instance$l($$self, $$props, $$invalidate) {
-	  let isActive;
-	  let {
-	    active
-	  } = $$props;
-	  let ignoreFocusChanges = false;
-	  let lastFocus;
-	  let element;
-	  let hasListeners = false;
+	function instance$m($$self, $$props, $$invalidate) {
+	  let isActive;
+	  let {
+	    active
+	  } = $$props;
+	  let ignoreFocusChanges = false;
+	  let lastFocus;
+	  let element;
+	  let hasListeners = false;
 
 	  function removeListeners() {
 	    document.removeEventListener('focus', trapFocus, true);
@@ -7800,7 +7800,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, {
 	      active: 1
 	    }, null);
 
@@ -7834,133 +7834,151 @@
 	}
 
 	customElements.define("goa-focus-trap", FocusTrap);
-	/* libs/web-components/src/components/footer-meta-section/FooterMetaSection.svelte generated by Svelte v3.51.0 */
-
-	function get_each_context$3(ctx, list, i) {
-	  const child_ctx = ctx.slice();
-	  child_ctx[3] = list[i];
-	  return child_ctx;
-	} // (52:4) {#each children as child}
-
+	/* libs/web-components/src/components/footer/Footer.svelte generated by Svelte v3.51.0 */
 
-	function create_each_block$3(ctx) {
-	  let li;
-	  let a;
-	  let t_value =
-	  /*child*/
-	  ctx[3].innerHTML + "";
-	  let t;
-	  let a_href_value;
+	function create_if_block$9(ctx) {
+	  let goa_divider;
 	  return {
 	    c() {
-	      li = element("li");
-	      a = element("a");
-	      t = text(t_value);
-	      attr(a, "href", a_href_value =
-	      /*child*/
-	      ctx[3].href);
+	      goa_divider = element("goa-divider");
+	      set_custom_element_data(goa_divider, "spacing", "small");
 	    },
 
 	    m(target, anchor) {
-	      insert(target, li, anchor);
-	      append(li, a);
-	      append(a, t);
-	    },
-
-	    p(ctx, dirty) {
-	      if (dirty &
-	      /*children*/
-	      2 && t_value !== (t_value =
-	      /*child*/
-	      ctx[3].innerHTML + "")) set_data(t, t_value);
-
-	      if (dirty &
-	      /*children*/
-	      2 && a_href_value !== (a_href_value =
-	      /*child*/
-	      ctx[3].href)) {
-	        attr(a, "href", a_href_value);
-	      }
+	      insert(target, goa_divider, anchor);
 	    },
 
 	    d(detaching) {
-	      if (detaching) detach(li);
+	      if (detaching) detach(goa_divider);
 	    }
 
 	  };
 	}
 
-	function create_fragment$m(ctx) {
-	  let section;
-	  let div;
-	  let t;
-	  let ul;
-	  let each_value =
-	  /*children*/
-	  ctx[1];
-	  let each_blocks = [];
-
-	  for (let i = 0; i < each_value.length; i += 1) {
-	    each_blocks[i] = create_each_block$3(get_each_context$3(ctx, each_value, i));
-	  }
+	function create_fragment$n(ctx) {
+	  var _ctx$;
 
+	  let div5;
+	  let div4;
+	  let div0;
+	  let t0;
+	  let t1;
+	  let div3;
+	  let div1;
+	  let t2;
+	  let div2;
+	  let a0;
+	  let t3;
+	  let a1;
+	  let div5_style_value;
+	  let if_block =
+	  /*navLinks*/
+	  ((_ctx$ = ctx[2]) === null || _ctx$ === void 0 ? void 0 : _ctx$.length) && create_if_block$9();
 	  return {
 	    c() {
-	      section = element("section");
-	      div = element("div");
-	      div.innerHTML = `<slot></slot>`;
-	      t = space();
-	      ul = element("ul");
-
-	      for (let i = 0; i < each_blocks.length; i += 1) {
-	        each_blocks[i].c();
-	      }
+	      var _ctx$2, _ctx$3;
 
+	      div5 = element("div");
+	      div4 = element("div");
+	      div0 = element("div");
+	      div0.innerHTML = `<slot name="nav"></slot>`;
+	      t0 = space();
+	      if (if_block) if_block.c();
+	      t1 = space();
+	      div3 = element("div");
+	      div1 = element("div");
+	      div1.innerHTML = `<slot name="meta"></slot>`;
+	      t2 = space();
+	      div2 = element("div");
+	      a0 = element("a");
+	      a0.innerHTML = `<img alt="GoA Logo" class="logo" src="data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; xmlns:xlink=&#39;http://www.w3.org/1999/xlink&#39; width=&#39;149.351&#39; height=&#39;42&#39; viewBox=&#39;0 0 149.351 42&#39;%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bclip-path:url(%23a);%7D.c%7Bfill:%2300aad2;%7D.d%7Bfill:%235f6a72;%7D%3C/style%3E%3CclipPath id=&#39;a&#39;%3E%3Crect class=&#39;a&#39; width=&#39;149.351&#39; height=&#39;42&#39;/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class=&#39;b&#39;%3E%3Crect class=&#39;c&#39; width=&#39;13.555&#39; height=&#39;13.555&#39; transform=&#39;translate(135.796 21.524)&#39;/%3E%3Cpath class=&#39;d&#39; d=&#39;M63.082,33.088c-1.383.138-2.835.277-4.357.346.553-4.357,2.835-10.373,5.671-9.405,1.66.553.761,5.671-1.314,9.059m-3.527,2.974a3.761,3.761,0,0,1-1.245,0,.851.851,0,0,0,.346-.692v-.553c.761,0,1.936-.138,3.389-.277a4.327,4.327,0,0,1-2.49,1.521M76.844,25.688c1.8-1.66,2.7-1.521,2.9-1.106.484.968-1.591,4.357-5.671,6.224a10.328,10.328,0,0,1,2.766-5.118m66.736,1.66c-.207-3.389-3.181-3.942-3.6-2.974-.138.346,1.106.207,1.106,2.628,0,3.942-4.011,9.129-9.129,9.129-5.532,0-6.985-4.357-7.261-6.432-.207-1.452.138-3.458-2.351-3.181-1.729.207-3.25,3.527-5.463,6.362-1.867,2.42-2.7,2.213-2.282.138.553-2.628,2.7-8.714,5.187-9.129,1.176-.207,1.591,1.8,2.075.553s.069-4.011-2.559-4.011c-1.8,0-3.942,1.936-5.74,4.08-1.521,1.936-9.336,13.416-12.656,10.927-1.521-1.176-1.383-5.878-.415-11.411,3.873-1.521,7.123-1.037,8.921-.138.9.415,1.037.346.622-.622-.553-1.452-3.665-3.734-8.575-2.7-.138,0-.207.069-.346.069.415-1.8.83-3.665,1.383-5.463.484-1.66,1.8-4.5-1.729-4.979-1.106-.207-.622.346-1.037,1.867-.692,2.766-1.521,6.362-2.144,10.028a19.745,19.745,0,0,0-7.538,8.091,38.59,38.59,0,0,0,.9-4.772,1.589,1.589,0,0,0-1.245-1.729c-.761-.207-1.729.138-2.628,1.452-2.144,3.043-4.841,7.815-8.99,9.82-2.974,1.452-4.288,0-4.357-2.282a9.869,9.869,0,0,0,1.521-.553c5.394-2.351,7.192-5.947,5.878-8.16-1.314-2.075-4.979-1.452-7.953,1.66a11.175,11.175,0,0,0-2.7,6.5c-1.245.277-2.628.484-4.219.692,2.49-4.08,2.282-9.613-1.383-10.581-4.288-1.106-6.432,3.043-7.331,6.5.346-3.873.9-7.745,1.591-11.549.346-1.66,1.452-4.5-2.075-4.979-1.106-.207-.968.346-.9,1.867.138,2.075-2.144,14.454-.968,19.848-1.521.484-2.144,1.66-.207,2.835,1.383.83,4.357,1.106,7.331-.346a9.3,9.3,0,0,0,2.766-2.144c1.8-.207,3.665-.553,5.394-.83.277,2.42,1.867,4.219,5.463,3.873,5.118-.484,9.682-6.777,11.411-9.82-.346,3.25-2.42,10.373,1.176,10.028,1.383-.138.83-.346.9-1.591.346-4.288,3.873-7.953,7.4-10.166-.622,5.256-.415,9.958,2.006,11.411,4.426,2.766,10.581-4.5,14.039-8.921-1.729,3.942-2.7,8.921-.138,9.682,3.043.9,5.463-4.219,8.3-8.091.346,2.766,2.213,7.607,9.682,7.607,8.022-.069,13.071-4.91,12.863-10.1m-108.3,8.645A66.439,66.439,0,0,1,27.4,32.534a59.168,59.168,0,0,0,6.777-2.974,54.453,54.453,0,0,0,1.106,6.432m20.4,3.873c-.069-.207-.622.069-1.106,0-1.452-.207-3.389-2.213-3.942-5.463-1.037-5.878-.415-11.687,1.314-20.332.346-1.66,1.452-4.5-2.075-5.048-1.106-.138-.553.415-.83,1.867C47.66,17.32,42.4,21.954,37.149,25.066,36.6,17.735,36.8,9.505,38.186,4.526c1.176-4.219,2.559-3.458.83-4.357s-3.734.277-5.325,3.458S24.839,23.89,13.221,35.439C7.273,41.317,1.879,38.274.842,37.375c-.9-.761-1.176.415-.138,1.591,4.772,5.256,11.826,2.282,14.384-.277,7.054-7.054,15.283-22.268,18.6-28.7a98.251,98.251,0,0,0,.277,16.874,50.129,50.129,0,0,1-8.3,3.181c-1.66.415-2.7,1.106-2.7,1.867s1.106,1.521,2.7,2.282c2.835,1.383,11.2,5.256,13.209,6.5,1.729,1.037,2.628.207,3.112-.9.692-1.452-1.176-2.282-2.974-2.766a60.545,60.545,0,0,1-1.66-9.267c4.219-2.628,8.437-6.086,10.788-10.443C47.522,20.916,46,33.3,49.873,38.482a5.451,5.451,0,0,0,4.564,2.213c.968-.069,1.383-.692,1.245-.83&#39; transform=&#39;translate(-0.038 0.124)&#39;/%3E%3C/g%3E%3C/svg%3E"/>`;
+	      t3 = space();
+	      a1 = element("a");
+	      a1.textContent = `© ${
+      /*year*/
+      ctx[4]} Government of Alberta`;
 	      this.c = noop;
-	      attr(div, "class", "hidden");
+	      attr(div0, "class", "nav-links");
+	      attr(div1, "class", "meta-links");
+	      attr(a0, "href", "https://alberta.ca");
+	      attr(a1, "href", "https://alberta.ca");
+	      attr(a1, "class", "goa-copyright");
+	      attr(div2, "class", "abgov");
+	      toggle_class(div2, "with-meta-links",
+	      /*metaLinks*/
+	      (_ctx$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[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] || "100%"}`);
 	    },
 
 	    m(target, anchor) {
-	      insert(target, section, anchor);
-	      append(section, div);
-	      append(section, t);
-	      append(section, ul);
-
-	      for (let i = 0; i < each_blocks.length; i += 1) {
-	        each_blocks[i].m(ul, null);
-	      }
-	      /*section_binding*/
-
+	      insert(target, div5, anchor);
+	      append(div5, div4);
+	      append(div4, div0);
+	      append(div4, t0);
+	      if (if_block) if_block.m(div4, null);
+	      append(div4, t1);
+	      append(div4, div3);
+	      append(div3, div1);
+	      append(div3, t2);
+	      append(div3, div2);
+	      append(div2, a0);
+	      append(div2, t3);
+	      append(div2, a1);
+	      /*div5_binding*/
 
-	      ctx[2](section);
+	      ctx[5](div5);
 	    },
 
 	    p(ctx, [dirty]) {
-	      if (dirty &
-	      /*children*/
-	      2) {
-	        each_value =
-	        /*children*/
-	        ctx[1];
-	        let i;
-
-	        for (i = 0; i < each_value.length; i += 1) {
-	          const child_ctx = get_each_context$3(ctx, each_value, i);
+	      var _ctx$4;
 
-	          if (each_blocks[i]) {
-	            each_blocks[i].p(child_ctx, dirty);
-	          } else {
-	            each_blocks[i] = create_each_block$3(child_ctx);
-	            each_blocks[i].c();
-	            each_blocks[i].m(ul, null);
-	          }
+	      if (
+	      /*navLinks*/
+	      (_ctx$4 = ctx[2]) !== null && _ctx$4 !== void 0 && _ctx$4.length) {
+	        if (if_block) ;else {
+	          if_block = create_if_block$9();
+	          if_block.c();
+	          if_block.m(div4, t1);
 	        }
+	      } else if (if_block) {
+	        if_block.d(1);
+	        if_block = null;
+	      }
 
-	        for (; i < each_blocks.length; i += 1) {
-	          each_blocks[i].d(1);
-	        }
+	      if (dirty &
+	      /*metaLinks*/
+	      8) {
+	        var _ctx$5;
 
-	        each_blocks.length = each_value.length;
+	        toggle_class(div2, "with-meta-links",
+	        /*metaLinks*/
+	        (_ctx$5 = ctx[3]) === null || _ctx$5 === void 0 ? void 0 : _ctx$5.length);
+	      }
+
+	      if (dirty &
+	      /*metaLinks*/
+	      8) {
+	        var _ctx$6;
+
+	        toggle_class(div3, "with-meta-links",
+	        /*metaLinks*/
+	        (_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] || "100%"}`)) {
+	        attr(div5, "style", div5_style_value);
 	      }
 	    },
 
@@ -7968,120 +7986,104 @@
 	    o: noop,
 
 	    d(detaching) {
-	      if (detaching) detach(section);
-	      destroy_each(each_blocks, detaching);
-	      /*section_binding*/
+	      if (detaching) detach(div5);
+	      if (if_block) if_block.d();
+	      /*div5_binding*/
 
-	      ctx[2](null);
+	      ctx[5](null);
 	    }
 
 	  };
 	}
 
-	function instance$k($$self, $$props, $$invalidate) {
+	function instance$l($$self, $$props, $$invalidate) {
+	  let {
+	    maxcontentwidth = ""
+	  } = $$props;
 	  let rootEl;
-	  let children = [];
+	  let navLinks;
+	  let metaLinks;
+	  const year = new Date().getFullYear();
 	  onMount(function () {
 	    return _call(tick, function () {
-	      $$invalidate(1, children = rootEl.querySelector("slot").assignedElements());
-	      const isValid = children.map(child => child.hasAttribute("href")).reduce((sum, valid) => {
-	        return sum && valid;
-	      }, true);
-
-	      if (!isValid) {
-	        $$invalidate(1, children = []);
-	        console.warn("GoAFooterMetaSection children must be anchor elements.");
-	      }
+	      const navSlot = rootEl.querySelector("slot[name=nav]");
+	      const metaSlot = rootEl.querySelector("slot[name=meta]");
+	      $$invalidate(2, navLinks = navSlot.assignedElements());
+	      $$invalidate(3, metaLinks = metaSlot.assignedElements());
 	    });
 	  });
 
-	  function section_binding($$value) {
+	  function div5_binding($$value) {
 	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 	      rootEl = $$value;
-	      $$invalidate(0, rootEl);
+	      $$invalidate(1, rootEl);
 	    });
 	  }
 
-	  return [rootEl, children, section_binding];
+	  $$self.$$set = $$props => {
+	    if ('maxcontentwidth' in $$props) $$invalidate(0, maxcontentwidth = $$props.maxcontentwidth);
+	  };
+
+	  return [maxcontentwidth, rootEl, navLinks, metaLinks, year, div5_binding];
 	}
 
-	class FooterMetaSection extends SvelteElement {
+	class Footer extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>.hidden{display:none}ul{display:flex;flex-wrap:wrap;gap:1rem;padding-left:0}li{list-style-type:none}a{color:var(--goa-color-text);white-space:nowrap}</style>`;
+	    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--color-gray-100);border-top:2px solid var(--color-gray-200);border-bottom:1rem solid var(--goa-color-brand)}.content{padding:2rem 1rem;margin:0 auto;width:min(var(--max-content-width), 100%)}@media(min-width: 640px){.content{padding:2rem 1.5rem}}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$k, create_fragment$m, safe_not_equal, {}, null);
+	    }, instance$l, create_fragment$n, 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();
+	      }
 	    }
 	  }
 
-	}
-
-	customElements.define("goa-app-footer-meta-section", FooterMetaSection);
-	/* libs/web-components/src/components/footer-nav-section/FooterNavSection.svelte generated by Svelte v3.51.0 */
-
-	function get_each_context$2(ctx, list, i) {
-	  const child_ctx = ctx.slice();
-	  child_ctx[5] = list[i];
-	  return child_ctx;
-	} // (31:2) {#if heading}
-
+	  static get observedAttributes() {
+	    return ["maxcontentwidth"];
+	  }
 
-	function create_if_block$9(ctx) {
-	  let div;
-	  let t0;
-	  let t1;
-	  let goa_divider;
-	  return {
-	    c() {
-	      div = element("div");
-	      t0 = text(
-	      /*heading*/
-	      ctx[0]);
-	      t1 = space();
-	      goa_divider = element("goa-divider");
-	      attr(div, "class", "title");
-	      set_custom_element_data(goa_divider, "spacing", "small");
-	    },
+	  get maxcontentwidth() {
+	    return this.$$.ctx[0];
+	  }
 
-	    m(target, anchor) {
-	      insert(target, div, anchor);
-	      append(div, t0);
-	      insert(target, t1, anchor);
-	      insert(target, goa_divider, anchor);
-	    },
+	  set maxcontentwidth(maxcontentwidth) {
+	    this.$$set({
+	      maxcontentwidth
+	    });
+	    flush();
+	  }
 
-	    p(ctx, dirty) {
-	      if (dirty &
-	      /*heading*/
-	      1) set_data(t0,
-	      /*heading*/
-	      ctx[0]);
-	    },
+	}
 
-	    d(detaching) {
-	      if (detaching) detach(div);
-	      if (detaching) detach(t1);
-	      if (detaching) detach(goa_divider);
-	    }
+	customElements.define("goa-app-footer", Footer);
+	/* libs/web-components/src/components/footer-meta-section/FooterMetaSection.svelte generated by Svelte v3.51.0 */
 
-	  };
-	} // (49:4) {#each children as child}
+	function get_each_context$3(ctx, list, i) {
+	  const child_ctx = ctx.slice();
+	  child_ctx[3] = list[i];
+	  return child_ctx;
+	} // (52:4) {#each children as child}
 
 
-	function create_each_block$2(ctx) {
+	function create_each_block$3(ctx) {
 	  let li;
 	  let a;
 	  let t_value =
 	  /*child*/
-	  ctx[5].innerHTML + "";
+	  ctx[3].innerHTML + "";
 	  let t;
 	  let a_href_value;
 	  return {
@@ -8091,7 +8093,7 @@
 	      t = text(t_value);
 	      attr(a, "href", a_href_value =
 	      /*child*/
-	      ctx[5].href);
+	      ctx[3].href);
 	    },
 
 	    m(target, anchor) {
@@ -8103,15 +8105,15 @@
 	    p(ctx, dirty) {
 	      if (dirty &
 	      /*children*/
-	      8 && t_value !== (t_value =
+	      2 && t_value !== (t_value =
 	      /*child*/
-	      ctx[5].innerHTML + "")) set_data(t, t_value);
+	      ctx[3].innerHTML + "")) set_data(t, t_value);
 
 	      if (dirty &
 	      /*children*/
-	      8 && a_href_value !== (a_href_value =
+	      2 && a_href_value !== (a_href_value =
 	      /*child*/
-	      ctx[5].href)) {
+	      ctx[3].href)) {
 	        attr(a, "href", a_href_value);
 	      }
 	    },
@@ -8123,33 +8125,26 @@
 	  };
 	}
 
-	function create_fragment$l(ctx) {
+	function create_fragment$m(ctx) {
 	  let section;
-	  let t0;
 	  let div;
-	  let t1;
+	  let t;
 	  let ul;
-	  let ul_style_value;
-	  let if_block =
-	  /*heading*/
-	  ctx[0] && create_if_block$9(ctx);
 	  let each_value =
 	  /*children*/
-	  ctx[3];
+	  ctx[1];
 	  let each_blocks = [];
 
 	  for (let i = 0; i < each_value.length; i += 1) {
-	    each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
+	    each_blocks[i] = create_each_block$3(get_each_context$3(ctx, each_value, i));
 	  }
 
 	  return {
 	    c() {
 	      section = element("section");
-	      if (if_block) if_block.c();
-	      t0 = space();
 	      div = element("div");
 	      div.innerHTML = `<slot></slot>`;
-	      t1 = space();
+	      t = space();
 	      ul = element("ul");
 
 	      for (let i = 0; i < each_blocks.length; i += 1) {
@@ -8158,29 +8153,12 @@
 
 	      this.c = noop;
 	      attr(div, "class", "hidden");
-	      attr(ul, "class", "links");
-	      attr(ul, "style", ul_style_value = `
-      --narrow-display-type: ${Math.ceil(
-      /*maxcolumncount*/
-      ctx[1] / 2) > 1 ? "block" : "flex"};
-      --narrow-column-count: ${Math.ceil(
-      /*maxcolumncount*/
-      ctx[1] / 2)};
-      --wide-display-type: ${
-      /*maxcolumncount*/
-      ctx[1] > 1 ? "block" : "flex"};
-      --wide-column-count: ${
-      /*maxcolumncount*/
-      ctx[1]};
-    `);
 	    },
 
 	    m(target, anchor) {
 	      insert(target, section, anchor);
-	      if (if_block) if_block.m(section, null);
-	      append(section, t0);
 	      append(section, div);
-	      append(section, t1);
+	      append(section, t);
 	      append(section, ul);
 
 	      for (let i = 0; i < each_blocks.length; i += 1) {
@@ -8189,40 +8167,25 @@
 	      /*section_binding*/
 
 
-	      ctx[4](section);
+	      ctx[2](section);
 	    },
 
 	    p(ctx, [dirty]) {
-	      if (
-	      /*heading*/
-	      ctx[0]) {
-	        if (if_block) {
-	          if_block.p(ctx, dirty);
-	        } else {
-	          if_block = create_if_block$9(ctx);
-	          if_block.c();
-	          if_block.m(section, t0);
-	        }
-	      } else if (if_block) {
-	        if_block.d(1);
-	        if_block = null;
-	      }
-
 	      if (dirty &
 	      /*children*/
-	      8) {
+	      2) {
 	        each_value =
 	        /*children*/
-	        ctx[3];
+	        ctx[1];
 	        let i;
 
 	        for (i = 0; i < each_value.length; i += 1) {
-	          const child_ctx = get_each_context$2(ctx, each_value, i);
+	          const child_ctx = get_each_context$3(ctx, each_value, i);
 
 	          if (each_blocks[i]) {
 	            each_blocks[i].p(child_ctx, dirty);
 	          } else {
-	            each_blocks[i] = create_each_block$2(child_ctx);
+	            each_blocks[i] = create_each_block$3(child_ctx);
 	            each_blocks[i].c();
 	            each_blocks[i].m(ul, null);
 	          }
@@ -8234,25 +8197,6 @@
 
 	        each_blocks.length = each_value.length;
 	      }
-
-	      if (dirty &
-	      /*maxcolumncount*/
-	      2 && ul_style_value !== (ul_style_value = `
-      --narrow-display-type: ${Math.ceil(
-      /*maxcolumncount*/
-      ctx[1] / 2) > 1 ? "block" : "flex"};
-      --narrow-column-count: ${Math.ceil(
-      /*maxcolumncount*/
-      ctx[1] / 2)};
-      --wide-display-type: ${
-      /*maxcolumncount*/
-      ctx[1] > 1 ? "block" : "flex"};
-      --wide-column-count: ${
-      /*maxcolumncount*/
-      ctx[1]};
-    `)) {
-	        attr(ul, "style", ul_style_value);
-	      }
 	    },
 
 	    i: noop,
@@ -8260,227 +8204,239 @@
 
 	    d(detaching) {
 	      if (detaching) detach(section);
-	      if (if_block) if_block.d();
 	      destroy_each(each_blocks, detaching);
 	      /*section_binding*/
 
-	      ctx[4](null);
+	      ctx[2](null);
 	    }
 
 	  };
 	}
 
-	function instance$j($$self, $$props, $$invalidate) {
-	  let {
-	    heading = ""
-	  } = $$props;
-	  let {
-	    maxcolumncount = 1
-	  } = $$props;
+	function instance$k($$self, $$props, $$invalidate) {
 	  let rootEl;
 	  let children = [];
 	  onMount(function () {
 	    return _call(tick, function () {
-	      // remap slot content
-	      $$invalidate(3, children = rootEl.querySelector("slot").assignedElements());
+	      $$invalidate(1, children = rootEl.querySelector("slot").assignedElements());
 	      const isValid = children.map(child => child.hasAttribute("href")).reduce((sum, valid) => {
 	        return sum && valid;
 	      }, true);
 
 	      if (!isValid) {
-	        $$invalidate(3, children = []);
-	        console.warn("GoAFooterNavSection children must be anchor elements.");
-	        return;
+	        $$invalidate(1, children = []);
+	        console.warn("GoAFooterMetaSection children must be anchor elements.");
 	      }
-
-	      injectCss(rootEl, ":host", {
-	        "flex-grow": maxcolumncount
-	      });
 	    });
 	  });
 
 	  function section_binding($$value) {
 	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 	      rootEl = $$value;
-	      $$invalidate(2, rootEl);
+	      $$invalidate(0, rootEl);
 	    });
 	  }
 
-	  $$self.$$set = $$props => {
-	    if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
-	    if ('maxcolumncount' in $$props) $$invalidate(1, maxcolumncount = $$props.maxcolumncount);
-	  };
-
-	  return [heading, maxcolumncount, rootEl, children, section_binding];
+	  return [rootEl, children, section_binding];
 	}
 
-	class FooterNavSection extends SvelteElement {
+	class FooterMetaSection extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{flex:auto}.title{font-size:var(--fs-xl);line-height:var(--lh-lg)}.hidden{display:none}.links{display:block;list-style-type:none;padding-left:0}@media(min-width: 720px){.links{display:var(--narrow-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--narrow-column-count)}}@media(min-width: 1024px){.links{display:var(--wide-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--wide-column-count)}}li{padding:0.75rem 0}a{color:var(--goa-color-text)}</style>`;
+	    this.shadowRoot.innerHTML = `<style>.hidden{display:none}ul{display:flex;flex-wrap:wrap;gap:1rem;padding-left:0}li{list-style-type:none}a{color:var(--goa-color-text);white-space:nowrap}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$j, create_fragment$l, safe_not_equal, {
-	      heading: 0,
-	      maxcolumncount: 1
-	    }, null);
+	    }, instance$k, create_fragment$m, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
 	        insert(options.target, this, options.anchor);
 	      }
-
-	      if (options.props) {
-	        this.$set(options.props);
-	        flush();
-	      }
 	    }
 	  }
 
-	  static get observedAttributes() {
-	    return ["heading", "maxcolumncount"];
-	  }
-
-	  get heading() {
-	    return this.$$.ctx[0];
-	  }
-
-	  set heading(heading) {
-	    this.$$set({
-	      heading
-	    });
-	    flush();
-	  }
-
-	  get maxcolumncount() {
-	    return this.$$.ctx[1];
-	  }
+	}
 
-	  set maxcolumncount(maxcolumncount) {
-	    this.$$set({
-	      maxcolumncount
-	    });
-	    flush();
-	  }
+	customElements.define("goa-app-footer-meta-section", FooterMetaSection);
+	/* libs/web-components/src/components/footer-nav-section/FooterNavSection.svelte generated by Svelte v3.51.0 */
 
-	}
+	function get_each_context$2(ctx, list, i) {
+	  const child_ctx = ctx.slice();
+	  child_ctx[5] = list[i];
+	  return child_ctx;
+	} // (31:2) {#if heading}
 
-	customElements.define("goa-app-footer-nav-section", FooterNavSection);
-	/* libs/web-components/src/components/footer/Footer.svelte generated by Svelte v3.51.0 */
 
 	function create_if_block$8(ctx) {
+	  let div;
+	  let t0;
+	  let t1;
 	  let goa_divider;
 	  return {
 	    c() {
+	      div = element("div");
+	      t0 = text(
+	      /*heading*/
+	      ctx[0]);
+	      t1 = space();
 	      goa_divider = element("goa-divider");
+	      attr(div, "class", "title");
 	      set_custom_element_data(goa_divider, "spacing", "small");
 	    },
 
 	    m(target, anchor) {
+	      insert(target, div, anchor);
+	      append(div, t0);
+	      insert(target, t1, anchor);
 	      insert(target, goa_divider, anchor);
 	    },
 
+	    p(ctx, dirty) {
+	      if (dirty &
+	      /*heading*/
+	      1) set_data(t0,
+	      /*heading*/
+	      ctx[0]);
+	    },
+
 	    d(detaching) {
+	      if (detaching) detach(div);
+	      if (detaching) detach(t1);
 	      if (detaching) detach(goa_divider);
 	    }
 
 	  };
-	}
+	} // (49:4) {#each children as child}
 
-	function create_fragment$k(ctx) {
-	  var _ctx$;
 
-	  let div5;
-	  let div4;
-	  let div0;
+	function create_each_block$2(ctx) {
+	  let li;
+	  let a;
+	  let t_value =
+	  /*child*/
+	  ctx[5].innerHTML + "";
+	  let t;
+	  let a_href_value;
+	  return {
+	    c() {
+	      li = element("li");
+	      a = element("a");
+	      t = text(t_value);
+	      attr(a, "href", a_href_value =
+	      /*child*/
+	      ctx[5].href);
+	    },
+
+	    m(target, anchor) {
+	      insert(target, li, anchor);
+	      append(li, a);
+	      append(a, t);
+	    },
+
+	    p(ctx, dirty) {
+	      if (dirty &
+	      /*children*/
+	      8 && t_value !== (t_value =
+	      /*child*/
+	      ctx[5].innerHTML + "")) set_data(t, t_value);
+
+	      if (dirty &
+	      /*children*/
+	      8 && a_href_value !== (a_href_value =
+	      /*child*/
+	      ctx[5].href)) {
+	        attr(a, "href", a_href_value);
+	      }
+	    },
+
+	    d(detaching) {
+	      if (detaching) detach(li);
+	    }
+
+	  };
+	}
+
+	function create_fragment$l(ctx) {
+	  let section;
 	  let t0;
+	  let div;
 	  let t1;
-	  let div3;
-	  let div1;
-	  let t2;
-	  let div2;
-	  let a0;
-	  let t3;
-	  let a1;
-	  let div5_style_value;
+	  let ul;
+	  let ul_style_value;
 	  let if_block =
-	  /*navLinks*/
-	  ((_ctx$ = ctx[2]) === null || _ctx$ === void 0 ? void 0 : _ctx$.length) && create_if_block$8();
+	  /*heading*/
+	  ctx[0] && create_if_block$8(ctx);
+	  let each_value =
+	  /*children*/
+	  ctx[3];
+	  let each_blocks = [];
+
+	  for (let i = 0; i < each_value.length; i += 1) {
+	    each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
+	  }
+
 	  return {
 	    c() {
-	      var _ctx$2, _ctx$3;
-
-	      div5 = element("div");
-	      div4 = element("div");
-	      div0 = element("div");
-	      div0.innerHTML = `<slot name="nav"></slot>`;
-	      t0 = space();
-	      if (if_block) if_block.c();
-	      t1 = space();
-	      div3 = element("div");
-	      div1 = element("div");
-	      div1.innerHTML = `<slot name="meta"></slot>`;
-	      t2 = space();
-	      div2 = element("div");
-	      a0 = element("a");
-	      a0.innerHTML = `<img alt="GoA Logo" class="logo" src="data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; xmlns:xlink=&#39;http://www.w3.org/1999/xlink&#39; width=&#39;149.351&#39; height=&#39;42&#39; viewBox=&#39;0 0 149.351 42&#39;%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bclip-path:url(%23a);%7D.c%7Bfill:%2300aad2;%7D.d%7Bfill:%235f6a72;%7D%3C/style%3E%3CclipPath id=&#39;a&#39;%3E%3Crect class=&#39;a&#39; width=&#39;149.351&#39; height=&#39;42&#39;/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class=&#39;b&#39;%3E%3Crect class=&#39;c&#39; width=&#39;13.555&#39; height=&#39;13.555&#39; transform=&#39;translate(135.796 21.524)&#39;/%3E%3Cpath class=&#39;d&#39; d=&#39;M63.082,33.088c-1.383.138-2.835.277-4.357.346.553-4.357,2.835-10.373,5.671-9.405,1.66.553.761,5.671-1.314,9.059m-3.527,2.974a3.761,3.761,0,0,1-1.245,0,.851.851,0,0,0,.346-.692v-.553c.761,0,1.936-.138,3.389-.277a4.327,4.327,0,0,1-2.49,1.521M76.844,25.688c1.8-1.66,2.7-1.521,2.9-1.106.484.968-1.591,4.357-5.671,6.224a10.328,10.328,0,0,1,2.766-5.118m66.736,1.66c-.207-3.389-3.181-3.942-3.6-2.974-.138.346,1.106.207,1.106,2.628,0,3.942-4.011,9.129-9.129,9.129-5.532,0-6.985-4.357-7.261-6.432-.207-1.452.138-3.458-2.351-3.181-1.729.207-3.25,3.527-5.463,6.362-1.867,2.42-2.7,2.213-2.282.138.553-2.628,2.7-8.714,5.187-9.129,1.176-.207,1.591,1.8,2.075.553s.069-4.011-2.559-4.011c-1.8,0-3.942,1.936-5.74,4.08-1.521,1.936-9.336,13.416-12.656,10.927-1.521-1.176-1.383-5.878-.415-11.411,3.873-1.521,7.123-1.037,8.921-.138.9.415,1.037.346.622-.622-.553-1.452-3.665-3.734-8.575-2.7-.138,0-.207.069-.346.069.415-1.8.83-3.665,1.383-5.463.484-1.66,1.8-4.5-1.729-4.979-1.106-.207-.622.346-1.037,1.867-.692,2.766-1.521,6.362-2.144,10.028a19.745,19.745,0,0,0-7.538,8.091,38.59,38.59,0,0,0,.9-4.772,1.589,1.589,0,0,0-1.245-1.729c-.761-.207-1.729.138-2.628,1.452-2.144,3.043-4.841,7.815-8.99,9.82-2.974,1.452-4.288,0-4.357-2.282a9.869,9.869,0,0,0,1.521-.553c5.394-2.351,7.192-5.947,5.878-8.16-1.314-2.075-4.979-1.452-7.953,1.66a11.175,11.175,0,0,0-2.7,6.5c-1.245.277-2.628.484-4.219.692,2.49-4.08,2.282-9.613-1.383-10.581-4.288-1.106-6.432,3.043-7.331,6.5.346-3.873.9-7.745,1.591-11.549.346-1.66,1.452-4.5-2.075-4.979-1.106-.207-.968.346-.9,1.867.138,2.075-2.144,14.454-.968,19.848-1.521.484-2.144,1.66-.207,2.835,1.383.83,4.357,1.106,7.331-.346a9.3,9.3,0,0,0,2.766-2.144c1.8-.207,3.665-.553,5.394-.83.277,2.42,1.867,4.219,5.463,3.873,5.118-.484,9.682-6.777,11.411-9.82-.346,3.25-2.42,10.373,1.176,10.028,1.383-.138.83-.346.9-1.591.346-4.288,3.873-7.953,7.4-10.166-.622,5.256-.415,9.958,2.006,11.411,4.426,2.766,10.581-4.5,14.039-8.921-1.729,3.942-2.7,8.921-.138,9.682,3.043.9,5.463-4.219,8.3-8.091.346,2.766,2.213,7.607,9.682,7.607,8.022-.069,13.071-4.91,12.863-10.1m-108.3,8.645A66.439,66.439,0,0,1,27.4,32.534a59.168,59.168,0,0,0,6.777-2.974,54.453,54.453,0,0,0,1.106,6.432m20.4,3.873c-.069-.207-.622.069-1.106,0-1.452-.207-3.389-2.213-3.942-5.463-1.037-5.878-.415-11.687,1.314-20.332.346-1.66,1.452-4.5-2.075-5.048-1.106-.138-.553.415-.83,1.867C47.66,17.32,42.4,21.954,37.149,25.066,36.6,17.735,36.8,9.505,38.186,4.526c1.176-4.219,2.559-3.458.83-4.357s-3.734.277-5.325,3.458S24.839,23.89,13.221,35.439C7.273,41.317,1.879,38.274.842,37.375c-.9-.761-1.176.415-.138,1.591,4.772,5.256,11.826,2.282,14.384-.277,7.054-7.054,15.283-22.268,18.6-28.7a98.251,98.251,0,0,0,.277,16.874,50.129,50.129,0,0,1-8.3,3.181c-1.66.415-2.7,1.106-2.7,1.867s1.106,1.521,2.7,2.282c2.835,1.383,11.2,5.256,13.209,6.5,1.729,1.037,2.628.207,3.112-.9.692-1.452-1.176-2.282-2.974-2.766a60.545,60.545,0,0,1-1.66-9.267c4.219-2.628,8.437-6.086,10.788-10.443C47.522,20.916,46,33.3,49.873,38.482a5.451,5.451,0,0,0,4.564,2.213c.968-.069,1.383-.692,1.245-.83&#39; transform=&#39;translate(-0.038 0.124)&#39;/%3E%3C/g%3E%3C/svg%3E"/>`;
-	      t3 = space();
-	      a1 = element("a");
-	      a1.textContent = `© ${
-      /*year*/
-      ctx[4]} Government of Alberta`;
+	      section = element("section");
+	      if (if_block) if_block.c();
+	      t0 = space();
+	      div = element("div");
+	      div.innerHTML = `<slot></slot>`;
+	      t1 = space();
+	      ul = element("ul");
+
+	      for (let i = 0; i < each_blocks.length; i += 1) {
+	        each_blocks[i].c();
+	      }
+
 	      this.c = noop;
-	      attr(div0, "class", "nav-links");
-	      attr(div1, "class", "meta-links");
-	      attr(a0, "href", "https://alberta.ca");
-	      attr(a1, "href", "https://alberta.ca");
-	      attr(a1, "class", "goa-copyright");
-	      attr(div2, "class", "abgov");
-	      toggle_class(div2, "with-meta-links",
-	      /*metaLinks*/
-	      (_ctx$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[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] || "100%"}`);
+	      attr(div, "class", "hidden");
+	      attr(ul, "class", "links");
+	      attr(ul, "style", ul_style_value = `
+      --narrow-display-type: ${Math.ceil(
+      /*maxcolumncount*/
+      ctx[1] / 2) > 1 ? "block" : "flex"};
+      --narrow-column-count: ${Math.ceil(
+      /*maxcolumncount*/
+      ctx[1] / 2)};
+      --wide-display-type: ${
+      /*maxcolumncount*/
+      ctx[1] > 1 ? "block" : "flex"};
+      --wide-column-count: ${
+      /*maxcolumncount*/
+      ctx[1]};
+    `);
 	    },
 
 	    m(target, anchor) {
-	      insert(target, div5, anchor);
-	      append(div5, div4);
-	      append(div4, div0);
-	      append(div4, t0);
-	      if (if_block) if_block.m(div4, null);
-	      append(div4, t1);
-	      append(div4, div3);
-	      append(div3, div1);
-	      append(div3, t2);
-	      append(div3, div2);
-	      append(div2, a0);
-	      append(div2, t3);
-	      append(div2, a1);
-	      /*div5_binding*/
+	      insert(target, section, anchor);
+	      if (if_block) if_block.m(section, null);
+	      append(section, t0);
+	      append(section, div);
+	      append(section, t1);
+	      append(section, ul);
 
-	      ctx[5](div5);
+	      for (let i = 0; i < each_blocks.length; i += 1) {
+	        each_blocks[i].m(ul, null);
+	      }
+	      /*section_binding*/
+
+
+	      ctx[4](section);
 	    },
 
 	    p(ctx, [dirty]) {
-	      var _ctx$4;
-
 	      if (
-	      /*navLinks*/
-	      (_ctx$4 = ctx[2]) !== null && _ctx$4 !== void 0 && _ctx$4.length) {
-	        if (if_block) ;else {
-	          if_block = create_if_block$8();
+	      /*heading*/
+	      ctx[0]) {
+	        if (if_block) {
+	          if_block.p(ctx, dirty);
+	        } else {
+	          if_block = create_if_block$8(ctx);
 	          if_block.c();
-	          if_block.m(div4, t1);
+	          if_block.m(section, t0);
 	        }
 	      } else if (if_block) {
 	        if_block.d(1);
@@ -8488,31 +8444,49 @@
 	      }
 
 	      if (dirty &
-	      /*metaLinks*/
+	      /*children*/
 	      8) {
-	        var _ctx$5;
+	        each_value =
+	        /*children*/
+	        ctx[3];
+	        let i;
 
-	        toggle_class(div2, "with-meta-links",
-	        /*metaLinks*/
-	        (_ctx$5 = ctx[3]) === null || _ctx$5 === void 0 ? void 0 : _ctx$5.length);
-	      }
+	        for (i = 0; i < each_value.length; i += 1) {
+	          const child_ctx = get_each_context$2(ctx, each_value, i);
 
-	      if (dirty &
-	      /*metaLinks*/
-	      8) {
-	        var _ctx$6;
+	          if (each_blocks[i]) {
+	            each_blocks[i].p(child_ctx, dirty);
+	          } else {
+	            each_blocks[i] = create_each_block$2(child_ctx);
+	            each_blocks[i].c();
+	            each_blocks[i].m(ul, null);
+	          }
+	        }
 
-	        toggle_class(div3, "with-meta-links",
-	        /*metaLinks*/
-	        (_ctx$6 = ctx[3]) === null || _ctx$6 === void 0 ? void 0 : _ctx$6.length);
+	        for (; i < each_blocks.length; i += 1) {
+	          each_blocks[i].d(1);
+	        }
+
+	        each_blocks.length = each_value.length;
 	      }
 
 	      if (dirty &
-	      /*maxcontentwidth*/
-	      1 && div5_style_value !== (div5_style_value = `--max-content-width: ${
-      /*maxcontentwidth*/
-      ctx[0] || "100%"}`)) {
-	        attr(div5, "style", div5_style_value);
+	      /*maxcolumncount*/
+	      2 && ul_style_value !== (ul_style_value = `
+      --narrow-display-type: ${Math.ceil(
+      /*maxcolumncount*/
+      ctx[1] / 2) > 1 ? "block" : "flex"};
+      --narrow-column-count: ${Math.ceil(
+      /*maxcolumncount*/
+      ctx[1] / 2)};
+      --wide-display-type: ${
+      /*maxcolumncount*/
+      ctx[1] > 1 ? "block" : "flex"};
+      --wide-column-count: ${
+      /*maxcolumncount*/
+      ctx[1]};
+    `)) {
+	        attr(ul, "style", ul_style_value);
 	      }
 	    },
 
@@ -8520,57 +8494,72 @@
 	    o: noop,
 
 	    d(detaching) {
-	      if (detaching) detach(div5);
+	      if (detaching) detach(section);
 	      if (if_block) if_block.d();
-	      /*div5_binding*/
+	      destroy_each(each_blocks, detaching);
+	      /*section_binding*/
 
-	      ctx[5](null);
+	      ctx[4](null);
 	    }
 
 	  };
 	}
 
-	function instance$i($$self, $$props, $$invalidate) {
+	function instance$j($$self, $$props, $$invalidate) {
 	  let {
-	    maxcontentwidth = ""
+	    heading = ""
+	  } = $$props;
+	  let {
+	    maxcolumncount = 1
 	  } = $$props;
 	  let rootEl;
-	  let navLinks;
-	  let metaLinks;
-	  const year = new Date().getFullYear();
+	  let children = [];
 	  onMount(function () {
 	    return _call(tick, function () {
-	      const navSlot = rootEl.querySelector("slot[name=nav]");
-	      const metaSlot = rootEl.querySelector("slot[name=meta]");
-	      $$invalidate(2, navLinks = navSlot.assignedElements());
-	      $$invalidate(3, metaLinks = metaSlot.assignedElements());
+	      // remap slot content
+	      $$invalidate(3, children = rootEl.querySelector("slot").assignedElements());
+	      const isValid = children.map(child => child.hasAttribute("href")).reduce((sum, valid) => {
+	        return sum && valid;
+	      }, true);
+
+	      if (!isValid) {
+	        $$invalidate(3, children = []);
+	        console.warn("GoAFooterNavSection children must be anchor elements.");
+	        return;
+	      }
+
+	      injectCss(rootEl, ":host", {
+	        "flex-grow": maxcolumncount
+	      });
 	    });
 	  });
 
-	  function div5_binding($$value) {
+	  function section_binding($$value) {
 	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 	      rootEl = $$value;
-	      $$invalidate(1, rootEl);
+	      $$invalidate(2, rootEl);
 	    });
 	  }
 
 	  $$self.$$set = $$props => {
-	    if ('maxcontentwidth' in $$props) $$invalidate(0, maxcontentwidth = $$props.maxcontentwidth);
+	    if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
+	    if ('maxcolumncount' in $$props) $$invalidate(1, maxcolumncount = $$props.maxcolumncount);
 	  };
 
-	  return [maxcontentwidth, rootEl, navLinks, metaLinks, year, div5_binding];
+	  return [heading, maxcolumncount, rootEl, children, section_binding];
 	}
 
-	class Footer extends SvelteElement {
+	class FooterNavSection extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--color-gray-100);border-top:2px solid var(--color-gray-200);border-bottom:1rem solid var(--goa-color-brand)}.content{padding:2rem 1rem;margin:0 auto;width:min(var(--max-content-width), 100%)}@media(min-width: 640px){.content{padding:2rem 1.5rem}}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{flex:auto}.title{font-size:var(--fs-xl);line-height:var(--lh-lg)}.hidden{display:none}.links{display:block;list-style-type:none;padding-left:0}@media(min-width: 720px){.links{display:var(--narrow-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--narrow-column-count)}}@media(min-width: 1024px){.links{display:var(--wide-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--wide-column-count)}}li{padding:0.75rem 0}a{color:var(--goa-color-text)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$i, create_fragment$k, safe_not_equal, {
-	      maxcontentwidth: 0
+	    }, instance$j, create_fragment$l, safe_not_equal, {
+	      heading: 0,
+	      maxcolumncount: 1
 	    }, null);
 
 	    if (options) {
@@ -8586,23 +8575,34 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["maxcontentwidth"];
+	    return ["heading", "maxcolumncount"];
 	  }
 
-	  get maxcontentwidth() {
+	  get heading() {
 	    return this.$$.ctx[0];
 	  }
 
-	  set maxcontentwidth(maxcontentwidth) {
+	  set heading(heading) {
 	    this.$$set({
-	      maxcontentwidth
+	      heading
+	    });
+	    flush();
+	  }
+
+	  get maxcolumncount() {
+	    return this.$$.ctx[1];
+	  }
+
+	  set maxcolumncount(maxcolumncount) {
+	    this.$$set({
+	      maxcolumncount
 	    });
 	    flush();
 	  }
 
 	}
 
-	customElements.define("goa-app-footer", Footer);
+	customElements.define("goa-app-footer-nav-section", FooterNavSection);
 	/* libs/web-components/src/components/form-item/FormItem.svelte generated by Svelte v3.51.0 */
 
 	function create_if_block_2$4(ctx) {
@@ -8787,7 +8787,7 @@
 	  };
 	}
 
-	function create_fragment$j(ctx) {
+	function create_fragment$k(ctx) {
 	  let div1;
 	  let t0;
 	  let div0;
@@ -8924,7 +8924,7 @@
 	  };
 	}
 
-	function instance$h($$self, $$props, $$invalidate) {
+	function instance$i($$self, $$props, $$invalidate) {
 	  const [REQUIREMENT_TYPES, validateRequirementType] = typeValidator("Requirement type", ["optional", "required"], false);
 	  let {
 	    testid = ""
@@ -8980,7 +8980,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$h, create_fragment$j, safe_not_equal, {
+	    }, instance$i, create_fragment$k, safe_not_equal, {
 	      testid: 0,
 	      mt: 1,
 	      mr: 2,
@@ -9112,7 +9112,7 @@
 	customElements.define("goa-form-item", FormItem);
 	/* libs/web-components/src/components/grid/Grid.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$i(ctx) {
+	function create_fragment$j(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -9180,7 +9180,7 @@
 	  };
 	}
 
-	function instance$g($$self, $$props, $$invalidate) {
+	function instance$h($$self, $$props, $$invalidate) {
 	  let {
 	    gap = "m"
 	  } = $$props;
@@ -9225,7 +9225,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, {
 	      gap: 0,
 	      minchildwidth: 1,
 	      mt: 2,
@@ -9321,7 +9321,7 @@
 	customElements.define("goa-grid", Grid);
 	/* libs/web-components/src/components/hero-banner/HeroBanner.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$h(ctx) {
+	function create_fragment$i(ctx) {
 	  let div1;
 	  let goa_page_block;
 	  let h1;
@@ -9406,7 +9406,7 @@
 	  };
 	}
 
-	function instance$f($$self, $$props, $$invalidate) {
+	function instance$g($$self, $$props, $$invalidate) {
 	  let {
 	    heading
 	  } = $$props;
@@ -9434,7 +9434,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,
 	      minheight: 2
@@ -9494,7 +9494,7 @@
 	customElements.define("goa-hero-banner", HeroBanner);
 	/* libs/web-components/src/components/icon-button/IconButton.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$g(ctx) {
+	function create_fragment$h(ctx) {
 	  let button;
 	  let goa_icon;
 	  let button_style_value;
@@ -9666,7 +9666,7 @@
 	  }));
 	}
 
-	function instance$e($$self, $$props, $$invalidate) {
+	function instance$f($$self, $$props, $$invalidate) {
 	  let css;
 	  let isDisabled;
 	  let isInverted;
@@ -9771,7 +9771,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, {
 	      icon: 0,
 	      size: 1,
 	      theme: 2,
@@ -9987,7 +9987,7 @@
 	  };
 	}
 
-	function create_fragment$f(ctx) {
+	function create_fragment$g(ctx) {
 	  let div;
 	  let div_style_value;
 	  let if_block =
@@ -10118,7 +10118,7 @@
 	  };
 	}
 
-	function instance$d($$self, $$props, $$invalidate) {
+	function instance$e($$self, $$props, $$invalidate) {
 	  let isInverted;
 
 	  let _size;
@@ -10208,7 +10208,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, {
 	      mt: 0,
 	      mr: 1,
 	      mb: 2,
@@ -10577,7 +10577,7 @@
 	  };
 	}
 
-	function create_fragment$e(ctx) {
+	function create_fragment$f(ctx) {
 	  let div3;
 	  let div2;
 	  let t0;
@@ -11016,7 +11016,7 @@
 	  }));
 	}
 
-	function instance$c($$self, $$props, $$invalidate) {
+	function instance$d($$self, $$props, $$invalidate) {
 	  let handlesTrailingIconClick;
 	  let isFocused;
 	  let isReadonly;
@@ -11223,7 +11223,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,
@@ -11742,7 +11742,7 @@
 	  };
 	}
 
-	function create_fragment$d(ctx) {
+	function create_fragment$e(ctx) {
 	  let header;
 	  let t0;
 	  let show_if = ["alpha", "beta"].includes(
@@ -11851,7 +11851,7 @@
 	  return val[0].toUpperCase() + val.slice(1);
 	}
 
-	function instance$b($$self, $$props, $$invalidate) {
+	function instance$c($$self, $$props, $$invalidate) {
 	  const [Types, validateType] = typeValidator("Microsite header type", ["live", "alpha", "beta"], true);
 	  let {
 	    type
@@ -11883,7 +11883,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
@@ -12348,7 +12348,7 @@
 	  };
 	}
 
-	function create_fragment$c(ctx) {
+	function create_fragment$d(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
@@ -12413,7 +12413,7 @@
 	  };
 	}
 
-	function instance$a($$self, $$props, $$invalidate) {
+	function instance$b($$self, $$props, $$invalidate) {
 	  let isClosable;
 	  let isOpen;
 
@@ -12503,7 +12503,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: 9,
 	      open: 1,
@@ -12723,7 +12723,7 @@
 	  };
 	}
 
-	function create_fragment$b(ctx) {
+	function create_fragment$c(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
@@ -12788,7 +12788,7 @@
 	  };
 	}
 
-	function instance$9($$self, $$props, $$invalidate) {
+	function instance$a($$self, $$props, $$invalidate) {
 	  let iconType;
 	  const [Types, validateType] = typeValidator("Notification type", ["emergency", "important", "information", "event"], true);
 	  let {
@@ -12826,7 +12826,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);
 
@@ -12868,7 +12868,7 @@
 	/* libs/web-components/src/components/page-block/PageBlock.svelte generated by Svelte v3.51.0 */
 
 
-	function create_fragment$a(ctx) {
+	function create_fragment$b(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -12908,7 +12908,7 @@
 	  };
 	}
 
-	function instance$8($$self, $$props, $$invalidate) {
+	function instance$9($$self, $$props, $$invalidate) {
 	  const Sizes = {
 	    "full": "100%"
 	  };
@@ -12949,7 +12949,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);
@@ -13187,7 +13187,7 @@
 	  };
 	}
 
-	function create_fragment$9(ctx) {
+	function create_fragment$a(ctx) {
 	  let div;
 	  let slot;
 	  let t;
@@ -13310,7 +13310,7 @@
 	  };
 	}
 
-	function instance$7($$self, $$props, $$invalidate) {
+	function instance$8($$self, $$props, $$invalidate) {
 	  let isDisabled;
 	  const [Orientations, validateOrientation] = typeValidator("Radio group orientation", ["vertical", "horizontal"]);
 	  let {
@@ -13437,7 +13437,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,
@@ -13593,7 +13593,7 @@
 	customElements.define("goa-radio-group", RadioGroup);
 	/* libs/web-components/src/components/radio-group/RadioItem.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$8(ctx) {
+	function create_fragment$9(ctx) {
 	  return {
 	    c() {
 	      this.c = noop;
@@ -13607,7 +13607,7 @@
 	  };
 	}
 
-	function instance$6($$self, $$props, $$invalidate) {
+	function instance$7($$self, $$props, $$invalidate) {
 	  let {
 	    value
 	  } = $$props;
@@ -13658,7 +13658,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
@@ -13718,7 +13718,7 @@
 	customElements.define("goa-radio-item", RadioItem);
 	/* libs/web-components/src/components/scrollable/Scrollable.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$7(ctx) {
+	function create_fragment$8(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -13786,7 +13786,7 @@
 	  };
 	}
 
-	function instance$5($$self, $$props, $$invalidate) {
+	function instance$6($$self, $$props, $$invalidate) {
 	  let {
 	    direction = "vertical"
 	  } = $$props;
@@ -13818,7 +13818,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,
@@ -14346,7 +14346,7 @@
 	  };
 	}
 
-	function create_fragment$6(ctx) {
+	function create_fragment$7(ctx) {
 	  let div;
 	  let current_block_type_index;
 	  let if_block;
@@ -14462,7 +14462,7 @@
 	  };
 	}
 
-	function instance$4($$self, $$props, $$invalidate) {
+	function instance$5($$self, $$props, $$invalidate) {
 	  const [Types, validateType] = typeValidator("Skeleton type", ["image", "text", "title", "text-small", "avatar", "header", "paragraph", "thumbnail", "card", "profile", "lines"], true);
 	  const [Sizes, validateSize] = typeValidator("Skeleton size", ["1", "2", "3", "4"]);
 	  let {
@@ -14520,7 +14520,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, {
 	      maxwidth: 0,
 	      size: 1,
 	      linecount: 2,
@@ -14652,7 +14652,7 @@
 	customElements.define("goa-skeleton", Skeleton);
 	/* libs/web-components/src/components/spacer/Spacer.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$5(ctx) {
+	function create_fragment$6(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -14681,7 +14681,7 @@
 	  };
 	}
 
-	function instance$3($$self, $$props, $$invalidate) {
+	function instance$4($$self, $$props, $$invalidate) {
 	  let {
 	    hspacing = "none"
 	  } = $$props;
@@ -14718,7 +14718,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, {
 	      hspacing: 1,
 	      vspacing: 2
 	    }, null);
@@ -15076,7 +15076,7 @@
 	  };
 	}
 
-	function create_fragment$4(ctx) {
+	function create_fragment$5(ctx) {
 	  let if_block_anchor;
 	  let if_block =
 	  /*ready*/
@@ -15121,7 +15121,7 @@
 	  };
 	}
 
-	function instance$2($$self, $$props, $$invalidate) {
+	function instance$3($$self, $$props, $$invalidate) {
 	  let diameter;
 	  let strokewidth;
 	  let radius;
@@ -15252,7 +15252,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, {
 	      size: 10,
 	      invert: 0,
 	      progress: 11,
@@ -15322,6 +15322,261 @@
 	}
 
 	customElements.define("goa-spinner", Spinner);
+	/* libs/web-components/src/components/table/Table.svelte generated by Svelte v3.51.0 */
+
+	function create_fragment$4(ctx) {
+	  let table;
+	  let slot;
+	  let t0;
+	  let template;
+	  let table_style_value;
+	  return {
+	    c() {
+	      table = element("table");
+	      slot = element("slot");
+	      t0 = space();
+	      template = element("template");
+	      template.innerHTML = `<thead><tr><th></th></tr></thead> 
+    <tbody><tr><td></td></tr></tbody> 
+    <tfoot><tr><td></td></tr></tfoot>`;
+	      this.c = noop;
+	      attr(table, "style", table_style_value = `
+    width: ${
+      /*width*/
+      ctx[0]};
+    ${calculateMargin(
+      /*mt*/
+      ctx[1],
+      /*mr*/
+      ctx[2],
+      /*mb*/
+      ctx[3],
+      /*ml*/
+      ctx[4])}
+  `);
+	      toggle_class(table, "sticky",
+	      /*_stickyHeader*/
+	      ctx[6]);
+	    },
+
+	    m(target, anchor) {
+	      insert(target, table, anchor);
+	      append(table, slot);
+	      append(table, t0);
+	      append(table, template);
+	      /*table_binding*/
+
+	      ctx[8](table);
+	    },
+
+	    p(ctx, [dirty]) {
+	      if (dirty &
+	      /*width, mt, mr, mb, ml*/
+	      31 && table_style_value !== (table_style_value = `
+    width: ${
+      /*width*/
+      ctx[0]};
+    ${calculateMargin(
+      /*mt*/
+      ctx[1],
+      /*mr*/
+      ctx[2],
+      /*mb*/
+      ctx[3],
+      /*ml*/
+      ctx[4])}
+  `)) {
+	        attr(table, "style", table_style_value);
+	      }
+
+	      if (dirty &
+	      /*_stickyHeader*/
+	      64) {
+	        toggle_class(table, "sticky",
+	        /*_stickyHeader*/
+	        ctx[6]);
+	      }
+	    },
+
+	    i: noop,
+	    o: noop,
+
+	    d(detaching) {
+	      if (detaching) detach(table);
+	      /*table_binding*/
+
+	      ctx[8](null);
+	    }
+
+	  };
+	}
+
+	function instance$2($$self, $$props, $$invalidate) {
+	  let _stickyHeader;
+
+	  let {
+	    width = ""
+	  } = $$props;
+	  let {
+	    stickyheader = "false"
+	  } = $$props;
+	  let {
+	    mt = null
+	  } = $$props;
+	  let {
+	    mr = null
+	  } = $$props;
+	  let {
+	    mb = null
+	  } = $$props;
+	  let {
+	    ml = null
+	  } = $$props; // Private
+
+	  let _rootEl;
+
+	  onMount(() => {
+	    const slot = _rootEl.querySelector("slot");
+
+	    if (slot) {
+	      // React needs to nest data in a <table>...</table>
+	      const content = slot.assignedElements()[0].querySelectorAll("template table > *");
+
+	      _rootEl.append(...(content.length > 0 ? content : slot.assignedElements()));
+	    } else {
+	      return [..._rootEl.children];
+	    }
+	  });
+
+	  function table_binding($$value) {
+	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+	      _rootEl = $$value;
+	      $$invalidate(5, _rootEl);
+	    });
+	  }
+
+	  $$self.$$set = $$props => {
+	    if ('width' in $$props) $$invalidate(0, width = $$props.width);
+	    if ('stickyheader' in $$props) $$invalidate(7, stickyheader = $$props.stickyheader);
+	    if ('mt' in $$props) $$invalidate(1, mt = $$props.mt);
+	    if ('mr' in $$props) $$invalidate(2, mr = $$props.mr);
+	    if ('mb' in $$props) $$invalidate(3, mb = $$props.mb);
+	    if ('ml' in $$props) $$invalidate(4, ml = $$props.ml);
+	  };
+
+	  $$self.$$.update = () => {
+	    if ($$self.$$.dirty &
+	    /*stickyheader*/
+	    128) {
+	      $$invalidate(6, _stickyHeader = toBoolean(stickyheader));
+	    }
+	  };
+
+	  return [width, mt, mr, mb, ml, _rootEl, _stickyHeader, stickyheader, table_binding];
+	}
+
+	class Table extends SvelteElement {
+	  constructor(options) {
+	    super();
+	    this.shadowRoot.innerHTML = `<style>table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{padding:1rem 1.5rem;border-bottom:1px solid var(--color-gray-200);line-height:1rem}th{background-color:var(--color-white);color:var(--goa-color-text-secondary);padding:1rem;vertical-align:middle;text-align:left;border-bottom:2px solid var(--color-gray-600)}tfoot td{background-color:var(--color-gray-100)}tfoot tr:first-child td{border-top:2px solid var(--color-gray-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
+	    init(this, {
+	      target: this.shadowRoot,
+	      props: attribute_to_object(this.attributes),
+	      customElement: true
+	    }, instance$2, create_fragment$4, safe_not_equal, {
+	      width: 0,
+	      stickyheader: 7,
+	      mt: 1,
+	      mr: 2,
+	      mb: 3,
+	      ml: 4
+	    }, null);
+
+	    if (options) {
+	      if (options.target) {
+	        insert(options.target, this, options.anchor);
+	      }
+
+	      if (options.props) {
+	        this.$set(options.props);
+	        flush();
+	      }
+	    }
+	  }
+
+	  static get observedAttributes() {
+	    return ["width", "stickyheader", "mt", "mr", "mb", "ml"];
+	  }
+
+	  get width() {
+	    return this.$$.ctx[0];
+	  }
+
+	  set width(width) {
+	    this.$$set({
+	      width
+	    });
+	    flush();
+	  }
+
+	  get stickyheader() {
+	    return this.$$.ctx[7];
+	  }
+
+	  set stickyheader(stickyheader) {
+	    this.$$set({
+	      stickyheader
+	    });
+	    flush();
+	  }
+
+	  get mt() {
+	    return this.$$.ctx[1];
+	  }
+
+	  set mt(mt) {
+	    this.$$set({
+	      mt
+	    });
+	    flush();
+	  }
+
+	  get mr() {
+	    return this.$$.ctx[2];
+	  }
+
+	  set mr(mr) {
+	    this.$$set({
+	      mr
+	    });
+	    flush();
+	  }
+
+	  get mb() {
+	    return this.$$.ctx[3];
+	  }
+
+	  set mb(mb) {
+	    this.$$set({
+	      mb
+	    });
+	    flush();
+	  }
+
+	  get ml() {
+	    return this.$$.ctx[4];
+	  }
+
+	  set ml(ml) {
+	    this.$$set({
+	      ml
+	    });
+	    flush();
+	  }
+
+	}
+
+	customElements.define("goa-table", Table);
 	/* libs/web-components/src/components/text-area/TextArea.svelte generated by Svelte v3.51.0 */
 
 	function create_fragment$3(ctx) {
@@ -17191,6 +17446,19 @@
 	  }, void 0);
 	};
 
+	function GoATable(props) {
+	  return jsxRuntime.jsx("goa-table", __assign({
+	    width: props.width,
+	    stickyheader: false
+	  }, {
+	    children: jsxRuntime.jsx("template", {
+	      children: jsxRuntime.jsx("table", {
+	        children: props.children
+	      }, void 0)
+	    }, void 0)
+	  }), void 0);
+	}
+
 	var GoATextArea = function GoATextArea(_a) {
 	  var name = _a.name,
 	      value = _a.value,
@@ -17319,6 +17587,7 @@
 	exports.GoASpacer = GoASpacer;
 	exports.GoASpinner = GoASpinner;
 	exports.GoASuccessBadge = GoASuccessBadge;
+	exports.GoATable = GoATable;
 	exports.GoATextArea = GoATextArea;
 	exports.GoATwoColumnLayout = GoATwoColumnLayout;