@abgov/web-components 1.13.1-alpha.1 → 1.13.1

package/package.json

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

package/web-components.es.js

@@ -6228,18 +6228,18 @@ customElements.define("goa-divider", Divider);
 
 function get_each_context_1(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[51] = list[i];
-	child_ctx[55] = i;
+	child_ctx[49] = list[i];
+	child_ctx[53] = i;
 	return child_ctx;
 }
 
 function get_each_context$7(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[51] = list[i];
+	child_ctx[49] = list[i];
 	return child_ctx;
 }
 
-// (343:2) {:else}
+// (257:2) {:else}
 function create_else_block$a(ctx) {
 	let slot;
 	let t0;
@@ -6256,7 +6256,7 @@ function create_else_block$a(ctx) {
 	let mounted;
 	let dispose;
 	let each_value_1 = /*_options*/ ctx[13];
-	const get_key = ctx => /*index*/ ctx[55];
+	const get_key = ctx => /*index*/ ctx[53];
 
 	for (let i = 0; i < each_value_1.length; i += 1) {
 		let child_ctx = get_each_context_1(ctx, each_value_1, i);
@@ -6278,35 +6278,34 @@ function create_else_block$a(ctx) {
 			}
 
 			set_custom_element_data(goa_input, "slot", "target");
-			set_custom_element_data(goa_input, "disabled", /*disabled*/ ctx[6]);
 			set_custom_element_data(goa_input, "error", /*error*/ ctx[7]);
+			set_custom_element_data(goa_input, "disabled", /*disabled*/ ctx[6]);
 			set_custom_element_data(goa_input, "leadingicon", /*leadingicon*/ ctx[2]);
-			set_custom_element_data(goa_input, "name", /*name*/ ctx[0]);
 			set_custom_element_data(goa_input, "placeholder", /*placeholder*/ ctx[4]);
 			set_custom_element_data(goa_input, "aria-controls", "menu");
 			set_custom_element_data(goa_input, "aria-expanded", /*_isMenuVisible*/ ctx[18]);
 			set_custom_element_data(goa_input, "arialabel", goa_input_arialabel_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0]);
 			set_custom_element_data(goa_input, "data-testid", goa_input_data_testid_value = `${/*name*/ ctx[0]}-dropdown-input`);
+			set_custom_element_data(goa_input, "readonly", "");
 			set_custom_element_data(goa_input, "role", "combobox");
 			set_custom_element_data(goa_input, "trailingicon", "chevron-down");
 			set_custom_element_data(goa_input, "type", "text");
 			set_custom_element_data(goa_input, "value", /*_selectedLabel*/ ctx[17]);
 			set_custom_element_data(goa_input, "width", "100%");
-			set_custom_element_data(goa_input, "readonly", "");
+			set_custom_element_data(goa_input, "name", /*name*/ ctx[0]);
 			attr(ul, "id", "menu");
 			attr(ul, "role", "listbox");
 			attr(ul, "aria-activedescendant", /*_selectedLabel*/ ctx[17]);
 			attr(ul, "data-testid", "dropdown-menu");
+			attr(ul, "tabindex", "0");
 
 			attr(ul, "style", ul_style_value = `
-          outline: none;
           overflow-y: auto;
           max-height: ${/*maxheight*/ ctx[3]};
         `);
 
 			set_custom_element_data(goa_popover, "disabled", /*disabled*/ ctx[6]);
 			set_custom_element_data(goa_popover, "relative", /*relative*/ ctx[8]);
-			set_custom_element_data(goa_popover, "tabindex", "-1");
 			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", goa_popover_width_value = /*width*/ ctx[5] || /*_computedWidth*/ ctx[20]);
@@ -6333,20 +6332,16 @@ function create_else_block$a(ctx) {
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*disabled*/ 64) {
-				set_custom_element_data(goa_input, "disabled", /*disabled*/ ctx[6]);
-			}
-
 			if (dirty[0] & /*error*/ 128) {
 				set_custom_element_data(goa_input, "error", /*error*/ ctx[7]);
 			}
 
-			if (dirty[0] & /*leadingicon*/ 4) {
-				set_custom_element_data(goa_input, "leadingicon", /*leadingicon*/ ctx[2]);
+			if (dirty[0] & /*disabled*/ 64) {
+				set_custom_element_data(goa_input, "disabled", /*disabled*/ ctx[6]);
 			}
 
-			if (dirty[0] & /*name*/ 1) {
-				set_custom_element_data(goa_input, "name", /*name*/ ctx[0]);
+			if (dirty[0] & /*leadingicon*/ 4) {
+				set_custom_element_data(goa_input, "leadingicon", /*leadingicon*/ ctx[2]);
 			}
 
 			if (dirty[0] & /*placeholder*/ 16) {
@@ -6369,6 +6364,10 @@ function create_else_block$a(ctx) {
 				set_custom_element_data(goa_input, "value", /*_selectedLabel*/ ctx[17]);
 			}
 
+			if (dirty[0] & /*name*/ 1) {
+				set_custom_element_data(goa_input, "name", /*name*/ ctx[0]);
+			}
+
 			if (dirty[0] & /*_options, _values, _highlightedIndex, onSelect*/ 67706880) {
 				each_value_1 = /*_options*/ ctx[13];
 				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, null, get_each_context_1);
@@ -6379,7 +6378,6 @@ function create_else_block$a(ctx) {
 			}
 
 			if (dirty[0] & /*maxheight*/ 8 && ul_style_value !== (ul_style_value = `
-          outline: none;
           overflow-y: auto;
           max-height: ${/*maxheight*/ ctx[3]};
         `)) {
@@ -6418,7 +6416,7 @@ function create_else_block$a(ctx) {
 	};
 }
 
-// (328:2) {#if _native}
+// (238:2) {#if _native}
 function create_if_block$m(ctx) {
 	let select;
 	let slot;
@@ -6508,10 +6506,10 @@ function create_if_block$m(ctx) {
 	};
 }
 
-// (389:8) {#each _options as option, index (index)}
+// (296:8) {#each _options as option, index (index)}
 function create_each_block_1(key_1, ctx) {
 	let li;
-	let t0_value = (/*option*/ ctx[51].label || /*option*/ ctx[51].value) + "";
+	let t0_value = (/*option*/ ctx[49].label || /*option*/ ctx[49].value) + "";
 	let t0;
 	let t1;
 	let li_id_value;
@@ -6524,7 +6522,7 @@ function create_each_block_1(key_1, ctx) {
 	let dispose;
 
 	function click_handler() {
-		return /*click_handler*/ ctx[32](/*option*/ ctx[51]);
+		return /*click_handler*/ ctx[32](/*option*/ ctx[49]);
 	}
 
 	return {
@@ -6534,23 +6532,22 @@ function create_each_block_1(key_1, ctx) {
 			li = element("li");
 			t0 = text(t0_value);
 			t1 = space();
-			attr(li, "id", li_id_value = /*option*/ ctx[51].label);
+			attr(li, "id", li_id_value = /*option*/ ctx[49].label);
 			attr(li, "role", "option");
-			attr(li, "tabindex", "0");
-			set_style(li, "display", "block");
-			attr(li, "aria-label", li_aria_label_value = /*option*/ ctx[51].label || /*option*/ ctx[51].value);
+			attr(li, "aria-label", li_aria_label_value = /*option*/ ctx[49].label || /*option*/ ctx[49].value);
 
-			attr(li, "aria-selected", li_aria_selected_value = /*_values*/ ctx[16].includes(/*option*/ ctx[51].value)
+			attr(li, "aria-selected", li_aria_selected_value = /*_values*/ ctx[16].includes(/*option*/ ctx[49].value)
 			? "true"
 			: "false");
 
 			attr(li, "class", "dropdown-item");
-			attr(li, "data-testid", li_data_testid_value = `dropdown-item-${/*option*/ ctx[51].value}`);
-			attr(li, "data-index", li_data_index_value = /*index*/ ctx[55]);
-			attr(li, "data-value", li_data_value_value = /*option*/ ctx[51].value);
+			attr(li, "data-testid", li_data_testid_value = `dropdown-item-${/*option*/ ctx[49].value}`);
+			attr(li, "data-index", li_data_index_value = /*index*/ ctx[53]);
+			attr(li, "data-value", li_data_value_value = /*option*/ ctx[49].value);
+			set_style(li, "display", "block");
 			toggle_class(li, "dropdown-item--disabled", false);
-			toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[55] === /*_highlightedIndex*/ ctx[19]);
-			toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[16].includes(/*option*/ ctx[51].value));
+			toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[53] === /*_highlightedIndex*/ ctx[19]);
+			toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[16].includes(/*option*/ ctx[49].value));
 			this.first = li;
 		},
 		m(target, anchor) {
@@ -6565,40 +6562,40 @@ function create_each_block_1(key_1, ctx) {
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
-			if (dirty[0] & /*_options*/ 8192 && t0_value !== (t0_value = (/*option*/ ctx[51].label || /*option*/ ctx[51].value) + "")) set_data(t0, t0_value);
+			if (dirty[0] & /*_options*/ 8192 && t0_value !== (t0_value = (/*option*/ ctx[49].label || /*option*/ ctx[49].value) + "")) set_data(t0, t0_value);
 
-			if (dirty[0] & /*_options*/ 8192 && li_id_value !== (li_id_value = /*option*/ ctx[51].label)) {
+			if (dirty[0] & /*_options*/ 8192 && li_id_value !== (li_id_value = /*option*/ ctx[49].label)) {
 				attr(li, "id", li_id_value);
 			}
 
-			if (dirty[0] & /*_options*/ 8192 && li_aria_label_value !== (li_aria_label_value = /*option*/ ctx[51].label || /*option*/ ctx[51].value)) {
+			if (dirty[0] & /*_options*/ 8192 && li_aria_label_value !== (li_aria_label_value = /*option*/ ctx[49].label || /*option*/ ctx[49].value)) {
 				attr(li, "aria-label", li_aria_label_value);
 			}
 
-			if (dirty[0] & /*_values, _options*/ 73728 && li_aria_selected_value !== (li_aria_selected_value = /*_values*/ ctx[16].includes(/*option*/ ctx[51].value)
+			if (dirty[0] & /*_values, _options*/ 73728 && li_aria_selected_value !== (li_aria_selected_value = /*_values*/ ctx[16].includes(/*option*/ ctx[49].value)
 			? "true"
 			: "false")) {
 				attr(li, "aria-selected", li_aria_selected_value);
 			}
 
-			if (dirty[0] & /*_options*/ 8192 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${/*option*/ ctx[51].value}`)) {
+			if (dirty[0] & /*_options*/ 8192 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${/*option*/ ctx[49].value}`)) {
 				attr(li, "data-testid", li_data_testid_value);
 			}
 
-			if (dirty[0] & /*_options*/ 8192 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[55])) {
+			if (dirty[0] & /*_options*/ 8192 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[53])) {
 				attr(li, "data-index", li_data_index_value);
 			}
 
-			if (dirty[0] & /*_options*/ 8192 && li_data_value_value !== (li_data_value_value = /*option*/ ctx[51].value)) {
+			if (dirty[0] & /*_options*/ 8192 && li_data_value_value !== (li_data_value_value = /*option*/ ctx[49].value)) {
 				attr(li, "data-value", li_data_value_value);
 			}
 
 			if (dirty[0] & /*_options, _highlightedIndex*/ 532480) {
-				toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[55] === /*_highlightedIndex*/ ctx[19]);
+				toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[53] === /*_highlightedIndex*/ ctx[19]);
 			}
 
 			if (dirty[0] & /*_values, _options*/ 73728) {
-				toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[16].includes(/*option*/ ctx[51].value));
+				toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[16].includes(/*option*/ ctx[49].value));
 			}
 		},
 		d(detaching) {
@@ -6609,10 +6606,10 @@ function create_each_block_1(key_1, ctx) {
 	};
 }
 
-// (337:6) {#each _options as option}
+// (247:6) {#each _options as option}
 function create_each_block$7(ctx) {
 	let option;
-	let t0_value = /*option*/ ctx[51].label + "";
+	let t0_value = /*option*/ ctx[49].label + "";
 	let t0;
 	let t1;
 	let option_selected_value;
@@ -6624,10 +6621,10 @@ function create_each_block$7(ctx) {
 			option = element("option");
 			t0 = text(t0_value);
 			t1 = space();
-			option.selected = option_selected_value = /*option*/ ctx[51].selected;
-			option.__value = option_value_value = /*option*/ ctx[51].value;
+			option.selected = option_selected_value = /*option*/ ctx[49].selected;
+			option.__value = option_value_value = /*option*/ ctx[49].value;
 			option.value = option.__value;
-			attr(option, "aria-label", option_aria_label_value = /*option*/ ctx[51].label);
+			attr(option, "aria-label", option_aria_label_value = /*option*/ ctx[49].label);
 		},
 		m(target, anchor) {
 			insert(target, option, anchor);
@@ -6635,18 +6632,18 @@ function create_each_block$7(ctx) {
 			append(option, t1);
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*_options*/ 8192 && t0_value !== (t0_value = /*option*/ ctx[51].label + "")) set_data(t0, t0_value);
+			if (dirty[0] & /*_options*/ 8192 && t0_value !== (t0_value = /*option*/ ctx[49].label + "")) set_data(t0, t0_value);
 
-			if (dirty[0] & /*_options*/ 8192 && option_selected_value !== (option_selected_value = /*option*/ ctx[51].selected)) {
+			if (dirty[0] & /*_options*/ 8192 && option_selected_value !== (option_selected_value = /*option*/ ctx[49].selected)) {
 				option.selected = option_selected_value;
 			}
 
-			if (dirty[0] & /*_options*/ 8192 && option_value_value !== (option_value_value = /*option*/ ctx[51].value)) {
+			if (dirty[0] & /*_options*/ 8192 && option_value_value !== (option_value_value = /*option*/ ctx[49].value)) {
 				option.__value = option_value_value;
 				option.value = option.__value;
 			}
 
-			if (dirty[0] & /*_options*/ 8192 && option_aria_label_value !== (option_aria_label_value = /*option*/ ctx[51].label)) {
+			if (dirty[0] & /*_options*/ 8192 && option_aria_label_value !== (option_aria_label_value = /*option*/ ctx[49].label)) {
 				attr(option, "aria-label", option_aria_label_value);
 			}
 		},
@@ -6907,161 +6904,58 @@ function instance$C($$self, $$props, $$invalidate) {
 		}
 	}
 
-	function MenuVisibleKeyDownHandler() {
-		const handle = e => {
-			switch (e.key) {
-				case " ":
-					onSpace(e);
-					break;
-				case "Enter":
-					onEnter(e);
-					break;
-				case "Escape":
-					onEscape(e);
-					break;
-				case "ArrowUp":
-					onArrowUp(e);
+	const onInputKeyDown = e => {
+		switch (e.key) {
+			case " ":
+			case "Enter":
+				_isMenuVisible ? closeMenu() : showMenu();
+				_menuEl.focus();
+				e.preventDefault();
+				break;
+			case "Escape":
+				_isMenuVisible && closeMenu();
+				e.preventDefault();
+				e.stopPropagation();
+				break;
+			case "ArrowDown":
+				if (e.altKey) {
+					_isMenuVisible ? closeMenu() : showMenu(); // set menu focus to allow arrow keys to trigger scrolling within option list
 					break;
-				case "ArrowDown":
-					onArrowDown(e);
+				}
+				_handleArrowDown();
+				break;
+			case "ArrowUp":
+				if (e.altKey) {
+					_isMenuVisible ? closeMenu() : showMenu();
 					break;
-			}
-		};
-
-		const onSpace = e => {
-			e.preventDefault();
-		};
-
-		const onEnter = e => {
-			onSelect(_options[_highlightedIndex].value, _options[_highlightedIndex].label, false);
-			closeMenu();
-			e.preventDefault();
-			e.stopPropagation();
-		};
-
-		const onEscape = e => {
-			closeMenu();
-			e.preventDefault();
-			e.stopPropagation();
-		};
-
-		const onArrowUp = e => {
-			if (e.altKey) {
-				closeMenu();
-			}
-
-			if (_highlightedIndex > 0) {
-				$$invalidate(19, _highlightedIndex--, _highlightedIndex);
-			}
-
-			onSelect(_options[_highlightedIndex].value, _options[_highlightedIndex].label, false);
-		}; // e.stopPropagation();
-		// e.preventDefault();
-
-		const onArrowDown = e => {
-			if (e.altKey) {
-				closeMenu();
-			}
-
-			if (_highlightedIndex < _options.length - 1) {
-				$$invalidate(19, _highlightedIndex++, _highlightedIndex);
-			}
+				}
+				_handleArrowUp();
+				break;
+		}
+	};
 
+	function _handleArrowDown() {
+		if (_highlightedIndex < _options.length - 1) {
+			$$invalidate(19, _highlightedIndex++, _highlightedIndex);
 			onSelect(_options[_highlightedIndex].value, _options[_highlightedIndex].label, false);
-			console.log("on arrow down");
-		}; // e.stopPropagation();
-		// e.preventDefault();
-
-		return { handle };
-	}
-
-	function MenuHiddenKeyDownHandler() {
-		const handle = e => {
-			switch (e.key) {
-				case " ":
-					onSpace(e);
-					break;
-				case "Enter":
-					onEnter(e);
-					break;
-				case "Escape":
-					break;
-				case "ArrowUp":
-					onArrowUp(e);
-					break;
-				case "ArrowDown":
-					onArrowDown(e);
-					break;
-			}
-		};
-
-		const onSpace = e => {
-			showMenu();
-			_menuEl.focus(); // set menu focus to allow arrow keys to trigger scrolling within option list
-			e.preventDefault();
-		};
-
-		const onEnter = e => {
-			showMenu();
-			_menuEl.focus(); // set menu focus to allow arrow keys to trigger scrolling within option list
-			e.preventDefault();
-		};
-
-		const onArrowUp = e => {
-			if (e.altKey) {
-				showMenu();
-			}
-
-			if (_highlightedIndex > 0) {
-				$$invalidate(19, _highlightedIndex--, _highlightedIndex);
-			}
-
-			onSelect(_options[_highlightedIndex].value, _options[_highlightedIndex].label);
-			e.stopPropagation();
-			e.preventDefault();
-		};
-
-		// FIXME: here 
-		const onArrowDown = e => {
-			if (e.altKey) {
-				showMenu();
-			}
-
-			if (_highlightedIndex < _options.length - 1) {
-				$$invalidate(19, _highlightedIndex++, _highlightedIndex);
-			}
-
-			onSelect(_options[_highlightedIndex].value, _options[_highlightedIndex].label);
-			e.stopPropagation();
-			e.preventDefault();
-		};
-
-		return { handle };
+		}
 	}
 
-	const menuVisibleHandler = MenuVisibleKeyDownHandler();
-	const menuHiddenHandler = MenuHiddenKeyDownHandler();
-
-	const onInputKeyDown = e => {
-		if (_isMenuVisible) {
-			menuVisibleHandler.handle(e);
-		} else {
-			menuHiddenHandler.handle(e);
+	function _handleArrowUp() {
+		if (_highlightedIndex > 0) {
+			$$invalidate(19, _highlightedIndex--, _highlightedIndex);
+			onSelect(_options[_highlightedIndex].value, _options[_highlightedIndex].label, false);
 		}
-	};
+	}
 
 	// add required bindings to component
 	function onFocus() {
-		if (!_native) {
-			_el.addEventListener("keydown", onInputKeyDown);
-		}
+		_el.addEventListener("keydown", onInputKeyDown);
 	}
 
 	// remove all bindings from component
 	function onBlur() {
-		if (!_native) {
-			_el.removeEventListener("keydown", onInputKeyDown);
-		}
+		_el.removeEventListener("keydown", onInputKeyDown);
 	}
 
 	function onHighlight(e) {
@@ -7193,7 +7087,7 @@ class Dropdown extends SvelteElement {
 	constructor(options) {
 		super();
 		const style = document.createElement('style');
-		style.textContent = `:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.dropdown{cursor:pointer;display:inline-block;width:var(--width, 100%)}.dropdown-item{margin:0;padding:0.5rem;cursor:pointer;color:var(--goa-color-greyscale-black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-item--tabbed{background:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover)}.dropdown-item--disabled{opacity:0.5;cursor:default}.dropdown-item--disabled:hover{cursor:default;color:var(--goa-color-greyscale-700)}.dropdown-item--selected{background:var(--goa-color-interactive-default);color:var(--goa-color-greyscale-white)}.dropdown-item--tabbed.dropdown-item--selected,.dropdown-item--selected:hover{background:var(--goa-color-interactive-hover);color:var(--goa-color-greyscale-white)}.dropdown-native{position:relative;border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);background-color:var(--goa-color-greyscale-white);transition:box-shadow 0.1s ease-in}.dropdown-native:has(select:disabled){background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);box-shadow:none;color:var(--goa-color-text-secondary);cursor:default}.dropdown-native:has(select.error){border:2px solid var(--goa-color-interactive-error)}.dropdown-native:hover{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}select{border:none;font:var(--goa-font-family-sans);background-color:transparent;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);appearance:none;padding:calc(var(--goa-space-xs) + 1px);padding-left:var(--goa-space-s);padding-right:3rem;outline:none;width:100%}.dropdown-native::after{content:"";position:absolute;right:0.6rem;top:0.6rem;pointer-events:none;width:1.5rem;height:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144' /%3E%3C/svg%3E");background-repeat:none}.dropdown-native:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}`;
+		style.textContent = `:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.dropdown{cursor:pointer;display:inline-block;width:var(--width, 100%)}.dropdown-item{margin:0;padding:0.5rem;cursor:pointer;color:var(--goa-color-greyscale-black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-item--tabbed{background:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover)}.dropdown-item--disabled{opacity:0.5;cursor:default}.dropdown-item--disabled:hover{cursor:default;color:var(--goa-color-greyscale-700)}.dropdown-item--selected{background:var(--goa-color-interactive-default);color:var(--goa-color-greyscale-white)}.dropdown-item--tabbed.dropdown-item--selected,.dropdown-item--selected:hover{background:var(--goa-color-interactive-hover);color:var(--goa-color-greyscale-white)}.dropdown-native{border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);background-color:var(--goa-color-greyscale-white);transition:box-shadow 0.1s ease-in}.dropdown-native:has(select:disabled){background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);box-shadow:none;color:var(--goa-color-text-secondary);cursor:default}.dropdown-native:has(select.error){border:2px solid var(--goa-color-interactive-error)}.dropdown-native:hover{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}select{border:none;background-color:transparent;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);appearance:none;padding:calc(var(--goa-space-xs) + 2px);padding-left:0.5rem;padding-right:3rem;outline:none;width:100%}.dropdown-native::after{content:"";position:absolute;right:0.6rem;top:0.6rem;pointer-events:none;width:1.5rem;height:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144' /%3E%3C/svg%3E");background-repeat:none}.dropdown-native:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}`;
 		this.shadowRoot.appendChild(style);
 
 		init(