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

package/react-components.umd.js

@@ -1797,7 +1797,7 @@
 
 	function create_else_block$2(ctx) {
 	  let t0;
-	  let div;
+	  let slot;
 	  let t1;
 	  let if_block1_anchor;
 	  let if_block0 =
@@ -1810,18 +1810,17 @@
 	    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);
@@ -1862,7 +1861,7 @@
 	    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);
@@ -1873,23 +1872,22 @@
 
 
 	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);
 	    },
@@ -1897,13 +1895,13 @@
 	    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) {
@@ -1947,7 +1945,7 @@
 	    }
 
 	  };
-	} // (65:4) {#if trailingicon}
+	} // (61:4) {#if trailingicon}
 
 
 	function create_if_block_1$a(ctx) {
@@ -2212,7 +2210,7 @@
 	  constructor(options) {
 	    super();
 	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@media(max-width: 480px){:host{width:100%}button{width:100%}}button{display:inline-flex;box-sizing:border-box;border-radius:0.25rem;border:2px solid var(--goa-color-interactive);box-sizing:border-box;cursor:pointer;font-family:var(--font-family);font-size:var(--fs-lg);font-weight:400;height:var(--button-height);letter-spacing:0.5px;line-height:100%;padding:0 0.75rem;gap:0.5rem;align-items:center;justify-content:center;transition:transform 0.1s ease-in-out, background-color 0.2s ease-in-out,
-      border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--fs-base)}button.start{height:var(--button-height-tall);font-weight:var(--fw-bold)}button.start,button.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),
@@ -8301,7 +8299,7 @@
 	      div = element("div");
 	      t = text(
 	      /*prefix*/
-	      ctx[13]);
+	      ctx[14]);
 	      attr(div, "class", "prefix");
 	    },
 
@@ -8311,11 +8309,11 @@
 	    },
 
 	    p(ctx, dirty) {
-	      if (dirty &
+	      if (dirty[0] &
 	      /*prefix*/
-	      8192) set_data(t,
+	      16384) set_data(t,
 	      /*prefix*/
-	      ctx[13]);
+	      ctx[14]);
 	    },
 
 	    d(detaching) {
@@ -8323,7 +8321,7 @@
 	    }
 
 	  };
-	} // (81:4) {#if leadingicon}
+	} // (82:4) {#if leadingicon}
 
 
 	function create_if_block_6(ctx) {
@@ -8335,7 +8333,7 @@
 	      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) {
@@ -8343,12 +8341,12 @@
 	    },
 
 	    p(ctx, dirty) {
-	      if (dirty &
+	      if (dirty[0] &
 	      /*leadingicon*/
-	      16) {
+	      32) {
 	        set_custom_element_data(goa_icon, "type",
 	        /*leadingicon*/
-	        ctx[4]);
+	        ctx[5]);
 	      }
 	    },
 
@@ -8357,7 +8355,7 @@
 	    }
 
 	  };
-	} // (110:4) {#if trailingicon && !handlesTrailingIconClick}
+	} // (112:4) {#if trailingicon && !handlesTrailingIconClick}
 
 
 	function create_if_block_5(ctx) {
@@ -8370,7 +8368,7 @@
 	      set_custom_element_data(goa_icon, "size", "medium");
 	      set_custom_element_data(goa_icon, "type",
 	      /*trailingicon*/
-	      ctx[5]);
+	      ctx[6]);
 	    },
 
 	    m(target, anchor) {
@@ -8378,12 +8376,12 @@
 	    },
 
 	    p(ctx, dirty) {
-	      if (dirty &
+	      if (dirty[0] &
 	      /*trailingicon*/
-	      32) {
+	      64) {
 	        set_custom_element_data(goa_icon, "type",
 	        /*trailingicon*/
-	        ctx[5]);
+	        ctx[6]);
 	      }
 	    },
 
@@ -8392,7 +8390,7 @@
 	    }
 
 	  };
-	} // (120:4) {#if trailingicon && handlesTrailingIconClick}
+	} // (122:4) {#if trailingicon && handlesTrailingIconClick}
 
 
 	function create_if_block_4(ctx) {
@@ -8404,12 +8402,12 @@
 	      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");
 	    },
 
@@ -8423,20 +8421,20 @@
 	    },
 
 	    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]);
 	      }
 	    },
 
@@ -8447,7 +8445,7 @@
 	    }
 
 	  };
-	} // (131:4) {#if suffix}
+	} // (133:4) {#if suffix}
 
 
 	function create_if_block_3$2(ctx) {
@@ -8458,7 +8456,7 @@
 	      span = element("span");
 	      t = text(
 	      /*suffix*/
-	      ctx[14]);
+	      ctx[15]);
 	      attr(span, "class", "suffix");
 	    },
 
@@ -8468,11 +8466,11 @@
 	    },
 
 	    p(ctx, dirty) {
-	      if (dirty &
+	      if (dirty[0] &
 	      /*suffix*/
-	      16384) set_data(t,
+	      32768) set_data(t,
 	      /*suffix*/
-	      ctx[14]);
+	      ctx[15]);
 	    },
 
 	    d(detaching) {
@@ -8480,7 +8478,7 @@
 	    }
 
 	  };
-	} // (137:2) {#if showCounter}
+	} // (139:2) {#if showCounter}
 
 
 	function create_if_block$7(ctx) {
@@ -8489,7 +8487,7 @@
 	  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;
@@ -8531,7 +8529,7 @@
 	    }
 
 	  };
-	} // (142:31) 
+	} // (144:31) 
 
 
 	function create_if_block_2$4(ctx) {
@@ -8553,7 +8551,7 @@
 	    },
 
 	    p(ctx, dirty) {
-	      if (dirty &
+	      if (dirty[0] &
 	      /*value*/
 	      1 && t_value !== (t_value =
 	      /*value*/
@@ -8565,7 +8563,7 @@
 	    }
 
 	  };
-	} // (138:4) {#if maxcharcount > 0}
+	} // (140:4) {#if maxcharcount > 0}
 
 
 	function create_if_block_1$5(ctx) {
@@ -8576,7 +8574,7 @@
 	  let t0;
 	  let t1_value = `/${
   /*maxcharcount*/
-  ctx[15]}` + "";
+  ctx[16]}` + "";
 	  let t1;
 	  return {
 	    c() {
@@ -8588,7 +8586,7 @@
 	      /*value*/
 	      ctx[0].length >
 	      /*maxcharcount*/
-	      ctx[15]);
+	      ctx[16]);
 	    },
 
 	    m(target, anchor) {
@@ -8598,25 +8596,25 @@
 	    },
 
 	    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]);
 	      }
 	    },
 
@@ -8646,26 +8644,26 @@
 	  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");
@@ -8686,19 +8684,22 @@
 	      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]);
@@ -8710,42 +8711,42 @@
 	      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]};
   `);
 	    },
 
@@ -8759,7 +8760,7 @@
 	      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);
@@ -8772,17 +8773,17 @@
 	      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 {
@@ -8797,7 +8798,7 @@
 
 	      if (
 	      /*leadingicon*/
-	      ctx[4]) {
+	      ctx[5]) {
 	        if (if_block1) {
 	          if_block1.p(ctx, dirty);
 	        } else {
@@ -8810,47 +8811,55 @@
 	        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",
@@ -8858,7 +8867,7 @@
 	        ctx[2]);
 	      }
 
-	      if (dirty &
+	      if (dirty[0] &
 	      /*type*/
 	      2) {
 	        attr(input, "type",
@@ -8866,7 +8875,7 @@
 	        ctx[1]);
 	      }
 
-	      if (dirty &
+	      if (dirty[0] &
 	      /*value*/
 	      1 && input.value !==
 	      /*value*/
@@ -8876,43 +8885,43 @@
 	        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);
@@ -8920,9 +8929,9 @@
 
 	      if (
 	      /*trailingicon*/
-	      ctx[5] && !
+	      ctx[6] && !
 	      /*handlesTrailingIconClick*/
-	      ctx[21]) {
+	      ctx[22]) {
 	        if (if_block2) {
 	          if_block2.p(ctx, dirty);
 	        } else {
@@ -8937,9 +8946,9 @@
 
 	      if (
 	      /*trailingicon*/
-	      ctx[5] &&
+	      ctx[6] &&
 	      /*handlesTrailingIconClick*/
-	      ctx[21]) {
+	      ctx[22]) {
 	        if (if_block3) {
 	          if_block3.p(ctx, dirty);
 	        } else {
@@ -8954,7 +8963,7 @@
 
 	      if (
 	      /*suffix*/
-	      ctx[14]) {
+	      ctx[15]) {
 	        if (if_block4) {
 	          if_block4.p(ctx, dirty);
 	        } else {
@@ -8967,16 +8976,16 @@
 	        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]}
@@ -8984,17 +8993,17 @@
 	        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 {
@@ -9007,12 +9016,12 @@
 	        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);
 	      }
@@ -9027,7 +9036,7 @@
 	      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();
@@ -9061,6 +9070,9 @@
 	  let {
 	    value = ""
 	  } = $$props;
+	  let {
+	    autocapitalize = "off"
+	  } = $$props;
 	  let {
 	    placeholder = ""
 	  } = $$props;
@@ -9136,7 +9148,7 @@
 	  function input_binding($$value) {
 	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 	      inputEl = $$value;
-	      $$invalidate(16, inputEl);
+	      $$invalidate(17, inputEl);
 	    });
 	  }
 
@@ -9144,75 +9156,76 @@
 	    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);
@@ -9221,7 +9234,7 @@
 	    }
 	  };
 
-	  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 {
@@ -9237,26 +9250,27 @@
 	      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) {
@@ -9271,7 +9285,7 @@
 	  }
 
 	  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() {
@@ -9307,10 +9321,21 @@
 	    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
@@ -9319,7 +9344,7 @@
 	  }
 
 	  get leadingicon() {
-	    return this.$$.ctx[4];
+	    return this.$$.ctx[5];
 	  }
 
 	  set leadingicon(leadingicon) {
@@ -9330,7 +9355,7 @@
 	  }
 
 	  get trailingicon() {
-	    return this.$$.ctx[5];
+	    return this.$$.ctx[6];
 	  }
 
 	  set trailingicon(trailingicon) {
@@ -9341,7 +9366,7 @@
 	  }
 
 	  get variant() {
-	    return this.$$.ctx[6];
+	    return this.$$.ctx[7];
 	  }
 
 	  set variant(variant) {
@@ -9352,7 +9377,7 @@
 	  }
 
 	  get disabled() {
-	    return this.$$.ctx[23];
+	    return this.$$.ctx[24];
 	  }
 
 	  set disabled(disabled) {
@@ -9363,7 +9388,7 @@
 	  }
 
 	  get handletrailingiconclick() {
-	    return this.$$.ctx[24];
+	    return this.$$.ctx[25];
 	  }
 
 	  set handletrailingiconclick(handletrailingiconclick) {
@@ -9374,7 +9399,7 @@
 	  }
 
 	  get focused() {
-	    return this.$$.ctx[25];
+	    return this.$$.ctx[26];
 	  }
 
 	  set focused(focused) {
@@ -9385,7 +9410,7 @@
 	  }
 
 	  get readonly() {
-	    return this.$$.ctx[26];
+	    return this.$$.ctx[27];
 	  }
 
 	  set readonly(readonly) {
@@ -9396,7 +9421,7 @@
 	  }
 
 	  get error() {
-	    return this.$$.ctx[27];
+	    return this.$$.ctx[28];
 	  }
 
 	  set error(error) {
@@ -9407,7 +9432,7 @@
 	  }
 
 	  get testid() {
-	    return this.$$.ctx[7];
+	    return this.$$.ctx[8];
 	  }
 
 	  set testid(testid) {
@@ -9418,7 +9443,7 @@
 	  }
 
 	  get width() {
-	    return this.$$.ctx[8];
+	    return this.$$.ctx[9];
 	  }
 
 	  set width(width) {
@@ -9429,7 +9454,7 @@
 	  }
 
 	  get arialabel() {
-	    return this.$$.ctx[9];
+	    return this.$$.ctx[10];
 	  }
 
 	  set arialabel(arialabel) {
@@ -9440,7 +9465,7 @@
 	  }
 
 	  get min() {
-	    return this.$$.ctx[10];
+	    return this.$$.ctx[11];
 	  }
 
 	  set min(min) {
@@ -9451,7 +9476,7 @@
 	  }
 
 	  get max() {
-	    return this.$$.ctx[11];
+	    return this.$$.ctx[12];
 	  }
 
 	  set max(max) {
@@ -9462,7 +9487,7 @@
 	  }
 
 	  get step() {
-	    return this.$$.ctx[12];
+	    return this.$$.ctx[13];
 	  }
 
 	  set step(step) {
@@ -9473,7 +9498,7 @@
 	  }
 
 	  get prefix() {
-	    return this.$$.ctx[13];
+	    return this.$$.ctx[14];
 	  }
 
 	  set prefix(prefix) {
@@ -9484,7 +9509,7 @@
 	  }
 
 	  get suffix() {
-	    return this.$$.ctx[14];
+	    return this.$$.ctx[15];
 	  }
 
 	  set suffix(suffix) {
@@ -9495,7 +9520,7 @@
 	  }
 
 	  get showcounter() {
-	    return this.$$.ctx[28];
+	    return this.$$.ctx[29];
 	  }
 
 	  set showcounter(showcounter) {
@@ -9506,7 +9531,7 @@
 	  }
 
 	  get maxcharcount() {
-	    return this.$$.ctx[15];
+	    return this.$$.ctx[16];
 	  }
 
 	  set maxcharcount(maxcharcount) {
@@ -14509,6 +14534,7 @@
 	  var id = _a.id,
 	      name = _a.name,
 	      type = _a.type,
+	      autoCapitalize = _a.autoCapitalize,
 	      leadingIcon = _a.leadingIcon,
 	      trailingIcon = _a.trailingIcon,
 	      _b = _a.variant,
@@ -14561,6 +14587,7 @@
 	    focused: focused,
 	    type: type,
 	    name: name,
+	    autocapitalize: autoCapitalize,
 	    id: id,
 	    leadingicon: leadingIcon,
 	    trailingicon: trailingIcon,