@abgov/web-components 1.0.0-alpha.48 → 1.0.0-alpha.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/web-components",
-  "version": "1.0.0-alpha.48",
+  "version": "1.0.0-alpha.49",
   "description": "Government of Alberta - UI Web components",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/web-components.es.js

@@ -1070,7 +1070,7 @@ function create_else_block$2(ctx) {
 }
 
 // (35:2) {#if showIcon}
-function create_if_block_1$9(ctx) {
+function create_if_block_1$8(ctx) {
 	let goa_icon;
 
 	return {
@@ -1123,7 +1123,7 @@ function create_fragment$u(ctx) {
 	let div_class_value;
 
 	function select_block_type(ctx, dirty) {
-		if (/*showIcon*/ ctx[4]) return create_if_block_1$9;
+		if (/*showIcon*/ ctx[4]) return create_if_block_1$8;
 		return create_else_block$2;
 	}
 
@@ -2156,7 +2156,7 @@ customElements.define("goa-card-image", CardImage);
 
 /* libs/web-components/src/components/checkbox/Checkbox.svelte generated by Svelte v3.44.3 */
 
-function create_if_block_1$8(ctx) {
+function create_if_block_1$7(ctx) {
 	let svg;
 	let path;
 
@@ -2221,7 +2221,7 @@ function create_fragment$l(ctx) {
 
 	function select_block_type(ctx, dirty) {
 		if (/*isIndeterminate*/ ctx[5]) return create_if_block$b;
-		if (/*isChecked*/ ctx[4]) return create_if_block_1$8;
+		if (/*isChecked*/ ctx[4]) return create_if_block_1$7;
 	}
 
 	let current_block_type = select_block_type(ctx);
@@ -2747,12 +2747,13 @@ const BIND$1 = "bind";
 
 function get_each_context$1(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[19] = list[i];
+	child_ctx[29] = list[i];
+	child_ctx[31] = i;
 	return child_ctx;
 }
 
-// (68:2) {#if isMenuVisible}
-function create_if_block_1$7(ctx) {
+// (137:2) {#if isMenuVisible}
+function create_if_block$a(ctx) {
 	let div;
 	let div_data_testid_value;
 	let mounted;
@@ -2768,12 +2769,12 @@ function create_if_block_1$7(ctx) {
 			insert(target, div, anchor);
 
 			if (!mounted) {
-				dispose = listen(div, "click", /*closeMenu*/ ctx[14]);
+				dispose = listen(div, "click", /*closeMenu*/ ctx[15]);
 				mounted = true;
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty & /*name*/ 2 && div_data_testid_value !== (div_data_testid_value = `${/*name*/ ctx[1]}-dropdown-background`)) {
+			if (dirty[0] & /*name*/ 2 && div_data_testid_value !== (div_data_testid_value = `${/*name*/ ctx[1]}-dropdown-background`)) {
 				attr(div, "data-testid", div_data_testid_value);
 			}
 		},
@@ -2785,82 +2786,20 @@ function create_if_block_1$7(ctx) {
 	};
 }
 
-// (95:4) {#if isMenuVisible}
-function create_if_block$a(ctx) {
-	let div;
-	let ul;
-	let slot;
-	let t;
-	let each_blocks = [];
-	let each_1_lookup = new Map();
-	let ul_style_value;
-	let each_value = /*options*/ ctx[7];
-	const get_key = ctx => /*option*/ ctx[19].value;
-
-	for (let i = 0; i < each_value.length; i += 1) {
-		let child_ctx = get_each_context$1(ctx, each_value, i);
-		let key = get_key(child_ctx);
-		each_1_lookup.set(key, each_blocks[i] = create_each_block$1(key, child_ctx));
-	}
-
-	return {
-		c() {
-			div = element("div");
-			ul = element("ul");
-			slot = element("slot");
-			t = space();
-
-			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].c();
-			}
-
-			attr(ul, "class", "goa-dropdown-list");
-			attr(ul, "style", ul_style_value = `overflow-y: auto; max-height: ${/*maxheight*/ ctx[3]}px`);
-			attr(div, "class", "menu");
-		},
-		m(target, anchor) {
-			insert(target, div, anchor);
-			append(div, ul);
-			append(ul, slot);
-			append(ul, t);
-
-			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].m(ul, null);
-			}
-		},
-		p(ctx, dirty) {
-			if (dirty & /*options, value, onSelect*/ 4225) {
-				each_value = /*options*/ ctx[7];
-				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, ul, destroy_block, create_each_block$1, null, get_each_context$1);
-			}
-
-			if (dirty & /*maxheight*/ 8 && ul_style_value !== (ul_style_value = `overflow-y: auto; max-height: ${/*maxheight*/ ctx[3]}px`)) {
-				attr(ul, "style", ul_style_value);
-			}
-		},
-		d(detaching) {
-			if (detaching) detach(div);
-
-			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].d();
-			}
-		}
-	};
-}
-
-// (102:10) {#each options as option (option.value)}
+// (171:4) {#each options as option, index (option.value)}
 function create_each_block$1(key_1, ctx) {
 	let li;
-	let t0_value = /*option*/ ctx[19].label + "";
+	let t0_value = /*option*/ ctx[29].label + "";
 	let t0;
 	let t1;
 	let li_data_testid_value;
+	let li_data_index_value;
 	let li_style_value;
 	let mounted;
 	let dispose;
 
 	function click_handler() {
-		return /*click_handler*/ ctx[16](/*option*/ ctx[19]);
+		return /*click_handler*/ ctx[18](/*option*/ ctx[29]);
 	}
 
 	return {
@@ -2870,11 +2809,13 @@ function create_each_block$1(key_1, ctx) {
 			li = element("li");
 			t0 = text(t0_value);
 			t1 = space();
-			attr(li, "data-testid", li_data_testid_value = `${/*option*/ ctx[19].value}-dropdown-item`);
+			attr(li, "data-testid", li_data_testid_value = `${/*option*/ ctx[29].value}-dropdown-item`);
+			attr(li, "data-index", li_data_index_value = /*index*/ ctx[31]);
 			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--selected", /*option*/ ctx[19].value === /*value*/ ctx[0]);
+			toggle_class(li, "goa-dropdown-option--tabbed", /*index*/ ctx[31] === /*highlightedIndex*/ ctx[10]);
+			toggle_class(li, "goa-dropdown-option--selected", /*option*/ ctx[29].value === /*value*/ ctx[0]);
 			this.first = li;
 		},
 		m(target, anchor) {
@@ -2889,14 +2830,22 @@ function create_each_block$1(key_1, ctx) {
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
-			if (dirty & /*options*/ 128 && t0_value !== (t0_value = /*option*/ ctx[19].label + "")) set_data(t0, t0_value);
+			if (dirty[0] & /*options*/ 128 && t0_value !== (t0_value = /*option*/ ctx[29].label + "")) set_data(t0, t0_value);
 
-			if (dirty & /*options*/ 128 && li_data_testid_value !== (li_data_testid_value = `${/*option*/ ctx[19].value}-dropdown-item`)) {
+			if (dirty[0] & /*options*/ 128 && li_data_testid_value !== (li_data_testid_value = `${/*option*/ ctx[29].value}-dropdown-item`)) {
 				attr(li, "data-testid", li_data_testid_value);
 			}
 
-			if (dirty & /*options, value*/ 129) {
-				toggle_class(li, "goa-dropdown-option--selected", /*option*/ ctx[19].value === /*value*/ ctx[0]);
+			if (dirty[0] & /*options*/ 128 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[31])) {
+				attr(li, "data-index", li_data_index_value);
+			}
+
+			if (dirty[0] & /*options, highlightedIndex*/ 1152) {
+				toggle_class(li, "goa-dropdown-option--tabbed", /*index*/ ctx[31] === /*highlightedIndex*/ ctx[10]);
+			}
+
+			if (dirty[0] & /*options, value*/ 129) {
+				toggle_class(li, "goa-dropdown-option--selected", /*option*/ ctx[29].value === /*value*/ ctx[0]);
 			}
 		},
 		d(detaching) {
@@ -2908,31 +2857,49 @@ function create_each_block$1(key_1, ctx) {
 }
 
 function create_fragment$j(ctx) {
-	let div2;
-	let t0;
 	let div1;
+	let t0;
 	let div0;
 	let goa_input;
 	let goa_input_id_value;
 	let div0_data_testid_value;
 	let t1;
+	let ul;
+	let slot;
+	let t2;
+	let each_blocks = [];
+	let each_1_lookup = new Map();
+	let ul_style_value;
 	let mounted;
 	let dispose;
-	let if_block0 = /*isMenuVisible*/ ctx[9] && create_if_block_1$7(ctx);
-	let if_block1 = /*isMenuVisible*/ ctx[9] && create_if_block$a(ctx);
+	let if_block = /*isMenuVisible*/ ctx[9] && create_if_block$a(ctx);
+	let each_value = /*options*/ ctx[7];
+	const get_key = ctx => /*option*/ ctx[29].value;
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		let child_ctx = get_each_context$1(ctx, each_value, i);
+		let key = get_key(child_ctx);
+		each_1_lookup.set(key, each_blocks[i] = create_each_block$1(key, child_ctx));
+	}
 
 	return {
 		c() {
-			div2 = element("div");
-			if (if_block0) if_block0.c();
-			t0 = space();
 			div1 = element("div");
+			if (if_block) if_block.c();
+			t0 = space();
 			div0 = element("div");
 			goa_input = element("goa-input");
 			t1 = space();
-			if (if_block1) if_block1.c();
+			ul = element("ul");
+			slot = element("slot");
+			t2 = space();
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
 			this.c = noop;
-			set_custom_element_data(goa_input, "error", /*isError*/ ctx[11]);
+			set_custom_element_data(goa_input, "error", /*isError*/ ctx[13]);
 			set_custom_element_data(goa_input, "disabled", /*disabled*/ ctx[5]);
 			set_custom_element_data(goa_input, "leadingicon", /*leadingicon*/ ctx[2]);
 			set_custom_element_data(goa_input, "placeholder", /*placeholder*/ ctx[4]);
@@ -2943,91 +2910,107 @@ function create_fragment$j(ctx) {
 			set_custom_element_data(goa_input, "type", "text");
 			set_custom_element_data(goa_input, "value", /*selectedLabel*/ ctx[8]);
 			attr(div0, "data-testid", div0_data_testid_value = `${/*name*/ ctx[1]}-dropdown`);
-			attr(div2, "data-testid", /*testid*/ ctx[6]);
-			attr(div2, "class", "goa-dropdown-box");
+			attr(ul, "tabindex", "0");
+			attr(ul, "class", "goa-dropdown-list");
+			attr(ul, "style", ul_style_value = `overflow-y: auto; max-height: ${/*maxheight*/ ctx[3]}px`);
+			toggle_class(ul, "dropdown-active", /*isMenuVisible*/ ctx[9]);
+			attr(div1, "data-testid", /*testid*/ ctx[6]);
+			attr(div1, "class", "goa-dropdown-box");
 		},
 		m(target, anchor) {
-			insert(target, div2, anchor);
-			if (if_block0) if_block0.m(div2, null);
-			append(div2, t0);
-			append(div2, div1);
+			insert(target, div1, anchor);
+			if (if_block) if_block.m(div1, null);
+			append(div1, t0);
 			append(div1, div0);
 			append(div0, goa_input);
 			append(div1, t1);
-			if (if_block1) if_block1.m(div1, null);
-			/*div2_binding*/ ctx[17](div2);
+			append(div1, ul);
+			append(ul, slot);
+			append(ul, t2);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(ul, null);
+			}
+
+			/*ul_binding*/ ctx[19](ul);
+			/*div1_binding*/ ctx[20](div1);
 
 			if (!mounted) {
-				dispose = listen(goa_input, "click", /*showMenu*/ ctx[13]);
+				dispose = listen(goa_input, "click", /*showMenu*/ ctx[14]);
 				mounted = true;
 			}
 		},
-		p(ctx, [dirty]) {
+		p(ctx, dirty) {
 			if (/*isMenuVisible*/ ctx[9]) {
-				if (if_block0) {
-					if_block0.p(ctx, dirty);
+				if (if_block) {
+					if_block.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_1$7(ctx);
-					if_block0.c();
-					if_block0.m(div2, t0);
+					if_block = create_if_block$a(ctx);
+					if_block.c();
+					if_block.m(div1, t0);
 				}
-			} else if (if_block0) {
-				if_block0.d(1);
-				if_block0 = null;
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
 			}
 
-			if (dirty & /*isError*/ 2048) {
-				set_custom_element_data(goa_input, "error", /*isError*/ ctx[11]);
+			if (dirty[0] & /*isError*/ 8192) {
+				set_custom_element_data(goa_input, "error", /*isError*/ ctx[13]);
 			}
 
-			if (dirty & /*disabled*/ 32) {
+			if (dirty[0] & /*disabled*/ 32) {
 				set_custom_element_data(goa_input, "disabled", /*disabled*/ ctx[5]);
 			}
 
-			if (dirty & /*leadingicon*/ 4) {
+			if (dirty[0] & /*leadingicon*/ 4) {
 				set_custom_element_data(goa_input, "leadingicon", /*leadingicon*/ ctx[2]);
 			}
 
-			if (dirty & /*placeholder*/ 16) {
+			if (dirty[0] & /*placeholder*/ 16) {
 				set_custom_element_data(goa_input, "placeholder", /*placeholder*/ ctx[4]);
 			}
 
-			if (dirty & /*name*/ 2 && goa_input_id_value !== (goa_input_id_value = `${/*name*/ ctx[1]}-dropdown-input`)) {
+			if (dirty[0] & /*name*/ 2 && goa_input_id_value !== (goa_input_id_value = `${/*name*/ ctx[1]}-dropdown-input`)) {
 				set_custom_element_data(goa_input, "id", goa_input_id_value);
 			}
 
-			if (dirty & /*selectedLabel*/ 256) {
+			if (dirty[0] & /*selectedLabel*/ 256) {
 				set_custom_element_data(goa_input, "value", /*selectedLabel*/ ctx[8]);
 			}
 
-			if (dirty & /*name*/ 2 && div0_data_testid_value !== (div0_data_testid_value = `${/*name*/ ctx[1]}-dropdown`)) {
+			if (dirty[0] & /*name*/ 2 && div0_data_testid_value !== (div0_data_testid_value = `${/*name*/ ctx[1]}-dropdown`)) {
 				attr(div0, "data-testid", div0_data_testid_value);
 			}
 
-			if (/*isMenuVisible*/ ctx[9]) {
-				if (if_block1) {
-					if_block1.p(ctx, dirty);
-				} else {
-					if_block1 = create_if_block$a(ctx);
-					if_block1.c();
-					if_block1.m(div1, null);
-				}
-			} else if (if_block1) {
-				if_block1.d(1);
-				if_block1 = null;
+			if (dirty[0] & /*options, highlightedIndex, value, onSelect*/ 66689) {
+				each_value = /*options*/ ctx[7];
+				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, ul, destroy_block, create_each_block$1, null, get_each_context$1);
 			}
 
-			if (dirty & /*testid*/ 64) {
-				attr(div2, "data-testid", /*testid*/ ctx[6]);
+			if (dirty[0] & /*maxheight*/ 8 && ul_style_value !== (ul_style_value = `overflow-y: auto; max-height: ${/*maxheight*/ ctx[3]}px`)) {
+				attr(ul, "style", ul_style_value);
+			}
+
+			if (dirty[0] & /*isMenuVisible*/ 512) {
+				toggle_class(ul, "dropdown-active", /*isMenuVisible*/ ctx[9]);
+			}
+
+			if (dirty[0] & /*testid*/ 64) {
+				attr(div1, "data-testid", /*testid*/ ctx[6]);
 			}
 		},
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(div2);
-			if (if_block0) if_block0.d();
-			if (if_block1) if_block1.d();
-			/*div2_binding*/ ctx[17](null);
+			if (detaching) detach(div1);
+			if (if_block) if_block.d();
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].d();
+			}
+
+			/*ul_binding*/ ctx[19](null);
+			/*div1_binding*/ ctx[20](null);
 			mounted = false;
 			dispose();
 		}
@@ -3052,17 +3035,26 @@ function instance$i($$self, $$props, $$invalidate) {
 
 	let selectedLabel = "";
 	let isMenuVisible = false;
+	let highlightedIndex = 0;
 	let el;
+	let menuEl;
 	let ctx;
 
-	function onSelect(name, val, label) {
-		$$invalidate(8, selectedLabel = label);
-		$$invalidate(0, value = val);
-		$$invalidate(9, isMenuVisible = false);
-		el.dispatchEvent(new CustomEvent("_change", { composed: true, detail: { name, value } }));
-	}
-
+	// Hooks
 	onMount(async () => {
+		el.addEventListener("focus", onFocus, true);
+		el.addEventListener("blur", onBlur, true);
+		bindContext();
+	});
+
+	onDestroy(() => {
+		el.removeEventListener("focus", onFocus, true);
+		el.removeEventListener("blur", onBlur, true);
+		deleteContext(name);
+	});
+
+	// Functions
+	function bindContext() {
 		ctx = createContext(name);
 
 		ctx.subscribe(data => {
@@ -3077,35 +3069,114 @@ function instance$i($$self, $$props, $$invalidate) {
 							$$invalidate(8, selectedLabel = _data.label);
 						}
 
+						setHighlightedIndexToSelected();
 						break;
 					}
 			}
 		});
-	});
-
-	onDestroy(() => {
-		deleteContext(name);
-	});
+	}
 
-	// Functions
 	async function showMenu() {
-		if (disabled) {
+		if (disabled || isMenuVisible) {
 			return;
 		}
 
 		$$invalidate(9, isMenuVisible = true);
+		await tick();
+
+		// hide menu on blur
+		menuEl.addEventListener("blur", closeMenu);
+
+		menuEl.focus();
+
+		// bind up/down arrows to navigate options
+		menuEl.addEventListener("keydown", onMenuKeyDown);
+
+		menuEl.addEventListener("mouseover", onHighlight);
 	}
 
 	function closeMenu() {
+		menuEl.removeEventListener("blur", closeMenu);
+		menuEl.removeEventListener("keydown", onMenuKeyDown);
+		menuEl.removeEventListener("mouseover", onHighlight);
+		setHighlightedIndexToSelected();
 		$$invalidate(9, isMenuVisible = false);
 	}
 
+	function setHighlightedIndexToSelected() {
+		$$invalidate(10, highlightedIndex = options.findIndex(option => option.value === value));
+	}
+
+	// Event handlers
+	function onSelect(name, val, label) {
+		$$invalidate(8, selectedLabel = label);
+		$$invalidate(0, value = val);
+		closeMenu();
+		el.dispatchEvent(new CustomEvent("_change", { composed: true, detail: { name, value } }));
+	}
+
+	const onInputKeyDown = e => {
+		switch (e.key) {
+			case " ":
+				showMenu();
+				e.preventDefault();
+				break;
+		}
+	};
+
+	// add required bindings to component
+	function onFocus() {
+		el.addEventListener("keydown", onInputKeyDown);
+	}
+
+	// remove all bindings from component
+	function onBlur() {
+		el.removeEventListener("keydown", onInputKeyDown);
+	}
+
+	function onMenuKeyDown(e) {
+		switch (e.key) {
+			case "ArrowUp":
+				if (highlightedIndex === 0) {
+					$$invalidate(10, highlightedIndex = options.length - 1);
+				} else {
+					$$invalidate(10, highlightedIndex--, highlightedIndex);
+				}
+				e.preventDefault();
+				break;
+			case "ArrowDown":
+				$$invalidate(10, highlightedIndex = (highlightedIndex + 1) % options.length);
+				e.preventDefault();
+				break;
+			case "Tab":
+			case "Enter":
+				onSelect(name, options[highlightedIndex].value, options[highlightedIndex].label);
+				e.preventDefault();
+				break;
+			case "Escape":
+				closeMenu();
+				e.preventDefault();
+				break;
+		}
+	}
+
+	function onHighlight(e) {
+		$$invalidate(10, highlightedIndex = Number(e.target.dataset.index));
+	}
+
 	const click_handler = option => onSelect(option.name, option.value, option.label);
 
-	function div2_binding($$value) {
+	function ul_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			menuEl = $$value;
+			$$invalidate(12, menuEl);
+		});
+	}
+
+	function div1_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			el = $$value;
-			$$invalidate(10, el);
+			$$invalidate(11, el);
 		});
 	}
 
@@ -3116,14 +3187,14 @@ function instance$i($$self, $$props, $$invalidate) {
 		if ('maxheight' in $$props) $$invalidate(3, maxheight = $$props.maxheight);
 		if ('placeholder' in $$props) $$invalidate(4, placeholder = $$props.placeholder);
 		if ('disabled' in $$props) $$invalidate(5, disabled = $$props.disabled);
-		if ('error' in $$props) $$invalidate(15, error = $$props.error);
+		if ('error' in $$props) $$invalidate(17, error = $$props.error);
 		if ('testid' in $$props) $$invalidate(6, testid = $$props.testid);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*error*/ 32768) {
+		if ($$self.$$.dirty[0] & /*error*/ 131072) {
 			// TODO: remove this once goa-input has the toBoolean method removed
-			$$invalidate(11, isError = error ? "true" : "false");
+			$$invalidate(13, isError = error ? "true" : "false");
 		}
 	};
 
@@ -3138,21 +3209,24 @@ function instance$i($$self, $$props, $$invalidate) {
 		options,
 		selectedLabel,
 		isMenuVisible,
+		highlightedIndex,
 		el,
+		menuEl,
 		isError,
-		onSelect,
 		showMenu,
 		closeMenu,
+		onSelect,
 		error,
 		click_handler,
-		div2_binding
+		ul_binding,
+		div1_binding
 	];
 }
 
 class Dropdown extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-dropdown-box{position:relative;cursor:pointer}.goa-dropdown-background{position:fixed;z-index:98;inset:0}.goa-dropdown-list{position:absolute;left:0;right:0;padding:0;margin:0;margin-top:3px;list-style-type:none;background:var(--color-white);border-radius:var(--input-border-radius);box-shadow:var(--shadow-1);z-index:99}.goa-dropdown-list{scroll-behavior:smooth;scrollbar-width:thin}.goa-dropdown-list::-webkit-scrollbar{width:6px}.goa-dropdown-list::-webkit-scrollbar-track{background:#f1f1f1}.goa-dropdown-list::-webkit-scrollbar-thumb{background:#888}.goa-dropdown-list::-webkit-scrollbar-thumb:hover{background:#555}li{font-family:var(--font-family)}.goa-dropdown-option{margin:0;padding:0.5rem;cursor:pointer;color:var(--color-black)}.goa-dropdown-option:hover{background:var(--color-gray-100);color:var(--goa-color-interactive--hover)}.goa-dropdown-option--disabled{opacity:0.5;cursor:default}.goa-dropdown-option--disabled:hover{cursor:default;color:var(--color-gray-600)}.goa-dropdown-option--selected{background:var(--goa-color-interactive);color:var(--color-white)}.goa-dropdown-option--selected:hover{background:var(--goa-color-interactive--hover);color:var(--color-white)}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-dropdown-box{position:relative;cursor:pointer}.goa-dropdown-background{cursor:default;position:fixed;z-index:98;inset:0}.goa-dropdown-list{position:absolute;left:0;right:0;padding:0;margin:0;margin-top:3px;list-style-type:none;background:var(--color-white);border-radius:var(--input-border-radius);outline:none;box-shadow:var(--shadow-1);z-index:99;scroll-behavior:smooth;scrollbar-width:thin;display:none}.dropdown-active{display:block}.goa-dropdown-list::-webkit-scrollbar{width:6px}.goa-dropdown-list::-webkit-scrollbar-track{background:#f1f1f1}.goa-dropdown-list::-webkit-scrollbar-thumb{background:#888}.goa-dropdown-list::-webkit-scrollbar-thumb:hover{background:#555}.goa-dropdown-option{margin:0;padding:0.5rem;cursor:pointer;color:var(--color-black)}.goa-dropdown-option--tabbed{background:var(--color-gray-100);color:var(--goa-color-interactive--hover)}.goa-dropdown-option--disabled{opacity:0.5;cursor:default}.goa-dropdown-option--disabled:hover{cursor:default;color:var(--color-gray-600)}.goa-dropdown-option--selected{background:var(--goa-color-interactive);color:var(--color-white)}.goa-dropdown-option--tabbed.goa-dropdown-option--selected,.goa-dropdown-option--selected:hover{background:var(--goa-color-interactive--hover);color:var(--color-white)}</style>`;
 
 		init(
 			this,
@@ -3171,10 +3245,11 @@ class Dropdown extends SvelteElement {
 				maxheight: 3,
 				placeholder: 4,
 				disabled: 5,
-				error: 15,
+				error: 17,
 				testid: 6
 			},
-			null
+			null,
+			[-1, -1]
 		);
 
 		if (options) {
@@ -3257,7 +3332,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[15];
+		return this.$$.ctx[17];
 	}
 
 	set error(error) {