@abgov/react-components 4.0.0-alpha.76 → 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));
 	    }
 
@@ -4861,7 +4867,7 @@
 	  child_ctx[39] = list[i];
 	  child_ctx[41] = i;
 	  return child_ctx;
-	} // (201:2) {#if isMenuVisible}
+	} // (204:2) {#if isMenuVisible}
 
 
 	function create_if_block$c(ctx) {
@@ -4884,7 +4890,7 @@
 	      if (!mounted) {
 	        dispose = listen(div, "click",
 	        /*closeMenu*/
-	        ctx[18]);
+	        ctx[17]);
 	        mounted = true;
 	      }
 	    },
@@ -4906,7 +4912,7 @@
 	    }
 
 	  };
-	} // (242:4) {#each options as option, index}
+	} // (243:4) {#each options as option, index}
 
 
 	function create_each_block$4(ctx) {
@@ -4929,7 +4935,7 @@
 	  function click_handler() {
 	    return (
 	      /*click_handler*/
-	      ctx[22](
+	      ctx[21](
 	      /*option*/
 	      ctx[39])
 	    );
@@ -4950,13 +4956,13 @@
 	      ctx[39].value);
 	      attr(li, "aria-selected", li_aria_selected_value =
 	      /*_values*/
-	      ctx[9].includes(
+	      ctx[8].includes(
 	      /*option*/
 	      ctx[39].value) ? "true" : "false");
 	      attr(li, "class", "goa-dropdown-option");
-	      attr(li, "data-testid", li_data_testid_value = `${
+	      attr(li, "data-testid", li_data_testid_value = `dropdown-item-${
       /*option*/
-      ctx[39].value}-dropdown-item`);
+      ctx[39].value}`);
 	      attr(li, "data-index", li_data_index_value =
 	      /*index*/
 	      ctx[41]);
@@ -4966,10 +4972,10 @@
 	      /*index*/
 	      ctx[41] ===
 	      /*highlightedIndex*/
-	      ctx[13]);
+	      ctx[12]);
 	      toggle_class(li, "goa-dropdown-option--selected",
 	      /*_values*/
-	      ctx[9].includes(
+	      ctx[8].includes(
 	      /*option*/
 	      ctx[39].value));
 	    },
@@ -4988,7 +4994,7 @@
 	      ctx = new_ctx;
 	      if (dirty[0] &
 	      /*options*/
-	      1024 && t_value !== (t_value = (
+	      512 && t_value !== (t_value = (
 	      /*option*/
 	      ctx[39].label ||
 	      /*option*/
@@ -4996,7 +5002,7 @@
 
 	      if (dirty[0] &
 	      /*options*/
-	      1024 && li_id_value !== (li_id_value =
+	      512 && li_id_value !== (li_id_value =
 	      /*option*/
 	      ctx[39].label)) {
 	        attr(li, "id", li_id_value);
@@ -5004,7 +5010,7 @@
 
 	      if (dirty[0] &
 	      /*options*/
-	      1024 && li_aria_label_value !== (li_aria_label_value =
+	      512 && li_aria_label_value !== (li_aria_label_value =
 	      /*option*/
 	      ctx[39].label ||
 	      /*option*/
@@ -5014,9 +5020,9 @@
 
 	      if (dirty[0] &
 	      /*_values, options*/
-	      1536 && li_aria_selected_value !== (li_aria_selected_value =
+	      768 && li_aria_selected_value !== (li_aria_selected_value =
 	      /*_values*/
-	      ctx[9].includes(
+	      ctx[8].includes(
 	      /*option*/
 	      ctx[39].value) ? "true" : "false")) {
 	        attr(li, "aria-selected", li_aria_selected_value);
@@ -5024,28 +5030,28 @@
 
 	      if (dirty[0] &
 	      /*options*/
-	      1024 && li_data_testid_value !== (li_data_testid_value = `${
+	      512 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${
       /*option*/
-      ctx[39].value}-dropdown-item`)) {
+      ctx[39].value}`)) {
 	        attr(li, "data-testid", li_data_testid_value);
 	      }
 
 	      if (dirty[0] &
 	      /*highlightedIndex*/
-	      8192) {
+	      4096) {
 	        toggle_class(li, "goa-dropdown-option--tabbed",
 	        /*index*/
 	        ctx[41] ===
 	        /*highlightedIndex*/
-	        ctx[13]);
+	        ctx[12]);
 	      }
 
 	      if (dirty[0] &
 	      /*_values, options*/
-	      1536) {
+	      768) {
 	        toggle_class(li, "goa-dropdown-option--selected",
 	        /*_values*/
-	        ctx[9].includes(
+	        ctx[8].includes(
 	        /*option*/
 	        ctx[39].value));
 	      }
@@ -5061,27 +5067,26 @@
 	}
 
 	function create_fragment$r(ctx) {
-	  let div1;
+	  let div;
 	  let t0;
-	  let div0;
 	  let goa_input;
-	  let goa_input_id_value;
+	  let goa_input_data_testid_value;
 	  let goa_input_aria_label_value;
-	  let div0_data_testid_value;
 	  let t1;
 	  let ul;
 	  let t2;
 	  let slot;
 	  let ul_style_value;
-	  let div1_style_value;
+	  let div_data_testid_value;
+	  let div_style_value;
 	  let mounted;
 	  let dispose;
 	  let if_block =
 	  /*isMenuVisible*/
-	  ctx[12] && create_if_block$c(ctx);
+	  ctx[11] && create_if_block$c(ctx);
 	  let each_value =
 	  /*options*/
-	  ctx[10];
+	  ctx[9];
 	  let each_blocks = [];
 
 	  for (let i = 0; i < each_value.length; i += 1) {
@@ -5090,10 +5095,9 @@
 
 	  return {
 	    c() {
-	      div1 = element("div");
+	      div = element("div");
 	      if (if_block) if_block.c();
 	      t0 = space();
-	      div0 = element("div");
 	      goa_input = element("goa-input");
 	      t1 = space();
 	      ul = element("ul");
@@ -5107,10 +5111,10 @@
 	      this.c = noop;
 	      set_custom_element_data(goa_input, "error",
 	      /*error*/
-	      ctx[8]);
+	      ctx[7]);
 	      set_custom_element_data(goa_input, "disabled",
 	      /*disabled*/
-	      ctx[7]);
+	      ctx[6]);
 	      set_custom_element_data(goa_input, "leadingicon",
 	      /*leadingicon*/
 	      ctx[2]);
@@ -5118,7 +5122,7 @@
 	      /*placeholder*/
 	      ctx[4]);
 	      set_custom_element_data(goa_input, "width", "100%");
-	      set_custom_element_data(goa_input, "id", goa_input_id_value = `${
+	      set_custom_element_data(goa_input, "data-testid", goa_input_data_testid_value = `${
       /*name*/
       ctx[0]}-dropdown-input`);
 	      set_custom_element_data(goa_input, "role", "combobox");
@@ -5129,22 +5133,19 @@
 	      ctx[0]);
 	      set_custom_element_data(goa_input, "aria-expanded",
 	      /*isMenuVisible*/
-	      ctx[12]);
+	      ctx[11]);
 	      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");
 	      set_custom_element_data(goa_input, "value",
 	      /*selectedLabel*/
-	      ctx[11]);
-	      attr(div0, "data-testid", div0_data_testid_value = `${
-      /*name*/
-      ctx[0]}-dropdown`);
+	      ctx[10]);
 	      attr(ul, "id", "menu");
 	      attr(ul, "role", "listbox");
 	      attr(ul, "aria-activedescendant",
 	      /*selectedLabel*/
-	      ctx[11]);
+	      ctx[10]);
 	      attr(ul, "data-testid", "dropdown-menu");
 	      attr(ul, "tabindex", "0");
 	      attr(ul, "class", "goa-dropdown-list");
@@ -5153,26 +5154,25 @@
       ctx[3]}`);
 	      toggle_class(ul, "dropdown-active",
 	      /*isMenuVisible*/
-	      ctx[12]);
-	      attr(div1, "data-testid",
-	      /*testid*/
-	      ctx[5]);
-	      attr(div1, "class", "goa-dropdown-box");
-	      attr(div1, "style", div1_style_value = `--width: ${
+	      ctx[11]);
+	      attr(div, "data-testid", div_data_testid_value = `${
+      /*name*/
+      ctx[0]}-dropdown`);
+	      attr(div, "class", "goa-dropdown-box");
+	      attr(div, "style", div_style_value = `--width: ${
       /*width*/
-      ctx[6] ||
+      ctx[5] ||
       /*computedWidth*/
-      ctx[14]}`);
+      ctx[13]}`);
 	    },
 
 	    m(target, anchor) {
-	      insert(target, div1, anchor);
-	      if (if_block) if_block.m(div1, null);
-	      append(div1, t0);
-	      append(div1, div0);
-	      append(div0, goa_input);
-	      append(div1, t1);
-	      append(div1, ul);
+	      insert(target, div, anchor);
+	      if (if_block) if_block.m(div, null);
+	      append(div, t0);
+	      append(div, goa_input);
+	      append(div, t1);
+	      append(div, ul);
 
 	      for (let i = 0; i < each_blocks.length; i += 1) {
 	        each_blocks[i].m(ul, null);
@@ -5182,15 +5182,15 @@
 	      append(ul, slot);
 	      /*ul_binding*/
 
-	      ctx[23](ul);
-	      /*div1_binding*/
+	      ctx[22](ul);
+	      /*div_binding*/
 
-	      ctx[24](div1);
+	      ctx[23](div);
 
 	      if (!mounted) {
 	        dispose = listen(goa_input, "click",
 	        /*showMenu*/
-	        ctx[17]);
+	        ctx[16]);
 	        mounted = true;
 	      }
 	    },
@@ -5198,13 +5198,13 @@
 	    p(ctx, dirty) {
 	      if (
 	      /*isMenuVisible*/
-	      ctx[12]) {
+	      ctx[11]) {
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
 	          if_block = create_if_block$c(ctx);
 	          if_block.c();
-	          if_block.m(div1, t0);
+	          if_block.m(div, t0);
 	        }
 	      } else if (if_block) {
 	        if_block.d(1);
@@ -5213,18 +5213,18 @@
 
 	      if (dirty[0] &
 	      /*error*/
-	      256) {
+	      128) {
 	        set_custom_element_data(goa_input, "error",
 	        /*error*/
-	        ctx[8]);
+	        ctx[7]);
 	      }
 
 	      if (dirty[0] &
 	      /*disabled*/
-	      128) {
+	      64) {
 	        set_custom_element_data(goa_input, "disabled",
 	        /*disabled*/
-	        ctx[7]);
+	        ctx[6]);
 	      }
 
 	      if (dirty[0] &
@@ -5245,10 +5245,10 @@
 
 	      if (dirty[0] &
 	      /*name*/
-	      1 && goa_input_id_value !== (goa_input_id_value = `${
+	      1 && goa_input_data_testid_value !== (goa_input_data_testid_value = `${
       /*name*/
       ctx[0]}-dropdown-input`)) {
-	        set_custom_element_data(goa_input, "id", goa_input_id_value);
+	        set_custom_element_data(goa_input, "data-testid", goa_input_data_testid_value);
 	      }
 
 	      if (dirty[0] &
@@ -5263,34 +5263,26 @@
 
 	      if (dirty[0] &
 	      /*isMenuVisible*/
-	      4096) {
+	      2048) {
 	        set_custom_element_data(goa_input, "aria-expanded",
 	        /*isMenuVisible*/
-	        ctx[12]);
+	        ctx[11]);
 	      }
 
 	      if (dirty[0] &
 	      /*selectedLabel*/
-	      2048) {
+	      1024) {
 	        set_custom_element_data(goa_input, "value",
 	        /*selectedLabel*/
-	        ctx[11]);
-	      }
-
-	      if (dirty[0] &
-	      /*name*/
-	      1 && div0_data_testid_value !== (div0_data_testid_value = `${
-      /*name*/
-      ctx[0]}-dropdown`)) {
-	        attr(div0, "data-testid", div0_data_testid_value);
+	        ctx[10]);
 	      }
 
 	      if (dirty[0] &
 	      /*options, _values, highlightedIndex, onSelect*/
-	      534016) {
+	      267008) {
 	        each_value =
 	        /*options*/
-	        ctx[10];
+	        ctx[9];
 	        let i;
 
 	        for (i = 0; i < each_value.length; i += 1) {
@@ -5314,10 +5306,10 @@
 
 	      if (dirty[0] &
 	      /*selectedLabel*/
-	      2048) {
+	      1024) {
 	        attr(ul, "aria-activedescendant",
 	        /*selectedLabel*/
-	        ctx[11]);
+	        ctx[10]);
 	      }
 
 	      if (dirty[0] &
@@ -5330,28 +5322,28 @@
 
 	      if (dirty[0] &
 	      /*isMenuVisible*/
-	      4096) {
+	      2048) {
 	        toggle_class(ul, "dropdown-active",
 	        /*isMenuVisible*/
-	        ctx[12]);
+	        ctx[11]);
 	      }
 
 	      if (dirty[0] &
-	      /*testid*/
-	      32) {
-	        attr(div1, "data-testid",
-	        /*testid*/
-	        ctx[5]);
+	      /*name*/
+	      1 && div_data_testid_value !== (div_data_testid_value = `${
+      /*name*/
+      ctx[0]}-dropdown`)) {
+	        attr(div, "data-testid", div_data_testid_value);
 	      }
 
 	      if (dirty[0] &
 	      /*width, computedWidth*/
-	      16448 && div1_style_value !== (div1_style_value = `--width: ${
+	      8224 && div_style_value !== (div_style_value = `--width: ${
       /*width*/
-      ctx[6] ||
+      ctx[5] ||
       /*computedWidth*/
-      ctx[14]}`)) {
-	        attr(div1, "style", div1_style_value);
+      ctx[13]}`)) {
+	        attr(div, "style", div_style_value);
 	      }
 	    },
 
@@ -5359,15 +5351,15 @@
 	    o: noop,
 
 	    d(detaching) {
-	      if (detaching) detach(div1);
+	      if (detaching) detach(div);
 	      if (if_block) if_block.d();
 	      destroy_each(each_blocks, detaching);
 	      /*ul_binding*/
 
-	      ctx[23](null);
-	      /*div1_binding*/
+	      ctx[22](null);
+	      /*div_binding*/
 
-	      ctx[24](null);
+	      ctx[23](null);
 	      mounted = false;
 	      dispose();
 	    }
@@ -5383,13 +5375,12 @@
 	      return;
 	    }
 
-	    $$invalidate(12, isMenuVisible = true);
+	    $$invalidate(11, isMenuVisible = true);
 	    return _call(tick, function () {
 	      // hide menu on blur
 	      menuEl.addEventListener("blur", closeMenu);
 	      menuEl.focus(); // bind up/down arrows to navigate options
 
-	      menuEl.addEventListener("keydown", onMenuKeyDown);
 	      menuEl.addEventListener("mouseover", onHighlight);
 	    });
 	  });
@@ -5416,9 +5407,6 @@
 	  let {
 	    placeholder = ""
 	  } = $$props;
-	  let {
-	    testid = ""
-	  } = $$props;
 	  let {
 	    width = ""
 	  } = $$props;
@@ -5491,7 +5479,7 @@
 
 	    const rawValues = typeof rawValue === "object" ? rawValue : [rawValue]; // convert all values to strings to avoid later type comparison issues
 
-	    $$invalidate(9, _values = rawValues.map(val => `${val}`));
+	    $$invalidate(8, _values = rawValues.map(val => `${val}`));
 	  }
 
 	  function bindContext() {
@@ -5504,17 +5492,17 @@
 
 	            const selected = _values.includes(_data.value);
 
-	            $$invalidate(10, options = [...options, Object.assign(Object.assign({}, _data), {
+	            $$invalidate(9, options = [...options, Object.assign(Object.assign({}, _data), {
 	              selected
 	            })]);
 
 	            if (selected) {
-	              $$invalidate(11, selectedLabel = _data.label);
+	              $$invalidate(10, selectedLabel = _data.label);
 	            }
 
 	            if (!width && maxLetterCount < _data.label.length) {
 	              maxLetterCount = _data.label.length;
-	              $$invalidate(14, computedWidth = `${Math.max(20, maxLetterCount + 12)}ch`);
+	              $$invalidate(13, computedWidth = `${Math.max(20, maxLetterCount + 12)}ch`);
 	            }
 
 	            setHighlightedIndexToSelected();
@@ -5526,20 +5514,19 @@
 
 	  function closeMenu() {
 	    menuEl.removeEventListener("blur", closeMenu);
-	    menuEl.removeEventListener("keydown", onMenuKeyDown);
 	    menuEl.removeEventListener("mouseover", onHighlight);
 	    setHighlightedIndexToSelected();
-	    $$invalidate(12, isMenuVisible = false);
+	    $$invalidate(11, isMenuVisible = false);
 	  }
 
 	  function setHighlightedIndexToSelected() {
-	    $$invalidate(13, highlightedIndex = options.findIndex(option => _values.includes(option.value)));
+	    $$invalidate(12, highlightedIndex = options.findIndex(option => _values.includes(option.value)));
 	  } // Event handlers
 
 
 	  function onSelect(val, label, close) {
 	    if (_disabled) return;
-	    $$invalidate(11, selectedLabel = label);
+	    $$invalidate(10, selectedLabel = label);
 
 	    if (_multiselect) {
 	      _values.push(val);
@@ -5552,7 +5539,7 @@
 	        }
 	      }));
 	    } else {
-	      $$invalidate(9, _values = [val]);
+	      $$invalidate(8, _values = [val]);
 	      el.dispatchEvent(new CustomEvent("_change", {
 	        composed: true,
 	        detail: {
@@ -5570,57 +5557,66 @@
 	  const onInputKeyDown = e => {
 	    switch (e.key) {
 	      case " ":
-	        showMenu();
+	      case "Enter":
+	        isMenuVisible ? closeMenu() : showMenu();
 	        e.preventDefault();
 	        break;
-	    }
-	  }; // add required bindings to component
-
-
-	  function onFocus() {
-	    el.addEventListener("keydown", onInputKeyDown);
-	  } // remove all bindings from component
-
-
-	  function onBlur() {
-	    el.removeEventListener("keydown", onInputKeyDown);
-	  }
-
-	  function onMenuKeyDown(e) {
-	    switch (e.key) {
-	      case "ArrowUp":
-	        if (highlightedIndex > 0) {
-	          $$invalidate(13, highlightedIndex--, highlightedIndex);
-	          onSelect(options[highlightedIndex].value, options[highlightedIndex].label, false);
-	        }
 
+	      case "Escape":
+	        isMenuVisible && closeMenu();
 	        e.preventDefault();
 	        break;
 
 	      case "ArrowDown":
-	        if (highlightedIndex < options.length - 1) {
-	          $$invalidate(13, highlightedIndex++, highlightedIndex);
-	          onSelect(options[highlightedIndex].value, options[highlightedIndex].label, false);
+	        if (e.altKey) {
+	          isMenuVisible ? closeMenu() : showMenu();
+	          break;
 	        }
 
-	        e.preventDefault();
-	        break;
+	        _handleArrowDown();
 
-	      case "Tab":
-	      case "Enter":
-	        closeMenu();
 	        e.preventDefault();
 	        break;
 
-	      case "Escape":
-	        closeMenu();
+	      case "ArrowUp":
+	        if (e.altKey) {
+	          isMenuVisible ? closeMenu() : showMenu();
+	          break;
+	        }
+
+	        _handleArrowUp();
+
 	        e.preventDefault();
 	        break;
 	    }
+	  };
+
+	  function _handleArrowDown() {
+	    if (highlightedIndex < options.length - 1) {
+	      $$invalidate(12, highlightedIndex++, highlightedIndex);
+	      onSelect(options[highlightedIndex].value, options[highlightedIndex].label, false);
+	    }
+	  }
+
+	  function _handleArrowUp() {
+	    if (highlightedIndex > 0) {
+	      $$invalidate(12, highlightedIndex--, highlightedIndex);
+	      onSelect(options[highlightedIndex].value, options[highlightedIndex].label, false);
+	    }
+	  } // add required bindings to component
+
+
+	  function onFocus() {
+	    el.addEventListener("keydown", onInputKeyDown);
+	  } // remove all bindings from component
+
+
+	  function onBlur() {
+	    el.removeEventListener("keydown", onInputKeyDown);
 	  }
 
 	  function onHighlight(e) {
-	    $$invalidate(13, highlightedIndex = Number(e.target.dataset.index));
+	    $$invalidate(12, highlightedIndex = Number(e.target.dataset.index));
 	  }
 
 	  const click_handler = option => onSelect(option.value, option.label, true);
@@ -5628,46 +5624,45 @@
 	  function ul_binding($$value) {
 	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 	      menuEl = $$value;
-	      $$invalidate(16, menuEl);
+	      $$invalidate(15, menuEl);
 	    });
 	  }
 
-	  function div1_binding($$value) {
+	  function div_binding($$value) {
 	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 	      el = $$value;
-	      $$invalidate(15, el);
+	      $$invalidate(14, el);
 	    });
 	  }
 
 	  $$self.$$set = $$props => {
 	    if ('name' in $$props) $$invalidate(0, name = $$props.name);
 	    if ('arialabel' in $$props) $$invalidate(1, arialabel = $$props.arialabel);
-	    if ('value' in $$props) $$invalidate(20, value = $$props.value);
+	    if ('value' in $$props) $$invalidate(19, value = $$props.value);
 	    if ('leadingicon' in $$props) $$invalidate(2, leadingicon = $$props.leadingicon);
 	    if ('maxheight' in $$props) $$invalidate(3, maxheight = $$props.maxheight);
 	    if ('placeholder' in $$props) $$invalidate(4, placeholder = $$props.placeholder);
-	    if ('testid' in $$props) $$invalidate(5, testid = $$props.testid);
-	    if ('width' in $$props) $$invalidate(6, width = $$props.width);
-	    if ('disabled' in $$props) $$invalidate(7, disabled = $$props.disabled);
-	    if ('error' in $$props) $$invalidate(8, error = $$props.error);
-	    if ('multiselect' in $$props) $$invalidate(21, multiselect = $$props.multiselect);
+	    if ('width' in $$props) $$invalidate(5, width = $$props.width);
+	    if ('disabled' in $$props) $$invalidate(6, disabled = $$props.disabled);
+	    if ('error' in $$props) $$invalidate(7, error = $$props.error);
+	    if ('multiselect' in $$props) $$invalidate(20, multiselect = $$props.multiselect);
 	  };
 
 	  $$self.$$.update = () => {
 	    if ($$self.$$.dirty[0] &
 	    /*disabled*/
-	    128) {
+	    64) {
 	      _disabled = toBoolean(disabled);
 	    }
 
 	    if ($$self.$$.dirty[0] &
 	    /*multiselect*/
-	    2097152) {
+	    1048576) {
 	      _multiselect = toBoolean(multiselect);
 	    }
 	  };
 
-	  return [name, arialabel, leadingicon, maxheight, placeholder, testid, width, disabled, error, _values, options, selectedLabel, isMenuVisible, highlightedIndex, computedWidth, el, menuEl, showMenu, closeMenu, onSelect, value, multiselect, click_handler, ul_binding, div1_binding];
+	  return [name, arialabel, leadingicon, maxheight, placeholder, width, disabled, error, _values, options, selectedLabel, isMenuVisible, highlightedIndex, computedWidth, el, menuEl, showMenu, closeMenu, onSelect, value, multiselect, click_handler, ul_binding, div_binding];
 	}
 
 	class Dropdown extends SvelteElement {
@@ -5681,15 +5676,14 @@
 	    }, instance$p, create_fragment$r, safe_not_equal, {
 	      name: 0,
 	      arialabel: 1,
-	      value: 20,
+	      value: 19,
 	      leadingicon: 2,
 	      maxheight: 3,
 	      placeholder: 4,
-	      testid: 5,
-	      width: 6,
-	      disabled: 7,
-	      error: 8,
-	      multiselect: 21
+	      width: 5,
+	      disabled: 6,
+	      error: 7,
+	      multiselect: 20
 	    }, null, [-1, -1]);
 
 	    if (options) {
@@ -5705,7 +5699,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["name", "arialabel", "value", "leadingicon", "maxheight", "placeholder", "testid", "width", "disabled", "error", "multiselect"];
+	    return ["name", "arialabel", "value", "leadingicon", "maxheight", "placeholder", "width", "disabled", "error", "multiselect"];
 	  }
 
 	  get name() {
@@ -5731,7 +5725,7 @@
 	  }
 
 	  get value() {
-	    return this.$$.ctx[20];
+	    return this.$$.ctx[19];
 	  }
 
 	  set value(value) {
@@ -5774,19 +5768,8 @@
 	    flush();
 	  }
 
-	  get testid() {
-	    return this.$$.ctx[5];
-	  }
-
-	  set testid(testid) {
-	    this.$$set({
-	      testid
-	    });
-	    flush();
-	  }
-
 	  get width() {
-	    return this.$$.ctx[6];
+	    return this.$$.ctx[5];
 	  }
 
 	  set width(width) {
@@ -5797,7 +5780,7 @@
 	  }
 
 	  get disabled() {
-	    return this.$$.ctx[7];
+	    return this.$$.ctx[6];
 	  }
 
 	  set disabled(disabled) {
@@ -5808,7 +5791,7 @@
 	  }
 
 	  get error() {
-	    return this.$$.ctx[8];
+	    return this.$$.ctx[7];
 	  }
 
 	  set error(error) {
@@ -5819,7 +5802,7 @@
 	  }
 
 	  get multiselect() {
-	    return this.$$.ctx[21];
+	    return this.$$.ctx[20];
 	  }
 
 	  set multiselect(multiselect) {
@@ -7205,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");
@@ -7232,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);
 	        }
@@ -7253,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) {
@@ -7273,7 +7288,7 @@
 	    }
 
 	  };
-	} // (26:2) {#if error}
+	} // (36:2) {#if error}
 
 
 	function create_if_block_1$6(ctx) {
@@ -7306,7 +7321,7 @@
 	    }
 
 	  };
-	} // (29:2) {#if helptext}
+	} // (39:2) {#if helptext}
 
 
 	function create_if_block$9(ctx) {
@@ -7444,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;
@@ -7455,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 {
@@ -7488,7 +7505,7 @@
 	      label: 0,
 	      helptext: 1,
 	      error: 2,
-	      optional: 4
+	      requirement: 3
 	    }, null);
 
 	    if (options) {
@@ -7504,7 +7521,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["label", "helptext", "error", "optional"];
+	    return ["label", "helptext", "error", "requirement"];
 	  }
 
 	  get label() {
@@ -7540,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();
 	  }
@@ -8414,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 {
@@ -8432,7 +8449,7 @@
 	    },
 
 	    p(ctx, dirty) {
-	      if (dirty[0] &
+	      if (dirty &
 	      /*prefix*/
 	      16384) set_data(t,
 	      /*prefix*/
@@ -8444,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() {
@@ -8464,7 +8481,7 @@
 	    },
 
 	    p(ctx, dirty) {
-	      if (dirty[0] &
+	      if (dirty &
 	      /*leadingicon*/
 	      32) {
 	        set_custom_element_data(goa_icon, "type",
@@ -8478,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() {
@@ -8499,7 +8516,7 @@
 	    },
 
 	    p(ctx, dirty) {
-	      if (dirty[0] &
+	      if (dirty &
 	      /*trailingicon*/
 	      64) {
 	        set_custom_element_data(goa_icon, "type",
@@ -8513,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;
@@ -8525,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",
@@ -8544,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",
@@ -8568,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 {
@@ -8589,7 +8606,7 @@
 	    },
 
 	    p(ctx, dirty) {
-	      if (dirty[0] &
+	      if (dirty &
 	      /*suffix*/
 	      32768) set_data(t,
 	      /*suffix*/
@@ -8600,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);
-	    }
-
 	  };
 	}
 
@@ -8761,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");
@@ -8802,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*/
@@ -8813,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]);
@@ -8854,7 +8720,7 @@
       goa-input
       ${
       /*isDisabled*/
-      ctx[19] ? "goa-input--disabled" : ""}
+      ctx[17] ? "goa-input--disabled" : ""}
       variant--${
       /*variant*/
       ctx[7]}
@@ -8864,7 +8730,7 @@
     `);
 	      toggle_class(div0, "error",
 	      /*isError*/
-	      ctx[20]);
+	      ctx[18]);
 	      attr(div1, "class", "container");
 	      attr(div1, "style", div1_style_value = `
     --width: ${
@@ -8883,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);
 	        }
@@ -8925,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);
 	        }
@@ -8934,7 +8798,7 @@
 	        if_block1 = null;
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*variant*/
 	      128 && input_class_value !== (input_class_value = `input--${
       /*variant*/
@@ -8942,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*/
@@ -8950,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",
@@ -8974,7 +8838,7 @@
 	        ctx[8]);
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*autocapitalize*/
 	      8) {
 	        attr(input, "autocapitalize",
@@ -8982,7 +8846,7 @@
 	        ctx[3]);
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*name*/
 	      4) {
 	        attr(input, "name",
@@ -8990,7 +8854,7 @@
 	        ctx[2]);
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*type*/
 	      2) {
 	        attr(input, "type",
@@ -8998,7 +8862,7 @@
 	        ctx[1]);
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*value*/
 	      1 && input.value !==
 	      /*value*/
@@ -9008,7 +8872,7 @@
 	        ctx[0];
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*placeholder*/
 	      16) {
 	        attr(input, "placeholder",
@@ -9016,7 +8880,7 @@
 	        ctx[4]);
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*min*/
 	      2048) {
 	        attr(input, "min",
@@ -9024,7 +8888,7 @@
 	        ctx[11]);
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*max*/
 	      4096) {
 	        attr(input, "max",
@@ -9032,7 +8896,7 @@
 	        ctx[12]);
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*step*/
 	      8192) {
 	        attr(input, "step",
@@ -9040,7 +8904,7 @@
 	        ctx[13]);
 	      }
 
-	      if (dirty[0] &
+	      if (dirty &
 	      /*arialabel, name*/
 	      1028 && input_aria_label_value !== (input_aria_label_value =
 	      /*arialabel*/
@@ -9054,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);
 	        }
@@ -9071,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);
 	        }
@@ -9090,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);
 	        }
@@ -9099,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]}
@@ -9116,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: ${
@@ -9159,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);
 	    }
@@ -9183,7 +9031,6 @@
 	  let isReadonly;
 	  let isError;
 	  let isDisabled;
-	  let showCounter;
 	  let {
 	    type = "text"
 	  } = $$props;
@@ -9247,12 +9094,6 @@
 	  let {
 	    suffix = ""
 	  } = $$props;
-	  let {
-	    showcounter = "false"
-	  } = $$props;
-	  let {
-	    maxcharcount = 0
-	  } = $$props;
 	  let inputEl;
 
 	  function onKeyUp(e) {
@@ -9271,7 +9112,7 @@
 	  function input_binding($$value) {
 	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 	      inputEl = $$value;
-	      $$invalidate(17, inputEl);
+	      $$invalidate(16, inputEl);
 	    });
 	  }
 
@@ -9284,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);
@@ -9297,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));
+	    4194304) {
+	      $$invalidate(17, isDisabled = toBoolean(disabled));
 	    }
 
-	    if ($$self.$$.dirty[0] &
-	    /*showcounter*/
-	    536870912) {
-	      $$invalidate(18, showCounter = toBoolean(showcounter));
-	    }
-
-	    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);
@@ -9357,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,
@@ -9378,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,
@@ -9390,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) {
@@ -9408,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() {
@@ -9500,7 +9331,7 @@
 	  }
 
 	  get disabled() {
-	    return this.$$.ctx[24];
+	    return this.$$.ctx[22];
 	  }
 
 	  set disabled(disabled) {
@@ -9511,7 +9342,7 @@
 	  }
 
 	  get handletrailingiconclick() {
-	    return this.$$.ctx[25];
+	    return this.$$.ctx[23];
 	  }
 
 	  set handletrailingiconclick(handletrailingiconclick) {
@@ -9522,7 +9353,7 @@
 	  }
 
 	  get focused() {
-	    return this.$$.ctx[26];
+	    return this.$$.ctx[24];
 	  }
 
 	  set focused(focused) {
@@ -9533,7 +9364,7 @@
 	  }
 
 	  get readonly() {
-	    return this.$$.ctx[27];
+	    return this.$$.ctx[25];
 	  }
 
 	  set readonly(readonly) {
@@ -9544,7 +9375,7 @@
 	  }
 
 	  get error() {
-	    return this.$$.ctx[28];
+	    return this.$$.ctx[26];
 	  }
 
 	  set error(error) {
@@ -9642,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);
@@ -14717,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
@@ -14822,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,
@@ -14880,8 +14687,6 @@
 	    step: step,
 	    prefix: prefix,
 	    suffix: suffix,
-	    showcounter: showCounter,
-	    maxcharcount: maxCharCount,
 	    handletrailingiconclick: !!onTrailingIconClick
 	  }, void 0);
 	};