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

package/react-components.esm.js

@@ -1151,7 +1151,7 @@ function create_if_block$h(ctx) {
   };
 }
 
-function create_fragment$F(ctx) {
+function create_fragment$G(ctx) {
   let div2;
   let div1;
   let t;
@@ -1235,7 +1235,7 @@ function create_fragment$F(ctx) {
   };
 }
 
-function instance$A($$self, $$props, $$invalidate) {
+function instance$B($$self, $$props, $$invalidate) {
   let {
     heading = ""
   } = $$props;
@@ -1267,7 +1267,7 @@ class AppHeader extends SvelteElement {
       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,
@@ -1484,7 +1484,7 @@ function create_if_block$g(ctx) {
   };
 }
 
-function create_fragment$E(ctx) {
+function create_fragment$F(ctx) {
   let div;
   let t;
   let div_style_value;
@@ -1620,7 +1620,7 @@ function create_fragment$E(ctx) {
   };
 }
 
-function instance$z($$self, $$props, $$invalidate) {
+function instance$A($$self, $$props, $$invalidate) {
   let showIcon;
   let iconType;
   const [Types, validateType] = typeValidator("Badge type", ["success", "important", "information", "emergency", "dark", "midtone", "light"], true);
@@ -1702,7 +1702,7 @@ class Badge extends SvelteElement {
       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,
@@ -1822,7 +1822,7 @@ class Badge extends SvelteElement {
 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;
@@ -1896,7 +1896,7 @@ function create_fragment$D(ctx) {
   };
 }
 
-function instance$y($$self, $$props, $$invalidate) {
+function instance$z($$self, $$props, $$invalidate) {
   let {
     gap = "m"
   } = $$props;
@@ -1940,7 +1940,7 @@ class Block extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$y, create_fragment$D, safe_not_equal, {
+    }, instance$z, create_fragment$E, safe_not_equal, {
       gap: 0,
       direction: 1,
       alignment: 2,
@@ -2046,394 +2046,152 @@ class Block extends SvelteElement {
 }
 
 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);
@@ -2486,7 +2244,7 @@ function create_if_block_1$9(ctx) {
   };
 }
 
-function create_fragment$B(ctx) {
+function create_fragment$D(ctx) {
   let button;
   let button_class_value;
   let button_style_value;
@@ -2644,7 +2402,7 @@ function clickHandler(e) {
   e.stopPropagation();
 }
 
-function instance$w($$self, $$props, $$invalidate) {
+function instance$y($$self, $$props, $$invalidate) {
   let isDisabled;
   let isButtonDark;
   const [Types, validateType] = typeValidator("Button type", ["primary", "submit", "secondary", "tertiary", "start"], true);
@@ -2731,7 +2489,7 @@ class Button extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$w, create_fragment$B, safe_not_equal, {
+    }, instance$y, create_fragment$D, safe_not_equal, {
       type: 0,
       size: 1,
       variant: 2,
@@ -2885,23 +2643,265 @@ class Button extends SvelteElement {
 }
 
 customElements.define("goa-button", Button);
-/* libs/web-components/src/components/callout/Callout.svelte generated by Svelte v3.51.0 */
+/* libs/web-components/src/components/button-group/ButtonGroup.svelte generated by Svelte v3.51.0 */
 
-function create_if_block$e(ctx) {
-  let h3;
-  let t;
+function create_fragment$C(ctx) {
+  let div;
+  let slot;
+  let div_style_value;
   return {
     c() {
-      h3 = element("h3");
-      t = text(
-      /*heading*/
-      ctx[5]);
-    },
-
-    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 &
@@ -2918,7 +2918,7 @@ function create_if_block$e(ctx) {
   };
 }
 
-function create_fragment$A(ctx) {
+function create_fragment$B(ctx) {
   let div;
   let span0;
   let goa_icon;
@@ -3053,7 +3053,7 @@ function create_fragment$A(ctx) {
   };
 }
 
-function instance$v($$self, $$props, $$invalidate) {
+function instance$w($$self, $$props, $$invalidate) {
   let iconType;
   const [Types, validateType] = typeValidator("Callout type", ["emergency", "important", "information", "event", "success"], true);
   let {
@@ -3110,7 +3110,7 @@ class Callout extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$v, create_fragment$A, safe_not_equal, {
+    }, instance$w, create_fragment$B, safe_not_equal, {
       mt: 0,
       mr: 1,
       mb: 2,
@@ -3218,7 +3218,7 @@ class Callout extends SvelteElement {
 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() {
@@ -3249,7 +3249,7 @@ class CardActions extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, null, create_fragment$z, safe_not_equal, {}, null);
+    }, null, create_fragment$A, safe_not_equal, {}, null);
 
     if (options) {
       if (options.target) {
@@ -3261,223 +3261,9 @@ class CardActions extends SvelteElement {
 }
 
 customElements.define("goa-card-actions", CardActions);
-/* libs/web-components/src/components/card-content/CardContent.svelte generated by Svelte v3.51.0 */
-
-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;
@@ -3556,7 +3342,7 @@ function create_fragment$v(ctx) {
   };
 }
 
-function instance$t($$self, $$props, $$invalidate) {
+function instance$v($$self, $$props, $$invalidate) {
   let {
     elevation = 0
   } = $$props;
@@ -3604,7 +3390,7 @@ class Card extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$t, create_fragment$v, safe_not_equal, {
+    }, instance$v, create_fragment$z, safe_not_equal, {
       elevation: 0,
       width: 1,
       height: 2,
@@ -3722,40 +3508,254 @@ class Card extends SvelteElement {
 }
 
 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");
@@ -3778,7 +3778,7 @@ function create_if_block$d(ctx) {
   };
 }
 
-function create_fragment$u(ctx) {
+function create_fragment$v(ctx) {
   let label;
   let div0;
   let input;
@@ -4027,7 +4027,7 @@ function create_fragment$u(ctx) {
   };
 }
 
-function instance$s($$self, $$props, $$invalidate) {
+function instance$t($$self, $$props, $$invalidate) {
   let isDisabled;
   let isError;
   let isChecked;
@@ -4142,7 +4142,7 @@ class Checkbox extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$s, create_fragment$u, safe_not_equal, {
+    }, instance$t, create_fragment$v, safe_not_equal, {
       name: 0,
       checked: 14,
       text: 1,
@@ -4400,7 +4400,7 @@ function create_if_block$c(ctx) {
   };
 }
 
-function create_fragment$t(ctx) {
+function create_fragment$u(ctx) {
   let div1;
   let t0;
   let div0;
@@ -4582,7 +4582,7 @@ function create_fragment$t(ctx) {
   };
 }
 
-function instance$r($$self, $$props, $$invalidate) {
+function instance$s($$self, $$props, $$invalidate) {
   let {
     mt = null
   } = $$props;
@@ -4683,7 +4683,7 @@ class Chip extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$r, create_fragment$t, safe_not_equal, {
+    }, instance$s, create_fragment$u, safe_not_equal, {
       mt: 0,
       mr: 1,
       mb: 2,
@@ -5311,7 +5311,7 @@ function create_if_block_2$5(ctx) {
   };
 }
 
-function create_fragment$s(ctx) {
+function create_fragment$t(ctx) {
   let if_block_anchor;
   let current;
   let if_block =
@@ -5376,7 +5376,7 @@ function create_fragment$s(ctx) {
   };
 }
 
-function instance$q($$self, $$props, $$invalidate) {
+function instance$r($$self, $$props, $$invalidate) {
   let isVisible;
   const [Variants, validateVariant] = typeValidator("Circular progress variant", ["fullscreen", "inline"]);
   const [Sizes, validateSize] = typeValidator("Button size", ["small", "large"]);
@@ -5433,7 +5433,7 @@ class CircularProgress extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$q, create_fragment$s, safe_not_equal, {
+    }, instance$r, create_fragment$t, safe_not_equal, {
       variant: 6,
       size: 7,
       message: 0,
@@ -5517,7 +5517,7 @@ class CircularProgress extends SvelteElement {
 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;
@@ -5642,7 +5642,7 @@ function create_fragment$r(ctx) {
   };
 }
 
-function instance$p($$self, $$props, $$invalidate) {
+function instance$q($$self, $$props, $$invalidate) {
   const [Types, validateType] = typeValidator("Container type", ["interactive", "info", "error", "success", "important", "non-interactive"]);
   const [Accents, validateAccent] = typeValidator("Container accent", ["thick", "thin", "filled"]);
   const [Paddings, validatePadding] = typeValidator("Container padding", ["relaxed", "compact"]);
@@ -5698,7 +5698,7 @@ class Container extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$p, create_fragment$r, safe_not_equal, {
+    }, instance$q, create_fragment$s, safe_not_equal, {
       type: 0,
       accent: 1,
       padding: 2,
@@ -5818,7 +5818,7 @@ class Container extends SvelteElement {
 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 {
@@ -5877,7 +5877,7 @@ function create_fragment$q(ctx) {
   };
 }
 
-function instance$o($$self, $$props, $$invalidate) {
+function instance$p($$self, $$props, $$invalidate) {
   let {
     testid = ""
   } = $$props;
@@ -5913,7 +5913,7 @@ class Divider extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$o, create_fragment$q, safe_not_equal, {
+    }, instance$p, create_fragment$r, safe_not_equal, {
       testid: 0,
       mt: 1,
       mr: 2,
@@ -6104,12 +6104,139 @@ function deleteContext(name) {
   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) {
+      {
+        (async () => {
+          await tick();
+
+          if (!isBound) {
+            $$invalidate(4, isBound = true);
+            $$invalidate(3, ctx = getContext(name));
+            ctx.notify({
+              type: "bind",
+              name,
+              label,
+              value
+            });
+          }
+        })();
+      }
+    }
+  };
+
+  return [name, value, label, ctx, isBound];
+}
+
+class DropdownItem extends SvelteElement {
+  constructor(options) {
+    super();
+    init(this, {
+      target: this.shadowRoot,
+      props: attribute_to_object(this.attributes),
+      customElement: true
+    }, instance$o, create_fragment$q, safe_not_equal, {
+      name: 0,
+      value: 1,
+      label: 2
+    }, null);
+
+    if (options) {
+      if (options.target) {
+        insert(options.target, this, options.anchor);
+      }
+
+      if (options.props) {
+        this.$set(options.props);
+        flush();
+      }
+    }
+  }
+
+  static get observedAttributes() {
+    return ["name", "value", "label"];
+  }
+
+  get name() {
+    return this.$$.ctx[0];
+  }
+
+  set name(name) {
+    this.$$set({
+      name
+    });
+    flush();
+  }
+
+  get value() {
+    return this.$$.ctx[1];
+  }
+
+  set value(value) {
+    this.$$set({
+      value
+    });
+    flush();
+  }
+
+  get label() {
+    return this.$$.ctx[2];
+  }
+
+  set label(label) {
+    this.$$set({
+      label
+    });
+    flush();
+  }
+
+}
+
+customElements.define("goa-dropdown-item", DropdownItem);
+/* libs/web-components/src/components/dropdown/Dropdown.svelte generated by Svelte v3.51.0 */
+
+function get_each_context_1(ctx, list, i) {
+  const child_ctx = ctx.slice();
+  child_ctx[47] = list[i];
   child_ctx[51] = i;
   return child_ctx;
 }
@@ -7398,205 +7525,78 @@ class Dropdown extends SvelteElement {
 }
 
 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);
-  };
-
-  $$self.$$.update = () => {
-    if ($$self.$$.dirty &
-    /*isBound, name, ctx, label, value*/
-    31) {
-      {
-        (async () => {
-          await tick();
+    d(detaching) {
+      if (detaching) detach(div);
+      /*div_binding*/
 
-          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);
@@ -7757,7 +7757,7 @@ class FocusTrap extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$l, create_fragment$n, safe_not_equal, {
+    }, instance$m, create_fragment$o, safe_not_equal, {
       active: 1
     }, null);
 
@@ -7791,133 +7791,151 @@ class FocusTrap extends SvelteElement {
 }
 
 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);
       }
     },
 
@@ -7925,120 +7943,103 @@ function create_fragment$m(ctx) {
     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(async () => {
     await tick();
-    $$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.");
-      return;
-    }
+    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 {
@@ -8048,7 +8049,7 @@ function create_each_block$2(ctx) {
       t = text(t_value);
       attr(a, "href", a_href_value =
       /*child*/
-      ctx[5].href);
+      ctx[3].href);
     },
 
     m(target, anchor) {
@@ -8060,15 +8061,15 @@ function create_each_block$2(ctx) {
     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);
       }
     },
@@ -8080,33 +8081,26 @@ function create_each_block$2(ctx) {
   };
 }
 
-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) {
@@ -8115,29 +8109,12 @@ function create_fragment$l(ctx) {
 
       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) {
@@ -8146,40 +8123,25 @@ function create_fragment$l(ctx) {
       /*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);
           }
@@ -8191,25 +8153,6 @@ function create_fragment$l(ctx) {
 
         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,
@@ -8217,226 +8160,239 @@ function create_fragment$l(ctx) {
 
     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(async () => {
-    await tick(); // remap slot content
-
-    $$invalidate(3, children = rootEl.querySelector("slot").assignedElements());
+    await tick();
+    $$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.");
+      $$invalidate(1, children = []);
+      console.warn("GoAFooterMetaSection children must be anchor elements.");
       return;
     }
-
-    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();
+      section = element("section");
       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`;
+      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);
@@ -8444,31 +8400,49 @@ function create_fragment$k(ctx) {
       }
 
       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);
       }
     },
 
@@ -8476,56 +8450,71 @@ function create_fragment$k(ctx) {
     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(async () => {
-    await tick();
-    const navSlot = rootEl.querySelector("slot[name=nav]");
-    const metaSlot = rootEl.querySelector("slot[name=meta]");
-    $$invalidate(2, navLinks = navSlot.assignedElements());
-    $$invalidate(3, metaLinks = metaSlot.assignedElements());
+    await tick(); // 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) {
@@ -8541,23 +8530,34 @@ class Footer extends SvelteElement {
   }
 
   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) {
@@ -8742,7 +8742,7 @@ function create_if_block$7(ctx) {
   };
 }
 
-function create_fragment$j(ctx) {
+function create_fragment$k(ctx) {
   let div1;
   let t0;
   let div0;
@@ -8879,7 +8879,7 @@ function create_fragment$j(ctx) {
   };
 }
 
-function instance$h($$self, $$props, $$invalidate) {
+function instance$i($$self, $$props, $$invalidate) {
   const [REQUIREMENT_TYPES, validateRequirementType] = typeValidator("Requirement type", ["optional", "required"], false);
   let {
     testid = ""
@@ -8935,7 +8935,7 @@ class FormItem extends SvelteElement {
       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,
@@ -9067,7 +9067,7 @@ class FormItem extends SvelteElement {
 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;
@@ -9135,7 +9135,7 @@ function create_fragment$i(ctx) {
   };
 }
 
-function instance$g($$self, $$props, $$invalidate) {
+function instance$h($$self, $$props, $$invalidate) {
   let {
     gap = "m"
   } = $$props;
@@ -9180,7 +9180,7 @@ class Grid extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$g, create_fragment$i, safe_not_equal, {
+    }, instance$h, create_fragment$j, safe_not_equal, {
       gap: 0,
       minchildwidth: 1,
       mt: 2,
@@ -9276,7 +9276,7 @@ class Grid extends SvelteElement {
 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;
@@ -9361,7 +9361,7 @@ function create_fragment$h(ctx) {
   };
 }
 
-function instance$f($$self, $$props, $$invalidate) {
+function instance$g($$self, $$props, $$invalidate) {
   let {
     heading
   } = $$props;
@@ -9389,7 +9389,7 @@ class HeroBanner extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$f, create_fragment$h, safe_not_equal, {
+    }, instance$g, create_fragment$i, safe_not_equal, {
       heading: 0,
       backgroundurl: 1,
       minheight: 2
@@ -9449,7 +9449,7 @@ class HeroBanner extends SvelteElement {
 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;
@@ -9621,7 +9621,7 @@ function handleClick(e) {
   }));
 }
 
-function instance$e($$self, $$props, $$invalidate) {
+function instance$f($$self, $$props, $$invalidate) {
   let css;
   let isDisabled;
   let isInverted;
@@ -9726,7 +9726,7 @@ class IconButton extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$e, create_fragment$g, safe_not_equal, {
+    }, instance$f, create_fragment$h, safe_not_equal, {
       icon: 0,
       size: 1,
       theme: 2,
@@ -9942,7 +9942,7 @@ function create_if_block$6(ctx) {
   };
 }
 
-function create_fragment$f(ctx) {
+function create_fragment$g(ctx) {
   let div;
   let div_style_value;
   let if_block =
@@ -10073,7 +10073,7 @@ function create_fragment$f(ctx) {
   };
 }
 
-function instance$d($$self, $$props, $$invalidate) {
+function instance$e($$self, $$props, $$invalidate) {
   let isInverted;
 
   let _size;
@@ -10163,7 +10163,7 @@ class Icon extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$d, create_fragment$f, safe_not_equal, {
+    }, instance$e, create_fragment$g, safe_not_equal, {
       mt: 0,
       mr: 1,
       mb: 2,
@@ -10532,7 +10532,7 @@ function create_if_block$5(ctx) {
   };
 }
 
-function create_fragment$e(ctx) {
+function create_fragment$f(ctx) {
   let div3;
   let div2;
   let t0;
@@ -10971,7 +10971,7 @@ function doClick() {
   }));
 }
 
-function instance$c($$self, $$props, $$invalidate) {
+function instance$d($$self, $$props, $$invalidate) {
   let handlesTrailingIconClick;
   let isFocused;
   let isReadonly;
@@ -11178,7 +11178,7 @@ class Input extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$c, create_fragment$e, safe_not_equal, {
+    }, instance$d, create_fragment$f, safe_not_equal, {
       type: 1,
       name: 2,
       value: 0,
@@ -11697,7 +11697,7 @@ function create_if_block$4(ctx) {
   };
 }
 
-function create_fragment$d(ctx) {
+function create_fragment$e(ctx) {
   let header;
   let t0;
   let show_if = ["alpha", "beta"].includes(
@@ -11806,7 +11806,7 @@ function capitalize(val) {
   return val[0].toUpperCase() + val.slice(1);
 }
 
-function instance$b($$self, $$props, $$invalidate) {
+function instance$c($$self, $$props, $$invalidate) {
   const [Types, validateType] = typeValidator("Microsite header type", ["live", "alpha", "beta"], true);
   let {
     type
@@ -11838,7 +11838,7 @@ class MicrositeHeader extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$b, create_fragment$d, safe_not_equal, {
+    }, instance$c, create_fragment$e, safe_not_equal, {
       type: 0,
       version: 1,
       feedbackurl: 2
@@ -12303,7 +12303,7 @@ function create_if_block_1$1(ctx) {
   };
 }
 
-function create_fragment$c(ctx) {
+function create_fragment$d(ctx) {
   let if_block_anchor;
   let current;
   let if_block =
@@ -12368,7 +12368,7 @@ function create_fragment$c(ctx) {
   };
 }
 
-function instance$a($$self, $$props, $$invalidate) {
+function instance$b($$self, $$props, $$invalidate) {
   let isClosable;
   let isOpen;
 
@@ -12458,7 +12458,7 @@ class Modal extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$a, create_fragment$c, safe_not_equal, {
+    }, instance$b, create_fragment$d, safe_not_equal, {
       heading: 0,
       closable: 9,
       open: 1,
@@ -12678,7 +12678,7 @@ function create_if_block$2(ctx) {
   };
 }
 
-function create_fragment$b(ctx) {
+function create_fragment$c(ctx) {
   let if_block_anchor;
   let current;
   let if_block =
@@ -12743,7 +12743,7 @@ function create_fragment$b(ctx) {
   };
 }
 
-function instance$9($$self, $$props, $$invalidate) {
+function instance$a($$self, $$props, $$invalidate) {
   let iconType;
   const [Types, validateType] = typeValidator("Notification type", ["emergency", "important", "information", "event"], true);
   let {
@@ -12781,7 +12781,7 @@ class Notification extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$9, create_fragment$b, safe_not_equal, {
+    }, instance$a, create_fragment$c, safe_not_equal, {
       type: 0
     }, null);
 
@@ -12823,7 +12823,7 @@ function isValidDimension(value) {
 /* libs/web-components/src/components/page-block/PageBlock.svelte generated by Svelte v3.51.0 */
 
 
-function create_fragment$a(ctx) {
+function create_fragment$b(ctx) {
   let div;
   let slot;
   let div_style_value;
@@ -12863,7 +12863,7 @@ function create_fragment$a(ctx) {
   };
 }
 
-function instance$8($$self, $$props, $$invalidate) {
+function instance$9($$self, $$props, $$invalidate) {
   const Sizes = {
     "full": "100%"
   };
@@ -12904,7 +12904,7 @@ class PageBlock extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$8, create_fragment$a, safe_not_equal, {
+    }, instance$9, create_fragment$b, safe_not_equal, {
       width: 1,
       _width: 0
     }, null);
@@ -13142,7 +13142,7 @@ function create_each_block$1(key_1, ctx) {
   };
 }
 
-function create_fragment$9(ctx) {
+function create_fragment$a(ctx) {
   let div;
   let slot;
   let t;
@@ -13265,7 +13265,7 @@ function create_fragment$9(ctx) {
   };
 }
 
-function instance$7($$self, $$props, $$invalidate) {
+function instance$8($$self, $$props, $$invalidate) {
   let isDisabled;
   const [Orientations, validateOrientation] = typeValidator("Radio group orientation", ["vertical", "horizontal"]);
   let {
@@ -13392,7 +13392,7 @@ class RadioGroup extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$7, create_fragment$9, safe_not_equal, {
+    }, instance$8, create_fragment$a, safe_not_equal, {
       name: 1,
       value: 0,
       orientation: 2,
@@ -13548,7 +13548,7 @@ class RadioGroup extends SvelteElement {
 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;
@@ -13562,7 +13562,7 @@ function create_fragment$8(ctx) {
   };
 }
 
-function instance$6($$self, $$props, $$invalidate) {
+function instance$7($$self, $$props, $$invalidate) {
   let {
     value
   } = $$props;
@@ -13613,7 +13613,7 @@ class RadioItem extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$6, create_fragment$8, safe_not_equal, {
+    }, instance$7, create_fragment$9, safe_not_equal, {
       value: 0,
       label: 1,
       name: 2
@@ -13673,7 +13673,7 @@ class RadioItem extends SvelteElement {
 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;
@@ -13741,7 +13741,7 @@ function create_fragment$7(ctx) {
   };
 }
 
-function instance$5($$self, $$props, $$invalidate) {
+function instance$6($$self, $$props, $$invalidate) {
   let {
     direction = "vertical"
   } = $$props;
@@ -13773,7 +13773,7 @@ class Scrollable extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$5, create_fragment$7, safe_not_equal, {
+    }, instance$6, create_fragment$8, safe_not_equal, {
       direction: 0,
       hpadding: 1,
       vpadding: 2,
@@ -14301,7 +14301,7 @@ function create_each_block(ctx) {
   };
 }
 
-function create_fragment$6(ctx) {
+function create_fragment$7(ctx) {
   let div;
   let current_block_type_index;
   let if_block;
@@ -14417,7 +14417,7 @@ function create_fragment$6(ctx) {
   };
 }
 
-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 {
@@ -14475,7 +14475,7 @@ class Skeleton extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$4, create_fragment$6, safe_not_equal, {
+    }, instance$5, create_fragment$7, safe_not_equal, {
       maxwidth: 0,
       size: 1,
       linecount: 2,
@@ -14607,7 +14607,7 @@ class Skeleton extends SvelteElement {
 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() {
@@ -14636,7 +14636,7 @@ function create_fragment$5(ctx) {
   };
 }
 
-function instance$3($$self, $$props, $$invalidate) {
+function instance$4($$self, $$props, $$invalidate) {
   let {
     hspacing = "none"
   } = $$props;
@@ -14673,7 +14673,7 @@ class Spacer extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$3, create_fragment$5, safe_not_equal, {
+    }, instance$4, create_fragment$6, safe_not_equal, {
       hspacing: 1,
       vspacing: 2
     }, null);
@@ -15031,7 +15031,7 @@ function create_if_block(ctx) {
   };
 }
 
-function create_fragment$4(ctx) {
+function create_fragment$5(ctx) {
   let if_block_anchor;
   let if_block =
   /*ready*/
@@ -15076,7 +15076,7 @@ function create_fragment$4(ctx) {
   };
 }
 
-function instance$2($$self, $$props, $$invalidate) {
+function instance$3($$self, $$props, $$invalidate) {
   let diameter;
   let strokewidth;
   let radius;
@@ -15207,7 +15207,7 @@ class Spinner extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$2, create_fragment$4, safe_not_equal, {
+    }, instance$3, create_fragment$5, safe_not_equal, {
       size: 10,
       invert: 0,
       progress: 11,
@@ -15277,6 +15277,261 @@ class Spinner extends SvelteElement {
 }
 
 customElements.define("goa-spinner", Spinner);
+/* libs/web-components/src/components/table/Table.svelte generated by Svelte v3.51.0 */
+
+function create_fragment$4(ctx) {
+  let table;
+  let slot;
+  let t0;
+  let template;
+  let table_style_value;
+  return {
+    c() {
+      table = element("table");
+      slot = element("slot");
+      t0 = space();
+      template = element("template");
+      template.innerHTML = `<thead><tr><th></th></tr></thead> 
+    <tbody><tr><td></td></tr></tbody> 
+    <tfoot><tr><td></td></tr></tfoot>`;
+      this.c = noop;
+      attr(table, "style", table_style_value = `
+    width: ${
+      /*width*/
+      ctx[0]};
+    ${calculateMargin(
+      /*mt*/
+      ctx[1],
+      /*mr*/
+      ctx[2],
+      /*mb*/
+      ctx[3],
+      /*ml*/
+      ctx[4])}
+  `);
+      toggle_class(table, "sticky",
+      /*_stickyHeader*/
+      ctx[6]);
+    },
+
+    m(target, anchor) {
+      insert(target, table, anchor);
+      append(table, slot);
+      append(table, t0);
+      append(table, template);
+      /*table_binding*/
+
+      ctx[8](table);
+    },
+
+    p(ctx, [dirty]) {
+      if (dirty &
+      /*width, mt, mr, mb, ml*/
+      31 && table_style_value !== (table_style_value = `
+    width: ${
+      /*width*/
+      ctx[0]};
+    ${calculateMargin(
+      /*mt*/
+      ctx[1],
+      /*mr*/
+      ctx[2],
+      /*mb*/
+      ctx[3],
+      /*ml*/
+      ctx[4])}
+  `)) {
+        attr(table, "style", table_style_value);
+      }
+
+      if (dirty &
+      /*_stickyHeader*/
+      64) {
+        toggle_class(table, "sticky",
+        /*_stickyHeader*/
+        ctx[6]);
+      }
+    },
+
+    i: noop,
+    o: noop,
+
+    d(detaching) {
+      if (detaching) detach(table);
+      /*table_binding*/
+
+      ctx[8](null);
+    }
+
+  };
+}
+
+function instance$2($$self, $$props, $$invalidate) {
+  let _stickyHeader;
+
+  let {
+    width = ""
+  } = $$props;
+  let {
+    stickyheader = "false"
+  } = $$props;
+  let {
+    mt = null
+  } = $$props;
+  let {
+    mr = null
+  } = $$props;
+  let {
+    mb = null
+  } = $$props;
+  let {
+    ml = null
+  } = $$props; // Private
+
+  let _rootEl;
+
+  onMount(() => {
+    const slot = _rootEl.querySelector("slot");
+
+    if (slot) {
+      // React needs to nest data in a <table>...</table>
+      const content = slot.assignedElements()[0].querySelectorAll("template table > *");
+
+      _rootEl.append(...(content.length > 0 ? content : slot.assignedElements()));
+    } else {
+      return [..._rootEl.children];
+    }
+  });
+
+  function table_binding($$value) {
+    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+      _rootEl = $$value;
+      $$invalidate(5, _rootEl);
+    });
+  }
+
+  $$self.$$set = $$props => {
+    if ('width' in $$props) $$invalidate(0, width = $$props.width);
+    if ('stickyheader' in $$props) $$invalidate(7, stickyheader = $$props.stickyheader);
+    if ('mt' in $$props) $$invalidate(1, mt = $$props.mt);
+    if ('mr' in $$props) $$invalidate(2, mr = $$props.mr);
+    if ('mb' in $$props) $$invalidate(3, mb = $$props.mb);
+    if ('ml' in $$props) $$invalidate(4, ml = $$props.ml);
+  };
+
+  $$self.$$.update = () => {
+    if ($$self.$$.dirty &
+    /*stickyheader*/
+    128) {
+      $$invalidate(6, _stickyHeader = toBoolean(stickyheader));
+    }
+  };
+
+  return [width, mt, mr, mb, ml, _rootEl, _stickyHeader, stickyheader, table_binding];
+}
+
+class Table extends SvelteElement {
+  constructor(options) {
+    super();
+    this.shadowRoot.innerHTML = `<style>table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{padding:1rem 1.5rem;border-bottom:1px solid var(--color-gray-200);line-height:1rem}th{background-color:var(--color-white);color:var(--goa-color-text-secondary);padding:1rem;vertical-align:middle;text-align:left;border-bottom:2px solid var(--color-gray-600)}tfoot td{background-color:var(--color-gray-100)}tfoot tr:first-child td{border-top:2px solid var(--color-gray-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
+    init(this, {
+      target: this.shadowRoot,
+      props: attribute_to_object(this.attributes),
+      customElement: true
+    }, instance$2, create_fragment$4, safe_not_equal, {
+      width: 0,
+      stickyheader: 7,
+      mt: 1,
+      mr: 2,
+      mb: 3,
+      ml: 4
+    }, null);
+
+    if (options) {
+      if (options.target) {
+        insert(options.target, this, options.anchor);
+      }
+
+      if (options.props) {
+        this.$set(options.props);
+        flush();
+      }
+    }
+  }
+
+  static get observedAttributes() {
+    return ["width", "stickyheader", "mt", "mr", "mb", "ml"];
+  }
+
+  get width() {
+    return this.$$.ctx[0];
+  }
+
+  set width(width) {
+    this.$$set({
+      width
+    });
+    flush();
+  }
+
+  get stickyheader() {
+    return this.$$.ctx[7];
+  }
+
+  set stickyheader(stickyheader) {
+    this.$$set({
+      stickyheader
+    });
+    flush();
+  }
+
+  get mt() {
+    return this.$$.ctx[1];
+  }
+
+  set mt(mt) {
+    this.$$set({
+      mt
+    });
+    flush();
+  }
+
+  get mr() {
+    return this.$$.ctx[2];
+  }
+
+  set mr(mr) {
+    this.$$set({
+      mr
+    });
+    flush();
+  }
+
+  get mb() {
+    return this.$$.ctx[3];
+  }
+
+  set mb(mb) {
+    this.$$set({
+      mb
+    });
+    flush();
+  }
+
+  get ml() {
+    return this.$$.ctx[4];
+  }
+
+  set ml(ml) {
+    this.$$set({
+      ml
+    });
+    flush();
+  }
+
+}
+
+customElements.define("goa-table", Table);
 /* libs/web-components/src/components/text-area/TextArea.svelte generated by Svelte v3.51.0 */
 
 function create_fragment$3(ctx) {
@@ -17151,6 +17406,19 @@ const GoASpinner = ({
   }, void 0);
 };
 
+function GoATable(props) {
+  return jsx("goa-table", Object.assign({
+    width: props.width,
+    stickyheader: false
+  }, {
+    children: jsx("template", {
+      children: jsx("table", {
+        children: props.children
+      }, void 0)
+    }, void 0)
+  }), void 0);
+}
+
 const GoATextArea = ({
   name,
   value,
@@ -17231,4 +17499,4 @@ function GoATwoColumnLayout(props) {
   }), void 0);
 }
 
-export { GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoABlock, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADivider, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFormItem, GoAGrid, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAOneColumnLayout, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpacer, GoASpinner, GoASuccessBadge, GoATextArea, GoATwoColumnLayout };
+export { GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoABlock, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADivider, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFormItem, GoAGrid, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAOneColumnLayout, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpacer, GoASpinner, GoASuccessBadge, GoATable, GoATextArea, GoATwoColumnLayout };