timepicker-ui-mcp 1.0.2 → 2.0.0

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 (17) hide show
  1. package/README.md +42 -32
  2. package/build/content.js +122 -71
  3. package/build/data.js +62 -12
  4. package/build/generated/css-classes.json +393 -67
  5. package/build/generated/css-variables.json +1187 -772
  6. package/build/generated/events.json +456 -409
  7. package/build/generated/meta.json +5 -0
  8. package/build/generated/migration-v5.json +190 -0
  9. package/build/generated/options.json +962 -823
  10. package/build/generated/themes.json +1412 -1412
  11. package/build/generated/troubleshooting.json +234 -0
  12. package/build/generated.js +9 -1
  13. package/build/index.js +571 -358
  14. package/build/search.js +117 -0
  15. package/build/snippet.js +7 -1
  16. package/build/theme.js +40 -17
  17. package/package.json +6 -5
package/build/generated/options.json CHANGED
@@ -1,823 +1,962 @@
1
- {
2
- "clock": {
3
- "interface": "ClockOptions",
4
- "options": [
5
- {
6
- "name": "type",
7
- "optional": true,
8
- "type": "'12h' | '24h' | 'auto'",
9
- "description": "Clock format. `auto` picks 12h or 24h from the browser locale when the picker is created or its options are set.",
10
- "default": "\"12h\""
11
- },
12
- {
13
- "name": "incrementHours",
14
- "optional": true,
15
- "type": "number",
16
- "description": "Step between selectable hours on the clock, the wheel and the hour field's arrow keys. Use a divisor of 12: 1, 2, 3, 4 or 6.",
17
- "default": "1"
18
- },
19
- {
20
- "name": "incrementMinutes",
21
- "optional": true,
22
- "type": "number",
23
- "description": "Set increment for minutes (1, 5, 10, 15, etc.)",
24
- "default": "1"
25
- },
26
- {
27
- "name": "autoSwitchToMinutes",
28
- "optional": true,
29
- "type": "boolean",
30
- "description": "Automatically switch to minutes after selecting hour",
31
- "default": "true"
32
- },
33
- {
34
- "name": "showSeconds",
35
- "optional": true,
36
- "type": "boolean",
37
- "description": "Show a seconds field, wheel column and clock face (HH:MM:SS)",
38
- "default": "false"
39
- },
40
- {
41
- "name": "incrementSeconds",
42
- "optional": true,
43
- "type": "1 | 5 | 10 | 15 | 20 | 30",
44
- "description": "Set increment for seconds: 1, 5, 10, 15, 20 or 30",
45
- "default": "1"
46
- },
47
- {
48
- "name": "autoSwitchToSeconds",
49
- "optional": true,
50
- "type": "boolean",
51
- "description": "Automatically switch from minutes to seconds after a minute is picked on the clock.\r\nOnly used with `showSeconds`.",
52
- "default": "true"
53
- },
54
- {
55
- "name": "smoothHourSnap",
56
- "optional": true,
57
- "type": "boolean",
58
- "description": "Enable smooth hour snapping with animation",
59
- "default": "true"
60
- },
61
- {
62
- "name": "discreteHourJump",
63
- "optional": true,
64
- "type": "boolean",
65
- "description": "Move the hour hand from hour to hour while dragging instead of following the pointer.",
66
- "default": "false"
67
- },
68
- {
69
- "name": "disabledTime",
70
- "optional": true,
71
- "type": "{ minutes?: Array<string | number>; hours?: Array<string | number>; /** * @description Seconds (0-59) disabled in every minute. Used with `showSeconds`. */ seconds?: Array<string | number>; /** * @description Inclusive ranges. Edges: 'HH:MM' or 'HH:MM:SS' (24h), 'H:MM[:SS] AM|PM' (12h). * An edge without seconds covers its whole minute. * When set, the `hours`, `minutes` and `seconds` lists are ignored. */ ranges?: string | string[]; /** * @description Inclusive ranges. Edges: 'HH:MM' or 'HH:MM:SS' (24h), 'H:MM[:SS] AM|PM' (12h). * An edge without seconds covers its whole minute. * When set, the `hours`, `minutes` and `seconds` lists are ignored. * @deprecated Use `ranges`. Removed in 5.0. */ interval?: string | string[]; }",
72
- "description": "Disable specific hours/minutes/seconds or time ranges",
73
- "example": "disabledTime: {\r\n minutes: [1, 2, 4, 5, 55, 23, \"22\", \"38\"],\r\n hours: [1, \"3\", \"5\", 8],\r\n seconds: [0, 30]\r\n}\r\n// or time ranges instead: the hours, minutes and seconds lists are ignored when ranges is set\r\ndisabledTime: {\r\n ranges: [\"10:00 AM - 12:00 PM\", \"5:00:30 PM - 8:00 PM\"]\r\n}"
74
- },
75
- {
76
- "name": "defaultTime",
77
- "optional": true,
78
- "type": "'now' | { time?: Date | 'now'; updateInput?: boolean }",
79
- "description": "Time the picker shows while the input is empty. `'now'` shows the current time and also writes it to the input when the picker is created, replacing a value that is already there.\r\nUse the object form to choose: `time` is a `Date` or `'now'`, and `updateInput: true` writes it to the input the same way.",
80
- "example": "defaultTime: 'now'"
81
- },
82
- {
83
- "name": "currentTime",
84
- "optional": true,
85
- "type": "| { time?: Date; updateInput?: boolean; /** * @deprecated Has no effect since 4.5.0; the value is formatted by the library. Removed in 5.0. */ locales?: string | string[]; /** * @deprecated Use `clock.type: 'auto'`. Removed in 5.0. */ preventClockType?: boolean; } | boolean",
86
- "description": "Set current time to the input and timepicker",
87
- "example": "currentTime: {\r\n time: new Date(),\r\n updateInput: true,\r\n preventClockType: false\r\n}"
88
- }
89
- ]
90
- },
91
- "ui": {
92
- "interface": "UIOptions",
93
- "options": [
94
- {
95
- "name": "mode",
96
- "optional": true,
97
- "type": "'clock' | 'wheel' | 'compact-wheel'",
98
- "description": "Picker mode: analog clock face, scroll wheel spinner, or compact wheel (no header)",
99
- "default": "\"clock\""
100
- },
101
- {
102
- "name": "theme",
103
- "optional": true,
104
- "type": "| 'basic' | 'crane' | 'crane-straight' | 'm2' | 'm3-green' | 'dark' | 'glassmorphic' | 'pastel' | 'ai' | 'cyberpunk' | 'blueprint' | 'blueprint-dark'",
105
- "description": "Theme for the timepicker",
106
- "default": "\"basic\""
107
- },
108
- {
109
- "name": "animation",
110
- "optional": true,
111
- "type": "boolean",
112
- "description": "Enable/disable animations",
113
- "default": "true"
114
- },
115
- {
116
- "name": "backdrop",
117
- "optional": true,
118
- "type": "boolean",
119
- "description": "Show backdrop when timepicker is open",
120
- "default": "true"
121
- },
122
- {
123
- "name": "initialView",
124
- "optional": true,
125
- "type": "'clock' | 'keyboard'",
126
- "description": "View shown when the picker opens: the clock face or the keyboard fields.",
127
- "default": "\"clock\""
128
- },
129
- {
130
- "name": "mobile",
131
- "optional": true,
132
- "type": "boolean",
133
- "description": "Force mobile mode",
134
- "default": "false"
135
- },
136
- {
137
- "name": "viewSwitch",
138
- "optional": true,
139
- "type": "boolean",
140
- "description": "Show the button that switches between the clock face and the keyboard fields.",
141
- "default": "false"
142
- },
143
- {
144
- "name": "enableSwitchIcon",
145
- "optional": true,
146
- "type": "boolean",
147
- "description": "Enable switch icon (mobile ↔ desktop)",
148
- "default": "false"
149
- },
150
- {
151
- "name": "editable",
152
- "optional": true,
153
- "type": "boolean",
154
- "description": "Allow editing hour/minutes directly",
155
- "default": "false"
156
- },
157
- {
158
- "name": "allowPageScroll",
159
- "optional": true,
160
- "type": "boolean",
161
- "description": "Let the page scroll while the picker is open. When false, page scroll is locked on `<html>`\r\n(and on `<body>` when it is the scroll container), and `<html>` gets `--tp-scrollbar-gap` set to the removed\r\nscrollbar width for your own fixed or sticky elements, e.g. `header { padding-right: var(--tp-scrollbar-gap, 0px) }`.",
162
- "default": "false"
163
- },
164
- {
165
- "name": "enableScrollbar",
166
- "optional": true,
167
- "type": "boolean",
168
- "description": "Enable scrollbar when timepicker is open.\r\nWhen false, page scroll is locked on `<html>` (and on `<body>` when it is the scroll container),\r\nand `<html>` gets `--tp-scrollbar-gap` set to the removed scrollbar width for your own fixed or\r\nsticky elements, e.g. `header { padding-right: var(--tp-scrollbar-gap, 0px) }`.",
169
- "default": "false"
170
- },
171
- {
172
- "name": "cssClass",
173
- "optional": true,
174
- "type": "string",
175
- "description": "Additional CSS class for the wrapper",
176
- "example": "cssClass: \"my-custom-timepicker\""
177
- },
178
- {
179
- "name": "clearButton",
180
- "optional": true,
181
- "type": "boolean | { clearInput?: boolean }",
182
- "description": "Show the Clear button. The object form also sets what Clear does: `clearInput: false` keeps the input value.",
183
- "default": "false",
184
- "example": "clearButton: { clearInput: false }"
185
- },
186
- {
187
- "name": "appendTo",
188
- "optional": true,
189
- "type": "string | HTMLElement",
190
- "description": "Element, or selector of the element, the modal is appended to.",
191
- "default": "document.body"
192
- },
193
- {
194
- "name": "appendModalSelector",
195
- "optional": true,
196
- "type": "string",
197
- "description": "Selector where to append modal (default: body)",
198
- "default": "\"\""
199
- },
200
- {
201
- "name": "keyboardIcon",
202
- "optional": true,
203
- "type": "string",
204
- "description": "HTML of the keyboard icon, shown on the clock face view.",
205
- "default": "Material Icons template"
206
- },
207
- {
208
- "name": "iconTemplate",
209
- "optional": true,
210
- "type": "string",
211
- "description": "Custom keyboard icon template (desktop → mobile)",
212
- "default": "Material Icons template"
213
- },
214
- {
215
- "name": "clockIcon",
216
- "optional": true,
217
- "type": "string",
218
- "description": "HTML of the clock icon, shown on the keyboard view.",
219
- "default": "Material Icons template"
220
- },
221
- {
222
- "name": "iconTemplateMobile",
223
- "optional": true,
224
- "type": "string",
225
- "description": "Custom schedule icon template (mobile → desktop)",
226
- "default": "Material Icons template"
227
- },
228
- {
229
- "name": "inline",
230
- "optional": true,
231
- "type": "{ enabled: boolean; /** * @description Element, or selector of the element, the inline picker renders into. Required when `enabled` is true. * @example container: '#timepicker-container' */ container?: string | HTMLElement; /** * @deprecated Use `container`. Removed in 5.0. */ containerId?: string; /** * @description Show the OK and Cancel buttons. OK writes the time to the input and Cancel brings back the time from the input; the picker stays visible either way. * @default false */ showButtons?: boolean; autoUpdate?: boolean; }",
232
- "description": "Inline mode configuration",
233
- "example": "inline: {\r\n enabled: true,\r\n container: '#timepicker-container',\r\n showButtons: false,\r\n autoUpdate: true\r\n}"
234
- }
235
- ]
236
- },
237
- "labels": {
238
- "interface": "LabelsOptions",
239
- "options": [
240
- {
241
- "name": "am",
242
- "optional": true,
243
- "type": "string",
244
- "description": "\"AM\" label text",
245
- "default": "\"AM\""
246
- },
247
- {
248
- "name": "pm",
249
- "optional": true,
250
- "type": "string",
251
- "description": "\"PM\" label text",
252
- "default": "\"PM\""
253
- },
254
- {
255
- "name": "ok",
256
- "optional": true,
257
- "type": "string",
258
- "description": "\"OK\" button text",
259
- "default": "\"OK\""
260
- },
261
- {
262
- "name": "cancel",
263
- "optional": true,
264
- "type": "string",
265
- "description": "\"Cancel\" button text",
266
- "default": "\"Cancel\""
267
- },
268
- {
269
- "name": "clockTitle",
270
- "optional": true,
271
- "type": "string",
272
- "description": "Heading of the clock face view",
273
- "default": "\"Select time\""
274
- },
275
- {
276
- "name": "time",
277
- "optional": true,
278
- "type": "string",
279
- "description": "Time label on desktop",
280
- "default": "\"Select time\""
281
- },
282
- {
283
- "name": "keyboardTitle",
284
- "optional": true,
285
- "type": "string",
286
- "description": "Heading of the keyboard view",
287
- "default": "\"Enter Time\""
288
- },
289
- {
290
- "name": "mobileTime",
291
- "optional": true,
292
- "type": "string",
293
- "description": "Time label on mobile",
294
- "default": "\"Enter Time\""
295
- },
296
- {
297
- "name": "hour",
298
- "optional": true,
299
- "type": "string",
300
- "description": "Hour field caption, its accessible name, the dial name on the hours face, and the prefix of the hour announcement",
301
- "default": "\"Hour\""
302
- },
303
- {
304
- "name": "minute",
305
- "optional": true,
306
- "type": "string",
307
- "description": "Minute field caption, its accessible name, the dial name on the minutes face, and the prefix of the minute announcement.\r\nUntil 5.0 the minute announcement keeps its own default, `Minutes`, when neither `minute` nor `announceMinute` is set.",
308
- "default": "\"Minute\""
309
- },
310
- {
311
- "name": "second",
312
- "optional": true,
313
- "type": "string",
314
- "description": "Second field caption, its accessible name, the dial name on the seconds face, and the prefix of the second announcement (requires `clock.showSeconds`)",
315
- "default": "\"Second\""
316
- },
317
- {
318
- "name": "mobileHour",
319
- "optional": true,
320
- "type": "string",
321
- "description": "Hour label on mobile",
322
- "default": "\"Hour\""
323
- },
324
- {
325
- "name": "mobileMinute",
326
- "optional": true,
327
- "type": "string",
328
- "description": "Minute label on mobile",
329
- "default": "\"Minute\""
330
- },
331
- {
332
- "name": "clear",
333
- "optional": true,
334
- "type": "string",
335
- "description": "\"Clear\" button text",
336
- "default": "\"Clear\""
337
- },
338
- {
339
- "name": "hourLabel",
340
- "optional": true,
341
- "type": "string",
342
- "description": "Accessible label for the hour spinbutton and the clock dial while it shows hours",
343
- "default": "\"Hour\""
344
- },
345
- {
346
- "name": "minuteLabel",
347
- "optional": true,
348
- "type": "string",
349
- "description": "Accessible label for the minute spinbutton and the clock dial while it shows minutes",
350
- "default": "\"Minute\""
351
- },
352
- {
353
- "name": "clock",
354
- "optional": true,
355
- "type": "string",
356
- "description": "Accessible name of the group around the clock dial",
357
- "default": "\"Clock\""
358
- },
359
- {
360
- "name": "clockLabel",
361
- "optional": true,
362
- "type": "string",
363
- "description": "Accessible label for the group that wraps the analog clock dial",
364
- "default": "\"Clock\""
365
- },
366
- {
367
- "name": "period",
368
- "optional": true,
369
- "type": "string",
370
- "description": "Accessible name of the AM/PM group",
371
- "default": "\"Period\""
372
- },
373
- {
374
- "name": "periodLabel",
375
- "optional": true,
376
- "type": "string",
377
- "description": "Accessible label for the AM/PM period group",
378
- "default": "\"Period\""
379
- },
380
- {
381
- "name": "timeFields",
382
- "optional": true,
383
- "type": "string",
384
- "description": "Accessible name of the group around the time fields",
385
- "default": "\"Time\""
386
- },
387
- {
388
- "name": "timeLabel",
389
- "optional": true,
390
- "type": "string",
391
- "description": "Accessible label for the time wrapper group / tips",
392
- "default": "\"Time\""
393
- },
394
- {
395
- "name": "format24Label",
396
- "optional": true,
397
- "type": "string",
398
- "description": "Accessible label for the 24-hour tips group",
399
- "default": "\"24-hour\""
400
- },
401
- {
402
- "name": "range",
403
- "optional": true,
404
- "type": "string",
405
- "description": "Accessible name of the range From/To tabs",
406
- "default": "\"Range selection\""
407
- },
408
- {
409
- "name": "rangeSelectionLabel",
410
- "optional": true,
411
- "type": "string",
412
- "description": "Accessible label for the range selection tablist",
413
- "default": "\"Range selection\""
414
- },
415
- {
416
- "name": "rangeFrom",
417
- "optional": true,
418
- "type": "string",
419
- "description": "Text of the range From tab",
420
- "default": "\"From\""
421
- },
422
- {
423
- "name": "rangeTo",
424
- "optional": true,
425
- "type": "string",
426
- "description": "Text of the range To tab",
427
- "default": "\"To\""
428
- },
429
- {
430
- "name": "timezone",
431
- "optional": true,
432
- "type": "string",
433
- "description": "Label of the timezone selector",
434
- "default": "\"Timezone\""
435
- },
436
- {
437
- "name": "switchToKeyboard",
438
- "optional": true,
439
- "type": "string",
440
- "description": "Accessible name of the view switch on the clock face view",
441
- "default": "\"Switch to keyboard input\""
442
- },
443
- {
444
- "name": "switchToKeyboardLabel",
445
- "optional": true,
446
- "type": "string",
447
- "description": "Accessible label for the keyboard-input switch icon",
448
- "default": "\"Switch to keyboard input\""
449
- },
450
- {
451
- "name": "switchToClock",
452
- "optional": true,
453
- "type": "string",
454
- "description": "Accessible name of the view switch on the keyboard view",
455
- "default": "\"Switch to clock\""
456
- },
457
- {
458
- "name": "switchToClockLabel",
459
- "optional": true,
460
- "type": "string",
461
- "description": "Accessible label for the clock-view switch icon",
462
- "default": "\"Switch to clock\""
463
- },
464
- {
465
- "name": "toggleLabel",
466
- "optional": true,
467
- "type": "string",
468
- "description": "Accessible label for the generic view toggle button",
469
- "default": "\"Toggle\""
470
- },
471
- {
472
- "name": "timezoneSelectorLabel",
473
- "optional": true,
474
- "type": "string",
475
- "description": "Accessible label for the timezone selector",
476
- "default": "\"Timezone\""
477
- },
478
- {
479
- "name": "announceHour",
480
- "optional": true,
481
- "type": "string",
482
- "description": "Screen-reader announcement prefix for the selected hour",
483
- "default": "\"Hour\""
484
- },
485
- {
486
- "name": "announceMinute",
487
- "optional": true,
488
- "type": "string",
489
- "description": "Screen-reader announcement prefix for the selected minutes",
490
- "default": "\"Minutes\""
491
- },
492
- {
493
- "name": "announceAmSelected",
494
- "optional": true,
495
- "type": "string",
496
- "description": "Screen-reader announcement when AM is selected",
497
- "default": "\"AM selected\""
498
- },
499
- {
500
- "name": "announcePmSelected",
501
- "optional": true,
502
- "type": "string",
503
- "description": "Screen-reader announcement when PM is selected",
504
- "default": "\"PM selected\""
505
- },
506
- {
507
- "name": "invalidTimeFormat",
508
- "optional": true,
509
- "type": "string",
510
- "description": "Error/announcement text for an invalid time format",
511
- "default": "\"Invalid time format\""
512
- },
513
- {
514
- "name": "announceCleared",
515
- "optional": true,
516
- "type": "string",
517
- "description": "Screen-reader announcement after Clear",
518
- "default": "\"Time cleared\""
519
- }
520
- ]
521
- },
522
- "behavior": {
523
- "interface": "BehaviorOptions",
524
- "options": [
525
- {
526
- "name": "returnFocus",
527
- "optional": true,
528
- "type": "boolean",
529
- "description": "Return focus to the input when the picker closes (WAI-ARIA dialog pattern). Setting it to `true` is recommended; 5.0 makes `true` the default.",
530
- "default": "false"
531
- },
532
- {
533
- "name": "focusInputAfterClose",
534
- "optional": true,
535
- "type": "boolean",
536
- "description": "Focus input after closing modal. Old name of `returnFocus`.",
537
- "default": "false"
538
- },
539
- {
540
- "name": "focusTrap",
541
- "optional": true,
542
- "type": "boolean",
543
- "description": "Enable focus trap in modal",
544
- "default": "true"
545
- },
546
- {
547
- "name": "delayHandler",
548
- "optional": true,
549
- "type": "number",
550
- "description": "Extra delay (ms) before the picker starts to close after OK, Cancel, Escape, a backdrop click or `close()`",
551
- "default": "0"
552
- },
553
- {
554
- "name": "id",
555
- "optional": true,
556
- "type": "string",
557
- "description": "Custom ID for the timepicker instance",
558
- "example": "id: \"my-timepicker-1\""
559
- }
560
- ]
561
- },
562
- "timezone": {
563
- "interface": "TimezoneOptions",
564
- "description": "Optional timezone selector for B2B/global use cases.\r\nThis is a presentation layer only - no automatic time conversions.",
565
- "options": [
566
- {
567
- "name": "enabled",
568
- "optional": true,
569
- "type": "boolean",
570
- "description": "Enable timezone selector UI",
571
- "default": "false"
572
- },
573
- {
574
- "name": "default",
575
- "optional": true,
576
- "type": "string",
577
- "description": "Default timezone ID (e.g., 'America/New_York')\r\nUses browser's local timezone if not specified."
578
- },
579
- {
580
- "name": "list",
581
- "optional": true,
582
- "type": "readonly string[]",
583
- "description": "Timezone IDs shown in the selector, instead of the built-in list.\r\nIf not provided, uses a curated list of common timezones.",
584
- "example": "list: ['UTC', 'America/New_York', 'Europe/London']"
585
- },
586
- {
587
- "name": "whitelist",
588
- "optional": true,
589
- "type": "readonly string[]",
590
- "description": "Whitelist of allowed timezone IDs.\r\nIf not provided, uses a curated list of common timezones.",
591
- "example": "whitelist: ['UTC', 'America/New_York', 'Europe/London']"
592
- },
593
- {
594
- "name": "label",
595
- "optional": true,
596
- "type": "string",
597
- "description": "Label for timezone selector",
598
- "default": "\"Timezone\""
599
- }
600
- ]
601
- },
602
- "wheel": {
603
- "interface": "WheelOptions",
604
- "options": [
605
- {
606
- "name": "placement",
607
- "optional": true,
608
- "type": "'auto' | 'top' | 'bottom'",
609
- "description": "Popover placement relative to input in compact-wheel mode.\r\nWhen unset, compact-wheel opens as a modal.\r\nSet 'auto' | 'top' | 'bottom' to show compact-wheel as a popover:\r\n'auto' opens below if space allows, otherwise above. 'top' / 'bottom' open on that side\r\nwhile it has room for at least three wheel rows, otherwise on the other side.\r\nIn every placement the popover stays inside the viewport and scrolls when it is too tall.",
610
- "default": "undefined (modal)"
611
- },
612
- {
613
- "name": "hideFooter",
614
- "optional": true,
615
- "type": "boolean",
616
- "description": "When true, the footer (OK/Cancel/Clear buttons + switch icon)\r\nis not rendered in the DOM at all. Only works in compact-wheel mode.\r\nUseful when commitOnScroll is enabled and buttons are unnecessary.",
617
- "default": "false"
618
- },
619
- {
620
- "name": "commitOnScroll",
621
- "optional": true,
622
- "type": "boolean",
623
- "description": "When enabled, the timepicker automatically commits the selected time\r\nat the end of wheel scrolling, updating the input value and emitting a change event\r\nwithout requiring the user to press OK. Only applies to wheel and compact-wheel modes.",
624
- "default": "false"
625
- },
626
- {
627
- "name": "hideDisabled",
628
- "optional": true,
629
- "type": "boolean",
630
- "description": "When true, disabled hours/minutes/seconds are completely removed from the wheel list\r\ninstead of being dimmed. Only applies to wheel and compact-wheel modes.\r\nUseful when many values are disabled (e.g., business hours only).",
631
- "default": "false"
632
- },
633
- {
634
- "name": "ignoreOutsideClick",
635
- "optional": true,
636
- "type": "boolean",
637
- "description": "When true, clicking outside the picker area does not close it.\r\nOnly applies to wheel and compact-wheel modes (popover and modal).\r\nThe user must explicitly press OK or Cancel to close the picker.",
638
- "default": "false"
639
- }
640
- ]
641
- },
642
- "range": {
643
- "interface": "RangeOptions",
644
- "options": [
645
- {
646
- "name": "enabled",
647
- "optional": true,
648
- "type": "boolean",
649
- "description": "Enable range mode (from-to selection)",
650
- "default": "false"
651
- },
652
- {
653
- "name": "minDuration",
654
- "optional": true,
655
- "type": "number",
656
- "description": "Minimum duration in minutes"
657
- },
658
- {
659
- "name": "maxDuration",
660
- "optional": true,
661
- "type": "number",
662
- "description": "Maximum duration in minutes"
663
- },
664
- {
665
- "name": "fromLabel",
666
- "optional": true,
667
- "type": "string",
668
- "description": "Label for \"from\" segment",
669
- "default": "\"From\""
670
- },
671
- {
672
- "name": "toLabel",
673
- "optional": true,
674
- "type": "string",
675
- "description": "Label for \"to\" segment",
676
- "default": "\"To\""
677
- }
678
- ]
679
- },
680
- "callbacks": {
681
- "interface": "CallbacksOptions",
682
- "options": [
683
- {
684
- "name": "onOpen",
685
- "optional": true,
686
- "type": "TimepickerEventCallback<OpenEventData>",
687
- "description": "Triggered when timepicker opens"
688
- },
689
- {
690
- "name": "onShow",
691
- "optional": true,
692
- "type": "TimepickerEventCallback<ShowEventData>",
693
- "description": "Triggered when the user activates the input or a `data-open` element (click, Enter or Space) to open the picker, before it renders. `open()` does not trigger it."
694
- },
695
- {
696
- "name": "onCancel",
697
- "optional": true,
698
- "type": "TimepickerEventCallback<CancelEventData>",
699
- "description": "Triggered when user cancels"
700
- },
701
- {
702
- "name": "onConfirm",
703
- "optional": true,
704
- "type": "TimepickerEventCallback<ConfirmEventData>",
705
- "description": "Triggered when user confirms time"
706
- },
707
- {
708
- "name": "onUpdate",
709
- "optional": true,
710
- "type": "TimepickerEventCallback<UpdateEventData>",
711
- "description": "Triggered during interaction (real-time)"
712
- },
713
- {
714
- "name": "onSelectHour",
715
- "optional": true,
716
- "type": "TimepickerEventCallback<SelectHourEventData>",
717
- "description": "Triggered when hour mode is selected"
718
- },
719
- {
720
- "name": "onSelectMinute",
721
- "optional": true,
722
- "type": "TimepickerEventCallback<SelectMinuteEventData>",
723
- "description": "Triggered when minute mode is selected"
724
- },
725
- {
726
- "name": "onSelectSecond",
727
- "optional": true,
728
- "type": "TimepickerEventCallback<SelectSecondEventData>",
729
- "description": "Triggered when second mode is selected (requires `clock.showSeconds`)"
730
- },
731
- {
732
- "name": "onSelectPeriod",
733
- "optional": true,
734
- "type": "TimepickerEventCallback<SelectPeriodEventData>",
735
- "description": "Triggered when AM or PM is selected, with `{ type }`"
736
- },
737
- {
738
- "name": "onSelectAM",
739
- "optional": true,
740
- "type": "TimepickerEventCallback<SelectAMEventData>",
741
- "description": "Triggered when AM is selected"
742
- },
743
- {
744
- "name": "onSelectPM",
745
- "optional": true,
746
- "type": "TimepickerEventCallback<SelectPMEventData>",
747
- "description": "Triggered when PM is selected"
748
- },
749
- {
750
- "name": "onSwitchView",
751
- "optional": true,
752
- "type": "TimepickerEventCallback<SwitchViewEventData>",
753
- "description": "Triggered when the switch icon toggles between the clock face and keyboard input (requires `ui.viewSwitch`)"
754
- },
755
- {
756
- "name": "onSwitchFace",
757
- "optional": true,
758
- "type": "TimepickerEventCallback<SwitchFaceEventData>",
759
- "description": "Triggered when the clock face switches between hours, minutes and seconds, with `{ face }`"
760
- },
761
- {
762
- "name": "onError",
763
- "optional": true,
764
- "type": "TimepickerEventCallback<ErrorEventData>",
765
- "description": "Triggered on invalid time format"
766
- },
767
- {
768
- "name": "onTimezoneChange",
769
- "optional": true,
770
- "type": "TimepickerEventCallback<TimezoneChangeEventData>",
771
- "description": "Triggered when timezone is changed (opt-in feature)"
772
- },
773
- {
774
- "name": "onRangeConfirm",
775
- "optional": true,
776
- "type": "TimepickerEventCallback<RangeConfirmEventData>",
777
- "description": "Triggered when range is confirmed (range mode only)"
778
- },
779
- {
780
- "name": "onRangeSwitch",
781
- "optional": true,
782
- "type": "TimepickerEventCallback<RangeSwitchEventData>",
783
- "description": "Triggered when switching between from/to (range mode only)"
784
- },
785
- {
786
- "name": "onRangeValidation",
787
- "optional": true,
788
- "type": "TimepickerEventCallback<RangeValidationEventData>",
789
- "description": "Triggered on range validation (range mode only)"
790
- },
791
- {
792
- "name": "onWheelScrollStart",
793
- "optional": true,
794
- "type": "TimepickerEventCallback<WheelScrollStartEventData>",
795
- "description": "Triggered when a wheel column starts scrolling (wheel and compact-wheel modes)"
796
- },
797
- {
798
- "name": "onWheelScrollEnd",
799
- "optional": true,
800
- "type": "TimepickerEventCallback<WheelScrollEndEventData>",
801
- "description": "Triggered when a wheel column stops scrolling and snaps to a value (wheel and compact-wheel modes)"
802
- },
803
- {
804
- "name": "onClear",
805
- "optional": true,
806
- "type": "TimepickerEventCallback<ClearEventData>",
807
- "description": "Triggered when clear button is clicked"
808
- }
809
- ]
810
- },
811
- "clearBehavior": {
812
- "interface": "ClearBehaviorOptions",
813
- "options": [
814
- {
815
- "name": "clearInput",
816
- "optional": true,
817
- "type": "boolean",
818
- "description": "Whether clicking clear also empties the input field value",
819
- "default": "true"
820
- }
821
- ]
822
- }
823
- }
1
+ {
2
+ "clock": {
3
+ "interface": "ClockOptions",
4
+ "options": [
5
+ {
6
+ "name": "type",
7
+ "optional": true,
8
+ "type": "'12h' | '24h' | 'auto'",
9
+ "description": "Clock format. `auto` picks 12h or 24h from the browser locale when the picker is created or its options are set.",
10
+ "default": "\"12h\""
11
+ },
12
+ {
13
+ "name": "incrementHours",
14
+ "optional": true,
15
+ "type": "number",
16
+ "description": "Step between selectable hours on the clock, the wheel and the hour field's arrow keys. Use a divisor of 12: 1, 2, 3, 4 or 6.",
17
+ "default": "1"
18
+ },
19
+ {
20
+ "name": "incrementMinutes",
21
+ "optional": true,
22
+ "type": "number",
23
+ "description": "Set increment for minutes (1, 5, 10, 15, etc.)",
24
+ "default": "1"
25
+ },
26
+ {
27
+ "name": "autoSwitchToMinutes",
28
+ "optional": true,
29
+ "type": "boolean",
30
+ "description": "Automatically switch to minutes after selecting hour",
31
+ "default": "true"
32
+ },
33
+ {
34
+ "name": "showSeconds",
35
+ "optional": true,
36
+ "type": "boolean",
37
+ "description": "Show a seconds field, wheel column and clock face (HH:MM:SS)",
38
+ "default": "false"
39
+ },
40
+ {
41
+ "name": "incrementSeconds",
42
+ "optional": true,
43
+ "type": "1 | 5 | 10 | 15 | 20 | 30",
44
+ "description": "Set increment for seconds: 1, 5, 10, 15, 20 or 30",
45
+ "default": "1"
46
+ },
47
+ {
48
+ "name": "autoSwitchToSeconds",
49
+ "optional": true,
50
+ "type": "boolean",
51
+ "description": "Automatically switch from minutes to seconds after a minute is picked on the clock.\nOnly used with `showSeconds`.",
52
+ "default": "true"
53
+ },
54
+ {
55
+ "name": "smoothHourSnap",
56
+ "optional": true,
57
+ "type": "boolean",
58
+ "description": "Enable smooth hour snapping with animation",
59
+ "default": "true",
60
+ "deprecated": "Use `discreteHourJump`. Removed in 5.0."
61
+ },
62
+ {
63
+ "name": "discreteHourJump",
64
+ "optional": true,
65
+ "type": "boolean",
66
+ "description": "Move the hour hand from hour to hour while dragging instead of following the pointer.",
67
+ "default": "false"
68
+ },
69
+ {
70
+ "name": "disabledTime",
71
+ "optional": true,
72
+ "type": "object",
73
+ "description": "Disable specific hours/minutes/seconds or time ranges",
74
+ "example": "disabledTime: {\n minutes: [1, 2, 4, 5, 55, 23, \"22\", \"38\"],\n hours: [1, \"3\", \"5\", 8],\n seconds: [0, 30]\n}\n// or time ranges instead: the hours, minutes and seconds lists are ignored when ranges is set\ndisabledTime: {\n ranges: [\"10:00 AM - 12:00 PM\", \"5:00:30 PM - 8:00 PM\"]\n}",
75
+ "fields": [
76
+ {
77
+ "name": "minutes",
78
+ "optional": true,
79
+ "type": "Array<string | number>"
80
+ },
81
+ {
82
+ "name": "hours",
83
+ "optional": true,
84
+ "type": "Array<string | number>"
85
+ },
86
+ {
87
+ "name": "seconds",
88
+ "optional": true,
89
+ "type": "Array<string | number>",
90
+ "description": "Seconds (0-59) disabled in every minute. Used with `showSeconds`."
91
+ },
92
+ {
93
+ "name": "ranges",
94
+ "optional": true,
95
+ "type": "string | string[]",
96
+ "description": "Inclusive ranges. Edges: 'HH:MM' or 'HH:MM:SS' (24h), 'H:MM[:SS] AM|PM' (12h).\nAn edge without seconds covers its whole minute.\nWhen set, the `hours`, `minutes` and `seconds` lists are ignored."
97
+ },
98
+ {
99
+ "name": "interval",
100
+ "optional": true,
101
+ "type": "string | string[]",
102
+ "description": "Inclusive ranges. Edges: 'HH:MM' or 'HH:MM:SS' (24h), 'H:MM[:SS] AM|PM' (12h).\nAn edge without seconds covers its whole minute.\nWhen set, the `hours`, `minutes` and `seconds` lists are ignored.",
103
+ "deprecated": "Use `ranges`. Removed in 5.0."
104
+ }
105
+ ]
106
+ },
107
+ {
108
+ "name": "defaultTime",
109
+ "optional": true,
110
+ "type": "'now' | object",
111
+ "description": "Time the picker shows while the input is empty. `'now'` shows the current time and also writes it to the input when the picker is created, replacing a value that is already there.\nUse the object form to choose: `time` is a `Date` or `'now'`, and `updateInput: true` writes it to the input the same way.",
112
+ "example": "defaultTime: 'now'\ndefaultTime: { time: new Date(2026, 0, 1, 9, 30), updateInput: false }",
113
+ "fields": [
114
+ {
115
+ "name": "time",
116
+ "optional": true,
117
+ "type": "Date | 'now'"
118
+ },
119
+ {
120
+ "name": "updateInput",
121
+ "optional": true,
122
+ "type": "boolean"
123
+ }
124
+ ]
125
+ },
126
+ {
127
+ "name": "currentTime",
128
+ "optional": true,
129
+ "type": "| object | boolean",
130
+ "description": "Set current time to the input and timepicker",
131
+ "example": "currentTime: {\n time: new Date(),\n updateInput: true,\n preventClockType: false\n}\ncurrentTime: true",
132
+ "deprecated": "Use `defaultTime`. Removed in 5.0.",
133
+ "fields": [
134
+ {
135
+ "name": "time",
136
+ "optional": true,
137
+ "type": "Date"
138
+ },
139
+ {
140
+ "name": "updateInput",
141
+ "optional": true,
142
+ "type": "boolean"
143
+ },
144
+ {
145
+ "name": "locales",
146
+ "optional": true,
147
+ "type": "string | string[]",
148
+ "deprecated": "Has no effect since 4.5.0; the value is formatted by the library. Removed in 5.0."
149
+ },
150
+ {
151
+ "name": "preventClockType",
152
+ "optional": true,
153
+ "type": "boolean",
154
+ "deprecated": "Use `clock.type: 'auto'`. Removed in 5.0."
155
+ }
156
+ ]
157
+ }
158
+ ]
159
+ },
160
+ "ui": {
161
+ "interface": "UIOptions",
162
+ "options": [
163
+ {
164
+ "name": "mode",
165
+ "optional": true,
166
+ "type": "'clock' | 'wheel' | 'compact-wheel'",
167
+ "description": "Picker mode: analog clock face, scroll wheel spinner, or compact wheel (no header)",
168
+ "default": "\"clock\""
169
+ },
170
+ {
171
+ "name": "theme",
172
+ "optional": true,
173
+ "type": "| 'basic' | 'crane' | 'crane-straight' | 'm2' | 'm3-green' | 'dark' | 'glassmorphic' | 'pastel' | 'ai' | 'cyberpunk' | 'blueprint' | 'blueprint-dark'",
174
+ "description": "Theme for the timepicker",
175
+ "default": "\"basic\""
176
+ },
177
+ {
178
+ "name": "animation",
179
+ "optional": true,
180
+ "type": "boolean",
181
+ "description": "Enable/disable animations",
182
+ "default": "true"
183
+ },
184
+ {
185
+ "name": "backdrop",
186
+ "optional": true,
187
+ "type": "boolean",
188
+ "description": "Show backdrop when timepicker is open",
189
+ "default": "true"
190
+ },
191
+ {
192
+ "name": "initialView",
193
+ "optional": true,
194
+ "type": "'clock' | 'keyboard'",
195
+ "description": "View shown when the picker opens: the clock face or the keyboard fields.",
196
+ "default": "\"clock\""
197
+ },
198
+ {
199
+ "name": "mobile",
200
+ "optional": true,
201
+ "type": "boolean",
202
+ "description": "Force mobile mode",
203
+ "default": "false",
204
+ "deprecated": "Use `initialView: 'keyboard'`. Removed in 5.0."
205
+ },
206
+ {
207
+ "name": "viewSwitch",
208
+ "optional": true,
209
+ "type": "boolean",
210
+ "description": "Show the button that switches between the clock face and the keyboard fields.",
211
+ "default": "false"
212
+ },
213
+ {
214
+ "name": "enableSwitchIcon",
215
+ "optional": true,
216
+ "type": "boolean",
217
+ "description": "Enable switch icon (mobile ↔ desktop)",
218
+ "default": "false",
219
+ "deprecated": "Use `viewSwitch`. Removed in 5.0."
220
+ },
221
+ {
222
+ "name": "editable",
223
+ "optional": true,
224
+ "type": "boolean",
225
+ "description": "Allow editing hour/minutes directly",
226
+ "default": "false"
227
+ },
228
+ {
229
+ "name": "allowPageScroll",
230
+ "optional": true,
231
+ "type": "boolean",
232
+ "description": "Let the page scroll while the picker is open. When false, page scroll is locked on `<html>`\n(and on `<body>` when it is the scroll container), and `<html>` gets `--tp-scrollbar-gap` set to the removed\nscrollbar width for your own fixed or sticky elements, e.g. `header { padding-right: var(--tp-scrollbar-gap, 0px) }`.",
233
+ "default": "false"
234
+ },
235
+ {
236
+ "name": "enableScrollbar",
237
+ "optional": true,
238
+ "type": "boolean",
239
+ "description": "Enable scrollbar when timepicker is open.\nWhen false, page scroll is locked on `<html>` (and on `<body>` when it is the scroll container),\nand `<html>` gets `--tp-scrollbar-gap` set to the removed scrollbar width for your own fixed or\nsticky elements, e.g. `header { padding-right: var(--tp-scrollbar-gap, 0px) }`.",
240
+ "default": "false",
241
+ "deprecated": "Use `allowPageScroll`. Removed in 5.0."
242
+ },
243
+ {
244
+ "name": "cssClass",
245
+ "optional": true,
246
+ "type": "string",
247
+ "description": "Additional CSS class for the wrapper",
248
+ "example": "cssClass: \"my-custom-timepicker\""
249
+ },
250
+ {
251
+ "name": "clearButton",
252
+ "optional": true,
253
+ "type": "boolean | object",
254
+ "description": "Show the Clear button. The object form also sets what Clear does: `clearInput: false` keeps the input value.",
255
+ "default": "false",
256
+ "example": "clearButton: { clearInput: false }",
257
+ "fields": [
258
+ {
259
+ "name": "clearInput",
260
+ "optional": true,
261
+ "type": "boolean"
262
+ }
263
+ ]
264
+ },
265
+ {
266
+ "name": "appendTo",
267
+ "optional": true,
268
+ "type": "string | HTMLElement",
269
+ "description": "Element, or selector of the element, the modal is appended to.",
270
+ "default": "document.body"
271
+ },
272
+ {
273
+ "name": "appendModalSelector",
274
+ "optional": true,
275
+ "type": "string",
276
+ "description": "Selector where to append modal (default: body)",
277
+ "default": "\"\"",
278
+ "deprecated": "Use `appendTo`. Removed in 5.0."
279
+ },
280
+ {
281
+ "name": "keyboardIcon",
282
+ "optional": true,
283
+ "type": "string",
284
+ "description": "HTML of the keyboard icon, shown on the clock face view.",
285
+ "default": "Material Icons template"
286
+ },
287
+ {
288
+ "name": "iconTemplate",
289
+ "optional": true,
290
+ "type": "string",
291
+ "description": "Custom keyboard icon template (desktop → mobile)",
292
+ "default": "Material Icons template",
293
+ "deprecated": "Use `keyboardIcon`. Removed in 5.0."
294
+ },
295
+ {
296
+ "name": "clockIcon",
297
+ "optional": true,
298
+ "type": "string",
299
+ "description": "HTML of the clock icon, shown on the keyboard view.",
300
+ "default": "Material Icons template"
301
+ },
302
+ {
303
+ "name": "iconTemplateMobile",
304
+ "optional": true,
305
+ "type": "string",
306
+ "description": "Custom schedule icon template (mobile → desktop)",
307
+ "default": "Material Icons template",
308
+ "deprecated": "Use `clockIcon`. Removed in 5.0."
309
+ },
310
+ {
311
+ "name": "inline",
312
+ "optional": true,
313
+ "type": "object",
314
+ "description": "Inline mode configuration",
315
+ "example": "inline: {\n enabled: true,\n container: '#timepicker-container',\n showButtons: false,\n autoUpdate: true\n}",
316
+ "fields": [
317
+ {
318
+ "name": "enabled",
319
+ "optional": false,
320
+ "type": "boolean"
321
+ },
322
+ {
323
+ "name": "container",
324
+ "optional": true,
325
+ "type": "string | HTMLElement",
326
+ "description": "Element, or selector of the element, the inline picker renders into. Required when `enabled` is true.",
327
+ "example": "container: '#timepicker-container'"
328
+ },
329
+ {
330
+ "name": "containerId",
331
+ "optional": true,
332
+ "type": "string",
333
+ "deprecated": "Use `container`. Removed in 5.0."
334
+ },
335
+ {
336
+ "name": "showButtons",
337
+ "optional": true,
338
+ "type": "boolean",
339
+ "description": "Show the OK and Cancel buttons. OK writes the time to the input and Cancel brings back the time from the input; the picker stays visible either way.",
340
+ "default": "false"
341
+ },
342
+ {
343
+ "name": "autoUpdate",
344
+ "optional": true,
345
+ "type": "boolean"
346
+ }
347
+ ]
348
+ }
349
+ ]
350
+ },
351
+ "labels": {
352
+ "interface": "LabelsOptions",
353
+ "options": [
354
+ {
355
+ "name": "am",
356
+ "optional": true,
357
+ "type": "string",
358
+ "description": "\"AM\" label text",
359
+ "default": "\"AM\""
360
+ },
361
+ {
362
+ "name": "pm",
363
+ "optional": true,
364
+ "type": "string",
365
+ "description": "\"PM\" label text",
366
+ "default": "\"PM\""
367
+ },
368
+ {
369
+ "name": "ok",
370
+ "optional": true,
371
+ "type": "string",
372
+ "description": "\"OK\" button text",
373
+ "default": "\"OK\""
374
+ },
375
+ {
376
+ "name": "cancel",
377
+ "optional": true,
378
+ "type": "string",
379
+ "description": "\"Cancel\" button text",
380
+ "default": "\"Cancel\""
381
+ },
382
+ {
383
+ "name": "clockTitle",
384
+ "optional": true,
385
+ "type": "string",
386
+ "description": "Heading of the clock face view",
387
+ "default": "\"Select time\""
388
+ },
389
+ {
390
+ "name": "time",
391
+ "optional": true,
392
+ "type": "string",
393
+ "description": "Time label on desktop",
394
+ "default": "\"Select time\"",
395
+ "deprecated": "Use `clockTitle`. Removed in 5.0."
396
+ },
397
+ {
398
+ "name": "keyboardTitle",
399
+ "optional": true,
400
+ "type": "string",
401
+ "description": "Heading of the keyboard view",
402
+ "default": "\"Enter Time\""
403
+ },
404
+ {
405
+ "name": "mobileTime",
406
+ "optional": true,
407
+ "type": "string",
408
+ "description": "Time label on mobile",
409
+ "default": "\"Enter Time\"",
410
+ "deprecated": "Use `keyboardTitle`. Removed in 5.0."
411
+ },
412
+ {
413
+ "name": "hour",
414
+ "optional": true,
415
+ "type": "string",
416
+ "description": "Hour field caption, its accessible name, the dial name on the hours face, and the prefix of the hour announcement",
417
+ "default": "\"Hour\""
418
+ },
419
+ {
420
+ "name": "minute",
421
+ "optional": true,
422
+ "type": "string",
423
+ "description": "Minute field caption, its accessible name, the dial name on the minutes face, and the prefix of the minute announcement.\nUntil 5.0 the minute announcement keeps its own default, `Minutes`, when neither `minute` nor `announceMinute` is set.",
424
+ "default": "\"Minute\""
425
+ },
426
+ {
427
+ "name": "second",
428
+ "optional": true,
429
+ "type": "string",
430
+ "description": "Second field caption, its accessible name, the dial name on the seconds face, and the prefix of the second announcement (requires `clock.showSeconds`)",
431
+ "default": "\"Second\""
432
+ },
433
+ {
434
+ "name": "mobileHour",
435
+ "optional": true,
436
+ "type": "string",
437
+ "description": "Hour label on mobile",
438
+ "default": "\"Hour\"",
439
+ "deprecated": "Use `hour`. Removed in 5.0."
440
+ },
441
+ {
442
+ "name": "mobileMinute",
443
+ "optional": true,
444
+ "type": "string",
445
+ "description": "Minute label on mobile",
446
+ "default": "\"Minute\"",
447
+ "deprecated": "Use `minute`. Removed in 5.0."
448
+ },
449
+ {
450
+ "name": "clear",
451
+ "optional": true,
452
+ "type": "string",
453
+ "description": "\"Clear\" button text",
454
+ "default": "\"Clear\""
455
+ },
456
+ {
457
+ "name": "hourLabel",
458
+ "optional": true,
459
+ "type": "string",
460
+ "description": "Accessible label for the hour spinbutton and the clock dial while it shows hours",
461
+ "default": "\"Hour\"",
462
+ "deprecated": "Use `hour`. Removed in 5.0."
463
+ },
464
+ {
465
+ "name": "minuteLabel",
466
+ "optional": true,
467
+ "type": "string",
468
+ "description": "Accessible label for the minute spinbutton and the clock dial while it shows minutes",
469
+ "default": "\"Minute\"",
470
+ "deprecated": "Use `minute`. Removed in 5.0."
471
+ },
472
+ {
473
+ "name": "clock",
474
+ "optional": true,
475
+ "type": "string",
476
+ "description": "Accessible name of the group around the clock dial",
477
+ "default": "\"Clock\""
478
+ },
479
+ {
480
+ "name": "clockLabel",
481
+ "optional": true,
482
+ "type": "string",
483
+ "description": "Accessible label for the group that wraps the analog clock dial",
484
+ "default": "\"Clock\"",
485
+ "deprecated": "Use `clock`. Removed in 5.0."
486
+ },
487
+ {
488
+ "name": "period",
489
+ "optional": true,
490
+ "type": "string",
491
+ "description": "Accessible name of the AM/PM group",
492
+ "default": "\"Period\""
493
+ },
494
+ {
495
+ "name": "periodLabel",
496
+ "optional": true,
497
+ "type": "string",
498
+ "description": "Accessible label for the AM/PM period group",
499
+ "default": "\"Period\"",
500
+ "deprecated": "Use `period`. Removed in 5.0."
501
+ },
502
+ {
503
+ "name": "timeFields",
504
+ "optional": true,
505
+ "type": "string",
506
+ "description": "Accessible name of the group around the time fields",
507
+ "default": "\"Time\""
508
+ },
509
+ {
510
+ "name": "timeLabel",
511
+ "optional": true,
512
+ "type": "string",
513
+ "description": "Accessible label for the time wrapper group / tips",
514
+ "default": "\"Time\"",
515
+ "deprecated": "Use `timeFields`. Removed in 5.0."
516
+ },
517
+ {
518
+ "name": "format24Label",
519
+ "optional": true,
520
+ "type": "string",
521
+ "description": "Accessible label for the 24-hour tips group",
522
+ "default": "\"24-hour\"",
523
+ "deprecated": "Has no effect. Removed in 5.0."
524
+ },
525
+ {
526
+ "name": "range",
527
+ "optional": true,
528
+ "type": "string",
529
+ "description": "Accessible name of the range From/To tabs",
530
+ "default": "\"Range selection\""
531
+ },
532
+ {
533
+ "name": "rangeSelectionLabel",
534
+ "optional": true,
535
+ "type": "string",
536
+ "description": "Accessible label for the range selection tablist",
537
+ "default": "\"Range selection\"",
538
+ "deprecated": "Use `range`. Removed in 5.0."
539
+ },
540
+ {
541
+ "name": "rangeFrom",
542
+ "optional": true,
543
+ "type": "string",
544
+ "description": "Text of the range From tab",
545
+ "default": "\"From\""
546
+ },
547
+ {
548
+ "name": "rangeTo",
549
+ "optional": true,
550
+ "type": "string",
551
+ "description": "Text of the range To tab",
552
+ "default": "\"To\""
553
+ },
554
+ {
555
+ "name": "timezone",
556
+ "optional": true,
557
+ "type": "string",
558
+ "description": "Label of the timezone selector",
559
+ "default": "\"Timezone\""
560
+ },
561
+ {
562
+ "name": "switchToKeyboard",
563
+ "optional": true,
564
+ "type": "string",
565
+ "description": "Accessible name of the view switch on the clock face view",
566
+ "default": "\"Switch to keyboard input\""
567
+ },
568
+ {
569
+ "name": "switchToKeyboardLabel",
570
+ "optional": true,
571
+ "type": "string",
572
+ "description": "Accessible label for the keyboard-input switch icon",
573
+ "default": "\"Switch to keyboard input\"",
574
+ "deprecated": "Use `switchToKeyboard`. Removed in 5.0."
575
+ },
576
+ {
577
+ "name": "switchToClock",
578
+ "optional": true,
579
+ "type": "string",
580
+ "description": "Accessible name of the view switch on the keyboard view",
581
+ "default": "\"Switch to clock\""
582
+ },
583
+ {
584
+ "name": "switchToClockLabel",
585
+ "optional": true,
586
+ "type": "string",
587
+ "description": "Accessible label for the clock-view switch icon",
588
+ "default": "\"Switch to clock\"",
589
+ "deprecated": "Use `switchToClock`. Removed in 5.0."
590
+ },
591
+ {
592
+ "name": "toggleLabel",
593
+ "optional": true,
594
+ "type": "string",
595
+ "description": "Accessible label for the generic view toggle button",
596
+ "default": "\"Toggle\"",
597
+ "deprecated": "Has no effect; the view switch button is labelled by `switchToKeyboard` / `switchToClock`. Removed in 5.0."
598
+ },
599
+ {
600
+ "name": "timezoneSelectorLabel",
601
+ "optional": true,
602
+ "type": "string",
603
+ "description": "Accessible label for the timezone selector",
604
+ "default": "\"Timezone\"",
605
+ "deprecated": "Has no effect; use `labels.timezone`. Removed in 5.0."
606
+ },
607
+ {
608
+ "name": "announceHour",
609
+ "optional": true,
610
+ "type": "string",
611
+ "description": "Screen-reader announcement prefix for the selected hour",
612
+ "default": "\"Hour\"",
613
+ "deprecated": "Use `hour`. Removed in 5.0."
614
+ },
615
+ {
616
+ "name": "announceMinute",
617
+ "optional": true,
618
+ "type": "string",
619
+ "description": "Screen-reader announcement prefix for the selected minutes",
620
+ "default": "\"Minutes\"",
621
+ "deprecated": "Use `minute`. Removed in 5.0."
622
+ },
623
+ {
624
+ "name": "announceAmSelected",
625
+ "optional": true,
626
+ "type": "string",
627
+ "description": "Screen-reader announcement when AM is selected",
628
+ "default": "\"AM selected\""
629
+ },
630
+ {
631
+ "name": "announcePmSelected",
632
+ "optional": true,
633
+ "type": "string",
634
+ "description": "Screen-reader announcement when PM is selected",
635
+ "default": "\"PM selected\""
636
+ },
637
+ {
638
+ "name": "invalidTimeFormat",
639
+ "optional": true,
640
+ "type": "string",
641
+ "description": "Error/announcement text for an invalid time format",
642
+ "default": "\"Invalid time format\""
643
+ },
644
+ {
645
+ "name": "announceCleared",
646
+ "optional": true,
647
+ "type": "string",
648
+ "description": "Screen-reader announcement after Clear",
649
+ "default": "\"Time cleared\""
650
+ }
651
+ ]
652
+ },
653
+ "behavior": {
654
+ "interface": "BehaviorOptions",
655
+ "options": [
656
+ {
657
+ "name": "returnFocus",
658
+ "optional": true,
659
+ "type": "boolean",
660
+ "description": "Return focus to the input when the picker closes (WAI-ARIA dialog pattern). Setting it to `true` is recommended; 5.0 makes `true` the default.",
661
+ "default": "false"
662
+ },
663
+ {
664
+ "name": "focusInputAfterClose",
665
+ "optional": true,
666
+ "type": "boolean",
667
+ "description": "Focus input after closing modal. Old name of `returnFocus`.",
668
+ "default": "false",
669
+ "deprecated": "Use `returnFocus`. Removed in 5.0."
670
+ },
671
+ {
672
+ "name": "focusTrap",
673
+ "optional": true,
674
+ "type": "boolean",
675
+ "description": "Enable focus trap in modal",
676
+ "default": "true"
677
+ },
678
+ {
679
+ "name": "delayHandler",
680
+ "optional": true,
681
+ "type": "number",
682
+ "description": "Extra delay (ms) before the picker starts to close after OK, Cancel, Escape, a backdrop click or `close()`",
683
+ "default": "0"
684
+ },
685
+ {
686
+ "name": "id",
687
+ "optional": true,
688
+ "type": "string",
689
+ "description": "Custom ID for the timepicker instance",
690
+ "example": "id: \"my-timepicker-1\""
691
+ }
692
+ ]
693
+ },
694
+ "timezone": {
695
+ "interface": "TimezoneOptions",
696
+ "description": "Optional timezone selector for B2B/global use cases.\nThis is a presentation layer only - no automatic time conversions.",
697
+ "options": [
698
+ {
699
+ "name": "enabled",
700
+ "optional": true,
701
+ "type": "boolean",
702
+ "description": "Enable timezone selector UI",
703
+ "default": "false"
704
+ },
705
+ {
706
+ "name": "default",
707
+ "optional": true,
708
+ "type": "string",
709
+ "description": "Default timezone ID (e.g., 'America/New_York')\nUses browser's local timezone if not specified."
710
+ },
711
+ {
712
+ "name": "list",
713
+ "optional": true,
714
+ "type": "readonly string[]",
715
+ "description": "Timezone IDs shown in the selector, instead of the built-in list.\nIf not provided, uses a curated list of common timezones.",
716
+ "example": "list: ['UTC', 'America/New_York', 'Europe/London']"
717
+ },
718
+ {
719
+ "name": "whitelist",
720
+ "optional": true,
721
+ "type": "readonly string[]",
722
+ "description": "Whitelist of allowed timezone IDs.\nIf not provided, uses a curated list of common timezones.",
723
+ "example": "whitelist: ['UTC', 'America/New_York', 'Europe/London']",
724
+ "deprecated": "Use `list`. Removed in 5.0."
725
+ },
726
+ {
727
+ "name": "label",
728
+ "optional": true,
729
+ "type": "string",
730
+ "description": "Label for timezone selector",
731
+ "default": "\"Timezone\"",
732
+ "deprecated": "Use `labels.timezone`. Removed in 5.0."
733
+ }
734
+ ]
735
+ },
736
+ "wheel": {
737
+ "interface": "WheelOptions",
738
+ "options": [
739
+ {
740
+ "name": "placement",
741
+ "optional": true,
742
+ "type": "'auto' | 'top' | 'bottom'",
743
+ "description": "Popover placement relative to input in compact-wheel mode.\nWhen unset, compact-wheel opens as a modal.\nSet 'auto' | 'top' | 'bottom' to show compact-wheel as a popover:\n'auto' opens below if space allows, otherwise above. 'top' / 'bottom' open on that side\nwhile it has room for at least three wheel rows, otherwise on the other side.\nIn every placement the popover stays inside the viewport and scrolls when it is too tall.",
744
+ "default": "undefined (modal)"
745
+ },
746
+ {
747
+ "name": "hideFooter",
748
+ "optional": true,
749
+ "type": "boolean",
750
+ "description": "When true, the footer (OK/Cancel/Clear buttons + switch icon)\nis not rendered in the DOM at all. Only works in compact-wheel mode.\nUseful when commitOnScroll is enabled and buttons are unnecessary.",
751
+ "default": "false"
752
+ },
753
+ {
754
+ "name": "commitOnScroll",
755
+ "optional": true,
756
+ "type": "boolean",
757
+ "description": "When enabled, the timepicker automatically commits the selected time\nat the end of wheel scrolling, updating the input value and emitting a change event\nwithout requiring the user to press OK. Only applies to wheel and compact-wheel modes.",
758
+ "default": "false"
759
+ },
760
+ {
761
+ "name": "hideDisabled",
762
+ "optional": true,
763
+ "type": "boolean",
764
+ "description": "When true, disabled hours/minutes/seconds are completely removed from the wheel list\ninstead of being dimmed. Only applies to wheel and compact-wheel modes.\nUseful when many values are disabled (e.g., business hours only).",
765
+ "default": "false"
766
+ },
767
+ {
768
+ "name": "ignoreOutsideClick",
769
+ "optional": true,
770
+ "type": "boolean",
771
+ "description": "When true, clicking outside the picker area does not close it.\nOnly applies to wheel and compact-wheel modes (popover and modal).\nThe user must explicitly press OK or Cancel to close the picker.",
772
+ "default": "false"
773
+ }
774
+ ]
775
+ },
776
+ "range": {
777
+ "interface": "RangeOptions",
778
+ "options": [
779
+ {
780
+ "name": "enabled",
781
+ "optional": true,
782
+ "type": "boolean",
783
+ "description": "Enable range mode (from-to selection)",
784
+ "default": "false"
785
+ },
786
+ {
787
+ "name": "minDuration",
788
+ "optional": true,
789
+ "type": "number",
790
+ "description": "Minimum duration in minutes"
791
+ },
792
+ {
793
+ "name": "maxDuration",
794
+ "optional": true,
795
+ "type": "number",
796
+ "description": "Maximum duration in minutes"
797
+ },
798
+ {
799
+ "name": "fromLabel",
800
+ "optional": true,
801
+ "type": "string",
802
+ "description": "Label for \"from\" segment",
803
+ "default": "\"From\"",
804
+ "deprecated": "Use `labels.rangeFrom`. Removed in 5.0."
805
+ },
806
+ {
807
+ "name": "toLabel",
808
+ "optional": true,
809
+ "type": "string",
810
+ "description": "Label for \"to\" segment",
811
+ "default": "\"To\"",
812
+ "deprecated": "Use `labels.rangeTo`. Removed in 5.0."
813
+ }
814
+ ]
815
+ },
816
+ "callbacks": {
817
+ "interface": "CallbacksOptions",
818
+ "options": [
819
+ {
820
+ "name": "onOpen",
821
+ "optional": true,
822
+ "type": "TimepickerEventCallback<OpenEventData>",
823
+ "description": "Triggered when timepicker opens"
824
+ },
825
+ {
826
+ "name": "onShow",
827
+ "optional": true,
828
+ "type": "TimepickerEventCallback<ShowEventData>",
829
+ "description": "Triggered when the user activates the input or a `data-open` element (click, Enter or Space) to open the picker, before it renders. `open()` does not trigger it."
830
+ },
831
+ {
832
+ "name": "onCancel",
833
+ "optional": true,
834
+ "type": "TimepickerEventCallback<CancelEventData>",
835
+ "description": "Triggered when user cancels"
836
+ },
837
+ {
838
+ "name": "onConfirm",
839
+ "optional": true,
840
+ "type": "TimepickerEventCallback<ConfirmEventData>",
841
+ "description": "Triggered when user confirms time"
842
+ },
843
+ {
844
+ "name": "onUpdate",
845
+ "optional": true,
846
+ "type": "TimepickerEventCallback<UpdateEventData>",
847
+ "description": "Triggered during interaction (real-time)"
848
+ },
849
+ {
850
+ "name": "onSelectHour",
851
+ "optional": true,
852
+ "type": "TimepickerEventCallback<SelectHourEventData>",
853
+ "description": "Triggered when hour mode is selected"
854
+ },
855
+ {
856
+ "name": "onSelectMinute",
857
+ "optional": true,
858
+ "type": "TimepickerEventCallback<SelectMinuteEventData>",
859
+ "description": "Triggered when minute mode is selected"
860
+ },
861
+ {
862
+ "name": "onSelectSecond",
863
+ "optional": true,
864
+ "type": "TimepickerEventCallback<SelectSecondEventData>",
865
+ "description": "Triggered when second mode is selected (requires `clock.showSeconds`)"
866
+ },
867
+ {
868
+ "name": "onSelectPeriod",
869
+ "optional": true,
870
+ "type": "TimepickerEventCallback<SelectPeriodEventData>",
871
+ "description": "Triggered when AM or PM is selected, with `{ type }`"
872
+ },
873
+ {
874
+ "name": "onSelectAM",
875
+ "optional": true,
876
+ "type": "TimepickerEventCallback<SelectAMEventData>",
877
+ "description": "Triggered when AM is selected",
878
+ "deprecated": "Use `onSelectPeriod`. Removed in 5.0."
879
+ },
880
+ {
881
+ "name": "onSelectPM",
882
+ "optional": true,
883
+ "type": "TimepickerEventCallback<SelectPMEventData>",
884
+ "description": "Triggered when PM is selected",
885
+ "deprecated": "Use `onSelectPeriod`. Removed in 5.0."
886
+ },
887
+ {
888
+ "name": "onSwitchView",
889
+ "optional": true,
890
+ "type": "TimepickerEventCallback<SwitchViewEventData>",
891
+ "description": "Triggered when the switch icon toggles between the clock face and keyboard input (requires `ui.viewSwitch`)"
892
+ },
893
+ {
894
+ "name": "onSwitchFace",
895
+ "optional": true,
896
+ "type": "TimepickerEventCallback<SwitchFaceEventData>",
897
+ "description": "Triggered when the clock face switches between hours, minutes and seconds, with `{ face }`"
898
+ },
899
+ {
900
+ "name": "onError",
901
+ "optional": true,
902
+ "type": "TimepickerEventCallback<ErrorEventData>",
903
+ "description": "Triggered on invalid time format"
904
+ },
905
+ {
906
+ "name": "onTimezoneChange",
907
+ "optional": true,
908
+ "type": "TimepickerEventCallback<TimezoneChangeEventData>",
909
+ "description": "Triggered when timezone is changed (opt-in feature)"
910
+ },
911
+ {
912
+ "name": "onRangeConfirm",
913
+ "optional": true,
914
+ "type": "TimepickerEventCallback<RangeConfirmEventData>",
915
+ "description": "Triggered when range is confirmed (range mode only)"
916
+ },
917
+ {
918
+ "name": "onRangeSwitch",
919
+ "optional": true,
920
+ "type": "TimepickerEventCallback<RangeSwitchEventData>",
921
+ "description": "Triggered when switching between from/to (range mode only)"
922
+ },
923
+ {
924
+ "name": "onRangeValidation",
925
+ "optional": true,
926
+ "type": "TimepickerEventCallback<RangeValidationEventData>",
927
+ "description": "Triggered on range validation (range mode only)"
928
+ },
929
+ {
930
+ "name": "onWheelScrollStart",
931
+ "optional": true,
932
+ "type": "TimepickerEventCallback<WheelScrollStartEventData>",
933
+ "description": "Triggered when a wheel column starts scrolling (wheel and compact-wheel modes)"
934
+ },
935
+ {
936
+ "name": "onWheelScrollEnd",
937
+ "optional": true,
938
+ "type": "TimepickerEventCallback<WheelScrollEndEventData>",
939
+ "description": "Triggered when a wheel column stops scrolling and snaps to a value (wheel and compact-wheel modes)"
940
+ },
941
+ {
942
+ "name": "onClear",
943
+ "optional": true,
944
+ "type": "TimepickerEventCallback<ClearEventData>",
945
+ "description": "Triggered when clear button is clicked"
946
+ }
947
+ ]
948
+ },
949
+ "clearBehavior": {
950
+ "interface": "ClearBehaviorOptions",
951
+ "options": [
952
+ {
953
+ "name": "clearInput",
954
+ "optional": true,
955
+ "type": "boolean",
956
+ "description": "Whether clicking clear also empties the input field value",
957
+ "default": "true",
958
+ "deprecated": "Use `ui.clearButton: { clearInput }`. Removed in 5.0."
959
+ }
960
+ ]
961
+ }
962
+ }