@warp-ds/elements 2.9.0-next.5 → 2.9.0

package/dist/docs/select/api.md

@@ -4,66 +4,85 @@
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| autoFocus | `boolean` | `false` | - |
-| autofocus | `boolean` | `false` | - |
-| helpText | `string` | `-` | - |
-| invalid | `boolean` | `false` | - |
-| always | `boolean` | `false` | - |
-| hint | `string` | `-` | - |
-| label | `string` | `-` | - |
-| optional | `boolean` | `false` | - |
-| disabled | `boolean` | `false` | - |
-| readOnly | `boolean` | `false` | - |
-| readonly | `boolean` | `false` | - |
+| always | `boolean` | `false` | Whether to always show a hint.. **Deprecated**: Use `help-text` instead and only set it if you want to display the help text. |
+| autoFocus | `boolean` | `false` | Whether the element should receive focus on render.. **Deprecated**: Use the native `autofocus` attribute instead. |
+| autofocus | `boolean` | `false` | Whether the element should receive focus on render |
+| disabled | `boolean` | `false` | Renders the field in a disabled state. |
+| helpText | `string` | `-` | The content displayed as the help text. Paired with `invalid` to show the text as a validation error. |
+| hint | `string` | `-` | The content displayed as the help text.. **Deprecated**: Use `help-text` instead. |
+| invalid | `boolean` | `false` | Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error. |
+| label | `string` | `-` | The content to disply as the label |
 | name | `string` | `-` | - |
+| optional | `boolean` | `false` | Whether to show optional text |
+| readOnly | `boolean` | `false` | Renders the field in a readonly state.. **Deprecated**: Use the native readonly attribute instead. |
+| readonly | `boolean` | `false` | Renders the field in a readonly state. |
 | value | `string` | `-` | - |
-| _options | `unknown` | `-` | - |
 
 ### Property Details
 
+#### always
+
+**Deprecated**: Use `help-text` instead and only set it if you want to display the help text.
+
+Whether to always show a hint.
+
+- Type: `boolean`
+- Default: `false`
+
 #### autoFocus
 
+**Deprecated**: Use the native `autofocus` attribute instead.
 
+Whether the element should receive focus on render.
 
 - Type: `boolean`
 - Default: `false`
 
 #### autofocus
 
+Whether the element should receive focus on render
+
+- Type: `boolean`
+- Default: `false`
+
+#### disabled
 
+Renders the field in a disabled state.
 
 - Type: `boolean`
 - Default: `false`
 
 #### helpText
 
-
+The content displayed as the help text. Paired with `invalid` to show the text as a validation error.
 
 - Type: `string`
 - Default: `-`
 
-#### invalid
-
+#### hint
 
+**Deprecated**: Use `help-text` instead.
 
-- Type: `boolean`
-- Default: `false`
+The content displayed as the help text.
 
-#### always
+- Type: `string`
+- Default: `-`
 
+#### invalid
 
+Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error.
 
 - Type: `boolean`
 - Default: `false`
 
-#### hint
-
+#### label
 
+The content to disply as the label
 
 - Type: `string`
 - Default: `-`
 
-#### label
+#### name
 
 
 
@@ -72,39 +91,27 @@
 
 #### optional
 
-
-
-- Type: `boolean`
-- Default: `false`
-
-#### disabled
-
-
+Whether to show optional text
 
 - Type: `boolean`
 - Default: `false`
 
 #### readOnly
 
+**Deprecated**: Use the native readonly attribute instead.
 
+Renders the field in a readonly state.
 
 - Type: `boolean`
 - Default: `false`
 
 #### readonly
 
-
+Renders the field in a readonly state.
 
 - Type: `boolean`
 - Default: `false`
 
-#### name
-
-
-
-- Type: `string`
-- Default: `-`
-
 #### value
 
 
@@ -112,13 +119,6 @@
 - Type: `string`
 - Default: `-`
 
-#### _options
-
-
-
-- Type: `unknown`
-- Default: `-`
-
 ### Types
 
 No types documented.

package/dist/docs/select/select.md

@@ -18,66 +18,85 @@ A dropdown component for selecting a single value.
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| autoFocus | `boolean` | `false` | - |
-| autofocus | `boolean` | `false` | - |
-| helpText | `string` | `-` | - |
-| invalid | `boolean` | `false` | - |
-| always | `boolean` | `false` | - |
-| hint | `string` | `-` | - |
-| label | `string` | `-` | - |
-| optional | `boolean` | `false` | - |
-| disabled | `boolean` | `false` | - |
-| readOnly | `boolean` | `false` | - |
-| readonly | `boolean` | `false` | - |
+| always | `boolean` | `false` | Whether to always show a hint.. **Deprecated**: Use `help-text` instead and only set it if you want to display the help text. |
+| autoFocus | `boolean` | `false` | Whether the element should receive focus on render.. **Deprecated**: Use the native `autofocus` attribute instead. |
+| autofocus | `boolean` | `false` | Whether the element should receive focus on render |
+| disabled | `boolean` | `false` | Renders the field in a disabled state. |
+| helpText | `string` | `-` | The content displayed as the help text. Paired with `invalid` to show the text as a validation error. |
+| hint | `string` | `-` | The content displayed as the help text.. **Deprecated**: Use `help-text` instead. |
+| invalid | `boolean` | `false` | Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error. |
+| label | `string` | `-` | The content to disply as the label |
 | name | `string` | `-` | - |
+| optional | `boolean` | `false` | Whether to show optional text |
+| readOnly | `boolean` | `false` | Renders the field in a readonly state.. **Deprecated**: Use the native readonly attribute instead. |
+| readonly | `boolean` | `false` | Renders the field in a readonly state. |
 | value | `string` | `-` | - |
-| _options | `unknown` | `-` | - |
 
 ### Property Details
 
+#### always
+
+**Deprecated**: Use `help-text` instead and only set it if you want to display the help text.
+
+Whether to always show a hint.
+
+- Type: `boolean`
+- Default: `false`
+
 #### autoFocus
 
+**Deprecated**: Use the native `autofocus` attribute instead.
 
+Whether the element should receive focus on render.
 
 - Type: `boolean`
 - Default: `false`
 
 #### autofocus
 
+Whether the element should receive focus on render
+
+- Type: `boolean`
+- Default: `false`
+
+#### disabled
 
+Renders the field in a disabled state.
 
 - Type: `boolean`
 - Default: `false`
 
 #### helpText
 
-
+The content displayed as the help text. Paired with `invalid` to show the text as a validation error.
 
 - Type: `string`
 - Default: `-`
 
-#### invalid
-
+#### hint
 
+**Deprecated**: Use `help-text` instead.
 
-- Type: `boolean`
-- Default: `false`
+The content displayed as the help text.
 
-#### always
+- Type: `string`
+- Default: `-`
 
+#### invalid
 
+Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error.
 
 - Type: `boolean`
 - Default: `false`
 
-#### hint
-
+#### label
 
+The content to disply as the label
 
 - Type: `string`
 - Default: `-`
 
-#### label
+#### name
 
 
 
@@ -86,39 +105,27 @@ A dropdown component for selecting a single value.
 
 #### optional
 
-
-
-- Type: `boolean`
-- Default: `false`
-
-#### disabled
-
-
+Whether to show optional text
 
 - Type: `boolean`
 - Default: `false`
 
 #### readOnly
 
+**Deprecated**: Use the native readonly attribute instead.
 
+Renders the field in a readonly state.
 
 - Type: `boolean`
 - Default: `false`
 
 #### readonly
 
-
+Renders the field in a readonly state.
 
 - Type: `boolean`
 - Default: `false`
 
-#### name
-
-
-
-- Type: `string`
-- Default: `-`
-
 #### value
 
 
@@ -126,13 +133,6 @@ A dropdown component for selecting a single value.
 - Type: `string`
 - Default: `-`
 
-#### _options
-
-
-
-- Type: `unknown`
-- Default: `-`
-
 ### Types
 
 No types documented.

package/dist/docs/slider/api.md

@@ -4,120 +4,113 @@
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| shadowRootOptions | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
-| label | `string` | `-` | - |
+| _hasInternalError | `boolean` | `false` | - |
+| _invalidMessage | `string` | `''` | - |
+| _showError | `boolean` | `false` | - |
+| _tabbableElements | `Array<HTMLElement>` | `[]` | - |
+| componentHasError | `boolean` | `-` | - |
 | disabled | `boolean` | `false` | - |
-| openEnded | `boolean` | `false` | - |
+| edgeMax | `unknown` | `-` | - |
+| edgeMin | `unknown` | `-` | - |
 | error | `string` | `-` | - |
+| errorText | `string` | `-` | - |
+| fieldset | `HTMLFieldSetElement` | `-` | - |
 | helpText | `string` | `-` | - |
+| hiddenTextfield | `boolean` | `false` | - |
 | invalid | `boolean` | `false` | - |
-| required | `boolean` | `false` | - |
-| min | `string` | `-` | - |
+| label | `string` | `-` | The slider fieldset label. Required for proper accessibility. |
+| labelFormatter | `(slot: SliderSlot) => string` | `-` | Formatter for the min and max labels below the range. |
+| markers | `number` | `-` | Pass a value similar to step to create visual markers at that interval |
 | max | `string` | `-` | - |
-| markers | `number` | `-` | - |
+| min | `string` | `-` | - |
+| openEnded | `boolean` | `false` | Whether or not to allow values outside the range such as "Before 1950" and "2025+". |
+| required | `boolean` | `false` | Ensures a child slider thumb has a value before allowing the containing form to submit. |
+| shadowRootOptions | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
 | step | `number` | `-` | - |
-| suffix | `string` | `-` | - |
-| hiddenTextfield | `boolean` | `false` | - |
-| valueFormatter | `(value: string, slot: SliderSlot) => string` | `-` | - |
-| tooltipFormatter | `(value: string, slot: SliderSlot) => string` | `-` | - |
-| labelFormatter | `(slot: SliderSlot) => string` | `-` | - |
-| fieldset | `HTMLFieldSetElement` | `-` | - |
-| _invalidMessage | `string` | `''` | - |
-| _hasInternalError | `boolean` | `false` | - |
-| _showError | `boolean` | `false` | - |
-| _tabbableElements | `Array<HTMLElement>` | `[]` | - |
-| edgeMin | `unknown` | `-` | - |
-| edgeMax | `unknown` | `-` | - |
-| componentHasError | `boolean` | `-` | - |
-| errorText | `string` | `-` | - |
+| suffix | `string` | `-` | Suffix used in text input fields and for the min and max values of the slider. |
+| tooltipFormatter | `(value: string, slot: SliderSlot) => string` | `-` | Replaces valueFormatter for the tooltip. Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the tooltip. |
+| valueFormatter | `(value: string, slot: SliderSlot) => string` | `-` | Formatter for the tooltip and input mask values. |
 
 ### Property Details
 
-#### shadowRootOptions
+#### _hasInternalError
 
 
 
-- Type: `object`
-- Default: `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }`
+- Type: `boolean`
+- Default: `false`
 
-#### label
+#### _invalidMessage
 
 
 
 - Type: `string`
-- Default: `-`
-
-#### disabled
-
-
-
-- Type: `boolean`
-- Default: `false`
+- Default: `''`
 
-#### openEnded
+#### _showError
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### error
+#### _tabbableElements
 
 
 
-- Type: `string`
-- Default: `-`
+- Type: `Array<HTMLElement>`
+- Default: `[]`
 
-#### helpText
+#### componentHasError
 
 
 
-- Type: `string`
+- Type: `boolean`
 - Default: `-`
 
-#### invalid
+#### disabled
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### required
+#### edgeMax
 
 
 
-- Type: `boolean`
-- Default: `false`
+- Type: `unknown`
+- Default: `-`
 
-#### min
+#### edgeMin
 
 
 
-- Type: `string`
+- Type: `unknown`
 - Default: `-`
 
-#### max
+#### error
 
 
 
 - Type: `string`
 - Default: `-`
 
-#### markers
+#### errorText
 
 
 
-- Type: `number`
+- Type: `string`
 - Default: `-`
 
-#### step
+#### fieldset
 
 
 
-- Type: `number`
+- Type: `HTMLFieldSetElement`
 - Default: `-`
 
-#### suffix
+#### helpText
 
 
 
@@ -131,88 +124,97 @@
 - Type: `boolean`
 - Default: `false`
 
-#### valueFormatter
+#### invalid
 
 
 
-- Type: `(value: string, slot: SliderSlot) => string`
-- Default: `-`
+- Type: `boolean`
+- Default: `false`
 
-#### tooltipFormatter
+#### label
 
+The slider fieldset label. Required for proper accessibility.
 
+If you need to display HTML, use the `label` slot instead (f. ex. `<legend class="sr-only" slot="label">Production year</legend>`)
 
-- Type: `(value: string, slot: SliderSlot) => string`
+- Type: `string`
 - Default: `-`
 
 #### labelFormatter
 
-
+Formatter for the min and max labels below the range.
 
 - Type: `(slot: SliderSlot) => string`
 - Default: `-`
 
-#### fieldset
-
+#### markers
 
+Pass a value similar to step to create visual markers at that interval
 
-- Type: `HTMLFieldSetElement`
+- Type: `number`
 - Default: `-`
 
-#### _invalidMessage
+#### max
 
 
 
 - Type: `string`
-- Default: `''`
+- Default: `-`
+
+#### min
 
-#### _hasInternalError
 
 
+- Type: `string`
+- Default: `-`
+
+#### openEnded
+
+Whether or not to allow values outside the range such as "Before 1950" and "2025+".
 
 - Type: `boolean`
 - Default: `false`
 
-#### _showError
-
+#### required
 
+Ensures a child slider thumb has a value before allowing the containing form to submit.
 
 - Type: `boolean`
 - Default: `false`
 
-#### _tabbableElements
+#### shadowRootOptions
 
 
 
-- Type: `Array<HTMLElement>`
-- Default: `[]`
+- Type: `object`
+- Default: `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }`
 
-#### edgeMin
+#### step
 
 
 
-- Type: `unknown`
+- Type: `number`
 - Default: `-`
 
-#### edgeMax
-
+#### suffix
 
+Suffix used in text input fields and for the min and max values of the slider.
 
-- Type: `unknown`
+- Type: `string`
 - Default: `-`
 
-#### componentHasError
-
+#### tooltipFormatter
 
+Replaces valueFormatter for the tooltip. Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the tooltip.
 
-- Type: `boolean`
+- Type: `(value: string, slot: SliderSlot) => string`
 - Default: `-`
 
-#### errorText
-
+#### valueFormatter
 
+Formatter for the tooltip and input mask values.
 
-- Type: `string`
+- Type: `(value: string, slot: SliderSlot) => string`
 - Default: `-`
 
 ### Types