@abgov/web-components 1.0.0-alpha.61 → 1.0.0-alpha.62

package/web-components.es.js

@@ -1155,14 +1155,14 @@ function get_each_context_2(ctx, list, i) {
 }
 
 // (83:6) {#if (navigationSections.length || navigationLinks.length) }
-function create_if_block_1$b(ctx) {
+function create_if_block_1$c(ctx) {
 	let div;
 	let t;
 	let hr;
 
 	function select_block_type(ctx, dirty) {
-		if (/*navigationSections*/ ctx[6].length) return create_if_block_2$6;
-		if (/*navigationLinks*/ ctx[5].length) return create_if_block_3$4;
+		if (/*navigationSections*/ ctx[6].length) return create_if_block_2$7;
+		if (/*navigationLinks*/ ctx[5].length) return create_if_block_3$5;
 	}
 
 	let current_block_type = select_block_type(ctx);
@@ -1210,7 +1210,7 @@ function create_if_block_1$b(ctx) {
 }
 
 // (95:44) 
-function create_if_block_3$4(ctx) {
+function create_if_block_3$5(ctx) {
 	let each_blocks = [];
 	let each_1_lookup = new Map();
 	let each_1_anchor;
@@ -1255,7 +1255,7 @@ function create_if_block_3$4(ctx) {
 }
 
 // (85:10) {#if navigationSections.length}
-function create_if_block_2$6(ctx) {
+function create_if_block_2$7(ctx) {
 	let each_blocks = [];
 	let each_1_lookup = new Map();
 	let each_1_anchor;
@@ -1445,7 +1445,7 @@ function create_each_block_1(key_1, ctx) {
 }
 
 // (106:8) {#if metaLinks.length }
-function create_if_block$f(ctx) {
+function create_if_block$g(ctx) {
 	let div;
 	let each_blocks = [];
 	let each_1_lookup = new Map();
@@ -1545,8 +1545,8 @@ function create_fragment$y(ctx) {
 	let img_src_value;
 	let t6;
 	let div4;
-	let if_block0 = (/*navigationSections*/ ctx[6].length || /*navigationLinks*/ ctx[5].length) && create_if_block_1$b(ctx);
-	let if_block1 = /*metaLinks*/ ctx[4].length && create_if_block$f(ctx);
+	let if_block0 = (/*navigationSections*/ ctx[6].length || /*navigationLinks*/ ctx[5].length) && create_if_block_1$c(ctx);
+	let if_block1 = /*metaLinks*/ ctx[4].length && create_if_block$g(ctx);
 
 	return {
 		c() {
@@ -1616,7 +1616,7 @@ function create_fragment$y(ctx) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_1$b(ctx);
+					if_block0 = create_if_block_1$c(ctx);
 					if_block0.c();
 					if_block0.m(div2, t1);
 				}
@@ -1629,7 +1629,7 @@ function create_fragment$y(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block$f(ctx);
+					if_block1 = create_if_block$g(ctx);
 					if_block1.c();
 					if_block1.m(div1, t2);
 				}
@@ -2163,7 +2163,7 @@ function create_else_block$3(ctx) {
 }
 
 // (35:2) {#if showIcon}
-function create_if_block_1$a(ctx) {
+function create_if_block_1$b(ctx) {
 	let goa_icon;
 
 	return {
@@ -2187,7 +2187,7 @@ function create_if_block_1$a(ctx) {
 }
 
 // (40:2) {#if content}
-function create_if_block$e(ctx) {
+function create_if_block$f(ctx) {
 	let div;
 	let t;
 
@@ -2216,13 +2216,13 @@ function create_fragment$v(ctx) {
 	let div_class_value;
 
 	function select_block_type(ctx, dirty) {
-		if (/*showIcon*/ ctx[4]) return create_if_block_1$a;
+		if (/*showIcon*/ ctx[4]) return create_if_block_1$b;
 		return create_else_block$3;
 	}
 
 	let current_block_type = select_block_type(ctx);
 	let if_block0 = current_block_type(ctx);
-	let if_block1 = /*content*/ ctx[2] && create_if_block$e(ctx);
+	let if_block1 = /*content*/ ctx[2] && create_if_block$f(ctx);
 
 	return {
 		c() {
@@ -2259,7 +2259,7 @@ function create_fragment$v(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block$e(ctx);
+					if_block1 = create_if_block$f(ctx);
 					if_block1.c();
 					if_block1.m(div, null);
 				}
@@ -2409,8 +2409,8 @@ function create_else_block$2(ctx) {
 	let slot;
 	let t1;
 	let if_block1_anchor;
-	let if_block0 = /*leadingicon*/ ctx[4] && create_if_block_2$5(ctx);
-	let if_block1 = /*trailingicon*/ ctx[5] && create_if_block_1$9(ctx);
+	let if_block0 = /*leadingicon*/ ctx[4] && create_if_block_2$6(ctx);
+	let if_block1 = /*trailingicon*/ ctx[5] && create_if_block_1$a(ctx);
 
 	return {
 		c() {
@@ -2434,7 +2434,7 @@ function create_else_block$2(ctx) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_2$5(ctx);
+					if_block0 = create_if_block_2$6(ctx);
 					if_block0.c();
 					if_block0.m(t0.parentNode, t0);
 				}
@@ -2447,7 +2447,7 @@ function create_else_block$2(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block_1$9(ctx);
+					if_block1 = create_if_block_1$a(ctx);
 					if_block1.c();
 					if_block1.m(if_block1_anchor.parentNode, if_block1_anchor);
 				}
@@ -2468,7 +2468,7 @@ function create_else_block$2(ctx) {
 }
 
 // (33:2) {#if type === "get-started"}
-function create_if_block$d(ctx) {
+function create_if_block$e(ctx) {
 	let slot;
 	let t;
 	let goa_icon;
@@ -2496,7 +2496,7 @@ function create_if_block$d(ctx) {
 }
 
 // (37:4) {#if leadingicon}
-function create_if_block_2$5(ctx) {
+function create_if_block_2$6(ctx) {
 	let goa_icon;
 
 	return {
@@ -2520,7 +2520,7 @@ function create_if_block_2$5(ctx) {
 }
 
 // (41:4) {#if trailingicon}
-function create_if_block_1$9(ctx) {
+function create_if_block_1$a(ctx) {
 	let goa_icon;
 
 	return {
@@ -2550,7 +2550,7 @@ function create_fragment$u(ctx) {
 	let dispose;
 
 	function select_block_type(ctx, dirty) {
-		if (/*type*/ ctx[0] === "get-started") return create_if_block$d;
+		if (/*type*/ ctx[0] === "get-started") return create_if_block$e;
 		return create_else_block$2;
 	}
 
@@ -3451,7 +3451,7 @@ customElements.define("goa-card-image", CardImage);
 
 /* libs/web-components/src/components/checkbox/Checkbox.svelte generated by Svelte v3.44.3 */
 
-function create_if_block_1$8(ctx) {
+function create_if_block_1$9(ctx) {
 	let svg;
 	let path;
 
@@ -3476,7 +3476,7 @@ function create_if_block_1$8(ctx) {
 }
 
 // (50:4) {#if isIndeterminate}
-function create_if_block$c(ctx) {
+function create_if_block$d(ctx) {
 	let svg;
 	let rect;
 
@@ -3515,8 +3515,8 @@ function create_fragment$m(ctx) {
 	let dispose;
 
 	function select_block_type(ctx, dirty) {
-		if (/*isIndeterminate*/ ctx[5]) return create_if_block$c;
-		if (/*isChecked*/ ctx[4]) return create_if_block_1$8;
+		if (/*isIndeterminate*/ ctx[5]) return create_if_block$d;
+		if (/*isChecked*/ ctx[4]) return create_if_block_1$9;
 	}
 
 	let current_block_type = select_block_type(ctx);
@@ -3825,7 +3825,7 @@ customElements.define("goa-checkbox", Checkbox);
 
 /* libs/web-components/src/components/chip/Chip.svelte generated by Svelte v3.44.3 */
 
-function create_if_block_1$7(ctx) {
+function create_if_block_1$8(ctx) {
 	let goa_icon;
 
 	return {
@@ -3850,7 +3850,7 @@ function create_if_block_1$7(ctx) {
 }
 
 // (26:2) {#if _deletable}
-function create_if_block$b(ctx) {
+function create_if_block$c(ctx) {
 	let goa_icon;
 	let mounted;
 	let dispose;
@@ -3887,8 +3887,8 @@ function create_fragment$l(ctx) {
 	let t0;
 	let t1;
 	let t2;
-	let if_block0 = /*leadingicon*/ ctx[0] && create_if_block_1$7(ctx);
-	let if_block1 = /*_deletable*/ ctx[2] && create_if_block$b();
+	let if_block0 = /*leadingicon*/ ctx[0] && create_if_block_1$8(ctx);
+	let if_block1 = /*_deletable*/ ctx[2] && create_if_block$c();
 
 	return {
 		c() {
@@ -3915,7 +3915,7 @@ function create_fragment$l(ctx) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_1$7(ctx);
+					if_block0 = create_if_block_1$8(ctx);
 					if_block0.c();
 					if_block0.m(div, t0);
 				}
@@ -3930,7 +3930,7 @@ function create_fragment$l(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block$b();
+					if_block1 = create_if_block$c();
 					if_block1.c();
 					if_block1.m(div, null);
 				}
@@ -4197,7 +4197,7 @@ function get_each_context$1(ctx, list, i) {
 }
 
 // (144:2) {#if isMenuVisible}
-function create_if_block$a(ctx) {
+function create_if_block$b(ctx) {
 	let div;
 	let div_data_testid_value;
 	let mounted;
@@ -4317,7 +4317,7 @@ function create_fragment$j(ctx) {
 	let ul_style_value;
 	let mounted;
 	let dispose;
-	let if_block = /*isMenuVisible*/ ctx[10] && create_if_block$a(ctx);
+	let if_block = /*isMenuVisible*/ ctx[10] && create_if_block$b(ctx);
 	let each_value = /*options*/ ctx[8];
 	const get_key = ctx => /*option*/ ctx[32].value;
 
@@ -4391,7 +4391,7 @@ function create_fragment$j(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$a(ctx);
+					if_block = create_if_block$b(ctx);
 					if_block.c();
 					if_block.m(div1, t0);
 				}
@@ -5027,11 +5027,11 @@ customElements.define("goa-flex-row", FlexRow);
 
 /* libs/web-components/src/components/form-item/FormItem.svelte generated by Svelte v3.44.3 */
 
-function create_if_block_2$4(ctx) {
+function create_if_block_2$5(ctx) {
 	let label_1;
 	let t0;
 	let t1;
-	let if_block = /*isOptional*/ ctx[3] && create_if_block_3$3();
+	let if_block = /*isOptional*/ ctx[3] && create_if_block_3$4();
 
 	return {
 		c() {
@@ -5052,7 +5052,7 @@ function create_if_block_2$4(ctx) {
 
 			if (/*isOptional*/ ctx[3]) {
 				if (if_block) ; else {
-					if_block = create_if_block_3$3();
+					if_block = create_if_block_3$4();
 					if_block.c();
 					if_block.m(label_1, null);
 				}
@@ -5069,7 +5069,7 @@ function create_if_block_2$4(ctx) {
 }
 
 // (18:6) {#if isOptional}
-function create_if_block_3$3(ctx) {
+function create_if_block_3$4(ctx) {
 	let em;
 
 	return {
@@ -5087,7 +5087,7 @@ function create_if_block_3$3(ctx) {
 }
 
 // (26:2) {#if error}
-function create_if_block_1$6(ctx) {
+function create_if_block_1$7(ctx) {
 	let div;
 	let t;
 
@@ -5111,7 +5111,7 @@ function create_if_block_1$6(ctx) {
 }
 
 // (29:2) {#if helptext}
-function create_if_block$9(ctx) {
+function create_if_block$a(ctx) {
 	let div;
 	let t;
 
@@ -5140,9 +5140,9 @@ function create_fragment$g(ctx) {
 	let div0;
 	let t1;
 	let t2;
-	let if_block0 = /*label*/ ctx[0] && create_if_block_2$4(ctx);
-	let if_block1 = /*error*/ ctx[2] && create_if_block_1$6(ctx);
-	let if_block2 = /*helptext*/ ctx[1] && create_if_block$9(ctx);
+	let if_block0 = /*label*/ ctx[0] && create_if_block_2$5(ctx);
+	let if_block1 = /*error*/ ctx[2] && create_if_block_1$7(ctx);
+	let if_block2 = /*helptext*/ ctx[1] && create_if_block$a(ctx);
 
 	return {
 		c() {
@@ -5174,7 +5174,7 @@ function create_fragment$g(ctx) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_2$4(ctx);
+					if_block0 = create_if_block_2$5(ctx);
 					if_block0.c();
 					if_block0.m(div1, t0);
 				}
@@ -5187,7 +5187,7 @@ function create_fragment$g(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block_1$6(ctx);
+					if_block1 = create_if_block_1$7(ctx);
 					if_block1.c();
 					if_block1.m(div1, t2);
 				}
@@ -5200,7 +5200,7 @@ function create_fragment$g(ctx) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
-					if_block2 = create_if_block$9(ctx);
+					if_block2 = create_if_block$a(ctx);
 					if_block2.c();
 					if_block2.m(div1, null);
 				}
@@ -5452,7 +5452,7 @@ customElements.define("goa-hero-banner", HeroBanner);
 
 /* libs/web-components/src/components/icon/Icon.svelte generated by Svelte v3.44.3 */
 
-function create_if_block$8(ctx) {
+function create_if_block$9(ctx) {
 	let ion_icon;
 	let ion_icon_name_value;
 
@@ -5486,7 +5486,7 @@ function create_fragment$e(ctx) {
 	let div;
 	let div_data_testid_value;
 	let div_style_value;
-	let if_block = /*type*/ ctx[0] && create_if_block$8(ctx);
+	let if_block = /*type*/ ctx[0] && create_if_block$9(ctx);
 
 	return {
 		c() {
@@ -5513,7 +5513,7 @@ function create_fragment$e(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(div, null);
 				}
@@ -5959,7 +5959,7 @@ customElements.define("goa-icon-button", IconButton);
 
 /* libs/web-components/src/components/input/Input.svelte generated by Svelte v3.44.3 */
 
-function create_if_block_2$3(ctx) {
+function create_if_block_5(ctx) {
 	let goa_icon;
 
 	return {
@@ -5983,8 +5983,8 @@ function create_if_block_2$3(ctx) {
 	};
 }
 
-// (81:2) {#if trailingicon && !handlesTrailingIconClick}
-function create_if_block_1$5(ctx) {
+// (93:4) {#if trailingicon && !handlesTrailingIconClick}
+function create_if_block_4$1(ctx) {
 	let goa_icon;
 
 	return {
@@ -6009,8 +6009,8 @@ function create_if_block_1$5(ctx) {
 	};
 }
 
-// (85:2) {#if trailingicon && handlesTrailingIconClick}
-function create_if_block$7(ctx) {
+// (103:4) {#if trailingicon && handlesTrailingIconClick}
+function create_if_block_3$3(ctx) {
 	let goa_icon_button;
 	let mounted;
 	let dispose;
@@ -6019,7 +6019,7 @@ function create_if_block$7(ctx) {
 		c() {
 			goa_icon_button = element("goa-icon-button");
 			set_custom_element_data(goa_icon_button, "class", "goa-input-trailing-icon");
-			set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[10]);
+			set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[12]);
 			set_custom_element_data(goa_icon_button, "variant", "nocolor");
 			set_custom_element_data(goa_icon_button, "size", "medium");
 			set_custom_element_data(goa_icon_button, "type", /*trailingicon*/ ctx[5]);
@@ -6034,8 +6034,8 @@ function create_if_block$7(ctx) {
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty & /*isDisabled*/ 1024) {
-				set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[10]);
+			if (dirty & /*isDisabled*/ 4096) {
+				set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[12]);
 			}
 
 			if (dirty & /*trailingicon*/ 32) {
@@ -6050,25 +6050,133 @@ function create_if_block$7(ctx) {
 	};
 }
 
-function create_fragment$c(ctx) {
+// (117:2) {#if showCounter}
+function create_if_block$8(ctx) {
+	let if_block_anchor;
+
+	function select_block_type(ctx, dirty) {
+		if (/*maxcharcount*/ ctx[9] > 0) return create_if_block_1$6;
+		if (/*value*/ ctx[0].length > 0) return create_if_block_2$4;
+	}
+
+	let current_block_type = select_block_type(ctx);
+	let if_block = current_block_type && current_block_type(ctx);
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
+		},
+		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(if_block_anchor.parentNode, if_block_anchor);
+				}
+			}
+		},
+		d(detaching) {
+			if (if_block) {
+				if_block.d(detaching);
+			}
+
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+
+// (122:31) 
+function create_if_block_2$4(ctx) {
 	let div;
+	let t_value = /*value*/ ctx[0].length + "";
+	let t;
+
+	return {
+		c() {
+			div = element("div");
+			t = text(t_value);
+			attr(div, "class", "counter");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*value*/ 1 && t_value !== (t_value = /*value*/ ctx[0].length + "")) set_data(t, t_value);
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+// (118:4) {#if maxcharcount > 0}
+function create_if_block_1$6(ctx) {
+	let div;
+	let t0_value = /*value*/ ctx[0].length + "";
+	let t0;
+	let t1_value = `/${/*maxcharcount*/ ctx[9]}` + "";
+	let t1;
+
+	return {
+		c() {
+			div = element("div");
+			t0 = text(t0_value);
+			t1 = text(t1_value);
+			attr(div, "class", "counter");
+			toggle_class(div, "counter-error", /*value*/ ctx[0].length > /*maxcharcount*/ ctx[9]);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, t0);
+			append(div, t1);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*value*/ 1 && t0_value !== (t0_value = /*value*/ ctx[0].length + "")) set_data(t0, t0_value);
+			if (dirty & /*maxcharcount*/ 512 && t1_value !== (t1_value = `/${/*maxcharcount*/ ctx[9]}` + "")) set_data(t1, t1_value);
+
+			if (dirty & /*value, maxcharcount*/ 513) {
+				toggle_class(div, "counter-error", /*value*/ ctx[0].length > /*maxcharcount*/ ctx[9]);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+function create_fragment$c(ctx) {
+	let div1;
+	let div0;
 	let t0;
 	let input;
 	let input_class_value;
 	let input_style_value;
 	let t1;
 	let t2;
-	let div_style_value;
-	let div_class_value;
+	let div0_class_value;
+	let t3;
+	let div1_style_value;
 	let mounted;
 	let dispose;
-	let if_block0 = /*leadingicon*/ ctx[4] && create_if_block_2$3(ctx);
-	let if_block1 = /*trailingicon*/ ctx[5] && !/*handlesTrailingIconClick*/ ctx[13] && create_if_block_1$5(ctx);
-	let if_block2 = /*trailingicon*/ ctx[5] && /*handlesTrailingIconClick*/ ctx[13] && create_if_block$7(ctx);
+	let if_block0 = /*leadingicon*/ ctx[4] && create_if_block_5(ctx);
+	let if_block1 = /*trailingicon*/ ctx[5] && !/*handlesTrailingIconClick*/ ctx[15] && create_if_block_4$1(ctx);
+	let if_block2 = /*trailingicon*/ ctx[5] && /*handlesTrailingIconClick*/ ctx[15] && create_if_block_3$3(ctx);
+	let if_block3 = /*showCounter*/ ctx[11] && create_if_block$8(ctx);
 
 	return {
 		c() {
-			div = element("div");
+			div1 = element("div");
+			div0 = element("div");
 			if (if_block0) if_block0.c();
 			t0 = space();
 			input = element("input");
@@ -6076,45 +6184,51 @@ function create_fragment$c(ctx) {
 			if (if_block1) if_block1.c();
 			t2 = space();
 			if (if_block2) if_block2.c();
+			t3 = space();
+			if (if_block3) if_block3.c();
 			this.c = noop;
 			attr(input, "class", input_class_value = `input--${/*variant*/ ctx[6]}`);
 			attr(input, "style", input_style_value = `--search-icon-offset: ${/*trailingicon*/ ctx[5] ? "-0.5rem" : "0"}`);
-			input.readOnly = /*isReadonly*/ ctx[12];
-			input.disabled = /*isDisabled*/ ctx[10];
+			input.readOnly = /*isReadonly*/ ctx[14];
+			input.disabled = /*isDisabled*/ ctx[12];
 			attr(input, "data-testid", /*testid*/ ctx[7]);
-			attr(input, "name", /*name*/ ctx[1]);
-			attr(input, "type", /*type*/ ctx[0]);
-			input.value = /*value*/ ctx[2];
+			attr(input, "name", /*name*/ ctx[2]);
+			attr(input, "type", /*type*/ ctx[1]);
+			input.value = /*value*/ ctx[0];
 			attr(input, "placeholder", /*placeholder*/ ctx[3]);
 
-			attr(div, "style", div_style_value = `
-    --width: ${/*width*/ ctx[8]};
-  `);
+			attr(div0, "class", div0_class_value = `
+      goa-input
+      ${/*isDisabled*/ ctx[12] ? "goa-input--disabled" : ""}
+      variant--${/*variant*/ ctx[6]}
+      type--${/*type*/ ctx[1]}
+    `);
 
-			attr(div, "class", div_class_value = `
-    goa-input
-    ${/*isDisabled*/ ctx[10] ? "goa-input--disabled" : ""}
-    variant--${/*variant*/ ctx[6]}
-    type--${/*type*/ ctx[0]}
-  `);
+			toggle_class(div0, "error", /*isError*/ ctx[13]);
+			attr(div1, "class", "container");
 
-			toggle_class(div, "error", /*isError*/ ctx[11]);
+			attr(div1, "style", div1_style_value = `
+    --width: ${/*width*/ ctx[8]};
+  `);
 		},
 		m(target, anchor) {
-			insert(target, div, anchor);
-			if (if_block0) if_block0.m(div, null);
-			append(div, t0);
-			append(div, input);
-			/*input_binding*/ ctx[21](input);
-			append(div, t1);
-			if (if_block1) if_block1.m(div, null);
-			append(div, t2);
-			if (if_block2) if_block2.m(div, null);
+			insert(target, div1, anchor);
+			append(div1, div0);
+			if (if_block0) if_block0.m(div0, null);
+			append(div0, t0);
+			append(div0, input);
+			/*input_binding*/ ctx[24](input);
+			append(div0, t1);
+			if (if_block1) if_block1.m(div0, null);
+			append(div0, t2);
+			if (if_block2) if_block2.m(div0, null);
+			append(div1, t3);
+			if (if_block3) if_block3.m(div1, null);
 
 			if (!mounted) {
 				dispose = [
-					listen(input, "keyup", /*onKeyUp*/ ctx[14]),
-					listen(input, "change", /*onKeyUp*/ ctx[14])
+					listen(input, "keyup", /*onKeyUp*/ ctx[16]),
+					listen(input, "change", /*onKeyUp*/ ctx[16])
 				];
 
 				mounted = true;
@@ -6125,9 +6239,9 @@ function create_fragment$c(ctx) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_2$3(ctx);
+					if_block0 = create_if_block_5(ctx);
 					if_block0.c();
-					if_block0.m(div, t0);
+					if_block0.m(div0, t0);
 				}
 			} else if (if_block0) {
 				if_block0.d(1);
@@ -6142,87 +6256,101 @@ function create_fragment$c(ctx) {
 				attr(input, "style", input_style_value);
 			}
 
-			if (dirty & /*isReadonly*/ 4096) {
-				input.readOnly = /*isReadonly*/ ctx[12];
+			if (dirty & /*isReadonly*/ 16384) {
+				input.readOnly = /*isReadonly*/ ctx[14];
 			}
 
-			if (dirty & /*isDisabled*/ 1024) {
-				input.disabled = /*isDisabled*/ ctx[10];
+			if (dirty & /*isDisabled*/ 4096) {
+				input.disabled = /*isDisabled*/ ctx[12];
 			}
 
 			if (dirty & /*testid*/ 128) {
 				attr(input, "data-testid", /*testid*/ ctx[7]);
 			}
 
-			if (dirty & /*name*/ 2) {
-				attr(input, "name", /*name*/ ctx[1]);
+			if (dirty & /*name*/ 4) {
+				attr(input, "name", /*name*/ ctx[2]);
 			}
 
-			if (dirty & /*type*/ 1) {
-				attr(input, "type", /*type*/ ctx[0]);
+			if (dirty & /*type*/ 2) {
+				attr(input, "type", /*type*/ ctx[1]);
 			}
 
-			if (dirty & /*value*/ 4 && input.value !== /*value*/ ctx[2]) {
-				input.value = /*value*/ ctx[2];
+			if (dirty & /*value*/ 1 && input.value !== /*value*/ ctx[0]) {
+				input.value = /*value*/ ctx[0];
 			}
 
 			if (dirty & /*placeholder*/ 8) {
 				attr(input, "placeholder", /*placeholder*/ ctx[3]);
 			}
 
-			if (/*trailingicon*/ ctx[5] && !/*handlesTrailingIconClick*/ ctx[13]) {
+			if (/*trailingicon*/ ctx[5] && !/*handlesTrailingIconClick*/ ctx[15]) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block_1$5(ctx);
+					if_block1 = create_if_block_4$1(ctx);
 					if_block1.c();
-					if_block1.m(div, t2);
+					if_block1.m(div0, t2);
 				}
 			} else if (if_block1) {
 				if_block1.d(1);
 				if_block1 = null;
 			}
 
-			if (/*trailingicon*/ ctx[5] && /*handlesTrailingIconClick*/ ctx[13]) {
+			if (/*trailingicon*/ ctx[5] && /*handlesTrailingIconClick*/ ctx[15]) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
-					if_block2 = create_if_block$7(ctx);
+					if_block2 = create_if_block_3$3(ctx);
 					if_block2.c();
-					if_block2.m(div, null);
+					if_block2.m(div0, null);
 				}
 			} else if (if_block2) {
 				if_block2.d(1);
 				if_block2 = null;
 			}
 
-			if (dirty & /*width*/ 256 && div_style_value !== (div_style_value = `
-    --width: ${/*width*/ ctx[8]};
-  `)) {
-				attr(div, "style", div_style_value);
+			if (dirty & /*isDisabled, variant, type*/ 4162 && div0_class_value !== (div0_class_value = `
+      goa-input
+      ${/*isDisabled*/ ctx[12] ? "goa-input--disabled" : ""}
+      variant--${/*variant*/ ctx[6]}
+      type--${/*type*/ ctx[1]}
+    `)) {
+				attr(div0, "class", div0_class_value);
 			}
 
-			if (dirty & /*isDisabled, variant, type*/ 1089 && div_class_value !== (div_class_value = `
-    goa-input
-    ${/*isDisabled*/ ctx[10] ? "goa-input--disabled" : ""}
-    variant--${/*variant*/ ctx[6]}
-    type--${/*type*/ ctx[0]}
-  `)) {
-				attr(div, "class", div_class_value);
+			if (dirty & /*isDisabled, variant, type, isError*/ 12354) {
+				toggle_class(div0, "error", /*isError*/ ctx[13]);
 			}
 
-			if (dirty & /*isDisabled, variant, type, isError*/ 3137) {
-				toggle_class(div, "error", /*isError*/ ctx[11]);
+			if (/*showCounter*/ ctx[11]) {
+				if (if_block3) {
+					if_block3.p(ctx, dirty);
+				} else {
+					if_block3 = create_if_block$8(ctx);
+					if_block3.c();
+					if_block3.m(div1, null);
+				}
+			} else if (if_block3) {
+				if_block3.d(1);
+				if_block3 = null;
+			}
+
+			if (dirty & /*width*/ 256 && div1_style_value !== (div1_style_value = `
+    --width: ${/*width*/ ctx[8]};
+  `)) {
+				attr(div1, "style", div1_style_value);
 			}
 		},
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(div);
+			if (detaching) detach(div1);
 			if (if_block0) if_block0.d();
-			/*input_binding*/ ctx[21](null);
+			/*input_binding*/ ctx[24](null);
 			if (if_block1) if_block1.d();
 			if (if_block2) if_block2.d();
+			if (if_block3) if_block3.d();
 			mounted = false;
 			run_all(dispose);
 		}
@@ -6239,6 +6367,7 @@ function instance$b($$self, $$props, $$invalidate) {
 	let isReadonly;
 	let isError;
 	let isDisabled;
+	let showCounter;
 	let { type = "text" } = $$props;
 	let { name = "" } = $$props;
 	let { value = "" } = $$props;
@@ -6253,6 +6382,8 @@ function instance$b($$self, $$props, $$invalidate) {
 	let { error = "false" } = $$props;
 	let { testid = "" } = $$props;
 	let { width = "30ch" } = $$props;
+	let { showcounter = "false" } = $$props;
+	let { maxcharcount = 0 } = $$props;
 	let inputEl;
 
 	function onKeyUp(e) {
@@ -6264,61 +6395,67 @@ function instance$b($$self, $$props, $$invalidate) {
 				detail: { name, value: e.target.value }
 			}));
 
-		e.stopPropagation();
+		$$invalidate(0, value = e.target.value);
 	}
 
 	function input_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			inputEl = $$value;
-			$$invalidate(9, inputEl);
+			$$invalidate(10, inputEl);
 		});
 	}
 
 	$$self.$$set = $$props => {
-		if ('type' in $$props) $$invalidate(0, type = $$props.type);
-		if ('name' in $$props) $$invalidate(1, name = $$props.name);
-		if ('value' in $$props) $$invalidate(2, value = $$props.value);
+		if ('type' in $$props) $$invalidate(1, type = $$props.type);
+		if ('name' in $$props) $$invalidate(2, name = $$props.name);
+		if ('value' in $$props) $$invalidate(0, value = $$props.value);
 		if ('placeholder' in $$props) $$invalidate(3, placeholder = $$props.placeholder);
 		if ('leadingicon' in $$props) $$invalidate(4, leadingicon = $$props.leadingicon);
 		if ('trailingicon' in $$props) $$invalidate(5, trailingicon = $$props.trailingicon);
 		if ('variant' in $$props) $$invalidate(6, variant = $$props.variant);
-		if ('disabled' in $$props) $$invalidate(15, disabled = $$props.disabled);
-		if ('handletrailingiconclick' in $$props) $$invalidate(16, handletrailingiconclick = $$props.handletrailingiconclick);
-		if ('focused' in $$props) $$invalidate(17, focused = $$props.focused);
-		if ('readonly' in $$props) $$invalidate(18, readonly = $$props.readonly);
-		if ('error' in $$props) $$invalidate(19, error = $$props.error);
+		if ('disabled' in $$props) $$invalidate(17, disabled = $$props.disabled);
+		if ('handletrailingiconclick' in $$props) $$invalidate(18, handletrailingiconclick = $$props.handletrailingiconclick);
+		if ('focused' in $$props) $$invalidate(19, focused = $$props.focused);
+		if ('readonly' in $$props) $$invalidate(20, readonly = $$props.readonly);
+		if ('error' in $$props) $$invalidate(21, error = $$props.error);
 		if ('testid' in $$props) $$invalidate(7, testid = $$props.testid);
 		if ('width' in $$props) $$invalidate(8, width = $$props.width);
+		if ('showcounter' in $$props) $$invalidate(22, showcounter = $$props.showcounter);
+		if ('maxcharcount' in $$props) $$invalidate(9, maxcharcount = $$props.maxcharcount);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*handletrailingiconclick*/ 65536) {
-			$$invalidate(13, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
+		if ($$self.$$.dirty & /*handletrailingiconclick*/ 262144) {
+			$$invalidate(15, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
+		}
+
+		if ($$self.$$.dirty & /*focused*/ 524288) {
+			$$invalidate(23, isFocused = toBoolean(focused));
 		}
 
-		if ($$self.$$.dirty & /*focused*/ 131072) {
-			$$invalidate(20, isFocused = toBoolean(focused));
+		if ($$self.$$.dirty & /*readonly*/ 1048576) {
+			$$invalidate(14, isReadonly = toBoolean(readonly));
 		}
 
-		if ($$self.$$.dirty & /*readonly*/ 262144) {
-			$$invalidate(12, isReadonly = toBoolean(readonly));
+		if ($$self.$$.dirty & /*error*/ 2097152) {
+			$$invalidate(13, isError = toBoolean(error));
 		}
 
-		if ($$self.$$.dirty & /*error*/ 524288) {
-			$$invalidate(11, isError = toBoolean(error));
+		if ($$self.$$.dirty & /*disabled*/ 131072) {
+			$$invalidate(12, isDisabled = toBoolean(disabled));
 		}
 
-		if ($$self.$$.dirty & /*disabled*/ 32768) {
-			$$invalidate(10, isDisabled = toBoolean(disabled));
+		if ($$self.$$.dirty & /*showcounter*/ 4194304) {
+			$$invalidate(11, showCounter = toBoolean(showcounter));
 		}
 
-		if ($$self.$$.dirty & /*isFocused, inputEl*/ 1049088) {
+		if ($$self.$$.dirty & /*isFocused, inputEl*/ 8389632) {
 			if (isFocused && inputEl) {
 				setTimeout(() => inputEl.focus(), 1);
 			}
 		}
 
-		if ($$self.$$.dirty & /*inputEl, type*/ 513) {
+		if ($$self.$$.dirty & /*inputEl, type*/ 1026) {
 			if (inputEl && type === "search") {
 				inputEl.addEventListener("search", e => {
 					onKeyUp(e);
@@ -6328,16 +6465,18 @@ function instance$b($$self, $$props, $$invalidate) {
 	};
 
 	return [
+		value,
 		type,
 		name,
-		value,
 		placeholder,
 		leadingicon,
 		trailingicon,
 		variant,
 		testid,
 		width,
+		maxcharcount,
 		inputEl,
+		showCounter,
 		isDisabled,
 		isError,
 		isReadonly,
@@ -6348,6 +6487,7 @@ function instance$b($$self, $$props, $$invalidate) {
 		focused,
 		readonly,
 		error,
+		showcounter,
 		isFocused,
 		input_binding
 	];
@@ -6356,7 +6496,9 @@ function instance$b($$self, $$props, $$invalidate) {
 class Input extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);background:white;display:inline-flex;align-items:center;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}@media(min-width: 640px){.goa-input{min-width:0;width:var(--width)}}.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{display:flex;align-items:center;margin-left:0.5rem}.goa-input-trailing-icon{display:flex;align-items:center;margin-right:0.5rem}.goa-input-trailing-icon>.goa-icon-button{margin-right:-0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}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>`;
+
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.container{position:relative;width:100%}@media(min-width: 640px){.container{max-width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);background:white;display:inline-flex;align-items:center;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}@media(min-width: 640px){.goa-input{min-width:0;width:var(--width)}}.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{display:flex;align-items:center;margin-left:0.5rem}.goa-input-trailing-icon{display:flex;align-items:center;margin-right:0.5rem}.goa-input-trailing-icon>.goa-icon-button{margin-right:-0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}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}.counter{position:absolute;padding-top:0.25rem;right:0;font-size:var(--fs-sm)}.counter-error{color:var(--goa-color-interactive--error)}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
+      center center no-repeat}</style>`;
 
 		init(
 			this,
@@ -6369,20 +6511,22 @@ class Input extends SvelteElement {
 			create_fragment$c,
 			safe_not_equal,
 			{
-				type: 0,
-				name: 1,
-				value: 2,
+				type: 1,
+				name: 2,
+				value: 0,
 				placeholder: 3,
 				leadingicon: 4,
 				trailingicon: 5,
 				variant: 6,
-				disabled: 15,
-				handletrailingiconclick: 16,
-				focused: 17,
-				readonly: 18,
-				error: 19,
+				disabled: 17,
+				handletrailingiconclick: 18,
+				focused: 19,
+				readonly: 20,
+				error: 21,
 				testid: 7,
-				width: 8
+				width: 8,
+				showcounter: 22,
+				maxcharcount: 9
 			},
 			null
 		);
@@ -6414,12 +6558,14 @@ class Input extends SvelteElement {
 			"readonly",
 			"error",
 			"testid",
-			"width"
+			"width",
+			"showcounter",
+			"maxcharcount"
 		];
 	}
 
 	get type() {
-		return this.$$.ctx[0];
+		return this.$$.ctx[1];
 	}
 
 	set type(type) {
@@ -6428,7 +6574,7 @@ class Input extends SvelteElement {
 	}
 
 	get name() {
-		return this.$$.ctx[1];
+		return this.$$.ctx[2];
 	}
 
 	set name(name) {
@@ -6437,7 +6583,7 @@ class Input extends SvelteElement {
 	}
 
 	get value() {
-		return this.$$.ctx[2];
+		return this.$$.ctx[0];
 	}
 
 	set value(value) {
@@ -6482,7 +6628,7 @@ class Input extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[15];
+		return this.$$.ctx[17];
 	}
 
 	set disabled(disabled) {
@@ -6491,7 +6637,7 @@ class Input extends SvelteElement {
 	}
 
 	get handletrailingiconclick() {
-		return this.$$.ctx[16];
+		return this.$$.ctx[18];
 	}
 
 	set handletrailingiconclick(handletrailingiconclick) {
@@ -6500,7 +6646,7 @@ class Input extends SvelteElement {
 	}
 
 	get focused() {
-		return this.$$.ctx[17];
+		return this.$$.ctx[19];
 	}
 
 	set focused(focused) {
@@ -6509,7 +6655,7 @@ class Input extends SvelteElement {
 	}
 
 	get readonly() {
-		return this.$$.ctx[18];
+		return this.$$.ctx[20];
 	}
 
 	set readonly(readonly) {
@@ -6518,7 +6664,7 @@ class Input extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[19];
+		return this.$$.ctx[21];
 	}
 
 	set error(error) {
@@ -6543,6 +6689,24 @@ class Input extends SvelteElement {
 		this.$$set({ width });
 		flush();
 	}
+
+	get showcounter() {
+		return this.$$.ctx[22];
+	}
+
+	set showcounter(showcounter) {
+		this.$$set({ showcounter });
+		flush();
+	}
+
+	get maxcharcount() {
+		return this.$$.ctx[9];
+	}
+
+	set maxcharcount(maxcharcount) {
+		this.$$set({ maxcharcount });
+		flush();
+	}
 }
 
 customElements.define("goa-input", Input);
@@ -6624,7 +6788,7 @@ function noScroll(node, opts) {
 
 /* libs/web-components/src/components/modal/Modal.svelte generated by Svelte v3.44.3 */
 
-function create_if_block$6(ctx) {
+function create_if_block$7(ctx) {
 	let div4;
 	let div0;
 	let t0;
@@ -6646,10 +6810,10 @@ function create_if_block$6(ctx) {
 	let mounted;
 	let dispose;
 	let if_block0 = /*heading*/ ctx[0] && create_if_block_3$2(ctx);
-	let if_block1 = /*isClosable*/ ctx[4] && create_if_block_2$2(ctx);
+	let if_block1 = /*isClosable*/ ctx[4] && create_if_block_2$3(ctx);
 
 	function select_block_type(ctx, dirty) {
-		if (/*isScrollable*/ ctx[5]) return create_if_block_1$4;
+		if (/*isScrollable*/ ctx[5]) return create_if_block_1$5;
 		return create_else_block$1;
 	}
 
@@ -6728,7 +6892,7 @@ function create_if_block$6(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block_2$2(ctx);
+					if_block1 = create_if_block_2$3(ctx);
 					if_block1.c();
 					if_block1.m(div3, t2);
 				}
@@ -6816,7 +6980,7 @@ function create_if_block_3$2(ctx) {
 }
 
 // (57:6) {#if isClosable}
-function create_if_block_2$2(ctx) {
+function create_if_block_2$3(ctx) {
 	let div;
 	let goa_icon_button;
 	let mounted;
@@ -6868,7 +7032,7 @@ function create_else_block$1(ctx) {
 }
 
 // (67:8) {#if isScrollable}
-function create_if_block_1$4(ctx) {
+function create_if_block_1$5(ctx) {
 	let goa_scrollable;
 
 	return {
@@ -6891,7 +7055,7 @@ function create_if_block_1$4(ctx) {
 function create_fragment$b(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*isOpen*/ ctx[2] && create_if_block$6(ctx);
+	let if_block = /*isOpen*/ ctx[2] && create_if_block$7(ctx);
 
 	return {
 		c() {
@@ -6913,7 +7077,7 @@ function create_fragment$b(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$6(ctx);
+					if_block = create_if_block$7(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -7099,7 +7263,7 @@ customElements.define("goa-modal", Modal);
 
 /* libs/web-components/src/components/notification/Notification.svelte generated by Svelte v3.44.3 */
 
-function create_if_block$5(ctx) {
+function create_if_block$6(ctx) {
 	let div3;
 	let div0;
 	let goa_icon;
@@ -7186,7 +7350,7 @@ function create_if_block$5(ctx) {
 function create_fragment$a(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*show*/ ctx[1] && create_if_block$5(ctx);
+	let if_block = /*show*/ ctx[1] && create_if_block$6(ctx);
 
 	return {
 		c() {
@@ -7208,7 +7372,7 @@ function create_fragment$a(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$5(ctx);
+					if_block = create_if_block$6(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -7369,12 +7533,12 @@ customElements.define("goa-page-layout", PageLayout);
 
 /* libs/web-components/src/components/circular-progress/CircularProgress.svelte generated by Svelte v3.44.3 */
 
-function create_if_block$4(ctx) {
+function create_if_block$5(ctx) {
 	let current_block_type_index;
 	let if_block;
 	let if_block_anchor;
 	let current;
-	const if_block_creators = [create_if_block_1$3, create_if_block_3$1];
+	const if_block_creators = [create_if_block_1$4, create_if_block_3$1];
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
@@ -7526,7 +7690,7 @@ function create_if_block_3$1(ctx) {
 }
 
 // (24:2) {#if fullscreen}
-function create_if_block_1$3(ctx) {
+function create_if_block_1$4(ctx) {
 	let div;
 	let goa_spinner;
 	let goa_spinner_progress_value;
@@ -7535,7 +7699,7 @@ function create_if_block_1$3(ctx) {
 	let current;
 	let mounted;
 	let dispose;
-	let if_block = /*message*/ ctx[1] && create_if_block_2$1(ctx);
+	let if_block = /*message*/ ctx[1] && create_if_block_2$2(ctx);
 
 	return {
 		c() {
@@ -7577,7 +7741,7 @@ function create_if_block_1$3(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block_2$1(ctx);
+					if_block = create_if_block_2$2(ctx);
 					if_block.c();
 					if_block.m(div, null);
 				}
@@ -7640,7 +7804,7 @@ function create_if_block_4(ctx) {
 }
 
 // (31:6) {#if message}
-function create_if_block_2$1(ctx) {
+function create_if_block_2$2(ctx) {
 	let div;
 	let t;
 
@@ -7666,7 +7830,7 @@ function create_if_block_2$1(ctx) {
 function create_fragment$8(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*ready*/ ctx[3] && create_if_block$4(ctx);
+	let if_block = /*ready*/ ctx[3] && create_if_block$5(ctx);
 
 	return {
 		c() {
@@ -7688,7 +7852,7 @@ function create_fragment$8(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$4(ctx);
+					if_block = create_if_block$5(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -8516,7 +8680,7 @@ function create_if_block_3(ctx) {
 }
 
 // (42:2) {#if ["alpha", "beta"].includes(level)}
-function create_if_block_1$2(ctx) {
+function create_if_block_1$3(ctx) {
 	let div0;
 	let t0_value = capitalize(/*level*/ ctx[0]) + "";
 	let t0;
@@ -8526,7 +8690,7 @@ function create_if_block_1$2(ctx) {
 	let t2;
 	let a;
 	let t4;
-	let if_block = /*feedbackurl*/ ctx[2] && create_if_block_2(ctx);
+	let if_block = /*feedbackurl*/ ctx[2] && create_if_block_2$1(ctx);
 
 	return {
 		c() {
@@ -8566,7 +8730,7 @@ function create_if_block_1$2(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block_2(ctx);
+					if_block = create_if_block_2$1(ctx);
 					if_block.c();
 					if_block.m(div1, null);
 				}
@@ -8585,7 +8749,7 @@ function create_if_block_1$2(ctx) {
 }
 
 // (52:6) {#if feedbackurl}
-function create_if_block_2(ctx) {
+function create_if_block_2$1(ctx) {
 	let span;
 	let t0;
 	let a;
@@ -8618,7 +8782,7 @@ function create_if_block_2(ctx) {
 }
 
 // (60:2) {#if version}
-function create_if_block$3(ctx) {
+function create_if_block$4(ctx) {
 	let div;
 	let t;
 
@@ -8650,8 +8814,8 @@ function create_fragment$4(ctx) {
 	let div;
 	let t2;
 	let if_block0 = /*level*/ ctx[0] === "live" && create_if_block_3();
-	let if_block1 = show_if && create_if_block_1$2(ctx);
-	let if_block2 = /*version*/ ctx[1] && create_if_block$3(ctx);
+	let if_block1 = show_if && create_if_block_1$3(ctx);
+	let if_block2 = /*version*/ ctx[1] && create_if_block$4(ctx);
 
 	return {
 		c() {
@@ -8695,7 +8859,7 @@ function create_fragment$4(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block_1$2(ctx);
+					if_block1 = create_if_block_1$3(ctx);
 					if_block1.c();
 					if_block1.m(header, t1);
 				}
@@ -8708,7 +8872,7 @@ function create_fragment$4(ctx) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
-					if_block2 = create_if_block$3(ctx);
+					if_block2 = create_if_block$4(ctx);
 					if_block2.c();
 					if_block2.m(header, null);
 				}
@@ -8840,7 +9004,7 @@ function create_else_block(ctx) {
 }
 
 // (20:29) 
-function create_if_block_1$1(ctx) {
+function create_if_block_1$2(ctx) {
 	let div2;
 	let div0;
 	let skeleton0;
@@ -8930,7 +9094,7 @@ function create_if_block_1$1(ctx) {
 }
 
 // (10:0) {#if type === "card"}
-function create_if_block$2(ctx) {
+function create_if_block$3(ctx) {
 	let div1;
 	let skeleton0;
 	let t0;
@@ -9054,7 +9218,7 @@ function create_fragment$3(ctx) {
 	let if_block;
 	let if_block_anchor;
 	let current;
-	const if_block_creators = [create_if_block$2, create_if_block_1$1, create_else_block];
+	const if_block_creators = [create_if_block$3, create_if_block_1$2, create_else_block];
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
@@ -9300,7 +9464,7 @@ function tweened(value, defaults = {}) {
 
 /* libs/web-components/src/components/spinner/Spinner.svelte generated by Svelte v3.44.3 */
 
-function create_if_block$1(ctx) {
+function create_if_block$2(ctx) {
 	let svg;
 	let circle;
 	let circle_stroke_value;
@@ -9411,7 +9575,7 @@ function create_if_block$1(ctx) {
 
 function create_fragment$2(ctx) {
 	let if_block_anchor;
-	let if_block = /*ready*/ ctx[6] && create_if_block$1(ctx);
+	let if_block = /*ready*/ ctx[6] && create_if_block$2(ctx);
 
 	return {
 		c() {
@@ -9428,7 +9592,7 @@ function create_fragment$2(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$1(ctx);
+					if_block = create_if_block$2(ctx);
 					if_block.c();
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
 				}
@@ -9638,36 +9802,148 @@ customElements.define("goa-spinner", Spinner);
 
 /* libs/web-components/src/components/text-area/TextArea.svelte generated by Svelte v3.44.3 */
 
+function create_if_block$1(ctx) {
+	let if_block_anchor;
+
+	function select_block_type(ctx, dirty) {
+		if (/*maxcharcount*/ ctx[6] > 0) return create_if_block_1$1;
+		if (/*value*/ ctx[1].length > 0) return create_if_block_2;
+	}
+
+	let current_block_type = select_block_type(ctx);
+	let if_block = current_block_type && current_block_type(ctx);
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
+		},
+		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(if_block_anchor.parentNode, if_block_anchor);
+				}
+			}
+		},
+		d(detaching) {
+			if (if_block) {
+				if_block.d(detaching);
+			}
+
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+
+// (61:31) 
+function create_if_block_2(ctx) {
+	let div;
+	let t_value = /*value*/ ctx[1].length + "";
+	let t;
+
+	return {
+		c() {
+			div = element("div");
+			t = text(t_value);
+			attr(div, "class", "counter");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*value*/ 2 && t_value !== (t_value = /*value*/ ctx[1].length + "")) set_data(t, t_value);
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+// (55:4) {#if maxcharcount > 0}
+function create_if_block_1$1(ctx) {
+	let div;
+	let t0_value = /*value*/ ctx[1].length + "";
+	let t0;
+	let t1_value = `/${/*maxcharcount*/ ctx[6]}` + "";
+	let t1;
+
+	return {
+		c() {
+			div = element("div");
+			t0 = text(t0_value);
+			t1 = text(t1_value);
+			attr(div, "class", "counter");
+			toggle_class(div, "counter-error", /*value*/ ctx[1].length > /*maxcharcount*/ ctx[6]);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, t0);
+			append(div, t1);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*value*/ 2 && t0_value !== (t0_value = /*value*/ ctx[1].length + "")) set_data(t0, t0_value);
+			if (dirty & /*maxcharcount*/ 64 && t1_value !== (t1_value = `/${/*maxcharcount*/ ctx[6]}` + "")) set_data(t1, t1_value);
+
+			if (dirty & /*value, maxcharcount*/ 66) {
+				toggle_class(div, "counter-error", /*value*/ ctx[1].length > /*maxcharcount*/ ctx[6]);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
 function create_fragment$1(ctx) {
+	let div;
 	let textarea;
-	let textarea_style_value;
+	let t;
+	let div_style_value;
 	let mounted;
 	let dispose;
+	let if_block = /*showCounter*/ ctx[8] && create_if_block$1(ctx);
 
 	return {
 		c() {
+			div = element("div");
 			textarea = element("textarea");
+			t = space();
+			if (if_block) if_block.c();
 			this.c = noop;
 			attr(textarea, "name", /*name*/ ctx[0]);
 			attr(textarea, "placeholder", /*placeholder*/ ctx[2]);
 			textarea.value = /*value*/ ctx[1];
 			attr(textarea, "rows", /*rows*/ ctx[3]);
+			attr(textarea, "class", "goa-textarea");
+			textarea.disabled = /*isDisabled*/ ctx[7];
+			textarea.readOnly = /*isReadonly*/ ctx[9];
+			attr(textarea, "data-testid", /*testid*/ ctx[4]);
+			toggle_class(textarea, "error", /*isError*/ ctx[10]);
+			attr(div, "class", "container");
 
-			attr(textarea, "style", textarea_style_value = `
+			attr(div, "style", div_style_value = `
     --width: ${/*width*/ ctx[5]};
   `);
-
-			attr(textarea, "class", "goa-textarea");
-			textarea.disabled = /*isDisabled*/ ctx[6];
-			textarea.readOnly = /*isReadonly*/ ctx[7];
-			attr(textarea, "data-testid", /*testid*/ ctx[4]);
-			toggle_class(textarea, "error", /*isError*/ ctx[8]);
 		},
 		m(target, anchor) {
-			insert(target, textarea, anchor);
+			insert(target, div, anchor);
+			append(div, textarea);
+			append(div, t);
+			if (if_block) if_block.m(div, null);
 
 			if (!mounted) {
-				dispose = listen(textarea, "keyup", /*onChange*/ ctx[9]);
+				dispose = listen(textarea, "keyup", /*onChange*/ ctx[11]);
 				mounted = true;
 			}
 		},
@@ -9688,32 +9964,46 @@ function create_fragment$1(ctx) {
 				attr(textarea, "rows", /*rows*/ ctx[3]);
 			}
 
-			if (dirty & /*width*/ 32 && textarea_style_value !== (textarea_style_value = `
-    --width: ${/*width*/ ctx[5]};
-  `)) {
-				attr(textarea, "style", textarea_style_value);
-			}
-
-			if (dirty & /*isDisabled*/ 64) {
-				textarea.disabled = /*isDisabled*/ ctx[6];
+			if (dirty & /*isDisabled*/ 128) {
+				textarea.disabled = /*isDisabled*/ ctx[7];
 			}
 
-			if (dirty & /*isReadonly*/ 128) {
-				textarea.readOnly = /*isReadonly*/ ctx[7];
+			if (dirty & /*isReadonly*/ 512) {
+				textarea.readOnly = /*isReadonly*/ ctx[9];
 			}
 
 			if (dirty & /*testid*/ 16) {
 				attr(textarea, "data-testid", /*testid*/ ctx[4]);
 			}
 
-			if (dirty & /*isError*/ 256) {
-				toggle_class(textarea, "error", /*isError*/ ctx[8]);
+			if (dirty & /*isError*/ 1024) {
+				toggle_class(textarea, "error", /*isError*/ ctx[10]);
+			}
+
+			if (/*showCounter*/ ctx[8]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+				} else {
+					if_block = create_if_block$1(ctx);
+					if_block.c();
+					if_block.m(div, null);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
+
+			if (dirty & /*width*/ 32 && div_style_value !== (div_style_value = `
+    --width: ${/*width*/ ctx[5]};
+  `)) {
+				attr(div, "style", div_style_value);
 			}
 		},
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(textarea);
+			if (detaching) detach(div);
+			if (if_block) if_block.d();
 			mounted = false;
 			dispose();
 		}
@@ -9724,6 +10014,7 @@ function instance$1($$self, $$props, $$invalidate) {
 	let isError;
 	let isDisabled;
 	let isReadonly;
+	let showCounter;
 	let { name } = $$props;
 	let { value = "" } = $$props;
 	let { placeholder = "" } = $$props;
@@ -9733,6 +10024,8 @@ function instance$1($$self, $$props, $$invalidate) {
 	let { error = "false" } = $$props;
 	let { readonly = "false" } = $$props;
 	let { disabled = "false" } = $$props;
+	let { showcounter = "false" } = $$props;
+	let { maxcharcount = 0 } = $$props;
 
 	function onChange(e) {
 		const target = e.target;
@@ -9757,22 +10050,28 @@ function instance$1($$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(10, error = $$props.error);
-		if ('readonly' in $$props) $$invalidate(11, readonly = $$props.readonly);
-		if ('disabled' in $$props) $$invalidate(12, disabled = $$props.disabled);
+		if ('error' in $$props) $$invalidate(12, error = $$props.error);
+		if ('readonly' in $$props) $$invalidate(13, readonly = $$props.readonly);
+		if ('disabled' in $$props) $$invalidate(14, disabled = $$props.disabled);
+		if ('showcounter' in $$props) $$invalidate(15, showcounter = $$props.showcounter);
+		if ('maxcharcount' in $$props) $$invalidate(6, maxcharcount = $$props.maxcharcount);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*error*/ 1024) {
-			$$invalidate(8, isError = toBoolean(error));
+		if ($$self.$$.dirty & /*error*/ 4096) {
+			$$invalidate(10, isError = toBoolean(error));
 		}
 
-		if ($$self.$$.dirty & /*disabled*/ 4096) {
-			$$invalidate(6, isDisabled = toBoolean(disabled));
+		if ($$self.$$.dirty & /*disabled*/ 16384) {
+			$$invalidate(7, isDisabled = toBoolean(disabled));
 		}
 
-		if ($$self.$$.dirty & /*readonly*/ 2048) {
-			$$invalidate(7, isReadonly = toBoolean(readonly));
+		if ($$self.$$.dirty & /*readonly*/ 8192) {
+			$$invalidate(9, isReadonly = toBoolean(readonly));
+		}
+
+		if ($$self.$$.dirty & /*showcounter*/ 32768) {
+			$$invalidate(8, showCounter = toBoolean(showcounter));
 		}
 	};
 
@@ -9783,20 +10082,25 @@ function instance$1($$self, $$props, $$invalidate) {
 		rows,
 		testid,
 		width,
+		maxcharcount,
 		isDisabled,
+		showCounter,
 		isReadonly,
 		isError,
 		onChange,
 		error,
 		readonly,
-		disabled
+		disabled,
+		showcounter
 	];
 }
 
 class TextArea extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-textarea{display:block;width:100%;box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:3px;background:var(--color-white);color:var(--color-black, #ccc);padding:var(--input-padding, 0.5rem);font-size:var(--input-font-size);font-family:var(--font-family);min-width:100%}@media(min-width: 640px){.goa-textarea{min-width:0;width:var(--width)}}.goa-textarea[readonly]{cursor:pointer}.goa-textarea:hover{border-color:var(--goa-color-interactive--hover)}.goa-textarea:active,.goa-textarea:focus,.goa-textarea:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-textarea:disabled{border-color:var(--color-gray-200)}.goa-textarea:disabled:hover{border-color:var(--color-gray-200)}.goa-textarea:disabled:focus,.goa-textarea:disabled:active{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-status-emergency-dark)}</style>`;
+
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.container{position:relative;width:100%}@media(min-width: 640px){.container{max-width:var(--width)}}.goa-textarea{display:block;width:100%;box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:3px;background:var(--color-white);color:var(--color-black, #ccc);padding:var(--input-padding, 0.5rem);font-size:var(--input-font-size);font-family:var(--font-family);min-width:100%}@media(min-width: 640px){.goa-textarea{min-width:0;width:var(--width)}}.goa-textarea[readonly]{cursor:pointer}.goa-textarea:hover{border-color:var(--goa-color-interactive--hover)}.goa-textarea:active,.goa-textarea:focus,.goa-textarea:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-textarea:disabled{border-color:var(--color-gray-200)}.goa-textarea:disabled:hover{border-color:var(--color-gray-200)}.goa-textarea:disabled:focus,.goa-textarea:disabled:active{box-shadow:none}.counter{position:absolute;right:0;padding-top:0.25rem;font-size:var(--fs-sm)}.counter-error{color:var(--goa-color-status-emergency-dark)
+  }.error:hover,.error:focus,.error{border:2px solid var(--goa-color-status-emergency-dark)}</style>`;
 
 		init(
 			this,
@@ -9815,9 +10119,11 @@ class TextArea extends SvelteElement {
 				rows: 3,
 				testid: 4,
 				width: 5,
-				error: 10,
-				readonly: 11,
-				disabled: 12
+				error: 12,
+				readonly: 13,
+				disabled: 14,
+				showcounter: 15,
+				maxcharcount: 6
 			},
 			null
 		);
@@ -9844,7 +10150,9 @@ class TextArea extends SvelteElement {
 			"width",
 			"error",
 			"readonly",
-			"disabled"
+			"disabled",
+			"showcounter",
+			"maxcharcount"
 		];
 	}
 
@@ -9903,7 +10211,7 @@ class TextArea extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[10];
+		return this.$$.ctx[12];
 	}
 
 	set error(error) {
@@ -9912,7 +10220,7 @@ class TextArea extends SvelteElement {
 	}
 
 	get readonly() {
-		return this.$$.ctx[11];
+		return this.$$.ctx[13];
 	}
 
 	set readonly(readonly) {
@@ -9921,13 +10229,31 @@ class TextArea extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[12];
+		return this.$$.ctx[14];
 	}
 
 	set disabled(disabled) {
 		this.$$set({ disabled });
 		flush();
 	}
+
+	get showcounter() {
+		return this.$$.ctx[15];
+	}
+
+	set showcounter(showcounter) {
+		this.$$set({ showcounter });
+		flush();
+	}
+
+	get maxcharcount() {
+		return this.$$.ctx[6];
+	}
+
+	set maxcharcount(maxcharcount) {
+		this.$$set({ maxcharcount });
+		flush();
+	}
 }
 
 customElements.define("goa-textarea", TextArea);