@warp-ds/elements 2.9.1-next.2 → 2.9.1-next.4

package/dist/docs/tabs/accessibility.md

@@ -1 +1,12 @@
 ## Accessibility
+
+The tabs component follows the WAI-ARIA Tabs pattern:
+
+- The tab list gets `role="tablist"`
+- Each tab button gets `role="tab"` with `aria-selected` reflecting its active state
+- Each tab button gets `aria-controls` pointing to its associated panel
+- Each panel gets `role="tabpanel"` with `aria-labelledby` pointing to its associated tab
+- Keyboard navigation is supported:
+  - `ArrowLeft`/`ArrowRight`: Navigate between tabs
+  - `Home`: Move to first tab
+  - `End`: Move to last tab

package/dist/docs/tabs/api.md

@@ -1,36 +1,28 @@
-## API Documentation
+## `<w-tabs>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
 
 ### Properties
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| active | `string` | `-` | - |
-| activeTab | `unknown` | `-` | - |
-| tabs | `unknown` | `-` | - |
+| active | `string` | `"" (Shows the first tab)` | The `id` of the panel that should be active. |
 
 ### Property Details
 
 #### active
 
-
+The `id` of the panel that should be active.
 
 - Type: `string`
-- Default: `-`
-
-#### activeTab
-
-
-
-- Type: `unknown`
-- Default: `-`
+- Default: `"" (Shows the first tab)`
 
-#### tabs
+### Events
 
+#### change
 
+Includes `details.panelId` with the now active tab's ID
 
-- Type: `unknown`
-- Default: `-`
+- Type: `WarpTabsChangeEvent`
 
-### Types
 
-No types documented.

package/dist/docs/tabs/examples.md

@@ -1 +1,69 @@
 ## Examples
+
+<elements-example>
+
+```html
+<w-tabs>
+  <w-tab for="roald-amundsen">Tab 1</w-tab>
+  <w-tab for="fridtjof-nansen">Tab 2</w-tab>
+  <w-tab for="tor-heyerdahl">Tab 3</w-tab>
+  <w-tab-panel id="roald-amundsen">Tab one selected!</w-tab-panel>
+  <w-tab-panel id="fridtjof-nansen">Tab two selected!</w-tab-panel>
+  <w-tab-panel id="tor-heyerdahl">Tab three selected!</w-tab-panel>
+</w-tabs>
+
+<script type="module">
+  const tabs = document.querySelector('w-tabs');
+
+  tabs.addEventListener('change', (event) => {
+    // event.detail = { panelId: string }
+    console.log('Active panel:', event.detail.panelId);
+  });
+</script>
+```
+
+</elements-example>
+
+### Tabs with icons
+
+Icons can be added to tabs using the `icon` slot. By default, icons appear beside the label.
+
+<elements-example>
+
+```html
+<w-tabs active="fridtjof-nansen">
+  <w-tab for="roald-amundsen">
+    <w-icon name="Info" slot="icon"></w-icon>
+    Tab 1
+  </w-tab>
+  <w-tab for="fridtjof-nansen">
+    <w-icon name="Success" slot="icon"></w-icon>
+    Tab 2
+  </w-tab>
+  <w-tab-panel id="roald-amundsen">Content one</w-tab-panel>
+  <w-tab-panel id="fridtjof-nansen">Content two</w-tab-panel>
+</w-tabs>
+```
+
+</elements-example>
+
+Use the `over` attribute to position icons above the label:
+
+<elements-example>
+
+```html
+<w-tabs>
+  <w-tab for="roald-amundsen" over>
+    <w-icon name="Info" slot="icon"></w-icon>
+    Tab 1
+  </w-tab>
+  <w-tab for="fridtjof-nansen" over>
+    <w-icon name="Success" slot="icon"></w-icon>
+    Tab 2
+  </w-tab>
+  <w-tab-panel id="roald-amundsen">Content one</w-tab-panel>
+  <w-tab-panel id="fridtjof-nansen">Content two</w-tab-panel>
+</w-tabs>
+```
+
+</elements-example>

package/dist/docs/tabs/tabs.md

@@ -4,47 +4,124 @@
 
 Tabs are used to organize content by grouping similar information on the same page.
 
-[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)
-
 ## Usage
 
+The tabs component consists of three custom elements that work together:
+
+- `<w-tabs>` - The container that manages tab state and keyboard navigation
+- `<w-tab>` - Individual tab buttons
+- `<w-tab-panel>` - Content panels associated with each tab
+
+Each `<w-tab>` has a `for` attribute that matches the `id` of its corresponding `<w-tab-panel>`.
+
 ## Accessibility
 
+The tabs component follows the WAI-ARIA Tabs pattern:
+
+- The tab list gets `role="tablist"`
+- Each tab button gets `role="tab"` with `aria-selected` reflecting its active state
+- Each tab button gets `aria-controls` pointing to its associated panel
+- Each panel gets `role="tabpanel"` with `aria-labelledby` pointing to its associated tab
+- Keyboard navigation is supported:
+  - `ArrowLeft`/`ArrowRight`: Navigate between tabs
+  - `Home`: Move to first tab
+  - `End`: Move to last tab
+
 ## Examples
 
-## API Documentation
+<elements-example>
+
+```html
+<w-tabs>
+  <w-tab for="roald-amundsen">Tab 1</w-tab>
+  <w-tab for="fridtjof-nansen">Tab 2</w-tab>
+  <w-tab for="tor-heyerdahl">Tab 3</w-tab>
+  <w-tab-panel id="roald-amundsen">Tab one selected!</w-tab-panel>
+  <w-tab-panel id="fridtjof-nansen">Tab two selected!</w-tab-panel>
+  <w-tab-panel id="tor-heyerdahl">Tab three selected!</w-tab-panel>
+</w-tabs>
+
+<script type="module">
+  const tabs = document.querySelector('w-tabs');
+
+  tabs.addEventListener('change', (event) => {
+    // event.detail = { panelId: string }
+    console.log('Active panel:', event.detail.panelId);
+  });
+</script>
+```
+
+</elements-example>
+
+### Tabs with icons
+
+Icons can be added to tabs using the `icon` slot. By default, icons appear beside the label.
+
+<elements-example>
+
+```html
+<w-tabs active="fridtjof-nansen">
+  <w-tab for="roald-amundsen">
+    <w-icon name="Info" slot="icon"></w-icon>
+    Tab 1
+  </w-tab>
+  <w-tab for="fridtjof-nansen">
+    <w-icon name="Success" slot="icon"></w-icon>
+    Tab 2
+  </w-tab>
+  <w-tab-panel id="roald-amundsen">Content one</w-tab-panel>
+  <w-tab-panel id="fridtjof-nansen">Content two</w-tab-panel>
+</w-tabs>
+```
+
+</elements-example>
+
+Use the `over` attribute to position icons above the label:
+
+<elements-example>
+
+```html
+<w-tabs>
+  <w-tab for="roald-amundsen" over>
+    <w-icon name="Info" slot="icon"></w-icon>
+    Tab 1
+  </w-tab>
+  <w-tab for="fridtjof-nansen" over>
+    <w-icon name="Success" slot="icon"></w-icon>
+    Tab 2
+  </w-tab>
+  <w-tab-panel id="roald-amundsen">Content one</w-tab-panel>
+  <w-tab-panel id="fridtjof-nansen">Content two</w-tab-panel>
+</w-tabs>
+```
+
+</elements-example>
+
+## `<w-tabs>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
 
 ### Properties
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| active | `string` | `-` | - |
-| activeTab | `unknown` | `-` | - |
-| tabs | `unknown` | `-` | - |
+| active | `string` | `"" (Shows the first tab)` | The `id` of the panel that should be active. |
 
 ### Property Details
 
 #### active
 
-
+The `id` of the panel that should be active.
 
 - Type: `string`
-- Default: `-`
-
-#### activeTab
-
-
-
-- Type: `unknown`
-- Default: `-`
+- Default: `"" (Shows the first tab)`
 
-#### tabs
+### Events
 
+#### change
 
+Includes `details.panelId` with the now active tab's ID
 
-- Type: `unknown`
-- Default: `-`
+- Type: `WarpTabsChangeEvent`
 
-### Types
 
-No types documented.

package/dist/docs/tabs/usage.md

@@ -1 +1,9 @@
 ## Usage
+
+The tabs component consists of three custom elements that work together:
+
+- `<w-tabs>` - The container that manages tab state and keyboard navigation
+- `<w-tab>` - Individual tab buttons
+- `<w-tab-panel>` - Content panels associated with each tab
+
+Each `<w-tab>` has a `for` attribute that matches the `id` of its corresponding `<w-tab-panel>`.

package/dist/docs/textarea/api.md

@@ -1,23 +1,25 @@
-## API Documentation
+## `<w-textarea>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
 
 ### Properties
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
 | disabled | `boolean` | `false` | Makes the element not focusable and hides it from form submits |
-| helpText | `string` | `-` | Description shown below the input field |
+| help-text | `string` | `-` | Description shown below the input field |
 | invalid | `boolean` | `false` | Mark the form field as invalid. |
 | label | `string` | `-` | Either a `label` or an `aria-label` must be provided. |
-| maxRows | `number` | `-` | Sets the maximum number of text rows before the content starts scrolling. |
-| minRows | `number` | `-` | Sets the minimum number of text rows the textarea should display |
+| maximum-rows | `number` | `-` | Sets the maximum number of text rows before the content starts scrolling. |
+| minimum-rows | `number` | `-` | Sets the minimum number of text rows the textarea should display |
 | name | `string` | `-` | The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form |
 | optional | `boolean` | `false` | Show an icon behind the label indicating the field is optional |
 | placeholder | `string` | `-` | Shown in the textarea when it doesn't have a value |
-| readOnly | `boolean` | `false` | **Deprecated**: Use the native `readonly` attribute instead |
+| read-only | `boolean` | `false` | **Deprecated**: Use the native `readonly` attribute instead |
 | readonly | `boolean` | `false` | Whether the input can be selected but not changed by the user |
 | required | `boolean` | `false` | Whether user input is required on the input before form submission |
-| validationMessage | `string` | `-` | Returns the validation message if the textarea is invalid, otherwise an empty string |
-| validity | `ValidityState` | `-` | Returns the validity state of the textarea |
+| validationMessage (JS only) | `string` | `-` | Returns the validation message if the textarea is invalid, otherwise an empty string |
+| validity (JS only) | `ValidityState` | `-` | Returns the validity state of the textarea |
 | value | `string` | `-` | Lets you set the current value |
 
 ### Property Details
@@ -33,7 +35,7 @@ Please consider more informative alternatives before choosing to use disabled on
 - Type: `boolean`
 - Default: `false`
 
-#### helpText
+#### help-text
 
 Use in combination with `invalid` to show as a validation error message,
 or on its own to show a help text.
@@ -57,14 +59,14 @@ Either a `label` or an `aria-label` must be provided.
 - Type: `string`
 - Default: `-`
 
-#### maxRows
+#### maximum-rows
 
 Sets the maximum number of text rows before the content starts scrolling.
 
 - Type: `number`
 - Default: `-`
 
-#### minRows
+#### minimum-rows
 
 Sets the minimum number of text rows the textarea should display
 
@@ -94,7 +96,7 @@ Placeholder text should not be used as a substitute for labeling the element wit
 - Type: `string`
 - Default: `-`
 
-#### readOnly
+#### read-only
 
 **Deprecated**: Use the native `readonly` attribute instead
 
@@ -117,14 +119,14 @@ Whether user input is required on the input before form submission
 - Type: `boolean`
 - Default: `false`
 
-#### validationMessage
+#### validationMessage (JS only)
 
 Returns the validation message if the textarea is invalid, otherwise an empty string
 
 - Type: `string`
 - Default: `-`
 
-#### validity
+#### validity (JS only)
 
 Returns the validity state of the textarea
 
@@ -138,6 +140,3 @@ Lets you set the current value
 - Type: `string`
 - Default: `-`
 
-### Types
-
-No types documented.

package/dist/docs/textarea/textarea.md

@@ -111,26 +111,28 @@ Makes the textarea content immutable while remaining focusable. The contents can
 
 </elements-example>
 
-## API Documentation
+## `<w-textarea>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
 
 ### Properties
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
 | disabled | `boolean` | `false` | Makes the element not focusable and hides it from form submits |
-| helpText | `string` | `-` | Description shown below the input field |
+| help-text | `string` | `-` | Description shown below the input field |
 | invalid | `boolean` | `false` | Mark the form field as invalid. |
 | label | `string` | `-` | Either a `label` or an `aria-label` must be provided. |
-| maxRows | `number` | `-` | Sets the maximum number of text rows before the content starts scrolling. |
-| minRows | `number` | `-` | Sets the minimum number of text rows the textarea should display |
+| maximum-rows | `number` | `-` | Sets the maximum number of text rows before the content starts scrolling. |
+| minimum-rows | `number` | `-` | Sets the minimum number of text rows the textarea should display |
 | name | `string` | `-` | The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form |
 | optional | `boolean` | `false` | Show an icon behind the label indicating the field is optional |
 | placeholder | `string` | `-` | Shown in the textarea when it doesn't have a value |
-| readOnly | `boolean` | `false` | **Deprecated**: Use the native `readonly` attribute instead |
+| read-only | `boolean` | `false` | **Deprecated**: Use the native `readonly` attribute instead |
 | readonly | `boolean` | `false` | Whether the input can be selected but not changed by the user |
 | required | `boolean` | `false` | Whether user input is required on the input before form submission |
-| validationMessage | `string` | `-` | Returns the validation message if the textarea is invalid, otherwise an empty string |
-| validity | `ValidityState` | `-` | Returns the validity state of the textarea |
+| validationMessage (JS only) | `string` | `-` | Returns the validation message if the textarea is invalid, otherwise an empty string |
+| validity (JS only) | `ValidityState` | `-` | Returns the validity state of the textarea |
 | value | `string` | `-` | Lets you set the current value |
 
 ### Property Details
@@ -146,7 +148,7 @@ Please consider more informative alternatives before choosing to use disabled on
 - Type: `boolean`
 - Default: `false`
 
-#### helpText
+#### help-text
 
 Use in combination with `invalid` to show as a validation error message,
 or on its own to show a help text.
@@ -170,14 +172,14 @@ Either a `label` or an `aria-label` must be provided.
 - Type: `string`
 - Default: `-`
 
-#### maxRows
+#### maximum-rows
 
 Sets the maximum number of text rows before the content starts scrolling.
 
 - Type: `number`
 - Default: `-`
 
-#### minRows
+#### minimum-rows
 
 Sets the minimum number of text rows the textarea should display
 
@@ -207,7 +209,7 @@ Placeholder text should not be used as a substitute for labeling the element wit
 - Type: `string`
 - Default: `-`
 
-#### readOnly
+#### read-only
 
 **Deprecated**: Use the native `readonly` attribute instead
 
@@ -230,14 +232,14 @@ Whether user input is required on the input before form submission
 - Type: `boolean`
 - Default: `false`
 
-#### validationMessage
+#### validationMessage (JS only)
 
 Returns the validation message if the textarea is invalid, otherwise an empty string
 
 - Type: `string`
 - Default: `-`
 
-#### validity
+#### validity (JS only)
 
 Returns the validity state of the textarea
 
@@ -251,6 +253,3 @@ Lets you set the current value
 - Type: `string`
 - Default: `-`
 
-### Types
-
-No types documented.

package/dist/docs/textfield/api.md

@@ -1,4 +1,6 @@
-## API Documentation
+## `<w-textfield>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
 
 ### Properties
 
@@ -6,20 +8,20 @@
 |-|-|-|-|
 | autocomplete | `string \| undefined` | `-` | A space-separated string that hints to browsers [what type of content it can suggest](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete#value) to autofill. |
 | disabled | `boolean` | `false` | Makes the element not focusable and hides it from form submits |
-| formatter | `(value: string) => string` | `-` | Function to format value when the input field |
-| helpText | `string` | `-` | Description shown below the input field |
+| formatter (JS only) | `(value: string) => string` | `-` | Function to format value when the input field |
+| help-text | `string` | `-` | Description shown below the input field |
 | invalid | `boolean` | `false` | Mark the form field as invalid. |
 | label | `string` | `-` | Either a `label` or an `aria-label` must be provided. |
 | max | `number` | `-` | Use with `type="number"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength). |
-| maxLength | `number` | `-` | **Deprecated**: Use the native `maxlength` attribute |
+| max-length | `number` | `-` | **Deprecated**: Use the native `maxlength` attribute |
 | maxlength | `number` | `-` | For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [maximum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength) allowed. |
 | min | `number` | `-` | Use with `type="number"` to set the [minimum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength). |
-| minLength | `number` | `-` | **Deprecated**: Use the native `minlength` attribute |
+| min-length | `number` | `-` | **Deprecated**: Use the native `minlength` attribute |
 | minlength | `number` | `-` | For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [minimum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength) required. |
 | name | `string` | `-` | The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form. |
 | pattern | `string` | `-` | Sets a [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions) that the input's value must [match to pass validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#pattern) |
 | placeholder | `string` | `-` | Shown in the textfield when it doesn't have a value |
-| readOnly | `boolean` | `false` | **Deprecated**: Use the native readonly attribute instead. |
+| read-only | `boolean` | `false` | **Deprecated**: Use the native readonly attribute instead. |
 | readonly | `boolean` | `false` | Whether the input can be selected but not changed by the user. |
 | required | `boolean` | `false` | Whether user input is required on the input before form submission. |
 | size | `string` | `-` | Sets the [size](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#size) (width) of the input field to fit the expected length of inputs. |
@@ -33,7 +35,7 @@
 
 A space-separated string that hints to browsers [what type of content it can suggest](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete#value) to autofill.
 
-- Type: `string \| undefined`
+- Type: `string | undefined`
 - Default: `-`
 
 #### disabled
@@ -47,7 +49,7 @@ Please consider more informative alternatives before choosing to use disabled on
 - Type: `boolean`
 - Default: `false`
 
-#### formatter
+#### formatter (JS only)
 
 Function to format value when the input field.
 
@@ -57,7 +59,7 @@ similar to the accessible input [masking example from Filament Group](https://fi
 - Type: `(value: string) => string`
 - Default: `-`
 
-#### helpText
+#### help-text
 
 Use in combination with `invalid` to show as a validation error message,
 or on its own to show a help text.
@@ -86,7 +88,7 @@ Use with `type="number"` to set the [maximum allowed value](https://developer.mo
 - Type: `number`
 - Default: `-`
 
-#### maxLength
+#### max-length
 
 **Deprecated**: Use the native `maxlength` attribute
 
@@ -109,7 +111,7 @@ Use with `type="number"` to set the [minimum allowed value](https://developer.mo
 - Type: `number`
 - Default: `-`
 
-#### minLength
+#### min-length
 
 **Deprecated**: Use the native `minlength` attribute
 
@@ -148,7 +150,7 @@ Placeholder text should not be used as a substitute for labeling the element wit
 - Type: `string`
 - Default: `-`
 
-#### readOnly
+#### read-only
 
 **Deprecated**: Use the native readonly attribute instead.
 
@@ -202,6 +204,3 @@ Lets you set the current value.
 - Type: `string`
 - Default: `-`
 
-### Types
-
-No types documented.

package/dist/docs/textfield/textfield.md

@@ -181,7 +181,9 @@ The readonly boolean attribute makes the w-textfield's text content immutable. U
 
 </elements-example>
 
-## API Documentation
+## `<w-textfield>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
 
 ### Properties
 
@@ -189,20 +191,20 @@ The readonly boolean attribute makes the w-textfield's text content immutable. U
 |-|-|-|-|
 | autocomplete | `string \| undefined` | `-` | A space-separated string that hints to browsers [what type of content it can suggest](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete#value) to autofill. |
 | disabled | `boolean` | `false` | Makes the element not focusable and hides it from form submits |
-| formatter | `(value: string) => string` | `-` | Function to format value when the input field |
-| helpText | `string` | `-` | Description shown below the input field |
+| formatter (JS only) | `(value: string) => string` | `-` | Function to format value when the input field |
+| help-text | `string` | `-` | Description shown below the input field |
 | invalid | `boolean` | `false` | Mark the form field as invalid. |
 | label | `string` | `-` | Either a `label` or an `aria-label` must be provided. |
 | max | `number` | `-` | Use with `type="number"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength). |
-| maxLength | `number` | `-` | **Deprecated**: Use the native `maxlength` attribute |
+| max-length | `number` | `-` | **Deprecated**: Use the native `maxlength` attribute |
 | maxlength | `number` | `-` | For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [maximum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength) allowed. |
 | min | `number` | `-` | Use with `type="number"` to set the [minimum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength). |
-| minLength | `number` | `-` | **Deprecated**: Use the native `minlength` attribute |
+| min-length | `number` | `-` | **Deprecated**: Use the native `minlength` attribute |
 | minlength | `number` | `-` | For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [minimum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength) required. |
 | name | `string` | `-` | The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form. |
 | pattern | `string` | `-` | Sets a [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions) that the input's value must [match to pass validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#pattern) |
 | placeholder | `string` | `-` | Shown in the textfield when it doesn't have a value |
-| readOnly | `boolean` | `false` | **Deprecated**: Use the native readonly attribute instead. |
+| read-only | `boolean` | `false` | **Deprecated**: Use the native readonly attribute instead. |
 | readonly | `boolean` | `false` | Whether the input can be selected but not changed by the user. |
 | required | `boolean` | `false` | Whether user input is required on the input before form submission. |
 | size | `string` | `-` | Sets the [size](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#size) (width) of the input field to fit the expected length of inputs. |
@@ -216,7 +218,7 @@ The readonly boolean attribute makes the w-textfield's text content immutable. U
 
 A space-separated string that hints to browsers [what type of content it can suggest](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete#value) to autofill.
 
-- Type: `string \| undefined`
+- Type: `string | undefined`
 - Default: `-`
 
 #### disabled
@@ -230,7 +232,7 @@ Please consider more informative alternatives before choosing to use disabled on
 - Type: `boolean`
 - Default: `false`
 
-#### formatter
+#### formatter (JS only)
 
 Function to format value when the input field.
 
@@ -240,7 +242,7 @@ similar to the accessible input [masking example from Filament Group](https://fi
 - Type: `(value: string) => string`
 - Default: `-`
 
-#### helpText
+#### help-text
 
 Use in combination with `invalid` to show as a validation error message,
 or on its own to show a help text.
@@ -269,7 +271,7 @@ Use with `type="number"` to set the [maximum allowed value](https://developer.mo
 - Type: `number`
 - Default: `-`
 
-#### maxLength
+#### max-length
 
 **Deprecated**: Use the native `maxlength` attribute
 
@@ -292,7 +294,7 @@ Use with `type="number"` to set the [minimum allowed value](https://developer.mo
 - Type: `number`
 - Default: `-`
 
-#### minLength
+#### min-length
 
 **Deprecated**: Use the native `minlength` attribute
 
@@ -331,7 +333,7 @@ Placeholder text should not be used as a substitute for labeling the element wit
 - Type: `string`
 - Default: `-`
 
-#### readOnly
+#### read-only
 
 **Deprecated**: Use the native readonly attribute instead.
 
@@ -385,6 +387,3 @@ Lets you set the current value.
 - Type: `string`
 - Default: `-`
 
-### Types
-
-No types documented.