@warp-ds/elements 2.10.0-next.8 → 2.10.0

package/dist/docs/slider/api.md

@@ -6,25 +6,34 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
+| _label (JS only) | `unknown` | `-` | - |
 | disabled | `boolean` | `false` | - |
-| error | `string` | `-` | Validation error text, if any |
-| help-text | `string` | `-` | Additional description to show below the fieldset |
+| error | `string \| undefined` | `-` | Validation error text, if any |
+| help-text | `string \| undefined` | `-` | Additional description to show below the fieldset |
 | hidden-textfield | `boolean` | `false` | Should only be used in special cases |
 | invalid | `boolean` | `false` | Sets the form fields and fieldset in an invalid state |
-| label | `string` | `-` | The slider fieldset label. Required for proper accessibility. |
-| labelFormatter (JS only) | `(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` | `100` | The maximum allowed value in the range inputs |
-| min | `string` | `0` | The minimum allowed value in the range inputs |
+| label | `string \| undefined` | `-` | The slider fieldset label. Required for proper accessibility. |
+| labelFormatter (JS only) | `((slot: SliderSlot) => string) \| undefined` | `-` | Formatter for the min and max labels below the range. |
+| markers | `number \| undefined` | `-` | Pass a value similar to step to create visual markers at that interval |
+| max | `string \| undefined` | `100` | The maximum allowed value in the range inputs |
+| min | `string \| undefined` | `0` | The minimum allowed value in the range inputs |
 | open-ended | `boolean` | `false` | Whether or not to allow values outside the range such as "Before 1950" and "2025+". |
+| optional | `boolean` | `false` | Whether to show the optional indicator after the label. |
 | required | `boolean` | `false` | Ensures a child slider thumb has a value before allowing the containing form to submit |
-| step | `number` | `-` | ets step on the range input to jump between values when dragging |
-| suffix | `string` | `-` | Suffix used in text input fields and for the min and max values of the slider |
-| tooltipFormatter (JS only) | `(value: string, slot: SliderSlot) => string` | `-` | Overrides valueFormatter for the tooltip. |
-| valueFormatter (JS only) | `(value: string, slot: SliderSlot) => string` | `-` | Formatter for the tooltip and input mask values |
+| step | `number \| undefined` | `-` | ets step on the range input to jump between values when dragging |
+| suffix | `string \| undefined` | `-` | Suffix used in text input fields and for the min and max values of the slider |
+| tooltipFormatter (JS only) | `((value: string, slot: SliderSlot) => string) \| undefined` | `-` | Overrides valueFormatter for the tooltip. |
+| valueFormatter (JS only) | `((value: string, slot: SliderSlot) => string) \| undefined` | `-` | Formatter for the tooltip and input mask values |
 
 ### Property Details
 
+#### _label (JS only)
+
+
+
+- Type: `unknown`
+- Default: `-`
+
 #### disabled
 
 
@@ -36,14 +45,14 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 Validation error text, if any
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### help-text
 
 Additional description to show below the fieldset
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### hidden-textfield
@@ -66,35 +75,35 @@ 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: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### labelFormatter (JS only)
 
 Formatter for the min and max labels below the range.
 
-- Type: `(slot: SliderSlot) => string`
+- Type: `((slot: SliderSlot) => string) | undefined`
 - Default: `-`
 
 #### markers
 
 Pass a value similar to step to create visual markers at that interval
 
-- Type: `number`
+- Type: `number | undefined`
 - Default: `-`
 
 #### max
 
 The maximum allowed value in the range inputs
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `100`
 
 #### min
 
 The minimum allowed value in the range inputs
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `0`
 
 #### open-ended
@@ -104,6 +113,13 @@ Whether or not to allow values outside the range such as "Before 1950" and "2025
 - Type: `boolean`
 - Default: `false`
 
+#### optional
+
+Whether to show the optional indicator after the label.
+
+- Type: `boolean`
+- Default: `false`
+
 #### required
 
 Ensures a child slider thumb has a value before allowing the containing form to submit
@@ -115,14 +131,14 @@ Ensures a child slider thumb has a value before allowing the containing form to
 
 ets step on the range input to jump between values when dragging
 
-- Type: `number`
+- Type: `number | undefined`
 - Default: `-`
 
 #### suffix
 
 Suffix used in text input fields and for the min and max values of the slider
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### tooltipFormatter (JS only)
@@ -131,13 +147,13 @@ Overrides valueFormatter for the tooltip.
 
 Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the tooltip.
 
-- Type: `(value: string, slot: SliderSlot) => string`
+- Type: `((value: string, slot: SliderSlot) => string) | undefined`
 - Default: `-`
 
 #### valueFormatter (JS only)
 
 Formatter for the tooltip and input mask values
 
-- Type: `(value: string, slot: SliderSlot) => string`
+- Type: `((value: string, slot: SliderSlot) => string) | undefined`
 - Default: `-`
 

package/dist/docs/slider/slider.md

@@ -316,25 +316,34 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
+| _label (JS only) | `unknown` | `-` | - |
 | disabled | `boolean` | `false` | - |
-| error | `string` | `-` | Validation error text, if any |
-| help-text | `string` | `-` | Additional description to show below the fieldset |
+| error | `string \| undefined` | `-` | Validation error text, if any |
+| help-text | `string \| undefined` | `-` | Additional description to show below the fieldset |
 | hidden-textfield | `boolean` | `false` | Should only be used in special cases |
 | invalid | `boolean` | `false` | Sets the form fields and fieldset in an invalid state |
-| label | `string` | `-` | The slider fieldset label. Required for proper accessibility. |
-| labelFormatter (JS only) | `(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` | `100` | The maximum allowed value in the range inputs |
-| min | `string` | `0` | The minimum allowed value in the range inputs |
+| label | `string \| undefined` | `-` | The slider fieldset label. Required for proper accessibility. |
+| labelFormatter (JS only) | `((slot: SliderSlot) => string) \| undefined` | `-` | Formatter for the min and max labels below the range. |
+| markers | `number \| undefined` | `-` | Pass a value similar to step to create visual markers at that interval |
+| max | `string \| undefined` | `100` | The maximum allowed value in the range inputs |
+| min | `string \| undefined` | `0` | The minimum allowed value in the range inputs |
 | open-ended | `boolean` | `false` | Whether or not to allow values outside the range such as "Before 1950" and "2025+". |
+| optional | `boolean` | `false` | Whether to show the optional indicator after the label. |
 | required | `boolean` | `false` | Ensures a child slider thumb has a value before allowing the containing form to submit |
-| step | `number` | `-` | ets step on the range input to jump between values when dragging |
-| suffix | `string` | `-` | Suffix used in text input fields and for the min and max values of the slider |
-| tooltipFormatter (JS only) | `(value: string, slot: SliderSlot) => string` | `-` | Overrides valueFormatter for the tooltip. |
-| valueFormatter (JS only) | `(value: string, slot: SliderSlot) => string` | `-` | Formatter for the tooltip and input mask values |
+| step | `number \| undefined` | `-` | ets step on the range input to jump between values when dragging |
+| suffix | `string \| undefined` | `-` | Suffix used in text input fields and for the min and max values of the slider |
+| tooltipFormatter (JS only) | `((value: string, slot: SliderSlot) => string) \| undefined` | `-` | Overrides valueFormatter for the tooltip. |
+| valueFormatter (JS only) | `((value: string, slot: SliderSlot) => string) \| undefined` | `-` | Formatter for the tooltip and input mask values |
 
 ### Property Details
 
+#### _label (JS only)
+
+
+
+- Type: `unknown`
+- Default: `-`
+
 #### disabled
 
 
@@ -346,14 +355,14 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 Validation error text, if any
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### help-text
 
 Additional description to show below the fieldset
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### hidden-textfield
@@ -376,35 +385,35 @@ 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: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### labelFormatter (JS only)
 
 Formatter for the min and max labels below the range.
 
-- Type: `(slot: SliderSlot) => string`
+- Type: `((slot: SliderSlot) => string) | undefined`
 - Default: `-`
 
 #### markers
 
 Pass a value similar to step to create visual markers at that interval
 
-- Type: `number`
+- Type: `number | undefined`
 - Default: `-`
 
 #### max
 
 The maximum allowed value in the range inputs
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `100`
 
 #### min
 
 The minimum allowed value in the range inputs
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `0`
 
 #### open-ended
@@ -414,6 +423,13 @@ Whether or not to allow values outside the range such as "Before 1950" and "2025
 - Type: `boolean`
 - Default: `false`
 
+#### optional
+
+Whether to show the optional indicator after the label.
+
+- Type: `boolean`
+- Default: `false`
+
 #### required
 
 Ensures a child slider thumb has a value before allowing the containing form to submit
@@ -425,14 +441,14 @@ Ensures a child slider thumb has a value before allowing the containing form to
 
 ets step on the range input to jump between values when dragging
 
-- Type: `number`
+- Type: `number | undefined`
 - Default: `-`
 
 #### suffix
 
 Suffix used in text input fields and for the min and max values of the slider
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### tooltipFormatter (JS only)
@@ -441,13 +457,13 @@ Overrides valueFormatter for the tooltip.
 
 Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the tooltip.
 
-- Type: `(value: string, slot: SliderSlot) => string`
+- Type: `((value: string, slot: SliderSlot) => string) | undefined`
 - Default: `-`
 
 #### valueFormatter (JS only)
 
 Formatter for the tooltip and input mask values
 
-- Type: `(value: string, slot: SliderSlot) => string`
+- Type: `((value: string, slot: SliderSlot) => string) | undefined`
 - Default: `-`
 

package/dist/docs/slider-thumb/api.md

@@ -4,11 +4,13 @@
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| aria-description | `string` | `-` | Contextual information for assistive technology, should it be needed |
-| aria-label | `string` | ``label` from `w-slider`` | Label for the range input. |
-| name | `string` | `-` | The name of this input field in the form. The canonical source of the value is the text field. |
-| placeholder | `string` | `-` | Placeholder in empty text fields |
-| value | `string` | `-` | The initial value, if any |
+| aria-description | `string \| null` | `null` | Contextual information for assistive technology, should it be needed |
+| aria-label | `string \| null` | `null` | Label for the range input. |
+| name | `string \| undefined` | `-` | The name of this input field in the form. The canonical source of the value is the text field. |
+| placeholder | `string \| undefined` | `-` | Placeholder in empty text fields |
+| resetFormControl (JS only) | `resetFormControl() => void` | `-` | - |
+| updateFieldAfterValidation (JS only) | `updateFieldAfterValidation() => void` | `-` | - |
+| value | `string \| undefined` | `-` | The initial value, if any |
 
 #### Property Details
 
@@ -16,35 +18,49 @@
 
 Contextual information for assistive technology, should it be needed
 
-- Type: `string`
-- Default: `-`
+- Type: `string | null`
+- Default: `null`
 
 ##### aria-label
 
 Label for the range input.
 
-- Type: `string`
-- Default: ``label` from `w-slider``
+- Type: `string | null`
+- Default: `null`
 
 ##### name
 
 The name of this input field in the form. The canonical source of the value is the text field.
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 ##### placeholder
 
 Placeholder in empty text fields
 
-- Type: `string`
+- Type: `string | undefined`
+- Default: `-`
+
+##### resetFormControl (JS only)
+
+
+
+- Type: `resetFormControl() => void`
+- Default: `-`
+
+##### updateFieldAfterValidation (JS only)
+
+
+
+- Type: `updateFieldAfterValidation() => void`
 - Default: `-`
 
 ##### value
 
 The initial value, if any
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### Events

package/dist/docs/slider-thumb/slider-thumb.md

@@ -18,11 +18,13 @@ Component to place inside a `<w-slider>`.
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| aria-description | `string` | `-` | Contextual information for assistive technology, should it be needed |
-| aria-label | `string` | ``label` from `w-slider`` | Label for the range input. |
-| name | `string` | `-` | The name of this input field in the form. The canonical source of the value is the text field. |
-| placeholder | `string` | `-` | Placeholder in empty text fields |
-| value | `string` | `-` | The initial value, if any |
+| aria-description | `string \| null` | `null` | Contextual information for assistive technology, should it be needed |
+| aria-label | `string \| null` | `null` | Label for the range input. |
+| name | `string \| undefined` | `-` | The name of this input field in the form. The canonical source of the value is the text field. |
+| placeholder | `string \| undefined` | `-` | Placeholder in empty text fields |
+| resetFormControl (JS only) | `resetFormControl() => void` | `-` | - |
+| updateFieldAfterValidation (JS only) | `updateFieldAfterValidation() => void` | `-` | - |
+| value | `string \| undefined` | `-` | The initial value, if any |
 
 #### Property Details
 
@@ -30,35 +32,49 @@ Component to place inside a `<w-slider>`.
 
 Contextual information for assistive technology, should it be needed
 
-- Type: `string`
-- Default: `-`
+- Type: `string | null`
+- Default: `null`
 
 ##### aria-label
 
 Label for the range input.
 
-- Type: `string`
-- Default: ``label` from `w-slider``
+- Type: `string | null`
+- Default: `null`
 
 ##### name
 
 The name of this input field in the form. The canonical source of the value is the text field.
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 ##### placeholder
 
 Placeholder in empty text fields
 
-- Type: `string`
+- Type: `string | undefined`
+- Default: `-`
+
+##### resetFormControl (JS only)
+
+
+
+- Type: `resetFormControl() => void`
+- Default: `-`
+
+##### updateFieldAfterValidation (JS only)
+
+
+
+- Type: `updateFieldAfterValidation() => void`
 - Default: `-`
 
 ##### value
 
 The initial value, if any
 
-- Type: `string`
+- Type: `string | undefined`
 - Default: `-`
 
 #### Events

package/dist/docs/snackbar/accessibility.md

@@ -0,0 +1,20 @@
+## Accessibility
+
+From an accessibility perspective the snackbar component is problematic.
+
+- Since the snackbar items disappear on their own users might not even see them, especially when zoomed in.
+- The snackbar items are in practice impossible to reach with keyboard since they appear in the DOM away from the element that triggered them.
+- Important elements on the page might get hidden behind the snackbar item.
+
+A snackbar must never be the backbone of your user experience, it should only ever include information and actions that are available elsewhere.
+
+- Keep messages and actions short since the snackbar item is available only for a short time.
+- Ensure any information and action in the snackbar, such as Undo, is possible to do elsewhere.
+
+`<w-snackbar>` creates an ARIA live region so messages you add to the snackbar get announced to assistive technologies.
+
+### Keyboard behavior
+
+`<w-snackbar>` is problematic from a keyboard user perspective. We do not override the default <kbd>Tab</kbd> behavior, with the result that the focusable buttons in a snackbar item probably come first or last in the focus order, depending on what end of `<body>` you put `<w-snackbar>`. We're investigating ways to provide keyboard shortcuts for moving focus to the snackbar item, but have yet to conclude on a design.
+
+`<w-snackbar>` sets up a keyboard event listener on `document`. Pressing <kbd>Escape</kbd> while a snackbar item is open will close it. If more than one item is open the oldest one will close.

package/dist/docs/snackbar/api.md

@@ -0,0 +1,30 @@
+## `<w-snackbar>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
+
+### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+| create (JS only) | `create(message: string, options: CreateSnackbarOptions = {}) => void` | `-` | Creates a snackbar item and immediately adds it to the snackbar. |
+
+### Property Details
+
+#### create (JS only)
+
+Creates a snackbar item and immediately adds it to the snackbar.
+
+By default the snackbar item automatically closes after 4 seconds (`SnackbarDuration.Short`).
+
+If you include an `action` in the options the default `duration` is
+set to 10 seconds (`SnackbarDuration.Long`) and can not be made shorter.
+
+A `duration` of 10 seconds or longer forces the close button to be visible.
+
+The default `variant` is `neutral` which does not have an icon.
+
+Set `duration` to `SnackbarDuration.Infinite` if you want a persistent message.
+
+- Type: `create(message: string, options: CreateSnackbarOptions = {}) => void`
+- Default: `-`
+