breaking(text-input): use native bind:value, dispatch instead of forward change, input events (#1065)

Use the native `bind:value` to fix two-way reactivity. As a result, "type" is read through `$$restProps` because it cannot be dynamic when using `bind:value`.

Extend value type to include `null` for the "number" type. This is similar to how `NumberInput` works; `null` represents "no value."

src/TextInput/TextInput.svelte

@@ -1,4 +1,9 @@
 <script>
+  /**
+   * @event {null | number | string} change
+   * @event {null | number | string} input
+   */
+
   /**
    * Set the size of the input
    * @type {"sm" | "xl"}
@@ -6,14 +11,14 @@
   export let size = undefined;
 
   /**
-   * Specify the input value
-   * @type {number | string}
+   * Specify the input value.
+   *
+   * `value` will be set to `null` if type="number"
+   * and the value is empty.
+   * @type {null | number | string}
    */
   export let value = "";
 
-  /** Specify the input type */
-  export let type = "";
-
   /** Specify the placeholder text */
   export let placeholder = "";
 
@@ -65,12 +70,29 @@
   /** Set to `true` to use the read-only variant */
   export let readonly = false;
 
-  import { getContext } from "svelte";
+  import { createEventDispatcher, getContext } from "svelte";
   import WarningFilled16 from "../icons/WarningFilled16.svelte";
   import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
   import EditOff16 from "../icons/EditOff16.svelte";
 
   const ctx = getContext("Form");
+  const dispatch = createEventDispatcher();
+
+  function parse(raw) {
+    if ($$restProps.type !== "number") return raw;
+    return raw != "" ? Number(raw) : null;
+  }
+
+  /** @type {(e: Event) => void} */
+  const onInput = (e) => {
+    value = parse(e.target.value);
+    dispatch("input", value);
+  };
+
+  /** @type {(e: Event) => void} */
+  const onChange = (e) => {
+    dispatch("change", parse(e.target.value));
+  };
 
   $: isFluid = !!ctx && ctx.isFluid;
   $: errorId = `error-${id}`;
@@ -162,8 +184,7 @@
         id="{id}"
         name="{name}"
         placeholder="{placeholder}"
-        type="{type}"
-        value="{value ?? ''}"
+        bind:value
         required="{required}"
         readonly="{readonly}"
         class:bx--text-input="{true}"
@@ -172,11 +193,8 @@
         class:bx--text-input--warn="{warn}"
         {...$$restProps}
         class="{size && `bx--text-input--${size}`}"
-        on:change
-        on:input
-        on:input="{({ target }) => {
-          value = type === 'number' ? Number(target.value) : target.value;
-        }}"
+        on:change="{onChange}"
+        on:input="{onInput}"
         on:keydown
         on:keyup
         on:focus