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

package/react-components.esm.js

@@ -1152,7 +1152,7 @@ function typeValidator(message, values, required = false) {
 /* 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;
@@ -1355,7 +1355,7 @@ function create_fragment$M(ctx) {
   };
 }
 
-function instance$G($$self, $$props, $$invalidate) {
+function instance$H($$self, $$props, $$invalidate) {
   let isOpen;
   const [HeadingSizes, validateHeadingSize] = typeValidator("Accordion heading size", ["small", "medium"]);
   let {
@@ -1433,7 +1433,7 @@ class Accordion extends SvelteElement {
       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,
@@ -1622,7 +1622,7 @@ function create_else_block$8(ctx) {
 } // (19:4) {#if url}
 
 
-function create_if_block$l(ctx) {
+function create_if_block$m(ctx) {
   let a;
   let img0;
   let img0_src_value;
@@ -1689,7 +1689,7 @@ function create_if_block$l(ctx) {
   };
 }
 
-function create_fragment$L(ctx) {
+function create_fragment$M(ctx) {
   let div2;
   let div1;
   let t;
@@ -1699,7 +1699,7 @@ function create_fragment$L(ctx) {
   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;
   }
 
@@ -1773,7 +1773,7 @@ function create_fragment$L(ctx) {
   };
 }
 
-function instance$F($$self, $$props, $$invalidate) {
+function instance$G($$self, $$props, $$invalidate) {
   let {
     heading = ""
   } = $$props;
@@ -1805,7 +1805,7 @@ class AppHeader extends SvelteElement {
       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,
@@ -1933,7 +1933,7 @@ function create_if_block_1$c(ctx) {
 } // (50:2) {#if content}
 
 
-function create_if_block$k(ctx) {
+function create_if_block$l(ctx) {
   let div;
   let t;
   return {
@@ -1965,7 +1965,7 @@ function create_if_block$k(ctx) {
   };
 }
 
-function create_fragment$K(ctx) {
+function create_fragment$L(ctx) {
   let div;
   let t;
   let div_style_value;
@@ -1982,7 +1982,7 @@ function create_fragment$K(ctx) {
   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");
@@ -2039,7 +2039,7 @@ function create_fragment$K(ctx) {
         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);
         }
@@ -2101,7 +2101,7 @@ function create_fragment$K(ctx) {
   };
 }
 
-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);
@@ -2181,7 +2181,7 @@ class Badge extends SvelteElement {
       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,
@@ -2301,7 +2301,7 @@ class Badge extends SvelteElement {
 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;
@@ -2375,7 +2375,7 @@ function create_fragment$J(ctx) {
   };
 }
 
-function instance$D($$self, $$props, $$invalidate) {
+function instance$E($$self, $$props, $$invalidate) {
   let {
     gap = "m"
   } = $$props;
@@ -2419,7 +2419,7 @@ class Block extends SvelteElement {
       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,
@@ -2604,7 +2604,7 @@ function create_else_block$6(ctx) {
 } // (46:2) {#if type === "start"}
 
 
-function create_if_block$j(ctx) {
+function create_if_block$k(ctx) {
   let span;
   let t;
   let goa_icon;
@@ -2725,7 +2725,7 @@ function create_if_block_1$b(ctx) {
   };
 }
 
-function create_fragment$I(ctx) {
+function create_fragment$J(ctx) {
   let button;
   let button_class_value;
   let button_style_value;
@@ -2735,7 +2735,7 @@ function create_fragment$I(ctx) {
   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;
   }
 
@@ -2879,7 +2879,7 @@ function create_fragment$I(ctx) {
   };
 }
 
-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);
@@ -2974,7 +2974,7 @@ class Button extends SvelteElement {
       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,
@@ -3130,7 +3130,7 @@ class Button extends SvelteElement {
 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;
@@ -3200,7 +3200,7 @@ function create_fragment$H(ctx) {
   };
 }
 
-function instance$B($$self, $$props, $$invalidate) {
+function instance$C($$self, $$props, $$invalidate) {
   let _alignment;
 
   let {
@@ -3264,7 +3264,7 @@ class ButtonGroup extends SvelteElement {
       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,
@@ -3372,7 +3372,7 @@ class ButtonGroup extends SvelteElement {
 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 {
@@ -3403,7 +3403,7 @@ function create_if_block$i(ctx) {
   };
 }
 
-function create_fragment$G(ctx) {
+function create_fragment$H(ctx) {
   let div;
   let span0;
   let goa_icon;
@@ -3416,7 +3416,7 @@ function create_fragment$G(ctx) {
   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");
@@ -3495,7 +3495,7 @@ function create_fragment$G(ctx) {
         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);
         }
@@ -3538,7 +3538,7 @@ function create_fragment$G(ctx) {
   };
 }
 
-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 {
@@ -3595,7 +3595,7 @@ class Callout extends SvelteElement {
       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,
@@ -3703,7 +3703,7 @@ class Callout extends SvelteElement {
 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() {
@@ -3734,7 +3734,7 @@ class CardActions extends SvelteElement {
       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) {
@@ -3748,7 +3748,7 @@ class CardActions extends SvelteElement {
 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;
@@ -3827,7 +3827,7 @@ function create_fragment$E(ctx) {
   };
 }
 
-function instance$z($$self, $$props, $$invalidate) {
+function instance$A($$self, $$props, $$invalidate) {
   let {
     elevation = 0
   } = $$props;
@@ -3875,7 +3875,7 @@ class Card extends SvelteElement {
       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,
@@ -3995,7 +3995,7 @@ class Card extends SvelteElement {
 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() {
@@ -4028,7 +4028,7 @@ class CardContent extends SvelteElement {
       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) {
@@ -4042,7 +4042,7 @@ class CardContent extends SvelteElement {
 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() {
@@ -4075,7 +4075,7 @@ class CardGroup extends SvelteElement {
       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) {
@@ -4089,7 +4089,7 @@ class CardGroup extends SvelteElement {
 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() {
@@ -4137,7 +4137,7 @@ function create_fragment$B(ctx) {
   };
 }
 
-function instance$y($$self, $$props, $$invalidate) {
+function instance$z($$self, $$props, $$invalidate) {
   let {
     src
   } = $$props;
@@ -4161,7 +4161,7 @@ class CardImage extends SvelteElement {
       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);
@@ -4236,7 +4236,7 @@ function create_if_block_1$a(ctx) {
 } // (68:4) {#if isIndeterminate}
 
 
-function create_if_block$h(ctx) {
+function create_if_block$i(ctx) {
   let svg;
   let rect;
   return {
@@ -4263,7 +4263,7 @@ function create_if_block$h(ctx) {
   };
 }
 
-function create_fragment$A(ctx) {
+function create_fragment$B(ctx) {
   let label;
   let div0;
   let input;
@@ -4281,7 +4281,7 @@ function create_fragment$A(ctx) {
   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;
@@ -4512,7 +4512,7 @@ function create_fragment$A(ctx) {
   };
 }
 
-function instance$x($$self, $$props, $$invalidate) {
+function instance$y($$self, $$props, $$invalidate) {
   let isDisabled;
   let isError;
   let isChecked;
@@ -4627,7 +4627,7 @@ class Checkbox extends SvelteElement {
       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,
@@ -4829,7 +4829,7 @@ function create_if_block_1$9(ctx) {
 } // (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;
@@ -4885,7 +4885,7 @@ function create_if_block$g(ctx) {
   };
 }
 
-function create_fragment$z(ctx) {
+function create_fragment$A(ctx) {
   let div1;
   let t0;
   let div0;
@@ -4899,7 +4899,7 @@ function create_fragment$z(ctx) {
   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");
@@ -4994,7 +4994,7 @@ function create_fragment$z(ctx) {
         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);
         }
@@ -5067,7 +5067,7 @@ function create_fragment$z(ctx) {
   };
 }
 
-function instance$w($$self, $$props, $$invalidate) {
+function instance$x($$self, $$props, $$invalidate) {
   let {
     mt = null
   } = $$props;
@@ -5168,7 +5168,7 @@ class Chip extends SvelteElement {
       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,
@@ -5422,7 +5422,7 @@ function noscroll(_node, opts) {
 /* 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;
@@ -5793,12 +5793,12 @@ function create_if_block_2$6(ctx) {
   };
 }
 
-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();
@@ -5825,7 +5825,7 @@ function create_fragment$y(ctx) {
             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);
@@ -5858,7 +5858,7 @@ function create_fragment$y(ctx) {
   };
 }
 
-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"]);
@@ -5915,7 +5915,7 @@ class CircularProgress extends SvelteElement {
       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,
@@ -5999,7 +5999,7 @@ class CircularProgress extends SvelteElement {
 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;
@@ -6124,7 +6124,7 @@ function create_fragment$x(ctx) {
   };
 }
 
-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"]);
@@ -6180,7 +6180,7 @@ class Container extends SvelteElement {
       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,
@@ -6300,7 +6300,7 @@ class Container extends SvelteElement {
 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;
@@ -6400,7 +6400,7 @@ function create_fragment$w(ctx) {
   };
 }
 
-function instance$t($$self, $$props, $$invalidate) {
+function instance$u($$self, $$props, $$invalidate) {
   let {
     heading
   } = $$props;
@@ -6460,7 +6460,7 @@ class Details extends SvelteElement {
       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,
@@ -6544,7 +6544,7 @@ class Details extends SvelteElement {
 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 {
@@ -6603,7 +6603,7 @@ function create_fragment$v(ctx) {
   };
 }
 
-function instance$s($$self, $$props, $$invalidate) {
+function instance$t($$self, $$props, $$invalidate) {
   let {
     testid = ""
   } = $$props;
@@ -6639,7 +6639,7 @@ class Divider extends SvelteElement {
       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,
@@ -7006,7 +7006,7 @@ function create_else_block$5(ctx) {
 } // (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;
@@ -7429,7 +7429,7 @@ function create_each_block$4(ctx) {
   };
 }
 
-function create_fragment$u(ctx) {
+function create_fragment$v(ctx) {
   let div;
   let div_data_testid_value;
   let div_style_value;
@@ -7437,7 +7437,7 @@ function create_fragment$u(ctx) {
   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;
   }
 
@@ -7546,7 +7546,7 @@ function create_fragment$u(ctx) {
   };
 }
 
-function instance$r($$self, $$props, $$invalidate) {
+function instance$s($$self, $$props, $$invalidate) {
   let _disabled;
 
   let _error;
@@ -7936,7 +7936,7 @@ class Dropdown extends SvelteElement {
       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,
@@ -8140,7 +8140,7 @@ class Dropdown extends SvelteElement {
 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;
@@ -8161,7 +8161,7 @@ class DropdownItem extends SvelteElement {
       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) {
@@ -8175,7 +8175,7 @@ class DropdownItem extends SvelteElement {
 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() {
@@ -8235,7 +8235,7 @@ function isFocusable(element) {
   }
 }
 
-function instance$q($$self, $$props, $$invalidate) {
+function instance$r($$self, $$props, $$invalidate) {
   let isActive;
   let {
     active
@@ -8404,7 +8404,7 @@ class FocusTrap extends SvelteElement {
       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);
 
@@ -8440,7 +8440,7 @@ class FocusTrap extends SvelteElement {
 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() {
@@ -8459,7 +8459,7 @@ function create_if_block$d(ctx) {
   };
 }
 
-function create_fragment$r(ctx) {
+function create_fragment$s(ctx) {
   let div5;
   let div4;
   let div0;
@@ -8477,7 +8477,7 @@ function create_fragment$r(ctx) {
   /*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");
@@ -8550,7 +8550,7 @@ function create_fragment$r(ctx) {
       /*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);
         }
@@ -8602,7 +8602,7 @@ function create_fragment$r(ctx) {
   };
 }
 
-function instance$p($$self, $$props, $$invalidate) {
+function instance$q($$self, $$props, $$invalidate) {
   let {
     maxcontentwidth = ""
   } = $$props;
@@ -8640,7 +8640,7 @@ class Footer extends SvelteElement {
       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);
 
@@ -8730,7 +8730,7 @@ function create_each_block$3(ctx) {
   };
 }
 
-function create_fragment$q(ctx) {
+function create_fragment$r(ctx) {
   let section;
   let div;
   let t;
@@ -8818,7 +8818,7 @@ function create_fragment$q(ctx) {
   };
 }
 
-function instance$o($$self, $$props, $$invalidate) {
+function instance$p($$self, $$props, $$invalidate) {
   let rootEl;
   let children = [];
   onMount(async () => {
@@ -8853,7 +8853,7 @@ class FooterMetaSection extends SvelteElement {
       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) {
@@ -8874,7 +8874,7 @@ function get_each_context$2(ctx, list, i) {
 } // (31:2) {#if heading}
 
 
-function create_if_block$c(ctx) {
+function create_if_block$d(ctx) {
   let div;
   let t0;
   let t1;
@@ -8963,7 +8963,7 @@ function create_each_block$2(ctx) {
   };
 }
 
-function create_fragment$p(ctx) {
+function create_fragment$q(ctx) {
   let section;
   let t0;
   let div;
@@ -8972,7 +8972,7 @@ function create_fragment$p(ctx) {
   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];
@@ -9039,7 +9039,7 @@ function create_fragment$p(ctx) {
         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);
         }
@@ -9110,7 +9110,7 @@ function create_fragment$p(ctx) {
   };
 }
 
-function instance$n($$self, $$props, $$invalidate) {
+function instance$o($$self, $$props, $$invalidate) {
   let {
     heading = ""
   } = $$props;
@@ -9161,7 +9161,7 @@ class FooterNavSection extends SvelteElement {
       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);
@@ -9359,7 +9359,7 @@ function create_if_block_1$6(ctx) {
 } // (48:2) {#if helptext}
 
 
-function create_if_block$b(ctx) {
+function create_if_block$c(ctx) {
   let div;
   let t;
   return {
@@ -9391,7 +9391,7 @@ function create_if_block$b(ctx) {
   };
 }
 
-function create_fragment$o(ctx) {
+function create_fragment$p(ctx) {
   let div1;
   let t0;
   let div0;
@@ -9406,7 +9406,7 @@ function create_fragment$o(ctx) {
   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");
@@ -9483,7 +9483,7 @@ function create_fragment$o(ctx) {
         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);
         }
@@ -9528,7 +9528,7 @@ function create_fragment$o(ctx) {
   };
 }
 
-function instance$m($$self, $$props, $$invalidate) {
+function instance$n($$self, $$props, $$invalidate) {
   const [REQUIREMENT_TYPES, validateRequirementType] = typeValidator("Requirement type", ["optional", "required"], false);
   let {
     testid = ""
@@ -9584,7 +9584,7 @@ class FormItem extends SvelteElement {
       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,
@@ -9716,7 +9716,7 @@ class FormItem extends SvelteElement {
 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;
@@ -9784,7 +9784,7 @@ function create_fragment$n(ctx) {
   };
 }
 
-function instance$l($$self, $$props, $$invalidate) {
+function instance$m($$self, $$props, $$invalidate) {
   let {
     gap = "m"
   } = $$props;
@@ -9829,7 +9829,7 @@ class Grid extends SvelteElement {
       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,
@@ -9925,7 +9925,7 @@ class Grid extends SvelteElement {
 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;
@@ -10010,7 +10010,7 @@ function create_fragment$m(ctx) {
   };
 }
 
-function instance$k($$self, $$props, $$invalidate) {
+function instance$l($$self, $$props, $$invalidate) {
   let {
     heading
   } = $$props;
@@ -10038,7 +10038,7 @@ class HeroBanner extends SvelteElement {
       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
@@ -10098,7 +10098,7 @@ class HeroBanner extends SvelteElement {
 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;
@@ -10270,7 +10270,7 @@ function handleClick(e) {
   }));
 }
 
-function instance$j($$self, $$props, $$invalidate) {
+function instance$k($$self, $$props, $$invalidate) {
   let css;
   let isDisabled;
   let isInverted;
@@ -10375,7 +10375,7 @@ class IconButton extends SvelteElement {
       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,
@@ -10543,7 +10543,7 @@ class IconButton extends SvelteElement {
 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;
 
@@ -10689,12 +10689,12 @@ function create_if_block_1$5(ctx) {
   };
 }
 
-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");
@@ -10747,7 +10747,7 @@ function create_fragment$k(ctx) {
         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);
         }
@@ -10820,7 +10820,7 @@ function create_fragment$k(ctx) {
   };
 }
 
-function instance$i($$self, $$props, $$invalidate) {
+function instance$j($$self, $$props, $$invalidate) {
   let isInverted;
 
   let _size;
@@ -10922,7 +10922,7 @@ class Icon extends SvelteElement {
       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,
@@ -11259,7 +11259,7 @@ function create_if_block_1$4(ctx) {
 } // (161:4) {#if suffix}
 
 
-function create_if_block$9(ctx) {
+function create_if_block$a(ctx) {
   let span;
   let t;
   return {
@@ -11291,7 +11291,7 @@ function create_if_block$9(ctx) {
   };
 }
 
-function create_fragment$j(ctx) {
+function create_fragment$k(ctx) {
   let div3;
   let div2;
   let t0;
@@ -11329,7 +11329,7 @@ function create_fragment$j(ctx) {
   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");
@@ -11650,7 +11650,7 @@ function create_fragment$j(ctx) {
         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);
         }
@@ -11730,7 +11730,7 @@ function doClick() {
   }));
 }
 
-function instance$h($$self, $$props, $$invalidate) {
+function instance$i($$self, $$props, $$invalidate) {
   let handlesTrailingIconClick;
   let isFocused;
   let isReadonly;
@@ -11950,7 +11950,7 @@ class Input extends SvelteElement {
       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,
@@ -12448,7 +12448,7 @@ function create_if_block_2$3(ctx) {
 } // (56:2) {#if version}
 
 
-function create_if_block$8(ctx) {
+function create_if_block$9(ctx) {
   let div;
   let t;
   return {
@@ -12481,7 +12481,7 @@ function create_if_block$8(ctx) {
   };
 }
 
-function create_fragment$i(ctx) {
+function create_fragment$j(ctx) {
   let header;
   let t0;
   let show_if = ["alpha", "beta"].includes(
@@ -12496,7 +12496,7 @@ function create_fragment$i(ctx) {
   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");
@@ -12562,7 +12562,7 @@ function create_fragment$i(ctx) {
         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);
         }
@@ -12590,7 +12590,7 @@ function capitalize(val) {
   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
@@ -12622,7 +12622,7 @@ class MicrositeHeader extends SvelteElement {
       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
@@ -12682,7 +12682,7 @@ class MicrositeHeader extends SvelteElement {
 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;
@@ -12722,7 +12722,7 @@ function create_if_block$7(ctx) {
   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");
@@ -12789,20 +12789,23 @@ function create_if_block$7(ctx) {
       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]
@@ -12843,7 +12846,7 @@ function create_if_block$7(ctx) {
 
       if (
       /*_isClosable*/
-      ctx[7]) {
+      ctx[8]) {
         if (if_block2) {
           if_block2.p(ctx, dirty);
         } else {
@@ -12890,7 +12893,7 @@ function create_if_block$7(ctx) {
         div5_intro = create_in_transition(div5, fly, {
           duration:
           /*_transitionTime*/
-          ctx[9],
+          ctx[10],
           y: 200
         });
         div5_intro.start();
@@ -12900,7 +12903,7 @@ function create_if_block$7(ctx) {
         div6_intro = create_in_transition(div6, fade, {
           duration:
           /*_transitionTime*/
-          ctx[9]
+          ctx[10]
         });
         div6_intro.start();
       });
@@ -12912,20 +12915,20 @@ function create_if_block$7(ctx) {
       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;
     },
@@ -12937,18 +12940,21 @@ function create_if_block$7(ctx) {
       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) {
@@ -12962,7 +12968,7 @@ function create_if_block_3$2(ctx) {
       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");
@@ -12979,10 +12985,10 @@ function create_if_block_3$2(ctx) {
     p(ctx, dirty) {
       if (dirty &
       /*_iconType*/
-      256) {
+      512) {
         set_custom_element_data(goa_icon, "type",
         /*_iconType*/
-        ctx[8]);
+        ctx[9]);
       }
 
       if (dirty &
@@ -13007,7 +13013,7 @@ function create_if_block_3$2(ctx) {
     }
 
   };
-} // (115:14) {:else}
+} // (129:14) {:else}
 
 
 function create_else_block$3(ctx) {
@@ -13029,7 +13035,7 @@ function create_else_block$3(ctx) {
     }
 
   };
-} // (113:14) {#if heading}
+} // (127:14) {#if heading}
 
 
 function create_if_block_2$2(ctx) {
@@ -13058,7 +13064,7 @@ function create_if_block_2$2(ctx) {
     }
 
   };
-} // (119:12) {#if _isClosable}
+} // (133:12) {#if _isClosable}
 
 
 function create_if_block_1$2(ctx) {
@@ -13083,7 +13089,7 @@ function create_if_block_1$2(ctx) {
       if (!mounted) {
         dispose = listen(goa_icon_button, "click",
         /*close*/
-        ctx[10]);
+        ctx[11]);
         mounted = true;
       }
     },
@@ -13099,12 +13105,12 @@ function create_if_block_1$2(ctx) {
   };
 }
 
-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();
@@ -13131,7 +13137,7 @@ function create_fragment$h(ctx) {
             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);
@@ -13164,7 +13170,7 @@ function create_fragment$h(ctx) {
   };
 }
 
-function instance$f($$self, $$props, $$invalidate) {
+function instance$g($$self, $$props, $$invalidate) {
   let _isClosable;
 
   let _isOpen;
@@ -13192,6 +13198,7 @@ function instance$f($$self, $$props, $$invalidate) {
     calloutvariant = null
   } = $$props; // Private
 
+  let _rootEl = null;
   let _contentEl = null;
   let _scrollEl = null; // Type verification
 
@@ -13208,12 +13215,21 @@ function instance$f($$self, $$props, $$invalidate) {
       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;
 
@@ -13247,11 +13263,18 @@ function instance$f($$self, $$props, $$invalidate) {
     });
   }
 
+  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);
   };
@@ -13259,9 +13282,9 @@ function instance$f($$self, $$props, $$invalidate) {
   $$self.$$.update = () => {
     if ($$self.$$.dirty &
     /*closable*/
-    4096) {
+    8192) {
       // Reactive
-      $$invalidate(7, _isClosable = toBoolean(closable));
+      $$invalidate(8, _isClosable = toBoolean(closable));
     }
 
     if ($$self.$$.dirty &
@@ -13275,7 +13298,8 @@ function instance$f($$self, $$props, $$invalidate) {
     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);
       }
     }
 
@@ -13291,20 +13315,28 @@ function instance$f($$self, $$props, $$invalidate) {
       }
     }
 
+    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 {
@@ -13315,11 +13347,11 @@ class Modal extends SvelteElement {
       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);
@@ -13352,7 +13384,7 @@ class Modal extends SvelteElement {
   }
 
   get closable() {
-    return this.$$.ctx[12];
+    return this.$$.ctx[13];
   }
 
   set closable(closable) {
@@ -13374,7 +13406,7 @@ class Modal extends SvelteElement {
   }
 
   get transition() {
-    return this.$$.ctx[13];
+    return this.$$.ctx[14];
   }
 
   set transition(transition) {
@@ -13411,7 +13443,7 @@ class Modal extends SvelteElement {
 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;
@@ -13535,12 +13567,12 @@ function create_if_block$6(ctx) {
   };
 }
 
-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();
@@ -13567,7 +13599,7 @@ function create_fragment$g(ctx) {
             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);
@@ -13600,7 +13632,7 @@ function create_fragment$g(ctx) {
   };
 }
 
-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 {
@@ -13642,7 +13674,7 @@ class Notification extends SvelteElement {
       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);
 
@@ -13684,7 +13716,7 @@ function isValidDimension(value) {
 /* 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;
@@ -13724,7 +13756,7 @@ function create_fragment$f(ctx) {
   };
 }
 
-function instance$d($$self, $$props, $$invalidate) {
+function instance$e($$self, $$props, $$invalidate) {
   const Sizes = {
     "full": "100%"
   };
@@ -13765,7 +13797,7 @@ class PageBlock extends SvelteElement {
       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);
@@ -13813,7 +13845,7 @@ class PageBlock extends SvelteElement {
 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;
@@ -13911,7 +13943,7 @@ function create_if_block$5(ctx) {
   };
 }
 
-function create_fragment$e(ctx) {
+function create_fragment$f(ctx) {
   let goa_block1;
   let div;
   let t0;
@@ -13927,7 +13959,7 @@ function create_fragment$e(ctx) {
   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");
@@ -14001,7 +14033,7 @@ function create_fragment$e(ctx) {
         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);
         }
@@ -14074,7 +14106,7 @@ function create_fragment$e(ctx) {
   };
 }
 
-function instance$c($$self, $$props, $$invalidate) {
+function instance$d($$self, $$props, $$invalidate) {
   let _pageCount;
 
   const [Variants, validateVariant] = typeValidator("Pagination variant", ["all", "links-only"]);
@@ -14199,7 +14231,7 @@ class Pagination extends SvelteElement {
       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,
@@ -14317,6 +14349,326 @@ class Pagination extends SvelteElement {
 }
 
 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(async () => {
+    await tick();
+    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) {
@@ -20588,6 +20940,26 @@ function GoAPagination(props) {
   }, void 0);
 }
 
+const GoAPopover = ({
+  target,
+  testId,
+  maxWidth,
+  padded,
+  children
+}) => {
+  return jsxs("goa-popover", Object.assign({
+    "data-testid": testId,
+    maxwidth: maxWidth,
+    padded: padded
+  }, {
+    children: [children, target && jsx("div", Object.assign({
+      slot: "target"
+    }, {
+      children: target
+    }), void 0)]
+  }), void 0);
+};
+
 const GoASkeleton = ({
   maxWidth,
   size,
@@ -20759,4 +21131,4 @@ function GoATwoColumnLayout(props) {
   }), void 0);
 }
 
-export { GoAAccordion, GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoABlock, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADetails, GoADivider, GoADropdown, GoADropdownItem, GoADropdownOption, GoAEmergencyBadge, GoAFormItem, GoAFormStep, GoAFormStepper, GoAGrid, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAOneColumnLayout, GoAPageBlock, GoAPages, GoAPagination, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpacer, GoASpinner, GoASuccessBadge, GoATable, GoATextArea, GoATwoColumnLayout };
+export { GoAAccordion, GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoABlock, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADetails, GoADivider, GoADropdown, GoADropdownItem, GoADropdownOption, GoAEmergencyBadge, GoAFormItem, GoAFormStep, GoAFormStepper, GoAGrid, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAOneColumnLayout, GoAPageBlock, GoAPages, GoAPagination, GoAPopover, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpacer, GoASpinner, GoASuccessBadge, GoATable, GoATextArea, GoATwoColumnLayout };