@abgov/react-components 4.0.0-alpha.77 → 4.0.0-alpha.78

package/react-components.umd.js

@@ -3051,7 +3051,7 @@
 	    }
 
 	  };
-	} // (51:4) {#if isIndeterminate}
+	} // (59:4) {#if isIndeterminate}
 
 
 	function create_if_block$f(ctx) {
@@ -3308,22 +3308,27 @@
 	    value = ""
 	  } = $$props;
 	  let {
-	    disabled
+	    disabled = "false"
 	  } = $$props;
 	  let {
-	    error
+	    error = "false"
 	  } = $$props;
 	  let {
 	    testid = ""
-	  } = $$props;
+	  } = $$props; // Private
+
+	  let _value;
+
+	  onMount(() => {
+	    // hold on to the initial value to prevent losing it on check changes
+	    _value = value;
+	  });
 
 	  function onChange(e) {
 	    // An empty string is required as setting the second value to `null` caused the data to get
 	    // out of sync with the events.
 	    const newCheckStatus = !isChecked;
-
-	    const _value = newCheckStatus ? `${value || "checked"}` : ""; // set the local state
-
+	    const newValue = newCheckStatus ? `${_value || "checked"}` : ""; // set the local state
 
 	    $$invalidate(9, checked = fromBoolean(newCheckStatus));
 	    e.target.dispatchEvent(new CustomEvent("_change", {
@@ -3331,7 +3336,7 @@
 	      detail: {
 	        name,
 	        checked: newCheckStatus,
-	        value: _value
+	        value: newValue
 	      }
 	    }));
 	  }
@@ -3350,6 +3355,7 @@
 	    if ($$self.$$.dirty &
 	    /*disabled*/
 	    1024) {
+	      // Binding
 	      $$invalidate(7, isDisabled = toBoolean(disabled));
 	    }
 
@@ -7182,9 +7188,14 @@
 	  let div;
 	  let t0;
 	  let t1;
-	  let if_block =
-	  /*isOptional*/
-	  ctx[3] && create_if_block_3$3();
+	  let show_if =
+	  /*requirement*/
+	  ctx[3] &&
+	  /*REQUIREMENT_TYPES*/
+	  ctx[4].includes(
+	  /*requirement*/
+	  ctx[3]);
+	  let if_block = show_if && create_if_block_3$3(ctx);
 	  return {
 	    c() {
 	      div = element("div");
@@ -7209,12 +7220,21 @@
 	      1) set_data(t0,
 	      /*label*/
 	      ctx[0]);
+	      if (dirty &
+	      /*requirement*/
+	      8) show_if =
+	      /*requirement*/
+	      ctx[3] &&
+	      /*REQUIREMENT_TYPES*/
+	      ctx[4].includes(
+	      /*requirement*/
+	      ctx[3]);
 
-	      if (
-	      /*isOptional*/
-	      ctx[3]) {
-	        if (if_block) ;else {
-	          if_block = create_if_block_3$3();
+	      if (show_if) {
+	        if (if_block) {
+	          if_block.p(ctx, dirty);
+	        } else {
+	          if_block = create_if_block_3$3(ctx);
 	          if_block.c();
 	          if_block.m(div, null);
 	        }
@@ -7230,19 +7250,37 @@
 	    }
 
 	  };
-	} // (18:6) {#if isOptional}
+	} // (28:6) {#if requirement && REQUIREMENT_TYPES.includes(requirement)}
 
 
 	function create_if_block_3$3(ctx) {
 	  let em;
+	  let t0;
+	  let t1;
+	  let t2;
 	  return {
 	    c() {
 	      em = element("em");
-	      em.textContent = "(optional)";
+	      t0 = text("(");
+	      t1 = text(
+	      /*requirement*/
+	      ctx[3]);
+	      t2 = text(")");
 	    },
 
 	    m(target, anchor) {
 	      insert(target, em, anchor);
+	      append(em, t0);
+	      append(em, t1);
+	      append(em, t2);
+	    },
+
+	    p(ctx, dirty) {
+	      if (dirty &
+	      /*requirement*/
+	      8) set_data(t1,
+	      /*requirement*/
+	      ctx[3]);
 	    },
 
 	    d(detaching) {
@@ -7250,7 +7288,7 @@
 	    }
 
 	  };
-	} // (26:2) {#if error}
+	} // (36:2) {#if error}
 
 
 	function create_if_block_1$6(ctx) {
@@ -7283,7 +7321,7 @@
 	    }
 
 	  };
-	} // (29:2) {#if helptext}
+	} // (39:2) {#if helptext}
 
 
 	function create_if_block$9(ctx) {
@@ -7421,7 +7459,12 @@
 	}
 
 	function instance$h($$self, $$props, $$invalidate) {
-	  let isOptional;
+	  const REQUIREMENT_TYPES = ["optional", "required", ""]; // type check function
+
+	  function isRequirementType(value) {
+	    return REQUIREMENT_TYPES.includes(value);
+	  }
+
 	  let {
 	    label = ""
 	  } = $$props;
@@ -7432,25 +7475,22 @@
 	    error = ""
 	  } = $$props;
 	  let {
-	    optional = "false"
+	    requirement = ""
 	  } = $$props;
+	  onMount(() => {
+	    if (!isRequirementType(requirement)) {
+	      throw "Invalid requirement type";
+	    }
+	  });
 
 	  $$self.$$set = $$props => {
 	    if ('label' in $$props) $$invalidate(0, label = $$props.label);
 	    if ('helptext' in $$props) $$invalidate(1, helptext = $$props.helptext);
 	    if ('error' in $$props) $$invalidate(2, error = $$props.error);
-	    if ('optional' in $$props) $$invalidate(4, optional = $$props.optional);
+	    if ('requirement' in $$props) $$invalidate(3, requirement = $$props.requirement);
 	  };
 
-	  $$self.$$.update = () => {
-	    if ($$self.$$.dirty &
-	    /*optional*/
-	    16) {
-	      $$invalidate(3, isOptional = toBoolean(optional));
-	    }
-	  };
-
-	  return [label, helptext, error, isOptional, optional];
+	  return [label, helptext, error, requirement, REQUIREMENT_TYPES];
 	}
 
 	class FormItem extends SvelteElement {
@@ -7465,7 +7505,7 @@
 	      label: 0,
 	      helptext: 1,
 	      error: 2,
-	      optional: 4
+	      requirement: 3
 	    }, null);
 
 	    if (options) {
@@ -7481,7 +7521,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["label", "helptext", "error", "optional"];
+	    return ["label", "helptext", "error", "requirement"];
 	  }
 
 	  get label() {
@@ -7517,13 +7557,13 @@
 	    flush();
 	  }
 
-	  get optional() {
-	    return this.$$.ctx[4];
+	  get requirement() {
+	    return this.$$.ctx[3];
 	  }
 
-	  set optional(optional) {
+	  set requirement(requirement) {
 	    this.$$set({
-	      optional
+	      requirement
 	    });
 	    flush();
 	  }
@@ -8391,7 +8431,7 @@
 	customElements.define("goa-icon", Icon);
 	/* libs/web-components/src/components/input/Input.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block_7(ctx) {
+	function create_if_block_4(ctx) {
 	  let div;
 	  let t;
 	  return {
@@ -8409,7 +8449,7 @@
 	    },
 
 	    p(ctx, dirty) {
-	      if (dirty[0] &
+	      if (dirty &
 	      /*prefix*/
 	      16384) set_data(t,
 	      /*prefix*/
@@ -8421,10 +8461,10 @@
 	    }
 
 	  };
-	} // (82:4) {#if leadingicon}
+	} // (78:4) {#if leadingicon}
 
 
-	function create_if_block_6(ctx) {
+	function create_if_block_3$2(ctx) {
 	  let goa_icon;
 	  return {
 	    c() {
@@ -8441,7 +8481,7 @@
 	    },
 
 	    p(ctx, dirty) {
-	      if (dirty[0] &
+	      if (dirty &
 	      /*leadingicon*/
 	      32) {
 	        set_custom_element_data(goa_icon, "type",
@@ -8455,10 +8495,10 @@
 	    }
 
 	  };
-	} // (112:4) {#if trailingicon && !handlesTrailingIconClick}
+	} // (108:4) {#if trailingicon && !handlesTrailingIconClick}
 
 
-	function create_if_block_5(ctx) {
+	function create_if_block_2$4(ctx) {
 	  let goa_icon;
 	  return {
 	    c() {
@@ -8476,7 +8516,7 @@
 	    },
 
 	    p(ctx, dirty) {
-	      if (dirty[0] &
+	      if (dirty &
 	      /*trailingicon*/
 	      64) {
 	        set_custom_element_data(goa_icon, "type",
@@ -8490,10 +8530,10 @@
 	    }
 
 	  };
-	} // (122:4) {#if trailingicon && handlesTrailingIconClick}
+	} // (118:4) {#if trailingicon && handlesTrailingIconClick}
 
 
-	function create_if_block_4(ctx) {
+	function create_if_block_1$5(ctx) {
 	  let goa_icon_button;
 	  let mounted;
 	  let dispose;
@@ -8502,7 +8542,7 @@
 	      goa_icon_button = element("goa-icon-button");
 	      set_custom_element_data(goa_icon_button, "disabled",
 	      /*isDisabled*/
-	      ctx[19]);
+	      ctx[17]);
 	      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, "icon",
@@ -8521,15 +8561,15 @@
 	    },
 
 	    p(ctx, dirty) {
-	      if (dirty[0] &
+	      if (dirty &
 	      /*isDisabled*/
-	      524288) {
+	      131072) {
 	        set_custom_element_data(goa_icon_button, "disabled",
 	        /*isDisabled*/
-	        ctx[19]);
+	        ctx[17]);
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*trailingicon*/
 	      64) {
 	        set_custom_element_data(goa_icon_button, "icon",
@@ -8545,10 +8585,10 @@
 	    }
 
 	  };
-	} // (133:4) {#if suffix}
+	} // (129:4) {#if suffix}
 
 
-	function create_if_block_3$2(ctx) {
+	function create_if_block$7(ctx) {
 	  let span;
 	  let t;
 	  return {
@@ -8566,7 +8606,7 @@
 	    },
 
 	    p(ctx, dirty) {
-	      if (dirty[0] &
+	      if (dirty &
 	      /*suffix*/
 	      32768) set_data(t,
 	      /*suffix*/
@@ -8577,151 +8617,6 @@
 	      if (detaching) detach(span);
 	    }
 
-	  };
-	} // (139:2) {#if showCounter}
-
-
-	function create_if_block$7(ctx) {
-	  let if_block_anchor;
-
-	  function select_block_type(ctx, dirty) {
-	    if (
-	    /*maxcharcount*/
-	    ctx[16] > 0) return create_if_block_1$5;
-	    if (
-	    /*value*/
-	    ctx[0].length > 0) return create_if_block_2$4;
-	  }
-
-	  let current_block_type = select_block_type(ctx);
-	  let if_block = current_block_type && current_block_type(ctx);
-	  return {
-	    c() {
-	      if (if_block) if_block.c();
-	      if_block_anchor = empty();
-	    },
-
-	    m(target, anchor) {
-	      if (if_block) if_block.m(target, anchor);
-	      insert(target, if_block_anchor, anchor);
-	    },
-
-	    p(ctx, dirty) {
-	      if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
-	        if_block.p(ctx, dirty);
-	      } else {
-	        if (if_block) if_block.d(1);
-	        if_block = current_block_type && current_block_type(ctx);
-
-	        if (if_block) {
-	          if_block.c();
-	          if_block.m(if_block_anchor.parentNode, if_block_anchor);
-	        }
-	      }
-	    },
-
-	    d(detaching) {
-	      if (if_block) {
-	        if_block.d(detaching);
-	      }
-
-	      if (detaching) detach(if_block_anchor);
-	    }
-
-	  };
-	} // (144:31) 
-
-
-	function create_if_block_2$4(ctx) {
-	  let div;
-	  let t_value =
-	  /*value*/
-	  ctx[0].length + "";
-	  let t;
-	  return {
-	    c() {
-	      div = element("div");
-	      t = text(t_value);
-	      attr(div, "class", "counter");
-	    },
-
-	    m(target, anchor) {
-	      insert(target, div, anchor);
-	      append(div, t);
-	    },
-
-	    p(ctx, dirty) {
-	      if (dirty[0] &
-	      /*value*/
-	      1 && t_value !== (t_value =
-	      /*value*/
-	      ctx[0].length + "")) set_data(t, t_value);
-	    },
-
-	    d(detaching) {
-	      if (detaching) detach(div);
-	    }
-
-	  };
-	} // (140:4) {#if maxcharcount > 0}
-
-
-	function create_if_block_1$5(ctx) {
-	  let div;
-	  let t0_value =
-	  /*value*/
-	  ctx[0].length + "";
-	  let t0;
-	  let t1_value = `/${
-  /*maxcharcount*/
-  ctx[16]}` + "";
-	  let t1;
-	  return {
-	    c() {
-	      div = element("div");
-	      t0 = text(t0_value);
-	      t1 = text(t1_value);
-	      attr(div, "class", "counter");
-	      toggle_class(div, "counter-error",
-	      /*value*/
-	      ctx[0].length >
-	      /*maxcharcount*/
-	      ctx[16]);
-	    },
-
-	    m(target, anchor) {
-	      insert(target, div, anchor);
-	      append(div, t0);
-	      append(div, t1);
-	    },
-
-	    p(ctx, dirty) {
-	      if (dirty[0] &
-	      /*value*/
-	      1 && t0_value !== (t0_value =
-	      /*value*/
-	      ctx[0].length + "")) set_data(t0, t0_value);
-	      if (dirty[0] &
-	      /*maxcharcount*/
-	      65536 && t1_value !== (t1_value = `/${
-      /*maxcharcount*/
-      ctx[16]}` + "")) set_data(t1, t1_value);
-
-	      if (dirty[0] &
-	      /*value, maxcharcount*/
-	      65537) {
-	        toggle_class(div, "counter-error",
-	        /*value*/
-	        ctx[0].length >
-	        /*maxcharcount*/
-	        ctx[16]);
-	      }
-	    },
-
-	    d(detaching) {
-	      if (detaching) detach(div);
-	    }
-
 	  };
 	}
 
@@ -8738,32 +8633,28 @@
 	  let t3;
 	  let t4;
 	  let div0_class_value;
-	  let t5;
 	  let div1_style_value;
 	  let mounted;
 	  let dispose;
 	  let if_block0 =
 	  /*prefix*/
-	  ctx[14] && create_if_block_7(ctx);
+	  ctx[14] && create_if_block_4(ctx);
 	  let if_block1 =
 	  /*leadingicon*/
-	  ctx[5] && create_if_block_6(ctx);
+	  ctx[5] && create_if_block_3$2(ctx);
 	  let if_block2 =
 	  /*trailingicon*/
 	  ctx[6] && !
 	  /*handlesTrailingIconClick*/
-	  ctx[22] && create_if_block_5(ctx);
+	  ctx[20] && create_if_block_2$4(ctx);
 	  let if_block3 =
 	  /*trailingicon*/
 	  ctx[6] &&
 	  /*handlesTrailingIconClick*/
-	  ctx[22] && create_if_block_4(ctx);
+	  ctx[20] && create_if_block_1$5(ctx);
 	  let if_block4 =
 	  /*suffix*/
-	  ctx[15] && create_if_block_3$2(ctx);
-	  let if_block5 =
-	  /*showCounter*/
-	  ctx[18] && create_if_block$7(ctx);
+	  ctx[15] && create_if_block$7(ctx);
 	  return {
 	    c() {
 	      div1 = element("div");
@@ -8779,8 +8670,6 @@
 	      if (if_block3) if_block3.c();
 	      t4 = space();
 	      if (if_block4) if_block4.c();
-	      t5 = space();
-	      if (if_block5) if_block5.c();
 	      this.c = noop;
 	      attr(input, "class", input_class_value = `input--${
       /*variant*/
@@ -8790,10 +8679,10 @@
       ctx[6] ? "-0.5rem" : "0"}`);
 	      input.readOnly =
 	      /*isReadonly*/
-	      ctx[21];
+	      ctx[19];
 	      input.disabled =
 	      /*isDisabled*/
-	      ctx[19];
+	      ctx[17];
 	      attr(input, "data-testid",
 	      /*testid*/
 	      ctx[8]);
@@ -8831,7 +8720,7 @@
       goa-input
       ${
       /*isDisabled*/
-      ctx[19] ? "goa-input--disabled" : ""}
+      ctx[17] ? "goa-input--disabled" : ""}
       variant--${
       /*variant*/
       ctx[7]}
@@ -8841,7 +8730,7 @@
     `);
 	      toggle_class(div0, "error",
 	      /*isError*/
-	      ctx[20]);
+	      ctx[18]);
 	      attr(div1, "class", "container");
 	      attr(div1, "style", div1_style_value = `
     --width: ${
@@ -8860,34 +8749,32 @@
 	      append(div0, input);
 	      /*input_binding*/
 
-	      ctx[31](input);
+	      ctx[28](input);
 	      append(div0, t2);
 	      if (if_block2) if_block2.m(div0, null);
 	      append(div0, t3);
 	      if (if_block3) if_block3.m(div0, null);
 	      append(div0, t4);
 	      if (if_block4) if_block4.m(div0, null);
-	      append(div1, t5);
-	      if (if_block5) if_block5.m(div1, null);
 
 	      if (!mounted) {
 	        dispose = [listen(input, "keyup",
 	        /*onKeyUp*/
-	        ctx[23]), listen(input, "change",
+	        ctx[21]), listen(input, "change",
 	        /*onKeyUp*/
-	        ctx[23])];
+	        ctx[21])];
 	        mounted = true;
 	      }
 	    },
 
-	    p(ctx, dirty) {
+	    p(ctx, [dirty]) {
 	      if (
 	      /*prefix*/
 	      ctx[14]) {
 	        if (if_block0) {
 	          if_block0.p(ctx, dirty);
 	        } else {
-	          if_block0 = create_if_block_7(ctx);
+	          if_block0 = create_if_block_4(ctx);
 	          if_block0.c();
 	          if_block0.m(div0, t0);
 	        }
@@ -8902,7 +8789,7 @@
 	        if (if_block1) {
 	          if_block1.p(ctx, dirty);
 	        } else {
-	          if_block1 = create_if_block_6(ctx);
+	          if_block1 = create_if_block_3$2(ctx);
 	          if_block1.c();
 	          if_block1.m(div0, t1);
 	        }
@@ -8911,7 +8798,7 @@
 	        if_block1 = null;
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*variant*/
 	      128 && input_class_value !== (input_class_value = `input--${
       /*variant*/
@@ -8919,7 +8806,7 @@
 	        attr(input, "class", input_class_value);
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*trailingicon*/
 	      64 && input_style_value !== (input_style_value = `--search-icon-offset: ${
       /*trailingicon*/
@@ -8927,23 +8814,23 @@
 	        attr(input, "style", input_style_value);
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*isReadonly*/
-	      2097152) {
+	      524288) {
 	        input.readOnly =
 	        /*isReadonly*/
-	        ctx[21];
+	        ctx[19];
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*isDisabled*/
-	      524288) {
+	      131072) {
 	        input.disabled =
 	        /*isDisabled*/
-	        ctx[19];
+	        ctx[17];
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*testid*/
 	      256) {
 	        attr(input, "data-testid",
@@ -8951,7 +8838,7 @@
 	        ctx[8]);
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*autocapitalize*/
 	      8) {
 	        attr(input, "autocapitalize",
@@ -8959,7 +8846,7 @@
 	        ctx[3]);
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*name*/
 	      4) {
 	        attr(input, "name",
@@ -8967,7 +8854,7 @@
 	        ctx[2]);
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*type*/
 	      2) {
 	        attr(input, "type",
@@ -8975,7 +8862,7 @@
 	        ctx[1]);
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*value*/
 	      1 && input.value !==
 	      /*value*/
@@ -8985,7 +8872,7 @@
 	        ctx[0];
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*placeholder*/
 	      16) {
 	        attr(input, "placeholder",
@@ -8993,7 +8880,7 @@
 	        ctx[4]);
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*min*/
 	      2048) {
 	        attr(input, "min",
@@ -9001,7 +8888,7 @@
 	        ctx[11]);
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*max*/
 	      4096) {
 	        attr(input, "max",
@@ -9009,7 +8896,7 @@
 	        ctx[12]);
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*step*/
 	      8192) {
 	        attr(input, "step",
@@ -9017,7 +8904,7 @@
 	        ctx[13]);
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*arialabel, name*/
 	      1028 && input_aria_label_value !== (input_aria_label_value =
 	      /*arialabel*/
@@ -9031,11 +8918,11 @@
 	      /*trailingicon*/
 	      ctx[6] && !
 	      /*handlesTrailingIconClick*/
-	      ctx[22]) {
+	      ctx[20]) {
 	        if (if_block2) {
 	          if_block2.p(ctx, dirty);
 	        } else {
-	          if_block2 = create_if_block_5(ctx);
+	          if_block2 = create_if_block_2$4(ctx);
 	          if_block2.c();
 	          if_block2.m(div0, t3);
 	        }
@@ -9048,11 +8935,11 @@
 	      /*trailingicon*/
 	      ctx[6] &&
 	      /*handlesTrailingIconClick*/
-	      ctx[22]) {
+	      ctx[20]) {
 	        if (if_block3) {
 	          if_block3.p(ctx, dirty);
 	        } else {
-	          if_block3 = create_if_block_4(ctx);
+	          if_block3 = create_if_block_1$5(ctx);
 	          if_block3.c();
 	          if_block3.m(div0, t4);
 	        }
@@ -9067,7 +8954,7 @@
 	        if (if_block4) {
 	          if_block4.p(ctx, dirty);
 	        } else {
-	          if_block4 = create_if_block_3$2(ctx);
+	          if_block4 = create_if_block$7(ctx);
 	          if_block4.c();
 	          if_block4.m(div0, null);
 	        }
@@ -9076,13 +8963,13 @@
 	        if_block4 = null;
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*isDisabled, variant, type*/
-	      524418 && div0_class_value !== (div0_class_value = `
+	      131202 && div0_class_value !== (div0_class_value = `
       goa-input
       ${
       /*isDisabled*/
-      ctx[19] ? "goa-input--disabled" : ""}
+      ctx[17] ? "goa-input--disabled" : ""}
       variant--${
       /*variant*/
       ctx[7]}
@@ -9093,30 +8980,15 @@
 	        attr(div0, "class", div0_class_value);
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*isDisabled, variant, type, isError*/
-	      1572994) {
+	      393346) {
 	        toggle_class(div0, "error",
 	        /*isError*/
-	        ctx[20]);
-	      }
-
-	      if (
-	      /*showCounter*/
-	      ctx[18]) {
-	        if (if_block5) {
-	          if_block5.p(ctx, dirty);
-	        } else {
-	          if_block5 = create_if_block$7(ctx);
-	          if_block5.c();
-	          if_block5.m(div1, null);
-	        }
-	      } else if (if_block5) {
-	        if_block5.d(1);
-	        if_block5 = null;
+	        ctx[18]);
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*width*/
 	      512 && div1_style_value !== (div1_style_value = `
     --width: ${
@@ -9136,11 +9008,10 @@
 	      if (if_block1) if_block1.d();
 	      /*input_binding*/
 
-	      ctx[31](null);
+	      ctx[28](null);
 	      if (if_block2) if_block2.d();
 	      if (if_block3) if_block3.d();
 	      if (if_block4) if_block4.d();
-	      if (if_block5) if_block5.d();
 	      mounted = false;
 	      run_all(dispose);
 	    }
@@ -9160,7 +9031,6 @@
 	  let isReadonly;
 	  let isError;
 	  let isDisabled;
-	  let showCounter;
 	  let {
 	    type = "text"
 	  } = $$props;
@@ -9224,12 +9094,6 @@
 	  let {
 	    suffix = ""
 	  } = $$props;
-	  let {
-	    showcounter = "false"
-	  } = $$props;
-	  let {
-	    maxcharcount = 0
-	  } = $$props;
 	  let inputEl;
 
 	  function onKeyUp(e) {
@@ -9248,7 +9112,7 @@
 	  function input_binding($$value) {
 	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 	      inputEl = $$value;
-	      $$invalidate(17, inputEl);
+	      $$invalidate(16, inputEl);
 	    });
 	  }
 
@@ -9261,11 +9125,11 @@
 	    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 ('disabled' in $$props) $$invalidate(22, disabled = $$props.disabled);
+	    if ('handletrailingiconclick' in $$props) $$invalidate(23, handletrailingiconclick = $$props.handletrailingiconclick);
+	    if ('focused' in $$props) $$invalidate(24, focused = $$props.focused);
+	    if ('readonly' in $$props) $$invalidate(25, readonly = $$props.readonly);
+	    if ('error' in $$props) $$invalidate(26, 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);
@@ -9274,58 +9138,50 @@
 	    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[0] &
+	    if ($$self.$$.dirty &
 	    /*handletrailingiconclick*/
-	    33554432) {
-	      $$invalidate(22, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
+	    8388608) {
+	      $$invalidate(20, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
 	    }
 
-	    if ($$self.$$.dirty[0] &
+	    if ($$self.$$.dirty &
 	    /*focused*/
-	    67108864) {
-	      $$invalidate(30, isFocused = toBoolean(focused));
+	    16777216) {
+	      $$invalidate(27, isFocused = toBoolean(focused));
 	    }
 
-	    if ($$self.$$.dirty[0] &
+	    if ($$self.$$.dirty &
 	    /*readonly*/
-	    134217728) {
-	      $$invalidate(21, isReadonly = toBoolean(readonly));
+	    33554432) {
+	      $$invalidate(19, isReadonly = toBoolean(readonly));
 	    }
 
-	    if ($$self.$$.dirty[0] &
+	    if ($$self.$$.dirty &
 	    /*error*/
-	    268435456) {
-	      $$invalidate(20, isError = toBoolean(error));
+	    67108864) {
+	      $$invalidate(18, isError = toBoolean(error));
 	    }
 
-	    if ($$self.$$.dirty[0] &
+	    if ($$self.$$.dirty &
 	    /*disabled*/
-	    16777216) {
-	      $$invalidate(19, isDisabled = toBoolean(disabled));
-	    }
-
-	    if ($$self.$$.dirty[0] &
-	    /*showcounter*/
-	    536870912) {
-	      $$invalidate(18, showCounter = toBoolean(showcounter));
+	    4194304) {
+	      $$invalidate(17, isDisabled = toBoolean(disabled));
 	    }
 
-	    if ($$self.$$.dirty[0] &
+	    if ($$self.$$.dirty &
 	    /*isFocused, inputEl*/
-	    1073872896) {
+	    134283264) {
 	      if (isFocused && inputEl) {
 	        setTimeout(() => inputEl.focus(), 1);
 	      }
 	    }
 
-	    if ($$self.$$.dirty[0] &
+	    if ($$self.$$.dirty &
 	    /*inputEl, type*/
-	    131074) {
+	    65538) {
 	      if (inputEl && type === "search") {
 	        inputEl.addEventListener("search", e => {
 	          onKeyUp(e);
@@ -9334,13 +9190,13 @@
 	    }
 	  };
 
-	  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];
+	  return [value, type, name, autocapitalize, placeholder, leadingicon, trailingicon, variant, testid, width, arialabel, min, max, step, prefix, suffix, inputEl, isDisabled, isError, isReadonly, handlesTrailingIconClick, onKeyUp, disabled, handletrailingiconclick, focused, readonly, error, isFocused, input_binding];
 	}
 
 	class Input extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);background:white;display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto}input[type=text],input[type=date],input[type="datetime-local"],input[type=number]{font-family:var(--font-family)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix{background-color:var(--color-gray-100);padding:0 0.75rem;display:flex;align-items:center}.prefix{border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius);border-right:1px solid var(--color-gray-600)}.suffix{border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius);border-left:1px solid var(--color-gray-600)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.counter{position:absolute;padding-top:0.25rem;right:0;font-size:var(--fs-sm)}.counter-error{color:var(--goa-color-interactive--error)}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);background:white;display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto}input[type=text],input[type=date],input[type="datetime-local"],input[type=number]{font-family:var(--font-family)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix{background-color:var(--color-gray-100);padding:0 0.75rem;display:flex;align-items:center}.prefix{border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius);border-right:1px solid var(--color-gray-600)}.suffix{border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius);border-left:1px solid var(--color-gray-600)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
       center center no-repeat}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
@@ -9355,11 +9211,11 @@
 	      leadingicon: 5,
 	      trailingicon: 6,
 	      variant: 7,
-	      disabled: 24,
-	      handletrailingiconclick: 25,
-	      focused: 26,
-	      readonly: 27,
-	      error: 28,
+	      disabled: 22,
+	      handletrailingiconclick: 23,
+	      focused: 24,
+	      readonly: 25,
+	      error: 26,
 	      testid: 8,
 	      width: 9,
 	      arialabel: 10,
@@ -9367,10 +9223,8 @@
 	      max: 12,
 	      step: 13,
 	      prefix: 14,
-	      suffix: 15,
-	      showcounter: 29,
-	      maxcharcount: 16
-	    }, null, [-1, -1]);
+	      suffix: 15
+	    }, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -9385,7 +9239,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["type", "name", "value", "autocapitalize", "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"];
 	  }
 
 	  get type() {
@@ -9477,7 +9331,7 @@
 	  }
 
 	  get disabled() {
-	    return this.$$.ctx[24];
+	    return this.$$.ctx[22];
 	  }
 
 	  set disabled(disabled) {
@@ -9488,7 +9342,7 @@
 	  }
 
 	  get handletrailingiconclick() {
-	    return this.$$.ctx[25];
+	    return this.$$.ctx[23];
 	  }
 
 	  set handletrailingiconclick(handletrailingiconclick) {
@@ -9499,7 +9353,7 @@
 	  }
 
 	  get focused() {
-	    return this.$$.ctx[26];
+	    return this.$$.ctx[24];
 	  }
 
 	  set focused(focused) {
@@ -9510,7 +9364,7 @@
 	  }
 
 	  get readonly() {
-	    return this.$$.ctx[27];
+	    return this.$$.ctx[25];
 	  }
 
 	  set readonly(readonly) {
@@ -9521,7 +9375,7 @@
 	  }
 
 	  get error() {
-	    return this.$$.ctx[28];
+	    return this.$$.ctx[26];
 	  }
 
 	  set error(error) {
@@ -9619,28 +9473,6 @@
 	    flush();
 	  }
 
-	  get showcounter() {
-	    return this.$$.ctx[29];
-	  }
-
-	  set showcounter(showcounter) {
-	    this.$$set({
-	      showcounter
-	    });
-	    flush();
-	  }
-
-	  get maxcharcount() {
-	    return this.$$.ctx[16];
-	  }
-
-	  set maxcharcount(maxcharcount) {
-	    this.$$set({
-	      maxcharcount
-	    });
-	    flush();
-	  }
-
 	}
 
 	customElements.define("goa-input", Input);
@@ -14694,12 +14526,12 @@
 	  var children = _a.children,
 	      helpText = _a.helpText,
 	      error = _a.error,
-	      optional = _a.optional,
+	      requirement = _a.requirement,
 	      label = _a.label;
 	  return jsxRuntime.jsx("goa-form-item", __assign({
 	    label: label,
 	    error: error,
-	    optional: optional ? "true" : "false",
+	    requirement: requirement,
 	    helptext: helpText
 	  }, {
 	    children: children
@@ -14799,8 +14631,6 @@
 	      placeholder = _a.placeholder,
 	      error = _a.error,
 	      width = _a.width,
-	      showCounter = _a.showCounter,
-	      maxCharCount = _a.maxCharCount,
 	      testId = _a.testId,
 	      min = _a.min,
 	      max = _a.max,
@@ -14857,8 +14687,6 @@
 	    step: step,
 	    prefix: prefix,
 	    suffix: suffix,
-	    showcounter: showCounter,
-	    maxcharcount: maxCharCount,
 	    handletrailingiconclick: !!onTrailingIconClick
 	  }, void 0);
 	};