@abgov/web-components 1.0.0-alpha.23 → 1.0.0-alpha.26

package/web-components.es.js

@@ -780,7 +780,7 @@ function create_fragment$w(ctx) {
 class PageBlock extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.page-content{max-width:100%;margin:0 auto;padding:0 1.75rem}@media(min-width: 1200px){.page-content{max-width:1440px}}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.page-content{max-width:var(--page-width-max);margin:0 auto;padding:0 1.75rem}</style>`;
 
 		init(
 			this,
@@ -883,7 +883,7 @@ function create_fragment$v(ctx) {
 }
 
 function instance$r($$self, $$props, $$invalidate) {
-	let { url } = $$props;
+	let { url = "#" } = $$props;
 	let { title } = $$props;
 	let { testid = "" } = $$props;
 
@@ -976,7 +976,7 @@ function fromBoolean(value) {
 
 /* libs/web-components/src/components/badge/Badge.svelte generated by Svelte v3.44.3 */
 
-function create_else_block$4(ctx) {
+function create_else_block$3(ctx) {
 	let div;
 
 	return {
@@ -1050,7 +1050,7 @@ function create_fragment$u(ctx) {
 
 	function select_block_type(ctx, dirty) {
 		if (/*showIcon*/ ctx[4]) return create_if_block_1$9;
-		return create_else_block$4;
+		return create_else_block$3;
 	}
 
 	let current_block_type = select_block_type(ctx);
@@ -2080,46 +2080,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$b(ctx) {
-	let if_block_anchor;
-
-	function select_block_type(ctx, dirty) {
-		if (/*isIndeterminate*/ ctx[4]) return create_if_block_1$8;
-		return create_else_block$3;
-	}
-
-	let current_block_type = select_block_type(ctx);
-	let if_block = current_block_type(ctx);
-
-	return {
-		c() {
-			if_block.c();
-			if_block_anchor = empty();
-		},
-		m(target, anchor) {
-			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.d(1);
-				if_block = current_block_type(ctx);
-
-				if (if_block) {
-					if_block.c();
-					if_block.m(if_block_anchor.parentNode, if_block_anchor);
-				}
-			}
-		},
-		d(detaching) {
-			if_block.d(detaching);
-			if (detaching) detach(if_block_anchor);
-		}
-	};
-}
-
-// (54:6) {:else}
-function create_else_block$3(ctx) {
+function create_if_block_1$8(ctx) {
 	let svg;
 	let path;
 
@@ -2129,6 +2090,7 @@ function create_else_block$3(ctx) {
 			path = svg_element("path");
 			attr(path, "d", "M5.09,9.64,1.27,5.82,0,7.09l5.09,5.09L16,1.27,14.73,0Z");
 			attr(svg, "id", "checkmark");
+			attr(svg, "data-testid", "checkmark");
 			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
 			attr(svg, "viewBox", "0 0 16 12.18");
 		},
@@ -2142,8 +2104,8 @@ function create_else_block$3(ctx) {
 	};
 }
 
-// (50:6) {#if isIndeterminate}
-function create_if_block_1$8(ctx) {
+// (51:4) {#if isIndeterminate}
+function create_if_block$b(ctx) {
 	let svg;
 	let rect;
 
@@ -2154,6 +2116,7 @@ function create_if_block_1$8(ctx) {
 			attr(rect, "width", "15");
 			attr(rect, "height", "2");
 			attr(svg, "id", "dashmark");
+			attr(svg, "data-testid", "dashmark");
 			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
 			attr(svg, "viewBox", "0 0 15 2");
 		},
@@ -2179,7 +2142,14 @@ function create_fragment$l(ctx) {
 	let t2;
 	let mounted;
 	let dispose;
-	let if_block = /*isChecked*/ ctx[3] && create_if_block$b(ctx);
+
+	function select_block_type(ctx, dirty) {
+		if (/*isIndeterminate*/ ctx[6]) return create_if_block$b;
+		if (/*isChecked*/ ctx[5]) return create_if_block_1$8;
+	}
+
+	let current_block_type = select_block_type(ctx);
+	let if_block = current_block_type && current_block_type(ctx);
 
 	return {
 		c() {
@@ -2191,22 +2161,24 @@ function create_fragment$l(ctx) {
 			t1 = space();
 			div1 = element("div");
 			slot = element("slot");
-			t2 = text(/*text*/ ctx[1]);
+			t2 = text(/*text*/ ctx[2]);
 			this.c = noop;
-			attr(input, "id", /*id*/ ctx[7]);
-			attr(input, "name", /*name*/ ctx[0]);
-			input.checked = /*isChecked*/ ctx[3];
-			input.disabled = /*isDisabled*/ ctx[6];
+			attr(input, "id", /*id*/ ctx[0]);
+			attr(input, "data-testid", /*testid*/ ctx[4]);
+			attr(input, "name", /*name*/ ctx[1]);
+			input.checked = /*isChecked*/ ctx[5];
+			input.disabled = /*isDisabled*/ ctx[8];
 			attr(input, "type", "checkbox");
-			input.value = input_value_value = `${/*value*/ ctx[2]}`;
+			input.value = input_value_value = `${/*value*/ ctx[3]}`;
 			attr(div0, "class", "goa-checkbox-container");
-			toggle_class(div0, "goa-checkbox--selected", /*isChecked*/ ctx[3]);
+			toggle_class(div0, "goa-checkbox--selected", /*isChecked*/ ctx[5]);
 			attr(slot, "name", "main");
 			attr(div1, "class", "goa-checkbox-text");
-			attr(label, "for", /*id*/ ctx[7]);
+			attr(div1, "data-testid", "text");
+			attr(label, "for", /*id*/ ctx[0]);
 			attr(label, "class", "goa-checkbox");
-			toggle_class(label, "goa-checkbox--disabled", /*isDisabled*/ ctx[6]);
-			toggle_class(label, "goa-checkbox--error", /*isError*/ ctx[5]);
+			toggle_class(label, "goa-checkbox--disabled", /*isDisabled*/ ctx[8]);
+			toggle_class(label, "goa-checkbox--error", /*isError*/ ctx[7]);
 		},
 		m(target, anchor) {
 			insert(target, label, anchor);
@@ -2220,67 +2192,72 @@ function create_fragment$l(ctx) {
 			append(slot, t2);
 
 			if (!mounted) {
-				dispose = listen(input, "change", /*onChange*/ ctx[8]);
+				dispose = listen(input, "change", /*onChange*/ ctx[9]);
 				mounted = true;
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*id*/ 128) {
-				attr(input, "id", /*id*/ ctx[7]);
+			if (dirty & /*id*/ 1) {
+				attr(input, "id", /*id*/ ctx[0]);
+			}
+
+			if (dirty & /*testid*/ 16) {
+				attr(input, "data-testid", /*testid*/ ctx[4]);
 			}
 
-			if (dirty & /*name*/ 1) {
-				attr(input, "name", /*name*/ ctx[0]);
+			if (dirty & /*name*/ 2) {
+				attr(input, "name", /*name*/ ctx[1]);
 			}
 
-			if (dirty & /*isChecked*/ 8) {
-				input.checked = /*isChecked*/ ctx[3];
+			if (dirty & /*isChecked*/ 32) {
+				input.checked = /*isChecked*/ ctx[5];
 			}
 
-			if (dirty & /*isDisabled*/ 64) {
-				input.disabled = /*isDisabled*/ ctx[6];
+			if (dirty & /*isDisabled*/ 256) {
+				input.disabled = /*isDisabled*/ ctx[8];
 			}
 
-			if (dirty & /*value*/ 4 && input_value_value !== (input_value_value = `${/*value*/ ctx[2]}`)) {
+			if (dirty & /*value*/ 8 && input_value_value !== (input_value_value = `${/*value*/ ctx[3]}`)) {
 				input.value = input_value_value;
 			}
 
-			if (/*isChecked*/ ctx[3]) {
+			if (current_block_type !== (current_block_type = select_block_type(ctx))) {
+				if (if_block) if_block.d(1);
+				if_block = current_block_type && current_block_type(ctx);
+
 				if (if_block) {
-					if_block.p(ctx, dirty);
-				} else {
-					if_block = create_if_block$b(ctx);
 					if_block.c();
 					if_block.m(div0, null);
 				}
-			} else if (if_block) {
-				if_block.d(1);
-				if_block = null;
 			}
 
-			if (dirty & /*isChecked*/ 8) {
-				toggle_class(div0, "goa-checkbox--selected", /*isChecked*/ ctx[3]);
+			if (dirty & /*isChecked*/ 32) {
+				toggle_class(div0, "goa-checkbox--selected", /*isChecked*/ ctx[5]);
 			}
 
-			if (dirty & /*text*/ 2) set_data(t2, /*text*/ ctx[1]);
+			if (dirty & /*text*/ 4) set_data(t2, /*text*/ ctx[2]);
 
-			if (dirty & /*id*/ 128) {
-				attr(label, "for", /*id*/ ctx[7]);
+			if (dirty & /*id*/ 1) {
+				attr(label, "for", /*id*/ ctx[0]);
 			}
 
-			if (dirty & /*isDisabled*/ 64) {
-				toggle_class(label, "goa-checkbox--disabled", /*isDisabled*/ ctx[6]);
+			if (dirty & /*isDisabled*/ 256) {
+				toggle_class(label, "goa-checkbox--disabled", /*isDisabled*/ ctx[8]);
 			}
 
-			if (dirty & /*isError*/ 32) {
-				toggle_class(label, "goa-checkbox--error", /*isError*/ ctx[5]);
+			if (dirty & /*isError*/ 128) {
+				toggle_class(label, "goa-checkbox--error", /*isError*/ ctx[7]);
 			}
 		},
 		i: noop,
 		o: noop,
 		d(detaching) {
 			if (detaching) detach(label);
-			if (if_block) if_block.d();
+
+			if (if_block) {
+				if_block.d();
+			}
+
 			mounted = false;
 			dispose();
 		}
@@ -2288,18 +2265,18 @@ function create_fragment$l(ctx) {
 }
 
 function instance$k($$self, $$props, $$invalidate) {
-	let id;
 	let isDisabled;
 	let isError;
 	let isChecked;
 	let isIndeterminate;
 	let { name } = $$props;
+	let { id = "" } = $$props;
 	let { text = "" } = $$props;
 	let { value = "" } = $$props;
 	let { checked } = $$props;
 	let { disabled } = $$props;
-	let { indeterminate } = $$props;
 	let { error } = $$props;
+	let { testid = "" } = $$props;
 
 	function onChange(e) {
 		// An empty string is required as setting the second value to `null` caused the data to get
@@ -2320,50 +2297,49 @@ function instance$k($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$set = $$props => {
-		if ('name' in $$props) $$invalidate(0, name = $$props.name);
-		if ('text' in $$props) $$invalidate(1, text = $$props.text);
-		if ('value' in $$props) $$invalidate(2, value = $$props.value);
-		if ('checked' in $$props) $$invalidate(9, checked = $$props.checked);
-		if ('disabled' in $$props) $$invalidate(10, disabled = $$props.disabled);
-		if ('indeterminate' in $$props) $$invalidate(11, indeterminate = $$props.indeterminate);
+		if ('name' in $$props) $$invalidate(1, name = $$props.name);
+		if ('id' in $$props) $$invalidate(0, id = $$props.id);
+		if ('text' in $$props) $$invalidate(2, text = $$props.text);
+		if ('value' in $$props) $$invalidate(3, value = $$props.value);
+		if ('checked' in $$props) $$invalidate(10, checked = $$props.checked);
+		if ('disabled' in $$props) $$invalidate(11, disabled = $$props.disabled);
 		if ('error' in $$props) $$invalidate(12, error = $$props.error);
+		if ('testid' in $$props) $$invalidate(4, testid = $$props.testid);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*name*/ 1) {
-			$$invalidate(7, id = `id-${name}`);
+		if ($$self.$$.dirty & /*id, name*/ 3) {
+			$$invalidate(0, id = id ? id : `id-${name}`);
 		}
 
-		if ($$self.$$.dirty & /*disabled*/ 1024) {
-			$$invalidate(6, isDisabled = toBoolean(disabled));
+		if ($$self.$$.dirty & /*disabled*/ 2048) {
+			$$invalidate(8, isDisabled = toBoolean(disabled));
 		}
 
 		if ($$self.$$.dirty & /*error*/ 4096) {
-			$$invalidate(5, isError = toBoolean(error));
-		}
-
-		if ($$self.$$.dirty & /*checked*/ 512) {
-			$$invalidate(3, isChecked = toBoolean(checked));
+			$$invalidate(7, isError = toBoolean(error));
 		}
 
-		if ($$self.$$.dirty & /*indeterminate*/ 2048) {
-			$$invalidate(4, isIndeterminate = toBoolean(indeterminate));
+		if ($$self.$$.dirty & /*checked*/ 1024) {
+			$$invalidate(5, isChecked = toBoolean(checked));
 		}
 	};
 
+	$$invalidate(6, isIndeterminate = false); // Desighn review. To be built with TreeView Later
+
 	return [
+		id,
 		name,
 		text,
 		value,
+		testid,
 		isChecked,
 		isIndeterminate,
 		isError,
 		isDisabled,
-		id,
 		onChange,
 		checked,
 		disabled,
-		indeterminate,
 		error
 	];
 }
@@ -2384,13 +2360,14 @@ class Checkbox extends SvelteElement {
 			create_fragment$l,
 			safe_not_equal,
 			{
-				name: 0,
-				text: 1,
-				value: 2,
-				checked: 9,
-				disabled: 10,
-				indeterminate: 11,
-				error: 12
+				name: 1,
+				id: 0,
+				text: 2,
+				value: 3,
+				checked: 10,
+				disabled: 11,
+				error: 12,
+				testid: 4
 			},
 			null
 		);
@@ -2408,11 +2385,11 @@ class Checkbox extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["name", "text", "value", "checked", "disabled", "indeterminate", "error"];
+		return ["name", "id", "text", "value", "checked", "disabled", "error", "testid"];
 	}
 
 	get name() {
-		return this.$$.ctx[0];
+		return this.$$.ctx[1];
 	}
 
 	set name(name) {
@@ -2420,8 +2397,17 @@ class Checkbox extends SvelteElement {
 		flush();
 	}
 
+	get id() {
+		return this.$$.ctx[0];
+	}
+
+	set id(id) {
+		this.$$set({ id });
+		flush();
+	}
+
 	get text() {
-		return this.$$.ctx[1];
+		return this.$$.ctx[2];
 	}
 
 	set text(text) {
@@ -2430,7 +2416,7 @@ class Checkbox extends SvelteElement {
 	}
 
 	get value() {
-		return this.$$.ctx[2];
+		return this.$$.ctx[3];
 	}
 
 	set value(value) {
@@ -2439,7 +2425,7 @@ class Checkbox extends SvelteElement {
 	}
 
 	get checked() {
-		return this.$$.ctx[9];
+		return this.$$.ctx[10];
 	}
 
 	set checked(checked) {
@@ -2448,7 +2434,7 @@ class Checkbox extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[10];
+		return this.$$.ctx[11];
 	}
 
 	set disabled(disabled) {
@@ -2456,21 +2442,21 @@ class Checkbox extends SvelteElement {
 		flush();
 	}
 
-	get indeterminate() {
-		return this.$$.ctx[11];
+	get error() {
+		return this.$$.ctx[12];
 	}
 
-	set indeterminate(indeterminate) {
-		this.$$set({ indeterminate });
+	set error(error) {
+		this.$$set({ error });
 		flush();
 	}
 
-	get error() {
-		return this.$$.ctx[12];
+	get testid() {
+		return this.$$.ctx[4];
 	}
 
-	set error(error) {
-		this.$$set({ error });
+	set testid(testid) {
+		this.$$set({ testid });
 		flush();
 	}
 }
@@ -5279,6 +5265,7 @@ function create_if_block$6(ctx) {
 	let div2;
 	let div3_intro;
 	let div3_outro;
+	let div4_style_value;
 	let noscroll_action;
 	let div4_intro;
 	let div4_outro;
@@ -5286,10 +5273,10 @@ function create_if_block$6(ctx) {
 	let mounted;
 	let dispose;
 	let if_block0 = /*title*/ ctx[0] && create_if_block_3$1(ctx);
-	let if_block1 = /*isClosable*/ ctx[4] && create_if_block_2$2();
+	let if_block1 = /*isClosable*/ ctx[5] && create_if_block_2$2();
 
 	function select_block_type(ctx, dirty) {
-		if (/*isScrollable*/ ctx[3]) return create_if_block_1$4;
+		if (/*isScrollable*/ ctx[4]) return create_if_block_1$4;
 		return create_else_block$2;
 	}
 
@@ -5318,7 +5305,7 @@ function create_if_block$6(ctx) {
 			attr(div2, "class", "modal-actions");
 			attr(div3, "class", "modal-pane");
 			attr(div4, "class", "modal");
-			set_style(div4, "--scroll-offset", /*scrollOffset*/ ctx[2] + "px");
+			attr(div4, "style", div4_style_value = "--scroll-offset: " + /*scrollOffset*/ ctx[3] + "px; " + (/*width*/ ctx[1] && `--width: ${/*width*/ ctx[1]};`) + ";");
 		},
 		m(target, anchor) {
 			insert(target, div4, anchor);
@@ -5340,7 +5327,7 @@ function create_if_block$6(ctx) {
 			if (!mounted) {
 				dispose = [
 					listen(div0, "click", close),
-					action_destroyer(noscroll_action = noScroll.call(null, div4, { enable: /*isOpen*/ ctx[1] }))
+					action_destroyer(noscroll_action = noScroll.call(null, div4, { enable: /*isOpen*/ ctx[2] }))
 				];
 
 				mounted = true;
@@ -5360,7 +5347,7 @@ function create_if_block$6(ctx) {
 				if_block0 = null;
 			}
 
-			if (/*isClosable*/ ctx[4]) {
+			if (/*isClosable*/ ctx[5]) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
@@ -5383,11 +5370,11 @@ function create_if_block$6(ctx) {
 				}
 			}
 
-			if (!current || dirty & /*scrollOffset*/ 4) {
-				set_style(div4, "--scroll-offset", /*scrollOffset*/ ctx[2] + "px");
+			if (!current || dirty & /*scrollOffset, width*/ 10 && div4_style_value !== (div4_style_value = "--scroll-offset: " + /*scrollOffset*/ ctx[3] + "px; " + (/*width*/ ctx[1] && `--width: ${/*width*/ ctx[1]};`) + ";")) {
+				attr(div4, "style", div4_style_value);
 			}
 
-			if (noscroll_action && is_function(noscroll_action.update) && dirty & /*isOpen*/ 2) noscroll_action.update.call(null, { enable: /*isOpen*/ ctx[1] });
+			if (noscroll_action && is_function(noscroll_action.update) && dirty & /*isOpen*/ 4) noscroll_action.update.call(null, { enable: /*isOpen*/ ctx[2] });
 		},
 		i(local) {
 			if (current) return;
@@ -5426,7 +5413,7 @@ function create_if_block$6(ctx) {
 	};
 }
 
-// (38:6) {#if title}
+// (45:6) {#if title}
 function create_if_block_3$1(ctx) {
 	let div;
 	let t;
@@ -5450,7 +5437,7 @@ function create_if_block_3$1(ctx) {
 	};
 }
 
-// (41:6) {#if isClosable}
+// (48:6) {#if isClosable}
 function create_if_block_2$2(ctx) {
 	let div;
 	let goa_icon_button;
@@ -5482,7 +5469,7 @@ function create_if_block_2$2(ctx) {
 	};
 }
 
-// (51:8) {:else}
+// (58:8) {:else}
 function create_else_block$2(ctx) {
 	let div;
 
@@ -5501,7 +5488,7 @@ function create_else_block$2(ctx) {
 	};
 }
 
-// (47:8) {#if isScrollable}
+// (54:8) {#if isScrollable}
 function create_if_block_1$4(ctx) {
 	let goa_scrollable;
 
@@ -5525,7 +5512,7 @@ function create_if_block_1$4(ctx) {
 function create_fragment$b(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*isOpen*/ ctx[1] && create_if_block$6(ctx);
+	let if_block = /*isOpen*/ ctx[2] && create_if_block$6(ctx);
 
 	return {
 		c() {
@@ -5539,11 +5526,11 @@ function create_fragment$b(ctx) {
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (/*isOpen*/ ctx[1]) {
+			if (/*isOpen*/ ctx[2]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
-					if (dirty & /*isOpen*/ 2) {
+					if (dirty & /*isOpen*/ 4) {
 						transition_in(if_block, 1);
 					}
 				} else {
@@ -5587,37 +5574,38 @@ function instance$a($$self, $$props, $$invalidate) {
 	let isClosable;
 	let isScrollable;
 	let isOpen;
-	console.log('here');
 	let { title } = $$props;
 	let { closable } = $$props;
 	let { scrollable } = $$props;
 	let { open } = $$props;
+	let { width } = $$props;
 	let scrollOffset = 0;
 
 	$$self.$$set = $$props => {
 		if ('title' in $$props) $$invalidate(0, title = $$props.title);
-		if ('closable' in $$props) $$invalidate(5, closable = $$props.closable);
-		if ('scrollable' in $$props) $$invalidate(6, scrollable = $$props.scrollable);
-		if ('open' in $$props) $$invalidate(7, open = $$props.open);
+		if ('closable' in $$props) $$invalidate(6, closable = $$props.closable);
+		if ('scrollable' in $$props) $$invalidate(7, scrollable = $$props.scrollable);
+		if ('open' in $$props) $$invalidate(8, open = $$props.open);
+		if ('width' in $$props) $$invalidate(1, width = $$props.width);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*closable*/ 32) {
-			$$invalidate(4, isClosable = toBoolean(closable));
+		if ($$self.$$.dirty & /*closable*/ 64) {
+			$$invalidate(5, isClosable = toBoolean(closable));
 		}
 
-		if ($$self.$$.dirty & /*scrollable*/ 64) {
-			$$invalidate(3, isScrollable = toBoolean(scrollable));
+		if ($$self.$$.dirty & /*scrollable*/ 128) {
+			$$invalidate(4, isScrollable = toBoolean(scrollable));
 		}
 
-		if ($$self.$$.dirty & /*open*/ 128) {
-			$$invalidate(1, isOpen = toBoolean(open));
+		if ($$self.$$.dirty & /*open*/ 256) {
+			$$invalidate(2, isOpen = toBoolean(open));
 		}
 
-		if ($$self.$$.dirty & /*isOpen*/ 2) {
+		if ($$self.$$.dirty & /*isOpen*/ 4) {
 			{
 				if (isOpen) {
-					$$invalidate(2, scrollOffset = window.pageYOffset);
+					$$invalidate(3, scrollOffset = window.pageYOffset);
 				}
 			}
 		}
@@ -5625,6 +5613,7 @@ function instance$a($$self, $$props, $$invalidate) {
 
 	return [
 		title,
+		width,
 		isOpen,
 		scrollOffset,
 		isScrollable,
@@ -5638,7 +5627,7 @@ function instance$a($$self, $$props, $$invalidate) {
 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;max-width:60ch;margin:1rem;box-shadow:var(--shadow-2);border-radius:4px;width:90%;max-height:90%}@media(min-width: 640px){.modal-pane{margin:1rem;max-height:80%;width:600px}}@media(min-width: 1024px){.modal-pane{width:65ch;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;max-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>`;
 
 		init(
 			this,
@@ -5652,9 +5641,10 @@ class Modal extends SvelteElement {
 			safe_not_equal,
 			{
 				title: 0,
-				closable: 5,
-				scrollable: 6,
-				open: 7
+				closable: 6,
+				scrollable: 7,
+				open: 8,
+				width: 1
 			},
 			null
 		);
@@ -5672,7 +5662,7 @@ class Modal extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["title", "closable", "scrollable", "open"];
+		return ["title", "closable", "scrollable", "open", "width"];
 	}
 
 	get title() {
@@ -5685,7 +5675,7 @@ class Modal extends SvelteElement {
 	}
 
 	get closable() {
-		return this.$$.ctx[5];
+		return this.$$.ctx[6];
 	}
 
 	set closable(closable) {
@@ -5694,7 +5684,7 @@ class Modal extends SvelteElement {
 	}
 
 	get scrollable() {
-		return this.$$.ctx[6];
+		return this.$$.ctx[7];
 	}
 
 	set scrollable(scrollable) {
@@ -5703,13 +5693,22 @@ class Modal extends SvelteElement {
 	}
 
 	get open() {
-		return this.$$.ctx[7];
+		return this.$$.ctx[8];
 	}
 
 	set open(open) {
 		this.$$set({ open });
 		flush();
 	}
+
+	get width() {
+		return this.$$.ctx[1];
+	}
+
+	set width(width) {
+		this.$$set({ width });
+		flush();
+	}
 }
 
 customElements.define("goa-modal", Modal);