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

package/web-components.es.js

@@ -835,7 +835,7 @@ if (typeof HTMLElement === 'function') {
 
 /* libs/web-components/src/components/page-block/PageBlock.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$A(ctx) {
+function create_fragment$C(ctx) {
 	let div;
 
 	return {
@@ -870,7 +870,7 @@ class PageBlock extends SvelteElement {
 				customElement: true
 			},
 			null,
-			create_fragment$A,
+			create_fragment$C,
 			safe_not_equal,
 			{},
 			null
@@ -888,7 +888,7 @@ customElements.define("goa-page-block", PageBlock);
 
 /* libs/web-components/src/components/app-header/AppHeader.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$z(ctx) {
+function create_fragment$B(ctx) {
 	let div1;
 	let a;
 	let img0;
@@ -959,7 +959,7 @@ function create_fragment$z(ctx) {
 	};
 }
 
-function instance$v($$self, $$props, $$invalidate) {
+function instance$x($$self, $$props, $$invalidate) {
 	let { url = "#" } = $$props;
 	let { title = "" } = $$props;
 	let { testid = "" } = $$props;
@@ -985,8 +985,8 @@ class AppHeader extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$v,
-			create_fragment$z,
+			instance$x,
+			create_fragment$B,
 			safe_not_equal,
 			{ url: 0, title: 1, testid: 2 },
 			null
@@ -1536,7 +1536,7 @@ function create_each_block$2(key_1, ctx) {
 	};
 }
 
-function create_fragment$y(ctx) {
+function create_fragment$A(ctx) {
 	let hr;
 	let t0;
 	let div3;
@@ -1715,7 +1715,7 @@ function create_fragment$y(ctx) {
 	};
 }
 
-function instance$u($$self, $$props, $$invalidate) {
+function instance$w($$self, $$props, $$invalidate) {
 	let isDefaultFooter;
 	let isMetaLinksOnlyFooter;
 	let isNavigationLinksOnlyFooter;
@@ -1862,8 +1862,8 @@ class AppFooter extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$u,
-			create_fragment$y,
+			instance$w,
+			create_fragment$A,
 			safe_not_equal,
 			{
 				id: 14,
@@ -1958,7 +1958,7 @@ customElements.define("goa-app-footer", AppFooter);
 
 /* libs/web-components/src/components/app-footer/MetaLink.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$x(ctx) {
+function create_fragment$z(ctx) {
 	return {
 		c() {
 			this.c = noop;
@@ -1971,7 +1971,7 @@ function create_fragment$x(ctx) {
 	};
 }
 
-function instance$t($$self, $$props, $$invalidate) {
+function instance$v($$self, $$props, $$invalidate) {
 	let { footerid = "goa-app-footer-id" } = $$props;
 	let { title = "" } = $$props;
 	let { url = "" } = $$props;
@@ -2002,8 +2002,8 @@ class MetaLink extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$t,
-			create_fragment$x,
+			instance$v,
+			create_fragment$z,
 			safe_not_equal,
 			{ footerid: 0, title: 1, url: 2 },
 			null
@@ -2057,7 +2057,7 @@ customElements.define("goa-meta-link", MetaLink);
 
 /* libs/web-components/src/components/app-footer/NavigationLink.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$w(ctx) {
+function create_fragment$y(ctx) {
 	return {
 		c() {
 			this.c = noop;
@@ -2070,7 +2070,7 @@ function create_fragment$w(ctx) {
 	};
 }
 
-function instance$s($$self, $$props, $$invalidate) {
+function instance$u($$self, $$props, $$invalidate) {
 	let { footerid = "goa-app-footer-id" } = $$props;
 	let { title = "" } = $$props;
 	let { url = "" } = $$props;
@@ -2109,8 +2109,8 @@ class NavigationLink extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$s,
-			create_fragment$w,
+			instance$u,
+			create_fragment$y,
 			safe_not_equal,
 			{
 				footerid: 0,
@@ -2255,7 +2255,7 @@ function create_if_block$f(ctx) {
 	};
 }
 
-function create_fragment$v(ctx) {
+function create_fragment$x(ctx) {
 	let div;
 	let t;
 	let div_class_value;
@@ -2335,7 +2335,7 @@ function create_fragment$v(ctx) {
 	};
 }
 
-function instance$r($$self, $$props, $$invalidate) {
+function instance$t($$self, $$props, $$invalidate) {
 	let showIcon;
 	let iconType;
 	let { type } = $$props;
@@ -2376,7 +2376,7 @@ function instance$r($$self, $$props, $$invalidate) {
 class Badge extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-badge{display:inline-flex;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--fw-regular);margin:0.25rem}.icon-only{padding:0.25rem}.goa-badge-content{text-transform:capitalize;font-size:var(--fs-sm);line-height:var(--lh-sm)}.goa-badge.badge-information{background-color:var(--color-gray-100);color:var(--goa-color-status-info)}.goa-badge.badge-success{background-color:var(--goa-color-status-success);color:var(--goa-color-text-light)}.goa-badge.badge-warning{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.goa-badge.badge-emergency{background-color:var(--goa-color-status-emergency);color:var(--goa-color-text-light)}.goa-badge.badge-dark{background-color:var(--color-black);color:var(--goa-color-text-light)}.goa-badge.badge-midtone{background-color:var(--color-gray-600);color:var(--goa-color-text-light)}.goa-badge.badge-light{background-color:var(--color-white);color:var(--goa-color-text)}.goa-badge.badge-inactive{background-color:var(--color-white);color:var(--goa-color-text)}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-badge{display:inline-flex;align-items:center;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--fw-regular);margin:0.25rem}.icon-only{padding:0.25rem}.goa-badge-content{text-transform:capitalize;font-size:var(--fs-sm);line-height:var(--lh-sm);padding-bottom:var(--font-valign-fix)}.goa-badge.badge-information{background-color:var(--color-gray-100);color:var(--goa-color-status-info)}.goa-badge.badge-success{background-color:var(--goa-color-status-success);color:var(--goa-color-text-light)}.goa-badge.badge-warning{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.goa-badge.badge-emergency{background-color:var(--goa-color-status-emergency);color:var(--goa-color-text-light)}.goa-badge.badge-dark{background-color:var(--color-black);color:var(--goa-color-text-light)}.goa-badge.badge-midtone{background-color:var(--color-gray-600);color:var(--goa-color-text-light)}.goa-badge.badge-light{background-color:var(--color-white);color:var(--goa-color-text)}.goa-badge.badge-inactive{background-color:var(--color-white);color:var(--goa-color-text)}</style>`;
 
 		init(
 			this,
@@ -2385,8 +2385,8 @@ class Badge extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$r,
-			create_fragment$v,
+			instance$t,
+			create_fragment$x,
 			safe_not_equal,
 			{ type: 0, testid: 1, icon: 5, content: 2 },
 			null
@@ -2451,7 +2451,7 @@ customElements.define("goa-badge", Badge);
 
 function create_else_block$2(ctx) {
 	let t0;
-	let slot;
+	let div;
 	let t1;
 	let if_block1_anchor;
 	let if_block0 = /*leadingicon*/ ctx[4] && create_if_block_2$6(ctx);
@@ -2461,15 +2461,17 @@ function create_else_block$2(ctx) {
 		c() {
 			if (if_block0) if_block0.c();
 			t0 = space();
-			slot = element("slot");
+			div = element("div");
+			div.innerHTML = `<slot></slot>`;
 			t1 = space();
 			if (if_block1) if_block1.c();
 			if_block1_anchor = empty();
+			attr(div, "class", "text");
 		},
 		m(target, anchor) {
 			if (if_block0) if_block0.m(target, anchor);
 			insert(target, t0, anchor);
-			insert(target, slot, anchor);
+			insert(target, div, anchor);
 			insert(target, t1, anchor);
 			if (if_block1) if_block1.m(target, anchor);
 			insert(target, if_block1_anchor, anchor);
@@ -2504,7 +2506,7 @@ function create_else_block$2(ctx) {
 		d(detaching) {
 			if (if_block0) if_block0.d(detaching);
 			if (detaching) detach(t0);
-			if (detaching) detach(slot);
+			if (detaching) detach(div);
 			if (detaching) detach(t1);
 			if (if_block1) if_block1.d(detaching);
 			if (detaching) detach(if_block1_anchor);
@@ -2512,43 +2514,47 @@ function create_else_block$2(ctx) {
 	};
 }
 
-// (52:2) {#if type === "start"}
+// (55:2) {#if type === "start"}
 function create_if_block$e(ctx) {
-	let slot;
+	let div;
 	let t;
 	let goa_icon;
 
 	return {
 		c() {
-			slot = element("slot");
+			div = element("div");
+			div.innerHTML = `<slot></slot>`;
 			t = space();
 			goa_icon = element("goa-icon");
+			attr(div, "class", "text");
+			set_custom_element_data(goa_icon, "id", "trailing-icon");
 			set_custom_element_data(goa_icon, "type", "arrow-forward");
 			set_custom_element_data(goa_icon, "inverted", "true");
 		},
 		m(target, anchor) {
-			insert(target, slot, anchor);
+			insert(target, div, anchor);
 			insert(target, t, anchor);
 			insert(target, goa_icon, anchor);
 		},
 		p: noop,
 		d(detaching) {
-			if (detaching) detach(slot);
+			if (detaching) detach(div);
 			if (detaching) detach(t);
 			if (detaching) detach(goa_icon);
 		}
 	};
 }
 
-// (56:4) {#if leadingicon}
+// (61:4) {#if leadingicon}
 function create_if_block_2$6(ctx) {
 	let goa_icon;
 
 	return {
 		c() {
 			goa_icon = element("goa-icon");
+			set_custom_element_data(goa_icon, "id", "leading-icon");
 			set_custom_element_data(goa_icon, "type", /*leadingicon*/ ctx[4]);
-			set_custom_element_data(goa_icon, "inverted", "true");
+			set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[7]);
 		},
 		m(target, anchor) {
 			insert(target, goa_icon, anchor);
@@ -2557,6 +2563,10 @@ function create_if_block_2$6(ctx) {
 			if (dirty & /*leadingicon*/ 16) {
 				set_custom_element_data(goa_icon, "type", /*leadingicon*/ ctx[4]);
 			}
+
+			if (dirty & /*isButtonDark*/ 128) {
+				set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[7]);
+			}
 		},
 		d(detaching) {
 			if (detaching) detach(goa_icon);
@@ -2564,15 +2574,16 @@ function create_if_block_2$6(ctx) {
 	};
 }
 
-// (60:4) {#if trailingicon}
+// (67:4) {#if trailingicon}
 function create_if_block_1$a(ctx) {
 	let goa_icon;
 
 	return {
 		c() {
 			goa_icon = element("goa-icon");
+			set_custom_element_data(goa_icon, "id", "trailing-icon");
 			set_custom_element_data(goa_icon, "type", /*trailingicon*/ ctx[5]);
-			set_custom_element_data(goa_icon, "inverted", "true");
+			set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[7]);
 		},
 		m(target, anchor) {
 			insert(target, goa_icon, anchor);
@@ -2581,6 +2592,10 @@ function create_if_block_1$a(ctx) {
 			if (dirty & /*trailingicon*/ 32) {
 				set_custom_element_data(goa_icon, "type", /*trailingicon*/ ctx[5]);
 			}
+
+			if (dirty & /*isButtonDark*/ 128) {
+				set_custom_element_data(goa_icon, "inverted", /*isButtonDark*/ ctx[7]);
+			}
 		},
 		d(detaching) {
 			if (detaching) detach(goa_icon);
@@ -2588,7 +2603,7 @@ function create_if_block_1$a(ctx) {
 	};
 }
 
-function create_fragment$u(ctx) {
+function create_fragment$w(ctx) {
 	let button;
 	let button_class_value;
 	let mounted;
@@ -2609,8 +2624,10 @@ function create_fragment$u(ctx) {
 			this.c = noop;
 			attr(button, "class", button_class_value = "" + (/*type*/ ctx[0] + " " + /*size*/ ctx[1] + " " + /*variant*/ ctx[2]));
 			attr(button, "title", /*title*/ ctx[3]);
-			button.disabled = /*isDisabled*/ ctx[7];
+			button.disabled = /*isDisabled*/ ctx[8];
 			attr(button, "data-testid", /*testid*/ ctx[6]);
+			toggle_class(button, "leading", /*leadingicon*/ ctx[4]);
+			toggle_class(button, "trailing", /*trailingicon*/ ctx[5] || /*type*/ ctx[0] === "start");
 		},
 		m(target, anchor) {
 			insert(target, button, anchor);
@@ -2642,13 +2659,21 @@ function create_fragment$u(ctx) {
 				attr(button, "title", /*title*/ ctx[3]);
 			}
 
-			if (dirty & /*isDisabled*/ 128) {
-				button.disabled = /*isDisabled*/ ctx[7];
+			if (dirty & /*isDisabled*/ 256) {
+				button.disabled = /*isDisabled*/ ctx[8];
 			}
 
 			if (dirty & /*testid*/ 64) {
 				attr(button, "data-testid", /*testid*/ ctx[6]);
 			}
+
+			if (dirty & /*type, size, variant, leadingicon*/ 23) {
+				toggle_class(button, "leading", /*leadingicon*/ ctx[4]);
+			}
+
+			if (dirty & /*type, size, variant, trailingicon, type*/ 39) {
+				toggle_class(button, "trailing", /*trailingicon*/ ctx[5] || /*type*/ ctx[0] === "start");
+			}
 		},
 		i: noop,
 		o: noop,
@@ -2666,8 +2691,9 @@ function clickHandler(e) {
 	e.stopPropagation();
 }
 
-function instance$q($$self, $$props, $$invalidate) {
+function instance$s($$self, $$props, $$invalidate) {
 	let isDisabled;
+	let isButtonDark;
 	const BUTTON_TYPES = ["primary", "secondary", "tertiary", "start"];
 	const SIZES = ["", "compact"];
 	const VARIANTS = ["", "danger"];
@@ -2713,15 +2739,19 @@ function instance$q($$self, $$props, $$invalidate) {
 		if ('size' in $$props) $$invalidate(1, size = $$props.size);
 		if ('variant' in $$props) $$invalidate(2, variant = $$props.variant);
 		if ('title' in $$props) $$invalidate(3, title = $$props.title);
-		if ('disabled' in $$props) $$invalidate(8, disabled = $$props.disabled);
+		if ('disabled' in $$props) $$invalidate(9, disabled = $$props.disabled);
 		if ('leadingicon' in $$props) $$invalidate(4, leadingicon = $$props.leadingicon);
 		if ('trailingicon' in $$props) $$invalidate(5, trailingicon = $$props.trailingicon);
 		if ('testid' in $$props) $$invalidate(6, testid = $$props.testid);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*disabled*/ 256) {
-			$$invalidate(7, isDisabled = toBoolean(disabled));
+		if ($$self.$$.dirty & /*disabled*/ 512) {
+			$$invalidate(8, isDisabled = toBoolean(disabled));
+		}
+
+		if ($$self.$$.dirty & /*type*/ 1) {
+			$$invalidate(7, isButtonDark = type === "primary" || type === "start");
 		}
 	};
 
@@ -2733,6 +2763,7 @@ function instance$q($$self, $$props, $$invalidate) {
 		leadingicon,
 		trailingicon,
 		testid,
+		isButtonDark,
 		isDisabled,
 		disabled
 	];
@@ -2742,8 +2773,8 @@ class Button extends SvelteElement {
 	constructor(options) {
 		super();
 
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@media(max-width: 480px){:host{width:100%}button{width:100%}}button{box-sizing:border-box;border-radius:0.25rem;border:2px solid var(--goa-color-interactive);box-sizing:border-box;cursor:pointer;font-family:var(--font-family);font-size:var(--fs-lg);font-weight:400;height:var(--button-height);letter-spacing:0.5px;line-height:100%;padding:0 0.75rem;display:flex;gap:0.5rem;align-items:center;justify-content:center;transition:transform 0.1s ease-in-out, background-color 0.2s ease-in-out,
-      border-color 0.2s ease-in-out}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--fs-base)}button.start{height:var(--button-height-tall);font-weight:var(--fw-bold)}button.start,button.primary{border:2px solid var(--goa-color-interactive);background:var(--goa-color-interactive);color:var(--goa-color-text-light)}button.start:hover,button.primary:hover{border-color:var(--goa-color-interactive--hover);background:var(--goa-color-interactive--hover)}button.start:focus,button.start:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive--focus);border-color:var(--goa-color-interactive--active);background:var(--goa-color-interactive--active);outline:none}button.secondary{border:2px solid var(--goa-color-interactive);background:var(--color-white);color:var(--goa-color-interactive)}button.secondary:hover{border-color:var(--goa-color-interactive--hover);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);background:var(--color-gray-100);outline:none}button.tertiary{border:1px solid transparent;background:var(--color-white);color:var(--goa-color-interactive);text-decoration:underline}button.tertiary:hover{border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--color-gray-100);background:var(--color-gray-100);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.primary.danger{color:var(--color-white);background:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency)}.primary.danger:hover{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.primary.danger:focus,.primary.danger:active{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.secondary.danger{color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);background:var(--color-white)}.secondary.danger:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.secondary.danger:focus,.secondary.danger:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.danger{color:var(--goa-color-status-emergency);border-color:var(--color-gray-200);background:var(--color-white)}.tertiary.danger:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.danger:focus,.tertiary.danger:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@media(max-width: 480px){:host{width:100%}button{width:100%}}button{display:flex;box-sizing:border-box;border-radius:0.25rem;border:2px solid var(--goa-color-interactive);box-sizing:border-box;cursor:pointer;font-family:var(--font-family);font-size:var(--fs-lg);font-weight:400;height:var(--button-height);letter-spacing:0.5px;line-height:100%;padding:0 0.75rem;gap:0.5rem;align-items:center;justify-content:center;transition:transform 0.1s ease-in-out, background-color 0.2s ease-in-out,
+      border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--fs-base)}button.start{height:var(--button-height-tall);font-weight:var(--fw-bold)}button.start,button.primary{border:2px solid var(--goa-color-interactive);background:var(--goa-color-interactive);color:var(--goa-color-text-light)}button.start:hover,button.primary:hover{border-color:var(--goa-color-interactive--hover);background:var(--goa-color-interactive--hover)}button.start:focus,button.start:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive--focus);border-color:var(--goa-color-interactive--active);background:var(--goa-color-interactive--active);outline:none}button.secondary{border:2px solid var(--goa-color-interactive);background:var(--color-white);color:var(--goa-color-interactive)}button.secondary:hover{border-color:var(--goa-color-interactive--hover);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);background:var(--color-gray-100);outline:none}button.tertiary{border:1px solid transparent;background:var(--color-white);color:var(--goa-color-interactive);text-decoration:underline}button.tertiary:hover{border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--color-gray-100);background:var(--color-gray-100);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.primary.danger{color:var(--color-white);background:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency)}.primary.danger:hover{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.primary.danger:focus,.primary.danger:active{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.secondary.danger{color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);background:var(--color-white)}.secondary.danger:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.secondary.danger:focus,.secondary.danger:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.danger{color:var(--goa-color-status-emergency);border-color:var(--color-gray-200);background:var(--color-white)}.tertiary.danger:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.danger:focus,.tertiary.danger:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}</style>`;
 
 		init(
 			this,
@@ -2752,15 +2783,15 @@ class Button extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$q,
-			create_fragment$u,
+			instance$s,
+			create_fragment$w,
 			safe_not_equal,
 			{
 				type: 0,
 				size: 1,
 				variant: 2,
 				title: 3,
-				disabled: 8,
+				disabled: 9,
 				leadingicon: 4,
 				trailingicon: 5,
 				testid: 6
@@ -2830,7 +2861,7 @@ class Button extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[8];
+		return this.$$.ctx[9];
 	}
 
 	set disabled(disabled) {
@@ -2870,7 +2901,7 @@ customElements.define("goa-button", Button);
 
 /* libs/web-components/src/components/button-group/ButtonGroup.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$t(ctx) {
+function create_fragment$v(ctx) {
 	let div;
 	let slot;
 
@@ -2903,7 +2934,7 @@ function create_fragment$t(ctx) {
 	};
 }
 
-function instance$p($$self, $$props, $$invalidate) {
+function instance$r($$self, $$props, $$invalidate) {
 	let { gap = "medium" } = $$props;
 	let { alignment } = $$props;
 
@@ -2927,8 +2958,8 @@ class ButtonGroup extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$p,
-			create_fragment$t,
+			instance$r,
+			create_fragment$v,
 			safe_not_equal,
 			{ gap: 0, alignment: 1 },
 			null
@@ -2973,7 +3004,7 @@ customElements.define("goa-button-group", ButtonGroup);
 
 /* libs/web-components/src/components/callout/Callout.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$s(ctx) {
+function create_fragment$u(ctx) {
 	let div;
 	let span0;
 	let goa_icon;
@@ -3043,7 +3074,7 @@ function create_fragment$s(ctx) {
 	};
 }
 
-function instance$o($$self, $$props, $$invalidate) {
+function instance$q($$self, $$props, $$invalidate) {
 	let iconType;
 	let { type } = $$props;
 	let { title } = $$props;
@@ -3084,8 +3115,8 @@ class Callout extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$o,
-			create_fragment$s,
+			instance$q,
+			create_fragment$u,
 			safe_not_equal,
 			{ type: 0, title: 1, testid: 2 },
 			null
@@ -3139,7 +3170,7 @@ customElements.define("goa-callout", Callout);
 
 /* libs/web-components/src/components/card/Card.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$r(ctx) {
+function create_fragment$t(ctx) {
 	let div;
 	let slot;
 	let div_style_value;
@@ -3179,7 +3210,7 @@ function create_fragment$r(ctx) {
 	};
 }
 
-function instance$n($$self, $$props, $$invalidate) {
+function instance$p($$self, $$props, $$invalidate) {
 	let { elevation = 0 } = $$props;
 	let { width = 320 } = $$props;
 	let { testId = "" } = $$props;
@@ -3207,8 +3238,8 @@ class Card extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$n,
-			create_fragment$r,
+			instance$p,
+			create_fragment$t,
 			safe_not_equal,
 			{ elevation: 0, width: 1, testId: 2 },
 			null
@@ -3262,7 +3293,7 @@ customElements.define("goa-card", Card);
 
 /* libs/web-components/src/components/card-actions/CardActions.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$q(ctx) {
+function create_fragment$s(ctx) {
 	let goa_card_content;
 
 	return {
@@ -3295,7 +3326,7 @@ class CardActions extends SvelteElement {
 				customElement: true
 			},
 			null,
-			create_fragment$q,
+			create_fragment$s,
 			safe_not_equal,
 			{},
 			null
@@ -3313,7 +3344,7 @@ customElements.define("goa-card-actions", CardActions);
 
 /* libs/web-components/src/components/card-content/CardContent.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$p(ctx) {
+function create_fragment$r(ctx) {
 	let div;
 
 	return {
@@ -3348,7 +3379,7 @@ class CardContent extends SvelteElement {
 				customElement: true
 			},
 			null,
-			create_fragment$p,
+			create_fragment$r,
 			safe_not_equal,
 			{},
 			null
@@ -3366,7 +3397,7 @@ customElements.define("goa-card-content", CardContent);
 
 /* libs/web-components/src/components/card-group/CardGroup.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$o(ctx) {
+function create_fragment$q(ctx) {
 	let div;
 
 	return {
@@ -3401,7 +3432,7 @@ class CardGroup extends SvelteElement {
 				customElement: true
 			},
 			null,
-			create_fragment$o,
+			create_fragment$q,
 			safe_not_equal,
 			{},
 			null
@@ -3419,7 +3450,7 @@ customElements.define("goa-card-group", CardGroup);
 
 /* libs/web-components/src/components/card-image/CardImage.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$n(ctx) {
+function create_fragment$p(ctx) {
 	let div;
 
 	return {
@@ -3452,7 +3483,7 @@ function create_fragment$n(ctx) {
 	};
 }
 
-function instance$m($$self, $$props, $$invalidate) {
+function instance$o($$self, $$props, $$invalidate) {
 	let { src } = $$props;
 	let { height = "100%" } = $$props;
 
@@ -3476,8 +3507,8 @@ class CardImage extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$m,
-			create_fragment$n,
+			instance$o,
+			create_fragment$p,
 			safe_not_equal,
 			{ src: 0, height: 1 },
 			null
@@ -3572,7 +3603,7 @@ function create_if_block$d(ctx) {
 	};
 }
 
-function create_fragment$m(ctx) {
+function create_fragment$o(ctx) {
 	let label;
 	let div0;
 	let input;
@@ -3706,7 +3737,7 @@ function create_fragment$m(ctx) {
 	};
 }
 
-function instance$l($$self, $$props, $$invalidate) {
+function instance$n($$self, $$props, $$invalidate) {
 	let id;
 	let isDisabled;
 	let isError;
@@ -3797,8 +3828,8 @@ class Checkbox extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$l,
-			create_fragment$m,
+			instance$n,
+			create_fragment$o,
 			safe_not_equal,
 			{
 				name: 0,
@@ -3920,7 +3951,7 @@ function create_if_block_1$8(ctx) {
 	};
 }
 
-// (40:2) {#if _deletable}
+// (42:2) {#if _deletable}
 function create_if_block$c(ctx) {
 	let goa_icon;
 	let goa_icon_fillcolor_value;
@@ -3964,9 +3995,10 @@ function create_if_block$c(ctx) {
 	};
 }
 
-function create_fragment$l(ctx) {
-	let div;
+function create_fragment$n(ctx) {
+	let div1;
 	let t0;
+	let div0;
 	let t1;
 	let t2;
 	let mounted;
@@ -3976,35 +4008,38 @@ function create_fragment$l(ctx) {
 
 	return {
 		c() {
-			div = element("div");
+			div1 = element("div");
 			if (if_block0) if_block0.c();
 			t0 = space();
+			div0 = element("div");
 			t1 = text(/*content*/ ctx[1]);
 			t2 = space();
 			if (if_block1) if_block1.c();
 			this.c = noop;
-			attr(div, "data-testid", "chip");
-			attr(div, "class", "chip");
-			attr(div, "tabindex", "0");
-			toggle_class(div, "deletable", /*_deletable*/ ctx[5]);
-			toggle_class(div, "error", /*_error*/ ctx[4]);
+			attr(div0, "class", "text");
+			attr(div1, "data-testid", "chip");
+			attr(div1, "class", "chip");
+			attr(div1, "tabindex", "0");
+			toggle_class(div1, "deletable", /*_deletable*/ ctx[5]);
+			toggle_class(div1, "error", /*_error*/ ctx[4]);
 		},
 		m(target, anchor) {
-			insert(target, div, anchor);
-			if (if_block0) if_block0.m(div, null);
-			append(div, t0);
-			append(div, t1);
-			append(div, t2);
-			if (if_block1) if_block1.m(div, null);
-			/*div_binding*/ ctx[9](div);
+			insert(target, div1, anchor);
+			if (if_block0) if_block0.m(div1, null);
+			append(div1, t0);
+			append(div1, div0);
+			append(div0, t1);
+			append(div1, t2);
+			if (if_block1) if_block1.m(div1, null);
+			/*div1_binding*/ ctx[9](div1);
 
 			if (!mounted) {
 				dispose = [
-					listen(div, "click", /*click_handler*/ ctx[10]),
-					listen(div, "mouseover", /*mouseover_handler*/ ctx[11]),
-					listen(div, "mouseout", /*mouseout_handler*/ ctx[12]),
-					listen(div, "focus", /*focus_handler*/ ctx[13]),
-					listen(div, "blur", /*blur_handler*/ ctx[14])
+					listen(div1, "click", /*click_handler*/ ctx[10]),
+					listen(div1, "mouseover", /*mouseover_handler*/ ctx[11]),
+					listen(div1, "mouseout", /*mouseout_handler*/ ctx[12]),
+					listen(div1, "focus", /*focus_handler*/ ctx[13]),
+					listen(div1, "blur", /*blur_handler*/ ctx[14])
 				];
 
 				mounted = true;
@@ -4017,7 +4052,7 @@ function create_fragment$l(ctx) {
 				} else {
 					if_block0 = create_if_block_1$8(ctx);
 					if_block0.c();
-					if_block0.m(div, t0);
+					if_block0.m(div1, t0);
 				}
 			} else if (if_block0) {
 				if_block0.d(1);
@@ -4032,7 +4067,7 @@ function create_fragment$l(ctx) {
 				} else {
 					if_block1 = create_if_block$c(ctx);
 					if_block1.c();
-					if_block1.m(div, null);
+					if_block1.m(div1, null);
 				}
 			} else if (if_block1) {
 				if_block1.d(1);
@@ -4040,27 +4075,27 @@ function create_fragment$l(ctx) {
 			}
 
 			if (dirty & /*_deletable*/ 32) {
-				toggle_class(div, "deletable", /*_deletable*/ ctx[5]);
+				toggle_class(div1, "deletable", /*_deletable*/ ctx[5]);
 			}
 
 			if (dirty & /*_error*/ 16) {
-				toggle_class(div, "error", /*_error*/ ctx[4]);
+				toggle_class(div1, "error", /*_error*/ ctx[4]);
 			}
 		},
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(div);
+			if (detaching) detach(div1);
 			if (if_block0) if_block0.d();
 			if (if_block1) if_block1.d();
-			/*div_binding*/ ctx[9](null);
+			/*div1_binding*/ ctx[9](null);
 			mounted = false;
 			run_all(dispose);
 		}
 	};
 }
 
-function instance$k($$self, $$props, $$invalidate) {
+function instance$m($$self, $$props, $$invalidate) {
 	let { leadingicon = null } = $$props;
 	let { error = "false" } = $$props;
 	let { deletable = "false" } = $$props;
@@ -4078,7 +4113,7 @@ function instance$k($$self, $$props, $$invalidate) {
 		e.stopPropagation();
 	}
 
-	function div_binding($$value) {
+	function div1_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			el = $$value;
 			$$invalidate(2, el);
@@ -4118,7 +4153,7 @@ function instance$k($$self, $$props, $$invalidate) {
 		onDelete,
 		error,
 		deletable,
-		div_binding,
+		div1_binding,
 		click_handler,
 		mouseover_handler,
 		mouseout_handler,
@@ -4130,7 +4165,7 @@ function instance$k($$self, $$props, $$invalidate) {
 class Chip extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>.leading-icon{margin-left:-0.25rem}.chip{vertical-align:middle;align-items:center;background-color:var(--color-white);border-radius:99px;border:1px solid #949494;box-sizing:border-box;color:var(--goa-color-text);display:inline-flex;flex-direction:row;font-size:var(--chip-font-size);font-weight:var(--fw-regular);gap:0.25rem;height:2rem;justify-content:center;margin:0.25rem;padding:0 0.75rem}.chip:focus{outline:2px solid var(--goa-color-interactive--focus);background-color:var(--color-white)}.chip:hover{background-color:var(--color-gray-200)}.deletable{cursor:pointer}.delete-icon{margin-right:-0.25rem}.error,.error:hover{background-color:var(--goa-color-status-emergency-light)}</style>`;
+		this.shadowRoot.innerHTML = `<style>.leading-icon{margin-left:-0.25rem}.chip{vertical-align:middle;align-items:center;background-color:var(--color-white);border-radius:99px;border:1px solid #949494;box-sizing:border-box;color:var(--goa-color-text);display:inline-flex;flex-direction:row;font-size:var(--chip-font-size);font-weight:var(--fw-regular);gap:0.25rem;height:2rem;justify-content:center;margin:0.25rem;padding:0 0.75rem}.text{padding-bottom:var(--font-valign-fix)}.chip:focus{outline:2px solid var(--goa-color-interactive--focus);background-color:var(--color-white)}.chip:hover{background-color:var(--color-gray-200)}.deletable{cursor:pointer}.delete-icon{margin-right:-0.25rem}.error,.error:hover{background-color:var(--goa-color-status-emergency-light)}</style>`;
 
 		init(
 			this,
@@ -4139,8 +4174,8 @@ class Chip extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$k,
-			create_fragment$l,
+			instance$m,
+			create_fragment$n,
 			safe_not_equal,
 			{
 				leadingicon: 0,
@@ -4208,7 +4243,7 @@ customElements.define("goa-chip", Chip);
 
 /* libs/web-components/src/components/container/Container.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$k(ctx) {
+function create_fragment$m(ctx) {
 	let div3;
 	let header;
 	let div0;
@@ -4236,7 +4271,12 @@ function create_fragment$k(ctx) {
 			attr(div1, "class", "actions");
 			attr(header, "class", header_class_value = "heading--" + /*headingsize*/ ctx[1]);
 			attr(div2, "class", "content");
-			attr(div3, "class", div3_class_value = "goa-container goa-container--" + /*variant*/ ctx[0]);
+
+			attr(div3, "class", div3_class_value = `
+    goa-container 
+    goa-container--${/*variant*/ ctx[0]}
+    padding--${/*padding*/ ctx[2]}
+  `);
 		},
 		m(target, anchor) {
 			insert(target, div3, anchor);
@@ -4252,7 +4292,11 @@ function create_fragment$k(ctx) {
 				attr(header, "class", header_class_value);
 			}
 
-			if (dirty & /*variant*/ 1 && div3_class_value !== (div3_class_value = "goa-container goa-container--" + /*variant*/ ctx[0])) {
+			if (dirty & /*variant, padding*/ 5 && div3_class_value !== (div3_class_value = `
+    goa-container 
+    goa-container--${/*variant*/ ctx[0]}
+    padding--${/*padding*/ ctx[2]}
+  `)) {
 				attr(div3, "class", div3_class_value);
 			}
 		},
@@ -4264,22 +4308,24 @@ function create_fragment$k(ctx) {
 	};
 }
 
-function instance$j($$self, $$props, $$invalidate) {
+function instance$l($$self, $$props, $$invalidate) {
 	let { variant = 'default' } = $$props;
 	let { headingsize = 'large' } = $$props;
+	let { padding = "relaxed" } = $$props;
 
 	$$self.$$set = $$props => {
 		if ('variant' in $$props) $$invalidate(0, variant = $$props.variant);
 		if ('headingsize' in $$props) $$invalidate(1, headingsize = $$props.headingsize);
+		if ('padding' in $$props) $$invalidate(2, padding = $$props.padding);
 	};
 
-	return [variant, headingsize];
+	return [variant, headingsize, padding];
 }
 
 class Container extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);padding-left:1.5rem;padding-right:1.5rem}.content{padding:1.5rem;border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--default header{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-black)}.goa-container--primary header{background-color:var(--goa-color-brand);border-color:var(--goa-color-brand);color:var(--color-white)}.goa-container--info header{background-color:var(--goa-color-status-info);border-color:var(--goa-color-status-info);color:var(--color-white)}.goa-container--error header{background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);color:var(--color-white)}.goa-container--success header{background-color:var(--goa-color-status-success);border-color:var(--goa-color-status-success);color:var(--color-white)}.goa-container--warning header{background-color:var(--goa-color-status-warning);border-color:var(--goa-color-status-warning);color:var(--color-white)}.heading--large{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--large .title{line-height:2rem}.heading--small{height:0.5rem}.heading--none{display:none}.heading--none~.content{border-top:1px solid var(--color-gray-200);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.heading--small .title,.heading--small .actions{display:none}.actions{display:flex;align-items:center}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.title>*,.actions>*{line-height:3rem}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--default header{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-black)}.goa-container--primary header{background-color:var(--goa-color-brand);border-color:var(--goa-color-brand);color:var(--color-white)}.goa-container--info header{background-color:var(--goa-color-status-info);border-color:var(--goa-color-status-info);color:var(--color-white)}.goa-container--error header{background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);color:var(--color-white)}.goa-container--success header{background-color:var(--goa-color-status-success);border-color:var(--goa-color-status-success);color:var(--color-white)}.goa-container--warning header{background-color:var(--goa-color-status-warning);border-color:var(--goa-color-status-warning);color:var(--color-white)}.heading--large{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--large .title{line-height:2rem}.heading--small{height:0.5rem}.heading--none{display:none}.heading--none~.content{border-top:1px solid var(--color-gray-200);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.heading--small .title,.heading--small .actions{display:none}.actions{display:flex;align-items:center}</style>`;
 
 		init(
 			this,
@@ -4288,10 +4334,10 @@ class Container extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$j,
-			create_fragment$k,
+			instance$l,
+			create_fragment$m,
 			safe_not_equal,
-			{ variant: 0, headingsize: 1 },
+			{ variant: 0, headingsize: 1, padding: 2 },
 			null
 		);
 
@@ -4308,7 +4354,7 @@ class Container extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["variant", "headingsize"];
+		return ["variant", "headingsize", "padding"];
 	}
 
 	get variant() {
@@ -4328,6 +4374,15 @@ class Container extends SvelteElement {
 		this.$$set({ headingsize });
 		flush();
 	}
+
+	get padding() {
+		return this.$$.ctx[2];
+	}
+
+	set padding(padding) {
+		this.$$set({ padding });
+		flush();
+	}
 }
 
 customElements.define("goa-container", Container);
@@ -4338,12 +4393,12 @@ const BIND$1 = "bind";
 
 function get_each_context$1(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[32] = list[i];
-	child_ctx[34] = i;
+	child_ctx[34] = list[i];
+	child_ctx[36] = i;
 	return child_ctx;
 }
 
-// (144:2) {#if isMenuVisible}
+// (172:2) {#if isMenuVisible}
 function create_if_block$b(ctx) {
 	let div;
 	let div_data_testid_value;
@@ -4353,7 +4408,7 @@ function create_if_block$b(ctx) {
 	return {
 		c() {
 			div = element("div");
-			attr(div, "data-testid", div_data_testid_value = `${/*name*/ ctx[1]}-dropdown-background`);
+			attr(div, "data-testid", div_data_testid_value = `${/*name*/ ctx[0]}-dropdown-background`);
 			attr(div, "class", "goa-dropdown-background");
 		},
 		m(target, anchor) {
@@ -4365,7 +4420,7 @@ function create_if_block$b(ctx) {
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*name*/ 2 && div_data_testid_value !== (div_data_testid_value = `${/*name*/ ctx[1]}-dropdown-background`)) {
+			if (dirty[0] & /*name*/ 1 && div_data_testid_value !== (div_data_testid_value = `${/*name*/ ctx[0]}-dropdown-background`)) {
 				attr(div, "data-testid", div_data_testid_value);
 			}
 		},
@@ -4377,10 +4432,10 @@ function create_if_block$b(ctx) {
 	};
 }
 
-// (179:4) {#each options as option, index (option.value)}
+// (208:4) {#each options as option, index (option.value)}
 function create_each_block$1(key_1, ctx) {
 	let li;
-	let t0_value = /*option*/ ctx[32].label + "";
+	let t0_value = /*option*/ ctx[34].label + "";
 	let t0;
 	let t1;
 	let li_data_testid_value;
@@ -4390,7 +4445,7 @@ function create_each_block$1(key_1, ctx) {
 	let dispose;
 
 	function click_handler() {
-		return /*click_handler*/ ctx[20](/*option*/ ctx[32]);
+		return /*click_handler*/ ctx[22](/*option*/ ctx[34]);
 	}
 
 	return {
@@ -4400,13 +4455,13 @@ function create_each_block$1(key_1, ctx) {
 			li = element("li");
 			t0 = text(t0_value);
 			t1 = space();
-			attr(li, "data-testid", li_data_testid_value = `${/*option*/ ctx[32].value}-dropdown-item`);
-			attr(li, "data-index", li_data_index_value = /*index*/ ctx[34]);
+			attr(li, "data-testid", li_data_testid_value = `${/*option*/ ctx[34].value}-dropdown-item`);
+			attr(li, "data-index", li_data_index_value = /*index*/ ctx[36]);
 			attr(li, "class", "goa-dropdown-option");
 			attr(li, "style", li_style_value = `display: ${"block"}`);
 			toggle_class(li, "goa-dropdown-option--disabled", false);
-			toggle_class(li, "goa-dropdown-option--tabbed", /*index*/ ctx[34] === /*highlightedIndex*/ ctx[11]);
-			toggle_class(li, "goa-dropdown-option--selected", /*option*/ ctx[32].value === /*value*/ ctx[0]);
+			toggle_class(li, "goa-dropdown-option--tabbed", /*index*/ ctx[36] === /*highlightedIndex*/ ctx[11]);
+			toggle_class(li, "goa-dropdown-option--selected", /*_values*/ ctx[7].includes(/*option*/ ctx[34].value));
 			this.first = li;
 		},
 		m(target, anchor) {
@@ -4421,22 +4476,22 @@ function create_each_block$1(key_1, ctx) {
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
-			if (dirty[0] & /*options*/ 256 && t0_value !== (t0_value = /*option*/ ctx[32].label + "")) set_data(t0, t0_value);
+			if (dirty[0] & /*options*/ 256 && t0_value !== (t0_value = /*option*/ ctx[34].label + "")) set_data(t0, t0_value);
 
-			if (dirty[0] & /*options*/ 256 && li_data_testid_value !== (li_data_testid_value = `${/*option*/ ctx[32].value}-dropdown-item`)) {
+			if (dirty[0] & /*options*/ 256 && li_data_testid_value !== (li_data_testid_value = `${/*option*/ ctx[34].value}-dropdown-item`)) {
 				attr(li, "data-testid", li_data_testid_value);
 			}
 
-			if (dirty[0] & /*options*/ 256 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[34])) {
+			if (dirty[0] & /*options*/ 256 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[36])) {
 				attr(li, "data-index", li_data_index_value);
 			}
 
 			if (dirty[0] & /*options, highlightedIndex*/ 2304) {
-				toggle_class(li, "goa-dropdown-option--tabbed", /*index*/ ctx[34] === /*highlightedIndex*/ ctx[11]);
+				toggle_class(li, "goa-dropdown-option--tabbed", /*index*/ ctx[36] === /*highlightedIndex*/ ctx[11]);
 			}
 
-			if (dirty[0] & /*options, value*/ 257) {
-				toggle_class(li, "goa-dropdown-option--selected", /*option*/ ctx[32].value === /*value*/ ctx[0]);
+			if (dirty[0] & /*_values, options*/ 384) {
+				toggle_class(li, "goa-dropdown-option--selected", /*_values*/ ctx[7].includes(/*option*/ ctx[34].value));
 			}
 		},
 		d(detaching) {
@@ -4447,7 +4502,7 @@ function create_each_block$1(key_1, ctx) {
 	};
 }
 
-function create_fragment$j(ctx) {
+function create_fragment$l(ctx) {
 	let div1;
 	let t0;
 	let div0;
@@ -4466,7 +4521,7 @@ function create_fragment$j(ctx) {
 	let dispose;
 	let if_block = /*isMenuVisible*/ ctx[10] && create_if_block$b(ctx);
 	let each_value = /*options*/ ctx[8];
-	const get_key = ctx => /*option*/ ctx[32].value;
+	const get_key = ctx => /*option*/ ctx[34].value;
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context$1(ctx, each_value, i);
@@ -4492,22 +4547,23 @@ function create_fragment$j(ctx) {
 
 			this.c = noop;
 			set_custom_element_data(goa_input, "error", /*isError*/ ctx[15]);
-			set_custom_element_data(goa_input, "disabled", /*disabled*/ ctx[5]);
-			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, "width", goa_input_width_value = /*width*/ ctx[7] || /*computedWidth*/ ctx[12]);
-			set_custom_element_data(goa_input, "id", goa_input_id_value = `${/*name*/ ctx[1]}-dropdown-input`);
+			set_custom_element_data(goa_input, "disabled", /*disabled*/ ctx[4]);
+			set_custom_element_data(goa_input, "leadingicon", /*leadingicon*/ ctx[1]);
+			set_custom_element_data(goa_input, "placeholder", /*placeholder*/ ctx[3]);
+			set_custom_element_data(goa_input, "width", goa_input_width_value = /*width*/ ctx[6] || /*computedWidth*/ ctx[12]);
+			set_custom_element_data(goa_input, "id", goa_input_id_value = `${/*name*/ ctx[0]}-dropdown-input`);
 			set_custom_element_data(goa_input, "name", "search");
 			set_custom_element_data(goa_input, "readonly", "");
 			set_custom_element_data(goa_input, "trailingicon", "chevron-down");
 			set_custom_element_data(goa_input, "type", "text");
 			set_custom_element_data(goa_input, "value", /*selectedLabel*/ ctx[9]);
-			attr(div0, "data-testid", div0_data_testid_value = `${/*name*/ ctx[1]}-dropdown`);
+			attr(div0, "data-testid", div0_data_testid_value = `${/*name*/ ctx[0]}-dropdown`);
+			attr(ul, "data-testid", "dropdown-menu");
 			attr(ul, "tabindex", "0");
 			attr(ul, "class", "goa-dropdown-list");
-			attr(ul, "style", ul_style_value = `overflow-y: auto; max-height: ${/*maxheight*/ ctx[3]}px`);
+			attr(ul, "style", ul_style_value = `overflow-y: auto; max-height: ${/*maxheight*/ ctx[2]}`);
 			toggle_class(ul, "dropdown-active", /*isMenuVisible*/ ctx[10]);
-			attr(div1, "data-testid", /*testid*/ ctx[6]);
+			attr(div1, "data-testid", /*testid*/ ctx[5]);
 			attr(div1, "class", "goa-dropdown-box");
 		},
 		m(target, anchor) {
@@ -4525,8 +4581,8 @@ function create_fragment$j(ctx) {
 				each_blocks[i].m(ul, null);
 			}
 
-			/*ul_binding*/ ctx[21](ul);
-			/*div1_binding*/ ctx[22](div1);
+			/*ul_binding*/ ctx[23](ul);
+			/*div1_binding*/ ctx[24](div1);
 
 			if (!mounted) {
 				dispose = listen(goa_input, "click", /*showMenu*/ ctx[16]);
@@ -4551,23 +4607,23 @@ function create_fragment$j(ctx) {
 				set_custom_element_data(goa_input, "error", /*isError*/ ctx[15]);
 			}
 
-			if (dirty[0] & /*disabled*/ 32) {
-				set_custom_element_data(goa_input, "disabled", /*disabled*/ ctx[5]);
+			if (dirty[0] & /*disabled*/ 16) {
+				set_custom_element_data(goa_input, "disabled", /*disabled*/ ctx[4]);
 			}
 
-			if (dirty[0] & /*leadingicon*/ 4) {
-				set_custom_element_data(goa_input, "leadingicon", /*leadingicon*/ ctx[2]);
+			if (dirty[0] & /*leadingicon*/ 2) {
+				set_custom_element_data(goa_input, "leadingicon", /*leadingicon*/ ctx[1]);
 			}
 
-			if (dirty[0] & /*placeholder*/ 16) {
-				set_custom_element_data(goa_input, "placeholder", /*placeholder*/ ctx[4]);
+			if (dirty[0] & /*placeholder*/ 8) {
+				set_custom_element_data(goa_input, "placeholder", /*placeholder*/ ctx[3]);
 			}
 
-			if (dirty[0] & /*width, computedWidth*/ 4224 && goa_input_width_value !== (goa_input_width_value = /*width*/ ctx[7] || /*computedWidth*/ ctx[12])) {
+			if (dirty[0] & /*width, computedWidth*/ 4160 && goa_input_width_value !== (goa_input_width_value = /*width*/ ctx[6] || /*computedWidth*/ ctx[12])) {
 				set_custom_element_data(goa_input, "width", goa_input_width_value);
 			}
 
-			if (dirty[0] & /*name*/ 2 && goa_input_id_value !== (goa_input_id_value = `${/*name*/ ctx[1]}-dropdown-input`)) {
+			if (dirty[0] & /*name*/ 1 && goa_input_id_value !== (goa_input_id_value = `${/*name*/ ctx[0]}-dropdown-input`)) {
 				set_custom_element_data(goa_input, "id", goa_input_id_value);
 			}
 
@@ -4575,16 +4631,16 @@ function create_fragment$j(ctx) {
 				set_custom_element_data(goa_input, "value", /*selectedLabel*/ ctx[9]);
 			}
 
-			if (dirty[0] & /*name*/ 2 && div0_data_testid_value !== (div0_data_testid_value = `${/*name*/ ctx[1]}-dropdown`)) {
+			if (dirty[0] & /*name*/ 1 && div0_data_testid_value !== (div0_data_testid_value = `${/*name*/ ctx[0]}-dropdown`)) {
 				attr(div0, "data-testid", div0_data_testid_value);
 			}
 
-			if (dirty[0] & /*options, highlightedIndex, value, onSelect*/ 264449) {
+			if (dirty[0] & /*options, highlightedIndex, _values, onSelect*/ 264576) {
 				each_value = /*options*/ ctx[8];
 				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, ul, destroy_block, create_each_block$1, null, get_each_context$1);
 			}
 
-			if (dirty[0] & /*maxheight*/ 8 && ul_style_value !== (ul_style_value = `overflow-y: auto; max-height: ${/*maxheight*/ ctx[3]}px`)) {
+			if (dirty[0] & /*maxheight*/ 4 && ul_style_value !== (ul_style_value = `overflow-y: auto; max-height: ${/*maxheight*/ ctx[2]}`)) {
 				attr(ul, "style", ul_style_value);
 			}
 
@@ -4592,8 +4648,8 @@ function create_fragment$j(ctx) {
 				toggle_class(ul, "dropdown-active", /*isMenuVisible*/ ctx[10]);
 			}
 
-			if (dirty[0] & /*testid*/ 64) {
-				attr(div1, "data-testid", /*testid*/ ctx[6]);
+			if (dirty[0] & /*testid*/ 32) {
+				attr(div1, "data-testid", /*testid*/ ctx[5]);
 			}
 		},
 		i: noop,
@@ -4606,31 +4662,33 @@ function create_fragment$j(ctx) {
 				each_blocks[i].d();
 			}
 
-			/*ul_binding*/ ctx[21](null);
-			/*div1_binding*/ ctx[22](null);
+			/*ul_binding*/ ctx[23](null);
+			/*div1_binding*/ ctx[24](null);
 			mounted = false;
 			dispose();
 		}
 	};
 }
 
-const MAX_HEIGHT = 300;
+const MAX_HEIGHT = "300px";
 
-function instance$i($$self, $$props, $$invalidate) {
+function instance$k($$self, $$props, $$invalidate) {
 	let isError;
 	let { name } = $$props;
-	let { value } = $$props;
-	let { leadingicon } = $$props;
+	let { value = "" } = $$props;
+	let { leadingicon = null } = $$props;
 	let { maxheight = MAX_HEIGHT } = $$props;
 	let { placeholder = "" } = $$props;
-	let { disabled } = $$props;
-	let { error } = $$props;
-	let { testid } = $$props;
-	let { width } = $$props;
+	let { disabled = false } = $$props;
+	let { error = false } = $$props;
+	let { testid = "" } = $$props;
+	let { width = "" } = $$props;
+	let { multiselect = false } = $$props;
 
 	// Private
-	let options = [];
+	let _values = [];
 
+	let options = [];
 	let selectedLabel = "";
 	let isMenuVisible = false;
 	let highlightedIndex = 0;
@@ -4644,6 +4702,21 @@ function instance$i($$self, $$props, $$invalidate) {
 	onMount(async () => {
 		el.addEventListener("focus", onFocus, true);
 		el.addEventListener("blur", onBlur, true);
+
+		// parse and convert values to strings to avoid later type comparison issues
+		let rawValue;
+
+		try {
+			rawValue = JSON.parse(value || "[]");
+		} catch(e) {
+			rawValue = [value];
+		}
+
+		const rawValues = typeof rawValue === "object" ? rawValue : [rawValue];
+
+		// convert all values to strings to avoid later type comparison issues
+		$$invalidate(7, _values = rawValues.map(val => `${val}`));
+
 		bindContext();
 	});
 
@@ -4662,7 +4735,7 @@ function instance$i($$self, $$props, $$invalidate) {
 				case BIND$1:
 					{
 						const _data = data;
-						const selected = value === _data.value;
+						const selected = _values.includes(_data.value);
 						$$invalidate(8, options = [...options, Object.assign(Object.assign({}, _data), { selected })]);
 
 						if (selected) {
@@ -4709,15 +4782,33 @@ function instance$i($$self, $$props, $$invalidate) {
 	}
 
 	function setHighlightedIndexToSelected() {
-		$$invalidate(11, highlightedIndex = options.findIndex(option => option.value === value));
+		$$invalidate(11, highlightedIndex = options.findIndex(option => _values.includes(option.value)));
 	}
 
 	// Event handlers
-	function onSelect(name, val, label) {
+	function onSelect(val, label) {
+		if (disabled) return;
 		$$invalidate(9, selectedLabel = label);
-		$$invalidate(0, value = val);
+
+		if (multiselect) {
+			_values.push(val);
+
+			el.dispatchEvent(new CustomEvent("_change",
+			{
+					composed: true,
+					detail: { name, values: _values }
+				}));
+		} else {
+			$$invalidate(7, _values = [val]);
+
+			el.dispatchEvent(new CustomEvent("_change",
+			{
+					composed: true,
+					detail: { name, value: _values[0] }
+				}));
+		}
+
 		closeMenu();
-		el.dispatchEvent(new CustomEvent("_change", { composed: true, detail: { name, value } }));
 	}
 
 	const onInputKeyDown = e => {
@@ -4755,7 +4846,7 @@ function instance$i($$self, $$props, $$invalidate) {
 				break;
 			case "Tab":
 			case "Enter":
-				onSelect(name, options[highlightedIndex].value, options[highlightedIndex].label);
+				onSelect(options[highlightedIndex].value, options[highlightedIndex].label);
 				e.preventDefault();
 				break;
 			case "Escape":
@@ -4769,7 +4860,7 @@ function instance$i($$self, $$props, $$invalidate) {
 		$$invalidate(11, highlightedIndex = Number(e.target.dataset.index));
 	}
 
-	const click_handler = option => onSelect(option.name, option.value, option.label);
+	const click_handler = option => onSelect(option.value, option.label);
 
 	function ul_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
@@ -4786,26 +4877,26 @@ function instance$i($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$set = $$props => {
-		if ('name' in $$props) $$invalidate(1, name = $$props.name);
-		if ('value' in $$props) $$invalidate(0, 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 ('disabled' in $$props) $$invalidate(5, disabled = $$props.disabled);
-		if ('error' in $$props) $$invalidate(19, error = $$props.error);
-		if ('testid' in $$props) $$invalidate(6, testid = $$props.testid);
-		if ('width' in $$props) $$invalidate(7, width = $$props.width);
+		if ('name' in $$props) $$invalidate(0, name = $$props.name);
+		if ('value' in $$props) $$invalidate(19, value = $$props.value);
+		if ('leadingicon' in $$props) $$invalidate(1, leadingicon = $$props.leadingicon);
+		if ('maxheight' in $$props) $$invalidate(2, maxheight = $$props.maxheight);
+		if ('placeholder' in $$props) $$invalidate(3, placeholder = $$props.placeholder);
+		if ('disabled' in $$props) $$invalidate(4, disabled = $$props.disabled);
+		if ('error' in $$props) $$invalidate(20, error = $$props.error);
+		if ('testid' in $$props) $$invalidate(5, testid = $$props.testid);
+		if ('width' in $$props) $$invalidate(6, width = $$props.width);
+		if ('multiselect' in $$props) $$invalidate(21, multiselect = $$props.multiselect);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*error*/ 524288) {
+		if ($$self.$$.dirty[0] & /*error*/ 1048576) {
 			// TODO: remove this once goa-input has the toBoolean method removed
 			$$invalidate(15, isError = error ? "true" : "false");
 		}
 	};
 
 	return [
-		value,
 		name,
 		leadingicon,
 		maxheight,
@@ -4813,6 +4904,7 @@ function instance$i($$self, $$props, $$invalidate) {
 		disabled,
 		testid,
 		width,
+		_values,
 		options,
 		selectedLabel,
 		isMenuVisible,
@@ -4824,7 +4916,9 @@ function instance$i($$self, $$props, $$invalidate) {
 		showMenu,
 		closeMenu,
 		onSelect,
+		value,
 		error,
+		multiselect,
 		click_handler,
 		ul_binding,
 		div1_binding
@@ -4843,19 +4937,20 @@ class Dropdown extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$i,
-			create_fragment$j,
+			instance$k,
+			create_fragment$l,
 			safe_not_equal,
 			{
-				name: 1,
-				value: 0,
-				leadingicon: 2,
-				maxheight: 3,
-				placeholder: 4,
-				disabled: 5,
-				error: 19,
-				testid: 6,
-				width: 7
+				name: 0,
+				value: 19,
+				leadingicon: 1,
+				maxheight: 2,
+				placeholder: 3,
+				disabled: 4,
+				error: 20,
+				testid: 5,
+				width: 6,
+				multiselect: 21
 			},
 			null,
 			[-1, -1]
@@ -4883,12 +4978,13 @@ class Dropdown extends SvelteElement {
 			"disabled",
 			"error",
 			"testid",
-			"width"
+			"width",
+			"multiselect"
 		];
 	}
 
 	get name() {
-		return this.$$.ctx[1];
+		return this.$$.ctx[0];
 	}
 
 	set name(name) {
@@ -4897,7 +4993,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get value() {
-		return this.$$.ctx[0];
+		return this.$$.ctx[19];
 	}
 
 	set value(value) {
@@ -4906,7 +5002,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get leadingicon() {
-		return this.$$.ctx[2];
+		return this.$$.ctx[1];
 	}
 
 	set leadingicon(leadingicon) {
@@ -4915,7 +5011,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get maxheight() {
-		return this.$$.ctx[3];
+		return this.$$.ctx[2];
 	}
 
 	set maxheight(maxheight) {
@@ -4924,7 +5020,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get placeholder() {
-		return this.$$.ctx[4];
+		return this.$$.ctx[3];
 	}
 
 	set placeholder(placeholder) {
@@ -4933,7 +5029,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[5];
+		return this.$$.ctx[4];
 	}
 
 	set disabled(disabled) {
@@ -4942,7 +5038,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[19];
+		return this.$$.ctx[20];
 	}
 
 	set error(error) {
@@ -4951,7 +5047,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get testid() {
-		return this.$$.ctx[6];
+		return this.$$.ctx[5];
 	}
 
 	set testid(testid) {
@@ -4960,20 +5056,29 @@ class Dropdown extends SvelteElement {
 	}
 
 	get width() {
-		return this.$$.ctx[7];
+		return this.$$.ctx[6];
 	}
 
 	set width(width) {
 		this.$$set({ width });
 		flush();
 	}
+
+	get multiselect() {
+		return this.$$.ctx[21];
+	}
+
+	set multiselect(multiselect) {
+		this.$$set({ multiselect });
+		flush();
+	}
 }
 
 customElements.define("goa-dropdown", Dropdown);
 
 /* libs/web-components/src/components/dropdown/DropdownItem.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$i(ctx) {
+function create_fragment$k(ctx) {
 	return {
 		c() {
 			this.c = noop;
@@ -4986,7 +5091,7 @@ function create_fragment$i(ctx) {
 	};
 }
 
-function instance$h($$self, $$props, $$invalidate) {
+function instance$j($$self, $$props, $$invalidate) {
 	let { name = "" } = $$props;
 	let { value = "" } = $$props;
 	let { label = "" } = $$props;
@@ -5020,8 +5125,8 @@ class DropdownItem extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$h,
-			create_fragment$i,
+			instance$j,
+			create_fragment$k,
 			safe_not_equal,
 			{ name: 0, value: 1, label: 2 },
 			null
@@ -5075,7 +5180,7 @@ customElements.define("goa-dropdown-item", DropdownItem);
 
 /* libs/web-components/src/components/flex-row/FlexRow.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$h(ctx) {
+function create_fragment$j(ctx) {
 	let div;
 	let slot;
 
@@ -5104,7 +5209,7 @@ function create_fragment$h(ctx) {
 	};
 }
 
-function instance$g($$self, $$props, $$invalidate) {
+function instance$i($$self, $$props, $$invalidate) {
 	let _gap;
 	let { gap = "" } = $$props;
 
@@ -5137,8 +5242,8 @@ class FlexRow extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$g,
-			create_fragment$h,
+			instance$i,
+			create_fragment$j,
 			safe_not_equal,
 			{ gap: 1 },
 			null
@@ -5281,7 +5386,7 @@ function create_if_block$a(ctx) {
 	};
 }
 
-function create_fragment$g(ctx) {
+function create_fragment$i(ctx) {
 	let div1;
 	let t0;
 	let div0;
@@ -5367,7 +5472,7 @@ function create_fragment$g(ctx) {
 	};
 }
 
-function instance$f($$self, $$props, $$invalidate) {
+function instance$h($$self, $$props, $$invalidate) {
 	let isOptional;
 	let { label = "" } = $$props;
 	let { helptext = "" } = $$props;
@@ -5402,8 +5507,8 @@ class FormItem extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$f,
-			create_fragment$g,
+			instance$h,
+			create_fragment$i,
 			safe_not_equal,
 			{
 				label: 0,
@@ -5471,7 +5576,7 @@ customElements.define("goa-form-item", FormItem);
 
 /* libs/web-components/src/components/hero-banner/HeroBanner.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$f(ctx) {
+function create_fragment$h(ctx) {
 	let div1;
 	let goa_page_block;
 	let h1;
@@ -5529,7 +5634,7 @@ function create_fragment$f(ctx) {
 	};
 }
 
-function instance$e($$self, $$props, $$invalidate) {
+function instance$g($$self, $$props, $$invalidate) {
 	let { title } = $$props;
 	let { backgroundurl } = $$props;
 
@@ -5553,8 +5658,8 @@ class HeroBanner extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$e,
-			create_fragment$f,
+			instance$g,
+			create_fragment$h,
 			safe_not_equal,
 			{ title: 0, backgroundurl: 1 },
 			null
@@ -5607,7 +5712,7 @@ function create_if_block$9(ctx) {
 		c() {
 			ion_icon = element("ion-icon");
 
-			set_custom_element_data(ion_icon, "name", ion_icon_name_value = /*theme*/ ctx[1] === "filled"
+			set_custom_element_data(ion_icon, "name", ion_icon_name_value = /*theme*/ ctx[1] === "filled" || /*type*/ ctx[0].indexOf("logo") === 0
 			? /*type*/ ctx[0]
 			: `${/*type*/ ctx[0]}-${/*theme*/ ctx[1]}`);
 		},
@@ -5615,7 +5720,7 @@ function create_if_block$9(ctx) {
 			insert(target, ion_icon, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*theme, type*/ 3 && ion_icon_name_value !== (ion_icon_name_value = /*theme*/ ctx[1] === "filled"
+			if (dirty & /*theme, type*/ 3 && ion_icon_name_value !== (ion_icon_name_value = /*theme*/ ctx[1] === "filled" || /*type*/ ctx[0].indexOf("logo") === 0
 			? /*type*/ ctx[0]
 			: `${/*type*/ ctx[0]}-${/*theme*/ ctx[1]}`)) {
 				set_custom_element_data(ion_icon, "name", ion_icon_name_value);
@@ -5627,7 +5732,7 @@ function create_if_block$9(ctx) {
 	};
 }
 
-function create_fragment$e(ctx) {
+function create_fragment$g(ctx) {
 	let div;
 	let div_data_testid_value;
 	let div_style_value;
@@ -5699,7 +5804,7 @@ function create_fragment$e(ctx) {
 	};
 }
 
-function instance$d($$self, $$props, $$invalidate) {
+function instance$f($$self, $$props, $$invalidate) {
 	let isInverted;
 	let _size;
 	let { type } = $$props;
@@ -5762,8 +5867,8 @@ class Icon extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$d,
-			create_fragment$e,
+			instance$f,
+			create_fragment$g,
 			safe_not_equal,
 			{
 				type: 0,
@@ -5880,7 +5985,7 @@ customElements.define("goa-icon", Icon);
 
 /* libs/web-components/src/components/icon-button/IconButton.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$d(ctx) {
+function create_fragment$f(ctx) {
 	let button;
 	let goa_icon;
 	let mounted;
@@ -5966,7 +6071,7 @@ function handleClick(e) {
 	e.target.dispatchEvent(new CustomEvent("_click", { composed: true, detail: { event: e } }));
 }
 
-function instance$c($$self, $$props, $$invalidate) {
+function instance$e($$self, $$props, $$invalidate) {
 	let css;
 	let isDisabled;
 	let isInverted;
@@ -6042,8 +6147,8 @@ class IconButton extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$c,
-			create_fragment$d,
+			instance$e,
+			create_fragment$f,
 			safe_not_equal,
 			{
 				type: 0,
@@ -6355,7 +6460,7 @@ function create_if_block_1$6(ctx) {
 	};
 }
 
-function create_fragment$c(ctx) {
+function create_fragment$e(ctx) {
 	let div1;
 	let div0;
 	let t0;
@@ -6562,7 +6667,7 @@ function doClick() {
 	this.dispatchEvent(new CustomEvent("_trailingIconClick", { composed: true }));
 }
 
-function instance$b($$self, $$props, $$invalidate) {
+function instance$d($$self, $$props, $$invalidate) {
 	let handlesTrailingIconClick;
 	let isFocused;
 	let isReadonly;
@@ -6698,7 +6803,7 @@ class Input extends SvelteElement {
 	constructor(options) {
 		super();
 
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.container{position:relative;width:100%}@media(min-width: 640px){.container{max-width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);background:white;display:inline-flex;align-items:center;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}@media(min-width: 640px){.goa-input{min-width:0;width:var(--width)}}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{display:flex;align-items:center;margin-left:0.5rem}.goa-input-trailing-icon{display:flex;align-items:center;margin-right:0.5rem}.goa-input-trailing-icon>.goa-icon-button{margin-right:-0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.counter{position:absolute;padding-top:0.25rem;right:0;font-size:var(--fs-sm)}.counter-error{color:var(--goa-color-interactive--error)}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.container{position:relative;width:100%}@media(min-width: 640px){.container{max-width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);background:white;display:inline-flex;align-items:center;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{display:flex;align-items:center;margin-left:0.5rem}.goa-input-trailing-icon{display:flex;align-items:center;margin-right:0.5rem}.goa-input-trailing-icon>.goa-icon-button{margin-right:-0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.counter{position:absolute;padding-top:0.25rem;right:0;font-size:var(--fs-sm)}.counter-error{color:var(--goa-color-interactive--error)}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
       center center no-repeat}</style>`;
 
 		init(
@@ -6708,8 +6813,8 @@ class Input extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$b,
-			create_fragment$c,
+			instance$d,
+			create_fragment$e,
 			safe_not_equal,
 			{
 				type: 1,
@@ -6990,6 +7095,7 @@ function noScroll(_node, opts) {
 /* libs/web-components/src/components/modal/Modal.svelte generated by Svelte v3.44.3 */
 
 function create_if_block$7(ctx) {
+	let goa_focus_trap;
 	let div4;
 	let div0;
 	let t0;
@@ -7011,10 +7117,10 @@ function create_if_block$7(ctx) {
 	let mounted;
 	let dispose;
 	let if_block0 = /*heading*/ ctx[0] && create_if_block_3$2(ctx);
-	let if_block1 = /*isClosable*/ ctx[4] && create_if_block_2$3(ctx);
+	let if_block1 = /*isClosable*/ ctx[5] && create_if_block_2$3(ctx);
 
 	function select_block_type(ctx, dirty) {
-		if (/*isScrollable*/ ctx[6]) return create_if_block_1$5;
+		if (/*isScrollable*/ ctx[7]) return create_if_block_1$5;
 		return create_else_block$1;
 	}
 
@@ -7023,6 +7129,7 @@ function create_if_block$7(ctx) {
 
 	return {
 		c() {
+			goa_focus_trap = element("goa-focus-trap");
 			div4 = element("div");
 			div0 = element("div");
 			t0 = space();
@@ -7047,10 +7154,12 @@ function create_if_block$7(ctx) {
 			attr(div3, "class", "modal-pane");
 			attr(div4, "data-testid", "modal");
 			attr(div4, "class", "modal");
-			attr(div4, "style", div4_style_value = "--scroll-offset: " + /*scrollOffset*/ ctx[3] + "px; " + (/*width*/ ctx[1] && `--width: ${/*width*/ ctx[1]};`) + ";");
+			attr(div4, "style", div4_style_value = "--scroll-offset: " + /*scrollOffset*/ ctx[4] + "px; " + (/*width*/ ctx[2] && `--width: ${/*width*/ ctx[2]};`) + ";");
+			set_custom_element_data(goa_focus_trap, "open", /*open*/ ctx[1]);
 		},
 		m(target, anchor) {
-			insert(target, div4, anchor);
+			insert(target, goa_focus_trap, anchor);
+			append(goa_focus_trap, div4);
 			append(div4, div0);
 			append(div4, t0);
 			append(div4, div3);
@@ -7068,8 +7177,8 @@ function create_if_block$7(ctx) {
 
 			if (!mounted) {
 				dispose = [
-					listen(div0, "click", /*close*/ ctx[7]),
-					action_destroyer(noscroll_action = noScroll.call(null, div4, { enable: /*isOpen*/ ctx[2] }))
+					listen(div0, "click", /*close*/ ctx[8]),
+					action_destroyer(noscroll_action = noScroll.call(null, div4, { enable: /*isOpen*/ ctx[3] }))
 				];
 
 				mounted = true;
@@ -7091,7 +7200,7 @@ function create_if_block$7(ctx) {
 				if_block0 = null;
 			}
 
-			if (/*isClosable*/ ctx[4]) {
+			if (/*isClosable*/ ctx[5]) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
@@ -7114,11 +7223,15 @@ function create_if_block$7(ctx) {
 				}
 			}
 
-			if (!current || dirty & /*scrollOffset, width*/ 10 && div4_style_value !== (div4_style_value = "--scroll-offset: " + /*scrollOffset*/ ctx[3] + "px; " + (/*width*/ ctx[1] && `--width: ${/*width*/ ctx[1]};`) + ";")) {
+			if (!current || dirty & /*scrollOffset, width*/ 20 && div4_style_value !== (div4_style_value = "--scroll-offset: " + /*scrollOffset*/ ctx[4] + "px; " + (/*width*/ ctx[2] && `--width: ${/*width*/ ctx[2]};`) + ";")) {
 				attr(div4, "style", div4_style_value);
 			}
 
-			if (noscroll_action && is_function(noscroll_action.update) && dirty & /*isOpen*/ 4) noscroll_action.update.call(null, { enable: /*isOpen*/ ctx[2] });
+			if (noscroll_action && is_function(noscroll_action.update) && dirty & /*isOpen*/ 8) noscroll_action.update.call(null, { enable: /*isOpen*/ ctx[3] });
+
+			if (!current || dirty & /*open*/ 2) {
+				set_custom_element_data(goa_focus_trap, "open", /*open*/ ctx[1]);
+			}
 		},
 		i(local) {
 			if (current) return;
@@ -7127,7 +7240,7 @@ function create_if_block$7(ctx) {
 				if (div3_outro) div3_outro.end(1);
 
 				div3_intro = create_in_transition(div3, fly, {
-					duration: /*_transitionTime*/ ctx[5],
+					duration: /*_transitionTime*/ ctx[6],
 					y: 200
 				});
 
@@ -7136,7 +7249,7 @@ function create_if_block$7(ctx) {
 
 			add_render_callback(() => {
 				if (div4_outro) div4_outro.end(1);
-				div4_intro = create_in_transition(div4, fade, { duration: /*_transitionTime*/ ctx[5] });
+				div4_intro = create_in_transition(div4, fade, { duration: /*_transitionTime*/ ctx[6] });
 				div4_intro.start();
 			});
 
@@ -7146,22 +7259,22 @@ function create_if_block$7(ctx) {
 			if (div3_intro) div3_intro.invalidate();
 
 			div3_outro = create_out_transition(div3, fly, {
-				delay: /*_transitionTime*/ ctx[5],
-				duration: /*_transitionTime*/ ctx[5],
+				delay: /*_transitionTime*/ ctx[6],
+				duration: /*_transitionTime*/ ctx[6],
 				y: -100
 			});
 
 			if (div4_intro) div4_intro.invalidate();
 
 			div4_outro = create_out_transition(div4, fade, {
-				delay: /*_transitionTime*/ ctx[5],
-				duration: /*_transitionTime*/ ctx[5]
+				delay: /*_transitionTime*/ ctx[6],
+				duration: /*_transitionTime*/ ctx[6]
 			});
 
 			current = false;
 		},
 		d(detaching) {
-			if (detaching) detach(div4);
+			if (detaching) detach(goa_focus_trap);
 			if (if_block0) if_block0.d();
 			if (if_block1) if_block1.d();
 			if_block2.d();
@@ -7173,7 +7286,7 @@ function create_if_block$7(ctx) {
 	};
 }
 
-// (60:6) {#if heading}
+// (60:8) {#if heading}
 function create_if_block_3$2(ctx) {
 	let div;
 	let t;
@@ -7198,7 +7311,7 @@ function create_if_block_3$2(ctx) {
 	};
 }
 
-// (63:6) {#if isClosable}
+// (63:8) {#if isClosable}
 function create_if_block_2$3(ctx) {
 	let div;
 	let goa_icon_button;
@@ -7218,7 +7331,7 @@ function create_if_block_2$3(ctx) {
 			append(div, goa_icon_button);
 
 			if (!mounted) {
-				dispose = listen(goa_icon_button, "click", /*close*/ ctx[7]);
+				dispose = listen(goa_icon_button, "click", /*close*/ ctx[8]);
 				mounted = true;
 			}
 		},
@@ -7231,7 +7344,7 @@ function create_if_block_2$3(ctx) {
 	};
 }
 
-// (77:8) {:else}
+// (77:10) {:else}
 function create_else_block$1(ctx) {
 	let div;
 
@@ -7250,7 +7363,7 @@ function create_else_block$1(ctx) {
 	};
 }
 
-// (73:8) {#if isScrollable}
+// (73:10) {#if isScrollable}
 function create_if_block_1$5(ctx) {
 	let goa_scrollable;
 
@@ -7271,10 +7384,10 @@ function create_if_block_1$5(ctx) {
 	};
 }
 
-function create_fragment$b(ctx) {
+function create_fragment$d(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*isOpen*/ ctx[2] && create_if_block$7(ctx);
+	let if_block = /*isOpen*/ ctx[3] && create_if_block$7(ctx);
 
 	return {
 		c() {
@@ -7288,11 +7401,11 @@ function create_fragment$b(ctx) {
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (/*isOpen*/ ctx[2]) {
+			if (/*isOpen*/ ctx[3]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
-					if (dirty & /*isOpen*/ 4) {
+					if (dirty & /*isOpen*/ 8) {
 						transition_in(if_block, 1);
 					}
 				} else {
@@ -7327,7 +7440,7 @@ function create_fragment$b(ctx) {
 	};
 }
 
-function instance$a($$self, $$props, $$invalidate) {
+function instance$c($$self, $$props, $$invalidate) {
 	let isClosable;
 	let isScrollable;
 	let isOpen;
@@ -7351,36 +7464,36 @@ function instance$a($$self, $$props, $$invalidate) {
 
 	$$self.$$set = $$props => {
 		if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
-		if ('closable' in $$props) $$invalidate(8, closable = $$props.closable);
-		if ('scrollable' in $$props) $$invalidate(9, scrollable = $$props.scrollable);
-		if ('open' in $$props) $$invalidate(10, open = $$props.open);
+		if ('closable' in $$props) $$invalidate(9, closable = $$props.closable);
+		if ('scrollable' in $$props) $$invalidate(10, scrollable = $$props.scrollable);
+		if ('open' in $$props) $$invalidate(1, open = $$props.open);
 		if ('transition' in $$props) $$invalidate(11, transition = $$props.transition);
-		if ('width' in $$props) $$invalidate(1, width = $$props.width);
+		if ('width' in $$props) $$invalidate(2, width = $$props.width);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*closable*/ 256) {
-			$$invalidate(4, isClosable = toBoolean(closable));
+		if ($$self.$$.dirty & /*closable*/ 512) {
+			$$invalidate(5, isClosable = toBoolean(closable));
 		}
 
-		if ($$self.$$.dirty & /*scrollable*/ 512) {
-			$$invalidate(6, isScrollable = toBoolean(scrollable));
+		if ($$self.$$.dirty & /*scrollable*/ 1024) {
+			$$invalidate(7, isScrollable = toBoolean(scrollable));
 		}
 
-		if ($$self.$$.dirty & /*open*/ 1024) {
-			$$invalidate(2, isOpen = toBoolean(open));
+		if ($$self.$$.dirty & /*open*/ 2) {
+			$$invalidate(3, isOpen = toBoolean(open));
 		}
 
-		if ($$self.$$.dirty & /*isOpen*/ 4) {
+		if ($$self.$$.dirty & /*isOpen*/ 8) {
 			{
 				if (isOpen) {
-					$$invalidate(3, scrollOffset = window.pageYOffset);
+					$$invalidate(4, scrollOffset = window.pageYOffset);
 				}
 			}
 		}
 
 		if ($$self.$$.dirty & /*transition*/ 2048) {
-			$$invalidate(5, _transitionTime = transition === "none"
+			$$invalidate(6, _transitionTime = transition === "none"
 			? 0
 			: transition === "slow" ? 400 : 200);
 		}
@@ -7388,6 +7501,7 @@ function instance$a($$self, $$props, $$invalidate) {
 
 	return [
 		heading,
+		open,
 		width,
 		isOpen,
 		scrollOffset,
@@ -7397,7 +7511,6 @@ function instance$a($$self, $$props, $$invalidate) {
 		close,
 		closable,
 		scrollable,
-		open,
 		transition
 	];
 }
@@ -7414,16 +7527,16 @@ class Modal extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$a,
-			create_fragment$b,
+			instance$c,
+			create_fragment$d,
 			safe_not_equal,
 			{
 				heading: 0,
-				closable: 8,
-				scrollable: 9,
-				open: 10,
+				closable: 9,
+				scrollable: 10,
+				open: 1,
 				transition: 11,
-				width: 1
+				width: 2
 			},
 			null
 		);
@@ -7454,7 +7567,7 @@ class Modal extends SvelteElement {
 	}
 
 	get closable() {
-		return this.$$.ctx[8];
+		return this.$$.ctx[9];
 	}
 
 	set closable(closable) {
@@ -7463,7 +7576,7 @@ class Modal extends SvelteElement {
 	}
 
 	get scrollable() {
-		return this.$$.ctx[9];
+		return this.$$.ctx[10];
 	}
 
 	set scrollable(scrollable) {
@@ -7472,7 +7585,7 @@ class Modal extends SvelteElement {
 	}
 
 	get open() {
-		return this.$$.ctx[10];
+		return this.$$.ctx[1];
 	}
 
 	set open(open) {
@@ -7490,7 +7603,7 @@ class Modal extends SvelteElement {
 	}
 
 	get width() {
-		return this.$$.ctx[1];
+		return this.$$.ctx[2];
 	}
 
 	set width(width) {
@@ -7587,7 +7700,7 @@ function create_if_block$6(ctx) {
 	};
 }
 
-function create_fragment$a(ctx) {
+function create_fragment$c(ctx) {
 	let if_block_anchor;
 	let current;
 	let if_block = /*show*/ ctx[1] && create_if_block$6(ctx);
@@ -7643,7 +7756,7 @@ function create_fragment$a(ctx) {
 	};
 }
 
-function instance$9($$self, $$props, $$invalidate) {
+function instance$b($$self, $$props, $$invalidate) {
 	let iconType;
 	let { type } = $$props;
 	let show = true;
@@ -7683,8 +7796,8 @@ class Notification extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$9,
-			create_fragment$a,
+			instance$b,
+			create_fragment$c,
 			safe_not_equal,
 			{ type: 0 },
 			null
@@ -7720,7 +7833,7 @@ customElements.define("goa-notification", Notification);
 
 /* libs/web-components/src/layouts/PageLayout.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$9(ctx) {
+function create_fragment$b(ctx) {
 	let div;
 
 	return {
@@ -7755,7 +7868,7 @@ class PageLayout extends SvelteElement {
 				customElement: true
 			},
 			null,
-			create_fragment$9,
+			create_fragment$b,
 			safe_not_equal,
 			{},
 			null
@@ -8067,7 +8180,7 @@ function create_if_block_2$2(ctx) {
 	};
 }
 
-function create_fragment$8(ctx) {
+function create_fragment$a(ctx) {
 	let if_block_anchor;
 	let current;
 	let if_block = /*ready*/ ctx[3] && create_if_block$5(ctx);
@@ -8123,7 +8236,7 @@ function create_fragment$8(ctx) {
 	};
 }
 
-function instance$8($$self, $$props, $$invalidate) {
+function instance$a($$self, $$props, $$invalidate) {
 	let isVisible;
 	let fullscreen;
 	let inline;
@@ -8194,8 +8307,8 @@ class CircularProgress extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$8,
-			create_fragment$8,
+			instance$a,
+			create_fragment$a,
 			safe_not_equal,
 			{
 				type: 0,
@@ -8393,7 +8506,7 @@ function create_each_block(key_1, ctx) {
 	};
 }
 
-function create_fragment$7(ctx) {
+function create_fragment$9(ctx) {
 	let div;
 	let slot;
 	let t;
@@ -8462,7 +8575,7 @@ function create_fragment$7(ctx) {
 	};
 }
 
-function instance$7($$self, $$props, $$invalidate) {
+function instance$9($$self, $$props, $$invalidate) {
 	let isDisabled;
 	let { name } = $$props;
 	let { value } = $$props;
@@ -8558,8 +8671,8 @@ class RadioGroup extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$7,
-			create_fragment$7,
+			instance$9,
+			create_fragment$9,
 			safe_not_equal,
 			{
 				name: 1,
@@ -8647,7 +8760,7 @@ customElements.define("goa-radio-group", RadioGroup);
 
 /* libs/web-components/src/components/radio-group/RadioItem.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$6(ctx) {
+function create_fragment$8(ctx) {
 	return {
 		c() {
 			this.c = noop;
@@ -8660,7 +8773,7 @@ function create_fragment$6(ctx) {
 	};
 }
 
-function instance$6($$self, $$props, $$invalidate) {
+function instance$8($$self, $$props, $$invalidate) {
 	let { value } = $$props;
 	let { label } = $$props;
 	let { name } = $$props;
@@ -8691,8 +8804,8 @@ class RadioItem extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$6,
-			create_fragment$6,
+			instance$8,
+			create_fragment$8,
 			safe_not_equal,
 			{ value: 0, label: 1, name: 2 },
 			null
@@ -8746,7 +8859,7 @@ customElements.define("goa-radio-item", RadioItem);
 
 /* libs/web-components/src/components/scrollable/Scrollable.svelte generated by Svelte v3.44.3 */
 
-function create_fragment$5(ctx) {
+function create_fragment$7(ctx) {
 	let div;
 	let slot;
 	let div_style_value;
@@ -8793,7 +8906,7 @@ function create_fragment$5(ctx) {
 	};
 }
 
-function instance$5($$self, $$props, $$invalidate) {
+function instance$7($$self, $$props, $$invalidate) {
 	let { direction = "vertical" } = $$props;
 	let { hpadding = 0 } = $$props;
 	let { vpadding = 0 } = $$props;
@@ -8821,8 +8934,8 @@ class Scrollable extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$5,
-			create_fragment$5,
+			instance$7,
+			create_fragment$7,
 			safe_not_equal,
 			{
 				direction: 0,
@@ -9046,7 +9159,7 @@ function create_if_block$4(ctx) {
 	};
 }
 
-function create_fragment$4(ctx) {
+function create_fragment$6(ctx) {
 	let header;
 	let t0;
 	let show_if = ["alpha", "beta"].includes(/*level*/ ctx[0]);
@@ -9137,7 +9250,7 @@ function capitalize(val) {
 	return val[0].toUpperCase() + val.slice(1);
 }
 
-function instance$4($$self, $$props, $$invalidate) {
+function instance$6($$self, $$props, $$invalidate) {
 	let { level } = $$props;
 	let { version } = $$props;
 	let { feedbackurl } = $$props;
@@ -9163,8 +9276,8 @@ class MicrositeHeader extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$4,
-			create_fragment$4,
+			instance$6,
+			create_fragment$6,
 			safe_not_equal,
 			{ level: 0, version: 1, feedbackurl: 2 },
 			null
@@ -9453,7 +9566,7 @@ function create_if_block$3(ctx) {
 	};
 }
 
-function create_fragment$3(ctx) {
+function create_fragment$5(ctx) {
 	let current_block_type_index;
 	let if_block;
 	let if_block_anchor;
@@ -9524,7 +9637,7 @@ function create_fragment$3(ctx) {
 	};
 }
 
-function instance$3($$self, $$props, $$invalidate) {
+function instance$5($$self, $$props, $$invalidate) {
 	let { width = 320 } = $$props;
 	let { size = 1 } = $$props;
 	let { type } = $$props;
@@ -9550,8 +9663,8 @@ class Skeleton extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$3,
-			create_fragment$3,
+			instance$5,
+			create_fragment$5,
 			safe_not_equal,
 			{ width: 0, size: 1, type: 2 },
 			null
@@ -9813,7 +9926,7 @@ function create_if_block$2(ctx) {
 	};
 }
 
-function create_fragment$2(ctx) {
+function create_fragment$4(ctx) {
 	let if_block_anchor;
 	let if_block = /*ready*/ ctx[6] && create_if_block$2(ctx);
 
@@ -9850,7 +9963,7 @@ function create_fragment$2(ctx) {
 	};
 }
 
-function instance$2($$self, $$props, $$invalidate) {
+function instance$4($$self, $$props, $$invalidate) {
 	let diameter;
 	let strokewidth;
 	let radius;
@@ -9963,8 +10076,8 @@ class Spinner extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$2,
-			create_fragment$2,
+			instance$4,
+			create_fragment$4,
 			safe_not_equal,
 			{
 				size: 10,
@@ -10145,7 +10258,7 @@ function create_if_block_1$1(ctx) {
 	};
 }
 
-function create_fragment$1(ctx) {
+function create_fragment$3(ctx) {
 	let div;
 	let textarea;
 	let t;
@@ -10250,7 +10363,7 @@ function create_fragment$1(ctx) {
 	};
 }
 
-function instance$1($$self, $$props, $$invalidate) {
+function instance$3($$self, $$props, $$invalidate) {
 	let isError;
 	let isDisabled;
 	let isReadonly;
@@ -10349,8 +10462,8 @@ class TextArea extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance$1,
-			create_fragment$1,
+			instance$3,
+			create_fragment$3,
 			safe_not_equal,
 			{
 				name: 0,
@@ -10498,6 +10611,280 @@ class TextArea extends SvelteElement {
 
 customElements.define("goa-textarea", TextArea);
 
+/* libs/web-components/src/components/focus-trap/FocusTrap.svelte generated by Svelte v3.44.3 */
+
+function create_fragment$2(ctx) {
+	let div;
+
+	return {
+		c() {
+			div = element("div");
+			div.innerHTML = `<slot></slot>`;
+			this.c = noop;
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			/*div_binding*/ ctx[3](div);
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+			/*div_binding*/ ctx[3](null);
+		}
+	};
+}
+
+function isFocusable(element) {
+	if (element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute('tabIndex') !== null) {
+		return true;
+	}
+
+	if (element.disabled) {
+		return false;
+	}
+
+	switch (element.nodeName) {
+		case 'A':
+			return !!element.href && element.rel !== 'ignore';
+		case 'INPUT':
+			return element.type !== 'hidden' && element.type !== 'file';
+		case 'BUTTON':
+		case 'SELECT':
+		case 'TEXTAREA':
+			return true;
+		default:
+			return false;
+	}
+}
+
+function instance$2($$self, $$props, $$invalidate) {
+	let isOpen;
+	let ignoreFocusChanges = false;
+	let lastFocus;
+	let element;
+	let { open } = $$props;
+
+	function removeListeners() {
+		document.removeEventListener('focus', trapFocus, true);
+	}
+
+	function addListeners() {
+		document.addEventListener('focus', trapFocus, true);
+	}
+
+	function attemptFocusOnFirstDescendant(descendants) {
+		if (!descendants) return false;
+
+		for (let i = 0; i < descendants.length; i++) {
+			let descendant = descendants[i];
+
+			if (attemptFocus(descendant) || attemptFocusOnFirstDescendant(descendant.childNodes) || attemptFocusOnFirstDescendantOfSlotElement(descendant) || attemptFocusOnFirstDescendantOfShadowDOM(descendant)) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	function attemptFocusOnFirstDescendantOfSlotElement(node) {
+		var _a;
+
+		if (node instanceof HTMLSlotElement) {
+			let assingedNodesOfSlotElement = (_a = node) === null || _a === void 0
+			? void 0
+			: _a.assignedNodes();
+
+			if (attemptFocusOnFirstDescendant(assingedNodesOfSlotElement)) {
+				return true;
+			}
+		}
+	}
+
+	function attemptFocusOnFirstDescendantOfShadowDOM(node) {
+		var _a, _b;
+
+		if (node instanceof HTMLElement) {
+			let childNodesOfShadowRoot = (_b = (_a = node) === null || _a === void 0
+			? void 0
+			: _a.shadowRoot) === null || _b === void 0
+			? void 0
+			: _b.childNodes;
+
+			if (attemptFocusOnFirstDescendant(childNodesOfShadowRoot)) {
+				return true;
+			}
+		}
+	}
+
+	function attemptFocusOnLastDescendant(descendants) {
+		if (!descendants) return false;
+
+		for (let i = descendants.length - 1; i >= 0; i--) {
+			let descendant = descendants[i];
+
+			if (attemptFocus(descendant) || attemptFocusOnLastDescendant(descendant.childNodes) || attemptFocusOnLastDescendantOfSlotElement(descendant) || attemptFocusOnLastDescendantOfShadowDOM(descendant)) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	function attemptFocusOnLastDescendantOfSlotElement(node) {
+		var _a;
+
+		if (node instanceof HTMLSlotElement) {
+			let assingedNodesOfSlotElement = (_a = node) === null || _a === void 0
+			? void 0
+			: _a.assignedNodes();
+
+			if (attemptFocusOnLastDescendant(assingedNodesOfSlotElement)) {
+				return true;
+			}
+		}
+	}
+
+	function attemptFocusOnLastDescendantOfShadowDOM(node) {
+		var _a, _b;
+
+		if (node instanceof HTMLElement) {
+			let childNodesOfShadowRoot = (_b = (_a = node) === null || _a === void 0
+			? void 0
+			: _a.shadowRoot) === null || _b === void 0
+			? void 0
+			: _b.childNodes;
+
+			if (attemptFocusOnLastDescendant(childNodesOfShadowRoot)) {
+				return true;
+			}
+		}
+	}
+
+	function attemptFocus(element) {
+		if (!isFocusable(element)) {
+			return false;
+		}
+
+		ignoreFocusChanges = true;
+
+		try {
+			element.focus();
+		} catch(e) {
+			
+		}
+
+		ignoreFocusChanges = false;
+		return document.activeElement === element;
+	}
+
+	function trapFocus(event) {
+		var _a;
+
+		if (ignoreFocusChanges) {
+			return;
+		}
+
+		const slotElements = (_a = element.firstChild) === null || _a === void 0
+		? void 0
+		: _a.assignedElements();
+
+		if (!(slotElements === null || slotElements === void 0
+		? void 0
+		: slotElements.length)) return;
+
+		const contentRootElement = slotElements[0];
+
+		if (event.composedPath().includes(contentRootElement)) {
+			lastFocus = event.target;
+		} else {
+			attemptFocusOnFirstDescendant(contentRootElement.childNodes);
+
+			if (lastFocus == document.activeElement) {
+				attemptFocusOnLastDescendant(contentRootElement.childNodes);
+			}
+
+			lastFocus = document.activeElement;
+		}
+	}
+
+	function div_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			element = $$value;
+			$$invalidate(0, element);
+		});
+	}
+
+	$$self.$$set = $$props => {
+		if ('open' in $$props) $$invalidate(1, open = $$props.open);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*open*/ 2) {
+			$$invalidate(2, isOpen = toBoolean(open));
+		}
+
+		if ($$self.$$.dirty & /*isOpen*/ 4) {
+			{
+				if (isOpen) {
+					addListeners();
+				} else {
+					removeListeners();
+				}
+			}
+		}
+	};
+
+	return [element, open, isOpen, div_binding];
+}
+
+class FocusTrap extends SvelteElement {
+	constructor(options) {
+		super();
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance$2,
+			create_fragment$2,
+			safe_not_equal,
+			{ open: 1 },
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return ["open"];
+	}
+
+	get open() {
+		return this.$$.ctx[1];
+	}
+
+	set open(open) {
+		this.$$set({ open });
+		flush();
+	}
+}
+
+customElements.define("goa-focus-trap", FocusTrap);
+
 /* libs/web-components/src/components/container/ContainerWrapper.test.svelte generated by Svelte v3.44.3 */
 
 function create_if_block_1(ctx) {
@@ -10546,7 +10933,7 @@ function create_if_block(ctx) {
 	};
 }
 
-function create_fragment(ctx) {
+function create_fragment$1(ctx) {
 	let goa_container;
 	let t0;
 	let t1;
@@ -10623,7 +11010,7 @@ function create_fragment(ctx) {
 	};
 }
 
-function instance($$self, $$props, $$invalidate) {
+function instance$1($$self, $$props, $$invalidate) {
 	let { title } = $$props;
 	let { actions = "" } = $$props;
 	let { content } = $$props;
@@ -10652,8 +11039,8 @@ class ContainerWrapper_test extends SvelteElement {
 				props: attribute_to_object(this.attributes),
 				customElement: true
 			},
-			instance,
-			create_fragment,
+			instance$1,
+			create_fragment$1,
 			safe_not_equal,
 			{
 				title: 0,
@@ -10729,4 +11116,110 @@ class ContainerWrapper_test extends SvelteElement {
 
 customElements.define("test-container", ContainerWrapper_test);
 
-export { ContainerWrapper_test as ContainerWrapper, AppFooter as GoAAppFooter, AppHeader as GoAAppHeader, Badge as GoABadge, Button as GoAButton, ButtonGroup as GoAButtonGroup, Callout as GoACallout, Card as GoACard, CardActions as GoACardActions, CardContent as GoACardContent, CardGroup as GoACardGroup, CardImage as GoACardImage, Checkbox as GoACheckbox, Chip as GoAChip, CircularProgress as GoACircularProgress, Container as GoAContainer, Dropdown as GoADropdown, DropdownItem as GoADropdownItem, FlexRow as GoAFlexRow, FormItem as GoAFormItem, HeroBanner as GoAHeroBanner, Icon as GoAIcon, IconButton as GoAIconButton, Input as GoAInput, MetaLink as GoAMetaLink, MicrositeHeader as GoAMicrositeHeader, Modal as GoAModal, NavigationLink as GoANavigationLink, Notification as GoANotification, PageBlock as GoAPageBlock, PageLayout as GoAPageLayout, RadioGroup as GoARadioGroup, RadioItem as GoARadioItem, Scrollable as GoAScrollable, Skeleton as GoASkeleton, Spinner as GoASpinner, TextArea as GoATextArea };
+/* libs/web-components/src/components/divider/Divider.svelte generated by Svelte v3.44.3 */
+
+function create_fragment(ctx) {
+	let hr;
+
+	return {
+		c() {
+			hr = element("hr");
+			this.c = noop;
+			set_style(hr, "--spacing", /*_spacing*/ ctx[0]);
+		},
+		m(target, anchor) {
+			insert(target, hr, anchor);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*_spacing*/ 1) {
+				set_style(hr, "--spacing", /*_spacing*/ ctx[0]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(hr);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let _spacing;
+	let { spacing = "" } = $$props;
+	const SPACING = ["small", "medium", "large"];
+
+	function isSpacing(value) {
+		return SPACING.includes(value);
+	}
+
+	onMount(() => {
+		if (!isSpacing(spacing)) {
+			throw "Invalid spacing";
+		}
+	});
+
+	$$self.$$set = $$props => {
+		if ('spacing' in $$props) $$invalidate(1, spacing = $$props.spacing);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*spacing*/ 2) {
+			$$invalidate(0, _spacing = ({
+				small: "1rem",
+				medium: "2rem",
+				large: "4rem"
+			})[spacing]);
+		}
+	};
+
+	return [_spacing, spacing];
+}
+
+class Divider extends SvelteElement {
+	constructor(options) {
+		super();
+		this.shadowRoot.innerHTML = `<style>hr{padding:0;margin:var(--spacing) 0;border:none;border-top:1px solid var(--color-gray-200)}</style>`;
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{ spacing: 1 },
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return ["spacing"];
+	}
+
+	get spacing() {
+		return this.$$.ctx[1];
+	}
+
+	set spacing(spacing) {
+		this.$$set({ spacing });
+		flush();
+	}
+}
+
+customElements.define("goa-divider", Divider);
+
+export { ContainerWrapper_test as ContainerWrapper, Divider, AppFooter as GoAAppFooter, AppHeader as GoAAppHeader, Badge as GoABadge, Button as GoAButton, ButtonGroup as GoAButtonGroup, Callout as GoACallout, Card as GoACard, CardActions as GoACardActions, CardContent as GoACardContent, CardGroup as GoACardGroup, CardImage as GoACardImage, Checkbox as GoACheckbox, Chip as GoAChip, CircularProgress as GoACircularProgress, Container as GoAContainer, Dropdown as GoADropdown, DropdownItem as GoADropdownItem, FlexRow as GoAFlexRow, FocusTrap as GoAFocusTrap, FormItem as GoAFormItem, HeroBanner as GoAHeroBanner, Icon as GoAIcon, IconButton as GoAIconButton, Input as GoAInput, MetaLink as GoAMetaLink, MicrositeHeader as GoAMicrositeHeader, Modal as GoAModal, NavigationLink as GoANavigationLink, Notification as GoANotification, PageBlock as GoAPageBlock, PageLayout as GoAPageLayout, RadioGroup as GoARadioGroup, RadioItem as GoARadioItem, Scrollable as GoAScrollable, Skeleton as GoASkeleton, Spinner as GoASpinner, TextArea as GoATextArea };