@abgov/web-components 1.0.0-alpha.145 → 1.0.0-alpha.146

package/web-components.es.js

@@ -933,7 +933,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;
@@ -985,7 +985,7 @@ function create_if_block$h(ctx) {
 	};
 }
 
-function create_fragment$F(ctx) {
+function create_fragment$G(ctx) {
 	let div2;
 	let div1;
 	let t;
@@ -993,7 +993,7 @@ function create_fragment$F(ctx) {
 	let div2_style_value;
 
 	function select_block_type(ctx, dirty) {
-		if (/*url*/ ctx[1]) return create_if_block$h;
+		if (/*url*/ ctx[1]) return create_if_block$i;
 		return create_else_block$4;
 	}
 
@@ -1051,7 +1051,7 @@ function create_fragment$F(ctx) {
 	};
 }
 
-function instance$z($$self, $$props, $$invalidate) {
+function instance$A($$self, $$props, $$invalidate) {
 	let { heading = "" } = $$props;
 	let { url = "" } = $$props;
 	let { testid = "" } = $$props;
@@ -1079,8 +1079,8 @@ class AppHeader extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$z,
-			create_fragment$F,
+			instance$A,
+			create_fragment$G,
 			safe_not_equal,
 			{
 				heading: 0,
@@ -1242,7 +1242,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;
 
@@ -1265,7 +1265,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;
@@ -1278,7 +1278,7 @@ function create_fragment$E(ctx) {
 
 	let current_block_type = select_block_type(ctx);
 	let if_block0 = current_block_type(ctx);
-	let if_block1 = /*content*/ ctx[2] && create_if_block$g(ctx);
+	let if_block1 = /*content*/ ctx[2] && create_if_block$h(ctx);
 
 	return {
 		c() {
@@ -1316,7 +1316,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);
 				}
@@ -1351,7 +1351,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);
@@ -1416,8 +1416,8 @@ class Badge extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$y,
-			create_fragment$E,
+			instance$z,
+			create_fragment$F,
 			safe_not_equal,
 			{
 				type: 0,
@@ -1525,7 +1525,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;
@@ -1538,7 +1538,7 @@ function create_fragment$D(ctx) {
 			attr(div, "class", "block");
 
 			attr(div, "style", div_style_value = `
-    ${calculateMargin(/*mt*/ ctx[3], /*mr*/ ctx[4], /*mb*/ ctx[5], /*ml*/ ctx[6])}
+    ${calculateMargin(/*mt*/ ctx[3], /*mr*/ ctx[4], /*mb*/ ctx[5], /*ml*/ ctx[6])};
     --gap: var(--goa-space-${/*gap*/ ctx[0]});
     --alignment: ${/*alignment*/ ctx[2]};
     --direction: ${/*direction*/ ctx[1]};
@@ -1550,7 +1550,7 @@ function create_fragment$D(ctx) {
 		},
 		p(ctx, [dirty]) {
 			if (dirty & /*mt, mr, mb, ml, gap, alignment, direction*/ 127 && div_style_value !== (div_style_value = `
-    ${calculateMargin(/*mt*/ ctx[3], /*mr*/ ctx[4], /*mb*/ ctx[5], /*ml*/ ctx[6])}
+    ${calculateMargin(/*mt*/ ctx[3], /*mr*/ ctx[4], /*mb*/ ctx[5], /*ml*/ ctx[6])};
     --gap: var(--goa-space-${/*gap*/ ctx[0]});
     --alignment: ${/*alignment*/ ctx[2]};
     --direction: ${/*direction*/ ctx[1]};
@@ -1566,7 +1566,7 @@ function create_fragment$D(ctx) {
 	};
 }
 
-function instance$x($$self, $$props, $$invalidate) {
+function instance$y($$self, $$props, $$invalidate) {
 	let { gap = "m" } = $$props;
 	let { direction = "row" } = $$props;
 	let { alignment = "start" } = $$props;
@@ -1600,8 +1600,8 @@ class Block extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$x,
-			create_fragment$D,
+			instance$y,
+			create_fragment$E,
 			safe_not_equal,
 			{
 				gap: 0,
@@ -1764,8 +1764,8 @@ function create_else_block$2(ctx) {
 	};
 }
 
-// (45:2) {#if type === "start"}
-function create_if_block$f(ctx) {
+// (46:2) {#if type === "start"}
+function create_if_block$g(ctx) {
 	let span;
 	let t;
 	let goa_icon;
@@ -1795,7 +1795,7 @@ function create_if_block$f(ctx) {
 	};
 }
 
-// (51:4) {#if leadingicon}
+// (52:4) {#if leadingicon}
 function create_if_block_2$6(ctx) {
 	let goa_icon;
 
@@ -1804,7 +1804,7 @@ function create_if_block_2$6(ctx) {
 			goa_icon = element("goa-icon");
 			set_custom_element_data(goa_icon, "id", "leading-icon");
 			set_custom_element_data(goa_icon, "type", /*leadingicon*/ ctx[3]);
-			set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[10]);
+			set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[11]);
 		},
 		m(target, anchor) {
 			insert(target, goa_icon, anchor);
@@ -1814,8 +1814,8 @@ function create_if_block_2$6(ctx) {
 				set_custom_element_data(goa_icon, "type", /*leadingicon*/ ctx[3]);
 			}
 
-			if (dirty & /*isButtonDark*/ 1024) {
-				set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[10]);
+			if (dirty & /*isButtonDark*/ 2048) {
+				set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[11]);
 			}
 		},
 		d(detaching) {
@@ -1824,7 +1824,7 @@ function create_if_block_2$6(ctx) {
 	};
 }
 
-// (57:4) {#if trailingicon}
+// (58:4) {#if trailingicon}
 function create_if_block_1$9(ctx) {
 	let goa_icon;
 
@@ -1833,7 +1833,7 @@ function create_if_block_1$9(ctx) {
 			goa_icon = element("goa-icon");
 			set_custom_element_data(goa_icon, "id", "trailing-icon");
 			set_custom_element_data(goa_icon, "type", /*trailingicon*/ ctx[4]);
-			set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[10]);
+			set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[11]);
 		},
 		m(target, anchor) {
 			insert(target, goa_icon, anchor);
@@ -1843,8 +1843,8 @@ function create_if_block_1$9(ctx) {
 				set_custom_element_data(goa_icon, "type", /*trailingicon*/ ctx[4]);
 			}
 
-			if (dirty & /*isButtonDark*/ 1024) {
-				set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[10]);
+			if (dirty & /*isButtonDark*/ 2048) {
+				set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[11]);
 			}
 		},
 		d(detaching) {
@@ -1853,7 +1853,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;
@@ -1861,7 +1861,7 @@ function create_fragment$C(ctx) {
 	let dispose;
 
 	function select_block_type(ctx, dirty) {
-		if (/*type*/ ctx[0] === "start") return create_if_block$f;
+		if (/*type*/ ctx[0] === "start") return create_if_block$g;
 		return create_else_block$2;
 	}
 
@@ -1875,7 +1875,7 @@ function create_fragment$C(ctx) {
 			this.c = noop;
 			attr(button, "class", button_class_value = "" + (/*type*/ ctx[0] + " " + /*size*/ ctx[1] + " " + /*variant*/ ctx[2]));
 			attr(button, "style", button_style_value = calculateMargin(/*mt*/ ctx[6], /*mr*/ ctx[7], /*mb*/ ctx[8], /*ml*/ ctx[9]));
-			button.disabled = /*isDisabled*/ ctx[11];
+			button.disabled = /*isDisabled*/ ctx[10];
 			attr(button, "data-testid", /*testid*/ ctx[5]);
 			toggle_class(button, "leading", /*leadingicon*/ ctx[3]);
 			toggle_class(button, "trailing", /*trailingicon*/ ctx[4] || /*type*/ ctx[0] === "start");
@@ -1886,8 +1886,8 @@ function create_fragment$C(ctx) {
 
 			if (!mounted) {
 				dispose = [
-					listen(button, "click", clickHandler),
-					listen(button, "click", clickHandler)
+					listen(button, "click", /*clickHandler*/ ctx[12]),
+					listen(button, "click", /*clickHandler*/ ctx[12])
 				];
 
 				mounted = true;
@@ -1914,8 +1914,8 @@ function create_fragment$C(ctx) {
 				attr(button, "style", button_style_value);
 			}
 
-			if (dirty & /*isDisabled*/ 2048) {
-				button.disabled = /*isDisabled*/ ctx[11];
+			if (dirty & /*isDisabled*/ 1024) {
+				button.disabled = /*isDisabled*/ ctx[10];
 			}
 
 			if (dirty & /*testid*/ 32) {
@@ -1941,12 +1941,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);
@@ -1964,6 +1959,12 @@ function instance$w($$self, $$props, $$invalidate) {
 	let { mb = null } = $$props;
 	let { ml = null } = $$props;
 
+	function clickHandler(e) {
+		if (!isDisabled) {
+			this.dispatchEvent(new CustomEvent("_click", { composed: true, bubbles: true }));
+		}
+	}
+
 	onMount(() => {
 		validateType(type);
 		validateSize(size);
@@ -1974,7 +1975,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);
@@ -1985,12 +1986,12 @@ function instance$w($$self, $$props, $$invalidate) {
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*disabled*/ 4096) {
-			$$invalidate(11, isDisabled = toBoolean(disabled));
+		if ($$self.$$.dirty & /*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");
 		}
 	};
 
@@ -2005,8 +2006,9 @@ function instance$w($$self, $$props, $$invalidate) {
 		mr,
 		mb,
 		ml,
-		isButtonDark,
 		isDisabled,
+		isButtonDark,
+		clickHandler,
 		disabled
 	];
 }
@@ -2025,14 +2027,14 @@ class Button extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$w,
-			create_fragment$C,
+			instance$x,
+			create_fragment$D,
 			safe_not_equal,
 			{
 				type: 0,
 				size: 1,
 				variant: 2,
-				disabled: 12,
+				disabled: 13,
 				leadingicon: 3,
 				trailingicon: 4,
 				testid: 5,
@@ -2100,7 +2102,7 @@ class Button extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[12];
+		return this.$$.ctx[13];
 	}
 
 	set disabled(disabled) {
@@ -2176,7 +2178,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;
@@ -2210,7 +2212,7 @@ function create_fragment$B(ctx) {
 	};
 }
 
-function instance$v($$self, $$props, $$invalidate) {
+function instance$w($$self, $$props, $$invalidate) {
 	let _alignment;
 	let { alignment = "start" } = $$props;
 	let { gap = "relaxed" } = $$props;
@@ -2262,8 +2264,8 @@ class ButtonGroup extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$v,
-			create_fragment$B,
+			instance$w,
+			create_fragment$C,
 			safe_not_equal,
 			{
 				alignment: 7,
@@ -2361,7 +2363,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;
 
@@ -2383,7 +2385,7 @@ function create_if_block$e(ctx) {
 	};
 }
 
-function create_fragment$A(ctx) {
+function create_fragment$B(ctx) {
 	let div;
 	let span0;
 	let goa_icon;
@@ -2394,7 +2396,7 @@ function create_fragment$A(ctx) {
 	let t1;
 	let slot;
 	let div_style_value;
-	let if_block = /*heading*/ ctx[5] && create_if_block$e(ctx);
+	let if_block = /*heading*/ ctx[5] && create_if_block$f(ctx);
 
 	return {
 		c() {
@@ -2442,7 +2444,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);
 				}
@@ -2468,7 +2470,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 { mt = null } = $$props;
@@ -2522,8 +2524,8 @@ class Callout extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$u,
-			create_fragment$A,
+			instance$v,
+			create_fragment$B,
 			safe_not_equal,
 			{
 				mt: 0,
@@ -2621,7 +2623,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 {
@@ -2654,7 +2656,7 @@ class CardActions extends SvelteElement {
 				customElement: true
 			},
 			null,
-			create_fragment$z,
+			create_fragment$A,
 			safe_not_equal,
 			{},
 			null
@@ -2672,7 +2674,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;
@@ -2712,7 +2714,7 @@ function create_fragment$y(ctx) {
 	};
 }
 
-function instance$t($$self, $$props, $$invalidate) {
+function instance$u($$self, $$props, $$invalidate) {
 	let { elevation = 0 } = $$props;
 	let { width = "100%" } = $$props;
 	let { height = "auto" } = $$props;
@@ -2748,8 +2750,8 @@ class Card extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$t,
-			create_fragment$y,
+			instance$u,
+			create_fragment$z,
 			safe_not_equal,
 			{
 				elevation: 0,
@@ -2857,7 +2859,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 {
@@ -2892,7 +2894,7 @@ class CardContent extends SvelteElement {
 				customElement: true
 			},
 			null,
-			create_fragment$x,
+			create_fragment$y,
 			safe_not_equal,
 			{},
 			null
@@ -2910,7 +2912,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 {
@@ -2945,7 +2947,7 @@ class CardGroup extends SvelteElement {
 				customElement: true
 			},
 			null,
-			create_fragment$w,
+			create_fragment$x,
 			safe_not_equal,
 			{},
 			null
@@ -2963,7 +2965,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 {
@@ -2995,7 +2997,7 @@ function create_fragment$v(ctx) {
 	};
 }
 
-function instance$s($$self, $$props, $$invalidate) {
+function instance$t($$self, $$props, $$invalidate) {
 	let { src } = $$props;
 	let { height = "100%" } = $$props;
 
@@ -3019,8 +3021,8 @@ class CardImage extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$s,
-			create_fragment$v,
+			instance$t,
+			create_fragment$w,
 			safe_not_equal,
 			{ src: 0, height: 1 },
 			null
@@ -3090,7 +3092,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;
 
@@ -3115,7 +3117,7 @@ function create_if_block$d(ctx) {
 	};
 }
 
-function create_fragment$u(ctx) {
+function create_fragment$v(ctx) {
 	let label;
 	let div0;
 	let input;
@@ -3131,7 +3133,7 @@ function create_fragment$u(ctx) {
 	let dispose;
 
 	function select_block_type(ctx, dirty) {
-		if (/*isIndeterminate*/ ctx[10]) return create_if_block$d;
+		if (/*isIndeterminate*/ ctx[10]) return create_if_block$e;
 		if (/*isChecked*/ ctx[9]) return create_if_block_1$8;
 	}
 
@@ -3260,7 +3262,7 @@ function create_fragment$u(ctx) {
 	};
 }
 
-function instance$r($$self, $$props, $$invalidate) {
+function instance$s($$self, $$props, $$invalidate) {
 	let isDisabled;
 	let isError;
 	let isChecked;
@@ -3372,8 +3374,8 @@ class Checkbox extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$r,
-			create_fragment$u,
+			instance$s,
+			create_fragment$v,
 			safe_not_equal,
 			{
 				name: 0,
@@ -3559,7 +3561,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;
@@ -3602,7 +3604,7 @@ function create_if_block$c(ctx) {
 	};
 }
 
-function create_fragment$t(ctx) {
+function create_fragment$u(ctx) {
 	let div1;
 	let t0;
 	let div0;
@@ -3612,7 +3614,7 @@ function create_fragment$t(ctx) {
 	let mounted;
 	let dispose;
 	let if_block0 = /*leadingicon*/ ctx[4] && create_if_block_1$7(ctx);
-	let if_block1 = /*_deletable*/ ctx[11] && create_if_block$c(ctx);
+	let if_block1 = /*_deletable*/ ctx[11] && create_if_block$d(ctx);
 
 	return {
 		c() {
@@ -3675,7 +3677,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);
 				}
@@ -3717,7 +3719,7 @@ function create_fragment$t(ctx) {
 	};
 }
 
-function instance$q($$self, $$props, $$invalidate) {
+function instance$r($$self, $$props, $$invalidate) {
 	let { mt = null } = $$props;
 	let { mr = null } = $$props;
 	let { mb = null } = $$props;
@@ -3814,8 +3816,8 @@ class Chip extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$q,
-			create_fragment$t,
+			instance$r,
+			create_fragment$u,
 			safe_not_equal,
 			{
 				mt: 0,
@@ -4041,7 +4043,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;
@@ -4323,10 +4325,10 @@ 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);
+	let if_block = /*isVisible*/ ctx[5] && create_if_block$c(ctx);
 
 	return {
 		c() {
@@ -4348,7 +4350,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);
@@ -4379,7 +4381,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"]);
@@ -4439,8 +4441,8 @@ class CircularProgress extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$p,
-			create_fragment$s,
+			instance$q,
+			create_fragment$t,
 			safe_not_equal,
 			{
 				variant: 6,
@@ -4518,7 +4520,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;
@@ -4596,7 +4598,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"]);
@@ -4641,8 +4643,8 @@ class Container extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$o,
-			create_fragment$r,
+			instance$p,
+			create_fragment$s,
 			safe_not_equal,
 			{
 				type: 0,
@@ -4750,7 +4752,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;
 
@@ -4781,7 +4783,7 @@ function create_fragment$q(ctx) {
 	};
 }
 
-function instance$n($$self, $$props, $$invalidate) {
+function instance$o($$self, $$props, $$invalidate) {
 	let { testid = "" } = $$props;
 	let { mt = null } = $$props;
 	let { mr = null } = $$props;
@@ -4811,8 +4813,8 @@ class Divider extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$n,
-			create_fragment$q,
+			instance$o,
+			create_fragment$r,
 			safe_not_equal,
 			{ testid: 0, mt: 1, mr: 2, mb: 3, ml: 4 },
 			null
@@ -5068,7 +5070,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;
@@ -5337,13 +5339,13 @@ 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;
 
 	function select_block_type(ctx, dirty) {
-		if (/*_native*/ ctx[22]) return create_if_block$a;
+		if (/*_native*/ ctx[22]) return create_if_block$b;
 		return create_else_block$1;
 	}
 
@@ -5408,7 +5410,7 @@ function create_fragment$p(ctx) {
 	};
 }
 
-function instance$m($$self, $$props, $$invalidate) {
+function instance$n($$self, $$props, $$invalidate) {
 	let _disabled;
 	let _error;
 	let _multiselect;
@@ -5776,8 +5778,8 @@ class Dropdown extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$m,
-			create_fragment$p,
+			instance$n,
+			create_fragment$q,
 			safe_not_equal,
 			{
 				name: 0,
@@ -5972,7 +5974,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;
@@ -5997,7 +5999,7 @@ class DropdownItem extends SvelteElement {
 				customElement: true
 			},
 			null,
-			create_fragment$o,
+			create_fragment$p,
 			safe_not_equal,
 			{},
 			null
@@ -6015,7 +6017,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 {
@@ -6068,7 +6070,7 @@ function isFocusable(element) {
 	}
 }
 
-function instance$l($$self, $$props, $$invalidate) {
+function instance$m($$self, $$props, $$invalidate) {
 	let isActive;
 	let { active } = $$props;
 	let ignoreFocusChanges = false;
@@ -6245,8 +6247,8 @@ class FocusTrap extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$l,
-			create_fragment$n,
+			instance$m,
+			create_fragment$o,
 			safe_not_equal,
 			{ active: 1 },
 			null
@@ -6282,7 +6284,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 {
@@ -6299,7 +6301,7 @@ function create_if_block$9(ctx) {
 	};
 }
 
-function create_fragment$m(ctx) {
+function create_fragment$n(ctx) {
 	let div5;
 	let div4;
 	let div0;
@@ -6313,7 +6315,7 @@ function create_fragment$m(ctx) {
 	let t3;
 	let a1;
 	let div5_style_value;
-	let if_block = /*navLinks*/ ctx[2]?.length && create_if_block$9();
+	let if_block = /*navLinks*/ ctx[2]?.length && create_if_block$a();
 
 	return {
 		c() {
@@ -6367,7 +6369,7 @@ function create_fragment$m(ctx) {
 		p(ctx, [dirty]) {
 			if (/*navLinks*/ ctx[2]?.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);
 				}
@@ -6398,7 +6400,7 @@ function create_fragment$m(ctx) {
 	};
 }
 
-function instance$k($$self, $$props, $$invalidate) {
+function instance$l($$self, $$props, $$invalidate) {
 	let { maxcontentwidth = "" } = $$props;
 	let rootEl;
 	let navLinks;
@@ -6439,8 +6441,8 @@ class Footer extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$k,
-			create_fragment$m,
+			instance$l,
+			create_fragment$n,
 			safe_not_equal,
 			{ maxcontentwidth: 0 },
 			null
@@ -6515,7 +6517,7 @@ function create_each_block$3(ctx) {
 	};
 }
 
-function create_fragment$l(ctx) {
+function create_fragment$m(ctx) {
 	let section;
 	let div;
 	let t;
@@ -6588,7 +6590,7 @@ function create_fragment$l(ctx) {
 	};
 }
 
-function instance$j($$self, $$props, $$invalidate) {
+function instance$k($$self, $$props, $$invalidate) {
 	let rootEl;
 	let children = [];
 
@@ -6632,8 +6634,8 @@ class FooterMetaSection extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$j,
-			create_fragment$l,
+			instance$k,
+			create_fragment$m,
 			safe_not_equal,
 			{},
 			null
@@ -6658,7 +6660,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;
@@ -6723,14 +6725,14 @@ function create_each_block$2(ctx) {
 	};
 }
 
-function create_fragment$k(ctx) {
+function create_fragment$l(ctx) {
 	let section;
 	let t0;
 	let div;
 	let t1;
 	let ul;
 	let ul_style_value;
-	let if_block = /*heading*/ ctx[0] && create_if_block$8(ctx);
+	let if_block = /*heading*/ ctx[0] && create_if_block$9(ctx);
 	let each_value = /*children*/ ctx[3];
 	let each_blocks = [];
 
@@ -6784,7 +6786,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);
 				}
@@ -6838,7 +6840,7 @@ function create_fragment$k(ctx) {
 	};
 }
 
-function instance$i($$self, $$props, $$invalidate) {
+function instance$j($$self, $$props, $$invalidate) {
 	let { heading = "" } = $$props;
 	let { maxcolumncount = 1 } = $$props;
 	let rootEl;
@@ -6893,8 +6895,8 @@ class FooterNavSection extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$i,
-			create_fragment$k,
+			instance$j,
+			create_fragment$l,
 			safe_not_equal,
 			{ heading: 0, maxcolumncount: 1 },
 			null
@@ -7048,7 +7050,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;
 
@@ -7071,7 +7073,7 @@ function create_if_block$7(ctx) {
 	};
 }
 
-function create_fragment$j(ctx) {
+function create_fragment$k(ctx) {
 	let div1;
 	let t0;
 	let div0;
@@ -7080,7 +7082,7 @@ function create_fragment$j(ctx) {
 	let div1_style_value;
 	let if_block0 = /*label*/ ctx[5] && create_if_block_2$4(ctx);
 	let if_block1 = /*error*/ ctx[7] && create_if_block_1$4(ctx);
-	let if_block2 = /*helptext*/ ctx[6] && create_if_block$7(ctx);
+	let if_block2 = /*helptext*/ ctx[6] && create_if_block$8(ctx);
 
 	return {
 		c() {
@@ -7140,7 +7142,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);
 				}
@@ -7168,7 +7170,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 = "" } = $$props;
 	let { mt = null } = $$props;
@@ -7211,8 +7213,8 @@ class FormItem extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$h,
-			create_fragment$j,
+			instance$i,
+			create_fragment$k,
 			safe_not_equal,
 			{
 				testid: 0,
@@ -7340,7 +7342,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;
@@ -7379,7 +7381,7 @@ function create_fragment$i(ctx) {
 	};
 }
 
-function instance$g($$self, $$props, $$invalidate) {
+function instance$h($$self, $$props, $$invalidate) {
 	let { gap = "m" } = $$props;
 	let { minchildwidth = "" } = $$props;
 	let { mt = null } = $$props;
@@ -7415,8 +7417,8 @@ class Grid extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$g,
-			create_fragment$i,
+			instance$h,
+			create_fragment$j,
 			safe_not_equal,
 			{
 				gap: 0,
@@ -7504,7 +7506,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;
@@ -7567,7 +7569,7 @@ function create_fragment$h(ctx) {
 	};
 }
 
-function instance$f($$self, $$props, $$invalidate) {
+function instance$g($$self, $$props, $$invalidate) {
 	let { heading } = $$props;
 	let { backgroundurl } = $$props;
 	let { minheight = "600px" } = $$props;
@@ -7593,8 +7595,8 @@ class HeroBanner extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$f,
-			create_fragment$h,
+			instance$g,
+			create_fragment$i,
 			safe_not_equal,
 			{
 				heading: 0,
@@ -7652,7 +7654,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;
@@ -7739,7 +7741,7 @@ function handleClick(e) {
 	e.target.dispatchEvent(new CustomEvent("_click", { composed: true, detail: { event: e } }));
 }
 
-function instance$e($$self, $$props, $$invalidate) {
+function instance$f($$self, $$props, $$invalidate) {
 	let css;
 	let isDisabled;
 	let isInverted;
@@ -7832,8 +7834,8 @@ class IconButton extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$e,
-			create_fragment$g,
+			instance$f,
+			create_fragment$h,
 			safe_not_equal,
 			{
 				icon: 0,
@@ -7994,7 +7996,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;
 
@@ -8022,10 +8024,10 @@ 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);
+	let if_block = /*type*/ ctx[4] && create_if_block$7(ctx);
 
 	return {
 		c() {
@@ -8055,7 +8057,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);
 				}
@@ -8095,7 +8097,7 @@ function create_fragment$f(ctx) {
 	};
 }
 
-function instance$d($$self, $$props, $$invalidate) {
+function instance$e($$self, $$props, $$invalidate) {
 	let isInverted;
 	let _size;
 	let { mt = null } = $$props;
@@ -8173,8 +8175,8 @@ class Icon extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$d,
-			create_fragment$f,
+			instance$e,
+			create_fragment$g,
 			safe_not_equal,
 			{
 				mt: 0,
@@ -8369,7 +8371,7 @@ function create_if_block_4$1(ctx) {
 	};
 }
 
-// (100:4) {#if leadingicon}
+// (109:4) {#if leadingicon}
 function create_if_block_3$2(ctx) {
 	let goa_icon;
 
@@ -8394,7 +8396,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) {
 	let goa_icon;
 
@@ -8420,7 +8422,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) {
 	let goa_icon_button;
 	let mounted;
@@ -8460,8 +8462,8 @@ function create_if_block_1$3(ctx) {
 	};
 }
 
-// (152:4) {#if suffix}
-function create_if_block$5(ctx) {
+// (161:4) {#if suffix}
+function create_if_block$6(ctx) {
 	let span;
 	let t;
 
@@ -8484,7 +8486,7 @@ function create_if_block$5(ctx) {
 	};
 }
 
-function create_fragment$e(ctx) {
+function create_fragment$f(ctx) {
 	let div3;
 	let div2;
 	let t0;
@@ -8508,7 +8510,7 @@ function create_fragment$e(ctx) {
 	let if_block1 = /*leadingicon*/ ctx[5] && create_if_block_3$2(ctx);
 	let if_block2 = /*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[24] && create_if_block_2$3(ctx);
 	let if_block3 = /*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[24] && create_if_block_1$3(ctx);
-	let if_block4 = /*suffix*/ ctx[15] && create_if_block$5(ctx);
+	let if_block4 = /*suffix*/ ctx[15] && create_if_block$6(ctx);
 
 	return {
 		c() {
@@ -8575,7 +8577,7 @@ function create_fragment$e(ctx) {
 			if (if_block1) if_block1.m(div2, null);
 			append(div2, t2);
 			append(div2, input);
-			/*input_binding*/ ctx[32](input);
+			/*input_binding*/ ctx[33](input);
 			append(div2, t3);
 			if (if_block2) if_block2.m(div2, null);
 			append(div2, t4);
@@ -8707,7 +8709,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);
 				}
@@ -8742,7 +8744,7 @@ function create_fragment$e(ctx) {
 			if (detaching) detach(div3);
 			if (if_block0) if_block0.d();
 			if (if_block1) if_block1.d();
-			/*input_binding*/ ctx[32](null);
+			/*input_binding*/ ctx[33](null);
 			if (if_block2) if_block2.d();
 			if (if_block3) if_block3.d();
 			if (if_block4) if_block4.d();
@@ -8756,7 +8758,7 @@ function doClick() {
 	this.dispatchEvent(new CustomEvent("_trailingIconClick", { composed: true }));
 }
 
-function instance$c($$self, $$props, $$invalidate) {
+function instance$d($$self, $$props, $$invalidate) {
 	let handlesTrailingIconClick;
 	let isFocused;
 	let isReadonly;
@@ -8796,29 +8798,41 @@ function instance$c($$self, $$props, $$invalidate) {
 	let { testid = "" } = $$props;
 	let { width = "30ch" } = $$props;
 	let { arialabel = null } = $$props;
-	let { min = null } = $$props;
-	let { max = null } = $$props;
-	let { step = null } = $$props;
+	let { min = "" } = $$props;
+	let { max = "" } = $$props;
+	let { step = 1 } = $$props;
 	let { prefix = "" } = $$props;
 	let { suffix = "" } = $$props;
+	let { debounce = 0 } = $$props;
 	let { mt = null } = $$props;
 	let { mr = null } = $$props;
 	let { mb = null } = $$props;
 	let { ml = null } = $$props;
 	let inputEl;
+	let _debounceId = null;
 
 	function onKeyUp(e) {
-		const ee = e.target;
+		const input = e.target;
+		if (!input) return;
 
-		e.target.dispatchEvent(new CustomEvent("_change",
-		{
-				composed: true,
-				bubbles: false,
-				cancelable: true,
-				detail: { name, value: ee.value }
-			}));
+		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 = ee.value);
+		$$invalidate(0, value = input.value);
 	}
 
 	onMount(() => {
@@ -8859,6 +8873,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);
@@ -8871,7 +8886,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] & /*readonly*/ 536870912) {
@@ -8886,7 +8901,7 @@ function instance$c($$self, $$props, $$invalidate) {
 			$$invalidate(21, isDisabled = toBoolean(disabled));
 		}
 
-		if ($$self.$$.dirty[0] & /*inputEl*/ 1048576 | $$self.$$.dirty[1] & /*isFocused*/ 1) {
+		if ($$self.$$.dirty[0] & /*inputEl*/ 1048576 | $$self.$$.dirty[1] & /*isFocused*/ 2) {
 			if (isFocused && inputEl) {
 				setTimeout(() => inputEl.focus(), 1);
 			}
@@ -8933,6 +8948,7 @@ function instance$c($$self, $$props, $$invalidate) {
 		focused,
 		readonly,
 		error,
+		debounce,
 		isFocused,
 		input_binding
 	];
@@ -8942,7 +8958,7 @@ 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(
@@ -8952,8 +8968,8 @@ class Input extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$c,
-			create_fragment$e,
+			instance$d,
+			create_fragment$f,
 			safe_not_equal,
 			{
 				type: 1,
@@ -8977,6 +8993,7 @@ class Input extends SvelteElement {
 				step: 13,
 				prefix: 14,
 				suffix: 15,
+				debounce: 31,
 				mt: 16,
 				mr: 17,
 				mb: 18,
@@ -9021,6 +9038,7 @@ class Input extends SvelteElement {
 			"step",
 			"prefix",
 			"suffix",
+			"debounce",
 			"mt",
 			"mr",
 			"mb",
@@ -9217,11 +9235,20 @@ class Input extends SvelteElement {
 		flush();
 	}
 
-	get mt() {
-		return this.$$.ctx[16];
+	get debounce() {
+		return this.$$.ctx[31];
 	}
 
-	set mt(mt) {
+	set debounce(debounce) {
+		this.$$set({ debounce });
+		flush();
+	}
+
+	get mt() {
+		return this.$$.ctx[16];
+	}
+
+	set mt(mt) {
 		this.$$set({ mt });
 		flush();
 	}
@@ -9390,7 +9417,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;
 
@@ -9414,7 +9441,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(/*type*/ ctx[0]);
@@ -9423,7 +9450,7 @@ function create_fragment$d(ctx) {
 	let t2;
 	let if_block0 = /*type*/ ctx[0] === "live" && create_if_block_3$1();
 	let if_block1 = show_if && create_if_block_1$2(ctx);
-	let if_block2 = /*version*/ ctx[1] && create_if_block$4(ctx);
+	let if_block2 = /*version*/ ctx[1] && create_if_block$5(ctx);
 
 	return {
 		c() {
@@ -9480,7 +9507,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);
 				}
@@ -9505,7 +9532,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 } = $$props;
 	let { version = "" } = $$props;
@@ -9536,8 +9563,8 @@ class MicrositeHeader extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$b,
-			create_fragment$d,
+			instance$c,
+			create_fragment$e,
 			safe_not_equal,
 			{ type: 0, version: 1, feedbackurl: 2 },
 			null
@@ -9591,7 +9618,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;
@@ -9919,10 +9946,10 @@ 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);
+	let if_block = /*isOpen*/ ctx[7] && create_if_block$4(ctx);
 
 	return {
 		c() {
@@ -9944,7 +9971,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);
@@ -9975,7 +10002,7 @@ function create_fragment$c(ctx) {
 	};
 }
 
-function instance$a($$self, $$props, $$invalidate) {
+function instance$b($$self, $$props, $$invalidate) {
 	let isClosable;
 	let isOpen;
 	let _transitionTime;
@@ -10067,8 +10094,8 @@ class Modal extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$a,
-			create_fragment$c,
+			instance$b,
+			create_fragment$d,
 			safe_not_equal,
 			{
 				heading: 0,
@@ -10156,7 +10183,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;
@@ -10251,10 +10278,10 @@ 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);
+	let if_block = /*show*/ ctx[1] && create_if_block$3(ctx);
 
 	return {
 		c() {
@@ -10276,7 +10303,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);
@@ -10307,7 +10334,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 { type = "" } = $$props;
@@ -10352,8 +10379,8 @@ class Notification extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$9,
-			create_fragment$b,
+			instance$a,
+			create_fragment$c,
 			safe_not_equal,
 			{ type: 0 },
 			null
@@ -10394,7 +10421,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;
@@ -10424,7 +10451,7 @@ function create_fragment$a(ctx) {
 	};
 }
 
-function instance$8($$self, $$props, $$invalidate) {
+function instance$9($$self, $$props, $$invalidate) {
 	const Sizes = { "full": "100%" };
 	let { width } = $$props;
 	let { _width } = $$props;
@@ -10463,8 +10490,8 @@ class PageBlock extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$8,
-			create_fragment$a,
+			instance$9,
+			create_fragment$b,
 			safe_not_equal,
 			{ width: 1, _width: 0 },
 			null
@@ -10623,7 +10650,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;
@@ -10698,7 +10725,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"]);
@@ -10832,8 +10859,8 @@ class RadioGroup extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$7,
-			create_fragment$9,
+			instance$8,
+			create_fragment$a,
 			safe_not_equal,
 			{
 				name: 1,
@@ -10983,7 +11010,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;
@@ -11030,7 +11057,7 @@ function create_fragment$8(ctx) {
 	};
 }
 
-function instance$6($$self, $$props, $$invalidate) {
+function instance$7($$self, $$props, $$invalidate) {
 	let { direction = "vertical" } = $$props;
 	let { hpadding = 0 } = $$props;
 	let { vpadding = 0 } = $$props;
@@ -11058,8 +11085,8 @@ class Scrollable extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$6,
-			create_fragment$8,
+			instance$7,
+			create_fragment$9,
 			safe_not_equal,
 			{
 				direction: 0,
@@ -11334,7 +11361,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;
@@ -11468,13 +11495,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) {
@@ -11551,7 +11578,7 @@ function create_fragment$7(ctx) {
 	};
 }
 
-function instance$5($$self, $$props, $$invalidate) {
+function instance$6($$self, $$props, $$invalidate) {
 	const [Types, validateType] = typeValidator(
 		"Skeleton type",
 		[
@@ -11613,8 +11640,8 @@ class Skeleton extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$5,
-			create_fragment$7,
+			instance$6,
+			create_fragment$8,
 			safe_not_equal,
 			{
 				maxwidth: 0,
@@ -11732,7 +11759,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 {
@@ -11754,7 +11781,7 @@ function create_fragment$6(ctx) {
 	};
 }
 
-function instance$4($$self, $$props, $$invalidate) {
+function instance$5($$self, $$props, $$invalidate) {
 	let { hspacing = "none" } = $$props;
 	let { vspacing = "none" } = $$props;
 	let rootEl;
@@ -11792,8 +11819,8 @@ class Spacer extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$4,
-			create_fragment$6,
+			instance$5,
+			create_fragment$7,
 			safe_not_equal,
 			{ hspacing: 1, vspacing: 2 },
 			null
@@ -11985,7 +12012,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;
@@ -12094,9 +12121,9 @@ 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);
+	let if_block = /*ready*/ ctx[6] && create_if_block$1(ctx);
 
 	return {
 		c() {
@@ -12113,7 +12140,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);
 				}
@@ -12131,7 +12158,7 @@ function create_fragment$5(ctx) {
 	};
 }
 
-function instance$3($$self, $$props, $$invalidate) {
+function instance$4($$self, $$props, $$invalidate) {
 	let diameter;
 	let strokewidth;
 	let radius;
@@ -12250,8 +12277,8 @@ class Spinner extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$3,
-			create_fragment$5,
+			instance$4,
+			create_fragment$6,
 			safe_not_equal,
 			{
 				size: 10,
@@ -12319,7 +12346,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;
@@ -12379,7 +12406,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);
 	let { width = "" } = $$props;
@@ -12456,8 +12483,8 @@ class Table extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$2,
-			create_fragment$4,
+			instance$3,
+			create_fragment$5,
 			safe_not_equal,
 			{
 				width: 0,
@@ -12555,7 +12582,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;
@@ -12651,7 +12678,7 @@ function create_fragment$3(ctx) {
 	};
 }
 
-function instance$1($$self, $$props, $$invalidate) {
+function instance$2($$self, $$props, $$invalidate) {
 	let isError;
 	let isDisabled;
 	let isReadonly;
@@ -12757,8 +12784,8 @@ class TextArea extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$1,
-			create_fragment$3,
+			instance$2,
+			create_fragment$4,
 			safe_not_equal,
 			{
 				name: 0,
@@ -12952,7 +12979,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 {
@@ -13001,7 +13028,7 @@ class FullScreenNavbarLayout extends SvelteElement {
 				customElement: true
 			},
 			null,
-			create_fragment$2,
+			create_fragment$3,
 			safe_not_equal,
 			{},
 			null
@@ -13019,7 +13046,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 {
@@ -13060,7 +13087,7 @@ class OneColumnLayout extends SvelteElement {
 				customElement: true
 			},
 			null,
-			create_fragment$1,
+			create_fragment$2,
 			safe_not_equal,
 			{},
 			null
@@ -13078,7 +13105,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;
@@ -13137,7 +13164,7 @@ function create_fragment(ctx) {
 	};
 }
 
-function instance($$self, $$props, $$invalidate) {
+function instance$1($$self, $$props, $$invalidate) {
 	let { navcolumnwidth = "" } = $$props;
 	let { maxcontentwidth = "" } = $$props;
 
@@ -13161,8 +13188,8 @@ class TwoColumnLayout extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance,
-			create_fragment,
+			instance$1,
+			create_fragment$1,
 			safe_not_equal,
 			{ navcolumnwidth: 0, maxcontentwidth: 1 },
 			null
@@ -13204,3 +13231,429 @@ 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);
+
+export { Pagination };