From 6d9f45b107b10af02870846c6c0ad7527b98b6a3 Mon Sep 17 00:00:00 2001
From: Samuel Janda <hi@simpleprogramming.com.au>
Date: Tue, 16 Jan 2024 19:25:13 +1100
Subject: [PATCH] Adopted suggested changes

---
 COMPONENT_INDEX.md                      |  84 ++++----
 docs/src/COMPONENT_API.json             | 274 ++++++++++++------------
 docs/src/pages/components/TextInput.svx |   2 +-
 package.json                            |   3 +-
 src/TextInput/TextInput.svelte          | 150 +++++--------
 src/TextInput/TextInputSkeleton.svelte  |   2 +-
 6 files changed, 236 insertions(+), 279 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 820b060d..ff709735 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -4215,30 +4215,30 @@ None.
 
 ### Props
 
-| Prop name       | Required | Kind             | Reactive | Type                                          | Default value                                    | Description                                                                                                                                                                                                                                                                                                                           |
-| :-------------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| value           | No       | <code>let</code> | Yes      | <code>null &#124; number &#124; string</code> | <code>""</code>                                  | Specify the input value<br />`value` will be set to `null` if `type = "number"` and the value is empty                                                                                                                                                                                                                                |
-| ref             | No       | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>     | <code>null</code>                                | Obtain a reference to the input HTML element                                                                                                                                                                                                                                                                                          |
-| counter         | No       | <code>let</code> | No       | <code>"char" &#124; "word"</code>             | <code>undefined</code>                           | Set to "char" to enable display the character counter or "word" to display the word count.                                                                                                                                                                                                                                            |
-| disabled        | No       | <code>let</code> | No       | <code>boolean</code>                          | <code>false</code>                               | Set to `true` to disable the input                                                                                                                                                                                                                                                                                                    |
-| helperText      | No       | <code>let</code> | No       | <code>string</code>                           | <code>""</code>                                  | Specify the helper text                                                                                                                                                                                                                                                                                                               |
-| hideLabel       | No       | <code>let</code> | No       | <code>boolean</code>                          | <code>false</code>                               | Set to `true` to visually hide the label text                                                                                                                                                                                                                                                                                         |
-| id              | No       | <code>let</code> | No       | <code>string</code>                           | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                                                                                                                                                                                                                                                                                                       |
-| inline          | No       | <code>let</code> | No       | <code>boolean</code>                          | <code>false</code>                               | Set to `true` to use the inline variant                                                                                                                                                                                                                                                                                               |
-| invalid         | No       | <code>let</code> | No       | <code>boolean</code>                          | <code>false</code>                               | Set to `true` to indicate an invalid state                                                                                                                                                                                                                                                                                            |
-| invalidText     | No       | <code>let</code> | No       | <code>string</code>                           | <code>""</code>                                  | Specify the invalid state text                                                                                                                                                                                                                                                                                                        |
-| labelText       | No       | <code>let</code> | No       | <code>string</code>                           | <code>""</code>                                  | Specify the label text                                                                                                                                                                                                                                                                                                                |
-| light           | No       | <code>let</code> | No       | <code>boolean</code>                          | <code>false</code>                               | Set to `true` to enable the light variant<br />For use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color<br />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<br />@deprecated |
-| maxCount        | No       | <code>let</code> | No       | <code>number</code>                           | <code>undefined</code>                           | Specify the maximum number of characters/words allowed<br />This is needed in order for `counter` to display                                                                                                                                                                                                                          |
-| name            | No       | <code>let</code> | No       | <code>string</code>                           | <code>undefined</code>                           | Specify a name attribute for the input                                                                                                                                                                                                                                                                                                |
-| placeholder     | No       | <code>let</code> | No       | <code>string</code>                           | <code>""</code>                                  | Specify the placeholder text                                                                                                                                                                                                                                                                                                          |
-| readonly        | No       | <code>let</code> | No       | <code>boolean</code>                          | <code>false</code>                               | Set to `true` to use the read-only variant                                                                                                                                                                                                                                                                                            |
-| required        | No       | <code>let</code> | No       | <code>boolean</code>                          | <code>false</code>                               | Set to `true` to mark the field as required                                                                                                                                                                                                                                                                                           |
-| size            | No       | <code>let</code> | No       | <code>"sm" &#124; "md" &#124; "lg"</code>     | <code>undefined</code>                           | Set the size of the input                                                                                                                                                                                                                                                                                                             |
-| warn            | No       | <code>let</code> | No       | <code>boolean</code>                          | <code>false</code>                               | Set to `true` to indicate an warning state                                                                                                                                                                                                                                                                                            |
-| warnText        | No       | <code>let</code> | No       | <code>string</code>                           | <code>""</code>                                  | Specify the warning state text                                                                                                                                                                                                                                                                                                        |
-| labelAttributes | No       | <code>let</code> | No       | <code>Record<string, string></code>           | <code>{}</code>                                  | Set HTML attributes on the `label` element                                                                                                                                                                                                                                                                                            |
-| inputAttributes | No       | <code>let</code> | No       | <code>Record<string, string></code>           | <code>{}</code>                                  | Set HTML attributes on the `input` element                                                                                                                                                                                                                                                                                            |
+| Prop name       | Required | Kind             | Reactive | Type                                                       | Default value                                    | Description                                                                                                                                                                                                                                                                                                                           |
+| :-------------- | :------- | :--------------- | :------- | ---------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ref             | No       | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>                  | <code>null</code>                                | Obtain a reference to the input HTML element                                                                                                                                                                                                                                                                                          |
+| value           | No       | <code>let</code> | Yes      | <code>null &#124; number &#124; string</code>              | <code>""</code>                                  | Specify the input value<br />`value` will be set to `null` if `typeof value === "number"` and `value` is empty                                                                                                                                                                                                                        |
+| size            | No       | <code>let</code> | No       | <code>"sm" &#124; "md" &#124; "lg"</code>                  | <code>"md"</code>                                | Set the size of the input                                                                                                                                                                                                                                                                                                             |
+| placeholder     | No       | <code>let</code> | No       | <code>string</code>                                        | <code>""</code>                                  | Specify the placeholder text                                                                                                                                                                                                                                                                                                          |
+| light           | No       | <code>let</code> | No       | <code>boolean</code>                                       | <code>false</code>                               | Set to `true` to enable the light variant<br />For use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color<br />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<br />@deprecated |
+| disabled        | No       | <code>let</code> | No       | <code>boolean</code>                                       | <code>false</code>                               | Set to `true` to disable the input                                                                                                                                                                                                                                                                                                    |
+| labelText       | No       | <code>let</code> | No       | <code>string</code>                                        | <code>""</code>                                  | Specify the label text                                                                                                                                                                                                                                                                                                                |
+| hideLabel       | No       | <code>let</code> | No       | <code>boolean</code>                                       | <code>false</code>                               | Set to `true` to visually hide the label text                                                                                                                                                                                                                                                                                         |
+| helperText      | No       | <code>let</code> | No       | <code>string</code>                                        | <code>""</code>                                  | Specify the helper text                                                                                                                                                                                                                                                                                                               |
+| counter         | No       | <code>let</code> | No       | <code>boolean</code>                                       | <code>false</code>                               | Set to `true` to enable display the character counter. Requires `maxCount` to be set.                                                                                                                                                                                                                                                 |
+| maxCount        | No       | <code>let</code> | No       | <code>number</code>                                        | <code>undefined</code>                           | Specify the maximum number of characters/words allowed<br />This is needed in order for `counter` to display                                                                                                                                                                                                                          |
+| invalid         | No       | <code>let</code> | No       | <code>boolean</code>                                       | <code>false</code>                               | Set to `true` to indicate an invalid state                                                                                                                                                                                                                                                                                            |
+| invalidText     | No       | <code>let</code> | No       | <code>string</code>                                        | <code>""</code>                                  | Specify the invalid state text                                                                                                                                                                                                                                                                                                        |
+| warn            | No       | <code>let</code> | No       | <code>boolean</code>                                       | <code>false</code>                               | Set to `true` to indicate an warning state                                                                                                                                                                                                                                                                                            |
+| warnText        | No       | <code>let</code> | No       | <code>string</code>                                        | <code>""</code>                                  | Specify the warning state text                                                                                                                                                                                                                                                                                                        |
+| id              | No       | <code>let</code> | No       | <code>string</code>                                        | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                                                                                                                                                                                                                                                                                                       |
+| name            | No       | <code>let</code> | No       | <code>string</code>                                        | <code>undefined</code>                           | Specify a name attribute for the input                                                                                                                                                                                                                                                                                                |
+| inline          | No       | <code>let</code> | No       | <code>boolean</code>                                       | <code>false</code>                               | Set to `true` to use the inline variant                                                                                                                                                                                                                                                                                               |
+| required        | No       | <code>let</code> | No       | <code>boolean</code>                                       | <code>false</code>                               | Set to `true` to mark the field as required                                                                                                                                                                                                                                                                                           |
+| readonly        | No       | <code>let</code> | No       | <code>boolean</code>                                       | <code>false</code>                               | Set to `true` to use the read-only variant                                                                                                                                                                                                                                                                                            |
+| labelAttributes | No       | <code>let</code> | No       | <code>import('svelte/elements').HTMLLabelAttributes</code> | <code>{}</code>                                  | Set HTML attributes on the `label` element                                                                                                                                                                                                                                                                                            |
+| inputAttributes | No       | <code>let</code> | No       | <code>import('svelte/elements').HTMLInputAttributes</code> | <code>{}</code>                                  | Set HTML attributes on the `input` element                                                                                                                                                                                                                                                                                            |
 
 ### Slots
 
@@ -4251,29 +4251,29 @@ None.
 
 ### Events
 
-| Event name   | Type       | Detail                                        |
-| :----------- | :--------- | :-------------------------------------------- |
-| change       | dispatched | <code>null &#124; number &#124; string</code> |
-| input        | dispatched | <code>null &#124; number &#124; string</code> |
-| click        | forwarded  | --                                            |
-| pointerup    | forwarded  | --                                            |
-| pointerover  | forwarded  | --                                            |
-| pointerenter | forwarded  | --                                            |
-| pointerleave | forwarded  | --                                            |
-| keydown      | forwarded  | --                                            |
-| keyup        | forwarded  | --                                            |
-| focus        | forwarded  | --                                            |
-| blur         | forwarded  | --                                            |
-| paste        | forwarded  | --                                            |
+| Event name   | Type      | Detail |
+| :----------- | :-------- | :----- |
+| click        | forwarded | --     |
+| pointerup    | forwarded | --     |
+| pointerover  | forwarded | --     |
+| pointerenter | forwarded | --     |
+| pointerleave | forwarded | --     |
+| change       | forwarded | --     |
+| input        | forwarded | --     |
+| keydown      | forwarded | --     |
+| keyup        | forwarded | --     |
+| focus        | forwarded | --     |
+| blur         | forwarded | --     |
+| paste        | forwarded | --     |
 
 ## `TextInputSkeleton`
 
 ### Props
 
-| Prop name     | Required | Kind             | Reactive | Type                                | Default value      | Description                                                |
-| :------------ | :------- | :--------------- | :------- | ----------------------------------- | ------------------ | ---------------------------------------------------------- |
-| hideLabel     | No       | <code>let</code> | No       | <code>boolean</code>                | <code>false</code> | Set to `true` to hide the label text                       |
-| divAttributes | No       | <code>let</code> | No       | <code>Record<string, string></code> | <code>{}</code>    | Specify the div HTML attributes for the skeleton container |
+| Prop name     | Required | Kind             | Reactive | Type                                                     | Default value      | Description                                                |
+| :------------ | :------- | :--------------- | :------- | -------------------------------------------------------- | ------------------ | ---------------------------------------------------------- |
+| hideLabel     | No       | <code>let</code> | No       | <code>boolean</code>                                     | <code>false</code> | Set to `true` to hide the label text                       |
+| divAttributes | No       | <code>let</code> | No       | <code>import('svelte/elements').HTMLDivAttributes</code> | <code>{}</code>    | Specify the div HTML attributes for the skeleton container |
 
 ### Slots
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 5d34b7d5..81ef5730 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -12698,10 +12698,59 @@
       "filePath": "src/TextInput/TextInput.svelte",
       "props": [
         {
-          "name": "counter",
+          "name": "value",
           "kind": "let",
-          "description": "Set to \"char\" to enable display the character counter or \"word\" to display the word count.",
-          "type": "\"char\" | \"word\"",
+          "description": "Specify the input value\n`value` will be set to `null` if `typeof value === \"number\"` and `value` is empty",
+          "type": "null | number | string",
+          "value": "\"\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "ref",
+          "kind": "let",
+          "description": "Obtain a reference to the input HTML element",
+          "type": "null | HTMLInputElement",
+          "value": "null",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "size",
+          "kind": "let",
+          "description": "Set the size of the input",
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "value": "\"md\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "placeholder",
+          "kind": "let",
+          "description": "Specify the placeholder text",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "light",
+          "kind": "let",
+          "description": "Set to `true` to enable the light variant\nFor use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color\nThe light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release\n@deprecated ",
+          "type": "boolean",
+          "value": "false",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -12721,9 +12770,9 @@
           "reactive": false
         },
         {
-          "name": "helperText",
+          "name": "labelText",
           "kind": "let",
-          "description": "Specify the helper text",
+          "description": "Specify the label text",
           "type": "string",
           "value": "\"\"",
           "isFunction": false,
@@ -12745,11 +12794,11 @@
           "reactive": false
         },
         {
-          "name": "id",
+          "name": "helperText",
           "kind": "let",
-          "description": "Set an id for the input element",
+          "description": "Specify the helper text",
           "type": "string",
-          "value": "\"ccs-\" + Math.random().toString(36)",
+          "value": "\"\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -12757,9 +12806,9 @@
           "reactive": false
         },
         {
-          "name": "inline",
+          "name": "counter",
           "kind": "let",
-          "description": "Set to `true` to use the inline variant",
+          "description": "Set to `true` to enable display the character counter. Requires `maxCount` to be set.",
           "type": "boolean",
           "value": "false",
           "isFunction": false,
@@ -12768,6 +12817,17 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "maxCount",
+          "kind": "let",
+          "description": "Specify the maximum number of characters/words allowed\nThis is needed in order for `counter` to display",
+          "type": "number",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "invalid",
           "kind": "let",
@@ -12792,123 +12852,6 @@
           "constant": false,
           "reactive": false
         },
-        {
-          "name": "labelText",
-          "kind": "let",
-          "description": "Specify the label text",
-          "type": "string",
-          "value": "\"\"",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        },
-        {
-          "name": "light",
-          "kind": "let",
-          "description": "Set to `true` to enable the light variant\nFor use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color\nThe light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release\n@deprecated ",
-          "type": "boolean",
-          "value": "false",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        },
-        {
-          "name": "maxCount",
-          "kind": "let",
-          "description": "Specify the maximum number of characters/words allowed\nThis is needed in order for `counter` to display",
-          "type": "number",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        },
-        {
-          "name": "name",
-          "kind": "let",
-          "description": "Specify a name attribute for the input",
-          "type": "string",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        },
-        {
-          "name": "placeholder",
-          "kind": "let",
-          "description": "Specify the placeholder text",
-          "type": "string",
-          "value": "\"\"",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        },
-        {
-          "name": "readonly",
-          "kind": "let",
-          "description": "Set to `true` to use the read-only variant",
-          "type": "boolean",
-          "value": "false",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        },
-        {
-          "name": "ref",
-          "kind": "let",
-          "description": "Obtain a reference to the input HTML element",
-          "type": "null | HTMLInputElement",
-          "value": "null",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": true
-        },
-        {
-          "name": "required",
-          "kind": "let",
-          "description": "Set to `true` to mark the field as required",
-          "type": "boolean",
-          "value": "false",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        },
-        {
-          "name": "size",
-          "kind": "let",
-          "description": "Set the size of the input",
-          "type": "\"sm\" | \"md\" | \"lg\"",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        },
-        {
-          "name": "value",
-          "kind": "let",
-          "description": "Specify the input value\n`value` will be set to `null` if `type = \"number\"` and the value is empty",
-          "type": "null | number | string",
-          "value": "\"\"",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": true
-        },
         {
           "name": "warn",
           "kind": "let",
@@ -12933,11 +12876,70 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "id",
+          "kind": "let",
+          "description": "Set an id for the input element",
+          "type": "string",
+          "value": "\"ccs-\" + Math.random().toString(36)",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "name",
+          "kind": "let",
+          "description": "Specify a name attribute for the input",
+          "type": "string",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "inline",
+          "kind": "let",
+          "description": "Set to `true` to use the inline variant",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "required",
+          "kind": "let",
+          "description": "Set to `true` to mark the field as required",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "readonly",
+          "kind": "let",
+          "description": "Set to `true` to use the read-only variant",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "labelAttributes",
           "kind": "let",
           "description": "Set HTML attributes on the `label` element",
-          "type": "Record<string, string>",
+          "type": "import('svelte/elements').HTMLLabelAttributes",
           "value": "{}",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -12949,7 +12951,7 @@
           "name": "inputAttributes",
           "kind": "let",
           "description": "Set HTML attributes on the `input` element",
-          "type": "Record<string, string>",
+          "type": "import('svelte/elements').HTMLInputAttributes",
           "value": "{}",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -12986,21 +12988,13 @@
         }
       ],
       "events": [
-        {
-          "type": "dispatched",
-          "name": "change",
-          "detail": "null | number | string"
-        },
-        {
-          "type": "dispatched",
-          "name": "input",
-          "detail": "null | number | string"
-        },
         { "type": "forwarded", "name": "click", "element": "div" },
         { "type": "forwarded", "name": "pointerup", "element": "div" },
         { "type": "forwarded", "name": "pointerover", "element": "div" },
         { "type": "forwarded", "name": "pointerenter", "element": "div" },
         { "type": "forwarded", "name": "pointerleave", "element": "div" },
+        { "type": "forwarded", "name": "change", "element": "input" },
+        { "type": "forwarded", "name": "input", "element": "input" },
         { "type": "forwarded", "name": "keydown", "element": "input" },
         { "type": "forwarded", "name": "keyup", "element": "input" },
         { "type": "forwarded", "name": "focus", "element": "input" },
@@ -13029,7 +13023,7 @@
           "name": "divAttributes",
           "kind": "let",
           "description": "Specify the div HTML attributes for the skeleton container",
-          "type": "Record<string, string>",
+          "type": "import('svelte/elements').HTMLDivAttributes",
           "value": "{}",
           "isFunction": false,
           "isFunctionDeclaration": false,
diff --git a/docs/src/pages/components/TextInput.svx b/docs/src/pages/components/TextInput.svx
index 1022da6f..4ceb521d 100644
--- a/docs/src/pages/components/TextInput.svx
+++ b/docs/src/pages/components/TextInput.svx
@@ -41,7 +41,7 @@ components: ["TextInput", "TextInputSkeleton"]
 
 ## Character Counter
 
-<TextInput labelText="Username" placeholder="Enter username..." maxCount={32} counter="char" />
+<TextInput labelText="Username" placeholder="Enter username..." maxCount={32} counter />
 
 ## Invalid state
 
diff --git a/package.json b/package.json
index 4580ed50..774bee0c 100644
--- a/package.json
+++ b/package.json
@@ -88,7 +88,6 @@
   "contributors": [
     "Josef Aidt (https://github.com/josefaidt)",
     "Eric Liu (https://github.com/metonym)",
-    "Enrico Sacchetti (https://github.com/theetrain)",
-    "Samuel Janda (https://github.com/SimpleProgrammingAU)"
+    "Enrico Sacchetti (https://github.com/theetrain)"
   ]
 }
diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte
index aecafe3e..51e3294f 100644
--- a/src/TextInput/TextInput.svelte
+++ b/src/TextInput/TextInput.svelte
@@ -1,38 +1,21 @@
 <script>
   /**
-   * @event {null | number | string} change
-   * @event {null | number | string} input
+   * Specify the input value
+   * `value` will be set to `null` if `typeof value === "number"` and `value` is empty
+   * @type {null | number | string}
    */
+  export let value = "";
 
+  /** Obtain a reference to the input HTML element */
+  export let ref = null;
   /**
-   * Set to "char" to enable display the character counter or "word" to display the word count.
-   * @type {"char" | "word"}
+   * Set the size of the input
+   * @type {"sm" | "md" | "lg"}
    */
-  export let counter = undefined;
+  export let size = "md";
 
-  /** Set to `true` to disable the input */
-  export let disabled = false;
-
-  /** Specify the helper text */
-  export let helperText = "";
-
-  /** Set to `true` to visually hide the label text */
-  export let hideLabel = false;
-
-  /** Set an id for the input element */
-  export let id = "ccs-" + Math.random().toString(36);
-
-  /** Set to `true` to use the inline variant */
-  export let inline = false;
-
-  /** Set to `true` to indicate an invalid state */
-  export let invalid = false;
-
-  /** Specify the invalid state text */
-  export let invalidText = "";
-
-  /** Specify the label text */
-  export let labelText = "";
+  /** Specify the placeholder text */
+  export let placeholder = "";
 
   /**
    * Set to `true` to enable the light variant
@@ -42,6 +25,21 @@
    */
   export let light = false;
 
+  /** Set to `true` to disable the input */
+  export let disabled = false;
+
+  /** Specify the label text */
+  export let labelText = "";
+
+  /** Set to `true` to visually hide the label text */
+  export let hideLabel = false;
+
+  /** Specify the helper text */
+  export let helperText = "";
+
+  /** Set to `true` to enable display the character counter. Requires `maxCount` to be set. */
+  export let counter = false;
+
   /**
    * Specify the maximum number of characters/words allowed
    * This is needed in order for `counter` to display
@@ -49,36 +47,11 @@
    */
   export let maxCount = undefined;
 
-  /**
-   * Specify a name attribute for the input
-   * @type {string}
-   */
-  export let name = undefined;
+  /** Set to `true` to indicate an invalid state */
+  export let invalid = false;
 
-  /** Specify the placeholder text */
-  export let placeholder = "";
-
-  /** Set to `true` to use the read-only variant */
-  export let readonly = false;
-
-  /** Obtain a reference to the input HTML element */
-  export let ref = null;
-
-  /** Set to `true` to mark the field as required */
-  export let required = false;
-
-  /**
-   * Set the size of the input
-   * @type {"sm" | "md" | "lg"}
-   */
-  export let size = 'md';
-
-  /**
-   * 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 invalid state text */
+  export let invalidText = "";
 
   /** Set to `true` to indicate an warning state */
   export let warn = false;
@@ -86,6 +59,24 @@
   /** Specify the warning state text */
   export let warnText = "";
 
+  /** Set an id for the input element */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify a name attribute for the input
+   * @type {string}
+   */
+  export let name = undefined;
+
+  /** Set to `true` to use the inline variant */
+  export let inline = false;
+
+  /** Set to `true` to mark the field as required */
+  export let required = false;
+
+  /** Set to `true` to use the read-only variant */
+  export let readonly = false;
+
   /**
    * Set HTML attributes on the `label` element
    * @type {import('svelte/elements').HTMLLabelAttributes}
@@ -98,40 +89,14 @@
    */
   export let inputAttributes = {};
 
-  import { createEventDispatcher, getContext } from "svelte";
+  import { getContext } from "svelte";
   import WarningFilled from "../icons/WarningFilled.svelte";
   import WarningAltFilled from "../icons/WarningAltFilled.svelte";
 
   const ctx = getContext("Form");
-  const dispatch = createEventDispatcher();
-  let count = 0;
-
-  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);
-    if (maxCount && value.length > maxCount) value = value.slice(0, maxCount);
-    if (counter && maxCount) updateCount();
-    dispatch("input", value);
-  };
-
-  /** @type {(e: Event) => void} */
-  const onChange = (e) => {
-    dispatch("change", parse(e.target.value));
-  };
-
-  const updateCount = () => {
-    if (counter === "char") {
-      count = value.length;
-    } else if (counter === "word") {
-      count = value.split(/\b\w+\b/).length - 1;
-    }
-  };
 
+  $: if (maxCount && value.length > maxCount) value = value.slice(0, maxCount);
+  $: count = value.length;
   $: isFluid = !!ctx && ctx.isFluid;
   $: error = invalid && !readonly;
   $: helperId = `helper-${id}`;
@@ -165,7 +130,7 @@
           class:bx--label--inline="{inline}"
           class:bx--label--inline--sm="{size === 'sm'}"
           class:bx--label--inline--md="{size === 'md'}"
-          class:bx--label--inline--lg="{size === 'lg' || size === 'xl'}"
+          class:bx--label--inline--lg="{size === 'lg'}"
           {...labelAttributes}
         >
           <slot name="labelText">
@@ -204,8 +169,7 @@
         class:bx--label--inline="{inline}"
         class:bx--label--inline-sm="{inline && size === 'sm'}"
         class:bx--label--inline-md="{inline && size === 'md'}"
-        class:bx--label--inline-lg="{inline &&
-          (size === 'lg' || size === 'xl')}"
+        class:bx--label--inline-lg="{inline && size === 'lg'}"
         {...labelAttributes}
       >
         <slot name="labelText">
@@ -276,13 +240,13 @@
         class:bx--text-input--warning="{warn}"
         class:bx--text-input--sm="{size === 'sm'}"
         class:bx--text-input--md="{size === 'md'}"
-        class:bx--text-input--lg="{size === 'lg' || size === 'xl'}"
+        class:bx--text-input--lg="{size === 'lg'}"
         class:bx--layout--size-sm="{size === 'sm'}"
         class:bx--layout--size-md="{size === 'md'}"
-        class:bx--layout--size-lg="{size === 'lg' || size === 'xl'}"
+        class:bx--layout--size-lg="{size === 'lg'}"
         {...inputAttributes}
-        on:change="{onChange}"
-        on:input="{onInput}"
+        on:change
+        on:input
         on:keydown
         on:keyup
         on:focus
diff --git a/src/TextInput/TextInputSkeleton.svelte b/src/TextInput/TextInputSkeleton.svelte
index 06ec847c..3ded414a 100644
--- a/src/TextInput/TextInputSkeleton.svelte
+++ b/src/TextInput/TextInputSkeleton.svelte
@@ -4,7 +4,7 @@
 
   /**
    * Specify the div HTML attributes for the skeleton container
-   * @type {Record<string, string>}
+   * @type {import('svelte/elements').HTMLDivAttributes}
    */
   export let divAttributes = {};
 </script>