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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/web-components",
-  "version": "1.13.0",
+  "version": "1.13.1-alpha.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[49] = list[i];
-	child_ctx[53] = i;
+	child_ctx[51] = list[i];
+	child_ctx[55] = i;
 	return child_ctx;
 }
 
 function get_each_context$7(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[49] = list[i];
+	child_ctx[51] = list[i];
 	return child_ctx;
 }
 
-// (257:2) {:else}
+// (343: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[53];
+	const get_key = ctx => /*index*/ ctx[55];
 
 	for (let i = 0; i < each_value_1.length; i += 1) {
 		let child_ctx = get_each_context_1(ctx, each_value_1, i);
@@ -6278,34 +6278,35 @@ function create_else_block$a(ctx) {
 			}
 
 			set_custom_element_data(goa_input, "slot", "target");
-			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, "error", /*error*/ ctx[7]);
 			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, "name", /*name*/ ctx[0]);
+			set_custom_element_data(goa_input, "readonly", "");
 			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]);
@@ -6332,18 +6333,22 @@ function create_else_block$a(ctx) {
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*error*/ 128) {
-				set_custom_element_data(goa_input, "error", /*error*/ ctx[7]);
-			}
-
 			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] & /*name*/ 1) {
+				set_custom_element_data(goa_input, "name", /*name*/ ctx[0]);
+			}
+
 			if (dirty[0] & /*placeholder*/ 16) {
 				set_custom_element_data(goa_input, "placeholder", /*placeholder*/ ctx[4]);
 			}
@@ -6364,10 +6369,6 @@ 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);
@@ -6378,6 +6379,7 @@ 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]};
         `)) {
@@ -6416,7 +6418,7 @@ function create_else_block$a(ctx) {
 	};
 }
 
-// (238:2) {#if _native}
+// (328:2) {#if _native}
 function create_if_block$m(ctx) {
 	let select;
 	let slot;
@@ -6506,10 +6508,10 @@ function create_if_block$m(ctx) {
 	};
 }
 
-// (296:8) {#each _options as option, index (index)}
+// (389:8) {#each _options as option, index (index)}
 function create_each_block_1(key_1, ctx) {
 	let li;
-	let t0_value = (/*option*/ ctx[49].label || /*option*/ ctx[49].value) + "";
+	let t0_value = (/*option*/ ctx[51].label || /*option*/ ctx[51].value) + "";
 	let t0;
 	let t1;
 	let li_id_value;
@@ -6522,7 +6524,7 @@ function create_each_block_1(key_1, ctx) {
 	let dispose;
 
 	function click_handler() {
-		return /*click_handler*/ ctx[32](/*option*/ ctx[49]);
+		return /*click_handler*/ ctx[32](/*option*/ ctx[51]);
 	}
 
 	return {
@@ -6532,22 +6534,23 @@ 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[49].label);
+			attr(li, "id", li_id_value = /*option*/ ctx[51].label);
 			attr(li, "role", "option");
-			attr(li, "aria-label", li_aria_label_value = /*option*/ ctx[49].label || /*option*/ ctx[49].value);
+			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-selected", li_aria_selected_value = /*_values*/ ctx[16].includes(/*option*/ ctx[49].value)
+			attr(li, "aria-selected", li_aria_selected_value = /*_values*/ ctx[16].includes(/*option*/ ctx[51].value)
 			? "true"
 			: "false");
 
 			attr(li, "class", "dropdown-item");
-			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");
+			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);
 			toggle_class(li, "dropdown-item--disabled", false);
-			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));
+			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));
 			this.first = li;
 		},
 		m(target, anchor) {
@@ -6562,40 +6565,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[49].label || /*option*/ ctx[49].value) + "")) set_data(t0, t0_value);
+			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 && li_id_value !== (li_id_value = /*option*/ ctx[49].label)) {
+			if (dirty[0] & /*_options*/ 8192 && li_id_value !== (li_id_value = /*option*/ ctx[51].label)) {
 				attr(li, "id", li_id_value);
 			}
 
-			if (dirty[0] & /*_options*/ 8192 && li_aria_label_value !== (li_aria_label_value = /*option*/ ctx[49].label || /*option*/ ctx[49].value)) {
+			if (dirty[0] & /*_options*/ 8192 && li_aria_label_value !== (li_aria_label_value = /*option*/ ctx[51].label || /*option*/ ctx[51].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[49].value)
+			if (dirty[0] & /*_values, _options*/ 73728 && li_aria_selected_value !== (li_aria_selected_value = /*_values*/ ctx[16].includes(/*option*/ ctx[51].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[49].value}`)) {
+			if (dirty[0] & /*_options*/ 8192 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${/*option*/ ctx[51].value}`)) {
 				attr(li, "data-testid", li_data_testid_value);
 			}
 
-			if (dirty[0] & /*_options*/ 8192 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[53])) {
+			if (dirty[0] & /*_options*/ 8192 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[55])) {
 				attr(li, "data-index", li_data_index_value);
 			}
 
-			if (dirty[0] & /*_options*/ 8192 && li_data_value_value !== (li_data_value_value = /*option*/ ctx[49].value)) {
+			if (dirty[0] & /*_options*/ 8192 && li_data_value_value !== (li_data_value_value = /*option*/ ctx[51].value)) {
 				attr(li, "data-value", li_data_value_value);
 			}
 
 			if (dirty[0] & /*_options, _highlightedIndex*/ 532480) {
-				toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[53] === /*_highlightedIndex*/ ctx[19]);
+				toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[55] === /*_highlightedIndex*/ ctx[19]);
 			}
 
 			if (dirty[0] & /*_values, _options*/ 73728) {
-				toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[16].includes(/*option*/ ctx[49].value));
+				toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[16].includes(/*option*/ ctx[51].value));
 			}
 		},
 		d(detaching) {
@@ -6606,10 +6609,10 @@ function create_each_block_1(key_1, ctx) {
 	};
 }
 
-// (247:6) {#each _options as option}
+// (337:6) {#each _options as option}
 function create_each_block$7(ctx) {
 	let option;
-	let t0_value = /*option*/ ctx[49].label + "";
+	let t0_value = /*option*/ ctx[51].label + "";
 	let t0;
 	let t1;
 	let option_selected_value;
@@ -6621,10 +6624,10 @@ function create_each_block$7(ctx) {
 			option = element("option");
 			t0 = text(t0_value);
 			t1 = space();
-			option.selected = option_selected_value = /*option*/ ctx[49].selected;
-			option.__value = option_value_value = /*option*/ ctx[49].value;
+			option.selected = option_selected_value = /*option*/ ctx[51].selected;
+			option.__value = option_value_value = /*option*/ ctx[51].value;
 			option.value = option.__value;
-			attr(option, "aria-label", option_aria_label_value = /*option*/ ctx[49].label);
+			attr(option, "aria-label", option_aria_label_value = /*option*/ ctx[51].label);
 		},
 		m(target, anchor) {
 			insert(target, option, anchor);
@@ -6632,18 +6635,18 @@ function create_each_block$7(ctx) {
 			append(option, t1);
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*_options*/ 8192 && t0_value !== (t0_value = /*option*/ ctx[49].label + "")) set_data(t0, t0_value);
+			if (dirty[0] & /*_options*/ 8192 && t0_value !== (t0_value = /*option*/ ctx[51].label + "")) set_data(t0, t0_value);
 
-			if (dirty[0] & /*_options*/ 8192 && option_selected_value !== (option_selected_value = /*option*/ ctx[49].selected)) {
+			if (dirty[0] & /*_options*/ 8192 && option_selected_value !== (option_selected_value = /*option*/ ctx[51].selected)) {
 				option.selected = option_selected_value;
 			}
 
-			if (dirty[0] & /*_options*/ 8192 && option_value_value !== (option_value_value = /*option*/ ctx[49].value)) {
+			if (dirty[0] & /*_options*/ 8192 && option_value_value !== (option_value_value = /*option*/ ctx[51].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[49].label)) {
+			if (dirty[0] & /*_options*/ 8192 && option_aria_label_value !== (option_aria_label_value = /*option*/ ctx[51].label)) {
 				attr(option, "aria-label", option_aria_label_value);
 			}
 		},
@@ -6904,58 +6907,161 @@ function instance$C($$self, $$props, $$invalidate) {
 		}
 	}
 
-	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
+	function MenuVisibleKeyDownHandler() {
+		const handle = e => {
+			switch (e.key) {
+				case " ":
+					onSpace(e);
 					break;
-				}
-				_handleArrowDown();
-				break;
-			case "ArrowUp":
-				if (e.altKey) {
-					_isMenuVisible ? closeMenu() : showMenu();
+				case "Enter":
+					onEnter(e);
 					break;
-				}
-				_handleArrowUp();
-				break;
-		}
-	};
+				case "Escape":
+					onEscape(e);
+					break;
+				case "ArrowUp":
+					onArrowUp(e);
+					break;
+				case "ArrowDown":
+					onArrowDown(e);
+					break;
+			}
+		};
+
+		const onSpace = e => {
+			e.preventDefault();
+		};
 
-	function _handleArrowDown() {
-		if (_highlightedIndex < _options.length - 1) {
-			$$invalidate(19, _highlightedIndex++, _highlightedIndex);
+		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);
+			}
 
-	function _handleArrowUp() {
-		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);
+			}
+
+			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);
+		}
+	};
+
 	// add required bindings to component
 	function onFocus() {
-		_el.addEventListener("keydown", onInputKeyDown);
+		if (!_native) {
+			_el.addEventListener("keydown", onInputKeyDown);
+		}
 	}
 
 	// remove all bindings from component
 	function onBlur() {
-		_el.removeEventListener("keydown", onInputKeyDown);
+		if (!_native) {
+			_el.removeEventListener("keydown", onInputKeyDown);
+		}
 	}
 
 	function onHighlight(e) {
@@ -7087,7 +7193,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{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)}`;
+		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)}`;
 		this.shadowRoot.appendChild(style);
 
 		init(
@@ -10423,7 +10529,7 @@ class Input extends SvelteElement {
 		super();
 		const style = document.createElement('style');
 
-		style.textContent = `:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box;line-height:normal}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%;background-color:var(--goa-color-greyscale-white)}.goa-input:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}.goa-input:active:not(.goa-input-leading-content):not(.goa-input-trailing-content),.goa-input:focus:not(.goa-input-leading-content):not(.goa-input-trailing-content),.goa-input:focus-within:not(.goa-input-leading-content):not(.goa-input-trailing-content){box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.75rem}.goa-input-trailing-icon{margin-right:var(--goa-space-s)}.goa-input-trailing-icon-button{margin-right:var(--goa-space-xs)}input{display:inline-block;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding:var(--goa-space-s);line-height:calc(40px - calc(var(--goa-space-xs) * 2));background-color:transparent;width:100%;flex:1 1 auto;font-family:var(--goa-font-family-sans);z-index:1}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200) !important;cursor:default;box-shadow:none !important}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--goa-color-greyscale-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m);border-right:1px solid var(--goa-color-greyscale-700)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);border-left:1px solid var(--goa-color-greyscale-700)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--goa-color-greyscale-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--goa-color-greyscale-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:not(.goa-input-leading-content):not(.goa-input-trailing-content),.error:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 1px var(--goa-color-interactive-error)}.error:focus-within:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.error .input-leading-content,.error .input-leading-content:hover,.error .input-trailing-content,.error .input-trailing-content:hover{outline:var(--goa-border-width-s) solid var(--goa-color-interactive-error);box-shadow:inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-error)}.error .input-leading-content:focus,.error .input-trailing-content:focus,.error .input-leading-content:active,.error .input-trailing-content:active{outline:var(--goa-border-width-s) solid var(--goa-color-interactive-error);box-shadow:0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus)}.input-leading-content:hover,.input-trailing-content:hover{box-shadow:inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover);outline:var(--goa-border-width-s) solid var(--goa-color-interactive-hover)}.input-leading-content:active,.input-leading-content:focus,.input-leading-content:focus-within,.input-trailing-content:active,.input-trailing-content:focus,.input-trailing-content:focus-within{box-shadow:0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus);outline:var(--goa-border-width-s) solid var(--goa-color-greyscale-700)}.error .input-trailing-content,.input-trailing-content:hover,.input-trailing-content:active,.input-trailing-content:focus,.input-trailing-content:focus-within{border-top-left-radius:var(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m)}.error .input-leading-content,.input-leading-content:hover,.input-leading-content:active,.input-leading-content:focus,.input-leading-content:focus-within{border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m)}.input-leading-content.input-trailing-content,.input-leading-content.input-trailing-content:hover,.input-leading-content.input-trailing-content:active,.input-leading-content.input-trailing-content:focus,.input-leading-content.input-trailing-content:focus-within{border-radius:0}input[type="search"]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
+		style.textContent = `:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box;line-height:normal}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%;background-color:var(--goa-color-greyscale-white)}.goa-input:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}.goa-input:active:not(.goa-input-leading-content):not(.goa-input-trailing-content),.goa-input:focus:not(.goa-input-leading-content):not(.goa-input-trailing-content),.goa-input:focus-within:not(.goa-input-leading-content):not(.goa-input-trailing-content){box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.75rem}.goa-input-trailing-icon{margin-right:var(--goa-space-s)}.goa-input-trailing-icon-button{margin-right:var(--goa-space-xs)}input{display:inline-block;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding:var(--goa-space-xs) var(--goa-space-s);line-height:calc(40px - calc(var(--goa-space-xs) * 2));background-color:transparent;width:100%;flex:1 1 auto;font-family:var(--goa-font-family-sans);z-index:1}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200) !important;cursor:default;box-shadow:none !important}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--goa-color-greyscale-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m);border-right:1px solid var(--goa-color-greyscale-700)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);border-left:1px solid var(--goa-color-greyscale-700)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--goa-color-greyscale-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--goa-color-greyscale-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:not(.goa-input-leading-content):not(.goa-input-trailing-content),.error:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 1px var(--goa-color-interactive-error)}.error:focus-within:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.error .input-leading-content,.error .input-leading-content:hover,.error .input-trailing-content,.error .input-trailing-content:hover{outline:var(--goa-border-width-s) solid var(--goa-color-interactive-error);box-shadow:inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-error)}.error .input-leading-content:focus,.error .input-trailing-content:focus,.error .input-leading-content:active,.error .input-trailing-content:active{outline:var(--goa-border-width-s) solid var(--goa-color-interactive-error);box-shadow:0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus)}.input-leading-content:hover,.input-trailing-content:hover{box-shadow:inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover);outline:var(--goa-border-width-s) solid var(--goa-color-interactive-hover)}.input-leading-content:active,.input-leading-content:focus,.input-leading-content:focus-within,.input-trailing-content:active,.input-trailing-content:focus,.input-trailing-content:focus-within{box-shadow:0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus);outline:var(--goa-border-width-s) solid var(--goa-color-greyscale-700)}.error .input-trailing-content,.input-trailing-content:hover,.input-trailing-content:active,.input-trailing-content:focus,.input-trailing-content:focus-within{border-top-left-radius:var(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m)}.error .input-leading-content,.input-leading-content:hover,.input-leading-content:active,.input-leading-content:focus,.input-leading-content:focus-within{border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m)}.input-leading-content.input-trailing-content,.input-leading-content.input-trailing-content:hover,.input-leading-content.input-trailing-content:active,.input-leading-content.input-trailing-content:focus,.input-leading-content.input-trailing-content:focus-within{border-radius:0}input[type="search"]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
       center center no-repeat}`;
 
 		this.shadowRoot.appendChild(style);