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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (125) hide show
  1. package/dist/custom-elements.json +384 -0
  2. package/dist/docs/attention/api.md +48 -0
  3. package/dist/docs/attention/attention.md +48 -0
  4. package/dist/docs/button/api.md +8 -0
  5. package/dist/docs/button/button.md +8 -0
  6. package/dist/docs/card/api.md +8 -0
  7. package/dist/docs/card/card.md +8 -0
  8. package/dist/docs/checkbox/api.md +48 -0
  9. package/dist/docs/checkbox/checkbox.md +48 -0
  10. package/dist/docs/checkbox-group/api.md +24 -0
  11. package/dist/docs/checkbox-group/checkbox-group.md +24 -0
  12. package/dist/docs/combobox/api.md +8 -0
  13. package/dist/docs/combobox/combobox.md +8 -0
  14. package/dist/docs/datepicker/api.md +8 -0
  15. package/dist/docs/datepicker/datepicker.md +8 -0
  16. package/dist/docs/index.md +2 -0
  17. package/dist/docs/modal/api.md +16 -0
  18. package/dist/docs/modal/modal.md +16 -0
  19. package/dist/docs/slider-thumb/api.md +16 -0
  20. package/dist/docs/slider-thumb/slider-thumb.md +16 -0
  21. package/dist/docs/snackbar/accessibility.md +20 -0
  22. package/dist/docs/snackbar/api.md +30 -0
  23. package/dist/docs/snackbar/examples.md +191 -0
  24. package/dist/docs/snackbar/snackbar.md +385 -0
  25. package/dist/docs/snackbar/styling.md +72 -0
  26. package/dist/docs/snackbar/usage.md +60 -0
  27. package/dist/docs/snackbar-item/api.md +41 -0
  28. package/dist/docs/snackbar-item/snackbar-item.md +49 -0
  29. package/dist/docs/step/api.md +16 -0
  30. package/dist/docs/step/step.md +16 -0
  31. package/dist/docs/switch/api.md +8 -0
  32. package/dist/docs/switch/switch.md +8 -0
  33. package/dist/docs/textarea/api.md +40 -0
  34. package/dist/docs/textarea/textarea.md +40 -0
  35. package/dist/docs/textfield/api.md +32 -0
  36. package/dist/docs/textfield/textfield.md +32 -0
  37. package/dist/index.d.ts +292 -1
  38. package/dist/packages/affix/affix.js +4 -4
  39. package/dist/packages/affix/affix.js.map +2 -2
  40. package/dist/packages/alert/alert.js +2 -2
  41. package/dist/packages/alert/alert.js.map +2 -2
  42. package/dist/packages/attention/attention.d.ts +5 -0
  43. package/dist/packages/attention/attention.js +14 -14
  44. package/dist/packages/attention/attention.js.map +2 -2
  45. package/dist/packages/button/button.d.ts +5 -0
  46. package/dist/packages/button/button.js +3 -3
  47. package/dist/packages/button/button.js.map +2 -2
  48. package/dist/packages/button/button.react.stories.d.ts +2 -2
  49. package/dist/packages/button/button.test.js +0 -1
  50. package/dist/packages/button/react.d.ts +1 -1
  51. package/dist/packages/datepicker/DatePicker.test.js +5 -3
  52. package/dist/packages/datepicker/datepicker.js +49 -48
  53. package/dist/packages/datepicker/datepicker.js.map +3 -3
  54. package/dist/packages/datepicker/datepicker.test.js +1 -1
  55. package/dist/packages/datepicker/utils.d.ts +3 -0
  56. package/dist/packages/datepicker/utils.js +33 -0
  57. package/dist/packages/datepicker/utils.test.d.ts +1 -0
  58. package/dist/packages/datepicker/utils.test.js +29 -0
  59. package/dist/packages/expandable/expandable.js +9 -9
  60. package/dist/packages/expandable/expandable.js.map +4 -4
  61. package/dist/packages/global.d.ts +1 -0
  62. package/dist/packages/global.js +5 -0
  63. package/dist/packages/icon/icon.d.ts +5 -0
  64. package/dist/packages/icon/icon.js +2 -2
  65. package/dist/packages/icon/icon.js.map +2 -2
  66. package/dist/packages/interaction-type-detection.d.ts +22 -0
  67. package/dist/packages/interaction-type-detection.js +38 -0
  68. package/dist/packages/modal/modal.js +1 -1
  69. package/dist/packages/modal/modal.js.map +2 -2
  70. package/dist/packages/modal-header/modal-header.js +3 -3
  71. package/dist/packages/modal-header/modal-header.js.map +2 -2
  72. package/dist/packages/pagination/pagination.js +1 -1
  73. package/dist/packages/pagination/pagination.js.map +2 -2
  74. package/dist/packages/pill/pill.js +4 -4
  75. package/dist/packages/pill/pill.js.map +2 -2
  76. package/dist/packages/select/select.js +3 -3
  77. package/dist/packages/select/select.js.map +2 -2
  78. package/dist/packages/snackbar/locales/da/messages.d.mts +1 -0
  79. package/dist/packages/snackbar/locales/da/messages.mjs +1 -0
  80. package/dist/packages/snackbar/locales/en/messages.d.mts +1 -0
  81. package/dist/packages/snackbar/locales/en/messages.mjs +1 -0
  82. package/dist/packages/snackbar/locales/fi/messages.d.mts +1 -0
  83. package/dist/packages/snackbar/locales/fi/messages.mjs +1 -0
  84. package/dist/packages/snackbar/locales/nb/messages.d.mts +1 -0
  85. package/dist/packages/snackbar/locales/nb/messages.mjs +1 -0
  86. package/dist/packages/snackbar/locales/sv/messages.d.mts +1 -0
  87. package/dist/packages/snackbar/locales/sv/messages.mjs +1 -0
  88. package/dist/packages/snackbar/react.d.ts +2 -0
  89. package/dist/packages/snackbar/react.js +11 -0
  90. package/dist/packages/snackbar/snackbar.d.ts +132 -0
  91. package/dist/packages/snackbar/snackbar.hydration.test.d.ts +1 -0
  92. package/dist/packages/snackbar/snackbar.hydration.test.js +13 -0
  93. package/dist/packages/snackbar/snackbar.js +2646 -0
  94. package/dist/packages/snackbar/snackbar.js.map +7 -0
  95. package/dist/packages/snackbar/snackbar.react.stories.d.ts +12 -0
  96. package/dist/packages/snackbar/snackbar.react.stories.js +160 -0
  97. package/dist/packages/snackbar/snackbar.stories.d.ts +20 -0
  98. package/dist/packages/snackbar/snackbar.stories.js +291 -0
  99. package/dist/packages/snackbar/snackbar.test.d.ts +4 -0
  100. package/dist/packages/snackbar/snackbar.test.js +17 -0
  101. package/dist/packages/snackbar/styles.d.ts +1 -0
  102. package/dist/packages/snackbar/styles.js +35 -0
  103. package/dist/packages/snackbar-item/react.d.ts +5 -0
  104. package/dist/packages/snackbar-item/react.js +15 -0
  105. package/dist/packages/snackbar-item/snackbar-item.d.ts +69 -0
  106. package/dist/packages/snackbar-item/snackbar-item.js +2601 -0
  107. package/dist/packages/snackbar-item/snackbar-item.js.map +7 -0
  108. package/dist/packages/snackbar-item/snackbar-item.react.test.d.ts +1 -0
  109. package/dist/packages/snackbar-item/snackbar-item.react.test.js +5 -0
  110. package/dist/packages/snackbar-item/styles.d.ts +1 -0
  111. package/dist/packages/snackbar-item/styles.js +111 -0
  112. package/dist/packages/step/step.js +9 -9
  113. package/dist/packages/step/step.js.map +2 -2
  114. package/dist/packages/tabs/tabs.react.stories.d.ts +4 -4
  115. package/dist/packages/tabs/tabs.react.stories.js +1 -1
  116. package/dist/packages/tabs/tabs.stories.d.ts +1 -1
  117. package/dist/packages/tabs/tabs.stories.js +1 -1
  118. package/dist/packages/toast/toast.js +6 -6
  119. package/dist/packages/toast/toast.js.map +4 -4
  120. package/dist/packages/utils/element-collapse.d.ts +12 -0
  121. package/dist/packages/utils/element-collapse.js +92 -0
  122. package/dist/packages/utils/expand-transition.js +1 -1
  123. package/dist/web-types.json +88 -3
  124. package/eik/index.js +12 -12
  125. package/package.json +1 -3
@@ -0,0 +1,41 @@
1
+ ### `<w-snackbar-item>` API
2
+
3
+ #### Properties
4
+
5
+ | Name | Type | Default | Summary |
6
+ |-|-|-|-|
7
+ | action-placement | [`SnackbarActionPlacement`](#snackbaractionplacement) | `'inline'` | The placement of the action and close buttons. |
8
+ | close (JS only) | `close() => void` | `-` | Remove the snackbar item from the document. |
9
+ | duration | `number` | `-` | How long the message should stay in the document before removing itself. |
10
+
11
+ #### Property Details
12
+
13
+ ##### action-placement
14
+
15
+ The placement of the action and close buttons.
16
+
17
+ - Type: [`SnackbarActionPlacement`](#snackbaractionplacement)
18
+ - Default: `'inline'`
19
+
20
+ ##### close (JS only)
21
+
22
+ Remove the snackbar item from the document.
23
+
24
+ Moves focus to the last focused element outside of the snackbar item, if available.
25
+
26
+ - Type: `close() => void`
27
+ - Default: `-`
28
+
29
+ ##### duration
30
+
31
+ How long the message should stay in the document before removing itself.
32
+
33
+ - Type: `number`
34
+ - Default: `-`
35
+
36
+ #### Types
37
+
38
+ ##### SnackbarActionPlacement
39
+
40
+ `'inline' | 'block'`
41
+
@@ -0,0 +1,49 @@
1
+ # SnackbarItem (w-snackbar-item)
2
+
3
+ ## Description
4
+
5
+ An item to show in a `w-snackbar`.
6
+
7
+ See the `create` function on `w-snackbar` for a convenience API which helps you make snackbar items.
8
+
9
+ ### `<w-snackbar-item>` API
10
+
11
+ #### Properties
12
+
13
+ | Name | Type | Default | Summary |
14
+ |-|-|-|-|
15
+ | action-placement | [`SnackbarActionPlacement`](#snackbaractionplacement) | `'inline'` | The placement of the action and close buttons. |
16
+ | close (JS only) | `close() => void` | `-` | Remove the snackbar item from the document. |
17
+ | duration | `number` | `-` | How long the message should stay in the document before removing itself. |
18
+
19
+ #### Property Details
20
+
21
+ ##### action-placement
22
+
23
+ The placement of the action and close buttons.
24
+
25
+ - Type: [`SnackbarActionPlacement`](#snackbaractionplacement)
26
+ - Default: `'inline'`
27
+
28
+ ##### close (JS only)
29
+
30
+ Remove the snackbar item from the document.
31
+
32
+ Moves focus to the last focused element outside of the snackbar item, if available.
33
+
34
+ - Type: `close() => void`
35
+ - Default: `-`
36
+
37
+ ##### duration
38
+
39
+ How long the message should stay in the document before removing itself.
40
+
41
+ - Type: `number`
42
+ - Default: `-`
43
+
44
+ #### Types
45
+
46
+ ##### SnackbarActionPlacement
47
+
48
+ `'inline' | 'block'`
49
+
@@ -6,6 +6,8 @@
6
6
  |-|-|-|-|
7
7
  | active | `boolean` | `false` | Whether this step is active. |
8
8
  | completed | `boolean` | `false` | Whether this step is completed. |
9
+ | getAriaLabel (JS only) | `getAriaLabel() => void` | `-` | - |
10
+ | setContext (JS only) | `setContext(context: StepsContext) => void` | `-` | - |
9
11
 
10
12
  #### Property Details
11
13
 
@@ -27,3 +29,17 @@ Completed steps display a checkmark icon and a filled indicator.
27
29
  - Type: `boolean`
28
30
  - Default: `false`
29
31
 
32
+ ##### getAriaLabel (JS only)
33
+
34
+
35
+
36
+ - Type: `getAriaLabel() => void`
37
+ - Default: `-`
38
+
39
+ ##### setContext (JS only)
40
+
41
+
42
+
43
+ - Type: `setContext(context: StepsContext) => void`
44
+ - Default: `-`
45
+
@@ -12,6 +12,8 @@ Individual step component that shows a single step in a process
12
12
  |-|-|-|-|
13
13
  | active | `boolean` | `false` | Whether this step is active. |
14
14
  | completed | `boolean` | `false` | Whether this step is completed. |
15
+ | getAriaLabel (JS only) | `getAriaLabel() => void` | `-` | - |
16
+ | setContext (JS only) | `setContext(context: StepsContext) => void` | `-` | - |
15
17
 
16
18
  #### Property Details
17
19
 
@@ -33,3 +35,17 @@ Completed steps display a checkmark icon and a filled indicator.
33
35
  - Type: `boolean`
34
36
  - Default: `false`
35
37
 
38
+ ##### getAriaLabel (JS only)
39
+
40
+
41
+
42
+ - Type: `getAriaLabel() => void`
43
+ - Default: `-`
44
+
45
+ ##### setContext (JS only)
46
+
47
+
48
+
49
+ - Type: `setContext(context: StepsContext) => void`
50
+ - Default: `-`
51
+
@@ -9,6 +9,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
9
9
  | checked | `boolean` | `false` | Whether the switch is on (checked). |
10
10
  | disabled | `boolean` | `false` | Whether the switch is disabled. |
11
11
  | name | `string` | `-` | Name used when submitting an HTML form. |
12
+ | resetFormControl (JS only) | `resetFormControl() => void` | `-` | - |
12
13
  | value | `string` | `-` | Value submitted when the switch is checked. |
13
14
 
14
15
  ### Property Details
@@ -34,6 +35,13 @@ Name used when submitting an HTML form.
34
35
  - Type: `string`
35
36
  - Default: `-`
36
37
 
38
+ #### resetFormControl (JS only)
39
+
40
+
41
+
42
+ - Type: `resetFormControl() => void`
43
+ - Default: `-`
44
+
37
45
  #### value
38
46
 
39
47
  Value submitted when the switch is checked.
@@ -47,6 +47,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
47
47
  | checked | `boolean` | `false` | Whether the switch is on (checked). |
48
48
  | disabled | `boolean` | `false` | Whether the switch is disabled. |
49
49
  | name | `string` | `-` | Name used when submitting an HTML form. |
50
+ | resetFormControl (JS only) | `resetFormControl() => void` | `-` | - |
50
51
  | value | `string` | `-` | Value submitted when the switch is checked. |
51
52
 
52
53
  ### Property Details
@@ -72,6 +73,13 @@ Name used when submitting an HTML form.
72
73
  - Type: `string`
73
74
  - Default: `-`
74
75
 
76
+ #### resetFormControl (JS only)
77
+
78
+
79
+
80
+ - Type: `resetFormControl() => void`
81
+ - Default: `-`
82
+
75
83
  #### value
76
84
 
77
85
  Value submitted when the switch is checked.
@@ -6,7 +6,9 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
6
6
 
7
7
  | Name | Type | Default | Summary |
8
8
  |-|-|-|-|
9
+ | checkValidity (JS only) | `checkValidity() => boolean` | `-` | Checks whether the textarea passes constraint validation |
9
10
  | disabled | `boolean` | `false` | Makes the element not focusable and hides it from form submits |
11
+ | handler (JS only) | `handler(e: InputEvent) => void` | `-` | - |
10
12
  | help-text | `string \| undefined` | `-` | Description shown below the input field |
11
13
  | invalid | `boolean` | `false` | Mark the form field as invalid. |
12
14
  | label | `string \| undefined` | `-` | Either a `label` or an `aria-label` must be provided. |
@@ -17,13 +19,23 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
17
19
  | placeholder | `string \| undefined` | `-` | Shown in the textarea when it doesn't have a value |
18
20
  | read-only | `boolean` | `false` | **Deprecated**: Use the native `readonly` attribute instead |
19
21
  | readonly | `boolean` | `false` | Whether the input can be selected but not changed by the user |
22
+ | reportValidity (JS only) | `reportValidity() => boolean` | `-` | Checks validity and shows the browser's validation message if invalid |
20
23
  | required | `boolean` | `false` | Whether user input is required on the input before form submission |
24
+ | resetFormControl (JS only) | `resetFormControl() => void` | `-` | - |
25
+ | setCustomValidity (JS only) | `setCustomValidity(message: string) => void` | `-` | Sets a custom validation message. Pass an empty string to clear. |
21
26
  | validationMessage (JS only) | `string` | `-` | Returns the validation message if the textarea is invalid, otherwise an empty string |
22
27
  | validity (JS only) | `ValidityState` | `-` | Returns the validity state of the textarea |
23
28
  | value | `string \| undefined` | `-` | Lets you set the current value |
24
29
 
25
30
  ### Property Details
26
31
 
32
+ #### checkValidity (JS only)
33
+
34
+ Checks whether the textarea passes constraint validation
35
+
36
+ - Type: `checkValidity() => boolean`
37
+ - Default: `-`
38
+
27
39
  #### disabled
28
40
 
29
41
  Keep in mind that using disabled in its current form is an anti-pattern.
@@ -35,6 +47,13 @@ Please consider more informative alternatives before choosing to use disabled on
35
47
  - Type: `boolean`
36
48
  - Default: `false`
37
49
 
50
+ #### handler (JS only)
51
+
52
+
53
+
54
+ - Type: `handler(e: InputEvent) => void`
55
+ - Default: `-`
56
+
38
57
  #### help-text
39
58
 
40
59
  Use in combination with `invalid` to show as a validation error message,
@@ -112,6 +131,13 @@ Whether the input can be selected but not changed by the user
112
131
  - Type: `boolean`
113
132
  - Default: `false`
114
133
 
134
+ #### reportValidity (JS only)
135
+
136
+ Checks validity and shows the browser's validation message if invalid
137
+
138
+ - Type: `reportValidity() => boolean`
139
+ - Default: `-`
140
+
115
141
  #### required
116
142
 
117
143
  Whether user input is required on the input before form submission
@@ -119,6 +145,20 @@ Whether user input is required on the input before form submission
119
145
  - Type: `boolean`
120
146
  - Default: `false`
121
147
 
148
+ #### resetFormControl (JS only)
149
+
150
+
151
+
152
+ - Type: `resetFormControl() => void`
153
+ - Default: `-`
154
+
155
+ #### setCustomValidity (JS only)
156
+
157
+ Sets a custom validation message. Pass an empty string to clear.
158
+
159
+ - Type: `setCustomValidity(message: string) => void`
160
+ - Default: `-`
161
+
122
162
  #### validationMessage (JS only)
123
163
 
124
164
  Returns the validation message if the textarea is invalid, otherwise an empty string
@@ -121,7 +121,9 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
121
121
 
122
122
  | Name | Type | Default | Summary |
123
123
  |-|-|-|-|
124
+ | checkValidity (JS only) | `checkValidity() => boolean` | `-` | Checks whether the textarea passes constraint validation |
124
125
  | disabled | `boolean` | `false` | Makes the element not focusable and hides it from form submits |
126
+ | handler (JS only) | `handler(e: InputEvent) => void` | `-` | - |
125
127
  | help-text | `string \| undefined` | `-` | Description shown below the input field |
126
128
  | invalid | `boolean` | `false` | Mark the form field as invalid. |
127
129
  | label | `string \| undefined` | `-` | Either a `label` or an `aria-label` must be provided. |
@@ -132,13 +134,23 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
132
134
  | placeholder | `string \| undefined` | `-` | Shown in the textarea when it doesn't have a value |
133
135
  | read-only | `boolean` | `false` | **Deprecated**: Use the native `readonly` attribute instead |
134
136
  | readonly | `boolean` | `false` | Whether the input can be selected but not changed by the user |
137
+ | reportValidity (JS only) | `reportValidity() => boolean` | `-` | Checks validity and shows the browser's validation message if invalid |
135
138
  | required | `boolean` | `false` | Whether user input is required on the input before form submission |
139
+ | resetFormControl (JS only) | `resetFormControl() => void` | `-` | - |
140
+ | setCustomValidity (JS only) | `setCustomValidity(message: string) => void` | `-` | Sets a custom validation message. Pass an empty string to clear. |
136
141
  | validationMessage (JS only) | `string` | `-` | Returns the validation message if the textarea is invalid, otherwise an empty string |
137
142
  | validity (JS only) | `ValidityState` | `-` | Returns the validity state of the textarea |
138
143
  | value | `string \| undefined` | `-` | Lets you set the current value |
139
144
 
140
145
  ### Property Details
141
146
 
147
+ #### checkValidity (JS only)
148
+
149
+ Checks whether the textarea passes constraint validation
150
+
151
+ - Type: `checkValidity() => boolean`
152
+ - Default: `-`
153
+
142
154
  #### disabled
143
155
 
144
156
  Keep in mind that using disabled in its current form is an anti-pattern.
@@ -150,6 +162,13 @@ Please consider more informative alternatives before choosing to use disabled on
150
162
  - Type: `boolean`
151
163
  - Default: `false`
152
164
 
165
+ #### handler (JS only)
166
+
167
+
168
+
169
+ - Type: `handler(e: InputEvent) => void`
170
+ - Default: `-`
171
+
153
172
  #### help-text
154
173
 
155
174
  Use in combination with `invalid` to show as a validation error message,
@@ -227,6 +246,13 @@ Whether the input can be selected but not changed by the user
227
246
  - Type: `boolean`
228
247
  - Default: `false`
229
248
 
249
+ #### reportValidity (JS only)
250
+
251
+ Checks validity and shows the browser's validation message if invalid
252
+
253
+ - Type: `reportValidity() => boolean`
254
+ - Default: `-`
255
+
230
256
  #### required
231
257
 
232
258
  Whether user input is required on the input before form submission
@@ -234,6 +260,20 @@ Whether user input is required on the input before form submission
234
260
  - Type: `boolean`
235
261
  - Default: `false`
236
262
 
263
+ #### resetFormControl (JS only)
264
+
265
+
266
+
267
+ - Type: `resetFormControl() => void`
268
+ - Default: `-`
269
+
270
+ #### setCustomValidity (JS only)
271
+
272
+ Sets a custom validation message. Pass an empty string to clear.
273
+
274
+ - Type: `setCustomValidity(message: string) => void`
275
+ - Default: `-`
276
+
237
277
  #### validationMessage (JS only)
238
278
 
239
279
  Returns the validation message if the textarea is invalid, otherwise an empty string
@@ -9,6 +9,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
9
9
  | autocomplete | `HTMLInputElement["autocomplete"] \| 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. |
10
10
  | disabled | `boolean` | `false` | Makes the element not focusable and hides it from form submits |
11
11
  | formatter (JS only) | `((value: string) => string) \| undefined` | `-` | Function to format value when the input field |
12
+ | handler (JS only) | `handler(e: Event) => void` | `-` | - |
12
13
  | help-text | `string \| undefined` | `-` | Description shown below the input field |
13
14
  | invalid | `boolean` | `false` | Mark the form field as invalid. |
14
15
  | label | `string \| undefined` | `-` | Either a `label` or an `aria-label` must be provided. |
@@ -21,11 +22,14 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
21
22
  | name | `string \| undefined` | `-` | The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form. |
22
23
  | pattern | `string \| undefined` | `-` | 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) |
23
24
  | placeholder | `string \| undefined` | `-` | Shown in the textfield when it doesn't have a value |
25
+ | prefixSlotChange (JS only) | `prefixSlotChange() => void` | `-` | - |
24
26
  | read-only | `boolean` | `false` | **Deprecated**: Use the native readonly attribute instead. |
25
27
  | readonly | `boolean` | `false` | Whether the input can be selected but not changed by the user. |
26
28
  | required | `boolean` | `false` | Whether user input is required on the input before form submission. |
29
+ | resetFormControl (JS only) | `resetFormControl() => void` | `-` | - |
27
30
  | size | `string \| undefined` | `-` | 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. |
28
31
  | step | `number \| undefined` | `-` | Forces `number` inputs to be a whole number of `step` |
32
+ | suffixSlotChange (JS only) | `suffixSlotChange() => void` | `-` | - |
29
33
  | type | `string \| undefined` | `-` | The [type of input](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types). |
30
34
  | value | `string \| undefined` | `-` | Lets you set the current value. |
31
35
 
@@ -59,6 +63,13 @@ similar to the accessible input [masking example from Filament Group](https://fi
59
63
  - Type: `((value: string) => string) | undefined`
60
64
  - Default: `-`
61
65
 
66
+ #### handler (JS only)
67
+
68
+
69
+
70
+ - Type: `handler(e: Event) => void`
71
+ - Default: `-`
72
+
62
73
  #### help-text
63
74
 
64
75
  Use in combination with `invalid` to show as a validation error message,
@@ -150,6 +161,13 @@ Placeholder text should not be used as a substitute for labeling the element wit
150
161
  - Type: `string | undefined`
151
162
  - Default: `-`
152
163
 
164
+ #### prefixSlotChange (JS only)
165
+
166
+
167
+
168
+ - Type: `prefixSlotChange() => void`
169
+ - Default: `-`
170
+
153
171
  #### read-only
154
172
 
155
173
  **Deprecated**: Use the native readonly attribute instead.
@@ -173,6 +191,13 @@ Whether user input is required on the input before form submission.
173
191
  - Type: `boolean`
174
192
  - Default: `false`
175
193
 
194
+ #### resetFormControl (JS only)
195
+
196
+
197
+
198
+ - Type: `resetFormControl() => void`
199
+ - Default: `-`
200
+
176
201
  #### size
177
202
 
178
203
  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.
@@ -190,6 +215,13 @@ Using arrow up and down in the input field increments and decrements by 5.
190
215
  - Type: `number | undefined`
191
216
  - Default: `-`
192
217
 
218
+ #### suffixSlotChange (JS only)
219
+
220
+
221
+
222
+ - Type: `suffixSlotChange() => void`
223
+ - Default: `-`
224
+
193
225
  #### type
194
226
 
195
227
  The [type of input](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).
@@ -194,6 +194,7 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
194
194
  | autocomplete | `HTMLInputElement["autocomplete"] \| 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. |
195
195
  | disabled | `boolean` | `false` | Makes the element not focusable and hides it from form submits |
196
196
  | formatter (JS only) | `((value: string) => string) \| undefined` | `-` | Function to format value when the input field |
197
+ | handler (JS only) | `handler(e: Event) => void` | `-` | - |
197
198
  | help-text | `string \| undefined` | `-` | Description shown below the input field |
198
199
  | invalid | `boolean` | `false` | Mark the form field as invalid. |
199
200
  | label | `string \| undefined` | `-` | Either a `label` or an `aria-label` must be provided. |
@@ -206,11 +207,14 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
206
207
  | name | `string \| undefined` | `-` | The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form. |
207
208
  | pattern | `string \| undefined` | `-` | 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) |
208
209
  | placeholder | `string \| undefined` | `-` | Shown in the textfield when it doesn't have a value |
210
+ | prefixSlotChange (JS only) | `prefixSlotChange() => void` | `-` | - |
209
211
  | read-only | `boolean` | `false` | **Deprecated**: Use the native readonly attribute instead. |
210
212
  | readonly | `boolean` | `false` | Whether the input can be selected but not changed by the user. |
211
213
  | required | `boolean` | `false` | Whether user input is required on the input before form submission. |
214
+ | resetFormControl (JS only) | `resetFormControl() => void` | `-` | - |
212
215
  | size | `string \| undefined` | `-` | 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. |
213
216
  | step | `number \| undefined` | `-` | Forces `number` inputs to be a whole number of `step` |
217
+ | suffixSlotChange (JS only) | `suffixSlotChange() => void` | `-` | - |
214
218
  | type | `string \| undefined` | `-` | The [type of input](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types). |
215
219
  | value | `string \| undefined` | `-` | Lets you set the current value. |
216
220
 
@@ -244,6 +248,13 @@ similar to the accessible input [masking example from Filament Group](https://fi
244
248
  - Type: `((value: string) => string) | undefined`
245
249
  - Default: `-`
246
250
 
251
+ #### handler (JS only)
252
+
253
+
254
+
255
+ - Type: `handler(e: Event) => void`
256
+ - Default: `-`
257
+
247
258
  #### help-text
248
259
 
249
260
  Use in combination with `invalid` to show as a validation error message,
@@ -335,6 +346,13 @@ Placeholder text should not be used as a substitute for labeling the element wit
335
346
  - Type: `string | undefined`
336
347
  - Default: `-`
337
348
 
349
+ #### prefixSlotChange (JS only)
350
+
351
+
352
+
353
+ - Type: `prefixSlotChange() => void`
354
+ - Default: `-`
355
+
338
356
  #### read-only
339
357
 
340
358
  **Deprecated**: Use the native readonly attribute instead.
@@ -358,6 +376,13 @@ Whether user input is required on the input before form submission.
358
376
  - Type: `boolean`
359
377
  - Default: `false`
360
378
 
379
+ #### resetFormControl (JS only)
380
+
381
+
382
+
383
+ - Type: `resetFormControl() => void`
384
+ - Default: `-`
385
+
361
386
  #### size
362
387
 
363
388
  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.
@@ -375,6 +400,13 @@ Using arrow up and down in the input field increments and decrements by 5.
375
400
  - Type: `number | undefined`
376
401
  - Default: `-`
377
402
 
403
+ #### suffixSlotChange (JS only)
404
+
405
+
406
+
407
+ - Type: `suffixSlotChange() => void`
408
+ - Default: `-`
409
+
378
410
  #### type
379
411
 
380
412
  The [type of input](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).