@abgov/react-components 4.0.0-alpha.33 → 4.0.0-alpha.34

package/react-components.esm.js

@@ -1453,7 +1453,7 @@ function create_else_block$3(ctx) {
     }
 
   };
-} // (41:2) {#if showIcon}
+} // (40:2) {#if showIcon}
 
 
 function create_if_block_1$b(ctx) {
@@ -1486,7 +1486,7 @@ function create_if_block_1$b(ctx) {
     }
 
   };
-} // (46:2) {#if content}
+} // (45:2) {#if content}
 
 
 function create_if_block$i(ctx) {
@@ -1677,7 +1677,6 @@ function instance$x($$self, $$props, $$invalidate) {
         warning: "alert-circle",
         information: "information-circle",
         emergency: "warning",
-        inactive: "information-circle",
         dark: "information-circle",
         midtone: "information-circle",
         light: "information-circle"
@@ -1691,7 +1690,7 @@ function instance$x($$self, $$props, $$invalidate) {
 class Badge extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-badge{display:inline-flex;align-items:center;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--fw-regular);margin:0.25rem}.icon-only{padding:0.25rem}.goa-badge-content{text-transform:capitalize;font-size:var(--fs-sm);line-height:var(--lh-sm);padding-bottom:var(--font-valign-fix)}.goa-badge.badge-information{background-color:var(--color-gray-100);color:var(--goa-color-status-info)}.goa-badge.badge-success{background-color:var(--goa-color-status-success);color:var(--goa-color-text-light)}.goa-badge.badge-warning{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.goa-badge.badge-emergency{background-color:var(--goa-color-status-emergency);color:var(--goa-color-text-light)}.goa-badge.badge-dark{background-color:var(--color-black);color:var(--goa-color-text-light)}.goa-badge.badge-midtone{background-color:var(--color-gray-600);color:var(--goa-color-text-light)}.goa-badge.badge-light{background-color:var(--color-white);color:var(--goa-color-text)}.goa-badge.badge-inactive{background-color:var(--color-white);color:var(--goa-color-text)}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-badge{display:inline-flex;align-items:center;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--fw-regular);margin:0.25rem}.icon-only{padding:0.25rem}.goa-badge-content{text-transform:capitalize;font-size:var(--fs-sm);line-height:var(--lh-sm);padding-bottom:var(--font-valign-fix)}.goa-badge.badge-information{background-color:var(--color-gray-100);color:var(--goa-color-status-info)}.goa-badge.badge-success{background-color:var(--goa-color-status-success);color:var(--goa-color-text-light)}.goa-badge.badge-warning{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.goa-badge.badge-emergency{background-color:var(--goa-color-status-emergency);color:var(--goa-color-text-light)}.goa-badge.badge-dark{background-color:var(--color-black);color:var(--goa-color-text-light)}.goa-badge.badge-midtone{background-color:var(--color-gray-600);color:var(--goa-color-text-light)}.goa-badge.badge-light{background-color:var(--color-white);color:var(--goa-color-text)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -2116,7 +2115,7 @@ function instance$w($$self, $$props, $$invalidate) {
   let isButtonDark;
   const BUTTON_TYPES = ["primary", "secondary", "tertiary", "start"];
   const SIZES = ["", "compact"];
-  const VARIANTS = ["", "danger"]; // type check functions
+  const VARIANTS = ["", "destructive"]; // type check functions
 
   function isButtonType(value) {
     return BUTTON_TYPES.includes(value);
@@ -2200,7 +2199,7 @@ class Button extends SvelteElement {
   constructor(options) {
     super();
     this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@media(max-width: 480px){:host{width:100%}button{width:100%}}button{display:inline-flex;box-sizing:border-box;border-radius:0.25rem;border:2px solid var(--goa-color-interactive);box-sizing:border-box;cursor:pointer;font-family:var(--font-family);font-size:var(--fs-lg);font-weight:400;height:var(--button-height);letter-spacing:0.5px;line-height:100%;padding:0 0.75rem;gap:0.5rem;align-items:center;justify-content:center;transition:transform 0.1s ease-in-out, background-color 0.2s ease-in-out,
-      border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--fs-base)}button.start{height:var(--button-height-tall);font-weight:var(--fw-bold)}button.start,button.primary{border:2px solid var(--goa-color-interactive);background:var(--goa-color-interactive);color:var(--goa-color-text-light)}button.start:hover,button.primary:hover{border-color:var(--goa-color-interactive--hover);background:var(--goa-color-interactive--hover)}button.start:focus,button.start:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive--focus);border-color:var(--goa-color-interactive--active);background:var(--goa-color-interactive--active);outline:none}button.secondary{border:2px solid var(--goa-color-interactive);background:var(--color-white);color:var(--goa-color-interactive)}button.secondary:hover{border-color:var(--goa-color-interactive--hover);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);background:var(--color-gray-100);outline:none}button.tertiary{border:1px solid transparent;background:transparent;color:var(--goa-color-interactive);text-decoration:underline}button.tertiary:hover{border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--color-gray-100);background:var(--color-gray-100);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.primary.danger{color:var(--color-white);background:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency)}.primary.danger:hover{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.primary.danger:focus,.primary.danger:active{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.secondary.danger{color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);background:var(--color-white)}.secondary.danger:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.secondary.danger:focus,.secondary.danger:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.danger{color:var(--goa-color-status-emergency);border-color:var(--color-gray-200);background:var(--color-white)}.tertiary.danger:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.danger:focus,.tertiary.danger:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}</style>`;
+      border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--fs-base)}button.start{height:var(--button-height-tall);font-weight:var(--fw-bold)}button.start,button.primary{border:2px solid var(--goa-color-interactive);background:var(--goa-color-interactive);color:var(--goa-color-text-light)}button.start:hover,button.primary:hover{border-color:var(--goa-color-interactive--hover);background:var(--goa-color-interactive--hover)}button.start:focus,button.start:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive--focus);border-color:var(--goa-color-interactive--active);background:var(--goa-color-interactive--active);outline:none}button.secondary{border:2px solid var(--goa-color-interactive);background:var(--color-white);color:var(--goa-color-interactive)}button.secondary:hover{border-color:var(--goa-color-interactive--hover);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);background:var(--color-gray-100);outline:none}button.tertiary{border:1px solid transparent;background:transparent;color:var(--goa-color-interactive);text-decoration:underline}button.tertiary:hover{border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--color-gray-100);background:var(--color-gray-100);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.primary.destructive{color:var(--color-white);background:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency)}.primary.destructive:hover{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.primary.destructive:focus,.primary.destructive:active{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.secondary.destructive{color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);background:var(--color-white)}.secondary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.secondary.destructive:focus,.secondary.destructive:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.destructive{color:var(--goa-color-status-emergency);border-color:var(--color-gray-200);background:var(--color-white)}.tertiary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -6615,7 +6614,7 @@ function create_if_block_5(ctx) {
     }
 
   };
-} // (96:4) {#if trailingicon && !handlesTrailingIconClick}
+} // (102:4) {#if trailingicon && !handlesTrailingIconClick}
 
 
 function create_if_block_4$1(ctx) {
@@ -6650,7 +6649,7 @@ function create_if_block_4$1(ctx) {
     }
 
   };
-} // (106:4) {#if trailingicon && handlesTrailingIconClick}
+} // (112:4) {#if trailingicon && handlesTrailingIconClick}
 
 
 function create_if_block_3$3(ctx) {
@@ -6663,7 +6662,7 @@ function create_if_block_3$3(ctx) {
       set_custom_element_data(goa_icon_button, "class", "goa-input-trailing-icon");
       set_custom_element_data(goa_icon_button, "disabled",
       /*isDisabled*/
-      ctx[13]);
+      ctx[16]);
       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",
@@ -6684,10 +6683,10 @@ function create_if_block_3$3(ctx) {
     p(ctx, dirty) {
       if (dirty &
       /*isDisabled*/
-      8192) {
+      65536) {
         set_custom_element_data(goa_icon_button, "disabled",
         /*isDisabled*/
-        ctx[13]);
+        ctx[16]);
       }
 
       if (dirty &
@@ -6706,7 +6705,7 @@ function create_if_block_3$3(ctx) {
     }
 
   };
-} // (120:2) {#if showCounter}
+} // (126:2) {#if showCounter}
 
 
 function create_if_block$a(ctx) {
@@ -6715,7 +6714,7 @@ function create_if_block$a(ctx) {
   function select_block_type(ctx, dirty) {
     if (
     /*maxcharcount*/
-    ctx[10] > 0) return create_if_block_1$6;
+    ctx[13] > 0) return create_if_block_1$6;
     if (
     /*value*/
     ctx[0].length > 0) return create_if_block_2$5;
@@ -6757,7 +6756,7 @@ function create_if_block$a(ctx) {
     }
 
   };
-} // (125:31) 
+} // (131:31) 
 
 
 function create_if_block_2$5(ctx) {
@@ -6791,7 +6790,7 @@ function create_if_block_2$5(ctx) {
     }
 
   };
-} // (121:4) {#if maxcharcount > 0}
+} // (127:4) {#if maxcharcount > 0}
 
 
 function create_if_block_1$6(ctx) {
@@ -6802,7 +6801,7 @@ function create_if_block_1$6(ctx) {
   let t0;
   let t1_value = `/${
   /*maxcharcount*/
-  ctx[10]}` + "";
+  ctx[13]}` + "";
   let t1;
   return {
     c() {
@@ -6814,7 +6813,7 @@ function create_if_block_1$6(ctx) {
       /*value*/
       ctx[0].length >
       /*maxcharcount*/
-      ctx[10]);
+      ctx[13]);
     },
 
     m(target, anchor) {
@@ -6831,18 +6830,18 @@ function create_if_block_1$6(ctx) {
       ctx[0].length + "")) set_data(t0, t0_value);
       if (dirty &
       /*maxcharcount*/
-      1024 && t1_value !== (t1_value = `/${
+      8192 && t1_value !== (t1_value = `/${
       /*maxcharcount*/
-      ctx[10]}` + "")) set_data(t1, t1_value);
+      ctx[13]}` + "")) set_data(t1, t1_value);
 
       if (dirty &
       /*value, maxcharcount*/
-      1025) {
+      8193) {
         toggle_class(div, "counter-error",
         /*value*/
         ctx[0].length >
         /*maxcharcount*/
-        ctx[10]);
+        ctx[13]);
       }
     },
 
@@ -6875,15 +6874,15 @@ function create_fragment$j(ctx) {
   /*trailingicon*/
   ctx[5] && !
   /*handlesTrailingIconClick*/
-  ctx[16] && create_if_block_4$1(ctx);
+  ctx[19] && create_if_block_4$1(ctx);
   let if_block2 =
   /*trailingicon*/
   ctx[5] &&
   /*handlesTrailingIconClick*/
-  ctx[16] && create_if_block_3$3(ctx);
+  ctx[19] && create_if_block_3$3(ctx);
   let if_block3 =
   /*showCounter*/
-  ctx[12] && create_if_block$a(ctx);
+  ctx[15] && create_if_block$a(ctx);
   return {
     c() {
       div1 = element("div");
@@ -6906,10 +6905,10 @@ function create_fragment$j(ctx) {
       ctx[5] ? "-0.5rem" : "0"}`);
       input.readOnly =
       /*isReadonly*/
-      ctx[15];
+      ctx[18];
       input.disabled =
       /*isDisabled*/
-      ctx[13];
+      ctx[16];
       attr(input, "data-testid",
       /*testid*/
       ctx[7]);
@@ -6925,6 +6924,15 @@ function create_fragment$j(ctx) {
       attr(input, "placeholder",
       /*placeholder*/
       ctx[3]);
+      attr(input, "min",
+      /*min*/
+      ctx[10]);
+      attr(input, "max",
+      /*max*/
+      ctx[11]);
+      attr(input, "step",
+      /*step*/
+      ctx[12]);
       attr(input, "role", "textbox");
       attr(input, "aria-label", input_aria_label_value =
       /*arialabel*/
@@ -6935,7 +6943,7 @@ function create_fragment$j(ctx) {
       goa-input
       ${
       /*isDisabled*/
-      ctx[13] ? "goa-input--disabled" : ""}
+      ctx[16] ? "goa-input--disabled" : ""}
       variant--${
       /*variant*/
       ctx[6]}
@@ -6945,7 +6953,7 @@ function create_fragment$j(ctx) {
     `);
       toggle_class(div0, "error",
       /*isError*/
-      ctx[14]);
+      ctx[17]);
       attr(div1, "class", "container");
       attr(div1, "style", div1_style_value = `
     --width: ${
@@ -6962,7 +6970,7 @@ function create_fragment$j(ctx) {
       append(div0, input);
       /*input_binding*/
 
-      ctx[25](input);
+      ctx[28](input);
       append(div0, t1);
       if (if_block1) if_block1.m(div0, null);
       append(div0, t2);
@@ -6973,9 +6981,9 @@ function create_fragment$j(ctx) {
       if (!mounted) {
         dispose = [listen(input, "keyup",
         /*onKeyUp*/
-        ctx[17]), listen(input, "change",
+        ctx[20]), listen(input, "change",
         /*onKeyUp*/
-        ctx[17])];
+        ctx[20])];
         mounted = true;
       }
     },
@@ -7014,18 +7022,18 @@ function create_fragment$j(ctx) {
 
       if (dirty &
       /*isReadonly*/
-      32768) {
+      262144) {
         input.readOnly =
         /*isReadonly*/
-        ctx[15];
+        ctx[18];
       }
 
       if (dirty &
       /*isDisabled*/
-      8192) {
+      65536) {
         input.disabled =
         /*isDisabled*/
-        ctx[13];
+        ctx[16];
       }
 
       if (dirty &
@@ -7070,6 +7078,30 @@ function create_fragment$j(ctx) {
         ctx[3]);
       }
 
+      if (dirty &
+      /*min*/
+      1024) {
+        attr(input, "min",
+        /*min*/
+        ctx[10]);
+      }
+
+      if (dirty &
+      /*max*/
+      2048) {
+        attr(input, "max",
+        /*max*/
+        ctx[11]);
+      }
+
+      if (dirty &
+      /*step*/
+      4096) {
+        attr(input, "step",
+        /*step*/
+        ctx[12]);
+      }
+
       if (dirty &
       /*arialabel, name*/
       516 && input_aria_label_value !== (input_aria_label_value =
@@ -7084,7 +7116,7 @@ function create_fragment$j(ctx) {
       /*trailingicon*/
       ctx[5] && !
       /*handlesTrailingIconClick*/
-      ctx[16]) {
+      ctx[19]) {
         if (if_block1) {
           if_block1.p(ctx, dirty);
         } else {
@@ -7101,7 +7133,7 @@ function create_fragment$j(ctx) {
       /*trailingicon*/
       ctx[5] &&
       /*handlesTrailingIconClick*/
-      ctx[16]) {
+      ctx[19]) {
         if (if_block2) {
           if_block2.p(ctx, dirty);
         } else {
@@ -7116,11 +7148,11 @@ function create_fragment$j(ctx) {
 
       if (dirty &
       /*isDisabled, variant, type*/
-      8258 && div0_class_value !== (div0_class_value = `
+      65602 && div0_class_value !== (div0_class_value = `
       goa-input
       ${
       /*isDisabled*/
-      ctx[13] ? "goa-input--disabled" : ""}
+      ctx[16] ? "goa-input--disabled" : ""}
       variant--${
       /*variant*/
       ctx[6]}
@@ -7133,15 +7165,15 @@ function create_fragment$j(ctx) {
 
       if (dirty &
       /*isDisabled, variant, type, isError*/
-      24642) {
+      196674) {
         toggle_class(div0, "error",
         /*isError*/
-        ctx[14]);
+        ctx[17]);
       }
 
       if (
       /*showCounter*/
-      ctx[12]) {
+      ctx[15]) {
         if (if_block3) {
           if_block3.p(ctx, dirty);
         } else {
@@ -7173,7 +7205,7 @@ function create_fragment$j(ctx) {
       if (if_block0) if_block0.d();
       /*input_binding*/
 
-      ctx[25](null);
+      ctx[28](null);
       if (if_block1) if_block1.d();
       if (if_block2) if_block2.d();
       if (if_block3) if_block3.d();
@@ -7242,6 +7274,15 @@ function instance$h($$self, $$props, $$invalidate) {
   let {
     arialabel = ""
   } = $$props;
+  let {
+    min = ""
+  } = $$props;
+  let {
+    max = ""
+  } = $$props;
+  let {
+    step
+  } = $$props;
   let {
     showcounter = "false"
   } = $$props;
@@ -7266,7 +7307,7 @@ function instance$h($$self, $$props, $$invalidate) {
   function input_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       inputEl = $$value;
-      $$invalidate(11, inputEl);
+      $$invalidate(14, inputEl);
     });
   }
 
@@ -7278,58 +7319,61 @@ 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(18, disabled = $$props.disabled);
-    if ('handletrailingiconclick' in $$props) $$invalidate(19, handletrailingiconclick = $$props.handletrailingiconclick);
-    if ('focused' in $$props) $$invalidate(20, focused = $$props.focused);
-    if ('readonly' in $$props) $$invalidate(21, readonly = $$props.readonly);
-    if ('error' in $$props) $$invalidate(22, error = $$props.error);
+    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 ('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 ('showcounter' in $$props) $$invalidate(23, showcounter = $$props.showcounter);
-    if ('maxcharcount' in $$props) $$invalidate(10, maxcharcount = $$props.maxcharcount);
+    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);
   };
 
   $$self.$$.update = () => {
     if ($$self.$$.dirty &
     /*handletrailingiconclick*/
-    524288) {
-      $$invalidate(16, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
+    4194304) {
+      $$invalidate(19, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
     }
 
     if ($$self.$$.dirty &
     /*focused*/
-    1048576) {
-      $$invalidate(24, isFocused = toBoolean(focused));
+    8388608) {
+      $$invalidate(27, isFocused = toBoolean(focused));
     }
 
     if ($$self.$$.dirty &
     /*readonly*/
-    2097152) {
-      $$invalidate(15, isReadonly = toBoolean(readonly));
+    16777216) {
+      $$invalidate(18, isReadonly = toBoolean(readonly));
     }
 
     if ($$self.$$.dirty &
     /*error*/
-    4194304) {
-      $$invalidate(14, isError = toBoolean(error));
+    33554432) {
+      $$invalidate(17, isError = toBoolean(error));
     }
 
     if ($$self.$$.dirty &
     /*disabled*/
-    262144) {
-      $$invalidate(13, isDisabled = toBoolean(disabled));
+    2097152) {
+      $$invalidate(16, isDisabled = toBoolean(disabled));
     }
 
     if ($$self.$$.dirty &
     /*showcounter*/
-    8388608) {
-      $$invalidate(12, showCounter = toBoolean(showcounter));
+    67108864) {
+      $$invalidate(15, showCounter = toBoolean(showcounter));
     }
 
     if ($$self.$$.dirty &
     /*isFocused, inputEl*/
-    16779264) {
+    134234112) {
       if (isFocused && inputEl) {
         setTimeout(() => inputEl.focus(), 1);
       }
@@ -7337,7 +7381,7 @@ function instance$h($$self, $$props, $$invalidate) {
 
     if ($$self.$$.dirty &
     /*inputEl, type*/
-    2050) {
+    16386) {
       if (inputEl && type === "search") {
         inputEl.addEventListener("search", e => {
           onKeyUp(e);
@@ -7346,7 +7390,7 @@ function instance$h($$self, $$props, $$invalidate) {
     }
   };
 
-  return [value, type, name, placeholder, leadingicon, trailingicon, variant, testid, width, arialabel, 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, maxcharcount, inputEl, showCounter, isDisabled, isError, isReadonly, handlesTrailingIconClick, onKeyUp, disabled, handletrailingiconclick, focused, readonly, error, showcounter, isFocused, input_binding];
 }
 
 class Input extends SvelteElement {
@@ -7366,16 +7410,19 @@ class Input extends SvelteElement {
       leadingicon: 4,
       trailingicon: 5,
       variant: 6,
-      disabled: 18,
-      handletrailingiconclick: 19,
-      focused: 20,
-      readonly: 21,
-      error: 22,
+      disabled: 21,
+      handletrailingiconclick: 22,
+      focused: 23,
+      readonly: 24,
+      error: 25,
       testid: 7,
       width: 8,
       arialabel: 9,
-      showcounter: 23,
-      maxcharcount: 10
+      min: 10,
+      max: 11,
+      step: 12,
+      showcounter: 26,
+      maxcharcount: 13
     }, null);
 
     if (options) {
@@ -7391,7 +7438,7 @@ class Input extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["type", "name", "value", "placeholder", "leadingicon", "trailingicon", "variant", "disabled", "handletrailingiconclick", "focused", "readonly", "error", "testid", "width", "arialabel", "showcounter", "maxcharcount"];
+    return ["type", "name", "value", "placeholder", "leadingicon", "trailingicon", "variant", "disabled", "handletrailingiconclick", "focused", "readonly", "error", "testid", "width", "arialabel", "min", "max", "step", "showcounter", "maxcharcount"];
   }
 
   get type() {
@@ -7472,7 +7519,7 @@ class Input extends SvelteElement {
   }
 
   get disabled() {
-    return this.$$.ctx[18];
+    return this.$$.ctx[21];
   }
 
   set disabled(disabled) {
@@ -7483,7 +7530,7 @@ class Input extends SvelteElement {
   }
 
   get handletrailingiconclick() {
-    return this.$$.ctx[19];
+    return this.$$.ctx[22];
   }
 
   set handletrailingiconclick(handletrailingiconclick) {
@@ -7494,7 +7541,7 @@ class Input extends SvelteElement {
   }
 
   get focused() {
-    return this.$$.ctx[20];
+    return this.$$.ctx[23];
   }
 
   set focused(focused) {
@@ -7505,7 +7552,7 @@ class Input extends SvelteElement {
   }
 
   get readonly() {
-    return this.$$.ctx[21];
+    return this.$$.ctx[24];
   }
 
   set readonly(readonly) {
@@ -7516,7 +7563,7 @@ class Input extends SvelteElement {
   }
 
   get error() {
-    return this.$$.ctx[22];
+    return this.$$.ctx[25];
   }
 
   set error(error) {
@@ -7559,8 +7606,41 @@ class Input extends SvelteElement {
     flush();
   }
 
+  get min() {
+    return this.$$.ctx[10];
+  }
+
+  set min(min) {
+    this.$$set({
+      min
+    });
+    flush();
+  }
+
+  get max() {
+    return this.$$.ctx[11];
+  }
+
+  set max(max) {
+    this.$$set({
+      max
+    });
+    flush();
+  }
+
+  get step() {
+    return this.$$.ctx[12];
+  }
+
+  set step(step) {
+    this.$$set({
+      step
+    });
+    flush();
+  }
+
   get showcounter() {
-    return this.$$.ctx[23];
+    return this.$$.ctx[26];
   }
 
   set showcounter(showcounter) {
@@ -7571,7 +7651,7 @@ class Input extends SvelteElement {
   }
 
   get maxcharcount() {
-    return this.$$.ctx[10];
+    return this.$$.ctx[13];
   }
 
   set maxcharcount(maxcharcount) {
@@ -13773,6 +13853,9 @@ const GoAInput = ({
   showCounter,
   maxCharCount,
   testId,
+  min,
+  max,
+  step,
   onTrailingIconClick,
   onChange
 }) => {
@@ -13819,6 +13902,9 @@ const GoAInput = ({
     "data-testid": testId,
     value: value,
     width: width,
+    min: min,
+    max: max,
+    step: step,
     showcounter: showCounter,
     maxcharcount: maxCharCount,
     handletrailingiconclick: !!onTrailingIconClick
@@ -13886,15 +13972,22 @@ const GoAInputMonth = props => {
     type: "month"
   }), void 0);
 };
-const GoAInputNumber = props => {
+const GoAInputNumber = _a => {
+  var {
+    min,
+    max,
+    value
+  } = _a,
+      props = __rest(_a, ["min", "max", "value"]);
+
   return jsx(GoAInput, Object.assign({}, props, {
-    value: props.value.toString(),
+    min: min === null || min === void 0 ? void 0 : min.toString(),
+    max: max === null || max === void 0 ? void 0 : max.toString(),
+    value: value.toString(),
     type: "number"
   }), void 0);
 };
-const GoAInputRange = _a => {
-  var props = __rest(_a, ["step"]);
-
+const GoAInputRange = props => {
   return jsx(GoAInput, Object.assign({}, props, {
     type: "range"
   }), void 0);