@abgov/web-components 1.0.0-alpha.93 → 1.0.0-alpha.96

package/web-components.es.js

@@ -1492,8 +1492,8 @@ function create_else_block$2(ctx) {
 	let div;
 	let t1;
 	let if_block1_anchor;
-	let if_block0 = /*leadingicon*/ ctx[4] && create_if_block_2$7(ctx);
-	let if_block1 = /*trailingicon*/ ctx[5] && create_if_block_1$a(ctx);
+	let if_block0 = /*leadingicon*/ ctx[3] && create_if_block_2$7(ctx);
+	let if_block1 = /*trailingicon*/ ctx[4] && create_if_block_1$a(ctx);
 
 	return {
 		c() {
@@ -1515,7 +1515,7 @@ function create_else_block$2(ctx) {
 			insert(target, if_block1_anchor, anchor);
 		},
 		p(ctx, dirty) {
-			if (/*leadingicon*/ ctx[4]) {
+			if (/*leadingicon*/ ctx[3]) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
@@ -1528,7 +1528,7 @@ function create_else_block$2(ctx) {
 				if_block0 = null;
 			}
 
-			if (/*trailingicon*/ ctx[5]) {
+			if (/*trailingicon*/ ctx[4]) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
@@ -1552,7 +1552,7 @@ function create_else_block$2(ctx) {
 	};
 }
 
-// (55:2) {#if type === "start"}
+// (53:2) {#if type === "start"}
 function create_if_block$h(ctx) {
 	let div;
 	let t;
@@ -1583,7 +1583,7 @@ function create_if_block$h(ctx) {
 	};
 }
 
-// (61:4) {#if leadingicon}
+// (59:4) {#if leadingicon}
 function create_if_block_2$7(ctx) {
 	let goa_icon;
 
@@ -1591,19 +1591,19 @@ function create_if_block_2$7(ctx) {
 		c() {
 			goa_icon = element("goa-icon");
 			set_custom_element_data(goa_icon, "id", "leading-icon");
-			set_custom_element_data(goa_icon, "type", /*leadingicon*/ ctx[4]);
-			set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[7]);
+			set_custom_element_data(goa_icon, "type", /*leadingicon*/ ctx[3]);
+			set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[6]);
 		},
 		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 & /*leadingicon*/ 8) {
+				set_custom_element_data(goa_icon, "type", /*leadingicon*/ ctx[3]);
 			}
 
-			if (dirty & /*isButtonDark*/ 128) {
-				set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[7]);
+			if (dirty & /*isButtonDark*/ 64) {
+				set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[6]);
 			}
 		},
 		d(detaching) {
@@ -1612,7 +1612,7 @@ function create_if_block_2$7(ctx) {
 	};
 }
 
-// (67:4) {#if trailingicon}
+// (65:4) {#if trailingicon}
 function create_if_block_1$a(ctx) {
 	let goa_icon;
 
@@ -1620,19 +1620,19 @@ function create_if_block_1$a(ctx) {
 		c() {
 			goa_icon = element("goa-icon");
 			set_custom_element_data(goa_icon, "id", "trailing-icon");
-			set_custom_element_data(goa_icon, "type", /*trailingicon*/ ctx[5]);
-			set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[7]);
+			set_custom_element_data(goa_icon, "type", /*trailingicon*/ ctx[4]);
+			set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ 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 & /*trailingicon*/ 16) {
+				set_custom_element_data(goa_icon, "type", /*trailingicon*/ ctx[4]);
 			}
 
-			if (dirty & /*isButtonDark*/ 128) {
-				set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[7]);
+			if (dirty & /*isButtonDark*/ 64) {
+				set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[6]);
 			}
 		},
 		d(detaching) {
@@ -1661,11 +1661,10 @@ function create_fragment$B(ctx) {
 			if_block.c();
 			this.c = noop;
 			attr(button, "class", button_class_value = "" + (/*type*/ ctx[0] + " " + /*size*/ ctx[1] + " " + /*variant*/ ctx[2]));
-			attr(button, "title", /*title*/ ctx[3]);
-			button.disabled = /*isDisabled*/ ctx[8];
-			attr(button, "data-testid", /*testid*/ ctx[6]);
-			toggle_class(button, "leading", /*leadingicon*/ ctx[4]);
-			toggle_class(button, "trailing", /*trailingicon*/ ctx[5] || /*type*/ ctx[0] === "start");
+			button.disabled = /*isDisabled*/ ctx[7];
+			attr(button, "data-testid", /*testid*/ ctx[5]);
+			toggle_class(button, "leading", /*leadingicon*/ ctx[3]);
+			toggle_class(button, "trailing", /*trailingicon*/ ctx[4] || /*type*/ ctx[0] === "start");
 		},
 		m(target, anchor) {
 			insert(target, button, anchor);
@@ -1693,24 +1692,20 @@ function create_fragment$B(ctx) {
 				attr(button, "class", button_class_value);
 			}
 
-			if (dirty & /*title*/ 8) {
-				attr(button, "title", /*title*/ ctx[3]);
-			}
-
-			if (dirty & /*isDisabled*/ 256) {
-				button.disabled = /*isDisabled*/ ctx[8];
+			if (dirty & /*isDisabled*/ 128) {
+				button.disabled = /*isDisabled*/ ctx[7];
 			}
 
-			if (dirty & /*testid*/ 64) {
-				attr(button, "data-testid", /*testid*/ ctx[6]);
+			if (dirty & /*testid*/ 32) {
+				attr(button, "data-testid", /*testid*/ ctx[5]);
 			}
 
-			if (dirty & /*type, size, variant, leadingicon*/ 23) {
-				toggle_class(button, "leading", /*leadingicon*/ ctx[4]);
+			if (dirty & /*type, size, variant, leadingicon*/ 15) {
+				toggle_class(button, "leading", /*leadingicon*/ ctx[3]);
 			}
 
-			if (dirty & /*type, size, variant, trailingicon, type*/ 39) {
-				toggle_class(button, "trailing", /*trailingicon*/ ctx[5] || /*type*/ ctx[0] === "start");
+			if (dirty & /*type, size, variant, trailingicon, type*/ 23) {
+				toggle_class(button, "trailing", /*trailingicon*/ ctx[4] || /*type*/ ctx[0] === "start");
 			}
 		},
 		i: noop,
@@ -1732,7 +1727,7 @@ function clickHandler(e) {
 function instance$w($$self, $$props, $$invalidate) {
 	let isDisabled;
 	let isButtonDark;
-	const BUTTON_TYPES = ["primary", "secondary", "tertiary", "start"];
+	const BUTTON_TYPES = ["primary", "submit", "secondary", "tertiary", "start"];
 	const SIZES = ["normal", "compact"];
 	const VARIANTS = ["normal", "destructive"];
 
@@ -1752,7 +1747,6 @@ function instance$w($$self, $$props, $$invalidate) {
 	let { type = "primary" } = $$props;
 	let { size = "normal" } = $$props;
 	let { variant = "normal" } = $$props;
-	let { title = "" } = $$props;
 	let { disabled = "false" } = $$props;
 	let { leadingicon = null } = $$props;
 	let { trailingicon = null } = $$props;
@@ -1776,20 +1770,19 @@ function instance$w($$self, $$props, $$invalidate) {
 		if ('type' in $$props) $$invalidate(0, type = $$props.type);
 		if ('size' in $$props) $$invalidate(1, size = $$props.size);
 		if ('variant' in $$props) $$invalidate(2, variant = $$props.variant);
-		if ('title' in $$props) $$invalidate(3, title = $$props.title);
-		if ('disabled' in $$props) $$invalidate(9, disabled = $$props.disabled);
-		if ('leadingicon' in $$props) $$invalidate(4, leadingicon = $$props.leadingicon);
-		if ('trailingicon' in $$props) $$invalidate(5, trailingicon = $$props.trailingicon);
-		if ('testid' in $$props) $$invalidate(6, testid = $$props.testid);
+		if ('disabled' in $$props) $$invalidate(8, disabled = $$props.disabled);
+		if ('leadingicon' in $$props) $$invalidate(3, leadingicon = $$props.leadingicon);
+		if ('trailingicon' in $$props) $$invalidate(4, trailingicon = $$props.trailingicon);
+		if ('testid' in $$props) $$invalidate(5, testid = $$props.testid);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*disabled*/ 512) {
-			$$invalidate(8, isDisabled = toBoolean(disabled));
+		if ($$self.$$.dirty & /*disabled*/ 256) {
+			$$invalidate(7, isDisabled = toBoolean(disabled));
 		}
 
 		if ($$self.$$.dirty & /*type*/ 1) {
-			$$invalidate(7, isButtonDark = type === "primary" || type === "start");
+			$$invalidate(6, isButtonDark = type === "primary" || type === "start");
 		}
 	};
 
@@ -1797,7 +1790,6 @@ function instance$w($$self, $$props, $$invalidate) {
 		type,
 		size,
 		variant,
-		title,
 		leadingicon,
 		trailingicon,
 		testid,
@@ -1812,7 +1804,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.primary{border:2px solid var(--goa-color-interactive);background:var(--goa-color-interactive);color:var(--goa-color-text-light)}button.start:hover,button.primary:hover{border-color:var(--goa-color-interactive--hover);background:var(--goa-color-interactive--hover)}button.start:focus,button.start: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}.primary.destructive{color:var(--color-white);background:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency)}.primary.destructive:hover{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.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: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>`;
 
 		init(
 			this,
@@ -1828,11 +1820,10 @@ class Button extends SvelteElement {
 				type: 0,
 				size: 1,
 				variant: 2,
-				title: 3,
-				disabled: 9,
-				leadingicon: 4,
-				trailingicon: 5,
-				testid: 6
+				disabled: 8,
+				leadingicon: 3,
+				trailingicon: 4,
+				testid: 5
 			},
 			null
 		);
@@ -1854,7 +1845,6 @@ class Button extends SvelteElement {
 			"type",
 			"size",
 			"variant",
-			"title",
 			"disabled",
 			"leadingicon",
 			"trailingicon",
@@ -1889,17 +1879,8 @@ class Button extends SvelteElement {
 		flush();
 	}
 
-	get title() {
-		return this.$$.ctx[3];
-	}
-
-	set title(title) {
-		this.$$set({ title });
-		flush();
-	}
-
 	get disabled() {
-		return this.$$.ctx[9];
+		return this.$$.ctx[8];
 	}
 
 	set disabled(disabled) {
@@ -1908,7 +1889,7 @@ class Button extends SvelteElement {
 	}
 
 	get leadingicon() {
-		return this.$$.ctx[4];
+		return this.$$.ctx[3];
 	}
 
 	set leadingicon(leadingicon) {
@@ -1917,7 +1898,7 @@ class Button extends SvelteElement {
 	}
 
 	get trailingicon() {
-		return this.$$.ctx[5];
+		return this.$$.ctx[4];
 	}
 
 	set trailingicon(trailingicon) {
@@ -1926,7 +1907,7 @@ class Button extends SvelteElement {
 	}
 
 	get testid() {
-		return this.$$.ctx[6];
+		return this.$$.ctx[5];
 	}
 
 	set testid(testid) {
@@ -3527,7 +3508,7 @@ function writable(value, start = noop) {
 }
 
 const stores = {};
-class ContextStore {
+class ContextStoreInternal {
   constructor() {
     this.store = writable();
   }
@@ -3541,22 +3522,12 @@ class ContextStore {
   }
 }
 function createContext(name) {
-  const ctx = new ContextStore();
+  const ctx = new ContextStoreInternal();
   stores[name] = ctx;
   return ctx;
 }
-async function getContext(name) {
-  return await _getContext(name, 0);
-}
-async function _getContext(name, attempts) {
-  if (attempts > 10) {
-    throw new Error(`Could not find context ${name}`);
-  }
-  if (stores[name]) {
-    return stores[name];
-  }
-  await tick();
-  return _getContext(name, attempts + 1);
+function getContext(name) {
+  return stores[name];
 }
 function deleteContext(name) {
   const store = stores[name];
@@ -3571,12 +3542,12 @@ const BIND$1 = "bind";
 
 function get_each_context$4(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[36] = list[i];
-	child_ctx[38] = i;
+	child_ctx[39] = list[i];
+	child_ctx[41] = i;
 	return child_ctx;
 }
 
-// (180:2) {#if isMenuVisible}
+// (198:2) {#if isMenuVisible}
 function create_if_block$d(ctx) {
 	let div;
 	let div_data_testid_value;
@@ -3610,10 +3581,10 @@ function create_if_block$d(ctx) {
 	};
 }
 
-// (216:4) {#each options as option, index (option.value)}
-function create_each_block$4(key_1, ctx) {
+// (234:4) {#each options as option, index}
+function create_each_block$4(ctx) {
 	let li;
-	let t0_value = /*option*/ ctx[36].label + "";
+	let t0_value = (/*option*/ ctx[39].label || /*option*/ ctx[39].value) + "";
 	let t0;
 	let t1;
 	let li_aria_label_value;
@@ -3624,25 +3595,22 @@ function create_each_block$4(key_1, ctx) {
 	let dispose;
 
 	function click_handler() {
-		return /*click_handler*/ ctx[22](/*option*/ ctx[36]);
+		return /*click_handler*/ ctx[22](/*option*/ ctx[39]);
 	}
 
 	return {
-		key: key_1,
-		first: null,
 		c() {
 			li = element("li");
 			t0 = text(t0_value);
 			t1 = space();
-			attr(li, "aria-label", li_aria_label_value = /*option*/ ctx[36].label || /*option*/ ctx[36].value);
-			attr(li, "data-testid", li_data_testid_value = `${/*option*/ ctx[36].value}-dropdown-item`);
-			attr(li, "data-index", li_data_index_value = /*index*/ ctx[38]);
+			attr(li, "aria-label", li_aria_label_value = /*option*/ ctx[39].label || /*option*/ ctx[39].value);
+			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");
 			attr(li, "style", li_style_value = `display: ${"block"}`);
 			toggle_class(li, "goa-dropdown-option--disabled", false);
-			toggle_class(li, "goa-dropdown-option--tabbed", /*index*/ ctx[38] === /*highlightedIndex*/ ctx[13]);
-			toggle_class(li, "goa-dropdown-option--selected", /*_values*/ ctx[9].includes(/*option*/ ctx[36].value));
-			this.first = li;
+			toggle_class(li, "goa-dropdown-option--tabbed", /*index*/ ctx[41] === /*highlightedIndex*/ ctx[13]);
+			toggle_class(li, "goa-dropdown-option--selected", /*_values*/ ctx[9].includes(/*option*/ ctx[39].value));
 		},
 		m(target, anchor) {
 			insert(target, li, anchor);
@@ -3656,26 +3624,22 @@ function create_each_block$4(key_1, ctx) {
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
-			if (dirty[0] & /*options*/ 1024 && t0_value !== (t0_value = /*option*/ ctx[36].label + "")) set_data(t0, t0_value);
+			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 && li_aria_label_value !== (li_aria_label_value = /*option*/ ctx[36].label || /*option*/ ctx[36].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);
 			}
 
-			if (dirty[0] & /*options*/ 1024 && li_data_testid_value !== (li_data_testid_value = `${/*option*/ ctx[36].value}-dropdown-item`)) {
+			if (dirty[0] & /*options*/ 1024 && li_data_testid_value !== (li_data_testid_value = `${/*option*/ ctx[39].value}-dropdown-item`)) {
 				attr(li, "data-testid", li_data_testid_value);
 			}
 
-			if (dirty[0] & /*options*/ 1024 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[38])) {
-				attr(li, "data-index", li_data_index_value);
-			}
-
-			if (dirty[0] & /*options, highlightedIndex*/ 9216) {
-				toggle_class(li, "goa-dropdown-option--tabbed", /*index*/ ctx[38] === /*highlightedIndex*/ ctx[13]);
+			if (dirty[0] & /*highlightedIndex*/ 8192) {
+				toggle_class(li, "goa-dropdown-option--tabbed", /*index*/ ctx[41] === /*highlightedIndex*/ ctx[13]);
 			}
 
 			if (dirty[0] & /*_values, options*/ 1536) {
-				toggle_class(li, "goa-dropdown-option--selected", /*_values*/ ctx[9].includes(/*option*/ ctx[36].value));
+				toggle_class(li, "goa-dropdown-option--selected", /*_values*/ ctx[9].includes(/*option*/ ctx[39].value));
 			}
 		},
 		d(detaching) {
@@ -3698,20 +3662,16 @@ function create_fragment$q(ctx) {
 	let ul;
 	let slot;
 	let t2;
-	let each_blocks = [];
-	let each_1_lookup = new Map();
 	let ul_style_value;
 	let div1_style_value;
 	let mounted;
 	let dispose;
 	let if_block = /*isMenuVisible*/ ctx[12] && create_if_block$d(ctx);
 	let each_value = /*options*/ ctx[10];
-	const get_key = ctx => /*option*/ ctx[36].value;
+	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
-		let child_ctx = get_each_context$4(ctx, each_value, i);
-		let key = get_key(child_ctx);
-		each_1_lookup.set(key, each_blocks[i] = create_each_block$4(key, child_ctx));
+		each_blocks[i] = create_each_block$4(get_each_context$4(ctx, each_value, i));
 	}
 
 	return {
@@ -3823,7 +3783,25 @@ function create_fragment$q(ctx) {
 
 			if (dirty[0] & /*options, highlightedIndex, _values, onSelect*/ 534016) {
 				each_value = /*options*/ ctx[10];
-				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, ul, destroy_block, create_each_block$4, null, get_each_context$4);
+				let i;
+
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context$4(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+					} else {
+						each_blocks[i] = create_each_block$4(child_ctx);
+						each_blocks[i].c();
+						each_blocks[i].m(ul, null);
+					}
+				}
+
+				for (; i < each_blocks.length; i += 1) {
+					each_blocks[i].d(1);
+				}
+
+				each_blocks.length = each_value.length;
 			}
 
 			if (dirty[0] & /*maxheight*/ 8 && ul_style_value !== (ul_style_value = `overflow-y: auto; max-height: ${/*maxheight*/ ctx[3]}`)) {
@@ -3847,11 +3825,7 @@ function create_fragment$q(ctx) {
 		d(detaching) {
 			if (detaching) detach(div1);
 			if (if_block) if_block.d();
-
-			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].d();
-			}
-
+			destroy_each(each_blocks, detaching);
 			/*ul_binding*/ ctx[23](null);
 			/*div1_binding*/ ctx[24](null);
 			mounted = false;
@@ -3891,15 +3865,47 @@ function instance$o($$self, $$props, $$invalidate) {
 	let ctx;
 
 	// Hooks
-	onMount(async () => {
-		if (!name) {
-			console.error("goa-dropdown: missing the required `name` attribute. It must match the children's name attribute.");
-			return;
-		}
+	onMount(() => {
+		const maxAttempts = 10;
+		let attempts = 0;
+
+		const fn = setInterval(
+			async () => {
+				attempts++;
+
+				if (name && el) {
+					addEventListeners();
+					parseValues();
+					bindContext();
+					clearInterval(fn);
+				}
 
+				if (attempts > maxAttempts) {
+					console.error("goa-dropdown: missing the required `name` attribute. It must match the children's name attribute.");
+					clearInterval(fn);
+				}
+			},
+			10
+		);
+	});
+
+	onDestroy(() => {
+		removeEventListeners();
+		deleteContext(name);
+	});
+
+	// Functions
+	function addEventListeners() {
 		el.addEventListener("focus", onFocus, true);
 		el.addEventListener("blur", onBlur, true);
+	}
+
+	function removeEventListeners() {
+		el.removeEventListener("focus", onFocus, true);
+		el.removeEventListener("blur", onBlur, true);
+	}
 
+	function parseValues() {
 		// parse and convert values to strings to avoid later type comparison issues
 		let rawValue;
 
@@ -3913,17 +3919,8 @@ function instance$o($$self, $$props, $$invalidate) {
 
 		// convert all values to strings to avoid later type comparison issues
 		$$invalidate(9, _values = rawValues.map(val => `${val}`));
+	}
 
-		bindContext();
-	});
-
-	onDestroy(() => {
-		el.removeEventListener("focus", onFocus, true);
-		el.removeEventListener("blur", onBlur, true);
-		deleteContext(name);
-	});
-
-	// Functions
 	function bindContext() {
 		ctx = createContext(name);
 
@@ -4311,15 +4308,23 @@ function instance$n($$self, $$props, $$invalidate) {
 	// private
 	let ctx;
 
-	// Hooks
-	onMount(async () => {
-		if (!name) {
-			console.error("goa-dropdown-item: missing the required `name` attribute. It must match the parent's name attribute");
-			return;
-		}
+	onMount(() => {
+
+		const fn = setInterval(
+			() => {
+				if (name && value) {
+					ctx = getContext(name);
+
+					if (!ctx) {
+						return;
+					}
 
-		ctx = await getContext(name);
-		ctx.notify({ type: BIND$1, name, label, value });
+					ctx.notify({ type: BIND$1, name, label, value });
+					clearInterval(fn);
+				}
+			},
+			10
+		);
 	});
 
 	$$self.$$set = $$props => {
@@ -5482,7 +5487,31 @@ customElements.define("goa-icon-button", IconButton);
 
 /* libs/web-components/src/components/input/Input.svelte generated by Svelte v3.49.0 */
 
-function create_if_block_5(ctx) {
+function create_if_block_7(ctx) {
+	let div;
+	let t;
+
+	return {
+		c() {
+			div = element("div");
+			t = text(/*prefix*/ ctx[13]);
+			attr(div, "class", "prefix");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*prefix*/ 8192) set_data(t, /*prefix*/ ctx[13]);
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+// (81:4) {#if leadingicon}
+function create_if_block_6(ctx) {
 	let goa_icon;
 
 	return {
@@ -5506,8 +5535,8 @@ function create_if_block_5(ctx) {
 	};
 }
 
-// (102:4) {#if trailingicon && !handlesTrailingIconClick}
-function create_if_block_4$1(ctx) {
+// (110:4) {#if trailingicon && !handlesTrailingIconClick}
+function create_if_block_5(ctx) {
 	let goa_icon;
 
 	return {
@@ -5532,8 +5561,8 @@ function create_if_block_4$1(ctx) {
 	};
 }
 
-// (112:4) {#if trailingicon && handlesTrailingIconClick}
-function create_if_block_3$3(ctx) {
+// (120:4) {#if trailingicon && handlesTrailingIconClick}
+function create_if_block_4$1(ctx) {
 	let goa_icon_button;
 	let mounted;
 	let dispose;
@@ -5541,7 +5570,7 @@ function create_if_block_3$3(ctx) {
 	return {
 		c() {
 			goa_icon_button = element("goa-icon-button");
-			set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[16]);
+			set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[18]);
 			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]);
@@ -5556,8 +5585,8 @@ function create_if_block_3$3(ctx) {
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty & /*isDisabled*/ 65536) {
-				set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[16]);
+			if (dirty & /*isDisabled*/ 262144) {
+				set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[18]);
 			}
 
 			if (dirty & /*trailingicon*/ 32) {
@@ -5572,12 +5601,36 @@ function create_if_block_3$3(ctx) {
 	};
 }
 
-// (125:2) {#if showCounter}
+// (131:4) {#if suffix}
+function create_if_block_3$3(ctx) {
+	let span;
+	let t;
+
+	return {
+		c() {
+			span = element("span");
+			t = text(/*suffix*/ ctx[14]);
+			attr(span, "class", "suffix");
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			append(span, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*suffix*/ 16384) set_data(t, /*suffix*/ ctx[14]);
+		},
+		d(detaching) {
+			if (detaching) detach(span);
+		}
+	};
+}
+
+// (137:2) {#if showCounter}
 function create_if_block$a(ctx) {
 	let if_block_anchor;
 
 	function select_block_type(ctx, dirty) {
-		if (/*maxcharcount*/ ctx[13] > 0) return create_if_block_1$6;
+		if (/*maxcharcount*/ ctx[15] > 0) return create_if_block_1$6;
 		if (/*value*/ ctx[0].length > 0) return create_if_block_2$5;
 	}
 
@@ -5616,7 +5669,7 @@ function create_if_block$a(ctx) {
 	};
 }
 
-// (130:31) 
+// (142:31) 
 function create_if_block_2$5(ctx) {
 	let div;
 	let t_value = /*value*/ ctx[0].length + "";
@@ -5641,12 +5694,12 @@ function create_if_block_2$5(ctx) {
 	};
 }
 
-// (126:4) {#if maxcharcount > 0}
+// (138:4) {#if maxcharcount > 0}
 function create_if_block_1$6(ctx) {
 	let div;
 	let t0_value = /*value*/ ctx[0].length + "";
 	let t0;
-	let t1_value = `/${/*maxcharcount*/ ctx[13]}` + "";
+	let t1_value = `/${/*maxcharcount*/ ctx[15]}` + "";
 	let t1;
 
 	return {
@@ -5655,7 +5708,7 @@ function create_if_block_1$6(ctx) {
 			t0 = text(t0_value);
 			t1 = text(t1_value);
 			attr(div, "class", "counter");
-			toggle_class(div, "counter-error", /*value*/ ctx[0].length > /*maxcharcount*/ ctx[13]);
+			toggle_class(div, "counter-error", /*value*/ ctx[0].length > /*maxcharcount*/ ctx[15]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -5664,10 +5717,10 @@ function create_if_block_1$6(ctx) {
 		},
 		p(ctx, dirty) {
 			if (dirty & /*value*/ 1 && t0_value !== (t0_value = /*value*/ ctx[0].length + "")) set_data(t0, t0_value);
-			if (dirty & /*maxcharcount*/ 8192 && t1_value !== (t1_value = `/${/*maxcharcount*/ ctx[13]}` + "")) set_data(t1, t1_value);
+			if (dirty & /*maxcharcount*/ 32768 && t1_value !== (t1_value = `/${/*maxcharcount*/ ctx[15]}` + "")) set_data(t1, t1_value);
 
-			if (dirty & /*value, maxcharcount*/ 8193) {
-				toggle_class(div, "counter-error", /*value*/ ctx[0].length > /*maxcharcount*/ ctx[13]);
+			if (dirty & /*value, maxcharcount*/ 32769) {
+				toggle_class(div, "counter-error", /*value*/ ctx[0].length > /*maxcharcount*/ ctx[15]);
 			}
 		},
 		d(detaching) {
@@ -5680,21 +5733,25 @@ function create_fragment$j(ctx) {
 	let div1;
 	let div0;
 	let t0;
+	let t1;
 	let input;
 	let input_class_value;
 	let input_style_value;
 	let input_aria_label_value;
-	let t1;
 	let t2;
-	let div0_class_value;
 	let t3;
+	let t4;
+	let div0_class_value;
+	let t5;
 	let div1_style_value;
 	let mounted;
 	let dispose;
-	let if_block0 = /*leadingicon*/ ctx[4] && create_if_block_5(ctx);
-	let if_block1 = /*trailingicon*/ ctx[5] && !/*handlesTrailingIconClick*/ ctx[19] && create_if_block_4$1(ctx);
-	let if_block2 = /*trailingicon*/ ctx[5] && /*handlesTrailingIconClick*/ ctx[19] && create_if_block_3$3(ctx);
-	let if_block3 = /*showCounter*/ ctx[15] && create_if_block$a(ctx);
+	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$1(ctx);
+	let if_block4 = /*suffix*/ ctx[14] && create_if_block_3$3(ctx);
+	let if_block5 = /*showCounter*/ ctx[17] && create_if_block$a(ctx);
 
 	return {
 		c() {
@@ -5702,18 +5759,22 @@ function create_fragment$j(ctx) {
 			div0 = element("div");
 			if (if_block0) if_block0.c();
 			t0 = space();
-			input = element("input");
-			t1 = space();
 			if (if_block1) if_block1.c();
+			t1 = space();
+			input = element("input");
 			t2 = space();
 			if (if_block2) if_block2.c();
 			t3 = space();
 			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[6]}`);
 			attr(input, "style", input_style_value = `--search-icon-offset: ${/*trailingicon*/ ctx[5] ? "-0.5rem" : "0"}`);
-			input.readOnly = /*isReadonly*/ ctx[18];
-			input.disabled = /*isDisabled*/ ctx[16];
+			input.readOnly = /*isReadonly*/ ctx[20];
+			input.disabled = /*isDisabled*/ ctx[18];
 			attr(input, "data-testid", /*testid*/ ctx[7]);
 			attr(input, "name", /*name*/ ctx[2]);
 			attr(input, "type", /*type*/ ctx[1]);
@@ -5727,12 +5788,12 @@ function create_fragment$j(ctx) {
 
 			attr(div0, "class", div0_class_value = `
       goa-input
-      ${/*isDisabled*/ ctx[16] ? "goa-input--disabled" : ""}
+      ${/*isDisabled*/ ctx[18] ? "goa-input--disabled" : ""}
       variant--${/*variant*/ ctx[6]}
       type--${/*type*/ ctx[1]}
     `);
 
-			toggle_class(div0, "error", /*isError*/ ctx[17]);
+			toggle_class(div0, "error", /*isError*/ ctx[19]);
 			attr(div1, "class", "container");
 
 			attr(div1, "style", div1_style_value = `
@@ -5744,30 +5805,34 @@ function create_fragment$j(ctx) {
 			append(div1, div0);
 			if (if_block0) if_block0.m(div0, null);
 			append(div0, t0);
-			append(div0, input);
-			/*input_binding*/ ctx[28](input);
-			append(div0, t1);
 			if (if_block1) if_block1.m(div0, null);
+			append(div0, t1);
+			append(div0, input);
+			/*input_binding*/ ctx[30](input);
 			append(div0, t2);
 			if (if_block2) if_block2.m(div0, null);
-			append(div1, t3);
-			if (if_block3) if_block3.m(div1, 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[20]),
-					listen(input, "change", /*onKeyUp*/ ctx[20])
+					listen(input, "keyup", /*onKeyUp*/ ctx[22]),
+					listen(input, "change", /*onKeyUp*/ ctx[22])
 				];
 
 				mounted = true;
 			}
 		},
 		p(ctx, [dirty]) {
-			if (/*leadingicon*/ ctx[4]) {
+			if (/*prefix*/ ctx[13]) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_5(ctx);
+					if_block0 = create_if_block_7(ctx);
 					if_block0.c();
 					if_block0.m(div0, t0);
 				}
@@ -5776,6 +5841,19 @@ function create_fragment$j(ctx) {
 				if_block0 = null;
 			}
 
+			if (/*leadingicon*/ ctx[4]) {
+				if (if_block1) {
+					if_block1.p(ctx, dirty);
+				} else {
+					if_block1 = create_if_block_6(ctx);
+					if_block1.c();
+					if_block1.m(div0, t1);
+				}
+			} else if (if_block1) {
+				if_block1.d(1);
+				if_block1 = null;
+			}
+
 			if (dirty & /*variant*/ 64 && input_class_value !== (input_class_value = `input--${/*variant*/ ctx[6]}`)) {
 				attr(input, "class", input_class_value);
 			}
@@ -5784,12 +5862,12 @@ function create_fragment$j(ctx) {
 				attr(input, "style", input_style_value);
 			}
 
-			if (dirty & /*isReadonly*/ 262144) {
-				input.readOnly = /*isReadonly*/ ctx[18];
+			if (dirty & /*isReadonly*/ 1048576) {
+				input.readOnly = /*isReadonly*/ ctx[20];
 			}
 
-			if (dirty & /*isDisabled*/ 65536) {
-				input.disabled = /*isDisabled*/ ctx[16];
+			if (dirty & /*isDisabled*/ 262144) {
+				input.disabled = /*isDisabled*/ ctx[18];
 			}
 
 			if (dirty & /*testid*/ 128) {
@@ -5828,56 +5906,69 @@ function create_fragment$j(ctx) {
 				attr(input, "aria-label", input_aria_label_value);
 			}
 
-			if (/*trailingicon*/ ctx[5] && !/*handlesTrailingIconClick*/ ctx[19]) {
-				if (if_block1) {
-					if_block1.p(ctx, dirty);
-				} else {
-					if_block1 = create_if_block_4$1(ctx);
-					if_block1.c();
-					if_block1.m(div0, t2);
-				}
-			} else if (if_block1) {
-				if_block1.d(1);
-				if_block1 = null;
-			}
-
-			if (/*trailingicon*/ ctx[5] && /*handlesTrailingIconClick*/ ctx[19]) {
+			if (/*trailingicon*/ ctx[5] && !/*handlesTrailingIconClick*/ ctx[21]) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
-					if_block2 = create_if_block_3$3(ctx);
+					if_block2 = create_if_block_5(ctx);
 					if_block2.c();
-					if_block2.m(div0, null);
+					if_block2.m(div0, t3);
 				}
 			} else if (if_block2) {
 				if_block2.d(1);
 				if_block2 = null;
 			}
 
-			if (dirty & /*isDisabled, variant, type*/ 65602 && div0_class_value !== (div0_class_value = `
+			if (/*trailingicon*/ ctx[5] && /*handlesTrailingIconClick*/ ctx[21]) {
+				if (if_block3) {
+					if_block3.p(ctx, dirty);
+				} else {
+					if_block3 = create_if_block_4$1(ctx);
+					if_block3.c();
+					if_block3.m(div0, t4);
+				}
+			} else if (if_block3) {
+				if_block3.d(1);
+				if_block3 = null;
+			}
+
+			if (/*suffix*/ ctx[14]) {
+				if (if_block4) {
+					if_block4.p(ctx, dirty);
+				} else {
+					if_block4 = create_if_block_3$3(ctx);
+					if_block4.c();
+					if_block4.m(div0, null);
+				}
+			} else if (if_block4) {
+				if_block4.d(1);
+				if_block4 = null;
+			}
+
+			if (dirty & /*isDisabled, variant, type*/ 262210 && div0_class_value !== (div0_class_value = `
       goa-input
-      ${/*isDisabled*/ ctx[16] ? "goa-input--disabled" : ""}
+      ${/*isDisabled*/ ctx[18] ? "goa-input--disabled" : ""}
       variant--${/*variant*/ ctx[6]}
       type--${/*type*/ ctx[1]}
     `)) {
 				attr(div0, "class", div0_class_value);
 			}
 
-			if (dirty & /*isDisabled, variant, type, isError*/ 196674) {
-				toggle_class(div0, "error", /*isError*/ ctx[17]);
+			if (dirty & /*isDisabled, variant, type, isError*/ 786498) {
+				toggle_class(div0, "error", /*isError*/ ctx[19]);
 			}
 
-			if (/*showCounter*/ ctx[15]) {
-				if (if_block3) {
-					if_block3.p(ctx, dirty);
+			if (/*showCounter*/ ctx[17]) {
+				if (if_block5) {
+					if_block5.p(ctx, dirty);
 				} else {
-					if_block3 = create_if_block$a(ctx);
-					if_block3.c();
-					if_block3.m(div1, null);
+					if_block5 = create_if_block$a(ctx);
+					if_block5.c();
+					if_block5.m(div1, null);
 				}
-			} else if (if_block3) {
-				if_block3.d(1);
-				if_block3 = null;
+			} else if (if_block5) {
+				if_block5.d(1);
+				if_block5 = null;
 			}
 
 			if (dirty & /*width*/ 256 && div1_style_value !== (div1_style_value = `
@@ -5891,10 +5982,12 @@ function create_fragment$j(ctx) {
 		d(detaching) {
 			if (detaching) detach(div1);
 			if (if_block0) if_block0.d();
-			/*input_binding*/ ctx[28](null);
 			if (if_block1) if_block1.d();
+			/*input_binding*/ ctx[30](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);
 		}
@@ -5930,6 +6023,8 @@ function instance$h($$self, $$props, $$invalidate) {
 	let { min = null } = $$props;
 	let { max = null } = $$props;
 	let { step = null } = $$props;
+	let { prefix = "" } = $$props;
+	let { suffix = "" } = $$props;
 	let { showcounter = "false" } = $$props;
 	let { maxcharcount = 0 } = $$props;
 	let inputEl;
@@ -5949,7 +6044,7 @@ function instance$h($$self, $$props, $$invalidate) {
 	function input_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			inputEl = $$value;
-			$$invalidate(14, inputEl);
+			$$invalidate(16, inputEl);
 		});
 	}
 
@@ -5961,53 +6056,55 @@ function instance$h($$self, $$props, $$invalidate) {
 		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(21, disabled = $$props.disabled);
-		if ('handletrailingiconclick' in $$props) $$invalidate(22, handletrailingiconclick = $$props.handletrailingiconclick);
-		if ('focused' in $$props) $$invalidate(23, focused = $$props.focused);
-		if ('readonly' in $$props) $$invalidate(24, readonly = $$props.readonly);
-		if ('error' in $$props) $$invalidate(25, error = $$props.error);
+		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 ('showcounter' in $$props) $$invalidate(26, showcounter = $$props.showcounter);
-		if ('maxcharcount' in $$props) $$invalidate(13, maxcharcount = $$props.maxcharcount);
+		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);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*handletrailingiconclick*/ 4194304) {
-			$$invalidate(19, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
+		if ($$self.$$.dirty & /*handletrailingiconclick*/ 16777216) {
+			$$invalidate(21, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
 		}
 
-		if ($$self.$$.dirty & /*focused*/ 8388608) {
-			$$invalidate(27, isFocused = toBoolean(focused));
+		if ($$self.$$.dirty & /*focused*/ 33554432) {
+			$$invalidate(29, isFocused = toBoolean(focused));
 		}
 
-		if ($$self.$$.dirty & /*readonly*/ 16777216) {
-			$$invalidate(18, isReadonly = toBoolean(readonly));
+		if ($$self.$$.dirty & /*readonly*/ 67108864) {
+			$$invalidate(20, isReadonly = toBoolean(readonly));
 		}
 
-		if ($$self.$$.dirty & /*error*/ 33554432) {
-			$$invalidate(17, isError = toBoolean(error));
+		if ($$self.$$.dirty & /*error*/ 134217728) {
+			$$invalidate(19, isError = toBoolean(error));
 		}
 
-		if ($$self.$$.dirty & /*disabled*/ 2097152) {
-			$$invalidate(16, isDisabled = toBoolean(disabled));
+		if ($$self.$$.dirty & /*disabled*/ 8388608) {
+			$$invalidate(18, isDisabled = toBoolean(disabled));
 		}
 
-		if ($$self.$$.dirty & /*showcounter*/ 67108864) {
-			$$invalidate(15, showCounter = toBoolean(showcounter));
+		if ($$self.$$.dirty & /*showcounter*/ 268435456) {
+			$$invalidate(17, showCounter = toBoolean(showcounter));
 		}
 
-		if ($$self.$$.dirty & /*isFocused, inputEl*/ 134234112) {
+		if ($$self.$$.dirty & /*isFocused, inputEl*/ 536936448) {
 			if (isFocused && inputEl) {
 				setTimeout(() => inputEl.focus(), 1);
 			}
 		}
 
-		if ($$self.$$.dirty & /*inputEl, type*/ 16386) {
+		if ($$self.$$.dirty & /*inputEl, type*/ 65538) {
 			if (inputEl && type === "search") {
 				inputEl.addEventListener("search", e => {
 					onKeyUp(e);
@@ -6030,6 +6127,8 @@ function instance$h($$self, $$props, $$invalidate) {
 		min,
 		max,
 		step,
+		prefix,
+		suffix,
 		maxcharcount,
 		inputEl,
 		showCounter,
@@ -6053,7 +6152,7 @@ class Input extends SvelteElement {
 	constructor(options) {
 		super();
 
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.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:center;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.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=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}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;font-family:var(--font-family)}.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=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>')
       center center no-repeat}</style>`;
 
 		init(
@@ -6074,19 +6173,21 @@ class Input extends SvelteElement {
 				leadingicon: 4,
 				trailingicon: 5,
 				variant: 6,
-				disabled: 21,
-				handletrailingiconclick: 22,
-				focused: 23,
-				readonly: 24,
-				error: 25,
+				disabled: 23,
+				handletrailingiconclick: 24,
+				focused: 25,
+				readonly: 26,
+				error: 27,
 				testid: 7,
 				width: 8,
 				arialabel: 9,
 				min: 10,
 				max: 11,
 				step: 12,
-				showcounter: 26,
-				maxcharcount: 13
+				prefix: 13,
+				suffix: 14,
+				showcounter: 28,
+				maxcharcount: 15
 			},
 			null
 		);
@@ -6123,6 +6224,8 @@ class Input extends SvelteElement {
 			"min",
 			"max",
 			"step",
+			"prefix",
+			"suffix",
 			"showcounter",
 			"maxcharcount"
 		];
@@ -6192,7 +6295,7 @@ class Input extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[21];
+		return this.$$.ctx[23];
 	}
 
 	set disabled(disabled) {
@@ -6201,7 +6304,7 @@ class Input extends SvelteElement {
 	}
 
 	get handletrailingiconclick() {
-		return this.$$.ctx[22];
+		return this.$$.ctx[24];
 	}
 
 	set handletrailingiconclick(handletrailingiconclick) {
@@ -6210,7 +6313,7 @@ class Input extends SvelteElement {
 	}
 
 	get focused() {
-		return this.$$.ctx[23];
+		return this.$$.ctx[25];
 	}
 
 	set focused(focused) {
@@ -6219,7 +6322,7 @@ class Input extends SvelteElement {
 	}
 
 	get readonly() {
-		return this.$$.ctx[24];
+		return this.$$.ctx[26];
 	}
 
 	set readonly(readonly) {
@@ -6228,7 +6331,7 @@ class Input extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[25];
+		return this.$$.ctx[27];
 	}
 
 	set error(error) {
@@ -6290,8 +6393,26 @@ class Input extends SvelteElement {
 		flush();
 	}
 
+	get prefix() {
+		return this.$$.ctx[13];
+	}
+
+	set prefix(prefix) {
+		this.$$set({ prefix });
+		flush();
+	}
+
+	get suffix() {
+		return this.$$.ctx[14];
+	}
+
+	set suffix(suffix) {
+		this.$$set({ suffix });
+		flush();
+	}
+
 	get showcounter() {
-		return this.$$.ctx[26];
+		return this.$$.ctx[28];
 	}
 
 	set showcounter(showcounter) {
@@ -6300,7 +6421,7 @@ class Input extends SvelteElement {
 	}
 
 	get maxcharcount() {
-		return this.$$.ctx[13];
+		return this.$$.ctx[15];
 	}
 
 	set maxcharcount(maxcharcount) {
@@ -7614,7 +7735,7 @@ function get_each_context$3(ctx, list, i) {
 	return child_ctx;
 }
 
-// (55:2) {#each options as option (option.value) }
+// (63:2) {#each options as option (option.value) }
 function create_each_block$3(key_1, ctx) {
 	let label;
 	let input;
@@ -7802,21 +7923,35 @@ function instance$d($$self, $$props, $$invalidate) {
 	let el;
 
 	onMount(() => {
-		if (!name) {
-			console.error("goa-radio: missing the required `name` attribute. It must match the children's name attribute.");
-			return;
-		}
+		const maxAttempts = 10;
+		let attempts = 0;
+
+		const fn = setInterval(
+			async () => {
+				attempts++;
+
+				if (name) {
+					ctx = createContext(name);
+
+					ctx.subscribe(msg => {
+						switch (msg === null || msg === void 0 ? void 0 : msg.type) {
+							case BIND:
+								{
+									$$invalidate(4, options = [...options, msg]);
+								}
+						}
+					});
 
-		ctx = createContext(name);
+					clearInterval(fn);
+				}
 
-		ctx.subscribe(msg => {
-			switch (msg === null || msg === void 0 ? void 0 : msg.type) {
-				case BIND:
-					{
-						$$invalidate(4, options = [...options, msg]);
-					}
-			}
-		});
+				if (attempts > maxAttempts) {
+					console.error("goa-radio: missing the required `name` attribute. It must match the children's name attribute.");
+					clearInterval(fn);
+				}
+			},
+			10
+		);
 	});
 
 	function onChange(newValue) {
@@ -7994,14 +8129,32 @@ function instance$c($$self, $$props, $$invalidate) {
 	let { name } = $$props;
 	let ctx;
 
-	onMount(async () => {
-		if (!name) {
-			console.error("goa-radio-item: missing the required `name` attribute. It must match the parent's name attribute.");
-			return;
-		}
+	onMount(() => {
+		const maxAttempts = 10;
+		let attempts = 0;
+
+		const fn = setInterval(
+			() => {
+				attempts++;
 
-		ctx = await getContext(name);
-		ctx.notify({ type: BIND, value, label });
+				if (name) {
+					ctx = getContext(name);
+
+					if (!ctx) {
+						return;
+					}
+
+					ctx.notify({ type: BIND, value, label });
+					clearInterval(fn);
+				}
+
+				if (attempts > maxAttempts) {
+					console.error("goa-radio-item: missing the required `name` attribute. It must match the parent's name attribute.");
+					clearInterval(fn);
+				}
+			},
+			10
+		);
 	});
 
 	$$self.$$set = $$props => {
@@ -8235,7 +8388,7 @@ function create_if_block_3(ctx) {
 			t0 = space();
 			div1 = element("div");
 			div1.innerHTML = `An official site of the <a href="https://www.alberta.ca/index.aspx">Alberta Government</a>`;
-			attr(div0, "class", "service-level service-level--live");
+			attr(div0, "class", "service-type service-type--live");
 			attr(div1, "data-testid", "type");
 			attr(div1, "class", "site-text");
 		},
@@ -8277,7 +8430,7 @@ function create_if_block_1$3(ctx) {
 			t4 = text(" service\n      ");
 			if (if_block) if_block.c();
 			attr(div0, "data-testid", "type");
-			attr(div0, "class", div0_class_value = "service-level service-level--" + /*type*/ ctx[0].toLowerCase());
+			attr(div0, "class", div0_class_value = "service-type service-type--" + /*type*/ ctx[0].toLowerCase());
 			attr(a, "href", "https://www.alberta.ca/index.aspx");
 			attr(div1, "data-testid", "site-text");
 			attr(div1, "class", "site-text");
@@ -8295,7 +8448,7 @@ function create_if_block_1$3(ctx) {
 		p(ctx, dirty) {
 			if (dirty & /*type*/ 1 && t0_value !== (t0_value = capitalize(/*type*/ ctx[0]) + "")) set_data(t0, t0_value);
 
-			if (dirty & /*type*/ 1 && div0_class_value !== (div0_class_value = "service-level service-level--" + /*type*/ ctx[0].toLowerCase())) {
+			if (dirty & /*type*/ 1 && div0_class_value !== (div0_class_value = "service-type service-type--" + /*type*/ ctx[0].toLowerCase())) {
 				attr(div0, "class", div0_class_value);
 			}