@warp-ds/elements 2.10.0-next.18 → 2.10.0-next.19

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 (83) hide show
  1. package/dist/custom-elements.json +179 -159
  2. package/dist/docs/affix/affix.md +117 -0
  3. package/dist/docs/affix/styling.md +107 -0
  4. package/dist/docs/breadcrumbs/breadcrumbs.md +67 -4
  5. package/dist/docs/breadcrumbs/styling.md +67 -4
  6. package/dist/docs/index.md +1 -1
  7. package/dist/docs/select/select.md +91 -0
  8. package/dist/docs/select/styling.md +91 -0
  9. package/dist/docs/textarea/styling.md +91 -0
  10. package/dist/docs/textarea/textarea.md +91 -0
  11. package/dist/docs/textfield/api.md +8 -0
  12. package/dist/docs/textfield/styling.md +95 -0
  13. package/dist/docs/textfield/textfield.md +103 -0
  14. package/dist/index.d.ts +90 -64
  15. package/dist/packages/affix/affix-styles.d.ts +8 -0
  16. package/dist/packages/affix/affix-styles.js +108 -0
  17. package/dist/packages/affix/affix.d.ts +11 -8
  18. package/dist/packages/affix/affix.js +118 -17
  19. package/dist/packages/affix/affix.js.map +4 -4
  20. package/dist/packages/affix/affix.react.stories.d.ts +1 -1
  21. package/dist/packages/affix/react.d.ts +1 -1
  22. package/dist/packages/alert/alert.js.map +1 -1
  23. package/dist/packages/attention/attention.js.map +1 -1
  24. package/dist/packages/breadcrumb-item/breadcrumb-item.js +16 -7
  25. package/dist/packages/breadcrumb-item/breadcrumb-item.js.map +2 -2
  26. package/dist/packages/breadcrumb-item/styles.js +14 -5
  27. package/dist/packages/button/button.react.stories.d.ts +2 -2
  28. package/dist/packages/button/react.d.ts +1 -1
  29. package/dist/packages/checkbox-group/react.d.ts +1 -1
  30. package/dist/packages/combobox/combobox.react.stories.d.ts +2 -2
  31. package/dist/packages/combobox/react.d.ts +1 -1
  32. package/dist/packages/datepicker/datepicker.js.map +1 -1
  33. package/dist/packages/datepicker/datepicker.react.stories.d.ts +2 -2
  34. package/dist/packages/datepicker/react.d.ts +1 -1
  35. package/dist/packages/expandable/expandable.js.map +1 -1
  36. package/dist/packages/icon/icon.js +2 -2
  37. package/dist/packages/icon/icon.js.map +1 -1
  38. package/dist/packages/icon/icon.react.stories.d.ts +2 -1
  39. package/dist/packages/icon/icon.react.stories.js +1 -1
  40. package/dist/packages/modal-header/modal-header.js.map +1 -1
  41. package/dist/packages/pagination/pagination.js.map +1 -1
  42. package/dist/packages/pill/pill.js.map +1 -1
  43. package/dist/packages/radio-group/react.d.ts +1 -1
  44. package/dist/packages/select/input-styles.d.ts +11 -0
  45. package/dist/packages/select/input-styles.js +88 -0
  46. package/dist/packages/select/react.d.ts +1 -1
  47. package/dist/packages/select/select.js +96 -19
  48. package/dist/packages/select/select.js.map +4 -4
  49. package/dist/packages/select/select.react.stories.d.ts +2 -2
  50. package/dist/packages/slider/react.d.ts +1 -1
  51. package/dist/packages/slider/slider.react.stories.d.ts +1 -1
  52. package/dist/packages/slider-thumb/react.d.ts +1 -1
  53. package/dist/packages/snackbar/snackbar.d.ts +2 -2
  54. package/dist/packages/snackbar/snackbar.js +1 -1
  55. package/dist/packages/snackbar/snackbar.js.map +2 -2
  56. package/dist/packages/step/step.js.map +1 -1
  57. package/dist/packages/textarea/input-styles.d.ts +11 -0
  58. package/dist/packages/textarea/input-styles.js +88 -0
  59. package/dist/packages/textarea/react.d.ts +1 -1
  60. package/dist/packages/textarea/textarea.js +99 -20
  61. package/dist/packages/textarea/textarea.js.map +4 -4
  62. package/dist/packages/textarea/textarea.react.stories.d.ts +2 -2
  63. package/dist/packages/textfield/input-styles.d.ts +11 -0
  64. package/dist/packages/textfield/input-styles.js +88 -0
  65. package/dist/packages/textfield/locales/da/messages.d.mts +1 -0
  66. package/dist/packages/textfield/locales/da/messages.mjs +1 -0
  67. package/dist/packages/textfield/locales/en/messages.d.mts +1 -0
  68. package/dist/packages/textfield/locales/en/messages.mjs +1 -0
  69. package/dist/packages/textfield/locales/fi/messages.d.mts +1 -0
  70. package/dist/packages/textfield/locales/fi/messages.mjs +1 -0
  71. package/dist/packages/textfield/locales/nb/messages.d.mts +1 -0
  72. package/dist/packages/textfield/locales/nb/messages.mjs +1 -0
  73. package/dist/packages/textfield/locales/sv/messages.d.mts +1 -0
  74. package/dist/packages/textfield/locales/sv/messages.mjs +1 -0
  75. package/dist/packages/textfield/react.d.ts +1 -1
  76. package/dist/packages/textfield/textfield.d.ts +11 -1
  77. package/dist/packages/textfield/textfield.js +111 -24
  78. package/dist/packages/textfield/textfield.js.map +4 -4
  79. package/dist/packages/textfield/textfield.react.stories.d.ts +2 -2
  80. package/dist/packages/toast/toast.js.map +1 -1
  81. package/dist/web-types.json +60 -50
  82. package/eik/index.js +20 -20
  83. package/package.json +1 -1
package/dist/web-types.json CHANGED
@@ -1,60 +1,14 @@
1
1
  {
2
2
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
3
3
  "name": "@warp-ds/elements",
4
- "version": "2.10.0-next.17",
4
+ "version": "2.10.0-next.18",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
- {
10
- "name": "w-icon",
11
- "description": "\n---\n",
12
- "doc-url": "",
13
- "attributes": [
14
- {
15
- "name": "name",
16
- "description": "Icon filename (without .svg)",
17
- "value": { "type": "string" }
18
- },
19
- {
20
- "name": "size",
21
- "description": "Size: small, medium, large or pixel value (e.g. \"32px\").",
22
- "value": {
23
- "type": "'small' | 'medium' | 'large' | `${number}px` | undefined",
24
- "default": "\"medium\""
25
- }
26
- },
27
- {
28
- "name": "locale",
29
- "description": "Locale used for `<title>` text.\n\nReads the `lang` attribute from `<html>`, falls back to 'en'.",
30
- "value": { "type": "string" }
31
- }
32
- ],
33
- "events": [],
34
- "js": {
35
- "properties": [
36
- {
37
- "name": "name",
38
- "description": "Icon filename (without .svg)",
39
- "type": "string"
40
- },
41
- {
42
- "name": "size",
43
- "description": "Size: small, medium, large or pixel value (e.g. \"32px\").",
44
- "type": "'small' | 'medium' | 'large' | `${number}px` | undefined"
45
- },
46
- {
47
- "name": "locale",
48
- "description": "Locale used for `<title>` text.\n\nReads the `lang` attribute from `<html>`, falls back to 'en'.",
49
- "type": "string"
50
- }
51
- ],
52
- "events": []
53
- }
54
- },
55
9
  {
56
10
  "name": "w-textfield",
57
- "description": "A single-line input component used for entering and editing textual or numeric data.\n---\n\n\n### **Slots:**\n - **suffix** - Use with `<w-affix>` to include a suffix, for example the unit for a number (e. g. km or sek).\n- **prefix** - Use with `<w-affix>` to include a prefix, for example a search icon.",
11
+ "description": "A single-line input component used for entering and editing textual or numeric data.\n---\n\n\n### **Slots:**\n - **suffix** - Use with `<w-affix>` to include a suffix, for example the unit for a number (e. g. km or sek).\n- **prefix** - Use with `<w-affix>` to include a prefix, for example a search icon. ## Accessibility Note for Affixes Due to shadow DOM boundaries, affix content cannot be connected to the input via ARIA references. For non-interactive affixes (text labels like currency symbols), consider including that information in the main label or placeholder text instead for better screen reader support.",
58
12
  "doc-url": "",
59
13
  "attributes": [
60
14
  {
@@ -77,6 +31,11 @@
77
31
  "description": "Use in combination with `invalid` to show as a validation error message,\nor on its own to show a help text.",
78
32
  "value": { "type": "string | undefined" }
79
33
  },
34
+ {
35
+ "name": "optional",
36
+ "description": "Whether to show the optional indicator after the label.",
37
+ "value": { "type": "boolean", "default": "false" }
38
+ },
80
39
  {
81
40
  "name": "size",
82
41
  "description": "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.",
@@ -163,7 +122,7 @@
163
122
  },
164
123
  {
165
124
  "name": "prefix",
166
- "description": "Use with `<w-affix>` to include a prefix, for example a search icon."
125
+ "description": "Use with `<w-affix>` to include a prefix, for example a search icon. ## Accessibility Note for Affixes Due to shadow DOM boundaries, affix content cannot be connected to the input via ARIA references. For non-interactive affixes (text labels like currency symbols), consider including that information in the main label or placeholder text instead for better screen reader support."
167
126
  }
168
127
  ],
169
128
  "events": [],
@@ -189,6 +148,11 @@
189
148
  "description": "Use in combination with `invalid` to show as a validation error message,\nor on its own to show a help text.",
190
149
  "type": "string | undefined"
191
150
  },
151
+ {
152
+ "name": "optional",
153
+ "description": "Whether to show the optional indicator after the label.",
154
+ "type": "boolean"
155
+ },
192
156
  {
193
157
  "name": "size",
194
158
  "description": "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.",
@@ -271,9 +235,55 @@
271
235
  "events": []
272
236
  }
273
237
  },
238
+ {
239
+ "name": "w-icon",
240
+ "description": "\n---\n",
241
+ "doc-url": "",
242
+ "attributes": [
243
+ {
244
+ "name": "name",
245
+ "description": "Icon filename (without .svg)",
246
+ "value": { "type": "string" }
247
+ },
248
+ {
249
+ "name": "size",
250
+ "description": "Size: small, medium, large or pixel value (e.g. \"32px\").",
251
+ "value": {
252
+ "type": "'small' | 'medium' | 'large' | `${number}px` | undefined",
253
+ "default": "\"medium\""
254
+ }
255
+ },
256
+ {
257
+ "name": "locale",
258
+ "description": "Locale used for `<title>` text.\n\nReads the `lang` attribute from `<html>`, falls back to 'en'.",
259
+ "value": { "type": "string" }
260
+ }
261
+ ],
262
+ "events": [],
263
+ "js": {
264
+ "properties": [
265
+ {
266
+ "name": "name",
267
+ "description": "Icon filename (without .svg)",
268
+ "type": "string"
269
+ },
270
+ {
271
+ "name": "size",
272
+ "description": "Size: small, medium, large or pixel value (e.g. \"32px\").",
273
+ "type": "'small' | 'medium' | 'large' | `${number}px` | undefined"
274
+ },
275
+ {
276
+ "name": "locale",
277
+ "description": "Locale used for `<title>` text.\n\nReads the `lang` attribute from `<html>`, falls back to 'en'.",
278
+ "type": "string"
279
+ }
280
+ ],
281
+ "events": []
282
+ }
283
+ },
274
284
  {
275
285
  "name": "w-affix",
276
- "description": "This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)\n---\n",
286
+ "description": "This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.\n\n## Accessibility Note\nDue to shadow DOM encapsulation, ARIA attributes (like `aria-describedby`, `aria-labelledby`)\ncannot reference elements across shadow boundaries. This means:\n- Non-interactive affixes (text labels, icons) cannot be connected to the parent input via ARIA\n- Interactive affixes (buttons) must have their own `aria-label` (already implemented)\n- Do NOT attempt to reference affix content from parent components via ARIA ID references - it won't work\n\nFor non-interactive labels (e.g., currency symbols), consider including the information in the\nmain label or placeholder instead of relying on ARIA to announce affix content.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)\n---\n",
277
287
  "doc-url": "",
278
288
  "attributes": [
279
289
  {