npm - @abgov/react-components - Versions diffs - 4.0.0-alpha.32 → 4.0.0-alpha.35 - Mend

@abgov/react-components 4.0.0-alpha.32 → 4.0.0-alpha.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/index.d.ts +2 -2
package/lib/badge/badge.d.ts +4 -5
package/lib/button/button.d.ts +1 -1
package/lib/input/input.d.ts +11 -10
package/lib/microsite-header/microsite-header.d.ts +2 -2
package/package.json +1 -1
package/react-components.esm.js +607 -387
package/react-components.umd.js +605 -388

package/react-components.esm.js CHANGED Viewed

@@ -1453,7 +1453,7 @@ function create_else_block$3(ctx) {
     }
   };
-} // (41:2) {#if showIcon}
+} // (40:2) {#if showIcon}
 function create_if_block_1$b(ctx) {
@@ -1486,7 +1486,7 @@ function create_if_block_1$b(ctx) {
     }
   };
-} // (46:2) {#if content}
+} // (45:2) {#if content}
 function create_if_block$i(ctx) {
@@ -1674,10 +1674,9 @@ function instance$x($$self, $$props, $$invalidate) {
     1) {
       $$invalidate(4, iconType = {
         success: "checkmark-circle",
-        warning: "alert-circle",
+        important: "alert-circle",
         information: "information-circle",
         emergency: "warning",
-        inactive: "information-circle",
         dark: "information-circle",
         midtone: "information-circle",
         light: "information-circle"
@@ -1691,7 +1690,7 @@ function instance$x($$self, $$props, $$invalidate) {
 class Badge extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-badge{display:inline-flex;align-items:center;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--fw-regular);margin:0.25rem}.icon-only{padding:0.25rem}.goa-badge-content{text-transform:capitalize;font-size:var(--fs-sm);line-height:var(--lh-sm);padding-bottom:var(--font-valign-fix)}.goa-badge.badge-information{background-color:var(--color-gray-100);color:var(--goa-color-status-info)}.goa-badge.badge-success{background-color:var(--goa-color-status-success);color:var(--goa-color-text-light)}.goa-badge.badge-warning{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.goa-badge.badge-emergency{background-color:var(--goa-color-status-emergency);color:var(--goa-color-text-light)}.goa-badge.badge-dark{background-color:var(--color-black);color:var(--goa-color-text-light)}.goa-badge.badge-midtone{background-color:var(--color-gray-600);color:var(--goa-color-text-light)}.goa-badge.badge-light{background-color:var(--color-white);color:var(--goa-color-text)}.goa-badge.badge-inactive{background-color:var(--color-white);color:var(--goa-color-text)}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-badge{display:inline-flex;align-items:center;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--fw-regular);margin:0.25rem}.icon-only{padding:0.25rem}.goa-badge-content{text-transform:capitalize;font-size:var(--fs-sm);line-height:var(--lh-sm);padding-bottom:var(--font-valign-fix)}.goa-badge.badge-information{background-color:var(--color-gray-100);color:var(--goa-color-status-info)}.goa-badge.badge-success{background-color:var(--goa-color-status-success);color:var(--goa-color-text-light)}.goa-badge.badge-important{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.goa-badge.badge-emergency{background-color:var(--goa-color-status-emergency);color:var(--goa-color-text-light)}.goa-badge.badge-dark{background-color:var(--color-black);color:var(--goa-color-text-light)}.goa-badge.badge-midtone{background-color:var(--color-gray-600);color:var(--goa-color-text-light)}.goa-badge.badge-light{background-color:var(--color-white);color:var(--goa-color-text)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -2116,7 +2115,7 @@ function instance$w($$self, $$props, $$invalidate) {
   let isButtonDark;
   const BUTTON_TYPES = ["primary", "secondary", "tertiary", "start"];
   const SIZES = ["", "compact"];
-  const VARIANTS = ["", "danger"]; // type check functions
+  const VARIANTS = ["", "destructive"]; // type check functions
   function isButtonType(value) {
     return BUTTON_TYPES.includes(value);
@@ -2200,7 +2199,7 @@ class Button extends SvelteElement {
   constructor(options) {
     super();
     this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@media(max-width: 480px){:host{width:100%}button{width:100%}}button{display:inline-flex;box-sizing:border-box;border-radius:0.25rem;border:2px solid var(--goa-color-interactive);box-sizing:border-box;cursor:pointer;font-family:var(--font-family);font-size:var(--fs-lg);font-weight:400;height:var(--button-height);letter-spacing:0.5px;line-height:100%;padding:0 0.75rem;gap:0.5rem;align-items:center;justify-content:center;transition:transform 0.1s ease-in-out, background-color 0.2s ease-in-out,
-      border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--fs-base)}button.start{height:var(--button-height-tall);font-weight:var(--fw-bold)}button.start,button.primary{border:2px solid var(--goa-color-interactive);background:var(--goa-color-interactive);color:var(--goa-color-text-light)}button.start:hover,button.primary:hover{border-color:var(--goa-color-interactive--hover);background:var(--goa-color-interactive--hover)}button.start:focus,button.start:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive--focus);border-color:var(--goa-color-interactive--active);background:var(--goa-color-interactive--active);outline:none}button.secondary{border:2px solid var(--goa-color-interactive);background:var(--color-white);color:var(--goa-color-interactive)}button.secondary:hover{border-color:var(--goa-color-interactive--hover);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);background:var(--color-gray-100);outline:none}button.tertiary{border:1px solid transparent;background:transparent;color:var(--goa-color-interactive);text-decoration:underline}button.tertiary:hover{border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--color-gray-100);background:var(--color-gray-100);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.primary.danger{color:var(--color-white);background:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency)}.primary.danger:hover{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.primary.danger:focus,.primary.danger:active{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.secondary.danger{color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);background:var(--color-white)}.secondary.danger:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.secondary.danger:focus,.secondary.danger:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.danger{color:var(--goa-color-status-emergency);border-color:var(--color-gray-200);background:var(--color-white)}.tertiary.danger:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.danger:focus,.tertiary.danger:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}</style>`;
+      border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--fs-base)}button.start{height:var(--button-height-tall);font-weight:var(--fw-bold)}button.start,button.primary{border:2px solid var(--goa-color-interactive);background:var(--goa-color-interactive);color:var(--goa-color-text-light)}button.start:hover,button.primary:hover{border-color:var(--goa-color-interactive--hover);background:var(--goa-color-interactive--hover)}button.start:focus,button.start:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive--focus);border-color:var(--goa-color-interactive--active);background:var(--goa-color-interactive--active);outline:none}button.secondary{border:2px solid var(--goa-color-interactive);background:var(--color-white);color:var(--goa-color-interactive)}button.secondary:hover{border-color:var(--goa-color-interactive--hover);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);background:var(--color-gray-100);outline:none}button.tertiary{border:1px solid transparent;background:transparent;color:var(--goa-color-interactive);text-decoration:underline}button.tertiary:hover{border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--color-gray-100);background:var(--color-gray-100);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.primary.destructive{color:var(--color-white);background:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency)}.primary.destructive:hover{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.primary.destructive:focus,.primary.destructive:active{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.secondary.destructive{color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);background:var(--color-white)}.secondary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.secondary.destructive:focus,.secondary.destructive:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.destructive{color:var(--goa-color-status-emergency);border-color:var(--color-gray-200);background:var(--color-white)}.tertiary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -3957,7 +3956,7 @@ function create_fragment$r(ctx) {
       ctx[1]);
       attr(div2, "class", "content");
       attr(div3, "class", div3_class_value = `
-    goa-container
+    goa-container
     goa-container--${
       /*variant*/
       ctx[0]}
@@ -3992,7 +3991,7 @@ function create_fragment$r(ctx) {
       if (dirty &
       /*variant, padding*/
       5 && div3_class_value !== (div3_class_value = `
-    goa-container
+    goa-container
     goa-container--${
       /*variant*/
       ctx[0]}
@@ -4026,7 +4025,7 @@ function instance$p($$self, $$props, $$invalidate) {
   let _colored;
   let {
-    variant = 'default'
+    variant = 'non-interactive'
   } = $$props;
   let {
     colored = "false"
@@ -4059,7 +4058,7 @@ function instance$p($$self, $$props, $$invalidate) {
 class Container extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--default.colored .content{border-color:var(--color-gray-200);background-color:var(--color-gray-100)}.goa-container--warning.colored .content{border-color:var(--goa-color-status-warning);background-color:var(--goa-color-status-warning-50)}.goa-container--error.colored .content{border-color:var(--goa-color-status-emergency);background-color:var(--goa-color-status-emergency-50)}.goa-container--success.colored .content{border-color:var(--goa-color-status-success);background-color:var(--goa-color-status-success-50)}.goa-container--info.colored .content{border-color:var(--goa-color-status-info);background-color:var(--goa-color-status-info-50)}.title>*,.actions>*{line-height:3rem}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--default header{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-black)}.goa-container--primary header{background-color:var(--goa-color-brand);border-color:var(--goa-color-brand);color:var(--color-white)}.goa-container--info header{background-color:var(--goa-color-status-info);border-color:var(--goa-color-status-info);color:var(--color-white)}.goa-container--error header{background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);color:var(--color-white)}.goa-container--success header{background-color:var(--goa-color-status-success);border-color:var(--goa-color-status-success);color:var(--color-white)}.goa-container--warning header{background-color:var(--goa-color-status-warning);border-color:var(--goa-color-status-warning);color:var(--color-white)}.heading--large{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--large .title{line-height:2rem}.heading--small{height:0.5rem}.heading--none{display:none}.heading--none~.content{border-top:1px solid var(--color-gray-200);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.heading--small .title,.heading--small .actions{display:none}.actions{display:flex;align-items:center}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--non-interactive.colored .content{border-color:var(--color-gray-200);background-color:var(--color-gray-100)}.goa-container--important.colored .content{border-color:var(--goa-color-status-warning);background-color:var(--goa-color-status-warning-50)}.goa-container--error.colored .content{border-color:var(--goa-color-status-emergency);background-color:var(--goa-color-status-emergency-50)}.goa-container--success.colored .content{border-color:var(--goa-color-status-success);background-color:var(--goa-color-status-success-50)}.goa-container--info.colored .content{border-color:var(--goa-color-status-info);background-color:var(--goa-color-status-info-50)}.title>*,.actions>*{line-height:3rem}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-black)}.goa-container--interactive header{background-color:var(--goa-color-brand);border-color:var(--goa-color-brand);color:var(--color-white)}.goa-container--info header{background-color:var(--goa-color-status-info);border-color:var(--goa-color-status-info);color:var(--color-white)}.goa-container--error header{background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);color:var(--color-white)}.goa-container--success header{background-color:var(--goa-color-status-success);border-color:var(--goa-color-status-success);color:var(--color-white)}.goa-container--important header{background-color:var(--goa-color-status-warning);border-color:var(--goa-color-status-warning);color:var(--color-white)}.heading--large{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--large .title{line-height:2rem}.heading--small{height:0.5rem}.heading--none{display:none}.heading--none~.content{border-top:1px solid var(--color-gray-200);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.heading--small .title,.heading--small .actions{display:none}.actions{display:flex;align-items:center}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -4252,10 +4251,10 @@ const BIND$1 = "bind";
 function get_each_context$4(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[35] = list[i];
-  child_ctx[37] = i;
+  child_ctx[36] = list[i];
+  child_ctx[38] = i;
   return child_ctx;
-} // (179:2) {#if isMenuVisible}
+} // (180:2) {#if isMenuVisible}
 function create_if_block$d(ctx) {
@@ -4278,7 +4277,7 @@ function create_if_block$d(ctx) {
       if (!mounted) {
         dispose = listen(div, "click",
         /*closeMenu*/
-        ctx[17]);
+        ctx[18]);
         mounted = true;
       }
     },
@@ -4300,16 +4299,17 @@ function create_if_block$d(ctx) {
     }
   };
-} // (215:4) {#each options as option, index (option.value)}
+} // (216:4) {#each options as option, index (option.value)}
 function create_each_block$4(key_1, ctx) {
   let li;
   let t0_value =
   /*option*/
-  ctx[35].label + "";
+  ctx[36].label + "";
   let t0;
   let t1;
+  let li_aria_label_value;
   let li_data_testid_value;
   let li_data_index_value;
   let li_style_value;
@@ -4319,9 +4319,9 @@ function create_each_block$4(key_1, ctx) {
   function click_handler() {
     return (
       /*click_handler*/
-      ctx[21](
+      ctx[22](
       /*option*/
-      ctx[35])
+      ctx[36])
     );
   }
@@ -4333,25 +4333,30 @@ function create_each_block$4(key_1, ctx) {
       li = element("li");
       t0 = text(t0_value);
       t1 = space();
+      attr(li, "aria-label", li_aria_label_value =
+      /*option*/
+      ctx[36].label ||
+      /*option*/
+      ctx[36].value);
       attr(li, "data-testid", li_data_testid_value = `${
       /*option*/
-      ctx[35].value}-dropdown-item`);
+      ctx[36].value}-dropdown-item`);
       attr(li, "data-index", li_data_index_value =
       /*index*/
-      ctx[37]);
+      ctx[38]);
       attr(li, "class", "goa-dropdown-option");
       attr(li, "style", li_style_value = `display: ${"block"}`);
       toggle_class(li, "goa-dropdown-option--disabled", false);
       toggle_class(li, "goa-dropdown-option--tabbed",
       /*index*/
-      ctx[37] ===
+      ctx[38] ===
       /*highlightedIndex*/
-      ctx[12]);
+      ctx[13]);
       toggle_class(li, "goa-dropdown-option--selected",
       /*_values*/
-      ctx[8].includes(
+      ctx[9].includes(
       /*option*/
-      ctx[35].value));
+      ctx[36].value));
       this.first = li;
     },
@@ -4370,44 +4375,54 @@ function create_each_block$4(key_1, ctx) {
       ctx = new_ctx;
       if (dirty[0] &
       /*options*/
-      512 && t0_value !== (t0_value =
+      1024 && t0_value !== (t0_value =
       /*option*/
-      ctx[35].label + "")) set_data(t0, t0_value);
+      ctx[36].label + "")) set_data(t0, t0_value);
       if (dirty[0] &
       /*options*/
-      512 && li_data_testid_value !== (li_data_testid_value = `${
+      1024 && li_aria_label_value !== (li_aria_label_value =
+      /*option*/
+      ctx[36].label ||
       /*option*/
-      ctx[35].value}-dropdown-item`)) {
+      ctx[36].value)) {
+        attr(li, "aria-label", li_aria_label_value);
+      }
+      if (dirty[0] &
+      /*options*/
+      1024 && li_data_testid_value !== (li_data_testid_value = `${
+      /*option*/
+      ctx[36].value}-dropdown-item`)) {
         attr(li, "data-testid", li_data_testid_value);
       }
       if (dirty[0] &
       /*options*/
-      512 && li_data_index_value !== (li_data_index_value =
+      1024 && li_data_index_value !== (li_data_index_value =
       /*index*/
-      ctx[37])) {
+      ctx[38])) {
         attr(li, "data-index", li_data_index_value);
       }
       if (dirty[0] &
       /*options, highlightedIndex*/
-      4608) {
+      9216) {
         toggle_class(li, "goa-dropdown-option--tabbed",
         /*index*/
-        ctx[37] ===
+        ctx[38] ===
         /*highlightedIndex*/
-        ctx[12]);
+        ctx[13]);
       }
       if (dirty[0] &
       /*_values, options*/
-      768) {
+      1536) {
         toggle_class(li, "goa-dropdown-option--selected",
         /*_values*/
-        ctx[8].includes(
+        ctx[9].includes(
         /*option*/
-        ctx[35].value));
+        ctx[36].value));
       }
     },
@@ -4426,6 +4441,7 @@ function create_fragment$q(ctx) {
   let div0;
   let goa_input;
   let goa_input_id_value;
+  let goa_input_aria_label_value;
   let div0_data_testid_value;
   let t1;
   let ul;
@@ -4439,14 +4455,14 @@ function create_fragment$q(ctx) {
   let dispose;
   let if_block =
   /*isMenuVisible*/
-  ctx[11] && create_if_block$d(ctx);
+  ctx[12] && create_if_block$d(ctx);
   let each_value =
   /*options*/
-  ctx[9];
+  ctx[10];
   const get_key = ctx =>
   /*option*/
-  ctx[35].value;
+  ctx[36].value;
   for (let i = 0; i < each_value.length; i += 1) {
     let child_ctx = get_each_context$4(ctx, each_value, i);
@@ -4473,27 +4489,31 @@ function create_fragment$q(ctx) {
       this.c = noop;
       set_custom_element_data(goa_input, "error",
       /*error*/
-      ctx[7]);
+      ctx[8]);
       set_custom_element_data(goa_input, "disabled",
       /*disabled*/
-      ctx[6]);
+      ctx[7]);
       set_custom_element_data(goa_input, "leadingicon",
       /*leadingicon*/
-      ctx[1]);
+      ctx[2]);
       set_custom_element_data(goa_input, "placeholder",
       /*placeholder*/
-      ctx[3]);
+      ctx[4]);
       set_custom_element_data(goa_input, "width", "100%");
       set_custom_element_data(goa_input, "id", goa_input_id_value = `${
       /*name*/
       ctx[0]}-dropdown-input`);
-      set_custom_element_data(goa_input, "name", "search");
+      set_custom_element_data(goa_input, "aria-label", goa_input_aria_label_value =
+      /*arialabel*/
+      ctx[1] ||
+      /*name*/
+      ctx[0]);
       set_custom_element_data(goa_input, "readonly", "");
       set_custom_element_data(goa_input, "trailingicon", "chevron-down");
       set_custom_element_data(goa_input, "type", "text");
       set_custom_element_data(goa_input, "value",
       /*selectedLabel*/
-      ctx[10]);
+      ctx[11]);
       attr(div0, "data-testid", div0_data_testid_value = `${
       /*name*/
       ctx[0]}-dropdown`);
@@ -4502,19 +4522,19 @@ function create_fragment$q(ctx) {
       attr(ul, "class", "goa-dropdown-list");
       attr(ul, "style", ul_style_value = `overflow-y: auto; max-height: ${
       /*maxheight*/
-      ctx[2]}`);
+      ctx[3]}`);
       toggle_class(ul, "dropdown-active",
       /*isMenuVisible*/
-      ctx[11]);
+      ctx[12]);
       attr(div1, "data-testid",
       /*testid*/
-      ctx[4]);
+      ctx[5]);
       attr(div1, "class", "goa-dropdown-box");
       attr(div1, "style", div1_style_value = `--width: ${
       /*width*/
-      ctx[5] ||
+      ctx[6] ||
       /*computedWidth*/
-      ctx[13]}`);
+      ctx[14]}`);
     },
     m(target, anchor) {
@@ -4534,15 +4554,15 @@ function create_fragment$q(ctx) {
       /*ul_binding*/
-      ctx[22](ul);
+      ctx[23](ul);
       /*div1_binding*/
-      ctx[23](div1);
+      ctx[24](div1);
       if (!mounted) {
         dispose = listen(goa_input, "click",
         /*showMenu*/
-        ctx[16]);
+        ctx[17]);
         mounted = true;
       }
     },
@@ -4550,7 +4570,7 @@ function create_fragment$q(ctx) {
     p(ctx, dirty) {
       if (
       /*isMenuVisible*/
-      ctx[11]) {
+      ctx[12]) {
         if (if_block) {
           if_block.p(ctx, dirty);
         } else {
@@ -4565,34 +4585,34 @@ function create_fragment$q(ctx) {
       if (dirty[0] &
       /*error*/
-      128) {
+      256) {
         set_custom_element_data(goa_input, "error",
         /*error*/
-        ctx[7]);
+        ctx[8]);
       }
       if (dirty[0] &
       /*disabled*/
-      64) {
+      128) {
         set_custom_element_data(goa_input, "disabled",
         /*disabled*/
-        ctx[6]);
+        ctx[7]);
       }
       if (dirty[0] &
       /*leadingicon*/
-      2) {
+      4) {
         set_custom_element_data(goa_input, "leadingicon",
         /*leadingicon*/
-        ctx[1]);
+        ctx[2]);
       }
       if (dirty[0] &
       /*placeholder*/
-      8) {
+      16) {
         set_custom_element_data(goa_input, "placeholder",
         /*placeholder*/
-        ctx[3]);
+        ctx[4]);
       }
       if (dirty[0] &
@@ -4603,12 +4623,22 @@ function create_fragment$q(ctx) {
         set_custom_element_data(goa_input, "id", goa_input_id_value);
       }
+      if (dirty[0] &
+      /*arialabel, name*/
+      3 && goa_input_aria_label_value !== (goa_input_aria_label_value =
+      /*arialabel*/
+      ctx[1] ||
+      /*name*/
+      ctx[0])) {
+        set_custom_element_data(goa_input, "aria-label", goa_input_aria_label_value);
+      }
       if (dirty[0] &
       /*selectedLabel*/
-      1024) {
+      2048) {
         set_custom_element_data(goa_input, "value",
         /*selectedLabel*/
-        ctx[10]);
+        ctx[11]);
       }
       if (dirty[0] &
@@ -4621,44 +4651,44 @@ function create_fragment$q(ctx) {
       if (dirty[0] &
       /*options, highlightedIndex, _values, onSelect*/
-      267008) {
+      534016) {
         each_value =
         /*options*/
-        ctx[9];
+        ctx[10];
         each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, ul, destroy_block, create_each_block$4, null, get_each_context$4);
       }
       if (dirty[0] &
       /*maxheight*/
-      4 && ul_style_value !== (ul_style_value = `overflow-y: auto; max-height: ${
+      8 && ul_style_value !== (ul_style_value = `overflow-y: auto; max-height: ${
       /*maxheight*/
-      ctx[2]}`)) {
+      ctx[3]}`)) {
         attr(ul, "style", ul_style_value);
       }
       if (dirty[0] &
       /*isMenuVisible*/
-      2048) {
+      4096) {
         toggle_class(ul, "dropdown-active",
         /*isMenuVisible*/
-        ctx[11]);
+        ctx[12]);
       }
       if (dirty[0] &
       /*testid*/
-      16) {
+      32) {
         attr(div1, "data-testid",
         /*testid*/
-        ctx[4]);
+        ctx[5]);
       }
       if (dirty[0] &
       /*width, computedWidth*/
-      8224 && div1_style_value !== (div1_style_value = `--width: ${
+      16448 && div1_style_value !== (div1_style_value = `--width: ${
       /*width*/
-      ctx[5] ||
+      ctx[6] ||
       /*computedWidth*/
-      ctx[13]}`)) {
+      ctx[14]}`)) {
         attr(div1, "style", div1_style_value);
       }
     },
@@ -4676,10 +4706,10 @@ function create_fragment$q(ctx) {
       /*ul_binding*/
-      ctx[22](null);
+      ctx[23](null);
       /*div1_binding*/
-      ctx[23](null);
+      ctx[24](null);
       mounted = false;
       dispose();
     }
@@ -4697,6 +4727,9 @@ function instance$o($$self, $$props, $$invalidate) {
   let {
     name
   } = $$props;
+  let {
+    arialabel = ""
+  } = $$props;
   let {
     value = ""
   } = $$props;
@@ -4755,7 +4788,7 @@ function instance$o($$self, $$props, $$invalidate) {
     const rawValues = typeof rawValue === "object" ? rawValue : [rawValue]; // convert all values to strings to avoid later type comparison issues
-    $$invalidate(8, _values = rawValues.map(val => `${val}`));
+    $$invalidate(9, _values = rawValues.map(val => `${val}`));
     bindContext();
   });
   onDestroy(() => {
@@ -4774,17 +4807,17 @@ function instance$o($$self, $$props, $$invalidate) {
             const selected = _values.includes(_data.value);
-            $$invalidate(9, options = [...options, Object.assign(Object.assign({}, _data), {
+            $$invalidate(10, options = [...options, Object.assign(Object.assign({}, _data), {
               selected
             })]);
             if (selected) {
-              $$invalidate(10, selectedLabel = _data.label);
+              $$invalidate(11, selectedLabel = _data.label);
             }
             if (!width && maxLetterCount < _data.label.length) {
               maxLetterCount = _data.label.length;
-              $$invalidate(13, computedWidth = `${Math.max(20, maxLetterCount + 12)}ch`);
+              $$invalidate(14, computedWidth = `${Math.max(20, maxLetterCount + 12)}ch`);
             }
             setHighlightedIndexToSelected();
@@ -4799,7 +4832,7 @@ function instance$o($$self, $$props, $$invalidate) {
       return;
     }
-    $$invalidate(11, isMenuVisible = true);
+    $$invalidate(12, isMenuVisible = true);
     await tick(); // hide menu on blur
     menuEl.addEventListener("blur", closeMenu);
@@ -4814,17 +4847,17 @@ function instance$o($$self, $$props, $$invalidate) {
     menuEl.removeEventListener("keydown", onMenuKeyDown);
     menuEl.removeEventListener("mouseover", onHighlight);
     setHighlightedIndexToSelected();
-    $$invalidate(11, isMenuVisible = false);
+    $$invalidate(12, isMenuVisible = false);
   }
   function setHighlightedIndexToSelected() {
-    $$invalidate(12, highlightedIndex = options.findIndex(option => _values.includes(option.value)));
+    $$invalidate(13, highlightedIndex = options.findIndex(option => _values.includes(option.value)));
   } // Event handlers
   function onSelect(val, label) {
     if (_disabled) return;
-    $$invalidate(10, selectedLabel = label);
+    $$invalidate(11, selectedLabel = label);
     if (_multiselect) {
       _values.push(val);
@@ -4837,7 +4870,7 @@ function instance$o($$self, $$props, $$invalidate) {
         }
       }));
     } else {
-      $$invalidate(8, _values = [val]);
+      $$invalidate(9, _values = [val]);
       el.dispatchEvent(new CustomEvent("_change", {
         composed: true,
         detail: {
@@ -4873,16 +4906,16 @@ function instance$o($$self, $$props, $$invalidate) {
     switch (e.key) {
       case "ArrowUp":
         if (highlightedIndex === 0) {
-          $$invalidate(12, highlightedIndex = options.length - 1);
+          $$invalidate(13, highlightedIndex = options.length - 1);
         } else {
-          $$invalidate(12, highlightedIndex--, highlightedIndex);
+          $$invalidate(13, highlightedIndex--, highlightedIndex);
         }
         e.preventDefault();
         break;
       case "ArrowDown":
-        $$invalidate(12, highlightedIndex = (highlightedIndex + 1) % options.length);
+        $$invalidate(13, highlightedIndex = (highlightedIndex + 1) % options.length);
         e.preventDefault();
         break;
@@ -4900,7 +4933,7 @@ function instance$o($$self, $$props, $$invalidate) {
   }
   function onHighlight(e) {
-    $$invalidate(12, highlightedIndex = Number(e.target.dataset.index));
+    $$invalidate(13, highlightedIndex = Number(e.target.dataset.index));
   }
   const click_handler = option => onSelect(option.value, option.label);
@@ -4908,45 +4941,46 @@ function instance$o($$self, $$props, $$invalidate) {
   function ul_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       menuEl = $$value;
-      $$invalidate(15, menuEl);
+      $$invalidate(16, menuEl);
     });
   }
   function div1_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       el = $$value;
-      $$invalidate(14, el);
+      $$invalidate(15, el);
     });
   }
   $$self.$$set = $$props => {
     if ('name' in $$props) $$invalidate(0, name = $$props.name);
-    if ('value' in $$props) $$invalidate(19, value = $$props.value);
-    if ('leadingicon' in $$props) $$invalidate(1, leadingicon = $$props.leadingicon);
-    if ('maxheight' in $$props) $$invalidate(2, maxheight = $$props.maxheight);
-    if ('placeholder' in $$props) $$invalidate(3, placeholder = $$props.placeholder);
-    if ('testid' in $$props) $$invalidate(4, testid = $$props.testid);
-    if ('width' in $$props) $$invalidate(5, width = $$props.width);
-    if ('disabled' in $$props) $$invalidate(6, disabled = $$props.disabled);
-    if ('error' in $$props) $$invalidate(7, error = $$props.error);
-    if ('multiselect' in $$props) $$invalidate(20, multiselect = $$props.multiselect);
+    if ('arialabel' in $$props) $$invalidate(1, arialabel = $$props.arialabel);
+    if ('value' in $$props) $$invalidate(20, value = $$props.value);
+    if ('leadingicon' in $$props) $$invalidate(2, leadingicon = $$props.leadingicon);
+    if ('maxheight' in $$props) $$invalidate(3, maxheight = $$props.maxheight);
+    if ('placeholder' in $$props) $$invalidate(4, placeholder = $$props.placeholder);
+    if ('testid' in $$props) $$invalidate(5, testid = $$props.testid);
+    if ('width' in $$props) $$invalidate(6, width = $$props.width);
+    if ('disabled' in $$props) $$invalidate(7, disabled = $$props.disabled);
+    if ('error' in $$props) $$invalidate(8, error = $$props.error);
+    if ('multiselect' in $$props) $$invalidate(21, multiselect = $$props.multiselect);
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty[0] &
     /*disabled*/
-    64) {
+    128) {
       _disabled = toBoolean(disabled);
     }
     if ($$self.$$.dirty[0] &
     /*multiselect*/
-    1048576) {
+    2097152) {
       _multiselect = toBoolean(multiselect);
     }
   };
-  return [name, leadingicon, maxheight, placeholder, testid, width, disabled, error, _values, options, selectedLabel, isMenuVisible, highlightedIndex, computedWidth, el, menuEl, showMenu, closeMenu, onSelect, value, multiselect, click_handler, ul_binding, div1_binding];
+  return [name, arialabel, leadingicon, maxheight, placeholder, testid, width, disabled, error, _values, options, selectedLabel, isMenuVisible, highlightedIndex, computedWidth, el, menuEl, showMenu, closeMenu, onSelect, value, multiselect, click_handler, ul_binding, div1_binding];
 }
 class Dropdown extends SvelteElement {
@@ -4959,15 +4993,16 @@ class Dropdown extends SvelteElement {
       customElement: true
     }, instance$o, create_fragment$q, safe_not_equal, {
       name: 0,
-      value: 19,
-      leadingicon: 1,
-      maxheight: 2,
-      placeholder: 3,
-      testid: 4,
-      width: 5,
-      disabled: 6,
-      error: 7,
-      multiselect: 20
+      arialabel: 1,
+      value: 20,
+      leadingicon: 2,
+      maxheight: 3,
+      placeholder: 4,
+      testid: 5,
+      width: 6,
+      disabled: 7,
+      error: 8,
+      multiselect: 21
     }, null, [-1, -1]);
     if (options) {
@@ -4983,7 +5018,7 @@ class Dropdown extends SvelteElement {
   }
   static get observedAttributes() {
-    return ["name", "value", "leadingicon", "maxheight", "placeholder", "testid", "width", "disabled", "error", "multiselect"];
+    return ["name", "arialabel", "value", "leadingicon", "maxheight", "placeholder", "testid", "width", "disabled", "error", "multiselect"];
   }
   get name() {
@@ -4997,8 +5032,19 @@ class Dropdown extends SvelteElement {
     flush();
   }
+  get arialabel() {
+    return this.$$.ctx[1];
+  }
+  set arialabel(arialabel) {
+    this.$$set({
+      arialabel
+    });
+    flush();
+  }
   get value() {
-    return this.$$.ctx[19];
+    return this.$$.ctx[20];
   }
   set value(value) {
@@ -5009,7 +5055,7 @@ class Dropdown extends SvelteElement {
   }
   get leadingicon() {
-    return this.$$.ctx[1];
+    return this.$$.ctx[2];
   }
   set leadingicon(leadingicon) {
@@ -5020,7 +5066,7 @@ class Dropdown extends SvelteElement {
   }
   get maxheight() {
-    return this.$$.ctx[2];
+    return this.$$.ctx[3];
   }
   set maxheight(maxheight) {
@@ -5031,7 +5077,7 @@ class Dropdown extends SvelteElement {
   }
   get placeholder() {
-    return this.$$.ctx[3];
+    return this.$$.ctx[4];
   }
   set placeholder(placeholder) {
@@ -5042,7 +5088,7 @@ class Dropdown extends SvelteElement {
   }
   get testid() {
-    return this.$$.ctx[4];
+    return this.$$.ctx[5];
   }
   set testid(testid) {
@@ -5053,7 +5099,7 @@ class Dropdown extends SvelteElement {
   }
   get width() {
-    return this.$$.ctx[5];
+    return this.$$.ctx[6];
   }
   set width(width) {
@@ -5064,7 +5110,7 @@ class Dropdown extends SvelteElement {
   }
   get disabled() {
-    return this.$$.ctx[6];
+    return this.$$.ctx[7];
   }
   set disabled(disabled) {
@@ -5075,7 +5121,7 @@ class Dropdown extends SvelteElement {
   }
   get error() {
-    return this.$$.ctx[7];
+    return this.$$.ctx[8];
   }
   set error(error) {
@@ -5086,7 +5132,7 @@ class Dropdown extends SvelteElement {
   }
   get multiselect() {
-    return this.$$.ctx[20];
+    return this.$$.ctx[21];
   }
   set multiselect(multiselect) {
@@ -5325,7 +5371,7 @@ customElements.define("goa-flex-row", FlexRow);
 /* libs/web-components/src/components/form-item/FormItem.svelte generated by Svelte v3.49.0 */
 function create_if_block_2$6(ctx) {
-  let label_1;
+  let div;
   let t0;
   let t1;
   let if_block =
@@ -5333,20 +5379,20 @@ function create_if_block_2$6(ctx) {
   ctx[3] && create_if_block_3$4();
   return {
     c() {
-      label_1 = element("label");
+      div = element("div");
       t0 = text(
       /*label*/
       ctx[0]);
       t1 = space();
       if (if_block) if_block.c();
-      attr(label_1, "for", "");
+      attr(div, "class", "label");
     },
     m(target, anchor) {
-      insert(target, label_1, anchor);
-      append(label_1, t0);
-      append(label_1, t1);
-      if (if_block) if_block.m(label_1, null);
+      insert(target, div, anchor);
+      append(div, t0);
+      append(div, t1);
+      if (if_block) if_block.m(div, null);
     },
     p(ctx, dirty) {
@@ -5362,7 +5408,7 @@ function create_if_block_2$6(ctx) {
         if (if_block) ;else {
           if_block = create_if_block_3$4();
           if_block.c();
-          if_block.m(label_1, null);
+          if_block.m(div, null);
         }
       } else if (if_block) {
         if_block.d(1);
@@ -5371,7 +5417,7 @@ function create_if_block_2$6(ctx) {
     },
     d(detaching) {
-      if (detaching) detach(label_1);
+      if (detaching) detach(div);
       if (if_block) if_block.d();
     }
@@ -5578,7 +5624,7 @@ function instance$l($$self, $$props, $$invalidate) {
     error = ""
   } = $$props;
   let {
-    optional
+    optional = ""
   } = $$props;
   $$self.$$set = $$props => {
@@ -5602,7 +5648,7 @@ function instance$l($$self, $$props, $$invalidate) {
 class FormItem extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}*{box-sizing:border-box}label{display:block;font-weight:var(--fw-bold);color:var(--goa-color-text);font-size:var(--fs-base);padding:0.5rem 0;overflow-x:hidden;white-space:nowrap;text-overflow:ellipsis}label em{color:var(--color-gray-600);font-weight:var(--fw-regular);font-size:var(--fs-sm);line-height:var(--lh-sm);font-style:normal}.form-item-input{margin-bottom:0.25rem}.help-msg{font-size:var(--fs-sm);color:var(--goa-color-text)}.error-msg{font-size:var(--fs-sm);color:var(--goa-color-interactive--error);margin-bottom:0.25rem}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}*{box-sizing:border-box}.label{display:block;font-weight:var(--fw-bold);color:var(--goa-color-text);font-size:var(--fs-base);padding:0.5rem 0;overflow-x:hidden;white-space:nowrap;text-overflow:ellipsis}.label em{color:var(--color-gray-600);font-weight:var(--fw-regular);font-size:var(--fs-sm);line-height:var(--lh-sm);font-style:normal}.form-item-input{margin-bottom:0.25rem}.help-msg{font-size:var(--fs-sm);color:var(--goa-color-text)}.error-msg{font-size:var(--fs-sm);color:var(--goa-color-interactive--error);margin-bottom:0.25rem}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -6568,7 +6614,7 @@ function create_if_block_5(ctx) {
     }
   };
-} // (93:4) {#if trailingicon && !handlesTrailingIconClick}
+} // (102:4) {#if trailingicon && !handlesTrailingIconClick}
 function create_if_block_4$1(ctx) {
@@ -6603,7 +6649,7 @@ function create_if_block_4$1(ctx) {
     }
   };
-} // (103:4) {#if trailingicon && handlesTrailingIconClick}
+} // (112:4) {#if trailingicon && handlesTrailingIconClick}
 function create_if_block_3$3(ctx) {
@@ -6616,7 +6662,7 @@ function create_if_block_3$3(ctx) {
       set_custom_element_data(goa_icon_button, "class", "goa-input-trailing-icon");
       set_custom_element_data(goa_icon_button, "disabled",
       /*isDisabled*/
-      ctx[12]);
+      ctx[16]);
       set_custom_element_data(goa_icon_button, "variant", "nocolor");
       set_custom_element_data(goa_icon_button, "size", "medium");
       set_custom_element_data(goa_icon_button, "type",
@@ -6637,10 +6683,10 @@ function create_if_block_3$3(ctx) {
     p(ctx, dirty) {
       if (dirty &
       /*isDisabled*/
-      4096) {
+      65536) {
         set_custom_element_data(goa_icon_button, "disabled",
         /*isDisabled*/
-        ctx[12]);
+        ctx[16]);
       }
       if (dirty &
@@ -6659,7 +6705,7 @@ function create_if_block_3$3(ctx) {
     }
   };
-} // (117:2) {#if showCounter}
+} // (126:2) {#if showCounter}
 function create_if_block$a(ctx) {
@@ -6668,7 +6714,7 @@ function create_if_block$a(ctx) {
   function select_block_type(ctx, dirty) {
     if (
     /*maxcharcount*/
-    ctx[9] > 0) return create_if_block_1$6;
+    ctx[13] > 0) return create_if_block_1$6;
     if (
     /*value*/
     ctx[0].length > 0) return create_if_block_2$5;
@@ -6710,7 +6756,7 @@ function create_if_block$a(ctx) {
     }
   };
-} // (122:31)
+} // (131:31)
 function create_if_block_2$5(ctx) {
@@ -6744,7 +6790,7 @@ function create_if_block_2$5(ctx) {
     }
   };
-} // (118:4) {#if maxcharcount > 0}
+} // (127:4) {#if maxcharcount > 0}
 function create_if_block_1$6(ctx) {
@@ -6755,7 +6801,7 @@ function create_if_block_1$6(ctx) {
   let t0;
   let t1_value = `/${
   /*maxcharcount*/
-  ctx[9]}` + "";
+  ctx[13]}` + "";
   let t1;
   return {
     c() {
@@ -6767,7 +6813,7 @@ function create_if_block_1$6(ctx) {
       /*value*/
       ctx[0].length >
       /*maxcharcount*/
-      ctx[9]);
+      ctx[13]);
     },
     m(target, anchor) {
@@ -6784,18 +6830,18 @@ function create_if_block_1$6(ctx) {
       ctx[0].length + "")) set_data(t0, t0_value);
       if (dirty &
       /*maxcharcount*/
-      512 && t1_value !== (t1_value = `/${
+      8192 && t1_value !== (t1_value = `/${
       /*maxcharcount*/
-      ctx[9]}` + "")) set_data(t1, t1_value);
+      ctx[13]}` + "")) set_data(t1, t1_value);
       if (dirty &
       /*value, maxcharcount*/
-      513) {
+      8193) {
         toggle_class(div, "counter-error",
         /*value*/
         ctx[0].length >
         /*maxcharcount*/
-        ctx[9]);
+        ctx[13]);
       }
     },
@@ -6813,6 +6859,7 @@ function create_fragment$j(ctx) {
   let input;
   let input_class_value;
   let input_style_value;
+  let input_aria_label_value;
   let t1;
   let t2;
   let div0_class_value;
@@ -6827,15 +6874,15 @@ function create_fragment$j(ctx) {
   /*trailingicon*/
   ctx[5] && !
   /*handlesTrailingIconClick*/
-  ctx[15] && create_if_block_4$1(ctx);
+  ctx[19] && create_if_block_4$1(ctx);
   let if_block2 =
   /*trailingicon*/
   ctx[5] &&
   /*handlesTrailingIconClick*/
-  ctx[15] && create_if_block_3$3(ctx);
+  ctx[19] && create_if_block_3$3(ctx);
   let if_block3 =
   /*showCounter*/
-  ctx[11] && create_if_block$a(ctx);
+  ctx[15] && create_if_block$a(ctx);
   return {
     c() {
       div1 = element("div");
@@ -6858,10 +6905,10 @@ function create_fragment$j(ctx) {
       ctx[5] ? "-0.5rem" : "0"}`);
       input.readOnly =
       /*isReadonly*/
-      ctx[14];
+      ctx[18];
       input.disabled =
       /*isDisabled*/
-      ctx[12];
+      ctx[16];
       attr(input, "data-testid",
       /*testid*/
       ctx[7]);
@@ -6877,11 +6924,26 @@ function create_fragment$j(ctx) {
       attr(input, "placeholder",
       /*placeholder*/
       ctx[3]);
+      attr(input, "min",
+      /*min*/
+      ctx[10]);
+      attr(input, "max",
+      /*max*/
+      ctx[11]);
+      attr(input, "step",
+      /*step*/
+      ctx[12]);
+      attr(input, "role", "textbox");
+      attr(input, "aria-label", input_aria_label_value =
+      /*arialabel*/
+      ctx[9] ||
+      /*name*/
+      ctx[2]);
       attr(div0, "class", div0_class_value = `
       goa-input
       ${
       /*isDisabled*/
-      ctx[12] ? "goa-input--disabled" : ""}
+      ctx[16] ? "goa-input--disabled" : ""}
       variant--${
       /*variant*/
       ctx[6]}
@@ -6891,7 +6953,7 @@ function create_fragment$j(ctx) {
     `);
       toggle_class(div0, "error",
       /*isError*/
-      ctx[13]);
+      ctx[17]);
       attr(div1, "class", "container");
       attr(div1, "style", div1_style_value = `
     --width: ${
@@ -6908,7 +6970,7 @@ function create_fragment$j(ctx) {
       append(div0, input);
       /*input_binding*/
-      ctx[24](input);
+      ctx[28](input);
       append(div0, t1);
       if (if_block1) if_block1.m(div0, null);
       append(div0, t2);
@@ -6919,9 +6981,9 @@ function create_fragment$j(ctx) {
       if (!mounted) {
         dispose = [listen(input, "keyup",
         /*onKeyUp*/
-        ctx[16]), listen(input, "change",
+        ctx[20]), listen(input, "change",
         /*onKeyUp*/
-        ctx[16])];
+        ctx[20])];
         mounted = true;
       }
     },
@@ -6960,18 +7022,18 @@ function create_fragment$j(ctx) {
       if (dirty &
       /*isReadonly*/
-      16384) {
+      262144) {
         input.readOnly =
         /*isReadonly*/
-        ctx[14];
+        ctx[18];
       }
       if (dirty &
       /*isDisabled*/
-      4096) {
+      65536) {
         input.disabled =
         /*isDisabled*/
-        ctx[12];
+        ctx[16];
       }
       if (dirty &
@@ -7016,11 +7078,45 @@ function create_fragment$j(ctx) {
         ctx[3]);
       }
+      if (dirty &
+      /*min*/
+      1024) {
+        attr(input, "min",
+        /*min*/
+        ctx[10]);
+      }
+      if (dirty &
+      /*max*/
+      2048) {
+        attr(input, "max",
+        /*max*/
+        ctx[11]);
+      }
+      if (dirty &
+      /*step*/
+      4096) {
+        attr(input, "step",
+        /*step*/
+        ctx[12]);
+      }
+      if (dirty &
+      /*arialabel, name*/
+      516 && input_aria_label_value !== (input_aria_label_value =
+      /*arialabel*/
+      ctx[9] ||
+      /*name*/
+      ctx[2])) {
+        attr(input, "aria-label", input_aria_label_value);
+      }
       if (
       /*trailingicon*/
       ctx[5] && !
       /*handlesTrailingIconClick*/
-      ctx[15]) {
+      ctx[19]) {
         if (if_block1) {
           if_block1.p(ctx, dirty);
         } else {
@@ -7037,7 +7133,7 @@ function create_fragment$j(ctx) {
       /*trailingicon*/
       ctx[5] &&
       /*handlesTrailingIconClick*/
-      ctx[15]) {
+      ctx[19]) {
         if (if_block2) {
           if_block2.p(ctx, dirty);
         } else {
@@ -7052,11 +7148,11 @@ function create_fragment$j(ctx) {
       if (dirty &
       /*isDisabled, variant, type*/
-      4162 && div0_class_value !== (div0_class_value = `
+      65602 && div0_class_value !== (div0_class_value = `
       goa-input
       ${
       /*isDisabled*/
-      ctx[12] ? "goa-input--disabled" : ""}
+      ctx[16] ? "goa-input--disabled" : ""}
       variant--${
       /*variant*/
       ctx[6]}
@@ -7069,15 +7165,15 @@ function create_fragment$j(ctx) {
       if (dirty &
       /*isDisabled, variant, type, isError*/
-      12354) {
+      196674) {
         toggle_class(div0, "error",
         /*isError*/
-        ctx[13]);
+        ctx[17]);
       }
       if (
       /*showCounter*/
-      ctx[11]) {
+      ctx[15]) {
         if (if_block3) {
           if_block3.p(ctx, dirty);
         } else {
@@ -7109,7 +7205,7 @@ function create_fragment$j(ctx) {
       if (if_block0) if_block0.d();
       /*input_binding*/
-      ctx[24](null);
+      ctx[28](null);
       if (if_block1) if_block1.d();
       if (if_block2) if_block2.d();
       if (if_block3) if_block3.d();
@@ -7175,6 +7271,18 @@ function instance$h($$self, $$props, $$invalidate) {
   let {
     width = "30ch"
   } = $$props;
+  let {
+    arialabel = ""
+  } = $$props;
+  let {
+    min = ""
+  } = $$props;
+  let {
+    max = ""
+  } = $$props;
+  let {
+    step
+  } = $$props;
   let {
     showcounter = "false"
   } = $$props;
@@ -7199,7 +7307,7 @@ function instance$h($$self, $$props, $$invalidate) {
   function input_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       inputEl = $$value;
-      $$invalidate(10, inputEl);
+      $$invalidate(14, inputEl);
     });
   }
@@ -7211,57 +7319,61 @@ function instance$h($$self, $$props, $$invalidate) {
     if ('leadingicon' in $$props) $$invalidate(4, leadingicon = $$props.leadingicon);
     if ('trailingicon' in $$props) $$invalidate(5, trailingicon = $$props.trailingicon);
     if ('variant' in $$props) $$invalidate(6, variant = $$props.variant);
-    if ('disabled' in $$props) $$invalidate(17, disabled = $$props.disabled);
-    if ('handletrailingiconclick' in $$props) $$invalidate(18, handletrailingiconclick = $$props.handletrailingiconclick);
-    if ('focused' in $$props) $$invalidate(19, focused = $$props.focused);
-    if ('readonly' in $$props) $$invalidate(20, readonly = $$props.readonly);
-    if ('error' in $$props) $$invalidate(21, error = $$props.error);
+    if ('disabled' in $$props) $$invalidate(21, disabled = $$props.disabled);
+    if ('handletrailingiconclick' in $$props) $$invalidate(22, handletrailingiconclick = $$props.handletrailingiconclick);
+    if ('focused' in $$props) $$invalidate(23, focused = $$props.focused);
+    if ('readonly' in $$props) $$invalidate(24, readonly = $$props.readonly);
+    if ('error' in $$props) $$invalidate(25, error = $$props.error);
     if ('testid' in $$props) $$invalidate(7, testid = $$props.testid);
     if ('width' in $$props) $$invalidate(8, width = $$props.width);
-    if ('showcounter' in $$props) $$invalidate(22, showcounter = $$props.showcounter);
-    if ('maxcharcount' in $$props) $$invalidate(9, maxcharcount = $$props.maxcharcount);
+    if ('arialabel' in $$props) $$invalidate(9, arialabel = $$props.arialabel);
+    if ('min' in $$props) $$invalidate(10, min = $$props.min);
+    if ('max' in $$props) $$invalidate(11, max = $$props.max);
+    if ('step' in $$props) $$invalidate(12, step = $$props.step);
+    if ('showcounter' in $$props) $$invalidate(26, showcounter = $$props.showcounter);
+    if ('maxcharcount' in $$props) $$invalidate(13, maxcharcount = $$props.maxcharcount);
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty &
     /*handletrailingiconclick*/
-    262144) {
-      $$invalidate(15, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
+    4194304) {
+      $$invalidate(19, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
     }
     if ($$self.$$.dirty &
     /*focused*/
-    524288) {
-      $$invalidate(23, isFocused = toBoolean(focused));
+    8388608) {
+      $$invalidate(27, isFocused = toBoolean(focused));
     }
     if ($$self.$$.dirty &
     /*readonly*/
-    1048576) {
-      $$invalidate(14, isReadonly = toBoolean(readonly));
+    16777216) {
+      $$invalidate(18, isReadonly = toBoolean(readonly));
     }
     if ($$self.$$.dirty &
     /*error*/
-    2097152) {
-      $$invalidate(13, isError = toBoolean(error));
+    33554432) {
+      $$invalidate(17, isError = toBoolean(error));
     }
     if ($$self.$$.dirty &
     /*disabled*/
-    131072) {
-      $$invalidate(12, isDisabled = toBoolean(disabled));
+    2097152) {
+      $$invalidate(16, isDisabled = toBoolean(disabled));
     }
     if ($$self.$$.dirty &
     /*showcounter*/
-    4194304) {
-      $$invalidate(11, showCounter = toBoolean(showcounter));
+    67108864) {
+      $$invalidate(15, showCounter = toBoolean(showcounter));
     }
     if ($$self.$$.dirty &
     /*isFocused, inputEl*/
-    8389632) {
+    134234112) {
       if (isFocused && inputEl) {
         setTimeout(() => inputEl.focus(), 1);
       }
@@ -7269,7 +7381,7 @@ function instance$h($$self, $$props, $$invalidate) {
     if ($$self.$$.dirty &
     /*inputEl, type*/
-    1026) {
+    16386) {
       if (inputEl && type === "search") {
         inputEl.addEventListener("search", e => {
           onKeyUp(e);
@@ -7278,7 +7390,7 @@ function instance$h($$self, $$props, $$invalidate) {
     }
   };
-  return [value, type, name, placeholder, leadingicon, trailingicon, variant, testid, width, maxcharcount, inputEl, showCounter, isDisabled, isError, isReadonly, handlesTrailingIconClick, onKeyUp, disabled, handletrailingiconclick, focused, readonly, error, showcounter, isFocused, input_binding];
+  return [value, type, name, placeholder, leadingicon, trailingicon, variant, testid, width, arialabel, min, max, step, maxcharcount, inputEl, showCounter, isDisabled, isError, isReadonly, handlesTrailingIconClick, onKeyUp, disabled, handletrailingiconclick, focused, readonly, error, showcounter, isFocused, input_binding];
 }
 class Input extends SvelteElement {
@@ -7298,15 +7410,19 @@ class Input extends SvelteElement {
       leadingicon: 4,
       trailingicon: 5,
       variant: 6,
-      disabled: 17,
-      handletrailingiconclick: 18,
-      focused: 19,
-      readonly: 20,
-      error: 21,
+      disabled: 21,
+      handletrailingiconclick: 22,
+      focused: 23,
+      readonly: 24,
+      error: 25,
       testid: 7,
       width: 8,
-      showcounter: 22,
-      maxcharcount: 9
+      arialabel: 9,
+      min: 10,
+      max: 11,
+      step: 12,
+      showcounter: 26,
+      maxcharcount: 13
     }, null);
     if (options) {
@@ -7322,7 +7438,7 @@ class Input extends SvelteElement {
   }
   static get observedAttributes() {
-    return ["type", "name", "value", "placeholder", "leadingicon", "trailingicon", "variant", "disabled", "handletrailingiconclick", "focused", "readonly", "error", "testid", "width", "showcounter", "maxcharcount"];
+    return ["type", "name", "value", "placeholder", "leadingicon", "trailingicon", "variant", "disabled", "handletrailingiconclick", "focused", "readonly", "error", "testid", "width", "arialabel", "min", "max", "step", "showcounter", "maxcharcount"];
   }
   get type() {
@@ -7403,7 +7519,7 @@ class Input extends SvelteElement {
   }
   get disabled() {
-    return this.$$.ctx[17];
+    return this.$$.ctx[21];
   }
   set disabled(disabled) {
@@ -7414,7 +7530,7 @@ class Input extends SvelteElement {
   }
   get handletrailingiconclick() {
-    return this.$$.ctx[18];
+    return this.$$.ctx[22];
   }
   set handletrailingiconclick(handletrailingiconclick) {
@@ -7425,7 +7541,7 @@ class Input extends SvelteElement {
   }
   get focused() {
-    return this.$$.ctx[19];
+    return this.$$.ctx[23];
   }
   set focused(focused) {
@@ -7436,7 +7552,7 @@ class Input extends SvelteElement {
   }
   get readonly() {
-    return this.$$.ctx[20];
+    return this.$$.ctx[24];
   }
   set readonly(readonly) {
@@ -7447,7 +7563,7 @@ class Input extends SvelteElement {
   }
   get error() {
-    return this.$$.ctx[21];
+    return this.$$.ctx[25];
   }
   set error(error) {
@@ -7479,8 +7595,52 @@ class Input extends SvelteElement {
     flush();
   }
+  get arialabel() {
+    return this.$$.ctx[9];
+  }
+  set arialabel(arialabel) {
+    this.$$set({
+      arialabel
+    });
+    flush();
+  }
+  get min() {
+    return this.$$.ctx[10];
+  }
+  set min(min) {
+    this.$$set({
+      min
+    });
+    flush();
+  }
+  get max() {
+    return this.$$.ctx[11];
+  }
+  set max(max) {
+    this.$$set({
+      max
+    });
+    flush();
+  }
+  get step() {
+    return this.$$.ctx[12];
+  }
+  set step(step) {
+    this.$$set({
+      step
+    });
+    flush();
+  }
   get showcounter() {
-    return this.$$.ctx[22];
+    return this.$$.ctx[26];
   }
   set showcounter(showcounter) {
@@ -7491,7 +7651,7 @@ class Input extends SvelteElement {
   }
   get maxcharcount() {
-    return this.$$.ctx[9];
+    return this.$$.ctx[13];
   }
   set maxcharcount(maxcharcount) {
@@ -8452,53 +8612,6 @@ class Notification extends SvelteElement {
 }
 customElements.define("goa-notification", Notification);
-/* libs/web-components/src/layouts/PageLayout.svelte generated by Svelte v3.49.0 */
-function create_fragment$g(ctx) {
-  let div;
-  return {
-    c() {
-      div = element("div");
-      div.innerHTML = `<slot></slot>`;
-      this.c = noop;
-      attr(div, "class", "layout");
-    },
-    m(target, anchor) {
-      insert(target, div, anchor);
-    },
-    p: noop,
-    i: noop,
-    o: noop,
-    d(detaching) {
-      if (detaching) detach(div);
-    }
-  };
-}
-class PageLayout extends SvelteElement {
-  constructor(options) {
-    super();
-    this.shadowRoot.innerHTML = `<style>@media(min-width: 768px){}.layout{max-width:768px;margin:0 auto;padding:2rem}</style>`;
-    init(this, {
-      target: this.shadowRoot,
-      props: attribute_to_object(this.attributes),
-      customElement: true
-    }, null, create_fragment$g, safe_not_equal, {}, null);
-    if (options) {
-      if (options.target) {
-        insert(options.target, this, options.anchor);
-      }
-    }
-  }
-}
-customElements.define("goa-page-layout", PageLayout);
 /* libs/web-components/src/components/circular-progress/CircularProgress.svelte generated by Svelte v3.49.0 */
 function create_if_block$7(ctx) {
@@ -8872,7 +8985,7 @@ function create_if_block_2$3(ctx) {
   };
 }
-function create_fragment$f(ctx) {
+function create_fragment$g(ctx) {
   let if_block_anchor;
   let current;
   let if_block =
@@ -8990,7 +9103,7 @@ class CircularProgress extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$e, create_fragment$f, safe_not_equal, {
+    }, instance$e, create_fragment$g, safe_not_equal, {
       variant: 6,
       size: 7,
       message: 0,
@@ -9249,7 +9362,7 @@ function create_each_block$3(key_1, ctx) {
   };
 }
-function create_fragment$e(ctx) {
+function create_fragment$f(ctx) {
   let div;
   let slot;
   let t;
@@ -9449,7 +9562,7 @@ class RadioGroup extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$d, create_fragment$e, safe_not_equal, {
+    }, instance$d, create_fragment$f, safe_not_equal, {
       name: 1,
       value: 0,
       orientation: 2,
@@ -9545,7 +9658,7 @@ class RadioGroup extends SvelteElement {
 customElements.define("goa-radio-group", RadioGroup);
 /* libs/web-components/src/components/radio-group/RadioItem.svelte generated by Svelte v3.49.0 */
-function create_fragment$d(ctx) {
+function create_fragment$e(ctx) {
   return {
     c() {
       this.c = noop;
@@ -9600,7 +9713,7 @@ class RadioItem extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$c, create_fragment$d, safe_not_equal, {
+    }, instance$c, create_fragment$e, safe_not_equal, {
       value: 0,
       label: 1,
       name: 2
@@ -9660,7 +9773,7 @@ class RadioItem extends SvelteElement {
 customElements.define("goa-radio-item", RadioItem);
 /* libs/web-components/src/components/scrollable/Scrollable.svelte generated by Svelte v3.49.0 */
-function create_fragment$c(ctx) {
+function create_fragment$d(ctx) {
   let div;
   let slot;
   let div_style_value;
@@ -9760,7 +9873,7 @@ class Scrollable extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$b, create_fragment$c, safe_not_equal, {
+    }, instance$b, create_fragment$d, safe_not_equal, {
       direction: 0,
       hpadding: 1,
       vpadding: 2,
@@ -9844,7 +9957,7 @@ function create_if_block_3(ctx) {
       div1 = element("div");
       div1.innerHTML = `An official site of the <a href="https://www.alberta.ca/index.aspx">Alberta Government</a>`;
       attr(div0, "class", "service-level service-level--live");
-      attr(div1, "data-testid", "level");
+      attr(div1, "data-testid", "type");
       attr(div1, "class", "site-text");
     },
@@ -9861,13 +9974,13 @@ function create_if_block_3(ctx) {
     }
   };
-} // (34:2) {#if ["alpha", "beta"].includes(level)}
+} // (34:2) {#if ["alpha", "beta"].includes(type)}
 function create_if_block_1$3(ctx) {
   let div0;
   let t0_value = capitalize(
-  /*level*/
+  /*type*/
   ctx[0]) + "";
   let t0;
   let div0_class_value;
@@ -9890,9 +10003,9 @@ function create_if_block_1$3(ctx) {
       a.textContent = "Alberta Government";
       t4 = text(" service\n      ");
       if (if_block) if_block.c();
-      attr(div0, "data-testid", "level");
+      attr(div0, "data-testid", "type");
       attr(div0, "class", div0_class_value = "service-level service-level--" +
-      /*level*/
+      /*type*/
       ctx[0].toLowerCase());
       attr(a, "href", "https://www.alberta.ca/index.aspx");
       attr(div1, "data-testid", "site-text");
@@ -9912,15 +10025,15 @@ function create_if_block_1$3(ctx) {
     p(ctx, dirty) {
       if (dirty &
-      /*level*/
+      /*type*/
       1 && t0_value !== (t0_value = capitalize(
-      /*level*/
+      /*type*/
       ctx[0]) + "")) set_data(t0, t0_value);
       if (dirty &
-      /*level*/
+      /*type*/
       1 && div0_class_value !== (div0_class_value = "service-level service-level--" +
-      /*level*/
+      /*type*/
       ctx[0].toLowerCase())) {
         attr(div0, "class", div0_class_value);
       }
@@ -10027,17 +10140,17 @@ function create_if_block$6(ctx) {
   };
 }
-function create_fragment$b(ctx) {
+function create_fragment$c(ctx) {
   let header;
   let t0;
   let show_if = ["alpha", "beta"].includes(
-  /*level*/
+  /*type*/
   ctx[0]);
   let t1;
   let div;
   let t2;
   let if_block0 =
-  /*level*/
+  /*type*/
   ctx[0] === "live" && create_if_block_3();
   let if_block1 = show_if && create_if_block_1$3(ctx);
   let if_block2 =
@@ -10071,7 +10184,7 @@ function create_fragment$b(ctx) {
     p(ctx, [dirty]) {
       if (
-      /*level*/
+      /*type*/
       ctx[0] === "live") {
         if (if_block0) ;else {
           if_block0 = create_if_block_3();
@@ -10084,9 +10197,9 @@ function create_fragment$b(ctx) {
       }
       if (dirty &
-      /*level*/
+      /*type*/
       1) show_if = ["alpha", "beta"].includes(
-      /*level*/
+      /*type*/
       ctx[0]);
       if (show_if) {
@@ -10138,7 +10251,7 @@ function capitalize(val) {
 function instance$a($$self, $$props, $$invalidate) {
   let {
-    level
+    type
   } = $$props;
   let {
     version
@@ -10148,24 +10261,24 @@ function instance$a($$self, $$props, $$invalidate) {
   } = $$props;
   $$self.$$set = $$props => {
-    if ('level' in $$props) $$invalidate(0, level = $$props.level);
+    if ('type' in $$props) $$invalidate(0, type = $$props.type);
     if ('version' in $$props) $$invalidate(1, version = $$props.version);
     if ('feedbackurl' in $$props) $$invalidate(2, feedbackurl = $$props.feedbackurl);
   };
-  return [level, version, feedbackurl];
+  return [type, version, feedbackurl];
 }
 class MicrositeHeader extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}a{color:var(--goa-color-interactive);cursor:pointer}a:hover{color:var(--goa-color-interactive--hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive--hover);outline-offset:0px}.goa-official-site-header{display:flex;font-size:var(--fs-sm);background-color:var(--color-gray-100);align-items:center;justify-content:space-between;padding:0.5rem 1.5rem}@media(max-width: 640px){.goa-official-site-header{padding:0.5rem 1rem;align-items:start}}.spacer{flex:1 1 auto}.version{color:var(--goa-color-text-secondary);padding-left:1rem;line-height:1.25rem}.service-level{font-weight:bold;padding:0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-level--alpha{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.service-level--beta{background-color:var(--goa-color-brand);color:var(--goa-color-text-light)}.service-level--live{padding:0}.site-text{color:var(--goa-color-text);line-height:1.25rem}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}a{color:var(--goa-color-interactive);cursor:pointer}a:hover{color:var(--goa-color-interactive--hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive--hover);outline-offset:0px}.goa-official-site-header{display:flex;font-size:var(--fs-sm);background-color:var(--color-gray-100);align-items:center;justify-content:space-between;padding:0.5rem 1.5rem}@media(max-width: 640px){.goa-official-site-header{padding:0.5rem 1rem;align-items:start}}.spacer{flex:1 1 auto}.version{color:var(--goa-color-text-secondary);padding-left:1rem;line-height:1.25rem}.service-type{font-weight:bold;padding:0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-type--alpha{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.service-type--beta{background-color:var(--goa-color-brand);color:var(--goa-color-text-light)}.service-type--live{padding:0}.site-text{color:var(--goa-color-text);line-height:1.25rem}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$a, create_fragment$b, safe_not_equal, {
-      level: 0,
+    }, instance$a, create_fragment$c, safe_not_equal, {
+      type: 0,
       version: 1,
       feedbackurl: 2
     }, null);
@@ -10183,16 +10296,16 @@ class MicrositeHeader extends SvelteElement {
   }
   static get observedAttributes() {
-    return ["level", "version", "feedbackurl"];
+    return ["type", "version", "feedbackurl"];
   }
-  get level() {
+  get type() {
     return this.$$.ctx[0];
   }
-  set level(level) {
+  set type(type) {
     this.$$set({
-      level
+      type
     });
     flush();
   }
@@ -10680,7 +10793,7 @@ function create_each_block$2(ctx) {
   };
 }
-function create_fragment$a(ctx) {
+function create_fragment$b(ctx) {
   let current_block_type_index;
   let if_block;
   let if_block_anchor;
@@ -10793,7 +10906,7 @@ class Skeleton extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$9, create_fragment$a, safe_not_equal, {
+    }, instance$9, create_fragment$b, safe_not_equal, {
       width: 0,
       size: 1,
       count: 2,
@@ -11175,7 +11288,7 @@ function create_if_block$4(ctx) {
   };
 }
-function create_fragment$9(ctx) {
+function create_fragment$a(ctx) {
   let if_block_anchor;
   let if_block =
   /*ready*/
@@ -11351,7 +11464,7 @@ class Spinner extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$8, create_fragment$9, safe_not_equal, {
+    }, instance$8, create_fragment$a, safe_not_equal, {
       size: 10,
       invert: 0,
       progress: 11,
@@ -11429,7 +11542,7 @@ function create_if_block$3(ctx) {
   function select_block_type(ctx, dirty) {
     if (
     /*maxcharcount*/
-    ctx[6] > 0) return create_if_block_1$1;
+    ctx[7] > 0) return create_if_block_1$1;
     if (
     /*value*/
     ctx[1].length > 0) return create_if_block_2;
@@ -11471,7 +11584,7 @@ function create_if_block$3(ctx) {
     }
   };
-} // (61:31)
+} // (63:31)
 function create_if_block_2(ctx) {
@@ -11505,7 +11618,7 @@ function create_if_block_2(ctx) {
     }
   };
-} // (55:4) {#if maxcharcount > 0}
+} // (57:4) {#if maxcharcount > 0}
 function create_if_block_1$1(ctx) {
@@ -11516,7 +11629,7 @@ function create_if_block_1$1(ctx) {
   let t0;
   let t1_value = `/${
   /*maxcharcount*/
-  ctx[6]}` + "";
+  ctx[7]}` + "";
   let t1;
   return {
     c() {
@@ -11528,7 +11641,7 @@ function create_if_block_1$1(ctx) {
       /*value*/
       ctx[1].length >
       /*maxcharcount*/
-      ctx[6]);
+      ctx[7]);
     },
     m(target, anchor) {
@@ -11545,18 +11658,18 @@ function create_if_block_1$1(ctx) {
       ctx[1].length + "")) set_data(t0, t0_value);
       if (dirty &
       /*maxcharcount*/
-      64 && t1_value !== (t1_value = `/${
+      128 && t1_value !== (t1_value = `/${
       /*maxcharcount*/
-      ctx[6]}` + "")) set_data(t1, t1_value);
+      ctx[7]}` + "")) set_data(t1, t1_value);
       if (dirty &
       /*value, maxcharcount*/
-      66) {
+      130) {
         toggle_class(div, "counter-error",
         /*value*/
         ctx[1].length >
         /*maxcharcount*/
-        ctx[6]);
+        ctx[7]);
       }
     },
@@ -11567,16 +11680,17 @@ function create_if_block_1$1(ctx) {
   };
 }
-function create_fragment$8(ctx) {
+function create_fragment$9(ctx) {
   let div;
   let textarea;
+  let textarea_aria_label_value;
   let t;
   let div_style_value;
   let mounted;
   let dispose;
   let if_block =
   /*showCounter*/
-  ctx[8] && create_if_block$3(ctx);
+  ctx[9] && create_if_block$3(ctx);
   return {
     c() {
       div = element("div");
@@ -11596,19 +11710,24 @@ function create_fragment$8(ctx) {
       attr(textarea, "rows",
       /*rows*/
       ctx[3]);
+      attr(textarea, "aria-label", textarea_aria_label_value =
+      /*arialabel*/
+      ctx[6] ||
+      /*name*/
+      ctx[0]);
       attr(textarea, "class", "goa-textarea");
       textarea.disabled =
       /*isDisabled*/
-      ctx[7];
+      ctx[8];
       textarea.readOnly =
       /*isReadonly*/
-      ctx[9];
+      ctx[10];
       attr(textarea, "data-testid",
       /*testid*/
       ctx[4]);
       toggle_class(textarea, "error",
       /*isError*/
-      ctx[10]);
+      ctx[11]);
       attr(div, "class", "container");
       attr(div, "style", div_style_value = `
     --width: ${
@@ -11626,7 +11745,7 @@ function create_fragment$8(ctx) {
       if (!mounted) {
         dispose = listen(textarea, "keyup",
         /*onChange*/
-        ctx[11]);
+        ctx[12]);
         mounted = true;
       }
     },
@@ -11664,20 +11783,30 @@ function create_fragment$8(ctx) {
         ctx[3]);
       }
+      if (dirty &
+      /*arialabel, name*/
+      65 && textarea_aria_label_value !== (textarea_aria_label_value =
+      /*arialabel*/
+      ctx[6] ||
+      /*name*/
+      ctx[0])) {
+        attr(textarea, "aria-label", textarea_aria_label_value);
+      }
       if (dirty &
       /*isDisabled*/
-      128) {
+      256) {
         textarea.disabled =
         /*isDisabled*/
-        ctx[7];
+        ctx[8];
       }
       if (dirty &
       /*isReadonly*/
-      512) {
+      1024) {
         textarea.readOnly =
         /*isReadonly*/
-        ctx[9];
+        ctx[10];
       }
       if (dirty &
@@ -11690,15 +11819,15 @@ function create_fragment$8(ctx) {
       if (dirty &
       /*isError*/
-      1024) {
+      2048) {
         toggle_class(textarea, "error",
         /*isError*/
-        ctx[10]);
+        ctx[11]);
       }
       if (
       /*showCounter*/
-      ctx[8]) {
+      ctx[9]) {
         if (if_block) {
           if_block.p(ctx, dirty);
         } else {
@@ -11767,6 +11896,9 @@ function instance$7($$self, $$props, $$invalidate) {
   let {
     disabled = "false"
   } = $$props;
+  let {
+    arialabel = ""
+  } = $$props;
   let {
     showcounter = "false"
   } = $$props;
@@ -11798,40 +11930,41 @@ function instance$7($$self, $$props, $$invalidate) {
     if ('rows' in $$props) $$invalidate(3, rows = $$props.rows);
     if ('testid' in $$props) $$invalidate(4, testid = $$props.testid);
     if ('width' in $$props) $$invalidate(5, width = $$props.width);
-    if ('error' in $$props) $$invalidate(12, error = $$props.error);
-    if ('readonly' in $$props) $$invalidate(13, readonly = $$props.readonly);
-    if ('disabled' in $$props) $$invalidate(14, disabled = $$props.disabled);
-    if ('showcounter' in $$props) $$invalidate(15, showcounter = $$props.showcounter);
-    if ('maxcharcount' in $$props) $$invalidate(6, maxcharcount = $$props.maxcharcount);
+    if ('error' in $$props) $$invalidate(13, error = $$props.error);
+    if ('readonly' in $$props) $$invalidate(14, readonly = $$props.readonly);
+    if ('disabled' in $$props) $$invalidate(15, disabled = $$props.disabled);
+    if ('arialabel' in $$props) $$invalidate(6, arialabel = $$props.arialabel);
+    if ('showcounter' in $$props) $$invalidate(16, showcounter = $$props.showcounter);
+    if ('maxcharcount' in $$props) $$invalidate(7, maxcharcount = $$props.maxcharcount);
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty &
     /*error*/
-    4096) {
-      $$invalidate(10, isError = toBoolean(error));
+    8192) {
+      $$invalidate(11, isError = toBoolean(error));
     }
     if ($$self.$$.dirty &
     /*disabled*/
-    16384) {
-      $$invalidate(7, isDisabled = toBoolean(disabled));
+    32768) {
+      $$invalidate(8, isDisabled = toBoolean(disabled));
     }
     if ($$self.$$.dirty &
     /*readonly*/
-    8192) {
-      $$invalidate(9, isReadonly = toBoolean(readonly));
+    16384) {
+      $$invalidate(10, isReadonly = toBoolean(readonly));
     }
     if ($$self.$$.dirty &
     /*showcounter*/
-    32768) {
-      $$invalidate(8, showCounter = toBoolean(showcounter));
+    65536) {
+      $$invalidate(9, showCounter = toBoolean(showcounter));
     }
   };
-  return [name, value, placeholder, rows, testid, width, maxcharcount, isDisabled, showCounter, isReadonly, isError, onChange, error, readonly, disabled, showcounter];
+  return [name, value, placeholder, rows, testid, width, arialabel, maxcharcount, isDisabled, showCounter, isReadonly, isError, onChange, error, readonly, disabled, showcounter];
 }
 class TextArea extends SvelteElement {
@@ -11843,18 +11976,19 @@ class TextArea extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$7, create_fragment$8, safe_not_equal, {
+    }, instance$7, create_fragment$9, safe_not_equal, {
       name: 0,
       value: 1,
       placeholder: 2,
       rows: 3,
       testid: 4,
       width: 5,
-      error: 12,
-      readonly: 13,
-      disabled: 14,
-      showcounter: 15,
-      maxcharcount: 6
+      error: 13,
+      readonly: 14,
+      disabled: 15,
+      arialabel: 6,
+      showcounter: 16,
+      maxcharcount: 7
     }, null);
     if (options) {
@@ -11870,7 +12004,7 @@ class TextArea extends SvelteElement {
   }
   static get observedAttributes() {
-    return ["name", "value", "placeholder", "rows", "testid", "width", "error", "readonly", "disabled", "showcounter", "maxcharcount"];
+    return ["name", "value", "placeholder", "rows", "testid", "width", "error", "readonly", "disabled", "arialabel", "showcounter", "maxcharcount"];
   }
   get name() {
@@ -11940,7 +12074,7 @@ class TextArea extends SvelteElement {
   }
   get error() {
-    return this.$$.ctx[12];
+    return this.$$.ctx[13];
   }
   set error(error) {
@@ -11951,7 +12085,7 @@ class TextArea extends SvelteElement {
   }
   get readonly() {
-    return this.$$.ctx[13];
+    return this.$$.ctx[14];
   }
   set readonly(readonly) {
@@ -11962,7 +12096,7 @@ class TextArea extends SvelteElement {
   }
   get disabled() {
-    return this.$$.ctx[14];
+    return this.$$.ctx[15];
   }
   set disabled(disabled) {
@@ -11972,8 +12106,19 @@ class TextArea extends SvelteElement {
     flush();
   }
+  get arialabel() {
+    return this.$$.ctx[6];
+  }
+  set arialabel(arialabel) {
+    this.$$set({
+      arialabel
+    });
+    flush();
+  }
   get showcounter() {
-    return this.$$.ctx[15];
+    return this.$$.ctx[16];
   }
   set showcounter(showcounter) {
@@ -11984,7 +12129,7 @@ class TextArea extends SvelteElement {
   }
   get maxcharcount() {
-    return this.$$.ctx[6];
+    return this.$$.ctx[7];
   }
   set maxcharcount(maxcharcount) {
@@ -11999,7 +12144,7 @@ class TextArea extends SvelteElement {
 customElements.define("goa-textarea", TextArea);
 /* libs/web-components/src/components/focus-trap/FocusTrap.svelte generated by Svelte v3.49.0 */
-function create_fragment$7(ctx) {
+function create_fragment$8(ctx) {
   let div;
   return {
     c() {
@@ -12221,7 +12366,7 @@ class FocusTrap extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$6, create_fragment$7, safe_not_equal, {
+    }, instance$6, create_fragment$8, safe_not_equal, {
       active: 1
     }, null);
@@ -12276,10 +12421,10 @@ function create_if_block$2(ctx) {
   };
 }
-function create_fragment$6(ctx) {
+function create_fragment$7(ctx) {
   var _ctx$;
-  let footer;
+  let div4;
   let div0;
   let t0;
   let t1;
@@ -12297,7 +12442,7 @@ function create_fragment$6(ctx) {
     c() {
       var _ctx$2, _ctx$3;
-      footer = element("footer");
+      div4 = element("div");
       div0 = element("div");
       div0.innerHTML = `<slot name="nav"></slot>`;
       t0 = space();
@@ -12329,25 +12474,25 @@ function create_fragment$6(ctx) {
       toggle_class(div3, "with-meta-links",
       /*metaLinks*/
       (_ctx$3 = ctx[2]) === null || _ctx$3 === void 0 ? void 0 : _ctx$3.length);
-      attr(footer, "class", "app-footer");
+      attr(div4, "class", "app-footer");
     },
     m(target, anchor) {
-      insert(target, footer, anchor);
-      append(footer, div0);
-      append(footer, t0);
-      if (if_block) if_block.m(footer, null);
-      append(footer, t1);
-      append(footer, div3);
+      insert(target, div4, anchor);
+      append(div4, div0);
+      append(div4, t0);
+      if (if_block) if_block.m(div4, null);
+      append(div4, t1);
+      append(div4, div3);
       append(div3, div1);
       append(div3, t2);
       append(div3, div2);
       append(div2, a0);
       append(div2, t3);
       append(div2, a1);
-      /*footer_binding*/
+      /*div4_binding*/
-      ctx[4](footer);
+      ctx[4](div4);
     },
     p(ctx, [dirty]) {
@@ -12359,7 +12504,7 @@ function create_fragment$6(ctx) {
         if (if_block) ;else {
           if_block = create_if_block$2();
           if_block.c();
-          if_block.m(footer, t1);
+          if_block.m(div4, t1);
         }
       } else if (if_block) {
         if_block.d(1);
@@ -12391,9 +12536,9 @@ function create_fragment$6(ctx) {
     o: noop,
     d(detaching) {
-      if (detaching) detach(footer);
+      if (detaching) detach(div4);
       if (if_block) if_block.d();
-      /*footer_binding*/
+      /*div4_binding*/
       ctx[4](null);
     }
@@ -12414,25 +12559,25 @@ function instance$5($$self, $$props, $$invalidate) {
     $$invalidate(2, metaLinks = metaSlot.assignedElements());
   });
-  function footer_binding($$value) {
+  function div4_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       rootEl = $$value;
       $$invalidate(0, rootEl);
     });
   }
-  return [rootEl, navLinks, metaLinks, year, footer_binding];
+  return [rootEl, navLinks, metaLinks, year, div4_binding];
 }
 class Footer extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>.app-footer{background-color:var(--color-gray-100);padding:2rem;margin-top:2rem;border-top:2px solid var(--color-gray-200);border-bottom:1rem solid var(--goa-color-brand)}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
+    this.shadowRoot.innerHTML = `<style>.app-footer{background-color:var(--color-gray-100);padding:2rem;border-top:2px solid var(--color-gray-200);border-bottom:1rem solid var(--goa-color-brand)}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$5, create_fragment$6, safe_not_equal, {}, null);
+    }, instance$5, create_fragment$7, safe_not_equal, {}, null);
     if (options) {
       if (options.target) {
@@ -12542,7 +12687,7 @@ function create_each_block$1(ctx) {
   };
 }
-function create_fragment$5(ctx) {
+function create_fragment$6(ctx) {
   let section;
   let t0;
   let div;
@@ -12746,7 +12891,7 @@ class FooterNavSection extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$4, create_fragment$5, safe_not_equal, {
+    }, instance$4, create_fragment$6, safe_not_equal, {
       name: 0,
       maxcolumncount: 1
     }, null);
@@ -12848,7 +12993,7 @@ function create_each_block(ctx) {
   };
 }
-function create_fragment$4(ctx) {
+function create_fragment$5(ctx) {
   let section;
   let div;
   let t;
@@ -12971,7 +13116,7 @@ class FooterMetaSection extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$3, create_fragment$4, safe_not_equal, {}, null);
+    }, instance$3, create_fragment$5, safe_not_equal, {}, null);
     if (options) {
       if (options.target) {
@@ -12985,7 +13130,7 @@ class FooterMetaSection extends SvelteElement {
 customElements.define("goa-app-footer-meta-section", FooterMetaSection);
 /* libs/web-components/src/components/flex-column/FlexColumn.svelte generated by Svelte v3.49.0 */
-function create_fragment$3(ctx) {
+function create_fragment$4(ctx) {
   let div;
   let slot;
   return {
@@ -13054,7 +13199,7 @@ class FlexColumn extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$2, create_fragment$3, safe_not_equal, {
+    }, instance$2, create_fragment$4, safe_not_equal, {
       gap: 1
     }, null);
@@ -13088,6 +13233,64 @@ class FlexColumn extends SvelteElement {
 }
 customElements.define("goa-flex-col", FlexColumn);
+/* libs/web-components/src/layouts/FullScreenNavbarLayout.svelte generated by Svelte v3.49.0 */
+function create_fragment$3(ctx) {
+  let div;
+  return {
+    c() {
+      div = element("div");
+      div.innerHTML = `<header class="header"><slot name="header"></slot></header>
+  <nav class="nav"><slot name="nav"></slot></nav>
+  <main><slot></slot></main>
+  <footer class="footer"><slot name="footer"></slot></footer>`;
+      this.c = noop;
+      attr(div, "class", "page");
+    },
+    m(target, anchor) {
+      insert(target, div, anchor);
+    },
+    p: noop,
+    i: noop,
+    o: noop,
+    d(detaching) {
+      if (detaching) detach(div);
+    }
+  };
+}
+class FullScreenNavbarLayout extends SvelteElement {
+  constructor(options) {
+    super();
+    this.shadowRoot.innerHTML = `<style>.page{height:100vh;grid-template-columns:auto;grid-template-rows:min-content auto min-content;grid-template-areas:"header"
+      "content"
+      "nav"
+      "footer";display:grid;place-content:stretch stretch;gap:0 0}@media(min-width: 640px){.page{grid-template-columns:300px auto;grid-template-rows:min-content auto min-content;grid-template-areas:"header header"
+        "nav content"
+        "footer footer"}}.header{grid-area:header}.footer{grid-area:footer}main{grid-area:content;justify-self:stretch;padding:1rem}.nav{grid-area:nav;padding:1rem;background-color:var(--color-gray-100)}</style>`;
+    init(this, {
+      target: this.shadowRoot,
+      props: attribute_to_object(this.attributes),
+      customElement: true
+    }, null, create_fragment$3, safe_not_equal, {}, null);
+    if (options) {
+      if (options.target) {
+        insert(options.target, this, options.anchor);
+      }
+    }
+  }
+}
+customElements.define("goa-layout-full-nav", FullScreenNavbarLayout);
 /* libs/web-components/src/components/container/ContainerWrapper.test.svelte generated by Svelte v3.49.0 */
 function create_if_block_1(ctx) {
@@ -13563,44 +13766,48 @@ const GoABadge = ({
 };
 const GoAInfoBadge = ({
   content,
-  testId
+  testId,
+  icon
 }) => {
   return jsx(GoABadge, {
     type: "information",
-    icon: "information-circle",
+    icon: icon,
     content: content,
     testId: testId
   }, void 0);
 };
 const GoASuccessBadge = ({
   content,
-  testId
+  testId,
+  icon
 }) => {
   return jsx(GoABadge, {
     type: "success",
-    icon: "checkmark-circle",
+    icon: icon,
     content: content,
     testId: testId
   }, void 0);
 };
-const GoAWarningBadge = ({
+const GoAImportantBadge = ({
   content,
-  testId
+  testId,
+  icon
 }) => {
   return jsx(GoABadge, {
-    type: "warning",
-    icon: "warning",
+    type: "important",
+    icon: icon,
     content: content,
     testId: testId
   }, void 0);
 };
 const GoAEmergencyBadge = ({
   content,
-  testId
+  testId,
+  icon
 }) => {
   return jsx(GoABadge, {
     type: "emergency",
-    icon: "alert-circle",
+    icon: icon,
     content: content,
     testId: testId
   }, void 0);
@@ -13650,6 +13857,9 @@ const GoAInput = ({
   showCounter,
   maxCharCount,
   testId,
+  min,
+  max,
+  step,
   onTrailingIconClick,
   onChange
 }) => {
@@ -13696,6 +13906,9 @@ const GoAInput = ({
     "data-testid": testId,
     value: value,
     width: width,
+    min: min,
+    max: max,
+    step: step,
     showcounter: showCounter,
     maxcharcount: maxCharCount,
     handletrailingiconclick: !!onTrailingIconClick
@@ -13763,15 +13976,22 @@ const GoAInputMonth = props => {
     type: "month"
   }), void 0);
 };
-const GoAInputNumber = props => {
+const GoAInputNumber = _a => {
+  var {
+    min,
+    max,
+    value
+  } = _a,
+      props = __rest(_a, ["min", "max", "value"]);
   return jsx(GoAInput, Object.assign({}, props, {
-    value: props.value.toString(),
+    min: min === null || min === void 0 ? void 0 : min.toString(),
+    max: max === null || max === void 0 ? void 0 : max.toString(),
+    value: value.toString(),
     type: "number"
   }), void 0);
 };
-const GoAInputRange = _a => {
-  var props = __rest(_a, ["step"]);
+const GoAInputRange = props => {
   return jsx(GoAInput, Object.assign({}, props, {
     type: "range"
   }), void 0);
@@ -14162,12 +14382,12 @@ const GoAIconButton = ({
 };
 const GoAMicrositeHeader = ({
-  level,
+  type,
   version,
   feedbackUrl
 }) => {
   return jsx("goa-microsite-header", {
-    level: level,
+    type: type,
     version: version,
     feedbackurl: feedbackUrl
   }, void 0);
@@ -14432,4 +14652,4 @@ function GoADivider(props) {
   }, void 0);
 }
-export { GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADivider, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexCol, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPage, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoAWarningBadge };
+export { GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADivider, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexCol, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPage, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea };