@nomideusz/svelte-calendar 0.6.8 → 0.7.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 (18) hide show
  1. package/README.md +88 -2
  2. package/dist/calendar/Calendar.svelte +129 -47
  3. package/dist/primitives/DayHeader.svelte +5 -5
  4. package/dist/primitives/EmptySlot.svelte +4 -4
  5. package/dist/primitives/EventBlock.svelte +13 -13
  6. package/dist/primitives/NowIndicator.svelte +1 -1
  7. package/dist/primitives/TimeGutter.svelte +4 -4
  8. package/dist/views/agenda/AgendaDay.svelte +35 -157
  9. package/dist/views/agenda/AgendaWeek.svelte +20 -109
  10. package/dist/views/mobile/MobileDay.svelte +3 -3
  11. package/dist/views/mobile/MobileWeek.svelte +4 -4
  12. package/dist/views/planner/PlannerDay.svelte +21 -135
  13. package/dist/views/planner/PlannerWeek.svelte +39 -99
  14. package/dist/views/shared/context.svelte.d.ts +0 -1
  15. package/dist/views/shared/context.svelte.js +0 -1
  16. package/package.json +15 -15
  17. package/widget/svelte-calendar.css +2717 -1
  18. package/widget/widget.js +10605 -6
package/dist/views/agenda/AgendaDay.svelte CHANGED
@@ -46,9 +46,7 @@
46
46
 
47
47
  const clock = createClock();
48
48
  const viewState = $derived(ctx.viewState);
49
- const showNav = $derived(ctx.showNav);
50
49
  const equalDays = $derived(ctx.equalDays);
51
- const showDates = $derived(ctx.showDates);
52
50
  const isMobile = $derived(ctx.isMobile);
53
51
  const autoHeight = $derived(ctx.autoHeight);
54
52
  const compact = $derived(ctx.compact);
@@ -99,18 +97,6 @@
99
97
  const isToday = $derived(dayMs === clock.today);
100
98
  const isPastDay = $derived(equalDays ? false : dayMs < clock.today);
101
99
 
102
- const dateLabel = $derived(
103
- showDates
104
- ? new Date(dayMs).toLocaleDateString(locale ?? 'en-US', {
105
- weekday: 'long',
106
- month: 'long',
107
- day: 'numeric',
108
- })
109
- : new Date(dayMs).toLocaleDateString(locale ?? 'en-US', {
110
- weekday: 'long',
111
- })
112
- );
113
-
114
100
  /** All events for this day, sorted chronologically */
115
101
  const dayEvents = $derived.by((): TimelineEvent[] => {
116
102
  return events
@@ -402,113 +388,9 @@
402
388
  {/if}
403
389
  </div>
404
390
 
405
- {#if !isMobile}
406
- <div class="ag-date-label">{dateLabel}</div>
407
- {/if}
408
-
409
- <!-- ── Floating nav pills (desktop only — mobile uses Calendar header) ── -->
410
- {#if showNav && !isMobile}
411
- <nav class="ag-nav" aria-label={L.dayNavigation}>
412
- <button
413
- class="ag-nav-pill ag-nav-today"
414
- class:ag-nav-today--hidden={isToday}
415
- onclick={() => viewState?.goToday()}
416
- aria-label={L.goToToday}
417
- tabindex={isToday ? -1 : 0}
418
- >
419
- {L.today}
420
- </button>
421
- <button
422
- class="ag-nav-pill"
423
- onclick={() => viewState?.prev()}
424
- aria-label={L.previousDay}
425
- >
426
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><path d="M10 3 5 8l5 5"/></svg>
427
- </button>
428
- <button
429
- class="ag-nav-pill"
430
- onclick={() => viewState?.next()}
431
- aria-label={L.nextDay}
432
- >
433
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg>
434
- </button>
435
- </nav>
436
- {/if}
437
391
  </div>
438
392
 
439
393
  <style>
440
- /* ═══ Floating date label ═══ */
441
- .ag-date-label {
442
- position: absolute;
443
- top: 10px;
444
- left: 50%;
445
- transform: translateX(-50%);
446
- z-index: 20;
447
- font: 600 11px/1 var(--dt-sans, system-ui, sans-serif);
448
- letter-spacing: 0.04em;
449
- text-transform: uppercase;
450
- color: var(--dt-text, rgba(226, 232, 240, 0.85));
451
- background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
452
- backdrop-filter: blur(6px);
453
- -webkit-backdrop-filter: blur(6px);
454
- padding: 8px 16px;
455
- border-radius: 8px;
456
- border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
457
- pointer-events: none;
458
- white-space: nowrap;
459
- }
460
-
461
- /* ═══ Floating nav pills ═══ */
462
- .ag-nav {
463
- position: absolute;
464
- top: 10px;
465
- right: 14px;
466
- z-index: 20;
467
- display: flex;
468
- gap: 2px;
469
- background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
470
- backdrop-filter: blur(6px);
471
- -webkit-backdrop-filter: blur(6px);
472
- border-radius: 8px;
473
- padding: 2px;
474
- border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
475
- }
476
- .ag-nav-pill {
477
- border: none;
478
- background: transparent;
479
- color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
480
- cursor: pointer;
481
- font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
482
- padding: 6px 12px;
483
- border-radius: 6px;
484
- letter-spacing: 0.04em;
485
- text-transform: uppercase;
486
- transition: background 100ms, color 100ms;
487
- display: inline-flex;
488
- align-items: center;
489
- justify-content: center;
490
- }
491
- .ag-nav-pill:hover {
492
- color: var(--dt-text, rgba(226, 232, 240, 0.85));
493
- }
494
- .ag-nav-today {
495
- max-width: 60px;
496
- overflow: hidden;
497
- white-space: nowrap;
498
- transition: max-width 250ms ease, padding 250ms ease, opacity 200ms ease;
499
- }
500
- .ag-nav-today--hidden {
501
- max-width: 0;
502
- padding-left: 0;
503
- padding-right: 0;
504
- opacity: 0;
505
- pointer-events: none;
506
- }
507
- .ag-nav-pill:focus-visible {
508
- outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
509
- outline-offset: 2px;
510
- }
511
-
512
394
  /* ═══ Container ═══ */
513
395
  .ag {
514
396
  position: relative;
@@ -520,7 +402,7 @@
520
402
  width: 100%;
521
403
  min-width: 0;
522
404
  box-sizing: border-box;
523
- color: var(--dt-text, rgba(255, 255, 255, 0.92));
405
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
524
406
  font-family: var(--dt-sans, system-ui, sans-serif);
525
407
  }
526
408
 
@@ -531,8 +413,8 @@
531
413
  135deg,
532
414
  transparent,
533
415
  transparent 6px,
534
- color-mix(in srgb, var(--dt-text, rgba(255, 255, 255, 0.92)) 4%, transparent) 6px,
535
- color-mix(in srgb, var(--dt-text, rgba(255, 255, 255, 0.92)) 4%, transparent) 12px
416
+ color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent) 6px,
417
+ color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent) 12px
536
418
  );
537
419
  }
538
420
 
@@ -545,12 +427,11 @@
545
427
  flex-direction: column;
546
428
  overflow-y: auto;
547
429
  overflow-x: hidden;
548
- padding-top: 44px;
430
+ padding-top: 8px;
549
431
  scrollbar-width: thin;
550
432
  scrollbar-color: var(--dt-border) transparent;
551
433
  }
552
434
  .ag--auto .ag-body { overflow-y: visible; min-height: auto; }
553
- .ag--mobile .ag-body { padding-top: 8px; }
554
435
  .ag-body::-webkit-scrollbar {
555
436
  width: 4px;
556
437
  }
@@ -565,13 +446,13 @@
565
446
  align-items: center;
566
447
  gap: 8px;
567
448
  padding: 6px 16px;
568
- border-bottom: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
449
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
569
450
  }
570
451
  .ag-allday-label {
571
452
  font: 600 10px/1 var(--dt-sans, system-ui, sans-serif);
572
453
  text-transform: uppercase;
573
454
  letter-spacing: 0.06em;
574
- color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
455
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
575
456
  white-space: nowrap;
576
457
  flex-shrink: 0;
577
458
  }
@@ -612,7 +493,7 @@
612
493
  }
613
494
  .ag-allday-title {
614
495
  font: 500 0.75rem/1.2 var(--dt-sans, system-ui, sans-serif);
615
- color: var(--dt-text, rgba(226, 232, 240, 0.85));
496
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
616
497
  white-space: nowrap;
617
498
  }
618
499
 
@@ -622,7 +503,7 @@
622
503
  align-items: stretch;
623
504
  border-radius: 10px;
624
505
  background: color-mix(in srgb, var(--ev-color) 15%, var(--dt-surface, var(--dt-bg, #ffffff)));
625
- border: 1px solid color-mix(in srgb, var(--ev-color) 10%, var(--dt-border, rgba(255, 255, 255, 0.06)));
506
+ border: 1px solid color-mix(in srgb, var(--ev-color) 10%, var(--dt-border, rgba(0, 0, 0, 0.08)));
626
507
  overflow: hidden;
627
508
  cursor: pointer;
628
509
  transition: background 150ms, border-color 150ms;
@@ -681,22 +562,22 @@
681
562
  }
682
563
  .ag-card-meta {
683
564
  font-size: 11px;
684
- color: var(--dt-text-2, rgba(255, 255, 255, 0.5));
565
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
685
566
  font-family: var(--dt-mono, monospace);
686
567
  line-height: 1;
687
568
  }
688
569
  .ag-card-dur {
689
570
  margin-left: 6px;
690
- color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
571
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
691
572
  }
692
573
  .ag-card-sub {
693
574
  font-size: 11px;
694
- color: var(--dt-text-2, rgba(255, 255, 255, 0.45));
575
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
695
576
  line-height: 1;
696
577
  }
697
578
  .ag-card-loc {
698
579
  font-size: 10px;
699
- color: var(--dt-text-3, rgba(255, 255, 255, 0.35));
580
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
700
581
  line-height: 1;
701
582
  }
702
583
  .ag-card-tags {
@@ -763,7 +644,7 @@
763
644
  .ag-card-order {
764
645
  font-size: 10px;
765
646
  font-weight: 700;
766
- color: var(--dt-text-3, rgba(255, 255, 255, 0.2));
647
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
767
648
  font-family: var(--dt-mono, monospace);
768
649
  flex-shrink: 0;
769
650
  }
@@ -802,7 +683,7 @@
802
683
  }
803
684
  .ag--mobile .ag-q-status {
804
685
  border-right: none;
805
- border-bottom: 1px solid var(--dt-border, rgba(255, 255, 255, 0.06));
686
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
806
687
  padding-bottom: 10px;
807
688
  margin-bottom: 8px;
808
689
  overflow-y: visible;
@@ -837,15 +718,12 @@
837
718
  .ag--mobile .ag-card--plan .ag-card-title {
838
719
  font-size: 15px;
839
720
  }
840
- .ag--mobile .ag-nav-pill {
841
- padding: 10px 16px;
842
- }
843
721
  .ag-q-label {
844
722
  font-size: 8px;
845
723
  font-weight: 600;
846
724
  letter-spacing: 0.14em;
847
725
  text-transform: uppercase;
848
- color: var(--dt-text-3, rgba(255, 255, 255, 0.25));
726
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
849
727
  margin-bottom: 8px;
850
728
  padding: 0 12px;
851
729
  font-family: var(--dt-sans, system-ui, sans-serif);
@@ -857,13 +735,13 @@
857
735
  flex: 1;
858
736
  font-size: 13px;
859
737
  font-weight: 300;
860
- color: var(--dt-text-3, rgba(255, 255, 255, 0.25));
738
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
861
739
  }
862
740
 
863
741
  /* ── NOW column (includes Done above) ── */
864
742
  .ag-q-status {
865
743
  padding: 0 10px 0 14px;
866
- border-right: 1px solid var(--dt-border, rgba(255, 255, 255, 0.06));
744
+ border-right: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
867
745
  display: flex;
868
746
  flex-direction: column;
869
747
  overflow-y: auto;
@@ -875,7 +753,7 @@
875
753
  .ag-q-done-section {
876
754
  margin-bottom: 10px;
877
755
  padding-bottom: 8px;
878
- border-bottom: 1px solid var(--dt-border, rgba(255, 255, 255, 0.06));
756
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
879
757
  }
880
758
  .ag-q-clock {
881
759
  font-size: 10px;
@@ -920,7 +798,7 @@
920
798
  font-size: 11px;
921
799
  font-weight: 600;
922
800
  line-height: 1.2;
923
- color: var(--dt-text, rgba(255, 255, 255, 0.92));
801
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
924
802
  white-space: nowrap;
925
803
  overflow: hidden;
926
804
  text-overflow: ellipsis;
@@ -929,12 +807,12 @@
929
807
  .ag-q-now-time {
930
808
  font-size: 9px;
931
809
  font-family: var(--dt-mono, monospace);
932
- color: var(--dt-text-3, rgba(255, 255, 255, 0.35));
810
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
933
811
  margin-bottom: 6px;
934
812
  }
935
813
  .ag-q-now-track {
936
814
  height: 2px;
937
- background: var(--dt-border, rgba(255, 255, 255, 0.06));
815
+ background: var(--dt-border, rgba(0, 0, 0, 0.08));
938
816
  border-radius: 1px;
939
817
  overflow: hidden;
940
818
  }
@@ -951,7 +829,7 @@
951
829
  .ag-q-free-label {
952
830
  font-size: 12px;
953
831
  font-weight: 300;
954
- color: var(--dt-text-3, rgba(255, 255, 255, 0.25));
832
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
955
833
  margin-bottom: 2px;
956
834
  }
957
835
 
@@ -989,18 +867,18 @@
989
867
  }
990
868
  .ag-q-done-check {
991
869
  font-size: 9px;
992
- color: var(--dt-success, rgba(120, 200, 140, 0.7));
870
+ color: var(--dt-success, rgba(22, 163, 74, 0.7));
993
871
  flex-shrink: 0;
994
872
  }
995
873
  .ag-q-done-title {
996
874
  font-size: 10px;
997
875
  line-height: 1.2;
998
- color: var(--dt-text-3, rgba(255, 255, 255, 0.35));
876
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
999
877
  white-space: nowrap;
1000
878
  overflow: hidden;
1001
879
  text-overflow: ellipsis;
1002
880
  text-decoration: line-through;
1003
- text-decoration-color: var(--dt-text-3, rgba(255, 255, 255, 0.15));
881
+ text-decoration-color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1004
882
  }
1005
883
 
1006
884
  /* ═══ Past Day: "The Log" ═══ */
@@ -1019,7 +897,7 @@
1019
897
  align-items: center;
1020
898
  gap: 10px;
1021
899
  padding: 8px 0;
1022
- border-bottom: 1px solid var(--dt-border, rgba(255, 255, 255, 0.04));
900
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
1023
901
  cursor: pointer;
1024
902
  transition: opacity 150ms;
1025
903
  }
@@ -1042,13 +920,13 @@
1042
920
  }
1043
921
  .ag-log-check {
1044
922
  font-size: 10px;
1045
- color: var(--dt-success, rgba(120, 200, 140, 0.5));
923
+ color: var(--dt-success, rgba(22, 163, 74, 0.7));
1046
924
  flex-shrink: 0;
1047
925
  }
1048
926
  .ag-log-time {
1049
927
  font-size: 11px;
1050
928
  font-family: var(--dt-mono, monospace);
1051
- color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
929
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1052
930
  width: 64px;
1053
931
  flex-shrink: 0;
1054
932
  }
@@ -1063,18 +941,18 @@
1063
941
  font-size: 13px;
1064
942
  font-weight: 500;
1065
943
  line-height: 1.2;
1066
- color: var(--dt-text-2, rgba(255, 255, 255, 0.55));
944
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
1067
945
  flex: 1;
1068
946
  white-space: nowrap;
1069
947
  overflow: hidden;
1070
948
  text-overflow: ellipsis;
1071
949
  text-decoration: line-through;
1072
- text-decoration-color: var(--dt-border, rgba(255, 255, 255, 0.08));
950
+ text-decoration-color: var(--dt-border, rgba(0, 0, 0, 0.08));
1073
951
  }
1074
952
  .ag-log-dur {
1075
953
  font-size: 10px;
1076
954
  font-family: var(--dt-mono, monospace);
1077
- color: var(--dt-text-3, rgba(255, 255, 255, 0.2));
955
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1078
956
  flex-shrink: 0;
1079
957
  }
1080
958
 
@@ -1114,14 +992,14 @@
1114
992
  .ag-compact-row-time {
1115
993
  font-size: 11px;
1116
994
  font-family: var(--dt-mono, monospace);
1117
- color: var(--dt-text-2, rgba(255, 255, 255, 0.5));
995
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
1118
996
  min-width: 64px;
1119
997
  flex-shrink: 0;
1120
998
  }
1121
999
  .ag-compact-row-title {
1122
1000
  font-size: 12px;
1123
1001
  font-weight: 500;
1124
- color: var(--dt-text-2, rgba(255, 255, 255, 0.5));
1002
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
1125
1003
  flex: 1;
1126
1004
  white-space: nowrap;
1127
1005
  overflow: hidden;
@@ -1131,12 +1009,12 @@
1131
1009
  .ag-compact-row-dur {
1132
1010
  font-size: 10px;
1133
1011
  font-family: var(--dt-mono, monospace);
1134
- color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
1012
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1135
1013
  flex-shrink: 0;
1136
1014
  }
1137
1015
  .ag-compact-row-sub {
1138
1016
  font-size: 10px;
1139
- color: var(--dt-text-3, rgba(255, 255, 255, 0.35));
1017
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1140
1018
  flex-shrink: 0;
1141
1019
  }
1142
1020
  .ag-compact-row-tag {
package/dist/views/agenda/AgendaWeek.svelte CHANGED
@@ -44,7 +44,6 @@
44
44
 
45
45
  const clock = createClock();
46
46
  const viewState = $derived(ctx.viewState);
47
- const showNav = $derived(ctx.showNav);
48
47
  const equalDays = $derived(ctx.equalDays);
49
48
  const showDates = $derived(ctx.showDates);
50
49
  const hideDays = $derived(ctx.hideDays);
@@ -124,12 +123,6 @@
124
123
 
125
124
  const customDays = $derived(viewState?.dayCount ?? 7);
126
125
 
127
- const isThisWeek = $derived(
128
- customDays === 7
129
- ? weekStartMs === startOfWeek(clock.today, mondayStart)
130
- : clock.today >= weekStartMs && clock.today < weekStartMs + customDays * DAY_MS,
131
- );
132
-
133
126
  const weekDays = $derived.by((): DayGroup[] => {
134
127
  const now = clock.tick;
135
128
  const todayMs = clock.today;
@@ -445,88 +438,9 @@
445
438
  {/each}
446
439
  </div>
447
440
 
448
- <!-- ── Floating nav pills (desktop only — mobile uses Calendar header) ── -->
449
- {#if showNav && !isMobile}
450
- <nav class="ag-nav" aria-label={L.weekNavigation}>
451
- <button
452
- class="ag-nav-pill ag-nav-today"
453
- class:ag-nav-today--hidden={isThisWeek}
454
- onclick={() => viewState?.goToday()}
455
- aria-label={L.goToToday}
456
- tabindex={isThisWeek ? -1 : 0}
457
- >
458
- {L.today}
459
- </button>
460
- <button
461
- class="ag-nav-pill"
462
- onclick={() => viewState?.prev()}
463
- aria-label={L.previousWeek}
464
- >
465
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><path d="M10 3 5 8l5 5"/></svg>
466
- </button>
467
- <button
468
- class="ag-nav-pill"
469
- onclick={() => viewState?.next()}
470
- aria-label={L.nextWeek}
471
- >
472
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg>
473
- </button>
474
- </nav>
475
- {/if}
476
441
  </div>
477
442
 
478
443
  <style>
479
- /* ═══ Floating nav pills ═══ */
480
- .ag-nav {
481
- position: absolute;
482
- top: 10px;
483
- right: 14px;
484
- z-index: 20;
485
- display: flex;
486
- gap: 2px;
487
- background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
488
- backdrop-filter: blur(6px);
489
- -webkit-backdrop-filter: blur(6px);
490
- border-radius: 8px;
491
- padding: 2px;
492
- border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
493
- }
494
- .ag-nav-pill {
495
- border: none;
496
- background: transparent;
497
- color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
498
- cursor: pointer;
499
- font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
500
- padding: 6px 12px;
501
- border-radius: 6px;
502
- letter-spacing: 0.04em;
503
- text-transform: uppercase;
504
- transition: background 100ms, color 100ms;
505
- display: inline-flex;
506
- align-items: center;
507
- justify-content: center;
508
- }
509
- .ag-nav-pill:hover {
510
- color: var(--dt-text, rgba(226, 232, 240, 0.85));
511
- }
512
- .ag-nav-today {
513
- max-width: 60px;
514
- overflow: hidden;
515
- white-space: nowrap;
516
- transition: max-width 250ms ease, padding 250ms ease, opacity 200ms ease;
517
- }
518
- .ag-nav-today--hidden {
519
- max-width: 0;
520
- padding-left: 0;
521
- padding-right: 0;
522
- opacity: 0;
523
- pointer-events: none;
524
- }
525
- .ag-nav-pill:focus-visible {
526
- outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
527
- outline-offset: 2px;
528
- }
529
-
530
444
  /* ═══ Container ═══ */
531
445
  .ag {
532
446
  position: relative;
@@ -538,7 +452,7 @@
538
452
  width: 100%;
539
453
  min-width: 0;
540
454
  box-sizing: border-box;
541
- color: var(--dt-text, rgba(255, 255, 255, 0.92));
455
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
542
456
  font-family: var(--dt-sans, system-ui, sans-serif);
543
457
  }
544
458
  .ag--auto {
@@ -553,7 +467,7 @@
553
467
  overflow-y: auto;
554
468
  overflow-x: hidden;
555
469
  box-sizing: border-box;
556
- padding-top: 44px;
470
+ padding-top: 8px;
557
471
  scrollbar-width: thin;
558
472
  scrollbar-color: var(--dt-border) transparent;
559
473
  }
@@ -607,7 +521,7 @@
607
521
  }
608
522
  .ag-allday-title {
609
523
  font: 500 0.7rem/1.2 var(--dt-sans, system-ui, sans-serif);
610
- color: var(--dt-text, rgba(226, 232, 240, 0.85));
524
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
611
525
  white-space: nowrap;
612
526
  }
613
527
 
@@ -617,7 +531,7 @@
617
531
  align-items: stretch;
618
532
  border-radius: 6px;
619
533
  background: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, var(--dt-bg, #ffffff)));
620
- border: 1px solid color-mix(in srgb, var(--ev-color) 8%, var(--dt-border, rgba(255, 255, 255, 0.06)));
534
+ border: 1px solid color-mix(in srgb, var(--ev-color) 8%, var(--dt-border, rgba(0, 0, 0, 0.08)));
621
535
  overflow: hidden;
622
536
  cursor: pointer;
623
537
  transition: background 150ms, border-color 150ms;
@@ -671,13 +585,13 @@
671
585
  display: flex;
672
586
  align-items: center;
673
587
  font-size: 11px;
674
- color: var(--dt-text-2, rgba(255, 255, 255, 0.5));
588
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
675
589
  font-family: var(--dt-mono, monospace);
676
590
  line-height: 1;
677
591
  }
678
592
  .ag-card-dur {
679
593
  margin-left: 6px;
680
- color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
594
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
681
595
  }
682
596
  .ag-card-eta {
683
597
  margin-left: auto;
@@ -689,12 +603,12 @@
689
603
  }
690
604
  .ag-card-sub {
691
605
  font-size: 11px;
692
- color: var(--dt-text-2, rgba(255, 255, 255, 0.45));
606
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
693
607
  line-height: 1;
694
608
  }
695
609
  .ag-card-loc {
696
610
  font-size: 10px;
697
- color: var(--dt-text-3, rgba(255, 255, 255, 0.35));
611
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
698
612
  line-height: 1;
699
613
  }
700
614
  .ag-card-tags {
@@ -712,7 +626,7 @@
712
626
  }
713
627
  .ag-card-progress {
714
628
  height: 3px;
715
- background: var(--dt-border, rgba(255, 255, 255, 0.06));
629
+ background: var(--dt-border, rgba(0, 0, 0, 0.08));
716
630
  border-radius: 2px;
717
631
  overflow: hidden;
718
632
  margin-top: 2px;
@@ -726,7 +640,7 @@
726
640
 
727
641
  /* ═══ Week day groups ═══ */
728
642
  .ag-wday {
729
- border-bottom: 1px solid var(--dt-border, rgba(255, 255, 255, 0.06));
643
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
730
644
  }
731
645
  .ag-wday--today {
732
646
  background: color-mix(in srgb, var(--dt-accent, #2563eb) 2%, transparent);
@@ -782,10 +696,10 @@
782
696
  border-radius: 3px;
783
697
  }
784
698
  .ag-wday-badge--muted {
785
- color: var(--dt-text-2, rgba(255, 255, 255, 0.5));
699
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
786
700
  background: color-mix(
787
701
  in srgb,
788
- var(--dt-text-2, rgba(255, 255, 255, 0.5)) 10%,
702
+ var(--dt-text-2, rgba(0, 0, 0, 0.54)) 10%,
789
703
  transparent
790
704
  );
791
705
  }
@@ -796,13 +710,13 @@
796
710
  .ag-wday-date {
797
711
  font-size: 11px;
798
712
  font-family: var(--dt-mono, monospace);
799
- color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
713
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
800
714
  }
801
715
 
802
716
  .ag-wday-empty {
803
717
  padding: 2px 20px 6px;
804
718
  font-size: 11px;
805
- color: var(--dt-text-3, rgba(255, 255, 255, 0.2));
719
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
806
720
  font-style: italic;
807
721
  }
808
722
 
@@ -838,7 +752,7 @@
838
752
  }
839
753
  .ag-wday-past-line {
840
754
  font-size: 10px;
841
- color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
755
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
842
756
  padding: 6px 0 0;
843
757
  opacity: 0.5;
844
758
  }
@@ -879,7 +793,7 @@
879
793
  .ag-compact-time {
880
794
  font-size: 11px;
881
795
  font-family: var(--dt-mono, monospace);
882
- color: var(--dt-text-2, rgba(255, 255, 255, 0.5));
796
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
883
797
  min-width: 40px;
884
798
  flex-shrink: 0;
885
799
  white-space: nowrap;
@@ -887,7 +801,7 @@
887
801
  .ag-compact-title {
888
802
  font-size: 12px;
889
803
  font-weight: 500;
890
- color: var(--dt-text-2, rgba(255, 255, 255, 0.5));
804
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
891
805
  flex: 1;
892
806
  min-width: 0;
893
807
  white-space: nowrap;
@@ -898,13 +812,13 @@
898
812
  .ag-compact-dur {
899
813
  font-size: 10px;
900
814
  font-family: var(--dt-mono, monospace);
901
- color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
815
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
902
816
  flex-shrink: 0;
903
817
  white-space: nowrap;
904
818
  }
905
819
  .ag-compact-sub {
906
820
  font-size: 10px;
907
- color: var(--dt-text-3, rgba(255, 255, 255, 0.35));
821
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
908
822
  flex-shrink: 0;
909
823
  white-space: nowrap;
910
824
  overflow: hidden;
@@ -913,7 +827,7 @@
913
827
  }
914
828
  .ag-compact-loc {
915
829
  font-size: 9px;
916
- color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
830
+ color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
917
831
  flex-shrink: 0;
918
832
  white-space: nowrap;
919
833
  overflow: hidden;
@@ -978,9 +892,6 @@
978
892
  .ag--mobile .ag-compact-time {
979
893
  font-size: 12px;
980
894
  }
981
- .ag--mobile .ag-nav-pill {
982
- padding: 10px 16px;
983
- }
984
895
  .ag--mobile .ag-wslot-cards--multi {
985
896
  grid-template-columns: 1fr;
986
897
  }