@abgov/web-components 1.0.0-alpha.155 → 1.0.0-alpha.157

package/web-components.es.js

@@ -1303,7 +1303,7 @@ customElements.define("goa-accordion", Accordion);
 
 /* libs/web-components/src/components/app-header/AppHeader.svelte generated by Svelte v3.51.0 */
 
-function create_else_block$5(ctx) {
+function create_else_block$6(ctx) {
 	let div;
 	let img0;
 	let img0_src_value;
@@ -1412,7 +1412,7 @@ function create_fragment$I(ctx) {
 
 	function select_block_type(ctx, dirty) {
 		if (/*url*/ ctx[1]) return create_if_block$j;
-		return create_else_block$5;
+		return create_else_block$6;
 	}
 
 	let current_block_type = select_block_type(ctx);
@@ -1566,7 +1566,7 @@ customElements.define("goa-app-header", AppHeader);
 
 /* libs/web-components/src/components/badge/Badge.svelte generated by Svelte v3.51.0 */
 
-function create_else_block$4(ctx) {
+function create_else_block$5(ctx) {
 	let div;
 
 	return {
@@ -1641,7 +1641,7 @@ function create_fragment$H(ctx) {
 
 	function select_block_type(ctx, dirty) {
 		if (/*showIcon*/ ctx[7]) return create_if_block_1$a;
-		return create_else_block$4;
+		return create_else_block$5;
 	}
 
 	let current_block_type = select_block_type(ctx);
@@ -2067,7 +2067,7 @@ customElements.define("goa-block", Block);
 
 /* libs/web-components/src/components/button/Button.svelte generated by Svelte v3.51.0 */
 
-function create_else_block$3(ctx) {
+function create_else_block$4(ctx) {
 	let t0;
 	let span;
 	let t1;
@@ -2230,7 +2230,7 @@ function create_fragment$F(ctx) {
 
 	function select_block_type(ctx, dirty) {
 		if (/*type*/ ctx[0] === "start") return create_if_block$h;
-		return create_else_block$3;
+		return create_else_block$4;
 	}
 
 	let current_block_type = select_block_type(ctx);
@@ -4361,11 +4361,9 @@ function noscroll(_node, opts) {
       return;
     }
     const scrollbarWidth = calculateScrollbarWidth();
-    if (scrollbarWidth > 0) {
-      toggledScrolling = true;
-      document.body.style.overflow = "hidden";
-      document.body.style.paddingRight = scrollbarWidth + "px";
-    }
+    toggledScrolling = true;
+    document.body.style.overflow = "hidden";
+    document.body.style.paddingRight = scrollbarWidth + "px";
   }
   function isScrollable() {
     return document.body.style.overflow !== "hidden";
@@ -4503,7 +4501,7 @@ function create_if_block_3$4(ctx) {
 	let goa_spinner;
 	let t;
 	let div_class_value;
-	let if_block = /*message*/ ctx[0] && create_if_block_4$2(ctx);
+	let if_block = /*message*/ ctx[0] && create_if_block_4$1(ctx);
 
 	return {
 		c() {
@@ -4535,7 +4533,7 @@ function create_if_block_3$4(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block_4$2(ctx);
+					if_block = create_if_block_4$1(ctx);
 					if_block.c();
 					if_block.m(div, null);
 				}
@@ -4646,7 +4644,7 @@ function create_if_block_1$6(ctx) {
 }
 
 // (46:6) {#if message}
-function create_if_block_4$2(ctx) {
+function create_if_block_4$1(ctx) {
 	let div;
 	let t;
 
@@ -5460,7 +5458,7 @@ function get_each_context$4(ctx, list, i) {
 }
 
 // (256:2) {:else}
-function create_else_block$2(ctx) {
+function create_else_block$3(ctx) {
 	let t0;
 	let goa_input;
 	let goa_input_arialabel_value;
@@ -5906,7 +5904,7 @@ function create_fragment$r(ctx) {
 
 	function select_block_type(ctx, dirty) {
 		if (/*_native*/ ctx[22]) return create_if_block$c;
-		return create_else_block$2;
+		return create_else_block$3;
 	}
 
 	let current_block_type = select_block_type(ctx);
@@ -6589,7 +6587,6 @@ function create_fragment$p(ctx) {
   <span tabindex="0"></span>`;
 
 			this.c = noop;
-			attr(div, "id", "root");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -6635,7 +6632,7 @@ function instance$n($$self, $$props, $$invalidate) {
 	let { active } = $$props;
 	let ignoreFocusChanges = false;
 	let lastFocus;
-	let element;
+	let rootEl;
 	let hasListeners = false;
 
 	function removeListeners() {
@@ -6723,9 +6720,7 @@ function instance$n($$self, $$props, $$invalidate) {
 
 		try {
 			ignoreFocusChanges = true;
-			element.focus();
-		} catch(e) {
-			
+			element && element.focus();
 		} finally {
 			ignoreFocusChanges = false;
 		}
@@ -6737,7 +6732,7 @@ function instance$n($$self, $$props, $$invalidate) {
 		var _a;
 		if (ignoreFocusChanges) return;
 
-		const slotElements = (_a = element.firstChild) === null || _a === void 0
+		const slotElements = (_a = rootEl.firstChild) === null || _a === void 0
 		? void 0
 		: _a.assignedElements();
 
@@ -6763,8 +6758,8 @@ function instance$n($$self, $$props, $$invalidate) {
 
 	function div_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
-			element = $$value;
-			$$invalidate(0, element);
+			rootEl = $$value;
+			$$invalidate(0, rootEl);
 		});
 	}
 
@@ -6792,13 +6787,13 @@ function instance$n($$self, $$props, $$invalidate) {
 		}
 	};
 
-	return [element, active, hasListeners, isActive, div_binding];
+	return [rootEl, active, hasListeners, isActive, div_binding];
 }
 
 class FocusTrap extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>#root{display:inline}</style>`;
+		this.shadowRoot.innerHTML = `<style>div{display:inline}</style>`;
 
 		init(
 			this,
@@ -8908,7 +8903,7 @@ customElements.define("goa-icon", Icon);
 
 /* libs/web-components/src/components/input/Input.svelte generated by Svelte v3.51.0 */
 
-function create_if_block_4$1(ctx) {
+function create_if_block_4(ctx) {
 	let div;
 	let t;
 
@@ -9066,7 +9061,7 @@ function create_fragment$g(ctx) {
 	let div3_style_value;
 	let mounted;
 	let dispose;
-	let if_block0 = /*prefix*/ ctx[14] && create_if_block_4$1(ctx);
+	let if_block0 = /*prefix*/ ctx[14] && create_if_block_4(ctx);
 	let if_block1 = /*leadingicon*/ ctx[5] && create_if_block_3$2(ctx);
 	let if_block2 = /*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[24] && create_if_block_2$3(ctx);
 	let if_block3 = /*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[24] && create_if_block_1$3(ctx);
@@ -9161,7 +9156,7 @@ function create_fragment$g(ctx) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_4$1(ctx);
+					if_block0 = create_if_block_4(ctx);
 					if_block0.c();
 					if_block0.m(div2, t0);
 				}
@@ -10180,98 +10175,108 @@ customElements.define("goa-microsite-header", MicrositeHeader);
 
 function create_if_block$5(ctx) {
 	let goa_focus_trap;
-	let div5;
+	let div6;
 	let div0;
 	let t0;
-	let div4;
+	let div5;
 	let t1;
-	let div3;
+	let div4;
+	let header;
+	let div1;
 	let t2;
 	let t3;
-	let div1;
-	let t4;
-	let slot0;
-	let t5;
 	let div2;
-	let div4_intro;
-	let div4_outro;
-	let div5_style_value;
-	let noscroll_action;
+	let goa_scrollable;
+	let t4;
+	let div3;
 	let div5_intro;
 	let div5_outro;
+	let div6_style_value;
+	let noscroll_action;
+	let div6_intro;
+	let div6_outro;
 	let current;
 	let mounted;
 	let dispose;
-	let if_block0 = /*calloutvariant*/ ctx[3] !== null && create_if_block_4(ctx);
-	let if_block1 = /*heading*/ ctx[0] && create_if_block_3(ctx);
-	let if_block2 = /*isClosable*/ ctx[4] && create_if_block_2$1(ctx);
+	let if_block0 = /*calloutvariant*/ ctx[3] !== null && create_if_block_3(ctx);
 
 	function select_block_type(ctx, dirty) {
-		return create_if_block_1$1;
+		if (/*heading*/ ctx[0]) return create_if_block_2$1;
+		return create_else_block$2;
 	}
 
-	let current_block_type = select_block_type();
-	let if_block3 = current_block_type(ctx);
+	let current_block_type = select_block_type(ctx);
+	let if_block1 = current_block_type(ctx);
+	let if_block2 = /*_isClosable*/ ctx[7] && create_if_block_1$1(ctx);
 
 	return {
 		c() {
 			goa_focus_trap = element("goa-focus-trap");
-			div5 = element("div");
+			div6 = element("div");
 			div0 = element("div");
 			t0 = space();
-			div4 = element("div");
+			div5 = element("div");
 			if (if_block0) if_block0.c();
 			t1 = space();
-			div3 = element("div");
-			if (if_block1) if_block1.c();
+			div4 = element("div");
+			header = element("header");
+			div1 = element("div");
+			if_block1.c();
 			t2 = space();
 			if (if_block2) if_block2.c();
 			t3 = space();
-			div1 = element("div");
-			if_block3.c();
-			t4 = space();
-			slot0 = element("slot");
-			t5 = space();
 			div2 = element("div");
-			div2.innerHTML = `<slot name="actions"></slot>`;
+			goa_scrollable = element("goa-scrollable");
+			goa_scrollable.innerHTML = `<slot></slot>`;
+			t4 = space();
+			div3 = element("div");
+			div3.innerHTML = `<slot name="actions"></slot>`;
 			attr(div0, "data-testid", "modal-overlay");
 			attr(div0, "class", "modal-overlay");
-			attr(div1, "data-testid", "modal-content");
-			attr(div1, "class", "modal-content");
-			attr(div2, "class", "modal-actions");
-			attr(div2, "data-testid", "modal-actions");
-			attr(div3, "class", "content");
-			attr(div4, "class", "modal-pane");
-			attr(div5, "data-testid", "modal");
-			attr(div5, "class", "modal");
-			attr(div5, "style", div5_style_value = "" + ((/*width*/ ctx[2] && `--width: ${/*width*/ ctx[2]};`) + ";"));
+			attr(div1, "data-testid", "modal-title");
+			attr(div1, "class", "modal-title");
+			set_custom_element_data(goa_scrollable, "direction", "vertical");
+			set_custom_element_data(goa_scrollable, "hpadding", "1.9rem");
+			set_custom_element_data(goa_scrollable, "maxheight", "70vh");
+			attr(div2, "data-testid", "modal-content");
+			attr(div2, "class", "modal-content");
+			attr(div3, "class", "modal-actions");
+			attr(div3, "data-testid", "modal-actions");
+			attr(div4, "class", "content");
+			attr(div5, "class", "modal-pane");
+			attr(div6, "data-testid", "modal");
+			attr(div6, "class", "modal");
+			attr(div6, "style", div6_style_value = /*width*/ ctx[2] && `--width: ${/*width*/ ctx[2]};`);
 			set_custom_element_data(goa_focus_trap, "active", /*open*/ ctx[1]);
 		},
 		m(target, anchor) {
 			insert(target, goa_focus_trap, anchor);
-			append(goa_focus_trap, div5);
-			append(div5, div0);
-			append(div5, t0);
+			append(goa_focus_trap, div6);
+			append(div6, div0);
+			append(div6, t0);
+			append(div6, div5);
+			if (if_block0) if_block0.m(div5, null);
+			append(div5, t1);
 			append(div5, div4);
-			if (if_block0) if_block0.m(div4, null);
-			append(div4, t1);
+			append(div4, header);
+			append(header, div1);
+			if_block1.m(div1, null);
+			append(header, t2);
+			if (if_block2) if_block2.m(header, null);
+			append(div4, t3);
+			append(div4, div2);
+			append(div2, goa_scrollable);
+			/*goa_scrollable_binding*/ ctx[14](goa_scrollable);
+			/*div2_binding*/ ctx[15](div2);
+			append(div4, t4);
 			append(div4, div3);
-			if (if_block1) if_block1.m(div3, null);
-			append(div3, t2);
-			if (if_block2) if_block2.m(div3, null);
-			append(div3, t3);
-			append(div3, div1);
-			if_block3.m(div1, null);
-			append(div1, t4);
-			append(div1, slot0);
-			append(div3, t5);
-			append(div3, div2);
 			current = true;
 
 			if (!mounted) {
 				dispose = [
-					listen(div0, "click", /*close*/ ctx[8]),
-					action_destroyer(noscroll_action = noscroll.call(null, div5, { enable: /*isOpen*/ ctx[7] }))
+					listen(div0, "click", /*close*/ ctx[10]),
+					listen(goa_scrollable, "_scroll", /*handleScroll*/ ctx[11]),
+					action_destroyer(noscroll_action = noscroll.call(null, div6, { enable: /*_isOpen*/ ctx[6] }))
 				];
 
 				mounted = true;
@@ -10284,46 +10289,45 @@ function create_if_block$5(ctx) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_4(ctx);
+					if_block0 = create_if_block_3(ctx);
 					if_block0.c();
-					if_block0.m(div4, t1);
+					if_block0.m(div5, t1);
 				}
 			} else if (if_block0) {
 				if_block0.d(1);
 				if_block0 = null;
 			}
 
-			if (/*heading*/ ctx[0]) {
+			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block1) {
+				if_block1.p(ctx, dirty);
+			} else {
+				if_block1.d(1);
+				if_block1 = current_block_type(ctx);
+
 				if (if_block1) {
-					if_block1.p(ctx, dirty);
-				} else {
-					if_block1 = create_if_block_3(ctx);
 					if_block1.c();
-					if_block1.m(div3, t2);
+					if_block1.m(div1, null);
 				}
-			} else if (if_block1) {
-				if_block1.d(1);
-				if_block1 = null;
 			}
 
-			if (/*isClosable*/ ctx[4]) {
+			if (/*_isClosable*/ ctx[7]) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
-					if_block2 = create_if_block_2$1(ctx);
+					if_block2 = create_if_block_1$1(ctx);
 					if_block2.c();
-					if_block2.m(div3, t3);
+					if_block2.m(header, null);
 				}
 			} else if (if_block2) {
 				if_block2.d(1);
 				if_block2 = null;
 			}
 
-			if (!current || dirty & /*width*/ 4 && div5_style_value !== (div5_style_value = "" + ((/*width*/ ctx[2] && `--width: ${/*width*/ ctx[2]};`) + ";"))) {
-				attr(div5, "style", div5_style_value);
+			if (!current || dirty & /*width*/ 4 && div6_style_value !== (div6_style_value = /*width*/ ctx[2] && `--width: ${/*width*/ ctx[2]};`)) {
+				attr(div6, "style", div6_style_value);
 			}
 
-			if (noscroll_action && is_function(noscroll_action.update) && dirty & /*isOpen*/ 128) noscroll_action.update.call(null, { enable: /*isOpen*/ ctx[7] });
+			if (noscroll_action && is_function(noscroll_action.update) && dirty & /*_isOpen*/ 64) noscroll_action.update.call(null, { enable: /*_isOpen*/ ctx[6] });
 
 			if (!current || dirty & /*open*/ 2) {
 				set_custom_element_data(goa_focus_trap, "active", /*open*/ ctx[1]);
@@ -10333,38 +10337,38 @@ function create_if_block$5(ctx) {
 			if (current) return;
 
 			add_render_callback(() => {
-				if (div4_outro) div4_outro.end(1);
+				if (div5_outro) div5_outro.end(1);
 
-				div4_intro = create_in_transition(div4, fly, {
-					duration: /*_transitionTime*/ ctx[6],
+				div5_intro = create_in_transition(div5, fly, {
+					duration: /*_transitionTime*/ ctx[9],
 					y: 200
 				});
 
-				div4_intro.start();
+				div5_intro.start();
 			});
 
 			add_render_callback(() => {
-				if (div5_outro) div5_outro.end(1);
-				div5_intro = create_in_transition(div5, fade, { duration: /*_transitionTime*/ ctx[6] });
-				div5_intro.start();
+				if (div6_outro) div6_outro.end(1);
+				div6_intro = create_in_transition(div6, fade, { duration: /*_transitionTime*/ ctx[9] });
+				div6_intro.start();
 			});
 
 			current = true;
 		},
 		o(local) {
-			if (div4_intro) div4_intro.invalidate();
+			if (div5_intro) div5_intro.invalidate();
 
-			div4_outro = create_out_transition(div4, fly, {
-				delay: /*_transitionTime*/ ctx[6],
-				duration: /*_transitionTime*/ ctx[6],
+			div5_outro = create_out_transition(div5, fly, {
+				delay: /*_transitionTime*/ ctx[9],
+				duration: /*_transitionTime*/ ctx[9],
 				y: -100
 			});
 
-			if (div5_intro) div5_intro.invalidate();
+			if (div6_intro) div6_intro.invalidate();
 
-			div5_outro = create_out_transition(div5, fade, {
-				delay: /*_transitionTime*/ ctx[6],
-				duration: /*_transitionTime*/ ctx[6]
+			div6_outro = create_out_transition(div6, fade, {
+				delay: /*_transitionTime*/ ctx[9],
+				duration: /*_transitionTime*/ ctx[9]
 			});
 
 			current = false;
@@ -10372,19 +10376,20 @@ function create_if_block$5(ctx) {
 		d(detaching) {
 			if (detaching) detach(goa_focus_trap);
 			if (if_block0) if_block0.d();
-			if (if_block1) if_block1.d();
+			if_block1.d();
 			if (if_block2) if_block2.d();
-			if_block3.d();
-			if (detaching && div4_outro) div4_outro.end();
+			/*goa_scrollable_binding*/ ctx[14](null);
+			/*div2_binding*/ ctx[15](null);
 			if (detaching && div5_outro) div5_outro.end();
+			if (detaching && div6_outro) div6_outro.end();
 			mounted = false;
 			run_all(dispose);
 		}
 	};
 }
 
-// (67:8) {#if calloutvariant !== null}
-function create_if_block_4(ctx) {
+// (102:8) {#if calloutvariant !== null}
+function create_if_block_3(ctx) {
 	let div;
 	let goa_icon;
 	let goa_icon_inverted_value;
@@ -10394,7 +10399,7 @@ function create_if_block_4(ctx) {
 		c() {
 			div = element("div");
 			goa_icon = element("goa-icon");
-			set_custom_element_data(goa_icon, "type", /*iconType*/ ctx[5]);
+			set_custom_element_data(goa_icon, "type", /*_iconType*/ ctx[8]);
 
 			set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value = /*calloutvariant*/ ctx[3] === "important"
 			? "false"
@@ -10407,8 +10412,8 @@ function create_if_block_4(ctx) {
 			append(div, goa_icon);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*iconType*/ 32) {
-				set_custom_element_data(goa_icon, "type", /*iconType*/ ctx[5]);
+			if (dirty & /*_iconType*/ 256) {
+				set_custom_element_data(goa_icon, "type", /*_iconType*/ ctx[8]);
 			}
 
 			if (dirty & /*calloutvariant*/ 8 && goa_icon_inverted_value !== (goa_icon_inverted_value = /*calloutvariant*/ ctx[3] === "important"
@@ -10427,33 +10432,47 @@ function create_if_block_4(ctx) {
 	};
 }
 
-// (76:10) {#if heading}
-function create_if_block_3(ctx) {
-	let div;
+// (115:14) {:else}
+function create_else_block$2(ctx) {
+	let slot;
+
+	return {
+		c() {
+			slot = element("slot");
+			attr(slot, "name", "heading");
+		},
+		m(target, anchor) {
+			insert(target, slot, anchor);
+		},
+		p: noop,
+		d(detaching) {
+			if (detaching) detach(slot);
+		}
+	};
+}
+
+// (113:14) {#if heading}
+function create_if_block_2$1(ctx) {
 	let t;
 
 	return {
 		c() {
-			div = element("div");
 			t = text(/*heading*/ ctx[0]);
-			attr(div, "data-testid", "modal-title");
-			attr(div, "class", "modal-title");
 		},
 		m(target, anchor) {
-			insert(target, div, anchor);
-			append(div, t);
+			insert(target, t, anchor);
 		},
 		p(ctx, dirty) {
 			if (dirty & /*heading*/ 1) set_data(t, /*heading*/ ctx[0]);
 		},
 		d(detaching) {
-			if (detaching) detach(div);
+			if (detaching) detach(t);
 		}
 	};
 }
 
-// (79:10) {#if isClosable}
-function create_if_block_2$1(ctx) {
+// (119:12) {#if _isClosable}
+function create_if_block_1$1(ctx) {
 	let div;
 	let goa_icon_button;
 	let mounted;
@@ -10473,7 +10492,7 @@ function create_if_block_2$1(ctx) {
 			append(div, goa_icon_button);
 
 			if (!mounted) {
-				dispose = listen(goa_icon_button, "click", /*close*/ ctx[8]);
+				dispose = listen(goa_icon_button, "click", /*close*/ ctx[10]);
 				mounted = true;
 			}
 		},
@@ -10486,30 +10505,10 @@ function create_if_block_2$1(ctx) {
 	};
 }
 
-// (91:12) {#if isScrollable}
-function create_if_block_1$1(ctx) {
-	let goa_scrollable;
-
-	return {
-		c() {
-			goa_scrollable = element("goa-scrollable");
-			goa_scrollable.innerHTML = `<slot></slot>`;
-			set_custom_element_data(goa_scrollable, "direction", "vertical");
-			set_custom_element_data(goa_scrollable, "height", "50");
-		},
-		m(target, anchor) {
-			insert(target, goa_scrollable, anchor);
-		},
-		d(detaching) {
-			if (detaching) detach(goa_scrollable);
-		}
-	};
-}
-
 function create_fragment$e(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*isOpen*/ ctx[7] && create_if_block$5(ctx);
+	let if_block = /*_isOpen*/ ctx[6] && create_if_block$5(ctx);
 
 	return {
 		c() {
@@ -10523,11 +10522,11 @@ function create_fragment$e(ctx) {
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (/*isOpen*/ ctx[7]) {
+			if (/*_isOpen*/ ctx[6]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
-					if (dirty & /*isOpen*/ 128) {
+					if (dirty & /*_isOpen*/ 64) {
 						transition_in(if_block, 1);
 					}
 				} else {
@@ -10563,12 +10562,10 @@ function create_fragment$e(ctx) {
 }
 
 function instance$c($$self, $$props, $$invalidate) {
-	let isClosable;
-	let isOpen;
+	let _isClosable;
+	let _isOpen;
 	let _transitionTime;
-	let iconType;
-	const [CALLOUT_VARIANT, validateCalloutVariant] = typeValidator("Callout variant", ["emergency", "important", "information", "success", "event"]);
-	const [Transitions, validateTransition] = typeValidator("Modal transition", ["fast", "slow", "none"]);
+	let _iconType;
 	let { heading = "" } = $$props;
 	let { closable = "false" } = $$props;
 	let { open = "false" } = $$props;
@@ -10576,8 +10573,25 @@ function instance$c($$self, $$props, $$invalidate) {
 	let { width = "" } = $$props;
 	let { calloutvariant = null } = $$props;
 
+	// Private
+	let _contentEl = null;
+
+	let _scrollEl = null;
+
+	// Type verification
+	const [CALLOUT_VARIANT, validateCalloutVariant] = typeValidator("Callout variant", ["emergency", "important", "information", "success", "event"]);
+
+	const [Transitions, validateTransition] = typeValidator("Modal transition", ["fast", "slow", "none"]);
+
+	// Hooks
+	onMount(() => {
+		validateCalloutVariant(calloutvariant);
+		validateTransition(transition);
+	});
+
+	// Functions
 	function close(e) {
-		if (!isClosable) {
+		if (!_isClosable) {
 			return;
 		}
 
@@ -10585,37 +10599,82 @@ function instance$c($$self, $$props, $$invalidate) {
 		e.stopPropagation();
 	}
 
-	onMount(() => {
-		validateCalloutVariant(calloutvariant);
-		validateTransition(transition);
-	});
+	function handleScroll(e) {
+		const hasScroll = e.detail.scrollHeight > e.detail.offsetHeight;
+
+		if (_isOpen && hasScroll) {
+			const atTop = e.detail.scrollTop == 0;
+			const atBottom = Math.abs(e.detail.scrollHeight - e.detail.scrollTop - e.detail.offsetHeight) < 1;
+			_contentEl.classList.remove("scroll-top", "scroll-bottom", "scroll-middle");
+
+			if (atTop) {
+				_contentEl.classList.add("scroll-top");
+			} else if (atBottom) {
+				_contentEl.classList.add("scroll-bottom");
+			} else {
+				_contentEl.classList.add("scroll-middle");
+			}
+		}
+	}
+
+	function goa_scrollable_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			_scrollEl = $$value;
+			(($$invalidate(5, _scrollEl), $$invalidate(6, _isOpen)), $$invalidate(1, open));
+		});
+	}
+
+	function div2_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			_contentEl = $$value;
+			(($$invalidate(4, _contentEl), $$invalidate(6, _isOpen)), $$invalidate(1, open));
+		});
+	}
 
 	$$self.$$set = $$props => {
 		if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
-		if ('closable' in $$props) $$invalidate(9, closable = $$props.closable);
+		if ('closable' in $$props) $$invalidate(12, closable = $$props.closable);
 		if ('open' in $$props) $$invalidate(1, open = $$props.open);
-		if ('transition' in $$props) $$invalidate(10, transition = $$props.transition);
+		if ('transition' in $$props) $$invalidate(13, transition = $$props.transition);
 		if ('width' in $$props) $$invalidate(2, width = $$props.width);
 		if ('calloutvariant' in $$props) $$invalidate(3, calloutvariant = $$props.calloutvariant);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*closable*/ 512) {
-			$$invalidate(4, isClosable = toBoolean(closable));
+		if ($$self.$$.dirty & /*closable*/ 4096) {
+			// Reactive
+			$$invalidate(7, _isClosable = toBoolean(closable));
 		}
 
 		if ($$self.$$.dirty & /*open*/ 2) {
-			$$invalidate(7, isOpen = toBoolean(open));
+			$$invalidate(6, _isOpen = toBoolean(open));
 		}
 
-		if ($$self.$$.dirty & /*transition*/ 1024) {
-			$$invalidate(6, _transitionTime = transition === "none"
+		if ($$self.$$.dirty & /*_isOpen*/ 64) {
+			if (!_isOpen) {
+				// prevent null issues
+				$$invalidate(4, _contentEl = $$invalidate(5, _scrollEl = null));
+			}
+		}
+
+		if ($$self.$$.dirty & /*_isOpen, _scrollEl, _contentEl*/ 112) {
+			if (_isOpen && _scrollEl && _contentEl) {
+				const hasScroll = _scrollEl.scrollHeight > _scrollEl.offsetHeight;
+
+				if (hasScroll) {
+					_contentEl.classList.add("scroll-top");
+				}
+			}
+		}
+
+		if ($$self.$$.dirty & /*transition*/ 8192) {
+			$$invalidate(9, _transitionTime = transition === "none"
 			? 0
 			: transition === "slow" ? 400 : 200);
 		}
 
 		if ($$self.$$.dirty & /*calloutvariant*/ 8) {
-			$$invalidate(5, iconType = calloutvariant === "emergency"
+			$$invalidate(8, _iconType = calloutvariant === "emergency"
 			? "warning"
 			: calloutvariant === "important"
 				? "alert-circle"
@@ -10632,20 +10691,25 @@ function instance$c($$self, $$props, $$invalidate) {
 		open,
 		width,
 		calloutvariant,
-		isClosable,
-		iconType,
+		_contentEl,
+		_scrollEl,
+		_isOpen,
+		_isClosable,
+		_iconType,
 		_transitionTime,
-		isOpen,
 		close,
+		handleScroll,
 		closable,
-		transition
+		transition,
+		goa_scrollable_binding,
+		div2_binding
 	];
 }
 
 class Modal extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.modal{font-family:var(--goa-font-family-sans);position:fixed;inset: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}.emergency{background-color:var(--goa-color-emergency-default)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default)}.event{background-color:var(--goa-color-info-default)}.success{background-color:var(--goa-color-success-default)}.callout-bar{flex:0 0 3rem;text-align:center;padding-top:2rem;border-radius:4px 0px 0px 4px}.content{flex:1 1 auto;width:100%;margin:2rem 2rem}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;display:flex;margin:1rem;box-shadow:var(--goa-shadow-modal);border-radius:4px;max-height:90%;border:1px solid var(--goa-color-greyscale-700)}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch);max-height:80%}}.modal-actions ::slotted(div){margin:1.5rem 0 0}.modal-content ::slotted(:last-child){margin-bottom:0 !important}.modal-close{position:absolute;top:2rem;right:2rem}.modal-title{font-size:var(--goa-font-size-7);margin:0 0 1.5rem;margin-right:40px;flex:0 0 auto}.modal-content{line-height:1.75rem}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}:host *{box-sizing:border-box}.modal{font-family:var(--goa-font-family-sans);position:fixed;inset: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}.emergency{background-color:var(--goa-color-emergency-default)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default)}.event{background-color:var(--goa-color-info-default)}.success{background-color:var(--goa-color-success-default)}.callout-bar{flex:0 0 3rem;text-align:center;padding-top:2rem;border-radius:4px 0px 0px 4px}.content{flex:1 1 auto;width:100%;margin:2rem}.content header{display:flex;align-items:center;margin-bottom:2rem;justify-content:space-between}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;display:flex;box-shadow:var(--goa-shadow-modal);border-radius:4px;border:1px solid var(--goa-color-greyscale-700)}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch)}}.modal-actions ::slotted(*){padding:1.5rem 0 0}.modal-content{margin:0 -2rem;line-height:1.75rem}.modal-content ::slotted(:last-child){margin-bottom:0 !important}.modal-title{font-size:var(--goa-font-size-7);flex:0 0 auto}.scroll-top{box-shadow:inset 0px -8px 6px -6px rgba(0, 0, 0, 0.1)}.scroll-middle{box-shadow:inset 0px -8px 6px -6px rgba(0, 0, 0, 0.1), inset 0px 8px 6px -6px rgba(0, 0, 0, 0.1)}.scroll-bottom{box-shadow:inset 0px 8px 6px -6px rgba(0, 0, 0, 0.1)}</style>`;
 
 		init(
 			this,
@@ -10659,9 +10723,9 @@ class Modal extends SvelteElement {
 			safe_not_equal,
 			{
 				heading: 0,
-				closable: 9,
+				closable: 12,
 				open: 1,
-				transition: 10,
+				transition: 13,
 				width: 2,
 				calloutvariant: 3
 			},
@@ -10694,7 +10758,7 @@ class Modal extends SvelteElement {
 	}
 
 	get closable() {
-		return this.$$.ctx[9];
+		return this.$$.ctx[12];
 	}
 
 	set closable(closable) {
@@ -10712,7 +10776,7 @@ class Modal extends SvelteElement {
 	}
 
 	get transition() {
-		return this.$$.ctx[10];
+		return this.$$.ctx[13];
 	}
 
 	set transition(transition) {
@@ -11999,6 +12063,8 @@ function create_fragment$9(ctx) {
 	let div;
 	let slot;
 	let div_style_value;
+	let mounted;
+	let dispose;
 
 	return {
 		c() {
@@ -12008,28 +12074,34 @@ function create_fragment$9(ctx) {
 			attr(div, "class", "goa-scrollable");
 
 			attr(div, "style", div_style_value = `
-  --max-height: ${/*height*/ ctx[3]};
+  max-height: ${/*maxheight*/ ctx[3] || "50vh"};
   overflow-y: ${/*direction*/ ctx[0] === "vertical" ? 'auto' : 'hidden'};
   overflow-x: ${/*direction*/ ctx[0] === "horizontal"
 			? 'auto'
 			: 'hidden'};
-  margin: ${/*vpadding*/ ctx[2]}rem 0;
-  padding: 0 ${/*hpadding*/ ctx[1]}rem;
+  margin: ${/*vpadding*/ ctx[2]} 0;
+  padding: 0 ${/*hpadding*/ ctx[1]};
 `);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
 			append(div, slot);
+			/*div_binding*/ ctx[8](div);
+
+			if (!mounted) {
+				dispose = listen(div, "scroll", /*onScroll*/ ctx[5]);
+				mounted = true;
+			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*height, direction, vpadding, hpadding*/ 15 && div_style_value !== (div_style_value = `
-  --max-height: ${/*height*/ ctx[3]};
+			if (dirty & /*maxheight, direction, vpadding, hpadding*/ 15 && div_style_value !== (div_style_value = `
+  max-height: ${/*maxheight*/ ctx[3] || "50vh"};
   overflow-y: ${/*direction*/ ctx[0] === "vertical" ? 'auto' : 'hidden'};
   overflow-x: ${/*direction*/ ctx[0] === "horizontal"
 			? 'auto'
 			: 'hidden'};
-  margin: ${/*vpadding*/ ctx[2]}rem 0;
-  padding: 0 ${/*hpadding*/ ctx[1]}rem;
+  margin: ${/*vpadding*/ ctx[2]} 0;
+  padding: 0 ${/*hpadding*/ ctx[1]};
 `)) {
 				attr(div, "style", div_style_value);
 			}
@@ -12038,30 +12110,76 @@ function create_fragment$9(ctx) {
 		o: noop,
 		d(detaching) {
 			if (detaching) detach(div);
+			/*div_binding*/ ctx[8](null);
+			mounted = false;
+			dispose();
 		}
 	};
 }
 
 function instance$7($$self, $$props, $$invalidate) {
 	let { direction = "vertical" } = $$props;
-	let { hpadding = 0 } = $$props;
-	let { vpadding = 0 } = $$props;
-	let { height = 0 } = $$props;
+	let { hpadding = "" } = $$props;
+	let { vpadding = "" } = $$props;
+	let { maxheight = "" } = $$props;
+	let { offsetHeight } = $$props;
+	let { scrollHeight } = $$props;
+
+	// Private
+	let _el;
+
+	function onScroll(e) {
+		e.target.dispatchEvent(new CustomEvent("_scroll",
+		{
+				composed: true,
+				detail: {
+					offsetHeight: _el.offsetHeight,
+					scrollHeight: _el.scrollHeight,
+					scrollTop: _el.scrollTop
+				}
+			}));
+
+		e.stopPropagation();
+	}
+
+	onMount(() => {
+		$$invalidate(6, offsetHeight = _el.offsetHeight);
+		$$invalidate(7, scrollHeight = _el.scrollHeight);
+	});
+
+	function div_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			_el = $$value;
+			$$invalidate(4, _el);
+		});
+	}
 
 	$$self.$$set = $$props => {
 		if ('direction' in $$props) $$invalidate(0, direction = $$props.direction);
 		if ('hpadding' in $$props) $$invalidate(1, hpadding = $$props.hpadding);
 		if ('vpadding' in $$props) $$invalidate(2, vpadding = $$props.vpadding);
-		if ('height' in $$props) $$invalidate(3, height = $$props.height);
+		if ('maxheight' in $$props) $$invalidate(3, maxheight = $$props.maxheight);
+		if ('offsetHeight' in $$props) $$invalidate(6, offsetHeight = $$props.offsetHeight);
+		if ('scrollHeight' in $$props) $$invalidate(7, scrollHeight = $$props.scrollHeight);
 	};
 
-	return [direction, hpadding, vpadding, height];
+	return [
+		direction,
+		hpadding,
+		vpadding,
+		maxheight,
+		_el,
+		onScroll,
+		offsetHeight,
+		scrollHeight,
+		div_binding
+	];
 }
 
 class Scrollable extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>.goa-scrollable{scroll-behavior:smooth;max-height:calc(100vh * var(--max-height, 100) / 100)}.goa-scrollable::-webkit-scrollbar{width:6px}.goa-scrollable::-webkit-scrollbar-track{background:#f1f1f1}.goa-scrollable::-webkit-scrollbar-thumb{background:#888}.goa-scrollable::-webkit-scrollbar-thumb:hover{background:#555}</style>`;
+		this.shadowRoot.innerHTML = `<style>.goa-scrollable{scroll-behavior:smooth}.goa-scrollable::-webkit-scrollbar{width:6px}.goa-scrollable::-webkit-scrollbar-track{background:#f1f1f1}.goa-scrollable::-webkit-scrollbar-thumb{background:#888}.goa-scrollable::-webkit-scrollbar-thumb:hover{background:#555}</style>`;
 
 		init(
 			this,
@@ -12077,7 +12195,9 @@ class Scrollable extends SvelteElement {
 				direction: 0,
 				hpadding: 1,
 				vpadding: 2,
-				height: 3
+				maxheight: 3,
+				offsetHeight: 6,
+				scrollHeight: 7
 			},
 			null
 		);
@@ -12095,7 +12215,14 @@ class Scrollable extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["direction", "hpadding", "vpadding", "height"];
+		return [
+			"direction",
+			"hpadding",
+			"vpadding",
+			"maxheight",
+			"offsetHeight",
+			"scrollHeight"
+		];
 	}
 
 	get direction() {
@@ -12125,12 +12252,30 @@ class Scrollable extends SvelteElement {
 		flush();
 	}
 
-	get height() {
+	get maxheight() {
 		return this.$$.ctx[3];
 	}
 
-	set height(height) {
-		this.$$set({ height });
+	set maxheight(maxheight) {
+		this.$$set({ maxheight });
+		flush();
+	}
+
+	get offsetHeight() {
+		return this.$$.ctx[6];
+	}
+
+	set offsetHeight(offsetHeight) {
+		this.$$set({ offsetHeight });
+		flush();
+	}
+
+	get scrollHeight() {
+		return this.$$.ctx[7];
+	}
+
+	set scrollHeight(scrollHeight) {
+		this.$$set({ scrollHeight });
 		flush();
 	}
 }