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

package/react-components.esm.js

@@ -3010,7 +3010,7 @@ function create_if_block_1$9(ctx) {
     }
 
   };
-} // (51:4) {#if isIndeterminate}
+} // (59:4) {#if isIndeterminate}
 
 
 function create_if_block$f(ctx) {
@@ -3267,22 +3267,27 @@ function instance$t($$self, $$props, $$invalidate) {
     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", {
@@ -3290,7 +3295,7 @@ function instance$t($$self, $$props, $$invalidate) {
       detail: {
         name,
         checked: newCheckStatus,
-        value: _value
+        value: newValue
       }
     }));
   }
@@ -3309,6 +3314,7 @@ function instance$t($$self, $$props, $$invalidate) {
     if ($$self.$$.dirty &
     /*disabled*/
     1024) {
+      // Binding
       $$invalidate(7, isDisabled = toBoolean(disabled));
     }
 
@@ -4819,7 +4825,7 @@ function get_each_context$4(ctx, list, i) {
   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) {
@@ -4842,7 +4848,7 @@ function create_if_block$c(ctx) {
       if (!mounted) {
         dispose = listen(div, "click",
         /*closeMenu*/
-        ctx[18]);
+        ctx[17]);
         mounted = true;
       }
     },
@@ -4864,7 +4870,7 @@ function create_if_block$c(ctx) {
     }
 
   };
-} // (242:4) {#each options as option, index}
+} // (243:4) {#each options as option, index}
 
 
 function create_each_block$4(ctx) {
@@ -4887,7 +4893,7 @@ function create_each_block$4(ctx) {
   function click_handler() {
     return (
       /*click_handler*/
-      ctx[22](
+      ctx[21](
       /*option*/
       ctx[39])
     );
@@ -4908,13 +4914,13 @@ function create_each_block$4(ctx) {
       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]);
@@ -4924,10 +4930,10 @@ function create_each_block$4(ctx) {
       /*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));
     },
@@ -4946,7 +4952,7 @@ function create_each_block$4(ctx) {
       ctx = new_ctx;
       if (dirty[0] &
       /*options*/
-      1024 && t_value !== (t_value = (
+      512 && t_value !== (t_value = (
       /*option*/
       ctx[39].label ||
       /*option*/
@@ -4954,7 +4960,7 @@ function create_each_block$4(ctx) {
 
       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);
@@ -4962,7 +4968,7 @@ function create_each_block$4(ctx) {
 
       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*/
@@ -4972,9 +4978,9 @@ function create_each_block$4(ctx) {
 
       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);
@@ -4982,28 +4988,28 @@ function create_each_block$4(ctx) {
 
       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));
       }
@@ -5019,27 +5025,26 @@ function create_each_block$4(ctx) {
 }
 
 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) {
@@ -5048,10 +5053,9 @@ function create_fragment$r(ctx) {
 
   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");
@@ -5065,10 +5069,10 @@ function create_fragment$r(ctx) {
       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]);
@@ -5076,7 +5080,7 @@ function create_fragment$r(ctx) {
       /*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");
@@ -5087,22 +5091,19 @@ function create_fragment$r(ctx) {
       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");
@@ -5111,26 +5112,25 @@ function create_fragment$r(ctx) {
       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);
@@ -5140,15 +5140,15 @@ function create_fragment$r(ctx) {
       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;
       }
     },
@@ -5156,13 +5156,13 @@ function create_fragment$r(ctx) {
     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);
@@ -5171,18 +5171,18 @@ function create_fragment$r(ctx) {
 
       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] &
@@ -5203,10 +5203,10 @@ function create_fragment$r(ctx) {
 
       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] &
@@ -5221,34 +5221,26 @@ function create_fragment$r(ctx) {
 
       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) {
@@ -5272,10 +5264,10 @@ function create_fragment$r(ctx) {
 
       if (dirty[0] &
       /*selectedLabel*/
-      2048) {
+      1024) {
         attr(ul, "aria-activedescendant",
         /*selectedLabel*/
-        ctx[11]);
+        ctx[10]);
       }
 
       if (dirty[0] &
@@ -5288,28 +5280,28 @@ function create_fragment$r(ctx) {
 
       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);
       }
     },
 
@@ -5317,15 +5309,15 @@ function create_fragment$r(ctx) {
     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();
     }
@@ -5358,9 +5350,6 @@ function instance$p($$self, $$props, $$invalidate) {
   let {
     placeholder = ""
   } = $$props;
-  let {
-    testid = ""
-  } = $$props;
   let {
     width = ""
   } = $$props;
@@ -5431,7 +5420,7 @@ function instance$p($$self, $$props, $$invalidate) {
 
     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() {
@@ -5444,17 +5433,17 @@ function instance$p($$self, $$props, $$invalidate) {
 
             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();
@@ -5469,32 +5458,30 @@ function instance$p($$self, $$props, $$invalidate) {
       return;
     }
 
-    $$invalidate(12, isMenuVisible = true);
+    $$invalidate(11, isMenuVisible = true);
     await tick(); // 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);
   }
 
   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);
@@ -5507,7 +5494,7 @@ function instance$p($$self, $$props, $$invalidate) {
         }
       }));
     } else {
-      $$invalidate(9, _values = [val]);
+      $$invalidate(8, _values = [val]);
       el.dispatchEvent(new CustomEvent("_change", {
         composed: true,
         detail: {
@@ -5525,57 +5512,66 @@ function instance$p($$self, $$props, $$invalidate) {
   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);
@@ -5583,46 +5579,45 @@ function instance$p($$self, $$props, $$invalidate) {
   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 {
@@ -5636,15 +5631,14 @@ class Dropdown extends SvelteElement {
     }, 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) {
@@ -5660,7 +5654,7 @@ class Dropdown extends SvelteElement {
   }
 
   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() {
@@ -5686,7 +5680,7 @@ class Dropdown extends SvelteElement {
   }
 
   get value() {
-    return this.$$.ctx[20];
+    return this.$$.ctx[19];
   }
 
   set value(value) {
@@ -5729,19 +5723,8 @@ class Dropdown extends SvelteElement {
     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) {
@@ -5752,7 +5735,7 @@ class Dropdown extends SvelteElement {
   }
 
   get disabled() {
-    return this.$$.ctx[7];
+    return this.$$.ctx[6];
   }
 
   set disabled(disabled) {
@@ -5763,7 +5746,7 @@ class Dropdown extends SvelteElement {
   }
 
   get error() {
-    return this.$$.ctx[8];
+    return this.$$.ctx[7];
   }
 
   set error(error) {
@@ -5774,7 +5757,7 @@ class Dropdown extends SvelteElement {
   }
 
   get multiselect() {
-    return this.$$.ctx[21];
+    return this.$$.ctx[20];
   }
 
   set multiselect(multiselect) {
@@ -7158,9 +7141,14 @@ function create_if_block_2$5(ctx) {
   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");
@@ -7185,12 +7173,21 @@ function create_if_block_2$5(ctx) {
       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);
         }
@@ -7206,19 +7203,37 @@ function create_if_block_2$5(ctx) {
     }
 
   };
-} // (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) {
@@ -7226,7 +7241,7 @@ function create_if_block_3$3(ctx) {
     }
 
   };
-} // (26:2) {#if error}
+} // (36:2) {#if error}
 
 
 function create_if_block_1$6(ctx) {
@@ -7259,7 +7274,7 @@ function create_if_block_1$6(ctx) {
     }
 
   };
-} // (29:2) {#if helptext}
+} // (39:2) {#if helptext}
 
 
 function create_if_block$9(ctx) {
@@ -7397,7 +7412,12 @@ function create_fragment$j(ctx) {
 }
 
 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;
@@ -7408,25 +7428,22 @@ function instance$h($$self, $$props, $$invalidate) {
     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);
-  };
-
-  $$self.$$.update = () => {
-    if ($$self.$$.dirty &
-    /*optional*/
-    16) {
-      $$invalidate(3, isOptional = toBoolean(optional));
-    }
+    if ('requirement' in $$props) $$invalidate(3, requirement = $$props.requirement);
   };
 
-  return [label, helptext, error, isOptional, optional];
+  return [label, helptext, error, requirement, REQUIREMENT_TYPES];
 }
 
 class FormItem extends SvelteElement {
@@ -7441,7 +7458,7 @@ class FormItem extends SvelteElement {
       label: 0,
       helptext: 1,
       error: 2,
-      optional: 4
+      requirement: 3
     }, null);
 
     if (options) {
@@ -7457,7 +7474,7 @@ class FormItem extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["label", "helptext", "error", "optional"];
+    return ["label", "helptext", "error", "requirement"];
   }
 
   get label() {
@@ -7493,13 +7510,13 @@ class FormItem extends SvelteElement {
     flush();
   }
 
-  get optional() {
-    return this.$$.ctx[4];
+  get requirement() {
+    return this.$$.ctx[3];
   }
 
-  set optional(optional) {
+  set requirement(requirement) {
     this.$$set({
-      optional
+      requirement
     });
     flush();
   }
@@ -8367,7 +8384,7 @@ class Icon extends SvelteElement {
 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 {
@@ -8385,7 +8402,7 @@ function create_if_block_7(ctx) {
     },
 
     p(ctx, dirty) {
-      if (dirty[0] &
+      if (dirty &
       /*prefix*/
       16384) set_data(t,
       /*prefix*/
@@ -8397,10 +8414,10 @@ function create_if_block_7(ctx) {
     }
 
   };
-} // (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() {
@@ -8417,7 +8434,7 @@ function create_if_block_6(ctx) {
     },
 
     p(ctx, dirty) {
-      if (dirty[0] &
+      if (dirty &
       /*leadingicon*/
       32) {
         set_custom_element_data(goa_icon, "type",
@@ -8431,10 +8448,10 @@ function create_if_block_6(ctx) {
     }
 
   };
-} // (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() {
@@ -8452,7 +8469,7 @@ function create_if_block_5(ctx) {
     },
 
     p(ctx, dirty) {
-      if (dirty[0] &
+      if (dirty &
       /*trailingicon*/
       64) {
         set_custom_element_data(goa_icon, "type",
@@ -8466,10 +8483,10 @@ function create_if_block_5(ctx) {
     }
 
   };
-} // (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;
@@ -8478,7 +8495,7 @@ function create_if_block_4(ctx) {
       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",
@@ -8497,15 +8514,15 @@ function create_if_block_4(ctx) {
     },
 
     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",
@@ -8521,10 +8538,10 @@ function create_if_block_4(ctx) {
     }
 
   };
-} // (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 {
@@ -8542,7 +8559,7 @@ function create_if_block_3$2(ctx) {
     },
 
     p(ctx, dirty) {
-      if (dirty[0] &
+      if (dirty &
       /*suffix*/
       32768) set_data(t,
       /*suffix*/
@@ -8553,151 +8570,6 @@ function create_if_block_3$2(ctx) {
       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);
-    }
-
   };
 }
 
@@ -8714,32 +8586,28 @@ function create_fragment$f(ctx) {
   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");
@@ -8755,8 +8623,6 @@ function create_fragment$f(ctx) {
       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*/
@@ -8766,10 +8632,10 @@ function create_fragment$f(ctx) {
       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]);
@@ -8807,7 +8673,7 @@ function create_fragment$f(ctx) {
       goa-input
       ${
       /*isDisabled*/
-      ctx[19] ? "goa-input--disabled" : ""}
+      ctx[17] ? "goa-input--disabled" : ""}
       variant--${
       /*variant*/
       ctx[7]}
@@ -8817,7 +8683,7 @@ function create_fragment$f(ctx) {
     `);
       toggle_class(div0, "error",
       /*isError*/
-      ctx[20]);
+      ctx[18]);
       attr(div1, "class", "container");
       attr(div1, "style", div1_style_value = `
     --width: ${
@@ -8836,34 +8702,32 @@ function create_fragment$f(ctx) {
       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);
         }
@@ -8878,7 +8742,7 @@ function create_fragment$f(ctx) {
         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);
         }
@@ -8887,7 +8751,7 @@ function create_fragment$f(ctx) {
         if_block1 = null;
       }
 
-      if (dirty[0] &
+      if (dirty &
       /*variant*/
       128 && input_class_value !== (input_class_value = `input--${
       /*variant*/
@@ -8895,7 +8759,7 @@ function create_fragment$f(ctx) {
         attr(input, "class", input_class_value);
       }
 
-      if (dirty[0] &
+      if (dirty &
       /*trailingicon*/
       64 && input_style_value !== (input_style_value = `--search-icon-offset: ${
       /*trailingicon*/
@@ -8903,23 +8767,23 @@ function create_fragment$f(ctx) {
         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",
@@ -8927,7 +8791,7 @@ function create_fragment$f(ctx) {
         ctx[8]);
       }
 
-      if (dirty[0] &
+      if (dirty &
       /*autocapitalize*/
       8) {
         attr(input, "autocapitalize",
@@ -8935,7 +8799,7 @@ function create_fragment$f(ctx) {
         ctx[3]);
       }
 
-      if (dirty[0] &
+      if (dirty &
       /*name*/
       4) {
         attr(input, "name",
@@ -8943,7 +8807,7 @@ function create_fragment$f(ctx) {
         ctx[2]);
       }
 
-      if (dirty[0] &
+      if (dirty &
       /*type*/
       2) {
         attr(input, "type",
@@ -8951,7 +8815,7 @@ function create_fragment$f(ctx) {
         ctx[1]);
       }
 
-      if (dirty[0] &
+      if (dirty &
       /*value*/
       1 && input.value !==
       /*value*/
@@ -8961,7 +8825,7 @@ function create_fragment$f(ctx) {
         ctx[0];
       }
 
-      if (dirty[0] &
+      if (dirty &
       /*placeholder*/
       16) {
         attr(input, "placeholder",
@@ -8969,7 +8833,7 @@ function create_fragment$f(ctx) {
         ctx[4]);
       }
 
-      if (dirty[0] &
+      if (dirty &
       /*min*/
       2048) {
         attr(input, "min",
@@ -8977,7 +8841,7 @@ function create_fragment$f(ctx) {
         ctx[11]);
       }
 
-      if (dirty[0] &
+      if (dirty &
       /*max*/
       4096) {
         attr(input, "max",
@@ -8985,7 +8849,7 @@ function create_fragment$f(ctx) {
         ctx[12]);
       }
 
-      if (dirty[0] &
+      if (dirty &
       /*step*/
       8192) {
         attr(input, "step",
@@ -8993,7 +8857,7 @@ function create_fragment$f(ctx) {
         ctx[13]);
       }
 
-      if (dirty[0] &
+      if (dirty &
       /*arialabel, name*/
       1028 && input_aria_label_value !== (input_aria_label_value =
       /*arialabel*/
@@ -9007,11 +8871,11 @@ function create_fragment$f(ctx) {
       /*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);
         }
@@ -9024,11 +8888,11 @@ function create_fragment$f(ctx) {
       /*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);
         }
@@ -9043,7 +8907,7 @@ function create_fragment$f(ctx) {
         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);
         }
@@ -9052,13 +8916,13 @@ function create_fragment$f(ctx) {
         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]}
@@ -9069,30 +8933,15 @@ function create_fragment$f(ctx) {
         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: ${
@@ -9112,11 +8961,10 @@ function create_fragment$f(ctx) {
       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);
     }
@@ -9136,7 +8984,6 @@ function instance$d($$self, $$props, $$invalidate) {
   let isReadonly;
   let isError;
   let isDisabled;
-  let showCounter;
   let {
     type = "text"
   } = $$props;
@@ -9200,12 +9047,6 @@ function instance$d($$self, $$props, $$invalidate) {
   let {
     suffix = ""
   } = $$props;
-  let {
-    showcounter = "false"
-  } = $$props;
-  let {
-    maxcharcount = 0
-  } = $$props;
   let inputEl;
 
   function onKeyUp(e) {
@@ -9224,7 +9065,7 @@ function instance$d($$self, $$props, $$invalidate) {
   function input_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       inputEl = $$value;
-      $$invalidate(17, inputEl);
+      $$invalidate(16, inputEl);
     });
   }
 
@@ -9237,11 +9078,11 @@ function instance$d($$self, $$props, $$invalidate) {
     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);
@@ -9250,58 +9091,50 @@ function instance$d($$self, $$props, $$invalidate) {
     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);
@@ -9310,13 +9143,13 @@ function instance$d($$self, $$props, $$invalidate) {
     }
   };
 
-  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,
@@ -9331,11 +9164,11 @@ class Input extends SvelteElement {
       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,
@@ -9343,10 +9176,8 @@ class Input extends SvelteElement {
       max: 12,
       step: 13,
       prefix: 14,
-      suffix: 15,
-      showcounter: 29,
-      maxcharcount: 16
-    }, null, [-1, -1]);
+      suffix: 15
+    }, null);
 
     if (options) {
       if (options.target) {
@@ -9361,7 +9192,7 @@ class Input extends SvelteElement {
   }
 
   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() {
@@ -9453,7 +9284,7 @@ class Input extends SvelteElement {
   }
 
   get disabled() {
-    return this.$$.ctx[24];
+    return this.$$.ctx[22];
   }
 
   set disabled(disabled) {
@@ -9464,7 +9295,7 @@ class Input extends SvelteElement {
   }
 
   get handletrailingiconclick() {
-    return this.$$.ctx[25];
+    return this.$$.ctx[23];
   }
 
   set handletrailingiconclick(handletrailingiconclick) {
@@ -9475,7 +9306,7 @@ class Input extends SvelteElement {
   }
 
   get focused() {
-    return this.$$.ctx[26];
+    return this.$$.ctx[24];
   }
 
   set focused(focused) {
@@ -9486,7 +9317,7 @@ class Input extends SvelteElement {
   }
 
   get readonly() {
-    return this.$$.ctx[27];
+    return this.$$.ctx[25];
   }
 
   set readonly(readonly) {
@@ -9497,7 +9328,7 @@ class Input extends SvelteElement {
   }
 
   get error() {
-    return this.$$.ctx[28];
+    return this.$$.ctx[26];
   }
 
   set error(error) {
@@ -9595,28 +9426,6 @@ class Input extends SvelteElement {
     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);
@@ -14642,13 +14451,13 @@ const GoAFormItem = ({
   children,
   helpText,
   error,
-  optional,
+  requirement,
   label
 }) => {
   return jsx("goa-form-item", Object.assign({
     label: label,
     error: error,
-    optional: optional ? "true" : "false",
+    requirement: requirement,
     helptext: helpText
   }, {
     children: children
@@ -14774,8 +14583,6 @@ const GoAInput = ({
   placeholder,
   error,
   width,
-  showCounter,
-  maxCharCount,
   testId,
   min,
   max,
@@ -14834,8 +14641,6 @@ const GoAInput = ({
     step: step,
     prefix: prefix,
     suffix: suffix,
-    showcounter: showCounter,
-    maxcharcount: maxCharCount,
     handletrailingiconclick: !!onTrailingIconClick
   }, void 0);
 };