@abgov/react-components 4.0.0-alpha.52 → 4.0.0-alpha.54

package/react-components.esm.js

@@ -1756,7 +1756,7 @@ customElements.define("goa-button-group", ButtonGroup);
 
 function create_else_block$2(ctx) {
   let t0;
-  let div;
+  let slot;
   let t1;
   let if_block1_anchor;
   let if_block0 =
@@ -1769,18 +1769,17 @@ function create_else_block$2(ctx) {
     c() {
       if (if_block0) if_block0.c();
       t0 = space();
-      div = element("div");
-      div.innerHTML = `<slot></slot>`;
+      slot = element("slot");
       t1 = space();
       if (if_block1) if_block1.c();
       if_block1_anchor = empty();
-      attr(div, "class", "text");
+      attr(slot, "class", "text");
     },
 
     m(target, anchor) {
       if (if_block0) if_block0.m(target, anchor);
       insert(target, t0, anchor);
-      insert(target, div, anchor);
+      insert(target, slot, anchor);
       insert(target, t1, anchor);
       if (if_block1) if_block1.m(target, anchor);
       insert(target, if_block1_anchor, anchor);
@@ -1821,7 +1820,7 @@ function create_else_block$2(ctx) {
     d(detaching) {
       if (if_block0) if_block0.d(detaching);
       if (detaching) detach(t0);
-      if (detaching) detach(div);
+      if (detaching) detach(slot);
       if (detaching) detach(t1);
       if (if_block1) if_block1.d(detaching);
       if (detaching) detach(if_block1_anchor);
@@ -1832,23 +1831,22 @@ function create_else_block$2(ctx) {
 
 
 function create_if_block$h(ctx) {
-  let div;
+  let slot;
   let t;
   let goa_icon;
   return {
     c() {
-      div = element("div");
-      div.innerHTML = `<slot></slot>`;
+      slot = element("slot");
       t = space();
       goa_icon = element("goa-icon");
-      attr(div, "class", "text");
+      attr(slot, "class", "text");
       set_custom_element_data(goa_icon, "id", "trailing-icon");
       set_custom_element_data(goa_icon, "type", "arrow-forward");
       set_custom_element_data(goa_icon, "inverted", "true");
     },
 
     m(target, anchor) {
-      insert(target, div, anchor);
+      insert(target, slot, anchor);
       insert(target, t, anchor);
       insert(target, goa_icon, anchor);
     },
@@ -1856,13 +1854,13 @@ function create_if_block$h(ctx) {
     p: noop,
 
     d(detaching) {
-      if (detaching) detach(div);
+      if (detaching) detach(slot);
       if (detaching) detach(t);
       if (detaching) detach(goa_icon);
     }
 
   };
-} // (59:4) {#if leadingicon}
+} // (57:4) {#if leadingicon}
 
 
 function create_if_block_2$7(ctx) {
@@ -1906,7 +1904,7 @@ function create_if_block_2$7(ctx) {
     }
 
   };
-} // (65:4) {#if trailingicon}
+} // (61:4) {#if trailingicon}
 
 
 function create_if_block_1$a(ctx) {
@@ -2171,7 +2169,7 @@ class Button extends SvelteElement {
   constructor(options) {
     super();
     this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@media(max-width: 480px){:host{width:100%}button{width:100%}}button{display:inline-flex;box-sizing:border-box;border-radius:0.25rem;border:2px solid var(--goa-color-interactive);box-sizing:border-box;cursor:pointer;font-family:var(--font-family);font-size:var(--fs-lg);font-weight:400;height:var(--button-height);letter-spacing:0.5px;line-height:100%;padding:0 0.75rem;gap:0.5rem;align-items:center;justify-content:center;transition:transform 0.1s ease-in-out, background-color 0.2s ease-in-out,
-      border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--fs-base)}button.start{height:var(--button-height-tall);font-weight:var(--fw-bold)}button.start,button.submit,button.primary{border:2px solid var(--goa-color-interactive);background:var(--goa-color-interactive);color:var(--goa-color-text-light)}button.start:hover,button.submit:hover,button.primary:hover{border-color:var(--goa-color-interactive--hover);background:var(--goa-color-interactive--hover)}button.start:focus,button.start:active,button.submit:focus,button.submit: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}.submit.destructive,.primary.destructive{color:var(--color-white);background:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency)}.submit.destructive:hover,.primary.destructive:hover{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.submit.destructive:focus,.primary.destructive:focus,.primary.destructive:active{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.secondary.destructive{color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);background:var(--color-white)}.secondary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.secondary.destructive:focus,.secondary.destructive:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.destructive{color:var(--goa-color-status-emergency);border-color:var(--color-gray-200);background:var(--color-white)}.tertiary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}</style>`;
+      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.submit,button.primary{border:2px solid var(--goa-color-interactive);background-color:var(--goa-color-interactive);color:var(--goa-color-text-light)}button.start:hover,button.submit:hover,button.primary:hover{border-color:var(--goa-color-interactive--hover);background-color:var(--goa-color-interactive--hover)}button.start:focus,button.start:active,button.submit:focus,button.submit: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-color:var(--goa-color-interactive--active);outline:none}button.secondary{border:2px solid var(--goa-color-interactive);background-color: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-color: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-color:var(--color-gray-100);outline:none}button.tertiary{border:1px solid transparent;background-color: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-color:var(--color-gray-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--color-gray-100);background-color:var(--color-gray-100);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.submit.destructive,.primary.destructive{color:var(--color-white);background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency)}.submit.destructive:hover,.primary.destructive:hover{background-color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.submit.destructive:focus,.primary.destructive:focus,.primary.destructive:active{background-color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.secondary.destructive{color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);background-color:var(--color-white)}.secondary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background-color:var(--color-white)}.secondary.destructive:focus,.secondary.destructive:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background-color:var(--color-white)}.tertiary.destructive{color:var(--goa-color-status-emergency);border-color:var(--color-gray-200);background-color:var(--color-white)}.tertiary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background-color:var(--color-white)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background-color:var(--color-white)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -4811,18 +4809,18 @@ function create_if_block$c(ctx) {
     }
 
   };
-} // (234:4) {#each options as option, index}
+} // (239:4) {#each options as option, index}
 
 
 function create_each_block$4(ctx) {
   let li;
-  let t0_value = (
+  let t_value = (
   /*option*/
   ctx[39].label ||
   /*option*/
   ctx[39].value) + "";
-  let t0;
-  let t1;
+  let t;
+  let li_id_value;
   let li_aria_label_value;
   let li_data_testid_value;
   let li_data_index_value;
@@ -4842,13 +4840,16 @@ function create_each_block$4(ctx) {
   return {
     c() {
       li = element("li");
-      t0 = text(t0_value);
-      t1 = space();
+      t = text(t_value);
+      attr(li, "id", li_id_value =
+      /*option*/
+      ctx[39].label);
       attr(li, "aria-label", li_aria_label_value =
       /*option*/
       ctx[39].label ||
       /*option*/
       ctx[39].value);
+      attr(li, "role", "option");
       attr(li, "data-testid", li_data_testid_value = `${
       /*option*/
       ctx[39].value}-dropdown-item`);
@@ -4872,8 +4873,7 @@ function create_each_block$4(ctx) {
 
     m(target, anchor) {
       insert(target, li, anchor);
-      append(li, t0);
-      append(li, t1);
+      append(li, t);
 
       if (!mounted) {
         dispose = listen(li, "click", click_handler);
@@ -4885,11 +4885,19 @@ function create_each_block$4(ctx) {
       ctx = new_ctx;
       if (dirty[0] &
       /*options*/
-      1024 && t0_value !== (t0_value = (
+      1024 && t_value !== (t_value = (
       /*option*/
       ctx[39].label ||
       /*option*/
-      ctx[39].value) + "")) set_data(t0, t0_value);
+      ctx[39].value) + "")) set_data(t, t_value);
+
+      if (dirty[0] &
+      /*options*/
+      1024 && li_id_value !== (li_id_value =
+      /*option*/
+      ctx[39].label)) {
+        attr(li, "id", li_id_value);
+      }
 
       if (dirty[0] &
       /*options*/
@@ -4949,8 +4957,8 @@ function create_fragment$q(ctx) {
   let div0_data_testid_value;
   let t1;
   let ul;
-  let slot;
   let t2;
+  let slot;
   let ul_style_value;
   let div1_style_value;
   let mounted;
@@ -4976,13 +4984,13 @@ function create_fragment$q(ctx) {
       goa_input = element("goa-input");
       t1 = space();
       ul = element("ul");
-      slot = element("slot");
-      t2 = space();
 
       for (let i = 0; i < each_blocks.length; i += 1) {
         each_blocks[i].c();
       }
 
+      t2 = space();
+      slot = element("slot");
       this.c = noop;
       set_custom_element_data(goa_input, "error",
       /*error*/
@@ -5000,11 +5008,16 @@ function create_fragment$q(ctx) {
       set_custom_element_data(goa_input, "id", goa_input_id_value = `${
       /*name*/
       ctx[0]}-dropdown-input`);
+      set_custom_element_data(goa_input, "role", "combobox");
       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, "aria-expanded",
+      /*isMenuVisible*/
+      ctx[12]);
+      set_custom_element_data(goa_input, "aria-controls", "menu");
       set_custom_element_data(goa_input, "readonly", "");
       set_custom_element_data(goa_input, "trailingicon", "chevron-down");
       set_custom_element_data(goa_input, "type", "text");
@@ -5014,6 +5027,11 @@ function create_fragment$q(ctx) {
       attr(div0, "data-testid", div0_data_testid_value = `${
       /*name*/
       ctx[0]}-dropdown`);
+      attr(ul, "id", "menu");
+      attr(ul, "role", "listbox");
+      attr(ul, "aria-activedescendant",
+      /*selectedLabel*/
+      ctx[11]);
       attr(ul, "data-testid", "dropdown-menu");
       attr(ul, "tabindex", "0");
       attr(ul, "class", "goa-dropdown-list");
@@ -5042,14 +5060,14 @@ function create_fragment$q(ctx) {
       append(div0, goa_input);
       append(div1, t1);
       append(div1, ul);
-      append(ul, slot);
-      append(ul, t2);
 
       for (let i = 0; i < each_blocks.length; i += 1) {
         each_blocks[i].m(ul, null);
       }
-      /*ul_binding*/
 
+      append(ul, t2);
+      append(ul, slot);
+      /*ul_binding*/
 
       ctx[23](ul);
       /*div1_binding*/
@@ -5130,6 +5148,14 @@ function create_fragment$q(ctx) {
         set_custom_element_data(goa_input, "aria-label", goa_input_aria_label_value);
       }
 
+      if (dirty[0] &
+      /*isMenuVisible*/
+      4096) {
+        set_custom_element_data(goa_input, "aria-expanded",
+        /*isMenuVisible*/
+        ctx[12]);
+      }
+
       if (dirty[0] &
       /*selectedLabel*/
       2048) {
@@ -5162,7 +5188,7 @@ function create_fragment$q(ctx) {
           } else {
             each_blocks[i] = create_each_block$4(child_ctx);
             each_blocks[i].c();
-            each_blocks[i].m(ul, null);
+            each_blocks[i].m(ul, t2);
           }
         }
 
@@ -5173,6 +5199,14 @@ function create_fragment$q(ctx) {
         each_blocks.length = each_value.length;
       }
 
+      if (dirty[0] &
+      /*selectedLabel*/
+      2048) {
+        attr(ul, "aria-activedescendant",
+        /*selectedLabel*/
+        ctx[11]);
+      }
+
       if (dirty[0] &
       /*maxheight*/
       8 && ul_style_value !== (ul_style_value = `overflow-y: auto; max-height: ${
@@ -8218,7 +8252,7 @@ function create_if_block_7(ctx) {
       div = element("div");
       t = text(
       /*prefix*/
-      ctx[13]);
+      ctx[14]);
       attr(div, "class", "prefix");
     },
 
@@ -8228,11 +8262,11 @@ function create_if_block_7(ctx) {
     },
 
     p(ctx, dirty) {
-      if (dirty &
+      if (dirty[0] &
       /*prefix*/
-      8192) set_data(t,
+      16384) set_data(t,
       /*prefix*/
-      ctx[13]);
+      ctx[14]);
     },
 
     d(detaching) {
@@ -8240,7 +8274,7 @@ function create_if_block_7(ctx) {
     }
 
   };
-} // (81:4) {#if leadingicon}
+} // (82:4) {#if leadingicon}
 
 
 function create_if_block_6(ctx) {
@@ -8252,7 +8286,7 @@ function create_if_block_6(ctx) {
       set_custom_element_data(goa_icon, "data-testid", "leading-icon");
       set_custom_element_data(goa_icon, "type",
       /*leadingicon*/
-      ctx[4]);
+      ctx[5]);
     },
 
     m(target, anchor) {
@@ -8260,12 +8294,12 @@ function create_if_block_6(ctx) {
     },
 
     p(ctx, dirty) {
-      if (dirty &
+      if (dirty[0] &
       /*leadingicon*/
-      16) {
+      32) {
         set_custom_element_data(goa_icon, "type",
         /*leadingicon*/
-        ctx[4]);
+        ctx[5]);
       }
     },
 
@@ -8274,7 +8308,7 @@ function create_if_block_6(ctx) {
     }
 
   };
-} // (110:4) {#if trailingicon && !handlesTrailingIconClick}
+} // (112:4) {#if trailingicon && !handlesTrailingIconClick}
 
 
 function create_if_block_5(ctx) {
@@ -8287,7 +8321,7 @@ function create_if_block_5(ctx) {
       set_custom_element_data(goa_icon, "size", "medium");
       set_custom_element_data(goa_icon, "type",
       /*trailingicon*/
-      ctx[5]);
+      ctx[6]);
     },
 
     m(target, anchor) {
@@ -8295,12 +8329,12 @@ function create_if_block_5(ctx) {
     },
 
     p(ctx, dirty) {
-      if (dirty &
+      if (dirty[0] &
       /*trailingicon*/
-      32) {
+      64) {
         set_custom_element_data(goa_icon, "type",
         /*trailingicon*/
-        ctx[5]);
+        ctx[6]);
       }
     },
 
@@ -8309,7 +8343,7 @@ function create_if_block_5(ctx) {
     }
 
   };
-} // (120:4) {#if trailingicon && handlesTrailingIconClick}
+} // (122:4) {#if trailingicon && handlesTrailingIconClick}
 
 
 function create_if_block_4(ctx) {
@@ -8321,12 +8355,12 @@ function create_if_block_4(ctx) {
       goa_icon_button = element("goa-icon-button");
       set_custom_element_data(goa_icon_button, "disabled",
       /*isDisabled*/
-      ctx[18]);
+      ctx[19]);
       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",
       /*trailingicon*/
-      ctx[5]);
+      ctx[6]);
       set_custom_element_data(goa_icon_button, "data-testid", "trailing-icon-button");
     },
 
@@ -8340,20 +8374,20 @@ function create_if_block_4(ctx) {
     },
 
     p(ctx, dirty) {
-      if (dirty &
+      if (dirty[0] &
       /*isDisabled*/
-      262144) {
+      524288) {
         set_custom_element_data(goa_icon_button, "disabled",
         /*isDisabled*/
-        ctx[18]);
+        ctx[19]);
       }
 
-      if (dirty &
+      if (dirty[0] &
       /*trailingicon*/
-      32) {
+      64) {
         set_custom_element_data(goa_icon_button, "type",
         /*trailingicon*/
-        ctx[5]);
+        ctx[6]);
       }
     },
 
@@ -8364,7 +8398,7 @@ function create_if_block_4(ctx) {
     }
 
   };
-} // (131:4) {#if suffix}
+} // (133:4) {#if suffix}
 
 
 function create_if_block_3$2(ctx) {
@@ -8375,7 +8409,7 @@ function create_if_block_3$2(ctx) {
       span = element("span");
       t = text(
       /*suffix*/
-      ctx[14]);
+      ctx[15]);
       attr(span, "class", "suffix");
     },
 
@@ -8385,11 +8419,11 @@ function create_if_block_3$2(ctx) {
     },
 
     p(ctx, dirty) {
-      if (dirty &
+      if (dirty[0] &
       /*suffix*/
-      16384) set_data(t,
+      32768) set_data(t,
       /*suffix*/
-      ctx[14]);
+      ctx[15]);
     },
 
     d(detaching) {
@@ -8397,7 +8431,7 @@ function create_if_block_3$2(ctx) {
     }
 
   };
-} // (137:2) {#if showCounter}
+} // (139:2) {#if showCounter}
 
 
 function create_if_block$7(ctx) {
@@ -8406,7 +8440,7 @@ function create_if_block$7(ctx) {
   function select_block_type(ctx, dirty) {
     if (
     /*maxcharcount*/
-    ctx[15] > 0) return create_if_block_1$5;
+    ctx[16] > 0) return create_if_block_1$5;
     if (
     /*value*/
     ctx[0].length > 0) return create_if_block_2$4;
@@ -8448,7 +8482,7 @@ function create_if_block$7(ctx) {
     }
 
   };
-} // (142:31) 
+} // (144:31) 
 
 
 function create_if_block_2$4(ctx) {
@@ -8470,7 +8504,7 @@ function create_if_block_2$4(ctx) {
     },
 
     p(ctx, dirty) {
-      if (dirty &
+      if (dirty[0] &
       /*value*/
       1 && t_value !== (t_value =
       /*value*/
@@ -8482,7 +8516,7 @@ function create_if_block_2$4(ctx) {
     }
 
   };
-} // (138:4) {#if maxcharcount > 0}
+} // (140:4) {#if maxcharcount > 0}
 
 
 function create_if_block_1$5(ctx) {
@@ -8493,7 +8527,7 @@ function create_if_block_1$5(ctx) {
   let t0;
   let t1_value = `/${
   /*maxcharcount*/
-  ctx[15]}` + "";
+  ctx[16]}` + "";
   let t1;
   return {
     c() {
@@ -8505,7 +8539,7 @@ function create_if_block_1$5(ctx) {
       /*value*/
       ctx[0].length >
       /*maxcharcount*/
-      ctx[15]);
+      ctx[16]);
     },
 
     m(target, anchor) {
@@ -8515,25 +8549,25 @@ function create_if_block_1$5(ctx) {
     },
 
     p(ctx, dirty) {
-      if (dirty &
+      if (dirty[0] &
       /*value*/
       1 && t0_value !== (t0_value =
       /*value*/
       ctx[0].length + "")) set_data(t0, t0_value);
-      if (dirty &
+      if (dirty[0] &
       /*maxcharcount*/
-      32768 && t1_value !== (t1_value = `/${
+      65536 && t1_value !== (t1_value = `/${
       /*maxcharcount*/
-      ctx[15]}` + "")) set_data(t1, t1_value);
+      ctx[16]}` + "")) set_data(t1, t1_value);
 
-      if (dirty &
+      if (dirty[0] &
       /*value, maxcharcount*/
-      32769) {
+      65537) {
         toggle_class(div, "counter-error",
         /*value*/
         ctx[0].length >
         /*maxcharcount*/
-        ctx[15]);
+        ctx[16]);
       }
     },
 
@@ -8563,26 +8597,26 @@ function create_fragment$e(ctx) {
   let dispose;
   let if_block0 =
   /*prefix*/
-  ctx[13] && create_if_block_7(ctx);
+  ctx[14] && create_if_block_7(ctx);
   let if_block1 =
   /*leadingicon*/
-  ctx[4] && create_if_block_6(ctx);
+  ctx[5] && create_if_block_6(ctx);
   let if_block2 =
   /*trailingicon*/
-  ctx[5] && !
+  ctx[6] && !
   /*handlesTrailingIconClick*/
-  ctx[21] && create_if_block_5(ctx);
+  ctx[22] && create_if_block_5(ctx);
   let if_block3 =
   /*trailingicon*/
-  ctx[5] &&
+  ctx[6] &&
   /*handlesTrailingIconClick*/
-  ctx[21] && create_if_block_4(ctx);
+  ctx[22] && create_if_block_4(ctx);
   let if_block4 =
   /*suffix*/
-  ctx[14] && create_if_block_3$2(ctx);
+  ctx[15] && create_if_block_3$2(ctx);
   let if_block5 =
   /*showCounter*/
-  ctx[17] && create_if_block$7(ctx);
+  ctx[18] && create_if_block$7(ctx);
   return {
     c() {
       div1 = element("div");
@@ -8603,19 +8637,22 @@ function create_fragment$e(ctx) {
       this.c = noop;
       attr(input, "class", input_class_value = `input--${
       /*variant*/
-      ctx[6]}`);
+      ctx[7]}`);
       attr(input, "style", input_style_value = `--search-icon-offset: ${
       /*trailingicon*/
-      ctx[5] ? "-0.5rem" : "0"}`);
+      ctx[6] ? "-0.5rem" : "0"}`);
       input.readOnly =
       /*isReadonly*/
-      ctx[20];
+      ctx[21];
       input.disabled =
       /*isDisabled*/
-      ctx[18];
+      ctx[19];
       attr(input, "data-testid",
       /*testid*/
-      ctx[7]);
+      ctx[8]);
+      attr(input, "autocapitalize",
+      /*autocapitalize*/
+      ctx[3]);
       attr(input, "name",
       /*name*/
       ctx[2]);
@@ -8627,42 +8664,42 @@ function create_fragment$e(ctx) {
       ctx[0];
       attr(input, "placeholder",
       /*placeholder*/
-      ctx[3]);
+      ctx[4]);
       attr(input, "min",
       /*min*/
-      ctx[10]);
+      ctx[11]);
       attr(input, "max",
       /*max*/
-      ctx[11]);
+      ctx[12]);
       attr(input, "step",
       /*step*/
-      ctx[12]);
+      ctx[13]);
       attr(input, "role", "textbox");
       attr(input, "aria-label", input_aria_label_value =
       /*arialabel*/
-      ctx[9] ||
+      ctx[10] ||
       /*name*/
       ctx[2]);
       attr(div0, "class", div0_class_value = `
       goa-input
       ${
       /*isDisabled*/
-      ctx[18] ? "goa-input--disabled" : ""}
+      ctx[19] ? "goa-input--disabled" : ""}
       variant--${
       /*variant*/
-      ctx[6]}
+      ctx[7]}
       type--${
       /*type*/
       ctx[1]}
     `);
       toggle_class(div0, "error",
       /*isError*/
-      ctx[19]);
+      ctx[20]);
       attr(div1, "class", "container");
       attr(div1, "style", div1_style_value = `
     --width: ${
       /*width*/
-      ctx[8]};
+      ctx[9]};
   `);
     },
 
@@ -8676,7 +8713,7 @@ function create_fragment$e(ctx) {
       append(div0, input);
       /*input_binding*/
 
-      ctx[30](input);
+      ctx[31](input);
       append(div0, t2);
       if (if_block2) if_block2.m(div0, null);
       append(div0, t3);
@@ -8689,17 +8726,17 @@ function create_fragment$e(ctx) {
       if (!mounted) {
         dispose = [listen(input, "keyup",
         /*onKeyUp*/
-        ctx[22]), listen(input, "change",
+        ctx[23]), listen(input, "change",
         /*onKeyUp*/
-        ctx[22])];
+        ctx[23])];
         mounted = true;
       }
     },
 
-    p(ctx, [dirty]) {
+    p(ctx, dirty) {
       if (
       /*prefix*/
-      ctx[13]) {
+      ctx[14]) {
         if (if_block0) {
           if_block0.p(ctx, dirty);
         } else {
@@ -8714,7 +8751,7 @@ function create_fragment$e(ctx) {
 
       if (
       /*leadingicon*/
-      ctx[4]) {
+      ctx[5]) {
         if (if_block1) {
           if_block1.p(ctx, dirty);
         } else {
@@ -8727,47 +8764,55 @@ function create_fragment$e(ctx) {
         if_block1 = null;
       }
 
-      if (dirty &
+      if (dirty[0] &
       /*variant*/
-      64 && input_class_value !== (input_class_value = `input--${
+      128 && input_class_value !== (input_class_value = `input--${
       /*variant*/
-      ctx[6]}`)) {
+      ctx[7]}`)) {
         attr(input, "class", input_class_value);
       }
 
-      if (dirty &
+      if (dirty[0] &
       /*trailingicon*/
-      32 && input_style_value !== (input_style_value = `--search-icon-offset: ${
+      64 && input_style_value !== (input_style_value = `--search-icon-offset: ${
       /*trailingicon*/
-      ctx[5] ? "-0.5rem" : "0"}`)) {
+      ctx[6] ? "-0.5rem" : "0"}`)) {
         attr(input, "style", input_style_value);
       }
 
-      if (dirty &
+      if (dirty[0] &
       /*isReadonly*/
-      1048576) {
+      2097152) {
         input.readOnly =
         /*isReadonly*/
-        ctx[20];
+        ctx[21];
       }
 
-      if (dirty &
+      if (dirty[0] &
       /*isDisabled*/
-      262144) {
+      524288) {
         input.disabled =
         /*isDisabled*/
-        ctx[18];
+        ctx[19];
       }
 
-      if (dirty &
+      if (dirty[0] &
       /*testid*/
-      128) {
+      256) {
         attr(input, "data-testid",
         /*testid*/
-        ctx[7]);
+        ctx[8]);
       }
 
-      if (dirty &
+      if (dirty[0] &
+      /*autocapitalize*/
+      8) {
+        attr(input, "autocapitalize",
+        /*autocapitalize*/
+        ctx[3]);
+      }
+
+      if (dirty[0] &
       /*name*/
       4) {
         attr(input, "name",
@@ -8775,7 +8820,7 @@ function create_fragment$e(ctx) {
         ctx[2]);
       }
 
-      if (dirty &
+      if (dirty[0] &
       /*type*/
       2) {
         attr(input, "type",
@@ -8783,7 +8828,7 @@ function create_fragment$e(ctx) {
         ctx[1]);
       }
 
-      if (dirty &
+      if (dirty[0] &
       /*value*/
       1 && input.value !==
       /*value*/
@@ -8793,43 +8838,43 @@ function create_fragment$e(ctx) {
         ctx[0];
       }
 
-      if (dirty &
+      if (dirty[0] &
       /*placeholder*/
-      8) {
+      16) {
         attr(input, "placeholder",
         /*placeholder*/
-        ctx[3]);
+        ctx[4]);
       }
 
-      if (dirty &
+      if (dirty[0] &
       /*min*/
-      1024) {
+      2048) {
         attr(input, "min",
         /*min*/
-        ctx[10]);
+        ctx[11]);
       }
 
-      if (dirty &
+      if (dirty[0] &
       /*max*/
-      2048) {
+      4096) {
         attr(input, "max",
         /*max*/
-        ctx[11]);
+        ctx[12]);
       }
 
-      if (dirty &
+      if (dirty[0] &
       /*step*/
-      4096) {
+      8192) {
         attr(input, "step",
         /*step*/
-        ctx[12]);
+        ctx[13]);
       }
 
-      if (dirty &
+      if (dirty[0] &
       /*arialabel, name*/
-      516 && input_aria_label_value !== (input_aria_label_value =
+      1028 && input_aria_label_value !== (input_aria_label_value =
       /*arialabel*/
-      ctx[9] ||
+      ctx[10] ||
       /*name*/
       ctx[2])) {
         attr(input, "aria-label", input_aria_label_value);
@@ -8837,9 +8882,9 @@ function create_fragment$e(ctx) {
 
       if (
       /*trailingicon*/
-      ctx[5] && !
+      ctx[6] && !
       /*handlesTrailingIconClick*/
-      ctx[21]) {
+      ctx[22]) {
         if (if_block2) {
           if_block2.p(ctx, dirty);
         } else {
@@ -8854,9 +8899,9 @@ function create_fragment$e(ctx) {
 
       if (
       /*trailingicon*/
-      ctx[5] &&
+      ctx[6] &&
       /*handlesTrailingIconClick*/
-      ctx[21]) {
+      ctx[22]) {
         if (if_block3) {
           if_block3.p(ctx, dirty);
         } else {
@@ -8871,7 +8916,7 @@ function create_fragment$e(ctx) {
 
       if (
       /*suffix*/
-      ctx[14]) {
+      ctx[15]) {
         if (if_block4) {
           if_block4.p(ctx, dirty);
         } else {
@@ -8884,16 +8929,16 @@ function create_fragment$e(ctx) {
         if_block4 = null;
       }
 
-      if (dirty &
+      if (dirty[0] &
       /*isDisabled, variant, type*/
-      262210 && div0_class_value !== (div0_class_value = `
+      524418 && div0_class_value !== (div0_class_value = `
       goa-input
       ${
       /*isDisabled*/
-      ctx[18] ? "goa-input--disabled" : ""}
+      ctx[19] ? "goa-input--disabled" : ""}
       variant--${
       /*variant*/
-      ctx[6]}
+      ctx[7]}
       type--${
       /*type*/
       ctx[1]}
@@ -8901,17 +8946,17 @@ function create_fragment$e(ctx) {
         attr(div0, "class", div0_class_value);
       }
 
-      if (dirty &
+      if (dirty[0] &
       /*isDisabled, variant, type, isError*/
-      786498) {
+      1572994) {
         toggle_class(div0, "error",
         /*isError*/
-        ctx[19]);
+        ctx[20]);
       }
 
       if (
       /*showCounter*/
-      ctx[17]) {
+      ctx[18]) {
         if (if_block5) {
           if_block5.p(ctx, dirty);
         } else {
@@ -8924,12 +8969,12 @@ function create_fragment$e(ctx) {
         if_block5 = null;
       }
 
-      if (dirty &
+      if (dirty[0] &
       /*width*/
-      256 && div1_style_value !== (div1_style_value = `
+      512 && div1_style_value !== (div1_style_value = `
     --width: ${
       /*width*/
-      ctx[8]};
+      ctx[9]};
   `)) {
         attr(div1, "style", div1_style_value);
       }
@@ -8944,7 +8989,7 @@ function create_fragment$e(ctx) {
       if (if_block1) if_block1.d();
       /*input_binding*/
 
-      ctx[30](null);
+      ctx[31](null);
       if (if_block2) if_block2.d();
       if (if_block3) if_block3.d();
       if (if_block4) if_block4.d();
@@ -8978,6 +9023,9 @@ function instance$c($$self, $$props, $$invalidate) {
   let {
     value = ""
   } = $$props;
+  let {
+    autocapitalize = "off"
+  } = $$props;
   let {
     placeholder = ""
   } = $$props;
@@ -9053,7 +9101,7 @@ function instance$c($$self, $$props, $$invalidate) {
   function input_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       inputEl = $$value;
-      $$invalidate(16, inputEl);
+      $$invalidate(17, inputEl);
     });
   }
 
@@ -9061,75 +9109,76 @@ function instance$c($$self, $$props, $$invalidate) {
     if ('type' in $$props) $$invalidate(1, type = $$props.type);
     if ('name' in $$props) $$invalidate(2, name = $$props.name);
     if ('value' in $$props) $$invalidate(0, value = $$props.value);
-    if ('placeholder' in $$props) $$invalidate(3, placeholder = $$props.placeholder);
-    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(23, disabled = $$props.disabled);
-    if ('handletrailingiconclick' in $$props) $$invalidate(24, handletrailingiconclick = $$props.handletrailingiconclick);
-    if ('focused' in $$props) $$invalidate(25, focused = $$props.focused);
-    if ('readonly' in $$props) $$invalidate(26, readonly = $$props.readonly);
-    if ('error' in $$props) $$invalidate(27, error = $$props.error);
-    if ('testid' in $$props) $$invalidate(7, testid = $$props.testid);
-    if ('width' in $$props) $$invalidate(8, width = $$props.width);
-    if ('arialabel' in $$props) $$invalidate(9, arialabel = $$props.arialabel);
-    if ('min' in $$props) $$invalidate(10, min = $$props.min);
-    if ('max' in $$props) $$invalidate(11, max = $$props.max);
-    if ('step' in $$props) $$invalidate(12, step = $$props.step);
-    if ('prefix' in $$props) $$invalidate(13, prefix = $$props.prefix);
-    if ('suffix' in $$props) $$invalidate(14, suffix = $$props.suffix);
-    if ('showcounter' in $$props) $$invalidate(28, showcounter = $$props.showcounter);
-    if ('maxcharcount' in $$props) $$invalidate(15, maxcharcount = $$props.maxcharcount);
+    if ('autocapitalize' in $$props) $$invalidate(3, autocapitalize = $$props.autocapitalize);
+    if ('placeholder' in $$props) $$invalidate(4, placeholder = $$props.placeholder);
+    if ('leadingicon' in $$props) $$invalidate(5, leadingicon = $$props.leadingicon);
+    if ('trailingicon' in $$props) $$invalidate(6, trailingicon = $$props.trailingicon);
+    if ('variant' in $$props) $$invalidate(7, variant = $$props.variant);
+    if ('disabled' in $$props) $$invalidate(24, disabled = $$props.disabled);
+    if ('handletrailingiconclick' in $$props) $$invalidate(25, handletrailingiconclick = $$props.handletrailingiconclick);
+    if ('focused' in $$props) $$invalidate(26, focused = $$props.focused);
+    if ('readonly' in $$props) $$invalidate(27, readonly = $$props.readonly);
+    if ('error' in $$props) $$invalidate(28, error = $$props.error);
+    if ('testid' in $$props) $$invalidate(8, testid = $$props.testid);
+    if ('width' in $$props) $$invalidate(9, width = $$props.width);
+    if ('arialabel' in $$props) $$invalidate(10, arialabel = $$props.arialabel);
+    if ('min' in $$props) $$invalidate(11, min = $$props.min);
+    if ('max' in $$props) $$invalidate(12, max = $$props.max);
+    if ('step' in $$props) $$invalidate(13, step = $$props.step);
+    if ('prefix' in $$props) $$invalidate(14, prefix = $$props.prefix);
+    if ('suffix' in $$props) $$invalidate(15, suffix = $$props.suffix);
+    if ('showcounter' in $$props) $$invalidate(29, showcounter = $$props.showcounter);
+    if ('maxcharcount' in $$props) $$invalidate(16, maxcharcount = $$props.maxcharcount);
   };
 
   $$self.$$.update = () => {
-    if ($$self.$$.dirty &
+    if ($$self.$$.dirty[0] &
     /*handletrailingiconclick*/
-    16777216) {
-      $$invalidate(21, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
+    33554432) {
+      $$invalidate(22, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
     }
 
-    if ($$self.$$.dirty &
+    if ($$self.$$.dirty[0] &
     /*focused*/
-    33554432) {
-      $$invalidate(29, isFocused = toBoolean(focused));
+    67108864) {
+      $$invalidate(30, isFocused = toBoolean(focused));
     }
 
-    if ($$self.$$.dirty &
+    if ($$self.$$.dirty[0] &
     /*readonly*/
-    67108864) {
-      $$invalidate(20, isReadonly = toBoolean(readonly));
+    134217728) {
+      $$invalidate(21, isReadonly = toBoolean(readonly));
     }
 
-    if ($$self.$$.dirty &
+    if ($$self.$$.dirty[0] &
     /*error*/
-    134217728) {
-      $$invalidate(19, isError = toBoolean(error));
+    268435456) {
+      $$invalidate(20, isError = toBoolean(error));
     }
 
-    if ($$self.$$.dirty &
+    if ($$self.$$.dirty[0] &
     /*disabled*/
-    8388608) {
-      $$invalidate(18, isDisabled = toBoolean(disabled));
+    16777216) {
+      $$invalidate(19, isDisabled = toBoolean(disabled));
     }
 
-    if ($$self.$$.dirty &
+    if ($$self.$$.dirty[0] &
     /*showcounter*/
-    268435456) {
-      $$invalidate(17, showCounter = toBoolean(showcounter));
+    536870912) {
+      $$invalidate(18, showCounter = toBoolean(showcounter));
     }
 
-    if ($$self.$$.dirty &
+    if ($$self.$$.dirty[0] &
     /*isFocused, inputEl*/
-    536936448) {
+    1073872896) {
       if (isFocused && inputEl) {
         setTimeout(() => inputEl.focus(), 1);
       }
     }
 
-    if ($$self.$$.dirty &
+    if ($$self.$$.dirty[0] &
     /*inputEl, type*/
-    65538) {
+    131074) {
       if (inputEl && type === "search") {
         inputEl.addEventListener("search", e => {
           onKeyUp(e);
@@ -9138,7 +9187,7 @@ function instance$c($$self, $$props, $$invalidate) {
     }
   };
 
-  return [value, type, name, placeholder, leadingicon, trailingicon, variant, testid, width, arialabel, min, max, step, prefix, suffix, maxcharcount, inputEl, showCounter, isDisabled, isError, isReadonly, handlesTrailingIconClick, onKeyUp, disabled, handletrailingiconclick, focused, readonly, error, showcounter, isFocused, input_binding];
+  return [value, type, name, autocapitalize, placeholder, leadingicon, trailingicon, variant, testid, width, arialabel, min, max, step, prefix, suffix, maxcharcount, inputEl, showCounter, isDisabled, isError, isReadonly, handlesTrailingIconClick, onKeyUp, disabled, handletrailingiconclick, focused, readonly, error, showcounter, isFocused, input_binding];
 }
 
 class Input extends SvelteElement {
@@ -9154,26 +9203,27 @@ class Input extends SvelteElement {
       type: 1,
       name: 2,
       value: 0,
-      placeholder: 3,
-      leadingicon: 4,
-      trailingicon: 5,
-      variant: 6,
-      disabled: 23,
-      handletrailingiconclick: 24,
-      focused: 25,
-      readonly: 26,
-      error: 27,
-      testid: 7,
-      width: 8,
-      arialabel: 9,
-      min: 10,
-      max: 11,
-      step: 12,
-      prefix: 13,
-      suffix: 14,
-      showcounter: 28,
-      maxcharcount: 15
-    }, null);
+      autocapitalize: 3,
+      placeholder: 4,
+      leadingicon: 5,
+      trailingicon: 6,
+      variant: 7,
+      disabled: 24,
+      handletrailingiconclick: 25,
+      focused: 26,
+      readonly: 27,
+      error: 28,
+      testid: 8,
+      width: 9,
+      arialabel: 10,
+      min: 11,
+      max: 12,
+      step: 13,
+      prefix: 14,
+      suffix: 15,
+      showcounter: 29,
+      maxcharcount: 16
+    }, null, [-1, -1]);
 
     if (options) {
       if (options.target) {
@@ -9188,7 +9238,7 @@ class Input extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["type", "name", "value", "placeholder", "leadingicon", "trailingicon", "variant", "disabled", "handletrailingiconclick", "focused", "readonly", "error", "testid", "width", "arialabel", "min", "max", "step", "prefix", "suffix", "showcounter", "maxcharcount"];
+    return ["type", "name", "value", "autocapitalize", "placeholder", "leadingicon", "trailingicon", "variant", "disabled", "handletrailingiconclick", "focused", "readonly", "error", "testid", "width", "arialabel", "min", "max", "step", "prefix", "suffix", "showcounter", "maxcharcount"];
   }
 
   get type() {
@@ -9224,10 +9274,21 @@ class Input extends SvelteElement {
     flush();
   }
 
-  get placeholder() {
+  get autocapitalize() {
     return this.$$.ctx[3];
   }
 
+  set autocapitalize(autocapitalize) {
+    this.$$set({
+      autocapitalize
+    });
+    flush();
+  }
+
+  get placeholder() {
+    return this.$$.ctx[4];
+  }
+
   set placeholder(placeholder) {
     this.$$set({
       placeholder
@@ -9236,7 +9297,7 @@ class Input extends SvelteElement {
   }
 
   get leadingicon() {
-    return this.$$.ctx[4];
+    return this.$$.ctx[5];
   }
 
   set leadingicon(leadingicon) {
@@ -9247,7 +9308,7 @@ class Input extends SvelteElement {
   }
 
   get trailingicon() {
-    return this.$$.ctx[5];
+    return this.$$.ctx[6];
   }
 
   set trailingicon(trailingicon) {
@@ -9258,7 +9319,7 @@ class Input extends SvelteElement {
   }
 
   get variant() {
-    return this.$$.ctx[6];
+    return this.$$.ctx[7];
   }
 
   set variant(variant) {
@@ -9269,7 +9330,7 @@ class Input extends SvelteElement {
   }
 
   get disabled() {
-    return this.$$.ctx[23];
+    return this.$$.ctx[24];
   }
 
   set disabled(disabled) {
@@ -9280,7 +9341,7 @@ class Input extends SvelteElement {
   }
 
   get handletrailingiconclick() {
-    return this.$$.ctx[24];
+    return this.$$.ctx[25];
   }
 
   set handletrailingiconclick(handletrailingiconclick) {
@@ -9291,7 +9352,7 @@ class Input extends SvelteElement {
   }
 
   get focused() {
-    return this.$$.ctx[25];
+    return this.$$.ctx[26];
   }
 
   set focused(focused) {
@@ -9302,7 +9363,7 @@ class Input extends SvelteElement {
   }
 
   get readonly() {
-    return this.$$.ctx[26];
+    return this.$$.ctx[27];
   }
 
   set readonly(readonly) {
@@ -9313,7 +9374,7 @@ class Input extends SvelteElement {
   }
 
   get error() {
-    return this.$$.ctx[27];
+    return this.$$.ctx[28];
   }
 
   set error(error) {
@@ -9324,7 +9385,7 @@ class Input extends SvelteElement {
   }
 
   get testid() {
-    return this.$$.ctx[7];
+    return this.$$.ctx[8];
   }
 
   set testid(testid) {
@@ -9335,7 +9396,7 @@ class Input extends SvelteElement {
   }
 
   get width() {
-    return this.$$.ctx[8];
+    return this.$$.ctx[9];
   }
 
   set width(width) {
@@ -9346,7 +9407,7 @@ class Input extends SvelteElement {
   }
 
   get arialabel() {
-    return this.$$.ctx[9];
+    return this.$$.ctx[10];
   }
 
   set arialabel(arialabel) {
@@ -9357,7 +9418,7 @@ class Input extends SvelteElement {
   }
 
   get min() {
-    return this.$$.ctx[10];
+    return this.$$.ctx[11];
   }
 
   set min(min) {
@@ -9368,7 +9429,7 @@ class Input extends SvelteElement {
   }
 
   get max() {
-    return this.$$.ctx[11];
+    return this.$$.ctx[12];
   }
 
   set max(max) {
@@ -9379,7 +9440,7 @@ class Input extends SvelteElement {
   }
 
   get step() {
-    return this.$$.ctx[12];
+    return this.$$.ctx[13];
   }
 
   set step(step) {
@@ -9390,7 +9451,7 @@ class Input extends SvelteElement {
   }
 
   get prefix() {
-    return this.$$.ctx[13];
+    return this.$$.ctx[14];
   }
 
   set prefix(prefix) {
@@ -9401,7 +9462,7 @@ class Input extends SvelteElement {
   }
 
   get suffix() {
-    return this.$$.ctx[14];
+    return this.$$.ctx[15];
   }
 
   set suffix(suffix) {
@@ -9412,7 +9473,7 @@ class Input extends SvelteElement {
   }
 
   get showcounter() {
-    return this.$$.ctx[28];
+    return this.$$.ctx[29];
   }
 
   set showcounter(showcounter) {
@@ -9423,7 +9484,7 @@ class Input extends SvelteElement {
   }
 
   get maxcharcount() {
-    return this.$$.ctx[15];
+    return this.$$.ctx[16];
   }
 
   set maxcharcount(maxcharcount) {
@@ -14425,6 +14486,7 @@ const GoAInput = ({
   id,
   name,
   type,
+  autoCapitalize,
   leadingIcon,
   trailingIcon,
   variant: _variant = 'goa',
@@ -14478,6 +14540,7 @@ const GoAInput = ({
     focused: focused,
     type: type,
     name: name,
+    autocapitalize: autoCapitalize,
     id: id,
     leadingicon: leadingIcon,
     trailingicon: trailingIcon,