@abgov/web-components 1.15.0 → 1.16.0

package/web-components.es.js

@@ -343,14 +343,6 @@ function get_current_component() {
 function onMount(fn) {
     get_current_component().$$.on_mount.push(fn);
 }
-/**
- * Schedules a callback to run immediately after the component has been updated.
- *
- * The first time the callback runs will be after the initial `onMount`
- */
-function afterUpdate(fn) {
-    get_current_component().$$.after_update.push(fn);
-}
 /**
  * Schedules a callback to run immediately before the component is unmounted.
  *
@@ -1657,7 +1649,7 @@ function create_if_block_6$1(ctx) {
 }
 
 // (109:4) {#if _showToggleMenu && _mobile}
-function create_if_block_4$5(ctx) {
+function create_if_block_4$4(ctx) {
 	let button;
 	let t;
 	let goa_icon;
@@ -1709,7 +1701,7 @@ function create_if_block_2$e(ctx) {
 	let t1;
 	let mounted;
 	let dispose;
-	let if_block = /*_showMenu*/ ctx[8] && create_if_block_3$c(ctx);
+	let if_block = /*_showMenu*/ ctx[8] && create_if_block_3$b(ctx);
 
 	return {
 		c() {
@@ -1762,7 +1754,7 @@ function create_if_block_2$e(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block_3$c(ctx);
+					if_block = create_if_block_3$b(ctx);
 					if_block.c();
 					if_block.m(goa_popover, null);
 				}
@@ -1785,7 +1777,7 @@ function create_if_block_2$e(ctx) {
 }
 
 // (135:8) {#if _showMenu}
-function create_if_block_3$c(ctx) {
+function create_if_block_3$b(ctx) {
 	let div;
 
 	return {
@@ -1870,7 +1862,7 @@ function create_fragment$_(ctx) {
 
 	let current_block_type = select_block_type(ctx);
 	let if_block0 = current_block_type(ctx);
-	let if_block1 = /*_showToggleMenu*/ ctx[7] && /*_mobile*/ ctx[10] && create_if_block_4$5(ctx);
+	let if_block1 = /*_showToggleMenu*/ ctx[7] && /*_mobile*/ ctx[10] && create_if_block_4$4(ctx);
 	let if_block2 = /*_showToggleMenu*/ ctx[7] && /*_tablet*/ ctx[9] && create_if_block_2$e(ctx);
 	let if_block3 = !/*_showMenu*/ ctx[8] && (/*_mobile*/ ctx[10] || /*_tablet*/ ctx[9]) && create_if_block_1$i(ctx);
 	let if_block4 = (/*_showMenu*/ ctx[8] && /*_mobile*/ ctx[10] || /*_desktop*/ ctx[5]) && create_if_block$v(ctx);
@@ -1930,7 +1922,7 @@ function create_fragment$_(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block_4$5(ctx);
+					if_block1 = create_if_block_4$4(ctx);
 					if_block1.c();
 					if_block1.m(div0, t1);
 				}
@@ -5355,7 +5347,7 @@ function create_if_block$p(ctx) {
 	let if_block;
 	let if_block_anchor;
 	let current;
-	const if_block_creators = [create_if_block_1$d, create_if_block_3$b];
+	const if_block_creators = [create_if_block_1$d, create_if_block_3$a];
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
@@ -5437,12 +5429,12 @@ function create_if_block$p(ctx) {
 }
 
 // (43:19) 
-function create_if_block_3$b(ctx) {
+function create_if_block_3$a(ctx) {
 	let div;
 	let goa_spinner;
 	let t;
 	let div_class_value;
-	let if_block = /*message*/ ctx[0] && create_if_block_4$4(ctx);
+	let if_block = /*message*/ ctx[0] && create_if_block_4$3(ctx);
 
 	return {
 		c() {
@@ -5474,7 +5466,7 @@ function create_if_block_3$b(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block_4$4(ctx);
+					if_block = create_if_block_4$3(ctx);
 					if_block.c();
 					if_block.m(div, null);
 				}
@@ -5586,7 +5578,7 @@ function create_if_block_1$d(ctx) {
 }
 
 // (46:6) {#if message}
-function create_if_block_4$4(ctx) {
+function create_if_block_4$3(ctx) {
 	let div;
 	let t;
 
@@ -6461,18 +6453,18 @@ customElements.define("goa-divider", Divider);
 
 function get_each_context_1$1(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[69] = list[i];
-	child_ctx[73] = i;
+	child_ctx[61] = list[i];
+	child_ctx[65] = i;
 	return child_ctx;
 }
 
 function get_each_context$8(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[69] = list[i];
+	child_ctx[61] = list[i];
 	return child_ctx;
 }
 
-// (509:2) {:else}
+// (444:2) {:else}
 function create_else_block$a(ctx) {
 	let slot;
 	let t0;
@@ -6483,30 +6475,42 @@ function create_else_block$a(ctx) {
 	let input_style_value;
 	let input_aria_controls_value;
 	let input_aria_label_value;
-	let input_id_value;
 	let input_aria_owns_value;
 	let input_readonly_value;
 	let t2;
-	let t3;
 	let div_style_value;
-	let t4;
+	let t3;
 	let ul;
+	let each_blocks = [];
+	let each_1_lookup = new Map();
 	let ul_id_value;
 	let ul_aria_label_value;
 	let ul_style_value;
 	let mounted;
 	let dispose;
-	let if_block0 = /*leadingicon*/ ctx[4] && create_if_block_4$3(ctx);
-	let if_block1 = /*_inputValue*/ ctx[16] && /*_filterable*/ ctx[20] && create_if_block_3$a(ctx);
-	let if_block2 = (/*_filterable*/ ctx[20] && /*_inputValue*/ ctx[16].length === 0 || !/*_filterable*/ ctx[20]) && create_if_block_2$a(ctx);
+	let if_block0 = /*leadingicon*/ ctx[4] && create_if_block_2$a(ctx);
 
 	function select_block_type_1(ctx, dirty) {
-		if (/*_filteredOptions*/ ctx[21].length > 0) return create_if_block_1$c;
-		return create_else_block_1;
+		if (/*_inputEl*/ ctx[23]?.value && /*_filterable*/ ctx[24]) return create_if_block_1$c;
+		return create_else_block_2;
 	}
 
 	let current_block_type = select_block_type_1(ctx);
-	let if_block3 = current_block_type(ctx);
+	let if_block1 = current_block_type(ctx);
+	let each_value_1 = /*_filteredOptions*/ ctx[15];
+	const get_key = ctx => /*index*/ ctx[65];
+
+	for (let i = 0; i < each_value_1.length; i += 1) {
+		let child_ctx = get_each_context_1$1(ctx, each_value_1, i);
+		let key = get_key(child_ctx);
+		each_1_lookup.set(key, each_blocks[i] = create_each_block_1$1(key, child_ctx));
+	}
+
+	let each_1_else = null;
+
+	if (!each_value_1.length) {
+		each_1_else = create_else_block_1();
+	}
 
 	return {
 		c() {
@@ -6518,56 +6522,60 @@ function create_else_block$a(ctx) {
 			t1 = space();
 			input = element("input");
 			t2 = space();
-			if (if_block1) if_block1.c();
+			if_block1.c();
 			t3 = space();
-			if (if_block2) if_block2.c();
-			t4 = space();
 			ul = element("ul");
-			if_block3.c();
 
-			attr(input, "style", input_style_value = `cursor: ${!/*_disabled*/ ctx[28]
-			? /*_filterable*/ ctx[20] ? "auto" : "pointer"
-			: 'default'}`);
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			if (each_1_else) {
+				each_1_else.c();
+			}
 
-			attr(input, "tabindex", "1");
+			attr(input, "style", input_style_value = `
+            cursor: ${!/*_disabled*/ ctx[26]
+			? /*_filterable*/ ctx[24] ? "auto" : "pointer"
+			: "default"};
+          `);
+
+			attr(input, "data-testid", "input");
 			attr(input, "type", "text");
 			attr(input, "role", "combobox");
 			attr(input, "autocomplete", "off");
 			attr(input, "aria-autocomplete", "list");
-			attr(input, "aria-controls", input_aria_controls_value = `menu-${/*id*/ ctx[14] || /*name*/ ctx[1]}`);
-			attr(input, "aria-expanded", /*_isMenuVisible*/ ctx[23]);
-			attr(input, "aria-label", input_aria_label_value = /*arialabel*/ ctx[2] || /*name*/ ctx[1]);
-			attr(input, "aria-labelledby", /*arialabelledby*/ ctx[3]);
-			attr(input, "id", input_id_value = `${/*id*/ ctx[14] || /*name*/ ctx[1]}`);
-			attr(input, "aria-activedescendant", /*_activeDescendantId*/ ctx[29]);
-			attr(input, "aria-disabled", /*_disabled*/ ctx[28]);
-
-			attr(input, "aria-owns", input_aria_owns_value = /*_isMenuVisible*/ ctx[23]
-			? `menu-${/*id*/ ctx[14] || /*name*/ ctx[1]}`
+			attr(input, "aria-controls", input_aria_controls_value = `menu-${/*name*/ ctx[0]}`);
+			attr(input, "aria-expanded", /*_isMenuVisible*/ ctx[18]);
+			attr(input, "aria-label", input_aria_label_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0]);
+			attr(input, "aria-labelledby", /*arialabelledby*/ ctx[2]);
+			attr(input, "id", /*name*/ ctx[0]);
+			attr(input, "aria-activedescendant", /*_activeDescendantId*/ ctx[25]);
+			attr(input, "aria-disabled", /*_disabled*/ ctx[26]);
+
+			attr(input, "aria-owns", input_aria_owns_value = /*_isMenuVisible*/ ctx[18]
+			? `menu-${/*name*/ ctx[0]}`
 			: undefined);
 
 			attr(input, "aria-haspopup", "listbox");
-			input.disabled = /*_disabled*/ ctx[28];
-			input.readOnly = input_readonly_value = !/*_filterable*/ ctx[20];
+			input.disabled = /*_disabled*/ ctx[26];
+			input.readOnly = input_readonly_value = !/*_filterable*/ ctx[24];
 			attr(input, "placeholder", /*placeholder*/ ctx[6]);
-			attr(input, "name", /*name*/ ctx[1]);
+			attr(input, "name", /*name*/ ctx[0]);
 			attr(div, "slot", "target");
-
-			attr(div, "style", div_style_value = `
-          ${cssVar("width", /*width*/ ctx[7])}
-        `);
-
+			attr(div, "style", div_style_value = cssVar("width", /*width*/ ctx[7]));
 			attr(div, "class", "dropdown-input-group");
-			toggle_class(div, "dropdown-input-group--disabled", /*_disabled*/ ctx[28]);
-			toggle_class(div, "error", /*_error*/ ctx[30]);
-			attr(ul, "id", ul_id_value = `menu-${/*id*/ ctx[14] || /*name*/ ctx[1]}`);
+			toggle_class(div, "dropdown-input-group--disabled", /*_disabled*/ ctx[26]);
+			toggle_class(div, "error", /*_error*/ ctx[27]);
+			attr(ul, "id", ul_id_value = `menu-${/*name*/ ctx[0]}`);
 			attr(ul, "role", "listbox");
 			attr(ul, "tabindex", "-1");
 			attr(ul, "data-testid", "dropdown-menu");
-			attr(ul, "aria-label", ul_aria_label_value = /*arialabel*/ ctx[2] || /*name*/ ctx[1]);
-			attr(ul, "aria-labelledby", /*arialabelledby*/ ctx[3]);
+			attr(ul, "aria-label", ul_aria_label_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0]);
+			attr(ul, "aria-labelledby", /*arialabelledby*/ ctx[2]);
 
 			attr(ul, "style", ul_style_value = `
+          width: ${/*_width*/ ctx[19]};
           outline: none;
           overflow-y: auto;
           max-height: ${/*maxheight*/ ctx[5]};
@@ -6575,11 +6583,12 @@ function create_else_block$a(ctx) {
 
 			set_custom_element_data(goa_popover, "disabled", /*disabled*/ ctx[8]);
 			set_custom_element_data(goa_popover, "relative", /*relative*/ ctx[9]);
-			set_custom_element_data(goa_popover, "open", /*_isMenuVisible*/ ctx[23]);
+			set_custom_element_data(goa_popover, "data-testid", "option-list");
+			set_custom_element_data(goa_popover, "maxwidth", "1000px");
+			set_custom_element_data(goa_popover, "open", /*_isMenuVisible*/ ctx[18]);
 			set_custom_element_data(goa_popover, "padded", "false");
-			set_custom_element_data(goa_popover, "width", /*_width*/ ctx[24]);
 			set_custom_element_data(goa_popover, "tabindex", "-1");
-			set_custom_element_data(goa_popover, "maxwidth", /*_inputWidth*/ ctx[25]);
+			set_custom_element_data(goa_popover, "width", /*_width*/ ctx[19]);
 		},
 		m(target, anchor) {
 			insert(target, slot, anchor);
@@ -6589,23 +6598,30 @@ function create_else_block$a(ctx) {
 			if (if_block0) if_block0.m(div, null);
 			append(div, t1);
 			append(div, input);
-			/*input_binding*/ ctx[43](input);
-			set_input_value(input, /*_inputValue*/ ctx[16]);
+			/*input_binding*/ ctx[42](input);
 			append(div, t2);
-			if (if_block1) if_block1.m(div, null);
-			append(div, t3);
-			if (if_block2) if_block2.m(div, null);
-			append(goa_popover, t4);
+			if_block1.m(div, null);
+			append(goa_popover, t3);
 			append(goa_popover, ul);
-			if_block3.m(ul, null);
-			/*ul_binding*/ ctx[47](ul);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				if (each_blocks[i]) {
+					each_blocks[i].m(ul, null);
+				}
+			}
+
+			if (each_1_else) {
+				each_1_else.m(ul, null);
+			}
+
+			/*ul_binding*/ ctx[44](ul);
 
 			if (!mounted) {
 				dispose = [
-					listen(input, "input", /*input_input_handler*/ ctx[44]),
-					listen(input, "keydown", /*onInputKeyDown*/ ctx[34]),
-					listen(goa_popover, "_open", /*showMenu*/ ctx[31]),
-					listen(goa_popover, "_close", /*closeMenu*/ ctx[32])
+					listen(input, "keydown", /*onInputKeyDown*/ ctx[32]),
+					listen(input, "keyup", /*onInputKeyUp*/ ctx[31]),
+					listen(goa_popover, "_open", /*showMenu*/ ctx[28]),
+					listen(goa_popover, "_close", /*hideMenu*/ ctx[29])
 				];
 
 				mounted = true;
@@ -6616,7 +6632,7 @@ function create_else_block$a(ctx) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_4$3(ctx);
+					if_block0 = create_if_block_2$a(ctx);
 					if_block0.c();
 					if_block0.m(div, t1);
 				}
@@ -6625,51 +6641,53 @@ function create_else_block$a(ctx) {
 				if_block0 = null;
 			}
 
-			if (dirty[0] & /*_disabled, _filterable*/ 269484032 && input_style_value !== (input_style_value = `cursor: ${!/*_disabled*/ ctx[28]
-			? /*_filterable*/ ctx[20] ? "auto" : "pointer"
-			: 'default'}`)) {
+			if (dirty[0] & /*_disabled, _filterable*/ 83886080 && input_style_value !== (input_style_value = `
+            cursor: ${!/*_disabled*/ ctx[26]
+			? /*_filterable*/ ctx[24] ? "auto" : "pointer"
+			: "default"};
+          `)) {
 				attr(input, "style", input_style_value);
 			}
 
-			if (dirty[0] & /*id, name*/ 16386 && input_aria_controls_value !== (input_aria_controls_value = `menu-${/*id*/ ctx[14] || /*name*/ ctx[1]}`)) {
+			if (dirty[0] & /*name*/ 1 && input_aria_controls_value !== (input_aria_controls_value = `menu-${/*name*/ ctx[0]}`)) {
 				attr(input, "aria-controls", input_aria_controls_value);
 			}
 
-			if (dirty[0] & /*_isMenuVisible*/ 8388608) {
-				attr(input, "aria-expanded", /*_isMenuVisible*/ ctx[23]);
+			if (dirty[0] & /*_isMenuVisible*/ 262144) {
+				attr(input, "aria-expanded", /*_isMenuVisible*/ ctx[18]);
 			}
 
-			if (dirty[0] & /*arialabel, name*/ 6 && input_aria_label_value !== (input_aria_label_value = /*arialabel*/ ctx[2] || /*name*/ ctx[1])) {
+			if (dirty[0] & /*arialabel, name*/ 3 && input_aria_label_value !== (input_aria_label_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0])) {
 				attr(input, "aria-label", input_aria_label_value);
 			}
 
-			if (dirty[0] & /*arialabelledby*/ 8) {
-				attr(input, "aria-labelledby", /*arialabelledby*/ ctx[3]);
+			if (dirty[0] & /*arialabelledby*/ 4) {
+				attr(input, "aria-labelledby", /*arialabelledby*/ ctx[2]);
 			}
 
-			if (dirty[0] & /*id, name*/ 16386 && input_id_value !== (input_id_value = `${/*id*/ ctx[14] || /*name*/ ctx[1]}`)) {
-				attr(input, "id", input_id_value);
+			if (dirty[0] & /*name*/ 1) {
+				attr(input, "id", /*name*/ ctx[0]);
 			}
 
-			if (dirty[0] & /*_activeDescendantId*/ 536870912) {
-				attr(input, "aria-activedescendant", /*_activeDescendantId*/ ctx[29]);
+			if (dirty[0] & /*_activeDescendantId*/ 33554432) {
+				attr(input, "aria-activedescendant", /*_activeDescendantId*/ ctx[25]);
 			}
 
-			if (dirty[0] & /*_disabled*/ 268435456) {
-				attr(input, "aria-disabled", /*_disabled*/ ctx[28]);
+			if (dirty[0] & /*_disabled*/ 67108864) {
+				attr(input, "aria-disabled", /*_disabled*/ ctx[26]);
 			}
 
-			if (dirty[0] & /*_isMenuVisible, id, name*/ 8404994 && input_aria_owns_value !== (input_aria_owns_value = /*_isMenuVisible*/ ctx[23]
-			? `menu-${/*id*/ ctx[14] || /*name*/ ctx[1]}`
+			if (dirty[0] & /*_isMenuVisible, name*/ 262145 && input_aria_owns_value !== (input_aria_owns_value = /*_isMenuVisible*/ ctx[18]
+			? `menu-${/*name*/ ctx[0]}`
 			: undefined)) {
 				attr(input, "aria-owns", input_aria_owns_value);
 			}
 
-			if (dirty[0] & /*_disabled*/ 268435456) {
-				input.disabled = /*_disabled*/ ctx[28];
+			if (dirty[0] & /*_disabled*/ 67108864) {
+				input.disabled = /*_disabled*/ ctx[26];
 			}
 
-			if (dirty[0] & /*_filterable*/ 1048576 && input_readonly_value !== (input_readonly_value = !/*_filterable*/ ctx[20])) {
+			if (dirty[0] & /*_filterable*/ 16777216 && input_readonly_value !== (input_readonly_value = !/*_filterable*/ ctx[24])) {
 				input.readOnly = input_readonly_value;
 			}
 
@@ -6677,79 +6695,64 @@ function create_else_block$a(ctx) {
 				attr(input, "placeholder", /*placeholder*/ ctx[6]);
 			}
 
-			if (dirty[0] & /*name*/ 2) {
-				attr(input, "name", /*name*/ ctx[1]);
+			if (dirty[0] & /*name*/ 1) {
+				attr(input, "name", /*name*/ ctx[0]);
 			}
 
-			if (dirty[0] & /*_inputValue*/ 65536 && input.value !== /*_inputValue*/ ctx[16]) {
-				set_input_value(input, /*_inputValue*/ ctx[16]);
-			}
+			if (current_block_type === (current_block_type = select_block_type_1(ctx)) && if_block1) {
+				if_block1.p(ctx, dirty);
+			} else {
+				if_block1.d(1);
+				if_block1 = current_block_type(ctx);
 
-			if (/*_inputValue*/ ctx[16] && /*_filterable*/ ctx[20]) {
 				if (if_block1) {
-					if_block1.p(ctx, dirty);
-				} else {
-					if_block1 = create_if_block_3$a(ctx);
 					if_block1.c();
-					if_block1.m(div, t3);
+					if_block1.m(div, null);
 				}
-			} else if (if_block1) {
-				if_block1.d(1);
-				if_block1 = null;
 			}
 
-			if (/*_filterable*/ ctx[20] && /*_inputValue*/ ctx[16].length === 0 || !/*_filterable*/ ctx[20]) {
-				if (if_block2) {
-					if_block2.p(ctx, dirty);
-				} else {
-					if_block2 = create_if_block_2$a(ctx);
-					if_block2.c();
-					if_block2.m(div, null);
-				}
-			} else if (if_block2) {
-				if_block2.d(1);
-				if_block2 = null;
-			}
-
-			if (dirty[0] & /*width*/ 128 && div_style_value !== (div_style_value = `
-          ${cssVar("width", /*width*/ ctx[7])}
-        `)) {
+			if (dirty[0] & /*width*/ 128 && div_style_value !== (div_style_value = cssVar("width", /*width*/ ctx[7]))) {
 				attr(div, "style", div_style_value);
 			}
 
-			if (dirty[0] & /*_disabled*/ 268435456) {
-				toggle_class(div, "dropdown-input-group--disabled", /*_disabled*/ ctx[28]);
+			if (dirty[0] & /*_disabled*/ 67108864) {
+				toggle_class(div, "dropdown-input-group--disabled", /*_disabled*/ ctx[26]);
 			}
 
-			if (dirty[0] & /*_error*/ 1073741824) {
-				toggle_class(div, "error", /*_error*/ ctx[30]);
+			if (dirty[0] & /*_error*/ 134217728) {
+				toggle_class(div, "error", /*_error*/ ctx[27]);
 			}
 
-			if (current_block_type === (current_block_type = select_block_type_1(ctx)) && if_block3) {
-				if_block3.p(ctx, dirty);
-			} else {
-				if_block3.d(1);
-				if_block3 = current_block_type(ctx);
+			if (dirty[0] & /*_filteredOptions, _inputEl, _highlightedIndex, onSelect*/ 1082179584) {
+				each_value_1 = /*_filteredOptions*/ ctx[15];
+				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value_1, each_1_lookup, ul, destroy_block, create_each_block_1$1, null, get_each_context_1$1);
 
-				if (if_block3) {
-					if_block3.c();
-					if_block3.m(ul, null);
+				if (!each_value_1.length && each_1_else) {
+					each_1_else.p(ctx, dirty);
+				} else if (!each_value_1.length) {
+					each_1_else = create_else_block_1();
+					each_1_else.c();
+					each_1_else.m(ul, null);
+				} else if (each_1_else) {
+					each_1_else.d(1);
+					each_1_else = null;
 				}
 			}
 
-			if (dirty[0] & /*id, name*/ 16386 && ul_id_value !== (ul_id_value = `menu-${/*id*/ ctx[14] || /*name*/ ctx[1]}`)) {
+			if (dirty[0] & /*name*/ 1 && ul_id_value !== (ul_id_value = `menu-${/*name*/ ctx[0]}`)) {
 				attr(ul, "id", ul_id_value);
 			}
 
-			if (dirty[0] & /*arialabel, name*/ 6 && ul_aria_label_value !== (ul_aria_label_value = /*arialabel*/ ctx[2] || /*name*/ ctx[1])) {
+			if (dirty[0] & /*arialabel, name*/ 3 && ul_aria_label_value !== (ul_aria_label_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0])) {
 				attr(ul, "aria-label", ul_aria_label_value);
 			}
 
-			if (dirty[0] & /*arialabelledby*/ 8) {
-				attr(ul, "aria-labelledby", /*arialabelledby*/ ctx[3]);
+			if (dirty[0] & /*arialabelledby*/ 4) {
+				attr(ul, "aria-labelledby", /*arialabelledby*/ ctx[2]);
 			}
 
-			if (dirty[0] & /*maxheight*/ 32 && ul_style_value !== (ul_style_value = `
+			if (dirty[0] & /*_width, maxheight*/ 524320 && ul_style_value !== (ul_style_value = `
+          width: ${/*_width*/ ctx[19]};
           outline: none;
           overflow-y: auto;
           max-height: ${/*maxheight*/ ctx[5]};
@@ -6765,16 +6768,12 @@ function create_else_block$a(ctx) {
 				set_custom_element_data(goa_popover, "relative", /*relative*/ ctx[9]);
 			}
 
-			if (dirty[0] & /*_isMenuVisible*/ 8388608) {
-				set_custom_element_data(goa_popover, "open", /*_isMenuVisible*/ ctx[23]);
-			}
-
-			if (dirty[0] & /*_width*/ 16777216) {
-				set_custom_element_data(goa_popover, "width", /*_width*/ ctx[24]);
+			if (dirty[0] & /*_isMenuVisible*/ 262144) {
+				set_custom_element_data(goa_popover, "open", /*_isMenuVisible*/ ctx[18]);
 			}
 
-			if (dirty[0] & /*_inputWidth*/ 33554432) {
-				set_custom_element_data(goa_popover, "maxwidth", /*_inputWidth*/ ctx[25]);
+			if (dirty[0] & /*_width*/ 524288) {
+				set_custom_element_data(goa_popover, "width", /*_width*/ ctx[19]);
 			}
 		},
 		d(detaching) {
@@ -6782,26 +6781,29 @@ function create_else_block$a(ctx) {
 			if (detaching) detach(t0);
 			if (detaching) detach(goa_popover);
 			if (if_block0) if_block0.d();
-			/*input_binding*/ ctx[43](null);
-			if (if_block1) if_block1.d();
-			if (if_block2) if_block2.d();
-			if_block3.d();
-			/*ul_binding*/ ctx[47](null);
+			/*input_binding*/ ctx[42](null);
+			if_block1.d();
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].d();
+			}
+
+			if (each_1_else) each_1_else.d();
+			/*ul_binding*/ ctx[44](null);
 			mounted = false;
 			run_all(dispose);
 		}
 	};
 }
 
-// (489:2) {#if _native}
+// (424:2) {#if _native}
 function create_if_block$o(ctx) {
 	let select;
 	let slot;
 	let select_aria_label_value;
-	let select_id_value;
 	let mounted;
 	let dispose;
-	let each_value = /*_options*/ ctx[15];
+	let each_value = /*_options*/ ctx[17];
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
@@ -6817,12 +6819,12 @@ function create_if_block$o(ctx) {
 				each_blocks[i].c();
 			}
 
-			select.disabled = /*_disabled*/ ctx[28];
-			attr(select, "aria-labelledby", /*arialabelledby*/ ctx[3]);
-			attr(select, "aria-label", select_aria_label_value = /*arialabel*/ ctx[2] || /*name*/ ctx[1]);
-			attr(select, "id", select_id_value = /*id*/ ctx[14] || /*name*/ ctx[1]);
-			attr(select, "name", /*name*/ ctx[1]);
-			toggle_class(select, "error", /*_error*/ ctx[30]);
+			attr(select, "name", /*name*/ ctx[0]);
+			attr(select, "aria-label", select_aria_label_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0]);
+			attr(select, "aria-labelledby", /*arialabelledby*/ ctx[2]);
+			select.disabled = /*_disabled*/ ctx[26];
+			attr(select, "id", /*name*/ ctx[0]);
+			toggle_class(select, "error", /*_error*/ ctx[27]);
 		},
 		m(target, anchor) {
 			insert(target, select, anchor);
@@ -6834,7 +6836,7 @@ function create_if_block$o(ctx) {
 				}
 			}
 
-			/*select_binding*/ ctx[42](select);
+			/*select_binding*/ ctx[41](select);
 
 			if (!mounted) {
 				dispose = listen(select, "change", /*onNativeSelect*/ ctx[35]);
@@ -6842,8 +6844,8 @@ function create_if_block$o(ctx) {
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*value, _options*/ 32769) {
-				each_value = /*_options*/ ctx[15];
+			if (dirty[0] & /*value, _options*/ 131080) {
+				each_value = /*_options*/ ctx[17];
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
@@ -6865,42 +6867,42 @@ function create_if_block$o(ctx) {
 				each_blocks.length = each_value.length;
 			}
 
-			if (dirty[0] & /*_disabled*/ 268435456) {
-				select.disabled = /*_disabled*/ ctx[28];
+			if (dirty[0] & /*name*/ 1) {
+				attr(select, "name", /*name*/ ctx[0]);
 			}
 
-			if (dirty[0] & /*arialabelledby*/ 8) {
-				attr(select, "aria-labelledby", /*arialabelledby*/ ctx[3]);
+			if (dirty[0] & /*arialabel, name*/ 3 && select_aria_label_value !== (select_aria_label_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0])) {
+				attr(select, "aria-label", select_aria_label_value);
 			}
 
-			if (dirty[0] & /*arialabel, name*/ 6 && select_aria_label_value !== (select_aria_label_value = /*arialabel*/ ctx[2] || /*name*/ ctx[1])) {
-				attr(select, "aria-label", select_aria_label_value);
+			if (dirty[0] & /*arialabelledby*/ 4) {
+				attr(select, "aria-labelledby", /*arialabelledby*/ ctx[2]);
 			}
 
-			if (dirty[0] & /*id, name*/ 16386 && select_id_value !== (select_id_value = /*id*/ ctx[14] || /*name*/ ctx[1])) {
-				attr(select, "id", select_id_value);
+			if (dirty[0] & /*_disabled*/ 67108864) {
+				select.disabled = /*_disabled*/ ctx[26];
 			}
 
-			if (dirty[0] & /*name*/ 2) {
-				attr(select, "name", /*name*/ ctx[1]);
+			if (dirty[0] & /*name*/ 1) {
+				attr(select, "id", /*name*/ ctx[0]);
 			}
 
-			if (dirty[0] & /*_error*/ 1073741824) {
-				toggle_class(select, "error", /*_error*/ ctx[30]);
+			if (dirty[0] & /*_error*/ 134217728) {
+				toggle_class(select, "error", /*_error*/ ctx[27]);
 			}
 		},
 		d(detaching) {
 			if (detaching) detach(select);
 			destroy_each(each_blocks, detaching);
-			/*select_binding*/ ctx[42](null);
+			/*select_binding*/ ctx[41](null);
 			mounted = false;
 			dispose();
 		}
 	};
 }
 
-// (531:8) {#if leadingicon}
-function create_if_block_4$3(ctx) {
+// (467:8) {#if leadingicon}
+function create_if_block_2$a(ctx) {
 	let goa_icon;
 
 	return {
@@ -6924,131 +6926,148 @@ function create_if_block_4$3(ctx) {
 	};
 }
 
-// (562:8) {#if _inputValue && _filterable}
-function create_if_block_3$a(ctx) {
+// (517:8) {:else}
+function create_else_block_2(ctx) {
 	let goa_icon;
-	let goa_icon_tabindex_value;
 	let goa_icon_arialabel_value;
+	let goa_icon_ariacontrols_value;
+	let goa_icon_ariaexpanded_value;
+	let goa_icon_type_value;
 	let mounted;
 	let dispose;
 
 	return {
 		c() {
 			goa_icon = element("goa-icon");
-			set_custom_element_data(goa_icon, "tabindex", goa_icon_tabindex_value = /*_disabled*/ ctx[28] ? -1 : 0);
 			set_custom_element_data(goa_icon, "role", "button");
-			set_custom_element_data(goa_icon, "arialabel", goa_icon_arialabel_value = "clear " + (/*arialabel*/ ctx[2] || /*name*/ ctx[1]));
-			set_custom_element_data(goa_icon, "class", "dropdown-icon--clear");
+			set_custom_element_data(goa_icon, "tabindex", "-1");
+			set_custom_element_data(goa_icon, "id", /*name*/ ctx[0]);
+			set_custom_element_data(goa_icon, "arialabel", goa_icon_arialabel_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0]);
+			set_custom_element_data(goa_icon, "ariacontrols", goa_icon_ariacontrols_value = `menu-${/*name*/ ctx[0]}`);
+			set_custom_element_data(goa_icon, "ariaexpanded", goa_icon_ariaexpanded_value = fromBoolean(/*_isMenuVisible*/ ctx[18]));
+			set_custom_element_data(goa_icon, "class", "dropdown-icon--arrow");
 			set_custom_element_data(goa_icon, "size", "medium");
-			set_custom_element_data(goa_icon, "type", "close");
-			toggle_class(goa_icon, "disabled", /*_disabled*/ ctx[28]);
+
+			set_custom_element_data(goa_icon, "type", goa_icon_type_value = /*_isMenuVisible*/ ctx[18]
+			? "chevron-up"
+			: "chevron-down");
 		},
 		m(target, anchor) {
 			insert(target, goa_icon, anchor);
 
 			if (!mounted) {
-				dispose = [
-					listen(goa_icon, "click", stop_propagation(/*onClear*/ ctx[37])),
-					listen(goa_icon, "keydown", /*keydown_handler*/ ctx[45])
-				];
-
+				dispose = listen(goa_icon, "click", /*onChevronClick*/ ctx[36]);
 				mounted = true;
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*_disabled*/ 268435456 && goa_icon_tabindex_value !== (goa_icon_tabindex_value = /*_disabled*/ ctx[28] ? -1 : 0)) {
-				set_custom_element_data(goa_icon, "tabindex", goa_icon_tabindex_value);
+			if (dirty[0] & /*name*/ 1) {
+				set_custom_element_data(goa_icon, "id", /*name*/ ctx[0]);
 			}
 
-			if (dirty[0] & /*arialabel, name*/ 6 && goa_icon_arialabel_value !== (goa_icon_arialabel_value = "clear " + (/*arialabel*/ ctx[2] || /*name*/ ctx[1]))) {
+			if (dirty[0] & /*arialabel, name*/ 3 && goa_icon_arialabel_value !== (goa_icon_arialabel_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0])) {
 				set_custom_element_data(goa_icon, "arialabel", goa_icon_arialabel_value);
 			}
 
-			if (dirty[0] & /*_disabled*/ 268435456) {
-				toggle_class(goa_icon, "disabled", /*_disabled*/ ctx[28]);
+			if (dirty[0] & /*name*/ 1 && goa_icon_ariacontrols_value !== (goa_icon_ariacontrols_value = `menu-${/*name*/ ctx[0]}`)) {
+				set_custom_element_data(goa_icon, "ariacontrols", goa_icon_ariacontrols_value);
+			}
+
+			if (dirty[0] & /*_isMenuVisible*/ 262144 && goa_icon_ariaexpanded_value !== (goa_icon_ariaexpanded_value = fromBoolean(/*_isMenuVisible*/ ctx[18]))) {
+				set_custom_element_data(goa_icon, "ariaexpanded", goa_icon_ariaexpanded_value);
+			}
+
+			if (dirty[0] & /*_isMenuVisible*/ 262144 && goa_icon_type_value !== (goa_icon_type_value = /*_isMenuVisible*/ ctx[18]
+			? "chevron-up"
+			: "chevron-down")) {
+				set_custom_element_data(goa_icon, "type", goa_icon_type_value);
 			}
 		},
 		d(detaching) {
 			if (detaching) detach(goa_icon);
 			mounted = false;
-			run_all(dispose);
+			dispose();
 		}
 	};
 }
 
-// (580:8) {#if (_filterable && _inputValue.length === 0) || !_filterable}
-function create_if_block_2$a(ctx) {
+// (502:8) {#if _inputEl?.value && _filterable}
+function create_if_block_1$c(ctx) {
 	let goa_icon;
-	let goa_icon_id_value;
+	let goa_icon_tabindex_value;
 	let goa_icon_arialabel_value;
 	let goa_icon_ariacontrols_value;
 	let goa_icon_ariaexpanded_value;
-	let goa_icon_type_value;
 	let mounted;
 	let dispose;
 
 	return {
 		c() {
 			goa_icon = element("goa-icon");
+			set_custom_element_data(goa_icon, "id", /*name*/ ctx[0]);
+			set_custom_element_data(goa_icon, "tabindex", goa_icon_tabindex_value = /*_disabled*/ ctx[26] ? -1 : 0);
 			set_custom_element_data(goa_icon, "role", "button");
-			set_custom_element_data(goa_icon, "id", goa_icon_id_value = `${/*id*/ ctx[14] || /*name*/ ctx[1]}`);
-			set_custom_element_data(goa_icon, "arialabel", goa_icon_arialabel_value = /*arialabel*/ ctx[2] || /*name*/ ctx[1]);
-			set_custom_element_data(goa_icon, "ariacontrols", goa_icon_ariacontrols_value = `menu-${/*id*/ ctx[14] || /*name*/ ctx[1]}`);
-			set_custom_element_data(goa_icon, "ariaexpanded", goa_icon_ariaexpanded_value = /*_isMenuVisible*/ ctx[23] ? "true" : "false");
-			set_custom_element_data(goa_icon, "class", "dropdown-icon--arrow");
+			set_custom_element_data(goa_icon, "arialabel", goa_icon_arialabel_value = `clear ${/*arialabel*/ ctx[1] || /*name*/ ctx[0]}`);
+			set_custom_element_data(goa_icon, "ariacontrols", goa_icon_ariacontrols_value = `menu-${/*name*/ ctx[0]}`);
+			set_custom_element_data(goa_icon, "ariaexpanded", goa_icon_ariaexpanded_value = fromBoolean(/*_isMenuVisible*/ ctx[18]));
+			set_custom_element_data(goa_icon, "class", "dropdown-icon--clear");
 			set_custom_element_data(goa_icon, "size", "medium");
-
-			set_custom_element_data(goa_icon, "type", goa_icon_type_value = /*_isMenuVisible*/ ctx[23]
-			? 'chevron-up'
-			: 'chevron-down');
+			set_custom_element_data(goa_icon, "type", "close");
+			toggle_class(goa_icon, "disabled", /*_disabled*/ ctx[26]);
 		},
 		m(target, anchor) {
 			insert(target, goa_icon, anchor);
 
 			if (!mounted) {
-				dispose = listen(goa_icon, "click", /*onClick*/ ctx[36]);
+				dispose = [
+					listen(goa_icon, "click", stop_propagation(/*onClearIconClick*/ ctx[34])),
+					listen(goa_icon, "keydown", /*onClearIconKeyDown*/ ctx[33])
+				];
+
 				mounted = true;
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*id, name*/ 16386 && goa_icon_id_value !== (goa_icon_id_value = `${/*id*/ ctx[14] || /*name*/ ctx[1]}`)) {
-				set_custom_element_data(goa_icon, "id", goa_icon_id_value);
+			if (dirty[0] & /*name*/ 1) {
+				set_custom_element_data(goa_icon, "id", /*name*/ ctx[0]);
+			}
+
+			if (dirty[0] & /*_disabled*/ 67108864 && goa_icon_tabindex_value !== (goa_icon_tabindex_value = /*_disabled*/ ctx[26] ? -1 : 0)) {
+				set_custom_element_data(goa_icon, "tabindex", goa_icon_tabindex_value);
 			}
 
-			if (dirty[0] & /*arialabel, name*/ 6 && goa_icon_arialabel_value !== (goa_icon_arialabel_value = /*arialabel*/ ctx[2] || /*name*/ ctx[1])) {
+			if (dirty[0] & /*arialabel, name*/ 3 && goa_icon_arialabel_value !== (goa_icon_arialabel_value = `clear ${/*arialabel*/ ctx[1] || /*name*/ ctx[0]}`)) {
 				set_custom_element_data(goa_icon, "arialabel", goa_icon_arialabel_value);
 			}
 
-			if (dirty[0] & /*id, name*/ 16386 && goa_icon_ariacontrols_value !== (goa_icon_ariacontrols_value = `menu-${/*id*/ ctx[14] || /*name*/ ctx[1]}`)) {
+			if (dirty[0] & /*name*/ 1 && goa_icon_ariacontrols_value !== (goa_icon_ariacontrols_value = `menu-${/*name*/ ctx[0]}`)) {
 				set_custom_element_data(goa_icon, "ariacontrols", goa_icon_ariacontrols_value);
 			}
 
-			if (dirty[0] & /*_isMenuVisible*/ 8388608 && goa_icon_ariaexpanded_value !== (goa_icon_ariaexpanded_value = /*_isMenuVisible*/ ctx[23] ? "true" : "false")) {
+			if (dirty[0] & /*_isMenuVisible*/ 262144 && goa_icon_ariaexpanded_value !== (goa_icon_ariaexpanded_value = fromBoolean(/*_isMenuVisible*/ ctx[18]))) {
 				set_custom_element_data(goa_icon, "ariaexpanded", goa_icon_ariaexpanded_value);
 			}
 
-			if (dirty[0] & /*_isMenuVisible*/ 8388608 && goa_icon_type_value !== (goa_icon_type_value = /*_isMenuVisible*/ ctx[23]
-			? 'chevron-up'
-			: 'chevron-down')) {
-				set_custom_element_data(goa_icon, "type", goa_icon_type_value);
+			if (dirty[0] & /*_disabled*/ 67108864) {
+				toggle_class(goa_icon, "disabled", /*_disabled*/ ctx[26]);
 			}
 		},
 		d(detaching) {
 			if (detaching) detach(goa_icon);
 			mounted = false;
-			dispose();
+			run_all(dispose);
 		}
 	};
 }
 
-// (626:8) {:else}
+// (565:8) {:else}
 function create_else_block_1(ctx) {
 	let li;
 
 	return {
 		c() {
 			li = element("li");
-			li.textContent = "No matches found";
+			li.textContent = "No matches found\n          ";
 			attr(li, "class", "dropdown-item");
 			attr(li, "data-testid", "dropdown-item-not-found");
 		},
@@ -7062,69 +7081,22 @@ function create_else_block_1(ctx) {
 	};
 }
 
-// (609:8) {#if _filteredOptions.length > 0}
-function create_if_block_1$c(ctx) {
-	let each_blocks = [];
-	let each_1_lookup = new Map();
-	let each_1_anchor;
-	let each_value_1 = /*_filteredOptions*/ ctx[21];
-	const get_key = ctx => /*index*/ ctx[73];
-
-	for (let i = 0; i < each_value_1.length; i += 1) {
-		let child_ctx = get_each_context_1$1(ctx, each_value_1, i);
-		let key = get_key(child_ctx);
-		each_1_lookup.set(key, each_blocks[i] = create_each_block_1$1(key, child_ctx));
-	}
-
-	return {
-		c() {
-			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].c();
-			}
-
-			each_1_anchor = empty();
-		},
-		m(target, anchor) {
-			for (let i = 0; i < each_blocks.length; i += 1) {
-				if (each_blocks[i]) {
-					each_blocks[i].m(target, anchor);
-				}
-			}
-
-			insert(target, each_1_anchor, anchor);
-		},
-		p(ctx, dirty) {
-			if (dirty[0] & /*_filteredOptions, value, _highlightedIndex*/ 2228225 | dirty[1] & /*onSelect*/ 4) {
-				each_value_1 = /*_filteredOptions*/ ctx[21];
-				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value_1, each_1_lookup, each_1_anchor.parentNode, destroy_block, create_each_block_1$1, each_1_anchor, get_each_context_1$1);
-			}
-		},
-		d(detaching) {
-			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].d(detaching);
-			}
-
-			if (detaching) detach(each_1_anchor);
-		}
-	};
-}
-
-// (610:10) {#each _filteredOptions as option, index (index)}
+// (549:8) {#each _filteredOptions as option, index (index)}
 function create_each_block_1$1(key_1, ctx) {
 	let li;
-	let t0_value = (/*option*/ ctx[69].label || /*option*/ ctx[69].value) + "";
+	let t0_value = (/*option*/ ctx[61].label || /*option*/ ctx[61].value) + "";
 	let t0;
 	let t1;
 	let li_id_value;
 	let li_aria_selected_value;
-	let li_data_testid_value;
 	let li_data_index_value;
+	let li_data_testid_value;
 	let li_data_value_value;
 	let mounted;
 	let dispose;
 
 	function click_handler() {
-		return /*click_handler*/ ctx[46](/*option*/ ctx[69]);
+		return /*click_handler*/ ctx[43](/*option*/ ctx[61]);
 	}
 
 	return {
@@ -7134,15 +7106,16 @@ function create_each_block_1$1(key_1, ctx) {
 			li = element("li");
 			t0 = text(t0_value);
 			t1 = space();
-			attr(li, "id", li_id_value = /*option*/ ctx[69].value);
+			attr(li, "id", li_id_value = /*option*/ ctx[61].value);
+			attr(li, "aria-selected", li_aria_selected_value = /*_inputEl*/ ctx[23].value === (/*option*/ ctx[61].label || /*option*/ ctx[61].value));
+			attr(li, "class", "dropdown-item");
+			attr(li, "data-index", li_data_index_value = /*index*/ ctx[65]);
+			attr(li, "data-testid", li_data_testid_value = `dropdown-item-${/*option*/ ctx[61].value}`);
+			attr(li, "data-value", li_data_value_value = /*option*/ ctx[61].value);
 			attr(li, "role", "option");
 			set_style(li, "display", "block");
-			attr(li, "aria-selected", li_aria_selected_value = /*value*/ ctx[0] === /*option*/ ctx[69].value);
-			attr(li, "class", "dropdown-item");
-			attr(li, "data-testid", li_data_testid_value = `dropdown-item-${/*option*/ ctx[69].value}`);
-			attr(li, "data-index", li_data_index_value = /*index*/ ctx[73]);
-			attr(li, "data-value", li_data_value_value = /*option*/ ctx[69].value);
-			toggle_class(li, "dropdown-item--highlighted", /*index*/ ctx[73] === /*_highlightedIndex*/ ctx[17]);
+			toggle_class(li, "dropdown-item--highlighted", /*index*/ ctx[65] === /*_highlightedIndex*/ ctx[14]);
+			toggle_class(li, "selected", /*_inputEl*/ ctx[23].value === (/*option*/ ctx[61].label || /*option*/ ctx[61].value));
 			this.first = li;
 		},
 		m(target, anchor) {
@@ -7157,30 +7130,34 @@ function create_each_block_1$1(key_1, ctx) {
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
-			if (dirty[0] & /*_filteredOptions*/ 2097152 && t0_value !== (t0_value = (/*option*/ ctx[69].label || /*option*/ ctx[69].value) + "")) set_data(t0, t0_value);
+			if (dirty[0] & /*_filteredOptions*/ 32768 && t0_value !== (t0_value = (/*option*/ ctx[61].label || /*option*/ ctx[61].value) + "")) set_data(t0, t0_value);
 
-			if (dirty[0] & /*_filteredOptions*/ 2097152 && li_id_value !== (li_id_value = /*option*/ ctx[69].value)) {
+			if (dirty[0] & /*_filteredOptions*/ 32768 && li_id_value !== (li_id_value = /*option*/ ctx[61].value)) {
 				attr(li, "id", li_id_value);
 			}
 
-			if (dirty[0] & /*value, _filteredOptions*/ 2097153 && li_aria_selected_value !== (li_aria_selected_value = /*value*/ ctx[0] === /*option*/ ctx[69].value)) {
+			if (dirty[0] & /*_inputEl, _filteredOptions*/ 8421376 && li_aria_selected_value !== (li_aria_selected_value = /*_inputEl*/ ctx[23].value === (/*option*/ ctx[61].label || /*option*/ ctx[61].value))) {
 				attr(li, "aria-selected", li_aria_selected_value);
 			}
 
-			if (dirty[0] & /*_filteredOptions*/ 2097152 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${/*option*/ ctx[69].value}`)) {
-				attr(li, "data-testid", li_data_testid_value);
+			if (dirty[0] & /*_filteredOptions*/ 32768 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[65])) {
+				attr(li, "data-index", li_data_index_value);
 			}
 
-			if (dirty[0] & /*_filteredOptions*/ 2097152 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[73])) {
-				attr(li, "data-index", li_data_index_value);
+			if (dirty[0] & /*_filteredOptions*/ 32768 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${/*option*/ ctx[61].value}`)) {
+				attr(li, "data-testid", li_data_testid_value);
 			}
 
-			if (dirty[0] & /*_filteredOptions*/ 2097152 && li_data_value_value !== (li_data_value_value = /*option*/ ctx[69].value)) {
+			if (dirty[0] & /*_filteredOptions*/ 32768 && li_data_value_value !== (li_data_value_value = /*option*/ ctx[61].value)) {
 				attr(li, "data-value", li_data_value_value);
 			}
 
-			if (dirty[0] & /*_filteredOptions, _highlightedIndex*/ 2228224) {
-				toggle_class(li, "dropdown-item--highlighted", /*index*/ ctx[73] === /*_highlightedIndex*/ ctx[17]);
+			if (dirty[0] & /*_filteredOptions, _highlightedIndex*/ 49152) {
+				toggle_class(li, "dropdown-item--highlighted", /*index*/ ctx[65] === /*_highlightedIndex*/ ctx[14]);
+			}
+
+			if (dirty[0] & /*_inputEl, _filteredOptions*/ 8421376) {
+				toggle_class(li, "selected", /*_inputEl*/ ctx[23].value === (/*option*/ ctx[61].label || /*option*/ ctx[61].value));
 			}
 		},
 		d(detaching) {
@@ -7191,10 +7168,10 @@ function create_each_block_1$1(key_1, ctx) {
 	};
 }
 
-// (501:6) {#each _options as option}
+// (436:6) {#each _options as option}
 function create_each_block$8(ctx) {
 	let option;
-	let t0_value = /*option*/ ctx[69].label + "";
+	let t0_value = /*option*/ ctx[61].label + "";
 	let t0;
 	let t1;
 	let option_selected_value;
@@ -7205,8 +7182,8 @@ function create_each_block$8(ctx) {
 			option = element("option");
 			t0 = text(t0_value);
 			t1 = space();
-			option.selected = option_selected_value = /*value*/ ctx[0] === /*option*/ ctx[69].value;
-			option.__value = option_value_value = /*option*/ ctx[69].value;
+			option.selected = option_selected_value = /*value*/ ctx[3] === /*option*/ ctx[61].value;
+			option.__value = option_value_value = /*option*/ ctx[61].value;
 			option.value = option.__value;
 		},
 		m(target, anchor) {
@@ -7215,13 +7192,13 @@ function create_each_block$8(ctx) {
 			append(option, t1);
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*_options*/ 32768 && t0_value !== (t0_value = /*option*/ ctx[69].label + "")) set_data(t0, t0_value);
+			if (dirty[0] & /*_options*/ 131072 && t0_value !== (t0_value = /*option*/ ctx[61].label + "")) set_data(t0, t0_value);
 
-			if (dirty[0] & /*value, _options*/ 32769 && option_selected_value !== (option_selected_value = /*value*/ ctx[0] === /*option*/ ctx[69].value)) {
+			if (dirty[0] & /*value, _options*/ 131080 && option_selected_value !== (option_selected_value = /*value*/ ctx[3] === /*option*/ ctx[61].value)) {
 				option.selected = option_selected_value;
 			}
 
-			if (dirty[0] & /*_options*/ 32768 && option_value_value !== (option_value_value = /*option*/ ctx[69].value)) {
+			if (dirty[0] & /*_options*/ 131072 && option_value_value !== (option_value_value = /*option*/ ctx[61].value)) {
 				option.__value = option_value_value;
 				option.value = option.__value;
 			}
@@ -7238,7 +7215,7 @@ function create_fragment$J(ctx) {
 	let div_style_value;
 
 	function select_block_type(ctx, dirty) {
-		if (/*_native*/ ctx[22]) return create_if_block$o;
+		if (/*_native*/ ctx[16]) return create_if_block$o;
 		return create_else_block$a;
 	}
 
@@ -7250,20 +7227,20 @@ function create_fragment$J(ctx) {
 			div = element("div");
 			if_block.c();
 			this.c = noop;
-			attr(div, "data-testid", div_data_testid_value = `${/*name*/ ctx[1]}-dropdown`);
+			attr(div, "data-testid", div_data_testid_value = `${/*name*/ ctx[0]}-dropdown`);
 			attr(div, "class", "dropdown");
 
 			attr(div, "style", div_style_value = `
+    --width: ${/*_width*/ ctx[19]};
     ${calculateMargin(/*mt*/ ctx[10], /*mr*/ ctx[11], /*mb*/ ctx[12], /*ml*/ ctx[13])}
-    --width: ${/*_width*/ ctx[24]}
   `);
 
-			toggle_class(div, "dropdown-native", /*_native*/ ctx[22]);
+			toggle_class(div, "dropdown-native", /*_native*/ ctx[16]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
 			if_block.m(div, null);
-			/*div_binding*/ ctx[48](div);
+			/*div_binding*/ ctx[45](div);
 		},
 		p(ctx, dirty) {
 			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
@@ -7278,19 +7255,19 @@ function create_fragment$J(ctx) {
 				}
 			}
 
-			if (dirty[0] & /*name*/ 2 && div_data_testid_value !== (div_data_testid_value = `${/*name*/ ctx[1]}-dropdown`)) {
+			if (dirty[0] & /*name*/ 1 && div_data_testid_value !== (div_data_testid_value = `${/*name*/ ctx[0]}-dropdown`)) {
 				attr(div, "data-testid", div_data_testid_value);
 			}
 
-			if (dirty[0] & /*mt, mr, mb, ml, _width*/ 16792576 && div_style_value !== (div_style_value = `
+			if (dirty[0] & /*_width, mt, mr, mb, ml*/ 539648 && div_style_value !== (div_style_value = `
+    --width: ${/*_width*/ ctx[19]};
     ${calculateMargin(/*mt*/ ctx[10], /*mr*/ ctx[11], /*mb*/ ctx[12], /*ml*/ ctx[13])}
-    --width: ${/*_width*/ ctx[24]}
   `)) {
 				attr(div, "style", div_style_value);
 			}
 
-			if (dirty[0] & /*_native*/ 4194304) {
-				toggle_class(div, "dropdown-native", /*_native*/ ctx[22]);
+			if (dirty[0] & /*_native*/ 65536) {
+				toggle_class(div, "dropdown-native", /*_native*/ ctx[16]);
 			}
 		},
 		i: noop,
@@ -7298,16 +7275,11 @@ function create_fragment$J(ctx) {
 		d(detaching) {
 			if (detaching) detach(div);
 			if_block.d();
-			/*div_binding*/ ctx[48](null);
+			/*div_binding*/ ctx[45](null);
 		}
 	};
 }
 
-function isPrintableCharacter(inputChar) {
-	return inputChar.length === 1 && inputChar.match(/\S| /) != null;
-}
-
-// parse and convert values to strings to avoid later type comparison issues
 function parseValues(selectedValue) {
 	let rawValue;
 
@@ -7323,30 +7295,12 @@ function parseValues(selectedValue) {
 	return rawValues.map(val => `${val}`);
 }
 
-function isMatched(option, query) {
-	if (query.length === 0) return true;
-
-	// in case query is "white whale", "b c"
-	const queryWords = query.toLowerCase().split(/\s+/);
-
-	//In case option is "white whale", "american samoa"
-	const filterWords = option.filter.toLowerCase().split(/\s+/);
-
-	/**
- * "b c" should not match "bc", "red " should not match "red"
- * but "american sa" should match "american samoa"
- */
-	if (query.endsWith(" ") || queryWords.length > 1) {
-		if (queryWords.length !== filterWords.length) return false;
-
-		return queryWords.every((word, index) => index === queryWords.length - 1
-		? filterWords[index].startsWith(word)
-		: filterWords[index] === word); // last word should be prefix match: american sa ==> american samoa
-		// other words should be exact match: b c should not match bc
-	}
-
-	// Single-word query "al" for "Alabama"
-	return filterWords.some(word => word.startsWith(queryWords[0]));
+function isFilterMatch(option, filter) {
+	if (filter.length === 0) return true;
+	let value = option.filter || option.label || option.value;
+	value = value.toLowerCase();
+	filter = filter.toLowerCase();
+	return value.startsWith(filter) || value.includes(" " + filter);
 }
 
 function instance$G($$self, $$props, $$invalidate) {
@@ -7355,7 +7309,6 @@ function instance$G($$self, $$props, $$invalidate) {
 	let _multiselect;
 	let _native;
 	let _filterable;
-	let _filteredOptions;
 	let _activeDescendantId;
 	let { name } = $$props;
 	let { arialabel = "" } = $$props;
@@ -7375,47 +7328,107 @@ function instance$G($$self, $$props, $$invalidate) {
 	let { mr = null } = $$props;
 	let { mb = null } = $$props;
 	let { ml = null } = $$props;
-	let { id = "" } = $$props;
 
+	//
 	// Private
-	let _values = [];
-
+	// 
 	let _options = [];
-	let _inputValue = "";
+
 	let _isMenuVisible = false;
-	let _highlightedIndex = -1; // keep track highlighted option, for arrow up/down
+	let _highlightedIndex = -1;
 	let _width;
-	let _selectedOption = undefined; // to keep track if value is matched to combobox option
-	let _previousSelectedValue = ""; // to keep track if value is changed from previously selected value - for clear button
-	let _inputWidth;
-	let _el;
+	let _rootEl;
 	let _menuEl;
 	let _selectEl;
 	let _inputEl;
+	let _eventHandler;
+	let _isDirty = false;
+	let _filteredOptions = [];
+	let _values = [];
 
-	afterUpdate(() => {
-		if (_options.length === 0) return;
+	//
+	// Hooks
+	//
+	onMount(async () => {
+		var _a, _b;
 
-		_isMenuVisible
-		? _inputEl.focus()
-		: updateInputValue(_selectedOption);
-	});
+		_eventHandler = _filterable
+		? new ComboboxKeyUpHandler(_inputEl)
+		: new DropdownKeyUpHandler(_inputEl);
+
+		// the following is required to appease the jest testing gods in that they don't respond
+		// to the slotchange event
+		$$invalidate(17, _options = getOptions());
+
+		if (!_native) {
+			$$invalidate(
+				23,
+				_inputEl.value = (_b = (_a = _options.find(o => o.value === value)) === null || _a === void 0
+				? void 0
+				: _a.label) !== null && _b !== void 0
+				? _b
+				: "",
+				_inputEl
+			);
+
+			$$invalidate(19, _width = width || calculateWidth(_options));
+		}
+
+		syncFilteredOptions();
 
-	onMount(async () => {
 		// watch for DOM changes within the slot => dynamic binding
-		const slot = _el.querySelector("slot");
+		const slot = _rootEl.querySelector("slot");
 
 		slot === null || slot === void 0
 		? void 0
-		: slot.addEventListener("slotchange", _e => {
-				_values = parseValues(value);
-				$$invalidate(15, _options = getOptions());
+		: slot.addEventListener("slotchange", _ => {
+				var _a, _b;
+				$$invalidate(17, _options = getOptions());
+				syncFilteredOptions();
+				$$invalidate(19, _width = width || calculateWidth(_options));
+
+				if (!_native) {
+					$$invalidate(
+						23,
+						_inputEl.value = (_b = (_a = _options.find(o => o.value === value)) === null || _a === void 0
+						? void 0
+						: _a.label) !== null && _b !== void 0
+						? _b
+						: "",
+						_inputEl
+					);
+				}
 			});
 	});
 
+	//
 	// Functions
+	//
+	// prevents unwanted reactive updates.
+	function setDisplayedValue() {
+		var _a, _b;
+
+		if (_inputEl) {
+			const option = _options.find(o => o.value == _values[0]); // possible string number comparison
+
+			$$invalidate(
+				23,
+				_inputEl.value = (_b = (_a = option === null || option === void 0
+				? void 0
+				: option.label) !== null && _a !== void 0
+				? _a
+				: option === null || option === void 0
+					? void 0
+					: option.value) !== null && _b !== void 0
+				? _b
+				: "",
+				_inputEl
+			);
+		}
+	}
+
 	function getChildren() {
-		const slot = _el.querySelector("slot");
+		const slot = _rootEl.querySelector("slot");
 
 		if (slot) {
 			// default
@@ -7423,7 +7436,7 @@ function instance$G($$self, $$props, $$invalidate) {
 		}
 
 		// unit tests
-		const el = _native ? _selectEl : _el;
+		const el = _native ? _selectEl : _rootEl;
 
 		return [...el.children];
 	}
@@ -7432,9 +7445,7 @@ function instance$G($$self, $$props, $$invalidate) {
 	// The children don't have to be goa-dropdown-item elements. Any child element
 	// work as long as it has a value and label content
 	function getOptions() {
-		const children = getChildren();
-
-		return children.filter(child => child.tagName === "GOA-DROPDOWN-ITEM").map(el => {
+		return getChildren().filter(child => child.tagName === "GOA-DROPDOWN-ITEM").map(el => {
 			const option = el;
 			const value = el.getAttribute("value") || option.value || "";
 			const label = el.getAttribute("label") || option.label || el.innerHTML || value;
@@ -7443,8 +7454,8 @@ function instance$G($$self, $$props, $$invalidate) {
 		});
 	}
 
-	// compute the required width to enure all children fit
-	function getCustomDropdownWidth(options) {
+	// compute the required width to ensure all children fit
+	function calculateWidth(options) {
 		// set width to longest item
 		const optionsWidth = options.map(option => {
 			const label = `${option.label}` || `${option.value}` || "";
@@ -7462,18 +7473,9 @@ function instance$G($$self, $$props, $$invalidate) {
 		return `${maxWidth}ch`;
 	}
 
-	function isOptionInView(node) {
-		const liOptionRect = node.getBoundingClientRect();
-		const ulRect = _menuEl.getBoundingClientRect();
-		return liOptionRect.top >= 0 && liOptionRect.left >= 0 && liOptionRect.bottom <= ulRect.height && liOptionRect.right <= ulRect.width;
-	}
-
-	/**
- * Change the direction of highlighted options for Arrow up and down
- * @param position: -1 for previous option, +1 for next option
- */
-	function changeHighlightedOption(position) {
-		let index = _highlightedIndex + position;
+	// Change the direction of highlighted options for Arrow up and down
+	function changeHighlightedOption(offset) {
+		let index = _highlightedIndex + offset;
 
 		let items = !(_filteredOptions === null || _filteredOptions === void 0
 		? void 0
@@ -7490,465 +7492,375 @@ function instance$G($$self, $$props, $$invalidate) {
 			index = _filterable ? 0 : items.length - 1;
 		}
 
-		$$invalidate(17, _highlightedIndex = index);
+		$$invalidate(14, _highlightedIndex = index);
 		scrollToOption(index);
 	}
 
 	function scrollToOption(index) {
-		const liNode = _menuEl.querySelector(`li[data-index='${index}']`);
+		const liNode = _menuEl.querySelector(`li[data-index="${index}"]`);
 		if (!liNode) return;
-		if (isOptionInView(liNode)) return;
+		const liOptionRect = liNode.getBoundingClientRect();
+		const ulRect = _menuEl.getBoundingClientRect();
+		const isInView = liOptionRect.top >= 0 && liOptionRect.left >= 0 && liOptionRect.bottom <= ulRect.height && liOptionRect.right <= ulRect.width;
+		if (isInView) return;
 		liNode.scrollIntoView({ behavior: "smooth", block: "nearest" });
 	}
 
-	/**
- * Update the dropdown selected style/attribute based on new value
- * @param selectedValue
- */
-	function setSelectedOption(selectedValue) {
-		return _filterable
-		? setSelectedOptionByInputValue()
-		: _selectedOption = _options.find(item => item.value === selectedValue);
+	function syncFilteredOptions() {
+		$$invalidate(15, _filteredOptions = _filterable
+		? _options.filter(option => isFilterMatch(option, _inputEl.value))
+		: _options);
 	}
 
-	/**
- * Update according to input's value (for filterable dropdown)
- */
-	function setSelectedOptionByInputValue() {
-		const filteredItems = _options.filter(item => isMatched(item, _inputValue));
-		const isTypingInputMatchedOption = filteredItems.length === 1 && _isMenuVisible;
-
-		if (!isTypingInputMatchedOption) {
-			// follow local value
-			_selectedOption = _options.find(item => item.value === value);
-
+	function showMenu() {
+		if (_disabled) {
 			return;
 		}
 
-		_selectedOption = filteredItems[0];
-		updateInputValue(_selectedOption);
-		$$invalidate(29, _activeDescendantId = undefined);
+		setTimeout(
+			() => {
+				syncFilteredOptions();
+				$$invalidate(18, _isMenuVisible = true);
+				_inputEl.focus();
+			},
+			0
+		);
 	}
 
-	/**
- * Update input's value according to selected dropdown option
- * @param option
- */
-	function updateInputValue(option) {
-		$$invalidate(17, _highlightedIndex = -1);
-		$$invalidate(16, _inputValue = option ? option.label : "");
-		$$invalidate(0, value = option ? option.value : "");
+	function hideMenu() {
+		$$invalidate(18, _isMenuVisible = false);
+	}
+
+	function dispatchValue(value) {
+		const detail = _multiselect
+		? { name, values: [value, ..._values] }
+		: { name, value };
+
+		setTimeout(
+			() => {
+				_rootEl.dispatchEvent(new CustomEvent("_change", { composed: true, detail }));
+				_isDirty = false;
+			},
+			1
+		);
+	}
+
+	// 
+	// Event handlers
+	// 
+	function onSelect(option) {
+		if (_disabled) return;
 
-		if (!option) {
-			$$invalidate(29, _activeDescendantId = undefined);
+		if (!_native) {
+			_isDirty = true;
+			hideMenu();
+			$$invalidate(23, _inputEl.value = option.label, _inputEl);
 		}
+
+		dispatchValue(option.value);
 	}
 
-	/**
- * Keep track the component's local value based on new selected value
- * @param newSelectedValue
- */
-	function updateSelectedValue(newSelectedValue) {
-		if (_previousSelectedValue !== newSelectedValue) {
-			_previousSelectedValue = newSelectedValue;
-			setSelectedOption(newSelectedValue);
-			_values = [value]; // Keep track _values, for multiSelect later
-			dispatchValue(value);
+	function onInputKeyUp(e) {
+		if (_disabled) return;
+		_eventHandler.handleKeyUp(e);
+	}
+
+	function onInputKeyDown(e) {
+		if (_disabled) return;
+		_eventHandler.handleKeyDown(e);
+	}
+
+	function onClearIconKeyDown(e) {
+		if (e.key === "Enter" || e.key === " ") {
+			e.stopPropagation();
+			reset();
+			showMenu();
 		}
 	}
 
-	function showMenu() {
-		if (_disabled) {
-			return;
+	function onClearIconClick(e) {
+		reset();
+		showMenu();
+		e.stopPropagation();
+	}
+
+	function onNativeSelect(e) {
+		const target = e.currentTarget;
+		const option = _options[target.selectedIndex];
+		onSelect(option);
+	}
+
+	function reset() {
+		if (_disabled) return;
+		$$invalidate(25, _activeDescendantId = undefined);
+		$$invalidate(14, _highlightedIndex = -1);
+		$$invalidate(23, _inputEl.value = "", _inputEl);
+		_isDirty = false;
+		syncFilteredOptions();
+		dispatchValue("");
+	}
+
+	function onChevronClick(e) {
+		showMenu();
+		e.stopPropagation();
+	}
+
+	class ComboboxKeyUpHandler {
+		constructor(input) {
+			this.input = input;
+
+			input.addEventListener("blur", async e => {
+				if (!_isDirty) return;
+				if (!_filterable) return;
+				const input = e.target;
+				const selectedOption = _filteredOptions.find(o => o.label === input.value);
+
+				if (!selectedOption) {
+					dispatchValue("");
+					input.value = "";
+				}
+			});
+		}
+
+		onEscape(e) {
+			reset();
+			_inputEl.focus();
+			e.preventDefault();
+			e.stopPropagation();
 		}
 
-		$$invalidate(23, _isMenuVisible = true);
-	}
+		onEnter(e) {
+			const option = _filteredOptions[_highlightedIndex];
 
-	function closeMenu() {
-		$$invalidate(23, _isMenuVisible = false);
-	}
+			if (option) {
+				onSelect(option);
+			}
 
-	function dispatchValue(optionValue) {
-		const option = _options.find(item => item.value === optionValue);
-		const newValue = option ? option.value : "";
-		let detail;
+			if (_inputEl.value) {
+				hideMenu();
+			} else {
+				showMenu();
+			}
 
-		if (_multiselect) {
-			_values.push(newValue);
-			detail = { name, values: _values };
-		} else {
-			_values = [newValue];
-			detail = { name, value: newValue };
+			e.stopPropagation();
 		}
 
-		_el.dispatchEvent(new CustomEvent("_change", { composed: true, detail }));
-	}
+		onArrow(e, direction) {
+			if (!_isMenuVisible) showMenu();
+			changeHighlightedOption(direction === "up" ? -1 : 1);
+			e.stopPropagation();
+		}
 
-	// Event handlers
-	function onSelect(option) {
-		if (_disabled) return;
-		$$invalidate(0, value = option.value);
-		_selectedOption = option;
+		onTab(_) {
+			const matchedOption = _filteredOptions.find(option => option.label.toLowerCase() === this.input.value.toLowerCase());
 
-		if (!_native) {
-			closeMenu();
-			$$invalidate(16, _inputValue = option.label);
-			_inputEl.focus();
+			if (matchedOption) {
+				onSelect(matchedOption);
+			}
+
+			hideMenu();
 		}
-	}
 
-	function ComboboxKeyDownHandler() {
-		const handle = e => {
-			let stopPropagation = false;
+		onKeyUp(_) {
+			showMenu();
+			_isDirty = true;
+		}
 
+		handleKeyUp(e) {
 			switch (e.key) {
 				case "Enter":
-					onEnter();
-					stopPropagation = true;
-					break;
-				case "Escape":
-				case 'Esc':
-					closeMenu();
-					removeSelectedValue();
-					stopPropagation = true;
+					this.onEnter(e);
 					break;
-				case 'Up':
 				case "ArrowUp":
-					onArrowUp();
-					stopPropagation = true;
+					this.onArrow(e, "up");
 					break;
-				case "Down":
 				case "ArrowDown":
-					onArrowDown();
-					stopPropagation = true;
-					break;
-				case "Tab":
-					closeMenu();
-					break;
-				case 'Home':
-					_inputEl.setSelectionRange(0, 0);
-					stopPropagation = true;
-					break;
-				case 'End':
-					_inputEl.setSelectionRange(_inputValue.length, _inputValue.length);
-					stopPropagation = true;
+					this.onArrow(e, "down");
 					break;
-				case 'Backspace':
-					if (_inputValue.length === 0) {
-						// backspace should not open the filterable dropdown if input has no words
-						stopPropagation = true;
-
-						return;
-					}
-					onBackspace();
+				case "Home":
+					this.input.setSelectionRange(0, 0);
 					break;
-				case ' ':
-					if (_inputValue.length === 0) {
-						// space should not open the filterable dropdown if input has no words
-						stopPropagation = true;
-					}
+				case "End":
+					this.input.setSelectionRange(this.input.value.length, this.input.value.length);
 					break;
 				default:
-					if (isPrintableCharacter(e.key)) {
-						if (!_isMenuVisible) {
-							showMenu();
-						}
-
-						if (!_inputValue.length) {
-							removeSelectedValue();
-						}
-					}
+					this.onKeyUp(e);
 					break;
 			}
+		}
 
-			if (stopPropagation) {
-				e.preventDefault();
-				e.stopPropagation();
-			}
-		};
-
-		const onEnter = () => {
-			$$invalidate(23, _isMenuVisible = !_isMenuVisible);
-
-			if (_highlightedIndex < 0) {
-				const matchedOption = _filteredOptions.find(option => option.label.toLowerCase() === (_inputValue === null || _inputValue === void 0
-				? void 0
-				: _inputValue.toLowerCase()));
-
-				selectOption(matchedOption);
-				return;
+		handleKeyDown(e) {
+			switch (e.key) {
+				case "Escape":
+					this.onEscape(e);
+					break;
+				case "Tab":
+					this.onTab(e);
+					break;
 			}
+		}
+	}
 
-			const highlightedOption = _filteredOptions[_highlightedIndex];
-			selectOption(highlightedOption);
-			$$invalidate(17, _highlightedIndex = -1); // reset highlighted option
-		};
-
-		const onArrowUp = () => {
-			showMenu();
-			changeHighlightedOption(-1);
-		};
-
-		const onArrowDown = () => {
-			showMenu();
-			changeHighlightedOption(1);
-		};
-
-		const onBackspace = () => {
-			showMenu();
+	class DropdownKeyUpHandler {
+		constructor(_input) {
+			
+		}
 
-			if (_inputValue.length === 1) {
-				removeSelectedValue();
-			}
-		};
+		onEnter(e) {
+			if (_isMenuVisible) {
+				const option = _filteredOptions[_highlightedIndex];
 
-		const selectOption = option => {
-			closeMenu();
+				if (option) {
+					onSelect(option);
+				}
 
-			if (option) {
-				$$invalidate(16, _inputValue = option.label);
-				_selectedOption = option;
-				$$invalidate(0, value = option.value);
+				hideMenu();
+			} else {
+				showMenu();
 			}
-		};
 
-		return { handle };
-	}
+			e.preventDefault();
+			e.stopPropagation();
+		}
 
-	function DropdownKeyDownHandler() {
-		const handle = e => {
-			let stopPropagation = false;
+		onArrow(e, direction) {
+			if (!_isMenuVisible) showMenu();
+			changeHighlightedOption(direction === "up" ? -1 : 1);
+			e.preventDefault();
+			e.stopPropagation();
+		}
 
+		handleKeyDown(e) {
 			switch (e.key) {
 				case " ":
-					onSpace();
-					stopPropagation = true;
-					break;
 				case "Enter":
-					onEnter();
-					stopPropagation = true;
-					break;
-				case "Escape":
-					closeMenu();
+					this.onEnter(e);
 					break;
-				case "Up":
 				case "ArrowUp":
-					onArrowUp();
-					stopPropagation = true;
+					this.onArrow(e, "up");
 					break;
-				case "Down":
 				case "ArrowDown":
-					onArrowDown();
-					stopPropagation = true;
+					this.onArrow(e, "down");
 					break;
 				case "Tab":
-					closeMenu();
+					hideMenu();
 					break;
 			}
 
-			if (stopPropagation) {
-				e.preventDefault();
-				e.stopPropagation();
-			}
-		};
-
-		const onSpace = () => {
-			$$invalidate(23, _isMenuVisible = !_isMenuVisible); // toggle menu
-			if (_highlightedIndex > -1 && _filteredOptions[_highlightedIndex].value !== value) $$invalidate(0, value = _filteredOptions[_highlightedIndex].value);
-		};
-
-		const onEnter = () => {
-			$$invalidate(23, _isMenuVisible = !_isMenuVisible);
-
-			if (_highlightedIndex > -1 && _filteredOptions[_highlightedIndex].value !== value) {
-				$$invalidate(0, value = _filteredOptions[_highlightedIndex].value);
-				closeMenu();
-			}
-		};
-
-		const onArrowUp = () => {
-			if (!_isMenuVisible) showMenu();
-			changeHighlightedOption(-1);
-		};
-
-		const onArrowDown = () => {
-			if (!_isMenuVisible) showMenu();
-			changeHighlightedOption(1);
-		};
-
-		return { handle };
-	}
-
-	const comboboxHandler = ComboboxKeyDownHandler();
-	const dropdownHandler = DropdownKeyDownHandler();
-
-	const onInputKeyDown = e => {
-		if (_disabled) return;
-
-		if (_filterable) {
-			comboboxHandler.handle(e);
-		} else {
-			dropdownHandler.handle(e);
+			return false;
 		}
-	};
-
-	function onNativeSelect(e) {
-		const target = e.currentTarget;
-		const option = _options[target.selectedIndex];
-		onSelect(option);
-	}
-
-	function removeSelectedValue() {
-		if (_disabled) return;
-		_previousSelectedValue = null;
-		_selectedOption = undefined;
-		updateInputValue(_selectedOption);
-	}
 
-	async function onClick() {
-		if (_disabled) return;
-		showMenu();
-
-		if (_filterable) {
-			await tick();
-			_inputEl.focus();
+		handleKeyUp(e) {
+			switch (e.key) {
+				case "ArrowUp":
+				case "ArrowDown":
+				case " ":
+				case "Enter":
+					e.preventDefault();
+					e.stopPropagation();
+			}
 		}
 	}
 
-	function onClear() {
-		removeSelectedValue();
-		_inputEl.focus();
-		onClick();
-	}
-
 	function select_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			_selectEl = $$value;
-			$$invalidate(27, _selectEl);
-			((((($$invalidate(15, _options), $$invalidate(18, _el)), $$invalidate(0, value)), $$invalidate(22, _native)), $$invalidate(7, width)), $$invalidate(41, native));
+			$$invalidate(22, _selectEl);
+			$$invalidate(17, _options);
 		});
 	}
 
 	function input_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			_inputEl = $$value;
-			$$invalidate(19, _inputEl);
+			$$invalidate(23, _inputEl);
 		});
 	}
 
-	function input_input_handler() {
-		_inputValue = this.value;
-		$$invalidate(16, _inputValue);
-	}
-
-	const keydown_handler = e => {
-		if (e.key === 'Enter') {
-			// for keyboard accessibility to press the clear icon
-			onClear();
-		}
-	};
-
 	const click_handler = option => onSelect(option);
 
 	function ul_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			_menuEl = $$value;
-			$$invalidate(26, _menuEl);
+			$$invalidate(21, _menuEl);
 		});
 	}
 
 	function div_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
-			_el = $$value;
-			$$invalidate(18, _el);
+			_rootEl = $$value;
+			$$invalidate(20, _rootEl);
 		});
 	}
 
 	$$self.$$set = $$props => {
-		if ('name' in $$props) $$invalidate(1, name = $$props.name);
-		if ('arialabel' in $$props) $$invalidate(2, arialabel = $$props.arialabel);
-		if ('arialabelledby' in $$props) $$invalidate(3, arialabelledby = $$props.arialabelledby);
-		if ('value' in $$props) $$invalidate(0, value = $$props.value);
-		if ('filterable' in $$props) $$invalidate(38, filterable = $$props.filterable);
+		if ('name' in $$props) $$invalidate(0, name = $$props.name);
+		if ('arialabel' in $$props) $$invalidate(1, arialabel = $$props.arialabel);
+		if ('arialabelledby' in $$props) $$invalidate(2, arialabelledby = $$props.arialabelledby);
+		if ('value' in $$props) $$invalidate(3, value = $$props.value);
+		if ('filterable' in $$props) $$invalidate(37, filterable = $$props.filterable);
 		if ('leadingicon' in $$props) $$invalidate(4, leadingicon = $$props.leadingicon);
 		if ('maxheight' in $$props) $$invalidate(5, maxheight = $$props.maxheight);
 		if ('placeholder' in $$props) $$invalidate(6, placeholder = $$props.placeholder);
 		if ('width' in $$props) $$invalidate(7, width = $$props.width);
 		if ('disabled' in $$props) $$invalidate(8, disabled = $$props.disabled);
-		if ('error' in $$props) $$invalidate(39, error = $$props.error);
-		if ('multiselect' in $$props) $$invalidate(40, multiselect = $$props.multiselect);
-		if ('native' in $$props) $$invalidate(41, native = $$props.native);
+		if ('error' in $$props) $$invalidate(38, error = $$props.error);
+		if ('multiselect' in $$props) $$invalidate(39, multiselect = $$props.multiselect);
+		if ('native' in $$props) $$invalidate(40, native = $$props.native);
 		if ('relative' in $$props) $$invalidate(9, relative = $$props.relative);
 		if ('mt' in $$props) $$invalidate(10, mt = $$props.mt);
 		if ('mr' in $$props) $$invalidate(11, mr = $$props.mr);
 		if ('mb' in $$props) $$invalidate(12, mb = $$props.mb);
 		if ('ml' in $$props) $$invalidate(13, ml = $$props.ml);
-		if ('id' in $$props) $$invalidate(14, id = $$props.id);
 	};
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty[0] & /*disabled*/ 256) {
-			$$invalidate(28, _disabled = toBoolean(disabled));
+			// 
+			// Reactive
+			// 
+			$$invalidate(26, _disabled = toBoolean(disabled));
 		}
 
-		if ($$self.$$.dirty[1] & /*error*/ 256) {
-			$$invalidate(30, _error = toBoolean(error));
+		if ($$self.$$.dirty[1] & /*error*/ 128) {
+			$$invalidate(27, _error = toBoolean(error));
 		}
 
-		if ($$self.$$.dirty[1] & /*multiselect*/ 512) {
+		if ($$self.$$.dirty[1] & /*multiselect*/ 256) {
 			_multiselect = toBoolean(multiselect);
 		}
 
-		if ($$self.$$.dirty[1] & /*native*/ 1024) {
-			$$invalidate(22, _native = toBoolean(native));
-		}
-
-		if ($$self.$$.dirty[0] & /*_native*/ 4194304 | $$self.$$.dirty[1] & /*filterable*/ 128) {
-			$$invalidate(20, _filterable = toBoolean(filterable) && !_native); // Will replace datalist for filterable true
-		}
-
-		if ($$self.$$.dirty[0] & /*_el, value, _native, width, _options*/ 4489345) {
-			// Reactive statement
-			if (_el) {
-				_values = parseValues(value);
-				$$invalidate(15, _options = getOptions());
-
-				if (!_native) {
-					$$invalidate(24, _width = width || getCustomDropdownWidth(_options));
-				}
-
-				if (_options.length) {
-					updateSelectedValue(value);
-				}
-			}
+		if ($$self.$$.dirty[1] & /*native*/ 512) {
+			$$invalidate(16, _native = toBoolean(native));
 		}
 
-		if ($$self.$$.dirty[0] & /*_filterable, _options, _inputValue*/ 1146880) {
-			$$invalidate(21, _filteredOptions = _filterable
-			? _options.filter(option => isMatched(option, _inputValue))
-			: _options);
+		if ($$self.$$.dirty[0] & /*_native*/ 65536 | $$self.$$.dirty[1] & /*filterable*/ 64) {
+			$$invalidate(24, _filterable = toBoolean(filterable) && !_native);
 		}
 
-		if ($$self.$$.dirty[0] & /*_filteredOptions, _highlightedIndex*/ 2228224) {
-			// Accessibility
-			$$invalidate(29, _activeDescendantId = _filteredOptions[_highlightedIndex]
+		if ($$self.$$.dirty[0] & /*_filteredOptions, _highlightedIndex*/ 49152) {
+			// To keep track of active descendant for the accessibility
+			$$invalidate(25, _activeDescendantId = _filteredOptions[_highlightedIndex]
 			? _filteredOptions[_highlightedIndex].value
-			: undefined); //To keep track of active descendant for the accessibility
+			: undefined);
 		}
 
-		if ($$self.$$.dirty[0] & /*_inputEl, _options*/ 557056) {
-			if (_inputEl && _options.length) {
-				$$invalidate(25, _inputWidth = `${_inputEl.getBoundingClientRect().width}px`);
+		if ($$self.$$.dirty[0] & /*value*/ 8) {
+			{
+				_values = parseValues(value);
+
+				// updating _inputEl.value is done within seperate function
+				// to prevent unwanted reactive updates.
+				setDisplayedValue();
 			}
 		}
 	};
 
 	return [
-		value,
 		name,
 		arialabel,
 		arialabelledby,
+		value,
 		leadingicon,
 		maxheight,
 		placeholder,
@@ -7959,38 +7871,35 @@ function instance$G($$self, $$props, $$invalidate) {
 		mr,
 		mb,
 		ml,
-		id,
-		_options,
-		_inputValue,
 		_highlightedIndex,
-		_el,
-		_inputEl,
-		_filterable,
 		_filteredOptions,
 		_native,
+		_options,
 		_isMenuVisible,
 		_width,
-		_inputWidth,
+		_rootEl,
 		_menuEl,
 		_selectEl,
-		_disabled,
+		_inputEl,
+		_filterable,
 		_activeDescendantId,
+		_disabled,
 		_error,
 		showMenu,
-		closeMenu,
+		hideMenu,
 		onSelect,
+		onInputKeyUp,
 		onInputKeyDown,
+		onClearIconKeyDown,
+		onClearIconClick,
 		onNativeSelect,
-		onClick,
-		onClear,
+		onChevronClick,
 		filterable,
 		error,
 		multiselect,
 		native,
 		select_binding,
 		input_binding,
-		input_input_handler,
-		keydown_handler,
 		click_handler,
 		ul_binding,
 		div_binding
@@ -8015,25 +7924,24 @@ class Dropdown extends SvelteElement {
 			create_fragment$J,
 			safe_not_equal,
 			{
-				name: 1,
-				arialabel: 2,
-				arialabelledby: 3,
-				value: 0,
-				filterable: 38,
+				name: 0,
+				arialabel: 1,
+				arialabelledby: 2,
+				value: 3,
+				filterable: 37,
 				leadingicon: 4,
 				maxheight: 5,
 				placeholder: 6,
 				width: 7,
 				disabled: 8,
-				error: 39,
-				multiselect: 40,
-				native: 41,
+				error: 38,
+				multiselect: 39,
+				native: 40,
 				relative: 9,
 				mt: 10,
 				mr: 11,
 				mb: 12,
-				ml: 13,
-				id: 14
+				ml: 13
 			},
 			null,
 			[-1, -1, -1]
@@ -8070,13 +7978,12 @@ class Dropdown extends SvelteElement {
 			"mt",
 			"mr",
 			"mb",
-			"ml",
-			"id"
+			"ml"
 		];
 	}
 
 	get name() {
-		return this.$$.ctx[1];
+		return this.$$.ctx[0];
 	}
 
 	set name(name) {
@@ -8085,7 +7992,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get arialabel() {
-		return this.$$.ctx[2];
+		return this.$$.ctx[1];
 	}
 
 	set arialabel(arialabel) {
@@ -8094,7 +8001,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get arialabelledby() {
-		return this.$$.ctx[3];
+		return this.$$.ctx[2];
 	}
 
 	set arialabelledby(arialabelledby) {
@@ -8103,7 +8010,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get value() {
-		return this.$$.ctx[0];
+		return this.$$.ctx[3];
 	}
 
 	set value(value) {
@@ -8112,7 +8019,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get filterable() {
-		return this.$$.ctx[38];
+		return this.$$.ctx[37];
 	}
 
 	set filterable(filterable) {
@@ -8166,7 +8073,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[39];
+		return this.$$.ctx[38];
 	}
 
 	set error(error) {
@@ -8175,7 +8082,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get multiselect() {
-		return this.$$.ctx[40];
+		return this.$$.ctx[39];
 	}
 
 	set multiselect(multiselect) {
@@ -8184,7 +8091,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get native() {
-		return this.$$.ctx[41];
+		return this.$$.ctx[40];
 	}
 
 	set native(native) {
@@ -8236,15 +8143,6 @@ class Dropdown extends SvelteElement {
 		this.$$set({ ml });
 		flush();
 	}
-
-	get id() {
-		return this.$$.ctx[14];
-	}
-
-	set id(id) {
-		this.$$set({ id });
-		flush();
-	}
 }
 
 customElements.define("goa-dropdown", Dropdown);
@@ -13949,13 +13847,11 @@ function create_if_block$e(ctx) {
 
 			attr(section, "style", section_style_value = `
           ${cssVar("width", /*width*/ ctx[2])}
-          max-width: ${/*maxwidth*/ ctx[1] < /*width*/ ctx[2]
-			? /*width*/ ctx[2]
-			: /*maxwidth*/ ctx[1]};
+          max-width: ${/*maxwidth*/ ctx[1]};
           padding: ${/*_padded*/ ctx[19] ? "var(--goa-space-m)" : "0"};
         `);
 
-			add_render_callback(() => /*section_elementresize_handler*/ ctx[30].call(section));
+			add_render_callback(() => /*section_elementresize_handler*/ ctx[29].call(section));
 			attr(div2, "class", "popover-container");
 		},
 		m(target, anchor) {
@@ -13965,9 +13861,9 @@ function create_if_block$e(ctx) {
 			append(div2, section);
 			append(section, goa_focus_trap);
 			append(goa_focus_trap, div1);
-			/*div1_binding*/ ctx[29](div1);
-			section_resize_listener = add_iframe_resize_listener(section, /*section_elementresize_handler*/ ctx[30].bind(section));
-			/*section_binding*/ ctx[31](section);
+			/*div1_binding*/ ctx[28](div1);
+			section_resize_listener = add_iframe_resize_listener(section, /*section_elementresize_handler*/ ctx[29].bind(section));
+			/*section_binding*/ ctx[30](section);
 
 			if (!mounted) {
 				dispose = listen(div0, "click", /*closePopover*/ ctx[21]);
@@ -13977,9 +13873,7 @@ function create_if_block$e(ctx) {
 		p(ctx, dirty) {
 			if (dirty[0] & /*width, maxwidth, _padded*/ 524294 && section_style_value !== (section_style_value = `
           ${cssVar("width", /*width*/ ctx[2])}
-          max-width: ${/*maxwidth*/ ctx[1] < /*width*/ ctx[2]
-			? /*width*/ ctx[2]
-			: /*maxwidth*/ ctx[1]};
+          max-width: ${/*maxwidth*/ ctx[1]};
           padding: ${/*_padded*/ ctx[19] ? "var(--goa-space-m)" : "0"};
         `)) {
 				attr(section, "style", section_style_value);
@@ -13989,9 +13883,9 @@ function create_if_block$e(ctx) {
 			if (detaching) detach(div0);
 			if (detaching) detach(t);
 			if (detaching) detach(div2);
-			/*div1_binding*/ ctx[29](null);
+			/*div1_binding*/ ctx[28](null);
 			section_resize_listener();
-			/*section_binding*/ ctx[31](null);
+			/*section_binding*/ ctx[30](null);
 			mounted = false;
 			dispose();
 		}
@@ -14039,10 +13933,10 @@ function create_fragment$s(ctx) {
 			insert(target, div1, anchor);
 			append(div1, div0);
 			append(div0, slot);
-			/*div0_binding*/ ctx[28](div0);
+			/*div0_binding*/ ctx[27](div0);
 			append(div1, t);
 			if (if_block) if_block.m(div1, null);
-			/*div1_binding_1*/ ctx[32](div1);
+			/*div1_binding_1*/ ctx[31](div1);
 
 			if (!mounted) {
 				dispose = listen(div0, "click", /*openPopover*/ ctx[20]);
@@ -14089,9 +13983,9 @@ function create_fragment$s(ctx) {
 		o: noop,
 		d(detaching) {
 			if (detaching) detach(div1);
-			/*div0_binding*/ ctx[28](null);
+			/*div0_binding*/ ctx[27](null);
 			if (if_block) if_block.d();
-			/*div1_binding_1*/ ctx[32](null);
+			/*div1_binding_1*/ ctx[31](null);
 			mounted = false;
 			dispose();
 		}
@@ -14129,7 +14023,6 @@ function instance$p($$self, $$props, $$invalidate) {
 	let { padded = "true" } = $$props;
 	let { position = "auto" } = $$props;
 	let { relative = "false" } = $$props;
-	let { autoclose = "false" } = $$props;
 	let { mt = null } = $$props;
 	let { mr = null } = $$props;
 	let { mb = null } = $$props;
@@ -14325,13 +14218,12 @@ function instance$p($$self, $$props, $$invalidate) {
 		if ('padded' in $$props) $$invalidate(22, padded = $$props.padded);
 		if ('position' in $$props) $$invalidate(23, position = $$props.position);
 		if ('relative' in $$props) $$invalidate(24, relative = $$props.relative);
-		if ('autoclose' in $$props) $$invalidate(25, autoclose = $$props.autoclose);
 		if ('mt' in $$props) $$invalidate(3, mt = $$props.mt);
 		if ('mr' in $$props) $$invalidate(4, mr = $$props.mr);
 		if ('mb' in $$props) $$invalidate(5, mb = $$props.mb);
 		if ('ml' in $$props) $$invalidate(6, ml = $$props.ml);
-		if ('open' in $$props) $$invalidate(26, open = $$props.open);
-		if ('disabled' in $$props) $$invalidate(27, disabled = $$props.disabled);
+		if ('open' in $$props) $$invalidate(25, open = $$props.open);
+		if ('disabled' in $$props) $$invalidate(26, disabled = $$props.disabled);
 		if ('tabindex' in $$props) $$invalidate(7, tabindex = $$props.tabindex);
 		if ('voffset' in $$props) $$invalidate(8, voffset = $$props.voffset);
 		if ('hoffset' in $$props) $$invalidate(9, hoffset = $$props.hoffset);
@@ -14345,11 +14237,11 @@ function instance$p($$self, $$props, $$invalidate) {
 			$$invalidate(19, _padded = toBoolean(padded));
 		}
 
-		if ($$self.$$.dirty[0] & /*open*/ 67108864) {
+		if ($$self.$$.dirty[0] & /*open*/ 33554432) {
 			$$invalidate(13, _open = toBoolean(open));
 		}
 
-		if ($$self.$$.dirty[0] & /*disabled*/ 134217728) {
+		if ($$self.$$.dirty[0] & /*disabled*/ 67108864) {
 			_disabled = toBoolean(disabled);
 		}
 
@@ -14357,8 +14249,6 @@ function instance$p($$self, $$props, $$invalidate) {
 			$$invalidate(18, _relative = toBoolean(relative));
 		}
 
-		if ($$self.$$.dirty[0] & /*autoclose*/ 33554432) ;
-
 		if ($$self.$$.dirty[0] & /*_open*/ 8192) {
 			(async () => _open && await setPopoverPosition())();
 		}
@@ -14404,7 +14294,6 @@ function instance$p($$self, $$props, $$invalidate) {
 		padded,
 		position,
 		relative,
-		autoclose,
 		open,
 		disabled,
 		div0_binding,
@@ -14419,7 +14308,7 @@ class Popover extends SvelteElement {
 	constructor(options) {
 		super();
 		const style = document.createElement('style');
-		style.textContent = `:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4);display:flex;align-items:center}.popover-target{cursor:pointer}.popover-target:focus{outline:var(--focus-border-width) solid var(--goa-color-interactive-focus)}.popover-content{color:var(--goa-color-text-default);position:absolute;width:-moz-fit-content;width:fit-content;max-width:260px;list-style-type:none;background:var(--goa-color-greyscale-white);border-radius:var(--border-radius);outline:none;filter:drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));z-index:99;width:-moz-max-content;width:max-content;margin-top:var(--offset-top, 3px);margin-bottom:var(--offset-bottom, 3px);margin-left:var(--offset-left, 0);margin-right:var(--offset-right, 0)}::slotted(ul){display:block;padding:0;margin:0;list-style-type:none;line-height:2rem}.popover-background{cursor:default;position:fixed;z-index:98;inset:0}`;
+		style.textContent = `:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4);display:flex;align-items:center}.popover-target{cursor:pointer}.popover-target:focus{outline:var(--focus-border-width) solid var(--goa-color-interactive-focus)}.popover-content{color:var(--goa-color-text-default);position:absolute;width:-moz-fit-content;width:fit-content;list-style-type:none;background:var(--goa-color-greyscale-white);border-radius:var(--border-radius);outline:none;filter:drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));z-index:99;width:-moz-max-content;width:max-content;margin-top:var(--offset-top, 3px);margin-bottom:var(--offset-bottom, 3px);margin-left:var(--offset-left, 0);margin-right:var(--offset-right, 0)}::slotted(ul){display:block;padding:0;margin:0;list-style-type:none;line-height:2rem}.popover-background{cursor:default;position:fixed;z-index:98;inset:0}`;
 		this.shadowRoot.appendChild(style);
 
 		init(
@@ -14439,13 +14328,12 @@ class Popover extends SvelteElement {
 				padded: 22,
 				position: 23,
 				relative: 24,
-				autoclose: 25,
 				mt: 3,
 				mr: 4,
 				mb: 5,
 				ml: 6,
-				open: 26,
-				disabled: 27,
+				open: 25,
+				disabled: 26,
 				tabindex: 7,
 				voffset: 8,
 				hoffset: 9,
@@ -14476,7 +14364,6 @@ class Popover extends SvelteElement {
 			"padded",
 			"position",
 			"relative",
-			"autoclose",
 			"mt",
 			"mr",
 			"mb",
@@ -14545,15 +14432,6 @@ class Popover extends SvelteElement {
 		flush();
 	}
 
-	get autoclose() {
-		return this.$$.ctx[25];
-	}
-
-	set autoclose(autoclose) {
-		this.$$set({ autoclose });
-		flush();
-	}
-
 	get mt() {
 		return this.$$.ctx[3];
 	}
@@ -14591,7 +14469,7 @@ class Popover extends SvelteElement {
 	}
 
 	get open() {
-		return this.$$.ctx[26];
+		return this.$$.ctx[25];
 	}
 
 	set open(open) {
@@ -14600,7 +14478,7 @@ class Popover extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[27];
+		return this.$$.ctx[26];
 	}
 
 	set disabled(disabled) {
@@ -23666,35 +23544,52 @@ function instance$a($$self, $$props, $$invalidate) {
 	}
 
 	function handleKeyDown(e) {
-		if (!_date) return;
-
 		if (["Space", "Enter"].includes(e.key)) {
 			showCalendar();
 			return;
 		}
 
+		// in the key event handling below the first line `_date ||= ...` is to initialize the date, if
+		// it hasn't yet been set to 1 unit opposite of what the keybinding does ex. if ArrowDown is
+		// clicked, which moves the datepicker one week ahead, the date is initialize one week before.
+		// This is to allow the starting date displayed to be that of today no matter what key is 
+		// pressed.
 		switch (e.key) {
 			case "ArrowLeft":
+				_date || $$invalidate(9, _date = addDays(new Date(), 1));
 				$$invalidate(9, _date = addDays(_date, -1));
 				break;
 			case "ArrowRight":
+				_date || $$invalidate(9, _date = addDays(new Date(), -1));
 				$$invalidate(9, _date = addDays(_date, 1));
 				break;
 			case "ArrowDown":
+				_date || $$invalidate(9, _date = addDays(new Date(), -7));
 				$$invalidate(9, _date = addDays(_date, 7));
 				break;
 			case "ArrowUp":
+				_date || $$invalidate(9, _date = addDays(new Date(), 7));
 				$$invalidate(9, _date = addDays(_date, -7));
 				break;
 			case "PageUp":
+				_date || $$invalidate(9, _date = e.shiftKey
+				? addYears(new Date(), 1)
+				: addMonths(new Date(), 1));
 				$$invalidate(9, _date = e.shiftKey ? addYears(_date, -1) : addMonths(_date, -1));
 				break;
 			case "PageDown":
+				_date || $$invalidate(9, _date = e.shiftKey
+				? addYears(new Date(), -1)
+				: addMonths(new Date(), -1));
 				$$invalidate(9, _date = e.shiftKey ? addYears(_date, 1) : addMonths(_date, 1));
 				break;
+			default:
+				return;
 		}
 
 		dispatchValue(_date);
+		e.preventDefault();
+		e.stopPropagation();
 	}
 
 	function goa_popover_binding($$value) {
@@ -26176,6 +26071,21 @@ class Pages extends SvelteElement {
 
 customElements.define("goa-pages", Pages);
 
+function isUrlMatch(windowUrl, testUrl) {
+  if (!testUrl)
+    return false;
+  const pathParts = windowUrl.pathname.split("/");
+  testUrl = testUrl.replace(/^\//, "");
+  for (const part of pathParts) {
+    if (part === testUrl)
+      return true;
+  }
+  if (windowUrl.hash === testUrl) {
+    return true;
+  }
+  return false;
+}
+
 /* src/components/side-menu/SideMenu.svelte generated by Svelte v3.59.2 */
 
 function create_fragment$4(ctx) {
@@ -26207,11 +26117,11 @@ function instance$4($$self, $$props, $$invalidate) {
 
 	onMount(async () => {
 		await tick();
-		setCurrent(window.location.toString());
+		setCurrentUrl();
 		addEventListeners();
 	});
 
-	function setCurrent(url) {
+	function setCurrentUrl() {
 		const slot = _rootEl.querySelector("slot");
 
 		if (!slot) {
@@ -26221,7 +26131,7 @@ function instance$4($$self, $$props, $$invalidate) {
 		const links = slot.assignedElements().filter(el => el.tagName === "A");
 
 		links.forEach(child => {
-			const current = url.endsWith(child.getAttribute("href"));
+			const current = isUrlMatch(document.location, child.getAttribute("href"));
 
 			if (current) {
 				child.classList.add("current");
@@ -26236,9 +26146,9 @@ function instance$4($$self, $$props, $$invalidate) {
 		let currentLocation = document.location.href;
 
 		const observer = new MutationObserver(_mutationList => {
-				if (currentLocation !== document.location.href) {
+				if (isUrlMatch(document.location, currentLocation)) {
 					currentLocation = document.location.href;
-					setCurrent(currentLocation);
+					setCurrentUrl();
 				}
 			});
 
@@ -26246,7 +26156,7 @@ function instance$4($$self, $$props, $$invalidate) {
 
 		// watch hash / browser history changes
 		window.addEventListener("popstate", () => {
-			setCurrent(document.location.href);
+			setCurrentUrl();
 		});
 	}
 
@@ -26310,7 +26220,7 @@ function create_else_block(ctx) {
 	};
 }
 
-// (189:4) {#if _open}
+// (190:4) {#if _open}
 function create_if_block$2(ctx) {
 	let goa_icon;
 
@@ -26424,24 +26334,6 @@ function toSlug(path) {
 	: path.toLowerCase().replace(/ /g, "-");
 }
 
-function matchesChild(el, url) {
-	if (url.endsWith(toSlug(el.heading))) {
-		return true;
-	}
-
-	const slot = el.querySelector("slot");
-
-	if (!slot) {
-		return false;
-	}
-
-	const children = slot.assignedElements();
-
-	return !!children.find(child => {
-		return url.endsWith(child.getAttribute("href"));
-	});
-}
-
 function instance$3($$self, $$props, $$invalidate) {
 	let _slug;
 	let { heading } = $$props;
@@ -26457,8 +26349,7 @@ function instance$3($$self, $$props, $$invalidate) {
 	});
 
 	function checkUrlMatches() {
-		const url = window.location.href;
-		$$invalidate(1, _open = matchesMenu(url) || matchesChild(_rootEl, url));
+		$$invalidate(1, _open = matchesMenu() || matchesChild(_rootEl));
 
 		if (_open) {
 			notifyParent(true);
@@ -26491,12 +26382,30 @@ function instance$3($$self, $$props, $$invalidate) {
 		});
 	}
 
-	function matchesMenu(url) {
-		return url.endsWith(_slug);
+	function matchesMenu() {
+		return isUrlMatch(document.location, _slug);
+	}
+
+	function matchesChild(el) {
+		if (isUrlMatch(document.location, toSlug(el.heading))) {
+			return true;
+		}
+
+		const slot = el.querySelector("slot");
+
+		if (!slot) {
+			return false;
+		}
+
+		const children = slot.assignedElements();
+
+		return !!children.find(child => {
+			return isUrlMatch(document.location, child.getAttribute("href"));
+		});
 	}
 
 	function setCurrent() {
-		const url = document.location.href;
+		document.location.href;
 		const slot = _rootEl.querySelector("slot");
 
 		if (!slot) {
@@ -26507,7 +26416,8 @@ function instance$3($$self, $$props, $$invalidate) {
 		$$invalidate(2, _current = false);
 
 		children.forEach(child => {
-			const current = url.endsWith(child.getAttribute("href"));
+			const url = child.getAttribute("href");
+			const current = isUrlMatch(document.location, url);
 
 			if (current) {
 				$$invalidate(2, _current = true);