1. We should verify if the input is in an error state onMount and set the error accordingly.

2. Fix last commits and the `invalid` state border works again.
3. If the `invalid` state is set by the user, we must use `setCustomValidity` to set input validity to false.
4. `invalidText` must have a default and must not be empty. If empty, it will set the validity to true. I don't know if we should check for that.

docs/src/pages/components/NumberInput.svx

@@ -27,12 +27,14 @@ See [#no-value](#no-value) to allow for an empty value.
 
 <NumberInput value="{1}" helperText="Step of 0.1" step={0.1} label="Clusters" />
 
-## No value
+## No value and error states
 
-Set `allowEmpty` to `true` to allow for no value.
+Set `required` to `false` to allow for no value.
 
 Set `value` to `null` to denote "no value."
 
+Set `invalid` to `true` to set the input in `invalid` state.
+
 <FileSource src="/framed/NumberInput/NumberInputEmpty" />
 
 ## Hidden label

docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte

@@ -2,14 +2,22 @@
   import { NumberInput, Button } from "carbon-components-svelte";
 
   let value = null;
+  let invalid = false;
 </script>
 
-<NumberInput allowEmpty bind:value />
+<NumberInput required="{false}" bind:value="{value}" invalid="{invalid}" />
 
 <div style="margin: var(--cds-layout-01) 0">
   <Button on:click="{() => (value = null)}">Set to null</Button>
   <Button on:click="{() => (value = 0)}">Set to 0</Button>
+  <Button on:click="{() => (invalid = !invalid)}">Toggle invalid</Button>
 </div>
 
-<strong>Value:</strong>
-{value}
+<p>
+  <strong>Value:</strong>
+  {value}
+</p>
+<p>
+  <strong>Invalid:</strong>
+  {invalid}
+</p>