kalendly 0.3.2 → 0.3.4
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.
- package/README.md +166 -4
- package/dist/core/index.d.mts +13 -1
- package/dist/core/index.d.ts +13 -1
- package/dist/core/index.js +7 -5
- package/dist/core/index.js.map +1 -1
- package/dist/core/index.mjs +7 -5
- package/dist/core/index.mjs.map +1 -1
- package/dist/index.d.mts +13 -1
- package/dist/index.d.ts +13 -1
- package/dist/index.js +20 -8
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +20 -8
- package/dist/index.mjs.map +1 -1
- package/dist/index.umd.js +20 -8
- package/dist/index.umd.js.map +1 -1
- package/dist/styles/calendar.css +30 -14
- package/package.json +1 -1
package/dist/styles/calendar.css
CHANGED
|
@@ -55,6 +55,11 @@
|
|
|
55
55
|
--calendar-today-outline: var(--kal-yellow-400);
|
|
56
56
|
--calendar-event-indicator: var(--kal-blue-500);
|
|
57
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);
|
|
58
63
|
--calendar-link: var(--kal-blue-600);
|
|
59
64
|
--calendar-skeleton-base: var(--kal-gray-150);
|
|
60
65
|
--calendar-skeleton-highlight: var(--kal-gray-200);
|
|
@@ -124,8 +129,6 @@
|
|
|
124
129
|
--calendar-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
125
130
|
--calendar-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.12);
|
|
126
131
|
--calendar-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
127
|
-
--calendar-shadow-primary: 0 2px 8px
|
|
128
|
-
rgba(var(--calendar-primary-color-rgb), 0.2);
|
|
129
132
|
/* Spacing scale — rem so padding tracks the type scale */
|
|
130
133
|
--calendar-space-0-5: 0.125rem;
|
|
131
134
|
--calendar-space-1: 0.25rem;
|
|
@@ -201,20 +204,27 @@
|
|
|
201
204
|
justify-content: center;
|
|
202
205
|
width: 36px;
|
|
203
206
|
height: 36px;
|
|
204
|
-
border: 1px solid
|
|
207
|
+
border: 1px solid
|
|
208
|
+
var(--calendar-nav-arrow-border, var(--calendar-border-color));
|
|
205
209
|
border-radius: var(--calendar-radius-md);
|
|
206
|
-
background: var(--calendar-background);
|
|
210
|
+
background: var(--calendar-nav-arrow-bg, var(--calendar-background));
|
|
207
211
|
cursor: pointer;
|
|
208
212
|
font-size: var(--calendar-font-lg);
|
|
209
|
-
color: var(--calendar-text-color);
|
|
213
|
+
color: var(--calendar-nav-arrow-fg, var(--calendar-text-color));
|
|
210
214
|
transition: all 0.2s ease;
|
|
211
215
|
flex-shrink: 0;
|
|
212
216
|
}
|
|
213
217
|
|
|
214
218
|
.calendar-nav-arrow:hover {
|
|
215
|
-
background-color: var(
|
|
216
|
-
|
|
217
|
-
|
|
219
|
+
background-color: var(
|
|
220
|
+
--calendar-nav-arrow-hover-bg,
|
|
221
|
+
var(--calendar-primary-color)
|
|
222
|
+
);
|
|
223
|
+
border-color: var(
|
|
224
|
+
--calendar-nav-arrow-hover-bg,
|
|
225
|
+
var(--calendar-primary-color)
|
|
226
|
+
);
|
|
227
|
+
color: var(--calendar-nav-arrow-hover-fg, var(--calendar-on-accent));
|
|
218
228
|
}
|
|
219
229
|
|
|
220
230
|
.calendar-picker-container {
|
|
@@ -247,7 +257,10 @@
|
|
|
247
257
|
|
|
248
258
|
.calendar-picker-btn[aria-expanded='true'] {
|
|
249
259
|
border-color: var(--calendar-primary-color);
|
|
250
|
-
box-shadow: var(
|
|
260
|
+
box-shadow: var(
|
|
261
|
+
--calendar-shadow-primary,
|
|
262
|
+
0 2px 8px rgba(var(--calendar-primary-color-rgb), 0.2)
|
|
263
|
+
);
|
|
251
264
|
}
|
|
252
265
|
|
|
253
266
|
.calendar-picker-chevron {
|
|
@@ -359,7 +372,10 @@
|
|
|
359
372
|
|
|
360
373
|
.calendar-picker-year-input.invalid {
|
|
361
374
|
border-color: var(--calendar-input-invalid);
|
|
362
|
-
background-color:
|
|
375
|
+
background-color: var(
|
|
376
|
+
--calendar-input-invalid-bg,
|
|
377
|
+
rgba(var(--calendar-input-invalid-rgb), 0.1)
|
|
378
|
+
);
|
|
363
379
|
}
|
|
364
380
|
|
|
365
381
|
.calendar-picker-months {
|
|
@@ -647,7 +663,7 @@
|
|
|
647
663
|
}
|
|
648
664
|
|
|
649
665
|
.popup-header h2 {
|
|
650
|
-
color:
|
|
666
|
+
color: var(--calendar-popup-header-fg);
|
|
651
667
|
font-size: var(--calendar-font-lg);
|
|
652
668
|
font-weight: 600;
|
|
653
669
|
margin: 0;
|
|
@@ -656,10 +672,10 @@
|
|
|
656
672
|
.popup-close {
|
|
657
673
|
width: 32px;
|
|
658
674
|
height: 32px;
|
|
659
|
-
background:
|
|
675
|
+
background: var(--calendar-popup-close-bg);
|
|
660
676
|
border: none;
|
|
661
677
|
border-radius: var(--calendar-radius-circle);
|
|
662
|
-
color:
|
|
678
|
+
color: var(--calendar-popup-close-fg);
|
|
663
679
|
font-size: var(--calendar-font-xl);
|
|
664
680
|
cursor: pointer;
|
|
665
681
|
display: flex;
|
|
@@ -670,7 +686,7 @@
|
|
|
670
686
|
}
|
|
671
687
|
|
|
672
688
|
.popup-close:hover {
|
|
673
|
-
background:
|
|
689
|
+
background: var(--calendar-popup-close-hover-bg);
|
|
674
690
|
}
|
|
675
691
|
|
|
676
692
|
.scroll-hint {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "kalendly",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.4",
|
|
4
4
|
"description": "A universal calendar web component — works in React, Vue, Angular, Svelte, Solid.js, and plain HTML with no framework dependency",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|