@abgov/web-components 1.12.2 → 1.13.0

package/web-components.es.js

@@ -1377,7 +1377,7 @@ customElements.define("goa-accordion", Accordion);
 
 const { window: window_1$2 } = globals;
 
-function create_else_block$c(ctx) {
+function create_else_block$d(ctx) {
 	let div;
 	let img0;
 	let img0_src_value;
@@ -1717,7 +1717,7 @@ function create_if_block_1$h(ctx) {
 }
 
 // (154:4) {#if _showMenu && _mobile || _desktop}
-function create_if_block$s(ctx) {
+function create_if_block$t(ctx) {
 	let div;
 
 	return {
@@ -1753,7 +1753,7 @@ function create_fragment$X(ctx) {
 
 	function select_block_type(ctx, dirty) {
 		if (/*url*/ ctx[1]) return create_if_block_5$1;
-		return create_else_block$c;
+		return create_else_block$d;
 	}
 
 	let current_block_type = select_block_type(ctx);
@@ -1761,7 +1761,7 @@ function create_fragment$X(ctx) {
 	let if_block1 = /*_showToggleMenu*/ ctx[7] && /*_mobile*/ ctx[10] && create_if_block_4$4(ctx);
 	let if_block2 = /*_showToggleMenu*/ ctx[7] && /*_tablet*/ ctx[9] && create_if_block_2$c(ctx);
 	let if_block3 = !/*_showMenu*/ ctx[8] && (/*_mobile*/ ctx[10] || /*_tablet*/ ctx[9]) && create_if_block_1$h(ctx);
-	let if_block4 = (/*_showMenu*/ ctx[8] && /*_mobile*/ ctx[10] || /*_desktop*/ ctx[5]) && create_if_block$s(ctx);
+	let if_block4 = (/*_showMenu*/ ctx[8] && /*_mobile*/ ctx[10] || /*_desktop*/ ctx[5]) && create_if_block$t(ctx);
 
 	return {
 		c() {
@@ -1857,7 +1857,7 @@ function create_fragment$X(ctx) {
 				if (if_block4) {
 					if_block4.p(ctx, dirty);
 				} else {
-					if_block4 = create_if_block$s(ctx);
+					if_block4 = create_if_block$t(ctx);
 					if_block4.c();
 					if_block4.m(div0, null);
 				}
@@ -2134,7 +2134,7 @@ customElements.define("goa-app-header", AppHeader);
 
 /* libs/web-components/src/components/badge/Badge.svelte generated by Svelte v3.59.2 */
 
-function create_else_block$b(ctx) {
+function create_else_block$c(ctx) {
 	let div;
 
 	return {
@@ -2190,7 +2190,7 @@ function create_if_block_1$g(ctx) {
 }
 
 // (60:2) {#if content}
-function create_if_block$r(ctx) {
+function create_if_block$s(ctx) {
 	let div;
 	let t;
 
@@ -2221,12 +2221,12 @@ function create_fragment$W(ctx) {
 
 	function select_block_type(ctx, dirty) {
 		if (/*showIcon*/ ctx[8]) return create_if_block_1$g;
-		return create_else_block$b;
+		return create_else_block$c;
 	}
 
 	let current_block_type = select_block_type(ctx);
 	let if_block0 = current_block_type(ctx);
-	let if_block1 = /*content*/ ctx[2] && create_if_block$r(ctx);
+	let if_block1 = /*content*/ ctx[2] && create_if_block$s(ctx);
 
 	return {
 		c() {
@@ -2264,7 +2264,7 @@ function create_fragment$W(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block$r(ctx);
+					if_block1 = create_if_block$s(ctx);
 					if_block1.c();
 					if_block1.m(div, null);
 				}
@@ -2686,7 +2686,7 @@ customElements.define("goa-block", Block);
 
 /* libs/web-components/src/components/button/Button.svelte generated by Svelte v3.59.2 */
 
-function create_else_block$a(ctx) {
+function create_else_block$b(ctx) {
 	let t0;
 	let span;
 	let t1;
@@ -2752,7 +2752,7 @@ function create_else_block$a(ctx) {
 }
 
 // (46:2) {#if type === "start"}
-function create_if_block$q(ctx) {
+function create_if_block$r(ctx) {
 	let span;
 	let t;
 	let goa_icon;
@@ -2848,8 +2848,8 @@ function create_fragment$U(ctx) {
 	let dispose;
 
 	function select_block_type(ctx, dirty) {
-		if (/*type*/ ctx[0] === "start") return create_if_block$q;
-		return create_else_block$a;
+		if (/*type*/ ctx[0] === "start") return create_if_block$r;
+		return create_else_block$b;
 	}
 
 	let current_block_type = select_block_type(ctx);
@@ -3355,7 +3355,7 @@ customElements.define("goa-button-group", ButtonGroup);
 
 /* libs/web-components/src/components/callout/Callout.svelte generated by Svelte v3.59.2 */
 
-function create_if_block$p(ctx) {
+function create_if_block$q(ctx) {
 	let h3;
 	let t;
 
@@ -3396,7 +3396,7 @@ function create_fragment$S(ctx) {
 	let mounted;
 	let dispose;
 	add_render_callback(/*onwindowresize*/ ctx[12]);
-	let if_block = /*heading*/ ctx[5] && create_if_block$p(ctx);
+	let if_block = /*heading*/ ctx[5] && create_if_block$q(ctx);
 
 	return {
 		c() {
@@ -3455,7 +3455,7 @@ function create_fragment$S(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$p(ctx);
+					if_block = create_if_block$q(ctx);
 					if_block.c();
 					if_block.m(span1, t1);
 				}
@@ -4162,7 +4162,7 @@ function create_if_block_1$e(ctx) {
 }
 
 // (68:4) {#if isIndeterminate}
-function create_if_block$o(ctx) {
+function create_if_block$p(ctx) {
 	let svg;
 	let rect;
 
@@ -4203,7 +4203,7 @@ function create_fragment$M(ctx) {
 	let dispose;
 
 	function select_block_type(ctx, dirty) {
-		if (/*isIndeterminate*/ ctx[10]) return create_if_block$o;
+		if (/*isIndeterminate*/ ctx[10]) return create_if_block$p;
 		if (/*isChecked*/ ctx[9]) return create_if_block_1$e;
 	}
 
@@ -4633,7 +4633,7 @@ function create_if_block_1$d(ctx) {
 }
 
 // (54:2) {#if _deletable}
-function create_if_block$n(ctx) {
+function create_if_block$o(ctx) {
 	let goa_icon;
 	let goa_icon_fillcolor_value;
 	let goa_icon_opacity_value;
@@ -4686,7 +4686,7 @@ function create_fragment$L(ctx) {
 	let mounted;
 	let dispose;
 	let if_block0 = /*leadingicon*/ ctx[4] && create_if_block_1$d(ctx);
-	let if_block1 = /*_deletable*/ ctx[11] && create_if_block$n(ctx);
+	let if_block1 = /*_deletable*/ ctx[11] && create_if_block$o(ctx);
 
 	return {
 		c() {
@@ -4749,7 +4749,7 @@ function create_fragment$L(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block$n(ctx);
+					if_block1 = create_if_block$o(ctx);
 					if_block1.c();
 					if_block1.m(div1, null);
 				}
@@ -5117,7 +5117,7 @@ function noscroll(_node, opts) {
 
 /* libs/web-components/src/components/circular-progress/CircularProgress.svelte generated by Svelte v3.59.2 */
 
-function create_if_block$m(ctx) {
+function create_if_block$n(ctx) {
 	let current_block_type_index;
 	let if_block;
 	let if_block_anchor;
@@ -5403,7 +5403,7 @@ function create_if_block_2$a(ctx) {
 function create_fragment$K(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*isVisible*/ ctx[5] && create_if_block$m(ctx);
+	let if_block = /*isVisible*/ ctx[5] && create_if_block$n(ctx);
 
 	return {
 		c() {
@@ -5425,7 +5425,7 @@ function create_fragment$K(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$m(ctx);
+					if_block = create_if_block$n(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -6228,19 +6228,19 @@ customElements.define("goa-divider", Divider);
 
 function get_each_context_1(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[48] = list[i];
-	child_ctx[52] = i;
+	child_ctx[49] = list[i];
+	child_ctx[53] = i;
 	return child_ctx;
 }
 
 function get_each_context$7(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[48] = list[i];
+	child_ctx[49] = list[i];
 	return child_ctx;
 }
 
-// (259:2) {:else}
-function create_else_block$9(ctx) {
+// (257:2) {:else}
+function create_else_block$a(ctx) {
 	let slot;
 	let t0;
 	let goa_popover;
@@ -6255,8 +6255,8 @@ function create_else_block$9(ctx) {
 	let goa_popover_width_value;
 	let mounted;
 	let dispose;
-	let each_value_1 = /*_options*/ ctx[12];
-	const get_key = ctx => /*index*/ ctx[52];
+	let each_value_1 = /*_options*/ ctx[13];
+	const get_key = ctx => /*index*/ ctx[53];
 
 	for (let i = 0; i < each_value_1.length; i += 1) {
 		let child_ctx = get_each_context_1(ctx, each_value_1, i);
@@ -6283,19 +6283,19 @@ function create_else_block$9(ctx) {
 			set_custom_element_data(goa_input, "leadingicon", /*leadingicon*/ ctx[2]);
 			set_custom_element_data(goa_input, "placeholder", /*placeholder*/ ctx[4]);
 			set_custom_element_data(goa_input, "aria-controls", "menu");
-			set_custom_element_data(goa_input, "aria-expanded", /*_isMenuVisible*/ ctx[17]);
+			set_custom_element_data(goa_input, "aria-expanded", /*_isMenuVisible*/ ctx[18]);
 			set_custom_element_data(goa_input, "arialabel", goa_input_arialabel_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0]);
 			set_custom_element_data(goa_input, "data-testid", goa_input_data_testid_value = `${/*name*/ ctx[0]}-dropdown-input`);
 			set_custom_element_data(goa_input, "readonly", "");
 			set_custom_element_data(goa_input, "role", "combobox");
 			set_custom_element_data(goa_input, "trailingicon", "chevron-down");
 			set_custom_element_data(goa_input, "type", "text");
-			set_custom_element_data(goa_input, "value", /*_selectedLabel*/ ctx[16]);
+			set_custom_element_data(goa_input, "value", /*_selectedLabel*/ ctx[17]);
 			set_custom_element_data(goa_input, "width", "100%");
 			set_custom_element_data(goa_input, "name", /*name*/ ctx[0]);
 			attr(ul, "id", "menu");
 			attr(ul, "role", "listbox");
-			attr(ul, "aria-activedescendant", /*_selectedLabel*/ ctx[16]);
+			attr(ul, "aria-activedescendant", /*_selectedLabel*/ ctx[17]);
 			attr(ul, "data-testid", "dropdown-menu");
 			attr(ul, "tabindex", "0");
 
@@ -6305,9 +6305,10 @@ function create_else_block$9(ctx) {
         `);
 
 			set_custom_element_data(goa_popover, "disabled", /*disabled*/ ctx[6]);
-			set_custom_element_data(goa_popover, "open", /*_isMenuVisible*/ ctx[17]);
+			set_custom_element_data(goa_popover, "relative", /*relative*/ ctx[8]);
+			set_custom_element_data(goa_popover, "open", /*_isMenuVisible*/ ctx[18]);
 			set_custom_element_data(goa_popover, "padded", "false");
-			set_custom_element_data(goa_popover, "width", goa_popover_width_value = /*width*/ ctx[5] || /*_computedWidth*/ ctx[19]);
+			set_custom_element_data(goa_popover, "width", goa_popover_width_value = /*width*/ ctx[5] || /*_computedWidth*/ ctx[20]);
 		},
 		m(target, anchor) {
 			insert(target, slot, anchor);
@@ -6323,10 +6324,10 @@ function create_else_block$9(ctx) {
 				}
 			}
 
-			/*ul_binding*/ ctx[32](ul);
+			/*ul_binding*/ ctx[33](ul);
 
 			if (!mounted) {
-				dispose = listen(goa_input, "click", /*showMenu*/ ctx[24]);
+				dispose = listen(goa_input, "click", /*showMenu*/ ctx[25]);
 				mounted = true;
 			}
 		},
@@ -6347,8 +6348,8 @@ function create_else_block$9(ctx) {
 				set_custom_element_data(goa_input, "placeholder", /*placeholder*/ ctx[4]);
 			}
 
-			if (dirty[0] & /*_isMenuVisible*/ 131072) {
-				set_custom_element_data(goa_input, "aria-expanded", /*_isMenuVisible*/ ctx[17]);
+			if (dirty[0] & /*_isMenuVisible*/ 262144) {
+				set_custom_element_data(goa_input, "aria-expanded", /*_isMenuVisible*/ ctx[18]);
 			}
 
 			if (dirty[0] & /*arialabel, name*/ 3 && goa_input_arialabel_value !== (goa_input_arialabel_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0])) {
@@ -6359,21 +6360,21 @@ function create_else_block$9(ctx) {
 				set_custom_element_data(goa_input, "data-testid", goa_input_data_testid_value);
 			}
 
-			if (dirty[0] & /*_selectedLabel*/ 65536) {
-				set_custom_element_data(goa_input, "value", /*_selectedLabel*/ ctx[16]);
+			if (dirty[0] & /*_selectedLabel*/ 131072) {
+				set_custom_element_data(goa_input, "value", /*_selectedLabel*/ ctx[17]);
 			}
 
 			if (dirty[0] & /*name*/ 1) {
 				set_custom_element_data(goa_input, "name", /*name*/ ctx[0]);
 			}
 
-			if (dirty[0] & /*_options, _values, _highlightedIndex, onSelect*/ 33853440) {
-				each_value_1 = /*_options*/ ctx[12];
+			if (dirty[0] & /*_options, _values, _highlightedIndex, onSelect*/ 67706880) {
+				each_value_1 = /*_options*/ ctx[13];
 				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value_1, each_1_lookup, ul, destroy_block, create_each_block_1, null, get_each_context_1);
 			}
 
-			if (dirty[0] & /*_selectedLabel*/ 65536) {
-				attr(ul, "aria-activedescendant", /*_selectedLabel*/ ctx[16]);
+			if (dirty[0] & /*_selectedLabel*/ 131072) {
+				attr(ul, "aria-activedescendant", /*_selectedLabel*/ ctx[17]);
 			}
 
 			if (dirty[0] & /*maxheight*/ 8 && ul_style_value !== (ul_style_value = `
@@ -6387,11 +6388,15 @@ function create_else_block$9(ctx) {
 				set_custom_element_data(goa_popover, "disabled", /*disabled*/ ctx[6]);
 			}
 
-			if (dirty[0] & /*_isMenuVisible*/ 131072) {
-				set_custom_element_data(goa_popover, "open", /*_isMenuVisible*/ ctx[17]);
+			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] & /*width, _computedWidth*/ 524320 && goa_popover_width_value !== (goa_popover_width_value = /*width*/ ctx[5] || /*_computedWidth*/ ctx[19])) {
+			if (dirty[0] & /*width, _computedWidth*/ 1048608 && goa_popover_width_value !== (goa_popover_width_value = /*width*/ ctx[5] || /*_computedWidth*/ ctx[20])) {
 				set_custom_element_data(goa_popover, "width", goa_popover_width_value);
 			}
 		},
@@ -6404,21 +6409,21 @@ function create_else_block$9(ctx) {
 				each_blocks[i].d();
 			}
 
-			/*ul_binding*/ ctx[32](null);
+			/*ul_binding*/ ctx[33](null);
 			mounted = false;
 			dispose();
 		}
 	};
 }
 
-// (240:2) {#if _native}
-function create_if_block$l(ctx) {
+// (238:2) {#if _native}
+function create_if_block$m(ctx) {
 	let select;
 	let slot;
 	let select_aria_label_value;
 	let mounted;
 	let dispose;
-	let each_value = /*_options*/ ctx[12];
+	let each_value = /*_options*/ ctx[13];
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
@@ -6434,9 +6439,9 @@ function create_if_block$l(ctx) {
 				each_blocks[i].c();
 			}
 
-			select.disabled = /*_disabled*/ ctx[22];
+			select.disabled = /*_disabled*/ ctx[23];
 			attr(select, "aria-label", select_aria_label_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0]);
-			toggle_class(select, "error", /*_error*/ ctx[23]);
+			toggle_class(select, "error", /*_error*/ ctx[24]);
 		},
 		m(target, anchor) {
 			insert(target, select, anchor);
@@ -6448,16 +6453,16 @@ function create_if_block$l(ctx) {
 				}
 			}
 
-			/*select_binding*/ ctx[30](select);
+			/*select_binding*/ ctx[31](select);
 
 			if (!mounted) {
-				dispose = listen(select, "change", /*onNativeSelect*/ ctx[26]);
+				dispose = listen(select, "change", /*onNativeSelect*/ ctx[27]);
 				mounted = true;
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*_options*/ 4096) {
-				each_value = /*_options*/ ctx[12];
+			if (dirty[0] & /*_options*/ 8192) {
+				each_value = /*_options*/ ctx[13];
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
@@ -6479,32 +6484,32 @@ function create_if_block$l(ctx) {
 				each_blocks.length = each_value.length;
 			}
 
-			if (dirty[0] & /*_disabled*/ 4194304) {
-				select.disabled = /*_disabled*/ ctx[22];
+			if (dirty[0] & /*_disabled*/ 8388608) {
+				select.disabled = /*_disabled*/ ctx[23];
 			}
 
 			if (dirty[0] & /*arialabel, name*/ 3 && select_aria_label_value !== (select_aria_label_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0])) {
 				attr(select, "aria-label", select_aria_label_value);
 			}
 
-			if (dirty[0] & /*_error*/ 8388608) {
-				toggle_class(select, "error", /*_error*/ ctx[23]);
+			if (dirty[0] & /*_error*/ 16777216) {
+				toggle_class(select, "error", /*_error*/ ctx[24]);
 			}
 		},
 		d(detaching) {
 			if (detaching) detach(select);
 			destroy_each(each_blocks, detaching);
-			/*select_binding*/ ctx[30](null);
+			/*select_binding*/ ctx[31](null);
 			mounted = false;
 			dispose();
 		}
 	};
 }
 
-// (298:8) {#each _options as option, index (index)}
+// (296:8) {#each _options as option, index (index)}
 function create_each_block_1(key_1, ctx) {
 	let li;
-	let t0_value = (/*option*/ ctx[48].label || /*option*/ ctx[48].value) + "";
+	let t0_value = (/*option*/ ctx[49].label || /*option*/ ctx[49].value) + "";
 	let t0;
 	let t1;
 	let li_id_value;
@@ -6517,7 +6522,7 @@ function create_each_block_1(key_1, ctx) {
 	let dispose;
 
 	function click_handler() {
-		return /*click_handler*/ ctx[31](/*option*/ ctx[48]);
+		return /*click_handler*/ ctx[32](/*option*/ ctx[49]);
 	}
 
 	return {
@@ -6527,22 +6532,22 @@ function create_each_block_1(key_1, ctx) {
 			li = element("li");
 			t0 = text(t0_value);
 			t1 = space();
-			attr(li, "id", li_id_value = /*option*/ ctx[48].label);
+			attr(li, "id", li_id_value = /*option*/ ctx[49].label);
 			attr(li, "role", "option");
-			attr(li, "aria-label", li_aria_label_value = /*option*/ ctx[48].label || /*option*/ ctx[48].value);
+			attr(li, "aria-label", li_aria_label_value = /*option*/ ctx[49].label || /*option*/ ctx[49].value);
 
-			attr(li, "aria-selected", li_aria_selected_value = /*_values*/ ctx[15].includes(/*option*/ ctx[48].value)
+			attr(li, "aria-selected", li_aria_selected_value = /*_values*/ ctx[16].includes(/*option*/ ctx[49].value)
 			? "true"
 			: "false");
 
 			attr(li, "class", "dropdown-item");
-			attr(li, "data-testid", li_data_testid_value = `dropdown-item-${/*option*/ ctx[48].value}`);
-			attr(li, "data-index", li_data_index_value = /*index*/ ctx[52]);
-			attr(li, "data-value", li_data_value_value = /*option*/ ctx[48].value);
+			attr(li, "data-testid", li_data_testid_value = `dropdown-item-${/*option*/ ctx[49].value}`);
+			attr(li, "data-index", li_data_index_value = /*index*/ ctx[53]);
+			attr(li, "data-value", li_data_value_value = /*option*/ ctx[49].value);
 			set_style(li, "display", "block");
 			toggle_class(li, "dropdown-item--disabled", false);
-			toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[52] === /*_highlightedIndex*/ ctx[18]);
-			toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[15].includes(/*option*/ ctx[48].value));
+			toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[53] === /*_highlightedIndex*/ ctx[19]);
+			toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[16].includes(/*option*/ ctx[49].value));
 			this.first = li;
 		},
 		m(target, anchor) {
@@ -6557,40 +6562,40 @@ function create_each_block_1(key_1, ctx) {
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
-			if (dirty[0] & /*_options*/ 4096 && t0_value !== (t0_value = (/*option*/ ctx[48].label || /*option*/ ctx[48].value) + "")) set_data(t0, t0_value);
+			if (dirty[0] & /*_options*/ 8192 && t0_value !== (t0_value = (/*option*/ ctx[49].label || /*option*/ ctx[49].value) + "")) set_data(t0, t0_value);
 
-			if (dirty[0] & /*_options*/ 4096 && li_id_value !== (li_id_value = /*option*/ ctx[48].label)) {
+			if (dirty[0] & /*_options*/ 8192 && li_id_value !== (li_id_value = /*option*/ ctx[49].label)) {
 				attr(li, "id", li_id_value);
 			}
 
-			if (dirty[0] & /*_options*/ 4096 && li_aria_label_value !== (li_aria_label_value = /*option*/ ctx[48].label || /*option*/ ctx[48].value)) {
+			if (dirty[0] & /*_options*/ 8192 && li_aria_label_value !== (li_aria_label_value = /*option*/ ctx[49].label || /*option*/ ctx[49].value)) {
 				attr(li, "aria-label", li_aria_label_value);
 			}
 
-			if (dirty[0] & /*_values, _options*/ 36864 && li_aria_selected_value !== (li_aria_selected_value = /*_values*/ ctx[15].includes(/*option*/ ctx[48].value)
+			if (dirty[0] & /*_values, _options*/ 73728 && li_aria_selected_value !== (li_aria_selected_value = /*_values*/ ctx[16].includes(/*option*/ ctx[49].value)
 			? "true"
 			: "false")) {
 				attr(li, "aria-selected", li_aria_selected_value);
 			}
 
-			if (dirty[0] & /*_options*/ 4096 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${/*option*/ ctx[48].value}`)) {
+			if (dirty[0] & /*_options*/ 8192 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${/*option*/ ctx[49].value}`)) {
 				attr(li, "data-testid", li_data_testid_value);
 			}
 
-			if (dirty[0] & /*_options*/ 4096 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[52])) {
+			if (dirty[0] & /*_options*/ 8192 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[53])) {
 				attr(li, "data-index", li_data_index_value);
 			}
 
-			if (dirty[0] & /*_options*/ 4096 && li_data_value_value !== (li_data_value_value = /*option*/ ctx[48].value)) {
+			if (dirty[0] & /*_options*/ 8192 && li_data_value_value !== (li_data_value_value = /*option*/ ctx[49].value)) {
 				attr(li, "data-value", li_data_value_value);
 			}
 
-			if (dirty[0] & /*_options, _highlightedIndex*/ 266240) {
-				toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[52] === /*_highlightedIndex*/ ctx[18]);
+			if (dirty[0] & /*_options, _highlightedIndex*/ 532480) {
+				toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[53] === /*_highlightedIndex*/ ctx[19]);
 			}
 
-			if (dirty[0] & /*_values, _options*/ 36864) {
-				toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[15].includes(/*option*/ ctx[48].value));
+			if (dirty[0] & /*_values, _options*/ 73728) {
+				toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[16].includes(/*option*/ ctx[49].value));
 			}
 		},
 		d(detaching) {
@@ -6601,10 +6606,10 @@ function create_each_block_1(key_1, ctx) {
 	};
 }
 
-// (249:6) {#each _options as option}
+// (247:6) {#each _options as option}
 function create_each_block$7(ctx) {
 	let option;
-	let t0_value = /*option*/ ctx[48].label + "";
+	let t0_value = /*option*/ ctx[49].label + "";
 	let t0;
 	let t1;
 	let option_selected_value;
@@ -6616,10 +6621,10 @@ function create_each_block$7(ctx) {
 			option = element("option");
 			t0 = text(t0_value);
 			t1 = space();
-			option.selected = option_selected_value = /*option*/ ctx[48].selected;
-			option.__value = option_value_value = /*option*/ ctx[48].value;
+			option.selected = option_selected_value = /*option*/ ctx[49].selected;
+			option.__value = option_value_value = /*option*/ ctx[49].value;
 			option.value = option.__value;
-			attr(option, "aria-label", option_aria_label_value = /*option*/ ctx[48].label);
+			attr(option, "aria-label", option_aria_label_value = /*option*/ ctx[49].label);
 		},
 		m(target, anchor) {
 			insert(target, option, anchor);
@@ -6627,18 +6632,18 @@ function create_each_block$7(ctx) {
 			append(option, t1);
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*_options*/ 4096 && t0_value !== (t0_value = /*option*/ ctx[48].label + "")) set_data(t0, t0_value);
+			if (dirty[0] & /*_options*/ 8192 && t0_value !== (t0_value = /*option*/ ctx[49].label + "")) set_data(t0, t0_value);
 
-			if (dirty[0] & /*_options*/ 4096 && option_selected_value !== (option_selected_value = /*option*/ ctx[48].selected)) {
+			if (dirty[0] & /*_options*/ 8192 && option_selected_value !== (option_selected_value = /*option*/ ctx[49].selected)) {
 				option.selected = option_selected_value;
 			}
 
-			if (dirty[0] & /*_options*/ 4096 && option_value_value !== (option_value_value = /*option*/ ctx[48].value)) {
+			if (dirty[0] & /*_options*/ 8192 && option_value_value !== (option_value_value = /*option*/ ctx[49].value)) {
 				option.__value = option_value_value;
 				option.value = option.__value;
 			}
 
-			if (dirty[0] & /*_options*/ 4096 && option_aria_label_value !== (option_aria_label_value = /*option*/ ctx[48].label)) {
+			if (dirty[0] & /*_options*/ 8192 && option_aria_label_value !== (option_aria_label_value = /*option*/ ctx[49].label)) {
 				attr(option, "aria-label", option_aria_label_value);
 			}
 		},
@@ -6654,8 +6659,8 @@ function create_fragment$G(ctx) {
 	let div_style_value;
 
 	function select_block_type(ctx, dirty) {
-		if (/*_native*/ ctx[14]) return create_if_block$l;
-		return create_else_block$9;
+		if (/*_native*/ ctx[15]) return create_if_block$m;
+		return create_else_block$a;
 	}
 
 	let current_block_type = select_block_type(ctx);
@@ -6670,16 +6675,16 @@ function create_fragment$G(ctx) {
 			attr(div, "class", "dropdown");
 
 			attr(div, "style", div_style_value = `
-    ${calculateMargin(/*mt*/ ctx[8], /*mr*/ ctx[9], /*mb*/ ctx[10], /*ml*/ ctx[11])}
-    --width: ${/*width*/ ctx[5] || /*_computedWidth*/ ctx[19]}
+    ${calculateMargin(/*mt*/ ctx[9], /*mr*/ ctx[10], /*mb*/ ctx[11], /*ml*/ ctx[12])}
+    --width: ${/*width*/ ctx[5] || /*_computedWidth*/ ctx[20]}
   `);
 
-			toggle_class(div, "dropdown-native", /*_native*/ ctx[14]);
+			toggle_class(div, "dropdown-native", /*_native*/ ctx[15]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
 			if_block.m(div, null);
-			/*div_binding*/ ctx[33](div);
+			/*div_binding*/ ctx[34](div);
 		},
 		p(ctx, dirty) {
 			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
@@ -6698,15 +6703,15 @@ function create_fragment$G(ctx) {
 				attr(div, "data-testid", div_data_testid_value);
 			}
 
-			if (dirty[0] & /*mt, mr, mb, ml, width, _computedWidth*/ 528160 && div_style_value !== (div_style_value = `
-    ${calculateMargin(/*mt*/ ctx[8], /*mr*/ ctx[9], /*mb*/ ctx[10], /*ml*/ ctx[11])}
-    --width: ${/*width*/ ctx[5] || /*_computedWidth*/ ctx[19]}
+			if (dirty[0] & /*mt, mr, mb, ml, width, _computedWidth*/ 1056288 && div_style_value !== (div_style_value = `
+    ${calculateMargin(/*mt*/ ctx[9], /*mr*/ ctx[10], /*mb*/ ctx[11], /*ml*/ ctx[12])}
+    --width: ${/*width*/ ctx[5] || /*_computedWidth*/ ctx[20]}
   `)) {
 				attr(div, "style", div_style_value);
 			}
 
-			if (dirty[0] & /*_native*/ 16384) {
-				toggle_class(div, "dropdown-native", /*_native*/ ctx[14]);
+			if (dirty[0] & /*_native*/ 32768) {
+				toggle_class(div, "dropdown-native", /*_native*/ ctx[15]);
 			}
 		},
 		i: noop,
@@ -6714,7 +6719,7 @@ function create_fragment$G(ctx) {
 		d(detaching) {
 			if (detaching) detach(div);
 			if_block.d();
-			/*div_binding*/ ctx[33](null);
+			/*div_binding*/ ctx[34](null);
 		}
 	};
 }
@@ -6750,6 +6755,7 @@ function instance$C($$self, $$props, $$invalidate) {
 	let { error = "false" } = $$props;
 	let { multiselect = "false" } = $$props;
 	let { native = "false" } = $$props;
+	let { relative = "false" } = $$props;
 	let { mt = null } = $$props;
 	let { mr = null } = $$props;
 	let { mb = null } = $$props;
@@ -6774,9 +6780,9 @@ function instance$C($$self, $$props, $$invalidate) {
 		slot === null || slot === void 0
 		? void 0
 		: slot.addEventListener("slotchange", _e => {
-				$$invalidate(16, _selectedLabel = "");
-				$$invalidate(15, _values = parseValues(value));
-				$$invalidate(12, _options = getOptions());
+				$$invalidate(17, _selectedLabel = "");
+				$$invalidate(16, _values = parseValues(value));
+				$$invalidate(13, _options = getOptions());
 			});
 	});
 
@@ -6812,8 +6818,8 @@ function instance$C($$self, $$props, $$invalidate) {
 			const selected = _values.includes(value);
 
 			if (selected) {
-				$$invalidate(16, _selectedLabel = label);
-				$$invalidate(15, _values = [value]);
+				$$invalidate(17, _selectedLabel = label);
+				$$invalidate(16, _values = [value]);
 			}
 
 			return { selected, value, label };
@@ -6856,7 +6862,7 @@ function instance$C($$self, $$props, $$invalidate) {
 			return;
 		}
 
-		$$invalidate(17, _isMenuVisible = true);
+		$$invalidate(18, _isMenuVisible = true);
 		await tick();
 
 		// hide menu on blur
@@ -6870,27 +6876,24 @@ function instance$C($$self, $$props, $$invalidate) {
 		_menuEl.removeEventListener("blur", closeMenu);
 		_menuEl.removeEventListener("mouseover", onHighlight);
 		setHighlightedIndexToSelected();
-		$$invalidate(17, _isMenuVisible = false);
+		$$invalidate(18, _isMenuVisible = false);
 	}
 
 	function setHighlightedIndexToSelected() {
-		$$invalidate(18, _highlightedIndex = _options.findIndex(option => _values.includes(option.value)));
+		$$invalidate(19, _highlightedIndex = _options.findIndex(option => _values.includes(option.value)));
 	}
 
 	// Event handlers
-	/**
-* @property value the selected value
-*/
 	function onSelect(value, label, close) {
 		if (_disabled) return;
-		$$invalidate(16, _selectedLabel = label);
+		$$invalidate(17, _selectedLabel = label);
 		let detail;
 
 		if (_multiselect) {
 			_values.push(value);
 			detail = { name, values: _values };
 		} else {
-			$$invalidate(15, _values = [value]);
+			$$invalidate(16, _values = [value]);
 			detail = { name, value };
 		}
 
@@ -6933,14 +6936,14 @@ function instance$C($$self, $$props, $$invalidate) {
 
 	function _handleArrowDown() {
 		if (_highlightedIndex < _options.length - 1) {
-			$$invalidate(18, _highlightedIndex++, _highlightedIndex);
+			$$invalidate(19, _highlightedIndex++, _highlightedIndex);
 			onSelect(_options[_highlightedIndex].value, _options[_highlightedIndex].label, false);
 		}
 	}
 
 	function _handleArrowUp() {
 		if (_highlightedIndex > 0) {
-			$$invalidate(18, _highlightedIndex--, _highlightedIndex);
+			$$invalidate(19, _highlightedIndex--, _highlightedIndex);
 			onSelect(_options[_highlightedIndex].value, _options[_highlightedIndex].label, false);
 		}
 	}
@@ -6956,7 +6959,7 @@ function instance$C($$self, $$props, $$invalidate) {
 	}
 
 	function onHighlight(e) {
-		$$invalidate(18, _highlightedIndex = Number(e.target.dataset.index));
+		$$invalidate(19, _highlightedIndex = Number(e.target.dataset.index));
 	}
 
 	function onNativeSelect(e) {
@@ -6968,8 +6971,8 @@ function instance$C($$self, $$props, $$invalidate) {
 	function select_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			_selectEl = $$value;
-			$$invalidate(21, _selectEl);
-			(((($$invalidate(12, _options), $$invalidate(13, _el)), $$invalidate(27, value)), $$invalidate(14, _native)), $$invalidate(29, native));
+			$$invalidate(22, _selectEl);
+			(((($$invalidate(13, _options), $$invalidate(14, _el)), $$invalidate(28, value)), $$invalidate(15, _native)), $$invalidate(30, native));
 		});
 	}
 
@@ -6978,60 +6981,61 @@ function instance$C($$self, $$props, $$invalidate) {
 	function ul_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			_menuEl = $$value;
-			$$invalidate(20, _menuEl);
+			$$invalidate(21, _menuEl);
 		});
 	}
 
 	function div_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			_el = $$value;
-			$$invalidate(13, _el);
+			$$invalidate(14, _el);
 		});
 	}
 
 	$$self.$$set = $$props => {
 		if ('name' in $$props) $$invalidate(0, name = $$props.name);
 		if ('arialabel' in $$props) $$invalidate(1, arialabel = $$props.arialabel);
-		if ('value' in $$props) $$invalidate(27, value = $$props.value);
+		if ('value' in $$props) $$invalidate(28, value = $$props.value);
 		if ('leadingicon' in $$props) $$invalidate(2, leadingicon = $$props.leadingicon);
 		if ('maxheight' in $$props) $$invalidate(3, maxheight = $$props.maxheight);
 		if ('placeholder' in $$props) $$invalidate(4, placeholder = $$props.placeholder);
 		if ('width' in $$props) $$invalidate(5, width = $$props.width);
 		if ('disabled' in $$props) $$invalidate(6, disabled = $$props.disabled);
 		if ('error' in $$props) $$invalidate(7, error = $$props.error);
-		if ('multiselect' in $$props) $$invalidate(28, multiselect = $$props.multiselect);
-		if ('native' in $$props) $$invalidate(29, native = $$props.native);
-		if ('mt' in $$props) $$invalidate(8, mt = $$props.mt);
-		if ('mr' in $$props) $$invalidate(9, mr = $$props.mr);
-		if ('mb' in $$props) $$invalidate(10, mb = $$props.mb);
-		if ('ml' in $$props) $$invalidate(11, ml = $$props.ml);
+		if ('multiselect' in $$props) $$invalidate(29, multiselect = $$props.multiselect);
+		if ('native' in $$props) $$invalidate(30, native = $$props.native);
+		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*/ 64) {
-			$$invalidate(22, _disabled = toBoolean(disabled));
+			$$invalidate(23, _disabled = toBoolean(disabled));
 		}
 
 		if ($$self.$$.dirty[0] & /*error*/ 128) {
-			$$invalidate(23, _error = toBoolean(error));
+			$$invalidate(24, _error = toBoolean(error));
 		}
 
-		if ($$self.$$.dirty[0] & /*multiselect*/ 268435456) {
+		if ($$self.$$.dirty[0] & /*multiselect*/ 536870912) {
 			_multiselect = toBoolean(multiselect);
 		}
 
-		if ($$self.$$.dirty[0] & /*native*/ 536870912) {
-			$$invalidate(14, _native = toBoolean(native));
+		if ($$self.$$.dirty[0] & /*native*/ 1073741824) {
+			$$invalidate(15, _native = toBoolean(native));
 		}
 
-		if ($$self.$$.dirty[0] & /*_el, value, _native, _options*/ 134246400) {
+		if ($$self.$$.dirty[0] & /*_el, value, _native, _options*/ 268492800) {
 			{
 				if (_el) {
-					$$invalidate(15, _values = parseValues(value));
-					$$invalidate(12, _options = getOptions());
+					$$invalidate(16, _values = parseValues(value));
+					$$invalidate(13, _options = getOptions());
 
 					if (!_native) {
-						$$invalidate(19, _computedWidth = getCustomDropdownWidth(_options));
+						$$invalidate(20, _computedWidth = getCustomDropdownWidth(_options));
 						addKeyboardEventListeners();
 						setHighlightedIndexToSelected();
 					}
@@ -7049,6 +7053,7 @@ function instance$C($$self, $$props, $$invalidate) {
 		width,
 		disabled,
 		error,
+		relative,
 		mt,
 		mr,
 		mb,
@@ -7098,19 +7103,20 @@ class Dropdown extends SvelteElement {
 			{
 				name: 0,
 				arialabel: 1,
-				value: 27,
+				value: 28,
 				leadingicon: 2,
 				maxheight: 3,
 				placeholder: 4,
 				width: 5,
 				disabled: 6,
 				error: 7,
-				multiselect: 28,
-				native: 29,
-				mt: 8,
-				mr: 9,
-				mb: 10,
-				ml: 11
+				multiselect: 29,
+				native: 30,
+				relative: 8,
+				mt: 9,
+				mr: 10,
+				mb: 11,
+				ml: 12
 			},
 			null,
 			[-1, -1]
@@ -7141,6 +7147,7 @@ class Dropdown extends SvelteElement {
 			"error",
 			"multiselect",
 			"native",
+			"relative",
 			"mt",
 			"mr",
 			"mb",
@@ -7167,7 +7174,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get value() {
-		return this.$$.ctx[27];
+		return this.$$.ctx[28];
 	}
 
 	set value(value) {
@@ -7230,7 +7237,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get multiselect() {
-		return this.$$.ctx[28];
+		return this.$$.ctx[29];
 	}
 
 	set multiselect(multiselect) {
@@ -7239,7 +7246,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get native() {
-		return this.$$.ctx[29];
+		return this.$$.ctx[30];
 	}
 
 	set native(native) {
@@ -7247,17 +7254,26 @@ class Dropdown extends SvelteElement {
 		flush();
 	}
 
-	get mt() {
+	get relative() {
 		return this.$$.ctx[8];
 	}
 
+	set relative(relative) {
+		this.$$set({ relative });
+		flush();
+	}
+
+	get mt() {
+		return this.$$.ctx[9];
+	}
+
 	set mt(mt) {
 		this.$$set({ mt });
 		flush();
 	}
 
 	get mr() {
-		return this.$$.ctx[9];
+		return this.$$.ctx[10];
 	}
 
 	set mr(mr) {
@@ -7266,7 +7282,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get mb() {
-		return this.$$.ctx[10];
+		return this.$$.ctx[11];
 	}
 
 	set mb(mb) {
@@ -7275,7 +7291,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get ml() {
-		return this.$$.ctx[11];
+		return this.$$.ctx[12];
 	}
 
 	set ml(ml) {
@@ -7516,7 +7532,7 @@ customElements.define("goa-focus-trap", FocusTrap);
 
 /* libs/web-components/src/components/footer/Footer.svelte generated by Svelte v3.59.2 */
 
-function create_if_block$k(ctx) {
+function create_if_block$l(ctx) {
 	let goa_divider;
 
 	return {
@@ -7547,7 +7563,7 @@ function create_fragment$D(ctx) {
 	let t3;
 	let a1;
 	let div5_style_value;
-	let if_block = /*navLinks*/ ctx[2] && /*navLinks*/ ctx[2].length > 0 && create_if_block$k();
+	let if_block = /*navLinks*/ ctx[2] && /*navLinks*/ ctx[2].length > 0 && create_if_block$l();
 
 	return {
 		c() {
@@ -7601,7 +7617,7 @@ function create_fragment$D(ctx) {
 		p(ctx, [dirty]) {
 			if (/*navLinks*/ ctx[2] && /*navLinks*/ ctx[2].length > 0) {
 				if (if_block) ; else {
-					if_block = create_if_block$k();
+					if_block = create_if_block$l();
 					if_block.c();
 					if_block.m(div4, t1);
 				}
@@ -7898,7 +7914,7 @@ function get_each_context$5(ctx, list, i) {
 }
 
 // (31:2) {#if heading}
-function create_if_block$j(ctx) {
+function create_if_block$k(ctx) {
 	let div;
 	let t0;
 	let t1;
@@ -7970,7 +7986,7 @@ function create_fragment$B(ctx) {
 	let t1;
 	let ul;
 	let ul_style_value;
-	let if_block = /*heading*/ ctx[0] && create_if_block$j(ctx);
+	let if_block = /*heading*/ ctx[0] && create_if_block$k(ctx);
 	let each_value = /*children*/ ctx[3];
 	let each_blocks = [];
 
@@ -8026,7 +8042,7 @@ function create_fragment$B(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$j(ctx);
+					if_block = create_if_block$k(ctx);
 					if_block.c();
 					if_block.m(section, t0);
 				}
@@ -8292,7 +8308,7 @@ function create_if_block_1$b(ctx) {
 }
 
 // (48:2) {#if helptext}
-function create_if_block$i(ctx) {
+function create_if_block$j(ctx) {
 	let div;
 	let t;
 
@@ -8324,7 +8340,7 @@ function create_fragment$A(ctx) {
 	let div1_style_value;
 	let if_block0 = /*label*/ ctx[5] && create_if_block_2$9(ctx);
 	let if_block1 = /*error*/ ctx[7] && create_if_block_1$b(ctx);
-	let if_block2 = /*helptext*/ ctx[6] && create_if_block$i(ctx);
+	let if_block2 = /*helptext*/ ctx[6] && create_if_block$j(ctx);
 
 	return {
 		c() {
@@ -8384,7 +8400,7 @@ function create_fragment$A(ctx) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
-					if_block2 = create_if_block$i(ctx);
+					if_block2 = create_if_block$j(ctx);
 					if_block2.c();
 					if_block2.m(div1, null);
 				}
@@ -9263,7 +9279,7 @@ customElements.define("goa-icon-button", IconButton);
 
 /* libs/web-components/src/components/icon/Icon.svelte generated by Svelte v3.59.2 */
 
-function create_if_block$h(ctx) {
+function create_if_block$i(ctx) {
 	let show_if;
 	let if_block_anchor;
 
@@ -9271,7 +9287,7 @@ function create_if_block$h(ctx) {
 		if (dirty & /*type*/ 16) show_if = null;
 		if (show_if == null) show_if = !!Object.keys(/*_iconOverrides*/ ctx[13]).includes(/*type*/ ctx[4]);
 		if (show_if) return create_if_block_1$a;
-		return create_else_block$8;
+		return create_else_block$9;
 	}
 
 	let current_block_type = select_block_type(ctx, -1);
@@ -9307,7 +9323,7 @@ function create_if_block$h(ctx) {
 }
 
 // (60:4) {:else}
-function create_else_block$8(ctx) {
+function create_else_block$9(ctx) {
 	let ion_icon;
 	let ion_icon_name_value;
 
@@ -9362,7 +9378,7 @@ function create_fragment$w(ctx) {
 	let div_role_value;
 	let div_class_value;
 	let div_style_value;
-	let if_block = /*type*/ ctx[4] && create_if_block$h(ctx);
+	let if_block = /*type*/ ctx[4] && create_if_block$i(ctx);
 
 	return {
 		c() {
@@ -9392,7 +9408,7 @@ function create_fragment$w(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$h(ctx);
+					if_block = create_if_block$i(ctx);
 					if_block.c();
 					if_block.m(div, null);
 				}
@@ -9726,7 +9742,7 @@ function create_if_block_4$2(ctx) {
 	};
 }
 
-// (127:4) {#if leadingicon}
+// (141:4) {#if leadingicon}
 function create_if_block_3$8(ctx) {
 	let goa_icon;
 
@@ -9751,7 +9767,7 @@ function create_if_block_3$8(ctx) {
 	};
 }
 
-// (162:4) {#if trailingicon && !handlesTrailingIconClick}
+// (178:4) {#if trailingicon && !handlesTrailingIconClick}
 function create_if_block_2$8(ctx) {
 	let goa_icon;
 
@@ -9777,7 +9793,7 @@ function create_if_block_2$8(ctx) {
 	};
 }
 
-// (172:4) {#if trailingicon && handlesTrailingIconClick}
+// (188:4) {#if trailingicon && handlesTrailingIconClick}
 function create_if_block_1$9(ctx) {
 	let goa_icon_button;
 	let mounted;
@@ -9818,8 +9834,8 @@ function create_if_block_1$9(ctx) {
 	};
 }
 
-// (185:4) {#if suffix}
-function create_if_block$g(ctx) {
+// (201:4) {#if suffix}
+function create_if_block$h(ctx) {
 	let span;
 	let t;
 
@@ -9866,7 +9882,7 @@ function create_fragment$v(ctx) {
 	let if_block1 = /*leadingicon*/ ctx[5] && create_if_block_3$8(ctx);
 	let if_block2 = /*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[28] && create_if_block_2$8(ctx);
 	let if_block3 = /*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[28] && create_if_block_1$9(ctx);
-	let if_block4 = /*suffix*/ ctx[15] && create_if_block$g(ctx);
+	let if_block4 = /*suffix*/ ctx[15] && create_if_block$h(ctx);
 
 	return {
 		c() {
@@ -9950,7 +9966,7 @@ function create_fragment$v(ctx) {
 			if (if_block1) if_block1.m(div2, null);
 			append(div2, t2);
 			append(div2, input);
-			/*input_binding*/ ctx[37](input);
+			/*input_binding*/ ctx[39](input);
 			append(div2, t3);
 			if (if_block2) if_block2.m(div2, null);
 			append(div2, t4);
@@ -9959,12 +9975,14 @@ function create_fragment$v(ctx) {
 			if (if_block4) if_block4.m(div2, null);
 			append(div2, t6);
 			append(div2, div1);
-			/*div3_binding*/ ctx[38](div3);
+			/*div3_binding*/ ctx[40](div3);
 
 			if (!mounted) {
 				dispose = [
 					listen(input, "keyup", /*onKeyUp*/ ctx[29]),
-					listen(input, "change", /*onKeyUp*/ ctx[29])
+					listen(input, "change", /*onKeyUp*/ ctx[29]),
+					listen(input, "focus", /*onFocus*/ ctx[30]),
+					listen(input, "blur", /*onBlur*/ ctx[31])
 				];
 
 				mounted = true;
@@ -10095,7 +10113,7 @@ function create_fragment$v(ctx) {
 				if (if_block4) {
 					if_block4.p(ctx, dirty);
 				} else {
-					if_block4 = create_if_block$g(ctx);
+					if_block4 = create_if_block$h(ctx);
 					if_block4.c();
 					if_block4.m(div2, t6);
 				}
@@ -10136,11 +10154,11 @@ function create_fragment$v(ctx) {
 			if (detaching) detach(div3);
 			if (if_block0) if_block0.d();
 			if (if_block1) if_block1.d();
-			/*input_binding*/ ctx[37](null);
+			/*input_binding*/ ctx[39](null);
 			if (if_block2) if_block2.d();
 			if (if_block3) if_block3.d();
 			if (if_block4) if_block4.d();
-			/*div3_binding*/ ctx[38](null);
+			/*div3_binding*/ ctx[40](null);
 			mounted = false;
 			run_all(dispose);
 		}
@@ -10233,6 +10251,26 @@ function instance$s($$self, $$props, $$invalidate) {
 		$$invalidate(0, value = input.value);
 	}
 
+	function onFocus(e) {
+		const input = e.target;
+
+		input.dispatchEvent(new CustomEvent("_focus",
+		{
+				composed: true,
+				detail: { name, value: input.value }
+			}));
+	}
+
+	function onBlur(e) {
+		const input = e.target;
+
+		input.dispatchEvent(new CustomEvent("_blur",
+		{
+				composed: true,
+				detail: { name, value: input.value }
+			}));
+	}
+
 	onMount(async () => {
 		await tick();
 		validateType(type);
@@ -10278,11 +10316,11 @@ function instance$s($$self, $$props, $$invalidate) {
 		if ('leadingicon' in $$props) $$invalidate(5, leadingicon = $$props.leadingicon);
 		if ('trailingicon' in $$props) $$invalidate(6, trailingicon = $$props.trailingicon);
 		if ('variant' in $$props) $$invalidate(7, variant = $$props.variant);
-		if ('disabled' in $$props) $$invalidate(30, disabled = $$props.disabled);
-		if ('handletrailingiconclick' in $$props) $$invalidate(31, handletrailingiconclick = $$props.handletrailingiconclick);
-		if ('focused' in $$props) $$invalidate(32, focused = $$props.focused);
-		if ('readonly' in $$props) $$invalidate(33, readonly = $$props.readonly);
-		if ('error' in $$props) $$invalidate(34, error = $$props.error);
+		if ('disabled' in $$props) $$invalidate(32, disabled = $$props.disabled);
+		if ('handletrailingiconclick' in $$props) $$invalidate(33, handletrailingiconclick = $$props.handletrailingiconclick);
+		if ('focused' in $$props) $$invalidate(34, focused = $$props.focused);
+		if ('readonly' in $$props) $$invalidate(35, readonly = $$props.readonly);
+		if ('error' in $$props) $$invalidate(36, error = $$props.error);
 		if ('testid' in $$props) $$invalidate(8, testid = $$props.testid);
 		if ('width' in $$props) $$invalidate(9, width = $$props.width);
 		if ('arialabel' in $$props) $$invalidate(10, arialabel = $$props.arialabel);
@@ -10291,7 +10329,7 @@ function instance$s($$self, $$props, $$invalidate) {
 		if ('step' in $$props) $$invalidate(13, step = $$props.step);
 		if ('prefix' in $$props) $$invalidate(14, prefix = $$props.prefix);
 		if ('suffix' in $$props) $$invalidate(15, suffix = $$props.suffix);
-		if ('debounce' in $$props) $$invalidate(35, debounce = $$props.debounce);
+		if ('debounce' in $$props) $$invalidate(37, debounce = $$props.debounce);
 		if ('maxlength' in $$props) $$invalidate(16, maxlength = $$props.maxlength);
 		if ('mt' in $$props) $$invalidate(17, mt = $$props.mt);
 		if ('mr' in $$props) $$invalidate(18, mr = $$props.mr);
@@ -10300,27 +10338,27 @@ function instance$s($$self, $$props, $$invalidate) {
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[1] & /*handletrailingiconclick*/ 1) {
+		if ($$self.$$.dirty[1] & /*handletrailingiconclick*/ 4) {
 			$$invalidate(28, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
 		}
 
-		if ($$self.$$.dirty[1] & /*focused*/ 2) {
-			$$invalidate(36, isFocused = toBoolean(focused));
+		if ($$self.$$.dirty[1] & /*focused*/ 8) {
+			$$invalidate(38, isFocused = toBoolean(focused));
 		}
 
-		if ($$self.$$.dirty[1] & /*readonly*/ 4) {
+		if ($$self.$$.dirty[1] & /*readonly*/ 16) {
 			$$invalidate(25, isReadonly = toBoolean(readonly));
 		}
 
-		if ($$self.$$.dirty[1] & /*error*/ 8) {
+		if ($$self.$$.dirty[1] & /*error*/ 32) {
 			$$invalidate(27, isError = toBoolean(error));
 		}
 
-		if ($$self.$$.dirty[0] & /*disabled*/ 1073741824) {
+		if ($$self.$$.dirty[1] & /*disabled*/ 2) {
 			$$invalidate(26, isDisabled = toBoolean(disabled));
 		}
 
-		if ($$self.$$.dirty[0] & /*inputEl*/ 2097152 | $$self.$$.dirty[1] & /*isFocused*/ 32) {
+		if ($$self.$$.dirty[0] & /*inputEl*/ 2097152 | $$self.$$.dirty[1] & /*isFocused*/ 128) {
 			if (isFocused && inputEl) {
 				setTimeout(() => inputEl.focus(), 1);
 			}
@@ -10366,6 +10404,8 @@ function instance$s($$self, $$props, $$invalidate) {
 		isError,
 		handlesTrailingIconClick,
 		onKeyUp,
+		onFocus,
+		onBlur,
 		disabled,
 		handletrailingiconclick,
 		focused,
@@ -10407,11 +10447,11 @@ class Input extends SvelteElement {
 				leadingicon: 5,
 				trailingicon: 6,
 				variant: 7,
-				disabled: 30,
-				handletrailingiconclick: 31,
-				focused: 32,
-				readonly: 33,
-				error: 34,
+				disabled: 32,
+				handletrailingiconclick: 33,
+				focused: 34,
+				readonly: 35,
+				error: 36,
 				testid: 8,
 				width: 9,
 				arialabel: 10,
@@ -10420,7 +10460,7 @@ class Input extends SvelteElement {
 				step: 13,
 				prefix: 14,
 				suffix: 15,
-				debounce: 35,
+				debounce: 37,
 				maxlength: 16,
 				mt: 17,
 				mr: 18,
@@ -10548,7 +10588,7 @@ class Input extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[30];
+		return this.$$.ctx[32];
 	}
 
 	set disabled(disabled) {
@@ -10557,7 +10597,7 @@ class Input extends SvelteElement {
 	}
 
 	get handletrailingiconclick() {
-		return this.$$.ctx[31];
+		return this.$$.ctx[33];
 	}
 
 	set handletrailingiconclick(handletrailingiconclick) {
@@ -10566,7 +10606,7 @@ class Input extends SvelteElement {
 	}
 
 	get focused() {
-		return this.$$.ctx[32];
+		return this.$$.ctx[34];
 	}
 
 	set focused(focused) {
@@ -10575,7 +10615,7 @@ class Input extends SvelteElement {
 	}
 
 	get readonly() {
-		return this.$$.ctx[33];
+		return this.$$.ctx[35];
 	}
 
 	set readonly(readonly) {
@@ -10584,7 +10624,7 @@ class Input extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[34];
+		return this.$$.ctx[36];
 	}
 
 	set error(error) {
@@ -10665,7 +10705,7 @@ class Input extends SvelteElement {
 	}
 
 	get debounce() {
-		return this.$$.ctx[35];
+		return this.$$.ctx[37];
 	}
 
 	set debounce(debounce) {
@@ -10845,7 +10885,7 @@ function create_if_block_2$7(ctx) {
 }
 
 // (46:4) {#if version}
-function create_if_block$f(ctx) {
+function create_if_block$g(ctx) {
 	let div;
 	let t;
 
@@ -10880,7 +10920,7 @@ function create_fragment$u(ctx) {
 	let header_style_value;
 	let if_block0 = /*type*/ ctx[0] === "live" && create_if_block_3$7();
 	let if_block1 = show_if && create_if_block_1$8(ctx);
-	let if_block2 = /*version*/ ctx[1] && create_if_block$f(ctx);
+	let if_block2 = /*version*/ ctx[1] && create_if_block$g(ctx);
 
 	return {
 		c() {
@@ -10941,7 +10981,7 @@ function create_fragment$u(ctx) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
-					if_block2 = create_if_block$f(ctx);
+					if_block2 = create_if_block$g(ctx);
 					if_block2.c();
 					if_block2.m(div1, null);
 				}
@@ -11074,7 +11114,7 @@ customElements.define("goa-microsite-header", MicrositeHeader);
 
 /* libs/web-components/src/components/modal/Modal.svelte generated by Svelte v3.59.2 */
 
-function create_if_block$e(ctx) {
+function create_if_block$f(ctx) {
 	let goa_focus_trap;
 	let div6;
 	let div0;
@@ -11103,7 +11143,7 @@ function create_if_block$e(ctx) {
 
 	function select_block_type(ctx, dirty) {
 		if (/*heading*/ ctx[0]) return create_if_block_2$6;
-		return create_else_block$7;
+		return create_else_block$8;
 	}
 
 	let current_block_type = select_block_type(ctx);
@@ -11340,7 +11380,7 @@ function create_if_block_3$6(ctx) {
 }
 
 // (150:14) {:else}
-function create_else_block$7(ctx) {
+function create_else_block$8(ctx) {
 	let slot;
 
 	return {
@@ -11415,7 +11455,7 @@ function create_if_block_1$7(ctx) {
 function create_fragment$t(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*_isOpen*/ ctx[7] && create_if_block$e(ctx);
+	let if_block = /*_isOpen*/ ctx[7] && create_if_block$f(ctx);
 
 	return {
 		c() {
@@ -11437,7 +11477,7 @@ function create_fragment$t(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$e(ctx);
+					if_block = create_if_block$f(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -11776,7 +11816,7 @@ customElements.define("goa-modal", Modal);
 
 /* libs/web-components/src/components/notification/Notification.svelte generated by Svelte v3.59.2 */
 
-function create_if_block$d(ctx) {
+function create_if_block$e(ctx) {
 	let div4;
 	let div3;
 	let div0;
@@ -11899,7 +11939,7 @@ function create_if_block$d(ctx) {
 function create_fragment$s(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*show*/ ctx[3] && create_if_block$d(ctx);
+	let if_block = /*show*/ ctx[3] && create_if_block$e(ctx);
 
 	return {
 		c() {
@@ -11921,7 +11961,7 @@ function create_fragment$s(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$d(ctx);
+					if_block = create_if_block$e(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -12192,7 +12232,7 @@ function get_each_context$4(ctx, list, i) {
 }
 
 // (66:4) {#if variant === "all"}
-function create_if_block$c(ctx) {
+function create_if_block$d(ctx) {
 	let goa_block;
 	let span0;
 	let t1;
@@ -12329,7 +12369,7 @@ function create_fragment$q(ctx) {
 	let goa_button1_disabled_value;
 	let mounted;
 	let dispose;
-	let if_block = /*variant*/ ctx[1] === "all" && create_if_block$c(ctx);
+	let if_block = /*variant*/ ctx[1] === "all" && create_if_block$d(ctx);
 
 	return {
 		c() {
@@ -12390,7 +12430,7 @@ function create_fragment$q(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$c(ctx);
+					if_block = create_if_block$d(ctx);
 					if_block.c();
 					if_block.m(div, t0);
 				}
@@ -12667,7 +12707,7 @@ customElements.define("goa-pagination", Pagination);
 
 /* libs/web-components/src/components/popover/Popover.svelte generated by Svelte v3.59.2 */
 
-function create_if_block$b(ctx) {
+function create_if_block$c(ctx) {
 	let div0;
 	let t;
 	let div2;
@@ -12696,7 +12736,7 @@ function create_if_block$b(ctx) {
 			attr(section, "style", section_style_value = `
           ${cssVar("width", /*width*/ ctx[2])}
           max-width: ${/*maxwidth*/ ctx[1]};
-          padding: ${/*_padded*/ ctx[17] ? "var(--goa-space-m)" : "0"};
+          padding: ${/*_padded*/ ctx[18] ? "var(--goa-space-m)" : "0"};
         `);
 
 			attr(div2, "class", "popover-container");
@@ -12708,19 +12748,19 @@ function create_if_block$b(ctx) {
 			append(div2, section);
 			append(section, goa_focus_trap);
 			append(goa_focus_trap, div1);
-			/*div1_binding*/ ctx[25](div1);
-			/*section_binding*/ ctx[26](section);
+			/*div1_binding*/ ctx[27](div1);
+			/*section_binding*/ ctx[28](section);
 
 			if (!mounted) {
-				dispose = listen(div0, "click", /*closePopover*/ ctx[19]);
+				dispose = listen(div0, "click", /*closePopover*/ ctx[20]);
 				mounted = true;
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*width, maxwidth, _padded*/ 131078 && section_style_value !== (section_style_value = `
+			if (dirty[0] & /*width, maxwidth, _padded*/ 262150 && section_style_value !== (section_style_value = `
           ${cssVar("width", /*width*/ ctx[2])}
           max-width: ${/*maxwidth*/ ctx[1]};
-          padding: ${/*_padded*/ ctx[17] ? "var(--goa-space-m)" : "0"};
+          padding: ${/*_padded*/ ctx[18] ? "var(--goa-space-m)" : "0"};
         `)) {
 				attr(section, "style", section_style_value);
 			}
@@ -12729,8 +12769,8 @@ function create_if_block$b(ctx) {
 			if (detaching) detach(div0);
 			if (detaching) detach(t);
 			if (detaching) detach(div2);
-			/*div1_binding*/ ctx[25](null);
-			/*section_binding*/ ctx[26](null);
+			/*div1_binding*/ ctx[27](null);
+			/*section_binding*/ ctx[28](null);
 			mounted = false;
 			dispose();
 		}
@@ -12746,7 +12786,7 @@ function create_fragment$p(ctx) {
 	let div1_style_value;
 	let mounted;
 	let dispose;
-	let if_block = /*_open*/ ctx[12] && create_if_block$b(ctx);
+	let if_block = /*_open*/ ctx[12] && create_if_block$c(ctx);
 
 	return {
 		c() {
@@ -12763,6 +12803,7 @@ function create_fragment$p(ctx) {
 			attr(div1, "data-testid", /*testid*/ ctx[0]);
 
 			attr(div1, "style", div1_style_value = `
+    ${/*_relative*/ ctx[17] && "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])}
@@ -12776,13 +12817,13 @@ function create_fragment$p(ctx) {
 			insert(target, div1, anchor);
 			append(div1, div0);
 			append(div0, slot);
-			/*div0_binding*/ ctx[24](div0);
+			/*div0_binding*/ ctx[26](div0);
 			append(div1, t);
 			if (if_block) if_block.m(div1, null);
-			/*div1_binding_1*/ ctx[27](div1);
+			/*div1_binding_1*/ ctx[29](div1);
 
 			if (!mounted) {
-				dispose = listen(div0, "click", /*openPopover*/ ctx[18]);
+				dispose = listen(div0, "click", /*openPopover*/ ctx[19]);
 				mounted = true;
 			}
 		},
@@ -12795,7 +12836,7 @@ function create_fragment$p(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$b(ctx);
+					if_block = create_if_block$c(ctx);
 					if_block.c();
 					if_block.m(div1, null);
 				}
@@ -12808,7 +12849,8 @@ function create_fragment$p(ctx) {
 				attr(div1, "data-testid", /*testid*/ ctx[0]);
 			}
 
-			if (dirty[0] & /*mt, mr, mb, ml, voffset, hoffset, focusborderwidth, borderradius*/ 3960 && div1_style_value !== (div1_style_value = `
+			if (dirty[0] & /*_relative, mt, mr, mb, ml, voffset, hoffset, focusborderwidth, borderradius*/ 135032 && div1_style_value !== (div1_style_value = `
+    ${/*_relative*/ ctx[17] && "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])}
@@ -12824,9 +12866,9 @@ function create_fragment$p(ctx) {
 		o: noop,
 		d(detaching) {
 			if (detaching) detach(div1);
-			/*div0_binding*/ ctx[24](null);
+			/*div0_binding*/ ctx[26](null);
 			if (if_block) if_block.d();
-			/*div1_binding_1*/ ctx[27](null);
+			/*div1_binding_1*/ ctx[29](null);
 			mounted = false;
 			dispose();
 		}
@@ -12857,11 +12899,13 @@ function instance$m($$self, $$props, $$invalidate) {
 	let _padded;
 	let _open;
 	let _disabled;
+	let _relative;
 	let { testid = "popover" } = $$props;
 	let { maxwidth = "320px" } = $$props;
 	let { width = "" } = $$props;
 	let { padded = "true" } = $$props;
 	let { position = "auto" } = $$props;
+	let { relative = "false" } = $$props;
 	let { mt = null } = $$props;
 	let { mr = null } = $$props;
 	let { mb = null } = $$props;
@@ -12982,24 +13026,42 @@ function instance$m($$self, $$props, $$invalidate) {
 		const windowOffset = usingNoScroll ? 0 : window.scrollY;
 
 		// If there's more space above, display the popover above the target element
-		$$invalidate(
-			15,
-			_popoverEl.style.top = displayOnTop
-			? `${rootRect.top - contentRect.height + windowOffset}px`
-			: `${rootRect.top + rootRect.height + windowOffset}px`,
-			_popoverEl
-		);
+		if (_relative) {
+			$$invalidate(
+				15,
+				_popoverEl.style.top = displayOnTop
+				? `-${contentRect.height}px`
+				: `${rootRect.height}px`,
+				_popoverEl
+			);
+		} else {
+			$$invalidate(
+				15,
+				_popoverEl.style.top = displayOnTop
+				? `${rootRect.top - contentRect.height + windowOffset}px`
+				: `${rootRect.top + rootRect.height + windowOffset}px`,
+				_popoverEl
+			);
+		}
 
 		// Move the popover to the left if it is too far to the right and only if there is space to the left
 		const displayOnRight = document.body.clientWidth - targetRect.left < contentRect.width && targetRect.left > contentRect.width;
 
-		$$invalidate(
-			15,
-			_popoverEl.style.left = displayOnRight
-			? `${rootRect.left + targetRect.width - contentRect.width}px`
-			: `${rootRect.left}px`,
-			_popoverEl
-		);
+		if (_relative) {
+			if (displayOnRight) {
+				$$invalidate(15, _popoverEl.style.right = "0", _popoverEl);
+			} else {
+				$$invalidate(15, _popoverEl.style.left = "0", _popoverEl);
+			}
+		} else {
+			$$invalidate(
+				15,
+				_popoverEl.style.left = displayOnRight
+				? `${rootRect.left + targetRect.width - contentRect.width}px`
+				: `${rootRect.left}px`,
+				_popoverEl
+			);
+		}
 	}
 
 	function div0_binding($$value) {
@@ -13034,14 +13096,15 @@ function instance$m($$self, $$props, $$invalidate) {
 		if ('testid' in $$props) $$invalidate(0, testid = $$props.testid);
 		if ('maxwidth' in $$props) $$invalidate(1, maxwidth = $$props.maxwidth);
 		if ('width' in $$props) $$invalidate(2, width = $$props.width);
-		if ('padded' in $$props) $$invalidate(20, padded = $$props.padded);
-		if ('position' in $$props) $$invalidate(21, position = $$props.position);
+		if ('padded' in $$props) $$invalidate(21, padded = $$props.padded);
+		if ('position' in $$props) $$invalidate(22, position = $$props.position);
+		if ('relative' in $$props) $$invalidate(23, relative = $$props.relative);
 		if ('mt' in $$props) $$invalidate(3, mt = $$props.mt);
 		if ('mr' in $$props) $$invalidate(4, mr = $$props.mr);
 		if ('mb' in $$props) $$invalidate(5, mb = $$props.mb);
 		if ('ml' in $$props) $$invalidate(6, ml = $$props.ml);
-		if ('open' in $$props) $$invalidate(22, open = $$props.open);
-		if ('disabled' in $$props) $$invalidate(23, disabled = $$props.disabled);
+		if ('open' in $$props) $$invalidate(24, open = $$props.open);
+		if ('disabled' in $$props) $$invalidate(25, disabled = $$props.disabled);
 		if ('tabindex' in $$props) $$invalidate(7, tabindex = $$props.tabindex);
 		if ('voffset' in $$props) $$invalidate(8, voffset = $$props.voffset);
 		if ('hoffset' in $$props) $$invalidate(9, hoffset = $$props.hoffset);
@@ -13050,19 +13113,23 @@ function instance$m($$self, $$props, $$invalidate) {
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*padded*/ 1048576) {
+		if ($$self.$$.dirty[0] & /*padded*/ 2097152) {
 			// Reactive
-			$$invalidate(17, _padded = toBoolean(padded));
+			$$invalidate(18, _padded = toBoolean(padded));
 		}
 
-		if ($$self.$$.dirty[0] & /*open*/ 4194304) {
+		if ($$self.$$.dirty[0] & /*open*/ 16777216) {
 			$$invalidate(12, _open = toBoolean(open));
 		}
 
-		if ($$self.$$.dirty[0] & /*disabled*/ 8388608) {
+		if ($$self.$$.dirty[0] & /*disabled*/ 33554432) {
 			_disabled = toBoolean(disabled);
 		}
 
+		if ($$self.$$.dirty[0] & /*relative*/ 8388608) {
+			$$invalidate(17, _relative = toBoolean(relative));
+		}
+
 		if ($$self.$$.dirty[0] & /*_open*/ 4096) {
 			(async () => _open && await setPopoverPosition())();
 		}
@@ -13096,11 +13163,13 @@ function instance$m($$self, $$props, $$invalidate) {
 		_targetEl,
 		_popoverEl,
 		_focusTrapEl,
+		_relative,
 		_padded,
 		openPopover,
 		closePopover,
 		padded,
 		position,
+		relative,
 		open,
 		disabled,
 		div0_binding,
@@ -13114,7 +13183,7 @@ class Popover extends SvelteElement {
 	constructor(options) {
 		super();
 		const style = document.createElement('style');
-		style.textContent = `:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4);display:flex;align-items:center}.popover-target{width:fit-content;cursor:pointer}.popover-target:focus{outline:var(--focus-border-width) solid var(--goa-color-interactive-focus)}.popover-content{color:var(--goa-color-text-default);position:absolute;left:0;right:0;width:fit-content;max-width:260px;list-style-type:none;background:var(--goa-color-greyscale-white);border-radius:var(--border-radius);outline:none;filter:drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));z-index:99;width:max-content;margin-top:var(--offset-top, 3px);margin-bottom:var(--offset-bottom, 3px);margin-left:var(--offset-left, 0);margin-right:var(--offset-right, 0)}::slotted(ul){display:block;padding:0;margin:0;list-style-type:none;line-height:2rem}.popover-background{cursor:default;position:fixed;z-index:98;inset:0}`;
+		style.textContent = `:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4);display:flex;align-items:center}.popover-target{width:fit-content;cursor:pointer}.popover-target:focus{outline:var(--focus-border-width) solid var(--goa-color-interactive-focus)}.popover-content{color:var(--goa-color-text-default);position:absolute;width:fit-content;max-width:260px;list-style-type:none;background:var(--goa-color-greyscale-white);border-radius:var(--border-radius);outline:none;filter:drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));z-index:99;width:max-content;margin-top:var(--offset-top, 3px);margin-bottom:var(--offset-bottom, 3px);margin-left:var(--offset-left, 0);margin-right:var(--offset-right, 0)}::slotted(ul){display:block;padding:0;margin:0;list-style-type:none;line-height:2rem}.popover-background{cursor:default;position:fixed;z-index:98;inset:0}`;
 		this.shadowRoot.appendChild(style);
 
 		init(
@@ -13131,14 +13200,15 @@ class Popover extends SvelteElement {
 				testid: 0,
 				maxwidth: 1,
 				width: 2,
-				padded: 20,
-				position: 21,
+				padded: 21,
+				position: 22,
+				relative: 23,
 				mt: 3,
 				mr: 4,
 				mb: 5,
 				ml: 6,
-				open: 22,
-				disabled: 23,
+				open: 24,
+				disabled: 25,
 				tabindex: 7,
 				voffset: 8,
 				hoffset: 9,
@@ -13168,6 +13238,7 @@ class Popover extends SvelteElement {
 			"width",
 			"padded",
 			"position",
+			"relative",
 			"mt",
 			"mr",
 			"mb",
@@ -13210,7 +13281,7 @@ class Popover extends SvelteElement {
 	}
 
 	get padded() {
-		return this.$$.ctx[20];
+		return this.$$.ctx[21];
 	}
 
 	set padded(padded) {
@@ -13219,7 +13290,7 @@ class Popover extends SvelteElement {
 	}
 
 	get position() {
-		return this.$$.ctx[21];
+		return this.$$.ctx[22];
 	}
 
 	set position(position) {
@@ -13227,6 +13298,15 @@ class Popover extends SvelteElement {
 		flush();
 	}
 
+	get relative() {
+		return this.$$.ctx[23];
+	}
+
+	set relative(relative) {
+		this.$$set({ relative });
+		flush();
+	}
+
 	get mt() {
 		return this.$$.ctx[3];
 	}
@@ -13264,7 +13344,7 @@ class Popover extends SvelteElement {
 	}
 
 	get open() {
-		return this.$$.ctx[22];
+		return this.$$.ctx[24];
 	}
 
 	set open(open) {
@@ -13273,7 +13353,7 @@ class Popover extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[23];
+		return this.$$.ctx[25];
 	}
 
 	set disabled(disabled) {
@@ -14044,7 +14124,7 @@ function get_each_context$2(ctx, list, i) {
 }
 
 // (81:2) {:else}
-function create_else_block$6(ctx) {
+function create_else_block$7(ctx) {
 	let div;
 	let div_class_value;
 
@@ -14337,7 +14417,7 @@ function create_if_block_1$6(ctx) {
 }
 
 // (43:2) {#if type === "card"}
-function create_if_block$a(ctx) {
+function create_if_block$b(ctx) {
 	let div1;
 	let skeleton0;
 	let t0;
@@ -14479,11 +14559,11 @@ function create_fragment$m(ctx) {
 	let current;
 
 	const if_block_creators = [
-		create_if_block$a,
+		create_if_block$b,
 		create_if_block_1$6,
 		create_if_block_2$5,
 		create_if_block_3$5,
-		create_else_block$6
+		create_else_block$7
 	];
 
 	const if_blocks = [];
@@ -15003,7 +15083,7 @@ function tweened(value, defaults = {}) {
 
 /* libs/web-components/src/components/spinner/Spinner.svelte generated by Svelte v3.59.2 */
 
-function create_if_block$9(ctx) {
+function create_if_block$a(ctx) {
 	let svg;
 	let circle;
 	let circle_stroke_value;
@@ -15114,7 +15194,7 @@ function create_if_block$9(ctx) {
 
 function create_fragment$k(ctx) {
 	let if_block_anchor;
-	let if_block = /*ready*/ ctx[6] && create_if_block$9(ctx);
+	let if_block = /*ready*/ ctx[6] && create_if_block$a(ctx);
 
 	return {
 		c() {
@@ -15131,7 +15211,7 @@ function create_fragment$k(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$9(ctx);
+					if_block = create_if_block$a(ctx);
 					if_block.c();
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
 				}
@@ -15339,62 +15419,116 @@ customElements.define("goa-spinner", Spinner);
 
 /* libs/web-components/src/components/table/Table.svelte generated by Svelte v3.59.2 */
 
-function create_fragment$j(ctx) {
+function create_else_block$6(ctx) {
 	let table;
 	let slot;
-	let t0;
-	let template;
 	let table_style_value;
 
 	return {
 		c() {
 			table = element("table");
 			slot = element("slot");
-			t0 = space();
-			template = element("template");
+			attr(table, "style", table_style_value = /*width*/ ctx[0] && "width: 100%;");
+		},
+		m(target, anchor) {
+			insert(target, table, anchor);
+			append(table, slot);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*width*/ 1 && table_style_value !== (table_style_value = /*width*/ ctx[0] && "width: 100%;")) {
+				attr(table, "style", table_style_value);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(table);
+		}
+	};
+}
+
+// (83:2) {#if _isTableRoot}
+function create_if_block$9(ctx) {
+	let slot;
+
+	return {
+		c() {
+			slot = element("slot");
+		},
+		m(target, anchor) {
+			insert(target, slot, anchor);
+		},
+		p: noop,
+		d(detaching) {
+			if (detaching) detach(slot);
+		}
+	};
+}
 
-			template.innerHTML = `<thead><tr><th></th></tr></thead> 
-    <tbody><tr><td></td></tr></tbody> 
-    <tfoot><tr><td></td></tr></tfoot>`;
+function create_fragment$j(ctx) {
+	let div;
+	let div_class_value;
+	let div_style_value;
 
+	function select_block_type(ctx, dirty) {
+		if (/*_isTableRoot*/ ctx[7]) return create_if_block$9;
+		return create_else_block$6;
+	}
+
+	let current_block_type = select_block_type(ctx);
+	let if_block = current_block_type(ctx);
+
+	return {
+		c() {
+			div = element("div");
+			if_block.c();
 			this.c = noop;
-			attr(table, "class", /*variant*/ ctx[1]);
+			attr(div, "class", div_class_value = `goatable ${/*variant*/ ctx[1]}`);
 
-			attr(table, "style", table_style_value = `
-    ${/*width*/ ctx[0] ? `width: ${/*width*/ ctx[0]};` : ``}
+			attr(div, "style", div_style_value = `
+    ${/*width*/ ctx[0] && `width: ${/*width*/ ctx[0]};`}
     ${calculateMargin(/*mt*/ ctx[2], /*mr*/ ctx[3], /*mb*/ ctx[4], /*ml*/ ctx[5])}
   `);
 
-			toggle_class(table, "sticky", /*_stickyHeader*/ ctx[7]);
+			toggle_class(div, "sticky", /*_stickyHeader*/ ctx[8]);
 		},
 		m(target, anchor) {
-			insert(target, table, anchor);
-			append(table, slot);
-			append(table, t0);
-			append(table, template);
-			/*table_binding*/ ctx[9](table);
+			insert(target, div, anchor);
+			if_block.m(div, null);
+			/*div_binding*/ ctx[10](div);
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*variant*/ 2) {
-				attr(table, "class", /*variant*/ ctx[1]);
+			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
+				if_block.p(ctx, dirty);
+			} else {
+				if_block.d(1);
+				if_block = current_block_type(ctx);
+
+				if (if_block) {
+					if_block.c();
+					if_block.m(div, null);
+				}
 			}
 
-			if (dirty & /*width, mt, mr, mb, ml*/ 61 && table_style_value !== (table_style_value = `
-    ${/*width*/ ctx[0] ? `width: ${/*width*/ ctx[0]};` : ``}
+			if (dirty & /*variant*/ 2 && div_class_value !== (div_class_value = `goatable ${/*variant*/ ctx[1]}`)) {
+				attr(div, "class", div_class_value);
+			}
+
+			if (dirty & /*width, mt, mr, mb, ml*/ 61 && div_style_value !== (div_style_value = `
+    ${/*width*/ ctx[0] && `width: ${/*width*/ ctx[0]};`}
     ${calculateMargin(/*mt*/ ctx[2], /*mr*/ ctx[3], /*mb*/ ctx[4], /*ml*/ ctx[5])}
   `)) {
-				attr(table, "style", table_style_value);
+				attr(div, "style", div_style_value);
 			}
 
-			if (dirty & /*variant, _stickyHeader*/ 130) {
-				toggle_class(table, "sticky", /*_stickyHeader*/ ctx[7]);
+			if (dirty & /*variant, _stickyHeader*/ 258) {
+				toggle_class(div, "sticky", /*_stickyHeader*/ ctx[8]);
 			}
 		},
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(table);
-			/*table_binding*/ ctx[9](null);
+			if (detaching) detach(div);
+			if_block.d();
+			/*div_binding*/ ctx[10](null);
 		}
 	};
 }
@@ -15423,6 +15557,8 @@ function instance$g($$self, $$props, $$invalidate) {
 	// Private
 	let _rootEl;
 
+	let _isTableRoot = false;
+
 	onMount(() => {
 		validateVariant(variant);
 
@@ -15436,10 +15572,8 @@ function instance$g($$self, $$props, $$invalidate) {
 			return;
 		}
 
-		// React needs to nest data in a <table>...</table>
-		const content = slot.assignedElements()[0].querySelectorAll("template table > *");
-
-		_rootEl.append(...content.length > 0 ? content : slot.assignedElements());
+		// React has everything nested in a table to prevent invalid DOM errors
+		$$invalidate(7, _isTableRoot = slot.assignedElements()[0].tagName === "TABLE");
 	});
 
 	async function attachSortEventHandling() {
@@ -15488,7 +15622,7 @@ function instance$g($$self, $$props, $$invalidate) {
 		});
 	}
 
-	function table_binding($$value) {
+	function div_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			_rootEl = $$value;
 			$$invalidate(6, _rootEl);
@@ -15497,7 +15631,7 @@ function instance$g($$self, $$props, $$invalidate) {
 
 	$$self.$$set = $$props => {
 		if ('width' in $$props) $$invalidate(0, width = $$props.width);
-		if ('stickyheader' in $$props) $$invalidate(8, stickyheader = $$props.stickyheader);
+		if ('stickyheader' in $$props) $$invalidate(9, stickyheader = $$props.stickyheader);
 		if ('variant' in $$props) $$invalidate(1, variant = $$props.variant);
 		if ('mt' in $$props) $$invalidate(2, mt = $$props.mt);
 		if ('mr' in $$props) $$invalidate(3, mr = $$props.mr);
@@ -15506,8 +15640,8 @@ function instance$g($$self, $$props, $$invalidate) {
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*stickyheader*/ 256) {
-			$$invalidate(7, _stickyHeader = toBoolean(stickyheader));
+		if ($$self.$$.dirty & /*stickyheader*/ 512) {
+			$$invalidate(8, _stickyHeader = toBoolean(stickyheader));
 		}
 	};
 
@@ -15519,9 +15653,10 @@ function instance$g($$self, $$props, $$invalidate) {
 		mb,
 		ml,
 		_rootEl,
+		_isTableRoot,
 		_stickyHeader,
 		stickyheader,
-		table_binding
+		div_binding
 	];
 }
 
@@ -15529,7 +15664,7 @@ class Table extends SvelteElement {
 	constructor(options) {
 		super();
 		const style = document.createElement('style');
-		style.textContent = `:host{overflow-x:auto}table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{font:var(--goa-typography-body-m);padding:0.75rem 1rem;border-bottom:1px solid var(--goa-color-greyscale-200)}table .goa-table-number-column{font:var(--goa-typography-number-m);text-align:right}table.relaxed td{padding:1rem}th{background-color:var(--goa-color-greyscale-white);color:var(--goa-color-text-secondary);padding:1rem;text-align:left;border-bottom:2px solid var(--goa-color-greyscale-600);vertical-align:bottom}th:has(goa-table-sort-header){padding:0}tfoot td{background-color:var(--goa-color-greyscale-100)}tfoot tr:first-child td{border-top:2px solid var(--goa-color-greyscale-200)}tfoot tr:last-child td{border-bottom:none}`;
+		style.textContent = `:host{overflow-x:auto}table{border-collapse:collapse}`;
 		this.shadowRoot.appendChild(style);
 
 		init(
@@ -15544,7 +15679,7 @@ class Table extends SvelteElement {
 			safe_not_equal,
 			{
 				width: 0,
-				stickyheader: 8,
+				stickyheader: 9,
 				variant: 1,
 				mt: 2,
 				mr: 3,
@@ -15580,7 +15715,7 @@ class Table extends SvelteElement {
 	}
 
 	get stickyheader() {
-		return this.$$.ctx[8];
+		return this.$$.ctx[9];
 	}
 
 	set stickyheader(stickyheader) {