@abgov/web-components 1.0.0-alpha.118 → 1.0.0-alpha.119

package/web-components.es.js

@@ -2557,7 +2557,7 @@ function create_if_block_1$9(ctx) {
 	};
 }
 
-// (51:4) {#if isIndeterminate}
+// (59:4) {#if isIndeterminate}
 function create_if_block$f(ctx) {
 	let svg;
 	let rect;
@@ -2725,16 +2725,24 @@ function instance$t($$self, $$props, $$invalidate) {
 	let { checked } = $$props;
 	let { text = "" } = $$props;
 	let { value = "" } = $$props;
-	let { disabled } = $$props;
-	let { error } = $$props;
+	let { disabled = "false" } = $$props;
+	let { error = "false" } = $$props;
 	let { testid = "" } = $$props;
 
+	// Private
+	let _value;
+
+	onMount(() => {
+		// hold on to the initial value to prevent losing it on check changes
+		_value = value;
+	});
+
 	function onChange(e) {
 		// An empty string is required as setting the second value to `null` caused the data to get
 		// out of sync with the events.
 		const newCheckStatus = !isChecked;
 
-		const _value = newCheckStatus ? `${value || "checked"}` : "";
+		const newValue = newCheckStatus ? `${_value || "checked"}` : "";
 
 		// set the local state
 		$$invalidate(9, checked = fromBoolean(newCheckStatus));
@@ -2745,7 +2753,7 @@ function instance$t($$self, $$props, $$invalidate) {
 				detail: {
 					name,
 					checked: newCheckStatus,
-					value: _value
+					value: newValue
 				}
 			}));
 	}
@@ -2762,6 +2770,7 @@ function instance$t($$self, $$props, $$invalidate) {
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*disabled*/ 1024) {
+			// Binding
 			$$invalidate(7, isDisabled = toBoolean(disabled));
 		}
 
@@ -6032,7 +6041,8 @@ function create_if_block_2$5(ctx) {
 	let div;
 	let t0;
 	let t1;
-	let if_block = /*isOptional*/ ctx[3] && create_if_block_3$3();
+	let show_if = /*requirement*/ ctx[3] && /*REQUIREMENT_TYPES*/ ctx[4].includes(/*requirement*/ ctx[3]);
+	let if_block = show_if && create_if_block_3$3(ctx);
 
 	return {
 		c() {
@@ -6050,10 +6060,13 @@ function create_if_block_2$5(ctx) {
 		},
 		p(ctx, dirty) {
 			if (dirty & /*label*/ 1) set_data(t0, /*label*/ ctx[0]);
+			if (dirty & /*requirement*/ 8) show_if = /*requirement*/ ctx[3] && /*REQUIREMENT_TYPES*/ ctx[4].includes(/*requirement*/ ctx[3]);
 
-			if (/*isOptional*/ ctx[3]) {
-				if (if_block) ; else {
-					if_block = create_if_block_3$3();
+			if (show_if) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+				} else {
+					if_block = create_if_block_3$3(ctx);
 					if_block.c();
 					if_block.m(div, null);
 				}
@@ -6069,17 +6082,28 @@ function create_if_block_2$5(ctx) {
 	};
 }
 
-// (18:6) {#if isOptional}
+// (28:6) {#if requirement && REQUIREMENT_TYPES.includes(requirement)}
 function create_if_block_3$3(ctx) {
 	let em;
+	let t0;
+	let t1;
+	let t2;
 
 	return {
 		c() {
 			em = element("em");
-			em.textContent = "(optional)";
+			t0 = text("(");
+			t1 = text(/*requirement*/ ctx[3]);
+			t2 = text(")");
 		},
 		m(target, anchor) {
 			insert(target, em, anchor);
+			append(em, t0);
+			append(em, t1);
+			append(em, t2);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*requirement*/ 8) set_data(t1, /*requirement*/ ctx[3]);
 		},
 		d(detaching) {
 			if (detaching) detach(em);
@@ -6087,7 +6111,7 @@ function create_if_block_3$3(ctx) {
 	};
 }
 
-// (26:2) {#if error}
+// (36:2) {#if error}
 function create_if_block_1$6(ctx) {
 	let div;
 	let t;
@@ -6111,7 +6135,7 @@ function create_if_block_1$6(ctx) {
 	};
 }
 
-// (29:2) {#if helptext}
+// (39:2) {#if helptext}
 function create_if_block$9(ctx) {
 	let div;
 	let t;
@@ -6222,26 +6246,32 @@ function create_fragment$j(ctx) {
 }
 
 function instance$h($$self, $$props, $$invalidate) {
-	let isOptional;
+	const REQUIREMENT_TYPES = ["optional", "required", ""];
+
+	// type check function
+	function isRequirementType(value) {
+		return REQUIREMENT_TYPES.includes(value);
+	}
+
 	let { label = "" } = $$props;
 	let { helptext = "" } = $$props;
 	let { error = "" } = $$props;
-	let { optional = "false" } = $$props;
+	let { requirement = "" } = $$props;
+
+	onMount(() => {
+		if (!isRequirementType(requirement)) {
+			throw "Invalid requirement type";
+		}
+	});
 
 	$$self.$$set = $$props => {
 		if ('label' in $$props) $$invalidate(0, label = $$props.label);
 		if ('helptext' in $$props) $$invalidate(1, helptext = $$props.helptext);
 		if ('error' in $$props) $$invalidate(2, error = $$props.error);
-		if ('optional' in $$props) $$invalidate(4, optional = $$props.optional);
+		if ('requirement' in $$props) $$invalidate(3, requirement = $$props.requirement);
 	};
 
-	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*optional*/ 16) {
-			$$invalidate(3, isOptional = toBoolean(optional));
-		}
-	};
-
-	return [label, helptext, error, isOptional, optional];
+	return [label, helptext, error, requirement, REQUIREMENT_TYPES];
 }
 
 class FormItem extends SvelteElement {
@@ -6263,7 +6293,7 @@ class FormItem extends SvelteElement {
 				label: 0,
 				helptext: 1,
 				error: 2,
-				optional: 4
+				requirement: 3
 			},
 			null
 		);
@@ -6281,7 +6311,7 @@ class FormItem extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["label", "helptext", "error", "optional"];
+		return ["label", "helptext", "error", "requirement"];
 	}
 
 	get label() {
@@ -6311,12 +6341,12 @@ class FormItem extends SvelteElement {
 		flush();
 	}
 
-	get optional() {
-		return this.$$.ctx[4];
+	get requirement() {
+		return this.$$.ctx[3];
 	}
 
-	set optional(optional) {
-		this.$$set({ optional });
+	set requirement(requirement) {
+		this.$$set({ requirement });
 		flush();
 	}
 }
@@ -7014,7 +7044,7 @@ customElements.define("goa-icon", Icon);
 
 /* libs/web-components/src/components/input/Input.svelte generated by Svelte v3.51.0 */
 
-function create_if_block_7(ctx) {
+function create_if_block_4(ctx) {
 	let div;
 	let t;
 
@@ -7029,7 +7059,7 @@ function create_if_block_7(ctx) {
 			append(div, t);
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*prefix*/ 16384) set_data(t, /*prefix*/ ctx[14]);
+			if (dirty & /*prefix*/ 16384) set_data(t, /*prefix*/ ctx[14]);
 		},
 		d(detaching) {
 			if (detaching) detach(div);
@@ -7037,8 +7067,8 @@ function create_if_block_7(ctx) {
 	};
 }
 
-// (82:4) {#if leadingicon}
-function create_if_block_6(ctx) {
+// (78:4) {#if leadingicon}
+function create_if_block_3$2(ctx) {
 	let goa_icon;
 
 	return {
@@ -7052,7 +7082,7 @@ function create_if_block_6(ctx) {
 			insert(target, goa_icon, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*leadingicon*/ 32) {
+			if (dirty & /*leadingicon*/ 32) {
 				set_custom_element_data(goa_icon, "type", /*leadingicon*/ ctx[5]);
 			}
 		},
@@ -7062,8 +7092,8 @@ function create_if_block_6(ctx) {
 	};
 }
 
-// (112:4) {#if trailingicon && !handlesTrailingIconClick}
-function create_if_block_5(ctx) {
+// (108:4) {#if trailingicon && !handlesTrailingIconClick}
+function create_if_block_2$4(ctx) {
 	let goa_icon;
 
 	return {
@@ -7078,7 +7108,7 @@ function create_if_block_5(ctx) {
 			insert(target, goa_icon, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*trailingicon*/ 64) {
+			if (dirty & /*trailingicon*/ 64) {
 				set_custom_element_data(goa_icon, "type", /*trailingicon*/ ctx[6]);
 			}
 		},
@@ -7088,8 +7118,8 @@ function create_if_block_5(ctx) {
 	};
 }
 
-// (122:4) {#if trailingicon && handlesTrailingIconClick}
-function create_if_block_4(ctx) {
+// (118:4) {#if trailingicon && handlesTrailingIconClick}
+function create_if_block_1$5(ctx) {
 	let goa_icon_button;
 	let mounted;
 	let dispose;
@@ -7097,7 +7127,7 @@ function create_if_block_4(ctx) {
 	return {
 		c() {
 			goa_icon_button = element("goa-icon-button");
-			set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[19]);
+			set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[17]);
 			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, "icon", /*trailingicon*/ ctx[6]);
@@ -7112,11 +7142,11 @@ function create_if_block_4(ctx) {
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*isDisabled*/ 524288) {
-				set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[19]);
+			if (dirty & /*isDisabled*/ 131072) {
+				set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[17]);
 			}
 
-			if (dirty[0] & /*trailingicon*/ 64) {
+			if (dirty & /*trailingicon*/ 64) {
 				set_custom_element_data(goa_icon_button, "icon", /*trailingicon*/ ctx[6]);
 			}
 		},
@@ -7128,8 +7158,8 @@ function create_if_block_4(ctx) {
 	};
 }
 
-// (133:4) {#if suffix}
-function create_if_block_3$2(ctx) {
+// (129:4) {#if suffix}
+function create_if_block$7(ctx) {
 	let span;
 	let t;
 
@@ -7144,7 +7174,7 @@ function create_if_block_3$2(ctx) {
 			append(span, t);
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*suffix*/ 32768) set_data(t, /*suffix*/ ctx[15]);
+			if (dirty & /*suffix*/ 32768) set_data(t, /*suffix*/ ctx[15]);
 		},
 		d(detaching) {
 			if (detaching) detach(span);
@@ -7152,110 +7182,6 @@ function create_if_block_3$2(ctx) {
 	};
 }
 
-// (139:2) {#if showCounter}
-function create_if_block$7(ctx) {
-	let if_block_anchor;
-
-	function select_block_type(ctx, dirty) {
-		if (/*maxcharcount*/ ctx[16] > 0) return create_if_block_1$5;
-		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);
-		}
-	};
-}
-
-// (144: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[0] & /*value*/ 1 && t_value !== (t_value = /*value*/ ctx[0].length + "")) set_data(t, t_value);
-		},
-		d(detaching) {
-			if (detaching) detach(div);
-		}
-	};
-}
-
-// (140:4) {#if maxcharcount > 0}
-function create_if_block_1$5(ctx) {
-	let div;
-	let t0_value = /*value*/ ctx[0].length + "";
-	let t0;
-	let t1_value = `/${/*maxcharcount*/ ctx[16]}` + "";
-	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[16]);
-		},
-		m(target, anchor) {
-			insert(target, div, anchor);
-			append(div, t0);
-			append(div, t1);
-		},
-		p(ctx, dirty) {
-			if (dirty[0] & /*value*/ 1 && t0_value !== (t0_value = /*value*/ ctx[0].length + "")) set_data(t0, t0_value);
-			if (dirty[0] & /*maxcharcount*/ 65536 && t1_value !== (t1_value = `/${/*maxcharcount*/ ctx[16]}` + "")) set_data(t1, t1_value);
-
-			if (dirty[0] & /*value, maxcharcount*/ 65537) {
-				toggle_class(div, "counter-error", /*value*/ ctx[0].length > /*maxcharcount*/ ctx[16]);
-			}
-		},
-		d(detaching) {
-			if (detaching) detach(div);
-		}
-	};
-}
-
 function create_fragment$f(ctx) {
 	let div1;
 	let div0;
@@ -7269,16 +7195,14 @@ function create_fragment$f(ctx) {
 	let t3;
 	let t4;
 	let div0_class_value;
-	let t5;
 	let div1_style_value;
 	let mounted;
 	let dispose;
-	let if_block0 = /*prefix*/ ctx[14] && create_if_block_7(ctx);
-	let if_block1 = /*leadingicon*/ ctx[5] && create_if_block_6(ctx);
-	let if_block2 = /*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[22] && create_if_block_5(ctx);
-	let if_block3 = /*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[22] && create_if_block_4(ctx);
-	let if_block4 = /*suffix*/ ctx[15] && create_if_block_3$2(ctx);
-	let if_block5 = /*showCounter*/ ctx[18] && create_if_block$7(ctx);
+	let if_block0 = /*prefix*/ ctx[14] && create_if_block_4(ctx);
+	let if_block1 = /*leadingicon*/ ctx[5] && create_if_block_3$2(ctx);
+	let if_block2 = /*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[20] && create_if_block_2$4(ctx);
+	let if_block3 = /*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[20] && create_if_block_1$5(ctx);
+	let if_block4 = /*suffix*/ ctx[15] && create_if_block$7(ctx);
 
 	return {
 		c() {
@@ -7295,13 +7219,11 @@ function create_fragment$f(ctx) {
 			if (if_block3) if_block3.c();
 			t4 = space();
 			if (if_block4) if_block4.c();
-			t5 = space();
-			if (if_block5) if_block5.c();
 			this.c = noop;
 			attr(input, "class", input_class_value = `input--${/*variant*/ ctx[7]}`);
 			attr(input, "style", input_style_value = `--search-icon-offset: ${/*trailingicon*/ ctx[6] ? "-0.5rem" : "0"}`);
-			input.readOnly = /*isReadonly*/ ctx[21];
-			input.disabled = /*isDisabled*/ ctx[19];
+			input.readOnly = /*isReadonly*/ ctx[19];
+			input.disabled = /*isDisabled*/ ctx[17];
 			attr(input, "data-testid", /*testid*/ ctx[8]);
 			attr(input, "autocapitalize", /*autocapitalize*/ ctx[3]);
 			attr(input, "name", /*name*/ ctx[2]);
@@ -7316,12 +7238,12 @@ function create_fragment$f(ctx) {
 
 			attr(div0, "class", div0_class_value = `
       goa-input
-      ${/*isDisabled*/ ctx[19] ? "goa-input--disabled" : ""}
+      ${/*isDisabled*/ ctx[17] ? "goa-input--disabled" : ""}
       variant--${/*variant*/ ctx[7]}
       type--${/*type*/ ctx[1]}
     `);
 
-			toggle_class(div0, "error", /*isError*/ ctx[20]);
+			toggle_class(div0, "error", /*isError*/ ctx[18]);
 			attr(div1, "class", "container");
 
 			attr(div1, "style", div1_style_value = `
@@ -7336,31 +7258,29 @@ function create_fragment$f(ctx) {
 			if (if_block1) if_block1.m(div0, null);
 			append(div0, t1);
 			append(div0, input);
-			/*input_binding*/ ctx[31](input);
+			/*input_binding*/ ctx[28](input);
 			append(div0, t2);
 			if (if_block2) if_block2.m(div0, null);
 			append(div0, t3);
 			if (if_block3) if_block3.m(div0, null);
 			append(div0, t4);
 			if (if_block4) if_block4.m(div0, null);
-			append(div1, t5);
-			if (if_block5) if_block5.m(div1, null);
 
 			if (!mounted) {
 				dispose = [
-					listen(input, "keyup", /*onKeyUp*/ ctx[23]),
-					listen(input, "change", /*onKeyUp*/ ctx[23])
+					listen(input, "keyup", /*onKeyUp*/ ctx[21]),
+					listen(input, "change", /*onKeyUp*/ ctx[21])
 				];
 
 				mounted = true;
 			}
 		},
-		p(ctx, dirty) {
+		p(ctx, [dirty]) {
 			if (/*prefix*/ ctx[14]) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_7(ctx);
+					if_block0 = create_if_block_4(ctx);
 					if_block0.c();
 					if_block0.m(div0, t0);
 				}
@@ -7373,7 +7293,7 @@ function create_fragment$f(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block_6(ctx);
+					if_block1 = create_if_block_3$2(ctx);
 					if_block1.c();
 					if_block1.m(div0, t1);
 				}
@@ -7382,67 +7302,67 @@ function create_fragment$f(ctx) {
 				if_block1 = null;
 			}
 
-			if (dirty[0] & /*variant*/ 128 && input_class_value !== (input_class_value = `input--${/*variant*/ ctx[7]}`)) {
+			if (dirty & /*variant*/ 128 && input_class_value !== (input_class_value = `input--${/*variant*/ ctx[7]}`)) {
 				attr(input, "class", input_class_value);
 			}
 
-			if (dirty[0] & /*trailingicon*/ 64 && input_style_value !== (input_style_value = `--search-icon-offset: ${/*trailingicon*/ ctx[6] ? "-0.5rem" : "0"}`)) {
+			if (dirty & /*trailingicon*/ 64 && input_style_value !== (input_style_value = `--search-icon-offset: ${/*trailingicon*/ ctx[6] ? "-0.5rem" : "0"}`)) {
 				attr(input, "style", input_style_value);
 			}
 
-			if (dirty[0] & /*isReadonly*/ 2097152) {
-				input.readOnly = /*isReadonly*/ ctx[21];
+			if (dirty & /*isReadonly*/ 524288) {
+				input.readOnly = /*isReadonly*/ ctx[19];
 			}
 
-			if (dirty[0] & /*isDisabled*/ 524288) {
-				input.disabled = /*isDisabled*/ ctx[19];
+			if (dirty & /*isDisabled*/ 131072) {
+				input.disabled = /*isDisabled*/ ctx[17];
 			}
 
-			if (dirty[0] & /*testid*/ 256) {
+			if (dirty & /*testid*/ 256) {
 				attr(input, "data-testid", /*testid*/ ctx[8]);
 			}
 
-			if (dirty[0] & /*autocapitalize*/ 8) {
+			if (dirty & /*autocapitalize*/ 8) {
 				attr(input, "autocapitalize", /*autocapitalize*/ ctx[3]);
 			}
 
-			if (dirty[0] & /*name*/ 4) {
+			if (dirty & /*name*/ 4) {
 				attr(input, "name", /*name*/ ctx[2]);
 			}
 
-			if (dirty[0] & /*type*/ 2) {
+			if (dirty & /*type*/ 2) {
 				attr(input, "type", /*type*/ ctx[1]);
 			}
 
-			if (dirty[0] & /*value*/ 1 && input.value !== /*value*/ ctx[0]) {
+			if (dirty & /*value*/ 1 && input.value !== /*value*/ ctx[0]) {
 				input.value = /*value*/ ctx[0];
 			}
 
-			if (dirty[0] & /*placeholder*/ 16) {
+			if (dirty & /*placeholder*/ 16) {
 				attr(input, "placeholder", /*placeholder*/ ctx[4]);
 			}
 
-			if (dirty[0] & /*min*/ 2048) {
+			if (dirty & /*min*/ 2048) {
 				attr(input, "min", /*min*/ ctx[11]);
 			}
 
-			if (dirty[0] & /*max*/ 4096) {
+			if (dirty & /*max*/ 4096) {
 				attr(input, "max", /*max*/ ctx[12]);
 			}
 
-			if (dirty[0] & /*step*/ 8192) {
+			if (dirty & /*step*/ 8192) {
 				attr(input, "step", /*step*/ ctx[13]);
 			}
 
-			if (dirty[0] & /*arialabel, name*/ 1028 && input_aria_label_value !== (input_aria_label_value = /*arialabel*/ ctx[10] || /*name*/ ctx[2])) {
+			if (dirty & /*arialabel, name*/ 1028 && input_aria_label_value !== (input_aria_label_value = /*arialabel*/ ctx[10] || /*name*/ ctx[2])) {
 				attr(input, "aria-label", input_aria_label_value);
 			}
 
-			if (/*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[22]) {
+			if (/*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[20]) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
-					if_block2 = create_if_block_5(ctx);
+					if_block2 = create_if_block_2$4(ctx);
 					if_block2.c();
 					if_block2.m(div0, t3);
 				}
@@ -7451,11 +7371,11 @@ function create_fragment$f(ctx) {
 				if_block2 = null;
 			}
 
-			if (/*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[22]) {
+			if (/*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[20]) {
 				if (if_block3) {
 					if_block3.p(ctx, dirty);
 				} else {
-					if_block3 = create_if_block_4(ctx);
+					if_block3 = create_if_block_1$5(ctx);
 					if_block3.c();
 					if_block3.m(div0, t4);
 				}
@@ -7468,7 +7388,7 @@ function create_fragment$f(ctx) {
 				if (if_block4) {
 					if_block4.p(ctx, dirty);
 				} else {
-					if_block4 = create_if_block_3$2(ctx);
+					if_block4 = create_if_block$7(ctx);
 					if_block4.c();
 					if_block4.m(div0, null);
 				}
@@ -7477,33 +7397,20 @@ function create_fragment$f(ctx) {
 				if_block4 = null;
 			}
 
-			if (dirty[0] & /*isDisabled, variant, type*/ 524418 && div0_class_value !== (div0_class_value = `
+			if (dirty & /*isDisabled, variant, type*/ 131202 && div0_class_value !== (div0_class_value = `
       goa-input
-      ${/*isDisabled*/ ctx[19] ? "goa-input--disabled" : ""}
+      ${/*isDisabled*/ ctx[17] ? "goa-input--disabled" : ""}
       variant--${/*variant*/ ctx[7]}
       type--${/*type*/ ctx[1]}
     `)) {
 				attr(div0, "class", div0_class_value);
 			}
 
-			if (dirty[0] & /*isDisabled, variant, type, isError*/ 1572994) {
-				toggle_class(div0, "error", /*isError*/ ctx[20]);
+			if (dirty & /*isDisabled, variant, type, isError*/ 393346) {
+				toggle_class(div0, "error", /*isError*/ ctx[18]);
 			}
 
-			if (/*showCounter*/ ctx[18]) {
-				if (if_block5) {
-					if_block5.p(ctx, dirty);
-				} else {
-					if_block5 = create_if_block$7(ctx);
-					if_block5.c();
-					if_block5.m(div1, null);
-				}
-			} else if (if_block5) {
-				if_block5.d(1);
-				if_block5 = null;
-			}
-
-			if (dirty[0] & /*width*/ 512 && div1_style_value !== (div1_style_value = `
+			if (dirty & /*width*/ 512 && div1_style_value !== (div1_style_value = `
     --width: ${/*width*/ ctx[9]};
   `)) {
 				attr(div1, "style", div1_style_value);
@@ -7515,11 +7422,10 @@ function create_fragment$f(ctx) {
 			if (detaching) detach(div1);
 			if (if_block0) if_block0.d();
 			if (if_block1) if_block1.d();
-			/*input_binding*/ ctx[31](null);
+			/*input_binding*/ ctx[28](null);
 			if (if_block2) if_block2.d();
 			if (if_block3) if_block3.d();
 			if (if_block4) if_block4.d();
-			if (if_block5) if_block5.d();
 			mounted = false;
 			run_all(dispose);
 		}
@@ -7536,7 +7442,6 @@ function instance$d($$self, $$props, $$invalidate) {
 	let isReadonly;
 	let isError;
 	let isDisabled;
-	let showCounter;
 	let { type = "text" } = $$props;
 	let { name = "" } = $$props;
 	let { value = "" } = $$props;
@@ -7558,8 +7463,6 @@ function instance$d($$self, $$props, $$invalidate) {
 	let { step = null } = $$props;
 	let { prefix = "" } = $$props;
 	let { suffix = "" } = $$props;
-	let { showcounter = "false" } = $$props;
-	let { maxcharcount = 0 } = $$props;
 	let inputEl;
 
 	function onKeyUp(e) {
@@ -7577,7 +7480,7 @@ function instance$d($$self, $$props, $$invalidate) {
 	function input_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			inputEl = $$value;
-			$$invalidate(17, inputEl);
+			$$invalidate(16, inputEl);
 		});
 	}
 
@@ -7590,11 +7493,11 @@ function instance$d($$self, $$props, $$invalidate) {
 		if ('leadingicon' in $$props) $$invalidate(5, leadingicon = $$props.leadingicon);
 		if ('trailingicon' in $$props) $$invalidate(6, trailingicon = $$props.trailingicon);
 		if ('variant' in $$props) $$invalidate(7, variant = $$props.variant);
-		if ('disabled' in $$props) $$invalidate(24, disabled = $$props.disabled);
-		if ('handletrailingiconclick' in $$props) $$invalidate(25, handletrailingiconclick = $$props.handletrailingiconclick);
-		if ('focused' in $$props) $$invalidate(26, focused = $$props.focused);
-		if ('readonly' in $$props) $$invalidate(27, readonly = $$props.readonly);
-		if ('error' in $$props) $$invalidate(28, error = $$props.error);
+		if ('disabled' in $$props) $$invalidate(22, disabled = $$props.disabled);
+		if ('handletrailingiconclick' in $$props) $$invalidate(23, handletrailingiconclick = $$props.handletrailingiconclick);
+		if ('focused' in $$props) $$invalidate(24, focused = $$props.focused);
+		if ('readonly' in $$props) $$invalidate(25, readonly = $$props.readonly);
+		if ('error' in $$props) $$invalidate(26, error = $$props.error);
 		if ('testid' in $$props) $$invalidate(8, testid = $$props.testid);
 		if ('width' in $$props) $$invalidate(9, width = $$props.width);
 		if ('arialabel' in $$props) $$invalidate(10, arialabel = $$props.arialabel);
@@ -7603,42 +7506,36 @@ function instance$d($$self, $$props, $$invalidate) {
 		if ('step' in $$props) $$invalidate(13, step = $$props.step);
 		if ('prefix' in $$props) $$invalidate(14, prefix = $$props.prefix);
 		if ('suffix' in $$props) $$invalidate(15, suffix = $$props.suffix);
-		if ('showcounter' in $$props) $$invalidate(29, showcounter = $$props.showcounter);
-		if ('maxcharcount' in $$props) $$invalidate(16, maxcharcount = $$props.maxcharcount);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*handletrailingiconclick*/ 33554432) {
-			$$invalidate(22, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
+		if ($$self.$$.dirty & /*handletrailingiconclick*/ 8388608) {
+			$$invalidate(20, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
 		}
 
-		if ($$self.$$.dirty[0] & /*focused*/ 67108864) {
-			$$invalidate(30, isFocused = toBoolean(focused));
+		if ($$self.$$.dirty & /*focused*/ 16777216) {
+			$$invalidate(27, isFocused = toBoolean(focused));
 		}
 
-		if ($$self.$$.dirty[0] & /*readonly*/ 134217728) {
-			$$invalidate(21, isReadonly = toBoolean(readonly));
+		if ($$self.$$.dirty & /*readonly*/ 33554432) {
+			$$invalidate(19, isReadonly = toBoolean(readonly));
 		}
 
-		if ($$self.$$.dirty[0] & /*error*/ 268435456) {
-			$$invalidate(20, isError = toBoolean(error));
+		if ($$self.$$.dirty & /*error*/ 67108864) {
+			$$invalidate(18, isError = toBoolean(error));
 		}
 
-		if ($$self.$$.dirty[0] & /*disabled*/ 16777216) {
-			$$invalidate(19, isDisabled = toBoolean(disabled));
+		if ($$self.$$.dirty & /*disabled*/ 4194304) {
+			$$invalidate(17, isDisabled = toBoolean(disabled));
 		}
 
-		if ($$self.$$.dirty[0] & /*showcounter*/ 536870912) {
-			$$invalidate(18, showCounter = toBoolean(showcounter));
-		}
-
-		if ($$self.$$.dirty[0] & /*isFocused, inputEl*/ 1073872896) {
+		if ($$self.$$.dirty & /*isFocused, inputEl*/ 134283264) {
 			if (isFocused && inputEl) {
 				setTimeout(() => inputEl.focus(), 1);
 			}
 		}
 
-		if ($$self.$$.dirty[0] & /*inputEl, type*/ 131074) {
+		if ($$self.$$.dirty & /*inputEl, type*/ 65538) {
 			if (inputEl && type === "search") {
 				inputEl.addEventListener("search", e => {
 					onKeyUp(e);
@@ -7664,9 +7561,7 @@ function instance$d($$self, $$props, $$invalidate) {
 		step,
 		prefix,
 		suffix,
-		maxcharcount,
 		inputEl,
-		showCounter,
 		isDisabled,
 		isError,
 		isReadonly,
@@ -7677,7 +7572,6 @@ function instance$d($$self, $$props, $$invalidate) {
 		focused,
 		readonly,
 		error,
-		showcounter,
 		isFocused,
 		input_binding
 	];
@@ -7687,7 +7581,7 @@ class Input extends SvelteElement {
 	constructor(options) {
 		super();
 
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%}@media(min-width: 640px){.container{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:stretch;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)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);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[type=text],input[type=date],input[type="datetime-local"],input[type=number]{font-family:var(--font-family)}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}.prefix,.suffix{background-color:var(--color-gray-100);padding:0 0.75rem;display:flex;align-items:center}.prefix{border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius);border-right:1px solid var(--color-gray-600)}.suffix{border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius);border-left:1px solid var(--color-gray-600)}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>')
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%}@media(min-width: 640px){.container{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:stretch;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)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);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[type=text],input[type=date],input[type="datetime-local"],input[type=number]{font-family:var(--font-family)}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}.prefix,.suffix{background-color:var(--color-gray-100);padding:0 0.75rem;display:flex;align-items:center}.prefix{border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius);border-right:1px solid var(--color-gray-600)}.suffix{border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius);border-left:1px solid var(--color-gray-600)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
       center center no-repeat}</style>`;
 
 		init(
@@ -7709,11 +7603,11 @@ class Input extends SvelteElement {
 				leadingicon: 5,
 				trailingicon: 6,
 				variant: 7,
-				disabled: 24,
-				handletrailingiconclick: 25,
-				focused: 26,
-				readonly: 27,
-				error: 28,
+				disabled: 22,
+				handletrailingiconclick: 23,
+				focused: 24,
+				readonly: 25,
+				error: 26,
 				testid: 8,
 				width: 9,
 				arialabel: 10,
@@ -7721,12 +7615,9 @@ class Input extends SvelteElement {
 				max: 12,
 				step: 13,
 				prefix: 14,
-				suffix: 15,
-				showcounter: 29,
-				maxcharcount: 16
+				suffix: 15
 			},
-			null,
-			[-1, -1]
+			null
 		);
 
 		if (options) {
@@ -7763,9 +7654,7 @@ class Input extends SvelteElement {
 			"max",
 			"step",
 			"prefix",
-			"suffix",
-			"showcounter",
-			"maxcharcount"
+			"suffix"
 		];
 	}
 
@@ -7842,7 +7731,7 @@ class Input extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[24];
+		return this.$$.ctx[22];
 	}
 
 	set disabled(disabled) {
@@ -7851,7 +7740,7 @@ class Input extends SvelteElement {
 	}
 
 	get handletrailingiconclick() {
-		return this.$$.ctx[25];
+		return this.$$.ctx[23];
 	}
 
 	set handletrailingiconclick(handletrailingiconclick) {
@@ -7860,7 +7749,7 @@ class Input extends SvelteElement {
 	}
 
 	get focused() {
-		return this.$$.ctx[26];
+		return this.$$.ctx[24];
 	}
 
 	set focused(focused) {
@@ -7869,7 +7758,7 @@ class Input extends SvelteElement {
 	}
 
 	get readonly() {
-		return this.$$.ctx[27];
+		return this.$$.ctx[25];
 	}
 
 	set readonly(readonly) {
@@ -7878,7 +7767,7 @@ class Input extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[28];
+		return this.$$.ctx[26];
 	}
 
 	set error(error) {
@@ -7957,24 +7846,6 @@ class Input extends SvelteElement {
 		this.$$set({ suffix });
 		flush();
 	}
-
-	get showcounter() {
-		return this.$$.ctx[29];
-	}
-
-	set showcounter(showcounter) {
-		this.$$set({ showcounter });
-		flush();
-	}
-
-	get maxcharcount() {
-		return this.$$.ctx[16];
-	}
-
-	set maxcharcount(maxcharcount) {
-		this.$$set({ maxcharcount });
-		flush();
-	}
 }
 
 customElements.define("goa-input", Input);