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

package/react-components.esm.js

@@ -1083,7 +1083,7 @@ function create_else_block$4(ctx) {
 } // (19:4) {#if url}
 
 
-function create_if_block$h(ctx) {
+function create_if_block$i(ctx) {
   let a;
   let img0;
   let img0_src_value;
@@ -1150,7 +1150,7 @@ function create_if_block$h(ctx) {
   };
 }
 
-function create_fragment$F(ctx) {
+function create_fragment$G(ctx) {
   let div2;
   let div1;
   let t;
@@ -1160,7 +1160,7 @@ function create_fragment$F(ctx) {
   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;
   }
 
@@ -1234,7 +1234,7 @@ function create_fragment$F(ctx) {
   };
 }
 
-function instance$z($$self, $$props, $$invalidate) {
+function instance$A($$self, $$props, $$invalidate) {
   let {
     heading = ""
   } = $$props;
@@ -1266,7 +1266,7 @@ class AppHeader extends SvelteElement {
       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,
@@ -1451,7 +1451,7 @@ function create_if_block_1$a(ctx) {
 } // (50:2) {#if content}
 
 
-function create_if_block$g(ctx) {
+function create_if_block$h(ctx) {
   let div;
   let t;
   return {
@@ -1483,7 +1483,7 @@ function create_if_block$g(ctx) {
   };
 }
 
-function create_fragment$E(ctx) {
+function create_fragment$F(ctx) {
   let div;
   let t;
   let div_style_value;
@@ -1500,7 +1500,7 @@ function create_fragment$E(ctx) {
   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");
@@ -1557,7 +1557,7 @@ function create_fragment$E(ctx) {
         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);
         }
@@ -1619,7 +1619,7 @@ function create_fragment$E(ctx) {
   };
 }
 
-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);
@@ -1699,7 +1699,7 @@ class Badge extends SvelteElement {
       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,
@@ -1819,7 +1819,7 @@ class Badge extends SvelteElement {
 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;
@@ -1838,7 +1838,7 @@ function create_fragment$D(ctx) {
       /*mb*/
       ctx[5],
       /*ml*/
-      ctx[6])}
+      ctx[6])};
     --gap: var(--goa-space-${
       /*gap*/
       ctx[0]});
@@ -1868,7 +1868,7 @@ function create_fragment$D(ctx) {
       /*mb*/
       ctx[5],
       /*ml*/
-      ctx[6])}
+      ctx[6])};
     --gap: var(--goa-space-${
       /*gap*/
       ctx[0]});
@@ -1893,7 +1893,7 @@ function create_fragment$D(ctx) {
   };
 }
 
-function instance$x($$self, $$props, $$invalidate) {
+function instance$y($$self, $$props, $$invalidate) {
   let {
     gap = "m"
   } = $$props;
@@ -1937,7 +1937,7 @@ class Block extends SvelteElement {
       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,
@@ -2119,10 +2119,10 @@ function create_else_block$2(ctx) {
     }
 
   };
-} // (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;
@@ -2153,7 +2153,7 @@ function create_if_block$f(ctx) {
     }
 
   };
-} // (51:4) {#if leadingicon}
+} // (52:4) {#if leadingicon}
 
 
 function create_if_block_2$6(ctx) {
@@ -2167,7 +2167,7 @@ function create_if_block_2$6(ctx) {
       ctx[3]);
       set_custom_element_data(goa_icon, "inverted",
       /*isButtonDark*/
-      ctx[10]);
+      ctx[11]);
     },
 
     m(target, anchor) {
@@ -2185,10 +2185,10 @@ function create_if_block_2$6(ctx) {
 
       if (dirty &
       /*isButtonDark*/
-      1024) {
+      2048) {
         set_custom_element_data(goa_icon, "inverted",
         /*isButtonDark*/
-        ctx[10]);
+        ctx[11]);
       }
     },
 
@@ -2197,7 +2197,7 @@ function create_if_block_2$6(ctx) {
     }
 
   };
-} // (57:4) {#if trailingicon}
+} // (58:4) {#if trailingicon}
 
 
 function create_if_block_1$9(ctx) {
@@ -2211,7 +2211,7 @@ function create_if_block_1$9(ctx) {
       ctx[4]);
       set_custom_element_data(goa_icon, "inverted",
       /*isButtonDark*/
-      ctx[10]);
+      ctx[11]);
     },
 
     m(target, anchor) {
@@ -2229,10 +2229,10 @@ function create_if_block_1$9(ctx) {
 
       if (dirty &
       /*isButtonDark*/
-      1024) {
+      2048) {
         set_custom_element_data(goa_icon, "inverted",
         /*isButtonDark*/
-        ctx[10]);
+        ctx[11]);
       }
     },
 
@@ -2243,7 +2243,7 @@ function create_if_block_1$9(ctx) {
   };
 }
 
-function create_fragment$C(ctx) {
+function create_fragment$D(ctx) {
   let button;
   let button_class_value;
   let button_style_value;
@@ -2253,7 +2253,7 @@ function create_fragment$C(ctx) {
   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;
   }
 
@@ -2282,7 +2282,7 @@ function create_fragment$C(ctx) {
       ctx[9]));
       button.disabled =
       /*isDisabled*/
-      ctx[11];
+      ctx[10];
       attr(button, "data-testid",
       /*testid*/
       ctx[5]);
@@ -2301,7 +2301,11 @@ function create_fragment$C(ctx) {
       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;
       }
     },
@@ -2347,10 +2351,10 @@ function create_fragment$C(ctx) {
 
       if (dirty &
       /*isDisabled*/
-      2048) {
+      1024) {
         button.disabled =
         /*isDisabled*/
-        ctx[11];
+        ctx[10];
       }
 
       if (dirty &
@@ -2393,15 +2397,7 @@ function create_fragment$C(ctx) {
   };
 }
 
-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);
@@ -2440,6 +2436,16 @@ function instance$w($$self, $$props, $$invalidate) {
   let {
     ml = null
   } = $$props;
+
+  function clickHandler(e) {
+    if (!isDisabled) {
+      this.dispatchEvent(new CustomEvent("_click", {
+        composed: true,
+        bubbles: true
+      }));
+    }
+  }
+
   onMount(() => {
     validateType(type);
     validateSize(size);
@@ -2450,7 +2456,7 @@ function instance$w($$self, $$props, $$invalidate) {
     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);
@@ -2463,18 +2469,18 @@ function instance$w($$self, $$props, $$invalidate) {
   $$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 {
@@ -2486,11 +2492,11 @@ class Button extends SvelteElement {
       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,
@@ -2550,7 +2556,7 @@ class Button extends SvelteElement {
   }
 
   get disabled() {
-    return this.$$.ctx[12];
+    return this.$$.ctx[13];
   }
 
   set disabled(disabled) {
@@ -2642,7 +2648,7 @@ class Button extends SvelteElement {
 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;
@@ -2712,7 +2718,7 @@ function create_fragment$B(ctx) {
   };
 }
 
-function instance$v($$self, $$props, $$invalidate) {
+function instance$w($$self, $$props, $$invalidate) {
   let _alignment;
 
   let {
@@ -2776,7 +2782,7 @@ class ButtonGroup extends SvelteElement {
       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,
@@ -2884,7 +2890,7 @@ class ButtonGroup extends SvelteElement {
 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 {
@@ -2915,7 +2921,7 @@ function create_if_block$e(ctx) {
   };
 }
 
-function create_fragment$A(ctx) {
+function create_fragment$B(ctx) {
   let div;
   let span0;
   let goa_icon;
@@ -2928,7 +2934,7 @@ function create_fragment$A(ctx) {
   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");
@@ -3007,7 +3013,7 @@ function create_fragment$A(ctx) {
         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);
         }
@@ -3050,7 +3056,7 @@ function create_fragment$A(ctx) {
   };
 }
 
-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 {
@@ -3107,7 +3113,7 @@ class Callout extends SvelteElement {
       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,
@@ -3215,7 +3221,7 @@ class Callout extends SvelteElement {
 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() {
@@ -3246,7 +3252,7 @@ class CardActions extends SvelteElement {
       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) {
@@ -3260,7 +3266,7 @@ class CardActions extends SvelteElement {
 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;
@@ -3339,7 +3345,7 @@ function create_fragment$y(ctx) {
   };
 }
 
-function instance$t($$self, $$props, $$invalidate) {
+function instance$u($$self, $$props, $$invalidate) {
   let {
     elevation = 0
   } = $$props;
@@ -3387,7 +3393,7 @@ class Card extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$t, create_fragment$y, safe_not_equal, {
+    }, instance$u, create_fragment$z, safe_not_equal, {
       elevation: 0,
       width: 1,
       height: 2,
@@ -3507,7 +3513,7 @@ class Card extends SvelteElement {
 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() {
@@ -3540,7 +3546,7 @@ class CardContent extends SvelteElement {
       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) {
@@ -3554,7 +3560,7 @@ class CardContent extends SvelteElement {
 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() {
@@ -3587,7 +3593,7 @@ class CardGroup extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, null, create_fragment$w, safe_not_equal, {}, null);
+    }, null, create_fragment$x, safe_not_equal, {}, null);
 
     if (options) {
       if (options.target) {
@@ -3601,7 +3607,7 @@ class CardGroup extends SvelteElement {
 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() {
@@ -3649,7 +3655,7 @@ function create_fragment$v(ctx) {
   };
 }
 
-function instance$s($$self, $$props, $$invalidate) {
+function instance$t($$self, $$props, $$invalidate) {
   let {
     src
   } = $$props;
@@ -3673,7 +3679,7 @@ class CardImage extends SvelteElement {
       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);
@@ -3748,7 +3754,7 @@ function create_if_block_1$8(ctx) {
 } // (68:4) {#if isIndeterminate}
 
 
-function create_if_block$d(ctx) {
+function create_if_block$e(ctx) {
   let svg;
   let rect;
   return {
@@ -3775,7 +3781,7 @@ function create_if_block$d(ctx) {
   };
 }
 
-function create_fragment$u(ctx) {
+function create_fragment$v(ctx) {
   let label;
   let div0;
   let input;
@@ -3793,7 +3799,7 @@ function create_fragment$u(ctx) {
   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;
@@ -4024,7 +4030,7 @@ function create_fragment$u(ctx) {
   };
 }
 
-function instance$r($$self, $$props, $$invalidate) {
+function instance$s($$self, $$props, $$invalidate) {
   let isDisabled;
   let isError;
   let isChecked;
@@ -4139,7 +4145,7 @@ class Checkbox extends SvelteElement {
       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,
@@ -4341,7 +4347,7 @@ function create_if_block_1$7(ctx) {
 } // (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;
@@ -4397,7 +4403,7 @@ function create_if_block$c(ctx) {
   };
 }
 
-function create_fragment$t(ctx) {
+function create_fragment$u(ctx) {
   let div1;
   let t0;
   let div0;
@@ -4411,7 +4417,7 @@ function create_fragment$t(ctx) {
   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");
@@ -4506,7 +4512,7 @@ function create_fragment$t(ctx) {
         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);
         }
@@ -4579,7 +4585,7 @@ function create_fragment$t(ctx) {
   };
 }
 
-function instance$q($$self, $$props, $$invalidate) {
+function instance$r($$self, $$props, $$invalidate) {
   let {
     mt = null
   } = $$props;
@@ -4680,7 +4686,7 @@ class Chip extends SvelteElement {
       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,
@@ -4937,7 +4943,7 @@ function noscroll(_node, opts) {
 /* 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;
@@ -5308,12 +5314,12 @@ function create_if_block_2$5(ctx) {
   };
 }
 
-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();
@@ -5340,7 +5346,7 @@ function create_fragment$s(ctx) {
             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);
@@ -5373,7 +5379,7 @@ function create_fragment$s(ctx) {
   };
 }
 
-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"]);
@@ -5430,7 +5436,7 @@ class CircularProgress extends SvelteElement {
       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,
@@ -5514,7 +5520,7 @@ class CircularProgress extends SvelteElement {
 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;
@@ -5639,7 +5645,7 @@ function create_fragment$r(ctx) {
   };
 }
 
-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"]);
@@ -5695,7 +5701,7 @@ class Container extends SvelteElement {
       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,
@@ -5815,7 +5821,7 @@ class Container extends SvelteElement {
 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 {
@@ -5874,7 +5880,7 @@ function create_fragment$q(ctx) {
   };
 }
 
-function instance$n($$self, $$props, $$invalidate) {
+function instance$o($$self, $$props, $$invalidate) {
   let {
     testid = ""
   } = $$props;
@@ -5910,7 +5916,7 @@ class Divider extends SvelteElement {
       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,
@@ -6277,7 +6283,7 @@ function create_else_block$1(ctx) {
 } // (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;
@@ -6700,7 +6706,7 @@ function create_each_block$4(ctx) {
   };
 }
 
-function create_fragment$p(ctx) {
+function create_fragment$q(ctx) {
   let div;
   let div_data_testid_value;
   let div_style_value;
@@ -6708,7 +6714,7 @@ function create_fragment$p(ctx) {
   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;
   }
 
@@ -6817,7 +6823,7 @@ function create_fragment$p(ctx) {
   };
 }
 
-function instance$m($$self, $$props, $$invalidate) {
+function instance$n($$self, $$props, $$invalidate) {
   let _disabled;
 
   let _error;
@@ -7207,7 +7213,7 @@ class Dropdown extends SvelteElement {
       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,
@@ -7411,7 +7417,7 @@ class Dropdown extends SvelteElement {
 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;
@@ -7432,7 +7438,7 @@ class DropdownItem extends SvelteElement {
       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) {
@@ -7446,7 +7452,7 @@ class DropdownItem extends SvelteElement {
 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() {
@@ -7507,7 +7513,7 @@ function isFocusable(element) {
   }
 }
 
-function instance$l($$self, $$props, $$invalidate) {
+function instance$m($$self, $$props, $$invalidate) {
   let isActive;
   let {
     active
@@ -7676,7 +7682,7 @@ class FocusTrap extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$l, create_fragment$n, safe_not_equal, {
+    }, instance$m, create_fragment$o, safe_not_equal, {
       active: 1
     }, null);
 
@@ -7712,7 +7718,7 @@ class FocusTrap extends SvelteElement {
 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() {
@@ -7731,7 +7737,7 @@ function create_if_block$9(ctx) {
   };
 }
 
-function create_fragment$m(ctx) {
+function create_fragment$n(ctx) {
   var _ctx$;
 
   let div5;
@@ -7749,7 +7755,7 @@ function create_fragment$m(ctx) {
   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;
@@ -7820,7 +7826,7 @@ function create_fragment$m(ctx) {
       /*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);
         }
@@ -7872,7 +7878,7 @@ function create_fragment$m(ctx) {
   };
 }
 
-function instance$k($$self, $$props, $$invalidate) {
+function instance$l($$self, $$props, $$invalidate) {
   let {
     maxcontentwidth = ""
   } = $$props;
@@ -7910,7 +7916,7 @@ class Footer extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$k, create_fragment$m, safe_not_equal, {
+    }, instance$l, create_fragment$n, safe_not_equal, {
       maxcontentwidth: 0
     }, null);
 
@@ -8000,7 +8006,7 @@ function create_each_block$3(ctx) {
   };
 }
 
-function create_fragment$l(ctx) {
+function create_fragment$m(ctx) {
   let section;
   let div;
   let t;
@@ -8088,7 +8094,7 @@ function create_fragment$l(ctx) {
   };
 }
 
-function instance$j($$self, $$props, $$invalidate) {
+function instance$k($$self, $$props, $$invalidate) {
   let rootEl;
   let children = [];
   onMount(async () => {
@@ -8123,7 +8129,7 @@ class FooterMetaSection extends SvelteElement {
       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) {
@@ -8144,7 +8150,7 @@ function get_each_context$2(ctx, list, i) {
 } // (31:2) {#if heading}
 
 
-function create_if_block$8(ctx) {
+function create_if_block$9(ctx) {
   let div;
   let t0;
   let t1;
@@ -8233,7 +8239,7 @@ function create_each_block$2(ctx) {
   };
 }
 
-function create_fragment$k(ctx) {
+function create_fragment$l(ctx) {
   let section;
   let t0;
   let div;
@@ -8242,7 +8248,7 @@ function create_fragment$k(ctx) {
   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];
@@ -8309,7 +8315,7 @@ function create_fragment$k(ctx) {
         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);
         }
@@ -8380,7 +8386,7 @@ function create_fragment$k(ctx) {
   };
 }
 
-function instance$i($$self, $$props, $$invalidate) {
+function instance$j($$self, $$props, $$invalidate) {
   let {
     heading = ""
   } = $$props;
@@ -8431,7 +8437,7 @@ class FooterNavSection extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$i, create_fragment$k, safe_not_equal, {
+    }, instance$j, create_fragment$l, safe_not_equal, {
       heading: 0,
       maxcolumncount: 1
     }, null);
@@ -8629,7 +8635,7 @@ function create_if_block_1$4(ctx) {
 } // (48:2) {#if helptext}
 
 
-function create_if_block$7(ctx) {
+function create_if_block$8(ctx) {
   let div;
   let t;
   return {
@@ -8661,7 +8667,7 @@ function create_if_block$7(ctx) {
   };
 }
 
-function create_fragment$j(ctx) {
+function create_fragment$k(ctx) {
   let div1;
   let t0;
   let div0;
@@ -8676,7 +8682,7 @@ function create_fragment$j(ctx) {
   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");
@@ -8753,7 +8759,7 @@ function create_fragment$j(ctx) {
         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);
         }
@@ -8798,7 +8804,7 @@ function create_fragment$j(ctx) {
   };
 }
 
-function instance$h($$self, $$props, $$invalidate) {
+function instance$i($$self, $$props, $$invalidate) {
   const [REQUIREMENT_TYPES, validateRequirementType] = typeValidator("Requirement type", ["optional", "required"], false);
   let {
     testid = ""
@@ -8854,7 +8860,7 @@ class FormItem extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$h, create_fragment$j, safe_not_equal, {
+    }, instance$i, create_fragment$k, safe_not_equal, {
       testid: 0,
       mt: 1,
       mr: 2,
@@ -8986,7 +8992,7 @@ class FormItem extends SvelteElement {
 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;
@@ -9054,7 +9060,7 @@ function create_fragment$i(ctx) {
   };
 }
 
-function instance$g($$self, $$props, $$invalidate) {
+function instance$h($$self, $$props, $$invalidate) {
   let {
     gap = "m"
   } = $$props;
@@ -9099,7 +9105,7 @@ class Grid extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$g, create_fragment$i, safe_not_equal, {
+    }, instance$h, create_fragment$j, safe_not_equal, {
       gap: 0,
       minchildwidth: 1,
       mt: 2,
@@ -9195,7 +9201,7 @@ class Grid extends SvelteElement {
 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;
@@ -9280,7 +9286,7 @@ function create_fragment$h(ctx) {
   };
 }
 
-function instance$f($$self, $$props, $$invalidate) {
+function instance$g($$self, $$props, $$invalidate) {
   let {
     heading
   } = $$props;
@@ -9308,7 +9314,7 @@ class HeroBanner extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$f, create_fragment$h, safe_not_equal, {
+    }, instance$g, create_fragment$i, safe_not_equal, {
       heading: 0,
       backgroundurl: 1,
       minheight: 2
@@ -9368,7 +9374,7 @@ class HeroBanner extends SvelteElement {
 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;
@@ -9540,7 +9546,7 @@ function handleClick(e) {
   }));
 }
 
-function instance$e($$self, $$props, $$invalidate) {
+function instance$f($$self, $$props, $$invalidate) {
   let css;
   let isDisabled;
   let isInverted;
@@ -9645,7 +9651,7 @@ class IconButton extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$e, create_fragment$g, safe_not_equal, {
+    }, instance$f, create_fragment$h, safe_not_equal, {
       icon: 0,
       size: 1,
       theme: 2,
@@ -9813,7 +9819,7 @@ class IconButton extends SvelteElement {
 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 {
@@ -9861,12 +9867,12 @@ function create_if_block$6(ctx) {
   };
 }
 
-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");
@@ -9919,7 +9925,7 @@ function create_fragment$f(ctx) {
         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);
         }
@@ -9992,7 +9998,7 @@ function create_fragment$f(ctx) {
   };
 }
 
-function instance$d($$self, $$props, $$invalidate) {
+function instance$e($$self, $$props, $$invalidate) {
   let isInverted;
 
   let _size;
@@ -10082,7 +10088,7 @@ class Icon extends SvelteElement {
       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,
@@ -10292,7 +10298,7 @@ function create_if_block_4$1(ctx) {
     }
 
   };
-} // (100:4) {#if leadingicon}
+} // (109:4) {#if leadingicon}
 
 
 function create_if_block_3$2(ctx) {
@@ -10326,7 +10332,7 @@ function create_if_block_3$2(ctx) {
     }
 
   };
-} // (130:4) {#if trailingicon && !handlesTrailingIconClick}
+} // (139:4) {#if trailingicon && !handlesTrailingIconClick}
 
 
 function create_if_block_2$3(ctx) {
@@ -10361,7 +10367,7 @@ function create_if_block_2$3(ctx) {
     }
 
   };
-} // (140:4) {#if trailingicon && handlesTrailingIconClick}
+} // (149:4) {#if trailingicon && handlesTrailingIconClick}
 
 
 function create_if_block_1$3(ctx) {
@@ -10416,10 +10422,10 @@ function create_if_block_1$3(ctx) {
     }
 
   };
-} // (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 {
@@ -10451,7 +10457,7 @@ function create_if_block$5(ctx) {
   };
 }
 
-function create_fragment$e(ctx) {
+function create_fragment$f(ctx) {
   let div3;
   let div2;
   let t0;
@@ -10489,7 +10495,7 @@ function create_fragment$e(ctx) {
   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");
@@ -10603,7 +10609,7 @@ function create_fragment$e(ctx) {
       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);
@@ -10810,7 +10816,7 @@ function create_fragment$e(ctx) {
         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);
         }
@@ -10873,7 +10879,7 @@ function create_fragment$e(ctx) {
       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();
@@ -10890,7 +10896,7 @@ function doClick() {
   }));
 }
 
-function instance$c($$self, $$props, $$invalidate) {
+function instance$d($$self, $$props, $$invalidate) {
   let handlesTrailingIconClick;
   let isFocused;
   let isReadonly;
@@ -10947,13 +10953,13 @@ function instance$c($$self, $$props, $$invalidate) {
     arialabel = null
   } = $$props;
   let {
-    min = null
+    min = ""
   } = $$props;
   let {
-    max = null
+    max = ""
   } = $$props;
   let {
-    step = null
+    step = 1
   } = $$props;
   let {
     prefix = ""
@@ -10961,6 +10967,9 @@ function instance$c($$self, $$props, $$invalidate) {
   let {
     suffix = ""
   } = $$props;
+  let {
+    debounce = 0
+  } = $$props;
   let {
     mt = null
   } = $$props;
@@ -10974,19 +10983,28 @@ function instance$c($$self, $$props, $$invalidate) {
     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(() => {
@@ -11027,6 +11045,7 @@ function instance$c($$self, $$props, $$invalidate) {
     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);
@@ -11043,7 +11062,7 @@ function instance$c($$self, $$props, $$invalidate) {
     if ($$self.$$.dirty[0] &
     /*focused*/
     268435456) {
-      $$invalidate(31, isFocused = toBoolean(focused));
+      $$invalidate(32, isFocused = toBoolean(focused));
     }
 
     if ($$self.$$.dirty[0] &
@@ -11068,7 +11087,7 @@ function instance$c($$self, $$props, $$invalidate) {
     /*inputEl*/
     1048576 | $$self.$$.dirty[1] &
     /*isFocused*/
-    1) {
+    2) {
       if (isFocused && inputEl) {
         setTimeout(() => inputEl.focus(), 1);
       }
@@ -11085,19 +11104,19 @@ function instance$c($$self, $$props, $$invalidate) {
     }
   };
 
-  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,
@@ -11119,6 +11138,7 @@ class Input extends SvelteElement {
       step: 13,
       prefix: 14,
       suffix: 15,
+      debounce: 31,
       mt: 16,
       mr: 17,
       mb: 18,
@@ -11138,7 +11158,7 @@ class Input extends SvelteElement {
   }
 
   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() {
@@ -11372,6 +11392,17 @@ class Input extends SvelteElement {
     flush();
   }
 
+  get debounce() {
+    return this.$$.ctx[31];
+  }
+
+  set debounce(debounce) {
+    this.$$set({
+      debounce
+    });
+    flush();
+  }
+
   get mt() {
     return this.$$.ctx[16];
   }
@@ -11583,7 +11614,7 @@ function create_if_block_2$2(ctx) {
 } // (56:2) {#if version}
 
 
-function create_if_block$4(ctx) {
+function create_if_block$5(ctx) {
   let div;
   let t;
   return {
@@ -11616,7 +11647,7 @@ function create_if_block$4(ctx) {
   };
 }
 
-function create_fragment$d(ctx) {
+function create_fragment$e(ctx) {
   let header;
   let t0;
   let show_if = ["alpha", "beta"].includes(
@@ -11631,7 +11662,7 @@ function create_fragment$d(ctx) {
   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");
@@ -11697,7 +11728,7 @@ function create_fragment$d(ctx) {
         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);
         }
@@ -11725,7 +11756,7 @@ function capitalize(val) {
   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
@@ -11757,7 +11788,7 @@ class MicrositeHeader extends SvelteElement {
       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
@@ -11817,7 +11848,7 @@ class MicrositeHeader extends SvelteElement {
 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;
@@ -12222,12 +12253,12 @@ function create_if_block_1$1(ctx) {
   };
 }
 
-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();
@@ -12254,7 +12285,7 @@ function create_fragment$c(ctx) {
             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);
@@ -12287,7 +12318,7 @@ function create_fragment$c(ctx) {
   };
 }
 
-function instance$a($$self, $$props, $$invalidate) {
+function instance$b($$self, $$props, $$invalidate) {
   let isClosable;
   let isOpen;
 
@@ -12377,7 +12408,7 @@ class Modal extends SvelteElement {
       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,
@@ -12473,7 +12504,7 @@ class Modal extends SvelteElement {
 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;
@@ -12597,12 +12628,12 @@ function create_if_block$2(ctx) {
   };
 }
 
-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();
@@ -12629,7 +12660,7 @@ function create_fragment$b(ctx) {
             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);
@@ -12662,7 +12693,7 @@ function create_fragment$b(ctx) {
   };
 }
 
-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 {
@@ -12700,7 +12731,7 @@ class Notification extends SvelteElement {
       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);
 
@@ -12742,7 +12773,7 @@ function isValidDimension(value) {
 /* 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;
@@ -12782,7 +12813,7 @@ function create_fragment$a(ctx) {
   };
 }
 
-function instance$8($$self, $$props, $$invalidate) {
+function instance$9($$self, $$props, $$invalidate) {
   const Sizes = {
     "full": "100%"
   };
@@ -12823,7 +12854,7 @@ class PageBlock extends SvelteElement {
       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);
@@ -13061,7 +13092,7 @@ function create_each_block$1(key_1, ctx) {
   };
 }
 
-function create_fragment$9(ctx) {
+function create_fragment$a(ctx) {
   let div;
   let slot;
   let t;
@@ -13184,7 +13215,7 @@ function create_fragment$9(ctx) {
   };
 }
 
-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"]);
@@ -13328,7 +13359,7 @@ class RadioGroup extends SvelteElement {
       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,
@@ -13484,7 +13515,7 @@ class RadioGroup extends SvelteElement {
 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;
@@ -13552,7 +13583,7 @@ function create_fragment$8(ctx) {
   };
 }
 
-function instance$6($$self, $$props, $$invalidate) {
+function instance$7($$self, $$props, $$invalidate) {
   let {
     direction = "vertical"
   } = $$props;
@@ -13584,7 +13615,7 @@ class Scrollable extends SvelteElement {
       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,
@@ -13925,7 +13956,7 @@ function create_if_block_1(ctx) {
 } // (30:2) {#if type === "card"}
 
 
-function create_if_block$1(ctx) {
+function create_if_block$2(ctx) {
   let div1;
   let skeleton0;
   let t0;
@@ -14119,13 +14150,13 @@ function create_each_block(ctx) {
   };
 }
 
-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) {
@@ -14235,7 +14266,7 @@ function create_fragment$7(ctx) {
   };
 }
 
-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 {
@@ -14293,7 +14324,7 @@ class Skeleton extends SvelteElement {
       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,
@@ -14425,7 +14456,7 @@ class Skeleton extends SvelteElement {
 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() {
@@ -14454,7 +14485,7 @@ function create_fragment$6(ctx) {
   };
 }
 
-function instance$4($$self, $$props, $$invalidate) {
+function instance$5($$self, $$props, $$invalidate) {
   let {
     hspacing = "none"
   } = $$props;
@@ -14491,7 +14522,7 @@ class Spacer extends SvelteElement {
       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);
@@ -14723,7 +14754,7 @@ function tweened(value, defaults = {}) {
 /* 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;
@@ -14913,11 +14944,11 @@ function create_if_block(ctx) {
   };
 }
 
-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();
@@ -14937,7 +14968,7 @@ function create_fragment$5(ctx) {
         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);
         }
@@ -14958,7 +14989,7 @@ function create_fragment$5(ctx) {
   };
 }
 
-function instance$3($$self, $$props, $$invalidate) {
+function instance$4($$self, $$props, $$invalidate) {
   let diameter;
   let strokewidth;
   let radius;
@@ -15089,7 +15120,7 @@ class Spinner extends SvelteElement {
       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,
@@ -15161,7 +15192,7 @@ class Spinner extends SvelteElement {
 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;
@@ -15263,7 +15294,7 @@ function create_fragment$4(ctx) {
   };
 }
 
-function instance$2($$self, $$props, $$invalidate) {
+function instance$3($$self, $$props, $$invalidate) {
   let _stickyHeader;
 
   const [Variants, validateVariant] = typeValidator("Table variant", ["normal", "relaxed"], true);
@@ -15342,7 +15373,7 @@ class Table extends SvelteElement {
       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,
@@ -15450,7 +15481,7 @@ class Table extends SvelteElement {
 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;
@@ -15631,7 +15662,7 @@ function create_fragment$3(ctx) {
   };
 }
 
-function instance$1($$self, $$props, $$invalidate) {
+function instance$2($$self, $$props, $$invalidate) {
   let isError;
   let isDisabled;
   let isReadonly;
@@ -15748,7 +15779,7 @@ class TextArea extends SvelteElement {
       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,
@@ -15952,7 +15983,7 @@ class TextArea extends SvelteElement {
 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() {
@@ -15996,7 +16027,7 @@ class FullScreenNavbarLayout extends SvelteElement {
       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) {
@@ -16010,7 +16041,7 @@ class FullScreenNavbarLayout extends SvelteElement {
 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() {
@@ -16047,7 +16078,7 @@ class OneColumnLayout extends SvelteElement {
       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) {
@@ -16061,7 +16092,7 @@ class OneColumnLayout extends SvelteElement {
 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;
@@ -16131,7 +16162,7 @@ function create_fragment(ctx) {
   };
 }
 
-function instance($$self, $$props, $$invalidate) {
+function instance$1($$self, $$props, $$invalidate) {
   let {
     navcolumnwidth = ""
   } = $$props;
@@ -16155,7 +16186,7 @@ class TwoColumnLayout extends SvelteElement {
       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);
@@ -16201,6 +16232,512 @@ class TwoColumnLayout extends SvelteElement {
 }
 
 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(async () => {
+    await tick();
+    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);
 
 const GoAAppHeader = ({
   heading,
@@ -16881,6 +17418,7 @@ function __rest(s, e) {
 
 const GoAInput = ({
   id,
+  debounce,
   name,
   type,
   autoCapitalize,
@@ -16939,6 +17477,7 @@ const GoAInput = ({
   }, [ref, onChange, onTrailingIconClick]);
   return jsxs("goa-input", Object.assign({
     ref: ref,
+    debounce: debounce,
     focused: focused,
     type: type,
     name: name,
@@ -17298,6 +17837,40 @@ const GoARadioGroup = ({
   }), void 0);
 };
 
+function GoAPagination(props) {
+  const ref = useRef();
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    const current = ref.current;
+
+    const changeListener = e => {
+      const {
+        page
+      } = e.detail;
+      props.onChange(page);
+    };
+
+    current.addEventListener("_change", changeListener);
+    return () => {
+      current.removeEventListener("_change", changeListener);
+    };
+  }, [ref, props.onChange]);
+  return 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);
+}
+
 const GoASkeleton = ({
   maxWidth,
   size,
@@ -17347,7 +17920,10 @@ function GoATable(props) {
   return jsx("goa-table", Object.assign({
     width: props.width,
     stickyheader: false,
-    variant: props.variant
+    mt: props.mt,
+    mb: props.mb,
+    ml: props.ml,
+    mr: props.mr
   }, {
     children: jsx("template", {
       children: jsx("table", {
@@ -17437,4 +18013,4 @@ function GoATwoColumnLayout(props) {
   }), void 0);
 }
 
-export { GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoABlock, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADivider, GoADropdown, GoADropdownItem, GoADropdownOption, GoAEmergencyBadge, GoAFormItem, GoAGrid, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAOneColumnLayout, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpacer, GoASpinner, GoASuccessBadge, GoATable, GoATextArea, GoATwoColumnLayout };
+export { GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoABlock, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADivider, GoADropdown, GoADropdownItem, GoADropdownOption, GoAEmergencyBadge, GoAFormItem, GoAGrid, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAOneColumnLayout, GoAPageBlock, GoAPagination, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpacer, GoASpinner, GoASuccessBadge, GoATable, GoATextArea, GoATwoColumnLayout };