@manzanohq/calendar-lite 0.1.1

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 (63) hide show
  1. package/LICENSE +191 -0
  2. package/cdn/calendar.component.d.ts +146 -0
  3. package/cdn/calendar.component.js +2 -0
  4. package/cdn/calendar.component.js.map +7 -0
  5. package/cdn/calendar.d.ts +9 -0
  6. package/cdn/calendar.js +2 -0
  7. package/cdn/calendar.js.map +7 -0
  8. package/cdn/calendar.styles.d.ts +3 -0
  9. package/cdn/calendar.styles.js +2 -0
  10. package/cdn/calendar.styles.js.map +7 -0
  11. package/cdn/calendar.types.d.ts +99 -0
  12. package/cdn/calendar.types.js +2 -0
  13. package/cdn/calendar.types.js.map +7 -0
  14. package/cdn/chunks/chunk.B6XGWUEF.js +1 -0
  15. package/cdn/chunks/chunk.B6XGWUEF.js.map +7 -0
  16. package/cdn/chunks/chunk.BYWXPW2P.js +2 -0
  17. package/cdn/chunks/chunk.BYWXPW2P.js.map +7 -0
  18. package/cdn/chunks/chunk.EOXXNYIW.js +2 -0
  19. package/cdn/chunks/chunk.EOXXNYIW.js.map +7 -0
  20. package/cdn/chunks/chunk.MGICPQBB.js +2 -0
  21. package/cdn/chunks/chunk.MGICPQBB.js.map +7 -0
  22. package/cdn/chunks/chunk.OEC274YS.js +915 -0
  23. package/cdn/chunks/chunk.OEC274YS.js.map +7 -0
  24. package/cdn/chunks/chunk.PJFNXC5P.js +307 -0
  25. package/cdn/chunks/chunk.PJFNXC5P.js.map +7 -0
  26. package/cdn/index.d.ts +3 -0
  27. package/cdn/index.js +2 -0
  28. package/cdn/index.js.map +7 -0
  29. package/cdn/internal/date-utils.d.ts +74 -0
  30. package/cdn/internal/date-utils.js +2 -0
  31. package/cdn/internal/date-utils.js.map +7 -0
  32. package/cdn/internal/event-layout.d.ts +67 -0
  33. package/cdn/internal/event-layout.js +2 -0
  34. package/cdn/internal/event-layout.js.map +7 -0
  35. package/dist/calendar.component.d.ts +146 -0
  36. package/dist/calendar.component.d.ts.map +1 -0
  37. package/dist/calendar.component.js +1218 -0
  38. package/dist/calendar.component.js.map +7 -0
  39. package/dist/calendar.d.ts +9 -0
  40. package/dist/calendar.d.ts.map +1 -0
  41. package/dist/calendar.js +5 -0
  42. package/dist/calendar.js.map +7 -0
  43. package/dist/calendar.styles.d.ts +3 -0
  44. package/dist/calendar.styles.d.ts.map +1 -0
  45. package/dist/calendar.styles.js +923 -0
  46. package/dist/calendar.styles.js.map +7 -0
  47. package/dist/calendar.types.d.ts +99 -0
  48. package/dist/calendar.types.d.ts.map +1 -0
  49. package/dist/calendar.types.js +1 -0
  50. package/dist/calendar.types.js.map +7 -0
  51. package/dist/index.d.ts +3 -0
  52. package/dist/index.d.ts.map +1 -0
  53. package/dist/index.js +6 -0
  54. package/dist/index.js.map +7 -0
  55. package/dist/internal/date-utils.d.ts +74 -0
  56. package/dist/internal/date-utils.d.ts.map +1 -0
  57. package/dist/internal/date-utils.js +133 -0
  58. package/dist/internal/date-utils.js.map +7 -0
  59. package/dist/internal/event-layout.d.ts +67 -0
  60. package/dist/internal/event-layout.d.ts.map +1 -0
  61. package/dist/internal/event-layout.js +224 -0
  62. package/dist/internal/event-layout.js.map +7 -0
  63. package/package.json +37 -0
@@ -0,0 +1,915 @@
1
+ import{css as r}from"lit";import e from"@manzanohq/components/dist/styles/component.styles.js";var t=[e,r`
2
+ /* ------------------------------------------------------------------ */
3
+ /* Host & public/private custom property pattern */
4
+ /* ------------------------------------------------------------------ */
5
+ :host {
6
+ --_calendar-bg: var(--mz-calendar-bg, var(--mz-color-surface));
7
+ --_calendar-border: var(--mz-calendar-border-color, var(--mz-color-border));
8
+ --_calendar-event-bg: var(--mz-calendar-event-bg, var(--mz-color-primary));
9
+ --_calendar-event-color: var(--mz-calendar-event-color, var(--mz-color-on-primary));
10
+ --_calendar-slot-height: var(--mz-calendar-slot-height, 3.5rem);
11
+ --_calendar-today-bg: var(--mz-calendar-today-bg, color-mix(in srgb, var(--mz-color-primary) 5%, transparent));
12
+ --_calendar-now-color: var(--mz-calendar-now-indicator-color, var(--mz-color-danger));
13
+ --_calendar-gutter-width: var(--mz-calendar-gutter-width, 4.5rem);
14
+ --_calendar-header-bg: var(--mz-calendar-header-bg, var(--mz-color-surface));
15
+
16
+ display: block;
17
+ min-height: var(--mz-calendar-min-height, 400px);
18
+ font-family: var(--mz-font-sans);
19
+ background: var(--_calendar-bg);
20
+ color: var(--mz-color-text);
21
+ border: var(--mz-border-width-sm) solid var(--_calendar-border);
22
+ border-radius: var(--mz-radius-lg);
23
+ overflow: hidden;
24
+ container-type: inline-size;
25
+ container-name: calendar;
26
+ }
27
+
28
+ /* ------------------------------------------------------------------ */
29
+ /* Toolbar */
30
+ /* ------------------------------------------------------------------ */
31
+ .calendar__toolbar {
32
+ display: flex;
33
+ align-items: center;
34
+ gap: var(--mz-space-sm);
35
+ padding: var(--mz-space-sm) var(--mz-space-lg);
36
+ border-bottom: var(--mz-border-width-sm) solid var(--_calendar-border);
37
+ background: var(--_calendar-header-bg);
38
+ flex-wrap: wrap;
39
+ }
40
+
41
+ .calendar__toolbar-nav {
42
+ display: flex;
43
+ align-items: center;
44
+ gap: var(--mz-space-2xs);
45
+ }
46
+
47
+ .calendar__toolbar-title {
48
+ flex: 1;
49
+ font-size: var(--mz-font-size-lg);
50
+ font-weight: var(--mz-font-weight-semibold);
51
+ white-space: nowrap;
52
+ min-width: 0;
53
+ overflow: hidden;
54
+ text-overflow: ellipsis;
55
+ padding-left: var(--mz-space-xs);
56
+ }
57
+
58
+ .calendar__toolbar-views {
59
+ display: flex;
60
+ background: var(--_calendar-border);
61
+ border-radius: var(--mz-radius-sm);
62
+ padding: 1px;
63
+ }
64
+
65
+ .calendar__btn {
66
+ appearance: none;
67
+ border: var(--mz-border-width-sm) solid var(--_calendar-border);
68
+ background: var(--_calendar-bg);
69
+ color: var(--mz-color-text);
70
+ font-family: var(--mz-font-sans);
71
+ font-size: var(--mz-font-size-sm);
72
+ font-weight: var(--mz-font-weight-medium);
73
+ padding: var(--mz-space-2xs) var(--mz-space-sm);
74
+ border-radius: var(--mz-radius-sm);
75
+ cursor: pointer;
76
+ user-select: none;
77
+ white-space: nowrap;
78
+ line-height: 1.5;
79
+ transition: background var(--mz-transition-fast) ease,
80
+ border-color var(--mz-transition-fast) ease,
81
+ color var(--mz-transition-fast) ease;
82
+ }
83
+
84
+ .calendar__btn:hover {
85
+ background: color-mix(in srgb, var(--mz-color-text) 6%, var(--_calendar-bg));
86
+ }
87
+
88
+ .calendar__btn:focus-visible {
89
+ outline: var(--mz-focus-ring);
90
+ outline-offset: var(--mz-focus-ring-offset);
91
+ }
92
+
93
+ /* View toggle buttons — segmented control style */
94
+ .calendar__toolbar-views .calendar__btn {
95
+ border: none;
96
+ border-radius: calc(var(--mz-radius-sm) - 1px);
97
+ padding: var(--mz-space-2xs) var(--mz-space-sm);
98
+ font-size: var(--mz-font-size-xs);
99
+ background: var(--_calendar-bg);
100
+ }
101
+
102
+ .calendar__toolbar-views .calendar__btn:not(:first-child) {
103
+ border-top-left-radius: 0;
104
+ border-bottom-left-radius: 0;
105
+ }
106
+
107
+ .calendar__toolbar-views .calendar__btn:not(:last-child) {
108
+ border-top-right-radius: 0;
109
+ border-bottom-right-radius: 0;
110
+ }
111
+
112
+ .calendar__toolbar-views .calendar__btn:hover {
113
+ background: color-mix(in srgb, var(--mz-color-text) 8%, var(--_calendar-bg));
114
+ }
115
+
116
+ .calendar__btn--active {
117
+ background: var(--mz-color-primary);
118
+ color: var(--mz-color-on-primary);
119
+ border-color: var(--mz-color-primary);
120
+ }
121
+
122
+ .calendar__btn--active:hover {
123
+ background: var(--mz-color-primary);
124
+ }
125
+
126
+ .calendar__toolbar-views .calendar__btn--active {
127
+ background: var(--mz-color-primary);
128
+ color: var(--mz-color-on-primary);
129
+ }
130
+
131
+ .calendar__toolbar-views .calendar__btn--active:hover {
132
+ background: var(--mz-color-primary);
133
+ }
134
+
135
+ /* ------------------------------------------------------------------ */
136
+ /* aria-live region (visually hidden) */
137
+ /* ------------------------------------------------------------------ */
138
+ .calendar__live {
139
+ position: absolute;
140
+ width: 1px;
141
+ height: 1px;
142
+ padding: 0;
143
+ margin: -1px;
144
+ overflow: hidden;
145
+ clip: rect(0, 0, 0, 0);
146
+ white-space: nowrap;
147
+ border: 0;
148
+ }
149
+
150
+ /* ------------------------------------------------------------------ */
151
+ /* Time grid: scroll container (header + allday + body) */
152
+ /* ------------------------------------------------------------------ */
153
+ .calendar__scroll-container {
154
+ overflow-y: auto;
155
+ max-height: var(--mz-calendar-body-height, 800px);
156
+ position: relative;
157
+ }
158
+
159
+ /* Styled scrollbar — subtle, warm */
160
+ .calendar__scroll-container::-webkit-scrollbar {
161
+ width: 6px;
162
+ }
163
+
164
+ .calendar__scroll-container::-webkit-scrollbar-track {
165
+ background: transparent;
166
+ }
167
+
168
+ .calendar__scroll-container::-webkit-scrollbar-thumb {
169
+ background: color-mix(in srgb, var(--mz-color-text) 18%, transparent);
170
+ border-radius: 3px;
171
+ }
172
+
173
+ .calendar__scroll-container::-webkit-scrollbar-thumb:hover {
174
+ background: color-mix(in srgb, var(--mz-color-text) 30%, transparent);
175
+ }
176
+
177
+ :host([no-scroll]) .calendar__scroll-container {
178
+ overflow-y: visible;
179
+ max-height: none;
180
+ }
181
+
182
+ .calendar__sticky-header {
183
+ position: sticky;
184
+ top: 0;
185
+ z-index: 3;
186
+ }
187
+
188
+ /* ------------------------------------------------------------------ */
189
+ /* Time grid: header row (day headers) */
190
+ /* ------------------------------------------------------------------ */
191
+ .calendar__header {
192
+ display: grid;
193
+ grid-template-columns: var(--_calendar-gutter-width) repeat(var(--_day-count, 7), minmax(var(--_calendar-min-col-width, 3rem), 1fr));
194
+ border-bottom: var(--mz-border-width-sm) solid var(--_calendar-border);
195
+ background: var(--_calendar-header-bg);
196
+ }
197
+
198
+ .calendar__gutter-header {
199
+ border-right: var(--mz-border-width-sm) solid var(--_calendar-border);
200
+ }
201
+
202
+ .calendar__day-header {
203
+ display: flex;
204
+ flex-direction: column;
205
+ align-items: center;
206
+ justify-content: center;
207
+ gap: 1px;
208
+ padding: var(--mz-space-xs) var(--mz-space-xs);
209
+ font-size: var(--mz-font-size-2xs);
210
+ font-weight: var(--mz-font-weight-semibold);
211
+ text-transform: uppercase;
212
+ letter-spacing: 0.05em;
213
+ color: color-mix(in srgb, var(--mz-color-text) 55%, transparent);
214
+ border-left: var(--mz-border-width-sm) solid var(--_calendar-border);
215
+ }
216
+
217
+ .calendar__day-header--today {
218
+ color: var(--mz-color-primary);
219
+ }
220
+
221
+ .calendar__day-number {
222
+ display: flex;
223
+ align-items: center;
224
+ justify-content: center;
225
+ width: 1.75rem;
226
+ height: 1.75rem;
227
+ border-radius: 50%;
228
+ font-size: var(--mz-font-size-md);
229
+ font-weight: var(--mz-font-weight-semibold);
230
+ line-height: 1;
231
+ color: var(--mz-color-text);
232
+ }
233
+
234
+ .calendar__day-number--today {
235
+ background: var(--mz-color-primary);
236
+ color: var(--mz-color-on-primary);
237
+ }
238
+
239
+ /* ------------------------------------------------------------------ */
240
+ /* Time grid: all-day row */
241
+ /* ------------------------------------------------------------------ */
242
+ .calendar__allday {
243
+ display: grid;
244
+ grid-template-columns: var(--_calendar-gutter-width) repeat(var(--_day-count, 7), minmax(var(--_calendar-min-col-width, 3rem), 1fr));
245
+ border-bottom: var(--mz-border-width-sm) solid var(--_calendar-border);
246
+ min-height: 2rem;
247
+ position: relative;
248
+ background: var(--_calendar-header-bg);
249
+ }
250
+
251
+ .calendar__allday-label {
252
+ display: flex;
253
+ align-items: center;
254
+ justify-content: flex-end;
255
+ font-size: var(--mz-font-size-2xs);
256
+ color: color-mix(in srgb, var(--mz-color-text) 45%, transparent);
257
+ padding: var(--mz-space-2xs) var(--mz-space-xs);
258
+ border-right: var(--mz-border-width-sm) solid var(--_calendar-border);
259
+ }
260
+
261
+ .calendar__allday-cell {
262
+ position: relative;
263
+ border-left: var(--mz-border-width-sm) solid var(--_calendar-border);
264
+ min-height: 1.75rem;
265
+ padding: var(--mz-space-2xs) var(--mz-space-2xs);
266
+ display: flex;
267
+ flex-direction: column;
268
+ gap: 1px;
269
+ }
270
+
271
+ /* ------------------------------------------------------------------ */
272
+ /* Time grid: body (time slots) */
273
+ /* ------------------------------------------------------------------ */
274
+ .calendar__body {
275
+ display: grid;
276
+ grid-template-columns: var(--_calendar-gutter-width) 1fr;
277
+ position: relative;
278
+ }
279
+
280
+ .calendar__gutter {
281
+ display: flex;
282
+ flex-direction: column;
283
+ border-right: var(--mz-border-width-sm) solid var(--_calendar-border);
284
+ }
285
+
286
+ .calendar__hour-label {
287
+ height: var(--_calendar-slot-height);
288
+ display: flex;
289
+ align-items: flex-start;
290
+ justify-content: flex-end;
291
+ padding-right: var(--mz-space-sm);
292
+ font-size: var(--mz-font-size-2xs);
293
+ font-weight: var(--mz-font-weight-medium);
294
+ color: color-mix(in srgb, var(--mz-color-text) 45%, transparent);
295
+ transform: translateY(-0.5em);
296
+ user-select: none;
297
+ letter-spacing: 0.01em;
298
+ white-space: nowrap;
299
+ }
300
+
301
+ /* Full format shown by default, short hidden */
302
+ .calendar__hour-short {
303
+ display: none;
304
+ }
305
+
306
+ .calendar__grid {
307
+ position: relative;
308
+ display: grid;
309
+ grid-template-rows: repeat(var(--_slot-count, 48), var(--_calendar-slot-height));
310
+ grid-template-columns: repeat(var(--_day-count, 7), minmax(var(--_calendar-min-col-width, 3rem), 1fr));
311
+ }
312
+
313
+ /* Horizontal slot lines */
314
+ .calendar__slot-line {
315
+ grid-column: 1 / -1;
316
+ border-bottom: var(--mz-border-width-sm) solid var(--_calendar-border);
317
+ pointer-events: none;
318
+ }
319
+
320
+ .calendar__slot-line--hour {
321
+ border-bottom-style: solid;
322
+ }
323
+
324
+ .calendar__slot-line--half {
325
+ border-bottom-color: color-mix(in srgb, var(--_calendar-border) 50%, transparent);
326
+ border-bottom-style: solid;
327
+ }
328
+
329
+ /* Vertical day dividers */
330
+ .calendar__day-divider {
331
+ position: absolute;
332
+ top: 0;
333
+ bottom: 0;
334
+ border-left: var(--mz-border-width-sm) solid var(--_calendar-border);
335
+ pointer-events: none;
336
+ z-index: 1;
337
+ }
338
+
339
+ /* Today column highlight */
340
+ .calendar__today-col {
341
+ position: absolute;
342
+ top: 0;
343
+ bottom: 0;
344
+ background: var(--_calendar-today-bg);
345
+ pointer-events: none;
346
+ z-index: 0;
347
+ }
348
+
349
+ /* ------------------------------------------------------------------ */
350
+ /* Events (time grid) */
351
+ /* ------------------------------------------------------------------ */
352
+ .calendar__event {
353
+ position: absolute;
354
+ border-radius: var(--mz-radius-sm);
355
+ padding: var(--mz-space-2xs) var(--mz-space-xs);
356
+ font-size: var(--mz-font-size-xs);
357
+ line-height: 1.35;
358
+ overflow: hidden;
359
+ cursor: pointer;
360
+ user-select: none;
361
+ z-index: 2;
362
+ background: var(--_event-bg, var(--_calendar-event-bg));
363
+ color: var(--_event-color, var(--_calendar-event-color));
364
+ border-left: 3px solid color-mix(in srgb, var(--_event-bg, var(--_calendar-event-bg)) 70%, #000);
365
+ transition: box-shadow var(--mz-transition-fast) ease;
366
+ }
367
+
368
+ .calendar__event:hover {
369
+ box-shadow: var(--mz-shadow-md);
370
+ z-index: 4;
371
+ }
372
+
373
+ .calendar__event:focus-visible {
374
+ outline: var(--mz-focus-ring);
375
+ outline-offset: var(--mz-focus-ring-offset);
376
+ z-index: 5;
377
+ }
378
+
379
+ .calendar__event-title {
380
+ font-weight: var(--mz-font-weight-semibold);
381
+ white-space: nowrap;
382
+ overflow: hidden;
383
+ text-overflow: ellipsis;
384
+ }
385
+
386
+ .calendar__event-time {
387
+ font-size: var(--mz-font-size-2xs);
388
+ opacity: 0.8;
389
+ white-space: nowrap;
390
+ overflow: hidden;
391
+ text-overflow: ellipsis;
392
+ }
393
+
394
+ /* Resize handle at bottom of event */
395
+ .calendar__event-resize {
396
+ position: absolute;
397
+ bottom: 0;
398
+ left: 0;
399
+ right: 0;
400
+ height: 8px;
401
+ cursor: s-resize;
402
+ z-index: 3;
403
+ }
404
+
405
+ .calendar__event-resize::after {
406
+ content: '';
407
+ position: absolute;
408
+ bottom: 2px;
409
+ left: 50%;
410
+ transform: translateX(-50%);
411
+ width: 1.5rem;
412
+ height: 2px;
413
+ border-radius: 1px;
414
+ background: currentColor;
415
+ opacity: 0;
416
+ transition: opacity var(--mz-transition-fast) ease;
417
+ }
418
+
419
+ .calendar__event:hover .calendar__event-resize::after {
420
+ opacity: 0.5;
421
+ }
422
+
423
+ /* All-day event in the all-day row */
424
+ .calendar__allday-event {
425
+ display: block;
426
+ border-radius: var(--mz-radius-sm);
427
+ padding: 2px var(--mz-space-xs);
428
+ font-size: var(--mz-font-size-xs);
429
+ font-weight: var(--mz-font-weight-semibold);
430
+ line-height: 1.5;
431
+ overflow: hidden;
432
+ white-space: nowrap;
433
+ text-overflow: ellipsis;
434
+ cursor: pointer;
435
+ user-select: none;
436
+ background: var(--_event-bg, var(--_calendar-event-bg));
437
+ color: var(--_event-color, var(--_calendar-event-color));
438
+ }
439
+
440
+ .calendar__allday-event:hover {
441
+ box-shadow: var(--mz-shadow-sm);
442
+ }
443
+
444
+ .calendar__allday-event:focus-visible {
445
+ outline: var(--mz-focus-ring);
446
+ outline-offset: var(--mz-focus-ring-offset);
447
+ }
448
+
449
+ /* ------------------------------------------------------------------ */
450
+ /* Now indicator */
451
+ /* ------------------------------------------------------------------ */
452
+ .calendar__now-indicator {
453
+ position: absolute;
454
+ left: 0;
455
+ right: 0;
456
+ height: 2px;
457
+ background: var(--_calendar-now-color);
458
+ z-index: 6;
459
+ pointer-events: none;
460
+ }
461
+
462
+ .calendar__now-indicator::before {
463
+ content: '';
464
+ position: absolute;
465
+ left: -4px;
466
+ top: -3px;
467
+ width: 8px;
468
+ height: 8px;
469
+ border-radius: 50%;
470
+ background: var(--_calendar-now-color);
471
+ }
472
+
473
+ /* ------------------------------------------------------------------ */
474
+ /* Drag selection highlight */
475
+ /* ------------------------------------------------------------------ */
476
+ .calendar__drag-selection {
477
+ position: absolute;
478
+ background: color-mix(in srgb, var(--mz-color-primary) 15%, transparent);
479
+ border: 2px solid color-mix(in srgb, var(--mz-color-primary) 60%, transparent);
480
+ border-radius: var(--mz-radius-sm);
481
+ z-index: 3;
482
+ pointer-events: none;
483
+ }
484
+
485
+ /* ------------------------------------------------------------------ */
486
+ /* Month grid */
487
+ /* ------------------------------------------------------------------ */
488
+ .calendar__month-grid {
489
+ display: grid;
490
+ grid-template-columns: repeat(7, minmax(0, 1fr));
491
+ flex: 1;
492
+ }
493
+
494
+ .calendar__month-weekday {
495
+ display: flex;
496
+ align-items: center;
497
+ justify-content: center;
498
+ padding: var(--mz-space-sm) var(--mz-space-xs);
499
+ font-size: var(--mz-font-size-2xs);
500
+ font-weight: var(--mz-font-weight-semibold);
501
+ text-transform: uppercase;
502
+ letter-spacing: 0.06em;
503
+ color: color-mix(in srgb, var(--mz-color-text) 50%, transparent);
504
+ border-bottom: var(--mz-border-width-sm) solid var(--_calendar-border);
505
+ min-width: 0;
506
+ }
507
+
508
+ .calendar__month-cell {
509
+ min-height: 5.5rem;
510
+ padding: var(--mz-space-2xs) var(--mz-space-xs);
511
+ border-bottom: var(--mz-border-width-sm) solid var(--_calendar-border);
512
+ border-right: var(--mz-border-width-sm) solid var(--_calendar-border);
513
+ position: relative;
514
+ overflow: hidden;
515
+ min-width: 0;
516
+ }
517
+
518
+ .calendar__month-cell:nth-child(7n) {
519
+ border-right: none;
520
+ }
521
+
522
+ .calendar__month-cell--outside {
523
+ background: color-mix(in srgb, var(--mz-color-text) 2%, var(--_calendar-bg));
524
+ }
525
+
526
+ .calendar__month-cell--today {
527
+ background: var(--_calendar-today-bg);
528
+ }
529
+
530
+ .calendar__month-date {
531
+ display: flex;
532
+ align-items: center;
533
+ justify-content: center;
534
+ width: 1.5rem;
535
+ height: 1.5rem;
536
+ font-size: var(--mz-font-size-xs);
537
+ font-weight: var(--mz-font-weight-medium);
538
+ margin-bottom: var(--mz-space-2xs);
539
+ }
540
+
541
+ .calendar__month-date--today {
542
+ background: var(--mz-color-primary);
543
+ color: var(--mz-color-on-primary);
544
+ border-radius: 50%;
545
+ font-weight: var(--mz-font-weight-semibold);
546
+ }
547
+
548
+ .calendar__month-date--outside {
549
+ opacity: 0.35;
550
+ }
551
+
552
+ .calendar__month-event {
553
+ display: block;
554
+ border-radius: var(--mz-radius-sm);
555
+ padding: 2px var(--mz-space-xs);
556
+ font-size: var(--mz-font-size-xs);
557
+ font-weight: var(--mz-font-weight-medium);
558
+ line-height: 1.4;
559
+ overflow: hidden;
560
+ white-space: nowrap;
561
+ text-overflow: ellipsis;
562
+ cursor: pointer;
563
+ user-select: none;
564
+ background: var(--_event-bg, var(--_calendar-event-bg));
565
+ color: var(--_event-color, var(--_calendar-event-color));
566
+ margin-bottom: 2px;
567
+ }
568
+
569
+ .calendar__month-event:hover {
570
+ box-shadow: var(--mz-shadow-sm);
571
+ }
572
+
573
+ .calendar__month-event:focus-visible {
574
+ outline: var(--mz-focus-ring);
575
+ outline-offset: var(--mz-focus-ring-offset);
576
+ }
577
+
578
+ .calendar__month-overflow {
579
+ font-size: var(--mz-font-size-xs);
580
+ color: color-mix(in srgb, var(--mz-color-text) 50%, transparent);
581
+ padding: 2px var(--mz-space-xs);
582
+ cursor: pointer;
583
+ user-select: none;
584
+ font-weight: var(--mz-font-weight-medium);
585
+ }
586
+
587
+ .calendar__month-overflow:hover {
588
+ color: var(--mz-color-primary);
589
+ }
590
+
591
+ /* ------------------------------------------------------------------ */
592
+ /* List view */
593
+ /* ------------------------------------------------------------------ */
594
+ .calendar__list {
595
+ display: flex;
596
+ flex-direction: column;
597
+ }
598
+
599
+ .calendar__list-day {
600
+ border-bottom: var(--mz-border-width-sm) solid var(--_calendar-border);
601
+ }
602
+
603
+ .calendar__list-day-header {
604
+ display: flex;
605
+ gap: var(--mz-space-sm);
606
+ padding: var(--mz-space-sm) var(--mz-space-lg);
607
+ font-size: var(--mz-font-size-sm);
608
+ font-weight: var(--mz-font-weight-semibold);
609
+ background: color-mix(in srgb, var(--mz-color-text) 3%, var(--_calendar-bg));
610
+ }
611
+
612
+ .calendar__list-event {
613
+ display: flex;
614
+ align-items: center;
615
+ gap: var(--mz-space-sm);
616
+ padding: var(--mz-space-sm) var(--mz-space-lg);
617
+ cursor: pointer;
618
+ transition: background var(--mz-transition-fast) ease;
619
+ }
620
+
621
+ .calendar__list-event:hover {
622
+ background: color-mix(in srgb, var(--mz-color-text) 4%, var(--_calendar-bg));
623
+ }
624
+
625
+ .calendar__list-event:focus-visible {
626
+ outline: var(--mz-focus-ring);
627
+ outline-offset: var(--mz-focus-ring-offset);
628
+ }
629
+
630
+ .calendar__list-event-dot {
631
+ width: 0.5rem;
632
+ height: 0.5rem;
633
+ border-radius: 50%;
634
+ background: var(--_event-bg, var(--_calendar-event-bg));
635
+ flex-shrink: 0;
636
+ }
637
+
638
+ .calendar__list-event-time {
639
+ font-size: var(--mz-font-size-xs);
640
+ color: color-mix(in srgb, var(--mz-color-text) 50%, transparent);
641
+ min-width: 6rem;
642
+ }
643
+
644
+ .calendar__list-event-title {
645
+ font-size: var(--mz-font-size-sm);
646
+ font-weight: var(--mz-font-weight-medium);
647
+ flex: 1;
648
+ overflow: hidden;
649
+ white-space: nowrap;
650
+ text-overflow: ellipsis;
651
+ }
652
+
653
+ /* ------------------------------------------------------------------ */
654
+ /* Resource headers */
655
+ /* ------------------------------------------------------------------ */
656
+ .calendar__resource-header {
657
+ display: flex;
658
+ align-items: center;
659
+ justify-content: center;
660
+ padding: var(--mz-space-sm) var(--mz-space-sm);
661
+ font-size: var(--mz-font-size-xs);
662
+ font-weight: var(--mz-font-weight-semibold);
663
+ border-left: var(--mz-border-width-sm) solid var(--_calendar-border);
664
+ text-align: center;
665
+ }
666
+
667
+ /* Resource timeline */
668
+ .calendar__timeline {
669
+ display: grid;
670
+ overflow-x: auto;
671
+ }
672
+
673
+ .calendar__timeline-resource-label {
674
+ display: flex;
675
+ align-items: center;
676
+ padding: var(--mz-space-sm) var(--mz-space-md);
677
+ font-size: var(--mz-font-size-sm);
678
+ font-weight: var(--mz-font-weight-medium);
679
+ border-bottom: var(--mz-border-width-sm) solid var(--_calendar-border);
680
+ border-right: var(--mz-border-width-sm) solid var(--_calendar-border);
681
+ min-width: 8rem;
682
+ background: var(--_calendar-header-bg);
683
+ }
684
+
685
+ .calendar__timeline-row {
686
+ display: grid;
687
+ grid-template-columns: repeat(var(--_slot-count, 48), var(--_calendar-slot-height));
688
+ border-bottom: var(--mz-border-width-sm) solid var(--_calendar-border);
689
+ position: relative;
690
+ min-height: 2.5rem;
691
+ }
692
+
693
+ .calendar__timeline-slot {
694
+ border-right: var(--mz-border-width-sm) solid var(--_calendar-border);
695
+ }
696
+
697
+ .calendar__timeline-slot--hour {
698
+ border-right-style: solid;
699
+ }
700
+
701
+ .calendar__timeline-slot--half {
702
+ border-right-color: color-mix(in srgb, var(--_calendar-border) 50%, transparent);
703
+ border-right-style: solid;
704
+ }
705
+
706
+ /* ------------------------------------------------------------------ */
707
+ /* Empty state */
708
+ /* ------------------------------------------------------------------ */
709
+ .calendar__empty {
710
+ display: flex;
711
+ align-items: center;
712
+ justify-content: center;
713
+ padding: var(--mz-space-lg);
714
+ color: color-mix(in srgb, var(--mz-color-text) 40%, transparent);
715
+ font-size: var(--mz-font-size-sm);
716
+ font-style: italic;
717
+ }
718
+
719
+ /* ------------------------------------------------------------------ */
720
+ /* Responsive: compact (tablet-ish, ≤768px container) */
721
+ /* ------------------------------------------------------------------ */
722
+ @container calendar (max-width: 768px) {
723
+ .calendar__toolbar {
724
+ padding: var(--mz-space-xs) var(--mz-space-sm);
725
+ gap: var(--mz-space-xs);
726
+ }
727
+
728
+ .calendar__toolbar-title {
729
+ font-size: var(--mz-font-size-md);
730
+ padding-left: var(--mz-space-2xs);
731
+ }
732
+
733
+ .calendar {
734
+ --_calendar-gutter-width: 3.5rem;
735
+ }
736
+
737
+ .calendar__month-cell {
738
+ min-height: 4.5rem;
739
+ }
740
+ }
741
+
742
+ /* ------------------------------------------------------------------ */
743
+ /* Responsive: narrow (mobile, ≤540px container) */
744
+ /* ------------------------------------------------------------------ */
745
+ @container calendar (max-width: 540px) {
746
+ .calendar__scroll-container {
747
+ max-height: var(--mz-calendar-body-height, 500px);
748
+ }
749
+
750
+ .calendar__toolbar {
751
+ padding: var(--mz-space-xs) var(--mz-space-sm);
752
+ gap: var(--mz-space-2xs);
753
+ }
754
+
755
+ /* Title on its own row */
756
+ .calendar__toolbar-title {
757
+ font-size: var(--mz-font-size-sm);
758
+ font-weight: var(--mz-font-weight-semibold);
759
+ padding-left: 0;
760
+ order: -1;
761
+ flex-basis: 100%;
762
+ }
763
+
764
+ .calendar__toolbar-nav {
765
+ gap: 2px;
766
+ }
767
+
768
+ .calendar__toolbar-views .calendar__btn {
769
+ padding: 3px var(--mz-space-xs);
770
+ font-size: 0.6875rem;
771
+ }
772
+
773
+ .calendar__btn {
774
+ padding: var(--mz-space-2xs) var(--mz-space-xs);
775
+ font-size: var(--mz-font-size-xs);
776
+ line-height: 1.4;
777
+ }
778
+
779
+ .calendar {
780
+ --_calendar-gutter-width: 2.75rem;
781
+ --_calendar-slot-height: var(--mz-calendar-slot-height, 2.75rem);
782
+ }
783
+
784
+ .calendar__hour-label {
785
+ font-size: 0.625rem;
786
+ padding-right: var(--mz-space-2xs);
787
+ letter-spacing: -0.01em;
788
+ }
789
+
790
+ /* Swap to short hour format (e.g. "9 AM" instead of "9:00 AM") */
791
+ .calendar__hour-full {
792
+ display: none;
793
+ }
794
+
795
+ .calendar__hour-short {
796
+ display: inline;
797
+ }
798
+
799
+ .calendar__allday-label {
800
+ font-size: 0.5625rem;
801
+ padding: var(--mz-space-2xs) 2px;
802
+ }
803
+
804
+ .calendar__day-header {
805
+ padding: var(--mz-space-2xs) 0;
806
+ font-size: 0.5625rem;
807
+ letter-spacing: 0.02em;
808
+ }
809
+
810
+ .calendar__day-number {
811
+ width: 1.375rem;
812
+ height: 1.375rem;
813
+ font-size: var(--mz-font-size-xs);
814
+ }
815
+
816
+ .calendar__event {
817
+ padding: 2px var(--mz-space-2xs);
818
+ font-size: 0.6875rem;
819
+ line-height: 1.3;
820
+ border-left-width: 2px;
821
+ }
822
+
823
+ .calendar__event-time {
824
+ font-size: 0.5625rem;
825
+ }
826
+
827
+ .calendar__allday-event {
828
+ font-size: 0.6875rem;
829
+ padding: 1px var(--mz-space-2xs);
830
+ }
831
+
832
+ .calendar__month-cell {
833
+ min-height: 3.25rem;
834
+ padding: 2px;
835
+ }
836
+
837
+ .calendar__month-date {
838
+ width: 1.25rem;
839
+ height: 1.25rem;
840
+ font-size: 0.625rem;
841
+ }
842
+
843
+ .calendar__month-event {
844
+ font-size: 0.625rem;
845
+ padding: 1px 3px;
846
+ line-height: 1.35;
847
+ border-radius: 2px;
848
+ }
849
+
850
+ .calendar__month-overflow {
851
+ font-size: 0.625rem;
852
+ padding: 1px 3px;
853
+ }
854
+
855
+ .calendar__month-weekday {
856
+ padding: var(--mz-space-2xs) 0;
857
+ font-size: 0.5625rem;
858
+ }
859
+
860
+ /* List view — tighter on mobile */
861
+ .calendar__list-event {
862
+ padding: var(--mz-space-xs) var(--mz-space-sm);
863
+ gap: var(--mz-space-xs);
864
+ }
865
+
866
+ .calendar__list-event-time {
867
+ font-size: 0.6875rem;
868
+ min-width: 4.5rem;
869
+ }
870
+
871
+ .calendar__list-event-title {
872
+ font-size: var(--mz-font-size-xs);
873
+ }
874
+
875
+ .calendar__list-day-header {
876
+ padding: var(--mz-space-xs) var(--mz-space-sm);
877
+ font-size: var(--mz-font-size-xs);
878
+ }
879
+
880
+ /* Resource headers tighter */
881
+ .calendar__resource-header {
882
+ padding: var(--mz-space-xs) var(--mz-space-2xs);
883
+ font-size: 0.625rem;
884
+ }
885
+ }
886
+
887
+ /* ------------------------------------------------------------------ */
888
+ /* Touch: larger hit targets */
889
+ /* ------------------------------------------------------------------ */
890
+ @media (pointer: coarse) {
891
+ .calendar__btn {
892
+ min-height: 2.25rem;
893
+ min-width: 2.25rem;
894
+ }
895
+
896
+ .calendar__event-resize {
897
+ height: 12px;
898
+ }
899
+
900
+ .calendar__month-event {
901
+ min-height: 1.375rem;
902
+ line-height: 1.375rem;
903
+ }
904
+
905
+ .calendar__allday-event {
906
+ min-height: 1.375rem;
907
+ line-height: 1.375rem;
908
+ }
909
+
910
+ .calendar__list-event {
911
+ min-height: 2.5rem;
912
+ }
913
+ }
914
+ `];export{t as a};
915
+ //# sourceMappingURL=chunk.OEC274YS.js.map