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.umd.js CHANGED Viewed

@@ -1509,7 +1509,7 @@
 	    }
 	  };
-	} // (41:2) {#if showIcon}
+	} // (40:2) {#if showIcon}
 	function create_if_block_1$b(ctx) {
@@ -1542,7 +1542,7 @@
 	    }
 	  };
-	} // (46:2) {#if content}
+	} // (45:2) {#if content}
 	function create_if_block$i(ctx) {
@@ -1730,10 +1730,9 @@
 	    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"
@@ -1747,7 +1746,7 @@
 	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),
@@ -2172,7 +2171,7 @@
 	  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);
@@ -2256,7 +2255,7 @@
 	  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),
@@ -4013,7 +4012,7 @@
 	      ctx[1]);
 	      attr(div2, "class", "content");
 	      attr(div3, "class", div3_class_value = `
-    goa-container
+    goa-container
     goa-container--${
       /*variant*/
       ctx[0]}
@@ -4048,7 +4047,7 @@
 	      if (dirty &
 	      /*variant, padding*/
 	      5 && div3_class_value !== (div3_class_value = `
-    goa-container
+    goa-container
     goa-container--${
       /*variant*/
       ctx[0]}
@@ -4082,7 +4081,7 @@
 	  let _colored;
 	  let {
-	    variant = 'default'
+	    variant = 'non-interactive'
 	  } = $$props;
 	  let {
 	    colored = "false"
@@ -4115,7 +4114,7 @@
 	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),
@@ -4291,10 +4290,10 @@
 	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) {
@@ -4317,7 +4316,7 @@
 	      if (!mounted) {
 	        dispose = listen(div, "click",
 	        /*closeMenu*/
-	        ctx[17]);
+	        ctx[18]);
 	        mounted = true;
 	      }
 	    },
@@ -4339,16 +4338,17 @@
 	    }
 	  };
-	} // (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;
@@ -4358,9 +4358,9 @@
 	  function click_handler() {
 	    return (
 	      /*click_handler*/
-	      ctx[21](
+	      ctx[22](
 	      /*option*/
-	      ctx[35])
+	      ctx[36])
 	    );
 	  }
@@ -4372,25 +4372,30 @@
 	      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;
 	    },
@@ -4409,44 +4414,54 @@
 	      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[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[35].value}-dropdown-item`)) {
+      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));
 	      }
 	    },
@@ -4465,6 +4480,7 @@
 	  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;
@@ -4478,14 +4494,14 @@
 	  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);
@@ -4512,27 +4528,31 @@
 	      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`);
@@ -4541,19 +4561,19 @@
 	      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) {
@@ -4573,15 +4593,15 @@
 	      /*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;
 	      }
 	    },
@@ -4589,7 +4609,7 @@
 	    p(ctx, dirty) {
 	      if (
 	      /*isMenuVisible*/
-	      ctx[11]) {
+	      ctx[12]) {
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
@@ -4604,34 +4624,34 @@
 	      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] &
@@ -4642,12 +4662,22 @@
 	        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] &
@@ -4660,44 +4690,44 @@
 	      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);
 	      }
 	    },
@@ -4715,10 +4745,10 @@
 	      /*ul_binding*/
-	      ctx[22](null);
+	      ctx[23](null);
 	      /*div1_binding*/
-	      ctx[23](null);
+	      ctx[24](null);
 	      mounted = false;
 	      dispose();
 	    }
@@ -4734,7 +4764,7 @@
 	      return;
 	    }
-	    $$invalidate(11, isMenuVisible = true);
+	    $$invalidate(12, isMenuVisible = true);
 	    return _call(tick, function () {
 	      // hide menu on blur
 	      menuEl.addEventListener("blur", closeMenu);
@@ -4752,6 +4782,9 @@
 	  let {
 	    name
 	  } = $$props;
+	  let {
+	    arialabel = ""
+	  } = $$props;
 	  let {
 	    value = ""
 	  } = $$props;
@@ -4810,7 +4843,7 @@
 	    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();
 	    return _await();
 	  }));
@@ -4830,17 +4863,17 @@
 	            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();
@@ -4855,17 +4888,17 @@
 	    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);
@@ -4878,7 +4911,7 @@
 	        }
 	      }));
 	    } else {
-	      $$invalidate(8, _values = [val]);
+	      $$invalidate(9, _values = [val]);
 	      el.dispatchEvent(new CustomEvent("_change", {
 	        composed: true,
 	        detail: {
@@ -4914,16 +4947,16 @@
 	    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;
@@ -4941,7 +4974,7 @@
 	  }
 	  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);
@@ -4949,45 +4982,46 @@
 	  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 {
@@ -5000,15 +5034,16 @@
 	      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) {
@@ -5024,7 +5059,7 @@
 	  }
 	  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() {
@@ -5038,8 +5073,19 @@
 	    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) {
@@ -5050,7 +5096,7 @@
 	  }
 	  get leadingicon() {
-	    return this.$$.ctx[1];
+	    return this.$$.ctx[2];
 	  }
 	  set leadingicon(leadingicon) {
@@ -5061,7 +5107,7 @@
 	  }
 	  get maxheight() {
-	    return this.$$.ctx[2];
+	    return this.$$.ctx[3];
 	  }
 	  set maxheight(maxheight) {
@@ -5072,7 +5118,7 @@
 	  }
 	  get placeholder() {
-	    return this.$$.ctx[3];
+	    return this.$$.ctx[4];
 	  }
 	  set placeholder(placeholder) {
@@ -5083,7 +5129,7 @@
 	  }
 	  get testid() {
-	    return this.$$.ctx[4];
+	    return this.$$.ctx[5];
 	  }
 	  set testid(testid) {
@@ -5094,7 +5140,7 @@
 	  }
 	  get width() {
-	    return this.$$.ctx[5];
+	    return this.$$.ctx[6];
 	  }
 	  set width(width) {
@@ -5105,7 +5151,7 @@
 	  }
 	  get disabled() {
-	    return this.$$.ctx[6];
+	    return this.$$.ctx[7];
 	  }
 	  set disabled(disabled) {
@@ -5116,7 +5162,7 @@
 	  }
 	  get error() {
-	    return this.$$.ctx[7];
+	    return this.$$.ctx[8];
 	  }
 	  set error(error) {
@@ -5127,7 +5173,7 @@
 	  }
 	  get multiselect() {
-	    return this.$$.ctx[20];
+	    return this.$$.ctx[21];
 	  }
 	  set multiselect(multiselect) {
@@ -5368,7 +5414,7 @@
 	/* 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 =
@@ -5376,20 +5422,20 @@
 	  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) {
@@ -5405,7 +5451,7 @@
 	        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);
@@ -5414,7 +5460,7 @@
 	    },
 	    d(detaching) {
-	      if (detaching) detach(label_1);
+	      if (detaching) detach(div);
 	      if (if_block) if_block.d();
 	    }
@@ -5621,7 +5667,7 @@
 	    error = ""
 	  } = $$props;
 	  let {
-	    optional
+	    optional = ""
 	  } = $$props;
 	  $$self.$$set = $$props => {
@@ -5645,7 +5691,7 @@
 	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),
@@ -6611,7 +6657,7 @@
 	    }
 	  };
-	} // (93:4) {#if trailingicon && !handlesTrailingIconClick}
+	} // (102:4) {#if trailingicon && !handlesTrailingIconClick}
 	function create_if_block_4$1(ctx) {
@@ -6646,7 +6692,7 @@
 	    }
 	  };
-	} // (103:4) {#if trailingicon && handlesTrailingIconClick}
+	} // (112:4) {#if trailingicon && handlesTrailingIconClick}
 	function create_if_block_3$3(ctx) {
@@ -6659,7 +6705,7 @@
 	      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",
@@ -6680,10 +6726,10 @@
 	    p(ctx, dirty) {
 	      if (dirty &
 	      /*isDisabled*/
-	      4096) {
+	      65536) {
 	        set_custom_element_data(goa_icon_button, "disabled",
 	        /*isDisabled*/
-	        ctx[12]);
+	        ctx[16]);
 	      }
 	      if (dirty &
@@ -6702,7 +6748,7 @@
 	    }
 	  };
-	} // (117:2) {#if showCounter}
+	} // (126:2) {#if showCounter}
 	function create_if_block$a(ctx) {
@@ -6711,7 +6757,7 @@
 	  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;
@@ -6753,7 +6799,7 @@
 	    }
 	  };
-	} // (122:31)
+	} // (131:31)
 	function create_if_block_2$5(ctx) {
@@ -6787,7 +6833,7 @@
 	    }
 	  };
-	} // (118:4) {#if maxcharcount > 0}
+	} // (127:4) {#if maxcharcount > 0}
 	function create_if_block_1$6(ctx) {
@@ -6798,7 +6844,7 @@
 	  let t0;
 	  let t1_value = `/${
   /*maxcharcount*/
-  ctx[9]}` + "";
+  ctx[13]}` + "";
 	  let t1;
 	  return {
 	    c() {
@@ -6810,7 +6856,7 @@
 	      /*value*/
 	      ctx[0].length >
 	      /*maxcharcount*/
-	      ctx[9]);
+	      ctx[13]);
 	    },
 	    m(target, anchor) {
@@ -6827,18 +6873,18 @@
 	      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]);
 	      }
 	    },
@@ -6856,6 +6902,7 @@
 	  let input;
 	  let input_class_value;
 	  let input_style_value;
+	  let input_aria_label_value;
 	  let t1;
 	  let t2;
 	  let div0_class_value;
@@ -6870,15 +6917,15 @@
 	  /*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");
@@ -6901,10 +6948,10 @@
       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]);
@@ -6920,11 +6967,26 @@
 	      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]}
@@ -6934,7 +6996,7 @@
     `);
 	      toggle_class(div0, "error",
 	      /*isError*/
-	      ctx[13]);
+	      ctx[17]);
 	      attr(div1, "class", "container");
 	      attr(div1, "style", div1_style_value = `
     --width: ${
@@ -6951,7 +7013,7 @@
 	      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);
@@ -6962,9 +7024,9 @@
 	      if (!mounted) {
 	        dispose = [listen(input, "keyup",
 	        /*onKeyUp*/
-	        ctx[16]), listen(input, "change",
+	        ctx[20]), listen(input, "change",
 	        /*onKeyUp*/
-	        ctx[16])];
+	        ctx[20])];
 	        mounted = true;
 	      }
 	    },
@@ -7003,18 +7065,18 @@
 	      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 &
@@ -7059,11 +7121,45 @@
 	        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 {
@@ -7080,7 +7176,7 @@
 	      /*trailingicon*/
 	      ctx[5] &&
 	      /*handlesTrailingIconClick*/
-	      ctx[15]) {
+	      ctx[19]) {
 	        if (if_block2) {
 	          if_block2.p(ctx, dirty);
 	        } else {
@@ -7095,11 +7191,11 @@
 	      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]}
@@ -7112,15 +7208,15 @@
 	      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 {
@@ -7152,7 +7248,7 @@
 	      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();
@@ -7218,6 +7314,18 @@
 	  let {
 	    width = "30ch"
 	  } = $$props;
+	  let {
+	    arialabel = ""
+	  } = $$props;
+	  let {
+	    min = ""
+	  } = $$props;
+	  let {
+	    max = ""
+	  } = $$props;
+	  let {
+	    step
+	  } = $$props;
 	  let {
 	    showcounter = "false"
 	  } = $$props;
@@ -7242,7 +7350,7 @@
 	  function input_binding($$value) {
 	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 	      inputEl = $$value;
-	      $$invalidate(10, inputEl);
+	      $$invalidate(14, inputEl);
 	    });
 	  }
@@ -7254,57 +7362,61 @@
 	    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);
 	      }
@@ -7312,7 +7424,7 @@
 	    if ($$self.$$.dirty &
 	    /*inputEl, type*/
-	    1026) {
+	    16386) {
 	      if (inputEl && type === "search") {
 	        inputEl.addEventListener("search", e => {
 	          onKeyUp(e);
@@ -7321,7 +7433,7 @@
 	    }
 	  };
-	  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 {
@@ -7341,15 +7453,19 @@
 	      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) {
@@ -7365,7 +7481,7 @@
 	  }
 	  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() {
@@ -7446,7 +7562,7 @@
 	  }
 	  get disabled() {
-	    return this.$$.ctx[17];
+	    return this.$$.ctx[21];
 	  }
 	  set disabled(disabled) {
@@ -7457,7 +7573,7 @@
 	  }
 	  get handletrailingiconclick() {
-	    return this.$$.ctx[18];
+	    return this.$$.ctx[22];
 	  }
 	  set handletrailingiconclick(handletrailingiconclick) {
@@ -7468,7 +7584,7 @@
 	  }
 	  get focused() {
-	    return this.$$.ctx[19];
+	    return this.$$.ctx[23];
 	  }
 	  set focused(focused) {
@@ -7479,7 +7595,7 @@
 	  }
 	  get readonly() {
-	    return this.$$.ctx[20];
+	    return this.$$.ctx[24];
 	  }
 	  set readonly(readonly) {
@@ -7490,7 +7606,7 @@
 	  }
 	  get error() {
-	    return this.$$.ctx[21];
+	    return this.$$.ctx[25];
 	  }
 	  set error(error) {
@@ -7522,8 +7638,52 @@
 	    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) {
@@ -7534,7 +7694,7 @@
 	  }
 	  get maxcharcount() {
-	    return this.$$.ctx[9];
+	    return this.$$.ctx[13];
 	  }
 	  set maxcharcount(maxcharcount) {
@@ -8495,53 +8655,6 @@
 	}
 	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) {
@@ -8915,7 +9028,7 @@
 	  };
 	}
-	function create_fragment$f(ctx) {
+	function create_fragment$g(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
@@ -9034,7 +9147,7 @@
 	      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,
@@ -9293,7 +9406,7 @@
 	  };
 	}
-	function create_fragment$e(ctx) {
+	function create_fragment$f(ctx) {
 	  let div;
 	  let slot;
 	  let t;
@@ -9493,7 +9606,7 @@
 	      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,
@@ -9589,7 +9702,7 @@
 	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;
@@ -9646,7 +9759,7 @@
 	      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
@@ -9706,7 +9819,7 @@
 	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;
@@ -9806,7 +9919,7 @@
 	      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,
@@ -9890,7 +10003,7 @@
 	      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");
 	    },
@@ -9907,13 +10020,13 @@
 	    }
 	  };
-	} // (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;
@@ -9936,9 +10049,9 @@
 	      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");
@@ -9958,15 +10071,15 @@
 	    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);
 	      }
@@ -10073,17 +10186,17 @@
 	  };
 	}
-	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 =
@@ -10117,7 +10230,7 @@
 	    p(ctx, [dirty]) {
 	      if (
-	      /*level*/
+	      /*type*/
 	      ctx[0] === "live") {
 	        if (if_block0) ;else {
 	          if_block0 = create_if_block_3();
@@ -10130,9 +10243,9 @@
 	      }
 	      if (dirty &
-	      /*level*/
+	      /*type*/
 	      1) show_if = ["alpha", "beta"].includes(
-	      /*level*/
+	      /*type*/
 	      ctx[0]);
 	      if (show_if) {
@@ -10184,7 +10297,7 @@
 	function instance$a($$self, $$props, $$invalidate) {
 	  let {
-	    level
+	    type
 	  } = $$props;
 	  let {
 	    version
@@ -10194,24 +10307,24 @@
 	  } = $$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);
@@ -10229,16 +10342,16 @@
 	  }
 	  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();
 	  }
@@ -10726,7 +10839,7 @@
 	  };
 	}
-	function create_fragment$a(ctx) {
+	function create_fragment$b(ctx) {
 	  let current_block_type_index;
 	  let if_block;
 	  let if_block_anchor;
@@ -10839,7 +10952,7 @@
 	      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,
@@ -11221,7 +11334,7 @@
 	  };
 	}
-	function create_fragment$9(ctx) {
+	function create_fragment$a(ctx) {
 	  let if_block_anchor;
 	  let if_block =
 	  /*ready*/
@@ -11397,7 +11510,7 @@
 	      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,
@@ -11475,7 +11588,7 @@
 	  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;
@@ -11517,7 +11630,7 @@
 	    }
 	  };
-	} // (61:31)
+	} // (63:31)
 	function create_if_block_2(ctx) {
@@ -11551,7 +11664,7 @@
 	    }
 	  };
-	} // (55:4) {#if maxcharcount > 0}
+	} // (57:4) {#if maxcharcount > 0}
 	function create_if_block_1$1(ctx) {
@@ -11562,7 +11675,7 @@
 	  let t0;
 	  let t1_value = `/${
   /*maxcharcount*/
-  ctx[6]}` + "";
+  ctx[7]}` + "";
 	  let t1;
 	  return {
 	    c() {
@@ -11574,7 +11687,7 @@
 	      /*value*/
 	      ctx[1].length >
 	      /*maxcharcount*/
-	      ctx[6]);
+	      ctx[7]);
 	    },
 	    m(target, anchor) {
@@ -11591,18 +11704,18 @@
 	      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]);
 	      }
 	    },
@@ -11613,16 +11726,17 @@
 	  };
 	}
-	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");
@@ -11642,19 +11756,24 @@
 	      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: ${
@@ -11672,7 +11791,7 @@
 	      if (!mounted) {
 	        dispose = listen(textarea, "keyup",
 	        /*onChange*/
-	        ctx[11]);
+	        ctx[12]);
 	        mounted = true;
 	      }
 	    },
@@ -11710,20 +11829,30 @@
 	        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 &
@@ -11736,15 +11865,15 @@
 	      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 {
@@ -11813,6 +11942,9 @@
 	  let {
 	    disabled = "false"
 	  } = $$props;
+	  let {
+	    arialabel = ""
+	  } = $$props;
 	  let {
 	    showcounter = "false"
 	  } = $$props;
@@ -11844,40 +11976,41 @@
 	    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 {
@@ -11889,18 +12022,19 @@
 	      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) {
@@ -11916,7 +12050,7 @@
 	  }
 	  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() {
@@ -11986,7 +12120,7 @@
 	  }
 	  get error() {
-	    return this.$$.ctx[12];
+	    return this.$$.ctx[13];
 	  }
 	  set error(error) {
@@ -11997,7 +12131,7 @@
 	  }
 	  get readonly() {
-	    return this.$$.ctx[13];
+	    return this.$$.ctx[14];
 	  }
 	  set readonly(readonly) {
@@ -12008,7 +12142,7 @@
 	  }
 	  get disabled() {
-	    return this.$$.ctx[14];
+	    return this.$$.ctx[15];
 	  }
 	  set disabled(disabled) {
@@ -12018,8 +12152,19 @@
 	    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) {
@@ -12030,7 +12175,7 @@
 	  }
 	  get maxcharcount() {
-	    return this.$$.ctx[6];
+	    return this.$$.ctx[7];
 	  }
 	  set maxcharcount(maxcharcount) {
@@ -12045,7 +12190,7 @@
 	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() {
@@ -12267,7 +12412,7 @@
 	      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);
@@ -12322,10 +12467,10 @@
 	  };
 	}
-	function create_fragment$6(ctx) {
+	function create_fragment$7(ctx) {
 	  var _ctx$;
-	  let footer;
+	  let div4;
 	  let div0;
 	  let t0;
 	  let t1;
@@ -12343,7 +12488,7 @@
 	    c() {
 	      var _ctx$2, _ctx$3;
-	      footer = element("footer");
+	      div4 = element("div");
 	      div0 = element("div");
 	      div0.innerHTML = `<slot name="nav"></slot>`;
 	      t0 = space();
@@ -12375,25 +12520,25 @@
 	      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]) {
@@ -12405,7 +12550,7 @@
 	        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);
@@ -12437,9 +12582,9 @@
 	    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);
 	    }
@@ -12461,25 +12606,25 @@
 	    });
 	  });
-	  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) {
@@ -12589,7 +12734,7 @@
 	  };
 	}
-	function create_fragment$5(ctx) {
+	function create_fragment$6(ctx) {
 	  let section;
 	  let t0;
 	  let div;
@@ -12794,7 +12939,7 @@
 	      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);
@@ -12896,7 +13041,7 @@
 	  };
 	}
-	function create_fragment$4(ctx) {
+	function create_fragment$5(ctx) {
 	  let section;
 	  let div;
 	  let t;
@@ -13019,7 +13164,7 @@
 	      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) {
@@ -13033,7 +13178,7 @@
 	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 {
@@ -13102,7 +13247,7 @@
 	      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);
@@ -13136,6 +13281,64 @@
 	}
 	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) {
@@ -13610,40 +13813,44 @@
 	};
 	var GoAInfoBadge = function GoAInfoBadge(_a) {
 	  var content = _a.content,
-	      testId = _a.testId;
+	      testId = _a.testId,
+	      icon = _a.icon;
 	  return jsxRuntime.jsx(GoABadge, {
 	    type: "information",
-	    icon: "information-circle",
+	    icon: icon,
 	    content: content,
 	    testId: testId
 	  }, void 0);
 	};
 	var GoASuccessBadge = function GoASuccessBadge(_a) {
 	  var content = _a.content,
-	      testId = _a.testId;
+	      testId = _a.testId,
+	      icon = _a.icon;
 	  return jsxRuntime.jsx(GoABadge, {
 	    type: "success",
-	    icon: "checkmark-circle",
+	    icon: icon,
 	    content: content,
 	    testId: testId
 	  }, void 0);
 	};
-	var GoAWarningBadge = function GoAWarningBadge(_a) {
+	var GoAImportantBadge = function GoAImportantBadge(_a) {
 	  var content = _a.content,
-	      testId = _a.testId;
+	      testId = _a.testId,
+	      icon = _a.icon;
 	  return jsxRuntime.jsx(GoABadge, {
-	    type: "warning",
-	    icon: "warning",
+	    type: "important",
+	    icon: icon,
 	    content: content,
 	    testId: testId
 	  }, void 0);
 	};
 	var GoAEmergencyBadge = function GoAEmergencyBadge(_a) {
 	  var content = _a.content,
-	      testId = _a.testId;
+	      testId = _a.testId,
+	      icon = _a.icon;
 	  return jsxRuntime.jsx(GoABadge, {
 	    type: "emergency",
-	    icon: "alert-circle",
+	    icon: icon,
 	    content: content,
 	    testId: testId
 	  }, void 0);
@@ -13705,6 +13912,9 @@
 	      showCounter = _a.showCounter,
 	      maxCharCount = _a.maxCharCount,
 	      testId = _a.testId,
+	      min = _a.min,
+	      max = _a.max,
+	      step = _a.step,
 	      onTrailingIconClick = _a.onTrailingIconClick,
 	      onChange = _a.onChange;
 	  var ref = react.useRef(null);
@@ -13749,6 +13959,9 @@
 	    "data-testid": testId,
 	    value: value,
 	    width: width,
+	    min: min,
+	    max: max,
+	    step: step,
 	    showcounter: showCounter,
 	    maxcharcount: maxCharCount,
 	    handletrailingiconclick: !!onTrailingIconClick
@@ -13818,16 +14031,20 @@
 	    type: "month"
 	  }), void 0);
 	};
-	var GoAInputNumber = function GoAInputNumber(props) {
+	var GoAInputNumber = function GoAInputNumber(_a) {
+	  var min = _a.min,
+	      max = _a.max,
+	      value = _a.value,
+	      props = __rest(_a, ["min", "max", "value"]);
 	  return jsxRuntime.jsx(GoAInput, __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);
 	};
-	var GoAInputRange = function GoAInputRange(_a) {
-	  _a.step;
-	      var props = __rest(_a, ["step"]);
+	var GoAInputRange = function GoAInputRange(props) {
 	  return jsxRuntime.jsx(GoAInput, __assign({}, props, {
 	    type: "range"
 	  }), void 0);
@@ -14217,11 +14434,11 @@
 	};
 	var GoAMicrositeHeader = function GoAMicrositeHeader(_a) {
-	  var level = _a.level,
+	  var type = _a.type,
 	      version = _a.version,
 	      feedbackUrl = _a.feedbackUrl;
 	  return jsxRuntime.jsx("goa-microsite-header", {
-	    level: level,
+	    type: type,
 	    version: version,
 	    feedbackurl: feedbackUrl
 	  }, void 0);
@@ -14503,6 +14720,7 @@
 	exports.GoAHeroBannerActions = GoAHeroBannerActions;
 	exports.GoAIcon = GoAIcon;
 	exports.GoAIconButton = GoAIconButton;
+	exports.GoAImportantBadge = GoAImportantBadge;
 	exports.GoAInfoBadge = GoAInfoBadge;
 	exports.GoAInput = GoAInput;
 	exports.GoAInputDate = GoAInputDate;
@@ -14529,7 +14747,6 @@
 	exports.GoASpinner = GoASpinner;
 	exports.GoASuccessBadge = GoASuccessBadge;
 	exports.GoATextArea = GoATextArea;
-	exports.GoAWarningBadge = GoAWarningBadge;
 	Object.defineProperty(exports, '__esModule', { value: true });