@abgov/react-components 4.0.0-alpha.105 → 4.0.0-alpha.106

package/react-components.umd.js

@@ -1124,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;
@@ -1191,7 +1191,7 @@
 	  };
 	}
 
-	function create_fragment$F(ctx) {
+	function create_fragment$G(ctx) {
 	  let div2;
 	  let div1;
 	  let t;
@@ -1201,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;
 	  }
 
@@ -1275,7 +1275,7 @@
 	  };
 	}
 
-	function instance$z($$self, $$props, $$invalidate) {
+	function instance$A($$self, $$props, $$invalidate) {
 	  let {
 	    heading = ""
 	  } = $$props;
@@ -1307,7 +1307,7 @@
 	      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,
@@ -1492,7 +1492,7 @@
 	} // (50:2) {#if content}
 
 
-	function create_if_block$g(ctx) {
+	function create_if_block$h(ctx) {
 	  let div;
 	  let t;
 	  return {
@@ -1524,7 +1524,7 @@
 	  };
 	}
 
-	function create_fragment$E(ctx) {
+	function create_fragment$F(ctx) {
 	  let div;
 	  let t;
 	  let div_style_value;
@@ -1541,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");
@@ -1598,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);
 	        }
@@ -1660,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);
@@ -1740,7 +1740,7 @@
 	      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,
@@ -1860,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;
@@ -1879,7 +1879,7 @@
       /*mb*/
       ctx[5],
       /*ml*/
-      ctx[6])}
+      ctx[6])};
     --gap: var(--goa-space-${
       /*gap*/
       ctx[0]});
@@ -1909,7 +1909,7 @@
       /*mb*/
       ctx[5],
       /*ml*/
-      ctx[6])}
+      ctx[6])};
     --gap: var(--goa-space-${
       /*gap*/
       ctx[0]});
@@ -1934,7 +1934,7 @@
 	  };
 	}
 
-	function instance$x($$self, $$props, $$invalidate) {
+	function instance$y($$self, $$props, $$invalidate) {
 	  let {
 	    gap = "m"
 	  } = $$props;
@@ -1978,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,
@@ -2160,10 +2160,10 @@
 	    }
 
 	  };
-	} // (45:2) {#if type === "start"}
+	} // (46:2) {#if type === "start"}
 
 
-	function create_if_block$f(ctx) {
+	function create_if_block$g(ctx) {
 	  let span;
 	  let t;
 	  let goa_icon;
@@ -2194,7 +2194,7 @@
 	    }
 
 	  };
-	} // (51:4) {#if leadingicon}
+	} // (52:4) {#if leadingicon}
 
 
 	function create_if_block_2$6(ctx) {
@@ -2208,7 +2208,7 @@
 	      ctx[3]);
 	      set_custom_element_data(goa_icon, "inverted",
 	      /*isButtonDark*/
-	      ctx[10]);
+	      ctx[11]);
 	    },
 
 	    m(target, anchor) {
@@ -2226,10 +2226,10 @@
 
 	      if (dirty &
 	      /*isButtonDark*/
-	      1024) {
+	      2048) {
 	        set_custom_element_data(goa_icon, "inverted",
 	        /*isButtonDark*/
-	        ctx[10]);
+	        ctx[11]);
 	      }
 	    },
 
@@ -2238,7 +2238,7 @@
 	    }
 
 	  };
-	} // (57:4) {#if trailingicon}
+	} // (58:4) {#if trailingicon}
 
 
 	function create_if_block_1$9(ctx) {
@@ -2252,7 +2252,7 @@
 	      ctx[4]);
 	      set_custom_element_data(goa_icon, "inverted",
 	      /*isButtonDark*/
-	      ctx[10]);
+	      ctx[11]);
 	    },
 
 	    m(target, anchor) {
@@ -2270,10 +2270,10 @@
 
 	      if (dirty &
 	      /*isButtonDark*/
-	      1024) {
+	      2048) {
 	        set_custom_element_data(goa_icon, "inverted",
 	        /*isButtonDark*/
-	        ctx[10]);
+	        ctx[11]);
 	      }
 	    },
 
@@ -2284,7 +2284,7 @@
 	  };
 	}
 
-	function create_fragment$C(ctx) {
+	function create_fragment$D(ctx) {
 	  let button;
 	  let button_class_value;
 	  let button_style_value;
@@ -2294,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;
 	  }
 
@@ -2323,7 +2323,7 @@
 	      ctx[9]));
 	      button.disabled =
 	      /*isDisabled*/
-	      ctx[11];
+	      ctx[10];
 	      attr(button, "data-testid",
 	      /*testid*/
 	      ctx[5]);
@@ -2342,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;
 	      }
 	    },
@@ -2388,10 +2392,10 @@
 
 	      if (dirty &
 	      /*isDisabled*/
-	      2048) {
+	      1024) {
 	        button.disabled =
 	        /*isDisabled*/
-	        ctx[11];
+	        ctx[10];
 	      }
 
 	      if (dirty &
@@ -2434,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);
@@ -2481,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);
@@ -2491,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);
@@ -2504,18 +2510,18 @@
 	  $$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 {
@@ -2527,11 +2533,11 @@
 	      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,
@@ -2591,7 +2597,7 @@
 	  }
 
 	  get disabled() {
-	    return this.$$.ctx[12];
+	    return this.$$.ctx[13];
 	  }
 
 	  set disabled(disabled) {
@@ -2683,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;
@@ -2753,7 +2759,7 @@
 	  };
 	}
 
-	function instance$v($$self, $$props, $$invalidate) {
+	function instance$w($$self, $$props, $$invalidate) {
 	  let _alignment;
 
 	  let {
@@ -2817,7 +2823,7 @@
 	      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,
@@ -2925,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 {
@@ -2956,7 +2962,7 @@
 	  };
 	}
 
-	function create_fragment$A(ctx) {
+	function create_fragment$B(ctx) {
 	  let div;
 	  let span0;
 	  let goa_icon;
@@ -2969,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");
@@ -3048,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);
 	        }
@@ -3091,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 {
@@ -3148,7 +3154,7 @@
 	      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,
@@ -3256,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() {
@@ -3287,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) {
@@ -3301,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;
@@ -3380,7 +3386,7 @@
 	  };
 	}
 
-	function instance$t($$self, $$props, $$invalidate) {
+	function instance$u($$self, $$props, $$invalidate) {
 	  let {
 	    elevation = 0
 	  } = $$props;
@@ -3428,7 +3434,7 @@
 	      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,
@@ -3548,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() {
@@ -3581,7 +3587,7 @@
 	      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) {
@@ -3595,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() {
@@ -3628,7 +3634,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$w, safe_not_equal, {}, null);
+	    }, null, create_fragment$x, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -3642,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() {
@@ -3690,7 +3696,7 @@
 	  };
 	}
 
-	function instance$s($$self, $$props, $$invalidate) {
+	function instance$t($$self, $$props, $$invalidate) {
 	  let {
 	    src
 	  } = $$props;
@@ -3714,7 +3720,7 @@
 	      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);
@@ -3789,7 +3795,7 @@
 	} // (68:4) {#if isIndeterminate}
 
 
-	function create_if_block$d(ctx) {
+	function create_if_block$e(ctx) {
 	  let svg;
 	  let rect;
 	  return {
@@ -3816,7 +3822,7 @@
 	  };
 	}
 
-	function create_fragment$u(ctx) {
+	function create_fragment$v(ctx) {
 	  let label;
 	  let div0;
 	  let input;
@@ -3834,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;
@@ -4065,7 +4071,7 @@
 	  };
 	}
 
-	function instance$r($$self, $$props, $$invalidate) {
+	function instance$s($$self, $$props, $$invalidate) {
 	  let isDisabled;
 	  let isError;
 	  let isChecked;
@@ -4180,7 +4186,7 @@
 	      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,
@@ -4382,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;
@@ -4438,7 +4444,7 @@
 	  };
 	}
 
-	function create_fragment$t(ctx) {
+	function create_fragment$u(ctx) {
 	  let div1;
 	  let t0;
 	  let div0;
@@ -4452,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");
@@ -4547,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);
 	        }
@@ -4620,7 +4626,7 @@
 	  };
 	}
 
-	function instance$q($$self, $$props, $$invalidate) {
+	function instance$r($$self, $$props, $$invalidate) {
 	  let {
 	    mt = null
 	  } = $$props;
@@ -4721,7 +4727,7 @@
 	      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,
@@ -4978,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;
@@ -5349,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();
@@ -5381,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);
@@ -5414,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"]);
@@ -5472,7 +5478,7 @@
 	      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,
@@ -5556,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;
@@ -5681,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"]);
@@ -5737,7 +5743,7 @@
 	      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,
@@ -5857,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 {
@@ -5916,7 +5922,7 @@
 	  };
 	}
 
-	function instance$n($$self, $$props, $$invalidate) {
+	function instance$o($$self, $$props, $$invalidate) {
 	  let {
 	    testid = ""
 	  } = $$props;
@@ -5952,7 +5958,7 @@
 	      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,
@@ -6319,7 +6325,7 @@
 	} // (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;
@@ -6742,7 +6748,7 @@
 	  };
 	}
 
-	function create_fragment$p(ctx) {
+	function create_fragment$q(ctx) {
 	  let div;
 	  let div_data_testid_value;
 	  let div_style_value;
@@ -6750,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;
 	  }
 
@@ -6859,7 +6865,7 @@
 	  };
 	}
 
-	function instance$m($$self, $$props, $$invalidate) {
+	function instance$n($$self, $$props, $$invalidate) {
 	  const showMenu = _async(function () {
 	    if (_disabled || _isMenuVisible) {
 	      return;
@@ -7251,7 +7257,7 @@
 	      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,
@@ -7455,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;
@@ -7476,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) {
@@ -7490,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() {
@@ -7551,7 +7557,7 @@
 	  }
 	}
 
-	function instance$l($$self, $$props, $$invalidate) {
+	function instance$m($$self, $$props, $$invalidate) {
 	  let isActive;
 	  let {
 	    active
@@ -7720,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);
 
@@ -7756,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() {
@@ -7775,7 +7781,7 @@
 	  };
 	}
 
-	function create_fragment$m(ctx) {
+	function create_fragment$n(ctx) {
 	  var _ctx$;
 
 	  let div5;
@@ -7793,7 +7799,7 @@
 	  let div5_style_value;
 	  let if_block =
 	  /*navLinks*/
-	  ((_ctx$ = ctx[2]) === null || _ctx$ === void 0 ? void 0 : _ctx$.length) && create_if_block$9();
+	  ((_ctx$ = ctx[2]) === null || _ctx$ === void 0 ? void 0 : _ctx$.length) && create_if_block$a();
 	  return {
 	    c() {
 	      var _ctx$2, _ctx$3;
@@ -7864,7 +7870,7 @@
 	      /*navLinks*/
 	      (_ctx$4 = ctx[2]) !== null && _ctx$4 !== void 0 && _ctx$4.length) {
 	        if (if_block) ;else {
-	          if_block = create_if_block$9();
+	          if_block = create_if_block$a();
 	          if_block.c();
 	          if_block.m(div4, t1);
 	        }
@@ -7916,7 +7922,7 @@
 	  };
 	}
 
-	function instance$k($$self, $$props, $$invalidate) {
+	function instance$l($$self, $$props, $$invalidate) {
 	  let {
 	    maxcontentwidth = ""
 	  } = $$props;
@@ -7955,7 +7961,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$k, create_fragment$m, safe_not_equal, {
+	    }, instance$l, create_fragment$n, safe_not_equal, {
 	      maxcontentwidth: 0
 	    }, null);
 
@@ -8045,7 +8051,7 @@
 	  };
 	}
 
-	function create_fragment$l(ctx) {
+	function create_fragment$m(ctx) {
 	  let section;
 	  let div;
 	  let t;
@@ -8133,7 +8139,7 @@
 	  };
 	}
 
-	function instance$j($$self, $$props, $$invalidate) {
+	function instance$k($$self, $$props, $$invalidate) {
 	  let rootEl;
 	  let children = [];
 	  onMount(function () {
@@ -8168,7 +8174,7 @@
 	      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) {
@@ -8189,7 +8195,7 @@
 	} // (31:2) {#if heading}
 
 
-	function create_if_block$8(ctx) {
+	function create_if_block$9(ctx) {
 	  let div;
 	  let t0;
 	  let t1;
@@ -8278,7 +8284,7 @@
 	  };
 	}
 
-	function create_fragment$k(ctx) {
+	function create_fragment$l(ctx) {
 	  let section;
 	  let t0;
 	  let div;
@@ -8287,7 +8293,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];
@@ -8354,7 +8360,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);
 	        }
@@ -8425,7 +8431,7 @@
 	  };
 	}
 
-	function instance$i($$self, $$props, $$invalidate) {
+	function instance$j($$self, $$props, $$invalidate) {
 	  let {
 	    heading = ""
 	  } = $$props;
@@ -8477,7 +8483,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$i, create_fragment$k, safe_not_equal, {
+	    }, instance$j, create_fragment$l, safe_not_equal, {
 	      heading: 0,
 	      maxcolumncount: 1
 	    }, null);
@@ -8675,7 +8681,7 @@
 	} // (48:2) {#if helptext}
 
 
-	function create_if_block$7(ctx) {
+	function create_if_block$8(ctx) {
 	  let div;
 	  let t;
 	  return {
@@ -8707,7 +8713,7 @@
 	  };
 	}
 
-	function create_fragment$j(ctx) {
+	function create_fragment$k(ctx) {
 	  let div1;
 	  let t0;
 	  let div0;
@@ -8722,7 +8728,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");
@@ -8799,7 +8805,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);
 	        }
@@ -8844,7 +8850,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 = ""
@@ -8900,7 +8906,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$h, create_fragment$j, safe_not_equal, {
+	    }, instance$i, create_fragment$k, safe_not_equal, {
 	      testid: 0,
 	      mt: 1,
 	      mr: 2,
@@ -9032,7 +9038,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;
@@ -9100,7 +9106,7 @@
 	  };
 	}
 
-	function instance$g($$self, $$props, $$invalidate) {
+	function instance$h($$self, $$props, $$invalidate) {
 	  let {
 	    gap = "m"
 	  } = $$props;
@@ -9145,7 +9151,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$g, create_fragment$i, safe_not_equal, {
+	    }, instance$h, create_fragment$j, safe_not_equal, {
 	      gap: 0,
 	      minchildwidth: 1,
 	      mt: 2,
@@ -9241,7 +9247,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;
@@ -9326,7 +9332,7 @@
 	  };
 	}
 
-	function instance$f($$self, $$props, $$invalidate) {
+	function instance$g($$self, $$props, $$invalidate) {
 	  let {
 	    heading
 	  } = $$props;
@@ -9354,7 +9360,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$f, create_fragment$h, safe_not_equal, {
+	    }, instance$g, create_fragment$i, safe_not_equal, {
 	      heading: 0,
 	      backgroundurl: 1,
 	      minheight: 2
@@ -9414,7 +9420,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;
@@ -9586,7 +9592,7 @@
 	  }));
 	}
 
-	function instance$e($$self, $$props, $$invalidate) {
+	function instance$f($$self, $$props, $$invalidate) {
 	  let css;
 	  let isDisabled;
 	  let isInverted;
@@ -9691,7 +9697,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$e, create_fragment$g, safe_not_equal, {
+	    }, instance$f, create_fragment$h, safe_not_equal, {
 	      icon: 0,
 	      size: 1,
 	      theme: 2,
@@ -9859,7 +9865,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 {
@@ -9907,12 +9913,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");
@@ -9965,7 +9971,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);
 	        }
@@ -10038,7 +10044,7 @@
 	  };
 	}
 
-	function instance$d($$self, $$props, $$invalidate) {
+	function instance$e($$self, $$props, $$invalidate) {
 	  let isInverted;
 
 	  let _size;
@@ -10128,7 +10134,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,
@@ -10338,7 +10344,7 @@
 	    }
 
 	  };
-	} // (100:4) {#if leadingicon}
+	} // (109:4) {#if leadingicon}
 
 
 	function create_if_block_3$2(ctx) {
@@ -10372,7 +10378,7 @@
 	    }
 
 	  };
-	} // (130:4) {#if trailingicon && !handlesTrailingIconClick}
+	} // (139:4) {#if trailingicon && !handlesTrailingIconClick}
 
 
 	function create_if_block_2$3(ctx) {
@@ -10407,7 +10413,7 @@
 	    }
 
 	  };
-	} // (140:4) {#if trailingicon && handlesTrailingIconClick}
+	} // (149:4) {#if trailingicon && handlesTrailingIconClick}
 
 
 	function create_if_block_1$3(ctx) {
@@ -10462,10 +10468,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 {
@@ -10497,7 +10503,7 @@
 	  };
 	}
 
-	function create_fragment$e(ctx) {
+	function create_fragment$f(ctx) {
 	  let div3;
 	  let div2;
 	  let t0;
@@ -10535,7 +10541,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");
@@ -10649,7 +10655,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);
@@ -10856,7 +10862,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);
 	        }
@@ -10919,7 +10925,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();
@@ -10936,7 +10942,7 @@
 	  }));
 	}
 
-	function instance$c($$self, $$props, $$invalidate) {
+	function instance$d($$self, $$props, $$invalidate) {
 	  let handlesTrailingIconClick;
 	  let isFocused;
 	  let isReadonly;
@@ -10993,13 +10999,13 @@
 	    arialabel = null
 	  } = $$props;
 	  let {
-	    min = null
+	    min = ""
 	  } = $$props;
 	  let {
-	    max = null
+	    max = ""
 	  } = $$props;
 	  let {
-	    step = null
+	    step = 1
 	  } = $$props;
 	  let {
 	    prefix = ""
@@ -11007,6 +11013,9 @@
 	  let {
 	    suffix = ""
 	  } = $$props;
+	  let {
+	    debounce = 0
+	  } = $$props;
 	  let {
 	    mt = null
 	  } = $$props;
@@ -11020,19 +11029,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(() => {
@@ -11073,6 +11091,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);
@@ -11089,7 +11108,7 @@
 	    if ($$self.$$.dirty[0] &
 	    /*focused*/
 	    268435456) {
-	      $$invalidate(31, isFocused = toBoolean(focused));
+	      $$invalidate(32, isFocused = toBoolean(focused));
 	    }
 
 	    if ($$self.$$.dirty[0] &
@@ -11114,7 +11133,7 @@
 	    /*inputEl*/
 	    1048576 | $$self.$$.dirty[1] &
 	    /*isFocused*/
-	    1) {
+	    2) {
 	      if (isFocused && inputEl) {
 	        setTimeout(() => inputEl.focus(), 1);
 	      }
@@ -11131,19 +11150,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;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(--color-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:0;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>')
+	    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(--color-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,
@@ -11165,6 +11184,7 @@
 	      step: 13,
 	      prefix: 14,
 	      suffix: 15,
+	      debounce: 31,
 	      mt: 16,
 	      mr: 17,
 	      mb: 18,
@@ -11184,7 +11204,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() {
@@ -11418,6 +11438,17 @@
 	    flush();
 	  }
 
+	  get debounce() {
+	    return this.$$.ctx[31];
+	  }
+
+	  set debounce(debounce) {
+	    this.$$set({
+	      debounce
+	    });
+	    flush();
+	  }
+
 	  get mt() {
 	    return this.$$.ctx[16];
 	  }
@@ -11629,7 +11660,7 @@
 	} // (56:2) {#if version}
 
 
-	function create_if_block$4(ctx) {
+	function create_if_block$5(ctx) {
 	  let div;
 	  let t;
 	  return {
@@ -11662,7 +11693,7 @@
 	  };
 	}
 
-	function create_fragment$d(ctx) {
+	function create_fragment$e(ctx) {
 	  let header;
 	  let t0;
 	  let show_if = ["alpha", "beta"].includes(
@@ -11677,7 +11708,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");
@@ -11743,7 +11774,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);
 	        }
@@ -11771,7 +11802,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
@@ -11803,7 +11834,7 @@
 	      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
@@ -11863,7 +11894,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;
@@ -12268,12 +12299,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();
@@ -12300,7 +12331,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);
@@ -12333,7 +12364,7 @@
 	  };
 	}
 
-	function instance$a($$self, $$props, $$invalidate) {
+	function instance$b($$self, $$props, $$invalidate) {
 	  let isClosable;
 	  let isOpen;
 
@@ -12423,7 +12454,7 @@
 	      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,
@@ -12519,7 +12550,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;
@@ -12643,12 +12674,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();
@@ -12675,7 +12706,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);
@@ -12708,7 +12739,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 {
@@ -12746,7 +12777,7 @@
 	      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);
 
@@ -12788,7 +12819,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;
@@ -12828,7 +12859,7 @@
 	  };
 	}
 
-	function instance$8($$self, $$props, $$invalidate) {
+	function instance$9($$self, $$props, $$invalidate) {
 	  const Sizes = {
 	    "full": "100%"
 	  };
@@ -12869,7 +12900,7 @@
 	      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);
@@ -13107,7 +13138,7 @@
 	  };
 	}
 
-	function create_fragment$9(ctx) {
+	function create_fragment$a(ctx) {
 	  let div;
 	  let slot;
 	  let t;
@@ -13230,7 +13261,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"]);
@@ -13375,7 +13406,7 @@
 	      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,
@@ -13531,7 +13562,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;
@@ -13599,7 +13630,7 @@
 	  };
 	}
 
-	function instance$6($$self, $$props, $$invalidate) {
+	function instance$7($$self, $$props, $$invalidate) {
 	  let {
 	    direction = "vertical"
 	  } = $$props;
@@ -13631,7 +13662,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,
@@ -13972,7 +14003,7 @@
 	} // (30:2) {#if type === "card"}
 
 
-	function create_if_block$1(ctx) {
+	function create_if_block$2(ctx) {
 	  let div1;
 	  let skeleton0;
 	  let t0;
@@ -14166,13 +14197,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) {
@@ -14282,7 +14313,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 {
@@ -14340,7 +14371,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$5, create_fragment$7, safe_not_equal, {
+	    }, instance$6, create_fragment$8, safe_not_equal, {
 	      maxwidth: 0,
 	      size: 1,
 	      linecount: 2,
@@ -14472,7 +14503,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() {
@@ -14501,7 +14532,7 @@
 	  };
 	}
 
-	function instance$4($$self, $$props, $$invalidate) {
+	function instance$5($$self, $$props, $$invalidate) {
 	  let {
 	    hspacing = "none"
 	  } = $$props;
@@ -14538,7 +14569,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);
@@ -14770,7 +14801,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;
@@ -14960,11 +14991,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();
@@ -14984,7 +15015,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);
 	        }
@@ -15005,7 +15036,7 @@
 	  };
 	}
 
-	function instance$3($$self, $$props, $$invalidate) {
+	function instance$4($$self, $$props, $$invalidate) {
 	  let diameter;
 	  let strokewidth;
 	  let radius;
@@ -15136,7 +15167,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$3, create_fragment$5, safe_not_equal, {
+	    }, instance$4, create_fragment$6, safe_not_equal, {
 	      size: 10,
 	      invert: 0,
 	      progress: 11,
@@ -15208,7 +15239,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;
@@ -15310,7 +15341,7 @@
 	  };
 	}
 
-	function instance$2($$self, $$props, $$invalidate) {
+	function instance$3($$self, $$props, $$invalidate) {
 	  let _stickyHeader;
 
 	  const [Variants, validateVariant] = typeValidator("Table variant", ["normal", "relaxed"], true);
@@ -15389,7 +15420,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$2, create_fragment$4, safe_not_equal, {
+	    }, instance$3, create_fragment$5, safe_not_equal, {
 	      width: 0,
 	      stickyheader: 8,
 	      variant: 1,
@@ -15497,7 +15528,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;
@@ -15678,7 +15709,7 @@
 	  };
 	}
 
-	function instance$1($$self, $$props, $$invalidate) {
+	function instance$2($$self, $$props, $$invalidate) {
 	  let isError;
 	  let isDisabled;
 	  let isReadonly;
@@ -15795,7 +15826,7 @@
 	      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,
@@ -15999,7 +16030,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() {
@@ -16043,7 +16074,7 @@
 	      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) {
@@ -16057,7 +16088,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() {
@@ -16094,7 +16125,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) {
@@ -16108,7 +16139,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;
@@ -16178,7 +16209,7 @@
 	  };
 	}
 
-	function instance($$self, $$props, $$invalidate) {
+	function instance$1($$self, $$props, $$invalidate) {
 	  let {
 	    navcolumnwidth = ""
 	  } = $$props;
@@ -16202,7 +16233,7 @@
 	      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);
@@ -16248,6 +16279,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.
@@ -16924,6 +17462,7 @@
 
 	var GoAInput = function GoAInput(_a) {
 	  var id = _a.id,
+	      debounce = _a.debounce,
 	      name = _a.name,
 	      type = _a.type,
 	      autoCapitalize = _a.autoCapitalize,
@@ -16981,6 +17520,7 @@
 	  }, [ref, onChange, onTrailingIconClick]);
 	  return jsxRuntime.jsxs("goa-input", __assign({
 	    ref: ref,
+	    debounce: debounce,
 	    focused: focused,
 	    type: type,
 	    name: name,
@@ -17341,6 +17881,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,
@@ -17388,7 +17960,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", {
@@ -17521,6 +18096,7 @@
 	exports.GoANotification = GoANotification;
 	exports.GoAOneColumnLayout = GoAOneColumnLayout;
 	exports.GoAPageBlock = GoAPageBlock;
+	exports.GoAPagination = GoAPagination;
 	exports.GoARadioGroup = GoARadioGroup;
 	exports.GoARadioItem = GoARadioItem;
 	exports.GoASkeleton = GoASkeleton;