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

package/react-components.esm.js

@@ -1775,10 +1775,10 @@ function create_else_block$2(ctx) {
   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();
@@ -1803,7 +1803,7 @@ function create_else_block$2(ctx) {
     p(ctx, dirty) {
       if (
       /*leadingicon*/
-      ctx[4]) {
+      ctx[3]) {
         if (if_block0) {
           if_block0.p(ctx, dirty);
         } else {
@@ -1818,7 +1818,7 @@ function create_else_block$2(ctx) {
 
       if (
       /*trailingicon*/
-      ctx[5]) {
+      ctx[4]) {
         if (if_block1) {
           if_block1.p(ctx, dirty);
         } else {
@@ -1842,7 +1842,7 @@ function create_else_block$2(ctx) {
     }
 
   };
-} // (55:2) {#if type === "start"}
+} // (53:2) {#if type === "start"}
 
 
 function create_if_block$h(ctx) {
@@ -1876,7 +1876,7 @@ function create_if_block$h(ctx) {
     }
 
   };
-} // (61:4) {#if leadingicon}
+} // (59:4) {#if leadingicon}
 
 
 function create_if_block_2$7(ctx) {
@@ -1887,10 +1887,10 @@ function create_if_block_2$7(ctx) {
       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) {
@@ -1900,18 +1900,18 @@ function create_if_block_2$7(ctx) {
     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]);
       }
     },
 
@@ -1920,7 +1920,7 @@ function create_if_block_2$7(ctx) {
     }
 
   };
-} // (67:4) {#if trailingicon}
+} // (65:4) {#if trailingicon}
 
 
 function create_if_block_1$a(ctx) {
@@ -1931,10 +1931,10 @@ function create_if_block_1$a(ctx) {
       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) {
@@ -1944,18 +1944,18 @@ function create_if_block_1$a(ctx) {
     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]);
       }
     },
 
@@ -1993,21 +1993,18 @@ function create_fragment$B(ctx) {
       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");
     },
@@ -2047,44 +2044,36 @@ function create_fragment$B(ctx) {
         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");
       }
@@ -2139,9 +2128,6 @@ function instance$w($$self, $$props, $$invalidate) {
   let {
     variant = "normal"
   } = $$props;
-  let {
-    title = ""
-  } = $$props;
   let {
     disabled = "false"
   } = $$props;
@@ -2172,28 +2158,27 @@ function instance$w($$self, $$props, $$invalidate) {
     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 {
@@ -2209,11 +2194,10 @@ class Button extends SvelteElement {
       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) {
@@ -2229,7 +2213,7 @@ class Button extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["type", "size", "variant", "title", "disabled", "leadingicon", "trailingicon", "testid"];
+    return ["type", "size", "variant", "disabled", "leadingicon", "trailingicon", "testid"];
   }
 
   get type() {
@@ -2265,19 +2249,8 @@ class Button extends SvelteElement {
     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) {
@@ -2288,7 +2261,7 @@ class Button extends SvelteElement {
   }
 
   get leadingicon() {
-    return this.$$.ctx[4];
+    return this.$$.ctx[3];
   }
 
   set leadingicon(leadingicon) {
@@ -2299,7 +2272,7 @@ class Button extends SvelteElement {
   }
 
   get trailingicon() {
-    return this.$$.ctx[5];
+    return this.$$.ctx[4];
   }
 
   set trailingicon(trailingicon) {
@@ -2310,7 +2283,7 @@ class Button extends SvelteElement {
   }
 
   get testid() {
-    return this.$$.ctx[6];
+    return this.$$.ctx[5];
   }
 
   set testid(testid) {
@@ -4201,7 +4174,7 @@ function writable(value, start = noop) {
 
 const stores = {};
 
-class ContextStore {
+class ContextStoreInternal {
   constructor() {
     this.store = writable();
   }
@@ -4219,26 +4192,13 @@ class ContextStore {
 }
 
 function createContext(name) {
-  const ctx = new ContextStore();
+  const ctx = new ContextStoreInternal();
   stores[name] = ctx;
   return ctx;
 }
 
-async function getContext(name) {
-  return await _getContext(name, 0);
-}
-
-async function _getContext(name, attempts) {
-  if (attempts > 10) {
-    throw new Error(`Could not find context ${name}`);
-  }
-
-  if (stores[name]) {
-    return stores[name];
-  }
-
-  await tick();
-  return _getContext(name, attempts + 1);
+function getContext(name) {
+  return stores[name];
 }
 
 function deleteContext(name) {
@@ -4252,10 +4212,10 @@ const BIND$1 = "bind";
 
 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) {
@@ -4300,14 +4260,16 @@ function create_if_block$d(ctx) {
     }
 
   };
-} // (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;
@@ -4322,43 +4284,39 @@ function create_each_block$4(key_1, ctx) {
       /*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) {
@@ -4376,17 +4334,19 @@ function create_each_block$4(key_1, ctx) {
       ctx = new_ctx;
       if (dirty[0] &
       /*options*/
-      1024 && t0_value !== (t0_value =
+      1024 && t0_value !== (t0_value = (
+      /*option*/
+      ctx[39].label ||
       /*option*/
-      ctx[36].label + "")) set_data(t0, t0_value);
+      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);
       }
 
@@ -4394,24 +4354,16 @@ function create_each_block$4(key_1, ctx) {
       /*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]);
       }
@@ -4423,7 +4375,7 @@ function create_each_block$4(key_1, ctx) {
         /*_values*/
         ctx[9].includes(
         /*option*/
-        ctx[36].value));
+        ctx[39].value));
       }
     },
 
@@ -4448,8 +4400,6 @@ function create_fragment$q(ctx) {
   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;
@@ -4460,15 +4410,10 @@ function create_fragment$q(ctx) {
   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 {
@@ -4656,7 +4601,25 @@ function create_fragment$q(ctx) {
         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] &
@@ -4700,13 +4663,9 @@ function create_fragment$q(ctx) {
     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*/
 
@@ -4770,15 +4729,42 @@ function instance$o($$self, $$props, $$invalidate) {
   let menuEl;
   let ctx; // Hooks
 
-  onMount(async () => {
-    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 () => {
+      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);
+      }
+    }, 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 {
@@ -4790,13 +4776,7 @@ function instance$o($$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}`));
-    bindContext();
-  });
-  onDestroy(() => {
-    el.removeEventListener("focus", onFocus, true);
-    el.removeEventListener("blur", onBlur, true);
-    deleteContext(name);
-  }); // Functions
+  }
 
   function bindContext() {
     ctx = createContext(name);
@@ -5173,21 +5153,25 @@ function instance$n($$self, $$props, $$invalidate) {
     label = ""
   } = $$props; // private
 
-  let ctx; // Hooks
+  let ctx;
+  onMount(() => {
+    const fn = setInterval(() => {
+      if (name && value) {
+        ctx = getContext(name);
 
-  onMount(async () => {
-    if (!name) {
-      console.error("goa-dropdown-item: missing the required `name` attribute. It must match the parent's name attribute");
-      return;
-    }
+        if (!ctx) {
+          return;
+        }
 
-    ctx = await getContext(name);
-    ctx.notify({
-      type: BIND$1,
-      name,
-      label,
-      value
-    });
+        ctx.notify({
+          type: BIND$1,
+          name,
+          label,
+          value
+        });
+        clearInterval(fn);
+      }
+    }, 10);
   });
 
   $$self.$$set = $$props => {
@@ -6584,7 +6568,40 @@ class IconButton extends SvelteElement {
 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() {
@@ -6615,10 +6632,10 @@ function create_if_block_5(ctx) {
     }
 
   };
-} // (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() {
@@ -6650,10 +6667,10 @@ function create_if_block_4$1(ctx) {
     }
 
   };
-} // (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;
@@ -6662,7 +6679,7 @@ function create_if_block_3$3(ctx) {
       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",
@@ -6683,10 +6700,10 @@ function create_if_block_3$3(ctx) {
     p(ctx, dirty) {
       if (dirty &
       /*isDisabled*/
-      65536) {
+      262144) {
         set_custom_element_data(goa_icon_button, "disabled",
         /*isDisabled*/
-        ctx[16]);
+        ctx[18]);
       }
 
       if (dirty &
@@ -6705,7 +6722,40 @@ function create_if_block_3$3(ctx) {
     }
 
   };
-} // (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) {
@@ -6714,7 +6764,7 @@ function create_if_block$a(ctx) {
   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;
@@ -6756,7 +6806,7 @@ function create_if_block$a(ctx) {
     }
 
   };
-} // (130:31) 
+} // (142:31) 
 
 
 function create_if_block_2$5(ctx) {
@@ -6790,7 +6840,7 @@ function create_if_block_2$5(ctx) {
     }
 
   };
-} // (126:4) {#if maxcharcount > 0}
+} // (138:4) {#if maxcharcount > 0}
 
 
 function create_if_block_1$6(ctx) {
@@ -6801,7 +6851,7 @@ function create_if_block_1$6(ctx) {
   let t0;
   let t1_value = `/${
   /*maxcharcount*/
-  ctx[13]}` + "";
+  ctx[15]}` + "";
   let t1;
   return {
     c() {
@@ -6813,7 +6863,7 @@ function create_if_block_1$6(ctx) {
       /*value*/
       ctx[0].length >
       /*maxcharcount*/
-      ctx[13]);
+      ctx[15]);
     },
 
     m(target, anchor) {
@@ -6830,18 +6880,18 @@ function create_if_block_1$6(ctx) {
       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]);
       }
     },
 
@@ -6856,46 +6906,58 @@ function create_fragment$j(ctx) {
   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*/
@@ -6905,10 +6967,10 @@ function create_fragment$j(ctx) {
       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]);
@@ -6943,7 +7005,7 @@ function create_fragment$j(ctx) {
       goa-input
       ${
       /*isDisabled*/
-      ctx[16] ? "goa-input--disabled" : ""}
+      ctx[18] ? "goa-input--disabled" : ""}
       variant--${
       /*variant*/
       ctx[6]}
@@ -6953,7 +7015,7 @@ function create_fragment$j(ctx) {
     `);
       toggle_class(div0, "error",
       /*isError*/
-      ctx[17]);
+      ctx[19]);
       attr(div1, "class", "container");
       attr(div1, "style", div1_style_value = `
     --width: ${
@@ -6967,35 +7029,39 @@ function create_fragment$j(ctx) {
       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);
         }
@@ -7004,6 +7070,21 @@ function create_fragment$j(ctx) {
         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--${
@@ -7022,18 +7103,18 @@ function create_fragment$j(ctx) {
 
       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 &
@@ -7116,43 +7197,58 @@ function create_fragment$j(ctx) {
       /*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]}
@@ -7165,25 +7261,25 @@ function create_fragment$j(ctx) {
 
       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 &
@@ -7203,12 +7299,14 @@ function create_fragment$j(ctx) {
     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);
     }
@@ -7283,6 +7381,12 @@ function instance$h($$self, $$props, $$invalidate) {
   let {
     step = null
   } = $$props;
+  let {
+    prefix = ""
+  } = $$props;
+  let {
+    suffix = ""
+  } = $$props;
   let {
     showcounter = "false"
   } = $$props;
@@ -7307,7 +7411,7 @@ function instance$h($$self, $$props, $$invalidate) {
   function input_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       inputEl = $$value;
-      $$invalidate(14, inputEl);
+      $$invalidate(16, inputEl);
     });
   }
 
@@ -7319,61 +7423,63 @@ function instance$h($$self, $$props, $$invalidate) {
     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);
       }
@@ -7381,7 +7487,7 @@ function instance$h($$self, $$props, $$invalidate) {
 
     if ($$self.$$.dirty &
     /*inputEl, type*/
-    16386) {
+    65538) {
       if (inputEl && type === "search") {
         inputEl.addEventListener("search", e => {
           onKeyUp(e);
@@ -7390,13 +7496,13 @@ function instance$h($$self, $$props, $$invalidate) {
     }
   };
 
-  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,
@@ -7410,19 +7516,21 @@ class Input extends SvelteElement {
       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) {
@@ -7438,7 +7546,7 @@ class Input extends SvelteElement {
   }
 
   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() {
@@ -7519,7 +7627,7 @@ class Input extends SvelteElement {
   }
 
   get disabled() {
-    return this.$$.ctx[21];
+    return this.$$.ctx[23];
   }
 
   set disabled(disabled) {
@@ -7530,7 +7638,7 @@ class Input extends SvelteElement {
   }
 
   get handletrailingiconclick() {
-    return this.$$.ctx[22];
+    return this.$$.ctx[24];
   }
 
   set handletrailingiconclick(handletrailingiconclick) {
@@ -7541,7 +7649,7 @@ class Input extends SvelteElement {
   }
 
   get focused() {
-    return this.$$.ctx[23];
+    return this.$$.ctx[25];
   }
 
   set focused(focused) {
@@ -7552,7 +7660,7 @@ class Input extends SvelteElement {
   }
 
   get readonly() {
-    return this.$$.ctx[24];
+    return this.$$.ctx[26];
   }
 
   set readonly(readonly) {
@@ -7563,7 +7671,7 @@ class Input extends SvelteElement {
   }
 
   get error() {
-    return this.$$.ctx[25];
+    return this.$$.ctx[27];
   }
 
   set error(error) {
@@ -7639,8 +7747,30 @@ class Input extends SvelteElement {
     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) {
@@ -7651,7 +7781,7 @@ class Input extends SvelteElement {
   }
 
   get maxcharcount() {
-    return this.$$.ctx[13];
+    return this.$$.ctx[15];
   }
 
   set maxcharcount(maxcharcount) {
@@ -9192,7 +9322,7 @@ function get_each_context$3(ctx, list, i) {
   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) {
@@ -9487,20 +9617,29 @@ function instance$d($$self, $$props, $$invalidate) {
   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 () => {
+      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);
+      }
+    }, 10);
   });
 
   function onChange(newValue) {
@@ -9683,18 +9822,32 @@ function instance$c($$self, $$props, $$invalidate) {
     name
   } = $$props;
   let ctx;
-  onMount(async () => {
-    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++;
 
-    ctx = await getContext(name);
-    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 => {
@@ -9956,7 +10109,7 @@ function create_if_block_3(ctx) {
       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");
     },
@@ -10004,7 +10157,7 @@ function create_if_block_1$3(ctx) {
       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");
@@ -10032,7 +10185,7 @@ function create_if_block_1$3(ctx) {
 
       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);
@@ -13860,6 +14013,8 @@ const GoAInput = ({
   min,
   max,
   step,
+  prefix,
+  suffix,
   onTrailingIconClick,
   onChange
 }) => {
@@ -13909,6 +14064,8 @@ const GoAInput = ({
     min: min,
     max: max,
     step: step,
+    prefix: prefix,
+    suffix: suffix,
     showcounter: showCounter,
     maxcharcount: maxCharCount,
     handletrailingiconclick: !!onTrailingIconClick
@@ -14078,7 +14235,6 @@ var css_248z$1 = "goa-button + goa-button {\n  margin-top: 1.5rem;\n}\n\n/* TODO
 styleInject(css_248z$1);
 
 const GoAButton = ({
-  title,
   disabled: _disabled = false,
   type: _type = 'primary',
   size,
@@ -14112,7 +14268,6 @@ const GoAButton = ({
     size: size,
     variant: variant,
     disabled: _disabled,
-    title: title,
     leadingicon: leadingIcon,
     trailingicon: trailingIcon
   }, {