@abgov/react-components 4.0.0-alpha.30 → 4.0.0-alpha.33

package/react-components.esm.js

@@ -2199,7 +2199,7 @@ function instance$w($$self, $$props, $$invalidate) {
 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: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,
+    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>`;
     init(this, {
       target: this.shadowRoot,
@@ -3957,7 +3957,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 +3992,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 +4026,7 @@ function instance$p($$self, $$props, $$invalidate) {
   let _colored;
 
   let {
-    variant = 'default'
+    variant = 'non-interactive'
   } = $$props;
   let {
     colored = "false"
@@ -4059,7 +4059,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 +4252,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 +4278,7 @@ function create_if_block$d(ctx) {
       if (!mounted) {
         dispose = listen(div, "click",
         /*closeMenu*/
-        ctx[17]);
+        ctx[18]);
         mounted = true;
       }
     },
@@ -4300,16 +4300,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 +4320,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 +4334,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 +4376,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*/
+      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*/
-      512 && li_data_testid_value !== (li_data_testid_value = `${
+      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));
       }
     },
 
@@ -4426,6 +4442,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 +4456,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 +4490,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 +4523,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 +4555,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 +4571,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 +4586,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 +4624,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 +4652,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 +4707,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 +4728,9 @@ function instance$o($$self, $$props, $$invalidate) {
   let {
     name
   } = $$props;
+  let {
+    arialabel = ""
+  } = $$props;
   let {
     value = ""
   } = $$props;
@@ -4755,7 +4789,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 +4808,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 +4833,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 +4848,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 +4871,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 +4907,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 +4934,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 +4942,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 +4994,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 +5019,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 +5033,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 +5056,7 @@ class Dropdown extends SvelteElement {
   }
 
   get leadingicon() {
-    return this.$$.ctx[1];
+    return this.$$.ctx[2];
   }
 
   set leadingicon(leadingicon) {
@@ -5020,7 +5067,7 @@ class Dropdown extends SvelteElement {
   }
 
   get maxheight() {
-    return this.$$.ctx[2];
+    return this.$$.ctx[3];
   }
 
   set maxheight(maxheight) {
@@ -5031,7 +5078,7 @@ class Dropdown extends SvelteElement {
   }
 
   get placeholder() {
-    return this.$$.ctx[3];
+    return this.$$.ctx[4];
   }
 
   set placeholder(placeholder) {
@@ -5042,7 +5089,7 @@ class Dropdown extends SvelteElement {
   }
 
   get testid() {
-    return this.$$.ctx[4];
+    return this.$$.ctx[5];
   }
 
   set testid(testid) {
@@ -5053,7 +5100,7 @@ class Dropdown extends SvelteElement {
   }
 
   get width() {
-    return this.$$.ctx[5];
+    return this.$$.ctx[6];
   }
 
   set width(width) {
@@ -5064,7 +5111,7 @@ class Dropdown extends SvelteElement {
   }
 
   get disabled() {
-    return this.$$.ctx[6];
+    return this.$$.ctx[7];
   }
 
   set disabled(disabled) {
@@ -5075,7 +5122,7 @@ class Dropdown extends SvelteElement {
   }
 
   get error() {
-    return this.$$.ctx[7];
+    return this.$$.ctx[8];
   }
 
   set error(error) {
@@ -5086,7 +5133,7 @@ class Dropdown extends SvelteElement {
   }
 
   get multiselect() {
-    return this.$$.ctx[20];
+    return this.$$.ctx[21];
   }
 
   set multiselect(multiselect) {
@@ -5325,7 +5372,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 +5380,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 +5409,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 +5418,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 +5625,7 @@ function instance$l($$self, $$props, $$invalidate) {
     error = ""
   } = $$props;
   let {
-    optional
+    optional = ""
   } = $$props;
 
   $$self.$$set = $$props => {
@@ -5602,7 +5649,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),
@@ -6412,7 +6459,7 @@ function instance$i($$self, $$props, $$invalidate) {
 class IconButton extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{display:flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}.goa-icon-button,.goa-icon-button *{box-sizing:border-box}.goa-icon-button{display:inline-flex;align-items:center;background:transparent;cursor:pointer;padding:0;border:none}.goa-icon-button--color{border-radius:0.5rem;padding:calc(var(--size) / 4)}.goa-icon-button--color{border-radius:0.5rem;color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.goa-icon-button--color:active,.goa-icon-button--nocolor:active{transform:scale(0.9);border:none}.goa-icon-button--color:hover{background-color:var(--goa-color-primary-light)}.goa-icon-button--color.goa-icon-button--inverted:hover{background-color:var(--goa-color-primary-dark)}.goa-icon-button:disabled{color:var(--color-gray-200);fill:var(--color-gray-200);transform:none;cursor:default}.goa-icon-button:disabled:hover{background-color:transparent}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}.goa-icon-button,.goa-icon-button *{box-sizing:border-box}.goa-icon-button{display:inline-flex;align-items:center;background:transparent;cursor:pointer;padding:0;border:none}.goa-icon-button--color{border-radius:0.5rem;padding:calc(var(--size) / 4)}.goa-icon-button--color{border-radius:0.5rem;color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.goa-icon-button--color:active,.goa-icon-button--nocolor:active{transform:scale(0.9);border:none}.goa-icon-button--color:hover{background-color:var(--goa-color-primary-light)}.goa-icon-button--color.goa-icon-button--inverted:hover{background-color:var(--goa-color-primary-dark)}.goa-icon-button:disabled{color:var(--color-gray-200);fill:var(--color-gray-200);transform:none;cursor:default}.goa-icon-button:disabled:hover{background-color:transparent}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -6568,7 +6615,7 @@ function create_if_block_5(ctx) {
     }
 
   };
-} // (93:4) {#if trailingicon && !handlesTrailingIconClick}
+} // (96:4) {#if trailingicon && !handlesTrailingIconClick}
 
 
 function create_if_block_4$1(ctx) {
@@ -6603,7 +6650,7 @@ function create_if_block_4$1(ctx) {
     }
 
   };
-} // (103:4) {#if trailingicon && handlesTrailingIconClick}
+} // (106:4) {#if trailingicon && handlesTrailingIconClick}
 
 
 function create_if_block_3$3(ctx) {
@@ -6616,7 +6663,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[13]);
       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 +6684,10 @@ function create_if_block_3$3(ctx) {
     p(ctx, dirty) {
       if (dirty &
       /*isDisabled*/
-      4096) {
+      8192) {
         set_custom_element_data(goa_icon_button, "disabled",
         /*isDisabled*/
-        ctx[12]);
+        ctx[13]);
       }
 
       if (dirty &
@@ -6659,7 +6706,7 @@ function create_if_block_3$3(ctx) {
     }
 
   };
-} // (117:2) {#if showCounter}
+} // (120:2) {#if showCounter}
 
 
 function create_if_block$a(ctx) {
@@ -6668,7 +6715,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[10] > 0) return create_if_block_1$6;
     if (
     /*value*/
     ctx[0].length > 0) return create_if_block_2$5;
@@ -6710,7 +6757,7 @@ function create_if_block$a(ctx) {
     }
 
   };
-} // (122:31) 
+} // (125:31) 
 
 
 function create_if_block_2$5(ctx) {
@@ -6744,7 +6791,7 @@ function create_if_block_2$5(ctx) {
     }
 
   };
-} // (118:4) {#if maxcharcount > 0}
+} // (121:4) {#if maxcharcount > 0}
 
 
 function create_if_block_1$6(ctx) {
@@ -6755,7 +6802,7 @@ function create_if_block_1$6(ctx) {
   let t0;
   let t1_value = `/${
   /*maxcharcount*/
-  ctx[9]}` + "";
+  ctx[10]}` + "";
   let t1;
   return {
     c() {
@@ -6767,7 +6814,7 @@ function create_if_block_1$6(ctx) {
       /*value*/
       ctx[0].length >
       /*maxcharcount*/
-      ctx[9]);
+      ctx[10]);
     },
 
     m(target, anchor) {
@@ -6784,18 +6831,18 @@ function create_if_block_1$6(ctx) {
       ctx[0].length + "")) set_data(t0, t0_value);
       if (dirty &
       /*maxcharcount*/
-      512 && t1_value !== (t1_value = `/${
+      1024 && t1_value !== (t1_value = `/${
       /*maxcharcount*/
-      ctx[9]}` + "")) set_data(t1, t1_value);
+      ctx[10]}` + "")) set_data(t1, t1_value);
 
       if (dirty &
       /*value, maxcharcount*/
-      513) {
+      1025) {
         toggle_class(div, "counter-error",
         /*value*/
         ctx[0].length >
         /*maxcharcount*/
-        ctx[9]);
+        ctx[10]);
       }
     },
 
@@ -6813,6 +6860,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 +6875,15 @@ function create_fragment$j(ctx) {
   /*trailingicon*/
   ctx[5] && !
   /*handlesTrailingIconClick*/
-  ctx[15] && create_if_block_4$1(ctx);
+  ctx[16] && create_if_block_4$1(ctx);
   let if_block2 =
   /*trailingicon*/
   ctx[5] &&
   /*handlesTrailingIconClick*/
-  ctx[15] && create_if_block_3$3(ctx);
+  ctx[16] && create_if_block_3$3(ctx);
   let if_block3 =
   /*showCounter*/
-  ctx[11] && create_if_block$a(ctx);
+  ctx[12] && create_if_block$a(ctx);
   return {
     c() {
       div1 = element("div");
@@ -6858,10 +6906,10 @@ function create_fragment$j(ctx) {
       ctx[5] ? "-0.5rem" : "0"}`);
       input.readOnly =
       /*isReadonly*/
-      ctx[14];
+      ctx[15];
       input.disabled =
       /*isDisabled*/
-      ctx[12];
+      ctx[13];
       attr(input, "data-testid",
       /*testid*/
       ctx[7]);
@@ -6877,11 +6925,17 @@ function create_fragment$j(ctx) {
       attr(input, "placeholder",
       /*placeholder*/
       ctx[3]);
+      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[13] ? "goa-input--disabled" : ""}
       variant--${
       /*variant*/
       ctx[6]}
@@ -6891,7 +6945,7 @@ function create_fragment$j(ctx) {
     `);
       toggle_class(div0, "error",
       /*isError*/
-      ctx[13]);
+      ctx[14]);
       attr(div1, "class", "container");
       attr(div1, "style", div1_style_value = `
     --width: ${
@@ -6908,7 +6962,7 @@ function create_fragment$j(ctx) {
       append(div0, input);
       /*input_binding*/
 
-      ctx[24](input);
+      ctx[25](input);
       append(div0, t1);
       if (if_block1) if_block1.m(div0, null);
       append(div0, t2);
@@ -6919,9 +6973,9 @@ function create_fragment$j(ctx) {
       if (!mounted) {
         dispose = [listen(input, "keyup",
         /*onKeyUp*/
-        ctx[16]), listen(input, "change",
+        ctx[17]), listen(input, "change",
         /*onKeyUp*/
-        ctx[16])];
+        ctx[17])];
         mounted = true;
       }
     },
@@ -6960,18 +7014,18 @@ function create_fragment$j(ctx) {
 
       if (dirty &
       /*isReadonly*/
-      16384) {
+      32768) {
         input.readOnly =
         /*isReadonly*/
-        ctx[14];
+        ctx[15];
       }
 
       if (dirty &
       /*isDisabled*/
-      4096) {
+      8192) {
         input.disabled =
         /*isDisabled*/
-        ctx[12];
+        ctx[13];
       }
 
       if (dirty &
@@ -7016,11 +7070,21 @@ function create_fragment$j(ctx) {
         ctx[3]);
       }
 
+      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[16]) {
         if (if_block1) {
           if_block1.p(ctx, dirty);
         } else {
@@ -7037,7 +7101,7 @@ function create_fragment$j(ctx) {
       /*trailingicon*/
       ctx[5] &&
       /*handlesTrailingIconClick*/
-      ctx[15]) {
+      ctx[16]) {
         if (if_block2) {
           if_block2.p(ctx, dirty);
         } else {
@@ -7052,11 +7116,11 @@ function create_fragment$j(ctx) {
 
       if (dirty &
       /*isDisabled, variant, type*/
-      4162 && div0_class_value !== (div0_class_value = `
+      8258 && div0_class_value !== (div0_class_value = `
       goa-input
       ${
       /*isDisabled*/
-      ctx[12] ? "goa-input--disabled" : ""}
+      ctx[13] ? "goa-input--disabled" : ""}
       variant--${
       /*variant*/
       ctx[6]}
@@ -7069,15 +7133,15 @@ function create_fragment$j(ctx) {
 
       if (dirty &
       /*isDisabled, variant, type, isError*/
-      12354) {
+      24642) {
         toggle_class(div0, "error",
         /*isError*/
-        ctx[13]);
+        ctx[14]);
       }
 
       if (
       /*showCounter*/
-      ctx[11]) {
+      ctx[12]) {
         if (if_block3) {
           if_block3.p(ctx, dirty);
         } else {
@@ -7109,7 +7173,7 @@ function create_fragment$j(ctx) {
       if (if_block0) if_block0.d();
       /*input_binding*/
 
-      ctx[24](null);
+      ctx[25](null);
       if (if_block1) if_block1.d();
       if (if_block2) if_block2.d();
       if (if_block3) if_block3.d();
@@ -7175,6 +7239,9 @@ function instance$h($$self, $$props, $$invalidate) {
   let {
     width = "30ch"
   } = $$props;
+  let {
+    arialabel = ""
+  } = $$props;
   let {
     showcounter = "false"
   } = $$props;
@@ -7199,7 +7266,7 @@ function instance$h($$self, $$props, $$invalidate) {
   function input_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       inputEl = $$value;
-      $$invalidate(10, inputEl);
+      $$invalidate(11, inputEl);
     });
   }
 
@@ -7211,57 +7278,58 @@ 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(18, disabled = $$props.disabled);
+    if ('handletrailingiconclick' in $$props) $$invalidate(19, handletrailingiconclick = $$props.handletrailingiconclick);
+    if ('focused' in $$props) $$invalidate(20, focused = $$props.focused);
+    if ('readonly' in $$props) $$invalidate(21, readonly = $$props.readonly);
+    if ('error' in $$props) $$invalidate(22, 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 ('showcounter' in $$props) $$invalidate(23, showcounter = $$props.showcounter);
+    if ('maxcharcount' in $$props) $$invalidate(10, maxcharcount = $$props.maxcharcount);
   };
 
   $$self.$$.update = () => {
     if ($$self.$$.dirty &
     /*handletrailingiconclick*/
-    262144) {
-      $$invalidate(15, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
+    524288) {
+      $$invalidate(16, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
     }
 
     if ($$self.$$.dirty &
     /*focused*/
-    524288) {
-      $$invalidate(23, isFocused = toBoolean(focused));
+    1048576) {
+      $$invalidate(24, isFocused = toBoolean(focused));
     }
 
     if ($$self.$$.dirty &
     /*readonly*/
-    1048576) {
-      $$invalidate(14, isReadonly = toBoolean(readonly));
+    2097152) {
+      $$invalidate(15, isReadonly = toBoolean(readonly));
     }
 
     if ($$self.$$.dirty &
     /*error*/
-    2097152) {
-      $$invalidate(13, isError = toBoolean(error));
+    4194304) {
+      $$invalidate(14, isError = toBoolean(error));
     }
 
     if ($$self.$$.dirty &
     /*disabled*/
-    131072) {
-      $$invalidate(12, isDisabled = toBoolean(disabled));
+    262144) {
+      $$invalidate(13, isDisabled = toBoolean(disabled));
     }
 
     if ($$self.$$.dirty &
     /*showcounter*/
-    4194304) {
-      $$invalidate(11, showCounter = toBoolean(showcounter));
+    8388608) {
+      $$invalidate(12, showCounter = toBoolean(showcounter));
     }
 
     if ($$self.$$.dirty &
     /*isFocused, inputEl*/
-    8389632) {
+    16779264) {
       if (isFocused && inputEl) {
         setTimeout(() => inputEl.focus(), 1);
       }
@@ -7269,7 +7337,7 @@ function instance$h($$self, $$props, $$invalidate) {
 
     if ($$self.$$.dirty &
     /*inputEl, type*/
-    1026) {
+    2050) {
       if (inputEl && type === "search") {
         inputEl.addEventListener("search", e => {
           onKeyUp(e);
@@ -7278,7 +7346,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, maxcharcount, inputEl, showCounter, isDisabled, isError, isReadonly, handlesTrailingIconClick, onKeyUp, disabled, handletrailingiconclick, focused, readonly, error, showcounter, isFocused, input_binding];
 }
 
 class Input extends SvelteElement {
@@ -7298,15 +7366,16 @@ class Input extends SvelteElement {
       leadingicon: 4,
       trailingicon: 5,
       variant: 6,
-      disabled: 17,
-      handletrailingiconclick: 18,
-      focused: 19,
-      readonly: 20,
-      error: 21,
+      disabled: 18,
+      handletrailingiconclick: 19,
+      focused: 20,
+      readonly: 21,
+      error: 22,
       testid: 7,
       width: 8,
-      showcounter: 22,
-      maxcharcount: 9
+      arialabel: 9,
+      showcounter: 23,
+      maxcharcount: 10
     }, null);
 
     if (options) {
@@ -7322,7 +7391,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", "showcounter", "maxcharcount"];
   }
 
   get type() {
@@ -7403,7 +7472,7 @@ class Input extends SvelteElement {
   }
 
   get disabled() {
-    return this.$$.ctx[17];
+    return this.$$.ctx[18];
   }
 
   set disabled(disabled) {
@@ -7414,7 +7483,7 @@ class Input extends SvelteElement {
   }
 
   get handletrailingiconclick() {
-    return this.$$.ctx[18];
+    return this.$$.ctx[19];
   }
 
   set handletrailingiconclick(handletrailingiconclick) {
@@ -7425,7 +7494,7 @@ class Input extends SvelteElement {
   }
 
   get focused() {
-    return this.$$.ctx[19];
+    return this.$$.ctx[20];
   }
 
   set focused(focused) {
@@ -7436,7 +7505,7 @@ class Input extends SvelteElement {
   }
 
   get readonly() {
-    return this.$$.ctx[20];
+    return this.$$.ctx[21];
   }
 
   set readonly(readonly) {
@@ -7447,7 +7516,7 @@ class Input extends SvelteElement {
   }
 
   get error() {
-    return this.$$.ctx[21];
+    return this.$$.ctx[22];
   }
 
   set error(error) {
@@ -7479,8 +7548,19 @@ class Input extends SvelteElement {
     flush();
   }
 
+  get arialabel() {
+    return this.$$.ctx[9];
+  }
+
+  set arialabel(arialabel) {
+    this.$$set({
+      arialabel
+    });
+    flush();
+  }
+
   get showcounter() {
-    return this.$$.ctx[22];
+    return this.$$.ctx[23];
   }
 
   set showcounter(showcounter) {
@@ -7491,7 +7571,7 @@ class Input extends SvelteElement {
   }
 
   get maxcharcount() {
-    return this.$$.ctx[9];
+    return this.$$.ctx[10];
   }
 
   set maxcharcount(maxcharcount) {
@@ -8452,53 +8532,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 +8905,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 +9023,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 +9282,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 +9482,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 +9578,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 +9633,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 +9693,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 +9793,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,
@@ -10027,7 +10060,7 @@ 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(
@@ -10164,7 +10197,7 @@ class MicrositeHeader extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$a, create_fragment$b, safe_not_equal, {
+    }, instance$a, create_fragment$c, safe_not_equal, {
       level: 0,
       version: 1,
       feedbackurl: 2
@@ -10680,7 +10713,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 +10826,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 +11208,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 +11384,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 +11462,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 +11504,7 @@ function create_if_block$3(ctx) {
     }
 
   };
-} // (61:31) 
+} // (63:31) 
 
 
 function create_if_block_2(ctx) {
@@ -11505,7 +11538,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 +11549,7 @@ function create_if_block_1$1(ctx) {
   let t0;
   let t1_value = `/${
   /*maxcharcount*/
-  ctx[6]}` + "";
+  ctx[7]}` + "";
   let t1;
   return {
     c() {
@@ -11528,7 +11561,7 @@ function create_if_block_1$1(ctx) {
       /*value*/
       ctx[1].length >
       /*maxcharcount*/
-      ctx[6]);
+      ctx[7]);
     },
 
     m(target, anchor) {
@@ -11545,18 +11578,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 +11600,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 +11630,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 +11665,7 @@ function create_fragment$8(ctx) {
       if (!mounted) {
         dispose = listen(textarea, "keyup",
         /*onChange*/
-        ctx[11]);
+        ctx[12]);
         mounted = true;
       }
     },
@@ -11664,20 +11703,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 +11739,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 +11816,9 @@ function instance$7($$self, $$props, $$invalidate) {
   let {
     disabled = "false"
   } = $$props;
+  let {
+    arialabel = ""
+  } = $$props;
   let {
     showcounter = "false"
   } = $$props;
@@ -11798,40 +11850,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 +11896,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 +11924,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 +11994,7 @@ class TextArea extends SvelteElement {
   }
 
   get error() {
-    return this.$$.ctx[12];
+    return this.$$.ctx[13];
   }
 
   set error(error) {
@@ -11951,7 +12005,7 @@ class TextArea extends SvelteElement {
   }
 
   get readonly() {
-    return this.$$.ctx[13];
+    return this.$$.ctx[14];
   }
 
   set readonly(readonly) {
@@ -11962,7 +12016,7 @@ class TextArea extends SvelteElement {
   }
 
   get disabled() {
-    return this.$$.ctx[14];
+    return this.$$.ctx[15];
   }
 
   set disabled(disabled) {
@@ -11972,8 +12026,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 +12049,7 @@ class TextArea extends SvelteElement {
   }
 
   get maxcharcount() {
-    return this.$$.ctx[6];
+    return this.$$.ctx[7];
   }
 
   set maxcharcount(maxcharcount) {
@@ -11999,7 +12064,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 +12286,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 +12341,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 +12362,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 +12394,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 +12424,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 +12456,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 +12479,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 +12607,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 +12811,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 +12913,7 @@ function create_each_block(ctx) {
   };
 }
 
-function create_fragment$4(ctx) {
+function create_fragment$5(ctx) {
   let section;
   let div;
   let t;
@@ -12971,7 +13036,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 +13050,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 +13119,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 +13153,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) {
@@ -13985,12 +14108,14 @@ const GoAContainer = ({
   headingSize,
   title,
   colored: _colored = false,
+  padding,
   children,
   actions,
   variant: _variant = 'default'
 }) => {
   return jsxs("goa-container", Object.assign({
     variant: _variant,
+    padding: padding,
     headingsize: headingSize,
     colored: _colored
   }, {