@abgov/react-components 4.0.0-alpha.115 → 4.0.0-alpha.117

package/react-components.umd.js

@@ -1562,7 +1562,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;
@@ -1697,7 +1697,7 @@
 	    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);
@@ -1874,7 +1874,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 {
 	    c() {
@@ -1972,7 +1972,7 @@
 	    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);
@@ -2524,7 +2524,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;
@@ -2733,7 +2733,7 @@
 	    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);
@@ -5362,12 +5362,9 @@
 	    }
 
 	    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() {
@@ -5524,7 +5521,7 @@
 	  let div_class_value;
 	  let if_block =
 	  /*message*/
-	  ctx[0] && create_if_block_4$2(ctx);
+	  ctx[0] && create_if_block_4$1(ctx);
 	  return {
 	    c() {
 	      div = element("div");
@@ -5575,7 +5572,7 @@
 	        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);
 	        }
@@ -5728,7 +5725,7 @@
 	} // (46:6) {#if message}
 
 
-	function create_if_block_4$2(ctx) {
+	function create_if_block_4$1(ctx) {
 	  let div;
 	  let t;
 	  return {
@@ -6738,7 +6735,7 @@
 	} // (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;
@@ -7439,7 +7436,7 @@
 	    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);
@@ -8187,7 +8184,6 @@
   
   <span tabindex="0"></span>`;
 	      this.c = noop;
-	      attr(div, "id", "root");
 	    },
 
 	    m(target, anchor) {
@@ -8246,7 +8242,7 @@
 	  } = $$props;
 	  let ignoreFocusChanges = false;
 	  let lastFocus;
-	  let element;
+	  let rootEl;
 	  let hasListeners = false;
 
 	  function removeListeners() {
@@ -8332,8 +8328,8 @@
 
 	    try {
 	      ignoreFocusChanges = true;
-	      element.focus();
-	    } catch (e) {} finally {
+	      element && element.focus();
+	    } finally {
 	      ignoreFocusChanges = false;
 	    }
 
@@ -8344,7 +8340,7 @@
 	    var _a;
 
 	    if (ignoreFocusChanges) return;
-	    const slotElements = (_a = element.firstChild) === null || _a === void 0 ? void 0 : _a.assignedElements();
+	    const slotElements = (_a = rootEl.firstChild) === null || _a === void 0 ? void 0 : _a.assignedElements();
 	    if (!(slotElements === null || slotElements === void 0 ? void 0 : slotElements.length)) return;
 	    const contentRootElement = slotElements[0];
 
@@ -8364,8 +8360,8 @@
 
 	  function div_binding($$value) {
 	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
-	      element = $$value;
-	      $$invalidate(0, element);
+	      rootEl = $$value;
+	      $$invalidate(0, rootEl);
 	    });
 	  }
 
@@ -8397,13 +8393,13 @@
 	    }
 	  };
 
-	  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, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -10998,7 +10994,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;
 	  return {
@@ -11209,7 +11205,7 @@
 	  let dispose;
 	  let if_block0 =
 	  /*prefix*/
-	  ctx[14] && create_if_block_4$1(ctx);
+	  ctx[14] && create_if_block_4(ctx);
 	  let if_block1 =
 	  /*leadingicon*/
 	  ctx[5] && create_if_block_3$2(ctx);
@@ -11366,7 +11362,7 @@
 	        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);
 	        }
@@ -12580,80 +12576,87 @@
 
 	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);
+	  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 = "" + ((
+	      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]};`) + ";"));
+      ctx[2]};`);
 	      set_custom_element_data(goa_focus_trap, "active",
 	      /*open*/
 	      ctx[1]);
@@ -12661,32 +12664,40 @@
 
 	    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, {
+	        ctx[10]), listen(goa_scrollable, "_scroll",
+	        /*handleScroll*/
+	        ctx[11]), action_destroyer(noscroll_action = noscroll.call(null, div6, {
 	          enable:
-	          /*isOpen*/
-	          ctx[7]
+	          /*_isOpen*/
+	          ctx[6]
 	        }))];
 	        mounted = true;
 	      }
@@ -12701,39 +12712,36 @@
 	        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]) {
+	      /*_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);
@@ -12742,20 +12750,20 @@
 
 	      if (!current || dirty &
 	      /*width*/
-	      4 && div5_style_value !== (div5_style_value = "" + ((
+	      4 && div6_style_value !== (div6_style_value =
 	      /*width*/
 	      ctx[2] && `--width: ${
       /*width*/
-      ctx[2]};`) + ";"))) {
-	        attr(div5, "style", div5_style_value);
+      ctx[2]};`)) {
+	        attr(div6, "style", div6_style_value);
 	      }
 
 	      if (noscroll_action && is_function(noscroll_action.update) && dirty &
-	      /*isOpen*/
-	      128) noscroll_action.update.call(null, {
+	      /*_isOpen*/
+	      64) noscroll_action.update.call(null, {
 	        enable:
-	        /*isOpen*/
-	        ctx[7]
+	        /*_isOpen*/
+	        ctx[6]
 	      });
 
 	      if (!current || dirty &
@@ -12770,46 +12778,46 @@
 	    i(local) {
 	      if (current) return;
 	      add_render_callback(() => {
-	        if (div4_outro) div4_outro.end(1);
-	        div4_intro = create_in_transition(div4, fly, {
+	        if (div5_outro) div5_outro.end(1);
+	        div5_intro = create_in_transition(div5, fly, {
 	          duration:
 	          /*_transitionTime*/
-	          ctx[6],
+	          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, {
+	        if (div6_outro) div6_outro.end(1);
+	        div6_intro = create_in_transition(div6, fade, {
 	          duration:
 	          /*_transitionTime*/
-	          ctx[6]
+	          ctx[9]
 	        });
-	        div5_intro.start();
+	        div6_intro.start();
 	      });
 	      current = true;
 	    },
 
 	    o(local) {
-	      if (div4_intro) div4_intro.invalidate();
-	      div4_outro = create_out_transition(div4, fly, {
+	      if (div5_intro) div5_intro.invalidate();
+	      div5_outro = create_out_transition(div5, fly, {
 	        delay:
 	        /*_transitionTime*/
-	        ctx[6],
+	        ctx[9],
 	        duration:
 	        /*_transitionTime*/
-	        ctx[6],
+	        ctx[9],
 	        y: -100
 	      });
-	      if (div5_intro) div5_intro.invalidate();
-	      div5_outro = create_out_transition(div5, fade, {
+	      if (div6_intro) div6_intro.invalidate();
+	      div6_outro = create_out_transition(div6, fade, {
 	        delay:
 	        /*_transitionTime*/
-	        ctx[6],
+	        ctx[9],
 	        duration:
 	        /*_transitionTime*/
-	        ctx[6]
+	        ctx[9]
 	      });
 	      current = false;
 	    },
@@ -12817,20 +12825,25 @@
 	    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}
+	} // (102:8) {#if calloutvariant !== null}
 
 
-	function create_if_block_4(ctx) {
+	function create_if_block_3(ctx) {
 	  let div;
 	  let goa_icon;
 	  let goa_icon_inverted_value;
@@ -12840,8 +12853,8 @@
 	      div = element("div");
 	      goa_icon = element("goa-icon");
 	      set_custom_element_data(goa_icon, "type",
-	      /*iconType*/
-	      ctx[5]);
+	      /*_iconType*/
+	      ctx[8]);
 	      set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value =
 	      /*calloutvariant*/
 	      ctx[3] === "important" ? "false" : "true");
@@ -12857,11 +12870,11 @@
 
 	    p(ctx, dirty) {
 	      if (dirty &
-	      /*iconType*/
-	      32) {
+	      /*_iconType*/
+	      256) {
 	        set_custom_element_data(goa_icon, "type",
-	        /*iconType*/
-	        ctx[5]);
+	        /*_iconType*/
+	        ctx[8]);
 	      }
 
 	      if (dirty &
@@ -12886,25 +12899,42 @@
 	    }
 
 	  };
-	} // (76:10) {#if heading}
+	} // (115:14) {:else}
 
 
-	function create_if_block_3(ctx) {
-	  let div;
+	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) {
@@ -12916,14 +12946,14 @@
 	    },
 
 	    d(detaching) {
-	      if (detaching) detach(div);
+	      if (detaching) detach(t);
 	    }
 
 	  };
-	} // (79:10) {#if isClosable}
+	} // (119:12) {#if _isClosable}
 
 
-	function create_if_block_2$1(ctx) {
+	function create_if_block_1$1(ctx) {
 	  let div;
 	  let goa_icon_button;
 	  let mounted;
@@ -12945,7 +12975,7 @@
 	      if (!mounted) {
 	        dispose = listen(goa_icon_button, "click",
 	        /*close*/
-	        ctx[8]);
+	        ctx[10]);
 	        mounted = true;
 	      }
 	    },
@@ -12958,28 +12988,6 @@
 	      dispose();
 	    }
 
-	  };
-	} // (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);
-	    }
-
 	  };
 	}
 
@@ -12987,8 +12995,8 @@
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
-	  /*isOpen*/
-	  ctx[7] && create_if_block$5(ctx);
+	  /*_isOpen*/
+	  ctx[6] && create_if_block$5(ctx);
 	  return {
 	    c() {
 	      if (if_block) if_block.c();
@@ -13004,14 +13012,14 @@
 
 	    p(ctx, [dirty]) {
 	      if (
-	      /*isOpen*/
-	      ctx[7]) {
+	      /*_isOpen*/
+	      ctx[6]) {
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 
 	          if (dirty &
-	          /*isOpen*/
-	          128) {
+	          /*_isOpen*/
+	          64) {
 	            transition_in(if_block, 1);
 	          }
 	        } else {
@@ -13049,14 +13057,14 @@
 	}
 
 	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;
@@ -13074,10 +13082,21 @@
 	  } = $$props;
 	  let {
 	    calloutvariant = null
-	  } = $$props;
+	  } = $$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;
 	    }
 
@@ -13087,16 +13106,44 @@
 	    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);
 	  };
@@ -13104,45 +13151,67 @@
 	  $$self.$$.update = () => {
 	    if ($$self.$$.dirty &
 	    /*closable*/
-	    512) {
-	      $$invalidate(4, isClosable = toBoolean(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 &
+	    /*_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*/
-	    1024) {
-	      $$invalidate(6, _transitionTime = transition === "none" ? 0 : transition === "slow" ? 400 : 200);
+	    8192) {
+	      $$invalidate(9, _transitionTime = transition === "none" ? 0 : transition === "slow" ? 400 : 200);
 	    }
 
 	    if ($$self.$$.dirty &
 	    /*calloutvariant*/
 	    8) {
-	      $$invalidate(5, iconType = calloutvariant === "emergency" ? "warning" : calloutvariant === "important" ? "alert-circle" : calloutvariant === "information" ? "information-circle" : calloutvariant === "success" ? "checkmark-circle" : calloutvariant === "event" ? "calendar" : "");
+	      $$invalidate(8, _iconType = calloutvariant === "emergency" ? "warning" : calloutvariant === "important" ? "alert-circle" : calloutvariant === "information" ? "information-circle" : calloutvariant === "success" ? "checkmark-circle" : calloutvariant === "event" ? "calendar" : "");
 	    }
 	  };
 
-	  return [heading, open, width, calloutvariant, isClosable, iconType, _transitionTime, isOpen, close, closable, transition];
+	  return [heading, open, width, calloutvariant, _contentEl, _scrollEl, _isOpen, _isClosable, _iconType, _transitionTime, close, handleScroll, closable, 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, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
 	    }, instance$c, create_fragment$e, safe_not_equal, {
 	      heading: 0,
-	      closable: 9,
+	      closable: 12,
 	      open: 1,
-	      transition: 10,
+	      transition: 13,
 	      width: 2,
 	      calloutvariant: 3
 	    }, null);
@@ -13175,7 +13244,7 @@
 	  }
 
 	  get closable() {
-	    return this.$$.ctx[9];
+	    return this.$$.ctx[12];
 	  }
 
 	  set closable(closable) {
@@ -13197,7 +13266,7 @@
 	  }
 
 	  get transition() {
-	    return this.$$.ctx[10];
+	    return this.$$.ctx[13];
 	  }
 
 	  set transition(transition) {
@@ -14760,6 +14829,8 @@
 	  let div;
 	  let slot;
 	  let div_style_value;
+	  let mounted;
+	  let dispose;
 	  return {
 	    c() {
 	      div = element("div");
@@ -14767,9 +14838,9 @@
 	      this.c = noop;
 	      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'};
@@ -14778,25 +14849,35 @@
       ctx[0] === "horizontal" ? 'auto' : 'hidden'};
   margin: ${
       /*vpadding*/
-      ctx[2]}rem 0;
+      ctx[2]} 0;
   padding: 0 ${
       /*hpadding*/
-      ctx[1]}rem;
+      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*/
+	      /*maxheight, direction, vpadding, hpadding*/
 	      15 && div_style_value !== (div_style_value = `
-  --max-height: ${
-      /*height*/
-      ctx[3]};
+  max-height: ${
+      /*maxheight*/
+      ctx[3] || "50vh"};
   overflow-y: ${
       /*direction*/
       ctx[0] === "vertical" ? 'auto' : 'hidden'};
@@ -14805,10 +14886,10 @@
       ctx[0] === "horizontal" ? 'auto' : 'hidden'};
   margin: ${
       /*vpadding*/
-      ctx[2]}rem 0;
+      ctx[2]} 0;
   padding: 0 ${
       /*hpadding*/
-      ctx[1]}rem;
+      ctx[1]};
 `)) {
 	        attr(div, "style", div_style_value);
 	      }
@@ -14819,6 +14900,11 @@
 
 	    d(detaching) {
 	      if (detaching) detach(div);
+	      /*div_binding*/
+
+	      ctx[8](null);
+	      mounted = false;
+	      dispose();
 	    }
 
 	  };
@@ -14829,29 +14915,63 @@
 	    direction = "vertical"
 	  } = $$props;
 	  let {
-	    hpadding = 0
+	    hpadding = ""
+	  } = $$props;
+	  let {
+	    vpadding = ""
 	  } = $$props;
 	  let {
-	    vpadding = 0
+	    maxheight = ""
 	  } = $$props;
 	  let {
-	    height = 0
+	    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, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -14860,7 +14980,9 @@
 	      direction: 0,
 	      hpadding: 1,
 	      vpadding: 2,
-	      height: 3
+	      maxheight: 3,
+	      offsetHeight: 6,
+	      scrollHeight: 7
 	    }, null);
 
 	    if (options) {
@@ -14876,7 +14998,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["direction", "hpadding", "vpadding", "height"];
+	    return ["direction", "hpadding", "vpadding", "maxheight", "offsetHeight", "scrollHeight"];
 	  }
 
 	  get direction() {
@@ -14912,13 +15034,35 @@
 	    flush();
 	  }
 
-	  get height() {
+	  get maxheight() {
 	    return this.$$.ctx[3];
 	  }
 
-	  set height(height) {
+	  set maxheight(maxheight) {
 	    this.$$set({
-	      height
+	      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();
 	  }
@@ -18739,7 +18883,6 @@
 	  }, [el, onClose]);
 	  return jsxRuntime.jsxs("goa-modal", __assign({
 	    ref: el,
-	    heading: heading,
 	    open: open,
 	    closable: !!onClose,
 	    scrollable: true,
@@ -18748,7 +18891,11 @@
 	    calloutVariant: calloutVariant,
 	    "data-testid": testId
 	  }, {
-	    children: [actions && jsxRuntime.jsx("div", __assign({
+	    children: [heading && jsxRuntime.jsx("div", __assign({
+	      slot: "heading"
+	    }, {
+	      children: heading
+	    }), void 0), actions && jsxRuntime.jsx("div", __assign({
 	      slot: "actions"
 	    }, {
 	      children: actions