@abgov/react-components 4.0.0-alpha.136 → 4.0.0-alpha.137

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "4.0.0-alpha.136",
+  "version": "4.0.0-alpha.137",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/react-components.esm.js

@@ -12812,7 +12812,7 @@ function create_if_block$8(ctx) {
   let if_block1 = current_block_type(ctx);
   let if_block2 =
   /*_isClosable*/
-  ctx[8] && create_if_block_1$2(ctx);
+  ctx[9] && create_if_block_1$2(ctx);
   return {
     c() {
       goa_focus_trap = element("goa-focus-trap");
@@ -12874,31 +12874,34 @@ function create_if_block$8(ctx) {
       if_block1.m(div1, null);
       append(header, t2);
       if (if_block2) if_block2.m(header, null);
+      /*header_binding*/
+
+      ctx[16](header);
       append(div4, t3);
       append(div4, div2);
       append(div2, goa_scrollable);
       /*goa_scrollable_binding*/
 
-      ctx[15](goa_scrollable);
+      ctx[17](goa_scrollable);
       /*div2_binding*/
 
-      ctx[16](div2);
+      ctx[18](div2);
       append(div4, t4);
       append(div4, div3);
       /*div6_binding*/
 
-      ctx[17](div6);
+      ctx[19](div6);
       current = true;
 
       if (!mounted) {
         dispose = [listen(div0, "click",
         /*close*/
-        ctx[11]), listen(goa_scrollable, "_scroll",
+        ctx[12]), listen(goa_scrollable, "_scroll",
         /*handleScroll*/
-        ctx[12]), action_destroyer(noscroll_action = noscroll.call(null, div6, {
+        ctx[13]), action_destroyer(noscroll_action = noscroll.call(null, div6, {
           enable:
           /*_isOpen*/
-          ctx[6]
+          ctx[7]
         }))];
         mounted = true;
       }
@@ -12936,7 +12939,7 @@ function create_if_block$8(ctx) {
 
       if (
       /*_isClosable*/
-      ctx[8]) {
+      ctx[9]) {
         if (if_block2) {
           if_block2.p(ctx, dirty);
         } else {
@@ -12961,10 +12964,10 @@ function create_if_block$8(ctx) {
 
       if (noscroll_action && is_function(noscroll_action.update) && dirty &
       /*_isOpen*/
-      64) noscroll_action.update.call(null, {
+      128) noscroll_action.update.call(null, {
         enable:
         /*_isOpen*/
-        ctx[6]
+        ctx[7]
       });
 
       if (!current || dirty &
@@ -12983,7 +12986,7 @@ function create_if_block$8(ctx) {
         div5_intro = create_in_transition(div5, fly, {
           duration:
           /*_transitionTime*/
-          ctx[10],
+          ctx[11],
           y: 200
         });
         div5_intro.start();
@@ -12993,7 +12996,7 @@ function create_if_block$8(ctx) {
         div6_intro = create_in_transition(div6, fade, {
           duration:
           /*_transitionTime*/
-          ctx[10]
+          ctx[11]
         });
         div6_intro.start();
       });
@@ -13005,20 +13008,20 @@ function create_if_block$8(ctx) {
       div5_outro = create_out_transition(div5, fly, {
         delay:
         /*_transitionTime*/
-        ctx[10],
+        ctx[11],
         duration:
         /*_transitionTime*/
-        ctx[10],
+        ctx[11],
         y: -100
       });
       if (div6_intro) div6_intro.invalidate();
       div6_outro = create_out_transition(div6, fade, {
         delay:
         /*_transitionTime*/
-        ctx[10],
+        ctx[11],
         duration:
         /*_transitionTime*/
-        ctx[10]
+        ctx[11]
       });
       current = false;
     },
@@ -13028,23 +13031,26 @@ function create_if_block$8(ctx) {
       if (if_block0) if_block0.d();
       if_block1.d();
       if (if_block2) if_block2.d();
+      /*header_binding*/
+
+      ctx[16](null);
       /*goa_scrollable_binding*/
 
-      ctx[15](null);
+      ctx[17](null);
       /*div2_binding*/
 
-      ctx[16](null);
+      ctx[18](null);
       if (detaching && div5_outro) div5_outro.end();
       /*div6_binding*/
 
-      ctx[17](null);
+      ctx[19](null);
       if (detaching && div6_outro) div6_outro.end();
       mounted = false;
       run_all(dispose);
     }
 
   };
-} // (116:8) {#if calloutvariant !== null}
+} // (132:8) {#if calloutvariant !== null}
 
 
 function create_if_block_3$2(ctx) {
@@ -13058,7 +13064,7 @@ function create_if_block_3$2(ctx) {
       goa_icon = element("goa-icon");
       set_custom_element_data(goa_icon, "type",
       /*_iconType*/
-      ctx[9]);
+      ctx[10]);
       set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value =
       /*calloutvariant*/
       ctx[3] === "important" ? "false" : "true");
@@ -13075,10 +13081,10 @@ function create_if_block_3$2(ctx) {
     p(ctx, dirty) {
       if (dirty &
       /*_iconType*/
-      512) {
+      1024) {
         set_custom_element_data(goa_icon, "type",
         /*_iconType*/
-        ctx[9]);
+        ctx[10]);
       }
 
       if (dirty &
@@ -13103,7 +13109,7 @@ function create_if_block_3$2(ctx) {
     }
 
   };
-} // (129:14) {:else}
+} // (145:14) {:else}
 
 
 function create_else_block$3(ctx) {
@@ -13125,7 +13131,7 @@ function create_else_block$3(ctx) {
     }
 
   };
-} // (127:14) {#if heading}
+} // (143:14) {#if heading}
 
 
 function create_if_block_2$2(ctx) {
@@ -13154,7 +13160,7 @@ function create_if_block_2$2(ctx) {
     }
 
   };
-} // (133:12) {#if _isClosable}
+} // (149:12) {#if _isClosable}
 
 
 function create_if_block_1$2(ctx) {
@@ -13179,7 +13185,7 @@ function create_if_block_1$2(ctx) {
       if (!mounted) {
         dispose = listen(goa_icon_button, "click",
         /*close*/
-        ctx[11]);
+        ctx[12]);
         mounted = true;
       }
     },
@@ -13200,7 +13206,7 @@ function create_fragment$i(ctx) {
   let current;
   let if_block =
   /*_isOpen*/
-  ctx[6] && create_if_block$8(ctx);
+  ctx[7] && create_if_block$8(ctx);
   return {
     c() {
       if (if_block) if_block.c();
@@ -13217,13 +13223,13 @@ function create_fragment$i(ctx) {
     p(ctx, [dirty]) {
       if (
       /*_isOpen*/
-      ctx[6]) {
+      ctx[7]) {
         if (if_block) {
           if_block.p(ctx, dirty);
 
           if (dirty &
           /*_isOpen*/
-          64) {
+          128) {
             transition_in(if_block, 1);
           }
         } else {
@@ -13290,7 +13296,8 @@ function instance$g($$self, $$props, $$invalidate) {
 
   let _rootEl = null;
   let _contentEl = null;
-  let _scrollEl = null; // Type verification
+  let _scrollEl = null;
+  let _headerEl = 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
@@ -13339,32 +13346,49 @@ function instance$g($$self, $$props, $$invalidate) {
     }
   }
 
+  function getChildren() {
+    const slot = _headerEl.querySelector("slot");
+
+    if (slot) {
+      return [...slot.assignedElements()];
+    } else {
+      return [..._headerEl.children]; // unit tests
+    }
+  }
+
+  function header_binding($$value) {
+    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+      _headerEl = $$value;
+      ($$invalidate(6, _headerEl), $$invalidate(7, _isOpen)), $$invalidate(1, open);
+    });
+  }
+
   function goa_scrollable_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       _scrollEl = $$value;
-      ($$invalidate(5, _scrollEl), $$invalidate(6, _isOpen)), $$invalidate(1, open);
+      ($$invalidate(5, _scrollEl), $$invalidate(7, _isOpen)), $$invalidate(1, open);
     });
   }
 
   function div2_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       _contentEl = $$value;
-      ($$invalidate(4, _contentEl), $$invalidate(6, _isOpen)), $$invalidate(1, open);
+      ($$invalidate(4, _contentEl), $$invalidate(7, _isOpen)), $$invalidate(1, open);
     });
   }
 
   function div6_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       _rootEl = $$value;
-      ($$invalidate(7, _rootEl), $$invalidate(6, _isOpen)), $$invalidate(1, open);
+      ($$invalidate(8, _rootEl), $$invalidate(7, _isOpen)), $$invalidate(1, open);
     });
   }
 
   $$self.$$set = $$props => {
     if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
-    if ('closable' in $$props) $$invalidate(13, closable = $$props.closable);
+    if ('closable' in $$props) $$invalidate(14, closable = $$props.closable);
     if ('open' in $$props) $$invalidate(1, open = $$props.open);
-    if ('transition' in $$props) $$invalidate(14, transition = $$props.transition);
+    if ('transition' in $$props) $$invalidate(15, transition = $$props.transition);
     if ('width' in $$props) $$invalidate(2, width = $$props.width);
     if ('calloutvariant' in $$props) $$invalidate(3, calloutvariant = $$props.calloutvariant);
   };
@@ -13372,30 +13396,30 @@ function instance$g($$self, $$props, $$invalidate) {
   $$self.$$.update = () => {
     if ($$self.$$.dirty &
     /*closable*/
-    8192) {
+    16384) {
       // Reactive
-      $$invalidate(8, _isClosable = toBoolean(closable));
+      $$invalidate(9, _isClosable = toBoolean(closable));
     }
 
     if ($$self.$$.dirty &
     /*open*/
     2) {
-      $$invalidate(6, _isOpen = toBoolean(open));
+      $$invalidate(7, _isOpen = toBoolean(open));
     }
 
     if ($$self.$$.dirty &
     /*_isOpen*/
-    64) {
+    128) {
       if (!_isOpen) {
         // prevent null issues
-        $$invalidate(4, _contentEl = $$invalidate(5, _scrollEl = $$invalidate(7, _rootEl = null)));
+        $$invalidate(4, _contentEl = $$invalidate(5, _scrollEl = $$invalidate(8, _rootEl = $$invalidate(6, _headerEl = null))));
         window.removeEventListener('keydown', onInputKeyDown);
       }
     }
 
     if ($$self.$$.dirty &
     /*_isOpen, _scrollEl, _contentEl*/
-    112) {
+    176) {
       if (_isOpen && _scrollEl && _contentEl) {
         const hasScroll = _scrollEl.scrollHeight > _scrollEl.offsetHeight;
 
@@ -13406,42 +13430,47 @@ function instance$g($$self, $$props, $$invalidate) {
     }
 
     if ($$self.$$.dirty &
-    /*_isOpen, _contentEl*/
-    80) {
+    /*_isOpen, _contentEl, _headerEl*/
+    208) {
       if (_isOpen && _contentEl) {
         window.addEventListener('keydown', onInputKeyDown);
+        const children = getChildren();
+
+        if (_headerEl.querySelector("div.modal-title").textContent || _headerEl.querySelector("div.modal-close") || children.length) {
+          _headerEl.classList.add("has-content");
+        }
       }
     }
 
     if ($$self.$$.dirty &
     /*transition*/
-    16384) {
-      $$invalidate(10, _transitionTime = transition === "none" ? 0 : transition === "slow" ? 400 : 200);
+    32768) {
+      $$invalidate(11, _transitionTime = transition === "none" ? 0 : transition === "slow" ? 400 : 200);
     }
 
     if ($$self.$$.dirty &
     /*calloutvariant*/
     8) {
-      $$invalidate(9, _iconType = calloutvariant === "emergency" ? "warning" : calloutvariant === "important" ? "alert-circle" : calloutvariant === "information" ? "information-circle" : calloutvariant === "success" ? "checkmark-circle" : calloutvariant === "event" ? "calendar" : "");
+      $$invalidate(10, _iconType = calloutvariant === "emergency" ? "warning" : calloutvariant === "important" ? "alert-circle" : calloutvariant === "information" ? "information-circle" : calloutvariant === "success" ? "checkmark-circle" : calloutvariant === "event" ? "calendar" : "");
     }
   };
 
-  return [heading, open, width, calloutvariant, _contentEl, _scrollEl, _isOpen, _rootEl, _isClosable, _iconType, _transitionTime, close, handleScroll, closable, transition, goa_scrollable_binding, div2_binding, div6_binding];
+  return [heading, open, width, calloutvariant, _contentEl, _scrollEl, _headerEl, _isOpen, _rootEl, _isClosable, _iconType, _transitionTime, close, handleScroll, closable, transition, header_binding, goa_scrollable_binding, div2_binding, div6_binding];
 }
 
 class Modal extends SvelteElement {
   constructor(options) {
     super();
-    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>`;
+    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;justify-content:space-between}.content header.has-content{margin-bottom:2rem}.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:var(--goa-typography-heading-m)}.modal-close{padding-left:var(--goa-space-m);margin-top:var(--goa-space-2xs)}.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$g, create_fragment$i, safe_not_equal, {
       heading: 0,
-      closable: 13,
+      closable: 14,
       open: 1,
-      transition: 14,
+      transition: 15,
       width: 2,
       calloutvariant: 3
     }, null);
@@ -13474,7 +13503,7 @@ class Modal extends SvelteElement {
   }
 
   get closable() {
-    return this.$$.ctx[13];
+    return this.$$.ctx[14];
   }
 
   set closable(closable) {
@@ -13496,7 +13525,7 @@ class Modal extends SvelteElement {
   }
 
   get transition() {
-    return this.$$.ctx[14];
+    return this.$$.ctx[15];
   }
 
   set transition(transition) {

package/react-components.umd.js

@@ -12858,7 +12858,7 @@
 	  let if_block1 = current_block_type(ctx);
 	  let if_block2 =
 	  /*_isClosable*/
-	  ctx[8] && create_if_block_1$2(ctx);
+	  ctx[9] && create_if_block_1$2(ctx);
 	  return {
 	    c() {
 	      goa_focus_trap = element("goa-focus-trap");
@@ -12920,31 +12920,34 @@
 	      if_block1.m(div1, null);
 	      append(header, t2);
 	      if (if_block2) if_block2.m(header, null);
+	      /*header_binding*/
+
+	      ctx[16](header);
 	      append(div4, t3);
 	      append(div4, div2);
 	      append(div2, goa_scrollable);
 	      /*goa_scrollable_binding*/
 
-	      ctx[15](goa_scrollable);
+	      ctx[17](goa_scrollable);
 	      /*div2_binding*/
 
-	      ctx[16](div2);
+	      ctx[18](div2);
 	      append(div4, t4);
 	      append(div4, div3);
 	      /*div6_binding*/
 
-	      ctx[17](div6);
+	      ctx[19](div6);
 	      current = true;
 
 	      if (!mounted) {
 	        dispose = [listen(div0, "click",
 	        /*close*/
-	        ctx[11]), listen(goa_scrollable, "_scroll",
+	        ctx[12]), listen(goa_scrollable, "_scroll",
 	        /*handleScroll*/
-	        ctx[12]), action_destroyer(noscroll_action = noscroll.call(null, div6, {
+	        ctx[13]), action_destroyer(noscroll_action = noscroll.call(null, div6, {
 	          enable:
 	          /*_isOpen*/
-	          ctx[6]
+	          ctx[7]
 	        }))];
 	        mounted = true;
 	      }
@@ -12982,7 +12985,7 @@
 
 	      if (
 	      /*_isClosable*/
-	      ctx[8]) {
+	      ctx[9]) {
 	        if (if_block2) {
 	          if_block2.p(ctx, dirty);
 	        } else {
@@ -13007,10 +13010,10 @@
 
 	      if (noscroll_action && is_function(noscroll_action.update) && dirty &
 	      /*_isOpen*/
-	      64) noscroll_action.update.call(null, {
+	      128) noscroll_action.update.call(null, {
 	        enable:
 	        /*_isOpen*/
-	        ctx[6]
+	        ctx[7]
 	      });
 
 	      if (!current || dirty &
@@ -13029,7 +13032,7 @@
 	        div5_intro = create_in_transition(div5, fly, {
 	          duration:
 	          /*_transitionTime*/
-	          ctx[10],
+	          ctx[11],
 	          y: 200
 	        });
 	        div5_intro.start();
@@ -13039,7 +13042,7 @@
 	        div6_intro = create_in_transition(div6, fade, {
 	          duration:
 	          /*_transitionTime*/
-	          ctx[10]
+	          ctx[11]
 	        });
 	        div6_intro.start();
 	      });
@@ -13051,20 +13054,20 @@
 	      div5_outro = create_out_transition(div5, fly, {
 	        delay:
 	        /*_transitionTime*/
-	        ctx[10],
+	        ctx[11],
 	        duration:
 	        /*_transitionTime*/
-	        ctx[10],
+	        ctx[11],
 	        y: -100
 	      });
 	      if (div6_intro) div6_intro.invalidate();
 	      div6_outro = create_out_transition(div6, fade, {
 	        delay:
 	        /*_transitionTime*/
-	        ctx[10],
+	        ctx[11],
 	        duration:
 	        /*_transitionTime*/
-	        ctx[10]
+	        ctx[11]
 	      });
 	      current = false;
 	    },
@@ -13074,23 +13077,26 @@
 	      if (if_block0) if_block0.d();
 	      if_block1.d();
 	      if (if_block2) if_block2.d();
+	      /*header_binding*/
+
+	      ctx[16](null);
 	      /*goa_scrollable_binding*/
 
-	      ctx[15](null);
+	      ctx[17](null);
 	      /*div2_binding*/
 
-	      ctx[16](null);
+	      ctx[18](null);
 	      if (detaching && div5_outro) div5_outro.end();
 	      /*div6_binding*/
 
-	      ctx[17](null);
+	      ctx[19](null);
 	      if (detaching && div6_outro) div6_outro.end();
 	      mounted = false;
 	      run_all(dispose);
 	    }
 
 	  };
-	} // (116:8) {#if calloutvariant !== null}
+	} // (132:8) {#if calloutvariant !== null}
 
 
 	function create_if_block_3$2(ctx) {
@@ -13104,7 +13110,7 @@
 	      goa_icon = element("goa-icon");
 	      set_custom_element_data(goa_icon, "type",
 	      /*_iconType*/
-	      ctx[9]);
+	      ctx[10]);
 	      set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value =
 	      /*calloutvariant*/
 	      ctx[3] === "important" ? "false" : "true");
@@ -13121,10 +13127,10 @@
 	    p(ctx, dirty) {
 	      if (dirty &
 	      /*_iconType*/
-	      512) {
+	      1024) {
 	        set_custom_element_data(goa_icon, "type",
 	        /*_iconType*/
-	        ctx[9]);
+	        ctx[10]);
 	      }
 
 	      if (dirty &
@@ -13149,7 +13155,7 @@
 	    }
 
 	  };
-	} // (129:14) {:else}
+	} // (145:14) {:else}
 
 
 	function create_else_block$3(ctx) {
@@ -13171,7 +13177,7 @@
 	    }
 
 	  };
-	} // (127:14) {#if heading}
+	} // (143:14) {#if heading}
 
 
 	function create_if_block_2$2(ctx) {
@@ -13200,7 +13206,7 @@
 	    }
 
 	  };
-	} // (133:12) {#if _isClosable}
+	} // (149:12) {#if _isClosable}
 
 
 	function create_if_block_1$2(ctx) {
@@ -13225,7 +13231,7 @@
 	      if (!mounted) {
 	        dispose = listen(goa_icon_button, "click",
 	        /*close*/
-	        ctx[11]);
+	        ctx[12]);
 	        mounted = true;
 	      }
 	    },
@@ -13246,7 +13252,7 @@
 	  let current;
 	  let if_block =
 	  /*_isOpen*/
-	  ctx[6] && create_if_block$8(ctx);
+	  ctx[7] && create_if_block$8(ctx);
 	  return {
 	    c() {
 	      if (if_block) if_block.c();
@@ -13263,13 +13269,13 @@
 	    p(ctx, [dirty]) {
 	      if (
 	      /*_isOpen*/
-	      ctx[6]) {
+	      ctx[7]) {
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 
 	          if (dirty &
 	          /*_isOpen*/
-	          64) {
+	          128) {
 	            transition_in(if_block, 1);
 	          }
 	        } else {
@@ -13336,7 +13342,8 @@
 
 	  let _rootEl = null;
 	  let _contentEl = null;
-	  let _scrollEl = null; // Type verification
+	  let _scrollEl = null;
+	  let _headerEl = 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
@@ -13385,32 +13392,49 @@
 	    }
 	  }
 
+	  function getChildren() {
+	    const slot = _headerEl.querySelector("slot");
+
+	    if (slot) {
+	      return [...slot.assignedElements()];
+	    } else {
+	      return [..._headerEl.children]; // unit tests
+	    }
+	  }
+
+	  function header_binding($$value) {
+	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+	      _headerEl = $$value;
+	      ($$invalidate(6, _headerEl), $$invalidate(7, _isOpen)), $$invalidate(1, open);
+	    });
+	  }
+
 	  function goa_scrollable_binding($$value) {
 	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 	      _scrollEl = $$value;
-	      ($$invalidate(5, _scrollEl), $$invalidate(6, _isOpen)), $$invalidate(1, open);
+	      ($$invalidate(5, _scrollEl), $$invalidate(7, _isOpen)), $$invalidate(1, open);
 	    });
 	  }
 
 	  function div2_binding($$value) {
 	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 	      _contentEl = $$value;
-	      ($$invalidate(4, _contentEl), $$invalidate(6, _isOpen)), $$invalidate(1, open);
+	      ($$invalidate(4, _contentEl), $$invalidate(7, _isOpen)), $$invalidate(1, open);
 	    });
 	  }
 
 	  function div6_binding($$value) {
 	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 	      _rootEl = $$value;
-	      ($$invalidate(7, _rootEl), $$invalidate(6, _isOpen)), $$invalidate(1, open);
+	      ($$invalidate(8, _rootEl), $$invalidate(7, _isOpen)), $$invalidate(1, open);
 	    });
 	  }
 
 	  $$self.$$set = $$props => {
 	    if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
-	    if ('closable' in $$props) $$invalidate(13, closable = $$props.closable);
+	    if ('closable' in $$props) $$invalidate(14, closable = $$props.closable);
 	    if ('open' in $$props) $$invalidate(1, open = $$props.open);
-	    if ('transition' in $$props) $$invalidate(14, transition = $$props.transition);
+	    if ('transition' in $$props) $$invalidate(15, transition = $$props.transition);
 	    if ('width' in $$props) $$invalidate(2, width = $$props.width);
 	    if ('calloutvariant' in $$props) $$invalidate(3, calloutvariant = $$props.calloutvariant);
 	  };
@@ -13418,30 +13442,30 @@
 	  $$self.$$.update = () => {
 	    if ($$self.$$.dirty &
 	    /*closable*/
-	    8192) {
+	    16384) {
 	      // Reactive
-	      $$invalidate(8, _isClosable = toBoolean(closable));
+	      $$invalidate(9, _isClosable = toBoolean(closable));
 	    }
 
 	    if ($$self.$$.dirty &
 	    /*open*/
 	    2) {
-	      $$invalidate(6, _isOpen = toBoolean(open));
+	      $$invalidate(7, _isOpen = toBoolean(open));
 	    }
 
 	    if ($$self.$$.dirty &
 	    /*_isOpen*/
-	    64) {
+	    128) {
 	      if (!_isOpen) {
 	        // prevent null issues
-	        $$invalidate(4, _contentEl = $$invalidate(5, _scrollEl = $$invalidate(7, _rootEl = null)));
+	        $$invalidate(4, _contentEl = $$invalidate(5, _scrollEl = $$invalidate(8, _rootEl = $$invalidate(6, _headerEl = null))));
 	        window.removeEventListener('keydown', onInputKeyDown);
 	      }
 	    }
 
 	    if ($$self.$$.dirty &
 	    /*_isOpen, _scrollEl, _contentEl*/
-	    112) {
+	    176) {
 	      if (_isOpen && _scrollEl && _contentEl) {
 	        const hasScroll = _scrollEl.scrollHeight > _scrollEl.offsetHeight;
 
@@ -13452,42 +13476,47 @@
 	    }
 
 	    if ($$self.$$.dirty &
-	    /*_isOpen, _contentEl*/
-	    80) {
+	    /*_isOpen, _contentEl, _headerEl*/
+	    208) {
 	      if (_isOpen && _contentEl) {
 	        window.addEventListener('keydown', onInputKeyDown);
+	        const children = getChildren();
+
+	        if (_headerEl.querySelector("div.modal-title").textContent || _headerEl.querySelector("div.modal-close") || children.length) {
+	          _headerEl.classList.add("has-content");
+	        }
 	      }
 	    }
 
 	    if ($$self.$$.dirty &
 	    /*transition*/
-	    16384) {
-	      $$invalidate(10, _transitionTime = transition === "none" ? 0 : transition === "slow" ? 400 : 200);
+	    32768) {
+	      $$invalidate(11, _transitionTime = transition === "none" ? 0 : transition === "slow" ? 400 : 200);
 	    }
 
 	    if ($$self.$$.dirty &
 	    /*calloutvariant*/
 	    8) {
-	      $$invalidate(9, _iconType = calloutvariant === "emergency" ? "warning" : calloutvariant === "important" ? "alert-circle" : calloutvariant === "information" ? "information-circle" : calloutvariant === "success" ? "checkmark-circle" : calloutvariant === "event" ? "calendar" : "");
+	      $$invalidate(10, _iconType = calloutvariant === "emergency" ? "warning" : calloutvariant === "important" ? "alert-circle" : calloutvariant === "information" ? "information-circle" : calloutvariant === "success" ? "checkmark-circle" : calloutvariant === "event" ? "calendar" : "");
 	    }
 	  };
 
-	  return [heading, open, width, calloutvariant, _contentEl, _scrollEl, _isOpen, _rootEl, _isClosable, _iconType, _transitionTime, close, handleScroll, closable, transition, goa_scrollable_binding, div2_binding, div6_binding];
+	  return [heading, open, width, calloutvariant, _contentEl, _scrollEl, _headerEl, _isOpen, _rootEl, _isClosable, _iconType, _transitionTime, close, handleScroll, closable, transition, header_binding, goa_scrollable_binding, div2_binding, div6_binding];
 	}
 
 	class Modal extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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;justify-content:space-between}.content header.has-content{margin-bottom:2rem}.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:var(--goa-typography-heading-m)}.modal-close{padding-left:var(--goa-space-m);margin-top:var(--goa-space-2xs)}.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$g, create_fragment$i, safe_not_equal, {
 	      heading: 0,
-	      closable: 13,
+	      closable: 14,
 	      open: 1,
-	      transition: 14,
+	      transition: 15,
 	      width: 2,
 	      calloutvariant: 3
 	    }, null);
@@ -13520,7 +13549,7 @@
 	  }
 
 	  get closable() {
-	    return this.$$.ctx[13];
+	    return this.$$.ctx[14];
 	  }
 
 	  set closable(closable) {
@@ -13542,7 +13571,7 @@
 	  }
 
 	  get transition() {
-	    return this.$$.ctx[14];
+	    return this.$$.ctx[15];
 	  }
 
 	  set transition(transition) {