@abgov/react-components 4.0.0-alpha.109 → 4.0.0-alpha.110

package/react-components.umd.js

@@ -1124,7 +1124,7 @@
 	/* libs/web-components/src/components/accordion/Accordion.svelte generated by Svelte v3.51.0 */
 
 
-	function create_fragment$H(ctx) {
+	function create_fragment$I(ctx) {
 	  let div3;
 	  let details;
 	  let summary;
@@ -1327,7 +1327,7 @@
 	  };
 	}
 
-	function instance$B($$self, $$props, $$invalidate) {
+	function instance$C($$self, $$props, $$invalidate) {
 	  let isOpen;
 	  const [HeadingSizes, validateHeadingSize] = typeValidator("Accordion heading size", ["small", "medium"]);
 	  let {
@@ -1405,7 +1405,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, {
 	      open: 10,
 	      heading: 0,
 	      secondarytext: 1,
@@ -1537,7 +1537,7 @@
 	customElements.define("goa-accordion", Accordion);
 	/* libs/web-components/src/components/app-header/AppHeader.svelte generated by Svelte v3.51.0 */
 
-	function create_else_block$4(ctx) {
+	function create_else_block$5(ctx) {
 	  let div;
 	  let img0;
 	  let img0_src_value;
@@ -1594,7 +1594,7 @@
 	} // (19:4) {#if url}
 
 
-	function create_if_block$i(ctx) {
+	function create_if_block$j(ctx) {
 	  let a;
 	  let img0;
 	  let img0_src_value;
@@ -1661,7 +1661,7 @@
 	  };
 	}
 
-	function create_fragment$G(ctx) {
+	function create_fragment$H(ctx) {
 	  let div2;
 	  let div1;
 	  let t;
@@ -1671,8 +1671,8 @@
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*url*/
-	    ctx[1]) return create_if_block$i;
-	    return create_else_block$4;
+	    ctx[1]) return create_if_block$j;
+	    return create_else_block$5;
 	  }
 
 	  let current_block_type = select_block_type(ctx);
@@ -1745,7 +1745,7 @@
 	  };
 	}
 
-	function instance$A($$self, $$props, $$invalidate) {
+	function instance$B($$self, $$props, $$invalidate) {
 	  let {
 	    heading = ""
 	  } = $$props;
@@ -1777,7 +1777,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, {
 	      heading: 0,
 	      url: 1,
 	      testid: 2,
@@ -1849,7 +1849,7 @@
 	customElements.define("goa-app-header", AppHeader);
 	/* libs/web-components/src/components/badge/Badge.svelte generated by Svelte v3.51.0 */
 
-	function create_else_block$3(ctx) {
+	function create_else_block$4(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -1905,7 +1905,7 @@
 	} // (50:2) {#if content}
 
 
-	function create_if_block$h(ctx) {
+	function create_if_block$i(ctx) {
 	  let div;
 	  let t;
 	  return {
@@ -1937,7 +1937,7 @@
 	  };
 	}
 
-	function create_fragment$F(ctx) {
+	function create_fragment$G(ctx) {
 	  let div;
 	  let t;
 	  let div_style_value;
@@ -1947,14 +1947,14 @@
 	    if (
 	    /*showIcon*/
 	    ctx[7]) return create_if_block_1$a;
-	    return create_else_block$3;
+	    return create_else_block$4;
 	  }
 
 	  let current_block_type = select_block_type(ctx);
 	  let if_block0 = current_block_type(ctx);
 	  let if_block1 =
 	  /*content*/
-	  ctx[2] && create_if_block$h(ctx);
+	  ctx[2] && create_if_block$i(ctx);
 	  return {
 	    c() {
 	      div = element("div");
@@ -2011,7 +2011,7 @@
 	        if (if_block1) {
 	          if_block1.p(ctx, dirty);
 	        } else {
-	          if_block1 = create_if_block$h(ctx);
+	          if_block1 = create_if_block$i(ctx);
 	          if_block1.c();
 	          if_block1.m(div, null);
 	        }
@@ -2073,7 +2073,7 @@
 	  };
 	}
 
-	function instance$z($$self, $$props, $$invalidate) {
+	function instance$A($$self, $$props, $$invalidate) {
 	  let showIcon;
 	  let iconType;
 	  const [Types, validateType] = typeValidator("Badge type", ["success", "important", "information", "emergency", "dark", "midtone", "light"], true);
@@ -2153,7 +2153,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$z, create_fragment$F, safe_not_equal, {
+	    }, instance$A, create_fragment$G, safe_not_equal, {
 	      type: 0,
 	      testid: 1,
 	      content: 2,
@@ -2273,7 +2273,7 @@
 	customElements.define("goa-badge", Badge);
 	/* libs/web-components/src/components/block/Block.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;
@@ -2347,7 +2347,7 @@
 	  };
 	}
 
-	function instance$y($$self, $$props, $$invalidate) {
+	function instance$z($$self, $$props, $$invalidate) {
 	  let {
 	    gap = "m"
 	  } = $$props;
@@ -2391,7 +2391,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$y, create_fragment$E, safe_not_equal, {
+	    }, instance$z, create_fragment$F, safe_not_equal, {
 	      gap: 0,
 	      direction: 1,
 	      alignment: 2,
@@ -2499,7 +2499,7 @@
 	customElements.define("goa-block", Block);
 	/* libs/web-components/src/components/button/Button.svelte generated by Svelte v3.51.0 */
 
-	function create_else_block$2(ctx) {
+	function create_else_block$3(ctx) {
 	  let t0;
 	  let span;
 	  let t1;
@@ -2576,7 +2576,7 @@
 	} // (46:2) {#if type === "start"}
 
 
-	function create_if_block$g(ctx) {
+	function create_if_block$h(ctx) {
 	  let span;
 	  let t;
 	  let goa_icon;
@@ -2697,7 +2697,7 @@
 	  };
 	}
 
-	function create_fragment$D(ctx) {
+	function create_fragment$E(ctx) {
 	  let button;
 	  let button_class_value;
 	  let button_style_value;
@@ -2707,8 +2707,8 @@
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*type*/
-	    ctx[0] === "start") return create_if_block$g;
-	    return create_else_block$2;
+	    ctx[0] === "start") return create_if_block$h;
+	    return create_else_block$3;
 	  }
 
 	  let current_block_type = select_block_type(ctx);
@@ -2851,7 +2851,7 @@
 	  };
 	}
 
-	function instance$x($$self, $$props, $$invalidate) {
+	function instance$y($$self, $$props, $$invalidate) {
 	  let isDisabled;
 	  let isButtonDark;
 	  const [Types, validateType] = typeValidator("Button type", ["primary", "submit", "secondary", "tertiary", "start"], true);
@@ -2946,7 +2946,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$x, create_fragment$D, safe_not_equal, {
+	    }, instance$y, create_fragment$E, safe_not_equal, {
 	      type: 0,
 	      size: 1,
 	      variant: 2,
@@ -3102,7 +3102,7 @@
 	customElements.define("goa-button", Button);
 	/* libs/web-components/src/components/button-group/ButtonGroup.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$C(ctx) {
+	function create_fragment$D(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -3172,7 +3172,7 @@
 	  };
 	}
 
-	function instance$w($$self, $$props, $$invalidate) {
+	function instance$x($$self, $$props, $$invalidate) {
 	  let _alignment;
 
 	  let {
@@ -3236,7 +3236,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$w, create_fragment$C, safe_not_equal, {
+	    }, instance$x, create_fragment$D, safe_not_equal, {
 	      alignment: 7,
 	      gap: 0,
 	      testid: 1,
@@ -3344,7 +3344,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$f(ctx) {
+	function create_if_block$g(ctx) {
 	  let h3;
 	  let t;
 	  return {
@@ -3375,7 +3375,7 @@
 	  };
 	}
 
-	function create_fragment$B(ctx) {
+	function create_fragment$C(ctx) {
 	  let div;
 	  let span0;
 	  let goa_icon;
@@ -3388,7 +3388,7 @@
 	  let div_style_value;
 	  let if_block =
 	  /*heading*/
-	  ctx[5] && create_if_block$f(ctx);
+	  ctx[5] && create_if_block$g(ctx);
 	  return {
 	    c() {
 	      div = element("div");
@@ -3467,7 +3467,7 @@
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
-	          if_block = create_if_block$f(ctx);
+	          if_block = create_if_block$g(ctx);
 	          if_block.c();
 	          if_block.m(span1, t1);
 	        }
@@ -3510,7 +3510,7 @@
 	  };
 	}
 
-	function instance$v($$self, $$props, $$invalidate) {
+	function instance$w($$self, $$props, $$invalidate) {
 	  let iconType;
 	  const [Types, validateType] = typeValidator("Callout type", ["emergency", "important", "information", "event", "success"], true);
 	  let {
@@ -3567,7 +3567,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$v, create_fragment$B, safe_not_equal, {
+	    }, instance$w, create_fragment$C, safe_not_equal, {
 	      mt: 0,
 	      mr: 1,
 	      mb: 2,
@@ -3675,7 +3675,7 @@
 	customElements.define("goa-callout", Callout);
 	/* libs/web-components/src/components/card-actions/CardActions.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$A(ctx) {
+	function create_fragment$B(ctx) {
 	  let goa_card_content;
 	  return {
 	    c() {
@@ -3706,7 +3706,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$A, safe_not_equal, {}, null);
+	    }, null, create_fragment$B, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -3720,7 +3720,7 @@
 	customElements.define("goa-card-actions", CardActions);
 	/* libs/web-components/src/components/card/Card.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$z(ctx) {
+	function create_fragment$A(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -3799,7 +3799,7 @@
 	  };
 	}
 
-	function instance$u($$self, $$props, $$invalidate) {
+	function instance$v($$self, $$props, $$invalidate) {
 	  let {
 	    elevation = 0
 	  } = $$props;
@@ -3847,7 +3847,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$u, create_fragment$z, safe_not_equal, {
+	    }, instance$v, create_fragment$A, safe_not_equal, {
 	      elevation: 0,
 	      width: 1,
 	      height: 2,
@@ -3967,7 +3967,7 @@
 	customElements.define("goa-card", Card);
 	/* libs/web-components/src/components/card-content/CardContent.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$y(ctx) {
+	function create_fragment$z(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -4000,7 +4000,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$y, safe_not_equal, {}, null);
+	    }, null, create_fragment$z, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -4014,7 +4014,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$x(ctx) {
+	function create_fragment$y(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -4047,7 +4047,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$x, safe_not_equal, {}, null);
+	    }, null, create_fragment$y, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -4061,7 +4061,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$w(ctx) {
+	function create_fragment$x(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -4109,7 +4109,7 @@
 	  };
 	}
 
-	function instance$t($$self, $$props, $$invalidate) {
+	function instance$u($$self, $$props, $$invalidate) {
 	  let {
 	    src
 	  } = $$props;
@@ -4133,7 +4133,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, {
 	      src: 0,
 	      height: 1
 	    }, null);
@@ -4208,7 +4208,7 @@
 	} // (68:4) {#if isIndeterminate}
 
 
-	function create_if_block$e(ctx) {
+	function create_if_block$f(ctx) {
 	  let svg;
 	  let rect;
 	  return {
@@ -4235,7 +4235,7 @@
 	  };
 	}
 
-	function create_fragment$v(ctx) {
+	function create_fragment$w(ctx) {
 	  let label;
 	  let div0;
 	  let input;
@@ -4253,7 +4253,7 @@
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*isIndeterminate*/
-	    ctx[10]) return create_if_block$e;
+	    ctx[10]) return create_if_block$f;
 	    if (
 	    /*isChecked*/
 	    ctx[9]) return create_if_block_1$8;
@@ -4484,7 +4484,7 @@
 	  };
 	}
 
-	function instance$s($$self, $$props, $$invalidate) {
+	function instance$t($$self, $$props, $$invalidate) {
 	  let isDisabled;
 	  let isError;
 	  let isChecked;
@@ -4599,7 +4599,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, {
 	      name: 0,
 	      checked: 14,
 	      text: 1,
@@ -4801,7 +4801,7 @@
 	} // (54:2) {#if _deletable}
 
 
-	function create_if_block$d(ctx) {
+	function create_if_block$e(ctx) {
 	  let goa_icon;
 	  let goa_icon_fillcolor_value;
 	  let goa_icon_opacity_value;
@@ -4857,7 +4857,7 @@
 	  };
 	}
 
-	function create_fragment$u(ctx) {
+	function create_fragment$v(ctx) {
 	  let div1;
 	  let t0;
 	  let div0;
@@ -4871,7 +4871,7 @@
 	  ctx[4] && create_if_block_1$7(ctx);
 	  let if_block1 =
 	  /*_deletable*/
-	  ctx[11] && create_if_block$d(ctx);
+	  ctx[11] && create_if_block$e(ctx);
 	  return {
 	    c() {
 	      div1 = element("div");
@@ -4966,7 +4966,7 @@
 	        if (if_block1) {
 	          if_block1.p(ctx, dirty);
 	        } else {
-	          if_block1 = create_if_block$d(ctx);
+	          if_block1 = create_if_block$e(ctx);
 	          if_block1.c();
 	          if_block1.m(div1, null);
 	        }
@@ -5039,7 +5039,7 @@
 	  };
 	}
 
-	function instance$r($$self, $$props, $$invalidate) {
+	function instance$s($$self, $$props, $$invalidate) {
 	  let {
 	    mt = null
 	  } = $$props;
@@ -5140,7 +5140,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, {
 	      mt: 0,
 	      mr: 1,
 	      mb: 2,
@@ -5397,7 +5397,7 @@
 	/* libs/web-components/src/components/circular-progress/CircularProgress.svelte generated by Svelte v3.51.0 */
 
 
-	function create_if_block$c(ctx) {
+	function create_if_block$d(ctx) {
 	  let current_block_type_index;
 	  let if_block;
 	  let if_block_anchor;
@@ -5768,12 +5768,12 @@
 	  };
 	}
 
-	function create_fragment$t(ctx) {
+	function create_fragment$u(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
 	  /*isVisible*/
-	  ctx[5] && create_if_block$c(ctx);
+	  ctx[5] && create_if_block$d(ctx);
 	  return {
 	    c() {
 	      if (if_block) if_block.c();
@@ -5800,7 +5800,7 @@
 	            transition_in(if_block, 1);
 	          }
 	        } else {
-	          if_block = create_if_block$c(ctx);
+	          if_block = create_if_block$d(ctx);
 	          if_block.c();
 	          transition_in(if_block, 1);
 	          if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -5833,7 +5833,7 @@
 	  };
 	}
 
-	function instance$q($$self, $$props, $$invalidate) {
+	function instance$r($$self, $$props, $$invalidate) {
 	  let isVisible;
 	  const [Variants, validateVariant] = typeValidator("Circular progress variant", ["fullscreen", "inline"]);
 	  const [Sizes, validateSize] = typeValidator("Button size", ["small", "large"]);
@@ -5891,7 +5891,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$q, create_fragment$t, safe_not_equal, {
+	    }, instance$r, create_fragment$u, safe_not_equal, {
 	      variant: 6,
 	      size: 7,
 	      message: 0,
@@ -5975,7 +5975,7 @@
 	customElements.define("goa-circular-progress", CircularProgress);
 	/* libs/web-components/src/components/container/Container.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$s(ctx) {
+	function create_fragment$t(ctx) {
 	  let div3;
 	  let header;
 	  let div0;
@@ -6100,7 +6100,7 @@
 	  };
 	}
 
-	function instance$p($$self, $$props, $$invalidate) {
+	function instance$q($$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"]);
@@ -6156,7 +6156,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$p, create_fragment$s, safe_not_equal, {
+	    }, instance$q, create_fragment$t, safe_not_equal, {
 	      type: 0,
 	      accent: 1,
 	      padding: 2,
@@ -6276,7 +6276,7 @@
 	customElements.define("goa-container", Container);
 	/* libs/web-components/src/components/divider/Divider.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$r(ctx) {
+	function create_fragment$s(ctx) {
 	  let hr;
 	  let hr_style_value;
 	  return {
@@ -6335,7 +6335,7 @@
 	  };
 	}
 
-	function instance$o($$self, $$props, $$invalidate) {
+	function instance$p($$self, $$props, $$invalidate) {
 	  let {
 	    testid = ""
 	  } = $$props;
@@ -6371,7 +6371,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$o, create_fragment$r, safe_not_equal, {
+	    }, instance$p, create_fragment$s, safe_not_equal, {
 	      testid: 0,
 	      mt: 1,
 	      mr: 2,
@@ -6469,7 +6469,7 @@
 	} // (256:2) {:else}
 
 
-	function create_else_block$1(ctx) {
+	function create_else_block$2(ctx) {
 	  let t0;
 	  let goa_input;
 	  let goa_input_arialabel_value;
@@ -6738,7 +6738,7 @@
 	} // (237:2) {#if _native}
 
 
-	function create_if_block$b(ctx) {
+	function create_if_block$c(ctx) {
 	  let select;
 	  let slot;
 	  let select_aria_label_value;
@@ -7161,7 +7161,7 @@
 	  };
 	}
 
-	function create_fragment$q(ctx) {
+	function create_fragment$r(ctx) {
 	  let div;
 	  let div_data_testid_value;
 	  let div_style_value;
@@ -7169,8 +7169,8 @@
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*_native*/
-	    ctx[22]) return create_if_block$b;
-	    return create_else_block$1;
+	    ctx[22]) return create_if_block$c;
+	    return create_else_block$2;
 	  }
 
 	  let current_block_type = select_block_type(ctx);
@@ -7278,7 +7278,7 @@
 	  };
 	}
 
-	function instance$n($$self, $$props, $$invalidate) {
+	function instance$o($$self, $$props, $$invalidate) {
 	  const showMenu = _async(function () {
 	    if (_disabled || _isMenuVisible) {
 	      return;
@@ -7670,7 +7670,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$n, create_fragment$q, safe_not_equal, {
+	    }, instance$o, create_fragment$r, safe_not_equal, {
 	      name: 0,
 	      arialabel: 1,
 	      value: 28,
@@ -7874,7 +7874,7 @@
 	customElements.define("goa-dropdown", Dropdown);
 	/* libs/web-components/src/components/dropdown/DropdownItem.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$p(ctx) {
+	function create_fragment$q(ctx) {
 	  return {
 	    c() {
 	      this.c = noop;
@@ -7895,7 +7895,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$p, safe_not_equal, {}, null);
+	    }, null, create_fragment$q, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -7909,7 +7909,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$o(ctx) {
+	function create_fragment$p(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -7970,7 +7970,7 @@
 	  }
 	}
 
-	function instance$m($$self, $$props, $$invalidate) {
+	function instance$n($$self, $$props, $$invalidate) {
 	  let isActive;
 	  let {
 	    active
@@ -8139,7 +8139,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, {
 	      active: 1
 	    }, null);
 
@@ -8175,7 +8175,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$a(ctx) {
+	function create_if_block$b(ctx) {
 	  let goa_divider;
 	  return {
 	    c() {
@@ -8194,7 +8194,7 @@
 	  };
 	}
 
-	function create_fragment$n(ctx) {
+	function create_fragment$o(ctx) {
 	  let div5;
 	  let div4;
 	  let div0;
@@ -8212,7 +8212,7 @@
 	  /*navLinks*/
 	  ctx[2] &&
 	  /*navLinks*/
-	  ctx[2].length > 0 && create_if_block$a();
+	  ctx[2].length > 0 && create_if_block$b();
 	  return {
 	    c() {
 	      div5 = element("div");
@@ -8285,7 +8285,7 @@
 	      /*navLinks*/
 	      ctx[2].length > 0) {
 	        if (if_block) ;else {
-	          if_block = create_if_block$a();
+	          if_block = create_if_block$b();
 	          if_block.c();
 	          if_block.m(div4, t1);
 	        }
@@ -8337,7 +8337,7 @@
 	  };
 	}
 
-	function instance$l($$self, $$props, $$invalidate) {
+	function instance$m($$self, $$props, $$invalidate) {
 	  let {
 	    maxcontentwidth = ""
 	  } = $$props;
@@ -8376,7 +8376,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, {
 	      maxcontentwidth: 0
 	    }, null);
 
@@ -8466,7 +8466,7 @@
 	  };
 	}
 
-	function create_fragment$m(ctx) {
+	function create_fragment$n(ctx) {
 	  let section;
 	  let div;
 	  let t;
@@ -8554,7 +8554,7 @@
 	  };
 	}
 
-	function instance$k($$self, $$props, $$invalidate) {
+	function instance$l($$self, $$props, $$invalidate) {
 	  let rootEl;
 	  let children = [];
 	  onMount(function () {
@@ -8589,7 +8589,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$k, create_fragment$m, safe_not_equal, {}, null);
+	    }, instance$l, create_fragment$n, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -8610,7 +8610,7 @@
 	} // (31:2) {#if heading}
 
 
-	function create_if_block$9(ctx) {
+	function create_if_block$a(ctx) {
 	  let div;
 	  let t0;
 	  let t1;
@@ -8699,7 +8699,7 @@
 	  };
 	}
 
-	function create_fragment$l(ctx) {
+	function create_fragment$m(ctx) {
 	  let section;
 	  let t0;
 	  let div;
@@ -8708,7 +8708,7 @@
 	  let ul_style_value;
 	  let if_block =
 	  /*heading*/
-	  ctx[0] && create_if_block$9(ctx);
+	  ctx[0] && create_if_block$a(ctx);
 	  let each_value =
 	  /*children*/
 	  ctx[3];
@@ -8775,7 +8775,7 @@
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
-	          if_block = create_if_block$9(ctx);
+	          if_block = create_if_block$a(ctx);
 	          if_block.c();
 	          if_block.m(section, t0);
 	        }
@@ -8846,7 +8846,7 @@
 	  };
 	}
 
-	function instance$j($$self, $$props, $$invalidate) {
+	function instance$k($$self, $$props, $$invalidate) {
 	  let {
 	    heading = ""
 	  } = $$props;
@@ -8898,7 +8898,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, {
 	      heading: 0,
 	      maxcolumncount: 1
 	    }, null);
@@ -9096,7 +9096,7 @@
 	} // (48:2) {#if helptext}
 
 
-	function create_if_block$8(ctx) {
+	function create_if_block$9(ctx) {
 	  let div;
 	  let t;
 	  return {
@@ -9128,7 +9128,7 @@
 	  };
 	}
 
-	function create_fragment$k(ctx) {
+	function create_fragment$l(ctx) {
 	  let div1;
 	  let t0;
 	  let div0;
@@ -9143,7 +9143,7 @@
 	  ctx[7] && create_if_block_1$4(ctx);
 	  let if_block2 =
 	  /*helptext*/
-	  ctx[6] && create_if_block$8(ctx);
+	  ctx[6] && create_if_block$9(ctx);
 	  return {
 	    c() {
 	      div1 = element("div");
@@ -9220,7 +9220,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(div1, null);
 	        }
@@ -9265,7 +9265,7 @@
 	  };
 	}
 
-	function instance$i($$self, $$props, $$invalidate) {
+	function instance$j($$self, $$props, $$invalidate) {
 	  const [REQUIREMENT_TYPES, validateRequirementType] = typeValidator("Requirement type", ["optional", "required"], false);
 	  let {
 	    testid = ""
@@ -9321,7 +9321,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, {
 	      testid: 0,
 	      mt: 1,
 	      mr: 2,
@@ -9453,7 +9453,7 @@
 	customElements.define("goa-form-item", FormItem);
 	/* libs/web-components/src/components/grid/Grid.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;
@@ -9521,7 +9521,7 @@
 	  };
 	}
 
-	function instance$h($$self, $$props, $$invalidate) {
+	function instance$i($$self, $$props, $$invalidate) {
 	  let {
 	    gap = "m"
 	  } = $$props;
@@ -9566,7 +9566,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, {
 	      gap: 0,
 	      minchildwidth: 1,
 	      mt: 2,
@@ -9662,7 +9662,7 @@
 	customElements.define("goa-grid", Grid);
 	/* libs/web-components/src/components/hero-banner/HeroBanner.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$i(ctx) {
+	function create_fragment$j(ctx) {
 	  let div1;
 	  let goa_page_block;
 	  let h1;
@@ -9747,7 +9747,7 @@
 	  };
 	}
 
-	function instance$g($$self, $$props, $$invalidate) {
+	function instance$h($$self, $$props, $$invalidate) {
 	  let {
 	    heading
 	  } = $$props;
@@ -9775,7 +9775,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, {
 	      heading: 0,
 	      backgroundurl: 1,
 	      minheight: 2
@@ -9835,7 +9835,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$h(ctx) {
+	function create_fragment$i(ctx) {
 	  let button;
 	  let goa_icon;
 	  let button_style_value;
@@ -10007,7 +10007,7 @@
 	  }));
 	}
 
-	function instance$f($$self, $$props, $$invalidate) {
+	function instance$g($$self, $$props, $$invalidate) {
 	  let css;
 	  let isDisabled;
 	  let isInverted;
@@ -10112,7 +10112,7 @@
 	      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, {
 	      icon: 0,
 	      size: 1,
 	      theme: 2,
@@ -10280,7 +10280,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$7(ctx) {
+	function create_if_block$8(ctx) {
 	  let ion_icon;
 	  let ion_icon_name_value;
 	  return {
@@ -10328,12 +10328,12 @@
 	  };
 	}
 
-	function create_fragment$g(ctx) {
+	function create_fragment$h(ctx) {
 	  let div;
 	  let div_style_value;
 	  let if_block =
 	  /*type*/
-	  ctx[4] && create_if_block$7(ctx);
+	  ctx[4] && create_if_block$8(ctx);
 	  return {
 	    c() {
 	      div = element("div");
@@ -10386,7 +10386,7 @@
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
-	          if_block = create_if_block$7(ctx);
+	          if_block = create_if_block$8(ctx);
 	          if_block.c();
 	          if_block.m(div, null);
 	        }
@@ -10459,7 +10459,7 @@
 	  };
 	}
 
-	function instance$e($$self, $$props, $$invalidate) {
+	function instance$f($$self, $$props, $$invalidate) {
 	  let isInverted;
 
 	  let _size;
@@ -10549,7 +10549,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, {
 	      mt: 0,
 	      mr: 1,
 	      mb: 2,
@@ -10886,7 +10886,7 @@
 	} // (161:4) {#if suffix}
 
 
-	function create_if_block$6(ctx) {
+	function create_if_block$7(ctx) {
 	  let span;
 	  let t;
 	  return {
@@ -10918,7 +10918,7 @@
 	  };
 	}
 
-	function create_fragment$f(ctx) {
+	function create_fragment$g(ctx) {
 	  let div3;
 	  let div2;
 	  let t0;
@@ -10956,7 +10956,7 @@
 	  ctx[24] && create_if_block_1$3(ctx);
 	  let if_block4 =
 	  /*suffix*/
-	  ctx[15] && create_if_block$6(ctx);
+	  ctx[15] && create_if_block$7(ctx);
 	  return {
 	    c() {
 	      div3 = element("div");
@@ -11277,7 +11277,7 @@
 	        if (if_block4) {
 	          if_block4.p(ctx, dirty);
 	        } else {
-	          if_block4 = create_if_block$6(ctx);
+	          if_block4 = create_if_block$7(ctx);
 	          if_block4.c();
 	          if_block4.m(div2, t6);
 	        }
@@ -11357,7 +11357,7 @@
 	  }));
 	}
 
-	function instance$d($$self, $$props, $$invalidate) {
+	function instance$e($$self, $$props, $$invalidate) {
 	  let handlesTrailingIconClick;
 	  let isFocused;
 	  let isReadonly;
@@ -11577,7 +11577,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, {
 	      type: 1,
 	      name: 2,
 	      value: 0,
@@ -12075,7 +12075,7 @@
 	} // (56:2) {#if version}
 
 
-	function create_if_block$5(ctx) {
+	function create_if_block$6(ctx) {
 	  let div;
 	  let t;
 	  return {
@@ -12108,7 +12108,7 @@
 	  };
 	}
 
-	function create_fragment$e(ctx) {
+	function create_fragment$f(ctx) {
 	  let header;
 	  let t0;
 	  let show_if = ["alpha", "beta"].includes(
@@ -12123,7 +12123,7 @@
 	  let if_block1 = show_if && create_if_block_1$2(ctx);
 	  let if_block2 =
 	  /*version*/
-	  ctx[1] && create_if_block$5(ctx);
+	  ctx[1] && create_if_block$6(ctx);
 	  return {
 	    c() {
 	      header = element("header");
@@ -12189,7 +12189,7 @@
 	        if (if_block2) {
 	          if_block2.p(ctx, dirty);
 	        } else {
-	          if_block2 = create_if_block$5(ctx);
+	          if_block2 = create_if_block$6(ctx);
 	          if_block2.c();
 	          if_block2.m(header, null);
 	        }
@@ -12217,7 +12217,7 @@
 	  return val[0].toUpperCase() + val.slice(1);
 	}
 
-	function instance$c($$self, $$props, $$invalidate) {
+	function instance$d($$self, $$props, $$invalidate) {
 	  const [Types, validateType] = typeValidator("Microsite header type", ["live", "alpha", "beta"], true);
 	  let {
 	    type
@@ -12249,7 +12249,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, {
 	      type: 0,
 	      version: 1,
 	      feedbackurl: 2
@@ -12309,7 +12309,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$4(ctx) {
+	function create_if_block$5(ctx) {
 	  let goa_focus_trap;
 	  let div5;
 	  let div0;
@@ -12714,12 +12714,12 @@
 	  };
 	}
 
-	function create_fragment$d(ctx) {
+	function create_fragment$e(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
 	  /*isOpen*/
-	  ctx[7] && create_if_block$4(ctx);
+	  ctx[7] && create_if_block$5(ctx);
 	  return {
 	    c() {
 	      if (if_block) if_block.c();
@@ -12746,7 +12746,7 @@
 	            transition_in(if_block, 1);
 	          }
 	        } else {
-	          if_block = create_if_block$4(ctx);
+	          if_block = create_if_block$5(ctx);
 	          if_block.c();
 	          transition_in(if_block, 1);
 	          if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -12779,7 +12779,7 @@
 	  };
 	}
 
-	function instance$b($$self, $$props, $$invalidate) {
+	function instance$c($$self, $$props, $$invalidate) {
 	  let isClosable;
 	  let isOpen;
 
@@ -12869,7 +12869,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$b, create_fragment$d, safe_not_equal, {
+	    }, instance$c, create_fragment$e, safe_not_equal, {
 	      heading: 0,
 	      closable: 9,
 	      open: 1,
@@ -12965,7 +12965,7 @@
 	customElements.define("goa-modal", Modal);
 	/* libs/web-components/src/components/notification/Notification.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block$3(ctx) {
+	function create_if_block$4(ctx) {
 	  let div3;
 	  let div0;
 	  let goa_icon;
@@ -13089,12 +13089,12 @@
 	  };
 	}
 
-	function create_fragment$c(ctx) {
+	function create_fragment$d(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
 	  /*show*/
-	  ctx[1] && create_if_block$3(ctx);
+	  ctx[1] && create_if_block$4(ctx);
 	  return {
 	    c() {
 	      if (if_block) if_block.c();
@@ -13121,7 +13121,7 @@
 	            transition_in(if_block, 1);
 	          }
 	        } else {
-	          if_block = create_if_block$3(ctx);
+	          if_block = create_if_block$4(ctx);
 	          if_block.c();
 	          transition_in(if_block, 1);
 	          if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -13154,7 +13154,7 @@
 	  };
 	}
 
-	function instance$a($$self, $$props, $$invalidate) {
+	function instance$b($$self, $$props, $$invalidate) {
 	  let iconType;
 	  const [Types, validateType] = typeValidator("Notification type", ["emergency", "important", "information", "event"], true);
 	  let {
@@ -13196,7 +13196,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$a, create_fragment$c, safe_not_equal, {
+	    }, instance$b, create_fragment$d, safe_not_equal, {
 	      type: 0
 	    }, null);
 
@@ -13238,7 +13238,7 @@
 	/* libs/web-components/src/components/page-block/PageBlock.svelte generated by Svelte v3.51.0 */
 
 
-	function create_fragment$b(ctx) {
+	function create_fragment$c(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -13278,7 +13278,7 @@
 	  };
 	}
 
-	function instance$9($$self, $$props, $$invalidate) {
+	function instance$a($$self, $$props, $$invalidate) {
 	  const Sizes = {
 	    "full": "100%"
 	  };
@@ -13319,7 +13319,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$9, create_fragment$b, safe_not_equal, {
+	    }, instance$a, create_fragment$c, safe_not_equal, {
 	      width: 1,
 	      _width: 0
 	    }, null);
@@ -13557,7 +13557,7 @@
 	  };
 	}
 
-	function create_fragment$a(ctx) {
+	function create_fragment$b(ctx) {
 	  let div;
 	  let slot;
 	  let t;
@@ -13680,7 +13680,7 @@
 	  };
 	}
 
-	function instance$8($$self, $$props, $$invalidate) {
+	function instance$9($$self, $$props, $$invalidate) {
 	  let isDisabled;
 	  let isError;
 	  const [Orientations, validateOrientation] = typeValidator("Radio group orientation", ["vertical", "horizontal"]);
@@ -13825,7 +13825,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$8, create_fragment$a, safe_not_equal, {
+	    }, instance$9, create_fragment$b, safe_not_equal, {
 	      name: 1,
 	      value: 0,
 	      orientation: 2,
@@ -13981,7 +13981,7 @@
 	customElements.define("goa-radio-group", RadioGroup);
 	/* libs/web-components/src/components/scrollable/Scrollable.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$9(ctx) {
+	function create_fragment$a(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -14049,7 +14049,7 @@
 	  };
 	}
 
-	function instance$7($$self, $$props, $$invalidate) {
+	function instance$8($$self, $$props, $$invalidate) {
 	  let {
 	    direction = "vertical"
 	  } = $$props;
@@ -14081,7 +14081,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$7, create_fragment$9, safe_not_equal, {
+	    }, instance$8, create_fragment$a, safe_not_equal, {
 	      direction: 0,
 	      hpadding: 1,
 	      vpadding: 2,
@@ -14160,7 +14160,7 @@
 	} // (55:2) {:else}
 
 
-	function create_else_block(ctx) {
+	function create_else_block$1(ctx) {
 	  let div;
 	  let div_class_value;
 	  return {
@@ -14422,7 +14422,7 @@
 	} // (30:2) {#if type === "card"}
 
 
-	function create_if_block$2(ctx) {
+	function create_if_block$3(ctx) {
 	  let div1;
 	  let skeleton0;
 	  let t0;
@@ -14616,13 +14616,13 @@
 	  };
 	}
 
-	function create_fragment$8(ctx) {
+	function create_fragment$9(ctx) {
 	  let div;
 	  let current_block_type_index;
 	  let if_block;
 	  let div_style_value;
 	  let current;
-	  const if_block_creators = [create_if_block$2, create_if_block_1, create_if_block_2, create_else_block];
+	  const if_block_creators = [create_if_block$3, create_if_block_1, create_if_block_2, create_else_block$1];
 	  const if_blocks = [];
 
 	  function select_block_type(ctx, dirty) {
@@ -14732,7 +14732,7 @@
 	  };
 	}
 
-	function instance$6($$self, $$props, $$invalidate) {
+	function instance$7($$self, $$props, $$invalidate) {
 	  const [Types, validateType] = typeValidator("Skeleton type", ["image", "text", "title", "text-small", "avatar", "header", "paragraph", "thumbnail", "card", "profile", "lines"], true);
 	  const [Sizes, validateSize] = typeValidator("Skeleton size", ["1", "2", "3", "4"]);
 	  let {
@@ -14790,7 +14790,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$6, create_fragment$8, safe_not_equal, {
+	    }, instance$7, create_fragment$9, safe_not_equal, {
 	      maxwidth: 0,
 	      size: 1,
 	      linecount: 2,
@@ -14922,7 +14922,7 @@
 	customElements.define("goa-skeleton", Skeleton);
 	/* libs/web-components/src/components/spacer/Spacer.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$7(ctx) {
+	function create_fragment$8(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -14951,7 +14951,7 @@
 	  };
 	}
 
-	function instance$5($$self, $$props, $$invalidate) {
+	function instance$6($$self, $$props, $$invalidate) {
 	  let {
 	    hspacing = "none"
 	  } = $$props;
@@ -14988,7 +14988,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$5, create_fragment$7, safe_not_equal, {
+	    }, instance$6, create_fragment$8, safe_not_equal, {
 	      hspacing: 1,
 	      vspacing: 2
 	    }, null);
@@ -15220,7 +15220,7 @@
 	/* libs/web-components/src/components/spinner/Spinner.svelte generated by Svelte v3.51.0 */
 
 
-	function create_if_block$1(ctx) {
+	function create_if_block$2(ctx) {
 	  let svg;
 	  let circle;
 	  let circle_stroke_value;
@@ -15410,11 +15410,11 @@
 	  };
 	}
 
-	function create_fragment$6(ctx) {
+	function create_fragment$7(ctx) {
 	  let if_block_anchor;
 	  let if_block =
 	  /*ready*/
-	  ctx[6] && create_if_block$1(ctx);
+	  ctx[6] && create_if_block$2(ctx);
 	  return {
 	    c() {
 	      if (if_block) if_block.c();
@@ -15434,7 +15434,7 @@
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
-	          if_block = create_if_block$1(ctx);
+	          if_block = create_if_block$2(ctx);
 	          if_block.c();
 	          if_block.m(if_block_anchor.parentNode, if_block_anchor);
 	        }
@@ -15455,7 +15455,7 @@
 	  };
 	}
 
-	function instance$4($$self, $$props, $$invalidate) {
+	function instance$5($$self, $$props, $$invalidate) {
 	  let diameter;
 	  let strokewidth;
 	  let radius;
@@ -15586,7 +15586,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$4, create_fragment$6, safe_not_equal, {
+	    }, instance$5, create_fragment$7, safe_not_equal, {
 	      size: 10,
 	      invert: 0,
 	      progress: 11,
@@ -15658,7 +15658,7 @@
 	customElements.define("goa-spinner", Spinner);
 	/* libs/web-components/src/components/table/Table.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$5(ctx) {
+	function create_fragment$6(ctx) {
 	  let table;
 	  let slot;
 	  let t0;
@@ -15760,7 +15760,41 @@
 	  };
 	}
 
-	function instance$3($$self, $$props, $$invalidate) {
+	function instance$4($$self, $$props, $$invalidate) {
+	  const attachSortEventHandling = function attachSortEventHandling() {
+	    return _call(tick, function () {
+	      const headings = _rootEl.querySelectorAll("goa-table-sort-header");
+
+	      headings.forEach(heading => {
+	        heading.addEventListener("click", () => {
+	          const sortBy = heading.getAttribute("name");
+	          let sortDir; // relay state to all children
+
+	          headings.forEach(child => {
+	            if (child.getAttribute("name") === sortBy) {
+	              const direction = child.getAttribute("direction"); // starting direction is desc
+
+	              const newDirection = direction === "desc" ? "asc" : "desc";
+	              sortDir = newDirection === "asc" ? 1 : -1;
+	              child.setAttribute("direction", newDirection);
+	            } else {
+	              child.setAttribute("direction", "none");
+	            }
+	          });
+	          heading.dispatchEvent(new CustomEvent("_sort", {
+	            composed: true,
+	            bubbles: false,
+	            cancelable: true,
+	            detail: {
+	              sortBy,
+	              sortDir
+	            }
+	          }));
+	        });
+	      });
+	    });
+	  };
+
 	  let _stickyHeader;
 
 	  const [Variants, validateVariant] = typeValidator("Table variant", ["normal", "relaxed"], true);
@@ -15790,17 +15824,18 @@
 
 	  onMount(() => {
 	    validateVariant(variant);
+	    attachSortEventHandling();
 
 	    const slot = _rootEl.querySelector("slot");
 
-	    if (slot) {
-	      // React needs to nest data in a <table>...</table>
-	      const content = slot.assignedElements()[0].querySelectorAll("template table > *");
+	    if (!slot || slot.assignedElements().length === 0) {
+	      return;
+	    } // React needs to nest data in a <table>...</table>
 
-	      _rootEl.append(...(content.length > 0 ? content : slot.assignedElements()));
-	    } else {
-	      return [..._rootEl.children];
-	    }
+
+	    const content = slot.assignedElements()[0].querySelectorAll("template table > *");
+
+	    _rootEl.append(...(content.length > 0 ? content : slot.assignedElements()));
 	  });
 
 	  function table_binding($$value) {
@@ -15834,12 +15869,12 @@
 	class Table extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{padding:0.75rem 1rem 0.5rem;border-bottom:1px solid var(--goa-color-greyscale-200);line-height:1rem}table.relaxed td{padding:1.25rem 1rem 1rem}th{background-color:var(--goa-color-greyscale-white);color:var(--goa-color-text-secondary);padding:1rem;vertical-align:middle;text-align:left;border-bottom:2px solid var(--goa-color-greyscale-700)}tfoot td{background-color:var(--goa-color-greyscale-100)}tfoot tr:first-child td{border-top:2px solid var(--goa-color-greyscale-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{overflow-x:auto}table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{padding:0.75rem 1rem;border-bottom:1px solid var(--goa-color-greyscale-200);line-height:1rem}table.relaxed td{padding:1rem}th{background-color:var(--goa-color-greyscale-white);color:var(--goa-color-text-secondary);padding:1rem;text-align:left;border-bottom:2px solid var(--goa-color-greyscale-700);vertical-align:bottom}th:has(goa-table-sort-header){padding:0}tfoot td{background-color:var(--goa-color-greyscale-100)}tfoot tr:first-child td{border-top:2px solid var(--goa-color-greyscale-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$3, create_fragment$5, safe_not_equal, {
+	    }, instance$4, create_fragment$6, safe_not_equal, {
 	      width: 0,
 	      stickyheader: 8,
 	      variant: 1,
@@ -15945,6 +15980,185 @@
 	}
 
 	customElements.define("goa-table", Table);
+	/* libs/web-components/src/components/table/TableSortHeader.svelte generated by Svelte v3.51.0 */
+
+	function create_else_block(ctx) {
+	  let img;
+	  let img_src_value;
+	  return {
+	    c() {
+	      img = element("img");
+	      attr(img, "alt",
+	      /*direction*/
+	      ctx[0]);
+	      attr(img, "class",
+	      /*direction*/
+	      ctx[0]);
+	      if (!src_url_equal(img.src, img_src_value = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgd2lkdGg9IjE2IgogICBoZWlnaHQ9IjIyIgogICB2aWV3Qm94PSIwIDAgMTYgMjIiCiAgIGZpbGw9Im5vbmUiCiAgIHZlcnNpb249IjEuMSIKICAgaWQ9InN2ZzEwNjgiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGRlZnMKICAgICBpZD0iZGVmczEwNzIiIC8+CiAgPHBhdGgKICAgICBkPSJtIDAuNTk0Mzc0NzEsNy45MDkwOTkgNi41NTIxODc5OSw3LjY0NjI1IGMgMC4xMDU2MSwwLjEyMzE4IDAuMjM2NjIsMC4yMjIwNiAwLjM4NDA0LDAuMjg5ODUgMC4xNDc0MiwwLjA2Nzc5IDAuMzA3NzYsMC4xMDI4OSAwLjQ3MDAyLDAuMTAyODkgMC4xNjIyNiwwIDAuMzIyNiwtMC4wMzUxIDAuNDcwMDIsLTAuMTAyODkgMC4xNDc0MiwtMC4wNjc3OSAwLjI3ODQzLC0wLjE2NjY3IDAuMzg0MDQsLTAuMjg5ODUgbCA2LjU1MjE4MDMsLTcuNjQ2MjUgYyAwLjYyNTMsLTAuNzI5ODQgMC4xMDY5LC0xLjg1NzE4OCAtMC44NTQxLC0xLjg1NzE4OCBIIDEuNDQ2NTYyNyBjIC0wLjk2MDkzNzk5LDAgLTEuNDc5Mzc1NjksMS4xMjczNDggLTAuODUyMTg3OTksMS44NTcxODggeiIKICAgICBmaWxsPSIjMDA3MGM0IgogICAgIGlkPSJwYXRoMTA2NiIgLz4KPC9zdmc+Cg==")) attr(img, "src", img_src_value);
+	    },
+
+	    m(target, anchor) {
+	      insert(target, img, anchor);
+	    },
+
+	    p(ctx, dirty) {
+	      if (dirty &
+	      /*direction*/
+	      1) {
+	        attr(img, "alt",
+	        /*direction*/
+	        ctx[0]);
+	      }
+
+	      if (dirty &
+	      /*direction*/
+	      1) {
+	        attr(img, "class",
+	        /*direction*/
+	        ctx[0]);
+	      }
+	    },
+
+	    d(detaching) {
+	      if (detaching) detach(img);
+	    }
+
+	  };
+	} // (55:2) {#if direction === "none"}
+
+
+	function create_if_block$1(ctx) {
+	  let img;
+	  let img_src_value;
+	  return {
+	    c() {
+	      img = element("img");
+	      attr(img, "alt", "not sorted");
+	      if (!src_url_equal(img.src, img_src_value = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB3aWR0aD0iMTUuMzU5ODg3IgogICBoZWlnaHQ9IjIxLjg0NDI1IgogICB2aWV3Qm94PSIwIDAgNC4wNjM5NzAxIDUuNzc5NjI0NCIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnNTE3IgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM1MTQiIC8+CiAgPGcKICAgICBpZD0ibGF5ZXIxIgogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC05LjM0NTE0MDMsLTguNzQ0OTg2NikiPgogICAgPHBhdGgKICAgICAgIGQ9Im0gOS40MTc3Njg0LDEyLjM5NzYzMSAxLjczMzU5ODYsMi4wMjMwNyBjIDAuMDI3OTQsMC4wMzI1OSAwLjA2MjYxLDAuMDU4NzUgMC4xMDE2MTEsMC4wNzY2OSAwLjAzOSwwLjAxNzk0IDAuMDgxNDMsMC4wMjcyMiAwLjEyNDM1OSwwLjAyNzIyIDAuMDQyOTMsMCAwLjA4NTM1LC0wLjAwOTMgMC4xMjQzNiwtMC4wMjcyMiAwLjAzOSwtMC4wMTc5NCAwLjA3MzY3LC0wLjA0NDEgMC4xMDE2MSwtMC4wNzY2OSBsIDEuNzMzNTk4LC0yLjAyMzA3IGMgMC4xNjU0NDQsLTAuMTkzMTA0IDAuMDI4MjgsLTAuNDkxMzgxIC0wLjIyNTk4MSwtMC40OTEzODEgSCA5LjY0MzI0MjQgYyAtMC4yNTQyNDgsMCAtMC4zOTE0MTgsMC4yOTgyNzcgLTAuMjI1NDc0LDAuNDkxMzgxIHoiCiAgICAgICBmaWxsPSIjYWRhZGFkIgogICAgICAgaWQ9InBhdGgzMzUiCiAgICAgICBzdHlsZT0ic3Ryb2tlLXdpZHRoOjAuMjY0NTgzIiAvPgogICAgPHBhdGgKICAgICAgIGQ9Ik0gMTMuMzM2NDk0LDEwLjg3MTk2OCAxMS42MDI4ODksOC44NDg4OTY2IGMgLTAuMDI3OTQsLTAuMDMyNTkgLTAuMDYyNjEsLTAuMDU4NzUgLTAuMTAxNjExLC0wLjA3NjY5IC0wLjAzOSwtMC4wMTc5NCAtMC4wODE0MywtMC4wMjcyMiAtMC4xMjQzNTksLTAuMDI3MjIgLTAuMDQyOTMsMCAtMC4wODUzNSwwLjAwOTMgLTAuMTI0MzYsMC4wMjcyMiAtMC4wMzkwMSwwLjAxNzk0IC0wLjA3MzY3LDAuMDQ0MSAtMC4xMDE2MTMsMC4wNzY2OSBMIDkuNDE3MzQ3MSwxMC44NzE5NjggYyAtMC4xNjU0NDcsMC4xOTMxMDMgLTAuMDI4MjgsMC40OTEzNzkgMC4yMjU5NzEsMC40OTEzNzkgaCAzLjQ2NzY5NzkgYyAwLjI1NDIzOCwwIDAuMzkxNDI1LC0wLjI5ODI3NiAwLjIyNTQ3OCwtMC40OTEzNzkgeiIKICAgICAgIGZpbGw9IiNhZGFkYWQiCiAgICAgICBpZD0icGF0aDIiCiAgICAgICBzdHlsZT0ic3Ryb2tlLXdpZHRoOjAuMjY0NTgzIiAvPgogIDwvZz4KPC9zdmc+Cg==")) attr(img, "src", img_src_value);
+	    },
+
+	    m(target, anchor) {
+	      insert(target, img, anchor);
+	    },
+
+	    p: noop,
+
+	    d(detaching) {
+	      if (detaching) detach(img);
+	    }
+
+	  };
+	}
+
+	function create_fragment$5(ctx) {
+	  let button;
+	  let slot;
+	  let t;
+
+	  function select_block_type(ctx, dirty) {
+	    if (
+	    /*direction*/
+	    ctx[0] === "none") return create_if_block$1;
+	    return create_else_block;
+	  }
+
+	  let current_block_type = select_block_type(ctx);
+	  let if_block = current_block_type(ctx);
+	  return {
+	    c() {
+	      button = element("button");
+	      slot = element("slot");
+	      t = space();
+	      if_block.c();
+	      this.c = noop;
+	    },
+
+	    m(target, anchor) {
+	      insert(target, button, anchor);
+	      append(button, slot);
+	      append(button, t);
+	      if_block.m(button, null);
+	    },
+
+	    p(ctx, [dirty]) {
+	      if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
+	        if_block.p(ctx, dirty);
+	      } else {
+	        if_block.d(1);
+	        if_block = current_block_type(ctx);
+
+	        if (if_block) {
+	          if_block.c();
+	          if_block.m(button, null);
+	        }
+	      }
+	    },
+
+	    i: noop,
+	    o: noop,
+
+	    d(detaching) {
+	      if (detaching) detach(button);
+	      if_block.d();
+	    }
+
+	  };
+	}
+
+	function instance$3($$self, $$props, $$invalidate) {
+	  let {
+	    direction = "none"
+	  } = $$props;
+
+	  $$self.$$set = $$props => {
+	    if ('direction' in $$props) $$invalidate(0, direction = $$props.direction);
+	  };
+
+	  return [direction];
+	}
+
+	class TableSortHeader extends SvelteElement {
+	  constructor(options) {
+	    super();
+	    this.shadowRoot.innerHTML = `<style>:host{display:flex;align-items:flex-end}button{border:none;background:none;display:flex;font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit;padding:1rem;width:100%;height:100%;text-align:left;gap:0.25rem;align-items:flex-end;justify-content:stretch}button *{align-self:flex-end}img{width:16px;height:22px;scale:0.7}button:hover{background-color:var(--goa-color-greyscale-100);cursor:pointer;color:var(--goa-color-interactive-default)}img.asc{transform:rotate(180deg)}</style>`;
+	    init(this, {
+	      target: this.shadowRoot,
+	      props: attribute_to_object(this.attributes),
+	      customElement: true
+	    }, instance$3, create_fragment$5, safe_not_equal, {
+	      direction: 0
+	    }, null);
+
+	    if (options) {
+	      if (options.target) {
+	        insert(options.target, this, options.anchor);
+	      }
+
+	      if (options.props) {
+	        this.$set(options.props);
+	        flush();
+	      }
+	    }
+	  }
+
+	  static get observedAttributes() {
+	    return ["direction"];
+	  }
+
+	  get direction() {
+	    return this.$$.ctx[0];
+	  }
+
+	  set direction(direction) {
+	    this.$$set({
+	      direction
+	    });
+	    flush();
+	  }
+
+	}
+
+	customElements.define("goa-table-sort-header", TableSortHeader);
 	/* libs/web-components/src/components/text-area/TextArea.svelte generated by Svelte v3.51.0 */
 
 	function create_fragment$4(ctx) {
@@ -18467,7 +18681,30 @@
 	};
 
 	function GoATable(props) {
+	  var ref = react.useRef(null);
+	  react.useEffect(function () {
+	    if (!ref.current) {
+	      return;
+	    }
+
+	    var current = ref.current;
+
+	    var sortListener = function sortListener(e) {
+	      var _a;
+
+	      var _b = e.detail,
+	          sortBy = _b.sortBy,
+	          sortDir = _b.sortDir;
+	      (_a = props.onSort) === null || _a === void 0 ? void 0 : _a.call(props, sortBy, sortDir);
+	    };
+
+	    current.addEventListener("_sort", sortListener);
+	    return function () {
+	      current.removeEventListener("_sort", sortListener);
+	    };
+	  }, [ref, props.onSort]);
 	  return jsxRuntime.jsx("goa-table", __assign({
+	    ref: ref,
 	    width: props.width,
 	    stickyheader: false,
 	    "data-testid": props.testId,