@abgov/web-components 1.18.0 → 1.18.1

package/web-components.es.js

@@ -5322,7 +5322,7 @@ function noscroll(_node, opts) {
     const scrollbarWidth = calculateScrollbarWidth();
     toggledScrolling = true;
     document.body.style.overflow = "hidden";
-    document.body.style.paddingRight = scrollbarWidth + "px";
+    document.body.style.borderRight = `${scrollbarWidth}px solid #eee`;
   }
   function isScrollable() {
     return document.body.style.overflow !== "hidden";
@@ -5334,7 +5334,7 @@ function noscroll(_node, opts) {
     toggledScrolling = false;
     setTimeout(() => {
       document.body.style.overflow = "";
-      document.body.style.paddingRight = "0";
+      document.body.style.borderRight = "";
     }, 200);
   }
   function calculateScrollbarWidth() {
@@ -6490,7 +6490,7 @@ function get_each_context$8(ctx, list, i) {
 	return child_ctx;
 }
 
-// (444:2) {:else}
+// (458:2) {:else}
 function create_else_block$a(ctx) {
 	let slot;
 	let t0;
@@ -6504,7 +6504,6 @@ function create_else_block$a(ctx) {
 	let input_aria_owns_value;
 	let input_readonly_value;
 	let t2;
-	let div_style_value;
 	let t3;
 	let ul;
 	let each_blocks = [];
@@ -6517,13 +6516,13 @@ function create_else_block$a(ctx) {
 	let if_block0 = /*leadingicon*/ ctx[4] && create_if_block_2$b(ctx);
 
 	function select_block_type_1(ctx, dirty) {
-		if (/*_inputEl*/ ctx[23]?.value && /*_filterable*/ ctx[24]) return create_if_block_1$d;
+		if (/*_inputEl*/ ctx[22]?.value && /*_filterable*/ ctx[23]) return create_if_block_1$d;
 		return create_else_block_2;
 	}
 
 	let current_block_type = select_block_type_1(ctx);
 	let if_block1 = current_block_type(ctx);
-	let each_value_1 = /*_filteredOptions*/ ctx[15];
+	let each_value_1 = /*_filteredOptions*/ ctx[14];
 	const get_key = ctx => /*index*/ ctx[65];
 
 	for (let i = 0; i < each_value_1.length; i += 1) {
@@ -6561,8 +6560,8 @@ function create_else_block$a(ctx) {
 			}
 
 			attr(input, "style", input_style_value = `
-            cursor: ${!/*_disabled*/ ctx[26]
-			? /*_filterable*/ ctx[24] ? "auto" : "pointer"
+            cursor: ${!/*_disabled*/ ctx[25]
+			? /*_filterable*/ ctx[23] ? "auto" : "pointer"
 			: "default"};
           `);
 
@@ -6572,27 +6571,26 @@ function create_else_block$a(ctx) {
 			attr(input, "autocomplete", "off");
 			attr(input, "aria-autocomplete", "list");
 			attr(input, "aria-controls", input_aria_controls_value = `menu-${/*name*/ ctx[0]}`);
-			attr(input, "aria-expanded", /*_isMenuVisible*/ ctx[18]);
+			attr(input, "aria-expanded", /*_isMenuVisible*/ ctx[17]);
 			attr(input, "aria-label", input_aria_label_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0]);
 			attr(input, "aria-labelledby", /*arialabelledby*/ ctx[2]);
 			attr(input, "id", /*name*/ ctx[0]);
-			attr(input, "aria-activedescendant", /*_activeDescendantId*/ ctx[25]);
-			attr(input, "aria-disabled", /*_disabled*/ ctx[26]);
+			attr(input, "aria-activedescendant", /*_activeDescendantId*/ ctx[24]);
+			attr(input, "aria-disabled", /*_disabled*/ ctx[25]);
 
-			attr(input, "aria-owns", input_aria_owns_value = /*_isMenuVisible*/ ctx[18]
+			attr(input, "aria-owns", input_aria_owns_value = /*_isMenuVisible*/ ctx[17]
 			? `menu-${/*name*/ ctx[0]}`
 			: undefined);
 
 			attr(input, "aria-haspopup", "listbox");
-			input.disabled = /*_disabled*/ ctx[26];
-			input.readOnly = input_readonly_value = !/*_filterable*/ ctx[24];
+			input.disabled = /*_disabled*/ ctx[25];
+			input.readOnly = input_readonly_value = !/*_filterable*/ ctx[23];
 			attr(input, "placeholder", /*placeholder*/ ctx[6]);
 			attr(input, "name", /*name*/ ctx[0]);
 			attr(div, "slot", "target");
-			attr(div, "style", div_style_value = cssVar("width", /*width*/ ctx[7]));
 			attr(div, "class", "dropdown-input-group");
-			toggle_class(div, "dropdown-input-group--disabled", /*_disabled*/ ctx[26]);
-			toggle_class(div, "error", /*_error*/ ctx[27]);
+			toggle_class(div, "dropdown-input-group--disabled", /*_disabled*/ ctx[25]);
+			toggle_class(div, "error", /*_error*/ ctx[26]);
 			attr(ul, "id", ul_id_value = `menu-${/*name*/ ctx[0]}`);
 			attr(ul, "role", "listbox");
 			attr(ul, "tabindex", "-1");
@@ -6601,20 +6599,19 @@ function create_else_block$a(ctx) {
 			attr(ul, "aria-labelledby", /*arialabelledby*/ ctx[2]);
 
 			attr(ul, "style", ul_style_value = `
-          width: ${/*_width*/ ctx[19]};
           outline: none;
           overflow-y: auto;
           max-height: ${/*maxheight*/ ctx[5]};
         `);
 
-			set_custom_element_data(goa_popover, "disabled", /*disabled*/ ctx[8]);
-			set_custom_element_data(goa_popover, "relative", /*relative*/ ctx[9]);
+			set_custom_element_data(goa_popover, "disabled", /*disabled*/ ctx[7]);
+			set_custom_element_data(goa_popover, "relative", /*relative*/ ctx[8]);
 			set_custom_element_data(goa_popover, "data-testid", "option-list");
-			set_custom_element_data(goa_popover, "maxwidth", "1000px");
-			set_custom_element_data(goa_popover, "open", /*_isMenuVisible*/ ctx[18]);
+			set_custom_element_data(goa_popover, "maxwidth", "99999px");
+			set_custom_element_data(goa_popover, "open", /*_isMenuVisible*/ ctx[17]);
 			set_custom_element_data(goa_popover, "padded", "false");
 			set_custom_element_data(goa_popover, "tabindex", "-1");
-			set_custom_element_data(goa_popover, "width", /*_width*/ ctx[19]);
+			set_custom_element_data(goa_popover, "width", /*_width*/ ctx[18]);
 		},
 		m(target, anchor) {
 			insert(target, slot, anchor);
@@ -6644,10 +6641,10 @@ function create_else_block$a(ctx) {
 
 			if (!mounted) {
 				dispose = [
-					listen(input, "keydown", /*onInputKeyDown*/ ctx[32]),
-					listen(input, "keyup", /*onInputKeyUp*/ ctx[31]),
-					listen(goa_popover, "_open", /*showMenu*/ ctx[28]),
-					listen(goa_popover, "_close", /*hideMenu*/ ctx[29])
+					listen(input, "keydown", /*onInputKeyDown*/ ctx[31]),
+					listen(input, "keyup", /*onInputKeyUp*/ ctx[30]),
+					listen(goa_popover, "_open", /*showMenu*/ ctx[27]),
+					listen(goa_popover, "_close", /*hideMenu*/ ctx[28])
 				];
 
 				mounted = true;
@@ -6667,9 +6664,9 @@ function create_else_block$a(ctx) {
 				if_block0 = null;
 			}
 
-			if (dirty[0] & /*_disabled, _filterable*/ 83886080 && input_style_value !== (input_style_value = `
-            cursor: ${!/*_disabled*/ ctx[26]
-			? /*_filterable*/ ctx[24] ? "auto" : "pointer"
+			if (dirty[0] & /*_disabled, _filterable*/ 41943040 && input_style_value !== (input_style_value = `
+            cursor: ${!/*_disabled*/ ctx[25]
+			? /*_filterable*/ ctx[23] ? "auto" : "pointer"
 			: "default"};
           `)) {
 				attr(input, "style", input_style_value);
@@ -6679,8 +6676,8 @@ function create_else_block$a(ctx) {
 				attr(input, "aria-controls", input_aria_controls_value);
 			}
 
-			if (dirty[0] & /*_isMenuVisible*/ 262144) {
-				attr(input, "aria-expanded", /*_isMenuVisible*/ ctx[18]);
+			if (dirty[0] & /*_isMenuVisible*/ 131072) {
+				attr(input, "aria-expanded", /*_isMenuVisible*/ ctx[17]);
 			}
 
 			if (dirty[0] & /*arialabel, name*/ 3 && input_aria_label_value !== (input_aria_label_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0])) {
@@ -6695,25 +6692,25 @@ function create_else_block$a(ctx) {
 				attr(input, "id", /*name*/ ctx[0]);
 			}
 
-			if (dirty[0] & /*_activeDescendantId*/ 33554432) {
-				attr(input, "aria-activedescendant", /*_activeDescendantId*/ ctx[25]);
+			if (dirty[0] & /*_activeDescendantId*/ 16777216) {
+				attr(input, "aria-activedescendant", /*_activeDescendantId*/ ctx[24]);
 			}
 
-			if (dirty[0] & /*_disabled*/ 67108864) {
-				attr(input, "aria-disabled", /*_disabled*/ ctx[26]);
+			if (dirty[0] & /*_disabled*/ 33554432) {
+				attr(input, "aria-disabled", /*_disabled*/ ctx[25]);
 			}
 
-			if (dirty[0] & /*_isMenuVisible, name*/ 262145 && input_aria_owns_value !== (input_aria_owns_value = /*_isMenuVisible*/ ctx[18]
+			if (dirty[0] & /*_isMenuVisible, name*/ 131073 && input_aria_owns_value !== (input_aria_owns_value = /*_isMenuVisible*/ ctx[17]
 			? `menu-${/*name*/ ctx[0]}`
 			: undefined)) {
 				attr(input, "aria-owns", input_aria_owns_value);
 			}
 
-			if (dirty[0] & /*_disabled*/ 67108864) {
-				input.disabled = /*_disabled*/ ctx[26];
+			if (dirty[0] & /*_disabled*/ 33554432) {
+				input.disabled = /*_disabled*/ ctx[25];
 			}
 
-			if (dirty[0] & /*_filterable*/ 16777216 && input_readonly_value !== (input_readonly_value = !/*_filterable*/ ctx[24])) {
+			if (dirty[0] & /*_filterable*/ 8388608 && input_readonly_value !== (input_readonly_value = !/*_filterable*/ ctx[23])) {
 				input.readOnly = input_readonly_value;
 			}
 
@@ -6737,20 +6734,16 @@ function create_else_block$a(ctx) {
 				}
 			}
 
-			if (dirty[0] & /*width*/ 128 && div_style_value !== (div_style_value = cssVar("width", /*width*/ ctx[7]))) {
-				attr(div, "style", div_style_value);
-			}
-
-			if (dirty[0] & /*_disabled*/ 67108864) {
-				toggle_class(div, "dropdown-input-group--disabled", /*_disabled*/ ctx[26]);
+			if (dirty[0] & /*_disabled*/ 33554432) {
+				toggle_class(div, "dropdown-input-group--disabled", /*_disabled*/ ctx[25]);
 			}
 
-			if (dirty[0] & /*_error*/ 134217728) {
-				toggle_class(div, "error", /*_error*/ ctx[27]);
+			if (dirty[0] & /*_error*/ 67108864) {
+				toggle_class(div, "error", /*_error*/ ctx[26]);
 			}
 
-			if (dirty[0] & /*_filteredOptions, _inputEl, _highlightedIndex, onSelect*/ 1082179584) {
-				each_value_1 = /*_filteredOptions*/ ctx[15];
+			if (dirty[0] & /*_filteredOptions, _inputEl, _highlightedIndex, onSelect*/ 541089792) {
+				each_value_1 = /*_filteredOptions*/ ctx[14];
 				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value_1, each_1_lookup, ul, destroy_block, create_each_block_1$1, null, get_each_context_1$1);
 
 				if (!each_value_1.length && each_1_else) {
@@ -6777,8 +6770,7 @@ function create_else_block$a(ctx) {
 				attr(ul, "aria-labelledby", /*arialabelledby*/ ctx[2]);
 			}
 
-			if (dirty[0] & /*_width, maxheight*/ 524320 && ul_style_value !== (ul_style_value = `
-          width: ${/*_width*/ ctx[19]};
+			if (dirty[0] & /*maxheight*/ 32 && ul_style_value !== (ul_style_value = `
           outline: none;
           overflow-y: auto;
           max-height: ${/*maxheight*/ ctx[5]};
@@ -6786,20 +6778,20 @@ function create_else_block$a(ctx) {
 				attr(ul, "style", ul_style_value);
 			}
 
-			if (dirty[0] & /*disabled*/ 256) {
-				set_custom_element_data(goa_popover, "disabled", /*disabled*/ ctx[8]);
+			if (dirty[0] & /*disabled*/ 128) {
+				set_custom_element_data(goa_popover, "disabled", /*disabled*/ ctx[7]);
 			}
 
-			if (dirty[0] & /*relative*/ 512) {
-				set_custom_element_data(goa_popover, "relative", /*relative*/ ctx[9]);
+			if (dirty[0] & /*relative*/ 256) {
+				set_custom_element_data(goa_popover, "relative", /*relative*/ ctx[8]);
 			}
 
-			if (dirty[0] & /*_isMenuVisible*/ 262144) {
-				set_custom_element_data(goa_popover, "open", /*_isMenuVisible*/ ctx[18]);
+			if (dirty[0] & /*_isMenuVisible*/ 131072) {
+				set_custom_element_data(goa_popover, "open", /*_isMenuVisible*/ ctx[17]);
 			}
 
-			if (dirty[0] & /*_width*/ 524288) {
-				set_custom_element_data(goa_popover, "width", /*_width*/ ctx[19]);
+			if (dirty[0] & /*_width*/ 262144) {
+				set_custom_element_data(goa_popover, "width", /*_width*/ ctx[18]);
 			}
 		},
 		d(detaching) {
@@ -6822,14 +6814,14 @@ function create_else_block$a(ctx) {
 	};
 }
 
-// (424:2) {#if _native}
+// (438:2) {#if _native}
 function create_if_block$p(ctx) {
 	let select;
 	let slot;
 	let select_aria_label_value;
 	let mounted;
 	let dispose;
-	let each_value = /*_options*/ ctx[17];
+	let each_value = /*_options*/ ctx[16];
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
@@ -6848,9 +6840,9 @@ function create_if_block$p(ctx) {
 			attr(select, "name", /*name*/ ctx[0]);
 			attr(select, "aria-label", select_aria_label_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0]);
 			attr(select, "aria-labelledby", /*arialabelledby*/ ctx[2]);
-			select.disabled = /*_disabled*/ ctx[26];
+			select.disabled = /*_disabled*/ ctx[25];
 			attr(select, "id", /*name*/ ctx[0]);
-			toggle_class(select, "error", /*_error*/ ctx[27]);
+			toggle_class(select, "error", /*_error*/ ctx[26]);
 		},
 		m(target, anchor) {
 			insert(target, select, anchor);
@@ -6865,13 +6857,13 @@ function create_if_block$p(ctx) {
 			/*select_binding*/ ctx[41](select);
 
 			if (!mounted) {
-				dispose = listen(select, "change", /*onNativeSelect*/ ctx[35]);
+				dispose = listen(select, "change", /*onNativeSelect*/ ctx[34]);
 				mounted = true;
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*value, _options*/ 131080) {
-				each_value = /*_options*/ ctx[17];
+			if (dirty[0] & /*value, _options*/ 65544) {
+				each_value = /*_options*/ ctx[16];
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
@@ -6905,16 +6897,16 @@ function create_if_block$p(ctx) {
 				attr(select, "aria-labelledby", /*arialabelledby*/ ctx[2]);
 			}
 
-			if (dirty[0] & /*_disabled*/ 67108864) {
-				select.disabled = /*_disabled*/ ctx[26];
+			if (dirty[0] & /*_disabled*/ 33554432) {
+				select.disabled = /*_disabled*/ ctx[25];
 			}
 
 			if (dirty[0] & /*name*/ 1) {
 				attr(select, "id", /*name*/ ctx[0]);
 			}
 
-			if (dirty[0] & /*_error*/ 134217728) {
-				toggle_class(select, "error", /*_error*/ ctx[27]);
+			if (dirty[0] & /*_error*/ 67108864) {
+				toggle_class(select, "error", /*_error*/ ctx[26]);
 			}
 		},
 		d(detaching) {
@@ -6927,7 +6919,7 @@ function create_if_block$p(ctx) {
 	};
 }
 
-// (467:8) {#if leadingicon}
+// (480:8) {#if leadingicon}
 function create_if_block_2$b(ctx) {
 	let goa_icon;
 
@@ -6952,7 +6944,7 @@ function create_if_block_2$b(ctx) {
 	};
 }
 
-// (517:8) {:else}
+// (530:8) {:else}
 function create_else_block_2(ctx) {
 	let goa_icon;
 	let goa_icon_arialabel_value;
@@ -6970,11 +6962,11 @@ function create_else_block_2(ctx) {
 			set_custom_element_data(goa_icon, "id", /*name*/ ctx[0]);
 			set_custom_element_data(goa_icon, "arialabel", goa_icon_arialabel_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0]);
 			set_custom_element_data(goa_icon, "ariacontrols", goa_icon_ariacontrols_value = `menu-${/*name*/ ctx[0]}`);
-			set_custom_element_data(goa_icon, "ariaexpanded", goa_icon_ariaexpanded_value = fromBoolean(/*_isMenuVisible*/ ctx[18]));
+			set_custom_element_data(goa_icon, "ariaexpanded", goa_icon_ariaexpanded_value = fromBoolean(/*_isMenuVisible*/ ctx[17]));
 			set_custom_element_data(goa_icon, "class", "dropdown-icon--arrow");
 			set_custom_element_data(goa_icon, "size", "medium");
 
-			set_custom_element_data(goa_icon, "type", goa_icon_type_value = /*_isMenuVisible*/ ctx[18]
+			set_custom_element_data(goa_icon, "type", goa_icon_type_value = /*_isMenuVisible*/ ctx[17]
 			? "chevron-up"
 			: "chevron-down");
 		},
@@ -6982,7 +6974,7 @@ function create_else_block_2(ctx) {
 			insert(target, goa_icon, anchor);
 
 			if (!mounted) {
-				dispose = listen(goa_icon, "click", /*onChevronClick*/ ctx[36]);
+				dispose = listen(goa_icon, "click", /*onChevronClick*/ ctx[35]);
 				mounted = true;
 			}
 		},
@@ -6999,11 +6991,11 @@ function create_else_block_2(ctx) {
 				set_custom_element_data(goa_icon, "ariacontrols", goa_icon_ariacontrols_value);
 			}
 
-			if (dirty[0] & /*_isMenuVisible*/ 262144 && goa_icon_ariaexpanded_value !== (goa_icon_ariaexpanded_value = fromBoolean(/*_isMenuVisible*/ ctx[18]))) {
+			if (dirty[0] & /*_isMenuVisible*/ 131072 && goa_icon_ariaexpanded_value !== (goa_icon_ariaexpanded_value = fromBoolean(/*_isMenuVisible*/ ctx[17]))) {
 				set_custom_element_data(goa_icon, "ariaexpanded", goa_icon_ariaexpanded_value);
 			}
 
-			if (dirty[0] & /*_isMenuVisible*/ 262144 && goa_icon_type_value !== (goa_icon_type_value = /*_isMenuVisible*/ ctx[18]
+			if (dirty[0] & /*_isMenuVisible*/ 131072 && goa_icon_type_value !== (goa_icon_type_value = /*_isMenuVisible*/ ctx[17]
 			? "chevron-up"
 			: "chevron-down")) {
 				set_custom_element_data(goa_icon, "type", goa_icon_type_value);
@@ -7017,7 +7009,7 @@ function create_else_block_2(ctx) {
 	};
 }
 
-// (502:8) {#if _inputEl?.value && _filterable}
+// (515:8) {#if _inputEl?.value && _filterable}
 function create_if_block_1$d(ctx) {
 	let goa_icon;
 	let goa_icon_tabindex_value;
@@ -7031,23 +7023,23 @@ function create_if_block_1$d(ctx) {
 		c() {
 			goa_icon = element("goa-icon");
 			set_custom_element_data(goa_icon, "id", /*name*/ ctx[0]);
-			set_custom_element_data(goa_icon, "tabindex", goa_icon_tabindex_value = /*_disabled*/ ctx[26] ? -1 : 0);
+			set_custom_element_data(goa_icon, "tabindex", goa_icon_tabindex_value = /*_disabled*/ ctx[25] ? -1 : 0);
 			set_custom_element_data(goa_icon, "role", "button");
 			set_custom_element_data(goa_icon, "arialabel", goa_icon_arialabel_value = `clear ${/*arialabel*/ ctx[1] || /*name*/ ctx[0]}`);
 			set_custom_element_data(goa_icon, "ariacontrols", goa_icon_ariacontrols_value = `menu-${/*name*/ ctx[0]}`);
-			set_custom_element_data(goa_icon, "ariaexpanded", goa_icon_ariaexpanded_value = fromBoolean(/*_isMenuVisible*/ ctx[18]));
+			set_custom_element_data(goa_icon, "ariaexpanded", goa_icon_ariaexpanded_value = fromBoolean(/*_isMenuVisible*/ ctx[17]));
 			set_custom_element_data(goa_icon, "class", "dropdown-icon--clear");
 			set_custom_element_data(goa_icon, "size", "medium");
 			set_custom_element_data(goa_icon, "type", "close");
-			toggle_class(goa_icon, "disabled", /*_disabled*/ ctx[26]);
+			toggle_class(goa_icon, "disabled", /*_disabled*/ ctx[25]);
 		},
 		m(target, anchor) {
 			insert(target, goa_icon, anchor);
 
 			if (!mounted) {
 				dispose = [
-					listen(goa_icon, "click", stop_propagation(/*onClearIconClick*/ ctx[34])),
-					listen(goa_icon, "keydown", /*onClearIconKeyDown*/ ctx[33])
+					listen(goa_icon, "click", stop_propagation(/*onClearIconClick*/ ctx[33])),
+					listen(goa_icon, "keydown", /*onClearIconKeyDown*/ ctx[32])
 				];
 
 				mounted = true;
@@ -7058,7 +7050,7 @@ function create_if_block_1$d(ctx) {
 				set_custom_element_data(goa_icon, "id", /*name*/ ctx[0]);
 			}
 
-			if (dirty[0] & /*_disabled*/ 67108864 && goa_icon_tabindex_value !== (goa_icon_tabindex_value = /*_disabled*/ ctx[26] ? -1 : 0)) {
+			if (dirty[0] & /*_disabled*/ 33554432 && goa_icon_tabindex_value !== (goa_icon_tabindex_value = /*_disabled*/ ctx[25] ? -1 : 0)) {
 				set_custom_element_data(goa_icon, "tabindex", goa_icon_tabindex_value);
 			}
 
@@ -7070,12 +7062,12 @@ function create_if_block_1$d(ctx) {
 				set_custom_element_data(goa_icon, "ariacontrols", goa_icon_ariacontrols_value);
 			}
 
-			if (dirty[0] & /*_isMenuVisible*/ 262144 && goa_icon_ariaexpanded_value !== (goa_icon_ariaexpanded_value = fromBoolean(/*_isMenuVisible*/ ctx[18]))) {
+			if (dirty[0] & /*_isMenuVisible*/ 131072 && goa_icon_ariaexpanded_value !== (goa_icon_ariaexpanded_value = fromBoolean(/*_isMenuVisible*/ ctx[17]))) {
 				set_custom_element_data(goa_icon, "ariaexpanded", goa_icon_ariaexpanded_value);
 			}
 
-			if (dirty[0] & /*_disabled*/ 67108864) {
-				toggle_class(goa_icon, "disabled", /*_disabled*/ ctx[26]);
+			if (dirty[0] & /*_disabled*/ 33554432) {
+				toggle_class(goa_icon, "disabled", /*_disabled*/ ctx[25]);
 			}
 		},
 		d(detaching) {
@@ -7086,7 +7078,7 @@ function create_if_block_1$d(ctx) {
 	};
 }
 
-// (565:8) {:else}
+// (577:8) {:else}
 function create_else_block_1(ctx) {
 	let li;
 
@@ -7107,7 +7099,7 @@ function create_else_block_1(ctx) {
 	};
 }
 
-// (549:8) {#each _filteredOptions as option, index (index)}
+// (561:8) {#each _filteredOptions as option, index (index)}
 function create_each_block_1$1(key_1, ctx) {
 	let li;
 	let t0_value = (/*option*/ ctx[61].label || /*option*/ ctx[61].value) + "";
@@ -7133,15 +7125,15 @@ function create_each_block_1$1(key_1, ctx) {
 			t0 = text(t0_value);
 			t1 = space();
 			attr(li, "id", li_id_value = /*option*/ ctx[61].value);
-			attr(li, "aria-selected", li_aria_selected_value = /*_inputEl*/ ctx[23].value === (/*option*/ ctx[61].label || /*option*/ ctx[61].value));
+			attr(li, "aria-selected", li_aria_selected_value = /*_inputEl*/ ctx[22].value === (/*option*/ ctx[61].label || /*option*/ ctx[61].value));
 			attr(li, "class", "dropdown-item");
 			attr(li, "data-index", li_data_index_value = /*index*/ ctx[65]);
 			attr(li, "data-testid", li_data_testid_value = `dropdown-item-${/*option*/ ctx[61].value}`);
 			attr(li, "data-value", li_data_value_value = /*option*/ ctx[61].value);
 			attr(li, "role", "option");
 			set_style(li, "display", "block");
-			toggle_class(li, "dropdown-item--highlighted", /*index*/ ctx[65] === /*_highlightedIndex*/ ctx[14]);
-			toggle_class(li, "selected", /*_inputEl*/ ctx[23].value === (/*option*/ ctx[61].label || /*option*/ ctx[61].value));
+			toggle_class(li, "dropdown-item--highlighted", /*index*/ ctx[65] === /*_highlightedIndex*/ ctx[13]);
+			toggle_class(li, "selected", /*_inputEl*/ ctx[22].value === (/*option*/ ctx[61].label || /*option*/ ctx[61].value));
 			this.first = li;
 		},
 		m(target, anchor) {
@@ -7156,34 +7148,34 @@ function create_each_block_1$1(key_1, ctx) {
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
-			if (dirty[0] & /*_filteredOptions*/ 32768 && t0_value !== (t0_value = (/*option*/ ctx[61].label || /*option*/ ctx[61].value) + "")) set_data(t0, t0_value);
+			if (dirty[0] & /*_filteredOptions*/ 16384 && t0_value !== (t0_value = (/*option*/ ctx[61].label || /*option*/ ctx[61].value) + "")) set_data(t0, t0_value);
 
-			if (dirty[0] & /*_filteredOptions*/ 32768 && li_id_value !== (li_id_value = /*option*/ ctx[61].value)) {
+			if (dirty[0] & /*_filteredOptions*/ 16384 && li_id_value !== (li_id_value = /*option*/ ctx[61].value)) {
 				attr(li, "id", li_id_value);
 			}
 
-			if (dirty[0] & /*_inputEl, _filteredOptions*/ 8421376 && li_aria_selected_value !== (li_aria_selected_value = /*_inputEl*/ ctx[23].value === (/*option*/ ctx[61].label || /*option*/ ctx[61].value))) {
+			if (dirty[0] & /*_inputEl, _filteredOptions*/ 4210688 && li_aria_selected_value !== (li_aria_selected_value = /*_inputEl*/ ctx[22].value === (/*option*/ ctx[61].label || /*option*/ ctx[61].value))) {
 				attr(li, "aria-selected", li_aria_selected_value);
 			}
 
-			if (dirty[0] & /*_filteredOptions*/ 32768 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[65])) {
+			if (dirty[0] & /*_filteredOptions*/ 16384 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[65])) {
 				attr(li, "data-index", li_data_index_value);
 			}
 
-			if (dirty[0] & /*_filteredOptions*/ 32768 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${/*option*/ ctx[61].value}`)) {
+			if (dirty[0] & /*_filteredOptions*/ 16384 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${/*option*/ ctx[61].value}`)) {
 				attr(li, "data-testid", li_data_testid_value);
 			}
 
-			if (dirty[0] & /*_filteredOptions*/ 32768 && li_data_value_value !== (li_data_value_value = /*option*/ ctx[61].value)) {
+			if (dirty[0] & /*_filteredOptions*/ 16384 && li_data_value_value !== (li_data_value_value = /*option*/ ctx[61].value)) {
 				attr(li, "data-value", li_data_value_value);
 			}
 
-			if (dirty[0] & /*_filteredOptions, _highlightedIndex*/ 49152) {
-				toggle_class(li, "dropdown-item--highlighted", /*index*/ ctx[65] === /*_highlightedIndex*/ ctx[14]);
+			if (dirty[0] & /*_filteredOptions, _highlightedIndex*/ 24576) {
+				toggle_class(li, "dropdown-item--highlighted", /*index*/ ctx[65] === /*_highlightedIndex*/ ctx[13]);
 			}
 
-			if (dirty[0] & /*_inputEl, _filteredOptions*/ 8421376) {
-				toggle_class(li, "selected", /*_inputEl*/ ctx[23].value === (/*option*/ ctx[61].label || /*option*/ ctx[61].value));
+			if (dirty[0] & /*_inputEl, _filteredOptions*/ 4210688) {
+				toggle_class(li, "selected", /*_inputEl*/ ctx[22].value === (/*option*/ ctx[61].label || /*option*/ ctx[61].value));
 			}
 		},
 		d(detaching) {
@@ -7194,7 +7186,7 @@ function create_each_block_1$1(key_1, ctx) {
 	};
 }
 
-// (436:6) {#each _options as option}
+// (450:6) {#each _options as option}
 function create_each_block$8(ctx) {
 	let option;
 	let t0_value = /*option*/ ctx[61].label + "";
@@ -7218,13 +7210,13 @@ function create_each_block$8(ctx) {
 			append(option, t1);
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*_options*/ 131072 && t0_value !== (t0_value = /*option*/ ctx[61].label + "")) set_data(t0, t0_value);
+			if (dirty[0] & /*_options*/ 65536 && t0_value !== (t0_value = /*option*/ ctx[61].label + "")) set_data(t0, t0_value);
 
-			if (dirty[0] & /*value, _options*/ 131080 && option_selected_value !== (option_selected_value = /*value*/ ctx[3] === /*option*/ ctx[61].value)) {
+			if (dirty[0] & /*value, _options*/ 65544 && option_selected_value !== (option_selected_value = /*value*/ ctx[3] === /*option*/ ctx[61].value)) {
 				option.selected = option_selected_value;
 			}
 
-			if (dirty[0] & /*_options*/ 131072 && option_value_value !== (option_value_value = /*option*/ ctx[61].value)) {
+			if (dirty[0] & /*_options*/ 65536 && option_value_value !== (option_value_value = /*option*/ ctx[61].value)) {
 				option.__value = option_value_value;
 				option.value = option.__value;
 			}
@@ -7241,7 +7233,7 @@ function create_fragment$J(ctx) {
 	let div_style_value;
 
 	function select_block_type(ctx, dirty) {
-		if (/*_native*/ ctx[16]) return create_if_block$p;
+		if (/*_native*/ ctx[15]) return create_if_block$p;
 		return create_else_block$a;
 	}
 
@@ -7257,11 +7249,11 @@ function create_fragment$J(ctx) {
 			attr(div, "class", "dropdown");
 
 			attr(div, "style", div_style_value = `
-    --width: ${/*_width*/ ctx[19]};
-    ${calculateMargin(/*mt*/ ctx[10], /*mr*/ ctx[11], /*mb*/ ctx[12], /*ml*/ ctx[13])}
+    ${calculateMargin(/*mt*/ ctx[9], /*mr*/ ctx[10], /*mb*/ ctx[11], /*ml*/ ctx[12])};
+    --width: ${/*_width*/ ctx[18]};
   `);
 
-			toggle_class(div, "dropdown-native", /*_native*/ ctx[16]);
+			toggle_class(div, "dropdown-native", /*_native*/ ctx[15]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -7285,15 +7277,15 @@ function create_fragment$J(ctx) {
 				attr(div, "data-testid", div_data_testid_value);
 			}
 
-			if (dirty[0] & /*_width, mt, mr, mb, ml*/ 539648 && div_style_value !== (div_style_value = `
-    --width: ${/*_width*/ ctx[19]};
-    ${calculateMargin(/*mt*/ ctx[10], /*mr*/ ctx[11], /*mb*/ ctx[12], /*ml*/ ctx[13])}
+			if (dirty[0] & /*mt, mr, mb, ml, _width*/ 269824 && div_style_value !== (div_style_value = `
+    ${calculateMargin(/*mt*/ ctx[9], /*mr*/ ctx[10], /*mb*/ ctx[11], /*ml*/ ctx[12])};
+    --width: ${/*_width*/ ctx[18]};
   `)) {
 				attr(div, "style", div_style_value);
 			}
 
-			if (dirty[0] & /*_native*/ 65536) {
-				toggle_class(div, "dropdown-native", /*_native*/ ctx[16]);
+			if (dirty[0] & /*_native*/ 32768) {
+				toggle_class(div, "dropdown-native", /*_native*/ ctx[15]);
 			}
 		},
 		i: noop,
@@ -7357,7 +7349,7 @@ function instance$G($$self, $$props, $$invalidate) {
 
 	//
 	// Private
-	// 
+	//
 	let _options = [];
 
 	let _isMenuVisible = false;
@@ -7384,11 +7376,11 @@ function instance$G($$self, $$props, $$invalidate) {
 
 		// the following is required to appease the jest testing gods in that they don't respond
 		// to the slotchange event
-		$$invalidate(17, _options = getOptions());
+		$$invalidate(16, _options = getOptions());
 
 		if (!_native) {
 			$$invalidate(
-				23,
+				22,
 				_inputEl.value = (_b = (_a = _options.find(o => o.value === value)) === null || _a === void 0
 				? void 0
 				: _a.label) !== null && _b !== void 0
@@ -7397,7 +7389,20 @@ function instance$G($$self, $$props, $$invalidate) {
 				_inputEl
 			);
 
-			$$invalidate(19, _width = width || calculateWidth(_options));
+			if (width) {
+				if (width.endsWith("%")) {
+					const percent = parseInt(width) / 100;
+					const rootRect = _rootEl.getBoundingClientRect();
+					$$invalidate(18, _width = percent * rootRect.width + "px");
+				} else {
+					$$invalidate(18, _width = width);
+				}
+			}
+
+			// This is only here to allow the Jest tests to pass :(
+			if (!width && _options.length > 0) {
+				$$invalidate(18, _width = getLongestChildWidth(_options));
+			}
 		}
 
 		syncFilteredOptions();
@@ -7408,21 +7413,15 @@ function instance$G($$self, $$props, $$invalidate) {
 		slot === null || slot === void 0
 		? void 0
 		: slot.addEventListener("slotchange", _ => {
-				var _a, _b;
-				$$invalidate(17, _options = getOptions());
+				$$invalidate(16, _options = getOptions());
 				syncFilteredOptions();
-				$$invalidate(19, _width = width || calculateWidth(_options));
+
+				if (!width) {
+					$$invalidate(18, _width = getLongestChildWidth(_options));
+				}
 
 				if (!_native) {
-					$$invalidate(
-						23,
-						_inputEl.value = (_b = (_a = _options.find(o => o.value === value)) === null || _a === void 0
-						? void 0
-						: _a.label) !== null && _b !== void 0
-						? _b
-						: "",
-						_inputEl
-					);
+					setDisplayedValue();
 				}
 			});
 	});
@@ -7438,7 +7437,7 @@ function instance$G($$self, $$props, $$invalidate) {
 			const option = _options.find(o => o.value == _values[0]); // possible string number comparison
 
 			$$invalidate(
-				23,
+				22,
 				_inputEl.value = (_b = (_a = option === null || option === void 0
 				? void 0
 				: option.label) !== null && _a !== void 0
@@ -7481,7 +7480,7 @@ function instance$G($$self, $$props, $$invalidate) {
 	}
 
 	// compute the required width to ensure all children fit
-	function calculateWidth(options) {
+	function getLongestChildWidth(options) {
 		// set width to longest item
 		const optionsWidth = options.map(option => {
 			const label = `${option.label}` || `${option.value}` || "";
@@ -7518,7 +7517,7 @@ function instance$G($$self, $$props, $$invalidate) {
 			index = _filterable ? 0 : items.length - 1;
 		}
 
-		$$invalidate(14, _highlightedIndex = index);
+		$$invalidate(13, _highlightedIndex = index);
 		scrollToOption(index);
 	}
 
@@ -7533,7 +7532,7 @@ function instance$G($$self, $$props, $$invalidate) {
 	}
 
 	function syncFilteredOptions() {
-		$$invalidate(15, _filteredOptions = _filterable
+		$$invalidate(14, _filteredOptions = _filterable
 		? _options.filter(option => isFilterMatch(option, _inputEl.value))
 		: _options);
 	}
@@ -7546,7 +7545,7 @@ function instance$G($$self, $$props, $$invalidate) {
 		setTimeout(
 			() => {
 				syncFilteredOptions();
-				$$invalidate(18, _isMenuVisible = true);
+				$$invalidate(17, _isMenuVisible = true);
 				_inputEl.focus();
 			},
 			0
@@ -7554,7 +7553,7 @@ function instance$G($$self, $$props, $$invalidate) {
 	}
 
 	function hideMenu() {
-		$$invalidate(18, _isMenuVisible = false);
+		$$invalidate(17, _isMenuVisible = false);
 	}
 
 	function dispatchValue(value) {
@@ -7571,16 +7570,16 @@ function instance$G($$self, $$props, $$invalidate) {
 		);
 	}
 
-	// 
+	//
 	// Event handlers
-	// 
+	//
 	function onSelect(option) {
 		if (_disabled) return;
 
 		if (!_native) {
 			_isDirty = true;
 			hideMenu();
-			$$invalidate(23, _inputEl.value = option.label, _inputEl);
+			$$invalidate(22, _inputEl.value = option.label, _inputEl);
 		}
 
 		dispatchValue(option.value);
@@ -7618,9 +7617,9 @@ function instance$G($$self, $$props, $$invalidate) {
 
 	function reset() {
 		if (_disabled) return;
-		$$invalidate(25, _activeDescendantId = undefined);
-		$$invalidate(14, _highlightedIndex = -1);
-		$$invalidate(23, _inputEl.value = "", _inputEl);
+		$$invalidate(24, _activeDescendantId = undefined);
+		$$invalidate(13, _highlightedIndex = -1);
+		$$invalidate(22, _inputEl.value = "", _inputEl);
 		_isDirty = false;
 		syncFilteredOptions();
 		dispatchValue("");
@@ -7791,15 +7790,15 @@ function instance$G($$self, $$props, $$invalidate) {
 	function select_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			_selectEl = $$value;
-			$$invalidate(22, _selectEl);
-			$$invalidate(17, _options);
+			$$invalidate(21, _selectEl);
+			$$invalidate(16, _options);
 		});
 	}
 
 	function input_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			_inputEl = $$value;
-			$$invalidate(23, _inputEl);
+			$$invalidate(22, _inputEl);
 		});
 	}
 
@@ -7808,14 +7807,14 @@ function instance$G($$self, $$props, $$invalidate) {
 	function ul_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			_menuEl = $$value;
-			$$invalidate(21, _menuEl);
+			$$invalidate(20, _menuEl);
 		});
 	}
 
 	function div_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			_rootEl = $$value;
-			$$invalidate(20, _rootEl);
+			$$invalidate(19, _rootEl);
 		});
 	}
 
@@ -7824,32 +7823,32 @@ function instance$G($$self, $$props, $$invalidate) {
 		if ('arialabel' in $$props) $$invalidate(1, arialabel = $$props.arialabel);
 		if ('arialabelledby' in $$props) $$invalidate(2, arialabelledby = $$props.arialabelledby);
 		if ('value' in $$props) $$invalidate(3, value = $$props.value);
-		if ('filterable' in $$props) $$invalidate(37, filterable = $$props.filterable);
+		if ('filterable' in $$props) $$invalidate(36, filterable = $$props.filterable);
 		if ('leadingicon' in $$props) $$invalidate(4, leadingicon = $$props.leadingicon);
 		if ('maxheight' in $$props) $$invalidate(5, maxheight = $$props.maxheight);
 		if ('placeholder' in $$props) $$invalidate(6, placeholder = $$props.placeholder);
-		if ('width' in $$props) $$invalidate(7, width = $$props.width);
-		if ('disabled' in $$props) $$invalidate(8, disabled = $$props.disabled);
+		if ('width' in $$props) $$invalidate(37, width = $$props.width);
+		if ('disabled' in $$props) $$invalidate(7, disabled = $$props.disabled);
 		if ('error' in $$props) $$invalidate(38, error = $$props.error);
 		if ('multiselect' in $$props) $$invalidate(39, multiselect = $$props.multiselect);
 		if ('native' in $$props) $$invalidate(40, native = $$props.native);
-		if ('relative' in $$props) $$invalidate(9, relative = $$props.relative);
-		if ('mt' in $$props) $$invalidate(10, mt = $$props.mt);
-		if ('mr' in $$props) $$invalidate(11, mr = $$props.mr);
-		if ('mb' in $$props) $$invalidate(12, mb = $$props.mb);
-		if ('ml' in $$props) $$invalidate(13, ml = $$props.ml);
+		if ('relative' in $$props) $$invalidate(8, relative = $$props.relative);
+		if ('mt' in $$props) $$invalidate(9, mt = $$props.mt);
+		if ('mr' in $$props) $$invalidate(10, mr = $$props.mr);
+		if ('mb' in $$props) $$invalidate(11, mb = $$props.mb);
+		if ('ml' in $$props) $$invalidate(12, ml = $$props.ml);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*disabled*/ 256) {
-			// 
+		if ($$self.$$.dirty[0] & /*disabled*/ 128) {
+			//
 			// Reactive
-			// 
-			$$invalidate(26, _disabled = toBoolean(disabled));
+			//
+			$$invalidate(25, _disabled = toBoolean(disabled));
 		}
 
 		if ($$self.$$.dirty[1] & /*error*/ 128) {
-			$$invalidate(27, _error = toBoolean(error));
+			$$invalidate(26, _error = toBoolean(error));
 		}
 
 		if ($$self.$$.dirty[1] & /*multiselect*/ 256) {
@@ -7857,16 +7856,16 @@ function instance$G($$self, $$props, $$invalidate) {
 		}
 
 		if ($$self.$$.dirty[1] & /*native*/ 512) {
-			$$invalidate(16, _native = toBoolean(native));
+			$$invalidate(15, _native = toBoolean(native));
 		}
 
-		if ($$self.$$.dirty[0] & /*_native*/ 65536 | $$self.$$.dirty[1] & /*filterable*/ 64) {
-			$$invalidate(24, _filterable = toBoolean(filterable) && !_native);
+		if ($$self.$$.dirty[0] & /*_native*/ 32768 | $$self.$$.dirty[1] & /*filterable*/ 32) {
+			$$invalidate(23, _filterable = toBoolean(filterable) && !_native);
 		}
 
-		if ($$self.$$.dirty[0] & /*_filteredOptions, _highlightedIndex*/ 49152) {
+		if ($$self.$$.dirty[0] & /*_filteredOptions, _highlightedIndex*/ 24576) {
 			// To keep track of active descendant for the accessibility
-			$$invalidate(25, _activeDescendantId = _filteredOptions[_highlightedIndex]
+			$$invalidate(24, _activeDescendantId = _filteredOptions[_highlightedIndex]
 			? _filteredOptions[_highlightedIndex].value
 			: undefined);
 		}
@@ -7890,7 +7889,6 @@ function instance$G($$self, $$props, $$invalidate) {
 		leadingicon,
 		maxheight,
 		placeholder,
-		width,
 		disabled,
 		relative,
 		mt,
@@ -7921,6 +7919,7 @@ function instance$G($$self, $$props, $$invalidate) {
 		onNativeSelect,
 		onChevronClick,
 		filterable,
+		width,
 		error,
 		multiselect,
 		native,
@@ -7936,7 +7935,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-input-group{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;background-color:var(--goa-color-greyscale-white);cursor:pointer;width:100%}.dropdown-input-group:hover{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}.dropdown-input-group:focus,.dropdown-input-group:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}@media screen and (max-width: 623px){@media not (max-color:2147477350){.dropdown-input-group{width:var(--width)}}}@media not  screen and (max-width: 623px){@media not (color:2147477350){.dropdown-input-group{width:var(--width)}}}.dropdown-input-group.error,.dropdown-input-group.error:hover{border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 1px var(--goa-color-interactive-error)}.dropdown-input-group.error:focus-within,.dropdown-input-group.error:focus{border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.dropdown-icon--arrow,.dropdown-icon--clear{margin-right:var(--goa-space-s)}.dropdown-icon--clear:focus:not(.disabled),.dropdown-icon--clear:active:not(.disabled){color:var(--goa-color-interactive-focus);outline:none}.dropdown-input--leading-icon{margin-left:0.75rem}.dropdown-input--leading-icon+input{padding-left:0.5rem}input{display:inline-block;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding:var(--goa-space-xs);padding-left: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,input:focus,input:hover,input:active{outline:none;border:none}input[aria-disabled="true"]{color:var(--goa-color-text-secondary)}.dropdown-input-group--disabled,.dropdown-input-group--disabled:hover,.dropdown-input-group--disabled:active,.dropdown-input-group--disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200) !important;cursor:default;box-shadow:none !important}ul[role="listbox"]{border-radius:var(--goa-border-radius-m)}.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:hover,.dropdown-item--highlighted{background:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover)}.dropdown-item[aria-selected="true"]{background:var(--goa-color-interactive-default);color:var(--goa-color-greyscale-white)}.dropdown-item[aria-selected="true"]:hover,.dropdown-item[aria-selected="true"].dropdown-item--highlighted{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);-webkit-appearance:none;-moz-appearance:none;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;width:var(--width, 100%)}.dropdown-input-group{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;background-color:var(--goa-color-greyscale-white);cursor:pointer;width:var(--width, 100%)}.dropdown-input-group:hover{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}.dropdown-input-group:focus,.dropdown-input-group:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}@media screen and (max-width: 623px){@media not (max-color:2147477350){.dropdown-input-group{width:var(--width)}}}@media not  screen and (max-width: 623px){@media not (color:2147477350){.dropdown-input-group{width:var(--width)}}}.dropdown-input-group.error,.dropdown-input-group.error:hover{border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 1px var(--goa-color-interactive-error)}.dropdown-input-group.error:focus-within,.dropdown-input-group.error:focus{border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.dropdown-icon--arrow,.dropdown-icon--clear{margin-right:var(--goa-space-s)}.dropdown-icon--clear:focus:not(.disabled),.dropdown-icon--clear:active:not(.disabled){color:var(--goa-color-interactive-focus);outline:none}.dropdown-input--leading-icon{margin-left:0.75rem}.dropdown-input--leading-icon+input{padding-left:0.5rem}input{display:inline-block;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding:var(--goa-space-xs);padding-left: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,input:focus,input:hover,input:active{outline:none;border:none}input[aria-disabled="true"]{color:var(--goa-color-text-secondary)}.dropdown-input-group--disabled,.dropdown-input-group--disabled:hover,.dropdown-input-group--disabled:active,.dropdown-input-group--disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200) !important;cursor:default;box-shadow:none !important}ul[role="listbox"]{border-radius:var(--goa-border-radius-m)}.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:hover,.dropdown-item--highlighted{background:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover)}.dropdown-item[aria-selected="true"]{background:var(--goa-color-interactive-default);color:var(--goa-color-greyscale-white)}.dropdown-item[aria-selected="true"]:hover,.dropdown-item[aria-selected="true"].dropdown-item--highlighted{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);-webkit-appearance:none;-moz-appearance:none;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(
@@ -7954,20 +7953,20 @@ class Dropdown extends SvelteElement {
 				arialabel: 1,
 				arialabelledby: 2,
 				value: 3,
-				filterable: 37,
+				filterable: 36,
 				leadingicon: 4,
 				maxheight: 5,
 				placeholder: 6,
-				width: 7,
-				disabled: 8,
+				width: 37,
+				disabled: 7,
 				error: 38,
 				multiselect: 39,
 				native: 40,
-				relative: 9,
-				mt: 10,
-				mr: 11,
-				mb: 12,
-				ml: 13
+				relative: 8,
+				mt: 9,
+				mr: 10,
+				mb: 11,
+				ml: 12
 			},
 			null,
 			[-1, -1, -1]
@@ -8045,7 +8044,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get filterable() {
-		return this.$$.ctx[37];
+		return this.$$.ctx[36];
 	}
 
 	set filterable(filterable) {
@@ -8081,7 +8080,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get width() {
-		return this.$$.ctx[7];
+		return this.$$.ctx[37];
 	}
 
 	set width(width) {
@@ -8090,7 +8089,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[8];
+		return this.$$.ctx[7];
 	}
 
 	set disabled(disabled) {
@@ -8126,7 +8125,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get relative() {
-		return this.$$.ctx[9];
+		return this.$$.ctx[8];
 	}
 
 	set relative(relative) {
@@ -8135,7 +8134,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get mt() {
-		return this.$$.ctx[10];
+		return this.$$.ctx[9];
 	}
 
 	set mt(mt) {
@@ -8144,7 +8143,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get mr() {
-		return this.$$.ctx[11];
+		return this.$$.ctx[10];
 	}
 
 	set mr(mr) {
@@ -8153,7 +8152,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get mb() {
-		return this.$$.ctx[12];
+		return this.$$.ctx[11];
 	}
 
 	set mb(mb) {
@@ -8162,7 +8161,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get ml() {
-		return this.$$.ctx[13];
+		return this.$$.ctx[12];
 	}
 
 	set ml(ml) {
@@ -9415,7 +9414,7 @@ class FormItem extends SvelteElement {
 	constructor(options) {
 		super();
 		const style = document.createElement('style');
-		style.textContent = `:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}*{box-sizing:border-box}.label{display:block;font-weight:var(--goa-font-weight-bold);color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding-bottom:0.5rem}.label.large{font:var(--goa-typography-heading-l)}.label em{color:var(--goa-color-greyscale-700);font-weight:var(--goa-font-weight-regular);font-size:var(--goa-font-size-2);line-height:var(--goa-line-height-1);font-style:normal}.form-item-input{margin-bottom:0.25rem}.help-msg{font-size:var(--goa-font-size-2);color:var(--goa-color-text-default);margin-right:56px}.error-msg{display:inline-flex;align-items:flex-start;gap:0.25rem;font-size:var(--goa-font-size-2);color:var(--goa-color-interactive-error);margin-bottom:0.25rem}`;
+		style.textContent = `:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}*{box-sizing:border-box}.label{display:block;font-weight:var(--goa-font-weight-bold);color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding-bottom:0.5rem}.label.large{font:var(--goa-typography-heading-l)}.label em{color:var(--goa-color-greyscale-700);font-weight:var(--goa-font-weight-regular);font-size:var(--goa-font-size-2);line-height:var(--goa-line-height-1);font-style:normal}.form-item-input{margin-bottom:0.25rem}.help-msg{font-size:var(--goa-font-size-2);color:var(--goa-color-text-default)}.error-msg{display:inline-flex;align-items:flex-start;gap:0.25rem;font-size:var(--goa-font-size-2);color:var(--goa-color-interactive-error);margin-bottom:0.25rem}`;
 		this.shadowRoot.appendChild(style);
 
 		init(
@@ -11519,7 +11518,7 @@ class Input extends SvelteElement {
 		const style = document.createElement('style');
 
 		style.textContent = `:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media screen and (max-width: 623px){@media not (max-color:2147477350){.container{width:var(--width)}}}@media not  screen and (max-width: 623px){@media not (color:2147477350){.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(.leading-content):not(.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(.leading-content):not(.trailing-content),.goa-input:focus:not(.leading-content):not(.trailing-content),.goa-input:focus-within:not(.leading-content):not(.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}.leading-icon{margin-left:0.75rem}.trailing-icon{margin-right:var(--goa-space-s)}.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}.leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.input--disabled,.input--disabled:hover,.input--disabled:active,.input--disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200) !important;cursor:default;box-shadow:none !important}.input--disabled input,.input--disabled input:hover,.input--disabled input:active,.input--disabled input:focus{color:var(--goa-color-text-secondary)}.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)}.input--disabled .prefix,.input--disabled .leading-content ::slotted(div){border-right:1px solid var(--goa-color-greyscale-200)}.input--disabled .suffix,.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(.leading-content):not(.trailing-content),.error:hover:not(.leading-content):not(.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(.leading-content):not(.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}`;
+    center center no-repeat}::-ms-reveal{display:none}`;
 
 		this.shadowRoot.appendChild(style);
 
@@ -12328,6 +12327,7 @@ function create_if_block$i(ctx) {
 	let div3;
 	let div5_intro;
 	let div5_outro;
+	let div6_class_value;
 	let div6_style_value;
 	let noscroll_action;
 	let div6_intro;
@@ -12344,7 +12344,7 @@ function create_if_block$i(ctx) {
 
 	let current_block_type = select_block_type(ctx);
 	let if_block1 = current_block_type(ctx);
-	let if_block2 = /*_isClosable*/ ctx[9] && create_if_block_1$8(ctx);
+	let if_block2 = /*_isClosable*/ ctx[10] && create_if_block_1$8(ctx);
 
 	return {
 		c() {
@@ -12372,6 +12372,7 @@ function create_if_block$i(ctx) {
 			attr(div0, "class", "modal-overlay");
 			attr(div1, "data-testid", "modal-title");
 			attr(div1, "class", "modal-title");
+			toggle_class(header, "has-content", /*_requiresTopPadding*/ ctx[9]);
 			set_custom_element_data(goa_scrollable, "direction", "vertical");
 			set_custom_element_data(goa_scrollable, "hpadding", "1.9rem");
 			set_custom_element_data(goa_scrollable, "maxheight", "70vh");
@@ -12382,7 +12383,7 @@ function create_if_block$i(ctx) {
 			attr(div4, "class", "content");
 			attr(div5, "class", "modal-pane");
 			attr(div6, "data-testid", "modal");
-			attr(div6, "class", "modal");
+			attr(div6, "class", div6_class_value = `modal ${/*_scrollPos*/ ctx[8]}`);
 			attr(div6, "style", div6_style_value = `--maxwidth: ${/*maxwidth*/ ctx[0]};`);
 			set_custom_element_data(goa_focus_trap, "open", /*open*/ ctx[2]);
 		},
@@ -12400,12 +12401,11 @@ function create_if_block$i(ctx) {
 			if_block1.m(div1, null);
 			append(header, t2);
 			if (if_block2) if_block2.m(header, null);
-			/*header_binding*/ ctx[17](header);
+			/*header_binding*/ ctx[18](header);
 			append(div4, t3);
 			append(div4, div2);
 			append(div2, goa_scrollable);
-			/*goa_scrollable_binding*/ ctx[18](goa_scrollable);
-			/*div2_binding*/ ctx[19](div2);
+			/*goa_scrollable_binding*/ ctx[19](goa_scrollable);
 			append(div4, t4);
 			append(div4, div3);
 			/*div6_binding*/ ctx[20](div6);
@@ -12413,8 +12413,8 @@ function create_if_block$i(ctx) {
 
 			if (!mounted) {
 				dispose = [
-					listen(div0, "click", /*close*/ ctx[12]),
-					listen(goa_scrollable, "_scroll", /*handleScroll*/ ctx[13]),
+					listen(div0, "click", /*close*/ ctx[13]),
+					listen(goa_scrollable, "_scroll", /*handleScroll*/ ctx[14]),
 					action_destroyer(noscroll_action = noscroll.call(null, div6, { enable: /*_isOpen*/ ctx[7] }))
 				];
 
@@ -12449,7 +12449,7 @@ function create_if_block$i(ctx) {
 				}
 			}
 
-			if (/*_isClosable*/ ctx[9]) {
+			if (/*_isClosable*/ ctx[10]) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
@@ -12462,6 +12462,14 @@ function create_if_block$i(ctx) {
 				if_block2 = null;
 			}
 
+			if (!current || dirty & /*_requiresTopPadding*/ 512) {
+				toggle_class(header, "has-content", /*_requiresTopPadding*/ ctx[9]);
+			}
+
+			if (!current || dirty & /*_scrollPos*/ 256 && div6_class_value !== (div6_class_value = `modal ${/*_scrollPos*/ ctx[8]}`)) {
+				attr(div6, "class", div6_class_value);
+			}
+
 			if (!current || dirty & /*maxwidth*/ 1 && div6_style_value !== (div6_style_value = `--maxwidth: ${/*maxwidth*/ ctx[0]};`)) {
 				attr(div6, "style", div6_style_value);
 			}
@@ -12480,7 +12488,7 @@ function create_if_block$i(ctx) {
 				if (div5_outro) div5_outro.end(1);
 
 				div5_intro = create_in_transition(div5, fly, {
-					duration: /*_transitionTime*/ ctx[11],
+					duration: /*_transitionTime*/ ctx[12],
 					y: 200
 				});
 
@@ -12490,7 +12498,7 @@ function create_if_block$i(ctx) {
 			add_render_callback(() => {
 				if (!current) return;
 				if (div6_outro) div6_outro.end(1);
-				div6_intro = create_in_transition(div6, fade, { duration: /*_transitionTime*/ ctx[11] });
+				div6_intro = create_in_transition(div6, fade, { duration: /*_transitionTime*/ ctx[12] });
 				div6_intro.start();
 			});
 
@@ -12500,16 +12508,16 @@ function create_if_block$i(ctx) {
 			if (div5_intro) div5_intro.invalidate();
 
 			div5_outro = create_out_transition(div5, fly, {
-				delay: /*_transitionTime*/ ctx[11],
-				duration: /*_transitionTime*/ ctx[11],
+				delay: /*_transitionTime*/ ctx[12],
+				duration: /*_transitionTime*/ ctx[12],
 				y: -100
 			});
 
 			if (div6_intro) div6_intro.invalidate();
 
 			div6_outro = create_out_transition(div6, fade, {
-				delay: /*_transitionTime*/ ctx[11],
-				duration: /*_transitionTime*/ ctx[11]
+				delay: /*_transitionTime*/ ctx[12],
+				duration: /*_transitionTime*/ ctx[12]
 			});
 
 			current = false;
@@ -12519,9 +12527,8 @@ function create_if_block$i(ctx) {
 			if (if_block0) if_block0.d();
 			if_block1.d();
 			if (if_block2) if_block2.d();
-			/*header_binding*/ ctx[17](null);
-			/*goa_scrollable_binding*/ ctx[18](null);
-			/*div2_binding*/ ctx[19](null);
+			/*header_binding*/ ctx[18](null);
+			/*goa_scrollable_binding*/ ctx[19](null);
 			if (detaching && div5_outro) div5_outro.end();
 			/*div6_binding*/ ctx[20](null);
 			if (detaching && div6_outro) div6_outro.end();
@@ -12531,7 +12538,7 @@ function create_if_block$i(ctx) {
 	};
 }
 
-// (143:8) {#if calloutvariant !== null}
+// (156:8) {#if calloutvariant !== null}
 function create_if_block_3$7(ctx) {
 	let div;
 	let goa_icon;
@@ -12542,7 +12549,7 @@ function create_if_block_3$7(ctx) {
 		c() {
 			div = element("div");
 			goa_icon = element("goa-icon");
-			set_custom_element_data(goa_icon, "type", /*_iconType*/ ctx[10]);
+			set_custom_element_data(goa_icon, "type", /*_iconType*/ ctx[11]);
 
 			set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value = /*calloutvariant*/ ctx[3] === "important"
 			? "false"
@@ -12555,8 +12562,8 @@ function create_if_block_3$7(ctx) {
 			append(div, goa_icon);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*_iconType*/ 1024) {
-				set_custom_element_data(goa_icon, "type", /*_iconType*/ ctx[10]);
+			if (dirty & /*_iconType*/ 2048) {
+				set_custom_element_data(goa_icon, "type", /*_iconType*/ ctx[11]);
 			}
 
 			if (dirty & /*calloutvariant*/ 8 && goa_icon_inverted_value !== (goa_icon_inverted_value = /*calloutvariant*/ ctx[3] === "important"
@@ -12575,7 +12582,7 @@ function create_if_block_3$7(ctx) {
 	};
 }
 
-// (156:14) {:else}
+// (172:14) {:else}
 function create_else_block$8(ctx) {
 	let slot;
 
@@ -12594,7 +12601,7 @@ function create_else_block$8(ctx) {
 	};
 }
 
-// (154:14) {#if heading}
+// (170:14) {#if heading}
 function create_if_block_2$7(ctx) {
 	let t;
 
@@ -12614,7 +12621,7 @@ function create_if_block_2$7(ctx) {
 	};
 }
 
-// (160:12) {#if _isClosable}
+// (176:12) {#if _isClosable}
 function create_if_block_1$8(ctx) {
 	let div;
 	let goa_icon_button;
@@ -12635,7 +12642,7 @@ function create_if_block_1$8(ctx) {
 			append(div, goa_icon_button);
 
 			if (!mounted) {
-				dispose = listen(goa_icon_button, "click", /*close*/ ctx[12]);
+				dispose = listen(goa_icon_button, "click", /*close*/ ctx[13]);
 				mounted = true;
 			}
 		},
@@ -12716,36 +12723,42 @@ function instance$t($$self, $$props, $$invalidate) {
 	let { maxwidth = "60ch" } = $$props;
 	let { width = "" } = $$props;
 
+	// *******
 	// Private
+	// *******
 	let _rootEl = null;
 
-	let _contentEl = null;
+	let _scrollPos = "top";
 	let _scrollEl = null;
 	let _headerEl = null;
+	let _isOpen = false;
+	let _requiresTopPadding;
 
 	// Type verification
 	const [CALLOUT_VARIANT, validateCalloutVariant] = typeValidator("Callout variant", ["emergency", "important", "information", "success", "event"]);
 
 	const [Transitions, validateTransition] = typeValidator("Modal transition", ["fast", "slow", "none"]);
 
-	// Moving the reactive var into a timeout prevents accessing null stylesheet
-	// reference to allow for creation of the @keyframes for the in:fade and out:fade transitions.
-	// DDIDS-1288
-	let _isOpen = false;
-
+	// *****
 	// Hooks
+	// *****
 	onMount(async () => {
 		await tick();
 		validateCalloutVariant(calloutvariant);
 		validateTransition(transition);
 
+		// event listenerts
+		window.addEventListener('keydown', onInputKeyDown);
+
 		if (width) {
 			$$invalidate(0, maxwidth = width);
 			console.warn("`width` is deprecated. Please use `maxwidth` instead.");
 		}
 	});
 
+	// *********
 	// Functions
+	// *********
 	function close(e) {
 		if (!_isClosable) {
 			return;
@@ -12759,6 +12772,10 @@ function instance$t($$self, $$props, $$invalidate) {
 	}
 
 	const onInputKeyDown = e => {
+		if (!_isOpen) {
+			return;
+		}
+
 		switch (e.key) {
 			case "Escape":
 				close(e);
@@ -12769,20 +12786,21 @@ function instance$t($$self, $$props, $$invalidate) {
 
 	function handleScroll(e) {
 		const hasScroll = e.detail.scrollHeight > e.detail.offsetHeight;
+		if (!_isOpen || !hasScroll) return;
 
-		if (_isOpen && hasScroll) {
-			const atTop = e.detail.scrollTop == 0;
-			const atBottom = Math.abs(e.detail.scrollHeight - e.detail.scrollTop - e.detail.offsetHeight) < 1;
-			_contentEl.classList.remove("scroll-top", "scroll-bottom", "scroll-middle");
+		// top
+		if (e.detail.scrollTop == 0) {
+			$$invalidate(8, _scrollPos = "top");
+			return;
+		}
 
-			if (atTop) {
-				_contentEl.classList.add("scroll-top");
-			} else if (atBottom) {
-				_contentEl.classList.add("scroll-bottom");
-			} else {
-				_contentEl.classList.add("scroll-middle");
-			}
+		// bottom
+		if (Math.abs(e.detail.scrollHeight - e.detail.scrollTop - e.detail.offsetHeight) < 1) {
+			$$invalidate(8, _scrollPos = "bottom");
+			return;
 		}
+
+		$$invalidate(8, _scrollPos = "middle");
 	}
 
 	function getChildren() {
@@ -12798,89 +12816,74 @@ function instance$t($$self, $$props, $$invalidate) {
 	function header_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			_headerEl = $$value;
-			(($$invalidate(6, _headerEl), $$invalidate(7, _isOpen)), $$invalidate(2, open));
+			$$invalidate(6, _headerEl);
 		});
 	}
 
 	function goa_scrollable_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			_scrollEl = $$value;
-			(($$invalidate(5, _scrollEl), $$invalidate(7, _isOpen)), $$invalidate(2, open));
-		});
-	}
-
-	function div2_binding($$value) {
-		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
-			_contentEl = $$value;
-			(($$invalidate(4, _contentEl), $$invalidate(7, _isOpen)), $$invalidate(2, open));
+			$$invalidate(5, _scrollEl);
 		});
 	}
 
 	function div6_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			_rootEl = $$value;
-			(($$invalidate(8, _rootEl), $$invalidate(7, _isOpen)), $$invalidate(2, open));
+			$$invalidate(4, _rootEl);
 		});
 	}
 
 	$$self.$$set = $$props => {
 		if ('heading' in $$props) $$invalidate(1, heading = $$props.heading);
-		if ('closable' in $$props) $$invalidate(14, closable = $$props.closable);
+		if ('closable' in $$props) $$invalidate(15, closable = $$props.closable);
 		if ('open' in $$props) $$invalidate(2, open = $$props.open);
-		if ('transition' in $$props) $$invalidate(15, transition = $$props.transition);
+		if ('transition' in $$props) $$invalidate(16, transition = $$props.transition);
 		if ('calloutvariant' in $$props) $$invalidate(3, calloutvariant = $$props.calloutvariant);
 		if ('maxwidth' in $$props) $$invalidate(0, maxwidth = $$props.maxwidth);
-		if ('width' in $$props) $$invalidate(16, width = $$props.width);
+		if ('width' in $$props) $$invalidate(17, width = $$props.width);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*closable*/ 16384) {
+		if ($$self.$$.dirty & /*closable*/ 32768) {
+			// ********
 			// Reactive
-			$$invalidate(9, _isClosable = toBoolean(closable));
+			// ********
+			$$invalidate(10, _isClosable = toBoolean(closable));
 		}
 
 		if ($$self.$$.dirty & /*open*/ 4) {
+			// Moving the reactive var into a timeout prevents accessing null stylesheet
+			// reference to allow for creation of the @keyframes for the in:fade and out:fade transitions.
+			// DDIDS-1288
 			setTimeout(() => $$invalidate(7, _isOpen = toBoolean(open)), 1);
 		}
 
-		if ($$self.$$.dirty & /*_isOpen*/ 128) {
-			if (!_isOpen) {
-				// prevent null issues
-				$$invalidate(4, _contentEl = $$invalidate(5, _scrollEl = $$invalidate(8, _rootEl = $$invalidate(6, _headerEl = null))));
-
-				window.removeEventListener('keydown', onInputKeyDown);
-			}
-		}
-
-		if ($$self.$$.dirty & /*_isOpen, _scrollEl, _contentEl*/ 176) {
-			if (_isOpen && _scrollEl && _contentEl) {
+		if ($$self.$$.dirty & /*_isOpen, _scrollEl*/ 160) {
+			// Show the shadow at the top of the content after scrolling down
+			if (_isOpen && _scrollEl) {
 				const hasScroll = _scrollEl.scrollHeight > _scrollEl.offsetHeight;
 
 				if (hasScroll) {
-					_contentEl.classList.add("scroll-top");
+					$$invalidate(8, _scrollPos = "top");
 				}
 			}
 		}
 
-		if ($$self.$$.dirty & /*_isOpen, _contentEl, _headerEl*/ 208) {
-			if (_isOpen && _contentEl) {
-				window.addEventListener('keydown', onInputKeyDown);
-				const children = getChildren();
-
-				if (_headerEl.querySelector("div.modal-title").textContent || _headerEl.querySelector("div.modal-close") || children.length) {
-					_headerEl.classList.add("has-content");
-				}
+		if ($$self.$$.dirty & /*_isOpen, _rootEl, _headerEl*/ 208) {
+			if (_isOpen && _rootEl) {
+				$$invalidate(9, _requiresTopPadding = !!_headerEl.querySelector("div.modal-title").textContent || !!_headerEl.querySelector("div.modal-close") || getChildren().length > 0);
 			}
 		}
 
-		if ($$self.$$.dirty & /*transition*/ 32768) {
-			$$invalidate(11, _transitionTime = transition === "none"
+		if ($$self.$$.dirty & /*transition*/ 65536) {
+			$$invalidate(12, _transitionTime = transition === "none"
 			? 0
 			: transition === "slow" ? 400 : 200);
 		}
 
 		if ($$self.$$.dirty & /*calloutvariant*/ 8) {
-			$$invalidate(10, _iconType = calloutvariant === "emergency"
+			$$invalidate(11, _iconType = calloutvariant === "emergency"
 			? "warning"
 			: calloutvariant === "important"
 				? "alert-circle"
@@ -12897,11 +12900,12 @@ function instance$t($$self, $$props, $$invalidate) {
 		heading,
 		open,
 		calloutvariant,
-		_contentEl,
+		_rootEl,
 		_scrollEl,
 		_headerEl,
 		_isOpen,
-		_rootEl,
+		_scrollPos,
+		_requiresTopPadding,
 		_isClosable,
 		_iconType,
 		_transitionTime,
@@ -12912,7 +12916,6 @@ function instance$t($$self, $$props, $$invalidate) {
 		width,
 		header_binding,
 		goa_scrollable_binding,
-		div2_binding,
 		div6_binding
 	];
 }
@@ -12921,7 +12924,7 @@ class Modal extends SvelteElement {
 	constructor(options) {
 		super();
 		const style = document.createElement('style');
-		style.textContent = `:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}:host *{box-sizing:border-box}.modal{font-family:var(--goa-font-family-sans);position:fixed;inset:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.emergency{background-color:var(--goa-color-emergency-default)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default)}.event{background-color:var(--goa-color-info-default)}.success{background-color:var(--goa-color-success-default)}.callout-bar{flex:0 0 3rem;text-align:center;padding-top:2rem;border-radius:4px 0px 0px 4px}.content{flex:1 1 auto;width:100%;margin:var(--goa-space-xl)}.content header{display:flex;justify-content:space-between}.content header.has-content{margin-bottom:var(--goa-space-l)}@media screen and (max-width: 623px){.content{margin:var(--goa-space-l)}.content header.has-content{margin-bottom:var(--goa-space-m)}.modal-actions ::slotted(*){padding:var(--goa-space-l) 0 0}}@media screen and (min-width: 1024px){.modal-pane{max-width:var(--maxwidth)}}.modal-pane{background-color:#fff;z-index:1001;width:90%;display:flex;box-shadow:var(--goa-shadow-modal);border-radius:4px;border:1px solid var(--goa-color-greyscale-700)}.modal-actions ::slotted(*){padding:var(--goa-space-xl) 0 0}.modal-content{margin:0 -2rem;line-height:1.75rem}.modal-content ::slotted(:last-child){margin-bottom:0 !important}.modal-title{font:var(--goa-typography-heading-m)}.modal-close{padding-left:var(--goa-space-m);margin-top:var(--goa-space-2xs)}.scroll-top{box-shadow:inset 0px -8px 6px -6px rgba(0, 0, 0, 0.1)}.scroll-middle{box-shadow:inset 0px -8px 6px -6px rgba(0, 0, 0, 0.1), inset 0px 8px 6px -6px rgba(0, 0, 0, 0.1)}.scroll-bottom{box-shadow:inset 0px 8px 6px -6px rgba(0, 0, 0, 0.1)}`;
+		style.textContent = `:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}:host *{box-sizing:border-box}.modal{font-family:var(--goa-font-family-sans);position:fixed;inset:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.emergency{background-color:var(--goa-color-emergency-default)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default)}.event{background-color:var(--goa-color-info-default)}.success{background-color:var(--goa-color-success-default)}.callout-bar{flex:0 0 3rem;text-align:center;padding-top:2rem;border-radius:4px 0px 0px 4px}.content{flex:1 1 auto;width:100%;margin:var(--goa-space-xl)}.content header{display:flex;justify-content:space-between}header.has-content{margin-bottom:var(--goa-space-l)}@media screen and (max-width: 623px){.content{margin:var(--goa-space-l)}header.has-content{margin-bottom:var(--goa-space-m)}.modal-actions ::slotted(*){padding:var(--goa-space-l) 0 0}}@media screen and (min-width: 1024px){.modal-pane{max-width:var(--maxwidth)}}.modal-pane{background-color:#fff;z-index:1001;width:90%;display:flex;box-shadow:var(--goa-shadow-modal);border-radius:4px;border:1px solid var(--goa-color-greyscale-700)}.modal-actions ::slotted(*){padding:var(--goa-space-xl) 0 0}.modal-content{margin:0 -2rem;line-height:1.75rem}.modal-content ::slotted(:last-child){margin-bottom:0 !important}.modal-title{font:var(--goa-typography-heading-m)}.modal-close{padding-left:var(--goa-space-m);margin-top:var(--goa-space-2xs)}.scroll-top{box-shadow:inset 0px -8px 6px -6px rgba(0, 0, 0, 0.1)}.scroll-middle{box-shadow:inset 0px -8px 6px -6px rgba(0, 0, 0, 0.1), inset 0px 8px 6px -6px rgba(0, 0, 0, 0.1)}.scroll-bottom{box-shadow:inset 0px 8px 6px -6px rgba(0, 0, 0, 0.1)}`;
 		this.shadowRoot.appendChild(style);
 
 		init(
@@ -12936,12 +12939,12 @@ class Modal extends SvelteElement {
 			safe_not_equal,
 			{
 				heading: 1,
-				closable: 14,
+				closable: 15,
 				open: 2,
-				transition: 15,
+				transition: 16,
 				calloutvariant: 3,
 				maxwidth: 0,
-				width: 16
+				width: 17
 			},
 			null
 		);
@@ -12980,7 +12983,7 @@ class Modal extends SvelteElement {
 	}
 
 	get closable() {
-		return this.$$.ctx[14];
+		return this.$$.ctx[15];
 	}
 
 	set closable(closable) {
@@ -12998,7 +13001,7 @@ class Modal extends SvelteElement {
 	}
 
 	get transition() {
-		return this.$$.ctx[15];
+		return this.$$.ctx[16];
 	}
 
 	set transition(transition) {
@@ -13025,7 +13028,7 @@ class Modal extends SvelteElement {
 	}
 
 	get width() {
-		return this.$$.ctx[16];
+		return this.$$.ctx[17];
 	}
 
 	set width(width) {
@@ -14028,7 +14031,8 @@ function create_fragment$s(ctx) {
 			attr(div1, "data-testid", /*testid*/ ctx[0]);
 
 			attr(div1, "style", div1_style_value = `
-    ${/*_relative*/ ctx[18] && "position: relative;"}
+    ${/*width*/ ctx[2] && `width: ${/*width*/ ctx[2]};`}
+    ${/*_relative*/ ctx[18] && "position: relative;" || ""}
     ${calculateMargin(/*mt*/ ctx[3], /*mr*/ ctx[4], /*mb*/ ctx[5], /*ml*/ ctx[6])}
     ${cssVar("--offset-top", /*voffset*/ ctx[8])}
     ${cssVar("--offset-bottom", /*voffset*/ ctx[8])}
@@ -14036,8 +14040,7 @@ function create_fragment$s(ctx) {
     ${cssVar("--offset-right", /*hoffset*/ ctx[9])}
     ${cssVar("--focus-border-width", /*focusborderwidth*/ ctx[10])}
     ${cssVar("--border-radius", /*borderradius*/ ctx[11])}
-    ${cssVar("width", "100%")}
-  `);
+`);
 		},
 		m(target, anchor) {
 			insert(target, div1, anchor);
@@ -14075,8 +14078,9 @@ function create_fragment$s(ctx) {
 				attr(div1, "data-testid", /*testid*/ ctx[0]);
 			}
 
-			if (dirty[0] & /*_relative, mt, mr, mb, ml, voffset, hoffset, focusborderwidth, borderradius*/ 266104 && div1_style_value !== (div1_style_value = `
-    ${/*_relative*/ ctx[18] && "position: relative;"}
+			if (dirty[0] & /*width, _relative, mt, mr, mb, ml, voffset, hoffset, focusborderwidth, borderradius*/ 266108 && div1_style_value !== (div1_style_value = `
+    ${/*width*/ ctx[2] && `width: ${/*width*/ ctx[2]};`}
+    ${/*_relative*/ ctx[18] && "position: relative;" || ""}
     ${calculateMargin(/*mt*/ ctx[3], /*mr*/ ctx[4], /*mb*/ ctx[5], /*ml*/ ctx[6])}
     ${cssVar("--offset-top", /*voffset*/ ctx[8])}
     ${cssVar("--offset-bottom", /*voffset*/ ctx[8])}
@@ -14084,8 +14088,7 @@ function create_fragment$s(ctx) {
     ${cssVar("--offset-right", /*hoffset*/ ctx[9])}
     ${cssVar("--focus-border-width", /*focusborderwidth*/ ctx[10])}
     ${cssVar("--border-radius", /*borderradius*/ ctx[11])}
-    ${cssVar("width", "100%")}
-  `)) {
+`)) {
 				attr(div1, "style", div1_style_value);
 			}
 		},
@@ -15025,8 +15028,8 @@ class RadioGroup extends SvelteElement {
 		super();
 		const style = document.createElement('style');
 
-		style.textContent = `:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.goa-radio-group--horizontal{display:flex;flex-direction:row}.goa-radio-group--vertical{display:inline-block}label.goa-radio{--goa-radio-outline-width:3px;--goa-radio-diameter:1.5rem;--goa-radio-border-width:1px;--goa-radio-border-width--checked:7px;display:inline-block;box-sizing:border-box;display:flex}.goa-radio-container{padding-bottom:1rem}.goa-radio:hover{cursor:pointer}.goa-radio *,.goa-radio *:before,.goa-radio *:after{box-sizing:border-box}.goa-radio input[type="radio"]{width:0;height:0;margin:0;opacity:0}.goa-radio-label{padding:0 0.5rem;font-weight:var(--goa-font-weight-regular)}.goa-radio-description{font:var(--goa-typography-body-xs);margin-left:var(--goa-space-xl);margin-top:var(--goa-space-2xs)}.goa-radio-icon{display:inline-block;height:var(--goa-radio-diameter);width:var(--goa-radio-diameter);border-radius:50%;background-color:#fff;transition:box-shadow 100ms ease-in-out;flex:0 0 auto;margin-top:var(--font-valign-fix)}.goa-radio:focus>input:not(:disabled)~.goa-radio-icon{box-shadow:0 0 0 var(--goa-radio-outline-width) var(--goa-color-interactive-focus)}.goa-radio--disabled .goa-radio-label{opacity:0.4}.goa-radio--disabled:hover{cursor:default}input[type="radio"]:not(:checked)~.goa-radio-icon{border:var(--goa-radio-border-width) solid var(--goa-color-greyscale-700)}input[type="radio"]:hover~.goa-radio-icon{border:1px solid var(--goa-color-interactive-hover);box-shadow:0 0 0 1px var(--goa-color-interactive-hover)}input[type="radio"]:checked:hover~.goa-radio-icon{border:7px solid var(--goa-color-interactive-hover);box-shadow:0 0 0 1px var(--goa-color-interactive-hover)}input[type="radio"]:focus~.goa-radio-icon,input[type="radio"]:hover:active~.goa-radio-icon,input[type="radio"]:hover:focus~.goa-radio-icon,input[type="radio"]:active~.goa-radio-icon{box-shadow:0 0 0 var(--goa-radio-outline-width) var(--goa-color-interactive-focus)}input[type="radio"]:checked~.goa-radio-icon{border:var(--goa-radio-border-width--checked) solid var(--goa-color-interactive-default)}input[type="radio"]:disabled~.goa-radio-icon{border:var(--goa-radio-border-width) solid var(--goa-color-greyscale-700);box-shadow:none;opacity:40%}input[type="radio"]:disabled:checked~.goa-radio-icon{border:var(--goa-radio-border-width--checked) solid
-      var(--goa-color-interactive-hover);box-shadow:none}.goa-radio--error input[type="radio"]:checked~.goa-radio-icon{border:7px solid var(--goa-color-emergency-default)}.goa-radio--error input[type="radio"]:hover~.goa-radio-icon{box-shadow:0 0 0 1px var(--goa-color-emergency-default)}.goa-radio--error input[type="radio"]:disabled:hover~.goa-radio-icon{box-shadow:none}.goa-radio--error input[type="radio"]:not(:checked)~.goa-radio-icon{border:2px solid var(--goa-color-emergency-default)}`;
+		style.textContent = `:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.goa-radio-group--horizontal{display:flex;flex-direction:row}.goa-radio-group--vertical{display:inline-block}label.goa-radio{--goa-radio-outline-width:3px;--goa-radio-diameter:1.5rem;--goa-radio-border-width:1px;--goa-radio-border-width--checked:7px;display:inline-block;box-sizing:border-box;display:flex}.goa-radio-container{padding-bottom:1rem}.goa-radio:hover{cursor:pointer}.goa-radio *,.goa-radio *:before,.goa-radio *:after{box-sizing:border-box}.goa-radio input[type="radio"]{width:0;height:0;margin:0;opacity:0}.goa-radio-label{padding:0 0.5rem;font-weight:var(--goa-font-weight-regular)}.goa-radio-description{font:var(--goa-typography-body-xs);margin-left:var(--goa-space-xl);margin-top:var(--goa-space-2xs)}.goa-radio-icon{display:inline-block;height:var(--goa-radio-diameter);width:var(--goa-radio-diameter);border-radius:50%;background-color:#fff;transition:box-shadow 100ms ease-in-out;flex:0 0 auto;margin-top:var(--font-valign-fix)}.goa-radio:focus>input:not(:disabled)~.goa-radio-icon{box-shadow:0 0 0 var(--goa-radio-outline-width) var(--goa-color-interactive-focus)}.goa-radio--disabled .goa-radio-label{opacity:0.4}.goa-radio--disabled:hover{cursor:default}input[type="radio"]:not(:checked)~.goa-radio-icon{border:var(--goa-radio-border-width) solid var(--goa-color-greyscale-700)}input[type="radio"]:hover~.goa-radio-icon{border:1px solid var(--goa-color-interactive-hover);box-shadow:0 0 0 1px var(--goa-color-interactive-hover)}input[type="radio"]:checked:hover~.goa-radio-icon{border:7px solid var(--goa-color-interactive-hover);box-shadow:0 0 0 1px var(--goa-color-interactive-hover)}input[type="radio"]:focus~.goa-radio-icon,input[type="radio"]:hover:active~.goa-radio-icon,input[type="radio"]:hover:focus~.goa-radio-icon,input[type="radio"]:active~.goa-radio-icon{box-shadow:0 0 0 var(--goa-radio-outline-width) var(--goa-color-interactive-focus)}input[type="radio"]:checked~.goa-radio-icon{border:var(--goa-radio-border-width--checked) solid var(--goa-color-interactive-default)}input[type="radio"]:disabled~.goa-radio-icon,input[type="radio"]:disabled:focus~.goa-radio-icon,input[type="radio"]:disabled:active~.goa-radio-icon{border:var(--goa-radio-border-width) solid var(--goa-color-greyscale-700);box-shadow:none;opacity:40%}input[type="radio"]:disabled:checked~.goa-radio-icon,input[type="radio"]:disabled:checked:focus~.goa-radio-icon,input[type="radio"]:disabled:checked:active~.goa-radio-icon{border:var(--goa-radio-border-width--checked) solid
+      var(--goa-color-interactive-hover);box-shadow:none}.goa-radio--error input[type="radio"]:checked~.goa-radio-icon,.goa-radio--error input[type="radio"]:disabled:checked~.goa-radio-icon{border:7px solid var(--goa-color-emergency-default)}.goa-radio--error input[type="radio"]:hover~.goa-radio-icon{box-shadow:0 0 0 1px var(--goa-color-emergency-default)}.goa-radio--error input[type="radio"]:hover:active~.goa-radio-icon,.goa-radio--error input[type="radio"]:hover:focus~.goa-radio-icon{box-shadow:0 0 0 var(--goa-radio-outline-width) var(--goa-color-interactive-focus)}.goa-radio--error input[type="radio"]:disabled:hover~.goa-radio-icon{box-shadow:none}.goa-radio--error input[type="radio"]:not(:checked)~.goa-radio-icon{border:2px solid var(--goa-color-emergency-default)}`;
 
 		this.shadowRoot.appendChild(style);
 
@@ -17296,7 +17299,7 @@ function create_if_block_1$5(ctx) {
 	};
 }
 
-// (86:33) 
+// (84:33) 
 function create_if_block_3$5(ctx) {
 	let t0_value = /*maxcount*/ ctx[8] - /*count*/ ctx[15] + "";
 	let t0;
@@ -17331,7 +17334,7 @@ function create_if_block_3$5(ctx) {
 	};
 }
 
-// (84:6) {#if count > maxcount}
+// (82:6) {#if count > maxcount}
 function create_if_block_2$5(ctx) {
 	let t0_value = /*count*/ ctx[15] - /*maxcount*/ ctx[8] + "";
 	let t0;
@@ -17366,7 +17369,7 @@ function create_if_block_2$5(ctx) {
 	};
 }
 
-// (92:2) {#if showCount && count > 0 && !isDisabled}
+// (90:2) {#if countby && maxcount < 0 && count > 0 && !isDisabled}
 function create_if_block$9(ctx) {
 	let div;
 	let t0;
@@ -17408,7 +17411,7 @@ function create_fragment$k(ctx) {
 	let mounted;
 	let dispose;
 	let if_block0 = /*maxcount*/ ctx[8] > 0 && !/*isDisabled*/ ctx[14] && create_if_block_1$5(ctx);
-	let if_block1 = /*showCount*/ ctx[16] && /*count*/ ctx[15] > 0 && !/*isDisabled*/ ctx[14] && create_if_block$9(ctx);
+	let if_block1 = /*countby*/ ctx[7] && /*maxcount*/ ctx[8] < 0 && /*count*/ ctx[15] > 0 && !/*isDisabled*/ ctx[14] && create_if_block$9(ctx);
 
 	return {
 		c() {
@@ -17424,7 +17427,7 @@ function create_fragment$k(ctx) {
 			attr(textarea, "rows", /*rows*/ ctx[3]);
 			attr(textarea, "aria-label", textarea_aria_label_value = /*arialabel*/ ctx[6] || /*name*/ ctx[1]);
 			textarea.disabled = /*isDisabled*/ ctx[14];
-			textarea.readOnly = /*isReadonly*/ ctx[17];
+			textarea.readOnly = /*isReadonly*/ ctx[16];
 			attr(textarea, "data-testid", /*testid*/ ctx[4]);
 			attr(div, "data-testid", "root");
 			attr(div, "class", "root");
@@ -17432,18 +17435,16 @@ function create_fragment$k(ctx) {
 			attr(div, "style", div_style_value = `
     ${calculateMargin(/*mt*/ ctx[9], /*mr*/ ctx[10], /*mb*/ ctx[11], /*ml*/ ctx[12])};
     --width: ${/*width*/ ctx[5]};
-    --char-count-padding: ${/*showCount*/ ctx[16] || /*maxcount*/ ctx[8] > 0
-			? "2rem"
-			: "0"};
+    --char-count-padding: ${/*countby*/ ctx[7] ? "2rem" : "0"};
   `);
 
-			toggle_class(div, "error", /*isError*/ ctx[18] || /*maxcount*/ ctx[8] > 0 && /*count*/ ctx[15] > /*maxcount*/ ctx[8]);
+			toggle_class(div, "error", /*isError*/ ctx[17] || /*maxcount*/ ctx[8] > 0 && /*count*/ ctx[15] > /*maxcount*/ ctx[8]);
 			toggle_class(div, "disabled", /*isDisabled*/ ctx[14]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
 			append(div, textarea);
-			/*textarea_binding*/ ctx[25](textarea);
+			/*textarea_binding*/ ctx[23](textarea);
 			set_input_value(textarea, /*value*/ ctx[0]);
 			append(div, t0);
 			if (if_block0) if_block0.m(div, null);
@@ -17452,9 +17453,9 @@ function create_fragment$k(ctx) {
 
 			if (!mounted) {
 				dispose = [
-					listen(textarea, "input", /*textarea_input_handler*/ ctx[26]),
-					listen(textarea, "keyup", /*onKeyPress*/ ctx[20]),
-					listen(textarea, "change", /*onChange*/ ctx[19])
+					listen(textarea, "input", /*textarea_input_handler*/ ctx[24]),
+					listen(textarea, "keyup", /*onKeyPress*/ ctx[19]),
+					listen(textarea, "change", /*onChange*/ ctx[18])
 				];
 
 				mounted = true;
@@ -17481,8 +17482,8 @@ function create_fragment$k(ctx) {
 				textarea.disabled = /*isDisabled*/ ctx[14];
 			}
 
-			if (dirty & /*isReadonly*/ 131072) {
-				textarea.readOnly = /*isReadonly*/ ctx[17];
+			if (dirty & /*isReadonly*/ 65536) {
+				textarea.readOnly = /*isReadonly*/ ctx[16];
 			}
 
 			if (dirty & /*testid*/ 16) {
@@ -17506,7 +17507,7 @@ function create_fragment$k(ctx) {
 				if_block0 = null;
 			}
 
-			if (/*showCount*/ ctx[16] && /*count*/ ctx[15] > 0 && !/*isDisabled*/ ctx[14]) {
+			if (/*countby*/ ctx[7] && /*maxcount*/ ctx[8] < 0 && /*count*/ ctx[15] > 0 && !/*isDisabled*/ ctx[14]) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
@@ -17519,18 +17520,16 @@ function create_fragment$k(ctx) {
 				if_block1 = null;
 			}
 
-			if (dirty & /*mt, mr, mb, ml, width, showCount, maxcount*/ 73504 && div_style_value !== (div_style_value = `
+			if (dirty & /*mt, mr, mb, ml, width, countby*/ 7840 && div_style_value !== (div_style_value = `
     ${calculateMargin(/*mt*/ ctx[9], /*mr*/ ctx[10], /*mb*/ ctx[11], /*ml*/ ctx[12])};
     --width: ${/*width*/ ctx[5]};
-    --char-count-padding: ${/*showCount*/ ctx[16] || /*maxcount*/ ctx[8] > 0
-			? "2rem"
-			: "0"};
+    --char-count-padding: ${/*countby*/ ctx[7] ? "2rem" : "0"};
   `)) {
 				attr(div, "style", div_style_value);
 			}
 
-			if (dirty & /*isError, maxcount, count*/ 295168) {
-				toggle_class(div, "error", /*isError*/ ctx[18] || /*maxcount*/ ctx[8] > 0 && /*count*/ ctx[15] > /*maxcount*/ ctx[8]);
+			if (dirty & /*isError, maxcount, count*/ 164096) {
+				toggle_class(div, "error", /*isError*/ ctx[17] || /*maxcount*/ ctx[8] > 0 && /*count*/ ctx[15] > /*maxcount*/ ctx[8]);
 			}
 
 			if (dirty & /*isDisabled*/ 16384) {
@@ -17541,7 +17540,7 @@ function create_fragment$k(ctx) {
 		o: noop,
 		d(detaching) {
 			if (detaching) detach(div);
-			/*textarea_binding*/ ctx[25](null);
+			/*textarea_binding*/ ctx[23](null);
 			if (if_block0) if_block0.d();
 			if (if_block1) if_block1.d();
 			mounted = false;
@@ -17554,7 +17553,6 @@ function instance$h($$self, $$props, $$invalidate) {
 	let isError;
 	let isDisabled;
 	let isReadonly;
-	let showCount;
 	let count;
 	let { name } = $$props;
 	let { value = "" } = $$props;
@@ -17567,7 +17565,6 @@ function instance$h($$self, $$props, $$invalidate) {
 	let { disabled = "false" } = $$props;
 	let { arialabel = "" } = $$props;
 	let { countby } = $$props;
-	let { showcount = "false" } = $$props;
 	let { maxcount = -1 } = $$props;
 	let { mt = null } = $$props;
 	let { mr = null } = $$props;
@@ -17618,12 +17615,11 @@ function instance$h($$self, $$props, $$invalidate) {
 		if ('rows' in $$props) $$invalidate(3, rows = $$props.rows);
 		if ('testid' in $$props) $$invalidate(4, testid = $$props.testid);
 		if ('width' in $$props) $$invalidate(5, width = $$props.width);
-		if ('error' in $$props) $$invalidate(21, error = $$props.error);
-		if ('readonly' in $$props) $$invalidate(22, readonly = $$props.readonly);
-		if ('disabled' in $$props) $$invalidate(23, disabled = $$props.disabled);
+		if ('error' in $$props) $$invalidate(20, error = $$props.error);
+		if ('readonly' in $$props) $$invalidate(21, readonly = $$props.readonly);
+		if ('disabled' in $$props) $$invalidate(22, disabled = $$props.disabled);
 		if ('arialabel' in $$props) $$invalidate(6, arialabel = $$props.arialabel);
 		if ('countby' in $$props) $$invalidate(7, countby = $$props.countby);
-		if ('showcount' in $$props) $$invalidate(24, showcount = $$props.showcount);
 		if ('maxcount' in $$props) $$invalidate(8, maxcount = $$props.maxcount);
 		if ('mt' in $$props) $$invalidate(9, mt = $$props.mt);
 		if ('mr' in $$props) $$invalidate(10, mr = $$props.mr);
@@ -17632,21 +17628,17 @@ function instance$h($$self, $$props, $$invalidate) {
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*error*/ 2097152) {
+		if ($$self.$$.dirty & /*error*/ 1048576) {
 			// reactive
-			$$invalidate(18, isError = toBoolean(error));
+			$$invalidate(17, isError = toBoolean(error));
 		}
 
-		if ($$self.$$.dirty & /*disabled*/ 8388608) {
+		if ($$self.$$.dirty & /*disabled*/ 4194304) {
 			$$invalidate(14, isDisabled = toBoolean(disabled));
 		}
 
-		if ($$self.$$.dirty & /*readonly*/ 4194304) {
-			$$invalidate(17, isReadonly = toBoolean(readonly));
-		}
-
-		if ($$self.$$.dirty & /*showcount*/ 16777216) {
-			$$invalidate(16, showCount = toBoolean(showcount));
+		if ($$self.$$.dirty & /*readonly*/ 2097152) {
+			$$invalidate(16, isReadonly = toBoolean(readonly));
 		}
 
 		if ($$self.$$.dirty & /*countby, value*/ 129) {
@@ -17673,7 +17665,6 @@ function instance$h($$self, $$props, $$invalidate) {
 		_textareaEl,
 		isDisabled,
 		count,
-		showCount,
 		isReadonly,
 		isError,
 		onChange,
@@ -17681,7 +17672,6 @@ function instance$h($$self, $$props, $$invalidate) {
 		error,
 		readonly,
 		disabled,
-		showcount,
 		textarea_binding,
 		textarea_input_handler
 	];
@@ -17692,7 +17682,7 @@ class TextArea extends SvelteElement {
 		super();
 		const style = document.createElement('style');
 
-		style.textContent = `:host{--textarea-padding-vertical:0.625rem;--textarea-padding-horizontal:var(--goa-space-s);box-sizing:border-box;font-family:var(--goa-font-family-sans)}.root{position:relative;width:100%;padding-bottom:var(--char-count-padding);border:var(--goa-border-width-s) solid var(--goa-color-greyscale-700);border-radius:3px}.root:has(textarea:disabled){background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);cursor:default;box-shadow:none}@media screen and (max-width: 623px){@media not (max-color:2147477350){.root{max-width:var(--width)}}}@media not  screen and (max-width: 623px){@media not (color:2147477350){.root{max-width:var(--width)}}}textarea{display:block;width:100%;box-sizing:border-box;outline:none;border:none;color:var(--goa-color-greyscale-black, #ccc);padding:var(--textarea-padding-vertical) var(--textarea-padding-horizontal);font-size:var(--goa-font-size-4);font-family:var(--goa-font-family-sans);min-width:100%;resize:vertical}@media screen and (max-width: 623px){@media not (max-color:2147477350){}}@media not  screen and (max-width: 623px){@media not (color:2147477350){}}.root:hover{box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}.root:focus-within{box-shadow:0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus)}.counter-error{color:var(--goa-color-interactive-error)
+		style.textContent = `:host{--textarea-padding-vertical:0.625rem;--textarea-padding-horizontal:var(--goa-space-s);box-sizing:border-box;font-family:var(--goa-font-family-sans)}.root{position:relative;width:100%;padding-bottom:var(--char-count-padding);border:var(--goa-border-width-s) solid var(--goa-color-greyscale-700);border-radius:3px}.root:has(textarea:disabled){background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);cursor:default;box-shadow:none}@media screen and (max-width: 623px){@media not (max-color:2147477350){.root{max-width:var(--width)}}}@media not  screen and (max-width: 623px){@media not (color:2147477350){.root{max-width:var(--width)}}}textarea{display:block;width:100%;box-sizing:border-box;outline:none;border:none;border-radius:3px;color:var(--goa-color-greyscale-black, #ccc);padding:var(--textarea-padding-vertical) var(--textarea-padding-horizontal);font-size:var(--goa-font-size-4);font-family:var(--goa-font-family-sans);min-width:100%;resize:vertical}@media screen and (max-width: 623px){@media not (max-color:2147477350){}}@media not  screen and (max-width: 623px){@media not (color:2147477350){}}.root:hover{box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}.root:focus-within{box-shadow:0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus)}.counter-error{color:var(--goa-color-interactive-error)
   }.counter{position:absolute;right:0.75rem;font-size:var(--goa-font-size-2)}textarea{resize:none;scroll-behavior:smooth;max-height:calc(100vh * var(--max-height, 100) / 100)}textarea::-webkit-scrollbar{width:6px}textarea::-webkit-scrollbar-track{background:#f1f1f1}textarea::-webkit-scrollbar-thumb{background:#888}textarea::-webkit-scrollbar-thumb:hover{background:#555}.error{border-color:var(--goa-color-interactive-error);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-error)}.error:hover{box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-error)}.error:active,.error:focus{box-shadow:0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus)}`;
 
 		this.shadowRoot.appendChild(style);
@@ -17714,12 +17704,11 @@ class TextArea extends SvelteElement {
 				rows: 3,
 				testid: 4,
 				width: 5,
-				error: 21,
-				readonly: 22,
-				disabled: 23,
+				error: 20,
+				readonly: 21,
+				disabled: 22,
 				arialabel: 6,
 				countby: 7,
-				showcount: 24,
 				maxcount: 8,
 				mt: 9,
 				mr: 10,
@@ -17754,7 +17743,6 @@ class TextArea extends SvelteElement {
 			"disabled",
 			"arialabel",
 			"countby",
-			"showcount",
 			"maxcount",
 			"mt",
 			"mr",
@@ -17818,7 +17806,7 @@ class TextArea extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[21];
+		return this.$$.ctx[20];
 	}
 
 	set error(error) {
@@ -17827,7 +17815,7 @@ class TextArea extends SvelteElement {
 	}
 
 	get readonly() {
-		return this.$$.ctx[22];
+		return this.$$.ctx[21];
 	}
 
 	set readonly(readonly) {
@@ -17836,7 +17824,7 @@ class TextArea extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[23];
+		return this.$$.ctx[22];
 	}
 
 	set disabled(disabled) {
@@ -17862,15 +17850,6 @@ class TextArea extends SvelteElement {
 		flush();
 	}
 
-	get showcount() {
-		return this.$$.ctx[24];
-	}
-
-	set showcount(showcount) {
-		this.$$set({ showcount });
-		flush();
-	}
-
 	get maxcount() {
 		return this.$$.ctx[8];
 	}
@@ -27376,6 +27355,11 @@ function instance($$self, $$props, $$invalidate) {
 
 	function onKeyDown(e) {
 		let isHandled = false;
+		const isTabButtonFocused = e.target && _tabs.contains(e.target);
+
+		if (!isTabButtonFocused) {
+			return;
+		}
 
 		switch (e.key) {
 			case 'ArrowUp':