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

package/react-components.esm.js

@@ -1521,7 +1521,7 @@ class Accordion extends SvelteElement {
 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;
@@ -1656,7 +1656,7 @@ function create_fragment$I(ctx) {
     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);
@@ -1833,7 +1833,7 @@ class AppHeader extends SvelteElement {
 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() {
@@ -1931,7 +1931,7 @@ function create_fragment$H(ctx) {
     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);
@@ -2483,7 +2483,7 @@ class Block extends SvelteElement {
 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;
@@ -2692,7 +2692,7 @@ function create_fragment$F(ctx) {
     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);
@@ -5321,12 +5321,9 @@ function noscroll(_node, opts) {
     }
 
     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() {
@@ -5483,7 +5480,7 @@ function create_if_block_3$4(ctx) {
   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");
@@ -5534,7 +5531,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);
         }
@@ -5687,7 +5684,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;
   return {
@@ -6696,7 +6693,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;
@@ -7397,7 +7394,7 @@ function create_fragment$r(ctx) {
     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);
@@ -8143,7 +8140,6 @@ function create_fragment$p(ctx) {
   
   <span tabindex="0"></span>`;
       this.c = noop;
-      attr(div, "id", "root");
     },
 
     m(target, anchor) {
@@ -8202,7 +8198,7 @@ function instance$n($$self, $$props, $$invalidate) {
   } = $$props;
   let ignoreFocusChanges = false;
   let lastFocus;
-  let element;
+  let rootEl;
   let hasListeners = false;
 
   function removeListeners() {
@@ -8288,8 +8284,8 @@ function instance$n($$self, $$props, $$invalidate) {
 
     try {
       ignoreFocusChanges = true;
-      element.focus();
-    } catch (e) {} finally {
+      element && element.focus();
+    } finally {
       ignoreFocusChanges = false;
     }
 
@@ -8300,7 +8296,7 @@ function instance$n($$self, $$props, $$invalidate) {
     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];
 
@@ -8320,8 +8316,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);
     });
   }
 
@@ -8353,13 +8349,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, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -10952,7 +10948,7 @@ class Icon extends SvelteElement {
 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 {
@@ -11163,7 +11159,7 @@ function create_fragment$g(ctx) {
   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);
@@ -11320,7 +11316,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);
         }
@@ -12534,80 +12530,87 @@ 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);
+  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]);
@@ -12615,32 +12618,40 @@ function create_if_block$5(ctx) {
 
     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;
       }
@@ -12655,39 +12666,36 @@ 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]) {
+      /*_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);
@@ -12696,20 +12704,20 @@ function create_if_block$5(ctx) {
 
       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 &
@@ -12724,46 +12732,46 @@ function create_if_block$5(ctx) {
     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;
     },
@@ -12771,20 +12779,25 @@ 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}
+} // (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;
@@ -12794,8 +12807,8 @@ function create_if_block_4(ctx) {
       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");
@@ -12811,11 +12824,11 @@ function create_if_block_4(ctx) {
 
     p(ctx, dirty) {
       if (dirty &
-      /*iconType*/
-      32) {
+      /*_iconType*/
+      256) {
         set_custom_element_data(goa_icon, "type",
-        /*iconType*/
-        ctx[5]);
+        /*_iconType*/
+        ctx[8]);
       }
 
       if (dirty &
@@ -12840,25 +12853,42 @@ function create_if_block_4(ctx) {
     }
 
   };
-} // (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) {
@@ -12870,14 +12900,14 @@ function create_if_block_3(ctx) {
     },
 
     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;
@@ -12899,7 +12929,7 @@ function create_if_block_2$1(ctx) {
       if (!mounted) {
         dispose = listen(goa_icon_button, "click",
         /*close*/
-        ctx[8]);
+        ctx[10]);
         mounted = true;
       }
     },
@@ -12912,28 +12942,6 @@ function create_if_block_2$1(ctx) {
       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);
-    }
-
   };
 }
 
@@ -12941,8 +12949,8 @@ function create_fragment$e(ctx) {
   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();
@@ -12958,14 +12966,14 @@ function create_fragment$e(ctx) {
 
     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 {
@@ -13003,14 +13011,14 @@ 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;
@@ -13028,10 +13036,21 @@ function instance$c($$self, $$props, $$invalidate) {
   } = $$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;
     }
 
@@ -13041,16 +13060,44 @@ 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);
   };
@@ -13058,45 +13105,67 @@ function instance$c($$self, $$props, $$invalidate) {
   $$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);
@@ -13129,7 +13198,7 @@ class Modal extends SvelteElement {
   }
 
   get closable() {
-    return this.$$.ctx[9];
+    return this.$$.ctx[12];
   }
 
   set closable(closable) {
@@ -13151,7 +13220,7 @@ class Modal extends SvelteElement {
   }
 
   get transition() {
-    return this.$$.ctx[10];
+    return this.$$.ctx[13];
   }
 
   set transition(transition) {
@@ -14712,6 +14781,8 @@ function create_fragment$9(ctx) {
   let div;
   let slot;
   let div_style_value;
+  let mounted;
+  let dispose;
   return {
     c() {
       div = element("div");
@@ -14719,9 +14790,9 @@ function create_fragment$9(ctx) {
       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'};
@@ -14730,25 +14801,35 @@ function create_fragment$9(ctx) {
       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'};
@@ -14757,10 +14838,10 @@ function create_fragment$9(ctx) {
       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);
       }
@@ -14771,6 +14852,11 @@ function create_fragment$9(ctx) {
 
     d(detaching) {
       if (detaching) detach(div);
+      /*div_binding*/
+
+      ctx[8](null);
+      mounted = false;
+      dispose();
     }
 
   };
@@ -14781,29 +14867,63 @@ function instance$7($$self, $$props, $$invalidate) {
     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),
@@ -14812,7 +14932,9 @@ class Scrollable extends SvelteElement {
       direction: 0,
       hpadding: 1,
       vpadding: 2,
-      height: 3
+      maxheight: 3,
+      offsetHeight: 6,
+      scrollHeight: 7
     }, null);
 
     if (options) {
@@ -14828,7 +14950,7 @@ class Scrollable extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["direction", "hpadding", "vpadding", "height"];
+    return ["direction", "hpadding", "vpadding", "maxheight", "offsetHeight", "scrollHeight"];
   }
 
   get direction() {
@@ -14864,13 +14986,35 @@ class Scrollable extends SvelteElement {
     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();
   }
@@ -18697,7 +18841,6 @@ const GoAModal = ({
   }, [el, onClose]);
   return jsxs("goa-modal", Object.assign({
     ref: el,
-    heading: heading,
     open: open,
     closable: !!onClose,
     scrollable: true,
@@ -18706,7 +18849,11 @@ const GoAModal = ({
     calloutVariant: calloutVariant,
     "data-testid": testId
   }, {
-    children: [actions && jsx("div", Object.assign({
+    children: [heading && jsx("div", Object.assign({
+      slot: "heading"
+    }, {
+      children: heading
+    }), void 0), actions && jsx("div", Object.assign({
       slot: "actions"
     }, {
       children: actions