@abgov/react-components 4.0.0-alpha.39 → 4.0.0-alpha.41

package/react-components.umd.js

@@ -45,20 +45,6 @@
 
 	function noop() {}
 
-	const _getContext = _async(function (name, attempts) {
-	  if (attempts > 10) {
-	    throw new Error(`Could not find context ${name}`);
-	  }
-
-	  return stores[name] ? stores[name] : _call(tick, function () {
-	    return _getContext(name, attempts + 1);
-	  });
-	});
-
-	const getContext = function getContext(name) {
-	  return _await(_getContext(name, 0));
-	};
-
 	const identity = x => x;
 
 	function assign(tar, src) {
@@ -1830,10 +1816,10 @@
 	  let if_block1_anchor;
 	  let if_block0 =
 	  /*leadingicon*/
-	  ctx[4] && create_if_block_2$7(ctx);
+	  ctx[3] && create_if_block_2$7(ctx);
 	  let if_block1 =
 	  /*trailingicon*/
-	  ctx[5] && create_if_block_1$a(ctx);
+	  ctx[4] && create_if_block_1$a(ctx);
 	  return {
 	    c() {
 	      if (if_block0) if_block0.c();
@@ -1858,7 +1844,7 @@
 	    p(ctx, dirty) {
 	      if (
 	      /*leadingicon*/
-	      ctx[4]) {
+	      ctx[3]) {
 	        if (if_block0) {
 	          if_block0.p(ctx, dirty);
 	        } else {
@@ -1873,7 +1859,7 @@
 
 	      if (
 	      /*trailingicon*/
-	      ctx[5]) {
+	      ctx[4]) {
 	        if (if_block1) {
 	          if_block1.p(ctx, dirty);
 	        } else {
@@ -1897,7 +1883,7 @@
 	    }
 
 	  };
-	} // (55:2) {#if type === "start"}
+	} // (53:2) {#if type === "start"}
 
 
 	function create_if_block$h(ctx) {
@@ -1931,7 +1917,7 @@
 	    }
 
 	  };
-	} // (61:4) {#if leadingicon}
+	} // (59:4) {#if leadingicon}
 
 
 	function create_if_block_2$7(ctx) {
@@ -1942,10 +1928,10 @@
 	      set_custom_element_data(goa_icon, "id", "leading-icon");
 	      set_custom_element_data(goa_icon, "type",
 	      /*leadingicon*/
-	      ctx[4]);
+	      ctx[3]);
 	      set_custom_element_data(goa_icon, "inverted",
 	      /*isButtonDark*/
-	      ctx[7]);
+	      ctx[6]);
 	    },
 
 	    m(target, anchor) {
@@ -1955,18 +1941,18 @@
 	    p(ctx, dirty) {
 	      if (dirty &
 	      /*leadingicon*/
-	      16) {
+	      8) {
 	        set_custom_element_data(goa_icon, "type",
 	        /*leadingicon*/
-	        ctx[4]);
+	        ctx[3]);
 	      }
 
 	      if (dirty &
 	      /*isButtonDark*/
-	      128) {
+	      64) {
 	        set_custom_element_data(goa_icon, "inverted",
 	        /*isButtonDark*/
-	        ctx[7]);
+	        ctx[6]);
 	      }
 	    },
 
@@ -1975,7 +1961,7 @@
 	    }
 
 	  };
-	} // (67:4) {#if trailingicon}
+	} // (65:4) {#if trailingicon}
 
 
 	function create_if_block_1$a(ctx) {
@@ -1986,10 +1972,10 @@
 	      set_custom_element_data(goa_icon, "id", "trailing-icon");
 	      set_custom_element_data(goa_icon, "type",
 	      /*trailingicon*/
-	      ctx[5]);
+	      ctx[4]);
 	      set_custom_element_data(goa_icon, "inverted",
 	      /*isButtonDark*/
-	      ctx[7]);
+	      ctx[6]);
 	    },
 
 	    m(target, anchor) {
@@ -1999,18 +1985,18 @@
 	    p(ctx, dirty) {
 	      if (dirty &
 	      /*trailingicon*/
-	      32) {
+	      16) {
 	        set_custom_element_data(goa_icon, "type",
 	        /*trailingicon*/
-	        ctx[5]);
+	        ctx[4]);
 	      }
 
 	      if (dirty &
 	      /*isButtonDark*/
-	      128) {
+	      64) {
 	        set_custom_element_data(goa_icon, "inverted",
 	        /*isButtonDark*/
-	        ctx[7]);
+	        ctx[6]);
 	      }
 	    },
 
@@ -2048,21 +2034,18 @@
 	      ctx[1] + " " +
 	      /*variant*/
 	      ctx[2]));
-	      attr(button, "title",
-	      /*title*/
-	      ctx[3]);
 	      button.disabled =
 	      /*isDisabled*/
-	      ctx[8];
+	      ctx[7];
 	      attr(button, "data-testid",
 	      /*testid*/
-	      ctx[6]);
+	      ctx[5]);
 	      toggle_class(button, "leading",
 	      /*leadingicon*/
-	      ctx[4]);
+	      ctx[3]);
 	      toggle_class(button, "trailing",
 	      /*trailingicon*/
-	      ctx[5] ||
+	      ctx[4] ||
 	      /*type*/
 	      ctx[0] === "start");
 	    },
@@ -2102,44 +2085,36 @@
 	        attr(button, "class", button_class_value);
 	      }
 
-	      if (dirty &
-	      /*title*/
-	      8) {
-	        attr(button, "title",
-	        /*title*/
-	        ctx[3]);
-	      }
-
 	      if (dirty &
 	      /*isDisabled*/
-	      256) {
+	      128) {
 	        button.disabled =
 	        /*isDisabled*/
-	        ctx[8];
+	        ctx[7];
 	      }
 
 	      if (dirty &
 	      /*testid*/
-	      64) {
+	      32) {
 	        attr(button, "data-testid",
 	        /*testid*/
-	        ctx[6]);
+	        ctx[5]);
 	      }
 
 	      if (dirty &
 	      /*type, size, variant, leadingicon*/
-	      23) {
+	      15) {
 	        toggle_class(button, "leading",
 	        /*leadingicon*/
-	        ctx[4]);
+	        ctx[3]);
 	      }
 
 	      if (dirty &
 	      /*type, size, variant, trailingicon, type*/
-	      39) {
+	      23) {
 	        toggle_class(button, "trailing",
 	        /*trailingicon*/
-	        ctx[5] ||
+	        ctx[4] ||
 	        /*type*/
 	        ctx[0] === "start");
 	      }
@@ -2194,9 +2169,6 @@
 	  let {
 	    variant = "normal"
 	  } = $$props;
-	  let {
-	    title = ""
-	  } = $$props;
 	  let {
 	    disabled = "false"
 	  } = $$props;
@@ -2227,28 +2199,27 @@
 	    if ('type' in $$props) $$invalidate(0, type = $$props.type);
 	    if ('size' in $$props) $$invalidate(1, size = $$props.size);
 	    if ('variant' in $$props) $$invalidate(2, variant = $$props.variant);
-	    if ('title' in $$props) $$invalidate(3, title = $$props.title);
-	    if ('disabled' in $$props) $$invalidate(9, disabled = $$props.disabled);
-	    if ('leadingicon' in $$props) $$invalidate(4, leadingicon = $$props.leadingicon);
-	    if ('trailingicon' in $$props) $$invalidate(5, trailingicon = $$props.trailingicon);
-	    if ('testid' in $$props) $$invalidate(6, testid = $$props.testid);
+	    if ('disabled' in $$props) $$invalidate(8, disabled = $$props.disabled);
+	    if ('leadingicon' in $$props) $$invalidate(3, leadingicon = $$props.leadingicon);
+	    if ('trailingicon' in $$props) $$invalidate(4, trailingicon = $$props.trailingicon);
+	    if ('testid' in $$props) $$invalidate(5, testid = $$props.testid);
 	  };
 
 	  $$self.$$.update = () => {
 	    if ($$self.$$.dirty &
 	    /*disabled*/
-	    512) {
-	      $$invalidate(8, isDisabled = toBoolean(disabled));
+	    256) {
+	      $$invalidate(7, isDisabled = toBoolean(disabled));
 	    }
 
 	    if ($$self.$$.dirty &
 	    /*type*/
 	    1) {
-	      $$invalidate(7, isButtonDark = type === "primary" || type === "start");
+	      $$invalidate(6, isButtonDark = type === "primary" || type === "start");
 	    }
 	  };
 
-	  return [type, size, variant, title, leadingicon, trailingicon, testid, isButtonDark, isDisabled, disabled];
+	  return [type, size, variant, leadingicon, trailingicon, testid, isButtonDark, isDisabled, disabled];
 	}
 
 	class Button extends SvelteElement {
@@ -2264,11 +2235,10 @@
 	      type: 0,
 	      size: 1,
 	      variant: 2,
-	      title: 3,
-	      disabled: 9,
-	      leadingicon: 4,
-	      trailingicon: 5,
-	      testid: 6
+	      disabled: 8,
+	      leadingicon: 3,
+	      trailingicon: 4,
+	      testid: 5
 	    }, null);
 
 	    if (options) {
@@ -2284,7 +2254,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["type", "size", "variant", "title", "disabled", "leadingicon", "trailingicon", "testid"];
+	    return ["type", "size", "variant", "disabled", "leadingicon", "trailingicon", "testid"];
 	  }
 
 	  get type() {
@@ -2320,19 +2290,8 @@
 	    flush();
 	  }
 
-	  get title() {
-	    return this.$$.ctx[3];
-	  }
-
-	  set title(title) {
-	    this.$$set({
-	      title
-	    });
-	    flush();
-	  }
-
 	  get disabled() {
-	    return this.$$.ctx[9];
+	    return this.$$.ctx[8];
 	  }
 
 	  set disabled(disabled) {
@@ -2343,7 +2302,7 @@
 	  }
 
 	  get leadingicon() {
-	    return this.$$.ctx[4];
+	    return this.$$.ctx[3];
 	  }
 
 	  set leadingicon(leadingicon) {
@@ -2354,7 +2313,7 @@
 	  }
 
 	  get trailingicon() {
-	    return this.$$.ctx[5];
+	    return this.$$.ctx[4];
 	  }
 
 	  set trailingicon(trailingicon) {
@@ -2365,7 +2324,7 @@
 	  }
 
 	  get testid() {
-	    return this.$$.ctx[6];
+	    return this.$$.ctx[5];
 	  }
 
 	  set testid(testid) {
@@ -4256,7 +4215,7 @@
 
 	const stores = {};
 
-	class ContextStore {
+	class ContextStoreInternal {
 	  constructor() {
 	    this.store = writable();
 	  }
@@ -4274,11 +4233,15 @@
 	}
 
 	function createContext(name) {
-	  const ctx = new ContextStore();
+	  const ctx = new ContextStoreInternal();
 	  stores[name] = ctx;
 	  return ctx;
 	}
 
+	function getContext(name) {
+	  return stores[name];
+	}
+
 	function deleteContext(name) {
 	  const store = stores[name];
 	  if (!store) return;
@@ -4290,10 +4253,10 @@
 
 	function get_each_context$4(ctx, list, i) {
 	  const child_ctx = ctx.slice();
-	  child_ctx[36] = list[i];
-	  child_ctx[38] = i;
+	  child_ctx[39] = list[i];
+	  child_ctx[41] = i;
 	  return child_ctx;
-	} // (180:2) {#if isMenuVisible}
+	} // (198:2) {#if isMenuVisible}
 
 
 	function create_if_block$d(ctx) {
@@ -4338,14 +4301,16 @@
 	    }
 
 	  };
-	} // (216:4) {#each options as option, index (option.value)}
+	} // (234:4) {#each options as option, index}
 
 
-	function create_each_block$4(key_1, ctx) {
+	function create_each_block$4(ctx) {
 	  let li;
-	  let t0_value =
+	  let t0_value = (
+	  /*option*/
+	  ctx[39].label ||
 	  /*option*/
-	  ctx[36].label + "";
+	  ctx[39].value) + "";
 	  let t0;
 	  let t1;
 	  let li_aria_label_value;
@@ -4360,43 +4325,39 @@
 	      /*click_handler*/
 	      ctx[22](
 	      /*option*/
-	      ctx[36])
+	      ctx[39])
 	    );
 	  }
 
 	  return {
-	    key: key_1,
-	    first: null,
-
 	    c() {
 	      li = element("li");
 	      t0 = text(t0_value);
 	      t1 = space();
 	      attr(li, "aria-label", li_aria_label_value =
 	      /*option*/
-	      ctx[36].label ||
+	      ctx[39].label ||
 	      /*option*/
-	      ctx[36].value);
+	      ctx[39].value);
 	      attr(li, "data-testid", li_data_testid_value = `${
       /*option*/
-      ctx[36].value}-dropdown-item`);
+      ctx[39].value}-dropdown-item`);
 	      attr(li, "data-index", li_data_index_value =
 	      /*index*/
-	      ctx[38]);
+	      ctx[41]);
 	      attr(li, "class", "goa-dropdown-option");
 	      attr(li, "style", li_style_value = `display: ${"block"}`);
 	      toggle_class(li, "goa-dropdown-option--disabled", false);
 	      toggle_class(li, "goa-dropdown-option--tabbed",
 	      /*index*/
-	      ctx[38] ===
+	      ctx[41] ===
 	      /*highlightedIndex*/
 	      ctx[13]);
 	      toggle_class(li, "goa-dropdown-option--selected",
 	      /*_values*/
 	      ctx[9].includes(
 	      /*option*/
-	      ctx[36].value));
-	      this.first = li;
+	      ctx[39].value));
 	    },
 
 	    m(target, anchor) {
@@ -4414,17 +4375,19 @@
 	      ctx = new_ctx;
 	      if (dirty[0] &
 	      /*options*/
-	      1024 && t0_value !== (t0_value =
+	      1024 && t0_value !== (t0_value = (
 	      /*option*/
-	      ctx[36].label + "")) set_data(t0, t0_value);
+	      ctx[39].label ||
+	      /*option*/
+	      ctx[39].value) + "")) set_data(t0, t0_value);
 
 	      if (dirty[0] &
 	      /*options*/
 	      1024 && li_aria_label_value !== (li_aria_label_value =
 	      /*option*/
-	      ctx[36].label ||
+	      ctx[39].label ||
 	      /*option*/
-	      ctx[36].value)) {
+	      ctx[39].value)) {
 	        attr(li, "aria-label", li_aria_label_value);
 	      }
 
@@ -4432,24 +4395,16 @@
 	      /*options*/
 	      1024 && li_data_testid_value !== (li_data_testid_value = `${
       /*option*/
-      ctx[36].value}-dropdown-item`)) {
+      ctx[39].value}-dropdown-item`)) {
 	        attr(li, "data-testid", li_data_testid_value);
 	      }
 
 	      if (dirty[0] &
-	      /*options*/
-	      1024 && li_data_index_value !== (li_data_index_value =
-	      /*index*/
-	      ctx[38])) {
-	        attr(li, "data-index", li_data_index_value);
-	      }
-
-	      if (dirty[0] &
-	      /*options, highlightedIndex*/
-	      9216) {
+	      /*highlightedIndex*/
+	      8192) {
 	        toggle_class(li, "goa-dropdown-option--tabbed",
 	        /*index*/
-	        ctx[38] ===
+	        ctx[41] ===
 	        /*highlightedIndex*/
 	        ctx[13]);
 	      }
@@ -4461,7 +4416,7 @@
 	        /*_values*/
 	        ctx[9].includes(
 	        /*option*/
-	        ctx[36].value));
+	        ctx[39].value));
 	      }
 	    },
 
@@ -4486,8 +4441,6 @@
 	  let ul;
 	  let slot;
 	  let t2;
-	  let each_blocks = [];
-	  let each_1_lookup = new Map();
 	  let ul_style_value;
 	  let div1_style_value;
 	  let mounted;
@@ -4498,15 +4451,10 @@
 	  let each_value =
 	  /*options*/
 	  ctx[10];
-
-	  const get_key = ctx =>
-	  /*option*/
-	  ctx[36].value;
+	  let each_blocks = [];
 
 	  for (let i = 0; i < each_value.length; i += 1) {
-	    let child_ctx = get_each_context$4(ctx, each_value, i);
-	    let key = get_key(child_ctx);
-	    each_1_lookup.set(key, each_blocks[i] = create_each_block$4(key, child_ctx));
+	    each_blocks[i] = create_each_block$4(get_each_context$4(ctx, each_value, i));
 	  }
 
 	  return {
@@ -4694,7 +4642,25 @@
 	        each_value =
 	        /*options*/
 	        ctx[10];
-	        each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, ul, destroy_block, create_each_block$4, null, get_each_context$4);
+	        let i;
+
+	        for (i = 0; i < each_value.length; i += 1) {
+	          const child_ctx = get_each_context$4(ctx, each_value, i);
+
+	          if (each_blocks[i]) {
+	            each_blocks[i].p(child_ctx, dirty);
+	          } else {
+	            each_blocks[i] = create_each_block$4(child_ctx);
+	            each_blocks[i].c();
+	            each_blocks[i].m(ul, null);
+	          }
+	        }
+
+	        for (; i < each_blocks.length; i += 1) {
+	          each_blocks[i].d(1);
+	        }
+
+	        each_blocks.length = each_value.length;
 	      }
 
 	      if (dirty[0] &
@@ -4738,13 +4704,9 @@
 	    d(detaching) {
 	      if (detaching) detach(div1);
 	      if (if_block) if_block.d();
-
-	      for (let i = 0; i < each_blocks.length; i += 1) {
-	        each_blocks[i].d();
-	      }
+	      destroy_each(each_blocks, detaching);
 	      /*ul_binding*/
 
-
 	      ctx[23](null);
 	      /*div1_binding*/
 
@@ -4824,15 +4786,44 @@
 	  let menuEl;
 	  let ctx; // Hooks
 
-	  onMount(_async(function () {
-	    if (!name) {
-	      console.error("goa-dropdown: missing the required `name` attribute. It must match the children's name attribute.");
-	      return;
-	    }
+	  onMount(() => {
+	    const maxAttempts = 10;
+	    let attempts = 0;
+	    const fn = setInterval(_async(function () {
+	      attempts++;
 
+	      if (name && el) {
+	        addEventListeners();
+	        parseValues();
+	        bindContext();
+	        clearInterval(fn);
+	      }
+
+	      if (attempts > maxAttempts) {
+	        console.error("goa-dropdown: missing the required `name` attribute. It must match the children's name attribute.");
+	        clearInterval(fn);
+	      }
+
+	      return _await();
+	    }), 10);
+	  });
+	  onDestroy(() => {
+	    removeEventListeners();
+	    deleteContext(name);
+	  }); // Functions
+
+	  function addEventListeners() {
 	    el.addEventListener("focus", onFocus, true);
-	    el.addEventListener("blur", onBlur, true); // parse and convert values to strings to avoid later type comparison issues
+	    el.addEventListener("blur", onBlur, true);
+	  }
+
+	  function removeEventListeners() {
+	    el.removeEventListener("focus", onFocus, true);
+	    el.removeEventListener("blur", onBlur, true);
+	  }
 
+	  function parseValues() {
+	    // parse and convert values to strings to avoid later type comparison issues
 	    let rawValue;
 
 	    try {
@@ -4844,14 +4835,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}`));
-	    bindContext();
-	    return _await();
-	  }));
-	  onDestroy(() => {
-	    el.removeEventListener("focus", onFocus, true);
-	    el.removeEventListener("blur", onBlur, true);
-	    deleteContext(name);
-	  }); // Functions
+	  }
 
 	  function bindContext() {
 	    ctx = createContext(name);
@@ -5213,24 +5197,26 @@
 	    label = ""
 	  } = $$props; // private
 
-	  let ctx; // Hooks
+	  let ctx;
+	  onMount(() => {
+	    const fn = setInterval(() => {
+	      if (name && value) {
+	        ctx = getContext(name);
 
-	  onMount(_async(function () {
-	    if (!name) {
-	      console.error("goa-dropdown-item: missing the required `name` attribute. It must match the parent's name attribute");
-	      return;
-	    }
+	        if (!ctx) {
+	          return;
+	        }
 
-	    return _await(getContext(name), function (_getContext2) {
-	      ctx = _getContext2;
-	      ctx.notify({
-	        type: BIND$1,
-	        name,
-	        label,
-	        value
-	      });
-	    });
-	  }));
+	        ctx.notify({
+	          type: BIND$1,
+	          name,
+	          label,
+	          value
+	        });
+	        clearInterval(fn);
+	      }
+	    }, 10);
+	  });
 
 	  $$self.$$set = $$props => {
 	    if ('name' in $$props) $$invalidate(0, name = $$props.name);
@@ -6626,7 +6612,40 @@
 	customElements.define("goa-icon-button", IconButton);
 	/* libs/web-components/src/components/input/Input.svelte generated by Svelte v3.49.0 */
 
-	function create_if_block_5(ctx) {
+	function create_if_block_7(ctx) {
+	  let div;
+	  let t;
+	  return {
+	    c() {
+	      div = element("div");
+	      t = text(
+	      /*prefix*/
+	      ctx[13]);
+	      attr(div, "class", "prefix");
+	    },
+
+	    m(target, anchor) {
+	      insert(target, div, anchor);
+	      append(div, t);
+	    },
+
+	    p(ctx, dirty) {
+	      if (dirty &
+	      /*prefix*/
+	      8192) set_data(t,
+	      /*prefix*/
+	      ctx[13]);
+	    },
+
+	    d(detaching) {
+	      if (detaching) detach(div);
+	    }
+
+	  };
+	} // (81:4) {#if leadingicon}
+
+
+	function create_if_block_6(ctx) {
 	  let goa_icon;
 	  return {
 	    c() {
@@ -6657,10 +6676,10 @@
 	    }
 
 	  };
-	} // (102:4) {#if trailingicon && !handlesTrailingIconClick}
+	} // (110:4) {#if trailingicon && !handlesTrailingIconClick}
 
 
-	function create_if_block_4$1(ctx) {
+	function create_if_block_5(ctx) {
 	  let goa_icon;
 	  return {
 	    c() {
@@ -6692,10 +6711,10 @@
 	    }
 
 	  };
-	} // (112:4) {#if trailingicon && handlesTrailingIconClick}
+	} // (120:4) {#if trailingicon && handlesTrailingIconClick}
 
 
-	function create_if_block_3$3(ctx) {
+	function create_if_block_4$1(ctx) {
 	  let goa_icon_button;
 	  let mounted;
 	  let dispose;
@@ -6704,7 +6723,7 @@
 	      goa_icon_button = element("goa-icon-button");
 	      set_custom_element_data(goa_icon_button, "disabled",
 	      /*isDisabled*/
-	      ctx[16]);
+	      ctx[18]);
 	      set_custom_element_data(goa_icon_button, "variant", "nocolor");
 	      set_custom_element_data(goa_icon_button, "size", "medium");
 	      set_custom_element_data(goa_icon_button, "type",
@@ -6725,10 +6744,10 @@
 	    p(ctx, dirty) {
 	      if (dirty &
 	      /*isDisabled*/
-	      65536) {
+	      262144) {
 	        set_custom_element_data(goa_icon_button, "disabled",
 	        /*isDisabled*/
-	        ctx[16]);
+	        ctx[18]);
 	      }
 
 	      if (dirty &
@@ -6747,7 +6766,40 @@
 	    }
 
 	  };
-	} // (125:2) {#if showCounter}
+	} // (131:4) {#if suffix}
+
+
+	function create_if_block_3$3(ctx) {
+	  let span;
+	  let t;
+	  return {
+	    c() {
+	      span = element("span");
+	      t = text(
+	      /*suffix*/
+	      ctx[14]);
+	      attr(span, "class", "suffix");
+	    },
+
+	    m(target, anchor) {
+	      insert(target, span, anchor);
+	      append(span, t);
+	    },
+
+	    p(ctx, dirty) {
+	      if (dirty &
+	      /*suffix*/
+	      16384) set_data(t,
+	      /*suffix*/
+	      ctx[14]);
+	    },
+
+	    d(detaching) {
+	      if (detaching) detach(span);
+	    }
+
+	  };
+	} // (137:2) {#if showCounter}
 
 
 	function create_if_block$a(ctx) {
@@ -6756,7 +6808,7 @@
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*maxcharcount*/
-	    ctx[13] > 0) return create_if_block_1$6;
+	    ctx[15] > 0) return create_if_block_1$6;
 	    if (
 	    /*value*/
 	    ctx[0].length > 0) return create_if_block_2$5;
@@ -6798,7 +6850,7 @@
 	    }
 
 	  };
-	} // (130:31) 
+	} // (142:31) 
 
 
 	function create_if_block_2$5(ctx) {
@@ -6832,7 +6884,7 @@
 	    }
 
 	  };
-	} // (126:4) {#if maxcharcount > 0}
+	} // (138:4) {#if maxcharcount > 0}
 
 
 	function create_if_block_1$6(ctx) {
@@ -6843,7 +6895,7 @@
 	  let t0;
 	  let t1_value = `/${
   /*maxcharcount*/
-  ctx[13]}` + "";
+  ctx[15]}` + "";
 	  let t1;
 	  return {
 	    c() {
@@ -6855,7 +6907,7 @@
 	      /*value*/
 	      ctx[0].length >
 	      /*maxcharcount*/
-	      ctx[13]);
+	      ctx[15]);
 	    },
 
 	    m(target, anchor) {
@@ -6872,18 +6924,18 @@
 	      ctx[0].length + "")) set_data(t0, t0_value);
 	      if (dirty &
 	      /*maxcharcount*/
-	      8192 && t1_value !== (t1_value = `/${
+	      32768 && t1_value !== (t1_value = `/${
       /*maxcharcount*/
-      ctx[13]}` + "")) set_data(t1, t1_value);
+      ctx[15]}` + "")) set_data(t1, t1_value);
 
 	      if (dirty &
 	      /*value, maxcharcount*/
-	      8193) {
+	      32769) {
 	        toggle_class(div, "counter-error",
 	        /*value*/
 	        ctx[0].length >
 	        /*maxcharcount*/
-	        ctx[13]);
+	        ctx[15]);
 	      }
 	    },
 
@@ -6898,46 +6950,58 @@
 	  let div1;
 	  let div0;
 	  let t0;
+	  let t1;
 	  let input;
 	  let input_class_value;
 	  let input_style_value;
 	  let input_aria_label_value;
-	  let t1;
 	  let t2;
-	  let div0_class_value;
 	  let t3;
+	  let t4;
+	  let div0_class_value;
+	  let t5;
 	  let div1_style_value;
 	  let mounted;
 	  let dispose;
 	  let if_block0 =
-	  /*leadingicon*/
-	  ctx[4] && create_if_block_5(ctx);
+	  /*prefix*/
+	  ctx[13] && create_if_block_7(ctx);
 	  let if_block1 =
+	  /*leadingicon*/
+	  ctx[4] && create_if_block_6(ctx);
+	  let if_block2 =
 	  /*trailingicon*/
 	  ctx[5] && !
 	  /*handlesTrailingIconClick*/
-	  ctx[19] && create_if_block_4$1(ctx);
-	  let if_block2 =
+	  ctx[21] && create_if_block_5(ctx);
+	  let if_block3 =
 	  /*trailingicon*/
 	  ctx[5] &&
 	  /*handlesTrailingIconClick*/
-	  ctx[19] && create_if_block_3$3(ctx);
-	  let if_block3 =
+	  ctx[21] && create_if_block_4$1(ctx);
+	  let if_block4 =
+	  /*suffix*/
+	  ctx[14] && create_if_block_3$3(ctx);
+	  let if_block5 =
 	  /*showCounter*/
-	  ctx[15] && create_if_block$a(ctx);
+	  ctx[17] && create_if_block$a(ctx);
 	  return {
 	    c() {
 	      div1 = element("div");
 	      div0 = element("div");
 	      if (if_block0) if_block0.c();
 	      t0 = space();
-	      input = element("input");
-	      t1 = space();
 	      if (if_block1) if_block1.c();
+	      t1 = space();
+	      input = element("input");
 	      t2 = space();
 	      if (if_block2) if_block2.c();
 	      t3 = space();
 	      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*/
@@ -6947,10 +7011,10 @@
       ctx[5] ? "-0.5rem" : "0"}`);
 	      input.readOnly =
 	      /*isReadonly*/
-	      ctx[18];
+	      ctx[20];
 	      input.disabled =
 	      /*isDisabled*/
-	      ctx[16];
+	      ctx[18];
 	      attr(input, "data-testid",
 	      /*testid*/
 	      ctx[7]);
@@ -6985,7 +7049,7 @@
       goa-input
       ${
       /*isDisabled*/
-      ctx[16] ? "goa-input--disabled" : ""}
+      ctx[18] ? "goa-input--disabled" : ""}
       variant--${
       /*variant*/
       ctx[6]}
@@ -6995,7 +7059,7 @@
     `);
 	      toggle_class(div0, "error",
 	      /*isError*/
-	      ctx[17]);
+	      ctx[19]);
 	      attr(div1, "class", "container");
 	      attr(div1, "style", div1_style_value = `
     --width: ${
@@ -7009,35 +7073,39 @@
 	      append(div1, div0);
 	      if (if_block0) if_block0.m(div0, null);
 	      append(div0, t0);
+	      if (if_block1) if_block1.m(div0, null);
+	      append(div0, t1);
 	      append(div0, input);
 	      /*input_binding*/
 
-	      ctx[28](input);
-	      append(div0, t1);
-	      if (if_block1) if_block1.m(div0, null);
+	      ctx[30](input);
 	      append(div0, t2);
 	      if (if_block2) if_block2.m(div0, null);
-	      append(div1, t3);
-	      if (if_block3) if_block3.m(div1, 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[20]), listen(input, "change",
+	        ctx[22]), listen(input, "change",
 	        /*onKeyUp*/
-	        ctx[20])];
+	        ctx[22])];
 	        mounted = true;
 	      }
 	    },
 
 	    p(ctx, [dirty]) {
 	      if (
-	      /*leadingicon*/
-	      ctx[4]) {
+	      /*prefix*/
+	      ctx[13]) {
 	        if (if_block0) {
 	          if_block0.p(ctx, dirty);
 	        } else {
-	          if_block0 = create_if_block_5(ctx);
+	          if_block0 = create_if_block_7(ctx);
 	          if_block0.c();
 	          if_block0.m(div0, t0);
 	        }
@@ -7046,6 +7114,21 @@
 	        if_block0 = null;
 	      }
 
+	      if (
+	      /*leadingicon*/
+	      ctx[4]) {
+	        if (if_block1) {
+	          if_block1.p(ctx, dirty);
+	        } else {
+	          if_block1 = create_if_block_6(ctx);
+	          if_block1.c();
+	          if_block1.m(div0, t1);
+	        }
+	      } else if (if_block1) {
+	        if_block1.d(1);
+	        if_block1 = null;
+	      }
+
 	      if (dirty &
 	      /*variant*/
 	      64 && input_class_value !== (input_class_value = `input--${
@@ -7064,18 +7147,18 @@
 
 	      if (dirty &
 	      /*isReadonly*/
-	      262144) {
+	      1048576) {
 	        input.readOnly =
 	        /*isReadonly*/
-	        ctx[18];
+	        ctx[20];
 	      }
 
 	      if (dirty &
 	      /*isDisabled*/
-	      65536) {
+	      262144) {
 	        input.disabled =
 	        /*isDisabled*/
-	        ctx[16];
+	        ctx[18];
 	      }
 
 	      if (dirty &
@@ -7158,43 +7241,58 @@
 	      /*trailingicon*/
 	      ctx[5] && !
 	      /*handlesTrailingIconClick*/
-	      ctx[19]) {
-	        if (if_block1) {
-	          if_block1.p(ctx, dirty);
+	      ctx[21]) {
+	        if (if_block2) {
+	          if_block2.p(ctx, dirty);
 	        } else {
-	          if_block1 = create_if_block_4$1(ctx);
-	          if_block1.c();
-	          if_block1.m(div0, t2);
+	          if_block2 = create_if_block_5(ctx);
+	          if_block2.c();
+	          if_block2.m(div0, t3);
 	        }
-	      } else if (if_block1) {
-	        if_block1.d(1);
-	        if_block1 = null;
+	      } else if (if_block2) {
+	        if_block2.d(1);
+	        if_block2 = null;
 	      }
 
 	      if (
 	      /*trailingicon*/
 	      ctx[5] &&
 	      /*handlesTrailingIconClick*/
-	      ctx[19]) {
-	        if (if_block2) {
-	          if_block2.p(ctx, dirty);
+	      ctx[21]) {
+	        if (if_block3) {
+	          if_block3.p(ctx, dirty);
 	        } else {
-	          if_block2 = create_if_block_3$3(ctx);
-	          if_block2.c();
-	          if_block2.m(div0, null);
+	          if_block3 = create_if_block_4$1(ctx);
+	          if_block3.c();
+	          if_block3.m(div0, t4);
 	        }
-	      } else if (if_block2) {
-	        if_block2.d(1);
-	        if_block2 = null;
+	      } else if (if_block3) {
+	        if_block3.d(1);
+	        if_block3 = null;
+	      }
+
+	      if (
+	      /*suffix*/
+	      ctx[14]) {
+	        if (if_block4) {
+	          if_block4.p(ctx, dirty);
+	        } else {
+	          if_block4 = create_if_block_3$3(ctx);
+	          if_block4.c();
+	          if_block4.m(div0, null);
+	        }
+	      } else if (if_block4) {
+	        if_block4.d(1);
+	        if_block4 = null;
 	      }
 
 	      if (dirty &
 	      /*isDisabled, variant, type*/
-	      65602 && div0_class_value !== (div0_class_value = `
+	      262210 && div0_class_value !== (div0_class_value = `
       goa-input
       ${
       /*isDisabled*/
-      ctx[16] ? "goa-input--disabled" : ""}
+      ctx[18] ? "goa-input--disabled" : ""}
       variant--${
       /*variant*/
       ctx[6]}
@@ -7207,25 +7305,25 @@
 
 	      if (dirty &
 	      /*isDisabled, variant, type, isError*/
-	      196674) {
+	      786498) {
 	        toggle_class(div0, "error",
 	        /*isError*/
-	        ctx[17]);
+	        ctx[19]);
 	      }
 
 	      if (
 	      /*showCounter*/
-	      ctx[15]) {
-	        if (if_block3) {
-	          if_block3.p(ctx, dirty);
+	      ctx[17]) {
+	        if (if_block5) {
+	          if_block5.p(ctx, dirty);
 	        } else {
-	          if_block3 = create_if_block$a(ctx);
-	          if_block3.c();
-	          if_block3.m(div1, null);
+	          if_block5 = create_if_block$a(ctx);
+	          if_block5.c();
+	          if_block5.m(div1, null);
 	        }
-	      } else if (if_block3) {
-	        if_block3.d(1);
-	        if_block3 = null;
+	      } else if (if_block5) {
+	        if_block5.d(1);
+	        if_block5 = null;
 	      }
 
 	      if (dirty &
@@ -7245,12 +7343,14 @@
 	    d(detaching) {
 	      if (detaching) detach(div1);
 	      if (if_block0) if_block0.d();
+	      if (if_block1) if_block1.d();
 	      /*input_binding*/
 
-	      ctx[28](null);
-	      if (if_block1) if_block1.d();
+	      ctx[30](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);
 	    }
@@ -7325,6 +7425,12 @@
 	  let {
 	    step = null
 	  } = $$props;
+	  let {
+	    prefix = ""
+	  } = $$props;
+	  let {
+	    suffix = ""
+	  } = $$props;
 	  let {
 	    showcounter = "false"
 	  } = $$props;
@@ -7349,7 +7455,7 @@
 	  function input_binding($$value) {
 	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 	      inputEl = $$value;
-	      $$invalidate(14, inputEl);
+	      $$invalidate(16, inputEl);
 	    });
 	  }
 
@@ -7361,61 +7467,63 @@
 	    if ('leadingicon' in $$props) $$invalidate(4, leadingicon = $$props.leadingicon);
 	    if ('trailingicon' in $$props) $$invalidate(5, trailingicon = $$props.trailingicon);
 	    if ('variant' in $$props) $$invalidate(6, variant = $$props.variant);
-	    if ('disabled' in $$props) $$invalidate(21, disabled = $$props.disabled);
-	    if ('handletrailingiconclick' in $$props) $$invalidate(22, handletrailingiconclick = $$props.handletrailingiconclick);
-	    if ('focused' in $$props) $$invalidate(23, focused = $$props.focused);
-	    if ('readonly' in $$props) $$invalidate(24, readonly = $$props.readonly);
-	    if ('error' in $$props) $$invalidate(25, error = $$props.error);
+	    if ('disabled' in $$props) $$invalidate(23, disabled = $$props.disabled);
+	    if ('handletrailingiconclick' in $$props) $$invalidate(24, handletrailingiconclick = $$props.handletrailingiconclick);
+	    if ('focused' in $$props) $$invalidate(25, focused = $$props.focused);
+	    if ('readonly' in $$props) $$invalidate(26, readonly = $$props.readonly);
+	    if ('error' in $$props) $$invalidate(27, error = $$props.error);
 	    if ('testid' in $$props) $$invalidate(7, testid = $$props.testid);
 	    if ('width' in $$props) $$invalidate(8, width = $$props.width);
 	    if ('arialabel' in $$props) $$invalidate(9, arialabel = $$props.arialabel);
 	    if ('min' in $$props) $$invalidate(10, min = $$props.min);
 	    if ('max' in $$props) $$invalidate(11, max = $$props.max);
 	    if ('step' in $$props) $$invalidate(12, step = $$props.step);
-	    if ('showcounter' in $$props) $$invalidate(26, showcounter = $$props.showcounter);
-	    if ('maxcharcount' in $$props) $$invalidate(13, maxcharcount = $$props.maxcharcount);
+	    if ('prefix' in $$props) $$invalidate(13, prefix = $$props.prefix);
+	    if ('suffix' in $$props) $$invalidate(14, suffix = $$props.suffix);
+	    if ('showcounter' in $$props) $$invalidate(28, showcounter = $$props.showcounter);
+	    if ('maxcharcount' in $$props) $$invalidate(15, maxcharcount = $$props.maxcharcount);
 	  };
 
 	  $$self.$$.update = () => {
 	    if ($$self.$$.dirty &
 	    /*handletrailingiconclick*/
-	    4194304) {
-	      $$invalidate(19, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
+	    16777216) {
+	      $$invalidate(21, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
 	    }
 
 	    if ($$self.$$.dirty &
 	    /*focused*/
-	    8388608) {
-	      $$invalidate(27, isFocused = toBoolean(focused));
+	    33554432) {
+	      $$invalidate(29, isFocused = toBoolean(focused));
 	    }
 
 	    if ($$self.$$.dirty &
 	    /*readonly*/
-	    16777216) {
-	      $$invalidate(18, isReadonly = toBoolean(readonly));
+	    67108864) {
+	      $$invalidate(20, isReadonly = toBoolean(readonly));
 	    }
 
 	    if ($$self.$$.dirty &
 	    /*error*/
-	    33554432) {
-	      $$invalidate(17, isError = toBoolean(error));
+	    134217728) {
+	      $$invalidate(19, isError = toBoolean(error));
 	    }
 
 	    if ($$self.$$.dirty &
 	    /*disabled*/
-	    2097152) {
-	      $$invalidate(16, isDisabled = toBoolean(disabled));
+	    8388608) {
+	      $$invalidate(18, isDisabled = toBoolean(disabled));
 	    }
 
 	    if ($$self.$$.dirty &
 	    /*showcounter*/
-	    67108864) {
-	      $$invalidate(15, showCounter = toBoolean(showcounter));
+	    268435456) {
+	      $$invalidate(17, showCounter = toBoolean(showcounter));
 	    }
 
 	    if ($$self.$$.dirty &
 	    /*isFocused, inputEl*/
-	    134234112) {
+	    536936448) {
 	      if (isFocused && inputEl) {
 	        setTimeout(() => inputEl.focus(), 1);
 	      }
@@ -7423,7 +7531,7 @@
 
 	    if ($$self.$$.dirty &
 	    /*inputEl, type*/
-	    16386) {
+	    65538) {
 	      if (inputEl && type === "search") {
 	        inputEl.addEventListener("search", e => {
 	          onKeyUp(e);
@@ -7432,13 +7540,13 @@
 	    }
 	  };
 
-	  return [value, type, name, placeholder, leadingicon, trailingicon, variant, testid, width, arialabel, min, max, step, maxcharcount, inputEl, showCounter, isDisabled, isError, isReadonly, handlesTrailingIconClick, onKeyUp, disabled, handletrailingiconclick, focused, readonly, error, showcounter, isFocused, input_binding];
+	  return [value, type, name, placeholder, leadingicon, trailingicon, variant, testid, width, arialabel, min, max, step, prefix, suffix, maxcharcount, inputEl, showCounter, isDisabled, isError, isReadonly, handlesTrailingIconClick, onKeyUp, disabled, handletrailingiconclick, focused, readonly, error, showcounter, isFocused, input_binding];
 	}
 
 	class Input extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.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:center;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=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}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;font-family:var(--font-family)}.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=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>')
       center center no-repeat}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
@@ -7452,19 +7560,21 @@
 	      leadingicon: 4,
 	      trailingicon: 5,
 	      variant: 6,
-	      disabled: 21,
-	      handletrailingiconclick: 22,
-	      focused: 23,
-	      readonly: 24,
-	      error: 25,
+	      disabled: 23,
+	      handletrailingiconclick: 24,
+	      focused: 25,
+	      readonly: 26,
+	      error: 27,
 	      testid: 7,
 	      width: 8,
 	      arialabel: 9,
 	      min: 10,
 	      max: 11,
 	      step: 12,
-	      showcounter: 26,
-	      maxcharcount: 13
+	      prefix: 13,
+	      suffix: 14,
+	      showcounter: 28,
+	      maxcharcount: 15
 	    }, null);
 
 	    if (options) {
@@ -7480,7 +7590,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["type", "name", "value", "placeholder", "leadingicon", "trailingicon", "variant", "disabled", "handletrailingiconclick", "focused", "readonly", "error", "testid", "width", "arialabel", "min", "max", "step", "showcounter", "maxcharcount"];
+	    return ["type", "name", "value", "placeholder", "leadingicon", "trailingicon", "variant", "disabled", "handletrailingiconclick", "focused", "readonly", "error", "testid", "width", "arialabel", "min", "max", "step", "prefix", "suffix", "showcounter", "maxcharcount"];
 	  }
 
 	  get type() {
@@ -7561,7 +7671,7 @@
 	  }
 
 	  get disabled() {
-	    return this.$$.ctx[21];
+	    return this.$$.ctx[23];
 	  }
 
 	  set disabled(disabled) {
@@ -7572,7 +7682,7 @@
 	  }
 
 	  get handletrailingiconclick() {
-	    return this.$$.ctx[22];
+	    return this.$$.ctx[24];
 	  }
 
 	  set handletrailingiconclick(handletrailingiconclick) {
@@ -7583,7 +7693,7 @@
 	  }
 
 	  get focused() {
-	    return this.$$.ctx[23];
+	    return this.$$.ctx[25];
 	  }
 
 	  set focused(focused) {
@@ -7594,7 +7704,7 @@
 	  }
 
 	  get readonly() {
-	    return this.$$.ctx[24];
+	    return this.$$.ctx[26];
 	  }
 
 	  set readonly(readonly) {
@@ -7605,7 +7715,7 @@
 	  }
 
 	  get error() {
-	    return this.$$.ctx[25];
+	    return this.$$.ctx[27];
 	  }
 
 	  set error(error) {
@@ -7681,8 +7791,30 @@
 	    flush();
 	  }
 
+	  get prefix() {
+	    return this.$$.ctx[13];
+	  }
+
+	  set prefix(prefix) {
+	    this.$$set({
+	      prefix
+	    });
+	    flush();
+	  }
+
+	  get suffix() {
+	    return this.$$.ctx[14];
+	  }
+
+	  set suffix(suffix) {
+	    this.$$set({
+	      suffix
+	    });
+	    flush();
+	  }
+
 	  get showcounter() {
-	    return this.$$.ctx[26];
+	    return this.$$.ctx[28];
 	  }
 
 	  set showcounter(showcounter) {
@@ -7693,7 +7825,7 @@
 	  }
 
 	  get maxcharcount() {
-	    return this.$$.ctx[13];
+	    return this.$$.ctx[15];
 	  }
 
 	  set maxcharcount(maxcharcount) {
@@ -9235,7 +9367,7 @@
 	  const child_ctx = ctx.slice();
 	  child_ctx[14] = list[i];
 	  return child_ctx;
-	} // (55:2) {#each options as option (option.value) }
+	} // (63:2) {#each options as option (option.value) }
 
 
 	function create_each_block$3(key_1, ctx) {
@@ -9530,20 +9662,31 @@
 	  let ctx;
 	  let el;
 	  onMount(() => {
-	    if (!name) {
-	      console.error("goa-radio: missing the required `name` attribute. It must match the children's name attribute.");
-	      return;
-	    }
-
-	    ctx = createContext(name);
-	    ctx.subscribe(msg => {
-	      switch (msg === null || msg === void 0 ? void 0 : msg.type) {
-	        case BIND:
-	          {
-	            $$invalidate(4, options = [...options, msg]);
+	    const maxAttempts = 10;
+	    let attempts = 0;
+	    const fn = setInterval(_async(function () {
+	      attempts++;
+
+	      if (name) {
+	        ctx = createContext(name);
+	        ctx.subscribe(msg => {
+	          switch (msg === null || msg === void 0 ? void 0 : msg.type) {
+	            case BIND:
+	              {
+	                $$invalidate(4, options = [...options, msg]);
+	              }
 	          }
+	        });
+	        clearInterval(fn);
 	      }
-	    });
+
+	      if (attempts > maxAttempts) {
+	        console.error("goa-radio: missing the required `name` attribute. It must match the children's name attribute.");
+	        clearInterval(fn);
+	      }
+
+	      return _await();
+	    }), 10);
 	  });
 
 	  function onChange(newValue) {
@@ -9726,21 +9869,33 @@
 	    name
 	  } = $$props;
 	  let ctx;
-	  onMount(_async(function () {
-	    if (!name) {
-	      console.error("goa-radio-item: missing the required `name` attribute. It must match the parent's name attribute.");
-	      return;
-	    }
+	  onMount(() => {
+	    const maxAttempts = 10;
+	    let attempts = 0;
+	    const fn = setInterval(() => {
+	      attempts++;
 
-	    return _await(getContext(name), function (_getContext3) {
-	      ctx = _getContext3;
-	      ctx.notify({
-	        type: BIND,
-	        value,
-	        label
-	      });
-	    });
-	  }));
+	      if (name) {
+	        ctx = getContext(name);
+
+	        if (!ctx) {
+	          return;
+	        }
+
+	        ctx.notify({
+	          type: BIND,
+	          value,
+	          label
+	        });
+	        clearInterval(fn);
+	      }
+
+	      if (attempts > maxAttempts) {
+	        console.error("goa-radio-item: missing the required `name` attribute. It must match the parent's name attribute.");
+	        clearInterval(fn);
+	      }
+	    }, 10);
+	  });
 
 	  $$self.$$set = $$props => {
 	    if ('value' in $$props) $$invalidate(0, value = $$props.value);
@@ -10001,7 +10156,7 @@
 	      t0 = space();
 	      div1 = element("div");
 	      div1.innerHTML = `An official site of the <a href="https://www.alberta.ca/index.aspx">Alberta Government</a>`;
-	      attr(div0, "class", "service-level service-level--live");
+	      attr(div0, "class", "service-type service-type--live");
 	      attr(div1, "data-testid", "type");
 	      attr(div1, "class", "site-text");
 	    },
@@ -10049,7 +10204,7 @@
 	      t4 = text(" service\n      ");
 	      if (if_block) if_block.c();
 	      attr(div0, "data-testid", "type");
-	      attr(div0, "class", div0_class_value = "service-level service-level--" +
+	      attr(div0, "class", div0_class_value = "service-type service-type--" +
 	      /*type*/
 	      ctx[0].toLowerCase());
 	      attr(a, "href", "https://www.alberta.ca/index.aspx");
@@ -10077,7 +10232,7 @@
 
 	      if (dirty &
 	      /*type*/
-	      1 && div0_class_value !== (div0_class_value = "service-level service-level--" +
+	      1 && div0_class_value !== (div0_class_value = "service-type service-type--" +
 	      /*type*/
 	      ctx[0].toLowerCase())) {
 	        attr(div0, "class", div0_class_value);
@@ -13914,6 +14069,8 @@
 	      min = _a.min,
 	      max = _a.max,
 	      step = _a.step,
+	      prefix = _a.prefix,
+	      suffix = _a.suffix,
 	      onTrailingIconClick = _a.onTrailingIconClick,
 	      onChange = _a.onChange;
 	  var ref = react.useRef(null);
@@ -13961,6 +14118,8 @@
 	    min: min,
 	    max: max,
 	    step: step,
+	    prefix: prefix,
+	    suffix: suffix,
 	    showcounter: showCounter,
 	    maxcharcount: maxCharCount,
 	    handletrailingiconclick: !!onTrailingIconClick
@@ -14123,8 +14282,7 @@
 	styleInject(css_248z$1);
 
 	var GoAButton = function GoAButton(_a) {
-	  var title = _a.title,
-	      _b = _a.disabled,
+	  var _b = _a.disabled,
 	      disabled = _b === void 0 ? false : _b,
 	      _c = _a.type,
 	      type = _c === void 0 ? 'primary' : _c,
@@ -14158,7 +14316,6 @@
 	    size: size,
 	    variant: variant,
 	    disabled: disabled,
-	    title: title,
 	    leadingicon: leadingIcon,
 	    trailingicon: trailingIcon
 	  }, {