@warp-ds/elements 2.2.0-next.5 → 2.2.0-next.6

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 (38) hide show
  1. package/dist/custom-elements.json +729 -247
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.js +139 -101
  4. package/dist/index.js.map +4 -4
  5. package/dist/packages/button/index.d.ts +3 -0
  6. package/dist/packages/button/index.js.map +2 -2
  7. package/dist/packages/button/react.js.map +2 -2
  8. package/dist/packages/datepicker/datepicker.d.ts +89 -0
  9. package/dist/packages/datepicker/datepicker.stories.d.ts +11 -0
  10. package/dist/packages/datepicker/index.d.ts +1 -0
  11. package/dist/packages/datepicker/index.js +2782 -0
  12. package/dist/packages/datepicker/index.js.map +7 -0
  13. package/dist/packages/datepicker/locales/da/messages.d.mts +1 -0
  14. package/dist/packages/datepicker/locales/en/messages.d.mts +1 -0
  15. package/dist/packages/datepicker/locales/fi/messages.d.mts +1 -0
  16. package/dist/packages/datepicker/locales/nb/messages.d.mts +1 -0
  17. package/dist/packages/datepicker/locales/sv/messages.d.mts +1 -0
  18. package/dist/packages/datepicker/styles/w-datepicker-calendar.styles.d.ts +1 -0
  19. package/dist/packages/datepicker/styles/w-datepicker-day.styles.d.ts +1 -0
  20. package/dist/packages/datepicker/styles/w-datepicker-month.styles.d.ts +1 -0
  21. package/dist/packages/datepicker/styles/w-datepicker.styles.d.ts +1 -0
  22. package/dist/packages/datepicker/utils.d.ts +13 -0
  23. package/dist/packages/pageindicator/index.d.ts +14 -0
  24. package/dist/packages/pageindicator/index.js +32 -0
  25. package/dist/packages/pageindicator/index.js.map +7 -0
  26. package/dist/packages/pageindicator/pageindicator.stories.d.ts +32 -0
  27. package/dist/packages/pageindicator/react.d.ts +2 -0
  28. package/dist/packages/pageindicator/react.js +52 -0
  29. package/dist/packages/pageindicator/react.js.map +7 -0
  30. package/dist/packages/pageindicator/style.d.ts +1 -0
  31. package/dist/packages/pagination/index.d.ts +3 -0
  32. package/dist/packages/pagination/index.js +21 -13
  33. package/dist/packages/pagination/index.js.map +3 -3
  34. package/dist/packages/pagination/react.js +21 -13
  35. package/dist/packages/pagination/react.js.map +3 -3
  36. package/dist/vscode.html-custom-data.json +66 -19
  37. package/dist/web-types.json +162 -38
  38. package/package.json +2 -1
@@ -2,6 +2,24 @@
2
2
  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
3
3
  "version": 1.1,
4
4
  "tags": [
5
+ {
6
+ "name": "w-alert",
7
+ "description": "Alert is an inline component used for displaying different types of messages.\n\nFor accessibility reasons, alert should appear close to the element that triggered it.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)\n\n---\n\n",
8
+ "attributes": [
9
+ {
10
+ "name": "variant",
11
+ "values": [
12
+ { "name": "negative" },
13
+ { "name": "positive" },
14
+ { "name": "warning" },
15
+ { "name": "info" }
16
+ ]
17
+ },
18
+ { "name": "show", "values": [] },
19
+ { "name": "role", "values": [] }
20
+ ],
21
+ "references": []
22
+ },
5
23
  {
6
24
  "name": "w-affix",
7
25
  "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---\n\n",
@@ -21,24 +39,6 @@
21
39
  ],
22
40
  "references": []
23
41
  },
24
- {
25
- "name": "w-alert",
26
- "description": "Alert is an inline component used for displaying different types of messages.\n\nFor accessibility reasons, alert should appear close to the element that triggered it.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)\n\n---\n\n",
27
- "attributes": [
28
- {
29
- "name": "variant",
30
- "values": [
31
- { "name": "negative" },
32
- { "name": "positive" },
33
- { "name": "warning" },
34
- { "name": "info" }
35
- ]
36
- },
37
- { "name": "show", "values": [] },
38
- { "name": "role", "values": [] }
39
- ],
40
- "references": []
41
- },
42
42
  {
43
43
  "name": "w-badge",
44
44
  "description": "`w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-badge--docs)\n\n---\n\n",
@@ -133,6 +133,36 @@
133
133
  ],
134
134
  "references": []
135
135
  },
136
+ {
137
+ "name": "w-datepicker",
138
+ "description": "An input for dates.\n\nUses the `lang` attribute on either the element or on `<html>` to determine the locale options.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-datepicker--docs)\n\n---\n\n",
139
+ "attributes": [
140
+ { "name": "label", "values": [] },
141
+ {
142
+ "name": "lang",
143
+ "description": "Takes precedence over the `<html>` lang attribute.",
144
+ "values": []
145
+ },
146
+ { "name": "name", "values": [] },
147
+ { "name": "value", "values": [] },
148
+ {
149
+ "name": "header-format",
150
+ "description": "Decides the format of the date as shown in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
151
+ "values": []
152
+ },
153
+ {
154
+ "name": "weekday-format",
155
+ "description": "Decides the format of the weekday as shown above the grid of dates in the calendar.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
156
+ "values": []
157
+ },
158
+ {
159
+ "name": "day-format",
160
+ "description": "Decides the format of the day in the calendar as read to screen readers.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
161
+ "values": []
162
+ }
163
+ ],
164
+ "references": []
165
+ },
136
166
  {
137
167
  "name": "w-dead-toggle",
138
168
  "description": "Dead toggle can be used where the appearance of a checkbox or radio is needed - but for accessibility purposes an actual input element should not be present.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-dead-toggle--docs)\n\n---\n\n",
@@ -191,9 +221,26 @@
191
221
  ],
192
222
  "references": []
193
223
  },
224
+ {
225
+ "name": "w-pageindicator",
226
+ "description": "\n\n---\n\n",
227
+ "attributes": [
228
+ {
229
+ "name": "selected-page",
230
+ "description": "Currently selected page (1-based index)",
231
+ "values": []
232
+ },
233
+ {
234
+ "name": "page-count",
235
+ "description": "Total number of pages",
236
+ "values": []
237
+ }
238
+ ],
239
+ "references": []
240
+ },
194
241
  {
195
242
  "name": "w-pagination",
196
- "description": "Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-pagination--docs)\n\n---\n\n",
243
+ "description": "Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-pagination--docs)\n\n---\n\n\n\n### **Events:**\n - **page-click** - Triggered when a link button in the pagination is clicked. Contains the page number in `string` form.",
197
244
  "attributes": [
198
245
  { "name": "base-url", "values": [] },
199
246
  { "name": "pages", "values": [] },
@@ -1,11 +1,45 @@
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.2.0-next.4",
4
+ "version": "2.2.0-next.5",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
+ {
10
+ "name": "w-alert",
11
+ "description": "Alert is an inline component used for displaying different types of messages.\n\nFor accessibility reasons, alert should appear close to the element that triggered it.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)\n---\n",
12
+ "doc-url": "",
13
+ "attributes": [
14
+ {
15
+ "name": "variant",
16
+ "value": {
17
+ "type": "'negative' | 'positive' | 'warning' | 'info'",
18
+ "default": "'info'"
19
+ }
20
+ },
21
+ {
22
+ "name": "show",
23
+ "value": { "type": "boolean", "default": "false" }
24
+ },
25
+ {
26
+ "name": "role",
27
+ "value": { "type": "string", "default": "'alert'" }
28
+ }
29
+ ],
30
+ "events": [],
31
+ "js": {
32
+ "properties": [
33
+ {
34
+ "name": "variant",
35
+ "type": "'negative' | 'positive' | 'warning' | 'info'"
36
+ },
37
+ { "name": "show", "type": "boolean" },
38
+ { "name": "role", "type": "string" }
39
+ ],
40
+ "events": []
41
+ }
42
+ },
9
43
  {
10
44
  "name": "w-affix",
11
45
  "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",
@@ -43,40 +77,6 @@
43
77
  "events": []
44
78
  }
45
79
  },
46
- {
47
- "name": "w-alert",
48
- "description": "Alert is an inline component used for displaying different types of messages.\n\nFor accessibility reasons, alert should appear close to the element that triggered it.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)\n---\n",
49
- "doc-url": "",
50
- "attributes": [
51
- {
52
- "name": "variant",
53
- "value": {
54
- "type": "'negative' | 'positive' | 'warning' | 'info'",
55
- "default": "'info'"
56
- }
57
- },
58
- {
59
- "name": "show",
60
- "value": { "type": "boolean", "default": "false" }
61
- },
62
- {
63
- "name": "role",
64
- "value": { "type": "string", "default": "'alert'" }
65
- }
66
- ],
67
- "events": [],
68
- "js": {
69
- "properties": [
70
- {
71
- "name": "variant",
72
- "type": "'negative' | 'positive' | 'warning' | 'info'"
73
- },
74
- { "name": "show", "type": "boolean" },
75
- { "name": "role", "type": "string" }
76
- ],
77
- "events": []
78
- }
79
- },
80
80
  {
81
81
  "name": "w-badge",
82
82
  "description": "`w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-badge--docs)\n---\n",
@@ -231,6 +231,85 @@
231
231
  "events": []
232
232
  }
233
233
  },
234
+ {
235
+ "name": "w-datepicker",
236
+ "description": "An input for dates.\n\nUses the `lang` attribute on either the element or on `<html>` to determine the locale options.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-datepicker--docs)\n---\n",
237
+ "doc-url": "",
238
+ "attributes": [
239
+ { "name": "label", "value": { "type": "string" } },
240
+ {
241
+ "name": "lang",
242
+ "description": "Takes precedence over the `<html>` lang attribute.",
243
+ "value": { "type": "string" }
244
+ },
245
+ { "name": "name", "value": { "type": "string" } },
246
+ { "name": "value", "value": { "type": "string" } },
247
+ {
248
+ "name": "header-format",
249
+ "description": "Decides the format of the date as shown in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
250
+ "value": { "type": "string", "default": "'MMMM yyyy'" }
251
+ },
252
+ {
253
+ "name": "weekday-format",
254
+ "description": "Decides the format of the weekday as shown above the grid of dates in the calendar.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
255
+ "value": { "type": "string", "default": "'EEEEEE'" }
256
+ },
257
+ {
258
+ "name": "day-format",
259
+ "description": "Decides the format of the day in the calendar as read to screen readers.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
260
+ "value": { "type": "string", "default": "'PPPP'" }
261
+ }
262
+ ],
263
+ "events": [],
264
+ "js": {
265
+ "properties": [
266
+ { "name": "label", "type": "string" },
267
+ {
268
+ "name": "lang",
269
+ "description": "Takes precedence over the `<html>` lang attribute.",
270
+ "type": "string"
271
+ },
272
+ { "name": "name", "type": "string" },
273
+ { "name": "value", "type": "string" },
274
+ {
275
+ "name": "headerFormat",
276
+ "description": "Decides the format of the date as shown in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
277
+ "type": "string"
278
+ },
279
+ {
280
+ "name": "weekdayFormat",
281
+ "description": "Decides the format of the weekday as shown above the grid of dates in the calendar.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
282
+ "type": "string"
283
+ },
284
+ {
285
+ "name": "isDayDisabled",
286
+ "description": "Lets you control if a date in the calendar should be disabled.\n\nThis needs to be set on the element instance in JavaScript, not as an HTML attribute.",
287
+ "type": "(day: Date) => boolean"
288
+ },
289
+ {
290
+ "name": "dayFormat",
291
+ "description": "Decides the format of the day in the calendar as read to screen readers.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
292
+ "type": "string"
293
+ },
294
+ { "name": "isCalendarOpen", "type": "boolean" },
295
+ {
296
+ "name": "internalValue",
297
+ "description": "The current input value as a stringified date-like",
298
+ "type": "string"
299
+ },
300
+ { "name": "navigationDate", "type": "Date" },
301
+ { "name": "selectedDate", "type": "Date | null" },
302
+ { "name": "month" },
303
+ { "name": "weeks" },
304
+ { "name": "calendar", "type": "HTMLDivElement" },
305
+ { "name": "input", "type": "HTMLInputElement" },
306
+ { "name": "toggleButton", "type": "HTMLButtonElement" },
307
+ { "name": "wrapper", "type": "HTMLDivElement" },
308
+ { "name": "selectedCell", "type": "HTMLTableCellElement" }
309
+ ],
310
+ "events": []
311
+ }
312
+ },
234
313
  {
235
314
  "name": "w-dead-toggle",
236
315
  "description": "Dead toggle can be used where the appearance of a checkbox or radio is needed - but for accessibility purposes an actual input element should not be present.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-dead-toggle--docs)\n---\n",
@@ -405,9 +484,42 @@
405
484
  ]
406
485
  }
407
486
  },
487
+ {
488
+ "name": "w-pageindicator",
489
+ "description": "\n---\n",
490
+ "doc-url": "",
491
+ "attributes": [
492
+ {
493
+ "name": "selected-page",
494
+ "description": "Currently selected page (1-based index)",
495
+ "value": { "type": "number", "default": "1" }
496
+ },
497
+ {
498
+ "name": "page-count",
499
+ "description": "Total number of pages",
500
+ "value": { "type": "number", "default": "1" }
501
+ }
502
+ ],
503
+ "events": [],
504
+ "js": {
505
+ "properties": [
506
+ {
507
+ "name": "selectedPage",
508
+ "description": "Currently selected page (1-based index)",
509
+ "type": "number"
510
+ },
511
+ {
512
+ "name": "pageCount",
513
+ "description": "Total number of pages",
514
+ "type": "number"
515
+ }
516
+ ],
517
+ "events": []
518
+ }
519
+ },
408
520
  {
409
521
  "name": "w-pagination",
410
- "description": "Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-pagination--docs)\n---\n",
522
+ "description": "Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-pagination--docs)\n---\n\n\n### **Events:**\n - **page-click** - Triggered when a link button in the pagination is clicked. Contains the page number in `string` form.",
411
523
  "doc-url": "",
412
524
  "attributes": [
413
525
  { "name": "base-url", "value": { "type": "string" } },
@@ -421,7 +533,13 @@
421
533
  "value": { "type": "number", "default": "7" }
422
534
  }
423
535
  ],
424
- "events": [],
536
+ "events": [
537
+ {
538
+ "name": "page-click",
539
+ "type": "CustomEvent",
540
+ "description": "Triggered when a link button in the pagination is clicked. Contains the page number in `string` form."
541
+ }
542
+ ],
425
543
  "js": {
426
544
  "properties": [
427
545
  { "name": "baseUrl", "type": "string" },
@@ -429,7 +547,13 @@
429
547
  { "name": "currentPageNumber", "type": "number" },
430
548
  { "name": "visiblePages", "type": "number" }
431
549
  ],
432
- "events": []
550
+ "events": [
551
+ {
552
+ "name": "page-click",
553
+ "type": "CustomEvent",
554
+ "description": "Triggered when a link button in the pagination is clicked. Contains the page number in `string` form."
555
+ }
556
+ ]
433
557
  }
434
558
  },
435
559
  {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@warp-ds/elements",
3
3
  "type": "module",
4
- "version": "2.2.0-next.5",
4
+ "version": "2.2.0-next.6",
5
5
  "packageManager": "pnpm@10.15.1",
6
6
  "description": "Custom elements for Warp",
7
7
  "exports": {
@@ -139,6 +139,7 @@
139
139
  "@warp-ds/elements-core": "2.0.1",
140
140
  "@warp-ds/icons": "2.5.0",
141
141
  "@wc-toolkit/type-parser": "^1.2.0",
142
+ "date-fns": "^4.1.0",
142
143
  "scroll-doctor": "2.0.2"
143
144
  },
144
145
  "publishConfig": {