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

package/react-components.umd.js

@@ -11202,7 +11202,7 @@
 	    }
 
 	  };
-	} // (109:4) {#if leadingicon}
+	} // (123:4) {#if leadingicon}
 
 
 	function create_if_block_3$4(ctx) {
@@ -11236,7 +11236,7 @@
 	    }
 
 	  };
-	} // (139:4) {#if trailingicon && !handlesTrailingIconClick}
+	} // (157:4) {#if trailingicon && !handlesTrailingIconClick}
 
 
 	function create_if_block_2$4(ctx) {
@@ -11271,7 +11271,7 @@
 	    }
 
 	  };
-	} // (149:4) {#if trailingicon && handlesTrailingIconClick}
+	} // (167:4) {#if trailingicon && handlesTrailingIconClick}
 
 
 	function create_if_block_1$4(ctx) {
@@ -11283,7 +11283,7 @@
 	      goa_icon_button = element("goa-icon-button");
 	      set_custom_element_data(goa_icon_button, "disabled",
 	      /*isDisabled*/
-	      ctx[21]);
+	      ctx[24]);
 	      set_custom_element_data(goa_icon_button, "variant", "nocolor");
 	      set_custom_element_data(goa_icon_button, "size", "medium");
 	      set_custom_element_data(goa_icon_button, "icon",
@@ -11304,10 +11304,10 @@
 	    p(ctx, dirty) {
 	      if (dirty[0] &
 	      /*isDisabled*/
-	      2097152) {
+	      16777216) {
 	        set_custom_element_data(goa_icon_button, "disabled",
 	        /*isDisabled*/
-	        ctx[21]);
+	        ctx[24]);
 	      }
 
 	      if (dirty[0] &
@@ -11326,7 +11326,7 @@
 	    }
 
 	  };
-	} // (161:4) {#if suffix}
+	} // (179:4) {#if suffix}
 
 
 	function create_if_block$a(ctx) {
@@ -11391,12 +11391,12 @@
 	  /*trailingicon*/
 	  ctx[6] && !
 	  /*handlesTrailingIconClick*/
-	  ctx[24] && create_if_block_2$4(ctx);
+	  ctx[27] && create_if_block_2$4(ctx);
 	  let if_block3 =
 	  /*trailingicon*/
 	  ctx[6] &&
 	  /*handlesTrailingIconClick*/
-	  ctx[24] && create_if_block_1$4(ctx);
+	  ctx[27] && create_if_block_1$4(ctx);
 	  let if_block4 =
 	  /*suffix*/
 	  ctx[15] && create_if_block$a(ctx);
@@ -11423,18 +11423,30 @@
 	      div1.innerHTML = `<slot name="trailingContent"></slot>`;
 	      this.c = noop;
 	      attr(div0, "class", "leading-content");
-	      attr(input, "class", input_class_value = `input--${
+	      attr(input, "class", input_class_value = `
+        input--${
       /*variant*/
-      ctx[7]}`);
+      ctx[7]}
+        ${
+      /*_leadingContentSlot*/
+      ctx[22] && !
+      /*isDisabled*/
+      ctx[24] ? "input-leading-content" : ""}
+        ${
+      /*_trailingContentSlot*/
+      ctx[23] && !
+      /*isDisabled*/
+      ctx[24] ? "input-trailing-content" : ""}
+      `);
 	      attr(input, "style", input_style_value = `--search-icon-offset: ${
       /*trailingicon*/
       ctx[6] ? "-0.5rem" : "0"}`);
 	      input.readOnly =
 	      /*isReadonly*/
-	      ctx[23];
+	      ctx[26];
 	      input.disabled =
 	      /*isDisabled*/
-	      ctx[21];
+	      ctx[24];
 	      attr(input, "data-testid",
 	      /*testid*/
 	      ctx[8]);
@@ -11473,17 +11485,23 @@
       goa-input
       ${
       /*isDisabled*/
-      ctx[21] ? "goa-input--disabled" : ""}
+      ctx[24] ? "goa-input--disabled" : ""}
       variant--${
       /*variant*/
       ctx[7]}
       type--${
       /*type*/
       ctx[1]}
+      ${
+      /*_leadingContentSlot*/
+      ctx[22] ? "goa-input-leading-content" : ""}
+      ${
+      /*_trailingContentSlot*/
+      ctx[23] ? "goa-input-trailing-content" : ""}
     `);
 	      toggle_class(div2, "error",
 	      /*isError*/
-	      ctx[22]);
+	      ctx[25]);
 	      attr(div3, "class", "container");
 	      attr(div3, "style", div3_style_value = `
     ${calculateMargin(
@@ -11513,7 +11531,7 @@
 	      append(div2, input);
 	      /*input_binding*/
 
-	      ctx[33](input);
+	      ctx[36](input);
 	      append(div2, t3);
 	      if (if_block2) if_block2.m(div2, null);
 	      append(div2, t4);
@@ -11522,13 +11540,16 @@
 	      if (if_block4) if_block4.m(div2, null);
 	      append(div2, t6);
 	      append(div2, div1);
+	      /*div3_binding*/
+
+	      ctx[37](div3);
 
 	      if (!mounted) {
 	        dispose = [listen(input, "keyup",
 	        /*onKeyUp*/
-	        ctx[25]), listen(input, "change",
+	        ctx[28]), listen(input, "change",
 	        /*onKeyUp*/
-	        ctx[25])];
+	        ctx[28])];
 	        mounted = true;
 	      }
 	    },
@@ -11565,10 +11586,22 @@
 	      }
 
 	      if (dirty[0] &
-	      /*variant*/
-	      128 && input_class_value !== (input_class_value = `input--${
+	      /*variant, _leadingContentSlot, isDisabled, _trailingContentSlot*/
+	      29360256 && input_class_value !== (input_class_value = `
+        input--${
       /*variant*/
-      ctx[7]}`)) {
+      ctx[7]}
+        ${
+      /*_leadingContentSlot*/
+      ctx[22] && !
+      /*isDisabled*/
+      ctx[24] ? "input-leading-content" : ""}
+        ${
+      /*_trailingContentSlot*/
+      ctx[23] && !
+      /*isDisabled*/
+      ctx[24] ? "input-trailing-content" : ""}
+      `)) {
 	        attr(input, "class", input_class_value);
 	      }
 
@@ -11582,18 +11615,18 @@
 
 	      if (dirty[0] &
 	      /*isReadonly*/
-	      8388608) {
+	      67108864) {
 	        input.readOnly =
 	        /*isReadonly*/
-	        ctx[23];
+	        ctx[26];
 	      }
 
 	      if (dirty[0] &
 	      /*isDisabled*/
-	      2097152) {
+	      16777216) {
 	        input.disabled =
 	        /*isDisabled*/
-	        ctx[21];
+	        ctx[24];
 	      }
 
 	      if (dirty[0] &
@@ -11684,7 +11717,7 @@
 	      /*trailingicon*/
 	      ctx[6] && !
 	      /*handlesTrailingIconClick*/
-	      ctx[24]) {
+	      ctx[27]) {
 	        if (if_block2) {
 	          if_block2.p(ctx, dirty);
 	        } else {
@@ -11701,7 +11734,7 @@
 	      /*trailingicon*/
 	      ctx[6] &&
 	      /*handlesTrailingIconClick*/
-	      ctx[24]) {
+	      ctx[27]) {
 	        if (if_block3) {
 	          if_block3.p(ctx, dirty);
 	        } else {
@@ -11730,28 +11763,34 @@
 	      }
 
 	      if (dirty[0] &
-	      /*isDisabled, variant, type*/
-	      2097282 && div2_class_value !== (div2_class_value = `
+	      /*isDisabled, variant, type, _leadingContentSlot, _trailingContentSlot*/
+	      29360258 && div2_class_value !== (div2_class_value = `
       goa-input
       ${
       /*isDisabled*/
-      ctx[21] ? "goa-input--disabled" : ""}
+      ctx[24] ? "goa-input--disabled" : ""}
       variant--${
       /*variant*/
       ctx[7]}
       type--${
       /*type*/
       ctx[1]}
+      ${
+      /*_leadingContentSlot*/
+      ctx[22] ? "goa-input-leading-content" : ""}
+      ${
+      /*_trailingContentSlot*/
+      ctx[23] ? "goa-input-trailing-content" : ""}
     `)) {
 	        attr(div2, "class", div2_class_value);
 	      }
 
 	      if (dirty[0] &
-	      /*isDisabled, variant, type, isError*/
-	      6291586) {
+	      /*isDisabled, variant, type, _leadingContentSlot, _trailingContentSlot, isError*/
+	      62914690) {
 	        toggle_class(div2, "error",
 	        /*isError*/
-	        ctx[22]);
+	        ctx[25]);
 	      }
 
 	      if (dirty[0] &
@@ -11783,10 +11822,13 @@
 	      if (if_block1) if_block1.d();
 	      /*input_binding*/
 
-	      ctx[33](null);
+	      ctx[36](null);
 	      if (if_block2) if_block2.d();
 	      if (if_block3) if_block3.d();
 	      if (if_block4) if_block4.d();
+	      /*div3_binding*/
+
+	      ctx[37](null);
 	      mounted = false;
 	      run_all(dispose);
 	    }
@@ -11887,6 +11929,11 @@
 	    ml = null
 	  } = $$props;
 	  let inputEl;
+
+	  let _rootEL;
+
+	  let _leadingContentSlot = false;
+	  let _trailingContentSlot = false;
 	  let _debounceId = null;
 
 	  function onKeyUp(e) {
@@ -11918,6 +11965,18 @@
 	    if (prefix != "" || suffix != "") {
 	      console.warn("GoAInput [prefix] and [suffix] properties are deprecated. Instead use leadingContent and trailingContent.");
 	    }
+
+	    const leadingContentSlot = _rootEL.querySelector("slot[name=leadingContent]");
+
+	    if (leadingContentSlot && leadingContentSlot.assignedNodes().length > 0) {
+	      $$invalidate(22, _leadingContentSlot = true);
+	    }
+
+	    const trailingContentSlot = _rootEL.querySelector("slot[name=trailingContent]");
+
+	    if (trailingContentSlot && trailingContentSlot.assignedNodes().length > 0) {
+	      $$invalidate(23, _trailingContentSlot = true);
+	    }
 	  });
 
 	  function input_binding($$value) {
@@ -11927,6 +11986,13 @@
 	    });
 	  }
 
+	  function div3_binding($$value) {
+	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+	      _rootEL = $$value;
+	      $$invalidate(21, _rootEL);
+	    });
+	  }
+
 	  $$self.$$set = $$props => {
 	    if ('type' in $$props) $$invalidate(1, type = $$props.type);
 	    if ('name' in $$props) $$invalidate(2, name = $$props.name);
@@ -11936,11 +12002,11 @@
 	    if ('leadingicon' in $$props) $$invalidate(5, leadingicon = $$props.leadingicon);
 	    if ('trailingicon' in $$props) $$invalidate(6, trailingicon = $$props.trailingicon);
 	    if ('variant' in $$props) $$invalidate(7, variant = $$props.variant);
-	    if ('disabled' in $$props) $$invalidate(26, disabled = $$props.disabled);
-	    if ('handletrailingiconclick' in $$props) $$invalidate(27, handletrailingiconclick = $$props.handletrailingiconclick);
-	    if ('focused' in $$props) $$invalidate(28, focused = $$props.focused);
-	    if ('readonly' in $$props) $$invalidate(29, readonly = $$props.readonly);
-	    if ('error' in $$props) $$invalidate(30, error = $$props.error);
+	    if ('disabled' in $$props) $$invalidate(29, disabled = $$props.disabled);
+	    if ('handletrailingiconclick' in $$props) $$invalidate(30, handletrailingiconclick = $$props.handletrailingiconclick);
+	    if ('focused' in $$props) $$invalidate(31, focused = $$props.focused);
+	    if ('readonly' in $$props) $$invalidate(32, readonly = $$props.readonly);
+	    if ('error' in $$props) $$invalidate(33, error = $$props.error);
 	    if ('testid' in $$props) $$invalidate(8, testid = $$props.testid);
 	    if ('width' in $$props) $$invalidate(9, width = $$props.width);
 	    if ('arialabel' in $$props) $$invalidate(10, arialabel = $$props.arialabel);
@@ -11949,7 +12015,7 @@
 	    if ('step' in $$props) $$invalidate(13, step = $$props.step);
 	    if ('prefix' in $$props) $$invalidate(14, prefix = $$props.prefix);
 	    if ('suffix' in $$props) $$invalidate(15, suffix = $$props.suffix);
-	    if ('debounce' in $$props) $$invalidate(31, debounce = $$props.debounce);
+	    if ('debounce' in $$props) $$invalidate(34, debounce = $$props.debounce);
 	    if ('mt' in $$props) $$invalidate(16, mt = $$props.mt);
 	    if ('mr' in $$props) $$invalidate(17, mr = $$props.mr);
 	    if ('mb' in $$props) $$invalidate(18, mb = $$props.mb);
@@ -11959,39 +12025,39 @@
 	  $$self.$$.update = () => {
 	    if ($$self.$$.dirty[0] &
 	    /*handletrailingiconclick*/
-	    134217728) {
-	      $$invalidate(24, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
+	    1073741824) {
+	      $$invalidate(27, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
 	    }
 
-	    if ($$self.$$.dirty[0] &
+	    if ($$self.$$.dirty[1] &
 	    /*focused*/
-	    268435456) {
-	      $$invalidate(32, isFocused = toBoolean(focused));
+	    1) {
+	      $$invalidate(35, isFocused = toBoolean(focused));
 	    }
 
-	    if ($$self.$$.dirty[0] &
+	    if ($$self.$$.dirty[1] &
 	    /*readonly*/
-	    536870912) {
-	      $$invalidate(23, isReadonly = toBoolean(readonly));
+	    2) {
+	      $$invalidate(26, isReadonly = toBoolean(readonly));
 	    }
 
-	    if ($$self.$$.dirty[0] &
+	    if ($$self.$$.dirty[1] &
 	    /*error*/
-	    1073741824) {
-	      $$invalidate(22, isError = toBoolean(error));
+	    4) {
+	      $$invalidate(25, isError = toBoolean(error));
 	    }
 
 	    if ($$self.$$.dirty[0] &
 	    /*disabled*/
-	    67108864) {
-	      $$invalidate(21, isDisabled = toBoolean(disabled));
+	    536870912) {
+	      $$invalidate(24, isDisabled = toBoolean(disabled));
 	    }
 
 	    if ($$self.$$.dirty[0] &
 	    /*inputEl*/
 	    1048576 | $$self.$$.dirty[1] &
 	    /*isFocused*/
-	    2) {
+	    16) {
 	      if (isFocused && inputEl) {
 	        setTimeout(() => inputEl.focus(), 1);
 	      }
@@ -12008,13 +12074,13 @@
 	    }
 	  };
 
-	  return [value, type, name, autocapitalize, placeholder, leadingicon, trailingicon, variant, testid, width, arialabel, min, max, step, prefix, suffix, mt, mr, mb, ml, inputEl, isDisabled, isError, isReadonly, handlesTrailingIconClick, onKeyUp, disabled, handletrailingiconclick, focused, readonly, error, debounce, isFocused, input_binding];
+	  return [value, type, name, autocapitalize, placeholder, leadingicon, trailingicon, variant, testid, width, arialabel, min, max, step, prefix, suffix, mt, mr, mb, ml, inputEl, _rootEL, _leadingContentSlot, _trailingContentSlot, isDisabled, isError, isReadonly, handlesTrailingIconClick, onKeyUp, disabled, handletrailingiconclick, focused, readonly, error, debounce, isFocused, input_binding, div3_binding];
 	}
 
 	class Input extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box;line-height:normal}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%;background-color:var(--goa-color-greyscale-white)}.goa-input:hover{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding:var(--goa-space-xs);line-height:calc(40px - calc(var(--goa-space-xs) * 2));background-color:transparent;width:100%;flex:1 1 auto;font-family:var(--goa-font-family-sans)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--goa-color-greyscale-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m);border-right:1px solid var(--goa-color-greyscale-700)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);border-left:1px solid var(--goa-color-greyscale-700)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--goa-color-greyscale-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--goa-color-greyscale-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error,.error:hover{border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 1px var(--goa-color-interactive-error)}.error:focus-within:hover{border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}input[type="search"]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box;line-height:normal}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%;background-color:var(--goa-color-greyscale-white)}.goa-input:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}.goa-input:active:not(.goa-input-leading-content):not(.goa-input-trailing-content),.goa-input:focus:not(.goa-input-leading-content):not(.goa-input-trailing-content),.goa-input:focus-within:not(.goa-input-leading-content):not(.goa-input-trailing-content){box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding:var(--goa-space-xs);line-height:calc(40px - calc(var(--goa-space-xs) * 2));background-color:transparent;width:100%;flex:1 1 auto;font-family:var(--goa-font-family-sans);z-index:1}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200) !important;cursor:default;box-shadow:none !important}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--goa-color-greyscale-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m);border-right:1px solid var(--goa-color-greyscale-700)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);border-left:1px solid var(--goa-color-greyscale-700)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--goa-color-greyscale-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--goa-color-greyscale-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:not(.goa-input-leading-content):not(.goa-input-trailing-content),.error:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 1px var(--goa-color-interactive-error)}.error:focus-within:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.error .input-leading-content,.error .input-leading-content:hover,.error .input-trailing-content,.error .input-trailing-content:hover{outline:var(--goa-border-width-s) solid var(--goa-color-interactive-error);box-shadow:inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-error)}.error .input-leading-content:focus,.error .input-trailing-content:focus,.error .input-leading-content:active,.error .input-trailing-content:active{outline:var(--goa-border-width-s) solid var(--goa-color-interactive-error);box-shadow:0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus)}.input-leading-content:hover,.input-trailing-content:hover{box-shadow:inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover);outline:var(--goa-border-width-s) solid var(--goa-color-interactive-hover)}.input-leading-content:active,.input-leading-content:focus,.input-leading-content:focus-within,.input-trailing-content:active,.input-trailing-content:focus,.input-trailing-content:focus-within{box-shadow:0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus);outline:var(--goa-border-width-s) solid var(--goa-color-greyscale-700)}.error .input-trailing-content,.input-trailing-content:hover,.input-trailing-content:active,.input-trailing-content:focus,.input-trailing-content:focus-within{border-top-left-radius:var(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m)}.error .input-leading-content,.input-leading-content:hover,.input-leading-content:active,.input-leading-content:focus,.input-leading-content:focus-within{border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m)}.input-leading-content.input-trailing-content,.input-leading-content.input-trailing-content:hover,.input-leading-content.input-trailing-content:active,.input-leading-content.input-trailing-content:focus,.input-leading-content.input-trailing-content:focus-within{border-radius:0}input[type="search"]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
       center center no-repeat}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
@@ -12029,11 +12095,11 @@
 	      leadingicon: 5,
 	      trailingicon: 6,
 	      variant: 7,
-	      disabled: 26,
-	      handletrailingiconclick: 27,
-	      focused: 28,
-	      readonly: 29,
-	      error: 30,
+	      disabled: 29,
+	      handletrailingiconclick: 30,
+	      focused: 31,
+	      readonly: 32,
+	      error: 33,
 	      testid: 8,
 	      width: 9,
 	      arialabel: 10,
@@ -12042,7 +12108,7 @@
 	      step: 13,
 	      prefix: 14,
 	      suffix: 15,
-	      debounce: 31,
+	      debounce: 34,
 	      mt: 16,
 	      mr: 17,
 	      mb: 18,
@@ -12154,7 +12220,7 @@
 	  }
 
 	  get disabled() {
-	    return this.$$.ctx[26];
+	    return this.$$.ctx[29];
 	  }
 
 	  set disabled(disabled) {
@@ -12165,7 +12231,7 @@
 	  }
 
 	  get handletrailingiconclick() {
-	    return this.$$.ctx[27];
+	    return this.$$.ctx[30];
 	  }
 
 	  set handletrailingiconclick(handletrailingiconclick) {
@@ -12176,7 +12242,7 @@
 	  }
 
 	  get focused() {
-	    return this.$$.ctx[28];
+	    return this.$$.ctx[31];
 	  }
 
 	  set focused(focused) {
@@ -12187,7 +12253,7 @@
 	  }
 
 	  get readonly() {
-	    return this.$$.ctx[29];
+	    return this.$$.ctx[32];
 	  }
 
 	  set readonly(readonly) {
@@ -12198,7 +12264,7 @@
 	  }
 
 	  get error() {
-	    return this.$$.ctx[30];
+	    return this.$$.ctx[33];
 	  }
 
 	  set error(error) {
@@ -12297,7 +12363,7 @@
 	  }
 
 	  get debounce() {
-	    return this.$$.ctx[31];
+	    return this.$$.ctx[34];
 	  }
 
 	  set debounce(debounce) {
@@ -12792,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");
@@ -12854,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;
 	      }
@@ -12916,7 +12985,7 @@
 
 	      if (
 	      /*_isClosable*/
-	      ctx[8]) {
+	      ctx[9]) {
 	        if (if_block2) {
 	          if_block2.p(ctx, dirty);
 	        } else {
@@ -12941,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 &
@@ -12963,7 +13032,7 @@
 	        div5_intro = create_in_transition(div5, fly, {
 	          duration:
 	          /*_transitionTime*/
-	          ctx[10],
+	          ctx[11],
 	          y: 200
 	        });
 	        div5_intro.start();
@@ -12973,7 +13042,7 @@
 	        div6_intro = create_in_transition(div6, fade, {
 	          duration:
 	          /*_transitionTime*/
-	          ctx[10]
+	          ctx[11]
 	        });
 	        div6_intro.start();
 	      });
@@ -12985,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;
 	    },
@@ -13008,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) {
@@ -13038,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");
@@ -13055,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 &
@@ -13083,7 +13155,7 @@
 	    }
 
 	  };
-	} // (129:14) {:else}
+	} // (145:14) {:else}
 
 
 	function create_else_block$3(ctx) {
@@ -13105,7 +13177,7 @@
 	    }
 
 	  };
-	} // (127:14) {#if heading}
+	} // (143:14) {#if heading}
 
 
 	function create_if_block_2$2(ctx) {
@@ -13134,7 +13206,7 @@
 	    }
 
 	  };
-	} // (133:12) {#if _isClosable}
+	} // (149:12) {#if _isClosable}
 
 
 	function create_if_block_1$2(ctx) {
@@ -13159,7 +13231,7 @@
 	      if (!mounted) {
 	        dispose = listen(goa_icon_button, "click",
 	        /*close*/
-	        ctx[11]);
+	        ctx[12]);
 	        mounted = true;
 	      }
 	    },
@@ -13180,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();
@@ -13197,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 {
@@ -13270,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
@@ -13319,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);
 	  };
@@ -13352,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;
 
@@ -13386,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);
@@ -13454,7 +13549,7 @@
 	  }
 
 	  get closable() {
-	    return this.$$.ctx[13];
+	    return this.$$.ctx[14];
 	  }
 
 	  set closable(closable) {
@@ -13476,7 +13571,7 @@
 	  }
 
 	  get transition() {
-	    return this.$$.ctx[14];
+	    return this.$$.ctx[15];
 	  }
 
 	  set transition(transition) {