@warp-ds/elements 2.10.0-next.13 → 2.10.0-next.15

package/dist/docs/checkbox/api.md

@@ -5,13 +5,19 @@
 | Name | Type | Default | Summary |
 |-|-|-|-|
 | _computedInvalid (JS only) | `boolean` | `-` | Computed invalid state: combines own invalid with group invalid |
+| blur (JS only) | `blur() => void` | `-` | - |
+| checkValidity (JS only) | `checkValidity() => boolean` | `-` | Checks whether the checkbox passes constraint validation |
 | checked | `boolean` | `false` | Whether the checkbox is checked. |
+| click (JS only) | `click() => void` | `-` | - |
 | disabled | `boolean` | `false` | Whether the checkbox is disabled. |
+| focus (JS only) | `focus(options?: FocusOptions) => void` | `-` | - |
 | indeterminate | `boolean` | `false` | Whether the checkbox is visually indeterminate. |
 | input (JS only) | `HTMLInputElement` | `-` | - |
 | invalid | `boolean` | `false` | Whether the checkbox is visually invalid. |
 | name | `string \| undefined` | `-` | The name of the checkbox. |
+| reportValidity (JS only) | `reportValidity() => boolean` | `-` | Checks validity and shows the browser's validation message if invalid |
 | required | `boolean` | `false` | Whether the checkbox must be checked before form submission. |
+| resetFormControl (JS only) | `resetFormControl() => void` | `-` | - |
 | shadowRootOptions (JS only) | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true }` | - |
 | validationMessage (JS only) | `string` | `-` | Returns the validation message if the checkbox is invalid, otherwise an empty string |
 | validity (JS only) | `ValidityState` | `-` | Returns the validity state of the checkbox |
@@ -26,6 +32,20 @@ Computed invalid state: combines own invalid with group invalid
 - Type: `boolean`
 - Default: `-`
 
+##### blur (JS only)
+
+
+
+- Type: `blur() => void`
+- Default: `-`
+
+##### checkValidity (JS only)
+
+Checks whether the checkbox passes constraint validation
+
+- Type: `checkValidity() => boolean`
+- Default: `-`
+
 ##### checked
 
 Whether the checkbox is checked.
@@ -35,6 +55,13 @@ Checked checkboxes submit their value with form data. The property is reflected
 - Type: `boolean`
 - Default: `false`
 
+##### click (JS only)
+
+
+
+- Type: `click() => void`
+- Default: `-`
+
 ##### disabled
 
 Whether the checkbox is disabled.
@@ -44,6 +71,13 @@ Disabled checkboxes cannot be focused, changed, or submitted with form data.
 - Type: `boolean`
 - Default: `false`
 
+##### focus (JS only)
+
+
+
+- Type: `focus(options?: FocusOptions) => void`
+- Default: `-`
+
 ##### indeterminate
 
 Whether the checkbox is visually indeterminate.
@@ -78,6 +112,13 @@ When the checkbox is checked and belongs to a form, this name is submitted with
 - Type: `string | undefined`
 - Default: `-`
 
+##### reportValidity (JS only)
+
+Checks validity and shows the browser's validation message if invalid
+
+- Type: `reportValidity() => boolean`
+- Default: `-`
+
 ##### required
 
 Whether the checkbox must be checked before form submission.
@@ -87,6 +128,13 @@ A required checkbox is invalid until it is checked. For requiring at least one o
 - Type: `boolean`
 - Default: `false`
 
+##### resetFormControl (JS only)
+
+
+
+- Type: `resetFormControl() => void`
+- Default: `-`
+
 ##### shadowRootOptions (JS only)
 
 

package/dist/docs/checkbox/checkbox.md

@@ -11,13 +11,19 @@ Checkbox lets users select one or more options. Use it for independent yes/no ch
 | Name | Type | Default | Summary |
 |-|-|-|-|
 | _computedInvalid (JS only) | `boolean` | `-` | Computed invalid state: combines own invalid with group invalid |
+| blur (JS only) | `blur() => void` | `-` | - |
+| checkValidity (JS only) | `checkValidity() => boolean` | `-` | Checks whether the checkbox passes constraint validation |
 | checked | `boolean` | `false` | Whether the checkbox is checked. |
+| click (JS only) | `click() => void` | `-` | - |
 | disabled | `boolean` | `false` | Whether the checkbox is disabled. |
+| focus (JS only) | `focus(options?: FocusOptions) => void` | `-` | - |
 | indeterminate | `boolean` | `false` | Whether the checkbox is visually indeterminate. |
 | input (JS only) | `HTMLInputElement` | `-` | - |
 | invalid | `boolean` | `false` | Whether the checkbox is visually invalid. |
 | name | `string \| undefined` | `-` | The name of the checkbox. |
+| reportValidity (JS only) | `reportValidity() => boolean` | `-` | Checks validity and shows the browser's validation message if invalid |
 | required | `boolean` | `false` | Whether the checkbox must be checked before form submission. |
+| resetFormControl (JS only) | `resetFormControl() => void` | `-` | - |
 | shadowRootOptions (JS only) | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true }` | - |
 | validationMessage (JS only) | `string` | `-` | Returns the validation message if the checkbox is invalid, otherwise an empty string |
 | validity (JS only) | `ValidityState` | `-` | Returns the validity state of the checkbox |
@@ -32,6 +38,20 @@ Computed invalid state: combines own invalid with group invalid
 - Type: `boolean`
 - Default: `-`
 
+##### blur (JS only)
+
+
+
+- Type: `blur() => void`
+- Default: `-`
+
+##### checkValidity (JS only)
+
+Checks whether the checkbox passes constraint validation
+
+- Type: `checkValidity() => boolean`
+- Default: `-`
+
 ##### checked
 
 Whether the checkbox is checked.
@@ -41,6 +61,13 @@ Checked checkboxes submit their value with form data. The property is reflected
 - Type: `boolean`
 - Default: `false`
 
+##### click (JS only)
+
+
+
+- Type: `click() => void`
+- Default: `-`
+
 ##### disabled
 
 Whether the checkbox is disabled.
@@ -50,6 +77,13 @@ Disabled checkboxes cannot be focused, changed, or submitted with form data.
 - Type: `boolean`
 - Default: `false`
 
+##### focus (JS only)
+
+
+
+- Type: `focus(options?: FocusOptions) => void`
+- Default: `-`
+
 ##### indeterminate
 
 Whether the checkbox is visually indeterminate.
@@ -84,6 +118,13 @@ When the checkbox is checked and belongs to a form, this name is submitted with
 - Type: `string | undefined`
 - Default: `-`
 
+##### reportValidity (JS only)
+
+Checks validity and shows the browser's validation message if invalid
+
+- Type: `reportValidity() => boolean`
+- Default: `-`
+
 ##### required
 
 Whether the checkbox must be checked before form submission.
@@ -93,6 +134,13 @@ A required checkbox is invalid until it is checked. For requiring at least one o
 - Type: `boolean`
 - Default: `false`
 
+##### resetFormControl (JS only)
+
+
+
+- Type: `resetFormControl() => void`
+- Default: `-`
+
 ##### shadowRootOptions (JS only)
 
 

package/dist/docs/checkbox-group/api.md

@@ -6,16 +6,33 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
+| checkValidity (JS only) | `checkValidity() => boolean` | `-` | Checks whether the group passes constraint validation |
+| focus (JS only) | `focus(options?: FocusOptions) => void` | `-` | Sets focus on the checkbox group. |
 | help-text | `string \| undefined` | `-` | Help text displayed below the checkbox group. |
 | invalid | `boolean` | `false` | Whether the checkbox group is visually invalid. |
 | label | `string \| undefined` | `-` | The group label displayed above the checkboxes. |
 | name | `string \| undefined` | `-` | The name applied to child checkboxes when they do not provide one. |
 | optional | `boolean` | `false` | Whether to show optional text next to the label. |
+| reportValidity (JS only) | `reportValidity() => boolean` | `-` | Checks validity and shows the validation message if invalid |
 | required | `boolean` | `false` | Whether at least one checkbox in the group must be selected. |
 | shadowRootOptions (JS only) | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
 
 ### Property Details
 
+#### checkValidity (JS only)
+
+Checks whether the group passes constraint validation
+
+- Type: `checkValidity() => boolean`
+- Default: `-`
+
+#### focus (JS only)
+
+Sets focus on the checkbox group.
+
+- Type: `focus(options?: FocusOptions) => void`
+- Default: `-`
+
 #### help-text
 
 Help text displayed below the checkbox group.
@@ -61,6 +78,13 @@ Use this to indicate that selecting an option from the group is not required.
 - Type: `boolean`
 - Default: `false`
 
+#### reportValidity (JS only)
+
+Checks validity and shows the validation message if invalid
+
+- Type: `reportValidity() => boolean`
+- Default: `-`
+
 #### required
 
 Whether at least one checkbox in the group must be selected.

package/dist/docs/checkbox-group/checkbox-group.md

@@ -419,16 +419,33 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
+| checkValidity (JS only) | `checkValidity() => boolean` | `-` | Checks whether the group passes constraint validation |
+| focus (JS only) | `focus(options?: FocusOptions) => void` | `-` | Sets focus on the checkbox group. |
 | help-text | `string \| undefined` | `-` | Help text displayed below the checkbox group. |
 | invalid | `boolean` | `false` | Whether the checkbox group is visually invalid. |
 | label | `string \| undefined` | `-` | The group label displayed above the checkboxes. |
 | name | `string \| undefined` | `-` | The name applied to child checkboxes when they do not provide one. |
 | optional | `boolean` | `false` | Whether to show optional text next to the label. |
+| reportValidity (JS only) | `reportValidity() => boolean` | `-` | Checks validity and shows the validation message if invalid |
 | required | `boolean` | `false` | Whether at least one checkbox in the group must be selected. |
 | shadowRootOptions (JS only) | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
 
 ### Property Details
 
+#### checkValidity (JS only)
+
+Checks whether the group passes constraint validation
+
+- Type: `checkValidity() => boolean`
+- Default: `-`
+
+#### focus (JS only)
+
+Sets focus on the checkbox group.
+
+- Type: `focus(options?: FocusOptions) => void`
+- Default: `-`
+
 #### help-text
 
 Help text displayed below the checkbox group.
@@ -474,6 +491,13 @@ Use this to indicate that selecting an option from the group is not required.
 - Type: `boolean`
 - Default: `false`
 
+#### reportValidity (JS only)
+
+Checks validity and shows the validation message if invalid
+
+- Type: `reportValidity() => boolean`
+- Default: `-`
+
 #### required
 
 Whether at least one checkbox in the group must be selected.

package/dist/docs/combobox/api.md

@@ -19,6 +19,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | options | `ComboboxOption[]` | `[]` | The available options to select from. |
 | placeholder | `string \| undefined` | `''` | Placeholder text displayed when the input is empty. |
 | required | `boolean` | `false` | Whether the combobox is required before form submission. |
+| resetFormControl (JS only) | `resetFormControl() => void` | `-` | - |
 | select-on-blur | `boolean` | `true` | Whether the active option is selected when the input loses focus. |
 | value | `string` | `''` | The selected or typed value. |
 
@@ -141,6 +142,13 @@ Use this when the user must provide a value before submitting the form.
 - Type: `boolean`
 - Default: `false`
 
+#### resetFormControl (JS only)
+
+
+
+- Type: `resetFormControl() => void`
+- Default: `-`
+
 #### select-on-blur
 
 Whether the active option is selected when the input loses focus.

package/dist/docs/combobox/combobox.md

@@ -176,6 +176,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | options | `ComboboxOption[]` | `[]` | The available options to select from. |
 | placeholder | `string \| undefined` | `''` | Placeholder text displayed when the input is empty. |
 | required | `boolean` | `false` | Whether the combobox is required before form submission. |
+| resetFormControl (JS only) | `resetFormControl() => void` | `-` | - |
 | select-on-blur | `boolean` | `true` | Whether the active option is selected when the input loses focus. |
 | value | `string` | `''` | The selected or typed value. |
 
@@ -298,6 +299,13 @@ Use this when the user must provide a value before submitting the form.
 - Type: `boolean`
 - Default: `false`
 
+#### resetFormControl (JS only)
+
+
+
+- Type: `resetFormControl() => void`
+- Default: `-`
+
 #### select-on-blur
 
 Whether the active option is selected when the input loses focus.

package/dist/docs/datepicker/api.md

@@ -18,6 +18,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | name | `string \| undefined` | `-` | The name submitted with the date value. |
 | navigationDate (JS only) | `Date` | `-` | - |
 | previousMonthButton (JS only) | `HTMLButtonElement` | `-` | This is the first focusable element, needed for the modal focus trap. |
+| resetFormControl (JS only) | `resetFormControl() => void` | `-` | - |
 | selectedCell (JS only) | `HTMLTableCellElement` | `-` | - |
 | selectedDate (JS only) | `Date \| null` | `-` | - |
 | shadowRootOptions (JS only) | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
@@ -130,6 +131,13 @@ the query will point to an element that doesn't exist anymore.
 - Type: `HTMLButtonElement`
 - Default: `-`
 
+#### resetFormControl (JS only)
+
+
+
+- Type: `resetFormControl() => void`
+- Default: `-`
+
 #### selectedCell (JS only)
 
 

package/dist/docs/datepicker/datepicker.md

@@ -218,6 +218,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 | name | `string \| undefined` | `-` | The name submitted with the date value. |
 | navigationDate (JS only) | `Date` | `-` | - |
 | previousMonthButton (JS only) | `HTMLButtonElement` | `-` | This is the first focusable element, needed for the modal focus trap. |
+| resetFormControl (JS only) | `resetFormControl() => void` | `-` | - |
 | selectedCell (JS only) | `HTMLTableCellElement` | `-` | - |
 | selectedDate (JS only) | `Date \| null` | `-` | - |
 | shadowRootOptions (JS only) | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
@@ -330,6 +331,13 @@ the query will point to an element that doesn't exist anymore.
 - Type: `HTMLButtonElement`
 - Default: `-`
 
+#### resetFormControl (JS only)
+
+
+
+- Type: `resetFormControl() => void`
+- Default: `-`
+
 #### selectedCell (JS only)
 
 

package/dist/docs/index.md

@@ -35,6 +35,8 @@ Generated by `pnpm build:docs`. This file indexes the Markdown documentation shi
 | Select | `<w-select>` | `select` | A dropdown component for selecting a single value. | [select.md](./select/select.md) |
 | Slider | `<w-slider>` | `slider` | Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`. | [slider.md](./slider/slider.md) |
 | Slider Thumb | `<w-slider-thumb>` | `slider-thumb` | Component to place inside a `<w-slider>`. | [slider-thumb.md](./slider-thumb/slider-thumb.md) |
+| Snackbar | `<w-snackbar>` | `snackbar` | A Snackbar shows brief user feedback messages that overlay content, with an optional action such as Undo. Include one `<w-snackbar></w-snackbar>` in the document `<body>`. Use the `create` function to create messages. | [snackbar.md](./snackbar/snackbar.md) |
+| Snackbar Item | `<w-snackbar-item>` | `snackbar-item` | An item to show in a `w-snackbar`. See the `create` function on `w-snackbar` for a convenience API which helps you make snackbar items. | [snackbar-item.md](./snackbar-item/snackbar-item.md) |
 | Step | `<w-step>` | `step` | Individual step component that shows a single step in a process | [step.md](./step/step.md) |
 | Step Indicator | `<w-step-indicator>` | `step-indicator` | Steps are used to show progress through a process or to guide users through a multi-step task. | [step-indicator.md](./step-indicator/step-indicator.md) |
 | Switch | `<w-switch>` | `switch` | The Switch component allows users to toggle between two states. | [switch.md](./switch/switch.md) |

package/dist/docs/modal/api.md

@@ -6,12 +6,21 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
+| close (JS only) | `close() => void` | `-` | - |
 | content-id | `string \| undefined` | `-` | - |
 | ignore-backdrop-clicks | `boolean` | `false` | Ignores clicks to the backdrop when set |
+| open (JS only) | `open() => void` | `-` | - |
 | show | `boolean` | `false` | Controls if the modal should show or hide. |
 
 ### Property Details
 
+#### close (JS only)
+
+
+
+- Type: `close() => void`
+- Default: `-`
+
 #### content-id
 
 
@@ -26,6 +35,13 @@ Ignores clicks to the backdrop when set
 - Type: `boolean`
 - Default: `false`
 
+#### open (JS only)
+
+
+
+- Type: `open() => void`
+- Default: `-`
+
 #### show
 
 Controls if the modal should show or hide.

package/dist/docs/modal/modal.md

@@ -195,12 +195,21 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
+| close (JS only) | `close() => void` | `-` | - |
 | content-id | `string \| undefined` | `-` | - |
 | ignore-backdrop-clicks | `boolean` | `false` | Ignores clicks to the backdrop when set |
+| open (JS only) | `open() => void` | `-` | - |
 | show | `boolean` | `false` | Controls if the modal should show or hide. |
 
 ### Property Details
 
+#### close (JS only)
+
+
+
+- Type: `close() => void`
+- Default: `-`
+
 #### content-id
 
 
@@ -215,6 +224,13 @@ Ignores clicks to the backdrop when set
 - Type: `boolean`
 - Default: `false`
 
+#### open (JS only)
+
+
+
+- Type: `open() => void`
+- Default: `-`
+
 #### show
 
 Controls if the modal should show or hide.

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

@@ -8,6 +8,8 @@
 | 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
@@ -40,6 +42,20 @@ Placeholder in empty text fields
 - Type: `string | undefined`
 - Default: `-`
 
+##### resetFormControl (JS only)
+
+
+
+- Type: `resetFormControl() => void`
+- Default: `-`
+
+##### updateFieldAfterValidation (JS only)
+
+
+
+- Type: `updateFieldAfterValidation() => void`
+- Default: `-`
+
 ##### value
 
 The initial value, if any

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

@@ -22,6 +22,8 @@ Component to place inside a `<w-slider>`.
 | 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
@@ -54,6 +56,20 @@ Placeholder in empty text fields
 - Type: `string | undefined`
 - Default: `-`
 
+##### resetFormControl (JS only)
+
+
+
+- Type: `resetFormControl() => void`
+- Default: `-`
+
+##### updateFieldAfterValidation (JS only)
+
+
+
+- Type: `updateFieldAfterValidation() => void`
+- Default: `-`
+
 ##### value
 
 The initial value, if any

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: `-`
+