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

package/react-components.esm.js

@@ -1083,7 +1083,7 @@ function typeValidator(message, values, required = false) {
 /* 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;
@@ -1286,7 +1286,7 @@ function create_fragment$H(ctx) {
   };
 }
 
-function instance$B($$self, $$props, $$invalidate) {
+function instance$C($$self, $$props, $$invalidate) {
   let isOpen;
   const [HeadingSizes, validateHeadingSize] = typeValidator("Accordion heading size", ["small", "medium"]);
   let {
@@ -1364,7 +1364,7 @@ class Accordion 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, {
       open: 10,
       heading: 0,
       secondarytext: 1,
@@ -1496,7 +1496,7 @@ class Accordion extends SvelteElement {
 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;
@@ -1553,7 +1553,7 @@ function create_else_block$4(ctx) {
 } // (19:4) {#if url}
 
 
-function create_if_block$i(ctx) {
+function create_if_block$j(ctx) {
   let a;
   let img0;
   let img0_src_value;
@@ -1620,7 +1620,7 @@ function create_if_block$i(ctx) {
   };
 }
 
-function create_fragment$G(ctx) {
+function create_fragment$H(ctx) {
   let div2;
   let div1;
   let t;
@@ -1630,8 +1630,8 @@ function create_fragment$G(ctx) {
   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);
@@ -1704,7 +1704,7 @@ function create_fragment$G(ctx) {
   };
 }
 
-function instance$A($$self, $$props, $$invalidate) {
+function instance$B($$self, $$props, $$invalidate) {
   let {
     heading = ""
   } = $$props;
@@ -1736,7 +1736,7 @@ class AppHeader 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, {
       heading: 0,
       url: 1,
       testid: 2,
@@ -1808,7 +1808,7 @@ class AppHeader extends SvelteElement {
 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() {
@@ -1864,7 +1864,7 @@ function create_if_block_1$a(ctx) {
 } // (50:2) {#if content}
 
 
-function create_if_block$h(ctx) {
+function create_if_block$i(ctx) {
   let div;
   let t;
   return {
@@ -1896,7 +1896,7 @@ function create_if_block$h(ctx) {
   };
 }
 
-function create_fragment$F(ctx) {
+function create_fragment$G(ctx) {
   let div;
   let t;
   let div_style_value;
@@ -1906,14 +1906,14 @@ function create_fragment$F(ctx) {
     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");
@@ -1970,7 +1970,7 @@ function create_fragment$F(ctx) {
         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);
         }
@@ -2032,7 +2032,7 @@ function create_fragment$F(ctx) {
   };
 }
 
-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);
@@ -2112,7 +2112,7 @@ class Badge extends SvelteElement {
       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,
@@ -2232,7 +2232,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$E(ctx) {
+function create_fragment$F(ctx) {
   let div;
   let slot;
   let div_style_value;
@@ -2306,7 +2306,7 @@ function create_fragment$E(ctx) {
   };
 }
 
-function instance$y($$self, $$props, $$invalidate) {
+function instance$z($$self, $$props, $$invalidate) {
   let {
     gap = "m"
   } = $$props;
@@ -2350,7 +2350,7 @@ class Block extends SvelteElement {
       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,
@@ -2458,7 +2458,7 @@ class Block extends SvelteElement {
 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;
@@ -2535,7 +2535,7 @@ function create_else_block$2(ctx) {
 } // (46:2) {#if type === "start"}
 
 
-function create_if_block$g(ctx) {
+function create_if_block$h(ctx) {
   let span;
   let t;
   let goa_icon;
@@ -2656,7 +2656,7 @@ function create_if_block_1$9(ctx) {
   };
 }
 
-function create_fragment$D(ctx) {
+function create_fragment$E(ctx) {
   let button;
   let button_class_value;
   let button_style_value;
@@ -2666,8 +2666,8 @@ function create_fragment$D(ctx) {
   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);
@@ -2810,7 +2810,7 @@ function create_fragment$D(ctx) {
   };
 }
 
-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);
@@ -2905,7 +2905,7 @@ class Button extends SvelteElement {
       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,
@@ -3061,7 +3061,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$C(ctx) {
+function create_fragment$D(ctx) {
   let div;
   let slot;
   let div_style_value;
@@ -3131,7 +3131,7 @@ function create_fragment$C(ctx) {
   };
 }
 
-function instance$w($$self, $$props, $$invalidate) {
+function instance$x($$self, $$props, $$invalidate) {
   let _alignment;
 
   let {
@@ -3195,7 +3195,7 @@ class ButtonGroup extends SvelteElement {
       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,
@@ -3303,7 +3303,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$f(ctx) {
+function create_if_block$g(ctx) {
   let h3;
   let t;
   return {
@@ -3334,7 +3334,7 @@ function create_if_block$f(ctx) {
   };
 }
 
-function create_fragment$B(ctx) {
+function create_fragment$C(ctx) {
   let div;
   let span0;
   let goa_icon;
@@ -3347,7 +3347,7 @@ function create_fragment$B(ctx) {
   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");
@@ -3426,7 +3426,7 @@ function create_fragment$B(ctx) {
         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);
         }
@@ -3469,7 +3469,7 @@ function create_fragment$B(ctx) {
   };
 }
 
-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 {
@@ -3526,7 +3526,7 @@ class Callout extends SvelteElement {
       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,
@@ -3634,7 +3634,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$A(ctx) {
+function create_fragment$B(ctx) {
   let goa_card_content;
   return {
     c() {
@@ -3665,7 +3665,7 @@ class CardActions extends SvelteElement {
       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) {
@@ -3679,7 +3679,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$z(ctx) {
+function create_fragment$A(ctx) {
   let div;
   let slot;
   let div_style_value;
@@ -3758,7 +3758,7 @@ function create_fragment$z(ctx) {
   };
 }
 
-function instance$u($$self, $$props, $$invalidate) {
+function instance$v($$self, $$props, $$invalidate) {
   let {
     elevation = 0
   } = $$props;
@@ -3806,7 +3806,7 @@ class Card extends SvelteElement {
       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,
@@ -3926,7 +3926,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$y(ctx) {
+function create_fragment$z(ctx) {
   let div;
   return {
     c() {
@@ -3959,7 +3959,7 @@ class CardContent extends SvelteElement {
       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) {
@@ -3973,7 +3973,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$x(ctx) {
+function create_fragment$y(ctx) {
   let div;
   return {
     c() {
@@ -4006,7 +4006,7 @@ class CardGroup extends SvelteElement {
       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) {
@@ -4020,7 +4020,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$w(ctx) {
+function create_fragment$x(ctx) {
   let div;
   return {
     c() {
@@ -4068,7 +4068,7 @@ function create_fragment$w(ctx) {
   };
 }
 
-function instance$t($$self, $$props, $$invalidate) {
+function instance$u($$self, $$props, $$invalidate) {
   let {
     src
   } = $$props;
@@ -4092,7 +4092,7 @@ class CardImage 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, {
       src: 0,
       height: 1
     }, null);
@@ -4167,7 +4167,7 @@ function create_if_block_1$8(ctx) {
 } // (68:4) {#if isIndeterminate}
 
 
-function create_if_block$e(ctx) {
+function create_if_block$f(ctx) {
   let svg;
   let rect;
   return {
@@ -4194,7 +4194,7 @@ function create_if_block$e(ctx) {
   };
 }
 
-function create_fragment$v(ctx) {
+function create_fragment$w(ctx) {
   let label;
   let div0;
   let input;
@@ -4212,7 +4212,7 @@ function create_fragment$v(ctx) {
   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;
@@ -4443,7 +4443,7 @@ function create_fragment$v(ctx) {
   };
 }
 
-function instance$s($$self, $$props, $$invalidate) {
+function instance$t($$self, $$props, $$invalidate) {
   let isDisabled;
   let isError;
   let isChecked;
@@ -4558,7 +4558,7 @@ class Checkbox 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, {
       name: 0,
       checked: 14,
       text: 1,
@@ -4760,7 +4760,7 @@ function create_if_block_1$7(ctx) {
 } // (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;
@@ -4816,7 +4816,7 @@ function create_if_block$d(ctx) {
   };
 }
 
-function create_fragment$u(ctx) {
+function create_fragment$v(ctx) {
   let div1;
   let t0;
   let div0;
@@ -4830,7 +4830,7 @@ function create_fragment$u(ctx) {
   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");
@@ -4925,7 +4925,7 @@ function create_fragment$u(ctx) {
         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);
         }
@@ -4998,7 +4998,7 @@ function create_fragment$u(ctx) {
   };
 }
 
-function instance$r($$self, $$props, $$invalidate) {
+function instance$s($$self, $$props, $$invalidate) {
   let {
     mt = null
   } = $$props;
@@ -5099,7 +5099,7 @@ class Chip 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, {
       mt: 0,
       mr: 1,
       mb: 2,
@@ -5356,7 +5356,7 @@ function noscroll(_node, opts) {
 /* 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;
@@ -5727,12 +5727,12 @@ function create_if_block_2$5(ctx) {
   };
 }
 
-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();
@@ -5759,7 +5759,7 @@ function create_fragment$t(ctx) {
             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);
@@ -5792,7 +5792,7 @@ function create_fragment$t(ctx) {
   };
 }
 
-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"]);
@@ -5849,7 +5849,7 @@ class CircularProgress extends SvelteElement {
       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,
@@ -5933,7 +5933,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$s(ctx) {
+function create_fragment$t(ctx) {
   let div3;
   let header;
   let div0;
@@ -6058,7 +6058,7 @@ function create_fragment$s(ctx) {
   };
 }
 
-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"]);
@@ -6114,7 +6114,7 @@ class Container extends SvelteElement {
       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,
@@ -6234,7 +6234,7 @@ class Container extends SvelteElement {
 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 {
@@ -6293,7 +6293,7 @@ function create_fragment$r(ctx) {
   };
 }
 
-function instance$o($$self, $$props, $$invalidate) {
+function instance$p($$self, $$props, $$invalidate) {
   let {
     testid = ""
   } = $$props;
@@ -6329,7 +6329,7 @@ class Divider extends SvelteElement {
       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,
@@ -6427,7 +6427,7 @@ function get_each_context$4(ctx, list, i) {
 } // (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;
@@ -6696,7 +6696,7 @@ function create_else_block$1(ctx) {
 } // (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;
@@ -7119,7 +7119,7 @@ function create_each_block$4(ctx) {
   };
 }
 
-function create_fragment$q(ctx) {
+function create_fragment$r(ctx) {
   let div;
   let div_data_testid_value;
   let div_style_value;
@@ -7127,8 +7127,8 @@ function create_fragment$q(ctx) {
   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);
@@ -7236,7 +7236,7 @@ function create_fragment$q(ctx) {
   };
 }
 
-function instance$n($$self, $$props, $$invalidate) {
+function instance$o($$self, $$props, $$invalidate) {
   let _disabled;
 
   let _error;
@@ -7626,7 +7626,7 @@ class Dropdown extends SvelteElement {
       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,
@@ -7830,7 +7830,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$p(ctx) {
+function create_fragment$q(ctx) {
   return {
     c() {
       this.c = noop;
@@ -7851,7 +7851,7 @@ class DropdownItem extends SvelteElement {
       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) {
@@ -7865,7 +7865,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$o(ctx) {
+function create_fragment$p(ctx) {
   let div;
   return {
     c() {
@@ -7926,7 +7926,7 @@ function isFocusable(element) {
   }
 }
 
-function instance$m($$self, $$props, $$invalidate) {
+function instance$n($$self, $$props, $$invalidate) {
   let isActive;
   let {
     active
@@ -8095,7 +8095,7 @@ class FocusTrap 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, {
       active: 1
     }, null);
 
@@ -8131,7 +8131,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$a(ctx) {
+function create_if_block$b(ctx) {
   let goa_divider;
   return {
     c() {
@@ -8150,7 +8150,7 @@ function create_if_block$a(ctx) {
   };
 }
 
-function create_fragment$n(ctx) {
+function create_fragment$o(ctx) {
   let div5;
   let div4;
   let div0;
@@ -8168,7 +8168,7 @@ function create_fragment$n(ctx) {
   /*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");
@@ -8241,7 +8241,7 @@ function create_fragment$n(ctx) {
       /*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);
         }
@@ -8293,7 +8293,7 @@ function create_fragment$n(ctx) {
   };
 }
 
-function instance$l($$self, $$props, $$invalidate) {
+function instance$m($$self, $$props, $$invalidate) {
   let {
     maxcontentwidth = ""
   } = $$props;
@@ -8331,7 +8331,7 @@ class Footer 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, {
       maxcontentwidth: 0
     }, null);
 
@@ -8421,7 +8421,7 @@ function create_each_block$3(ctx) {
   };
 }
 
-function create_fragment$m(ctx) {
+function create_fragment$n(ctx) {
   let section;
   let div;
   let t;
@@ -8509,7 +8509,7 @@ function create_fragment$m(ctx) {
   };
 }
 
-function instance$k($$self, $$props, $$invalidate) {
+function instance$l($$self, $$props, $$invalidate) {
   let rootEl;
   let children = [];
   onMount(async () => {
@@ -8544,7 +8544,7 @@ class FooterMetaSection extends SvelteElement {
       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) {
@@ -8565,7 +8565,7 @@ function get_each_context$2(ctx, list, i) {
 } // (31:2) {#if heading}
 
 
-function create_if_block$9(ctx) {
+function create_if_block$a(ctx) {
   let div;
   let t0;
   let t1;
@@ -8654,7 +8654,7 @@ function create_each_block$2(ctx) {
   };
 }
 
-function create_fragment$l(ctx) {
+function create_fragment$m(ctx) {
   let section;
   let t0;
   let div;
@@ -8663,7 +8663,7 @@ function create_fragment$l(ctx) {
   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];
@@ -8730,7 +8730,7 @@ function create_fragment$l(ctx) {
         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);
         }
@@ -8801,7 +8801,7 @@ function create_fragment$l(ctx) {
   };
 }
 
-function instance$j($$self, $$props, $$invalidate) {
+function instance$k($$self, $$props, $$invalidate) {
   let {
     heading = ""
   } = $$props;
@@ -8852,7 +8852,7 @@ class FooterNavSection 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, {
       heading: 0,
       maxcolumncount: 1
     }, null);
@@ -9050,7 +9050,7 @@ function create_if_block_1$4(ctx) {
 } // (48:2) {#if helptext}
 
 
-function create_if_block$8(ctx) {
+function create_if_block$9(ctx) {
   let div;
   let t;
   return {
@@ -9082,7 +9082,7 @@ function create_if_block$8(ctx) {
   };
 }
 
-function create_fragment$k(ctx) {
+function create_fragment$l(ctx) {
   let div1;
   let t0;
   let div0;
@@ -9097,7 +9097,7 @@ function create_fragment$k(ctx) {
   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");
@@ -9174,7 +9174,7 @@ function create_fragment$k(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(div1, null);
         }
@@ -9219,7 +9219,7 @@ function create_fragment$k(ctx) {
   };
 }
 
-function instance$i($$self, $$props, $$invalidate) {
+function instance$j($$self, $$props, $$invalidate) {
   const [REQUIREMENT_TYPES, validateRequirementType] = typeValidator("Requirement type", ["optional", "required"], false);
   let {
     testid = ""
@@ -9275,7 +9275,7 @@ class FormItem 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, {
       testid: 0,
       mt: 1,
       mr: 2,
@@ -9407,7 +9407,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$j(ctx) {
+function create_fragment$k(ctx) {
   let div;
   let slot;
   let div_style_value;
@@ -9475,7 +9475,7 @@ function create_fragment$j(ctx) {
   };
 }
 
-function instance$h($$self, $$props, $$invalidate) {
+function instance$i($$self, $$props, $$invalidate) {
   let {
     gap = "m"
   } = $$props;
@@ -9520,7 +9520,7 @@ class Grid 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, {
       gap: 0,
       minchildwidth: 1,
       mt: 2,
@@ -9616,7 +9616,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$i(ctx) {
+function create_fragment$j(ctx) {
   let div1;
   let goa_page_block;
   let h1;
@@ -9701,7 +9701,7 @@ function create_fragment$i(ctx) {
   };
 }
 
-function instance$g($$self, $$props, $$invalidate) {
+function instance$h($$self, $$props, $$invalidate) {
   let {
     heading
   } = $$props;
@@ -9729,7 +9729,7 @@ class HeroBanner 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, {
       heading: 0,
       backgroundurl: 1,
       minheight: 2
@@ -9789,7 +9789,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$h(ctx) {
+function create_fragment$i(ctx) {
   let button;
   let goa_icon;
   let button_style_value;
@@ -9961,7 +9961,7 @@ function handleClick(e) {
   }));
 }
 
-function instance$f($$self, $$props, $$invalidate) {
+function instance$g($$self, $$props, $$invalidate) {
   let css;
   let isDisabled;
   let isInverted;
@@ -10066,7 +10066,7 @@ class IconButton 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, {
       icon: 0,
       size: 1,
       theme: 2,
@@ -10234,7 +10234,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$7(ctx) {
+function create_if_block$8(ctx) {
   let ion_icon;
   let ion_icon_name_value;
   return {
@@ -10282,12 +10282,12 @@ function create_if_block$7(ctx) {
   };
 }
 
-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");
@@ -10340,7 +10340,7 @@ function create_fragment$g(ctx) {
         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);
         }
@@ -10413,7 +10413,7 @@ function create_fragment$g(ctx) {
   };
 }
 
-function instance$e($$self, $$props, $$invalidate) {
+function instance$f($$self, $$props, $$invalidate) {
   let isInverted;
 
   let _size;
@@ -10503,7 +10503,7 @@ class Icon 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, {
       mt: 0,
       mr: 1,
       mb: 2,
@@ -10840,7 +10840,7 @@ function create_if_block_1$3(ctx) {
 } // (161:4) {#if suffix}
 
 
-function create_if_block$6(ctx) {
+function create_if_block$7(ctx) {
   let span;
   let t;
   return {
@@ -10872,7 +10872,7 @@ function create_if_block$6(ctx) {
   };
 }
 
-function create_fragment$f(ctx) {
+function create_fragment$g(ctx) {
   let div3;
   let div2;
   let t0;
@@ -10910,7 +10910,7 @@ function create_fragment$f(ctx) {
   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");
@@ -11231,7 +11231,7 @@ function create_fragment$f(ctx) {
         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);
         }
@@ -11311,7 +11311,7 @@ function doClick() {
   }));
 }
 
-function instance$d($$self, $$props, $$invalidate) {
+function instance$e($$self, $$props, $$invalidate) {
   let handlesTrailingIconClick;
   let isFocused;
   let isReadonly;
@@ -11531,7 +11531,7 @@ class Input 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, {
       type: 1,
       name: 2,
       value: 0,
@@ -12029,7 +12029,7 @@ function create_if_block_2$2(ctx) {
 } // (56:2) {#if version}
 
 
-function create_if_block$5(ctx) {
+function create_if_block$6(ctx) {
   let div;
   let t;
   return {
@@ -12062,7 +12062,7 @@ function create_if_block$5(ctx) {
   };
 }
 
-function create_fragment$e(ctx) {
+function create_fragment$f(ctx) {
   let header;
   let t0;
   let show_if = ["alpha", "beta"].includes(
@@ -12077,7 +12077,7 @@ function create_fragment$e(ctx) {
   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");
@@ -12143,7 +12143,7 @@ function create_fragment$e(ctx) {
         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);
         }
@@ -12171,7 +12171,7 @@ function capitalize(val) {
   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
@@ -12203,7 +12203,7 @@ class MicrositeHeader 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, {
       type: 0,
       version: 1,
       feedbackurl: 2
@@ -12263,7 +12263,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$4(ctx) {
+function create_if_block$5(ctx) {
   let goa_focus_trap;
   let div5;
   let div0;
@@ -12668,12 +12668,12 @@ function create_if_block_1$1(ctx) {
   };
 }
 
-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();
@@ -12700,7 +12700,7 @@ function create_fragment$d(ctx) {
             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);
@@ -12733,7 +12733,7 @@ function create_fragment$d(ctx) {
   };
 }
 
-function instance$b($$self, $$props, $$invalidate) {
+function instance$c($$self, $$props, $$invalidate) {
   let isClosable;
   let isOpen;
 
@@ -12823,7 +12823,7 @@ class Modal extends SvelteElement {
       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,
@@ -12919,7 +12919,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$3(ctx) {
+function create_if_block$4(ctx) {
   let div3;
   let div0;
   let goa_icon;
@@ -13043,12 +13043,12 @@ function create_if_block$3(ctx) {
   };
 }
 
-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();
@@ -13075,7 +13075,7 @@ function create_fragment$c(ctx) {
             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);
@@ -13108,7 +13108,7 @@ function create_fragment$c(ctx) {
   };
 }
 
-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 {
@@ -13150,7 +13150,7 @@ class Notification extends SvelteElement {
       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);
 
@@ -13192,7 +13192,7 @@ function isValidDimension(value) {
 /* 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;
@@ -13232,7 +13232,7 @@ function create_fragment$b(ctx) {
   };
 }
 
-function instance$9($$self, $$props, $$invalidate) {
+function instance$a($$self, $$props, $$invalidate) {
   const Sizes = {
     "full": "100%"
   };
@@ -13273,7 +13273,7 @@ class PageBlock extends SvelteElement {
       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);
@@ -13511,7 +13511,7 @@ function create_each_block$1(key_1, ctx) {
   };
 }
 
-function create_fragment$a(ctx) {
+function create_fragment$b(ctx) {
   let div;
   let slot;
   let t;
@@ -13634,7 +13634,7 @@ function create_fragment$a(ctx) {
   };
 }
 
-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"]);
@@ -13778,7 +13778,7 @@ class RadioGroup extends SvelteElement {
       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,
@@ -13934,7 +13934,7 @@ class RadioGroup extends SvelteElement {
 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;
@@ -14002,7 +14002,7 @@ function create_fragment$9(ctx) {
   };
 }
 
-function instance$7($$self, $$props, $$invalidate) {
+function instance$8($$self, $$props, $$invalidate) {
   let {
     direction = "vertical"
   } = $$props;
@@ -14034,7 +14034,7 @@ class Scrollable extends SvelteElement {
       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,
@@ -14113,7 +14113,7 @@ function get_each_context(ctx, list, i) {
 } // (55:2) {:else}
 
 
-function create_else_block(ctx) {
+function create_else_block$1(ctx) {
   let div;
   let div_class_value;
   return {
@@ -14375,7 +14375,7 @@ function create_if_block_1(ctx) {
 } // (30:2) {#if type === "card"}
 
 
-function create_if_block$2(ctx) {
+function create_if_block$3(ctx) {
   let div1;
   let skeleton0;
   let t0;
@@ -14569,13 +14569,13 @@ function create_each_block(ctx) {
   };
 }
 
-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) {
@@ -14685,7 +14685,7 @@ function create_fragment$8(ctx) {
   };
 }
 
-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 {
@@ -14743,7 +14743,7 @@ class Skeleton extends SvelteElement {
       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,
@@ -14875,7 +14875,7 @@ class Skeleton extends SvelteElement {
 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() {
@@ -14904,7 +14904,7 @@ function create_fragment$7(ctx) {
   };
 }
 
-function instance$5($$self, $$props, $$invalidate) {
+function instance$6($$self, $$props, $$invalidate) {
   let {
     hspacing = "none"
   } = $$props;
@@ -14941,7 +14941,7 @@ class Spacer extends SvelteElement {
       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);
@@ -15173,7 +15173,7 @@ function tweened(value, defaults = {}) {
 /* 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;
@@ -15363,11 +15363,11 @@ function create_if_block$1(ctx) {
   };
 }
 
-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();
@@ -15387,7 +15387,7 @@ function create_fragment$6(ctx) {
         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);
         }
@@ -15408,7 +15408,7 @@ function create_fragment$6(ctx) {
   };
 }
 
-function instance$4($$self, $$props, $$invalidate) {
+function instance$5($$self, $$props, $$invalidate) {
   let diameter;
   let strokewidth;
   let radius;
@@ -15539,7 +15539,7 @@ class Spinner extends SvelteElement {
       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,
@@ -15611,7 +15611,7 @@ class Spinner extends SvelteElement {
 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;
@@ -15713,7 +15713,7 @@ function create_fragment$5(ctx) {
   };
 }
 
-function instance$3($$self, $$props, $$invalidate) {
+function instance$4($$self, $$props, $$invalidate) {
   let _stickyHeader;
 
   const [Variants, validateVariant] = typeValidator("Table variant", ["normal", "relaxed"], true);
@@ -15743,19 +15743,54 @@ function instance$3($$self, $$props, $$invalidate) {
 
   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()));
   });
 
+  async function attachSortEventHandling() {
+    await tick();
+
+    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
+          }
+        }));
+      });
+    });
+  }
+
   function table_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       _rootEl = $$value;
@@ -15787,12 +15822,12 @@ function instance$3($$self, $$props, $$invalidate) {
 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,
@@ -15898,6 +15933,185 @@ class Table extends SvelteElement {
 }
 
 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) {
@@ -18428,7 +18642,31 @@ const GoASpinner = ({
 };
 
 function GoATable(props) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    const current = ref.current;
+
+    const sortListener = e => {
+      var _a;
+
+      const {
+        sortBy,
+        sortDir
+      } = e.detail;
+      (_a = props.onSort) === null || _a === void 0 ? void 0 : _a.call(props, sortBy, sortDir);
+    };
+
+    current.addEventListener("_sort", sortListener);
+    return () => {
+      current.removeEventListener("_sort", sortListener);
+    };
+  }, [ref, props.onSort]);
   return jsx("goa-table", Object.assign({
+    ref: ref,
     width: props.width,
     stickyheader: false,
     "data-testid": props.testId,