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

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,7 +870,7 @@ class PageBlock extends SvelteElement {
 				customElement: true
 			},
 			null,
-			create_fragment$x,
+			create_fragment$A,
 			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$w(ctx) {
+function create_fragment$z(ctx) {
 	let div1;
 	let a;
 	let img0;
@@ -959,24 +959,1103 @@ function create_fragment$w(ctx) {
 	};
 }
 
-function instance$s($$self, $$props, $$invalidate) {
+function instance$v($$self, $$props, $$invalidate) {
 	let { url = "#" } = $$props;
 	let { title = "" } = $$props;
-	let { testid = "" } = $$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$c(ctx) {
+	let div;
+	let t;
+	let hr;
+
+	function select_block_type(ctx, dirty) {
+		if (/*navigationSections*/ ctx[6].length) return create_if_block_2$7;
+		if (/*navigationLinks*/ ctx[5].length) return create_if_block_3$5;
+	}
+
+	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$5(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$7(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$g(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$c(ctx);
+	let if_block1 = /*metaLinks*/ ctx[4].length && create_if_block$g(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$c(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$g(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-meta-link", MetaLink);
+
+/* libs/web-components/src/components/app-footer/NavigationLink.svelte generated by Svelte v3.44.3 */
+
+function create_fragment$w(ctx) {
+	return {
+		c() {
+			this.c = noop;
+		},
+		m: noop,
+		p: noop,
+		i: noop,
+		o: noop,
+		d: noop
+	};
+}
+
+function instance$s($$self, $$props, $$invalidate) {
+	let { footerid = "goa-app-footer-id" } = $$props;
+	let { title = "" } = $$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") {
@@ -1070,7 +2163,7 @@ function create_else_block$3(ctx) {
 }
 
 // (35:2) {#if showIcon}
-function create_if_block_1$a(ctx) {
+function create_if_block_1$b(ctx) {
 	let goa_icon;
 
 	return {
@@ -1094,7 +2187,7 @@ function create_if_block_1$a(ctx) {
 }
 
 // (40:2) {#if content}
-function create_if_block$e(ctx) {
+function create_if_block$f(ctx) {
 	let div;
 	let t;
 
@@ -1123,13 +2216,13 @@ function create_fragment$v(ctx) {
 	let div_class_value;
 
 	function select_block_type(ctx, dirty) {
-		if (/*showIcon*/ ctx[4]) return create_if_block_1$a;
+		if (/*showIcon*/ ctx[4]) return create_if_block_1$b;
 		return create_else_block$3;
 	}
 
 	let current_block_type = select_block_type(ctx);
 	let if_block0 = current_block_type(ctx);
-	let if_block1 = /*content*/ ctx[2] && create_if_block$e(ctx);
+	let if_block1 = /*content*/ ctx[2] && create_if_block$f(ctx);
 
 	return {
 		c() {
@@ -1166,7 +2259,7 @@ function create_fragment$v(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block$e(ctx);
+					if_block1 = create_if_block$f(ctx);
 					if_block1.c();
 					if_block1.m(div, null);
 				}
@@ -1316,8 +2409,8 @@ function create_else_block$2(ctx) {
 	let slot;
 	let t1;
 	let if_block1_anchor;
-	let if_block0 = /*leadingicon*/ ctx[4] && create_if_block_2$5(ctx);
-	let if_block1 = /*trailingicon*/ ctx[5] && create_if_block_1$9(ctx);
+	let if_block0 = /*leadingicon*/ ctx[4] && create_if_block_2$6(ctx);
+	let if_block1 = /*trailingicon*/ ctx[5] && create_if_block_1$a(ctx);
 
 	return {
 		c() {
@@ -1341,7 +2434,7 @@ function create_else_block$2(ctx) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_2$5(ctx);
+					if_block0 = create_if_block_2$6(ctx);
 					if_block0.c();
 					if_block0.m(t0.parentNode, t0);
 				}
@@ -1354,7 +2447,7 @@ function create_else_block$2(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block_1$9(ctx);
+					if_block1 = create_if_block_1$a(ctx);
 					if_block1.c();
 					if_block1.m(if_block1_anchor.parentNode, if_block1_anchor);
 				}
@@ -1375,7 +2468,7 @@ function create_else_block$2(ctx) {
 }
 
 // (33:2) {#if type === "get-started"}
-function create_if_block$d(ctx) {
+function create_if_block$e(ctx) {
 	let slot;
 	let t;
 	let goa_icon;
@@ -1403,7 +2496,7 @@ function create_if_block$d(ctx) {
 }
 
 // (37:4) {#if leadingicon}
-function create_if_block_2$5(ctx) {
+function create_if_block_2$6(ctx) {
 	let goa_icon;
 
 	return {
@@ -1427,7 +2520,7 @@ function create_if_block_2$5(ctx) {
 }
 
 // (41:4) {#if trailingicon}
-function create_if_block_1$9(ctx) {
+function create_if_block_1$a(ctx) {
 	let goa_icon;
 
 	return {
@@ -1457,7 +2550,7 @@ function create_fragment$u(ctx) {
 	let dispose;
 
 	function select_block_type(ctx, dirty) {
-		if (/*type*/ ctx[0] === "get-started") return create_if_block$d;
+		if (/*type*/ ctx[0] === "get-started") return create_if_block$e;
 		return create_else_block$2;
 	}
 
@@ -2358,7 +3451,7 @@ customElements.define("goa-card-image", CardImage);
 
 /* libs/web-components/src/components/checkbox/Checkbox.svelte generated by Svelte v3.44.3 */
 
-function create_if_block_1$8(ctx) {
+function create_if_block_1$9(ctx) {
 	let svg;
 	let path;
 
@@ -2383,7 +3476,7 @@ function create_if_block_1$8(ctx) {
 }
 
 // (50:4) {#if isIndeterminate}
-function create_if_block$c(ctx) {
+function create_if_block$d(ctx) {
 	let svg;
 	let rect;
 
@@ -2422,8 +3515,8 @@ function create_fragment$m(ctx) {
 	let dispose;
 
 	function select_block_type(ctx, dirty) {
-		if (/*isIndeterminate*/ ctx[5]) return create_if_block$c;
-		if (/*isChecked*/ ctx[4]) return create_if_block_1$8;
+		if (/*isIndeterminate*/ ctx[5]) return create_if_block$d;
+		if (/*isChecked*/ ctx[4]) return create_if_block_1$9;
 	}
 
 	let current_block_type = select_block_type(ctx);
@@ -2732,7 +3825,7 @@ customElements.define("goa-checkbox", Checkbox);
 
 /* libs/web-components/src/components/chip/Chip.svelte generated by Svelte v3.44.3 */
 
-function create_if_block_1$7(ctx) {
+function create_if_block_1$8(ctx) {
 	let goa_icon;
 
 	return {
@@ -2756,11 +3849,12 @@ function create_if_block_1$7(ctx) {
 	};
 }
 
-// (26:2) {#if _deletable}
-function create_if_block$b(ctx) {
+// (40:2) {#if _deletable}
+function create_if_block$c(ctx) {
 	let goa_icon;
-	let mounted;
-	let dispose;
+	let goa_icon_fillcolor_value;
+	let goa_icon_hovercolor_value;
+	let goa_icon_opacity_value;
 
 	return {
 		c() {
@@ -2768,23 +3862,40 @@ function create_if_block$b(ctx) {
 			set_custom_element_data(goa_icon, "class", "delete-icon");
 			set_custom_element_data(goa_icon, "size", "medium");
 			set_custom_element_data(goa_icon, "theme", "filled");
-			set_custom_element_data(goa_icon, "fillcolor", "var(--color-gray-600)");
-			set_custom_element_data(goa_icon, "hovercolor", "var(--goa-color-interactive--hover)");
 			set_custom_element_data(goa_icon, "type", "close-circle");
+
+			set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value = /*_error*/ ctx[4]
+			? "var(--goa-color-status-emergency)"
+			: "var(--color-gray-600)");
+
+			set_custom_element_data(goa_icon, "hovercolor", goa_icon_hovercolor_value = /*_error*/ ctx[4]
+			? "var(--goa-color-status-emergency-dark)"
+			: "var(--goa-color-interactive--hover)");
+
+			set_custom_element_data(goa_icon, "opacity", goa_icon_opacity_value = /*_error*/ ctx[4] ? /*_hovering*/ ctx[3] ? 1 : 0.5 : 1);
 		},
 		m(target, anchor) {
 			insert(target, goa_icon, anchor);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*_error*/ 16 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value = /*_error*/ ctx[4]
+			? "var(--goa-color-status-emergency)"
+			: "var(--color-gray-600)")) {
+				set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value);
+			}
 
-			if (!mounted) {
-				dispose = listen(goa_icon, "click", onDelete);
-				mounted = true;
+			if (dirty & /*_error*/ 16 && goa_icon_hovercolor_value !== (goa_icon_hovercolor_value = /*_error*/ ctx[4]
+			? "var(--goa-color-status-emergency-dark)"
+			: "var(--goa-color-interactive--hover)")) {
+				set_custom_element_data(goa_icon, "hovercolor", goa_icon_hovercolor_value);
+			}
+
+			if (dirty & /*_error, _hovering*/ 24 && goa_icon_opacity_value !== (goa_icon_opacity_value = /*_error*/ ctx[4] ? /*_hovering*/ ctx[3] ? 1 : 0.5 : 1)) {
+				set_custom_element_data(goa_icon, "opacity", goa_icon_opacity_value);
 			}
 		},
-		p: noop,
 		d(detaching) {
 			if (detaching) detach(goa_icon);
-			mounted = false;
-			dispose();
 		}
 	};
 }
@@ -2794,8 +3905,10 @@ function create_fragment$l(ctx) {
 	let t0;
 	let t1;
 	let t2;
-	let if_block0 = /*leadingicon*/ ctx[0] && create_if_block_1$7(ctx);
-	let if_block1 = /*_deletable*/ ctx[2] && create_if_block$b();
+	let mounted;
+	let dispose;
+	let if_block0 = /*leadingicon*/ ctx[0] && create_if_block_1$8(ctx);
+	let if_block1 = /*_deletable*/ ctx[5] && create_if_block$c(ctx);
 
 	return {
 		c() {
@@ -2806,8 +3919,11 @@ function create_fragment$l(ctx) {
 			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]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -2816,13 +3932,26 @@ function create_fragment$l(ctx) {
 			append(div, t1);
 			append(div, t2);
 			if (if_block1) if_block1.m(div, null);
+			/*div_binding*/ ctx[9](div);
+
+			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])
+				];
+
+				mounted = true;
+			}
 		},
 		p(ctx, [dirty]) {
 			if (/*leadingicon*/ ctx[0]) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_1$7(ctx);
+					if_block0 = create_if_block_1$8(ctx);
 					if_block0.c();
 					if_block0.m(div, t0);
 				}
@@ -2833,11 +3962,11 @@ function create_fragment$l(ctx) {
 
 			if (dirty & /*content*/ 2) set_data(t1, /*content*/ ctx[1]);
 
-			if (/*_deletable*/ ctx[2]) {
+			if (/*_deletable*/ ctx[5]) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block$b();
+					if_block1 = create_if_block$c(ctx);
 					if_block1.c();
 					if_block1.m(div, null);
 				}
@@ -2845,6 +3974,14 @@ function create_fragment$l(ctx) {
 				if_block1.d(1);
 				if_block1 = null;
 			}
+
+			if (dirty & /*_deletable*/ 32) {
+				toggle_class(div, "deletable", /*_deletable*/ ctx[5]);
+			}
+
+			if (dirty & /*_error*/ 16) {
+				toggle_class(div, "error", /*_error*/ ctx[4]);
+			}
 		},
 		i: noop,
 		o: noop,
@@ -2852,45 +3989,84 @@ function create_fragment$l(ctx) {
 			if (detaching) detach(div);
 			if (if_block0) if_block0.d();
 			if (if_block1) if_block1.d();
+			/*div_binding*/ ctx[9](null);
+			mounted = false;
+			run_all(dispose);
 		}
 	};
 }
 
-function onDelete(e) {
-	this.dispatchEvent(new CustomEvent("_onDeleteIconClick", { composed: true, bubbles: true }));
-	e.stopPropagation();
-}
-
 function instance$k($$self, $$props, $$invalidate) {
-	let { leadingicon } = $$props;
-	let { error } = $$props;
-	let { deletable } = $$props;
+	let { leadingicon = null } = $$props;
+	let { error = "false" } = $$props;
+	let { deletable = "false" } = $$props;
 	let { content } = $$props;
+	let el;
+	let _hovering = false;
+
+	// booleans
+	let _error;
 
 	let _deletable;
 
+	function onDelete(e) {
+		el.dispatchEvent(new CustomEvent("_click", { composed: true, bubbles: true }));
+		e.stopPropagation();
+	}
+
+	function div_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			el = $$value;
+			$$invalidate(2, el);
+		});
+	}
+
+	const click_handler = e => _deletable && onDelete(e);
+	const mouseover_handler = () => $$invalidate(3, _hovering = true);
+	const mouseout_handler = () => $$invalidate(3, _hovering = false);
+	const focus_handler = () => $$invalidate(3, _hovering = true);
+	const blur_handler = () => $$invalidate(3, _hovering = false);
+
 	$$self.$$set = $$props => {
 		if ('leadingicon' in $$props) $$invalidate(0, leadingicon = $$props.leadingicon);
-		if ('error' in $$props) $$invalidate(3, error = $$props.error);
-		if ('deletable' in $$props) $$invalidate(4, deletable = $$props.deletable);
+		if ('error' in $$props) $$invalidate(7, error = $$props.error);
+		if ('deletable' in $$props) $$invalidate(8, deletable = $$props.deletable);
 		if ('content' in $$props) $$invalidate(1, content = $$props.content);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*error*/ 8) ;
+		if ($$self.$$.dirty & /*error*/ 128) {
+			$$invalidate(4, _error = toBoolean(error));
+		}
 
-		if ($$self.$$.dirty & /*deletable*/ 16) {
-			$$invalidate(2, _deletable = toBoolean(deletable));
+		if ($$self.$$.dirty & /*deletable*/ 256) {
+			$$invalidate(5, _deletable = toBoolean(deletable));
 		}
 	};
 
-	return [leadingicon, content, _deletable, error, deletable];
+	return [
+		leadingicon,
+		content,
+		el,
+		_hovering,
+		_error,
+		_deletable,
+		onDelete,
+		error,
+		deletable,
+		div_binding,
+		click_handler,
+		mouseover_handler,
+		mouseout_handler,
+		focus_handler,
+		blur_handler
+	];
 }
 
 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-gray-100);border-radius:99px;box-sizing:border-box;color:var(--goa-color-text);display:inline-flex;flex-direction:row;font-size:var(--fs-sm);font-weight:var(--fw-regular);gap:0.25rem;height:2rem;justify-content:center;margin:0.25rem;padding:0 0.75rem}.chip:hover{background-color:var(--color-gray-200)}.chip:focus{outline:2px solid var(--goa-color-interactive--focus)}.delete-icon{cursor:pointer;margin-right:-0.25rem}</style>`;
+		this.shadowRoot.innerHTML = `<style>.leading-icon{margin-left:-0.25rem}.chip{vertical-align:middle;align-items:center;background-color:var(--color-gray-100);border-radius:99px;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:hover{background-color:var(--color-gray-200)}.chip:focus{outline:2px solid var(--goa-color-interactive--focus)}.deletable{cursor:pointer}.delete-icon{margin-right:-0.25rem}.error,.error:hover{background-color:var(--goa-color-status-emergency-light)}</style>`;
 
 		init(
 			this,
@@ -2904,8 +4080,8 @@ class Chip extends SvelteElement {
 			safe_not_equal,
 			{
 				leadingicon: 0,
-				error: 3,
-				deletable: 4,
+				error: 7,
+				deletable: 8,
 				content: 1
 			},
 			null
@@ -2937,7 +4113,7 @@ class Chip extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[3];
+		return this.$$.ctx[7];
 	}
 
 	set error(error) {
@@ -2946,7 +4122,7 @@ class Chip extends SvelteElement {
 	}
 
 	get deletable() {
-		return this.$$.ctx[4];
+		return this.$$.ctx[8];
 	}
 
 	set deletable(deletable) {
@@ -3023,175 +4199,88 @@ function create_fragment$k(ctx) {
 		}
 	};
 }
-
-function instance$j($$self, $$props, $$invalidate) {
-	let { variant = 'default' } = $$props;
-	let { headingsize = 'large' } = $$props;
-
-	$$self.$$set = $$props => {
-		if ('variant' in $$props) $$invalidate(0, variant = $$props.variant);
-		if ('headingsize' in $$props) $$invalidate(1, headingsize = $$props.headingsize);
-	};
-
-	return [variant, headingsize];
-}
-
-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>`;
-
-		init(
-			this,
-			{
-				target: this.shadowRoot,
-				props: attribute_to_object(this.attributes),
-				customElement: true
-			},
-			instance$j,
-			create_fragment$k,
-			safe_not_equal,
-			{ variant: 0, headingsize: 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 ["variant", "headingsize"];
-	}
-
-	get variant() {
-		return this.$$.ctx[0];
-	}
-
-	set variant(variant) {
-		this.$$set({ variant });
-		flush();
-	}
-
-	get headingsize() {
-		return this.$$.ctx[1];
-	}
-
-	set headingsize(headingsize) {
-		this.$$set({ headingsize });
-		flush();
-	}
-}
-
-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 instance$j($$self, $$props, $$invalidate) {
+	let { variant = 'default' } = $$props;
+	let { headingsize = 'large' } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('variant' in $$props) $$invalidate(0, variant = $$props.variant);
+		if ('headingsize' in $$props) $$invalidate(1, headingsize = $$props.headingsize);
+	};
+
+	return [variant, headingsize];
 }
-function deleteContext(name) {
-  const store = stores[name];
-  if (!store)
-    return;
-  delete stores[name];
+
+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>`;
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance$j,
+			create_fragment$k,
+			safe_not_equal,
+			{ variant: 0, headingsize: 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 ["variant", "headingsize"];
+	}
+
+	get variant() {
+		return this.$$.ctx[0];
+	}
+
+	set variant(variant) {
+		this.$$set({ variant });
+		flush();
+	}
+
+	get headingsize() {
+		return this.$$.ctx[1];
+	}
+
+	set headingsize(headingsize) {
+		this.$$set({ headingsize });
+		flush();
+	}
 }
 
+customElements.define("goa-container", Container);
+
 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}
-function create_if_block$a(ctx) {
+// (144:2) {#if isMenuVisible}
+function create_if_block$b(ctx) {
 	let div;
 	let div_data_testid_value;
 	let mounted;
@@ -3207,7 +4296,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 +4313,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 +4326,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 +4336,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 +4357,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 +4388,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 +4400,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$b(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 +4427,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,20 +4461,20 @@ 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 {
-					if_block = create_if_block$a(ctx);
+					if_block = create_if_block$b(ctx);
 					if_block.c();
 					if_block.m(div1, t0);
 				}
@@ -3392,8 +4483,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 +4499,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 +4524,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 +4542,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 +4562,7 @@ function instance$i($$self, $$props, $$invalidate) {
 	let { disabled } = $$props;
 	let { error } = $$props;
 	let { testid } = $$props;
+	let { width } = $$props;
 
 	// Private
 	let options = [];
@@ -3474,6 +4570,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 +4599,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 +4622,7 @@ function instance$i($$self, $$props, $$invalidate) {
 			return;
 		}
 
-		$$invalidate(9, isMenuVisible = true);
+		$$invalidate(10, isMenuVisible = true);
 		await tick();
 
 		// hide menu on blur
@@ -3538,16 +4641,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 +4679,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 +4702,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 +4710,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 +4728,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 +4748,12 @@ function instance$i($$self, $$props, $$invalidate) {
 		placeholder,
 		disabled,
 		testid,
+		width,
 		options,
 		selectedLabel,
 		isMenuVisible,
 		highlightedIndex,
+		computedWidth,
 		el,
 		menuEl,
 		isError,
@@ -3664,7 +4770,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 +4789,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 +4818,8 @@ class Dropdown extends SvelteElement {
 			"placeholder",
 			"disabled",
 			"error",
-			"testid"
+			"testid",
+			"width"
 		];
 	}
 
@@ -3770,7 +4878,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[17];
+		return this.$$.ctx[19];
 	}
 
 	set error(error) {
@@ -3786,6 +4894,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 +5064,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,
@@ -3993,11 +5110,11 @@ customElements.define("goa-flex-row", FlexRow);
 
 /* libs/web-components/src/components/form-item/FormItem.svelte generated by Svelte v3.44.3 */
 
-function create_if_block_2$4(ctx) {
+function create_if_block_2$5(ctx) {
 	let label_1;
 	let t0;
 	let t1;
-	let if_block = /*isOptional*/ ctx[3] && create_if_block_3$3();
+	let if_block = /*isOptional*/ ctx[3] && create_if_block_3$4();
 
 	return {
 		c() {
@@ -4018,7 +5135,7 @@ function create_if_block_2$4(ctx) {
 
 			if (/*isOptional*/ ctx[3]) {
 				if (if_block) ; else {
-					if_block = create_if_block_3$3();
+					if_block = create_if_block_3$4();
 					if_block.c();
 					if_block.m(label_1, null);
 				}
@@ -4035,7 +5152,7 @@ function create_if_block_2$4(ctx) {
 }
 
 // (18:6) {#if isOptional}
-function create_if_block_3$3(ctx) {
+function create_if_block_3$4(ctx) {
 	let em;
 
 	return {
@@ -4053,7 +5170,7 @@ function create_if_block_3$3(ctx) {
 }
 
 // (26:2) {#if error}
-function create_if_block_1$6(ctx) {
+function create_if_block_1$7(ctx) {
 	let div;
 	let t;
 
@@ -4077,7 +5194,7 @@ function create_if_block_1$6(ctx) {
 }
 
 // (29:2) {#if helptext}
-function create_if_block$9(ctx) {
+function create_if_block$a(ctx) {
 	let div;
 	let t;
 
@@ -4106,9 +5223,9 @@ function create_fragment$g(ctx) {
 	let div0;
 	let t1;
 	let t2;
-	let if_block0 = /*label*/ ctx[0] && create_if_block_2$4(ctx);
-	let if_block1 = /*error*/ ctx[2] && create_if_block_1$6(ctx);
-	let if_block2 = /*helptext*/ ctx[1] && create_if_block$9(ctx);
+	let if_block0 = /*label*/ ctx[0] && create_if_block_2$5(ctx);
+	let if_block1 = /*error*/ ctx[2] && create_if_block_1$7(ctx);
+	let if_block2 = /*helptext*/ ctx[1] && create_if_block$a(ctx);
 
 	return {
 		c() {
@@ -4140,7 +5257,7 @@ function create_fragment$g(ctx) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_2$4(ctx);
+					if_block0 = create_if_block_2$5(ctx);
 					if_block0.c();
 					if_block0.m(div1, t0);
 				}
@@ -4153,7 +5270,7 @@ function create_fragment$g(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block_1$6(ctx);
+					if_block1 = create_if_block_1$7(ctx);
 					if_block1.c();
 					if_block1.m(div1, t2);
 				}
@@ -4166,7 +5283,7 @@ function create_fragment$g(ctx) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
-					if_block2 = create_if_block$9(ctx);
+					if_block2 = create_if_block$a(ctx);
 					if_block2.c();
 					if_block2.m(div1, null);
 				}
@@ -4212,7 +5329,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,
@@ -4418,7 +5535,7 @@ customElements.define("goa-hero-banner", HeroBanner);
 
 /* libs/web-components/src/components/icon/Icon.svelte generated by Svelte v3.44.3 */
 
-function create_if_block$8(ctx) {
+function create_if_block$9(ctx) {
 	let ion_icon;
 	let ion_icon_name_value;
 
@@ -4452,7 +5569,7 @@ function create_fragment$e(ctx) {
 	let div;
 	let div_data_testid_value;
 	let div_style_value;
-	let if_block = /*type*/ ctx[0] && create_if_block$8(ctx);
+	let if_block = /*type*/ ctx[0] && create_if_block$9(ctx);
 
 	return {
 		c() {
@@ -4463,12 +5580,13 @@ function create_fragment$e(ctx) {
 			attr(div, "data-testid", div_data_testid_value = `icon-${/*type*/ ctx[0]}`);
 
 			attr(div, "style", div_style_value = `
-    --size: ${/*_size*/ ctx[4]};
+    --size: ${/*_size*/ ctx[5]};
     --fill-color: ${/*fillcolor*/ ctx[2]};
     --hover-color: ${/*hovercolor*/ ctx[3]};
+    --opacity: ${/*opacity*/ ctx[4]};
   `);
 
-			toggle_class(div, "inverted", /*isInverted*/ ctx[5]);
+			toggle_class(div, "inverted", /*isInverted*/ ctx[6]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -4479,7 +5597,7 @@ function create_fragment$e(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$8(ctx);
+					if_block = create_if_block$9(ctx);
 					if_block.c();
 					if_block.m(div, null);
 				}
@@ -4492,16 +5610,17 @@ function create_fragment$e(ctx) {
 				attr(div, "data-testid", div_data_testid_value);
 			}
 
-			if (dirty & /*_size, fillcolor, hovercolor*/ 28 && div_style_value !== (div_style_value = `
-    --size: ${/*_size*/ ctx[4]};
+			if (dirty & /*_size, fillcolor, hovercolor, opacity*/ 60 && div_style_value !== (div_style_value = `
+    --size: ${/*_size*/ ctx[5]};
     --fill-color: ${/*fillcolor*/ ctx[2]};
     --hover-color: ${/*hovercolor*/ ctx[3]};
+    --opacity: ${/*opacity*/ ctx[4]};
   `)) {
 				attr(div, "style", div_style_value);
 			}
 
-			if (dirty & /*isInverted*/ 32) {
-				toggle_class(div, "inverted", /*isInverted*/ ctx[5]);
+			if (dirty & /*isInverted*/ 64) {
+				toggle_class(div, "inverted", /*isInverted*/ ctx[6]);
 			}
 		},
 		i: noop,
@@ -4522,23 +5641,25 @@ function instance$d($$self, $$props, $$invalidate) {
 	let { inverted } = $$props;
 	let { fillcolor } = $$props;
 	let { hovercolor } = $$props;
+	let { opacity = 1 } = $$props;
 
 	$$self.$$set = $$props => {
 		if ('type' in $$props) $$invalidate(0, type = $$props.type);
-		if ('size' in $$props) $$invalidate(6, size = $$props.size);
+		if ('size' in $$props) $$invalidate(7, size = $$props.size);
 		if ('theme' in $$props) $$invalidate(1, theme = $$props.theme);
-		if ('inverted' in $$props) $$invalidate(7, inverted = $$props.inverted);
+		if ('inverted' in $$props) $$invalidate(8, inverted = $$props.inverted);
 		if ('fillcolor' in $$props) $$invalidate(2, fillcolor = $$props.fillcolor);
 		if ('hovercolor' in $$props) $$invalidate(3, hovercolor = $$props.hovercolor);
+		if ('opacity' in $$props) $$invalidate(4, opacity = $$props.opacity);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*inverted*/ 128) {
-			$$invalidate(5, isInverted = toBoolean(inverted));
+		if ($$self.$$.dirty & /*inverted*/ 256) {
+			$$invalidate(6, isInverted = toBoolean(inverted));
 		}
 
-		if ($$self.$$.dirty & /*size*/ 64) {
-			$$invalidate(4, _size = ({
+		if ($$self.$$.dirty & /*size*/ 128) {
+			$$invalidate(5, _size = ({
 				small: "1.25rem",
 				medium: "1.5rem",
 				large: "2rem"
@@ -4546,13 +5667,13 @@ function instance$d($$self, $$props, $$invalidate) {
 		}
 	};
 
-	return [type, theme, fillcolor, hovercolor, _size, isInverted, size, inverted];
+	return [type, theme, fillcolor, hovercolor, opacity, _size, isInverted, size, inverted];
 }
 
 class Icon extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center}.goa-icon{width:var(--size);height:var(--size);fill:var(--fill-color);color:var(--fill-color);display:inline-flex;align-items:center;justify-content:center}.goa-icon:hover ion-icon{fill:var(--hover-color);color:var(--hover-color)}.inverted{color:#fff;fill:#fff}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center}.goa-icon{width:var(--size);height:var(--size);fill:var(--fill-color);color:var(--fill-color);opacity:var(--opacity);display:inline-flex;align-items:center;justify-content:center}.goa-icon:hover ion-icon{fill:var(--hover-color);color:var(--hover-color)}.inverted{color:#fff;fill:#fff}</style>`;
 
 		init(
 			this,
@@ -4566,11 +5687,12 @@ class Icon extends SvelteElement {
 			safe_not_equal,
 			{
 				type: 0,
-				size: 6,
+				size: 7,
 				theme: 1,
-				inverted: 7,
+				inverted: 8,
 				fillcolor: 2,
-				hovercolor: 3
+				hovercolor: 3,
+				opacity: 4
 			},
 			null
 		);
@@ -4588,7 +5710,7 @@ class Icon extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["type", "size", "theme", "inverted", "fillcolor", "hovercolor"];
+		return ["type", "size", "theme", "inverted", "fillcolor", "hovercolor", "opacity"];
 	}
 
 	get type() {
@@ -4601,7 +5723,7 @@ class Icon extends SvelteElement {
 	}
 
 	get size() {
-		return this.$$.ctx[6];
+		return this.$$.ctx[7];
 	}
 
 	set size(size) {
@@ -4619,7 +5741,7 @@ class Icon extends SvelteElement {
 	}
 
 	get inverted() {
-		return this.$$.ctx[7];
+		return this.$$.ctx[8];
 	}
 
 	set inverted(inverted) {
@@ -4644,6 +5766,15 @@ class Icon extends SvelteElement {
 		this.$$set({ hovercolor });
 		flush();
 	}
+
+	get opacity() {
+		return this.$$.ctx[4];
+	}
+
+	set opacity(opacity) {
+		this.$$set({ opacity });
+		flush();
+	}
 }
 
 customElements.define("goa-icon", Icon);
@@ -4925,7 +6056,7 @@ customElements.define("goa-icon-button", IconButton);
 
 /* libs/web-components/src/components/input/Input.svelte generated by Svelte v3.44.3 */
 
-function create_if_block_2$3(ctx) {
+function create_if_block_5(ctx) {
 	let goa_icon;
 
 	return {
@@ -4949,8 +6080,8 @@ function create_if_block_2$3(ctx) {
 	};
 }
 
-// (79:2) {#if trailingicon && !handlesTrailingIconClick}
-function create_if_block_1$5(ctx) {
+// (93:4) {#if trailingicon && !handlesTrailingIconClick}
+function create_if_block_4$1(ctx) {
 	let goa_icon;
 
 	return {
@@ -4975,8 +6106,8 @@ function create_if_block_1$5(ctx) {
 	};
 }
 
-// (83:2) {#if trailingicon && handlesTrailingIconClick}
-function create_if_block$7(ctx) {
+// (103:4) {#if trailingicon && handlesTrailingIconClick}
+function create_if_block_3$3(ctx) {
 	let goa_icon_button;
 	let mounted;
 	let dispose;
@@ -4985,7 +6116,7 @@ function create_if_block$7(ctx) {
 		c() {
 			goa_icon_button = element("goa-icon-button");
 			set_custom_element_data(goa_icon_button, "class", "goa-input-trailing-icon");
-			set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[10]);
+			set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[12]);
 			set_custom_element_data(goa_icon_button, "variant", "nocolor");
 			set_custom_element_data(goa_icon_button, "size", "medium");
 			set_custom_element_data(goa_icon_button, "type", /*trailingicon*/ ctx[5]);
@@ -5000,8 +6131,8 @@ function create_if_block$7(ctx) {
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty & /*isDisabled*/ 1024) {
-				set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[10]);
+			if (dirty & /*isDisabled*/ 4096) {
+				set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[12]);
 			}
 
 			if (dirty & /*trailingicon*/ 32) {
@@ -5016,25 +6147,133 @@ function create_if_block$7(ctx) {
 	};
 }
 
-function create_fragment$c(ctx) {
+// (117:2) {#if showCounter}
+function create_if_block$8(ctx) {
+	let if_block_anchor;
+
+	function select_block_type(ctx, dirty) {
+		if (/*maxcharcount*/ ctx[9] > 0) return create_if_block_1$6;
+		if (/*value*/ ctx[0].length > 0) return create_if_block_2$4;
+	}
+
+	let current_block_type = select_block_type(ctx);
+	let if_block = current_block_type && current_block_type(ctx);
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, 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(if_block_anchor.parentNode, if_block_anchor);
+				}
+			}
+		},
+		d(detaching) {
+			if (if_block) {
+				if_block.d(detaching);
+			}
+
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+
+// (122:31) 
+function create_if_block_2$4(ctx) {
+	let div;
+	let t_value = /*value*/ ctx[0].length + "";
+	let t;
+
+	return {
+		c() {
+			div = element("div");
+			t = text(t_value);
+			attr(div, "class", "counter");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*value*/ 1 && t_value !== (t_value = /*value*/ ctx[0].length + "")) set_data(t, t_value);
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+// (118:4) {#if maxcharcount > 0}
+function create_if_block_1$6(ctx) {
 	let div;
+	let t0_value = /*value*/ ctx[0].length + "";
+	let t0;
+	let t1_value = `/${/*maxcharcount*/ ctx[9]}` + "";
+	let t1;
+
+	return {
+		c() {
+			div = element("div");
+			t0 = text(t0_value);
+			t1 = text(t1_value);
+			attr(div, "class", "counter");
+			toggle_class(div, "counter-error", /*value*/ ctx[0].length > /*maxcharcount*/ ctx[9]);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, t0);
+			append(div, t1);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*value*/ 1 && t0_value !== (t0_value = /*value*/ ctx[0].length + "")) set_data(t0, t0_value);
+			if (dirty & /*maxcharcount*/ 512 && t1_value !== (t1_value = `/${/*maxcharcount*/ ctx[9]}` + "")) set_data(t1, t1_value);
+
+			if (dirty & /*value, maxcharcount*/ 513) {
+				toggle_class(div, "counter-error", /*value*/ ctx[0].length > /*maxcharcount*/ ctx[9]);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+function create_fragment$c(ctx) {
+	let div1;
+	let div0;
 	let t0;
 	let input;
 	let input_class_value;
 	let input_style_value;
 	let t1;
 	let t2;
-	let div_style_value;
-	let div_class_value;
+	let div0_class_value;
+	let t3;
+	let div1_style_value;
 	let mounted;
 	let dispose;
-	let if_block0 = /*leadingicon*/ ctx[4] && create_if_block_2$3(ctx);
-	let if_block1 = /*trailingicon*/ ctx[5] && !/*handlesTrailingIconClick*/ ctx[13] && create_if_block_1$5(ctx);
-	let if_block2 = /*trailingicon*/ ctx[5] && /*handlesTrailingIconClick*/ ctx[13] && create_if_block$7(ctx);
+	let if_block0 = /*leadingicon*/ ctx[4] && create_if_block_5(ctx);
+	let if_block1 = /*trailingicon*/ ctx[5] && !/*handlesTrailingIconClick*/ ctx[15] && create_if_block_4$1(ctx);
+	let if_block2 = /*trailingicon*/ ctx[5] && /*handlesTrailingIconClick*/ ctx[15] && create_if_block_3$3(ctx);
+	let if_block3 = /*showCounter*/ ctx[11] && create_if_block$8(ctx);
 
 	return {
 		c() {
-			div = element("div");
+			div1 = element("div");
+			div0 = element("div");
 			if (if_block0) if_block0.c();
 			t0 = space();
 			input = element("input");
@@ -5042,42 +6281,51 @@ function create_fragment$c(ctx) {
 			if (if_block1) if_block1.c();
 			t2 = space();
 			if (if_block2) if_block2.c();
+			t3 = space();
+			if (if_block3) if_block3.c();
 			this.c = noop;
 			attr(input, "class", input_class_value = `input--${/*variant*/ ctx[6]}`);
 			attr(input, "style", input_style_value = `--search-icon-offset: ${/*trailingicon*/ ctx[5] ? "-0.5rem" : "0"}`);
-			input.readOnly = /*isReadonly*/ ctx[12];
-			input.disabled = /*isDisabled*/ ctx[10];
+			input.readOnly = /*isReadonly*/ ctx[14];
+			input.disabled = /*isDisabled*/ ctx[12];
 			attr(input, "data-testid", /*testid*/ ctx[7]);
-			attr(input, "name", /*name*/ ctx[1]);
-			attr(input, "type", /*type*/ ctx[0]);
-			input.value = /*value*/ ctx[2];
+			attr(input, "name", /*name*/ ctx[2]);
+			attr(input, "type", /*type*/ ctx[1]);
+			input.value = /*value*/ ctx[0];
 			attr(input, "placeholder", /*placeholder*/ ctx[3]);
-			attr(div, "style", div_style_value = `width: ${/*width*/ ctx[8]};`);
 
-			attr(div, "class", div_class_value = `
-    goa-input
-    ${/*isDisabled*/ ctx[10] ? "goa-input--disabled" : ""}
-    variant--${/*variant*/ ctx[6]}
-    type--${/*type*/ ctx[0]}
-  `);
+			attr(div0, "class", div0_class_value = `
+      goa-input
+      ${/*isDisabled*/ ctx[12] ? "goa-input--disabled" : ""}
+      variant--${/*variant*/ ctx[6]}
+      type--${/*type*/ ctx[1]}
+    `);
 
-			toggle_class(div, "error", /*isError*/ ctx[11]);
+			toggle_class(div0, "error", /*isError*/ ctx[13]);
+			attr(div1, "class", "container");
+
+			attr(div1, "style", div1_style_value = `
+    --width: ${/*width*/ ctx[8]};
+  `);
 		},
 		m(target, anchor) {
-			insert(target, div, anchor);
-			if (if_block0) if_block0.m(div, null);
-			append(div, t0);
-			append(div, input);
-			/*input_binding*/ ctx[21](input);
-			append(div, t1);
-			if (if_block1) if_block1.m(div, null);
-			append(div, t2);
-			if (if_block2) if_block2.m(div, null);
+			insert(target, div1, anchor);
+			append(div1, div0);
+			if (if_block0) if_block0.m(div0, null);
+			append(div0, t0);
+			append(div0, input);
+			/*input_binding*/ ctx[24](input);
+			append(div0, t1);
+			if (if_block1) if_block1.m(div0, null);
+			append(div0, t2);
+			if (if_block2) if_block2.m(div0, null);
+			append(div1, t3);
+			if (if_block3) if_block3.m(div1, null);
 
 			if (!mounted) {
 				dispose = [
-					listen(input, "keyup", /*onKeyUp*/ ctx[14]),
-					listen(input, "change", /*onKeyUp*/ ctx[14])
+					listen(input, "keyup", /*onKeyUp*/ ctx[16]),
+					listen(input, "change", /*onKeyUp*/ ctx[16])
 				];
 
 				mounted = true;
@@ -5088,9 +6336,9 @@ function create_fragment$c(ctx) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_2$3(ctx);
+					if_block0 = create_if_block_5(ctx);
 					if_block0.c();
-					if_block0.m(div, t0);
+					if_block0.m(div0, t0);
 				}
 			} else if (if_block0) {
 				if_block0.d(1);
@@ -5105,85 +6353,101 @@ function create_fragment$c(ctx) {
 				attr(input, "style", input_style_value);
 			}
 
-			if (dirty & /*isReadonly*/ 4096) {
-				input.readOnly = /*isReadonly*/ ctx[12];
+			if (dirty & /*isReadonly*/ 16384) {
+				input.readOnly = /*isReadonly*/ ctx[14];
 			}
 
-			if (dirty & /*isDisabled*/ 1024) {
-				input.disabled = /*isDisabled*/ ctx[10];
+			if (dirty & /*isDisabled*/ 4096) {
+				input.disabled = /*isDisabled*/ ctx[12];
 			}
 
 			if (dirty & /*testid*/ 128) {
 				attr(input, "data-testid", /*testid*/ ctx[7]);
 			}
 
-			if (dirty & /*name*/ 2) {
-				attr(input, "name", /*name*/ ctx[1]);
+			if (dirty & /*name*/ 4) {
+				attr(input, "name", /*name*/ ctx[2]);
 			}
 
-			if (dirty & /*type*/ 1) {
-				attr(input, "type", /*type*/ ctx[0]);
+			if (dirty & /*type*/ 2) {
+				attr(input, "type", /*type*/ ctx[1]);
 			}
 
-			if (dirty & /*value*/ 4 && input.value !== /*value*/ ctx[2]) {
-				input.value = /*value*/ ctx[2];
+			if (dirty & /*value*/ 1 && input.value !== /*value*/ ctx[0]) {
+				input.value = /*value*/ ctx[0];
 			}
 
 			if (dirty & /*placeholder*/ 8) {
 				attr(input, "placeholder", /*placeholder*/ ctx[3]);
 			}
 
-			if (/*trailingicon*/ ctx[5] && !/*handlesTrailingIconClick*/ ctx[13]) {
+			if (/*trailingicon*/ ctx[5] && !/*handlesTrailingIconClick*/ ctx[15]) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block_1$5(ctx);
+					if_block1 = create_if_block_4$1(ctx);
 					if_block1.c();
-					if_block1.m(div, t2);
+					if_block1.m(div0, t2);
 				}
 			} else if (if_block1) {
 				if_block1.d(1);
 				if_block1 = null;
 			}
 
-			if (/*trailingicon*/ ctx[5] && /*handlesTrailingIconClick*/ ctx[13]) {
+			if (/*trailingicon*/ ctx[5] && /*handlesTrailingIconClick*/ ctx[15]) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
-					if_block2 = create_if_block$7(ctx);
+					if_block2 = create_if_block_3$3(ctx);
 					if_block2.c();
-					if_block2.m(div, null);
+					if_block2.m(div0, null);
 				}
 			} else if (if_block2) {
 				if_block2.d(1);
 				if_block2 = null;
 			}
 
-			if (dirty & /*width*/ 256 && div_style_value !== (div_style_value = `width: ${/*width*/ ctx[8]};`)) {
-				attr(div, "style", div_style_value);
+			if (dirty & /*isDisabled, variant, type*/ 4162 && div0_class_value !== (div0_class_value = `
+      goa-input
+      ${/*isDisabled*/ ctx[12] ? "goa-input--disabled" : ""}
+      variant--${/*variant*/ ctx[6]}
+      type--${/*type*/ ctx[1]}
+    `)) {
+				attr(div0, "class", div0_class_value);
 			}
 
-			if (dirty & /*isDisabled, variant, type*/ 1089 && div_class_value !== (div_class_value = `
-    goa-input
-    ${/*isDisabled*/ ctx[10] ? "goa-input--disabled" : ""}
-    variant--${/*variant*/ ctx[6]}
-    type--${/*type*/ ctx[0]}
-  `)) {
-				attr(div, "class", div_class_value);
+			if (dirty & /*isDisabled, variant, type, isError*/ 12354) {
+				toggle_class(div0, "error", /*isError*/ ctx[13]);
+			}
+
+			if (/*showCounter*/ ctx[11]) {
+				if (if_block3) {
+					if_block3.p(ctx, dirty);
+				} else {
+					if_block3 = create_if_block$8(ctx);
+					if_block3.c();
+					if_block3.m(div1, null);
+				}
+			} else if (if_block3) {
+				if_block3.d(1);
+				if_block3 = null;
 			}
 
-			if (dirty & /*isDisabled, variant, type, isError*/ 3137) {
-				toggle_class(div, "error", /*isError*/ ctx[11]);
+			if (dirty & /*width*/ 256 && div1_style_value !== (div1_style_value = `
+    --width: ${/*width*/ ctx[8]};
+  `)) {
+				attr(div1, "style", div1_style_value);
 			}
 		},
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(div);
+			if (detaching) detach(div1);
 			if (if_block0) if_block0.d();
-			/*input_binding*/ ctx[21](null);
+			/*input_binding*/ ctx[24](null);
 			if (if_block1) if_block1.d();
 			if (if_block2) if_block2.d();
+			if (if_block3) if_block3.d();
 			mounted = false;
 			run_all(dispose);
 		}
@@ -5200,6 +6464,7 @@ function instance$b($$self, $$props, $$invalidate) {
 	let isReadonly;
 	let isError;
 	let isDisabled;
+	let showCounter;
 	let { type = "text" } = $$props;
 	let { name = "" } = $$props;
 	let { value = "" } = $$props;
@@ -5213,7 +6478,9 @@ 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 { showcounter = "false" } = $$props;
+	let { maxcharcount = 0 } = $$props;
 	let inputEl;
 
 	function onKeyUp(e) {
@@ -5225,61 +6492,67 @@ function instance$b($$self, $$props, $$invalidate) {
 				detail: { name, value: e.target.value }
 			}));
 
-		e.stopPropagation();
+		$$invalidate(0, value = e.target.value);
 	}
 
 	function input_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			inputEl = $$value;
-			$$invalidate(9, inputEl);
+			$$invalidate(10, inputEl);
 		});
 	}
-
-	$$self.$$set = $$props => {
-		if ('type' in $$props) $$invalidate(0, type = $$props.type);
-		if ('name' in $$props) $$invalidate(1, name = $$props.name);
-		if ('value' in $$props) $$invalidate(2, value = $$props.value);
+
+	$$self.$$set = $$props => {
+		if ('type' in $$props) $$invalidate(1, type = $$props.type);
+		if ('name' in $$props) $$invalidate(2, name = $$props.name);
+		if ('value' in $$props) $$invalidate(0, value = $$props.value);
 		if ('placeholder' in $$props) $$invalidate(3, placeholder = $$props.placeholder);
 		if ('leadingicon' in $$props) $$invalidate(4, leadingicon = $$props.leadingicon);
 		if ('trailingicon' in $$props) $$invalidate(5, trailingicon = $$props.trailingicon);
 		if ('variant' in $$props) $$invalidate(6, variant = $$props.variant);
-		if ('disabled' in $$props) $$invalidate(15, disabled = $$props.disabled);
-		if ('handletrailingiconclick' in $$props) $$invalidate(16, handletrailingiconclick = $$props.handletrailingiconclick);
-		if ('focused' in $$props) $$invalidate(17, focused = $$props.focused);
-		if ('readonly' in $$props) $$invalidate(18, readonly = $$props.readonly);
-		if ('error' in $$props) $$invalidate(19, error = $$props.error);
+		if ('disabled' in $$props) $$invalidate(17, disabled = $$props.disabled);
+		if ('handletrailingiconclick' in $$props) $$invalidate(18, handletrailingiconclick = $$props.handletrailingiconclick);
+		if ('focused' in $$props) $$invalidate(19, focused = $$props.focused);
+		if ('readonly' in $$props) $$invalidate(20, readonly = $$props.readonly);
+		if ('error' in $$props) $$invalidate(21, error = $$props.error);
 		if ('testid' in $$props) $$invalidate(7, testid = $$props.testid);
 		if ('width' in $$props) $$invalidate(8, width = $$props.width);
+		if ('showcounter' in $$props) $$invalidate(22, showcounter = $$props.showcounter);
+		if ('maxcharcount' in $$props) $$invalidate(9, maxcharcount = $$props.maxcharcount);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*handletrailingiconclick*/ 65536) {
-			$$invalidate(13, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
+		if ($$self.$$.dirty & /*handletrailingiconclick*/ 262144) {
+			$$invalidate(15, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
+		}
+
+		if ($$self.$$.dirty & /*focused*/ 524288) {
+			$$invalidate(23, isFocused = toBoolean(focused));
 		}
 
-		if ($$self.$$.dirty & /*focused*/ 131072) {
-			$$invalidate(20, isFocused = toBoolean(focused));
+		if ($$self.$$.dirty & /*readonly*/ 1048576) {
+			$$invalidate(14, isReadonly = toBoolean(readonly));
 		}
 
-		if ($$self.$$.dirty & /*readonly*/ 262144) {
-			$$invalidate(12, isReadonly = toBoolean(readonly));
+		if ($$self.$$.dirty & /*error*/ 2097152) {
+			$$invalidate(13, isError = toBoolean(error));
 		}
 
-		if ($$self.$$.dirty & /*error*/ 524288) {
-			$$invalidate(11, isError = toBoolean(error));
+		if ($$self.$$.dirty & /*disabled*/ 131072) {
+			$$invalidate(12, isDisabled = toBoolean(disabled));
 		}
 
-		if ($$self.$$.dirty & /*disabled*/ 32768) {
-			$$invalidate(10, isDisabled = toBoolean(disabled));
+		if ($$self.$$.dirty & /*showcounter*/ 4194304) {
+			$$invalidate(11, showCounter = toBoolean(showcounter));
 		}
 
-		if ($$self.$$.dirty & /*isFocused, inputEl*/ 1049088) {
+		if ($$self.$$.dirty & /*isFocused, inputEl*/ 8389632) {
 			if (isFocused && inputEl) {
 				setTimeout(() => inputEl.focus(), 1);
 			}
 		}
 
-		if ($$self.$$.dirty & /*inputEl, type*/ 513) {
+		if ($$self.$$.dirty & /*inputEl, type*/ 1026) {
 			if (inputEl && type === "search") {
 				inputEl.addEventListener("search", e => {
 					onKeyUp(e);
@@ -5289,16 +6562,18 @@ function instance$b($$self, $$props, $$invalidate) {
 	};
 
 	return [
+		value,
 		type,
 		name,
-		value,
 		placeholder,
 		leadingicon,
 		trailingicon,
 		variant,
 		testid,
 		width,
+		maxcharcount,
 		inputEl,
+		showCounter,
 		isDisabled,
 		isError,
 		isReadonly,
@@ -5309,6 +6584,7 @@ function instance$b($$self, $$props, $$invalidate) {
 		focused,
 		readonly,
 		error,
+		showcounter,
 		isFocused,
 		input_binding
 	];
@@ -5317,7 +6593,9 @@ 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)}.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>')
+      center center no-repeat}</style>`;
 
 		init(
 			this,
@@ -5330,20 +6608,22 @@ class Input extends SvelteElement {
 			create_fragment$c,
 			safe_not_equal,
 			{
-				type: 0,
-				name: 1,
-				value: 2,
+				type: 1,
+				name: 2,
+				value: 0,
 				placeholder: 3,
 				leadingicon: 4,
 				trailingicon: 5,
 				variant: 6,
-				disabled: 15,
-				handletrailingiconclick: 16,
-				focused: 17,
-				readonly: 18,
-				error: 19,
+				disabled: 17,
+				handletrailingiconclick: 18,
+				focused: 19,
+				readonly: 20,
+				error: 21,
 				testid: 7,
-				width: 8
+				width: 8,
+				showcounter: 22,
+				maxcharcount: 9
 			},
 			null
 		);
@@ -5375,12 +6655,14 @@ class Input extends SvelteElement {
 			"readonly",
 			"error",
 			"testid",
-			"width"
+			"width",
+			"showcounter",
+			"maxcharcount"
 		];
 	}
 
 	get type() {
-		return this.$$.ctx[0];
+		return this.$$.ctx[1];
 	}
 
 	set type(type) {
@@ -5389,7 +6671,7 @@ class Input extends SvelteElement {
 	}
 
 	get name() {
-		return this.$$.ctx[1];
+		return this.$$.ctx[2];
 	}
 
 	set name(name) {
@@ -5398,7 +6680,7 @@ class Input extends SvelteElement {
 	}
 
 	get value() {
-		return this.$$.ctx[2];
+		return this.$$.ctx[0];
 	}
 
 	set value(value) {
@@ -5443,7 +6725,7 @@ class Input extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[15];
+		return this.$$.ctx[17];
 	}
 
 	set disabled(disabled) {
@@ -5452,7 +6734,7 @@ class Input extends SvelteElement {
 	}
 
 	get handletrailingiconclick() {
-		return this.$$.ctx[16];
+		return this.$$.ctx[18];
 	}
 
 	set handletrailingiconclick(handletrailingiconclick) {
@@ -5461,7 +6743,7 @@ class Input extends SvelteElement {
 	}
 
 	get focused() {
-		return this.$$.ctx[17];
+		return this.$$.ctx[19];
 	}
 
 	set focused(focused) {
@@ -5470,7 +6752,7 @@ class Input extends SvelteElement {
 	}
 
 	get readonly() {
-		return this.$$.ctx[18];
+		return this.$$.ctx[20];
 	}
 
 	set readonly(readonly) {
@@ -5479,7 +6761,7 @@ class Input extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[19];
+		return this.$$.ctx[21];
 	}
 
 	set error(error) {
@@ -5504,6 +6786,24 @@ class Input extends SvelteElement {
 		this.$$set({ width });
 		flush();
 	}
+
+	get showcounter() {
+		return this.$$.ctx[22];
+	}
+
+	set showcounter(showcounter) {
+		this.$$set({ showcounter });
+		flush();
+	}
+
+	get maxcharcount() {
+		return this.$$.ctx[9];
+	}
+
+	set maxcharcount(maxcharcount) {
+		this.$$set({ maxcharcount });
+		flush();
+	}
 }
 
 customElements.define("goa-input", Input);
@@ -5540,7 +6840,7 @@ function fly(node, { delay = 0, duration = 400, easing = cubicOut, x = 0, y = 0,
     };
 }
 
-function noScroll(node, opts) {
+function noScroll(_node, opts) {
   function hideScrollbars() {
     const scrollbarWidth = calculateScrollbarWidth();
     document.body.style.overflow = "hidden";
@@ -5550,7 +6850,7 @@ function noScroll(node, opts) {
     setTimeout(() => {
       document.body.style.overflow = "";
       document.body.style.paddingRight = "0";
-    }, 500);
+    }, 200);
   }
   function calculateScrollbarWidth() {
     if (document.body.clientHeight <= document.documentElement.clientHeight) {
@@ -5585,7 +6885,7 @@ function noScroll(node, opts) {
 
 /* libs/web-components/src/components/modal/Modal.svelte generated by Svelte v3.44.3 */
 
-function create_if_block$6(ctx) {
+function create_if_block$7(ctx) {
 	let div4;
 	let div0;
 	let t0;
@@ -5607,10 +6907,10 @@ function create_if_block$6(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$2(ctx);
+	let if_block1 = /*isClosable*/ ctx[4] && create_if_block_2$3(ctx);
 
 	function select_block_type(ctx, dirty) {
-		if (/*isScrollable*/ ctx[5]) return create_if_block_1$4;
+		if (/*isScrollable*/ ctx[6]) return create_if_block_1$5;
 		return create_else_block$1;
 	}
 
@@ -5664,14 +6964,16 @@ function create_if_block$6(ctx) {
 
 			if (!mounted) {
 				dispose = [
-					listen(div0, "click", /*close*/ ctx[6]),
+					listen(div0, "click", /*close*/ ctx[7]),
 					action_destroyer(noscroll_action = noScroll.call(null, div4, { enable: /*isOpen*/ ctx[2] }))
 				];
 
 				mounted = true;
 			}
 		},
-		p(ctx, dirty) {
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+
 			if (/*heading*/ ctx[0]) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
@@ -5689,7 +6991,7 @@ function create_if_block$6(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block_2$2(ctx);
+					if_block1 = create_if_block_2$3(ctx);
 					if_block1.c();
 					if_block1.m(div3, t2);
 				}
@@ -5719,13 +7021,18 @@ function create_if_block$6(ctx) {
 
 			add_render_callback(() => {
 				if (div3_outro) div3_outro.end(1);
-				div3_intro = create_in_transition(div3, fly, { duration: 200, y: 200 });
+
+				div3_intro = create_in_transition(div3, fly, {
+					duration: /*_transitionTime*/ ctx[5],
+					y: 200
+				});
+
 				div3_intro.start();
 			});
 
 			add_render_callback(() => {
 				if (div4_outro) div4_outro.end(1);
-				div4_intro = create_in_transition(div4, fade, { duration: 200 });
+				div4_intro = create_in_transition(div4, fade, { duration: /*_transitionTime*/ ctx[5] });
 				div4_intro.start();
 			});
 
@@ -5733,9 +7040,20 @@ function create_if_block$6(ctx) {
 		},
 		o(local) {
 			if (div3_intro) div3_intro.invalidate();
-			div3_outro = create_out_transition(div3, fly, { delay: 200, duration: 200, y: -100 });
+
+			div3_outro = create_out_transition(div3, fly, {
+				delay: /*_transitionTime*/ ctx[5],
+				duration: /*_transitionTime*/ ctx[5],
+				y: -100
+			});
+
 			if (div4_intro) div4_intro.invalidate();
-			div4_outro = create_out_transition(div4, fade, { delay: 200, duration: 200 });
+
+			div4_outro = create_out_transition(div4, fade, {
+				delay: /*_transitionTime*/ ctx[5],
+				duration: /*_transitionTime*/ ctx[5]
+			});
+
 			current = false;
 		},
 		d(detaching) {
@@ -5751,7 +7069,7 @@ function create_if_block$6(ctx) {
 	};
 }
 
-// (54:6) {#if heading}
+// (60:6) {#if heading}
 function create_if_block_3$2(ctx) {
 	let div;
 	let t;
@@ -5776,8 +7094,8 @@ function create_if_block_3$2(ctx) {
 	};
 }
 
-// (57:6) {#if isClosable}
-function create_if_block_2$2(ctx) {
+// (63:6) {#if isClosable}
+function create_if_block_2$3(ctx) {
 	let div;
 	let goa_icon_button;
 	let mounted;
@@ -5796,7 +7114,7 @@ function create_if_block_2$2(ctx) {
 			append(div, goa_icon_button);
 
 			if (!mounted) {
-				dispose = listen(goa_icon_button, "click", /*close*/ ctx[6]);
+				dispose = listen(goa_icon_button, "click", /*close*/ ctx[7]);
 				mounted = true;
 			}
 		},
@@ -5809,7 +7127,7 @@ function create_if_block_2$2(ctx) {
 	};
 }
 
-// (71:8) {:else}
+// (77:8) {:else}
 function create_else_block$1(ctx) {
 	let div;
 
@@ -5828,8 +7146,8 @@ function create_else_block$1(ctx) {
 	};
 }
 
-// (67:8) {#if isScrollable}
-function create_if_block_1$4(ctx) {
+// (73:8) {#if isScrollable}
+function create_if_block_1$5(ctx) {
 	let goa_scrollable;
 
 	return {
@@ -5852,7 +7170,7 @@ function create_if_block_1$4(ctx) {
 function create_fragment$b(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*isOpen*/ ctx[2] && create_if_block$6(ctx);
+	let if_block = /*isOpen*/ ctx[2] && create_if_block$7(ctx);
 
 	return {
 		c() {
@@ -5874,7 +7192,7 @@ function create_fragment$b(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$6(ctx);
+					if_block = create_if_block$7(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -5909,10 +7227,12 @@ function instance$a($$self, $$props, $$invalidate) {
 	let isClosable;
 	let isScrollable;
 	let isOpen;
+	let _transitionTime;
 	let { heading } = $$props;
 	let { closable } = $$props;
 	let { scrollable } = $$props;
 	let { open } = $$props;
+	let { transition } = $$props;
 	let { width } = $$props;
 	let scrollOffset = 0;
 
@@ -5927,22 +7247,23 @@ function instance$a($$self, $$props, $$invalidate) {
 
 	$$self.$$set = $$props => {
 		if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
-		if ('closable' in $$props) $$invalidate(7, closable = $$props.closable);
-		if ('scrollable' in $$props) $$invalidate(8, scrollable = $$props.scrollable);
-		if ('open' in $$props) $$invalidate(9, open = $$props.open);
+		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 ('transition' in $$props) $$invalidate(11, transition = $$props.transition);
 		if ('width' in $$props) $$invalidate(1, width = $$props.width);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*closable*/ 128) {
+		if ($$self.$$.dirty & /*closable*/ 256) {
 			$$invalidate(4, isClosable = toBoolean(closable));
 		}
 
-		if ($$self.$$.dirty & /*scrollable*/ 256) {
-			$$invalidate(5, isScrollable = toBoolean(scrollable));
+		if ($$self.$$.dirty & /*scrollable*/ 512) {
+			$$invalidate(6, isScrollable = toBoolean(scrollable));
 		}
 
-		if ($$self.$$.dirty & /*open*/ 512) {
+		if ($$self.$$.dirty & /*open*/ 1024) {
 			$$invalidate(2, isOpen = toBoolean(open));
 		}
 
@@ -5953,6 +7274,12 @@ function instance$a($$self, $$props, $$invalidate) {
 				}
 			}
 		}
+
+		if ($$self.$$.dirty & /*transition*/ 2048) {
+			$$invalidate(5, _transitionTime = transition === "none"
+			? 0
+			: transition === "slow" ? 400 : 200);
+		}
 	};
 
 	return [
@@ -5961,18 +7288,20 @@ function instance$a($$self, $$props, $$invalidate) {
 		isOpen,
 		scrollOffset,
 		isClosable,
+		_transitionTime,
 		isScrollable,
 		close,
 		closable,
 		scrollable,
-		open
+		open,
+		transition
 	];
 }
 
 class Modal extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.modal{font-family:var(--font-family);position:absolute;top:var(--scroll-offset, 0);left:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:var(--width, 60ch);margin:1rem;box-shadow:var(--shadow-2);border-radius:4px;max-height:90%}@media(min-width: 640px){.modal-pane{max-height:80%}}.modal-actions{text-align:right;padding:0 1.75rem;margin:1.75rem 0;flex:1 1 auto}.modal-close{position:absolute;top:1rem;right:1rem}.modal-title{font-size:var(--fs-xl);padding-bottom:1rem;padding:0 1.75rem;margin:1.75rem 0;margin-right:40px;flex:0 0 auto}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.modal{font-family:var(--font-family);position:absolute;top:var(--scroll-offset, 0);left:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;margin:1rem;box-shadow:var(--shadow-2);border-radius:4px;max-height:90%}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch);max-height:80%}}.modal-actions{text-align:right;padding:0 1.75rem;margin:1.75rem 0;flex:1 1 auto}.modal-close{position:absolute;top:1rem;right:1rem}.modal-title{font-size:var(--fs-xl);padding-bottom:1rem;padding:0 1.75rem;margin:1.75rem 0;margin-right:40px;flex:0 0 auto}</style>`;
 
 		init(
 			this,
@@ -5986,9 +7315,10 @@ class Modal extends SvelteElement {
 			safe_not_equal,
 			{
 				heading: 0,
-				closable: 7,
-				scrollable: 8,
-				open: 9,
+				closable: 8,
+				scrollable: 9,
+				open: 10,
+				transition: 11,
 				width: 1
 			},
 			null
@@ -6007,7 +7337,7 @@ class Modal extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["heading", "closable", "scrollable", "open", "width"];
+		return ["heading", "closable", "scrollable", "open", "transition", "width"];
 	}
 
 	get heading() {
@@ -6020,7 +7350,7 @@ class Modal extends SvelteElement {
 	}
 
 	get closable() {
-		return this.$$.ctx[7];
+		return this.$$.ctx[8];
 	}
 
 	set closable(closable) {
@@ -6029,7 +7359,7 @@ class Modal extends SvelteElement {
 	}
 
 	get scrollable() {
-		return this.$$.ctx[8];
+		return this.$$.ctx[9];
 	}
 
 	set scrollable(scrollable) {
@@ -6038,7 +7368,7 @@ class Modal extends SvelteElement {
 	}
 
 	get open() {
-		return this.$$.ctx[9];
+		return this.$$.ctx[10];
 	}
 
 	set open(open) {
@@ -6046,6 +7376,15 @@ class Modal extends SvelteElement {
 		flush();
 	}
 
+	get transition() {
+		return this.$$.ctx[11];
+	}
+
+	set transition(transition) {
+		this.$$set({ transition });
+		flush();
+	}
+
 	get width() {
 		return this.$$.ctx[1];
 	}
@@ -6060,7 +7399,7 @@ customElements.define("goa-modal", Modal);
 
 /* libs/web-components/src/components/notification/Notification.svelte generated by Svelte v3.44.3 */
 
-function create_if_block$5(ctx) {
+function create_if_block$6(ctx) {
 	let div3;
 	let div0;
 	let goa_icon;
@@ -6147,7 +7486,7 @@ function create_if_block$5(ctx) {
 function create_fragment$a(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*show*/ ctx[1] && create_if_block$5(ctx);
+	let if_block = /*show*/ ctx[1] && create_if_block$6(ctx);
 
 	return {
 		c() {
@@ -6169,7 +7508,7 @@ function create_fragment$a(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$5(ctx);
+					if_block = create_if_block$6(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -6330,12 +7669,12 @@ customElements.define("goa-page-layout", PageLayout);
 
 /* libs/web-components/src/components/circular-progress/CircularProgress.svelte generated by Svelte v3.44.3 */
 
-function create_if_block$4(ctx) {
+function create_if_block$5(ctx) {
 	let current_block_type_index;
 	let if_block;
 	let if_block_anchor;
 	let current;
-	const if_block_creators = [create_if_block_1$3, create_if_block_3$1];
+	const if_block_creators = [create_if_block_1$4, create_if_block_3$1];
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
@@ -6487,7 +7826,7 @@ function create_if_block_3$1(ctx) {
 }
 
 // (24:2) {#if fullscreen}
-function create_if_block_1$3(ctx) {
+function create_if_block_1$4(ctx) {
 	let div;
 	let goa_spinner;
 	let goa_spinner_progress_value;
@@ -6496,7 +7835,7 @@ function create_if_block_1$3(ctx) {
 	let current;
 	let mounted;
 	let dispose;
-	let if_block = /*message*/ ctx[1] && create_if_block_2$1(ctx);
+	let if_block = /*message*/ ctx[1] && create_if_block_2$2(ctx);
 
 	return {
 		c() {
@@ -6538,7 +7877,7 @@ function create_if_block_1$3(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block_2$1(ctx);
+					if_block = create_if_block_2$2(ctx);
 					if_block.c();
 					if_block.m(div, null);
 				}
@@ -6601,7 +7940,7 @@ function create_if_block_4(ctx) {
 }
 
 // (31:6) {#if message}
-function create_if_block_2$1(ctx) {
+function create_if_block_2$2(ctx) {
 	let div;
 	let t;
 
@@ -6627,7 +7966,7 @@ function create_if_block_2$1(ctx) {
 function create_fragment$8(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*ready*/ ctx[3] && create_if_block$4(ctx);
+	let if_block = /*ready*/ ctx[3] && create_if_block$5(ctx);
 
 	return {
 		c() {
@@ -6649,7 +7988,7 @@ function create_fragment$8(ctx) {
 						transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$4(ctx);
+					if_block = create_if_block$5(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -7477,7 +8816,7 @@ function create_if_block_3(ctx) {
 }
 
 // (42:2) {#if ["alpha", "beta"].includes(level)}
-function create_if_block_1$2(ctx) {
+function create_if_block_1$3(ctx) {
 	let div0;
 	let t0_value = capitalize(/*level*/ ctx[0]) + "";
 	let t0;
@@ -7487,7 +8826,7 @@ function create_if_block_1$2(ctx) {
 	let t2;
 	let a;
 	let t4;
-	let if_block = /*feedbackurl*/ ctx[2] && create_if_block_2(ctx);
+	let if_block = /*feedbackurl*/ ctx[2] && create_if_block_2$1(ctx);
 
 	return {
 		c() {
@@ -7527,7 +8866,7 @@ function create_if_block_1$2(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block_2(ctx);
+					if_block = create_if_block_2$1(ctx);
 					if_block.c();
 					if_block.m(div1, null);
 				}
@@ -7546,7 +8885,7 @@ function create_if_block_1$2(ctx) {
 }
 
 // (52:6) {#if feedbackurl}
-function create_if_block_2(ctx) {
+function create_if_block_2$1(ctx) {
 	let span;
 	let t0;
 	let a;
@@ -7579,7 +8918,7 @@ function create_if_block_2(ctx) {
 }
 
 // (60:2) {#if version}
-function create_if_block$3(ctx) {
+function create_if_block$4(ctx) {
 	let div;
 	let t;
 
@@ -7611,8 +8950,8 @@ function create_fragment$4(ctx) {
 	let div;
 	let t2;
 	let if_block0 = /*level*/ ctx[0] === "live" && create_if_block_3();
-	let if_block1 = show_if && create_if_block_1$2(ctx);
-	let if_block2 = /*version*/ ctx[1] && create_if_block$3(ctx);
+	let if_block1 = show_if && create_if_block_1$3(ctx);
+	let if_block2 = /*version*/ ctx[1] && create_if_block$4(ctx);
 
 	return {
 		c() {
@@ -7656,7 +8995,7 @@ function create_fragment$4(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block_1$2(ctx);
+					if_block1 = create_if_block_1$3(ctx);
 					if_block1.c();
 					if_block1.m(header, t1);
 				}
@@ -7669,7 +9008,7 @@ function create_fragment$4(ctx) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
-					if_block2 = create_if_block$3(ctx);
+					if_block2 = create_if_block$4(ctx);
 					if_block2.c();
 					if_block2.m(header, null);
 				}
@@ -7801,7 +9140,7 @@ function create_else_block(ctx) {
 }
 
 // (20:29) 
-function create_if_block_1$1(ctx) {
+function create_if_block_1$2(ctx) {
 	let div2;
 	let div0;
 	let skeleton0;
@@ -7891,7 +9230,7 @@ function create_if_block_1$1(ctx) {
 }
 
 // (10:0) {#if type === "card"}
-function create_if_block$2(ctx) {
+function create_if_block$3(ctx) {
 	let div1;
 	let skeleton0;
 	let t0;
@@ -8015,7 +9354,7 @@ function create_fragment$3(ctx) {
 	let if_block;
 	let if_block_anchor;
 	let current;
-	const if_block_creators = [create_if_block$2, create_if_block_1$1, create_else_block];
+	const if_block_creators = [create_if_block$3, create_if_block_1$2, create_else_block];
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
@@ -8261,7 +9600,7 @@ function tweened(value, defaults = {}) {
 
 /* libs/web-components/src/components/spinner/Spinner.svelte generated by Svelte v3.44.3 */
 
-function create_if_block$1(ctx) {
+function create_if_block$2(ctx) {
 	let svg;
 	let circle;
 	let circle_stroke_value;
@@ -8372,7 +9711,7 @@ function create_if_block$1(ctx) {
 
 function create_fragment$2(ctx) {
 	let if_block_anchor;
-	let if_block = /*ready*/ ctx[6] && create_if_block$1(ctx);
+	let if_block = /*ready*/ ctx[6] && create_if_block$2(ctx);
 
 	return {
 		c() {
@@ -8389,7 +9728,7 @@ function create_fragment$2(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block$1(ctx);
+					if_block = create_if_block$2(ctx);
 					if_block.c();
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
 				}
@@ -8599,30 +9938,148 @@ customElements.define("goa-spinner", Spinner);
 
 /* libs/web-components/src/components/text-area/TextArea.svelte generated by Svelte v3.44.3 */
 
+function create_if_block$1(ctx) {
+	let if_block_anchor;
+
+	function select_block_type(ctx, dirty) {
+		if (/*maxcharcount*/ ctx[6] > 0) return create_if_block_1$1;
+		if (/*value*/ ctx[1].length > 0) return create_if_block_2;
+	}
+
+	let current_block_type = select_block_type(ctx);
+	let if_block = current_block_type && current_block_type(ctx);
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, 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(if_block_anchor.parentNode, if_block_anchor);
+				}
+			}
+		},
+		d(detaching) {
+			if (if_block) {
+				if_block.d(detaching);
+			}
+
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+
+// (61:31) 
+function create_if_block_2(ctx) {
+	let div;
+	let t_value = /*value*/ ctx[1].length + "";
+	let t;
+
+	return {
+		c() {
+			div = element("div");
+			t = text(t_value);
+			attr(div, "class", "counter");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*value*/ 2 && t_value !== (t_value = /*value*/ ctx[1].length + "")) set_data(t, t_value);
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+// (55:4) {#if maxcharcount > 0}
+function create_if_block_1$1(ctx) {
+	let div;
+	let t0_value = /*value*/ ctx[1].length + "";
+	let t0;
+	let t1_value = `/${/*maxcharcount*/ ctx[6]}` + "";
+	let t1;
+
+	return {
+		c() {
+			div = element("div");
+			t0 = text(t0_value);
+			t1 = text(t1_value);
+			attr(div, "class", "counter");
+			toggle_class(div, "counter-error", /*value*/ ctx[1].length > /*maxcharcount*/ ctx[6]);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, t0);
+			append(div, t1);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*value*/ 2 && t0_value !== (t0_value = /*value*/ ctx[1].length + "")) set_data(t0, t0_value);
+			if (dirty & /*maxcharcount*/ 64 && t1_value !== (t1_value = `/${/*maxcharcount*/ ctx[6]}` + "")) set_data(t1, t1_value);
+
+			if (dirty & /*value, maxcharcount*/ 66) {
+				toggle_class(div, "counter-error", /*value*/ ctx[1].length > /*maxcharcount*/ ctx[6]);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
 function create_fragment$1(ctx) {
+	let div;
 	let textarea;
+	let t;
+	let div_style_value;
 	let mounted;
 	let dispose;
+	let if_block = /*showCounter*/ ctx[8] && create_if_block$1(ctx);
 
 	return {
 		c() {
+			div = element("div");
 			textarea = element("textarea");
+			t = space();
+			if (if_block) if_block.c();
 			this.c = noop;
 			attr(textarea, "name", /*name*/ ctx[0]);
 			attr(textarea, "placeholder", /*placeholder*/ ctx[2]);
 			textarea.value = /*value*/ ctx[1];
 			attr(textarea, "rows", /*rows*/ ctx[3]);
 			attr(textarea, "class", "goa-textarea");
-			textarea.disabled = /*isDisabled*/ ctx[5];
-			textarea.readOnly = /*isReadonly*/ ctx[6];
+			textarea.disabled = /*isDisabled*/ ctx[7];
+			textarea.readOnly = /*isReadonly*/ ctx[9];
 			attr(textarea, "data-testid", /*testid*/ ctx[4]);
-			toggle_class(textarea, "error", /*isError*/ ctx[7]);
+			toggle_class(textarea, "error", /*isError*/ ctx[10]);
+			attr(div, "class", "container");
+
+			attr(div, "style", div_style_value = `
+    --width: ${/*width*/ ctx[5]};
+  `);
 		},
 		m(target, anchor) {
-			insert(target, textarea, anchor);
+			insert(target, div, anchor);
+			append(div, textarea);
+			append(div, t);
+			if (if_block) if_block.m(div, null);
 
 			if (!mounted) {
-				dispose = listen(textarea, "keyup", /*onChange*/ ctx[8]);
+				dispose = listen(textarea, "keyup", /*onChange*/ ctx[11]);
 				mounted = true;
 			}
 		},
@@ -8643,26 +10100,46 @@ function create_fragment$1(ctx) {
 				attr(textarea, "rows", /*rows*/ ctx[3]);
 			}
 
-			if (dirty & /*isDisabled*/ 32) {
-				textarea.disabled = /*isDisabled*/ ctx[5];
+			if (dirty & /*isDisabled*/ 128) {
+				textarea.disabled = /*isDisabled*/ ctx[7];
 			}
 
-			if (dirty & /*isReadonly*/ 64) {
-				textarea.readOnly = /*isReadonly*/ ctx[6];
+			if (dirty & /*isReadonly*/ 512) {
+				textarea.readOnly = /*isReadonly*/ ctx[9];
 			}
 
 			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*/ 1024) {
+				toggle_class(textarea, "error", /*isError*/ ctx[10]);
+			}
+
+			if (/*showCounter*/ ctx[8]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+				} else {
+					if_block = create_if_block$1(ctx);
+					if_block.c();
+					if_block.m(div, null);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
+
+			if (dirty & /*width*/ 32 && div_style_value !== (div_style_value = `
+    --width: ${/*width*/ ctx[5]};
+  `)) {
+				attr(div, "style", div_style_value);
 			}
 		},
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(textarea);
+			if (detaching) detach(div);
+			if (if_block) if_block.d();
 			mounted = false;
 			dispose();
 		}
@@ -8673,14 +10150,18 @@ function instance$1($$self, $$props, $$invalidate) {
 	let isError;
 	let isDisabled;
 	let isReadonly;
+	let showCounter;
 	let { name } = $$props;
 	let { value = "" } = $$props;
 	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;
+	let { showcounter = "false" } = $$props;
+	let { maxcharcount = 0 } = $$props;
 
 	function onChange(e) {
 		const target = e.target;
@@ -8704,22 +10185,29 @@ 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(12, error = $$props.error);
+		if ('readonly' in $$props) $$invalidate(13, readonly = $$props.readonly);
+		if ('disabled' in $$props) $$invalidate(14, disabled = $$props.disabled);
+		if ('showcounter' in $$props) $$invalidate(15, showcounter = $$props.showcounter);
+		if ('maxcharcount' in $$props) $$invalidate(6, maxcharcount = $$props.maxcharcount);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*error*/ 512) {
-			$$invalidate(7, isError = toBoolean(error));
+		if ($$self.$$.dirty & /*error*/ 4096) {
+			$$invalidate(10, isError = toBoolean(error));
 		}
 
-		if ($$self.$$.dirty & /*disabled*/ 2048) {
-			$$invalidate(5, isDisabled = toBoolean(disabled));
+		if ($$self.$$.dirty & /*disabled*/ 16384) {
+			$$invalidate(7, isDisabled = toBoolean(disabled));
+		}
+
+		if ($$self.$$.dirty & /*readonly*/ 8192) {
+			$$invalidate(9, isReadonly = toBoolean(readonly));
 		}
 
-		if ($$self.$$.dirty & /*readonly*/ 1024) {
-			$$invalidate(6, isReadonly = toBoolean(readonly));
+		if ($$self.$$.dirty & /*showcounter*/ 32768) {
+			$$invalidate(8, showCounter = toBoolean(showcounter));
 		}
 	};
 
@@ -8729,20 +10217,26 @@ function instance$1($$self, $$props, $$invalidate) {
 		placeholder,
 		rows,
 		testid,
+		width,
+		maxcharcount,
 		isDisabled,
+		showCounter,
 		isReadonly,
 		isError,
 		onChange,
 		error,
 		readonly,
-		disabled
+		disabled,
+		showcounter
 	];
 }
 
 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)}.container{position:relative;width:100%}@media(min-width: 640px){.container{max-width:var(--width)}}.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}.counter{position:absolute;right:0;padding-top:0.25rem;font-size:var(--fs-sm)}.counter-error{color:var(--goa-color-status-emergency-dark)
+  }.error:hover,.error:focus,.error{border:2px solid var(--goa-color-status-emergency-dark)}</style>`;
 
 		init(
 			this,
@@ -8760,9 +10254,12 @@ class TextArea extends SvelteElement {
 				placeholder: 2,
 				rows: 3,
 				testid: 4,
-				error: 9,
-				readonly: 10,
-				disabled: 11
+				width: 5,
+				error: 12,
+				readonly: 13,
+				disabled: 14,
+				showcounter: 15,
+				maxcharcount: 6
 			},
 			null
 		);
@@ -8786,9 +10283,12 @@ class TextArea extends SvelteElement {
 			"placeholder",
 			"rows",
 			"testid",
+			"width",
 			"error",
 			"readonly",
-			"disabled"
+			"disabled",
+			"showcounter",
+			"maxcharcount"
 		];
 	}
 
@@ -8837,8 +10337,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[12];
 	}
 
 	set error(error) {
@@ -8847,7 +10356,7 @@ class TextArea extends SvelteElement {
 	}
 
 	get readonly() {
-		return this.$$.ctx[10];
+		return this.$$.ctx[13];
 	}
 
 	set readonly(readonly) {
@@ -8856,13 +10365,31 @@ class TextArea extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[11];
+		return this.$$.ctx[14];
 	}
 
 	set disabled(disabled) {
 		this.$$set({ disabled });
 		flush();
 	}
+
+	get showcounter() {
+		return this.$$.ctx[15];
+	}
+
+	set showcounter(showcounter) {
+		this.$$set({ showcounter });
+		flush();
+	}
+
+	get maxcharcount() {
+		return this.$$.ctx[6];
+	}
+
+	set maxcharcount(maxcharcount) {
+		this.$$set({ maxcharcount });
+		flush();
+	}
 }
 
 customElements.define("goa-textarea", TextArea);
@@ -9098,4 +10625,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 };