@cirthcss/cirth 0.3.0 → 0.4.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.
@@ -48,7 +48,7 @@
48
48
  margin-right: auto;
49
49
  }
50
50
 
51
- @media (width >= 576px) {
51
+ @media (min-width: 576px) {
52
52
  .container {
53
53
  max-width: 510px;
54
54
  padding-left: 0;
@@ -56,25 +56,25 @@
56
56
  }
57
57
  }
58
58
 
59
- @media (width >= 768px) {
59
+ @media (min-width: 768px) {
60
60
  .container {
61
61
  max-width: 700px;
62
62
  }
63
63
  }
64
64
 
65
- @media (width >= 1024px) {
65
+ @media (min-width: 1024px) {
66
66
  .container {
67
67
  max-width: 950px;
68
68
  }
69
69
  }
70
70
 
71
- @media (width >= 1280px) {
71
+ @media (min-width: 1280px) {
72
72
  .container {
73
73
  max-width: 1200px;
74
74
  }
75
75
  }
76
76
 
77
- @media (width >= 1536px) {
77
+ @media (min-width: 1536px) {
78
78
  .container {
79
79
  max-width: 1450px;
80
80
  }
@@ -87,7 +87,7 @@
87
87
  display: grid;
88
88
  }
89
89
 
90
- @media (width >= 768px) {
90
+ @media (min-width: 768px) {
91
91
  .grid {
92
92
  grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
93
93
  }
@@ -128,6 +128,10 @@
128
128
  font-weight: var(--cirth-font-weight);
129
129
  }
130
130
 
131
+ .cirth p {
132
+ text-wrap: pretty;
133
+ }
134
+
131
135
  .cirth h1, .cirth h2, .cirth h3, .cirth h4, .cirth h5, .cirth h6 {
132
136
  margin-top: 0;
133
137
  margin-bottom: var(--cirth-typography-spacing-vertical);
@@ -135,7 +139,9 @@
135
139
  font-weight: var(--cirth-font-weight);
136
140
  font-size: var(--cirth-font-size);
137
141
  line-height: var(--cirth-line-height);
138
- font-family: var(--cirth-font-family);
142
+ font-family: var(--cirth-font-family-display);
143
+ letter-spacing: var(--cirth-letter-spacing, normal);
144
+ text-wrap: balance;
139
145
  }
140
146
 
141
147
  .cirth h1 {
@@ -195,10 +201,10 @@
195
201
  }
196
202
 
197
203
  .cirth mark {
204
+ padding: 0 var(--cirth-space-1);
198
205
  background-color: var(--cirth-mark-background-color);
199
206
  color: var(--cirth-mark-color);
200
207
  vertical-align: baseline;
201
- padding: .125rem .25rem;
202
208
  }
203
209
 
204
210
  .cirth blockquote {
@@ -235,22 +241,7 @@
235
241
  background-color: var(--cirth-text-selection-color);
236
242
  }
237
243
 
238
- .cirth [role="link"] {
239
- --cirth-color: var(--cirth-primary);
240
- --cirth-background-color: transparent;
241
- --cirth-underline: var(--cirth-primary-underline);
242
- background-color: var(--cirth-background-color);
243
- color: var(--cirth-color);
244
- -webkit-text-decoration: var(--cirth-text-decoration);
245
- text-decoration: var(--cirth-text-decoration);
246
- -webkit-text-decoration-color: var(--cirth-underline);
247
- text-decoration-color: var(--cirth-underline);
248
- text-underline-offset: .125em;
249
- transition: background-color var(--cirth-transition), color var(--cirth-transition), text-decoration var(--cirth-transition), box-shadow var(--cirth-transition);
250
- outline: none;
251
- }
252
-
253
- .cirth :where(a:not([role="button"])) {
244
+ .cirth :where(a:not([role="button"])), .cirth [role="link"] {
254
245
  --cirth-color: var(--cirth-primary);
255
246
  --cirth-background-color: transparent;
256
247
  --cirth-underline: var(--cirth-primary-underline);
@@ -265,62 +256,33 @@
265
256
  outline: none;
266
257
  }
267
258
 
268
- .cirth :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
269
- --cirth-color: var(--cirth-primary-hover);
270
- --cirth-underline: var(--cirth-primary-hover-underline);
271
- --cirth-text-decoration: underline;
272
- }
273
-
274
- .cirth [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
259
+ .cirth :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), .cirth [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
275
260
  --cirth-color: var(--cirth-primary-hover);
276
261
  --cirth-underline: var(--cirth-primary-hover-underline);
277
262
  --cirth-text-decoration: underline;
278
263
  }
279
264
 
280
- .cirth :where(a:not([role="button"])):focus-visible {
281
- box-shadow: 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
282
- }
283
-
284
- .cirth [role="link"]:focus-visible {
265
+ .cirth :where(a:not([role="button"])):focus-visible, .cirth [role="link"]:focus-visible {
285
266
  box-shadow: 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
267
+ outline: var(--cirth-outline-width) solid transparent;
286
268
  }
287
269
 
288
- .cirth [role="link"].secondary {
289
- --cirth-color: var(--cirth-secondary);
290
- --cirth-underline: var(--cirth-secondary-underline);
291
- }
292
-
293
- .cirth :where(a:not([role="button"])).secondary {
270
+ .cirth :where(a:not([role="button"])).secondary, .cirth [role="link"].secondary {
294
271
  --cirth-color: var(--cirth-secondary);
295
272
  --cirth-underline: var(--cirth-secondary-underline);
296
273
  }
297
274
 
298
- .cirth :where(a:not([role="button"])).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
299
- --cirth-color: var(--cirth-secondary-hover);
300
- --cirth-underline: var(--cirth-secondary-hover-underline);
301
- }
302
-
303
- .cirth [role="link"].secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
275
+ .cirth :where(a:not([role="button"])).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), .cirth [role="link"].secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
304
276
  --cirth-color: var(--cirth-secondary-hover);
305
277
  --cirth-underline: var(--cirth-secondary-hover-underline);
306
278
  }
307
279
 
308
- .cirth [role="link"].contrast {
309
- --cirth-color: var(--cirth-contrast);
310
- --cirth-underline: var(--cirth-contrast-underline);
311
- }
312
-
313
- .cirth :where(a:not([role="button"])).contrast {
280
+ .cirth :where(a:not([role="button"])).contrast, .cirth [role="link"].contrast {
314
281
  --cirth-color: var(--cirth-contrast);
315
282
  --cirth-underline: var(--cirth-contrast-underline);
316
283
  }
317
284
 
318
- .cirth :where(a:not([role="button"])).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
319
- --cirth-color: var(--cirth-contrast-hover);
320
- --cirth-underline: var(--cirth-contrast-hover-underline);
321
- }
322
-
323
- .cirth [role="link"].contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
285
+ .cirth :where(a:not([role="button"])).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), .cirth [role="link"].contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
324
286
  --cirth-color: var(--cirth-contrast-hover);
325
287
  --cirth-underline: var(--cirth-contrast-hover-underline);
326
288
  }
@@ -331,86 +293,20 @@
331
293
 
332
294
  .cirth button {
333
295
  text-transform: none;
334
- -webkit-appearance: button;
335
296
  margin: 0;
336
297
  font-family: inherit;
337
298
  overflow: visible;
338
299
  }
339
300
 
340
- .cirth button, .cirth [role="button"] {
341
- --cirth-background-color: var(--cirth-primary-background);
342
- --cirth-border-color: var(--cirth-primary-border);
343
- --cirth-color: var(--cirth-primary-inverse);
344
- --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
345
- padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
346
- border: var(--cirth-border-width) solid var(--cirth-border-color);
347
- border-radius: var(--cirth-border-radius);
348
- background-color: var(--cirth-background-color);
349
- box-shadow: var(--cirth-box-shadow);
350
- color: var(--cirth-color);
351
- font-weight: var(--cirth-font-weight);
352
- font-size: var(--cirth-font-size-md);
353
- line-height: var(--cirth-line-height);
354
- text-align: center;
355
- cursor: pointer;
356
- -webkit-user-select: none;
357
- user-select: none;
358
- transition: background-color var(--cirth-transition), border-color var(--cirth-transition), color var(--cirth-transition), box-shadow var(--cirth-transition);
359
- outline: none;
360
- text-decoration: none;
361
- }
362
-
363
- .cirth [type="submit"] {
364
- --cirth-background-color: var(--cirth-primary-background);
365
- --cirth-border-color: var(--cirth-primary-border);
366
- --cirth-color: var(--cirth-primary-inverse);
367
- --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
368
- padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
369
- border: var(--cirth-border-width) solid var(--cirth-border-color);
370
- border-radius: var(--cirth-border-radius);
371
- background-color: var(--cirth-background-color);
372
- box-shadow: var(--cirth-box-shadow);
373
- color: var(--cirth-color);
374
- font-weight: var(--cirth-font-weight);
375
- font-size: var(--cirth-font-size-md);
376
- line-height: var(--cirth-line-height);
377
- text-align: center;
378
- cursor: pointer;
379
- -webkit-user-select: none;
380
- user-select: none;
381
- transition: background-color var(--cirth-transition), border-color var(--cirth-transition), color var(--cirth-transition), box-shadow var(--cirth-transition);
382
- outline: none;
383
- text-decoration: none;
384
- }
385
-
386
- .cirth [type="reset"] {
387
- --cirth-background-color: var(--cirth-primary-background);
388
- --cirth-border-color: var(--cirth-primary-border);
389
- --cirth-color: var(--cirth-primary-inverse);
390
- --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
391
- padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
392
- border: var(--cirth-border-width) solid var(--cirth-border-color);
393
- border-radius: var(--cirth-border-radius);
394
- background-color: var(--cirth-background-color);
395
- box-shadow: var(--cirth-box-shadow);
396
- color: var(--cirth-color);
397
- font-weight: var(--cirth-font-weight);
398
- font-size: var(--cirth-font-size-md);
399
- line-height: var(--cirth-line-height);
400
- text-align: center;
401
- cursor: pointer;
402
- -webkit-user-select: none;
403
- user-select: none;
404
- transition: background-color var(--cirth-transition), border-color var(--cirth-transition), color var(--cirth-transition), box-shadow var(--cirth-transition);
405
- outline: none;
406
- text-decoration: none;
301
+ .cirth button, .cirth [type="submit"], .cirth [type="reset"], .cirth [type="button"] {
302
+ -webkit-appearance: button;
407
303
  }
408
304
 
409
- .cirth [type="button"] {
305
+ .cirth button, .cirth [type="submit"], .cirth [type="reset"], .cirth [type="button"], .cirth [role="button"] {
410
306
  --cirth-background-color: var(--cirth-primary-background);
411
307
  --cirth-border-color: var(--cirth-primary-border);
412
308
  --cirth-color: var(--cirth-primary-inverse);
413
- --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
309
+ --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
414
310
  padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
415
311
  border: var(--cirth-border-width) solid var(--cirth-border-color);
416
312
  border-radius: var(--cirth-border-radius);
@@ -433,7 +329,7 @@
433
329
  --cirth-background-color: var(--cirth-primary-background);
434
330
  --cirth-border-color: var(--cirth-primary-border);
435
331
  --cirth-color: var(--cirth-primary-inverse);
436
- --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
332
+ --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
437
333
  padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
438
334
  border: var(--cirth-border-width) solid var(--cirth-border-color);
439
335
  border-radius: var(--cirth-border-radius);
@@ -452,148 +348,58 @@
452
348
  text-decoration: none;
453
349
  }
454
350
 
455
- .cirth button[aria-current]:not([aria-current="false"]), .cirth [role="button"][aria-current]:not([aria-current="false"]) {
456
- --cirth-background-color: var(--cirth-primary-hover-background);
457
- --cirth-border-color: var(--cirth-primary-hover-border);
458
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
459
- --cirth-color: var(--cirth-primary-inverse);
460
- }
461
-
462
- .cirth button:is(:hover, :active, :focus) {
463
- --cirth-background-color: var(--cirth-primary-hover-background);
464
- --cirth-border-color: var(--cirth-primary-hover-border);
465
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
466
- --cirth-color: var(--cirth-primary-inverse);
467
- }
468
-
469
- .cirth [type="submit"][aria-current]:not([aria-current="false"]) {
470
- --cirth-background-color: var(--cirth-primary-hover-background);
471
- --cirth-border-color: var(--cirth-primary-hover-border);
472
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
473
- --cirth-color: var(--cirth-primary-inverse);
474
- }
475
-
476
- .cirth [type="submit"]:is(:hover, :active, :focus) {
477
- --cirth-background-color: var(--cirth-primary-hover-background);
478
- --cirth-border-color: var(--cirth-primary-hover-border);
479
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
480
- --cirth-color: var(--cirth-primary-inverse);
481
- }
482
-
483
- .cirth [type="reset"][aria-current]:not([aria-current="false"]) {
484
- --cirth-background-color: var(--cirth-primary-hover-background);
485
- --cirth-border-color: var(--cirth-primary-hover-border);
486
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
487
- --cirth-color: var(--cirth-primary-inverse);
488
- }
489
-
490
- .cirth [type="reset"]:is(:hover, :active, :focus) {
491
- --cirth-background-color: var(--cirth-primary-hover-background);
492
- --cirth-border-color: var(--cirth-primary-hover-border);
493
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
494
- --cirth-color: var(--cirth-primary-inverse);
495
- }
496
-
497
- .cirth [type="button"][aria-current]:not([aria-current="false"]) {
498
- --cirth-background-color: var(--cirth-primary-hover-background);
499
- --cirth-border-color: var(--cirth-primary-hover-border);
500
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
501
- --cirth-color: var(--cirth-primary-inverse);
502
- }
503
-
504
- .cirth [type="button"]:is(:hover, :active, :focus) {
351
+ .cirth button[aria-current]:not([aria-current="false"]), .cirth button:is(:hover, :active, :focus), .cirth [type="submit"][aria-current]:not([aria-current="false"]), .cirth [type="submit"]:is(:hover, :active, :focus), .cirth [type="reset"][aria-current]:not([aria-current="false"]), .cirth [type="reset"]:is(:hover, :active, :focus), .cirth [type="button"][aria-current]:not([aria-current="false"]), .cirth [type="button"]:is(:hover, :active, :focus), .cirth [role="button"][aria-current]:not([aria-current="false"]), .cirth [role="button"]:is(:hover, :active, :focus) {
505
352
  --cirth-background-color: var(--cirth-primary-hover-background);
506
353
  --cirth-border-color: var(--cirth-primary-hover-border);
507
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
354
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
508
355
  --cirth-color: var(--cirth-primary-inverse);
509
356
  }
510
357
 
511
358
  .cirth [type="file"]::file-selector-button:is() {
512
359
  --cirth-background-color: var(--cirth-primary-hover-background);
513
360
  --cirth-border-color: var(--cirth-primary-hover-border);
514
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
361
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
515
362
  --cirth-color: var(--cirth-primary-inverse);
516
363
  }
517
364
 
518
365
  .cirth [type="file"]::file-selector-button:is(:hover, :active, :focus) {
519
366
  --cirth-background-color: var(--cirth-primary-hover-background);
520
367
  --cirth-border-color: var(--cirth-primary-hover-border);
521
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
522
- --cirth-color: var(--cirth-primary-inverse);
523
- }
524
-
525
- .cirth [role="button"]:is(:hover, :active, :focus) {
526
- --cirth-background-color: var(--cirth-primary-hover-background);
527
- --cirth-border-color: var(--cirth-primary-hover-border);
528
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
368
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
529
369
  --cirth-color: var(--cirth-primary-inverse);
530
370
  }
531
371
 
532
- .cirth button:focus, .cirth button[aria-current]:not([aria-current="false"]):focus, .cirth [role="button"]:focus, .cirth [role="button"][aria-current]:not([aria-current="false"]):focus {
533
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
534
- 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
535
- }
536
-
537
- .cirth [type="submit"]:focus {
538
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
539
- 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
540
- }
541
-
542
- .cirth [type="submit"][aria-current]:not([aria-current="false"]):focus {
543
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
544
- 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
545
- }
546
-
547
- .cirth [type="reset"]:focus {
548
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
549
- 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
550
- }
551
-
552
- .cirth [type="reset"][aria-current]:not([aria-current="false"]):focus {
553
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
554
- 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
372
+ .cirth button:active, .cirth [type="submit"]:active, .cirth [type="reset"]:active, .cirth [type="button"]:active, .cirth [role="button"]:active {
373
+ transform: translateY(.0625rem);
555
374
  }
556
375
 
557
- .cirth [type="button"]:focus {
558
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
559
- 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
376
+ .cirth [type="file"]::file-selector-button:active {
377
+ transform: translateY(.0625rem);
560
378
  }
561
379
 
562
- .cirth [type="button"][aria-current]:not([aria-current="false"]):focus {
563
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
380
+ .cirth button:focus-visible, .cirth button[aria-current]:not([aria-current="false"]):focus-visible, .cirth [type="submit"]:focus-visible, .cirth [type="submit"][aria-current]:not([aria-current="false"]):focus-visible, .cirth [type="reset"]:focus-visible, .cirth [type="reset"][aria-current]:not([aria-current="false"]):focus-visible, .cirth [type="button"]:focus-visible, .cirth [type="button"][aria-current]:not([aria-current="false"]):focus-visible, .cirth [role="button"]:focus-visible, .cirth [role="button"][aria-current]:not([aria-current="false"]):focus-visible {
381
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
564
382
  0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
383
+ outline: var(--cirth-outline-width) solid transparent;
565
384
  }
566
385
 
567
- .cirth [type="file"]::file-selector-button:focus {
568
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
386
+ .cirth [type="file"]::file-selector-button:focus-visible {
387
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
569
388
  0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
389
+ outline: var(--cirth-outline-width) solid transparent;
570
390
  }
571
391
 
572
- .cirth [type="file"]::file-selector-button:is():focus {
573
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
392
+ .cirth [type="file"]::file-selector-button:is():focus-visible {
393
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
574
394
  0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
395
+ outline: var(--cirth-outline-width) solid transparent;
575
396
  }
576
397
 
577
- .cirth [type="submit"] {
578
- margin-bottom: var(--cirth-spacing);
579
- }
580
-
581
- .cirth [type="reset"] {
582
- margin-bottom: var(--cirth-spacing);
583
- }
584
-
585
- .cirth [type="button"] {
398
+ .cirth [type="submit"], .cirth [type="reset"], .cirth [type="button"] {
586
399
  margin-bottom: var(--cirth-spacing);
587
400
  }
588
401
 
589
- .cirth :is(button, [type="submit"], [type="button"], [role="button"]).secondary {
590
- --cirth-background-color: var(--cirth-secondary-background);
591
- --cirth-border-color: var(--cirth-secondary-border);
592
- --cirth-color: var(--cirth-secondary-inverse);
593
- cursor: pointer;
594
- }
595
-
596
- .cirth [type="reset"] {
402
+ .cirth :is(button, [type="submit"], [type="button"], [role="button"]).secondary, .cirth [type="reset"] {
597
403
  --cirth-background-color: var(--cirth-secondary-background);
598
404
  --cirth-border-color: var(--cirth-secondary-border);
599
405
  --cirth-color: var(--cirth-secondary-inverse);
@@ -607,13 +413,7 @@
607
413
  cursor: pointer;
608
414
  }
609
415
 
610
- .cirth :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
611
- --cirth-background-color: var(--cirth-secondary-hover-background);
612
- --cirth-border-color: var(--cirth-secondary-hover-border);
613
- --cirth-color: var(--cirth-secondary-inverse);
614
- }
615
-
616
- .cirth [type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
416
+ .cirth :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), .cirth [type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
617
417
  --cirth-background-color: var(--cirth-secondary-hover-background);
618
418
  --cirth-border-color: var(--cirth-secondary-hover-border);
619
419
  --cirth-color: var(--cirth-secondary-inverse);
@@ -625,33 +425,18 @@
625
425
  --cirth-color: var(--cirth-secondary-inverse);
626
426
  }
627
427
 
628
- .cirth :is(button, [type="submit"], [type="button"], [role="button"]).secondary:focus {
629
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
630
- 0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
631
- }
632
-
633
- .cirth :is(button, [type="submit"], [type="button"], [role="button"]).secondary[aria-current]:not([aria-current="false"]):focus {
634
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
635
- 0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
636
- }
637
-
638
- .cirth [type="reset"]:focus {
639
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
640
- 0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
641
- }
642
-
643
- .cirth [type="reset"][aria-current]:not([aria-current="false"]):focus {
644
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
428
+ .cirth :is(button, [type="submit"], [type="button"], [role="button"]).secondary:focus-visible, .cirth :is(button, [type="submit"], [type="button"], [role="button"]).secondary[aria-current]:not([aria-current="false"]):focus-visible, .cirth [type="reset"]:focus-visible, .cirth [type="reset"][aria-current]:not([aria-current="false"]):focus-visible {
429
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
645
430
  0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
646
431
  }
647
432
 
648
- .cirth [type="file"]::file-selector-button:focus {
649
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
433
+ .cirth [type="file"]::file-selector-button:focus-visible {
434
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
650
435
  0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
651
436
  }
652
437
 
653
- .cirth [type="file"]::file-selector-button:is():focus {
654
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
438
+ .cirth [type="file"]::file-selector-button:is():focus-visible {
439
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
655
440
  0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
656
441
  }
657
442
 
@@ -667,56 +452,29 @@
667
452
  --cirth-color: var(--cirth-contrast-inverse);
668
453
  }
669
454
 
670
- .cirth :is(button, [type="submit"], [type="button"], [role="button"]).contrast:focus {
671
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
455
+ .cirth :is(button, [type="submit"], [type="button"], [role="button"]).contrast:focus-visible, .cirth :is(button, [type="submit"], [type="button"], [role="button"]).contrast[aria-current]:not([aria-current="false"]):focus-visible {
456
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
672
457
  0 0 0 var(--cirth-outline-width) var(--cirth-contrast-focus);
673
458
  }
674
459
 
675
- .cirth :is(button, [type="submit"], [type="button"], [role="button"]).contrast[aria-current]:not([aria-current="false"]):focus {
676
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
677
- 0 0 0 var(--cirth-outline-width) var(--cirth-contrast-focus);
678
- }
679
-
680
- .cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline {
681
- --cirth-background-color: transparent;
682
- --cirth-color: var(--cirth-primary);
683
- --cirth-border-color: var(--cirth-primary);
684
- }
685
-
686
- [type="reset"].outline {
460
+ .cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline, [type="reset"].outline {
687
461
  --cirth-background-color: transparent;
688
462
  --cirth-color: var(--cirth-primary);
689
463
  --cirth-border-color: var(--cirth-primary);
690
464
  }
691
465
 
692
- .cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
466
+ .cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
693
467
  --cirth-background-color: transparent;
694
468
  --cirth-color: var(--cirth-primary-hover);
695
469
  --cirth-border-color: var(--cirth-primary-hover);
696
470
  }
697
471
 
698
- [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
699
- --cirth-background-color: transparent;
700
- --cirth-color: var(--cirth-primary-hover);
701
- --cirth-border-color: var(--cirth-primary-hover);
702
- }
703
-
704
- .cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary {
705
- --cirth-color: var(--cirth-secondary);
706
- --cirth-border-color: var(--cirth-secondary);
707
- }
708
-
709
- [type="reset"].outline {
472
+ .cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary, [type="reset"].outline {
710
473
  --cirth-color: var(--cirth-secondary);
711
474
  --cirth-border-color: var(--cirth-secondary);
712
475
  }
713
476
 
714
- .cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
715
- --cirth-color: var(--cirth-secondary-hover);
716
- --cirth-border-color: var(--cirth-secondary-hover);
717
- }
718
-
719
- [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
477
+ .cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
720
478
  --cirth-color: var(--cirth-secondary-hover);
721
479
  --cirth-border-color: var(--cirth-secondary-hover);
722
480
  }
@@ -731,12 +489,7 @@
731
489
  --cirth-border-color: var(--cirth-contrast-hover);
732
490
  }
733
491
 
734
- .cirth :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled] {
735
- opacity: var(--cirth-opacity-disabled);
736
- pointer-events: none;
737
- }
738
-
739
- .cirth :where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
492
+ .cirth :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled], .cirth :where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
740
493
  opacity: var(--cirth-opacity-disabled);
741
494
  pointer-events: none;
742
495
  }
@@ -754,6 +507,7 @@
754
507
  background-color: var(--cirth-background-color);
755
508
  color: var(--cirth-color);
756
509
  font-weight: var(--cirth-font-weight);
510
+ font-variant-numeric: tabular-nums;
757
511
  text-align: left;
758
512
  text-align: start;
759
513
  }
@@ -794,11 +548,7 @@
794
548
  fill: currentColor;
795
549
  }
796
550
 
797
- .cirth svg:not(:root) {
798
- overflow: hidden;
799
- }
800
-
801
- .cirth svg:not(:host) {
551
+ .cirth svg:not(:root), .cirth svg:not(:host) {
802
552
  overflow: hidden;
803
553
  }
804
554
 
@@ -826,7 +576,7 @@
826
576
  }
827
577
 
828
578
  .cirth code, .cirth kbd, .cirth samp {
829
- padding: .375rem;
579
+ padding: var(--cirth-space-1) var(--cirth-space-2);
830
580
  display: inline-block;
831
581
  }
832
582
 
@@ -903,11 +653,7 @@
903
653
  overflow: auto;
904
654
  }
905
655
 
906
- .cirth [type="checkbox"] {
907
- padding: 0;
908
- }
909
-
910
- .cirth [type="radio"] {
656
+ .cirth [type="checkbox"], .cirth [type="radio"] {
911
657
  padding: 0;
912
658
  }
913
659
 
@@ -950,17 +696,12 @@
950
696
  display: none;
951
697
  }
952
698
 
953
- .cirth [type="file"] {
954
- border-width: 0;
955
- padding: 0;
956
- }
957
-
958
- .cirth [type="range"] {
699
+ .cirth [type="file"], .cirth [type="range"] {
959
700
  border-width: 0;
960
701
  padding: 0;
961
702
  }
962
703
 
963
- .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"])) {
704
+ .cirth input:not([type="checkbox"], [type="radio"], [type="range"]) {
964
705
  height: calc(var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
965
706
  }
966
707
 
@@ -973,7 +714,7 @@
973
714
  }
974
715
 
975
716
  .cirth label, .cirth fieldset legend {
976
- margin-bottom: calc(var(--cirth-spacing) * .375);
717
+ margin-bottom: calc(var(--cirth-spacing) * .5);
977
718
  color: var(--cirth-color);
978
719
  font-weight: var(--cirth-form-label-font-weight, var(--cirth-font-weight));
979
720
  display: block;
@@ -983,24 +724,11 @@
983
724
  margin-bottom: calc(var(--cirth-spacing) * .5);
984
725
  }
985
726
 
986
- .cirth select, .cirth textarea {
987
- width: 100%;
988
- }
989
-
990
- .cirth input:not(:is([type="checkbox"], [type="radio"])) {
727
+ .cirth input:not([type="checkbox"], [type="radio"]), .cirth button[type="submit"], .cirth select, .cirth textarea {
991
728
  width: 100%;
992
729
  }
993
730
 
994
- .cirth button[type="submit"] {
995
- width: 100%;
996
- }
997
-
998
- .cirth select, .cirth textarea {
999
- appearance: none;
1000
- padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
1001
- }
1002
-
1003
- .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"])) {
731
+ .cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), .cirth select, .cirth textarea {
1004
732
  appearance: none;
1005
733
  padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
1006
734
  }
@@ -1020,43 +748,21 @@
1020
748
  outline: none;
1021
749
  }
1022
750
 
1023
- .cirth input:not(:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly])):is(:active, :focus) {
1024
- --cirth-background-color: var(--cirth-form-element-active-background-color);
1025
- }
1026
-
1027
- .cirth :where(select, textarea):not([readonly]):is(:active, :focus) {
751
+ .cirth input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus), .cirth :where(select, textarea):not([readonly]):is(:active, :focus) {
1028
752
  --cirth-background-color: var(--cirth-form-element-active-background-color);
1029
753
  }
1030
754
 
1031
- .cirth input:not(:is([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly])):is(:active, :focus) {
1032
- --cirth-border-color: var(--cirth-form-element-active-border-color);
1033
- }
1034
-
1035
- .cirth :where(select, textarea):not([readonly]):is(:active, :focus) {
755
+ .cirth input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(:active, :focus), .cirth :where(select, textarea):not([readonly]):is(:active, :focus) {
1036
756
  --cirth-border-color: var(--cirth-form-element-active-border-color);
1037
757
  }
1038
758
 
1039
- .cirth input:not(:is([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly])):focus {
1040
- --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
1041
- var(--cirth-form-element-focus-color);
1042
- }
1043
-
1044
- .cirth :where(select, textarea):not([readonly]):focus {
759
+ .cirth input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus, .cirth :where(select, textarea):not([readonly]):focus {
1045
760
  --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
1046
761
  var(--cirth-form-element-focus-color);
762
+ outline: var(--cirth-outline-width) solid transparent;
1047
763
  }
1048
764
 
1049
- .cirth select[disabled], .cirth textarea[disabled], .cirth label[aria-disabled="true"] {
1050
- opacity: var(--cirth-form-element-disabled-opacity);
1051
- pointer-events: none;
1052
- }
1053
-
1054
- .cirth input:not(:is([type="submit"], [type="button"], [type="reset"]))[disabled] {
1055
- opacity: var(--cirth-form-element-disabled-opacity);
1056
- pointer-events: none;
1057
- }
1058
-
1059
- .cirth :where(fieldset[disabled]) :is(input:not(:is([type="submit"], [type="button"], [type="reset"])), select, textarea) {
765
+ .cirth input:not([type="submit"], [type="button"], [type="reset"])[disabled], .cirth select[disabled], .cirth textarea[disabled], .cirth label[aria-disabled="true"], .cirth :where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
1060
766
  opacity: var(--cirth-form-element-disabled-opacity);
1061
767
  pointer-events: none;
1062
768
  }
@@ -1065,7 +771,7 @@
1065
771
  opacity: 1;
1066
772
  }
1067
773
 
1068
- .cirth :where(input, select, textarea):not(:is([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]))[aria-invalid] {
774
+ .cirth :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid] {
1069
775
  padding-right: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
1070
776
  padding-left: var(--cirth-form-element-spacing-horizontal);
1071
777
  background-position: center right var(--cirth-space-3);
@@ -1075,11 +781,11 @@
1075
781
  padding-inline-end: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
1076
782
  }
1077
783
 
1078
- .cirth :where(input, select, textarea):not(:is([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]))[aria-invalid="false"]:not(select) {
784
+ .cirth :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="false"]:not(select) {
1079
785
  background-image: var(--cirth-icon-valid);
1080
786
  }
1081
787
 
1082
- .cirth :where(input, select, textarea):not(:is([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]))[aria-invalid="true"]:not(select) {
788
+ .cirth :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="true"]:not(select) {
1083
789
  background-image: var(--cirth-icon-invalid);
1084
790
  }
1085
791
 
@@ -1091,7 +797,7 @@
1091
797
  --cirth-border-color: var(--cirth-form-element-valid-active-border-color);
1092
798
  }
1093
799
 
1094
- .cirth :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not(:is([type="checkbox"], [type="radio"])) {
800
+ .cirth :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
1095
801
  --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
1096
802
  var(--cirth-form-element-valid-focus-color);
1097
803
  }
@@ -1104,54 +810,40 @@
1104
810
  --cirth-border-color: var(--cirth-form-element-invalid-active-border-color);
1105
811
  }
1106
812
 
1107
- .cirth :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not(:is([type="checkbox"], [type="radio"])) {
813
+ .cirth :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
1108
814
  --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
1109
815
  var(--cirth-form-element-invalid-focus-color);
1110
816
  }
1111
817
 
1112
- [dir="rtl"] .cirth :where(input, select, textarea):not(:is([type="checkbox"], [type="radio"])):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
818
+ [dir="rtl"] .cirth :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
1113
819
  background-position: center left var(--cirth-space-3);
1114
820
  }
1115
821
 
1116
- .cirth select:invalid {
822
+ .cirth input::placeholder, .cirth textarea::placeholder, .cirth select:invalid {
1117
823
  color: var(--cirth-form-element-placeholder-color);
1118
824
  opacity: 1;
1119
825
  }
1120
826
 
1121
- .cirth input::placeholder {
827
+ .cirth input::-webkit-input-placeholder {
1122
828
  color: var(--cirth-form-element-placeholder-color);
1123
829
  opacity: 1;
1124
830
  }
1125
831
 
1126
- .cirth input::-webkit-input-placeholder {
832
+ .cirth textarea::-webkit-input-placeholder {
1127
833
  color: var(--cirth-form-element-placeholder-color);
1128
834
  opacity: 1;
1129
835
  }
1130
836
 
1131
- .cirth textarea::placeholder {
1132
- color: var(--cirth-form-element-placeholder-color);
1133
- opacity: 1;
1134
- }
1135
-
1136
- .cirth textarea::-webkit-input-placeholder {
1137
- color: var(--cirth-form-element-placeholder-color);
1138
- opacity: 1;
1139
- }
1140
-
1141
- .cirth select, .cirth textarea {
1142
- margin-bottom: var(--cirth-spacing);
1143
- }
1144
-
1145
- .cirth input:not(:is([type="checkbox"], [type="radio"])) {
837
+ .cirth input:not([type="checkbox"], [type="radio"]), .cirth select, .cirth textarea {
1146
838
  margin-bottom: var(--cirth-spacing);
1147
839
  }
1148
840
 
1149
841
  .cirth select::-ms-expand {
1150
- background-color: rgba(0, 0, 0, 0);
842
+ background-color: #0000;
1151
843
  border: 0;
1152
844
  }
1153
845
 
1154
- .cirth select:not(:is([multiple], [size])) {
846
+ .cirth select:not([multiple], [size]) {
1155
847
  padding-right: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
1156
848
  padding-left: var(--cirth-form-element-spacing-horizontal);
1157
849
  background-image: var(--cirth-icon-chevron);
@@ -1167,7 +859,7 @@
1167
859
  color: var(--cirth-form-element-color);
1168
860
  }
1169
861
 
1170
- [dir="rtl"] .cirth select:not(:is([multiple], [size])) {
862
+ [dir="rtl"] .cirth select:not([multiple], [size]) {
1171
863
  background-position: center left var(--cirth-space-3);
1172
864
  }
1173
865
 
@@ -1209,25 +901,14 @@
1209
901
  width: fit-content;
1210
902
  }
1211
903
 
1212
- .cirth [type="checkbox"] {
904
+ .cirth [type="checkbox"], .cirth [type="radio"] {
1213
905
  appearance: none;
1214
906
  margin-top: -.125em;
1215
907
  border-width: var(--cirth-border-width);
1216
908
  vertical-align: middle;
1217
909
  cursor: pointer;
1218
- width: 1.25em;
1219
- height: 1.25em;
1220
- margin-inline-end: .5em;
1221
- }
1222
-
1223
- .cirth [type="radio"] {
1224
- appearance: none;
1225
- margin-top: -.125em;
1226
- border-width: var(--cirth-border-width);
1227
- vertical-align: middle;
1228
- cursor: pointer;
1229
- width: 1.25em;
1230
- height: 1.25em;
910
+ width: 1.5em;
911
+ height: 1.5em;
1231
912
  margin-inline-end: .5em;
1232
913
  }
1233
914
 
@@ -1239,77 +920,22 @@
1239
920
  display: none;
1240
921
  }
1241
922
 
1242
- .cirth [type="checkbox"]:checked {
1243
- --cirth-background-color: var(--cirth-primary-background);
1244
- --cirth-border-color: var(--cirth-primary-border);
1245
- background-image: var(--cirth-icon-checkbox);
1246
- background-position: center;
1247
- background-repeat: no-repeat;
1248
- background-size: .75em;
1249
- }
1250
-
1251
- .cirth [type="checkbox"]:checked:active {
1252
- --cirth-background-color: var(--cirth-primary-background);
1253
- --cirth-border-color: var(--cirth-primary-border);
1254
- background-image: var(--cirth-icon-checkbox);
1255
- background-position: center;
1256
- background-repeat: no-repeat;
1257
- background-size: .75em;
1258
- }
1259
-
1260
- .cirth [type="checkbox"]:checked:focus {
1261
- --cirth-background-color: var(--cirth-primary-background);
1262
- --cirth-border-color: var(--cirth-primary-border);
1263
- background-image: var(--cirth-icon-checkbox);
1264
- background-position: center;
1265
- background-repeat: no-repeat;
1266
- background-size: .75em;
1267
- }
1268
-
1269
- .cirth [type="radio"]:checked {
1270
- --cirth-background-color: var(--cirth-primary-background);
1271
- --cirth-border-color: var(--cirth-primary-border);
1272
- background-image: var(--cirth-icon-checkbox);
1273
- background-position: center;
1274
- background-repeat: no-repeat;
1275
- background-size: .75em;
1276
- }
1277
-
1278
- .cirth [type="radio"]:checked:active {
923
+ .cirth [type="checkbox"]:checked, .cirth [type="checkbox"]:checked:active, .cirth [type="checkbox"]:checked:focus, .cirth [type="radio"]:checked, .cirth [type="radio"]:checked:active, .cirth [type="radio"]:checked:focus {
1279
924
  --cirth-background-color: var(--cirth-primary-background);
1280
925
  --cirth-border-color: var(--cirth-primary-border);
1281
926
  background-image: var(--cirth-icon-checkbox);
1282
927
  background-position: center;
1283
928
  background-repeat: no-repeat;
1284
- background-size: .75em;
929
+ background-size: .9em;
1285
930
  }
1286
931
 
1287
- .cirth [type="radio"]:checked:focus {
1288
- --cirth-background-color: var(--cirth-primary-background);
1289
- --cirth-border-color: var(--cirth-primary-border);
1290
- background-image: var(--cirth-icon-checkbox);
1291
- background-position: center;
1292
- background-repeat: no-repeat;
1293
- background-size: .75em;
1294
- }
1295
-
1296
- .cirth [type="checkbox"] ~ label {
1297
- cursor: pointer;
1298
- margin-bottom: 0;
1299
- display: inline-block;
1300
- }
1301
-
1302
- .cirth [type="radio"] ~ label {
932
+ .cirth [type="checkbox"] ~ label, .cirth [type="radio"] ~ label {
1303
933
  cursor: pointer;
1304
934
  margin-bottom: 0;
1305
935
  display: inline-block;
1306
936
  }
1307
937
 
1308
- .cirth [type="checkbox"] ~ label:not(:last-of-type) {
1309
- margin-inline-end: 1em;
1310
- }
1311
-
1312
- .cirth [type="radio"] ~ label:not(:last-of-type) {
938
+ .cirth [type="checkbox"] ~ label:not(:last-of-type), .cirth [type="radio"] ~ label:not(:last-of-type) {
1313
939
  margin-inline-end: 1em;
1314
940
  }
1315
941
 
@@ -1319,29 +945,17 @@
1319
945
  background-image: var(--cirth-icon-minus);
1320
946
  background-position: center;
1321
947
  background-repeat: no-repeat;
1322
- background-size: .75em;
948
+ background-size: .9em;
1323
949
  }
1324
950
 
1325
951
  .cirth [type="radio"] {
1326
952
  border-radius: 50%;
1327
953
  }
1328
954
 
1329
- .cirth [type="radio"]:checked {
1330
- --cirth-background-color: var(--cirth-primary-inverse);
1331
- background-image: none;
1332
- border-width: .35em;
1333
- }
1334
-
1335
- .cirth [type="radio"]:checked:active {
1336
- --cirth-background-color: var(--cirth-primary-inverse);
1337
- background-image: none;
1338
- border-width: .35em;
1339
- }
1340
-
1341
- .cirth [type="radio"]:checked:focus {
955
+ .cirth [type="radio"]:checked, .cirth [type="radio"]:checked:active, .cirth [type="radio"]:checked:focus {
1342
956
  --cirth-background-color: var(--cirth-primary-inverse);
1343
957
  background-image: none;
1344
- border-width: .35em;
958
+ border-width: .42em;
1345
959
  }
1346
960
 
1347
961
  .cirth [type="checkbox"][role="switch"] {
@@ -1349,10 +963,10 @@
1349
963
  --cirth-color: var(--cirth-switch-color);
1350
964
  border: var(--cirth-border-width) solid var(--cirth-border-color);
1351
965
  background-color: var(--cirth-background-color);
1352
- border-radius: 1.25em;
1353
- width: 2.25em;
1354
- height: 1.25em;
1355
- line-height: 1.25em;
966
+ border-radius: 1.5em;
967
+ width: 2.7em;
968
+ height: 1.5em;
969
+ line-height: 1.5em;
1356
970
  }
1357
971
 
1358
972
  .cirth [type="checkbox"][role="switch"]:not([aria-invalid]) {
@@ -1382,130 +996,26 @@
1382
996
  }
1383
997
 
1384
998
  .cirth [type="checkbox"][role="switch"]:checked:before {
1385
- margin-inline-start: 1em;
999
+ margin-inline-start: 1.2em;
1386
1000
  }
1387
1001
 
1388
1002
  .cirth [type="checkbox"][role="switch"][disabled] {
1389
1003
  --cirth-background-color: var(--cirth-border-color);
1390
1004
  }
1391
1005
 
1392
- .cirth [type="checkbox"][aria-invalid="false"]:checked {
1393
- --cirth-background-color: var(--cirth-form-element-valid-border-color);
1394
- }
1395
-
1396
- .cirth [type="checkbox"][aria-invalid="false"]:checked:active {
1397
- --cirth-background-color: var(--cirth-form-element-valid-border-color);
1398
- }
1399
-
1400
- .cirth [type="checkbox"][aria-invalid="false"]:checked:focus {
1401
- --cirth-background-color: var(--cirth-form-element-valid-border-color);
1402
- }
1403
-
1404
- .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked {
1405
- --cirth-background-color: var(--cirth-form-element-valid-border-color);
1406
- }
1407
-
1408
- .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active {
1409
- --cirth-background-color: var(--cirth-form-element-valid-border-color);
1410
- }
1411
-
1412
- .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
1006
+ .cirth [type="checkbox"][aria-invalid="false"]:checked, .cirth [type="checkbox"][aria-invalid="false"]:checked:active, .cirth [type="checkbox"][aria-invalid="false"]:checked:focus, .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked, .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active, .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
1413
1007
  --cirth-background-color: var(--cirth-form-element-valid-border-color);
1414
1008
  }
1415
1009
 
1416
- .cirth [type="checkbox"]:checked[aria-invalid="true"] {
1010
+ .cirth [type="checkbox"]:checked[aria-invalid="true"], .cirth [type="checkbox"]:checked:active[aria-invalid="true"], .cirth [type="checkbox"]:checked:focus[aria-invalid="true"], .cirth [type="checkbox"][role="switch"]:checked[aria-invalid="true"], .cirth [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"], .cirth [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
1417
1011
  --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1418
1012
  }
1419
1013
 
1420
- .cirth [type="checkbox"]:checked:active[aria-invalid="true"] {
1421
- --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1422
- }
1423
-
1424
- .cirth [type="checkbox"]:checked:focus[aria-invalid="true"] {
1425
- --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1426
- }
1427
-
1428
- .cirth [type="checkbox"][role="switch"]:checked[aria-invalid="true"] {
1429
- --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1430
- }
1431
-
1432
- .cirth [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"] {
1433
- --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1434
- }
1435
-
1436
- .cirth [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
1437
- --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1438
- }
1439
-
1440
- .cirth [type="checkbox"][aria-invalid="false"]:checked {
1441
- --cirth-border-color: var(--cirth-form-element-valid-border-color);
1442
- }
1443
-
1444
- .cirth [type="checkbox"][aria-invalid="false"]:checked:active {
1445
- --cirth-border-color: var(--cirth-form-element-valid-border-color);
1446
- }
1447
-
1448
- .cirth [type="checkbox"][aria-invalid="false"]:checked:focus {
1449
- --cirth-border-color: var(--cirth-form-element-valid-border-color);
1450
- }
1451
-
1452
- .cirth [type="radio"][aria-invalid="false"]:checked {
1453
- --cirth-border-color: var(--cirth-form-element-valid-border-color);
1454
- }
1455
-
1456
- .cirth [type="radio"][aria-invalid="false"]:checked:active {
1014
+ .cirth [type="checkbox"][aria-invalid="false"]:checked, .cirth [type="checkbox"][aria-invalid="false"]:checked:active, .cirth [type="checkbox"][aria-invalid="false"]:checked:focus, .cirth [type="radio"][aria-invalid="false"]:checked, .cirth [type="radio"][aria-invalid="false"]:checked:active, .cirth [type="radio"][aria-invalid="false"]:checked:focus, .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked, .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active, .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
1457
1015
  --cirth-border-color: var(--cirth-form-element-valid-border-color);
1458
1016
  }
1459
1017
 
1460
- .cirth [type="radio"][aria-invalid="false"]:checked:focus {
1461
- --cirth-border-color: var(--cirth-form-element-valid-border-color);
1462
- }
1463
-
1464
- .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked {
1465
- --cirth-border-color: var(--cirth-form-element-valid-border-color);
1466
- }
1467
-
1468
- .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active {
1469
- --cirth-border-color: var(--cirth-form-element-valid-border-color);
1470
- }
1471
-
1472
- .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
1473
- --cirth-border-color: var(--cirth-form-element-valid-border-color);
1474
- }
1475
-
1476
- .cirth [type="checkbox"]:checked[aria-invalid="true"] {
1477
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1478
- }
1479
-
1480
- .cirth [type="checkbox"]:checked:active[aria-invalid="true"] {
1481
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1482
- }
1483
-
1484
- .cirth [type="checkbox"]:checked:focus[aria-invalid="true"] {
1485
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1486
- }
1487
-
1488
- .cirth [type="radio"]:checked[aria-invalid="true"] {
1489
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1490
- }
1491
-
1492
- .cirth [type="radio"]:checked:active[aria-invalid="true"] {
1493
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1494
- }
1495
-
1496
- .cirth [type="radio"]:checked:focus[aria-invalid="true"] {
1497
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1498
- }
1499
-
1500
- .cirth [type="checkbox"][role="switch"]:checked[aria-invalid="true"] {
1501
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1502
- }
1503
-
1504
- .cirth [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"] {
1505
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1506
- }
1507
-
1508
- .cirth [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
1018
+ .cirth [type="checkbox"]:checked[aria-invalid="true"], .cirth [type="checkbox"]:checked:active[aria-invalid="true"], .cirth [type="checkbox"]:checked:focus[aria-invalid="true"], .cirth [type="radio"]:checked[aria-invalid="true"], .cirth [type="radio"]:checked:active[aria-invalid="true"], .cirth [type="radio"]:checked:focus[aria-invalid="true"], .cirth [type="checkbox"][role="switch"]:checked[aria-invalid="true"], .cirth [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"], .cirth [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
1509
1019
  --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1510
1020
  }
1511
1021
 
@@ -1527,7 +1037,7 @@
1527
1037
  border: 0;
1528
1038
  }
1529
1039
 
1530
- .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"])):is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
1040
+ .cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
1531
1041
  --cirth-icon-position: var(--cirth-space-3);
1532
1042
  --cirth-icon-width: var(--cirth-size-4);
1533
1043
  padding-right: calc(var(--cirth-icon-width) + var(--cirth-icon-position));
@@ -1537,7 +1047,7 @@
1537
1047
  background-repeat: no-repeat;
1538
1048
  }
1539
1049
 
1540
- .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="time"] {
1050
+ .cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="time"] {
1541
1051
  background-image: var(--cirth-icon-time);
1542
1052
  }
1543
1053
 
@@ -1577,27 +1087,7 @@
1577
1087
  }
1578
1088
 
1579
1089
  @-moz-document url-prefix() {
1580
- .cirth [type="date"] {
1581
- padding-right: var(--cirth-form-element-spacing-horizontal);
1582
- background-image: none;
1583
- }
1584
-
1585
- .cirth [type="datetime-local"] {
1586
- padding-right: var(--cirth-form-element-spacing-horizontal);
1587
- background-image: none;
1588
- }
1589
-
1590
- .cirth [type="month"] {
1591
- padding-right: var(--cirth-form-element-spacing-horizontal);
1592
- background-image: none;
1593
- }
1594
-
1595
- .cirth [type="time"] {
1596
- padding-right: var(--cirth-form-element-spacing-horizontal);
1597
- background-image: none;
1598
- }
1599
-
1600
- .cirth [type="week"] {
1090
+ .cirth [type="date"], .cirth [type="datetime-local"], .cirth [type="month"], .cirth [type="time"], .cirth [type="week"] {
1601
1091
  padding-right: var(--cirth-form-element-spacing-horizontal);
1602
1092
  background-image: none;
1603
1093
  }
@@ -1628,7 +1118,7 @@
1628
1118
  }
1629
1119
 
1630
1120
  .cirth [type="file"]:focus::file-selector-button {
1631
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
1121
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
1632
1122
  0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
1633
1123
  }
1634
1124
 
@@ -1699,12 +1189,7 @@
1699
1189
  margin-top: -.4375rem;
1700
1190
  }
1701
1191
 
1702
- .cirth [type="range"]:active {
1703
- --cirth-range-border-color: var(--cirth-range-active-border-color);
1704
- --cirth-range-thumb-color: var(--cirth-range-thumb-active-color);
1705
- }
1706
-
1707
- .cirth [type="range"]:focus-within {
1192
+ .cirth [type="range"]:active, .cirth [type="range"]:focus-within {
1708
1193
  --cirth-range-border-color: var(--cirth-range-active-border-color);
1709
1194
  --cirth-range-thumb-color: var(--cirth-range-thumb-active-color);
1710
1195
  }
@@ -1721,33 +1206,33 @@
1721
1206
  transform: scale(1.25);
1722
1207
  }
1723
1208
 
1724
- .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"] {
1209
+ .cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
1725
1210
  background-image: var(--cirth-icon-search);
1726
- background-position: center left calc(var(--cirth-form-element-spacing-horizontal) + .125rem);
1211
+ background-position: center left var(--cirth-form-element-spacing-horizontal);
1727
1212
  background-repeat: no-repeat;
1728
1213
  background-size: 1rem;
1729
- padding-inline-start: calc(var(--cirth-form-element-spacing-horizontal) + 1.75rem);
1214
+ padding-inline-start: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
1730
1215
  }
1731
1216
 
1732
- .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"][aria-invalid] {
1733
- background-position: 1.125rem, right .75rem center;
1734
- padding-inline-start: calc(var(--cirth-form-element-spacing-horizontal) + 1.75rem);
1217
+ .cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
1218
+ background-position: center left var(--cirth-form-element-spacing-horizontal), center right var(--cirth-space-3);
1219
+ padding-inline-start: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
1735
1220
  }
1736
1221
 
1737
- .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"][aria-invalid="false"] {
1222
+ .cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="false"] {
1738
1223
  background-image: var(--cirth-icon-search), var(--cirth-icon-valid);
1739
1224
  }
1740
1225
 
1741
- .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"][aria-invalid="true"] {
1226
+ .cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="true"] {
1742
1227
  background-image: var(--cirth-icon-search), var(--cirth-icon-invalid);
1743
1228
  }
1744
1229
 
1745
- [dir="rtl"] .cirth :where(input):not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"] {
1746
- background-position: right 1.125rem center;
1230
+ [dir="rtl"] .cirth :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
1231
+ background-position: center right var(--cirth-form-element-spacing-horizontal);
1747
1232
  }
1748
1233
 
1749
- [dir="rtl"] .cirth :where(input):not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"][aria-invalid] {
1750
- background-position: right 1.125rem center, .75rem;
1234
+ [dir="rtl"] .cirth :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
1235
+ background-position: center right var(--cirth-form-element-spacing-horizontal), center left var(--cirth-space-3);
1751
1236
  }
1752
1237
 
1753
1238
  .cirth details {
@@ -1848,7 +1333,7 @@
1848
1333
  .cirth article > header, .cirth article > footer {
1849
1334
  margin-right: calc(var(--cirth-block-spacing-horizontal) * -1);
1850
1335
  margin-left: calc(var(--cirth-block-spacing-horizontal) * -1);
1851
- padding: calc(var(--cirth-block-spacing-vertical) * .66) var(--cirth-block-spacing-horizontal);
1336
+ padding: calc(var(--cirth-block-spacing-vertical) - var(--cirth-space-2)) var(--cirth-block-spacing-horizontal);
1852
1337
  background-color: var(--cirth-card-sectioning-background-color);
1853
1338
  }
1854
1339
 
@@ -1915,7 +1400,7 @@
1915
1400
  }
1916
1401
 
1917
1402
  .cirth details.dropdown > summary:not([role]):focus-visible {
1918
- outline: none;
1403
+ outline: var(--cirth-outline-width) solid transparent;
1919
1404
  }
1920
1405
 
1921
1406
  .cirth details.dropdown > summary:not([role])[aria-invalid="false"] {
@@ -2000,300 +1485,166 @@
2000
1485
  overflow: hidden;
2001
1486
  }
2002
1487
 
2003
- .cirth details.dropdown > summary + ul li a:hover, .cirth details.dropdown > summary + ul li a:focus, .cirth details.dropdown > summary + ul li a:active, .cirth details.dropdown > summary + ul li a[aria-current]:not([aria-current="false"]) {
2004
- background-color: var(--cirth-dropdown-hover-background-color);
2005
- }
2006
-
2007
- .cirth details.dropdown > summary + ul li a:focus-visible {
1488
+ .cirth details.dropdown > summary + ul li a:hover, .cirth details.dropdown > summary + ul li a:focus, .cirth details.dropdown > summary + ul li a:active, .cirth details.dropdown > summary + ul li a:focus-visible, .cirth details.dropdown > summary + ul li a[aria-current]:not([aria-current="false"]) {
2008
1489
  background-color: var(--cirth-dropdown-hover-background-color);
2009
1490
  }
2010
1491
 
2011
- .cirth details.dropdown > summary + ul li label {
2012
- width: 100%;
2013
- }
2014
-
2015
- .cirth details.dropdown > summary + ul li:has(label):hover {
2016
- background-color: var(--cirth-dropdown-hover-background-color);
2017
- }
2018
-
2019
- .cirth details.dropdown[open] > summary {
2020
- margin-bottom: 0;
2021
- }
2022
-
2023
- .cirth details.dropdown[open] > summary + ul {
2024
- opacity: 1;
2025
- transition: opacity var(--cirth-transition), transform var(--cirth-duration-instant) var(--cirth-ease-in-out) var(--cirth-duration-instant);
2026
- transform: scaleY(1);
2027
- }
2028
-
2029
- .cirth details.dropdown[open] > summary:before {
2030
- z-index: 1;
2031
- content: "";
2032
- cursor: default;
2033
- background: none;
2034
- width: 100vw;
2035
- height: 100vh;
2036
- display: block;
2037
- position: fixed;
2038
- inset: 0;
2039
- }
2040
-
2041
- .cirth label > details.dropdown {
2042
- margin-top: calc(var(--cirth-spacing) * .25);
2043
- }
2044
-
2045
- .cirth [role="search"], .cirth [role="group"] {
2046
- width: 100%;
2047
- margin-bottom: var(--cirth-spacing);
2048
- border-radius: var(--cirth-border-radius);
2049
- box-shadow: var(--cirth-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
2050
- vertical-align: middle;
2051
- transition: box-shadow var(--cirth-transition);
2052
- display: inline-flex;
2053
- position: relative;
2054
- }
2055
-
2056
- .cirth [role="search"] > *, .cirth [role="search"] select, .cirth [role="group"] > *, .cirth [role="group"] select {
2057
- flex: auto;
2058
- margin-bottom: 0;
2059
- position: relative;
2060
- }
2061
-
2062
- .cirth [role="search"] input:not(:is([type="checkbox"], [type="radio"])) {
2063
- flex: auto;
2064
- margin-bottom: 0;
2065
- position: relative;
2066
- }
2067
-
2068
- .cirth [role="group"] input:not(:is([type="checkbox"], [type="radio"])) {
2069
- flex: auto;
2070
- margin-bottom: 0;
2071
- position: relative;
2072
- }
2073
-
2074
- .cirth [role="search"] > :not(:first-child), .cirth [role="search"] select:not(:first-child), .cirth [role="group"] > :not(:first-child), .cirth [role="group"] select:not(:first-child) {
2075
- border-top-left-radius: 0;
2076
- border-bottom-left-radius: 0;
2077
- margin-left: 0;
2078
- }
2079
-
2080
- .cirth [role="search"] input:not(:is([type="checkbox"], [type="radio"])):not(:first-child) {
2081
- border-top-left-radius: 0;
2082
- border-bottom-left-radius: 0;
2083
- margin-left: 0;
2084
- }
2085
-
2086
- .cirth [role="group"] input:not(:is([type="checkbox"], [type="radio"])):not(:first-child) {
2087
- border-top-left-radius: 0;
2088
- border-bottom-left-radius: 0;
2089
- margin-left: 0;
2090
- }
2091
-
2092
- .cirth [role="search"] > :not(:last-child), .cirth [role="search"] select:not(:last-child), .cirth [role="group"] > :not(:last-child), .cirth [role="group"] select:not(:last-child) {
2093
- border-top-right-radius: 0;
2094
- border-bottom-right-radius: 0;
2095
- }
2096
-
2097
- .cirth [role="search"] input:not(:is([type="checkbox"], [type="radio"])):not(:last-child) {
2098
- border-top-right-radius: 0;
2099
- border-bottom-right-radius: 0;
2100
- }
2101
-
2102
- .cirth [role="group"] input:not(:is([type="checkbox"], [type="radio"])):not(:last-child) {
2103
- border-top-right-radius: 0;
2104
- border-bottom-right-radius: 0;
2105
- }
2106
-
2107
- .cirth [role="search"] > :focus, .cirth [role="search"] select:focus, .cirth [role="group"] > :focus, .cirth [role="group"] select:focus {
2108
- z-index: 2;
2109
- }
2110
-
2111
- .cirth [role="search"] input:not(:is([type="checkbox"], [type="radio"])):focus {
2112
- z-index: 2;
2113
- }
2114
-
2115
- .cirth [role="group"] input:not(:is([type="checkbox"], [type="radio"])):focus {
2116
- z-index: 2;
2117
- }
2118
-
2119
- .cirth [role="search"] button:not(:first-child), .cirth [role="search"] [role="button"]:not(:first-child), .cirth [role="search"] select:not(:first-child), .cirth [role="group"] button:not(:first-child), .cirth [role="group"] [role="button"]:not(:first-child), .cirth [role="group"] select:not(:first-child) {
2120
- margin-left: calc(var(--cirth-border-width) * -1);
2121
- }
2122
-
2123
- .cirth [role="search"] [type="submit"]:not(:first-child) {
2124
- margin-left: calc(var(--cirth-border-width) * -1);
2125
- }
2126
-
2127
- .cirth [role="search"] [type="reset"]:not(:first-child) {
2128
- margin-left: calc(var(--cirth-border-width) * -1);
2129
- }
2130
-
2131
- .cirth [role="search"] [type="button"]:not(:first-child) {
2132
- margin-left: calc(var(--cirth-border-width) * -1);
1492
+ .cirth details.dropdown > summary + ul li label {
1493
+ width: 100%;
2133
1494
  }
2134
1495
 
2135
- .cirth [role="search"] input:not(:is([type="checkbox"], [type="radio"])):not(:first-child) {
2136
- margin-left: calc(var(--cirth-border-width) * -1);
1496
+ .cirth details.dropdown > summary + ul li:has(label):hover {
1497
+ background-color: var(--cirth-dropdown-hover-background-color);
2137
1498
  }
2138
1499
 
2139
- .cirth [role="group"] [type="submit"]:not(:first-child) {
2140
- margin-left: calc(var(--cirth-border-width) * -1);
1500
+ .cirth details.dropdown[open] > summary {
1501
+ margin-bottom: 0;
2141
1502
  }
2142
1503
 
2143
- .cirth [role="group"] [type="reset"]:not(:first-child) {
2144
- margin-left: calc(var(--cirth-border-width) * -1);
1504
+ .cirth details.dropdown[open] > summary + ul {
1505
+ opacity: 1;
1506
+ transition: opacity var(--cirth-transition), transform var(--cirth-duration-instant) var(--cirth-ease-in-out) var(--cirth-duration-instant);
1507
+ transform: scaleY(1);
2145
1508
  }
2146
1509
 
2147
- .cirth [role="group"] [type="button"]:not(:first-child) {
2148
- margin-left: calc(var(--cirth-border-width) * -1);
1510
+ .cirth details.dropdown[open] > summary:before {
1511
+ z-index: 1;
1512
+ content: "";
1513
+ cursor: default;
1514
+ background: none;
1515
+ width: 100vw;
1516
+ height: 100vh;
1517
+ display: block;
1518
+ position: fixed;
1519
+ inset: 0;
2149
1520
  }
2150
1521
 
2151
- .cirth [role="group"] input:not(:is([type="checkbox"], [type="radio"])):not(:first-child) {
2152
- margin-left: calc(var(--cirth-border-width) * -1);
1522
+ .cirth label > details.dropdown {
1523
+ margin-top: calc(var(--cirth-spacing) * .25);
2153
1524
  }
2154
1525
 
2155
- .cirth [role="search"] button, .cirth [role="search"] [role="button"], .cirth [role="group"] button, .cirth [role="group"] [role="button"] {
2156
- width: auto;
1526
+ .cirth [role="search"], .cirth [role="group"] {
1527
+ width: 100%;
1528
+ margin-bottom: var(--cirth-spacing);
1529
+ border-radius: var(--cirth-border-radius);
1530
+ box-shadow: var(--cirth-group-box-shadow, 0 0 0 #0000);
1531
+ vertical-align: middle;
1532
+ transition: box-shadow var(--cirth-transition);
1533
+ display: inline-flex;
1534
+ position: relative;
2157
1535
  }
2158
1536
 
2159
- .cirth [role="search"] [type="submit"] {
2160
- width: auto;
1537
+ .cirth [role="search"] > *, .cirth [role="search"] input:not([type="checkbox"], [type="radio"]), .cirth [role="search"] select, .cirth [role="group"] > *, .cirth [role="group"] input:not([type="checkbox"], [type="radio"]), .cirth [role="group"] select {
1538
+ flex: auto;
1539
+ margin-bottom: 0;
1540
+ position: relative;
2161
1541
  }
2162
1542
 
2163
- .cirth [role="search"] [type="reset"] {
2164
- width: auto;
1543
+ .cirth [role="search"] > :not(:first-child), .cirth [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), .cirth [role="search"] select:not(:first-child), .cirth [role="group"] > :not(:first-child), .cirth [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child), .cirth [role="group"] select:not(:first-child) {
1544
+ border-top-left-radius: 0;
1545
+ border-bottom-left-radius: 0;
1546
+ margin-left: 0;
2165
1547
  }
2166
1548
 
2167
- .cirth [role="search"] [type="button"] {
2168
- width: auto;
1549
+ .cirth [role="search"] > :not(:last-child), .cirth [role="search"] input:not([type="checkbox"], [type="radio"]):not(:last-child), .cirth [role="search"] select:not(:last-child), .cirth [role="group"] > :not(:last-child), .cirth [role="group"] input:not([type="checkbox"], [type="radio"]):not(:last-child), .cirth [role="group"] select:not(:last-child) {
1550
+ border-top-right-radius: 0;
1551
+ border-bottom-right-radius: 0;
2169
1552
  }
2170
1553
 
2171
- .cirth [role="group"] [type="submit"] {
2172
- width: auto;
1554
+ .cirth [role="search"] > :focus, .cirth [role="search"] input:not([type="checkbox"], [type="radio"]):focus, .cirth [role="search"] select:focus, .cirth [role="group"] > :focus, .cirth [role="group"] input:not([type="checkbox"], [type="radio"]):focus, .cirth [role="group"] select:focus {
1555
+ z-index: 2;
2173
1556
  }
2174
1557
 
2175
- .cirth [role="group"] [type="reset"] {
2176
- width: auto;
1558
+ .cirth [role="search"] button:not(:first-child), .cirth [role="search"] [type="submit"]:not(:first-child), .cirth [role="search"] [type="reset"]:not(:first-child), .cirth [role="search"] [type="button"]:not(:first-child), .cirth [role="search"] [role="button"]:not(:first-child), .cirth [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), .cirth [role="search"] select:not(:first-child), .cirth [role="group"] button:not(:first-child), .cirth [role="group"] [type="submit"]:not(:first-child), .cirth [role="group"] [type="reset"]:not(:first-child), .cirth [role="group"] [type="button"]:not(:first-child), .cirth [role="group"] [role="button"]:not(:first-child), .cirth [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child), .cirth [role="group"] select:not(:first-child) {
1559
+ margin-left: calc(var(--cirth-border-width) * -1);
2177
1560
  }
2178
1561
 
2179
- .cirth [role="group"] [type="button"] {
1562
+ .cirth [role="search"] button, .cirth [role="search"] [type="submit"], .cirth [role="search"] [type="reset"], .cirth [role="search"] [type="button"], .cirth [role="search"] [role="button"], .cirth [role="group"] button, .cirth [role="group"] [type="submit"], .cirth [role="group"] [type="reset"], .cirth [role="group"] [type="button"], .cirth [role="group"] [role="button"] {
2180
1563
  width: auto;
2181
1564
  }
2182
1565
 
2183
1566
  @supports selector(:has(*)) {
2184
- .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
2185
- --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-button);
2186
- }
2187
-
2188
- .cirth [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
1567
+ :is(.cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus), .cirth [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus)) {
2189
1568
  --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-button);
2190
1569
  }
2191
1570
 
2192
- .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not(:is([type="checkbox"], [type="radio"])) {
2193
- border-color: rgba(0, 0, 0, 0);
1571
+ .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]) {
1572
+ border-color: #0000;
2194
1573
  }
2195
1574
 
2196
1575
  .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select {
2197
- border-color: rgba(0, 0, 0, 0);
1576
+ border-color: #0000;
2198
1577
  }
2199
1578
 
2200
- .cirth [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not(:is([type="checkbox"], [type="radio"])) {
2201
- border-color: rgba(0, 0, 0, 0);
1579
+ .cirth [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]) {
1580
+ border-color: #0000;
2202
1581
  }
2203
1582
 
2204
1583
  .cirth [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select {
2205
- border-color: rgba(0, 0, 0, 0);
2206
- }
2207
-
2208
- .cirth [role="search"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) {
2209
- --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
1584
+ border-color: #0000;
2210
1585
  }
2211
1586
 
2212
- .cirth [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) {
1587
+ :is(.cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus), .cirth [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)) {
2213
1588
  --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
2214
1589
  }
2215
1590
 
2216
- .cirth [role="search"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) button {
1591
+ .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button {
2217
1592
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
2218
1593
  var(--cirth-primary-border);
2219
1594
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
2220
1595
  var(--cirth-primary-hover-border);
2221
1596
  }
2222
1597
 
2223
- .cirth [role="search"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [type="submit"] {
1598
+ .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"] {
2224
1599
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
2225
1600
  var(--cirth-primary-border);
2226
1601
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
2227
1602
  var(--cirth-primary-hover-border);
2228
1603
  }
2229
1604
 
2230
- .cirth [role="search"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [type="button"] {
1605
+ .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"] {
2231
1606
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
2232
1607
  var(--cirth-primary-border);
2233
1608
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
2234
1609
  var(--cirth-primary-hover-border);
2235
1610
  }
2236
1611
 
2237
- .cirth [role="search"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [role="button"] {
1612
+ .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
2238
1613
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
2239
1614
  var(--cirth-primary-border);
2240
1615
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
2241
1616
  var(--cirth-primary-hover-border);
2242
1617
  }
2243
1618
 
2244
- .cirth [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) button {
1619
+ .cirth [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button {
2245
1620
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
2246
1621
  var(--cirth-primary-border);
2247
1622
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
2248
1623
  var(--cirth-primary-hover-border);
2249
1624
  }
2250
1625
 
2251
- .cirth [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [type="submit"] {
1626
+ .cirth [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"] {
2252
1627
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
2253
1628
  var(--cirth-primary-border);
2254
1629
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
2255
1630
  var(--cirth-primary-hover-border);
2256
1631
  }
2257
1632
 
2258
- .cirth [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [type="button"] {
1633
+ .cirth [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"] {
2259
1634
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
2260
1635
  var(--cirth-primary-border);
2261
1636
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
2262
1637
  var(--cirth-primary-hover-border);
2263
1638
  }
2264
1639
 
2265
- .cirth [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [role="button"] {
1640
+ .cirth [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
2266
1641
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
2267
1642
  var(--cirth-primary-border);
2268
1643
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
2269
1644
  var(--cirth-primary-hover-border);
2270
1645
  }
2271
1646
 
2272
- .cirth [role="search"] button:focus, .cirth [role="search"] [role="button"]:focus, .cirth [role="group"] button:focus, .cirth [role="group"] [role="button"]:focus {
2273
- box-shadow: none;
2274
- }
2275
-
2276
- .cirth [role="search"] [type="submit"]:focus {
2277
- box-shadow: none;
2278
- }
2279
-
2280
- .cirth [role="search"] [type="reset"]:focus {
2281
- box-shadow: none;
2282
- }
2283
-
2284
- .cirth [role="search"] [type="button"]:focus {
2285
- box-shadow: none;
2286
- }
2287
-
2288
- .cirth [role="group"] [type="submit"]:focus {
2289
- box-shadow: none;
2290
- }
2291
-
2292
- .cirth [role="group"] [type="reset"]:focus {
2293
- box-shadow: none;
2294
- }
2295
-
2296
- .cirth [role="group"] [type="button"]:focus {
1647
+ .cirth [role="search"] button:focus, .cirth [role="search"] [type="submit"]:focus, .cirth [role="search"] [type="reset"]:focus, .cirth [role="search"] [type="button"]:focus, .cirth [role="search"] [role="button"]:focus, .cirth [role="group"] button:focus, .cirth [role="group"] [type="submit"]:focus, .cirth [role="group"] [type="reset"]:focus, .cirth [role="group"] [type="button"]:focus, .cirth [role="group"] [role="button"]:focus {
2297
1648
  box-shadow: none;
2298
1649
  }
2299
1650
  }
@@ -2308,11 +1659,11 @@
2308
1659
  border-bottom-right-radius: var(--cirth-radius-pill);
2309
1660
  }
2310
1661
 
2311
- .cirth [aria-busy="true"]:not(:is(input, select, textarea, html, form)) {
1662
+ .cirth [aria-busy="true"]:not(input, select, textarea, html, form) {
2312
1663
  white-space: nowrap;
2313
1664
  }
2314
1665
 
2315
- .cirth [aria-busy="true"]:not(:is(input, select, textarea, html, form)):before {
1666
+ .cirth [aria-busy="true"]:not(input, select, textarea, html, form):before {
2316
1667
  background-image: var(--cirth-icon-loading);
2317
1668
  content: "";
2318
1669
  vertical-align: -.125em;
@@ -2323,27 +1674,15 @@
2323
1674
  display: inline-block;
2324
1675
  }
2325
1676
 
2326
- .cirth [aria-busy="true"]:not(:is(input, select, textarea, html, form)):not(:empty):before {
1677
+ .cirth [aria-busy="true"]:not(input, select, textarea, html, form):not(:empty):before {
2327
1678
  margin-inline-end: calc(var(--cirth-spacing) * .5);
2328
1679
  }
2329
1680
 
2330
- .cirth [aria-busy="true"]:not(:is(input, select, textarea, html, form)):empty {
1681
+ .cirth [aria-busy="true"]:not(input, select, textarea, html, form):empty {
2331
1682
  text-align: center;
2332
1683
  }
2333
1684
 
2334
- .cirth button[aria-busy="true"], .cirth [role="button"][aria-busy="true"], .cirth a[aria-busy="true"] {
2335
- pointer-events: none;
2336
- }
2337
-
2338
- .cirth [type="submit"][aria-busy="true"] {
2339
- pointer-events: none;
2340
- }
2341
-
2342
- .cirth [type="button"][aria-busy="true"] {
2343
- pointer-events: none;
2344
- }
2345
-
2346
- .cirth [type="reset"][aria-busy="true"] {
1685
+ .cirth button[aria-busy="true"], .cirth [type="submit"][aria-busy="true"], .cirth [type="button"][aria-busy="true"], .cirth [type="reset"][aria-busy="true"], .cirth [role="button"][aria-busy="true"], .cirth a[aria-busy="true"] {
2347
1686
  pointer-events: none;
2348
1687
  }
2349
1688
 
@@ -2377,13 +1716,13 @@
2377
1716
  overflow: auto;
2378
1717
  }
2379
1718
 
2380
- @media (width >= 576px) {
1719
+ @media (min-width: 576px) {
2381
1720
  .cirth dialog > article {
2382
1721
  max-width: 510px;
2383
1722
  }
2384
1723
  }
2385
1724
 
2386
- @media (width >= 768px) {
1725
+ @media (min-width: 768px) {
2387
1726
  .cirth dialog > article {
2388
1727
  max-width: 700px;
2389
1728
  }
@@ -2393,14 +1732,7 @@
2393
1732
  margin-bottom: 0;
2394
1733
  }
2395
1734
 
2396
- .cirth dialog > article > header .close {
2397
- margin: 0;
2398
- margin-left: var(--cirth-spacing);
2399
- float: right;
2400
- padding: 0;
2401
- }
2402
-
2403
- .cirth dialog > article > header :is(a, button)[rel="prev"] {
1735
+ .cirth dialog > article > header .close, .cirth dialog > article > header :is(a, button)[rel="prev"] {
2404
1736
  margin: 0;
2405
1737
  margin-left: var(--cirth-spacing);
2406
1738
  float: right;
@@ -2419,24 +1751,7 @@
2419
1751
  margin-left: calc(var(--cirth-spacing) * .5);
2420
1752
  }
2421
1753
 
2422
- .cirth dialog > article .close {
2423
- width: var(--cirth-size-4);
2424
- height: var(--cirth-size-4);
2425
- margin-top: calc(var(--cirth-spacing) * -1);
2426
- margin-bottom: var(--cirth-spacing);
2427
- background-image: var(--cirth-icon-close);
2428
- background-position: center;
2429
- background-size: auto var(--cirth-size-4);
2430
- opacity: .5;
2431
- transition: opacity var(--cirth-transition);
2432
- background-color: rgba(0, 0, 0, 0);
2433
- background-repeat: no-repeat;
2434
- border: none;
2435
- margin-left: auto;
2436
- display: block;
2437
- }
2438
-
2439
- .cirth dialog > article :is(a, button)[rel="prev"] {
1754
+ .cirth dialog > article .close, .cirth dialog > article :is(a, button)[rel="prev"] {
2440
1755
  width: var(--cirth-size-4);
2441
1756
  height: var(--cirth-size-4);
2442
1757
  margin-top: calc(var(--cirth-spacing) * -1);
@@ -2446,18 +1761,14 @@
2446
1761
  background-size: auto var(--cirth-size-4);
2447
1762
  opacity: .5;
2448
1763
  transition: opacity var(--cirth-transition);
2449
- background-color: rgba(0, 0, 0, 0);
1764
+ background-color: #0000;
2450
1765
  background-repeat: no-repeat;
2451
1766
  border: none;
2452
1767
  margin-left: auto;
2453
1768
  display: block;
2454
1769
  }
2455
1770
 
2456
- .cirth dialog > article .close:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
2457
- opacity: 1;
2458
- }
2459
-
2460
- .cirth dialog > article :is(a, button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
1771
+ .cirth dialog > article .close:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), .cirth dialog > article :is(a, button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
2461
1772
  opacity: 1;
2462
1773
  }
2463
1774
 
@@ -2477,46 +1788,18 @@
2477
1788
  touch-action: auto;
2478
1789
  }
2479
1790
 
2480
- .cirth:where(.modal-is-opening, .modal-is-closing) dialog {
2481
- animation-duration: var(--cirth-duration-normal);
2482
- animation-timing-function: var(--cirth-ease-in-out);
2483
- animation-fill-mode: both;
2484
- }
2485
-
2486
- .cirth:where(.modal-is-opening, .modal-is-closing) dialog > article {
2487
- animation-duration: var(--cirth-duration-normal);
2488
- animation-timing-function: var(--cirth-ease-in-out);
2489
- animation-fill-mode: both;
2490
- }
2491
-
2492
- .cirth :where(.modal-is-opening, .modal-is-closing) dialog {
2493
- animation-duration: var(--cirth-duration-normal);
2494
- animation-timing-function: var(--cirth-ease-in-out);
2495
- animation-fill-mode: both;
2496
- }
2497
-
2498
- .cirth :where(.modal-is-opening, .modal-is-closing) dialog > article {
1791
+ .cirth:where(.modal-is-opening, .modal-is-closing) dialog, .cirth:where(.modal-is-opening, .modal-is-closing) dialog > article, .cirth :where(.modal-is-opening, .modal-is-closing) dialog, .cirth :where(.modal-is-opening, .modal-is-closing) dialog > article {
2499
1792
  animation-duration: var(--cirth-duration-normal);
2500
1793
  animation-timing-function: var(--cirth-ease-in-out);
2501
1794
  animation-fill-mode: both;
2502
1795
  }
2503
1796
 
2504
- .cirth:where(.modal-is-opening, .modal-is-closing) dialog {
2505
- animation-duration: calc(var(--cirth-duration-normal) * 4);
2506
- animation-name: modal-overlay;
2507
- }
2508
-
2509
- .cirth :where(.modal-is-opening, .modal-is-closing) dialog {
1797
+ .cirth:where(.modal-is-opening, .modal-is-closing) dialog, .cirth :where(.modal-is-opening, .modal-is-closing) dialog {
2510
1798
  animation-duration: calc(var(--cirth-duration-normal) * 4);
2511
1799
  animation-name: modal-overlay;
2512
1800
  }
2513
1801
 
2514
- .cirth:where(.modal-is-opening, .modal-is-closing) dialog > article {
2515
- animation-delay: var(--cirth-duration-normal);
2516
- animation-name: modal;
2517
- }
2518
-
2519
- .cirth :where(.modal-is-opening, .modal-is-closing) dialog > article {
1802
+ .cirth:where(.modal-is-opening, .modal-is-closing) dialog > article, .cirth :where(.modal-is-opening, .modal-is-closing) dialog > article {
2520
1803
  animation-delay: var(--cirth-duration-normal);
2521
1804
  animation-name: modal;
2522
1805
  }
@@ -2530,7 +1813,7 @@
2530
1813
  from {
2531
1814
  -webkit-backdrop-filter: none;
2532
1815
  backdrop-filter: none;
2533
- background-color: rgba(0, 0, 0, 0);
1816
+ background-color: #0000;
2534
1817
  }
2535
1818
  }
2536
1819
 
@@ -2587,23 +1870,7 @@
2587
1870
  text-decoration: none;
2588
1871
  }
2589
1872
 
2590
- .cirth nav li button, .cirth nav li [role="button"], .cirth nav li select {
2591
- height: auto;
2592
- margin-right: inherit;
2593
- margin-bottom: 0;
2594
- margin-left: inherit;
2595
- padding: calc(var(--cirth-nav-link-spacing-vertical) - var(--cirth-border-width) * 2) var(--cirth-nav-link-spacing-horizontal);
2596
- }
2597
-
2598
- .cirth nav li [type="button"] {
2599
- height: auto;
2600
- margin-right: inherit;
2601
- margin-bottom: 0;
2602
- margin-left: inherit;
2603
- padding: calc(var(--cirth-nav-link-spacing-vertical) - var(--cirth-border-width) * 2) var(--cirth-nav-link-spacing-horizontal);
2604
- }
2605
-
2606
- .cirth nav li input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"])) {
1873
+ .cirth nav li button, .cirth nav li [role="button"], .cirth nav li [type="button"], .cirth nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), .cirth nav li select {
2607
1874
  height: auto;
2608
1875
  margin-right: inherit;
2609
1876
  margin-bottom: 0;
@@ -2640,7 +1907,7 @@
2640
1907
  .cirth nav[aria-label="breadcrumb"] a[aria-current]:not([aria-current="false"]) {
2641
1908
  color: inherit;
2642
1909
  pointer-events: none;
2643
- background-color: rgba(0, 0, 0, 0);
1910
+ background-color: #0000;
2644
1911
  text-decoration: none;
2645
1912
  }
2646
1913
 
@@ -2670,10 +1937,10 @@
2670
1937
  width: 100%;
2671
1938
  height: var(--cirth-size-2);
2672
1939
  margin-bottom: calc(var(--cirth-spacing) * .5);
1940
+ border: var(--cirth-border-width-1) solid var(--cirth-progress-border-color);
2673
1941
  border-radius: var(--cirth-border-radius);
2674
1942
  background-color: var(--cirth-progress-background-color);
2675
1943
  color: var(--cirth-progress-color);
2676
- border: 0;
2677
1944
  display: inline-block;
2678
1945
  overflow: hidden;
2679
1946
  }
@@ -2699,11 +1966,11 @@
2699
1966
  }
2700
1967
 
2701
1968
  .cirth progress:indeterminate[value]::-webkit-progress-value {
2702
- background-color: rgba(0, 0, 0, 0);
1969
+ background-color: #0000;
2703
1970
  }
2704
1971
 
2705
1972
  .cirth progress:indeterminate::-moz-progress-bar {
2706
- background-color: rgba(0, 0, 0, 0);
1973
+ background-color: #0000;
2707
1974
  }
2708
1975
 
2709
1976
  [dir="rtl"] .cirth progress:indeterminate {
@@ -2725,7 +1992,7 @@
2725
1992
  position: relative;
2726
1993
  }
2727
1994
 
2728
- .cirth [data-tooltip]:not(:is(a, button, input, [role="button"])) {
1995
+ .cirth [data-tooltip]:not(a, button, input, [role="button"]) {
2729
1996
  border-bottom: var(--cirth-border-width-1) dotted;
2730
1997
  cursor: help;
2731
1998
  text-decoration: none;
@@ -2757,10 +2024,10 @@
2757
2024
  .cirth [data-tooltip][data-placement="top"]:after, .cirth [data-tooltip]:after {
2758
2025
  content: "";
2759
2026
  color: var(--cirth-tooltip-background-color);
2760
- background-color: rgba(0, 0, 0, 0);
2027
+ background-color: #0000;
2761
2028
  border-top: .3rem solid;
2762
- border-left: .3rem solid rgba(0, 0, 0, 0);
2763
- border-right: .3rem solid rgba(0, 0, 0, 0);
2029
+ border-left: .3rem solid #0000;
2030
+ border-right: .3rem solid #0000;
2764
2031
  border-radius: 0;
2765
2032
  padding: 0;
2766
2033
  transform: translate(-50%);
@@ -2773,7 +2040,7 @@
2773
2040
  }
2774
2041
 
2775
2042
  .cirth [data-tooltip][data-placement="bottom"]:after {
2776
- border: .3rem solid rgba(0, 0, 0, 0);
2043
+ border: .3rem solid #0000;
2777
2044
  border-bottom-color: currentColor;
2778
2045
  transform: translate(-50%, -.3rem);
2779
2046
  }
@@ -2784,7 +2051,7 @@
2784
2051
  }
2785
2052
 
2786
2053
  .cirth [data-tooltip][data-placement="left"]:after {
2787
- border: .3rem solid rgba(0, 0, 0, 0);
2054
+ border: .3rem solid #0000;
2788
2055
  border-left-color: currentColor;
2789
2056
  transform: translate(.3rem, -50%);
2790
2057
  }
@@ -2795,7 +2062,7 @@
2795
2062
  }
2796
2063
 
2797
2064
  .cirth [data-tooltip][data-placement="right"]:after {
2798
- border: .3rem solid rgba(0, 0, 0, 0);
2065
+ border: .3rem solid #0000;
2799
2066
  border-right-color: currentColor;
2800
2067
  transform: translate(-.3rem, -50%);
2801
2068
  }
@@ -2917,14 +2184,13 @@
2917
2184
  --cirth-color-white: #fff;
2918
2185
  --cirth-color-transparent: transparent;
2919
2186
  --cirth-color-current: currentColor;
2920
- --cirth-font-family-ui: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial,
2921
- "Helvetica Neue", sans-serif;
2922
- --cirth-font-family-sans: var(--cirth-font-family-ui), "Apple Color Emoji", "Segoe UI Emoji",
2923
- "Segoe UI Symbol", "Noto Color Emoji";
2187
+ --cirth-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
2188
+ --cirth-font-family-sans: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial,
2189
+ "Helvetica Neue", sans-serif, var(--cirth-font-family-emoji);
2924
2190
  --cirth-font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
2925
2191
  --cirth-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
2926
- monospace;
2927
- --cirth-font-family-display: var(--cirth-font-family-sans);
2192
+ monospace, var(--cirth-font-family-emoji);
2193
+ --cirth-font-family-display: var(--cirth-font-family-serif);
2928
2194
  --cirth-font-size-xs: .75rem;
2929
2195
  --cirth-font-size-sm: .875rem;
2930
2196
  --cirth-font-size-md: 1rem;
@@ -2940,15 +2206,14 @@
2940
2206
  --cirth-font-weight-medium: 500;
2941
2207
  --cirth-font-weight-semibold: 600;
2942
2208
  --cirth-font-weight-bold: 700;
2209
+ --cirth-letter-spacing-tight: -.02em;
2210
+ --cirth-letter-spacing-snug: -.01em;
2943
2211
  --cirth-line-height-none: 1;
2944
2212
  --cirth-line-height-tight: 1.125;
2945
2213
  --cirth-line-height-snug: 1.25;
2946
2214
  --cirth-line-height-normal: 1.5;
2947
2215
  --cirth-line-height-relaxed: 1.625;
2948
2216
  --cirth-line-height-loose: 2;
2949
- --cirth-letter-spacing-tight: 0;
2950
- --cirth-letter-spacing-normal: 0;
2951
- --cirth-letter-spacing-wide: .025em;
2952
2217
  --cirth-space-0: 0;
2953
2218
  --cirth-space-1: .25rem;
2954
2219
  --cirth-space-2: .5rem;
@@ -2990,17 +2255,6 @@
2990
2255
  --cirth-outline-width-1: .0625rem;
2991
2256
  --cirth-outline-width-2: .125rem;
2992
2257
  --cirth-outline-width-4: .25rem;
2993
- --cirth-shadow-none: none;
2994
- --cirth-shadow-xs: 0 .0625rem .125rem rgba(0, 0, 0, .05);
2995
- --cirth-shadow-sm: 0 .0625rem .1875rem rgba(0, 0, 0, .1),
2996
- 0 .0625rem .125rem rgba(0, 0, 0, .06);
2997
- --cirth-shadow-md: 0 .25rem .375rem rgba(0, 0, 0, .07),
2998
- 0 .125rem .25rem rgba(0, 0, 0, .06);
2999
- --cirth-shadow-lg: 0 .625rem .9375rem rgba(0, 0, 0, .1),
3000
- 0 .25rem .375rem rgba(0, 0, 0, .05);
3001
- --cirth-shadow-xl: 0 1.25rem 1.5625rem rgba(0, 0, 0, .1),
3002
- 0 .625rem .625rem rgba(0, 0, 0, .04);
3003
- --cirth-shadow-inner: inset 0 .125rem .25rem rgba(0, 0, 0, .06);
3004
2258
  --cirth-duration-instant: 0s;
3005
2259
  --cirth-duration-fast: .1s;
3006
2260
  --cirth-duration-normal: .2s;
@@ -3019,30 +2273,30 @@
3019
2273
  --cirth-z-index-modal-backdrop: 1040;
3020
2274
  --cirth-z-index-modal: 1050;
3021
2275
  --cirth-z-index-tooltip: 1070;
3022
- --cirth-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
3023
- --cirth-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial,
3024
- "Helvetica Neue", sans-serif, var(--cirth-font-family-emoji);
3025
- --cirth-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
3026
- monospace, var(--cirth-font-family-emoji);
3027
- --cirth-font-family: var(--cirth-font-family-sans-serif);
2276
+ --cirth-font-family: var(--cirth-font-family-sans);
3028
2277
  --cirth-line-height: var(--cirth-line-height-normal);
3029
2278
  --cirth-font-weight: var(--cirth-font-weight-regular);
3030
2279
  --cirth-font-size: 100%;
3031
- --cirth-text-underline-offset: .1rem;
3032
- --cirth-border-radius: var(--cirth-radius-sm);
2280
+ --cirth-text-underline-offset: .15em;
2281
+ --cirth-border-radius: var(--cirth-radius-lg);
2282
+ --cirth-card-border-radius: calc(var(--cirth-border-radius) * 1.5);
2283
+ --cirth-checkbox-border-radius: min(var(--cirth-border-radius),
2284
+ var(--cirth-radius-sm));
2285
+ --cirth-code-border-radius: min(var(--cirth-border-radius),
2286
+ var(--cirth-radius-sm));
3033
2287
  --cirth-border-width: var(--cirth-border-width-1);
3034
2288
  --cirth-outline-width: var(--cirth-outline-width-2);
3035
- --cirth-transition: var(--cirth-duration-normal) var(--cirth-ease-in-out);
2289
+ --cirth-transition: var(--cirth-duration-normal) var(--cirth-ease-out);
3036
2290
  --cirth-spacing: var(--cirth-space-4);
3037
2291
  --cirth-typography-spacing-vertical: var(--cirth-space-4);
3038
2292
  --cirth-block-spacing-vertical: var(--cirth-spacing);
3039
2293
  --cirth-block-spacing-horizontal: var(--cirth-spacing);
3040
2294
  --cirth-grid-column-gap: var(--cirth-spacing);
3041
2295
  --cirth-grid-row-gap: var(--cirth-spacing);
3042
- --cirth-form-element-spacing-vertical: var(--cirth-space-3);
2296
+ --cirth-form-element-spacing-vertical: var(--cirth-space-2);
3043
2297
  --cirth-form-element-spacing-horizontal: var(--cirth-space-4);
3044
2298
  --cirth-form-label-font-weight: var(--cirth-font-weight);
3045
- --cirth-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
2299
+ --cirth-group-box-shadow: 0 0 0 #0000;
3046
2300
  --cirth-group-box-shadow-focus-with-button: 0 0 0 var(--cirth-outline-width)
3047
2301
  var(--cirth-primary-focus);
3048
2302
  --cirth-group-box-shadow-focus-with-input: 0 0 0 var(--cirth-border-width-1)
@@ -3055,42 +2309,12 @@
3055
2309
  --cirth-nav-breadcrumb-divider: ">";
3056
2310
  --cirth-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
3057
2311
  --cirth-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
3058
- --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
3059
- --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
3060
- --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
3061
- --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
3062
- --cirth-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
3063
- --cirth-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
3064
- }
3065
-
3066
- @media (width >= 576px) {
3067
- .cirth {
3068
- --cirth-font-size: 106.25%;
3069
- }
3070
- }
3071
-
3072
- @media (width >= 768px) {
3073
- .cirth {
3074
- --cirth-font-size: 112.5%;
3075
- }
3076
- }
3077
-
3078
- @media (width >= 1024px) {
3079
- .cirth {
3080
- --cirth-font-size: 118.75%;
3081
- }
3082
- }
3083
-
3084
- @media (width >= 1280px) {
3085
- .cirth {
3086
- --cirth-font-size: 125%;
3087
- }
3088
- }
3089
-
3090
- @media (width >= 1536px) {
3091
- .cirth {
3092
- --cirth-font-size: 131.25%;
3093
- }
2312
+ --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2313
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2314
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2315
+ --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
2316
+ --cirth-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
2317
+ --cirth-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 146, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
3094
2318
  }
3095
2319
 
3096
2320
  .cirth a, .cirth a.secondary, .cirth a.contrast {
@@ -3101,44 +2325,57 @@
3101
2325
  --cirth-font-size: .875em;
3102
2326
  }
3103
2327
 
3104
- .cirth h1, .cirth h2, .cirth h3, .cirth h4, .cirth h5, .cirth h6 {
2328
+ .cirth h1, .cirth h2, .cirth h3 {
3105
2329
  --cirth-font-weight: var(--cirth-font-weight-bold);
3106
2330
  }
3107
2331
 
2332
+ .cirth h4, .cirth h5, .cirth h6 {
2333
+ --cirth-font-weight: var(--cirth-font-weight-semibold);
2334
+ }
2335
+
3108
2336
  .cirth h1 {
3109
- --cirth-font-size: var(--cirth-font-size-5xl);
2337
+ --cirth-font-size: clamp(2rem, 1.55rem + 1.8vw, 2.75rem);
3110
2338
  --cirth-line-height: var(--cirth-line-height-tight);
2339
+ --cirth-letter-spacing: var(--cirth-letter-spacing-tight);
3111
2340
  --cirth-typography-spacing-top: var(--cirth-space-12);
3112
2341
  }
3113
2342
 
3114
2343
  .cirth h2 {
3115
- --cirth-font-size: 1.75rem;
2344
+ --cirth-font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
3116
2345
  --cirth-line-height: 1.15;
3117
- --cirth-typography-spacing-top: 2.625rem;
2346
+ --cirth-letter-spacing: var(--cirth-letter-spacing-tight);
2347
+ --cirth-typography-spacing-top: var(--cirth-space-12);
3118
2348
  }
3119
2349
 
3120
2350
  .cirth h3 {
3121
- --cirth-font-size: 1.5rem;
3122
- --cirth-line-height: 1.175;
3123
- --cirth-typography-spacing-top: 2.25rem;
2351
+ --cirth-font-size: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
2352
+ --cirth-line-height: 1.2;
2353
+ --cirth-letter-spacing: var(--cirth-letter-spacing-snug);
2354
+ --cirth-typography-spacing-top: var(--cirth-space-10);
3124
2355
  }
3125
2356
 
3126
2357
  .cirth h4 {
3127
2358
  --cirth-font-size: var(--cirth-font-size-xl);
3128
- --cirth-line-height: 1.2;
3129
- --cirth-typography-spacing-top: 1.874rem;
2359
+ --cirth-line-height: var(--cirth-line-height-snug);
2360
+ --cirth-typography-spacing-top: var(--cirth-space-8);
3130
2361
  }
3131
2362
 
3132
2363
  .cirth h5 {
3133
2364
  --cirth-font-size: var(--cirth-font-size-lg);
3134
- --cirth-line-height: 1.225;
3135
- --cirth-typography-spacing-top: 1.6875rem;
2365
+ --cirth-line-height: var(--cirth-line-height-snug);
2366
+ --cirth-typography-spacing-top: var(--cirth-space-8);
3136
2367
  }
3137
2368
 
3138
2369
  .cirth h6 {
3139
2370
  --cirth-font-size: var(--cirth-font-size-md);
3140
2371
  --cirth-line-height: var(--cirth-line-height-snug);
3141
- --cirth-typography-spacing-top: var(--cirth-space-6);
2372
+ --cirth-typography-spacing-top: var(--cirth-space-8);
2373
+ }
2374
+
2375
+ .cirth article {
2376
+ --cirth-border-radius: var(--cirth-card-border-radius);
2377
+ --cirth-block-spacing-vertical: var(--cirth-space-6);
2378
+ --cirth-block-spacing-horizontal: var(--cirth-space-6);
3142
2379
  }
3143
2380
 
3144
2381
  .cirth thead th, .cirth thead td, .cirth tfoot th, .cirth tfoot td {
@@ -3147,33 +2384,44 @@
3147
2384
  }
3148
2385
 
3149
2386
  .cirth pre, .cirth code, .cirth kbd, .cirth samp {
3150
- --cirth-font-family: var(--cirth-font-family-monospace);
2387
+ --cirth-font-family: var(--cirth-font-family-mono);
3151
2388
  }
3152
2389
 
3153
- .cirth kbd {
3154
- --cirth-font-weight: bolder;
2390
+ .cirth code, .cirth kbd, .cirth samp {
2391
+ --cirth-border-radius: var(--cirth-code-border-radius);
3155
2392
  }
3156
2393
 
3157
- .cirth input:not(:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"])) {
3158
- --cirth-outline-width: var(--cirth-outline-width-1);
2394
+ .cirth kbd {
2395
+ --cirth-font-weight: bolder;
3159
2396
  }
3160
2397
 
3161
- .cirth :where(select, textarea) {
2398
+ .cirth input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth :where(select, textarea) {
3162
2399
  --cirth-outline-width: var(--cirth-outline-width-1);
2400
+ --cirth-line-height: var(--cirth-line-height-relaxed);
3163
2401
  }
3164
2402
 
3165
2403
  .cirth [type="search"] {
3166
2404
  --cirth-border-radius: var(--cirth-radius-pill);
3167
2405
  }
3168
2406
 
3169
- .cirth [type="checkbox"] {
3170
- --cirth-border-width: var(--cirth-border-width-2);
2407
+ .cirth button, .cirth [type="submit"], .cirth [type="reset"], .cirth [type="button"], .cirth [role="button"] {
2408
+ --cirth-font-weight: var(--cirth-font-weight-semibold);
2409
+ --cirth-line-height: var(--cirth-line-height-relaxed);
2410
+ --cirth-form-element-spacing-horizontal: var(--cirth-space-5);
3171
2411
  }
3172
2412
 
3173
- .cirth [type="radio"] {
2413
+ .cirth [type="file"] {
2414
+ --cirth-line-height: var(--cirth-line-height-relaxed);
2415
+ }
2416
+
2417
+ .cirth [type="checkbox"], .cirth [type="radio"] {
3174
2418
  --cirth-border-width: var(--cirth-border-width-2);
3175
2419
  }
3176
2420
 
2421
+ .cirth [type="checkbox"] {
2422
+ --cirth-border-radius: var(--cirth-checkbox-border-radius);
2423
+ }
2424
+
3177
2425
  .cirth [type="checkbox"][role="switch"] {
3178
2426
  --cirth-border-width: .1875rem;
3179
2427
  }
@@ -3190,15 +2438,7 @@
3190
2438
  --cirth-border-radius: var(--cirth-radius-pill);
3191
2439
  }
3192
2440
 
3193
- .cirth [role="search"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus) {
3194
- --cirth-group-box-shadow-focus-with-button: 0
3195
- 0
3196
- 0
3197
- var(--cirth-outline-width)
3198
- var(--cirth-secondary-focus);
3199
- }
3200
-
3201
- .cirth [role="group"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus) {
2441
+ :is(.cirth [role="search"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus), .cirth [role="group"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus)) {
3202
2442
  --cirth-group-box-shadow-focus-with-button: 0
3203
2443
  0
3204
2444
  0
@@ -3206,15 +2446,7 @@
3206
2446
  var(--cirth-secondary-focus);
3207
2447
  }
3208
2448
 
3209
- .cirth [role="search"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus) {
3210
- --cirth-group-box-shadow-focus-with-button: 0
3211
- 0
3212
- 0
3213
- var(--cirth-outline-width)
3214
- var(--cirth-contrast-focus);
3215
- }
3216
-
3217
- .cirth [role="group"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus) {
2449
+ :is(.cirth [role="search"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus), .cirth [role="group"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus)) {
3218
2450
  --cirth-group-box-shadow-focus-with-button: 0
3219
2451
  0
3220
2452
  0
@@ -3222,31 +2454,11 @@
3222
2454
  var(--cirth-contrast-focus);
3223
2455
  }
3224
2456
 
3225
- .cirth [role="search"] button, .cirth [role="search"] [role="button"], .cirth [role="group"] button, .cirth [role="group"] [role="button"] {
3226
- --cirth-form-element-spacing-horizontal: var(--cirth-space-8);
3227
- }
3228
-
3229
- .cirth [role="search"] [type="submit"] {
3230
- --cirth-form-element-spacing-horizontal: var(--cirth-space-8);
3231
- }
3232
-
3233
- .cirth [role="search"] [type="button"] {
3234
- --cirth-form-element-spacing-horizontal: var(--cirth-space-8);
3235
- }
3236
-
3237
- .cirth [role="group"] [type="submit"] {
3238
- --cirth-form-element-spacing-horizontal: var(--cirth-space-8);
3239
- }
3240
-
3241
- .cirth [role="group"] [type="button"] {
2457
+ .cirth [role="search"] button, .cirth [role="search"] [type="submit"], .cirth [role="search"] [type="button"], .cirth [role="search"] [role="button"], .cirth [role="group"] button, .cirth [role="group"] [type="submit"], .cirth [role="group"] [type="button"], .cirth [role="group"] [role="button"] {
3242
2458
  --cirth-form-element-spacing-horizontal: var(--cirth-space-8);
3243
2459
  }
3244
2460
 
3245
- .cirth details summary[role="button"]:not(.outline):after {
3246
- filter: brightness(0) invert();
3247
- }
3248
-
3249
- .cirth [aria-busy="true"]:not(:is(input, select, textarea)):is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
2461
+ .cirth details summary[role="button"]:not(.outline):after, .cirth [aria-busy="true"]:not(input, select, textarea):is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
3250
2462
  filter: brightness(0) invert();
3251
2463
  }
3252
2464
 
@@ -3254,83 +2466,83 @@
3254
2466
  --lightningcss-light: initial;
3255
2467
  --lightningcss-dark: ;
3256
2468
  color-scheme: light;
3257
- --cirth-background-color: #fff;
3258
- --cirth-color: #373c44;
3259
- --cirth-text-selection-color: rgba(2, 154, 232, .25);
3260
- --cirth-muted-color: #646b79;
3261
- --cirth-muted-border-color: #e7eaf0;
3262
- --cirth-primary: #0172ad;
3263
- --cirth-primary-background: #0172ad;
2469
+ --cirth-background-color: oklch(100% 0 0);
2470
+ --cirth-color: oklch(35.3% .021 264);
2471
+ --cirth-text-selection-color: oklch(65.7% .121 69.35 / .25);
2472
+ --cirth-muted-color: oklch(52.7% .032 264);
2473
+ --cirth-muted-border-color: oklch(93.85% .003 264);
2474
+ --cirth-primary: oklch(52.7% .097 69.35);
2475
+ --cirth-primary-background: oklch(52.7% .097 69.35);
3264
2476
  --cirth-primary-border: var(--cirth-primary-background);
3265
- --cirth-primary-underline: rgba(1, 114, 173, .5);
3266
- --cirth-primary-hover: #015887;
3267
- --cirth-primary-hover-background: #02659a;
2477
+ --cirth-primary-underline: oklch(52.7% .097 69.35 / .5);
2478
+ --cirth-primary-hover: oklch(44% .081 69.35);
2479
+ --cirth-primary-hover-background: oklch(48.3% .089 69.35);
3268
2480
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
3269
2481
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
3270
- --cirth-primary-focus: rgba(2, 154, 232, .5);
3271
- --cirth-primary-inverse: #fff;
3272
- --cirth-secondary: #5d6b89;
3273
- --cirth-secondary-background: #525f7a;
2482
+ --cirth-primary-focus: oklch(52.7% .097 69.35 / .75);
2483
+ --cirth-primary-inverse: oklch(100% 0 0);
2484
+ --cirth-secondary: oklch(52.7% .032 264);
2485
+ --cirth-secondary-background: oklch(48.3% .03 264);
3274
2486
  --cirth-secondary-border: var(--cirth-secondary-background);
3275
- --cirth-secondary-underline: rgba(93, 107, 137, .5);
3276
- --cirth-secondary-hover: #48536b;
3277
- --cirth-secondary-hover-background: #48536b;
2487
+ --cirth-secondary-underline: oklch(52.7% .032 264 / .5);
2488
+ --cirth-secondary-hover: oklch(44% .028 264);
2489
+ --cirth-secondary-hover-background: oklch(44% .028 264);
3278
2490
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
3279
2491
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
3280
- --cirth-secondary-focus: rgba(93, 107, 137, .25);
3281
- --cirth-secondary-inverse: #fff;
3282
- --cirth-contrast: #181c25;
3283
- --cirth-contrast-background: #181c25;
2492
+ --cirth-secondary-focus: oklch(48.3% .03 264 / .7);
2493
+ --cirth-secondary-inverse: oklch(100% 0 0);
2494
+ --cirth-contrast: oklch(22.3% .006 264);
2495
+ --cirth-contrast-background: oklch(22.3% .006 264);
3284
2496
  --cirth-contrast-border: var(--cirth-contrast-background);
3285
- --cirth-contrast-underline: rgba(24, 28, 37, .5);
3286
- --cirth-contrast-hover: #000;
3287
- --cirth-contrast-hover-background: #000;
2497
+ --cirth-contrast-underline: oklch(22.3% .006 264 / .5);
2498
+ --cirth-contrast-hover: oklch(0% 0 0);
2499
+ --cirth-contrast-hover-background: oklch(0% 0 0);
3288
2500
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
3289
2501
  --cirth-contrast-hover-underline: var(--cirth-secondary-hover);
3290
- --cirth-contrast-focus: rgba(93, 107, 137, .25);
3291
- --cirth-contrast-inverse: #fff;
3292
- --cirth-box-shadow: .0145rem .029rem .174rem rgba(129, 145, 181, .016), .0335rem .067rem .402rem rgba(129, 145, 181, .024), .0625rem .125rem .75rem rgba(129, 145, 181, .03), .1125rem .225rem 1.35rem rgba(129, 145, 181, .035), .2085rem .417rem 2.502rem rgba(129, 145, 181, .043), .5rem 1rem 6rem rgba(129, 145, 181, .06), 0 0 0 .0625rem rgba(129, 145, 181, .016);
3293
- --cirth-h1-color: #2d3138;
3294
- --cirth-h2-color: #373c44;
3295
- --cirth-h3-color: #424751;
3296
- --cirth-h4-color: #4d535e;
3297
- --cirth-h5-color: #5c6370;
3298
- --cirth-h6-color: #646b79;
3299
- --cirth-mark-background-color: #fde7c0;
3300
- --cirth-mark-color: #0f1114;
3301
- --cirth-ins-color: #1d6a54;
3302
- --cirth-del-color: #883935;
2502
+ --cirth-contrast-focus: oklch(48.3% .03 264 / .7);
2503
+ --cirth-contrast-inverse: oklch(100% 0 0);
2504
+ --cirth-box-shadow: .0145rem .029rem .174rem oklch(65.7% .03 264 / .01698), .0335rem .067rem .402rem oklch(65.7% .03 264 / .024), .0625rem .125rem .75rem oklch(65.7% .03 264 / .03), .1125rem .225rem 1.35rem oklch(65.7% .03 264 / .036), .2085rem .417rem 2.502rem oklch(65.7% .03 264 / .04302), .5rem 1rem 6rem oklch(65.7% .03 264 / .06), 0 0 0 .0625rem oklch(65.7% .03 264 / .015);
2505
+ --cirth-h1-color: oklch(31% .016 264);
2506
+ --cirth-h2-color: oklch(35.3% .021 264);
2507
+ --cirth-h3-color: oklch(39.7% .025 264);
2508
+ --cirth-h4-color: oklch(44% .028 264);
2509
+ --cirth-h5-color: oklch(48.3% .03 264);
2510
+ --cirth-h6-color: oklch(52.7% .032 264);
2511
+ --cirth-mark-background-color: oklch(93% .05 78);
2512
+ --cirth-mark-color: oklch(18% 0 264);
2513
+ --cirth-ins-color: oklch(35.3% .067 160.59);
2514
+ --cirth-del-color: oklch(35.3% .122 29.73);
3303
2515
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
3304
2516
  --cirth-blockquote-footer-color: var(--cirth-muted-color);
3305
- --cirth-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3306
- --cirth-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
2517
+ --cirth-button-box-shadow: 0 0 0 #0000;
2518
+ --cirth-button-hover-box-shadow: 0 0 0 #0000;
3307
2519
  --cirth-table-border-color: var(--cirth-muted-border-color);
3308
- --cirth-table-row-stripped-background-color: rgba(111, 120, 135, .04);
3309
- --cirth-code-background-color: #f3f5f7;
3310
- --cirth-code-color: #646b79;
2520
+ --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2521
+ --cirth-code-background-color: oklch(97% 0 288);
2522
+ --cirth-code-color: oklch(52.7% .032 264);
3311
2523
  --cirth-code-kbd-background-color: var(--cirth-color);
3312
2524
  --cirth-code-kbd-color: var(--cirth-background-color);
3313
- --cirth-form-element-background-color: #fbfcfc;
3314
- --cirth-form-element-selected-background-color: #dfe3eb;
3315
- --cirth-form-element-border-color: #cfd5e2;
3316
- --cirth-form-element-color: #23262c;
2525
+ --cirth-form-element-background-color: oklch(99% 0 336);
2526
+ --cirth-form-element-selected-background-color: oklch(91.7% .006 264);
2527
+ --cirth-form-element-border-color: oklch(65.7% .03 264);
2528
+ --cirth-form-element-color: oklch(26.7% .011 264);
3317
2529
  --cirth-form-element-placeholder-color: var(--cirth-muted-color);
3318
- --cirth-form-element-active-background-color: #fff;
2530
+ --cirth-form-element-active-background-color: oklch(100% 0 0);
3319
2531
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
3320
2532
  --cirth-form-element-focus-color: var(--cirth-primary-border);
3321
2533
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
3322
- --cirth-form-element-invalid-border-color: #b86a6b;
3323
- --cirth-form-element-invalid-active-border-color: #c84f48;
2534
+ --cirth-form-element-invalid-border-color: oklch(65.7% .196 29.73);
2535
+ --cirth-form-element-invalid-active-border-color: oklch(52.7% .181 29.73);
3324
2536
  --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
3325
- --cirth-form-element-valid-border-color: #4c9b8a;
3326
- --cirth-form-element-valid-active-border-color: #279977;
2537
+ --cirth-form-element-valid-border-color: oklch(61.3% .117 160.59);
2538
+ --cirth-form-element-valid-active-border-color: oklch(52.7% .1 160.59);
3327
2539
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
3328
- --cirth-switch-background-color: #bfc7d9;
2540
+ --cirth-switch-background-color: oklch(61.3% .032 264);
3329
2541
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
3330
- --cirth-switch-color: #fff;
3331
- --cirth-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3332
- --cirth-range-border-color: #dfe3eb;
3333
- --cirth-range-active-border-color: #bfc7d9;
2542
+ --cirth-switch-color: oklch(100% 0 0);
2543
+ --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2544
+ --cirth-range-border-color: oklch(91.7% .006 264);
2545
+ --cirth-range-active-border-color: oklch(83% .016 264);
3334
2546
  --cirth-range-thumb-border-color: var(--cirth-background-color);
3335
2547
  --cirth-range-thumb-color: var(--cirth-secondary-background);
3336
2548
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
@@ -3341,31 +2553,24 @@
3341
2553
  --cirth-card-background-color: var(--cirth-background-color);
3342
2554
  --cirth-card-border-color: var(--cirth-muted-border-color);
3343
2555
  --cirth-card-box-shadow: var(--cirth-box-shadow);
3344
- --cirth-card-sectioning-background-color: #fbfcfc;
3345
- --cirth-dropdown-background-color: #fff;
3346
- --cirth-dropdown-border-color: #eff1f4;
2556
+ --cirth-card-sectioning-background-color: oklch(99% 0 336);
2557
+ --cirth-dropdown-background-color: oklch(100% 0 0);
2558
+ --cirth-dropdown-border-color: oklch(96% 0 264);
3347
2559
  --cirth-dropdown-box-shadow: var(--cirth-box-shadow);
3348
2560
  --cirth-dropdown-color: var(--cirth-color);
3349
- --cirth-dropdown-hover-background-color: #eff1f4;
2561
+ --cirth-dropdown-hover-background-color: oklch(96% 0 264);
3350
2562
  --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
3351
- --cirth-modal-overlay-background-color: rgba(232, 234, 237, var(--cirth-opacity-overlay));
3352
- --cirth-progress-background-color: #dfe3eb;
2563
+ --cirth-modal-overlay-background-color: oklch(93.85% .003 264deg / var(--cirth-opacity-overlay));
2564
+ --cirth-progress-background-color: oklch(91.7% .006 264);
2565
+ --cirth-progress-border-color: oklch(65.7% .03 264);
3353
2566
  --cirth-progress-color: var(--cirth-primary-background);
3354
2567
  --cirth-tooltip-background-color: var(--cirth-contrast-background);
3355
2568
  --cirth-tooltip-color: var(--cirth-contrast-inverse);
3356
- --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
3357
- --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
2569
+ --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(40, 124, 87)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
2570
+ --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(189, 47, 33)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
3358
2571
  }
3359
2572
 
3360
- .cirth[data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
3361
- --cirth-form-element-focus-color: var(--cirth-primary-focus);
3362
- }
3363
-
3364
- .cirth [data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
3365
- --cirth-form-element-focus-color: var(--cirth-primary-focus);
3366
- }
3367
-
3368
- .cirth:not([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
2573
+ .cirth[data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth [data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth:not([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
3369
2574
  --cirth-form-element-focus-color: var(--cirth-primary-focus);
3370
2575
  }
3371
2576
 
@@ -3374,83 +2579,83 @@
3374
2579
  --lightningcss-light: ;
3375
2580
  --lightningcss-dark: initial;
3376
2581
  color-scheme: dark;
3377
- --cirth-background-color: #13171f;
3378
- --cirth-color: #c2c7d0;
3379
- --cirth-text-selection-color: rgba(1, 170, 255, .19);
3380
- --cirth-muted-color: #7b8495;
3381
- --cirth-muted-border-color: #202632;
3382
- --cirth-primary: #01aaff;
3383
- --cirth-primary-background: #0172ad;
2582
+ --cirth-background-color: oklch(20.15% .003 264);
2583
+ --cirth-color: oklch(83% .016 264);
2584
+ --cirth-text-selection-color: oklch(70% .129 69.35 / .1875);
2585
+ --cirth-muted-color: oklch(61.3% .032 264);
2586
+ --cirth-muted-border-color: oklch(26.7% .011 264);
2587
+ --cirth-primary: oklch(70% .129 69.35);
2588
+ --cirth-primary-background: oklch(52.7% .097 69.35);
3384
2589
  --cirth-primary-border: var(--cirth-primary-background);
3385
- --cirth-primary-underline: rgba(1, 170, 255, .5);
3386
- --cirth-primary-hover: #79c0ff;
3387
- --cirth-primary-hover-background: #017fc0;
2590
+ --cirth-primary-underline: oklch(70% .129 69.35 / .5);
2591
+ --cirth-primary-hover: oklch(78.7% .146 69.35);
2592
+ --cirth-primary-hover-background: oklch(57% .105 69.35);
3388
2593
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
3389
2594
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
3390
- --cirth-primary-focus: rgba(1, 170, 255, .376);
3391
- --cirth-primary-inverse: #fff;
3392
- --cirth-secondary: #969eaf;
3393
- --cirth-secondary-background: #525f7a;
2595
+ --cirth-primary-focus: oklch(70% .129 69.35 / .7);
2596
+ --cirth-primary-inverse: oklch(100% 0 0);
2597
+ --cirth-secondary: oklch(70% .028 264);
2598
+ --cirth-secondary-background: oklch(48.3% .03 264);
3394
2599
  --cirth-secondary-border: var(--cirth-secondary-background);
3395
- --cirth-secondary-underline: rgba(150, 158, 175, .5);
3396
- --cirth-secondary-hover: #b3b9c5;
3397
- --cirth-secondary-hover-background: #5d6b89;
2600
+ --cirth-secondary-underline: oklch(70% .028 264 / .5);
2601
+ --cirth-secondary-hover: oklch(78.7% .021 264);
2602
+ --cirth-secondary-hover-background: oklch(52.7% .032 264);
3398
2603
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
3399
2604
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
3400
- --cirth-secondary-focus: rgba(144, 158, 190, .25);
3401
- --cirth-secondary-inverse: #fff;
3402
- --cirth-contrast: #dfe3eb;
3403
- --cirth-contrast-background: #eff1f4;
2605
+ --cirth-secondary-focus: oklch(70% .028 264 / .7);
2606
+ --cirth-secondary-inverse: oklch(100% 0 0);
2607
+ --cirth-contrast: oklch(91.7% .006 264);
2608
+ --cirth-contrast-background: oklch(96% 0 264);
3404
2609
  --cirth-contrast-border: var(--cirth-contrast-background);
3405
- --cirth-contrast-underline: rgba(223, 227, 235, .5);
3406
- --cirth-contrast-hover: #fff;
3407
- --cirth-contrast-hover-background: #fff;
2610
+ --cirth-contrast-underline: oklch(91.7% .006 264 / .5);
2611
+ --cirth-contrast-hover: oklch(100% 0 0);
2612
+ --cirth-contrast-hover-background: oklch(100% 0 0);
3408
2613
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
3409
2614
  --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
3410
- --cirth-contrast-focus: rgba(207, 213, 226, .25);
3411
- --cirth-contrast-inverse: #000;
3412
- --cirth-box-shadow: .0145rem .029rem .174rem rgba(7, 9, 12, .016), .0335rem .067rem .402rem rgba(7, 9, 12, .024), .0625rem .125rem .75rem rgba(7, 9, 12, .03), .1125rem .225rem 1.35rem rgba(7, 9, 12, .035), .2085rem .417rem 2.502rem rgba(7, 9, 12, .043), .5rem 1rem 6rem rgba(7, 9, 12, .06), 0 0 0 .0625rem rgba(7, 9, 12, .016);
3413
- --cirth-h1-color: #f0f1f3;
3414
- --cirth-h2-color: #e0e3e7;
3415
- --cirth-h3-color: #c2c7d0;
3416
- --cirth-h4-color: #b3b9c5;
3417
- --cirth-h5-color: #a4acba;
3418
- --cirth-h6-color: #8891a4;
3419
- --cirth-mark-background-color: #014063;
3420
- --cirth-mark-color: #fff;
3421
- --cirth-ins-color: #62af9a;
3422
- --cirth-del-color: #ce7e7b;
2615
+ --cirth-contrast-focus: oklch(87.3% .011 264 / .5);
2616
+ --cirth-contrast-inverse: oklch(0% 0 0);
2617
+ --cirth-box-shadow: .0145rem .029rem .174rem oklch(9% 0 312 / .01698), .0335rem .067rem .402rem oklch(9% 0 312 / .024), .0625rem .125rem .75rem oklch(9% 0 312 / .03), .1125rem .225rem 1.35rem oklch(9% 0 312 / .036), .2085rem .417rem 2.502rem oklch(9% 0 312 / .04302), .5rem 1rem 6rem oklch(9% 0 312 / .06), 0 0 0 .0625rem oklch(9% 0 312 / .015);
2618
+ --cirth-h1-color: oklch(96% 0 264);
2619
+ --cirth-h2-color: oklch(91.7% .006 264);
2620
+ --cirth-h3-color: oklch(83% .016 264);
2621
+ --cirth-h4-color: oklch(78.7% .021 264);
2622
+ --cirth-h5-color: oklch(74.3% .025 264);
2623
+ --cirth-h6-color: oklch(65.7% .03 264);
2624
+ --cirth-mark-background-color: oklch(35.3% .063 78);
2625
+ --cirth-mark-color: oklch(100% 0 0);
2626
+ --cirth-ins-color: oklch(78.7% .15 160.59);
2627
+ --cirth-del-color: oklch(78.7% .106 29.73);
3423
2628
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
3424
2629
  --cirth-blockquote-footer-color: var(--cirth-muted-color);
3425
- --cirth-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3426
- --cirth-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
2630
+ --cirth-button-box-shadow: 0 0 0 #0000;
2631
+ --cirth-button-hover-box-shadow: 0 0 0 #0000;
3427
2632
  --cirth-table-border-color: var(--cirth-muted-border-color);
3428
- --cirth-table-row-stripped-background-color: rgba(111, 120, 135, .04);
3429
- --cirth-code-background-color: #1a1f28;
3430
- --cirth-code-color: #8891a4;
2633
+ --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2634
+ --cirth-code-background-color: oklch(23.4% .00725 264);
2635
+ --cirth-code-color: oklch(65.7% .03 264);
3431
2636
  --cirth-code-kbd-background-color: var(--cirth-color);
3432
2637
  --cirth-code-kbd-color: var(--cirth-background-color);
3433
- --cirth-form-element-background-color: #1c212c;
3434
- --cirth-form-element-selected-background-color: #2a3140;
3435
- --cirth-form-element-border-color: #2a3140;
3436
- --cirth-form-element-color: #e0e3e7;
3437
- --cirth-form-element-placeholder-color: #8891a4;
3438
- --cirth-form-element-active-background-color: #1a1f28;
2638
+ --cirth-form-element-background-color: oklch(24.5% .0085 264);
2639
+ --cirth-form-element-selected-background-color: oklch(31% .016 264);
2640
+ --cirth-form-element-border-color: oklch(52.7% .032 264);
2641
+ --cirth-form-element-color: oklch(91.7% .006 264);
2642
+ --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2643
+ --cirth-form-element-active-background-color: oklch(23.4% .00725 264);
3439
2644
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
3440
2645
  --cirth-form-element-focus-color: var(--cirth-primary-border);
3441
2646
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
3442
- --cirth-form-element-invalid-border-color: #964a50;
3443
- --cirth-form-element-invalid-active-border-color: #b7403b;
2647
+ --cirth-form-element-invalid-border-color: oklch(70% .163 29.73);
2648
+ --cirth-form-element-invalid-active-border-color: oklch(78.7% .106 29.73);
3444
2649
  --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
3445
- --cirth-form-element-valid-border-color: #2a7b6f;
3446
- --cirth-form-element-valid-active-border-color: #16896a;
2650
+ --cirth-form-element-valid-border-color: oklch(70% .133 160.59);
2651
+ --cirth-form-element-valid-active-border-color: oklch(78.7% .15 160.59);
3447
2652
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
3448
- --cirth-switch-background-color: #333c4e;
2653
+ --cirth-switch-background-color: oklch(52.7% .032 264);
3449
2654
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
3450
- --cirth-switch-color: #fff;
3451
- --cirth-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3452
- --cirth-range-border-color: #202632;
3453
- --cirth-range-active-border-color: #2a3140;
2655
+ --cirth-switch-color: oklch(100% 0 0);
2656
+ --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2657
+ --cirth-range-border-color: oklch(26.7% .011 264);
2658
+ --cirth-range-active-border-color: oklch(31% .016 264);
3454
2659
  --cirth-range-thumb-border-color: var(--cirth-background-color);
3455
2660
  --cirth-range-thumb-color: var(--cirth-secondary-background);
3456
2661
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
@@ -3458,34 +2663,31 @@
3458
2663
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
3459
2664
  --cirth-accordion-close-summary-color: var(--cirth-color);
3460
2665
  --cirth-accordion-open-summary-color: var(--cirth-muted-color);
3461
- --cirth-card-background-color: #181c25;
2666
+ --cirth-card-background-color: oklch(22.3% .006 264);
3462
2667
  --cirth-card-border-color: var(--cirth-card-background-color);
3463
2668
  --cirth-card-box-shadow: var(--cirth-box-shadow);
3464
- --cirth-card-sectioning-background-color: #1a1f28;
3465
- --cirth-dropdown-background-color: #181c25;
3466
- --cirth-dropdown-border-color: #202632;
2669
+ --cirth-card-sectioning-background-color: oklch(23.4% .00725 264);
2670
+ --cirth-dropdown-background-color: oklch(22.3% .006 264);
2671
+ --cirth-dropdown-border-color: oklch(26.7% .011 264);
3467
2672
  --cirth-dropdown-box-shadow: var(--cirth-box-shadow);
3468
2673
  --cirth-dropdown-color: var(--cirth-color);
3469
- --cirth-dropdown-hover-background-color: #202632;
2674
+ --cirth-dropdown-hover-background-color: oklch(26.7% .011 264);
3470
2675
  --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
3471
- --cirth-modal-overlay-background-color: rgba(7.5, 8.5, 10, var(--cirth-opacity-overlay));
3472
- --cirth-progress-background-color: #202632;
3473
- --cirth-progress-color: var(--cirth-primary-background);
2676
+ --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
2677
+ --cirth-progress-background-color: oklch(26.7% .011 264);
2678
+ --cirth-progress-border-color: oklch(52.7% .032 264);
2679
+ --cirth-progress-color: oklch(61.3% .113 69.35);
3474
2680
  --cirth-tooltip-background-color: var(--cirth-contrast-background);
3475
2681
  --cirth-tooltip-color: var(--cirth-contrast-inverse);
3476
- --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
3477
- --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
2682
+ --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 215, 153)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
2683
+ --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 160, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
3478
2684
  }
3479
2685
 
3480
2686
  .cirth:not([data-theme]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
3481
2687
  --cirth-form-element-focus-color: var(--cirth-primary-focus);
3482
2688
  }
3483
2689
 
3484
- .cirth:not([data-theme]) details summary[role="button"].contrast:not(.outline):after {
3485
- filter: brightness(0);
3486
- }
3487
-
3488
- .cirth:not([data-theme]) [aria-busy="true"]:not(:is(input, select, textarea)).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
2690
+ .cirth:not([data-theme]) details summary[role="button"].contrast:not(.outline):after, .cirth:not([data-theme]) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
3489
2691
  filter: brightness(0);
3490
2692
  }
3491
2693
  }
@@ -3494,83 +2696,83 @@
3494
2696
  --lightningcss-light: ;
3495
2697
  --lightningcss-dark: initial;
3496
2698
  color-scheme: dark;
3497
- --cirth-background-color: #13171f;
3498
- --cirth-color: #c2c7d0;
3499
- --cirth-text-selection-color: rgba(1, 170, 255, .19);
3500
- --cirth-muted-color: #7b8495;
3501
- --cirth-muted-border-color: #202632;
3502
- --cirth-primary: #01aaff;
3503
- --cirth-primary-background: #0172ad;
2699
+ --cirth-background-color: oklch(20.15% .003 264);
2700
+ --cirth-color: oklch(83% .016 264);
2701
+ --cirth-text-selection-color: oklch(70% .129 69.35 / .1875);
2702
+ --cirth-muted-color: oklch(61.3% .032 264);
2703
+ --cirth-muted-border-color: oklch(26.7% .011 264);
2704
+ --cirth-primary: oklch(70% .129 69.35);
2705
+ --cirth-primary-background: oklch(52.7% .097 69.35);
3504
2706
  --cirth-primary-border: var(--cirth-primary-background);
3505
- --cirth-primary-underline: rgba(1, 170, 255, .5);
3506
- --cirth-primary-hover: #79c0ff;
3507
- --cirth-primary-hover-background: #017fc0;
2707
+ --cirth-primary-underline: oklch(70% .129 69.35 / .5);
2708
+ --cirth-primary-hover: oklch(78.7% .146 69.35);
2709
+ --cirth-primary-hover-background: oklch(57% .105 69.35);
3508
2710
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
3509
2711
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
3510
- --cirth-primary-focus: rgba(1, 170, 255, .376);
3511
- --cirth-primary-inverse: #fff;
3512
- --cirth-secondary: #969eaf;
3513
- --cirth-secondary-background: #525f7a;
2712
+ --cirth-primary-focus: oklch(70% .129 69.35 / .7);
2713
+ --cirth-primary-inverse: oklch(100% 0 0);
2714
+ --cirth-secondary: oklch(70% .028 264);
2715
+ --cirth-secondary-background: oklch(48.3% .03 264);
3514
2716
  --cirth-secondary-border: var(--cirth-secondary-background);
3515
- --cirth-secondary-underline: rgba(150, 158, 175, .5);
3516
- --cirth-secondary-hover: #b3b9c5;
3517
- --cirth-secondary-hover-background: #5d6b89;
2717
+ --cirth-secondary-underline: oklch(70% .028 264 / .5);
2718
+ --cirth-secondary-hover: oklch(78.7% .021 264);
2719
+ --cirth-secondary-hover-background: oklch(52.7% .032 264);
3518
2720
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
3519
2721
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
3520
- --cirth-secondary-focus: rgba(144, 158, 190, .25);
3521
- --cirth-secondary-inverse: #fff;
3522
- --cirth-contrast: #dfe3eb;
3523
- --cirth-contrast-background: #eff1f4;
2722
+ --cirth-secondary-focus: oklch(70% .028 264 / .7);
2723
+ --cirth-secondary-inverse: oklch(100% 0 0);
2724
+ --cirth-contrast: oklch(91.7% .006 264);
2725
+ --cirth-contrast-background: oklch(96% 0 264);
3524
2726
  --cirth-contrast-border: var(--cirth-contrast-background);
3525
- --cirth-contrast-underline: rgba(223, 227, 235, .5);
3526
- --cirth-contrast-hover: #fff;
3527
- --cirth-contrast-hover-background: #fff;
2727
+ --cirth-contrast-underline: oklch(91.7% .006 264 / .5);
2728
+ --cirth-contrast-hover: oklch(100% 0 0);
2729
+ --cirth-contrast-hover-background: oklch(100% 0 0);
3528
2730
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
3529
2731
  --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
3530
- --cirth-contrast-focus: rgba(207, 213, 226, .25);
3531
- --cirth-contrast-inverse: #000;
3532
- --cirth-box-shadow: .0145rem .029rem .174rem rgba(7, 9, 12, .016), .0335rem .067rem .402rem rgba(7, 9, 12, .024), .0625rem .125rem .75rem rgba(7, 9, 12, .03), .1125rem .225rem 1.35rem rgba(7, 9, 12, .035), .2085rem .417rem 2.502rem rgba(7, 9, 12, .043), .5rem 1rem 6rem rgba(7, 9, 12, .06), 0 0 0 .0625rem rgba(7, 9, 12, .016);
3533
- --cirth-h1-color: #f0f1f3;
3534
- --cirth-h2-color: #e0e3e7;
3535
- --cirth-h3-color: #c2c7d0;
3536
- --cirth-h4-color: #b3b9c5;
3537
- --cirth-h5-color: #a4acba;
3538
- --cirth-h6-color: #8891a4;
3539
- --cirth-mark-background-color: #014063;
3540
- --cirth-mark-color: #fff;
3541
- --cirth-ins-color: #62af9a;
3542
- --cirth-del-color: #ce7e7b;
2732
+ --cirth-contrast-focus: oklch(87.3% .011 264 / .5);
2733
+ --cirth-contrast-inverse: oklch(0% 0 0);
2734
+ --cirth-box-shadow: .0145rem .029rem .174rem oklch(9% 0 312 / .01698), .0335rem .067rem .402rem oklch(9% 0 312 / .024), .0625rem .125rem .75rem oklch(9% 0 312 / .03), .1125rem .225rem 1.35rem oklch(9% 0 312 / .036), .2085rem .417rem 2.502rem oklch(9% 0 312 / .04302), .5rem 1rem 6rem oklch(9% 0 312 / .06), 0 0 0 .0625rem oklch(9% 0 312 / .015);
2735
+ --cirth-h1-color: oklch(96% 0 264);
2736
+ --cirth-h2-color: oklch(91.7% .006 264);
2737
+ --cirth-h3-color: oklch(83% .016 264);
2738
+ --cirth-h4-color: oklch(78.7% .021 264);
2739
+ --cirth-h5-color: oklch(74.3% .025 264);
2740
+ --cirth-h6-color: oklch(65.7% .03 264);
2741
+ --cirth-mark-background-color: oklch(35.3% .063 78);
2742
+ --cirth-mark-color: oklch(100% 0 0);
2743
+ --cirth-ins-color: oklch(78.7% .15 160.59);
2744
+ --cirth-del-color: oklch(78.7% .106 29.73);
3543
2745
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
3544
2746
  --cirth-blockquote-footer-color: var(--cirth-muted-color);
3545
- --cirth-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3546
- --cirth-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
2747
+ --cirth-button-box-shadow: 0 0 0 #0000;
2748
+ --cirth-button-hover-box-shadow: 0 0 0 #0000;
3547
2749
  --cirth-table-border-color: var(--cirth-muted-border-color);
3548
- --cirth-table-row-stripped-background-color: rgba(111, 120, 135, .04);
3549
- --cirth-code-background-color: #1a1f28;
3550
- --cirth-code-color: #8891a4;
2750
+ --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2751
+ --cirth-code-background-color: oklch(23.4% .00725 264);
2752
+ --cirth-code-color: oklch(65.7% .03 264);
3551
2753
  --cirth-code-kbd-background-color: var(--cirth-color);
3552
2754
  --cirth-code-kbd-color: var(--cirth-background-color);
3553
- --cirth-form-element-background-color: #1c212c;
3554
- --cirth-form-element-selected-background-color: #2a3140;
3555
- --cirth-form-element-border-color: #2a3140;
3556
- --cirth-form-element-color: #e0e3e7;
3557
- --cirth-form-element-placeholder-color: #8891a4;
3558
- --cirth-form-element-active-background-color: #1a1f28;
2755
+ --cirth-form-element-background-color: oklch(24.5% .0085 264);
2756
+ --cirth-form-element-selected-background-color: oklch(31% .016 264);
2757
+ --cirth-form-element-border-color: oklch(52.7% .032 264);
2758
+ --cirth-form-element-color: oklch(91.7% .006 264);
2759
+ --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2760
+ --cirth-form-element-active-background-color: oklch(23.4% .00725 264);
3559
2761
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
3560
2762
  --cirth-form-element-focus-color: var(--cirth-primary-border);
3561
2763
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
3562
- --cirth-form-element-invalid-border-color: #964a50;
3563
- --cirth-form-element-invalid-active-border-color: #b7403b;
2764
+ --cirth-form-element-invalid-border-color: oklch(70% .163 29.73);
2765
+ --cirth-form-element-invalid-active-border-color: oklch(78.7% .106 29.73);
3564
2766
  --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
3565
- --cirth-form-element-valid-border-color: #2a7b6f;
3566
- --cirth-form-element-valid-active-border-color: #16896a;
2767
+ --cirth-form-element-valid-border-color: oklch(70% .133 160.59);
2768
+ --cirth-form-element-valid-active-border-color: oklch(78.7% .15 160.59);
3567
2769
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
3568
- --cirth-switch-background-color: #333c4e;
2770
+ --cirth-switch-background-color: oklch(52.7% .032 264);
3569
2771
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
3570
- --cirth-switch-color: #fff;
3571
- --cirth-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3572
- --cirth-range-border-color: #202632;
3573
- --cirth-range-active-border-color: #2a3140;
2772
+ --cirth-switch-color: oklch(100% 0 0);
2773
+ --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2774
+ --cirth-range-border-color: oklch(26.7% .011 264);
2775
+ --cirth-range-active-border-color: oklch(31% .016 264);
3574
2776
  --cirth-range-thumb-border-color: var(--cirth-background-color);
3575
2777
  --cirth-range-thumb-color: var(--cirth-secondary-background);
3576
2778
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
@@ -3578,57 +2780,34 @@
3578
2780
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
3579
2781
  --cirth-accordion-close-summary-color: var(--cirth-color);
3580
2782
  --cirth-accordion-open-summary-color: var(--cirth-muted-color);
3581
- --cirth-card-background-color: #181c25;
2783
+ --cirth-card-background-color: oklch(22.3% .006 264);
3582
2784
  --cirth-card-border-color: var(--cirth-card-background-color);
3583
2785
  --cirth-card-box-shadow: var(--cirth-box-shadow);
3584
- --cirth-card-sectioning-background-color: #1a1f28;
3585
- --cirth-dropdown-background-color: #181c25;
3586
- --cirth-dropdown-border-color: #202632;
2786
+ --cirth-card-sectioning-background-color: oklch(23.4% .00725 264);
2787
+ --cirth-dropdown-background-color: oklch(22.3% .006 264);
2788
+ --cirth-dropdown-border-color: oklch(26.7% .011 264);
3587
2789
  --cirth-dropdown-box-shadow: var(--cirth-box-shadow);
3588
2790
  --cirth-dropdown-color: var(--cirth-color);
3589
- --cirth-dropdown-hover-background-color: #202632;
2791
+ --cirth-dropdown-hover-background-color: oklch(26.7% .011 264);
3590
2792
  --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
3591
- --cirth-modal-overlay-background-color: rgba(7.5, 8.5, 10, var(--cirth-opacity-overlay));
3592
- --cirth-progress-background-color: #202632;
3593
- --cirth-progress-color: var(--cirth-primary-background);
2793
+ --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
2794
+ --cirth-progress-background-color: oklch(26.7% .011 264);
2795
+ --cirth-progress-border-color: oklch(52.7% .032 264);
2796
+ --cirth-progress-color: oklch(61.3% .113 69.35);
3594
2797
  --cirth-tooltip-background-color: var(--cirth-contrast-background);
3595
2798
  --cirth-tooltip-color: var(--cirth-contrast-inverse);
3596
- --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
3597
- --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
3598
- }
3599
-
3600
- .cirth[data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
3601
- --cirth-form-element-focus-color: var(--cirth-primary-focus);
2799
+ --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 215, 153)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
2800
+ --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 160, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
3602
2801
  }
3603
2802
 
3604
- .cirth [data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
2803
+ .cirth[data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth [data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
3605
2804
  --cirth-form-element-focus-color: var(--cirth-primary-focus);
3606
2805
  }
3607
2806
 
3608
- .cirth[data-theme="dark"] details summary[role="button"].contrast:not(.outline):after, .cirth [data-theme="dark"] details summary[role="button"].contrast:not(.outline):after {
3609
- filter: brightness(0);
3610
- }
3611
-
3612
- .cirth[data-theme="dark"] [aria-busy="true"]:not(:is(input, select, textarea)).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
2807
+ .cirth[data-theme="dark"] details summary[role="button"].contrast:not(.outline):after, .cirth [data-theme="dark"] details summary[role="button"].contrast:not(.outline):after, .cirth[data-theme="dark"] [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before, .cirth [data-theme="dark"] [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
3613
2808
  filter: brightness(0);
3614
2809
  }
3615
2810
 
3616
- .cirth [data-theme="dark"] [aria-busy="true"]:not(:is(input, select, textarea)).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
3617
- filter: brightness(0);
3618
- }
3619
-
3620
- .cirth progress {
3621
- accent-color: var(--cirth-primary);
3622
- }
3623
-
3624
- .cirth [type="checkbox"] {
3625
- accent-color: var(--cirth-primary);
3626
- }
3627
-
3628
- .cirth [type="radio"] {
3629
- accent-color: var(--cirth-primary);
3630
- }
3631
-
3632
- .cirth [type="range"] {
2811
+ .cirth progress, .cirth [type="checkbox"], .cirth [type="radio"], .cirth [type="range"] {
3633
2812
  accent-color: var(--cirth-primary);
3634
2813
  }