@stackoverflow/stacks 1.7.1 → 1.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (138) hide show
  1. package/README.md +1 -1
  2. package/dist/components/activity-indicator/activity-indicator.a11y.test.d.ts +1 -0
  3. package/dist/components/activity-indicator/activity-indicator.visual.test.d.ts +1 -0
  4. package/dist/components/avatar/avatar.a11y.test.d.ts +1 -0
  5. package/dist/components/avatar/avatar.visual.test.d.ts +1 -0
  6. package/dist/{controllers/s-banner.d.ts → components/banner/banner.d.ts} +1 -1
  7. package/dist/components/banner/banner.test.d.ts +1 -0
  8. package/dist/components/banner/banner.visual.test.d.ts +1 -0
  9. package/dist/components/button/button.a11y.test.d.ts +1 -0
  10. package/dist/components/button/button.visual.test.d.ts +1 -0
  11. package/dist/{controllers/s-expandable-control.d.ts → components/expandable/expandable.d.ts} +1 -1
  12. package/dist/components/expandable/expandable.test.d.ts +1 -0
  13. package/dist/{controllers/s-modal.d.ts → components/modal/modal.d.ts} +1 -1
  14. package/dist/{controllers/s-navigation-tablist.d.ts → components/navigation/navigation.d.ts} +1 -1
  15. package/dist/{controllers/s-popover.d.ts → components/popover/popover.d.ts} +1 -1
  16. package/dist/{controllers/s-tooltip.d.ts → components/popover/tooltip.d.ts} +1 -1
  17. package/dist/components/popover/tooltip.test.d.ts +1 -0
  18. package/dist/components/popover/tooltip.visual.test.d.ts +1 -0
  19. package/dist/{controllers/s-table.d.ts → components/table/table.d.ts} +1 -1
  20. package/dist/{controllers/s-toast.d.ts → components/toast/toast.d.ts} +1 -1
  21. package/dist/components/toast/toast.test.d.ts +1 -0
  22. package/dist/components/toast/toast.visual.test.d.ts +1 -0
  23. package/dist/{controllers/s-uploader.d.ts → components/uploader/uploader.d.ts} +1 -1
  24. package/dist/controllers.d.ts +9 -0
  25. package/dist/css/stacks.css +1351 -1171
  26. package/dist/css/stacks.min.css +1 -1
  27. package/dist/index.d.ts +1 -1
  28. package/dist/js/stacks.js +545 -545
  29. package/dist/js/stacks.min.js +1 -1
  30. package/dist/test/test-utils.d.ts +136 -0
  31. package/lib/{css/atomic/borders.less → atomic/border.less} +18 -0
  32. package/lib/base/fieldset.less +5 -0
  33. package/lib/{css/base/icons.less → base/icon.less} +0 -9
  34. package/lib/components/activity-indicator/activity-indicator.a11y.test.ts +21 -0
  35. package/lib/components/activity-indicator/activity-indicator.visual.test.ts +23 -0
  36. package/lib/components/avatar/avatar.a11y.test.ts +36 -0
  37. package/lib/components/avatar/avatar.visual.test.ts +54 -0
  38. package/lib/components/banner/banner.less +51 -0
  39. package/lib/{test/s-banner.test.ts → components/banner/banner.test.ts} +7 -3
  40. package/lib/{ts/controllers/s-banner.ts → components/banner/banner.ts} +1 -1
  41. package/lib/components/banner/banner.visual.test.ts +36 -0
  42. package/lib/components/button/button.a11y.test.ts +32 -0
  43. package/lib/{css/components/buttons.less → components/button/button.less} +7 -6
  44. package/lib/components/button/button.visual.test.ts +52 -0
  45. package/lib/{css/components/cards.less → components/card/card.less} +1 -1
  46. package/lib/components/check-control/check-control.less +17 -0
  47. package/lib/components/check-group/check-group.less +19 -0
  48. package/lib/components/checkbox_radio/checkbox_radio.less +158 -0
  49. package/lib/components/description/description.less +9 -0
  50. package/lib/{css/components → components/expandable}/expandable.less +3 -0
  51. package/lib/components/expandable/expandable.test.ts +53 -0
  52. package/lib/{ts/controllers/s-expandable-control.ts → components/expandable/expandable.ts} +1 -1
  53. package/lib/components/input-fill/input-fill.less +35 -0
  54. package/lib/components/input-icon/input-icon.less +45 -0
  55. package/lib/components/input-message/input-message.less +48 -0
  56. package/lib/components/input_textarea/input_textarea.less +166 -0
  57. package/lib/{css/components/labels.less → components/label/label.less} +4 -4
  58. package/lib/{css/components → components/link}/link.less +9 -2
  59. package/lib/{ts/controllers/s-modal.ts → components/modal/modal.ts} +1 -1
  60. package/lib/{ts/controllers/s-navigation-tablist.ts → components/navigation/navigation.ts} +1 -1
  61. package/lib/{css/components/notices.less → components/notice/notice.less} +0 -89
  62. package/lib/{css/components/popovers.less → components/popover/popover.less} +1 -0
  63. package/lib/{ts/controllers/s-popover.ts → components/popover/popover.ts} +1 -1
  64. package/lib/{test/s-tooltip.test.ts → components/popover/tooltip.test.ts} +6 -2
  65. package/lib/{ts/controllers/s-tooltip.ts → components/popover/tooltip.ts} +2 -2
  66. package/lib/{test/s-tooltip.visual.test.ts → components/popover/tooltip.visual.test.ts} +2 -2
  67. package/lib/{css/components → components/post-summary}/post-summary.less +6 -2
  68. package/lib/components/select/select.less +148 -0
  69. package/lib/{css/components/sidebar-widgets.less → components/sidebar-widget/sidebar-widget.less} +0 -1
  70. package/lib/{css/components → components/table}/table.less +0 -5
  71. package/lib/{ts/controllers/s-table.ts → components/table/table.ts} +1 -1
  72. package/lib/components/table-container/table-container.less +4 -0
  73. package/lib/{css/components/tags.less → components/tag/tag.less} +3 -3
  74. package/lib/components/toast/toast.less +35 -0
  75. package/lib/{test/s-toast.test.ts → components/toast/toast.test.ts} +7 -3
  76. package/lib/{ts/controllers/s-toast.ts → components/toast/toast.ts} +1 -1
  77. package/lib/components/toast/toast.visual.test.ts +27 -0
  78. package/lib/{css/components/toggle-switches.less → components/toggle-switch/toggle-switch.less} +8 -0
  79. package/lib/{ts/controllers/s-uploader.ts → components/uploader/uploader.ts} +1 -1
  80. package/lib/controllers.ts +33 -0
  81. package/lib/{css/exports → exports}/mixins.less +73 -11
  82. package/lib/{ts/index.ts → index.ts} +1 -1
  83. package/lib/input-utils.less +44 -0
  84. package/lib/{css/stacks-dynamic.less → stacks-dynamic.less} +1 -2
  85. package/lib/stacks-static.less +93 -0
  86. package/lib/test/test-utils.ts +444 -0
  87. package/lib/tsconfig.json +1 -1
  88. package/package.json +26 -25
  89. package/dist/controllers/index.d.ts +0 -9
  90. package/lib/css/components/inputs.less +0 -666
  91. package/lib/css/stacks-static.less +0 -97
  92. package/lib/test/s-avatar.test.ts +0 -74
  93. package/lib/test/s-banner.visual.test.ts +0 -61
  94. package/lib/test/s-button.visual.test.ts +0 -12
  95. package/lib/test/s-toast.visual.test.ts +0 -48
  96. package/lib/ts/controllers/index.ts +0 -17
  97. /package/lib/{css/atomic/colors.less → atomic/color.less} +0 -0
  98. /package/lib/{css/atomic → atomic}/flex.less +0 -0
  99. /package/lib/{css/atomic → atomic}/gap.less +0 -0
  100. /package/lib/{css/atomic → atomic}/grid.less +0 -0
  101. /package/lib/{css/atomic → atomic}/misc.less +0 -0
  102. /package/lib/{css/atomic → atomic}/spacing.less +0 -0
  103. /package/lib/{css/atomic → atomic}/typography.less +0 -0
  104. /package/lib/{css/atomic → atomic}/width-height.less +0 -0
  105. /package/lib/{css/base → base}/body.less +0 -0
  106. /package/lib/{css/base → base}/configuration-static.less +0 -0
  107. /package/lib/{css/base/internals.less → base/internal.less} +0 -0
  108. /package/lib/{css/base → base}/reset-meyer.less +0 -0
  109. /package/lib/{css/base → base}/reset-normalize.less +0 -0
  110. /package/lib/{css/base → base}/reset.less +0 -0
  111. /package/lib/{css/components → components/activity-indicator}/activity-indicator.less +0 -0
  112. /package/lib/{css/components/anchors.less → components/anchor/anchor.less} +0 -0
  113. /package/lib/{css/components/avatars.less → components/avatar/avatar.less} +0 -0
  114. /package/lib/{css/components → components/award-bling}/award-bling.less +0 -0
  115. /package/lib/{css/components/badges.less → components/badge/badge.less} +0 -0
  116. /package/lib/{css/components → components/block-link}/block-link.less +0 -0
  117. /package/lib/{css/components → components/breadcrumbs}/breadcrumbs.less +0 -0
  118. /package/lib/{css/components/button-groups.less → components/button-group/button-group.less} +0 -0
  119. /package/lib/{css/components/code-blocks.less → components/code-block/code-block.less} +0 -0
  120. /package/lib/{css/components/empty-states.less → components/empty-state/empty-state.less} +0 -0
  121. /package/lib/{css/components/link-previews.less → components/link-preview/link-preview.less} +0 -0
  122. /package/lib/{css/components → components/menu}/menu.less +0 -0
  123. /package/lib/{css/components/modals.less → components/modal/modal.less} +0 -0
  124. /package/lib/{css/components → components/navigation}/navigation.less +0 -0
  125. /package/lib/{css/components/page-titles.less → components/page-title/page-title.less} +0 -0
  126. /package/lib/{css/components → components/pagination}/pagination.less +0 -0
  127. /package/lib/{css/components/progress-bars.less → components/progress-bar/progress-bar.less} +0 -0
  128. /package/lib/{css/components → components/prose}/prose.less +0 -0
  129. /package/lib/{css/components → components/spinner}/spinner.less +0 -0
  130. /package/lib/{css/components → components/topbar}/topbar.less +0 -0
  131. /package/lib/{css/components → components/uploader}/uploader.less +0 -0
  132. /package/lib/{css/components/user-cards.less → components/user-card/user-card.less} +0 -0
  133. /package/lib/{css/exports → exports}/constants-colors.less +0 -0
  134. /package/lib/{css/exports → exports}/constants-helpers.less +0 -0
  135. /package/lib/{css/exports → exports}/constants-type.less +0 -0
  136. /package/lib/{css/exports → exports}/exports.less +0 -0
  137. /package/lib/{css/stacks.less → stacks.less} +0 -0
  138. /package/lib/{ts/stacks.ts → stacks.ts} +0 -0
package/dist/css/stacks.css CHANGED
@@ -391,6 +391,11 @@ template {
391
391
  [hidden] {
392
392
  display: none;
393
393
  }
394
+ fieldset {
395
+ border: 0;
396
+ min-width: 0;
397
+ padding: 0;
398
+ }
394
399
  .svg-icon,
395
400
  .svg-spot {
396
401
  vertical-align: bottom;
@@ -399,6 +404,13 @@ template {
399
404
  .svg-spot:not(.native) * {
400
405
  fill: currentColor;
401
406
  }
407
+ .is-disabled,
408
+ .is-readonly,
409
+ .has-success,
410
+ .has-error,
411
+ .has-warning {
412
+ position: relative;
413
+ }
402
414
  .s-activity-indicator {
403
415
  --_ai-focus-ring: var(--focus-ring);
404
416
  --_ai-bg: var(--theme-secondary-400);
@@ -519,29 +531,6 @@ body.theme-highcontrast .s-activity-indicator {
519
531
  .s-anchors.s-anchors__muted .s-btn.s-btn__link:visited {
520
532
  color: var(--_an-a-fc, inherit);
521
533
  }
522
- .s-award-bling {
523
- --_ab-before-bg: unset;
524
- align-items: center;
525
- color: inherit;
526
- display: flex;
527
- }
528
- .s-award-bling.s-award-bling__gold {
529
- --_ab-before-bg: var(--gold);
530
- }
531
- .s-award-bling.s-award-bling__silver {
532
- --_ab-before-bg: var(--silver);
533
- }
534
- .s-award-bling.s-award-bling__bronze {
535
- --_ab-before-bg: var(--bronze);
536
- }
537
- .s-award-bling:before {
538
- background-color: var(--_ab-before-bg);
539
- border-radius: 100%;
540
- content: "";
541
- margin-right: var(--su4);
542
- height: var(--su8);
543
- width: var(--su8);
544
- }
545
534
  .s-avatar {
546
535
  --_av-size: var(--su-static16);
547
536
  --_av-bg: hsl(0, 0%, 100%);
@@ -630,6 +619,29 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
630
619
  -ms-user-select: none;
631
620
  user-select: none;
632
621
  }
622
+ .s-award-bling {
623
+ --_ab-before-bg: unset;
624
+ align-items: center;
625
+ color: inherit;
626
+ display: flex;
627
+ }
628
+ .s-award-bling.s-award-bling__gold {
629
+ --_ab-before-bg: var(--gold);
630
+ }
631
+ .s-award-bling.s-award-bling__silver {
632
+ --_ab-before-bg: var(--silver);
633
+ }
634
+ .s-award-bling.s-award-bling__bronze {
635
+ --_ab-before-bg: var(--bronze);
636
+ }
637
+ .s-award-bling:before {
638
+ background-color: var(--_ab-before-bg);
639
+ border-radius: 100%;
640
+ content: "";
641
+ margin-right: var(--su4);
642
+ height: var(--su8);
643
+ width: var(--su8);
644
+ }
633
645
  .s-badge,
634
646
  .s-topbar--notice {
635
647
  --_ba-as: unset;
@@ -830,151 +842,534 @@ body.theme-highcontrast .s-badge.s-badge__danger.s-badge__filled {
830
842
  a.s-badge:hover {
831
843
  text-decoration: none;
832
844
  }
833
- .s-btn {
834
- --_bu-baw: var(--su-static1);
835
- --_bu-bc: transparent;
836
- --_bu-bg: transparent;
837
- --_bu-br: var(--br-sm);
838
- --_bu-bs: none;
839
- --_bu-fc: var(--theme-button-color);
840
- --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring);
841
- --_bu-fs: var(--fs-body1);
842
- --_bu-p: 0.8em;
843
- --_bu-bc-selected: transparent;
844
- --_bu-bg-active: var(--theme-button-active-background-color);
845
- --_bu-bg-hover: var(--theme-button-hover-background-color);
846
- --_bu-bg-selected: var(--theme-button-selected-background-color);
847
- --_bu-fc-active: var(--theme-button-hover-color);
848
- --_bu-fc-hover: var(--theme-button-hover-color);
849
- --_bu-fc-selected: var(--theme-button-selected-color);
850
- --_bu-filled-bc: var(--theme-button-filled-border-color);
851
- --_bu-filled-bc-active: var(--theme-button-filled-active-border-color);
852
- --_bu-filled-bg-hover: var(--theme-button-filled-hover-background-color);
853
- --_bu-filled-bc-selected: var(--theme-button-filled-selected-border-color);
854
- --_bu-filled-bg: var(--theme-button-filled-background-color);
855
- --_bu-filled-bg-active: var(--theme-button-filled-active-background-color);
856
- --_bu-filled-bg-selected: var(--theme-button-filled-selected-background-color);
857
- --_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.7);
858
- --_bu-filled-fc: var(--theme-button-filled-color);
859
- --_bu-filled-fc-active: var(--theme-button-filled-hover-color);
860
- --_bu-filled-fc-hover: var(--theme-button-filled-hover-color);
861
- --_bu-filled-fc-selected: var(--theme-button-filled-selected-color);
862
- --_bu-outlined-bc: var(--theme-button-outlined-border-color);
863
- --_bu-outlined-bg: var(--theme-button-outlined-background-color);
864
- --_bu-outlined-bc-selected: var(--theme-button-outlined-selected-border-color);
865
- --_bu-outlined-bg-selected: var(--theme-button-selected-background-color);
866
- --_bu-outlined-fc-selected: var(--theme-button-selected-color);
867
- --_bu-badge-o: 0.5;
868
- --_bu-dropdown-bw: var(--su-static4);
869
- --_bu-number-fc: var(--white);
870
- --_bu-number-fc-selected: var(--_bu-number-fc);
871
- background-color: var(--_bu-bg);
872
- border: var(--_bu-baw) solid var(--_bu-bc);
873
- border-radius: var(--_bu-br);
874
- box-shadow: var(--_bu-bs);
875
- color: var(--_bu-fc);
876
- font-size: var(--_bu-fs);
877
- padding: var(--_bu-p);
878
- cursor: pointer;
879
- display: inline-block;
880
- font-family: inherit;
881
- font-weight: normal;
882
- line-height: var(--lh-sm);
883
- position: relative;
884
- outline: none;
885
- text-align: center;
886
- text-decoration: none;
887
- user-select: none;
845
+ .s-banner {
846
+ --_no-x-offset: 0;
847
+ --_no-bc: var(--bc-medium);
848
+ --_no-bg: var(--black-050);
849
+ --_no-fc: var(--fc-medium);
850
+ --_no-btn-bg-focus: var(--black-100);
851
+ --_no-btn-bg-active: var(--black-150);
852
+ background: var(--_no-bg);
853
+ border-color: var(--_no-bc);
854
+ color: var(--_no-fc);
855
+ border-style: solid;
856
+ font-size: var(--fs-body1);
857
+ border-width: var(--su-static1) 0;
858
+ inset: 0 0 auto 0;
859
+ padding: var(--su12);
860
+ position: fixed;
861
+ -webkit-transform: translate3d(0, var(--_no-x-offset), 0);
862
+ transform: translate3d(0, var(--_no-x-offset), 0);
863
+ width: 100%;
864
+ z-index: calc(var(--zi-navigation-fixed) - 1);
888
865
  }
889
866
  @media (prefers-color-scheme: dark) {
890
- body.theme-system .s-btn {
891
- --_bu-bs: none;
892
- --_bu-filled-bs: var(--_bu-bs);
867
+ body.theme-system .s-banner:not(.s-banner__important) {
868
+ --_no-bc: var(--_no-bg);
893
869
  }
894
870
  }
895
- body.theme-dark .s-btn,
896
- .theme-dark__forced .s-btn,
897
- body.theme-system .theme-dark__forced .s-btn {
898
- --_bu-bs: none;
899
- --_bu-filled-bs: var(--_bu-bs);
871
+ body.theme-dark .s-banner:not(.s-banner__important),
872
+ .theme-dark__forced .s-banner:not(.s-banner__important),
873
+ body.theme-system .theme-dark__forced .s-banner:not(.s-banner__important) {
874
+ --_no-bc: var(--_no-bg);
900
875
  }
901
- body.theme-highcontrast .s-btn {
902
- --_bu-bc: currentColor;
903
- --_bu-filled-bc: var(--_bu-bc);
904
- --_bu-outlined-bc: var(--_bu-bc);
905
- --_bu-bc-selected: var(--_bu-bc);
906
- --_bu-badge-o: 0.8;
876
+ body.theme-highcontrast .s-banner:not(.s-banner__important) {
877
+ --_no-bc: currentColor;
907
878
  }
908
- .s-btn[disabled],
909
- .s-btn[aria-disabled="true"] {
910
- --_bu-bs: none !important;
911
- --_bu-filled-bs: var(--_bu-bs);
912
- opacity: var(--_o-disabled-static);
913
- pointer-events: none;
914
- text-decoration: none;
879
+ @media (prefers-color-scheme: dark) {
880
+ body.theme-highcontrast.theme-system .s-banner:not(.s-banner__important) {
881
+ --_no-bc: currentColor;
882
+ }
915
883
  }
916
- button .s-btn,
917
- button[type="submit"] .s-btn,
918
- button[type="reset"] .s-btn {
919
- -webkit-appearance: button;
884
+ body.theme-highcontrast.theme-dark .s-banner:not(.s-banner__important) {
885
+ --_no-bc: currentColor;
920
886
  }
921
- .s-btn.grid {
922
- display: flex;
887
+ .s-banner__important {
888
+ --_no-bc: var(--_no-bg);
889
+ --_no-bg: var(--black-700);
890
+ --_no-fc: var(--white);
891
+ --_no-btn-bg-focus: var(--black-800);
892
+ --_no-btn-bg-active: var(--black-900);
923
893
  }
924
- .s-btn.is-loading {
925
- padding-left: 2.2em;
894
+ body.theme-highcontrast .s-banner__important {
895
+ --_no-bc: var(--_no-bg);
926
896
  }
927
- .s-btn.is-loading .svg-icon:first-child {
928
- margin-left: -23px;
929
- opacity: 0;
897
+ .s-banner__danger {
898
+ --_no-bc: var(--red-200);
899
+ --_no-bg: var(--red-050);
900
+ --_no-btn-bg-active: var(--red-200);
901
+ --_no-btn-bg-focus: var(--red-100);
930
902
  }
931
- .s-btn.is-selected,
932
- .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn {
933
- background-color: var(--_bu-bg-selected);
934
- border-color: var(--_bu-bc-selected);
935
- color: var(--_bu-fc-selected);
903
+ body.theme-highcontrast .s-banner__danger:not(.s-banner__important) {
904
+ --_no-bg: var(--red-200);
936
905
  }
937
- .s-btn.is-selected .s-btn--number,
938
- .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn .s-btn--number {
939
- color: var(--_bu-number-fc-selected);
906
+ .s-banner__danger.s-banner__important {
907
+ --_no-bc: var(--_no-bg);
908
+ --_no-bg: var(--red-500);
909
+ --_no-btn-bg-active: var(--red-700);
910
+ --_no-btn-bg-focus: var(--red-600);
940
911
  }
941
- .s-btn.is-selected.s-btn__filled,
942
- .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn.s-btn__filled {
943
- border-color: var(--_bu-filled-bc-selected);
944
- background-color: var(--_bu-filled-bg-selected);
945
- color: var(--_bu-filled-fc-selected);
912
+ @media (prefers-color-scheme: dark) {
913
+ body.theme-system .s-banner__danger.s-banner__important {
914
+ --_no-bg: var(--red-400);
915
+ --_no-fc: var(--black-900);
916
+ }
946
917
  }
947
- .s-btn.is-selected.s-btn__outlined,
948
- .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn.s-btn__outlined {
949
- border-color: var(--_bu-outlined-bc-selected);
950
- background-color: var(--_bu-outlined-bg-selected);
951
- color: var(--_bu-outlined-fc-selected);
918
+ body.theme-dark .s-banner__danger.s-banner__important,
919
+ .theme-dark__forced .s-banner__danger.s-banner__important,
920
+ body.theme-system .theme-dark__forced .s-banner__danger.s-banner__important {
921
+ --_no-bg: var(--red-400);
922
+ --_no-fc: var(--black-900);
952
923
  }
953
- body.theme-highcontrast .s-btn.is-selected.s-btn__outlined.s-btn__muted,
954
- body.theme-highcontrast .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn.s-btn__outlined.s-btn__muted {
955
- --_bu-outlined-bc-selected: var(--_bu-filled-bc-selected);
956
- --_bu-outlined-bg-selected: var(--_bu-filled-bg-selected);
957
- --_bu-outlined-fc-selected: var(--_bu-filled-fc-selected);
958
- --_bu-number-fc-selected: var(--_bu-filled-bg-selected);
924
+ @media (prefers-color-scheme: dark) {
925
+ body.theme-highcontrast.theme-system .s-banner__danger.s-banner__important {
926
+ --_no-bg: var(--red-500);
927
+ --_no-fc: var(--white);
928
+ }
959
929
  }
960
- .s-btn.is-selected:not(:focus),
961
- .s-btn-group.s-btn-group--radio .s-btn--radio:checked:not(:focus) + .s-btn {
962
- box-shadow: none;
930
+ body.theme-highcontrast.theme-dark .s-banner__danger.s-banner__important {
931
+ --_no-bg: var(--red-500);
932
+ --_no-fc: var(--white);
963
933
  }
964
- .s-btn.s-btn__filled {
965
- border-color: var(--_bu-filled-bc);
966
- background-color: var(--_bu-filled-bg);
967
- box-shadow: var(--_bu-filled-bs);
968
- color: var(--_bu-filled-fc);
934
+ .s-banner__info {
935
+ --_no-bc: var(--theme-secondary-150);
936
+ --_no-bg: var(--theme-secondary-050);
937
+ --_no-btn-bg-focus: var(--theme-secondary-100);
938
+ --_no-btn-bg-active: var(--theme-secondary-150);
939
+ --_no-code-bg: var(--theme-secondary-150);
969
940
  }
970
- .s-btn.s-btn__outlined {
941
+ body.theme-highcontrast .s-banner__info:not(.s-banner__important) {
942
+ --_no-bg: var(--theme-secondary-100);
943
+ }
944
+ @media (prefers-color-scheme: dark) {
945
+ body.theme-highcontrast.theme-system .s-banner__info:not(.s-banner__important) {
946
+ --_no-bg: var(--theme-secondary-100);
947
+ }
948
+ }
949
+ body.theme-highcontrast.theme-dark .s-banner__info:not(.s-banner__important) {
950
+ --_no-bg: var(--theme-secondary-100);
951
+ }
952
+ .s-banner__info.s-banner__important {
953
+ --_no-bc: var(--_no-bg);
954
+ --_no-bg: var(--theme-secondary-400);
955
+ --_no-btn-bg-active: var(--theme-secondary-600);
956
+ --_no-btn-bg-focus: var(--theme-secondary-500);
957
+ }
958
+ @media (prefers-color-scheme: dark) {
959
+ body.theme-system .s-banner__info.s-banner__important {
960
+ --_no-bg: var(--theme-secondary-300);
961
+ --_no-fc: var(--black-900);
962
+ }
963
+ }
964
+ body.theme-dark .s-banner__info.s-banner__important,
965
+ .theme-dark__forced .s-banner__info.s-banner__important,
966
+ body.theme-system .theme-dark__forced .s-banner__info.s-banner__important {
967
+ --_no-bg: var(--theme-secondary-300);
968
+ --_no-fc: var(--black-900);
969
+ }
970
+ @media (prefers-color-scheme: dark) {
971
+ body.theme-highcontrast.theme-system .s-banner__info.s-banner__important {
972
+ --_no-bg: var(--theme-secondary-400);
973
+ --_no-fc: var(--white);
974
+ }
975
+ }
976
+ body.theme-highcontrast.theme-dark .s-banner__info.s-banner__important {
977
+ --_no-bg: var(--theme-secondary-400);
978
+ --_no-fc: var(--white);
979
+ }
980
+ .s-banner__success {
981
+ --_no-bc: var(--green-200);
982
+ --_no-bg: var(--green-050);
983
+ --_no-btn-bg-active: var(--green-200);
984
+ --_no-btn-bg-focus: var(--green-100);
985
+ }
986
+ body.theme-highcontrast .s-banner__success:not(.s-banner__important) {
987
+ --_no-bg: var(--green-200);
988
+ }
989
+ .s-banner__success.s-banner__important {
990
+ --_no-bc: var(--_no-bg);
991
+ --_no-bg: var(--green-400);
992
+ --_no-fc: var(--black-900);
993
+ --_no-btn-bg-active: var(--green-600);
994
+ --_no-btn-bg-focus: var(--green-500);
995
+ }
996
+ @media (prefers-color-scheme: dark) {
997
+ body.theme-system .s-banner__success.s-banner__important {
998
+ --_no-bg: var(--green-500);
999
+ --_no-fc: var(--white);
1000
+ }
1001
+ }
1002
+ body.theme-dark .s-banner__success.s-banner__important,
1003
+ .theme-dark__forced .s-banner__success.s-banner__important,
1004
+ body.theme-system .theme-dark__forced .s-banner__success.s-banner__important {
1005
+ --_no-bg: var(--green-500);
1006
+ --_no-fc: var(--white);
1007
+ }
1008
+ body.theme-highcontrast .s-banner__success.s-banner__important {
1009
+ --_no-bg: var(--green-500);
1010
+ --_no-fc: var(--white);
1011
+ }
1012
+ .s-banner__warning {
1013
+ --_no-bc: var(--yellow-300);
1014
+ --_no-bg: var(--yellow-050);
1015
+ --_no-btn-bg-active: var(--yellow-300);
1016
+ --_no-btn-bg-focus: var(--yellow-200);
1017
+ --_no-code-bg: var(--yellow-200);
1018
+ }
1019
+ body.theme-highcontrast .s-banner__warning:not(.s-banner__important) {
1020
+ --_no-bg: var(--yellow-200);
1021
+ }
1022
+ .s-banner__warning.s-banner__important {
1023
+ --_no-bc: var(--_no-bg);
1024
+ --_no-bg: var(--yellow-400);
1025
+ --_no-fc: var(--black-900);
1026
+ --_no-btn-bg-active: var(--yellow-600);
1027
+ --_no-btn-bg-focus: var(--yellow-500);
1028
+ }
1029
+ @media (prefers-color-scheme: dark) {
1030
+ body.theme-system .s-banner__warning.s-banner__important {
1031
+ --_no-bg: var(--yellow-600);
1032
+ --_no-fc: var(--white);
1033
+ }
1034
+ }
1035
+ body.theme-dark .s-banner__warning.s-banner__important,
1036
+ .theme-dark__forced .s-banner__warning.s-banner__important,
1037
+ body.theme-system .theme-dark__forced .s-banner__warning.s-banner__important {
1038
+ --_no-bg: var(--yellow-600);
1039
+ --_no-fc: var(--white);
1040
+ }
1041
+ body.theme-highcontrast .s-banner__warning.s-banner__important {
1042
+ --_no-bg: var(--yellow-700);
1043
+ --_no-fc: var(--white);
1044
+ }
1045
+ .s-banner code {
1046
+ background: var(--_no-code-bg, transparent);
1047
+ }
1048
+ .s-banner .s-banner--btn {
1049
+ color: inherit;
1050
+ padding: var(--su8);
1051
+ }
1052
+ .s-banner .s-banner--btn:not(:focus) {
1053
+ box-shadow: none;
1054
+ }
1055
+ .s-banner .s-banner--btn:active {
1056
+ background: var(--_no-btn-bg-active);
1057
+ }
1058
+ .s-banner .s-banner--btn:focus,
1059
+ .s-banner .s-banner--btn:hover {
1060
+ background: var(--_no-btn-bg-focus);
1061
+ }
1062
+ .s-banner[aria-hidden="true"] {
1063
+ --_no-x-offset: calc(var(--su48) + var(--su2) * -1);
1064
+ opacity: 0;
1065
+ visibility: hidden;
1066
+ }
1067
+ .s-banner[aria-hidden="false"] {
1068
+ --_no-x-offset: calc(var(--su48) + var(--su1));
1069
+ opacity: 1;
1070
+ visibility: visible;
1071
+ }
1072
+ .s-banner.is-pinned {
1073
+ z-index: calc(var(--zi-navigation-fixed) + 1);
1074
+ }
1075
+ .s-banner__body-pt {
1076
+ padding-top: 93px;
1077
+ }
1078
+ .s-banner .s-banner--container {
1079
+ margin: 0 auto;
1080
+ max-width: calc(var(--s-step) * 10);
1081
+ position: relative;
1082
+ width: 100%;
1083
+ }
1084
+ a.s-block-link,
1085
+ .s-block-link {
1086
+ --_bl-bg: transparent;
1087
+ --_bl-fc: var(--black-600);
1088
+ --_bl-fc-hover: var(--black-800);
1089
+ --_bl-fc-visited: var(--_bl-fc);
1090
+ background-color: var(--_bl-bg);
1091
+ color: var(--_bl-fc);
1092
+ border-radius: 0;
1093
+ border: none;
1094
+ cursor: pointer;
1095
+ display: block;
1096
+ font-family: inherit;
1097
+ line-height: inherit;
1098
+ padding: var(--su6) var(--su12);
1099
+ text-align: left;
1100
+ width: 100%;
1101
+ }
1102
+ @media (prefers-color-scheme: dark) {
1103
+ body.theme-system a.s-block-link.is-selected,
1104
+ body.theme-system .s-block-link.is-selected {
1105
+ --_bl-bg: var(--black-025);
1106
+ }
1107
+ }
1108
+ body.theme-dark a.s-block-link.is-selected,
1109
+ body.theme-dark .s-block-link.is-selected,
1110
+ .theme-dark__forced a.s-block-link.is-selected,
1111
+ .theme-dark__forced .s-block-link.is-selected,
1112
+ body.theme-system .theme-dark__forced a.s-block-link.is-selected,
1113
+ body.theme-system .theme-dark__forced .s-block-link.is-selected {
1114
+ --_bl-bg: var(--black-025);
1115
+ }
1116
+ a.s-block-link.is-selected,
1117
+ .s-block-link.is-selected {
1118
+ --_bl-bg: var(--black-050);
1119
+ --_bl-fc: var(--black-800);
1120
+ font-weight: bold;
1121
+ }
1122
+ a.s-block-linka.s-block-link__left.is-selected,
1123
+ a.s-block-link.s-block-link__left.is-selected,
1124
+ .s-block-linka.s-block-link__left.is-selected,
1125
+ .s-block-link.s-block-link__left.is-selected,
1126
+ a.s-block-linka.s-block-link__right.is-selected,
1127
+ a.s-block-link.s-block-link__right.is-selected,
1128
+ .s-block-linka.s-block-link__right.is-selected,
1129
+ .s-block-link.s-block-link__right.is-selected {
1130
+ box-shadow: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--theme-primary-color);
1131
+ }
1132
+ a.s-block-linka.s-block-link__left.is-selected:focus:not(:focus-visible),
1133
+ a.s-block-link.s-block-link__left.is-selected:focus:not(:focus-visible),
1134
+ .s-block-linka.s-block-link__left.is-selected:focus:not(:focus-visible),
1135
+ .s-block-link.s-block-link__left.is-selected:focus:not(:focus-visible),
1136
+ a.s-block-linka.s-block-link__right.is-selected:focus:not(:focus-visible),
1137
+ a.s-block-link.s-block-link__right.is-selected:focus:not(:focus-visible),
1138
+ .s-block-linka.s-block-link__right.is-selected:focus:not(:focus-visible),
1139
+ .s-block-link.s-block-link__right.is-selected:focus:not(:focus-visible),
1140
+ a.s-block-linka.s-block-link__left.is-selected:focus-visible,
1141
+ a.s-block-link.s-block-link__left.is-selected:focus-visible,
1142
+ .s-block-linka.s-block-link__left.is-selected:focus-visible,
1143
+ .s-block-link.s-block-link__left.is-selected:focus-visible,
1144
+ a.s-block-linka.s-block-link__right.is-selected:focus-visible,
1145
+ a.s-block-link.s-block-link__right.is-selected:focus-visible,
1146
+ .s-block-linka.s-block-link__right.is-selected:focus-visible,
1147
+ .s-block-link.s-block-link__right.is-selected:focus-visible {
1148
+ outline: none;
1149
+ }
1150
+ a.s-block-linka.s-block-link__left.is-selected:focus-visible,
1151
+ a.s-block-link.s-block-link__left.is-selected:focus-visible,
1152
+ .s-block-linka.s-block-link__left.is-selected:focus-visible,
1153
+ .s-block-link.s-block-link__left.is-selected:focus-visible,
1154
+ a.s-block-linka.s-block-link__right.is-selected:focus-visible,
1155
+ a.s-block-link.s-block-link__right.is-selected:focus-visible,
1156
+ .s-block-linka.s-block-link__right.is-selected:focus-visible,
1157
+ .s-block-link.s-block-link__right.is-selected:focus-visible {
1158
+ box-shadow: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--theme-primary-color), 0 0 0 var(--su-static4) var(--focus-ring-muted);
1159
+ }
1160
+ a.s-block-linka.s-block-link__right.is-selected,
1161
+ a.s-block-link.s-block-link__right.is-selected,
1162
+ .s-block-linka.s-block-link__right.is-selected,
1163
+ .s-block-link.s-block-link__right.is-selected {
1164
+ --_li-block-bs-offset-x: -3px;
1165
+ }
1166
+ a.s-block-linka.s-block-link__danger,
1167
+ a.s-block-link.s-block-link__danger,
1168
+ .s-block-linka.s-block-link__danger,
1169
+ .s-block-link.s-block-link__danger {
1170
+ --_bl-fc: var(--red-500);
1171
+ --_bl-fc-hover: var(--red-700);
1172
+ }
1173
+ a.s-block-link:active,
1174
+ .s-block-link:active,
1175
+ a.s-block-link:hover,
1176
+ .s-block-link:hover,
1177
+ a.s-block-link:active:visited,
1178
+ .s-block-link:active:visited,
1179
+ a.s-block-link:hover:visited,
1180
+ .s-block-link:hover:visited {
1181
+ color: var(--_bl-fc-hover);
1182
+ }
1183
+ a.s-block-link:visited,
1184
+ .s-block-link:visited {
1185
+ color: var(--_bl-fc-focus);
1186
+ }
1187
+ a.s-block-link:focus:not(:focus-visible),
1188
+ .s-block-link:focus:not(:focus-visible) {
1189
+ outline: none;
1190
+ box-shadow: none;
1191
+ }
1192
+ a.s-block-link:focus-visible,
1193
+ .s-block-link:focus-visible {
1194
+ outline: none;
1195
+ box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
1196
+ }
1197
+ .s-breadcrumbs {
1198
+ --_br-divider-px: var(--su4);
1199
+ --_br-link-fc: var(--fc-light);
1200
+ align-items: flex-start;
1201
+ color: var(--black-200);
1202
+ display: flex;
1203
+ flex-wrap: wrap;
1204
+ font-size: var(--fs-caption);
1205
+ }
1206
+ @media (max-width: 640px) {
1207
+ .s-breadcrumbs {
1208
+ --_br-divider-px: var(--su2);
1209
+ }
1210
+ }
1211
+ .s-breadcrumbs .s-breadcrumbs--divider {
1212
+ margin-left: var(--_br-divider-px);
1213
+ margin-right: var(--_br-divider-px);
1214
+ }
1215
+ body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
1216
+ color: var(--fc-light);
1217
+ }
1218
+ .s-breadcrumbs .s-breadcrumbs--item {
1219
+ align-items: center;
1220
+ display: flex;
1221
+ flex-wrap: nowrap;
1222
+ margin-bottom: var(--su2);
1223
+ margin-top: var(--su2);
1224
+ }
1225
+ .s-breadcrumbs .s-breadcrumbs--link {
1226
+ color: var(--_br-link-fc);
1227
+ }
1228
+ .s-breadcrumbs .s-breadcrumbs--link:hover {
1229
+ --_br-link-fc: var(--fc-medium);
1230
+ }
1231
+ .s-btn {
1232
+ --_bu-baw: var(--su-static1);
1233
+ --_bu-bc: transparent;
1234
+ --_bu-bg: transparent;
1235
+ --_bu-br: var(--br-sm);
1236
+ --_bu-bs: none;
1237
+ --_bu-fc: var(--theme-button-color);
1238
+ --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring);
1239
+ --_bu-fs: var(--fs-body1);
1240
+ --_bu-p: 0.8em;
1241
+ --_bu-bc-selected: transparent;
1242
+ --_bu-bg-active: var(--theme-button-active-background-color);
1243
+ --_bu-bg-hover: var(--theme-button-hover-background-color);
1244
+ --_bu-bg-selected: var(--theme-button-selected-background-color);
1245
+ --_bu-fc-active: var(--theme-button-hover-color);
1246
+ --_bu-fc-hover: var(--theme-button-hover-color);
1247
+ --_bu-fc-selected: var(--theme-button-selected-color);
1248
+ --_bu-filled-bc: var(--theme-button-filled-border-color);
1249
+ --_bu-filled-bc-active: var(--theme-button-filled-active-border-color);
1250
+ --_bu-filled-bg-hover: var(--theme-button-filled-hover-background-color);
1251
+ --_bu-filled-bc-selected: var(--theme-button-filled-selected-border-color);
1252
+ --_bu-filled-bg: var(--theme-button-filled-background-color);
1253
+ --_bu-filled-bg-active: var(--theme-button-filled-active-background-color);
1254
+ --_bu-filled-bg-selected: var(--theme-button-filled-selected-background-color);
1255
+ --_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.7);
1256
+ --_bu-filled-fc: var(--theme-button-filled-color);
1257
+ --_bu-filled-fc-active: var(--theme-button-filled-hover-color);
1258
+ --_bu-filled-fc-hover: var(--theme-button-filled-hover-color);
1259
+ --_bu-filled-fc-selected: var(--theme-button-filled-selected-color);
1260
+ --_bu-outlined-bc: var(--theme-button-outlined-border-color);
1261
+ --_bu-outlined-bg: var(--theme-button-outlined-background-color);
1262
+ --_bu-outlined-bc-selected: var(--theme-button-outlined-selected-border-color);
1263
+ --_bu-outlined-bg-selected: var(--theme-button-selected-background-color);
1264
+ --_bu-outlined-fc-selected: var(--theme-button-selected-color);
1265
+ --_bu-badge-o: 0.5;
1266
+ --_bu-dropdown-bw: var(--su-static4);
1267
+ --_bu-number-fc: var(--white);
1268
+ --_bu-number-fc-selected: var(--_bu-number-fc);
1269
+ background-color: var(--_bu-bg);
1270
+ border: var(--_bu-baw) solid var(--_bu-bc);
1271
+ border-radius: var(--_bu-br);
1272
+ box-shadow: var(--_bu-bs);
1273
+ color: var(--_bu-fc);
1274
+ font-size: var(--_bu-fs);
1275
+ padding: var(--_bu-p);
1276
+ cursor: pointer;
1277
+ display: inline-block;
1278
+ font-family: inherit;
1279
+ font-weight: normal;
1280
+ line-height: var(--lh-sm);
1281
+ position: relative;
1282
+ outline: none;
1283
+ text-align: center;
1284
+ text-decoration: none;
1285
+ user-select: none;
1286
+ }
1287
+ @media (prefers-color-scheme: dark) {
1288
+ body.theme-system .s-btn {
1289
+ --_bu-bs: none;
1290
+ --_bu-filled-bs: var(--_bu-bs);
1291
+ }
1292
+ }
1293
+ body.theme-dark .s-btn,
1294
+ .theme-dark__forced .s-btn,
1295
+ body.theme-system .theme-dark__forced .s-btn {
1296
+ --_bu-bs: none;
1297
+ --_bu-filled-bs: var(--_bu-bs);
1298
+ }
1299
+ body.theme-highcontrast .s-btn {
1300
+ --_bu-bc: currentColor;
1301
+ --_bu-filled-bc: var(--_bu-bc);
1302
+ --_bu-outlined-bc: var(--_bu-bc);
1303
+ --_bu-bc-selected: var(--_bu-bc);
1304
+ --_bu-badge-o: 0.8;
1305
+ }
1306
+ fieldset[disabled] .s-btn,
1307
+ .s-btn[disabled],
1308
+ .s-btn[aria-disabled="true"] {
1309
+ --_bu-bs: none !important;
1310
+ --_bu-filled-bs: var(--_bu-bs);
1311
+ opacity: var(--_o-disabled-static);
1312
+ pointer-events: none;
1313
+ text-decoration: none;
1314
+ }
1315
+ button .s-btn,
1316
+ button[type="submit"] .s-btn,
1317
+ button[type="reset"] .s-btn {
1318
+ -webkit-appearance: button;
1319
+ }
1320
+ .s-btn.grid {
1321
+ display: flex;
1322
+ }
1323
+ .s-btn.is-loading {
1324
+ padding-left: 2.2em;
1325
+ }
1326
+ .s-btn.is-loading .svg-icon:first-child {
1327
+ margin-left: -23px;
1328
+ opacity: 0;
1329
+ }
1330
+ .s-btn.is-selected,
1331
+ .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn {
1332
+ background-color: var(--_bu-bg-selected);
1333
+ border-color: var(--_bu-bc-selected);
1334
+ color: var(--_bu-fc-selected);
1335
+ }
1336
+ .s-btn.is-selected .s-btn--number,
1337
+ .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn .s-btn--number {
1338
+ color: var(--_bu-number-fc-selected);
1339
+ }
1340
+ .s-btn.is-selected.s-btn__filled,
1341
+ .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn.s-btn__filled {
1342
+ border-color: var(--_bu-filled-bc-selected);
1343
+ background-color: var(--_bu-filled-bg-selected);
1344
+ color: var(--_bu-filled-fc-selected);
1345
+ }
1346
+ .s-btn.is-selected.s-btn__outlined,
1347
+ .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn.s-btn__outlined {
1348
+ border-color: var(--_bu-outlined-bc-selected);
1349
+ background-color: var(--_bu-outlined-bg-selected);
1350
+ color: var(--_bu-outlined-fc-selected);
1351
+ }
1352
+ body.theme-highcontrast .s-btn.is-selected.s-btn__outlined.s-btn__muted,
1353
+ body.theme-highcontrast .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn.s-btn__outlined.s-btn__muted {
1354
+ --_bu-outlined-bc-selected: var(--_bu-filled-bc-selected);
1355
+ --_bu-outlined-bg-selected: var(--_bu-filled-bg-selected);
1356
+ --_bu-outlined-fc-selected: var(--_bu-filled-fc-selected);
1357
+ --_bu-number-fc-selected: var(--_bu-filled-bg-selected);
1358
+ }
1359
+ .s-btn.is-selected:not(:focus),
1360
+ .s-btn-group.s-btn-group--radio .s-btn--radio:checked:not(:focus) + .s-btn {
1361
+ box-shadow: none;
1362
+ }
1363
+ .s-btn.s-btn__filled {
1364
+ border-color: var(--_bu-filled-bc);
1365
+ background-color: var(--_bu-filled-bg);
1366
+ box-shadow: var(--_bu-filled-bs);
1367
+ color: var(--_bu-filled-fc);
1368
+ }
1369
+ .s-btn.s-btn__outlined {
971
1370
  border-color: var(--_bu-outlined-bc);
972
1371
  background-color: var(--_bu-outlined-bg);
973
1372
  }
974
- .s-btn.s-btn__link,
975
- .s-btn.s-btn__unset {
976
- outline: initial;
977
- }
978
1373
  .s-btn.s-btn__link:focus,
979
1374
  .s-btn.s-btn__unset:focus,
980
1375
  .s-btn.s-btn__link:focus-visible,
@@ -997,6 +1392,7 @@ body.theme-highcontrast .s-btn-group.s-btn-group--radio .s-btn--radio:checked +
997
1392
  user-select: auto;
998
1393
  display: inline;
999
1394
  font: inherit;
1395
+ outline: revert;
1000
1396
  text-align: inherit;
1001
1397
  }
1002
1398
  .s-btn.s-btn__link,
@@ -1076,6 +1472,11 @@ body.theme-highcontrast .s-btn.s-btn__link {
1076
1472
  --_li-fc-hover: var(--black-600);
1077
1473
  --_li-fc-visited: var(--black-700);
1078
1474
  }
1475
+ fieldset[disabled] .s-btn.s-btn__link {
1476
+ box-shadow: none !important;
1477
+ opacity: var(--_o-disabled-static);
1478
+ pointer-events: none;
1479
+ }
1079
1480
  .s-btn.s-btn__link:active,
1080
1481
  .s-btn.s-btn__link:hover {
1081
1482
  color: var(--_li-fc-hover);
@@ -1090,7 +1491,10 @@ button.s-btn.s-btn__link {
1090
1491
  user-select: auto;
1091
1492
  }
1092
1493
  button.s-btn.s-btn__link:focus {
1093
- outline: none;
1494
+ outline: revert;
1495
+ }
1496
+ .s-btn.s-btn__unset {
1497
+ outline: initial;
1094
1498
  }
1095
1499
  .s-btn.s-btn__unset,
1096
1500
  .s-btn.s-btn__unset:hover,
@@ -1130,16 +1534,16 @@ button.s-btn.s-btn__link:focus {
1130
1534
  transition: opacity 200ms var(--te-smooth);
1131
1535
  }
1132
1536
  .s-btn.s-btn__xs {
1133
- --_bu-dropdown-bw: calc(var(--su-static4) - var(--su-static1));
1134
1537
  --_bu-fs: var(--fs-fine);
1538
+ --_bu-dropdown-bw: calc(var(--su-static4) - var(--su-static1));
1135
1539
  --_bu-p: 0.6em;
1136
1540
  }
1137
1541
  .s-btn.s-btn__sm {
1138
1542
  --_bu-fs: var(--fs-caption);
1139
1543
  }
1140
1544
  .s-btn.s-btn__md {
1141
- --_bu-br: calc(var(--br-sm) + var(--su-static1));
1142
1545
  --_bu-fs: var(--fs-body3);
1546
+ --_bu-br: calc(var(--br-sm) + var(--su-static1));
1143
1547
  --_bu-p: 0.7em;
1144
1548
  }
1145
1549
  body.theme-highcontrast .s-btn.s-btn__danger,
@@ -1384,243 +1788,259 @@ body.theme-highcontrast .s-btn.s-btn__github {
1384
1788
  box-shadow: var(--_bu-focus-ring);
1385
1789
  outline: none;
1386
1790
  }
1387
- .s-empty-state {
1388
- color: var(--fc-light);
1389
- text-align: center;
1390
- margin-left: auto;
1391
- margin-right: auto;
1791
+ .s-btn-group {
1792
+ display: flex;
1793
+ flex-wrap: wrap;
1794
+ margin-bottom: var(--su-static1);
1392
1795
  }
1393
- .s-empty-state p {
1394
- font-size: var(--fs-body1);
1395
- margin-bottom: var(--su12);
1796
+ @media (max-width: 640px) {
1797
+ html .s-btn-group .s-btn {
1798
+ padding-left: 0.4em;
1799
+ padding-right: 0.4em;
1800
+ }
1801
+ html .s-btn-group .s-btn.s-btn__dropdown {
1802
+ padding-right: 1.2em;
1803
+ }
1804
+ html .s-btn-group .s-btn.s-btn__dropdown:after {
1805
+ right: 0.4em;
1806
+ }
1396
1807
  }
1397
- .s-empty-state p strong {
1398
- color: var(--fc-dark);
1808
+ .s-btn-group:not(.s-btn-group--radio) .s-btn:not(:first-child):not(:last-child),
1809
+ .s-btn-group.s-btn-group--radio .s-btn:not(:first-of-type):not(:last-of-type) {
1810
+ border-radius: 0;
1399
1811
  }
1400
- a.s-block-link,
1401
- .s-block-link {
1402
- --_bl-bg: transparent;
1403
- --_bl-fc: var(--black-600);
1404
- --_bl-fc-hover: var(--black-800);
1405
- --_bl-fc-visited: var(--_bl-fc);
1406
- background-color: var(--_bl-bg);
1407
- color: var(--_bl-fc);
1812
+ .s-btn-group:not(.s-btn-group--radio) .s-btn:first-child:not(:only-child),
1813
+ .s-btn-group.s-btn-group--radio .s-btn:first-of-type:not(:last-of-type) {
1814
+ border-top-right-radius: 0;
1815
+ border-bottom-right-radius: 0;
1816
+ }
1817
+ .s-btn-group:not(.s-btn-group--radio) .s-btn:last-child:not(:only-child),
1818
+ .s-btn-group.s-btn-group--radio .s-btn:last-of-type:not(:first-of-type) {
1819
+ border-top-left-radius: 0;
1820
+ border-bottom-left-radius: 0;
1821
+ }
1822
+ .s-btn-group:not(.s-btn-group--radio) .s-btn:not(:last-child),
1823
+ .s-btn-group.s-btn-group--radio .s-btn:not(:last-of-type) {
1824
+ margin-right: calc(var(--su-static1) * -1);
1825
+ }
1826
+ .s-btn-group form {
1827
+ display: flex;
1828
+ margin-right: calc(var(--su-static1) * -1);
1829
+ }
1830
+ .s-btn-group form:not(:first-child):not(:last-child) .s-btn {
1408
1831
  border-radius: 0;
1409
- border: none;
1410
- cursor: pointer;
1411
- display: block;
1412
- font-family: inherit;
1413
- line-height: inherit;
1414
- padding: var(--su6) var(--su12);
1415
- text-align: left;
1416
- width: 100%;
1417
1832
  }
1418
- @media (prefers-color-scheme: dark) {
1419
- body.theme-system a.s-block-link.is-selected,
1420
- body.theme-system .s-block-link.is-selected {
1421
- --_bl-bg: var(--black-025);
1422
- }
1833
+ .s-btn-group form:last-child:not(:only-child) .s-btn:not(:last-child) {
1834
+ border-radius: 0;
1423
1835
  }
1424
- body.theme-dark a.s-block-link.is-selected,
1425
- body.theme-dark .s-block-link.is-selected,
1426
- .theme-dark__forced a.s-block-link.is-selected,
1427
- .theme-dark__forced .s-block-link.is-selected,
1428
- body.theme-system .theme-dark__forced a.s-block-link.is-selected,
1429
- body.theme-system .theme-dark__forced .s-block-link.is-selected {
1430
- --_bl-bg: var(--black-025);
1836
+ .s-btn-group form:first-child:not(:only-child) .s-btn:not(:first-child) {
1837
+ border-radius: 0;
1431
1838
  }
1432
- a.s-block-link.is-selected,
1433
- .s-block-link.is-selected {
1434
- --_bl-bg: var(--black-050);
1435
- --_bl-fc: var(--black-800);
1436
- font-weight: bold;
1839
+ .s-btn-group .s-btn {
1840
+ margin-bottom: calc(var(--su-static1) * -1);
1841
+ white-space: nowrap;
1437
1842
  }
1438
- a.s-block-linka.s-block-link__left.is-selected,
1439
- a.s-block-link.s-block-link__left.is-selected,
1440
- .s-block-linka.s-block-link__left.is-selected,
1441
- .s-block-link.s-block-link__left.is-selected,
1442
- a.s-block-linka.s-block-link__right.is-selected,
1443
- a.s-block-link.s-block-link__right.is-selected,
1444
- .s-block-linka.s-block-link__right.is-selected,
1445
- .s-block-link.s-block-link__right.is-selected {
1446
- box-shadow: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--theme-primary-color);
1843
+ .s-btn-group .s-btn:active {
1844
+ z-index: var(--zi-active);
1447
1845
  }
1448
- a.s-block-linka.s-block-link__left.is-selected:focus:not(:focus-visible),
1449
- a.s-block-link.s-block-link__left.is-selected:focus:not(:focus-visible),
1450
- .s-block-linka.s-block-link__left.is-selected:focus:not(:focus-visible),
1451
- .s-block-link.s-block-link__left.is-selected:focus:not(:focus-visible),
1452
- a.s-block-linka.s-block-link__right.is-selected:focus:not(:focus-visible),
1453
- a.s-block-link.s-block-link__right.is-selected:focus:not(:focus-visible),
1454
- .s-block-linka.s-block-link__right.is-selected:focus:not(:focus-visible),
1455
- .s-block-link.s-block-link__right.is-selected:focus:not(:focus-visible),
1456
- a.s-block-linka.s-block-link__left.is-selected:focus-visible,
1457
- a.s-block-link.s-block-link__left.is-selected:focus-visible,
1458
- .s-block-linka.s-block-link__left.is-selected:focus-visible,
1459
- .s-block-link.s-block-link__left.is-selected:focus-visible,
1460
- a.s-block-linka.s-block-link__right.is-selected:focus-visible,
1461
- a.s-block-link.s-block-link__right.is-selected:focus-visible,
1462
- .s-block-linka.s-block-link__right.is-selected:focus-visible,
1463
- .s-block-link.s-block-link__right.is-selected:focus-visible {
1464
- outline: none;
1846
+ .s-btn-group .s-btn.is-selected,
1847
+ .s-btn-group .s-btn--radio:checked + .s-btn {
1848
+ z-index: var(--zi-selected);
1465
1849
  }
1466
- a.s-block-linka.s-block-link__left.is-selected:focus-visible,
1467
- a.s-block-link.s-block-link__left.is-selected:focus-visible,
1468
- .s-block-linka.s-block-link__left.is-selected:focus-visible,
1469
- .s-block-link.s-block-link__left.is-selected:focus-visible,
1470
- a.s-block-linka.s-block-link__right.is-selected:focus-visible,
1471
- a.s-block-link.s-block-link__right.is-selected:focus-visible,
1472
- .s-block-linka.s-block-link__right.is-selected:focus-visible,
1473
- .s-block-link.s-block-link__right.is-selected:focus-visible {
1474
- box-shadow: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--theme-primary-color), 0 0 0 var(--su-static4) var(--focus-ring-muted);
1850
+ .s-card {
1851
+ --_ca-bc: var(--bc-medium);
1852
+ border: var(--su-static1) solid var(--_ca-bc);
1853
+ background-color: var(--white);
1854
+ border-radius: var(--br-sm);
1855
+ padding: var(--su12);
1475
1856
  }
1476
- a.s-block-linka.s-block-link__right.is-selected,
1477
- a.s-block-link.s-block-link__right.is-selected,
1478
- .s-block-linka.s-block-link__right.is-selected,
1479
- .s-block-link.s-block-link__right.is-selected {
1480
- --_li-block-bs-offset-x: -3px;
1857
+ a.s-card {
1858
+ text-decoration: none !important;
1481
1859
  }
1482
- a.s-block-linka.s-block-link__danger,
1483
- a.s-block-link.s-block-link__danger,
1484
- .s-block-linka.s-block-link__danger,
1485
- .s-block-link.s-block-link__danger {
1486
- --_bl-fc: var(--red-500);
1487
- --_bl-fc-hover: var(--red-700);
1860
+ .s-card.s-card__muted {
1861
+ --_ca-bc: var(--bc-light);
1488
1862
  }
1489
- a.s-block-link:active,
1490
- .s-block-link:active,
1491
- a.s-block-link:hover,
1492
- .s-block-link:hover,
1493
- a.s-block-link:active:visited,
1494
- .s-block-link:active:visited,
1495
- a.s-block-link:hover:visited,
1496
- .s-block-link:hover:visited {
1497
- color: var(--_bl-fc-hover);
1863
+ .s-card.s-card__muted > * {
1864
+ opacity: 0.65;
1498
1865
  }
1499
- a.s-block-link:visited,
1500
- .s-block-link:visited {
1501
- color: var(--_bl-fc-focus);
1866
+ .s-card > :last-child {
1867
+ margin-bottom: 0;
1502
1868
  }
1503
- a.s-block-link:focus:not(:focus-visible),
1504
- .s-block-link:focus:not(:focus-visible) {
1505
- outline: none;
1506
- box-shadow: none;
1869
+ .s-check-control {
1870
+ --_cc-ai: center;
1871
+ align-items: var(--_cc-ai);
1872
+ display: flex;
1873
+ gap: var(--su8);
1507
1874
  }
1508
- a.s-block-link:focus-visible,
1509
- .s-block-link:focus-visible {
1510
- outline: none;
1511
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
1875
+ .s-check-group .s-check-control {
1876
+ --_cc-ai: flex-start;
1512
1877
  }
1513
- .s-breadcrumbs {
1514
- --_br-divider-px: var(--su4);
1515
- --_br-link-fc: var(--fc-light);
1516
- align-items: flex-start;
1517
- color: var(--black-200);
1878
+ .s-check-control .s-label {
1879
+ font-weight: normal;
1880
+ }
1881
+ .s-check-group {
1882
+ --_cg-fd: column;
1883
+ flex-direction: var(--_cg-fd);
1518
1884
  display: flex;
1519
- flex-wrap: wrap;
1520
- font-size: var(--fs-caption);
1885
+ gap: var(--su8);
1521
1886
  }
1522
- @media (max-width: 640px) {
1523
- .s-breadcrumbs {
1524
- --_br-divider-px: var(--su2);
1525
- }
1887
+ .s-check-group.s-check-group__horizontal {
1888
+ --_cg-fd: row;
1526
1889
  }
1527
- .s-breadcrumbs .s-breadcrumbs--divider {
1528
- margin-left: var(--_br-divider-px);
1529
- margin-right: var(--_br-divider-px);
1890
+ .s-check-group legend.s-label {
1891
+ margin-bottom: var(--su8);
1530
1892
  }
1531
- body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
1532
- color: var(--fc-light);
1893
+ .s-checkbox,
1894
+ .s-radio {
1895
+ --_ch-baw: var(--su-static1);
1896
+ --_ch-bc: var(--bc-darker);
1897
+ --_ch-bc-focus: var(--theme-secondary-300);
1898
+ --_ch-bg: var(--white);
1899
+ --_ch-bg-image: unset;
1900
+ --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
1901
+ background-color: var(--_ch-bg);
1902
+ border: var(--_ch-baw) solid var(--_ch-bc);
1903
+ appearance: none;
1904
+ cursor: pointer;
1905
+ font-size: inherit;
1906
+ height: 1em;
1907
+ margin: 0;
1908
+ outline: 0;
1909
+ vertical-align: middle;
1910
+ width: 1em;
1533
1911
  }
1534
- .s-breadcrumbs .s-breadcrumbs--item {
1535
- align-items: center;
1536
- display: flex;
1537
- flex-wrap: nowrap;
1538
- margin-bottom: var(--su2);
1539
- margin-top: var(--su2);
1912
+ fieldset[disabled] .s-checkbox,
1913
+ fieldset[disabled] .s-radio,
1914
+ .s-checkbox[disabled],
1915
+ .s-radio[disabled] {
1916
+ cursor: not-allowed;
1917
+ opacity: var(--_o-disabled-static);
1540
1918
  }
1541
- .s-breadcrumbs .s-breadcrumbs--link {
1542
- color: var(--_br-link-fc);
1919
+ .s-check-group .s-checkbox,
1920
+ .s-check-group .s-radio {
1921
+ margin-top: calc(var(--su2) + var(--su1));
1543
1922
  }
1544
- .s-breadcrumbs .s-breadcrumbs--link:hover {
1545
- --_br-link-fc: var(--fc-medium);
1923
+ input.s-checkbox,
1924
+ input.s-radio {
1925
+ flex-shrink: 0;
1546
1926
  }
1547
- .s-btn-group {
1548
- display: flex;
1549
- flex-wrap: wrap;
1550
- margin-bottom: var(--su-static1);
1927
+ .s-checkbox:focus,
1928
+ .s-radio:focus {
1929
+ box-shadow: var(--_ch-bs-focus);
1551
1930
  }
1552
- @media (max-width: 640px) {
1553
- html .s-btn-group .s-btn {
1554
- padding-left: 0.4em;
1555
- padding-right: 0.4em;
1556
- }
1557
- html .s-btn-group .s-btn.s-btn__dropdown {
1558
- padding-right: 1.2em;
1559
- }
1560
- html .s-btn-group .s-btn.s-btn__dropdown:after {
1561
- right: 0.4em;
1931
+ .s-checkbox {
1932
+ background-image: var(--_ch-bg-image);
1933
+ background-position: center center;
1934
+ background-repeat: no-repeat;
1935
+ background-size: contain;
1936
+ border-radius: var(--br-sm);
1937
+ }
1938
+ @media (prefers-color-scheme: dark) {
1939
+ body.theme-highcontrast.theme-system .s-checkbox:checked,
1940
+ body.theme-highcontrast.theme-system .s-checkbox:indeterminate {
1941
+ --_ch-bc: var(--blue-700) !important;
1942
+ --_ch-bc-focus: var(--_ch-bc);
1943
+ --_ch-bg: var(--blue-300);
1562
1944
  }
1563
1945
  }
1564
- .s-btn-group:not(.s-btn-group--radio) .s-btn:not(:first-child):not(:last-child),
1565
- .s-btn-group.s-btn-group--radio .s-btn:not(:first-of-type):not(:last-of-type) {
1566
- border-radius: 0;
1946
+ body.theme-highcontrast.theme-dark .s-checkbox:checked,
1947
+ body.theme-highcontrast.theme-dark .s-checkbox:indeterminate {
1948
+ --_ch-bc: var(--blue-700) !important;
1949
+ --_ch-bc-focus: var(--_ch-bc);
1950
+ --_ch-bg: var(--blue-300);
1951
+ }
1952
+ .s-checkbox:checked,
1953
+ .s-checkbox:indeterminate {
1954
+ --_ch-bc: var(--theme-secondary-400) !important;
1955
+ --_ch-bg: var(--theme-secondary-400);
1567
1956
  }
1568
- .s-btn-group:not(.s-btn-group--radio) .s-btn:first-child:not(:only-child),
1569
- .s-btn-group.s-btn-group--radio .s-btn:first-of-type:not(:last-of-type) {
1570
- border-top-right-radius: 0;
1571
- border-bottom-right-radius: 0;
1957
+ .s-checkbox:checked:focus,
1958
+ .s-checkbox:indeterminate:focus {
1959
+ --_ch-bc-focus: var(--theme-secondary-400);
1572
1960
  }
1573
- .s-btn-group:not(.s-btn-group--radio) .s-btn:last-child:not(:only-child),
1574
- .s-btn-group.s-btn-group--radio .s-btn:last-of-type:not(:first-of-type) {
1575
- border-top-left-radius: 0;
1576
- border-bottom-left-radius: 0;
1961
+ .s-checkbox:checked {
1962
+ --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E");
1577
1963
  }
1578
- .s-btn-group:not(.s-btn-group--radio) .s-btn:not(:last-child),
1579
- .s-btn-group.s-btn-group--radio .s-btn:not(:last-of-type) {
1580
- margin-right: calc(var(--su-static1) * -1);
1964
+ .s-checkbox:indeterminate {
1965
+ --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='%23fff'/%3E%3C/svg%3E");
1581
1966
  }
1582
- .s-btn-group form {
1583
- display: flex;
1584
- margin-right: calc(var(--su-static1) * -1);
1967
+ .s-checkbox:focus {
1968
+ border-color: var(--_ch-bc-focus);
1585
1969
  }
1586
- .s-btn-group form:not(:first-child):not(:last-child) .s-btn {
1587
- border-radius: 0;
1970
+ .s-radio {
1971
+ border-radius: var(--br-circle);
1588
1972
  }
1589
- .s-btn-group form:last-child:not(:only-child) .s-btn:not(:last-child) {
1590
- border-radius: 0;
1973
+ @media (prefers-color-scheme: dark) {
1974
+ body.theme-highcontrast.theme-system .s-radio:checked {
1975
+ --_ch-bc: var(--blue-300);
1976
+ outline: var(--su-static1) solid var(--black);
1977
+ }
1591
1978
  }
1592
- .s-btn-group form:first-child:not(:only-child) .s-btn:not(:first-child) {
1593
- border-radius: 0;
1979
+ body.theme-highcontrast.theme-dark .s-radio:checked {
1980
+ --_ch-bc: var(--blue-300);
1981
+ outline: var(--su-static1) solid var(--black);
1594
1982
  }
1595
- .s-btn-group .s-btn {
1596
- margin-bottom: calc(var(--su-static1) * -1);
1597
- white-space: nowrap;
1983
+ @media (prefers-color-scheme: dark) {
1984
+ body.theme-system .s-radio:checked {
1985
+ --_ch-bg: var(--black);
1986
+ }
1598
1987
  }
1599
- .s-btn-group .s-btn:active {
1600
- z-index: var(--zi-active);
1988
+ body.theme-dark .s-radio:checked,
1989
+ .theme-dark__forced .s-radio:checked,
1990
+ body.theme-system .theme-dark__forced .s-radio:checked {
1991
+ --_ch-bg: var(--black);
1601
1992
  }
1602
- .s-btn-group .s-btn.is-selected,
1603
- .s-btn-group .s-btn--radio:checked + .s-btn {
1604
- z-index: var(--zi-selected);
1993
+ .s-radio:checked {
1994
+ --_ch-baw: 0.30769231em;
1995
+ --_ch-bc: var(--theme-secondary-400);
1996
+ --_ch-bg: var(--white);
1605
1997
  }
1606
- .s-card {
1607
- --_ca-bc: var(--bc-medium);
1608
- border: var(--su-static1) solid var(--_ca-bc);
1609
- background-color: var(--white);
1610
- border-radius: var(--br-sm);
1611
- padding: var(--su12);
1998
+ .has-error .s-checkbox,
1999
+ .has-error .s-radio:not(:checked),
2000
+ .has-success .s-checkbox,
2001
+ .has-success .s-radio:not(:checked),
2002
+ .has-warning .s-checkbox,
2003
+ .has-warning .s-radio:not(:checked) {
2004
+ --_ch-bc-focus: var(--_ch-bc);
1612
2005
  }
1613
- a.s-card {
1614
- text-decoration: none !important;
2006
+ .has-error .s-checkbox,
2007
+ .has-error .s-radio:not(:checked) {
2008
+ --_ch-bc: var(--red-400);
2009
+ --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-error);
1615
2010
  }
1616
- .s-card.s-card__muted {
1617
- --_ca-bc: var(--bc-light);
2011
+ .has-success .s-checkbox,
2012
+ .has-success .s-radio:not(:checked) {
2013
+ --_ch-bc: var(--green-400);
2014
+ --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-success);
1618
2015
  }
1619
- .s-card.s-card__muted > * {
1620
- opacity: 0.65;
2016
+ .has-warning .s-checkbox,
2017
+ .has-warning .s-radio:not(:checked) {
2018
+ --_ch-bc: var(--yellow-600);
2019
+ --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
1621
2020
  }
1622
- .s-card p:last-of-type {
1623
- margin-bottom: 0;
2021
+ .s-check-control {
2022
+ --_cc-ai: center;
2023
+ align-items: var(--_cc-ai);
2024
+ display: flex;
2025
+ gap: var(--su8);
2026
+ }
2027
+ .s-check-group .s-check-control {
2028
+ --_cc-ai: flex-start;
2029
+ }
2030
+ .s-check-control .s-label {
2031
+ font-weight: normal;
2032
+ }
2033
+ .s-check-group {
2034
+ --_cg-fd: column;
2035
+ flex-direction: var(--_cg-fd);
2036
+ display: flex;
2037
+ gap: var(--su8);
2038
+ }
2039
+ .s-check-group.s-check-group__horizontal {
2040
+ --_cg-fd: row;
2041
+ }
2042
+ .s-check-group legend.s-label {
2043
+ margin-bottom: var(--su8);
1624
2044
  }
1625
2045
  .s-code-block {
1626
2046
  --_cb-line-numbers-bg: var(--black-050);
@@ -1777,6 +2197,27 @@ pre.s-code-block::-webkit-scrollbar-corner {
1777
2197
  background-color: transparent;
1778
2198
  border-color: transparent;
1779
2199
  }
2200
+ .s-description {
2201
+ color: var(--fc-medium);
2202
+ font-size: var(--fs-caption);
2203
+ padding: 0 var(--su2);
2204
+ }
2205
+ .is-disabled .s-description {
2206
+ opacity: var(--_o-disabled-static);
2207
+ }
2208
+ .s-empty-state {
2209
+ color: var(--fc-light);
2210
+ text-align: center;
2211
+ margin-left: auto;
2212
+ margin-right: auto;
2213
+ }
2214
+ .s-empty-state p {
2215
+ font-size: var(--fs-body1);
2216
+ margin-bottom: var(--su12);
2217
+ }
2218
+ .s-empty-state p strong {
2219
+ color: var(--fc-dark);
2220
+ }
1780
2221
  .s-expandable {
1781
2222
  --_ex-after-h: 10px;
1782
2223
  --_ex-after-hmx: 0;
@@ -1789,6 +2230,7 @@ pre.s-code-block::-webkit-scrollbar-corner {
1789
2230
  --_ex-content-transition: margin-bottom 100ms cubic-bezier(0, 0, 0, 1),
1790
2231
  transform 100ms cubic-bezier(1, 0, 1, 1),
1791
2232
  opacity 100ms cubic-bezier(1, 0, 1, 1);
2233
+ --_ex-content-v: unset;
1792
2234
  align-items: flex-start;
1793
2235
  display: flex;
1794
2236
  -webkit-clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
@@ -1808,6 +2250,7 @@ pre.s-code-block::-webkit-scrollbar-corner {
1808
2250
  max-height 0s 100ms,
1809
2251
  transform 100ms cubic-bezier(0, 1, 1, 1),
1810
2252
  opacity 100ms cubic-bezier(0, 1, 1, 1);
2253
+ --_ex-content-v: hidden;
1811
2254
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
1812
2255
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
1813
2256
  overflow: hidden;
@@ -1833,6 +2276,7 @@ pre.s-code-block::-webkit-scrollbar-corner {
1833
2276
  opacity: var(--_ex-content-o);
1834
2277
  -webkit-transform: var(--_ex-content-transform);
1835
2278
  transform: var(--_ex-content-transform);
2279
+ visibility: var(--_ex-content-v);
1836
2280
  -ms-flex-preferred-size: 100%;
1837
2281
  flex-basis: 100%;
1838
2282
  -webkit-transform-origin: 0 0;
@@ -1841,388 +2285,219 @@ pre.s-code-block::-webkit-scrollbar-corner {
1841
2285
  }
1842
2286
  .s-input,
1843
2287
  .s-textarea {
1844
- -webkit-appearance: none;
1845
- width: 100%;
1846
- margin: 0;
1847
- padding: 0.6em 0.7em;
1848
- border: 1px solid var(--bc-darker);
1849
- border-radius: var(--br-sm);
1850
- background-color: var(--white);
1851
- color: var(--fc-dark);
1852
- font-size: var(--fs-body1);
1853
- font-family: inherit;
2288
+ --_in-bc: var(--bc-darker);
2289
+ --_in-bc-focus: var(--theme-secondary-300);
2290
+ --_in-bg: var(--white);
2291
+ --_in-br: var(--br-sm);
2292
+ --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
2293
+ --_in-c: unset;
2294
+ --_in-fc: var(--fc-dark);
2295
+ --_in-fc-focus: var(--black);
2296
+ --_in-fs: var(--fs-body1);
2297
+ --_in-o: unset;
2298
+ --_in-px: 0.7em;
2299
+ --_in-py: 0.6em;
2300
+ --_in-placeholder-fc: var(--black-200);
1854
2301
  scrollbar-color: var(--scrollbar) transparent;
1855
- }
1856
- @supports (-webkit-overflow-scrolling: touch) {
1857
- .s-input,
1858
- .s-textarea {
1859
- font-size: 16px;
1860
- padding: 0.36em 0.55em;
1861
- }
1862
- .s-input::-webkit-input-placeholder,
1863
- .s-textarea::-webkit-input-placeholder {
1864
- line-height: normal !important;
1865
- }
1866
- }
1867
- .s-input::-webkit-input-placeholder,
1868
- .s-textarea::-webkit-input-placeholder {
1869
- color: var(--black-200);
1870
- }
1871
- body.theme-highcontrast .s-input::-webkit-input-placeholder,
1872
- body.theme-highcontrast .s-textarea::-webkit-input-placeholder {
1873
- color: var(--black-400);
1874
- }
1875
- .s-input::placeholder,
1876
- .s-textarea::placeholder {
1877
- color: var(--black-200);
1878
- opacity: 1;
1879
- }
1880
- body.theme-highcontrast .s-input::placeholder,
1881
- body.theme-highcontrast .s-textarea::placeholder {
1882
- color: var(--black-400);
1883
- }
1884
- .s-input::-webkit-scrollbar,
1885
- .s-textarea::-webkit-scrollbar {
1886
- width: calc(var(--su-static12) - var(--su-static2));
1887
- height: calc(var(--su-static12) - var(--su-static2));
1888
- background-color: transparent;
1889
- }
1890
- .s-input::-webkit-scrollbar-track,
1891
- .s-textarea::-webkit-scrollbar-track {
1892
- border-radius: calc(var(--su-static12) - var(--su-static2));
1893
- background-color: transparent;
1894
- }
1895
- .s-input::-webkit-scrollbar-thumb,
1896
- .s-textarea::-webkit-scrollbar-thumb {
1897
- border-radius: calc(var(--su-static12) - var(--su-static2));
1898
- background-color: var(--scrollbar);
1899
- }
1900
- .s-input::-webkit-scrollbar-corner,
1901
- .s-textarea::-webkit-scrollbar-corner {
1902
- background-color: transparent;
1903
- border-color: transparent;
1904
- }
1905
- .s-input::-webkit-contacts-auto-fill-button,
1906
- .s-textarea::-webkit-contacts-auto-fill-button {
1907
- background-color: var(--black);
1908
- }
1909
- .s-input:-webkit-autofill,
1910
- .s-textarea:-webkit-autofill {
1911
- border-color: var(--blue-300);
1912
- -webkit-text-fill-color: var(--black);
1913
- -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-050) inset;
1914
- transition: background-color 0s 50000s;
1915
- }
1916
- .s-input:-webkit-autofill:focus,
1917
- .s-textarea:-webkit-autofill:focus {
1918
- border-color: var(--blue-300);
1919
- -webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset, 0 0 0 var(--su-static4) var(--focus-ring);
1920
- }
1921
- .s-input.s-input__search,
1922
- .s-input.s-input__creditcard {
1923
- padding-left: var(--su-static32);
1924
- }
1925
- fieldset {
1926
- min-width: 0;
1927
- padding: 0;
1928
- border: 0;
1929
- }
1930
- fieldset[disabled] a,
1931
- fieldset[disabled] .s-btn,
1932
- fieldset[disabled] .s-link {
1933
- box-shadow: none !important;
1934
- opacity: var(--_o-disabled-static);
1935
- pointer-events: none;
1936
- }
1937
- fieldset[disabled] .s-checkbox,
1938
- fieldset[disabled] .s-input-message,
1939
- fieldset[disabled] .s-radio,
1940
- fieldset[disabled] .s-toggle-switch,
1941
- fieldset[disabled] .s-toggle-switch label {
1942
- cursor: not-allowed;
1943
- opacity: var(--_o-disabled-static);
1944
- }
1945
- fieldset[disabled] .s-input,
1946
- fieldset[disabled] .s-textarea,
1947
- fieldset[disabled] .s-select > select {
1948
- cursor: not-allowed;
1949
- opacity: var(--_o-disabled-static);
1950
- }
1951
- .s-description {
1952
- padding: 0 var(--su2);
1953
- color: var(--fc-medium);
1954
- font-size: var(--fs-caption);
1955
- }
1956
- .s-input-fill {
1957
- padding: 0.6em 0.7em;
1958
- border: 1px solid var(--bc-darker);
1959
- border-right-width: 0;
1960
- border-left-width: 0;
1961
- background-color: var(--black-050);
1962
- color: var(--fc-medium);
1963
- font-family: inherit;
1964
- white-space: nowrap;
1965
- line-height: var(--lh-sm);
1966
- }
1967
- .s-input-fill.s-input-fill__clear {
1968
- border-color: transparent;
1969
- background-color: transparent;
1970
- }
1971
- .s-input-fill.order-first {
1972
- border-left-width: 1px;
1973
- border-top-left-radius: var(--br-sm);
1974
- border-bottom-left-radius: var(--br-sm);
1975
- }
1976
- .s-input-fill.order-last {
1977
- border-right-width: 1px;
1978
- border-top-right-radius: var(--br-sm);
1979
- border-bottom-right-radius: var(--br-sm);
1980
- }
1981
- .s-select {
1982
- position: relative;
1983
- color: var(--fc-dark);
1984
- }
1985
- .s-select:before,
1986
- .s-select:after {
1987
- content: "";
1988
- position: absolute;
1989
- z-index: var(--zi-selected);
1990
- right: 13px;
1991
- border-color: currentColor transparent;
1992
- border-style: solid;
1993
- border-width: 4px;
1994
- pointer-events: none;
1995
- }
1996
- .s-select:before {
1997
- top: calc(50% - 5px);
1998
- border-top-width: 0;
1999
- border-bottom-width: 4px;
2000
- }
2001
- .s-select:after {
2002
- top: calc(50% + 1px);
2003
- border-top-width: 4px;
2004
- border-bottom-width: 0;
2005
- }
2006
- .s-select > select {
2302
+ background-color: var(--_in-bg);
2303
+ border: var(--su-static1) solid var(--_in-bc);
2304
+ border-radius: var(--_in-br);
2305
+ color: var(--_in-fc);
2306
+ cursor: var(--_in-c);
2307
+ font-size: var(--_in-fs);
2308
+ opacity: var(--_in-o);
2309
+ padding: var(--_in-py) var(--_in-px) var(--_in-py) var(--_in-pl, var(--_in-px));
2007
2310
  -webkit-appearance: none;
2008
- -moz-appearance: none;
2009
- appearance: none;
2010
- position: relative;
2011
- width: 100%;
2012
- height: 100%;
2013
- padding: 0.6em 0.7em;
2014
- padding-right: var(--su32);
2015
- border: 1px solid var(--bc-darker);
2016
- border-radius: var(--br-sm);
2017
- background-color: var(--white);
2018
- outline: 0;
2019
- font-size: var(--fs-body1);
2020
2311
  font-family: inherit;
2021
- color: var(--black);
2022
- line-height: var(--lh-sm);
2023
- }
2024
- .s-select > select::-moz-focus-inner {
2025
- outline: none !important;
2026
- }
2027
- .s-select > select:-moz-focusring {
2028
- color: transparent;
2029
- text-shadow: 0 0 0 #000;
2030
- }
2031
- .s-select > select::-ms-expand {
2032
- display: none;
2312
+ margin: 0;
2313
+ width: 100%;
2033
2314
  }
2034
2315
  @supports (-webkit-overflow-scrolling: touch) {
2035
- .s-select > select {
2036
- font-size: 16px;
2037
- padding: 0.4em 0.55em;
2316
+ .s-input,
2317
+ .s-textarea {
2318
+ --_in-fs: var(--su-static16);
2319
+ --_in-px: 0.55em;
2320
+ --_in-py: 0.36em;
2321
+ }
2322
+ .s-input::-webkit-input-placeholder,
2323
+ .s-textarea::-webkit-input-placeholder {
2324
+ line-height: normal !important;
2038
2325
  }
2039
2326
  }
2040
- .s-select > select::-webkit-contacts-auto-fill-button {
2041
- background-color: var(--black);
2327
+ body.theme-highcontrast .s-input,
2328
+ body.theme-highcontrast .s-textarea {
2329
+ --_in-bc: var(--black);
2330
+ --_in-placeholder-fc: var(--black-400);
2042
2331
  }
2043
- .s-select > select:-webkit-autofill {
2044
- border-color: var(--blue-300);
2045
- -webkit-text-fill-color: var(--black);
2046
- -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-050) inset;
2047
- transition: background-color 0s 50000s;
2332
+ fieldset[disabled] .s-input,
2333
+ fieldset[disabled] .s-textarea,
2334
+ .s-input[disabled],
2335
+ .s-textarea[disabled],
2336
+ .s-input[readonly],
2337
+ .s-textarea[readonly],
2338
+ .is-readonly .s-input,
2339
+ .is-readonly .s-textarea {
2340
+ --_in-c: not-allowed;
2048
2341
  }
2049
- .s-select > select:-webkit-autofill:focus {
2050
- border-color: var(--blue-300);
2051
- -webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset, 0 0 0 var(--su-static4) var(--focus-ring);
2342
+ fieldset[disabled] .s-input,
2343
+ fieldset[disabled] .s-textarea,
2344
+ .s-input[disabled],
2345
+ .s-textarea[disabled] {
2346
+ --_in-o: var(--_o-disabled-static);
2052
2347
  }
2053
- .s-check-control {
2054
- display: flex;
2055
- gap: var(--su8);
2056
- align-items: center;
2348
+ .s-input[readonly],
2349
+ .s-textarea[readonly],
2350
+ .is-readonly .s-input,
2351
+ .is-readonly .s-textarea {
2352
+ --_in-bg: var(--black-050);
2353
+ --_in-bc: var(--bc-light);
2354
+ --_in-fc: var(--black-200);
2355
+ --_in-fc-focus: var(--_in-fc);
2057
2356
  }
2058
- .s-check-control .s-label {
2059
- font-weight: normal;
2357
+ body.theme-highcontrast .s-input[readonly],
2358
+ body.theme-highcontrast .s-textarea[readonly],
2359
+ body.theme-highcontrast .is-readonly .s-input,
2360
+ body.theme-highcontrast .is-readonly .s-textarea {
2361
+ --_in-fc: var(--fc-light);
2060
2362
  }
2061
- .s-check-group {
2062
- display: flex;
2063
- flex-direction: column;
2064
- gap: var(--su8);
2363
+ .has-error .s-input,
2364
+ .has-error .s-textarea,
2365
+ .has-success .s-input,
2366
+ .has-success .s-textarea,
2367
+ .has-warning .s-input,
2368
+ .has-warning .s-textarea {
2369
+ --_in-bc-focus: var(--_in-bc);
2065
2370
  }
2066
- .s-check-group.s-check-group__horizontal {
2067
- flex-direction: row;
2371
+ .has-error .s-input,
2372
+ .has-error .s-textarea {
2373
+ --_in-bc: var(--red-400);
2374
+ --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-error);
2068
2375
  }
2069
- .s-check-group legend.s-label {
2070
- margin-bottom: var(--su8);
2376
+ body.theme-highcontrast .has-error .s-input,
2377
+ body.theme-highcontrast .has-error .s-textarea {
2378
+ --_in-bc: var(--red-400);
2071
2379
  }
2072
- .s-check-group .s-check-control {
2073
- align-items: flex-start;
2380
+ .has-success .s-input,
2381
+ .has-success .s-textarea {
2382
+ --_in-bc: var(--green-400);
2383
+ --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-success);
2074
2384
  }
2075
- .s-check-group .s-checkbox,
2076
- .s-check-group .s-radio {
2077
- margin-top: calc(var(--su2) + var(--su1));
2385
+ body.theme-highcontrast .has-success .s-input,
2386
+ body.theme-highcontrast .has-success .s-textarea {
2387
+ --_in-bc: var(--green-400);
2078
2388
  }
2079
- @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
2080
- .s-checkbox,
2081
- .s-radio {
2082
- -webkit-appearance: none;
2083
- -moz-appearance: none;
2084
- appearance: none;
2085
- margin: 0;
2086
- width: 1em;
2087
- height: 1em;
2088
- border: 1px solid var(--bc-darker);
2089
- background-color: var(--white);
2090
- outline: 0;
2091
- font-size: inherit;
2092
- vertical-align: middle;
2093
- cursor: pointer;
2094
- }
2095
- .s-checkbox::-ms-check,
2096
- .s-radio::-ms-check {
2097
- display: none;
2098
- }
2389
+ .has-warning .s-input,
2390
+ .has-warning .s-textarea {
2391
+ --_in-bc: var(--yellow-600);
2392
+ --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
2393
+ }
2394
+ body.theme-highcontrast .has-warning .s-input,
2395
+ body.theme-highcontrast .has-warning .s-textarea {
2396
+ --_in-bc: var(--yellow-600);
2397
+ }
2398
+ .s-input.s-input__sm,
2399
+ .s-input.s-textarea__sm,
2400
+ .s-textarea.s-input__sm,
2401
+ .s-textarea.s-textarea__sm {
2402
+ --_in-fs: var(--fs-caption);
2403
+ }
2404
+ .s-input.s-input__md,
2405
+ .s-input.s-textarea__md,
2406
+ .s-textarea.s-input__md,
2407
+ .s-textarea.s-textarea__md {
2408
+ --_in-fs: var(--fs-body3);
2409
+ --_in-br: calc(var(--br-sm) + var(--su-static1));
2099
2410
  }
2100
- input.s-checkbox,
2101
- input.s-radio {
2102
- flex-shrink: 0;
2411
+ @supports (-webkit-overflow-scrolling: touch) {
2412
+ .s-input.s-input__md,
2413
+ .s-input.s-textarea__md,
2414
+ .s-textarea.s-input__md,
2415
+ .s-textarea.s-textarea__md {
2416
+ --_in-fs: 17px;
2417
+ --_in-py: 0.4em;
2418
+ }
2419
+ }
2420
+ .s-input.s-input__lg,
2421
+ .s-input.s-textarea__lg,
2422
+ .s-textarea.s-input__lg,
2423
+ .s-textarea.s-textarea__lg {
2424
+ --_in-fs: var(--fs-title);
2425
+ --_in-br: calc(var(--br-sm) + var(--su-static1));
2426
+ --_in-px: 0.6em;
2427
+ --_in-py: 0.45em;
2428
+ }
2429
+ .s-input.s-input__xl,
2430
+ .s-input.s-textarea__xl,
2431
+ .s-textarea.s-input__xl,
2432
+ .s-textarea.s-textarea__xl {
2433
+ --_in-fs: var(--fs-headline1);
2434
+ --_in-br: var(--br-md);
2435
+ --_in-px: 0.5em;
2436
+ --_in-py: 0.4em;
2103
2437
  }
2104
- .s-checkbox[disabled],
2105
- .s-radio[disabled] {
2106
- opacity: var(--_o-disabled-static);
2107
- cursor: not-allowed;
2438
+ .s-input:-webkit-autofill,
2439
+ .s-textarea:-webkit-autofill {
2440
+ -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-050) inset;
2441
+ -webkit-text-fill-color: var(--black);
2442
+ border-color: var(--blue-300);
2443
+ transition: background-color 0s 50000s;
2108
2444
  }
2109
- @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
2110
- .s-checkbox {
2111
- border-radius: var(--br-sm);
2112
- background-position: center center;
2113
- background-repeat: no-repeat;
2114
- background-size: contain;
2115
- }
2116
- .s-checkbox:checked,
2117
- .s-checkbox:indeterminate {
2118
- border-color: var(--theme-secondary-400) !important;
2119
- background-color: var(--theme-secondary-400);
2120
- }
2121
- @media (prefers-color-scheme: dark) {
2122
- body.theme-highcontrast.theme-system .s-checkbox:checked,
2123
- body.theme-highcontrast.theme-system .s-checkbox:indeterminate {
2124
- border-color: var(--blue-700) !important;
2125
- background-color: var(--blue-300);
2126
- }
2127
- }
2128
- body.theme-highcontrast.theme-dark .s-checkbox:checked,
2129
- body.theme-highcontrast.theme-dark .s-checkbox:indeterminate {
2130
- border-color: var(--blue-700) !important;
2131
- background-color: var(--blue-300);
2132
- }
2133
- .s-checkbox:checked:focus,
2134
- .s-checkbox:indeterminate:focus {
2135
- border-color: var(--theme-secondary-400);
2136
- }
2137
- .s-checkbox:checked {
2138
- background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E");
2139
- }
2140
- .s-checkbox:indeterminate {
2141
- background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='%23fff'/%3E%3C/svg%3E");
2142
- }
2143
- .s-checkbox:focus {
2144
- border-color: var(--theme-secondary-300);
2145
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
2146
- }
2445
+ .s-input:-webkit-autofill:focus,
2446
+ .s-textarea:-webkit-autofill:focus {
2447
+ border-color: var(--blue-300);
2448
+ -webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset, 0 0 0 var(--su-static4) var(--focus-ring);
2147
2449
  }
2148
- @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
2149
- .s-radio {
2150
- border-radius: var(--br-circle);
2151
- }
2152
- .s-radio:checked {
2153
- border-color: var(--theme-secondary-400);
2154
- border-width: 0.30769231em;
2155
- background-color: hsl(0, 0%, 100%);
2156
- }
2157
- @media (prefers-color-scheme: dark) {
2158
- body.theme-highcontrast.theme-system .s-radio:checked {
2159
- border-color: var(--blue-300);
2160
- outline: 1px solid var(--black);
2161
- }
2162
- }
2163
- body.theme-highcontrast.theme-dark .s-radio:checked {
2164
- border-color: var(--blue-300);
2165
- outline: 1px solid var(--black);
2166
- }
2167
- .s-radio:focus {
2168
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
2169
- }
2450
+ .s-input::-webkit-contacts-auto-fill-button,
2451
+ .s-textarea::-webkit-contacts-auto-fill-button {
2452
+ background-color: var(--black);
2170
2453
  }
2171
- .s-input:focus,
2172
- .s-input.has-focus,
2173
- .s-textarea:focus,
2174
- .s-select > select:focus {
2175
- border-color: var(--theme-secondary-300);
2176
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
2177
- color: var(--black);
2178
- outline: 0;
2454
+ .s-input::placeholder,
2455
+ .s-textarea::placeholder,
2456
+ .s-input::-webkit-input-placeholder,
2457
+ .s-textarea::-webkit-input-placeholder {
2458
+ color: var(--_in-placeholder-fc);
2179
2459
  }
2180
- body.theme-highcontrast .s-input:focus,
2181
- body.theme-highcontrast .s-input.has-focus,
2182
- body.theme-highcontrast .s-textarea:focus,
2183
- body.theme-highcontrast .s-select > select:focus {
2184
- border-color: var(--black);
2460
+ .s-input::placeholder,
2461
+ .s-textarea::placeholder {
2462
+ opacity: 1;
2185
2463
  }
2186
- .s-input:focus-within {
2187
- border-color: var(--theme-secondary-300);
2188
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
2189
- color: var(--black);
2190
- outline: 0;
2464
+ .s-input.s-input__creditcard,
2465
+ .s-input.s-textarea__creditcard,
2466
+ .s-textarea.s-input__creditcard,
2467
+ .s-textarea.s-textarea__creditcard,
2468
+ .s-input.s-input__search,
2469
+ .s-input.s-textarea__search,
2470
+ .s-textarea.s-input__search,
2471
+ .s-textarea.s-textarea__search {
2472
+ --_in-pl: var(--su-static32);
2191
2473
  }
2192
- body.theme-highcontrast .s-input:focus-within {
2193
- border-color: var(--black);
2474
+ .s-input:focus,
2475
+ .s-textarea:focus {
2476
+ border-color: var(--_in-bc-focus);
2477
+ box-shadow: var(--_in-bs-focus);
2478
+ color: var(--_in-fc-focus);
2479
+ outline: 0;
2194
2480
  }
2195
- .s-input[disabled],
2196
- .s-textarea[disabled],
2197
- .s-select > select[disabled] {
2198
- cursor: not-allowed;
2199
- opacity: var(--_o-disabled-static);
2481
+ .s-input::-webkit-scrollbar,
2482
+ .s-textarea::-webkit-scrollbar {
2483
+ width: calc(var(--su-static12) - var(--su-static2));
2484
+ height: calc(var(--su-static12) - var(--su-static2));
2485
+ background-color: transparent;
2200
2486
  }
2201
- .s-input[readonly],
2202
- .s-textarea[readonly],
2203
- .s-select > select[readonly],
2204
- .is-readonly .s-input,
2205
- .is-readonly .s-textarea,
2206
- .is-readonly .s-select > select {
2207
- border-color: var(--bc-light);
2208
- background-color: var(--black-050);
2209
- color: var(--black-200);
2210
- cursor: not-allowed;
2487
+ .s-input::-webkit-scrollbar-track,
2488
+ .s-textarea::-webkit-scrollbar-track {
2489
+ border-radius: calc(var(--su-static12) - var(--su-static2));
2490
+ background-color: transparent;
2211
2491
  }
2212
- body.theme-highcontrast .s-input[readonly],
2213
- body.theme-highcontrast .s-textarea[readonly],
2214
- body.theme-highcontrast .s-select > select[readonly],
2215
- body.theme-highcontrast .is-readonly .s-input,
2216
- body.theme-highcontrast .is-readonly .s-textarea,
2217
- body.theme-highcontrast .is-readonly .s-select > select {
2218
- color: var(--fc-light);
2492
+ .s-input::-webkit-scrollbar-thumb,
2493
+ .s-textarea::-webkit-scrollbar-thumb {
2494
+ border-radius: calc(var(--su-static12) - var(--su-static2));
2495
+ background-color: var(--scrollbar);
2219
2496
  }
2220
- .is-disabled,
2221
- .is-readonly,
2222
- .has-success,
2223
- .has-error,
2224
- .has-warning {
2225
- position: relative;
2497
+ .s-input::-webkit-scrollbar-corner,
2498
+ .s-textarea::-webkit-scrollbar-corner {
2499
+ background-color: transparent;
2500
+ border-color: transparent;
2226
2501
  }
2227
2502
  .is-disabled .s-input,
2228
2503
  .is-readonly .s-input,
@@ -2231,12 +2506,17 @@ body.theme-highcontrast .is-readonly .s-select > select {
2231
2506
  .has-warning .s-input {
2232
2507
  padding-right: var(--su32);
2233
2508
  }
2234
- .is-disabled .s-select .s-input-icon,
2235
- .is-readonly .s-select .s-input-icon,
2236
- .has-success .s-select .s-input-icon,
2237
- .has-error .s-select .s-input-icon,
2238
- .has-warning .s-select .s-input-icon {
2239
- right: var(--su32);
2509
+ .s-input:focus-within {
2510
+ border-color: var(--_in-bc-focus);
2511
+ box-shadow: var(--_in-bs-focus);
2512
+ color: var(--_in-fc-focus);
2513
+ outline: 0;
2514
+ }
2515
+ body.theme-highcontrast .s-input:focus-within {
2516
+ --_in-bc-focus: var(--black);
2517
+ }
2518
+ .s-input.s-input__md {
2519
+ --_in-py: 0.5em;
2240
2520
  }
2241
2521
  .is-disabled .s-textarea,
2242
2522
  .is-readonly .s-textarea,
@@ -2245,167 +2525,115 @@ body.theme-highcontrast .is-readonly .s-select > select {
2245
2525
  .has-warning .s-textarea {
2246
2526
  padding-right: var(--su48);
2247
2527
  }
2248
- .is-disabled .s-textarea ~ .s-input-icon,
2249
- .is-readonly .s-textarea ~ .s-input-icon,
2250
- .has-success .s-textarea ~ .s-input-icon,
2251
- .has-error .s-textarea ~ .s-input-icon,
2252
- .has-warning .s-textarea ~ .s-input-icon {
2253
- top: 1.5em;
2254
- right: 1.5em;
2255
- }
2256
- .is-disabled .s-input-message a,
2257
- .is-readonly .s-input-message a,
2258
- .has-success .s-input-message a,
2259
- .has-error .s-input-message a,
2260
- .has-warning .s-input-message a {
2261
- text-decoration: underline;
2262
- }
2263
- .has-warning .s-input,
2264
- .has-warning .s-textarea,
2265
- .has-warning .s-checkbox,
2266
- .has-warning .s-radio:not(:checked),
2267
- .has-warning .s-select > select {
2268
- border-color: var(--yellow-600);
2269
- }
2270
- .has-warning .s-input:focus,
2271
- .has-warning .s-textarea:focus,
2272
- .has-warning .s-checkbox:focus,
2273
- .has-warning .s-radio:not(:checked):focus,
2274
- .has-warning .s-select > select:focus {
2275
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-warning);
2276
- }
2277
- .has-warning .s-input-message {
2278
- color: var(--yellow-800);
2279
- }
2280
- .has-warning .s-input-message a {
2281
- color: var(--yellow-900);
2528
+ .s-textarea.s-textarea__md {
2529
+ --_in-py: 0.72em;
2282
2530
  }
2283
- .has-warning .s-input-icon {
2284
- color: var(--yellow-600);
2531
+ .s-textarea ~ .s-input-icon {
2532
+ right: 1.5em;
2533
+ top: 1.5em;
2285
2534
  }
2286
- .has-error .s-input,
2287
- .has-error .s-textarea,
2288
- .has-error .s-checkbox,
2289
- .has-error .s-radio:not(:checked),
2290
- .has-error .s-select > select {
2291
- border-color: var(--red-400);
2535
+ .s-input-fill {
2536
+ --_if-bc: var(--bc-darker);
2537
+ --_if-bg: var(--black-050);
2538
+ --_if-blw: 0;
2539
+ --_if-blr: 0;
2540
+ --_if-brr: 0;
2541
+ --_if-brw: 0;
2542
+ background-color: var(--_if-bg);
2543
+ border: var(--su-static1) solid var(--_if-bc);
2544
+ border-left-width: var(--_if-blw);
2545
+ border-right-width: var(--_if-brw);
2546
+ border-radius: var(--_if-blr) var(--_if-brr) var(--_if-brr) var(--_if-blr);
2547
+ color: var(--fc-medium);
2548
+ font-family: inherit;
2549
+ line-height: var(--lh-sm);
2550
+ padding: 0.6em 0.7em;
2551
+ white-space: nowrap;
2292
2552
  }
2293
- .has-error .s-input:focus,
2294
- .has-error .s-textarea:focus,
2295
- .has-error .s-checkbox:focus,
2296
- .has-error .s-radio:not(:checked):focus,
2297
- .has-error .s-select > select:focus {
2298
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
2553
+ .s-input-fill.s-input-fill__clear {
2554
+ --_if-bc: transparent;
2555
+ --_if-bg: transparent;
2299
2556
  }
2300
- .has-error .s-input-message {
2301
- color: var(--red-500);
2557
+ .s-input-fill.order-first {
2558
+ --_if-blw: var(--su-static1);
2559
+ --_if-blr: var(--br-sm);
2302
2560
  }
2303
- .has-error .s-input-message a {
2304
- color: var(--red-800);
2561
+ .s-input-fill.order-last {
2562
+ --_if-brw: var(--su-static1);
2563
+ --_if-brr: var(--br-sm);
2305
2564
  }
2306
- .has-error .s-input-message a:hover {
2307
- color: var(--red-900);
2565
+ .s-input-icon {
2566
+ --_ii-fc: unset;
2567
+ --_ii-r: 0.7em;
2568
+ color: var(--_ii-fc);
2569
+ right: var(--_ii-r);
2570
+ margin-top: -9px;
2571
+ pointer-events: none;
2572
+ position: absolute;
2573
+ top: 50%;
2308
2574
  }
2309
2575
  .has-error .s-input-icon {
2310
- color: var(--red-400);
2311
- }
2312
- .has-success .s-input,
2313
- .has-success .s-textarea,
2314
- .has-success .s-checkbox,
2315
- .has-success .s-radio:not(:checked),
2316
- .has-success .s-select > select {
2317
- border-color: var(--green-400);
2318
- }
2319
- .has-success .s-input:focus,
2320
- .has-success .s-textarea:focus,
2321
- .has-success .s-checkbox:focus,
2322
- .has-success .s-radio:not(:checked):focus,
2323
- .has-success .s-select > select:focus {
2324
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-success);
2325
- }
2326
- .has-success .s-input-message {
2327
- color: var(--green-500);
2328
- }
2329
- .has-success .s-input-message a {
2330
- color: var(--green-800);
2331
- }
2332
- .has-success .s-input-message a:hover {
2333
- color: var(--green-900);
2576
+ --_ii-fc: var(--red-400);
2334
2577
  }
2335
2578
  .has-success .s-input-icon {
2336
- color: var(--green-400);
2579
+ --_ii-fc: var(--green-400);
2337
2580
  }
2338
- .is-disabled .s-select:before,
2339
- .is-disabled .s-select:after {
2340
- border-color: var(--bc-darker) transparent;
2341
- }
2342
- .is-disabled .s-description {
2343
- opacity: var(--_o-disabled-static);
2581
+ .has-warning .s-input-icon {
2582
+ --_ii-fc: var(--yellow-600);
2344
2583
  }
2345
2584
  .is-disabled .s-input-icon {
2346
- color: var(--black-400);
2585
+ --_ii-fc: var(--black-400);
2347
2586
  }
2348
2587
  .is-readonly .s-input-icon {
2349
- color: var(--black-200);
2588
+ --_ii-fc: var(--black-200);
2350
2589
  }
2351
2590
  body.theme-highcontrast .is-readonly .s-input-icon {
2352
- color: var(--fc-light);
2353
- }
2354
- .s-input-icon {
2355
- position: absolute;
2356
- top: 50%;
2357
- right: 0.7em;
2358
- margin-top: -9px;
2359
- pointer-events: none;
2591
+ --_ii-fc: var(--fc-light);
2360
2592
  }
2361
- .s-input-icon.s-input-icon__search,
2362
- .s-input-icon.s-input-icon__creditcard {
2363
- right: auto;
2364
- left: 0.7em;
2593
+ .s-input-icon.s-input-icon__creditcard,
2594
+ .s-input-icon.s-input-icon__search {
2595
+ --_ii-r: auto;
2365
2596
  color: var(--black-400);
2597
+ left: 0.7em;
2366
2598
  }
2367
2599
  .s-input-message {
2368
- padding: var(--su2);
2600
+ --_im-fc: unset;
2601
+ --_im-a-fc: unset;
2602
+ --_im-a-fc-hover: unset;
2603
+ color: var(--_im-fc);
2369
2604
  font-size: var(--fs-caption);
2605
+ padding: var(--su2);
2370
2606
  }
2371
- .s-input__sm,
2372
- .s-textarea__sm,
2373
- .s-select__sm > select {
2374
- font-size: var(--fs-caption);
2607
+ .is-disabled .s-input-message a,
2608
+ .is-readonly .s-input-message a,
2609
+ .has-success .s-input-message a,
2610
+ .has-error .s-input-message a,
2611
+ .has-warning .s-input-message a {
2612
+ text-decoration: underline;
2375
2613
  }
2376
- .s-input__md,
2377
- .s-textarea__md,
2378
- .s-select__md > select {
2379
- font-size: var(--fs-body3);
2380
- padding-top: 0.5em;
2381
- padding-bottom: 0.5em;
2382
- border-radius: calc(var(--br-sm) + 1px);
2383
- }
2384
- .s-textarea__md {
2385
- padding-top: 0.72em;
2386
- padding-bottom: 0.72em;
2387
- }
2388
- .s-input__lg,
2389
- .s-textarea__lg,
2390
- .s-select__lg > select {
2391
- font-size: var(--fs-title);
2392
- padding: 0.45em 0.6em;
2393
- border-radius: calc(var(--br-sm) + 1px);
2394
- }
2395
- .s-input__xl,
2396
- .s-textarea__xl,
2397
- .s-select__xl > select {
2398
- font-size: var(--fs-headline1);
2399
- padding: 0.4em 0.5em;
2400
- border-radius: var(--br-md);
2614
+ fieldset[disabled] .s-input-message {
2615
+ cursor: not-allowed;
2616
+ opacity: var(--_o-disabled-static);
2401
2617
  }
2402
- @supports (-webkit-overflow-scrolling: touch) {
2403
- .s-input__md,
2404
- .s-textarea__md {
2405
- font-size: 17px;
2406
- padding-top: 0.4em;
2407
- padding-bottom: 0.4em;
2408
- }
2618
+ .has-error .s-input-message {
2619
+ --_im-fc: var(--red-500);
2620
+ --_im-a-fc: var(--red-800);
2621
+ --_im-a-fc-hover: var(--red-900);
2622
+ }
2623
+ .has-success .s-input-message {
2624
+ --_im-fc: var(--green-500);
2625
+ --_im-a-fc: var(--green-800);
2626
+ --_im-a-fc-hover: var(--green-900);
2627
+ }
2628
+ .has-warning .s-input-message {
2629
+ --_im-fc: var(--yellow-800);
2630
+ --_im-a-fc: var(--yellow-900);
2631
+ }
2632
+ .s-input-message a {
2633
+ color: var(--_im-a-fc);
2634
+ }
2635
+ .s-input-message a:hover {
2636
+ color: var(--_im-a-fc-hover);
2409
2637
  }
2410
2638
  .s-label {
2411
2639
  --_la-fs: var(--fs-body2);
@@ -2420,7 +2648,8 @@ body.theme-highcontrast .is-readonly .s-input-icon {
2420
2648
  }
2421
2649
  fieldset[disabled] .s-label,
2422
2650
  .is-disabled .s-label,
2423
- .s-check-control [disabled] + .s-label {
2651
+ .s-check-control .s-checkbox[disabled] + .s-label,
2652
+ .s-check-control .s-radio[disabled] + .s-label {
2424
2653
  cursor: not-allowed;
2425
2654
  opacity: var(--_o-disabled-static);
2426
2655
  }
@@ -2603,6 +2832,12 @@ a.s-link__muted,
2603
2832
  --_li-fc-hover: var(--black-600);
2604
2833
  --_li-fc-visited: var(--black-700);
2605
2834
  }
2835
+ fieldset[disabled] a,
2836
+ fieldset[disabled] .s-link {
2837
+ box-shadow: none !important;
2838
+ opacity: var(--_o-disabled-static);
2839
+ pointer-events: none;
2840
+ }
2606
2841
  a:active,
2607
2842
  .s-link:active,
2608
2843
  a:hover,
@@ -2619,7 +2854,7 @@ button.s-link {
2619
2854
  user-select: auto;
2620
2855
  }
2621
2856
  button.s-link:focus {
2622
- outline: none;
2857
+ outline: revert;
2623
2858
  }
2624
2859
  .s-link-preview {
2625
2860
  --_lp-details-mt: var(--su2);
@@ -3000,281 +3235,42 @@ body.theme-highcontrast .s-navigation.s-navigation__muted {
3000
3235
  body.theme-highcontrast .s-navigation .s-navigation--item.is-selected {
3001
3236
  text-decoration: none;
3002
3237
  }
3003
- .s-navigation .s-navigation--item__dropdown {
3004
- padding-right: 2em;
3005
- }
3006
- .s-navigation .s-navigation--item__dropdown:after {
3007
- border-style: solid;
3008
- border-width: var(--su-static4) var(--su-static4) 0 var(--su-static4);
3009
- border-color: currentColor transparent;
3010
- content: "";
3011
- pointer-events: none;
3012
- position: absolute;
3013
- right: 0.9em;
3014
- top: calc(50% - 2px);
3015
- z-index: var(--zi-active);
3016
- }
3017
- .s-navigation .s-navigation--item:hover,
3018
- .s-navigation .s-navigation--item:active {
3019
- background-color: var(--_na-item-bg-hover);
3020
- color: var(--_na-item-fc-hover);
3021
- }
3022
- .s-navigation .s-navigation--item:focus:not(:focus-visible) {
3023
- outline: none;
3024
- box-shadow: none;
3025
- }
3026
- .s-navigation .s-navigation--item:focus-visible {
3027
- outline: none;
3028
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
3029
- }
3030
- .s-navigation .s-navigation--title {
3031
- margin-top: var(--_na-title-mt);
3032
- font-size: var(--fs-fine);
3033
- font-weight: bold;
3034
- padding: var(--su6) var(--su12);
3035
- text-transform: uppercase;
3036
- }
3037
- .s-navigation .s-navigation--title:first-child {
3038
- --_na-title-mt: 0;
3039
- }
3040
- .s-banner {
3041
- --_no-x-offset: 0;
3042
- --_no-bc: var(--bc-medium);
3043
- --_no-bg: var(--black-050);
3044
- --_no-fc: var(--fc-medium);
3045
- --_no-btn-bg-focus: var(--black-100);
3046
- --_no-btn-bg-active: var(--black-150);
3047
- background: var(--_no-bg);
3048
- border-color: var(--_no-bc);
3049
- color: var(--_no-fc);
3050
- border-style: solid;
3051
- font-size: var(--fs-body1);
3052
- border-width: var(--su-static1) 0;
3053
- inset: 0 0 auto 0;
3054
- padding: var(--su12);
3055
- position: fixed;
3056
- -webkit-transform: translate3d(0, var(--_no-x-offset), 0);
3057
- transform: translate3d(0, var(--_no-x-offset), 0);
3058
- width: 100%;
3059
- z-index: calc(var(--zi-navigation-fixed) - 1);
3060
- }
3061
- @media (prefers-color-scheme: dark) {
3062
- body.theme-system .s-banner:not(.s-banner__important) {
3063
- --_no-bc: var(--_no-bg);
3064
- }
3065
- }
3066
- body.theme-dark .s-banner:not(.s-banner__important),
3067
- .theme-dark__forced .s-banner:not(.s-banner__important),
3068
- body.theme-system .theme-dark__forced .s-banner:not(.s-banner__important) {
3069
- --_no-bc: var(--_no-bg);
3070
- }
3071
- body.theme-highcontrast .s-banner:not(.s-banner__important) {
3072
- --_no-bc: currentColor;
3073
- }
3074
- @media (prefers-color-scheme: dark) {
3075
- body.theme-highcontrast.theme-system .s-banner:not(.s-banner__important) {
3076
- --_no-bc: currentColor;
3077
- }
3078
- }
3079
- body.theme-highcontrast.theme-dark .s-banner:not(.s-banner__important) {
3080
- --_no-bc: currentColor;
3081
- }
3082
- .s-banner__important {
3083
- --_no-bc: var(--_no-bg);
3084
- --_no-bg: var(--black-700);
3085
- --_no-fc: var(--white);
3086
- --_no-btn-bg-focus: var(--black-800);
3087
- --_no-btn-bg-active: var(--black-900);
3088
- }
3089
- body.theme-highcontrast .s-banner__important {
3090
- --_no-bc: var(--_no-bg);
3091
- }
3092
- .s-banner__danger {
3093
- --_no-bc: var(--red-200);
3094
- --_no-bg: var(--red-050);
3095
- --_no-btn-bg-active: var(--red-200);
3096
- --_no-btn-bg-focus: var(--red-100);
3097
- }
3098
- body.theme-highcontrast .s-banner__danger:not(.s-banner__important) {
3099
- --_no-bg: var(--red-200);
3100
- }
3101
- .s-banner__danger.s-banner__important {
3102
- --_no-bc: var(--_no-bg);
3103
- --_no-bg: var(--red-500);
3104
- --_no-btn-bg-active: var(--red-700);
3105
- --_no-btn-bg-focus: var(--red-600);
3106
- }
3107
- @media (prefers-color-scheme: dark) {
3108
- body.theme-system .s-banner__danger.s-banner__important {
3109
- --_no-bg: var(--red-400);
3110
- --_no-fc: var(--black-900);
3111
- }
3112
- }
3113
- body.theme-dark .s-banner__danger.s-banner__important,
3114
- .theme-dark__forced .s-banner__danger.s-banner__important,
3115
- body.theme-system .theme-dark__forced .s-banner__danger.s-banner__important {
3116
- --_no-bg: var(--red-400);
3117
- --_no-fc: var(--black-900);
3118
- }
3119
- @media (prefers-color-scheme: dark) {
3120
- body.theme-highcontrast.theme-system .s-banner__danger.s-banner__important {
3121
- --_no-bg: var(--red-500);
3122
- --_no-fc: var(--white);
3123
- }
3124
- }
3125
- body.theme-highcontrast.theme-dark .s-banner__danger.s-banner__important {
3126
- --_no-bg: var(--red-500);
3127
- --_no-fc: var(--white);
3128
- }
3129
- .s-banner__info {
3130
- --_no-bc: var(--theme-secondary-150);
3131
- --_no-bg: var(--theme-secondary-050);
3132
- --_no-btn-bg-focus: var(--theme-secondary-100);
3133
- --_no-btn-bg-active: var(--theme-secondary-150);
3134
- --_no-code-bg: var(--theme-secondary-150);
3135
- }
3136
- body.theme-highcontrast .s-banner__info:not(.s-banner__important) {
3137
- --_no-bg: var(--theme-secondary-100);
3138
- }
3139
- @media (prefers-color-scheme: dark) {
3140
- body.theme-highcontrast.theme-system .s-banner__info:not(.s-banner__important) {
3141
- --_no-bg: var(--theme-secondary-100);
3142
- }
3143
- }
3144
- body.theme-highcontrast.theme-dark .s-banner__info:not(.s-banner__important) {
3145
- --_no-bg: var(--theme-secondary-100);
3146
- }
3147
- .s-banner__info.s-banner__important {
3148
- --_no-bc: var(--_no-bg);
3149
- --_no-bg: var(--theme-secondary-400);
3150
- --_no-btn-bg-active: var(--theme-secondary-600);
3151
- --_no-btn-bg-focus: var(--theme-secondary-500);
3152
- }
3153
- @media (prefers-color-scheme: dark) {
3154
- body.theme-system .s-banner__info.s-banner__important {
3155
- --_no-bg: var(--theme-secondary-300);
3156
- --_no-fc: var(--black-900);
3157
- }
3158
- }
3159
- body.theme-dark .s-banner__info.s-banner__important,
3160
- .theme-dark__forced .s-banner__info.s-banner__important,
3161
- body.theme-system .theme-dark__forced .s-banner__info.s-banner__important {
3162
- --_no-bg: var(--theme-secondary-300);
3163
- --_no-fc: var(--black-900);
3164
- }
3165
- @media (prefers-color-scheme: dark) {
3166
- body.theme-highcontrast.theme-system .s-banner__info.s-banner__important {
3167
- --_no-bg: var(--theme-secondary-400);
3168
- --_no-fc: var(--white);
3169
- }
3170
- }
3171
- body.theme-highcontrast.theme-dark .s-banner__info.s-banner__important {
3172
- --_no-bg: var(--theme-secondary-400);
3173
- --_no-fc: var(--white);
3174
- }
3175
- .s-banner__success {
3176
- --_no-bc: var(--green-200);
3177
- --_no-bg: var(--green-050);
3178
- --_no-btn-bg-active: var(--green-200);
3179
- --_no-btn-bg-focus: var(--green-100);
3180
- }
3181
- body.theme-highcontrast .s-banner__success:not(.s-banner__important) {
3182
- --_no-bg: var(--green-200);
3183
- }
3184
- .s-banner__success.s-banner__important {
3185
- --_no-bc: var(--_no-bg);
3186
- --_no-bg: var(--green-400);
3187
- --_no-fc: var(--black-900);
3188
- --_no-btn-bg-active: var(--green-600);
3189
- --_no-btn-bg-focus: var(--green-500);
3190
- }
3191
- @media (prefers-color-scheme: dark) {
3192
- body.theme-system .s-banner__success.s-banner__important {
3193
- --_no-bg: var(--green-500);
3194
- --_no-fc: var(--white);
3195
- }
3196
- }
3197
- body.theme-dark .s-banner__success.s-banner__important,
3198
- .theme-dark__forced .s-banner__success.s-banner__important,
3199
- body.theme-system .theme-dark__forced .s-banner__success.s-banner__important {
3200
- --_no-bg: var(--green-500);
3201
- --_no-fc: var(--white);
3202
- }
3203
- body.theme-highcontrast .s-banner__success.s-banner__important {
3204
- --_no-bg: var(--green-500);
3205
- --_no-fc: var(--white);
3206
- }
3207
- .s-banner__warning {
3208
- --_no-bc: var(--yellow-300);
3209
- --_no-bg: var(--yellow-050);
3210
- --_no-btn-bg-active: var(--yellow-300);
3211
- --_no-btn-bg-focus: var(--yellow-200);
3212
- --_no-code-bg: var(--yellow-200);
3213
- }
3214
- body.theme-highcontrast .s-banner__warning:not(.s-banner__important) {
3215
- --_no-bg: var(--yellow-200);
3216
- }
3217
- .s-banner__warning.s-banner__important {
3218
- --_no-bc: var(--_no-bg);
3219
- --_no-bg: var(--yellow-400);
3220
- --_no-fc: var(--black-900);
3221
- --_no-btn-bg-active: var(--yellow-600);
3222
- --_no-btn-bg-focus: var(--yellow-500);
3223
- }
3224
- @media (prefers-color-scheme: dark) {
3225
- body.theme-system .s-banner__warning.s-banner__important {
3226
- --_no-bg: var(--yellow-600);
3227
- --_no-fc: var(--white);
3228
- }
3229
- }
3230
- body.theme-dark .s-banner__warning.s-banner__important,
3231
- .theme-dark__forced .s-banner__warning.s-banner__important,
3232
- body.theme-system .theme-dark__forced .s-banner__warning.s-banner__important {
3233
- --_no-bg: var(--yellow-600);
3234
- --_no-fc: var(--white);
3235
- }
3236
- body.theme-highcontrast .s-banner__warning.s-banner__important {
3237
- --_no-bg: var(--yellow-700);
3238
- --_no-fc: var(--white);
3239
- }
3240
- .s-banner code {
3241
- background: var(--_no-code-bg, transparent);
3242
- }
3243
- .s-banner .s-banner--btn {
3244
- color: inherit;
3245
- padding: var(--su8);
3246
- }
3247
- .s-banner .s-banner--btn:not(:focus) {
3248
- box-shadow: none;
3249
- }
3250
- .s-banner .s-banner--btn:active {
3251
- background: var(--_no-btn-bg-active);
3238
+ .s-navigation .s-navigation--item__dropdown {
3239
+ padding-right: 2em;
3252
3240
  }
3253
- .s-banner .s-banner--btn:focus,
3254
- .s-banner .s-banner--btn:hover {
3255
- background: var(--_no-btn-bg-focus);
3241
+ .s-navigation .s-navigation--item__dropdown:after {
3242
+ border-style: solid;
3243
+ border-width: var(--su-static4) var(--su-static4) 0 var(--su-static4);
3244
+ border-color: currentColor transparent;
3245
+ content: "";
3246
+ pointer-events: none;
3247
+ position: absolute;
3248
+ right: 0.9em;
3249
+ top: calc(50% - 2px);
3250
+ z-index: var(--zi-active);
3256
3251
  }
3257
- .s-banner[aria-hidden="true"] {
3258
- --_no-x-offset: calc(var(--su48) + var(--su2) * -1);
3259
- opacity: 0;
3260
- visibility: hidden;
3252
+ .s-navigation .s-navigation--item:hover,
3253
+ .s-navigation .s-navigation--item:active {
3254
+ background-color: var(--_na-item-bg-hover);
3255
+ color: var(--_na-item-fc-hover);
3261
3256
  }
3262
- .s-banner[aria-hidden="false"] {
3263
- --_no-x-offset: calc(var(--su48) + var(--su1));
3264
- opacity: 1;
3265
- visibility: visible;
3257
+ .s-navigation .s-navigation--item:focus:not(:focus-visible) {
3258
+ outline: none;
3259
+ box-shadow: none;
3266
3260
  }
3267
- .s-banner.is-pinned {
3268
- z-index: calc(var(--zi-navigation-fixed) + 1);
3261
+ .s-navigation .s-navigation--item:focus-visible {
3262
+ outline: none;
3263
+ box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
3269
3264
  }
3270
- .s-banner__body-pt {
3271
- padding-top: 93px;
3265
+ .s-navigation .s-navigation--title {
3266
+ margin-top: var(--_na-title-mt);
3267
+ font-size: var(--fs-fine);
3268
+ font-weight: bold;
3269
+ padding: var(--su6) var(--su12);
3270
+ text-transform: uppercase;
3272
3271
  }
3273
- .s-banner .s-banner--container {
3274
- margin: 0 auto;
3275
- max-width: calc(var(--s-step) * 10);
3276
- position: relative;
3277
- width: 100%;
3272
+ .s-navigation .s-navigation--title:first-child {
3273
+ --_na-title-mt: 0;
3278
3274
  }
3279
3275
  .s-notice {
3280
3276
  --_no-bc: var(--bc-medium);
@@ -3487,39 +3483,6 @@ body.theme-highcontrast .s-notice__warning.s-notice__important {
3487
3483
  .s-notice .s-notice--btn:hover {
3488
3484
  background: var(--_no-btn-bg-focus);
3489
3485
  }
3490
- .s-toast {
3491
- display: flex;
3492
- justify-content: center;
3493
- left: var(--su8);
3494
- opacity: 0;
3495
- pointer-events: none;
3496
- position: fixed;
3497
- right: var(--su8);
3498
- top: var(--su16);
3499
- transform: translate3d(0, -66px, 0);
3500
- transition: transform 100ms var(--te-smooth-slow) 0s, opacity 60ms var(--te-smooth-slow) 0ms, visibility 0s 150ms;
3501
- visibility: hidden;
3502
- z-index: calc(var(--zi-modals) + 1);
3503
- }
3504
- @media (prefers-reduced-motion) {
3505
- .s-toast {
3506
- transform: none !important;
3507
- }
3508
- }
3509
- .s-toast[aria-hidden="false"] {
3510
- opacity: 1;
3511
- transform: translate3d(0, 0, 0);
3512
- transition: visibility 0s 0s, opacity 100ms var(--te-smooth) 0s, transform 100ms var(--te-smooth) 0s;
3513
- visibility: visible;
3514
- }
3515
- .s-toast .s-notice {
3516
- box-shadow: var(--bs-sm);
3517
- max-width: 44rem;
3518
- padding-bottom: var(--su8);
3519
- padding-top: var(--su8);
3520
- pointer-events: all;
3521
- width: 100%;
3522
- }
3523
3486
  .s-page-title {
3524
3487
  --_pt-ai: flex-end;
3525
3488
  --_pt-fd: row;
@@ -3995,14 +3958,17 @@ body.theme-highcontrast .s-post-summary .s-post-summary--answer:before {
3995
3958
  overflow: hidden;
3996
3959
  }
3997
3960
  .s-post-summary .s-post-summary--content-menu-button {
3998
- padding: var(--su8) !important;
3999
- position: absolute !important;
4000
3961
  right: var(--su8);
4001
3962
  top: var(--su8);
4002
3963
  }
4003
3964
  .s-post-summary .s-post-summary--content-menu-button .svg-icon {
4004
3965
  margin: 0 !important;
4005
3966
  }
3967
+ .s-post-summary .s-post-summary--content-menu-button,
3968
+ .s-post-summary .s-post-summary--content-menu-button.s-btn {
3969
+ padding: var(--su8);
3970
+ position: absolute;
3971
+ }
4006
3972
  .s-post-summary .s-post-summary--content-title {
4007
3973
  word-break: break-word !important;
4008
3974
  overflow-wrap: break-word !important;
@@ -4873,6 +4839,157 @@ body.theme-highcontrast .s-prose {
4873
4839
  position: absolute;
4874
4840
  width: 100%;
4875
4841
  }
4842
+ .s-select {
4843
+ --_se-arrow-bc: currentColor transparent;
4844
+ --_se-arrow-size: var(--su-static4);
4845
+ --_se-select-bc: var(--bc-darker);
4846
+ --_se-select-bc-focus: var(--theme-secondary-300);
4847
+ --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
4848
+ --_se-select-bg: var(--white);
4849
+ --_se-select-br: var(--br-sm);
4850
+ --_se-select-fc: var(--black);
4851
+ --_se-select-px: 0.7em;
4852
+ --_se-select-py: 0.6em;
4853
+ --_se-select-fs: var(--fs-body1);
4854
+ color: var(--fc-dark);
4855
+ position: relative;
4856
+ }
4857
+ @supports (-webkit-overflow-scrolling: touch) {
4858
+ .s-select {
4859
+ --_se-select-fs: 16px;
4860
+ --_se-select-px: 0.55em;
4861
+ --_se-select-py: 0.4em;
4862
+ }
4863
+ }
4864
+ .is-disabled .s-select,
4865
+ .is-readonly .s-select,
4866
+ .has-success .s-select,
4867
+ .has-error .s-select,
4868
+ .has-warning .s-select {
4869
+ position: relative;
4870
+ }
4871
+ .has-error .s-select,
4872
+ .has-success .s-select,
4873
+ .has-warning .s-select {
4874
+ --_se-select-bc-focus: var(--_se-select-bc);
4875
+ }
4876
+ .has-error .s-select {
4877
+ --_se-select-bc: var(--red-400);
4878
+ --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-error);
4879
+ }
4880
+ .has-success .s-select {
4881
+ --_se-select-bc: var(--green-400);
4882
+ --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-success);
4883
+ }
4884
+ .has-warning .s-select {
4885
+ --_se-select-bc: var(--yellow-600);
4886
+ --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
4887
+ }
4888
+ .is-disabled .s-select {
4889
+ --_se-arrow-bc: var(--bc-darker) transparent;
4890
+ }
4891
+ .s-select.s-select__sm {
4892
+ --_se-select-fs: var(--fs-caption);
4893
+ }
4894
+ .s-select.s-select__md {
4895
+ --_se-select-fs: var(--fs-body3);
4896
+ --_se-select-br: calc(var(--br-sm) + var(--su-static1));
4897
+ --_se-select-py: 0.5em;
4898
+ }
4899
+ .s-select.s-select__lg {
4900
+ --_se-select-fs: var(--fs-title);
4901
+ --_se-select-br: calc(var(--br-sm) + var(--su-static1));
4902
+ --_se-select-px: 0.6em;
4903
+ --_se-select-py: 0.45em;
4904
+ }
4905
+ .s-select.s-select__xl {
4906
+ --_se-select-fs: var(--fs-headline1);
4907
+ --_se-select-br: var(--br-md);
4908
+ --_se-select-px: 0.5em;
4909
+ --_se-select-py: 0.4em;
4910
+ }
4911
+ select.s-select:-webkit-autofill,
4912
+ .s-select > select:-webkit-autofill {
4913
+ -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-050) inset;
4914
+ -webkit-text-fill-color: var(--black);
4915
+ border-color: var(--blue-300);
4916
+ transition: background-color 0s 50000s;
4917
+ }
4918
+ select.s-select:-webkit-autofill:focus,
4919
+ .s-select > select:-webkit-autofill:focus {
4920
+ border-color: var(--blue-300);
4921
+ -webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset, 0 0 0 var(--su-static4) var(--focus-ring);
4922
+ }
4923
+ select.s-select::-webkit-contacts-auto-fill-button,
4924
+ .s-select > select::-webkit-contacts-auto-fill-button {
4925
+ background-color: var(--black);
4926
+ }
4927
+ .s-select:before,
4928
+ .s-select:after {
4929
+ border-color: var(--_se-arrow-bc);
4930
+ border-style: solid;
4931
+ border-width: var(--_se-arrow-size);
4932
+ content: "";
4933
+ pointer-events: none;
4934
+ position: absolute;
4935
+ right: calc(var(--su-static12) + var(--su-static1));
4936
+ z-index: var(--zi-selected);
4937
+ }
4938
+ .s-select:after {
4939
+ border-bottom-width: 0;
4940
+ top: calc(50% + var(--su-static1));
4941
+ }
4942
+ .s-select:before {
4943
+ border-top-width: 0;
4944
+ top: calc(50% - calc(var(--_se-arrow-size) + var(--su-static1)));
4945
+ }
4946
+ .s-select > select {
4947
+ background-color: var(--_se-select-bg);
4948
+ border: var(--su-static1) solid var(--_se-select-bc);
4949
+ border-radius: var(--_se-select-br);
4950
+ color: var(--_se-select-fc);
4951
+ font-size: var(--_se-select-fs);
4952
+ padding: var(--_se-select-py) var(--_se-select-px);
4953
+ appearance: none;
4954
+ font-family: inherit;
4955
+ height: 100%;
4956
+ line-height: var(--lh-sm);
4957
+ outline: 0;
4958
+ padding-right: var(--su32);
4959
+ position: relative;
4960
+ width: 100%;
4961
+ }
4962
+ fieldset[disabled] .s-select > select,
4963
+ .s-select > select[disabled] {
4964
+ cursor: not-allowed;
4965
+ opacity: var(--_o-disabled-static);
4966
+ }
4967
+ .s-select > select[readonly],
4968
+ .is-readonly .s-select > select {
4969
+ --_se-select-bc: var(--bc-light);
4970
+ --_se-select-bg: var(--black-050);
4971
+ --_se-select-fc: var(--black-200);
4972
+ cursor: not-allowed;
4973
+ }
4974
+ body.theme-highcontrast .s-select > select[readonly],
4975
+ body.theme-highcontrast .is-readonly .s-select > select {
4976
+ --_se-select-fc: var(--fc-light);
4977
+ }
4978
+ .s-select > select::-moz-focus-inner {
4979
+ outline: none !important;
4980
+ }
4981
+ .s-select > select:focus {
4982
+ border-color: var(--_se-select-bc-focus);
4983
+ box-shadow: var(--_se-select-bs-focus);
4984
+ color: var(--black);
4985
+ outline: 0;
4986
+ }
4987
+ body.theme-highcontrast .s-select > select:focus {
4988
+ --_se-select-bc-focus: var(--black);
4989
+ }
4990
+ .s-select .s-input-icon {
4991
+ right: var(--su32);
4992
+ }
4876
4993
  .s-sidebarwidget {
4877
4994
  --_sw-bc: var(--bc-medium);
4878
4995
  --_sw-after-bc: var(--_sw-bc);
@@ -5174,27 +5291,6 @@ body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__green {
5174
5291
  transform: rotate(360deg);
5175
5292
  }
5176
5293
  }
5177
- .s-table-container {
5178
- overflow-x: auto;
5179
- scrollbar-color: var(--scrollbar) transparent;
5180
- }
5181
- .s-table-container::-webkit-scrollbar {
5182
- width: calc(var(--su-static12) - var(--su-static2));
5183
- height: calc(var(--su-static12) - var(--su-static2));
5184
- background-color: transparent;
5185
- }
5186
- .s-table-container::-webkit-scrollbar-track {
5187
- border-radius: calc(var(--su-static12) - var(--su-static2));
5188
- background-color: transparent;
5189
- }
5190
- .s-table-container::-webkit-scrollbar-thumb {
5191
- border-radius: calc(var(--su-static12) - var(--su-static2));
5192
- background-color: var(--scrollbar);
5193
- }
5194
- .s-table-container::-webkit-scrollbar-corner {
5195
- background-color: transparent;
5196
- border-color: transparent;
5197
- }
5198
5294
  .s-table {
5199
5295
  --_ta-tbody-tbody-bc: var(--bc-medium);
5200
5296
  --_ta-tbody-tbody-bw: var(--su-static2);
@@ -5452,6 +5548,27 @@ body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__green {
5452
5548
  .s-table tr.is-disabled td:not(.is-enabled) {
5453
5549
  opacity: calc(var(--_o-disabled) * 0.6);
5454
5550
  }
5551
+ .s-table-container {
5552
+ overflow-x: auto;
5553
+ scrollbar-color: var(--scrollbar) transparent;
5554
+ }
5555
+ .s-table-container::-webkit-scrollbar {
5556
+ width: calc(var(--su-static12) - var(--su-static2));
5557
+ height: calc(var(--su-static12) - var(--su-static2));
5558
+ background-color: transparent;
5559
+ }
5560
+ .s-table-container::-webkit-scrollbar-track {
5561
+ border-radius: calc(var(--su-static12) - var(--su-static2));
5562
+ background-color: transparent;
5563
+ }
5564
+ .s-table-container::-webkit-scrollbar-thumb {
5565
+ border-radius: calc(var(--su-static12) - var(--su-static2));
5566
+ background-color: var(--scrollbar);
5567
+ }
5568
+ .s-table-container::-webkit-scrollbar-corner {
5569
+ background-color: transparent;
5570
+ border-color: transparent;
5571
+ }
5455
5572
  .s-tag {
5456
5573
  --_ta-bc: var(--theme-tag-border-color);
5457
5574
  --_ta-bc-hover: var(--theme-tag-hover-border-color);
@@ -5519,7 +5636,7 @@ body.theme-highcontrast a.s-tag.is-selected:focus {
5519
5636
  --_ta-lh: 1.73333333;
5520
5637
  }
5521
5638
  .s-tag.s-tag__lg {
5522
- --_ta-br: calc(var(--br-sm) + 1px);
5639
+ --_ta-br: calc(var(--br-sm) + var(--su-static1));
5523
5640
  --_ta-fs: var(--fs-subheading);
5524
5641
  --_ta-lh: 1.68421053;
5525
5642
  --_ta-px: var(--su6);
@@ -5639,6 +5756,39 @@ body.theme-highcontrast a.s-tag:not(.is-selected):focus,
5639
5756
  body.theme-highcontrast a.s-tag:not(.is-selected):active {
5640
5757
  border-color: currentColor;
5641
5758
  }
5759
+ .s-toast {
5760
+ display: flex;
5761
+ justify-content: center;
5762
+ left: var(--su8);
5763
+ opacity: 0;
5764
+ pointer-events: none;
5765
+ position: fixed;
5766
+ right: var(--su8);
5767
+ top: var(--su16);
5768
+ transform: translate3d(0, -66px, 0);
5769
+ transition: transform 100ms var(--te-smooth-slow) 0s, opacity 60ms var(--te-smooth-slow) 0ms, visibility 0s 150ms;
5770
+ visibility: hidden;
5771
+ z-index: calc(var(--zi-modals) + 1);
5772
+ }
5773
+ @media (prefers-reduced-motion) {
5774
+ .s-toast {
5775
+ transform: none !important;
5776
+ }
5777
+ }
5778
+ .s-toast[aria-hidden="false"] {
5779
+ opacity: 1;
5780
+ transform: translate3d(0, 0, 0);
5781
+ transition: visibility 0s 0s, opacity 100ms var(--te-smooth) 0s, transform 100ms var(--te-smooth) 0s;
5782
+ visibility: visible;
5783
+ }
5784
+ .s-toast .s-notice {
5785
+ box-shadow: var(--bs-sm);
5786
+ max-width: 44rem;
5787
+ padding-bottom: var(--su8);
5788
+ padding-top: var(--su8);
5789
+ pointer-events: all;
5790
+ width: 100%;
5791
+ }
5642
5792
  .s-toggle-switch {
5643
5793
  --_ts-bg: var(--black-300);
5644
5794
  --_ts-bg-ps: left center;
@@ -5646,6 +5796,11 @@ body.theme-highcontrast a.s-tag:not(.is-selected):active {
5646
5796
  --_ts-multiple-bg: unset;
5647
5797
  --_ts-multiple-fc: var(--black-500);
5648
5798
  }
5799
+ fieldset[disabled] .s-toggle-switch,
5800
+ fieldset[disabled] .s-toggle-switch label {
5801
+ cursor: not-allowed;
5802
+ opacity: var(--_o-disabled-static);
5803
+ }
5649
5804
  .s-toggle-switch.s-toggle-switch__multiple {
5650
5805
  align-items: stretch;
5651
5806
  display: flex;
@@ -8075,6 +8230,33 @@ body.theme-highcontrast .bc-black-200 {
8075
8230
  .bc-yellow-900 {
8076
8231
  border-color: var(--yellow-900) !important;
8077
8232
  }
8233
+ .bc-gold-lighter {
8234
+ border-color: var(--gold-lighter) !important;
8235
+ }
8236
+ .bc-gold {
8237
+ border-color: var(--gold) !important;
8238
+ }
8239
+ .bc-gold-darker {
8240
+ border-color: var(--gold-darker) !important;
8241
+ }
8242
+ .bc-silver-lighter {
8243
+ border-color: var(--silver-lighter) !important;
8244
+ }
8245
+ .bc-silver {
8246
+ border-color: var(--silver) !important;
8247
+ }
8248
+ .bc-silver-darker {
8249
+ border-color: var(--silver-darker) !important;
8250
+ }
8251
+ .bc-bronze-lighter {
8252
+ border-color: var(--bronze-lighter) !important;
8253
+ }
8254
+ .bc-bronze {
8255
+ border-color: var(--bronze) !important;
8256
+ }
8257
+ .bc-bronze-darker {
8258
+ border-color: var(--bronze-darker) !important;
8259
+ }
8078
8260
  .bc-theme-primary-025 {
8079
8261
  border-color: var(--theme-primary-025) !important;
8080
8262
  }
@@ -22908,12 +23090,10 @@ ol {
22908
23090
  }
22909
23091
  }
22910
23092
  @media print {
22911
- .print\:d-block {
23093
+ .print\:d-block {
22912
23094
  display: block !important;
22913
23095
  }
22914
- }
22915
- @media print {
22916
- .print\:d-none {
23096
+ .print\:d-none {
22917
23097
  display: none !important;
22918
23098
  }
22919
23099
  }