@sunboard/react 0.1.3 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.d.mts +70 -31
  2. package/dist/index.d.mts.map +1 -1
  3. package/dist/index.mjs +359 -224
  4. package/dist/index.mjs.map +1 -1
  5. package/dist/styles.css +773 -560
  6. package/package.json +4 -4
package/dist/styles.css CHANGED
@@ -1,560 +1,773 @@
1
- /*
2
- * Sunboard owns its own variable namespace. Defaults are plain color literals
3
- * so they render correctly under any host theme system (Tailwind, shadcn v3
4
- * HSL, shadcn v4 OKLCH, vanilla CSS, etc.). To theme Sunboard to match your
5
- * app, override the `--sunboard-*` variables below in your own stylesheet —
6
- * map them to your design tokens (e.g. `var(--card)`, `var(--primary)`) or
7
- * set explicit colors. Make sure your stylesheet imports AFTER
8
- * `@sunboard/react/styles.css` so your overrides win the cascade.
9
- */
10
- :root {
11
- --sunboard-font:
12
- Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
13
- sans-serif;
14
- --sunboard-radius: 12px;
15
-
16
- --sunboard-checklist-background: #ffffff;
17
- --sunboard-checklist-foreground: #111827;
18
- --sunboard-checklist-border: #e5e7eb;
19
- --sunboard-checklist-shadow: 0 18px 60px rgb(15 23 42 / 16%);
20
- --sunboard-checklist-muted: #f3f4f6;
21
- --sunboard-checklist-muted-foreground: #6b7280;
22
- --sunboard-checklist-primary: #2563eb;
23
- --sunboard-checklist-primary-foreground: #ffffff;
24
- --sunboard-checklist-success: #16a34a;
25
-
26
- --sunboard-launcher-background: var(--sunboard-checklist-primary);
27
- --sunboard-launcher-foreground: var(--sunboard-checklist-primary-foreground);
28
- --sunboard-launcher-border: var(--sunboard-checklist-border);
29
- --sunboard-launcher-shadow: var(--sunboard-checklist-shadow);
30
- --sunboard-launcher-count-background: color-mix(
31
- in srgb,
32
- var(--sunboard-launcher-foreground) 18%,
33
- transparent
34
- );
35
-
36
- --sunboard-tour-background: var(--sunboard-checklist-background);
37
- --sunboard-tour-foreground: var(--sunboard-checklist-foreground);
38
- --sunboard-tour-border: var(--sunboard-checklist-border);
39
- --sunboard-tour-shadow: var(--sunboard-checklist-shadow);
40
- --sunboard-tour-muted-foreground: var(
41
- --sunboard-checklist-muted-foreground
42
- );
43
- --sunboard-tour-primary: var(--sunboard-checklist-primary);
44
- --sunboard-tour-primary-foreground: var(
45
- --sunboard-checklist-primary-foreground
46
- );
47
- --sunboard-tour-secondary-background: var(--sunboard-tour-background);
48
- --sunboard-tour-secondary-foreground: var(--sunboard-tour-foreground);
49
- --sunboard-tour-secondary-border: var(--sunboard-tour-border);
50
-
51
- --sunboard-overlay-color: rgb(15 23 42 / 18%);
52
-
53
- --sunboard-hotspot-background: var(--sunboard-checklist-primary);
54
- --sunboard-hotspot-border: var(--sunboard-checklist-primary-foreground);
55
- --sunboard-hotspot-dot: var(--sunboard-checklist-primary-foreground);
56
- --sunboard-hotspot-shadow: var(--sunboard-checklist-shadow);
57
- --sunboard-hotspot-pulse-ring: rgb(37 99 235 / 28%);
58
-
59
- --sunboard-debug-background: var(--sunboard-checklist-background);
60
- --sunboard-debug-foreground: var(--sunboard-checklist-foreground);
61
- --sunboard-debug-border: var(--sunboard-checklist-border);
62
- --sunboard-debug-shadow: var(--sunboard-checklist-shadow);
63
- }
64
-
65
- .sunboard-root {
66
- position: fixed;
67
- right: max(16px, env(safe-area-inset-right));
68
- bottom: max(16px, env(safe-area-inset-bottom));
69
- z-index: 2147483000;
70
- width: min(360px, calc(100vw - 32px));
71
- max-height: min(680px, calc(100vh - 32px));
72
- overflow: auto;
73
- box-sizing: border-box;
74
- border: 1px solid var(--sunboard-checklist-border);
75
- border-radius: var(--sunboard-radius);
76
- background: var(--sunboard-checklist-background);
77
- box-shadow: var(--sunboard-checklist-shadow);
78
- color: var(--sunboard-checklist-foreground);
79
- font-family: var(--sunboard-font);
80
- padding: 16px;
81
- }
82
-
83
- .sunboard-launcher {
84
- position: fixed;
85
- right: max(16px, env(safe-area-inset-right));
86
- bottom: max(16px, env(safe-area-inset-bottom));
87
- z-index: 2147483000;
88
- display: grid;
89
- width: 56px;
90
- height: 56px;
91
- place-items: center;
92
- border: 1px solid var(--sunboard-launcher-border);
93
- border-radius: 999px;
94
- background: var(--sunboard-launcher-background);
95
- box-shadow: var(--sunboard-launcher-shadow);
96
- color: var(--sunboard-launcher-foreground);
97
- cursor: pointer;
98
- font-family: var(--sunboard-font);
99
- padding: 0;
100
- }
101
-
102
- .sunboard-launcher-count {
103
- display: grid;
104
- min-width: 24px;
105
- height: 24px;
106
- place-items: center;
107
- border-radius: 999px;
108
- background: var(--sunboard-launcher-count-background);
109
- font-size: 14px;
110
- font-weight: 800;
111
- line-height: 1;
112
- }
113
-
114
- .sunboard-launcher:focus-visible,
115
- .sunboard-close:focus-visible {
116
- outline: 2px solid var(--sunboard-checklist-primary);
117
- outline-offset: 3px;
118
- }
119
-
120
- .sunboard-root *,
121
- .sunboard-root *::before,
122
- .sunboard-root *::after {
123
- box-sizing: border-box;
124
- }
125
-
126
- .sunboard-header {
127
- display: flex;
128
- align-items: flex-start;
129
- justify-content: space-between;
130
- gap: 16px;
131
- }
132
-
133
- .sunboard-header-actions {
134
- display: flex;
135
- flex: 0 0 auto;
136
- align-items: center;
137
- gap: 8px;
138
- }
139
-
140
- .sunboard-eyebrow,
141
- .sunboard-title,
142
- .sunboard-progress-count,
143
- .sunboard-step-title,
144
- .sunboard-step-description {
145
- margin: 0;
146
- }
147
-
148
- .sunboard-eyebrow {
149
- color: var(--sunboard-checklist-muted-foreground);
150
- font-size: 12px;
151
- font-weight: 650;
152
- line-height: 1.2;
153
- }
154
-
155
- .sunboard-title {
156
- margin-top: 3px;
157
- font-size: 16px;
158
- font-weight: 700;
159
- line-height: 1.3;
160
- }
161
-
162
- .sunboard-progress-count {
163
- flex: 0 0 auto;
164
- border-radius: 999px;
165
- background: var(--sunboard-checklist-muted);
166
- color: var(--sunboard-checklist-muted-foreground);
167
- font-size: 12px;
168
- font-weight: 650;
169
- line-height: 1;
170
- padding: 7px 9px;
171
- }
172
-
173
- .sunboard-close {
174
- display: grid;
175
- width: 28px;
176
- height: 28px;
177
- place-items: center;
178
- border: 1px solid var(--sunboard-checklist-border);
179
- border-radius: 999px;
180
- background: var(--sunboard-checklist-background);
181
- color: var(--sunboard-checklist-muted-foreground);
182
- cursor: pointer;
183
- font: inherit;
184
- font-size: 14px;
185
- font-weight: 800;
186
- line-height: 1;
187
- padding: 0;
188
- }
189
-
190
- .sunboard-progress {
191
- height: 8px;
192
- overflow: hidden;
193
- border-radius: 999px;
194
- background: var(--sunboard-checklist-muted);
195
- margin-top: 14px;
196
- }
197
-
198
- .sunboard-progress-fill {
199
- height: 100%;
200
- border-radius: inherit;
201
- background: var(--sunboard-checklist-primary);
202
- transition: width 160ms ease;
203
- }
204
-
205
- .sunboard-step-list {
206
- display: grid;
207
- gap: 20px;
208
- list-style: none;
209
- margin: 16px 0 0;
210
- padding: 0;
211
- }
212
-
213
- .sunboard-step-row {
214
- display: grid;
215
- width: 100%;
216
- grid-template-columns: 24px minmax(0, 1fr);
217
- gap: 10px;
218
- align-items: start;
219
- border: 0;
220
- background: transparent;
221
- color: inherit;
222
- cursor: default;
223
- font: inherit;
224
- text-align: left;
225
- padding: 6px;
226
- margin: -6px;
227
- border-radius: 8px;
228
- }
229
-
230
- button.sunboard-step-row {
231
- cursor: pointer;
232
- }
233
-
234
- button.sunboard-step-row:hover {
235
- background: var(--sunboard-checklist-muted);
236
- }
237
-
238
- button.sunboard-step-row:focus-visible {
239
- outline: 2px solid var(--sunboard-checklist-primary);
240
- outline-offset: 2px;
241
- }
242
-
243
- .sunboard-step-status {
244
- display: grid;
245
- width: 22px;
246
- height: 22px;
247
- place-items: center;
248
- border: 1px solid var(--sunboard-checklist-border);
249
- border-radius: 999px;
250
- color: var(--sunboard-checklist-primary-foreground);
251
- font-size: 13px;
252
- font-weight: 800;
253
- line-height: 1;
254
- }
255
-
256
- .sunboard-step-status svg {
257
- width: 14px;
258
- height: 14px;
259
- }
260
-
261
- .sunboard-step[data-completed="true"] .sunboard-step-status {
262
- border-color: var(--sunboard-checklist-success);
263
- background: var(--sunboard-checklist-success);
264
- }
265
-
266
- .sunboard-step-content {
267
- min-width: 0;
268
- }
269
-
270
- .sunboard-step-heading {
271
- display: flex;
272
- align-items: flex-start;
273
- justify-content: space-between;
274
- gap: 8px;
275
- }
276
-
277
- .sunboard-step-title {
278
- min-width: 0;
279
- overflow-wrap: anywhere;
280
- font-size: 14px;
281
- font-weight: 650;
282
- line-height: 1.35;
283
- }
284
-
285
- .sunboard-step-badge {
286
- flex: 0 0 auto;
287
- color: var(--sunboard-checklist-muted-foreground);
288
- font-size: 11px;
289
- font-weight: 650;
290
- line-height: 1.5;
291
- white-space: nowrap;
292
- }
293
-
294
- .sunboard-step-description {
295
- color: var(--sunboard-checklist-muted-foreground);
296
- font-size: 13px;
297
- line-height: 1.4;
298
- margin-top: 3px;
299
- }
300
-
301
- .sunboard-hotspot {
302
- z-index: 2147483001;
303
- display: grid;
304
- width: 18px;
305
- height: 18px;
306
- place-items: center;
307
- border: 2px solid var(--sunboard-hotspot-border);
308
- border-radius: 999px;
309
- background: var(--sunboard-hotspot-background);
310
- box-shadow: var(--sunboard-hotspot-shadow);
311
- color: var(--sunboard-hotspot-dot);
312
- cursor: pointer;
313
- font-family: var(--sunboard-font);
314
- padding: 0;
315
- }
316
-
317
- .sunboard-hotspot-dot {
318
- width: 6px;
319
- height: 6px;
320
- border-radius: 999px;
321
- background: currentColor;
322
- }
323
-
324
- .sunboard-hotspot[data-pulse="true"] {
325
- animation: sunboard-hotspot-pulse 1.8s ease-out infinite;
326
- box-shadow:
327
- var(--sunboard-hotspot-shadow),
328
- 0 0 0 8px var(--sunboard-hotspot-pulse-ring);
329
- }
330
-
331
- .sunboard-hotspot:focus-visible {
332
- outline: 2px solid var(--sunboard-hotspot-background);
333
- outline-offset: 3px;
334
- }
335
-
336
- @keyframes sunboard-hotspot-pulse {
337
- 0% {
338
- box-shadow:
339
- var(--sunboard-hotspot-shadow),
340
- 0 0 0 0 var(--sunboard-hotspot-pulse-ring);
341
- }
342
-
343
- 70% {
344
- box-shadow:
345
- var(--sunboard-hotspot-shadow),
346
- 0 0 0 10px transparent;
347
- }
348
-
349
- 100% {
350
- box-shadow:
351
- var(--sunboard-hotspot-shadow),
352
- 0 0 0 0 transparent;
353
- }
354
- }
355
-
356
- .sunboard-tour-scrim {
357
- position: fixed;
358
- inset: 0;
359
- z-index: 2147483001;
360
- background: var(--sunboard-overlay-color);
361
- pointer-events: none;
362
- }
363
-
364
- .sunboard-tour-spotlight {
365
- width: 100vw;
366
- height: 100vh;
367
- background: transparent;
368
- }
369
-
370
- .sunboard-tour {
371
- z-index: 2147483002;
372
- width: min(320px, calc(100vw - 32px));
373
- box-sizing: border-box;
374
- border: 1px solid var(--sunboard-tour-border);
375
- border-radius: var(--sunboard-radius);
376
- background: var(--sunboard-tour-background);
377
- box-shadow: var(--sunboard-tour-shadow);
378
- color: var(--sunboard-tour-foreground);
379
- font-family: var(--sunboard-font);
380
- padding: 14px;
381
- }
382
-
383
- .sunboard-tour-arrow {
384
- color: var(--sunboard-tour-background);
385
- }
386
-
387
- .sunboard-tour-meta {
388
- color: var(--sunboard-tour-muted-foreground);
389
- font-size: 12px;
390
- font-weight: 700;
391
- line-height: 1;
392
- }
393
-
394
- .sunboard-tour-title {
395
- margin: 6px 0 0;
396
- font-size: 15px;
397
- font-weight: 750;
398
- line-height: 1.35;
399
- }
400
-
401
- .sunboard-tour-body {
402
- color: var(--sunboard-tour-muted-foreground);
403
- font-size: 13px;
404
- line-height: 1.45;
405
- margin: 6px 0 0;
406
- }
407
-
408
- .sunboard-tour-actions {
409
- display: flex;
410
- justify-content: flex-end;
411
- gap: 8px;
412
- margin-top: 13px;
413
- }
414
-
415
- .sunboard-tour-primary,
416
- .sunboard-tour-secondary,
417
- .sunboard-debug button {
418
- display: inline-flex;
419
- align-items: center;
420
- justify-content: center;
421
- min-height: 30px;
422
- border-radius: 8px;
423
- cursor: pointer;
424
- font: inherit;
425
- font-size: 12px;
426
- font-weight: 700;
427
- line-height: 1;
428
- padding: 8px 11px;
429
- }
430
-
431
- .sunboard-tour-primary {
432
- border: 0;
433
- background: var(--sunboard-tour-primary);
434
- color: var(--sunboard-tour-primary-foreground);
435
- }
436
-
437
- .sunboard-tour-secondary,
438
- .sunboard-debug button {
439
- border: 1px solid var(--sunboard-tour-secondary-border);
440
- background: var(--sunboard-tour-secondary-background);
441
- color: var(--sunboard-tour-secondary-foreground);
442
- }
443
-
444
- .sunboard-debug {
445
- position: fixed;
446
- right: max(16px, env(safe-area-inset-right));
447
- top: max(16px, env(safe-area-inset-top));
448
- z-index: 2147483003;
449
- display: grid;
450
- width: min(380px, calc(100vw - 32px));
451
- gap: 6px;
452
- box-sizing: border-box;
453
- border: 1px solid var(--sunboard-debug-border);
454
- border-radius: var(--sunboard-radius);
455
- background: var(--sunboard-debug-background);
456
- box-shadow: var(--sunboard-debug-shadow);
457
- color: var(--sunboard-debug-foreground);
458
- font-family: var(--sunboard-font);
459
- font-size: 12px;
460
- line-height: 1.4;
461
- padding: 12px;
462
- }
463
-
464
- .sunboard-root-completion {
465
- text-align: center;
466
- animation: sunboard-completion-in 260ms ease-out both;
467
- }
468
-
469
- .sunboard-completion-close {
470
- position: absolute;
471
- top: 12px;
472
- right: 12px;
473
- }
474
-
475
- .sunboard-completion {
476
- display: flex;
477
- flex-direction: column;
478
- align-items: center;
479
- gap: 8px;
480
- padding: 8px 8px 4px;
481
- }
482
-
483
- .sunboard-completion-check {
484
- display: grid;
485
- place-items: center;
486
- width: 56px;
487
- height: 56px;
488
- margin-bottom: 4px;
489
- border-radius: 999px;
490
- background: color-mix(
491
- in srgb,
492
- var(--sunboard-checklist-success) 14%,
493
- transparent
494
- );
495
- color: var(--sunboard-checklist-success);
496
- animation: sunboard-completion-check-in 380ms cubic-bezier(0.34, 1.56, 0.64, 1)
497
- both;
498
- }
499
-
500
- .sunboard-completion-check svg {
501
- width: 30px;
502
- height: 30px;
503
- }
504
-
505
- .sunboard-completion-subtitle {
506
- margin: 0;
507
- color: var(--sunboard-checklist-muted-foreground);
508
- font-size: 12px;
509
- font-weight: 650;
510
- line-height: 1.2;
511
- text-transform: uppercase;
512
- letter-spacing: 0.04em;
513
- }
514
-
515
- .sunboard-completion-title {
516
- margin: 0;
517
- font-size: 18px;
518
- font-weight: 700;
519
- line-height: 1.3;
520
- }
521
-
522
- .sunboard-completion-message {
523
- margin: 0;
524
- color: var(--sunboard-checklist-muted-foreground);
525
- font-size: 14px;
526
- line-height: 1.5;
527
- }
528
-
529
- @keyframes sunboard-completion-in {
530
- from {
531
- opacity: 0;
532
- transform: scale(0.96);
533
- }
534
- to {
535
- opacity: 1;
536
- transform: scale(1);
537
- }
538
- }
539
-
540
- @keyframes sunboard-completion-check-in {
541
- 0% {
542
- opacity: 0;
543
- transform: scale(0.4);
544
- }
545
- 60% {
546
- opacity: 1;
547
- transform: scale(1.1);
548
- }
549
- 100% {
550
- opacity: 1;
551
- transform: scale(1);
552
- }
553
- }
554
-
555
- @media (prefers-reduced-motion: reduce) {
556
- .sunboard-root-completion,
557
- .sunboard-completion-check {
558
- animation: none;
559
- }
560
- }
1
+ /*
2
+ * Sunboard owns its own variable namespace. Defaults are plain color literals
3
+ * so they render correctly under any host theme system (Tailwind, shadcn v3
4
+ * HSL, shadcn v4 OKLCH, vanilla CSS, etc.). To theme Sunboard to match your
5
+ * app, override the `--sunboard-*` variables below in your own stylesheet —
6
+ * map them to your design tokens (e.g. `var(--card)`, `var(--primary)`) or
7
+ * set explicit colors. Make sure your stylesheet imports AFTER
8
+ * `@sunboard/react/styles.css` so your overrides win the cascade.
9
+ */
10
+ :root {
11
+ --sunboard-font:
12
+ Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
13
+ sans-serif;
14
+ --sunboard-radius: 12px;
15
+
16
+ --sunboard-checklist-background: #ffffff;
17
+ --sunboard-checklist-foreground: #111827;
18
+ --sunboard-checklist-border: #e5e7eb;
19
+ --sunboard-checklist-shadow: 0 18px 60px rgb(15 23 42 / 16%);
20
+ --sunboard-checklist-muted: #f3f4f6;
21
+ --sunboard-checklist-muted-foreground: #6b7280;
22
+ --sunboard-checklist-primary: #2563eb;
23
+ --sunboard-checklist-primary-foreground: #ffffff;
24
+ --sunboard-checklist-success: #16a34a;
25
+
26
+ --sunboard-launcher-background: var(--sunboard-checklist-primary);
27
+ --sunboard-launcher-foreground: var(--sunboard-checklist-primary-foreground);
28
+ --sunboard-launcher-border: var(--sunboard-checklist-border);
29
+ --sunboard-launcher-shadow: var(--sunboard-checklist-shadow);
30
+ --sunboard-launcher-count-background: color-mix(
31
+ in srgb,
32
+ var(--sunboard-launcher-foreground) 18%,
33
+ transparent
34
+ );
35
+
36
+ --sunboard-tour-background: var(--sunboard-checklist-background);
37
+ --sunboard-tour-foreground: var(--sunboard-checklist-foreground);
38
+ --sunboard-tour-border: var(--sunboard-checklist-border);
39
+ --sunboard-tour-shadow: var(--sunboard-checklist-shadow);
40
+ --sunboard-tour-muted-foreground: var(
41
+ --sunboard-checklist-muted-foreground
42
+ );
43
+ --sunboard-tour-primary: var(--sunboard-checklist-primary);
44
+ --sunboard-tour-primary-foreground: var(
45
+ --sunboard-checklist-primary-foreground
46
+ );
47
+ --sunboard-tour-secondary-background: var(--sunboard-tour-background);
48
+ --sunboard-tour-secondary-foreground: var(--sunboard-tour-foreground);
49
+ --sunboard-tour-secondary-border: var(--sunboard-tour-border);
50
+
51
+ --sunboard-overlay-color: rgb(15 23 42 / 18%);
52
+ /* Stronger scrim behind the centered onboarding survey (a gating step). */
53
+ --sunboard-survey-overlay-color: rgb(15 23 42 / 45%);
54
+
55
+ --sunboard-hotspot-background: var(--sunboard-checklist-primary);
56
+ --sunboard-hotspot-border: var(--sunboard-checklist-primary-foreground);
57
+ --sunboard-hotspot-dot: var(--sunboard-checklist-primary-foreground);
58
+ --sunboard-hotspot-shadow: var(--sunboard-checklist-shadow);
59
+ --sunboard-hotspot-pulse-ring: rgb(37 99 235 / 28%);
60
+
61
+ --sunboard-debug-background: var(--sunboard-checklist-background);
62
+ --sunboard-debug-foreground: var(--sunboard-checklist-foreground);
63
+ --sunboard-debug-border: var(--sunboard-checklist-border);
64
+ --sunboard-debug-shadow: var(--sunboard-checklist-shadow);
65
+ }
66
+
67
+ .sunboard-root {
68
+ position: fixed;
69
+ right: max(16px, env(safe-area-inset-right));
70
+ bottom: max(16px, env(safe-area-inset-bottom));
71
+ z-index: 2147483000;
72
+ width: min(360px, calc(100vw - 32px));
73
+ max-height: min(680px, calc(100vh - 32px));
74
+ overflow: auto;
75
+ box-sizing: border-box;
76
+ border: 1px solid var(--sunboard-checklist-border);
77
+ border-radius: var(--sunboard-radius);
78
+ background: var(--sunboard-checklist-background);
79
+ box-shadow: var(--sunboard-checklist-shadow);
80
+ color: var(--sunboard-checklist-foreground);
81
+ font-family: var(--sunboard-font);
82
+ padding: 16px;
83
+ }
84
+
85
+ .sunboard-launcher {
86
+ position: fixed;
87
+ right: max(16px, env(safe-area-inset-right));
88
+ bottom: max(16px, env(safe-area-inset-bottom));
89
+ z-index: 2147483000;
90
+ display: grid;
91
+ width: 56px;
92
+ height: 56px;
93
+ place-items: center;
94
+ border: 1px solid var(--sunboard-launcher-border);
95
+ border-radius: 999px;
96
+ background: var(--sunboard-launcher-background);
97
+ box-shadow: var(--sunboard-launcher-shadow);
98
+ color: var(--sunboard-launcher-foreground);
99
+ cursor: pointer;
100
+ font-family: var(--sunboard-font);
101
+ padding: 0;
102
+ }
103
+
104
+ .sunboard-launcher-count {
105
+ display: grid;
106
+ min-width: 24px;
107
+ height: 24px;
108
+ place-items: center;
109
+ border-radius: 999px;
110
+ background: var(--sunboard-launcher-count-background);
111
+ font-size: 14px;
112
+ font-weight: 800;
113
+ line-height: 1;
114
+ }
115
+
116
+ .sunboard-launcher:focus-visible,
117
+ .sunboard-close:focus-visible {
118
+ outline: 2px solid var(--sunboard-checklist-primary);
119
+ outline-offset: 3px;
120
+ }
121
+
122
+ .sunboard-root *,
123
+ .sunboard-root *::before,
124
+ .sunboard-root *::after {
125
+ box-sizing: border-box;
126
+ }
127
+
128
+ .sunboard-header {
129
+ display: flex;
130
+ align-items: flex-start;
131
+ justify-content: space-between;
132
+ gap: 16px;
133
+ }
134
+
135
+ .sunboard-header-actions {
136
+ display: flex;
137
+ flex: 0 0 auto;
138
+ align-items: center;
139
+ gap: 8px;
140
+ }
141
+
142
+ .sunboard-eyebrow,
143
+ .sunboard-title,
144
+ .sunboard-progress-count,
145
+ .sunboard-step-title,
146
+ .sunboard-step-description {
147
+ margin: 0;
148
+ }
149
+
150
+ .sunboard-eyebrow {
151
+ color: var(--sunboard-checklist-muted-foreground);
152
+ font-size: 12px;
153
+ font-weight: 650;
154
+ line-height: 1.2;
155
+ }
156
+
157
+ .sunboard-title {
158
+ margin-top: 3px;
159
+ font-size: 16px;
160
+ font-weight: 700;
161
+ line-height: 1.3;
162
+ }
163
+
164
+ .sunboard-progress-count {
165
+ flex: 0 0 auto;
166
+ border-radius: 999px;
167
+ background: var(--sunboard-checklist-muted);
168
+ color: var(--sunboard-checklist-muted-foreground);
169
+ font-size: 12px;
170
+ font-weight: 650;
171
+ line-height: 1;
172
+ padding: 7px 9px;
173
+ }
174
+
175
+ .sunboard-close {
176
+ display: grid;
177
+ width: 28px;
178
+ height: 28px;
179
+ place-items: center;
180
+ border: 1px solid var(--sunboard-checklist-border);
181
+ border-radius: 999px;
182
+ background: var(--sunboard-checklist-background);
183
+ color: var(--sunboard-checklist-muted-foreground);
184
+ cursor: pointer;
185
+ font: inherit;
186
+ font-size: 14px;
187
+ font-weight: 800;
188
+ line-height: 1;
189
+ padding: 0;
190
+ }
191
+
192
+ .sunboard-progress {
193
+ height: 8px;
194
+ overflow: hidden;
195
+ border-radius: 999px;
196
+ background: var(--sunboard-checklist-muted);
197
+ margin-top: 14px;
198
+ }
199
+
200
+ .sunboard-progress-fill {
201
+ height: 100%;
202
+ border-radius: inherit;
203
+ background: var(--sunboard-checklist-primary);
204
+ transition: width 160ms ease;
205
+ }
206
+
207
+ .sunboard-step-list {
208
+ display: grid;
209
+ gap: 20px;
210
+ list-style: none;
211
+ margin: 16px 0 0;
212
+ padding: 0;
213
+ }
214
+
215
+ .sunboard-step-row {
216
+ display: grid;
217
+ width: 100%;
218
+ grid-template-columns: 24px minmax(0, 1fr);
219
+ gap: 10px;
220
+ align-items: start;
221
+ border: 0;
222
+ background: transparent;
223
+ color: inherit;
224
+ cursor: default;
225
+ font: inherit;
226
+ text-align: left;
227
+ padding: 6px;
228
+ margin: -6px;
229
+ border-radius: 8px;
230
+ }
231
+
232
+ button.sunboard-step-row {
233
+ cursor: pointer;
234
+ }
235
+
236
+ button.sunboard-step-row:hover {
237
+ background: var(--sunboard-checklist-muted);
238
+ }
239
+
240
+ button.sunboard-step-row:focus-visible {
241
+ outline: 2px solid var(--sunboard-checklist-primary);
242
+ outline-offset: 2px;
243
+ }
244
+
245
+ .sunboard-step-status {
246
+ display: grid;
247
+ width: 22px;
248
+ height: 22px;
249
+ place-items: center;
250
+ border: 1px solid var(--sunboard-checklist-border);
251
+ border-radius: 999px;
252
+ color: var(--sunboard-checklist-primary-foreground);
253
+ font-size: 13px;
254
+ font-weight: 800;
255
+ line-height: 1;
256
+ }
257
+
258
+ .sunboard-step-status svg {
259
+ width: 14px;
260
+ height: 14px;
261
+ }
262
+
263
+ .sunboard-step[data-completed="true"] .sunboard-step-status {
264
+ border-color: var(--sunboard-checklist-success);
265
+ background: var(--sunboard-checklist-success);
266
+ }
267
+
268
+ .sunboard-step-content {
269
+ min-width: 0;
270
+ }
271
+
272
+ .sunboard-step-heading {
273
+ display: flex;
274
+ align-items: flex-start;
275
+ justify-content: space-between;
276
+ gap: 8px;
277
+ }
278
+
279
+ .sunboard-step-title {
280
+ min-width: 0;
281
+ overflow-wrap: anywhere;
282
+ font-size: 14px;
283
+ font-weight: 650;
284
+ line-height: 1.35;
285
+ }
286
+
287
+ .sunboard-step-badge {
288
+ flex: 0 0 auto;
289
+ color: var(--sunboard-checklist-muted-foreground);
290
+ font-size: 11px;
291
+ font-weight: 650;
292
+ line-height: 1.5;
293
+ white-space: nowrap;
294
+ }
295
+
296
+ .sunboard-step-description {
297
+ color: var(--sunboard-checklist-muted-foreground);
298
+ font-size: 13px;
299
+ line-height: 1.4;
300
+ margin-top: 3px;
301
+ }
302
+
303
+ .sunboard-hotspot {
304
+ z-index: 2147483001;
305
+ display: grid;
306
+ width: 18px;
307
+ height: 18px;
308
+ place-items: center;
309
+ border: 2px solid var(--sunboard-hotspot-border);
310
+ border-radius: 999px;
311
+ background: var(--sunboard-hotspot-background);
312
+ box-shadow: var(--sunboard-hotspot-shadow);
313
+ color: var(--sunboard-hotspot-dot);
314
+ cursor: pointer;
315
+ font-family: var(--sunboard-font);
316
+ padding: 0;
317
+ }
318
+
319
+ .sunboard-hotspot-dot {
320
+ width: 6px;
321
+ height: 6px;
322
+ border-radius: 999px;
323
+ background: currentColor;
324
+ }
325
+
326
+ .sunboard-hotspot[data-pulse="true"] {
327
+ animation: sunboard-hotspot-pulse 1.8s ease-out infinite;
328
+ box-shadow:
329
+ var(--sunboard-hotspot-shadow),
330
+ 0 0 0 8px var(--sunboard-hotspot-pulse-ring);
331
+ }
332
+
333
+ .sunboard-hotspot:focus-visible {
334
+ outline: 2px solid var(--sunboard-hotspot-background);
335
+ outline-offset: 3px;
336
+ }
337
+
338
+ @keyframes sunboard-hotspot-pulse {
339
+ 0% {
340
+ box-shadow:
341
+ var(--sunboard-hotspot-shadow),
342
+ 0 0 0 0 var(--sunboard-hotspot-pulse-ring);
343
+ }
344
+
345
+ 70% {
346
+ box-shadow:
347
+ var(--sunboard-hotspot-shadow),
348
+ 0 0 0 10px transparent;
349
+ }
350
+
351
+ 100% {
352
+ box-shadow:
353
+ var(--sunboard-hotspot-shadow),
354
+ 0 0 0 0 transparent;
355
+ }
356
+ }
357
+
358
+ .sunboard-tour-scrim {
359
+ position: fixed;
360
+ inset: 0;
361
+ z-index: 2147483001;
362
+ background: var(--sunboard-overlay-color);
363
+ pointer-events: none;
364
+ }
365
+
366
+ .sunboard-tour-spotlight {
367
+ width: 100vw;
368
+ height: 100vh;
369
+ background: transparent;
370
+ }
371
+
372
+ .sunboard-tour {
373
+ z-index: 2147483002;
374
+ width: min(320px, calc(100vw - 32px));
375
+ box-sizing: border-box;
376
+ border: 1px solid var(--sunboard-tour-border);
377
+ border-radius: var(--sunboard-radius);
378
+ background: var(--sunboard-tour-background);
379
+ box-shadow: var(--sunboard-tour-shadow);
380
+ color: var(--sunboard-tour-foreground);
381
+ font-family: var(--sunboard-font);
382
+ padding: 14px;
383
+ }
384
+
385
+ .sunboard-tour-arrow {
386
+ color: var(--sunboard-tour-background);
387
+ }
388
+
389
+ .sunboard-tour-meta {
390
+ color: var(--sunboard-tour-muted-foreground);
391
+ font-size: 12px;
392
+ font-weight: 700;
393
+ line-height: 1;
394
+ }
395
+
396
+ .sunboard-tour-title {
397
+ margin: 6px 0 0;
398
+ font-size: 15px;
399
+ font-weight: 750;
400
+ line-height: 1.35;
401
+ }
402
+
403
+ .sunboard-tour-body {
404
+ color: var(--sunboard-tour-muted-foreground);
405
+ font-size: 13px;
406
+ line-height: 1.45;
407
+ margin: 6px 0 0;
408
+ }
409
+
410
+ .sunboard-tour-actions {
411
+ display: flex;
412
+ justify-content: flex-end;
413
+ gap: 8px;
414
+ margin-top: 13px;
415
+ }
416
+
417
+ .sunboard-tour-primary,
418
+ .sunboard-tour-secondary,
419
+ .sunboard-debug button {
420
+ display: inline-flex;
421
+ align-items: center;
422
+ justify-content: center;
423
+ min-height: 30px;
424
+ border-radius: 8px;
425
+ cursor: pointer;
426
+ font: inherit;
427
+ font-size: 12px;
428
+ font-weight: 700;
429
+ line-height: 1;
430
+ padding: 8px 11px;
431
+ }
432
+
433
+ .sunboard-tour-primary {
434
+ border: 0;
435
+ background: var(--sunboard-tour-primary);
436
+ color: var(--sunboard-tour-primary-foreground);
437
+ }
438
+
439
+ .sunboard-tour-secondary,
440
+ .sunboard-debug button {
441
+ border: 1px solid var(--sunboard-tour-secondary-border);
442
+ background: var(--sunboard-tour-secondary-background);
443
+ color: var(--sunboard-tour-secondary-foreground);
444
+ }
445
+
446
+ .sunboard-debug {
447
+ position: fixed;
448
+ right: max(16px, env(safe-area-inset-right));
449
+ top: max(16px, env(safe-area-inset-top));
450
+ z-index: 2147483003;
451
+ display: grid;
452
+ width: min(380px, calc(100vw - 32px));
453
+ gap: 6px;
454
+ box-sizing: border-box;
455
+ border: 1px solid var(--sunboard-debug-border);
456
+ border-radius: var(--sunboard-radius);
457
+ background: var(--sunboard-debug-background);
458
+ box-shadow: var(--sunboard-debug-shadow);
459
+ color: var(--sunboard-debug-foreground);
460
+ font-family: var(--sunboard-font);
461
+ font-size: 12px;
462
+ line-height: 1.4;
463
+ padding: 12px;
464
+ }
465
+
466
+ .sunboard-survey-overlay {
467
+ position: fixed;
468
+ inset: 0;
469
+ z-index: 2147483000;
470
+ display: grid;
471
+ place-items: center;
472
+ box-sizing: border-box;
473
+ background: var(--sunboard-survey-overlay-color);
474
+ font-family: var(--sunboard-font);
475
+ padding: max(16px, env(safe-area-inset-bottom));
476
+ /* The scrim only fades — the scale/pop belongs to the card, not the backdrop. */
477
+ animation: sunboard-fade-in 160ms ease-out both;
478
+ }
479
+
480
+ .sunboard-survey-card {
481
+ width: min(480px, 100%);
482
+ max-height: calc(100vh - 32px);
483
+ overflow: auto;
484
+ box-sizing: border-box;
485
+ border: 1px solid var(--sunboard-checklist-border);
486
+ border-radius: var(--sunboard-radius);
487
+ background: var(--sunboard-checklist-background);
488
+ box-shadow: var(--sunboard-checklist-shadow);
489
+ color: var(--sunboard-checklist-foreground);
490
+ padding: 24px;
491
+ animation: sunboard-completion-in 200ms ease-out both;
492
+ }
493
+
494
+ @keyframes sunboard-fade-in {
495
+ from {
496
+ opacity: 0;
497
+ }
498
+ to {
499
+ opacity: 1;
500
+ }
501
+ }
502
+
503
+ .sunboard-survey-card *,
504
+ .sunboard-survey-card *::before,
505
+ .sunboard-survey-card *::after {
506
+ box-sizing: border-box;
507
+ }
508
+
509
+ .sunboard-survey-head {
510
+ margin-bottom: 4px;
511
+ }
512
+
513
+ .sunboard-survey-progress-row {
514
+ margin-top: 14px;
515
+ }
516
+
517
+ .sunboard-survey-stepcount {
518
+ margin: 0 0 6px;
519
+ color: var(--sunboard-checklist-muted-foreground);
520
+ font-size: 12px;
521
+ font-weight: 650;
522
+ line-height: 1;
523
+ }
524
+
525
+ .sunboard-survey-progress-row .sunboard-progress {
526
+ margin-top: 0;
527
+ }
528
+
529
+ .sunboard-survey-step-title {
530
+ margin: 0;
531
+ font-size: 14px;
532
+ font-weight: 700;
533
+ line-height: 1.3;
534
+ }
535
+
536
+ .sunboard-survey-form {
537
+ display: grid;
538
+ gap: 18px;
539
+ margin-top: 16px;
540
+ }
541
+
542
+ .sunboard-survey-nav {
543
+ display: flex;
544
+ align-items: center;
545
+ justify-content: space-between;
546
+ gap: 8px;
547
+ }
548
+
549
+ .sunboard-survey-back {
550
+ display: inline-flex;
551
+ align-items: center;
552
+ justify-content: center;
553
+ min-height: 40px;
554
+ border: 1px solid var(--sunboard-checklist-border);
555
+ border-radius: 8px;
556
+ background: var(--sunboard-checklist-background);
557
+ color: var(--sunboard-checklist-foreground);
558
+ cursor: pointer;
559
+ font: inherit;
560
+ font-size: 14px;
561
+ font-weight: 650;
562
+ line-height: 1;
563
+ padding: 10px 14px;
564
+ }
565
+
566
+ .sunboard-survey-back:hover {
567
+ background: var(--sunboard-checklist-muted);
568
+ }
569
+
570
+ .sunboard-survey-back:focus-visible {
571
+ outline: 2px solid var(--sunboard-checklist-primary);
572
+ outline-offset: 2px;
573
+ }
574
+
575
+ .sunboard-survey-questions {
576
+ display: grid;
577
+ gap: 18px;
578
+ list-style: none;
579
+ margin: 0;
580
+ padding: 0;
581
+ }
582
+
583
+ .sunboard-survey-prompt {
584
+ margin: 0 0 8px;
585
+ font-size: 14px;
586
+ font-weight: 650;
587
+ line-height: 1.35;
588
+ }
589
+
590
+ .sunboard-survey-required {
591
+ color: var(--sunboard-checklist-primary);
592
+ }
593
+
594
+ .sunboard-survey-options {
595
+ display: flex;
596
+ flex-wrap: wrap;
597
+ gap: 8px;
598
+ }
599
+
600
+ .sunboard-survey-option {
601
+ display: inline-flex;
602
+ align-items: center;
603
+ min-height: 36px;
604
+ border: 1px solid var(--sunboard-checklist-border);
605
+ border-radius: 999px;
606
+ background: var(--sunboard-checklist-background);
607
+ color: var(--sunboard-checklist-foreground);
608
+ cursor: pointer;
609
+ font: inherit;
610
+ font-size: 13px;
611
+ font-weight: 600;
612
+ line-height: 1;
613
+ padding: 9px 14px;
614
+ }
615
+
616
+ .sunboard-survey-option:hover {
617
+ background: var(--sunboard-checklist-muted);
618
+ }
619
+
620
+ .sunboard-survey-option[data-selected="true"] {
621
+ border-color: var(--sunboard-checklist-primary);
622
+ background: var(--sunboard-checklist-primary);
623
+ color: var(--sunboard-checklist-primary-foreground);
624
+ }
625
+
626
+ .sunboard-survey-option:focus-visible,
627
+ .sunboard-survey-input:focus-visible,
628
+ .sunboard-survey-submit:focus-visible {
629
+ outline: 2px solid var(--sunboard-checklist-primary);
630
+ outline-offset: 2px;
631
+ }
632
+
633
+ .sunboard-survey-input {
634
+ width: 100%;
635
+ min-height: 38px;
636
+ border: 1px solid var(--sunboard-checklist-border);
637
+ border-radius: 8px;
638
+ background: var(--sunboard-checklist-background);
639
+ color: var(--sunboard-checklist-foreground);
640
+ font: inherit;
641
+ font-size: 14px;
642
+ line-height: 1.4;
643
+ padding: 9px 11px;
644
+ }
645
+
646
+ .sunboard-survey-error {
647
+ margin: 0;
648
+ color: #dc2626;
649
+ font-size: 13px;
650
+ line-height: 1.4;
651
+ }
652
+
653
+ .sunboard-survey-submit {
654
+ display: inline-flex;
655
+ align-items: center;
656
+ justify-content: center;
657
+ min-height: 40px;
658
+ border: 0;
659
+ border-radius: 8px;
660
+ background: var(--sunboard-checklist-primary);
661
+ color: var(--sunboard-checklist-primary-foreground);
662
+ cursor: pointer;
663
+ font: inherit;
664
+ font-size: 14px;
665
+ font-weight: 700;
666
+ line-height: 1;
667
+ padding: 10px 14px;
668
+ }
669
+
670
+ .sunboard-survey-submit:disabled {
671
+ opacity: 0.55;
672
+ cursor: not-allowed;
673
+ }
674
+
675
+ .sunboard-root-completion {
676
+ text-align: center;
677
+ animation: sunboard-completion-in 260ms ease-out both;
678
+ }
679
+
680
+ .sunboard-completion-close {
681
+ position: absolute;
682
+ top: 12px;
683
+ right: 12px;
684
+ }
685
+
686
+ .sunboard-completion {
687
+ display: flex;
688
+ flex-direction: column;
689
+ align-items: center;
690
+ gap: 8px;
691
+ padding: 8px 8px 4px;
692
+ }
693
+
694
+ .sunboard-completion-check {
695
+ display: grid;
696
+ place-items: center;
697
+ width: 56px;
698
+ height: 56px;
699
+ margin-bottom: 4px;
700
+ border-radius: 999px;
701
+ background: color-mix(
702
+ in srgb,
703
+ var(--sunboard-checklist-success) 14%,
704
+ transparent
705
+ );
706
+ color: var(--sunboard-checklist-success);
707
+ animation: sunboard-completion-check-in 380ms cubic-bezier(0.34, 1.56, 0.64, 1)
708
+ both;
709
+ }
710
+
711
+ .sunboard-completion-check svg {
712
+ width: 30px;
713
+ height: 30px;
714
+ }
715
+
716
+ .sunboard-completion-subtitle {
717
+ margin: 0;
718
+ color: var(--sunboard-checklist-muted-foreground);
719
+ font-size: 12px;
720
+ font-weight: 650;
721
+ line-height: 1.2;
722
+ text-transform: uppercase;
723
+ letter-spacing: 0.04em;
724
+ }
725
+
726
+ .sunboard-completion-title {
727
+ margin: 0;
728
+ font-size: 18px;
729
+ font-weight: 700;
730
+ line-height: 1.3;
731
+ }
732
+
733
+ .sunboard-completion-message {
734
+ margin: 0;
735
+ color: var(--sunboard-checklist-muted-foreground);
736
+ font-size: 14px;
737
+ line-height: 1.5;
738
+ }
739
+
740
+ @keyframes sunboard-completion-in {
741
+ from {
742
+ opacity: 0;
743
+ transform: scale(0.96);
744
+ }
745
+ to {
746
+ opacity: 1;
747
+ transform: scale(1);
748
+ }
749
+ }
750
+
751
+ @keyframes sunboard-completion-check-in {
752
+ 0% {
753
+ opacity: 0;
754
+ transform: scale(0.4);
755
+ }
756
+ 60% {
757
+ opacity: 1;
758
+ transform: scale(1.1);
759
+ }
760
+ 100% {
761
+ opacity: 1;
762
+ transform: scale(1);
763
+ }
764
+ }
765
+
766
+ @media (prefers-reduced-motion: reduce) {
767
+ .sunboard-root-completion,
768
+ .sunboard-completion-check,
769
+ .sunboard-survey-overlay,
770
+ .sunboard-survey-card {
771
+ animation: none;
772
+ }
773
+ }