@abgov/react-components 4.0.0-alpha.134 → 4.0.0-alpha.136

package/react-components.esm.js

@@ -10599,7 +10599,7 @@ function create_if_block$b(ctx) {
     16) show_if = null;
     if (show_if == null) show_if = !!Object.keys(
     /*_iconOverrides*/
-    ctx[13]).includes(
+    ctx[12]).includes(
     /*type*/
     ctx[4]);
     if (show_if) return create_if_block_1$5;
@@ -10639,7 +10639,7 @@ function create_if_block$b(ctx) {
     }
 
   };
-} // (62:4) {:else}
+} // (60:4) {:else}
 
 
 function create_else_block$4(ctx) {
@@ -10688,7 +10688,7 @@ function create_else_block$4(ctx) {
     }
 
   };
-} // (57:4) {#if Object.keys(_iconOverrides).includes(type)}
+} // (55:4) {#if Object.keys(_iconOverrides).includes(type)}
 
 
 function create_if_block_1$5(ctx) {
@@ -10696,7 +10696,7 @@ function create_if_block_1$5(ctx) {
   let html_tag;
   let raw_value =
   /*_iconOverrides*/
-  ctx[13][
+  ctx[12][
   /*type*/
   ctx[4]] + "";
   let t;
@@ -10723,7 +10723,7 @@ function create_if_block_1$5(ctx) {
       /*type*/
       16 && raw_value !== (raw_value =
       /*_iconOverrides*/
-      ctx[13][
+      ctx[12][
       /*type*/
       ctx[4]] + "")) html_tag.p(raw_value);
     },
@@ -10749,10 +10749,10 @@ function create_fragment$l(ctx) {
       attr(div, "class", "goa-icon");
       attr(div, "data-testid",
       /*testid*/
-      ctx[10]);
+      ctx[9]);
       attr(div, "title",
       /*title*/
-      ctx[9]);
+      ctx[8]);
       attr(div, "style", div_style_value = `
     ${calculateMargin(
       /*mt*/
@@ -10765,20 +10765,17 @@ function create_fragment$l(ctx) {
       ctx[3])}
     --size: ${
       /*_size*/
-      ctx[11]};
+      ctx[10]};
     --fill-color: ${
       /*fillcolor*/
       ctx[6]};
-    --hover-color: ${
-      /*hovercolor*/
-      ctx[7]};
     --opacity: ${
       /*opacity*/
-      ctx[8]};
+      ctx[7]};
   `);
       toggle_class(div, "inverted",
       /*isInverted*/
-      ctx[12]);
+      ctx[11]);
     },
 
     m(target, anchor) {
@@ -10804,23 +10801,23 @@ function create_fragment$l(ctx) {
 
       if (dirty &
       /*testid*/
-      1024) {
+      512) {
         attr(div, "data-testid",
         /*testid*/
-        ctx[10]);
+        ctx[9]);
       }
 
       if (dirty &
       /*title*/
-      512) {
+      256) {
         attr(div, "title",
         /*title*/
-        ctx[9]);
+        ctx[8]);
       }
 
       if (dirty &
-      /*mt, mr, mb, ml, _size, fillcolor, hovercolor, opacity*/
-      2511 && div_style_value !== (div_style_value = `
+      /*mt, mr, mb, ml, _size, fillcolor, opacity*/
+      1231 && div_style_value !== (div_style_value = `
     ${calculateMargin(
       /*mt*/
       ctx[0],
@@ -10832,26 +10829,23 @@ function create_fragment$l(ctx) {
       ctx[3])}
     --size: ${
       /*_size*/
-      ctx[11]};
+      ctx[10]};
     --fill-color: ${
       /*fillcolor*/
       ctx[6]};
-    --hover-color: ${
-      /*hovercolor*/
-      ctx[7]};
     --opacity: ${
       /*opacity*/
-      ctx[8]};
+      ctx[7]};
   `)) {
         attr(div, "style", div_style_value);
       }
 
       if (dirty &
       /*isInverted*/
-      4096) {
+      2048) {
         toggle_class(div, "inverted",
         /*isInverted*/
-        ctx[12]);
+        ctx[11]);
       }
     },
 
@@ -10898,9 +10892,6 @@ function instance$j($$self, $$props, $$invalidate) {
   let {
     fillcolor = ""
   } = $$props;
-  let {
-    hovercolor = ""
-  } = $$props;
   let {
     opacity = 1
   } = $$props;
@@ -10929,27 +10920,26 @@ function instance$j($$self, $$props, $$invalidate) {
     if ('mb' in $$props) $$invalidate(2, mb = $$props.mb);
     if ('ml' in $$props) $$invalidate(3, ml = $$props.ml);
     if ('type' in $$props) $$invalidate(4, type = $$props.type);
-    if ('size' in $$props) $$invalidate(14, size = $$props.size);
+    if ('size' in $$props) $$invalidate(13, size = $$props.size);
     if ('theme' in $$props) $$invalidate(5, theme = $$props.theme);
-    if ('inverted' in $$props) $$invalidate(15, inverted = $$props.inverted);
+    if ('inverted' in $$props) $$invalidate(14, inverted = $$props.inverted);
     if ('fillcolor' in $$props) $$invalidate(6, fillcolor = $$props.fillcolor);
-    if ('hovercolor' in $$props) $$invalidate(7, hovercolor = $$props.hovercolor);
-    if ('opacity' in $$props) $$invalidate(8, opacity = $$props.opacity);
-    if ('title' in $$props) $$invalidate(9, title = $$props.title);
-    if ('testid' in $$props) $$invalidate(10, testid = $$props.testid);
+    if ('opacity' in $$props) $$invalidate(7, opacity = $$props.opacity);
+    if ('title' in $$props) $$invalidate(8, title = $$props.title);
+    if ('testid' in $$props) $$invalidate(9, testid = $$props.testid);
   };
 
   $$self.$$.update = () => {
     if ($$self.$$.dirty &
     /*inverted*/
-    32768) {
-      $$invalidate(12, isInverted = toBoolean(inverted));
+    16384) {
+      $$invalidate(11, isInverted = toBoolean(inverted));
     }
 
     if ($$self.$$.dirty &
     /*size*/
-    16384) {
-      $$invalidate(11, _size = {
+    8192) {
+      $$invalidate(10, _size = {
         small: "1.25rem",
         medium: "1.5rem",
         large: "2rem"
@@ -10957,13 +10947,13 @@ function instance$j($$self, $$props, $$invalidate) {
     }
   };
 
-  return [mt, mr, mb, ml, type, theme, fillcolor, hovercolor, opacity, title, testid, _size, isInverted, _iconOverrides, size, inverted];
+  return [mt, mr, mb, ml, type, theme, fillcolor, opacity, title, testid, _size, isInverted, _iconOverrides, size, inverted];
 }
 
 class Icon extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center}ion-icon{pointer-events:none;width:100%;height:100%}.goa-icon{width:var(--size);height:var(--size);fill:var(--fill-color);color:var(--fill-color);opacity:var(--opacity);display:inline-flex;align-items:center;justify-content:center}.goa-icon:hover ion-icon{fill:var(--hover-color);color:var(--hover-color)}.icon-override{display:flex;flex-direction:column;align-items:center}.icon-override *{fill:var(--goa-color-interactive-default)}.inverted *{color:#fff;fill:#fff}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center}ion-icon{pointer-events:none;width:100%;height:100%}.goa-icon{width:var(--size);height:var(--size);fill:var(--fill-color);color:var(--fill-color);opacity:var(--opacity);display:inline-flex;align-items:center;justify-content:center}.icon-override{display:flex;flex-direction:column;align-items:center}.icon-override *{fill:var(--goa-color-interactive-default)}.inverted *{color:#fff;fill:#fff}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -10974,14 +10964,13 @@ class Icon extends SvelteElement {
       mb: 2,
       ml: 3,
       type: 4,
-      size: 14,
+      size: 13,
       theme: 5,
-      inverted: 15,
+      inverted: 14,
       fillcolor: 6,
-      hovercolor: 7,
-      opacity: 8,
-      title: 9,
-      testid: 10
+      opacity: 7,
+      title: 8,
+      testid: 9
     }, null);
 
     if (options) {
@@ -10997,7 +10986,7 @@ class Icon extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["mt", "mr", "mb", "ml", "type", "size", "theme", "inverted", "fillcolor", "hovercolor", "opacity", "title", "testid"];
+    return ["mt", "mr", "mb", "ml", "type", "size", "theme", "inverted", "fillcolor", "opacity", "title", "testid"];
   }
 
   get mt() {
@@ -11056,7 +11045,7 @@ class Icon extends SvelteElement {
   }
 
   get size() {
-    return this.$$.ctx[14];
+    return this.$$.ctx[13];
   }
 
   set size(size) {
@@ -11078,7 +11067,7 @@ class Icon extends SvelteElement {
   }
 
   get inverted() {
-    return this.$$.ctx[15];
+    return this.$$.ctx[14];
   }
 
   set inverted(inverted) {
@@ -11099,19 +11088,8 @@ class Icon extends SvelteElement {
     flush();
   }
 
-  get hovercolor() {
-    return this.$$.ctx[7];
-  }
-
-  set hovercolor(hovercolor) {
-    this.$$set({
-      hovercolor
-    });
-    flush();
-  }
-
   get opacity() {
-    return this.$$.ctx[8];
+    return this.$$.ctx[7];
   }
 
   set opacity(opacity) {
@@ -11122,7 +11100,7 @@ class Icon extends SvelteElement {
   }
 
   get title() {
-    return this.$$.ctx[9];
+    return this.$$.ctx[8];
   }
 
   set title(title) {
@@ -11133,7 +11111,7 @@ class Icon extends SvelteElement {
   }
 
   get testid() {
-    return this.$$.ctx[10];
+    return this.$$.ctx[9];
   }
 
   set testid(testid) {
@@ -11178,7 +11156,7 @@ function create_if_block_4(ctx) {
     }
 
   };
-} // (109:4) {#if leadingicon}
+} // (123:4) {#if leadingicon}
 
 
 function create_if_block_3$4(ctx) {
@@ -11212,7 +11190,7 @@ function create_if_block_3$4(ctx) {
     }
 
   };
-} // (139:4) {#if trailingicon && !handlesTrailingIconClick}
+} // (157:4) {#if trailingicon && !handlesTrailingIconClick}
 
 
 function create_if_block_2$4(ctx) {
@@ -11247,7 +11225,7 @@ function create_if_block_2$4(ctx) {
     }
 
   };
-} // (149:4) {#if trailingicon && handlesTrailingIconClick}
+} // (167:4) {#if trailingicon && handlesTrailingIconClick}
 
 
 function create_if_block_1$4(ctx) {
@@ -11259,7 +11237,7 @@ function create_if_block_1$4(ctx) {
       goa_icon_button = element("goa-icon-button");
       set_custom_element_data(goa_icon_button, "disabled",
       /*isDisabled*/
-      ctx[21]);
+      ctx[24]);
       set_custom_element_data(goa_icon_button, "variant", "nocolor");
       set_custom_element_data(goa_icon_button, "size", "medium");
       set_custom_element_data(goa_icon_button, "icon",
@@ -11280,10 +11258,10 @@ function create_if_block_1$4(ctx) {
     p(ctx, dirty) {
       if (dirty[0] &
       /*isDisabled*/
-      2097152) {
+      16777216) {
         set_custom_element_data(goa_icon_button, "disabled",
         /*isDisabled*/
-        ctx[21]);
+        ctx[24]);
       }
 
       if (dirty[0] &
@@ -11302,7 +11280,7 @@ function create_if_block_1$4(ctx) {
     }
 
   };
-} // (161:4) {#if suffix}
+} // (179:4) {#if suffix}
 
 
 function create_if_block$a(ctx) {
@@ -11367,12 +11345,12 @@ function create_fragment$k(ctx) {
   /*trailingicon*/
   ctx[6] && !
   /*handlesTrailingIconClick*/
-  ctx[24] && create_if_block_2$4(ctx);
+  ctx[27] && create_if_block_2$4(ctx);
   let if_block3 =
   /*trailingicon*/
   ctx[6] &&
   /*handlesTrailingIconClick*/
-  ctx[24] && create_if_block_1$4(ctx);
+  ctx[27] && create_if_block_1$4(ctx);
   let if_block4 =
   /*suffix*/
   ctx[15] && create_if_block$a(ctx);
@@ -11399,18 +11377,30 @@ function create_fragment$k(ctx) {
       div1.innerHTML = `<slot name="trailingContent"></slot>`;
       this.c = noop;
       attr(div0, "class", "leading-content");
-      attr(input, "class", input_class_value = `input--${
+      attr(input, "class", input_class_value = `
+        input--${
       /*variant*/
-      ctx[7]}`);
+      ctx[7]}
+        ${
+      /*_leadingContentSlot*/
+      ctx[22] && !
+      /*isDisabled*/
+      ctx[24] ? "input-leading-content" : ""}
+        ${
+      /*_trailingContentSlot*/
+      ctx[23] && !
+      /*isDisabled*/
+      ctx[24] ? "input-trailing-content" : ""}
+      `);
       attr(input, "style", input_style_value = `--search-icon-offset: ${
       /*trailingicon*/
       ctx[6] ? "-0.5rem" : "0"}`);
       input.readOnly =
       /*isReadonly*/
-      ctx[23];
+      ctx[26];
       input.disabled =
       /*isDisabled*/
-      ctx[21];
+      ctx[24];
       attr(input, "data-testid",
       /*testid*/
       ctx[8]);
@@ -11449,17 +11439,23 @@ function create_fragment$k(ctx) {
       goa-input
       ${
       /*isDisabled*/
-      ctx[21] ? "goa-input--disabled" : ""}
+      ctx[24] ? "goa-input--disabled" : ""}
       variant--${
       /*variant*/
       ctx[7]}
       type--${
       /*type*/
       ctx[1]}
+      ${
+      /*_leadingContentSlot*/
+      ctx[22] ? "goa-input-leading-content" : ""}
+      ${
+      /*_trailingContentSlot*/
+      ctx[23] ? "goa-input-trailing-content" : ""}
     `);
       toggle_class(div2, "error",
       /*isError*/
-      ctx[22]);
+      ctx[25]);
       attr(div3, "class", "container");
       attr(div3, "style", div3_style_value = `
     ${calculateMargin(
@@ -11489,7 +11485,7 @@ function create_fragment$k(ctx) {
       append(div2, input);
       /*input_binding*/
 
-      ctx[33](input);
+      ctx[36](input);
       append(div2, t3);
       if (if_block2) if_block2.m(div2, null);
       append(div2, t4);
@@ -11498,13 +11494,16 @@ function create_fragment$k(ctx) {
       if (if_block4) if_block4.m(div2, null);
       append(div2, t6);
       append(div2, div1);
+      /*div3_binding*/
+
+      ctx[37](div3);
 
       if (!mounted) {
         dispose = [listen(input, "keyup",
         /*onKeyUp*/
-        ctx[25]), listen(input, "change",
+        ctx[28]), listen(input, "change",
         /*onKeyUp*/
-        ctx[25])];
+        ctx[28])];
         mounted = true;
       }
     },
@@ -11541,10 +11540,22 @@ function create_fragment$k(ctx) {
       }
 
       if (dirty[0] &
+      /*variant, _leadingContentSlot, isDisabled, _trailingContentSlot*/
+      29360256 && input_class_value !== (input_class_value = `
+        input--${
       /*variant*/
-      128 && input_class_value !== (input_class_value = `input--${
-      /*variant*/
-      ctx[7]}`)) {
+      ctx[7]}
+        ${
+      /*_leadingContentSlot*/
+      ctx[22] && !
+      /*isDisabled*/
+      ctx[24] ? "input-leading-content" : ""}
+        ${
+      /*_trailingContentSlot*/
+      ctx[23] && !
+      /*isDisabled*/
+      ctx[24] ? "input-trailing-content" : ""}
+      `)) {
         attr(input, "class", input_class_value);
       }
 
@@ -11558,18 +11569,18 @@ function create_fragment$k(ctx) {
 
       if (dirty[0] &
       /*isReadonly*/
-      8388608) {
+      67108864) {
         input.readOnly =
         /*isReadonly*/
-        ctx[23];
+        ctx[26];
       }
 
       if (dirty[0] &
       /*isDisabled*/
-      2097152) {
+      16777216) {
         input.disabled =
         /*isDisabled*/
-        ctx[21];
+        ctx[24];
       }
 
       if (dirty[0] &
@@ -11660,7 +11671,7 @@ function create_fragment$k(ctx) {
       /*trailingicon*/
       ctx[6] && !
       /*handlesTrailingIconClick*/
-      ctx[24]) {
+      ctx[27]) {
         if (if_block2) {
           if_block2.p(ctx, dirty);
         } else {
@@ -11677,7 +11688,7 @@ function create_fragment$k(ctx) {
       /*trailingicon*/
       ctx[6] &&
       /*handlesTrailingIconClick*/
-      ctx[24]) {
+      ctx[27]) {
         if (if_block3) {
           if_block3.p(ctx, dirty);
         } else {
@@ -11706,28 +11717,34 @@ function create_fragment$k(ctx) {
       }
 
       if (dirty[0] &
-      /*isDisabled, variant, type*/
-      2097282 && div2_class_value !== (div2_class_value = `
+      /*isDisabled, variant, type, _leadingContentSlot, _trailingContentSlot*/
+      29360258 && div2_class_value !== (div2_class_value = `
       goa-input
       ${
       /*isDisabled*/
-      ctx[21] ? "goa-input--disabled" : ""}
+      ctx[24] ? "goa-input--disabled" : ""}
       variant--${
       /*variant*/
       ctx[7]}
       type--${
       /*type*/
       ctx[1]}
+      ${
+      /*_leadingContentSlot*/
+      ctx[22] ? "goa-input-leading-content" : ""}
+      ${
+      /*_trailingContentSlot*/
+      ctx[23] ? "goa-input-trailing-content" : ""}
     `)) {
         attr(div2, "class", div2_class_value);
       }
 
       if (dirty[0] &
-      /*isDisabled, variant, type, isError*/
-      6291586) {
+      /*isDisabled, variant, type, _leadingContentSlot, _trailingContentSlot, isError*/
+      62914690) {
         toggle_class(div2, "error",
         /*isError*/
-        ctx[22]);
+        ctx[25]);
       }
 
       if (dirty[0] &
@@ -11759,10 +11776,13 @@ function create_fragment$k(ctx) {
       if (if_block1) if_block1.d();
       /*input_binding*/
 
-      ctx[33](null);
+      ctx[36](null);
       if (if_block2) if_block2.d();
       if (if_block3) if_block3.d();
       if (if_block4) if_block4.d();
+      /*div3_binding*/
+
+      ctx[37](null);
       mounted = false;
       run_all(dispose);
     }
@@ -11863,6 +11883,11 @@ function instance$i($$self, $$props, $$invalidate) {
     ml = null
   } = $$props;
   let inputEl;
+
+  let _rootEL;
+
+  let _leadingContentSlot = false;
+  let _trailingContentSlot = false;
   let _debounceId = null;
 
   function onKeyUp(e) {
@@ -11894,6 +11919,18 @@ function instance$i($$self, $$props, $$invalidate) {
     if (prefix != "" || suffix != "") {
       console.warn("GoAInput [prefix] and [suffix] properties are deprecated. Instead use leadingContent and trailingContent.");
     }
+
+    const leadingContentSlot = _rootEL.querySelector("slot[name=leadingContent]");
+
+    if (leadingContentSlot && leadingContentSlot.assignedNodes().length > 0) {
+      $$invalidate(22, _leadingContentSlot = true);
+    }
+
+    const trailingContentSlot = _rootEL.querySelector("slot[name=trailingContent]");
+
+    if (trailingContentSlot && trailingContentSlot.assignedNodes().length > 0) {
+      $$invalidate(23, _trailingContentSlot = true);
+    }
   });
 
   function input_binding($$value) {
@@ -11903,6 +11940,13 @@ function instance$i($$self, $$props, $$invalidate) {
     });
   }
 
+  function div3_binding($$value) {
+    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+      _rootEL = $$value;
+      $$invalidate(21, _rootEL);
+    });
+  }
+
   $$self.$$set = $$props => {
     if ('type' in $$props) $$invalidate(1, type = $$props.type);
     if ('name' in $$props) $$invalidate(2, name = $$props.name);
@@ -11912,11 +11956,11 @@ function instance$i($$self, $$props, $$invalidate) {
     if ('leadingicon' in $$props) $$invalidate(5, leadingicon = $$props.leadingicon);
     if ('trailingicon' in $$props) $$invalidate(6, trailingicon = $$props.trailingicon);
     if ('variant' in $$props) $$invalidate(7, variant = $$props.variant);
-    if ('disabled' in $$props) $$invalidate(26, disabled = $$props.disabled);
-    if ('handletrailingiconclick' in $$props) $$invalidate(27, handletrailingiconclick = $$props.handletrailingiconclick);
-    if ('focused' in $$props) $$invalidate(28, focused = $$props.focused);
-    if ('readonly' in $$props) $$invalidate(29, readonly = $$props.readonly);
-    if ('error' in $$props) $$invalidate(30, error = $$props.error);
+    if ('disabled' in $$props) $$invalidate(29, disabled = $$props.disabled);
+    if ('handletrailingiconclick' in $$props) $$invalidate(30, handletrailingiconclick = $$props.handletrailingiconclick);
+    if ('focused' in $$props) $$invalidate(31, focused = $$props.focused);
+    if ('readonly' in $$props) $$invalidate(32, readonly = $$props.readonly);
+    if ('error' in $$props) $$invalidate(33, error = $$props.error);
     if ('testid' in $$props) $$invalidate(8, testid = $$props.testid);
     if ('width' in $$props) $$invalidate(9, width = $$props.width);
     if ('arialabel' in $$props) $$invalidate(10, arialabel = $$props.arialabel);
@@ -11925,7 +11969,7 @@ function instance$i($$self, $$props, $$invalidate) {
     if ('step' in $$props) $$invalidate(13, step = $$props.step);
     if ('prefix' in $$props) $$invalidate(14, prefix = $$props.prefix);
     if ('suffix' in $$props) $$invalidate(15, suffix = $$props.suffix);
-    if ('debounce' in $$props) $$invalidate(31, debounce = $$props.debounce);
+    if ('debounce' in $$props) $$invalidate(34, debounce = $$props.debounce);
     if ('mt' in $$props) $$invalidate(16, mt = $$props.mt);
     if ('mr' in $$props) $$invalidate(17, mr = $$props.mr);
     if ('mb' in $$props) $$invalidate(18, mb = $$props.mb);
@@ -11935,39 +11979,39 @@ function instance$i($$self, $$props, $$invalidate) {
   $$self.$$.update = () => {
     if ($$self.$$.dirty[0] &
     /*handletrailingiconclick*/
-    134217728) {
-      $$invalidate(24, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
+    1073741824) {
+      $$invalidate(27, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
     }
 
-    if ($$self.$$.dirty[0] &
+    if ($$self.$$.dirty[1] &
     /*focused*/
-    268435456) {
-      $$invalidate(32, isFocused = toBoolean(focused));
+    1) {
+      $$invalidate(35, isFocused = toBoolean(focused));
     }
 
-    if ($$self.$$.dirty[0] &
+    if ($$self.$$.dirty[1] &
     /*readonly*/
-    536870912) {
-      $$invalidate(23, isReadonly = toBoolean(readonly));
+    2) {
+      $$invalidate(26, isReadonly = toBoolean(readonly));
     }
 
-    if ($$self.$$.dirty[0] &
+    if ($$self.$$.dirty[1] &
     /*error*/
-    1073741824) {
-      $$invalidate(22, isError = toBoolean(error));
+    4) {
+      $$invalidate(25, isError = toBoolean(error));
     }
 
     if ($$self.$$.dirty[0] &
     /*disabled*/
-    67108864) {
-      $$invalidate(21, isDisabled = toBoolean(disabled));
+    536870912) {
+      $$invalidate(24, isDisabled = toBoolean(disabled));
     }
 
     if ($$self.$$.dirty[0] &
     /*inputEl*/
     1048576 | $$self.$$.dirty[1] &
     /*isFocused*/
-    2) {
+    16) {
       if (isFocused && inputEl) {
         setTimeout(() => inputEl.focus(), 1);
       }
@@ -11984,13 +12028,13 @@ function instance$i($$self, $$props, $$invalidate) {
     }
   };
 
-  return [value, type, name, autocapitalize, placeholder, leadingicon, trailingicon, variant, testid, width, arialabel, min, max, step, prefix, suffix, mt, mr, mb, ml, inputEl, isDisabled, isError, isReadonly, handlesTrailingIconClick, onKeyUp, disabled, handletrailingiconclick, focused, readonly, error, debounce, isFocused, input_binding];
+  return [value, type, name, autocapitalize, placeholder, leadingicon, trailingicon, variant, testid, width, arialabel, min, max, step, prefix, suffix, mt, mr, mb, ml, inputEl, _rootEL, _leadingContentSlot, _trailingContentSlot, isDisabled, isError, isReadonly, handlesTrailingIconClick, onKeyUp, disabled, handletrailingiconclick, focused, readonly, error, debounce, isFocused, input_binding, div3_binding];
 }
 
 class Input extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box;line-height:normal}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%;background-color:var(--goa-color-greyscale-white)}.goa-input:hover{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) 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-default);font-size:var(--goa-font-size-4);padding:var(--goa-space-xs);line-height:calc(40px - calc(var(--goa-space-xs) * 2));background-color:transparent;width:100%;flex:1 1 auto;font-family:var(--goa-font-family-sans)}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(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-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,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--goa-color-greyscale-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m);border-right:1px solid var(--goa-color-greyscale-700)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);border-left:1px solid var(--goa-color-greyscale-700)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--goa-color-greyscale-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--goa-color-greyscale-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error,.error:hover{border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 1px var(--goa-color-interactive-error)}.error:focus-within:hover{border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}input[type="search"]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box;line-height:normal}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%;background-color:var(--goa-color-greyscale-white)}.goa-input:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}.goa-input:active:not(.goa-input-leading-content):not(.goa-input-trailing-content),.goa-input:focus:not(.goa-input-leading-content):not(.goa-input-trailing-content),.goa-input:focus-within:not(.goa-input-leading-content):not(.goa-input-trailing-content){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-default);font-size:var(--goa-font-size-4);padding:var(--goa-space-xs);line-height:calc(40px - calc(var(--goa-space-xs) * 2));background-color:transparent;width:100%;flex:1 1 auto;font-family:var(--goa-font-family-sans);z-index:1}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(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200) !important;cursor:default;box-shadow:none !important}.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,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--goa-color-greyscale-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m);border-right:1px solid var(--goa-color-greyscale-700)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);border-left:1px solid var(--goa-color-greyscale-700)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--goa-color-greyscale-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--goa-color-greyscale-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:not(.goa-input-leading-content):not(.goa-input-trailing-content),.error:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 1px var(--goa-color-interactive-error)}.error:focus-within:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.error .input-leading-content,.error .input-leading-content:hover,.error .input-trailing-content,.error .input-trailing-content:hover{outline:var(--goa-border-width-s) solid var(--goa-color-interactive-error);box-shadow:inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-error)}.error .input-leading-content:focus,.error .input-trailing-content:focus,.error .input-leading-content:active,.error .input-trailing-content:active{outline:var(--goa-border-width-s) solid var(--goa-color-interactive-error);box-shadow:0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus)}.input-leading-content:hover,.input-trailing-content:hover{box-shadow:inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover);outline:var(--goa-border-width-s) solid var(--goa-color-interactive-hover)}.input-leading-content:active,.input-leading-content:focus,.input-leading-content:focus-within,.input-trailing-content:active,.input-trailing-content:focus,.input-trailing-content:focus-within{box-shadow:0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus);outline:var(--goa-border-width-s) solid var(--goa-color-greyscale-700)}.error .input-trailing-content,.input-trailing-content:hover,.input-trailing-content:active,.input-trailing-content:focus,.input-trailing-content:focus-within{border-top-left-radius:var(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m)}.error .input-leading-content,.input-leading-content:hover,.input-leading-content:active,.input-leading-content:focus,.input-leading-content:focus-within{border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m)}.input-leading-content.input-trailing-content,.input-leading-content.input-trailing-content:hover,.input-leading-content.input-trailing-content:active,.input-leading-content.input-trailing-content:focus,.input-leading-content.input-trailing-content:focus-within{border-radius:0}input[type="search"]: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,
@@ -12005,11 +12049,11 @@ class Input extends SvelteElement {
       leadingicon: 5,
       trailingicon: 6,
       variant: 7,
-      disabled: 26,
-      handletrailingiconclick: 27,
-      focused: 28,
-      readonly: 29,
-      error: 30,
+      disabled: 29,
+      handletrailingiconclick: 30,
+      focused: 31,
+      readonly: 32,
+      error: 33,
       testid: 8,
       width: 9,
       arialabel: 10,
@@ -12018,7 +12062,7 @@ class Input extends SvelteElement {
       step: 13,
       prefix: 14,
       suffix: 15,
-      debounce: 31,
+      debounce: 34,
       mt: 16,
       mr: 17,
       mb: 18,
@@ -12130,7 +12174,7 @@ class Input extends SvelteElement {
   }
 
   get disabled() {
-    return this.$$.ctx[26];
+    return this.$$.ctx[29];
   }
 
   set disabled(disabled) {
@@ -12141,7 +12185,7 @@ class Input extends SvelteElement {
   }
 
   get handletrailingiconclick() {
-    return this.$$.ctx[27];
+    return this.$$.ctx[30];
   }
 
   set handletrailingiconclick(handletrailingiconclick) {
@@ -12152,7 +12196,7 @@ class Input extends SvelteElement {
   }
 
   get focused() {
-    return this.$$.ctx[28];
+    return this.$$.ctx[31];
   }
 
   set focused(focused) {
@@ -12163,7 +12207,7 @@ class Input extends SvelteElement {
   }
 
   get readonly() {
-    return this.$$.ctx[29];
+    return this.$$.ctx[32];
   }
 
   set readonly(readonly) {
@@ -12174,7 +12218,7 @@ class Input extends SvelteElement {
   }
 
   get error() {
-    return this.$$.ctx[30];
+    return this.$$.ctx[33];
   }
 
   set error(error) {
@@ -12273,7 +12317,7 @@ class Input extends SvelteElement {
   }
 
   get debounce() {
-    return this.$$.ctx[31];
+    return this.$$.ctx[34];
   }
 
   set debounce(debounce) {