@stackoverflow/stacks 2.0.9 → 2.1.0-rc.0

package/dist/css/stacks.css

@@ -1071,44 +1071,16 @@ a.s-block-link.is-selected,
   --_bl-fc: var(--black-600);
   font-weight: bold;
 }
-a.s-block-linka.s-block-link__left.is-selected,
-a.s-block-link.s-block-link__left.is-selected,
-.s-block-linka.s-block-link__left.is-selected,
-.s-block-link.s-block-link__left.is-selected,
-a.s-block-linka.s-block-link__right.is-selected,
-a.s-block-link.s-block-link__right.is-selected,
-.s-block-linka.s-block-link__right.is-selected,
-.s-block-link.s-block-link__right.is-selected {
+a.s-block-linka.s-block-link__left.is-selected:not(:focus-visible),
+a.s-block-link.s-block-link__left.is-selected:not(:focus-visible),
+.s-block-linka.s-block-link__left.is-selected:not(:focus-visible),
+.s-block-link.s-block-link__left.is-selected:not(:focus-visible),
+a.s-block-linka.s-block-link__right.is-selected:not(:focus-visible),
+a.s-block-link.s-block-link__right.is-selected:not(:focus-visible),
+.s-block-linka.s-block-link__right.is-selected:not(:focus-visible),
+.s-block-link.s-block-link__right.is-selected:not(:focus-visible) {
   box-shadow: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--_bl-bs-color);
 }
-a.s-block-linka.s-block-link__left.is-selected:focus:not(:focus-visible),
-a.s-block-link.s-block-link__left.is-selected:focus:not(:focus-visible),
-.s-block-linka.s-block-link__left.is-selected:focus:not(:focus-visible),
-.s-block-link.s-block-link__left.is-selected:focus:not(:focus-visible),
-a.s-block-linka.s-block-link__right.is-selected:focus:not(:focus-visible),
-a.s-block-link.s-block-link__right.is-selected:focus:not(:focus-visible),
-.s-block-linka.s-block-link__right.is-selected:focus:not(:focus-visible),
-.s-block-link.s-block-link__right.is-selected:focus:not(:focus-visible),
-a.s-block-linka.s-block-link__left.is-selected:focus-visible,
-a.s-block-link.s-block-link__left.is-selected:focus-visible,
-.s-block-linka.s-block-link__left.is-selected:focus-visible,
-.s-block-link.s-block-link__left.is-selected:focus-visible,
-a.s-block-linka.s-block-link__right.is-selected:focus-visible,
-a.s-block-link.s-block-link__right.is-selected:focus-visible,
-.s-block-linka.s-block-link__right.is-selected:focus-visible,
-.s-block-link.s-block-link__right.is-selected:focus-visible {
-  outline: none;
-}
-a.s-block-linka.s-block-link__left.is-selected:focus-visible,
-a.s-block-link.s-block-link__left.is-selected:focus-visible,
-.s-block-linka.s-block-link__left.is-selected:focus-visible,
-.s-block-link.s-block-link__left.is-selected:focus-visible,
-a.s-block-linka.s-block-link__right.is-selected:focus-visible,
-a.s-block-link.s-block-link__right.is-selected:focus-visible,
-.s-block-linka.s-block-link__right.is-selected:focus-visible,
-.s-block-link.s-block-link__right.is-selected:focus-visible {
-  box-shadow: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--_bl-bs-color), 0 0 0 var(--su-static4) var(--focus-ring-muted);
-}
 a.s-block-linka.s-block-link__right.is-selected,
 a.s-block-link.s-block-link__right.is-selected,
 .s-block-linka.s-block-link__right.is-selected,
@@ -1137,15 +1109,11 @@ a.s-block-link:visited,
 .s-block-link:visited {
   color: var(--_bl-fc-visited);
 }
-a.s-block-link:focus:not(:focus-visible),
-.s-block-link:focus:not(:focus-visible) {
-  outline: none;
-  box-shadow: none;
-}
 a.s-block-link:focus-visible,
 .s-block-link:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
+  border-radius: var(--br-sm);
+  box-shadow: inset 0 0 0 var(--su-static2) var(--focus-theme), inset 0 0 0 var(--su-static4) var(--focus-neutral);
+  outline: var(--su-static2) solid transparent !important;
 }
 .s-breadcrumbs {
   --_br-divider-px: var(--su4);
@@ -1186,29 +1154,31 @@ body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
   --_bu-bc: transparent;
   --_bu-br: var(--br-md);
   --_bu-fc: var(--theme-button-color, var(--theme-secondary-400));
-  --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring);
   --_bu-fs: var(--fs-body1);
   --_bu-p: 0.8em;
-  --_bu-bc-selected: transparent;
+  --_bu-bc-active: var(--_bu-bc);
   --_bu-bg-active: var(--theme-button-active-background-color, var(--theme-secondary-300));
-  --_bu-bg-hover: var(--theme-button-hover-background-color, var(--theme-secondary-200));
-  --_bu-bg-selected: var(--theme-button-selected-background-color, var(--theme-secondary-300));
   --_bu-fc-active: var(--theme-button-hover-color, var(--theme-secondary-500));
+  --_bu-bc-hover: var(--_bu-bc);
+  --_bu-bg-hover: var(--theme-button-hover-background-color, var(--theme-secondary-200));
   --_bu-fc-hover: var(--theme-button-hover-color, var(--theme-secondary-500));
+  --_bu-bg-selected: var(--theme-button-selected-background-color, var(--theme-secondary-300));
   --_bu-fc-selected: var(--theme-button-selected-color, var(--theme-secondary-600));
   --_bu-filled-bc: transparent;
-  --_bu-filled-bc-active: transparent;
-  --_bu-filled-bc-selected: transparent;
   --_bu-filled-bg: var(--theme-button-primary-background-color, var(--theme-secondary-400));
-  --_bu-filled-bg-active: var(--theme-button-primary-active-background-color, var(--theme-secondary-600));
-  --_bu-filled-bg-hover: var(--theme-button-primary-hover-background-color, var(--theme-secondary-500));
-  --_bu-filled-bg-selected: var(--theme-button-primary-selected-background-color, var(--theme-secondary-500));
   --_bu-filled-fc: var(--theme-button-primary-color, var(--white));
+  --_bu-filled-bc-selected: transparent;
+  --_bu-filled-bg-selected: var(--theme-button-primary-selected-background-color, var(--theme-secondary-500));
+  --_bu-filled-fc-selected: var(--theme-button-primary-selected-color, var(--white));
+  --_bu-filled-bc-active: var(--_bu-filled-bc);
+  --_bu-filled-bg-active: var(--theme-button-primary-active-background-color, var(--theme-secondary-600));
   --_bu-filled-fc-active: var(--theme-button-primary-hover-color, var(--white));
+  --_bu-filled-bc-hover: var(--_bu-filled-bc);
+  --_bu-filled-bg-hover: var(--theme-button-primary-hover-background-color, var(--theme-secondary-500));
   --_bu-filled-fc-hover: var(--theme-button-primary-hover-color, var(--white));
-  --_bu-filled-fc-selected: var(--theme-button-primary-selected-color, var(--white));
   --_bu-outlined-bc: var(--theme-button-outlined-border-color, var(--theme-secondary-400));
   --_bu-outlined-bg: var(--theme-button-outlined-background-color);
+  --_bg-outlined-fc: var(--theme-button-outlined-color, var(--theme-secondary-400));
   --_bu-outlined-bc-selected: var(--theme-button-outlined-selected-border-color, var(--theme-secondary-400));
   --_bu-outlined-bg-selected: var(--theme-button-selected-background-color, var(--theme-secondary-300));
   --_bu-outlined-fc-selected: var(--theme-button-selected-color, var(--theme-secondary-600));
@@ -1267,29 +1237,29 @@ button[type="reset"] .s-btn {
   opacity: 0;
 }
 .s-btn.is-selected,
-.s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn {
+.s-btn--radio:checked + .s-btn {
   background-color: var(--_bu-bg-selected);
-  border-color: var(--_bu-bc-selected);
+  border-color: var(--_bu-bc-selected, transparent);
   color: var(--_bu-fc-selected);
 }
 .s-btn.is-selected .s-btn--number,
-.s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn .s-btn--number {
+.s-btn--radio:checked + .s-btn .s-btn--number {
   color: var(--_bu-number-fc-selected);
 }
 .s-btn.is-selected.s-btn__filled,
-.s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn.s-btn__filled {
+.s-btn--radio:checked + .s-btn.s-btn__filled {
   border-color: var(--_bu-filled-bc-selected);
   background-color: var(--_bu-filled-bg-selected);
   color: var(--_bu-filled-fc-selected);
 }
 .s-btn.is-selected.s-btn__outlined,
-.s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn.s-btn__outlined {
+.s-btn--radio:checked + .s-btn.s-btn__outlined {
   border-color: var(--_bu-outlined-bc-selected);
   background-color: var(--_bu-outlined-bg-selected);
   color: var(--_bu-outlined-fc-selected);
 }
 body.theme-highcontrast .s-btn.is-selected.s-btn__outlined.s-btn__muted,
-body.theme-highcontrast .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn.s-btn__outlined.s-btn__muted {
+body.theme-highcontrast .s-btn--radio:checked + .s-btn.s-btn__outlined.s-btn__muted {
   --_bu-outlined-bc-selected: var(--_bu-filled-bc-selected);
   --_bu-outlined-bg-selected: var(--_bu-filled-bg-selected);
   --_bu-outlined-fc-selected: var(--_bu-filled-fc-selected);
@@ -1316,7 +1286,6 @@ body.theme-highcontrast .s-btn-group.s-btn-group--radio .s-btn--radio:checked +
 .s-btn.s-btn__link {
   --_bu-baw: 0;
   --_bu-br: 0;
-  --_bu-focus-ring: none;
   --_bu-p: 0;
   --_li-fc: var(--theme-link-color, var(--theme-secondary-400));
   --_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
@@ -1440,7 +1409,6 @@ button.s-btn.s-btn__link:focus {
   --_bu-bg: none;
   --_bu-br: 0;
   --_bu-fc: unset;
-  --_bu-focus-ring: none;
   --_bu-p: 0;
   cursor: default;
   font: unset;
@@ -1492,7 +1460,6 @@ body.theme-highcontrast .s-btn.s-btn__muted {
   --_bu-fc-active: var(--_bu-fc);
   --_bu-fc-hover: var(--red-500);
   --_bu-fc-selected: var(--red-600);
-  --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-error);
   --_bu-filled-bc: transparent;
   --_bu-filled-bc-selected: var(--_bu-filled-bc);
   --_bu-filled-bg: var(--red-400);
@@ -1511,6 +1478,7 @@ body.theme-highcontrast .s-btn.s-btn__muted {
   --_bu-number-fc-filled: var(--black);
 }
 .s-btn.s-btn__muted {
+  --_bu-bc-hover: var(--black-300);
   --_bu-bg-active: var(--black-150);
   --_bu-bg-hover: var(--black-100);
   --_bu-bg-selected: var(--black-200);
@@ -1518,7 +1486,6 @@ body.theme-highcontrast .s-btn.s-btn__muted {
   --_bu-fc-active: var(--_bu-fc);
   --_bu-fc-hover: var(--black-500);
   --_bu-fc-selected: var(--black-500);
-  --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
   --_bu-filled-bc: transparent;
   --_bu-filled-bc-selected: var(--_bu-filled-bc);
   --_bu-filled-bg: var(--black-225);
@@ -1533,7 +1500,11 @@ body.theme-highcontrast .s-btn.s-btn__muted {
   --_bu-outlined-bc-selected: var(--black-300);
   --_bu-outlined-bg-selected: var(--_bu-bg-selected);
   --_bu-outlined-fc-selected: var(--_bu-fc-selected);
+  --_bu-number-fc-filled: var(--white);
   --_bu-number-fc-selected: var(--white);
+  --_bu-bg-focus: var(--black-400);
+  --_bu-fc-focus: var(--white);
+  --_bu-number-fc-focus: var(--black-500);
 }
 body.theme-highcontrast .s-btn.s-btn__muted {
   --_bu-bg-hover: var(--black-225);
@@ -1585,7 +1556,6 @@ body.theme-highcontrast .s-btn.s-btn__github {
   --_bu-fc: var(--fc-medium);
   --_bu-fc-active: var(--fc-dark);
   --_bu-fc-hover: var(--black-600);
-  --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
 }
 .s-btn.s-btn__github {
   --_bu-bg: var(--black-600);
@@ -1594,7 +1564,6 @@ body.theme-highcontrast .s-btn.s-btn__github {
   --_bu-fc: var(--white);
   --_bu-fc-active: var(--white);
   --_bu-fc-hover: var(--white);
-  --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
   --_bu-hc-bc: transparent;
 }
 .s-btn .s-btn--badge {
@@ -1621,37 +1590,58 @@ body.theme-highcontrast .s-btn.s-btn__github {
   position: absolute;
   width: var(--su-static1);
 }
-.s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):hover,
-.s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):focus {
+.s-btn:not(.s-btn__link):not(.s-btn__unset):focus-visible,
+.s-btn--radio:focus-visible + .s-btn {
+  border-color: var(--theme-secondary-400) !important;
+  border-color: var(--focus-theme) !important;
+  box-shadow: inset 0 0 0 var(--su-static1) var(--focus-theme), inset 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-neutral);
+  outline: var(--su-static2) solid transparent !important;
+}
+.s-btn:not(.s-btn__link):not(.s-btn__unset).s-btn:not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):focus-visible,
+.s-btn--radio:focus-visible + .s-btn,
+.s-btn:not(.s-btn__link):not(.s-btn__unset).s-btn:not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):focus-visible.s-btn__filled,
+.s-btn--radio:focus-visible + .s-btn.s-btn__filled {
+  background-color: var(--_bu-bg-focus, var(--_bu-filled-bg));
+  color: var(--_bu-fc-focus, var(--_bu-filled-fc));
+}
+.s-btn:not(.s-btn__link):not(.s-btn__unset).s-btn:not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):focus-visible:not(:hover) .s-btn--number,
+.s-btn--radio:focus-visible + .s-btn:not(:hover) .s-btn--number,
+.s-btn:not(.s-btn__link):not(.s-btn__unset).s-btn:not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):focus-visible.s-btn__filled:not(:hover) .s-btn--number,
+.s-btn--radio:focus-visible + .s-btn.s-btn__filled:not(:hover) .s-btn--number {
+  color: var(--_bu-number-fc-focus, var(--_bu-number-fc-filled));
+}
+.s-btn:not(.s-btn__link):not(.s-btn__unset).s-btn:not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):hover {
   background-color: var(--_bu-bg-hover);
   color: var(--_bu-fc-hover);
 }
-.s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):hover.s-btn__filled,
-.s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):focus.s-btn__filled {
+.s-btn:not(.s-btn__link):not(.s-btn__unset).s-btn:not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):hover.s-btn__filled {
   background-color: var(--_bu-filled-bg-hover);
+  border-color: var(--_bu-filled-bc-hover);
   color: var(--_bu-filled-fc-hover);
 }
-.s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):active {
+.s-btn:not(.s-btn__link):not(.s-btn__unset).s-btn:not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):hover:not(.s-btn__outlined) {
+  border-color: var(--_bu-bc-hover);
+}
+.s-btn:not(.s-btn__link):not(.s-btn__unset).s-btn:not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):active {
   background-color: var(--_bu-bg-active);
+  border-color: var(--_bu-bc-active);
   color: var(--_bu-fc-active);
 }
-.s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):active.s-btn__filled {
+.s-btn:not(.s-btn__link):not(.s-btn__unset).s-btn:not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):active.s-btn__filled {
   background-color: var(--_bu-filled-bg-active);
+  border-color: var(--_bu-filled-bc-active);
   color: var(--_bu-filled-fc-active);
 }
-.s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):visited:not(:hover):not(:focus) {
+.s-btn:visited:not(:hover):not(:focus) {
   background-color: var(--_bu-bg);
+  border-color: var(--_bu-bc);
   color: var(--_bu-fc);
 }
-.s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):visited:not(:hover):not(:focus).s-btn__filled {
+.s-btn:visited:not(:hover):not(:focus).s-btn__filled {
   background-color: var(--_bu-filled-bg);
+  border-color: var(--_bu-filled-bc);
   color: var(--_bu-filled-fc);
 }
-.s-btn:focus,
-.s-btn--radio:focus + .s-btn {
-  box-shadow: var(--_bu-focus-ring);
-  outline: none;
-}
 .s-btn-group {
   display: flex;
   flex-wrap: wrap;
@@ -1771,10 +1761,8 @@ body.theme-highcontrast .s-card.s-card__muted > * {
 .s-radio {
   --_ch-baw: var(--su-static1);
   --_ch-bc: var(--bc-dark);
-  --_ch-bc-focus: var(--theme-secondary-400);
   --_ch-bg: var(--white);
   --_ch-bg-image: unset;
-  --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
   background-color: var(--_ch-bg);
   border: var(--_ch-baw) solid var(--_ch-bc);
   appearance: none;
@@ -1803,7 +1791,8 @@ input.s-radio {
 }
 .s-checkbox:focus,
 .s-radio:focus {
-  box-shadow: var(--_ch-bs-focus);
+  box-shadow: 0 0 0 var(--su-static2) var(--focus-neutral), 0 0 0 var(--su-static4) var(--focus-theme);
+  outline: var(--su-static2) solid transparent !important;
 }
 .s-checkbox {
   background-image: var(--_ch-bg-image);
@@ -1834,14 +1823,12 @@ body.theme-system .theme-dark__forced .s-checkbox:indeterminate {
   body.theme-highcontrast.theme-system .s-checkbox:checked,
   body.theme-highcontrast.theme-system .s-checkbox:indeterminate {
     --_ch-bc: var(--blue-500) !important;
-    --_ch-bc-focus: var(--_ch-bc);
     --_ch-bg: var(--blue-400);
   }
 }
 body.theme-highcontrast.theme-dark .s-checkbox:checked,
 body.theme-highcontrast.theme-dark .s-checkbox:indeterminate {
   --_ch-bc: var(--blue-500) !important;
-  --_ch-bc-focus: var(--_ch-bc);
   --_ch-bg: var(--blue-400);
 }
 .s-checkbox:checked,
@@ -1849,19 +1836,12 @@ body.theme-highcontrast.theme-dark .s-checkbox:indeterminate {
   --_ch-bc: var(--theme-secondary-400) !important;
   --_ch-bg: var(--theme-secondary-400);
 }
-.s-checkbox:checked:focus,
-.s-checkbox:indeterminate:focus {
-  --_ch-bc-focus: var(--theme-secondary-400);
-}
 .s-checkbox:checked {
   --_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='hsl(0, 0%, 100%)'/%3E%3C/svg%3E");
 }
 .s-checkbox:indeterminate {
   --_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='hsl(0, 0%, 100%)'/%3E%3C/svg%3E");
 }
-.s-checkbox:focus {
-  border-color: var(--_ch-bc-focus);
-}
 .s-radio {
   border-radius: var(--br-circle);
 }
@@ -1891,17 +1871,14 @@ body.theme-highcontrast.theme-dark .s-radio:checked {
 .has-error .s-checkbox,
 .has-error .s-radio:not(:checked) {
   --_ch-bc: var(--red-400);
-  --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-error);
 }
 .has-success .s-checkbox,
 .has-success .s-radio:not(:checked) {
   --_ch-bc: var(--green-400);
-  --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-success);
 }
 .has-warning .s-checkbox,
 .has-warning .s-radio:not(:checked) {
   --_ch-bc: var(--yellow-500);
-  --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
 }
 .s-check-control {
   --_cc-ai: center;
@@ -2171,13 +2148,10 @@ pre.s-code-block::-webkit-scrollbar-corner {
 .s-input,
 .s-textarea {
   --_in-bc: var(--bc-darker);
-  --_in-bc-focus: var(--theme-secondary-400);
   --_in-bg: var(--white);
   --_in-br: var(--br-md);
-  --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
   --_in-c: unset;
   --_in-fc: var(--fc-dark);
-  --_in-fc-focus: var(--black);
   --_in-fs: var(--fs-body1);
   --_in-o: unset;
   --_in-px: 0.7em;
@@ -2237,7 +2211,6 @@ fieldset[disabled] .s-textarea,
   --_in-bg: var(--black-150);
   --_in-bc: var(--bc-light);
   --_in-fc: var(--black-300);
-  --_in-fc-focus: var(--_in-fc);
 }
 body.theme-highcontrast .s-input[readonly],
 body.theme-highcontrast .s-textarea[readonly],
@@ -2256,7 +2229,6 @@ body.theme-highcontrast .is-readonly .s-textarea {
 .has-error .s-input,
 .has-error .s-textarea {
   --_in-bc: var(--red-400);
-  --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-error);
 }
 body.theme-highcontrast .has-error .s-input,
 body.theme-highcontrast .has-error .s-textarea {
@@ -2265,7 +2237,6 @@ body.theme-highcontrast .has-error .s-textarea {
 .has-success .s-input,
 .has-success .s-textarea {
   --_in-bc: var(--green-400);
-  --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-success);
 }
 body.theme-highcontrast .has-success .s-input,
 body.theme-highcontrast .has-success .s-textarea {
@@ -2274,7 +2245,6 @@ body.theme-highcontrast .has-success .s-textarea {
 .has-warning .s-input,
 .has-warning .s-textarea {
   --_in-bc: var(--yellow-500);
-  --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
 }
 body.theme-highcontrast .has-warning .s-input,
 body.theme-highcontrast .has-warning .s-textarea {
@@ -2358,10 +2328,8 @@ body.theme-highcontrast .has-warning .s-textarea {
 }
 .s-input:focus,
 .s-textarea:focus {
-  border-color: var(--_in-bc-focus);
-  box-shadow: var(--_in-bs-focus);
-  color: var(--_in-fc-focus);
-  outline: 0;
+  box-shadow: 0 0 0 var(--su-static2) var(--focus-neutral), 0 0 0 var(--su-static4) var(--focus-theme);
+  outline: var(--su-static2) solid transparent !important;
 }
 .s-input::-webkit-scrollbar,
 .s-textarea::-webkit-scrollbar {
@@ -2391,15 +2359,6 @@ body.theme-highcontrast .has-warning .s-textarea {
 .has-warning .s-input {
   padding-right: var(--su32);
 }
-.s-input:focus-within {
-  border-color: var(--_in-bc-focus);
-  box-shadow: var(--_in-bs-focus);
-  color: var(--_in-fc-focus);
-  outline: 0;
-}
-body.theme-highcontrast .s-input:focus-within {
-  --_in-bc-focus: var(--black);
-}
 .s-input.s-input__md {
   --_in-py: 0.5em;
 }
@@ -3133,13 +3092,9 @@ body.theme-highcontrast .s-navigation .s-navigation--item.is-selected {
   background-color: var(--_na-item-bg-hover);
   color: var(--_na-item-fc-hover);
 }
-.s-navigation .s-navigation--item:focus:not(:focus-visible) {
-  outline: none;
-  box-shadow: none;
-}
 .s-navigation .s-navigation--item:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
+  box-shadow: inset 0 0 0 var(--su-static2) var(--focus-theme), inset 0 0 0 var(--su-static4) var(--focus-neutral);
+  outline: var(--su-static2) solid transparent !important;
 }
 .s-navigation .s-navigation--title {
   margin-top: var(--_na-title-mt);
@@ -3358,6 +3313,8 @@ body.theme-highcontrast .s-notice__warning.s-notice__important {
   --_pa-item-bg: transparent;
   --_pa-item-bc: var(--bc-darker);
   --_pa-item-fc: var(--fc-medium);
+  --_pa-item-bg-focus: var(--black-400);
+  --_pa-item-fc-focus: var(--white);
   --_pa-item-bg-hover: var(--black-225);
   --_pa-item-bc-hover: var(--bc-darker);
   --_pa-item-fc-hover: var(--fc-dark);
@@ -3376,6 +3333,7 @@ body.theme-highcontrast .s-pagination .s-pagination--item {
   --_pa-item-bg: var(--theme-primary);
   --_pa-item-bc: transparent;
   --_pa-item-fc: var(--white);
+  --_pa-item-bg-focus: var(--theme-primary-400);
 }
 .s-pagination .s-pagination--item.s-pagination--item__clear {
   --_pa-item-bg: transparent;
@@ -3393,6 +3351,13 @@ body.theme-highcontrast .s-pagination .s-pagination--item {
   border-color: var(--_pa-item-bc-hover);
   color: var(--_pa-item-fc-hover);
 }
+.s-pagination .s-pagination--item:focus-visible {
+  background-color: var(--_pa-item-bg-focus);
+  color: var(--_pa-item-fc-focus);
+  border-color: var(--focus-theme) !important;
+  box-shadow: inset 0 0 0 var(--su-static1) var(--focus-theme), inset 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-neutral);
+  outline: var(--su-static2) solid transparent !important;
+}
 .s-popover {
   --_po-bg: var(--white);
   --_po-bc: var(--bc-medium);
@@ -4708,8 +4673,6 @@ body.theme-highcontrast .s-prose {
   --_se-arrow-bc: currentColor transparent;
   --_se-arrow-size: var(--su-static4);
   --_se-select-bc: var(--bc-darker);
-  --_se-select-bc-focus: var(--theme-secondary-400);
-  --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
   --_se-select-bg: var(--white);
   --_se-select-br: var(--br-md);
   --_se-select-fc: var(--black);
@@ -4740,15 +4703,12 @@ body.theme-highcontrast .s-prose {
 }
 .has-error .s-select {
   --_se-select-bc: var(--red-400);
-  --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-error);
 }
 .has-success .s-select {
   --_se-select-bc: var(--green-400);
-  --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-success);
 }
 .has-warning .s-select {
   --_se-select-bc: var(--yellow-500);
-  --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
 }
 .is-disabled .s-select {
   --_se-arrow-bc: var(--bc-dark) transparent;
@@ -4840,17 +4800,10 @@ body.theme-highcontrast .s-select > select[readonly],
 body.theme-highcontrast .is-readonly .s-select > select {
   --_se-select-fc: var(--fc-light);
 }
-.s-select > select::-moz-focus-inner {
-  outline: none !important;
-}
 .s-select > select:focus {
-  border-color: var(--_se-select-bc-focus);
-  box-shadow: var(--_se-select-bs-focus);
   color: var(--black);
-  outline: 0;
-}
-body.theme-highcontrast .s-select > select:focus {
-  --_se-select-bc-focus: var(--black);
+  box-shadow: 0 0 0 var(--su-static2) var(--focus-neutral), 0 0 0 var(--su-static4) var(--focus-theme);
+  outline: var(--su-static2) solid transparent !important;
 }
 .s-select .s-input-icon {
   right: var(--su32);
@@ -5448,9 +5401,9 @@ body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__green {
   border-color: transparent;
 }
 .s-tag {
-  --_ta-bc: var(--theme-tag-border-color, transparent);
-  --_ta-bc-hover: var(--theme-tag-hover-border-color, transparent);
-  --_ta-bc-selected: var(--theme-tag-selected-border-color, transparent);
+  --_ta-bc: var(--theme-tag-border-color, var(--_ta-bg));
+  --_ta-bc-hover: var(--theme-tag-hover-border-color, var(--_ta-bg-hover));
+  --_ta-bc-selected: var(--theme-tag-selected-border-color, var(--_ta-bg-selected));
   --_ta-bg: var(--theme-tag-background-color, var(--theme-secondary-100));
   --_ta-bg-hover: var(--theme-tag-hover-background-color, var(--theme-secondary-200));
   --_ta-bg-selected: var(--theme-tag-selected-background-color, var(--theme-secondary-300));
@@ -5463,6 +5416,7 @@ body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__green {
   --_ta-pl: var(--_ta-px);
   --_ta-pr: var(--_ta-px);
   --_ta-px: var(--su4);
+  --_ta-dismiss-padding: calc(var(--_ta-px) - var(--su-static1));
   background-color: var(--_ta-bg);
   border: var(--su-static1) solid var(--_ta-bc);
   border-radius: var(--_ta-br);
@@ -5487,8 +5441,7 @@ body.theme-highcontrast .s-tag {
 .s-tag.is-selected,
 a.s-tag.is-selected,
 a.s-tag.is-selected:active,
-a.s-tag.is-selected:hover,
-a.s-tag.is-selected:focus {
+a.s-tag.is-selected:hover {
   background-color: var(--_ta-bg-selected);
   border-color: var(--_ta-bc-selected);
   color: var(--_ta-fc-selected);
@@ -5496,9 +5449,7 @@ a.s-tag.is-selected:focus {
 body.theme-highcontrast .s-tag.is-selected,
 body.theme-highcontrast a.s-tag.is-selected,
 body.theme-highcontrast a.s-tag.is-selected:active,
-body.theme-highcontrast a.s-tag.is-selected:hover,
-body.theme-highcontrast a.s-tag.is-selected:focus {
-  --_ta-bc-selected: transparent;
+body.theme-highcontrast a.s-tag.is-selected:hover {
   --_ta-fc-selected: var(--white);
 }
 .s-tag.s-tag__xs {
@@ -5566,13 +5517,10 @@ body.theme-highcontrast .s-tag.s-tag__moderator {
   --_ta-bg-selected: var(--orange-500);
 }
 .s-tag.s-tag__muted:not(.s-tag__moderator):not(.s-tag__required) {
-  --_ta-bc: transparent;
   --_ta-bg: var(--black-150);
   --_ta-fc: var(--black-400);
-  --_ta-bc-hover: transparent;
   --_ta-bg-hover: var(--black-200);
   --_ta-fc-hover: var(--black-500);
-  --_ta-bc-selected: transparent;
   --_ta-bg-selected: var(--black-225);
   --_ta-fc-selected: var(--black-600);
 }
@@ -5580,9 +5528,9 @@ body.theme-highcontrast .s-tag.s-tag__muted:not(.s-tag__moderator):not(.s-tag__r
   --_ta-bc: currentColor;
 }
 .s-tag.s-tag__required:not(.s-tag__moderator) {
-  --_ta-bc: var(--theme-tag-required-border-color, transparent);
-  --_ta-bc-hover: var(--theme-tag-required-hover-border-color, transparent);
-  --_ta-bc-selected: var(--theme-tag-required-selected-border-color, transparent);
+  --_ta-bc: var(--theme-tag-required-border-color, var(--_ta-bg));
+  --_ta-bc-hover: var(--theme-tag-required-hover-border-color, var(--_ta-bg-hover));
+  --_ta-bc-selected: var(--theme-tag-required-selected-border-color, var(--_ta-bg-selected));
   --_ta-bg: var(--theme-tag-required-background-color, var(--theme-secondary-500));
   --_ta-bg-hover: var(--theme-tag-required-hover-background-color, var(--theme-secondary-400));
   --_ta-bg-selected: var(--theme-tag-required-selected-background-color, var(--theme-secondary-600));
@@ -5594,25 +5542,34 @@ body.theme-highcontrast .s-tag.s-tag__muted:not(.s-tag__moderator):not(.s-tag__r
 .s-tag.s-tag__watched {
   --_ta-before-icon: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7.05 1C2.63 1 0 6.5 0 6.5S2.63 12 7.05 12C11.38 12 14 6.5 14 6.5S11.37 1 7.05 1ZM7 10.17A3.59 3.59 0 0 1 3.5 6.5 3.6 3.6 0 0 1 7 2.83c1.94 0 3.5 1.65 3.5 3.67A3.57 3.57 0 0 1 7 10.17Zm0-1.84c.97 0 1.75-.81 1.75-1.83S7.97 4.67 7 4.67s-1.75.81-1.75 1.83S6.03 8.33 7 8.33Z'/%3E%3C/svg%3E");
 }
-.s-tag .s-tag--dismiss {
-  align-content: center;
-  align-self: center;
+.s-tag button.s-tag--dismiss:not(.s-btn) {
+  all: unset;
+}
+.s-tag .s-tag--dismiss,
+.s-tag button.s-tag--dismiss:not(.s-btn) {
+  align-items: center;
+  align-self: stretch;
   background-color: transparent;
   border-radius: var(--br-sm);
   color: inherit;
   cursor: pointer;
   display: flex;
-  height: var(--su-static16);
   justify-content: center;
-  margin-left: var(--su4);
-  padding: var(--su1);
-  width: var(--su-static16);
+  margin: var(--su-static1) calc(var(--_ta-dismiss-padding) * -1) var(--su-static1) var(--_ta-dismiss-padding);
+  padding: var(--_ta-dismiss-padding);
 }
-.s-tag .s-tag--dismiss:hover {
+.s-tag .s-tag--dismiss:focus-visible,
+.s-tag button.s-tag--dismiss:not(.s-btn):focus-visible {
+  box-shadow: 0 0 0 var(--su-static2) var(--focus-neutral), 0 0 0 var(--su-static4) var(--focus-theme);
+  outline: var(--su-static2) solid transparent !important;
+}
+.s-tag .s-tag--dismiss:hover,
+.s-tag button.s-tag--dismiss:not(.s-btn):hover {
   background-color: var(--_ta-fc);
   color: var(--_ta-bg);
 }
-body.theme-highcontrast .s-tag .s-tag--dismiss:hover {
+body.theme-highcontrast .s-tag .s-tag--dismiss:hover,
+body.theme-highcontrast .s-tag button.s-tag--dismiss:not(.s-btn):hover {
   color: var(--white);
 }
 .s-tag .s-tag--sponsor {
@@ -5628,17 +5585,20 @@ body.theme-highcontrast .s-tag .s-tag--dismiss:hover {
   height: 100%;
 }
 a.s-tag:not(.is-selected):hover,
-a.s-tag:not(.is-selected):focus,
 a.s-tag:not(.is-selected):active {
   background-color: var(--_ta-bg-hover);
   border-color: var(--_ta-bc-hover);
   color: var(--_ta-fc-hover);
 }
 body.theme-highcontrast a.s-tag:not(.is-selected):hover,
-body.theme-highcontrast a.s-tag:not(.is-selected):focus,
 body.theme-highcontrast a.s-tag:not(.is-selected):active {
   border-color: currentColor;
 }
+.s-tag:focus-visible {
+  border-color: var(--focus-neutral) !important;
+  box-shadow: 0 0 0 var(--su-static1) var(--focus-neutral), 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-theme);
+  outline: var(--su-static2) solid transparent !important;
+}
 .s-toast {
   display: flex;
   justify-content: center;
@@ -5676,7 +5636,6 @@ body.theme-highcontrast a.s-tag:not(.is-selected):active {
   --_ts-bg: var(--black-350);
   --_ts-bg-image: url("data:image/svg+xml;,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='hsl(0, 0%, 100%)'/%3e%3c/svg%3e");
   --_ts-bg-ps: left center;
-  --_ts-bs-color: transparent;
   --_ts-multiple-bg: unset;
   --_ts-multiple-fc: var(--black-400);
 }
@@ -5715,15 +5674,12 @@ fieldset[disabled] .s-toggle-switch label,
   --_ts-multiple-bg: var(--green-400);
   --_ts-multiple-fc: var(--white);
 }
-.s-toggle-switch.s-toggle-switch__multiple input[type="radio"]:checked:focus + label {
-  --_ts-bs-color: var(--focus-ring-success);
-}
-.s-toggle-switch.s-toggle-switch__multiple input[type="radio"]:checked:focus + label.s-toggle-switch--label-off {
-  --_ts-bs-color: var(--focus-ring-muted);
+.s-toggle-switch.s-toggle-switch__multiple input[type="radio"]:focus-visible + label {
+  box-shadow: inset 0 0 0 var(--su-static2) var(--focus-theme), inset 0 0 0 var(--su-static4) var(--focus-neutral);
+  outline: var(--su-static2) solid transparent !important;
 }
 .s-toggle-switch.s-toggle-switch__multiple label {
   background-color: var(--_ts-multiple-bg);
-  box-shadow: 0 0 0 var(--su-static4) var(--_ts-bs-color);
   color: var(--_ts-multiple-fc);
   border-radius: 1000px;
   cursor: pointer;
@@ -5743,7 +5699,6 @@ fieldset[disabled] .s-toggle-switch label,
 input[type="checkbox"].s-toggle-switch {
   background-color: var(--_ts-bg);
   background-position: var(--_ts-bg-ps);
-  box-shadow: 0 0 0 var(--su-static4) var(--_ts-bs-color);
   appearance: none;
   background-image: var(--_ts-bg-image);
   background-size: contain;
@@ -5762,14 +5717,10 @@ input[type="checkbox"].s-toggle-switch:checked {
   --_ts-bg: var(--green-400);
   --_ts-bg-ps: right center;
 }
-.s-toggle-switch input[type="checkbox"]:checked:focus,
-input[type="checkbox"].s-toggle-switch:checked:focus {
-  --_ts-bs-color: var(--focus-ring-success);
-}
-.s-toggle-switch input[type="checkbox"]:focus,
-input[type="checkbox"].s-toggle-switch:focus {
-  --_ts-bs-color: var(--focus-ring-muted);
-  outline: none;
+.s-toggle-switch input[type="checkbox"]:focus-visible,
+input[type="checkbox"].s-toggle-switch:focus-visible {
+  box-shadow: 0 0 0 var(--su-static2) var(--focus-neutral), 0 0 0 var(--su-static4) var(--focus-theme);
+  outline: var(--su-static2) solid transparent !important;
 }
 .s-toggle-switch input[type="checkbox"][disabled],
 input[type="checkbox"].s-toggle-switch[disabled] {
@@ -5792,7 +5743,6 @@ body.theme-highcontrast .s-topbar {
   --theme-topbar-search-background: var(--theme-topbar-background-color, var(--white));
   --theme-topbar-search-placeholder: var(--theme-topbar-item-color, var(--black-400));
   --theme-topbar-search-border: var(--theme-topbar-item-color, var(--black-400));
-  --theme-topbar-search-border-focus: var(--theme-topbar-item-color, var(--black-400));
   --theme-topbar-select-color: var(--theme-topbar-item-color, var(--black-400));
   --theme-topbar-select-background: var(--theme-topbar-background-color, var(--white));
   --theme-topbar-item-color: var(--black-600);
@@ -5803,6 +5753,40 @@ body.theme-highcontrast .s-topbar {
 body.theme-highcontrast .s-topbar {
   border-bottom: 1px solid currentColor;
 }
+.s-topbar.s-topbar__light {
+  --focus-neutral: hsl(0, 0%, 100%);
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-system .s-topbar.s-topbar__light {
+    --focus-theme: var(--theme-dark-secondary-custom-200, var(--blue-200));
+  }
+}
+body.theme-dark .s-topbar.s-topbar__light,
+.theme-dark__forced .s-topbar.s-topbar__light,
+body.theme-system .theme-dark__forced .s-topbar.s-topbar__light {
+  --focus-theme: var(--theme-dark-secondary-custom-200, var(--blue-200));
+}
+@media (prefers-color-scheme: dark) {
+  body.theme-highcontrast.theme-system .s-topbar.s-topbar__light {
+    --focus-theme: var(--blue-200);
+  }
+}
+body.theme-highcontrast.theme-dark .s-topbar.s-topbar__light {
+  --focus-theme: var(--blue-200);
+}
+body.theme-highcontrast .s-topbar.s-topbar__dark {
+  --focus-theme: hsl(210, 89%, 77%);
+}
+.s-topbar.s-topbar__dark {
+  --focus-neutral: hsl(210, 8%, 5%);
+  --focus-theme: var(--theme-dark-secondary-custom-400, hsl(210, 89%, 77%));
+}
+a.s-topbar--logo:focus-visible,
+.s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset):focus-visible,
+.s-topbar--notice:focus-visible {
+  box-shadow: inset 0 0 0 var(--su-static2) var(--focus-theme), inset 0 0 0 var(--su-static4) var(--focus-neutral);
+  outline: var(--su-static2) solid transparent !important;
+}
 .s-topbar .s-topbar--container {
   width: var(--s-full);
   max-width: 100%;
@@ -5817,6 +5801,7 @@ body.theme-highcontrast .s-topbar {
   display: flex;
   align-items: center;
   background-color: transparent;
+  border-radius: var(--br-sm);
 }
 .s-topbar a.s-topbar--logo:hover {
   background-color: var(--theme-topbar-item-background-hover, var(--black-200));
@@ -5872,9 +5857,6 @@ body.theme-highcontrast .s-topbar {
   color: var(--theme-topbar-item-color-hover, var(--black-400));
   background-color: var(--theme-topbar-item-background-hover, var(--black-200));
 }
-.s-topbar .s-navigation .s-navigation--item:focus-visible {
-  box-shadow: var(--theme-topbar-search-shadow-focus, 0 0 0 var(--su-static4) var(--focus-ring));
-}
 .s-topbar .s-navigation .s-navigation--item:not(.is-selected) {
   color: var(--theme-topbar-item-color, var(--black-400));
 }
@@ -5882,9 +5864,6 @@ body.theme-highcontrast .s-topbar {
   color: var(--theme-topbar-item-color-hover, var(--black-400));
   background-color: var(--theme-topbar-item-background-hover, var(--black-200));
 }
-.s-topbar .s-popover .s-navigation .s-navigation--item:focus-visible {
-  box-shadow: var(0 0 0 var(--su-static4) var(--focus-ring));
-}
 .s-topbar .s-popover .s-navigation .s-navigation--item:not(.is-selected) {
   color: var(--black-500);
 }
@@ -5899,8 +5878,6 @@ body.theme-highcontrast .s-topbar {
   --theme-topbar-search-background: var(--_white-static);
   --theme-topbar-search-placeholder: hsl(210, 8%, 42%);
   --theme-topbar-search-border: hsl(210, 9%, 75%);
-  --theme-topbar-search-border-focus: hsl(210, 77%, 46%);
-  --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
   --theme-topbar-select-color: hsl(210, 8%, 25%);
   --theme-topbar-select-background: hsl(210, 8%, 90%);
   --theme-topbar-item-color: hsl(210, 8%, 42%);
@@ -5922,8 +5899,6 @@ body.theme-highcontrast .s-topbar__light {
   --theme-topbar-search-background: hsl(210, 8%, 25%);
   --theme-topbar-search-placeholder: hsl(210, 8%, 85%);
   --theme-topbar-search-border: hsl(210, 8%, 45%);
-  --theme-topbar-search-border-focus: hsl(210, 8%, 70%);
-  --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) hsla(0, 0%, 100%, 0.3);
   --theme-topbar-select-color: hsl(210, 8%, 85%);
   --theme-topbar-select-background: hsl(210, 8%, 35%);
   --theme-topbar-item-color: hsl(210, 8%, 85%);
@@ -6004,22 +5979,18 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
   text-decoration: none;
   white-space: nowrap;
   position: relative;
+  border-radius: var(--br-sm);
 }
 .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset):hover,
-.s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset):focus,
 .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected,
-.s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected:hover,
-.s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected:focus {
+.s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected:hover {
   color: var(--theme-topbar-item-color-hover, var(--black-600));
   background-color: var(--theme-topbar-item-background-hover, var(--black-200));
   text-decoration: none;
-  outline: none;
 }
 .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset):hover .s-activity-indicator,
-.s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset):focus .s-activity-indicator,
 .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected .s-activity-indicator,
-.s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected:hover .s-activity-indicator,
-.s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected:focus .s-activity-indicator {
+.s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected:hover .s-activity-indicator {
   top: calc(50% - calc(var(--su16) + var(--su2)));
   box-shadow: 0 0 0 var(--su-static2) var(--theme-topbar-item-background-hover, var(--black-200));
 }
@@ -6049,8 +6020,7 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
   background-color: transparent;
   color: var(--theme-topbar-item-color, var(--black-400));
 }
-.s-topbar--notice:hover,
-.s-topbar--notice:focus {
+.s-topbar--notice:hover {
   border-color: var(--theme-topbar-item-background-hover, var(--black-200));
   background-color: var(--theme-topbar-item-background-hover, var(--black-200));
   color: var(--theme-topbar-item-color-hover, var(--black-600));
@@ -6060,8 +6030,7 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
   background-color: var(--theme-primary);
   color: var(--white);
 }
-.s-topbar--notice.is-unread:hover,
-.s-topbar--notice.is-unread:focus {
+.s-topbar--notice.is-unread:hover {
   border-color: var(--theme-primary-500);
   background-color: var(--theme-primary-500);
   color: var(--white);
@@ -6078,16 +6047,14 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
   flex-grow: 1;
 }
 .s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group .s-input {
-  border-color: var(--theme-topbar-search-border, var(--black-300));
   background-color: var(--theme-topbar-search-background, var(--white));
-  box-shadow: var(--theme-topbar-search-shadow);
+  border-color: var(--theme-topbar-search-border, var(--black-300));
   color: var(--theme-topbar-search-color, var(--black-500));
   display: block;
   line-height: var(--lh-sm);
 }
-.s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group .s-input:focus {
-  border-color: var(--theme-topbar-search-border-focus, var(--blue-400));
-  box-shadow: var(--theme-topbar-search-shadow-focus, 0 0 0 var(--su-static4) var(--focus-ring));
+.s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group .s-input:not(:focus-visible) {
+  box-shadow: var(--theme-topbar-search-shadow);
 }
 .s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group .s-input::placeholder {
   color: var(--theme-topbar-search-placeholder, var(--black-400));
@@ -6107,17 +6074,15 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
   z-index: var(--zi-active);
 }
 .s-topbar .s-topbar--searchbar .s-select > select {
+  border-color: var(--theme-topbar-search-border, var(--black-300));
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
   height: 100%;
   line-height: var(--lh-sm);
-  border-color: var(--theme-topbar-search-border, var(--black-300));
   background-color: var(--theme-topbar-select-background, var(--black-200));
   color: var(--theme-topbar-select-color, var(--black-500));
 }
-.s-topbar .s-topbar--searchbar .s-select > select:focus {
-  border-color: var(--theme-topbar-search-border-focus, var(--blue-400));
-  box-shadow: var(--theme-topbar-search-shadow-focus, 0 0 0 var(--su-static4) var(--focus-ring));
+.s-topbar .s-topbar--searchbar .s-select > select:focus-visible {
   z-index: var(--zi-selected);
 }
 .s-topbar .s-topbar--searchbar .s-select + .s-topbar--searchbar--input-group > .s-input {
@@ -6229,7 +6194,8 @@ body.theme-highcontrast .s-uploader.has-warning {
 }
 .s-uploader .s-uploader--input:focus:focus-visible + .s-uploader--container {
   background-color: var(--_up-bg-focus);
-  box-shadow: 0 0 0 var(--su-static4) var(--_up-focus-ring-color);
+  box-shadow: 0 0 0 var(--su-static2) var(--focus-neutral), 0 0 0 var(--su-static4) var(--focus-theme);
+  outline: var(--su-static2) solid transparent !important;
 }
 .s-uploader .s-uploader--preview {
   max-width: 100%;
@@ -7566,6 +7532,8 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
   --translucent-warning: hsla(47, 79%, 58%, 0.4);
   --translucent-error: hsla(358, 62%, 47%, 0.15);
   --translucent-muted: hsla(210, 8%, 15%, 0.1);
+  --focus-neutral: var(--white);
+  --focus-theme: var(--theme-secondary-400);
   --focus-ring: var(--theme-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.15));
   --focus-ring-success: hsla(140, 40%, 75%, 0.4);
   --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
@@ -7698,6 +7666,8 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
   --translucent-warning: hsla(47, 79%, 58%, 0.4);
   --translucent-error: hsla(358, 62%, 47%, 0.15);
   --translucent-muted: hsla(210, 8%, 15%, 0.1);
+  --focus-neutral: var(--white);
+  --focus-theme: var(--theme-secondary-400);
   --focus-ring: var(--theme-dark-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.25));
   --focus-ring-success: hsla(140, 40%, 75%, 0.4);
   --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
@@ -7828,6 +7798,8 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
     --translucent-warning: hsla(47, 79%, 58%, 0.4);
     --translucent-error: hsla(358, 62%, 47%, 0.15);
     --translucent-muted: hsla(210, 8%, 15%, 0.1);
+    --focus-neutral: var(--white);
+    --focus-theme: var(--theme-secondary-400);
     --focus-ring: var(--theme-dark-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.25));
     --focus-ring-success: hsla(140, 40%, 75%, 0.4);
     --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
@@ -7958,6 +7930,8 @@ body.theme-highcontrast.theme-system .theme-light__forced {
   --translucent-warning: hsla(47, 76%, 46%, 0.9);
   --translucent-error: hsla(358, 62%, 47%, 0.9);
   --translucent-muted: hsla(210, 8%, 55%, 0.95);
+  --focus-neutral: var(--white);
+  --focus-theme: var(--theme-secondary-400);
   --focus-ring: hsla(206, 100%, 40%, 0.9);
   --focus-ring-success: hsla(140, 40%, 40%, 0.9);
   --focus-ring-warning: hsla(47, 76%, 46%, 0.9);
@@ -8070,6 +8044,8 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
   --translucent-warning: hsla(47, 76%, 46%, 0.9);
   --translucent-error: hsla(358, 62%, 47%, 0.9);
   --translucent-muted: hsla(210, 8%, 55%, 0.95);
+  --focus-neutral: var(--white);
+  --focus-theme: var(--theme-secondary-400);
   --focus-ring: hsla(206, 100%, 40%, 0.9);
   --focus-ring-success: hsla(140, 40%, 40%, 0.9);
   --focus-ring-warning: hsla(47, 76%, 46%, 0.9);
@@ -8182,6 +8158,8 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
     --translucent-warning: hsla(47, 76%, 46%, 0.9);
     --translucent-error: hsla(358, 62%, 47%, 0.9);
     --translucent-muted: hsla(210, 8%, 55%, 0.95);
+    --focus-neutral: var(--white);
+    --focus-theme: var(--theme-secondary-400);
     --focus-ring: hsla(206, 100%, 40%, 0.9);
     --focus-ring-success: hsla(140, 40%, 40%, 0.9);
     --focus-ring-warning: hsla(47, 76%, 46%, 0.9);
@@ -8218,6 +8196,15 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
   }
 }
 /* stylelint-disable indentation */
+/**
+ * Focus styles for the given context.
+ *
+ * Usage example:
+ * .focus-styles(true, true);
+ *
+ * @inset: boolean - whether the focus style be placed inside the element.
+ * @border: boolean - whether the element's border color change to match the focus style.
+ */
 .bc-white-legacy-1 {
   border-color: var(--black-legacy-500) !important;
 }