@vaadin/date-picker 25.3.0-dev.1fa5a51482 → 25.3.0-rc1

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.
@@ -23,9 +23,14 @@
23
23
  "declarations": [
24
24
  {
25
25
  "kind": "class",
26
- "description": "A reactive controller that resolves the metadata (disabled state, custom part\nnames, ...) for the dates shown by the date-picker's `dateMetadataProvider`.\nIt calls the provider once for a range of months (never one date at a time),\ncaches the resolved months so scrolling back and forth does not re-fetch them,\nand prefetches a buffer of months around the requested range. While any\nrequest is in flight, #loading is `true` so the overlay can show a\nspinner.\n\nThe provider may return an array synchronously or a `Promise`, so results\nfrom a server (Flow) or a remote availability service can be awaited. Each\nreturned entry is a `DatePickerDate` extended with metadata fields, e.g.\n`{ year, month, day, disabled: true, part: 'busy' }`.",
26
+ "description": "A reactive controller that resolves the metadata (currently the disabled state)\nfor the dates shown by the date-picker's `dateMetadataProvider`.\n\nThe provider is called for a range of months and may return an array\nsynchronously or a `Promise`, so results from a server (Flow) or a remote\navailability service can be awaited. The range and each returned entry identify\na date by an ISO 8601 string, e.g. `{ date: '2026-01-01', disabled: true }`.\n\n`ARCHITECTURE.md` in this package records the reasoning behind the request,\ncaching, notification and failure behavior.",
27
27
  "name": "DateMetadataController",
28
28
  "members": [
29
+ {
30
+ "kind": "method",
31
+ "name": "clearCache",
32
+ "description": "Clears the cache and invalidates any in-flight requests."
33
+ },
29
34
  {
30
35
  "kind": "method",
31
36
  "name": "ensureRangeLoaded",
@@ -33,17 +38,17 @@
33
38
  {
34
39
  "name": "startDate",
35
40
  "type": {
36
- "text": "Date"
41
+ "text": "Date | null | undefined"
37
42
  }
38
43
  },
39
44
  {
40
45
  "name": "endDate",
41
46
  "type": {
42
- "text": "Date"
47
+ "text": "Date | null | undefined"
43
48
  }
44
49
  }
45
50
  ],
46
- "description": "Ensures the provider has been consulted for the inclusive range between the\ngiven dates, expanded by a prefetch buffer of months on each side. Months\nthat are already loaded or in flight are skipped, and consecutive missing\nmonths are grouped into a single provider call."
51
+ "description": "Ensures the provider has been consulted for the inclusive range between the\ngiven dates, rounded out to whole blocks of months. Months already loaded or in\nflight are skipped, and the ones left over are requested with a single call.\n\nEach call that finds a missing month issues its own request, so a caller that\nloads on scroll should debounce."
47
52
  },
48
53
  {
49
54
  "kind": "method",
@@ -52,11 +57,11 @@
52
57
  {
53
58
  "name": "date",
54
59
  "type": {
55
- "text": "Date"
60
+ "text": "Date | null | undefined"
56
61
  }
57
62
  }
58
63
  ],
59
- "description": "The metadata resolved for the given date, or `undefined` when the date has\nno metadata or its month has not been resolved yet.",
64
+ "description": "The metadata resolved for the given date, or `undefined` when the date has\nno metadata or its month has not been resolved yet. Returns the entry the\nprovider supplied, which the caller must not modify.",
60
65
  "return": {
61
66
  "type": {
62
67
  "text": "object | undefined"
@@ -66,24 +71,28 @@
66
71
  {
67
72
  "kind": "field",
68
73
  "name": "host",
74
+ "description": "The controller host element.",
75
+ "type": {
76
+ "text": "ReactiveControllerHost & HTMLElement"
77
+ },
69
78
  "default": "host"
70
79
  },
71
80
  {
72
81
  "kind": "method",
73
- "name": "hostDisconnected"
82
+ "name": "hostConnected"
74
83
  },
75
84
  {
76
85
  "kind": "method",
77
- "name": "isDateBlocked",
86
+ "name": "isDateDisabled",
78
87
  "parameters": [
79
88
  {
80
89
  "name": "date",
81
90
  "type": {
82
- "text": "Date"
91
+ "text": "Date | null | undefined"
83
92
  }
84
93
  }
85
94
  ],
86
- "description": "Whether the given date cannot be selected yet: it is disabled by the\nprovider, or its month has not been resolved so its state is still unknown.\nReturns `false` when no provider is set. Used to block selection and to\nrender dates as non-selectable while their month is loading.",
95
+ "description": "Whether the given date is disabled by its metadata.",
87
96
  "return": {
88
97
  "type": {
89
98
  "text": "boolean"
@@ -92,16 +101,8 @@
92
101
  },
93
102
  {
94
103
  "kind": "method",
95
- "name": "isDateDisabled",
96
- "parameters": [
97
- {
98
- "name": "date",
99
- "type": {
100
- "text": "Date"
101
- }
102
- }
103
- ],
104
- "description": "Whether the given date is disabled by the provider. Only returns `true` for\ndates in an already-resolved month.",
104
+ "name": "isLoading",
105
+ "description": "Whether any month range is currently being fetched.",
105
106
  "return": {
106
107
  "type": {
107
108
  "text": "boolean"
@@ -115,11 +116,11 @@
115
116
  {
116
117
  "name": "date",
117
118
  "type": {
118
- "text": "Date"
119
+ "text": "Date | null | undefined"
119
120
  }
120
121
  }
121
122
  ],
122
- "description": "Whether the month containing the given date has been fully resolved.",
123
+ "description": "Whether the provider has answered for the month containing the given date.\nA month whose request failed is not loaded and will be requested again.",
123
124
  "return": {
124
125
  "type": {
125
126
  "text": "boolean"
@@ -127,38 +128,57 @@
127
128
  }
128
129
  },
129
130
  {
130
- "kind": "field",
131
- "name": "loading",
132
- "description": "Whether any month range is currently being fetched.",
131
+ "kind": "method",
132
+ "name": "isMonthPending",
133
+ "parameters": [
134
+ {
135
+ "name": "date",
136
+ "type": {
137
+ "text": "Date | null | undefined"
138
+ }
139
+ }
140
+ ],
141
+ "description": "Whether the month containing the given date is currently being fetched. A month\nthat has not been asked about is not pending, so this reports the same state as\n`isLoading()` does for the whole cache.",
133
142
  "return": {
134
143
  "type": {
135
144
  "text": "boolean"
136
145
  }
137
- },
138
- "readonly": true
146
+ }
139
147
  },
140
148
  {
141
149
  "kind": "field",
142
150
  "name": "provider",
143
151
  "type": {
144
- "text": "null"
152
+ "text": "Function | null"
145
153
  },
146
- "default": "null"
154
+ "default": "null",
155
+ "description": "The provider function, or `null` when none is set."
147
156
  },
148
157
  {
149
158
  "kind": "method",
150
- "name": "reset",
151
- "description": "Clears the cache and invalidates any in-flight requests."
159
+ "name": "setProvider",
160
+ "parameters": [
161
+ {
162
+ "name": "provider",
163
+ "type": {
164
+ "text": "Function | null | undefined"
165
+ }
166
+ }
167
+ ],
168
+ "description": "Sets the provider function and clears the cache. Passing the same provider again\nis a no-op, so callers should keep a stable reference."
152
169
  },
153
170
  {
154
171
  "kind": "method",
155
- "name": "setProvider",
172
+ "name": "subscribe",
156
173
  "parameters": [
157
174
  {
158
- "name": "provider"
175
+ "name": "element",
176
+ "type": {
177
+ "text": "ReactiveElement"
178
+ }
159
179
  }
160
180
  ],
161
- "description": "Sets the provider function and clears the cache. Passing the same provider\nagain is a no-op, so the cache survives unrelated re-renders — callers\nshould therefore keep a stable provider reference rather than passing a new\nfunction on every update, which would otherwise reset the cache and\nre-fetch every visible range."
181
+ "description": "Registers an element to be re-rendered whenever the resolved metadata or the\nloading state changes. The element must render from its bindings, and must not be\nthe one whose own observer triggers a load. It stays registered for the\ncontroller's lifetime."
162
182
  }
163
183
  ]
164
184
  }
@@ -178,6 +198,135 @@
178
198
  "kind": "javascript-module",
179
199
  "path": "src/vaadin-date-picker-helper.js",
180
200
  "declarations": [
201
+ {
202
+ "kind": "function",
203
+ "name": "createDate",
204
+ "parameters": [
205
+ {
206
+ "name": "year",
207
+ "type": {
208
+ "text": "number"
209
+ }
210
+ },
211
+ {
212
+ "name": "month",
213
+ "description": "Zero-based month, may be out of range to shift the year",
214
+ "type": {
215
+ "text": "number"
216
+ }
217
+ },
218
+ {
219
+ "name": "day",
220
+ "description": "May be `0` to select the last day of the previous month",
221
+ "type": {
222
+ "text": "number"
223
+ }
224
+ }
225
+ ],
226
+ "description": "Create a date at midnight in local time. Unlike `new Date(year, month, day)`,\nthis supports years below 100, which the constructor maps into the 20th\ncentury. The month is assigned before the day so that the initial day of month\n(1) always exists in the target month.",
227
+ "return": {
228
+ "type": {
229
+ "text": "Date"
230
+ }
231
+ }
232
+ },
233
+ {
234
+ "kind": "function",
235
+ "name": "firstOfMonth",
236
+ "parameters": [
237
+ {
238
+ "name": "date",
239
+ "type": {
240
+ "text": "!Date"
241
+ }
242
+ }
243
+ ],
244
+ "description": "Get the first day of the month the given date is in.",
245
+ "return": {
246
+ "type": {
247
+ "text": "Date"
248
+ }
249
+ }
250
+ },
251
+ {
252
+ "kind": "function",
253
+ "name": "lastOfMonth",
254
+ "parameters": [
255
+ {
256
+ "name": "date",
257
+ "type": {
258
+ "text": "!Date"
259
+ }
260
+ }
261
+ ],
262
+ "description": "Get the last day of the month the given date is in.",
263
+ "return": {
264
+ "type": {
265
+ "text": "Date"
266
+ }
267
+ }
268
+ },
269
+ {
270
+ "kind": "function",
271
+ "name": "monthIndexOf",
272
+ "parameters": [
273
+ {
274
+ "name": "year",
275
+ "type": {
276
+ "text": "number"
277
+ }
278
+ },
279
+ {
280
+ "name": "month",
281
+ "description": "Zero-based month",
282
+ "type": {
283
+ "text": "number"
284
+ }
285
+ }
286
+ ],
287
+ "description": "Get the index of a month, counted from January of year 0. Reduces a month to a single\ninteger, so a lookup builds no key and two months are adjacent when their indexes are.",
288
+ "return": {
289
+ "type": {
290
+ "text": "number"
291
+ }
292
+ }
293
+ },
294
+ {
295
+ "kind": "function",
296
+ "name": "monthIndex",
297
+ "parameters": [
298
+ {
299
+ "name": "date",
300
+ "type": {
301
+ "text": "!Date"
302
+ }
303
+ }
304
+ ],
305
+ "description": "Get the index of the month the given date is in.",
306
+ "return": {
307
+ "type": {
308
+ "text": "number"
309
+ }
310
+ }
311
+ },
312
+ {
313
+ "kind": "function",
314
+ "name": "monthDate",
315
+ "parameters": [
316
+ {
317
+ "name": "index",
318
+ "type": {
319
+ "text": "number"
320
+ }
321
+ }
322
+ ],
323
+ "description": "Get the first day of the month with the given index, inverting `monthIndexOf`. Counting from\nJanuary of year 0 also inverts negative indexes, since `createDate` normalizes a month outside\n0-11 into the year.",
324
+ "return": {
325
+ "type": {
326
+ "text": "Date"
327
+ }
328
+ }
329
+ },
181
330
  {
182
331
  "kind": "function",
183
332
  "name": "getISOWeekNumber",
@@ -323,6 +472,54 @@
323
472
  }
324
473
  }
325
474
  },
475
+ {
476
+ "kind": "function",
477
+ "name": "dateSelectable",
478
+ "parameters": [
479
+ {
480
+ "name": "date",
481
+ "description": "The date to check",
482
+ "type": {
483
+ "text": "!Date"
484
+ }
485
+ },
486
+ {
487
+ "name": "min",
488
+ "description": "Range start",
489
+ "type": {
490
+ "text": "Date | null"
491
+ }
492
+ },
493
+ {
494
+ "name": "max",
495
+ "description": "Range end",
496
+ "type": {
497
+ "text": "Date | null"
498
+ }
499
+ },
500
+ {
501
+ "name": "isDateDisabled",
502
+ "description": "Callback to check if the date is disabled",
503
+ "type": {
504
+ "text": "function(!DatePickerDate): boolean"
505
+ }
506
+ },
507
+ {
508
+ "name": "controller",
509
+ "description": "The date metadata controller",
510
+ "optional": true,
511
+ "type": {
512
+ "text": "DateMetadataController | null"
513
+ }
514
+ }
515
+ ],
516
+ "description": "Check if the given date can be selected: allowed by `dateAllowed` and not reported as disabled\nby the date metadata controller. This is narrower than `dateAllowed`, which decides what can be\nfocused: a disabled date is still focusable, it just cannot be selected.",
517
+ "return": {
518
+ "type": {
519
+ "text": "boolean"
520
+ }
521
+ }
522
+ },
326
523
  {
327
524
  "kind": "function",
328
525
  "name": "getClosestDate",
@@ -419,7 +616,7 @@
419
616
  }
420
617
  }
421
618
  ],
422
- "description": "Parse date string of one of the following date formats:\n- ISO 8601 `\"YYYY-MM-DD\"`\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
619
+ "description": "Parse date string of one of the following date formats:\n- ISO 8601 `\"YYYY-MM-DD\"`\n- Extended ISO 8601 with a signed year, e.g. `\"+012026-MM-DD\"` or `\"-0001-MM-DD\"`\n\nA date that does not exist, such as `\"2026-02-30\"`, is not parsed. Building it would carry the\nsurplus into the next month or year and answer with a date that was never asked for.",
423
620
  "return": {
424
621
  "type": {
425
622
  "text": "Date"
@@ -438,7 +635,7 @@
438
635
  }
439
636
  }
440
637
  ],
441
- "description": "Parse date string of one of the following date formats:\n- ISO 8601 `\"YYYY-MM-DD\"`\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`\n\nUses UTC date components to allow handling date instances independently of\nthe system time-zone.",
638
+ "description": "Parse date string of one of the following date formats:\n- ISO 8601 `\"YYYY-MM-DD\"`\n- Extended ISO 8601 with a signed year, e.g. `\"+012026-MM-DD\"` or `\"-0001-MM-DD\"`\n\nUses UTC date components to allow handling date instances independently of\nthe system time-zone.\n\nA date that does not exist, such as `\"2026-02-30\"`, is not parsed, as in `parseDate`.",
442
639
  "return": {
443
640
  "type": {
444
641
  "text": "Date"
@@ -485,6 +682,54 @@
485
682
  }
486
683
  ],
487
684
  "exports": [
685
+ {
686
+ "kind": "js",
687
+ "name": "createDate",
688
+ "declaration": {
689
+ "name": "createDate",
690
+ "module": "src/vaadin-date-picker-helper.js"
691
+ }
692
+ },
693
+ {
694
+ "kind": "js",
695
+ "name": "firstOfMonth",
696
+ "declaration": {
697
+ "name": "firstOfMonth",
698
+ "module": "src/vaadin-date-picker-helper.js"
699
+ }
700
+ },
701
+ {
702
+ "kind": "js",
703
+ "name": "lastOfMonth",
704
+ "declaration": {
705
+ "name": "lastOfMonth",
706
+ "module": "src/vaadin-date-picker-helper.js"
707
+ }
708
+ },
709
+ {
710
+ "kind": "js",
711
+ "name": "monthIndexOf",
712
+ "declaration": {
713
+ "name": "monthIndexOf",
714
+ "module": "src/vaadin-date-picker-helper.js"
715
+ }
716
+ },
717
+ {
718
+ "kind": "js",
719
+ "name": "monthIndex",
720
+ "declaration": {
721
+ "name": "monthIndex",
722
+ "module": "src/vaadin-date-picker-helper.js"
723
+ }
724
+ },
725
+ {
726
+ "kind": "js",
727
+ "name": "monthDate",
728
+ "declaration": {
729
+ "name": "monthDate",
730
+ "module": "src/vaadin-date-picker-helper.js"
731
+ }
732
+ },
488
733
  {
489
734
  "kind": "js",
490
735
  "name": "getISOWeekNumber",
@@ -533,6 +778,14 @@
533
778
  "module": "src/vaadin-date-picker-helper.js"
534
779
  }
535
780
  },
781
+ {
782
+ "kind": "js",
783
+ "name": "dateSelectable",
784
+ "declaration": {
785
+ "name": "dateSelectable",
786
+ "module": "src/vaadin-date-picker-helper.js"
787
+ }
788
+ },
536
789
  {
537
790
  "kind": "js",
538
791
  "name": "getClosestDate",
@@ -654,7 +907,7 @@
654
907
  {
655
908
  "kind": "method",
656
909
  "name": "clearCache",
657
- "description": "Clears the cached date metadata and reloads it from `dateMetadataProvider`. Call this when\nthe data behind the provider has changed (for example a date became booked) so the calendar\nreflects it, without having to replace the provider function.\n\nThe visible range is reloaded when the overlay is open, and the selected value is\nre-validated once its month resolves."
910
+ "description": "Clears the `dateMetadataProvider` cache and reloads the date metadata."
658
911
  },
659
912
  {
660
913
  "kind": "method",
@@ -666,9 +919,9 @@
666
919
  "name": "dateMetadataProvider",
667
920
  "privacy": "public",
668
921
  "type": {
669
- "text": "function(DatePickerDateRange): Array<DatePickerDateMetadata> | Promise<Array<DatePickerDateMetadata>> | undefined"
922
+ "text": "DatePickerDateMetadataProvider | null | undefined"
670
923
  },
671
- "description": "A batch function that fetches metadata for a range of dates the calendar is about to\nrender. It receives a `DatePickerDateRange` object (`{ start, end }` of `DatePickerDate`)\nand returns, or resolves with, an array of metadata objects — a `DatePickerDate` extended\nwith metadata fields such as `disabled` and custom `part` names, e.g.\n`{ year, month, day, disabled: true, part: 'busy' }` — for the dates that have metadata\nwithin that range.\n\nUnlike `isDateDisabled`, which is called once per date, this function is called for a\nrange of dates at a time, and again as the calendar renders further dates. The size of\nthe range is decided by the calendar and may span multiple months. It may return a\n`Promise`, in which case the affected dates render in a non-selectable pending state\nuntil it resolves.\n\n`disabled` from the metadata is combined with `min`, `max` and `isDateDisabled`: a date\nis disabled if it is out of the min/max range, or `isDateDisabled` returns `true`, or its\nmetadata marks it disabled. `part` names are added to the date cell's `part` attribute so\na theme can style specific dates via `::part()`.\n\nBoth `disabled` and `part` are returned by this one function, rather than by separate\ngenerators, so a single backend query (for example in Flow) can answer both at once\ninstead of being split into two passes over the same data.\n\nKeep a stable reference to the function. Assigning a new function resets the internal\ncache and re-fetches every visible range. To reload after the underlying data changes\nwhile keeping the same function, call `clearCache()`.",
924
+ "description": "A function that provides metadata for the dates the calendar is about to render: whether they\nare disabled, and CSS `part` names for styling from outside using the `::part()` selector.\nUnlike `isDateDisabled`, which is called once per date, the metadata provider is called for\na range of dates at a time, and again as the calendar renders further dates.\n\nIt receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects\nfor the dates in that range that have metadata. It can return a `Promise` to load the metadata\nasynchronously, and `null` or `undefined` when no date in the range has metadata.\n\nThe returned array has the following structure:\n\n```js\n[\n // The date is an ISO 8601 string.\n { date: '2026-01-01', disabled: true },\n\n // Adds a custom part name to the date.\n { date: '2026-01-02', part: 'busy' },\n]\n```\n\nA date is disabled if its metadata marks it disabled, or `isDateDisabled` returns `true`, or\nit is outside `min` and `max`. Disabled dates are not selectable, and typing a disabled date in\nthe field makes it invalid. The provider does not affect which date is focused when opening the\noverlay. Use `initialPosition` property to provide a selectable date.\n\nWhile a returned `Promise` is pending, the dates it covers are not disabled yet and render with\nthe `loading` part. If the function throws or rejects, corresponding dates are requested again\nthe next time the user navigates.\n\nThe provider is used for validation also when the overlay is closed. Date is considered valid\nwhile the provider is pending, and is re-validated again after the metadata is loaded.\n\nKeep a stable reference to the function: assigning a new one clears the cache and re-fetches\nvisible range. Call `clearCache()` to re-fetch when the data behind the same function changed.",
672
925
  "attribute": "date-metadata-provider"
673
926
  },
674
927
  {
@@ -692,7 +945,7 @@
692
945
  "type": {
693
946
  "text": "Object"
694
947
  },
695
- "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n\n```js\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // Used for adjusting the year value when parsing dates with short years.\n // The year values between 0 and 99 are evaluated and adjusted.\n // Example: for a referenceDate of 1970-10-30;\n // dateToBeParsed: 40-10-30, result: 1940-10-30\n // dateToBeParsed: 80-10-30, result: 1980-10-30\n // dateToBeParsed: 10-10-30, result: 2010-10-30\n // Supported date format: ISO 8601 `\"YYYY-MM-DD\"` (default)\n // The default value is the current date.\n referenceDate: '',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
948
+ "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n\n```js\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // Accessible name of the overlay content, announced by screen readers\n // when the overlay opens.\n dialogAccessibleName: 'Calendar',\n\n // Used for adjusting the year value when parsing dates with short years.\n // The year values between 0 and 99 are evaluated and adjusted.\n // Example: for a referenceDate of 1970-10-30;\n // dateToBeParsed: 40-10-30, result: 1940-10-30\n // dateToBeParsed: 80-10-30, result: 1980-10-30\n // dateToBeParsed: 10-10-30, result: 2010-10-30\n // Supported date format: ISO 8601 `\"YYYY-MM-DD\"` (default)\n // The default value is the current date.\n referenceDate: '',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
696
949
  "attribute": "i18n",
697
950
  "inheritedFrom": {
698
951
  "name": "I18nMixin",
@@ -730,7 +983,7 @@
730
983
  "type": {
731
984
  "text": "function(DatePickerDate): boolean | undefined"
732
985
  },
733
- "description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.",
986
+ "description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.\n\nThe function is called once per date and has to answer synchronously. Use\n`dateMetadataProvider` when the answer has to be loaded first, or when dates also need\ncustom part names. A date is disabled when either of the two disables it.",
734
987
  "attribute": "is-date-disabled"
735
988
  },
736
989
  {
@@ -884,6 +1137,14 @@
884
1137
  "package": "@vaadin/a11y-base/src/delegate-focus-mixin.js"
885
1138
  }
886
1139
  },
1140
+ {
1141
+ "name": "date-metadata-provider",
1142
+ "type": {
1143
+ "text": "DatePickerDateMetadataProvider | null | undefined"
1144
+ },
1145
+ "description": "A function that provides metadata for the dates the calendar is about to render: whether they\nare disabled, and CSS `part` names for styling from outside using the `::part()` selector.\nUnlike `isDateDisabled`, which is called once per date, the metadata provider is called for\na range of dates at a time, and again as the calendar renders further dates.\n\nIt receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects\nfor the dates in that range that have metadata. It can return a `Promise` to load the metadata\nasynchronously, and `null` or `undefined` when no date in the range has metadata.\n\nThe returned array has the following structure:\n\n```js\n[\n // The date is an ISO 8601 string.\n { date: '2026-01-01', disabled: true },\n\n // Adds a custom part name to the date.\n { date: '2026-01-02', part: 'busy' },\n]\n```\n\nA date is disabled if its metadata marks it disabled, or `isDateDisabled` returns `true`, or\nit is outside `min` and `max`. Disabled dates are not selectable, and typing a disabled date in\nthe field makes it invalid. The provider does not affect which date is focused when opening the\noverlay. Use `initialPosition` property to provide a selectable date.\n\nWhile a returned `Promise` is pending, the dates it covers are not disabled yet and render with\nthe `loading` part. If the function throws or rejects, corresponding dates are requested again\nthe next time the user navigates.\n\nThe provider is used for validation also when the overlay is closed. Date is considered valid\nwhile the provider is pending, and is re-validated again after the metadata is loaded.\n\nKeep a stable reference to the function: assigning a new one clears the cache and re-fetches\nvisible range. Call `clearCache()` to re-fetch when the data behind the same function changed.",
1146
+ "fieldName": "dateMetadataProvider"
1147
+ },
887
1148
  {
888
1149
  "name": "disabled",
889
1150
  "type": {
@@ -933,7 +1194,7 @@
933
1194
  "type": {
934
1195
  "text": "function(DatePickerDate): boolean | undefined"
935
1196
  },
936
- "description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.",
1197
+ "description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.\n\nThe function is called once per date and has to answer synchronously. Use\n`dateMetadataProvider` when the answer has to be loaded first, or when dates also need\ncustom part names. A date is disabled when either of the two disables it.",
937
1198
  "fieldName": "isDateDisabled"
938
1199
  },
939
1200
  {
@@ -1068,14 +1329,9 @@
1068
1329
  "attribute": "calendars"
1069
1330
  },
1070
1331
  {
1071
- "kind": "field",
1072
- "name": "dateMetadataProvider",
1073
- "privacy": "public",
1074
- "type": {
1075
- "text": "function(DatePickerDateRange): Array<DatePickerDateMetadata> | Promise<Array<DatePickerDateMetadata>> | undefined"
1076
- },
1077
- "description": "A batch function that fetches metadata (disabled state, custom part names, ...) for a\nrange of dates the calendar is about to render. Returns, or resolves with, an array of\n`DatePickerDateMetadata` objects.",
1078
- "attribute": "date-metadata-provider"
1332
+ "kind": "method",
1333
+ "name": "cancelLoadVisibleDateMetadata",
1334
+ "description": "Drops a date metadata load that navigating has scheduled but that has not run yet."
1079
1335
  },
1080
1336
  {
1081
1337
  "kind": "field",
@@ -1165,14 +1421,9 @@
1165
1421
  "attribute": "label"
1166
1422
  },
1167
1423
  {
1168
- "kind": "field",
1169
- "name": "loading",
1170
- "privacy": "public",
1171
- "type": {
1172
- "text": "boolean"
1173
- },
1174
- "description": "Reflected while data is being loaded, so the overlay can show a loading spinner.\nCurrently set while the date metadata provider is resolving.",
1175
- "attribute": "loading"
1424
+ "kind": "method",
1425
+ "name": "loadVisibleDateMetadata",
1426
+ "description": "Requests the date metadata for the months currently rendered. Months already loaded or in flight\nare skipped."
1176
1427
  },
1177
1428
  {
1178
1429
  "kind": "field",
@@ -1253,6 +1504,11 @@
1253
1504
  },
1254
1505
  "attribute": "show-week-numbers"
1255
1506
  },
1507
+ {
1508
+ "kind": "method",
1509
+ "name": "updateTodayButton",
1510
+ "description": "Applies the today button's label and whether today can be selected."
1511
+ },
1256
1512
  {
1257
1513
  "kind": "field",
1258
1514
  "name": "years",
@@ -1317,14 +1573,6 @@
1317
1573
  "description": "Input label",
1318
1574
  "fieldName": "label"
1319
1575
  },
1320
- {
1321
- "name": "loading",
1322
- "type": {
1323
- "text": "boolean"
1324
- },
1325
- "description": "Reflected while data is being loaded, so the overlay can show a loading spinner.\nCurrently set while the date metadata provider is resolving.",
1326
- "fieldName": "loading"
1327
- },
1328
1576
  {
1329
1577
  "name": "scroll-duration",
1330
1578
  "type": {
@@ -1374,6 +1622,20 @@
1374
1622
  "description": "",
1375
1623
  "name": "DatePickerOverlayMixin",
1376
1624
  "members": [
1625
+ {
1626
+ "kind": "field",
1627
+ "name": "autofocus",
1628
+ "privacy": "public",
1629
+ "type": {
1630
+ "text": "boolean"
1631
+ },
1632
+ "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
1633
+ "attribute": "autofocus",
1634
+ "inheritedFrom": {
1635
+ "name": "OverlayFocusMixin",
1636
+ "package": "@vaadin/overlay/src/vaadin-overlay-focus-mixin.js"
1637
+ }
1638
+ },
1377
1639
  {
1378
1640
  "kind": "method",
1379
1641
  "name": "bringToFront",
@@ -1406,7 +1668,7 @@
1406
1668
  "type": {
1407
1669
  "text": "boolean"
1408
1670
  },
1409
- "description": "When true, opening the overlay moves focus to the first focusable child,\nor to the overlay part with tabindex if there are no focusable children.",
1671
+ "description": "Set to true to move focus into the overlay automatically on open\nand keep it inside: Tab and Shift+Tab cycle through the overlay's\ncontent until the overlay is closed.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
1410
1672
  "attribute": "focus-trap",
1411
1673
  "inheritedFrom": {
1412
1674
  "name": "OverlayFocusMixin",
@@ -1673,12 +1935,24 @@
1673
1935
  }
1674
1936
  ],
1675
1937
  "attributes": [
1938
+ {
1939
+ "name": "autofocus",
1940
+ "type": {
1941
+ "text": "boolean"
1942
+ },
1943
+ "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
1944
+ "fieldName": "autofocus",
1945
+ "inheritedFrom": {
1946
+ "name": "OverlayFocusMixin",
1947
+ "package": "@vaadin/overlay/src/vaadin-overlay-focus-mixin.js"
1948
+ }
1949
+ },
1676
1950
  {
1677
1951
  "name": "focus-trap",
1678
1952
  "type": {
1679
1953
  "text": "boolean"
1680
1954
  },
1681
- "description": "When true, opening the overlay moves focus to the first focusable child,\nor to the overlay part with tabindex if there are no focusable children.",
1955
+ "description": "Set to true to move focus into the overlay automatically on open\nand keep it inside: Tab and Shift+Tab cycle through the overlay's\ncontent until the overlay is closed.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
1682
1956
  "fieldName": "focusTrap",
1683
1957
  "inheritedFrom": {
1684
1958
  "name": "OverlayFocusMixin",
@@ -1883,9 +2157,23 @@
1883
2157
  "declarations": [
1884
2158
  {
1885
2159
  "kind": "class",
1886
- "description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and buttons\n`field-button` | Set on both clear and toggle buttons\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button` | The toggle button\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`opened` | Set when the overlay is opened\n`week-numbers` | Set when week numbers are shown in the calendar\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar` | Toolbar with slotted buttons\n`loader` | Loading spinner shown while data is being loaded, for example while the disabled dates provider resolves\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute | Description\n----------------|-------------------------------------------------\n`desktop` | Set when the overlay content is in desktop mode\n`fullscreen` | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n`loading` | Set while data is being loaded, for example while the disabled dates provider resolves\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`month-header` | Month title\n`weekdays` | Weekday container\n`weekday` | Weekday element\n`week-numbers` | Week numbers container\n`week-number` | Week number element\n`date` | Date element\n`disabled` | Disabled date element\n`pending` | Date element in a month whose date metadata provider result is still loading\n`focused` | Focused date element\n`selected` | Selected date element\n`today` | Date element corresponding to the current day\n`past` | Date element corresponding to the date in the past\n`future` | Date element corresponding to the date in the future\n\nCustom part names returned per date by `dateMetadataProvider` (the `part` metadata field) are\nalso added to the matching date elements, so specific dates can be styled with\n`vaadin-month-calendar::part(<name>)`.\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`year-number` | Year number\n`year-separator` | Year separator\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | unparsable-change",
2160
+ "description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and buttons\n`field-button` | Set on both clear and toggle buttons\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button` | The toggle button\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`opened` | Set when the overlay is opened\n`week-numbers` | Set when week numbers are shown in the calendar\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------------------------|\n| `--vaadin-date-picker-date-border-radius` |\n| `--vaadin-date-picker-date-disabled-color` |\n| `--vaadin-date-picker-date-height` |\n| `--vaadin-date-picker-date-selected-background` |\n| `--vaadin-date-picker-date-selected-color` |\n| `--vaadin-date-picker-date-today-color` |\n| `--vaadin-date-picker-date-width` |\n| `--vaadin-date-picker-month-header-color` |\n| `--vaadin-date-picker-month-header-font-size` |\n| `--vaadin-date-picker-month-header-font-weight` |\n| `--vaadin-date-picker-month-padding` |\n| `--vaadin-date-picker-overlay-max-height` |\n| `--vaadin-date-picker-overlay-width` |\n| `--vaadin-date-picker-toolbar-padding` |\n| `--vaadin-date-picker-week-divider-color` |\n| `--vaadin-date-picker-week-number-color` |\n| `--vaadin-date-picker-week-number-font-size` |\n| `--vaadin-date-picker-weekday-color` |\n| `--vaadin-date-picker-weekday-font-size` |\n| `--vaadin-date-picker-weekday-font-weight` |\n| `--vaadin-date-picker-year-scroller-background` |\n| `--vaadin-date-picker-year-scroller-border-color` |\n| `--vaadin-date-picker-year-scroller-current-year-color` |\n| `--vaadin-date-picker-year-scroller-width` |\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar` | Toolbar with slotted buttons\n`loader` | Loading spinner shown while the date metadata provider is resolving\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute | Description\n----------------|-------------------------------------------------\n`desktop` | Set when the overlay content is in desktop mode\n`fullscreen` | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n`loading` | Set while the date metadata provider is resolving\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`month-header` | Month title\n`weekdays` | Weekday container\n`weekday` | Weekday element\n`week-numbers` | Week numbers container\n`week-number` | Week number element\n`date` | Date element\n`disabled` | Disabled date element\n`loading` | Date element in a month whose metadata is currently being fetched\n`focused` | Focused date element\n`selected` | Selected date element\n`today` | Date element corresponding to the current day\n`past` | Date element corresponding to the date in the past\n`future` | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`year-number` | Year number\n`year-separator` | Year separator\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | unparsable-change",
1887
2161
  "name": "DatePicker",
1888
2162
  "members": [
2163
+ {
2164
+ "kind": "field",
2165
+ "name": "accessibleDescriptionRef",
2166
+ "privacy": "public",
2167
+ "type": {
2168
+ "text": "string"
2169
+ },
2170
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
2171
+ "attribute": "accessible-description-ref",
2172
+ "inheritedFrom": {
2173
+ "name": "FieldMixin",
2174
+ "package": "@vaadin/field-base/src/field-mixin.js"
2175
+ }
2176
+ },
1889
2177
  {
1890
2178
  "kind": "field",
1891
2179
  "name": "accessibleName",
@@ -1893,7 +2181,7 @@
1893
2181
  "type": {
1894
2182
  "text": "string"
1895
2183
  },
1896
- "description": "String used to label the component to screen reader users.",
2184
+ "description": "String used to label the component for screen reader users.",
1897
2185
  "attribute": "accessible-name",
1898
2186
  "inheritedFrom": {
1899
2187
  "name": "FieldMixin",
@@ -1907,7 +2195,7 @@
1907
2195
  "type": {
1908
2196
  "text": "string"
1909
2197
  },
1910
- "description": "Id of the element used as label of the component to screen reader users.",
2198
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
1911
2199
  "attribute": "accessible-name-ref",
1912
2200
  "inheritedFrom": {
1913
2201
  "name": "FieldMixin",
@@ -2010,7 +2298,7 @@
2010
2298
  {
2011
2299
  "kind": "method",
2012
2300
  "name": "clearCache",
2013
- "description": "Clears the cached date metadata and reloads it from `dateMetadataProvider`. Call this when\nthe data behind the provider has changed (for example a date became booked) so the calendar\nreflects it, without having to replace the provider function.\n\nThe visible range is reloaded when the overlay is open, and the selected value is\nre-validated once its month resolves.",
2301
+ "description": "Clears the `dateMetadataProvider` cache and reloads the date metadata.",
2014
2302
  "inheritedFrom": {
2015
2303
  "name": "DatePickerMixin",
2016
2304
  "module": "src/vaadin-date-picker-mixin.js"
@@ -2030,9 +2318,9 @@
2030
2318
  "name": "dateMetadataProvider",
2031
2319
  "privacy": "public",
2032
2320
  "type": {
2033
- "text": "function(DatePickerDateRange): Array<DatePickerDateMetadata> | Promise<Array<DatePickerDateMetadata>> | undefined"
2321
+ "text": "DatePickerDateMetadataProvider | null | undefined"
2034
2322
  },
2035
- "description": "A batch function that fetches metadata for a range of dates the calendar is about to\nrender. It receives a `DatePickerDateRange` object (`{ start, end }` of `DatePickerDate`)\nand returns, or resolves with, an array of metadata objects — a `DatePickerDate` extended\nwith metadata fields such as `disabled` and custom `part` names, e.g.\n`{ year, month, day, disabled: true, part: 'busy' }` — for the dates that have metadata\nwithin that range.\n\nUnlike `isDateDisabled`, which is called once per date, this function is called for a\nrange of dates at a time, and again as the calendar renders further dates. The size of\nthe range is decided by the calendar and may span multiple months. It may return a\n`Promise`, in which case the affected dates render in a non-selectable pending state\nuntil it resolves.\n\n`disabled` from the metadata is combined with `min`, `max` and `isDateDisabled`: a date\nis disabled if it is out of the min/max range, or `isDateDisabled` returns `true`, or its\nmetadata marks it disabled. `part` names are added to the date cell's `part` attribute so\na theme can style specific dates via `::part()`.\n\nBoth `disabled` and `part` are returned by this one function, rather than by separate\ngenerators, so a single backend query (for example in Flow) can answer both at once\ninstead of being split into two passes over the same data.\n\nKeep a stable reference to the function. Assigning a new function resets the internal\ncache and re-fetches every visible range. To reload after the underlying data changes\nwhile keeping the same function, call `clearCache()`.",
2323
+ "description": "A function that provides metadata for the dates the calendar is about to render: whether they\nare disabled, and CSS `part` names for styling from outside using the `::part()` selector.\nUnlike `isDateDisabled`, which is called once per date, the metadata provider is called for\na range of dates at a time, and again as the calendar renders further dates.\n\nIt receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects\nfor the dates in that range that have metadata. It can return a `Promise` to load the metadata\nasynchronously, and `null` or `undefined` when no date in the range has metadata.\n\nThe returned array has the following structure:\n\n```js\n[\n // The date is an ISO 8601 string.\n { date: '2026-01-01', disabled: true },\n\n // Adds a custom part name to the date.\n { date: '2026-01-02', part: 'busy' },\n]\n```\n\nA date is disabled if its metadata marks it disabled, or `isDateDisabled` returns `true`, or\nit is outside `min` and `max`. Disabled dates are not selectable, and typing a disabled date in\nthe field makes it invalid. The provider does not affect which date is focused when opening the\noverlay. Use `initialPosition` property to provide a selectable date.\n\nWhile a returned `Promise` is pending, the dates it covers are not disabled yet and render with\nthe `loading` part. If the function throws or rejects, corresponding dates are requested again\nthe next time the user navigates.\n\nThe provider is used for validation also when the overlay is closed. Date is considered valid\nwhile the provider is pending, and is re-validated again after the metadata is loaded.\n\nKeep a stable reference to the function: assigning a new one clears the cache and re-fetches\nvisible range. Call `clearCache()` to re-fetch when the data behind the same function changed.",
2036
2324
  "attribute": "date-metadata-provider",
2037
2325
  "inheritedFrom": {
2038
2326
  "name": "DatePickerMixin",
@@ -2088,7 +2376,7 @@
2088
2376
  "type": {
2089
2377
  "text": "Object"
2090
2378
  },
2091
- "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n\n```js\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // Used for adjusting the year value when parsing dates with short years.\n // The year values between 0 and 99 are evaluated and adjusted.\n // Example: for a referenceDate of 1970-10-30;\n // dateToBeParsed: 40-10-30, result: 1940-10-30\n // dateToBeParsed: 80-10-30, result: 1980-10-30\n // dateToBeParsed: 10-10-30, result: 2010-10-30\n // Supported date format: ISO 8601 `\"YYYY-MM-DD\"` (default)\n // The default value is the current date.\n referenceDate: '',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
2379
+ "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n\n```js\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // Accessible name of the overlay content, announced by screen readers\n // when the overlay opens.\n dialogAccessibleName: 'Calendar',\n\n // Used for adjusting the year value when parsing dates with short years.\n // The year values between 0 and 99 are evaluated and adjusted.\n // Example: for a referenceDate of 1970-10-30;\n // dateToBeParsed: 40-10-30, result: 1940-10-30\n // dateToBeParsed: 80-10-30, result: 1980-10-30\n // dateToBeParsed: 10-10-30, result: 2010-10-30\n // Supported date format: ISO 8601 `\"YYYY-MM-DD\"` (default)\n // The default value is the current date.\n referenceDate: '',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
2092
2380
  "attribute": "i18n",
2093
2381
  "inheritedFrom": {
2094
2382
  "name": "I18nMixin",
@@ -2130,7 +2418,7 @@
2130
2418
  "type": {
2131
2419
  "text": "function(DatePickerDate): boolean | undefined"
2132
2420
  },
2133
- "description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.",
2421
+ "description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.\n\nThe function is called once per date and has to answer synchronously. Use\n`dateMetadataProvider` when the answer has to be loaded first, or when dates also need\ncustom part names. A date is disabled when either of the two disables it.",
2134
2422
  "attribute": "is-date-disabled",
2135
2423
  "inheritedFrom": {
2136
2424
  "name": "DatePickerMixin",
@@ -2382,12 +2670,24 @@
2382
2670
  }
2383
2671
  ],
2384
2672
  "attributes": [
2673
+ {
2674
+ "name": "accessible-description-ref",
2675
+ "type": {
2676
+ "text": "string"
2677
+ },
2678
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
2679
+ "fieldName": "accessibleDescriptionRef",
2680
+ "inheritedFrom": {
2681
+ "name": "FieldMixin",
2682
+ "package": "@vaadin/field-base/src/field-mixin.js"
2683
+ }
2684
+ },
2385
2685
  {
2386
2686
  "name": "accessible-name",
2387
2687
  "type": {
2388
2688
  "text": "string"
2389
2689
  },
2390
- "description": "String used to label the component to screen reader users.",
2690
+ "description": "String used to label the component for screen reader users.",
2391
2691
  "fieldName": "accessibleName",
2392
2692
  "inheritedFrom": {
2393
2693
  "name": "FieldMixin",
@@ -2399,7 +2699,7 @@
2399
2699
  "type": {
2400
2700
  "text": "string"
2401
2701
  },
2402
- "description": "Id of the element used as label of the component to screen reader users.",
2702
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
2403
2703
  "fieldName": "accessibleNameRef",
2404
2704
  "inheritedFrom": {
2405
2705
  "name": "FieldMixin",
@@ -2466,6 +2766,18 @@
2466
2766
  "package": "@vaadin/field-base/src/clear-button-mixin.js"
2467
2767
  }
2468
2768
  },
2769
+ {
2770
+ "name": "date-metadata-provider",
2771
+ "type": {
2772
+ "text": "DatePickerDateMetadataProvider | null | undefined"
2773
+ },
2774
+ "description": "A function that provides metadata for the dates the calendar is about to render: whether they\nare disabled, and CSS `part` names for styling from outside using the `::part()` selector.\nUnlike `isDateDisabled`, which is called once per date, the metadata provider is called for\na range of dates at a time, and again as the calendar renders further dates.\n\nIt receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects\nfor the dates in that range that have metadata. It can return a `Promise` to load the metadata\nasynchronously, and `null` or `undefined` when no date in the range has metadata.\n\nThe returned array has the following structure:\n\n```js\n[\n // The date is an ISO 8601 string.\n { date: '2026-01-01', disabled: true },\n\n // Adds a custom part name to the date.\n { date: '2026-01-02', part: 'busy' },\n]\n```\n\nA date is disabled if its metadata marks it disabled, or `isDateDisabled` returns `true`, or\nit is outside `min` and `max`. Disabled dates are not selectable, and typing a disabled date in\nthe field makes it invalid. The provider does not affect which date is focused when opening the\noverlay. Use `initialPosition` property to provide a selectable date.\n\nWhile a returned `Promise` is pending, the dates it covers are not disabled yet and render with\nthe `loading` part. If the function throws or rejects, corresponding dates are requested again\nthe next time the user navigates.\n\nThe provider is used for validation also when the overlay is closed. Date is considered valid\nwhile the provider is pending, and is re-validated again after the metadata is loaded.\n\nKeep a stable reference to the function: assigning a new one clears the cache and re-fetches\nvisible range. Call `clearCache()` to re-fetch when the data behind the same function changed.",
2775
+ "fieldName": "dateMetadataProvider",
2776
+ "inheritedFrom": {
2777
+ "name": "DatePickerMixin",
2778
+ "module": "src/vaadin-date-picker-mixin.js"
2779
+ }
2780
+ },
2469
2781
  {
2470
2782
  "name": "disabled",
2471
2783
  "type": {
@@ -2543,7 +2855,7 @@
2543
2855
  "type": {
2544
2856
  "text": "function(DatePickerDate): boolean | undefined"
2545
2857
  },
2546
- "description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.",
2858
+ "description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.\n\nThe function is called once per date and has to answer synchronously. Use\n`dateMetadataProvider` when the answer has to be loaded first, or when dates also need\ncustom part names. A date is disabled when either of the two disables it.",
2547
2859
  "fieldName": "isDateDisabled",
2548
2860
  "inheritedFrom": {
2549
2861
  "name": "DatePickerMixin",