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

package/react-components.umd.js

@@ -4013,7 +4013,7 @@
 	      ctx[1]);
 	      attr(div2, "class", "content");
 	      attr(div3, "class", div3_class_value = `
-    goa-container 
+    goa-container
     goa-container--${
       /*variant*/
       ctx[0]}
@@ -4048,7 +4048,7 @@
 	      if (dirty &
 	      /*variant, padding*/
 	      5 && div3_class_value !== (div3_class_value = `
-    goa-container 
+    goa-container
     goa-container--${
       /*variant*/
       ctx[0]}
@@ -4082,7 +4082,7 @@
 	  let _colored;
 
 	  let {
-	    variant = 'default'
+	    variant = 'non-interactive'
 	  } = $$props;
 	  let {
 	    colored = "false"
@@ -4115,7 +4115,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 +4291,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 +4317,7 @@
 	      if (!mounted) {
 	        dispose = listen(div, "click",
 	        /*closeMenu*/
-	        ctx[17]);
+	        ctx[18]);
 	        mounted = true;
 	      }
 	    },
@@ -4339,16 +4339,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 +4359,9 @@
 	  function click_handler() {
 	    return (
 	      /*click_handler*/
-	      ctx[21](
+	      ctx[22](
 	      /*option*/
-	      ctx[35])
+	      ctx[36])
 	    );
 	  }
 
@@ -4372,25 +4373,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 +4415,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*/
+	      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));
 	      }
 	    },
 
@@ -4465,6 +4481,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 +4495,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 +4529,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 +4562,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 +4594,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 +4610,7 @@
 	    p(ctx, dirty) {
 	      if (
 	      /*isMenuVisible*/
-	      ctx[11]) {
+	      ctx[12]) {
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
@@ -4604,34 +4625,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 +4663,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 +4691,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 +4746,10 @@
 	      /*ul_binding*/
 
 
-	      ctx[22](null);
+	      ctx[23](null);
 	      /*div1_binding*/
 
-	      ctx[23](null);
+	      ctx[24](null);
 	      mounted = false;
 	      dispose();
 	    }
@@ -4734,7 +4765,7 @@
 	      return;
 	    }
 
-	    $$invalidate(11, isMenuVisible = true);
+	    $$invalidate(12, isMenuVisible = true);
 	    return _call(tick, function () {
 	      // hide menu on blur
 	      menuEl.addEventListener("blur", closeMenu);
@@ -4752,6 +4783,9 @@
 	  let {
 	    name
 	  } = $$props;
+	  let {
+	    arialabel = ""
+	  } = $$props;
 	  let {
 	    value = ""
 	  } = $$props;
@@ -4810,7 +4844,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 +4864,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 +4889,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 +4912,7 @@
 	        }
 	      }));
 	    } else {
-	      $$invalidate(8, _values = [val]);
+	      $$invalidate(9, _values = [val]);
 	      el.dispatchEvent(new CustomEvent("_change", {
 	        composed: true,
 	        detail: {
@@ -4914,16 +4948,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 +4975,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 +4983,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 +5035,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 +5060,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 +5074,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 +5097,7 @@
 	  }
 
 	  get leadingicon() {
-	    return this.$$.ctx[1];
+	    return this.$$.ctx[2];
 	  }
 
 	  set leadingicon(leadingicon) {
@@ -5061,7 +5108,7 @@
 	  }
 
 	  get maxheight() {
-	    return this.$$.ctx[2];
+	    return this.$$.ctx[3];
 	  }
 
 	  set maxheight(maxheight) {
@@ -5072,7 +5119,7 @@
 	  }
 
 	  get placeholder() {
-	    return this.$$.ctx[3];
+	    return this.$$.ctx[4];
 	  }
 
 	  set placeholder(placeholder) {
@@ -5083,7 +5130,7 @@
 	  }
 
 	  get testid() {
-	    return this.$$.ctx[4];
+	    return this.$$.ctx[5];
 	  }
 
 	  set testid(testid) {
@@ -5094,7 +5141,7 @@
 	  }
 
 	  get width() {
-	    return this.$$.ctx[5];
+	    return this.$$.ctx[6];
 	  }
 
 	  set width(width) {
@@ -5105,7 +5152,7 @@
 	  }
 
 	  get disabled() {
-	    return this.$$.ctx[6];
+	    return this.$$.ctx[7];
 	  }
 
 	  set disabled(disabled) {
@@ -5116,7 +5163,7 @@
 	  }
 
 	  get error() {
-	    return this.$$.ctx[7];
+	    return this.$$.ctx[8];
 	  }
 
 	  set error(error) {
@@ -5127,7 +5174,7 @@
 	  }
 
 	  get multiselect() {
-	    return this.$$.ctx[20];
+	    return this.$$.ctx[21];
 	  }
 
 	  set multiselect(multiselect) {
@@ -5368,7 +5415,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 +5423,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 +5452,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 +5461,7 @@
 	    },
 
 	    d(detaching) {
-	      if (detaching) detach(label_1);
+	      if (detaching) detach(div);
 	      if (if_block) if_block.d();
 	    }
 
@@ -5621,7 +5668,7 @@
 	    error = ""
 	  } = $$props;
 	  let {
-	    optional
+	    optional = ""
 	  } = $$props;
 
 	  $$self.$$set = $$props => {
@@ -5645,7 +5692,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 +6658,7 @@
 	    }
 
 	  };
-	} // (93:4) {#if trailingicon && !handlesTrailingIconClick}
+	} // (96:4) {#if trailingicon && !handlesTrailingIconClick}
 
 
 	function create_if_block_4$1(ctx) {
@@ -6646,7 +6693,7 @@
 	    }
 
 	  };
-	} // (103:4) {#if trailingicon && handlesTrailingIconClick}
+	} // (106:4) {#if trailingicon && handlesTrailingIconClick}
 
 
 	function create_if_block_3$3(ctx) {
@@ -6659,7 +6706,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[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",
@@ -6680,10 +6727,10 @@
 	    p(ctx, dirty) {
 	      if (dirty &
 	      /*isDisabled*/
-	      4096) {
+	      8192) {
 	        set_custom_element_data(goa_icon_button, "disabled",
 	        /*isDisabled*/
-	        ctx[12]);
+	        ctx[13]);
 	      }
 
 	      if (dirty &
@@ -6702,7 +6749,7 @@
 	    }
 
 	  };
-	} // (117:2) {#if showCounter}
+	} // (120:2) {#if showCounter}
 
 
 	function create_if_block$a(ctx) {
@@ -6711,7 +6758,7 @@
 	  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;
@@ -6753,7 +6800,7 @@
 	    }
 
 	  };
-	} // (122:31) 
+	} // (125:31) 
 
 
 	function create_if_block_2$5(ctx) {
@@ -6787,7 +6834,7 @@
 	    }
 
 	  };
-	} // (118:4) {#if maxcharcount > 0}
+	} // (121:4) {#if maxcharcount > 0}
 
 
 	function create_if_block_1$6(ctx) {
@@ -6798,7 +6845,7 @@
 	  let t0;
 	  let t1_value = `/${
   /*maxcharcount*/
-  ctx[9]}` + "";
+  ctx[10]}` + "";
 	  let t1;
 	  return {
 	    c() {
@@ -6810,7 +6857,7 @@
 	      /*value*/
 	      ctx[0].length >
 	      /*maxcharcount*/
-	      ctx[9]);
+	      ctx[10]);
 	    },
 
 	    m(target, anchor) {
@@ -6827,18 +6874,18 @@
 	      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]);
 	      }
 	    },
 
@@ -6856,6 +6903,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 +6918,15 @@
 	  /*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");
@@ -6901,10 +6949,10 @@
       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]);
@@ -6920,11 +6968,17 @@
 	      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]}
@@ -6934,7 +6988,7 @@
     `);
 	      toggle_class(div0, "error",
 	      /*isError*/
-	      ctx[13]);
+	      ctx[14]);
 	      attr(div1, "class", "container");
 	      attr(div1, "style", div1_style_value = `
     --width: ${
@@ -6951,7 +7005,7 @@
 	      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);
@@ -6962,9 +7016,9 @@
 	      if (!mounted) {
 	        dispose = [listen(input, "keyup",
 	        /*onKeyUp*/
-	        ctx[16]), listen(input, "change",
+	        ctx[17]), listen(input, "change",
 	        /*onKeyUp*/
-	        ctx[16])];
+	        ctx[17])];
 	        mounted = true;
 	      }
 	    },
@@ -7003,18 +7057,18 @@
 
 	      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 &
@@ -7059,11 +7113,21 @@
 	        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 {
@@ -7080,7 +7144,7 @@
 	      /*trailingicon*/
 	      ctx[5] &&
 	      /*handlesTrailingIconClick*/
-	      ctx[15]) {
+	      ctx[16]) {
 	        if (if_block2) {
 	          if_block2.p(ctx, dirty);
 	        } else {
@@ -7095,11 +7159,11 @@
 
 	      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]}
@@ -7112,15 +7176,15 @@
 
 	      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 {
@@ -7152,7 +7216,7 @@
 	      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();
@@ -7218,6 +7282,9 @@
 	  let {
 	    width = "30ch"
 	  } = $$props;
+	  let {
+	    arialabel = ""
+	  } = $$props;
 	  let {
 	    showcounter = "false"
 	  } = $$props;
@@ -7242,7 +7309,7 @@
 	  function input_binding($$value) {
 	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 	      inputEl = $$value;
-	      $$invalidate(10, inputEl);
+	      $$invalidate(11, inputEl);
 	    });
 	  }
 
@@ -7254,57 +7321,58 @@
 	    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);
 	      }
@@ -7312,7 +7380,7 @@
 
 	    if ($$self.$$.dirty &
 	    /*inputEl, type*/
-	    1026) {
+	    2050) {
 	      if (inputEl && type === "search") {
 	        inputEl.addEventListener("search", e => {
 	          onKeyUp(e);
@@ -7321,7 +7389,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, maxcharcount, inputEl, showCounter, isDisabled, isError, isReadonly, handlesTrailingIconClick, onKeyUp, disabled, handletrailingiconclick, focused, readonly, error, showcounter, isFocused, input_binding];
 	}
 
 	class Input extends SvelteElement {
@@ -7341,15 +7409,16 @@
 	      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) {
@@ -7365,7 +7434,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", "showcounter", "maxcharcount"];
 	  }
 
 	  get type() {
@@ -7446,7 +7515,7 @@
 	  }
 
 	  get disabled() {
-	    return this.$$.ctx[17];
+	    return this.$$.ctx[18];
 	  }
 
 	  set disabled(disabled) {
@@ -7457,7 +7526,7 @@
 	  }
 
 	  get handletrailingiconclick() {
-	    return this.$$.ctx[18];
+	    return this.$$.ctx[19];
 	  }
 
 	  set handletrailingiconclick(handletrailingiconclick) {
@@ -7468,7 +7537,7 @@
 	  }
 
 	  get focused() {
-	    return this.$$.ctx[19];
+	    return this.$$.ctx[20];
 	  }
 
 	  set focused(focused) {
@@ -7479,7 +7548,7 @@
 	  }
 
 	  get readonly() {
-	    return this.$$.ctx[20];
+	    return this.$$.ctx[21];
 	  }
 
 	  set readonly(readonly) {
@@ -7490,7 +7559,7 @@
 	  }
 
 	  get error() {
-	    return this.$$.ctx[21];
+	    return this.$$.ctx[22];
 	  }
 
 	  set error(error) {
@@ -7522,8 +7591,19 @@
 	    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) {
@@ -7534,7 +7614,7 @@
 	  }
 
 	  get maxcharcount() {
-	    return this.$$.ctx[9];
+	    return this.$$.ctx[10];
 	  }
 
 	  set maxcharcount(maxcharcount) {
@@ -8495,53 +8575,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 +8948,7 @@
 	  };
 	}
 
-	function create_fragment$f(ctx) {
+	function create_fragment$g(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
@@ -9034,7 +9067,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 +9326,7 @@
 	  };
 	}
 
-	function create_fragment$e(ctx) {
+	function create_fragment$f(ctx) {
 	  let div;
 	  let slot;
 	  let t;
@@ -9493,7 +9526,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 +9622,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 +9679,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 +9739,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 +9839,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,
@@ -10073,7 +10106,7 @@
 	  };
 	}
 
-	function create_fragment$b(ctx) {
+	function create_fragment$c(ctx) {
 	  let header;
 	  let t0;
 	  let show_if = ["alpha", "beta"].includes(
@@ -10210,7 +10243,7 @@
 	      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
@@ -10726,7 +10759,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 +10872,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 +11254,7 @@
 	  };
 	}
 
-	function create_fragment$9(ctx) {
+	function create_fragment$a(ctx) {
 	  let if_block_anchor;
 	  let if_block =
 	  /*ready*/
@@ -11397,7 +11430,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 +11508,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 +11550,7 @@
 	    }
 
 	  };
-	} // (61:31) 
+	} // (63:31) 
 
 
 	function create_if_block_2(ctx) {
@@ -11551,7 +11584,7 @@
 	    }
 
 	  };
-	} // (55:4) {#if maxcharcount > 0}
+	} // (57:4) {#if maxcharcount > 0}
 
 
 	function create_if_block_1$1(ctx) {
@@ -11562,7 +11595,7 @@
 	  let t0;
 	  let t1_value = `/${
   /*maxcharcount*/
-  ctx[6]}` + "";
+  ctx[7]}` + "";
 	  let t1;
 	  return {
 	    c() {
@@ -11574,7 +11607,7 @@
 	      /*value*/
 	      ctx[1].length >
 	      /*maxcharcount*/
-	      ctx[6]);
+	      ctx[7]);
 	    },
 
 	    m(target, anchor) {
@@ -11591,18 +11624,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 +11646,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 +11676,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 +11711,7 @@
 	      if (!mounted) {
 	        dispose = listen(textarea, "keyup",
 	        /*onChange*/
-	        ctx[11]);
+	        ctx[12]);
 	        mounted = true;
 	      }
 	    },
@@ -11710,20 +11749,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 +11785,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 +11862,9 @@
 	  let {
 	    disabled = "false"
 	  } = $$props;
+	  let {
+	    arialabel = ""
+	  } = $$props;
 	  let {
 	    showcounter = "false"
 	  } = $$props;
@@ -11844,40 +11896,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 +11942,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 +11970,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 +12040,7 @@
 	  }
 
 	  get error() {
-	    return this.$$.ctx[12];
+	    return this.$$.ctx[13];
 	  }
 
 	  set error(error) {
@@ -11997,7 +12051,7 @@
 	  }
 
 	  get readonly() {
-	    return this.$$.ctx[13];
+	    return this.$$.ctx[14];
 	  }
 
 	  set readonly(readonly) {
@@ -12008,7 +12062,7 @@
 	  }
 
 	  get disabled() {
-	    return this.$$.ctx[14];
+	    return this.$$.ctx[15];
 	  }
 
 	  set disabled(disabled) {
@@ -12018,8 +12072,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 +12095,7 @@
 	  }
 
 	  get maxcharcount() {
-	    return this.$$.ctx[6];
+	    return this.$$.ctx[7];
 	  }
 
 	  set maxcharcount(maxcharcount) {
@@ -12045,7 +12110,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 +12332,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 +12387,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 +12408,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 +12440,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 +12470,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 +12502,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 +12526,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 +12654,7 @@
 	  };
 	}
 
-	function create_fragment$5(ctx) {
+	function create_fragment$6(ctx) {
 	  let section;
 	  let t0;
 	  let div;
@@ -12794,7 +12859,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 +12961,7 @@
 	  };
 	}
 
-	function create_fragment$4(ctx) {
+	function create_fragment$5(ctx) {
 	  let section;
 	  let div;
 	  let t;
@@ -13019,7 +13084,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 +13098,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 +13167,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 +13201,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) {