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

package/react-components.esm.js

@@ -1235,7 +1235,7 @@ function create_fragment$F(ctx) {
   };
 }
 
-function instance$A($$self, $$props, $$invalidate) {
+function instance$z($$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$z, create_fragment$F, safe_not_equal, {
       heading: 0,
       url: 1,
       testid: 2,
@@ -1620,7 +1620,7 @@ function create_fragment$E(ctx) {
   };
 }
 
-function instance$z($$self, $$props, $$invalidate) {
+function instance$y($$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$y, create_fragment$E, safe_not_equal, {
       type: 0,
       testid: 1,
       content: 2,
@@ -1896,7 +1896,7 @@ function create_fragment$D(ctx) {
   };
 }
 
-function instance$y($$self, $$props, $$invalidate) {
+function instance$x($$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$x, create_fragment$D, safe_not_equal, {
       gap: 0,
       direction: 1,
       alignment: 2,
@@ -2046,248 +2046,6 @@ class Block extends SvelteElement {
 }
 
 customElements.define("goa-block", Block);
-/* libs/web-components/src/components/button-group/ButtonGroup.svelte generated by Svelte v3.51.0 */
-
-function create_fragment$C(ctx) {
-  let div;
-  let slot;
-  let div_style_value;
-  return {
-    c() {
-      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/button/Button.svelte generated by Svelte v3.51.0 */
 
 function create_else_block$2(ctx) {
@@ -2486,7 +2244,7 @@ function create_if_block_1$9(ctx) {
   };
 }
 
-function create_fragment$B(ctx) {
+function create_fragment$C(ctx) {
   let button;
   let button_class_value;
   let button_style_value;
@@ -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$w, create_fragment$C, safe_not_equal, {
       type: 0,
       size: 1,
       variant: 2,
@@ -2885,14 +2643,256 @@ 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;
-  return {
-    c() {
-      h3 = element("h3");
+function create_fragment$B(ctx) {
+  let div;
+  let slot;
+  let div_style_value;
+  return {
+    c() {
+      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$v($$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$v, create_fragment$B, 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]);
@@ -3053,7 +3053,7 @@ function create_fragment$A(ctx) {
   };
 }
 
-function instance$v($$self, $$props, $$invalidate) {
+function instance$u($$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$u, create_fragment$A, safe_not_equal, {
       mt: 0,
       mr: 1,
       mb: 2,
@@ -3261,230 +3261,16 @@ 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 */
+/* libs/web-components/src/components/card/Card.svelte generated by Svelte v3.51.0 */
 
 function create_fragment$y(ctx) {
   let div;
+  let slot;
+  let div_style_value;
   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) {
-  let div;
-  let slot;
-  let div_style_value;
-  return {
-    c() {
-      div = element("div");
-      slot = element("slot");
+      slot = element("slot");
       this.c = noop;
       attr(div, "data-testid",
       /*testid*/
@@ -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$t, create_fragment$y, 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$x(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}
+}
 
+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$x, safe_not_equal, {}, null);
 
-function create_if_block$d(ctx) {
-  let svg;
-  let rect;
-  return {
-    c() {
+    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$w(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$w, 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$v(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$s($$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$s, create_fragment$v, 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");
@@ -4027,7 +4027,7 @@ function create_fragment$u(ctx) {
   };
 }
 
-function instance$s($$self, $$props, $$invalidate) {
+function instance$r($$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$r, create_fragment$u, safe_not_equal, {
       name: 0,
       checked: 14,
       text: 1,
@@ -4582,7 +4582,7 @@ function create_fragment$t(ctx) {
   };
 }
 
-function instance$r($$self, $$props, $$invalidate) {
+function instance$q($$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$q, create_fragment$t, safe_not_equal, {
       mt: 0,
       mr: 1,
       mb: 2,
@@ -5376,7 +5376,7 @@ function create_fragment$s(ctx) {
   };
 }
 
-function instance$q($$self, $$props, $$invalidate) {
+function instance$p($$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$p, create_fragment$s, safe_not_equal, {
       variant: 6,
       size: 7,
       message: 0,
@@ -5642,7 +5642,7 @@ function create_fragment$r(ctx) {
   };
 }
 
-function instance$p($$self, $$props, $$invalidate) {
+function instance$o($$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$o, create_fragment$r, safe_not_equal, {
       type: 0,
       accent: 1,
       padding: 2,
@@ -5877,7 +5877,7 @@ function create_fragment$q(ctx) {
   };
 }
 
-function instance$o($$self, $$props, $$invalidate) {
+function instance$n($$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$n, create_fragment$q, safe_not_equal, {
       testid: 0,
       mt: 1,
       mr: 2,
@@ -5995,186 +5995,83 @@ class Divider extends SvelteElement {
 }
 
 customElements.define("goa-divider", Divider);
-const subscriber_queue = [];
-/**
- * Create a `Writable` store that allows both updating and reading by subscription.
- * @param {*=}value initial value
- * @param {StartStopNotifier=}start start and stop notifications for subscriptions
- */
-
-function writable(value, start = noop) {
-  let stop;
-  const subscribers = new Set();
-
-  function set(new_value) {
-    if (safe_not_equal(value, new_value)) {
-      value = new_value;
+/* libs/web-components/src/components/dropdown/Dropdown.svelte generated by Svelte v3.51.0 */
 
-      if (stop) {
-        // store is ready
-        const run_queue = !subscriber_queue.length;
+function get_each_context_1(ctx, list, i) {
+  const child_ctx = ctx.slice();
+  child_ctx[48] = list[i];
+  child_ctx[52] = i;
+  return child_ctx;
+}
 
-        for (const subscriber of subscribers) {
-          subscriber[1]();
-          subscriber_queue.push(subscriber, value);
-        }
-
-        if (run_queue) {
-          for (let i = 0; i < subscriber_queue.length; i += 2) {
-            subscriber_queue[i][0](subscriber_queue[i + 1]);
-          }
-
-          subscriber_queue.length = 0;
-        }
-      }
-    }
-  }
-
-  function update(fn) {
-    set(fn(value));
-  }
-
-  function subscribe(run, invalidate = noop) {
-    const subscriber = [run, invalidate];
-    subscribers.add(subscriber);
-
-    if (subscribers.size === 1) {
-      stop = start(set) || noop;
-    }
-
-    run(value);
-    return () => {
-      subscribers.delete(subscriber);
-
-      if (subscribers.size === 0) {
-        stop();
-        stop = null;
-      }
-    };
-  }
-
-  return {
-    set,
-    update,
-    subscribe
-  };
-}
-
-const stores = {};
-
-class ContextStoreInternal {
-  constructor() {
-    this.store = writable();
-  }
-
-  subscribe(cb) {
-    this.store.subscribe(state => {
-      if (!state) return;
-      cb(state);
-    });
-  }
-
-  notify(msg) {
-    var _this = this;
-
-    const fn = async function fn() {
-      await tick();
-
-      _this.store.update(() => msg);
-    };
-
-    fn();
-  }
-
-}
-
-function getContext(name) {
-  let ctx = stores[name];
-
-  if (!ctx) {
-    ctx = new ContextStoreInternal();
-  }
-
-  stores[name] = ctx;
-  return ctx;
-}
-
-function deleteContext(name) {
-  const store = stores[name];
-  if (!store) return;
-  delete stores[name];
-}
-/* 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;
-}
-
-function get_each_context$4(ctx, list, i) {
-  const child_ctx = ctx.slice();
-  child_ctx[47] = list[i];
-  return child_ctx;
-} // (224:2) {:else}
+function get_each_context$4(ctx, list, i) {
+  const child_ctx = ctx.slice();
+  child_ctx[48] = list[i];
+  return child_ctx;
+} // (244:2) {:else}
 
 
 function create_else_block$1(ctx) {
   let t0;
+  let slot;
+  let t1;
   let goa_input;
   let goa_input_aria_label_value;
   let goa_input_data_testid_value;
-  let t1;
-  let ul;
   let t2;
-  let slot;
+  let ul;
+  let each_blocks = [];
+  let each_1_lookup = new Map();
   let ul_style_value;
   let mounted;
   let dispose;
   let if_block =
-  /*isMenuVisible*/
-  ctx[18] && create_if_block_1$5(ctx);
+  /*_isMenuVisible*/
+  ctx[15] && create_if_block_1$5(ctx);
   let each_value_1 =
-  /*options*/
-  ctx[16];
-  let each_blocks = [];
+  /*_options*/
+  ctx[13];
+
+  const get_key = ctx =>
+  /*index*/
+  ctx[52];
 
   for (let i = 0; i < each_value_1.length; i += 1) {
-    each_blocks[i] = create_each_block_1(get_each_context_1(ctx, each_value_1, i));
+    let child_ctx = get_each_context_1(ctx, each_value_1, i);
+    let key = get_key(child_ctx);
+    each_1_lookup.set(key, each_blocks[i] = create_each_block_1(key, child_ctx));
   }
 
   return {
     c() {
       if (if_block) if_block.c();
       t0 = space();
-      goa_input = element("goa-input");
+      slot = element("slot");
       t1 = space();
+      goa_input = element("goa-input");
+      t2 = space();
       ul = element("ul");
 
       for (let i = 0; i < each_blocks.length; i += 1) {
         each_blocks[i].c();
       }
 
-      t2 = space();
-      slot = element("slot");
       set_custom_element_data(goa_input, "error",
       /*error*/
-      ctx[8]);
+      ctx[7]);
       set_custom_element_data(goa_input, "disabled",
       /*disabled*/
-      ctx[7]);
+      ctx[6]);
       set_custom_element_data(goa_input, "leadingicon",
       /*leadingicon*/
-      ctx[3]);
+      ctx[2]);
       set_custom_element_data(goa_input, "placeholder",
       /*placeholder*/
-      ctx[5]);
+      ctx[4]);
       set_custom_element_data(goa_input, "aria-controls", "menu");
       set_custom_element_data(goa_input, "aria-expanded",
-      /*isMenuVisible*/
-      ctx[18]);
+      /*_isMenuVisible*/
+      ctx[15]);
       set_custom_element_data(goa_input, "aria-label", goa_input_aria_label_value =
       /*arialabel*/
       ctx[1] ||
@@ -6188,54 +6085,54 @@ function create_else_block$1(ctx) {
       set_custom_element_data(goa_input, "trailingicon", "chevron-down");
       set_custom_element_data(goa_input, "type", "text");
       set_custom_element_data(goa_input, "value",
-      /*selectedLabel*/
-      ctx[17]);
+      /*_selectedLabel*/
+      ctx[14]);
       set_custom_element_data(goa_input, "width", "100%");
       attr(ul, "id", "menu");
       attr(ul, "role", "listbox");
       attr(ul, "aria-activedescendant",
-      /*selectedLabel*/
-      ctx[17]);
+      /*_selectedLabel*/
+      ctx[14]);
       attr(ul, "data-testid", "dropdown-menu");
       attr(ul, "tabindex", "0");
       attr(ul, "class", "dropdown-list");
       attr(ul, "style", ul_style_value = `overflow-y: auto; max-height: ${
       /*maxheight*/
-      ctx[4]}`);
+      ctx[3]}`);
       toggle_class(ul, "dropdown-active",
-      /*isMenuVisible*/
-      ctx[18]);
+      /*_isMenuVisible*/
+      ctx[15]);
     },
 
     m(target, anchor) {
       if (if_block) if_block.m(target, anchor);
       insert(target, t0, anchor);
-      insert(target, goa_input, anchor);
+      insert(target, slot, anchor);
       insert(target, t1, anchor);
+      insert(target, goa_input, anchor);
+      insert(target, t2, anchor);
       insert(target, ul, anchor);
 
       for (let i = 0; i < each_blocks.length; i += 1) {
         each_blocks[i].m(ul, null);
       }
-
-      append(ul, t2);
-      append(ul, slot);
       /*ul_binding*/
 
-      ctx[30](ul);
+
+      ctx[33](ul);
 
       if (!mounted) {
         dispose = listen(goa_input, "click",
         /*showMenu*/
-        ctx[22]);
+        ctx[24]);
         mounted = true;
       }
     },
 
     p(ctx, dirty) {
       if (
-      /*isMenuVisible*/
-      ctx[18]) {
+      /*_isMenuVisible*/
+      ctx[15]) {
         if (if_block) {
           if_block.p(ctx, dirty);
         } else {
@@ -6250,42 +6147,42 @@ function create_else_block$1(ctx) {
 
       if (dirty[0] &
       /*error*/
-      256) {
+      128) {
         set_custom_element_data(goa_input, "error",
         /*error*/
-        ctx[8]);
+        ctx[7]);
       }
 
       if (dirty[0] &
       /*disabled*/
-      128) {
+      64) {
         set_custom_element_data(goa_input, "disabled",
         /*disabled*/
-        ctx[7]);
+        ctx[6]);
       }
 
       if (dirty[0] &
       /*leadingicon*/
-      8) {
+      4) {
         set_custom_element_data(goa_input, "leadingicon",
         /*leadingicon*/
-        ctx[3]);
+        ctx[2]);
       }
 
       if (dirty[0] &
       /*placeholder*/
-      32) {
+      16) {
         set_custom_element_data(goa_input, "placeholder",
         /*placeholder*/
-        ctx[5]);
+        ctx[4]);
       }
 
       if (dirty[0] &
-      /*isMenuVisible*/
-      262144) {
+      /*_isMenuVisible*/
+      32768) {
         set_custom_element_data(goa_input, "aria-expanded",
-        /*isMenuVisible*/
-        ctx[18]);
+        /*_isMenuVisible*/
+        ctx[15]);
       }
 
       if (dirty[0] &
@@ -6307,151 +6204,195 @@ function create_else_block$1(ctx) {
       }
 
       if (dirty[0] &
-      /*selectedLabel*/
-      131072) {
+      /*_selectedLabel*/
+      16384) {
         set_custom_element_data(goa_input, "value",
-        /*selectedLabel*/
-        ctx[17]);
+        /*_selectedLabel*/
+        ctx[14]);
       }
 
       if (dirty[0] &
-      /*options, _values, highlightedIndex, onSelect*/
-      17399808) {
+      /*_options, _values, _highlightedIndex, onSelect*/
+      67186688) {
         each_value_1 =
-        /*options*/
-        ctx[16];
-        let i;
-
-        for (i = 0; i < each_value_1.length; i += 1) {
-          const child_ctx = get_each_context_1(ctx, each_value_1, i);
-
-          if (each_blocks[i]) {
-            each_blocks[i].p(child_ctx, dirty);
-          } else {
-            each_blocks[i] = create_each_block_1(child_ctx);
-            each_blocks[i].c();
-            each_blocks[i].m(ul, t2);
-          }
-        }
-
-        for (; i < each_blocks.length; i += 1) {
-          each_blocks[i].d(1);
-        }
-
-        each_blocks.length = each_value_1.length;
+        /*_options*/
+        ctx[13];
+        each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value_1, each_1_lookup, ul, destroy_block, create_each_block_1, null, get_each_context_1);
       }
 
       if (dirty[0] &
-      /*selectedLabel*/
-      131072) {
+      /*_selectedLabel*/
+      16384) {
         attr(ul, "aria-activedescendant",
-        /*selectedLabel*/
-        ctx[17]);
+        /*_selectedLabel*/
+        ctx[14]);
       }
 
       if (dirty[0] &
       /*maxheight*/
-      16 && ul_style_value !== (ul_style_value = `overflow-y: auto; max-height: ${
+      8 && ul_style_value !== (ul_style_value = `overflow-y: auto; max-height: ${
       /*maxheight*/
-      ctx[4]}`)) {
+      ctx[3]}`)) {
         attr(ul, "style", ul_style_value);
       }
 
       if (dirty[0] &
-      /*isMenuVisible*/
-      262144) {
+      /*_isMenuVisible*/
+      32768) {
         toggle_class(ul, "dropdown-active",
-        /*isMenuVisible*/
-        ctx[18]);
+        /*_isMenuVisible*/
+        ctx[15]);
       }
     },
 
     d(detaching) {
       if (if_block) if_block.d(detaching);
       if (detaching) detach(t0);
-      if (detaching) detach(goa_input);
+      if (detaching) detach(slot);
       if (detaching) detach(t1);
+      if (detaching) detach(goa_input);
+      if (detaching) detach(t2);
       if (detaching) detach(ul);
-      destroy_each(each_blocks, detaching);
+
+      for (let i = 0; i < each_blocks.length; i += 1) {
+        each_blocks[i].d();
+      }
       /*ul_binding*/
 
-      ctx[30](null);
+
+      ctx[33](null);
       mounted = false;
       dispose();
     }
 
   };
-} // (212:2) {#if _native}
+} // (225:2) {#if _native}
 
 
 function create_if_block$a(ctx) {
   let select;
-  let each_blocks = [];
-  let each_1_lookup = new Map();
+  let slot;
+  let select_aria_label_value;
   let mounted;
   let dispose;
   let each_value =
-  /*options*/
-  ctx[16];
-
-  const get_key = ctx =>
-  /*option*/
-  ctx[47].value;
+  /*_options*/
+  ctx[13];
+  let each_blocks = [];
 
   for (let i = 0; i < each_value.length; i += 1) {
-    let child_ctx = get_each_context$4(ctx, each_value, i);
-    let key = get_key(child_ctx);
-    each_1_lookup.set(key, each_blocks[i] = create_each_block$4(key, child_ctx));
+    each_blocks[i] = create_each_block$4(get_each_context$4(ctx, each_value, i));
   }
 
   return {
     c() {
       select = element("select");
+      slot = element("slot");
 
       for (let i = 0; i < each_blocks.length; i += 1) {
         each_blocks[i].c();
       }
+
+      select.disabled =
+      /*_disabled*/
+      ctx[21];
+      attr(select, "aria-label", select_aria_label_value =
+      /*arialabel*/
+      ctx[1] ||
+      /*name*/
+      ctx[0]);
+      toggle_class(select, "error",
+      /*_error*/
+      ctx[23]);
     },
 
     m(target, anchor) {
       insert(target, select, anchor);
+      append(select, slot);
 
       for (let i = 0; i < each_blocks.length; i += 1) {
         each_blocks[i].m(select, null);
       }
+      /*select_binding*/
+
+
+      ctx[31](select);
 
       if (!mounted) {
         dispose = listen(select, "change",
         /*onNativeSelect*/
-        ctx[25]);
+        ctx[27]);
         mounted = true;
       }
     },
 
     p(ctx, dirty) {
       if (dirty[0] &
-      /*options, value*/
-      65540) {
+      /*_options*/
+      8192) {
         each_value =
-        /*options*/
-        ctx[16];
-        each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, select, destroy_block, create_each_block$4, null, get_each_context$4);
+        /*_options*/
+        ctx[13];
+        let i;
+
+        for (i = 0; i < each_value.length; i += 1) {
+          const child_ctx = get_each_context$4(ctx, each_value, i);
+
+          if (each_blocks[i]) {
+            each_blocks[i].p(child_ctx, dirty);
+          } else {
+            each_blocks[i] = create_each_block$4(child_ctx);
+            each_blocks[i].c();
+            each_blocks[i].m(select, null);
+          }
+        }
+
+        for (; i < each_blocks.length; i += 1) {
+          each_blocks[i].d(1);
+        }
+
+        each_blocks.length = each_value.length;
+      }
+
+      if (dirty[0] &
+      /*_disabled*/
+      2097152) {
+        select.disabled =
+        /*_disabled*/
+        ctx[21];
+      }
+
+      if (dirty[0] &
+      /*arialabel, name*/
+      3 && select_aria_label_value !== (select_aria_label_value =
+      /*arialabel*/
+      ctx[1] ||
+      /*name*/
+      ctx[0])) {
+        attr(select, "aria-label", select_aria_label_value);
+      }
+
+      if (dirty[0] &
+      /*_error*/
+      8388608) {
+        toggle_class(select, "error",
+        /*_error*/
+        ctx[23]);
       }
     },
 
     d(detaching) {
       if (detaching) detach(select);
+      destroy_each(each_blocks, detaching);
+      /*select_binding*/
 
-      for (let i = 0; i < each_blocks.length; i += 1) {
-        each_blocks[i].d();
-      }
-
+      ctx[31](null);
       mounted = false;
       dispose();
     }
 
   };
-} // (225:4) {#if isMenuVisible}
+} // (245:4) {#if _isMenuVisible}
 
 
 function create_if_block_1$5(ctx) {
@@ -6474,7 +6415,7 @@ function create_if_block_1$5(ctx) {
       if (!mounted) {
         dispose = listen(div, "click",
         /*closeMenu*/
-        ctx[23]);
+        ctx[25]);
         mounted = true;
       }
     },
@@ -6496,22 +6437,24 @@ function create_if_block_1$5(ctx) {
     }
 
   };
-} // (265:6) {#each options as option, index}
+} // (287:6) {#each _options as option, index (index)}
 
 
-function create_each_block_1(ctx) {
+function create_each_block_1(key_1, ctx) {
   let li;
-  let t_value = (
+  let t0_value = (
   /*option*/
-  ctx[47].label ||
+  ctx[48].label ||
   /*option*/
-  ctx[47].value) + "";
-  let t;
+  ctx[48].value) + "";
+  let t0;
+  let t1;
   let li_id_value;
   let li_aria_label_value;
   let li_aria_selected_value;
   let li_data_testid_value;
   let li_data_index_value;
+  let li_data_value_value;
   let li_style_value;
   let mounted;
   let dispose;
@@ -6519,54 +6462,63 @@ function create_each_block_1(ctx) {
   function click_handler() {
     return (
       /*click_handler*/
-      ctx[29](
+      ctx[32](
       /*option*/
-      ctx[47])
+      ctx[48])
     );
   }
 
   return {
+    key: key_1,
+    first: null,
+
     c() {
       li = element("li");
-      t = text(t_value);
+      t0 = text(t0_value);
+      t1 = space();
       attr(li, "id", li_id_value =
       /*option*/
-      ctx[47].label);
+      ctx[48].label);
       attr(li, "role", "option");
       attr(li, "aria-label", li_aria_label_value =
       /*option*/
-      ctx[47].label ||
+      ctx[48].label ||
       /*option*/
-      ctx[47].value);
+      ctx[48].value);
       attr(li, "aria-selected", li_aria_selected_value =
       /*_values*/
-      ctx[15].includes(
+      ctx[12].includes(
       /*option*/
-      ctx[47].value) ? "true" : "false");
-      attr(li, "class", "dropdown-option");
+      ctx[48].value) ? "true" : "false");
+      attr(li, "class", "dropdown-item");
       attr(li, "data-testid", li_data_testid_value = `dropdown-item-${
       /*option*/
-      ctx[47].value}`);
+      ctx[48].value}`);
       attr(li, "data-index", li_data_index_value =
       /*index*/
-      ctx[51]);
+      ctx[52]);
+      attr(li, "data-value", li_data_value_value =
+      /*option*/
+      ctx[48].value);
       attr(li, "style", li_style_value = `display: ${"block"}`);
-      toggle_class(li, "dropdown-option--disabled", false);
-      toggle_class(li, "dropdown-option--tabbed",
+      toggle_class(li, "dropdown-item--disabled", false);
+      toggle_class(li, "dropdown-item--tabbed",
       /*index*/
-      ctx[51] ===
-      /*highlightedIndex*/
-      ctx[19]);
-      toggle_class(li, "dropdown-option--selected",
+      ctx[52] ===
+      /*_highlightedIndex*/
+      ctx[16]);
+      toggle_class(li, "dropdown-item--selected",
       /*_values*/
-      ctx[15].includes(
+      ctx[12].includes(
       /*option*/
-      ctx[47].value));
+      ctx[48].value));
+      this.first = li;
     },
 
     m(target, anchor) {
       insert(target, li, anchor);
-      append(li, t);
+      append(li, t0);
+      append(li, t1);
 
       if (!mounted) {
         dispose = listen(li, "click", click_handler);
@@ -6577,67 +6529,83 @@ function create_each_block_1(ctx) {
     p(new_ctx, dirty) {
       ctx = new_ctx;
       if (dirty[0] &
-      /*options*/
-      65536 && t_value !== (t_value = (
+      /*_options*/
+      8192 && t0_value !== (t0_value = (
       /*option*/
-      ctx[47].label ||
+      ctx[48].label ||
       /*option*/
-      ctx[47].value) + "")) set_data(t, t_value);
+      ctx[48].value) + "")) set_data(t0, t0_value);
 
       if (dirty[0] &
-      /*options*/
-      65536 && li_id_value !== (li_id_value =
+      /*_options*/
+      8192 && li_id_value !== (li_id_value =
       /*option*/
-      ctx[47].label)) {
+      ctx[48].label)) {
         attr(li, "id", li_id_value);
       }
 
       if (dirty[0] &
-      /*options*/
-      65536 && li_aria_label_value !== (li_aria_label_value =
+      /*_options*/
+      8192 && li_aria_label_value !== (li_aria_label_value =
       /*option*/
-      ctx[47].label ||
+      ctx[48].label ||
       /*option*/
-      ctx[47].value)) {
+      ctx[48].value)) {
         attr(li, "aria-label", li_aria_label_value);
       }
 
       if (dirty[0] &
-      /*_values, options*/
-      98304 && li_aria_selected_value !== (li_aria_selected_value =
+      /*_values, _options*/
+      12288 && li_aria_selected_value !== (li_aria_selected_value =
       /*_values*/
-      ctx[15].includes(
+      ctx[12].includes(
       /*option*/
-      ctx[47].value) ? "true" : "false")) {
+      ctx[48].value) ? "true" : "false")) {
         attr(li, "aria-selected", li_aria_selected_value);
       }
 
       if (dirty[0] &
-      /*options*/
-      65536 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${
+      /*_options*/
+      8192 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${
       /*option*/
-      ctx[47].value}`)) {
+      ctx[48].value}`)) {
         attr(li, "data-testid", li_data_testid_value);
       }
 
       if (dirty[0] &
-      /*highlightedIndex*/
-      524288) {
-        toggle_class(li, "dropdown-option--tabbed",
+      /*_options*/
+      8192 && li_data_index_value !== (li_data_index_value =
+      /*index*/
+      ctx[52])) {
+        attr(li, "data-index", li_data_index_value);
+      }
+
+      if (dirty[0] &
+      /*_options*/
+      8192 && li_data_value_value !== (li_data_value_value =
+      /*option*/
+      ctx[48].value)) {
+        attr(li, "data-value", li_data_value_value);
+      }
+
+      if (dirty[0] &
+      /*_options, _highlightedIndex*/
+      73728) {
+        toggle_class(li, "dropdown-item--tabbed",
         /*index*/
-        ctx[51] ===
-        /*highlightedIndex*/
-        ctx[19]);
+        ctx[52] ===
+        /*_highlightedIndex*/
+        ctx[16]);
       }
 
       if (dirty[0] &
-      /*_values, options*/
-      98304) {
-        toggle_class(li, "dropdown-option--selected",
+      /*_values, _options*/
+      12288) {
+        toggle_class(li, "dropdown-item--selected",
         /*_values*/
-        ctx[15].includes(
+        ctx[12].includes(
         /*option*/
-        ctx[47].value));
+        ctx[48].value));
       }
     },
 
@@ -6648,44 +6616,34 @@ function create_each_block_1(ctx) {
     }
 
   };
-} // (214:6) {#each options as option (option.value)}
+} // (234:6) {#each _options as option}
 
 
-function create_each_block$4(key_1, ctx) {
+function create_each_block$4(ctx) {
   let option;
-  let t0_value = (
+  let t0_value =
   /*option*/
-  ctx[47].label ||
-  /*option*/
-  ctx[47].value) + "";
+  ctx[48].label + "";
   let t0;
   let t1;
   let option_selected_value;
   let option_value_value;
   let option_aria_label_value;
   return {
-    key: key_1,
-    first: null,
-
     c() {
       option = element("option");
       t0 = text(t0_value);
       t1 = space();
       option.selected = option_selected_value =
       /*option*/
-      ctx[47].value ===
-      /*value*/
-      ctx[2];
+      ctx[48].selected;
       option.__value = option_value_value =
       /*option*/
-      ctx[47].value;
+      ctx[48].value;
       option.value = option.__value;
       attr(option, "aria-label", option_aria_label_value =
       /*option*/
-      ctx[47].label ||
-      /*option*/
-      ctx[47].value);
-      this.first = option;
+      ctx[48].label);
     },
 
     m(target, anchor) {
@@ -6694,42 +6652,35 @@ function create_each_block$4(key_1, ctx) {
       append(option, t1);
     },
 
-    p(new_ctx, dirty) {
-      ctx = new_ctx;
+    p(ctx, dirty) {
       if (dirty[0] &
-      /*options*/
-      65536 && t0_value !== (t0_value = (
-      /*option*/
-      ctx[47].label ||
+      /*_options*/
+      8192 && t0_value !== (t0_value =
       /*option*/
-      ctx[47].value) + "")) set_data(t0, t0_value);
+      ctx[48].label + "")) set_data(t0, t0_value);
 
       if (dirty[0] &
-      /*options, value*/
-      65540 && option_selected_value !== (option_selected_value =
+      /*_options*/
+      8192 && option_selected_value !== (option_selected_value =
       /*option*/
-      ctx[47].value ===
-      /*value*/
-      ctx[2])) {
+      ctx[48].selected)) {
         option.selected = option_selected_value;
       }
 
       if (dirty[0] &
-      /*options*/
-      65536 && option_value_value !== (option_value_value =
+      /*_options*/
+      8192 && option_value_value !== (option_value_value =
       /*option*/
-      ctx[47].value)) {
+      ctx[48].value)) {
         option.__value = option_value_value;
         option.value = option.__value;
       }
 
       if (dirty[0] &
-      /*options*/
-      65536 && option_aria_label_value !== (option_aria_label_value =
-      /*option*/
-      ctx[47].label ||
+      /*_options*/
+      8192 && option_aria_label_value !== (option_aria_label_value =
       /*option*/
-      ctx[47].value)) {
+      ctx[48].label)) {
         attr(option, "aria-label", option_aria_label_value);
       }
     },
@@ -6749,7 +6700,7 @@ function create_fragment$p(ctx) {
   function select_block_type(ctx, dirty) {
     if (
     /*_native*/
-    ctx[14]) return create_if_block$a;
+    ctx[22]) return create_if_block$a;
     return create_else_block$1;
   }
 
@@ -6767,22 +6718,22 @@ function create_fragment$p(ctx) {
       attr(div, "style", div_style_value = `
     ${calculateMargin(
       /*mt*/
-      ctx[9],
+      ctx[8],
       /*mr*/
-      ctx[10],
+      ctx[9],
       /*mb*/
-      ctx[11],
+      ctx[10],
       /*ml*/
-      ctx[12])}
+      ctx[11])}
     --width: ${
       /*width*/
-      ctx[6] ||
-      /*computedWidth*/
-      ctx[20]}
+      ctx[5] ||
+      /*_computedWidth*/
+      ctx[17]}
   `);
       toggle_class(div, "dropdown-native",
       /*_native*/
-      ctx[14]);
+      ctx[22]);
     },
 
     m(target, anchor) {
@@ -6790,7 +6741,7 @@ function create_fragment$p(ctx) {
       if_block.m(div, null);
       /*div_binding*/
 
-      ctx[31](div);
+      ctx[34](div);
     },
 
     p(ctx, dirty) {
@@ -6815,32 +6766,32 @@ function create_fragment$p(ctx) {
       }
 
       if (dirty[0] &
-      /*mt, mr, mb, ml, width, computedWidth*/
-      1056320 && div_style_value !== (div_style_value = `
+      /*mt, mr, mb, ml, width, _computedWidth*/
+      134944 && div_style_value !== (div_style_value = `
     ${calculateMargin(
       /*mt*/
-      ctx[9],
+      ctx[8],
       /*mr*/
-      ctx[10],
+      ctx[9],
       /*mb*/
-      ctx[11],
+      ctx[10],
       /*ml*/
-      ctx[12])}
+      ctx[11])}
     --width: ${
       /*width*/
-      ctx[6] ||
-      /*computedWidth*/
-      ctx[20]}
+      ctx[5] ||
+      /*_computedWidth*/
+      ctx[17]}
   `)) {
         attr(div, "style", div_style_value);
       }
 
       if (dirty[0] &
       /*_native*/
-      16384) {
+      4194304) {
         toggle_class(div, "dropdown-native",
         /*_native*/
-        ctx[14]);
+        ctx[22]);
       }
     },
 
@@ -6852,17 +6803,31 @@ function create_fragment$p(ctx) {
       if_block.d();
       /*div_binding*/
 
-      ctx[31](null);
+      ctx[34](null);
     }
 
   };
 }
 
-const MAX_HEIGHT = "276px";
+function getCustomDropdownWidth(options) {
+  let width;
+  let maxCount = 0;
+  options.forEach(option => {
+    const label = option.label || option.value || "";
 
-function instance$n($$self, $$props, $$invalidate) {
+    if (!width && maxCount < label.length) {
+      maxCount = label.length;
+      width = `${Math.max(20, maxCount + 12)}ch`;
+    }
+  });
+  return width;
+}
+
+function instance$m($$self, $$props, $$invalidate) {
   let _disabled;
 
+  let _error;
+
   let _multiselect;
 
   let _native;
@@ -6880,7 +6845,7 @@ function instance$n($$self, $$props, $$invalidate) {
     leadingicon = null
   } = $$props;
   let {
-    maxheight = MAX_HEIGHT
+    maxheight = "276px"
   } = $$props;
   let {
     placeholder = ""
@@ -6914,38 +6879,86 @@ function instance$n($$self, $$props, $$invalidate) {
   } = $$props; // Private
 
   let _values = [];
-  let options = [];
-  let selectedLabel = "";
-  let isMenuVisible = false;
-  let highlightedIndex = 0;
-  let maxLetterCount = 0;
-  let computedWidth;
-  let el;
-  let menuEl;
-  let ctx;
-  let isBound = false;
-  onMount(() => {
-    validateRequired("GoADropdown", {
-      name
-    });
+  let _options = [];
+  let _selectedLabel = "";
+  let _isMenuVisible = false;
+  let _highlightedIndex = 0;
+
+  let _computedWidth;
+
+  let _el;
+
+  let _menuEl;
+
+  let _selectEl;
+
+  onMount(async () => {
+    await tick();
+    $$invalidate(12, _values = parseValues());
+    $$invalidate(13, _options = getOptions());
+
+    if (!_native) {
+      $$invalidate(17, _computedWidth = getCustomDropdownWidth(_options));
+      addKeyboardEventListeners();
+      setHighlightedIndexToSelected();
+    }
   });
   onDestroy(() => {
     removeKeyboardEventListeners();
-    deleteContext(name);
   }); // Functions
 
+  function getChildren() {
+    const slot = _el.querySelector("slot");
+
+    if (slot) {
+      // default
+      return slot.assignedElements();
+    } // unit tests
+
+
+    const el = _native ? _selectEl : _el;
+    return [...el.children];
+  } // Create a list of the options based on the children within the slot
+  // The children don't have to be goa-dropdown-item elements. Any child element
+  // work as long as it has a value and label content
+
+
+  function getOptions() {
+    const children = getChildren();
+    return children.map(el => {
+      const option = el;
+      const value = el.getAttribute("value") || option.value;
+      const label = el.getAttribute("label") || option.label || value;
+
+      const selected = _values.includes(value);
+
+      if (selected) {
+        $$invalidate(14, _selectedLabel = label);
+        $$invalidate(12, _values = [value]);
+      }
+
+      return {
+        selected,
+        value,
+        label
+      };
+    });
+  }
+
   function addKeyboardEventListeners() {
-    el.addEventListener("focus", onFocus, true);
-    el.addEventListener("blur", onBlur, true);
+    _el.addEventListener("focus", onFocus, true);
+
+    _el.addEventListener("blur", onBlur, true);
   }
 
   function removeKeyboardEventListeners() {
-    el.removeEventListener("focus", onFocus, true);
-    el.removeEventListener("blur", onBlur, true);
-  }
+    _el.removeEventListener("focus", onFocus, true);
+
+    _el.removeEventListener("blur", onBlur, true);
+  } // parse and convert values to strings to avoid later type comparison issues
+
 
   function parseValues() {
-    // parse and convert values to strings to avoid later type comparison issues
     let rawValue;
 
     try {
@@ -6956,84 +6969,66 @@ function instance$n($$self, $$props, $$invalidate) {
 
     const rawValues = typeof rawValue === "object" ? rawValue : [rawValue]; // convert all values to strings to avoid later type comparison issues
 
-    $$invalidate(15, _values = rawValues.map(val => `${val}`));
-  }
-
-  function bindContext() {
-    ctx = getContext(name);
-    ctx.subscribe(data => {
-      const _data = data;
-
-      const selected = _values.includes(_data.value);
-
-      const label = _data.label || _data.value;
-      $$invalidate(16, options = [...options, Object.assign(Object.assign({}, _data), {
-        selected
-      })]);
-
-      if (selected) {
-        $$invalidate(17, selectedLabel = label);
-      }
-
-      if (!width && maxLetterCount < label.length) {
-        maxLetterCount = label.length;
-        $$invalidate(20, computedWidth = `${Math.max(20, maxLetterCount + 12)}ch`);
-      }
-
-      setHighlightedIndexToSelected();
-    });
+    return rawValues.map(val => `${val}`);
   }
 
   async function showMenu() {
-    if (_disabled || isMenuVisible) {
+    if (_disabled || _isMenuVisible) {
       return;
     }
 
-    $$invalidate(18, isMenuVisible = true);
+    $$invalidate(15, _isMenuVisible = true);
     await tick(); // hide menu on blur
 
-    menuEl.addEventListener("blur", closeMenu); // bind up/down arrows to navigate options
+    _menuEl.addEventListener("blur", closeMenu); // bind up/down arrows to navigate options
 
-    menuEl.addEventListener("mouseover", onHighlight);
+
+    _menuEl.addEventListener("mouseover", onHighlight);
   }
 
   function closeMenu() {
-    menuEl.removeEventListener("blur", closeMenu);
-    menuEl.removeEventListener("mouseover", onHighlight);
+    _menuEl.removeEventListener("blur", closeMenu);
+
+    _menuEl.removeEventListener("mouseover", onHighlight);
+
     setHighlightedIndexToSelected();
-    $$invalidate(18, isMenuVisible = false);
+    $$invalidate(15, _isMenuVisible = false);
   }
 
   function setHighlightedIndexToSelected() {
-    $$invalidate(19, highlightedIndex = options.findIndex(option => _values.includes(option.value)));
+    $$invalidate(16, _highlightedIndex = _options.findIndex(option => _values.includes(option.value)));
   } // Event handlers
 
+  /**
+  * @property value the selected value
+  */
+
 
   function onSelect(value, label, close) {
     if (_disabled) return;
-    $$invalidate(17, selectedLabel = label);
+    $$invalidate(14, _selectedLabel = label);
+    let detail;
 
     if (_multiselect) {
       _values.push(value);
 
-      el.dispatchEvent(new CustomEvent("_change", {
-        composed: true,
-        detail: {
-          name,
-          values: _values
-        }
-      }));
+      detail = {
+        name,
+        values: _values
+      };
     } else {
-      $$invalidate(15, _values = [value]);
-      el.dispatchEvent(new CustomEvent("_change", {
-        composed: true,
-        detail: {
-          name,
-          value
-        }
-      }));
+      $$invalidate(12, _values = [value]);
+      detail = {
+        name,
+        value
+      };
     }
 
+    _el.dispatchEvent(new CustomEvent("_change", {
+      composed: true,
+      detail
+    }));
+
     if (close) {
       closeMenu();
     }
@@ -7043,18 +7038,18 @@ function instance$n($$self, $$props, $$invalidate) {
     switch (e.key) {
       case " ":
       case "Enter":
-        isMenuVisible ? closeMenu() : showMenu();
+        _isMenuVisible ? closeMenu() : showMenu();
         e.preventDefault();
         break;
 
       case "Escape":
-        isMenuVisible && closeMenu();
+        _isMenuVisible && closeMenu();
         e.preventDefault();
         break;
 
       case "ArrowDown":
         if (e.altKey) {
-          isMenuVisible ? closeMenu() : showMenu();
+          _isMenuVisible ? closeMenu() : showMenu();
           break;
         }
 
@@ -7065,7 +7060,7 @@ function instance$n($$self, $$props, $$invalidate) {
 
       case "ArrowUp":
         if (e.altKey) {
-          isMenuVisible ? closeMenu() : showMenu();
+          _isMenuVisible ? closeMenu() : showMenu();
           break;
         }
 
@@ -7077,141 +7072,134 @@ function instance$n($$self, $$props, $$invalidate) {
   };
 
   function _handleArrowDown() {
-    if (highlightedIndex < options.length - 1) {
-      $$invalidate(19, highlightedIndex++, highlightedIndex);
-      onSelect(options[highlightedIndex].value, options[highlightedIndex].label, false);
+    if (_highlightedIndex < _options.length - 1) {
+      $$invalidate(16, _highlightedIndex++, _highlightedIndex);
+      onSelect(_options[_highlightedIndex].value, _options[_highlightedIndex].label, false);
     }
   }
 
   function _handleArrowUp() {
-    if (highlightedIndex > 0) {
-      $$invalidate(19, highlightedIndex--, highlightedIndex);
-      onSelect(options[highlightedIndex].value, options[highlightedIndex].label, false);
+    if (_highlightedIndex > 0) {
+      $$invalidate(16, _highlightedIndex--, _highlightedIndex);
+      onSelect(_options[_highlightedIndex].value, _options[_highlightedIndex].label, false);
     }
   } // add required bindings to component
 
 
   function onFocus() {
-    el.addEventListener("keydown", onInputKeyDown);
+    _el.addEventListener("keydown", onInputKeyDown);
   } // remove all bindings from component
 
 
   function onBlur() {
-    el.removeEventListener("keydown", onInputKeyDown);
+    _el.removeEventListener("keydown", onInputKeyDown);
   }
 
   function onHighlight(e) {
-    $$invalidate(19, highlightedIndex = Number(e.target.dataset.index));
+    $$invalidate(16, _highlightedIndex = Number(e.target.dataset.index));
   }
 
   function onNativeSelect(e) {
     const target = e.currentTarget;
-    const option = options[target.selectedIndex];
-    onSelect(option.value, option.label, false);
+    const option = _options[target.selectedIndex];
+    onSelect(option.value, option.label);
+  }
+
+  function select_binding($$value) {
+    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+      _selectEl = $$value;
+      $$invalidate(20, _selectEl);
+      $$invalidate(13, _options);
+    });
   }
 
   const click_handler = option => onSelect(option.value, option.label, true);
 
   function ul_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
-      menuEl = $$value;
-      $$invalidate(21, menuEl);
+      _menuEl = $$value;
+      $$invalidate(19, _menuEl);
     });
   }
 
   function div_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
-      el = $$value;
-      $$invalidate(13, el);
+      _el = $$value;
+      $$invalidate(18, _el);
     });
   }
 
   $$self.$$set = $$props => {
     if ('name' in $$props) $$invalidate(0, name = $$props.name);
     if ('arialabel' in $$props) $$invalidate(1, arialabel = $$props.arialabel);
-    if ('value' in $$props) $$invalidate(2, value = $$props.value);
-    if ('leadingicon' in $$props) $$invalidate(3, leadingicon = $$props.leadingicon);
-    if ('maxheight' in $$props) $$invalidate(4, maxheight = $$props.maxheight);
-    if ('placeholder' in $$props) $$invalidate(5, placeholder = $$props.placeholder);
-    if ('width' in $$props) $$invalidate(6, width = $$props.width);
-    if ('disabled' in $$props) $$invalidate(7, disabled = $$props.disabled);
-    if ('error' in $$props) $$invalidate(8, error = $$props.error);
-    if ('multiselect' in $$props) $$invalidate(26, multiselect = $$props.multiselect);
-    if ('native' in $$props) $$invalidate(27, native = $$props.native);
-    if ('mt' in $$props) $$invalidate(9, mt = $$props.mt);
-    if ('mr' in $$props) $$invalidate(10, mr = $$props.mr);
-    if ('mb' in $$props) $$invalidate(11, mb = $$props.mb);
-    if ('ml' in $$props) $$invalidate(12, ml = $$props.ml);
+    if ('value' in $$props) $$invalidate(28, value = $$props.value);
+    if ('leadingicon' in $$props) $$invalidate(2, leadingicon = $$props.leadingicon);
+    if ('maxheight' in $$props) $$invalidate(3, maxheight = $$props.maxheight);
+    if ('placeholder' in $$props) $$invalidate(4, placeholder = $$props.placeholder);
+    if ('width' in $$props) $$invalidate(5, width = $$props.width);
+    if ('disabled' in $$props) $$invalidate(6, disabled = $$props.disabled);
+    if ('error' in $$props) $$invalidate(7, error = $$props.error);
+    if ('multiselect' in $$props) $$invalidate(29, multiselect = $$props.multiselect);
+    if ('native' in $$props) $$invalidate(30, native = $$props.native);
+    if ('mt' in $$props) $$invalidate(8, mt = $$props.mt);
+    if ('mr' in $$props) $$invalidate(9, mr = $$props.mr);
+    if ('mb' in $$props) $$invalidate(10, mb = $$props.mb);
+    if ('ml' in $$props) $$invalidate(11, ml = $$props.ml);
   };
 
   $$self.$$.update = () => {
     if ($$self.$$.dirty[0] &
     /*disabled*/
+    64) {
+      $$invalidate(21, _disabled = toBoolean(disabled));
+    }
+
+    if ($$self.$$.dirty[0] &
+    /*error*/
     128) {
-      _disabled = toBoolean(disabled);
+      $$invalidate(23, _error = toBoolean(error));
     }
 
     if ($$self.$$.dirty[0] &
     /*multiselect*/
-    67108864) {
+    536870912) {
       _multiselect = toBoolean(multiselect);
     }
 
     if ($$self.$$.dirty[0] &
     /*native*/
-    134217728) {
-      $$invalidate(14, _native = toBoolean(native));
-    }
-
-    if ($$self.$$.dirty[0] &
-    /*name, el, isBound, _native*/
-    268460033) {
-      {
-        (async () => {
-          await tick();
-
-          if (name && el && !isBound) {
-            $$invalidate(28, isBound = true);
-
-            if (!_native) {
-              addKeyboardEventListeners();
-            }
-
-            parseValues();
-            bindContext();
-          }
-        })();
-      }
+    1073741824) {
+      $$invalidate(22, _native = toBoolean(native));
     }
   };
 
-  return [name, arialabel, value, leadingicon, maxheight, placeholder, width, disabled, error, mt, mr, mb, ml, el, _native, _values, options, selectedLabel, isMenuVisible, highlightedIndex, computedWidth, menuEl, showMenu, closeMenu, onSelect, onNativeSelect, multiselect, native, isBound, click_handler, ul_binding, div_binding];
+  return [name, arialabel, leadingicon, maxheight, placeholder, width, disabled, error, mt, mr, mb, ml, _values, _options, _selectedLabel, _isMenuVisible, _highlightedIndex, _computedWidth, _el, _menuEl, _selectEl, _disabled, _native, _error, showMenu, closeMenu, onSelect, onNativeSelect, value, multiselect, native, select_binding, click_handler, ul_binding, div_binding];
 }
 
 class Dropdown extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.dropdown{position:relative;cursor:pointer;display:inline-block;width:100%}@media(min-width: 640px){.dropdown{width:var(--width)}}.dropdown-background{cursor:default;position:fixed;z-index:98;inset:0}.dropdown-list{position:absolute;left:0;right:0;padding:0;margin:0;margin-top:3px;list-style-type:none;background:var(--color-white);border-radius:var(--input-border-radius);outline:none;box-shadow:var(--shadow-1);z-index:99;scroll-behavior:smooth;scrollbar-width:thin;display:none}.dropdown-active{display:block}.dropdown-list::-webkit-scrollbar{width:6px}.dropdown-list::-webkit-scrollbar-track{background:#f1f1f1}.dropdown-list::-webkit-scrollbar-thumb{background:#888}.dropdown-list::-webkit-scrollbar-thumb:hover{background:#555}.dropdown-option{margin:0;padding:0.5rem;cursor:pointer;color:var(--color-black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-option--tabbed{background:var(--color-gray-100);color:var(--goa-color-interactive--hover)}.dropdown-option--disabled{opacity:0.5;cursor:default}.dropdown-option--disabled:hover{cursor:default;color:var(--color-gray-600)}.dropdown-option--selected{background:var(--goa-color-interactive);color:var(--color-white)}.dropdown-option--tabbed.dropdown-option--selected,.dropdown-option--selected:hover{background:var(--goa-color-interactive--hover);color:var(--color-white)}.dropdown-native{border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);background-color:var(--color-white)}select{border:none;background-color:transparent;color:var(--goa-color-text);font-size:var(--input-font-size);appearance:none;padding:calc(var(--input-padding) + 2px);padding-left:0.5rem;padding-right:2rem;outline:none;width:100%}.dropdown-native::after{content:"";position:absolute;right:0.6rem;top:0.6rem;pointer-events:none;width:1.5rem;height:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144' /%3E%3C/svg%3E");background-repeat:none}.dropdown-native:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.dropdown{position:relative;cursor:pointer;display:inline-block;width:100%}@media(min-width: 640px){.dropdown{width:var(--width)}}.dropdown-background{cursor:default;position:fixed;z-index:98;inset:0}.dropdown-list{position:absolute;left:0;right:0;padding:0;margin:0;margin-top:3px;list-style-type:none;background:var(--color-white);border-radius:var(--input-border-radius);outline:none;box-shadow:var(--shadow-1);z-index:99;scroll-behavior:smooth;scrollbar-width:thin;display:none}.dropdown-active{display:block}.dropdown-list::-webkit-scrollbar{width:6px}.dropdown-list::-webkit-scrollbar-track{background:#f1f1f1}.dropdown-list::-webkit-scrollbar-thumb{background:#888}.dropdown-list::-webkit-scrollbar-thumb:hover{background:#555}.dropdown-item{margin:0;padding:0.5rem;cursor:pointer;color:var(--color-black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-item--tabbed{background:var(--color-gray-100);color:var(--goa-color-interactive--hover)}.dropdown-item--disabled{opacity:0.5;cursor:default}.dropdown-item--disabled:hover{cursor:default;color:var(--color-gray-600)}.dropdown-item--selected{background:var(--goa-color-interactive);color:var(--color-white)}.dropdown-item--tabbed.dropdown-item--selected,.dropdown-item--selected:hover{background:var(--goa-color-interactive--hover);color:var(--color-white)}.dropdown-native{border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);background-color:var(--color-white)}.dropdown-native:has(select:disabled){background-color:var(--color-gray-100);border-color:var(--color-gray-200);box-shadow:none;color:var(--goa-color-text-secondary);cursor:default}.dropdown-native:has(select.error){border:2px solid var(--goa-color-interactive--error)}select{border:none;background-color:transparent;color:var(--goa-color-text);font-size:var(--input-font-size);appearance:none;padding:calc(var(--input-padding) + 2px);padding-left:0.5rem;padding-right:3rem;outline:none;width:100%}.dropdown-native::after{content:"";position:absolute;right:0.6rem;top:0.6rem;pointer-events:none;width:1.5rem;height:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144' /%3E%3C/svg%3E");background-repeat:none}.dropdown-native:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$n, create_fragment$p, safe_not_equal, {
+    }, instance$m, create_fragment$p, safe_not_equal, {
       name: 0,
       arialabel: 1,
-      value: 2,
-      leadingicon: 3,
-      maxheight: 4,
-      placeholder: 5,
-      width: 6,
-      disabled: 7,
-      error: 8,
-      multiselect: 26,
-      native: 27,
-      mt: 9,
-      mr: 10,
-      mb: 11,
-      ml: 12
+      value: 28,
+      leadingicon: 2,
+      maxheight: 3,
+      placeholder: 4,
+      width: 5,
+      disabled: 6,
+      error: 7,
+      multiselect: 29,
+      native: 30,
+      mt: 8,
+      mr: 9,
+      mb: 10,
+      ml: 11
     }, null, [-1, -1]);
 
     if (options) {
@@ -7253,7 +7241,7 @@ class Dropdown extends SvelteElement {
   }
 
   get value() {
-    return this.$$.ctx[2];
+    return this.$$.ctx[28];
   }
 
   set value(value) {
@@ -7264,7 +7252,7 @@ class Dropdown extends SvelteElement {
   }
 
   get leadingicon() {
-    return this.$$.ctx[3];
+    return this.$$.ctx[2];
   }
 
   set leadingicon(leadingicon) {
@@ -7275,7 +7263,7 @@ class Dropdown extends SvelteElement {
   }
 
   get maxheight() {
-    return this.$$.ctx[4];
+    return this.$$.ctx[3];
   }
 
   set maxheight(maxheight) {
@@ -7286,7 +7274,7 @@ class Dropdown extends SvelteElement {
   }
 
   get placeholder() {
-    return this.$$.ctx[5];
+    return this.$$.ctx[4];
   }
 
   set placeholder(placeholder) {
@@ -7297,7 +7285,7 @@ class Dropdown extends SvelteElement {
   }
 
   get width() {
-    return this.$$.ctx[6];
+    return this.$$.ctx[5];
   }
 
   set width(width) {
@@ -7308,7 +7296,7 @@ class Dropdown extends SvelteElement {
   }
 
   get disabled() {
-    return this.$$.ctx[7];
+    return this.$$.ctx[6];
   }
 
   set disabled(disabled) {
@@ -7319,7 +7307,7 @@ class Dropdown extends SvelteElement {
   }
 
   get error() {
-    return this.$$.ctx[8];
+    return this.$$.ctx[7];
   }
 
   set error(error) {
@@ -7330,7 +7318,7 @@ class Dropdown extends SvelteElement {
   }
 
   get multiselect() {
-    return this.$$.ctx[26];
+    return this.$$.ctx[29];
   }
 
   set multiselect(multiselect) {
@@ -7341,7 +7329,7 @@ class Dropdown extends SvelteElement {
   }
 
   get native() {
-    return this.$$.ctx[27];
+    return this.$$.ctx[30];
   }
 
   set native(native) {
@@ -7352,7 +7340,7 @@ class Dropdown extends SvelteElement {
   }
 
   get mt() {
-    return this.$$.ctx[9];
+    return this.$$.ctx[8];
   }
 
   set mt(mt) {
@@ -7363,7 +7351,7 @@ class Dropdown extends SvelteElement {
   }
 
   get mr() {
-    return this.$$.ctx[10];
+    return this.$$.ctx[9];
   }
 
   set mr(mr) {
@@ -7374,7 +7362,7 @@ class Dropdown extends SvelteElement {
   }
 
   get mb() {
-    return this.$$.ctx[11];
+    return this.$$.ctx[10];
   }
 
   set mb(mb) {
@@ -7385,7 +7373,7 @@ class Dropdown extends SvelteElement {
   }
 
   get ml() {
-    return this.$$.ctx[12];
+    return this.$$.ctx[11];
   }
 
   set ml(ml) {
@@ -7414,52 +7402,6 @@ function create_fragment$o(ctx) {
   };
 }
 
-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();
-
-          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();
@@ -7467,61 +7409,15 @@ class DropdownItem extends SvelteElement {
       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);
+    }, null, create_fragment$o, 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 ["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);
@@ -7791,133 +7687,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));
-  }
+  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]) {
+      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$9();
+          if_block.c();
+          if_block.m(div4, t1);
+        }
+      } else if (if_block) {
+        if_block.d(1);
+        if_block = null;
+      }
+
       if (dirty &
-      /*children*/
-      2) {
-        each_value =
-        /*children*/
-        ctx[1];
-        let i;
+      /*metaLinks*/
+      8) {
+        var _ctx$5;
 
-        for (i = 0; i < each_value.length; i += 1) {
-          const child_ctx = get_each_context$3(ctx, each_value, i);
+        toggle_class(div2, "with-meta-links",
+        /*metaLinks*/
+        (_ctx$5 = ctx[3]) === null || _ctx$5 === void 0 ? void 0 : _ctx$5.length);
+      }
 
-          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 (dirty &
+      /*metaLinks*/
+      8) {
+        var _ctx$6;
 
-        for (; i < each_blocks.length; i += 1) {
-          each_blocks[i].d(1);
-        }
+        toggle_class(div3, "with-meta-links",
+        /*metaLinks*/
+        (_ctx$6 = ctx[3]) === null || _ctx$6 === void 0 ? void 0 : _ctx$6.length);
+      }
 
-        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);
       }
     },
 
@@ -7925,84 +7839,300 @@ 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) {
+  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$k, create_fragment$m, safe_not_equal, {
+      maxcontentwidth: 0
+    }, null);
 
     if (options) {
       if (options.target) {
         insert(options.target, this, options.anchor);
       }
+
+      if (options.props) {
+        this.$set(options.props);
+        flush();
+      }
     }
   }
 
+  static get observedAttributes() {
+    return ["maxcontentwidth"];
+  }
+
+  get maxcontentwidth() {
+    return this.$$.ctx[0];
+  }
+
+  set maxcontentwidth(maxcontentwidth) {
+    this.$$set({
+      maxcontentwidth
+    });
+    flush();
+  }
+
 }
 
-customElements.define("goa-app-footer-meta-section", FooterMetaSection);
-/* libs/web-components/src/components/footer-nav-section/FooterNavSection.svelte generated by Svelte v3.51.0 */
+customElements.define("goa-app-footer", Footer);
+/* libs/web-components/src/components/footer-meta-section/FooterMetaSection.svelte generated by Svelte v3.51.0 */
 
-function get_each_context$2(ctx, list, i) {
+function get_each_context$3(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[5] = list[i];
+  child_ctx[3] = list[i];
   return child_ctx;
-} // (31:2) {#if heading}
+} // (52:4) {#each children as child}
 
 
-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();
+function create_each_block$3(ctx) {
+  let li;
+  let a;
+  let t_value =
+  /*child*/
+  ctx[3].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[3].href);
+    },
+
+    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);
+      }
+    },
+
+    d(detaching) {
+      if (detaching) detach(li);
+    }
+
+  };
+}
+
+function create_fragment$l(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));
+  }
+
+  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();
+      }
+
+      this.c = noop;
+      attr(div, "class", "hidden");
+    },
+
+    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*/
+
+
+      ctx[2](section);
+    },
+
+    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);
+
+          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);
+          }
+        }
+
+        for (; i < each_blocks.length; i += 1) {
+          each_blocks[i].d(1);
+        }
+
+        each_blocks.length = each_value.length;
+      }
+    },
+
+    i: noop,
+    o: noop,
+
+    d(detaching) {
+      if (detaching) detach(section);
+      destroy_each(each_blocks, detaching);
+      /*section_binding*/
+
+      ctx[2](null);
+    }
+
+  };
+}
+
+function instance$j($$self, $$props, $$invalidate) {
+  let rootEl;
+  let children = [];
+  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;
+    }
+  });
+
+  function section_binding($$value) {
+    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+      rootEl = $$value;
+      $$invalidate(0, rootEl);
+    });
+  }
+
+  return [rootEl, children, section_binding];
+}
+
+class FooterMetaSection 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>`;
+    init(this, {
+      target: this.shadowRoot,
+      props: attribute_to_object(this.attributes),
+      customElement: true
+    }, instance$j, create_fragment$l, safe_not_equal, {}, null);
+
+    if (options) {
+      if (options.target) {
+        insert(options.target, this, options.anchor);
+      }
+    }
+  }
+
+}
+
+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}
+
+
+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");
@@ -8080,7 +8210,7 @@ function create_each_block$2(ctx) {
   };
 }
 
-function create_fragment$l(ctx) {
+function create_fragment$k(ctx) {
   let section;
   let t0;
   let div;
@@ -8089,7 +8219,7 @@ function create_fragment$l(ctx) {
   let ul_style_value;
   let if_block =
   /*heading*/
-  ctx[0] && create_if_block$9(ctx);
+  ctx[0] && create_if_block$8(ctx);
   let each_value =
   /*children*/
   ctx[3];
@@ -8156,7 +8286,7 @@ function create_fragment$l(ctx) {
         if (if_block) {
           if_block.p(ctx, dirty);
         } else {
-          if_block = create_if_block$9(ctx);
+          if_block = create_if_block$8(ctx);
           if_block.c();
           if_block.m(section, t0);
         }
@@ -8227,7 +8357,7 @@ function create_fragment$l(ctx) {
   };
 }
 
-function instance$j($$self, $$props, $$invalidate) {
+function instance$i($$self, $$props, $$invalidate) {
   let {
     heading = ""
   } = $$props;
@@ -8240,292 +8370,47 @@ function instance$j($$self, $$props, $$invalidate) {
     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 section_binding($$value) {
-    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
-      rootEl = $$value;
-      $$invalidate(2, 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];
-}
-
-class FooterNavSection 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>`;
-    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);
-
-    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-nav-section", FooterNavSection);
-/* libs/web-components/src/components/footer/Footer.svelte generated by Svelte v3.51.0 */
-
-function create_if_block$8(ctx) {
-  let goa_divider;
-  return {
-    c() {
-      goa_divider = element("goa-divider");
-      set_custom_element_data(goa_divider, "spacing", "small");
-    },
-
-    m(target, anchor) {
-      insert(target, goa_divider, anchor);
-    },
-
-    d(detaching) {
-      if (detaching) detach(goa_divider);
-    }
-
-  };
-}
-
-function create_fragment$k(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$8();
-  return {
-    c() {
-      var _ctx$2, _ctx$3;
-
-      div5 = element("div");
-      div4 = element("div");
-      div0 = element("div");
-      div0.innerHTML = `<slot name="nav"></slot>`;
-      t0 = space();
-      if (if_block) if_block.c();
-      t1 = space();
-      div3 = element("div");
-      div1 = element("div");
-      div1.innerHTML = `<slot name="meta"></slot>`;
-      t2 = space();
-      div2 = element("div");
-      a0 = element("a");
-      a0.innerHTML = `<img alt="GoA Logo" class="logo" src="data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; xmlns:xlink=&#39;http://www.w3.org/1999/xlink&#39; width=&#39;149.351&#39; height=&#39;42&#39; viewBox=&#39;0 0 149.351 42&#39;%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bclip-path:url(%23a);%7D.c%7Bfill:%2300aad2;%7D.d%7Bfill:%235f6a72;%7D%3C/style%3E%3CclipPath id=&#39;a&#39;%3E%3Crect class=&#39;a&#39; width=&#39;149.351&#39; height=&#39;42&#39;/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class=&#39;b&#39;%3E%3Crect class=&#39;c&#39; width=&#39;13.555&#39; height=&#39;13.555&#39; transform=&#39;translate(135.796 21.524)&#39;/%3E%3Cpath class=&#39;d&#39; d=&#39;M63.082,33.088c-1.383.138-2.835.277-4.357.346.553-4.357,2.835-10.373,5.671-9.405,1.66.553.761,5.671-1.314,9.059m-3.527,2.974a3.761,3.761,0,0,1-1.245,0,.851.851,0,0,0,.346-.692v-.553c.761,0,1.936-.138,3.389-.277a4.327,4.327,0,0,1-2.49,1.521M76.844,25.688c1.8-1.66,2.7-1.521,2.9-1.106.484.968-1.591,4.357-5.671,6.224a10.328,10.328,0,0,1,2.766-5.118m66.736,1.66c-.207-3.389-3.181-3.942-3.6-2.974-.138.346,1.106.207,1.106,2.628,0,3.942-4.011,9.129-9.129,9.129-5.532,0-6.985-4.357-7.261-6.432-.207-1.452.138-3.458-2.351-3.181-1.729.207-3.25,3.527-5.463,6.362-1.867,2.42-2.7,2.213-2.282.138.553-2.628,2.7-8.714,5.187-9.129,1.176-.207,1.591,1.8,2.075.553s.069-4.011-2.559-4.011c-1.8,0-3.942,1.936-5.74,4.08-1.521,1.936-9.336,13.416-12.656,10.927-1.521-1.176-1.383-5.878-.415-11.411,3.873-1.521,7.123-1.037,8.921-.138.9.415,1.037.346.622-.622-.553-1.452-3.665-3.734-8.575-2.7-.138,0-.207.069-.346.069.415-1.8.83-3.665,1.383-5.463.484-1.66,1.8-4.5-1.729-4.979-1.106-.207-.622.346-1.037,1.867-.692,2.766-1.521,6.362-2.144,10.028a19.745,19.745,0,0,0-7.538,8.091,38.59,38.59,0,0,0,.9-4.772,1.589,1.589,0,0,0-1.245-1.729c-.761-.207-1.729.138-2.628,1.452-2.144,3.043-4.841,7.815-8.99,9.82-2.974,1.452-4.288,0-4.357-2.282a9.869,9.869,0,0,0,1.521-.553c5.394-2.351,7.192-5.947,5.878-8.16-1.314-2.075-4.979-1.452-7.953,1.66a11.175,11.175,0,0,0-2.7,6.5c-1.245.277-2.628.484-4.219.692,2.49-4.08,2.282-9.613-1.383-10.581-4.288-1.106-6.432,3.043-7.331,6.5.346-3.873.9-7.745,1.591-11.549.346-1.66,1.452-4.5-2.075-4.979-1.106-.207-.968.346-.9,1.867.138,2.075-2.144,14.454-.968,19.848-1.521.484-2.144,1.66-.207,2.835,1.383.83,4.357,1.106,7.331-.346a9.3,9.3,0,0,0,2.766-2.144c1.8-.207,3.665-.553,5.394-.83.277,2.42,1.867,4.219,5.463,3.873,5.118-.484,9.682-6.777,11.411-9.82-.346,3.25-2.42,10.373,1.176,10.028,1.383-.138.83-.346.9-1.591.346-4.288,3.873-7.953,7.4-10.166-.622,5.256-.415,9.958,2.006,11.411,4.426,2.766,10.581-4.5,14.039-8.921-1.729,3.942-2.7,8.921-.138,9.682,3.043.9,5.463-4.219,8.3-8.091.346,2.766,2.213,7.607,9.682,7.607,8.022-.069,13.071-4.91,12.863-10.1m-108.3,8.645A66.439,66.439,0,0,1,27.4,32.534a59.168,59.168,0,0,0,6.777-2.974,54.453,54.453,0,0,0,1.106,6.432m20.4,3.873c-.069-.207-.622.069-1.106,0-1.452-.207-3.389-2.213-3.942-5.463-1.037-5.878-.415-11.687,1.314-20.332.346-1.66,1.452-4.5-2.075-5.048-1.106-.138-.553.415-.83,1.867C47.66,17.32,42.4,21.954,37.149,25.066,36.6,17.735,36.8,9.505,38.186,4.526c1.176-4.219,2.559-3.458.83-4.357s-3.734.277-5.325,3.458S24.839,23.89,13.221,35.439C7.273,41.317,1.879,38.274.842,37.375c-.9-.761-1.176.415-.138,1.591,4.772,5.256,11.826,2.282,14.384-.277,7.054-7.054,15.283-22.268,18.6-28.7a98.251,98.251,0,0,0,.277,16.874,50.129,50.129,0,0,1-8.3,3.181c-1.66.415-2.7,1.106-2.7,1.867s1.106,1.521,2.7,2.282c2.835,1.383,11.2,5.256,13.209,6.5,1.729,1.037,2.628.207,3.112-.9.692-1.452-1.176-2.282-2.974-2.766a60.545,60.545,0,0,1-1.66-9.267c4.219-2.628,8.437-6.086,10.788-10.443C47.522,20.916,46,33.3,49.873,38.482a5.451,5.451,0,0,0,4.564,2.213c.968-.069,1.383-.692,1.245-.83&#39; transform=&#39;translate(-0.038 0.124)&#39;/%3E%3C/g%3E%3C/svg%3E"/>`;
-      t3 = space();
-      a1 = element("a");
-      a1.textContent = `© ${
-      /*year*/
-      ctx[4]} Government of Alberta`;
-      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%"}`);
-    },
-
-    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*/
-
-      ctx[5](div5);
-    },
-
-    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();
-          if_block.c();
-          if_block.m(div4, t1);
-        }
-      } else if (if_block) {
-        if_block.d(1);
-        if_block = null;
-      }
-
-      if (dirty &
-      /*metaLinks*/
-      8) {
-        var _ctx$5;
-
-        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);
-      }
-    },
-
-    i: noop,
-    o: noop,
-
-    d(detaching) {
-      if (detaching) detach(div5);
-      if (if_block) if_block.d();
-      /*div5_binding*/
-
-      ctx[5](null);
-    }
-
-  };
-}
-
-function instance$i($$self, $$props, $$invalidate) {
-  let {
-    maxcontentwidth = ""
-  } = $$props;
-  let rootEl;
-  let navLinks;
-  let metaLinks;
-  const year = new Date().getFullYear();
-  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());
+    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
+      heading: 0,
+      maxcolumncount: 1
     }, null);
 
     if (options) {
@@ -8541,23 +8426,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) {
@@ -12956,7 +12852,7 @@ function get_each_context$1(ctx, list, i) {
   const child_ctx = ctx.slice();
   child_ctx[22] = list[i];
   return child_ctx;
-} // (66:2) {#each options as option (option.value)}
+} // (80:2) {#each options as option (option.value)}
 
 
 function create_each_block$1(key_1, ctx) {
@@ -12983,7 +12879,7 @@ function create_each_block$1(key_1, ctx) {
   function change_handler() {
     return (
       /*change_handler*/
-      ctx[18](
+      ctx[16](
       /*option*/
       ctx[22])
     );
@@ -13033,7 +12929,7 @@ function create_each_block$1(key_1, ctx) {
       ctx[12]);
       toggle_class(label, "goa-radio--error",
       /*isError*/
-      ctx[10]);
+      ctx[11]);
       this.first = label;
     },
 
@@ -13126,10 +13022,10 @@ function create_each_block$1(key_1, ctx) {
 
       if (dirty &
       /*isError*/
-      1024) {
+      2048) {
         toggle_class(label, "goa-radio--error",
         /*isError*/
-        ctx[10]);
+        ctx[11]);
       }
     },
 
@@ -13203,13 +13099,13 @@ function create_fragment$9(ctx) {
       /*div_binding*/
 
 
-      ctx[19](div);
+      ctx[17](div);
     },
 
     p(ctx, [dirty]) {
       if (dirty &
       /*options, isDisabled, isError, name, value, arialabel, onChange*/
-      13843) {
+      14867) {
         each_value =
         /*options*/
         ctx[9];
@@ -13259,7 +13155,7 @@ function create_fragment$9(ctx) {
       /*div_binding*/
 
 
-      ctx[19](null);
+      ctx[17](null);
     }
 
   };
@@ -13267,6 +13163,7 @@ function create_fragment$9(ctx) {
 
 function instance$7($$self, $$props, $$invalidate) {
   let isDisabled;
+  let isError;
   const [Orientations, validateOrientation] = typeValidator("Radio group orientation", ["vertical", "horizontal"]);
   let {
     name
@@ -13301,12 +13198,45 @@ function instance$7($$self, $$props, $$invalidate) {
   let {
     ml = null
   } = $$props;
-  let options = []; // private
-
-  let isError;
-  let ctx;
-  let isBound = false;
+  let options = [];
   let el;
+  onMount(async () => {
+    await tick();
+    $$invalidate(9, options = getOptions());
+  });
+  /**
+  * Allows the child elements to be obtainable within unit tests
+  * @returns List of child elements
+  */
+
+  function getChildren() {
+    const slot = el.querySelector("slot");
+    if (slot) // default
+      return [...slot.assignedElements()];else // unit tests
+      return [...el.children];
+  }
+  /**
+  * Maps the child elements to a list of RadioOptions
+  */
+
+
+  function getOptions() {
+    const children = getChildren();
+    return children.map(el => {
+      const option = el;
+      const value = el.getAttribute("value") || option.value;
+      const label = el.getAttribute("label") || el.innerText || option.label || option.innerText;
+      return {
+        value,
+        label
+      };
+    });
+  }
+  /**
+  * Handles changing of the radio items
+  * @param newValue Selected value
+  */
+
 
   function onChange(newValue) {
     if (newValue === value) return;
@@ -13320,9 +13250,6 @@ function instance$7($$self, $$props, $$invalidate) {
     }));
   }
 
-  onDestroy(() => {
-    deleteContext(name);
-  });
   onMount(() => {
     validateOrientation(orientation);
   });
@@ -13332,7 +13259,7 @@ function instance$7($$self, $$props, $$invalidate) {
   function div_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       el = $$value;
-      $$invalidate(11, el);
+      $$invalidate(10, el);
     });
   }
 
@@ -13354,32 +13281,18 @@ function instance$7($$self, $$props, $$invalidate) {
     if ($$self.$$.dirty &
     /*disabled*/
     16384) {
+      // private
       $$invalidate(12, isDisabled = toBoolean(disabled));
     }
 
     if ($$self.$$.dirty &
     /*error*/
     32768) {
-      $$invalidate(10, isError = toBoolean(error));
-    }
-
-    if ($$self.$$.dirty &
-    /*name, isBound, ctx, options*/
-    197122) {
-      {
-        if (name && !isBound) {
-          $$invalidate(17, isBound = true);
-          $$invalidate(16, ctx = getContext(name));
-          ctx.subscribe(msg => {
-            if (!msg) return;
-            $$invalidate(9, options = [...options, msg]);
-          });
-        }
-      }
+      $$invalidate(11, isError = toBoolean(error));
     }
   };
 
-  return [value, name, orientation, testid, arialabel, mt, mr, mb, ml, options, isError, el, isDisabled, onChange, disabled, error, ctx, isBound, change_handler, div_binding];
+  return [value, name, orientation, testid, arialabel, mt, mr, mb, ml, options, el, isError, isDisabled, onChange, disabled, error, change_handler, div_binding];
 }
 
 class RadioGroup extends SvelteElement {
@@ -13546,134 +13459,9 @@ 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) {
-  return {
-    c() {
-      this.c = noop;
-    },
-
-    m: noop,
-    p: noop,
-    i: noop,
-    o: noop,
-    d: noop
-  };
-}
-
-function instance$6($$self, $$props, $$invalidate) {
-  let {
-    value
-  } = $$props;
-  let {
-    label
-  } = $$props;
-  let {
-    name
-  } = $$props;
-  let ctx;
-  let isBound = false;
-
-  $$self.$$set = $$props => {
-    if ('value' in $$props) $$invalidate(0, value = $$props.value);
-    if ('label' in $$props) $$invalidate(1, label = $$props.label);
-    if ('name' in $$props) $$invalidate(2, name = $$props.name);
-  };
-
-  $$self.$$.update = () => {
-    if ($$self.$$.dirty &
-    /*isBound, name, ctx, value, label*/
-    31) {
-      {
-        (async () => {
-          await tick();
-
-          if (!isBound) {
-            $$invalidate(4, isBound = true);
-            $$invalidate(3, ctx = getContext(name));
-            ctx.notify({
-              type: "bind",
-              value,
-              label
-            });
-          }
-        })();
-      }
-    }
-  };
-
-  return [value, label, name, ctx, isBound];
-}
-
-class RadioItem extends SvelteElement {
-  constructor(options) {
-    super();
-    init(this, {
-      target: this.shadowRoot,
-      props: attribute_to_object(this.attributes),
-      customElement: true
-    }, instance$6, create_fragment$8, safe_not_equal, {
-      value: 0,
-      label: 1,
-      name: 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 ["value", "label", "name"];
-  }
-
-  get value() {
-    return this.$$.ctx[0];
-  }
-
-  set value(value) {
-    this.$$set({
-      value
-    });
-    flush();
-  }
-
-  get label() {
-    return this.$$.ctx[1];
-  }
-
-  set label(label) {
-    this.$$set({
-      label
-    });
-    flush();
-  }
-
-  get name() {
-    return this.$$.ctx[2];
-  }
-
-  set name(name) {
-    this.$$set({
-      name
-    });
-    flush();
-  }
-
-}
-
-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 +13529,7 @@ function create_fragment$7(ctx) {
   };
 }
 
-function instance$5($$self, $$props, $$invalidate) {
+function instance$6($$self, $$props, $$invalidate) {
   let {
     direction = "vertical"
   } = $$props;
@@ -13773,7 +13561,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 +14089,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 +14205,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 +14263,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 +14395,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 +14424,7 @@ function create_fragment$5(ctx) {
   };
 }
 
-function instance$3($$self, $$props, $$invalidate) {
+function instance$4($$self, $$props, $$invalidate) {
   let {
     hspacing = "none"
   } = $$props;
@@ -14673,7 +14461,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);
@@ -14705,21 +14493,85 @@ class Spacer extends SvelteElement {
     flush();
   }
 
-  get vspacing() {
-    return this.$$.ctx[2];
-  }
+  get vspacing() {
+    return this.$$.ctx[2];
+  }
+
+  set vspacing(vspacing) {
+    this.$$set({
+      vspacing
+    });
+    flush();
+  }
+
+}
+
+customElements.define("goa-spacer", Spacer);
+const subscriber_queue = [];
+/**
+ * Create a `Writable` store that allows both updating and reading by subscription.
+ * @param {*=}value initial value
+ * @param {StartStopNotifier=}start start and stop notifications for subscriptions
+ */
+
+function writable(value, start = noop) {
+  let stop;
+  const subscribers = new Set();
+
+  function set(new_value) {
+    if (safe_not_equal(value, new_value)) {
+      value = new_value;
+
+      if (stop) {
+        // store is ready
+        const run_queue = !subscriber_queue.length;
+
+        for (const subscriber of subscribers) {
+          subscriber[1]();
+          subscriber_queue.push(subscriber, value);
+        }
+
+        if (run_queue) {
+          for (let i = 0; i < subscriber_queue.length; i += 2) {
+            subscriber_queue[i][0](subscriber_queue[i + 1]);
+          }
+
+          subscriber_queue.length = 0;
+        }
+      }
+    }
+  }
+
+  function update(fn) {
+    set(fn(value));
+  }
+
+  function subscribe(run, invalidate = noop) {
+    const subscriber = [run, invalidate];
+    subscribers.add(subscriber);
+
+    if (subscribers.size === 1) {
+      stop = start(set) || noop;
+    }
+
+    run(value);
+    return () => {
+      subscribers.delete(subscriber);
 
-  set vspacing(vspacing) {
-    this.$$set({
-      vspacing
-    });
-    flush();
+      if (subscribers.size === 0) {
+        stop();
+        stop = null;
+      }
+    };
   }
 
+  return {
+    set,
+    update,
+    subscribe
+  };
 }
 
-customElements.define("goa-spacer", Spacer);
-
 function is_date(obj) {
   return Object.prototype.toString.call(obj) === '[object Date]';
 }
@@ -15031,7 +14883,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 +14928,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 +15059,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 +15129,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) {
@@ -16426,16 +16533,17 @@ function GoADivider(props) {
   }, void 0);
 }
 
-const GoADropdownOption = props => {
-  return jsx("goa-dropdown-item", Object.assign({
-    "data-testid": props.testId,
-    name: props.name,
-    value: props.value,
-    label: props.label
-  }, {
-    children: props.children
-  }), void 0);
-};
+function stringify(value) {
+  if (typeof value === "undefined") {
+    return "";
+  }
+
+  if (typeof value === "string") {
+    return value;
+  }
+
+  return JSON.stringify(value);
+}
 
 const GoADropdown = props => {
   const el = useRef(null);
@@ -16463,7 +16571,7 @@ const GoADropdown = props => {
   return jsx("goa-dropdown", Object.assign({
     ref: el,
     name: props.name,
-    value: JSON.stringify(props.value),
+    value: stringify(props.value),
     arialabel: props.ariaLabel,
     disabled: props.disabled,
     error: props.error,
@@ -16484,6 +16592,26 @@ const GoADropdown = props => {
   }), void 0);
 };
 
+function GoADropdownOption(props) {
+  useEffect(() => {
+    console.warn("GoADropdownOption is deprecated. Please use GoADropdownItem");
+  }, []);
+  return jsx(GoADropdownItem, Object.assign({}, props), void 0);
+}
+function GoADropdownItem({
+  value,
+  label,
+  name,
+  testId
+}) {
+  return jsx("goa-dropdown-item", {
+    "data-testid": testId,
+    value: value,
+    label: label,
+    name: name
+  }, void 0);
+}
+
 function GoAAppFooterMetaSection({
   children
 }) {
@@ -17151,6 +17279,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 +17372,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, GoADropdownItem, 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 };