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

package/react-components.umd.js

@@ -1276,7 +1276,7 @@
 	  };
 	}
 
-	function instance$A($$self, $$props, $$invalidate) {
+	function instance$z($$self, $$props, $$invalidate) {
 	  let {
 	    heading = ""
 	  } = $$props;
@@ -1308,7 +1308,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$A, create_fragment$F, safe_not_equal, {
+	    }, instance$z, create_fragment$F, safe_not_equal, {
 	      heading: 0,
 	      url: 1,
 	      testid: 2,
@@ -1661,7 +1661,7 @@
 	  };
 	}
 
-	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);
@@ -1743,7 +1743,7 @@
 	      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,
@@ -1937,7 +1937,7 @@
 	  };
 	}
 
-	function instance$y($$self, $$props, $$invalidate) {
+	function instance$x($$self, $$props, $$invalidate) {
 	  let {
 	    gap = "m"
 	  } = $$props;
@@ -1981,7 +1981,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$y, create_fragment$D, safe_not_equal, {
+	    }, instance$x, create_fragment$D, safe_not_equal, {
 	      gap: 0,
 	      direction: 1,
 	      alignment: 2,
@@ -2087,248 +2087,6 @@
 	}
 
 	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) {
@@ -2527,7 +2285,7 @@
 	  };
 	}
 
-	function create_fragment$B(ctx) {
+	function create_fragment$C(ctx) {
 	  let button;
 	  let button_class_value;
 	  let button_style_value;
@@ -2772,7 +2530,7 @@
 	      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,
@@ -2926,14 +2684,256 @@
 	}
 
 	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]);
@@ -3094,7 +3094,7 @@
 	  };
 	}
 
-	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 {
@@ -3151,7 +3151,7 @@
 	      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,
@@ -3302,230 +3302,16 @@
 	}
 
 	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*/
@@ -3645,7 +3431,7 @@
 	      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,
@@ -3763,40 +3549,254 @@
 	}
 
 	customElements.define("goa-card", Card);
-	/* libs/web-components/src/components/checkbox/Checkbox.svelte generated by Svelte v3.51.0 */
+	/* libs/web-components/src/components/card-content/CardContent.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block_1$8(ctx) {
-	  let svg;
-	  let path;
+	function create_fragment$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");
@@ -4068,7 +4068,7 @@
 	  };
 	}
 
-	function instance$s($$self, $$props, $$invalidate) {
+	function instance$r($$self, $$props, $$invalidate) {
 	  let isDisabled;
 	  let isError;
 	  let isChecked;
@@ -4183,7 +4183,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$s, create_fragment$u, safe_not_equal, {
+	    }, instance$r, create_fragment$u, safe_not_equal, {
 	      name: 0,
 	      checked: 14,
 	      text: 1,
@@ -4623,7 +4623,7 @@
 	  };
 	}
 
-	function instance$r($$self, $$props, $$invalidate) {
+	function instance$q($$self, $$props, $$invalidate) {
 	  let {
 	    mt = null
 	  } = $$props;
@@ -4724,7 +4724,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$r, create_fragment$t, safe_not_equal, {
+	    }, instance$q, create_fragment$t, safe_not_equal, {
 	      mt: 0,
 	      mr: 1,
 	      mb: 2,
@@ -5417,7 +5417,7 @@
 	  };
 	}
 
-	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"]);
@@ -5475,7 +5475,7 @@
 	      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,
@@ -5684,7 +5684,7 @@
 	  };
 	}
 
-	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"]);
@@ -5740,7 +5740,7 @@
 	      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,
@@ -5919,7 +5919,7 @@
 	  };
 	}
 
-	function instance$o($$self, $$props, $$invalidate) {
+	function instance$n($$self, $$props, $$invalidate) {
 	  let {
 	    testid = ""
 	  } = $$props;
@@ -5955,7 +5955,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$o, create_fragment$q, safe_not_equal, {
+	    }, instance$n, create_fragment$q, safe_not_equal, {
 	      testid: 0,
 	      mt: 1,
 	      mr: 2,
@@ -6037,186 +6037,83 @@
 	}
 
 	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) {
-	    const _this = this;
-
-	    const fn = function fn() {
-	      return _call(tick, function () {
-	        _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] ||
@@ -6230,54 +6127,54 @@
 	      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 {
@@ -6292,42 +6189,42 @@
 
 	      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] &
@@ -6349,151 +6246,195 @@
 	      }
 
 	      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) {
@@ -6516,7 +6457,7 @@
 	      if (!mounted) {
 	        dispose = listen(div, "click",
 	        /*closeMenu*/
-	        ctx[23]);
+	        ctx[25]);
 	        mounted = true;
 	      }
 	    },
@@ -6538,22 +6479,24 @@
 	    }
 
 	  };
-	} // (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;
@@ -6561,54 +6504,63 @@
 	  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);
@@ -6619,67 +6571,83 @@
 	    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));
 	      }
 	    },
 
@@ -6690,44 +6658,34 @@
 	    }
 
 	  };
-	} // (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) {
@@ -6736,42 +6694,35 @@
 	      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);
 	      }
 	    },
@@ -6791,7 +6742,7 @@
 	  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;
 	  }
 
@@ -6809,22 +6760,22 @@
 	      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) {
@@ -6832,7 +6783,7 @@
 	      if_block.m(div, null);
 	      /*div_binding*/
 
-	      ctx[31](div);
+	      ctx[34](div);
 	    },
 
 	    p(ctx, dirty) {
@@ -6857,32 +6808,32 @@
 	      }
 
 	      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]);
 	      }
 	    },
 
@@ -6894,31 +6845,46 @@
 	      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) {
 	  const showMenu = _async(function () {
-	    if (_disabled || isMenuVisible) {
+	    if (_disabled || _isMenuVisible) {
 	      return;
 	    }
 
-	    $$invalidate(18, isMenuVisible = true);
+	    $$invalidate(15, _isMenuVisible = true);
 	    return _call(tick, function () {
 	      // 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);
 	    });
 	  });
 
 	  let _disabled;
 
+	  let _error;
+
 	  let _multiselect;
 
 	  let _native;
@@ -6936,7 +6902,7 @@
 	    leadingicon = null
 	  } = $$props;
 	  let {
-	    maxheight = MAX_HEIGHT
+	    maxheight = "276px"
 	  } = $$props;
 	  let {
 	    placeholder = ""
@@ -6970,38 +6936,87 @@
 	  } = $$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(function () {
+	    return _call(tick, function () {
+	      $$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 {
@@ -7012,71 +7027,52 @@
 
 	    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}`));
+	    return 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`);
-	      }
+	  function closeMenu() {
+	    _menuEl.removeEventListener("blur", closeMenu);
 
-	      setHighlightedIndexToSelected();
-	    });
-	  }
+	    _menuEl.removeEventListener("mouseover", onHighlight);
 
-	  function closeMenu() {
-	    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();
 	    }
@@ -7086,18 +7082,18 @@
 	    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;
 	        }
 
@@ -7108,7 +7104,7 @@
 
 	      case "ArrowUp":
 	        if (e.altKey) {
-	          isMenuVisible ? closeMenu() : showMenu();
+	          _isMenuVisible ? closeMenu() : showMenu();
 	          break;
 	        }
 
@@ -7120,141 +7116,134 @@
 	  };
 
 	  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) {
-	      {
-	        (function () {
-	          return _call(tick, function () {
-	            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) {
@@ -7296,7 +7285,7 @@
 	  }
 
 	  get value() {
-	    return this.$$.ctx[2];
+	    return this.$$.ctx[28];
 	  }
 
 	  set value(value) {
@@ -7307,7 +7296,7 @@
 	  }
 
 	  get leadingicon() {
-	    return this.$$.ctx[3];
+	    return this.$$.ctx[2];
 	  }
 
 	  set leadingicon(leadingicon) {
@@ -7318,7 +7307,7 @@
 	  }
 
 	  get maxheight() {
-	    return this.$$.ctx[4];
+	    return this.$$.ctx[3];
 	  }
 
 	  set maxheight(maxheight) {
@@ -7329,7 +7318,7 @@
 	  }
 
 	  get placeholder() {
-	    return this.$$.ctx[5];
+	    return this.$$.ctx[4];
 	  }
 
 	  set placeholder(placeholder) {
@@ -7340,7 +7329,7 @@
 	  }
 
 	  get width() {
-	    return this.$$.ctx[6];
+	    return this.$$.ctx[5];
 	  }
 
 	  set width(width) {
@@ -7351,7 +7340,7 @@
 	  }
 
 	  get disabled() {
-	    return this.$$.ctx[7];
+	    return this.$$.ctx[6];
 	  }
 
 	  set disabled(disabled) {
@@ -7362,7 +7351,7 @@
 	  }
 
 	  get error() {
-	    return this.$$.ctx[8];
+	    return this.$$.ctx[7];
 	  }
 
 	  set error(error) {
@@ -7373,7 +7362,7 @@
 	  }
 
 	  get multiselect() {
-	    return this.$$.ctx[26];
+	    return this.$$.ctx[29];
 	  }
 
 	  set multiselect(multiselect) {
@@ -7384,7 +7373,7 @@
 	  }
 
 	  get native() {
-	    return this.$$.ctx[27];
+	    return this.$$.ctx[30];
 	  }
 
 	  set native(native) {
@@ -7395,7 +7384,7 @@
 	  }
 
 	  get mt() {
-	    return this.$$.ctx[9];
+	    return this.$$.ctx[8];
 	  }
 
 	  set mt(mt) {
@@ -7406,7 +7395,7 @@
 	  }
 
 	  get mr() {
-	    return this.$$.ctx[10];
+	    return this.$$.ctx[9];
 	  }
 
 	  set mr(mr) {
@@ -7417,7 +7406,7 @@
 	  }
 
 	  get mb() {
-	    return this.$$.ctx[11];
+	    return this.$$.ctx[10];
 	  }
 
 	  set mb(mb) {
@@ -7428,7 +7417,7 @@
 	  }
 
 	  get ml() {
-	    return this.$$.ctx[12];
+	    return this.$$.ctx[11];
 	  }
 
 	  set ml(ml) {
@@ -7457,52 +7446,6 @@
 	  };
 	}
 
-	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) {
-	      {
-	        (function () {
-	          return _call(tick, function () {
-	            if (!isBound) {
-	              $$invalidate(4, isBound = true);
-	              $$invalidate(3, ctx = getContext(name));
-	              ctx.notify({
-	                type: "bind",
-	                name,
-	                label,
-	                value
-	              });
-	            }
-	          });
-	        })();
-	      }
-	    }
-	  };
-
-	  return [name, value, label, ctx, isBound];
-	}
-
 	class DropdownItem extends SvelteElement {
 	  constructor(options) {
 	    super();
@@ -7510,61 +7453,15 @@
 	      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);
@@ -7834,133 +7731,151 @@
 	}
 
 	customElements.define("goa-focus-trap", FocusTrap);
-	/* libs/web-components/src/components/footer-meta-section/FooterMetaSection.svelte generated by Svelte v3.51.0 */
-
-	function get_each_context$3(ctx, list, i) {
-	  const child_ctx = ctx.slice();
-	  child_ctx[3] = list[i];
-	  return child_ctx;
-	} // (52:4) {#each children as child}
-
+	/* libs/web-components/src/components/footer/Footer.svelte generated by Svelte v3.51.0 */
 
-	function create_each_block$3(ctx) {
-	  let li;
-	  let a;
-	  let t_value =
-	  /*child*/
-	  ctx[3].innerHTML + "";
-	  let t;
-	  let a_href_value;
+	function create_if_block$9(ctx) {
+	  let goa_divider;
 	  return {
 	    c() {
-	      li = element("li");
-	      a = element("a");
-	      t = text(t_value);
-	      attr(a, "href", a_href_value =
-	      /*child*/
-	      ctx[3].href);
+	      goa_divider = element("goa-divider");
+	      set_custom_element_data(goa_divider, "spacing", "small");
 	    },
 
 	    m(target, anchor) {
-	      insert(target, li, anchor);
-	      append(li, a);
-	      append(a, t);
+	      insert(target, goa_divider, anchor);
 	    },
 
-	    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);
-	    }
+	    d(detaching) {
+	      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);
 	      }
 	    },
 
@@ -7968,82 +7883,299 @@
 	    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(function () {
 	    return _call(tick, function () {
-	      $$invalidate(1, children = rootEl.querySelector("slot").assignedElements());
-	      const isValid = children.map(child => child.hasAttribute("href")).reduce((sum, valid) => {
-	        return sum && valid;
-	      }, true);
-
-	      if (!isValid) {
-	        $$invalidate(1, children = []);
-	        console.warn("GoAFooterMetaSection children must be anchor elements.");
-	      }
+	      const navSlot = rootEl.querySelector("slot[name=nav]");
+	      const metaSlot = rootEl.querySelector("slot[name=meta]");
+	      $$invalidate(2, navLinks = navSlot.assignedElements());
+	      $$invalidate(3, metaLinks = metaSlot.assignedElements());
 	    });
 	  });
 
-	  function section_binding($$value) {
+	  function div5_binding($$value) {
 	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 	      rootEl = $$value;
-	      $$invalidate(0, rootEl);
+	      $$invalidate(1, rootEl);
 	    });
 	  }
 
-	  return [rootEl, children, section_binding];
+	  $$self.$$set = $$props => {
+	    if ('maxcontentwidth' in $$props) $$invalidate(0, maxcontentwidth = $$props.maxcontentwidth);
+	  };
+
+	  return [maxcontentwidth, rootEl, navLinks, metaLinks, year, div5_binding];
 	}
 
-	class FooterMetaSection extends SvelteElement {
+	class Footer extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>.hidden{display:none}ul{display:flex;flex-wrap:wrap;gap:1rem;padding-left:0}li{list-style-type:none}a{color:var(--goa-color-text);white-space:nowrap}</style>`;
+	    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--color-gray-100);border-top:2px solid var(--color-gray-200);border-bottom:1rem solid var(--goa-color-brand)}.content{padding:2rem 1rem;margin:0 auto;width:min(var(--max-content-width), 100%)}@media(min-width: 640px){.content{padding:2rem 1.5rem}}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$k, create_fragment$m, safe_not_equal, {}, null);
+	    }, instance$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;
+	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() {
-	      div = element("div");
-	      t0 = text(
-	      /*heading*/
+	      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(function () {
+	    return _call(tick, function () {
+	      $$invalidate(1, children = rootEl.querySelector("slot").assignedElements());
+	      const isValid = children.map(child => child.hasAttribute("href")).reduce((sum, valid) => {
+	        return sum && valid;
+	      }, true);
+
+	      if (!isValid) {
+	        $$invalidate(1, children = []);
+	        console.warn("GoAFooterMetaSection children must be anchor elements.");
+	      }
+	    });
+	  });
+
+	  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");
@@ -8123,7 +8255,7 @@
 	  };
 	}
 
-	function create_fragment$l(ctx) {
+	function create_fragment$k(ctx) {
 	  let section;
 	  let t0;
 	  let div;
@@ -8132,7 +8264,7 @@
 	  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];
@@ -8199,7 +8331,7 @@
 	        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);
 	        }
@@ -8270,7 +8402,7 @@
 	  };
 	}
 
-	function instance$j($$self, $$props, $$invalidate) {
+	function instance$i($$self, $$props, $$invalidate) {
 	  let {
 	    heading = ""
 	  } = $$props;
@@ -8283,294 +8415,48 @@
 	    return _call(tick, function () {
 	      // 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(function () {
-	    return _call(tick, function () {
-	      const navSlot = rootEl.querySelector("slot[name=nav]");
-	      const metaSlot = rootEl.querySelector("slot[name=meta]");
-	      $$invalidate(2, navLinks = navSlot.assignedElements());
-	      $$invalidate(3, metaLinks = metaSlot.assignedElements());
+	      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) {
@@ -8586,23 +8472,34 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["maxcontentwidth"];
+	    return ["heading", "maxcolumncount"];
 	  }
 
-	  get maxcontentwidth() {
+	  get heading() {
 	    return this.$$.ctx[0];
 	  }
 
-	  set maxcontentwidth(maxcontentwidth) {
+	  set heading(heading) {
 	    this.$$set({
-	      maxcontentwidth
+	      heading
+	    });
+	    flush();
+	  }
+
+	  get maxcolumncount() {
+	    return this.$$.ctx[1];
+	  }
+
+	  set maxcolumncount(maxcolumncount) {
+	    this.$$set({
+	      maxcolumncount
 	    });
 	    flush();
 	  }
 
 	}
 
-	customElements.define("goa-app-footer", Footer);
+	customElements.define("goa-app-footer-nav-section", FooterNavSection);
 	/* libs/web-components/src/components/form-item/FormItem.svelte generated by Svelte v3.51.0 */
 
 	function create_if_block_2$4(ctx) {
@@ -13001,7 +12898,7 @@
 	  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) {
@@ -13028,7 +12925,7 @@
 	  function change_handler() {
 	    return (
 	      /*change_handler*/
-	      ctx[18](
+	      ctx[16](
 	      /*option*/
 	      ctx[22])
 	    );
@@ -13078,7 +12975,7 @@
 	      ctx[12]);
 	      toggle_class(label, "goa-radio--error",
 	      /*isError*/
-	      ctx[10]);
+	      ctx[11]);
 	      this.first = label;
 	    },
 
@@ -13171,10 +13068,10 @@
 
 	      if (dirty &
 	      /*isError*/
-	      1024) {
+	      2048) {
 	        toggle_class(label, "goa-radio--error",
 	        /*isError*/
-	        ctx[10]);
+	        ctx[11]);
 	      }
 	    },
 
@@ -13248,13 +13145,13 @@
 	      /*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];
@@ -13304,7 +13201,7 @@
 	      /*div_binding*/
 
 
-	      ctx[19](null);
+	      ctx[17](null);
 	    }
 
 	  };
@@ -13312,6 +13209,7 @@
 
 	function instance$7($$self, $$props, $$invalidate) {
 	  let isDisabled;
+	  let isError;
 	  const [Orientations, validateOrientation] = typeValidator("Radio group orientation", ["vertical", "horizontal"]);
 	  let {
 	    name
@@ -13346,12 +13244,46 @@
 	  let {
 	    ml = null
 	  } = $$props;
-	  let options = []; // private
-
-	  let isError;
-	  let ctx;
-	  let isBound = false;
+	  let options = [];
 	  let el;
+	  onMount(function () {
+	    return _call(tick, function () {
+	      $$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;
@@ -13365,9 +13297,6 @@
 	    }));
 	  }
 
-	  onDestroy(() => {
-	    deleteContext(name);
-	  });
 	  onMount(() => {
 	    validateOrientation(orientation);
 	  });
@@ -13377,7 +13306,7 @@
 	  function div_binding($$value) {
 	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 	      el = $$value;
-	      $$invalidate(11, el);
+	      $$invalidate(10, el);
 	    });
 	  }
 
@@ -13399,32 +13328,18 @@
 	    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 {
@@ -13591,134 +13506,9 @@
 	}
 
 	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) {
-	      {
-	        (function () {
-	          return _call(tick, function () {
-	            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;
@@ -13786,7 +13576,7 @@
 	  };
 	}
 
-	function instance$5($$self, $$props, $$invalidate) {
+	function instance$6($$self, $$props, $$invalidate) {
 	  let {
 	    direction = "vertical"
 	  } = $$props;
@@ -13818,7 +13608,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$5, create_fragment$7, safe_not_equal, {
+	    }, instance$6, create_fragment$8, safe_not_equal, {
 	      direction: 0,
 	      hpadding: 1,
 	      vpadding: 2,
@@ -14346,7 +14136,7 @@
 	  };
 	}
 
-	function create_fragment$6(ctx) {
+	function create_fragment$7(ctx) {
 	  let div;
 	  let current_block_type_index;
 	  let if_block;
@@ -14462,7 +14252,7 @@
 	  };
 	}
 
-	function instance$4($$self, $$props, $$invalidate) {
+	function instance$5($$self, $$props, $$invalidate) {
 	  const [Types, validateType] = typeValidator("Skeleton type", ["image", "text", "title", "text-small", "avatar", "header", "paragraph", "thumbnail", "card", "profile", "lines"], true);
 	  const [Sizes, validateSize] = typeValidator("Skeleton size", ["1", "2", "3", "4"]);
 	  let {
@@ -14520,7 +14310,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$4, create_fragment$6, safe_not_equal, {
+	    }, instance$5, create_fragment$7, safe_not_equal, {
 	      maxwidth: 0,
 	      size: 1,
 	      linecount: 2,
@@ -14652,7 +14442,7 @@
 	customElements.define("goa-skeleton", Skeleton);
 	/* libs/web-components/src/components/spacer/Spacer.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$5(ctx) {
+	function create_fragment$6(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -14681,7 +14471,7 @@
 	  };
 	}
 
-	function instance$3($$self, $$props, $$invalidate) {
+	function instance$4($$self, $$props, $$invalidate) {
 	  let {
 	    hspacing = "none"
 	  } = $$props;
@@ -14718,7 +14508,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$3, create_fragment$5, safe_not_equal, {
+	    }, instance$4, create_fragment$6, safe_not_equal, {
 	      hspacing: 1,
 	      vspacing: 2
 	    }, null);
@@ -14750,21 +14540,85 @@
 	    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]';
 	}
@@ -15076,7 +14930,7 @@
 	  };
 	}
 
-	function create_fragment$4(ctx) {
+	function create_fragment$5(ctx) {
 	  let if_block_anchor;
 	  let if_block =
 	  /*ready*/
@@ -15121,7 +14975,7 @@
 	  };
 	}
 
-	function instance$2($$self, $$props, $$invalidate) {
+	function instance$3($$self, $$props, $$invalidate) {
 	  let diameter;
 	  let strokewidth;
 	  let radius;
@@ -15252,7 +15106,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$2, create_fragment$4, safe_not_equal, {
+	    }, instance$3, create_fragment$5, safe_not_equal, {
 	      size: 10,
 	      invert: 0,
 	      progress: 11,
@@ -15322,6 +15176,261 @@
 	}
 
 	customElements.define("goa-spinner", Spinner);
+	/* libs/web-components/src/components/table/Table.svelte generated by Svelte v3.51.0 */
+
+	function create_fragment$4(ctx) {
+	  let table;
+	  let slot;
+	  let t0;
+	  let template;
+	  let table_style_value;
+	  return {
+	    c() {
+	      table = element("table");
+	      slot = element("slot");
+	      t0 = space();
+	      template = element("template");
+	      template.innerHTML = `<thead><tr><th></th></tr></thead> 
+    <tbody><tr><td></td></tr></tbody> 
+    <tfoot><tr><td></td></tr></tfoot>`;
+	      this.c = noop;
+	      attr(table, "style", table_style_value = `
+    width: ${
+      /*width*/
+      ctx[0]};
+    ${calculateMargin(
+      /*mt*/
+      ctx[1],
+      /*mr*/
+      ctx[2],
+      /*mb*/
+      ctx[3],
+      /*ml*/
+      ctx[4])}
+  `);
+	      toggle_class(table, "sticky",
+	      /*_stickyHeader*/
+	      ctx[6]);
+	    },
+
+	    m(target, anchor) {
+	      insert(target, table, anchor);
+	      append(table, slot);
+	      append(table, t0);
+	      append(table, template);
+	      /*table_binding*/
+
+	      ctx[8](table);
+	    },
+
+	    p(ctx, [dirty]) {
+	      if (dirty &
+	      /*width, mt, mr, mb, ml*/
+	      31 && table_style_value !== (table_style_value = `
+    width: ${
+      /*width*/
+      ctx[0]};
+    ${calculateMargin(
+      /*mt*/
+      ctx[1],
+      /*mr*/
+      ctx[2],
+      /*mb*/
+      ctx[3],
+      /*ml*/
+      ctx[4])}
+  `)) {
+	        attr(table, "style", table_style_value);
+	      }
+
+	      if (dirty &
+	      /*_stickyHeader*/
+	      64) {
+	        toggle_class(table, "sticky",
+	        /*_stickyHeader*/
+	        ctx[6]);
+	      }
+	    },
+
+	    i: noop,
+	    o: noop,
+
+	    d(detaching) {
+	      if (detaching) detach(table);
+	      /*table_binding*/
+
+	      ctx[8](null);
+	    }
+
+	  };
+	}
+
+	function instance$2($$self, $$props, $$invalidate) {
+	  let _stickyHeader;
+
+	  let {
+	    width = ""
+	  } = $$props;
+	  let {
+	    stickyheader = "false"
+	  } = $$props;
+	  let {
+	    mt = null
+	  } = $$props;
+	  let {
+	    mr = null
+	  } = $$props;
+	  let {
+	    mb = null
+	  } = $$props;
+	  let {
+	    ml = null
+	  } = $$props; // Private
+
+	  let _rootEl;
+
+	  onMount(() => {
+	    const slot = _rootEl.querySelector("slot");
+
+	    if (slot) {
+	      // React needs to nest data in a <table>...</table>
+	      const content = slot.assignedElements()[0].querySelectorAll("template table > *");
+
+	      _rootEl.append(...(content.length > 0 ? content : slot.assignedElements()));
+	    } else {
+	      return [..._rootEl.children];
+	    }
+	  });
+
+	  function table_binding($$value) {
+	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+	      _rootEl = $$value;
+	      $$invalidate(5, _rootEl);
+	    });
+	  }
+
+	  $$self.$$set = $$props => {
+	    if ('width' in $$props) $$invalidate(0, width = $$props.width);
+	    if ('stickyheader' in $$props) $$invalidate(7, stickyheader = $$props.stickyheader);
+	    if ('mt' in $$props) $$invalidate(1, mt = $$props.mt);
+	    if ('mr' in $$props) $$invalidate(2, mr = $$props.mr);
+	    if ('mb' in $$props) $$invalidate(3, mb = $$props.mb);
+	    if ('ml' in $$props) $$invalidate(4, ml = $$props.ml);
+	  };
+
+	  $$self.$$.update = () => {
+	    if ($$self.$$.dirty &
+	    /*stickyheader*/
+	    128) {
+	      $$invalidate(6, _stickyHeader = toBoolean(stickyheader));
+	    }
+	  };
+
+	  return [width, mt, mr, mb, ml, _rootEl, _stickyHeader, stickyheader, table_binding];
+	}
+
+	class Table extends SvelteElement {
+	  constructor(options) {
+	    super();
+	    this.shadowRoot.innerHTML = `<style>table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{padding:1rem 1.5rem;border-bottom:1px solid var(--color-gray-200);line-height:1rem}th{background-color:var(--color-white);color:var(--goa-color-text-secondary);padding:1rem;vertical-align:middle;text-align:left;border-bottom:2px solid var(--color-gray-600)}tfoot td{background-color:var(--color-gray-100)}tfoot tr:first-child td{border-top:2px solid var(--color-gray-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
+	    init(this, {
+	      target: this.shadowRoot,
+	      props: attribute_to_object(this.attributes),
+	      customElement: true
+	    }, instance$2, create_fragment$4, safe_not_equal, {
+	      width: 0,
+	      stickyheader: 7,
+	      mt: 1,
+	      mr: 2,
+	      mb: 3,
+	      ml: 4
+	    }, null);
+
+	    if (options) {
+	      if (options.target) {
+	        insert(options.target, this, options.anchor);
+	      }
+
+	      if (options.props) {
+	        this.$set(options.props);
+	        flush();
+	      }
+	    }
+	  }
+
+	  static get observedAttributes() {
+	    return ["width", "stickyheader", "mt", "mr", "mb", "ml"];
+	  }
+
+	  get width() {
+	    return this.$$.ctx[0];
+	  }
+
+	  set width(width) {
+	    this.$$set({
+	      width
+	    });
+	    flush();
+	  }
+
+	  get stickyheader() {
+	    return this.$$.ctx[7];
+	  }
+
+	  set stickyheader(stickyheader) {
+	    this.$$set({
+	      stickyheader
+	    });
+	    flush();
+	  }
+
+	  get mt() {
+	    return this.$$.ctx[1];
+	  }
+
+	  set mt(mt) {
+	    this.$$set({
+	      mt
+	    });
+	    flush();
+	  }
+
+	  get mr() {
+	    return this.$$.ctx[2];
+	  }
+
+	  set mr(mr) {
+	    this.$$set({
+	      mr
+	    });
+	    flush();
+	  }
+
+	  get mb() {
+	    return this.$$.ctx[3];
+	  }
+
+	  set mb(mb) {
+	    this.$$set({
+	      mb
+	    });
+	    flush();
+	  }
+
+	  get ml() {
+	    return this.$$.ctx[4];
+	  }
+
+	  set ml(ml) {
+	    this.$$set({
+	      ml
+	    });
+	    flush();
+	  }
+
+	}
+
+	customElements.define("goa-table", Table);
 	/* libs/web-components/src/components/text-area/TextArea.svelte generated by Svelte v3.51.0 */
 
 	function create_fragment$3(ctx) {
@@ -16502,16 +16611,17 @@
 	  }, void 0);
 	}
 
-	var GoADropdownOption = function GoADropdownOption(props) {
-	  return jsxRuntime.jsx("goa-dropdown-item", __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);
+	}
 
 	var GoADropdown = function GoADropdown(props) {
 	  var el = react.useRef(null);
@@ -16538,7 +16648,7 @@
 	  return jsxRuntime.jsx("goa-dropdown", __assign({
 	    ref: el,
 	    name: props.name,
-	    value: JSON.stringify(props.value),
+	    value: stringify(props.value),
 	    arialabel: props.ariaLabel,
 	    disabled: props.disabled,
 	    error: props.error,
@@ -16559,6 +16669,25 @@
 	  }), void 0);
 	};
 
+	function GoADropdownOption(props) {
+	  react.useEffect(function () {
+	    console.warn("GoADropdownOption is deprecated. Please use GoADropdownItem");
+	  }, []);
+	  return jsxRuntime.jsx(GoADropdownItem, __assign({}, props), void 0);
+	}
+	function GoADropdownItem(_a) {
+	  var value = _a.value,
+	      label = _a.label,
+	      name = _a.name,
+	      testId = _a.testId;
+	  return jsxRuntime.jsx("goa-dropdown-item", {
+	    "data-testid": testId,
+	    value: value,
+	    label: label,
+	    name: name
+	  }, void 0);
+	}
+
 	function GoAAppFooterMetaSection(_a) {
 	  var children = _a.children;
 	  return jsxRuntime.jsx("goa-app-footer-meta-section", __assign({
@@ -17191,6 +17320,19 @@
 	  }, void 0);
 	};
 
+	function GoATable(props) {
+	  return jsxRuntime.jsx("goa-table", __assign({
+	    width: props.width,
+	    stickyheader: false
+	  }, {
+	    children: jsxRuntime.jsx("template", {
+	      children: jsxRuntime.jsx("table", {
+	        children: props.children
+	      }, void 0)
+	    }, void 0)
+	  }), void 0);
+	}
+
 	var GoATextArea = function GoATextArea(_a) {
 	  var name = _a.name,
 	      value = _a.value,
@@ -17284,6 +17426,7 @@
 	exports.GoAContainer = GoAContainer;
 	exports.GoADivider = GoADivider;
 	exports.GoADropdown = GoADropdown;
+	exports.GoADropdownItem = GoADropdownItem;
 	exports.GoADropdownOption = GoADropdownOption;
 	exports.GoAEmergencyBadge = GoAEmergencyBadge;
 	exports.GoAFormItem = GoAFormItem;
@@ -17319,6 +17462,7 @@
 	exports.GoASpacer = GoASpacer;
 	exports.GoASpinner = GoASpinner;
 	exports.GoASuccessBadge = GoASuccessBadge;
+	exports.GoATable = GoATable;
 	exports.GoATextArea = GoATextArea;
 	exports.GoATwoColumnLayout = GoATwoColumnLayout;