Updated TextInput.test; added forgotten files from previous

tests/TextInput.test.svelte

@@ -5,13 +5,13 @@
 </script>
 
 <TextInput
-  type="number"
   labelText="User name"
   placeholder="Enter user name..."
-  bind:value
+  bind:value="{value}"
-  on:input="{(e) => console.log(e.detail)}"
+  on:input="{(e) => console.log(e)}"
-  on:change="{(e) => (value = e.detail)}"
+  on:change="{(e) => (value = e)}"
   on:paste="{(e) => console.log(e)}"
+  inputAttributes="{{ type: 'number' }}"
 />
 
 <TextInput
@@ -20,6 +20,13 @@
   placeholder="Enter user name..."
 />
 
+<TextInput
+  labelText="Username"
+  placeholder="Enter username..."
+  maxCount="{32}"
+  counter
+/>
+
 <TextInput hideLabel labelText="User name" placeholder="Enter user name..." />
 
 <TextInput light labelText="User name" placeholder="Enter user name..." />

types/TextInput/TextInput.svelte.d.ts

@@ -2,10 +2,38 @@ import type { SvelteComponentTyped } from "svelte";
 
 export interface TextInputProps {
   /**
-   * Set to "char" to enable display the character counter or "word" to display the word count.
+   * Specify the input value
-   * @default undefined
+   * `value` will be set to `null` if `typeof value === "number"` and `value` is empty
+   * @default ""
    */
-  counter?: "char" | "word";
+  value?: null | number | string;
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @default null
+   */
+  ref?: null | HTMLInputElement;
+
+  /**
+   * Set the size of the input
+   * @default "md"
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Specify the placeholder text
+   * @default ""
+   */
+  placeholder?: string;
+
+  /**
+   * Set to `true` to enable the light variant
+   * For use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color
+   * The light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release
+   * @deprecated
+   * @default false
+   */
+  light?: boolean;
 
   /**
    * Set to `true` to disable the input
@@ -14,10 +42,10 @@ export interface TextInputProps {
   disabled?: boolean;
 
   /**
-   * Specify the helper text
+   * Specify the label text
    * @default ""
    */
-  helperText?: string;
+  labelText?: string;
 
   /**
    * Set to `true` to visually hide the label text
@@ -26,16 +54,23 @@ export interface TextInputProps {
   hideLabel?: boolean;
 
   /**
-   * Set an id for the input element
+   * Specify the helper text
-   * @default "ccs-" + Math.random().toString(36)
+   * @default ""
    */
-  id?: string;
+  helperText?: string;
 
   /**
-   * Set to `true` to use the inline variant
+   * Set to `true` to enable display the character counter. Requires `maxCount` to be set.
    * @default false
    */
-  inline?: boolean;
+  counter?: boolean;
+
+  /**
+   * Specify the maximum number of characters/words allowed
+   * This is needed in order for `counter` to display
+   * @default undefined
+   */
+  maxCount?: number;
 
   /**
    * Set to `true` to indicate an invalid state
@@ -49,71 +84,6 @@ export interface TextInputProps {
    */
   invalidText?: string;
 
-  /**
-   * Specify the label text
-   * @default ""
-   */
-  labelText?: string;
-
-  /**
-   * Set to `true` to enable the light variant
-   * For use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color
-   * The light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release
-   * @deprecated
-   * @default false
-   */
-  light?: boolean;
-
-  /**
-   * Specify the maximum number of characters/words allowed
-   * This is needed in order for `counter` to display
-   * @default undefined
-   */
-  maxCount?: number;
-
-  /**
-   * Specify a name attribute for the input
-   * @default undefined
-   */
-  name?: string;
-
-  /**
-   * Specify the placeholder text
-   * @default ""
-   */
-  placeholder?: string;
-
-  /**
-   * Set to `true` to use the read-only variant
-   * @default false
-   */
-  readonly?: boolean;
-
-  /**
-   * Obtain a reference to the input HTML element
-   * @default null
-   */
-  ref?: null | HTMLInputElement;
-
-  /**
-   * Set to `true` to mark the field as required
-   * @default false
-   */
-  required?: boolean;
-
-  /**
-   * Set the size of the input
-   * @default undefined
-   */
-  size?: "sm" | "md" | "lg";
-
-  /**
-   * Specify the input value
-   * `value` will be set to `null` if `type = "number"` and the value is empty
-   * @default ""
-   */
-  value?: null | number | string;
-
   /**
    * Set to `true` to indicate an warning state
    * @default false
@@ -126,29 +96,59 @@ export interface TextInputProps {
    */
   warnText?: string;
 
+  /**
+   * Set an id for the input element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Specify a name attribute for the input
+   * @default undefined
+   */
+  name?: string;
+
+  /**
+   * Set to `true` to use the inline variant
+   * @default false
+   */
+  inline?: boolean;
+
+  /**
+   * Set to `true` to mark the field as required
+   * @default false
+   */
+  required?: boolean;
+
+  /**
+   * Set to `true` to use the read-only variant
+   * @default false
+   */
+  readonly?: boolean;
+
   /**
    * Set HTML attributes on the `label` element
    * @default {}
    */
-  labelAttributes?: Record<string, string>;
+  labelAttributes?: import("svelte/elements").HTMLLabelAttributes;
 
   /**
    * Set HTML attributes on the `input` element
    * @default {}
    */
-  inputAttributes?: Record<string, string>;
+  inputAttributes?: import("svelte/elements").HTMLInputAttributes;
 }
 
 export default class TextInput extends SvelteComponentTyped<
   TextInputProps,
   {
-    change: CustomEvent<null | number | string>;
-    input: CustomEvent<null | number | string>;
     click: WindowEventMap["click"];
     pointerup: WindowEventMap["pointerup"];
     pointerover: WindowEventMap["pointerover"];
     pointerenter: WindowEventMap["pointerenter"];
     pointerleave: WindowEventMap["pointerleave"];
+    change: WindowEventMap["change"];
+    input: WindowEventMap["input"];
     keydown: WindowEventMap["keydown"];
     keyup: WindowEventMap["keyup"];
     focus: WindowEventMap["focus"];

types/TextInput/TextInputSkeleton.svelte.d.ts

@@ -11,7 +11,7 @@ export interface TextInputSkeletonProps {
    * Specify the div HTML attributes for the skeleton container
    * @default {}
    */
-  divAttributes?: Record<string, string>;
+  divAttributes?: import("svelte/elements").HTMLDivAttributes;
 }
 
 export default class TextInputSkeleton extends SvelteComponentTyped<