@abgov/web-components 1.0.0-alpha.73 → 1.0.0-alpha.74

package/package.json

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

package/web-components.es.js

@@ -4393,12 +4393,12 @@ const BIND$1 = "bind";
 
 function get_each_context$1(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[34] = list[i];
-	child_ctx[36] = i;
+	child_ctx[35] = list[i];
+	child_ctx[37] = i;
 	return child_ctx;
 }
 
-// (172:2) {#if isMenuVisible}
+// (175:2) {#if isMenuVisible}
 function create_if_block$b(ctx) {
 	let div;
 	let div_data_testid_value;
@@ -4432,10 +4432,10 @@ function create_if_block$b(ctx) {
 	};
 }
 
-// (208:4) {#each options as option, index (option.value)}
+// (211:4) {#each options as option, index (option.value)}
 function create_each_block$1(key_1, ctx) {
 	let li;
-	let t0_value = /*option*/ ctx[34].label + "";
+	let t0_value = /*option*/ ctx[35].label + "";
 	let t0;
 	let t1;
 	let li_data_testid_value;
@@ -4445,7 +4445,7 @@ function create_each_block$1(key_1, ctx) {
 	let dispose;
 
 	function click_handler() {
-		return /*click_handler*/ ctx[22](/*option*/ ctx[34]);
+		return /*click_handler*/ ctx[21](/*option*/ ctx[35]);
 	}
 
 	return {
@@ -4455,13 +4455,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[34].value}-dropdown-item`);
-			attr(li, "data-index", li_data_index_value = /*index*/ ctx[36]);
+			attr(li, "data-testid", li_data_testid_value = `${/*option*/ ctx[35].value}-dropdown-item`);
+			attr(li, "data-index", li_data_index_value = /*index*/ ctx[37]);
 			attr(li, "class", "goa-dropdown-option");
 			attr(li, "style", li_style_value = `display: ${"block"}`);
 			toggle_class(li, "goa-dropdown-option--disabled", false);
-			toggle_class(li, "goa-dropdown-option--tabbed", /*index*/ ctx[36] === /*highlightedIndex*/ ctx[11]);
-			toggle_class(li, "goa-dropdown-option--selected", /*_values*/ ctx[7].includes(/*option*/ ctx[34].value));
+			toggle_class(li, "goa-dropdown-option--tabbed", /*index*/ ctx[37] === /*highlightedIndex*/ ctx[12]);
+			toggle_class(li, "goa-dropdown-option--selected", /*_values*/ ctx[8].includes(/*option*/ ctx[35].value));
 			this.first = li;
 		},
 		m(target, anchor) {
@@ -4476,22 +4476,22 @@ function create_each_block$1(key_1, ctx) {
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
-			if (dirty[0] & /*options*/ 256 && t0_value !== (t0_value = /*option*/ ctx[34].label + "")) set_data(t0, t0_value);
+			if (dirty[0] & /*options*/ 512 && t0_value !== (t0_value = /*option*/ ctx[35].label + "")) set_data(t0, t0_value);
 
-			if (dirty[0] & /*options*/ 256 && li_data_testid_value !== (li_data_testid_value = `${/*option*/ ctx[34].value}-dropdown-item`)) {
+			if (dirty[0] & /*options*/ 512 && li_data_testid_value !== (li_data_testid_value = `${/*option*/ ctx[35].value}-dropdown-item`)) {
 				attr(li, "data-testid", li_data_testid_value);
 			}
 
-			if (dirty[0] & /*options*/ 256 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[36])) {
+			if (dirty[0] & /*options*/ 512 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[37])) {
 				attr(li, "data-index", li_data_index_value);
 			}
 
-			if (dirty[0] & /*options, highlightedIndex*/ 2304) {
-				toggle_class(li, "goa-dropdown-option--tabbed", /*index*/ ctx[36] === /*highlightedIndex*/ ctx[11]);
+			if (dirty[0] & /*options, highlightedIndex*/ 4608) {
+				toggle_class(li, "goa-dropdown-option--tabbed", /*index*/ ctx[37] === /*highlightedIndex*/ ctx[12]);
 			}
 
-			if (dirty[0] & /*_values, options*/ 384) {
-				toggle_class(li, "goa-dropdown-option--selected", /*_values*/ ctx[7].includes(/*option*/ ctx[34].value));
+			if (dirty[0] & /*_values, options*/ 768) {
+				toggle_class(li, "goa-dropdown-option--selected", /*_values*/ ctx[8].includes(/*option*/ ctx[35].value));
 			}
 		},
 		d(detaching) {
@@ -4507,7 +4507,6 @@ function create_fragment$l(ctx) {
 	let t0;
 	let div0;
 	let goa_input;
-	let goa_input_width_value;
 	let goa_input_id_value;
 	let div0_data_testid_value;
 	let t1;
@@ -4517,11 +4516,12 @@ function create_fragment$l(ctx) {
 	let each_blocks = [];
 	let each_1_lookup = new Map();
 	let ul_style_value;
+	let div1_style_value;
 	let mounted;
 	let dispose;
-	let if_block = /*isMenuVisible*/ ctx[10] && create_if_block$b(ctx);
-	let each_value = /*options*/ ctx[8];
-	const get_key = ctx => /*option*/ ctx[34].value;
+	let if_block = /*isMenuVisible*/ ctx[11] && create_if_block$b(ctx);
+	let each_value = /*options*/ ctx[9];
+	const get_key = ctx => /*option*/ ctx[35].value;
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context$1(ctx, each_value, i);
@@ -4546,25 +4546,26 @@ function create_fragment$l(ctx) {
 			}
 
 			this.c = noop;
-			set_custom_element_data(goa_input, "error", /*isError*/ ctx[15]);
-			set_custom_element_data(goa_input, "disabled", /*disabled*/ ctx[4]);
+			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[1]);
 			set_custom_element_data(goa_input, "placeholder", /*placeholder*/ ctx[3]);
-			set_custom_element_data(goa_input, "width", goa_input_width_value = /*width*/ ctx[6] || /*computedWidth*/ ctx[12]);
+			set_custom_element_data(goa_input, "width", "100%");
 			set_custom_element_data(goa_input, "id", goa_input_id_value = `${/*name*/ ctx[0]}-dropdown-input`);
 			set_custom_element_data(goa_input, "name", "search");
 			set_custom_element_data(goa_input, "readonly", "");
 			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[9]);
+			set_custom_element_data(goa_input, "value", /*selectedLabel*/ ctx[10]);
 			attr(div0, "data-testid", div0_data_testid_value = `${/*name*/ ctx[0]}-dropdown`);
 			attr(ul, "data-testid", "dropdown-menu");
 			attr(ul, "tabindex", "0");
 			attr(ul, "class", "goa-dropdown-list");
 			attr(ul, "style", ul_style_value = `overflow-y: auto; max-height: ${/*maxheight*/ ctx[2]}`);
-			toggle_class(ul, "dropdown-active", /*isMenuVisible*/ ctx[10]);
-			attr(div1, "data-testid", /*testid*/ ctx[5]);
+			toggle_class(ul, "dropdown-active", /*isMenuVisible*/ ctx[11]);
+			attr(div1, "data-testid", /*testid*/ ctx[4]);
 			attr(div1, "class", "goa-dropdown-box");
+			attr(div1, "style", div1_style_value = `--width: ${/*width*/ ctx[5] || /*computedWidth*/ ctx[13]}`);
 		},
 		m(target, anchor) {
 			insert(target, div1, anchor);
@@ -4581,8 +4582,8 @@ function create_fragment$l(ctx) {
 				each_blocks[i].m(ul, null);
 			}
 
-			/*ul_binding*/ ctx[23](ul);
-			/*div1_binding*/ ctx[24](div1);
+			/*ul_binding*/ ctx[22](ul);
+			/*div1_binding*/ ctx[23](div1);
 
 			if (!mounted) {
 				dispose = listen(goa_input, "click", /*showMenu*/ ctx[16]);
@@ -4590,7 +4591,7 @@ function create_fragment$l(ctx) {
 			}
 		},
 		p(ctx, dirty) {
-			if (/*isMenuVisible*/ ctx[10]) {
+			if (/*isMenuVisible*/ ctx[11]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
@@ -4603,12 +4604,12 @@ function create_fragment$l(ctx) {
 				if_block = null;
 			}
 
-			if (dirty[0] & /*isError*/ 32768) {
-				set_custom_element_data(goa_input, "error", /*isError*/ ctx[15]);
+			if (dirty[0] & /*error*/ 128) {
+				set_custom_element_data(goa_input, "error", /*error*/ ctx[7]);
 			}
 
-			if (dirty[0] & /*disabled*/ 16) {
-				set_custom_element_data(goa_input, "disabled", /*disabled*/ ctx[4]);
+			if (dirty[0] & /*disabled*/ 64) {
+				set_custom_element_data(goa_input, "disabled", /*disabled*/ ctx[6]);
 			}
 
 			if (dirty[0] & /*leadingicon*/ 2) {
@@ -4619,24 +4620,20 @@ function create_fragment$l(ctx) {
 				set_custom_element_data(goa_input, "placeholder", /*placeholder*/ ctx[3]);
 			}
 
-			if (dirty[0] & /*width, computedWidth*/ 4160 && goa_input_width_value !== (goa_input_width_value = /*width*/ ctx[6] || /*computedWidth*/ ctx[12])) {
-				set_custom_element_data(goa_input, "width", goa_input_width_value);
-			}
-
 			if (dirty[0] & /*name*/ 1 && goa_input_id_value !== (goa_input_id_value = `${/*name*/ ctx[0]}-dropdown-input`)) {
 				set_custom_element_data(goa_input, "id", goa_input_id_value);
 			}
 
-			if (dirty[0] & /*selectedLabel*/ 512) {
-				set_custom_element_data(goa_input, "value", /*selectedLabel*/ ctx[9]);
+			if (dirty[0] & /*selectedLabel*/ 1024) {
+				set_custom_element_data(goa_input, "value", /*selectedLabel*/ ctx[10]);
 			}
 
 			if (dirty[0] & /*name*/ 1 && div0_data_testid_value !== (div0_data_testid_value = `${/*name*/ ctx[0]}-dropdown`)) {
 				attr(div0, "data-testid", div0_data_testid_value);
 			}
 
-			if (dirty[0] & /*options, highlightedIndex, _values, onSelect*/ 264576) {
-				each_value = /*options*/ ctx[8];
+			if (dirty[0] & /*options, highlightedIndex, _values, onSelect*/ 267008) {
+				each_value = /*options*/ ctx[9];
 				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);
 			}
 
@@ -4644,12 +4641,16 @@ function create_fragment$l(ctx) {
 				attr(ul, "style", ul_style_value);
 			}
 
-			if (dirty[0] & /*isMenuVisible*/ 1024) {
-				toggle_class(ul, "dropdown-active", /*isMenuVisible*/ ctx[10]);
+			if (dirty[0] & /*isMenuVisible*/ 2048) {
+				toggle_class(ul, "dropdown-active", /*isMenuVisible*/ ctx[11]);
+			}
+
+			if (dirty[0] & /*testid*/ 16) {
+				attr(div1, "data-testid", /*testid*/ ctx[4]);
 			}
 
-			if (dirty[0] & /*testid*/ 32) {
-				attr(div1, "data-testid", /*testid*/ ctx[5]);
+			if (dirty[0] & /*width, computedWidth*/ 8224 && div1_style_value !== (div1_style_value = `--width: ${/*width*/ ctx[5] || /*computedWidth*/ ctx[13]}`)) {
+				attr(div1, "style", div1_style_value);
 			}
 		},
 		i: noop,
@@ -4662,8 +4663,8 @@ function create_fragment$l(ctx) {
 				each_blocks[i].d();
 			}
 
-			/*ul_binding*/ ctx[23](null);
-			/*div1_binding*/ ctx[24](null);
+			/*ul_binding*/ ctx[22](null);
+			/*div1_binding*/ ctx[23](null);
 			mounted = false;
 			dispose();
 		}
@@ -4673,17 +4674,18 @@ function create_fragment$l(ctx) {
 const MAX_HEIGHT = "300px";
 
 function instance$k($$self, $$props, $$invalidate) {
-	let isError;
+	let _disabled;
+	let _multiselect;
 	let { name } = $$props;
 	let { value = "" } = $$props;
 	let { leadingicon = null } = $$props;
 	let { maxheight = MAX_HEIGHT } = $$props;
 	let { placeholder = "" } = $$props;
-	let { disabled = false } = $$props;
-	let { error = false } = $$props;
 	let { testid = "" } = $$props;
 	let { width = "" } = $$props;
-	let { multiselect = false } = $$props;
+	let { disabled = "false" } = $$props;
+	let { error = "false" } = $$props;
+	let { multiselect = "false" } = $$props;
 
 	// Private
 	let _values = [];
@@ -4715,7 +4717,7 @@ function instance$k($$self, $$props, $$invalidate) {
 		const rawValues = typeof rawValue === "object" ? rawValue : [rawValue];
 
 		// convert all values to strings to avoid later type comparison issues
-		$$invalidate(7, _values = rawValues.map(val => `${val}`));
+		$$invalidate(8, _values = rawValues.map(val => `${val}`));
 
 		bindContext();
 	});
@@ -4736,15 +4738,15 @@ function instance$k($$self, $$props, $$invalidate) {
 					{
 						const _data = data;
 						const selected = _values.includes(_data.value);
-						$$invalidate(8, options = [...options, Object.assign(Object.assign({}, _data), { selected })]);
+						$$invalidate(9, options = [...options, Object.assign(Object.assign({}, _data), { selected })]);
 
 						if (selected) {
-							$$invalidate(9, selectedLabel = _data.label);
+							$$invalidate(10, selectedLabel = _data.label);
 						}
 
 						if (!width && maxLetterCount < _data.label.length) {
 							maxLetterCount = _data.label.length;
-							$$invalidate(12, computedWidth = `${Math.max(20, maxLetterCount + 12)}ch`);
+							$$invalidate(13, computedWidth = `${Math.max(20, maxLetterCount + 12)}ch`);
 						}
 
 						setHighlightedIndexToSelected();
@@ -4755,11 +4757,11 @@ function instance$k($$self, $$props, $$invalidate) {
 	}
 
 	async function showMenu() {
-		if (disabled || isMenuVisible) {
+		if (_disabled || isMenuVisible) {
 			return;
 		}
 
-		$$invalidate(10, isMenuVisible = true);
+		$$invalidate(11, isMenuVisible = true);
 		await tick();
 
 		// hide menu on blur
@@ -4778,19 +4780,19 @@ function instance$k($$self, $$props, $$invalidate) {
 		menuEl.removeEventListener("keydown", onMenuKeyDown);
 		menuEl.removeEventListener("mouseover", onHighlight);
 		setHighlightedIndexToSelected();
-		$$invalidate(10, isMenuVisible = false);
+		$$invalidate(11, isMenuVisible = false);
 	}
 
 	function setHighlightedIndexToSelected() {
-		$$invalidate(11, highlightedIndex = options.findIndex(option => _values.includes(option.value)));
+		$$invalidate(12, highlightedIndex = options.findIndex(option => _values.includes(option.value)));
 	}
 
 	// Event handlers
 	function onSelect(val, label) {
-		if (disabled) return;
-		$$invalidate(9, selectedLabel = label);
+		if (_disabled) return;
+		$$invalidate(10, selectedLabel = label);
 
-		if (multiselect) {
+		if (_multiselect) {
 			_values.push(val);
 
 			el.dispatchEvent(new CustomEvent("_change",
@@ -4799,7 +4801,7 @@ function instance$k($$self, $$props, $$invalidate) {
 					detail: { name, values: _values }
 				}));
 		} else {
-			$$invalidate(7, _values = [val]);
+			$$invalidate(8, _values = [val]);
 
 			el.dispatchEvent(new CustomEvent("_change",
 			{
@@ -4834,14 +4836,14 @@ function instance$k($$self, $$props, $$invalidate) {
 		switch (e.key) {
 			case "ArrowUp":
 				if (highlightedIndex === 0) {
-					$$invalidate(11, highlightedIndex = options.length - 1);
+					$$invalidate(12, highlightedIndex = options.length - 1);
 				} else {
-					$$invalidate(11, highlightedIndex--, highlightedIndex);
+					$$invalidate(12, highlightedIndex--, highlightedIndex);
 				}
 				e.preventDefault();
 				break;
 			case "ArrowDown":
-				$$invalidate(11, highlightedIndex = (highlightedIndex + 1) % options.length);
+				$$invalidate(12, highlightedIndex = (highlightedIndex + 1) % options.length);
 				e.preventDefault();
 				break;
 			case "Tab":
@@ -4857,7 +4859,7 @@ function instance$k($$self, $$props, $$invalidate) {
 	}
 
 	function onHighlight(e) {
-		$$invalidate(11, highlightedIndex = Number(e.target.dataset.index));
+		$$invalidate(12, highlightedIndex = Number(e.target.dataset.index));
 	}
 
 	const click_handler = option => onSelect(option.value, option.label);
@@ -4865,14 +4867,14 @@ function instance$k($$self, $$props, $$invalidate) {
 	function ul_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			menuEl = $$value;
-			$$invalidate(14, menuEl);
+			$$invalidate(15, menuEl);
 		});
 	}
 
 	function div1_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			el = $$value;
-			$$invalidate(13, el);
+			$$invalidate(14, el);
 		});
 	}
 
@@ -4882,17 +4884,20 @@ function instance$k($$self, $$props, $$invalidate) {
 		if ('leadingicon' in $$props) $$invalidate(1, leadingicon = $$props.leadingicon);
 		if ('maxheight' in $$props) $$invalidate(2, maxheight = $$props.maxheight);
 		if ('placeholder' in $$props) $$invalidate(3, placeholder = $$props.placeholder);
-		if ('disabled' in $$props) $$invalidate(4, disabled = $$props.disabled);
-		if ('error' in $$props) $$invalidate(20, error = $$props.error);
-		if ('testid' in $$props) $$invalidate(5, testid = $$props.testid);
-		if ('width' in $$props) $$invalidate(6, width = $$props.width);
-		if ('multiselect' in $$props) $$invalidate(21, multiselect = $$props.multiselect);
+		if ('testid' in $$props) $$invalidate(4, testid = $$props.testid);
+		if ('width' in $$props) $$invalidate(5, width = $$props.width);
+		if ('disabled' in $$props) $$invalidate(6, disabled = $$props.disabled);
+		if ('error' in $$props) $$invalidate(7, error = $$props.error);
+		if ('multiselect' in $$props) $$invalidate(20, multiselect = $$props.multiselect);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*error*/ 1048576) {
-			// TODO: remove this once goa-input has the toBoolean method removed
-			$$invalidate(15, isError = error ? "true" : "false");
+		if ($$self.$$.dirty[0] & /*disabled*/ 64) {
+			_disabled = toBoolean(disabled);
+		}
+
+		if ($$self.$$.dirty[0] & /*multiselect*/ 1048576) {
+			_multiselect = toBoolean(multiselect);
 		}
 	};
 
@@ -4901,9 +4906,10 @@ function instance$k($$self, $$props, $$invalidate) {
 		leadingicon,
 		maxheight,
 		placeholder,
-		disabled,
 		testid,
 		width,
+		disabled,
+		error,
 		_values,
 		options,
 		selectedLabel,
@@ -4912,12 +4918,10 @@ function instance$k($$self, $$props, $$invalidate) {
 		computedWidth,
 		el,
 		menuEl,
-		isError,
 		showMenu,
 		closeMenu,
 		onSelect,
 		value,
-		error,
 		multiselect,
 		click_handler,
 		ul_binding,
@@ -4928,7 +4932,7 @@ function instance$k($$self, $$props, $$invalidate) {
 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;display:inline-block;width:100%}@media(min-width: 640px){.goa-dropdown-box{width:unset}}.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);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-dropdown-box{position:relative;cursor:pointer;display:inline-block;width:100%}@media(min-width: 640px){.goa-dropdown-box{width:var(--width)}}.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);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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,
@@ -4946,11 +4950,11 @@ class Dropdown extends SvelteElement {
 				leadingicon: 1,
 				maxheight: 2,
 				placeholder: 3,
-				disabled: 4,
-				error: 20,
-				testid: 5,
-				width: 6,
-				multiselect: 21
+				testid: 4,
+				width: 5,
+				disabled: 6,
+				error: 7,
+				multiselect: 20
 			},
 			null,
 			[-1, -1]
@@ -4975,10 +4979,10 @@ class Dropdown extends SvelteElement {
 			"leadingicon",
 			"maxheight",
 			"placeholder",
-			"disabled",
-			"error",
 			"testid",
 			"width",
+			"disabled",
+			"error",
 			"multiselect"
 		];
 	}
@@ -5028,44 +5032,44 @@ class Dropdown extends SvelteElement {
 		flush();
 	}
 
-	get disabled() {
+	get testid() {
 		return this.$$.ctx[4];
 	}
 
-	set disabled(disabled) {
-		this.$$set({ disabled });
+	set testid(testid) {
+		this.$$set({ testid });
 		flush();
 	}
 
-	get error() {
-		return this.$$.ctx[20];
+	get width() {
+		return this.$$.ctx[5];
 	}
 
-	set error(error) {
-		this.$$set({ error });
+	set width(width) {
+		this.$$set({ width });
 		flush();
 	}
 
-	get testid() {
-		return this.$$.ctx[5];
+	get disabled() {
+		return this.$$.ctx[6];
 	}
 
-	set testid(testid) {
-		this.$$set({ testid });
+	set disabled(disabled) {
+		this.$$set({ disabled });
 		flush();
 	}
 
-	get width() {
-		return this.$$.ctx[6];
+	get error() {
+		return this.$$.ctx[7];
 	}
 
-	set width(width) {
-		this.$$set({ width });
+	set error(error) {
+		this.$$set({ error });
 		flush();
 	}
 
 	get multiselect() {
-		return this.$$.ctx[21];
+		return this.$$.ctx[20];
 	}
 
 	set multiselect(multiselect) {
@@ -6803,7 +6807,7 @@ class Input extends SvelteElement {
 	constructor(options) {
 		super();
 
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.container{position:relative;width:100%}@media(min-width: 640px){.container{max-width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);background:white;display:inline-flex;align-items:center;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{display:flex;align-items:center;margin-left:0.5rem}.goa-input-trailing-icon{display:flex;align-items:center;margin-right:0.5rem}.goa-input-trailing-icon>.goa-icon-button{margin-right:-0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.counter{position:absolute;padding-top:0.25rem;right:0;font-size:var(--fs-sm)}.counter-error{color:var(--goa-color-interactive--error)}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.container{position:relative;width:100%}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);background:white;display:inline-flex;align-items:center;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{display:flex;align-items:center;margin-left:0.5rem}.goa-input-trailing-icon{display:flex;align-items:center;margin-right:0.5rem}.goa-input-trailing-icon>.goa-icon-button{margin-right:-0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.counter{position:absolute;padding-top:0.25rem;right:0;font-size:var(--fs-sm)}.counter-error{color:var(--goa-color-interactive--error)}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
       center center no-repeat}</style>`;
 
 		init(