@abgov/web-components 1.17.0 → 1.18.0

package/web-components.es.js

@@ -343,6 +343,14 @@ function get_current_component() {
 function onMount(fn) {
     get_current_component().$$.on_mount.push(fn);
 }
+/**
+ * Schedules a callback to run immediately after the component has been updated.
+ *
+ * The first time the callback runs will be after the initial `onMount`
+ */
+function afterUpdate(fn) {
+    get_current_component().$$.after_update.push(fn);
+}
 /**
  * Schedules a callback to run immediately before the component is unmounted.
  *
@@ -1077,7 +1085,20 @@ function typeValidator(message, values, required = false) {
   return [values, validator];
 }
 function getTimestamp(val) {
-  const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+  const months = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ];
   const now = val || new Date();
   const hour24 = now.getHours();
   const min0 = now.getMinutes();
@@ -1093,6 +1114,11 @@ function getTimestamp(val) {
 function cssVar(name, value) {
   return value ? `${name}: ${value};` : "";
 }
+function pluralize(word, count) {
+  if (count === 1)
+    return word;
+  return `${word}s`;
+}
 
 /* src/components/accordion/Accordion.svelte generated by Svelte v3.59.2 */
 
@@ -1691,7 +1717,7 @@ function create_if_block_4$4(ctx) {
 }
 
 // (116:4) {#if _showToggleMenu && _tablet}
-function create_if_block_2$e(ctx) {
+function create_if_block_2$f(ctx) {
 	let goa_popover;
 	let div;
 	let button;
@@ -1701,7 +1727,7 @@ function create_if_block_2$e(ctx) {
 	let t1;
 	let mounted;
 	let dispose;
-	let if_block = /*_showMenu*/ ctx[8] && create_if_block_3$b(ctx);
+	let if_block = /*_showMenu*/ ctx[8] && create_if_block_3$c(ctx);
 
 	return {
 		c() {
@@ -1754,7 +1780,7 @@ function create_if_block_2$e(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block_3$b(ctx);
+					if_block = create_if_block_3$c(ctx);
 					if_block.c();
 					if_block.m(goa_popover, null);
 				}
@@ -1777,7 +1803,7 @@ function create_if_block_2$e(ctx) {
 }
 
 // (135:8) {#if _showMenu}
-function create_if_block_3$b(ctx) {
+function create_if_block_3$c(ctx) {
 	let div;
 
 	return {
@@ -1799,7 +1825,7 @@ function create_if_block_3$b(ctx) {
 }
 
 // (148:4) {#if !_showMenu && (_mobile || _tablet)}
-function create_if_block_1$i(ctx) {
+function create_if_block_1$j(ctx) {
 	let div;
 
 	return {
@@ -1821,7 +1847,7 @@ function create_if_block_1$i(ctx) {
 }
 
 // (155:4) {#if _showMenu && _mobile || _desktop}
-function create_if_block$v(ctx) {
+function create_if_block$w(ctx) {
 	let div;
 
 	return {
@@ -1863,9 +1889,9 @@ function create_fragment$_(ctx) {
 	let current_block_type = select_block_type(ctx);
 	let if_block0 = current_block_type(ctx);
 	let if_block1 = /*_showToggleMenu*/ ctx[7] && /*_mobile*/ ctx[10] && create_if_block_4$4(ctx);
-	let if_block2 = /*_showToggleMenu*/ ctx[7] && /*_tablet*/ ctx[9] && create_if_block_2$e(ctx);
-	let if_block3 = !/*_showMenu*/ ctx[8] && (/*_mobile*/ ctx[10] || /*_tablet*/ ctx[9]) && create_if_block_1$i(ctx);
-	let if_block4 = (/*_showMenu*/ ctx[8] && /*_mobile*/ ctx[10] || /*_desktop*/ ctx[5]) && create_if_block$v(ctx);
+	let if_block2 = /*_showToggleMenu*/ ctx[7] && /*_tablet*/ ctx[9] && create_if_block_2$f(ctx);
+	let if_block3 = !/*_showMenu*/ ctx[8] && (/*_mobile*/ ctx[10] || /*_tablet*/ ctx[9]) && create_if_block_1$j(ctx);
+	let if_block4 = (/*_showMenu*/ ctx[8] && /*_mobile*/ ctx[10] || /*_desktop*/ ctx[5]) && create_if_block$w(ctx);
 
 	return {
 		c() {
@@ -1935,7 +1961,7 @@ function create_fragment$_(ctx) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
-					if_block2 = create_if_block_2$e(ctx);
+					if_block2 = create_if_block_2$f(ctx);
 					if_block2.c();
 					if_block2.m(div0, t2);
 				}
@@ -1948,7 +1974,7 @@ function create_fragment$_(ctx) {
 				if (if_block3) {
 					if_block3.p(ctx, dirty);
 				} else {
-					if_block3 = create_if_block_1$i(ctx);
+					if_block3 = create_if_block_1$j(ctx);
 					if_block3.c();
 					if_block3.m(div0, t3);
 				}
@@ -1961,7 +1987,7 @@ function create_fragment$_(ctx) {
 				if (if_block4) {
 					if_block4.p(ctx, dirty);
 				} else {
-					if_block4 = create_if_block$v(ctx);
+					if_block4 = create_if_block$w(ctx);
 					if_block4.c();
 					if_block4.m(div0, null);
 				}
@@ -2258,7 +2284,7 @@ function create_else_block$c(ctx) {
 }
 
 // (51:2) {#if showIcon}
-function create_if_block_1$h(ctx) {
+function create_if_block_1$i(ctx) {
 	let goa_icon;
 	let goa_icon_arialabel_value;
 	let goa_icon_role_value;
@@ -2305,7 +2331,7 @@ function create_if_block_1$h(ctx) {
 }
 
 // (61:2) {#if content}
-function create_if_block$u(ctx) {
+function create_if_block$v(ctx) {
 	let div;
 	let t;
 
@@ -2335,13 +2361,13 @@ function create_fragment$Z(ctx) {
 	let div_class_value;
 
 	function select_block_type(ctx, dirty) {
-		if (/*showIcon*/ ctx[8]) return create_if_block_1$h;
+		if (/*showIcon*/ ctx[8]) return create_if_block_1$i;
 		return create_else_block$c;
 	}
 
 	let current_block_type = select_block_type(ctx);
 	let if_block0 = current_block_type(ctx);
-	let if_block1 = /*content*/ ctx[2] && create_if_block$u(ctx);
+	let if_block1 = /*content*/ ctx[2] && create_if_block$v(ctx);
 
 	return {
 		c() {
@@ -2379,7 +2405,7 @@ function create_fragment$Z(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block$u(ctx);
+					if_block1 = create_if_block$v(ctx);
 					if_block1.c();
 					if_block1.m(div, null);
 				}
@@ -2806,8 +2832,8 @@ function create_else_block$b(ctx) {
 	let span;
 	let t1;
 	let if_block1_anchor;
-	let if_block0 = /*leadingicon*/ ctx[3] && create_if_block_2$d(ctx);
-	let if_block1 = /*trailingicon*/ ctx[4] && create_if_block_1$g(ctx);
+	let if_block0 = /*leadingicon*/ ctx[3] && create_if_block_2$e(ctx);
+	let if_block1 = /*trailingicon*/ ctx[4] && create_if_block_1$h(ctx);
 
 	return {
 		c() {
@@ -2833,7 +2859,7 @@ function create_else_block$b(ctx) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_2$d(ctx);
+					if_block0 = create_if_block_2$e(ctx);
 					if_block0.c();
 					if_block0.m(t0.parentNode, t0);
 				}
@@ -2846,7 +2872,7 @@ function create_else_block$b(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block_1$g(ctx);
+					if_block1 = create_if_block_1$h(ctx);
 					if_block1.c();
 					if_block1.m(if_block1_anchor.parentNode, if_block1_anchor);
 				}
@@ -2867,7 +2893,7 @@ function create_else_block$b(ctx) {
 }
 
 // (47:2) {#if type === "start"}
-function create_if_block$t(ctx) {
+function create_if_block$u(ctx) {
 	let span;
 	let t;
 	let goa_icon;
@@ -2898,7 +2924,7 @@ function create_if_block$t(ctx) {
 }
 
 // (53:4) {#if leadingicon}
-function create_if_block_2$d(ctx) {
+function create_if_block_2$e(ctx) {
 	let goa_icon;
 
 	return {
@@ -2927,7 +2953,7 @@ function create_if_block_2$d(ctx) {
 }
 
 // (59:4) {#if trailingicon}
-function create_if_block_1$g(ctx) {
+function create_if_block_1$h(ctx) {
 	let goa_icon;
 
 	return {
@@ -2964,7 +2990,7 @@ function create_fragment$X(ctx) {
 	let dispose;
 
 	function select_block_type(ctx, dirty) {
-		if (/*type*/ ctx[0] === "start") return create_if_block$t;
+		if (/*type*/ ctx[0] === "start") return create_if_block$u;
 		return create_else_block$b;
 	}
 
@@ -3476,7 +3502,7 @@ customElements.define("goa-button-group", ButtonGroup);
 
 /* src/components/callout/Callout.svelte generated by Svelte v3.59.2 */
 
-function create_if_block$s(ctx) {
+function create_if_block$t(ctx) {
 	let h3;
 	let t;
 
@@ -3517,7 +3543,7 @@ function create_fragment$V(ctx) {
 	let mounted;
 	let dispose;
 	add_render_callback(/*onwindowresize*/ ctx[12]);
-	let if_block = /*heading*/ ctx[5] && create_if_block$s(ctx);
+	let if_block = /*heading*/ ctx[5] && create_if_block$t(ctx);
 
 	return {
 		c() {
@@ -3576,7 +3602,7 @@ function create_fragment$V(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$s(ctx);
+					if_block = create_if_block$t(ctx);
 					if_block.c();
 					if_block.m(span1, t1);
 				}
@@ -4258,7 +4284,7 @@ customElements.define("goa-card-image", CardImage);
 
 /* src/components/checkbox/Checkbox.svelte generated by Svelte v3.59.2 */
 
-function create_if_block_2$c(ctx) {
+function create_if_block_2$d(ctx) {
 	let svg;
 	let path;
 
@@ -4283,7 +4309,7 @@ function create_if_block_2$c(ctx) {
 }
 
 // (76:4) {#if isIndeterminate}
-function create_if_block_1$f(ctx) {
+function create_if_block_1$g(ctx) {
 	let svg;
 	let rect;
 
@@ -4309,7 +4335,7 @@ function create_if_block_1$f(ctx) {
 }
 
 // (104:0) {#if description}
-function create_if_block$r(ctx) {
+function create_if_block$s(ctx) {
 	let div;
 	let t;
 
@@ -4358,13 +4384,13 @@ function create_fragment$P(ctx) {
 	let dispose;
 
 	function select_block_type(ctx, dirty) {
-		if (/*isIndeterminate*/ ctx[13]) return create_if_block_1$f;
-		if (/*isChecked*/ ctx[12]) return create_if_block_2$c;
+		if (/*isIndeterminate*/ ctx[13]) return create_if_block_1$g;
+		if (/*isChecked*/ ctx[12]) return create_if_block_2$d;
 	}
 
 	let current_block_type = select_block_type(ctx);
 	let if_block0 = current_block_type && current_block_type(ctx);
-	let if_block1 = /*description*/ ctx[5] && create_if_block$r(ctx);
+	let if_block1 = /*description*/ ctx[5] && create_if_block$s(ctx);
 
 	return {
 		c() {
@@ -4495,7 +4521,7 @@ function create_fragment$P(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block$r(ctx);
+					if_block1 = create_if_block$s(ctx);
 					if_block1.c();
 					if_block1.m(div3, null);
 				}
@@ -4833,7 +4859,7 @@ customElements.define("goa-checkbox", Checkbox);
 
 /* src/components/chip/Chip.svelte generated by Svelte v3.59.2 */
 
-function create_if_block_1$e(ctx) {
+function create_if_block_1$f(ctx) {
 	let goa_icon;
 
 	return {
@@ -4858,7 +4884,7 @@ function create_if_block_1$e(ctx) {
 }
 
 // (54:2) {#if _deletable}
-function create_if_block$q(ctx) {
+function create_if_block$r(ctx) {
 	let goa_icon;
 	let goa_icon_fillcolor_value;
 	let goa_icon_opacity_value;
@@ -4910,8 +4936,8 @@ function create_fragment$O(ctx) {
 	let div1_style_value;
 	let mounted;
 	let dispose;
-	let if_block0 = /*leadingicon*/ ctx[4] && create_if_block_1$e(ctx);
-	let if_block1 = /*_deletable*/ ctx[11] && create_if_block$q(ctx);
+	let if_block0 = /*leadingicon*/ ctx[4] && create_if_block_1$f(ctx);
+	let if_block1 = /*_deletable*/ ctx[11] && create_if_block$r(ctx);
 
 	return {
 		c() {
@@ -4959,7 +4985,7 @@ function create_fragment$O(ctx) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_1$e(ctx);
+					if_block0 = create_if_block_1$f(ctx);
 					if_block0.c();
 					if_block0.m(div1, t0);
 				}
@@ -4974,7 +5000,7 @@ function create_fragment$O(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block$q(ctx);
+					if_block1 = create_if_block$r(ctx);
 					if_block1.c();
 					if_block1.m(div1, null);
 				}
@@ -5342,12 +5368,12 @@ function noscroll(_node, opts) {
 
 /* src/components/circular-progress/CircularProgress.svelte generated by Svelte v3.59.2 */
 
-function create_if_block$p(ctx) {
+function create_if_block$q(ctx) {
 	let current_block_type_index;
 	let if_block;
 	let if_block_anchor;
 	let current;
-	const if_block_creators = [create_if_block_1$d, create_if_block_3$a];
+	const if_block_creators = [create_if_block_1$e, create_if_block_3$b];
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
@@ -5429,7 +5455,7 @@ function create_if_block$p(ctx) {
 }
 
 // (43:19) 
-function create_if_block_3$a(ctx) {
+function create_if_block_3$b(ctx) {
 	let div;
 	let goa_spinner;
 	let t;
@@ -5493,7 +5519,7 @@ function create_if_block_3$a(ctx) {
 }
 
 // (32:2) {#if fullscreen}
-function create_if_block_1$d(ctx) {
+function create_if_block_1$e(ctx) {
 	let div;
 	let goa_spinner;
 	let t;
@@ -5501,7 +5527,7 @@ function create_if_block_1$d(ctx) {
 	let current;
 	let mounted;
 	let dispose;
-	let if_block = /*message*/ ctx[0] && create_if_block_2$b(ctx);
+	let if_block = /*message*/ ctx[0] && create_if_block_2$c(ctx);
 
 	return {
 		c() {
@@ -5538,7 +5564,7 @@ function create_if_block_1$d(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block_2$b(ctx);
+					if_block = create_if_block_2$c(ctx);
 					if_block.c();
 					if_block.m(div, null);
 				}
@@ -5602,7 +5628,7 @@ function create_if_block_4$3(ctx) {
 }
 
 // (39:6) {#if message}
-function create_if_block_2$b(ctx) {
+function create_if_block_2$c(ctx) {
 	let div;
 	let t;
 
@@ -5628,7 +5654,7 @@ function create_if_block_2$b(ctx) {
 function create_fragment$N(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*isVisible*/ ctx[5] && create_if_block$p(ctx);
+	let if_block = /*isVisible*/ ctx[5] && create_if_block$q(ctx);
 
 	return {
 		c() {
@@ -5650,7 +5676,7 @@ function create_fragment$N(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$p(ctx);
+					if_block = create_if_block$q(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -6488,10 +6514,10 @@ function create_else_block$a(ctx) {
 	let ul_style_value;
 	let mounted;
 	let dispose;
-	let if_block0 = /*leadingicon*/ ctx[4] && create_if_block_2$a(ctx);
+	let if_block0 = /*leadingicon*/ ctx[4] && create_if_block_2$b(ctx);
 
 	function select_block_type_1(ctx, dirty) {
-		if (/*_inputEl*/ ctx[23]?.value && /*_filterable*/ ctx[24]) return create_if_block_1$c;
+		if (/*_inputEl*/ ctx[23]?.value && /*_filterable*/ ctx[24]) return create_if_block_1$d;
 		return create_else_block_2;
 	}
 
@@ -6632,7 +6658,7 @@ function create_else_block$a(ctx) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_2$a(ctx);
+					if_block0 = create_if_block_2$b(ctx);
 					if_block0.c();
 					if_block0.m(div, t1);
 				}
@@ -6797,7 +6823,7 @@ function create_else_block$a(ctx) {
 }
 
 // (424:2) {#if _native}
-function create_if_block$o(ctx) {
+function create_if_block$p(ctx) {
 	let select;
 	let slot;
 	let select_aria_label_value;
@@ -6902,7 +6928,7 @@ function create_if_block$o(ctx) {
 }
 
 // (467:8) {#if leadingicon}
-function create_if_block_2$a(ctx) {
+function create_if_block_2$b(ctx) {
 	let goa_icon;
 
 	return {
@@ -6992,7 +7018,7 @@ function create_else_block_2(ctx) {
 }
 
 // (502:8) {#if _inputEl?.value && _filterable}
-function create_if_block_1$c(ctx) {
+function create_if_block_1$d(ctx) {
 	let goa_icon;
 	let goa_icon_tabindex_value;
 	let goa_icon_arialabel_value;
@@ -7215,7 +7241,7 @@ function create_fragment$J(ctx) {
 	let div_style_value;
 
 	function select_block_type(ctx, dirty) {
-		if (/*_native*/ ctx[16]) return create_if_block$o;
+		if (/*_native*/ ctx[16]) return create_if_block$p;
 		return create_else_block$a;
 	}
 
@@ -8432,7 +8458,7 @@ customElements.define("goa-focus-trap", FocusTrap);
 
 /* src/components/footer/Footer.svelte generated by Svelte v3.59.2 */
 
-function create_if_block$n(ctx) {
+function create_if_block$o(ctx) {
 	let goa_divider;
 
 	return {
@@ -8463,7 +8489,7 @@ function create_fragment$G(ctx) {
 	let t3;
 	let a1;
 	let div5_style_value;
-	let if_block = /*navLinks*/ ctx[2] && /*navLinks*/ ctx[2].length > 0 && create_if_block$n();
+	let if_block = /*navLinks*/ ctx[2] && /*navLinks*/ ctx[2].length > 0 && create_if_block$o();
 
 	return {
 		c() {
@@ -8517,7 +8543,7 @@ function create_fragment$G(ctx) {
 		p(ctx, [dirty]) {
 			if (/*navLinks*/ ctx[2] && /*navLinks*/ ctx[2].length > 0) {
 				if (if_block) ; else {
-					if_block = create_if_block$n();
+					if_block = create_if_block$o();
 					if_block.c();
 					if_block.m(div4, t1);
 				}
@@ -8814,7 +8840,7 @@ function get_each_context$6(ctx, list, i) {
 }
 
 // (31:2) {#if heading}
-function create_if_block$m(ctx) {
+function create_if_block$n(ctx) {
 	let div;
 	let t0;
 	let t1;
@@ -8886,7 +8912,7 @@ function create_fragment$E(ctx) {
 	let t1;
 	let ul;
 	let ul_style_value;
-	let if_block = /*heading*/ ctx[0] && create_if_block$m(ctx);
+	let if_block = /*heading*/ ctx[0] && create_if_block$n(ctx);
 	let each_value = /*children*/ ctx[3];
 	let each_blocks = [];
 
@@ -8942,7 +8968,7 @@ function create_fragment$E(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$m(ctx);
+					if_block = create_if_block$n(ctx);
 					if_block.c();
 					if_block.m(section, t0);
 				}
@@ -9099,13 +9125,13 @@ customElements.define("goa-app-footer-nav-section", FooterNavSection);
 
 /* src/components/form-item/FormItem.svelte generated by Svelte v3.59.2 */
 
-function create_if_block_2$9(ctx) {
+function create_if_block_2$a(ctx) {
 	let div;
 	let t0;
 	let t1;
 	let show_if = /*requirement*/ ctx[9] && /*REQUIREMENT_TYPES*/ ctx[11].includes(/*requirement*/ ctx[9]);
 	let div_class_value;
-	let if_block = show_if && create_if_block_3$9(ctx);
+	let if_block = show_if && create_if_block_3$a(ctx);
 
 	return {
 		c() {
@@ -9130,7 +9156,7 @@ function create_if_block_2$9(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block_3$9(ctx);
+					if_block = create_if_block_3$a(ctx);
 					if_block.c();
 					if_block.m(div, null);
 				}
@@ -9155,7 +9181,7 @@ function create_if_block_2$9(ctx) {
 }
 
 // (36:6) {#if requirement && REQUIREMENT_TYPES.includes(requirement)}
-function create_if_block_3$9(ctx) {
+function create_if_block_3$a(ctx) {
 	let em;
 	let t0;
 	let t1;
@@ -9184,7 +9210,7 @@ function create_if_block_3$9(ctx) {
 }
 
 // (44:2) {#if error}
-function create_if_block_1$b(ctx) {
+function create_if_block_1$c(ctx) {
 	let div;
 	let goa_icon;
 	let t0;
@@ -9199,7 +9225,7 @@ function create_if_block_1$b(ctx) {
 			set_custom_element_data(goa_icon, "type", "warning");
 			set_custom_element_data(goa_icon, "size", "small");
 			set_custom_element_data(goa_icon, "theme", "filled");
-			set_style(goa_icon, "pointer-events", "none");
+			set_custom_element_data(goa_icon, "mt", "2xs");
 			attr(div, "class", "error-msg");
 		},
 		m(target, anchor) {
@@ -9218,7 +9244,7 @@ function create_if_block_1$b(ctx) {
 }
 
 // (50:2) {#if helptext}
-function create_if_block$l(ctx) {
+function create_if_block$m(ctx) {
 	let div;
 	let t;
 
@@ -9248,9 +9274,9 @@ function create_fragment$D(ctx) {
 	let t1;
 	let t2;
 	let div1_style_value;
-	let if_block0 = /*label*/ ctx[5] && create_if_block_2$9(ctx);
-	let if_block1 = /*error*/ ctx[8] && create_if_block_1$b(ctx);
-	let if_block2 = /*helptext*/ ctx[7] && create_if_block$l(ctx);
+	let if_block0 = /*label*/ ctx[5] && create_if_block_2$a(ctx);
+	let if_block1 = /*error*/ ctx[8] && create_if_block_1$c(ctx);
+	let if_block2 = /*helptext*/ ctx[7] && create_if_block$m(ctx);
 
 	return {
 		c() {
@@ -9283,7 +9309,7 @@ function create_fragment$D(ctx) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_2$9(ctx);
+					if_block0 = create_if_block_2$a(ctx);
 					if_block0.c();
 					if_block0.m(div1, t0);
 				}
@@ -9296,7 +9322,7 @@ function create_fragment$D(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block_1$b(ctx);
+					if_block1 = create_if_block_1$c(ctx);
 					if_block1.c();
 					if_block1.m(div1, t2);
 				}
@@ -9309,7 +9335,7 @@ function create_fragment$D(ctx) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
-					if_block2 = create_if_block$l(ctx);
+					if_block2 = create_if_block$m(ctx);
 					if_block2.c();
 					if_block2.m(div1, null);
 				}
@@ -9389,7 +9415,7 @@ class FormItem extends SvelteElement {
 	constructor(options) {
 		super();
 		const style = document.createElement('style');
-		style.textContent = `:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}*{box-sizing:border-box}.label{display:block;font-weight:var(--goa-font-weight-bold);color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding-bottom:0.5rem}.label.large{font:var(--goa-typography-heading-l)}.label em{color:var(--goa-color-greyscale-700);font-weight:var(--goa-font-weight-regular);font-size:var(--goa-font-size-2);line-height:var(--goa-line-height-1);font-style:normal}.form-item-input{margin-bottom:0.25rem}.help-msg{font-size:var(--goa-font-size-2);color:var(--goa-color-text-default);margin-right:56px}.error-msg{display:inline-flex;gap:0.25rem;font-size:var(--goa-font-size-2);color:var(--goa-color-interactive-error);margin-bottom:0.25rem}`;
+		style.textContent = `:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}*{box-sizing:border-box}.label{display:block;font-weight:var(--goa-font-weight-bold);color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding-bottom:0.5rem}.label.large{font:var(--goa-typography-heading-l)}.label em{color:var(--goa-color-greyscale-700);font-weight:var(--goa-font-weight-regular);font-size:var(--goa-font-size-2);line-height:var(--goa-line-height-1);font-style:normal}.form-item-input{margin-bottom:0.25rem}.help-msg{font-size:var(--goa-font-size-2);color:var(--goa-color-text-default);margin-right:56px}.error-msg{display:inline-flex;align-items:flex-start;gap:0.25rem;font-size:var(--goa-font-size-2);color:var(--goa-color-interactive-error);margin-bottom:0.25rem}`;
 		this.shadowRoot.appendChild(style);
 
 		init(
@@ -10285,14 +10311,14 @@ customElements.define("goa-icon-button", IconButton);
 
 /* src/components/icon/Icon.svelte generated by Svelte v3.59.2 */
 
-function create_if_block$k(ctx) {
+function create_if_block$l(ctx) {
 	let show_if;
 	let if_block_anchor;
 
 	function select_block_type(ctx, dirty) {
 		if (dirty & /*type*/ 16) show_if = null;
 		if (show_if == null) show_if = !!Object.keys(/*_iconOverrides*/ ctx[16]).includes(/*type*/ ctx[4]);
-		if (show_if) return create_if_block_1$a;
+		if (show_if) return create_if_block_1$b;
 		return create_else_block$9;
 	}
 
@@ -10358,7 +10384,7 @@ function create_else_block$9(ctx) {
 }
 
 // (62:4) {#if Object.keys(_iconOverrides).includes(type)}
-function create_if_block_1$a(ctx) {
+function create_if_block_1$b(ctx) {
 	let div;
 	let raw_value = /*_iconOverrides*/ ctx[16][/*type*/ ctx[4]] + "";
 
@@ -10384,7 +10410,7 @@ function create_fragment$z(ctx) {
 	let div_aria_expanded_value;
 	let div_class_value;
 	let div_style_value;
-	let if_block = /*type*/ ctx[4] && create_if_block$k(ctx);
+	let if_block = /*type*/ ctx[4] && create_if_block$l(ctx);
 
 	return {
 		c() {
@@ -10420,7 +10446,7 @@ function create_fragment$z(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$k(ctx);
+					if_block = create_if_block$l(ctx);
 					if_block.c();
 					if_block.m(div, null);
 				}
@@ -10812,8 +10838,8 @@ function create_if_block_4$2(ctx) {
 	};
 }
 
-// (137:4) {#if leadingicon}
-function create_if_block_3$8(ctx) {
+// (141:4) {#if leadingicon}
+function create_if_block_3$9(ctx) {
 	let goa_icon;
 
 	return {
@@ -10837,8 +10863,8 @@ function create_if_block_3$8(ctx) {
 	};
 }
 
-// (174:4) {#if trailingicon && !handlesTrailingIconClick}
-function create_if_block_2$8(ctx) {
+// (178:4) {#if trailingicon && !handlesTrailingIconClick}
+function create_if_block_2$9(ctx) {
 	let goa_icon;
 
 	return {
@@ -10863,8 +10889,8 @@ function create_if_block_2$8(ctx) {
 	};
 }
 
-// (184:4) {#if trailingicon && handlesTrailingIconClick}
-function create_if_block_1$9(ctx) {
+// (188:4) {#if trailingicon && handlesTrailingIconClick}
+function create_if_block_1$a(ctx) {
 	let goa_icon_button;
 	let mounted;
 	let dispose;
@@ -10904,8 +10930,8 @@ function create_if_block_1$9(ctx) {
 	};
 }
 
-// (197:4) {#if suffix}
-function create_if_block$j(ctx) {
+// (201:4) {#if suffix}
+function create_if_block$k(ctx) {
 	let span;
 	let t;
 
@@ -10950,10 +10976,10 @@ function create_fragment$y(ctx) {
 	let mounted;
 	let dispose;
 	let if_block0 = /*prefix*/ ctx[15] && create_if_block_4$2(ctx);
-	let if_block1 = /*leadingicon*/ ctx[5] && create_if_block_3$8(ctx);
-	let if_block2 = /*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[30] && create_if_block_2$8(ctx);
-	let if_block3 = /*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[30] && create_if_block_1$9(ctx);
-	let if_block4 = /*suffix*/ ctx[16] && create_if_block$j(ctx);
+	let if_block1 = /*leadingicon*/ ctx[5] && create_if_block_3$9(ctx);
+	let if_block2 = /*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[30] && create_if_block_2$9(ctx);
+	let if_block3 = /*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[30] && create_if_block_1$a(ctx);
+	let if_block4 = /*suffix*/ ctx[16] && create_if_block$k(ctx);
 
 	return {
 		c() {
@@ -11057,7 +11083,7 @@ function create_fragment$y(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block_3$8(ctx);
+					if_block1 = create_if_block_3$9(ctx);
 					if_block1.c();
 					if_block1.m(div2, t2);
 				}
@@ -11146,7 +11172,7 @@ function create_fragment$y(ctx) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
-					if_block2 = create_if_block_2$8(ctx);
+					if_block2 = create_if_block_2$9(ctx);
 					if_block2.c();
 					if_block2.m(div2, t4);
 				}
@@ -11159,7 +11185,7 @@ function create_fragment$y(ctx) {
 				if (if_block3) {
 					if_block3.p(ctx, dirty);
 				} else {
-					if_block3 = create_if_block_1$9(ctx);
+					if_block3 = create_if_block_1$a(ctx);
 					if_block3.c();
 					if_block3.m(div2, t5);
 				}
@@ -11172,7 +11198,7 @@ function create_fragment$y(ctx) {
 				if (if_block4) {
 					if_block4.p(ctx, dirty);
 				} else {
-					if_block4 = create_if_block$j(ctx);
+					if_block4 = create_if_block$k(ctx);
 					if_block4.c();
 					if_block4.m(div2, t6);
 				}
@@ -11307,6 +11333,12 @@ function instance$v($$self, $$props, $$invalidate) {
 			debounce
 		);
 
+		input.dispatchEvent(new CustomEvent("_keyPress",
+		{
+				composed: true,
+				detail: { name, value: input.value, key: e.key }
+			}));
+
 		$$invalidate(0, value = input.value);
 	}
 
@@ -11848,7 +11880,7 @@ customElements.define("goa-input", Input);
 
 /* src/components/microsite-header/MicrositeHeader.svelte generated by Svelte v3.59.2 */
 
-function create_if_block_3$7(ctx) {
+function create_if_block_3$8(ctx) {
 	let div;
 	let t0;
 	let a;
@@ -11884,7 +11916,7 @@ function create_if_block_3$7(ctx) {
 }
 
 // (37:4) {#if ["alpha", "beta"].includes(type)}
-function create_if_block_1$8(ctx) {
+function create_if_block_1$9(ctx) {
 	let div0;
 	let t0_value = capitalize(/*type*/ ctx[0]) + "";
 	let t0;
@@ -11896,7 +11928,7 @@ function create_if_block_1$8(ctx) {
 	let t3;
 	let a_target_value;
 	let t4;
-	let if_block = /*feedbackurl*/ ctx[2] && create_if_block_2$7(ctx);
+	let if_block = /*feedbackurl*/ ctx[2] && create_if_block_2$8(ctx);
 
 	return {
 		c() {
@@ -11942,7 +11974,7 @@ function create_if_block_1$8(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block_2$7(ctx);
+					if_block = create_if_block_2$8(ctx);
 					if_block.c();
 					if_block.m(div1, null);
 				}
@@ -11961,7 +11993,7 @@ function create_if_block_1$8(ctx) {
 }
 
 // (46:8) {#if feedbackurl}
-function create_if_block_2$7(ctx) {
+function create_if_block_2$8(ctx) {
 	let span;
 	let t0;
 	let a;
@@ -12000,7 +12032,7 @@ function create_if_block_2$7(ctx) {
 }
 
 // (52:4) {#if version}
-function create_if_block$i(ctx) {
+function create_if_block$j(ctx) {
 	let div;
 	let t;
 
@@ -12033,9 +12065,9 @@ function create_fragment$x(ctx) {
 	let div0;
 	let t2;
 	let header_style_value;
-	let if_block0 = /*type*/ ctx[0] === "live" && create_if_block_3$7(ctx);
-	let if_block1 = show_if && create_if_block_1$8(ctx);
-	let if_block2 = /*version*/ ctx[1] && create_if_block$i(ctx);
+	let if_block0 = /*type*/ ctx[0] === "live" && create_if_block_3$8(ctx);
+	let if_block1 = show_if && create_if_block_1$9(ctx);
+	let if_block2 = /*version*/ ctx[1] && create_if_block$j(ctx);
 
 	return {
 		c() {
@@ -12070,7 +12102,7 @@ function create_fragment$x(ctx) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_3$7(ctx);
+					if_block0 = create_if_block_3$8(ctx);
 					if_block0.c();
 					if_block0.m(div1, t0);
 				}
@@ -12085,7 +12117,7 @@ function create_fragment$x(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block_1$8(ctx);
+					if_block1 = create_if_block_1$9(ctx);
 					if_block1.c();
 					if_block1.m(div1, t1);
 				}
@@ -12098,7 +12130,7 @@ function create_fragment$x(ctx) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
-					if_block2 = create_if_block$i(ctx);
+					if_block2 = create_if_block$j(ctx);
 					if_block2.c();
 					if_block2.m(div1, null);
 				}
@@ -12278,7 +12310,7 @@ customElements.define("goa-microsite-header", MicrositeHeader);
 
 /* src/components/modal/Modal.svelte generated by Svelte v3.59.2 */
 
-function create_if_block$h(ctx) {
+function create_if_block$i(ctx) {
 	let goa_focus_trap;
 	let div6;
 	let div0;
@@ -12303,16 +12335,16 @@ function create_if_block$h(ctx) {
 	let current;
 	let mounted;
 	let dispose;
-	let if_block0 = /*calloutvariant*/ ctx[3] !== null && create_if_block_3$6(ctx);
+	let if_block0 = /*calloutvariant*/ ctx[3] !== null && create_if_block_3$7(ctx);
 
 	function select_block_type(ctx, dirty) {
-		if (/*heading*/ ctx[1]) return create_if_block_2$6;
+		if (/*heading*/ ctx[1]) return create_if_block_2$7;
 		return create_else_block$8;
 	}
 
 	let current_block_type = select_block_type(ctx);
 	let if_block1 = current_block_type(ctx);
-	let if_block2 = /*_isClosable*/ ctx[9] && create_if_block_1$7(ctx);
+	let if_block2 = /*_isClosable*/ ctx[9] && create_if_block_1$8(ctx);
 
 	return {
 		c() {
@@ -12396,7 +12428,7 @@ function create_if_block$h(ctx) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_3$6(ctx);
+					if_block0 = create_if_block_3$7(ctx);
 					if_block0.c();
 					if_block0.m(div5, t1);
 				}
@@ -12421,7 +12453,7 @@ function create_if_block$h(ctx) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
-					if_block2 = create_if_block_1$7(ctx);
+					if_block2 = create_if_block_1$8(ctx);
 					if_block2.c();
 					if_block2.m(header, null);
 				}
@@ -12500,7 +12532,7 @@ function create_if_block$h(ctx) {
 }
 
 // (143:8) {#if calloutvariant !== null}
-function create_if_block_3$6(ctx) {
+function create_if_block_3$7(ctx) {
 	let div;
 	let goa_icon;
 	let goa_icon_inverted_value;
@@ -12563,7 +12595,7 @@ function create_else_block$8(ctx) {
 }
 
 // (154:14) {#if heading}
-function create_if_block_2$6(ctx) {
+function create_if_block_2$7(ctx) {
 	let t;
 
 	return {
@@ -12583,7 +12615,7 @@ function create_if_block_2$6(ctx) {
 }
 
 // (160:12) {#if _isClosable}
-function create_if_block_1$7(ctx) {
+function create_if_block_1$8(ctx) {
 	let div;
 	let goa_icon_button;
 	let mounted;
@@ -12619,7 +12651,7 @@ function create_if_block_1$7(ctx) {
 function create_fragment$w(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*_isOpen*/ ctx[7] && create_if_block$h(ctx);
+	let if_block = /*_isOpen*/ ctx[7] && create_if_block$i(ctx);
 
 	return {
 		c() {
@@ -12641,7 +12673,7 @@ function create_fragment$w(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$h(ctx);
+					if_block = create_if_block$i(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -13006,7 +13038,7 @@ customElements.define("goa-modal", Modal);
 
 /* src/components/notification/Notification.svelte generated by Svelte v3.59.2 */
 
-function create_if_block$g(ctx) {
+function create_if_block$h(ctx) {
 	let div4;
 	let div3;
 	let div0;
@@ -13129,7 +13161,7 @@ function create_if_block$g(ctx) {
 function create_fragment$v(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*show*/ ctx[3] && create_if_block$g(ctx);
+	let if_block = /*show*/ ctx[3] && create_if_block$h(ctx);
 
 	return {
 		c() {
@@ -13151,7 +13183,7 @@ function create_fragment$v(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$g(ctx);
+					if_block = create_if_block$h(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -13422,7 +13454,7 @@ function get_each_context$5(ctx, list, i) {
 }
 
 // (78:4) {#if variant === "all"}
-function create_if_block$f(ctx) {
+function create_if_block$g(ctx) {
 	let goa_block;
 	let span0;
 	let t1;
@@ -13558,7 +13590,7 @@ function create_fragment$t(ctx) {
 	let goa_button1_disabled_value;
 	let mounted;
 	let dispose;
-	let if_block = /*variant*/ ctx[1] === "all" && create_if_block$f(ctx);
+	let if_block = /*variant*/ ctx[1] === "all" && create_if_block$g(ctx);
 
 	return {
 		c() {
@@ -13619,7 +13651,7 @@ function create_fragment$t(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$f(ctx);
+					if_block = create_if_block$g(ctx);
 					if_block.c();
 					if_block.m(div, t0);
 				}
@@ -13896,7 +13928,7 @@ customElements.define("goa-pagination", Pagination);
 
 /* src/components/popover/Popover.svelte generated by Svelte v3.59.2 */
 
-function create_if_block$e(ctx) {
+function create_if_block$f(ctx) {
 	let div0;
 	let t;
 	let div2;
@@ -13979,7 +14011,7 @@ function create_fragment$s(ctx) {
 	let div1_style_value;
 	let mounted;
 	let dispose;
-	let if_block = /*_open*/ ctx[13] && create_if_block$e(ctx);
+	let if_block = /*_open*/ ctx[13] && create_if_block$f(ctx);
 
 	return {
 		c() {
@@ -14030,7 +14062,7 @@ function create_fragment$s(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(div1, null);
 				}
@@ -14622,7 +14654,7 @@ function get_each_context$4(ctx, list, i) {
 }
 
 // (105:6) {#if option.description}
-function create_if_block$d(ctx) {
+function create_if_block$e(ctx) {
 	let div;
 	let t_value = /*option*/ ctx[22].description + "";
 	let t;
@@ -14677,7 +14709,7 @@ function create_each_block$4(key_1, ctx) {
 		return /*change_handler*/ ctx[16](/*option*/ ctx[22]);
 	}
 
-	let if_block = /*option*/ ctx[22].description && create_if_block$d(ctx);
+	let if_block = /*option*/ ctx[22].description && create_if_block$e(ctx);
 
 	return {
 		key: key_1,
@@ -14773,7 +14805,7 @@ function create_each_block$4(key_1, ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$d(ctx);
+					if_block = create_if_block$e(ctx);
 					if_block.c();
 					if_block.m(div1, t4);
 				}
@@ -15417,7 +15449,7 @@ function create_else_block$7(ctx) {
 }
 
 // (68:31) 
-function create_if_block_3$5(ctx) {
+function create_if_block_3$6(ctx) {
 	let div3;
 	let div2;
 	let div0;
@@ -15508,7 +15540,7 @@ function create_if_block_3$5(ctx) {
 }
 
 // (64:29) 
-function create_if_block_2$5(ctx) {
+function create_if_block_2$6(ctx) {
 	let each_1_anchor;
 	let current;
 	let each_value = Array(Number.parseInt(/*linecount*/ ctx[2] + ""));
@@ -15594,7 +15626,7 @@ function create_if_block_2$5(ctx) {
 }
 
 // (54:31) 
-function create_if_block_1$6(ctx) {
+function create_if_block_1$7(ctx) {
 	let div2;
 	let div0;
 	let skeleton0;
@@ -15684,7 +15716,7 @@ function create_if_block_1$6(ctx) {
 }
 
 // (43:2) {#if type === "card"}
-function create_if_block$c(ctx) {
+function create_if_block$d(ctx) {
 	let div1;
 	let skeleton0;
 	let t0;
@@ -15826,10 +15858,10 @@ function create_fragment$p(ctx) {
 	let current;
 
 	const if_block_creators = [
-		create_if_block$c,
-		create_if_block_1$6,
-		create_if_block_2$5,
-		create_if_block_3$5,
+		create_if_block$d,
+		create_if_block_1$7,
+		create_if_block_2$6,
+		create_if_block_3$6,
 		create_else_block$7
 	];
 
@@ -16350,7 +16382,7 @@ function tweened(value, defaults = {}) {
 
 /* src/components/spinner/Spinner.svelte generated by Svelte v3.59.2 */
 
-function create_if_block$b(ctx) {
+function create_if_block$c(ctx) {
 	let svg;
 	let circle;
 	let circle_stroke_value;
@@ -16461,7 +16493,7 @@ function create_if_block$b(ctx) {
 
 function create_fragment$n(ctx) {
 	let if_block_anchor;
-	let if_block = /*ready*/ ctx[6] && create_if_block$b(ctx);
+	let if_block = /*ready*/ ctx[6] && create_if_block$c(ctx);
 
 	return {
 		c() {
@@ -16478,7 +16510,7 @@ function create_fragment$n(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$b(ctx);
+					if_block = create_if_block$c(ctx);
 					if_block.c();
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
 				}
@@ -16713,7 +16745,7 @@ function create_else_block$6(ctx) {
 }
 
 // (85:2) {#if _isTableRoot}
-function create_if_block$a(ctx) {
+function create_if_block$b(ctx) {
 	let slot;
 
 	return {
@@ -16736,7 +16768,7 @@ function create_fragment$m(ctx) {
 	let div_style_value;
 
 	function select_block_type(ctx, dirty) {
-		if (/*_isTableRoot*/ ctx[7]) return create_if_block$a;
+		if (/*_isTableRoot*/ ctx[7]) return create_if_block$b;
 		return create_else_block$6;
 	}
 
@@ -17069,7 +17101,7 @@ function create_else_block$5(ctx) {
 }
 
 // (69:32) 
-function create_if_block_1$5(ctx) {
+function create_if_block_1$6(ctx) {
 	let goa_icon;
 
 	return {
@@ -17088,7 +17120,7 @@ function create_if_block_1$5(ctx) {
 }
 
 // (67:2) {#if direction === "desc"}
-function create_if_block$9(ctx) {
+function create_if_block$a(ctx) {
 	let goa_icon;
 
 	return {
@@ -17112,8 +17144,8 @@ function create_fragment$l(ctx) {
 	let t;
 
 	function select_block_type(ctx, dirty) {
-		if (/*direction*/ ctx[0] === "desc") return create_if_block$9;
-		if (/*direction*/ ctx[0] === "asc") return create_if_block_1$5;
+		if (/*direction*/ ctx[0] === "desc") return create_if_block$a;
+		if (/*direction*/ ctx[0] === "asc") return create_if_block_1$6;
 		return create_else_block$5;
 	}
 
@@ -17215,46 +17247,216 @@ customElements.define("goa-table-sort-header", TableSortHeader);
 
 /* src/components/text-area/TextArea.svelte generated by Svelte v3.59.2 */
 
+function create_if_block_1$5(ctx) {
+	let div;
+
+	function select_block_type(ctx, dirty) {
+		if (/*count*/ ctx[15] > /*maxcount*/ ctx[8]) return create_if_block_2$5;
+		if (/*count*/ ctx[15] < /*maxcount*/ ctx[8]) return create_if_block_3$5;
+	}
+
+	let current_block_type = select_block_type(ctx);
+	let if_block = current_block_type && current_block_type(ctx);
+
+	return {
+		c() {
+			div = element("div");
+			if (if_block) if_block.c();
+			attr(div, "class", "counter");
+			toggle_class(div, "counter-error", /*count*/ ctx[15] > /*maxcount*/ ctx[8]);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			if (if_block) if_block.m(div, null);
+		},
+		p(ctx, dirty) {
+			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
+				if_block.p(ctx, dirty);
+			} else {
+				if (if_block) if_block.d(1);
+				if_block = current_block_type && current_block_type(ctx);
+
+				if (if_block) {
+					if_block.c();
+					if_block.m(div, null);
+				}
+			}
+
+			if (dirty & /*count, maxcount*/ 33024) {
+				toggle_class(div, "counter-error", /*count*/ ctx[15] > /*maxcount*/ ctx[8]);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+
+			if (if_block) {
+				if_block.d();
+			}
+		}
+	};
+}
+
+// (86:33) 
+function create_if_block_3$5(ctx) {
+	let t0_value = /*maxcount*/ ctx[8] - /*count*/ ctx[15] + "";
+	let t0;
+	let t1;
+	let t2_value = pluralize(/*countby*/ ctx[7], /*maxcount*/ ctx[8] - /*count*/ ctx[15]) + "";
+	let t2;
+	let t3;
+
+	return {
+		c() {
+			t0 = text(t0_value);
+			t1 = space();
+			t2 = text(t2_value);
+			t3 = text(" remaining");
+		},
+		m(target, anchor) {
+			insert(target, t0, anchor);
+			insert(target, t1, anchor);
+			insert(target, t2, anchor);
+			insert(target, t3, anchor);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*maxcount, count*/ 33024 && t0_value !== (t0_value = /*maxcount*/ ctx[8] - /*count*/ ctx[15] + "")) set_data(t0, t0_value);
+			if (dirty & /*countby, maxcount, count*/ 33152 && t2_value !== (t2_value = pluralize(/*countby*/ ctx[7], /*maxcount*/ ctx[8] - /*count*/ ctx[15]) + "")) set_data(t2, t2_value);
+		},
+		d(detaching) {
+			if (detaching) detach(t0);
+			if (detaching) detach(t1);
+			if (detaching) detach(t2);
+			if (detaching) detach(t3);
+		}
+	};
+}
+
+// (84:6) {#if count > maxcount}
+function create_if_block_2$5(ctx) {
+	let t0_value = /*count*/ ctx[15] - /*maxcount*/ ctx[8] + "";
+	let t0;
+	let t1;
+	let t2_value = pluralize(/*countby*/ ctx[7], /*count*/ ctx[15] - /*maxcount*/ ctx[8]) + "";
+	let t2;
+	let t3;
+
+	return {
+		c() {
+			t0 = text(t0_value);
+			t1 = space();
+			t2 = text(t2_value);
+			t3 = text(" too many");
+		},
+		m(target, anchor) {
+			insert(target, t0, anchor);
+			insert(target, t1, anchor);
+			insert(target, t2, anchor);
+			insert(target, t3, anchor);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*count, maxcount*/ 33024 && t0_value !== (t0_value = /*count*/ ctx[15] - /*maxcount*/ ctx[8] + "")) set_data(t0, t0_value);
+			if (dirty & /*countby, count, maxcount*/ 33152 && t2_value !== (t2_value = pluralize(/*countby*/ ctx[7], /*count*/ ctx[15] - /*maxcount*/ ctx[8]) + "")) set_data(t2, t2_value);
+		},
+		d(detaching) {
+			if (detaching) detach(t0);
+			if (detaching) detach(t1);
+			if (detaching) detach(t2);
+			if (detaching) detach(t3);
+		}
+	};
+}
+
+// (92:2) {#if showCount && count > 0 && !isDisabled}
+function create_if_block$9(ctx) {
+	let div;
+	let t0;
+	let t1;
+	let t2_value = pluralize(/*countby*/ ctx[7], /*count*/ ctx[15]) + "";
+	let t2;
+
+	return {
+		c() {
+			div = element("div");
+			t0 = text(/*count*/ ctx[15]);
+			t1 = space();
+			t2 = text(t2_value);
+			attr(div, "class", "counter");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, t0);
+			append(div, t1);
+			append(div, t2);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*count*/ 32768) set_data(t0, /*count*/ ctx[15]);
+			if (dirty & /*countby, count*/ 32896 && t2_value !== (t2_value = pluralize(/*countby*/ ctx[7], /*count*/ ctx[15]) + "")) set_data(t2, t2_value);
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
 function create_fragment$k(ctx) {
 	let div;
 	let textarea;
 	let textarea_aria_label_value;
-	let t;
+	let t0;
+	let t1;
 	let div_style_value;
 	let mounted;
 	let dispose;
+	let if_block0 = /*maxcount*/ ctx[8] > 0 && !/*isDisabled*/ ctx[14] && create_if_block_1$5(ctx);
+	let if_block1 = /*showCount*/ ctx[16] && /*count*/ ctx[15] > 0 && !/*isDisabled*/ ctx[14] && create_if_block$9(ctx);
 
 	return {
 		c() {
 			div = element("div");
 			textarea = element("textarea");
-			t = space();
+			t0 = space();
+			if (if_block0) if_block0.c();
+			t1 = space();
+			if (if_block1) if_block1.c();
 			this.c = noop;
 			attr(textarea, "name", /*name*/ ctx[1]);
 			attr(textarea, "placeholder", /*placeholder*/ ctx[2]);
 			attr(textarea, "rows", /*rows*/ ctx[3]);
 			attr(textarea, "aria-label", textarea_aria_label_value = /*arialabel*/ ctx[6] || /*name*/ ctx[1]);
-			attr(textarea, "class", "goa-textarea");
-			textarea.disabled = /*isDisabled*/ ctx[13];
-			textarea.readOnly = /*isReadonly*/ ctx[14];
+			textarea.disabled = /*isDisabled*/ ctx[14];
+			textarea.readOnly = /*isReadonly*/ ctx[17];
 			attr(textarea, "data-testid", /*testid*/ ctx[4]);
-			toggle_class(textarea, "error", /*isError*/ ctx[15]);
-			attr(div, "class", "container");
+			attr(div, "data-testid", "root");
+			attr(div, "class", "root");
 
 			attr(div, "style", div_style_value = `
-    ${calculateMargin(/*mt*/ ctx[7], /*mr*/ ctx[8], /*mb*/ ctx[9], /*ml*/ ctx[10])};
+    ${calculateMargin(/*mt*/ ctx[9], /*mr*/ ctx[10], /*mb*/ ctx[11], /*ml*/ ctx[12])};
     --width: ${/*width*/ ctx[5]};
+    --char-count-padding: ${/*showCount*/ ctx[16] || /*maxcount*/ ctx[8] > 0
+			? "2rem"
+			: "0"};
   `);
+
+			toggle_class(div, "error", /*isError*/ ctx[18] || /*maxcount*/ ctx[8] > 0 && /*count*/ ctx[15] > /*maxcount*/ ctx[8]);
+			toggle_class(div, "disabled", /*isDisabled*/ ctx[14]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
 			append(div, textarea);
-			/*textarea_binding*/ ctx[19](textarea);
+			/*textarea_binding*/ ctx[25](textarea);
 			set_input_value(textarea, /*value*/ ctx[0]);
-			append(div, t);
+			append(div, t0);
+			if (if_block0) if_block0.m(div, null);
+			append(div, t1);
+			if (if_block1) if_block1.m(div, null);
 
 			if (!mounted) {
-				dispose = listen(textarea, "input", /*textarea_input_handler*/ ctx[20]);
+				dispose = [
+					listen(textarea, "input", /*textarea_input_handler*/ ctx[26]),
+					listen(textarea, "keyup", /*onKeyPress*/ ctx[20]),
+					listen(textarea, "change", /*onChange*/ ctx[19])
+				];
+
 				mounted = true;
 			}
 		},
@@ -17275,12 +17477,12 @@ function create_fragment$k(ctx) {
 				attr(textarea, "aria-label", textarea_aria_label_value);
 			}
 
-			if (dirty & /*isDisabled*/ 8192) {
-				textarea.disabled = /*isDisabled*/ ctx[13];
+			if (dirty & /*isDisabled*/ 16384) {
+				textarea.disabled = /*isDisabled*/ ctx[14];
 			}
 
-			if (dirty & /*isReadonly*/ 16384) {
-				textarea.readOnly = /*isReadonly*/ ctx[14];
+			if (dirty & /*isReadonly*/ 131072) {
+				textarea.readOnly = /*isReadonly*/ ctx[17];
 			}
 
 			if (dirty & /*testid*/ 16) {
@@ -17291,24 +17493,59 @@ function create_fragment$k(ctx) {
 				set_input_value(textarea, /*value*/ ctx[0]);
 			}
 
-			if (dirty & /*isError*/ 32768) {
-				toggle_class(textarea, "error", /*isError*/ ctx[15]);
+			if (/*maxcount*/ ctx[8] > 0 && !/*isDisabled*/ ctx[14]) {
+				if (if_block0) {
+					if_block0.p(ctx, dirty);
+				} else {
+					if_block0 = create_if_block_1$5(ctx);
+					if_block0.c();
+					if_block0.m(div, t1);
+				}
+			} else if (if_block0) {
+				if_block0.d(1);
+				if_block0 = null;
 			}
 
-			if (dirty & /*mt, mr, mb, ml, width*/ 1952 && div_style_value !== (div_style_value = `
-    ${calculateMargin(/*mt*/ ctx[7], /*mr*/ ctx[8], /*mb*/ ctx[9], /*ml*/ ctx[10])};
+			if (/*showCount*/ ctx[16] && /*count*/ ctx[15] > 0 && !/*isDisabled*/ ctx[14]) {
+				if (if_block1) {
+					if_block1.p(ctx, dirty);
+				} else {
+					if_block1 = create_if_block$9(ctx);
+					if_block1.c();
+					if_block1.m(div, null);
+				}
+			} else if (if_block1) {
+				if_block1.d(1);
+				if_block1 = null;
+			}
+
+			if (dirty & /*mt, mr, mb, ml, width, showCount, maxcount*/ 73504 && div_style_value !== (div_style_value = `
+    ${calculateMargin(/*mt*/ ctx[9], /*mr*/ ctx[10], /*mb*/ ctx[11], /*ml*/ ctx[12])};
     --width: ${/*width*/ ctx[5]};
+    --char-count-padding: ${/*showCount*/ ctx[16] || /*maxcount*/ ctx[8] > 0
+			? "2rem"
+			: "0"};
   `)) {
 				attr(div, "style", div_style_value);
 			}
+
+			if (dirty & /*isError, maxcount, count*/ 295168) {
+				toggle_class(div, "error", /*isError*/ ctx[18] || /*maxcount*/ ctx[8] > 0 && /*count*/ ctx[15] > /*maxcount*/ ctx[8]);
+			}
+
+			if (dirty & /*isDisabled*/ 16384) {
+				toggle_class(div, "disabled", /*isDisabled*/ ctx[14]);
+			}
 		},
 		i: noop,
 		o: noop,
 		d(detaching) {
 			if (detaching) detach(div);
-			/*textarea_binding*/ ctx[19](null);
+			/*textarea_binding*/ ctx[25](null);
+			if (if_block0) if_block0.d();
+			if (if_block1) if_block1.d();
 			mounted = false;
-			dispose();
+			run_all(dispose);
 		}
 	};
 }
@@ -17317,6 +17554,8 @@ function instance$h($$self, $$props, $$invalidate) {
 	let isError;
 	let isDisabled;
 	let isReadonly;
+	let showCount;
+	let count;
 	let { name } = $$props;
 	let { value = "" } = $$props;
 	let { placeholder = "" } = $$props;
@@ -17327,17 +17566,43 @@ function instance$h($$self, $$props, $$invalidate) {
 	let { readonly = "false" } = $$props;
 	let { disabled = "false" } = $$props;
 	let { arialabel = "" } = $$props;
+	let { countby } = $$props;
+	let { showcount = "false" } = $$props;
+	let { maxcount = -1 } = $$props;
 	let { mt = null } = $$props;
 	let { mr = null } = $$props;
 	let { mb = null } = $$props;
 	let { ml = null } = $$props;
-	let { maxcharcount = 0 } = $$props;
-	let _textAreaEl;
+
+	// privates
+	let _textareaEl;
+
+	// functions
+	function onChange(e) {
+		if (isDisabled) return;
+		const el = e.currentTarget;
+
+		_textareaEl.dispatchEvent(new CustomEvent("_change",
+		{
+				composed: true,
+				detail: { name, value: el.value }
+			}));
+	}
+
+	function onKeyPress(e) {
+		if (isDisabled) return;
+
+		_textareaEl.dispatchEvent(new CustomEvent("_keyPress",
+		{
+				composed: true,
+				detail: { name, value, key: e.key }
+			}));
+	}
 
 	function textarea_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
-			_textAreaEl = $$value;
-			$$invalidate(12, _textAreaEl);
+			_textareaEl = $$value;
+			$$invalidate(13, _textareaEl);
 		});
 	}
 
@@ -17353,43 +17618,41 @@ function instance$h($$self, $$props, $$invalidate) {
 		if ('rows' in $$props) $$invalidate(3, rows = $$props.rows);
 		if ('testid' in $$props) $$invalidate(4, testid = $$props.testid);
 		if ('width' in $$props) $$invalidate(5, width = $$props.width);
-		if ('error' in $$props) $$invalidate(16, error = $$props.error);
-		if ('readonly' in $$props) $$invalidate(17, readonly = $$props.readonly);
-		if ('disabled' in $$props) $$invalidate(18, disabled = $$props.disabled);
+		if ('error' in $$props) $$invalidate(21, error = $$props.error);
+		if ('readonly' in $$props) $$invalidate(22, readonly = $$props.readonly);
+		if ('disabled' in $$props) $$invalidate(23, disabled = $$props.disabled);
 		if ('arialabel' in $$props) $$invalidate(6, arialabel = $$props.arialabel);
-		if ('mt' in $$props) $$invalidate(7, mt = $$props.mt);
-		if ('mr' in $$props) $$invalidate(8, mr = $$props.mr);
-		if ('mb' in $$props) $$invalidate(9, mb = $$props.mb);
-		if ('ml' in $$props) $$invalidate(10, ml = $$props.ml);
-		if ('maxcharcount' in $$props) $$invalidate(11, maxcharcount = $$props.maxcharcount);
+		if ('countby' in $$props) $$invalidate(7, countby = $$props.countby);
+		if ('showcount' in $$props) $$invalidate(24, showcount = $$props.showcount);
+		if ('maxcount' in $$props) $$invalidate(8, maxcount = $$props.maxcount);
+		if ('mt' in $$props) $$invalidate(9, mt = $$props.mt);
+		if ('mr' in $$props) $$invalidate(10, mr = $$props.mr);
+		if ('mb' in $$props) $$invalidate(11, mb = $$props.mb);
+		if ('ml' in $$props) $$invalidate(12, ml = $$props.ml);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*error*/ 65536) {
-			$$invalidate(15, isError = toBoolean(error));
+		if ($$self.$$.dirty & /*error*/ 2097152) {
+			// reactive
+			$$invalidate(18, isError = toBoolean(error));
 		}
 
-		if ($$self.$$.dirty & /*disabled*/ 262144) {
-			$$invalidate(13, isDisabled = toBoolean(disabled));
+		if ($$self.$$.dirty & /*disabled*/ 8388608) {
+			$$invalidate(14, isDisabled = toBoolean(disabled));
 		}
 
-		if ($$self.$$.dirty & /*readonly*/ 131072) {
-			$$invalidate(14, isReadonly = toBoolean(readonly));
+		if ($$self.$$.dirty & /*readonly*/ 4194304) {
+			$$invalidate(17, isReadonly = toBoolean(readonly));
 		}
 
-		if ($$self.$$.dirty & /*_textAreaEl, isDisabled, name, value*/ 12291) {
-			// $: showCounter = toBoolean(showcounter);
-			{
-				if (_textAreaEl && !isDisabled) {
-					_textAreaEl.dispatchEvent(new CustomEvent("_change",
-					{
-							composed: true,
-							bubbles: false,
-							cancelable: true,
-							detail: { name, value }
-						}));
-				}
-			}
+		if ($$self.$$.dirty & /*showcount*/ 16777216) {
+			$$invalidate(16, showCount = toBoolean(showcount));
+		}
+
+		if ($$self.$$.dirty & /*countby, value*/ 129) {
+			$$invalidate(15, count = countby === "character"
+			? value.length
+			: value.split(" ").filter(word => word.trim().length > 0).length);
 		}
 	};
 
@@ -17401,18 +17664,24 @@ function instance$h($$self, $$props, $$invalidate) {
 		testid,
 		width,
 		arialabel,
+		countby,
+		maxcount,
 		mt,
 		mr,
 		mb,
 		ml,
-		maxcharcount,
-		_textAreaEl,
+		_textareaEl,
 		isDisabled,
+		count,
+		showCount,
 		isReadonly,
 		isError,
+		onChange,
+		onKeyPress,
 		error,
 		readonly,
 		disabled,
+		showcount,
 		textarea_binding,
 		textarea_input_handler
 	];
@@ -17423,8 +17692,8 @@ class TextArea extends SvelteElement {
 		super();
 		const style = document.createElement('style');
 
-		style.textContent = `:host{--textarea-padding-vertical:0.625rem;--textarea-padding-horizontal:var(--goa-space-s);box-sizing:border-box;font-family:var(--goa-font-family-sans)}.container{position:relative;width:100%}@media screen and (max-width: 623px){@media not (max-color:2147477350){.container{max-width:var(--width)}}}@media not  screen and (max-width: 623px){@media not (color:2147477350){.container{max-width:var(--width)}}}.goa-textarea{display:block;width:100%;box-sizing:border-box;outline:none;border:1px solid var(--goa-color-greyscale-700);border-radius:3px;color:var(--goa-color-greyscale-black, #ccc);padding:var(--textarea-padding-vertical) var(--textarea-padding-horizontal);font-size:var(--goa-font-size-4);font-family:var(--goa-font-family-sans);min-width:100%;resize:vertical}@media screen and (max-width: 623px){@media not (max-color:2147477350){.goa-textarea{min-width:0;width:var(--width)}}}@media not  screen and (max-width: 623px){@media not (color:2147477350){.goa-textarea{min-width:0;width:var(--width)}}}.goa-textarea[readonly]{cursor:pointer}.goa-textarea:hover{box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}.goa-textarea:active,.goa-textarea:focus,.goa-textarea:focus-within{box-shadow:0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus)}.goa-textarea:disabled,.goa-textarea:disabled:hover,.goa-textarea:disabled:active,.goa-textarea:disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);cursor:default;box-shadow:none}.counter{position:absolute;right:0;padding-top:0.25rem;font-size:var(--goa-font-size-2)}.counter-error{color:var(--goa-color-interactive-error)
-  }.error{border:var(--goa-border-width-m) solid var(--goa-color-interactive-error);box-shadow:0 0 0 var(--goa-border-width-s) var(--goa-color-interactive-error)}.error:hover{box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-error)}.error:active,.error:focus{box-shadow:0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus)}`;
+		style.textContent = `:host{--textarea-padding-vertical:0.625rem;--textarea-padding-horizontal:var(--goa-space-s);box-sizing:border-box;font-family:var(--goa-font-family-sans)}.root{position:relative;width:100%;padding-bottom:var(--char-count-padding);border:var(--goa-border-width-s) solid var(--goa-color-greyscale-700);border-radius:3px}.root:has(textarea:disabled){background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);cursor:default;box-shadow:none}@media screen and (max-width: 623px){@media not (max-color:2147477350){.root{max-width:var(--width)}}}@media not  screen and (max-width: 623px){@media not (color:2147477350){.root{max-width:var(--width)}}}textarea{display:block;width:100%;box-sizing:border-box;outline:none;border:none;color:var(--goa-color-greyscale-black, #ccc);padding:var(--textarea-padding-vertical) var(--textarea-padding-horizontal);font-size:var(--goa-font-size-4);font-family:var(--goa-font-family-sans);min-width:100%;resize:vertical}@media screen and (max-width: 623px){@media not (max-color:2147477350){}}@media not  screen and (max-width: 623px){@media not (color:2147477350){}}.root:hover{box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}.root:focus-within{box-shadow:0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus)}.counter-error{color:var(--goa-color-interactive-error)
+  }.counter{position:absolute;right:0.75rem;font-size:var(--goa-font-size-2)}textarea{resize:none;scroll-behavior:smooth;max-height:calc(100vh * var(--max-height, 100) / 100)}textarea::-webkit-scrollbar{width:6px}textarea::-webkit-scrollbar-track{background:#f1f1f1}textarea::-webkit-scrollbar-thumb{background:#888}textarea::-webkit-scrollbar-thumb:hover{background:#555}.error{border-color:var(--goa-color-interactive-error);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-error)}.error:hover{box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-error)}.error:active,.error:focus{box-shadow:0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus)}`;
 
 		this.shadowRoot.appendChild(style);
 
@@ -17445,15 +17714,17 @@ class TextArea extends SvelteElement {
 				rows: 3,
 				testid: 4,
 				width: 5,
-				error: 16,
-				readonly: 17,
-				disabled: 18,
+				error: 21,
+				readonly: 22,
+				disabled: 23,
 				arialabel: 6,
-				mt: 7,
-				mr: 8,
-				mb: 9,
-				ml: 10,
-				maxcharcount: 11
+				countby: 7,
+				showcount: 24,
+				maxcount: 8,
+				mt: 9,
+				mr: 10,
+				mb: 11,
+				ml: 12
 			},
 			null
 		);
@@ -17482,11 +17753,13 @@ class TextArea extends SvelteElement {
 			"readonly",
 			"disabled",
 			"arialabel",
+			"countby",
+			"showcount",
+			"maxcount",
 			"mt",
 			"mr",
 			"mb",
-			"ml",
-			"maxcharcount"
+			"ml"
 		];
 	}
 
@@ -17545,7 +17818,7 @@ class TextArea extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[16];
+		return this.$$.ctx[21];
 	}
 
 	set error(error) {
@@ -17554,7 +17827,7 @@ class TextArea extends SvelteElement {
 	}
 
 	get readonly() {
-		return this.$$.ctx[17];
+		return this.$$.ctx[22];
 	}
 
 	set readonly(readonly) {
@@ -17563,7 +17836,7 @@ class TextArea extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[18];
+		return this.$$.ctx[23];
 	}
 
 	set disabled(disabled) {
@@ -17580,17 +17853,44 @@ class TextArea extends SvelteElement {
 		flush();
 	}
 
-	get mt() {
+	get countby() {
 		return this.$$.ctx[7];
 	}
 
+	set countby(countby) {
+		this.$$set({ countby });
+		flush();
+	}
+
+	get showcount() {
+		return this.$$.ctx[24];
+	}
+
+	set showcount(showcount) {
+		this.$$set({ showcount });
+		flush();
+	}
+
+	get maxcount() {
+		return this.$$.ctx[8];
+	}
+
+	set maxcount(maxcount) {
+		this.$$set({ maxcount });
+		flush();
+	}
+
+	get mt() {
+		return this.$$.ctx[9];
+	}
+
 	set mt(mt) {
 		this.$$set({ mt });
 		flush();
 	}
 
 	get mr() {
-		return this.$$.ctx[8];
+		return this.$$.ctx[10];
 	}
 
 	set mr(mr) {
@@ -17599,7 +17899,7 @@ class TextArea extends SvelteElement {
 	}
 
 	get mb() {
-		return this.$$.ctx[9];
+		return this.$$.ctx[11];
 	}
 
 	set mb(mb) {
@@ -17608,22 +17908,13 @@ class TextArea extends SvelteElement {
 	}
 
 	get ml() {
-		return this.$$.ctx[10];
+		return this.$$.ctx[12];
 	}
 
 	set ml(ml) {
 		this.$$set({ ml });
 		flush();
 	}
-
-	get maxcharcount() {
-		return this.$$.ctx[11];
-	}
-
-	set maxcharcount(maxcharcount) {
-		this.$$set({ maxcharcount });
-		flush();
-	}
 }
 
 customElements.define("goa-textarea", TextArea);
@@ -23580,16 +23871,26 @@ function instance$a($$self, $$props, $$invalidate) {
 	let _showPopover = false;
 
 	onMount(async () => {
+		await initDate();
+	});
+
+	afterUpdate(async () => {
+		await initDate();
+	});
+
+	async function initDate() {
 		$$invalidate(9, _date = value && startOfDay(new Date(value)));
 
 		if (value && !isValid(_date)) {
 			console.error(`${value} is not a valid date`);
 		}
-	});
+	}
 
 	function onCalendarChange(e) {
 		$$invalidate(9, _date = e.detail.value);
+		$$invalidate(0, value = _date.toISOString());
 		hideCalendar();
+		dispatchValue(_date);
 		e.stopPropagation();
 		e.preventDefault();
 	}
@@ -23632,7 +23933,7 @@ function instance$a($$self, $$props, $$invalidate) {
 		// in the key event handling below the first line `_date ||= ...` is to initialize the date, if
 		// it hasn't yet been set to 1 unit opposite of what the keybinding does ex. if ArrowDown is
 		// clicked, which moves the datepicker one week ahead, the date is initialize one week before.
-		// This is to allow the starting date displayed to be that of today no matter what key is 
+		// This is to allow the starting date displayed to be that of today no matter what key is
 		// pressed.
 		switch (e.key) {
 			case "ArrowLeft":