@abgov/react-components 4.0.0-alpha.20 → 4.0.0-alpha.23

package/react-components.umd.js

@@ -1067,7 +1067,7 @@
 	/* libs/web-components/src/components/page-block/PageBlock.svelte generated by Svelte v3.49.0 */
 
 
-	function create_fragment$D(ctx) {
+	function create_fragment$E(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -1107,7 +1107,7 @@
 	  };
 	}
 
-	function instance$y($$self, $$props, $$invalidate) {
+	function instance$z($$self, $$props, $$invalidate) {
 	  const Sizes = {
 	    "full": "100%"
 	  };
@@ -1148,7 +1148,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$y, create_fragment$D, safe_not_equal, {
+	    }, instance$z, create_fragment$E, safe_not_equal, {
 	      width: 1,
 	      _width: 0
 	    }, null);
@@ -1196,8 +1196,64 @@
 	customElements.define("goa-page-block", PageBlock);
 	/* libs/web-components/src/components/app-header/AppHeader.svelte generated by Svelte v3.49.0 */
 
-	function create_fragment$C(ctx) {
-	  let div1;
+	function create_else_block$4(ctx) {
+	  let div;
+	  let img0;
+	  let img0_src_value;
+	  let t0;
+	  let img1;
+	  let img1_src_value;
+	  let t1;
+	  let span;
+	  let t2;
+	  return {
+	    c() {
+	      div = element("div");
+	      img0 = element("img");
+	      t0 = space();
+	      img1 = element("img");
+	      t1 = space();
+	      span = element("span");
+	      t2 = text(
+	      /*heading*/
+	      ctx[0]);
+	      attr(img0, "alt", "GoA Logo");
+	      attr(img0, "class", "image-mobile");
+	      if (!src_url_equal(img0.src, img0_src_value = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bfill:%2300aad2;%7D.c%7Bclip-path:url(%23a);%7D.d%7Bfill:%23fff;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='14' height='14' transform='translate(-0.345 -0.21)'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(0 -0.135)'%3E%3Ccircle class='b' cx='8' cy='8' r='8' transform='translate(0 0.135)'/%3E%3Cg transform='translate(1.345 1.344)'%3E%3Cg class='c' transform='translate(0 0)'%3E%3Cpath class='d' d='M12.612,13.636a16.24,16.24,0,0,1-1.86-.822,13.436,13.436,0,0,0,1.6-.708,11.312,11.312,0,0,0,.264,1.53M16.032,7.3c-.266-.034-.128.091-.2.442a5.465,5.465,0,0,1-2.8,3.338,16.141,16.141,0,0,1,.249-4.84c.275-1,.6-.813.2-1.022-.427-.22-.887.071-1.258.813A27.247,27.247,0,0,1,7.4,13.522a2.141,2.141,0,0,1-2.918.461c-.206-.174-.282.095-.026.37a2.412,2.412,0,0,0,3.387-.082A32.715,32.715,0,0,0,12.219,7.51a23.541,23.541,0,0,0,.063,3.971,11.464,11.464,0,0,1-1.964.749c-.388.1-.628.26-.635.439-.007.2.253.363.63.541.67.318,2.633,1.246,3.117,1.527.414.24.616.053.739-.207.16-.338-.279-.533-.7-.661a13.175,13.175,0,0,1-.382-2.179,7.143,7.143,0,0,0,2.547-2.454,4.7,4.7,0,0,0,.4-1.133,2.125,2.125,0,0,0,.048-.742s-.007-.054-.048-.059' transform='translate(-3.51 -3.943)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")) attr(img0, "src", img0_src_value);
+	      attr(img1, "alt", "GoA Logo");
+	      attr(img1, "class", "image-desktop");
+	      if (!src_url_equal(img1.src, img1_src_value = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='149.351' height='42' viewBox='0 0 149.351 42'%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='a'%3E%3Crect class='a' width='149.351' height='42'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='b'%3E%3Crect class='c' width='13.555' height='13.555' transform='translate(135.796 21.524)'/%3E%3Cpath class='d' d='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' transform='translate(-0.038 0.124)'/%3E%3C/g%3E%3C/svg%3E")) attr(img1, "src", img1_src_value);
+	      attr(span, "class", "title");
+	      attr(div, "class", "app-link");
+	    },
+
+	    m(target, anchor) {
+	      insert(target, div, anchor);
+	      append(div, img0);
+	      append(div, t0);
+	      append(div, img1);
+	      append(div, t1);
+	      append(div, span);
+	      append(span, t2);
+	    },
+
+	    p(ctx, dirty) {
+	      if (dirty &
+	      /*heading*/
+	      1) set_data(t2,
+	      /*heading*/
+	      ctx[0]);
+	    },
+
+	    d(detaching) {
+	      if (detaching) detach(div);
+	    }
+
+	  };
+	} // (12:2) {#if url}
+
+
+	function create_if_block$i(ctx) {
 	  let a;
 	  let img0;
 	  let img0_src_value;
@@ -1207,11 +1263,8 @@
 	  let t1;
 	  let span;
 	  let t2;
-	  let t3;
-	  let div0;
 	  return {
 	    c() {
-	      div1 = element("div");
 	      a = element("a");
 	      img0 = element("img");
 	      t0 = space();
@@ -1219,12 +1272,8 @@
 	      t1 = space();
 	      span = element("span");
 	      t2 = text(
-	      /*title*/
-	      ctx[1]);
-	      t3 = space();
-	      div0 = element("div");
-	      div0.innerHTML = `<slot></slot>`;
-	      this.c = noop;
+	      /*heading*/
+	      ctx[0]);
 	      attr(img0, "alt", "GoA Logo");
 	      attr(img0, "class", "image-mobile");
 	      if (!src_url_equal(img0.src, img0_src_value = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bfill:%2300aad2;%7D.c%7Bclip-path:url(%23a);%7D.d%7Bfill:%23fff;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='14' height='14' transform='translate(-0.345 -0.21)'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(0 -0.135)'%3E%3Ccircle class='b' cx='8' cy='8' r='8' transform='translate(0 0.135)'/%3E%3Cg transform='translate(1.345 1.344)'%3E%3Cg class='c' transform='translate(0 0)'%3E%3Cpath class='d' d='M12.612,13.636a16.24,16.24,0,0,1-1.86-.822,13.436,13.436,0,0,0,1.6-.708,11.312,11.312,0,0,0,.264,1.53M16.032,7.3c-.266-.034-.128.091-.2.442a5.465,5.465,0,0,1-2.8,3.338,16.141,16.141,0,0,1,.249-4.84c.275-1,.6-.813.2-1.022-.427-.22-.887.071-1.258.813A27.247,27.247,0,0,1,7.4,13.522a2.141,2.141,0,0,1-2.918.461c-.206-.174-.282.095-.026.37a2.412,2.412,0,0,0,3.387-.082A32.715,32.715,0,0,0,12.219,7.51a23.541,23.541,0,0,0,.063,3.971,11.464,11.464,0,0,1-1.964.749c-.388.1-.628.26-.635.439-.007.2.253.363.63.541.67.318,2.633,1.246,3.117,1.527.414.24.616.053.739-.207.16-.338-.279-.533-.7-.661a13.175,13.175,0,0,1-.382-2.179,7.143,7.143,0,0,0,2.547-2.454,4.7,4.7,0,0,0,.4-1.133,2.125,2.125,0,0,0,.048-.742s-.007-.054-.048-.059' transform='translate(-3.51 -3.943)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")) attr(img0, "src", img0_src_value);
@@ -1234,40 +1283,89 @@
 	      attr(span, "class", "title");
 	      attr(a, "href",
 	      /*url*/
-	      ctx[0]);
+	      ctx[1]);
 	      attr(a, "class", "app-link");
-	      attr(div1, "class", "app-header");
-	      attr(div1, "data-testid",
-	      /*testid*/
-	      ctx[2]);
 	    },
 
 	    m(target, anchor) {
-	      insert(target, div1, anchor);
-	      append(div1, a);
+	      insert(target, a, anchor);
 	      append(a, img0);
 	      append(a, t0);
 	      append(a, img1);
 	      append(a, t1);
 	      append(a, span);
 	      append(span, t2);
-	      append(div1, t3);
-	      append(div1, div0);
 	    },
 
-	    p(ctx, [dirty]) {
+	    p(ctx, dirty) {
 	      if (dirty &
-	      /*title*/
-	      2) set_data(t2,
-	      /*title*/
-	      ctx[1]);
+	      /*heading*/
+	      1) set_data(t2,
+	      /*heading*/
+	      ctx[0]);
 
 	      if (dirty &
 	      /*url*/
-	      1) {
+	      2) {
 	        attr(a, "href",
 	        /*url*/
-	        ctx[0]);
+	        ctx[1]);
+	      }
+	    },
+
+	    d(detaching) {
+	      if (detaching) detach(a);
+	    }
+
+	  };
+	}
+
+	function create_fragment$D(ctx) {
+	  let div1;
+	  let t;
+	  let div0;
+
+	  function select_block_type(ctx, dirty) {
+	    if (
+	    /*url*/
+	    ctx[1]) return create_if_block$i;
+	    return create_else_block$4;
+	  }
+
+	  let current_block_type = select_block_type(ctx);
+	  let if_block = current_block_type(ctx);
+	  return {
+	    c() {
+	      div1 = element("div");
+	      if_block.c();
+	      t = space();
+	      div0 = element("div");
+	      div0.innerHTML = `<slot></slot>`;
+	      this.c = noop;
+	      attr(div1, "class", "app-header");
+	      attr(div1, "data-testid",
+	      /*testid*/
+	      ctx[2]);
+	    },
+
+	    m(target, anchor) {
+	      insert(target, div1, anchor);
+	      if_block.m(div1, null);
+	      append(div1, t);
+	      append(div1, div0);
+	    },
+
+	    p(ctx, [dirty]) {
+	      if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
+	        if_block.p(ctx, dirty);
+	      } else {
+	        if_block.d(1);
+	        if_block = current_block_type(ctx);
+
+	        if (if_block) {
+	          if_block.c();
+	          if_block.m(div1, t);
+	        }
 	      }
 
 	      if (dirty &
@@ -1284,29 +1382,30 @@
 
 	    d(detaching) {
 	      if (detaching) detach(div1);
+	      if_block.d();
 	    }
 
 	  };
 	}
 
-	function instance$x($$self, $$props, $$invalidate) {
+	function instance$y($$self, $$props, $$invalidate) {
 	  let {
-	    url = "#"
+	    heading = ""
 	  } = $$props;
 	  let {
-	    title = ""
+	    url = ""
 	  } = $$props;
 	  let {
 	    testid = ""
 	  } = $$props;
 
 	  $$self.$$set = $$props => {
-	    if ('url' in $$props) $$invalidate(0, url = $$props.url);
-	    if ('title' in $$props) $$invalidate(1, title = $$props.title);
+	    if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
+	    if ('url' in $$props) $$invalidate(1, url = $$props.url);
 	    if ('testid' in $$props) $$invalidate(2, testid = $$props.testid);
 	  };
 
-	  return [url, title, testid];
+	  return [heading, url, testid];
 	}
 
 	class AppHeader extends SvelteElement {
@@ -1317,9 +1416,9 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$x, create_fragment$C, safe_not_equal, {
-	      url: 0,
-	      title: 1,
+	    }, instance$y, create_fragment$D, safe_not_equal, {
+	      heading: 0,
+	      url: 1,
 	      testid: 2
 	    }, null);
 
@@ -1336,27 +1435,27 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["url", "title", "testid"];
+	    return ["heading", "url", "testid"];
 	  }
 
-	  get url() {
+	  get heading() {
 	    return this.$$.ctx[0];
 	  }
 
-	  set url(url) {
+	  set heading(heading) {
 	    this.$$set({
-	      url
+	      heading
 	    });
 	    flush();
 	  }
 
-	  get title() {
+	  get url() {
 	    return this.$$.ctx[1];
 	  }
 
-	  set title(title) {
+	  set url(url) {
 	    this.$$set({
-	      title
+	      url
 	    });
 	    flush();
 	  }
@@ -1410,7 +1509,7 @@
 	    }
 
 	  };
-	} // (35:2) {#if showIcon}
+	} // (41:2) {#if showIcon}
 
 
 	function create_if_block_1$b(ctx) {
@@ -1420,7 +1519,7 @@
 	      goa_icon = element("goa-icon");
 	      set_custom_element_data(goa_icon, "type",
 	      /*iconType*/
-	      ctx[3]);
+	      ctx[4]);
 	      set_custom_element_data(goa_icon, "size", "small");
 	    },
 
@@ -1431,10 +1530,10 @@
 	    p(ctx, dirty) {
 	      if (dirty &
 	      /*iconType*/
-	      8) {
+	      16) {
 	        set_custom_element_data(goa_icon, "type",
 	        /*iconType*/
-	        ctx[3]);
+	        ctx[4]);
 	      }
 	    },
 
@@ -1443,7 +1542,7 @@
 	    }
 
 	  };
-	} // (40:2) {#if content}
+	} // (46:2) {#if content}
 
 
 	function create_if_block$h(ctx) {
@@ -1478,7 +1577,7 @@
 	  };
 	}
 
-	function create_fragment$B(ctx) {
+	function create_fragment$C(ctx) {
 	  let div;
 	  let t;
 	  let div_class_value;
@@ -1486,7 +1585,7 @@
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*showIcon*/
-	    ctx[4]) return create_if_block_1$b;
+	    ctx[3]) return create_if_block_1$b;
 	    return create_else_block$3;
 	  }
 
@@ -1511,7 +1610,7 @@
 	      ctx[0]);
 	      toggle_class(div, "icon-only",
 	      /*showIcon*/
-	      ctx[4] && !
+	      ctx[3] && !
 	      /*content*/
 	      ctx[2]);
 	    },
@@ -1569,10 +1668,10 @@
 
 	      if (dirty &
 	      /*type, showIcon, content*/
-	      21) {
+	      13) {
 	        toggle_class(div, "icon-only",
 	        /*showIcon*/
-	        ctx[4] && !
+	        ctx[3] && !
 	        /*content*/
 	        ctx[2]);
 	      }
@@ -1590,7 +1689,7 @@
 	  };
 	}
 
-	function instance$w($$self, $$props, $$invalidate) {
+	function instance$x($$self, $$props, $$invalidate) {
 	  let showIcon;
 	  let iconType;
 	  let {
@@ -1605,6 +1704,11 @@
 	  let {
 	    content = ""
 	  } = $$props;
+	  onMount(() => {
+	    if (!showIcon && !content) {
+	      console.warn("GoABadge must have either then content or icon property set");
+	    }
+	  });
 
 	  $$self.$$set = $$props => {
 	    if ('type' in $$props) $$invalidate(0, type = $$props.type);
@@ -1618,13 +1722,13 @@
 	    /*icon*/
 	    32) {
 	      // export let icon: WCBoolean = WC_FALSE;
-	      $$invalidate(4, showIcon = toBoolean(icon));
+	      $$invalidate(3, showIcon = toBoolean(icon));
 	    }
 
 	    if ($$self.$$.dirty &
 	    /*type*/
 	    1) {
-	      $$invalidate(3, iconType = {
+	      $$invalidate(4, iconType = {
 	        success: "checkmark-circle",
 	        warning: "alert-circle",
 	        information: "information-circle",
@@ -1637,7 +1741,7 @@
 	    }
 	  };
 
-	  return [type, testid, content, iconType, showIcon, icon];
+	  return [type, testid, content, showIcon, iconType, icon];
 	}
 
 	class Badge extends SvelteElement {
@@ -1648,7 +1752,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$w, create_fragment$B, safe_not_equal, {
+	    }, instance$x, create_fragment$C, safe_not_equal, {
 	      type: 0,
 	      testid: 1,
 	      icon: 5,
@@ -1727,7 +1831,7 @@
 	  let if_block1_anchor;
 	  let if_block0 =
 	  /*leadingicon*/
-	  ctx[4] && create_if_block_2$6(ctx);
+	  ctx[4] && create_if_block_2$7(ctx);
 	  let if_block1 =
 	  /*trailingicon*/
 	  ctx[5] && create_if_block_1$a(ctx);
@@ -1759,7 +1863,7 @@
 	        if (if_block0) {
 	          if_block0.p(ctx, dirty);
 	        } else {
-	          if_block0 = create_if_block_2$6(ctx);
+	          if_block0 = create_if_block_2$7(ctx);
 	          if_block0.c();
 	          if_block0.m(t0.parentNode, t0);
 	        }
@@ -1831,7 +1935,7 @@
 	} // (61:4) {#if leadingicon}
 
 
-	function create_if_block_2$6(ctx) {
+	function create_if_block_2$7(ctx) {
 	  let goa_icon;
 	  return {
 	    c() {
@@ -1918,7 +2022,7 @@
 	  };
 	}
 
-	function create_fragment$A(ctx) {
+	function create_fragment$B(ctx) {
 	  let button;
 	  let button_class_value;
 	  let mounted;
@@ -2063,7 +2167,7 @@
 	  e.stopPropagation();
 	}
 
-	function instance$v($$self, $$props, $$invalidate) {
+	function instance$w($$self, $$props, $$invalidate) {
 	  let isDisabled;
 	  let isButtonDark;
 	  const BUTTON_TYPES = ["primary", "secondary", "tertiary", "start"];
@@ -2157,7 +2261,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$v, create_fragment$A, safe_not_equal, {
+	    }, instance$w, create_fragment$B, safe_not_equal, {
 	      type: 0,
 	      size: 1,
 	      variant: 2,
@@ -2277,7 +2381,7 @@
 	customElements.define("goa-button", Button);
 	/* libs/web-components/src/components/button-group/ButtonGroup.svelte generated by Svelte v3.49.0 */
 
-	function create_fragment$z(ctx) {
+	function create_fragment$A(ctx) {
 	  let div;
 	  let slot;
 	  return {
@@ -2326,7 +2430,7 @@
 	  };
 	}
 
-	function instance$u($$self, $$props, $$invalidate) {
+	function instance$v($$self, $$props, $$invalidate) {
 	  let {
 	    gap = "medium"
 	  } = $$props;
@@ -2350,7 +2454,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$u, create_fragment$z, safe_not_equal, {
+	    }, instance$v, create_fragment$A, safe_not_equal, {
 	      gap: 0,
 	      alignment: 1
 	    }, null);
@@ -2398,7 +2502,7 @@
 	customElements.define("goa-button-group", ButtonGroup);
 	/* libs/web-components/src/components/callout/Callout.svelte generated by Svelte v3.49.0 */
 
-	function create_fragment$y(ctx) {
+	function create_fragment$z(ctx) {
 	  let div;
 	  let span0;
 	  let goa_icon;
@@ -2419,7 +2523,7 @@
 	      span1 = element("span");
 	      h3 = element("h3");
 	      t1 = text(
-	      /*title*/
+	      /*heading*/
 	      ctx[1]);
 	      t2 = space();
 	      slot = element("slot");
@@ -2478,9 +2582,9 @@
 	      }
 
 	      if (dirty &
-	      /*title*/
+	      /*heading*/
 	      2) set_data(t1,
-	      /*title*/
+	      /*heading*/
 	      ctx[1]);
 
 	      if (dirty &
@@ -2502,13 +2606,13 @@
 	  };
 	}
 
-	function instance$t($$self, $$props, $$invalidate) {
+	function instance$u($$self, $$props, $$invalidate) {
 	  let iconType;
 	  let {
 	    type
 	  } = $$props;
 	  let {
-	    title
+	    heading
 	  } = $$props;
 	  let {
 	    testid = ""
@@ -2516,7 +2620,7 @@
 
 	  $$self.$$set = $$props => {
 	    if ('type' in $$props) $$invalidate(0, type = $$props.type);
-	    if ('title' in $$props) $$invalidate(1, title = $$props.title);
+	    if ('heading' in $$props) $$invalidate(1, heading = $$props.heading);
 	    if ('testid' in $$props) $$invalidate(2, testid = $$props.testid);
 	  };
 
@@ -2528,7 +2632,7 @@
 	    }
 	  };
 
-	  return [type, title, testid, iconType];
+	  return [type, heading, testid, iconType];
 	}
 
 	class Callout extends SvelteElement {
@@ -2539,9 +2643,9 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$t, create_fragment$y, safe_not_equal, {
+	    }, instance$u, create_fragment$z, safe_not_equal, {
 	      type: 0,
-	      title: 1,
+	      heading: 1,
 	      testid: 2
 	    }, null);
 
@@ -2558,7 +2662,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["type", "title", "testid"];
+	    return ["type", "heading", "testid"];
 	  }
 
 	  get type() {
@@ -2572,13 +2676,13 @@
 	    flush();
 	  }
 
-	  get title() {
+	  get heading() {
 	    return this.$$.ctx[1];
 	  }
 
-	  set title(title) {
+	  set heading(heading) {
 	    this.$$set({
-	      title
+	      heading
 	    });
 	    flush();
 	  }
@@ -2599,7 +2703,7 @@
 	customElements.define("goa-callout", Callout);
 	/* libs/web-components/src/components/card/Card.svelte generated by Svelte v3.49.0 */
 
-	function create_fragment$x(ctx) {
+	function create_fragment$y(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -2658,7 +2762,7 @@
 	  };
 	}
 
-	function instance$s($$self, $$props, $$invalidate) {
+	function instance$t($$self, $$props, $$invalidate) {
 	  let {
 	    elevation = 0
 	  } = $$props;
@@ -2687,7 +2791,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$s, create_fragment$x, safe_not_equal, {
+	    }, instance$t, create_fragment$y, safe_not_equal, {
 	      elevation: 0,
 	      width: 1,
 	      testId: 2
@@ -2747,7 +2851,7 @@
 	customElements.define("goa-card", Card);
 	/* libs/web-components/src/components/card-actions/CardActions.svelte generated by Svelte v3.49.0 */
 
-	function create_fragment$w(ctx) {
+	function create_fragment$x(ctx) {
 	  let goa_card_content;
 	  return {
 	    c() {
@@ -2778,7 +2882,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$w, safe_not_equal, {}, null);
+	    }, null, create_fragment$x, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -2792,7 +2896,7 @@
 	customElements.define("goa-card-actions", CardActions);
 	/* libs/web-components/src/components/card-content/CardContent.svelte generated by Svelte v3.49.0 */
 
-	function create_fragment$v(ctx) {
+	function create_fragment$w(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -2825,7 +2929,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$v, safe_not_equal, {}, null);
+	    }, null, create_fragment$w, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -2839,7 +2943,7 @@
 	customElements.define("goa-card-content", CardContent);
 	/* libs/web-components/src/components/card-group/CardGroup.svelte generated by Svelte v3.49.0 */
 
-	function create_fragment$u(ctx) {
+	function create_fragment$v(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -2872,7 +2976,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$u, safe_not_equal, {}, null);
+	    }, null, create_fragment$v, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -2886,7 +2990,7 @@
 	customElements.define("goa-card-group", CardGroup);
 	/* libs/web-components/src/components/card-image/CardImage.svelte generated by Svelte v3.49.0 */
 
-	function create_fragment$t(ctx) {
+	function create_fragment$u(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -2935,7 +3039,7 @@
 	  };
 	}
 
-	function instance$r($$self, $$props, $$invalidate) {
+	function instance$s($$self, $$props, $$invalidate) {
 	  let {
 	    src
 	  } = $$props;
@@ -2959,7 +3063,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$r, create_fragment$t, safe_not_equal, {
+	    }, instance$s, create_fragment$u, safe_not_equal, {
 	      src: 0,
 	      height: 1
 	    }, null);
@@ -3061,7 +3165,7 @@
 	  };
 	}
 
-	function create_fragment$s(ctx) {
+	function create_fragment$t(ctx) {
 	  let label;
 	  let div0;
 	  let input;
@@ -3270,7 +3374,7 @@
 	  };
 	}
 
-	function instance$q($$self, $$props, $$invalidate) {
+	function instance$r($$self, $$props, $$invalidate) {
 	  let isDisabled;
 	  let isError;
 	  let isChecked;
@@ -3357,7 +3461,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$q, create_fragment$s, safe_not_equal, {
+	    }, instance$r, create_fragment$t, safe_not_equal, {
 	      name: 0,
 	      checked: 9,
 	      text: 1,
@@ -3555,7 +3659,7 @@
 	  };
 	}
 
-	function create_fragment$r(ctx) {
+	function create_fragment$s(ctx) {
 	  let div1;
 	  let t0;
 	  let div0;
@@ -3692,7 +3796,7 @@
 	  };
 	}
 
-	function instance$p($$self, $$props, $$invalidate) {
+	function instance$q($$self, $$props, $$invalidate) {
 	  let {
 	    leadingicon = null
 	  } = $$props;
@@ -3769,7 +3873,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$p, create_fragment$r, safe_not_equal, {
+	    }, instance$q, create_fragment$s, safe_not_equal, {
 	      leadingicon: 0,
 	      error: 7,
 	      deletable: 8,
@@ -3841,7 +3945,7 @@
 	customElements.define("goa-chip", Chip);
 	/* libs/web-components/src/components/container/Container.svelte generated by Svelte v3.49.0 */
 
-	function create_fragment$q(ctx) {
+	function create_fragment$r(ctx) {
 	  let div3;
 	  let header;
 	  let div0;
@@ -3936,7 +4040,7 @@
 	  };
 	}
 
-	function instance$o($$self, $$props, $$invalidate) {
+	function instance$p($$self, $$props, $$invalidate) {
 	  let _colored;
 
 	  let {
@@ -3978,7 +4082,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$o, create_fragment$q, safe_not_equal, {
+	    }, instance$p, create_fragment$r, safe_not_equal, {
 	      variant: 0,
 	      colored: 4,
 	      headingsize: 1,
@@ -4147,7 +4251,7 @@
 	const BIND$1 = "bind";
 	/* libs/web-components/src/components/dropdown/Dropdown.svelte generated by Svelte v3.49.0 */
 
-	function get_each_context$3(ctx, list, i) {
+	function get_each_context$4(ctx, list, i) {
 	  const child_ctx = ctx.slice();
 	  child_ctx[35] = list[i];
 	  child_ctx[37] = i;
@@ -4200,7 +4304,7 @@
 	} // (211:4) {#each options as option, index (option.value)}
 
 
-	function create_each_block$3(key_1, ctx) {
+	function create_each_block$4(key_1, ctx) {
 	  let li;
 	  let t0_value =
 	  /*option*/
@@ -4317,7 +4421,7 @@
 	  };
 	}
 
-	function create_fragment$p(ctx) {
+	function create_fragment$q(ctx) {
 	  let div1;
 	  let t0;
 	  let div0;
@@ -4346,9 +4450,9 @@
 	  ctx[35].value;
 
 	  for (let i = 0; i < each_value.length; i += 1) {
-	    let child_ctx = get_each_context$3(ctx, each_value, i);
+	    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$3(key, child_ctx));
+	    each_1_lookup.set(key, each_blocks[i] = create_each_block$4(key, child_ctx));
 	  }
 
 	  return {
@@ -4522,7 +4626,7 @@
 	        each_value =
 	        /*options*/
 	        ctx[9];
-	        each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, ul, destroy_block, create_each_block$3, null, get_each_context$3);
+	        each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, ul, destroy_block, create_each_block$4, null, get_each_context$4);
 	      }
 
 	      if (dirty[0] &
@@ -4586,7 +4690,7 @@
 
 	const MAX_HEIGHT = "300px";
 
-	function instance$n($$self, $$props, $$invalidate) {
+	function instance$o($$self, $$props, $$invalidate) {
 	  const showMenu = _async(function () {
 	    if (_disabled || isMenuVisible) {
 	      return;
@@ -4851,7 +4955,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$n, create_fragment$p, safe_not_equal, {
+	    }, instance$o, create_fragment$q, safe_not_equal, {
 	      name: 0,
 	      value: 19,
 	      leadingicon: 1,
@@ -4995,7 +5099,7 @@
 	customElements.define("goa-dropdown", Dropdown);
 	/* libs/web-components/src/components/dropdown/DropdownItem.svelte generated by Svelte v3.49.0 */
 
-	function create_fragment$o(ctx) {
+	function create_fragment$p(ctx) {
 	  return {
 	    c() {
 	      this.c = noop;
@@ -5009,7 +5113,7 @@
 	  };
 	}
 
-	function instance$m($$self, $$props, $$invalidate) {
+	function instance$n($$self, $$props, $$invalidate) {
 	  let {
 	    name = ""
 	  } = $$props;
@@ -5050,7 +5154,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$m, create_fragment$o, safe_not_equal, {
+	    }, instance$n, create_fragment$p, safe_not_equal, {
 	      name: 0,
 	      value: 1,
 	      label: 2
@@ -5110,7 +5214,7 @@
 	customElements.define("goa-dropdown-item", DropdownItem);
 	/* libs/web-components/src/components/flex-row/FlexRow.svelte generated by Svelte v3.49.0 */
 
-	function create_fragment$n(ctx) {
+	function create_fragment$o(ctx) {
 	  let div;
 	  let slot;
 	  return {
@@ -5149,7 +5253,7 @@
 	  };
 	}
 
-	function instance$l($$self, $$props, $$invalidate) {
+	function instance$m($$self, $$props, $$invalidate) {
 	  let _gap;
 
 	  let {
@@ -5179,7 +5283,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$l, create_fragment$n, safe_not_equal, {
+	    }, instance$m, create_fragment$o, safe_not_equal, {
 	      gap: 1
 	    }, null);
 
@@ -5215,7 +5319,7 @@
 	customElements.define("goa-flex-row", FlexRow);
 	/* libs/web-components/src/components/form-item/FormItem.svelte generated by Svelte v3.49.0 */
 
-	function create_if_block_2$5(ctx) {
+	function create_if_block_2$6(ctx) {
 	  let label_1;
 	  let t0;
 	  let t1;
@@ -5355,7 +5459,7 @@
 	  };
 	}
 
-	function create_fragment$m(ctx) {
+	function create_fragment$n(ctx) {
 	  let div1;
 	  let t0;
 	  let div0;
@@ -5363,7 +5467,7 @@
 	  let t2;
 	  let if_block0 =
 	  /*label*/
-	  ctx[0] && create_if_block_2$5(ctx);
+	  ctx[0] && create_if_block_2$6(ctx);
 	  let if_block1 =
 	  /*error*/
 	  ctx[2] && create_if_block_1$7(ctx);
@@ -5404,7 +5508,7 @@
 	        if (if_block0) {
 	          if_block0.p(ctx, dirty);
 	        } else {
-	          if_block0 = create_if_block_2$5(ctx);
+	          if_block0 = create_if_block_2$6(ctx);
 	          if_block0.c();
 	          if_block0.m(div1, t0);
 	        }
@@ -5457,7 +5561,7 @@
 	  };
 	}
 
-	function instance$k($$self, $$props, $$invalidate) {
+	function instance$l($$self, $$props, $$invalidate) {
 	  let isOptional;
 	  let {
 	    label = ""
@@ -5498,7 +5602,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$k, create_fragment$m, safe_not_equal, {
+	    }, instance$l, create_fragment$n, safe_not_equal, {
 	      label: 0,
 	      helptext: 1,
 	      error: 2,
@@ -5570,7 +5674,7 @@
 	customElements.define("goa-form-item", FormItem);
 	/* libs/web-components/src/components/hero-banner/HeroBanner.svelte generated by Svelte v3.49.0 */
 
-	function create_fragment$l(ctx) {
+	function create_fragment$m(ctx) {
 	  let div1;
 	  let goa_page_block;
 	  let h1;
@@ -5585,7 +5689,7 @@
 	      goa_page_block = element("goa-page-block");
 	      h1 = element("h1");
 	      t0 = text(
-	      /*title*/
+	      /*heading*/
 	      ctx[0]);
 	      t1 = space();
 	      div0 = element("div");
@@ -5593,10 +5697,10 @@
 	      t2 = space();
 	      slot1 = element("slot");
 	      this.c = noop;
-	      attr(h1, "role", "heading");
 	      attr(div0, "class", "goa-hero-banner-content");
 	      attr(div0, "role", "note");
 	      attr(slot1, "name", "actions");
+	      set_custom_element_data(goa_page_block, "width", "full");
 	      attr(div1, "class", "goa-hero");
 	      attr(div1, "data-testid", "background");
 	      set_style(div1, "background-image", "linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 40%, rgba(0, 0, 0, 0.6) 100%), url(" +
@@ -5620,9 +5724,9 @@
 
 	    p(ctx, [dirty]) {
 	      if (dirty &
-	      /*title*/
+	      /*heading*/
 	      1) set_data(t0,
-	      /*title*/
+	      /*heading*/
 	      ctx[0]);
 
 	      if (dirty &
@@ -5644,20 +5748,20 @@
 	  };
 	}
 
-	function instance$j($$self, $$props, $$invalidate) {
+	function instance$k($$self, $$props, $$invalidate) {
 	  let {
-	    title
+	    heading
 	  } = $$props;
 	  let {
 	    backgroundurl
 	  } = $$props;
 
 	  $$self.$$set = $$props => {
-	    if ('title' in $$props) $$invalidate(0, title = $$props.title);
+	    if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
 	    if ('backgroundurl' in $$props) $$invalidate(1, backgroundurl = $$props.backgroundurl);
 	  };
 
-	  return [title, backgroundurl];
+	  return [heading, backgroundurl];
 	}
 
 	class HeroBanner extends SvelteElement {
@@ -5668,8 +5772,8 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$j, create_fragment$l, safe_not_equal, {
-	      title: 0,
+	    }, instance$k, create_fragment$m, safe_not_equal, {
+	      heading: 0,
 	      backgroundurl: 1
 	    }, null);
 
@@ -5686,16 +5790,16 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["title", "backgroundurl"];
+	    return ["heading", "backgroundurl"];
 	  }
 
-	  get title() {
+	  get heading() {
 	    return this.$$.ctx[0];
 	  }
 
-	  set title(title) {
+	  set heading(heading) {
 	    this.$$set({
-	      title
+	      heading
 	    });
 	    flush();
 	  }
@@ -5764,7 +5868,7 @@
 	  };
 	}
 
-	function create_fragment$k(ctx) {
+	function create_fragment$l(ctx) {
 	  let div;
 	  let div_data_testid_value;
 	  let div_style_value;
@@ -5878,7 +5982,7 @@
 	  };
 	}
 
-	function instance$i($$self, $$props, $$invalidate) {
+	function instance$j($$self, $$props, $$invalidate) {
 	  let isInverted;
 
 	  let _size;
@@ -5893,13 +5997,13 @@
 	    theme = "outline"
 	  } = $$props;
 	  let {
-	    inverted
+	    inverted = "false"
 	  } = $$props;
 	  let {
-	    fillcolor
+	    fillcolor = ""
 	  } = $$props;
 	  let {
-	    hovercolor
+	    hovercolor = ""
 	  } = $$props;
 	  let {
 	    opacity = 1
@@ -5948,7 +6052,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$i, create_fragment$k, safe_not_equal, {
+	    }, instance$j, create_fragment$l, safe_not_equal, {
 	      type: 0,
 	      size: 8,
 	      theme: 1,
@@ -6068,7 +6172,7 @@
 	customElements.define("goa-icon", Icon);
 	/* libs/web-components/src/components/icon-button/IconButton.svelte generated by Svelte v3.49.0 */
 
-	function create_fragment$j(ctx) {
+	function create_fragment$k(ctx) {
 	  let button;
 	  let goa_icon;
 	  let mounted;
@@ -6223,7 +6327,7 @@
 	  }));
 	}
 
-	function instance$h($$self, $$props, $$invalidate) {
+	function instance$i($$self, $$props, $$invalidate) {
 	  let css;
 	  let isDisabled;
 	  let isInverted;
@@ -6308,7 +6412,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$h, create_fragment$j, safe_not_equal, {
+	    }, instance$i, create_fragment$k, safe_not_equal, {
 	      type: 0,
 	      size: 1,
 	      theme: 2,
@@ -6562,7 +6666,7 @@
 	    ctx[9] > 0) return create_if_block_1$6;
 	    if (
 	    /*value*/
-	    ctx[0].length > 0) return create_if_block_2$4;
+	    ctx[0].length > 0) return create_if_block_2$5;
 	  }
 
 	  let current_block_type = select_block_type(ctx);
@@ -6604,7 +6708,7 @@
 	} // (122:31) 
 
 
-	function create_if_block_2$4(ctx) {
+	function create_if_block_2$5(ctx) {
 	  let div;
 	  let t_value =
 	  /*value*/
@@ -6697,7 +6801,7 @@
 	  };
 	}
 
-	function create_fragment$i(ctx) {
+	function create_fragment$j(ctx) {
 	  let div1;
 	  let div0;
 	  let t0;
@@ -7017,7 +7121,7 @@
 	  }));
 	}
 
-	function instance$g($$self, $$props, $$invalidate) {
+	function instance$h($$self, $$props, $$invalidate) {
 	  let handlesTrailingIconClick;
 	  let isFocused;
 	  let isReadonly;
@@ -7181,7 +7285,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$g, create_fragment$i, safe_not_equal, {
+	    }, instance$h, create_fragment$j, safe_not_equal, {
 	      type: 1,
 	      name: 2,
 	      value: 0,
@@ -7520,7 +7624,7 @@
 	  ctx[0] && create_if_block_3$2(ctx);
 	  let if_block1 =
 	  /*isClosable*/
-	  ctx[5] && create_if_block_2$3(ctx);
+	  ctx[5] && create_if_block_2$4(ctx);
 
 	  function select_block_type(ctx, dirty) {
 	    if (
@@ -7624,7 +7728,7 @@
 	        if (if_block1) {
 	          if_block1.p(ctx, dirty);
 	        } else {
-	          if_block1 = create_if_block_2$3(ctx);
+	          if_block1 = create_if_block_2$4(ctx);
 	          if_block1.c();
 	          if_block1.m(div3, t2);
 	        }
@@ -7768,7 +7872,7 @@
 	} // (63:8) {#if isClosable}
 
 
-	function create_if_block_2$3(ctx) {
+	function create_if_block_2$4(ctx) {
 	  let div;
 	  let goa_icon_button;
 	  let mounted;
@@ -7849,7 +7953,7 @@
 	  };
 	}
 
-	function create_fragment$h(ctx) {
+	function create_fragment$i(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
@@ -7914,7 +8018,7 @@
 	  };
 	}
 
-	function instance$f($$self, $$props, $$invalidate) {
+	function instance$g($$self, $$props, $$invalidate) {
 	  let isClosable;
 	  let isScrollable;
 	  let isOpen;
@@ -8008,7 +8112,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$f, create_fragment$h, safe_not_equal, {
+	    }, instance$g, create_fragment$i, safe_not_equal, {
 	      heading: 0,
 	      closable: 9,
 	      scrollable: 10,
@@ -8205,7 +8309,7 @@
 	  };
 	}
 
-	function create_fragment$g(ctx) {
+	function create_fragment$h(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
@@ -8270,7 +8374,7 @@
 	  };
 	}
 
-	function instance$e($$self, $$props, $$invalidate) {
+	function instance$f($$self, $$props, $$invalidate) {
 	  let iconType;
 	  let {
 	    type
@@ -8304,7 +8408,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$e, create_fragment$g, safe_not_equal, {
+	    }, instance$f, create_fragment$h, safe_not_equal, {
 	      type: 0
 	    }, null);
 
@@ -8340,7 +8444,7 @@
 	customElements.define("goa-notification", Notification);
 	/* libs/web-components/src/layouts/PageLayout.svelte generated by Svelte v3.49.0 */
 
-	function create_fragment$f(ctx) {
+	function create_fragment$g(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -8373,7 +8477,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$f, safe_not_equal, {}, null);
+	    }, null, create_fragment$g, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -8398,7 +8502,7 @@
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*fullscreen*/
-	    ctx[6]) return 0;
+	    ctx[4]) return 0;
 	    if (
 	    /*inline*/
 	    ctx[5]) return 1;
@@ -8479,7 +8583,7 @@
 	    }
 
 	  };
-	} // (40:19) 
+	} // (39:19) 
 
 
 	function create_if_block_3$1(ctx) {
@@ -8502,13 +8606,13 @@
 	      ctx[0]);
 	      set_custom_element_data(goa_spinner, "size",
 	      /*spinnerSize*/
-	      ctx[4]);
+	      ctx[3]);
 	      set_custom_element_data(goa_spinner, "progress", goa_spinner_progress_value =
 	      /*progress*/
 	      ctx[2] || 0);
 	      attr(div, "class", div_class_value = "spinner-" +
 	      /*spinnerSize*/
-	      ctx[4]);
+	      ctx[3]);
 	      toggle_class(div, "inline",
 	      /*inline*/
 	      ctx[5]);
@@ -8532,10 +8636,10 @@
 
 	      if (dirty &
 	      /*spinnerSize*/
-	      16) {
+	      8) {
 	        set_custom_element_data(goa_spinner, "size",
 	        /*spinnerSize*/
-	        ctx[4]);
+	        ctx[3]);
 	      }
 
 	      if (dirty &
@@ -8563,15 +8667,15 @@
 
 	      if (dirty &
 	      /*spinnerSize*/
-	      16 && div_class_value !== (div_class_value = "spinner-" +
+	      8 && div_class_value !== (div_class_value = "spinner-" +
 	      /*spinnerSize*/
-	      ctx[4])) {
+	      ctx[3])) {
 	        attr(div, "class", div_class_value);
 	      }
 
 	      if (dirty &
 	      /*spinnerSize, inline*/
-	      48) {
+	      40) {
 	        toggle_class(div, "inline",
 	        /*inline*/
 	        ctx[5]);
@@ -8587,7 +8691,7 @@
 	    }
 
 	  };
-	} // (29:2) {#if fullscreen}
+	} // (28:2) {#if fullscreen}
 
 
 	function create_if_block_1$4(ctx) {
@@ -8601,7 +8705,7 @@
 	  let dispose;
 	  let if_block =
 	  /*message*/
-	  ctx[1] && create_if_block_2$2(ctx);
+	  ctx[1] && create_if_block_2$3(ctx);
 	  return {
 	    c() {
 	      div = element("div");
@@ -8613,13 +8717,13 @@
 	      ctx[0]);
 	      set_custom_element_data(goa_spinner, "size",
 	      /*spinnerSize*/
-	      ctx[4]);
+	      ctx[3]);
 	      set_custom_element_data(goa_spinner, "progress", goa_spinner_progress_value =
 	      /*progress*/
 	      ctx[2] || 0);
 	      toggle_class(div, "fullscreen",
 	      /*fullscreen*/
-	      ctx[6]);
+	      ctx[4]);
 	    },
 
 	    m(target, anchor) {
@@ -8648,10 +8752,10 @@
 
 	      if (!current || dirty &
 	      /*spinnerSize*/
-	      16) {
+	      8) {
 	        set_custom_element_data(goa_spinner, "size",
 	        /*spinnerSize*/
-	        ctx[4]);
+	        ctx[3]);
 	      }
 
 	      if (!current || dirty &
@@ -8668,7 +8772,7 @@
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
-	          if_block = create_if_block_2$2(ctx);
+	          if_block = create_if_block_2$3(ctx);
 	          if_block.c();
 	          if_block.m(div, null);
 	        }
@@ -8679,10 +8783,10 @@
 
 	      if (dirty &
 	      /*fullscreen*/
-	      64) {
+	      16) {
 	        toggle_class(div, "fullscreen",
 	        /*fullscreen*/
-	        ctx[6]);
+	        ctx[4]);
 	      }
 	    },
 
@@ -8714,7 +8818,7 @@
 	    }
 
 	  };
-	} // (43:6) {#if message}
+	} // (42:6) {#if message}
 
 
 	function create_if_block_4(ctx) {
@@ -8747,10 +8851,10 @@
 	    }
 
 	  };
-	} // (36:6) {#if message}
+	} // (35:6) {#if message}
 
 
-	function create_if_block_2$2(ctx) {
+	function create_if_block_2$3(ctx) {
 	  let div;
 	  let t;
 	  return {
@@ -8782,12 +8886,12 @@
 	  };
 	}
 
-	function create_fragment$e(ctx) {
+	function create_fragment$f(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
-	  /*ready*/
-	  ctx[3] && create_if_block$7(ctx);
+	  /*isVisible*/
+	  ctx[6] && create_if_block$7(ctx);
 	  return {
 	    c() {
 	      if (if_block) if_block.c();
@@ -8803,14 +8907,14 @@
 
 	    p(ctx, [dirty]) {
 	      if (
-	      /*ready*/
-	      ctx[3]) {
+	      /*isVisible*/
+	      ctx[6]) {
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 
 	          if (dirty &
-	          /*ready*/
-	          8) {
+	          /*isVisible*/
+	          64) {
 	            transition_in(if_block, 1);
 	          }
 	        } else {
@@ -8847,11 +8951,8 @@
 	  };
 	}
 
-	function instance$d($$self, $$props, $$invalidate) {
+	function instance$e($$self, $$props, $$invalidate) {
 	  let isVisible;
-	  let fullscreen;
-	  let inline;
-	  let spinnerSize;
 	  let {
 	    type = "infinite"
 	  } = $$props;
@@ -8870,13 +8971,15 @@
 	  let {
 	    visible = "false"
 	  } = $$props;
-	  let ready = false;
-	  onMount(function () {
-	    // there needs to be a slight delay in the render to prevent an invalid spinner size from being shown
-	    return _call(tick, function () {
-	      $$invalidate(3, ready = isVisible);
-	    });
-	  });
+	  let spinnerSize;
+	  let fullscreen;
+	  let inline;
+	  onMount(_async(function () {
+	    $$invalidate(3, spinnerSize = size === "small" ? "large" : "xlarge");
+	    $$invalidate(4, fullscreen = variant === "fullscreen");
+	    $$invalidate(5, inline = variant === "inline");
+	    return _await();
+	  }));
 
 	  $$self.$$set = $$props => {
 	    if ('type' in $$props) $$invalidate(0, type = $$props.type);
@@ -8891,29 +8994,11 @@
 	    if ($$self.$$.dirty &
 	    /*visible*/
 	    512) {
-	      isVisible = toBoolean(visible);
-	    }
-
-	    if ($$self.$$.dirty &
-	    /*variant*/
-	    128) {
-	      $$invalidate(6, fullscreen = variant === "fullscreen");
-	    }
-
-	    if ($$self.$$.dirty &
-	    /*variant*/
-	    128) {
-	      $$invalidate(5, inline = variant === "inline");
-	    }
-
-	    if ($$self.$$.dirty &
-	    /*size*/
-	    256) {
-	      $$invalidate(4, spinnerSize = size === "small" ? "large" : "xlarge");
+	      $$invalidate(6, isVisible = toBoolean(visible));
 	    }
 	  };
 
-	  return [type, message, progress, ready, spinnerSize, inline, fullscreen, variant, size, visible];
+	  return [type, message, progress, spinnerSize, fullscreen, inline, isVisible, variant, size, visible];
 	}
 
 	class CircularProgress extends SvelteElement {
@@ -8924,7 +9009,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$d, create_fragment$e, safe_not_equal, {
+	    }, instance$e, create_fragment$f, safe_not_equal, {
 	      type: 0,
 	      variant: 7,
 	      size: 8,
@@ -9021,14 +9106,14 @@
 	const BIND = "bind";
 	/* libs/web-components/src/components/radio-group/RadioGroup.svelte generated by Svelte v3.49.0 */
 
-	function get_each_context$2(ctx, list, i) {
+	function get_each_context$3(ctx, list, i) {
 	  const child_ctx = ctx.slice();
 	  child_ctx[14] = list[i];
 	  return child_ctx;
 	} // (51:2) {#each options as option (option.value) }
 
 
-	function create_each_block$2(key_1, ctx) {
+	function create_each_block$3(key_1, ctx) {
 	  let label;
 	  let input;
 	  let input_value_value;
@@ -9195,7 +9280,7 @@
 	  };
 	}
 
-	function create_fragment$d(ctx) {
+	function create_fragment$e(ctx) {
 	  let div;
 	  let slot;
 	  let t;
@@ -9211,9 +9296,9 @@
 	  ctx[14].value;
 
 	  for (let i = 0; i < each_value.length; i += 1) {
-	    let child_ctx = get_each_context$2(ctx, each_value, i);
+	    let child_ctx = get_each_context$3(ctx, each_value, i);
 	    let key = get_key(child_ctx);
-	    each_1_lookup.set(key, each_blocks[i] = create_each_block$2(key, child_ctx));
+	    each_1_lookup.set(key, each_blocks[i] = create_each_block$3(key, child_ctx));
 	  }
 
 	  return {
@@ -9256,7 +9341,7 @@
 	        each_value =
 	        /*options*/
 	        ctx[4];
-	        each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, destroy_block, create_each_block$2, null, get_each_context$2);
+	        each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, destroy_block, create_each_block$3, null, get_each_context$3);
 	      }
 
 	      if (dirty &
@@ -9294,7 +9379,7 @@
 	  };
 	}
 
-	function instance$c($$self, $$props, $$invalidate) {
+	function instance$d($$self, $$props, $$invalidate) {
 	  let isDisabled;
 	  let {
 	    name
@@ -9390,7 +9475,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$c, create_fragment$d, safe_not_equal, {
+	    }, instance$d, create_fragment$e, safe_not_equal, {
 	      name: 1,
 	      value: 0,
 	      orientation: 2,
@@ -9486,7 +9571,7 @@
 	customElements.define("goa-radio-group", RadioGroup);
 	/* libs/web-components/src/components/radio-group/RadioItem.svelte generated by Svelte v3.49.0 */
 
-	function create_fragment$c(ctx) {
+	function create_fragment$d(ctx) {
 	  return {
 	    c() {
 	      this.c = noop;
@@ -9500,7 +9585,7 @@
 	  };
 	}
 
-	function instance$b($$self, $$props, $$invalidate) {
+	function instance$c($$self, $$props, $$invalidate) {
 	  let {
 	    value
 	  } = $$props;
@@ -9538,7 +9623,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$b, create_fragment$c, safe_not_equal, {
+	    }, instance$c, create_fragment$d, safe_not_equal, {
 	      value: 0,
 	      label: 1,
 	      name: 2
@@ -9598,7 +9683,7 @@
 	customElements.define("goa-radio-item", RadioItem);
 	/* libs/web-components/src/components/scrollable/Scrollable.svelte generated by Svelte v3.49.0 */
 
-	function create_fragment$b(ctx) {
+	function create_fragment$c(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -9666,7 +9751,7 @@
 	  };
 	}
 
-	function instance$a($$self, $$props, $$invalidate) {
+	function instance$b($$self, $$props, $$invalidate) {
 	  let {
 	    direction = "vertical"
 	  } = $$props;
@@ -9698,7 +9783,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$a, create_fragment$b, safe_not_equal, {
+	    }, instance$b, create_fragment$c, safe_not_equal, {
 	      direction: 0,
 	      hpadding: 1,
 	      vpadding: 2,
@@ -9816,7 +9901,7 @@
 	  let t4;
 	  let if_block =
 	  /*feedbackurl*/
-	  ctx[2] && create_if_block_2$1(ctx);
+	  ctx[2] && create_if_block_2$2(ctx);
 	  return {
 	    c() {
 	      div0 = element("div");
@@ -9869,7 +9954,7 @@
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
-	          if_block = create_if_block_2$1(ctx);
+	          if_block = create_if_block_2$2(ctx);
 	          if_block.c();
 	          if_block.m(div1, null);
 	        }
@@ -9890,7 +9975,7 @@
 	} // (52:6) {#if feedbackurl}
 
 
-	function create_if_block_2$1(ctx) {
+	function create_if_block_2$2(ctx) {
 	  let span;
 	  let t0;
 	  let a;
@@ -9965,7 +10050,7 @@
 	  };
 	}
 
-	function create_fragment$a(ctx) {
+	function create_fragment$b(ctx) {
 	  let header;
 	  let t0;
 	  let show_if = ["alpha", "beta"].includes(
@@ -10074,7 +10159,7 @@
 	  return val[0].toUpperCase() + val.slice(1);
 	}
 
-	function instance$9($$self, $$props, $$invalidate) {
+	function instance$a($$self, $$props, $$invalidate) {
 	  let {
 	    level
 	  } = $$props;
@@ -10102,7 +10187,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$9, create_fragment$a, safe_not_equal, {
+	    }, instance$a, create_fragment$b, safe_not_equal, {
 	      level: 0,
 	      version: 1,
 	      feedbackurl: 2
@@ -10162,6 +10247,13 @@
 	customElements.define("goa-microsite-header", MicrositeHeader);
 	/* libs/web-components/src/components/skeleton/Skeleton.svelte generated by Svelte v3.49.0 */
 
+	function get_each_context$2(ctx, list, i) {
+	  const child_ctx = ctx.slice();
+	  child_ctx[4] = list[i];
+	  return child_ctx;
+	} // (33:0) {:else}
+
+
 	function create_else_block(ctx) {
 	  let div;
 	  let div_class_value;
@@ -10170,9 +10262,9 @@
 	      div = element("div");
 	      attr(div, "class", div_class_value = "skeleton " +
 	      /*type*/
-	      ctx[2] + " " + `${
+	      ctx[3] + " " + `${
       /*type*/
-      ctx[2]}-${
+      ctx[3]}-${
       /*size*/
       ctx[1]}`);
 	    },
@@ -10184,26 +10276,122 @@
 	    p(ctx, dirty) {
 	      if (dirty &
 	      /*type, size*/
-	      6 && div_class_value !== (div_class_value = "skeleton " +
+	      10 && div_class_value !== (div_class_value = "skeleton " +
 	      /*type*/
-	      ctx[2] + " " + `${
+	      ctx[3] + " " + `${
       /*type*/
-      ctx[2]}-${
+      ctx[3]}-${
       /*size*/
       ctx[1]}`)) {
 	        attr(div, "class", div_class_value);
 	      }
 	    },
 
-	    i: noop,
-	    o: noop,
+	    i: noop,
+	    o: noop,
+
+	    d(detaching) {
+	      if (detaching) detach(div);
+	    }
+
+	  };
+	} // (29:27) 
+
+
+	function create_if_block_2$1(ctx) {
+	  let each_1_anchor;
+	  let current;
+	  let each_value = Array(
+	  /*count*/
+	  ctx[2]);
+	  let each_blocks = [];
+
+	  for (let i = 0; i < each_value.length; i += 1) {
+	    each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
+	  }
+
+	  const out = i => transition_out(each_blocks[i], 1, 1, () => {
+	    each_blocks[i] = null;
+	  });
+
+	  return {
+	    c() {
+	      for (let i = 0; i < each_blocks.length; i += 1) {
+	        each_blocks[i].c();
+	      }
+
+	      each_1_anchor = empty();
+	    },
+
+	    m(target, anchor) {
+	      for (let i = 0; i < each_blocks.length; i += 1) {
+	        each_blocks[i].m(target, anchor);
+	      }
+
+	      insert(target, each_1_anchor, anchor);
+	      current = true;
+	    },
+
+	    p(ctx, dirty) {
+	      if (dirty &
+	      /*size, count*/
+	      6) {
+	        each_value = Array(
+	        /*count*/
+	        ctx[2]);
+	        let i;
+
+	        for (i = 0; i < each_value.length; i += 1) {
+	          const child_ctx = get_each_context$2(ctx, each_value, i);
+
+	          if (each_blocks[i]) {
+	            each_blocks[i].p(child_ctx, dirty);
+	            transition_in(each_blocks[i], 1);
+	          } else {
+	            each_blocks[i] = create_each_block$2(child_ctx);
+	            each_blocks[i].c();
+	            transition_in(each_blocks[i], 1);
+	            each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor);
+	          }
+	        }
+
+	        group_outros();
+
+	        for (i = each_value.length; i < each_blocks.length; i += 1) {
+	          out(i);
+	        }
+
+	        check_outros();
+	      }
+	    },
+
+	    i(local) {
+	      if (current) return;
+
+	      for (let i = 0; i < each_value.length; i += 1) {
+	        transition_in(each_blocks[i]);
+	      }
+
+	      current = true;
+	    },
+
+	    o(local) {
+	      each_blocks = each_blocks.filter(Boolean);
+
+	      for (let i = 0; i < each_blocks.length; i += 1) {
+	        transition_out(each_blocks[i]);
+	      }
+
+	      current = false;
+	    },
 
 	    d(detaching) {
-	      if (detaching) detach(div);
+	      destroy_each(each_blocks, detaching);
+	      if (detaching) detach(each_1_anchor);
 	    }
 
 	  };
-	} // (20:29) 
+	} // (19:29) 
 
 
 	function create_if_block_1$2(ctx) {
@@ -10325,7 +10513,7 @@
 	    }
 
 	  };
-	} // (10:0) {#if type === "card"}
+	} // (11:0) {#if type === "card"}
 
 
 	function create_if_block$5(ctx) {
@@ -10336,10 +10524,6 @@
 	  let skeleton1;
 	  let t1;
 	  let skeleton2;
-	  let t2;
-	  let skeleton3;
-	  let t3;
-	  let skeleton4;
 	  let div1_class_value;
 	  let current;
 	  skeleton0 = new Skeleton({
@@ -10360,26 +10544,11 @@
 	  });
 	  skeleton2 = new Skeleton({
 	    props: {
-	      type: "text",
-	      size:
-	      /*size*/
-	      ctx[1]
-	    }
-	  });
-	  skeleton3 = new Skeleton({
-	    props: {
-	      type: "text",
-	      size:
-	      /*size*/
-	      ctx[1]
-	    }
-	  });
-	  skeleton4 = new Skeleton({
-	    props: {
-	      type: "text",
+	      type: "lines",
 	      size:
 	      /*size*/
-	      ctx[1]
+	      ctx[1],
+	      count: 3
 	    }
 	  });
 	  return {
@@ -10391,10 +10560,6 @@
 	      create_component(skeleton1.$$.fragment);
 	      t1 = space();
 	      create_component(skeleton2.$$.fragment);
-	      t2 = space();
-	      create_component(skeleton3.$$.fragment);
-	      t3 = space();
-	      create_component(skeleton4.$$.fragment);
 	      attr(div0, "class", "card-content");
 	      attr(div1, "class", div1_class_value = "card card-" +
 	      /*size*/
@@ -10412,10 +10577,6 @@
 	      mount_component(skeleton1, div0, null);
 	      append(div0, t1);
 	      mount_component(skeleton2, div0, null);
-	      append(div0, t2);
-	      mount_component(skeleton3, div0, null);
-	      append(div0, t3);
-	      mount_component(skeleton4, div0, null);
 	      current = true;
 	    },
 
@@ -10441,20 +10602,6 @@
 	      /*size*/
 	      ctx[1];
 	      skeleton2.$set(skeleton2_changes);
-	      const skeleton3_changes = {};
-	      if (dirty &
-	      /*size*/
-	      2) skeleton3_changes.size =
-	      /*size*/
-	      ctx[1];
-	      skeleton3.$set(skeleton3_changes);
-	      const skeleton4_changes = {};
-	      if (dirty &
-	      /*size*/
-	      2) skeleton4_changes.size =
-	      /*size*/
-	      ctx[1];
-	      skeleton4.$set(skeleton4_changes);
 
 	      if (!current || dirty &
 	      /*size*/
@@ -10478,8 +10625,6 @@
 	      transition_in(skeleton0.$$.fragment, local);
 	      transition_in(skeleton1.$$.fragment, local);
 	      transition_in(skeleton2.$$.fragment, local);
-	      transition_in(skeleton3.$$.fragment, local);
-	      transition_in(skeleton4.$$.fragment, local);
 	      current = true;
 	    },
 
@@ -10487,8 +10632,6 @@
 	      transition_out(skeleton0.$$.fragment, local);
 	      transition_out(skeleton1.$$.fragment, local);
 	      transition_out(skeleton2.$$.fragment, local);
-	      transition_out(skeleton3.$$.fragment, local);
-	      transition_out(skeleton4.$$.fragment, local);
 	      current = false;
 	    },
 
@@ -10497,29 +10640,88 @@
 	      destroy_component(skeleton0);
 	      destroy_component(skeleton1);
 	      destroy_component(skeleton2);
-	      destroy_component(skeleton3);
-	      destroy_component(skeleton4);
+	    }
+
+	  };
+	} // (30:2) {#each Array(count) as _item}
+
+
+	function create_each_block$2(ctx) {
+	  let skeleton;
+	  let current;
+	  skeleton = new Skeleton({
+	    props: {
+	      type: "text",
+	      size:
+	      /*size*/
+	      ctx[1],
+	      count:
+	      /*count*/
+	      ctx[2]
+	    }
+	  });
+	  return {
+	    c() {
+	      create_component(skeleton.$$.fragment);
+	    },
+
+	    m(target, anchor) {
+	      mount_component(skeleton, target, anchor);
+	      current = true;
+	    },
+
+	    p(ctx, dirty) {
+	      const skeleton_changes = {};
+	      if (dirty &
+	      /*size*/
+	      2) skeleton_changes.size =
+	      /*size*/
+	      ctx[1];
+	      if (dirty &
+	      /*count*/
+	      4) skeleton_changes.count =
+	      /*count*/
+	      ctx[2];
+	      skeleton.$set(skeleton_changes);
+	    },
+
+	    i(local) {
+	      if (current) return;
+	      transition_in(skeleton.$$.fragment, local);
+	      current = true;
+	    },
+
+	    o(local) {
+	      transition_out(skeleton.$$.fragment, local);
+	      current = false;
+	    },
+
+	    d(detaching) {
+	      destroy_component(skeleton, detaching);
 	    }
 
 	  };
 	}
 
-	function create_fragment$9(ctx) {
+	function create_fragment$a(ctx) {
 	  let current_block_type_index;
 	  let if_block;
 	  let if_block_anchor;
 	  let current;
-	  const if_block_creators = [create_if_block$5, create_if_block_1$2, create_else_block];
+	  const if_block_creators = [create_if_block$5, create_if_block_1$2, create_if_block_2$1, create_else_block];
 	  const if_blocks = [];
 
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*type*/
-	    ctx[2] === "card") return 0;
+	    ctx[3] === "card") return 0;
+	    if (
+	    /*type*/
+	    ctx[3] === "profile") return 1;
 	    if (
 	    /*type*/
-	    ctx[2] === "profile") return 1;
-	    return 2;
+	    ctx[3] === "lines") return 2;
+	    return 3;
 	  }
 
 	  current_block_type_index = select_block_type(ctx);
@@ -10582,13 +10784,16 @@
 	  };
 	}
 
-	function instance$8($$self, $$props, $$invalidate) {
+	function instance$9($$self, $$props, $$invalidate) {
 	  let {
 	    width = 320
 	  } = $$props;
 	  let {
 	    size = 1
 	  } = $$props;
+	  let {
+	    count = 3
+	  } = $$props;
 	  let {
 	    type
 	  } = $$props;
@@ -10596,24 +10801,26 @@
 	  $$self.$$set = $$props => {
 	    if ('width' in $$props) $$invalidate(0, width = $$props.width);
 	    if ('size' in $$props) $$invalidate(1, size = $$props.size);
-	    if ('type' in $$props) $$invalidate(2, type = $$props.type);
+	    if ('count' in $$props) $$invalidate(2, count = $$props.count);
+	    if ('type' in $$props) $$invalidate(3, type = $$props.type);
 	  };
 
-	  return [width, size, type];
+	  return [width, size, count, type];
 	}
 
 	class Skeleton extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@keyframes pulse{0%{opacity:0.5}50%{opacity:1}100%{opacity:0.5}}.skeleton{background-color:var(--color-gray-100);animation:pulse 2s infinite ease-in-out;overflow:hidden;margin:10px 0}.image,.image-1{background-color:var(--color-gray-100);flex:1 1 100px;height:100px;margin:0}.image-2{height:140px}.image-3{height:200px}.image-4{height:300px}.text,.text-1,.text-2,.text-4,.text-4{width:100%;height:.75rem;border-radius:0.25rem}.title,.title-1,.title-2{width:100%;height:.75rem;border-radius:0.25rem}.title-3{height:.8rem}.title-4{height:1rem}.text-small,.text-small-1{width:30%;height:6px;border-radius:2px}.text-small-2{width:40%;height:8px;border-radius:2px}.text-small-3{width:50%;height:10px;border-radius:3px}.text-small-4{width:70%;height:12px;border-radius:4px}.paragraph{width:100%;height:70px;border-radius:4px}.header,.header-1{width:50%;height:18px;margin-bottom:12px;border-radius:0.25rem}.header-2{width:60%;height:20px;margin-bottom:14px;border-radius:0.25rem}.header-3{width:70%;height:22px;margin-bottom:16px;border-radius:0.25rem}.header-4{width:80%;height:24px;margin-bottom:18px;border-radius:0.3rem}.avatar{display:inline-block}.avatar,.avatar-1{width:40px;height:40px;border-radius:50%}.avatar-2{width:60px;height:60px;border-radius:50%}.avatar-3{width:80px;height:80px;border-radius:50%}.avatar-4{width:120px;height:120px;border-radius:50%}.thumbnail{display:inline-block}.thumbnail,.thumbnail-1{width:40px;height:40px;border-radius:4px}.thumbnail-2{width:60px;height:60px;border-radius:4px}.thumbnail-3{width:80px;height:80px;border-radius:4px}.thumbnail-4{width:120px;height:120px;border-radius:4px}.card{display:inline-block}.card,.card-1,.card-2,.card-3,.card-4{border:1px solid var(--color-gray-100);border-radius:4px}.card{width:100%}@media(min-width: 320px){.card{width:var(--width)}}.card-content{flex:1 1 auto;padding:1rem}.profile{display:flex;flex-direction:row;align-items:center}.profile-1{max-width:280px;gap:1rem}.profile-2{max-width:360px;gap:1rem}.profile-3{max-width:480px;gap:1rem}.profile-4{max-width:560px;gap:1rem}.profile .profile-avatar{flex-shrink:0}.profile .profile-name{flex:1 1 auto}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@keyframes pulse{0%{opacity:0.5}50%{opacity:1}100%{opacity:0.5}}.skeleton{background-color:var(--color-gray-100);animation:pulse 2s infinite ease-in-out;overflow:hidden;margin:10px 0}.image,.image-1{background-color:var(--color-gray-100);flex:1 1 100px;height:100px;margin:0}.image-2{height:140px}.image-3{height:200px}.image-4{height:300px}.text,.text-1,.text-2,.text-3,.text-4{width:100%;height:.75rem;border-radius:0.25rem;margin:6px 0}.title,.title-1,.title-2{width:100%;height:.75rem;border-radius:0.25rem}.title-3{height:.8rem}.title-4{height:1rem}.text-small,.text-small-1{width:30%;height:6px;border-radius:2px}.text-small-2{width:40%;height:8px;border-radius:2px}.text-small-3{width:50%;height:10px;border-radius:3px}.text-small-4{width:70%;height:12px;border-radius:4px}.paragraph{width:100%;height:70px;border-radius:4px}.header,.header-1{width:50%;height:18px;margin:12px 0;border-radius:0.25rem}.header-2{width:60%;height:20px;margin:14px 0;border-radius:0.25rem}.header-3{width:70%;height:22px;margin:16px 0;border-radius:0.25rem}.header-4{width:80%;height:24px;margin:18px 0;border-radius:0.3rem}.avatar{display:inline-block}.avatar,.avatar-1{width:40px;height:40px;border-radius:50%}.avatar-2{width:60px;height:60px;border-radius:50%}.avatar-3{width:80px;height:80px;border-radius:50%}.avatar-4{width:120px;height:120px;border-radius:50%}.thumbnail{display:inline-block}.thumbnail,.thumbnail-1{width:40px;height:40px;border-radius:4px}.thumbnail-2{width:60px;height:60px;border-radius:4px}.thumbnail-3{width:80px;height:80px;border-radius:4px}.thumbnail-4{width:120px;height:120px;border-radius:4px}.card{display:inline-block}.card,.card-1,.card-2,.card-3,.card-4{border:1px solid var(--color-gray-100);border-radius:4px}.card{width:100%}@media(min-width: 320px){.card{width:var(--width)}}.card-content{flex:1 1 auto;padding:1rem}.profile{display:flex;flex-direction:row;align-items:center}.profile-1{max-width:280px;gap:1rem}.profile-2{max-width:360px;gap:1rem}.profile-3{max-width:480px;gap:1rem}.profile-4{max-width:560px;gap:1rem}.profile .profile-avatar{flex-shrink:0}.profile .profile-name{flex:1 1 auto}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$8, create_fragment$9, safe_not_equal, {
+	    }, instance$9, create_fragment$a, safe_not_equal, {
 	      width: 0,
 	      size: 1,
-	      type: 2
+	      count: 2,
+	      type: 3
 	    }, null);
 
 	    if (options) {
@@ -10629,7 +10836,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["width", "size", "type"];
+	    return ["width", "size", "count", "type"];
 	  }
 
 	  get width() {
@@ -10654,10 +10861,21 @@
 	    flush();
 	  }
 
-	  get type() {
+	  get count() {
 	    return this.$$.ctx[2];
 	  }
 
+	  set count(count) {
+	    this.$$set({
+	      count
+	    });
+	    flush();
+	  }
+
+	  get type() {
+	    return this.$$.ctx[3];
+	  }
+
 	  set type(type) {
 	    this.$$set({
 	      type
@@ -10980,7 +11198,7 @@
 	  };
 	}
 
-	function create_fragment$8(ctx) {
+	function create_fragment$9(ctx) {
 	  let if_block_anchor;
 	  let if_block =
 	  /*ready*/
@@ -11025,7 +11243,7 @@
 	  };
 	}
 
-	function instance$7($$self, $$props, $$invalidate) {
+	function instance$8($$self, $$props, $$invalidate) {
 	  let diameter;
 	  let strokewidth;
 	  let radius;
@@ -11150,7 +11368,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$7, create_fragment$8, safe_not_equal, {
+	    }, instance$8, create_fragment$9, safe_not_equal, {
 	      size: 10,
 	      invert: 0,
 	      type: 1,
@@ -11378,7 +11596,7 @@
 	  };
 	}
 
-	function create_fragment$7(ctx) {
+	function create_fragment$8(ctx) {
 	  let div;
 	  let textarea;
 	  let t;
@@ -11546,7 +11764,7 @@
 	  };
 	}
 
-	function instance$6($$self, $$props, $$invalidate) {
+	function instance$7($$self, $$props, $$invalidate) {
 	  let isError;
 	  let isDisabled;
 	  let isReadonly;
@@ -11654,7 +11872,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$6, create_fragment$7, safe_not_equal, {
+	    }, instance$7, create_fragment$8, safe_not_equal, {
 	      name: 0,
 	      value: 1,
 	      placeholder: 2,
@@ -11810,7 +12028,7 @@
 	customElements.define("goa-textarea", TextArea);
 	/* libs/web-components/src/components/focus-trap/FocusTrap.svelte generated by Svelte v3.49.0 */
 
-	function create_fragment$6(ctx) {
+	function create_fragment$7(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -11866,7 +12084,7 @@
 	  }
 	}
 
-	function instance$5($$self, $$props, $$invalidate) {
+	function instance$6($$self, $$props, $$invalidate) {
 	  let isOpen;
 	  let ignoreFocusChanges = false;
 	  let lastFocus;
@@ -12039,7 +12257,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$5, create_fragment$6, safe_not_equal, {
+	    }, instance$6, create_fragment$7, safe_not_equal, {
 	      open: 1
 	    }, null);
 
@@ -12094,7 +12312,7 @@
 	  };
 	}
 
-	function create_fragment$5(ctx) {
+	function create_fragment$6(ctx) {
 	  var _ctx$;
 
 	  let footer;
@@ -12219,7 +12437,7 @@
 	  };
 	}
 
-	function instance$4($$self, $$props, $$invalidate) {
+	function instance$5($$self, $$props, $$invalidate) {
 	  let rootEl;
 	  let navLinks;
 	  let metaLinks;
@@ -12246,12 +12464,12 @@
 	class Footer extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>.app-footer{background-color:var(--color-gray-100);padding:2rem;margin-top:2rem;border-top:2px solid var(--color-gray-200);border-bottom:1rem solid var(--goa-color-brand)}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;gap:1.5rem;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>.app-footer{background-color:var(--color-gray-100);padding:2rem;margin-top:2rem;border-top:2px solid var(--color-gray-200);border-bottom:1rem solid var(--goa-color-brand)}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$4, create_fragment$5, safe_not_equal, {}, null);
+	    }, instance$5, create_fragment$6, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -12269,7 +12487,7 @@
 	  const child_ctx = ctx.slice();
 	  child_ctx[5] = list[i];
 	  return child_ctx;
-	} // (89:2) {#if name}
+	} // (90:2) {#if name}
 
 
 	function create_if_block$1(ctx) {
@@ -12311,7 +12529,7 @@
 	    }
 
 	  };
-	} // (106:4) {#each children as child}
+	} // (107:4) {#each children as child}
 
 
 	function create_each_block$1(ctx) {
@@ -12361,7 +12579,7 @@
 	  };
 	}
 
-	function create_fragment$4(ctx) {
+	function create_fragment$5(ctx) {
 	  let section;
 	  let t0;
 	  let div;
@@ -12508,7 +12726,7 @@
 	  };
 	}
 
-	function instance$3($$self, $$props, $$invalidate) {
+	function instance$4($$self, $$props, $$invalidate) {
 	  let {
 	    name = ""
 	  } = $$props;
@@ -12519,6 +12737,7 @@
 	  let children = [];
 	  onMount(function () {
 	    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;
@@ -12565,7 +12784,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$3, create_fragment$4, safe_not_equal, {
+	    }, instance$4, create_fragment$5, safe_not_equal, {
 	      name: 0,
 	      maxcolumncount: 1
 	    }, null);
@@ -12667,7 +12886,7 @@
 	  };
 	}
 
-	function create_fragment$3(ctx) {
+	function create_fragment$4(ctx) {
 	  let section;
 	  let div;
 	  let t;
@@ -12755,7 +12974,7 @@
 	  };
 	}
 
-	function instance$2($$self, $$props, $$invalidate) {
+	function instance$3($$self, $$props, $$invalidate) {
 	  let rootEl;
 	  let children = [];
 	  onMount(function () {
@@ -12790,7 +13009,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$2, create_fragment$3, safe_not_equal, {}, null);
+	    }, instance$3, create_fragment$4, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -12802,6 +13021,111 @@
 	}
 
 	customElements.define("goa-app-footer-meta-section", FooterMetaSection);
+	/* libs/web-components/src/components/flex-column/FlexColumn.svelte generated by Svelte v3.49.0 */
+
+	function create_fragment$3(ctx) {
+	  let div;
+	  let slot;
+	  return {
+	    c() {
+	      div = element("div");
+	      slot = element("slot");
+	      this.c = noop;
+	      attr(div, "class", "goa-flex-col");
+	      set_style(div, "gap",
+	      /*_gap*/
+	      ctx[0]);
+	    },
+
+	    m(target, anchor) {
+	      insert(target, div, anchor);
+	      append(div, slot);
+	    },
+
+	    p(ctx, [dirty]) {
+	      if (dirty &
+	      /*_gap*/
+	      1) {
+	        set_style(div, "gap",
+	        /*_gap*/
+	        ctx[0]);
+	      }
+	    },
+
+	    i: noop,
+	    o: noop,
+
+	    d(detaching) {
+	      if (detaching) detach(div);
+	    }
+
+	  };
+	}
+
+	function instance$2($$self, $$props, $$invalidate) {
+	  let _gap;
+
+	  let {
+	    gap = ""
+	  } = $$props;
+
+	  $$self.$$set = $$props => {
+	    if ('gap' in $$props) $$invalidate(1, gap = $$props.gap);
+	  };
+
+	  $$self.$$.update = () => {
+	    if ($$self.$$.dirty &
+	    /*gap*/
+	    2) {
+	      $$invalidate(0, _gap = gap === 'small' ? '1rem' : gap === 'medium' ? '2rem' : gap === 'large' ? '3rem' : '0');
+	    }
+	  };
+
+	  return [_gap, gap];
+	}
+
+	class FlexColumn extends SvelteElement {
+	  constructor(options) {
+	    super();
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);margin-bottom:3rem}.goa-flex-col{display:flex;flex-direction:column;gap:var(--gap)}</style>`;
+	    init(this, {
+	      target: this.shadowRoot,
+	      props: attribute_to_object(this.attributes),
+	      customElement: true
+	    }, instance$2, create_fragment$3, safe_not_equal, {
+	      gap: 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 ["gap"];
+	  }
+
+	  get gap() {
+	    return this.$$.ctx[1];
+	  }
+
+	  set gap(gap) {
+	    this.$$set({
+	      gap
+	    });
+	    flush();
+	  }
+
+	}
+
+	customElements.define("goa-flex-col", FlexColumn);
 	/* libs/web-components/src/components/container/ContainerWrapper.test.svelte generated by Svelte v3.49.0 */
 
 	function create_if_block_1(ctx) {
@@ -13500,11 +13824,11 @@
 	};
 
 	var GoAAppHeader = function GoAAppHeader(_a) {
-	  var title = _a.title,
+	  var heading = _a.heading,
 	      url = _a.url,
 	      children = _a.children;
 	  return jsxRuntime.jsx("goa-app-header", __assign({
-	    title: title,
+	    heading: heading,
 	    url: url
 	  }, {
 	    children: children
@@ -13601,12 +13925,12 @@
 	};
 
 	var GoACallout = function GoACallout(_a) {
-	  var title = _a.title,
+	  var heading = _a.heading,
 	      _b = _a.type,
 	      type = _b === void 0 ? "information" : _b,
 	      children = _a.children;
 	  return jsxRuntime.jsx("goa-callout", __assign({
-	    title: title,
+	    heading: heading,
 	    type: type
 	  }, {
 	    children: children
@@ -13810,11 +14134,11 @@
 	};
 
 	var GoAHeroBanner = function GoAHeroBanner(_a) {
-	  var title = _a.title,
+	  var heading = _a.heading,
 	      backgroundUrl = _a.backgroundUrl,
 	      children = _a.children;
 	  return jsxRuntime.jsx("goa-hero-banner", __assign({
-	    title: title,
+	    heading: heading,
 	    backgroundurl: backgroundUrl
 	  }, {
 	    children: children
@@ -14094,6 +14418,12 @@
 	  }, void 0);
 	};
 
+	function GoAPage(props) {
+	  return jsxRuntime.jsx("goa-page", {
+	    children: props.children
+	  }, void 0);
+	}
+
 	function GoAAppFooter(_a) {
 	  var children = _a.children;
 	  return jsxRuntime.jsx("goa-app-footer", {
@@ -14134,12 +14464,6 @@
 	  }), void 0);
 	};
 
-	function GoAPage(props) {
-	  return jsxRuntime.jsx("goa-page", {
-	    children: props.children
-	  }, void 0);
-	}
-
 	function GoADivider(props) {
 	  return jsxRuntime.jsx("goa-divider", {
 	    spacing: props.spacing