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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/web-components",
-  "version": "1.0.0-alpha.62",
+  "version": "1.0.0-alpha.63",
   "description": "Government of Alberta - UI Web components",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/web-components.es.js

@@ -3849,11 +3849,12 @@ function create_if_block_1$8(ctx) {
 	};
 }
 
-// (26:2) {#if _deletable}
+// (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() {
@@ -3861,23 +3862,40 @@ function create_if_block$c(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();
 		}
 	};
 }
@@ -3887,8 +3905,10 @@ function create_fragment$l(ctx) {
 	let t0;
 	let t1;
 	let t2;
+	let mounted;
+	let dispose;
 	let if_block0 = /*leadingicon*/ ctx[0] && create_if_block_1$8(ctx);
-	let if_block1 = /*_deletable*/ ctx[2] && create_if_block$c();
+	let if_block1 = /*_deletable*/ ctx[5] && create_if_block$c(ctx);
 
 	return {
 		c() {
@@ -3899,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);
@@ -3909,6 +3932,19 @@ 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]) {
@@ -3926,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$c();
+					if_block1 = create_if_block$c(ctx);
 					if_block1.c();
 					if_block1.m(div, null);
 				}
@@ -3938,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,
@@ -3945,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,
@@ -3997,8 +4080,8 @@ class Chip extends SvelteElement {
 			safe_not_equal,
 			{
 				leadingicon: 0,
-				error: 3,
-				deletable: 4,
+				error: 7,
+				deletable: 8,
 				content: 1
 			},
 			null
@@ -4030,7 +4113,7 @@ class Chip extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[3];
+		return this.$$.ctx[7];
 	}
 
 	set error(error) {
@@ -4039,7 +4122,7 @@ class Chip extends SvelteElement {
 	}
 
 	get deletable() {
-		return this.$$.ctx[4];
+		return this.$$.ctx[8];
 	}
 
 	set deletable(deletable) {
@@ -5497,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);
@@ -5526,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,
@@ -5556,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"
@@ -5580,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,
@@ -5600,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
 		);
@@ -5622,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() {
@@ -5635,7 +5723,7 @@ class Icon extends SvelteElement {
 	}
 
 	get size() {
-		return this.$$.ctx[6];
+		return this.$$.ctx[7];
 	}
 
 	set size(size) {
@@ -5653,7 +5741,7 @@ class Icon extends SvelteElement {
 	}
 
 	get inverted() {
-		return this.$$.ctx[7];
+		return this.$$.ctx[8];
 	}
 
 	set inverted(inverted) {
@@ -5678,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);
@@ -6743,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";
@@ -6753,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) {
@@ -6813,7 +6910,7 @@ function create_if_block$7(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$5;
+		if (/*isScrollable*/ ctx[6]) return create_if_block_1$5;
 		return create_else_block$1;
 	}
 
@@ -6867,14 +6964,16 @@ function create_if_block$7(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);
@@ -6922,13 +7021,18 @@ function create_if_block$7(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();
 			});
 
@@ -6936,9 +7040,20 @@ function create_if_block$7(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) {
@@ -6954,7 +7069,7 @@ function create_if_block$7(ctx) {
 	};
 }
 
-// (54:6) {#if heading}
+// (60:6) {#if heading}
 function create_if_block_3$2(ctx) {
 	let div;
 	let t;
@@ -6979,7 +7094,7 @@ function create_if_block_3$2(ctx) {
 	};
 }
 
-// (57:6) {#if isClosable}
+// (63:6) {#if isClosable}
 function create_if_block_2$3(ctx) {
 	let div;
 	let goa_icon_button;
@@ -6999,7 +7114,7 @@ function create_if_block_2$3(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;
 			}
 		},
@@ -7012,7 +7127,7 @@ function create_if_block_2$3(ctx) {
 	};
 }
 
-// (71:8) {:else}
+// (77:8) {:else}
 function create_else_block$1(ctx) {
 	let div;
 
@@ -7031,7 +7146,7 @@ function create_else_block$1(ctx) {
 	};
 }
 
-// (67:8) {#if isScrollable}
+// (73:8) {#if isScrollable}
 function create_if_block_1$5(ctx) {
 	let goa_scrollable;
 
@@ -7112,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;
 
@@ -7130,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));
 		}
 
@@ -7156,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 [
@@ -7164,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,
@@ -7189,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
@@ -7210,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() {
@@ -7223,7 +7350,7 @@ class Modal extends SvelteElement {
 	}
 
 	get closable() {
-		return this.$$.ctx[7];
+		return this.$$.ctx[8];
 	}
 
 	set closable(closable) {
@@ -7232,7 +7359,7 @@ class Modal extends SvelteElement {
 	}
 
 	get scrollable() {
-		return this.$$.ctx[8];
+		return this.$$.ctx[9];
 	}
 
 	set scrollable(scrollable) {
@@ -7241,7 +7368,7 @@ class Modal extends SvelteElement {
 	}
 
 	get open() {
-		return this.$$.ctx[9];
+		return this.$$.ctx[10];
 	}
 
 	set open(open) {
@@ -7249,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];
 	}