@abgov/react-components 4.0.0-alpha.121 → 4.0.0-alpha.122

package/react-components.umd.js

@@ -1193,7 +1193,7 @@
 	/* libs/web-components/src/components/accordion/Accordion.svelte generated by Svelte v3.51.0 */
 
 
-	function create_fragment$M(ctx) {
+	function create_fragment$N(ctx) {
 	  let div3;
 	  let details;
 	  let summary;
@@ -1396,7 +1396,7 @@
 	  };
 	}
 
-	function instance$G($$self, $$props, $$invalidate) {
+	function instance$H($$self, $$props, $$invalidate) {
 	  let isOpen;
 	  const [HeadingSizes, validateHeadingSize] = typeValidator("Accordion heading size", ["small", "medium"]);
 	  let {
@@ -1474,7 +1474,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$G, create_fragment$M, safe_not_equal, {
+	    }, instance$H, create_fragment$N, safe_not_equal, {
 	      open: 10,
 	      heading: 0,
 	      secondarytext: 1,
@@ -1663,7 +1663,7 @@
 	} // (19:4) {#if url}
 
 
-	function create_if_block$l(ctx) {
+	function create_if_block$m(ctx) {
 	  let a;
 	  let img0;
 	  let img0_src_value;
@@ -1730,7 +1730,7 @@
 	  };
 	}
 
-	function create_fragment$L(ctx) {
+	function create_fragment$M(ctx) {
 	  let div2;
 	  let div1;
 	  let t;
@@ -1740,7 +1740,7 @@
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*url*/
-	    ctx[1]) return create_if_block$l;
+	    ctx[1]) return create_if_block$m;
 	    return create_else_block$8;
 	  }
 
@@ -1814,7 +1814,7 @@
 	  };
 	}
 
-	function instance$F($$self, $$props, $$invalidate) {
+	function instance$G($$self, $$props, $$invalidate) {
 	  let {
 	    heading = ""
 	  } = $$props;
@@ -1846,7 +1846,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$F, create_fragment$L, safe_not_equal, {
+	    }, instance$G, create_fragment$M, safe_not_equal, {
 	      heading: 0,
 	      url: 1,
 	      testid: 2,
@@ -1974,7 +1974,7 @@
 	} // (50:2) {#if content}
 
 
-	function create_if_block$k(ctx) {
+	function create_if_block$l(ctx) {
 	  let div;
 	  let t;
 	  return {
@@ -2006,7 +2006,7 @@
 	  };
 	}
 
-	function create_fragment$K(ctx) {
+	function create_fragment$L(ctx) {
 	  let div;
 	  let t;
 	  let div_style_value;
@@ -2023,7 +2023,7 @@
 	  let if_block0 = current_block_type(ctx);
 	  let if_block1 =
 	  /*content*/
-	  ctx[2] && create_if_block$k(ctx);
+	  ctx[2] && create_if_block$l(ctx);
 	  return {
 	    c() {
 	      div = element("div");
@@ -2080,7 +2080,7 @@
 	        if (if_block1) {
 	          if_block1.p(ctx, dirty);
 	        } else {
-	          if_block1 = create_if_block$k(ctx);
+	          if_block1 = create_if_block$l(ctx);
 	          if_block1.c();
 	          if_block1.m(div, null);
 	        }
@@ -2142,7 +2142,7 @@
 	  };
 	}
 
-	function instance$E($$self, $$props, $$invalidate) {
+	function instance$F($$self, $$props, $$invalidate) {
 	  let showIcon;
 	  let iconType;
 	  const [Types, validateType] = typeValidator("Badge type", ["success", "important", "information", "emergency", "dark", "midtone", "light"], true);
@@ -2222,7 +2222,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$E, create_fragment$K, safe_not_equal, {
+	    }, instance$F, create_fragment$L, safe_not_equal, {
 	      type: 0,
 	      testid: 1,
 	      content: 2,
@@ -2342,7 +2342,7 @@
 	customElements.define("goa-badge", Badge);
 	/* libs/web-components/src/components/block/Block.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$J(ctx) {
+	function create_fragment$K(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -2416,7 +2416,7 @@
 	  };
 	}
 
-	function instance$D($$self, $$props, $$invalidate) {
+	function instance$E($$self, $$props, $$invalidate) {
 	  let {
 	    gap = "m"
 	  } = $$props;
@@ -2460,7 +2460,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$D, create_fragment$J, safe_not_equal, {
+	    }, instance$E, create_fragment$K, safe_not_equal, {
 	      gap: 0,
 	      direction: 1,
 	      alignment: 2,
@@ -2645,7 +2645,7 @@
 	} // (46:2) {#if type === "start"}
 
 
-	function create_if_block$j(ctx) {
+	function create_if_block$k(ctx) {
 	  let span;
 	  let t;
 	  let goa_icon;
@@ -2766,7 +2766,7 @@
 	  };
 	}
 
-	function create_fragment$I(ctx) {
+	function create_fragment$J(ctx) {
 	  let button;
 	  let button_class_value;
 	  let button_style_value;
@@ -2776,7 +2776,7 @@
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*type*/
-	    ctx[0] === "start") return create_if_block$j;
+	    ctx[0] === "start") return create_if_block$k;
 	    return create_else_block$6;
 	  }
 
@@ -2920,7 +2920,7 @@
 	  };
 	}
 
-	function instance$C($$self, $$props, $$invalidate) {
+	function instance$D($$self, $$props, $$invalidate) {
 	  let isDisabled;
 	  let isButtonDark;
 	  const [Types, validateType] = typeValidator("Button type", ["primary", "submit", "secondary", "tertiary", "start"], true);
@@ -3015,7 +3015,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$C, create_fragment$I, safe_not_equal, {
+	    }, instance$D, create_fragment$J, safe_not_equal, {
 	      type: 0,
 	      size: 1,
 	      variant: 2,
@@ -3171,7 +3171,7 @@
 	customElements.define("goa-button", Button);
 	/* libs/web-components/src/components/button-group/ButtonGroup.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$H(ctx) {
+	function create_fragment$I(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -3241,7 +3241,7 @@
 	  };
 	}
 
-	function instance$B($$self, $$props, $$invalidate) {
+	function instance$C($$self, $$props, $$invalidate) {
 	  let _alignment;
 
 	  let {
@@ -3305,7 +3305,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$B, create_fragment$H, safe_not_equal, {
+	    }, instance$C, create_fragment$I, safe_not_equal, {
 	      alignment: 7,
 	      gap: 0,
 	      testid: 1,
@@ -3413,7 +3413,7 @@
 	customElements.define("goa-button-group", ButtonGroup);
 	/* libs/web-components/src/components/callout/Callout.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block$i(ctx) {
+	function create_if_block$j(ctx) {
 	  let h3;
 	  let t;
 	  return {
@@ -3444,7 +3444,7 @@
 	  };
 	}
 
-	function create_fragment$G(ctx) {
+	function create_fragment$H(ctx) {
 	  let div;
 	  let span0;
 	  let goa_icon;
@@ -3457,7 +3457,7 @@
 	  let div_style_value;
 	  let if_block =
 	  /*heading*/
-	  ctx[5] && create_if_block$i(ctx);
+	  ctx[5] && create_if_block$j(ctx);
 	  return {
 	    c() {
 	      div = element("div");
@@ -3536,7 +3536,7 @@
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
-	          if_block = create_if_block$i(ctx);
+	          if_block = create_if_block$j(ctx);
 	          if_block.c();
 	          if_block.m(span1, t1);
 	        }
@@ -3579,7 +3579,7 @@
 	  };
 	}
 
-	function instance$A($$self, $$props, $$invalidate) {
+	function instance$B($$self, $$props, $$invalidate) {
 	  let iconType;
 	  const [Types, validateType] = typeValidator("Callout type", ["emergency", "important", "information", "event", "success"], true);
 	  let {
@@ -3636,7 +3636,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$A, create_fragment$G, safe_not_equal, {
+	    }, instance$B, create_fragment$H, safe_not_equal, {
 	      mt: 0,
 	      mr: 1,
 	      mb: 2,
@@ -3744,7 +3744,7 @@
 	customElements.define("goa-callout", Callout);
 	/* libs/web-components/src/components/card-actions/CardActions.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$F(ctx) {
+	function create_fragment$G(ctx) {
 	  let goa_card_content;
 	  return {
 	    c() {
@@ -3775,7 +3775,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$F, safe_not_equal, {}, null);
+	    }, null, create_fragment$G, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -3789,7 +3789,7 @@
 	customElements.define("goa-card-actions", CardActions);
 	/* libs/web-components/src/components/card/Card.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$E(ctx) {
+	function create_fragment$F(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -3868,7 +3868,7 @@
 	  };
 	}
 
-	function instance$z($$self, $$props, $$invalidate) {
+	function instance$A($$self, $$props, $$invalidate) {
 	  let {
 	    elevation = 0
 	  } = $$props;
@@ -3916,7 +3916,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$z, create_fragment$E, safe_not_equal, {
+	    }, instance$A, create_fragment$F, safe_not_equal, {
 	      elevation: 0,
 	      width: 1,
 	      height: 2,
@@ -4036,7 +4036,7 @@
 	customElements.define("goa-card", Card);
 	/* libs/web-components/src/components/card-content/CardContent.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$D(ctx) {
+	function create_fragment$E(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -4069,7 +4069,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$D, safe_not_equal, {}, null);
+	    }, null, create_fragment$E, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -4083,7 +4083,7 @@
 	customElements.define("goa-card-content", CardContent);
 	/* libs/web-components/src/components/card-group/CardGroup.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$C(ctx) {
+	function create_fragment$D(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -4116,7 +4116,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$C, safe_not_equal, {}, null);
+	    }, null, create_fragment$D, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -4130,7 +4130,7 @@
 	customElements.define("goa-card-group", CardGroup);
 	/* libs/web-components/src/components/card-image/CardImage.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$B(ctx) {
+	function create_fragment$C(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -4178,7 +4178,7 @@
 	  };
 	}
 
-	function instance$y($$self, $$props, $$invalidate) {
+	function instance$z($$self, $$props, $$invalidate) {
 	  let {
 	    src
 	  } = $$props;
@@ -4202,7 +4202,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$y, create_fragment$B, safe_not_equal, {
+	    }, instance$z, create_fragment$C, safe_not_equal, {
 	      src: 0,
 	      height: 1
 	    }, null);
@@ -4277,7 +4277,7 @@
 	} // (68:4) {#if isIndeterminate}
 
 
-	function create_if_block$h(ctx) {
+	function create_if_block$i(ctx) {
 	  let svg;
 	  let rect;
 	  return {
@@ -4304,7 +4304,7 @@
 	  };
 	}
 
-	function create_fragment$A(ctx) {
+	function create_fragment$B(ctx) {
 	  let label;
 	  let div0;
 	  let input;
@@ -4322,7 +4322,7 @@
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*isIndeterminate*/
-	    ctx[10]) return create_if_block$h;
+	    ctx[10]) return create_if_block$i;
 	    if (
 	    /*isChecked*/
 	    ctx[9]) return create_if_block_1$a;
@@ -4553,7 +4553,7 @@
 	  };
 	}
 
-	function instance$x($$self, $$props, $$invalidate) {
+	function instance$y($$self, $$props, $$invalidate) {
 	  let isDisabled;
 	  let isError;
 	  let isChecked;
@@ -4668,7 +4668,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$x, create_fragment$A, safe_not_equal, {
+	    }, instance$y, create_fragment$B, safe_not_equal, {
 	      name: 0,
 	      checked: 14,
 	      text: 1,
@@ -4870,7 +4870,7 @@
 	} // (54:2) {#if _deletable}
 
 
-	function create_if_block$g(ctx) {
+	function create_if_block$h(ctx) {
 	  let goa_icon;
 	  let goa_icon_fillcolor_value;
 	  let goa_icon_opacity_value;
@@ -4926,7 +4926,7 @@
 	  };
 	}
 
-	function create_fragment$z(ctx) {
+	function create_fragment$A(ctx) {
 	  let div1;
 	  let t0;
 	  let div0;
@@ -4940,7 +4940,7 @@
 	  ctx[4] && create_if_block_1$9(ctx);
 	  let if_block1 =
 	  /*_deletable*/
-	  ctx[11] && create_if_block$g(ctx);
+	  ctx[11] && create_if_block$h(ctx);
 	  return {
 	    c() {
 	      div1 = element("div");
@@ -5035,7 +5035,7 @@
 	        if (if_block1) {
 	          if_block1.p(ctx, dirty);
 	        } else {
-	          if_block1 = create_if_block$g(ctx);
+	          if_block1 = create_if_block$h(ctx);
 	          if_block1.c();
 	          if_block1.m(div1, null);
 	        }
@@ -5108,7 +5108,7 @@
 	  };
 	}
 
-	function instance$w($$self, $$props, $$invalidate) {
+	function instance$x($$self, $$props, $$invalidate) {
 	  let {
 	    mt = null
 	  } = $$props;
@@ -5209,7 +5209,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$w, create_fragment$z, safe_not_equal, {
+	    }, instance$x, create_fragment$A, safe_not_equal, {
 	      mt: 0,
 	      mr: 1,
 	      mb: 2,
@@ -5463,7 +5463,7 @@
 	/* libs/web-components/src/components/circular-progress/CircularProgress.svelte generated by Svelte v3.51.0 */
 
 
-	function create_if_block$f(ctx) {
+	function create_if_block$g(ctx) {
 	  let current_block_type_index;
 	  let if_block;
 	  let if_block_anchor;
@@ -5834,12 +5834,12 @@
 	  };
 	}
 
-	function create_fragment$y(ctx) {
+	function create_fragment$z(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
 	  /*isVisible*/
-	  ctx[5] && create_if_block$f(ctx);
+	  ctx[5] && create_if_block$g(ctx);
 	  return {
 	    c() {
 	      if (if_block) if_block.c();
@@ -5866,7 +5866,7 @@
 	            transition_in(if_block, 1);
 	          }
 	        } else {
-	          if_block = create_if_block$f(ctx);
+	          if_block = create_if_block$g(ctx);
 	          if_block.c();
 	          transition_in(if_block, 1);
 	          if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -5899,7 +5899,7 @@
 	  };
 	}
 
-	function instance$v($$self, $$props, $$invalidate) {
+	function instance$w($$self, $$props, $$invalidate) {
 	  let isVisible;
 	  const [Variants, validateVariant] = typeValidator("Circular progress variant", ["fullscreen", "inline"]);
 	  const [Sizes, validateSize] = typeValidator("Button size", ["small", "large"]);
@@ -5957,7 +5957,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$v, create_fragment$y, safe_not_equal, {
+	    }, instance$w, create_fragment$z, safe_not_equal, {
 	      variant: 6,
 	      size: 7,
 	      message: 0,
@@ -6041,7 +6041,7 @@
 	customElements.define("goa-circular-progress", CircularProgress);
 	/* libs/web-components/src/components/container/Container.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$x(ctx) {
+	function create_fragment$y(ctx) {
 	  let div3;
 	  let header;
 	  let div0;
@@ -6166,7 +6166,7 @@
 	  };
 	}
 
-	function instance$u($$self, $$props, $$invalidate) {
+	function instance$v($$self, $$props, $$invalidate) {
 	  const [Types, validateType] = typeValidator("Container type", ["interactive", "info", "error", "success", "important", "non-interactive"]);
 	  const [Accents, validateAccent] = typeValidator("Container accent", ["thick", "thin", "filled"]);
 	  const [Paddings, validatePadding] = typeValidator("Container padding", ["relaxed", "compact"]);
@@ -6222,7 +6222,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$u, create_fragment$x, safe_not_equal, {
+	    }, instance$v, create_fragment$y, safe_not_equal, {
 	      type: 0,
 	      accent: 1,
 	      padding: 2,
@@ -6342,7 +6342,7 @@
 	customElements.define("goa-container", Container);
 	/* libs/web-components/src/components/details/Details.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$w(ctx) {
+	function create_fragment$x(ctx) {
 	  let details;
 	  let summary;
 	  let goa_icon;
@@ -6442,7 +6442,7 @@
 	  };
 	}
 
-	function instance$t($$self, $$props, $$invalidate) {
+	function instance$u($$self, $$props, $$invalidate) {
 	  let {
 	    heading
 	  } = $$props;
@@ -6502,7 +6502,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$t, create_fragment$w, safe_not_equal, {
+	    }, instance$u, create_fragment$x, safe_not_equal, {
 	      heading: 0,
 	      mt: 1,
 	      mr: 2,
@@ -6586,7 +6586,7 @@
 	customElements.define("goa-details", Details);
 	/* libs/web-components/src/components/divider/Divider.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$v(ctx) {
+	function create_fragment$w(ctx) {
 	  let hr;
 	  let hr_style_value;
 	  return {
@@ -6645,7 +6645,7 @@
 	  };
 	}
 
-	function instance$s($$self, $$props, $$invalidate) {
+	function instance$t($$self, $$props, $$invalidate) {
 	  let {
 	    testid = ""
 	  } = $$props;
@@ -6681,7 +6681,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$s, create_fragment$v, safe_not_equal, {
+	    }, instance$t, create_fragment$w, safe_not_equal, {
 	      testid: 0,
 	      mt: 1,
 	      mr: 2,
@@ -7048,7 +7048,7 @@
 	} // (237:2) {#if _native}
 
 
-	function create_if_block$e(ctx) {
+	function create_if_block$f(ctx) {
 	  let select;
 	  let slot;
 	  let select_aria_label_value;
@@ -7471,7 +7471,7 @@
 	  };
 	}
 
-	function create_fragment$u(ctx) {
+	function create_fragment$v(ctx) {
 	  let div;
 	  let div_data_testid_value;
 	  let div_style_value;
@@ -7479,7 +7479,7 @@
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*_native*/
-	    ctx[22]) return create_if_block$e;
+	    ctx[22]) return create_if_block$f;
 	    return create_else_block$5;
 	  }
 
@@ -7588,7 +7588,7 @@
 	  };
 	}
 
-	function instance$r($$self, $$props, $$invalidate) {
+	function instance$s($$self, $$props, $$invalidate) {
 	  const showMenu = _async(function () {
 	    if (_disabled || _isMenuVisible) {
 	      return;
@@ -7980,7 +7980,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$r, create_fragment$u, safe_not_equal, {
+	    }, instance$s, create_fragment$v, safe_not_equal, {
 	      name: 0,
 	      arialabel: 1,
 	      value: 28,
@@ -8184,7 +8184,7 @@
 	customElements.define("goa-dropdown", Dropdown);
 	/* libs/web-components/src/components/dropdown/DropdownItem.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$t(ctx) {
+	function create_fragment$u(ctx) {
 	  return {
 	    c() {
 	      this.c = noop;
@@ -8205,7 +8205,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$t, safe_not_equal, {}, null);
+	    }, null, create_fragment$u, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -8219,7 +8219,7 @@
 	customElements.define("goa-dropdown-item", DropdownItem);
 	/* libs/web-components/src/components/focus-trap/FocusTrap.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$s(ctx) {
+	function create_fragment$t(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -8279,7 +8279,7 @@
 	  }
 	}
 
-	function instance$q($$self, $$props, $$invalidate) {
+	function instance$r($$self, $$props, $$invalidate) {
 	  let isActive;
 	  let {
 	    active
@@ -8448,7 +8448,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$q, create_fragment$s, safe_not_equal, {
+	    }, instance$r, create_fragment$t, safe_not_equal, {
 	      active: 1
 	    }, null);
 
@@ -8484,7 +8484,7 @@
 	customElements.define("goa-focus-trap", FocusTrap);
 	/* libs/web-components/src/components/footer/Footer.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block$d(ctx) {
+	function create_if_block$e(ctx) {
 	  let goa_divider;
 	  return {
 	    c() {
@@ -8503,7 +8503,7 @@
 	  };
 	}
 
-	function create_fragment$r(ctx) {
+	function create_fragment$s(ctx) {
 	  let div5;
 	  let div4;
 	  let div0;
@@ -8521,7 +8521,7 @@
 	  /*navLinks*/
 	  ctx[2] &&
 	  /*navLinks*/
-	  ctx[2].length > 0 && create_if_block$d();
+	  ctx[2].length > 0 && create_if_block$e();
 	  return {
 	    c() {
 	      div5 = element("div");
@@ -8594,7 +8594,7 @@
 	      /*navLinks*/
 	      ctx[2].length > 0) {
 	        if (if_block) ;else {
-	          if_block = create_if_block$d();
+	          if_block = create_if_block$e();
 	          if_block.c();
 	          if_block.m(div4, t1);
 	        }
@@ -8646,7 +8646,7 @@
 	  };
 	}
 
-	function instance$p($$self, $$props, $$invalidate) {
+	function instance$q($$self, $$props, $$invalidate) {
 	  let {
 	    maxcontentwidth = ""
 	  } = $$props;
@@ -8685,7 +8685,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$p, create_fragment$r, safe_not_equal, {
+	    }, instance$q, create_fragment$s, safe_not_equal, {
 	      maxcontentwidth: 0
 	    }, null);
 
@@ -8775,7 +8775,7 @@
 	  };
 	}
 
-	function create_fragment$q(ctx) {
+	function create_fragment$r(ctx) {
 	  let section;
 	  let div;
 	  let t;
@@ -8863,7 +8863,7 @@
 	  };
 	}
 
-	function instance$o($$self, $$props, $$invalidate) {
+	function instance$p($$self, $$props, $$invalidate) {
 	  let rootEl;
 	  let children = [];
 	  onMount(function () {
@@ -8898,7 +8898,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$o, create_fragment$q, safe_not_equal, {}, null);
+	    }, instance$p, create_fragment$r, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -8919,7 +8919,7 @@
 	} // (31:2) {#if heading}
 
 
-	function create_if_block$c(ctx) {
+	function create_if_block$d(ctx) {
 	  let div;
 	  let t0;
 	  let t1;
@@ -9008,7 +9008,7 @@
 	  };
 	}
 
-	function create_fragment$p(ctx) {
+	function create_fragment$q(ctx) {
 	  let section;
 	  let t0;
 	  let div;
@@ -9017,7 +9017,7 @@
 	  let ul_style_value;
 	  let if_block =
 	  /*heading*/
-	  ctx[0] && create_if_block$c(ctx);
+	  ctx[0] && create_if_block$d(ctx);
 	  let each_value =
 	  /*children*/
 	  ctx[3];
@@ -9084,7 +9084,7 @@
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
-	          if_block = create_if_block$c(ctx);
+	          if_block = create_if_block$d(ctx);
 	          if_block.c();
 	          if_block.m(section, t0);
 	        }
@@ -9155,7 +9155,7 @@
 	  };
 	}
 
-	function instance$n($$self, $$props, $$invalidate) {
+	function instance$o($$self, $$props, $$invalidate) {
 	  let {
 	    heading = ""
 	  } = $$props;
@@ -9207,7 +9207,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$n, create_fragment$p, safe_not_equal, {
+	    }, instance$o, create_fragment$q, safe_not_equal, {
 	      heading: 0,
 	      maxcolumncount: 1
 	    }, null);
@@ -9405,7 +9405,7 @@
 	} // (48:2) {#if helptext}
 
 
-	function create_if_block$b(ctx) {
+	function create_if_block$c(ctx) {
 	  let div;
 	  let t;
 	  return {
@@ -9437,7 +9437,7 @@
 	  };
 	}
 
-	function create_fragment$o(ctx) {
+	function create_fragment$p(ctx) {
 	  let div1;
 	  let t0;
 	  let div0;
@@ -9452,7 +9452,7 @@
 	  ctx[7] && create_if_block_1$6(ctx);
 	  let if_block2 =
 	  /*helptext*/
-	  ctx[6] && create_if_block$b(ctx);
+	  ctx[6] && create_if_block$c(ctx);
 	  return {
 	    c() {
 	      div1 = element("div");
@@ -9529,7 +9529,7 @@
 	        if (if_block2) {
 	          if_block2.p(ctx, dirty);
 	        } else {
-	          if_block2 = create_if_block$b(ctx);
+	          if_block2 = create_if_block$c(ctx);
 	          if_block2.c();
 	          if_block2.m(div1, null);
 	        }
@@ -9574,7 +9574,7 @@
 	  };
 	}
 
-	function instance$m($$self, $$props, $$invalidate) {
+	function instance$n($$self, $$props, $$invalidate) {
 	  const [REQUIREMENT_TYPES, validateRequirementType] = typeValidator("Requirement type", ["optional", "required"], false);
 	  let {
 	    testid = ""
@@ -9630,7 +9630,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$m, create_fragment$o, safe_not_equal, {
+	    }, instance$n, create_fragment$p, safe_not_equal, {
 	      testid: 0,
 	      mt: 1,
 	      mr: 2,
@@ -9762,7 +9762,7 @@
 	customElements.define("goa-form-item", FormItem);
 	/* libs/web-components/src/components/grid/Grid.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$n(ctx) {
+	function create_fragment$o(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -9830,7 +9830,7 @@
 	  };
 	}
 
-	function instance$l($$self, $$props, $$invalidate) {
+	function instance$m($$self, $$props, $$invalidate) {
 	  let {
 	    gap = "m"
 	  } = $$props;
@@ -9875,7 +9875,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$l, create_fragment$n, safe_not_equal, {
+	    }, instance$m, create_fragment$o, safe_not_equal, {
 	      gap: 0,
 	      minchildwidth: 1,
 	      mt: 2,
@@ -9971,7 +9971,7 @@
 	customElements.define("goa-grid", Grid);
 	/* libs/web-components/src/components/hero-banner/HeroBanner.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$m(ctx) {
+	function create_fragment$n(ctx) {
 	  let div1;
 	  let goa_page_block;
 	  let h1;
@@ -10056,7 +10056,7 @@
 	  };
 	}
 
-	function instance$k($$self, $$props, $$invalidate) {
+	function instance$l($$self, $$props, $$invalidate) {
 	  let {
 	    heading
 	  } = $$props;
@@ -10084,7 +10084,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$k, create_fragment$m, safe_not_equal, {
+	    }, instance$l, create_fragment$n, safe_not_equal, {
 	      heading: 0,
 	      backgroundurl: 1,
 	      minheight: 2
@@ -10144,7 +10144,7 @@
 	customElements.define("goa-hero-banner", HeroBanner);
 	/* libs/web-components/src/components/icon-button/IconButton.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$l(ctx) {
+	function create_fragment$m(ctx) {
 	  let button;
 	  let goa_icon;
 	  let button_style_value;
@@ -10316,7 +10316,7 @@
 	  }));
 	}
 
-	function instance$j($$self, $$props, $$invalidate) {
+	function instance$k($$self, $$props, $$invalidate) {
 	  let css;
 	  let isDisabled;
 	  let isInverted;
@@ -10421,7 +10421,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$j, create_fragment$l, safe_not_equal, {
+	    }, instance$k, create_fragment$m, safe_not_equal, {
 	      icon: 0,
 	      size: 1,
 	      theme: 2,
@@ -10589,7 +10589,7 @@
 	customElements.define("goa-icon-button", IconButton);
 	/* libs/web-components/src/components/icon/Icon.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block$a(ctx) {
+	function create_if_block$b(ctx) {
 	  let show_if;
 	  let if_block_anchor;
 
@@ -10735,12 +10735,12 @@
 	  };
 	}
 
-	function create_fragment$k(ctx) {
+	function create_fragment$l(ctx) {
 	  let div;
 	  let div_style_value;
 	  let if_block =
 	  /*type*/
-	  ctx[4] && create_if_block$a(ctx);
+	  ctx[4] && create_if_block$b(ctx);
 	  return {
 	    c() {
 	      div = element("div");
@@ -10793,7 +10793,7 @@
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
-	          if_block = create_if_block$a(ctx);
+	          if_block = create_if_block$b(ctx);
 	          if_block.c();
 	          if_block.m(div, null);
 	        }
@@ -10866,7 +10866,7 @@
 	  };
 	}
 
-	function instance$i($$self, $$props, $$invalidate) {
+	function instance$j($$self, $$props, $$invalidate) {
 	  let isInverted;
 
 	  let _size;
@@ -10968,7 +10968,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$i, create_fragment$k, safe_not_equal, {
+	    }, instance$j, create_fragment$l, safe_not_equal, {
 	      mt: 0,
 	      mr: 1,
 	      mb: 2,
@@ -11305,7 +11305,7 @@
 	} // (161:4) {#if suffix}
 
 
-	function create_if_block$9(ctx) {
+	function create_if_block$a(ctx) {
 	  let span;
 	  let t;
 	  return {
@@ -11337,7 +11337,7 @@
 	  };
 	}
 
-	function create_fragment$j(ctx) {
+	function create_fragment$k(ctx) {
 	  let div3;
 	  let div2;
 	  let t0;
@@ -11375,7 +11375,7 @@
 	  ctx[24] && create_if_block_1$4(ctx);
 	  let if_block4 =
 	  /*suffix*/
-	  ctx[15] && create_if_block$9(ctx);
+	  ctx[15] && create_if_block$a(ctx);
 	  return {
 	    c() {
 	      div3 = element("div");
@@ -11696,7 +11696,7 @@
 	        if (if_block4) {
 	          if_block4.p(ctx, dirty);
 	        } else {
-	          if_block4 = create_if_block$9(ctx);
+	          if_block4 = create_if_block$a(ctx);
 	          if_block4.c();
 	          if_block4.m(div2, t6);
 	        }
@@ -11776,7 +11776,7 @@
 	  }));
 	}
 
-	function instance$h($$self, $$props, $$invalidate) {
+	function instance$i($$self, $$props, $$invalidate) {
 	  let handlesTrailingIconClick;
 	  let isFocused;
 	  let isReadonly;
@@ -11996,7 +11996,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$h, create_fragment$j, safe_not_equal, {
+	    }, instance$i, create_fragment$k, safe_not_equal, {
 	      type: 1,
 	      name: 2,
 	      value: 0,
@@ -12494,7 +12494,7 @@
 	} // (56:2) {#if version}
 
 
-	function create_if_block$8(ctx) {
+	function create_if_block$9(ctx) {
 	  let div;
 	  let t;
 	  return {
@@ -12527,7 +12527,7 @@
 	  };
 	}
 
-	function create_fragment$i(ctx) {
+	function create_fragment$j(ctx) {
 	  let header;
 	  let t0;
 	  let show_if = ["alpha", "beta"].includes(
@@ -12542,7 +12542,7 @@
 	  let if_block1 = show_if && create_if_block_1$3(ctx);
 	  let if_block2 =
 	  /*version*/
-	  ctx[1] && create_if_block$8(ctx);
+	  ctx[1] && create_if_block$9(ctx);
 	  return {
 	    c() {
 	      header = element("header");
@@ -12608,7 +12608,7 @@
 	        if (if_block2) {
 	          if_block2.p(ctx, dirty);
 	        } else {
-	          if_block2 = create_if_block$8(ctx);
+	          if_block2 = create_if_block$9(ctx);
 	          if_block2.c();
 	          if_block2.m(header, null);
 	        }
@@ -12636,7 +12636,7 @@
 	  return val[0].toUpperCase() + val.slice(1);
 	}
 
-	function instance$g($$self, $$props, $$invalidate) {
+	function instance$h($$self, $$props, $$invalidate) {
 	  const [Types, validateType] = typeValidator("Microsite header type", ["live", "alpha", "beta"], true);
 	  let {
 	    type
@@ -12668,7 +12668,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$g, create_fragment$i, safe_not_equal, {
+	    }, instance$h, create_fragment$j, safe_not_equal, {
 	      type: 0,
 	      version: 1,
 	      feedbackurl: 2
@@ -12728,7 +12728,7 @@
 	customElements.define("goa-microsite-header", MicrositeHeader);
 	/* libs/web-components/src/components/modal/Modal.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block$7(ctx) {
+	function create_if_block$8(ctx) {
 	  let goa_focus_trap;
 	  let div6;
 	  let div0;
@@ -12768,7 +12768,7 @@
 	  let if_block1 = current_block_type(ctx);
 	  let if_block2 =
 	  /*_isClosable*/
-	  ctx[7] && create_if_block_1$2(ctx);
+	  ctx[8] && create_if_block_1$2(ctx);
 	  return {
 	    c() {
 	      goa_focus_trap = element("goa-focus-trap");
@@ -12835,20 +12835,23 @@
 	      append(div2, goa_scrollable);
 	      /*goa_scrollable_binding*/
 
-	      ctx[14](goa_scrollable);
+	      ctx[15](goa_scrollable);
 	      /*div2_binding*/
 
-	      ctx[15](div2);
+	      ctx[16](div2);
 	      append(div4, t4);
 	      append(div4, div3);
+	      /*div6_binding*/
+
+	      ctx[17](div6);
 	      current = true;
 
 	      if (!mounted) {
 	        dispose = [listen(div0, "click",
 	        /*close*/
-	        ctx[10]), listen(goa_scrollable, "_scroll",
+	        ctx[11]), listen(goa_scrollable, "_scroll",
 	        /*handleScroll*/
-	        ctx[11]), action_destroyer(noscroll_action = noscroll.call(null, div6, {
+	        ctx[12]), action_destroyer(noscroll_action = noscroll.call(null, div6, {
 	          enable:
 	          /*_isOpen*/
 	          ctx[6]
@@ -12889,7 +12892,7 @@
 
 	      if (
 	      /*_isClosable*/
-	      ctx[7]) {
+	      ctx[8]) {
 	        if (if_block2) {
 	          if_block2.p(ctx, dirty);
 	        } else {
@@ -12936,7 +12939,7 @@
 	        div5_intro = create_in_transition(div5, fly, {
 	          duration:
 	          /*_transitionTime*/
-	          ctx[9],
+	          ctx[10],
 	          y: 200
 	        });
 	        div5_intro.start();
@@ -12946,7 +12949,7 @@
 	        div6_intro = create_in_transition(div6, fade, {
 	          duration:
 	          /*_transitionTime*/
-	          ctx[9]
+	          ctx[10]
 	        });
 	        div6_intro.start();
 	      });
@@ -12958,20 +12961,20 @@
 	      div5_outro = create_out_transition(div5, fly, {
 	        delay:
 	        /*_transitionTime*/
-	        ctx[9],
+	        ctx[10],
 	        duration:
 	        /*_transitionTime*/
-	        ctx[9],
+	        ctx[10],
 	        y: -100
 	      });
 	      if (div6_intro) div6_intro.invalidate();
 	      div6_outro = create_out_transition(div6, fade, {
 	        delay:
 	        /*_transitionTime*/
-	        ctx[9],
+	        ctx[10],
 	        duration:
 	        /*_transitionTime*/
-	        ctx[9]
+	        ctx[10]
 	      });
 	      current = false;
 	    },
@@ -12983,18 +12986,21 @@
 	      if (if_block2) if_block2.d();
 	      /*goa_scrollable_binding*/
 
-	      ctx[14](null);
+	      ctx[15](null);
 	      /*div2_binding*/
 
-	      ctx[15](null);
+	      ctx[16](null);
 	      if (detaching && div5_outro) div5_outro.end();
+	      /*div6_binding*/
+
+	      ctx[17](null);
 	      if (detaching && div6_outro) div6_outro.end();
 	      mounted = false;
 	      run_all(dispose);
 	    }
 
 	  };
-	} // (102:8) {#if calloutvariant !== null}
+	} // (116:8) {#if calloutvariant !== null}
 
 
 	function create_if_block_3$2(ctx) {
@@ -13008,7 +13014,7 @@
 	      goa_icon = element("goa-icon");
 	      set_custom_element_data(goa_icon, "type",
 	      /*_iconType*/
-	      ctx[8]);
+	      ctx[9]);
 	      set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value =
 	      /*calloutvariant*/
 	      ctx[3] === "important" ? "false" : "true");
@@ -13025,10 +13031,10 @@
 	    p(ctx, dirty) {
 	      if (dirty &
 	      /*_iconType*/
-	      256) {
+	      512) {
 	        set_custom_element_data(goa_icon, "type",
 	        /*_iconType*/
-	        ctx[8]);
+	        ctx[9]);
 	      }
 
 	      if (dirty &
@@ -13053,7 +13059,7 @@
 	    }
 
 	  };
-	} // (115:14) {:else}
+	} // (129:14) {:else}
 
 
 	function create_else_block$3(ctx) {
@@ -13075,7 +13081,7 @@
 	    }
 
 	  };
-	} // (113:14) {#if heading}
+	} // (127:14) {#if heading}
 
 
 	function create_if_block_2$2(ctx) {
@@ -13104,7 +13110,7 @@
 	    }
 
 	  };
-	} // (119:12) {#if _isClosable}
+	} // (133:12) {#if _isClosable}
 
 
 	function create_if_block_1$2(ctx) {
@@ -13129,7 +13135,7 @@
 	      if (!mounted) {
 	        dispose = listen(goa_icon_button, "click",
 	        /*close*/
-	        ctx[10]);
+	        ctx[11]);
 	        mounted = true;
 	      }
 	    },
@@ -13145,12 +13151,12 @@
 	  };
 	}
 
-	function create_fragment$h(ctx) {
+	function create_fragment$i(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
 	  /*_isOpen*/
-	  ctx[6] && create_if_block$7(ctx);
+	  ctx[6] && create_if_block$8(ctx);
 	  return {
 	    c() {
 	      if (if_block) if_block.c();
@@ -13177,7 +13183,7 @@
 	            transition_in(if_block, 1);
 	          }
 	        } else {
-	          if_block = create_if_block$7(ctx);
+	          if_block = create_if_block$8(ctx);
 	          if_block.c();
 	          transition_in(if_block, 1);
 	          if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -13210,7 +13216,7 @@
 	  };
 	}
 
-	function instance$f($$self, $$props, $$invalidate) {
+	function instance$g($$self, $$props, $$invalidate) {
 	  let _isClosable;
 
 	  let _isOpen;
@@ -13238,6 +13244,7 @@
 	    calloutvariant = null
 	  } = $$props; // Private
 
+	  let _rootEl = null;
 	  let _contentEl = null;
 	  let _scrollEl = null; // Type verification
 
@@ -13254,12 +13261,21 @@
 	      return;
 	    }
 
-	    e.target.dispatchEvent(new CustomEvent("_close", {
+	    _rootEl === null || _rootEl === void 0 ? void 0 : _rootEl.dispatchEvent(new CustomEvent("_close", {
 	      composed: true
 	    }));
 	    e.stopPropagation();
 	  }
 
+	  const onInputKeyDown = e => {
+	    switch (e.key) {
+	      case "Escape":
+	        close(e);
+	        e.preventDefault();
+	        break;
+	    }
+	  };
+
 	  function handleScroll(e) {
 	    const hasScroll = e.detail.scrollHeight > e.detail.offsetHeight;
 
@@ -13293,11 +13309,18 @@
 	    });
 	  }
 
+	  function div6_binding($$value) {
+	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+	      _rootEl = $$value;
+	      ($$invalidate(7, _rootEl), $$invalidate(6, _isOpen)), $$invalidate(1, open);
+	    });
+	  }
+
 	  $$self.$$set = $$props => {
 	    if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
-	    if ('closable' in $$props) $$invalidate(12, closable = $$props.closable);
+	    if ('closable' in $$props) $$invalidate(13, closable = $$props.closable);
 	    if ('open' in $$props) $$invalidate(1, open = $$props.open);
-	    if ('transition' in $$props) $$invalidate(13, transition = $$props.transition);
+	    if ('transition' in $$props) $$invalidate(14, transition = $$props.transition);
 	    if ('width' in $$props) $$invalidate(2, width = $$props.width);
 	    if ('calloutvariant' in $$props) $$invalidate(3, calloutvariant = $$props.calloutvariant);
 	  };
@@ -13305,9 +13328,9 @@
 	  $$self.$$.update = () => {
 	    if ($$self.$$.dirty &
 	    /*closable*/
-	    4096) {
+	    8192) {
 	      // Reactive
-	      $$invalidate(7, _isClosable = toBoolean(closable));
+	      $$invalidate(8, _isClosable = toBoolean(closable));
 	    }
 
 	    if ($$self.$$.dirty &
@@ -13321,7 +13344,8 @@
 	    64) {
 	      if (!_isOpen) {
 	        // prevent null issues
-	        $$invalidate(4, _contentEl = $$invalidate(5, _scrollEl = null));
+	        $$invalidate(4, _contentEl = $$invalidate(5, _scrollEl = $$invalidate(7, _rootEl = null)));
+	        window.removeEventListener('keydown', onInputKeyDown);
 	      }
 	    }
 
@@ -13337,20 +13361,28 @@
 	      }
 	    }
 
+	    if ($$self.$$.dirty &
+	    /*_isOpen, _contentEl*/
+	    80) {
+	      if (_isOpen && _contentEl) {
+	        window.addEventListener('keydown', onInputKeyDown);
+	      }
+	    }
+
 	    if ($$self.$$.dirty &
 	    /*transition*/
-	    8192) {
-	      $$invalidate(9, _transitionTime = transition === "none" ? 0 : transition === "slow" ? 400 : 200);
+	    16384) {
+	      $$invalidate(10, _transitionTime = transition === "none" ? 0 : transition === "slow" ? 400 : 200);
 	    }
 
 	    if ($$self.$$.dirty &
 	    /*calloutvariant*/
 	    8) {
-	      $$invalidate(8, _iconType = calloutvariant === "emergency" ? "warning" : calloutvariant === "important" ? "alert-circle" : calloutvariant === "information" ? "information-circle" : calloutvariant === "success" ? "checkmark-circle" : calloutvariant === "event" ? "calendar" : "");
+	      $$invalidate(9, _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, _isClosable, _iconType, _transitionTime, close, handleScroll, closable, transition, goa_scrollable_binding, div2_binding];
+	  return [heading, open, width, calloutvariant, _contentEl, _scrollEl, _isOpen, _rootEl, _isClosable, _iconType, _transitionTime, close, handleScroll, closable, transition, goa_scrollable_binding, div2_binding, div6_binding];
 	}
 
 	class Modal extends SvelteElement {
@@ -13361,11 +13393,11 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$f, create_fragment$h, safe_not_equal, {
+	    }, instance$g, create_fragment$i, safe_not_equal, {
 	      heading: 0,
-	      closable: 12,
+	      closable: 13,
 	      open: 1,
-	      transition: 13,
+	      transition: 14,
 	      width: 2,
 	      calloutvariant: 3
 	    }, null);
@@ -13398,7 +13430,7 @@
 	  }
 
 	  get closable() {
-	    return this.$$.ctx[12];
+	    return this.$$.ctx[13];
 	  }
 
 	  set closable(closable) {
@@ -13420,7 +13452,7 @@
 	  }
 
 	  get transition() {
-	    return this.$$.ctx[13];
+	    return this.$$.ctx[14];
 	  }
 
 	  set transition(transition) {
@@ -13457,7 +13489,7 @@
 	customElements.define("goa-modal", Modal);
 	/* libs/web-components/src/components/notification/Notification.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block$6(ctx) {
+	function create_if_block$7(ctx) {
 	  let div3;
 	  let div0;
 	  let goa_icon;
@@ -13581,12 +13613,12 @@
 	  };
 	}
 
-	function create_fragment$g(ctx) {
+	function create_fragment$h(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
 	  /*show*/
-	  ctx[1] && create_if_block$6(ctx);
+	  ctx[1] && create_if_block$7(ctx);
 	  return {
 	    c() {
 	      if (if_block) if_block.c();
@@ -13613,7 +13645,7 @@
 	            transition_in(if_block, 1);
 	          }
 	        } else {
-	          if_block = create_if_block$6(ctx);
+	          if_block = create_if_block$7(ctx);
 	          if_block.c();
 	          transition_in(if_block, 1);
 	          if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -13646,7 +13678,7 @@
 	  };
 	}
 
-	function instance$e($$self, $$props, $$invalidate) {
+	function instance$f($$self, $$props, $$invalidate) {
 	  let iconType;
 	  const [Types, validateType] = typeValidator("Notification type", ["emergency", "important", "information", "event"], true);
 	  let {
@@ -13688,7 +13720,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$e, create_fragment$g, safe_not_equal, {
+	    }, instance$f, create_fragment$h, safe_not_equal, {
 	      type: 0
 	    }, null);
 
@@ -13730,7 +13762,7 @@
 	/* libs/web-components/src/components/page-block/PageBlock.svelte generated by Svelte v3.51.0 */
 
 
-	function create_fragment$f(ctx) {
+	function create_fragment$g(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -13770,7 +13802,7 @@
 	  };
 	}
 
-	function instance$d($$self, $$props, $$invalidate) {
+	function instance$e($$self, $$props, $$invalidate) {
 	  const Sizes = {
 	    "full": "100%"
 	  };
@@ -13811,7 +13843,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$d, create_fragment$f, safe_not_equal, {
+	    }, instance$e, create_fragment$g, safe_not_equal, {
 	      width: 1,
 	      _width: 0
 	    }, null);
@@ -13859,7 +13891,7 @@
 	customElements.define("goa-page-block", PageBlock);
 	/* libs/web-components/src/components/pagination/Pagination.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block$5(ctx) {
+	function create_if_block$6(ctx) {
 	  let goa_block;
 	  let span0;
 	  let t1;
@@ -13957,7 +13989,7 @@
 	  };
 	}
 
-	function create_fragment$e(ctx) {
+	function create_fragment$f(ctx) {
 	  let goa_block1;
 	  let div;
 	  let t0;
@@ -13973,7 +14005,7 @@
 	  let dispose;
 	  let if_block =
 	  /*variant*/
-	  ctx[1] === "all" && create_if_block$5(ctx);
+	  ctx[1] === "all" && create_if_block$6(ctx);
 	  return {
 	    c() {
 	      goa_block1 = element("goa-block");
@@ -14047,7 +14079,7 @@
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
-	          if_block = create_if_block$5(ctx);
+	          if_block = create_if_block$6(ctx);
 	          if_block.c();
 	          if_block.m(div, t0);
 	        }
@@ -14120,7 +14152,7 @@
 	  };
 	}
 
-	function instance$c($$self, $$props, $$invalidate) {
+	function instance$d($$self, $$props, $$invalidate) {
 	  let _pageCount;
 
 	  const [Variants, validateVariant] = typeValidator("Pagination variant", ["all", "links-only"]);
@@ -14246,7 +14278,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$c, create_fragment$e, safe_not_equal, {
+	    }, instance$d, create_fragment$f, safe_not_equal, {
 	      pagenumber: 0,
 	      itemcount: 10,
 	      perpagecount: 11,
@@ -14364,6 +14396,327 @@
 	}
 
 	customElements.define("goa-pagination", Pagination);
+	/* libs/web-components/src/components/popover/Popover.svelte generated by Svelte v3.51.0 */
+
+	function create_if_block$5(ctx) {
+	  let goa_focus_trap;
+	  let div0;
+	  let t;
+	  let div1;
+	  let section;
+	  let slot;
+	  let mounted;
+	  let dispose;
+	  return {
+	    c() {
+	      goa_focus_trap = element("goa-focus-trap");
+	      div0 = element("div");
+	      t = space();
+	      div1 = element("div");
+	      section = element("section");
+	      slot = element("slot");
+	      attr(div0, "data-testid", "popover-background");
+	      attr(div0, "class", "popover-background");
+	      attr(section, "data-testid", "popover-content");
+	      attr(section, "class", "popover-content");
+	      set_style(section, "max-width",
+	      /*maxwidth*/
+	      ctx[1]);
+	      set_style(section, "padding",
+	      /*paddedContent*/
+	      ctx[4] ? 'var(--goa-space-m)' : '0');
+	      attr(div1, "class", "popover-container");
+	      set_custom_element_data(goa_focus_trap, "active",
+	      /*_isContentVisible*/
+	      ctx[2]);
+	    },
+
+	    m(target, anchor) {
+	      insert(target, goa_focus_trap, anchor);
+	      append(goa_focus_trap, div0);
+	      append(goa_focus_trap, t);
+	      append(goa_focus_trap, div1);
+	      append(div1, section);
+	      append(section, slot);
+
+	      if (!mounted) {
+	        dispose = listen(div0, "click",
+	        /*closePopover*/
+	        ctx[6]);
+	        mounted = true;
+	      }
+	    },
+
+	    p(ctx, dirty) {
+	      if (dirty &
+	      /*maxwidth*/
+	      2) {
+	        set_style(section, "max-width",
+	        /*maxwidth*/
+	        ctx[1]);
+	      }
+
+	      if (dirty &
+	      /*paddedContent*/
+	      16) {
+	        set_style(section, "padding",
+	        /*paddedContent*/
+	        ctx[4] ? 'var(--goa-space-m)' : '0');
+	      }
+
+	      if (dirty &
+	      /*_isContentVisible*/
+	      4) {
+	        set_custom_element_data(goa_focus_trap, "active",
+	        /*_isContentVisible*/
+	        ctx[2]);
+	      }
+	    },
+
+	    d(detaching) {
+	      if (detaching) detach(goa_focus_trap);
+	      mounted = false;
+	      dispose();
+	    }
+
+	  };
+	}
+
+	function create_fragment$e(ctx) {
+	  let div1;
+	  let div0;
+	  let t;
+	  let mounted;
+	  let dispose;
+	  let if_block =
+	  /*_isContentVisible*/
+	  ctx[2] && create_if_block$5(ctx);
+	  return {
+	    c() {
+	      div1 = element("div");
+	      div0 = element("div");
+	      div0.innerHTML = `<slot name="target" tabindex="-1"></slot>`;
+	      t = space();
+	      if (if_block) if_block.c();
+	      this.c = noop;
+	      attr(div0, "class", "popover-target");
+	      attr(div0, "tabindex", "0");
+	      attr(div0, "data-testid", "popover-target");
+	      attr(div1, "data-testid",
+	      /*testid*/
+	      ctx[0]);
+	    },
+
+	    m(target, anchor) {
+	      insert(target, div1, anchor);
+	      append(div1, div0);
+	      /*div0_binding*/
+
+	      ctx[8](div0);
+	      append(div1, t);
+	      if (if_block) if_block.m(div1, null);
+
+	      if (!mounted) {
+	        dispose = listen(div0, "click",
+	        /*showPopover*/
+	        ctx[5]);
+	        mounted = true;
+	      }
+	    },
+
+	    p(ctx, [dirty]) {
+	      if (
+	      /*_isContentVisible*/
+	      ctx[2]) {
+	        if (if_block) {
+	          if_block.p(ctx, dirty);
+	        } else {
+	          if_block = create_if_block$5(ctx);
+	          if_block.c();
+	          if_block.m(div1, null);
+	        }
+	      } else if (if_block) {
+	        if_block.d(1);
+	        if_block = null;
+	      }
+
+	      if (dirty &
+	      /*testid*/
+	      1) {
+	        attr(div1, "data-testid",
+	        /*testid*/
+	        ctx[0]);
+	      }
+	    },
+
+	    i: noop,
+	    o: noop,
+
+	    d(detaching) {
+	      if (detaching) detach(div1);
+	      /*div0_binding*/
+
+	      ctx[8](null);
+	      if (if_block) if_block.d();
+	      mounted = false;
+	      dispose();
+	    }
+
+	  };
+	}
+
+	function instance$c($$self, $$props, $$invalidate) {
+	  let paddedContent;
+	  let {
+	    testid = ""
+	  } = $$props;
+	  let {
+	    maxwidth = "320px"
+	  } = $$props;
+	  let {
+	    padded = "true"
+	  } = $$props;
+	  let _isContentVisible = false;
+
+	  let _targetEl;
+
+	  onMount(function () {
+	    return _call(tick, function () {
+	      addFocusEventListener();
+	    });
+	  });
+	  onDestroy(() => {
+	    removeEventListeners();
+	  });
+
+	  function showPopover() {
+	    $$invalidate(2, _isContentVisible = true);
+	  }
+
+	  function closePopover() {
+	    $$invalidate(2, _isContentVisible = false);
+	  }
+
+	  const onInputKeyDown = e => {
+	    switch (e.key) {
+	      case " ":
+	      case "Enter":
+	        _isContentVisible ? closePopover() : showPopover();
+	        e.preventDefault();
+	        break;
+
+	      case "Escape":
+	        _isContentVisible && closePopover();
+	        e.preventDefault();
+	        break;
+	    }
+	  };
+
+	  function addFocusEventListener() {
+	    _targetEl.addEventListener("focus", onFocus, true);
+	  }
+
+	  function removeEventListeners() {
+	    _targetEl.removeEventListener("focus", onFocus);
+
+	    _targetEl.removeEventListener("keydown", onInputKeyDown);
+	  } // add required bindings to component
+
+
+	  function onFocus() {
+	    _targetEl.addEventListener("keydown", onInputKeyDown);
+	  }
+
+	  function div0_binding($$value) {
+	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+	      _targetEl = $$value;
+	      $$invalidate(3, _targetEl);
+	    });
+	  }
+
+	  $$self.$$set = $$props => {
+	    if ('testid' in $$props) $$invalidate(0, testid = $$props.testid);
+	    if ('maxwidth' in $$props) $$invalidate(1, maxwidth = $$props.maxwidth);
+	    if ('padded' in $$props) $$invalidate(7, padded = $$props.padded);
+	  };
+
+	  $$self.$$.update = () => {
+	    if ($$self.$$.dirty &
+	    /*padded*/
+	    128) {
+	      $$invalidate(4, paddedContent = toBoolean(padded));
+	    }
+	  };
+
+	  return [testid, maxwidth, _isContentVisible, _targetEl, paddedContent, showPopover, closePopover, padded, div0_binding];
+	}
+
+	class Popover extends SvelteElement {
+	  constructor(options) {
+	    super();
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4)}.popover-target{width:fit-content;cursor:pointer}.popover-target:focus{outline:var(--goa-border-width-l) solid var(--goa-color-interactive-focus)}.popover-content{position:absolute;left:0;right:0;margin-top:3px;list-style-type:none;background:var(--goa-color-greyscale-white);border-radius:var(--goa-border-radius-m);outline:none;box-shadow:var(--shadow-1);z-index:99}.popover-background{cursor:default;position:fixed;z-index:98;inset:0}.popover-container{position:relative}</style>`;
+	    init(this, {
+	      target: this.shadowRoot,
+	      props: attribute_to_object(this.attributes),
+	      customElement: true
+	    }, instance$c, create_fragment$e, safe_not_equal, {
+	      testid: 0,
+	      maxwidth: 1,
+	      padded: 7
+	    }, null);
+
+	    if (options) {
+	      if (options.target) {
+	        insert(options.target, this, options.anchor);
+	      }
+
+	      if (options.props) {
+	        this.$set(options.props);
+	        flush();
+	      }
+	    }
+	  }
+
+	  static get observedAttributes() {
+	    return ["testid", "maxwidth", "padded"];
+	  }
+
+	  get testid() {
+	    return this.$$.ctx[0];
+	  }
+
+	  set testid(testid) {
+	    this.$$set({
+	      testid
+	    });
+	    flush();
+	  }
+
+	  get maxwidth() {
+	    return this.$$.ctx[1];
+	  }
+
+	  set maxwidth(maxwidth) {
+	    this.$$set({
+	      maxwidth
+	    });
+	    flush();
+	  }
+
+	  get padded() {
+	    return this.$$.ctx[7];
+	  }
+
+	  set padded(padded) {
+	    this.$$set({
+	      padded
+	    });
+	    flush();
+	  }
+
+	}
+
+	customElements.define("goa-popover", Popover);
 	/* libs/web-components/src/components/radio-group/RadioGroup.svelte generated by Svelte v3.51.0 */
 
 	function get_each_context$1(ctx, list, i) {
@@ -20628,6 +20981,25 @@
 	  }, void 0);
 	}
 
+	var GoAPopover = function GoAPopover(_a) {
+	  var target = _a.target,
+	      testId = _a.testId,
+	      maxWidth = _a.maxWidth,
+	      padded = _a.padded,
+	      children = _a.children;
+	  return jsxRuntime.jsxs("goa-popover", __assign({
+	    "data-testid": testId,
+	    maxwidth: maxWidth,
+	    padded: padded
+	  }, {
+	    children: [children, target && jsxRuntime.jsx("div", __assign({
+	      slot: "target"
+	    }, {
+	      children: target
+	    }), void 0)]
+	  }), void 0);
+	};
+
 	var GoASkeleton = function GoASkeleton(_a) {
 	  var maxWidth = _a.maxWidth,
 	      size = _a.size,
@@ -20845,6 +21217,7 @@
 	exports.GoAPageBlock = GoAPageBlock;
 	exports.GoAPages = GoAPages;
 	exports.GoAPagination = GoAPagination;
+	exports.GoAPopover = GoAPopover;
 	exports.GoARadioGroup = GoARadioGroup;
 	exports.GoARadioItem = GoARadioItem;
 	exports.GoASkeleton = GoASkeleton;