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