@abgov/react-components 4.0.0-alpha.21 → 4.0.0-alpha.22

package/react-components.esm.js

@@ -1011,7 +1011,7 @@ function isValidDimension(value) {
 /* 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;
@@ -1051,7 +1051,7 @@ function create_fragment$D(ctx) {
   };
 }
 
-function instance$y($$self, $$props, $$invalidate) {
+function instance$z($$self, $$props, $$invalidate) {
   const Sizes = {
     "full": "100%"
   };
@@ -1092,7 +1092,7 @@ class PageBlock extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$y, create_fragment$D, safe_not_equal, {
+    }, instance$z, create_fragment$E, safe_not_equal, {
       width: 1,
       _width: 0
     }, null);
@@ -1140,8 +1140,64 @@ class PageBlock extends SvelteElement {
 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;
@@ -1151,11 +1207,8 @@ function create_fragment$C(ctx) {
   let t1;
   let span;
   let t2;
-  let t3;
-  let div0;
   return {
     c() {
-      div1 = element("div");
       a = element("a");
       img0 = element("img");
       t0 = space();
@@ -1163,12 +1216,8 @@ function create_fragment$C(ctx) {
       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);
@@ -1178,40 +1227,89 @@ function create_fragment$C(ctx) {
       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 &
@@ -1228,29 +1326,30 @@ function create_fragment$C(ctx) {
 
     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 {
@@ -1261,9 +1360,9 @@ class AppHeader extends SvelteElement {
       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);
 
@@ -1280,27 +1379,27 @@ class AppHeader extends SvelteElement {
   }
 
   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();
   }
@@ -1354,7 +1453,7 @@ function create_else_block$3(ctx) {
     }
 
   };
-} // (35:2) {#if showIcon}
+} // (41:2) {#if showIcon}
 
 
 function create_if_block_1$b(ctx) {
@@ -1364,7 +1463,7 @@ function create_if_block_1$b(ctx) {
       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");
     },
 
@@ -1375,10 +1474,10 @@ function create_if_block_1$b(ctx) {
     p(ctx, dirty) {
       if (dirty &
       /*iconType*/
-      8) {
+      16) {
         set_custom_element_data(goa_icon, "type",
         /*iconType*/
-        ctx[3]);
+        ctx[4]);
       }
     },
 
@@ -1387,7 +1486,7 @@ function create_if_block_1$b(ctx) {
     }
 
   };
-} // (40:2) {#if content}
+} // (46:2) {#if content}
 
 
 function create_if_block$h(ctx) {
@@ -1422,7 +1521,7 @@ function create_if_block$h(ctx) {
   };
 }
 
-function create_fragment$B(ctx) {
+function create_fragment$C(ctx) {
   let div;
   let t;
   let div_class_value;
@@ -1430,7 +1529,7 @@ function create_fragment$B(ctx) {
   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;
   }
 
@@ -1455,7 +1554,7 @@ function create_fragment$B(ctx) {
       ctx[0]);
       toggle_class(div, "icon-only",
       /*showIcon*/
-      ctx[4] && !
+      ctx[3] && !
       /*content*/
       ctx[2]);
     },
@@ -1513,10 +1612,10 @@ function create_fragment$B(ctx) {
 
       if (dirty &
       /*type, showIcon, content*/
-      21) {
+      13) {
         toggle_class(div, "icon-only",
         /*showIcon*/
-        ctx[4] && !
+        ctx[3] && !
         /*content*/
         ctx[2]);
       }
@@ -1534,7 +1633,7 @@ function create_fragment$B(ctx) {
   };
 }
 
-function instance$w($$self, $$props, $$invalidate) {
+function instance$x($$self, $$props, $$invalidate) {
   let showIcon;
   let iconType;
   let {
@@ -1549,6 +1648,11 @@ function instance$w($$self, $$props, $$invalidate) {
   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);
@@ -1562,13 +1666,13 @@ function instance$w($$self, $$props, $$invalidate) {
     /*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",
@@ -1581,7 +1685,7 @@ function instance$w($$self, $$props, $$invalidate) {
     }
   };
 
-  return [type, testid, content, iconType, showIcon, icon];
+  return [type, testid, content, showIcon, iconType, icon];
 }
 
 class Badge extends SvelteElement {
@@ -1592,7 +1696,7 @@ class Badge extends SvelteElement {
       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,
@@ -1671,7 +1775,7 @@ function create_else_block$2(ctx) {
   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);
@@ -1703,7 +1807,7 @@ function create_else_block$2(ctx) {
         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);
         }
@@ -1775,7 +1879,7 @@ function create_if_block$g(ctx) {
 } // (61:4) {#if leadingicon}
 
 
-function create_if_block_2$6(ctx) {
+function create_if_block_2$7(ctx) {
   let goa_icon;
   return {
     c() {
@@ -1862,7 +1966,7 @@ function create_if_block_1$a(ctx) {
   };
 }
 
-function create_fragment$A(ctx) {
+function create_fragment$B(ctx) {
   let button;
   let button_class_value;
   let mounted;
@@ -2007,7 +2111,7 @@ function clickHandler(e) {
   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"];
@@ -2101,7 +2205,7 @@ class Button extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$v, create_fragment$A, safe_not_equal, {
+    }, instance$w, create_fragment$B, safe_not_equal, {
       type: 0,
       size: 1,
       variant: 2,
@@ -2221,7 +2325,7 @@ class Button extends SvelteElement {
 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 {
@@ -2270,7 +2374,7 @@ function create_fragment$z(ctx) {
   };
 }
 
-function instance$u($$self, $$props, $$invalidate) {
+function instance$v($$self, $$props, $$invalidate) {
   let {
     gap = "medium"
   } = $$props;
@@ -2294,7 +2398,7 @@ class ButtonGroup extends SvelteElement {
       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);
@@ -2342,7 +2446,7 @@ class ButtonGroup extends SvelteElement {
 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;
@@ -2363,7 +2467,7 @@ function create_fragment$y(ctx) {
       span1 = element("span");
       h3 = element("h3");
       t1 = text(
-      /*title*/
+      /*heading*/
       ctx[1]);
       t2 = space();
       slot = element("slot");
@@ -2422,9 +2526,9 @@ function create_fragment$y(ctx) {
       }
 
       if (dirty &
-      /*title*/
+      /*heading*/
       2) set_data(t1,
-      /*title*/
+      /*heading*/
       ctx[1]);
 
       if (dirty &
@@ -2446,13 +2550,13 @@ function create_fragment$y(ctx) {
   };
 }
 
-function instance$t($$self, $$props, $$invalidate) {
+function instance$u($$self, $$props, $$invalidate) {
   let iconType;
   let {
     type
   } = $$props;
   let {
-    title
+    heading
   } = $$props;
   let {
     testid = ""
@@ -2460,7 +2564,7 @@ function instance$t($$self, $$props, $$invalidate) {
 
   $$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);
   };
 
@@ -2472,7 +2576,7 @@ function instance$t($$self, $$props, $$invalidate) {
     }
   };
 
-  return [type, title, testid, iconType];
+  return [type, heading, testid, iconType];
 }
 
 class Callout extends SvelteElement {
@@ -2483,9 +2587,9 @@ class Callout extends SvelteElement {
       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);
 
@@ -2502,7 +2606,7 @@ class Callout extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["type", "title", "testid"];
+    return ["type", "heading", "testid"];
   }
 
   get type() {
@@ -2516,13 +2620,13 @@ class Callout extends SvelteElement {
     flush();
   }
 
-  get title() {
+  get heading() {
     return this.$$.ctx[1];
   }
 
-  set title(title) {
+  set heading(heading) {
     this.$$set({
-      title
+      heading
     });
     flush();
   }
@@ -2543,7 +2647,7 @@ class Callout extends SvelteElement {
 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;
@@ -2602,7 +2706,7 @@ function create_fragment$x(ctx) {
   };
 }
 
-function instance$s($$self, $$props, $$invalidate) {
+function instance$t($$self, $$props, $$invalidate) {
   let {
     elevation = 0
   } = $$props;
@@ -2631,7 +2735,7 @@ class Card extends SvelteElement {
       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
@@ -2691,7 +2795,7 @@ class Card extends SvelteElement {
 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() {
@@ -2722,7 +2826,7 @@ class CardActions extends SvelteElement {
       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) {
@@ -2736,7 +2840,7 @@ class CardActions extends SvelteElement {
 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() {
@@ -2769,7 +2873,7 @@ class CardContent extends SvelteElement {
       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) {
@@ -2783,7 +2887,7 @@ class CardContent extends SvelteElement {
 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() {
@@ -2816,7 +2920,7 @@ class CardGroup extends SvelteElement {
       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) {
@@ -2830,7 +2934,7 @@ class CardGroup extends SvelteElement {
 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() {
@@ -2879,7 +2983,7 @@ function create_fragment$t(ctx) {
   };
 }
 
-function instance$r($$self, $$props, $$invalidate) {
+function instance$s($$self, $$props, $$invalidate) {
   let {
     src
   } = $$props;
@@ -2903,7 +3007,7 @@ class CardImage extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$r, create_fragment$t, safe_not_equal, {
+    }, instance$s, create_fragment$u, safe_not_equal, {
       src: 0,
       height: 1
     }, null);
@@ -3005,7 +3109,7 @@ function create_if_block$f(ctx) {
   };
 }
 
-function create_fragment$s(ctx) {
+function create_fragment$t(ctx) {
   let label;
   let div0;
   let input;
@@ -3214,7 +3318,7 @@ function create_fragment$s(ctx) {
   };
 }
 
-function instance$q($$self, $$props, $$invalidate) {
+function instance$r($$self, $$props, $$invalidate) {
   let isDisabled;
   let isError;
   let isChecked;
@@ -3301,7 +3405,7 @@ class Checkbox extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$q, create_fragment$s, safe_not_equal, {
+    }, instance$r, create_fragment$t, safe_not_equal, {
       name: 0,
       checked: 9,
       text: 1,
@@ -3499,7 +3603,7 @@ function create_if_block$e(ctx) {
   };
 }
 
-function create_fragment$r(ctx) {
+function create_fragment$s(ctx) {
   let div1;
   let t0;
   let div0;
@@ -3636,7 +3740,7 @@ function create_fragment$r(ctx) {
   };
 }
 
-function instance$p($$self, $$props, $$invalidate) {
+function instance$q($$self, $$props, $$invalidate) {
   let {
     leadingicon = null
   } = $$props;
@@ -3713,7 +3817,7 @@ class Chip extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$p, create_fragment$r, safe_not_equal, {
+    }, instance$q, create_fragment$s, safe_not_equal, {
       leadingicon: 0,
       error: 7,
       deletable: 8,
@@ -3785,7 +3889,7 @@ class Chip extends SvelteElement {
 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;
@@ -3880,7 +3984,7 @@ function create_fragment$q(ctx) {
   };
 }
 
-function instance$o($$self, $$props, $$invalidate) {
+function instance$p($$self, $$props, $$invalidate) {
   let _colored;
 
   let {
@@ -3922,7 +4026,7 @@ class Container extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$o, create_fragment$q, safe_not_equal, {
+    }, instance$p, create_fragment$r, safe_not_equal, {
       variant: 0,
       colored: 4,
       headingsize: 1,
@@ -4108,7 +4212,7 @@ function deleteContext(name) {
 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;
@@ -4161,7 +4265,7 @@ function create_if_block$d(ctx) {
 } // (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*/
@@ -4278,7 +4382,7 @@ function create_each_block$3(key_1, ctx) {
   };
 }
 
-function create_fragment$p(ctx) {
+function create_fragment$q(ctx) {
   let div1;
   let t0;
   let div0;
@@ -4307,9 +4411,9 @@ function create_fragment$p(ctx) {
   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 {
@@ -4483,7 +4587,7 @@ function create_fragment$p(ctx) {
         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] &
@@ -4547,7 +4651,7 @@ function create_fragment$p(ctx) {
 
 const MAX_HEIGHT = "300px";
 
-function instance$n($$self, $$props, $$invalidate) {
+function instance$o($$self, $$props, $$invalidate) {
   let _disabled;
 
   let _multiselect;
@@ -4810,7 +4914,7 @@ class Dropdown extends SvelteElement {
       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,
@@ -4954,7 +5058,7 @@ class Dropdown extends SvelteElement {
 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;
@@ -4968,7 +5072,7 @@ function create_fragment$o(ctx) {
   };
 }
 
-function instance$m($$self, $$props, $$invalidate) {
+function instance$n($$self, $$props, $$invalidate) {
   let {
     name = ""
   } = $$props;
@@ -5007,7 +5111,7 @@ class DropdownItem extends SvelteElement {
       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
@@ -5067,7 +5171,7 @@ class DropdownItem extends SvelteElement {
 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 {
@@ -5106,7 +5210,7 @@ function create_fragment$n(ctx) {
   };
 }
 
-function instance$l($$self, $$props, $$invalidate) {
+function instance$m($$self, $$props, $$invalidate) {
   let _gap;
 
   let {
@@ -5136,7 +5240,7 @@ class FlexRow extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$l, create_fragment$n, safe_not_equal, {
+    }, instance$m, create_fragment$o, safe_not_equal, {
       gap: 1
     }, null);
 
@@ -5172,7 +5276,7 @@ class FlexRow extends SvelteElement {
 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;
@@ -5312,7 +5416,7 @@ function create_if_block$c(ctx) {
   };
 }
 
-function create_fragment$m(ctx) {
+function create_fragment$n(ctx) {
   let div1;
   let t0;
   let div0;
@@ -5320,7 +5424,7 @@ function create_fragment$m(ctx) {
   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);
@@ -5361,7 +5465,7 @@ function create_fragment$m(ctx) {
         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);
         }
@@ -5414,7 +5518,7 @@ function create_fragment$m(ctx) {
   };
 }
 
-function instance$k($$self, $$props, $$invalidate) {
+function instance$l($$self, $$props, $$invalidate) {
   let isOptional;
   let {
     label = ""
@@ -5455,7 +5559,7 @@ class FormItem extends SvelteElement {
       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,
@@ -5527,7 +5631,7 @@ class FormItem extends SvelteElement {
 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;
@@ -5542,7 +5646,7 @@ function create_fragment$l(ctx) {
       goa_page_block = element("goa-page-block");
       h1 = element("h1");
       t0 = text(
-      /*title*/
+      /*heading*/
       ctx[0]);
       t1 = space();
       div0 = element("div");
@@ -5550,7 +5654,6 @@ function create_fragment$l(ctx) {
       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");
@@ -5578,9 +5681,9 @@ function create_fragment$l(ctx) {
 
     p(ctx, [dirty]) {
       if (dirty &
-      /*title*/
+      /*heading*/
       1) set_data(t0,
-      /*title*/
+      /*heading*/
       ctx[0]);
 
       if (dirty &
@@ -5602,20 +5705,20 @@ function create_fragment$l(ctx) {
   };
 }
 
-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 {
@@ -5626,8 +5729,8 @@ class HeroBanner extends SvelteElement {
       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);
 
@@ -5644,16 +5747,16 @@ class HeroBanner extends SvelteElement {
   }
 
   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();
   }
@@ -5722,7 +5825,7 @@ function create_if_block$b(ctx) {
   };
 }
 
-function create_fragment$k(ctx) {
+function create_fragment$l(ctx) {
   let div;
   let div_data_testid_value;
   let div_style_value;
@@ -5836,7 +5939,7 @@ function create_fragment$k(ctx) {
   };
 }
 
-function instance$i($$self, $$props, $$invalidate) {
+function instance$j($$self, $$props, $$invalidate) {
   let isInverted;
 
   let _size;
@@ -5851,13 +5954,13 @@ function instance$i($$self, $$props, $$invalidate) {
     theme = "outline"
   } = $$props;
   let {
-    inverted
+    inverted = "false"
   } = $$props;
   let {
-    fillcolor
+    fillcolor = ""
   } = $$props;
   let {
-    hovercolor
+    hovercolor = ""
   } = $$props;
   let {
     opacity = 1
@@ -5906,7 +6009,7 @@ class Icon extends SvelteElement {
       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,
@@ -6026,7 +6129,7 @@ class Icon extends SvelteElement {
 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;
@@ -6181,7 +6284,7 @@ function handleClick(e) {
   }));
 }
 
-function instance$h($$self, $$props, $$invalidate) {
+function instance$i($$self, $$props, $$invalidate) {
   let css;
   let isDisabled;
   let isInverted;
@@ -6266,7 +6369,7 @@ class IconButton extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$h, create_fragment$j, safe_not_equal, {
+    }, instance$i, create_fragment$k, safe_not_equal, {
       type: 0,
       size: 1,
       theme: 2,
@@ -6520,7 +6623,7 @@ function create_if_block$a(ctx) {
     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);
@@ -6562,7 +6665,7 @@ function create_if_block$a(ctx) {
 } // (122:31) 
 
 
-function create_if_block_2$4(ctx) {
+function create_if_block_2$5(ctx) {
   let div;
   let t_value =
   /*value*/
@@ -6655,7 +6758,7 @@ function create_if_block_1$6(ctx) {
   };
 }
 
-function create_fragment$i(ctx) {
+function create_fragment$j(ctx) {
   let div1;
   let div0;
   let t0;
@@ -6975,7 +7078,7 @@ function doClick() {
   }));
 }
 
-function instance$g($$self, $$props, $$invalidate) {
+function instance$h($$self, $$props, $$invalidate) {
   let handlesTrailingIconClick;
   let isFocused;
   let isReadonly;
@@ -7139,7 +7242,7 @@ class Input extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$g, create_fragment$i, safe_not_equal, {
+    }, instance$h, create_fragment$j, safe_not_equal, {
       type: 1,
       name: 2,
       value: 0,
@@ -7478,7 +7581,7 @@ function create_if_block$9(ctx) {
   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 (
@@ -7582,7 +7685,7 @@ function create_if_block$9(ctx) {
         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);
         }
@@ -7726,7 +7829,7 @@ function create_if_block_3$2(ctx) {
 } // (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;
@@ -7807,7 +7910,7 @@ function create_if_block_1$5(ctx) {
   };
 }
 
-function create_fragment$h(ctx) {
+function create_fragment$i(ctx) {
   let if_block_anchor;
   let current;
   let if_block =
@@ -7872,7 +7975,7 @@ function create_fragment$h(ctx) {
   };
 }
 
-function instance$f($$self, $$props, $$invalidate) {
+function instance$g($$self, $$props, $$invalidate) {
   let isClosable;
   let isScrollable;
   let isOpen;
@@ -7966,7 +8069,7 @@ class Modal extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$f, create_fragment$h, safe_not_equal, {
+    }, instance$g, create_fragment$i, safe_not_equal, {
       heading: 0,
       closable: 9,
       scrollable: 10,
@@ -8163,7 +8266,7 @@ function create_if_block$8(ctx) {
   };
 }
 
-function create_fragment$g(ctx) {
+function create_fragment$h(ctx) {
   let if_block_anchor;
   let current;
   let if_block =
@@ -8228,7 +8331,7 @@ function create_fragment$g(ctx) {
   };
 }
 
-function instance$e($$self, $$props, $$invalidate) {
+function instance$f($$self, $$props, $$invalidate) {
   let iconType;
   let {
     type
@@ -8262,7 +8365,7 @@ class Notification extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$e, create_fragment$g, safe_not_equal, {
+    }, instance$f, create_fragment$h, safe_not_equal, {
       type: 0
     }, null);
 
@@ -8298,7 +8401,7 @@ class Notification extends SvelteElement {
 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() {
@@ -8331,7 +8434,7 @@ class PageLayout extends SvelteElement {
       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) {
@@ -8559,7 +8662,7 @@ function create_if_block_1$4(ctx) {
   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");
@@ -8626,7 +8729,7 @@ function create_if_block_1$4(ctx) {
         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);
         }
@@ -8708,7 +8811,7 @@ function create_if_block_4(ctx) {
 } // (36:6) {#if message}
 
 
-function create_if_block_2$2(ctx) {
+function create_if_block_2$3(ctx) {
   let div;
   let t;
   return {
@@ -8740,7 +8843,7 @@ function create_if_block_2$2(ctx) {
   };
 }
 
-function create_fragment$e(ctx) {
+function create_fragment$f(ctx) {
   let if_block_anchor;
   let current;
   let if_block =
@@ -8805,7 +8908,7 @@ function create_fragment$e(ctx) {
   };
 }
 
-function instance$d($$self, $$props, $$invalidate) {
+function instance$e($$self, $$props, $$invalidate) {
   let isVisible;
   let fullscreen;
   let inline;
@@ -8881,7 +8984,7 @@ class CircularProgress extends SvelteElement {
       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,
@@ -8978,14 +9081,14 @@ customElements.define("goa-circular-progress", CircularProgress);
 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;
@@ -9152,7 +9255,7 @@ function create_each_block$2(key_1, ctx) {
   };
 }
 
-function create_fragment$d(ctx) {
+function create_fragment$e(ctx) {
   let div;
   let slot;
   let t;
@@ -9168,9 +9271,9 @@ function create_fragment$d(ctx) {
   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 {
@@ -9213,7 +9316,7 @@ function create_fragment$d(ctx) {
         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 &
@@ -9251,7 +9354,7 @@ function create_fragment$d(ctx) {
   };
 }
 
-function instance$c($$self, $$props, $$invalidate) {
+function instance$d($$self, $$props, $$invalidate) {
   let isDisabled;
   let {
     name
@@ -9347,7 +9450,7 @@ class RadioGroup extends SvelteElement {
       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,
@@ -9443,7 +9546,7 @@ class RadioGroup extends SvelteElement {
 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;
@@ -9457,7 +9560,7 @@ function create_fragment$c(ctx) {
   };
 }
 
-function instance$b($$self, $$props, $$invalidate) {
+function instance$c($$self, $$props, $$invalidate) {
   let {
     value
   } = $$props;
@@ -9493,7 +9596,7 @@ class RadioItem extends SvelteElement {
       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
@@ -9553,7 +9656,7 @@ class RadioItem extends SvelteElement {
 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;
@@ -9621,7 +9724,7 @@ function create_fragment$b(ctx) {
   };
 }
 
-function instance$a($$self, $$props, $$invalidate) {
+function instance$b($$self, $$props, $$invalidate) {
   let {
     direction = "vertical"
   } = $$props;
@@ -9653,7 +9756,7 @@ class Scrollable extends SvelteElement {
       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,
@@ -9771,7 +9874,7 @@ function create_if_block_1$3(ctx) {
   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");
@@ -9824,7 +9927,7 @@ function create_if_block_1$3(ctx) {
         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);
         }
@@ -9845,7 +9948,7 @@ function create_if_block_1$3(ctx) {
 } // (52:6) {#if feedbackurl}
 
 
-function create_if_block_2$1(ctx) {
+function create_if_block_2$2(ctx) {
   let span;
   let t0;
   let a;
@@ -9920,7 +10023,7 @@ function create_if_block$6(ctx) {
   };
 }
 
-function create_fragment$a(ctx) {
+function create_fragment$b(ctx) {
   let header;
   let t0;
   let show_if = ["alpha", "beta"].includes(
@@ -10029,7 +10132,7 @@ function capitalize(val) {
   return val[0].toUpperCase() + val.slice(1);
 }
 
-function instance$9($$self, $$props, $$invalidate) {
+function instance$a($$self, $$props, $$invalidate) {
   let {
     level
   } = $$props;
@@ -10057,7 +10160,7 @@ class MicrositeHeader extends SvelteElement {
       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
@@ -10117,6 +10220,13 @@ class MicrositeHeader extends SvelteElement {
 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;
@@ -10125,9 +10235,9 @@ function create_else_block(ctx) {
       div = element("div");
       attr(div, "class", div_class_value = "skeleton " +
       /*type*/
-      ctx[2] + " " + `${
+      ctx[3] + " " + `${
       /*type*/
-      ctx[2]}-${
+      ctx[3]}-${
       /*size*/
       ctx[1]}`);
     },
@@ -10139,26 +10249,122 @@ function create_else_block(ctx) {
     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) {
@@ -10280,7 +10486,7 @@ function create_if_block_1$2(ctx) {
     }
 
   };
-} // (10:0) {#if type === "card"}
+} // (11:0) {#if type === "card"}
 
 
 function create_if_block$5(ctx) {
@@ -10291,10 +10497,6 @@ function create_if_block$5(ctx) {
   let skeleton1;
   let t1;
   let skeleton2;
-  let t2;
-  let skeleton3;
-  let t3;
-  let skeleton4;
   let div1_class_value;
   let current;
   skeleton0 = new Skeleton({
@@ -10315,26 +10517,11 @@ function create_if_block$5(ctx) {
   });
   skeleton2 = new Skeleton({
     props: {
-      type: "text",
-      size:
-      /*size*/
-      ctx[1]
-    }
-  });
-  skeleton3 = new Skeleton({
-    props: {
-      type: "text",
+      type: "lines",
       size:
       /*size*/
-      ctx[1]
-    }
-  });
-  skeleton4 = new Skeleton({
-    props: {
-      type: "text",
-      size:
-      /*size*/
-      ctx[1]
+      ctx[1],
+      count: 3
     }
   });
   return {
@@ -10346,10 +10533,6 @@ function create_if_block$5(ctx) {
       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*/
@@ -10367,10 +10550,6 @@ function create_if_block$5(ctx) {
       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;
     },
 
@@ -10396,20 +10575,6 @@ function create_if_block$5(ctx) {
       /*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*/
@@ -10433,8 +10598,6 @@ function create_if_block$5(ctx) {
       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;
     },
 
@@ -10442,8 +10605,6 @@ function create_if_block$5(ctx) {
       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;
     },
 
@@ -10452,29 +10613,88 @@ function create_if_block$5(ctx) {
       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[2] === "profile") return 1;
-    return 2;
+    ctx[3] === "profile") return 1;
+    if (
+    /*type*/
+    ctx[3] === "lines") return 2;
+    return 3;
   }
 
   current_block_type_index = select_block_type(ctx);
@@ -10537,13 +10757,16 @@ function create_fragment$9(ctx) {
   };
 }
 
-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;
@@ -10551,24 +10774,26 @@ function instance$8($$self, $$props, $$invalidate) {
   $$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) {
@@ -10584,7 +10809,7 @@ class Skeleton extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["width", "size", "type"];
+    return ["width", "size", "count", "type"];
   }
 
   get width() {
@@ -10609,10 +10834,21 @@ class Skeleton extends SvelteElement {
     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
@@ -10935,7 +11171,7 @@ function create_if_block$4(ctx) {
   };
 }
 
-function create_fragment$8(ctx) {
+function create_fragment$9(ctx) {
   let if_block_anchor;
   let if_block =
   /*ready*/
@@ -10980,7 +11216,7 @@ function create_fragment$8(ctx) {
   };
 }
 
-function instance$7($$self, $$props, $$invalidate) {
+function instance$8($$self, $$props, $$invalidate) {
   let diameter;
   let strokewidth;
   let radius;
@@ -11105,7 +11341,7 @@ class Spinner extends SvelteElement {
       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,
@@ -11333,7 +11569,7 @@ function create_if_block_1$1(ctx) {
   };
 }
 
-function create_fragment$7(ctx) {
+function create_fragment$8(ctx) {
   let div;
   let textarea;
   let t;
@@ -11501,7 +11737,7 @@ function create_fragment$7(ctx) {
   };
 }
 
-function instance$6($$self, $$props, $$invalidate) {
+function instance$7($$self, $$props, $$invalidate) {
   let isError;
   let isDisabled;
   let isReadonly;
@@ -11609,7 +11845,7 @@ class TextArea extends SvelteElement {
       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,
@@ -11765,7 +12001,7 @@ class TextArea extends SvelteElement {
 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() {
@@ -11821,7 +12057,7 @@ function isFocusable(element) {
   }
 }
 
-function instance$5($$self, $$props, $$invalidate) {
+function instance$6($$self, $$props, $$invalidate) {
   let isOpen;
   let ignoreFocusChanges = false;
   let lastFocus;
@@ -11994,7 +12230,7 @@ class FocusTrap extends SvelteElement {
       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);
 
@@ -12049,7 +12285,7 @@ function create_if_block$2(ctx) {
   };
 }
 
-function create_fragment$5(ctx) {
+function create_fragment$6(ctx) {
   var _ctx$;
 
   let footer;
@@ -12174,7 +12410,7 @@ function create_fragment$5(ctx) {
   };
 }
 
-function instance$4($$self, $$props, $$invalidate) {
+function instance$5($$self, $$props, $$invalidate) {
   let rootEl;
   let navLinks;
   let metaLinks;
@@ -12200,12 +12436,12 @@ function instance$4($$self, $$props, $$invalidate) {
 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) {
@@ -12223,7 +12459,7 @@ function get_each_context$1(ctx, list, i) {
   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) {
@@ -12265,7 +12501,7 @@ function create_if_block$1(ctx) {
     }
 
   };
-} // (106:4) {#each children as child}
+} // (107:4) {#each children as child}
 
 
 function create_each_block$1(ctx) {
@@ -12315,7 +12551,7 @@ function create_each_block$1(ctx) {
   };
 }
 
-function create_fragment$4(ctx) {
+function create_fragment$5(ctx) {
   let section;
   let t0;
   let div;
@@ -12462,7 +12698,7 @@ function create_fragment$4(ctx) {
   };
 }
 
-function instance$3($$self, $$props, $$invalidate) {
+function instance$4($$self, $$props, $$invalidate) {
   let {
     name = ""
   } = $$props;
@@ -12472,7 +12708,8 @@ function instance$3($$self, $$props, $$invalidate) {
   let rootEl;
   let children = [];
   onMount(async () => {
-    await tick();
+    await tick(); // remap slot content
+
     $$invalidate(3, children = rootEl.querySelector("slot").assignedElements());
     const isValid = children.map(child => child.hasAttribute("href")).reduce((sum, valid) => {
       return sum && valid;
@@ -12518,7 +12755,7 @@ class FooterNavSection extends SvelteElement {
       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);
@@ -12620,7 +12857,7 @@ function create_each_block(ctx) {
   };
 }
 
-function create_fragment$3(ctx) {
+function create_fragment$4(ctx) {
   let section;
   let div;
   let t;
@@ -12708,7 +12945,7 @@ function create_fragment$3(ctx) {
   };
 }
 
-function instance$2($$self, $$props, $$invalidate) {
+function instance$3($$self, $$props, $$invalidate) {
   let rootEl;
   let children = [];
   onMount(async () => {
@@ -12743,7 +12980,7 @@ class FooterMetaSection extends SvelteElement {
       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) {
@@ -12755,6 +12992,111 @@ class FooterMetaSection extends SvelteElement {
 }
 
 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) {
@@ -13445,12 +13787,12 @@ const GoAInputRange = _a => {
 };
 
 const GoAAppHeader = ({
-  title,
+  heading,
   url,
   children
 }) => {
   return jsx("goa-app-header", Object.assign({
-    title: title,
+    heading: heading,
     url: url
   }, {
     children: children
@@ -13545,12 +13887,12 @@ const GoAButtonGroup = ({
 };
 
 const GoACallout = ({
-  title,
+  heading,
   type: _type = "information",
   children
 }) => {
   return jsx("goa-callout", Object.assign({
-    title: title,
+    heading: heading,
     type: _type
   }, {
     children: children
@@ -13756,12 +14098,12 @@ const GoAFormItem = ({
 };
 
 const GoAHeroBanner = ({
-  title,
+  heading,
   backgroundUrl,
   children
 }) => {
   return jsx("goa-hero-banner", Object.assign({
-    title: title,
+    heading: heading,
     backgroundurl: backgroundUrl
   }, {
     children: children
@@ -14044,6 +14386,12 @@ const GoATextArea = ({
   }, void 0);
 };
 
+function GoAPage(props) {
+  return jsx("goa-page", {
+    children: props.children
+  }, void 0);
+}
+
 function GoAAppFooter({
   children
 }) {
@@ -14087,12 +14435,6 @@ const GoAFlexCol = ({
   }), void 0);
 };
 
-function GoAPage(props) {
-  return jsx("goa-page", {
-    children: props.children
-  }, void 0);
-}
-
 function GoADivider(props) {
   return jsx("goa-divider", {
     spacing: props.spacing