@stackoverflow/stacks 1.3.0 → 1.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/controllers/s-expandable-control.d.ts +1 -1
  2. package/dist/controllers/s-tooltip.d.ts +16 -1
  3. package/dist/css/stacks.css +848 -559
  4. package/dist/css/stacks.min.css +1 -1
  5. package/dist/js/stacks.js +153 -84
  6. package/dist/js/stacks.min.js +1 -1
  7. package/lib/css/atomic/borders.less +1 -0
  8. package/lib/css/atomic/colors.less +1 -0
  9. package/lib/css/atomic/misc.less +1 -1
  10. package/lib/css/atomic/typography.less +0 -6
  11. package/lib/css/components/activity-indicator.less +18 -17
  12. package/lib/css/components/avatars.less +50 -131
  13. package/lib/css/components/breadcrumbs.less +4 -4
  14. package/lib/css/components/buttons.less +8 -48
  15. package/lib/css/components/empty-states.less +15 -0
  16. package/lib/css/components/{collapsible.less → expandable.less} +0 -0
  17. package/lib/css/components/inputs.less +37 -101
  18. package/lib/css/components/labels.less +98 -0
  19. package/lib/css/components/links.less +15 -3
  20. package/lib/css/components/notices.less +190 -163
  21. package/lib/css/components/post-summary.less +98 -35
  22. package/lib/css/components/progress-bars.less +1 -1
  23. package/lib/css/components/prose.less +4 -4
  24. package/lib/css/components/spinner.less +39 -1
  25. package/lib/css/components/tables.less +1 -5
  26. package/lib/css/components/uploader.less +70 -84
  27. package/lib/css/exports/constants-colors.less +19 -0
  28. package/lib/css/stacks-dynamic.less +0 -1
  29. package/lib/css/stacks-static.less +3 -2
  30. package/lib/ts/controllers/s-expandable-control.ts +23 -19
  31. package/lib/ts/controllers/s-modal.ts +16 -16
  32. package/lib/ts/controllers/s-navigation-tablist.ts +13 -13
  33. package/lib/ts/controllers/s-popover.ts +26 -18
  34. package/lib/ts/controllers/s-table.ts +31 -29
  35. package/lib/ts/controllers/s-tooltip.ts +62 -23
  36. package/lib/ts/stacks.ts +8 -4
  37. package/package.json +17 -17
  38. package/lib/css/components/banners.less +0 -80
  39. package/lib/css/components/blank-states.less +0 -26
@@ -400,45 +400,86 @@ template {
400
400
  fill: currentColor;
401
401
  }
402
402
  .s-activity-indicator {
403
+ --_focus-ring: var(--focus-ring);
404
+ --_bg-color: var(--theme-secondary-400);
403
405
  display: inline-block;
404
406
  min-width: var(--su-static12);
405
407
  min-height: var(--su-static12);
406
408
  padding: var(--su2) var(--su4);
407
409
  line-height: 1.1;
408
- background-color: var(--theme-secondary-400);
409
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
410
+ background-color: var(--_bg-color);
411
+ box-shadow: 0 0 0 var(--su-static4) var(--_focus-ring);
410
412
  border-radius: 1000px;
411
413
  font-size: var(--fs-fine);
412
414
  font-weight: 600;
413
415
  color: hsl(0, 0%, 100%);
414
416
  text-transform: uppercase;
415
417
  }
416
- body.theme-highcontrast .s-activity-indicator {
417
- color: var(--white);
418
+ .s-activity-indicator.s-activity-indicator__success {
419
+ --_bg-color: var(--green-500);
420
+ --_focus-ring: var(--focus-ring-success);
418
421
  }
419
- .s-activity-indicator__success {
420
- background-color: var(--green-500);
421
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-success);
422
+ .s-activity-indicator.s-activity-indicator__warning {
423
+ --_bg-color: var(--yellow-600);
424
+ --_focus-ring: var(--focus-ring-warning);
422
425
  }
423
- .s-activity-indicator__warning {
424
- background-color: var(--yellow-600);
425
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-warning);
426
+ .s-activity-indicator.s-activity-indicator__danger {
427
+ --_bg-color: var(--red-500);
428
+ --_focus-ring: var(--focus-ring-error);
426
429
  }
427
- .s-activity-indicator__danger {
428
- background-color: var(--red-500);
429
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
430
+ body.theme-highcontrast .s-activity-indicator {
431
+ color: var(--white);
430
432
  }
431
433
  .s-avatar {
434
+ --_size: var(--su-static16);
435
+ --_br: var(--br-sm);
436
+ --_fs-letter: calc(var(--su-static12) - var(--su-static1));
437
+ --_scale-badge: 1;
432
438
  display: inline-block;
433
439
  position: relative;
434
- width: var(--su-static16);
435
- height: var(--su-static16);
436
- border-radius: var(--br-sm);
440
+ width: var(--_size);
441
+ height: var(--_size);
442
+ border-radius: var(--_br);
437
443
  background-color: hsl(0, 0%, 100%);
438
444
  background-repeat: no-repeat;
439
445
  background-size: 100%;
440
446
  vertical-align: bottom;
441
447
  }
448
+ .s-avatar.s-avatar__24 {
449
+ --_size: var(--su-static24);
450
+ --_fs-letter: var(--su-static16);
451
+ --_scale-badge: 1.1;
452
+ }
453
+ .s-avatar.s-avatar__32 {
454
+ --_size: var(--su-static32);
455
+ --_br: var(--br-md);
456
+ --_fs-letter: calc(var(--su-static24) - var(--su-static2));
457
+ --_scale-badge: 1.3;
458
+ }
459
+ .s-avatar.s-avatar__48 {
460
+ --_size: var(--su-static48);
461
+ --_br: var(--br-md);
462
+ --_fs-letter: calc(var(--su-static32) + var(--su-static2));
463
+ --_scale-badge: 1.6;
464
+ }
465
+ .s-avatar.s-avatar__64 {
466
+ --_size: var(--su-static64);
467
+ --_br: var(--br-lg);
468
+ --_fs-letter: calc(var(--su-static48) - var(--su-static4));
469
+ --_scale-badge: 2.4;
470
+ }
471
+ .s-avatar.s-avatar__96 {
472
+ --_size: var(--su-static96);
473
+ --_br: calc(var(--br-lg) + var(--br-sm));
474
+ --_fs-letter: calc(var(--su-static64) + var(--su-static2));
475
+ --_scale-badge: 3;
476
+ }
477
+ .s-avatar.s-avatar__128 {
478
+ --_size: var(--su-static128);
479
+ --_br: calc(var(--br-lg) + var(--br-sm));
480
+ --_fs-letter: calc(var(--su-static96) - var(--su-static8));
481
+ --_scale-badge: 3;
482
+ }
442
483
  body.theme-highcontrast .s-avatar {
443
484
  background-color: var(--black);
444
485
  box-shadow: 0 0 0 1px var(--black);
@@ -450,7 +491,7 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
450
491
  .s-avatar .s-avatar--letter {
451
492
  display: block;
452
493
  color: hsl(0, 0%, 100%);
453
- font-size: 11px;
494
+ font-size: var(--_fs-letter);
454
495
  font-weight: bold;
455
496
  line-height: 1.4;
456
497
  text-align: center;
@@ -464,113 +505,15 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
464
505
  position: absolute;
465
506
  right: -4px;
466
507
  bottom: -4px;
508
+ -webkit-transform: scale(var(--_scale-badge));
509
+ transform: scale(var(--_scale-badge));
467
510
  }
468
511
  .s-avatar .s-avatar--image {
469
- width: var(--su-static16);
470
- height: var(--su-static16);
471
- border-radius: var(--br-sm);
512
+ width: var(--_size);
513
+ height: var(--_size);
514
+ border-radius: var(--_br);
472
515
  display: block;
473
516
  }
474
- .s-avatar.s-avatar__24 {
475
- width: var(--su-static24);
476
- height: var(--su-static24);
477
- }
478
- .s-avatar.s-avatar__24 .s-avatar--letter {
479
- font-size: 16px;
480
- }
481
- .s-avatar.s-avatar__24 .s-avatar--badge {
482
- -webkit-transform: scale(1.1);
483
- transform: scale(1.1);
484
- }
485
- .s-avatar.s-avatar__24 .s-avatar--image {
486
- width: var(--su-static24);
487
- height: var(--su-static24);
488
- }
489
- .s-avatar.s-avatar__32 {
490
- width: var(--su-static32);
491
- height: var(--su-static32);
492
- border-radius: var(--br-md);
493
- }
494
- .s-avatar.s-avatar__32 .s-avatar--letter {
495
- font-size: 22px;
496
- }
497
- .s-avatar.s-avatar__32 .s-avatar--badge {
498
- -webkit-transform: scale(1.3);
499
- transform: scale(1.3);
500
- }
501
- .s-avatar.s-avatar__32 .s-avatar--image {
502
- width: var(--su-static32);
503
- height: var(--su-static32);
504
- border-radius: var(--br-md);
505
- }
506
- .s-avatar.s-avatar__48 {
507
- width: var(--su-static48);
508
- height: var(--su-static48);
509
- border-radius: var(--br-md);
510
- }
511
- .s-avatar.s-avatar__48 .s-avatar--letter {
512
- font-size: 34px;
513
- }
514
- .s-avatar.s-avatar__48 .s-avatar--badge {
515
- -webkit-transform: scale(1.6);
516
- transform: scale(1.6);
517
- }
518
- .s-avatar.s-avatar__48 .s-avatar--image {
519
- width: var(--su-static48);
520
- height: var(--su-static48);
521
- border-radius: var(--br-md);
522
- }
523
- .s-avatar.s-avatar__64 {
524
- width: var(--su-static64);
525
- height: var(--su-static64);
526
- border-radius: var(--br-lg);
527
- }
528
- .s-avatar.s-avatar__64 .s-avatar--letter {
529
- font-size: 44px;
530
- }
531
- .s-avatar.s-avatar__64 .s-avatar--badge {
532
- -webkit-transform: scale(2.4);
533
- transform: scale(2.4);
534
- }
535
- .s-avatar.s-avatar__64 .s-avatar--image {
536
- width: var(--su-static64);
537
- height: var(--su-static64);
538
- border-radius: var(--br-lg);
539
- }
540
- .s-avatar.s-avatar__96 {
541
- width: var(--su-static96);
542
- height: var(--su-static96);
543
- border-radius: calc(var(--br-lg) + var(--br-sm));
544
- }
545
- .s-avatar.s-avatar__96 .s-avatar--letter {
546
- font-size: 66px;
547
- }
548
- .s-avatar.s-avatar__96 .s-avatar--badge {
549
- -webkit-transform: scale(3);
550
- transform: scale(3);
551
- }
552
- .s-avatar.s-avatar__96 .s-avatar--image {
553
- width: var(--su-static96);
554
- height: var(--su-static96);
555
- border-radius: calc(var(--br-lg) + var(--br-sm));
556
- }
557
- .s-avatar.s-avatar__128 {
558
- width: var(--su-static128);
559
- height: var(--su-static128);
560
- border-radius: calc(var(--br-lg) + var(--br-lg));
561
- }
562
- .s-avatar.s-avatar__128 .s-avatar--letter {
563
- font-size: 88px;
564
- }
565
- .s-avatar.s-avatar__128 .s-avatar--badge {
566
- -webkit-transform: scale(3);
567
- transform: scale(3);
568
- }
569
- .s-avatar.s-avatar__128 .s-avatar--image {
570
- width: var(--su-static128);
571
- height: var(--su-static128);
572
- border-radius: calc(var(--br-lg) + var(--br-lg));
573
- }
574
517
  .s-badge,
575
518
  .s-topbar--notice {
576
519
  display: inline-flex;
@@ -800,7 +743,7 @@ body.theme-highcontrast .s-badge__danger.s-badge__filled {
800
743
  display: flex;
801
744
  flex-wrap: wrap;
802
745
  align-items: start;
803
- color: var(--black-150);
746
+ color: var(--black-200);
804
747
  font-size: var(--fs-caption);
805
748
  }
806
749
  .s-breadcrumbs .s-breadcrumbs--item {
@@ -815,7 +758,7 @@ body.theme-highcontrast .s-badge__danger.s-badge__filled {
815
758
  margin-left: var(--su4);
816
759
  }
817
760
  body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
818
- color: var(--black-350);
761
+ color: var(--fc-light);
819
762
  }
820
763
  @media (max-width: 640px) {
821
764
  .s-breadcrumbs .s-breadcrumbs--divider {
@@ -824,10 +767,10 @@ body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
824
767
  }
825
768
  }
826
769
  .s-breadcrumbs .s-breadcrumbs--link {
827
- color: var(--black-350);
770
+ color: var(--fc-light);
828
771
  }
829
772
  .s-breadcrumbs .s-breadcrumbs--link:hover {
830
- color: var(--black-600);
773
+ color: var(--fc-medium);
831
774
  }
832
775
  .s-btn-group {
833
776
  display: flex;
@@ -1217,81 +1160,28 @@ fieldset[disabled] a,
1217
1160
  fieldset[disabled] .s-btn,
1218
1161
  fieldset[disabled] .s-link {
1219
1162
  box-shadow: none !important;
1220
- opacity: 0.5;
1163
+ opacity: var(--_o-disabled-static);
1221
1164
  pointer-events: none;
1222
1165
  }
1223
1166
  fieldset[disabled] .s-checkbox,
1224
1167
  fieldset[disabled] .s-input-message,
1225
- fieldset[disabled] .s-label,
1226
1168
  fieldset[disabled] .s-radio,
1227
1169
  fieldset[disabled] .s-toggle-switch,
1228
1170
  fieldset[disabled] .s-toggle-switch label {
1229
1171
  cursor: not-allowed;
1230
- opacity: 0.5;
1172
+ opacity: var(--_o-disabled-static);
1231
1173
  }
1232
1174
  fieldset[disabled] .s-input,
1233
1175
  fieldset[disabled] .s-textarea,
1234
1176
  fieldset[disabled] .s-select > select {
1235
1177
  cursor: not-allowed;
1236
- opacity: 0.5;
1237
- }
1238
- .s-label {
1239
- padding: 0 var(--su2);
1240
- color: var(--fc-dark);
1241
- font-family: inherit;
1242
- font-size: var(--fs-body2);
1243
- font-weight: 600;
1244
- }
1245
- .s-label[for] {
1246
- cursor: pointer;
1247
- }
1248
- .s-label--status {
1249
- margin-left: var(--su4);
1250
- padding: var(--su2) var(--su8);
1251
- border-radius: 1000px;
1252
- background-color: var(--black-050);
1253
- color: var(--fc-medium);
1254
- font-size: var(--fs-caption);
1255
- font-weight: 400;
1256
- vertical-align: text-bottom;
1257
- }
1258
- body.theme-highcontrast .s-label--status {
1259
- border: 1px solid currentColor;
1260
- }
1261
- .s-label--status.s-label--status__required {
1262
- background-color: var(--red-100);
1263
- color: var(--red-600);
1264
- }
1265
- @media (prefers-color-scheme: dark) {
1266
- body.theme-system .s-label--status.s-label--status__required {
1267
- color: var(--red-800);
1268
- }
1269
- }
1270
- body.theme-dark .s-label--status.s-label--status__required,
1271
- .theme-dark__forced .s-label--status.s-label--status__required,
1272
- body.theme-system .theme-dark__forced .s-label--status.s-label--status__required {
1273
- color: var(--red-800);
1274
- }
1275
- .s-label--status.s-label--status__new {
1276
- background-color: var(--green-100);
1277
- color: var(--green-700);
1278
- }
1279
- .s-label--status.s-label--status__beta {
1280
- background-color: var(--blue-100);
1281
- color: var(--blue-700);
1178
+ opacity: var(--_o-disabled-static);
1282
1179
  }
1283
1180
  .s-description {
1284
1181
  padding: 0 var(--su2);
1285
1182
  color: var(--fc-medium);
1286
1183
  font-size: var(--fs-caption);
1287
1184
  }
1288
- .s-label .s-description,
1289
- .s-label .s-input-message {
1290
- padding: 0;
1291
- margin-top: 4px;
1292
- margin-bottom: 0;
1293
- font-weight: normal;
1294
- }
1295
1185
  .s-input-fill {
1296
1186
  padding: 0.6em 0.7em;
1297
1187
  border: 1px solid var(--bc-darker);
@@ -1412,7 +1302,7 @@ body.theme-system .theme-dark__forced .s-label--status.s-label--status__required
1412
1302
  }
1413
1303
  .s-checkbox[disabled],
1414
1304
  .s-radio[disabled] {
1415
- opacity: 0.5;
1305
+ opacity: var(--_o-disabled-static);
1416
1306
  cursor: not-allowed;
1417
1307
  }
1418
1308
  @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
@@ -1503,52 +1393,59 @@ body.theme-highcontrast .s-input:focus-within {
1503
1393
  }
1504
1394
  .s-input[disabled],
1505
1395
  .s-textarea[disabled],
1506
- .s-select > select[disabled],
1507
- .s-input[read-only],
1508
- .s-textarea[read-only],
1509
- .s-select > select[read-only] {
1510
- cursor: not-allowed;
1511
- opacity: 0.5;
1512
- }
1513
- body.theme-highcontrast .s-input[disabled],
1514
- body.theme-highcontrast .s-textarea[disabled],
1515
- body.theme-highcontrast .s-select > select[disabled],
1516
- body.theme-highcontrast .s-input[read-only],
1517
- body.theme-highcontrast .s-textarea[read-only],
1518
- body.theme-highcontrast .s-select > select[read-only] {
1519
- opacity: 0.5;
1520
- }
1521
- .s-input[disabled],
1522
- .s-textarea[disabled],
1523
1396
  .s-select > select[disabled] {
1524
1397
  cursor: not-allowed;
1525
- opacity: 0.5;
1398
+ opacity: var(--_o-disabled-static);
1399
+ }
1400
+ .s-input[readonly],
1401
+ .s-textarea[readonly],
1402
+ .s-select > select[readonly],
1403
+ .is-readonly .s-input,
1404
+ .is-readonly .s-textarea,
1405
+ .is-readonly .s-select > select {
1406
+ border-color: var(--bc-light);
1407
+ background-color: var(--black-050);
1408
+ color: var(--black-200);
1409
+ cursor: not-allowed;
1410
+ }
1411
+ body.theme-highcontrast .s-input[readonly],
1412
+ body.theme-highcontrast .s-textarea[readonly],
1413
+ body.theme-highcontrast .s-select > select[readonly],
1414
+ body.theme-highcontrast .is-readonly .s-input,
1415
+ body.theme-highcontrast .is-readonly .s-textarea,
1416
+ body.theme-highcontrast .is-readonly .s-select > select {
1417
+ color: var(--fc-light);
1526
1418
  }
1527
1419
  .is-disabled,
1420
+ .is-readonly,
1528
1421
  .has-success,
1529
1422
  .has-error,
1530
1423
  .has-warning {
1531
1424
  position: relative;
1532
1425
  }
1533
1426
  .is-disabled .s-input,
1427
+ .is-readonly .s-input,
1534
1428
  .has-success .s-input,
1535
1429
  .has-error .s-input,
1536
1430
  .has-warning .s-input {
1537
1431
  padding-right: var(--su32);
1538
1432
  }
1539
1433
  .is-disabled .s-select .s-input-icon,
1434
+ .is-readonly .s-select .s-input-icon,
1540
1435
  .has-success .s-select .s-input-icon,
1541
1436
  .has-error .s-select .s-input-icon,
1542
1437
  .has-warning .s-select .s-input-icon {
1543
1438
  right: var(--su32);
1544
1439
  }
1545
1440
  .is-disabled .s-textarea,
1441
+ .is-readonly .s-textarea,
1546
1442
  .has-success .s-textarea,
1547
1443
  .has-error .s-textarea,
1548
1444
  .has-warning .s-textarea {
1549
1445
  padding-right: var(--su48);
1550
1446
  }
1551
1447
  .is-disabled .s-textarea ~ .s-input-icon,
1448
+ .is-readonly .s-textarea ~ .s-input-icon,
1552
1449
  .has-success .s-textarea ~ .s-input-icon,
1553
1450
  .has-error .s-textarea ~ .s-input-icon,
1554
1451
  .has-warning .s-textarea ~ .s-input-icon {
@@ -1556,6 +1453,7 @@ body.theme-highcontrast .s-select > select[read-only] {
1556
1453
  right: 1.5em;
1557
1454
  }
1558
1455
  .is-disabled .s-input-message a,
1456
+ .is-readonly .s-input-message a,
1559
1457
  .has-success .s-input-message a,
1560
1458
  .has-error .s-input-message a,
1561
1459
  .has-warning .s-input-message a {
@@ -1640,19 +1538,17 @@ body.theme-highcontrast .s-select > select[read-only] {
1640
1538
  .is-disabled .s-select:after {
1641
1539
  border-color: var(--bc-darker) transparent;
1642
1540
  }
1643
- .is-disabled .s-label,
1644
1541
  .is-disabled .s-description {
1645
- opacity: 0.5;
1646
- }
1647
- .is-disabled .s-label .s-description,
1648
- .is-disabled .s-description .s-description {
1649
- opacity: unset;
1542
+ opacity: var(--_o-disabled-static);
1650
1543
  }
1651
1544
  .is-disabled .s-input-icon {
1652
1545
  color: var(--black-400);
1653
1546
  }
1654
- .is-disabled .s-label {
1655
- cursor: not-allowed;
1547
+ .is-readonly .s-input-icon {
1548
+ color: var(--black-200);
1549
+ }
1550
+ body.theme-highcontrast .is-readonly .s-input-icon {
1551
+ color: var(--fc-light);
1656
1552
  }
1657
1553
  .s-input-icon {
1658
1554
  position: absolute;
@@ -1673,25 +1569,21 @@ body.theme-highcontrast .s-select > select[read-only] {
1673
1569
  }
1674
1570
  .s-input__sm,
1675
1571
  .s-textarea__sm,
1676
- .s-label__sm,
1677
1572
  .s-select__sm > select {
1678
1573
  font-size: var(--fs-caption);
1679
1574
  }
1680
1575
  .s-input__md,
1681
1576
  .s-textarea__md,
1682
- .s-label__md,
1683
1577
  .s-select__md > select {
1684
1578
  font-size: var(--fs-body3);
1685
1579
  }
1686
1580
  .s-input__lg,
1687
1581
  .s-textarea__lg,
1688
- .s-label__lg,
1689
1582
  .s-select__lg > select {
1690
1583
  font-size: var(--fs-title);
1691
1584
  }
1692
1585
  .s-input__xl,
1693
1586
  .s-textarea__xl,
1694
- .s-label__xl,
1695
1587
  .s-select__xl > select {
1696
1588
  font-size: var(--fs-headline1);
1697
1589
  }
@@ -1726,6 +1618,101 @@ body.theme-highcontrast .s-select > select[read-only] {
1726
1618
  padding-bottom: 0.4em;
1727
1619
  }
1728
1620
  }
1621
+ .s-label {
1622
+ --_fs: var(--fs-body2);
1623
+ color: var(--fc-dark);
1624
+ font-family: inherit;
1625
+ font-size: var(--_fs);
1626
+ font-weight: 600;
1627
+ padding: 0 var(--su2);
1628
+ }
1629
+ .s-label[for] {
1630
+ cursor: pointer;
1631
+ }
1632
+ fieldset[disabled] .s-label,
1633
+ .is-disabled .s-label {
1634
+ cursor: not-allowed;
1635
+ opacity: var(--_o-disabled-static);
1636
+ }
1637
+ fieldset[disabled] .s-label .s-description,
1638
+ .is-disabled .s-label .s-description {
1639
+ opacity: unset;
1640
+ }
1641
+ .is-readonly .s-label {
1642
+ cursor: not-allowed;
1643
+ }
1644
+ .s-label .s-description,
1645
+ .s-label .s-input-message {
1646
+ font-weight: normal;
1647
+ margin-bottom: 0;
1648
+ margin-top: var(--su4);
1649
+ padding: 0;
1650
+ }
1651
+ .s-label.s-label__sm {
1652
+ --_fs: var(--fs-caption);
1653
+ }
1654
+ .s-label.s-label__md {
1655
+ --_fs: var(--fs-body3);
1656
+ }
1657
+ .s-label.s-label__lg {
1658
+ --_fs: var(--fs-title);
1659
+ }
1660
+ .s-label.s-label__xl {
1661
+ --_fs: var(--fs-headline1);
1662
+ }
1663
+ .s-label--status {
1664
+ --_b: none;
1665
+ --_bg: var(--black-050);
1666
+ --_fc: var(--fc-medium);
1667
+ background-color: var(--_bg);
1668
+ border: var(--_b);
1669
+ border-radius: 1000px;
1670
+ color: var(--_fc);
1671
+ font-size: var(--fs-caption);
1672
+ font-weight: 400;
1673
+ margin-left: var(--su4);
1674
+ padding: var(--su2) var(--su8);
1675
+ vertical-align: text-bottom;
1676
+ }
1677
+ body.theme-highcontrast .s-label--status {
1678
+ --_b: var(--su-static1) solid currentColor;
1679
+ }
1680
+ .s-label--status.s-label--status__required {
1681
+ --_bg: var(--red-100);
1682
+ --_fc: var(--red-700);
1683
+ }
1684
+ @media (prefers-color-scheme: dark) {
1685
+ body.theme-system .s-label--status.s-label--status__required {
1686
+ --_bg: var(--red-050);
1687
+ --_fc: var(--red-800);
1688
+ }
1689
+ }
1690
+ body.theme-dark .s-label--status.s-label--status__required,
1691
+ .theme-dark__forced .s-label--status.s-label--status__required,
1692
+ body.theme-system .theme-dark__forced .s-label--status.s-label--status__required {
1693
+ --_bg: var(--red-050);
1694
+ --_fc: var(--red-800);
1695
+ }
1696
+ .s-label--status.s-label--status__new {
1697
+ --_bg: var(--green-100);
1698
+ --_fc: var(--green-700);
1699
+ }
1700
+ @media (prefers-color-scheme: dark) {
1701
+ body.theme-system .s-label--status.s-label--status__new {
1702
+ --_bg: var(--green-050);
1703
+ --_fc: var(--green-800);
1704
+ }
1705
+ }
1706
+ body.theme-dark .s-label--status.s-label--status__new,
1707
+ .theme-dark__forced .s-label--status.s-label--status__new,
1708
+ body.theme-system .theme-dark__forced .s-label--status.s-label--status__new {
1709
+ --_bg: var(--green-050);
1710
+ --_fc: var(--green-800);
1711
+ }
1712
+ .s-label--status.s-label--status__beta {
1713
+ --_bg: var(--blue-100);
1714
+ --_fc: var(--blue-700);
1715
+ }
1729
1716
  .s-menu {
1730
1717
  list-style: none;
1731
1718
  margin: 0;
@@ -2312,29 +2299,26 @@ body.theme-system .theme-dark__forced .s-popover--arrow {
2312
2299
  padding: var(--su2) var(--su4);
2313
2300
  }
2314
2301
  .s-post-summary--stats .s-post-summary--stats-item.has-answers {
2315
- color: var(--green-600);
2316
- border: 1px solid var(--green-600);
2302
+ color: var(--green-700);
2303
+ border: 1px solid var(--green-700);
2317
2304
  }
2318
2305
  .s-post-summary--stats .s-post-summary--stats-item.has-answers.has-accepted-answer {
2319
- color: hsl(0, 0%, 100%);
2320
- background-color: var(--green-500);
2321
- border-color: var(--green-500);
2322
- }
2323
- body.theme-highcontrast .s-post-summary--stats .s-post-summary--stats-item.has-answers.has-accepted-answer {
2324
2306
  color: var(--white);
2307
+ background-color: var(--green-700);
2308
+ border-color: var(--green-700);
2325
2309
  }
2326
2310
  .s-post-summary--stats .s-post-summary--stats-item.has-bounty {
2327
2311
  color: var(--white);
2328
2312
  background-color: var(--blue-600);
2329
2313
  }
2330
2314
  .s-post-summary--stats .s-post-summary--stats-item.is-warm {
2331
- color: var(--orange-800);
2315
+ color: var(--yellow-800);
2332
2316
  }
2333
2317
  .s-post-summary--stats .s-post-summary--stats-item.is-hot {
2334
- color: var(--orange-600);
2318
+ color: var(--orange-800);
2335
2319
  }
2336
2320
  .s-post-summary--stats .s-post-summary--stats-item.is-supernova {
2337
- color: var(--orange-400);
2321
+ color: var(--red-800);
2338
2322
  }
2339
2323
  .s-post-summary--stats .s-post-summary--stats-item.is-published {
2340
2324
  color: var(--black-800);
@@ -2384,7 +2368,6 @@ body.theme-highcontrast .s-post-summary--stats .s-post-summary--stats-item.has-a
2384
2368
  line-height: var(--lh-md);
2385
2369
  font-weight: normal;
2386
2370
  word-break: break-word !important;
2387
- word-wrap: break-word !important;
2388
2371
  overflow-wrap: break-word !important;
2389
2372
  -webkit-hyphens: auto !important;
2390
2373
  -moz-hyphens: auto !important;
@@ -2401,7 +2384,6 @@ body.theme-highcontrast .s-post-summary--stats .s-post-summary--stats-item.has-a
2401
2384
  }
2402
2385
  .s-post-summary--content .s-post-summary--content-title a {
2403
2386
  word-break: break-word !important;
2404
- word-wrap: break-word !important;
2405
2387
  overflow-wrap: break-word !important;
2406
2388
  -webkit-hyphens: auto !important;
2407
2389
  -moz-hyphens: auto !important;
@@ -2435,7 +2417,6 @@ body.theme-highcontrast .s-post-summary--stats .s-post-summary--stats-item.has-a
2435
2417
  -webkit-box-orient: vertical;
2436
2418
  overflow: hidden;
2437
2419
  word-break: break-word !important;
2438
- word-wrap: break-word !important;
2439
2420
  overflow-wrap: break-word !important;
2440
2421
  -webkit-hyphens: auto !important;
2441
2422
  -moz-hyphens: auto !important;
@@ -2517,35 +2498,72 @@ body.theme-highcontrast .s-post-summary--answer:before {
2517
2498
  .s-post-summary__watched {
2518
2499
  background-color: var(--yellow-050);
2519
2500
  }
2501
+ .s-post-summary__watched .s-post-summary--stats {
2502
+ color: var(--black-500);
2503
+ }
2504
+ .s-post-summary__watched .s-user-card .s-user-card--rep,
2505
+ .s-post-summary__watched .s-user-card .s-user-card--time {
2506
+ color: var(--black-600);
2507
+ }
2520
2508
  .s-post-summary__deleted {
2521
- background-color: var(--red-050);
2509
+ background-color: var(--red-025);
2510
+ }
2511
+ .s-post-summary__deleted .s-badge__filled {
2512
+ color: var(--white);
2513
+ }
2514
+ @media (prefers-color-scheme: dark) {
2515
+ body.theme-system .s-post-summary__deleted .s-badge__filled {
2516
+ background-color: var(--red-800);
2517
+ }
2518
+ }
2519
+ body.theme-dark .s-post-summary__deleted .s-badge__filled,
2520
+ .theme-dark__forced .s-post-summary__deleted .s-badge__filled,
2521
+ body.theme-system .theme-dark__forced .s-post-summary__deleted .s-badge__filled {
2522
+ background-color: var(--red-800);
2522
2523
  }
2523
2524
  .s-post-summary__deleted .is-deleted {
2524
- color: hsl(0, 0%, 100%);
2525
- background-color: var(--red-500);
2525
+ color: var(--white);
2526
+ background-color: var(--red-600);
2526
2527
  }
2527
- .s-post-summary__ignored .s-post-summary--content > *:not(.s-post-summary--content-menu-button):not(.s-post-summary--meta),
2528
- .s-post-summary__deleted .s-post-summary--content > *:not(.s-post-summary--content-menu-button):not(.s-post-summary--meta) {
2529
- opacity: 0.6;
2528
+ .s-post-summary__deleted .s-post-summary--meta-tags > .s-tag,
2529
+ .s-post-summary__deleted .s-post-summary--meta-tags > .s-tag:hover,
2530
+ .s-post-summary__deleted .s-post-summary--meta-tags > .s-tag:active,
2531
+ .s-post-summary__deleted .s-post-summary--meta-tags > .s-tag:focus {
2532
+ background-color: var(--black-075);
2530
2533
  }
2531
- .s-post-summary__ignored .s-post-summary--stats-item:not(.s-badge):not(.is-deleted),
2532
- .s-post-summary__deleted .s-post-summary--stats-item:not(.s-badge):not(.is-deleted) {
2533
- opacity: 0.6;
2534
- filter: grayscale(100%);
2534
+ .s-post-summary__ignored .s-post-summary--stats {
2535
+ color: var(--black-500);
2535
2536
  }
2536
- .s-post-summary__ignored .s-post-summary--content-title a,
2537
- .s-post-summary__deleted .s-post-summary--content-title a {
2537
+ .s-post-summary__ignored .s-post-summary--stats .s-post-summary--stats-item.has-answers {
2538
2538
  color: var(--black-600);
2539
+ border: 1px solid var(--black-075);
2540
+ background-color: var(--black-075);
2539
2541
  }
2540
- .s-post-summary__ignored .s-post-summary--content-title a:hover,
2541
- .s-post-summary__deleted .s-post-summary--content-title a:hover,
2542
- .s-post-summary__ignored .s-post-summary--content-title a:active,
2543
- .s-post-summary__deleted .s-post-summary--content-title a:active {
2542
+ .s-post-summary__ignored .s-post-summary--stats .s-post-summary--stats-item.has-answers .has-accepted-answer {
2543
+ color: var(--black-600);
2544
+ background-color: var(--black-075);
2545
+ border-color: var(--black-075);
2546
+ }
2547
+ .s-post-summary__ignored .s-post-summary--stats .s-post-summary--stats-item__emphasized {
2544
2548
  color: var(--black-500);
2545
2549
  }
2546
- .s-post-summary__ignored .s-post-summary--content-title a:visited,
2547
- .s-post-summary__deleted .s-post-summary--content-title a:visited {
2548
- color: var(--black-700);
2550
+ .s-post-summary__ignored .s-post-summary--meta-tags > .s-tag,
2551
+ .s-post-summary__ignored .s-post-summary--meta-tags > .s-tag:hover,
2552
+ .s-post-summary__ignored .s-post-summary--meta-tags > .s-tag:active,
2553
+ .s-post-summary__ignored .s-post-summary--meta-tags > .s-tag:focus {
2554
+ background-color: var(--black-050);
2555
+ }
2556
+ .s-post-summary__ignored .s-post-summary--content-title > a,
2557
+ .s-post-summary__deleted .s-post-summary--content-title > a {
2558
+ color: var(--black-500);
2559
+ }
2560
+ .s-post-summary__ignored .s-post-summary--content-title > a:hover,
2561
+ .s-post-summary__deleted .s-post-summary--content-title > a:hover,
2562
+ .s-post-summary__ignored .s-post-summary--content-title > a:active,
2563
+ .s-post-summary__deleted .s-post-summary--content-title > a:active,
2564
+ .s-post-summary__ignored .s-post-summary--content-title > a:visited,
2565
+ .s-post-summary__deleted .s-post-summary--content-title > a:visited {
2566
+ color: var(--black-500);
2549
2567
  }
2550
2568
  .s-post-summary__ignored .s-post-summary--content-excerpt,
2551
2569
  .s-post-summary__deleted .s-post-summary--content-excerpt {
@@ -2553,13 +2571,27 @@ body.theme-highcontrast .s-post-summary--answer:before {
2553
2571
  }
2554
2572
  .s-post-summary__ignored .s-post-summary--meta > *:not(.s-post-summary--meta-tags),
2555
2573
  .s-post-summary__deleted .s-post-summary--meta > *:not(.s-post-summary--meta-tags) {
2556
- opacity: 0.6;
2557
- filter: grayscale(100%);
2574
+ color: var(--black-600);
2558
2575
  }
2559
- .s-post-summary__ignored .s-post-summary--meta-tags > a,
2560
- .s-post-summary__deleted .s-post-summary--meta-tags > a {
2561
- opacity: 0.6;
2562
- filter: grayscale(100%);
2576
+ .s-post-summary__ignored .s-post-summary--meta-tags > .s-tag,
2577
+ .s-post-summary__deleted .s-post-summary--meta-tags > .s-tag,
2578
+ .s-post-summary__ignored .s-post-summary--meta-tags > .s-tag:hover,
2579
+ .s-post-summary__deleted .s-post-summary--meta-tags > .s-tag:hover,
2580
+ .s-post-summary__ignored .s-post-summary--meta-tags > .s-tag:active,
2581
+ .s-post-summary__deleted .s-post-summary--meta-tags > .s-tag:active,
2582
+ .s-post-summary__ignored .s-post-summary--meta-tags > .s-tag:focus,
2583
+ .s-post-summary__deleted .s-post-summary--meta-tags > .s-tag:focus {
2584
+ color: var(--black-600);
2585
+ }
2586
+ .s-post-summary__ignored .s-user-card .s-user-card--link,
2587
+ .s-post-summary__deleted .s-user-card .s-user-card--link {
2588
+ color: var(--black-500);
2589
+ }
2590
+ .s-post-summary__ignored .s-user-card .s-user-card--rep,
2591
+ .s-post-summary__deleted .s-user-card .s-user-card--rep,
2592
+ .s-post-summary__ignored .s-user-card .s-user-card--time,
2593
+ .s-post-summary__deleted .s-user-card .s-user-card--time {
2594
+ color: var(--black-500);
2563
2595
  }
2564
2596
  .s-progress,
2565
2597
  .s-progress--bar {
@@ -2699,7 +2731,7 @@ body.theme-highcontrast .s-progress__privilege .s-progress--bar {
2699
2731
  border-radius: 0;
2700
2732
  padding: var(--su12) var(--su6) 0 var(--su6);
2701
2733
  text-align: center;
2702
- color: var(--black-300);
2734
+ color: var(--black-500);
2703
2735
  z-index: var(--zi-base);
2704
2736
  }
2705
2737
  .s-progress.s-progress__stepped .s-progress--stop {
@@ -2791,13 +2823,13 @@ body.theme-highcontrast .s-progress.s-progress__stepped .s-progress--stop {
2791
2823
  --s-prose-spacing-condensed: calc(var(--s-prose-spacing) / 2);
2792
2824
  font-size: 15px;
2793
2825
  line-height: var(--s-prose-line-height);
2794
- word-wrap: break-word;
2826
+ overflow-wrap: break-word;
2795
2827
  }
2796
2828
  .s-prose p {
2797
2829
  margin-bottom: var(--s-prose-spacing);
2798
2830
  }
2799
2831
  .s-prose pre {
2800
- word-wrap: normal;
2832
+ overflow-wrap: normal;
2801
2833
  }
2802
2834
  .s-prose code {
2803
2835
  font-size: var(--fs-body1);
@@ -2819,10 +2851,10 @@ body.theme-highcontrast .s-prose hr {
2819
2851
  background-color: var(--black-500);
2820
2852
  }
2821
2853
  .s-prose li {
2822
- word-wrap: break-word;
2854
+ overflow-wrap: break-word;
2823
2855
  }
2824
2856
  .s-prose li pre {
2825
- word-wrap: normal;
2857
+ overflow-wrap: normal;
2826
2858
  }
2827
2859
  .s-prose p:last-child,
2828
2860
  .s-prose dl:last-child,
@@ -3347,6 +3379,39 @@ body.theme-system .theme-dark__forced .s-prose kbd {
3347
3379
  }
3348
3380
  }
3349
3381
  }
3382
+ .is-loading {
3383
+ position: relative;
3384
+ padding-left: 2.2em;
3385
+ }
3386
+ .is-loading:before {
3387
+ content: "";
3388
+ position: absolute;
3389
+ opacity: 0.3;
3390
+ left: 0.6em;
3391
+ top: calc(50% - 0.6em);
3392
+ width: 1.23076923em;
3393
+ height: 1.23076923em;
3394
+ border-width: 2px;
3395
+ border-style: solid;
3396
+ border-color: currentColor;
3397
+ border-radius: var(--br-circle);
3398
+ }
3399
+ .is-loading:after {
3400
+ content: "";
3401
+ position: absolute;
3402
+ left: 0.6em;
3403
+ top: calc(50% - 0.6em);
3404
+ width: 1.23076923em;
3405
+ height: 1.23076923em;
3406
+ border-width: 2px;
3407
+ border-style: solid;
3408
+ border-color: transparent;
3409
+ border-left-color: currentColor;
3410
+ border-radius: var(--br-circle);
3411
+ animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
3412
+ filter: invert(0);
3413
+ transform-origin: 50% 50% 1px;
3414
+ }
3350
3415
  @keyframes s-spinner-rotate {
3351
3416
  from {
3352
3417
  transform: rotate(0deg);
@@ -3541,11 +3606,7 @@ body.theme-system .theme-dark__forced .s-prose kbd {
3541
3606
  }
3542
3607
  .s-table tr.is-disabled th:not(.is-enabled),
3543
3608
  .s-table tr.is-disabled td:not(.is-enabled) {
3544
- opacity: 0.3;
3545
- }
3546
- body.theme-highcontrast .s-table tr.is-disabled th:not(.is-enabled),
3547
- body.theme-highcontrast .s-table tr.is-disabled td:not(.is-enabled) {
3548
- opacity: 0.8;
3609
+ opacity: calc(var(--_o-disabled) * 0.6);
3549
3610
  }
3550
3611
  .s-table--cell1 {
3551
3612
  width: 8.33333333%;
@@ -4021,84 +4082,77 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
4021
4082
  }
4022
4083
  }
4023
4084
  .s-uploader {
4024
- align-items: center;
4025
- background-color: var(--black-025);
4026
- border-radius: var(--br-lg);
4027
- display: flex;
4028
- min-height: var(--su-static128);
4029
- justify-content: center;
4030
- padding: var(--su8) var(--su16);
4085
+ --_bg: var(--black-025);
4086
+ --_bg-focus: var(--black-050);
4087
+ --_bg-bc: var(--black-150);
4088
+ --_focus-ring-color: var(--focus-ring);
4089
+ --_bg-b-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23000000' stroke-width='8' stroke-dasharray='7%2c 22' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
4031
4090
  position: relative;
4032
- text-align: center;
4033
4091
  }
4034
- .s-uploader:before {
4035
- --s-uploader-background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23000000' stroke-width='8' stroke-dasharray='7%2c 22' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
4036
- content: '';
4037
- display: block;
4038
- position: absolute;
4039
- top: 0;
4040
- left: 0;
4041
- right: 0;
4042
- bottom: 0;
4043
- background-color: var(--black-150);
4044
- -webkit-mask-image: var(--s-uploader-background-image);
4045
- mask-image: var(--s-uploader-background-image);
4046
- border-radius: var(--br-lg);
4047
- }
4048
- body.theme-highcontrast .s-uploader:before {
4049
- background-color: var(--black-400);
4092
+ body.theme-highcontrast .s-uploader {
4093
+ --_bg-bc-hc: var(--black-400);
4050
4094
  }
4051
- .s-uploader.has-error {
4052
- background-color: var(--red-050);
4053
- }
4054
- .s-uploader.has-error:before {
4055
- background-color: var(--red-400);
4095
+ .s-uploader.is-active {
4096
+ --_bg: var(--black-050);
4097
+ --_bg-bc: var(--black-200);
4056
4098
  }
4057
- body.theme-highcontrast .s-uploader.has-error:before {
4058
- background-color: var(--red-400);
4099
+ .s-uploader.is-disabled {
4100
+ opacity: var(--_o-disabled-static);
4059
4101
  }
4060
- .s-uploader.has-error .s-link {
4061
- color: var(--red-900);
4102
+ .s-uploader.has-error {
4103
+ --_bg: var(--red-050);
4104
+ --_bg-focus: var(--red-100);
4105
+ --_bg-bc: var(--red-400);
4106
+ --_bg-bc-hc-state: var(--red-400);
4107
+ --_focus-ring-color: var(--focus-ring-error);
4108
+ --_link-fc: var(--red-900);
4062
4109
  }
4063
4110
  .s-uploader.has-success {
4064
- background-color: var(--green-025);
4065
- }
4066
- .s-uploader.has-success:before {
4067
- background-color: var(--green-400);
4068
- }
4069
- body.theme-highcontrast .s-uploader.has-success:before {
4070
- background-color: var(--green-400);
4071
- }
4072
- .s-uploader.has-success .s-link {
4073
- color: var(--green-900);
4111
+ --_bg: var(--green-025);
4112
+ --_bg-focus: var(--green-050);
4113
+ --_bg-bc: var(--green-400);
4114
+ --_bg-bc-hc-state: var(--green-400);
4115
+ --_focus-ring-color: var(--focus-ring-success);
4116
+ --_link-fc: var(--green-900);
4074
4117
  }
4075
4118
  .s-uploader.has-warning {
4076
- background-color: var(--yellow-050);
4077
- }
4078
- .s-uploader.has-warning:before {
4079
- background-color: var(--yellow-400);
4080
- }
4081
- body.theme-highcontrast .s-uploader.has-warning:before {
4082
- background-color: var(--yellow-400);
4083
- }
4119
+ --_bg: var(--yellow-050);
4120
+ --_bg-focus: var(--yellow-100);
4121
+ --_bg-bc: var(--yellow-400);
4122
+ --_bg-bc-hc-state: var(--yellow-400);
4123
+ --_focus-ring-color: var(--focus-ring-warning);
4124
+ --_link-fc: var(--yellow-900);
4125
+ }
4126
+ .s-uploader.has-error .s-link,
4127
+ .s-uploader.has-success .s-link,
4084
4128
  .s-uploader.has-warning .s-link {
4085
- color: var(--yellow-900);
4086
- }
4087
- .s-uploader.is-active {
4088
- background-color: var(--black-050);
4089
- }
4090
- .s-uploader.is-active:before {
4091
- background-color: var(--black-200);
4092
- }
4093
- body.theme-highcontrast .s-uploader.is-active:before {
4094
- background-color: var(--black);
4095
- }
4096
- .s-uploader.is-disabled {
4097
- opacity: 0.5;
4129
+ color: var(--_link-fc);
4098
4130
  }
4099
4131
  .s-uploader input[type="file"]::file-selector-button {
4100
4132
  cursor: pointer;
4101
4133
  }
4134
+ .s-uploader .s-uploader--container {
4135
+ align-items: center;
4136
+ background-color: var(--_bg);
4137
+ border-radius: var(--br-lg);
4138
+ display: flex;
4139
+ flex-direction: column;
4140
+ justify-content: center;
4141
+ min-height: var(--su-static128);
4142
+ padding: var(--su8) var(--su16);
4143
+ position: relative;
4144
+ text-align: center;
4145
+ }
4146
+ .s-uploader .s-uploader--container:before {
4147
+ -webkit-mask-image: var(--_bg-b-image);
4148
+ mask-image: var(--_bg-b-image);
4149
+ background-color: var(--_bg-bc-hc-state, var(--_bg-bc-hc, var(--_bg-bc)));
4150
+ content: '';
4151
+ border-radius: var(--br-lg);
4152
+ display: block;
4153
+ position: absolute;
4154
+ inset: 0;
4155
+ }
4102
4156
  .s-uploader .s-uploader--input {
4103
4157
  cursor: pointer;
4104
4158
  height: 100%;
@@ -4106,10 +4160,11 @@ body.theme-highcontrast .s-uploader.is-active:before {
4106
4160
  opacity: 0;
4107
4161
  position: absolute;
4108
4162
  width: 100%;
4163
+ z-index: var(--zi-selected);
4109
4164
  }
4110
4165
  .s-uploader .s-uploader--input:focus:focus-visible + .s-uploader--container {
4111
- background-color: var(--black-050);
4112
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
4166
+ background-color: var(--_bg-focus);
4167
+ box-shadow: 0 0 0 var(--su-static4) var(--_focus-ring-color);
4113
4168
  }
4114
4169
  .s-uploader .s-uploader--preview {
4115
4170
  max-width: 100%;
@@ -4170,8 +4225,7 @@ body.theme-highcontrast .s-uploader .s-uploader--preview-thumbnail {
4170
4225
  object-fit: cover;
4171
4226
  }
4172
4227
  .s-uploader .s-uploader--previews.has-multiple .s-uploader--preview-thumbnail:not(img) {
4173
- --s-uploader--preview-document-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='%23535A60' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3 3a2 2 0 012-2h6l4 4v10a2 2 0 01-2 2H5a2 2 0 01-2-2V3zm7-1.5V6h4.5L10 1.5z'%3E%3C/path%3E%3C/svg%3E");
4174
- background-image: var(--s-uploader--preview-document-icon);
4228
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='%23535A60' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3 3a2 2 0 012-2h6l4 4v10a2 2 0 01-2 2H5a2 2 0 01-2-2V3zm7-1.5V6h4.5L10 1.5z'%3E%3C/path%3E%3C/svg%3E");
4175
4229
  background-position: center;
4176
4230
  background-repeat: no-repeat;
4177
4231
  }
@@ -4865,6 +4919,7 @@ body.theme-system .theme-light__forced {
4865
4919
  --yellow-700: hsl(47, 79%, 40%);
4866
4920
  --yellow-800: hsl(47, 82%, 34%);
4867
4921
  --yellow-900: hsl(47, 84%, 28%);
4922
+ --red-025: hsl(358, 80%, 98%);
4868
4923
  --red-050: hsl(358, 75%, 97%);
4869
4924
  --red-100: hsl(358, 76%, 90%);
4870
4925
  --red-200: hsl(358, 74%, 83%);
@@ -4897,6 +4952,8 @@ body.theme-system .theme-light__forced {
4897
4952
  --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
4898
4953
  --focus-ring-error: hsla(358, 62%, 47%, 0.15);
4899
4954
  --focus-ring-muted: hsla(210, 8%, 15%, 0.1);
4955
+ --_o-disabled: 0.5;
4956
+ --_o-disabled-static: 0.5;
4900
4957
  --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.05), 0 2px 8px hsla(0, 0%, 0%, 0.05);
4901
4958
  --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.06), 0 2px 6px hsla(0, 0%, 0%, 0.06), 0 3px 8px hsla(0, 0%, 0%, 0.09);
4902
4959
  --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.09), 0 3px 8px hsla(0, 0%, 0%, 0.09), 0 4px 13px hsla(0, 0%, 0%, 0.13);
@@ -5036,6 +5093,7 @@ body:not(.theme-dark) .theme-dark__forced {
5036
5093
  --yellow-700: hsl(47, 84.5%, 64%);
5037
5094
  --yellow-800: hsl(47, 90%, 72.5%);
5038
5095
  --yellow-900: hsl(47, 93%, 83.5%);
5096
+ --red-025: hsl(1, 10%, 24%);
5039
5097
  --red-050: hsl(1, 30%, 26.5%);
5040
5098
  --red-100: hsl(1, 35%, 33%);
5041
5099
  --red-200: hsl(1, 37%, 38.5%);
@@ -5068,6 +5126,8 @@ body:not(.theme-dark) .theme-dark__forced {
5068
5126
  --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
5069
5127
  --focus-ring-error: hsla(358, 62%, 52%, 0.3);
5070
5128
  --focus-ring-muted: hsla(0, 0%, 100%, 0.1);
5129
+ --_o-disabled: 0.5;
5130
+ --_o-disabled-static: 0.5;
5071
5131
  --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.1), 0 2px 8px hsla(0, 0%, 0%, 0.1);
5072
5132
  --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11), 0 3px 8px hsla(0, 0%, 0%, 0.14);
5073
5133
  --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.14), 0 3px 8px hsla(0, 0%, 0%, 0.14), 0 4px 13px hsla(0, 0%, 0%, 0.18);
@@ -5205,6 +5265,7 @@ body:not(.theme-dark) .theme-dark__forced .themed {
5205
5265
  --yellow-700: hsl(47, 84.5%, 64%);
5206
5266
  --yellow-800: hsl(47, 90%, 72.5%);
5207
5267
  --yellow-900: hsl(47, 93%, 83.5%);
5268
+ --red-025: hsl(1, 10%, 24%);
5208
5269
  --red-050: hsl(1, 30%, 26.5%);
5209
5270
  --red-100: hsl(1, 35%, 33%);
5210
5271
  --red-200: hsl(1, 37%, 38.5%);
@@ -5237,6 +5298,8 @@ body:not(.theme-dark) .theme-dark__forced .themed {
5237
5298
  --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
5238
5299
  --focus-ring-error: hsla(358, 62%, 52%, 0.3);
5239
5300
  --focus-ring-muted: hsla(0, 0%, 100%, 0.1);
5301
+ --_o-disabled: 0.5;
5302
+ --_o-disabled-static: 0.5;
5240
5303
  --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.1), 0 2px 8px hsla(0, 0%, 0%, 0.1);
5241
5304
  --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11), 0 3px 8px hsla(0, 0%, 0%, 0.14);
5242
5305
  --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.14), 0 3px 8px hsla(0, 0%, 0%, 0.14), 0 4px 13px hsla(0, 0%, 0%, 0.18);
@@ -5374,6 +5437,7 @@ body.theme-system.theme-highcontrast .theme-light__forced {
5374
5437
  --yellow-700: hsl(47, 100%, 19%);
5375
5438
  --yellow-800: hsl(47, 100%, 13%);
5376
5439
  --yellow-900: hsl(47, 100%, 7%);
5440
+ --red-025: hsl(358, 100%, 97%);
5377
5441
  --red-050: hsl(358, 100%, 94%);
5378
5442
  --red-100: hsl(358, 100%, 92%);
5379
5443
  --red-200: hsl(358, 100%, 89%);
@@ -5407,6 +5471,7 @@ body.theme-system.theme-highcontrast .theme-light__forced {
5407
5471
  --focus-ring-warning: hsla(47, 76%, 46%, 0.9);
5408
5472
  --focus-ring-error: hsla(358, 62%, 47%, 0.9);
5409
5473
  --focus-ring-muted: hsla(210, 8%, 55%, 0.95);
5474
+ --_o-disabled: 0.8;
5410
5475
  --bs-sm: none;
5411
5476
  --bs-md: none;
5412
5477
  --bs-lg: none;
@@ -5495,6 +5560,7 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
5495
5560
  --yellow-700: hsl(47, 100%, 79%);
5496
5561
  --yellow-800: hsl(47, 100%, 87%);
5497
5562
  --yellow-900: hsl(47, 100%, 95%);
5563
+ --red-025: hsl(358, 100%, 7%);
5498
5564
  --red-050: hsl(358, 100%, 9%);
5499
5565
  --red-100: hsl(358, 100%, 12%);
5500
5566
  --red-200: hsl(358, 100%, 17%);
@@ -5528,6 +5594,7 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
5528
5594
  --fc-dark: var(--black-900);
5529
5595
  --fc-medium: var(--black-700);
5530
5596
  --fc-light: var(--black-500);
5597
+ --_o-disabled: 0.8;
5531
5598
  --bs-sm: none;
5532
5599
  --bs-md: none;
5533
5600
  --bs-lg: none;
@@ -5616,6 +5683,7 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
5616
5683
  --yellow-700: hsl(47, 100%, 79%);
5617
5684
  --yellow-800: hsl(47, 100%, 87%);
5618
5685
  --yellow-900: hsl(47, 100%, 95%);
5686
+ --red-025: hsl(358, 100%, 7%);
5619
5687
  --red-050: hsl(358, 100%, 9%);
5620
5688
  --red-100: hsl(358, 100%, 12%);
5621
5689
  --red-200: hsl(358, 100%, 17%);
@@ -5649,6 +5717,7 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
5649
5717
  --fc-dark: var(--black-900);
5650
5718
  --fc-medium: var(--black-700);
5651
5719
  --fc-light: var(--black-500);
5720
+ --_o-disabled: 0.8;
5652
5721
  --bs-sm: none;
5653
5722
  --bs-md: none;
5654
5723
  --bs-lg: none;
@@ -6175,6 +6244,9 @@ body.theme-highcontrast .bc-black-200 {
6175
6244
  .bc-green-900 {
6176
6245
  border-color: var(--green-900) !important;
6177
6246
  }
6247
+ .bc-red-025 {
6248
+ border-color: var(--red-025) !important;
6249
+ }
6178
6250
  .bc-red-050 {
6179
6251
  border-color: var(--red-050) !important;
6180
6252
  }
@@ -9487,6 +9559,38 @@ body.theme-dark .d\:bg-green-025,
9487
9559
  body.theme-system .theme-dark__forced .d\:bg-green-025 {
9488
9560
  background-color: var(--green-025) !important;
9489
9561
  }
9562
+ .fc-red-025,
9563
+ .h\:fc-red-025:hover,
9564
+ .f\:fc-red-025:focus,
9565
+ .f\:fc-red-025:focus-within {
9566
+ color: var(--red-025) !important;
9567
+ }
9568
+ @media (prefers-color-scheme: dark) {
9569
+ body.theme-system .d\:fc-red-025 {
9570
+ color: var(--red-025) !important;
9571
+ }
9572
+ }
9573
+ body.theme-dark .d\:fc-red-025,
9574
+ .theme-dark__forced .d\:fc-red-025,
9575
+ body.theme-system .theme-dark__forced .d\:fc-red-025 {
9576
+ color: var(--red-025) !important;
9577
+ }
9578
+ .bg-red-025,
9579
+ .h\:bg-red-025:hover,
9580
+ .f\:bg-red-025:focus,
9581
+ .f\:bg-red-025:focus-within {
9582
+ background-color: var(--red-025) !important;
9583
+ }
9584
+ @media (prefers-color-scheme: dark) {
9585
+ body.theme-system .d\:bg-red-025 {
9586
+ background-color: var(--red-025) !important;
9587
+ }
9588
+ }
9589
+ body.theme-dark .d\:bg-red-025,
9590
+ .theme-dark__forced .d\:bg-red-025,
9591
+ body.theme-system .theme-dark__forced .d\:bg-red-025 {
9592
+ background-color: var(--red-025) !important;
9593
+ }
9490
9594
  .fc-theme-primary-350,
9491
9595
  .h\:fc-theme-primary-350:hover,
9492
9596
  .f\:fc-theme-primary-350:focus,
@@ -13214,23 +13318,18 @@ p {
13214
13318
  }
13215
13319
  .ow-normal {
13216
13320
  overflow-wrap: normal !important;
13217
- word-wrap: normal !important;
13218
13321
  }
13219
13322
  .ow-break-word {
13220
13323
  overflow-wrap: break-word !important;
13221
- word-wrap: break-word !important;
13222
13324
  }
13223
13325
  .ow-inherit {
13224
13326
  overflow-wrap: inherit !important;
13225
- word-wrap: inherit !important;
13226
13327
  }
13227
13328
  .ow-initial {
13228
13329
  overflow-wrap: initial !important;
13229
- word-wrap: initial !important;
13230
13330
  }
13231
13331
  .ow-unset {
13232
13332
  overflow-wrap: unset !important;
13233
- word-wrap: unset !important;
13234
13333
  }
13235
13334
  .hyphens-none {
13236
13335
  hyphens: none !important;
@@ -13245,7 +13344,6 @@ p {
13245
13344
  }
13246
13345
  .break-word {
13247
13346
  word-break: break-word !important;
13248
- word-wrap: break-word !important;
13249
13347
  overflow-wrap: break-word !important;
13250
13348
  -webkit-hyphens: auto !important;
13251
13349
  -moz-hyphens: auto !important;
@@ -13486,7 +13584,7 @@ ol {
13486
13584
  padding: 0;
13487
13585
  position: absolute;
13488
13586
  width: 1px;
13489
- word-wrap: normal;
13587
+ overflow-wrap: normal;
13490
13588
  }
13491
13589
  .float-left {
13492
13590
  float: left !important;
@@ -19126,51 +19224,6 @@ body *:before,
19126
19224
  body *:after {
19127
19225
  box-sizing: inherit;
19128
19226
  }
19129
- .s-banner__body-pt {
19130
- padding-top: 93px;
19131
- }
19132
- .s-banner {
19133
- position: fixed;
19134
- z-index: calc(var(--zi-navigation-fixed) - 1);
19135
- top: 0;
19136
- right: 0;
19137
- left: 0;
19138
- width: 100%;
19139
- padding: var(--su12);
19140
- border-top: 1px solid transparent;
19141
- border-bottom: 1px solid transparent;
19142
- border-radius: 0;
19143
- box-shadow: none;
19144
- color: var(--fc-medium);
19145
- font-size: var(--fs-body1);
19146
- }
19147
- .s-banner[aria-hidden="true"] {
19148
- visibility: hidden;
19149
- opacity: 0;
19150
- -webkit-transform: translate3d(0, -50px, 0);
19151
- transform: translate3d(0, -50px, 0);
19152
- }
19153
- .s-banner[aria-hidden="false"] {
19154
- visibility: visible;
19155
- opacity: 1;
19156
- -webkit-transform: translate3d(0, 49px, 0);
19157
- transform: translate3d(0, 49px, 0);
19158
- }
19159
- .s-banner.is-pinned {
19160
- z-index: calc(var(--zi-navigation-fixed) + 1);
19161
- -webkit-transform: translate3d(0, 0, 0);
19162
- transform: translate3d(0, 0, 0);
19163
- }
19164
- .s-banner.s-banner__important {
19165
- border-color: transparent;
19166
- color: var(--white);
19167
- }
19168
- .s-banner--container {
19169
- position: relative;
19170
- width: 100%;
19171
- max-width: calc(var(--s-step) * 10);
19172
- margin: 0 auto;
19173
- }
19174
19227
  .s-btn {
19175
19228
  position: relative;
19176
19229
  display: inline-block;
@@ -19218,7 +19271,7 @@ button[type="reset"] .s-btn {
19218
19271
  box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
19219
19272
  }
19220
19273
  .s-btn[disabled] {
19221
- opacity: 0.5;
19274
+ opacity: var(--_o-disabled-static);
19222
19275
  pointer-events: none;
19223
19276
  box-shadow: none !important;
19224
19277
  }
@@ -19282,7 +19335,7 @@ button[type="reset"] .s-btn {
19282
19335
  border-bottom-width: 0;
19283
19336
  }
19284
19337
  .s-btn .s-btn--badge {
19285
- opacity: 0.5;
19338
+ opacity: var(--_o-disabled);
19286
19339
  display: inline-block;
19287
19340
  border-radius: var(--br-sm);
19288
19341
  padding: var(--su2) calc(var(--su4) - var(--su1));
@@ -19290,9 +19343,6 @@ button[type="reset"] .s-btn {
19290
19343
  line-height: var(--lh-xs);
19291
19344
  background-color: currentColor;
19292
19345
  }
19293
- body.theme-highcontrast .s-btn .s-btn--badge {
19294
- opacity: 0.8;
19295
- }
19296
19346
  .s-btn .s-btn--number {
19297
19347
  color: var(--white);
19298
19348
  }
@@ -19772,38 +19822,6 @@ body.theme-highcontrast .s-btn__link {
19772
19822
  margin-bottom: -0.3em;
19773
19823
  transition: opacity 200ms var(--te-smooth);
19774
19824
  }
19775
- .s-btn.is-loading {
19776
- padding-left: 2.2em;
19777
- }
19778
- .s-btn.is-loading:before {
19779
- content: "";
19780
- position: absolute;
19781
- opacity: 0.3;
19782
- left: 0.6em;
19783
- top: calc(50% - 0.6em);
19784
- width: 1.23076923em;
19785
- height: 1.23076923em;
19786
- border-width: 2px;
19787
- border-style: solid;
19788
- border-color: currentColor;
19789
- border-radius: var(--br-circle);
19790
- }
19791
- .s-btn.is-loading:after {
19792
- content: "";
19793
- position: absolute;
19794
- left: 0.6em;
19795
- top: calc(50% - 0.6em);
19796
- width: 1.23076923em;
19797
- height: 1.23076923em;
19798
- border-width: 2px;
19799
- border-style: solid;
19800
- border-color: transparent;
19801
- border-left-color: currentColor;
19802
- border-radius: var(--br-circle);
19803
- animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
19804
- filter: invert(0);
19805
- transform-origin: 50% 50% 1px;
19806
- }
19807
19825
  .s-btn.is-loading .svg-icon:first-child {
19808
19826
  margin-left: -23px;
19809
19827
  opacity: 0;
@@ -20125,6 +20143,7 @@ button.s-link:focus {
20125
20143
  box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
20126
20144
  }
20127
20145
  .s-block-link.is-selected {
20146
+ --_block-bs: inset var(--_block-bs-offset-x, 3px) 0 0 var(--theme-primary-color);
20128
20147
  color: var(--black-800);
20129
20148
  font-weight: bold;
20130
20149
  background-color: var(--black-050);
@@ -20140,10 +20159,21 @@ body.theme-system .theme-dark__forced .s-block-link.is-selected {
20140
20159
  background-color: var(--black-025);
20141
20160
  }
20142
20161
  .s-block-link.is-selected.s-block-link__right {
20143
- box-shadow: inset -3px 0 0 var(--theme-primary-color);
20162
+ --_block-bs-offset-x: -3px;
20163
+ }
20164
+ .s-block-link.is-selected.s-block-link__left,
20165
+ .s-block-link.is-selected.s-block-link__right {
20166
+ box-shadow: var(--_block-bs);
20167
+ }
20168
+ .s-block-link.is-selected.s-block-link__left:focus:not(:focus-visible),
20169
+ .s-block-link.is-selected.s-block-link__right:focus:not(:focus-visible),
20170
+ .s-block-link.is-selected.s-block-link__left:focus-visible,
20171
+ .s-block-link.is-selected.s-block-link__right:focus-visible {
20172
+ outline: none;
20144
20173
  }
20145
- .s-block-link.is-selected.s-block-link__left {
20146
- box-shadow: inset 3px 0 0 var(--theme-primary-color);
20174
+ .s-block-link.is-selected.s-block-link__left:focus-visible,
20175
+ .s-block-link.is-selected.s-block-link__right:focus-visible {
20176
+ box-shadow: var(--_block-bs), 0 0 0 var(--su-static4) var(--focus-ring-muted);
20147
20177
  }
20148
20178
  .s-block-link.s-block-link__danger {
20149
20179
  color: var(--red-500);
@@ -20271,188 +20301,439 @@ body.theme-highcontrast a.s-link-preview--title.s-link__visited:active {
20271
20301
  .s-link-preview--footer a:focus {
20272
20302
  color: var(--black-600);
20273
20303
  }
20274
- .s-notice {
20275
- padding: var(--su16);
20276
- border: 1px solid transparent;
20277
- border-radius: var(--br-sm);
20278
- color: var(--fc-medium);
20304
+ .s-banner {
20305
+ background: var(--_bg, var(--black-050));
20306
+ border-color: var(--_bc, var(--bc-medium));
20307
+ border-style: solid;
20308
+ color: var(--_fc, var(--fc-medium));
20279
20309
  font-size: var(--fs-body1);
20280
- }
20281
- .s-toast .s-notice {
20282
- max-width: 44rem;
20310
+ --_x-offset: 0;
20311
+ border-width: var(--su-static1) 0;
20312
+ inset: 0 0 auto 0;
20313
+ padding: var(--su12);
20314
+ position: fixed;
20283
20315
  width: 100%;
20284
- padding-top: var(--su8);
20285
- padding-bottom: var(--su8);
20286
- box-shadow: var(--bs-sm);
20287
- pointer-events: all;
20316
+ z-index: calc(var(--zi-navigation-fixed) - 1);
20317
+ -webkit-transform: translate3d(0, var(--_x-offset), 0);
20318
+ transform: translate3d(0, var(--_x-offset), 0);
20288
20319
  }
20289
- .s-notice .s-notice--btn {
20290
- color: var(--fc-dark);
20320
+ .s-banner code {
20321
+ background: var(--_code-bg, transparent);
20322
+ }
20323
+ .s-banner .s-banner--btn {
20324
+ color: inherit;
20291
20325
  padding: var(--su8);
20292
20326
  }
20293
- .s-notice__info,
20327
+ .s-banner .s-banner--btn:focus,
20328
+ .s-banner .s-banner--btn:hover {
20329
+ background: var(--_btn-focus-bg, var(--black-100));
20330
+ }
20331
+ .s-banner .s-banner--btn:active {
20332
+ background: var(--_btn-active-bg, var(--black-150));
20333
+ }
20334
+ @media (prefers-color-scheme: dark) {
20335
+ body.theme-system .s-banner:not(.s-banner__important) {
20336
+ --_bc: var(--_bg);
20337
+ }
20338
+ }
20339
+ body.theme-dark .s-banner:not(.s-banner__important),
20340
+ .theme-dark__forced .s-banner:not(.s-banner__important),
20341
+ body.theme-system .theme-dark__forced .s-banner:not(.s-banner__important) {
20342
+ --_bc: var(--_bg);
20343
+ }
20344
+ body.theme-highcontrast .s-banner:not(.s-banner__important) {
20345
+ --_bc: currentColor;
20346
+ }
20347
+ @media (prefers-color-scheme: dark) {
20348
+ body.theme-highcontrast.theme-system .s-banner:not(.s-banner__important) {
20349
+ --_bc: currentColor;
20350
+ }
20351
+ }
20352
+ body.theme-highcontrast.theme-dark .s-banner:not(.s-banner__important) {
20353
+ --_bc: currentColor;
20354
+ }
20355
+ .s-banner__important {
20356
+ --_bc: var(--_bg);
20357
+ --_bg: var(--black-700);
20358
+ --_fc: var(--white);
20359
+ --_btn-focus-bg: var(--black-800);
20360
+ --_btn-active-bg: var(--black-900);
20361
+ }
20362
+ body.theme-highcontrast .s-banner__important {
20363
+ --_bc: var(--_bg);
20364
+ }
20365
+ .s-banner__danger {
20366
+ --_bc: var(--red-200);
20367
+ --_bg: var(--red-050);
20368
+ --_btn-focus-bg: var(--red-100);
20369
+ --_btn-active-bg: var(--red-200);
20370
+ }
20371
+ body.theme-highcontrast .s-banner__danger:not(.s-banner__important) {
20372
+ --_bg: var(--red-200);
20373
+ }
20374
+ .s-banner__danger.s-banner__important {
20375
+ --_bc: var(--_bg);
20376
+ --_bg: var(--red-500);
20377
+ --_btn-focus-bg: var(--red-600);
20378
+ --_btn-active-bg: var(--red-700);
20379
+ }
20380
+ @media (prefers-color-scheme: dark) {
20381
+ body.theme-system .s-banner__danger.s-banner__important {
20382
+ --_bg: var(--red-400);
20383
+ --_fc: var(--black-900);
20384
+ }
20385
+ }
20386
+ body.theme-dark .s-banner__danger.s-banner__important,
20387
+ .theme-dark__forced .s-banner__danger.s-banner__important,
20388
+ body.theme-system .theme-dark__forced .s-banner__danger.s-banner__important {
20389
+ --_bg: var(--red-400);
20390
+ --_fc: var(--black-900);
20391
+ }
20392
+ @media (prefers-color-scheme: dark) {
20393
+ body.theme-highcontrast.theme-system .s-banner__danger.s-banner__important {
20394
+ --_bg: var(--red-500);
20395
+ --_fc: var(--white);
20396
+ }
20397
+ }
20398
+ body.theme-highcontrast.theme-dark .s-banner__danger.s-banner__important {
20399
+ --_bg: var(--red-500);
20400
+ --_fc: var(--white);
20401
+ }
20294
20402
  .s-banner__info {
20295
- border-color: var(--theme-secondary-150);
20296
- background-color: var(--theme-secondary-050);
20403
+ --_bc: var(--theme-secondary-150);
20404
+ --_bg: var(--theme-secondary-050);
20405
+ --_btn-focus-bg: var(--theme-secondary-100);
20406
+ --_btn-active-bg: var(--theme-secondary-150);
20407
+ --_code-bg: var(--theme-secondary-150);
20408
+ }
20409
+ body.theme-highcontrast .s-banner__info:not(.s-banner__important) {
20410
+ --_bg: var(--theme-secondary-100);
20411
+ }
20412
+ @media (prefers-color-scheme: dark) {
20413
+ body.theme-highcontrast.theme-system .s-banner__info:not(.s-banner__important) {
20414
+ --_bg: var(--theme-secondary-100);
20415
+ }
20416
+ }
20417
+ body.theme-highcontrast.theme-dark .s-banner__info:not(.s-banner__important) {
20418
+ --_bg: var(--theme-secondary-100);
20297
20419
  }
20298
- .s-notice__info.s-notice__important,
20299
- .s-banner__info.s-notice__important,
20300
- .s-notice__info.s-banner__important,
20301
20420
  .s-banner__info.s-banner__important {
20302
- background-color: var(--theme-secondary-400);
20421
+ --_bc: var(--_bg);
20422
+ --_bg: var(--theme-secondary-400);
20423
+ --_btn-focus-bg: var(--theme-secondary-500);
20424
+ --_btn-active-bg: var(--theme-secondary-600);
20303
20425
  }
20304
- .s-notice__info .s-notice--btn:focus,
20305
- .s-banner__info .s-notice--btn:focus,
20306
- .s-notice__info .s-notice--btn:hover,
20307
- .s-banner__info .s-notice--btn:hover {
20308
- background-color: var(--theme-secondary-300);
20426
+ @media (prefers-color-scheme: dark) {
20427
+ body.theme-system .s-banner__info.s-banner__important {
20428
+ --_bg: var(--theme-secondary-300);
20429
+ --_fc: var(--black-900);
20430
+ }
20309
20431
  }
20310
- .s-notice__info .s-notice--btn:active,
20311
- .s-banner__info .s-notice--btn:active {
20312
- background-color: var(--theme-secondary-400);
20432
+ body.theme-dark .s-banner__info.s-banner__important,
20433
+ .theme-dark__forced .s-banner__info.s-banner__important,
20434
+ body.theme-system .theme-dark__forced .s-banner__info.s-banner__important {
20435
+ --_bg: var(--theme-secondary-300);
20436
+ --_fc: var(--black-900);
20437
+ }
20438
+ @media (prefers-color-scheme: dark) {
20439
+ body.theme-highcontrast.theme-system .s-banner__info.s-banner__important {
20440
+ --_bg: var(--theme-secondary-400);
20441
+ --_fc: var(--white);
20442
+ }
20313
20443
  }
20314
- .s-notice__info code,
20315
- .s-banner__info code {
20316
- background-color: var(--theme-secondary-150);
20444
+ body.theme-highcontrast.theme-dark .s-banner__info.s-banner__important {
20445
+ --_bg: var(--theme-secondary-400);
20446
+ --_fc: var(--white);
20317
20447
  }
20318
- .s-notice__success,
20319
20448
  .s-banner__success {
20320
- border-color: var(--green-200);
20321
- background-color: var(--green-050);
20449
+ --_bc: var(--green-200);
20450
+ --_bg: var(--green-050);
20451
+ --_btn-focus-bg: var(--green-100);
20452
+ --_btn-active-bg: var(--green-200);
20322
20453
  }
20323
- body.theme-highcontrast .s-notice__success,
20324
- body.theme-highcontrast .s-banner__success {
20325
- background-color: var(--green-200);
20326
- border-color: var(--green-400);
20454
+ body.theme-highcontrast .s-banner__success:not(.s-banner__important) {
20455
+ --_bg: var(--green-200);
20327
20456
  }
20328
- .s-notice__success.s-notice__important,
20329
- .s-banner__success.s-notice__important,
20330
- .s-notice__success.s-banner__important,
20331
20457
  .s-banner__success.s-banner__important {
20332
- background-color: var(--green-400);
20333
- color: var(--black-900);
20458
+ --_bc: var(--_bg);
20459
+ --_bg: var(--green-400);
20460
+ --_fc: var(--black-900);
20461
+ --_btn-focus-bg: var(--green-500);
20462
+ --_btn-active-bg: var(--green-600);
20334
20463
  }
20335
- body.theme-highcontrast .s-notice__success.s-notice__important,
20336
- body.theme-highcontrast .s-banner__success.s-notice__important,
20337
- body.theme-highcontrast .s-notice__success.s-banner__important,
20338
- body.theme-highcontrast .s-banner__success.s-banner__important {
20339
- background-color: var(--green-500);
20340
- color: var(--white);
20341
- border-color: transparent;
20464
+ @media (prefers-color-scheme: dark) {
20465
+ body.theme-system .s-banner__success.s-banner__important {
20466
+ --_bg: var(--green-500);
20467
+ --_fc: var(--white);
20468
+ }
20342
20469
  }
20343
- .s-notice__success .s-notice--btn:focus,
20344
- .s-banner__success .s-notice--btn:focus,
20345
- .s-notice__success .s-notice--btn:hover,
20346
- .s-banner__success .s-notice--btn:hover {
20347
- background-color: var(--green-100);
20470
+ body.theme-dark .s-banner__success.s-banner__important,
20471
+ .theme-dark__forced .s-banner__success.s-banner__important,
20472
+ body.theme-system .theme-dark__forced .s-banner__success.s-banner__important {
20473
+ --_bg: var(--green-500);
20474
+ --_fc: var(--white);
20348
20475
  }
20349
- .s-notice__success .s-notice--btn:active,
20350
- .s-banner__success .s-notice--btn:active {
20351
- background-color: var(--green-200);
20476
+ body.theme-highcontrast .s-banner__success.s-banner__important {
20477
+ --_bg: var(--green-500);
20478
+ --_fc: var(--white);
20352
20479
  }
20353
- .s-notice__warning,
20354
20480
  .s-banner__warning {
20355
- border-color: var(--yellow-300);
20356
- background-color: var(--yellow-050);
20481
+ --_bc: var(--yellow-300);
20482
+ --_bg: var(--yellow-050);
20483
+ --_btn-focus-bg: var(--yellow-200);
20484
+ --_btn-active-bg: var(--yellow-300);
20485
+ --_code-bg: var(--yellow-200);
20357
20486
  }
20358
- body.theme-highcontrast .s-notice__warning,
20359
- body.theme-highcontrast .s-banner__warning {
20360
- background-color: var(--yellow-200);
20361
- border-color: var(--yellow-700);
20487
+ body.theme-highcontrast .s-banner__warning:not(.s-banner__important) {
20488
+ --_bg: var(--yellow-200);
20362
20489
  }
20363
- .s-notice__warning.s-notice__important,
20364
- .s-banner__warning.s-notice__important,
20365
- .s-notice__warning.s-banner__important,
20366
20490
  .s-banner__warning.s-banner__important {
20367
- background-color: var(--yellow-400);
20368
- color: var(--black-900);
20491
+ --_bc: var(--_bg);
20492
+ --_bg: var(--yellow-400);
20493
+ --_btn-focus-bg: var(--yellow-500);
20494
+ --_btn-active-bg: var(--yellow-600);
20495
+ --_fc: var(--black-900);
20496
+ }
20497
+ @media (prefers-color-scheme: dark) {
20498
+ body.theme-system .s-banner__warning.s-banner__important {
20499
+ --_bg: var(--yellow-600);
20500
+ --_fc: var(--white);
20501
+ }
20502
+ }
20503
+ body.theme-dark .s-banner__warning.s-banner__important,
20504
+ .theme-dark__forced .s-banner__warning.s-banner__important,
20505
+ body.theme-system .theme-dark__forced .s-banner__warning.s-banner__important {
20506
+ --_bg: var(--yellow-600);
20507
+ --_fc: var(--white);
20369
20508
  }
20370
- body.theme-highcontrast .s-notice__warning.s-notice__important,
20371
- body.theme-highcontrast .s-banner__warning.s-notice__important,
20372
- body.theme-highcontrast .s-notice__warning.s-banner__important,
20373
20509
  body.theme-highcontrast .s-banner__warning.s-banner__important {
20374
- background-color: var(--yellow-500);
20375
- color: var(--white);
20376
- border-color: transparent;
20510
+ --_bg: var(--yellow-700);
20511
+ --_fc: var(--white);
20377
20512
  }
20378
- .s-notice__warning .s-notice--btn:focus,
20379
- .s-banner__warning .s-notice--btn:focus,
20380
- .s-notice__warning .s-notice--btn:hover,
20381
- .s-banner__warning .s-notice--btn:hover {
20382
- background-color: var(--yellow-200);
20513
+ .s-banner__body-pt {
20514
+ padding-top: 93px;
20383
20515
  }
20384
- .s-notice__warning .s-notice--btn:active,
20385
- .s-banner__warning .s-notice--btn:active {
20386
- background-color: var(--yellow-300);
20516
+ .s-banner.is-pinned {
20517
+ z-index: calc(var(--zi-navigation-fixed) + 1);
20387
20518
  }
20388
- .s-notice__warning code,
20389
- .s-banner__warning code {
20390
- background-color: var(--yellow-200);
20519
+ .s-banner[aria-hidden="true"] {
20520
+ --_x-offset: -50px;
20521
+ visibility: hidden;
20522
+ opacity: 0;
20391
20523
  }
20392
- .s-notice__danger,
20393
- .s-banner__danger {
20394
- border-color: var(--red-200);
20395
- background-color: var(--red-050);
20524
+ .s-banner[aria-hidden="false"] {
20525
+ --_x-offset: 49px;
20526
+ visibility: visible;
20527
+ opacity: 1;
20396
20528
  }
20397
- body.theme-highcontrast .s-notice__danger,
20398
- body.theme-highcontrast .s-banner__danger {
20399
- background-color: var(--red-200);
20400
- border-color: var(--red-500);
20529
+ .s-banner .s-banner--container {
20530
+ position: relative;
20531
+ width: 100%;
20532
+ max-width: calc(var(--s-step) * 10);
20533
+ margin: 0 auto;
20401
20534
  }
20402
- body.theme-highcontrast .s-notice__danger.s-notice__important,
20403
- body.theme-highcontrast .s-banner__danger.s-notice__important,
20404
- body.theme-highcontrast .s-notice__danger.s-banner__important,
20405
- body.theme-highcontrast .s-banner__danger.s-banner__important {
20406
- background-color: var(--red-500);
20535
+ .s-notice {
20536
+ background: var(--_bg, var(--black-050));
20537
+ border-color: var(--_bc, var(--bc-medium));
20538
+ border-style: solid;
20539
+ color: var(--_fc, var(--fc-medium));
20540
+ font-size: var(--fs-body1);
20541
+ border-radius: var(--br-sm);
20542
+ border-width: var(--su-static1);
20543
+ padding: var(--su16);
20407
20544
  }
20408
- .s-notice__danger.s-notice__important,
20409
- .s-banner__danger.s-notice__important,
20410
- .s-notice__danger.s-banner__important,
20411
- .s-banner__danger.s-banner__important {
20412
- background-color: var(--red-400);
20545
+ .s-notice code {
20546
+ background: var(--_code-bg, transparent);
20413
20547
  }
20414
- .s-notice__danger .s-notice--btn:focus,
20415
- .s-banner__danger .s-notice--btn:focus,
20416
- .s-notice__danger .s-notice--btn:hover,
20417
- .s-banner__danger .s-notice--btn:hover {
20418
- background-color: var(--red-100);
20548
+ .s-notice .s-notice--btn {
20549
+ color: inherit;
20550
+ padding: var(--su8);
20419
20551
  }
20420
- .s-notice__danger .s-notice--btn:active,
20421
- .s-banner__danger .s-notice--btn:active {
20422
- background-color: var(--red-200);
20552
+ .s-notice .s-notice--btn:focus,
20553
+ .s-notice .s-notice--btn:hover {
20554
+ background: var(--_btn-focus-bg, var(--black-100));
20555
+ }
20556
+ .s-notice .s-notice--btn:active {
20557
+ background: var(--_btn-active-bg, var(--black-150));
20558
+ }
20559
+ @media (prefers-color-scheme: dark) {
20560
+ body.theme-system .s-notice:not(.s-notice__important) {
20561
+ --_bc: var(--_bg);
20562
+ }
20563
+ }
20564
+ body.theme-dark .s-notice:not(.s-notice__important),
20565
+ .theme-dark__forced .s-notice:not(.s-notice__important),
20566
+ body.theme-system .theme-dark__forced .s-notice:not(.s-notice__important) {
20567
+ --_bc: var(--_bg);
20568
+ }
20569
+ body.theme-highcontrast .s-notice:not(.s-notice__important) {
20570
+ --_bc: currentColor;
20571
+ }
20572
+ @media (prefers-color-scheme: dark) {
20573
+ body.theme-highcontrast.theme-system .s-notice:not(.s-notice__important) {
20574
+ --_bc: currentColor;
20575
+ }
20576
+ }
20577
+ body.theme-highcontrast.theme-dark .s-notice:not(.s-notice__important) {
20578
+ --_bc: currentColor;
20423
20579
  }
20424
20580
  .s-notice__important {
20425
- border-color: transparent;
20426
- background-color: var(--black-700);
20427
- color: var(--white);
20581
+ --_bc: var(--_bg);
20582
+ --_bg: var(--black-700);
20583
+ --_fc: var(--white);
20584
+ --_btn-focus-bg: var(--black-800);
20585
+ --_btn-active-bg: var(--black-900);
20586
+ }
20587
+ body.theme-highcontrast .s-notice__important {
20588
+ --_bc: var(--_bg);
20589
+ }
20590
+ .s-notice__danger {
20591
+ --_bc: var(--red-200);
20592
+ --_bg: var(--red-050);
20593
+ --_btn-focus-bg: var(--red-100);
20594
+ --_btn-active-bg: var(--red-200);
20595
+ }
20596
+ body.theme-highcontrast .s-notice__danger:not(.s-notice__important) {
20597
+ --_bg: var(--red-200);
20598
+ }
20599
+ .s-notice__danger.s-notice__important {
20600
+ --_bc: var(--_bg);
20601
+ --_bg: var(--red-500);
20602
+ --_btn-focus-bg: var(--red-600);
20603
+ --_btn-active-bg: var(--red-700);
20428
20604
  }
20429
20605
  @media (prefers-color-scheme: dark) {
20430
- body.theme-system .s-notice__info,
20431
- body.theme-system .s-notice__success,
20432
- body.theme-system .s-notice__warning,
20433
- body.theme-system .s-notice__danger {
20434
- border-color: transparent;
20606
+ body.theme-system .s-notice__danger.s-notice__important {
20607
+ --_bg: var(--red-400);
20608
+ --_fc: var(--black-900);
20435
20609
  }
20436
20610
  }
20437
- body.theme-dark .s-notice__info,
20438
- body.theme-dark .s-notice__success,
20439
- body.theme-dark .s-notice__warning,
20440
- body.theme-dark .s-notice__danger,
20441
- .theme-dark__forced .s-notice__info,
20442
- .theme-dark__forced .s-notice__success,
20443
- .theme-dark__forced .s-notice__warning,
20444
- .theme-dark__forced .s-notice__danger,
20445
- body.theme-system .theme-dark__forced .s-notice__info,
20446
- body.theme-system .theme-dark__forced .s-notice__success,
20447
- body.theme-system .theme-dark__forced .s-notice__warning,
20448
- body.theme-system .theme-dark__forced .s-notice__danger {
20449
- border-color: transparent;
20611
+ body.theme-dark .s-notice__danger.s-notice__important,
20612
+ .theme-dark__forced .s-notice__danger.s-notice__important,
20613
+ body.theme-system .theme-dark__forced .s-notice__danger.s-notice__important {
20614
+ --_bg: var(--red-400);
20615
+ --_fc: var(--black-900);
20450
20616
  }
20451
- body.theme-highcontrast .s-notice__info,
20452
- body.theme-highcontrast .s-notice__success,
20453
- body.theme-highcontrast .s-notice__warning,
20454
- body.theme-highcontrast .s-notice__danger {
20455
- border-color: currentColor;
20617
+ @media (prefers-color-scheme: dark) {
20618
+ body.theme-highcontrast.theme-system .s-notice__danger.s-notice__important {
20619
+ --_bg: var(--red-500);
20620
+ --_fc: var(--white);
20621
+ }
20622
+ }
20623
+ body.theme-highcontrast.theme-dark .s-notice__danger.s-notice__important {
20624
+ --_bg: var(--red-500);
20625
+ --_fc: var(--white);
20626
+ }
20627
+ .s-notice__info {
20628
+ --_bc: var(--theme-secondary-150);
20629
+ --_bg: var(--theme-secondary-050);
20630
+ --_btn-focus-bg: var(--theme-secondary-100);
20631
+ --_btn-active-bg: var(--theme-secondary-150);
20632
+ --_code-bg: var(--theme-secondary-150);
20633
+ }
20634
+ body.theme-highcontrast .s-notice__info:not(.s-notice__important) {
20635
+ --_bg: var(--theme-secondary-100);
20636
+ }
20637
+ @media (prefers-color-scheme: dark) {
20638
+ body.theme-highcontrast.theme-system .s-notice__info:not(.s-notice__important) {
20639
+ --_bg: var(--theme-secondary-100);
20640
+ }
20641
+ }
20642
+ body.theme-highcontrast.theme-dark .s-notice__info:not(.s-notice__important) {
20643
+ --_bg: var(--theme-secondary-100);
20644
+ }
20645
+ .s-notice__info.s-notice__important {
20646
+ --_bc: var(--_bg);
20647
+ --_bg: var(--theme-secondary-400);
20648
+ --_btn-focus-bg: var(--theme-secondary-500);
20649
+ --_btn-active-bg: var(--theme-secondary-600);
20650
+ }
20651
+ @media (prefers-color-scheme: dark) {
20652
+ body.theme-system .s-notice__info.s-notice__important {
20653
+ --_bg: var(--theme-secondary-300);
20654
+ --_fc: var(--black-900);
20655
+ }
20656
+ }
20657
+ body.theme-dark .s-notice__info.s-notice__important,
20658
+ .theme-dark__forced .s-notice__info.s-notice__important,
20659
+ body.theme-system .theme-dark__forced .s-notice__info.s-notice__important {
20660
+ --_bg: var(--theme-secondary-300);
20661
+ --_fc: var(--black-900);
20662
+ }
20663
+ @media (prefers-color-scheme: dark) {
20664
+ body.theme-highcontrast.theme-system .s-notice__info.s-notice__important {
20665
+ --_bg: var(--theme-secondary-400);
20666
+ --_fc: var(--white);
20667
+ }
20668
+ }
20669
+ body.theme-highcontrast.theme-dark .s-notice__info.s-notice__important {
20670
+ --_bg: var(--theme-secondary-400);
20671
+ --_fc: var(--white);
20672
+ }
20673
+ .s-notice__success {
20674
+ --_bc: var(--green-200);
20675
+ --_bg: var(--green-050);
20676
+ --_btn-focus-bg: var(--green-100);
20677
+ --_btn-active-bg: var(--green-200);
20678
+ }
20679
+ body.theme-highcontrast .s-notice__success:not(.s-notice__important) {
20680
+ --_bg: var(--green-200);
20681
+ }
20682
+ .s-notice__success.s-notice__important {
20683
+ --_bc: var(--_bg);
20684
+ --_bg: var(--green-400);
20685
+ --_fc: var(--black-900);
20686
+ --_btn-focus-bg: var(--green-500);
20687
+ --_btn-active-bg: var(--green-600);
20688
+ }
20689
+ @media (prefers-color-scheme: dark) {
20690
+ body.theme-system .s-notice__success.s-notice__important {
20691
+ --_bg: var(--green-500);
20692
+ --_fc: var(--white);
20693
+ }
20694
+ }
20695
+ body.theme-dark .s-notice__success.s-notice__important,
20696
+ .theme-dark__forced .s-notice__success.s-notice__important,
20697
+ body.theme-system .theme-dark__forced .s-notice__success.s-notice__important {
20698
+ --_bg: var(--green-500);
20699
+ --_fc: var(--white);
20700
+ }
20701
+ body.theme-highcontrast .s-notice__success.s-notice__important {
20702
+ --_bg: var(--green-500);
20703
+ --_fc: var(--white);
20704
+ }
20705
+ .s-notice__warning {
20706
+ --_bc: var(--yellow-300);
20707
+ --_bg: var(--yellow-050);
20708
+ --_btn-focus-bg: var(--yellow-200);
20709
+ --_btn-active-bg: var(--yellow-300);
20710
+ --_code-bg: var(--yellow-200);
20711
+ }
20712
+ body.theme-highcontrast .s-notice__warning:not(.s-notice__important) {
20713
+ --_bg: var(--yellow-200);
20714
+ }
20715
+ .s-notice__warning.s-notice__important {
20716
+ --_bc: var(--_bg);
20717
+ --_bg: var(--yellow-400);
20718
+ --_btn-focus-bg: var(--yellow-500);
20719
+ --_btn-active-bg: var(--yellow-600);
20720
+ --_fc: var(--black-900);
20721
+ }
20722
+ @media (prefers-color-scheme: dark) {
20723
+ body.theme-system .s-notice__warning.s-notice__important {
20724
+ --_bg: var(--yellow-600);
20725
+ --_fc: var(--white);
20726
+ }
20727
+ }
20728
+ body.theme-dark .s-notice__warning.s-notice__important,
20729
+ .theme-dark__forced .s-notice__warning.s-notice__important,
20730
+ body.theme-system .theme-dark__forced .s-notice__warning.s-notice__important {
20731
+ --_bg: var(--yellow-600);
20732
+ --_fc: var(--white);
20733
+ }
20734
+ body.theme-highcontrast .s-notice__warning.s-notice__important {
20735
+ --_bg: var(--yellow-700);
20736
+ --_fc: var(--white);
20456
20737
  }
20457
20738
  .s-toast {
20458
20739
  visibility: hidden;
@@ -20479,6 +20760,14 @@ body.theme-highcontrast .s-notice__danger {
20479
20760
  transform: none;
20480
20761
  }
20481
20762
  }
20763
+ .s-toast .s-notice {
20764
+ max-width: 44rem;
20765
+ width: 100%;
20766
+ padding-top: var(--su8);
20767
+ padding-bottom: var(--su8);
20768
+ box-shadow: var(--bs-sm);
20769
+ pointer-events: all;
20770
+ }
20482
20771
  .s-tag {
20483
20772
  display: inline-flex;
20484
20773
  align-items: center;