kalendly 0.3.3 → 0.3.5

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 (15) hide show
  1. package/README.md +205 -94
  2. package/dist/core/index.js +3 -3
  3. package/dist/core/index.js.map +1 -1
  4. package/dist/core/index.mjs +3 -3
  5. package/dist/core/index.mjs.map +1 -1
  6. package/dist/index.d.mts +3 -1
  7. package/dist/index.d.ts +3 -1
  8. package/dist/index.js +186 -161
  9. package/dist/index.js.map +1 -1
  10. package/dist/index.mjs +186 -161
  11. package/dist/index.mjs.map +1 -1
  12. package/dist/index.umd.js +186 -161
  13. package/dist/index.umd.js.map +1 -1
  14. package/dist/styles/calendar.css +554 -549
  15. package/package.json +11 -9
package/dist/styles/calendar.css CHANGED
@@ -33,161 +33,156 @@
33
33
  --kal-orange-500: #fc8917;
34
34
 
35
35
  /* Brand */
36
- --calendar-primary-color: var(--kal-orange-500);
37
- --calendar-primary-color-rgb: 252, 137, 23;
38
- --calendar-secondary-color: var(--kal-orange-400);
39
- --calendar-secondary-color-rgb: 252, 160, 69;
40
- --calendar-tertiary-color: var(--kal-orange-300);
36
+ --kalendly-primary-color: var(--kal-orange-500);
37
+ --kalendly-secondary-color: var(--kal-orange-400);
38
+ --kalendly-tertiary-color: var(--kal-orange-300);
41
39
 
42
40
  /* Surfaces and text */
43
- --calendar-text-color: var(--kal-slate-800);
44
- --calendar-text-light: var(--kal-gray-500);
45
- --calendar-on-accent: var(--kal-white);
46
- --calendar-background: var(--kal-white);
47
- --calendar-border-color: var(--kal-gray-300);
48
- --calendar-cell-hover: var(--kal-gray-100);
49
- --calendar-header-bg: var(--kal-gray-50);
50
- --calendar-selected-bg: var(--kal-blue-50);
51
- --calendar-out-of-range-bg: var(--kal-gray-100);
52
- --calendar-out-of-range-fg: var(--kal-gray-500);
53
- --calendar-popup-bg: var(--kal-white);
54
- --calendar-picker-bg: var(--kal-white);
55
- --calendar-today-outline: var(--kal-yellow-400);
56
- --calendar-event-indicator: var(--kal-blue-500);
57
- --calendar-input-invalid: var(--kal-red-500);
58
- --calendar-input-invalid-rgb: 239, 68, 68;
59
- --calendar-input-invalid-bg: rgba(var(--calendar-input-invalid-rgb), 0.1);
60
- --calendar-nav-arrow-fg: var(--calendar-text-color);
61
- --calendar-nav-arrow-bg: var(--calendar-background);
62
- --calendar-nav-arrow-border: var(--calendar-border-color);
63
- --calendar-nav-arrow-hover-fg: var(--calendar-on-accent);
64
- --calendar-nav-arrow-hover-bg: var(--calendar-primary-color);
65
- --calendar-popup-header-fg: var(--kal-white);
66
- --calendar-popup-close-fg: var(--kal-white);
67
- --calendar-popup-close-bg: rgba(255, 255, 255, 0.2);
68
- --calendar-popup-close-hover-bg: rgba(255, 255, 255, 0.3);
69
- --calendar-link: var(--kal-blue-600);
70
- --calendar-skeleton-base: var(--kal-gray-150);
71
- --calendar-skeleton-highlight: var(--kal-gray-200);
41
+ --kalendly-text-color: var(--kal-slate-800);
42
+ --kalendly-text-light: var(--kal-gray-500);
43
+ --kalendly-on-accent: var(--kal-white);
44
+ --kalendly-background: var(--kal-white);
45
+ --kalendly-border-color: var(--kal-gray-300);
46
+ --kalendly-cell-hover: var(--kal-gray-100);
47
+ --kalendly-header-bg: var(--kal-gray-50);
48
+ --kalendly-selected-bg: var(--kal-blue-50);
49
+ --kalendly-out-of-range-bg: var(--kal-gray-100);
50
+ --kalendly-out-of-range-fg: var(--kal-gray-500);
51
+ --kalendly-popup-bg: var(--kal-white);
52
+ --kalendly-picker-bg: var(--kal-white);
53
+ --kalendly-today-outline: var(--kal-yellow-400);
54
+ --kalendly-event-indicator: var(--kal-blue-500);
55
+ --kalendly-input-invalid: var(--kal-red-500);
56
+ --kalendly-error-bg: color-mix(in srgb, var(--kal-red-500) 8%, transparent);
57
+ --kalendly-error-fg: var(--kal-red-500);
58
+ --kalendly-error-border: var(--kal-red-500);
59
+ --kalendly-popup-header-fg: var(--kal-white);
60
+ --kalendly-popup-close-fg: var(--kal-white);
61
+ --kalendly-popup-close-bg: rgba(255, 255, 255, 0.2);
62
+ --kalendly-popup-close-hover-bg: rgba(255, 255, 255, 0.3);
63
+ --kalendly-link: var(--kal-blue-600);
64
+ --kalendly-skeleton-base: var(--kal-gray-150);
65
+ --kalendly-skeleton-highlight: var(--kal-gray-200);
72
66
 
73
67
  /* Availability — traffic light */
74
- --availability-color: transparent;
75
- --calendar-open-bg: var(--kal-green-100);
76
- --calendar-open-fg: var(--kal-green-600);
77
- --calendar-conditional-bg: var(--kal-amber-100);
78
- --calendar-conditional-fg: var(--kal-amber-600);
79
- --calendar-blocked-bg: var(--kal-red-100);
80
- --calendar-blocked-fg: var(--kal-red-600);
81
- --calendar-range-bg: var(--kal-green-600);
82
- --calendar-range-outline: var(--kal-green-700);
83
- --calendar-in-range-bg: var(--kal-green-200);
84
- --calendar-in-range-outline: var(--kal-green-300);
68
+ --kalendly-availability-color: transparent;
69
+ --kalendly-open-bg: var(--kal-green-100);
70
+ --kalendly-open-fg: var(--kal-green-600);
71
+ --kalendly-conditional-bg: var(--kal-amber-100);
72
+ --kalendly-conditional-fg: var(--kal-amber-600);
73
+ --kalendly-blocked-bg: var(--kal-red-100);
74
+ --kalendly-blocked-fg: var(--kal-red-600);
75
+ --kalendly-range-bg: var(--kal-green-600);
76
+ --kalendly-range-outline: var(--kal-green-700);
77
+ --kalendly-in-range-bg: var(--kal-green-200);
78
+ --kalendly-in-range-outline: var(--kal-green-300);
85
79
 
86
80
  /* Badges */
87
- --calendar-badge-bg: var(--kal-gray-100);
88
- --calendar-badge-text: var(--kal-gray-600);
89
- --calendar-badge-success-bg: var(--kal-emerald-100);
90
- --calendar-badge-success-text: var(--kal-emerald-600);
91
- --calendar-badge-info-bg: var(--kal-blue-100);
92
- --calendar-badge-info-text: var(--kal-blue-600);
93
- --calendar-badge-warning-bg: var(--kal-amber-100);
94
- --calendar-badge-warning-text: var(--kal-amber-600);
95
- --calendar-badge-danger-bg: var(--kal-red-100);
96
- --calendar-badge-danger-text: var(--kal-red-600);
97
- --calendar-badge-neutral-bg: var(--kal-gray-100);
98
- --calendar-badge-neutral-text: var(--kal-gray-500);
99
- --calendar-badge-positive-bg: var(--kal-green-100);
100
- --calendar-badge-positive-text: var(--kal-green-600);
101
- --calendar-badge-tentative-bg: var(--kal-indigo-100);
102
- --calendar-badge-tentative-text: var(--kal-indigo-600);
81
+ --kalendly-badge-bg: var(--kal-gray-100);
82
+ --kalendly-badge-text: var(--kal-gray-600);
83
+ --kalendly-badge-success-bg: var(--kal-emerald-100);
84
+ --kalendly-badge-success-text: var(--kal-emerald-600);
85
+ --kalendly-badge-info-bg: var(--kal-blue-100);
86
+ --kalendly-badge-info-text: var(--kal-blue-600);
87
+ --kalendly-badge-warning-bg: var(--kal-amber-100);
88
+ --kalendly-badge-warning-text: var(--kal-amber-600);
89
+ --kalendly-badge-danger-bg: var(--kal-red-100);
90
+ --kalendly-badge-danger-text: var(--kal-red-600);
91
+ --kalendly-badge-neutral-bg: var(--kal-gray-100);
92
+ --kalendly-badge-neutral-text: var(--kal-gray-500);
93
+ --kalendly-badge-positive-bg: var(--kal-green-100);
94
+ --kalendly-badge-positive-text: var(--kal-green-600);
95
+ --kalendly-badge-tentative-bg: var(--kal-indigo-100);
96
+ --kalendly-badge-tentative-text: var(--kal-indigo-600);
103
97
 
104
98
  /* Shadows */
105
- --calendar-card-shadow:
106
- 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
107
- --calendar-picker-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
99
+ --kalendly-picker-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
108
100
 
109
- --calendar-btn-disabled-opacity: 0.5;
110
-
111
- --primary-color: var(--kal-orange-500);
112
- --secondary-color: var(--kal-orange-400);
113
- --tertiary-color: var(--kal-orange-300);
101
+ --kalendly-btn-disabled-opacity: 0.5;
114
102
 
115
103
  /* Type scale */
116
- --calendar-font-3xs: 0.5rem;
117
- --calendar-font-2xs: 0.625rem;
118
- --calendar-font-xs: 0.75rem;
119
- --calendar-font-sm: 0.875rem;
120
- --calendar-font-base: 1rem;
121
- --calendar-font-lg: 1.125rem;
122
- --calendar-font-xl: 1.25rem;
123
- --calendar-font-2xl: 2rem;
104
+ --kalendly-font-3xs: 0.5rem;
105
+ --kalendly-font-2xs: 0.625rem;
106
+ --kalendly-font-xs: 0.75rem;
107
+ --kalendly-font-sm: 0.875rem;
108
+ --kalendly-font-base: 1rem;
109
+ --kalendly-font-lg: 1.125rem;
110
+ --kalendly-font-xl: 1.25rem;
111
+ --kalendly-font-2xl: 2rem;
124
112
 
125
113
  /* Radius scale */
126
- --calendar-radius-sm: 4px;
127
- --calendar-radius-md: 6px;
128
- --calendar-radius-lg: 8px;
129
- --calendar-radius-xl: 12px;
130
- --calendar-radius-full: 999px;
131
- --calendar-radius-circle: 50%;
114
+ --kalendly-radius-sm: 4px;
115
+ --kalendly-radius-md: 6px;
116
+ --kalendly-radius-lg: 8px;
117
+ --kalendly-radius-xl: 12px;
118
+ --kalendly-radius-full: 999px;
119
+ --kalendly-radius-circle: 50%;
132
120
 
133
121
  /* Elevation */
134
- --calendar-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
135
- --calendar-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
136
- --calendar-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.12);
137
- --calendar-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
138
- --calendar-shadow-primary: 0 2px 8px
139
- rgba(var(--calendar-primary-color-rgb), 0.2);
122
+ --kalendly-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
123
+ --kalendly-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
124
+ --kalendly-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.12);
125
+ --kalendly-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
140
126
  /* Spacing scale — rem so padding tracks the type scale */
141
- --calendar-space-0-5: 0.125rem;
142
- --calendar-space-1: 0.25rem;
143
- --calendar-space-1-5: 0.375rem;
144
- --calendar-space-2: 0.5rem;
145
- --calendar-space-2-5: 0.625rem;
146
- --calendar-space-3: 0.75rem;
147
- --calendar-space-3-5: 0.875rem;
148
- --calendar-space-4: 1rem;
149
- --calendar-space-5: 1.25rem;
150
- --calendar-space-6: 1.5rem;
151
- --calendar-space-8: 2rem;
152
- --calendar-space-12: 3rem;
153
- }
154
-
155
- .kalendly-calendar {
127
+ --kalendly-space-0-5: 0.125rem;
128
+ --kalendly-space-1: 0.25rem;
129
+ --kalendly-space-1-5: 0.375rem;
130
+ --kalendly-space-2: 0.5rem;
131
+ --kalendly-space-2-5: 0.625rem;
132
+ --kalendly-space-3: 0.75rem;
133
+ --kalendly-space-3-5: 0.875rem;
134
+ --kalendly-space-4: 1rem;
135
+ --kalendly-space-5: 1.25rem;
136
+ --kalendly-space-8: 2rem;
137
+ --kalendly-space-12: 3rem;
138
+ }
139
+
140
+ .kalendly {
156
141
  font-family: Avenir, Helvetica, Arial, sans-serif;
157
142
  text-align: center;
158
- color: var(--calendar-text-color);
143
+ color: var(--kalendly-text-color);
159
144
  margin: 0;
160
145
  }
161
146
 
162
- .calendar-title {
147
+ .kalendly-error {
148
+ padding: var(--kalendly-space-4);
149
+ border: 1px solid var(--kalendly-error-border);
150
+ border-radius: var(--kalendly-radius-md);
151
+ background: var(--kalendly-error-bg);
152
+ color: var(--kalendly-error-fg);
153
+ font-size: var(--kalendly-font-sm);
154
+ line-height: 1.5;
155
+ }
156
+
157
+ .kalendly-title {
163
158
  text-align: center;
164
- margin-bottom: var(--calendar-space-4);
159
+ margin-bottom: var(--kalendly-space-4);
165
160
  }
166
161
 
167
- .calendar-title h1 {
168
- font-size: var(--calendar-font-2xl);
162
+ .kalendly-title h1 {
163
+ font-size: var(--kalendly-font-2xl);
169
164
  font-weight: 600;
170
- color: var(--calendar-text-color);
165
+ color: var(--kalendly-text-color);
171
166
  margin: 0;
172
167
  }
173
168
 
174
- .calendar-content {
169
+ .kalendly-content {
175
170
  font-family: Avenir, Helvetica, Arial, sans-serif;
176
171
  position: relative;
177
172
  width: 100%;
178
173
  min-height: 1px;
179
- margin-top: var(--calendar-space-12);
174
+ margin-top: var(--kalendly-space-12);
180
175
  }
181
176
 
182
- .calendar-card {
177
+ .kalendly-card {
183
178
  position: relative;
184
179
  display: flex;
185
180
  flex-direction: column;
186
181
  min-width: 0;
187
182
  word-wrap: break-word;
188
- background-color: var(--calendar-background);
183
+ background-color: var(--kalendly-background);
189
184
  background-clip: border-box;
190
- border: 2px solid var(--calendar-border-color);
185
+ border: 2px solid var(--kalendly-border-color);
191
186
  border-radius: 0;
192
187
  box-shadow: none;
193
188
  max-width: 1200px;
@@ -196,238 +191,251 @@
196
191
  }
197
192
 
198
193
  /* New Navigation Header */
199
- .calendar-nav-header {
194
+ .kalendly-nav-header {
200
195
  display: flex;
201
196
  align-items: center;
202
197
  justify-content: center;
203
- gap: var(--calendar-space-2);
204
- padding: var(--calendar-space-3) var(--calendar-space-4);
205
- background-color: var(--calendar-header-bg);
206
- border-bottom: 2px solid var(--calendar-border-color);
198
+ gap: var(--kalendly-space-2);
199
+ padding: var(--kalendly-space-3) var(--kalendly-space-4);
200
+ background-color: var(--kalendly-header-bg);
201
+ border-bottom: 2px solid var(--kalendly-border-color);
207
202
  }
208
203
 
209
- .calendar-nav-arrow {
204
+ .kalendly-nav-arrow {
210
205
  display: flex;
211
206
  align-items: center;
212
207
  justify-content: center;
213
208
  width: 36px;
214
209
  height: 36px;
215
- border: 1px solid var(--calendar-nav-arrow-border);
216
- border-radius: var(--calendar-radius-md);
217
- background: var(--calendar-nav-arrow-bg);
210
+ border: 1px solid
211
+ var(--kalendly-nav-arrow-border, var(--kalendly-border-color));
212
+ border-radius: var(--kalendly-radius-md);
213
+ background: var(--kalendly-nav-arrow-bg, var(--kalendly-background));
218
214
  cursor: pointer;
219
- font-size: var(--calendar-font-lg);
220
- color: var(--calendar-nav-arrow-fg);
215
+ font-size: var(--kalendly-font-lg);
216
+ color: var(--kalendly-nav-arrow-fg, var(--kalendly-text-color));
221
217
  transition: all 0.2s ease;
222
218
  flex-shrink: 0;
223
219
  }
224
220
 
225
- .calendar-nav-arrow:hover {
226
- background-color: var(--calendar-nav-arrow-hover-bg);
227
- border-color: var(--calendar-nav-arrow-hover-bg);
228
- color: var(--calendar-nav-arrow-hover-fg);
221
+ .kalendly-nav-arrow:hover {
222
+ background-color: var(
223
+ --kalendly-nav-arrow-hover-bg,
224
+ var(--kalendly-primary-color)
225
+ );
226
+ border-color: var(
227
+ --kalendly-nav-arrow-hover-bg,
228
+ var(--kalendly-primary-color)
229
+ );
230
+ color: var(--kalendly-nav-arrow-hover-fg, var(--kalendly-on-accent));
229
231
  }
230
232
 
231
- .calendar-picker-container {
233
+ .kalendly-picker-container {
232
234
  position: relative;
233
235
  }
234
236
 
235
- .calendar-picker-btn {
237
+ .kalendly-picker-btn {
236
238
  display: flex;
237
239
  align-items: center;
238
240
  justify-content: center;
239
- gap: var(--calendar-space-2);
240
- padding: var(--calendar-space-2) var(--calendar-space-4);
241
+ gap: var(--kalendly-space-2);
242
+ padding: var(--kalendly-space-2) var(--kalendly-space-4);
241
243
  min-width: 160px;
242
244
  height: 36px;
243
- border: 1px solid var(--calendar-border-color);
244
- border-radius: var(--calendar-radius-md);
245
- background: var(--calendar-background);
246
- box-shadow: var(--calendar-shadow-sm);
245
+ border: 1px solid var(--kalendly-border-color);
246
+ border-radius: var(--kalendly-radius-md);
247
+ background: var(--kalendly-background);
248
+ box-shadow: var(--kalendly-shadow-sm);
247
249
  cursor: pointer;
248
- font-size: var(--calendar-font-base);
250
+ font-size: var(--kalendly-font-base);
249
251
  font-weight: 600;
250
- color: var(--calendar-text-color);
252
+ color: var(--kalendly-text-color);
251
253
  transition: all 0.2s ease;
252
254
  }
253
255
 
254
- .calendar-picker-btn:hover {
255
- border-color: var(--calendar-primary-color);
256
- box-shadow: var(--calendar-shadow-md);
256
+ .kalendly-picker-btn:hover {
257
+ border-color: var(--kalendly-primary-color);
258
+ box-shadow: var(--kalendly-shadow-md);
257
259
  }
258
260
 
259
- .calendar-picker-btn[aria-expanded='true'] {
260
- border-color: var(--calendar-primary-color);
261
- box-shadow: var(--calendar-shadow-primary);
261
+ .kalendly-picker-btn[aria-expanded='true'] {
262
+ border-color: var(--kalendly-primary-color);
263
+ box-shadow: var(
264
+ --kalendly-shadow-primary,
265
+ 0 2px 8px color-mix(in srgb, var(--kalendly-primary-color) 20%, transparent)
266
+ );
262
267
  }
263
268
 
264
- .calendar-picker-chevron {
269
+ .kalendly-picker-chevron {
265
270
  display: inline-block;
266
- font-size: var(--calendar-font-2xs);
271
+ font-size: var(--kalendly-font-2xs);
267
272
  transition: transform 0.2s ease;
268
273
  }
269
274
 
270
- .calendar-picker-btn[aria-expanded='true'] .calendar-picker-chevron {
275
+ .kalendly-picker-btn[aria-expanded='true'] .kalendly-picker-chevron {
271
276
  transform: rotate(180deg);
272
277
  }
273
278
 
274
- .calendar-today-btn {
279
+ .kalendly-today-btn {
275
280
  display: flex;
276
281
  align-items: center;
277
282
  justify-content: center;
278
- padding: var(--calendar-space-2) var(--calendar-space-4);
283
+ padding: var(--kalendly-space-2) var(--kalendly-space-4);
279
284
  height: 36px;
280
- border: 1px solid var(--calendar-border-color);
281
- border-radius: var(--calendar-radius-md);
282
- background: var(--calendar-background);
285
+ border: 1px solid var(--kalendly-border-color);
286
+ border-radius: var(--kalendly-radius-md);
287
+ background: var(--kalendly-background);
283
288
  cursor: pointer;
284
- font-size: var(--calendar-font-sm);
289
+ font-size: var(--kalendly-font-sm);
285
290
  font-weight: 500;
286
- color: var(--calendar-text-color);
291
+ color: var(--kalendly-text-color);
287
292
  transition: all 0.2s ease;
288
293
  flex-shrink: 0;
289
294
  }
290
295
 
291
- .calendar-today-btn:hover:not(:disabled) {
292
- background-color: var(--calendar-primary-color);
293
- border-color: var(--calendar-primary-color);
294
- color: var(--calendar-on-accent);
296
+ .kalendly-today-btn:hover:not(:disabled) {
297
+ background-color: var(--kalendly-primary-color);
298
+ border-color: var(--kalendly-primary-color);
299
+ color: var(--kalendly-on-accent);
295
300
  }
296
301
 
297
- .calendar-today-btn:disabled {
298
- opacity: var(--calendar-btn-disabled-opacity);
302
+ .kalendly-today-btn:disabled {
303
+ opacity: var(--kalendly-btn-disabled-opacity);
299
304
  cursor: not-allowed;
300
305
  }
301
306
 
302
307
  /* Month/Year Picker Dropdown */
303
- .calendar-picker-dropdown {
308
+ .kalendly-picker-dropdown {
304
309
  position: absolute;
305
310
  top: calc(100% + 8px);
306
311
  left: 50%;
307
312
  transform: translateX(-50%);
308
313
  z-index: 100;
309
- background: var(--calendar-picker-bg);
310
- border: 1px solid var(--calendar-border-color);
311
- border-radius: var(--calendar-radius-xl);
312
- box-shadow: var(--calendar-picker-shadow);
313
- padding: var(--calendar-space-4);
314
+ background: var(--kalendly-picker-bg);
315
+ border: 1px solid var(--kalendly-border-color);
316
+ border-radius: var(--kalendly-radius-xl);
317
+ box-shadow: var(--kalendly-picker-shadow);
318
+ padding: var(--kalendly-space-4);
314
319
  min-width: 280px;
315
320
  }
316
321
 
317
- .calendar-picker-year-row {
322
+ .kalendly-picker-year-row {
318
323
  display: flex;
319
324
  align-items: center;
320
325
  justify-content: center;
321
- gap: var(--calendar-space-3);
322
- margin-bottom: var(--calendar-space-4);
323
- padding-bottom: var(--calendar-space-3);
324
- border-bottom: 1px solid var(--calendar-border-color);
326
+ gap: var(--kalendly-space-3);
327
+ margin-bottom: var(--kalendly-space-4);
328
+ padding-bottom: var(--kalendly-space-3);
329
+ border-bottom: 1px solid var(--kalendly-border-color);
325
330
  }
326
331
 
327
- .calendar-picker-year-arrow {
332
+ .kalendly-picker-year-arrow {
328
333
  display: flex;
329
334
  align-items: center;
330
335
  justify-content: center;
331
336
  width: 32px;
332
337
  height: 32px;
333
338
  border: none;
334
- border-radius: var(--calendar-radius-md);
335
- background: var(--calendar-cell-hover);
339
+ border-radius: var(--kalendly-radius-md);
340
+ background: var(--kalendly-cell-hover);
336
341
  cursor: pointer;
337
- font-size: var(--calendar-font-base);
342
+ font-size: var(--kalendly-font-base);
338
343
  font-weight: 600;
339
- color: var(--calendar-text-color);
344
+ color: var(--kalendly-text-color);
340
345
  transition: all 0.2s ease;
341
346
  }
342
347
 
343
- .calendar-picker-year-arrow:hover:not(:disabled) {
344
- background-color: var(--calendar-primary-color);
345
- color: var(--calendar-on-accent);
348
+ .kalendly-picker-year-arrow:hover:not(:disabled) {
349
+ background-color: var(--kalendly-primary-color);
350
+ color: var(--kalendly-on-accent);
346
351
  }
347
352
 
348
- .calendar-picker-year-arrow:disabled {
353
+ .kalendly-picker-year-arrow:disabled {
349
354
  opacity: 0.3;
350
355
  cursor: not-allowed;
351
356
  }
352
357
 
353
- .calendar-picker-year-input {
358
+ .kalendly-picker-year-input {
354
359
  width: 80px;
355
- padding: var(--calendar-space-1-5) var(--calendar-space-2);
356
- border: 1px solid var(--calendar-border-color);
357
- border-radius: var(--calendar-radius-md);
360
+ padding: var(--kalendly-space-1-5) var(--kalendly-space-2);
361
+ border: 1px solid var(--kalendly-border-color);
362
+ border-radius: var(--kalendly-radius-md);
358
363
  text-align: center;
359
- font-size: var(--calendar-font-lg);
364
+ font-size: var(--kalendly-font-lg);
360
365
  font-weight: 600;
361
- color: var(--calendar-text-color);
362
- background: var(--calendar-background);
366
+ color: var(--kalendly-text-color);
367
+ background: var(--kalendly-background);
363
368
  transition: border-color 0.2s ease;
364
369
  }
365
370
 
366
- .calendar-picker-year-input:focus {
371
+ .kalendly-picker-year-input:focus {
367
372
  outline: none;
368
- border-color: var(--calendar-primary-color);
373
+ border-color: var(--kalendly-primary-color);
369
374
  }
370
375
 
371
- .calendar-picker-year-input.invalid {
372
- border-color: var(--calendar-input-invalid);
373
- background-color: var(--calendar-input-invalid-bg);
376
+ .kalendly-picker-year-input.kalendly-invalid {
377
+ border-color: var(--kalendly-input-invalid);
378
+ background-color: var(
379
+ --kalendly-input-invalid-bg,
380
+ color-mix(in srgb, var(--kalendly-input-invalid) 10%, transparent)
381
+ );
374
382
  }
375
383
 
376
- .calendar-picker-months {
384
+ .kalendly-picker-months {
377
385
  display: grid;
378
386
  grid-template-columns: repeat(3, 1fr);
379
- gap: var(--calendar-space-2);
387
+ gap: var(--kalendly-space-2);
380
388
  }
381
389
 
382
- .calendar-picker-month {
383
- padding: var(--calendar-space-2-5) var(--calendar-space-2);
390
+ .kalendly-picker-month {
391
+ padding: var(--kalendly-space-2-5) var(--kalendly-space-2);
384
392
  border: 1px solid transparent;
385
- border-radius: var(--calendar-radius-md);
386
- background: var(--calendar-cell-hover);
393
+ border-radius: var(--kalendly-radius-md);
394
+ background: var(--kalendly-cell-hover);
387
395
  cursor: pointer;
388
- font-size: var(--calendar-font-sm);
396
+ font-size: var(--kalendly-font-sm);
389
397
  font-weight: 500;
390
- color: var(--calendar-text-color);
398
+ color: var(--kalendly-text-color);
391
399
  transition: all 0.15s ease;
392
400
  }
393
401
 
394
- .calendar-picker-month:hover {
395
- background-color: var(--calendar-tertiary-color);
402
+ .kalendly-picker-month:hover {
403
+ background-color: var(--kalendly-tertiary-color);
396
404
  }
397
405
 
398
- .calendar-picker-month.selected {
399
- background-color: var(--calendar-primary-color);
400
- color: var(--calendar-on-accent);
406
+ .kalendly-picker-month.kalendly-selected {
407
+ background-color: var(--kalendly-primary-color);
408
+ color: var(--kalendly-on-accent);
401
409
  font-weight: 600;
402
410
  }
403
411
 
404
- .calendar-picker-month.current-month {
405
- border-color: var(--calendar-primary-color);
412
+ .kalendly-picker-month.kalendly-current-month {
413
+ border-color: var(--kalendly-primary-color);
406
414
  }
407
415
 
408
416
  /* Picker overlay for click-outside */
409
- .calendar-panes {
417
+ .kalendly-panes {
410
418
  display: flex;
411
419
  flex-wrap: wrap;
412
- gap: var(--calendar-space-4);
420
+ gap: var(--kalendly-space-4);
413
421
  align-items: flex-start;
414
422
  justify-content: center;
415
423
  }
416
424
 
417
- .calendar-pane {
425
+ .kalendly-pane {
418
426
  flex: 1 1 280px;
419
427
  min-width: 0;
420
428
  }
421
429
 
422
- .calendar-pane-caption {
423
- padding: var(--calendar-space-2) 0;
424
- font-size: var(--calendar-font-sm);
430
+ .kalendly-pane-caption {
431
+ padding: var(--kalendly-space-2) 0;
432
+ font-size: var(--kalendly-font-sm);
425
433
  font-weight: 600;
426
434
  text-align: center;
427
- color: var(--calendar-text-color);
435
+ color: var(--kalendly-text-color);
428
436
  }
429
437
 
430
- .calendar-table {
438
+ .kalendly-table {
431
439
  width: 100%;
432
440
  max-width: 100%;
433
441
  margin-bottom: 0;
@@ -435,58 +443,52 @@
435
443
  border-collapse: collapse;
436
444
  }
437
445
 
438
- .calendar-table-bordered {
446
+ .kalendly-table-bordered {
439
447
  border: none;
440
448
  }
441
449
 
442
- .calendar-table td,
443
- .calendar-table th {
444
- padding: var(--calendar-space-4);
450
+ .kalendly-table td,
451
+ .kalendly-table th {
452
+ padding: var(--kalendly-space-4);
445
453
  vertical-align: middle;
446
- border: 1px solid var(--calendar-border-color);
454
+ border: 1px solid var(--kalendly-border-color);
447
455
  text-align: center;
448
- font-size: var(--calendar-font-base);
456
+ font-size: var(--kalendly-font-base);
449
457
  }
450
458
 
451
- .calendar-table td {
459
+ .kalendly-table td {
452
460
  height: 60px;
453
461
  position: relative;
454
462
  cursor: pointer;
455
463
  transition: background-color 0.2s ease;
456
464
  }
457
465
 
458
- .calendar-table td[data-clickable]:hover {
459
- background-color: rgba(var(--calendar-primary-color-rgb), 0.1);
466
+ .kalendly-table td[data-clickable]:hover {
467
+ background-color: color-mix(in srgb, var(--kalendly-primary-color) 10%, transparent);
460
468
  }
461
469
 
462
- .calendar-table td.calendar-cell-selected {
463
- background-color: var(--calendar-selected-bg);
464
- outline: 2px solid var(--calendar-primary-color);
470
+ .kalendly-table td.kalendly-cell-selected {
471
+ background-color: var(--kalendly-selected-bg);
472
+ outline: 2px solid var(--kalendly-primary-color);
465
473
  outline-offset: -2px;
466
474
  font-weight: 700;
467
475
  }
468
476
 
469
- .calendar-table td.calendar-cell-out-of-range {
470
- background-color: var(--calendar-out-of-range-bg);
471
- color: var(--calendar-out-of-range-fg);
472
- cursor: default;
477
+ .kalendly-table td.kalendly-cell-other-month {
478
+ color: var(--kalendly-text-light);
479
+ background-color: var(--kalendly-header-bg);
473
480
  }
474
481
 
475
- .calendar-table td.calendar-cell-other-month {
476
- color: var(--calendar-text-light);
477
- background-color: var(--calendar-header-bg);
482
+ .kalendly-table td.kalendly-cell-other-month:hover {
483
+ background-color: var(--kalendly-cell-hover);
478
484
  }
479
485
 
480
- .calendar-table td.calendar-cell-other-month:hover {
481
- background-color: var(--calendar-cell-hover);
482
- }
483
-
484
- .calendar-table td.calendar-cell-has-event {
485
- background-color: rgba(var(--calendar-secondary-color-rgb), 0.3);
486
+ .kalendly-table td.kalendly-cell-has-event {
487
+ background-color: color-mix(in srgb, var(--kalendly-secondary-color) 30%, transparent);
486
488
  position: relative;
487
489
  }
488
490
 
489
- .calendar-table td.calendar-cell-has-event::after {
491
+ .kalendly-table td.kalendly-cell-has-event::after {
490
492
  content: '';
491
493
  position: absolute;
492
494
  bottom: 2px;
@@ -494,147 +496,155 @@
494
496
  transform: translateX(-50%);
495
497
  width: 4px;
496
498
  height: 4px;
497
- background-color: var(--calendar-event-indicator);
498
- border-radius: var(--calendar-radius-circle);
499
+ background-color: var(--kalendly-event-indicator);
500
+ border-radius: var(--kalendly-radius-circle);
499
501
  }
500
502
 
501
503
  /* Time grid (availability-mode="time") */
502
- .time-grid {
504
+ .kalendly-time-grid {
503
505
  display: flex;
504
506
  flex-direction: column;
505
- gap: var(--calendar-space-1);
507
+ gap: var(--kalendly-space-1);
506
508
  }
507
509
 
508
- .time-grid-slot {
510
+ .kalendly-time-grid-slot {
509
511
  display: flex;
510
512
  align-items: center;
511
513
  justify-content: space-between;
512
- padding: var(--calendar-space-2) var(--calendar-space-3);
513
- border-radius: var(--calendar-radius-md);
514
- font-size: var(--calendar-font-sm);
514
+ padding: var(--kalendly-space-2) var(--kalendly-space-3);
515
+ border-radius: var(--kalendly-radius-md);
516
+ font-size: var(--kalendly-font-sm);
515
517
  }
516
518
 
517
- .time-grid-label {
519
+ .kalendly-time-grid-label {
518
520
  font-weight: 600;
519
521
  color: inherit;
520
522
  min-width: 48px;
521
523
  }
522
524
 
523
- .time-grid-status {
525
+ .kalendly-time-grid-status {
524
526
  font-weight: 500;
525
527
  }
526
528
 
527
- .time-grid-selectable .time-grid-slot-open {
529
+ .kalendly-time-grid-selectable .kalendly-time-grid-slot-open {
528
530
  cursor: pointer;
529
531
  }
530
532
 
531
- .time-grid-selectable .time-grid-slot-blocked {
533
+ .kalendly-time-grid-selectable .kalendly-time-grid-slot-blocked {
532
534
  cursor: not-allowed;
533
535
  }
534
536
 
535
- .time-grid-slot-blocked {
536
- background-color: var(--calendar-blocked-bg);
537
- color: var(--calendar-blocked-fg);
537
+ .kalendly-time-grid-slot-blocked {
538
+ background-color: var(--kalendly-blocked-bg);
539
+ color: var(--kalendly-blocked-fg);
538
540
  }
539
541
 
540
- .time-grid-slot-open {
541
- background-color: var(--calendar-open-bg);
542
- color: var(--calendar-open-fg);
542
+ .kalendly-time-grid-slot-open {
543
+ background-color: var(--kalendly-open-bg);
544
+ color: var(--kalendly-open-fg);
543
545
  }
544
546
 
545
547
  /* Outside available-hours. Placed after the open/blocked fills so it wins at
546
548
  equal specificity, and after the selectable cursor rules so it stays inert. */
547
- .time-grid-slot-out-of-range,
548
- .time-grid-selectable .time-grid-slot-out-of-range {
549
- background-color: var(--calendar-out-of-range-bg);
550
- color: var(--calendar-out-of-range-fg);
549
+ .kalendly-time-grid-slot-out-of-range,
550
+ .kalendly-time-grid-selectable .kalendly-time-grid-slot-out-of-range {
551
+ background-color: var(--kalendly-out-of-range-bg);
552
+ color: var(--kalendly-out-of-range-fg);
551
553
  cursor: default;
552
554
  }
553
555
 
554
556
  /* Availability mode */
555
- .calendar-table td.availability-open {
556
- background-color: var(--calendar-open-bg);
557
+ .kalendly-table td.kalendly-availability-open {
558
+ background-color: var(--kalendly-open-bg);
557
559
  }
558
560
 
559
- .calendar-table td.availability-open::after {
560
- background-color: var(--calendar-open-fg);
561
+ .kalendly-table td.kalendly-availability-open::after {
562
+ background-color: var(--kalendly-open-fg);
561
563
  }
562
564
 
563
- .calendar-table td.availability-conditional {
564
- background-color: var(--calendar-conditional-bg);
565
+ .kalendly-table td.kalendly-availability-conditional {
566
+ background-color: var(--kalendly-conditional-bg);
565
567
  }
566
568
 
567
- .calendar-table td.availability-conditional::after {
568
- background-color: var(--calendar-conditional-fg);
569
+ .kalendly-table td.kalendly-availability-conditional::after {
570
+ background-color: var(--kalendly-conditional-fg);
569
571
  }
570
572
 
571
- .calendar-table td.availability-blocked {
572
- background-color: var(--calendar-blocked-bg);
573
+ .kalendly-table td.kalendly-availability-blocked {
574
+ background-color: var(--kalendly-blocked-bg);
573
575
  }
574
576
 
575
- .calendar-table td.availability-blocked::after {
576
- background-color: var(--calendar-blocked-fg);
577
+ .kalendly-table td.kalendly-availability-blocked::after {
578
+ background-color: var(--kalendly-blocked-fg);
577
579
  }
578
580
 
579
581
  /* Caller-defined buckets paint from an inline custom property */
580
- .calendar-table td.availability-status {
581
- background-color: var(--availability-color);
582
+ .kalendly-table td.kalendly-availability-status {
583
+ background-color: var(--kalendly-availability-color);
582
584
  }
583
585
 
584
- .calendar-table td.availability-unselectable {
586
+ /* After the bucket rules deliberately: same specificity, so source order
587
+ decides, and a day that is not on offer must not paint as available. */
588
+ .kalendly-table td.kalendly-cell-out-of-range {
589
+ background-color: var(--kalendly-out-of-range-bg);
590
+ color: var(--kalendly-out-of-range-fg);
591
+ cursor: default;
592
+ }
593
+
594
+ .kalendly-table td.kalendly-availability-unselectable {
585
595
  cursor: not-allowed;
586
596
  }
587
597
 
588
- .calendar-table td.availability-range-start,
589
- .calendar-table td.availability-range-end {
590
- background-color: var(--calendar-range-bg);
591
- color: var(--calendar-on-accent);
598
+ .kalendly-table td.kalendly-availability-range-start,
599
+ .kalendly-table td.kalendly-availability-range-end {
600
+ background-color: var(--kalendly-range-bg);
601
+ color: var(--kalendly-on-accent);
592
602
  font-weight: 700;
593
- outline: 2px solid var(--calendar-range-outline);
603
+ outline: 2px solid var(--kalendly-range-outline);
594
604
  outline-offset: -2px;
595
605
  }
596
606
 
597
- .calendar-table td.availability-in-range {
598
- background-color: var(--calendar-in-range-bg);
599
- outline: 1px solid var(--calendar-in-range-outline);
607
+ .kalendly-table td.kalendly-availability-in-range {
608
+ background-color: var(--kalendly-in-range-bg);
609
+ outline: 1px solid var(--kalendly-in-range-outline);
600
610
  outline-offset: -1px;
601
611
  }
602
612
 
603
- .time-grid-slot-range-start,
604
- .time-grid-slot-range-end {
605
- background-color: var(--calendar-range-bg);
606
- color: var(--calendar-on-accent);
613
+ .kalendly-time-grid-slot-range-start,
614
+ .kalendly-time-grid-slot-range-end {
615
+ background-color: var(--kalendly-range-bg);
616
+ color: var(--kalendly-on-accent);
607
617
  font-weight: 700;
608
618
  }
609
619
 
610
- .time-grid-slot-in-range {
611
- background-color: var(--calendar-in-range-bg);
612
- color: var(--calendar-range-outline);
620
+ .kalendly-time-grid-slot-in-range {
621
+ background-color: var(--kalendly-in-range-bg);
622
+ color: var(--kalendly-range-outline);
613
623
  }
614
624
 
615
- .calendar-table thead th {
625
+ .kalendly-table thead th {
616
626
  vertical-align: bottom;
617
- border-bottom: 2px solid var(--calendar-border-color);
627
+ border-bottom: 2px solid var(--kalendly-border-color);
618
628
  font-weight: 600;
619
- background-color: var(--calendar-header-bg);
620
- padding: var(--calendar-space-3);
629
+ background-color: var(--kalendly-header-bg);
630
+ padding: var(--kalendly-space-3);
621
631
  }
622
632
 
623
- .calendar-cell-today {
624
- outline: 3px solid var(--calendar-today-outline);
633
+ .kalendly-cell-today {
634
+ outline: 3px solid var(--kalendly-today-outline);
625
635
  outline-offset: -3px;
626
636
  font-weight: bold;
627
637
  }
628
638
 
629
639
  /* RESPONSIVE POPUP DESIGN */
630
- .date-popup {
640
+ .kalendly-popup {
631
641
  position: absolute;
632
642
  z-index: 1000;
633
- background-color: var(--calendar-popup-bg);
643
+ background-color: var(--kalendly-popup-bg);
634
644
  width: 500px;
635
645
  max-width: 90vw;
636
- border-radius: var(--calendar-radius-lg);
637
- box-shadow: var(--calendar-shadow-lg);
646
+ border-radius: var(--kalendly-radius-lg);
647
+ box-shadow: var(--kalendly-shadow-lg);
638
648
  overflow: hidden;
639
649
  left: 50%;
640
650
  top: 50%;
@@ -644,34 +654,34 @@
644
654
  max-height: 80vh;
645
655
  }
646
656
 
647
- .popup-header {
657
+ .kalendly-popup-header {
648
658
  background: linear-gradient(
649
659
  135deg,
650
- var(--calendar-primary-color),
651
- var(--calendar-secondary-color)
660
+ var(--kalendly-primary-color),
661
+ var(--kalendly-secondary-color)
652
662
  );
653
- padding: var(--calendar-space-4) var(--calendar-space-5);
663
+ padding: var(--kalendly-space-4) var(--kalendly-space-5);
654
664
  display: flex;
655
665
  justify-content: space-between;
656
666
  align-items: center;
657
667
  flex-shrink: 0;
658
668
  }
659
669
 
660
- .popup-header h2 {
661
- color: var(--calendar-popup-header-fg);
662
- font-size: var(--calendar-font-lg);
670
+ .kalendly-popup-header h2 {
671
+ color: var(--kalendly-popup-header-fg);
672
+ font-size: var(--kalendly-font-lg);
663
673
  font-weight: 600;
664
674
  margin: 0;
665
675
  }
666
676
 
667
- .popup-close {
677
+ .kalendly-popup-close {
668
678
  width: 32px;
669
679
  height: 32px;
670
- background: var(--calendar-popup-close-bg);
680
+ background: var(--kalendly-popup-close-bg);
671
681
  border: none;
672
- border-radius: var(--calendar-radius-circle);
673
- color: var(--calendar-popup-close-fg);
674
- font-size: var(--calendar-font-xl);
682
+ border-radius: var(--kalendly-radius-circle);
683
+ color: var(--kalendly-popup-close-fg);
684
+ font-size: var(--kalendly-font-xl);
675
685
  cursor: pointer;
676
686
  display: flex;
677
687
  align-items: center;
@@ -680,467 +690,462 @@
680
690
  flex-shrink: 0;
681
691
  }
682
692
 
683
- .popup-close:hover {
684
- background: var(--calendar-popup-close-hover-bg);
693
+ .kalendly-popup-close:hover {
694
+ background: var(--kalendly-popup-close-hover-bg);
685
695
  }
686
696
 
687
- .scroll-hint {
688
- background: rgba(var(--calendar-primary-color-rgb), 0.1);
689
- padding: var(--calendar-space-2-5) var(--calendar-space-5);
697
+ .kalendly-scroll-hint {
698
+ background: color-mix(in srgb, var(--kalendly-primary-color) 10%, transparent);
699
+ padding: var(--kalendly-space-2-5) var(--kalendly-space-5);
690
700
  text-align: center;
691
- color: var(--calendar-primary-color);
692
- font-size: var(--calendar-font-sm);
701
+ color: var(--kalendly-primary-color);
702
+ font-size: var(--kalendly-font-sm);
693
703
  font-weight: 500;
694
704
  flex-shrink: 0;
695
705
  }
696
706
 
697
- .events-container {
698
- padding: var(--calendar-space-4) var(--calendar-space-5);
707
+ .kalendly-events-container {
708
+ padding: var(--kalendly-space-4) var(--kalendly-space-5);
699
709
  overflow-y: auto;
700
710
  flex: 1;
701
711
  }
702
712
 
703
- .events-container::-webkit-scrollbar {
713
+ .kalendly-events-container::-webkit-scrollbar {
704
714
  width: 6px;
705
715
  }
706
716
 
707
- .events-container::-webkit-scrollbar-track {
708
- background: var(--calendar-border-color);
717
+ .kalendly-events-container::-webkit-scrollbar-track {
718
+ background: var(--kalendly-border-color);
709
719
  }
710
720
 
711
- .events-container::-webkit-scrollbar-thumb {
712
- background: var(--calendar-text-light);
713
- border-radius: var(--calendar-radius-sm);
721
+ .kalendly-events-container::-webkit-scrollbar-thumb {
722
+ background: var(--kalendly-text-light);
723
+ border-radius: var(--kalendly-radius-sm);
714
724
  }
715
725
 
716
- .events-container::-webkit-scrollbar-thumb:hover {
717
- background: var(--calendar-text-color);
726
+ .kalendly-events-container::-webkit-scrollbar-thumb:hover {
727
+ background: var(--kalendly-text-color);
718
728
  }
719
729
 
720
- .event-card {
721
- background: var(--calendar-popup-bg);
722
- border: 1px solid var(--calendar-border-color);
723
- border-left: 4px solid var(--calendar-primary-color);
724
- border-radius: var(--calendar-radius-md);
725
- padding: var(--calendar-space-3-5);
726
- margin-bottom: var(--calendar-space-3);
727
- box-shadow: var(--calendar-shadow-xs);
730
+ .kalendly-event-card {
731
+ background: var(--kalendly-popup-bg);
732
+ border: 1px solid var(--kalendly-border-color);
733
+ border-left: 4px solid var(--kalendly-primary-color);
734
+ border-radius: var(--kalendly-radius-md);
735
+ padding: var(--kalendly-space-3-5);
736
+ margin-bottom: var(--kalendly-space-3);
737
+ box-shadow: var(--kalendly-shadow-xs);
728
738
  }
729
739
 
730
- .event-card:last-child {
740
+ .kalendly-event-card:last-child {
731
741
  margin-bottom: 0;
732
742
  }
733
743
 
734
- .event-header {
744
+ .kalendly-event-header {
735
745
  display: flex;
736
746
  justify-content: space-between;
737
747
  align-items: flex-start;
738
- margin-bottom: var(--calendar-space-2-5);
739
- gap: var(--calendar-space-2-5);
748
+ margin-bottom: var(--kalendly-space-2-5);
749
+ gap: var(--kalendly-space-2-5);
740
750
  }
741
751
 
742
- .event-title {
743
- font-size: var(--calendar-font-base);
752
+ .kalendly-event-title {
753
+ font-size: var(--kalendly-font-base);
744
754
  font-weight: 600;
745
- color: var(--calendar-text-color);
755
+ color: var(--kalendly-text-color);
746
756
  flex: 1;
747
757
  word-break: break-word;
748
758
  }
749
759
 
750
- .event-badges {
760
+ .kalendly-event-badges {
751
761
  display: flex;
752
- gap: var(--calendar-space-1-5);
762
+ gap: var(--kalendly-space-1-5);
753
763
  flex-shrink: 0;
754
764
  flex-wrap: wrap;
755
765
  }
756
766
 
757
- .badge {
758
- padding: var(--calendar-space-1) var(--calendar-space-2);
759
- border-radius: var(--calendar-radius-full);
760
- font-size: var(--calendar-font-2xs);
767
+ .kalendly-badge {
768
+ /* Neutral fill for any value without a rule of its own. The specific rules
769
+ below carry an extra class, so they win on specificity rather than order. */
770
+ background: var(--kalendly-badge-bg);
771
+ color: var(--kalendly-badge-text);
772
+ padding: var(--kalendly-space-1) var(--kalendly-space-2);
773
+ border-radius: var(--kalendly-radius-full);
774
+ font-size: var(--kalendly-font-2xs);
761
775
  font-weight: 600;
762
776
  text-transform: uppercase;
763
777
  letter-spacing: 0.3px;
764
778
  white-space: nowrap;
765
779
  }
766
780
 
767
- /* Fallback for caller-defined values. Same specificity as the rules below,
768
- so this must stay above them. */
769
- .badge.category,
770
- .badge.priority,
771
- .badge.status {
772
- background: var(--calendar-badge-bg);
773
- color: var(--calendar-badge-text);
774
- }
775
-
776
- .badge.category-meeting {
777
- background: var(--calendar-badge-success-bg);
778
- color: var(--calendar-badge-success-text);
781
+ .kalendly-badge.kalendly-category-meeting {
782
+ background: var(--kalendly-badge-success-bg);
783
+ color: var(--kalendly-badge-success-text);
779
784
  }
780
785
 
781
- .badge.category-work {
782
- background: var(--calendar-badge-info-bg);
783
- color: var(--calendar-badge-info-text);
786
+ .kalendly-badge.kalendly-category-work {
787
+ background: var(--kalendly-badge-info-bg);
788
+ color: var(--kalendly-badge-info-text);
784
789
  }
785
790
 
786
- .badge.category-personal {
787
- background: var(--calendar-badge-warning-bg);
788
- color: var(--calendar-badge-warning-text);
791
+ .kalendly-badge.kalendly-category-personal {
792
+ background: var(--kalendly-badge-warning-bg);
793
+ color: var(--kalendly-badge-warning-text);
789
794
  }
790
795
 
791
- .badge.category-deadline {
792
- background: var(--calendar-badge-danger-bg);
793
- color: var(--calendar-badge-danger-text);
796
+ .kalendly-badge.kalendly-category-deadline {
797
+ background: var(--kalendly-badge-danger-bg);
798
+ color: var(--kalendly-badge-danger-text);
794
799
  }
795
800
 
796
- .badge.category-appointment {
797
- background: var(--calendar-badge-warning-bg);
798
- color: var(--calendar-badge-warning-text);
801
+ .kalendly-badge.kalendly-category-appointment {
802
+ background: var(--kalendly-badge-warning-bg);
803
+ color: var(--kalendly-badge-warning-text);
799
804
  }
800
805
 
801
- .badge.category-other {
802
- background: var(--calendar-badge-neutral-bg);
803
- color: var(--calendar-badge-neutral-text);
806
+ .kalendly-badge.kalendly-category-other {
807
+ background: var(--kalendly-badge-neutral-bg);
808
+ color: var(--kalendly-badge-neutral-text);
804
809
  }
805
810
 
806
- .badge.priority-high {
807
- background: var(--calendar-badge-danger-bg);
808
- color: var(--calendar-badge-danger-text);
811
+ .kalendly-badge.kalendly-priority-high {
812
+ background: var(--kalendly-badge-danger-bg);
813
+ color: var(--kalendly-badge-danger-text);
809
814
  }
810
815
 
811
- .badge.priority-medium {
812
- background: var(--calendar-badge-warning-bg);
813
- color: var(--calendar-badge-warning-text);
816
+ .kalendly-badge.kalendly-priority-medium {
817
+ background: var(--kalendly-badge-warning-bg);
818
+ color: var(--kalendly-badge-warning-text);
814
819
  }
815
820
 
816
- .badge.priority-low {
817
- background: var(--calendar-badge-positive-bg);
818
- color: var(--calendar-badge-positive-text);
821
+ .kalendly-badge.kalendly-priority-low {
822
+ background: var(--kalendly-badge-positive-bg);
823
+ color: var(--kalendly-badge-positive-text);
819
824
  }
820
825
 
821
- .badge.status-completed {
822
- background: var(--calendar-badge-success-bg);
823
- color: var(--calendar-badge-success-text);
826
+ .kalendly-badge.kalendly-status-completed {
827
+ background: var(--kalendly-badge-success-bg);
828
+ color: var(--kalendly-badge-success-text);
824
829
  }
825
830
 
826
- .badge.status-cancelled {
827
- background: var(--calendar-badge-danger-bg);
828
- color: var(--calendar-badge-danger-text);
831
+ .kalendly-badge.kalendly-status-cancelled {
832
+ background: var(--kalendly-badge-danger-bg);
833
+ color: var(--kalendly-badge-danger-text);
829
834
  }
830
835
 
831
- .badge.status-tentative {
832
- background: var(--calendar-badge-tentative-bg);
833
- color: var(--calendar-badge-tentative-text);
836
+ .kalendly-badge.kalendly-status-tentative {
837
+ background: var(--kalendly-badge-tentative-bg);
838
+ color: var(--kalendly-badge-tentative-text);
834
839
  }
835
840
 
836
- .event-time {
841
+ .kalendly-event-time {
837
842
  display: flex;
838
- gap: var(--calendar-space-2);
839
- margin-bottom: var(--calendar-space-1-5);
840
- font-size: var(--calendar-font-sm);
843
+ gap: var(--kalendly-space-2);
844
+ margin-bottom: var(--kalendly-space-1-5);
845
+ font-size: var(--kalendly-font-sm);
841
846
  }
842
847
 
843
- .event-time-label {
848
+ .kalendly-event-time-label {
844
849
  font-weight: 600;
845
- color: var(--calendar-text-light);
850
+ color: var(--kalendly-text-light);
846
851
  min-width: 70px;
847
852
  flex-shrink: 0;
848
853
  text-align: left;
849
854
  }
850
855
 
851
- .event-time-value {
852
- color: var(--calendar-text-color);
856
+ .kalendly-event-time-value {
857
+ color: var(--kalendly-text-color);
853
858
  font-weight: 400;
854
859
  word-break: break-word;
855
860
  }
856
861
 
857
- .event-description {
862
+ .kalendly-event-description {
858
863
  display: block;
859
- color: var(--calendar-text-light);
860
- font-size: var(--calendar-font-sm);
864
+ color: var(--kalendly-text-light);
865
+ font-size: var(--kalendly-font-sm);
861
866
  line-height: 1.6;
862
- margin-top: var(--calendar-space-2-5);
863
- margin-bottom: var(--calendar-space-2-5);
864
- padding: var(--calendar-space-2) var(--calendar-space-3);
865
- background: var(--calendar-header-bg);
866
- border-left: 2px solid var(--calendar-border-color);
867
- border-radius: var(--calendar-radius-sm);
867
+ margin-top: var(--kalendly-space-2-5);
868
+ margin-bottom: var(--kalendly-space-2-5);
869
+ padding: var(--kalendly-space-2) var(--kalendly-space-3);
870
+ background: var(--kalendly-header-bg);
871
+ border-left: 2px solid var(--kalendly-border-color);
872
+ border-radius: var(--kalendly-radius-sm);
868
873
  word-break: break-word;
869
874
  text-align: left;
870
875
  }
871
876
 
872
- .event-link {
873
- color: var(--calendar-link);
877
+ .kalendly-event-link {
878
+ color: var(--kalendly-link);
874
879
  text-decoration: none;
875
880
  font-weight: 500;
876
- font-size: var(--calendar-font-sm);
881
+ font-size: var(--kalendly-font-sm);
877
882
  }
878
883
 
879
- .event-link:hover {
884
+ .kalendly-event-link:hover {
880
885
  text-decoration: underline;
881
886
  }
882
887
 
883
- .event-tags {
888
+ .kalendly-event-tags {
884
889
  display: flex;
885
890
  flex-wrap: wrap;
886
- gap: var(--calendar-space-1-5);
887
- margin-top: var(--calendar-space-2);
891
+ gap: var(--kalendly-space-1-5);
892
+ margin-top: var(--kalendly-space-2);
888
893
  }
889
894
 
890
- .event-tag {
895
+ .kalendly-event-tag {
891
896
  display: inline-block;
892
- padding: var(--calendar-space-1) var(--calendar-space-2-5);
893
- background-color: rgba(var(--calendar-primary-color-rgb), 0.1);
894
- color: var(--calendar-primary-color);
895
- border-radius: var(--calendar-radius-xl);
896
- font-size: var(--calendar-font-xs);
897
+ padding: var(--kalendly-space-1) var(--kalendly-space-2-5);
898
+ background-color: color-mix(in srgb, var(--kalendly-primary-color) 10%, transparent);
899
+ color: var(--kalendly-primary-color);
900
+ border-radius: var(--kalendly-radius-xl);
901
+ font-size: var(--kalendly-font-xs);
897
902
  font-weight: 500;
898
903
  }
899
904
 
900
- .no-events-message {
901
- background: var(--calendar-popup-bg);
902
- padding: var(--calendar-space-8) var(--calendar-space-5);
905
+ .kalendly-no-events-message {
906
+ background: var(--kalendly-popup-bg);
907
+ padding: var(--kalendly-space-8) var(--kalendly-space-5);
903
908
  text-align: center;
904
- color: var(--calendar-text-light);
905
- font-size: var(--calendar-font-sm);
909
+ color: var(--kalendly-text-light);
910
+ font-size: var(--kalendly-font-sm);
906
911
  }
907
912
 
908
913
  /* Responsive design */
909
914
  @media (min-width: 576px) {
910
- .calendar-content {
911
- padding-right: var(--calendar-space-4);
912
- padding-left: var(--calendar-space-4);
915
+ .kalendly-content {
916
+ padding-right: var(--kalendly-space-4);
917
+ padding-left: var(--kalendly-space-4);
913
918
  }
914
919
  }
915
920
 
916
921
  @media (max-width: 768px) {
917
- .calendar-panes {
922
+ .kalendly-panes {
918
923
  flex-direction: column;
919
924
  }
920
925
 
921
- .calendar-content {
922
- margin-top: var(--calendar-space-4);
923
- padding: 0 var(--calendar-space-2);
926
+ .kalendly-content {
927
+ margin-top: var(--kalendly-space-4);
928
+ padding: 0 var(--kalendly-space-2);
924
929
  }
925
930
 
926
- .calendar-table td,
927
- .calendar-table th {
928
- padding: var(--calendar-space-2) var(--calendar-space-1);
929
- font-size: var(--calendar-font-sm);
931
+ .kalendly-table td,
932
+ .kalendly-table th {
933
+ padding: var(--kalendly-space-2) var(--kalendly-space-1);
934
+ font-size: var(--kalendly-font-sm);
930
935
  }
931
936
 
932
- .calendar-nav-header {
933
- gap: var(--calendar-space-1-5);
934
- padding: var(--calendar-space-2-5) var(--calendar-space-3);
937
+ .kalendly-nav-header {
938
+ gap: var(--kalendly-space-1-5);
939
+ padding: var(--kalendly-space-2-5) var(--kalendly-space-3);
935
940
  }
936
941
 
937
- .calendar-nav-arrow {
942
+ .kalendly-nav-arrow {
938
943
  width: 32px;
939
944
  height: 32px;
940
- font-size: var(--calendar-font-base);
945
+ font-size: var(--kalendly-font-base);
941
946
  }
942
947
 
943
- .calendar-picker-btn {
944
- padding: var(--calendar-space-1-5) var(--calendar-space-3);
948
+ .kalendly-picker-btn {
949
+ padding: var(--kalendly-space-1-5) var(--kalendly-space-3);
945
950
  min-width: 140px;
946
951
  height: 32px;
947
- font-size: var(--calendar-font-sm);
952
+ font-size: var(--kalendly-font-sm);
948
953
  }
949
954
 
950
- .calendar-today-btn {
951
- padding: var(--calendar-space-1-5) var(--calendar-space-3);
955
+ .kalendly-today-btn {
956
+ padding: var(--kalendly-space-1-5) var(--kalendly-space-3);
952
957
  height: 32px;
953
- font-size: var(--calendar-font-xs);
958
+ font-size: var(--kalendly-font-xs);
954
959
  }
955
960
 
956
- .calendar-picker-dropdown {
961
+ .kalendly-picker-dropdown {
957
962
  min-width: 260px;
958
- padding: var(--calendar-space-3);
963
+ padding: var(--kalendly-space-3);
959
964
  }
960
965
 
961
- .date-popup {
966
+ .kalendly-popup {
962
967
  width: 90%;
963
968
  max-width: 400px;
964
969
  }
965
970
 
966
- .popup-header h2 {
967
- font-size: var(--calendar-font-base);
971
+ .kalendly-popup-header h2 {
972
+ font-size: var(--kalendly-font-base);
968
973
  }
969
974
 
970
- .popup-close {
975
+ .kalendly-popup-close {
971
976
  width: 28px;
972
977
  height: 28px;
973
- font-size: var(--calendar-font-lg);
978
+ font-size: var(--kalendly-font-lg);
974
979
  }
975
980
 
976
- .scroll-hint {
977
- font-size: var(--calendar-font-xs);
978
- padding: var(--calendar-space-2) var(--calendar-space-4);
981
+ .kalendly-scroll-hint {
982
+ font-size: var(--kalendly-font-xs);
983
+ padding: var(--kalendly-space-2) var(--kalendly-space-4);
979
984
  }
980
985
 
981
- .events-container {
982
- padding: var(--calendar-space-3) var(--calendar-space-4);
986
+ .kalendly-events-container {
987
+ padding: var(--kalendly-space-3) var(--kalendly-space-4);
983
988
  }
984
989
 
985
- .event-card {
986
- padding: var(--calendar-space-3);
990
+ .kalendly-event-card {
991
+ padding: var(--kalendly-space-3);
987
992
  }
988
993
 
989
- .event-title {
990
- font-size: var(--calendar-font-base);
994
+ .kalendly-event-title {
995
+ font-size: var(--kalendly-font-base);
991
996
  }
992
997
 
993
- .badge {
994
- font-size: var(--calendar-font-2xs);
995
- padding: var(--calendar-space-0-5) var(--calendar-space-1-5);
998
+ .kalendly-badge {
999
+ font-size: var(--kalendly-font-2xs);
1000
+ padding: var(--kalendly-space-0-5) var(--kalendly-space-1-5);
996
1001
  }
997
1002
 
998
- .event-time {
999
- font-size: var(--calendar-font-xs);
1003
+ .kalendly-event-time {
1004
+ font-size: var(--kalendly-font-xs);
1000
1005
  }
1001
1006
 
1002
- .event-time-label {
1007
+ .kalendly-event-time-label {
1003
1008
  min-width: 65px;
1004
1009
  }
1005
1010
 
1006
- .event-description {
1007
- font-size: var(--calendar-font-xs);
1011
+ .kalendly-event-description {
1012
+ font-size: var(--kalendly-font-xs);
1008
1013
  }
1009
1014
  }
1010
1015
 
1011
1016
  @media (max-width: 480px) {
1012
- .calendar-table td {
1017
+ .kalendly-table td {
1013
1018
  height: 40px;
1014
- padding: var(--calendar-space-1);
1019
+ padding: var(--kalendly-space-1);
1015
1020
  }
1016
1021
 
1017
- .calendar-table td,
1018
- .calendar-table th {
1019
- font-size: var(--calendar-font-xs);
1022
+ .kalendly-table td,
1023
+ .kalendly-table th {
1024
+ font-size: var(--kalendly-font-xs);
1020
1025
  }
1021
1026
 
1022
- .calendar-nav-header {
1023
- gap: var(--calendar-space-1);
1024
- padding: var(--calendar-space-2);
1027
+ .kalendly-nav-header {
1028
+ gap: var(--kalendly-space-1);
1029
+ padding: var(--kalendly-space-2);
1025
1030
  }
1026
1031
 
1027
- .calendar-nav-arrow {
1032
+ .kalendly-nav-arrow {
1028
1033
  width: 28px;
1029
1034
  height: 28px;
1030
- font-size: var(--calendar-font-sm);
1035
+ font-size: var(--kalendly-font-sm);
1031
1036
  }
1032
1037
 
1033
- .calendar-picker-btn {
1034
- padding: var(--calendar-space-1) var(--calendar-space-2);
1038
+ .kalendly-picker-btn {
1039
+ padding: var(--kalendly-space-1) var(--kalendly-space-2);
1035
1040
  min-width: 110px;
1036
1041
  height: 28px;
1037
- font-size: var(--calendar-font-xs);
1038
- gap: var(--calendar-space-1);
1042
+ font-size: var(--kalendly-font-xs);
1043
+ gap: var(--kalendly-space-1);
1039
1044
  }
1040
1045
 
1041
- .calendar-picker-chevron {
1042
- font-size: var(--calendar-font-3xs);
1046
+ .kalendly-picker-chevron {
1047
+ font-size: var(--kalendly-font-3xs);
1043
1048
  }
1044
1049
 
1045
- .calendar-today-btn {
1046
- padding: var(--calendar-space-1) var(--calendar-space-2);
1050
+ .kalendly-today-btn {
1051
+ padding: var(--kalendly-space-1) var(--kalendly-space-2);
1047
1052
  height: 28px;
1048
- font-size: var(--calendar-font-xs);
1053
+ font-size: var(--kalendly-font-xs);
1049
1054
  }
1050
1055
 
1051
- .calendar-picker-dropdown {
1056
+ .kalendly-picker-dropdown {
1052
1057
  min-width: 240px;
1053
- padding: var(--calendar-space-2-5);
1058
+ padding: var(--kalendly-space-2-5);
1054
1059
  }
1055
1060
 
1056
- .calendar-picker-year-row {
1057
- gap: var(--calendar-space-2);
1058
- margin-bottom: var(--calendar-space-3);
1059
- padding-bottom: var(--calendar-space-2-5);
1061
+ .kalendly-picker-year-row {
1062
+ gap: var(--kalendly-space-2);
1063
+ margin-bottom: var(--kalendly-space-3);
1064
+ padding-bottom: var(--kalendly-space-2-5);
1060
1065
  }
1061
1066
 
1062
- .calendar-picker-year-input {
1067
+ .kalendly-picker-year-input {
1063
1068
  width: 70px;
1064
- font-size: var(--calendar-font-base);
1069
+ font-size: var(--kalendly-font-base);
1065
1070
  }
1066
1071
 
1067
- .calendar-picker-months {
1068
- gap: var(--calendar-space-1-5);
1072
+ .kalendly-picker-months {
1073
+ gap: var(--kalendly-space-1-5);
1069
1074
  }
1070
1075
 
1071
- .calendar-picker-month {
1072
- padding: var(--calendar-space-2) var(--calendar-space-1-5);
1073
- font-size: var(--calendar-font-xs);
1076
+ .kalendly-picker-month {
1077
+ padding: var(--kalendly-space-2) var(--kalendly-space-1-5);
1078
+ font-size: var(--kalendly-font-xs);
1074
1079
  }
1075
1080
 
1076
- .date-popup {
1081
+ .kalendly-popup {
1077
1082
  width: 95%;
1078
1083
  max-width: 100%;
1079
1084
  max-height: 85vh;
1080
1085
  }
1081
1086
 
1082
- .popup-header {
1083
- padding: var(--calendar-space-3) var(--calendar-space-4);
1087
+ .kalendly-popup-header {
1088
+ padding: var(--kalendly-space-3) var(--kalendly-space-4);
1084
1089
  }
1085
1090
 
1086
- .popup-header h2 {
1087
- font-size: var(--calendar-font-base);
1091
+ .kalendly-popup-header h2 {
1092
+ font-size: var(--kalendly-font-base);
1088
1093
  }
1089
1094
 
1090
- .popup-close {
1095
+ .kalendly-popup-close {
1091
1096
  width: 26px;
1092
1097
  height: 26px;
1093
- font-size: var(--calendar-font-base);
1098
+ font-size: var(--kalendly-font-base);
1094
1099
  }
1095
1100
 
1096
- .scroll-hint {
1097
- font-size: var(--calendar-font-xs);
1098
- padding: var(--calendar-space-2) var(--calendar-space-3);
1101
+ .kalendly-scroll-hint {
1102
+ font-size: var(--kalendly-font-xs);
1103
+ padding: var(--kalendly-space-2) var(--kalendly-space-3);
1099
1104
  }
1100
1105
 
1101
- .events-container {
1102
- padding: var(--calendar-space-2-5) var(--calendar-space-3);
1106
+ .kalendly-events-container {
1107
+ padding: var(--kalendly-space-2-5) var(--kalendly-space-3);
1103
1108
  }
1104
1109
 
1105
- .event-card {
1106
- padding: var(--calendar-space-2-5);
1107
- margin-bottom: var(--calendar-space-2-5);
1110
+ .kalendly-event-card {
1111
+ padding: var(--kalendly-space-2-5);
1112
+ margin-bottom: var(--kalendly-space-2-5);
1108
1113
  }
1109
1114
 
1110
- .event-header {
1115
+ .kalendly-event-header {
1111
1116
  flex-direction: column;
1112
- gap: var(--calendar-space-1-5);
1117
+ gap: var(--kalendly-space-1-5);
1113
1118
  }
1114
1119
 
1115
- .event-badges {
1120
+ .kalendly-event-badges {
1116
1121
  align-self: flex-start;
1117
1122
  }
1118
1123
 
1119
- .event-title {
1120
- font-size: var(--calendar-font-sm);
1124
+ .kalendly-event-title {
1125
+ font-size: var(--kalendly-font-sm);
1121
1126
  }
1122
1127
 
1123
- .badge {
1124
- font-size: var(--calendar-font-2xs);
1128
+ .kalendly-badge {
1129
+ font-size: var(--kalendly-font-2xs);
1125
1130
  }
1126
1131
 
1127
- .event-time {
1132
+ .kalendly-event-time {
1128
1133
  flex-direction: column;
1129
- gap: var(--calendar-space-0-5);
1130
- font-size: var(--calendar-font-xs);
1134
+ gap: var(--kalendly-space-0-5);
1135
+ font-size: var(--kalendly-font-xs);
1131
1136
  }
1132
1137
 
1133
- .event-time-label {
1138
+ .kalendly-event-time-label {
1134
1139
  min-width: auto;
1135
1140
  }
1136
1141
 
1137
- .event-description {
1138
- font-size: var(--calendar-font-xs);
1142
+ .kalendly-event-description {
1143
+ font-size: var(--kalendly-font-xs);
1139
1144
  }
1140
1145
 
1141
- .event-tag {
1142
- font-size: var(--calendar-font-2xs);
1143
- padding: var(--calendar-space-0-5) var(--calendar-space-2);
1146
+ .kalendly-event-tag {
1147
+ font-size: var(--kalendly-font-2xs);
1148
+ padding: var(--kalendly-space-0-5) var(--kalendly-space-2);
1144
1149
  }
1145
1150
  }
1146
1151
 
@@ -1155,15 +1160,15 @@
1155
1160
  }
1156
1161
  }
1157
1162
 
1158
- .calendar-table td.calendar-skeleton {
1163
+ .kalendly-table td.kalendly-skeleton {
1159
1164
  background: linear-gradient(
1160
1165
  90deg,
1161
- var(--calendar-skeleton-base) 25%,
1162
- var(--calendar-skeleton-highlight) 50%,
1163
- var(--calendar-skeleton-base) 75%
1166
+ var(--kalendly-skeleton-base) 25%,
1167
+ var(--kalendly-skeleton-highlight) 50%,
1168
+ var(--kalendly-skeleton-base) 75%
1164
1169
  );
1165
1170
  background-size: 200% 100%;
1166
1171
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
1167
- border-radius: var(--calendar-radius-sm);
1172
+ border-radius: var(--kalendly-radius-sm);
1168
1173
  pointer-events: none;
1169
1174
  }