@abgov/web-components 1.0.0-alpha.100 → 1.0.0-alpha.102

package/web-components.es.js

@@ -1472,7 +1472,7 @@ customElements.define("goa-button-group", ButtonGroup);
 
 function create_else_block$2(ctx) {
 	let t0;
-	let div;
+	let slot;
 	let t1;
 	let if_block1_anchor;
 	let if_block0 = /*leadingicon*/ ctx[3] && create_if_block_2$7(ctx);
@@ -1482,17 +1482,16 @@ function create_else_block$2(ctx) {
 		c() {
 			if (if_block0) if_block0.c();
 			t0 = space();
-			div = element("div");
-			div.innerHTML = `<slot></slot>`;
+			slot = element("slot");
 			t1 = space();
 			if (if_block1) if_block1.c();
 			if_block1_anchor = empty();
-			attr(div, "class", "text");
+			attr(slot, "class", "text");
 		},
 		m(target, anchor) {
 			if (if_block0) if_block0.m(target, anchor);
 			insert(target, t0, anchor);
-			insert(target, div, anchor);
+			insert(target, slot, anchor);
 			insert(target, t1, anchor);
 			if (if_block1) if_block1.m(target, anchor);
 			insert(target, if_block1_anchor, anchor);
@@ -1527,7 +1526,7 @@ function create_else_block$2(ctx) {
 		d(detaching) {
 			if (if_block0) if_block0.d(detaching);
 			if (detaching) detach(t0);
-			if (detaching) detach(div);
+			if (detaching) detach(slot);
 			if (detaching) detach(t1);
 			if (if_block1) if_block1.d(detaching);
 			if (detaching) detach(if_block1_anchor);
@@ -1537,36 +1536,35 @@ function create_else_block$2(ctx) {
 
 // (53:2) {#if type === "start"}
 function create_if_block$h(ctx) {
-	let div;
+	let slot;
 	let t;
 	let goa_icon;
 
 	return {
 		c() {
-			div = element("div");
-			div.innerHTML = `<slot></slot>`;
+			slot = element("slot");
 			t = space();
 			goa_icon = element("goa-icon");
-			attr(div, "class", "text");
+			attr(slot, "class", "text");
 			set_custom_element_data(goa_icon, "id", "trailing-icon");
 			set_custom_element_data(goa_icon, "type", "arrow-forward");
 			set_custom_element_data(goa_icon, "inverted", "true");
 		},
 		m(target, anchor) {
-			insert(target, div, anchor);
+			insert(target, slot, anchor);
 			insert(target, t, anchor);
 			insert(target, goa_icon, anchor);
 		},
 		p: noop,
 		d(detaching) {
-			if (detaching) detach(div);
+			if (detaching) detach(slot);
 			if (detaching) detach(t);
 			if (detaching) detach(goa_icon);
 		}
 	};
 }
 
-// (59:4) {#if leadingicon}
+// (57:4) {#if leadingicon}
 function create_if_block_2$7(ctx) {
 	let goa_icon;
 
@@ -1595,7 +1593,7 @@ function create_if_block_2$7(ctx) {
 	};
 }
 
-// (65:4) {#if trailingicon}
+// (61:4) {#if trailingicon}
 function create_if_block_1$a(ctx) {
 	let goa_icon;
 
@@ -1787,7 +1785,7 @@ class Button extends SvelteElement {
 		super();
 
 		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@media(max-width: 480px){:host{width:100%}button{width:100%}}button{display:inline-flex;box-sizing:border-box;border-radius:0.25rem;border:2px solid var(--goa-color-interactive);box-sizing:border-box;cursor:pointer;font-family:var(--font-family);font-size:var(--fs-lg);font-weight:400;height:var(--button-height);letter-spacing:0.5px;line-height:100%;padding:0 0.75rem;gap:0.5rem;align-items:center;justify-content:center;transition:transform 0.1s ease-in-out, background-color 0.2s ease-in-out,
-      border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--fs-base)}button.start{height:var(--button-height-tall);font-weight:var(--fw-bold)}button.start,button.submit,button.primary{border:2px solid var(--goa-color-interactive);background:var(--goa-color-interactive);color:var(--goa-color-text-light)}button.start:hover,button.submit:hover,button.primary:hover{border-color:var(--goa-color-interactive--hover);background:var(--goa-color-interactive--hover)}button.start:focus,button.start:active,button.submit:focus,button.submit:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive--focus);border-color:var(--goa-color-interactive--active);background:var(--goa-color-interactive--active);outline:none}button.secondary{border:2px solid var(--goa-color-interactive);background:var(--color-white);color:var(--goa-color-interactive)}button.secondary:hover{border-color:var(--goa-color-interactive--hover);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);background:var(--color-gray-100);outline:none}button.tertiary{border:1px solid transparent;background:transparent;color:var(--goa-color-interactive);text-decoration:underline}button.tertiary:hover{border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--color-gray-100);background:var(--color-gray-100);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.submit.destructive,.primary.destructive{color:var(--color-white);background:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency)}.submit.destructive:hover,.primary.destructive:hover{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.submit.destructive:focus,.primary.destructive:focus,.primary.destructive:active{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.secondary.destructive{color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);background:var(--color-white)}.secondary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.secondary.destructive:focus,.secondary.destructive:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.destructive{color:var(--goa-color-status-emergency);border-color:var(--color-gray-200);background:var(--color-white)}.tertiary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}</style>`;
+      border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--fs-base)}button.start{height:var(--button-height-tall);font-weight:var(--fw-bold)}button.start,button.submit,button.primary{border:2px solid var(--goa-color-interactive);background-color:var(--goa-color-interactive);color:var(--goa-color-text-light)}button.start:hover,button.submit:hover,button.primary:hover{border-color:var(--goa-color-interactive--hover);background-color:var(--goa-color-interactive--hover)}button.start:focus,button.start:active,button.submit:focus,button.submit:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive--focus);border-color:var(--goa-color-interactive--active);background-color:var(--goa-color-interactive--active);outline:none}button.secondary{border:2px solid var(--goa-color-interactive);background-color:var(--color-white);color:var(--goa-color-interactive)}button.secondary:hover{border-color:var(--goa-color-interactive--hover);color:var(--goa-color-interactive--hover);background-color:var(--color-gray-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);background-color:var(--color-gray-100);outline:none}button.tertiary{border:1px solid transparent;background-color:transparent;color:var(--goa-color-interactive);text-decoration:underline}button.tertiary:hover{border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);background-color:var(--color-gray-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--color-gray-100);background-color:var(--color-gray-100);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.submit.destructive,.primary.destructive{color:var(--color-white);background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency)}.submit.destructive:hover,.primary.destructive:hover{background-color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.submit.destructive:focus,.primary.destructive:focus,.primary.destructive:active{background-color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.secondary.destructive{color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);background-color:var(--color-white)}.secondary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background-color:var(--color-white)}.secondary.destructive:focus,.secondary.destructive:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background-color:var(--color-white)}.tertiary.destructive{color:var(--goa-color-status-emergency);border-color:var(--color-gray-200);background-color:var(--color-white)}.tertiary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background-color:var(--color-white)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background-color:var(--color-white)}</style>`;
 
 		init(
 			this,
@@ -4021,12 +4019,12 @@ function create_if_block$c(ctx) {
 	};
 }
 
-// (234:4) {#each options as option, index}
+// (239:4) {#each options as option, index}
 function create_each_block$4(ctx) {
 	let li;
-	let t0_value = (/*option*/ ctx[39].label || /*option*/ ctx[39].value) + "";
-	let t0;
-	let t1;
+	let t_value = (/*option*/ ctx[39].label || /*option*/ ctx[39].value) + "";
+	let t;
+	let li_id_value;
 	let li_aria_label_value;
 	let li_data_testid_value;
 	let li_data_index_value;
@@ -4041,9 +4039,10 @@ function create_each_block$4(ctx) {
 	return {
 		c() {
 			li = element("li");
-			t0 = text(t0_value);
-			t1 = space();
+			t = text(t_value);
+			attr(li, "id", li_id_value = /*option*/ ctx[39].label);
 			attr(li, "aria-label", li_aria_label_value = /*option*/ ctx[39].label || /*option*/ ctx[39].value);
+			attr(li, "role", "option");
 			attr(li, "data-testid", li_data_testid_value = `${/*option*/ ctx[39].value}-dropdown-item`);
 			attr(li, "data-index", li_data_index_value = /*index*/ ctx[41]);
 			attr(li, "class", "goa-dropdown-option");
@@ -4054,8 +4053,7 @@ function create_each_block$4(ctx) {
 		},
 		m(target, anchor) {
 			insert(target, li, anchor);
-			append(li, t0);
-			append(li, t1);
+			append(li, t);
 
 			if (!mounted) {
 				dispose = listen(li, "click", click_handler);
@@ -4064,7 +4062,11 @@ function create_each_block$4(ctx) {
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
-			if (dirty[0] & /*options*/ 1024 && t0_value !== (t0_value = (/*option*/ ctx[39].label || /*option*/ ctx[39].value) + "")) set_data(t0, t0_value);
+			if (dirty[0] & /*options*/ 1024 && t_value !== (t_value = (/*option*/ ctx[39].label || /*option*/ ctx[39].value) + "")) set_data(t, t_value);
+
+			if (dirty[0] & /*options*/ 1024 && li_id_value !== (li_id_value = /*option*/ ctx[39].label)) {
+				attr(li, "id", li_id_value);
+			}
 
 			if (dirty[0] & /*options*/ 1024 && li_aria_label_value !== (li_aria_label_value = /*option*/ ctx[39].label || /*option*/ ctx[39].value)) {
 				attr(li, "aria-label", li_aria_label_value);
@@ -4100,8 +4102,8 @@ function create_fragment$q(ctx) {
 	let div0_data_testid_value;
 	let t1;
 	let ul;
-	let slot;
 	let t2;
+	let slot;
 	let ul_style_value;
 	let div1_style_value;
 	let mounted;
@@ -4123,13 +4125,13 @@ function create_fragment$q(ctx) {
 			goa_input = element("goa-input");
 			t1 = space();
 			ul = element("ul");
-			slot = element("slot");
-			t2 = space();
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].c();
 			}
 
+			t2 = space();
+			slot = element("slot");
 			this.c = noop;
 			set_custom_element_data(goa_input, "error", /*error*/ ctx[8]);
 			set_custom_element_data(goa_input, "disabled", /*disabled*/ ctx[7]);
@@ -4137,12 +4139,18 @@ function create_fragment$q(ctx) {
 			set_custom_element_data(goa_input, "placeholder", /*placeholder*/ ctx[4]);
 			set_custom_element_data(goa_input, "width", "100%");
 			set_custom_element_data(goa_input, "id", goa_input_id_value = `${/*name*/ ctx[0]}-dropdown-input`);
+			set_custom_element_data(goa_input, "role", "combobox");
 			set_custom_element_data(goa_input, "aria-label", goa_input_aria_label_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0]);
+			set_custom_element_data(goa_input, "aria-expanded", /*isMenuVisible*/ ctx[12]);
+			set_custom_element_data(goa_input, "aria-controls", "menu");
 			set_custom_element_data(goa_input, "readonly", "");
 			set_custom_element_data(goa_input, "trailingicon", "chevron-down");
 			set_custom_element_data(goa_input, "type", "text");
 			set_custom_element_data(goa_input, "value", /*selectedLabel*/ ctx[11]);
 			attr(div0, "data-testid", div0_data_testid_value = `${/*name*/ ctx[0]}-dropdown`);
+			attr(ul, "id", "menu");
+			attr(ul, "role", "listbox");
+			attr(ul, "aria-activedescendant", /*selectedLabel*/ ctx[11]);
 			attr(ul, "data-testid", "dropdown-menu");
 			attr(ul, "tabindex", "0");
 			attr(ul, "class", "goa-dropdown-list");
@@ -4160,13 +4168,13 @@ function create_fragment$q(ctx) {
 			append(div0, goa_input);
 			append(div1, t1);
 			append(div1, ul);
-			append(ul, slot);
-			append(ul, t2);
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].m(ul, null);
 			}
 
+			append(ul, t2);
+			append(ul, slot);
 			/*ul_binding*/ ctx[23](ul);
 			/*div1_binding*/ ctx[24](div1);
 
@@ -4213,6 +4221,10 @@ function create_fragment$q(ctx) {
 				set_custom_element_data(goa_input, "aria-label", goa_input_aria_label_value);
 			}
 
+			if (dirty[0] & /*isMenuVisible*/ 4096) {
+				set_custom_element_data(goa_input, "aria-expanded", /*isMenuVisible*/ ctx[12]);
+			}
+
 			if (dirty[0] & /*selectedLabel*/ 2048) {
 				set_custom_element_data(goa_input, "value", /*selectedLabel*/ ctx[11]);
 			}
@@ -4233,7 +4245,7 @@ function create_fragment$q(ctx) {
 					} else {
 						each_blocks[i] = create_each_block$4(child_ctx);
 						each_blocks[i].c();
-						each_blocks[i].m(ul, null);
+						each_blocks[i].m(ul, t2);
 					}
 				}
 
@@ -4244,6 +4256,10 @@ function create_fragment$q(ctx) {
 				each_blocks.length = each_value.length;
 			}
 
+			if (dirty[0] & /*selectedLabel*/ 2048) {
+				attr(ul, "aria-activedescendant", /*selectedLabel*/ ctx[11]);
+			}
+
 			if (dirty[0] & /*maxheight*/ 8 && ul_style_value !== (ul_style_value = `overflow-y: auto; max-height: ${/*maxheight*/ ctx[3]}`)) {
 				attr(ul, "style", ul_style_value);
 			}
@@ -6926,7 +6942,7 @@ function create_if_block_7(ctx) {
 	return {
 		c() {
 			div = element("div");
-			t = text(/*prefix*/ ctx[13]);
+			t = text(/*prefix*/ ctx[14]);
 			attr(div, "class", "prefix");
 		},
 		m(target, anchor) {
@@ -6934,7 +6950,7 @@ function create_if_block_7(ctx) {
 			append(div, t);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*prefix*/ 8192) set_data(t, /*prefix*/ ctx[13]);
+			if (dirty[0] & /*prefix*/ 16384) set_data(t, /*prefix*/ ctx[14]);
 		},
 		d(detaching) {
 			if (detaching) detach(div);
@@ -6942,7 +6958,7 @@ function create_if_block_7(ctx) {
 	};
 }
 
-// (81:4) {#if leadingicon}
+// (82:4) {#if leadingicon}
 function create_if_block_6(ctx) {
 	let goa_icon;
 
@@ -6951,14 +6967,14 @@ function create_if_block_6(ctx) {
 			goa_icon = element("goa-icon");
 			set_custom_element_data(goa_icon, "class", "goa-input-leading-icon");
 			set_custom_element_data(goa_icon, "data-testid", "leading-icon");
-			set_custom_element_data(goa_icon, "type", /*leadingicon*/ ctx[4]);
+			set_custom_element_data(goa_icon, "type", /*leadingicon*/ ctx[5]);
 		},
 		m(target, anchor) {
 			insert(target, goa_icon, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*leadingicon*/ 16) {
-				set_custom_element_data(goa_icon, "type", /*leadingicon*/ ctx[4]);
+			if (dirty[0] & /*leadingicon*/ 32) {
+				set_custom_element_data(goa_icon, "type", /*leadingicon*/ ctx[5]);
 			}
 		},
 		d(detaching) {
@@ -6967,7 +6983,7 @@ function create_if_block_6(ctx) {
 	};
 }
 
-// (110:4) {#if trailingicon && !handlesTrailingIconClick}
+// (112:4) {#if trailingicon && !handlesTrailingIconClick}
 function create_if_block_5(ctx) {
 	let goa_icon;
 
@@ -6977,14 +6993,14 @@ function create_if_block_5(ctx) {
 			set_custom_element_data(goa_icon, "class", "goa-input-trailing-icon");
 			set_custom_element_data(goa_icon, "data-testid", "trailing-icon");
 			set_custom_element_data(goa_icon, "size", "medium");
-			set_custom_element_data(goa_icon, "type", /*trailingicon*/ ctx[5]);
+			set_custom_element_data(goa_icon, "type", /*trailingicon*/ ctx[6]);
 		},
 		m(target, anchor) {
 			insert(target, goa_icon, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*trailingicon*/ 32) {
-				set_custom_element_data(goa_icon, "type", /*trailingicon*/ ctx[5]);
+			if (dirty[0] & /*trailingicon*/ 64) {
+				set_custom_element_data(goa_icon, "type", /*trailingicon*/ ctx[6]);
 			}
 		},
 		d(detaching) {
@@ -6993,7 +7009,7 @@ function create_if_block_5(ctx) {
 	};
 }
 
-// (120:4) {#if trailingicon && handlesTrailingIconClick}
+// (122:4) {#if trailingicon && handlesTrailingIconClick}
 function create_if_block_4(ctx) {
 	let goa_icon_button;
 	let mounted;
@@ -7002,10 +7018,10 @@ 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[18]);
+			set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[19]);
 			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]);
+			set_custom_element_data(goa_icon_button, "type", /*trailingicon*/ ctx[6]);
 			set_custom_element_data(goa_icon_button, "data-testid", "trailing-icon-button");
 		},
 		m(target, anchor) {
@@ -7017,12 +7033,12 @@ function create_if_block_4(ctx) {
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty & /*isDisabled*/ 262144) {
-				set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[18]);
+			if (dirty[0] & /*isDisabled*/ 524288) {
+				set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[19]);
 			}
 
-			if (dirty & /*trailingicon*/ 32) {
-				set_custom_element_data(goa_icon_button, "type", /*trailingicon*/ ctx[5]);
+			if (dirty[0] & /*trailingicon*/ 64) {
+				set_custom_element_data(goa_icon_button, "type", /*trailingicon*/ ctx[6]);
 			}
 		},
 		d(detaching) {
@@ -7033,7 +7049,7 @@ function create_if_block_4(ctx) {
 	};
 }
 
-// (131:4) {#if suffix}
+// (133:4) {#if suffix}
 function create_if_block_3$2(ctx) {
 	let span;
 	let t;
@@ -7041,7 +7057,7 @@ function create_if_block_3$2(ctx) {
 	return {
 		c() {
 			span = element("span");
-			t = text(/*suffix*/ ctx[14]);
+			t = text(/*suffix*/ ctx[15]);
 			attr(span, "class", "suffix");
 		},
 		m(target, anchor) {
@@ -7049,7 +7065,7 @@ function create_if_block_3$2(ctx) {
 			append(span, t);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*suffix*/ 16384) set_data(t, /*suffix*/ ctx[14]);
+			if (dirty[0] & /*suffix*/ 32768) set_data(t, /*suffix*/ ctx[15]);
 		},
 		d(detaching) {
 			if (detaching) detach(span);
@@ -7057,12 +7073,12 @@ function create_if_block_3$2(ctx) {
 	};
 }
 
-// (137:2) {#if showCounter}
+// (139:2) {#if showCounter}
 function create_if_block$7(ctx) {
 	let if_block_anchor;
 
 	function select_block_type(ctx, dirty) {
-		if (/*maxcharcount*/ ctx[15] > 0) return create_if_block_1$5;
+		if (/*maxcharcount*/ ctx[16] > 0) return create_if_block_1$5;
 		if (/*value*/ ctx[0].length > 0) return create_if_block_2$4;
 	}
 
@@ -7101,7 +7117,7 @@ function create_if_block$7(ctx) {
 	};
 }
 
-// (142:31) 
+// (144:31) 
 function create_if_block_2$4(ctx) {
 	let div;
 	let t_value = /*value*/ ctx[0].length + "";
@@ -7118,7 +7134,7 @@ function create_if_block_2$4(ctx) {
 			append(div, t);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*value*/ 1 && t_value !== (t_value = /*value*/ ctx[0].length + "")) set_data(t, t_value);
+			if (dirty[0] & /*value*/ 1 && t_value !== (t_value = /*value*/ ctx[0].length + "")) set_data(t, t_value);
 		},
 		d(detaching) {
 			if (detaching) detach(div);
@@ -7126,12 +7142,12 @@ function create_if_block_2$4(ctx) {
 	};
 }
 
-// (138:4) {#if maxcharcount > 0}
+// (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[15]}` + "";
+	let t1_value = `/${/*maxcharcount*/ ctx[16]}` + "";
 	let t1;
 
 	return {
@@ -7140,7 +7156,7 @@ function create_if_block_1$5(ctx) {
 			t0 = text(t0_value);
 			t1 = text(t1_value);
 			attr(div, "class", "counter");
-			toggle_class(div, "counter-error", /*value*/ ctx[0].length > /*maxcharcount*/ ctx[15]);
+			toggle_class(div, "counter-error", /*value*/ ctx[0].length > /*maxcharcount*/ ctx[16]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -7148,11 +7164,11 @@ function create_if_block_1$5(ctx) {
 			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*/ 32768 && t1_value !== (t1_value = `/${/*maxcharcount*/ ctx[15]}` + "")) set_data(t1, t1_value);
+			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 & /*value, maxcharcount*/ 32769) {
-				toggle_class(div, "counter-error", /*value*/ ctx[0].length > /*maxcharcount*/ ctx[15]);
+			if (dirty[0] & /*value, maxcharcount*/ 65537) {
+				toggle_class(div, "counter-error", /*value*/ ctx[0].length > /*maxcharcount*/ ctx[16]);
 			}
 		},
 		d(detaching) {
@@ -7178,12 +7194,12 @@ function create_fragment$e(ctx) {
 	let div1_style_value;
 	let mounted;
 	let dispose;
-	let if_block0 = /*prefix*/ ctx[13] && create_if_block_7(ctx);
-	let if_block1 = /*leadingicon*/ ctx[4] && create_if_block_6(ctx);
-	let if_block2 = /*trailingicon*/ ctx[5] && !/*handlesTrailingIconClick*/ ctx[21] && create_if_block_5(ctx);
-	let if_block3 = /*trailingicon*/ ctx[5] && /*handlesTrailingIconClick*/ ctx[21] && create_if_block_4(ctx);
-	let if_block4 = /*suffix*/ ctx[14] && create_if_block_3$2(ctx);
-	let if_block5 = /*showCounter*/ ctx[17] && create_if_block$7(ctx);
+	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);
 
 	return {
 		c() {
@@ -7203,33 +7219,34 @@ function create_fragment$e(ctx) {
 			t5 = space();
 			if (if_block5) if_block5.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[20];
-			input.disabled = /*isDisabled*/ ctx[18];
-			attr(input, "data-testid", /*testid*/ ctx[7]);
+			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];
+			attr(input, "data-testid", /*testid*/ ctx[8]);
+			attr(input, "autocapitalize", /*autocapitalize*/ ctx[3]);
 			attr(input, "name", /*name*/ ctx[2]);
 			attr(input, "type", /*type*/ ctx[1]);
 			input.value = /*value*/ ctx[0];
-			attr(input, "placeholder", /*placeholder*/ ctx[3]);
-			attr(input, "min", /*min*/ ctx[10]);
-			attr(input, "max", /*max*/ ctx[11]);
-			attr(input, "step", /*step*/ ctx[12]);
+			attr(input, "placeholder", /*placeholder*/ ctx[4]);
+			attr(input, "min", /*min*/ ctx[11]);
+			attr(input, "max", /*max*/ ctx[12]);
+			attr(input, "step", /*step*/ ctx[13]);
 			attr(input, "role", "textbox");
-			attr(input, "aria-label", input_aria_label_value = /*arialabel*/ ctx[9] || /*name*/ ctx[2]);
+			attr(input, "aria-label", input_aria_label_value = /*arialabel*/ ctx[10] || /*name*/ ctx[2]);
 
 			attr(div0, "class", div0_class_value = `
       goa-input
-      ${/*isDisabled*/ ctx[18] ? "goa-input--disabled" : ""}
-      variant--${/*variant*/ ctx[6]}
+      ${/*isDisabled*/ ctx[19] ? "goa-input--disabled" : ""}
+      variant--${/*variant*/ ctx[7]}
       type--${/*type*/ ctx[1]}
     `);
 
-			toggle_class(div0, "error", /*isError*/ ctx[19]);
+			toggle_class(div0, "error", /*isError*/ ctx[20]);
 			attr(div1, "class", "container");
 
 			attr(div1, "style", div1_style_value = `
-    --width: ${/*width*/ ctx[8]};
+    --width: ${/*width*/ ctx[9]};
   `);
 		},
 		m(target, anchor) {
@@ -7240,7 +7257,7 @@ function create_fragment$e(ctx) {
 			if (if_block1) if_block1.m(div0, null);
 			append(div0, t1);
 			append(div0, input);
-			/*input_binding*/ ctx[30](input);
+			/*input_binding*/ ctx[31](input);
 			append(div0, t2);
 			if (if_block2) if_block2.m(div0, null);
 			append(div0, t3);
@@ -7252,15 +7269,15 @@ function create_fragment$e(ctx) {
 
 			if (!mounted) {
 				dispose = [
-					listen(input, "keyup", /*onKeyUp*/ ctx[22]),
-					listen(input, "change", /*onKeyUp*/ ctx[22])
+					listen(input, "keyup", /*onKeyUp*/ ctx[23]),
+					listen(input, "change", /*onKeyUp*/ ctx[23])
 				];
 
 				mounted = true;
 			}
 		},
-		p(ctx, [dirty]) {
-			if (/*prefix*/ ctx[13]) {
+		p(ctx, dirty) {
+			if (/*prefix*/ ctx[14]) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
@@ -7273,7 +7290,7 @@ function create_fragment$e(ctx) {
 				if_block0 = null;
 			}
 
-			if (/*leadingicon*/ ctx[4]) {
+			if (/*leadingicon*/ ctx[5]) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
@@ -7286,59 +7303,63 @@ function create_fragment$e(ctx) {
 				if_block1 = null;
 			}
 
-			if (dirty & /*variant*/ 64 && input_class_value !== (input_class_value = `input--${/*variant*/ ctx[6]}`)) {
+			if (dirty[0] & /*variant*/ 128 && input_class_value !== (input_class_value = `input--${/*variant*/ ctx[7]}`)) {
 				attr(input, "class", input_class_value);
 			}
 
-			if (dirty & /*trailingicon*/ 32 && input_style_value !== (input_style_value = `--search-icon-offset: ${/*trailingicon*/ ctx[5] ? "-0.5rem" : "0"}`)) {
+			if (dirty[0] & /*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 & /*isReadonly*/ 1048576) {
-				input.readOnly = /*isReadonly*/ ctx[20];
+			if (dirty[0] & /*isReadonly*/ 2097152) {
+				input.readOnly = /*isReadonly*/ ctx[21];
 			}
 
-			if (dirty & /*isDisabled*/ 262144) {
-				input.disabled = /*isDisabled*/ ctx[18];
+			if (dirty[0] & /*isDisabled*/ 524288) {
+				input.disabled = /*isDisabled*/ ctx[19];
 			}
 
-			if (dirty & /*testid*/ 128) {
-				attr(input, "data-testid", /*testid*/ ctx[7]);
+			if (dirty[0] & /*testid*/ 256) {
+				attr(input, "data-testid", /*testid*/ ctx[8]);
 			}
 
-			if (dirty & /*name*/ 4) {
+			if (dirty[0] & /*autocapitalize*/ 8) {
+				attr(input, "autocapitalize", /*autocapitalize*/ ctx[3]);
+			}
+
+			if (dirty[0] & /*name*/ 4) {
 				attr(input, "name", /*name*/ ctx[2]);
 			}
 
-			if (dirty & /*type*/ 2) {
+			if (dirty[0] & /*type*/ 2) {
 				attr(input, "type", /*type*/ ctx[1]);
 			}
 
-			if (dirty & /*value*/ 1 && input.value !== /*value*/ ctx[0]) {
+			if (dirty[0] & /*value*/ 1 && input.value !== /*value*/ ctx[0]) {
 				input.value = /*value*/ ctx[0];
 			}
 
-			if (dirty & /*placeholder*/ 8) {
-				attr(input, "placeholder", /*placeholder*/ ctx[3]);
+			if (dirty[0] & /*placeholder*/ 16) {
+				attr(input, "placeholder", /*placeholder*/ ctx[4]);
 			}
 
-			if (dirty & /*min*/ 1024) {
-				attr(input, "min", /*min*/ ctx[10]);
+			if (dirty[0] & /*min*/ 2048) {
+				attr(input, "min", /*min*/ ctx[11]);
 			}
 
-			if (dirty & /*max*/ 2048) {
-				attr(input, "max", /*max*/ ctx[11]);
+			if (dirty[0] & /*max*/ 4096) {
+				attr(input, "max", /*max*/ ctx[12]);
 			}
 
-			if (dirty & /*step*/ 4096) {
-				attr(input, "step", /*step*/ ctx[12]);
+			if (dirty[0] & /*step*/ 8192) {
+				attr(input, "step", /*step*/ ctx[13]);
 			}
 
-			if (dirty & /*arialabel, name*/ 516 && input_aria_label_value !== (input_aria_label_value = /*arialabel*/ ctx[9] || /*name*/ ctx[2])) {
+			if (dirty[0] & /*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[5] && !/*handlesTrailingIconClick*/ ctx[21]) {
+			if (/*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[22]) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
@@ -7351,7 +7372,7 @@ function create_fragment$e(ctx) {
 				if_block2 = null;
 			}
 
-			if (/*trailingicon*/ ctx[5] && /*handlesTrailingIconClick*/ ctx[21]) {
+			if (/*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[22]) {
 				if (if_block3) {
 					if_block3.p(ctx, dirty);
 				} else {
@@ -7364,7 +7385,7 @@ function create_fragment$e(ctx) {
 				if_block3 = null;
 			}
 
-			if (/*suffix*/ ctx[14]) {
+			if (/*suffix*/ ctx[15]) {
 				if (if_block4) {
 					if_block4.p(ctx, dirty);
 				} else {
@@ -7377,20 +7398,20 @@ function create_fragment$e(ctx) {
 				if_block4 = null;
 			}
 
-			if (dirty & /*isDisabled, variant, type*/ 262210 && div0_class_value !== (div0_class_value = `
+			if (dirty[0] & /*isDisabled, variant, type*/ 524418 && div0_class_value !== (div0_class_value = `
       goa-input
-      ${/*isDisabled*/ ctx[18] ? "goa-input--disabled" : ""}
-      variant--${/*variant*/ ctx[6]}
+      ${/*isDisabled*/ ctx[19] ? "goa-input--disabled" : ""}
+      variant--${/*variant*/ ctx[7]}
       type--${/*type*/ ctx[1]}
     `)) {
 				attr(div0, "class", div0_class_value);
 			}
 
-			if (dirty & /*isDisabled, variant, type, isError*/ 786498) {
-				toggle_class(div0, "error", /*isError*/ ctx[19]);
+			if (dirty[0] & /*isDisabled, variant, type, isError*/ 1572994) {
+				toggle_class(div0, "error", /*isError*/ ctx[20]);
 			}
 
-			if (/*showCounter*/ ctx[17]) {
+			if (/*showCounter*/ ctx[18]) {
 				if (if_block5) {
 					if_block5.p(ctx, dirty);
 				} else {
@@ -7403,8 +7424,8 @@ function create_fragment$e(ctx) {
 				if_block5 = null;
 			}
 
-			if (dirty & /*width*/ 256 && div1_style_value !== (div1_style_value = `
-    --width: ${/*width*/ ctx[8]};
+			if (dirty[0] & /*width*/ 512 && div1_style_value !== (div1_style_value = `
+    --width: ${/*width*/ ctx[9]};
   `)) {
 				attr(div1, "style", div1_style_value);
 			}
@@ -7415,7 +7436,7 @@ function create_fragment$e(ctx) {
 			if (detaching) detach(div1);
 			if (if_block0) if_block0.d();
 			if (if_block1) if_block1.d();
-			/*input_binding*/ ctx[30](null);
+			/*input_binding*/ ctx[31](null);
 			if (if_block2) if_block2.d();
 			if (if_block3) if_block3.d();
 			if (if_block4) if_block4.d();
@@ -7440,6 +7461,7 @@ function instance$c($$self, $$props, $$invalidate) {
 	let { type = "text" } = $$props;
 	let { name = "" } = $$props;
 	let { value = "" } = $$props;
+	let { autocapitalize = "off" } = $$props;
 	let { placeholder = "" } = $$props;
 	let { leadingicon = null } = $$props;
 	let { trailingicon = null } = $$props;
@@ -7476,7 +7498,7 @@ function instance$c($$self, $$props, $$invalidate) {
 	function input_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			inputEl = $$value;
-			$$invalidate(16, inputEl);
+			$$invalidate(17, inputEl);
 		});
 	}
 
@@ -7484,59 +7506,60 @@ function instance$c($$self, $$props, $$invalidate) {
 		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(23, disabled = $$props.disabled);
-		if ('handletrailingiconclick' in $$props) $$invalidate(24, handletrailingiconclick = $$props.handletrailingiconclick);
-		if ('focused' in $$props) $$invalidate(25, focused = $$props.focused);
-		if ('readonly' in $$props) $$invalidate(26, readonly = $$props.readonly);
-		if ('error' in $$props) $$invalidate(27, error = $$props.error);
-		if ('testid' in $$props) $$invalidate(7, testid = $$props.testid);
-		if ('width' in $$props) $$invalidate(8, width = $$props.width);
-		if ('arialabel' in $$props) $$invalidate(9, arialabel = $$props.arialabel);
-		if ('min' in $$props) $$invalidate(10, min = $$props.min);
-		if ('max' in $$props) $$invalidate(11, max = $$props.max);
-		if ('step' in $$props) $$invalidate(12, step = $$props.step);
-		if ('prefix' in $$props) $$invalidate(13, prefix = $$props.prefix);
-		if ('suffix' in $$props) $$invalidate(14, suffix = $$props.suffix);
-		if ('showcounter' in $$props) $$invalidate(28, showcounter = $$props.showcounter);
-		if ('maxcharcount' in $$props) $$invalidate(15, maxcharcount = $$props.maxcharcount);
+		if ('autocapitalize' in $$props) $$invalidate(3, autocapitalize = $$props.autocapitalize);
+		if ('placeholder' in $$props) $$invalidate(4, placeholder = $$props.placeholder);
+		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 ('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);
+		if ('min' in $$props) $$invalidate(11, min = $$props.min);
+		if ('max' in $$props) $$invalidate(12, max = $$props.max);
+		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 & /*handletrailingiconclick*/ 16777216) {
-			$$invalidate(21, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
+		if ($$self.$$.dirty[0] & /*handletrailingiconclick*/ 33554432) {
+			$$invalidate(22, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
 		}
 
-		if ($$self.$$.dirty & /*focused*/ 33554432) {
-			$$invalidate(29, isFocused = toBoolean(focused));
+		if ($$self.$$.dirty[0] & /*focused*/ 67108864) {
+			$$invalidate(30, isFocused = toBoolean(focused));
 		}
 
-		if ($$self.$$.dirty & /*readonly*/ 67108864) {
-			$$invalidate(20, isReadonly = toBoolean(readonly));
+		if ($$self.$$.dirty[0] & /*readonly*/ 134217728) {
+			$$invalidate(21, isReadonly = toBoolean(readonly));
 		}
 
-		if ($$self.$$.dirty & /*error*/ 134217728) {
-			$$invalidate(19, isError = toBoolean(error));
+		if ($$self.$$.dirty[0] & /*error*/ 268435456) {
+			$$invalidate(20, isError = toBoolean(error));
 		}
 
-		if ($$self.$$.dirty & /*disabled*/ 8388608) {
-			$$invalidate(18, isDisabled = toBoolean(disabled));
+		if ($$self.$$.dirty[0] & /*disabled*/ 16777216) {
+			$$invalidate(19, isDisabled = toBoolean(disabled));
 		}
 
-		if ($$self.$$.dirty & /*showcounter*/ 268435456) {
-			$$invalidate(17, showCounter = toBoolean(showcounter));
+		if ($$self.$$.dirty[0] & /*showcounter*/ 536870912) {
+			$$invalidate(18, showCounter = toBoolean(showcounter));
 		}
 
-		if ($$self.$$.dirty & /*isFocused, inputEl*/ 536936448) {
+		if ($$self.$$.dirty[0] & /*isFocused, inputEl*/ 1073872896) {
 			if (isFocused && inputEl) {
 				setTimeout(() => inputEl.focus(), 1);
 			}
 		}
 
-		if ($$self.$$.dirty & /*inputEl, type*/ 65538) {
+		if ($$self.$$.dirty[0] & /*inputEl, type*/ 131074) {
 			if (inputEl && type === "search") {
 				inputEl.addEventListener("search", e => {
 					onKeyUp(e);
@@ -7549,6 +7572,7 @@ function instance$c($$self, $$props, $$invalidate) {
 		value,
 		type,
 		name,
+		autocapitalize,
 		placeholder,
 		leadingicon,
 		trailingicon,
@@ -7601,27 +7625,29 @@ class Input extends SvelteElement {
 				type: 1,
 				name: 2,
 				value: 0,
-				placeholder: 3,
-				leadingicon: 4,
-				trailingicon: 5,
-				variant: 6,
-				disabled: 23,
-				handletrailingiconclick: 24,
-				focused: 25,
-				readonly: 26,
-				error: 27,
-				testid: 7,
-				width: 8,
-				arialabel: 9,
-				min: 10,
-				max: 11,
-				step: 12,
-				prefix: 13,
-				suffix: 14,
-				showcounter: 28,
-				maxcharcount: 15
+				autocapitalize: 3,
+				placeholder: 4,
+				leadingicon: 5,
+				trailingicon: 6,
+				variant: 7,
+				disabled: 24,
+				handletrailingiconclick: 25,
+				focused: 26,
+				readonly: 27,
+				error: 28,
+				testid: 8,
+				width: 9,
+				arialabel: 10,
+				min: 11,
+				max: 12,
+				step: 13,
+				prefix: 14,
+				suffix: 15,
+				showcounter: 29,
+				maxcharcount: 16
 			},
-			null
+			null,
+			[-1, -1]
 		);
 
 		if (options) {
@@ -7641,6 +7667,7 @@ class Input extends SvelteElement {
 			"type",
 			"name",
 			"value",
+			"autocapitalize",
 			"placeholder",
 			"leadingicon",
 			"trailingicon",
@@ -7690,17 +7717,26 @@ class Input extends SvelteElement {
 		flush();
 	}
 
-	get placeholder() {
+	get autocapitalize() {
 		return this.$$.ctx[3];
 	}
 
+	set autocapitalize(autocapitalize) {
+		this.$$set({ autocapitalize });
+		flush();
+	}
+
+	get placeholder() {
+		return this.$$.ctx[4];
+	}
+
 	set placeholder(placeholder) {
 		this.$$set({ placeholder });
 		flush();
 	}
 
 	get leadingicon() {
-		return this.$$.ctx[4];
+		return this.$$.ctx[5];
 	}
 
 	set leadingicon(leadingicon) {
@@ -7709,7 +7745,7 @@ class Input extends SvelteElement {
 	}
 
 	get trailingicon() {
-		return this.$$.ctx[5];
+		return this.$$.ctx[6];
 	}
 
 	set trailingicon(trailingicon) {
@@ -7718,7 +7754,7 @@ class Input extends SvelteElement {
 	}
 
 	get variant() {
-		return this.$$.ctx[6];
+		return this.$$.ctx[7];
 	}
 
 	set variant(variant) {
@@ -7727,7 +7763,7 @@ class Input extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[23];
+		return this.$$.ctx[24];
 	}
 
 	set disabled(disabled) {
@@ -7736,7 +7772,7 @@ class Input extends SvelteElement {
 	}
 
 	get handletrailingiconclick() {
-		return this.$$.ctx[24];
+		return this.$$.ctx[25];
 	}
 
 	set handletrailingiconclick(handletrailingiconclick) {
@@ -7745,7 +7781,7 @@ class Input extends SvelteElement {
 	}
 
 	get focused() {
-		return this.$$.ctx[25];
+		return this.$$.ctx[26];
 	}
 
 	set focused(focused) {
@@ -7754,7 +7790,7 @@ class Input extends SvelteElement {
 	}
 
 	get readonly() {
-		return this.$$.ctx[26];
+		return this.$$.ctx[27];
 	}
 
 	set readonly(readonly) {
@@ -7763,7 +7799,7 @@ class Input extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[27];
+		return this.$$.ctx[28];
 	}
 
 	set error(error) {
@@ -7772,7 +7808,7 @@ class Input extends SvelteElement {
 	}
 
 	get testid() {
-		return this.$$.ctx[7];
+		return this.$$.ctx[8];
 	}
 
 	set testid(testid) {
@@ -7781,7 +7817,7 @@ class Input extends SvelteElement {
 	}
 
 	get width() {
-		return this.$$.ctx[8];
+		return this.$$.ctx[9];
 	}
 
 	set width(width) {
@@ -7790,7 +7826,7 @@ class Input extends SvelteElement {
 	}
 
 	get arialabel() {
-		return this.$$.ctx[9];
+		return this.$$.ctx[10];
 	}
 
 	set arialabel(arialabel) {
@@ -7799,7 +7835,7 @@ class Input extends SvelteElement {
 	}
 
 	get min() {
-		return this.$$.ctx[10];
+		return this.$$.ctx[11];
 	}
 
 	set min(min) {
@@ -7808,7 +7844,7 @@ class Input extends SvelteElement {
 	}
 
 	get max() {
-		return this.$$.ctx[11];
+		return this.$$.ctx[12];
 	}
 
 	set max(max) {
@@ -7817,7 +7853,7 @@ class Input extends SvelteElement {
 	}
 
 	get step() {
-		return this.$$.ctx[12];
+		return this.$$.ctx[13];
 	}
 
 	set step(step) {
@@ -7826,7 +7862,7 @@ class Input extends SvelteElement {
 	}
 
 	get prefix() {
-		return this.$$.ctx[13];
+		return this.$$.ctx[14];
 	}
 
 	set prefix(prefix) {
@@ -7835,7 +7871,7 @@ class Input extends SvelteElement {
 	}
 
 	get suffix() {
-		return this.$$.ctx[14];
+		return this.$$.ctx[15];
 	}
 
 	set suffix(suffix) {
@@ -7844,7 +7880,7 @@ class Input extends SvelteElement {
 	}
 
 	get showcounter() {
-		return this.$$.ctx[28];
+		return this.$$.ctx[29];
 	}
 
 	set showcounter(showcounter) {
@@ -7853,7 +7889,7 @@ class Input extends SvelteElement {
 	}
 
 	get maxcharcount() {
-		return this.$$.ctx[15];
+		return this.$$.ctx[16];
 	}
 
 	set maxcharcount(maxcharcount) {