@abgov/web-components 1.0.0-alpha.60 → 1.0.0-alpha.61

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$x(ctx) {
+function create_fragment$A(ctx) {
 	let div;
 
 	return {
@@ -870,113 +870,1192 @@ class PageBlock extends SvelteElement {
 				customElement: true
 			},
 			null,
-			create_fragment$x,
+			create_fragment$A,
 			safe_not_equal,
 			{},
 			null
 		);
 
-		if (options) {
-			if (options.target) {
-				insert(options.target, this, options.anchor);
-			}
-		}
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+		}
+	}
+}
+
+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) {
+	let div1;
+	let a;
+	let img0;
+	let img0_src_value;
+	let t0;
+	let img1;
+	let img1_src_value;
+	let t1;
+	let span;
+	let t2;
+	let t3;
+	let div0;
+
+	return {
+		c() {
+			div1 = element("div");
+			a = element("a");
+			img0 = element("img");
+			t0 = space();
+			img1 = element("img");
+			t1 = space();
+			span = element("span");
+			t2 = text(/*title*/ ctx[1]);
+			t3 = space();
+			div0 = element("div");
+			div0.innerHTML = `<slot></slot>`;
+			this.c = noop;
+			attr(img0, "alt", "GoA Logo");
+			attr(img0, "class", "image-mobile");
+			if (!src_url_equal(img0.src, img0_src_value = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bfill:%2300aad2;%7D.c%7Bclip-path:url(%23a);%7D.d%7Bfill:%23fff;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='14' height='14' transform='translate(-0.345 -0.21)'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(0 -0.135)'%3E%3Ccircle class='b' cx='8' cy='8' r='8' transform='translate(0 0.135)'/%3E%3Cg transform='translate(1.345 1.344)'%3E%3Cg class='c' transform='translate(0 0)'%3E%3Cpath class='d' d='M12.612,13.636a16.24,16.24,0,0,1-1.86-.822,13.436,13.436,0,0,0,1.6-.708,11.312,11.312,0,0,0,.264,1.53M16.032,7.3c-.266-.034-.128.091-.2.442a5.465,5.465,0,0,1-2.8,3.338,16.141,16.141,0,0,1,.249-4.84c.275-1,.6-.813.2-1.022-.427-.22-.887.071-1.258.813A27.247,27.247,0,0,1,7.4,13.522a2.141,2.141,0,0,1-2.918.461c-.206-.174-.282.095-.026.37a2.412,2.412,0,0,0,3.387-.082A32.715,32.715,0,0,0,12.219,7.51a23.541,23.541,0,0,0,.063,3.971,11.464,11.464,0,0,1-1.964.749c-.388.1-.628.26-.635.439-.007.2.253.363.63.541.67.318,2.633,1.246,3.117,1.527.414.24.616.053.739-.207.16-.338-.279-.533-.7-.661a13.175,13.175,0,0,1-.382-2.179,7.143,7.143,0,0,0,2.547-2.454,4.7,4.7,0,0,0,.4-1.133,2.125,2.125,0,0,0,.048-.742s-.007-.054-.048-.059' transform='translate(-3.51 -3.943)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")) attr(img0, "src", img0_src_value);
+			attr(img1, "alt", "GoA Logo");
+			attr(img1, "class", "image-desktop");
+			if (!src_url_equal(img1.src, img1_src_value = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='149.351' height='42' viewBox='0 0 149.351 42'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bclip-path:url(%23a);%7D.c%7Bfill:%2300aad2;%7D.d%7Bfill:%235f6a72;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='149.351' height='42'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='b'%3E%3Crect class='c' width='13.555' height='13.555' transform='translate(135.796 21.524)'/%3E%3Cpath class='d' d='M63.082,33.088c-1.383.138-2.835.277-4.357.346.553-4.357,2.835-10.373,5.671-9.405,1.66.553.761,5.671-1.314,9.059m-3.527,2.974a3.761,3.761,0,0,1-1.245,0,.851.851,0,0,0,.346-.692v-.553c.761,0,1.936-.138,3.389-.277a4.327,4.327,0,0,1-2.49,1.521M76.844,25.688c1.8-1.66,2.7-1.521,2.9-1.106.484.968-1.591,4.357-5.671,6.224a10.328,10.328,0,0,1,2.766-5.118m66.736,1.66c-.207-3.389-3.181-3.942-3.6-2.974-.138.346,1.106.207,1.106,2.628,0,3.942-4.011,9.129-9.129,9.129-5.532,0-6.985-4.357-7.261-6.432-.207-1.452.138-3.458-2.351-3.181-1.729.207-3.25,3.527-5.463,6.362-1.867,2.42-2.7,2.213-2.282.138.553-2.628,2.7-8.714,5.187-9.129,1.176-.207,1.591,1.8,2.075.553s.069-4.011-2.559-4.011c-1.8,0-3.942,1.936-5.74,4.08-1.521,1.936-9.336,13.416-12.656,10.927-1.521-1.176-1.383-5.878-.415-11.411,3.873-1.521,7.123-1.037,8.921-.138.9.415,1.037.346.622-.622-.553-1.452-3.665-3.734-8.575-2.7-.138,0-.207.069-.346.069.415-1.8.83-3.665,1.383-5.463.484-1.66,1.8-4.5-1.729-4.979-1.106-.207-.622.346-1.037,1.867-.692,2.766-1.521,6.362-2.144,10.028a19.745,19.745,0,0,0-7.538,8.091,38.59,38.59,0,0,0,.9-4.772,1.589,1.589,0,0,0-1.245-1.729c-.761-.207-1.729.138-2.628,1.452-2.144,3.043-4.841,7.815-8.99,9.82-2.974,1.452-4.288,0-4.357-2.282a9.869,9.869,0,0,0,1.521-.553c5.394-2.351,7.192-5.947,5.878-8.16-1.314-2.075-4.979-1.452-7.953,1.66a11.175,11.175,0,0,0-2.7,6.5c-1.245.277-2.628.484-4.219.692,2.49-4.08,2.282-9.613-1.383-10.581-4.288-1.106-6.432,3.043-7.331,6.5.346-3.873.9-7.745,1.591-11.549.346-1.66,1.452-4.5-2.075-4.979-1.106-.207-.968.346-.9,1.867.138,2.075-2.144,14.454-.968,19.848-1.521.484-2.144,1.66-.207,2.835,1.383.83,4.357,1.106,7.331-.346a9.3,9.3,0,0,0,2.766-2.144c1.8-.207,3.665-.553,5.394-.83.277,2.42,1.867,4.219,5.463,3.873,5.118-.484,9.682-6.777,11.411-9.82-.346,3.25-2.42,10.373,1.176,10.028,1.383-.138.83-.346.9-1.591.346-4.288,3.873-7.953,7.4-10.166-.622,5.256-.415,9.958,2.006,11.411,4.426,2.766,10.581-4.5,14.039-8.921-1.729,3.942-2.7,8.921-.138,9.682,3.043.9,5.463-4.219,8.3-8.091.346,2.766,2.213,7.607,9.682,7.607,8.022-.069,13.071-4.91,12.863-10.1m-108.3,8.645A66.439,66.439,0,0,1,27.4,32.534a59.168,59.168,0,0,0,6.777-2.974,54.453,54.453,0,0,0,1.106,6.432m20.4,3.873c-.069-.207-.622.069-1.106,0-1.452-.207-3.389-2.213-3.942-5.463-1.037-5.878-.415-11.687,1.314-20.332.346-1.66,1.452-4.5-2.075-5.048-1.106-.138-.553.415-.83,1.867C47.66,17.32,42.4,21.954,37.149,25.066,36.6,17.735,36.8,9.505,38.186,4.526c1.176-4.219,2.559-3.458.83-4.357s-3.734.277-5.325,3.458S24.839,23.89,13.221,35.439C7.273,41.317,1.879,38.274.842,37.375c-.9-.761-1.176.415-.138,1.591,4.772,5.256,11.826,2.282,14.384-.277,7.054-7.054,15.283-22.268,18.6-28.7a98.251,98.251,0,0,0,.277,16.874,50.129,50.129,0,0,1-8.3,3.181c-1.66.415-2.7,1.106-2.7,1.867s1.106,1.521,2.7,2.282c2.835,1.383,11.2,5.256,13.209,6.5,1.729,1.037,2.628.207,3.112-.9.692-1.452-1.176-2.282-2.974-2.766a60.545,60.545,0,0,1-1.66-9.267c4.219-2.628,8.437-6.086,10.788-10.443C47.522,20.916,46,33.3,49.873,38.482a5.451,5.451,0,0,0,4.564,2.213c.968-.069,1.383-.692,1.245-.83' transform='translate(-0.038 0.124)'/%3E%3C/g%3E%3C/svg%3E")) attr(img1, "src", img1_src_value);
+			attr(span, "class", "title");
+			attr(a, "href", /*url*/ ctx[0]);
+			attr(a, "class", "app-link");
+			attr(div1, "class", "app-header");
+			attr(div1, "data-testid", /*testid*/ ctx[2]);
+		},
+		m(target, anchor) {
+			insert(target, div1, anchor);
+			append(div1, a);
+			append(a, img0);
+			append(a, t0);
+			append(a, img1);
+			append(a, t1);
+			append(a, span);
+			append(span, t2);
+			append(div1, t3);
+			append(div1, div0);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*title*/ 2) set_data(t2, /*title*/ ctx[1]);
+
+			if (dirty & /*url*/ 1) {
+				attr(a, "href", /*url*/ ctx[0]);
+			}
+
+			if (dirty & /*testid*/ 4) {
+				attr(div1, "data-testid", /*testid*/ ctx[2]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div1);
+		}
+	};
+}
+
+function instance$v($$self, $$props, $$invalidate) {
+	let { url = "#" } = $$props;
+	let { title = "" } = $$props;
+	let { testid = "" } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('url' in $$props) $$invalidate(0, url = $$props.url);
+		if ('title' in $$props) $$invalidate(1, title = $$props.title);
+		if ('testid' in $$props) $$invalidate(2, testid = $$props.testid);
+	};
+
+	return [url, title, testid];
+}
+
+class AppHeader extends SvelteElement {
+	constructor(options) {
+		super();
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.app-header{display:flex;align-items:center;justify-content:space-between;margin:0 auto;padding:1rem 0.5rem;border-bottom:1px solid var(--color-gray-100)}.app-link{display:flex;align-items:center;text-decoration:none;color:inherit}.title{margin-left:0.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.image-desktop{display:none}.image-mobile{display:block}@media(min-width: 768px){.image-desktop{display:block}.image-mobile{display:none}.title{margin-left:1.75rem}.image-desktop{display:block}.image-mobile{display:none}}</style>`;
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance$v,
+			create_fragment$z,
+			safe_not_equal,
+			{ url: 0, title: 1, testid: 2 },
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return ["url", "title", "testid"];
+	}
+
+	get url() {
+		return this.$$.ctx[0];
+	}
+
+	set url(url) {
+		this.$$set({ url });
+		flush();
+	}
+
+	get title() {
+		return this.$$.ctx[1];
+	}
+
+	set title(title) {
+		this.$$set({ title });
+		flush();
+	}
+
+	get testid() {
+		return this.$$.ctx[2];
+	}
+
+	set testid(testid) {
+		this.$$set({ testid });
+		flush();
+	}
+}
+
+customElements.define("goa-app-header", AppHeader);
+
+const subscriber_queue = [];
+/**
+ * Create a `Writable` store that allows both updating and reading by subscription.
+ * @param {*=}value initial value
+ * @param {StartStopNotifier=}start start and stop notifications for subscriptions
+ */
+function writable(value, start = noop) {
+    let stop;
+    const subscribers = new Set();
+    function set(new_value) {
+        if (safe_not_equal(value, new_value)) {
+            value = new_value;
+            if (stop) { // store is ready
+                const run_queue = !subscriber_queue.length;
+                for (const subscriber of subscribers) {
+                    subscriber[1]();
+                    subscriber_queue.push(subscriber, value);
+                }
+                if (run_queue) {
+                    for (let i = 0; i < subscriber_queue.length; i += 2) {
+                        subscriber_queue[i][0](subscriber_queue[i + 1]);
+                    }
+                    subscriber_queue.length = 0;
+                }
+            }
+        }
+    }
+    function update(fn) {
+        set(fn(value));
+    }
+    function subscribe(run, invalidate = noop) {
+        const subscriber = [run, invalidate];
+        subscribers.add(subscriber);
+        if (subscribers.size === 1) {
+            stop = start(set) || noop;
+        }
+        run(value);
+        return () => {
+            subscribers.delete(subscriber);
+            if (subscribers.size === 0) {
+                stop();
+                stop = null;
+            }
+        };
+    }
+    return { set, update, subscribe };
+}
+
+const stores = {};
+class ContextStore {
+  constructor() {
+    this.store = writable();
+  }
+  subscribe(cb) {
+    this.store.subscribe((state) => {
+      cb(state);
+    });
+  }
+  notify(msg) {
+    this.store.update(() => msg);
+  }
+}
+function createContext(name) {
+  const ctx = new ContextStore();
+  stores[name] = ctx;
+  return ctx;
+}
+async function getContext(name) {
+  return await _getContext(name, 0);
+}
+async function _getContext(name, attempts) {
+  if (attempts > 10) {
+    throw new Error(`Could not find context ${name}`);
+  }
+  if (stores[name]) {
+    return stores[name];
+  }
+  await tick();
+  return _getContext(name, attempts + 1);
+}
+function deleteContext(name) {
+  const store = stores[name];
+  if (!store)
+    return;
+  delete stores[name];
+}
+
+const META_LINK = "meta-link";
+const NAVIGATION_LINK = "navigation-link";
+
+/* libs/web-components/src/components/app-footer/AppFooter.svelte generated by Svelte v3.44.3 */
+
+function get_each_context$2(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[16] = list[i];
+	return child_ctx;
+}
+
+function get_each_context_3(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[22] = list[i];
+	return child_ctx;
+}
+
+function get_each_context_1(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[19] = list[i];
+	return child_ctx;
+}
+
+function get_each_context_2(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[22] = list[i];
+	return child_ctx;
+}
+
+// (83:6) {#if (navigationSections.length || navigationLinks.length) }
+function create_if_block_1$b(ctx) {
+	let div;
+	let t;
+	let hr;
+
+	function select_block_type(ctx, dirty) {
+		if (/*navigationSections*/ ctx[6].length) return create_if_block_2$6;
+		if (/*navigationLinks*/ ctx[5].length) return create_if_block_3$4;
+	}
+
+	let current_block_type = select_block_type(ctx);
+	let if_block = current_block_type && current_block_type(ctx);
+
+	return {
+		c() {
+			div = element("div");
+			if (if_block) if_block.c();
+			t = space();
+			hr = element("hr");
+			attr(div, "class", "navigation-links");
+			attr(hr, "class", "navigation-links-divider");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			if (if_block) if_block.m(div, null);
+			insert(target, t, anchor);
+			insert(target, hr, anchor);
+		},
+		p(ctx, dirty) {
+			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
+				if_block.p(ctx, dirty);
+			} else {
+				if (if_block) if_block.d(1);
+				if_block = current_block_type && current_block_type(ctx);
+
+				if (if_block) {
+					if_block.c();
+					if_block.m(div, null);
+				}
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+
+			if (if_block) {
+				if_block.d();
+			}
+
+			if (detaching) detach(t);
+			if (detaching) detach(hr);
+		}
+	};
+}
+
+// (95:44) 
+function create_if_block_3$4(ctx) {
+	let each_blocks = [];
+	let each_1_lookup = new Map();
+	let each_1_anchor;
+	let each_value_3 = /*navigationLinks*/ ctx[5];
+	const get_key = ctx => /*navigationlink*/ ctx[22].title;
+
+	for (let i = 0; i < each_value_3.length; i += 1) {
+		let child_ctx = get_each_context_3(ctx, each_value_3, i);
+		let key = get_key(child_ctx);
+		each_1_lookup.set(key, each_blocks[i] = create_each_block_3(key, child_ctx));
+	}
+
+	return {
+		c() {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			each_1_anchor = empty();
+		},
+		m(target, anchor) {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(target, anchor);
+			}
+
+			insert(target, each_1_anchor, anchor);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*navigationLinks*/ 32) {
+				each_value_3 = /*navigationLinks*/ ctx[5];
+				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value_3, each_1_lookup, each_1_anchor.parentNode, destroy_block, create_each_block_3, each_1_anchor, get_each_context_3);
+			}
+		},
+		d(detaching) {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].d(detaching);
+			}
+
+			if (detaching) detach(each_1_anchor);
+		}
+	};
+}
+
+// (85:10) {#if navigationSections.length}
+function create_if_block_2$6(ctx) {
+	let each_blocks = [];
+	let each_1_lookup = new Map();
+	let each_1_anchor;
+	let each_value_1 = /*navigationSections*/ ctx[6];
+	const get_key = ctx => /*navigationSection*/ ctx[19].name;
+
+	for (let i = 0; i < each_value_1.length; i += 1) {
+		let child_ctx = get_each_context_1(ctx, each_value_1, i);
+		let key = get_key(child_ctx);
+		each_1_lookup.set(key, each_blocks[i] = create_each_block_1(key, child_ctx));
+	}
+
+	return {
+		c() {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			each_1_anchor = empty();
+		},
+		m(target, anchor) {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(target, anchor);
+			}
+
+			insert(target, each_1_anchor, anchor);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*navigationSections*/ 64) {
+				each_value_1 = /*navigationSections*/ ctx[6];
+				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value_1, each_1_lookup, each_1_anchor.parentNode, destroy_block, create_each_block_1, each_1_anchor, get_each_context_1);
+			}
+		},
+		d(detaching) {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].d(detaching);
+			}
+
+			if (detaching) detach(each_1_anchor);
+		}
+	};
+}
+
+// (96:12) {#each navigationLinks as navigationlink (navigationlink.title) }
+function create_each_block_3(key_1, ctx) {
+	let a;
+	let t_value = /*navigationlink*/ ctx[22].title + "";
+	let t;
+	let a_href_value;
+
+	return {
+		key: key_1,
+		first: null,
+		c() {
+			a = element("a");
+			t = text(t_value);
+			attr(a, "href", a_href_value = /*navigationlink*/ ctx[22].url);
+			attr(a, "class", "navigation-link");
+			this.first = a;
+		},
+		m(target, anchor) {
+			insert(target, a, anchor);
+			append(a, t);
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+			if (dirty & /*navigationLinks*/ 32 && t_value !== (t_value = /*navigationlink*/ ctx[22].title + "")) set_data(t, t_value);
+
+			if (dirty & /*navigationLinks*/ 32 && a_href_value !== (a_href_value = /*navigationlink*/ ctx[22].url)) {
+				attr(a, "href", a_href_value);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(a);
+		}
+	};
+}
+
+// (90:16) {#each navigationSection.links as navigationlink (navigationlink.title) }
+function create_each_block_2(key_1, ctx) {
+	let a;
+	let t_value = /*navigationlink*/ ctx[22].title + "";
+	let t;
+	let a_href_value;
+
+	return {
+		key: key_1,
+		first: null,
+		c() {
+			a = element("a");
+			t = text(t_value);
+			attr(a, "href", a_href_value = /*navigationlink*/ ctx[22].url);
+			attr(a, "class", "navigation-link");
+			this.first = a;
+		},
+		m(target, anchor) {
+			insert(target, a, anchor);
+			append(a, t);
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+			if (dirty & /*navigationSections*/ 64 && t_value !== (t_value = /*navigationlink*/ ctx[22].title + "")) set_data(t, t_value);
+
+			if (dirty & /*navigationSections*/ 64 && a_href_value !== (a_href_value = /*navigationlink*/ ctx[22].url)) {
+				attr(a, "href", a_href_value);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(a);
+		}
+	};
+}
+
+// (86:12) {#each navigationSections as navigationSection (navigationSection.name) }
+function create_each_block_1(key_1, ctx) {
+	let div;
+	let span;
+	let t0_value = /*navigationSection*/ ctx[19].name + "";
+	let t0;
+	let t1;
+	let hr;
+	let t2;
+	let each_blocks = [];
+	let each_1_lookup = new Map();
+	let t3;
+	let each_value_2 = /*navigationSection*/ ctx[19].links;
+	const get_key = ctx => /*navigationlink*/ ctx[22].title;
+
+	for (let i = 0; i < each_value_2.length; i += 1) {
+		let child_ctx = get_each_context_2(ctx, each_value_2, i);
+		let key = get_key(child_ctx);
+		each_1_lookup.set(key, each_blocks[i] = create_each_block_2(key, child_ctx));
+	}
+
+	return {
+		key: key_1,
+		first: null,
+		c() {
+			div = element("div");
+			span = element("span");
+			t0 = text(t0_value);
+			t1 = space();
+			hr = element("hr");
+			t2 = space();
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			t3 = space();
+			attr(span, "class", "navigation-section-name");
+			attr(hr, "class", "navigation-section-name-divider");
+			attr(div, "class", "navigation-section");
+			this.first = div;
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, span);
+			append(span, t0);
+			append(div, t1);
+			append(div, hr);
+			append(div, t2);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(div, null);
+			}
+
+			append(div, t3);
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+			if (dirty & /*navigationSections*/ 64 && t0_value !== (t0_value = /*navigationSection*/ ctx[19].name + "")) set_data(t0, t0_value);
+
+			if (dirty & /*navigationSections*/ 64) {
+				each_value_2 = /*navigationSection*/ ctx[19].links;
+				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value_2, each_1_lookup, div, destroy_block, create_each_block_2, t3, get_each_context_2);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].d();
+			}
+		}
+	};
+}
+
+// (106:8) {#if metaLinks.length }
+function create_if_block$f(ctx) {
+	let div;
+	let each_blocks = [];
+	let each_1_lookup = new Map();
+	let each_value = /*metaLinks*/ ctx[4];
+	const get_key = ctx => /*metalink*/ ctx[16].title;
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		let child_ctx = get_each_context$2(ctx, each_value, i);
+		let key = get_key(child_ctx);
+		each_1_lookup.set(key, each_blocks[i] = create_each_block$2(key, child_ctx));
+	}
+
+	return {
+		c() {
+			div = element("div");
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			attr(div, "class", "meta-links");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(div, null);
+			}
+		},
+		p(ctx, dirty) {
+			if (dirty & /*metaLinks*/ 16) {
+				each_value = /*metaLinks*/ ctx[4];
+				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, destroy_block, create_each_block$2, null, get_each_context$2);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].d();
+			}
+		}
+	};
+}
+
+// (108:12) {#each metaLinks as metalink (metalink.title) }
+function create_each_block$2(key_1, ctx) {
+	let a;
+	let t_value = /*metalink*/ ctx[16].title + "";
+	let t;
+	let a_href_value;
+
+	return {
+		key: key_1,
+		first: null,
+		c() {
+			a = element("a");
+			t = text(t_value);
+			attr(a, "href", a_href_value = /*metalink*/ ctx[16].url);
+			attr(a, "class", "meta-link");
+			this.first = a;
+		},
+		m(target, anchor) {
+			insert(target, a, anchor);
+			append(a, t);
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+			if (dirty & /*metaLinks*/ 16 && t_value !== (t_value = /*metalink*/ ctx[16].title + "")) set_data(t, t_value);
+
+			if (dirty & /*metaLinks*/ 16 && a_href_value !== (a_href_value = /*metalink*/ ctx[16].url)) {
+				attr(a, "href", a_href_value);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(a);
+		}
+	};
+}
+
+function create_fragment$y(ctx) {
+	let div3;
+	let center;
+	let div2;
+	let slot;
+	let t0;
+	let t1;
+	let div1;
+	let t2;
+	let div0;
+	let a0;
+	let t3;
+	let t4;
+	let t5;
+	let a1;
+	let img;
+	let img_src_value;
+	let t6;
+	let div4;
+	let if_block0 = (/*navigationSections*/ ctx[6].length || /*navigationLinks*/ ctx[5].length) && create_if_block_1$b(ctx);
+	let if_block1 = /*metaLinks*/ ctx[4].length && create_if_block$f(ctx);
+
+	return {
+		c() {
+			div3 = element("div");
+			center = element("center");
+			div2 = element("div");
+			slot = element("slot");
+			t0 = space();
+			if (if_block0) if_block0.c();
+			t1 = space();
+			div1 = element("div");
+			if (if_block1) if_block1.c();
+			t2 = space();
+			div0 = element("div");
+			a0 = element("a");
+			t3 = text("© ");
+			t4 = text(/*copyrighttext*/ ctx[3]);
+			t5 = space();
+			a1 = element("a");
+			img = element("img");
+			t6 = space();
+			div4 = element("div");
+			this.c = noop;
+			attr(a0, "href", /*copyrighturl*/ ctx[0]);
+			attr(a0, "class", "goa-copyright");
+			attr(img, "alt", "GoA Logo");
+			attr(img, "class", "logo");
+			if (!src_url_equal(img.src, img_src_value = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='149.351' height='42' viewBox='0 0 149.351 42'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bclip-path:url(%23a);%7D.c%7Bfill:%2300aad2;%7D.d%7Bfill:%235f6a72;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='149.351' height='42'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='b'%3E%3Crect class='c' width='13.555' height='13.555' transform='translate(135.796 21.524)'/%3E%3Cpath class='d' d='M63.082,33.088c-1.383.138-2.835.277-4.357.346.553-4.357,2.835-10.373,5.671-9.405,1.66.553.761,5.671-1.314,9.059m-3.527,2.974a3.761,3.761,0,0,1-1.245,0,.851.851,0,0,0,.346-.692v-.553c.761,0,1.936-.138,3.389-.277a4.327,4.327,0,0,1-2.49,1.521M76.844,25.688c1.8-1.66,2.7-1.521,2.9-1.106.484.968-1.591,4.357-5.671,6.224a10.328,10.328,0,0,1,2.766-5.118m66.736,1.66c-.207-3.389-3.181-3.942-3.6-2.974-.138.346,1.106.207,1.106,2.628,0,3.942-4.011,9.129-9.129,9.129-5.532,0-6.985-4.357-7.261-6.432-.207-1.452.138-3.458-2.351-3.181-1.729.207-3.25,3.527-5.463,6.362-1.867,2.42-2.7,2.213-2.282.138.553-2.628,2.7-8.714,5.187-9.129,1.176-.207,1.591,1.8,2.075.553s.069-4.011-2.559-4.011c-1.8,0-3.942,1.936-5.74,4.08-1.521,1.936-9.336,13.416-12.656,10.927-1.521-1.176-1.383-5.878-.415-11.411,3.873-1.521,7.123-1.037,8.921-.138.9.415,1.037.346.622-.622-.553-1.452-3.665-3.734-8.575-2.7-.138,0-.207.069-.346.069.415-1.8.83-3.665,1.383-5.463.484-1.66,1.8-4.5-1.729-4.979-1.106-.207-.622.346-1.037,1.867-.692,2.766-1.521,6.362-2.144,10.028a19.745,19.745,0,0,0-7.538,8.091,38.59,38.59,0,0,0,.9-4.772,1.589,1.589,0,0,0-1.245-1.729c-.761-.207-1.729.138-2.628,1.452-2.144,3.043-4.841,7.815-8.99,9.82-2.974,1.452-4.288,0-4.357-2.282a9.869,9.869,0,0,0,1.521-.553c5.394-2.351,7.192-5.947,5.878-8.16-1.314-2.075-4.979-1.452-7.953,1.66a11.175,11.175,0,0,0-2.7,6.5c-1.245.277-2.628.484-4.219.692,2.49-4.08,2.282-9.613-1.383-10.581-4.288-1.106-6.432,3.043-7.331,6.5.346-3.873.9-7.745,1.591-11.549.346-1.66,1.452-4.5-2.075-4.979-1.106-.207-.968.346-.9,1.867.138,2.075-2.144,14.454-.968,19.848-1.521.484-2.144,1.66-.207,2.835,1.383.83,4.357,1.106,7.331-.346a9.3,9.3,0,0,0,2.766-2.144c1.8-.207,3.665-.553,5.394-.83.277,2.42,1.867,4.219,5.463,3.873,5.118-.484,9.682-6.777,11.411-9.82-.346,3.25-2.42,10.373,1.176,10.028,1.383-.138.83-.346.9-1.591.346-4.288,3.873-7.953,7.4-10.166-.622,5.256-.415,9.958,2.006,11.411,4.426,2.766,10.581-4.5,14.039-8.921-1.729,3.942-2.7,8.921-.138,9.682,3.043.9,5.463-4.219,8.3-8.091.346,2.766,2.213,7.607,9.682,7.607,8.022-.069,13.071-4.91,12.863-10.1m-108.3,8.645A66.439,66.439,0,0,1,27.4,32.534a59.168,59.168,0,0,0,6.777-2.974,54.453,54.453,0,0,0,1.106,6.432m20.4,3.873c-.069-.207-.622.069-1.106,0-1.452-.207-3.389-2.213-3.942-5.463-1.037-5.878-.415-11.687,1.314-20.332.346-1.66,1.452-4.5-2.075-5.048-1.106-.138-.553.415-.83,1.867C47.66,17.32,42.4,21.954,37.149,25.066,36.6,17.735,36.8,9.505,38.186,4.526c1.176-4.219,2.559-3.458.83-4.357s-3.734.277-5.325,3.458S24.839,23.89,13.221,35.439C7.273,41.317,1.879,38.274.842,37.375c-.9-.761-1.176.415-.138,1.591,4.772,5.256,11.826,2.282,14.384-.277,7.054-7.054,15.283-22.268,18.6-28.7a98.251,98.251,0,0,0,.277,16.874,50.129,50.129,0,0,1-8.3,3.181c-1.66.415-2.7,1.106-2.7,1.867s1.106,1.521,2.7,2.282c2.835,1.383,11.2,5.256,13.209,6.5,1.729,1.037,2.628.207,3.112-.9.692-1.452-1.176-2.282-2.974-2.766a60.545,60.545,0,0,1-1.66-9.267c4.219-2.628,8.437-6.086,10.788-10.443C47.522,20.916,46,33.3,49.873,38.482a5.451,5.451,0,0,0,4.564,2.213c.968-.069,1.383-.692,1.245-.83' transform='translate(-0.038 0.124)'/%3E%3C/g%3E%3C/svg%3E")) attr(img, "src", img_src_value);
+			attr(a1, "href", /*appurl*/ ctx[1]);
+			attr(a1, "title", /*title*/ ctx[2]);
+			attr(div0, "class", "logo-and-copyright");
+			toggle_class(div0, "logo-and-copyright-with-links", /*metaLinks*/ ctx[4].length || /*navigationLinks*/ ctx[5].length || /*navigationSections*/ ctx[6].length);
+			toggle_class(div1, "meta-links-logo-and-copyright", /*metaLinks*/ ctx[4].length);
+			attr(div2, "class", "footer");
+			toggle_class(div2, "default-footer", /*isDefaultFooter*/ ctx[12]);
+			toggle_class(div2, "meta-links-only-footer", /*isMetaLinksOnlyFooter*/ ctx[11]);
+			toggle_class(div2, "navigation-links-only-footer", /*isNavigationLinksOnlyFooter*/ ctx[10]);
+			toggle_class(div2, "navigation-sections-only-footer", /*isNavigationSectionsOnlyFooter*/ ctx[9]);
+			toggle_class(div2, "meta-and-navigation-links-only-footer", /*isMetaAndNavigationLinksFooter*/ ctx[8]);
+			toggle_class(div2, "meta-and-navigation-sections-only-footer", /*isMetaAndNavigationSectionsFooter*/ ctx[7]);
+			attr(div3, "class", "app-footer-container");
+			attr(div4, "class", "brand");
+		},
+		m(target, anchor) {
+			insert(target, div3, anchor);
+			append(div3, center);
+			append(center, div2);
+			append(div2, slot);
+			append(div2, t0);
+			if (if_block0) if_block0.m(div2, null);
+			append(div2, t1);
+			append(div2, div1);
+			if (if_block1) if_block1.m(div1, null);
+			append(div1, t2);
+			append(div1, div0);
+			append(div0, a0);
+			append(a0, t3);
+			append(a0, t4);
+			append(div0, t5);
+			append(div0, a1);
+			append(a1, img);
+			insert(target, t6, anchor);
+			insert(target, div4, anchor);
+		},
+		p(ctx, [dirty]) {
+			if (/*navigationSections*/ ctx[6].length || /*navigationLinks*/ ctx[5].length) {
+				if (if_block0) {
+					if_block0.p(ctx, dirty);
+				} else {
+					if_block0 = create_if_block_1$b(ctx);
+					if_block0.c();
+					if_block0.m(div2, t1);
+				}
+			} else if (if_block0) {
+				if_block0.d(1);
+				if_block0 = null;
+			}
+
+			if (/*metaLinks*/ ctx[4].length) {
+				if (if_block1) {
+					if_block1.p(ctx, dirty);
+				} else {
+					if_block1 = create_if_block$f(ctx);
+					if_block1.c();
+					if_block1.m(div1, t2);
+				}
+			} else if (if_block1) {
+				if_block1.d(1);
+				if_block1 = null;
+			}
+
+			if (dirty & /*copyrighttext*/ 8) set_data(t4, /*copyrighttext*/ ctx[3]);
+
+			if (dirty & /*copyrighturl*/ 1) {
+				attr(a0, "href", /*copyrighturl*/ ctx[0]);
+			}
+
+			if (dirty & /*appurl*/ 2) {
+				attr(a1, "href", /*appurl*/ ctx[1]);
+			}
+
+			if (dirty & /*title*/ 4) {
+				attr(a1, "title", /*title*/ ctx[2]);
+			}
+
+			if (dirty & /*metaLinks, navigationLinks, navigationSections*/ 112) {
+				toggle_class(div0, "logo-and-copyright-with-links", /*metaLinks*/ ctx[4].length || /*navigationLinks*/ ctx[5].length || /*navigationSections*/ ctx[6].length);
+			}
+
+			if (dirty & /*metaLinks*/ 16) {
+				toggle_class(div1, "meta-links-logo-and-copyright", /*metaLinks*/ ctx[4].length);
+			}
+
+			if (dirty & /*isDefaultFooter*/ 4096) {
+				toggle_class(div2, "default-footer", /*isDefaultFooter*/ ctx[12]);
+			}
+
+			if (dirty & /*isMetaLinksOnlyFooter*/ 2048) {
+				toggle_class(div2, "meta-links-only-footer", /*isMetaLinksOnlyFooter*/ ctx[11]);
+			}
+
+			if (dirty & /*isNavigationLinksOnlyFooter*/ 1024) {
+				toggle_class(div2, "navigation-links-only-footer", /*isNavigationLinksOnlyFooter*/ ctx[10]);
+			}
+
+			if (dirty & /*isNavigationSectionsOnlyFooter*/ 512) {
+				toggle_class(div2, "navigation-sections-only-footer", /*isNavigationSectionsOnlyFooter*/ ctx[9]);
+			}
+
+			if (dirty & /*isMetaAndNavigationLinksFooter*/ 256) {
+				toggle_class(div2, "meta-and-navigation-links-only-footer", /*isMetaAndNavigationLinksFooter*/ ctx[8]);
+			}
+
+			if (dirty & /*isMetaAndNavigationSectionsFooter*/ 128) {
+				toggle_class(div2, "meta-and-navigation-sections-only-footer", /*isMetaAndNavigationSectionsFooter*/ ctx[7]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div3);
+			if (if_block0) if_block0.d();
+			if (if_block1) if_block1.d();
+			if (detaching) detach(t6);
+			if (detaching) detach(div4);
+		}
+	};
+}
+
+function instance$u($$self, $$props, $$invalidate) {
+	let isDefaultFooter;
+	let isMetaLinksOnlyFooter;
+	let isNavigationLinksOnlyFooter;
+	let isNavigationSectionsOnlyFooter;
+	let isMetaAndNavigationLinksFooter;
+	let isMetaAndNavigationSectionsFooter;
+	let { id = "goa-app-footer-id" } = $$props;
+	let { copyrighturl = "#" } = $$props;
+	let { appurl = "#" } = $$props;
+	let { title = "" } = $$props;
+	let { copyrighttext = "2021 Government of Alberta" } = $$props;
+	let ctx;
+	let metaLinks = [];
+	let navigationLinks = [];
+	let navigationSections = [];
+
+	function AppendNavigationLinkWithSection(message) {
+		let otherNavigationSections = navigationSections.filter(navigSection => navigSection.name !== message.section);
+		let existingNavigationSection = navigationSections.find(navigSection => navigSection.name === message.section);
+
+		if (existingNavigationSection) {
+			$$invalidate(6, navigationSections = [
+				...otherNavigationSections,
+				{
+					name: message.section,
+					links: [
+						...existingNavigationSection.links,
+						{ title: message.title, url: message.url }
+					]
+				}
+			]);
+		} else {
+			$$invalidate(6, navigationSections = [
+				...otherNavigationSections,
+				{
+					name: message.section,
+					links: [{ title: message.title, url: message.url }]
+				}
+			]);
+		}
+	}
+
+	onMount(async () => {
+		ctx = createContext(id);
+
+		ctx.subscribe(state => {
+			switch (state === null || state === void 0 ? void 0 : state.type) {
+				case META_LINK:
+					{
+						const message = state;
+						$$invalidate(4, metaLinks = [...metaLinks, { title: message.title, url: message.url }]);
+						break;
+					}
+				case NAVIGATION_LINK:
+					{
+						const message = state;
+
+						if (message.section) {
+							AppendNavigationLinkWithSection(message);
+						} else {
+							$$invalidate(5, navigationLinks = [...navigationLinks, { title: message.title, url: message.url }]);
+						}
+
+						break;
+					}
+			}
+		});
+	});
+
+	onDestroy(() => {
+		deleteContext(id);
+	});
+
+	$$self.$$set = $$props => {
+		if ('id' in $$props) $$invalidate(13, id = $$props.id);
+		if ('copyrighturl' in $$props) $$invalidate(0, copyrighturl = $$props.copyrighturl);
+		if ('appurl' in $$props) $$invalidate(1, appurl = $$props.appurl);
+		if ('title' in $$props) $$invalidate(2, title = $$props.title);
+		if ('copyrighttext' in $$props) $$invalidate(3, copyrighttext = $$props.copyrighttext);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*metaLinks, navigationLinks, navigationSections*/ 112) {
+			$$invalidate(12, isDefaultFooter = !metaLinks.length && !navigationLinks.length && !navigationSections.length);
+		}
+
+		if ($$self.$$.dirty & /*metaLinks, navigationLinks, navigationSections*/ 112) {
+			$$invalidate(11, isMetaLinksOnlyFooter = metaLinks.length && !navigationLinks.length && !navigationSections.length);
+		}
+
+		if ($$self.$$.dirty & /*metaLinks, navigationLinks, navigationSections*/ 112) {
+			$$invalidate(10, isNavigationLinksOnlyFooter = !metaLinks.length && navigationLinks.length && !navigationSections.length);
+		}
+
+		if ($$self.$$.dirty & /*metaLinks, navigationLinks, navigationSections*/ 112) {
+			$$invalidate(9, isNavigationSectionsOnlyFooter = !metaLinks.length && !navigationLinks.length && navigationSections.length);
+		}
+
+		if ($$self.$$.dirty & /*metaLinks, navigationLinks, navigationSections*/ 112) {
+			$$invalidate(8, isMetaAndNavigationLinksFooter = metaLinks.length && navigationLinks.length && !navigationSections.length);
+		}
+
+		if ($$self.$$.dirty & /*metaLinks, navigationLinks, navigationSections*/ 112) {
+			$$invalidate(7, isMetaAndNavigationSectionsFooter = metaLinks.length && !navigationLinks.length && navigationSections.length);
+		}
+	};
+
+	return [
+		copyrighturl,
+		appurl,
+		title,
+		copyrighttext,
+		metaLinks,
+		navigationLinks,
+		navigationSections,
+		isMetaAndNavigationSectionsFooter,
+		isMetaAndNavigationLinksFooter,
+		isNavigationSectionsOnlyFooter,
+		isNavigationLinksOnlyFooter,
+		isMetaLinksOnlyFooter,
+		isDefaultFooter,
+		id
+	];
+}
+
+class AppFooter extends SvelteElement {
+	constructor(options) {
+		super();
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.footer{max-width:60rem}.brand{height:1rem;background-color:var(--goa-color-brand)}.meta-links-logo-and-copyright{display:flex;flex-wrap:wrap;justify-content:space-between}.logo-and-copyright{display:flex;align-items:center;justify-content:space-between}.logo-and-copyright-with-links{align-items:flex-end;flex-direction:column-reverse}.meta-link{margin-top:3.5em;margin-right:1.75rem;color:var(--goa-color-text);font-size:var(--fs-base)}.logo{height:2.56rem;width:8.88rem}.app-footer-container{background-color:var(--color-gray-100)}.navigation-links,.meta-links,.navigation-section{text-align:start;display:flex;flex-flow:wrap}.navigation-section{flex-direction:column;flex:1 1 0;min-width:13.25rem}.navigation-section-name{font-size:var(--fs-xl);line-height:var(--lh-lg);font-weight:var(--fw-regular);margin-bottom:1.75rem;margin-top:1.75rem}.navigation-section-name-divider{width:75%;margin:0}.navigation-link{margin-top:1.75rem;margin-right:1.75rem;color:var(--goa-color-text);width:13.25rem;font-size:var(--fs-base)}.default-footer .logo-and-copyright{display:flex;align-items:center;justify-content:space-between}.meta-links-only-footer{padding-top:1.19em;padding-bottom:3.5em}.navigation-links-only-footer,.meta-and-navigation-links-only-footer,.meta-and-navigation-sections-only-footer,.navigation-sections-only-footer{padding-top:1.75rem;padding-bottom:3.5em}.meta-links-only-footer .meta-link{margin-top:2.34rem;margin-right:1.75rem;color:var(--goa-color-text)}.meta-and-navigation-links-only-footer .meta-link{margin-top:2.34rem;margin-right:1.75rem;color:var(--goa-color-text)}.meta-and-navigation-sections-only-footer .meta-link{margin-top:3.53rem;margin-right:1.75rem;color:var(--goa-color-text)}.default-footer .logo{margin-top:3.5rem;margin-bottom:3.5rem;display:block}.navigation-links-only-footer .logo,.meta-and-navigation-links-only-footer .logo,.meta-links-only-footer .logo{margin-top:1.75rem;margin-bottom:1.75rem}.navigation-sections-only-footer .logo,.meta-and-navigation-sections-only-footer .logo{margin-top:2.93rem;margin-bottom:1.75rem}.goa-copyright{margin-top:0;margin-bottom:0;font-size:var(--fs-base)}.navigation-links-divider{margin-top:1.75rem;margin-bottom:0}@media(max-width: 64rem){.logo{margin-top:2.125rem;margin-bottom:1.5rem}}@media(max-width: 59.9rem){.app-footer-container{padding-left:1rem;padding-right:1rem}}@media(max-width: 40rem){.logo-and-copyright{align-items:flex-start;flex-direction:column-reverse}.meta-links,.logo-and-copyright{flex:100%}.logo{width:7.8rem;height:2.25rem;margin-top:0;margin-bottom:0}.goa-copyright{font-size:var(--fs-sm)}.navigation-section-name{font-size:var(--fs-base);line-height:var(--lh-base);font-weight:var(--fw-bold);margin-bottom:1rem;margin-top:1.5rem}.navigation-link{min-width:40rem;margin-top:1.5rem;font-size:var(--fs-sm)}.meta-links-only-footer .meta-link,.meta-and-navigation-links-only-footer .meta-link,.meta-and-navigation-sections-only-footer .meta-link{margin-top:1.5rem;margin-right:1.25rem;margin-bottom:0;font-size:var(--fs-sm)}.default-footer,.meta-links-only-footer,.navigation-links-only-footer,.navigation-sections-only-footer,.meta-and-navigation-links-only-footer,.meta-and-navigation-sections-only-footer{padding-top:0.75rem;padding-bottom:2.25rem}.navigation-links-divider{margin-top:1.5rem;margin-bottom:0}.default-footer .logo{margin-top:1.5rem;margin-bottom:1.5rem}.default-footer .logo-and-copyright{align-items:flex-start}}</style>`;
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance$u,
+			create_fragment$y,
+			safe_not_equal,
+			{
+				id: 13,
+				copyrighturl: 0,
+				appurl: 1,
+				title: 2,
+				copyrighttext: 3
+			},
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return ["id", "copyrighturl", "appurl", "title", "copyrighttext"];
+	}
+
+	get id() {
+		return this.$$.ctx[13];
+	}
+
+	set id(id) {
+		this.$$set({ id });
+		flush();
+	}
+
+	get copyrighturl() {
+		return this.$$.ctx[0];
+	}
+
+	set copyrighturl(copyrighturl) {
+		this.$$set({ copyrighturl });
+		flush();
+	}
+
+	get appurl() {
+		return this.$$.ctx[1];
+	}
+
+	set appurl(appurl) {
+		this.$$set({ appurl });
+		flush();
+	}
+
+	get title() {
+		return this.$$.ctx[2];
+	}
+
+	set title(title) {
+		this.$$set({ title });
+		flush();
+	}
+
+	get copyrighttext() {
+		return this.$$.ctx[3];
+	}
+
+	set copyrighttext(copyrighttext) {
+		this.$$set({ copyrighttext });
+		flush();
+	}
+}
+
+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) {
+	return {
+		c() {
+			this.c = noop;
+		},
+		m: noop,
+		p: noop,
+		i: noop,
+		o: noop,
+		d: noop
+	};
+}
+
+function instance$t($$self, $$props, $$invalidate) {
+	let { footerid = "goa-app-footer-id" } = $$props;
+	let { title = "" } = $$props;
+	let { url = "" } = $$props;
+	let ctx;
+
+	onMount(async () => {
+		ctx = await getContext(footerid);
+		ctx.notify({ type: META_LINK, url, title });
+	});
+
+	$$self.$$set = $$props => {
+		if ('footerid' in $$props) $$invalidate(0, footerid = $$props.footerid);
+		if ('title' in $$props) $$invalidate(1, title = $$props.title);
+		if ('url' in $$props) $$invalidate(2, url = $$props.url);
+	};
+
+	return [footerid, title, url];
+}
+
+class MetaLink extends SvelteElement {
+	constructor(options) {
+		super();
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance$t,
+			create_fragment$x,
+			safe_not_equal,
+			{ footerid: 0, title: 1, url: 2 },
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return ["footerid", "title", "url"];
+	}
+
+	get footerid() {
+		return this.$$.ctx[0];
+	}
+
+	set footerid(footerid) {
+		this.$$set({ footerid });
+		flush();
+	}
+
+	get title() {
+		return this.$$.ctx[1];
+	}
+
+	set title(title) {
+		this.$$set({ title });
+		flush();
+	}
+
+	get url() {
+		return this.$$.ctx[2];
+	}
+
+	set url(url) {
+		this.$$set({ url });
+		flush();
 	}
 }
 
-customElements.define("goa-page-block", PageBlock);
+customElements.define("goa-meta-link", MetaLink);
 
-/* libs/web-components/src/components/app-header/AppHeader.svelte generated by Svelte v3.44.3 */
+/* libs/web-components/src/components/app-footer/NavigationLink.svelte generated by Svelte v3.44.3 */
 
 function create_fragment$w(ctx) {
-	let div1;
-	let a;
-	let img0;
-	let img0_src_value;
-	let t0;
-	let img1;
-	let img1_src_value;
-	let t1;
-	let span;
-	let t2;
-	let t3;
-	let div0;
-
 	return {
 		c() {
-			div1 = element("div");
-			a = element("a");
-			img0 = element("img");
-			t0 = space();
-			img1 = element("img");
-			t1 = space();
-			span = element("span");
-			t2 = text(/*title*/ ctx[1]);
-			t3 = space();
-			div0 = element("div");
-			div0.innerHTML = `<slot></slot>`;
 			this.c = noop;
-			attr(img0, "alt", "GoA Logo");
-			attr(img0, "class", "image-mobile");
-			if (!src_url_equal(img0.src, img0_src_value = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bfill:%2300aad2;%7D.c%7Bclip-path:url(%23a);%7D.d%7Bfill:%23fff;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='14' height='14' transform='translate(-0.345 -0.21)'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(0 -0.135)'%3E%3Ccircle class='b' cx='8' cy='8' r='8' transform='translate(0 0.135)'/%3E%3Cg transform='translate(1.345 1.344)'%3E%3Cg class='c' transform='translate(0 0)'%3E%3Cpath class='d' d='M12.612,13.636a16.24,16.24,0,0,1-1.86-.822,13.436,13.436,0,0,0,1.6-.708,11.312,11.312,0,0,0,.264,1.53M16.032,7.3c-.266-.034-.128.091-.2.442a5.465,5.465,0,0,1-2.8,3.338,16.141,16.141,0,0,1,.249-4.84c.275-1,.6-.813.2-1.022-.427-.22-.887.071-1.258.813A27.247,27.247,0,0,1,7.4,13.522a2.141,2.141,0,0,1-2.918.461c-.206-.174-.282.095-.026.37a2.412,2.412,0,0,0,3.387-.082A32.715,32.715,0,0,0,12.219,7.51a23.541,23.541,0,0,0,.063,3.971,11.464,11.464,0,0,1-1.964.749c-.388.1-.628.26-.635.439-.007.2.253.363.63.541.67.318,2.633,1.246,3.117,1.527.414.24.616.053.739-.207.16-.338-.279-.533-.7-.661a13.175,13.175,0,0,1-.382-2.179,7.143,7.143,0,0,0,2.547-2.454,4.7,4.7,0,0,0,.4-1.133,2.125,2.125,0,0,0,.048-.742s-.007-.054-.048-.059' transform='translate(-3.51 -3.943)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")) attr(img0, "src", img0_src_value);
-			attr(img1, "alt", "GoA Logo");
-			attr(img1, "class", "image-desktop");
-			if (!src_url_equal(img1.src, img1_src_value = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='149.351' height='42' viewBox='0 0 149.351 42'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bclip-path:url(%23a);%7D.c%7Bfill:%2300aad2;%7D.d%7Bfill:%235f6a72;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='149.351' height='42'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='b'%3E%3Crect class='c' width='13.555' height='13.555' transform='translate(135.796 21.524)'/%3E%3Cpath class='d' d='M63.082,33.088c-1.383.138-2.835.277-4.357.346.553-4.357,2.835-10.373,5.671-9.405,1.66.553.761,5.671-1.314,9.059m-3.527,2.974a3.761,3.761,0,0,1-1.245,0,.851.851,0,0,0,.346-.692v-.553c.761,0,1.936-.138,3.389-.277a4.327,4.327,0,0,1-2.49,1.521M76.844,25.688c1.8-1.66,2.7-1.521,2.9-1.106.484.968-1.591,4.357-5.671,6.224a10.328,10.328,0,0,1,2.766-5.118m66.736,1.66c-.207-3.389-3.181-3.942-3.6-2.974-.138.346,1.106.207,1.106,2.628,0,3.942-4.011,9.129-9.129,9.129-5.532,0-6.985-4.357-7.261-6.432-.207-1.452.138-3.458-2.351-3.181-1.729.207-3.25,3.527-5.463,6.362-1.867,2.42-2.7,2.213-2.282.138.553-2.628,2.7-8.714,5.187-9.129,1.176-.207,1.591,1.8,2.075.553s.069-4.011-2.559-4.011c-1.8,0-3.942,1.936-5.74,4.08-1.521,1.936-9.336,13.416-12.656,10.927-1.521-1.176-1.383-5.878-.415-11.411,3.873-1.521,7.123-1.037,8.921-.138.9.415,1.037.346.622-.622-.553-1.452-3.665-3.734-8.575-2.7-.138,0-.207.069-.346.069.415-1.8.83-3.665,1.383-5.463.484-1.66,1.8-4.5-1.729-4.979-1.106-.207-.622.346-1.037,1.867-.692,2.766-1.521,6.362-2.144,10.028a19.745,19.745,0,0,0-7.538,8.091,38.59,38.59,0,0,0,.9-4.772,1.589,1.589,0,0,0-1.245-1.729c-.761-.207-1.729.138-2.628,1.452-2.144,3.043-4.841,7.815-8.99,9.82-2.974,1.452-4.288,0-4.357-2.282a9.869,9.869,0,0,0,1.521-.553c5.394-2.351,7.192-5.947,5.878-8.16-1.314-2.075-4.979-1.452-7.953,1.66a11.175,11.175,0,0,0-2.7,6.5c-1.245.277-2.628.484-4.219.692,2.49-4.08,2.282-9.613-1.383-10.581-4.288-1.106-6.432,3.043-7.331,6.5.346-3.873.9-7.745,1.591-11.549.346-1.66,1.452-4.5-2.075-4.979-1.106-.207-.968.346-.9,1.867.138,2.075-2.144,14.454-.968,19.848-1.521.484-2.144,1.66-.207,2.835,1.383.83,4.357,1.106,7.331-.346a9.3,9.3,0,0,0,2.766-2.144c1.8-.207,3.665-.553,5.394-.83.277,2.42,1.867,4.219,5.463,3.873,5.118-.484,9.682-6.777,11.411-9.82-.346,3.25-2.42,10.373,1.176,10.028,1.383-.138.83-.346.9-1.591.346-4.288,3.873-7.953,7.4-10.166-.622,5.256-.415,9.958,2.006,11.411,4.426,2.766,10.581-4.5,14.039-8.921-1.729,3.942-2.7,8.921-.138,9.682,3.043.9,5.463-4.219,8.3-8.091.346,2.766,2.213,7.607,9.682,7.607,8.022-.069,13.071-4.91,12.863-10.1m-108.3,8.645A66.439,66.439,0,0,1,27.4,32.534a59.168,59.168,0,0,0,6.777-2.974,54.453,54.453,0,0,0,1.106,6.432m20.4,3.873c-.069-.207-.622.069-1.106,0-1.452-.207-3.389-2.213-3.942-5.463-1.037-5.878-.415-11.687,1.314-20.332.346-1.66,1.452-4.5-2.075-5.048-1.106-.138-.553.415-.83,1.867C47.66,17.32,42.4,21.954,37.149,25.066,36.6,17.735,36.8,9.505,38.186,4.526c1.176-4.219,2.559-3.458.83-4.357s-3.734.277-5.325,3.458S24.839,23.89,13.221,35.439C7.273,41.317,1.879,38.274.842,37.375c-.9-.761-1.176.415-.138,1.591,4.772,5.256,11.826,2.282,14.384-.277,7.054-7.054,15.283-22.268,18.6-28.7a98.251,98.251,0,0,0,.277,16.874,50.129,50.129,0,0,1-8.3,3.181c-1.66.415-2.7,1.106-2.7,1.867s1.106,1.521,2.7,2.282c2.835,1.383,11.2,5.256,13.209,6.5,1.729,1.037,2.628.207,3.112-.9.692-1.452-1.176-2.282-2.974-2.766a60.545,60.545,0,0,1-1.66-9.267c4.219-2.628,8.437-6.086,10.788-10.443C47.522,20.916,46,33.3,49.873,38.482a5.451,5.451,0,0,0,4.564,2.213c.968-.069,1.383-.692,1.245-.83' transform='translate(-0.038 0.124)'/%3E%3C/g%3E%3C/svg%3E")) attr(img1, "src", img1_src_value);
-			attr(span, "class", "title");
-			attr(a, "href", /*url*/ ctx[0]);
-			attr(a, "class", "app-link");
-			attr(div1, "class", "app-header");
-			attr(div1, "data-testid", /*testid*/ ctx[2]);
-		},
-		m(target, anchor) {
-			insert(target, div1, anchor);
-			append(div1, a);
-			append(a, img0);
-			append(a, t0);
-			append(a, img1);
-			append(a, t1);
-			append(a, span);
-			append(span, t2);
-			append(div1, t3);
-			append(div1, div0);
-		},
-		p(ctx, [dirty]) {
-			if (dirty & /*title*/ 2) set_data(t2, /*title*/ ctx[1]);
-
-			if (dirty & /*url*/ 1) {
-				attr(a, "href", /*url*/ ctx[0]);
-			}
-
-			if (dirty & /*testid*/ 4) {
-				attr(div1, "data-testid", /*testid*/ ctx[2]);
-			}
 		},
+		m: noop,
+		p: noop,
 		i: noop,
 		o: noop,
-		d(detaching) {
-			if (detaching) detach(div1);
-		}
+		d: noop
 	};
 }
 
 function instance$s($$self, $$props, $$invalidate) {
-	let { url = "#" } = $$props;
+	let { footerid = "goa-app-footer-id" } = $$props;
 	let { title = "" } = $$props;
-	let { testid = "" } = $$props;
+	let { url = "" } = $$props;
+	let { section = "" } = $$props;
+	let ctx;
+
+	onMount(async () => {
+		ctx = await getContext(footerid);
+
+		ctx.notify({
+			type: NAVIGATION_LINK,
+			url,
+			title,
+			section
+		});
+	});
 
 	$$self.$$set = $$props => {
-		if ('url' in $$props) $$invalidate(0, url = $$props.url);
+		if ('footerid' in $$props) $$invalidate(0, footerid = $$props.footerid);
 		if ('title' in $$props) $$invalidate(1, title = $$props.title);
-		if ('testid' in $$props) $$invalidate(2, testid = $$props.testid);
+		if ('url' in $$props) $$invalidate(2, url = $$props.url);
+		if ('section' in $$props) $$invalidate(3, section = $$props.section);
 	};
 
-	return [url, title, testid];
+	return [footerid, title, url, section];
 }
 
-class AppHeader extends SvelteElement {
+class NavigationLink extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.app-header{display:flex;align-items:center;justify-content:space-between;margin:0 auto;padding:1rem 0.5rem;border-bottom:1px solid var(--color-gray-100)}.app-link{display:flex;align-items:center;text-decoration:none;color:inherit}.title{margin-left:0.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.image-desktop{display:none}.image-mobile{display:block}@media(min-width: 768px){.image-desktop{display:block}.image-mobile{display:none}.title{margin-left:1.75rem}.image-desktop{display:block}.image-mobile{display:none}}</style>`;
 
 		init(
 			this,
@@ -988,7 +2067,12 @@ class AppHeader extends SvelteElement {
 			instance$s,
 			create_fragment$w,
 			safe_not_equal,
-			{ url: 0, title: 1, testid: 2 },
+			{
+				footerid: 0,
+				title: 1,
+				url: 2,
+				section: 3
+			},
 			null
 		);
 
@@ -1005,15 +2089,15 @@ class AppHeader extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["url", "title", "testid"];
+		return ["footerid", "title", "url", "section"];
 	}
 
-	get url() {
+	get footerid() {
 		return this.$$.ctx[0];
 	}
 
-	set url(url) {
-		this.$$set({ url });
+	set footerid(footerid) {
+		this.$$set({ footerid });
 		flush();
 	}
 
@@ -1026,17 +2110,26 @@ class AppHeader extends SvelteElement {
 		flush();
 	}
 
-	get testid() {
+	get url() {
 		return this.$$.ctx[2];
 	}
 
-	set testid(testid) {
-		this.$$set({ testid });
+	set url(url) {
+		this.$$set({ url });
+		flush();
+	}
+
+	get section() {
+		return this.$$.ctx[3];
+	}
+
+	set section(section) {
+		this.$$set({ section });
 		flush();
 	}
 }
 
-customElements.define("goa-app-header", AppHeader);
+customElements.define("goa-navigation-link", NavigationLink);
 
 function toBoolean(value) {
   if (value === "false") {
@@ -3092,105 +4185,18 @@ class Container extends SvelteElement {
 
 customElements.define("goa-container", Container);
 
-const subscriber_queue = [];
-/**
- * Create a `Writable` store that allows both updating and reading by subscription.
- * @param {*=}value initial value
- * @param {StartStopNotifier=}start start and stop notifications for subscriptions
- */
-function writable(value, start = noop) {
-    let stop;
-    const subscribers = new Set();
-    function set(new_value) {
-        if (safe_not_equal(value, new_value)) {
-            value = new_value;
-            if (stop) { // store is ready
-                const run_queue = !subscriber_queue.length;
-                for (const subscriber of subscribers) {
-                    subscriber[1]();
-                    subscriber_queue.push(subscriber, value);
-                }
-                if (run_queue) {
-                    for (let i = 0; i < subscriber_queue.length; i += 2) {
-                        subscriber_queue[i][0](subscriber_queue[i + 1]);
-                    }
-                    subscriber_queue.length = 0;
-                }
-            }
-        }
-    }
-    function update(fn) {
-        set(fn(value));
-    }
-    function subscribe(run, invalidate = noop) {
-        const subscriber = [run, invalidate];
-        subscribers.add(subscriber);
-        if (subscribers.size === 1) {
-            stop = start(set) || noop;
-        }
-        run(value);
-        return () => {
-            subscribers.delete(subscriber);
-            if (subscribers.size === 0) {
-                stop();
-                stop = null;
-            }
-        };
-    }
-    return { set, update, subscribe };
-}
-
-const stores = {};
-class ContextStore {
-  constructor() {
-    this.store = writable();
-  }
-  subscribe(cb) {
-    this.store.subscribe((state) => {
-      cb(state);
-    });
-  }
-  notify(msg) {
-    this.store.update(() => msg);
-  }
-}
-function createContext(name) {
-  const ctx = new ContextStore();
-  stores[name] = ctx;
-  return ctx;
-}
-async function getContext(name) {
-  return await _getContext(name, 0);
-}
-async function _getContext(name, attempts) {
-  if (attempts > 10) {
-    throw new Error(`Could not find context ${name}`);
-  }
-  if (stores[name]) {
-    return stores[name];
-  }
-  await tick();
-  return _getContext(name, attempts + 1);
-}
-function deleteContext(name) {
-  const store = stores[name];
-  if (!store)
-    return;
-  delete stores[name];
-}
-
 const BIND$1 = "bind";
 
 /* libs/web-components/src/components/dropdown/Dropdown.svelte generated by Svelte v3.44.3 */
 
 function get_each_context$1(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[29] = list[i];
-	child_ctx[31] = i;
+	child_ctx[32] = list[i];
+	child_ctx[34] = i;
 	return child_ctx;
 }
 
-// (137:2) {#if isMenuVisible}
+// (144:2) {#if isMenuVisible}
 function create_if_block$a(ctx) {
 	let div;
 	let div_data_testid_value;
@@ -3207,7 +4213,7 @@ function create_if_block$a(ctx) {
 			insert(target, div, anchor);
 
 			if (!mounted) {
-				dispose = listen(div, "click", /*closeMenu*/ ctx[15]);
+				dispose = listen(div, "click", /*closeMenu*/ ctx[17]);
 				mounted = true;
 			}
 		},
@@ -3224,10 +4230,10 @@ function create_if_block$a(ctx) {
 	};
 }
 
-// (171:4) {#each options as option, index (option.value)}
+// (179:4) {#each options as option, index (option.value)}
 function create_each_block$1(key_1, ctx) {
 	let li;
-	let t0_value = /*option*/ ctx[29].label + "";
+	let t0_value = /*option*/ ctx[32].label + "";
 	let t0;
 	let t1;
 	let li_data_testid_value;
@@ -3237,7 +4243,7 @@ function create_each_block$1(key_1, ctx) {
 	let dispose;
 
 	function click_handler() {
-		return /*click_handler*/ ctx[18](/*option*/ ctx[29]);
+		return /*click_handler*/ ctx[20](/*option*/ ctx[32]);
 	}
 
 	return {
@@ -3247,13 +4253,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[29].value}-dropdown-item`);
-			attr(li, "data-index", li_data_index_value = /*index*/ ctx[31]);
+			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, "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[31] === /*highlightedIndex*/ ctx[10]);
-			toggle_class(li, "goa-dropdown-option--selected", /*option*/ ctx[29].value === /*value*/ ctx[0]);
+			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]);
 			this.first = li;
 		},
 		m(target, anchor) {
@@ -3268,22 +4274,22 @@ function create_each_block$1(key_1, ctx) {
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
-			if (dirty[0] & /*options*/ 128 && t0_value !== (t0_value = /*option*/ ctx[29].label + "")) set_data(t0, t0_value);
+			if (dirty[0] & /*options*/ 256 && t0_value !== (t0_value = /*option*/ ctx[32].label + "")) set_data(t0, t0_value);
 
-			if (dirty[0] & /*options*/ 128 && li_data_testid_value !== (li_data_testid_value = `${/*option*/ ctx[29].value}-dropdown-item`)) {
+			if (dirty[0] & /*options*/ 256 && li_data_testid_value !== (li_data_testid_value = `${/*option*/ ctx[32].value}-dropdown-item`)) {
 				attr(li, "data-testid", li_data_testid_value);
 			}
 
-			if (dirty[0] & /*options*/ 128 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[31])) {
+			if (dirty[0] & /*options*/ 256 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[34])) {
 				attr(li, "data-index", li_data_index_value);
 			}
 
-			if (dirty[0] & /*options, highlightedIndex*/ 1152) {
-				toggle_class(li, "goa-dropdown-option--tabbed", /*index*/ ctx[31] === /*highlightedIndex*/ ctx[10]);
+			if (dirty[0] & /*options, highlightedIndex*/ 2304) {
+				toggle_class(li, "goa-dropdown-option--tabbed", /*index*/ ctx[34] === /*highlightedIndex*/ ctx[11]);
 			}
 
-			if (dirty[0] & /*options, value*/ 129) {
-				toggle_class(li, "goa-dropdown-option--selected", /*option*/ ctx[29].value === /*value*/ ctx[0]);
+			if (dirty[0] & /*options, value*/ 257) {
+				toggle_class(li, "goa-dropdown-option--selected", /*option*/ ctx[32].value === /*value*/ ctx[0]);
 			}
 		},
 		d(detaching) {
@@ -3299,6 +4305,7 @@ function create_fragment$j(ctx) {
 	let t0;
 	let div0;
 	let goa_input;
+	let goa_input_width_value;
 	let goa_input_id_value;
 	let div0_data_testid_value;
 	let t1;
@@ -3310,9 +4317,9 @@ function create_fragment$j(ctx) {
 	let ul_style_value;
 	let mounted;
 	let dispose;
-	let if_block = /*isMenuVisible*/ ctx[9] && create_if_block$a(ctx);
-	let each_value = /*options*/ ctx[7];
-	const get_key = ctx => /*option*/ ctx[29].value;
+	let if_block = /*isMenuVisible*/ ctx[10] && create_if_block$a(ctx);
+	let each_value = /*options*/ ctx[8];
+	const get_key = ctx => /*option*/ ctx[32].value;
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context$1(ctx, each_value, i);
@@ -3337,21 +4344,22 @@ function create_fragment$j(ctx) {
 			}
 
 			this.c = noop;
-			set_custom_element_data(goa_input, "error", /*isError*/ ctx[13]);
+			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, "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[8]);
+			set_custom_element_data(goa_input, "value", /*selectedLabel*/ ctx[9]);
 			attr(div0, "data-testid", div0_data_testid_value = `${/*name*/ ctx[1]}-dropdown`);
 			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`);
-			toggle_class(ul, "dropdown-active", /*isMenuVisible*/ ctx[9]);
+			toggle_class(ul, "dropdown-active", /*isMenuVisible*/ ctx[10]);
 			attr(div1, "data-testid", /*testid*/ ctx[6]);
 			attr(div1, "class", "goa-dropdown-box");
 		},
@@ -3370,16 +4378,16 @@ function create_fragment$j(ctx) {
 				each_blocks[i].m(ul, null);
 			}
 
-			/*ul_binding*/ ctx[19](ul);
-			/*div1_binding*/ ctx[20](div1);
+			/*ul_binding*/ ctx[21](ul);
+			/*div1_binding*/ ctx[22](div1);
 
 			if (!mounted) {
-				dispose = listen(goa_input, "click", /*showMenu*/ ctx[14]);
+				dispose = listen(goa_input, "click", /*showMenu*/ ctx[16]);
 				mounted = true;
 			}
 		},
 		p(ctx, dirty) {
-			if (/*isMenuVisible*/ ctx[9]) {
+			if (/*isMenuVisible*/ ctx[10]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
@@ -3392,8 +4400,8 @@ function create_fragment$j(ctx) {
 				if_block = null;
 			}
 
-			if (dirty[0] & /*isError*/ 8192) {
-				set_custom_element_data(goa_input, "error", /*isError*/ ctx[13]);
+			if (dirty[0] & /*isError*/ 32768) {
+				set_custom_element_data(goa_input, "error", /*isError*/ ctx[15]);
 			}
 
 			if (dirty[0] & /*disabled*/ 32) {
@@ -3408,20 +4416,24 @@ function create_fragment$j(ctx) {
 				set_custom_element_data(goa_input, "placeholder", /*placeholder*/ ctx[4]);
 			}
 
+			if (dirty[0] & /*width, computedWidth*/ 4224 && goa_input_width_value !== (goa_input_width_value = /*width*/ ctx[7] || /*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`)) {
 				set_custom_element_data(goa_input, "id", goa_input_id_value);
 			}
 
-			if (dirty[0] & /*selectedLabel*/ 256) {
-				set_custom_element_data(goa_input, "value", /*selectedLabel*/ ctx[8]);
+			if (dirty[0] & /*selectedLabel*/ 512) {
+				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`)) {
 				attr(div0, "data-testid", div0_data_testid_value);
 			}
 
-			if (dirty[0] & /*options, highlightedIndex, value, onSelect*/ 66689) {
-				each_value = /*options*/ ctx[7];
+			if (dirty[0] & /*options, highlightedIndex, value, onSelect*/ 264449) {
+				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);
 			}
 
@@ -3429,8 +4441,8 @@ function create_fragment$j(ctx) {
 				attr(ul, "style", ul_style_value);
 			}
 
-			if (dirty[0] & /*isMenuVisible*/ 512) {
-				toggle_class(ul, "dropdown-active", /*isMenuVisible*/ ctx[9]);
+			if (dirty[0] & /*isMenuVisible*/ 1024) {
+				toggle_class(ul, "dropdown-active", /*isMenuVisible*/ ctx[10]);
 			}
 
 			if (dirty[0] & /*testid*/ 64) {
@@ -3447,8 +4459,8 @@ function create_fragment$j(ctx) {
 				each_blocks[i].d();
 			}
 
-			/*ul_binding*/ ctx[19](null);
-			/*div1_binding*/ ctx[20](null);
+			/*ul_binding*/ ctx[21](null);
+			/*div1_binding*/ ctx[22](null);
 			mounted = false;
 			dispose();
 		}
@@ -3467,6 +4479,7 @@ function instance$i($$self, $$props, $$invalidate) {
 	let { disabled } = $$props;
 	let { error } = $$props;
 	let { testid } = $$props;
+	let { width } = $$props;
 
 	// Private
 	let options = [];
@@ -3474,6 +4487,8 @@ function instance$i($$self, $$props, $$invalidate) {
 	let selectedLabel = "";
 	let isMenuVisible = false;
 	let highlightedIndex = 0;
+	let maxLetterCount = 0;
+	let computedWidth;
 	let el;
 	let menuEl;
 	let ctx;
@@ -3501,10 +4516,15 @@ function instance$i($$self, $$props, $$invalidate) {
 					{
 						const _data = data;
 						const selected = value === _data.value;
-						$$invalidate(7, options = [...options, Object.assign(Object.assign({}, _data), { selected })]);
+						$$invalidate(8, options = [...options, Object.assign(Object.assign({}, _data), { selected })]);
 
 						if (selected) {
-							$$invalidate(8, selectedLabel = _data.label);
+							$$invalidate(9, selectedLabel = _data.label);
+						}
+
+						if (!width && maxLetterCount < _data.label.length) {
+							maxLetterCount = _data.label.length;
+							$$invalidate(12, computedWidth = `${Math.max(20, maxLetterCount + 12)}ch`);
 						}
 
 						setHighlightedIndexToSelected();
@@ -3519,7 +4539,7 @@ function instance$i($$self, $$props, $$invalidate) {
 			return;
 		}
 
-		$$invalidate(9, isMenuVisible = true);
+		$$invalidate(10, isMenuVisible = true);
 		await tick();
 
 		// hide menu on blur
@@ -3538,16 +4558,16 @@ function instance$i($$self, $$props, $$invalidate) {
 		menuEl.removeEventListener("keydown", onMenuKeyDown);
 		menuEl.removeEventListener("mouseover", onHighlight);
 		setHighlightedIndexToSelected();
-		$$invalidate(9, isMenuVisible = false);
+		$$invalidate(10, isMenuVisible = false);
 	}
 
 	function setHighlightedIndexToSelected() {
-		$$invalidate(10, highlightedIndex = options.findIndex(option => option.value === value));
+		$$invalidate(11, highlightedIndex = options.findIndex(option => option.value === value));
 	}
 
 	// Event handlers
 	function onSelect(name, val, label) {
-		$$invalidate(8, selectedLabel = label);
+		$$invalidate(9, selectedLabel = label);
 		$$invalidate(0, value = val);
 		closeMenu();
 		el.dispatchEvent(new CustomEvent("_change", { composed: true, detail: { name, value } }));
@@ -3576,14 +4596,14 @@ function instance$i($$self, $$props, $$invalidate) {
 		switch (e.key) {
 			case "ArrowUp":
 				if (highlightedIndex === 0) {
-					$$invalidate(10, highlightedIndex = options.length - 1);
+					$$invalidate(11, highlightedIndex = options.length - 1);
 				} else {
-					$$invalidate(10, highlightedIndex--, highlightedIndex);
+					$$invalidate(11, highlightedIndex--, highlightedIndex);
 				}
 				e.preventDefault();
 				break;
 			case "ArrowDown":
-				$$invalidate(10, highlightedIndex = (highlightedIndex + 1) % options.length);
+				$$invalidate(11, highlightedIndex = (highlightedIndex + 1) % options.length);
 				e.preventDefault();
 				break;
 			case "Tab":
@@ -3599,7 +4619,7 @@ function instance$i($$self, $$props, $$invalidate) {
 	}
 
 	function onHighlight(e) {
-		$$invalidate(10, highlightedIndex = Number(e.target.dataset.index));
+		$$invalidate(11, highlightedIndex = Number(e.target.dataset.index));
 	}
 
 	const click_handler = option => onSelect(option.name, option.value, option.label);
@@ -3607,14 +4627,14 @@ function instance$i($$self, $$props, $$invalidate) {
 	function ul_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			menuEl = $$value;
-			$$invalidate(12, menuEl);
+			$$invalidate(14, menuEl);
 		});
 	}
 
 	function div1_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			el = $$value;
-			$$invalidate(11, el);
+			$$invalidate(13, el);
 		});
 	}
 
@@ -3625,14 +4645,15 @@ function instance$i($$self, $$props, $$invalidate) {
 		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(17, error = $$props.error);
+		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);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*error*/ 131072) {
+		if ($$self.$$.dirty[0] & /*error*/ 524288) {
 			// TODO: remove this once goa-input has the toBoolean method removed
-			$$invalidate(13, isError = error ? "true" : "false");
+			$$invalidate(15, isError = error ? "true" : "false");
 		}
 	};
 
@@ -3644,10 +4665,12 @@ function instance$i($$self, $$props, $$invalidate) {
 		placeholder,
 		disabled,
 		testid,
+		width,
 		options,
 		selectedLabel,
 		isMenuVisible,
 		highlightedIndex,
+		computedWidth,
 		el,
 		menuEl,
 		isError,
@@ -3664,7 +4687,7 @@ function instance$i($$self, $$props, $$invalidate) {
 class Dropdown extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-dropdown-box{position:relative;cursor:pointer}.goa-dropdown-background{cursor:default;position:fixed;z-index:98;inset:0}.goa-dropdown-list{position:absolute;left:0;right:0;padding:0;margin:0;margin-top:3px;list-style-type:none;background:var(--color-white);border-radius:var(--input-border-radius);outline:none;box-shadow:var(--shadow-1);z-index:99;scroll-behavior:smooth;scrollbar-width:thin;display:none}.dropdown-active{display:block}.goa-dropdown-list::-webkit-scrollbar{width:6px}.goa-dropdown-list::-webkit-scrollbar-track{background:#f1f1f1}.goa-dropdown-list::-webkit-scrollbar-thumb{background:#888}.goa-dropdown-list::-webkit-scrollbar-thumb:hover{background:#555}.goa-dropdown-option{margin:0;padding:0.5rem;cursor:pointer;color:var(--color-black)}.goa-dropdown-option--tabbed{background:var(--color-gray-100);color:var(--goa-color-interactive--hover)}.goa-dropdown-option--disabled{opacity:0.5;cursor:default}.goa-dropdown-option--disabled:hover{cursor:default;color:var(--color-gray-600)}.goa-dropdown-option--selected{background:var(--goa-color-interactive);color:var(--color-white)}.goa-dropdown-option--tabbed.goa-dropdown-option--selected,.goa-dropdown-option--selected:hover{background:var(--goa-color-interactive--hover);color:var(--color-white)}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-dropdown-box{position:relative;cursor:pointer;display:inline-block;width:100%}@media(min-width: 640px){.goa-dropdown-box{width:unset}}.goa-dropdown-background{cursor:default;position:fixed;z-index:98;inset:0}.goa-dropdown-list{position:absolute;left:0;right:0;padding:0;margin:0;margin-top:3px;list-style-type:none;background:var(--color-white);border-radius:var(--input-border-radius);outline:none;box-shadow:var(--shadow-1);z-index:99;scroll-behavior:smooth;scrollbar-width:thin;display:none}.dropdown-active{display:block}.goa-dropdown-list::-webkit-scrollbar{width:6px}.goa-dropdown-list::-webkit-scrollbar-track{background:#f1f1f1}.goa-dropdown-list::-webkit-scrollbar-thumb{background:#888}.goa-dropdown-list::-webkit-scrollbar-thumb:hover{background:#555}.goa-dropdown-option{margin:0;padding:0.5rem;cursor:pointer;color:var(--color-black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.goa-dropdown-option--tabbed{background:var(--color-gray-100);color:var(--goa-color-interactive--hover)}.goa-dropdown-option--disabled{opacity:0.5;cursor:default}.goa-dropdown-option--disabled:hover{cursor:default;color:var(--color-gray-600)}.goa-dropdown-option--selected{background:var(--goa-color-interactive);color:var(--color-white)}.goa-dropdown-option--tabbed.goa-dropdown-option--selected,.goa-dropdown-option--selected:hover{background:var(--goa-color-interactive--hover);color:var(--color-white)}</style>`;
 
 		init(
 			this,
@@ -3683,8 +4706,9 @@ class Dropdown extends SvelteElement {
 				maxheight: 3,
 				placeholder: 4,
 				disabled: 5,
-				error: 17,
-				testid: 6
+				error: 19,
+				testid: 6,
+				width: 7
 			},
 			null,
 			[-1, -1]
@@ -3711,7 +4735,8 @@ class Dropdown extends SvelteElement {
 			"placeholder",
 			"disabled",
 			"error",
-			"testid"
+			"testid",
+			"width"
 		];
 	}
 
@@ -3770,7 +4795,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[17];
+		return this.$$.ctx[19];
 	}
 
 	set error(error) {
@@ -3786,6 +4811,15 @@ class Dropdown extends SvelteElement {
 		this.$$set({ testid });
 		flush();
 	}
+
+	get width() {
+		return this.$$.ctx[7];
+	}
+
+	set width(width) {
+		this.$$set({ width });
+		flush();
+	}
 }
 
 customElements.define("goa-dropdown", Dropdown);
@@ -3947,7 +4981,7 @@ function instance$g($$self, $$props, $$invalidate) {
 class FlexRow extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-flex-row{margin-bottom:1rem;display:flex;flex-direction:column;flex-wrap:wrap;align-items:stretch}@media(min-width: 480px){.goa-flex-row{flex-direction:row}}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-flex-row{display:block}@media(min-width: 640px){.goa-flex-row{display:grid;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));gap:var(--gap);margin-bottom:1rem}}</style>`;
 
 		init(
 			this,
@@ -4212,7 +5246,7 @@ function instance$f($$self, $$props, $$invalidate) {
 class FormItem extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{flex:1 1 auto;box-sizing:border-box;font-family:var(--font-family)}*{box-sizing:border-box}label{display:block;font-weight:var(--fw-bold);color:var(--goa-color-text);font-size:var(--fs-base);padding:0.5rem 0}label em{color:var(--color-gray-600);font-weight:var(--fw-regular);font-size:var(--fs-sm);font-style:normal}.form-item-input{margin-bottom:0.25rem}.help-msg{font-size:var(--fs-sm);color:var(--goa-color-text)}.error-msg{font-size:var(--fs-sm);color:var(--goa-color-interactive--error);margin-bottom:0.25rem}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}*{box-sizing:border-box}label{display:block;font-weight:var(--fw-bold);color:var(--goa-color-text);font-size:var(--fs-base);padding:0.5rem 0;overflow-x:hidden;white-space:nowrap;text-overflow:ellipsis}label em{color:var(--color-gray-600);font-weight:var(--fw-regular);font-size:var(--fs-sm);line-height:var(--lh-sm);font-style:normal}.form-item-input{margin-bottom:0.25rem}.help-msg{font-size:var(--fs-sm);color:var(--goa-color-text)}.error-msg{font-size:var(--fs-sm);color:var(--goa-color-interactive--error);margin-bottom:0.25rem}</style>`;
 
 		init(
 			this,
@@ -4949,7 +5983,7 @@ function create_if_block_2$3(ctx) {
 	};
 }
 
-// (79:2) {#if trailingicon && !handlesTrailingIconClick}
+// (81:2) {#if trailingicon && !handlesTrailingIconClick}
 function create_if_block_1$5(ctx) {
 	let goa_icon;
 
@@ -4975,7 +6009,7 @@ function create_if_block_1$5(ctx) {
 	};
 }
 
-// (83:2) {#if trailingicon && handlesTrailingIconClick}
+// (85:2) {#if trailingicon && handlesTrailingIconClick}
 function create_if_block$7(ctx) {
 	let goa_icon_button;
 	let mounted;
@@ -5052,7 +6086,10 @@ function create_fragment$c(ctx) {
 			attr(input, "type", /*type*/ ctx[0]);
 			input.value = /*value*/ ctx[2];
 			attr(input, "placeholder", /*placeholder*/ ctx[3]);
-			attr(div, "style", div_style_value = `width: ${/*width*/ ctx[8]};`);
+
+			attr(div, "style", div_style_value = `
+    --width: ${/*width*/ ctx[8]};
+  `);
 
 			attr(div, "class", div_class_value = `
     goa-input
@@ -5159,7 +6196,9 @@ function create_fragment$c(ctx) {
 				if_block2 = null;
 			}
 
-			if (dirty & /*width*/ 256 && div_style_value !== (div_style_value = `width: ${/*width*/ ctx[8]};`)) {
+			if (dirty & /*width*/ 256 && div_style_value !== (div_style_value = `
+    --width: ${/*width*/ ctx[8]};
+  `)) {
 				attr(div, "style", div_style_value);
 			}
 
@@ -5213,7 +6252,7 @@ function instance$b($$self, $$props, $$invalidate) {
 	let { readonly = "false" } = $$props;
 	let { error = "false" } = $$props;
 	let { testid = "" } = $$props;
-	let { width = "100%" } = $$props;
+	let { width = "30ch" } = $$props;
 	let inputEl;
 
 	function onKeyUp(e) {
@@ -5317,7 +6356,7 @@ function instance$b($$self, $$props, $$invalidate) {
 class Input extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.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}.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)}input{color:var(--goa-color-text)}input[readonly]{cursor:pointer}.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:block;width:100%;font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent}.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}.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>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.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}.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(
 			this,
@@ -8601,6 +9640,7 @@ customElements.define("goa-spinner", Spinner);
 
 function create_fragment$1(ctx) {
 	let textarea;
+	let textarea_style_value;
 	let mounted;
 	let dispose;
 
@@ -8612,17 +9652,22 @@ function create_fragment$1(ctx) {
 			attr(textarea, "placeholder", /*placeholder*/ ctx[2]);
 			textarea.value = /*value*/ ctx[1];
 			attr(textarea, "rows", /*rows*/ ctx[3]);
+
+			attr(textarea, "style", textarea_style_value = `
+    --width: ${/*width*/ ctx[5]};
+  `);
+
 			attr(textarea, "class", "goa-textarea");
-			textarea.disabled = /*isDisabled*/ ctx[5];
-			textarea.readOnly = /*isReadonly*/ ctx[6];
+			textarea.disabled = /*isDisabled*/ ctx[6];
+			textarea.readOnly = /*isReadonly*/ ctx[7];
 			attr(textarea, "data-testid", /*testid*/ ctx[4]);
-			toggle_class(textarea, "error", /*isError*/ ctx[7]);
+			toggle_class(textarea, "error", /*isError*/ ctx[8]);
 		},
 		m(target, anchor) {
 			insert(target, textarea, anchor);
 
 			if (!mounted) {
-				dispose = listen(textarea, "keyup", /*onChange*/ ctx[8]);
+				dispose = listen(textarea, "keyup", /*onChange*/ ctx[9]);
 				mounted = true;
 			}
 		},
@@ -8643,20 +9688,26 @@ function create_fragment$1(ctx) {
 				attr(textarea, "rows", /*rows*/ ctx[3]);
 			}
 
-			if (dirty & /*isDisabled*/ 32) {
-				textarea.disabled = /*isDisabled*/ ctx[5];
+			if (dirty & /*width*/ 32 && textarea_style_value !== (textarea_style_value = `
+    --width: ${/*width*/ ctx[5]};
+  `)) {
+				attr(textarea, "style", textarea_style_value);
+			}
+
+			if (dirty & /*isDisabled*/ 64) {
+				textarea.disabled = /*isDisabled*/ ctx[6];
 			}
 
-			if (dirty & /*isReadonly*/ 64) {
-				textarea.readOnly = /*isReadonly*/ ctx[6];
+			if (dirty & /*isReadonly*/ 128) {
+				textarea.readOnly = /*isReadonly*/ ctx[7];
 			}
 
 			if (dirty & /*testid*/ 16) {
 				attr(textarea, "data-testid", /*testid*/ ctx[4]);
 			}
 
-			if (dirty & /*isError*/ 128) {
-				toggle_class(textarea, "error", /*isError*/ ctx[7]);
+			if (dirty & /*isError*/ 256) {
+				toggle_class(textarea, "error", /*isError*/ ctx[8]);
 			}
 		},
 		i: noop,
@@ -8678,6 +9729,7 @@ function instance$1($$self, $$props, $$invalidate) {
 	let { placeholder = "" } = $$props;
 	let { rows = 3 } = $$props;
 	let { testid = "" } = $$props;
+	let { width = "60ch" } = $$props;
 	let { error = "false" } = $$props;
 	let { readonly = "false" } = $$props;
 	let { disabled = "false" } = $$props;
@@ -8704,22 +9756,23 @@ function instance$1($$self, $$props, $$invalidate) {
 		if ('placeholder' in $$props) $$invalidate(2, placeholder = $$props.placeholder);
 		if ('rows' in $$props) $$invalidate(3, rows = $$props.rows);
 		if ('testid' in $$props) $$invalidate(4, testid = $$props.testid);
-		if ('error' in $$props) $$invalidate(9, error = $$props.error);
-		if ('readonly' in $$props) $$invalidate(10, readonly = $$props.readonly);
-		if ('disabled' in $$props) $$invalidate(11, disabled = $$props.disabled);
+		if ('width' in $$props) $$invalidate(5, width = $$props.width);
+		if ('error' in $$props) $$invalidate(10, error = $$props.error);
+		if ('readonly' in $$props) $$invalidate(11, readonly = $$props.readonly);
+		if ('disabled' in $$props) $$invalidate(12, disabled = $$props.disabled);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*error*/ 512) {
-			$$invalidate(7, isError = toBoolean(error));
+		if ($$self.$$.dirty & /*error*/ 1024) {
+			$$invalidate(8, isError = toBoolean(error));
 		}
 
-		if ($$self.$$.dirty & /*disabled*/ 2048) {
-			$$invalidate(5, isDisabled = toBoolean(disabled));
+		if ($$self.$$.dirty & /*disabled*/ 4096) {
+			$$invalidate(6, isDisabled = toBoolean(disabled));
 		}
 
-		if ($$self.$$.dirty & /*readonly*/ 1024) {
-			$$invalidate(6, isReadonly = toBoolean(readonly));
+		if ($$self.$$.dirty & /*readonly*/ 2048) {
+			$$invalidate(7, isReadonly = toBoolean(readonly));
 		}
 	};
 
@@ -8729,6 +9782,7 @@ function instance$1($$self, $$props, $$invalidate) {
 		placeholder,
 		rows,
 		testid,
+		width,
 		isDisabled,
 		isReadonly,
 		isError,
@@ -8742,7 +9796,7 @@ function instance$1($$self, $$props, $$invalidate) {
 class TextArea extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-textarea{display:block;width:100%;box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:3px;background:var(--color-white);color:var(--color-black, #ccc);padding:var(--input-padding, 0.5rem);font-size:var(--input-font-size);font-family:var(--font-family)}.goa-textarea[readonly]{cursor:pointer}.goa-textarea:hover{border-color:var(--goa-color-interactive--hover)}.goa-textarea:active,.goa-textarea:focus,.goa-textarea:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-textarea:disabled{border-color:var(--color-gray-200)}.goa-textarea:disabled:hover{border-color:var(--color-gray-200)}.goa-textarea:disabled:focus,.goa-textarea:disabled:active{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-status-emergency-dark)}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-textarea{display:block;width:100%;box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:3px;background:var(--color-white);color:var(--color-black, #ccc);padding:var(--input-padding, 0.5rem);font-size:var(--input-font-size);font-family:var(--font-family);min-width:100%}@media(min-width: 640px){.goa-textarea{min-width:0;width:var(--width)}}.goa-textarea[readonly]{cursor:pointer}.goa-textarea:hover{border-color:var(--goa-color-interactive--hover)}.goa-textarea:active,.goa-textarea:focus,.goa-textarea:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-textarea:disabled{border-color:var(--color-gray-200)}.goa-textarea:disabled:hover{border-color:var(--color-gray-200)}.goa-textarea:disabled:focus,.goa-textarea:disabled:active{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-status-emergency-dark)}</style>`;
 
 		init(
 			this,
@@ -8760,9 +9814,10 @@ class TextArea extends SvelteElement {
 				placeholder: 2,
 				rows: 3,
 				testid: 4,
-				error: 9,
-				readonly: 10,
-				disabled: 11
+				width: 5,
+				error: 10,
+				readonly: 11,
+				disabled: 12
 			},
 			null
 		);
@@ -8786,6 +9841,7 @@ class TextArea extends SvelteElement {
 			"placeholder",
 			"rows",
 			"testid",
+			"width",
 			"error",
 			"readonly",
 			"disabled"
@@ -8837,8 +9893,17 @@ class TextArea extends SvelteElement {
 		flush();
 	}
 
+	get width() {
+		return this.$$.ctx[5];
+	}
+
+	set width(width) {
+		this.$$set({ width });
+		flush();
+	}
+
 	get error() {
-		return this.$$.ctx[9];
+		return this.$$.ctx[10];
 	}
 
 	set error(error) {
@@ -8847,7 +9912,7 @@ class TextArea extends SvelteElement {
 	}
 
 	get readonly() {
-		return this.$$.ctx[10];
+		return this.$$.ctx[11];
 	}
 
 	set readonly(readonly) {
@@ -8856,7 +9921,7 @@ class TextArea extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[11];
+		return this.$$.ctx[12];
 	}
 
 	set disabled(disabled) {
@@ -9098,4 +10163,4 @@ class ContainerWrapper_test extends SvelteElement {
 
 customElements.define("test-container", ContainerWrapper_test);
 
-export { ContainerWrapper_test as ContainerWrapper, 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, MicrositeHeader as GoAMicrositeHeader, Modal as GoAModal, 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 };
+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 };