@abgov/react-components 4.4.0 → 4.5.0

package/react-components.umd.js

@@ -1067,7 +1067,6 @@
 	}
 	/* libs/web-components/src/components/app-header/AppHeader.svelte generated by Svelte v3.51.0 */
 
-
 	function create_else_block$4(ctx) {
 	  let div;
 	  let img0;
@@ -1125,7 +1124,7 @@
 	} // (19:4) {#if url}
 
 
-	function create_if_block$h(ctx) {
+	function create_if_block$i(ctx) {
 	  let a;
 	  let img0;
 	  let img0_src_value;
@@ -1192,7 +1191,7 @@
 	  };
 	}
 
-	function create_fragment$F(ctx) {
+	function create_fragment$G(ctx) {
 	  let div2;
 	  let div1;
 	  let t;
@@ -1202,7 +1201,7 @@
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*url*/
-	    ctx[1]) return create_if_block$h;
+	    ctx[1]) return create_if_block$i;
 	    return create_else_block$4;
 	  }
 
@@ -1276,7 +1275,7 @@
 	  };
 	}
 
-	function instance$z($$self, $$props, $$invalidate) {
+	function instance$A($$self, $$props, $$invalidate) {
 	  let {
 	    heading = ""
 	  } = $$props;
@@ -1303,12 +1302,12 @@
 	class AppHeader extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box;font-family:var(--font-family)}.app-header{margin:0 auto;background-color:var(--color-white);border-bottom:1px solid var(--color-gray-100)}@media(max-width: 640px){.app-header{padding:1rem 1rem}}.content{margin:0 auto;width:min(var(--max-content-width), 100%);display:flex;align-items:center;justify-content:space-between}@media(min-width: 640px){.content{padding:1.5rem 1.125rem}}.app-link{display:flex;align-items:center;text-decoration:none;color:inherit}.title{margin-left:0.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.image-desktop{display:none}.image-mobile{display:block}@media(min-width: 640px){.image-desktop{display:block}.image-mobile{display:none}.title{margin-left:1.75rem}.image-desktop{display:block}.image-mobile{display:none}}</style>`;
+	    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.app-header{margin:0 auto;background-color:var(--goa-color-greyscale-white);border-bottom:1px solid var(--goa-color-greyscale-100)}@media(max-width: 640px){.app-header{padding:1rem 1rem}}.content{margin:0 auto;width:min(var(--max-content-width), 100%);display:flex;align-items:center;justify-content:space-between}@media(min-width: 640px){.content{padding:1.5rem 1.125rem}}.app-link{display:flex;align-items:center;text-decoration:none;color:inherit}.title{margin-left:0.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.image-desktop{display:none}.image-mobile{display:block}@media(min-width: 640px){.image-desktop{display:block}.image-mobile{display:none}.title{margin-left:1.75rem}.image-desktop{display:block}.image-mobile{display:none}}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$z, create_fragment$F, safe_not_equal, {
+	    }, instance$A, create_fragment$G, safe_not_equal, {
 	      heading: 0,
 	      url: 1,
 	      testid: 2,
@@ -1380,7 +1379,7 @@
 	customElements.define("goa-app-header", AppHeader);
 
 	function calculateMargin(mt, mr, mb, ml) {
-	  return [mt && `margin-top:var(--goa-spacing-${mt});`, mr && `margin-right:var(--goa-spacing-${mr});`, mb && `margin-bottom:var(--goa-spacing-${mb});`, ml && `margin-left:var(--goa-spacing-${ml});`].join(" ");
+	  return [mt && `margin-top:var(--goa-space-${mt});`, mr && `margin-right:var(--goa-space-${mr});`, mb && `margin-bottom:var(--goa-space-${mb});`, ml && `margin-left:var(--goa-space-${ml});`].join(" ");
 	}
 
 	function injectCss(el, rootSelector, css, media) {
@@ -1493,7 +1492,7 @@
 	} // (50:2) {#if content}
 
 
-	function create_if_block$g(ctx) {
+	function create_if_block$h(ctx) {
 	  let div;
 	  let t;
 	  return {
@@ -1525,7 +1524,7 @@
 	  };
 	}
 
-	function create_fragment$E(ctx) {
+	function create_fragment$F(ctx) {
 	  let div;
 	  let t;
 	  let div_style_value;
@@ -1542,7 +1541,7 @@
 	  let if_block0 = current_block_type(ctx);
 	  let if_block1 =
 	  /*content*/
-	  ctx[2] && create_if_block$g(ctx);
+	  ctx[2] && create_if_block$h(ctx);
 	  return {
 	    c() {
 	      div = element("div");
@@ -1599,7 +1598,7 @@
 	        if (if_block1) {
 	          if_block1.p(ctx, dirty);
 	        } else {
-	          if_block1 = create_if_block$g(ctx);
+	          if_block1 = create_if_block$h(ctx);
 	          if_block1.c();
 	          if_block1.m(div, null);
 	        }
@@ -1661,7 +1660,7 @@
 	  };
 	}
 
-	function instance$y($$self, $$props, $$invalidate) {
+	function instance$z($$self, $$props, $$invalidate) {
 	  let showIcon;
 	  let iconType;
 	  const [Types, validateType] = typeValidator("Badge type", ["success", "important", "information", "emergency", "dark", "midtone", "light"], true);
@@ -1736,14 +1735,12 @@
 	class Badge extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-badge{display:inline-flex;align-items:center;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--fw-regular)}.icon-only{padding:0.25rem}.goa-badge-content{text-transform:capitalize;font-size:var(--fs-sm);line-height:var(--lh-sm);padding-bottom:var(
-      --font-valign-fix
-    )}.goa-badge.badge-information{background-color:var(--color-gray-100);color:var(--goa-color-status-info)}.goa-badge.badge-success{background-color:var(--goa-color-status-success);color:var(--goa-color-text-light)}.goa-badge.badge-important{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.goa-badge.badge-emergency{background-color:var(--goa-color-status-emergency);color:var(--goa-color-text-light)}.goa-badge.badge-dark{background-color:var(--color-black);color:var(--goa-color-text-light)}.goa-badge.badge-midtone{background-color:var(--color-gray-600);color:var(--goa-color-text-light)}.goa-badge.badge-light{background-color:var(--color-white);color:var(--goa-color-text)}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.goa-badge{display:inline-flex;align-items:center;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--goa-font-weight-regular)}.icon-only{padding:0.25rem}.goa-badge-content{text-transform:capitalize;font-size:var(--goa-font-size-2);line-height:var(--goa-line-height-1);padding-bottom:var(--font-valign-fix, 0)}.goa-badge.badge-information{background-color:var(--goa-color-greyscale-100);color:var(--goa-color-info-default)}.goa-badge.badge-success{background-color:var(--goa-color-success-default);color:var(--goa-color-text-light)}.goa-badge.badge-important{background-color:var(--goa-color-warning-default);color:var(--goa-color-text-default)}.goa-badge.badge-emergency{background-color:var(--goa-color-emergency-default);color:var(--goa-color-text-light)}.goa-badge.badge-dark{background-color:var(--goa-color-greyscale-black);color:var(--goa-color-text-light)}.goa-badge.badge-midtone{background-color:var(--goa-color-greyscale-700);color:var(--goa-color-text-light)}.goa-badge.badge-light{background-color:var(--goa-color-greyscale-white);color:var(--goa-color-text-default)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$y, create_fragment$E, safe_not_equal, {
+	    }, instance$z, create_fragment$F, safe_not_equal, {
 	      type: 0,
 	      testid: 1,
 	      content: 2,
@@ -1863,7 +1860,7 @@
 	customElements.define("goa-badge", Badge);
 	/* libs/web-components/src/components/block/Block.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$D(ctx) {
+	function create_fragment$E(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -1882,8 +1879,8 @@
       /*mb*/
       ctx[5],
       /*ml*/
-      ctx[6])}
-    --gap: var(--goa-spacing-${
+      ctx[6])};
+    --gap: var(--goa-space-${
       /*gap*/
       ctx[0]});
     --alignment: ${
@@ -1912,8 +1909,8 @@
       /*mb*/
       ctx[5],
       /*ml*/
-      ctx[6])}
-    --gap: var(--goa-spacing-${
+      ctx[6])};
+    --gap: var(--goa-space-${
       /*gap*/
       ctx[0]});
     --alignment: ${
@@ -1937,7 +1934,7 @@
 	  };
 	}
 
-	function instance$x($$self, $$props, $$invalidate) {
+	function instance$y($$self, $$props, $$invalidate) {
 	  let {
 	    gap = "m"
 	  } = $$props;
@@ -1981,7 +1978,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$x, create_fragment$D, safe_not_equal, {
+	    }, instance$y, create_fragment$E, safe_not_equal, {
 	      gap: 0,
 	      direction: 1,
 	      alignment: 2,
@@ -2091,7 +2088,7 @@
 
 	function create_else_block$2(ctx) {
 	  let t0;
-	  let slot;
+	  let span;
 	  let t1;
 	  let if_block1_anchor;
 	  let if_block0 =
@@ -2104,17 +2101,18 @@
 	    c() {
 	      if (if_block0) if_block0.c();
 	      t0 = space();
-	      slot = element("slot");
+	      span = element("span");
+	      span.innerHTML = `<slot></slot>`;
 	      t1 = space();
 	      if (if_block1) if_block1.c();
 	      if_block1_anchor = empty();
-	      attr(slot, "class", "text");
+	      attr(span, "class", "text");
 	    },
 
 	    m(target, anchor) {
 	      if (if_block0) if_block0.m(target, anchor);
 	      insert(target, t0, anchor);
-	      insert(target, slot, anchor);
+	      insert(target, span, anchor);
 	      insert(target, t1, anchor);
 	      if (if_block1) if_block1.m(target, anchor);
 	      insert(target, if_block1_anchor, anchor);
@@ -2155,33 +2153,34 @@
 	    d(detaching) {
 	      if (if_block0) if_block0.d(detaching);
 	      if (detaching) detach(t0);
-	      if (detaching) detach(slot);
+	      if (detaching) detach(span);
 	      if (detaching) detach(t1);
 	      if (if_block1) if_block1.d(detaching);
 	      if (detaching) detach(if_block1_anchor);
 	    }
 
 	  };
-	} // (45:2) {#if type === "start"}
+	} // (46:2) {#if type === "start"}
 
 
-	function create_if_block$f(ctx) {
-	  let slot;
+	function create_if_block$g(ctx) {
+	  let span;
 	  let t;
 	  let goa_icon;
 	  return {
 	    c() {
-	      slot = element("slot");
+	      span = element("span");
+	      span.innerHTML = `<slot></slot>`;
 	      t = space();
 	      goa_icon = element("goa-icon");
-	      attr(slot, "class", "text");
+	      attr(span, "class", "text");
 	      set_custom_element_data(goa_icon, "id", "trailing-icon");
 	      set_custom_element_data(goa_icon, "type", "arrow-forward");
 	      set_custom_element_data(goa_icon, "inverted", "true");
 	    },
 
 	    m(target, anchor) {
-	      insert(target, slot, anchor);
+	      insert(target, span, anchor);
 	      insert(target, t, anchor);
 	      insert(target, goa_icon, anchor);
 	    },
@@ -2189,13 +2188,13 @@
 	    p: noop,
 
 	    d(detaching) {
-	      if (detaching) detach(slot);
+	      if (detaching) detach(span);
 	      if (detaching) detach(t);
 	      if (detaching) detach(goa_icon);
 	    }
 
 	  };
-	} // (49:4) {#if leadingicon}
+	} // (52:4) {#if leadingicon}
 
 
 	function create_if_block_2$6(ctx) {
@@ -2209,7 +2208,7 @@
 	      ctx[3]);
 	      set_custom_element_data(goa_icon, "inverted",
 	      /*isButtonDark*/
-	      ctx[10]);
+	      ctx[11]);
 	    },
 
 	    m(target, anchor) {
@@ -2227,10 +2226,10 @@
 
 	      if (dirty &
 	      /*isButtonDark*/
-	      1024) {
+	      2048) {
 	        set_custom_element_data(goa_icon, "inverted",
 	        /*isButtonDark*/
-	        ctx[10]);
+	        ctx[11]);
 	      }
 	    },
 
@@ -2239,7 +2238,7 @@
 	    }
 
 	  };
-	} // (53:4) {#if trailingicon}
+	} // (58:4) {#if trailingicon}
 
 
 	function create_if_block_1$9(ctx) {
@@ -2253,7 +2252,7 @@
 	      ctx[4]);
 	      set_custom_element_data(goa_icon, "inverted",
 	      /*isButtonDark*/
-	      ctx[10]);
+	      ctx[11]);
 	    },
 
 	    m(target, anchor) {
@@ -2271,10 +2270,10 @@
 
 	      if (dirty &
 	      /*isButtonDark*/
-	      1024) {
+	      2048) {
 	        set_custom_element_data(goa_icon, "inverted",
 	        /*isButtonDark*/
-	        ctx[10]);
+	        ctx[11]);
 	      }
 	    },
 
@@ -2285,7 +2284,7 @@
 	  };
 	}
 
-	function create_fragment$C(ctx) {
+	function create_fragment$D(ctx) {
 	  let button;
 	  let button_class_value;
 	  let button_style_value;
@@ -2295,7 +2294,7 @@
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*type*/
-	    ctx[0] === "start") return create_if_block$f;
+	    ctx[0] === "start") return create_if_block$g;
 	    return create_else_block$2;
 	  }
 
@@ -2324,7 +2323,7 @@
 	      ctx[9]));
 	      button.disabled =
 	      /*isDisabled*/
-	      ctx[11];
+	      ctx[10];
 	      attr(button, "data-testid",
 	      /*testid*/
 	      ctx[5]);
@@ -2343,7 +2342,11 @@
 	      if_block.m(button, null);
 
 	      if (!mounted) {
-	        dispose = [listen(button, "click", clickHandler), listen(button, "click", clickHandler)];
+	        dispose = [listen(button, "click",
+	        /*clickHandler*/
+	        ctx[12]), listen(button, "click",
+	        /*clickHandler*/
+	        ctx[12])];
 	        mounted = true;
 	      }
 	    },
@@ -2389,10 +2392,10 @@
 
 	      if (dirty &
 	      /*isDisabled*/
-	      2048) {
+	      1024) {
 	        button.disabled =
 	        /*isDisabled*/
-	        ctx[11];
+	        ctx[10];
 	      }
 
 	      if (dirty &
@@ -2435,15 +2438,7 @@
 	  };
 	}
 
-	function clickHandler(e) {
-	  this.dispatchEvent(new CustomEvent("_click", {
-	    composed: true,
-	    bubbles: true
-	  }));
-	  e.stopPropagation();
-	}
-
-	function instance$w($$self, $$props, $$invalidate) {
+	function instance$x($$self, $$props, $$invalidate) {
 	  let isDisabled;
 	  let isButtonDark;
 	  const [Types, validateType] = typeValidator("Button type", ["primary", "submit", "secondary", "tertiary", "start"], true);
@@ -2482,6 +2477,16 @@
 	  let {
 	    ml = null
 	  } = $$props;
+
+	  function clickHandler(e) {
+	    if (!isDisabled) {
+	      this.dispatchEvent(new CustomEvent("_click", {
+	        composed: true,
+	        bubbles: true
+	      }));
+	    }
+	  }
+
 	  onMount(() => {
 	    validateType(type);
 	    validateSize(size);
@@ -2492,7 +2497,7 @@
 	    if ('type' in $$props) $$invalidate(0, type = $$props.type);
 	    if ('size' in $$props) $$invalidate(1, size = $$props.size);
 	    if ('variant' in $$props) $$invalidate(2, variant = $$props.variant);
-	    if ('disabled' in $$props) $$invalidate(12, disabled = $$props.disabled);
+	    if ('disabled' in $$props) $$invalidate(13, disabled = $$props.disabled);
 	    if ('leadingicon' in $$props) $$invalidate(3, leadingicon = $$props.leadingicon);
 	    if ('trailingicon' in $$props) $$invalidate(4, trailingicon = $$props.trailingicon);
 	    if ('testid' in $$props) $$invalidate(5, testid = $$props.testid);
@@ -2505,36 +2510,34 @@
 	  $$self.$$.update = () => {
 	    if ($$self.$$.dirty &
 	    /*disabled*/
-	    4096) {
-	      $$invalidate(11, isDisabled = toBoolean(disabled));
+	    8192) {
+	      $$invalidate(10, isDisabled = toBoolean(disabled));
 	    }
 
 	    if ($$self.$$.dirty &
 	    /*type*/
 	    1) {
-	      $$invalidate(10, isButtonDark = type === "primary" || type === "start");
+	      $$invalidate(11, isButtonDark = type === "primary" || type === "start");
 	    }
 	  };
 
-	  return [type, size, variant, leadingicon, trailingicon, testid, mt, mr, mb, ml, isButtonDark, isDisabled, disabled];
+	  return [type, size, variant, leadingicon, trailingicon, testid, mt, mr, mb, ml, isDisabled, isButtonDark, clickHandler, disabled];
 	}
 
 	class Button extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@media(max-width: 480px){:host{width:100%}button{width:100%}}button{display:inline-flex;box-sizing:border-box;border-radius:0.25rem;border:2px solid var(--goa-color-interactive);box-sizing:border-box;cursor:pointer;font-family:var(--font-family);font-size:var(--fs-lg);font-weight:400;height:var(--button-height);letter-spacing:0.5px;line-height:100%;padding:0 0.75rem;gap:0.5rem;align-items:center;justify-content:center;transition:transform 0.1s ease-in-out, background-color 0.2s ease-in-out,
-      border-color 0.2s ease-in-out}.text{padding-bottom:var(
-      --font-valign-fix
-    )}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--fs-base)}button.start{height:var(--button-height-tall);font-weight:var(--fw-bold)}button.start,button.submit,button.primary{border:2px solid var(--goa-color-interactive);background-color:var(--goa-color-interactive);color:var(--goa-color-text-light)}button.start:hover,button.submit:hover,button.primary:hover{border-color:var(--goa-color-interactive--hover);background-color:var(--goa-color-interactive--hover)}button.start:focus,button.start:active,button.submit:focus,button.submit:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive--focus);border-color:var(--goa-color-interactive--active);background-color:var(--goa-color-interactive--active);outline:none}button.secondary{border:2px solid var(--goa-color-interactive);background-color:var(--color-white);color:var(--goa-color-interactive)}button.secondary:hover{border-color:var(--goa-color-interactive--hover);color:var(--goa-color-interactive--hover);background-color:var(--color-gray-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);background-color:var(--color-gray-100);outline:none}button.tertiary{border:1px solid transparent;background-color:transparent;color:var(--goa-color-interactive);text-decoration:underline}button.tertiary:hover{border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);background-color:var(--color-gray-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--color-gray-100);background-color:var(--color-gray-100);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.submit.destructive,.primary.destructive{color:var(--color-white);background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency)}.submit.destructive:hover,.primary.destructive:hover{background-color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.submit.destructive:focus,.primary.destructive:focus,.primary.destructive:active{background-color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.secondary.destructive{color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);background-color:var(--color-white)}.secondary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background-color:var(--color-white)}.secondary.destructive:focus,.secondary.destructive:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background-color:var(--color-white)}.tertiary.destructive{color:var(--goa-color-status-emergency);border-color:var(--color-gray-200);background-color:var(--color-white)}.tertiary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background-color:var(--color-white)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background-color:var(--color-white)}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{--button-height:2.625rem;--button-height-compact:2rem;--button-height-tall:3.25rem;box-sizing:border-box;font-family:var(--goa-font-family-sans)}@media(max-width: 480px){:host{width:100%}button{width:100%}}button{display:inline-flex;box-sizing:border-box;border-radius:0.25rem;border:2px solid var(--goa-color-interactive-default);box-sizing:border-box;cursor:pointer;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-5);font-weight:400;height:var(--button-height);letter-spacing:var(--goa-letter-spacing-button);line-height:100%;padding:0 0.75rem;gap:0.5rem;align-items:center;justify-content:center;transition:transform 0.1s ease-in-out, background-color 0.2s ease-in-out,
+      border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix, 0)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--goa-font-size-4)}button.start{height:var(--button-height-tall);font-weight:var(--goa-font-weight-bold)}button.start,button.submit,button.primary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-interactive-default);color:var(--goa-color-text-light)}button.start:hover,button.submit:hover,button.primary:hover{border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover)}button.start:focus,button.start:active,button.submit:focus,button.submit:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive-focus);border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover);outline:none}button.secondary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-greyscale-white);color:var(--goa-color-interactive-default)}button.secondary:hover{border-color:var(--goa-color-interactive-hover);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);background-color:var(--goa-color-greyscale-100);outline:none}button.tertiary{border:1px solid transparent;background-color:transparent;color:var(--goa-color-interactive-default);text-decoration:underline}button.tertiary:hover{border-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--goa-color-greyscale-100);background-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.submit.destructive,.primary.destructive{color:var(--goa-color-greyscale-white);background-color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default)}.submit.destructive:hover,.primary.destructive:hover{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.submit.destructive:focus,.primary.destructive:focus,.primary.destructive:active{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.secondary.destructive{color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:hover{border-color:var(--goa-color-emergency-dark);color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:focus,.secondary.destructive:active{color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.tertiary.destructive{color:var(--goa-color-emergency-default);border-color:var(--goa-color-greyscale-200);background-color:var(--goa-color-greyscale-white)}.tertiary.destructive:hover{border-color:var(--goa-color-emergency-dark);color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$w, create_fragment$C, safe_not_equal, {
+	    }, instance$x, create_fragment$D, safe_not_equal, {
 	      type: 0,
 	      size: 1,
 	      variant: 2,
-	      disabled: 12,
+	      disabled: 13,
 	      leadingicon: 3,
 	      trailingicon: 4,
 	      testid: 5,
@@ -2594,7 +2597,7 @@
 	  }
 
 	  get disabled() {
-	    return this.$$.ctx[12];
+	    return this.$$.ctx[13];
 	  }
 
 	  set disabled(disabled) {
@@ -2686,7 +2689,7 @@
 	customElements.define("goa-button", Button);
 	/* libs/web-components/src/components/button-group/ButtonGroup.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$B(ctx) {
+	function create_fragment$C(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -2756,7 +2759,7 @@
 	  };
 	}
 
-	function instance$v($$self, $$props, $$invalidate) {
+	function instance$w($$self, $$props, $$invalidate) {
 	  let _alignment;
 
 	  let {
@@ -2815,12 +2818,12 @@
 	class ButtonGroup extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}div{display:flex;flex-direction:row;justify-content:var(--alignment);align-items:center;flex-wrap:wrap;gap:var(--gap-size);padding:3px 0}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}div{display:flex;flex-direction:row;justify-content:var(--alignment);align-items:center;flex-wrap:wrap;gap:var(--gap-size);padding:3px 0}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$v, create_fragment$B, safe_not_equal, {
+	    }, instance$w, create_fragment$C, safe_not_equal, {
 	      alignment: 7,
 	      gap: 0,
 	      testid: 1,
@@ -2928,7 +2931,7 @@
 	customElements.define("goa-button-group", ButtonGroup);
 	/* libs/web-components/src/components/callout/Callout.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block$e(ctx) {
+	function create_if_block$f(ctx) {
 	  let h3;
 	  let t;
 	  return {
@@ -2959,7 +2962,7 @@
 	  };
 	}
 
-	function create_fragment$A(ctx) {
+	function create_fragment$B(ctx) {
 	  let div;
 	  let span0;
 	  let goa_icon;
@@ -2972,7 +2975,7 @@
 	  let div_style_value;
 	  let if_block =
 	  /*heading*/
-	  ctx[5] && create_if_block$e(ctx);
+	  ctx[5] && create_if_block$f(ctx);
 	  return {
 	    c() {
 	      div = element("div");
@@ -3051,7 +3054,7 @@
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
-	          if_block = create_if_block$e(ctx);
+	          if_block = create_if_block$f(ctx);
 	          if_block.c();
 	          if_block.m(span1, t1);
 	        }
@@ -3094,7 +3097,7 @@
 	  };
 	}
 
-	function instance$u($$self, $$props, $$invalidate) {
+	function instance$v($$self, $$props, $$invalidate) {
 	  let iconType;
 	  const [Types, validateType] = typeValidator("Callout type", ["emergency", "important", "information", "event", "success"], true);
 	  let {
@@ -3146,12 +3149,12 @@
 	class Callout extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.notification{display:flex;align-items:stretch;border-radius:3px;overflow:hidden}h3{font-size:var(--fs-xl);line-height:var(--lh-base);font-weight:var(--fw-regular);margin-top:0}.emergency{background-color:var(--goa-color-status-emergency)}.important{background-color:var(--goa-color-status-warning)}.information{background-color:var(--goa-color-status-info)}.event{background-color:var(--goa-color-status-info)}.success{background-color:var(--goa-color-status-success)}.icon{flex:0 0 3rem;text-align:center;padding-top:1.75rem}.content{flex:1 1 auto;background-color:var(--color-gray-100);padding:1.75rem}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.notification{display:flex;align-items:stretch;border-radius:3px;overflow:hidden}h3{font-size:var(--goa-font-size-7);line-height:var(--goa-line-height-2);font-weight:var(--goa-font-weight-regular);margin-top:0}.emergency{background-color:var(--goa-color-emergency-default)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default)}.event{background-color:var(--goa-color-info-default)}.success{background-color:var(--goa-color-success-default)}.icon{flex:0 0 3rem;text-align:center;padding-top:1.75rem}.content{flex:1 1 auto;background-color:var(--goa-color-greyscale-100);padding:1.75rem}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$u, create_fragment$A, safe_not_equal, {
+	    }, instance$v, create_fragment$B, safe_not_equal, {
 	      mt: 0,
 	      mr: 1,
 	      mb: 2,
@@ -3259,7 +3262,7 @@
 	customElements.define("goa-callout", Callout);
 	/* libs/web-components/src/components/card-actions/CardActions.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$z(ctx) {
+	function create_fragment$A(ctx) {
 	  let goa_card_content;
 	  return {
 	    c() {
@@ -3290,7 +3293,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$z, safe_not_equal, {}, null);
+	    }, null, create_fragment$A, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -3304,7 +3307,7 @@
 	customElements.define("goa-card-actions", CardActions);
 	/* libs/web-components/src/components/card/Card.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$y(ctx) {
+	function create_fragment$z(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -3331,7 +3334,7 @@
 	      /*ml*/
 	      ctx[6]) + " " + (
 	      /*elevation*/
-	      ctx[0] === 0 ? `border: 1px solid var(--color-gray-200);` : `box-shadow: var(--shadow-${
+	      ctx[0] === 0 ? `border: 1px solid var(--goa-color-greyscale-200);` : `box-shadow: var(--shadow-${
       /*elevation*/
       ctx[0]});`) + "");
 	    },
@@ -3366,7 +3369,7 @@
 	      /*ml*/
 	      ctx[6]) + " " + (
 	      /*elevation*/
-	      ctx[0] === 0 ? `border: 1px solid var(--color-gray-200);` : `box-shadow: var(--shadow-${
+	      ctx[0] === 0 ? `border: 1px solid var(--goa-color-greyscale-200);` : `box-shadow: var(--shadow-${
       /*elevation*/
       ctx[0]});`) + "")) {
 	        attr(div, "style", div_style_value);
@@ -3383,7 +3386,7 @@
 	  };
 	}
 
-	function instance$t($$self, $$props, $$invalidate) {
+	function instance$u($$self, $$props, $$invalidate) {
 	  let {
 	    elevation = 0
 	  } = $$props;
@@ -3426,12 +3429,12 @@
 	class Card extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.card{background-color:var(--color-white);border-radius:4px;overflow:hidden;height:var(--height)}@media(min-width: 320px){.card{margin:0 auto}}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.card{background-color:var(--goa-color-greyscale-white);border-radius:4px;overflow:hidden;height:var(--height)}@media(min-width: 320px){.card{margin:0 auto}}</style>`;
 	    init(this, {
 	      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, {
 	      elevation: 0,
 	      width: 1,
 	      height: 2,
@@ -3551,7 +3554,7 @@
 	customElements.define("goa-card", Card);
 	/* libs/web-components/src/components/card-content/CardContent.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$x(ctx) {
+	function create_fragment$y(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -3579,12 +3582,12 @@
 	class CardContent extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.card-content{padding:1rem}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.card-content{padding:1rem}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$x, safe_not_equal, {}, null);
+	    }, null, create_fragment$y, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -3598,7 +3601,7 @@
 	customElements.define("goa-card-content", CardContent);
 	/* libs/web-components/src/components/card-group/CardGroup.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$w(ctx) {
+	function create_fragment$x(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -3626,12 +3629,12 @@
 	class CardGroup extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.card-group{display:flex;flex-wrap:wrap;justify-content:space-around;gap:1rem;width:100%}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.card-group{display:flex;flex-wrap:wrap;justify-content:space-around;gap:1rem;width:100%}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$w, safe_not_equal, {}, null);
+	    }, null, create_fragment$x, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -3645,7 +3648,7 @@
 	customElements.define("goa-card-group", CardGroup);
 	/* libs/web-components/src/components/card-image/CardImage.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$v(ctx) {
+	function create_fragment$w(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -3693,7 +3696,7 @@
 	  };
 	}
 
-	function instance$s($$self, $$props, $$invalidate) {
+	function instance$t($$self, $$props, $$invalidate) {
 	  let {
 	    src
 	  } = $$props;
@@ -3712,12 +3715,12 @@
 	class CardImage extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$s, create_fragment$v, safe_not_equal, {
+	    }, instance$t, create_fragment$w, safe_not_equal, {
 	      src: 0,
 	      height: 1
 	    }, null);
@@ -3792,7 +3795,7 @@
 	} // (68:4) {#if isIndeterminate}
 
 
-	function create_if_block$d(ctx) {
+	function create_if_block$e(ctx) {
 	  let svg;
 	  let rect;
 	  return {
@@ -3819,7 +3822,7 @@
 	  };
 	}
 
-	function create_fragment$u(ctx) {
+	function create_fragment$v(ctx) {
 	  let label;
 	  let div0;
 	  let input;
@@ -3837,7 +3840,7 @@
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*isIndeterminate*/
-	    ctx[10]) return create_if_block$d;
+	    ctx[10]) return create_if_block$e;
 	    if (
 	    /*isChecked*/
 	    ctx[9]) return create_if_block_1$8;
@@ -4068,7 +4071,7 @@
 	  };
 	}
 
-	function instance$r($$self, $$props, $$invalidate) {
+	function instance$s($$self, $$props, $$invalidate) {
 	  let isDisabled;
 	  let isError;
 	  let isChecked;
@@ -4178,12 +4181,12 @@
 	class Checkbox extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);display:block}.goa-checkbox{display:inline-flex;align-items:center;min-height:calc(3rem - 4px);cursor:pointer}.goa-checkbox input[type="checkbox"]{opacity:0;position:absolute;cursor:pointer}.goa-checkbox--disabled{opacity:40%}.goa-checkbox-container{box-sizing:border-box;border:1px solid var(--color-gray-600);border-radius:2px;background-color:var(--color-white);height:1.5rem;width:1.5rem;display:flex;justify-content:center;padding:3px;flex:0 0 auto}.goa-checkbox-container svg{fill:var(--color-white)}.goa-checkbox-container.goa-checkbox--selected{background-color:var(--goa-color-interactive)}.goa-checkbox-container.goa-checkbox--selected:hover{background-color:var(--goa-color-interactive--hover)}.goa-checkbox-container:hover{border:1px solid var(--goa-color-interactive--hover)}.goa-checkbox-container:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.goa-checkbox-text{padding-left:0.5rem;user-select:none;font-weight:var(--fw-regular)}.goa-checkbox--disabled .goa-checkbox-container,.goa-checkbox--disabled .goa-checkbox-container:hover{border:1px solid var(--color-gray-400)}.goa-checkbox--error .goa-checkbox-container,.goa-checkbox--error .goa-checkbox-container:hover{border:1px solid var(--goa-color-status-emergency);box-shadow:inset 0 0 0 1px var(--goa-color-status-emergency);background-color:var(--color-white)}.goa-checkbox--error .goa-checkbox-container svg{fill:var(--goa-color-status-emergency)}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);display:block}.goa-checkbox{display:inline-flex;align-items:center;min-height:calc(3rem - 4px);cursor:pointer}.goa-checkbox input[type="checkbox"]{opacity:0;position:absolute;cursor:pointer}.goa-checkbox--disabled .goa-checkbox-text{opacity:40%}.goa-checkbox--disabled:hover{cursor:default}.goa-checkbox-container{box-sizing:border-box;border:1px solid var(--goa-color-greyscale-700);border-radius:2px;background-color:var(--goa-color-greyscale-white);height:1.5rem;width:1.5rem;display:flex;justify-content:center;padding:3px;flex:0 0 auto}.goa-checkbox-container svg{fill:var(--goa-color-greyscale-white)}.goa-checkbox-container.goa-checkbox--selected{background-color:var(--goa-color-interactive-default)}.goa-checkbox-container.goa-checkbox--selected:hover{background-color:var(--goa-color-interactive-hover)}.goa-checkbox-container:hover{border:1px solid var(--goa-color-interactive-hover)}.goa-checkbox-container:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.goa-checkbox-text{padding-left:0.5rem;user-select:none;font-weight:var(--goa-font-weight-regular)}.goa-checkbox--disabled .goa-checkbox-container,.goa-checkbox--disabled .goa-checkbox-container:hover{border:1px solid var(--goa-color-greyscale-400)}.goa-checkbox--error .goa-checkbox-container,.goa-checkbox--error .goa-checkbox-container:hover{border:1px solid var(--goa-color-emergency-default);box-shadow:inset 0 0 0 1px var(--goa-color-emergency-default);background-color:var(--goa-color-greyscale-white)}.goa-checkbox--error .goa-checkbox-container svg{fill:var(--goa-color-emergency-default)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$r, create_fragment$u, safe_not_equal, {
+	    }, instance$s, create_fragment$v, safe_not_equal, {
 	      name: 0,
 	      checked: 14,
 	      text: 1,
@@ -4385,7 +4388,7 @@
 	} // (54:2) {#if _deletable}
 
 
-	function create_if_block$c(ctx) {
+	function create_if_block$d(ctx) {
 	  let goa_icon;
 	  let goa_icon_fillcolor_value;
 	  let goa_icon_opacity_value;
@@ -4398,9 +4401,9 @@
 	      set_custom_element_data(goa_icon, "type", "close-circle");
 	      set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value =
 	      /*_error*/
-	      ctx[10] ? "var(--goa-color-status-emergency)" :
+	      ctx[10] ? "var(--goa-color-emergency-default)" :
 	      /*_hovering*/
-	      ctx[9] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)");
+	      ctx[9] ? "var(--goa-color-interactive-hover)" : "var(--goa-color-greyscale-700)");
 	      set_custom_element_data(goa_icon, "opacity", goa_icon_opacity_value =
 	      /*_error*/
 	      ctx[10] ?
@@ -4417,9 +4420,9 @@
 	      /*_error, _hovering*/
 	      1536 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value =
 	      /*_error*/
-	      ctx[10] ? "var(--goa-color-status-emergency)" :
+	      ctx[10] ? "var(--goa-color-emergency-default)" :
 	      /*_hovering*/
-	      ctx[9] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)")) {
+	      ctx[9] ? "var(--goa-color-interactive-hover)" : "var(--goa-color-greyscale-700)")) {
 	        set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value);
 	      }
 
@@ -4441,7 +4444,7 @@
 	  };
 	}
 
-	function create_fragment$t(ctx) {
+	function create_fragment$u(ctx) {
 	  let div1;
 	  let t0;
 	  let div0;
@@ -4455,7 +4458,7 @@
 	  ctx[4] && create_if_block_1$7(ctx);
 	  let if_block1 =
 	  /*_deletable*/
-	  ctx[11] && create_if_block$c(ctx);
+	  ctx[11] && create_if_block$d(ctx);
 	  return {
 	    c() {
 	      div1 = element("div");
@@ -4550,7 +4553,7 @@
 	        if (if_block1) {
 	          if_block1.p(ctx, dirty);
 	        } else {
-	          if_block1 = create_if_block$c(ctx);
+	          if_block1 = create_if_block$d(ctx);
 	          if_block1.c();
 	          if_block1.m(div1, null);
 	        }
@@ -4623,7 +4626,7 @@
 	  };
 	}
 
-	function instance$q($$self, $$props, $$invalidate) {
+	function instance$r($$self, $$props, $$invalidate) {
 	  let {
 	    mt = null
 	  } = $$props;
@@ -4719,12 +4722,12 @@
 	class Chip extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>.leading-icon{margin-left:-0.25rem}.chip{vertical-align:middle;align-items:center;background-color:var(--color-white);border-radius:99px;border:1px solid #949494;box-sizing:border-box;color:var(--goa-color-text);display:inline-flex;flex-direction:row;font-size:var(--chip-font-size);font-weight:var(--fw-regular);gap:0.25rem;height:2rem;justify-content:center;padding:0 0.75rem;cursor:default}.text{padding-bottom:var(--font-valign-fix)}.chip:focus{outline:2px solid var(--goa-color-interactive--focus);background-color:var(--color-white)}.chip:hover{background-color:var(--color-gray-200)}.deletable{cursor:pointer}.delete-icon{margin-right:-0.25rem}.error,.error:hover{background-color:var(--goa-color-status-emergency-light)}</style>`;
+	    this.shadowRoot.innerHTML = `<style>.leading-icon{margin-left:-0.25rem}.chip{vertical-align:middle;align-items:center;background-color:var(--goa-color-greyscale-white);border-radius:99px;border:1px solid #949494;box-sizing:border-box;color:var(--goa-color-text-default);display:inline-flex;flex-direction:row;font-size:var(--goa-font-size-3);font-weight:var(--goa-font-weight-regular);gap:0.25rem;height:2rem;justify-content:center;padding:0 0.75rem;cursor:default}.text{padding-bottom:var(--font-valign-fix, 0)}.chip:focus{outline:2px solid var(--goa-color-interactive-focus);background-color:var(--goa-color-greyscale-white)}.chip:hover{background-color:var(--goa-color-greyscale-200)}.deletable{cursor:pointer}.delete-icon{margin-right:-0.25rem}.error,.error:hover{background-color:var(--goa-color-emergency-light)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$q, create_fragment$t, safe_not_equal, {
+	    }, instance$r, create_fragment$u, safe_not_equal, {
 	      mt: 0,
 	      mr: 1,
 	      mb: 2,
@@ -4981,7 +4984,7 @@
 	/* libs/web-components/src/components/circular-progress/CircularProgress.svelte generated by Svelte v3.51.0 */
 
 
-	function create_if_block$b(ctx) {
+	function create_if_block$c(ctx) {
 	  let current_block_type_index;
 	  let if_block;
 	  let if_block_anchor;
@@ -5352,12 +5355,12 @@
 	  };
 	}
 
-	function create_fragment$s(ctx) {
+	function create_fragment$t(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
 	  /*isVisible*/
-	  ctx[5] && create_if_block$b(ctx);
+	  ctx[5] && create_if_block$c(ctx);
 	  return {
 	    c() {
 	      if (if_block) if_block.c();
@@ -5384,7 +5387,7 @@
 	            transition_in(if_block, 1);
 	          }
 	        } else {
-	          if_block = create_if_block$b(ctx);
+	          if_block = create_if_block$c(ctx);
 	          if_block.c();
 	          transition_in(if_block, 1);
 	          if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -5417,7 +5420,7 @@
 	  };
 	}
 
-	function instance$p($$self, $$props, $$invalidate) {
+	function instance$q($$self, $$props, $$invalidate) {
 	  let isVisible;
 	  const [Variants, validateVariant] = typeValidator("Circular progress variant", ["fullscreen", "inline"]);
 	  const [Sizes, validateSize] = typeValidator("Button size", ["small", "large"]);
@@ -5470,12 +5473,12 @@
 	class CircularProgress extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.fullscreen{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:rgba(255, 255, 255, 0.9)}.inline{margin:3.5rem;display:inline-flex;flex-direction:column;align-items:center;justify-content:center}.spinner-large .message{margin-top:1.5rem;font-size:1.2rem}.spinner-xlarge .message{margin-top:2rem;font-size:1.5rem}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.fullscreen{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:rgba(255, 255, 255, 0.9)}.inline{margin:3.5rem;display:inline-flex;flex-direction:column;align-items:center;justify-content:center}.spinner-large .message{margin-top:1.5rem;font-size:1.2rem}.spinner-xlarge .message{margin-top:2rem;font-size:1.5rem}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$p, create_fragment$s, safe_not_equal, {
+	    }, instance$q, create_fragment$t, safe_not_equal, {
 	      variant: 6,
 	      size: 7,
 	      message: 0,
@@ -5559,7 +5562,7 @@
 	customElements.define("goa-circular-progress", CircularProgress);
 	/* libs/web-components/src/components/container/Container.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$r(ctx) {
+	function create_fragment$s(ctx) {
 	  let div3;
 	  let header;
 	  let div0;
@@ -5684,7 +5687,7 @@
 	  };
 	}
 
-	function instance$o($$self, $$props, $$invalidate) {
+	function instance$p($$self, $$props, $$invalidate) {
 	  const [Types, validateType] = typeValidator("Container type", ["interactive", "info", "error", "success", "important", "non-interactive"]);
 	  const [Accents, validateAccent] = typeValidator("Container accent", ["thick", "thin", "filled"]);
 	  const [Paddings, validatePadding] = typeValidator("Container padding", ["relaxed", "compact"]);
@@ -5735,12 +5738,12 @@
 	class Container extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--non-interactive.accent--filled .content{border-color:var(--color-gray-200);background-color:var(--color-gray-100)}.goa-container--important.accent--filled .content{border-color:var(--goa-color-status-warning);background-color:var(--goa-color-status-warning-50)}.goa-container--error.accent--filled .content{border-color:var(--goa-color-status-emergency);background-color:var(--goa-color-status-emergency-50)}.goa-container--success.accent--filled .content{border-color:var(--goa-color-status-success);background-color:var(--goa-color-status-success-50)}.goa-container--info.accent--filled .content{border-color:var(--goa-color-status-info);background-color:var(--goa-color-status-info-50)}.title,.actions{padding:0.5rem 0}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-black)}.goa-container--interactive header{background-color:var(--goa-color-brand);border-color:var(--goa-color-brand);color:var(--color-white)}.goa-container--info header{background-color:var(--goa-color-status-info);border-color:var(--goa-color-status-info);color:var(--color-white)}.goa-container--error header{background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);color:var(--color-white)}.goa-container--success header{background-color:var(--goa-color-status-success);border-color:var(--goa-color-status-success);color:var(--color-white)}.goa-container--important header{background-color:var(--goa-color-status-warning);border-color:var(--goa-color-status-warning);color:var(--color-white)}.heading--thick{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--thick .title{line-height:2rem}.heading--thin{height:0.5rem}.heading--filled{display:none}.heading--filled~.content{border-top:1px solid var(--color-gray-200);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.heading--thin .title,.heading--thin .actions{display:none}.actions{display:flex;align-items:center}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4)}.goa-container{box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--goa-font-size-4);border-width:1px;border-style:solid;border-top-left-radius:var(--goa-border-radius-m);border-top-right-radius:var(--goa-border-radius-m)}.content{border-bottom:1px solid var(--goa-color-greyscale-200);border-left:1px solid var(--goa-color-greyscale-200);border-right:1px solid var(--goa-color-greyscale-200);border-bottom-left-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m)}.goa-container--non-interactive.accent--filled .content{border-color:var(--goa-color-greyscale-200);background-color:var(--goa-color-greyscale-100)}.goa-container--important.accent--filled .content{border-color:var(--goa-color-warning-default);background-color:var(--goa-color-warning-background)}.goa-container--error.accent--filled .content{border-color:var(--goa-color-emergency-default);background-color:var(--goa-color-emergency-background)}.goa-container--success.accent--filled .content{border-color:var(--goa-color-success-default);background-color:var(--goa-color-success-background)}.goa-container--info.accent--filled .content{border-color:var(--goa-color-info-default);background-color:var(--goa-color-info-background)}.title,.actions{padding:0.5rem 0}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);color:var(--goa-color-greyscale-black)}.goa-container--interactive header{background-color:var(--goa-color-brand-default);border-color:var(--goa-color-brand-default);color:var(--goa-color-greyscale-white)}.goa-container--info header{background-color:var(--goa-color-info-default);border-color:var(--goa-color-info-default);color:var(--goa-color-greyscale-white)}.goa-container--error header{background-color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default);color:var(--goa-color-greyscale-white)}.goa-container--success header{background-color:var(--goa-color-success-default);border-color:var(--goa-color-success-default);color:var(--goa-color-greyscale-white)}.goa-container--important header{background-color:var(--goa-color-warning-default);border-color:var(--goa-color-warning-default);color:var(--goa-color-greyscale-white)}.heading--thick{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--thick .title{line-height:2rem}.heading--thin{height:0.5rem}.heading--filled{display:none}.heading--filled~.content{border-top:1px solid var(--goa-color-greyscale-200);border-top-left-radius:var(--goa-border-radius-m);border-top-right-radius:var(--goa-border-radius-m)}.heading--thin .title,.heading--thin .actions{display:none}.actions{display:flex;align-items:center}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$o, create_fragment$r, safe_not_equal, {
+	    }, instance$p, create_fragment$s, safe_not_equal, {
 	      type: 0,
 	      accent: 1,
 	      padding: 2,
@@ -5860,7 +5863,7 @@
 	customElements.define("goa-container", Container);
 	/* libs/web-components/src/components/divider/Divider.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$q(ctx) {
+	function create_fragment$r(ctx) {
 	  let hr;
 	  let hr_style_value;
 	  return {
@@ -5919,7 +5922,7 @@
 	  };
 	}
 
-	function instance$n($$self, $$props, $$invalidate) {
+	function instance$o($$self, $$props, $$invalidate) {
 	  let {
 	    testid = ""
 	  } = $$props;
@@ -5950,12 +5953,12 @@
 	class Divider extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>hr{padding:0;margin:0;height:1px;background-color:var(--color-gray-200);border:none}</style>`;
+	    this.shadowRoot.innerHTML = `<style>hr{padding:0;margin:0;height:1px;background-color:var(--goa-color-greyscale-200);border:none}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$n, create_fragment$q, safe_not_equal, {
+	    }, instance$o, create_fragment$r, safe_not_equal, {
 	      testid: 0,
 	      mt: 1,
 	      mr: 2,
@@ -6041,25 +6044,25 @@
 
 	function get_each_context_1(ctx, list, i) {
 	  const child_ctx = ctx.slice();
-	  child_ctx[48] = list[i];
-	  child_ctx[52] = i;
+	  child_ctx[49] = list[i];
+	  child_ctx[53] = i;
 	  return child_ctx;
 	}
 
 	function get_each_context$4(ctx, list, i) {
 	  const child_ctx = ctx.slice();
-	  child_ctx[48] = list[i];
+	  child_ctx[49] = list[i];
 	  return child_ctx;
-	} // (244:2) {:else}
+	} // (256:2) {:else}
 
 
 	function create_else_block$1(ctx) {
 	  let t0;
-	  let slot;
-	  let t1;
 	  let goa_input;
 	  let goa_input_arialabel_value;
 	  let goa_input_data_testid_value;
+	  let t1;
+	  let slot;
 	  let t2;
 	  let ul;
 	  let each_blocks = [];
@@ -6076,7 +6079,7 @@
 
 	  const get_key = ctx =>
 	  /*index*/
-	  ctx[52];
+	  ctx[53];
 
 	  for (let i = 0; i < each_value_1.length; i += 1) {
 	    let child_ctx = get_each_context_1(ctx, each_value_1, i);
@@ -6088,9 +6091,9 @@
 	    c() {
 	      if (if_block) if_block.c();
 	      t0 = space();
-	      slot = element("slot");
-	      t1 = space();
 	      goa_input = element("goa-input");
+	      t1 = space();
+	      slot = element("slot");
 	      t2 = space();
 	      ul = element("ul");
 
@@ -6152,9 +6155,9 @@
 	    m(target, anchor) {
 	      if (if_block) if_block.m(target, anchor);
 	      insert(target, t0, anchor);
-	      insert(target, slot, anchor);
-	      insert(target, t1, anchor);
 	      insert(target, goa_input, anchor);
+	      insert(target, t1, anchor);
+	      insert(target, slot, anchor);
 	      insert(target, t2, anchor);
 	      insert(target, ul, anchor);
 
@@ -6301,9 +6304,9 @@
 	    d(detaching) {
 	      if (if_block) if_block.d(detaching);
 	      if (detaching) detach(t0);
-	      if (detaching) detach(slot);
-	      if (detaching) detach(t1);
 	      if (detaching) detach(goa_input);
+	      if (detaching) detach(t1);
+	      if (detaching) detach(slot);
 	      if (detaching) detach(t2);
 	      if (detaching) detach(ul);
 
@@ -6319,10 +6322,10 @@
 	    }
 
 	  };
-	} // (225:2) {#if _native}
+	} // (237:2) {#if _native}
 
 
-	function create_if_block$a(ctx) {
+	function create_if_block$b(ctx) {
 	  let select;
 	  let slot;
 	  let select_aria_label_value;
@@ -6445,7 +6448,7 @@
 	    }
 
 	  };
-	} // (245:4) {#if _isMenuVisible}
+	} // (257:4) {#if _isMenuVisible}
 
 
 	function create_if_block_1$5(ctx) {
@@ -6490,16 +6493,16 @@
 	    }
 
 	  };
-	} // (288:6) {#each _options as option, index (index)}
+	} // (300:6) {#each _options as option, index (index)}
 
 
 	function create_each_block_1(key_1, ctx) {
 	  let li;
 	  let t0_value = (
 	  /*option*/
-	  ctx[48].label ||
+	  ctx[49].label ||
 	  /*option*/
-	  ctx[48].value) + "";
+	  ctx[49].value) + "";
 	  let t0;
 	  let t1;
 	  let li_id_value;
@@ -6517,7 +6520,7 @@
 	      /*click_handler*/
 	      ctx[32](
 	      /*option*/
-	      ctx[48])
+	      ctx[49])
 	    );
 	  }
 
@@ -6531,40 +6534,40 @@
 	      t1 = space();
 	      attr(li, "id", li_id_value =
 	      /*option*/
-	      ctx[48].label);
+	      ctx[49].label);
 	      attr(li, "role", "option");
 	      attr(li, "aria-label", li_aria_label_value =
 	      /*option*/
-	      ctx[48].label ||
+	      ctx[49].label ||
 	      /*option*/
-	      ctx[48].value);
+	      ctx[49].value);
 	      attr(li, "aria-selected", li_aria_selected_value =
 	      /*_values*/
 	      ctx[12].includes(
 	      /*option*/
-	      ctx[48].value) ? "true" : "false");
+	      ctx[49].value) ? "true" : "false");
 	      attr(li, "class", "dropdown-item");
 	      attr(li, "data-testid", li_data_testid_value = `dropdown-item-${
       /*option*/
-      ctx[48].value}`);
+      ctx[49].value}`);
 	      attr(li, "data-index", li_data_index_value =
 	      /*index*/
-	      ctx[52]);
+	      ctx[53]);
 	      attr(li, "data-value", li_data_value_value =
 	      /*option*/
-	      ctx[48].value);
+	      ctx[49].value);
 	      attr(li, "style", li_style_value = `display: ${"block"}`);
 	      toggle_class(li, "dropdown-item--disabled", false);
 	      toggle_class(li, "dropdown-item--tabbed",
 	      /*index*/
-	      ctx[52] ===
+	      ctx[53] ===
 	      /*_highlightedIndex*/
 	      ctx[16]);
 	      toggle_class(li, "dropdown-item--selected",
 	      /*_values*/
 	      ctx[12].includes(
 	      /*option*/
-	      ctx[48].value));
+	      ctx[49].value));
 	      this.first = li;
 	    },
 
@@ -6585,15 +6588,15 @@
 	      /*_options*/
 	      8192 && t0_value !== (t0_value = (
 	      /*option*/
-	      ctx[48].label ||
+	      ctx[49].label ||
 	      /*option*/
-	      ctx[48].value) + "")) set_data(t0, t0_value);
+	      ctx[49].value) + "")) set_data(t0, t0_value);
 
 	      if (dirty[0] &
 	      /*_options*/
 	      8192 && li_id_value !== (li_id_value =
 	      /*option*/
-	      ctx[48].label)) {
+	      ctx[49].label)) {
 	        attr(li, "id", li_id_value);
 	      }
 
@@ -6601,9 +6604,9 @@
 	      /*_options*/
 	      8192 && li_aria_label_value !== (li_aria_label_value =
 	      /*option*/
-	      ctx[48].label ||
+	      ctx[49].label ||
 	      /*option*/
-	      ctx[48].value)) {
+	      ctx[49].value)) {
 	        attr(li, "aria-label", li_aria_label_value);
 	      }
 
@@ -6613,7 +6616,7 @@
 	      /*_values*/
 	      ctx[12].includes(
 	      /*option*/
-	      ctx[48].value) ? "true" : "false")) {
+	      ctx[49].value) ? "true" : "false")) {
 	        attr(li, "aria-selected", li_aria_selected_value);
 	      }
 
@@ -6621,7 +6624,7 @@
 	      /*_options*/
 	      8192 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${
       /*option*/
-      ctx[48].value}`)) {
+      ctx[49].value}`)) {
 	        attr(li, "data-testid", li_data_testid_value);
 	      }
 
@@ -6629,7 +6632,7 @@
 	      /*_options*/
 	      8192 && li_data_index_value !== (li_data_index_value =
 	      /*index*/
-	      ctx[52])) {
+	      ctx[53])) {
 	        attr(li, "data-index", li_data_index_value);
 	      }
 
@@ -6637,7 +6640,7 @@
 	      /*_options*/
 	      8192 && li_data_value_value !== (li_data_value_value =
 	      /*option*/
-	      ctx[48].value)) {
+	      ctx[49].value)) {
 	        attr(li, "data-value", li_data_value_value);
 	      }
 
@@ -6646,7 +6649,7 @@
 	      73728) {
 	        toggle_class(li, "dropdown-item--tabbed",
 	        /*index*/
-	        ctx[52] ===
+	        ctx[53] ===
 	        /*_highlightedIndex*/
 	        ctx[16]);
 	      }
@@ -6658,7 +6661,7 @@
 	        /*_values*/
 	        ctx[12].includes(
 	        /*option*/
-	        ctx[48].value));
+	        ctx[49].value));
 	      }
 	    },
 
@@ -6669,14 +6672,14 @@
 	    }
 
 	  };
-	} // (234:6) {#each _options as option}
+	} // (246:6) {#each _options as option}
 
 
 	function create_each_block$4(ctx) {
 	  let option;
 	  let t0_value =
 	  /*option*/
-	  ctx[48].label + "";
+	  ctx[49].label + "";
 	  let t0;
 	  let t1;
 	  let option_selected_value;
@@ -6689,14 +6692,14 @@
 	      t1 = space();
 	      option.selected = option_selected_value =
 	      /*option*/
-	      ctx[48].selected;
+	      ctx[49].selected;
 	      option.__value = option_value_value =
 	      /*option*/
-	      ctx[48].value;
+	      ctx[49].value;
 	      option.value = option.__value;
 	      attr(option, "aria-label", option_aria_label_value =
 	      /*option*/
-	      ctx[48].label);
+	      ctx[49].label);
 	    },
 
 	    m(target, anchor) {
@@ -6710,13 +6713,13 @@
 	      /*_options*/
 	      8192 && t0_value !== (t0_value =
 	      /*option*/
-	      ctx[48].label + "")) set_data(t0, t0_value);
+	      ctx[49].label + "")) set_data(t0, t0_value);
 
 	      if (dirty[0] &
 	      /*_options*/
 	      8192 && option_selected_value !== (option_selected_value =
 	      /*option*/
-	      ctx[48].selected)) {
+	      ctx[49].selected)) {
 	        option.selected = option_selected_value;
 	      }
 
@@ -6724,7 +6727,7 @@
 	      /*_options*/
 	      8192 && option_value_value !== (option_value_value =
 	      /*option*/
-	      ctx[48].value)) {
+	      ctx[49].value)) {
 	        option.__value = option_value_value;
 	        option.value = option.__value;
 	      }
@@ -6733,7 +6736,7 @@
 	      /*_options*/
 	      8192 && option_aria_label_value !== (option_aria_label_value =
 	      /*option*/
-	      ctx[48].label)) {
+	      ctx[49].label)) {
 	        attr(option, "aria-label", option_aria_label_value);
 	      }
 	    },
@@ -6745,7 +6748,7 @@
 	  };
 	}
 
-	function create_fragment$p(ctx) {
+	function create_fragment$q(ctx) {
 	  let div;
 	  let div_data_testid_value;
 	  let div_style_value;
@@ -6753,7 +6756,7 @@
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*_native*/
-	    ctx[22]) return create_if_block$a;
+	    ctx[22]) return create_if_block$b;
 	    return create_else_block$1;
 	  }
 
@@ -6862,21 +6865,7 @@
 	  };
 	}
 
-	function getCustomDropdownWidth(options) {
-	  let width;
-	  let maxCount = 0;
-	  options.forEach(option => {
-	    const label = option.label || option.value || "";
-
-	    if (!width && maxCount < label.length) {
-	      maxCount = label.length;
-	      width = `${Math.max(20, maxCount + 12)}ch`;
-	    }
-	  });
-	  return width;
-	}
-
-	function instance$m($$self, $$props, $$invalidate) {
+	function instance$n($$self, $$props, $$invalidate) {
 	  const showMenu = _async(function () {
 	    if (_disabled || _isMenuVisible) {
 	      return;
@@ -6969,7 +6958,16 @@
 	        $$invalidate(17, _computedWidth = getCustomDropdownWidth(_options));
 	        addKeyboardEventListeners();
 	        setHighlightedIndexToSelected();
-	      }
+	      } // watch for DOM changes within the slot => dynamic binding
+
+
+	      const slot = _el.querySelector("slot");
+
+	      slot === null || slot === void 0 ? void 0 : slot.addEventListener("slotchange", _e => {
+	        $$invalidate(14, _selectedLabel = "");
+	        $$invalidate(12, _values = parseValues());
+	        $$invalidate(13, _options = getOptions());
+	      });
 	    });
 	  });
 	  onDestroy(() => {
@@ -6994,7 +6992,7 @@
 
 	  function getOptions() {
 	    const children = getChildren();
-	    return children.map(el => {
+	    return children.filter(child => child.tagName === "GOA-DROPDOWN-ITEM").map(el => {
 	      const option = el;
 	      const value = el.getAttribute("value") || option.value;
 	      const label = el.getAttribute("label") || option.label || value;
@@ -7012,6 +7010,26 @@
 	        label
 	      };
 	    });
+	  } // compute the required width to enure all children fit
+
+
+	  function getCustomDropdownWidth(options) {
+	    let width;
+	    let maxCount = 0;
+
+	    if (options.length === 0 && placeholder !== "") {
+	      return `${placeholder.length + 12}ch`;
+	    }
+
+	    options.forEach(option => {
+	      const label = option.label || option.value || "";
+
+	      if (!width && maxCount < label.length) {
+	        maxCount = label.length;
+	        width = `${Math.max(20, maxCount + 12)}ch`;
+	      }
+	    });
+	    return width;
 	  }
 
 	  function addKeyboardEventListeners() {
@@ -7234,12 +7252,12 @@
 	class Dropdown extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.dropdown{position:relative;cursor:pointer;display:inline-block;width:100%}@media(min-width: 640px){.dropdown{width:var(--width)}}.dropdown-background{cursor:default;position:fixed;z-index:98;inset:0}.dropdown-list{position:absolute;left:0;right:0;padding:0;margin:0;margin-top:3px;list-style-type:none;background:var(--color-white);border-radius:var(--input-border-radius);outline:none;box-shadow:var(--shadow-1);z-index:99;scroll-behavior:smooth;scrollbar-width:thin;display:none}.dropdown-active{display:block}.dropdown-list::-webkit-scrollbar{width:6px}.dropdown-list::-webkit-scrollbar-track{background:#f1f1f1}.dropdown-list::-webkit-scrollbar-thumb{background:#888}.dropdown-list::-webkit-scrollbar-thumb:hover{background:#555}.dropdown-item{margin:0;padding:0.5rem;cursor:pointer;color:var(--color-black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-item--tabbed{background:var(--color-gray-100);color:var(--goa-color-interactive--hover)}.dropdown-item--disabled{opacity:0.5;cursor:default}.dropdown-item--disabled:hover{cursor:default;color:var(--color-gray-600)}.dropdown-item--selected{background:var(--goa-color-interactive);color:var(--color-white)}.dropdown-item--tabbed.dropdown-item--selected,.dropdown-item--selected:hover{background:var(--goa-color-interactive--hover);color:var(--color-white)}.dropdown-native{border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);background-color:var(--color-white)}.dropdown-native:has(select:disabled){background-color:var(--color-gray-100);border-color:var(--color-gray-200);box-shadow:none;color:var(--goa-color-text-secondary);cursor:default}.dropdown-native:has(select.error){border:2px solid var(--goa-color-interactive--error)}select{border:none;background-color:transparent;color:var(--goa-color-text);font-size:var(--input-font-size);appearance:none;padding:calc(var(--input-padding) + 2px);padding-left:0.5rem;padding-right:3rem;outline:none;width:100%}.dropdown-native::after{content:"";position:absolute;right:0.6rem;top:0.6rem;pointer-events:none;width:1.5rem;height:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144' /%3E%3C/svg%3E");background-repeat:none}.dropdown-native:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.dropdown{position:relative;cursor:pointer;display:inline-block;width:100%}@media(min-width: 640px){.dropdown{width:var(--width)}}.dropdown-background{cursor:default;position:fixed;z-index:98;inset:0}.dropdown-list{position:absolute;left:0;right:0;padding:0;margin:0;margin-top:3px;list-style-type:none;background:var(--goa-color-greyscale-white);border-radius:var(--goa-border-radius-m);outline:none;box-shadow:var(--shadow-1);z-index:99;scroll-behavior:smooth;scrollbar-width:thin;display:none}.dropdown-active{display:block}.dropdown-list::-webkit-scrollbar{width:6px}.dropdown-list::-webkit-scrollbar-track{background:#f1f1f1}.dropdown-list::-webkit-scrollbar-thumb{background:#888}.dropdown-list::-webkit-scrollbar-thumb:hover{background:#555}.dropdown-item{margin:0;padding:0.5rem;cursor:pointer;color:var(--goa-color-greyscale-black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-item--tabbed{background:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover)}.dropdown-item--disabled{opacity:0.5;cursor:default}.dropdown-item--disabled:hover{cursor:default;color:var(--goa-color-greyscale-700)}.dropdown-item--selected{background:var(--goa-color-interactive-default);color:var(--goa-color-greyscale-white)}.dropdown-item--tabbed.dropdown-item--selected,.dropdown-item--selected:hover{background:var(--goa-color-interactive-hover);color:var(--goa-color-greyscale-white)}.dropdown-native{border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);background-color:var(--goa-color-greyscale-white)}.dropdown-native:has(select:disabled){background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);box-shadow:none;color:var(--goa-color-text-secondary);cursor:default}.dropdown-native:has(select.error){border:2px solid var(--goa-color-interactive-error)}select{border:none;background-color:transparent;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);appearance:none;padding:calc(var(--goa-space-xs) + 2px);padding-left:0.5rem;padding-right:3rem;outline:none;width:100%}.dropdown-native::after{content:"";position:absolute;right:0.6rem;top:0.6rem;pointer-events:none;width:1.5rem;height:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144' /%3E%3C/svg%3E");background-repeat:none}.dropdown-native:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$m, create_fragment$p, safe_not_equal, {
+	    }, instance$n, create_fragment$q, safe_not_equal, {
 	      name: 0,
 	      arialabel: 1,
 	      value: 28,
@@ -7443,7 +7461,7 @@
 	customElements.define("goa-dropdown", Dropdown);
 	/* libs/web-components/src/components/dropdown/DropdownItem.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$o(ctx) {
+	function create_fragment$p(ctx) {
 	  return {
 	    c() {
 	      this.c = noop;
@@ -7464,7 +7482,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$o, safe_not_equal, {}, null);
+	    }, null, create_fragment$p, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -7478,7 +7496,7 @@
 	customElements.define("goa-dropdown-item", DropdownItem);
 	/* libs/web-components/src/components/focus-trap/FocusTrap.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$n(ctx) {
+	function create_fragment$o(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -7539,7 +7557,7 @@
 	  }
 	}
 
-	function instance$l($$self, $$props, $$invalidate) {
+	function instance$m($$self, $$props, $$invalidate) {
 	  let isActive;
 	  let {
 	    active
@@ -7708,7 +7726,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, {
 	      active: 1
 	    }, null);
 
@@ -7744,7 +7762,7 @@
 	customElements.define("goa-focus-trap", FocusTrap);
 	/* libs/web-components/src/components/footer/Footer.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block$9(ctx) {
+	function create_if_block$a(ctx) {
 	  let goa_divider;
 	  return {
 	    c() {
@@ -7763,9 +7781,7 @@
 	  };
 	}
 
-	function create_fragment$m(ctx) {
-	  var _ctx$;
-
+	function create_fragment$n(ctx) {
 	  let div5;
 	  let div4;
 	  let div0;
@@ -7781,11 +7797,11 @@
 	  let div5_style_value;
 	  let if_block =
 	  /*navLinks*/
-	  ((_ctx$ = ctx[2]) === null || _ctx$ === void 0 ? void 0 : _ctx$.length) && create_if_block$9();
+	  ctx[2] &&
+	  /*navLinks*/
+	  ctx[2].length > 0 && create_if_block$a();
 	  return {
 	    c() {
-	      var _ctx$2, _ctx$3;
-
 	      div5 = element("div");
 	      div4 = element("div");
 	      div0 = element("div");
@@ -7814,11 +7830,15 @@
 	      attr(div2, "class", "abgov");
 	      toggle_class(div2, "with-meta-links",
 	      /*metaLinks*/
-	      (_ctx$2 = ctx[3]) === null || _ctx$2 === void 0 ? void 0 : _ctx$2.length);
+	      ctx[3] &&
+	      /*metaLinks*/
+	      ctx[3].length > 0);
 	      attr(div3, "class", "meta-section");
 	      toggle_class(div3, "with-meta-links",
 	      /*metaLinks*/
-	      (_ctx$3 = ctx[3]) === null || _ctx$3 === void 0 ? void 0 : _ctx$3.length);
+	      ctx[3] &&
+	      /*metaLinks*/
+	      ctx[3].length > 0);
 	      attr(div4, "class", "content");
 	      attr(div5, "class", "app-footer");
 	      attr(div5, "style", div5_style_value = `--max-content-width: ${
@@ -7846,13 +7866,13 @@
 	    },
 
 	    p(ctx, [dirty]) {
-	      var _ctx$4;
-
 	      if (
 	      /*navLinks*/
-	      (_ctx$4 = ctx[2]) !== null && _ctx$4 !== void 0 && _ctx$4.length) {
+	      ctx[2] &&
+	      /*navLinks*/
+	      ctx[2].length > 0) {
 	        if (if_block) ;else {
-	          if_block = create_if_block$9();
+	          if_block = create_if_block$a();
 	          if_block.c();
 	          if_block.m(div4, t1);
 	        }
@@ -7864,21 +7884,21 @@
 	      if (dirty &
 	      /*metaLinks*/
 	      8) {
-	        var _ctx$5;
-
 	        toggle_class(div2, "with-meta-links",
 	        /*metaLinks*/
-	        (_ctx$5 = ctx[3]) === null || _ctx$5 === void 0 ? void 0 : _ctx$5.length);
+	        ctx[3] &&
+	        /*metaLinks*/
+	        ctx[3].length > 0);
 	      }
 
 	      if (dirty &
 	      /*metaLinks*/
 	      8) {
-	        var _ctx$6;
-
 	        toggle_class(div3, "with-meta-links",
 	        /*metaLinks*/
-	        (_ctx$6 = ctx[3]) === null || _ctx$6 === void 0 ? void 0 : _ctx$6.length);
+	        ctx[3] &&
+	        /*metaLinks*/
+	        ctx[3].length > 0);
 	      }
 
 	      if (dirty &
@@ -7904,7 +7924,7 @@
 	  };
 	}
 
-	function instance$k($$self, $$props, $$invalidate) {
+	function instance$l($$self, $$props, $$invalidate) {
 	  let {
 	    maxcontentwidth = ""
 	  } = $$props;
@@ -7938,12 +7958,12 @@
 	class Footer extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--color-gray-100);border-top:2px solid var(--color-gray-200);border-bottom:1rem solid var(--goa-color-brand)}.content{padding:2rem 1rem;margin:0 auto;width:min(var(--max-content-width), 100%)}@media(min-width: 640px){.content{padding:2rem 1.5rem}}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
+	    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--goa-color-greyscale-100);border-top:2px solid var(--goa-color-greyscale-200);border-bottom:1rem solid var(--goa-color-brand-default)}.content{padding:2rem 1rem;margin:0 auto;width:min(var(--max-content-width), 100%)}@media(min-width: 640px){.content{padding:2rem 1.5rem}}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$k, create_fragment$m, safe_not_equal, {
+	    }, instance$l, create_fragment$n, safe_not_equal, {
 	      maxcontentwidth: 0
 	    }, null);
 
@@ -8033,7 +8053,7 @@
 	  };
 	}
 
-	function create_fragment$l(ctx) {
+	function create_fragment$m(ctx) {
 	  let section;
 	  let div;
 	  let t;
@@ -8121,7 +8141,7 @@
 	  };
 	}
 
-	function instance$j($$self, $$props, $$invalidate) {
+	function instance$k($$self, $$props, $$invalidate) {
 	  let rootEl;
 	  let children = [];
 	  onMount(function () {
@@ -8151,12 +8171,12 @@
 	class FooterMetaSection extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>.hidden{display:none}ul{display:flex;flex-wrap:wrap;gap:1rem;padding-left:0}li{list-style-type:none}a{color:var(--goa-color-text);white-space:nowrap}</style>`;
+	    this.shadowRoot.innerHTML = `<style>.hidden{display:none}ul{display:flex;flex-wrap:wrap;gap:1rem;padding-left:0}li{list-style-type:none}a{color:var(--goa-color-text-default);white-space:nowrap}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$j, create_fragment$l, safe_not_equal, {}, null);
+	    }, instance$k, create_fragment$m, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -8177,7 +8197,7 @@
 	} // (31:2) {#if heading}
 
 
-	function create_if_block$8(ctx) {
+	function create_if_block$9(ctx) {
 	  let div;
 	  let t0;
 	  let t1;
@@ -8266,7 +8286,7 @@
 	  };
 	}
 
-	function create_fragment$k(ctx) {
+	function create_fragment$l(ctx) {
 	  let section;
 	  let t0;
 	  let div;
@@ -8275,7 +8295,7 @@
 	  let ul_style_value;
 	  let if_block =
 	  /*heading*/
-	  ctx[0] && create_if_block$8(ctx);
+	  ctx[0] && create_if_block$9(ctx);
 	  let each_value =
 	  /*children*/
 	  ctx[3];
@@ -8342,7 +8362,7 @@
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
-	          if_block = create_if_block$8(ctx);
+	          if_block = create_if_block$9(ctx);
 	          if_block.c();
 	          if_block.m(section, t0);
 	        }
@@ -8413,7 +8433,7 @@
 	  };
 	}
 
-	function instance$i($$self, $$props, $$invalidate) {
+	function instance$j($$self, $$props, $$invalidate) {
 	  let {
 	    heading = ""
 	  } = $$props;
@@ -8460,12 +8480,12 @@
 	class FooterNavSection extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{flex:auto}.title{font-size:var(--fs-xl);line-height:var(--lh-lg)}.hidden{display:none}.links{display:block;list-style-type:none;padding-left:0}@media(min-width: 720px){.links{display:var(--narrow-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--narrow-column-count)}}@media(min-width: 1024px){.links{display:var(--wide-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--wide-column-count)}}li{padding:0.75rem 0}a{color:var(--goa-color-text)}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{flex:auto}.title{font-size:var(--goa-font-size-7);line-height:var(--goa-line-height-4)}.hidden{display:none}.links{display:block;list-style-type:none;padding-left:0}@media(min-width: 720px){.links{display:var(--narrow-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--narrow-column-count)}}@media(min-width: 1024px){.links{display:var(--wide-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--wide-column-count)}}li{padding:0.75rem 0}a{color:var(--goa-color-text-default)}</style>`;
 	    init(this, {
 	      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, {
 	      heading: 0,
 	      maxcolumncount: 1
 	    }, null);
@@ -8663,7 +8683,7 @@
 	} // (48:2) {#if helptext}
 
 
-	function create_if_block$7(ctx) {
+	function create_if_block$8(ctx) {
 	  let div;
 	  let t;
 	  return {
@@ -8695,7 +8715,7 @@
 	  };
 	}
 
-	function create_fragment$j(ctx) {
+	function create_fragment$k(ctx) {
 	  let div1;
 	  let t0;
 	  let div0;
@@ -8710,7 +8730,7 @@
 	  ctx[7] && create_if_block_1$4(ctx);
 	  let if_block2 =
 	  /*helptext*/
-	  ctx[6] && create_if_block$7(ctx);
+	  ctx[6] && create_if_block$8(ctx);
 	  return {
 	    c() {
 	      div1 = element("div");
@@ -8787,7 +8807,7 @@
 	        if (if_block2) {
 	          if_block2.p(ctx, dirty);
 	        } else {
-	          if_block2 = create_if_block$7(ctx);
+	          if_block2 = create_if_block$8(ctx);
 	          if_block2.c();
 	          if_block2.m(div1, null);
 	        }
@@ -8832,7 +8852,7 @@
 	  };
 	}
 
-	function instance$h($$self, $$props, $$invalidate) {
+	function instance$i($$self, $$props, $$invalidate) {
 	  const [REQUIREMENT_TYPES, validateRequirementType] = typeValidator("Requirement type", ["optional", "required"], false);
 	  let {
 	    testid = ""
@@ -8883,12 +8903,12 @@
 	class FormItem extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}*{box-sizing:border-box}.label{display:block;font-weight:var(--fw-bold);color:var(--goa-color-text);font-size:var(--fs-base);padding:0.5rem 0}.label em{color:var(--color-gray-600);font-weight:var(--fw-regular);font-size:var(--fs-sm);line-height:var(--lh-sm);font-style:normal}.form-item-input{margin-bottom:0.25rem}.help-msg{font-size:var(--fs-sm);color:var(--goa-color-text);margin-right:56px}.error-msg{display:inline-flex;gap:0.25rem;font-size:var(--fs-sm);color:var(--goa-color-interactive--error);margin-bottom:0.25rem}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}*{box-sizing:border-box}.label{display:block;font-weight:var(--goa-font-weight-bold);color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding:0.5rem 0}.label em{color:var(--goa-color-greyscale-700);font-weight:var(--goa-font-weight-regular);font-size:var(--goa-font-size-2);line-height:var(--goa-line-height-1);font-style:normal}.form-item-input{margin-bottom:0.25rem}.help-msg{font-size:var(--goa-font-size-2);color:var(--goa-color-text-default);margin-right:56px}.error-msg{display:inline-flex;gap:0.25rem;font-size:var(--goa-font-size-2);color:var(--goa-color-interactive-error);margin-bottom:0.25rem}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$h, create_fragment$j, safe_not_equal, {
+	    }, instance$i, create_fragment$k, safe_not_equal, {
 	      testid: 0,
 	      mt: 1,
 	      mr: 2,
@@ -9020,7 +9040,7 @@
 	customElements.define("goa-form-item", FormItem);
 	/* libs/web-components/src/components/grid/Grid.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$i(ctx) {
+	function create_fragment$j(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -9043,7 +9063,7 @@
     --min-child-width: ${
       /*minchildwidth*/
       ctx[1] || 0};
-    gap: var(--goa-spacing-${
+    gap: var(--goa-space-${
       /*gap*/
       ctx[0]})
   `);
@@ -9070,7 +9090,7 @@
     --min-child-width: ${
       /*minchildwidth*/
       ctx[1] || 0};
-    gap: var(--goa-spacing-${
+    gap: var(--goa-space-${
       /*gap*/
       ctx[0]})
   `)) {
@@ -9088,7 +9108,7 @@
 	  };
 	}
 
-	function instance$g($$self, $$props, $$invalidate) {
+	function instance$h($$self, $$props, $$invalidate) {
 	  let {
 	    gap = "m"
 	  } = $$props;
@@ -9128,12 +9148,12 @@
 	class Grid extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-grid{display:flex;flex-direction:column;gap:var(--gap)}@media(min-width: 640px){.goa-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--min-child-width), 1fr))}}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.goa-grid{display:flex;flex-direction:column;gap:var(--gap)}@media(min-width: 640px){.goa-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--min-child-width), 1fr))}}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$g, create_fragment$i, safe_not_equal, {
+	    }, instance$h, create_fragment$j, safe_not_equal, {
 	      gap: 0,
 	      minchildwidth: 1,
 	      mt: 2,
@@ -9229,7 +9249,7 @@
 	customElements.define("goa-grid", Grid);
 	/* libs/web-components/src/components/hero-banner/HeroBanner.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$h(ctx) {
+	function create_fragment$i(ctx) {
 	  let div1;
 	  let goa_page_block;
 	  let h1;
@@ -9314,7 +9334,7 @@
 	  };
 	}
 
-	function instance$f($$self, $$props, $$invalidate) {
+	function instance$g($$self, $$props, $$invalidate) {
 	  let {
 	    heading
 	  } = $$props;
@@ -9337,12 +9357,12 @@
 	class HeroBanner extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-hero{box-sizing:border-box;display:flex;justify-content:flex-end;flex-direction:column;border-bottom:8px solid var(--goa-color-brand);color:var(--color-white);background-position:center center;width:100%;padding:3.5rem 0}h1{margin:0 0 1.75rem;padding:0;color:var(--color-white);font-size:var(--fs-3xl);line-height:var(--lh-2xl);font-weight:var(--fw-bold)}.goa-hero-banner-content{font-size:1.5rem;line-height:2rem;margin-bottom:1.75rem;color:#fff}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.goa-hero{box-sizing:border-box;display:flex;justify-content:flex-end;flex-direction:column;border-bottom:8px solid var(--goa-color-brand-default);color:var(--goa-color-greyscale-white);background-position:center center;width:100%;padding:3.5rem 0}h1{margin:0 0 1.75rem;padding:0;color:var(--goa-color-greyscale-white);font-size:var(--goa-font-size-10);line-height:var(--goa-line-height-7);font-weight:var(--goa-font-weight-bold)}.goa-hero-banner-content{font-size:1.5rem;line-height:2rem;margin-bottom:1.75rem;color:#fff}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$f, create_fragment$h, safe_not_equal, {
+	    }, instance$g, create_fragment$i, safe_not_equal, {
 	      heading: 0,
 	      backgroundurl: 1,
 	      minheight: 2
@@ -9402,7 +9422,7 @@
 	customElements.define("goa-hero-banner", HeroBanner);
 	/* libs/web-components/src/components/icon-button/IconButton.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$g(ctx) {
+	function create_fragment$h(ctx) {
 	  let button;
 	  let goa_icon;
 	  let button_style_value;
@@ -9574,7 +9594,7 @@
 	  }));
 	}
 
-	function instance$e($$self, $$props, $$invalidate) {
+	function instance$f($$self, $$props, $$invalidate) {
 	  let css;
 	  let isDisabled;
 	  let isInverted;
@@ -9674,12 +9694,12 @@
 	class IconButton extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}button,button *{box-sizing:border-box}button{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;background:transparent;cursor:pointer;border:none;border-radius:0.5rem;padding:var(--pading-size)}.color,.dark{color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.dark:not(.inverted){color:unset}button:hover{background-color:var(--color-gray-100);border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);outline:none}button:focus,button:active{background-color:var(--color-gray-100);border-color:var(--goa-color-interactive--active);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.color.inverted:hover{background-color:var(--goa-color-primary-dark)}button:disabled{pointer-events:none;opacity:0.5;transform:none;cursor:default}button:disabled:hover{background-color:transparent}button.dark:hover{background-color:rgba(0, 0, 0, 0.3)}button.dark:focus,button.dark:active{background-color:rgba(0, 0, 0, 0.3);box-shadow:0 0 0 3px var(--color-white)}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--goa-font-family-sans)}button,button *{box-sizing:border-box}button{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;background:transparent;cursor:pointer;border:none;border-radius:0.5rem;padding:var(--pading-size)}.color,.dark{color:var(--goa-color-interactive-default);fill:var(--goa-color-interactive-default);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.dark:not(.inverted){color:unset}button:hover{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);outline:none}button:focus,button:active{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-interactive-focus);color:var(--goa-color-interactive-focus);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.color.inverted:hover{background-color:var(--goa-color-interactive-hover)}button:disabled{pointer-events:none;opacity:0.5;transform:none;cursor:default}button:disabled:hover{background-color:transparent}button.dark:hover{background-color:rgba(0, 0, 0, 0.3)}button.dark:focus,button.dark:active{background-color:rgba(0, 0, 0, 0.3);box-shadow:0 0 0 3px var(--goa-color-greyscale-white)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$e, create_fragment$g, safe_not_equal, {
+	    }, instance$f, create_fragment$h, safe_not_equal, {
 	      icon: 0,
 	      size: 1,
 	      theme: 2,
@@ -9847,7 +9867,7 @@
 	customElements.define("goa-icon-button", IconButton);
 	/* libs/web-components/src/components/icon/Icon.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block$6(ctx) {
+	function create_if_block$7(ctx) {
 	  let ion_icon;
 	  let ion_icon_name_value;
 	  return {
@@ -9895,12 +9915,12 @@
 	  };
 	}
 
-	function create_fragment$f(ctx) {
+	function create_fragment$g(ctx) {
 	  let div;
 	  let div_style_value;
 	  let if_block =
 	  /*type*/
-	  ctx[4] && create_if_block$6(ctx);
+	  ctx[4] && create_if_block$7(ctx);
 	  return {
 	    c() {
 	      div = element("div");
@@ -9953,7 +9973,7 @@
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
-	          if_block = create_if_block$6(ctx);
+	          if_block = create_if_block$7(ctx);
 	          if_block.c();
 	          if_block.m(div, null);
 	        }
@@ -10026,7 +10046,7 @@
 	  };
 	}
 
-	function instance$d($$self, $$props, $$invalidate) {
+	function instance$e($$self, $$props, $$invalidate) {
 	  let isInverted;
 
 	  let _size;
@@ -10116,7 +10136,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$d, create_fragment$f, safe_not_equal, {
+	    }, instance$e, create_fragment$g, safe_not_equal, {
 	      mt: 0,
 	      mr: 1,
 	      mb: 2,
@@ -10326,7 +10346,7 @@
 	    }
 
 	  };
-	} // (100:4) {#if leadingicon}
+	} // (109:4) {#if leadingicon}
 
 
 	function create_if_block_3$2(ctx) {
@@ -10360,7 +10380,7 @@
 	    }
 
 	  };
-	} // (130:4) {#if trailingicon && !handlesTrailingIconClick}
+	} // (139:4) {#if trailingicon && !handlesTrailingIconClick}
 
 
 	function create_if_block_2$3(ctx) {
@@ -10395,7 +10415,7 @@
 	    }
 
 	  };
-	} // (140:4) {#if trailingicon && handlesTrailingIconClick}
+	} // (149:4) {#if trailingicon && handlesTrailingIconClick}
 
 
 	function create_if_block_1$3(ctx) {
@@ -10450,10 +10470,10 @@
 	    }
 
 	  };
-	} // (152:4) {#if suffix}
+	} // (161:4) {#if suffix}
 
 
-	function create_if_block$5(ctx) {
+	function create_if_block$6(ctx) {
 	  let span;
 	  let t;
 	  return {
@@ -10485,7 +10505,7 @@
 	  };
 	}
 
-	function create_fragment$e(ctx) {
+	function create_fragment$f(ctx) {
 	  let div3;
 	  let div2;
 	  let t0;
@@ -10523,7 +10543,7 @@
 	  ctx[24] && create_if_block_1$3(ctx);
 	  let if_block4 =
 	  /*suffix*/
-	  ctx[15] && create_if_block$5(ctx);
+	  ctx[15] && create_if_block$6(ctx);
 	  return {
 	    c() {
 	      div3 = element("div");
@@ -10637,7 +10657,7 @@
 	      append(div2, input);
 	      /*input_binding*/
 
-	      ctx[32](input);
+	      ctx[33](input);
 	      append(div2, t3);
 	      if (if_block2) if_block2.m(div2, null);
 	      append(div2, t4);
@@ -10844,7 +10864,7 @@
 	        if (if_block4) {
 	          if_block4.p(ctx, dirty);
 	        } else {
-	          if_block4 = create_if_block$5(ctx);
+	          if_block4 = create_if_block$6(ctx);
 	          if_block4.c();
 	          if_block4.m(div2, t6);
 	        }
@@ -10907,7 +10927,7 @@
 	      if (if_block1) if_block1.d();
 	      /*input_binding*/
 
-	      ctx[32](null);
+	      ctx[33](null);
 	      if (if_block2) if_block2.d();
 	      if (if_block3) if_block3.d();
 	      if (if_block4) if_block4.d();
@@ -10924,7 +10944,7 @@
 	  }));
 	}
 
-	function instance$c($$self, $$props, $$invalidate) {
+	function instance$d($$self, $$props, $$invalidate) {
 	  let handlesTrailingIconClick;
 	  let isFocused;
 	  let isReadonly;
@@ -10981,13 +11001,13 @@
 	    arialabel = null
 	  } = $$props;
 	  let {
-	    min = null
+	    min = ""
 	  } = $$props;
 	  let {
-	    max = null
+	    max = ""
 	  } = $$props;
 	  let {
-	    step = null
+	    step = 1
 	  } = $$props;
 	  let {
 	    prefix = ""
@@ -10995,6 +11015,9 @@
 	  let {
 	    suffix = ""
 	  } = $$props;
+	  let {
+	    debounce = 0
+	  } = $$props;
 	  let {
 	    mt = null
 	  } = $$props;
@@ -11008,19 +11031,28 @@
 	    ml = null
 	  } = $$props;
 	  let inputEl;
+	  let _debounceId = null;
 
 	  function onKeyUp(e) {
-	    const ee = e.target;
-	    e.target.dispatchEvent(new CustomEvent("_change", {
-	      composed: true,
-	      bubbles: false,
-	      cancelable: true,
-	      detail: {
-	        name,
-	        value: ee.value
-	      }
-	    }));
-	    $$invalidate(0, value = ee.value);
+	    const input = e.target;
+	    if (!input) return;
+
+	    if (_debounceId != null) {
+	      clearTimeout(_debounceId);
+	    }
+
+	    _debounceId = setTimeout(() => {
+	      input.dispatchEvent(new CustomEvent("_change", {
+	        composed: true,
+	        bubbles: false,
+	        cancelable: true,
+	        detail: {
+	          name,
+	          value: input.value
+	        }
+	      }));
+	    }, debounce);
+	    $$invalidate(0, value = input.value);
 	  }
 
 	  onMount(() => {
@@ -11061,6 +11093,7 @@
 	    if ('step' in $$props) $$invalidate(13, step = $$props.step);
 	    if ('prefix' in $$props) $$invalidate(14, prefix = $$props.prefix);
 	    if ('suffix' in $$props) $$invalidate(15, suffix = $$props.suffix);
+	    if ('debounce' in $$props) $$invalidate(31, debounce = $$props.debounce);
 	    if ('mt' in $$props) $$invalidate(16, mt = $$props.mt);
 	    if ('mr' in $$props) $$invalidate(17, mr = $$props.mr);
 	    if ('mb' in $$props) $$invalidate(18, mb = $$props.mb);
@@ -11077,7 +11110,7 @@
 	    if ($$self.$$.dirty[0] &
 	    /*focused*/
 	    268435456) {
-	      $$invalidate(31, isFocused = toBoolean(focused));
+	      $$invalidate(32, isFocused = toBoolean(focused));
 	    }
 
 	    if ($$self.$$.dirty[0] &
@@ -11102,7 +11135,7 @@
 	    /*inputEl*/
 	    1048576 | $$self.$$.dirty[1] &
 	    /*isFocused*/
-	    1) {
+	    2) {
 	      if (isFocused && inputEl) {
 	        setTimeout(() => inputEl.focus(), 1);
 	      }
@@ -11119,19 +11152,19 @@
 	    }
 	  };
 
-	  return [value, type, name, autocapitalize, placeholder, leadingicon, trailingicon, variant, testid, width, arialabel, min, max, step, prefix, suffix, mt, mr, mb, ml, inputEl, isDisabled, isError, isReadonly, handlesTrailingIconClick, onKeyUp, disabled, handletrailingiconclick, focused, readonly, error, isFocused, input_binding];
+	  return [value, type, name, autocapitalize, placeholder, leadingicon, trailingicon, variant, testid, width, arialabel, min, max, step, prefix, suffix, mt, mr, mb, ml, inputEl, isDisabled, isError, isReadonly, handlesTrailingIconClick, onKeyUp, disabled, handletrailingiconclick, focused, readonly, error, debounce, isFocused, input_binding];
 	}
 
 	class Input extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto;font-family:var(--font-family)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--color-gray-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius);border-right:1px solid var(--color-gray-600)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius);border-left:1px solid var(--color-gray-600)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--color-gray-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--color-gray-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box;line-height:normal}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%;background-color:var(--goa-color-greyscale-white)}.goa-input:hover{border-color:var(--goa-color-interactive-hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding:var(--goa-space-xs);line-height:calc(40px - calc(var(--goa-space-xs) * 2));background-color:transparent;width:100%;flex:1 1 auto;font-family:var(--goa-font-family-sans)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--goa-color-greyscale-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m);border-right:1px solid var(--goa-color-greyscale-700)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);border-left:1px solid var(--goa-color-greyscale-700)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--goa-color-greyscale-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--goa-color-greyscale-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive-error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
       center center no-repeat}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$c, create_fragment$e, safe_not_equal, {
+	    }, instance$d, create_fragment$f, safe_not_equal, {
 	      type: 1,
 	      name: 2,
 	      value: 0,
@@ -11153,6 +11186,7 @@
 	      step: 13,
 	      prefix: 14,
 	      suffix: 15,
+	      debounce: 31,
 	      mt: 16,
 	      mr: 17,
 	      mb: 18,
@@ -11172,7 +11206,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["type", "name", "value", "autocapitalize", "placeholder", "leadingicon", "trailingicon", "variant", "disabled", "handletrailingiconclick", "focused", "readonly", "error", "testid", "width", "arialabel", "min", "max", "step", "prefix", "suffix", "mt", "mr", "mb", "ml"];
+	    return ["type", "name", "value", "autocapitalize", "placeholder", "leadingicon", "trailingicon", "variant", "disabled", "handletrailingiconclick", "focused", "readonly", "error", "testid", "width", "arialabel", "min", "max", "step", "prefix", "suffix", "debounce", "mt", "mr", "mb", "ml"];
 	  }
 
 	  get type() {
@@ -11406,6 +11440,17 @@
 	    flush();
 	  }
 
+	  get debounce() {
+	    return this.$$.ctx[31];
+	  }
+
+	  set debounce(debounce) {
+	    this.$$set({
+	      debounce
+	    });
+	    flush();
+	  }
+
 	  get mt() {
 	    return this.$$.ctx[16];
 	  }
@@ -11617,7 +11662,7 @@
 	} // (56:2) {#if version}
 
 
-	function create_if_block$4(ctx) {
+	function create_if_block$5(ctx) {
 	  let div;
 	  let t;
 	  return {
@@ -11650,7 +11695,7 @@
 	  };
 	}
 
-	function create_fragment$d(ctx) {
+	function create_fragment$e(ctx) {
 	  let header;
 	  let t0;
 	  let show_if = ["alpha", "beta"].includes(
@@ -11665,7 +11710,7 @@
 	  let if_block1 = show_if && create_if_block_1$2(ctx);
 	  let if_block2 =
 	  /*version*/
-	  ctx[1] && create_if_block$4(ctx);
+	  ctx[1] && create_if_block$5(ctx);
 	  return {
 	    c() {
 	      header = element("header");
@@ -11731,7 +11776,7 @@
 	        if (if_block2) {
 	          if_block2.p(ctx, dirty);
 	        } else {
-	          if_block2 = create_if_block$4(ctx);
+	          if_block2 = create_if_block$5(ctx);
 	          if_block2.c();
 	          if_block2.m(header, null);
 	        }
@@ -11759,7 +11804,7 @@
 	  return val[0].toUpperCase() + val.slice(1);
 	}
 
-	function instance$b($$self, $$props, $$invalidate) {
+	function instance$c($$self, $$props, $$invalidate) {
 	  const [Types, validateType] = typeValidator("Microsite header type", ["live", "alpha", "beta"], true);
 	  let {
 	    type
@@ -11786,12 +11831,12 @@
 	class MicrositeHeader extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}a{color:var(--goa-color-interactive);cursor:pointer}a:hover{color:var(--goa-color-interactive--hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive--hover);outline-offset:0px}.goa-official-site-header{display:flex;font-size:var(--fs-sm);background-color:var(--color-gray-100);align-items:center;justify-content:space-between;padding:0.25rem 1.5rem}@media(max-width: 640px){.goa-official-site-header{padding:0.5rem 1rem;align-items:start}}.spacer{flex:1 1 auto}.version{color:var(--goa-color-text-secondary);padding-left:1rem;line-height:1.25rem}.service-type{font-weight:bold;padding:0.125rem 0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-type--alpha{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.service-type--beta{background-color:var(--goa-color-brand);color:var(--goa-color-text-light)}.service-type--live{padding:0}.site-text{color:var(--goa-color-text);line-height:1.25rem}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}a{color:var(--goa-color-interactive-default);cursor:pointer}a:hover{color:var(--goa-color-interactive-hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive-hover);outline-offset:0px}.goa-official-site-header{display:flex;font-size:var(--goa-font-size-2);background-color:var(--goa-color-greyscale-100);align-items:center;justify-content:space-between;padding:0.25rem 1.5rem}@media(max-width: 640px){.goa-official-site-header{padding:0.5rem 1rem;align-items:start}}.spacer{flex:1 1 auto}.version{color:var(--goa-color-text-secondary);padding-left:1rem;line-height:1.25rem}.service-type{font-weight:bold;padding:0.125rem 0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-type--alpha{background-color:var(--goa-color-warning-default);color:var(--goa-color-text-default)}.service-type--beta{background-color:var(--goa-color-brand-default);color:var(--goa-color-text-light)}.service-type--live{padding:0}.site-text{color:var(--goa-color-text-default);line-height:1.25rem}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$b, create_fragment$d, safe_not_equal, {
+	    }, instance$c, create_fragment$e, safe_not_equal, {
 	      type: 0,
 	      version: 1,
 	      feedbackurl: 2
@@ -11851,7 +11896,7 @@
 	customElements.define("goa-microsite-header", MicrositeHeader);
 	/* libs/web-components/src/components/modal/Modal.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block$3(ctx) {
+	function create_if_block$4(ctx) {
 	  let goa_focus_trap;
 	  let div5;
 	  let div0;
@@ -12256,12 +12301,12 @@
 	  };
 	}
 
-	function create_fragment$c(ctx) {
+	function create_fragment$d(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
 	  /*isOpen*/
-	  ctx[7] && create_if_block$3(ctx);
+	  ctx[7] && create_if_block$4(ctx);
 	  return {
 	    c() {
 	      if (if_block) if_block.c();
@@ -12288,7 +12333,7 @@
 	            transition_in(if_block, 1);
 	          }
 	        } else {
-	          if_block = create_if_block$3(ctx);
+	          if_block = create_if_block$4(ctx);
 	          if_block.c();
 	          transition_in(if_block, 1);
 	          if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -12321,7 +12366,7 @@
 	  };
 	}
 
-	function instance$a($$self, $$props, $$invalidate) {
+	function instance$b($$self, $$props, $$invalidate) {
 	  let isClosable;
 	  let isOpen;
 
@@ -12406,12 +12451,12 @@
 	class Modal extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.modal{font-family:var(--font-family);position:fixed;inset:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.emergency{background-color:var(--goa-color-status-emergency)}.important{background-color:var(--goa-color-status-warning)}.information{background-color:var(--goa-color-status-info)}.event{background-color:var(--goa-color-status-info)}.success{background-color:var(--goa-color-status-success)}.callout-bar{flex:0 0 3rem;text-align:center;padding-top:2rem;border-radius:4px 0px 0px 4px}.content{flex:1 1 auto;width:100%;margin:2rem 2rem}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;display:flex;margin:1rem;box-shadow:6px 6px 6px rgba(0, 0, 0, 0.16);border-radius:4px;max-height:90%;border:1px solid var(--color-gray-600)}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch);max-height:80%}}.modal-actions ::slotted(div){margin:1.5rem 0 0}.modal-content ::slotted(:last-child){margin-bottom:0 !important}.modal-close{position:absolute;top:2rem;right:2rem}.modal-title{font-size:var(--fs-xl);margin:0 0 1.5rem;margin-right:40px;flex:0 0 auto}.modal-content{line-height:1.75rem}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.modal{font-family:var(--goa-font-family-sans);position:fixed;inset:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.emergency{background-color:var(--goa-color-emergency-default)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default)}.event{background-color:var(--goa-color-info-default)}.success{background-color:var(--goa-color-success-default)}.callout-bar{flex:0 0 3rem;text-align:center;padding-top:2rem;border-radius:4px 0px 0px 4px}.content{flex:1 1 auto;width:100%;margin:2rem 2rem}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;display:flex;margin:1rem;box-shadow:var(--goa-shadow-modal);border-radius:4px;max-height:90%;border:1px solid var(--goa-color-greyscale-700)}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch);max-height:80%}}.modal-actions ::slotted(div){margin:1.5rem 0 0}.modal-content ::slotted(:last-child){margin-bottom:0 !important}.modal-close{position:absolute;top:2rem;right:2rem}.modal-title{font-size:var(--goa-font-size-7);margin:0 0 1.5rem;margin-right:40px;flex:0 0 auto}.modal-content{line-height:1.75rem}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$a, create_fragment$c, safe_not_equal, {
+	    }, instance$b, create_fragment$d, safe_not_equal, {
 	      heading: 0,
 	      closable: 9,
 	      open: 1,
@@ -12507,7 +12552,7 @@
 	customElements.define("goa-modal", Modal);
 	/* libs/web-components/src/components/notification/Notification.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block$2(ctx) {
+	function create_if_block$3(ctx) {
 	  let div3;
 	  let div0;
 	  let goa_icon;
@@ -12631,12 +12676,12 @@
 	  };
 	}
 
-	function create_fragment$b(ctx) {
+	function create_fragment$c(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
 	  /*show*/
-	  ctx[1] && create_if_block$2(ctx);
+	  ctx[1] && create_if_block$3(ctx);
 	  return {
 	    c() {
 	      if (if_block) if_block.c();
@@ -12663,7 +12708,7 @@
 	            transition_in(if_block, 1);
 	          }
 	        } else {
-	          if_block = create_if_block$2(ctx);
+	          if_block = create_if_block$3(ctx);
 	          if_block.c();
 	          transition_in(if_block, 1);
 	          if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -12696,7 +12741,7 @@
 	  };
 	}
 
-	function instance$9($$self, $$props, $$invalidate) {
+	function instance$a($$self, $$props, $$invalidate) {
 	  let iconType;
 	  const [Types, validateType] = typeValidator("Notification type", ["emergency", "important", "information", "event"], true);
 	  let {
@@ -12729,12 +12774,12 @@
 	class Notification extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.notification{padding:1.5rem;display:flex;gap:1rem}.emergency{background-color:var(--goa-color-status-emergency);color:var(--color-white)}.important{background-color:var(--goa-color-status-warning)}.information{background-color:var(--goa-color-status-info);color:var(--color-white)}.event{background-color:var(--goa-color-status-success);color:var(--color-white)}.icon{flex:0 0 auto}.content{flex:1 1 auto}::slotted(a){color:unset !important;outline:unset !important}.close{flex:0 0 auto}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.notification{padding:1.5rem;display:flex;gap:1rem}.emergency{background-color:var(--goa-color-emergency-default);color:var(--goa-color-greyscale-white)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default);color:var(--goa-color-greyscale-white)}.event{background-color:var(--goa-color-success-default);color:var(--goa-color-greyscale-white)}.icon{flex:0 0 auto}.content{flex:1 1 auto}::slotted(a){color:unset !important;outline:unset !important}.close{flex:0 0 auto}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$9, create_fragment$b, safe_not_equal, {
+	    }, instance$a, create_fragment$c, safe_not_equal, {
 	      type: 0
 	    }, null);
 
@@ -12776,7 +12821,7 @@
 	/* libs/web-components/src/components/page-block/PageBlock.svelte generated by Svelte v3.51.0 */
 
 
-	function create_fragment$a(ctx) {
+	function create_fragment$b(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -12816,7 +12861,7 @@
 	  };
 	}
 
-	function instance$8($$self, $$props, $$invalidate) {
+	function instance$9($$self, $$props, $$invalidate) {
 	  const Sizes = {
 	    "full": "100%"
 	  };
@@ -12852,12 +12897,12 @@
 	class PageBlock extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.page-content{max-width:var(--max-width);margin:0 auto;padding:0 1.75rem}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.page-content{max-width:var(--max-width);margin:0 auto;padding:0 1.75rem}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$8, create_fragment$a, safe_not_equal, {
+	    }, instance$9, create_fragment$b, safe_not_equal, {
 	      width: 1,
 	      _width: 0
 	    }, null);
@@ -13095,7 +13140,7 @@
 	  };
 	}
 
-	function create_fragment$9(ctx) {
+	function create_fragment$a(ctx) {
 	  let div;
 	  let slot;
 	  let t;
@@ -13218,7 +13263,7 @@
 	  };
 	}
 
-	function instance$7($$self, $$props, $$invalidate) {
+	function instance$8($$self, $$props, $$invalidate) {
 	  let isDisabled;
 	  let isError;
 	  const [Orientations, validateOrientation] = typeValidator("Radio group orientation", ["vertical", "horizontal"]);
@@ -13356,14 +13401,14 @@
 	class RadioGroup extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-radio-group--horizontal{display:flex;flex-direction:row}.goa-radio-group--vertical{display:inline-block}label.goa-radio{--goa-radio-outline-width:3px;--goa-radio-diameter:1.5rem;--goa-radio-border-width:1px;--goa-radio-border-width--checked:7px;display:inline-block;box-sizing:border-box;display:flex;align-items:center;min-height:3rem}.goa-radio:hover{cursor:pointer}.goa-radio *,.goa-radio *:before,.goa-radio *:after{box-sizing:border-box}.goa-radio input[type="radio"]{width:0;height:0;margin:0;opacity:0}input[type="radio"]:hover~.goa-radio-icon{border-color:var(--goa-color-interactive--hover)}input[type="radio"]:focus~.goa-radio-icon{box-shadow:0 0 0 var(--goa-radio-outline-width) var(--goa-color-interactive--focus)}.goa-radio-label{padding:0.5rem;font-weight:var(--fw-regular)}.goa-radio-icon{display:inline-block;height:var(--goa-radio-diameter);width:var(--goa-radio-diameter);border-radius:50%;background-color:#fff;transition:box-shadow 100ms ease-in-out;flex:0 0 auto}.goa-radio:focus>input:not(:disabled)~.goa-radio-icon{box-shadow:0 0 0 var(--goa-radio-outline-width) var(--goa-color-interactive--focus)}.goa-radio--disabled{opacity:0.4}.goa-radio--disabled:hover{cursor:default}input[type="radio"]:checked~.goa-radio-icon{border:var(--goa-radio-border-width--checked) solid
-      var(--goa-color-interactive--active)}input[type="radio"]:not(:checked)~.goa-radio-icon{border:var(--goa-radio-border-width) solid var(--color-gray-600)}input[type="radio"]:disabled~.goa-radio-icon{border:var(--goa-radio-border-width) solid var(--color-gray-600)}input[type="radio"]:disabled:checked~.goa-radio-icon{border:var(--goa-radio-border-width--checked) solid
-      var(--goa-color-interactive--active)}.goa-radio--error input[type="radio"]:checked~.goa-radio-icon{border:7px solid var(--goa-color-status-emergency)}.goa-radio--error input[type="radio"]:not(:checked)~.goa-radio-icon{border:2px solid var(--goa-color-status-emergency)}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.goa-radio-group--horizontal{display:flex;flex-direction:row}.goa-radio-group--vertical{display:inline-block}label.goa-radio{--goa-radio-outline-width:3px;--goa-radio-diameter:1.5rem;--goa-radio-border-width:1px;--goa-radio-border-width--checked:7px;display:inline-block;box-sizing:border-box;display:flex;align-items:center;min-height:3rem}.goa-radio:hover{cursor:pointer}.goa-radio *,.goa-radio *:before,.goa-radio *:after{box-sizing:border-box}.goa-radio input[type="radio"]{width:0;height:0;margin:0;opacity:0}input[type="radio"]:hover~.goa-radio-icon{border-color:var(--goa-color-interactive-hover)}input[type="radio"]:focus~.goa-radio-icon{box-shadow:0 0 0 var(--goa-radio-outline-width) var(--goa-color-interactive-focus)}.goa-radio-label{padding:0.5rem;font-weight:var(--goa-font-weight-regular)}.goa-radio-icon{display:inline-block;height:var(--goa-radio-diameter);width:var(--goa-radio-diameter);border-radius:50%;background-color:#fff;transition:box-shadow 100ms ease-in-out;flex:0 0 auto}.goa-radio:focus>input:not(:disabled)~.goa-radio-icon{box-shadow:0 0 0 var(--goa-radio-outline-width) var(--goa-color-interactive-focus)}.goa-radio--disabled .goa-radio-label{opacity:0.4}.goa-radio--disabled:hover{cursor:default}input[type="radio"]:checked~.goa-radio-icon{border:var(--goa-radio-border-width--checked) solid
+      var(--goa-color-interactive-hover)}input[type="radio"]:not(:checked)~.goa-radio-icon{border:var(--goa-radio-border-width) solid var(--goa-color-greyscale-700)}input[type="radio"]:disabled~.goa-radio-icon{border:var(--goa-radio-border-width) solid var(--goa-color-greyscale-700)}input[type="radio"]:disabled:checked~.goa-radio-icon{border:var(--goa-radio-border-width--checked) solid
+      var(--goa-color-interactive-hover)}.goa-radio--error input[type="radio"]:checked~.goa-radio-icon{border:7px solid var(--goa-color-emergency-default)}.goa-radio--error input[type="radio"]:not(:checked)~.goa-radio-icon{border:2px solid var(--goa-color-emergency-default)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$7, create_fragment$9, safe_not_equal, {
+	    }, instance$8, create_fragment$a, safe_not_equal, {
 	      name: 1,
 	      value: 0,
 	      orientation: 2,
@@ -13519,7 +13564,7 @@
 	customElements.define("goa-radio-group", RadioGroup);
 	/* libs/web-components/src/components/scrollable/Scrollable.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$8(ctx) {
+	function create_fragment$9(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -13587,7 +13632,7 @@
 	  };
 	}
 
-	function instance$6($$self, $$props, $$invalidate) {
+	function instance$7($$self, $$props, $$invalidate) {
 	  let {
 	    direction = "vertical"
 	  } = $$props;
@@ -13619,7 +13664,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$6, create_fragment$8, safe_not_equal, {
+	    }, instance$7, create_fragment$9, safe_not_equal, {
 	      direction: 0,
 	      hpadding: 1,
 	      vpadding: 2,
@@ -13745,9 +13790,9 @@
 	function create_if_block_2(ctx) {
 	  let each_1_anchor;
 	  let current;
-	  let each_value = Array(
+	  let each_value = Array(Number.parseInt(
 	  /*linecount*/
-	  ctx[2]);
+	  ctx[2] + ""));
 	  let each_blocks = [];
 
 	  for (let i = 0; i < each_value.length; i += 1) {
@@ -13780,9 +13825,9 @@
 	      if (dirty &
 	      /*size, linecount*/
 	      6) {
-	        each_value = Array(
+	        each_value = Array(Number.parseInt(
 	        /*linecount*/
-	        ctx[2]);
+	        ctx[2] + ""));
 	        let i;
 
 	        for (i = 0; i < each_value.length; i += 1) {
@@ -13960,7 +14005,7 @@
 	} // (30:2) {#if type === "card"}
 
 
-	function create_if_block$1(ctx) {
+	function create_if_block$2(ctx) {
 	  let div1;
 	  let skeleton0;
 	  let t0;
@@ -13992,7 +14037,9 @@
 	      size:
 	      /*size*/
 	      ctx[1],
-	      linecount: 3
+	      linecount:
+	      /*linecount*/
+	      ctx[2]
 	    }
 	  });
 	  return {
@@ -14045,6 +14092,11 @@
 	      2) skeleton2_changes.size =
 	      /*size*/
 	      ctx[1];
+	      if (dirty &
+	      /*linecount*/
+	      4) skeleton2_changes.linecount =
+	      /*linecount*/
+	      ctx[2];
 	      skeleton2.$set(skeleton2_changes);
 
 	      if (!current || dirty &
@@ -14087,7 +14139,7 @@
 	    }
 
 	  };
-	} // (52:4) {#each Array(linecount) as _item}
+	} // (52:4) {#each Array(Number.parseInt(linecount+"")) as _item}
 
 
 	function create_each_block(ctx) {
@@ -14147,13 +14199,13 @@
 	  };
 	}
 
-	function create_fragment$7(ctx) {
+	function create_fragment$8(ctx) {
 	  let div;
 	  let current_block_type_index;
 	  let if_block;
 	  let div_style_value;
 	  let current;
-	  const if_block_creators = [create_if_block$1, create_if_block_1, create_if_block_2, create_else_block];
+	  const if_block_creators = [create_if_block$2, create_if_block_1, create_if_block_2, create_else_block];
 	  const if_blocks = [];
 
 	  function select_block_type(ctx, dirty) {
@@ -14263,7 +14315,7 @@
 	  };
 	}
 
-	function instance$5($$self, $$props, $$invalidate) {
+	function instance$6($$self, $$props, $$invalidate) {
 	  const [Types, validateType] = typeValidator("Skeleton type", ["image", "text", "title", "text-small", "avatar", "header", "paragraph", "thumbnail", "card", "profile", "lines"], true);
 	  const [Sizes, validateSize] = typeValidator("Skeleton size", ["1", "2", "3", "4"]);
 	  let {
@@ -14316,12 +14368,12 @@
 	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-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: 480px){.card{max-width:var(--max-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(--goa-font-family-sans)}@keyframes pulse{0%{opacity:0.5}50%{opacity:1}100%{opacity:0.5}}.skeleton{background-color:var(--goa-color-greyscale-100);animation:pulse 2s infinite ease-in-out;overflow:hidden;margin:10px 0}.image,.image-1{background-color:var(--goa-color-greyscale-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(--goa-color-greyscale-100);border-radius:4px}.card{width:100%}@media(min-width: 480px){.card{max-width:var(--max-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$5, create_fragment$7, safe_not_equal, {
+	    }, instance$6, create_fragment$8, safe_not_equal, {
 	      maxwidth: 0,
 	      size: 1,
 	      linecount: 2,
@@ -14453,7 +14505,7 @@
 	customElements.define("goa-skeleton", Skeleton);
 	/* libs/web-components/src/components/spacer/Spacer.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$6(ctx) {
+	function create_fragment$7(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -14482,7 +14534,7 @@
 	  };
 	}
 
-	function instance$4($$self, $$props, $$invalidate) {
+	function instance$5($$self, $$props, $$invalidate) {
 	  let {
 	    hspacing = "none"
 	  } = $$props;
@@ -14492,8 +14544,8 @@
 	  let rootEl;
 	  onMount(() => {
 	    injectCss(rootEl, ":host", {
-	      width: `var(--goa-spacing-${hspacing})`,
-	      height: `var(--goa-spacing-${vspacing})`
+	      width: `var(--goa-space-${hspacing})`,
+	      height: `var(--goa-space-${vspacing})`
 	    });
 	  });
 
@@ -14519,7 +14571,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$4, create_fragment$6, safe_not_equal, {
+	    }, instance$5, create_fragment$7, safe_not_equal, {
 	      hspacing: 1,
 	      vspacing: 2
 	    }, null);
@@ -14751,7 +14803,7 @@
 	/* libs/web-components/src/components/spinner/Spinner.svelte generated by Svelte v3.51.0 */
 
 
-	function create_if_block(ctx) {
+	function create_if_block$1(ctx) {
 	  let svg;
 	  let circle;
 	  let circle_stroke_value;
@@ -14774,7 +14826,7 @@
 	      ctx[3]);
 	      attr(circle, "stroke", circle_stroke_value =
 	      /*invert*/
-	      ctx[0] ? "var(--goa-color-primary-dark)" : "var(--goa-color-brand-light)");
+	      ctx[0] ? "var(--goa-color-info-hover)" : "var(--goa-color-brand-light)");
 	      attr(circle, "stroke-width",
 	      /*strokewidth*/
 	      ctx[4]);
@@ -14793,7 +14845,7 @@
 	      ctx[4]);
 	      attr(path, "stroke", path_stroke_value =
 	      /*invert*/
-	      ctx[0] ? "var(--goa-color-brand-light)" : "var(--goa-color-primary)");
+	      ctx[0] ? "var(--goa-color-brand-light)" : "var(--goa-color-info-default)");
 	      attr(path, "stroke-linecap", "round");
 	      attr(svg, "class", svg_class_value = `spinner-${
       /*type*/
@@ -14843,7 +14895,7 @@
 	      /*invert*/
 	      1 && circle_stroke_value !== (circle_stroke_value =
 	      /*invert*/
-	      ctx[0] ? "var(--goa-color-primary-dark)" : "var(--goa-color-brand-light)")) {
+	      ctx[0] ? "var(--goa-color-info-hover)" : "var(--goa-color-brand-light)")) {
 	        attr(circle, "stroke", circle_stroke_value);
 	      }
 
@@ -14887,7 +14939,7 @@
 	      /*invert*/
 	      1 && path_stroke_value !== (path_stroke_value =
 	      /*invert*/
-	      ctx[0] ? "var(--goa-color-brand-light)" : "var(--goa-color-primary)")) {
+	      ctx[0] ? "var(--goa-color-brand-light)" : "var(--goa-color-info-default)")) {
 	        attr(path, "stroke", path_stroke_value);
 	      }
 
@@ -14941,11 +14993,11 @@
 	  };
 	}
 
-	function create_fragment$5(ctx) {
+	function create_fragment$6(ctx) {
 	  let if_block_anchor;
 	  let if_block =
 	  /*ready*/
-	  ctx[6] && create_if_block(ctx);
+	  ctx[6] && create_if_block$1(ctx);
 	  return {
 	    c() {
 	      if (if_block) if_block.c();
@@ -14965,7 +15017,7 @@
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
-	          if_block = create_if_block(ctx);
+	          if_block = create_if_block$1(ctx);
 	          if_block.c();
 	          if_block.m(if_block_anchor.parentNode, if_block_anchor);
 	        }
@@ -14986,7 +15038,7 @@
 	  };
 	}
 
-	function instance$3($$self, $$props, $$invalidate) {
+	function instance$4($$self, $$props, $$invalidate) {
 	  let diameter;
 	  let strokewidth;
 	  let radius;
@@ -15112,12 +15164,12 @@
 	class Spinner extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@keyframes rotate{100%{transform:rotate(360deg)}}.spinner-infinite{animation:rotate 2s linear infinite}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}@keyframes rotate{100%{transform:rotate(360deg)}}.spinner-infinite{animation:rotate 2s linear infinite}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$3, create_fragment$5, safe_not_equal, {
+	    }, instance$4, create_fragment$6, safe_not_equal, {
 	      size: 10,
 	      invert: 0,
 	      progress: 11,
@@ -15189,7 +15241,7 @@
 	customElements.define("goa-spinner", Spinner);
 	/* libs/web-components/src/components/table/Table.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$4(ctx) {
+	function create_fragment$5(ctx) {
 	  let table;
 	  let slot;
 	  let t0;
@@ -15291,7 +15343,7 @@
 	  };
 	}
 
-	function instance$2($$self, $$props, $$invalidate) {
+	function instance$3($$self, $$props, $$invalidate) {
 	  let _stickyHeader;
 
 	  const [Variants, validateVariant] = typeValidator("Table variant", ["normal", "relaxed"], true);
@@ -15365,12 +15417,12 @@
 	class Table extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{padding:0.75rem 1rem 0.5rem;border-bottom:1px solid var(--color-gray-200);line-height:1rem}table.relaxed td{padding:1.25rem 1rem 1rem}th{background-color:var(--color-white);color:var(--goa-color-text-secondary);padding:1rem;vertical-align:middle;text-align:left;border-bottom:2px solid var(--color-gray-600)}tfoot td{background-color:var(--color-gray-100)}tfoot tr:first-child td{border-top:2px solid var(--color-gray-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
+	    this.shadowRoot.innerHTML = `<style>table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{padding:0.75rem 1rem 0.5rem;border-bottom:1px solid var(--goa-color-greyscale-200);line-height:1rem}table.relaxed td{padding:1.25rem 1rem 1rem}th{background-color:var(--goa-color-greyscale-white);color:var(--goa-color-text-secondary);padding:1rem;vertical-align:middle;text-align:left;border-bottom:2px solid var(--goa-color-greyscale-700)}tfoot td{background-color:var(--goa-color-greyscale-100)}tfoot tr:first-child td{border-top:2px solid var(--goa-color-greyscale-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$2, create_fragment$4, safe_not_equal, {
+	    }, instance$3, create_fragment$5, safe_not_equal, {
 	      width: 0,
 	      stickyheader: 8,
 	      variant: 1,
@@ -15478,7 +15530,7 @@
 	customElements.define("goa-table", Table);
 	/* libs/web-components/src/components/text-area/TextArea.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$3(ctx) {
+	function create_fragment$4(ctx) {
 	  let div;
 	  let textarea;
 	  let textarea_aria_label_value;
@@ -15659,7 +15711,7 @@
 	  };
 	}
 
-	function instance$1($$self, $$props, $$invalidate) {
+	function instance$2($$self, $$props, $$invalidate) {
 	  let isError;
 	  let isDisabled;
 	  let isReadonly;
@@ -15770,13 +15822,13 @@
 	class TextArea extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.container{position:relative;width:100%}@media(min-width: 640px){.container{max-width:var(--width)}}.goa-textarea{display:block;width:100%;box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:3px;color:var(--color-black, #ccc);padding:var(--textarea-padding-vertical, 0.5rem) var(--textarea-padding-horizontal, 0.5rem);font-size:var(--input-font-size);font-family:var(--font-family);min-width:100%}@media(min-width: 640px){.goa-textarea{min-width:0;width:var(--width)}}.goa-textarea[readonly]{cursor:pointer}.goa-textarea:hover{border-color:var(--goa-color-interactive--hover)}.goa-textarea:active,.goa-textarea:focus,.goa-textarea:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-textarea:disabled,.goa-textarea:disabled:hover,.goa-textarea:disabled:active,.goa-textarea:disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.counter{position:absolute;right:0;padding-top:0.25rem;font-size:var(--fs-sm)}.counter-error{color:var(--goa-color-interactive--error)
-  }.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{--textarea-padding-vertical:0.625rem;--textarea-padding-horizontal:0.75rem;box-sizing:border-box;font-family:var(--goa-font-family-sans)}.container{position:relative;width:100%}@media(min-width: 640px){.container{max-width:var(--width)}}.goa-textarea{display:block;width:100%;box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:3px;color:var(--goa-color-greyscale-black, #ccc);padding:var(--textarea-padding-vertical) var(--textarea-padding-horizontal);font-size:var(--goa-font-size-4);font-family:var(--goa-font-family-sans);min-width:100%}@media(min-width: 640px){.goa-textarea{min-width:0;width:var(--width)}}.goa-textarea[readonly]{cursor:pointer}.goa-textarea:hover{border-color:var(--goa-color-interactive-hover)}.goa-textarea:active,.goa-textarea:focus,.goa-textarea:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.goa-textarea:disabled,.goa-textarea:disabled:hover,.goa-textarea:disabled:active,.goa-textarea:disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);cursor:default;box-shadow:none}.counter{position:absolute;right:0;padding-top:0.25rem;font-size:var(--goa-font-size-2)}.counter-error{color:var(--goa-color-interactive-error)
+  }.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive-error)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$1, create_fragment$3, safe_not_equal, {
+	    }, instance$2, create_fragment$4, safe_not_equal, {
 	      name: 0,
 	      value: 1,
 	      placeholder: 2,
@@ -15980,7 +16032,7 @@
 	customElements.define("goa-textarea", TextArea);
 	/* libs/web-components/src/layouts/FullScreenNavbarLayout.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$2(ctx) {
+	function create_fragment$3(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -16014,17 +16066,17 @@
 	class FullScreenNavbarLayout extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>.page{height:100vh;grid-template-columns:auto;grid-template-rows:min-content auto min-content;grid-template-areas:"header"  
+	    this.shadowRoot.innerHTML = `<style>.page{height:100vh;grid-template-columns:auto;grid-template-rows:min-content auto min-content;grid-template-areas:"header"
       "content"
       "nav"
-      "footer";display:grid;place-content:stretch stretch;gap:0 0}@media(min-width: 640px){.page{grid-template-columns:300px auto;grid-template-rows:min-content auto min-content;grid-template-areas:"header header"  
+      "footer";display:grid;place-content:stretch stretch;gap:0 0}@media(min-width: 640px){.page{grid-template-columns:300px auto;grid-template-rows:min-content auto min-content;grid-template-areas:"header header"
         "nav content"
-        "footer footer"}}.header{grid-area:header}.footer{grid-area:footer}main{grid-area:content;justify-self:stretch;padding:1rem}.nav{grid-area:nav;padding:1rem;background-color:var(--color-gray-100)}</style>`;
+        "footer footer"}}.header{grid-area:header}.footer{grid-area:footer}main{grid-area:content;justify-self:stretch;padding:1rem}.nav{grid-area:nav;padding:1rem;background-color:var(--goa-color-greyscale-100)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$2, safe_not_equal, {}, null);
+	    }, null, create_fragment$3, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -16038,7 +16090,7 @@
 	customElements.define("goa-layout-full-nav", FullScreenNavbarLayout);
 	/* libs/web-components/src/layouts/one-column-layout/OneColumnLayout.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$1(ctx) {
+	function create_fragment$2(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -16075,7 +16127,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$1, safe_not_equal, {}, null);
+	    }, null, create_fragment$2, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -16089,7 +16141,7 @@
 	customElements.define("goa-one-column-layout", OneColumnLayout);
 	/* libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment(ctx) {
+	function create_fragment$1(ctx) {
 	  let div;
 	  let header;
 	  let t0;
@@ -16121,7 +16173,7 @@
       ctx[1] || "100%"};
     --nav-column-width: ${
       /*navcolumnwidth*/
-      ctx[0] || "var(--layout-nav-column-width)"};
+      ctx[0] || "256px"};
   `);
 	    },
 
@@ -16143,7 +16195,7 @@
       ctx[1] || "100%"};
     --nav-column-width: ${
       /*navcolumnwidth*/
-      ctx[0] || "var(--layout-nav-column-width)"};
+      ctx[0] || "256px"};
   `)) {
 	        attr(div, "style", div_style_value);
 	      }
@@ -16159,7 +16211,7 @@
 	  };
 	}
 
-	function instance($$self, $$props, $$invalidate) {
+	function instance$1($$self, $$props, $$invalidate) {
 	  let {
 	    navcolumnwidth = ""
 	  } = $$props;
@@ -16178,12 +16230,12 @@
 	class TwoColumnLayout extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.page{min-height:100vh;display:flex;flex-direction:column;position:relative}.content{flex:1 1 auto;position:relative;display:flex;flex-direction:column;gap:2rem}.header,.footer{flex:0 0 auto}main{flex:1 1 auto;padding:0 1rem}.nav{padding:0 1rem;transition:transform 200ms ease-in-out;background-color:var(--color-white)}.nav>*{display:block;padding:0.5rem 0}@media(min-width: 640px){.page{gap:2rem}.content{display:flex;flex-direction:row;justify-content:center;width:min(var(--max-content-width), 100vw);margin:0 auto}.nav{padding:0 2rem}main{padding-right:2rem}}@media(min-width: 1300px){main{padding-right:4.5rem}}@media(min-width: 640px){.nav{transform:translateX(0);flex:0 0 var(--nav-column-width)}}</style>`;
+	    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.page{min-height:100vh;display:flex;flex-direction:column;position:relative}.content{flex:1 1 auto;position:relative;display:flex;flex-direction:column;gap:2rem}.header,.footer{flex:0 0 auto}main{flex:1 1 auto;padding:0 1rem}.nav{padding:0 1rem;transition:transform 200ms ease-in-out;background-color:var(--goa-color-greyscale-white)}.nav>*{display:block;padding:0.5rem 0}@media(min-width: 640px){.page{gap:2rem}.content{display:flex;flex-direction:row;justify-content:center;width:min(var(--max-content-width), 100vw);margin:0 auto}.nav{padding:0 2rem}main{padding-right:2rem}}@media(min-width: 1300px){main{padding-right:4.5rem}}@media(min-width: 640px){.nav{transform:translateX(0);flex:0 0 var(--nav-column-width)}}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance, create_fragment, safe_not_equal, {
+	    }, instance$1, create_fragment$1, safe_not_equal, {
 	      navcolumnwidth: 0,
 	      maxcontentwidth: 1
 	    }, null);
@@ -16229,6 +16281,513 @@
 	}
 
 	customElements.define("goa-two-column-layout", TwoColumnLayout);
+	/* libs/web-components/src/components/pagination/Pagination.svelte generated by Svelte v3.51.0 */
+
+	function create_if_block(ctx) {
+	  let goa_block;
+	  let span0;
+	  let t1;
+	  let input;
+	  let t2;
+	  let goa_input;
+	  let t3;
+	  let span1;
+	  let t4;
+	  let t5;
+	  return {
+	    c() {
+	      goa_block = element("goa-block");
+	      span0 = element("span");
+	      span0.textContent = "Page";
+	      t1 = space();
+	      input = element("input");
+	      t2 = space();
+	      goa_input = element("goa-input");
+	      t3 = space();
+	      span1 = element("span");
+	      t4 = text("of ");
+	      t5 = text(
+	      /*_pageCount*/
+	      ctx[8]);
+	      attr(input, "type", "hidden");
+	      set_custom_element_data(goa_input, "type", "number");
+	      set_custom_element_data(goa_input, "value",
+	      /*pagenumber*/
+	      ctx[0]);
+	      set_custom_element_data(goa_input, "width", "8ch");
+	      set_custom_element_data(goa_input, "debounce", "500");
+	      set_custom_element_data(goa_input, "min", "1");
+	      set_custom_element_data(goa_input, "max",
+	      /*_pageCount*/
+	      ctx[8]);
+	      set_custom_element_data(goa_block, "data-testid", "page-selector");
+	      set_custom_element_data(goa_block, "alignment", "center");
+	      set_custom_element_data(goa_block, "gap", "s");
+	    },
+
+	    m(target, anchor) {
+	      insert(target, goa_block, anchor);
+	      append(goa_block, span0);
+	      append(goa_block, t1);
+	      append(goa_block, input);
+	      /*input_binding*/
+
+	      ctx[12](input);
+	      append(goa_block, t2);
+	      append(goa_block, goa_input);
+	      /*goa_input_binding*/
+
+	      ctx[13](goa_input);
+	      append(goa_block, t3);
+	      append(goa_block, span1);
+	      append(span1, t4);
+	      append(span1, t5);
+	    },
+
+	    p(ctx, dirty) {
+	      if (dirty &
+	      /*pagenumber*/
+	      1) {
+	        set_custom_element_data(goa_input, "value",
+	        /*pagenumber*/
+	        ctx[0]);
+	      }
+
+	      if (dirty &
+	      /*_pageCount*/
+	      256) {
+	        set_custom_element_data(goa_input, "max",
+	        /*_pageCount*/
+	        ctx[8]);
+	      }
+
+	      if (dirty &
+	      /*_pageCount*/
+	      256) set_data(t5,
+	      /*_pageCount*/
+	      ctx[8]);
+	    },
+
+	    d(detaching) {
+	      if (detaching) detach(goa_block);
+	      /*input_binding*/
+
+	      ctx[12](null);
+	      /*goa_input_binding*/
+
+	      ctx[13](null);
+	    }
+
+	  };
+	}
+
+	function create_fragment(ctx) {
+	  let goa_block1;
+	  let div;
+	  let t0;
+	  let goa_block0;
+	  let goa_button0;
+	  let t1;
+	  let goa_button0_disabled_value;
+	  let t2;
+	  let goa_button1;
+	  let t3;
+	  let goa_button1_disabled_value;
+	  let mounted;
+	  let dispose;
+	  let if_block =
+	  /*variant*/
+	  ctx[1] === "all" && create_if_block(ctx);
+	  return {
+	    c() {
+	      goa_block1 = element("goa-block");
+	      div = element("div");
+	      if (if_block) if_block.c();
+	      t0 = space();
+	      goa_block0 = element("goa-block");
+	      goa_button0 = element("goa-button");
+	      t1 = text("Previous");
+	      t2 = space();
+	      goa_button1 = element("goa-button");
+	      t3 = text("Next");
+	      this.c = noop;
+	      set_custom_element_data(goa_button0, "type", "tertiary");
+	      set_custom_element_data(goa_button0, "leadingicon", "arrow-back");
+	      set_custom_element_data(goa_button0, "disabled", goa_button0_disabled_value =
+	      /*pagenumber*/
+	      ctx[0] == 1 ? "true" : "false");
+	      set_custom_element_data(goa_button1, "type", "tertiary");
+	      set_custom_element_data(goa_button1, "trailingicon", "arrow-forward");
+	      set_custom_element_data(goa_button1, "disabled", goa_button1_disabled_value =
+	      /*pagenumber*/
+	      ctx[0] ==
+	      /*_pageCount*/
+	      ctx[8] ? "true" : "false");
+	      set_custom_element_data(goa_block0, "alignment", "center");
+	      set_custom_element_data(goa_block0, "gap", "m");
+	      set_custom_element_data(goa_block0, "data-testid", "page-links");
+	      attr(div, "class", "controls");
+	      set_custom_element_data(goa_block1, "id", "root");
+	      set_custom_element_data(goa_block1, "ml",
+	      /*ml*/
+	      ctx[5]);
+	      set_custom_element_data(goa_block1, "mr",
+	      /*mr*/
+	      ctx[3]);
+	      set_custom_element_data(goa_block1, "mb",
+	      /*mb*/
+	      ctx[4]);
+	      set_custom_element_data(goa_block1, "mt",
+	      /*mt*/
+	      ctx[2]);
+	    },
+
+	    m(target, anchor) {
+	      insert(target, goa_block1, anchor);
+	      append(goa_block1, div);
+	      if (if_block) if_block.m(div, null);
+	      append(div, t0);
+	      append(div, goa_block0);
+	      append(goa_block0, goa_button0);
+	      append(goa_button0, t1);
+	      append(goa_block0, t2);
+	      append(goa_block0, goa_button1);
+	      append(goa_button1, t3);
+
+	      if (!mounted) {
+	        dispose = [listen(goa_button0, "click",
+	        /*click_handler*/
+	        ctx[14]), listen(goa_button1, "click",
+	        /*click_handler_1*/
+	        ctx[15])];
+	        mounted = true;
+	      }
+	    },
+
+	    p(ctx, [dirty]) {
+	      if (
+	      /*variant*/
+	      ctx[1] === "all") {
+	        if (if_block) {
+	          if_block.p(ctx, dirty);
+	        } else {
+	          if_block = create_if_block(ctx);
+	          if_block.c();
+	          if_block.m(div, t0);
+	        }
+	      } else if (if_block) {
+	        if_block.d(1);
+	        if_block = null;
+	      }
+
+	      if (dirty &
+	      /*pagenumber*/
+	      1 && goa_button0_disabled_value !== (goa_button0_disabled_value =
+	      /*pagenumber*/
+	      ctx[0] == 1 ? "true" : "false")) {
+	        set_custom_element_data(goa_button0, "disabled", goa_button0_disabled_value);
+	      }
+
+	      if (dirty &
+	      /*pagenumber, _pageCount*/
+	      257 && goa_button1_disabled_value !== (goa_button1_disabled_value =
+	      /*pagenumber*/
+	      ctx[0] ==
+	      /*_pageCount*/
+	      ctx[8] ? "true" : "false")) {
+	        set_custom_element_data(goa_button1, "disabled", goa_button1_disabled_value);
+	      }
+
+	      if (dirty &
+	      /*ml*/
+	      32) {
+	        set_custom_element_data(goa_block1, "ml",
+	        /*ml*/
+	        ctx[5]);
+	      }
+
+	      if (dirty &
+	      /*mr*/
+	      8) {
+	        set_custom_element_data(goa_block1, "mr",
+	        /*mr*/
+	        ctx[3]);
+	      }
+
+	      if (dirty &
+	      /*mb*/
+	      16) {
+	        set_custom_element_data(goa_block1, "mb",
+	        /*mb*/
+	        ctx[4]);
+	      }
+
+	      if (dirty &
+	      /*mt*/
+	      4) {
+	        set_custom_element_data(goa_block1, "mt",
+	        /*mt*/
+	        ctx[2]);
+	      }
+	    },
+
+	    i: noop,
+	    o: noop,
+
+	    d(detaching) {
+	      if (detaching) detach(goa_block1);
+	      if (if_block) if_block.d();
+	      mounted = false;
+	      run_all(dispose);
+	    }
+
+	  };
+	}
+
+	function instance($$self, $$props, $$invalidate) {
+	  let _pageCount;
+
+	  const [Variants, validateVariant] = typeValidator("Pagination variant", ["all", "links-only"]);
+	  let {
+	    pagenumber
+	  } = $$props;
+	  let {
+	    itemcount
+	  } = $$props;
+	  let {
+	    perpagecount = 10
+	  } = $$props;
+	  let {
+	    variant = "all"
+	  } = $$props;
+	  let {
+	    mt = null
+	  } = $$props;
+	  let {
+	    mr = null
+	  } = $$props;
+	  let {
+	    mb = "m"
+	  } = $$props;
+	  let {
+	    ml = null
+	  } = $$props; // private
+
+	  let inputEl = null;
+	  let hiddenEl = null; // needed to allow the inputEl's event to be cancelled
+	  // hooks
+
+	  onMount(function () {
+	    return _call(tick, function () {
+	      validateRequired("GoAPagination", {
+	        itemcount,
+	        pagenumber
+	      });
+	      validateVariant(variant); // prevent event propagation if value is non-numeric 
+	      // (input[type=number] returns blank for non-numeric numbers)
+
+	      inputEl && inputEl.addEventListener("_change", e => {
+	        const page = Number.parseInt(e.detail.value);
+	        e.stopPropagation();
+
+	        if (isNaN(page)) {
+	          return;
+	        }
+
+	        hiddenEl.dispatchEvent(new CustomEvent("_change", {
+	          composed: true,
+	          bubbles: true,
+	          detail: {
+	            page
+	          }
+	        }));
+	      });
+	    });
+	  }); // functions
+
+	  function goto(e, offset) {
+	    const newPage = Number.parseInt(pagenumber + "") + offset;
+
+	    if (newPage > 0 && newPage <= _pageCount) {
+	      e.target.dispatchEvent(new CustomEvent("_change", {
+	        composed: true,
+	        bubbles: true,
+	        detail: {
+	          page: newPage
+	        }
+	      }));
+	    }
+
+	    e.preventDefault();
+	  }
+
+	  function input_binding($$value) {
+	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+	      hiddenEl = $$value;
+	      $$invalidate(7, hiddenEl);
+	    });
+	  }
+
+	  function goa_input_binding($$value) {
+	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+	      inputEl = $$value;
+	      $$invalidate(6, inputEl);
+	    });
+	  }
+
+	  const click_handler = e => goto(e, -1);
+
+	  const click_handler_1 = e => goto(e, 1);
+
+	  $$self.$$set = $$props => {
+	    if ('pagenumber' in $$props) $$invalidate(0, pagenumber = $$props.pagenumber);
+	    if ('itemcount' in $$props) $$invalidate(10, itemcount = $$props.itemcount);
+	    if ('perpagecount' in $$props) $$invalidate(11, perpagecount = $$props.perpagecount);
+	    if ('variant' in $$props) $$invalidate(1, variant = $$props.variant);
+	    if ('mt' in $$props) $$invalidate(2, mt = $$props.mt);
+	    if ('mr' in $$props) $$invalidate(3, mr = $$props.mr);
+	    if ('mb' in $$props) $$invalidate(4, mb = $$props.mb);
+	    if ('ml' in $$props) $$invalidate(5, ml = $$props.ml);
+	  };
+
+	  $$self.$$.update = () => {
+	    if ($$self.$$.dirty &
+	    /*itemcount, perpagecount*/
+	    3072) {
+	      // reactive
+	      $$invalidate(8, _pageCount = Math.ceil(itemcount / perpagecount));
+	    }
+	  };
+
+	  return [pagenumber, variant, mt, mr, mb, ml, inputEl, hiddenEl, _pageCount, goto, itemcount, perpagecount, input_binding, goa_input_binding, click_handler, click_handler_1];
+	}
+
+	class Pagination extends SvelteElement {
+	  constructor(options) {
+	    super();
+	    this.shadowRoot.innerHTML = `<style>span{white-space:nowrap}.controls{display:flex;gap:1rem;flex-direction:column;align-items:center;width:100%}@media(min-width: 480px){.controls{flex-direction:row;justify-content:space-between}}</style>`;
+	    init(this, {
+	      target: this.shadowRoot,
+	      props: attribute_to_object(this.attributes),
+	      customElement: true
+	    }, instance, create_fragment, safe_not_equal, {
+	      pagenumber: 0,
+	      itemcount: 10,
+	      perpagecount: 11,
+	      variant: 1,
+	      mt: 2,
+	      mr: 3,
+	      mb: 4,
+	      ml: 5
+	    }, null);
+
+	    if (options) {
+	      if (options.target) {
+	        insert(options.target, this, options.anchor);
+	      }
+
+	      if (options.props) {
+	        this.$set(options.props);
+	        flush();
+	      }
+	    }
+	  }
+
+	  static get observedAttributes() {
+	    return ["pagenumber", "itemcount", "perpagecount", "variant", "mt", "mr", "mb", "ml"];
+	  }
+
+	  get pagenumber() {
+	    return this.$$.ctx[0];
+	  }
+
+	  set pagenumber(pagenumber) {
+	    this.$$set({
+	      pagenumber
+	    });
+	    flush();
+	  }
+
+	  get itemcount() {
+	    return this.$$.ctx[10];
+	  }
+
+	  set itemcount(itemcount) {
+	    this.$$set({
+	      itemcount
+	    });
+	    flush();
+	  }
+
+	  get perpagecount() {
+	    return this.$$.ctx[11];
+	  }
+
+	  set perpagecount(perpagecount) {
+	    this.$$set({
+	      perpagecount
+	    });
+	    flush();
+	  }
+
+	  get variant() {
+	    return this.$$.ctx[1];
+	  }
+
+	  set variant(variant) {
+	    this.$$set({
+	      variant
+	    });
+	    flush();
+	  }
+
+	  get mt() {
+	    return this.$$.ctx[2];
+	  }
+
+	  set mt(mt) {
+	    this.$$set({
+	      mt
+	    });
+	    flush();
+	  }
+
+	  get mr() {
+	    return this.$$.ctx[3];
+	  }
+
+	  set mr(mr) {
+	    this.$$set({
+	      mr
+	    });
+	    flush();
+	  }
+
+	  get mb() {
+	    return this.$$.ctx[4];
+	  }
+
+	  set mb(mb) {
+	    this.$$set({
+	      mb
+	    });
+	    flush();
+	  }
+
+	  get ml() {
+	    return this.$$.ctx[5];
+	  }
+
+	  set ml(ml) {
+	    this.$$set({
+	      ml
+	    });
+	    flush();
+	  }
+
+	}
+
+	customElements.define("goa-pagination", Pagination);
 
 	/*! *****************************************************************************
 	Copyright (c) Microsoft Corporation.
@@ -16905,6 +17464,7 @@
 
 	var GoAInput = function GoAInput(_a) {
 	  var id = _a.id,
+	      debounce = _a.debounce,
 	      name = _a.name,
 	      type = _a.type,
 	      autoCapitalize = _a.autoCapitalize,
@@ -16962,6 +17522,7 @@
 	  }, [ref, onChange, onTrailingIconClick]);
 	  return jsxRuntime.jsxs("goa-input", __assign({
 	    ref: ref,
+	    debounce: debounce,
 	    focused: focused,
 	    type: type,
 	    name: name,
@@ -17322,6 +17883,38 @@
 	  }), void 0);
 	};
 
+	function GoAPagination(props) {
+	  var ref = react.useRef();
+	  react.useEffect(function () {
+	    if (!ref.current) {
+	      return;
+	    }
+
+	    var current = ref.current;
+
+	    var changeListener = function changeListener(e) {
+	      var page = e.detail.page;
+	      props.onChange(page);
+	    };
+
+	    current.addEventListener("_change", changeListener);
+	    return function () {
+	      current.removeEventListener("_change", changeListener);
+	    };
+	  }, [ref, props.onChange]);
+	  return jsxRuntime.jsx("goa-pagination", {
+	    ref: ref,
+	    itemcount: props.itemCount,
+	    perpagecount: props.perPageCount,
+	    pagenumber: props.pageNumber,
+	    variant: props.variant,
+	    mt: props.mt,
+	    mb: props.mb,
+	    ml: props.ml,
+	    mr: props.mr
+	  }, void 0);
+	}
+
 	var GoASkeleton = function GoASkeleton(_a) {
 	  var maxWidth = _a.maxWidth,
 	      size = _a.size,
@@ -17369,7 +17962,10 @@
 	  return jsxRuntime.jsx("goa-table", __assign({
 	    width: props.width,
 	    stickyheader: false,
-	    variant: props.variant
+	    mt: props.mt,
+	    mb: props.mb,
+	    ml: props.ml,
+	    mr: props.mr
 	  }, {
 	    children: jsxRuntime.jsx("template", {
 	      children: jsxRuntime.jsx("table", {
@@ -17502,6 +18098,7 @@
 	exports.GoANotification = GoANotification;
 	exports.GoAOneColumnLayout = GoAOneColumnLayout;
 	exports.GoAPageBlock = GoAPageBlock;
+	exports.GoAPagination = GoAPagination;
 	exports.GoARadioGroup = GoARadioGroup;
 	exports.GoARadioItem = GoARadioItem;
 	exports.GoASkeleton = GoASkeleton;