@abgov/web-components 1.0.0-alpha.30 → 1.0.0-alpha.31

package/web-components.es.js

@@ -2343,7 +2343,7 @@ function instance$k($$self, $$props, $$invalidate) {
 class Checkbox extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-checkbox{display:inline-flex;align-items:center;min-height:calc(3rem - 4px);cursor:pointer}.goa-checkbox input[type="checkbox"]{opacity:0;position:absolute}.goa-checkbox--disabled{opacity:30%}label.goa-checkbox--disabled{cursor:default}.goa-checkbox-container{box-sizing:border-box;border:1px solid var(--color-gray-600);border-radius:2px;background-color:var(--color-white);height:1.5rem;width:1.5rem;display:flex;justify-content:center;padding:3px}.goa-checkbox-container svg{fill:var(--color-white)}.goa-checkbox-container.goa-checkbox--selected{background-color:var(--goa-color-interactive)}.goa-checkbox-container:hover:not(.goa-checkbox--selected){background-color:var(--color-gray-100)}.goa-checkbox-container:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--highlight);outline:none}.goa-checkbox-text{padding-left:0.5rem;user-select:none;font-weight:var(--fw-regular)}.goa-checkbox--error .goa-checkbox-container{border:2px solid var(--goa-color-status-emergency)}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-checkbox{display:inline-flex;align-items:center;min-height:calc(3rem - 4px);cursor:pointer}.goa-checkbox input[type="checkbox"]{opacity:0;position:absolute;cursor:pointer}.goa-checkbox--disabled{opacity:40%}.goa-checkbox-container{box-sizing:border-box;border:1px solid var(--color-gray-600);border-radius:2px;background-color:var(--color-white);height:1.5rem;width:1.5rem;display:flex;justify-content:center;padding:3px}.goa-checkbox-container svg{fill:var(--color-white)}.goa-checkbox-container.goa-checkbox--selected{background-color:var(--goa-color-interactive)}.goa-checkbox-container.goa-checkbox--selected:hover{background-color:var(--goa-color-interactive--hover)}.goa-checkbox-container:hover{border:1px solid var(--goa-color-interactive)}.goa-checkbox-container:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--highlight);outline:none}.goa-checkbox-text{padding-left:0.5rem;user-select:none;font-weight:var(--fw-regular)}.goa-checkbox--disabled .goa-checkbox-container,.goa-checkbox--disabled .goa-checkbox-container:hover{border:1px solid var(--color-gray-500)}.goa-checkbox--error .goa-checkbox-container,.goa-checkbox--error .goa-checkbox-container:hover{border:1px solid var(--goa-color-status-emergency);background-color:var(--color-white)}.goa-checkbox--error .goa-checkbox-container svg{fill:var(--goa-color-status-emergency)}</style>`;
 
 		init(
 			this,
@@ -3680,15 +3680,15 @@ function create_if_block_2$4(ctx) {
 	let label_1;
 	let t0;
 	let t1;
-	let if_block = /*isOptional*/ ctx[4] && create_if_block_3$3();
+	let if_block = /*isOptional*/ ctx[3] && create_if_block_3$3();
 
 	return {
 		c() {
 			label_1 = element("label");
-			t0 = text(/*label*/ ctx[3]);
+			t0 = text(/*label*/ ctx[0]);
 			t1 = space();
 			if (if_block) if_block.c();
-			attr(label_1, "for", /*name*/ ctx[1]);
+			attr(label_1, "for", "");
 		},
 		m(target, anchor) {
 			insert(target, label_1, anchor);
@@ -3697,9 +3697,9 @@ function create_if_block_2$4(ctx) {
 			if (if_block) if_block.m(label_1, null);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*label*/ 8) set_data(t0, /*label*/ ctx[3]);
+			if (dirty & /*label*/ 1) set_data(t0, /*label*/ ctx[0]);
 
-			if (/*isOptional*/ ctx[4]) {
+			if (/*isOptional*/ ctx[3]) {
 				if (if_block) ; else {
 					if_block = create_if_block_3$3();
 					if_block.c();
@@ -3709,10 +3709,6 @@ function create_if_block_2$4(ctx) {
 				if_block.d(1);
 				if_block = null;
 			}
-
-			if (dirty & /*name*/ 2) {
-				attr(label_1, "for", /*name*/ ctx[1]);
-			}
 		},
 		d(detaching) {
 			if (detaching) detach(label_1);
@@ -3771,7 +3767,7 @@ function create_if_block$9(ctx) {
 	return {
 		c() {
 			div = element("div");
-			t = text(/*helptext*/ ctx[0]);
+			t = text(/*helptext*/ ctx[1]);
 			attr(div, "class", "help-msg");
 		},
 		m(target, anchor) {
@@ -3779,7 +3775,7 @@ function create_if_block$9(ctx) {
 			append(div, t);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*helptext*/ 1) set_data(t, /*helptext*/ ctx[0]);
+			if (dirty & /*helptext*/ 2) set_data(t, /*helptext*/ ctx[1]);
 		},
 		d(detaching) {
 			if (detaching) detach(div);
@@ -3793,9 +3789,9 @@ function create_fragment$g(ctx) {
 	let div0;
 	let t1;
 	let t2;
-	let if_block0 = /*label*/ ctx[3] && create_if_block_2$4(ctx);
+	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[0] && create_if_block$9(ctx);
+	let if_block2 = /*helptext*/ ctx[1] && create_if_block$9(ctx);
 
 	return {
 		c() {
@@ -3823,7 +3819,7 @@ function create_fragment$g(ctx) {
 			if (if_block2) if_block2.m(div1, null);
 		},
 		p(ctx, [dirty]) {
-			if (/*label*/ ctx[3]) {
+			if (/*label*/ ctx[0]) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
@@ -3849,7 +3845,7 @@ function create_fragment$g(ctx) {
 				if_block1 = null;
 			}
 
-			if (/*helptext*/ ctx[0]) {
+			if (/*helptext*/ ctx[1]) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
@@ -3875,27 +3871,25 @@ function create_fragment$g(ctx) {
 
 function instance$f($$self, $$props, $$invalidate) {
 	let isOptional;
+	let { label = "" } = $$props;
 	let { helptext = "" } = $$props;
-	let { name = "" } = $$props;
 	let { error = "" } = $$props;
-	let { label = "" } = $$props;
 	let { optional } = $$props;
 
 	$$self.$$set = $$props => {
-		if ('helptext' in $$props) $$invalidate(0, helptext = $$props.helptext);
-		if ('name' in $$props) $$invalidate(1, name = $$props.name);
+		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 ('label' in $$props) $$invalidate(3, label = $$props.label);
-		if ('optional' in $$props) $$invalidate(5, optional = $$props.optional);
+		if ('optional' in $$props) $$invalidate(4, optional = $$props.optional);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*optional*/ 32) {
-			$$invalidate(4, isOptional = toBoolean(optional));
+		if ($$self.$$.dirty & /*optional*/ 16) {
+			$$invalidate(3, isOptional = toBoolean(optional));
 		}
 	};
 
-	return [helptext, name, error, label, isOptional, optional];
+	return [label, helptext, error, isOptional, optional];
 }
 
 class FormItem extends SvelteElement {
@@ -3914,11 +3908,10 @@ class FormItem extends SvelteElement {
 			create_fragment$g,
 			safe_not_equal,
 			{
-				helptext: 0,
-				name: 1,
+				label: 0,
+				helptext: 1,
 				error: 2,
-				label: 3,
-				optional: 5
+				optional: 4
 			},
 			null
 		);
@@ -3936,24 +3929,24 @@ class FormItem extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["helptext", "name", "error", "label", "optional"];
+		return ["label", "helptext", "error", "optional"];
 	}
 
-	get helptext() {
+	get label() {
 		return this.$$.ctx[0];
 	}
 
-	set helptext(helptext) {
-		this.$$set({ helptext });
+	set label(label) {
+		this.$$set({ label });
 		flush();
 	}
 
-	get name() {
+	get helptext() {
 		return this.$$.ctx[1];
 	}
 
-	set name(name) {
-		this.$$set({ name });
+	set helptext(helptext) {
+		this.$$set({ helptext });
 		flush();
 	}
 
@@ -3966,17 +3959,8 @@ class FormItem extends SvelteElement {
 		flush();
 	}
 
-	get label() {
-		return this.$$.ctx[3];
-	}
-
-	set label(label) {
-		this.$$set({ label });
-		flush();
-	}
-
 	get optional() {
-		return this.$$.ctx[5];
+		return this.$$.ctx[4];
 	}
 
 	set optional(optional) {
@@ -4598,7 +4582,7 @@ function create_if_block_2$3(ctx) {
 			div = element("div");
 			goa_icon = element("goa-icon");
 			set_custom_element_data(goa_icon, "data-testid", "leading-icon");
-			set_custom_element_data(goa_icon, "type", /*leadingicon*/ ctx[5]);
+			set_custom_element_data(goa_icon, "type", /*leadingicon*/ ctx[4]);
 			attr(div, "class", "goa-input-leading-icon");
 		},
 		m(target, anchor) {
@@ -4606,8 +4590,8 @@ function create_if_block_2$3(ctx) {
 			append(div, goa_icon);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*leadingicon*/ 32) {
-				set_custom_element_data(goa_icon, "type", /*leadingicon*/ ctx[5]);
+			if (dirty & /*leadingicon*/ 16) {
+				set_custom_element_data(goa_icon, "type", /*leadingicon*/ ctx[4]);
 			}
 		},
 		d(detaching) {
@@ -4616,7 +4600,7 @@ function create_if_block_2$3(ctx) {
 	};
 }
 
-// (74:2) {#if trailingicon && !handlesTrailingIconClick}
+// (72:2) {#if trailingicon && !handlesTrailingIconClick}
 function create_if_block_1$5(ctx) {
 	let div;
 	let goa_icon;
@@ -4627,7 +4611,7 @@ function create_if_block_1$5(ctx) {
 			goa_icon = element("goa-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[6]);
+			set_custom_element_data(goa_icon, "type", /*trailingicon*/ ctx[5]);
 			attr(div, "class", "goa-input-trailing-icon");
 		},
 		m(target, anchor) {
@@ -4635,8 +4619,8 @@ function create_if_block_1$5(ctx) {
 			append(div, goa_icon);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*trailingicon*/ 64) {
-				set_custom_element_data(goa_icon, "type", /*trailingicon*/ ctx[6]);
+			if (dirty & /*trailingicon*/ 32) {
+				set_custom_element_data(goa_icon, "type", /*trailingicon*/ ctx[5]);
 			}
 		},
 		d(detaching) {
@@ -4645,7 +4629,7 @@ function create_if_block_1$5(ctx) {
 	};
 }
 
-// (80:2) {#if trailingicon && handlesTrailingIconClick}
+// (78:2) {#if trailingicon && handlesTrailingIconClick}
 function create_if_block$7(ctx) {
 	let div;
 	let goa_icon_button;
@@ -4656,10 +4640,10 @@ function create_if_block$7(ctx) {
 		c() {
 			div = element("div");
 			goa_icon_button = element("goa-icon-button");
-			set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[11]);
+			set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[10]);
 			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[6]);
+			set_custom_element_data(goa_icon_button, "type", /*trailingicon*/ ctx[5]);
 			set_custom_element_data(goa_icon_button, "data-testid", "trailing-icon-button");
 			attr(div, "class", "goa-input-trailing-icon");
 		},
@@ -4673,12 +4657,12 @@ function create_if_block$7(ctx) {
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty & /*isDisabled*/ 2048) {
-				set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[11]);
+			if (dirty & /*isDisabled*/ 1024) {
+				set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[10]);
 			}
 
-			if (dirty & /*trailingicon*/ 64) {
-				set_custom_element_data(goa_icon_button, "type", /*trailingicon*/ ctx[6]);
+			if (dirty & /*trailingicon*/ 32) {
+				set_custom_element_data(goa_icon_button, "type", /*trailingicon*/ ctx[5]);
 			}
 		},
 		d(detaching) {
@@ -4699,9 +4683,9 @@ function create_fragment$c(ctx) {
 	let div_class_value;
 	let mounted;
 	let dispose;
-	let if_block0 = /*leadingicon*/ ctx[5] && create_if_block_2$3(ctx);
-	let if_block1 = /*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[14] && create_if_block_1$5(ctx);
-	let if_block2 = /*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[14] && create_if_block$7(ctx);
+	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);
 
 	return {
 		c() {
@@ -4714,43 +4698,42 @@ function create_fragment$c(ctx) {
 			t2 = space();
 			if (if_block2) if_block2.c();
 			this.c = noop;
-			attr(input, "id", /*id*/ ctx[3]);
-			attr(input, "class", input_class_value = `input--${/*variant*/ ctx[7]}`);
-			input.readOnly = /*isReadonly*/ ctx[13];
-			input.disabled = /*isDisabled*/ ctx[11];
-			attr(input, "data-testid", /*testid*/ ctx[8]);
+			attr(input, "class", input_class_value = `input--${/*variant*/ ctx[6]}`);
+			input.readOnly = /*isReadonly*/ ctx[12];
+			input.disabled = /*isDisabled*/ ctx[10];
+			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, "placeholder", /*placeholder*/ ctx[4]);
-			attr(div, "style:width", /*width*/ ctx[9]);
+			attr(input, "placeholder", /*placeholder*/ ctx[3]);
+			attr(div, "style:width", /*width*/ ctx[8]);
 
 			attr(div, "class", div_class_value = `
-    goa-input ${/*isDisabled*/ ctx[11] ? "goa-input--disabled" : ""}
-    variant--${/*variant*/ ctx[7]}
+    goa-input ${/*isDisabled*/ ctx[10] ? "goa-input--disabled" : ""}
+    variant--${/*variant*/ ctx[6]}
     type--${/*type*/ ctx[0]}
   `);
 
-			toggle_class(div, "error", /*isError*/ ctx[12]);
+			toggle_class(div, "error", /*isError*/ ctx[11]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
 			if (if_block0) if_block0.m(div, null);
 			append(div, t0);
 			append(div, input);
-			/*input_binding*/ ctx[22](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);
 
 			if (!mounted) {
-				dispose = listen(input, "keyup", /*onKeyUp*/ ctx[15]);
+				dispose = listen(input, "keyup", /*onKeyUp*/ ctx[14]);
 				mounted = true;
 			}
 		},
 		p(ctx, [dirty]) {
-			if (/*leadingicon*/ ctx[5]) {
+			if (/*leadingicon*/ ctx[4]) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
@@ -4763,24 +4746,20 @@ function create_fragment$c(ctx) {
 				if_block0 = null;
 			}
 
-			if (dirty & /*id*/ 8) {
-				attr(input, "id", /*id*/ ctx[3]);
-			}
-
-			if (dirty & /*variant*/ 128 && input_class_value !== (input_class_value = `input--${/*variant*/ ctx[7]}`)) {
+			if (dirty & /*variant*/ 64 && input_class_value !== (input_class_value = `input--${/*variant*/ ctx[6]}`)) {
 				attr(input, "class", input_class_value);
 			}
 
-			if (dirty & /*isReadonly*/ 8192) {
-				input.readOnly = /*isReadonly*/ ctx[13];
+			if (dirty & /*isReadonly*/ 4096) {
+				input.readOnly = /*isReadonly*/ ctx[12];
 			}
 
-			if (dirty & /*isDisabled*/ 2048) {
-				input.disabled = /*isDisabled*/ ctx[11];
+			if (dirty & /*isDisabled*/ 1024) {
+				input.disabled = /*isDisabled*/ ctx[10];
 			}
 
-			if (dirty & /*testid*/ 256) {
-				attr(input, "data-testid", /*testid*/ ctx[8]);
+			if (dirty & /*testid*/ 128) {
+				attr(input, "data-testid", /*testid*/ ctx[7]);
 			}
 
 			if (dirty & /*name*/ 2) {
@@ -4795,11 +4774,11 @@ function create_fragment$c(ctx) {
 				input.value = /*value*/ ctx[2];
 			}
 
-			if (dirty & /*placeholder*/ 16) {
-				attr(input, "placeholder", /*placeholder*/ ctx[4]);
+			if (dirty & /*placeholder*/ 8) {
+				attr(input, "placeholder", /*placeholder*/ ctx[3]);
 			}
 
-			if (/*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[14]) {
+			if (/*trailingicon*/ ctx[5] && !/*handlesTrailingIconClick*/ ctx[13]) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
@@ -4812,7 +4791,7 @@ function create_fragment$c(ctx) {
 				if_block1 = null;
 			}
 
-			if (/*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[14]) {
+			if (/*trailingicon*/ ctx[5] && /*handlesTrailingIconClick*/ ctx[13]) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
@@ -4825,20 +4804,20 @@ function create_fragment$c(ctx) {
 				if_block2 = null;
 			}
 
-			if (dirty & /*width*/ 512) {
-				attr(div, "style:width", /*width*/ ctx[9]);
+			if (dirty & /*width*/ 256) {
+				attr(div, "style:width", /*width*/ ctx[8]);
 			}
 
-			if (dirty & /*isDisabled, variant, type*/ 2177 && div_class_value !== (div_class_value = `
-    goa-input ${/*isDisabled*/ ctx[11] ? "goa-input--disabled" : ""}
-    variant--${/*variant*/ ctx[7]}
+			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*/ 6273) {
-				toggle_class(div, "error", /*isError*/ ctx[12]);
+			if (dirty & /*isDisabled, variant, type, isError*/ 3137) {
+				toggle_class(div, "error", /*isError*/ ctx[11]);
 			}
 		},
 		i: noop,
@@ -4846,7 +4825,7 @@ function create_fragment$c(ctx) {
 		d(detaching) {
 			if (detaching) detach(div);
 			if (if_block0) if_block0.d();
-			/*input_binding*/ ctx[22](null);
+			/*input_binding*/ ctx[21](null);
 			if (if_block1) if_block1.d();
 			if (if_block2) if_block2.d();
 			mounted = false;
@@ -4868,7 +4847,6 @@ function instance$b($$self, $$props, $$invalidate) {
 	let { type = "text" } = $$props;
 	let { name = "" } = $$props;
 	let { value = "" } = $$props;
-	let { id = "" } = $$props;
 	let { placeholder = "" } = $$props;
 	let { leadingicon = null } = $$props;
 	let { trailingicon = null } = $$props;
@@ -4897,7 +4875,7 @@ function instance$b($$self, $$props, $$invalidate) {
 	function input_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			inputEl = $$value;
-			$$invalidate(10, inputEl);
+			$$invalidate(9, inputEl);
 		});
 	}
 
@@ -4905,42 +4883,41 @@ function instance$b($$self, $$props, $$invalidate) {
 		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 ('id' in $$props) $$invalidate(3, id = $$props.id);
-		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(16, disabled = $$props.disabled);
-		if ('handletrailingiconclick' in $$props) $$invalidate(17, handletrailingiconclick = $$props.handletrailingiconclick);
-		if ('focused' in $$props) $$invalidate(18, focused = $$props.focused);
-		if ('readonly' in $$props) $$invalidate(19, readonly = $$props.readonly);
-		if ('error' in $$props) $$invalidate(20, error = $$props.error);
-		if ('testid' in $$props) $$invalidate(8, testid = $$props.testid);
-		if ('width' in $$props) $$invalidate(9, width = $$props.width);
+		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 ('testid' in $$props) $$invalidate(7, testid = $$props.testid);
+		if ('width' in $$props) $$invalidate(8, width = $$props.width);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*handletrailingiconclick*/ 131072) {
-			$$invalidate(14, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
+		if ($$self.$$.dirty & /*handletrailingiconclick*/ 65536) {
+			$$invalidate(13, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
 		}
 
-		if ($$self.$$.dirty & /*focused*/ 262144) {
-			$$invalidate(21, isFocused = toBoolean(focused));
+		if ($$self.$$.dirty & /*focused*/ 131072) {
+			$$invalidate(20, isFocused = toBoolean(focused));
 		}
 
-		if ($$self.$$.dirty & /*readonly*/ 524288) {
-			$$invalidate(13, isReadonly = toBoolean(readonly));
+		if ($$self.$$.dirty & /*readonly*/ 262144) {
+			$$invalidate(12, isReadonly = toBoolean(readonly));
 		}
 
-		if ($$self.$$.dirty & /*error*/ 1048576) {
-			$$invalidate(12, isError = toBoolean(error));
+		if ($$self.$$.dirty & /*error*/ 524288) {
+			$$invalidate(11, isError = toBoolean(error));
 		}
 
-		if ($$self.$$.dirty & /*disabled*/ 65536) {
-			$$invalidate(11, isDisabled = toBoolean(disabled));
+		if ($$self.$$.dirty & /*disabled*/ 32768) {
+			$$invalidate(10, isDisabled = toBoolean(disabled));
 		}
 
-		if ($$self.$$.dirty & /*isFocused, inputEl*/ 2098176) {
+		if ($$self.$$.dirty & /*isFocused, inputEl*/ 1049088) {
 			if (isFocused && inputEl) {
 				setTimeout(() => inputEl.focus(), 1);
 			}
@@ -4951,7 +4928,6 @@ function instance$b($$self, $$props, $$invalidate) {
 		type,
 		name,
 		value,
-		id,
 		placeholder,
 		leadingicon,
 		trailingicon,
@@ -4993,18 +4969,17 @@ class Input extends SvelteElement {
 				type: 0,
 				name: 1,
 				value: 2,
-				id: 3,
-				placeholder: 4,
-				leadingicon: 5,
-				trailingicon: 6,
-				variant: 7,
-				disabled: 16,
-				handletrailingiconclick: 17,
-				focused: 18,
-				readonly: 19,
-				error: 20,
-				testid: 8,
-				width: 9
+				placeholder: 3,
+				leadingicon: 4,
+				trailingicon: 5,
+				variant: 6,
+				disabled: 15,
+				handletrailingiconclick: 16,
+				focused: 17,
+				readonly: 18,
+				error: 19,
+				testid: 7,
+				width: 8
 			},
 			null
 		);
@@ -5026,7 +5001,6 @@ class Input extends SvelteElement {
 			"type",
 			"name",
 			"value",
-			"id",
 			"placeholder",
 			"leadingicon",
 			"trailingicon",
@@ -5068,17 +5042,8 @@ class Input extends SvelteElement {
 		flush();
 	}
 
-	get id() {
-		return this.$$.ctx[3];
-	}
-
-	set id(id) {
-		this.$$set({ id });
-		flush();
-	}
-
 	get placeholder() {
-		return this.$$.ctx[4];
+		return this.$$.ctx[3];
 	}
 
 	set placeholder(placeholder) {
@@ -5087,7 +5052,7 @@ class Input extends SvelteElement {
 	}
 
 	get leadingicon() {
-		return this.$$.ctx[5];
+		return this.$$.ctx[4];
 	}
 
 	set leadingicon(leadingicon) {
@@ -5096,7 +5061,7 @@ class Input extends SvelteElement {
 	}
 
 	get trailingicon() {
-		return this.$$.ctx[6];
+		return this.$$.ctx[5];
 	}
 
 	set trailingicon(trailingicon) {
@@ -5105,7 +5070,7 @@ class Input extends SvelteElement {
 	}
 
 	get variant() {
-		return this.$$.ctx[7];
+		return this.$$.ctx[6];
 	}
 
 	set variant(variant) {
@@ -5114,7 +5079,7 @@ class Input extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[16];
+		return this.$$.ctx[15];
 	}
 
 	set disabled(disabled) {
@@ -5123,7 +5088,7 @@ class Input extends SvelteElement {
 	}
 
 	get handletrailingiconclick() {
-		return this.$$.ctx[17];
+		return this.$$.ctx[16];
 	}
 
 	set handletrailingiconclick(handletrailingiconclick) {
@@ -5132,7 +5097,7 @@ class Input extends SvelteElement {
 	}
 
 	get focused() {
-		return this.$$.ctx[18];
+		return this.$$.ctx[17];
 	}
 
 	set focused(focused) {
@@ -5141,7 +5106,7 @@ class Input extends SvelteElement {
 	}
 
 	get readonly() {
-		return this.$$.ctx[19];
+		return this.$$.ctx[18];
 	}
 
 	set readonly(readonly) {
@@ -5150,7 +5115,7 @@ class Input extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[20];
+		return this.$$.ctx[19];
 	}
 
 	set error(error) {
@@ -5159,7 +5124,7 @@ class Input extends SvelteElement {
 	}
 
 	get testid() {
-		return this.$$.ctx[8];
+		return this.$$.ctx[7];
 	}
 
 	set testid(testid) {
@@ -5168,7 +5133,7 @@ class Input extends SvelteElement {
 	}
 
 	get width() {
-		return this.$$.ctx[9];
+		return this.$$.ctx[8];
 	}
 
 	set width(width) {
@@ -8206,7 +8171,6 @@ customElements.define("goa-spinner", Spinner);
 
 function create_fragment$1(ctx) {
 	let textarea;
-	let textarea_id_value;
 	let mounted;
 	let dispose;
 
@@ -8214,60 +8178,55 @@ function create_fragment$1(ctx) {
 		c() {
 			textarea = element("textarea");
 			this.c = noop;
-			attr(textarea, "id", textarea_id_value = /*id*/ ctx[0] || /*name*/ ctx[1]);
-			attr(textarea, "name", /*name*/ ctx[1]);
-			attr(textarea, "placeholder", /*placeholder*/ ctx[3]);
-			textarea.value = /*value*/ ctx[2];
-			attr(textarea, "rows", /*rows*/ ctx[4]);
+			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[6];
-			textarea.readOnly = /*isReadonly*/ ctx[7];
-			attr(textarea, "data-testid", /*testid*/ ctx[5]);
-			toggle_class(textarea, "error", /*isError*/ ctx[8]);
+			textarea.disabled = /*isDisabled*/ ctx[5];
+			textarea.readOnly = /*isReadonly*/ ctx[6];
+			attr(textarea, "data-testid", /*testid*/ ctx[4]);
+			toggle_class(textarea, "error", /*isError*/ ctx[7]);
 		},
 		m(target, anchor) {
 			insert(target, textarea, anchor);
 
 			if (!mounted) {
-				dispose = listen(textarea, "keyup", /*onChange*/ ctx[9]);
+				dispose = listen(textarea, "keyup", /*onChange*/ ctx[8]);
 				mounted = true;
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*id, name*/ 3 && textarea_id_value !== (textarea_id_value = /*id*/ ctx[0] || /*name*/ ctx[1])) {
-				attr(textarea, "id", textarea_id_value);
+			if (dirty & /*name*/ 1) {
+				attr(textarea, "name", /*name*/ ctx[0]);
 			}
 
-			if (dirty & /*name*/ 2) {
-				attr(textarea, "name", /*name*/ ctx[1]);
+			if (dirty & /*placeholder*/ 4) {
+				attr(textarea, "placeholder", /*placeholder*/ ctx[2]);
 			}
 
-			if (dirty & /*placeholder*/ 8) {
-				attr(textarea, "placeholder", /*placeholder*/ ctx[3]);
+			if (dirty & /*value*/ 2) {
+				textarea.value = /*value*/ ctx[1];
 			}
 
-			if (dirty & /*value*/ 4) {
-				textarea.value = /*value*/ ctx[2];
+			if (dirty & /*rows*/ 8) {
+				attr(textarea, "rows", /*rows*/ ctx[3]);
 			}
 
-			if (dirty & /*rows*/ 16) {
-				attr(textarea, "rows", /*rows*/ ctx[4]);
-			}
-
-			if (dirty & /*isDisabled*/ 64) {
-				textarea.disabled = /*isDisabled*/ ctx[6];
+			if (dirty & /*isDisabled*/ 32) {
+				textarea.disabled = /*isDisabled*/ ctx[5];
 			}
 
-			if (dirty & /*isReadonly*/ 128) {
-				textarea.readOnly = /*isReadonly*/ ctx[7];
+			if (dirty & /*isReadonly*/ 64) {
+				textarea.readOnly = /*isReadonly*/ ctx[6];
 			}
 
-			if (dirty & /*testid*/ 32) {
-				attr(textarea, "data-testid", /*testid*/ ctx[5]);
+			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*/ 128) {
+				toggle_class(textarea, "error", /*isError*/ ctx[7]);
 			}
 		},
 		i: noop,
@@ -8284,7 +8243,6 @@ function instance$1($$self, $$props, $$invalidate) {
 	let isError;
 	let isDisabled;
 	let isReadonly;
-	let { id = "" } = $$props;
 	let { name } = $$props;
 	let { value = "" } = $$props;
 	let { placeholder = "" } = $$props;
@@ -8311,33 +8269,31 @@ function instance$1($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$set = $$props => {
-		if ('id' in $$props) $$invalidate(0, id = $$props.id);
-		if ('name' in $$props) $$invalidate(1, name = $$props.name);
-		if ('value' in $$props) $$invalidate(2, value = $$props.value);
-		if ('placeholder' in $$props) $$invalidate(3, placeholder = $$props.placeholder);
-		if ('rows' in $$props) $$invalidate(4, rows = $$props.rows);
-		if ('testid' in $$props) $$invalidate(5, testid = $$props.testid);
-		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 ('name' in $$props) $$invalidate(0, name = $$props.name);
+		if ('value' in $$props) $$invalidate(1, value = $$props.value);
+		if ('placeholder' in $$props) $$invalidate(2, placeholder = $$props.placeholder);
+		if ('rows' in $$props) $$invalidate(3, rows = $$props.rows);
+		if ('testid' in $$props) $$invalidate(4, testid = $$props.testid);
+		if ('error' in $$props) $$invalidate(9, error = $$props.error);
+		if ('readonly' in $$props) $$invalidate(10, readonly = $$props.readonly);
+		if ('disabled' in $$props) $$invalidate(11, disabled = $$props.disabled);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*error*/ 1024) {
-			$$invalidate(8, isError = toBoolean(error));
+		if ($$self.$$.dirty & /*error*/ 512) {
+			$$invalidate(7, isError = toBoolean(error));
 		}
 
-		if ($$self.$$.dirty & /*disabled*/ 4096) {
-			$$invalidate(6, isDisabled = toBoolean(disabled));
+		if ($$self.$$.dirty & /*disabled*/ 2048) {
+			$$invalidate(5, isDisabled = toBoolean(disabled));
 		}
 
-		if ($$self.$$.dirty & /*readonly*/ 2048) {
-			$$invalidate(7, isReadonly = toBoolean(readonly));
+		if ($$self.$$.dirty & /*readonly*/ 1024) {
+			$$invalidate(6, isReadonly = toBoolean(readonly));
 		}
 	};
 
 	return [
-		id,
 		name,
 		value,
 		placeholder,
@@ -8369,15 +8325,14 @@ class TextArea extends SvelteElement {
 			create_fragment$1,
 			safe_not_equal,
 			{
-				id: 0,
-				name: 1,
-				value: 2,
-				placeholder: 3,
-				rows: 4,
-				testid: 5,
-				error: 10,
-				readonly: 11,
-				disabled: 12
+				name: 0,
+				value: 1,
+				placeholder: 2,
+				rows: 3,
+				testid: 4,
+				error: 9,
+				readonly: 10,
+				disabled: 11
 			},
 			null
 		);
@@ -8396,7 +8351,6 @@ class TextArea extends SvelteElement {
 
 	static get observedAttributes() {
 		return [
-			"id",
 			"name",
 			"value",
 			"placeholder",
@@ -8408,17 +8362,8 @@ class TextArea extends SvelteElement {
 		];
 	}
 
-	get id() {
-		return this.$$.ctx[0];
-	}
-
-	set id(id) {
-		this.$$set({ id });
-		flush();
-	}
-
 	get name() {
-		return this.$$.ctx[1];
+		return this.$$.ctx[0];
 	}
 
 	set name(name) {
@@ -8427,7 +8372,7 @@ class TextArea extends SvelteElement {
 	}
 
 	get value() {
-		return this.$$.ctx[2];
+		return this.$$.ctx[1];
 	}
 
 	set value(value) {
@@ -8436,7 +8381,7 @@ class TextArea extends SvelteElement {
 	}
 
 	get placeholder() {
-		return this.$$.ctx[3];
+		return this.$$.ctx[2];
 	}
 
 	set placeholder(placeholder) {
@@ -8445,7 +8390,7 @@ class TextArea extends SvelteElement {
 	}
 
 	get rows() {
-		return this.$$.ctx[4];
+		return this.$$.ctx[3];
 	}
 
 	set rows(rows) {
@@ -8454,7 +8399,7 @@ class TextArea extends SvelteElement {
 	}
 
 	get testid() {
-		return this.$$.ctx[5];
+		return this.$$.ctx[4];
 	}
 
 	set testid(testid) {
@@ -8463,7 +8408,7 @@ class TextArea extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[10];
+		return this.$$.ctx[9];
 	}
 
 	set error(error) {
@@ -8472,7 +8417,7 @@ class TextArea extends SvelteElement {
 	}
 
 	get readonly() {
-		return this.$$.ctx[11];
+		return this.$$.ctx[10];
 	}
 
 	set readonly(readonly) {
@@ -8481,7 +8426,7 @@ class TextArea extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[12];
+		return this.$$.ctx[11];
 	}
 
 	set disabled(disabled) {